Upload folder using huggingface_hub

.gitattributes

@@ -33,3 +33,5 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+client/public/favicon-512.png filter=lfs diff=lfs merge=lfs -text
+client/public/favicon.ico filter=lfs diff=lfs merge=lfs -text

DEPLOYMENT_CHECKLIST.md

@@ -0,0 +1,150 @@
+# 🚀 Hugging Face Spaces Deployment Checklist
+
+## ✅ Pre-Deployment Setup
+
+### 1. MongoDB Atlas Database
+- [ ] Create MongoDB Atlas account
+- [ ] Create a new cluster (free tier)
+- [ ] Create database user with read/write permissions
+- [ ] Get connection string
+- [ ] Test connection locally
+
+### 2. Hugging Face Account
+- [ ] Create Hugging Face account
+- [ ] Enable Spaces feature
+- [ ] Verify account permissions
+
+## 🏗️ Backend Deployment
+
+### 1. Create Backend Space
+- [ ] Go to https://huggingface.co/spaces
+- [ ] Click "Create new Space"
+- [ ] Choose "Docker" as SDK
+- [ ] Name: `your-username/transcreation-backend`
+- [ ] Set to "Public" or "Private"
+
+### 2. Upload Backend Files
+- [ ] Upload all files from `deploy/backend/`
+- [ ] Verify Dockerfile is in root of Space
+- [ ] Verify package.json is present
+
+### 3. Configure Environment Variables
+- [ ] Go to Settings → Repository secrets
+- [ ] Add `MONGODB_URI`: `mongodb+srv://username:password@cluster.mongodb.net/transcreation-sandbox`
+- [ ] Add `NODE_ENV`: `production`
+- [ ] Add `PORT`: `5000`
+
+### 4. Deploy Backend
+- [ ] Wait for build to complete
+- [ ] Check logs for any errors
+- [ ] Test health endpoint: `https://your-username-transcreation-backend.hf.space/health`
+- [ ] Test API endpoint: `https://your-username-transcreation-backend.hf.space/api/health`
+
+## 🎨 Frontend Deployment
+
+### 1. Create Frontend Space
+- [ ] Go to https://huggingface.co/spaces
+- [ ] Click "Create new Space"
+- [ ] Choose "Docker" as SDK
+- [ ] Name: `your-username/transcreation-frontend`
+- [ ] Set to "Public" or "Private"
+
+### 2. Upload Frontend Files
+- [ ] Upload all files from `deploy/frontend/`
+- [ ] Verify Dockerfile is in root of Space
+- [ ] Verify nginx.conf is present
+
+### 3. Configure Environment Variables
+- [ ] Go to Settings → Repository secrets
+- [ ] Add `REACT_APP_API_URL`: `https://your-username-transcreation-backend.hf.space/api`
+
+### 4. Deploy Frontend
+- [ ] Wait for build to complete
+- [ ] Check logs for any errors
+- [ ] Test frontend URL: `https://your-username-transcreation-frontend.hf.space`
+
+## 🧪 Testing
+
+### 1. Backend Testing
+- [ ] Health check: `https://your-backend-url/health`
+- [ ] API health: `https://your-backend-url/api/health`
+- [ ] Database connection working
+- [ ] CORS headers present
+
+### 2. Frontend Testing
+- [ ] Page loads without errors
+- [ ] Can navigate between pages
+- [ ] API calls work (check browser console)
+- [ ] Login functionality works
+- [ ] All features accessible
+
+### 3. Integration Testing
+- [ ] Frontend can connect to backend
+- [ ] User registration/login works
+- [ ] Tutorial tasks load
+- [ ] Weekly practice loads
+- [ ] Voting system works
+- [ ] Admin features work (if admin user)
+
+## 🔧 Troubleshooting
+
+### Common Issues
+
+1. **Backend Build Fails**
+   - Check Dockerfile syntax
+   - Verify all dependencies in package.json
+   - Check environment variables
+
+2. **Frontend Build Fails**
+   - Check React build process
+   - Verify nginx.conf syntax
+   - Check environment variables
+
+3. **Database Connection Issues**
+   - Verify MongoDB Atlas connection string
+   - Check network access settings
+   - Verify database user permissions
+
+4. **CORS Issues**
+   - Check backend CORS configuration
+   - Verify frontend API URL
+   - Check browser console for errors
+
+5. **Environment Variables Not Working**
+   - Verify variable names match exactly
+   - Check for typos in values
+   - Restart Space after adding variables
+
+## 📞 Support
+
+If you encounter issues:
+1. Check Hugging Face Spaces logs
+2. Verify all environment variables
+3. Test locally with Docker Compose first
+4. Check MongoDB Atlas connection
+5. Review browser console for frontend errors
+
+## 🎉 Success Indicators
+
+- [ ] Backend responds to health checks
+- [ ] Frontend loads without errors
+- [ ] Users can register and login
+- [ ] Tutorial tasks and weekly practice load
+- [ ] Voting system works
+- [ ] Admin features accessible
+- [ ] No console errors in browser
+- [ ] All API endpoints responding
+
+## 🔗 Final URLs
+
+- **Backend**: `https://your-username-transcreation-backend.hf.space`
+- **Frontend**: `https://your-username-transcreation-frontend.hf.space`
+- **API Base**: `https://your-username-transcreation-backend.hf.space/api`
+
+## 📝 Notes
+
+- Keep MongoDB Atlas connection string secure
+- Monitor Hugging Face Spaces usage limits
+- Set up monitoring for both Spaces
+- Consider setting up custom domain later
+- Regular backups of MongoDB data recommended 

Dockerfile

@@ -0,0 +1,51 @@
+# Build stage
+FROM node:18-alpine AS build
+
+# Set working directory
+WORKDIR /app
+
+# Copy client package files
+COPY client/package*.json ./
+
+# Install dependencies
+RUN npm ci
+
+# Copy client source code
+COPY client/ ./
+
+# Build the app
+ENV GENERATE_SOURCEMAP=false
+RUN npm run build
+
+# Production stage
+FROM nginx:alpine
+
+# Copy built app to nginx
+COPY --from=build /app/build /usr/share/nginx/html
+
+# Copy nginx configuration
+COPY nginx.conf /etc/nginx/nginx.conf
+
+# Normalize favicon links in the built index.html to avoid stale inlined data URLs
+RUN set -eux; \
+  sed -i 's|<link rel="icon"[^>]*href="data:image[^\"]*\"|<link rel="shortcut icon" href="/favicon.ico"|g' /usr/share/nginx/html/index.html; \
+  sed -i 's|<link rel="apple-touch-icon" href="/logo192.png"|<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"|g' /usr/share/nginx/html/index.html; \
+  grep -q 'favicon-32x32' /usr/share/nginx/html/index.html || sed -i '/<link rel="manifest"/i \\    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">\n    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">' /usr/share/nginx/html/index.html
+
+# Ensure a favicon is available at /favicon.ico to avoid 404s (browsers often request it explicitly)
+# We embed a small PNG and write it to the expected .ico path during the image build (no binaries in repo)
+RUN echo "iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAQKADAAQAAAABAAAAQAAAAABGUUKwAAAMZklEQVR4Ae1ae3CU1RW/j+/b3YTwCAaniFZqKU7LjC2i1hkYjAyGhEikonY6nVZpHUboQIiAj7HVYP+oUpFAWoeq1Pe0FsdXC0l4KHWKjKJjHUWr+ECwpUVBBCHZ7/vuPf2duw+WEEx2s/BHuzfZfPe7z3N+59xzzj0bIUqlhEAJgRICJQRKCJQQKCFQQqCEQAmB/0cE5MlketY48suGJc/S2jvbCnmmkmIoCPCsFYeEpE+MoR2+8t4buHbxrmbRbE8GbScFgMba4Hzf11cRyRoSYrRWMiF72NmAZSI6CMbfBiAd1pgnW9bG/n4igeiBjOJt11QXXqQ8vUgIWeNp4UPSwgIBwqd7IUFC8g8ogma4T2REEqPXEZlld6/xn+8+pxjvJwSABdVUJSrsL6VU1yolPGPAhvtlkgl7Zn+zPKRAYWQkD+UB7gXACWuJf/4QWHVba5t8PzupCJWiAzB3SnBBzPd+73lyTBQx1xmmhNQqJVlWdWhDF3o70ctnPQ6GK3wwy8UwBFk1kYJB4L6uJG0XVk5f2ibfSo10f+W8+uDcuNL1kQlfXrY20Z7T12vV63VEHgMaa6JLfV89pLQcGkYZxqX0lJCs+mD8tcjYNoDyNyL9gaTOAxQnKwNdBls4PDRqrJRyitDyYl/Lgbw1QDxkQnrJBPS00qr9121yO7cvmEpnYtUGnJmr8Hqh70kvCOWPuC+fUjQNmF8TTffj6jEQVM4SZtkrHGg+0zai58japbt26Q2rt8mgNwKvn0qjBdkf4wjttUb8eVmHfI/n3Dh53+AgNmgKgPg+Vr4YGlXpbAr6TGQ/ikidgyNyoLf1c/uLAsD8unCS5+tnQFQFmMcBJqi7ZIO310bi5kFtYlUzxJW7cV/rs6ZReYURkzB9BrTjEq3lCJ7LIGeOCbRFJIPorpY2HwY3v9LvI/CzqV2jPa0fyTAPsiSIhETEWyYIf9iyPn83NguSrkgMGg+7MB3rXaI9OVLBmjLTEcOYMiyoQH7YGN4iUNZ7ND/WU6P7BcA11ZSIS1oFaZ8WsuUCNR4kbyJ689Ch5LSVm8p29JWo2fVUWUZivFT2MsQLk5WSI9losgdhxk3GKPI2aS/C9pXHhAG9OKTj9jf6ulfuuH4BMKTMLoLRm5BmniAkSIN2GyOv6AvzC6ZRlbFmIoTYICVNguackZE0n22cf8iaXWKmZFxk+l0SWxl4FPtwoZFjwQDMrUt+C6p5Q1ol2djh6JMxxl63vN17J0Ny9+f8KTRca1MNC9kA7i7ytR4O4NJSZok7EfNJ4sgoVdwT764rDQL6JbQNXmK3ifSz3ffp63vBAGjp3eppWRHC16dUX4hkkh4A88cQM7+2c6TnJS6GfYTbogla6SpmjiND5hf2wmk1H+5UQScD6t4d99ycraSqBPcqRVdkn/rtRr03PTHvB7DPvyDwGOd56nswPq6wq0P908Amb+++2vX15g4/Fn9dacHB0XRY8irWGp7Lap7iMV3J8J8Ggt0oB0GII3K4d4OgHZC+EZGw6kHekw0nP/MtBQGgSc2G8YnBLjnT5IxVZB+8Z135rlwCZk/YXwlCZ+IzKM00PFeaAWbS1fmJWazyHP7iyYyj4C4kdkQRPRUEtikMTb0l2gsA3XC3p6UXK9vFq02XHh5R5g28JXfvvtbzBmBuHQ0TUjU4PwyKmVYQ2WXC6IHum8YGVYyHhziVxzouU4yyNDGNmXSM5kxjFwqPb2i9DBHd7Rfn3L1GXd7SpltWtHtrcSd4Bv08zU1EcOXiC7Lxa6VSlwrRnDc/+U+QZmLMl8Pg6vZAmntZElDlra0bY2/ncOKqkGQDGzgcVeceEc+z3eLLDSI82t19vAMEINlILl/aLrcu2Sz5anykGLsKam8QZjDoO63QT7NAtFZzAOnAOdVzyo8M7lutAABkNWsuGPgTxBhnDQACz4F4lm+23DiZcCadplhjaVcUUnsYisVRZKZ2dspvY403GDxmOjPRaZOhj2Jx8UJ2oZzK7sHeSwDv5RibbkuPctirhW30PXEqYxyPD4vlDO9TtQAvIMeCkc0g+h8IQSvgqxG2q1e670blIDEUC2Dl34kFcvudG+TnmTGNU+m78CCTUkfDyZ273G0RF5+/LFmjjpZ8euLq1dI01pqHkqE4T4RqFaR/utY0x123YT2Shz7PYJnZqtdnXgDMGveKD7X/CgKPRUrrC1liYCISSuzsvtOSZ536Pta9nd+VoEWI9DwGL1WwUGotKJZ9PNPa09PK5Jow8Eev2OB/0FRv7oU3qnRASnE4YQ7iip1fyesIDEkMSwCAdw906Tbo4EiGG0a7K1JdWen2tj0CoXMR8U1zAdSRwbD8Lgja9u+PvZeONB9ba20r/3ho0rsRF7DxOPtXhwDRHUMh9izbcvqJBWB/2WfKhuEfH9wkuxCE+qDZOS6KEs7OH0vusS1S2wWw5DirgM8twGNg/blO9Hhfrst7y3AF0HoZGHfrpAAgGOGj7dCxux/bkpcGnDah8qBX+elqtwzR/vRyZZ4v+hSEzK0LxiJZMoODoDSxLpJgX4oEyiFpwy9V//R+yJfYm5EAOT9lQ4Acq6KlzZn+fJ552YDmZnen73QbkH0HKQ8BdfYoNKPQ9mZvG3vK+znGx3Fh4qEsc1fYG4RWtC3rSLjER6a9p6fLPWh5UwpEXgfgGfFFZPTzPY3vrS0vDchdTJL3Anwx3wChwEhj9VKaptBkMH+ZI9xFfZiQxgEXIDKBWdnLEqJxcudXldKroDHxTBDJYTIuFC/8Zp38sLf5PfUXDMA/d731KojYyotqpa5g4nragNs4qyN9WgJDpx3TuMilFAANiOzgxjbvHuJtOt58br9h/CcDdTz+CO4TI1OqD/RwdFyqPbK/+7K5X9ZXMACrt40JKLK3g3hCIFIl/XjrlWOox0BkgLG/wJkd283yOwwI5pOMvZN9/PEI5cRLVHnKA74vJx5Zg5MvLiLc0rmPvVJhpWAAeLuWDm9NGNrFLIVEQjacfiY9Mb+evtlcTVnbMr82uhxSW3jkzPJMZ/IdAwipN/5r8PEZWFhDA4YOoIcB4Ax2ea7wdHzc9wXG3Hbvq7g5FFj6BQDvuaJdL04mzU+CgN5A7H+JInpif8I0cF9jTTgRydL7cXf1YO7Rwm6KnzAb4ADak7RG3nI86V83iUaQT09D8lemmHdzeb7wWfqGHl6+zl/vGgr8w1gWpdTVbY+P6hwxzIuXHUYae19THdVoTzyGY4q0FwhHzivLO3aEREWQtEuXtemFPRHgwIvp+xAyj4aHSBfnNdnzCBvS+yZ5ePzyjRX/yfQW8iwaALmbXz/VzEPu/lcQcjkfj7TU8XQaIMGUCEN6LaLPqlvbTjkqj88Gc4C1CxEq34RPGcf56WluHXf/xjdKQZepa13v/xWN/SrZs9qvVdKTG2twyYnRbcgB1LGrx/d56MlgzMzjHgBXgBTYvshEM1s7cpkniYvONI/oVsT349jYpfKDmO9mchLIJQIICZJ5xWCe6SkYACijnFf3XszTo6qQuuE83w+kEnVgPna0wXPUYyvOYeLqaykZhPaa1nWx15kANnJWmlrpizlS6klYgwMbHo8Pg5d6YirCLiGCILp5RYd/P6pFKRnx5L0Y5+DKdcVi5Xsz454cxMJmxvFIU84PLikmnOoS8oZBMDsuYm1GR+fhq6+pQOUyaMXZPDLr3/klyzwYZ+4JOZDQLmrp0C2uu0h/CgaA959TTRWxMlOLXP5MKOdFMHoDmG0+9459F65lAeCc+VYp1C5I+QKMP4MTnjyOGUe+L3tYuC1FWCopiqOwx3TZ2S0bvCfRVdTSLwByKWmspbOVsrXQ9Bow+B0wMRzGzgk+M46vvPxhbWGm4cYOg+8PcAvEt9vqLIxjLUfBccFAfkG4vb4rCBvv2RDHba/4pWgA5JLWNOXzoVYO+rpS5hvgZST4PRWgVOA/Adg27kcqeyfet0fW+IjmcATUDAQGQ1nuDiRw7nJ+lu4Y0qnua94k3bcPuXsUq35CAOiNuKYpXaOE9n8K9bgaUeJwPjLMOJ8YqPsOGMpVnVbdu3Kd3NPbWv3tPwkAkJxb90WVpsQY6PUEfOrB7IUJH1IG4/zNEhhmRrfISK7ef/BA26otg/f1l7G+zi/YDfZ1AwhVNEX4Tt+D4ZPia8jl70QS8d1Dxu5VJD7E+5uKvG13nQRp95Xm0rgSAiUESgiUECghUEKghEAJgRICJQT+9xH4LzpXYyOcWn3pAAAAAElFTkSuQmCC" | base64 -d > /usr/share/nginx/html/favicon.ico
+
+# Create necessary directories and set permissions
+RUN mkdir -p /var/cache/nginx/client_temp /var/cache/nginx/proxy_temp /var/cache/nginx/fastcgi_temp /var/cache/nginx/uwsgi_temp /var/cache/nginx/scgi_temp /run && \
+    chmod 700 /var/cache/nginx/* && \
+    chown -R nginx:nginx /var/cache/nginx /var/run /var/log/nginx /usr/share/nginx/html /run
+
+# Expose port
+EXPOSE 7860
+
+# Start nginx
+CMD ["nginx", "-g", "daemon off;"]
+# rebuild trigger 2025-08-28T12:44:19Z
+
+# force rebuild 2025-09-02T06:06:39Z

README.md

@@ -1,12 +1,47 @@
 ---
-title: TransHub Frontend
-emoji: 😻
-colorFrom: blue
-colorTo: blue
+title: Transcreation Sandbox
+emoji: 🌐
+colorFrom: indigo
+colorTo: purple
 sdk: docker
 pinned: false
-license: mit
-short_description: Online collaborative translation platform (frontend)
+---
+
+# Transcreation Sandbox
+
+A web-based platform for postgraduate translation students to practice transcreation and intercultural mediation.
+
+## Features
+
+- **User Authentication**: Login and registration system
+- **Tutorial Tasks**: Weekly tutorial assignments with translation briefs and image uploads
+- **Weekly Practice**: Practice exercises with cultural mediation tasks
+- **Submission Management**: Create and manage translation submissions
+- **Voting System**: Vote on peer submissions
+- **Admin Panel**: Manage content and users (admin only)
+- **Image Upload**: Support for local image uploads in tutorial tasks
+
+## Tech Stack
+
+- **React 18** with TypeScript
+- **Tailwind CSS** for styling
+- **React Router** for navigation
+- **Axios** for API communication
+- **Docker** for containerization
+- **Nginx** for serving static files
+
+## Environment Variables
+
+Set these in your Space settings:
+
+- `REACT_APP_API_URL`: Your backend API URL (e.g., `https://linguabot-transcreation-backend.hf.space/api`)
+
+## Development
+
+This Space serves the React frontend for the Transcreation Sandbox application. The backend API should be deployed separately and configured via the `REACT_APP_API_URL` environment variable.
+
 ---
 
 Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+
+Build trigger: 2025-08-28T12:42:20Z

client/Dockerfile

@@ -0,0 +1,33 @@
+# Build stage
+FROM node:18-alpine AS build
+
+# Set working directory
+WORKDIR /app
+
+# Copy package files
+COPY client/package*.json ./
+
+# Install dependencies
+RUN npm ci
+
+# Copy source code
+COPY client/ ./
+
+# Build the app
+RUN npm run build
+
+# Production stage
+FROM nginx:alpine
+
+# Copy built app to nginx
+COPY --from=build /app/build /usr/share/nginx/html
+
+# Copy nginx configuration
+COPY nginx.conf /etc/nginx/nginx.conf
+
+# Expose port
+EXPOSE 80
+
+# Start nginx
+CMD ["nginx", "-g", "daemon off;"] 
+# rebuild trigger 2025-09-02T05:59:28Z

client/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "transcreation-sandbox-client",
+  "version": "1.0.1",
+  "description": "Frontend for Transcreation Sandbox",
+  "private": true,
+  "dependencies": {
+    "@types/node": "^16.18.0",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.8.0",
+    "react-scripts": "5.0.1",
+    "typescript": "^4.9.5",
+    "axios": "^1.6.2",
+    "react-query": "^3.39.3",
+    "react-hook-form": "^7.48.2",
+    "react-hot-toast": "^2.4.1",
+    "lucide-react": "^0.294.0",
+    "clsx": "^2.0.0",
+    "tailwindcss": "^3.3.6",
+    "autoprefixer": "^10.4.16",
+    "postcss": "^8.4.32",
+    "@headlessui/react": "^1.7.17",
+    "@heroicons/react": "^2.0.18",
+    "framer-motion": "^10.16.16",
+    "react-markdown": "^9.0.1",
+    "react-syntax-highlighter": "^15.5.0",
+    "@types/react-syntax-highlighter": "^15.5.11"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "proxy": "http://localhost:5000"
+} 

client/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+} 

client/public/index.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Transcreation Sandbox - A web-based tool for postgraduate translation students to practice transcreation and intercultural mediation"
+    />
+    <link rel="apple-touch-icon" sizes="180x180" href="%PUBLIC_URL%/apple-touch-icon.png" />
+    <link rel="icon" type="image/png" sizes="32x32" href="%PUBLIC_URL%/favicon-32x32.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="%PUBLIC_URL%/favicon-16x16.png" />
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <title>Transcreation Sandbox</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+  </body>
+</html> 

client/public/manifest.json

@@ -0,0 +1,12 @@
+{
+  "short_name": "Transcreation Sandbox",
+  "name": "Transcreation Sandbox - Translation Practice Tool",
+  "icons": [
+    { "src": "/favicon-192.png", "sizes": "192x192", "type": "image/png" },
+    { "src": "/favicon-512.png", "sizes": "512x512", "type": "image/png" }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+} 

client/src/App.tsx

@@ -0,0 +1,98 @@
+import React from 'react';
+import { Routes, Route, Navigate } from 'react-router-dom';
+import Layout from './components/Layout';
+import Home from './pages/Home';
+import Login from './pages/Login';
+import Dashboard from './pages/Dashboard';
+import SearchTexts from './pages/SearchTexts';
+import TutorialTasks from './pages/TutorialTasks';
+import WeeklyPractice from './pages/WeeklyPractice';
+import VoteResults from './pages/VoteResults';
+import Toolkit from './pages/Toolkit';
+import Manage from './pages/Profile';
+import Slides from './pages/Slides';
+import Feedback from './pages/Feedback';
+
+const App: React.FC = () => {
+  return (
+    <Routes>
+      <Route path="/" element={<Home />} />
+      <Route path="/login" element={<Login />} />
+      <Route 
+        path="/dashboard" 
+        element={
+          <Layout>
+            <Dashboard />
+          </Layout>
+        } 
+      />
+      <Route 
+        path="/search" 
+        element={
+          <Layout>
+            <SearchTexts />
+          </Layout>
+        } 
+      />
+      <Route 
+        path="/tutorial-tasks" 
+        element={
+          <Layout>
+            <TutorialTasks />
+          </Layout>
+        } 
+      />
+      <Route 
+        path="/weekly-practice" 
+        element={
+          <Layout>
+            <WeeklyPractice />
+          </Layout>
+        } 
+      />
+      <Route 
+        path="/votes" 
+        element={
+          <Layout>
+            <VoteResults />
+          </Layout>
+        } 
+      />
+      <Route 
+        path="/toolkit" 
+        element={
+          <Layout>
+            <Toolkit />
+          </Layout>
+        } 
+      />
+      <Route 
+        path="/slides" 
+        element={
+          <Layout>
+            <Slides />
+          </Layout>
+        } 
+      />
+      <Route 
+        path="/feedback" 
+        element={
+          <Layout>
+            <Feedback />
+          </Layout>
+        } 
+      />
+      <Route 
+        path="/manage" 
+        element={
+          <Layout>
+            <Manage />
+          </Layout>
+        } 
+      />
+      <Route path="*" element={<Navigate to="/" replace />} />
+    </Routes>
+  );
+};
+
+export default App; 

client/src/components/HitokotoBar.tsx

@@ -0,0 +1,104 @@
+import React from 'react';
+
+interface HitokotoItem {
+  id: number;
+  uuid: string;
+  hitokoto: string;
+  type: string;
+  from: string;
+  from_who?: string | null;
+}
+
+const API_URL = 'https://v1.hitokoto.cn/?c=d&c=i&c=k&encode=json';
+
+const LOCAL_HIDE_KEY = 'hitokoto_hide';
+const LOCAL_LAST_KEY = 'hitokoto_last';
+const LOCAL_LAST_AT = 'hitokoto_last_at';
+
+const cacheMs = 5 * 60 * 1000; // 5 minutes
+
+const HitokotoBar: React.FC = () => {
+  const [hidden, setHidden] = React.useState<boolean>(() => localStorage.getItem(LOCAL_HIDE_KEY) === '1');
+  const [loading, setLoading] = React.useState<boolean>(false);
+  const [error, setError] = React.useState<string>('');
+  const [quote, setQuote] = React.useState<HitokotoItem | null>(() => {
+    try {
+      const last = localStorage.getItem(LOCAL_LAST_KEY);
+      const at = Number(localStorage.getItem(LOCAL_LAST_AT) || '0');
+      if (last && Date.now() - at < cacheMs) {
+        return JSON.parse(last) as HitokotoItem;
+      }
+    } catch {}
+    return null;
+  });
+
+  const fetchQuote = async () => {
+    try {
+      setLoading(true);
+      setError('');
+      const res = await fetch(API_URL, { method: 'GET' });
+      if (!res.ok) throw new Error('Network error');
+      const data = await res.json();
+      setQuote(data as HitokotoItem);
+      try {
+        localStorage.setItem(LOCAL_LAST_KEY, JSON.stringify(data));
+        localStorage.setItem(LOCAL_LAST_AT, String(Date.now()));
+      } catch {}
+    } catch (e: any) {
+      setError('Failed to load quote');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  React.useEffect(() => {
+    if (!hidden && !quote) {
+      fetchQuote();
+    }
+  }, [hidden]);
+
+  if (hidden) return null;
+
+  return (
+    <div className="fixed bottom-0 left-0 right-0 z-50">
+      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 pb-3">
+        <div className="bg-white border border-gray-200 shadow-md rounded-lg px-4 py-2 flex items-center justify-between">
+          <div className="flex items-center min-w-0">
+            <span className="mr-2 text-indigo-600">💬</span>
+            <div className="min-w-0">
+              {loading ? (
+                <div className="text-sm text-gray-600">Loading…</div>
+              ) : error ? (
+                <div className="text-sm text-red-600">{error}</div>
+              ) : (
+                <div className="text-sm text-gray-800 truncate">
+                  {quote ? `『${quote.hitokoto}』 — ${quote.from_who || quote.from || 'Hitokoto'}` : ' '}
+                </div>
+              )}
+            </div>
+          </div>
+          <div className="flex items-center space-x-2 flex-shrink-0">
+            <button
+              onClick={fetchQuote}
+              className="text-xs px-2 py-1 rounded bg-gray-100 hover:bg-gray-200 text-gray-700"
+              title="Next quote"
+            >
+              Next
+            </button>
+            <button
+              onClick={() => { setHidden(true); localStorage.setItem(LOCAL_HIDE_KEY, '1'); }}
+              className="text-xs px-2 py-1 rounded bg-gray-100 hover:bg-gray-200 text-gray-700"
+              title="Hide"
+            >
+              Hide
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default HitokotoBar;
+
+

client/src/components/Layout.tsx

@@ -0,0 +1,258 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { Link, useLocation } from 'react-router-dom';
+import { 
+  HomeIcon, 
+  AcademicCapIcon,
+  BookOpenIcon,
+  HandThumbUpIcon,
+  WrenchScrewdriverIcon,
+  UserIcon,
+  ArrowRightOnRectangleIcon
+} from '@heroicons/react/24/outline';
+import HitokotoBar from './HitokotoBar';
+import { api } from '../services/api';
+
+interface User {
+  name: string;
+  email: string;
+  role: string;
+}
+
+const Layout: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const location = useLocation();
+  const [isTransitioning, setIsTransitioning] = useState(false);
+  const previousPathRef = useRef(location.pathname);
+  const userData = localStorage.getItem('user');
+  const user: User | null = userData ? JSON.parse(userData) : null;
+  const [unreadCount, setUnreadCount] = useState<number>(0);
+
+  // Lightweight online presence: send heartbeat periodically
+  useEffect(() => {
+    let timer: any;
+    const sendHeartbeat = async () => {
+      try {
+        if (!user?.email) return;
+        const token = localStorage.getItem('token') || '';
+        const base = (((api.defaults as any)?.baseURL as string) || '').replace(/\/$/, '');
+        await fetch(`${base}/api/auth/online/heartbeat`, {
+          method: 'POST',
+          headers: {
+            'Authorization': `Bearer ${token}`,
+            'Content-Type': 'application/json',
+            'user-role': user.role || 'visitor',
+            'user-info': userData || ''
+          },
+          body: JSON.stringify({ email: user.email, path: location.pathname })
+        });
+      } catch {}
+    };
+    sendHeartbeat();
+    timer = setInterval(sendHeartbeat, 60000);
+    return () => { if (timer) clearInterval(timer); };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [user?.email]);
+
+  // Send a heartbeat on route changes for fresher session tracking
+  useEffect(() => {
+    const run = async () => {
+      try {
+        if (!user?.email) return;
+        const token = localStorage.getItem('token') || '';
+        const base = (((api.defaults as any)?.baseURL as string) || '').replace(/\/$/, '');
+        await fetch(`${base}/api/auth/online/heartbeat`, {
+          method: 'POST',
+          headers: {
+            'Authorization': `Bearer ${token}`,
+            'Content-Type': 'application/json',
+            'user-role': user.role || 'visitor',
+            'user-info': userData || ''
+          },
+          body: JSON.stringify({ email: user.email, path: location.pathname })
+        });
+      } catch {}
+    };
+    run();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [location.pathname]);
+
+  // Admin unread message badge (non-invasive)
+  useEffect(() => {
+    let timer: any;
+    const run = async () => {
+      try {
+        if (user?.role !== 'admin') return;
+        const token = localStorage.getItem('token') || '';
+        const base = (((api.defaults as any)?.baseURL as string) || '').replace(/\/$/, '');
+        const resp = await fetch(`${base}/api/messages/unread-count`, {
+          headers: {
+            'Authorization': `Bearer ${token}`,
+            'user-role': 'admin',
+            'user-info': userData || ''
+          }
+        });
+        if (resp.ok) {
+          const data = await resp.json();
+          if (typeof data?.count === 'number') setUnreadCount(data.count);
+        }
+      } catch {}
+    };
+    run();
+    if (user?.role === 'admin') {
+      timer = setInterval(run, 60000);
+    }
+    return () => { if (timer) clearInterval(timer); };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [user?.role]);
+
+  // Admin unread message badge (non-invasive)
+  useEffect(() => {
+    let timer: any;
+    const run = async () => {
+      try {
+        if (user?.role !== 'admin') return;
+        const token = localStorage.getItem('token') || '';
+        const base = (((api.defaults as any)?.baseURL as string) || '').replace(/\/$/, '');
+        const resp = await fetch(`${base}/api/messages/unread-count`, {
+          headers: {
+            'Authorization': `Bearer ${token}`,
+            'user-role': 'admin',
+            'user-info': userData || ''
+          }
+        });
+        if (resp.ok) {
+          const data = await resp.json();
+          if (typeof data?.count === 'number') setUnreadCount(data.count);
+        }
+      } catch {}
+    };
+    run();
+    if (user?.role === 'admin') {
+      timer = setInterval(run, 60000);
+    }
+    return () => { if (timer) clearInterval(timer); };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [user?.role]);
+
+  const handleLogout = () => {
+    localStorage.removeItem('token');
+    localStorage.removeItem('user');
+    window.location.href = '/';
+  };
+
+  let navigation = [
+    { name: 'Home', href: '/dashboard', icon: HomeIcon },
+    { name: 'Tutorial Tasks', href: '/tutorial-tasks', icon: AcademicCapIcon },
+    { name: 'Weekly Practice', href: '/weekly-practice', icon: BookOpenIcon },
+    { name: 'Votes', href: '/votes', icon: HandThumbUpIcon },
+    { name: 'Toolkit', href: '/toolkit', icon: WrenchScrewdriverIcon },
+    { name: 'Slides', href: '/slides', icon: BookOpenIcon },
+    { name: 'Feedback', href: '/feedback', icon: UserIcon },
+  ];
+
+  // Hide Slides for visitors
+  if (!user || user.role === 'visitor') {
+    navigation = navigation.filter(item => item.name !== 'Slides');
+  }
+
+  // Add Manage link for admin users
+  if (user?.role === 'admin') {
+    navigation.push({ name: 'Manage', href: '/manage', icon: UserIcon });
+  }
+
+  return (
+    <div className="min-h-screen bg-gray-50">
+      {/* Navigation */}
+      <nav className="bg-white shadow-sm border-b border-gray-200">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="flex justify-between h-16">
+            <div className="flex">
+              <div className="flex-shrink-0 flex items-center">
+                <Link to="/dashboard" className="text-xl font-bold text-indigo-600">
+                  Transcreation
+                </Link>
+              </div>
+              <div className="hidden sm:ml-6 sm:flex sm:space-x-8">
+                {navigation.map((item) => {
+                  const isActive = location.pathname === item.href;
+                  return (
+                    <Link
+                      key={item.name}
+                      to={item.href}
+                      className={`inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium transition-all duration-200 ease-in-out ${
+                        isActive
+                          ? 'border-indigo-500 text-gray-900'
+                          : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700'
+                      }`}
+                    >
+                      <item.icon className="h-4 w-4 mr-1" />
+                      {item.name}
+                      {item.name === 'Feedback' && user?.role === 'admin' && unreadCount > 0 && (
+                        <span className="ml-2 inline-flex items-center justify-center min-w-[16px] h-4 px-1 rounded-full bg-red-600 text-white text-[10px] leading-none">{unreadCount > 99 ? '99+' : unreadCount}</span>
+                      )}
+                    </Link>
+                  );
+                })}
+              </div>
+            </div>
+            <div className="flex items-center">
+              {user && (
+                <div className="flex items-center">
+                  <button
+                    onClick={handleLogout}
+                    className="text-gray-500 hover:text-gray-700 flex items-center"
+                  >
+                    <ArrowRightOnRectangleIcon className="h-4 w-4 mr-1" />
+                    Logout
+                  </button>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      </nav>
+
+      {/* Mobile Navigation */}
+      <div className="sm:hidden">
+        <div className="pt-2 pb-3 space-y-1">
+          {navigation.map((item) => {
+            const isActive = location.pathname === item.href;
+            return (
+              <Link
+                key={item.name}
+                to={item.href}
+                className={`block pl-3 pr-4 py-2 border-l-4 text-base font-medium transition-all duration-200 ease-in-out ${
+                  isActive
+                    ? 'bg-indigo-50 border-indigo-500 text-indigo-700'
+                    : 'border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800'
+                }`}
+              >
+                <div className="flex items-center">
+                  <item.icon className="h-4 w-4 mr-2" />
+                  {item.name}
+                </div>
+              </Link>
+            );
+          })}
+        </div>
+      </div>
+
+                        {/* Main Content */}
+                  <main>
+                    {!isTransitioning && children}
+                  </main>
+      
+      {/* Transition Loading Indicator */}
+      {isTransitioning && (
+        <div className="fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-50">
+          <div className="bg-white rounded-lg shadow-lg p-4 flex items-center space-x-3">
+            <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-indigo-600"></div>
+            <span className="text-gray-700 font-medium">Loading...</span>
+          </div>
+        </div>
+      )}
+      <HitokotoBar />
+    </div>
+  );
+};
+
+export default Layout; 

client/src/components/LoadingSpinner.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+const LoadingSpinner: React.FC = () => {
+  return (
+    <div className="flex items-center justify-center">
+      <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
+      <span className="ml-2 text-gray-600">Loading...</span>
+    </div>
+  );
+};
+
+export default LoadingSpinner; 

client/src/components/SyntaxReorderer.tsx

@@ -0,0 +1,917 @@
+// @ts-nocheck
+import React, { useMemo, useRef, useState } from "react";
+
+/**
+ * EN↔ZH Syntax Reorderer — Native HTML5 Drag & Drop + Roles & Patterns (v2.2.3)
+ *
+ * The component helps students understand structural and syntactic differences
+ * between English and Chinese by segmenting, labeling roles, and reordering.
+ * (Imported from prototype; minor adjustments for integration only.)
+ */
+
+// ------- Utilities -------
+const containsHan = (s = "") => /\p{Script=Han}/u.test(s);
+const isPunc = (t = "") => /[.,!?;:·…—\-，。？！；：、《》〈〉()“”"'\[\]{}]/.test(t);
+
+function hash6(str) {
+  let h = 0;
+  for (let i = 0; i < str.length; i++) h = (h * 31 + str.charCodeAt(i)) >>> 0;
+  return (h >>> 0).toString(36).slice(0, 6);
+}
+
+function tokenize(text) {
+  if (!text || !String(text).trim()) return [];
+  const rough = String(text).replace(/\s+/g, " ").trim().split(" ").filter(Boolean);
+  const tokens = [];
+  const re = /(\p{Script=Han}+)|([A-Za-z0-9]+(?:[-'][A-Za-z0-9]+)*)|([^\p{Script=Han}A-Za-z0-9\s])/gu;
+  for (const chunk of (rough.length ? rough : [String(text).trim()])) {
+    let m;
+    while ((m = re.exec(chunk))) {
+      const [tok] = m;
+      if (tok.trim() !== "") tokens.push(tok);
+    }
+  }
+  return tokens;
+}
+
+// Expand any Han token into individual characters (keeps punctuation intact)
+function explodeHanChars(tokens = []) {
+  const out = [];
+  for (const t of tokens) {
+    if (containsHan(t) && !isPunc(t) && t.length > 1) {
+      for (const ch of t) out.push(ch);
+    } else {
+      out.push(t);
+    }
+  }
+  return out;
+}
+
+const boundaryCount = (tokens) => Math.max(0, (tokens?.length || 0) - 1);
+
+function groupsFrom(tokens = [], boundaries = []) {
+  if (!Array.isArray(tokens) || tokens.length === 0) return [];
+  const groups = [];
+  let cur = [];
+  tokens.forEach((t, i) => {
+    cur.push(t);
+    const atEnd = i === tokens.length - 1;
+    if (atEnd || !!boundaries[i]) {
+      groups.push(cur.join(" "));
+      cur = [];
+    }
+  });
+  return groups;
+}
+
+function boundariesFromPunctuation(tokens = []) {
+  const count = boundaryCount(tokens);
+  const out = new Array(count).fill(false);
+  for (let i = 0; i < count; i++) out[i] = isPunc(tokens[i]);
+  return out;
+}
+
+function splitLiteralChunks(literalText, groups) {
+  if (!literalText || !literalText.trim()) return new Array(Math.max(0, groups.length)).fill("");
+  let chunks;
+  if (literalText.includes("|")) {
+    chunks = literalText.split("|").map((s) => s.trim()).filter((s) => s !== "");
+  } else if (literalText.includes("\n")) {
+    chunks = literalText.split(/\n+/).map((s) => s.trim()).filter((s) => s !== "");
+  } else {
+    const words = literalText.trim().split(/\s+/).filter(Boolean);
+    const sizes = groups.map((g) => g.split(/\s+/).filter(Boolean).length || 1);
+    const total = sizes.reduce((a, b) => a + b, 0) || Math.max(1, groups.length);
+    chunks = [];
+    let cursor = 0;
+    for (let i = 0; i < groups.length; i++) {
+      const share = Math.round((sizes[i] / total) * words.length);
+      const end = i === groups.length - 1 ? words.length : Math.min(words.length, cursor + Math.max(1, share));
+      chunks.push(words.slice(cursor, end).join(" "));
+      cursor = end;
+    }
+    chunks = chunks.map((s) => (s && s.trim()) || "⋯");
+  }
+  return chunks;
+}
+
+// Small helper to move item in an array
+function moveItem(arr, from, to) {
+  const a = arr.slice();
+  const [item] = a.splice(from, 1);
+  a.splice(to, 0, item);
+  return a;
+}
+
+// ---------- Roles & Colours ----------
+const ROLES = [
+  "TIME", "PLACE", "TOPIC", "SUBJECT", "AUX", "VERB", "OBJECT", "MANNER", "DEGREE", "CAUSE", "RESULT", "REL", "EXIST", "BA", "BEI", "AGENT", "OTHER"
+];
+const ROLE_LABEL = {
+  TIME: "Time", PLACE: "Place", TOPIC: "Topic/Stance", SUBJECT: "Subject", AUX: "Auxiliary",
+  VERB: "Verb", OBJECT: "Object", MANNER: "Manner", DEGREE: "Degree",
+  CAUSE: "Cause", RESULT: "Result", REL: "的‑clause", EXIST: "Existential(有)", BA: "把", BEI: "被", AGENT: "Agent", OTHER: "Other"
+};
+const ROLE_COLOUR = {
+  TIME: "bg-blue-50 border-blue-200 text-blue-700",
+  PLACE: "bg-teal-50 border-teal-200 text-teal-700",
+  TOPIC: "bg-amber-50 border-amber-200 text-amber-800",
+  SUBJECT: "bg-sky-50 border-sky-200 text-sky-800",
+  VERB: "bg-indigo-50 border-indigo-200 text-indigo-700",
+  OBJECT: "bg-rose-50 border-rose-200 text-rose-700",
+  MANNER: "bg-violet-50 border-violet-200 text-violet-700",
+  DEGREE: "bg-fuchsia-50 border-fuchsia-200 text-fuchsia-700",
+  CAUSE: "bg-orange-50 border-orange-200 text-orange-700",
+  RESULT: "bg-lime-50 border-lime-200 text-lime-700",
+  REL: "bg-emerald-50 border-emerald-200 text-emerald-700",
+  EXIST: "bg-cyan-50 border-cyan-200 text-cyan-700",
+  BA: "bg-yellow-50 border-yellow-200 text-yellow-700",
+  BEI: "bg-stone-50 border-stone-200 text-stone-700",
+  AGENT: "bg-stone-50 border-stone-200 text-stone-800",
+  OTHER: "bg-zinc-50 border-zinc-200 text-zinc-700",
+};
+
+// Prevent drag initiation from form controls inside draggable cards
+const NO_DRAG = {
+  draggable: false,
+  onDragStart: (e) => e.preventDefault(),
+  onMouseDown: (e) => e.stopPropagation(),
+};
+
+function RolePill({ role }) {
+  const cls = ROLE_COLOUR[role] || ROLE_COLOUR.OTHER;
+  return <span className={`inline-flex items-center px-2 py-0.5 rounded-lg border text-[11px] ${cls}`}>{ROLE_LABEL[role] || role}</span>;
+}
+
+function RoleSelector({ value, onChange }) {
+  return (
+    <select {...NO_DRAG} className="rounded-lg border border-zinc-300 px-2 py-1 text-xs" value={value} onChange={(e) => onChange(e.target.value)}>
+      {ROLES.map((r) => (
+        <option key={r} value={r}>{ROLE_LABEL[r]}</option>
+      ))}
+    </select>
+  );
+}
+
+function SortableCard({ id, idx, src, lit, role, onEdit, onDragStart, onDragEnter, onDragOver, onDrop, onDragEnd, onKeyMove, isDragOver, highlightRoles }) {
+  const isHL = highlightRoles?.includes(role);
+  return (
+    <div
+      data-id={id}
+      draggable
+      onDragStart={(e) => onDragStart(e, id)
+      }
+      onDragEnter={(e) => onDragEnter(e, id)}
+      onDragOver={(e) => onDragOver(e, id)}
+      onDrop={(e) => onDrop(e, id)}
+      onDragEnd={onDragEnd}
+      className={`bg-white rounded-2xl shadow-sm border p-4 mb-3 hover:shadow-md transition outline-none ${isDragOver ? "ring-2 ring-indigo-400" : "border-zinc-200"} ${isHL ? "ring-2 ring-amber-400" : ""} cursor-grab active:cursor-grabbing`}
+      tabIndex={0}
+      onKeyDown={(e) => {
+        if (e.key === "ArrowUp") { e.preventDefault(); onKeyMove(id, -1); }
+        if (e.key === "ArrowDown") { e.preventDefault(); onKeyMove(id, +1); }
+      }}
+    >
+      <div className="flex items-center justify-between mb-2">
+        <div className="flex items-center gap-2">
+          <div className="text-xs uppercase tracking-wider text-zinc-500">Chunk {idx + 1}</div>
+          <RolePill role={role} />
+        </div>
+        <div className="flex items-center gap-2">
+          <RoleSelector value={role} onChange={(r) => onEdit(id, { role: r })} />
+          <div className="flex gap-1">
+            <button className="text-[11px] px-2 py-1 rounded bg-zinc-100 hover:bg-zinc-200" onClick={() => onKeyMove(id, -1)} aria-label="Move up">▲</button>
+            <button className="text-[11px] px-2 py-1 rounded bg-zinc-100 hover:bg-zinc-200" onClick={() => onKeyMove(id, +1)} aria-label="Move down">▼</button>
+          </div>
+        </div>
+      </div>
+
+      {/* Grab bar / affordance */}
+      <div className="w-full mb-3 rounded-xl border border-indigo-200 bg-indigo-50 text-indigo-700 text-xs px-3 py-2 select-none">
+        ⠿ Drag anywhere on the card background • or use ▲▼ keys
+      </div>
+
+      <div className="grid md:grid-cols-2 gap-3">
+        <label className="text-sm text-zinc-600">
+          <span className="block text-xs text-zinc-500 mb-1">Source phrase</span>
+          <input
+            {...NO_DRAG}
+            className="w-full rounded-xl border border-zinc-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500"
+            value={src}
+            onChange={(e) => onEdit(id, { src: e.target.value })}
+          />
+        </label>
+        <label className="text-sm text-zinc-600">
+          <span className="block text-xs text-zinc-500 mb-1">Literal translation</span>
+          <input
+            {...NO_DRAG}
+            className="w-full rounded-xl border border-zinc-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500"
+            value={lit}
+            onChange={(e) => onEdit(id, { lit: e.target.value })}
+          />
+        </label>
+      </div>
+    </div>
+  );
+}
+
+// ------------------------
+// Self-tests (expanded)
+// ------------------------
+function runTokenizerTests() {
+  const cases = [
+    { name: "empty string", input: "", expect: [] },
+    { name: "spaces only", input: "   \t\n  ", expect: [] },
+    { name: "simple EN", input: "I like apples.", expect: ["I", "like", "apples", "."] },
+    { name: "simple ZH", input: "我喜欢中文。", expect: ["我", "喜欢", "中文", "。"] },
+    { name: "ZH+quotes", input: "“你好”，世界！", expect: ["“", "你", "好", "”", "，", "世", "界", "！"] },
+    { name: "EN hyphen+apostrophe", input: "state-of-the-art don't fail.", expect: ["state-of-the-art", "don't", "fail", "."] },
+    { name: "Emoji and symbols", input: "Hi🙂!", expect: ["Hi", "🙂", "!"] },
+    { name: "ZH with spaces", input: "我 爱 你。", expect: ["我", "爱", "你", "。"] },
+  ];
+  return cases.map((c) => {
+    const got = tokenize(c.input);
+    const pass = Array.isArray(got) && got.join("|") === c.expect.join("|");
+    return { name: c.name, pass, got, expect: c.expect };
+  });
+}
+
+function runBoundaryTests() {
+  const toks = tokenize("我 喜欢 中文 .");
+  const expectedCount = Math.max(0, toks.length - 1);
+  const b1 = boundariesFromPunctuation(toks);
+  const safeNewTrue = new Array(Math.max(0, toks.length - 1)).fill(true);
+  const safeNewFalse = new Array(Math.max(0, toks.length - 1)).fill(false);
+  return [
+    { name: "boundary count safe", pass: b1.length === expectedCount, got: b1.length, expect: expectedCount },
+    { name: "new true safe", pass: safeNewTrue.length === expectedCount },
+    { name: "new false safe", pass: safeNewFalse.length === expectedCount },
+  ];
+}
+
+function runLiteralSplitTests() {
+  const groups = ["It is", "difficult", "for me", "to learn Chinese"];
+  const t1 = splitLiteralChunks("很难 | 对我来说 | 学习中文", groups);
+  const t2 = splitLiteralChunks("很难\n对我来说\n学习中文", groups);
+  const t3 = splitLiteralChunks("很 难 对 我 来 说 学 习 中 文", groups);
+  return [
+    { name: "literal with pipes", pass: Array.isArray(t1) && t1.length === groups.length },
+    { name: "literal with newlines", pass: Array.isArray(t2) && t2.length === groups.length },
+    { name: "literal with words", pass: Array.isArray(t3) && t3.length === groups.length },
+  ];
+}
+
+function runCharExplodeTests() {
+  const base = ["我喜欢中文", "。"];
+  const exploded = explodeHanChars(base);
+  const pass = exploded.join("") === "我喜欢中文。" && exploded.length === 6; // 我 喜 欢 中 文 。
+  return [{ name: "explode Han into characters", pass, got: exploded }];
+}
+
+function runNormalizeBoundaryTests() {
+  const toks = ["我","喜","欢","中","文","。"];
+  const b = [true, false, true];
+  const n = Math.max(0, toks.length - 1);
+  const out = new Array(n).fill(false);
+  for (let i = 0; i < Math.min(n, b.length); i++) out[i] = !!b[i];
+  return [{ name: "normalize boundaries len", pass: out.length === toks.length - 1 }];
+}
+
+function SelfTests() {
+  const tokResults = runTokenizerTests();
+  const bResults = runBoundaryTests();
+  const lResults = runLiteralSplitTests();
+  const xResults = runCharExplodeTests();
+  const nbResults = runNormalizeBoundaryTests();
+  const all = [...tokResults, ...bResults, ...lResults, ...xResults, ...nbResults];
+  const passed = all.filter((r) => r.pass).length;
+  const total = all.length;
+  return (
+    <details className="mt-6">
+      <summary className="cursor-pointer text-sm text-zinc-600">Self-tests: {passed}/{total} passed (click to view)</summary>
+      <div className="mt-3 text-xs grid gap-2">
+        {all.map((r, i) => (
+          <div key={i} className={`p-2 rounded-lg border ${r.pass ? "border-emerald-300 bg-emerald-50" : "border-rose-300 bg-rose-50"}`}>
+            <div className="font-medium">{r.name} — {r.pass ? "PASS" : "FAIL"}</div>
+            {r.expect !== undefined && (
+              <div className="mt-1">
+                <div><span className="text-zinc-500">expect:</span> {JSON.stringify(r.expect)}</div>
+                <div><span className="text-zinc-500">got:</span> {JSON.stringify(r.got)}</div>
+              </div>
+            )}
+          </div>
+        ))}
+      </div>
+    </details>
+  );
+}
+
+// ---------- Pattern cards data with examples ----------
+const PATTERNS = [
+  {
+    id: "it_adj",
+    title: "It is ADJ for SB to VP → 对SB来说 + VP + 很ADJ",
+    roles: ["TOPIC", "SUBJECT", "VERB", "OBJECT", "DEGREE"],
+    hint: "Front stance/topic, then VP, then degree+adj (simplified as DEGREE).",
+    exEn: "It is difficult for me to learn Chinese.",
+    exZh: "对我来说，学中文很难。",
+  },
+  {
+    id: "rel_clause",
+    title: "Relative clause → [REL] 的 + N / EN: N + (that/which …)",
+    roles: ["REL", "OBJECT"],
+    hint: "ZH: 把后置从句前置为 的‑短语；EN: RC follows the noun.",
+    exEn: "the book that I bought yesterday is expensive",
+    exZh: "我昨天买的书很贵。",
+  },
+  {
+    id: "existential",
+    title: "Existential/there is → (PLACE) + 有 + NP / EN: there is/are + NP (PP)",
+    roles: ["PLACE", "EXIST", "OBJECT"],
+    hint: "ZH: 地点可前置，EXIST 代表 ‘有’；EN: ‘there is/are’ + NP (+ place/time).",
+    exEn: "There is a cat in the room.",
+    exZh: "房间里有一只猫。",
+  },
+  {
+    id: "ba",
+    title: "Disposal 把 → 把 + OBJ + V + (RESULT)",
+    roles: ["BA", "OBJECT", "VERB", "RESULT"],
+    hint: "突出对宾语的处置；结果补语可选。",
+    exEn: "I put the keys on the table.",
+    exZh: "我把钥匙放在桌子上。",
+  },
+  {
+    id: "bei",
+    title: "Passive 被 → OBJ + 被 + AGENT + V (+RESULT) / EN: AGENT + V + OBJ (or passive)",
+    roles: ["OBJECT", "BEI", "AGENT", "VERB", "RESULT"],
+    hint: "ZH: AGENT 明示时放在 被 之后；EN: passive optional; active often preferred.",
+    exEn: "The door was opened by the wind.",
+    exZh: "门被风吹开了。",
+  },
+];
+
+const SIMPLE_TITLES = {
+  it_adj: "Topic → VP → 很+ADJ",
+  rel_clause: "的‑relative before noun",
+  existential: "Place + 有 + NP",
+  ba: "把 disposal pattern",
+  bei: "被 passive pattern",
+} as Record<string, string>;
+
+function ReasoningHints({ direction, cards }) {
+  if (!cards || cards.length === 0) return null;
+  const roles = cards.map((c) => c.role);
+  const hints = [];
+  const has = (r) => roles.includes(r);
+  if (direction.startsWith("EN")) {
+    if (has("TIME") || has("PLACE") || has("TOPIC")) hints.push("Fronted TIME/PLACE/TOPIC reflects Chinese topic/comment tendency.");
+    if (has("REL") && has("OBJECT")) hints.push("Prenominal 的‑relative clause before the noun (ZH).");
+    if (has("BA")) hints.push("把‑construction focuses disposal/result on the object.");
+    if (has("BEI")) hints.push("被‑passive highlights the patient/topic; agent optional.");
+    if (has("EXIST")) hints.push("Existential 有 introduces new entities: (Place)+有+NP.");
+  } else {
+    if (has("REL") && has("OBJECT")) hints.push("English relative clauses follow the noun: N + (that/which …).");
+    if (has("EXIST")) hints.push("Translate 存现句 with 'there is/are' when introducing new entities.");
+    if (has("TIME") || has("PLACE")) hints.push("English often places time/place adverbials after the verb phrase or at sentence end.");
+  }
+  if (hints.length === 0) return null;
+  return (
+    <ul className="list-disc ml-5">{hints.map((h, i) => <li key={i}>{h}</li>)}</ul>
+  );
+}
+
+export default function SyntaxReorderer() {
+  const [direction, setDirection] = useState("EN → ZH");
+  const [sourceText, setSourceText] = useState("");
+  const [literalText, setLiteralText] = useState("");
+
+  const prevLiteralRef = useRef("");
+  const fileRef = useRef(null);
+
+  // Character-separator mode (ZH)
+  const [zhCharMode, setZhCharMode] = useState(false);
+
+  const baseTokens = useMemo(() => tokenize(sourceText), [sourceText]);
+  const hasHanInSource = useMemo(() => /\p{Script=Han}/u.test(sourceText), [sourceText]);
+  const srcTokens = useMemo(() => (zhCharMode ? explodeHanChars(baseTokens) : baseTokens), [baseTokens, zhCharMode]);
+
+  const [boundaries, setBoundaries] = useState([]);
+
+  React.useEffect(() => {
+    setBoundaries((prev) => {
+      const count = boundaryCount(srcTokens);
+      const next = new Array(count).fill(false);
+      for (let i = 0; i < Math.min(prev.length, next.length); i++) next[i] = prev[i];
+      return next;
+    });
+  }, [srcTokens.length]);
+
+  const groups = useMemo(() => groupsFrom(srcTokens, boundaries), [srcTokens, boundaries]);
+  const groupsKey = useMemo(() => groups.join("|"), [groups]);
+
+  const [cards, setCards] = useState([]); // {id, src, lit, role}
+  const [order, setOrder] = useState([]);
+  const [joiner, setJoiner] = useState("auto");
+
+  const [autoBuild, setAutoBuild] = useState(true);
+  const [hasDragged, setHasDragged] = useState(false);
+
+  const [dragId, setDragId] = useState(null);
+  const [dragOverId, setDragOverId] = useState(null);
+  const [isDragging, setIsDragging] = useState(false);
+
+  // Pattern highlight state
+  const [highlightRoles, setHighlightRoles] = useState([]);
+
+  function rebuild({ preserveByIndex }) {
+    const litChunks = splitLiteralChunks(literalText, groups);
+    const built = groups.map((g, i) => ({ id: `${i}-${hash6(g)}`, src: g, lit: litChunks[i] ?? "", role: cards[i]?.role || "OTHER" }));
+
+    if (preserveByIndex && cards.length === built.length) {
+      for (let i = 0; i < built.length; i++) {
+        if (cards[i]) {
+          if (typeof cards[i].lit === "string" && cards[i].lit.trim() !== "") built[i].lit = cards[i].lit;
+          if (cards[i].role) built[i].role = cards[i].role;
+        }
+      }
+    }
+
+    setCards(built);
+    setOrder((prev) => {
+      if (prev.length === built.length) {
+        const setIds = new Set(built.map((b) => b.id));
+        const prevFiltered = prev.filter((id) => setIds.has(id));
+        if (prevFiltered.length === built.length) return prevFiltered;
+      }
+      return built.map((c) => c.id);
+    });
+
+    if (joiner === "auto") {
+      const anyHan = built.some((c) => containsHan(c.lit));
+      setJoiner(anyHan ? "none" : "space");
+    }
+  }
+
+  React.useEffect(() => {
+    if (!autoBuild || hasDragged) return;
+    const prevLit = prevLiteralRef.current;
+    const litChanged = prevLit !== literalText;
+    rebuild({ preserveByIndex: !litChanged });
+    prevLiteralRef.current = literalText;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [groupsKey, literalText, autoBuild, hasDragged]);
+
+  // Helpers for drag guard
+  function startedOnInteractiveTarget(e) {
+    const target = e.target as HTMLElement | null;
+    const tag = (target && target.tagName) || '';
+    if (["INPUT", "TEXTAREA", "SELECT", "BUTTON"].includes(tag)) return true;
+    if (target && (target as any).isContentEditable) return true;
+    return false;
+  }
+
+  // HTML5 DnD handlers
+  function handleCardDragStart(e, id) {
+    if (startedOnInteractiveTarget(e)) { e.preventDefault(); return; }
+    setDragId(id);
+    setIsDragging(true);
+    e.dataTransfer.effectAllowed = "move";
+    try { e.dataTransfer.setData("text/plain", String(id)); } catch {}
+  }
+  function handleCardDragEnter(e, overId) { if (!isDragging) return; e.preventDefault(); setDragOverId(overId); }
+  function handleCardDragOver(e, overId) { if (!isDragging) return; e.preventDefault(); setDragOverId(overId); }
+  function handleCardDrop(e, overId) {
+    if (!isDragging) return;
+    e.preventDefault();
+    const fromId = dragId || e.dataTransfer.getData("text/plain");
+    if (!fromId || !overId || fromId === overId) { setDragId(null); setDragOverId(null); setIsDragging(false); return; }
+    setOrder((items) => {
+      const from = items.indexOf(fromId);
+      const to = items.indexOf(overId);
+      if (from === -1 || to === -1) return items;
+      return moveItem(items, from, to);
+    });
+    setHasDragged(true); setDragId(null); setDragOverId(null); setIsDragging(false);
+  }
+  function handleCardDragEnd() {
+    setIsDragging(false);
+    setDragId(null);
+    setDragOverId(null);
+  }
+
+  function handleKeyMove(id, delta) {
+    setOrder((items) => {
+      const i = items.indexOf(id);
+      if (i === -1) return items;
+      let j = i + delta; if (j < 0) j = 0; if (j >= items.length) j = items.length - 1; if (i === j) return items;
+      return moveItem(items, i, j);
+    });
+    setHasDragged(true);
+  }
+
+  function onEditCard(id, patch) { setCards((prev) => prev.map((c) => (c.id === id ? { ...c, ...patch } : c))); }
+
+  // Compose outputs
+  const orderedCards = useMemo(() => order.map((id) => cards.find((c) => c.id === id)).filter(Boolean), [order, cards]);
+  const composedTarget = useMemo(() => {
+    const raw = orderedCards.map((c) => c.lit).filter((s) => s != null);
+    if ((joiner === "none") || (joiner === "auto" && raw.some(containsHan))) return raw.join("");
+    return raw.join(" ");
+  }, [orderedCards, joiner]);
+
+  // Clear helpers
+  const clearSource = () => { setSourceText(""); setBoundaries([]); setHasDragged(false); };
+  const clearLiteral = () => { setLiteralText(""); setHasDragged(false); };
+  const clearCards = () => { setCards([]); setOrder([]); setHasDragged(false); };
+
+  function exportJSON() {
+    const payload = { direction, sourceText, literalText, tokens: srcTokens, boundaries, groups, cards, order, joiner, composedTarget, timestamp: new Date().toISOString() };
+    const json = JSON.stringify(payload, null, 2);
+    try {
+      const blob = new Blob([json], { type: "application/json;charset=utf-8" });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = "syntax-reorderer-activity.json";
+      a.rel = "noopener";
+      document.body.appendChild(a);
+      a.click();
+      setTimeout(() => { try { document.body.removeChild(a); } catch {} URL.revokeObjectURL(url); }, 0);
+    } catch (err) {
+      // Fallback: copy to clipboard
+      try {
+        if (navigator.clipboard && navigator.clipboard.writeText) {
+          navigator.clipboard.writeText(json);
+          alert("Exported by copying JSON to clipboard.");
+        } else {
+          alert("Export failed: " + (err?.message || String(err)));
+        }
+      } catch (e2) {
+        alert("Export failed: " + (err?.message || String(err)));
+      }
+    }
+  }
+
+  function normalizeBoundaries(b, tokens) {
+    const n = Math.max(0, (tokens?.length || 0) - 1);
+    const out = new Array(n).fill(false);
+    if (Array.isArray(b)) {
+      for (let i = 0; i < Math.min(n, b.length); i++) out[i] = !!b[i];
+    }
+    return out;
+  }
+
+  function importJSON(file) {
+    const reader = new FileReader();
+    reader.onload = (e) => {
+      try {
+        const text = String(e.target?.result || "");
+        const data = JSON.parse(text);
+        const src = typeof data.sourceText === "string" ? data.sourceText : "";
+        const base = tokenize(src);
+        const chars = explodeHanChars(base);
+        const wantCharMode = (/\p{Script=Han}/u.test(src)) && Array.isArray(data.tokens) && data.tokens.length === chars.length;
+
+        setDirection(typeof data.direction === "string" ? data.direction : direction);
+        setZhCharMode(wantCharMode);
+        setSourceText(src);
+        const toks = wantCharMode ? chars : base;
+        setBoundaries(normalizeBoundaries(data.boundaries, toks));
+        setLiteralText(typeof data.literalText === "string" ? data.literalText : "");
+        setCards(Array.isArray(data.cards) ? data.cards : []);
+        setOrder(Array.isArray(data.order) ? data.order : []);
+        setJoiner(data.joiner === "space" || data.joiner === "none" ? data.joiner : "auto");
+        prevLiteralRef.current = typeof data.literalText === "string" ? data.literalText : "";
+        setHasDragged(false);
+      } catch (err) {
+        alert("Invalid JSON");
+      }
+    };
+    reader.readAsText(file);
+  }
+
+  function loadDemo() {
+    if (direction.startsWith("EN")) {
+      // EN → ZH demo
+      const demoSrc = "It is difficult for me to learn Chinese.";
+      const demoLit = "很难 | 对我来说 | 学习中文";
+      setDirection("EN → ZH");
+      setSourceText(demoSrc);
+      setBoundaries(boundariesFromPunctuation(tokenize(demoSrc)));
+      setLiteralText(demoLit);
+      setHasDragged(false);
+      prevLiteralRef.current = demoLit;
+      setZhCharMode(false);
+    } else {
+      // ZH → EN demo
+      const demoSrc = "对我来说，学中文很难。";
+      const demoLit = "for me | learn Chinese | very difficult";
+      setDirection("ZH → EN");
+      setSourceText(demoSrc);
+      // Default to char separators for Chinese demo
+      const base = tokenize(demoSrc);
+      const chars = explodeHanChars(base);
+      setBoundaries(boundariesFromPunctuation(chars));
+      setZhCharMode(true);
+      setLiteralText(demoLit);
+      setHasDragged(false);
+      prevLiteralRef.current = demoLit;
+    }
+  }
+
+  const literalChunks = useMemo(() => splitLiteralChunks(literalText, groups), [literalText, groups]);
+
+  // Pattern helpers
+  function applyPatternOrder(roleSequence) {
+    setOrder((prev) => {
+      const seqIndex = new Map(roleSequence.map((r, i) => [r, i]));
+      const withIdx = prev.map((id, i) => {
+        const card = cards.find((c) => c.id === id);
+        const rank = seqIndex.has(card?.role) ? seqIndex.get(card.role) : 999;
+        return { id, i, rank };
+      });
+      withIdx.sort((a, b) => (a.rank - b.rank) || (a.i - b.i));
+      return withIdx.map((x) => x.id);
+    });
+  }
+
+  function toggleHighlightRoles(roleSequence) {
+    setHighlightRoles((prev) => {
+      const same = prev.length === roleSequence.length && prev.every((r, i) => r === roleSequence[i]);
+      return same ? [] : roleSequence.slice();
+    });
+  }
+
+  // ------- Render -------
+  return (
+    <div className="min-h-screen bg-zinc-50 text-zinc-900 p-6 md:p-10">
+      <div className="max-w-6xl mx-auto">
+        <header className="mb-6">
+          <h1 className="text-2xl md:text-3xl font-semibold tracking-tight">EN↔ZH Syntax Reorderer</h1>
+          <p className="text-zinc-600 mt-1">Label chunks, apply patterns, and drag to restructure. Inputs won’t start drags; use the card background.</p>
+        </header>
+
+        {/* Controls */}
+        <div className="bg-white border border-zinc-200 rounded-2xl p-4 md:p-6 shadow-sm mb-6">
+          <div className="flex flex-wrap gap-3 items-center">
+            <label className="text-sm" title="Target language direction; affects the recipe strip only.">Direction
+              <select {...NO_DRAG} className="ml-2 rounded-xl border border-zinc-300 px-3 py-2 text-sm" value={direction} onChange={(e) => setDirection(e.target.value)}>
+                <option>EN → ZH</option>
+                <option>ZH → EN</option>
+              </select>
+            </label>
+
+            <label className="text-sm" title="How to join the final literal chunks.">Joiner
+              <select {...NO_DRAG} className="ml-2 rounded-xl border border-zinc-300 px-3 py-2 text-sm" value={joiner} onChange={(e) => setJoiner(e.target.value)}>
+                <option value="auto">auto</option>
+                <option value="space">space</option>
+                <option value="none">none</option>
+              </select>
+            </label>
+
+            <div className="ml-auto flex items-center gap-2" title="Auto‑build: when you change separators or the literal list, cards rebuild themselves. It pauses after you drag so your custom order isn’t overwritten.">
+              <label className="text-sm flex items-center gap-2">
+                <input type="checkbox" className="scale-110" checked={autoBuild} onChange={(e) => { setAutoBuild(e.target.checked); if (e.target.checked) setHasDragged(false); }} />
+                Auto‑build
+              </label>
+              {hasDragged && autoBuild && (
+                <button className="px-2 py-1 text-xs rounded-lg bg-indigo-50 hover:bg-indigo-100" onClick={() => setHasDragged(false)} title="Resume auto‑build after a manual drag">Resume</button>
+              )}
+            </div>
+
+            <button className="px-3 py-2 text-sm rounded-xl bg-zinc-100 hover:bg-zinc-200" title="Force a fresh rebuild from your separators and literal list. Use this if Auto‑build is off." onClick={() => { setHasDragged(false); rebuild({ preserveByIndex: false }); }}>Rebuild now</button>
+            <button className="px-3 py-2 text-sm rounded-xl bg-rose-100 hover:bg-rose-200" onClick={() => { setSourceText(""); setLiteralText(""); setBoundaries([]); setCards([]); setOrder([]); setHasDragged(false); setHighlightRoles([]); }}>Clear ALL</button>
+            <button className="px-3 py-2 text-sm rounded-xl bg-zinc-100 hover:bg-zinc-200" onClick={loadDemo}>Load demo</button>
+            <button className="px-3 py-2 text-sm rounded-xl bg-zinc-100 hover:bg-zinc-200" onClick={exportJSON}>Export JSON</button>
+            <button className="px-3 py-2 text-sm rounded-xl bg-zinc-100 hover:bg-zinc-200" onClick={() => fileRef.current?.click()}>Import JSON</button>
+            <input ref={fileRef} type="file" accept="application/json" className="hidden" onChange={(e) => e.target.files?.[0] && importJSON(e.target.files[0])} />
+          </div>
+
+          {/* Recipe strip — switches with direction */}
+          {direction.startsWith("EN") ? (
+            <div className="mt-4">
+              <div className="text-xs text-zinc-500 mb-1">Chinese “light recipe” (typical order):</div>
+              <div className="flex flex-wrap gap-2">
+                {["TIME","PLACE","TOPIC","SUBJECT","MANNER","DEGREE","VERB","OBJECT","RESULT"].map((r) => (
+                  <span key={r} className={`px-2 py-1 rounded-lg border text-xs ${ROLE_COLOUR[r]}`}>{ROLE_LABEL[r]}</span>
+                ))}
+              </div>
+            </div>
+          ) : (
+            <div className="mt-4">
+              <div className="text-xs text-zinc-500 mb-1">English “light recipe” (typical clause order):</div>
+              <div className="flex flex-wrap gap-2">
+                {["TIME","SUBJECT","AUX","DEGREE","MANNER","VERB","OBJECT","PLACE","RESULT"].map((r) => (
+                  <span key={r} className={`px-2 py-1 rounded-lg border text-xs ${ROLE_COLOUR[r] || ROLE_COLOUR.OTHER}`}>{r === "AUX" ? "Auxiliary" : (ROLE_LABEL[r] || r)}</span>
+                ))}
+              </div>
+              <div className="text-[11px] text-zinc-500 mt-1">Notes: English RCs are post‑nominal ("the book [that I bought]"); many adverbials follow the verb phrase; existential uses “there is/are”.</div>
+            </div>
+          )}
+        </div>
+
+        {/* What are roles? */}
+        <details className="mb-6 bg-white border border-zinc-200 rounded-2xl p-4 md:p-6 shadow-sm">
+          <summary className="cursor-pointer font-medium">What are “roles” and what do these buttons mean?</summary>
+          <div className="mt-3 text-sm text-zinc-700 grid gap-2">
+            <div><strong>Roles</strong> are the <em>function</em> of a chunk (Time, Place, Topic/Stance, Subject, Verb, Object, etc.). Assigning roles lets patterns hint or reorder cards intelligently.</div>
+            <ul className="list-disc ml-5">
+              <li><strong>Auto‑build</strong>: when you change separators or the literal list, the cards below update automatically. After you drag manually, it pauses to preserve your custom order.</li>
+              <li><strong>Rebuild now</strong>: forces an immediate rebuild (useful if Auto‑build is off or paused).</li>
+              <li><strong>Apply order</strong> (on a pattern): reorders cards so roles that belong to the pattern come first, in the pattern’s typical order. It’s disabled until at least one card has one of those roles.</li>
+            </ul>
+          </div>
+        </details>
+
+        {/* Pattern cards (collapsed by default) */}
+        <details className="bg-white border border-zinc-200 rounded-2xl p-4 md:p-6 shadow-sm mb-6">
+          <summary className="cursor-pointer font-medium">Pattern cards</summary>
+          <div className="mt-3 grid md:grid-cols-2 gap-3">
+            {PATTERNS.map((p) => {
+              const matchCount = cards.filter((c) => p.roles.includes(c.role)).length;
+              return (
+                <div key={p.id} className="p-3 rounded-xl border border-zinc-200 bg-zinc-50">
+                  <div className="text-sm font-medium flex items-start justify-between gap-2">
+                    <div className="flex-1 min-w-0 pr-2">
+                      <div className="whitespace-normal break-words hyphens-auto">{p.title}</div>
+                      <div className="text-[11px] text-zinc-500 mt-0.5">{SIMPLE_TITLES[p.id] || ''}</div>
+                    </div>
+                    <span className="shrink-0 text-[11px] px-2 py-0.5 rounded-full bg-white border border-zinc-200">matches: {matchCount}</span>
+                  </div>
+                  <div className="text-xs text-zinc-600 mt-1">{p.hint}</div>
+                  <div className="text-xs text-zinc-600 mt-1"><span className="font-medium">Example:</span> {p.exEn} → <span className="text-zinc-800">{p.exZh}</span></div>
+                  <div className="flex flex-wrap gap-2 mt-2">
+                    {p.roles.map((r) => (
+                      <span key={r} className={`px-2 py-0.5 rounded-lg border text-[11px] ${ROLE_COLOUR[r]}`}>{ROLE_LABEL[r]}</span>
+                    ))}
+                  </div>
+                  <div className="mt-2 flex gap-2">
+                    <button className="text-xs px-2 py-1 rounded-md bg-zinc-100 hover:bg-zinc-200" onClick={() => toggleHighlightRoles(p.roles)}>Highlight roles</button>
+                    <button disabled={matchCount === 0} className={`text-xs px-2 py-1 rounded-md ${matchCount === 0 ? "bg-zinc-100 text-zinc-400 border border-zinc-200" : "bg-indigo-100 hover:bg-indigo-200"}`} title={matchCount === 0 ? "Set roles on some cards first" : "Reorder cards to reflect this pattern"} onClick={() => applyPatternOrder(p.roles)}>Apply order</button>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+          {highlightRoles.length > 0 && (
+            <div className="text-xs text-zinc-500 mt-2">Highlighting: {highlightRoles.map((r) => ROLE_LABEL[r]).join(" → ")}</div>
+          )}
+        </details>
+
+        {/* Sentence + literal inputs */}
+        <div className="grid md:grid-cols-2 gap-6 mb-6">
+          <div className="bg-white border border-zinc-200 rounded-2xl p-4 md:p-6 shadow-sm">
+            <div className="flex items-center justify-between mb-2">
+              <h2 className="font-medium">1) Source sentence</h2>
+              <button className="text-xs px-2 py-1 rounded-md bg-rose-50 hover:bg-rose-100" onClick={clearSource}>Clear source</button>
+            </div>
+            <textarea
+              {...NO_DRAG}
+              className="w-full min-h-[110px] rounded-xl border border-zinc-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500"
+              placeholder={direction.startsWith("EN") ? "Paste English here…" : "粘贴中文句子…"}
+              value={sourceText}
+              onChange={(e) => setSourceText(e.target.value)}
+            />
+
+            <div className="mt-2 flex items-center gap-3">
+              {hasHanInSource && (
+                <label className="text-xs flex items-center gap-2" title="Split Chinese text by character so you can place a separator between every Han character.">
+                  <input type="checkbox" className="scale-110" checked={zhCharMode} onChange={(e) => {
+                    const checked = e.target.checked; setZhCharMode(checked);
+                    const base = tokenize(sourceText);
+                    const toks = checked ? explodeHanChars(base) : base;
+                    setBoundaries(new Array(Math.max(0, toks.length - 1)).fill(false));
+                    setHasDragged(false);
+                  }} />
+                  Character separators (ZH)
+                </label>
+              )}
+            </div>
+
+            <div className="mt-3">
+              <div className="text-xs text-zinc-500 mb-2">Click separators to toggle phrase boundaries. Cards update below.</div>
+              <div className="bg-zinc-50 border border-zinc-200 rounded-xl p-3 overflow-x-auto">
+                {srcTokens.length === 0 ? (
+                  <div className="text-zinc-400 text-sm">Tokens will appear here…</div>
+                ) : (
+                  <div className="flex flex-wrap items-center gap-1">
+                    {srcTokens.map((t, i) => (
+                      <React.Fragment key={i}>
+                        <span className={`px-2 py-1 rounded-lg border ${isPunc(t) ? "border-amber-300 bg-amber-50" : "border-zinc-300 bg-white"}`}>{t}</span>
+                        {i < srcTokens.length - 1 && (
+                          <button
+                            className={`mx-1 px-2 py-1 rounded-full text-xs border ${boundaries[i] ? "bg-indigo-600 text-white border-indigo-600" : "bg-white text-zinc-600 border-zinc-300"}`}
+                            onClick={() => { setBoundaries((prev) => prev.map((b, j) => (j === i ? !b : b))); setHasDragged(false); }}
+                            title="Toggle boundary"
+                          >
+                            |
+                          </button>
+                        )}
+                      </React.Fragment>
+                    ))}
+                  </div>
+                )}
+              </div>
+
+              <div className="mt-3">
+                <div className="text-xs text-zinc-500 mb-1">Chunk preview ({groups.length}):</div>
+                <div className="flex flex-wrap gap-2">
+                  {groups.length === 0 ? (
+                    <span className="text-zinc-400 text-sm">(Add boundaries to see chunks)</span>
+                  ) : (
+                    groups.map((g, idx) => (
+                      <span key={idx} className="px-2 py-1 rounded-lg border border-zinc-300 bg-white text-sm">{g}</span>
+                    ))
+                  )}
+                </div>
+              </div>
+
+              <div className="flex flex-wrap gap-2 mt-3">
+                <button className="px-3 py-2 text-sm rounded-xl bg-zinc-100 hover:bg-zinc-200" onClick={() => { setBoundaries(boundariesFromPunctuation(srcTokens)); setHasDragged(false); }}>Auto by punctuation</button>
+                <button className="px-3 py-2 text-sm rounded-xl bg-zinc-100 hover:bg-zinc-200" onClick={() => { const v = new Array(boundaryCount(srcTokens)).fill(true); setBoundaries(v); setHasDragged(false); }}>Boundary after every token</button>
+                <button className="px-3 py-2 text-sm rounded-xl bg-zinc-100 hover:bg-zinc-200" onClick={() => { const v = new Array(boundaryCount(srcTokens)).fill(false); setBoundaries(v); setHasDragged(false); }}>Clear boundaries</button>
+              </div>
+            </div>
+          </div>
+
+          <div className="bg-white border border-zinc-200 rounded-2xl p-4 md:p-6 shadow-sm">
+            <div className="flex items-center justify-between mb-2">
+              <h2 className="font-medium">2) Literal translation (phrase list)</h2>
+              <button className="text-xs px-2 py-1 rounded-md bg-rose-50 hover:bg-rose-100" onClick={clearLiteral}>Clear literal</button>
+            </div>
+            <textarea
+              {...NO_DRAG}
+              className="w-full min-h-[110px] rounded-xl border border-zinc-300 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500"
+              placeholder={direction.startsWith("EN") ? "Use | or new lines to separate (e.g., 很难 | 对我来说 | 学习中文)" : "Use | or new lines (e.g., it is difficult | for me | to learn Chinese)"}
+              value={literalText}
+              onChange={(e) => { setLiteralText(e.target.value); setHasDragged(false); }}
+            />
+            <div className="text-xs text-zinc-500 mt-2">Literal chunks detected: <strong>{literalChunks.length}</strong>. Source chunks: <strong>{groups.length}</strong>.
+              {literalChunks.length !== groups.length && <span className="text-rose-600"> — counts don’t match; extra/short chunks will be ignored/padded.</span>}
+            </div>
+          </div>
+        </div>
+
+        {/* Drag board */}
+        <div className="grid md:grid-cols-2 gap-6">
+          <div className="bg-white border border-zinc-200 rounded-2xl p-4 md:p-6 shadow-sm">
+            <div className="flex items-center justify-between mb-2">
+              <h2 className="font-medium">Phrase cards</h2>
+              <button className="text-xs px-2 py-1 rounded-md bg-rose-50 hover:bg-rose-100" onClick={clearCards}>Clear cards</button>
+            </div>
+            {cards.length === 0 ? (
+              <div className="text-sm text-zinc-500">No cards yet. Add text above.</div>
+            ) : (
+              order.map((id, idx) => {
+                const c = cards.find((x) => x.id === id);
+                if (!c) return null;
+                return (
+                  <SortableCard
+                    key={id}
+                    id={id}
+                    idx={idx}
+                    src={c.src}
+                    lit={c.lit}
+                    role={c.role || "OTHER"}
+                    onEdit={onEditCard}
+                    onDragStart={handleCardDragStart}
+                    onDragEnter={handleCardDragEnter}
+                    onDragOver={handleCardDragOver}
+                    onDrop={handleCardDrop}
+                    onKeyMove={handleKeyMove}
+                    onDragEnd={handleCardDragEnd}
+                    isDragOver={dragOverId === id}
+                    highlightRoles={highlightRoles}
+                  />
+                );
+              })
+            )}
+          </div>
+
+          <div className="bg-white border border-zinc-200 rounded-2xl p-4 md:p-6 shadow-sm">
+            <h2 className="font-medium mb-2">Result</h2>
+            <div className="text-xs text-zinc-500 mb-2">Joined literal translation in the new order:</div>
+            <div className="min-h-[64px] border border-zinc-200 rounded-xl p-3 bg-zinc-50 text-lg leading-8">
+              {composedTarget || <span className="text-zinc-400">(Will appear here once you reorder)</span>}
+            </div>
+
+            {/* Reasoning hints */}
+            <div className="mt-3 text-xs text-zinc-600">
+              <ReasoningHints direction={direction} cards={orderedCards} />
+            </div>
+
+            <div className="mt-4 grid gap-2">
+              <button className="px-3 py-2 text-sm rounded-xl bg-zinc-100 hover:bg-zinc-200" onClick={() => setOrder(cards.map((c) => c.id))}>Reset order</button>
+              <div className="text-xs text-zinc-500">Auto‑build is <strong>{autoBuild ? 'ON' : 'OFF'}</strong>{hasDragged ? ' (paused after drag)' : ''}. Use <em>Resume</em> to re‑enable.</div>
+            </div>
+
+            {/* Self-tests intentionally not mounted */}
+            {/* <SelfTests /> */}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+

client/src/contexts/AuthContext.tsx

@@ -0,0 +1,163 @@
+import React, { createContext, useContext, useState, useEffect, ReactNode } from 'react';
+import { api } from '../services/api';
+
+interface User {
+  id: string;
+  username: string;
+  email: string;
+  role: 'student' | 'instructor' | 'admin' | 'visitor';
+  targetCultures: string[];
+  nativeLanguage?: string;
+}
+
+interface AuthContextType {
+  user: User | null;
+  loading: boolean;
+  login: (email: string, password: string) => Promise<void>;
+  register: (userData: RegisterData) => Promise<void>;
+  logout: () => void;
+  updateProfile: (data: Partial<User>) => Promise<void>;
+}
+
+interface RegisterData {
+  username: string;
+  email: string;
+  password: string;
+  role?: 'student' | 'instructor' | 'admin';
+  targetCultures?: string[];
+  nativeLanguage?: string;
+}
+
+const AuthContext = createContext<AuthContextType | undefined>(undefined);
+
+export const useAuth = () => {
+  const context = useContext(AuthContext);
+  if (context === undefined) {
+    throw new Error('useAuth must be used within an AuthProvider');
+  }
+  return context;
+};
+
+interface AuthProviderProps {
+  children: ReactNode;
+}
+
+export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
+  const [user, setUser] = useState<User | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    // Check for stored token on app load
+    const token = localStorage.getItem('token');
+    if (token) {
+      api.defaults.headers.common['Authorization'] = `Bearer ${token}`;
+      fetchUser();
+    } else {
+      // Auto-setup visitor authentication
+      setupVisitorAuth();
+    }
+  }, []);
+
+  const setupVisitorAuth = async () => {
+    try {
+      const response = await api.post('/api/auth/login', {
+        email: 'visitor@example.com'
+      });
+      const { token, user } = response.data;
+
+      localStorage.setItem('token', token);
+      api.defaults.headers.common['Authorization'] = `Bearer ${token}`;
+      setUser(user);
+    } catch (error) {
+      console.error('Failed to setup visitor auth:', error);
+      // Set a fallback visitor token
+      const fallbackToken = `visitor_${Date.now()}`;
+      localStorage.setItem('token', fallbackToken);
+      api.defaults.headers.common['Authorization'] = `Bearer ${fallbackToken}`;
+      setUser({
+        id: 'visitor',
+        username: 'Visitor',
+        email: 'visitor@example.com',
+        role: 'visitor',
+        targetCultures: []
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const fetchUser = async () => {
+    try {
+      const response = await api.get('/api/auth/profile');
+      setUser(response.data);
+    } catch (error) {
+      console.error('Failed to fetch user:', error);
+      localStorage.removeItem('token');
+      delete api.defaults.headers.common['Authorization'];
+      // Try to setup visitor auth as fallback
+      setupVisitorAuth();
+      return;
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const login = async (email: string, password: string) => {
+    try {
+      const response = await api.post('/api/auth/login', { email });
+      const { token, user } = response.data;
+
+      localStorage.setItem('token', token);
+      localStorage.setItem('user', JSON.stringify(user));
+      api.defaults.headers.common['Authorization'] = `Bearer ${token}`;
+      setUser(user);
+    } catch (error: any) {
+      console.error('Login error:', error);
+      throw new Error(error.response?.data?.error || 'Login failed');
+    }
+  };
+
+  const register = async (userData: RegisterData) => {
+    try {
+      const response = await api.post('/api/auth/register', userData);
+      const { token, user } = response.data;
+
+      localStorage.setItem('token', token);
+      localStorage.setItem('user', JSON.stringify(user));
+      api.defaults.headers.common['Authorization'] = `Bearer ${token}`;
+      setUser(user);
+    } catch (error: any) {
+      throw new Error(error.response?.data?.error || 'Registration failed');
+    }
+  };
+
+  const logout = () => {
+    localStorage.removeItem('token');
+    delete api.defaults.headers.common['Authorization'];
+    setUser(null);
+    // Setup visitor auth after logout
+    setupVisitorAuth();
+  };
+
+  const updateProfile = async (data: Partial<User>) => {
+    try {
+      const response = await api.put('/api/auth/profile', data);
+      setUser(response.data);
+    } catch (error: any) {
+      throw new Error(error.response?.data?.error || 'Profile update failed');
+    }
+  };
+
+  return (
+    <AuthContext.Provider value={{
+      user,
+      loading,
+      login,
+      register,
+      logout,
+      updateProfile
+    }}>
+      {children}
+    </AuthContext.Provider>
+  );
+}; 

client/src/index.css

@@ -0,0 +1,152 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  html {
+    font-family: 'Inter', system-ui, sans-serif;
+  }
+}
+
+@layer components {
+  .btn-primary {
+    @apply bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-lg transition-colors duration-200;
+  }
+  
+  .btn-secondary {
+    @apply bg-gray-200 hover:bg-gray-300 text-gray-800 font-medium py-2 px-4 rounded-lg transition-colors duration-200;
+  }
+  
+  .btn-danger {
+    @apply bg-red-600 hover:bg-red-700 text-white font-medium py-2 px-4 rounded-lg transition-colors duration-200;
+  }
+  
+  .input-field {
+    @apply w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent;
+  }
+  
+  .card {
+    @apply bg-white rounded-lg shadow-md border border-gray-200 p-6;
+  }
+  
+  .highlight-cultural {
+    @apply bg-yellow-100 border-b-2 border-yellow-400 px-1 rounded;
+  }
+  
+  .text-gradient {
+    @apply bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent;
+  }
+  
+  .font-smiley {
+    font-family: 'SF Pro Display', 'Segoe UI', 'Roboto', 'Inter', system-ui, sans-serif;
+    font-weight: 400; /* Regular for submissions and briefs */
+  }
+  
+  .font-source-text {
+    font-family: 'SF Pro Display', 'Segoe UI', 'Roboto', 'Inter', system-ui, sans-serif;
+    font-weight: 500; /* Medium for source texts */
+  }
+}
+
+@layer utilities {
+  .line-clamp-1 {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 1;
+  }
+  
+  .line-clamp-2 {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+  }
+  
+  .line-clamp-3 {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
+  }
+}
+
+/* Custom scrollbar */
+::-webkit-scrollbar {
+  width: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: #f1f1f1;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #c1c1c1;
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #a8a8a8;
+}
+
+/* Animation classes */
+.fade-in {
+  animation: fadeIn 0.3s ease-in-out;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.slide-in {
+  animation: slideIn 0.3s ease-out;
+}
+
+@keyframes slideIn {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+/* Cultural element highlighting */
+.cultural-element {
+  position: relative;
+  cursor: help;
+}
+
+.cultural-element:hover::after {
+  content: attr(data-tooltip);
+  position: absolute;
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  background: #1f2937;
+  color: white;
+  padding: 8px 12px;
+  border-radius: 6px;
+  font-size: 14px;
+  white-space: nowrap;
+  z-index: 1000;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+}
+
+.cultural-element:hover::before {
+  content: '';
+  position: absolute;
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  border: 5px solid transparent;
+  border-top-color: #1f2937;
+  z-index: 1000;
+} 

client/src/index.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { BrowserRouter } from 'react-router-dom';
+import { AuthProvider } from './contexts/AuthContext';
+import './index.css';
+import App from './App';
+
+const root = ReactDOM.createRoot(
+  document.getElementById('root') as HTMLElement
+);
+
+root.render(
+  <React.StrictMode>
+    <BrowserRouter>
+      <AuthProvider>
+        <App />
+      </AuthProvider>
+    </BrowserRouter>
+  </React.StrictMode>
+); 

client/src/pages/CreateSubmission.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { useParams, Link } from 'react-router-dom';
+
+const CreateSubmission: React.FC = () => {
+  const { id } = useParams();
+
+  return (
+    <div className="px-4 sm:px-6 lg:px-8">
+      <div className="mb-8">
+        <h1 className="text-2xl font-bold text-gray-900">Create Transcreation</h1>
+        <p className="mt-2 text-gray-600">Submit your creative translation for this text</p>
+      </div>
+      
+      <div className="bg-white rounded-lg shadow p-6">
+        <h2 className="text-lg font-medium text-gray-900 mb-4">Text ID: {id}</h2>
+        <p className="text-gray-600 mb-4">
+          This page will contain a form for creating transcreations, including fields for the translated text, 
+          cultural adaptations, explanations, and target culture selection.
+        </p>
+        
+        <div className="flex space-x-3">
+          <Link
+            to={`/text/${id}`}
+            className="bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200"
+          >
+            Back to Text
+          </Link>
+          <Link
+            to="/submissions"
+            className="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200"
+          >
+            View My Submissions
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CreateSubmission; 

client/src/pages/Dashboard.tsx

@@ -0,0 +1,204 @@
+import React, { useState, useEffect } from 'react';
+import { useNavigate, Link } from 'react-router-dom';
+import { 
+  AcademicCapIcon, 
+  BookOpenIcon, 
+  HandThumbUpIcon,
+  UserIcon,
+  ChartBarIcon,
+  DocumentTextIcon
+} from '@heroicons/react/24/outline';
+
+interface User {
+  name: string;
+  email: string;
+  role: string;
+}
+
+const Dashboard: React.FC = () => {
+  const [user, setUser] = useState<User | null>(null);
+  const [isFirstLogin, setIsFirstLogin] = useState(false);
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    const userData = localStorage.getItem('user');
+    if (userData) {
+      const userObj = JSON.parse(userData);
+      setUser(userObj);
+      
+      // Check if this is the first login
+      const loginHistory = localStorage.getItem('loginHistory');
+      if (!loginHistory || !JSON.parse(loginHistory)[userObj.email]) {
+        setIsFirstLogin(true);
+      }
+    } else {
+      navigate('/login');
+    }
+  }, [navigate]);
+
+  const getGreeting = () => {
+    if (!user) return '';
+    const nameToShow = (user as any).displayName || user.name;
+    return isFirstLogin ? `Welcome, ${nameToShow}!` : `Welcome back, ${nameToShow}!`;
+  };
+
+  const getRoleDisplay = () => {
+    if (!user) return '';
+    return user.role === 'admin' ? 'Admin' : 'Student';
+  };
+
+  const quickActions = [
+    {
+      name: 'Tutorial Tasks',
+      description: 'Complete weekly tutorial tasks',
+      href: '/tutorial-tasks',
+      icon: AcademicCapIcon,
+      color: 'bg-blue-500'
+    },
+    {
+      name: 'Weekly Practice',
+      description: 'Practice with weekly examples',
+      href: '/weekly-practice',
+      icon: BookOpenIcon,
+      color: 'bg-green-500'
+    },
+    {
+      name: 'Vote Results',
+      description: 'View and vote on translations',
+      href: '/votes',
+      icon: HandThumbUpIcon,
+      color: 'bg-purple-500'
+    },
+    {
+      name: 'Toolkit',
+      description: 'Use evaluation and reference tools',
+      href: '/toolkit',
+      icon: ChartBarIcon,
+      color: 'bg-indigo-500'
+    },
+    {
+      name: 'Slides',
+      description: 'Download tutorial slides',
+      href: '/slides',
+      icon: DocumentTextIcon,
+      color: 'bg-amber-500'
+    },
+    {
+      name: 'Feedback',
+      description: 'Send feature requests and issues',
+      href: '/feedback',
+      icon: DocumentTextIcon,
+      color: 'bg-rose-500'
+    }
+  ];
+
+  const actionsToShow = quickActions.filter((action) => {
+    const role = user?.role || 'visitor';
+    if (role === 'visitor' && action.name === 'Slides') return false;
+    return true;
+  });
+
+  if (!user) {
+    return (
+      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
+        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-indigo-600"></div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen bg-gray-50 py-8">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        {/* Header */}
+        <div className="mb-8">
+          <div className="flex items-center justify-between">
+            <div>
+              <h1 className="text-3xl font-bold text-gray-900">{getGreeting()}</h1>
+              <p className="text-gray-600 mt-2">
+                Ready to practice your translation skills?
+              </p>
+            </div>
+            <div className="flex items-center space-x-3">
+              <span className="text-sm text-gray-600">{getRoleDisplay()}</span>
+              {user.role === 'admin' && (
+                <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">
+                  Admin
+                </span>
+              )}
+            </div>
+          </div>
+        </div>
+
+        {/* Quick Actions */}
+        <div className="mb-8">
+          <h2 className="text-lg font-medium text-gray-900 mb-4">Quick Actions</h2>
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+            {actionsToShow.map((action) => (
+              <Link
+                key={action.name}
+                to={action.href}
+                className="bg-white rounded-lg shadow-sm border border-gray-200 p-6 hover:shadow-md transition-shadow"
+              >
+                <div className="flex items-center">
+                  <div className={`p-3 rounded-lg ${action.color}`}>
+                    <action.icon className="h-6 w-6 text-white" />
+                  </div>
+                  <div className="ml-4">
+                    <h3 className="text-lg font-medium text-gray-900">{action.name}</h3>
+                    <p className="text-gray-600">{action.description}</p>
+                  </div>
+                </div>
+              </Link>
+            ))}
+          </div>
+        </div>
+
+        {/* Admin Panel (only for admin users) */}
+        {user.role === 'admin' && (
+          <div className="mb-8">
+            <h2 className="text-lg font-medium text-gray-900 mb-4">Admin Panel</h2>
+            <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
+              <div className="flex items-center mb-4">
+                <UserIcon className="h-6 w-6 text-gray-600 mr-3" />
+                <h3 className="text-lg font-medium text-gray-900">System Management</h3>
+              </div>
+              <p className="text-gray-600 mb-4">
+                Manage users, content, and system settings.
+              </p>
+              <Link
+                to="/manage"
+                className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700"
+              >
+                Go to Manage
+              </Link>
+            </div>
+          </div>
+        )}
+
+        {/* Overview */}
+        <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
+          <div className="flex items-center mb-4">
+            <ChartBarIcon className="h-6 w-6 text-gray-600 mr-3" />
+            <h3 className="text-lg font-medium text-gray-900">Course Overview</h3>
+          </div>
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+            <div className="text-center">
+              <div className="text-2xl font-bold text-indigo-600">6</div>
+              <div className="text-sm text-gray-600">Weeks</div>
+            </div>
+            <div className="text-center">
+              <div className="text-2xl font-bold text-green-600">2</div>
+              <div className="text-sm text-gray-600">Task Types</div>
+            </div>
+            <div className="text-center">
+              <div className="text-2xl font-bold text-purple-600">Voting</div>
+              <div className="text-sm text-gray-600">Peer Review</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Dashboard; 

client/src/pages/Feedback.tsx

@@ -0,0 +1,138 @@
+import React, { useEffect, useState } from 'react';
+import { api } from '../services/api';
+
+const Feedback: React.FC = () => {
+  const [message, setMessage] = useState('');
+  const [status, setStatus] = useState<string>('');
+  const [sending, setSending] = useState(false);
+  const [isAdmin, setIsAdmin] = useState(false);
+  const [messages, setMessages] = useState<Array<{ _id: string; userName?: string; userEmail?: string; content: string; createdAt?: string; read?: boolean }>>([]);
+
+  useEffect(() => {
+    const u = localStorage.getItem('user');
+    try { const parsed = u ? JSON.parse(u) : null; setIsAdmin(parsed?.role === 'admin'); } catch {}
+  }, []);
+
+  const send = async () => {
+    if (!message.trim()) return;
+    try {
+      setSending(true); setStatus('');
+      const token = localStorage.getItem('token') || 'visitor_anon';
+      const user = localStorage.getItem('user') || '';
+      const base = (((api.defaults as any)?.baseURL as string) || '').replace(/\/$/, '');
+      const resp = await fetch(`${base}/api/messages`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'Authorization': `Bearer ${token}`,
+          'user-info': user,
+          'user-role': (JSON.parse(user||'{}')?.role || 'visitor')
+        },
+        body: JSON.stringify({ content: message })
+      });
+      if (!resp.ok) throw new Error('Failed');
+      setMessage('');
+      setStatus('Sent');
+    } catch (e) {
+      setStatus('Failed to send');
+    } finally {
+      setSending(false);
+    }
+  };
+
+  useEffect(() => {
+    let timer: any;
+    const load = async () => {
+      try {
+        if (!isAdmin) return;
+        const token = localStorage.getItem('token') || '';
+        const base = (((api.defaults as any)?.baseURL as string) || '').replace(/\/$/, '');
+        const resp = await fetch(`${base}/api/messages`, { headers: { 'Authorization': `Bearer ${token}`, 'user-role': 'admin', 'user-info': localStorage.getItem('user') || '' } });
+        if (resp.ok) {
+          const data = await resp.json();
+          setMessages(Array.isArray(data?.messages) ? data.messages : []);
+        }
+      } catch {}
+    };
+    load();
+    if (isAdmin) timer = setInterval(load, 60000);
+    return () => { if (timer) clearInterval(timer); };
+  }, [isAdmin]);
+
+  return (
+    <div className="min-h-screen bg-gray-50 py-8">
+      <div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
+        <h1 className="text-2xl font-semibold text-gray-900 mb-4">Feedback & Suggestions</h1>
+        <p className="text-sm text-gray-600 mb-4">Share feature requests or issues.</p>
+        <div className="bg-white rounded-lg border border-gray-200 p-4 space-y-3">
+          <textarea
+            className="w-full border border-gray-300 rounded-md px-3 py-2 min-h-[160px]"
+            placeholder="Your message..."
+            value={message}
+            onChange={(e) => setMessage(e.target.value)}
+          />
+          <div className="flex justify-end">
+            <button disabled={sending} onClick={send} className="px-4 py-2 rounded-md bg-indigo-600 text-white hover:bg-indigo-700 disabled:bg-gray-400">{sending ? 'Sending…' : 'Send'}</button>
+          </div>
+          {status && <div className="text-xs text-gray-600">{status}</div>}
+        </div>
+        {isAdmin && (
+          <div className="mt-6 bg-white rounded-lg border border-gray-200 p-4">
+            <div className="flex items-center justify-between mb-3">
+              <div className="text-sm font-medium text-gray-900">Inbox</div>
+              <div className="text-xs text-gray-600">{messages.length} messages</div>
+            </div>
+            {messages.length === 0 ? (
+              <div className="text-sm text-gray-500">No messages yet.</div>
+            ) : (
+              <ul className="divide-y divide-gray-100">
+                {messages.map((m) => (
+                  <li key={m._id} className="py-3 flex items-start justify-between gap-3">
+                    <div className="min-w-0">
+                      <div className="text-gray-900 text-sm break-words whitespace-pre-wrap">{m.content}</div>
+                      <div className="text-xs text-gray-500 mt-1">{m.userName} {m.userEmail ? `· ${m.userEmail}` : ''} {m.createdAt ? `· ${new Date(m.createdAt).toLocaleString()}` : ''}</div>
+                    </div>
+                    <div className="flex items-center gap-2">
+                      {!m.read && (
+                        <button
+                          className="text-xs px-2 py-1 rounded-md bg-gray-100 hover:bg-gray-200"
+                          onClick={async () => {
+                            try {
+                              const token = localStorage.getItem('token') || '';
+                              const base = (((api.defaults as any)?.baseURL as string) || '').replace(/\/$/, '');
+                              const resp = await fetch(`${base}/api/messages/${m._id}/read`, { method: 'PATCH', headers: { 'Authorization': `Bearer ${token}`, 'user-role': 'admin', 'user-info': localStorage.getItem('user') || '' } });
+                              if (resp.ok) {
+                                setMessages((prev) => prev.map(x => x._id === m._id ? { ...x, read: true } : x));
+                              }
+                            } catch {}
+                          }}
+                        >Mark read</button>
+                      )}
+                      <button
+                        className="text-xs px-2 py-1 rounded-md bg-rose-50 hover:bg-rose-100 text-rose-700"
+                        onClick={async () => {
+                          try {
+                            const token = localStorage.getItem('token') || '';
+                            const base = (((api.defaults as any)?.baseURL as string) || '').replace(/\/$/, '');
+                            const resp = await fetch(`${base}/api/messages/${m._id}`, { method: 'DELETE', headers: { 'Authorization': `Bearer ${token}`, 'user-role': 'admin', 'user-info': localStorage.getItem('user') || '' } });
+                            if (resp.ok) {
+                              setMessages((prev) => prev.filter(x => x._id !== m._id));
+                            }
+                          } catch {}
+                        }}
+                      >Delete</button>
+                    </div>
+                  </li>
+                ))}
+              </ul>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default Feedback;
+
+

client/src/pages/Home.tsx

@@ -0,0 +1,173 @@
+import React, { useEffect, useState } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import {
+  AcademicCapIcon,
+  UsersIcon,
+  LightBulbIcon,
+  DocumentTextIcon
+} from '@heroicons/react/24/outline';
+
+interface User {
+  name: string;
+  email: string;
+  role?: string;
+}
+
+const Home: React.FC = () => {
+  const [user, setUser] = useState<User | null>(null);
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    // Check if user is already logged in
+    const userData = localStorage.getItem('user');
+    const token = localStorage.getItem('token');
+    
+    if (userData && token) {
+      setUser(JSON.parse(userData));
+    }
+  }, []);
+
+  const handleGetStarted = () => {
+    if (user) {
+      // User is already logged in, redirect to dashboard
+      navigate('/dashboard');
+    } else {
+      // User is not logged in, redirect to login
+      navigate('/login');
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100">
+      {/* Hero Section */}
+      <div className="relative overflow-hidden">
+        <div className="max-w-7xl mx-auto">
+          <div className="relative z-10 pb-8 sm:pb-16 md:pb-20 lg:max-w-2xl lg:w-full lg:pb-28 xl:pb-32">
+            <main className="mt-10 mx-auto max-w-7xl px-4 sm:mt-12 sm:px-6 md:mt-16 lg:mt-20 lg:px-8 xl:mt-28">
+              <div className="sm:text-center lg:text-left">
+                <h1 className="text-4xl tracking-tight font-extrabold text-gray-900 sm:text-5xl md:text-6xl">
+                  <span className="block text-gradient">Transcreation</span>
+                  <span className="block text-indigo-600">Sandbox</span>
+                </h1>
+                <p className="mt-3 text-base text-gray-500 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0">
+                  A practice platform for translation students to work with puns and wordplay examples. 
+                  Enter your student email to start practicing transcreation skills.
+                </p>
+                <div className="mt-5 sm:mt-8 sm:flex sm:justify-center lg:justify-start">
+                  <div className="rounded-md shadow">
+                    <button
+                      onClick={handleGetStarted}
+                      className="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 md:py-4 md:text-lg md:px-10"
+                    >
+                      {user ? 'Continue to Dashboard' : 'Get Started'}
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </main>
+          </div>
+        </div>
+      </div>
+
+      {/* Features Section */}
+      <div className="py-12 bg-white">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="lg:text-center">
+            <h2 className="text-base text-indigo-600 font-semibold tracking-wide uppercase">Features</h2>
+            <p className="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
+              Practice translation skills
+            </p>
+            <p className="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
+              Work with puns and wordplay examples, submit translations, and vote on peer submissions.
+            </p>
+          </div>
+
+          <div className="mt-10">
+            <dl className="space-y-10 md:space-y-0 md:grid md:grid-cols-2 md:gap-x-8 md:gap-y-10">
+              <div className="relative">
+                <dt>
+                  <div className="absolute flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
+                    <AcademicCapIcon className="h-6 w-6" aria-hidden="true" />
+                  </div>
+                  <p className="ml-16 text-lg leading-6 font-medium text-gray-900">
+                    Practice Examples
+                  </p>
+                </dt>
+                <dd className="mt-2 ml-16 text-base text-gray-500">
+                  Work with curated puns and wordplay examples in English and Chinese 
+                  for translation practice.
+                </dd>
+              </div>
+
+              <div className="relative">
+                <dt>
+                  <div className="absolute flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
+                    <DocumentTextIcon className="h-6 w-6" aria-hidden="true" />
+                  </div>
+                  <p className="ml-16 text-lg leading-6 font-medium text-gray-900">
+                    Submit Translations
+                  </p>
+                </dt>
+                <dd className="mt-2 ml-16 text-base text-gray-500">
+                  Submit your translations for practice examples and track your progress.
+                </dd>
+              </div>
+
+              <div className="relative">
+                <dt>
+                  <div className="absolute flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
+                    <UsersIcon className="h-6 w-6" aria-hidden="true" />
+                  </div>
+                  <p className="ml-16 text-lg leading-6 font-medium text-gray-900">
+                    Peer Voting
+                  </p>
+                </dt>
+                <dd className="mt-2 ml-16 text-base text-gray-500">
+                  Vote on anonymous student translations and see how your work compares.
+                </dd>
+              </div>
+
+              <div className="relative">
+                <dt>
+                  <div className="absolute flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
+                    <LightBulbIcon className="h-6 w-6" aria-hidden="true" />
+                  </div>
+                  <p className="ml-16 text-lg leading-6 font-medium text-gray-900">
+                    Cultural Guidance
+                  </p>
+                </dt>
+                <dd className="mt-2 ml-16 text-base text-gray-500">
+                  Highlight culturally sensitive elements in source texts and provide 
+                  reference examples for comparison.
+                </dd>
+              </div>
+            </dl>
+          </div>
+        </div>
+      </div>
+
+      
+
+      {/* CTA Section */}
+      <div className="bg-indigo-700">
+        <div className="max-w-2xl mx-auto text-center py-16 px-4 sm:py-20 sm:px-6 lg:px-8">
+          <h2 className="text-3xl font-extrabold text-white sm:text-4xl">
+            <span className="block">Ready to start?</span>
+            <span className="block">Begin your translation practice.</span>
+          </h2>
+          <p className="mt-4 text-lg leading-6 text-indigo-200">
+            Enter your student email to access the translation practice tools.
+          </p>
+          <button
+            onClick={handleGetStarted}
+            className="mt-8 w-full inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-indigo-600 bg-white hover:bg-indigo-50 sm:w-auto"
+          >
+            {user ? 'Continue to Dashboard' : 'Get Started'}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Home; 

client/src/pages/Login.tsx

@@ -0,0 +1,117 @@
+import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { api } from '../services/api';
+
+// Pre-loaded user details
+const PREDEFINED_USERS = {
+  'mche0278@student.monash.edu': { name: 'Michelle Chen', email: 'mche0278@student.monash.edu' },
+  'zfan0011@student.monash.edu': { name: 'Fang Zhou', email: 'zfan0011@student.monash.edu' },
+  'yfuu0071@student.monash.edu': { name: 'Fu Yitong', email: 'yfuu0071@student.monash.edu' },
+  'hhan0022@student.monash.edu': { name: 'Han Heyang', email: 'hhan0022@student.monash.edu' },
+  'ylei0024@student.monash.edu': { name: 'Lei Yang', email: 'ylei0024@student.monash.edu' },
+  'wlii0217@student.monash.edu': { name: 'Li Wenhui', email: 'wlii0217@student.monash.edu' },
+  'zlia0091@student.monash.edu': { name: 'Liao Zhixin', email: 'zlia0091@student.monash.edu' },
+  'hmaa0054@student.monash.edu': { name: 'Ma Huachen', email: 'hmaa0054@student.monash.edu' },
+  'csun0059@student.monash.edu': { name: 'Sun Chongkai', email: 'csun0059@student.monash.edu' },
+  'pwon0030@student.monash.edu': { name: 'Wong Prisca Si-Heng', email: 'pwon0030@student.monash.edu' },
+  'zxia0017@student.monash.edu': { name: 'Xia Zechen', email: 'zxia0017@student.monash.edu' },
+  'lyou0021@student.monash.edu': { name: 'You Lianxiang', email: 'lyou0021@student.monash.edu' },
+  'wzhe0034@student.monash.edu': { name: 'Zheng Weijie', email: 'wzhe0034@student.monash.edu' },
+  'szhe0055@student.monash.edu': { name: 'Zheng Siyuan', email: 'szhe0055@student.monash.edu' },
+  'xzhe0055@student.monash.edu': { name: 'Zheng Xiang', email: 'xzhe0055@student.monash.edu' },
+  'hongchang.yu@monash.edu': { name: 'Tristan', email: 'hongchang.yu@monash.edu' }
+};
+
+const Login: React.FC = () => {
+  const [email, setEmail] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState('');
+  const navigate = useNavigate();
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setIsLoading(true);
+    setError('');
+
+    try {
+      const response = await api.post('/api/auth/login', { email });
+      const { token, user } = response.data;
+
+      localStorage.setItem('token', token);
+      localStorage.setItem('user', JSON.stringify(user));
+      api.defaults.headers.common['Authorization'] = `Bearer ${token}`;
+      
+      navigate('/dashboard');
+    } catch (error: any) {
+      console.error('Login error:', error);
+      setError(error.response?.data?.error || 'Login failed');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
+      <div className="max-w-md w-full space-y-8">
+        <div className="text-center">
+          <h1 className="text-3xl font-bold text-gray-900 mb-2">
+            Welcome to Transcreation Sandbox
+          </h1>
+          <p className="text-gray-600">
+            Enter your student email address to continue
+          </p>
+        </div>
+        
+        {error && (
+          <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-md">
+            {error}
+          </div>
+        )}
+
+        <form className="mt-8 space-y-6" onSubmit={handleSubmit}>
+          <div>
+            <label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-2">
+              Student Email Address
+            </label>
+            <input
+              id="email"
+              name="email"
+              type="email"
+              autoComplete="email"
+              required
+              className="appearance-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm"
+              placeholder="your.email@student.monash.edu"
+              value={email}
+              onChange={(e) => {
+                setEmail(e.target.value);
+                if (error) setError('');
+              }}
+            />
+          </div>
+
+          <div>
+            <button
+              type="submit"
+              disabled={isLoading}
+              className="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:opacity-50 disabled:cursor-not-allowed"
+            >
+              {isLoading ? (
+                <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div>
+              ) : (
+                'Continue'
+              )}
+            </button>
+          </div>
+        </form>
+
+        <div className="text-center">
+          <p className="text-xs text-gray-500">
+            If you're not a student, you can still enter any email address to access as a visitor.
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Login; 

client/src/pages/Profile.tsx

@@ -0,0 +1,1572 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import { api } from '../services/api';
+import {
+  UsersIcon,
+  DocumentTextIcon,
+  ChartBarIcon,
+  CogIcon,
+  UserGroupIcon,
+  AcademicCapIcon,
+  ShieldCheckIcon
+} from '@heroicons/react/24/outline';
+
+interface User {
+  name: string;
+  email: string;
+  role?: string;
+  displayName?: string;
+  online?: boolean;
+}
+
+interface SystemStats {
+  totalUsers: number;
+  practiceExamples: number;
+  totalSubmissions: number;
+  activeSessions: number;
+}
+
+interface PracticeExample {
+  _id: string;
+  title: string;
+  content: string;
+  sourceLanguage: string;
+  sourceCulture: string;
+  culturalElements: any[];
+  difficulty: string;
+  createdAt: string;
+}
+
+interface TutorialTask {
+  _id: string;
+  title: string;
+  content: string;
+  sourceLanguage: string;
+  sourceCulture: string;
+  weekNumber: number;
+  difficulty: string;
+  culturalElements: any[];
+  translationBrief?: string;
+  createdAt: string;
+}
+
+interface WeeklyPractice {
+  _id: string;
+  title: string;
+  content: string;
+  sourceLanguage: string;
+  sourceCulture: string;
+  weekNumber: number;
+  difficulty: string;
+  culturalElements: any[];
+  translationBrief?: string;
+  createdAt: string;
+}
+
+const Manage: React.FC = () => {
+  const [user, setUser] = useState<User | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [stats, setStats] = useState<SystemStats | null>(null);
+  const [statsLoading, setStatsLoading] = useState(true);
+  const [examples, setExamples] = useState<PracticeExample[]>([]);
+  const [examplesLoading, setExamplesLoading] = useState(false);
+  const [tutorialTasks, setTutorialTasks] = useState<TutorialTask[]>([]);
+  const [tutorialTasksLoading, setTutorialTasksLoading] = useState(false);
+  const [weeklyPractice, setWeeklyPractice] = useState<WeeklyPractice[]>([]);
+  const [weeklyPracticeLoading, setWeeklyPracticeLoading] = useState(false);
+  const [users, setUsers] = useState<User[]>([]);
+  const [usersLoading, setUsersLoading] = useState(false);
+  const [loginSummary, setLoginSummary] = useState<any[]>([]);
+  const [loadingSummary, setLoadingSummary] = useState(false);
+  const [summaryRole, setSummaryRole] = useState<string>('all');
+  const [summaryRange, setSummaryRange] = useState<number>(7*24*60*60*1000);
+  const [showAllSummary, setShowAllSummary] = useState<boolean>(false);
+  const [allLoginSummary, setAllLoginSummary] = useState<any[]>([]);
+  const fetchLoginSummary = useCallback(async (rangeMs: number, role: string) => {
+    setLoadingSummary(true);
+    try {
+      const resp = await api.get(`/api/auth/admin/login-summary?sinceMs=${rangeMs}&role=${role}`);
+      const sessions = resp.data?.sessions || [];
+      setAllLoginSummary(sessions);
+      const filtered = role === 'all' ? sessions : sessions.filter((s: any) => s.role === role);
+      setLoginSummary(filtered);
+    } catch (e) {
+      setLoginSummary([]);
+    } finally {
+      setLoadingSummary(false);
+    }
+  }, [setLoadingSummary, setLoginSummary]);
+  const [showAddUser, setShowAddUser] = useState(false);
+  const [showAddExample, setShowAddExample] = useState(false);
+  const [showAddTutorialTask, setShowAddTutorialTask] = useState(false);
+  const [showAddWeeklyPractice, setShowAddWeeklyPractice] = useState(false);
+  const [showAddTranslationBrief, setShowAddTranslationBrief] = useState(false);
+  const [editingUser, setEditingUser] = useState<User | null>(null);
+  const [editingExample, setEditingExample] = useState<PracticeExample | null>(null);
+  const [editingTutorialTask, setEditingTutorialTask] = useState<TutorialTask | null>(null);
+  const [editingWeeklyPractice, setEditingWeeklyPractice] = useState<WeeklyPractice | null>(null);
+  const [newUser, setNewUser] = useState({ name: '', displayName: '', email: '', role: 'student' });
+  const [newExample, setNewExample] = useState({ 
+    title: '', 
+    content: '', 
+    sourceLanguage: 'English', 
+    sourceCulture: 'American', 
+    difficulty: 'intermediate' 
+  });
+  const [newTutorialTask, setNewTutorialTask] = useState({
+    title: '',
+    content: '',
+    sourceLanguage: 'English',
+    sourceCulture: 'American',
+    weekNumber: 1,
+    difficulty: 'intermediate'
+  });
+  const [newWeeklyPractice, setNewWeeklyPractice] = useState({
+    title: '',
+    content: '',
+    sourceLanguage: 'English',
+    sourceCulture: 'American',
+    weekNumber: 1,
+    difficulty: 'intermediate'
+  });
+  const [newTranslationBrief, setNewTranslationBrief] = useState({
+    weekNumber: 1,
+    translationBrief: '',
+    type: 'tutorial' // 'tutorial' or 'weekly-practice'
+  });
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    const userData = localStorage.getItem('user');
+    if (userData) {
+      const user = JSON.parse(userData);
+      setUser(user);
+      
+      // Redirect non-admin users to dashboard
+      if (user.role !== 'admin') {
+        navigate('/dashboard');
+        return;
+      }
+    } else {
+      navigate('/login');
+      return;
+    }
+    setLoading(false);
+  }, [navigate]);
+
+  const fetchAdminStats = useCallback(async () => {
+    try {
+      setStatsLoading(true);
+      const response = await api.get('/api/auth/admin/stats');
+      setStats(response.data.stats);
+    } catch (error) {
+      console.error('Failed to fetch admin stats:', error);
+    } finally {
+      setStatsLoading(false);
+    }
+  }, []);
+
+  const fetchPracticeExamples = useCallback(async () => {
+    try {
+      setExamplesLoading(true);
+      const response = await api.get('/api/auth/admin/practice-examples');
+      setExamples(response.data.examples);
+    } catch (error) {
+      console.error('Failed to fetch practice examples:', error);
+    } finally {
+      setExamplesLoading(false);
+    }
+  }, []);
+
+  const fetchUsers = useCallback(async () => {
+    try {
+      setUsersLoading(true);
+      const response = await api.get('/api/auth/admin/users');
+      setUsers(response.data.users);
+    } catch (error) {
+      console.error('Failed to fetch users:', error);
+    } finally {
+      setUsersLoading(false);
+    }
+  }, []);
+
+  const fetchTutorialTasks = useCallback(async () => {
+    try {
+      setTutorialTasksLoading(true);
+      const response = await api.get('/api/auth/admin/tutorial-tasks');
+      setTutorialTasks(response.data.tutorialTasks);
+    } catch (error) {
+      console.error('Failed to fetch tutorial tasks:', error);
+    } finally {
+      setTutorialTasksLoading(false);
+    }
+  }, []);
+
+  const fetchWeeklyPractice = useCallback(async () => {
+    try {
+      setWeeklyPracticeLoading(true);
+      const response = await api.get('/api/auth/admin/weekly-practice');
+      setWeeklyPractice(response.data.weeklyPractice);
+    } catch (error) {
+      console.error('Failed to fetch weekly practice:', error);
+    } finally {
+      setWeeklyPracticeLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (user?.role === 'admin') {
+      fetchAdminStats();
+      fetchPracticeExamples();
+      fetchTutorialTasks();
+      fetchWeeklyPractice();
+      fetchUsers();
+      (async () => {
+        try {
+          setLoadingSummary(true);
+          const resp = await api.get(`/api/auth/admin/login-summary?sinceMs=${summaryRange}&role=${summaryRole}`);
+          setLoginSummary(resp.data?.sessions || []);
+        } catch (e) {
+          setLoginSummary([]);
+        } finally {
+          setLoadingSummary(false);
+        }
+      })();
+    }
+  }, [user, fetchAdminStats, fetchPracticeExamples, fetchTutorialTasks, fetchWeeklyPractice, fetchUsers, summaryRange, summaryRole]);
+
+  const addUser = async () => {
+    try {
+      const response = await api.post('/api/auth/admin/users', newUser);
+      setNewUser({ name: '', displayName: '', email: '', role: 'student' });
+      setShowAddUser(false);
+      await fetchUsers();
+      alert('User added successfully!');
+    } catch (error) {
+      console.error('Failed to add user:', error);
+      alert('Failed to add user');
+    }
+  };
+
+  const updateUser = async (email: string, updates: Partial<User>) => {
+    try {
+      await api.put(`/api/auth/admin/users/${email}`, updates);
+      setEditingUser(null);
+      await fetchUsers();
+      // If updating the currently logged-in user, refresh localStorage so greetings use displayName immediately
+      try {
+        const cur = localStorage.getItem('user');
+        if (cur) {
+          const curObj = JSON.parse(cur);
+          if (curObj?.email === email) {
+            const next = { ...curObj, ...(updates.name ? { name: updates.name } : {}), ...(updates.displayName !== undefined ? { displayName: updates.displayName } : {}) };
+            localStorage.setItem('user', JSON.stringify(next));
+          }
+        }
+      } catch {}
+      alert('User updated successfully!');
+    } catch (error) {
+      console.error('Failed to update user:', error);
+      alert('Failed to update user');
+    }
+  };
+
+  const deleteUser = async (email: string) => {
+    if (!window.confirm('Are you sure you want to delete this user?')) return;
+    
+    try {
+      await api.delete(`/api/auth/admin/users/${email}`);
+      await fetchUsers();
+      alert('User deleted successfully!');
+    } catch (error) {
+      console.error('Failed to delete user:', error);
+      alert('Failed to delete user');
+    }
+  };
+
+  const addExample = async () => {
+    try {
+      await api.post('/api/auth/admin/practice-examples', newExample);
+      setNewExample({ 
+        title: '', 
+        content: '', 
+        sourceLanguage: 'English', 
+        sourceCulture: 'American', 
+        difficulty: 'intermediate' 
+      });
+      setShowAddExample(false);
+      await fetchPracticeExamples();
+      alert('Example added successfully!');
+    } catch (error) {
+      console.error('Failed to add example:', error);
+      alert('Failed to add example');
+    }
+  };
+
+  const updateExample = async (id: string, updates: Partial<PracticeExample>) => {
+    try {
+      await api.put(`/api/auth/admin/practice-examples/${id}`, updates);
+      setEditingExample(null);
+      await fetchPracticeExamples();
+      alert('Example updated successfully!');
+    } catch (error) {
+      console.error('Failed to update example:', error);
+      alert('Failed to update example');
+    }
+  };
+
+  const deleteExample = async (id: string) => {
+    if (!window.confirm('Are you sure you want to delete this example?')) return;
+    
+    try {
+      await api.delete(`/api/auth/admin/practice-examples/${id}`);
+      await fetchPracticeExamples();
+      alert('Example deleted successfully!');
+    } catch (error) {
+      console.error('Failed to delete example:', error);
+      alert('Failed to delete example');
+    }
+  };
+
+  // Tutorial Tasks CRUD
+  const addTutorialTask = async () => {
+    try {
+      await api.post('/api/auth/admin/tutorial-tasks', newTutorialTask);
+      setNewTutorialTask({
+        title: '',
+        content: '',
+        sourceLanguage: 'English',
+        sourceCulture: 'American',
+        weekNumber: 1,
+        difficulty: 'intermediate'
+      });
+      setShowAddTutorialTask(false);
+      await fetchTutorialTasks();
+      alert('Tutorial task added successfully!');
+    } catch (error) {
+      console.error('Failed to add tutorial task:', error);
+      alert('Failed to add tutorial task');
+    }
+  };
+
+  const updateTutorialTask = async (id: string, updates: Partial<TutorialTask>) => {
+    try {
+      await api.put(`/api/auth/admin/tutorial-tasks/${id}`, updates);
+      setEditingTutorialTask(null);
+      await fetchTutorialTasks();
+      alert('Tutorial task updated successfully!');
+    } catch (error) {
+      console.error('Failed to update tutorial task:', error);
+      alert('Failed to update tutorial task');
+    }
+  };
+
+  const deleteTutorialTask = async (id: string) => {
+    if (!window.confirm('Are you sure you want to delete this tutorial task?')) return;
+    
+    try {
+      await api.delete(`/api/auth/admin/tutorial-tasks/${id}`);
+      await fetchTutorialTasks();
+      alert('Tutorial task deleted successfully!');
+    } catch (error) {
+      console.error('Failed to delete tutorial task:', error);
+      alert('Failed to delete tutorial task');
+    }
+  };
+
+  // Weekly Practice CRUD
+  const addWeeklyPractice = async () => {
+    try {
+      await api.post('/api/auth/admin/weekly-practice', newWeeklyPractice);
+      setNewWeeklyPractice({
+        title: '',
+        content: '',
+        sourceLanguage: 'English',
+        sourceCulture: 'American',
+        weekNumber: 1,
+        difficulty: 'intermediate'
+      });
+      setShowAddWeeklyPractice(false);
+      await fetchWeeklyPractice();
+      alert('Weekly practice added successfully!');
+    } catch (error) {
+      console.error('Failed to add weekly practice:', error);
+      alert('Failed to add weekly practice');
+    }
+  };
+
+  const updateWeeklyPractice = async (id: string, updates: Partial<WeeklyPractice>) => {
+    try {
+      await api.put(`/api/auth/admin/weekly-practice/${id}`, updates);
+      setEditingWeeklyPractice(null);
+      await fetchWeeklyPractice();
+      alert('Weekly practice updated successfully!');
+    } catch (error) {
+      console.error('Failed to update weekly practice:', error);
+      alert('Failed to update weekly practice');
+    }
+  };
+
+  const deleteWeeklyPractice = async (id: string) => {
+    if (!window.confirm('Are you sure you want to delete this weekly practice?')) return;
+    
+    try {
+      await api.delete(`/api/auth/admin/weekly-practice/${id}`);
+      await fetchWeeklyPractice();
+      alert('Weekly practice deleted successfully!');
+    } catch (error) {
+      console.error('Failed to delete weekly practice:', error);
+      alert('Failed to delete weekly practice');
+    }
+  };
+
+  const addTranslationBrief = async () => {
+    try {
+      await api.post('/api/auth/admin/translation-brief', newTranslationBrief);
+      setShowAddTranslationBrief(false);
+      setNewTranslationBrief({
+        weekNumber: 1,
+        translationBrief: '',
+        type: 'tutorial'
+      });
+      alert('Translation brief added successfully!');
+    } catch (error) {
+      console.error('Failed to add translation brief:', error);
+      alert('Failed to add translation brief');
+    }
+  };
+
+  const handleLogout = () => {
+    localStorage.removeItem('token');
+    localStorage.removeItem('user');
+    window.location.href = '/';
+  };
+
+  if (loading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center">
+        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-indigo-600"></div>
+      </div>
+    );
+  }
+
+  if (!user || user.role !== 'admin') {
+    return null; // Will redirect in useEffect
+  }
+
+  return (
+    <div className="px-4 sm:px-6 lg:px-8">
+      <div className="mb-8">
+        <div className="flex justify-between items-center">
+          <div>
+            <h1 className="text-2xl font-bold text-gray-900">Manage</h1>
+            <p className="mt-2 text-gray-600">Admin panel for system management</p>
+          </div>
+          <div className="flex items-center space-x-4">
+            <span className="text-sm text-gray-500">
+              Admin • {user.email}
+            </span>
+            <button
+              onClick={handleLogout}
+              className="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-md text-sm font-medium"
+            >
+              Logout
+            </button>
+          </div>
+        </div>
+      </div>
+      
+      {/* Login Summary */}
+      <div className="bg-white rounded-lg shadow p-6 mb-8">
+        <div className="flex items-center justify-between mb-4">
+          <h2 className="text-lg font-medium text-gray-900">Login Summary</h2>
+          <div className="space-x-2 flex items-center">
+            <select
+              value={summaryRole}
+              onChange={async (e) => {
+                const role = e.target.value;
+                setSummaryRole(role);
+                // Immediate local filter from the best available source
+                const base = (allLoginSummary && allLoginSummary.length > 0) ? allLoginSummary : loginSummary;
+                const immediate = role === 'all' ? base : base.filter((s: any) => s.role === role);
+                setLoginSummary(immediate);
+                // Fire-and-forget refresh to sync with server
+                fetchLoginSummary(summaryRange, role);
+              }}
+              className="px-2 py-1.5 text-sm border rounded-md"
+            >
+              <option value="all">All roles</option>
+              <option value="admin">Admin</option>
+              <option value="student">Student</option>
+              <option value="visitor">Visitor</option>
+            </select>
+            <button
+              onClick={async () => {
+                await fetchLoginSummary(summaryRange, summaryRole);
+              }}
+              className="bg-indigo-600 hover:bg-indigo-700 text-white px-3 py-1.5 rounded-md text-sm"
+            >
+              Refresh
+            </button>
+            <button
+              onClick={async () => {
+                try {
+                  const resp = await api.get(`/api/auth/admin/login-summary?format=csv&sinceMs=${summaryRange}&role=${summaryRole}` as any, { responseType: 'blob' } as any);
+                  const blob = new Blob([resp.data], { type: 'text/csv' });
+                  const url = window.URL.createObjectURL(blob);
+                  const link = document.createElement('a');
+                  link.href = url;
+                  link.download = 'login-summary.csv';
+                  document.body.appendChild(link);
+                  link.click();
+                  document.body.removeChild(link);
+                  window.URL.revokeObjectURL(url);
+                } catch {}
+              }}
+              className="bg-gray-600 hover:bg-gray-700 text-white px-3 py-1.5 rounded-md text-sm"
+            >
+              Download CSV
+            </button>
+          </div>
+        </div>
+        {loadingSummary ? (
+          <div className="text-gray-500">Loading...</div>
+        ) : (
+          <div className="overflow-x-auto">
+            <table className="min-w-full text-sm">
+              <thead>
+                <tr className="text-left text-gray-600">
+                  <th className="py-2 pr-4">Email</th>
+                  <th className="py-2 pr-4">Role</th>
+                  <th className="py-2 pr-4">Start</th>
+                  <th className="py-2 pr-4">Last Seen</th>
+                  <th className="py-2 pr-4">Duration</th>
+                </tr>
+              </thead>
+              <tbody>
+                {(showAllSummary ? loginSummary : loginSummary.slice(0, 5)).map((s, idx) => (
+                  <tr key={idx} className="border-t">
+                    <td className="py-2 pr-4 whitespace-nowrap">{s.email}</td>
+                    <td className="py-2 pr-4">{s.role}</td>
+                    <td className="py-2 pr-4 whitespace-nowrap">{new Date(s.startAt).toLocaleString()}</td>
+                    <td className="py-2 pr-4 whitespace-nowrap">{new Date(s.lastSeen).toLocaleString()}</td>
+                    <td className="py-2 pr-4">{Math.round((s.durationMs||0)/60000)} min</td>
+                  </tr>
+                ))}
+                {loginSummary.length === 0 && (
+                  <tr>
+                    <td colSpan={5} className="py-2 text-gray-500">No sessions in the selected period.</td>
+                  </tr>
+                )}
+              </tbody>
+            </table>
+            {loginSummary.length > 5 && (
+              <div className="mt-2">
+                <button onClick={() => setShowAllSummary(v => !v)} className="text-sm text-indigo-700 underline">
+                  {showAllSummary ? 'Show first 5' : `Show all (${loginSummary.length})`}
+                </button>
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+
+      {/* Admin Management Sections */}
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
+        {/* User Management */}
+        <div className="bg-white rounded-lg shadow p-6">
+          <div className="flex items-center mb-4">
+            <UsersIcon className="h-8 w-8 text-purple-600 mr-3" />
+            <h2 className="text-lg font-medium text-gray-900">User Management</h2>
+          </div>
+          <p className="text-gray-600 mb-4">
+            Manage student accounts, roles, and permissions.
+          </p>
+          <div className="space-y-2 mb-4">
+            <div className="flex items-center text-sm text-gray-500">
+              <div className="w-2 h-2 bg-purple-600 rounded-full mr-3"></div>
+              {usersLoading ? 'Loading users...' : `${users.length} registered users`}
+            </div>
+            <div className="flex items-center text-sm text-gray-500">
+              <div className="w-2 h-2 bg-purple-600 rounded-full mr-3"></div>
+              {users.filter(u => u.role === 'admin').length} admin users
+            </div>
+            <div className="flex items-center text-sm text-gray-500">
+              <div className="w-2 h-2 bg-purple-600 rounded-full mr-3"></div>
+              {users.filter(u => u.role === 'student').length} student users
+            </div>
+          </div>
+          <div className="space-y-2">
+            <button 
+              onClick={() => setShowAddUser(!showAddUser)}
+              className="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-md text-sm font-medium"
+            >
+              {showAddUser ? 'Cancel' : 'Add User'}
+            </button>
+            <button 
+              onClick={fetchUsers}
+              className="bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded-md text-sm font-medium ml-2"
+            >
+              Refresh
+            </button>
+          </div>
+          
+          {/* Add User Form */}
+          {showAddUser && (
+            <div className="mt-4 p-4 bg-gray-50 rounded-md">
+              <h4 className="text-sm font-medium text-gray-900 mb-3">Add New User:</h4>
+              <div className="space-y-3">
+                <input
+                  type="text"
+                  placeholder="Name"
+                  value={newUser.name}
+                  onChange={(e) => setNewUser({...newUser, name: e.target.value})}
+                  className="w-full px-3 py-2 border border-gray-300 rounded-md"
+                />
+                <input
+                  type="text"
+                  placeholder="Display Name (optional)"
+                  value={newUser.displayName}
+                  onChange={(e) => setNewUser({...newUser, displayName: e.target.value})}
+                  className="w-full px-3 py-2 border border-gray-300 rounded-md"
+                />
+                <input
+                  type="email"
+                  placeholder="Email"
+                  value={newUser.email}
+                  onChange={(e) => setNewUser({...newUser, email: e.target.value})}
+                  className="w-full px-3 py-2 border border-gray-300 rounded-md"
+                />
+                <select
+                  value={newUser.role}
+                  onChange={(e) => setNewUser({...newUser, role: e.target.value})}
+                  className="w-full px-3 py-2 border border-gray-300 rounded-md"
+                >
+                  <option value="student">Student</option>
+                  <option value="admin">Admin</option>
+                </select>
+                <button
+                  onClick={addUser}
+                  className="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-md text-sm font-medium"
+                >
+                  Add User
+                </button>
+              </div>
+            </div>
+          )}
+          
+          {/* Users List */}
+          {users.length > 0 && (
+            <div className="mt-4 max-h-60 overflow-y-auto">
+              <h4 className="text-sm font-medium text-gray-900 mb-2">Registered Users:</h4>
+              <div className="space-y-2">
+                {users.map((user) => (
+                  <div key={user.email} className="bg-gray-50 p-3 rounded-md">
+                    <div className="flex justify-between items-center">
+                      <div className="flex-1">
+                        <p className="text-sm font-medium text-gray-900 flex items-center">
+                          {user.online && (
+                            <span className="inline-block w-2 h-2 bg-green-500 rounded-full mr-2" aria-label="online" />
+                          )}
+                          {user.name}
+                        </p>
+                        <p className="text-xs text-gray-600">{user.email}</p>
+                      </div>
+                      <div className="flex items-center space-x-2">
+                        <span className={`text-xs px-2 py-1 rounded ${
+                          user.role === 'admin' 
+                            ? 'bg-red-100 text-red-800' 
+                            : 'bg-green-100 text-green-800'
+                        }`}>
+                          {user.role}
+                        </span>
+                        <button
+                          onClick={() => setEditingUser(user)}
+                          className="text-blue-600 hover:text-blue-800 text-xs"
+                        >
+                          Edit
+                        </button>
+                        {user.email !== 'hongchang.yu@monash.edu' && (
+                          <button
+                            onClick={() => deleteUser(user.email)}
+                            className="text-red-600 hover:text-red-800 text-xs"
+                          >
+                            Delete
+                          </button>
+                        )}
+                      </div>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+          
+          {/* Edit User Modal */}
+          {editingUser && (
+            <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+              <div className="bg-white p-6 rounded-lg max-w-md w-full mx-4">
+                <h3 className="text-lg font-medium text-gray-900 mb-4">Edit User</h3>
+                <div className="space-y-3">
+                  <input
+                    type="text"
+                    placeholder="Name"
+                    value={editingUser.name}
+                    onChange={(e) => setEditingUser({...editingUser, name: e.target.value})}
+                    className="w-full px-3 py-2 border border-gray-300 rounded-md"
+                  />
+                  <input
+                    type="text"
+                    placeholder="Preferred name (on-screen)"
+                    value={editingUser.displayName || ''}
+                    onChange={(e) => setEditingUser({...editingUser, displayName: e.target.value})}
+                    className="w-full px-3 py-2 border border-gray-300 rounded-md"
+                  />
+                  <input
+                    type="email"
+                    placeholder="Email"
+                    value={editingUser.email}
+                    disabled
+                    className="w-full px-3 py-2 border border-gray-300 rounded-md bg-gray-100"
+                  />
+                  <select
+                    value={editingUser.role}
+                    onChange={(e) => setEditingUser({...editingUser, role: e.target.value})}
+                    className="w-full px-3 py-2 border border-gray-300 rounded-md"
+                  >
+                    <option value="student">Student</option>
+                    <option value="admin">Admin</option>
+                  </select>
+                  <div className="flex space-x-2">
+                    <button
+                      onClick={() => updateUser(editingUser.email, editingUser)}
+                      className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium"
+                    >
+                      Update
+                    </button>
+                    <button
+                      onClick={() => setEditingUser(null)}
+                      className="bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded-md text-sm font-medium"
+                    >
+                      Cancel
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
+
+        {/* Content Management */}
+        <div className="bg-white rounded-lg shadow p-6">
+          <div className="flex items-center mb-4">
+            <DocumentTextIcon className="h-8 w-8 text-blue-600 mr-3" />
+            <h2 className="text-lg font-medium text-gray-900">Content Management</h2>
+          </div>
+          <p className="text-gray-600 mb-4">
+            Manage practice examples and content.
+          </p>
+          <div className="space-y-2 mb-4">
+            <div className="flex items-center text-sm text-gray-500">
+              <div className="w-2 h-2 bg-blue-600 rounded-full mr-3"></div>
+              {examplesLoading ? 'Loading examples...' : `${examples.length} practice examples`}
+            </div>
+            <div className="flex items-center text-sm text-gray-500">
+              <div className="w-2 h-2 bg-blue-600 rounded-full mr-3"></div>
+              Edit existing content
+            </div>
+          </div>
+          <div className="space-y-2">
+            <button 
+              onClick={() => setShowAddExample(!showAddExample)}
+              className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium"
+            >
+              {showAddExample ? 'Cancel' : 'Add Example'}
+            </button>
+            <button 
+              onClick={fetchPracticeExamples}
+              className="bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded-md text-sm font-medium ml-2"
+            >
+              Refresh
+            </button>
+          </div>
+
+          {/* Initialize Content Section */}
+          <div className="mt-6 p-4 bg-gray-50 rounded-md">
+            <h4 className="text-sm font-medium text-gray-900 mb-3">Initialize Content:</h4>
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+              <div>
+                <label className="block text-xs font-medium text-gray-700 mb-1">Practice Examples (Week 1)</label>
+                <button
+                  onClick={async () => {
+                    try {
+                      const token = localStorage.getItem('token');
+                      const response = await fetch('/api/search/initialize-practice-examples', {
+                        method: 'POST',
+                        headers: {
+                          'Authorization': `Bearer ${token}`,
+                          'Content-Type': 'application/json'
+                        }
+                      });
+                      if (response.ok) {
+                        alert('Practice examples initialized successfully!');
+                        await fetchPracticeExamples();
+                      } else {
+                        alert('Failed to initialize practice examples');
+                      }
+                    } catch (error) {
+                      alert('Failed to initialize practice examples');
+                    }
+                  }}
+                  className="w-full bg-green-600 hover:bg-green-700 text-white px-3 py-2 rounded-md text-xs font-medium"
+                >
+                  Initialize Week 1 Practice
+                </button>
+              </div>
+              
+              <div>
+                <label className="block text-xs font-medium text-gray-700 mb-1">Tutorial Tasks</label>
+                <div className="flex space-x-1">
+                  {[1, 2, 3, 4, 5, 6].map(week => (
+                    <button
+                      key={week}
+                      onClick={async () => {
+                        try {
+                          const token = localStorage.getItem('token');
+                          const response = await fetch(`/api/search/initialize-tutorial-tasks/${week}`, {
+                            method: 'POST',
+                            headers: {
+                              'Authorization': `Bearer ${token}`,
+                              'Content-Type': 'application/json'
+                            }
+                          });
+                          if (response.ok) {
+                            alert(`Tutorial tasks for Week ${week} initialized successfully!`);
+                          } else {
+                            alert(`Failed to initialize tutorial tasks for Week ${week}`);
+                          }
+                        } catch (error) {
+                          alert(`Failed to initialize tutorial tasks for Week ${week}`);
+                        }
+                      }}
+                      className="flex-1 bg-blue-600 hover:bg-blue-700 text-white px-2 py-2 rounded-md text-xs font-medium"
+                    >
+                      W{week}
+                    </button>
+                  ))}
+                </div>
+              </div>
+              
+              <div>
+                <label className="block text-xs font-medium text-gray-700 mb-1">Weekly Practice</label>
+                <div className="flex space-x-1">
+                  {[2, 3, 4, 5, 6].map(week => (
+                    <button
+                      key={week}
+                      onClick={async () => {
+                        try {
+                          const token = localStorage.getItem('token');
+                          const response = await fetch(`/api/search/initialize-weekly-practice/${week}`, {
+                            method: 'POST',
+                            headers: {
+                              'Authorization': `Bearer ${token}`,
+                              'Content-Type': 'application/json'
+                            }
+                          });
+                          if (response.ok) {
+                            alert(`Weekly practice for Week ${week} initialized successfully!`);
+                          } else {
+                            alert(`Failed to initialize weekly practice for Week ${week}`);
+                          }
+                        } catch (error) {
+                          alert(`Failed to initialize weekly practice for Week ${week}`);
+                        }
+                      }}
+                      className="flex-1 bg-purple-600 hover:bg-purple-700 text-white px-2 py-2 rounded-md text-xs font-medium"
+                    >
+                      W{week}
+                    </button>
+                  ))}
+                </div>
+              </div>
+            </div>
+          </div>
+          
+          {/* Practice Examples List */}
+          {examples.length > 0 && (
+            <div className="mt-4 max-h-60 overflow-y-auto">
+              <h4 className="text-sm font-medium text-gray-900 mb-2">Current Examples:</h4>
+              <div className="space-y-2">
+                {examples.map((example) => (
+                  <div key={example._id} className="bg-gray-50 p-3 rounded-md">
+                    <div className="flex justify-between items-start">
+                      <div className="flex-1">
+                        <p className="text-sm font-medium text-gray-900">{example.title}</p>
+                        <p className="text-xs text-gray-600 mt-1 line-clamp-2">{example.content}</p>
+                        <div className="flex items-center mt-1 space-x-2">
+                          <span className="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded">
+                            {example.sourceLanguage}
+                          </span>
+                          <span className="text-xs bg-green-100 text-green-800 px-2 py-1 rounded">
+                            {example.difficulty}
+                          </span>
+                        </div>
+                      </div>
+                      <div className="flex items-center space-x-2 ml-2">
+                        <button
+                          onClick={() => setEditingExample(example)}
+                          className="text-blue-600 hover:text-blue-800 text-xs"
+                        >
+                          Edit
+                        </button>
+                        <button
+                          onClick={() => deleteExample(example._id)}
+                          className="text-red-600 hover:text-red-800 text-xs"
+                        >
+                          Delete
+                        </button>
+                      </div>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+          
+          {/* Add Example Form */}
+          {showAddExample && (
+            <div className="mt-4 p-4 bg-gray-50 rounded-md">
+              <h4 className="text-sm font-medium text-gray-900 mb-3">Add New Example:</h4>
+              <div className="space-y-3">
+                <input
+                  type="text"
+                  placeholder="Title"
+                  value={newExample.title}
+                  onChange={(e) => setNewExample({...newExample, title: e.target.value})}
+                  className="w-full px-3 py-2 border border-gray-300 rounded-md"
+                />
+                <textarea
+                  placeholder="Content"
+                  value={newExample.content}
+                  onChange={(e) => setNewExample({...newExample, content: e.target.value})}
+                  className="w-full px-3 py-2 border border-gray-300 rounded-md"
+                  rows={3}
+                />
+                <div className="grid grid-cols-2 gap-2">
+                  <select
+                    value={newExample.sourceLanguage}
+                    onChange={(e) => setNewExample({...newExample, sourceLanguage: e.target.value})}
+                    className="px-3 py-2 border border-gray-300 rounded-md"
+                  >
+                    <option value="English">English</option>
+                    <option value="Chinese">Chinese</option>
+                  </select>
+                  <select
+                    value={newExample.difficulty}
+                    onChange={(e) => setNewExample({...newExample, difficulty: e.target.value})}
+                    className="px-3 py-2 border border-gray-300 rounded-md"
+                  >
+                    <option value="beginner">Beginner</option>
+                    <option value="intermediate">Intermediate</option>
+                    <option value="advanced">Advanced</option>
+                  </select>
+                </div>
+                <button
+                  onClick={addExample}
+                  className="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-md text-sm font-medium"
+                >
+                  Add Example
+                </button>
+              </div>
+            </div>
+          )}
+          
+          {/* Edit Example Modal */}
+          {editingExample && (
+            <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+              <div className="bg-white p-6 rounded-lg max-w-md w-full mx-4 max-h-96 overflow-y-auto">
+                <h3 className="text-lg font-medium text-gray-900 mb-4">Edit Example</h3>
+                <div className="space-y-3">
+                  <input
+                    type="text"
+                    placeholder="Title"
+                    value={editingExample.title}
+                    onChange={(e) => setEditingExample({...editingExample, title: e.target.value})}
+                    className="w-full px-3 py-2 border border-gray-300 rounded-md"
+                  />
+                  <textarea
+                    placeholder="Content"
+                    value={editingExample.content}
+                    onChange={(e) => setEditingExample({...editingExample, content: e.target.value})}
+                    className="w-full px-3 py-2 border border-gray-300 rounded-md"
+                    rows={3}
+                  />
+                  <div className="grid grid-cols-2 gap-2">
+                    <select
+                      value={editingExample.sourceLanguage}
+                      onChange={(e) => setEditingExample({...editingExample, sourceLanguage: e.target.value})}
+                      className="px-3 py-2 border border-gray-300 rounded-md"
+                    >
+                      <option value="English">English</option>
+                      <option value="Chinese">Chinese</option>
+                    </select>
+                    <select
+                      value={editingExample.difficulty}
+                      onChange={(e) => setEditingExample({...editingExample, difficulty: e.target.value})}
+                      className="px-3 py-2 border border-gray-300 rounded-md"
+                    >
+                      <option value="beginner">Beginner</option>
+                      <option value="intermediate">Intermediate</option>
+                      <option value="advanced">Advanced</option>
+                    </select>
+                  </div>
+                  <div className="flex space-x-2">
+                    <button
+                      onClick={() => updateExample(editingExample._id, editingExample)}
+                      className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium"
+                    >
+                      Update
+                    </button>
+                    <button
+                      onClick={() => setEditingExample(null)}
+                      className="bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded-md text-sm font-medium"
+                    >
+                      Cancel
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Tutorial Tasks Management */}
+      <div className="bg-white rounded-lg shadow p-6 mb-6">
+        <div className="flex items-center mb-4">
+          <AcademicCapIcon className="h-8 w-8 text-green-600 mr-3" />
+          <h2 className="text-lg font-medium text-gray-900">Tutorial Tasks Management</h2>
+        </div>
+        <p className="text-gray-600 mb-4">
+          Manage tutorial tasks for each week.
+        </p>
+        <div className="space-y-2 mb-4">
+          <div className="flex items-center text-sm text-gray-500">
+            <div className="w-2 h-2 bg-green-600 rounded-full mr-3"></div>
+            {tutorialTasksLoading ? 'Loading tutorial tasks...' : `${tutorialTasks.length} tutorial tasks`}
+          </div>
+          <div className="flex items-center text-sm text-gray-500">
+            <div className="w-2 h-2 bg-green-600 rounded-full mr-3"></div>
+            Edit existing tutorial tasks
+          </div>
+        </div>
+        <div className="space-y-2">
+          <button 
+            onClick={() => setShowAddTutorialTask(!showAddTutorialTask)}
+            className="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-md text-sm font-medium"
+          >
+            {showAddTutorialTask ? 'Cancel' : 'Add Tutorial Task'}
+          </button>
+          <button 
+            onClick={() => setShowAddTranslationBrief(!showAddTranslationBrief)}
+            className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium ml-2"
+          >
+            {showAddTranslationBrief ? 'Cancel' : 'Add Translation Brief'}
+          </button>
+          <button 
+            onClick={fetchTutorialTasks}
+            className="bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded-md text-sm font-medium ml-2"
+          >
+            Refresh
+          </button>
+        </div>
+
+        {/* Tutorial Tasks List */}
+        {tutorialTasks.length > 0 && (
+          <div className="mt-4 max-h-60 overflow-y-auto">
+            <h4 className="text-sm font-medium text-gray-900 mb-2">Current Tutorial Tasks:</h4>
+            <div className="space-y-2">
+              {tutorialTasks.map((task) => (
+                <div key={task._id} className="bg-gray-50 p-3 rounded-md">
+                  <div className="flex justify-between items-start">
+                    <div className="flex-1">
+                      <p className="text-sm font-medium text-gray-900">{task.title}</p>
+                      <p className="text-xs text-gray-600 mt-1 line-clamp-2">{task.content}</p>
+                      <div className="flex items-center mt-1 space-x-2">
+                        <span className="text-xs bg-green-100 text-green-800 px-2 py-1 rounded">
+                          Week {task.weekNumber}
+                        </span>
+                        <span className="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded">
+                          {task.sourceLanguage}
+                        </span>
+                        <span className="text-xs bg-purple-100 text-purple-800 px-2 py-1 rounded">
+                          {task.difficulty}
+                        </span>
+                      </div>
+                    </div>
+                    <div className="flex items-center space-x-2 ml-2">
+                      <button
+                        onClick={() => setEditingTutorialTask(task)}
+                        className="text-blue-600 hover:text-blue-800 text-xs"
+                      >
+                        Edit
+                      </button>
+                      <button
+                        onClick={() => deleteTutorialTask(task._id)}
+                        className="text-red-600 hover:text-red-800 text-xs"
+                      >
+                        Delete
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {/* Add Tutorial Task Form */}
+        {showAddTutorialTask && (
+          <div className="mt-4 p-4 bg-gray-50 rounded-md">
+            <h4 className="text-sm font-medium text-gray-900 mb-3">Add New Tutorial Task:</h4>
+            <div className="space-y-3">
+              <input
+                type="text"
+                placeholder="Title"
+                value={newTutorialTask.title}
+                onChange={(e) => setNewTutorialTask({...newTutorialTask, title: e.target.value})}
+                className="w-full px-3 py-2 border border-gray-300 rounded-md"
+              />
+              <textarea
+                placeholder="Content"
+                value={newTutorialTask.content}
+                onChange={(e) => setNewTutorialTask({...newTutorialTask, content: e.target.value})}
+                className="w-full px-3 py-2 border border-gray-300 rounded-md"
+                rows={3}
+              />
+              <div className="grid grid-cols-3 gap-2">
+                <select
+                  value={newTutorialTask.sourceLanguage}
+                  onChange={(e) => setNewTutorialTask({...newTutorialTask, sourceLanguage: e.target.value})}
+                  className="px-3 py-2 border border-gray-300 rounded-md"
+                >
+                  <option value="English">English</option>
+                  <option value="Chinese">Chinese</option>
+                </select>
+                <select
+                  value={newTutorialTask.weekNumber}
+                  onChange={(e) => setNewTutorialTask({...newTutorialTask, weekNumber: parseInt(e.target.value)})}
+                  className="px-3 py-2 border border-gray-300 rounded-md"
+                >
+                  {[1, 2, 3, 4, 5, 6].map(week => (
+                    <option key={week} value={week}>Week {week}</option>
+                  ))}
+                </select>
+                <select
+                  value={newTutorialTask.difficulty}
+                  onChange={(e) => setNewTutorialTask({...newTutorialTask, difficulty: e.target.value})}
+                  className="px-3 py-2 border border-gray-300 rounded-md"
+                >
+                  <option value="beginner">Beginner</option>
+                  <option value="intermediate">Intermediate</option>
+                  <option value="advanced">Advanced</option>
+                </select>
+              </div>
+              <button
+                onClick={addTutorialTask}
+                className="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-md text-sm font-medium"
+              >
+                Add Tutorial Task
+              </button>
+            </div>
+          </div>
+        )}
+
+        {/* Add Translation Brief Form */}
+        {showAddTranslationBrief && (
+          <div className="mt-4 p-4 bg-gray-50 rounded-md">
+            <h4 className="text-sm font-medium text-gray-900 mb-3">Add Translation Brief:</h4>
+            <div className="space-y-3">
+              <select
+                value={newTranslationBrief.type}
+                onChange={(e) => setNewTranslationBrief({...newTranslationBrief, type: e.target.value})}
+                className="w-full px-3 py-2 border border-gray-300 rounded-md"
+              >
+                <option value="tutorial">Tutorial Tasks</option>
+                <option value="weekly-practice">Weekly Practice</option>
+              </select>
+              <select
+                value={newTranslationBrief.weekNumber}
+                onChange={(e) => setNewTranslationBrief({...newTranslationBrief, weekNumber: parseInt(e.target.value)})}
+                className="w-full px-3 py-2 border border-gray-300 rounded-md"
+              >
+                {[1, 2, 3, 4, 5, 6].map(week => (
+                  <option key={week} value={week}>Week {week}</option>
+                ))}
+              </select>
+              <textarea
+                placeholder="Translation Brief"
+                value={newTranslationBrief.translationBrief}
+                onChange={(e) => setNewTranslationBrief({...newTranslationBrief, translationBrief: e.target.value})}
+                className="w-full px-3 py-2 border border-gray-300 rounded-md"
+                rows={4}
+              />
+              <button
+                onClick={addTranslationBrief}
+                className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium"
+              >
+                Add Translation Brief
+              </button>
+            </div>
+          </div>
+        )}
+
+        {/* Edit Tutorial Task Modal */}
+        {editingTutorialTask && (
+          <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+            <div className="bg-white p-6 rounded-lg max-w-md w-full mx-4 max-h-96 overflow-y-auto">
+              <h3 className="text-lg font-medium text-gray-900 mb-4">Edit Tutorial Task</h3>
+              <div className="space-y-3">
+                <input
+                  type="text"
+                  placeholder="Title"
+                  value={editingTutorialTask.title}
+                  onChange={(e) => setEditingTutorialTask({...editingTutorialTask, title: e.target.value})}
+                  className="w-full px-3 py-2 border border-gray-300 rounded-md"
+                />
+                <textarea
+                  placeholder="Content"
+                  value={editingTutorialTask.content}
+                  onChange={(e) => setEditingTutorialTask({...editingTutorialTask, content: e.target.value})}
+                  className="w-full px-3 py-2 border border-gray-300 rounded-md"
+                  rows={3}
+                />
+                <div className="grid grid-cols-3 gap-2">
+                  <select
+                    value={editingTutorialTask.sourceLanguage}
+                    onChange={(e) => setEditingTutorialTask({...editingTutorialTask, sourceLanguage: e.target.value})}
+                    className="px-3 py-2 border border-gray-300 rounded-md"
+                  >
+                    <option value="English">English</option>
+                    <option value="Chinese">Chinese</option>
+                  </select>
+                  <select
+                    value={editingTutorialTask.weekNumber}
+                    onChange={(e) => setEditingTutorialTask({...editingTutorialTask, weekNumber: parseInt(e.target.value)})}
+                    className="px-3 py-2 border border-gray-300 rounded-md"
+                  >
+                    {[1, 2, 3, 4, 5, 6].map(week => (
+                      <option key={week} value={week}>Week {week}</option>
+                    ))}
+                  </select>
+                  <select
+                    value={editingTutorialTask.difficulty}
+                    onChange={(e) => setEditingTutorialTask({...editingTutorialTask, difficulty: e.target.value})}
+                    className="px-3 py-2 border border-gray-300 rounded-md"
+                  >
+                    <option value="beginner">Beginner</option>
+                    <option value="intermediate">Intermediate</option>
+                    <option value="advanced">Advanced</option>
+                  </select>
+                </div>
+                <div className="flex space-x-2">
+                  <button
+                    onClick={() => updateTutorialTask(editingTutorialTask._id, editingTutorialTask)}
+                    className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium"
+                  >
+                    Update
+                  </button>
+                  <button
+                    onClick={() => setEditingTutorialTask(null)}
+                    className="bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded-md text-sm font-medium"
+                  >
+                    Cancel
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* Weekly Practice Management */}
+      <div className="bg-white rounded-lg shadow p-6 mb-6">
+        <div className="flex items-center mb-4">
+          <ShieldCheckIcon className="h-8 w-8 text-purple-600 mr-3" />
+          <h2 className="text-lg font-medium text-gray-900">Weekly Practice Management</h2>
+        </div>
+        <p className="text-gray-600 mb-4">
+          Manage weekly practice tasks for each week.
+        </p>
+        <div className="space-y-2 mb-4">
+          <div className="flex items-center text-sm text-gray-500">
+            <div className="w-2 h-2 bg-purple-600 rounded-full mr-3"></div>
+            {weeklyPracticeLoading ? 'Loading weekly practice...' : `${weeklyPractice.length} weekly practice tasks`}
+          </div>
+          <div className="flex items-center text-sm text-gray-500">
+            <div className="w-2 h-2 bg-purple-600 rounded-full mr-3"></div>
+            Edit existing weekly practice tasks
+          </div>
+        </div>
+        <div className="space-y-2">
+          <button 
+            onClick={() => setShowAddWeeklyPractice(!showAddWeeklyPractice)}
+            className="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-md text-sm font-medium"
+          >
+            {showAddWeeklyPractice ? 'Cancel' : 'Add Weekly Practice'}
+          </button>
+          <button 
+            onClick={() => setShowAddTranslationBrief(!showAddTranslationBrief)}
+            className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium ml-2"
+          >
+            {showAddTranslationBrief ? 'Cancel' : 'Add Translation Brief'}
+          </button>
+          <button 
+            onClick={fetchWeeklyPractice}
+            className="bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded-md text-sm font-medium ml-2"
+          >
+            Refresh
+          </button>
+        </div>
+
+        {/* Weekly Practice List */}
+        {weeklyPractice.length > 0 && (
+          <div className="mt-4 max-h-60 overflow-y-auto">
+            <h4 className="text-sm font-medium text-gray-900 mb-2">Current Weekly Practice:</h4>
+            <div className="space-y-2">
+              {weeklyPractice.map((practice) => (
+                <div key={practice._id} className="bg-gray-50 p-3 rounded-md">
+                  <div className="flex justify-between items-start">
+                    <div className="flex-1">
+                      <p className="text-sm font-medium text-gray-900">{practice.title}</p>
+                      <p className="text-xs text-gray-600 mt-1 line-clamp-2">{practice.content}</p>
+                      <div className="flex items-center mt-1 space-x-2">
+                        <span className="text-xs bg-purple-100 text-purple-800 px-2 py-1 rounded">
+                          Week {practice.weekNumber}
+                        </span>
+                        <span className="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded">
+                          {practice.sourceLanguage}
+                        </span>
+                        <span className="text-xs bg-orange-100 text-orange-800 px-2 py-1 rounded">
+                          {practice.difficulty}
+                        </span>
+                      </div>
+                    </div>
+                    <div className="flex items-center space-x-2 ml-2">
+                      <button
+                        onClick={() => setEditingWeeklyPractice(practice)}
+                        className="text-blue-600 hover:text-blue-800 text-xs"
+                      >
+                        Edit
+                      </button>
+                      <button
+                        onClick={() => deleteWeeklyPractice(practice._id)}
+                        className="text-red-600 hover:text-red-800 text-xs"
+                      >
+                        Delete
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {/* Add Weekly Practice Form */}
+        {showAddWeeklyPractice && (
+          <div className="mt-4 p-4 bg-gray-50 rounded-md">
+            <h4 className="text-sm font-medium text-gray-900 mb-3">Add New Weekly Practice:</h4>
+            <div className="space-y-3">
+              <input
+                type="text"
+                placeholder="Title"
+                value={newWeeklyPractice.title}
+                onChange={(e) => setNewWeeklyPractice({...newWeeklyPractice, title: e.target.value})}
+                className="w-full px-3 py-2 border border-gray-300 rounded-md"
+              />
+              <textarea
+                placeholder="Content"
+                value={newWeeklyPractice.content}
+                onChange={(e) => setNewWeeklyPractice({...newWeeklyPractice, content: e.target.value})}
+                className="w-full px-3 py-2 border border-gray-300 rounded-md"
+                rows={3}
+              />
+              <div className="grid grid-cols-3 gap-2">
+                <select
+                  value={newWeeklyPractice.sourceLanguage}
+                  onChange={(e) => setNewWeeklyPractice({...newWeeklyPractice, sourceLanguage: e.target.value})}
+                  className="px-3 py-2 border border-gray-300 rounded-md"
+                >
+                  <option value="English">English</option>
+                  <option value="Chinese">Chinese</option>
+                </select>
+                <select
+                  value={newWeeklyPractice.weekNumber}
+                  onChange={(e) => setNewWeeklyPractice({...newWeeklyPractice, weekNumber: parseInt(e.target.value)})}
+                  className="px-3 py-2 border border-gray-300 rounded-md"
+                >
+                  {[1, 2, 3, 4, 5, 6].map(week => (
+                    <option key={week} value={week}>Week {week}</option>
+                  ))}
+                </select>
+                <select
+                  value={newWeeklyPractice.difficulty}
+                  onChange={(e) => setNewWeeklyPractice({...newWeeklyPractice, difficulty: e.target.value})}
+                  className="px-3 py-2 border border-gray-300 rounded-md"
+                >
+                  <option value="beginner">Beginner</option>
+                  <option value="intermediate">Intermediate</option>
+                  <option value="advanced">Advanced</option>
+                </select>
+              </div>
+              <button
+                onClick={addWeeklyPractice}
+                className="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-md text-sm font-medium"
+              >
+                Add Weekly Practice
+              </button>
+            </div>
+          </div>
+        )}
+
+        {/* Edit Weekly Practice Modal */}
+        {editingWeeklyPractice && (
+          <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+            <div className="bg-white p-6 rounded-lg max-w-md w-full mx-4 max-h-96 overflow-y-auto">
+              <h3 className="text-lg font-medium text-gray-900 mb-4">Edit Weekly Practice</h3>
+              <div className="space-y-3">
+                <input
+                  type="text"
+                  placeholder="Title"
+                  value={editingWeeklyPractice.title}
+                  onChange={(e) => setEditingWeeklyPractice({...editingWeeklyPractice, title: e.target.value})}
+                  className="w-full px-3 py-2 border border-gray-300 rounded-md"
+                />
+                <textarea
+                  placeholder="Content"
+                  value={editingWeeklyPractice.content}
+                  onChange={(e) => setEditingWeeklyPractice({...editingWeeklyPractice, content: e.target.value})}
+                  className="w-full px-3 py-2 border border-gray-300 rounded-md"
+                  rows={3}
+                />
+                <div className="grid grid-cols-3 gap-2">
+                  <select
+                    value={editingWeeklyPractice.sourceLanguage}
+                    onChange={(e) => setEditingWeeklyPractice({...editingWeeklyPractice, sourceLanguage: e.target.value})}
+                    className="px-3 py-2 border border-gray-300 rounded-md"
+                  >
+                    <option value="English">English</option>
+                    <option value="Chinese">Chinese</option>
+                  </select>
+                  <select
+                    value={editingWeeklyPractice.weekNumber}
+                    onChange={(e) => setEditingWeeklyPractice({...editingWeeklyPractice, weekNumber: parseInt(e.target.value)})}
+                    className="px-3 py-2 border border-gray-300 rounded-md"
+                  >
+                    {[1, 2, 3, 4, 5, 6].map(week => (
+                      <option key={week} value={week}>Week {week}</option>
+                    ))}
+                  </select>
+                  <select
+                    value={editingWeeklyPractice.difficulty}
+                    onChange={(e) => setEditingWeeklyPractice({...editingWeeklyPractice, difficulty: e.target.value})}
+                    className="px-3 py-2 border border-gray-300 rounded-md"
+                  >
+                    <option value="beginner">Beginner</option>
+                    <option value="intermediate">Intermediate</option>
+                    <option value="advanced">Advanced</option>
+                  </select>
+                </div>
+                <div className="flex space-x-2">
+                  <button
+                    onClick={() => updateWeeklyPractice(editingWeeklyPractice._id, editingWeeklyPractice)}
+                    className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium"
+                  >
+                    Update
+                  </button>
+                  <button
+                    onClick={() => setEditingWeeklyPractice(null)}
+                    className="bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded-md text-sm font-medium"
+                  >
+                    Cancel
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* Quick Stats */}
+      <div className="bg-white rounded-lg shadow p-6">
+        <h2 className="text-lg font-medium text-gray-900 mb-4">Quick Stats</h2>
+        {statsLoading ? (
+          <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
+            {[1, 2, 3, 4].map((i) => (
+              <div key={i} className="bg-gray-50 p-4 rounded-lg animate-pulse">
+                <div className="flex items-center">
+                  <div className="h-6 w-6 bg-gray-300 rounded mr-2"></div>
+                  <div>
+                    <div className="h-4 bg-gray-300 rounded w-20 mb-2"></div>
+                    <div className="h-6 bg-gray-300 rounded w-8"></div>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        ) : (
+          <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
+            <div className="bg-purple-50 p-4 rounded-lg">
+              <div className="flex items-center">
+                <UserGroupIcon className="h-6 w-6 text-purple-600 mr-2" />
+                <div>
+                  <p className="text-sm text-purple-600">Total Users</p>
+                  <p className="text-2xl font-bold text-purple-900">{stats?.totalUsers || 0}</p>
+                </div>
+              </div>
+            </div>
+            <div className="bg-blue-50 p-4 rounded-lg">
+              <div className="flex items-center">
+                <AcademicCapIcon className="h-6 w-6 text-blue-600 mr-2" />
+                <div>
+                  <p className="text-sm text-blue-600">Practice Examples</p>
+                  <p className="text-2xl font-bold text-blue-900">{stats?.practiceExamples || 0}</p>
+                </div>
+              </div>
+            </div>
+            <div className="bg-green-50 p-4 rounded-lg">
+              <div className="flex items-center">
+                <DocumentTextIcon className="h-6 w-6 text-green-600 mr-2" />
+                <div>
+                  <p className="text-sm text-green-600">Submissions</p>
+                  <p className="text-2xl font-bold text-green-900">{stats?.totalSubmissions || 0}</p>
+                </div>
+              </div>
+            </div>
+            <div className="bg-orange-50 p-4 rounded-lg">
+              <div className="flex items-center">
+                <ShieldCheckIcon className="h-6 w-6 text-orange-600 mr-2" />
+                <div>
+                  <p className="text-sm text-orange-600">Active Sessions</p>
+                  <p className="text-2xl font-bold text-orange-900">{stats?.activeSessions || 0}</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+
+      <div className="mt-6">
+        <Link
+          to="/dashboard"
+          className="bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200"
+        >
+          Back to Dashboard
+        </Link>
+      </div>
+    </div>
+  );
+};
+
+export default Manage; 

client/src/pages/Register.tsx

@@ -0,0 +1,238 @@
+import React, { useState } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import { EyeIcon, EyeSlashIcon } from '@heroicons/react/24/outline';
+import { api } from '../services/api';
+
+const Register: React.FC = () => {
+  const [formData, setFormData] = useState({
+    username: '',
+    email: '',
+    password: '',
+    confirmPassword: '',
+    role: 'student',
+    nativeLanguage: '',
+    targetCultures: [] as string[]
+  });
+  const [showPassword, setShowPassword] = useState(false);
+  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState('');
+  const navigate = useNavigate();
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
+    const { name, value } = e.target;
+    setFormData(prev => ({
+      ...prev,
+      [name]: value
+    }));
+    // Clear error when user starts typing
+    if (error) setError('');
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    
+    if (formData.password !== formData.confirmPassword) {
+      setError('Passwords do not match');
+      return;
+    }
+
+    if (formData.password.length < 6) {
+      setError('Password must be at least 6 characters long');
+      return;
+    }
+
+    setIsLoading(true);
+    setError('');
+
+    try {
+      const response = await api.post('/auth/register', {
+        username: formData.username,
+        email: formData.email,
+        password: formData.password,
+        role: formData.role,
+        nativeLanguage: formData.nativeLanguage,
+        targetCultures: formData.targetCultures
+      });
+
+      // Store token
+      localStorage.setItem('token', response.data.token);
+      
+      // Navigate to dashboard
+      navigate('/dashboard');
+    } catch (error: any) {
+      console.error('Registration error:', error);
+      if (error.response?.data?.error) {
+        setError(error.response.data.error);
+      } else {
+        setError('Registration failed. Please try again.');
+      }
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
+      <div className="max-w-md w-full space-y-8">
+        <div>
+          <h2 className="mt-6 text-center text-3xl font-extrabold text-gray-900">
+            Create your account
+          </h2>
+          <p className="mt-2 text-center text-sm text-gray-600">
+            Or{' '}
+            <Link
+              to="/login"
+              className="font-medium text-indigo-600 hover:text-indigo-500"
+            >
+              sign in to your existing account
+            </Link>
+          </p>
+        </div>
+        
+        {error && (
+          <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-md">
+            {error}
+          </div>
+        )}
+
+        <form className="mt-8 space-y-6" onSubmit={handleSubmit}>
+          <div className="space-y-4">
+            <div>
+              <label htmlFor="username" className="block text-sm font-medium text-gray-700">
+                Username
+              </label>
+              <input
+                id="username"
+                name="username"
+                type="text"
+                required
+                className="mt-1 appearance-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
+                placeholder="Enter your username"
+                value={formData.username}
+                onChange={handleChange}
+              />
+            </div>
+
+            <div>
+              <label htmlFor="email" className="block text-sm font-medium text-gray-700">
+                Email address
+              </label>
+              <input
+                id="email"
+                name="email"
+                type="email"
+                autoComplete="email"
+                required
+                className="mt-1 appearance-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
+                placeholder="Enter your email"
+                value={formData.email}
+                onChange={handleChange}
+              />
+            </div>
+
+            <div>
+              <label htmlFor="role" className="block text-sm font-medium text-gray-700">
+                Role
+              </label>
+              <select
+                id="role"
+                name="role"
+                className="mt-1 block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
+                value={formData.role}
+                onChange={handleChange}
+              >
+                <option value="student">Student</option>
+                <option value="instructor">Instructor</option>
+                <option value="admin">Admin</option>
+              </select>
+            </div>
+
+            <div>
+              <label htmlFor="nativeLanguage" className="block text-sm font-medium text-gray-700">
+                Native Language
+              </label>
+              <input
+                id="nativeLanguage"
+                name="nativeLanguage"
+                type="text"
+                className="mt-1 appearance-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
+                placeholder="e.g., English, Spanish, French"
+                value={formData.nativeLanguage}
+                onChange={handleChange}
+              />
+            </div>
+
+            <div className="relative">
+              <label htmlFor="password" className="block text-sm font-medium text-gray-700">
+                Password
+              </label>
+              <input
+                id="password"
+                name="password"
+                type={showPassword ? 'text' : 'password'}
+                autoComplete="new-password"
+                required
+                className="mt-1 appearance-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
+                placeholder="Enter your password"
+                value={formData.password}
+                onChange={handleChange}
+              />
+              <button
+                type="button"
+                className="absolute inset-y-0 right-0 pr-3 flex items-center top-6"
+                onClick={() => setShowPassword(!showPassword)}
+              >
+                {showPassword ? (
+                  <EyeSlashIcon className="h-5 w-5 text-gray-400" />
+                ) : (
+                  <EyeIcon className="h-5 w-5 text-gray-400" />
+                )}
+              </button>
+            </div>
+
+            <div className="relative">
+              <label htmlFor="confirmPassword" className="block text-sm font-medium text-gray-700">
+                Confirm Password
+              </label>
+              <input
+                id="confirmPassword"
+                name="confirmPassword"
+                type={showConfirmPassword ? 'text' : 'password'}
+                autoComplete="new-password"
+                required
+                className="mt-1 appearance-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
+                placeholder="Confirm your password"
+                value={formData.confirmPassword}
+                onChange={handleChange}
+              />
+              <button
+                type="button"
+                className="absolute inset-y-0 right-0 pr-3 flex items-center top-6"
+                onClick={() => setShowConfirmPassword(!showConfirmPassword)}
+              >
+                {showConfirmPassword ? (
+                  <EyeSlashIcon className="h-5 w-5 text-gray-400" />
+                ) : (
+                  <EyeIcon className="h-5 w-5 text-gray-400" />
+                )}
+              </button>
+            </div>
+          </div>
+
+          <div>
+            <button
+              type="submit"
+              disabled={isLoading}
+              className="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:opacity-50 disabled:cursor-not-allowed"
+            >
+              {isLoading ? 'Creating account...' : 'Create account'}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+};
+
+export default Register; 

client/src/pages/SearchTexts.tsx

@@ -0,0 +1,383 @@
+import React, { useState, useEffect } from 'react';
+import { 
+  MagnifyingGlassIcon, 
+  GlobeAltIcon,
+  AcademicCapIcon,
+  FunnelIcon,
+  PencilIcon,
+  CheckCircleIcon,
+  XCircleIcon,
+  ClockIcon
+} from '@heroicons/react/24/outline';
+import { api } from '../services/api';
+
+interface SearchFilters {
+  sourceLanguage: string;
+}
+
+interface UserSubmission {
+  _id: string;
+  transcreation: string;
+  explanation: string;
+  status: 'pending' | 'approved' | 'rejected' | 'submitted';
+  createdAt: string;
+  score?: number;
+  voteCounts?: {
+    1: number;
+    2: number;
+    3: number;
+  };
+}
+
+const SearchTexts: React.FC = () => {
+  const [filters, setFilters] = useState<SearchFilters>({
+    sourceLanguage: ''
+  });
+  const [isSearching, setIsSearching] = useState(false);
+  const [searchResults, setSearchResults] = useState<any[]>([]);
+  const [error, setError] = useState('');
+  const [translations, setTranslations] = useState<{[key: string]: string}>({});
+  const [userSubmissions, setUserSubmissions] = useState<{[key: string]: UserSubmission[]}>({});
+  const [loadingSubmissions, setLoadingSubmissions] = useState(false);
+
+  // Fetch user's submissions when examples are loaded
+  useEffect(() => {
+    if (searchResults.length > 0) {
+      fetchUserSubmissions();
+    }
+  }, [searchResults]);
+
+  const fetchUserSubmissions = async () => {
+    setLoadingSubmissions(true);
+    try {
+      const token = localStorage.getItem('token');
+      if (!token) return;
+
+      const response = await fetch('/api/submissions/my-submissions', {
+        headers: {
+          'Authorization': `Bearer ${token}`,
+          'Content-Type': 'application/json'
+        }
+      });
+
+      if (response.ok) {
+        const data = await response.json();
+        const submissionsByExample: {[key: string]: UserSubmission[]} = {};
+        
+        data.submissions.forEach((submission: UserSubmission & { sourceTextId: any }) => {
+          const exampleId = submission.sourceTextId?._id || submission.sourceTextId;
+          if (exampleId) {
+            if (!submissionsByExample[exampleId]) {
+              submissionsByExample[exampleId] = [];
+            }
+            submissionsByExample[exampleId].push(submission);
+          }
+        });
+        
+        setUserSubmissions(submissionsByExample);
+      }
+    } catch (error) {
+      console.error('Error fetching submissions:', error);
+    } finally {
+      setLoadingSubmissions(false);
+    }
+  };
+
+  const handleSearch = async () => {
+    setIsSearching(true);
+    setError('');
+    
+    try {
+      const response = await api.post('/search/auto-search', filters);
+      setSearchResults(response.data.results || []);
+    } catch (error: any) {
+      console.error('Search error:', error);
+      if (error.response?.data?.error) {
+        setError(error.response.data.error);
+      } else {
+        setError('Search failed. Please try again.');
+      }
+    } finally {
+      setIsSearching(false);
+    }
+  };
+
+  const handleFilterChange = (field: keyof SearchFilters, value: string) => {
+    setFilters(prev => ({
+      ...prev,
+      [field]: value
+    }));
+    // Clear error when user changes filters
+    if (error) setError('');
+  };
+
+  const handleTranslationChange = (id: string, value: string) => {
+    setTranslations(prev => ({
+      ...prev,
+      [id]: value
+    }));
+  };
+
+  const handleTranscreate = async (id: string) => {
+    const translation = translations[id];
+    if (!translation || !translation.trim()) {
+      alert('Please enter a translation before submitting.');
+      return;
+    }
+
+    try {
+      const token = localStorage.getItem('token');
+      if (!token) {
+        alert('Please log in to submit translations.');
+        return;
+      }
+
+      const result = searchResults.find(r => r.id === id);
+      if (!result) {
+        alert('Example not found.');
+        return;
+      }
+
+      // Submit translation to backend
+      const response = await fetch('/api/submissions', {
+        method: 'POST',
+        headers: {
+          'Authorization': `Bearer ${token}`,
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({
+          sourceTextId: id,
+          targetCulture: result.sourceCulture,
+          targetLanguage: result.sourceLanguage === 'English' ? 'Chinese' : 'English',
+          transcreation: translation.trim(),
+          explanation: 'Practice translation submission',
+          isAnonymous: true
+        })
+      });
+
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+
+      const data = await response.json();
+      
+      // Clear the translation input
+      setTranslations(prev => ({
+        ...prev,
+        [id]: ''
+      }));
+
+      // Refresh user's submissions to show the new one
+      await fetchUserSubmissions();
+
+      alert('Translation submitted successfully! It will be available for voting.');
+    } catch (error) {
+      console.error('Error submitting translation:', error);
+      alert('Failed to submit translation. Please try again.');
+    }
+  };
+
+  return (
+    <div className="px-4 sm:px-6 lg:px-8">
+      <div className="mb-8">
+        <h1 className="text-2xl font-bold text-gray-900">Practice</h1>
+        <p className="mt-2 text-gray-600">
+          In-class practice examples for puns and wordplay in English and Chinese
+        </p>
+      </div>
+
+      {/* Search Filters */}
+      <div className="bg-white rounded-lg shadow p-6 mb-8">
+        <div className="flex items-center mb-4">
+          <FunnelIcon className="h-5 w-5 text-indigo-400 mr-2" />
+          <h2 className="text-lg font-medium text-gray-900">Language Filter</h2>
+        </div>
+        
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div>
+            <label htmlFor="sourceLanguage" className="block text-sm font-medium text-gray-700 mb-2">
+              Language
+            </label>
+            <select
+              id="sourceLanguage"
+              value={filters.sourceLanguage}
+              onChange={(e) => handleFilterChange('sourceLanguage', e.target.value)}
+              className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
+            >
+              <option value="">All Languages</option>
+              <option value="English">English</option>
+              <option value="Chinese">Chinese</option>
+            </select>
+          </div>
+        </div>
+
+        <div className="mt-6">
+          <button
+            onClick={handleSearch}
+            disabled={isSearching}
+            className="w-full md:w-auto bg-indigo-600 text-white px-6 py-2 rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center"
+          >
+            {isSearching ? (
+              <>
+                <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2"></div>
+                Loading...
+              </>
+            ) : (
+              <>
+                <MagnifyingGlassIcon className="h-4 w-4 mr-2" />
+                Show Examples
+              </>
+            )}
+          </button>
+        </div>
+      </div>
+
+      {/* Error Message */}
+      {error && (
+        <div className="bg-red-50 border border-red-200 rounded-md p-4 mb-6">
+          <div className="flex">
+            <div className="flex-shrink-0">
+              <svg className="h-5 w-5 text-red-400" viewBox="0 0 20 20" fill="currentColor">
+                <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
+              </svg>
+            </div>
+            <div className="ml-3">
+              <h3 className="text-sm font-medium text-red-800">Search Error</h3>
+              <div className="mt-2 text-sm text-red-700">{error}</div>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Search Results */}
+      {searchResults.length > 0 && (
+        <div className="bg-white rounded-lg shadow">
+          <div className="px-6 py-4 border-b border-gray-200">
+            <div className="flex items-center justify-between">
+              <h3 className="text-lg font-medium text-gray-900">
+                Practice Examples ({searchResults.length})
+              </h3>
+            </div>
+          </div>
+          
+          <div className="divide-y divide-gray-200">
+            {searchResults.map((result) => (
+              <div key={result.id} className="p-6">
+                <div className="flex-1">
+                  <div className="text-gray-700 mb-4 whitespace-pre-wrap text-lg leading-relaxed">
+                    {result.content}
+                  </div>
+                  
+                  {/* Translation Input - Only show if user hasn't submitted yet */}
+                  {loadingSubmissions ? (
+                    <div className="mb-4 p-4 bg-gray-50 rounded-md">
+                      <div className="flex items-center">
+                        <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-indigo-600 mr-2"></div>
+                        <span className="text-sm text-gray-600">Loading your submissions...</span>
+                      </div>
+                    </div>
+                  ) : (!userSubmissions[result.id] || userSubmissions[result.id].length === 0) ? (
+                    <div className="mb-4">
+                      <label htmlFor={`translation-${result.id}`} className="block text-sm font-medium text-gray-700 mb-2">
+                        Your Translation:
+                      </label>
+                      <textarea
+                        id={`translation-${result.id}`}
+                        value={translations[result.id] || ''}
+                        onChange={(e) => handleTranslationChange(result.id, e.target.value)}
+                        placeholder="Enter your translation here..."
+                        className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
+                        rows={3}
+                      />
+                    </div>
+                  ) : (
+                    <div className="mb-4 p-3 bg-green-50 border border-green-200 rounded-md">
+                      <div className="flex items-center">
+                        <CheckCircleIcon className="h-5 w-5 text-green-500 mr-2" />
+                        <span className="text-sm font-medium text-green-800">Translation Submitted</span>
+                      </div>
+                      <p className="text-sm text-green-600 mt-1">
+                        You have already submitted a translation for this example.
+                      </p>
+                    </div>
+                  )}
+
+                  {/* Transcreate Button - Only show if user hasn't submitted yet */}
+                  {!loadingSubmissions && (!userSubmissions[result.id] || userSubmissions[result.id].length === 0) && (
+                    <button
+                      onClick={() => handleTranscreate(result.id)}
+                      className="bg-indigo-600 text-white px-4 py-2 rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 flex items-center"
+                    >
+                      <PencilIcon className="h-4 w-4 mr-2" />
+                      Transcreate It
+                    </button>
+                  )}
+
+                  {/* User's Previous Translations */}
+                  {!loadingSubmissions && userSubmissions[result.id] && userSubmissions[result.id].length > 0 && (
+                    <div className="mt-6 border-t border-gray-200 pt-4">
+                      <h4 className="text-sm font-medium text-gray-900 mb-3">Your Translation:</h4>
+                      <div className="space-y-3">
+                        {userSubmissions[result.id].map((submission) => (
+                          <div key={submission._id} className="bg-indigo-50 rounded-lg p-4 border border-indigo-200">
+                            <div className="flex items-start justify-between">
+                              <div className="flex-1">
+                                <p className="text-gray-900 mb-2 font-medium">{submission.transcreation}</p>
+                                <div className="flex items-center space-x-4 text-sm text-gray-500">
+                                  <span className="flex items-center">
+                                    {submission.status === 'approved' && (
+                                      <CheckCircleIcon className="h-4 w-4 text-green-500 mr-1" />
+                                    )}
+                                    {submission.status === 'rejected' && (
+                                      <XCircleIcon className="h-4 w-4 text-red-500 mr-1" />
+                                    )}
+                                    {submission.status === 'pending' && (
+                                      <ClockIcon className="h-4 w-4 text-yellow-500 mr-1" />
+                                    )}
+                                    {submission.status === 'submitted' && (
+                                      <ClockIcon className="h-4 w-4 text-blue-500 mr-1" />
+                                    )}
+                                    {submission.status.charAt(0).toUpperCase() + submission.status.slice(1)}
+                                  </span>
+
+                                  {submission.voteCounts && (
+                                    <span className="bg-gray-100 text-gray-800 px-2 py-1 rounded text-xs font-medium">
+                                      Votes: {submission.voteCounts[1] || 0} 1st, {submission.voteCounts[2] || 0} 2nd, {submission.voteCounts[3] || 0} 3rd
+                                    </span>
+                                  )}
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+                  )}
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* No Results */}
+      {searchResults.length === 0 && !isSearching && !error && (
+        <div className="bg-white rounded-lg shadow p-8 text-center">
+          <AcademicCapIcon className="h-12 w-12 text-gray-400 mx-auto mb-4" />
+          <h3 className="text-lg font-medium text-gray-900 mb-2">No examples found</h3>
+          <p className="text-gray-600 mb-4">
+            Try adjusting your language filter or click "Show Examples" to see all available practice examples.
+          </p>
+          <button
+            onClick={handleSearch}
+            className="bg-indigo-600 text-white px-4 py-2 rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+          >
+            Show All Examples
+          </button>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default SearchTexts; 

client/src/pages/Slides.tsx

@@ -0,0 +1,133 @@
+import React, { useEffect, useState } from 'react';
+import { api } from '../services/api';
+
+type SlideItem = {
+  title: string;
+  file: string; // relative to /slides/
+  date?: string;
+  size?: string;
+  order?: number;
+};
+
+const Slides: React.FC = () => {
+  const [allowed, setAllowed] = useState<boolean>(false);
+  const [items, setItems] = useState<SlideItem[]>([]);
+  const [error, setError] = useState<string>('');
+  const [loading, setLoading] = useState<boolean>(true);
+  const [isAdmin, setIsAdmin] = useState<boolean>(false);
+  const [editing, setEditing] = useState<SlideItem & { id?: string } | null>(null);
+
+  useEffect(() => {
+    // Access gate: allow only student/admin; do not redirect visitors
+    let role = 'visitor';
+    try { const u = localStorage.getItem('user'); role = u ? (JSON.parse(u).role || 'visitor') : 'visitor'; } catch {}
+    const ok = role === 'student' || role === 'admin';
+    setAllowed(ok);
+    if (!ok) {
+      setLoading(false);
+      return;
+    }
+    let aborted = false;
+    (async () => {
+      const u = localStorage.getItem('user');
+      try { const parsed = u ? JSON.parse(u) : null; setIsAdmin(parsed?.role === 'admin'); } catch {}
+      try {
+        setLoading(true); setError('');
+        const base = (((api.defaults as any)?.baseURL as string) || '').replace(/\/$/, '');
+        const resp = await fetch(`${base}/api/slides`, { cache: 'no-cache' });
+        if (!resp.ok) throw new Error('Failed to load slides');
+        const data = await resp.json();
+        if (aborted) return;
+        const list = Array.isArray(data?.slides) ? data.slides : [];
+        setItems(list as any);
+      } catch (e: any) {
+        if (!aborted) setError('Unable to load slides.');
+      } finally {
+        if (!aborted) setLoading(false);
+      }
+    })();
+    return () => { aborted = true; };
+  }, []);
+
+  if (!allowed) return null;
+  return (
+    <div className="min-h-screen bg-gray-50 py-8">
+      <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="mb-6">
+          <h1 className="text-2xl font-semibold text-gray-900">Slides</h1>
+          <p className="text-gray-600 text-sm">Download tutorial slides</p>
+        </div>
+
+        {loading && <div className="text-sm text-gray-600">Loading…</div>}
+        {error && !loading && <div className="text-sm text-red-600">{error}</div>}
+
+        {!loading && !error && (
+          <div className="bg-white border border-gray-200 rounded-lg p-4">
+            {items.length === 0 ? (
+              <div className="text-sm text-gray-500">No slides available yet.</div>
+            ) : (
+              <ul className="divide-y divide-gray-100">
+                {items.map((s: any, idx) => (
+                  <li key={s._id || idx} className="py-3 flex items-center justify-between">
+                    <div className="min-w-0 pr-3">
+                      <div className="text-gray-900 font-medium truncate">{s.title}</div>
+                      {s.date && (
+                        <div className="text-xs text-gray-500">{s.date}</div>
+                      )}
+                    </div>
+                    <div className="flex items-center gap-3">
+                      <a
+                        href={`/slides/${encodeURIComponent(s.file)}`}
+                        className="text-sm text-indigo-700 hover:text-indigo-900"
+                        rel="noopener noreferrer"
+                        download
+                      >
+                        Download
+                      </a>
+                      {isAdmin && (
+                        <button className="text-xs text-gray-600 hover:text-gray-900" onClick={() => setEditing({ id: s._id, title: s.title, date: s.date, file: s.file, order: s.order })}>Edit</button>
+                      )}
+                    </div>
+                  </li>
+                ))}
+              </ul>
+            )}
+          </div>
+        )}
+
+        {isAdmin && (
+          <div className="mt-6 bg-white border border-gray-200 rounded-lg p-4">
+            <div className="text-sm font-medium text-gray-900 mb-2">Admin: Edit Slide</div>
+            <div className="grid gap-2">
+              <input className="border border-gray-300 rounded-md px-3 py-2" placeholder="Title" value={editing?.title || ''} onChange={(e) => setEditing({ ...(editing || {} as any), title: e.target.value })} />
+              <input className="border border-gray-300 rounded-md px-3 py-2" placeholder="Date (YYYY-MM-DD)" value={editing?.date || ''} onChange={(e) => setEditing({ ...(editing || {} as any), date: e.target.value })} />
+              <input className="border border-gray-300 rounded-md px-3 py-2" placeholder="File name (in /public/slides)" value={editing?.file || ''} onChange={(e) => setEditing({ ...(editing || {} as any), file: e.target.value })} />
+              <input className="border border-gray-300 rounded-md px-3 py-2" placeholder="Order (number)" value={String((editing as any)?.order || '')} onChange={(e) => setEditing({ ...(editing || {} as any), order: Number(e.target.value) })} />
+              <div className="flex gap-2">
+                <button className="px-3 py-2 rounded-md bg-gray-100" onClick={() => setEditing({ title: '', date: '', file: '', order: 0 })}>New</button>
+                <button className="px-3 py-2 rounded-md bg-indigo-600 text-white" onClick={async () => {
+                  if (!editing || !editing.title || !editing.file) return;
+                  const token = localStorage.getItem('token') || '';
+                  const base = (((api.defaults as any)?.baseURL as string) || '').replace(/\/$/, '');
+                  const resp = await fetch(`${base}/api/slides`, { method: 'POST', headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${token}`, 'user-role': 'admin', 'user-info': localStorage.getItem('user') || '' }, body: JSON.stringify(editing) });
+                  const data = await resp.json();
+                  if (resp.ok) {
+                    setEditing(null);
+                    // reload list
+                    const listResp = await fetch(`${base}/api/slides`);
+                    const listData = await listResp.json();
+                    setItems(Array.isArray(listData?.slides) ? listData.slides : []);
+                  }
+                }}>Save</button>
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default Slides;
+
+

client/src/pages/Submissions.tsx

@@ -0,0 +1,302 @@
+import React, { useState, useEffect } from 'react';
+import { useParams, Link } from 'react-router-dom';
+import { ClockIcon, CheckCircleIcon, XCircleIcon } from '@heroicons/react/24/outline';
+
+interface Submission {
+  _id: string;
+  sourceTextId: {
+    _id: string;
+    content: string;
+    sourceLanguage: string;
+    sourceCulture: string;
+  } | null;
+  transcreation: string;
+  explanation: string;
+  culturalAdaptations: string[];
+  status: 'pending' | 'approved' | 'rejected' | 'submitted';
+  createdAt: string;
+  score?: number;
+  voteCounts?: {
+    1: number;
+    2: number;
+    3: number;
+  };
+}
+
+const Submissions: React.FC = () => {
+  const { id } = useParams();
+  const [submissions, setSubmissions] = useState<Submission[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [selectedSubmission, setSelectedSubmission] = useState<Submission | null>(null);
+
+  useEffect(() => {
+    fetchSubmissions();
+  }, []);
+
+  const fetchSubmissions = async () => {
+    try {
+      setLoading(true);
+      const token = localStorage.getItem('token');
+      
+      if (!token) {
+        setError('Authentication required');
+        return;
+      }
+
+      const response = await fetch('/api/submissions/my-submissions', {
+        headers: {
+          'Authorization': `Bearer ${token}`,
+          'Content-Type': 'application/json'
+        }
+      });
+
+      if (!response.ok) {
+        throw new Error('Failed to fetch submissions');
+      }
+
+      const data = await response.json();
+      setSubmissions(data.submissions || []);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to fetch submissions');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const getStatusIcon = (status: string) => {
+    switch (status) {
+      case 'approved':
+        return <CheckCircleIcon className="h-5 w-5 text-green-500" />;
+      case 'rejected':
+        return <XCircleIcon className="h-5 w-5 text-red-500" />;
+      default:
+        return <ClockIcon className="h-5 w-5 text-yellow-500" />;
+    }
+  };
+
+  const getStatusText = (status: string) => {
+    switch (status) {
+      case 'approved':
+        return 'Approved';
+      case 'rejected':
+        return 'Rejected';
+      default:
+        return 'Pending';
+    }
+  };
+
+  const formatDate = (dateString: string) => {
+    return new Date(dateString).toLocaleDateString('en-US', {
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit'
+    });
+  };
+
+  if (id && selectedSubmission) {
+    return (
+      <div className="px-4 sm:px-6 lg:px-8">
+        <div className="mb-8">
+          <h1 className="text-2xl font-bold text-gray-900">Submission Details</h1>
+          <p className="mt-2 text-gray-600">View detailed submission information</p>
+        </div>
+        
+        <div className="bg-white rounded-lg shadow p-6">
+          <div className="mb-6">
+            <h2 className="text-lg font-medium text-gray-900 mb-4">Original Text</h2>
+            <div className="bg-gray-50 p-4 rounded-md">
+              <p className="text-gray-900">{selectedSubmission.sourceTextId?.content || 'Original text not available'}</p>
+              <div className="mt-2 text-sm text-gray-500">
+                {selectedSubmission.sourceTextId ? `${selectedSubmission.sourceTextId.sourceLanguage} • ${selectedSubmission.sourceTextId.sourceCulture}` : 'Language/Culture not available'}
+              </div>
+            </div>
+          </div>
+
+          <div className="mb-6">
+            <h2 className="text-lg font-medium text-gray-900 mb-4">Your Translation</h2>
+            <div className="bg-blue-50 p-4 rounded-md">
+              <p className="text-gray-900">{selectedSubmission.transcreation}</p>
+            </div>
+          </div>
+
+          <div className="mb-6">
+            <h2 className="text-lg font-medium text-gray-900 mb-4">Explanation</h2>
+            <div className="bg-gray-50 p-4 rounded-md">
+              <p className="text-gray-900">{selectedSubmission.explanation}</p>
+            </div>
+          </div>
+
+          {selectedSubmission.culturalAdaptations.length > 0 && (
+            <div className="mb-6">
+              <h2 className="text-lg font-medium text-gray-900 mb-4">Cultural Adaptations</h2>
+              <div className="bg-gray-50 p-4 rounded-md">
+                <ul className="list-disc list-inside space-y-1">
+                  {selectedSubmission.culturalAdaptations.map((adaptation, index) => (
+                    <li key={index} className="text-gray-900">{adaptation}</li>
+                  ))}
+                </ul>
+              </div>
+            </div>
+          )}
+
+          {selectedSubmission.voteCounts && (
+            <div className="mb-6">
+              <h2 className="text-lg font-medium text-gray-900 mb-4">Voting Results</h2>
+              <div className="bg-gray-50 p-4 rounded-md">
+                <div className="flex items-center space-x-4">
+                  {selectedSubmission.voteCounts && (
+                    <div className="flex space-x-4">
+                      <div>
+                        <span className="text-sm text-gray-500">1st place:</span>
+                        <span className="ml-1 font-medium">{selectedSubmission.voteCounts[1]}</span>
+                      </div>
+                      <div>
+                        <span className="text-sm text-gray-500">2nd place:</span>
+                        <span className="ml-1 font-medium">{selectedSubmission.voteCounts[2]}</span>
+                      </div>
+                      <div>
+                        <span className="text-sm text-gray-500">3rd place:</span>
+                        <span className="ml-1 font-medium">{selectedSubmission.voteCounts[3]}</span>
+                      </div>
+                    </div>
+                  )}
+                </div>
+              </div>
+            </div>
+          )}
+
+          <div className="flex space-x-3">
+            <button
+              onClick={() => setSelectedSubmission(null)}
+              className="bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200"
+            >
+              Back to Submissions
+            </button>
+            <Link
+              to="/dashboard"
+              className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200"
+            >
+              Back to Home
+            </Link>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="px-4 sm:px-6 lg:px-8">
+      <div className="mb-8">
+        <h1 className="text-2xl font-bold text-gray-900">Submissions</h1>
+        <p className="mt-2 text-gray-600">View and manage your transcreations</p>
+      </div>
+      
+      {loading ? (
+        <div className="bg-white rounded-lg shadow p-6">
+          <div className="flex items-center justify-center py-8">
+            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
+            <span className="ml-3 text-gray-600">Loading submissions...</span>
+          </div>
+        </div>
+      ) : error ? (
+        <div className="bg-white rounded-lg shadow p-6">
+          <div className="text-center py-8">
+            <p className="text-red-600 mb-4">{error}</p>
+            <button
+              onClick={fetchSubmissions}
+              className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200"
+            >
+              Try Again
+            </button>
+          </div>
+        </div>
+      ) : submissions.length === 0 ? (
+        <div className="bg-white rounded-lg shadow p-6">
+          <div className="text-center py-8">
+            <p className="text-gray-600 mb-4">You haven't made any submissions yet.</p>
+            <Link
+              to="/practice"
+              className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200"
+            >
+              Start Practicing
+            </Link>
+          </div>
+        </div>
+      ) : (
+        <div className="bg-white rounded-lg shadow">
+          <div className="px-6 py-4 border-b border-gray-200">
+            <h2 className="text-lg font-medium text-gray-900">All Submissions ({submissions.length})</h2>
+          </div>
+          <div className="divide-y divide-gray-200">
+            {submissions.map((submission) => (
+              <div key={submission._id} className="px-6 py-4 hover:bg-gray-50">
+                <div className="flex items-start justify-between">
+                  <div className="flex-1">
+                    <div className="flex items-center space-x-3 mb-2">
+                      {getStatusIcon(submission.status)}
+                      <span className={`text-sm font-medium ${
+                        submission.status === 'approved' ? 'text-green-600' :
+                        submission.status === 'rejected' ? 'text-red-600' : 'text-yellow-600'
+                      }`}>
+                        {getStatusText(submission.status)}
+                      </span>
+                      <span className="text-sm text-gray-500">
+                        {formatDate(submission.createdAt)}
+                      </span>
+                    </div>
+                    
+                    <div className="mb-3">
+                      <h3 className="text-sm font-medium text-gray-900 mb-1">Original Text:</h3>
+                      <p className="text-sm text-gray-600 line-clamp-2">
+                        {submission.sourceTextId?.content || 'Original text not available'}
+                      </p>
+                    </div>
+                    
+                    <div className="mb-3">
+                      <h3 className="text-sm font-medium text-gray-900 mb-1">Your Translation:</h3>
+                      <p className="text-sm text-gray-600 line-clamp-2">
+                        {submission.transcreation}
+                      </p>
+                    </div>
+
+                    {submission.voteCounts && (
+                      <div className="flex items-center space-x-4 text-sm">
+                            <span className="text-gray-500">Votes:</span>
+                            <span className="font-medium">
+                              {submission.voteCounts[1]}st, {submission.voteCounts[2]}nd, {submission.voteCounts[3]}rd
+                            </span>
+                      </div>
+                    )}
+                  </div>
+                  
+                  <div className="ml-4 flex-shrink-0">
+                    <button
+                      onClick={() => setSelectedSubmission(submission)}
+                      className="text-blue-600 hover:text-blue-800 text-sm font-medium"
+                    >
+                      View Details
+                    </button>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+      
+      <div className="mt-6">
+        <Link
+          to="/dashboard"
+          className="bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200"
+        >
+          Back to Home
+        </Link>
+      </div>
+    </div>
+  );
+};
+
+export default Submissions; 

client/src/pages/TextDetail.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { useParams, Link } from 'react-router-dom';
+
+const TextDetail: React.FC = () => {
+  const { id } = useParams();
+
+  return (
+    <div className="px-4 sm:px-6 lg:px-8">
+      <div className="mb-8">
+        <h1 className="text-2xl font-bold text-gray-900">Text Details</h1>
+        <p className="mt-2 text-gray-600">View and analyze culturally rich text</p>
+      </div>
+      
+      <div className="bg-white rounded-lg shadow p-6">
+        <h2 className="text-lg font-medium text-gray-900 mb-4">Text ID: {id}</h2>
+        <p className="text-gray-600 mb-4">
+          This page will show detailed information about the selected text, including cultural elements, 
+          context, and professional reference examples.
+        </p>
+        
+        <div className="flex space-x-3">
+          <Link
+            to={`/text/${id}/submit`}
+            className="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200"
+          >
+            Create Transcreation
+          </Link>
+          <Link
+            to="/search"
+            className="bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200"
+          >
+            Back to Search
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default TextDetail; 

client/src/pages/Toolkit.tsx

@@ -0,0 +1,758 @@
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import SyntaxReorderer from '../components/SyntaxReorderer';
+import { api } from '../services/api';
+import { 
+  DocumentTextIcon,
+  WrenchScrewdriverIcon,
+  ArrowTopRightOnSquareIcon,
+  ClipboardIcon,
+  ArrowsRightLeftIcon
+} from '@heroicons/react/24/outline';
+
+type ToolKey = 'quality-lens' | 'mymemory' | 'dictionary' | 'syntax-reorderer' | 'mt' | 'links';
+
+interface MyMemoryResponse {
+  responseData?: {
+    translatedText?: string;
+    match?: number;
+  };
+  matches?: Array<{
+    translation: string;
+    quality?: string | number;
+    match?: number;
+    segment?: string;
+    reference?: string;
+    'created-by'?: string;
+  }>;
+}
+
+const languages = [
+  { label: 'English', code: 'en' },
+  { label: 'Chinese', code: 'zh-CN' }
+];
+
+type DictEntry = {
+  word: string;
+  entries: Array<{
+    language: { code: string; name: string };
+    partOfSpeech?: string;
+    pronunciations?: Array<{ type?: string; text?: string; tags?: string[] }>;
+    senses?: Array<{
+      definition?: string;
+      examples?: string[];
+      translations?: Array<{ language: { code: string; name: string }; word: string }>;
+    }>;
+  }>;
+  source?: { url?: string; license?: { name?: string; url?: string } };
+};
+
+const TOOL_URLS: Record<ToolKey, string> = {
+  'quality-lens': 'https://linguabot-quality-lens.hf.space',
+  'mymemory': '',
+  'dictionary': '',
+  'syntax-reorderer': '',
+  'mt': '',
+  'links': ''
+};
+
+// Provided by user for MyMemory API
+const MYMEMORY_KEY = '64031566ea7d91c9fe6b';
+// Allowed by user (MT page hidden from visitors)
+const DEEPL_KEY = '9dcb19a8-2c97-42e3-96c0-76c066822750:fx';
+const GOOGLE_KEY = 'AIzaSyBPyhVuTBBUAM-yvvfO8FmxzyJPpFPZDDU';
+
+const Toolkit: React.FC = () => {
+  const [links, setLinks] = useState<Array<{ _id?: string; title: string; url: string; desc?: string; order?: number }>>([]);
+  const [linksLoading, setLinksLoading] = useState(false);
+  const [linksError, setLinksError] = useState('');
+  const [isAdmin, setIsAdmin] = useState(false);
+  const [editItem, setEditItem] = useState<{ _id?: string; title?: string; url?: string; desc?: string; order?: number } | null>(null);
+  const [selectedTool, setSelectedTool] = useState<ToolKey>(() => {
+    return (localStorage.getItem('selectedToolkitTool') as ToolKey) || 'quality-lens';
+  });
+  const [isToolTransitioning, setIsToolTransitioning] = useState(false);
+  const [iframeLoading, setIframeLoading] = useState(true);
+  const [isVisitor, setIsVisitor] = useState<boolean>(true);
+
+  // MyMemory state
+  const [mmSource, setMmSource] = useState<string>(() => localStorage.getItem('mm_source') || '');
+  const [mmFrom, setMmFrom] = useState<string>(() => localStorage.getItem('mm_from') || 'en');
+  const [mmTo, setMmTo] = useState<string>(() => localStorage.getItem('mm_to') || 'zh-CN');
+  const [mmLoading, setMmLoading] = useState(false);
+  const [mmError, setMmError] = useState<string>('');
+  const [mmResults, setMmResults] = useState<Array<{ translation: string; score: number; source?: string }>>([]);
+
+  // Dictionary state (EN ⇄ ZH)
+  const [dictWord, setDictWord] = useState<string>('');
+  const [dictFrom, setDictFrom] = useState<'en' | 'zh'>('en');
+  const [dictTo, setDictTo] = useState<'en' | 'zh'>('zh');
+  const [dictLoading, setDictLoading] = useState<boolean>(false);
+  const [dictError, setDictError] = useState<string>('');
+  const [dictResults, setDictResults] = useState<DictEntry | null>(null);
+
+  const iframeRef = useRef<HTMLIFrameElement | null>(null);
+  const [showWantWords, setShowWantWords] = useState<boolean>(false);
+
+  // MT state
+  const [mtSource, setMtSource] = useState<string>('');
+  const [mtFrom, setMtFrom] = useState<string>('en');
+  const [mtTo, setMtTo] = useState<string>('zh-CN');
+  const [mtProvider, setMtProvider] = useState<'deepl' | 'google'>('deepl');
+  const [mtLoading, setMtLoading] = useState(false);
+  const [mtError, setMtError] = useState<string>('');
+  const [mtResult, setMtResult] = useState<string>('');
+
+  useEffect(() => {
+    localStorage.setItem('selectedToolkitTool', selectedTool);
+  }, [selectedTool]);
+
+  useEffect(() => {
+    try {
+      const u = localStorage.getItem('user');
+      const role = u ? (JSON.parse(u)?.role || 'visitor') : 'visitor';
+      setIsVisitor(role === 'visitor');
+      setIsAdmin(role === 'admin');
+    } catch {
+      setIsVisitor(true);
+      setIsAdmin(false);
+    }
+  }, []);
+
+  const tools = useMemo(() => {
+    const base = [
+      { key: 'quality-lens' as ToolKey, name: 'Quality Lens', desc: 'BLASER/COMET QE + Hallucination', type: 'iframe' },
+      { key: 'mymemory' as ToolKey, name: 'MyMemory', desc: 'Public MT memory lookup', type: 'native' },
+      { key: 'dictionary' as ToolKey, name: 'Dictionary (EN⇄ZH)', desc: 'Iciba suggest', type: 'native' },
+      { key: 'syntax-reorderer' as ToolKey, name: 'Syntax Reorderer', desc: 'EN↔ZH structural practice', type: 'native' },
+      { key: 'links' as ToolKey, name: 'Useful Links', desc: 'Curated external resources', type: 'native' }
+    ];
+    if (!isVisitor) base.splice(2, 0, { key: 'mt' as ToolKey, name: 'MT (DeepL/Google)', desc: 'Translate with MT engines', type: 'native' });
+    return base;
+  }, [isVisitor]);
+
+  // Useful Links: load on tab open
+  useEffect(() => {
+    const loadLinks = async () => {
+      try {
+        setLinksLoading(true); setLinksError('');
+        const base = ((api.defaults as any)?.baseURL as string || '').replace(/\/$/, '');
+        const resp = await fetch(`${base}/api/links`, { method: 'GET' });
+        if (!resp.ok) throw new Error('Failed');
+        const data = await resp.json();
+        setLinks(Array.isArray(data) ? data : []);
+      } catch {
+        setLinksError('Failed to load links');
+      } finally {
+        setLinksLoading(false);
+      }
+    };
+    if (selectedTool === 'links') loadLinks();
+  }, [selectedTool]);
+
+  const handleToolChange = async (tool: ToolKey) => {
+    if (tool === selectedTool) return;
+    setIsToolTransitioning(true);
+    setSelectedTool(tool);
+    // small delay for smooth spinner; iframe will clear its own loading when onLoad fires
+    await new Promise(res => setTimeout(res, 200));
+    setIsToolTransitioning(false);
+    if (tool === 'quality-lens') {
+      setIframeLoading(true);
+    }
+  };
+
+  const fetchMyMemory = async () => {
+    setMmError('');
+    setMmResults([]);
+    if (!mmSource.trim()) {
+      setMmError('Please enter source text');
+      return;
+    }
+    try {
+      setMmLoading(true);
+      localStorage.setItem('mm_source', mmSource);
+      localStorage.setItem('mm_from', mmFrom);
+      localStorage.setItem('mm_to', mmTo);
+      const q = encodeURIComponent(mmSource.trim());
+      // Request MT+matches and DB-only in parallel for robustness
+      const urlMt = `https://api.mymemory.translated.net/get?q=${q}&langpair=${encodeURIComponent(mmFrom)}|${encodeURIComponent(mmTo)}&mt=1&key=${encodeURIComponent(MYMEMORY_KEY)}`;
+      const urlDb = `https://api.mymemory.translated.net/get?q=${q}&langpair=${encodeURIComponent(mmFrom)}|${encodeURIComponent(mmTo)}&mt=0&key=${encodeURIComponent(MYMEMORY_KEY)}`;
+
+      const [resMt, resDb] = await Promise.all([
+        fetch(urlMt, { method: 'GET' }),
+        fetch(urlDb, { method: 'GET' })
+      ]);
+      const dataMt: MyMemoryResponse = await resMt.json();
+      const dataDb: MyMemoryResponse = await resDb.json();
+
+      // MT suggestion
+      const mtSuggestion = dataMt.responseData?.translatedText?.trim() || '';
+      const mtScore = typeof dataMt.responseData?.match === 'number' ? dataMt.responseData?.match : 0;
+
+      // Collect DB matches from db-only response (preferred), fallback to mt response
+      const sourceMatches = Array.isArray(dataDb.matches) && dataDb.matches.length > 0
+        ? dataDb.matches
+        : (Array.isArray(dataMt.matches) ? dataMt.matches : []);
+
+      const machineRe = /(google|bing|mt)/i;
+      const seen = new Set<string>();
+      const dbMatches: Array<{ translation: string; score: number; source?: string }> = [];
+      sourceMatches.forEach((m) => {
+        const t = (m.translation || '').trim();
+        if (!t) return;
+        if (mtSuggestion && t === mtSuggestion) return; // skip identical to MT
+        if (seen.has(t)) return;
+        // Skip machine-created entries when possible
+        const createdBy = (m['created-by'] as unknown as string) || '';
+        if (machineRe.test(createdBy)) return;
+        seen.add(t);
+        const score = typeof m.match === 'number' ? m.match : (typeof m.quality === 'number' ? Number(m.quality) : 0);
+        dbMatches.push({ translation: t, score, source: m.reference || createdBy || 'MyMemory' });
+      });
+
+      dbMatches.sort((a, b) => (b.score || 0) - (a.score || 0));
+      const top5 = dbMatches.slice(0, 5);
+
+      const combined: Array<{ translation: string; score: number; source?: string }> = [];
+      if (mtSuggestion) {
+        combined.push({ translation: mtSuggestion, score: mtScore, source: 'Machine Translation' });
+      }
+      combined.push(...top5);
+      setMmResults(combined);
+    } catch (e: any) {
+      setMmError('Failed to fetch suggestions. Please try again.');
+    } finally {
+      setMmLoading(false);
+    }
+  };
+
+  const copyToClipboard = async (text: string) => {
+    try {
+      await navigator.clipboard.writeText(text);
+    } catch {}
+  };
+
+  const translateMT = async () => {
+    setMtError(''); setMtResult('');
+    const text = mtSource.trim();
+    if (!text) { setMtError('Please enter source text'); return; }
+    try {
+      setMtLoading(true);
+      const base = ((api.defaults as any)?.baseURL as string || '').replace(/\/$/, '');
+      const url = `${base}/api/mt/${mtProvider}`;
+      const body: any = { text, source: mtFrom, target: mtTo };
+      if (mtProvider === 'deepl') body.key = DEEPL_KEY;
+      if (mtProvider === 'google') body.key = GOOGLE_KEY;
+      const resp = await fetch(url, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) });
+      const data = await resp.json().catch(() => ({}));
+      if (!resp.ok) throw new Error(data?.error || 'MT failed');
+      setMtResult((data?.translation || '').trim());
+    } catch (e:any) {
+      setMtError('Failed to translate');
+    } finally {
+      setMtLoading(false);
+    }
+  };
+
+  const IcibaSuggest: React.FC<{ term: string }> = ({ term }) => {
+    const [items, setItems] = useState<Array<{ key: string; paraphrase?: string }>>([]);
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState('');
+    const base = ((api.defaults as any)?.baseURL as string || '').replace(/\/$/, '');
+
+    useEffect(() => {
+      const t = term.trim();
+      if (!t) { setItems([]); setError(''); return; }
+      let aborted = false;
+      (async () => {
+        try {
+          setLoading(true); setError('');
+          const url = `${base}/api/iciba/suggest?word=${encodeURIComponent(t)}`;
+          const resp = await fetch(url);
+          const data = await resp.json().catch(() => ({}));
+          if (aborted) return;
+          const list = Array.isArray(data.message) ? data.message : [];
+          setItems(list.map((it: any) => ({ key: it.key, paraphrase: it.paraphrase })));
+        } catch (e) {
+          if (!aborted) setError('');
+        } finally {
+          if (!aborted) setLoading(false);
+        }
+      })();
+      return () => { aborted = true; };
+    }, [term]);
+
+    if (!term.trim()) return null;
+    if (loading) return <div className="text-sm text-gray-500">Loading…</div>;
+    if (error) return null;
+    if (!items.length) return <div className="text-sm text-gray-500">No suggestions.</div>;
+    return (
+      <div className="space-y-2">
+        {items.slice(0, 6).map((it, idx) => (
+          <div key={idx} className="flex items-center justify-between bg-white rounded border border-gray-200 px-3 py-2">
+            <div className="text-gray-900">
+              <span className="font-medium mr-2">{it.key}</span>
+              <span className="text-sm text-gray-600">{it.paraphrase}</span>
+            </div>
+            <button onClick={() => setDictWord(it.key)} className="text-xs text-gray-600 hover:text-gray-900">Use</button>
+          </div>
+        ))}
+      </div>
+    );
+  };
+
+  const detectLang = (text: string): 'en' | 'zh' => /[\u4e00-\u9fff]/.test(text) ? 'zh' : 'en';
+  const codeMatches = (code: string | undefined, target: 'en' | 'zh') => {
+    if (!code) return false;
+    const lower = code.toLowerCase();
+    if (target === 'zh') return lower === 'zh' || lower.startsWith('zh');
+    return lower === 'en' || lower.startsWith('en');
+  };
+
+  const fetchDictionary = async () => {
+    setDictError('');
+    setDictResults(null);
+    const term = dictWord.trim();
+    if (!term) { setDictError('Please enter a word'); return; }
+    try {
+      setDictLoading(true);
+      // If user didn’t set explicitly, attempt auto-detect from input once
+      const detected = detectLang(term);
+      const from = dictFrom || detected;
+      // Use backend proxy to avoid CORS and CDN edge issues
+      const BACKEND_BASE = ((api.defaults as any)?.baseURL as string) || '';
+      const base = BACKEND_BASE.replace(/\/$/, '');
+      const urlPrimary = `${base}/api/dictionary/${encodeURIComponent(from)}/${encodeURIComponent(term)}?translations=true`;
+      const resPrimary = await fetch(urlPrimary, { method: 'GET' });
+
+      let data: DictEntry | null = null;
+      if (resPrimary.ok) {
+        try { data = await resPrimary.json(); } catch { data = null; }
+      }
+
+      // Fallback to language-agnostic search if nothing found
+      const hasEntries = !!(data && Array.isArray((data as any).entries) && (data as any).entries.length > 0);
+      if (!hasEntries) {
+        const urlAll = `${base}/api/dictionary/all/${encodeURIComponent(term)}?translations=true`;
+        const resAll = await fetch(urlAll, { method: 'GET' });
+        if (resAll.ok) {
+          try { data = await resAll.json(); } catch { data = null; }
+        }
+      }
+
+      if (!data || !Array.isArray((data as any).entries) || (data as any).entries.length === 0) {
+        throw new Error('No results');
+      }
+
+      setDictResults(data as DictEntry);
+    } catch (e: any) {
+      setDictError('No results found or service unavailable');
+    } finally {
+      setDictLoading(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-gray-50 py-8">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        {/* Header */}
+        <div className="mb-8">
+          <div className="flex items-center mb-4">
+            <WrenchScrewdriverIcon className="h-8 w-8 text-indigo-900 mr-3" />
+            <h1 className="text-3xl font-bold text-gray-900">Toolkit</h1>
+          </div>
+          <p className="text-gray-600">Helpful tools for evaluation and reference. Pick a tool below.</p>
+        </div>
+
+        {/* Tool Selector */}
+        <div className="mb-6">
+          <div className="flex space-x-2 overflow-x-auto pb-2">
+            {tools.map(t => (
+              <button
+                key={t.key}
+                onClick={() => handleToolChange(t.key)}
+                className={`px-4 py-2 rounded-lg font-medium whitespace-nowrap transition-all duration-200 ease-in-out ${
+                  selectedTool === t.key
+                    ? 'bg-indigo-600 text-white'
+                    : 'bg-white text-gray-700 hover:bg-gray-50 border border-gray-300'
+                }`}
+              >
+                {t.name}
+              </button>
+            ))}
+          </div>
+        </div>
+
+        {/* Transition Spinner */}
+        {isToolTransitioning && (
+          <div className="fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-50">
+            <div className="bg-white rounded-lg shadow-lg p-4 flex items-center space-x-3">
+              <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-indigo-600"></div>
+              <span className="text-gray-700 font-medium">Loading...</span>
+            </div>
+          </div>
+        )}
+
+        {!isToolTransitioning && (
+          <>
+            {/* Content Panel */}
+            <div className="bg-white rounded-lg p-6 mb-8 border border-gray-200 shadow-sm">
+              {selectedTool === 'quality-lens' && (
+                <div>
+                  <div className="flex items-center justify-between mb-4">
+                    <div className="flex items-center space-x-3">
+                      <div className="bg-indigo-600 rounded-lg p-2">
+                        <DocumentTextIcon className="h-5 w-5 text-white" />
+                      </div>
+                      <div>
+                        <h3 className="text-indigo-900 font-semibold text-xl">Quality Lens</h3>
+                        <p className="text-gray-600 text-sm">BLASER/COMET Quality Estimation and Hallucination detection</p>
+                      </div>
+                    </div>
+                    <a
+                      href={TOOL_URLS['quality-lens']}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="text-indigo-700 hover:text-indigo-900 text-sm inline-flex items-center"
+                    >
+                      Open in new tab <ArrowTopRightOnSquareIcon className="h-4 w-4 ml-1" />
+                    </a>
+                  </div>
+                  <div className="border rounded-lg overflow-hidden">
+                    {iframeLoading && (
+                      <div className="p-4 flex items-center space-x-3">
+                        <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-indigo-600"></div>
+                        <span className="text-gray-600 text-sm">Loading tool…</span>
+                      </div>
+                    )}
+                    <iframe
+                      ref={iframeRef}
+                      src={TOOL_URLS['quality-lens']}
+                      title="Quality Lens"
+                      className="w-full"
+                      style={{ minHeight: '1100px', border: '0' }}
+                      onLoad={() => setIframeLoading(false)}
+                    />
+                  </div>
+                </div>
+              )}
+
+              {selectedTool === 'mymemory' && (
+                <div>
+                  <div className="flex items-center space-x-3 mb-4">
+                    <div className="bg-purple-600 rounded-lg p-2">
+                      <DocumentTextIcon className="h-5 w-5 text-white" />
+                    </div>
+                    <div>
+                      <h3 className="text-purple-900 font-semibold text-xl">MyMemory</h3>
+                      <p className="text-gray-600 text-sm">Lookup translation memory suggestions</p>
+                    </div>
+                  </div>
+
+                  <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
+                    <div className="md:col-span-2">
+                      <label className="block text-sm font-medium text-gray-700 mb-1">Source Text</label>
+                      <textarea
+                        value={mmSource}
+                        onChange={(e) => setMmSource(e.target.value)}
+                        className="w-full p-3 border border-gray-300 rounded-lg bg-white focus:ring-2 focus:ring-purple-500 focus:border-purple-500"
+                        rows={6}
+                        placeholder="Enter text to translate..."
+                      />
+                    </div>
+                    <div>
+                      <div className="mb-3">
+                        <label className="block text-sm font-medium text-gray-700 mb-1">Languages</label>
+                        <div className="relative grid grid-cols-1 sm:grid-cols-2 gap-6">
+                          <select
+                            value={mmFrom}
+                            onChange={(e) => setMmFrom(e.target.value)}
+                            className="w-full pl-3 pr-10 py-2 border border-gray-300 rounded-md bg-white"
+                          >
+                            {languages.map(l => <option key={l.code} value={l.code}>{l.label}</option>)}
+                          </select>
+                          <select
+                            value={mmTo}
+                            onChange={(e) => setMmTo(e.target.value)}
+                            className="w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md bg-white"
+                          >
+                            {languages.map(l => <option key={l.code} value={l.code}>{l.label}</option>)}
+                          </select>
+                          <button
+                            type="button"
+                            onClick={()=>{ const a = mmFrom; setMmFrom(mmTo); setMmTo(a); }}
+                            className="hidden sm:inline-flex items-center justify-center absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-8 h-8 rounded-full border border-gray-300 bg-white shadow hover:bg-gray-50"
+                            aria-label="Swap languages"
+                          >
+                            <ArrowsRightLeftIcon className="w-4 h-4 text-gray-600" />
+                          </button>
+                        </div>
+                      </div>
+                      <button
+                        onClick={fetchMyMemory}
+                        disabled={mmLoading}
+                        className="w-full bg-purple-600 hover:bg-purple-700 disabled:bg-gray-400 text-white px-4 py-2 rounded-lg"
+                      >
+                        {mmLoading ? 'Getting suggestion…' : 'Get suggestion'}
+                      </button>
+                    </div>
+                  </div>
+
+                  {mmError && (
+                    <div className="mb-3 p-3 bg-red-50 text-red-700 rounded border border-red-200 text-sm">{mmError}</div>
+                  )}
+
+                  <div className="space-y-3">
+                    {mmResults.length > 0 ? (
+                      mmResults.map((r, idx) => (
+                        <div key={idx} className={`p-4 rounded-lg border ${idx === 0 ? 'border-purple-300 bg-purple-50' : 'border-gray-200 bg-white'} flex items-start justify-between`}>
+                          <div>
+                            <div className="text-gray-900 mb-2">{r.translation}</div>
+                            <div className="text-xs text-gray-600 space-x-2">
+                              <span>Score: {(r.score * 100).toFixed(0)}%</span>
+                              {r.source && <span>Source: {r.source}</span>}
+                            </div>
+                          </div>
+                          <button
+                            onClick={() => copyToClipboard(r.translation)}
+                            className="text-gray-600 hover:text-gray-900 flex items-center text-xs"
+                          >
+                            <ClipboardIcon className="h-4 w-4 mr-1" /> Copy
+                          </button>
+                        </div>
+                      ))
+                    ) : (
+                      <div className="text-sm text-gray-500">No results yet. Enter text and click Get suggestion.</div>
+                    )}
+                  </div>
+                </div>
+              )}
+
+              {selectedTool === 'mt' && !isVisitor && (
+                <div>
+                  <div className="flex items-center space-x-3 mb-4">
+                    <div className="bg-indigo-600 rounded-lg p-2">
+                      <DocumentTextIcon className="h-5 w-5 text-white" />
+                    </div>
+                    <div>
+                      <h3 className="text-indigo-900 font-semibold text-xl">Machine Translation</h3>
+                      <p className="text-gray-600 text-sm">Translate between English and Chinese with MT.</p>
+                    </div>
+                  </div>
+
+                  <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
+                    <div className="md:col-span-2">
+                      <label className="block text-sm font-medium text-gray-700 mb-1">Source Text</label>
+                      <textarea
+                        value={mtSource}
+                        onChange={(e) => setMtSource(e.target.value)}
+                        className="w-full p-3 border border-gray-300 rounded-lg bg-white focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
+                        rows={6}
+                        placeholder="Enter text to translate..."
+                      />
+                    </div>
+                    <div>
+                      <div className="mb-3">
+                        <label className="block text-sm font-medium text-gray-700 mb-1">Languages</label>
+                        <div className="relative grid grid-cols-1 sm:grid-cols-2 gap-6">
+                          <select value={mtFrom} onChange={(e)=>setMtFrom(e.target.value)} className="w-full pl-3 pr-10 py-2 border border-gray-300 rounded-md bg-white">
+                            {languages.map(l => <option key={l.code} value={l.code}>{l.label}</option>)}
+                          </select>
+                          <select value={mtTo} onChange={(e)=>setMtTo(e.target.value)} className="w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md bg-white">
+                            {languages.map(l => <option key={l.code} value={l.code}>{l.label}</option>)}
+                          </select>
+                          <button type="button" onClick={()=>{ setMtFrom(mtTo); setMtTo(mtFrom); }} className="hidden sm:inline-flex items-center justify-center absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-8 h-8 rounded-full border border-gray-300 bg-white shadow hover:bg-gray-50" aria-label="Swap languages">
+                            <ArrowsRightLeftIcon className="w-4 h-4 text-gray-600" />
+                          </button>
+                        </div>
+                      </div>
+                      <div className="mb-3">
+                        <label className="block text-sm font-medium text-gray-700 mb-1">Provider</label>
+                        <select value={mtProvider} onChange={(e)=>setMtProvider(e.target.value as any)} className="w-full px-3 py-2 border border-gray-300 rounded-md bg-white">
+                          <option value="deepl">DeepL</option>
+                          <option value="google">Google</option>
+                        </select>
+                      </div>
+                      <button
+                        onClick={translateMT}
+                        disabled={mtLoading}
+                        className="w-full bg-indigo-600 hover:bg-indigo-700 disabled:bg-gray-400 text-white px-4 py-2 rounded-lg"
+                      >
+                        {mtLoading ? 'Translating…' : 'Translate'}
+                      </button>
+                    </div>
+                  </div>
+
+                  {mtError && (
+                    <div className="mb-3 p-3 bg-red-50 text-red-700 rounded border border-red-200 text-sm">{mtError}</div>
+                  )}
+
+                  <div className="space-y-3">
+                    {mtResult ? (
+                      <div className="p-4 rounded-lg border border-gray-200 bg-white flex items-start justify-between">
+                        <div className="text-gray-900 mb-2 whitespace-pre-wrap break-words">{mtResult}</div>
+                        <button onClick={()=>copyToClipboard(mtResult)} className="text-gray-600 hover:text-gray-900 flex items-center text-xs"><ClipboardIcon className="h-4 w-4 mr-1"/> Copy</button>
+                      </div>
+                    ) : (
+                      <div className="text-sm text-gray-500">No translation yet. Enter text and click Translate.</div>
+                    )}
+                  </div>
+                </div>
+              )}
+
+              {selectedTool === 'syntax-reorderer' && (
+                <div>
+                  <div className="flex items-center space-x-3 mb-4">
+                    <div className="bg-amber-600 rounded-lg p-2">
+                      <DocumentTextIcon className="h-5 w-5 text-white" />
+                    </div>
+                    <div>
+                      <h3 className="text-amber-900 font-semibold text-xl">Syntax Reorderer (EN↔ZH)</h3>
+                      <p className="text-gray-600 text-sm">Label chunks, assign roles, and reorder to practice structural shifts.</p>
+                    </div>
+                  </div>
+                  <div className="border rounded-lg overflow-hidden">
+                    <SyntaxReorderer />
+                  </div>
+                </div>
+              )}
+
+              {selectedTool === 'dictionary' && (
+                <div>
+                  <div className="flex items-center space-x-3 mb-4">
+                    <div className="bg-teal-600 rounded-lg p-2">
+                      <DocumentTextIcon className="h-5 w-5 text-white" />
+                    </div>
+                    <div>
+                      <h3 className="text-teal-900 font-semibold text-xl">Dictionary (EN⇄ZH)</h3>
+                      <p className="text-gray-600 text-sm">Lookup words and get quick suggestions.</p>
+                    </div>
+                  </div>
+
+                  <div className="mb-4">
+                    <div className="max-w-xl">
+                      <input
+                        type="text"
+                        value={dictWord}
+                        onChange={(e) => setDictWord(e.target.value)}
+                        className="w-full p-3 border border-gray-300 rounded-lg bg-white focus:ring-2 focus:ring-teal-500 focus:border-teal-500"
+                        placeholder="Enter an English or Chinese word"
+                      />
+                    </div>
+                  </div>
+
+                  {/* Remove Wiktionary block; rely on Iciba for now */}
+                  {dictError && (
+                    <div className="mb-3 p-3 bg-red-50 text-red-700 rounded border border-red-200 text-sm">{dictError}</div>
+                  )}
+
+                  {/* Iciba suggestions (optional helper) */}
+                  <div className="mt-6">
+                    <div className="text-sm text-gray-600 mb-2">Suggestions (Iciba)</div>
+                    <IcibaSuggest term={dictWord} />
+                  </div>
+
+                  {/* Reverse Dictionary: WantWords (additive, non-invasive) */}
+                  <div className="mt-8">
+                    <div className="flex items-center justify-between mb-3">
+                      <div>
+                        <div className="text-sm text-gray-600">Reverse Dictionary</div>
+                        <div className="text-lg font-medium text-gray-900">WantWords</div>
+                      </div>
+                      <a
+                        href="https://wantwords.net/"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="text-teal-700 hover:text-teal-900 text-sm inline-flex items-center"
+                      >
+                        Open in new tab <ArrowTopRightOnSquareIcon className="h-4 w-4 ml-1" />
+                      </a>
+                    </div>
+                    <div className="text-sm text-gray-600 mb-3">
+                      Find words by description. This complements direct dictionary lookups.
+                    </div>
+                    <button
+                      type="button"
+                      onClick={() => setShowWantWords(v => !v)}
+                      className="px-3 py-2 rounded-md border border-gray-300 text-sm text-gray-800 bg-white hover:bg-gray-50"
+                    >
+                      {showWantWords ? 'Hide embedded WantWords' : 'Show embedded WantWords'}
+                    </button>
+                    {showWantWords && (
+                      <div className="mt-4 border rounded-lg overflow-hidden">
+                        <iframe
+                          src={`https://wantwords.net/`}
+                          title="WantWords Reverse Dictionary"
+                          className="w-full"
+                          style={{ minHeight: '900px', border: '0' }}
+                        />
+                      </div>
+                    )}
+                  </div>
+                </div>
+              )}
+
+              {selectedTool === 'links' && (
+                <div>
+                  <div className="flex items-center space-x-3 mb-4">
+                    <div className="bg-slate-600 rounded-lg p-2">
+                      <DocumentTextIcon className="h-5 w-5 text-white" />
+                    </div>
+                    <div>
+                      <h3 className="text-slate-900 font-semibold text-xl">Useful Links</h3>
+                      <p className="text-gray-600 text-sm">Short descriptions with quick access to external resources.</p>
+                    </div>
+                  </div>
+                  {isAdmin && (
+                    <div className="mb-4 p-4 border border-gray-200 rounded-lg bg-gray-50">
+                      <div className="font-medium text-gray-800 mb-2">Manage Links</div>
+                      <div className="grid grid-cols-1 md:grid-cols-4 gap-2 items-end">
+                        <input value={editItem?.title || ''} onChange={(e)=>setEditItem({ ...(editItem||{}), title: e.target.value })} placeholder="Title" className="px-3 py-2 border border-gray-300 rounded-md bg-white" />
+                        <input value={editItem?.url || ''} onChange={(e)=>setEditItem({ ...(editItem||{}), url: e.target.value })} placeholder="https://..." className="px-3 py-2 border border-gray-300 rounded-md bg-white" />
+                        <input value={editItem?.desc || ''} onChange={(e)=>setEditItem({ ...(editItem||{}), desc: e.target.value })} placeholder="Short description" className="px-3 py-2 border border-gray-300 rounded-md bg-white" />
+                        <div className="flex gap-2">
+                          <button onClick={async()=>{ try{ const base=((api.defaults as any)?.baseURL as string||'').replace(/\/$/,''); const bodyObj:any={ title: editItem?.title||'', url: editItem?.url||'', desc: editItem?.desc||'' }; const method = editItem?._id ? 'PUT' : 'POST'; const url = editItem?._id ? `${base}/api/links/${encodeURIComponent(editItem._id)}` : `${base}/api/links`; const headers:any={ 'Content-Type':'application/json', 'Authorization': `Bearer ${localStorage.getItem('token')||''}`, 'user-role': 'admin', 'user-info': localStorage.getItem('user')||'' }; const resp = await fetch(url,{ method, headers, body: JSON.stringify(bodyObj) }); const data = await resp.json().catch(()=>({})); if(!resp.ok) throw new Error(data?.error||'Save failed'); setEditItem(null); const reload = await fetch(`${base}/api/links`); const l = await reload.json(); setLinks(Array.isArray(l)?l:[]);}catch{}}} className="px-3 py-2 bg-indigo-600 text-white rounded-md">{editItem?._id?'Update':'Add'}</button>
+                          {editItem?._id && <button onClick={()=>setEditItem(null)} className="px-3 py-2 border border-gray-300 rounded-md bg-white">Cancel</button>}
+                        </div>
+                      </div>
+                    </div>
+                  )}
+
+                  {linksLoading && <div className="text-sm text-gray-600">Loading…</div>}
+                  {linksError && <div className="text-sm text-red-600">{linksError}</div>}
+                  <div className="space-y-3">
+                    {links.map((l) => (
+                      <div key={l._id || l.url} className="p-4 rounded-lg border border-gray-200 bg-white flex items-start justify-between">
+                        <div>
+                          <a href={l.url} target="_blank" rel="noopener noreferrer" className="text-indigo-700 hover:text-indigo-900 font-medium inline-flex items-center">
+                            {l.title}
+                            <ArrowTopRightOnSquareIcon className="h-4 w-4 ml-1" />
+                          </a>
+                          {l.desc && <div className="text-sm text-gray-600 mt-1">{l.desc}</div>}
+                        </div>
+                        <div className="flex gap-3">
+                          <a href={l.url} target="_blank" rel="noopener noreferrer" className="text-indigo-700 hover:text-indigo-900 text-sm inline-flex items-center">Open</a>
+                          {isAdmin && (
+                            <>
+                              <button onClick={()=>setEditItem(l)} className="text-sm text-gray-700 hover:text-gray-900">Edit</button>
+                              <button onClick={async()=>{ try{ const base=((api.defaults as any)?.baseURL as string||'').replace(/\/$/,''); const headers:any={ 'Authorization': `Bearer ${localStorage.getItem('token')||''}`, 'user-role': 'admin', 'user-info': localStorage.getItem('user')||'' }; const resp=await fetch(`${base}/api/links/${encodeURIComponent(String(l._id))}`,{ method:'DELETE', headers }); if(!resp.ok) throw new Error('Delete failed'); setLinks((prev)=>prev.filter(it=>it._id!==l._id)); }catch{}}} className="text-sm text-red-600 hover:text-red-800">Delete</button>
+                            </>
+                          )}
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              )}
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default Toolkit;
+
+
+

client/src/pages/TutorialTasks.tsx

@@ -0,0 +1,2069 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { api } from '../services/api';
+import { 
+  AcademicCapIcon, 
+  DocumentTextIcon, 
+  CheckCircleIcon,
+  ClockIcon,
+  ArrowRightIcon,
+  PencilIcon,
+  XMarkIcon,
+  CheckIcon,
+  PlusIcon,
+  TrashIcon,
+  ArrowTopRightOnSquareIcon,
+  ArrowsRightLeftIcon
+} from '@heroicons/react/24/outline';
+import ReactDOM from 'react-dom';
+
+interface TutorialTask {
+  _id: string;
+  content: string;
+  weekNumber: number;
+  translationBrief?: string;
+  imageUrl?: string;
+  imageAlt?: string;
+  imageSize?: number;
+  imageAlignment?: 'left' | 'center' | 'right' | 'portrait-split';
+  position?: number;
+}
+
+interface TutorialWeek {
+  weekNumber: number;
+  translationBrief?: string;
+  tasks: TutorialTask[];
+}
+
+interface UserSubmission {
+  _id: string;
+  transcreation: string;
+  status: string;
+  score: number;
+  groupNumber?: number;
+  isOwner?: boolean;
+  userId?: {
+    _id: string;
+    username: string;
+  };
+  voteCounts: {
+    '1': number;
+    '2': number;
+    '3': number;
+  };
+}
+
+const TutorialTasks: React.FC = () => {
+  const [selectedWeek, setSelectedWeek] = useState<number>(() => {
+    const savedWeek = localStorage.getItem('selectedTutorialWeek');
+    return savedWeek ? parseInt(savedWeek) : 1;
+  });
+  const [isWeekTransitioning, setIsWeekTransitioning] = useState(false);
+  const [tutorialTasks, setTutorialTasks] = useState<TutorialTask[]>([]);
+  const [tutorialWeek, setTutorialWeek] = useState<TutorialWeek | null>(null);
+  const [userSubmissions, setUserSubmissions] = useState<{[key: string]: UserSubmission[]}>({});
+  const [sourceHeights, setSourceHeights] = useState<{[key: string]: number}>({});
+
+  // Move a task up or down by normalizing positions for the current visible list (weeks 4–6 only)
+  const moveTask = async (taskId: string, direction: 'up' | 'down') => {
+    try {
+      const isAdmin = JSON.parse(localStorage.getItem('user') || '{}').role === 'admin';
+      if (!isAdmin || selectedWeek < 4) return;
+      // Build ordered list for the current week from what is rendered
+      const current = tutorialTasks.filter(t => t.weekNumber === selectedWeek);
+      const index = current.findIndex(t => t._id === taskId);
+      if (index === -1) return;
+      const targetIndex = direction === 'up' ? index - 1 : index + 1;
+      if (targetIndex < 0 || targetIndex >= current.length) return;
+
+      // Normalize positions to 0..n-1 based on current screen order
+      const normalized = current.map((t, i) => ({ id: t._id, position: i }));
+      // Swap the two entries (calculate new positions first)
+      const posA = normalized[index].position;
+      const posB = normalized[targetIndex].position;
+      normalized[index].position = posB;
+      normalized[targetIndex].position = posA;
+
+      // Optimistic UI update: swap in local state immediately for smoother UX
+      const prevState = tutorialTasks;
+      setTutorialTasks((prev) => {
+        const next = [...prev];
+        // find actual indices in full list and swap their relative order by updating their position fields
+        const aId = normalized[index].id;
+        const bId = normalized[targetIndex].id;
+        return next.map(item => {
+          if (item._id === aId) return { ...item, position: posB } as any;
+          if (item._id === bId) return { ...item, position: posA } as any;
+          return item;
+        });
+      });
+
+      // Send both updates in parallel; if either fails, revert then refetch
+      await Promise.all([
+        api.put(`/api/auth/admin/tutorial-tasks/${normalized[index].id}/position`, { position: posB }),
+        api.put(`/api/auth/admin/tutorial-tasks/${normalized[targetIndex].id}/position`, { position: posA })
+      ]);
+      // Light refresh to ensure list order is consistent with server
+      fetchTutorialTasks(false);
+    } catch (error) {
+      console.error('Reorder failed', error);
+    }
+  };
+  const [loading, setLoading] = useState(true);
+  const [submitting, setSubmitting] = useState<{[key: string]: boolean}>({});
+  const [translationText, setTranslationText] = useState<{[key: string]: string}>({});
+  const [selectedGroups, setSelectedGroups] = useState<{[key: string]: number}>({});
+  const [expandedSections, setExpandedSections] = useState<{[key: string]: boolean}>({});
+  const GroupDocSection: React.FC<{ weekNumber: number }> = ({ weekNumber }) => {
+    const [group, setGroup] = useState<number>(() => {
+      const saved = localStorage.getItem(`tutorial_group_${weekNumber}`);
+      return saved ? parseInt(saved) : 1;
+    });
+    const [creating, setCreating] = useState(false);
+    const [docs, setDocs] = useState<any[]>([]);
+    const [urlInput, setUrlInput] = useState<string>('');
+    const [errorMsg, setErrorMsg] = useState<string>('');
+    const [copiedLink, setCopiedLink] = useState<string>('');
+    const isAdmin = (JSON.parse(localStorage.getItem('user') || '{}').role === 'admin');
+
+    const CopySquaresIcon: React.FC<{ className?: string }> = ({ className }) => (
+      <svg className={className || 'h-4 w-4'} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" xmlns="http://www.w3.org/2000/svg">
+        <rect x="8" y="8" width="12" height="12" rx="2"/>
+        <rect x="4" y="4" width="12" height="12" rx="2"/>
+      </svg>
+    );
+
+    const loadDocs = useCallback(async () => {
+      try {
+        const resp = await api.get(`/api/docs/list?weekNumber=${weekNumber}`);
+        setDocs(resp.data?.docs || []);
+      } catch (e) {
+        setDocs([]);
+      }
+    }, [weekNumber]);
+
+    useEffect(() => { loadDocs(); }, [loadDocs]);
+
+    const current = docs.find(d => d.groupNumber === group);
+
+    const createDoc = async () => {
+      try {
+        setCreating(true);
+        setErrorMsg('');
+        const url = urlInput.trim();
+        if (!url) {
+          setErrorMsg('Please paste a Google Doc link.');
+          return;
+        }
+        const isValid = /docs\.google\.com\/document\/d\//.test(url);
+        if (!isValid) {
+          setErrorMsg('Provide a valid Google Doc link (docs.google.com/document/d/...).');
+          return;
+        }
+        await api.post('/api/docs/create', { weekNumber, groupNumber: group, docUrl: url });
+        await loadDocs();
+        setUrlInput('');
+      } finally {
+        setCreating(false);
+      }
+    };
+
+    const copyLink = async (link: string) => {
+      try {
+        await navigator.clipboard.writeText(link);
+        // Persist until refresh: do not clear after timeout
+        setCopiedLink(link);
+      } catch {}
+    };
+
+    return (
+      <div>
+        {/* Top control row */}
+        {isAdmin && (
+          <div className="mb-4 max-w-2xl">
+            <label className="text-sm text-gray-700 block mb-1">Group</label>
+            <select
+              value={group}
+              onChange={(e) => {
+                const g = parseInt(e.target.value);
+                setGroup(g);
+                localStorage.setItem(`tutorial_group_${weekNumber}`, String(g));
+              }}
+              className="w-full px-3 py-2 border rounded-md text-sm"
+            >
+              {[1,2,3,4,5,6,7,8].map(g => <option key={g} value={g}>Group {g}</option>)}
+            </select>
+          </div>
+        )}
+
+        {/* Replace / Add link inline editor */}
+        {isAdmin && (
+          <div className="mb-4 max-w-2xl">
+            <div className="flex items-center gap-2">
+              <input
+                type="url"
+                value={urlInput}
+                onChange={(e) => { setUrlInput(e.target.value); setErrorMsg(''); }}
+                placeholder="Paste Google Doc link (docs.google.com/document/d/...)"
+                className="flex-1 px-3 py-2 border border-gray-300 rounded-md text-sm"
+              />
+              <button onClick={createDoc} disabled={creating} className="px-4 py-2 bg-indigo-600 text-white rounded-md text-sm">{creating ? 'Saving…' : (current ? 'Save new link' : 'Add Doc Link')}</button>
+            </div>
+            {errorMsg && <div className="mt-1 text-xs text-red-600">{errorMsg}</div>}
+          </div>
+        )}
+
+        {/* All groups table */}
+        <div className="mt-6 max-w-2xl">
+          <h5 className="text-sm font-semibold text-gray-800 uppercase tracking-wide mb-2">All Groups</h5>
+          <div className="overflow-hidden rounded-lg border border-gray-200">
+            <table className="min-w-full text-sm">
+              <thead className="bg-gray-50 text-gray-600">
+                <tr>
+                  <th className="px-4 py-2 text-left">Group</th>
+                  <th className="px-4 py-2 text-left">Actions</th>
+                </tr>
+              </thead>
+              <tbody className="divide-y divide-gray-200">
+                {docs.length === 0 && (
+                  <tr><td colSpan={2} className="px-4 py-3 text-gray-500">No group docs yet.</td></tr>
+                )}
+                {docs.map(d => (
+                  <tr key={d._id}>
+                    <td className="px-4 py-3">Group {d.groupNumber}</td>
+                    <td className="px-4 py-3">
+                      <div className="flex items-center gap-4">
+                        <a href={d.docUrl} target="_blank" rel="noreferrer" className="inline-flex items-center gap-1 text-indigo-700">
+                          <ArrowTopRightOnSquareIcon className="h-4 w-4" /> Open
+                        </a>
+                        <button onClick={() => copyLink(d.docUrl)} className="inline-flex items-center gap-1 text-indigo-700">
+                          <CopySquaresIcon className="h-4 w-4" />
+                          <span className="inline-block w-14 text-left">{copiedLink === d.docUrl ? 'Copied' : 'Copy'}</span>
+                        </button>
+                        {isAdmin && (
+                          <button onClick={() => { setGroup(d.groupNumber); }} className="inline-flex items-center gap-1 text-gray-700">
+                            <ArrowsRightLeftIcon className="h-4 w-4" /> Edit
+                          </button>
+                        )}
+                      </div>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    );
+  };
+
+  // Basic inline formatting helpers (bold/italic via simple markdown) for weeks 4–6
+  const renderFormatted = (text: string) => {
+    const escape = (s: string) => s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+    // Auto-linker: supports [label](url), plain URLs, and www.* without touching existing href attributes
+    const html = escape(text)
+      // Markdown-style links: [label](https://example.com)
+      .replace(/\[([^\]]+?)\]\((https?:\/\/[^\s)]+)\)/g, '<a class="text-indigo-600 underline" href="$2" target="_blank" rel="noopener noreferrer">$1</a>')
+      // Plain URLs with protocol, avoid matching inside attributes (require a non-attribute preceding char)
+      .replace(/(^|[^=\"'\/:])(https?:\/\/[^\s<]+)/g, (m, p1, url) => `${p1}<a class="text-indigo-600 underline" href="${url}" target="_blank" rel="noopener noreferrer">${url}</a>`)
+      // www.* domains (prepend https://), also avoid attributes
+      .replace(/(^|[^=\"'\/:])(www\.[^\s<]+)/g, (m, p1, host) => `${p1}<a class="text-indigo-600 underline" href="https://${host}" target="_blank" rel="noopener noreferrer">${host}</a>`)
+      .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
+      .replace(/\*(.+?)\*/g, '<em>$1</em>')
+      .replace(/\n/g, '<br/>');
+    return <span dangerouslySetInnerHTML={{ __html: html }} />;
+  };
+
+  const applyLinkFormat = (
+    elementId: string,
+    current: string,
+    setValue: (v: string) => void
+  ) => {
+    const urlInput = window.prompt('Enter URL (e.g., https://example.com):');
+    if (!urlInput) return;
+    // Sanitize URL: ensure protocol, and strip accidental trailing quotes/attributes pasted from elsewhere
+    let url = /^https?:\/\//i.test(urlInput) ? urlInput : `https://${urlInput}`;
+    url = url.replace(/["'>)\s]+$/g, '');
+    const el = document.getElementById(elementId) as HTMLTextAreaElement | null;
+    if (!el) {
+      setValue(`${current}[link](${url})`);
+      return;
+    }
+    const start = el.selectionStart ?? current.length;
+    const end = el.selectionEnd ?? current.length;
+    const before = current.slice(0, start);
+    const selection = current.slice(start, end) || 'link';
+    const after = current.slice(end);
+    setValue(`${before}[${selection}](${url})${after}`);
+    // Restore focus and selection
+    setTimeout(() => {
+      el.focus();
+      const newPos = before.length + selection.length + 4 + url.length + 2; // rough caret placement
+      try { el.setSelectionRange(newPos, newPos); } catch {}
+    }, 0);
+  };
+
+  const applyInlineFormat = (
+    elementId: string,
+    current: string,
+    setValue: (v: string) => void,
+    wrapper: '**' | '*'
+  ) => {
+    const el = document.getElementById(elementId) as HTMLTextAreaElement | null;
+    if (!el) {
+      setValue(current + wrapper + wrapper);
+      return;
+    }
+    const start = el.selectionStart ?? current.length;
+    const end = el.selectionEnd ?? current.length;
+    const before = current.slice(0, start);
+    const selection = current.slice(start, end);
+    const after = current.slice(end);
+    const next = `${before}${wrapper}${selection}${wrapper}${after}`;
+    setValue(next);
+    setTimeout(() => {
+      try {
+        el.focus();
+        el.selectionStart = start + wrapper.length;
+        el.selectionEnd = end + wrapper.length;
+      } catch {}
+    }, 0);
+  };
+
+  const [editingTask, setEditingTask] = useState<string | null>(null);
+  const [editingBrief, setEditingBrief] = useState<{[key: number]: boolean}>({});
+  const [addingTask, setAddingTask] = useState<boolean>(false);
+  const [addingImage, setAddingImage] = useState<boolean>(false);
+  const [editForm, setEditForm] = useState<{
+    content: string;
+    translationBrief: string;
+    imageUrl: string;
+    imageAlt: string;
+  }>({
+    content: '',
+    translationBrief: '',
+    imageUrl: '',
+    imageAlt: ''
+  });
+  const [imageForm, setImageForm] = useState<{
+    imageUrl: string;
+    imageAlt: string;
+    imageSize: number;
+  imageAlignment: 'left' | 'center' | 'right' | 'portrait-split';
+  }>({
+    imageUrl: '',
+    imageAlt: '',
+    imageSize: 200,
+    imageAlignment: 'center'
+  });
+  const [selectedFile, setSelectedFile] = useState<File | null>(null);
+  const [uploading, setUploading] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const navigate = useNavigate();
+
+  const weeks = [1, 2, 3, 4, 5, 6];
+
+  const handleWeekChange = async (week: number) => {
+    setIsWeekTransitioning(true);
+    
+    // Clear existing data first
+    setTutorialTasks([]);
+    setTutorialWeek(null);
+    setUserSubmissions({});
+    
+    // Update state and localStorage
+    setSelectedWeek(week);
+    localStorage.setItem('selectedTutorialWeek', week.toString());
+    
+    // Force a small delay to ensure state is updated
+    await new Promise(resolve => setTimeout(resolve, 50));
+    
+    // Wait for actual content to load before ending animation
+    try {
+      // Fetch new week's data with the updated selectedWeek
+      const response = await api.get(`/api/search/tutorial-tasks/${week}`);
+      
+      if (response.data) {
+        const tasks = response.data;
+        console.log('Fetched tasks for week', week, ':', tasks);
+        
+        // Ensure tasks are sorted by title
+        const sortedTasks = tasks.sort((a: any, b: any) => {
+          const aNum = parseInt(a.title?.match(/ST (\d+)/)?.[1] || '0');
+          const bNum = parseInt(b.title?.match(/ST (\d+)/)?.[1] || '0');
+          return aNum - bNum;
+        });
+        
+        setTutorialTasks(sortedTasks);
+        
+        // Use translation brief from tasks or localStorage
+        let translationBrief = null;
+        if (tasks.length > 0) {
+          translationBrief = tasks[0].translationBrief;
+        } else {
+          const briefKey = `translationBrief_week_${week}`;
+          translationBrief = localStorage.getItem(briefKey);
+        }
+        
+        const tutorialWeekData: TutorialWeek = {
+          weekNumber: week,
+          translationBrief: translationBrief,
+          tasks: tasks
+        };
+        setTutorialWeek(tutorialWeekData);
+        
+        // Fetch user submissions for the new tasks
+        await fetchUserSubmissions(tasks);
+      }
+      
+      // Wait longer for DOM to update with new content (especially for Week 2)
+      const delay = week === 2 ? 400 : 200;
+      await new Promise(resolve => setTimeout(resolve, delay));
+    } catch (error) {
+      console.error('Error loading week data:', error);
+    } finally {
+      // End transition after content is loaded and rendered
+      setIsWeekTransitioning(false);
+    }
+  };
+
+  const handleFileUpload = async (file: File): Promise<string> => {
+    try {
+      setUploading(true);
+      
+      // Convert file to data URL for display
+      return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onload = () => {
+          const dataUrl = reader.result as string;
+          console.log('File uploaded:', file.name, 'Size:', file.size);
+          console.log('Generated data URL:', dataUrl.substring(0, 50) + '...');
+          resolve(dataUrl);
+        };
+        reader.onerror = () => {
+          console.error('Error reading file:', reader.error);
+          reject(reader.error);
+        };
+        reader.readAsDataURL(file);
+      });
+    } catch (error) {
+      console.error('Error uploading file:', error);
+      throw error;
+    } finally {
+      setUploading(false);
+    }
+  };
+
+  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (file) {
+      setSelectedFile(file);
+    }
+  };
+
+  const toggleExpanded = (taskId: string) => {
+    setExpandedSections(prev => ({
+      ...prev,
+      [taskId]: !prev[taskId]
+    }));
+  };
+
+  const fetchUserSubmissions = useCallback(async (tasks: TutorialTask[]) => {
+    try {
+      const token = localStorage.getItem('token');
+      const user = localStorage.getItem('user');
+      
+      if (!token || !user) {
+        return;
+      }
+
+      const response = await api.get('/api/submissions/my-submissions');
+
+      if (response.data && response.data.submissions) {
+        const data = response.data;
+        
+        const groupedSubmissions: {[key: string]: UserSubmission[]} = {};
+        
+        // Initialize all tasks with empty arrays
+        tasks.forEach(task => {
+          groupedSubmissions[task._id] = [];
+        });
+        
+        // Then populate with actual submissions and mark ownership for edit visibility after refresh/login
+        if (data.submissions && Array.isArray(data.submissions)) {
+          data.submissions.forEach((submission: any) => {
+            const sourceTextId = submission.sourceTextId?._id || submission.sourceTextId;
+            if (sourceTextId && groupedSubmissions[sourceTextId]) {
+              groupedSubmissions[sourceTextId].push({ ...submission, isOwner: true });
+            }
+          });
+        }
+                  
+        setUserSubmissions(groupedSubmissions);
+      }
+    } catch (error) {
+      console.error('Error fetching user submissions:', error);
+    }
+  }, []);
+
+  const fetchTutorialTasks = useCallback(async (showLoading = true) => {
+    try {
+      if (showLoading) {
+        setLoading(true);
+      }
+      const token = localStorage.getItem('token');
+      const user = localStorage.getItem('user');
+      
+      if (!token || !user) {
+        navigate('/login');
+        return;
+      }
+
+      const response = await api.get(`/api/search/tutorial-tasks/${selectedWeek}`);
+
+      if (response.data) {
+        const tasks = response.data;
+        console.log('Fetched tasks:', tasks);
+        console.log('Tasks with images:', tasks.filter((task: TutorialTask) => task.imageUrl));
+        
+        // Debug: Log each task's fields
+        tasks.forEach((task: any, index: number) => {
+          console.log(`Task ${index} fields:`, {
+            _id: task._id,
+            content: task.content,
+            imageUrl: task.imageUrl,
+            imageAlt: task.imageAlt,
+            translationBrief: task.translationBrief,
+            weekNumber: task.weekNumber,
+            category: task.category
+          });
+          console.log(`Task ${index} imageUrl:`, task.imageUrl);
+          console.log(`Task ${index} translationBrief:`, task.translationBrief);
+        });
+        
+        // Ensure tasks are sorted by title to maintain correct order (Tutorial ST 1, Tutorial ST 2, etc.)
+        const sortedTasks = tasks.sort((a: any, b: any) => {
+          const aNum = parseInt(a.title?.match(/ST (\d+)/)?.[1] || '0');
+          const bNum = parseInt(b.title?.match(/ST (\d+)/)?.[1] || '0');
+          return aNum - bNum;
+        });
+        setTutorialTasks(sortedTasks);
+        
+        // Use translation brief from tasks or localStorage
+        let translationBrief = null;
+        if (tasks.length > 0) {
+          translationBrief = tasks[0].translationBrief;
+          console.log('Translation brief from task:', translationBrief);
+        } else {
+          // Check localStorage for brief if no tasks exist
+          const briefKey = `translationBrief_week_${selectedWeek}`;
+          translationBrief = localStorage.getItem(briefKey);
+          console.log('Translation brief from localStorage:', translationBrief);
+          console.log('localStorage key:', briefKey);
+        }
+        
+        console.log('Final translation brief:', translationBrief);
+        const tutorialWeekData: TutorialWeek = {
+          weekNumber: selectedWeek,
+          translationBrief: translationBrief,
+          tasks: tasks
+        };
+        setTutorialWeek(tutorialWeekData);
+        
+        await fetchUserSubmissions(tasks);
+      } else {
+        console.error('Failed to fetch tutorial tasks');
+      }
+    } catch (error) {
+      console.error('Error fetching tutorial tasks:', error);
+    } finally {
+      if (showLoading) {
+        setLoading(false);
+      }
+    }
+  }, [selectedWeek, fetchUserSubmissions, navigate]);
+
+  useEffect(() => {
+    const user = localStorage.getItem('user');
+    if (!user) {
+      navigate('/login');
+      return;
+    }
+    fetchTutorialTasks();
+  }, [fetchTutorialTasks, navigate]);
+
+  // Listen for week reset events from page navigation
+  useEffect(() => {
+    const handleWeekReset = (event: CustomEvent) => {
+      if (event.detail.page === 'tutorial-tasks') {
+        console.log('Week reset event received for tutorial tasks');
+        setSelectedWeek(event.detail.week);
+        localStorage.setItem('selectedTutorialWeek', event.detail.week.toString());
+      }
+    };
+
+    window.addEventListener('weekReset', handleWeekReset as EventListener);
+    return () => {
+      window.removeEventListener('weekReset', handleWeekReset as EventListener);
+    };
+  }, []);
+
+  // Refresh submissions when user changes (after login/logout)
+  useEffect(() => {
+    const user = localStorage.getItem('user');
+    if (user && tutorialTasks.length > 0) {
+      fetchUserSubmissions(tutorialTasks);
+    }
+  }, [tutorialTasks, fetchUserSubmissions]);
+
+  const handleSubmitTranslation = async (taskId: string) => {
+    if (!translationText[taskId]?.trim()) {
+      return;
+    }
+
+    if (!selectedGroups[taskId]) {
+      return;
+    }
+
+    try {
+      setSubmitting({ ...submitting, [taskId]: true });
+      const user = JSON.parse(localStorage.getItem('user') || '{}');
+      const response = await api.post('/api/submissions', {
+        sourceTextId: taskId,
+        transcreation: translationText[taskId],
+        groupNumber: selectedGroups[taskId],
+        culturalAdaptations: [],
+        username: user.name || 'Unknown'
+      });
+
+      if (response.status >= 200 && response.status < 300) {
+        const result = response.data;
+        console.log('Submission created successfully:', result);
+   
+        setTranslationText({ ...translationText, [taskId]: '' });
+        setSelectedGroups({ ...selectedGroups, [taskId]: 0 });
+        await fetchUserSubmissions(tutorialTasks);
+      } else {
+        console.error('Failed to submit translation:', response.data);
+      }
+    } catch (error) {
+      console.error('Error submitting translation:', error);
+      
+    } finally {
+      setSubmitting({ ...submitting, [taskId]: false });
+    }
+  };
+
+  const [editingSubmission, setEditingSubmission] = useState<{id: string, text: string} | null>(null);
+  const [editSubmissionText, setEditSubmissionText] = useState('');
+
+  const handleEditSubmission = async (submissionId: string, currentText: string) => {
+    setEditingSubmission({ id: submissionId, text: currentText });
+    setEditSubmissionText(currentText);
+  };
+
+  const saveEditedSubmission = async () => {
+    if (!editingSubmission || !editSubmissionText.trim()) return;
+
+    try {
+      const response = await api.put(`/api/submissions/${editingSubmission.id}`, {
+        transcreation: editSubmissionText
+      });
+
+      if (response.status >= 200 && response.status < 300) {
+  
+        setEditingSubmission(null);
+        setEditSubmissionText('');
+        await fetchUserSubmissions(tutorialTasks);
+      } else {
+        console.error('Failed to update translation:', response.data);
+      }
+    } catch (error) {
+      console.error('Error updating translation:', error);
+
+    }
+  };
+
+  const cancelEditSubmission = () => {
+    setEditingSubmission(null);
+    setEditSubmissionText('');
+  };
+
+  const handleDeleteSubmission = async (submissionId: string) => {
+
+
+    try {
+      const response = await api.delete(`/api/submissions/${submissionId}`);
+
+      if (response.status === 200) {
+  
+        await fetchUserSubmissions(tutorialTasks);
+      } else {
+
+      }
+    } catch (error) {
+      console.error('Error deleting submission:', error);
+
+    }
+  };
+
+  const getStatusIcon = (status: string) => {
+    switch (status) {
+      case 'approved':
+        return <CheckCircleIcon className="h-5 w-5 text-green-500" />;
+      case 'pending':
+        return <ClockIcon className="h-5 w-5 text-yellow-500" />;
+      default:
+        return <ClockIcon className="h-5 w-5 text-gray-500" />;
+    }
+  };
+
+  const startEditing = (task: TutorialTask) => {
+    setEditingTask(task._id);
+    setEditForm({
+      content: task.content,
+      translationBrief: task.translationBrief || '',
+      imageUrl: task.imageUrl || '',
+      imageAlt: task.imageAlt || ''
+    });
+  };
+
+  const startEditingBrief = () => {
+    setEditingBrief(prev => ({ ...prev, [selectedWeek]: true }));
+    setEditForm({
+      content: '',
+      translationBrief: tutorialWeek?.translationBrief || '',
+      imageUrl: '',
+      imageAlt: ''
+    });
+  };
+
+  const startAddingBrief = () => {
+    setEditingBrief(prev => ({ ...prev, [selectedWeek]: true }));
+    setEditForm({
+      content: '',
+      translationBrief: '',
+      imageUrl: '',
+      imageAlt: ''
+    });
+  };
+
+  const removeBrief = async () => {
+
+    
+    try {
+      setSaving(true);
+      const token = localStorage.getItem('token');
+      const user = JSON.parse(localStorage.getItem('user') || '{}');
+      
+      // Check if user is admin
+      if (user.role !== 'admin') {
+  
+        return;
+      }
+
+              const response = await api.put(`/api/auth/admin/tutorial-brief/${selectedWeek}`, {
+        translationBrief: '',
+        weekNumber: selectedWeek
+      });
+
+      if (response.status >= 200 && response.status < 300) {
+        const briefKey = `translationBrief_week_${selectedWeek}`;
+        localStorage.removeItem(briefKey);
+        setEditForm((prev) => ({ ...prev, translationBrief: '' }));
+        await fetchTutorialTasks();
+
+      } else {
+        console.error('Failed to remove translation brief:', response.data);
+        
+      }
+    } catch (error) {
+      console.error('Failed to remove translation brief:', error);
+      
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const cancelEditing = () => {
+    setEditingTask(null);
+    setEditingBrief(prev => ({ ...prev, [selectedWeek]: false }));
+    setEditForm({
+      content: '',
+      translationBrief: '',
+      imageUrl: '',
+      imageAlt: ''
+    });
+    setSelectedFile(null);
+  };
+
+  const saveTask = async () => {
+    if (!editingTask) return;
+    
+    try {
+      setSaving(true);
+      const token = localStorage.getItem('token');
+      const user = JSON.parse(localStorage.getItem('user') || '{}');
+      
+      // Check if user is admin
+      if (user.role !== 'admin') {
+
+        return;
+      }
+
+      const updateData = {
+        ...editForm,
+        weekNumber: selectedWeek
+      };
+      console.log('Saving task with data:', updateData);
+      
+              const response = await api.put(`/api/auth/admin/tutorial-tasks/${editingTask}`, updateData);
+
+              if (response.status >= 200 && response.status < 300) {
+          await fetchTutorialTasks(false);
+          setEditingTask(null);
+
+        } else {
+          console.error('Failed to update tutorial task:', response.data);
+          
+        }
+    } catch (error) {
+      console.error('Failed to update tutorial task:', error);
+      
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const saveBrief = async () => {
+    try {
+      setSaving(true);
+      const user = JSON.parse(localStorage.getItem('user') || '{}');
+      
+      // Check if user is admin
+      if (user.role !== 'admin') {
+        return;
+      }
+
+      console.log('Saving brief for week:', selectedWeek);
+      console.log('Brief content:', editForm.translationBrief);
+
+      // Save brief by creating or updating the first task of the week
+      if (tutorialTasks.length > 0) {
+        const firstTask = tutorialTasks[0];
+        console.log('Updating first task with brief:', firstTask._id);
+        
+        const response = await api.put(`/api/auth/admin/tutorial-tasks/${firstTask._id}`, {
+          ...firstTask,
+          translationBrief: editForm.translationBrief,
+          weekNumber: selectedWeek
+        });
+
+        if (response.status >= 200 && response.status < 300) {
+          console.log('Brief saved successfully');
+          // Optimistic UI update
+          const briefKey = `translationBrief_week_${selectedWeek}`;
+          localStorage.setItem(briefKey, editForm.translationBrief);
+          setTutorialWeek(prev => prev ? { ...prev, translationBrief: editForm.translationBrief } : prev);
+          setEditingBrief(prev => ({ ...prev, [selectedWeek]: false }));
+          // Background refresh
+          fetchTutorialTasks(false);
+        } else {
+          console.error('Failed to save brief:', response.data);
+        }
+      } else {
+        // If no tasks exist, save the brief to localStorage
+        console.log('No tasks available to save brief to - saving to localStorage');
+        const briefKey = `translationBrief_week_${selectedWeek}`;
+        localStorage.setItem(briefKey, editForm.translationBrief);
+        setEditingBrief(prev => ({ ...prev, [selectedWeek]: false }));
+      }
+    } catch (error) {
+      console.error('Failed to update translation brief:', error);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const startAddingTask = () => {
+    setAddingTask(true);
+    setEditForm({
+      content: '',
+      translationBrief: '',
+      imageUrl: '',
+      imageAlt: ''
+    });
+  };
+
+  const cancelAddingTask = () => {
+    setAddingTask(false);
+    setEditForm({
+      content: '',
+      translationBrief: '',
+      imageUrl: '',
+      imageAlt: ''
+    });
+    setSelectedFile(null);
+  };
+
+  const startAddingImage = () => {
+    setAddingImage(true);
+    setImageForm({
+      imageUrl: '',
+      imageAlt: '',
+      imageSize: 200,
+      imageAlignment: 'center'
+    });
+  };
+
+  const cancelAddingImage = () => {
+    setAddingImage(false);
+    setImageForm({
+      imageUrl: '',
+      imageAlt: '',
+      imageSize: 200,
+      imageAlignment: 'center'
+    });
+  };
+
+
+
+  const saveNewTask = async () => {
+    try {
+      setSaving(true);
+      const user = JSON.parse(localStorage.getItem('user') || '{}');
+      
+      // Check if user is admin
+      if (user.role !== 'admin') {
+        return;
+      }
+
+      // Allow either content or imageUrl, but not both empty
+      if (!editForm.content.trim() && !editForm.imageUrl.trim()) {
+        return;
+      }
+
+      console.log('Saving new task for week:', selectedWeek);
+      console.log('Task content:', editForm.content);
+      console.log('Image URL:', editForm.imageUrl);
+      console.log('Image Alt:', editForm.imageAlt);
+
+      const taskData = {
+        title: `Week ${selectedWeek} Tutorial Task`,
+        content: editForm.content,
+        sourceLanguage: 'English',
+        weekNumber: selectedWeek,
+        category: 'tutorial',
+        imageUrl: editForm.imageUrl || null,
+        imageAlt: editForm.imageAlt || null,
+        // Add imageSize and imageAlignment for image-only content
+        ...(editForm.imageUrl && !editForm.content.trim() && { imageSize: 200 }),
+        ...(editForm.imageUrl && !editForm.content.trim() && { imageAlignment: 'center' })
+      };
+
+      console.log('Task data being sent:', JSON.stringify(taskData, null, 2));
+
+      console.log('Sending task data:', taskData);
+
+              const response = await api.post('/api/auth/admin/tutorial-tasks', taskData);
+      
+      console.log('Task save response:', response.data);
+
+      if (response.status >= 200 && response.status < 300) {
+        console.log('Task saved successfully');
+                  console.log('Saved task response:', response.data);
+          console.log('Saved task response keys:', Object.keys(response.data || {}));
+          console.log('Saved task response.task:', response.data?.task);
+          console.log('Saved task response.task.imageUrl:', response.data?.task?.imageUrl);
+          console.log('Saved task response.task.translationBrief:', response.data?.task?.translationBrief);
+        await fetchTutorialTasks(false);
+        setAddingTask(false);
+
+              } else {
+          console.error('Failed to add tutorial task:', response.data);
+        }
+      } catch (error) {
+        console.error('Failed to add tutorial task:', error);
+      } finally {
+      setSaving(false);
+    }
+  };
+
+  const saveNewImage = async () => {
+    try {
+      setSaving(true);
+      const user = JSON.parse(localStorage.getItem('user') || '{}');
+      
+      // Check if user is admin
+      if (user.role !== 'admin') {
+        return;
+      }
+
+      if (!imageForm.imageUrl.trim()) {
+        return;
+      }
+
+      const payload = {
+        title: `Week ${selectedWeek} Image Task`,
+        content: '', // Empty content for image-only task
+        sourceLanguage: 'English',
+        weekNumber: selectedWeek,
+        category: 'tutorial',
+        imageUrl: imageForm.imageUrl.trim(),
+        imageAlt: imageForm.imageAlt.trim() || null,
+        imageSize: imageForm.imageSize,
+        imageAlignment: imageForm.imageAlignment
+      };
+
+      console.log('Saving new image task with payload:', payload);
+
+      const response = await api.post('/api/auth/admin/tutorial-tasks', payload);
+
+      if (response.data) {
+        console.log('Image task saved successfully:', response.data);
+        await fetchTutorialTasks(false);
+        setAddingImage(false);
+      } else {
+        console.error('Failed to save image task');
+      }
+    } catch (error) {
+      console.error('Failed to add image task:', error);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const deleteTask = async (taskId: string) => {
+
+    
+    try {
+      const token = localStorage.getItem('token');
+      const user = JSON.parse(localStorage.getItem('user') || '{}');
+      
+      // Check if user is admin
+      if (user.role !== 'admin') {
+
+        return;
+      }
+
+      const response = await api.delete(`/api/auth/admin/tutorial-tasks/${taskId}`);
+
+      if (response.status >= 200 && response.status < 300) {
+        await fetchTutorialTasks(false);
+
+      } else {
+        console.error('Failed to delete tutorial task:', response.data);
+        
+      }
+    } catch (error) {
+      console.error('Failed to delete tutorial task:', error);
+      
+    }
+  };
+
+  // Remove intrusive loading screen - just show content with loading state
+
+  return (
+    <div className="min-h-screen bg-gray-50 py-8">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        {/* Header */}
+        <div className="mb-8">
+          <div className="flex items-center mb-4">
+            <AcademicCapIcon className="h-8 w-8 text-indigo-900 mr-3" />
+            <h1 className="text-3xl font-bold text-gray-900">Tutorial Tasks</h1>
+          </div>
+          <p className="text-gray-600">
+            Complete weekly tutorial tasks with your group to practice collaborative translation skills.
+          </p>
+        </div>
+
+        {/* Week Selector */}
+        <div className="mb-6">
+          <div className="flex space-x-2 overflow-x-auto pb-2">
+            {weeks.map((week) => (
+              <button
+                key={week}
+                onClick={() => handleWeekChange(week)}
+                className={`px-4 py-2 rounded-lg font-medium whitespace-nowrap transition-all duration-200 ease-in-out ${
+                  selectedWeek === week
+                    ? 'bg-indigo-600 text-white'
+                    : 'bg-white text-gray-700 hover:bg-gray-50 border border-gray-300'
+                }`}
+              >
+                Week {week}
+              </button>
+            ))}
+          </div>
+        </div>
+
+                {/* Week Transition Loading Spinner */}
+        {isWeekTransitioning && (
+          <div className="fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-50">
+            <div className="bg-white rounded-lg shadow-lg p-4 flex items-center space-x-3">
+              <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-indigo-600"></div>
+              <span className="text-gray-700 font-medium">Loading...</span>
+            </div>
+          </div>
+        )}
+
+        {!isWeekTransitioning && (
+          <>
+            {/* Translation Brief - Shown once at the top */}
+            {tutorialWeek && tutorialWeek.translationBrief ? (
+          <div className="bg-white rounded-lg p-6 mb-8 border border-gray-200 shadow-sm">
+            <div className="flex items-center justify-between mb-4">
+              <div className="flex items-center space-x-3">
+                <div className="bg-indigo-600 rounded-lg p-2">
+                  <DocumentTextIcon className="h-5 w-5 text-white" />
+                </div>
+                <h3 className="text-indigo-900 font-semibold text-xl">Translation Brief</h3>
+              </div>
+              {JSON.parse(localStorage.getItem('user') || '{}').role === 'admin' && (
+                <div className="flex items-center space-x-2">
+                  {editingBrief[selectedWeek] ? (
+                    <>
+                      <button
+                        onClick={saveBrief}
+                        disabled={saving}
+                        className="bg-indigo-500 hover:bg-indigo-600 text-white px-3 py-1 rounded-md transition-colors duration-200 text-sm"
+                      >
+                        {saving ? (
+                          <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div>
+                        ) : (
+                          <CheckIcon className="h-4 w-4" />
+                        )}
+                      </button>
+                      <button
+                        onClick={cancelEditing}
+                        className="bg-gray-500 hover:bg-gray-600 text-white px-3 py-1 rounded-md transition-colors duration-200 text-sm"
+                      >
+                        <XMarkIcon className="h-4 w-4" />
+                      </button>
+                    </>
+                  ) : (
+                    <>
+                      <button
+                        onClick={startEditingBrief}
+                        className="bg-gray-100 hover:bg-gray-200 text-gray-700 px-3 py-1 rounded-md transition-colors duration-200 text-sm"
+                      >
+                        <PencilIcon className="h-4 w-4" />
+                      </button>
+                      <button
+                        onClick={() => removeBrief()}
+                        className="bg-red-100 hover:bg-red-200 text-red-700 px-3 py-1 rounded-md transition-colors duration-200 text-sm"
+                      >
+                        <TrashIcon className="h-4 w-4" />
+                      </button>
+                    </>
+                  )}
+                </div>
+              )}
+            </div>
+            {editingBrief[selectedWeek] ? (
+              <div>
+                <div className="flex items-center justify-end space-x-2 mb-2">
+                  <button onClick={() => applyInlineFormat('tutorial-brief-input', editForm.translationBrief, v => setEditForm({ ...editForm, translationBrief: v }), '**')} className="px-2 py-1 text-xs bg-indigo-100 text-indigo-900 rounded">B</button>
+                  <button onClick={() => applyInlineFormat('tutorial-brief-input', editForm.translationBrief, v => setEditForm({ ...editForm, translationBrief: v }), '*')} className="px-2 py-1 text-xs bg-indigo-100 text-indigo-900 rounded italic">I</button>
+                  <button onClick={() => applyLinkFormat('tutorial-brief-input', editForm.translationBrief || '', v => setEditForm({ ...editForm, translationBrief: v }))} className="px-2 py-1 text-xs bg-indigo-100 text-indigo-900 rounded">Link</button>
+                </div>
+              <textarea id="tutorial-brief-input"
+                value={editForm.translationBrief}
+                onChange={(e) => setEditForm({ ...editForm, translationBrief: e.target.value })}
+                className="w-full p-4 border border-gray-300 rounded-lg text-gray-900 leading-relaxed text-base bg-white focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
+                rows={6}
+                placeholder="Enter translation brief..."
+              />
+              </div>
+            ) : (
+              <div className="text-gray-900 leading-relaxed text-lg font-smiley whitespace-pre-wrap">{renderFormatted(tutorialWeek.translationBrief || '')}</div>
+            )}
+
+            {/* Group Google Doc (refined) */}
+            <div className="mt-6 bg-white rounded-xl border border-gray-200 shadow-sm">
+              <div className="px-6 pt-6">
+                <h4 className="text-2xl font-bold text-gray-900">Group Google Doc</h4>
+                <p className="mt-2 text-gray-600">Open or share each group’s working document.</p>
+              </div>
+              <div className="px-6 pb-4 pt-4 border-t border-gray-100">
+              <GroupDocSection weekNumber={selectedWeek} />
+              </div>
+            </div>
+            <div className="mt-4 p-3 bg-indigo-50 rounded-lg">
+              <p className="text-indigo-900 text-sm">
+                <strong>Note:</strong> Tutorial tasks are completed as group submissions. Each group should collaborate to create a single translation per task.
+              </p>
+            </div>
+          </div>
+        ) : (
+          // Show add brief button when no brief exists
+          JSON.parse(localStorage.getItem('user') || '{}').role === 'admin' && (
+            <div className="bg-white rounded-lg p-6 mb-8 border border-gray-200 border-dashed shadow-sm">
+              <div className="flex items-center justify-between mb-4">
+                              <div className="flex items-center space-x-3">
+                <div className="bg-indigo-100 rounded-lg p-2">
+                  <DocumentTextIcon className="h-5 w-5 text-indigo-900" />
+                </div>
+                <h3 className="text-indigo-900 font-semibold text-xl">Translation Brief</h3>
+              </div>
+                <button
+                  onClick={startAddingBrief}
+                  className="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-3 rounded-lg font-medium flex items-center space-x-2 shadow-sm"
+                >
+                  <PlusIcon className="h-5 w-5" />
+                  <span className="font-medium">Add Brief</span>
+                </button>
+              </div>
+              {editingBrief[selectedWeek] && (
+                <div className="space-y-4">
+                  <div className="flex items-center justify-end space-x-2">
+                    <button onClick={() => applyInlineFormat('tutorial-brief-input', editForm.translationBrief, v => setEditForm({ ...editForm, translationBrief: v }), '**')} className="px-2 py-1 text-xs bg-indigo-100 text-indigo-900 rounded">B</button>
+                    <button onClick={() => applyInlineFormat('tutorial-brief-input', editForm.translationBrief, v => setEditForm({ ...editForm, translationBrief: v }), '*')} className="px-2 py-1 text-xs bg-indigo-100 text-indigo-900 rounded italic">I</button>
+                    <button onClick={() => applyLinkFormat('tutorial-brief-input', editForm.translationBrief || '', v => setEditForm({ ...editForm, translationBrief: v }))} className="px-2 py-1 text-xs bg-indigo-100 text-indigo-900 rounded">Link</button>
+                  </div>
+                  <textarea
+                    id="tutorial-brief-input"
+                    value={editForm.translationBrief}
+                    onChange={(e) => setEditForm({ ...editForm, translationBrief: e.target.value })}
+                    className="w-full p-4 border border-gray-300 rounded-lg text-gray-900 leading-relaxed text-base bg-white focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
+                    rows={6}
+                    placeholder="Enter translation brief..."
+                  />
+                  <div className="flex justify-end space-x-2">
+                    <button
+                      onClick={saveBrief}
+                      disabled={saving}
+                      className="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-3 rounded-lg font-medium flex items-center space-x-2 shadow-sm"
+                    >
+                      {saving ? (
+                        <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div>
+                      ) : (
+                        <>
+                          <CheckIcon className="h-5 w-5" />
+                          <span className="font-medium">Save Brief</span>
+                        </>
+                      )}
+                    </button>
+                    <button
+                      onClick={cancelEditing}
+                      className="bg-gray-500 hover:bg-gray-600 text-white px-6 py-3 rounded-lg font-medium flex items-center space-x-2 shadow-sm"
+                    >
+                      <XMarkIcon className="h-5 w-5" />
+                      <span className="font-medium">Cancel</span>
+                    </button>
+                  </div>
+                </div>
+              )}
+            </div>
+          )
+        )}
+
+        {/* Tutorial Tasks */}
+        <div className="space-y-6">
+          {/* Add New Tutorial Task Section */}
+          {JSON.parse(localStorage.getItem('user') || '{}').role === 'admin' && (
+            <div className="mb-8">
+              {addingTask ? (
+                <div className="bg-white rounded-lg p-6 border border-gray-200 shadow-sm">
+                  <div className="flex items-center space-x-3 mb-4">
+                    <div className="bg-gray-100 rounded-lg p-2">
+                      <PlusIcon className="h-4 w-4 text-gray-600" />
+                    </div>
+                    <h4 className="text-gray-900 font-semibold text-lg">New Tutorial Task</h4>
+                  </div>
+                  <div className="space-y-4">
+                    <div>
+                      <label className="block text-sm font-medium text-gray-700 mb-2">
+                        Task Content *
+                      </label>
+                      <div className="flex items-center justify-end space-x-2 mb-2">
+                        <button onClick={() => applyInlineFormat('tutorial-newtask-input', editForm.content, v => setEditForm({ ...editForm, content: v }), '**')} className="px-2 py-1 text-xs bg-indigo-100 text-indigo-900 rounded">B</button>
+                        <button onClick={() => applyInlineFormat('tutorial-newtask-input', editForm.content, v => setEditForm({ ...editForm, content: v }), '*')} className="px-2 py-1 text-xs bg-indigo-100 text-indigo-900 rounded italic">I</button>
+                        <button onClick={() => applyLinkFormat('tutorial-newtask-input', editForm.content || '', v => setEditForm({ ...editForm, content: v }))} className="px-2 py-1 text-xs bg-indigo-100 text-indigo-900 rounded">Link</button>
+                      </div>
+                      <textarea
+                        id="tutorial-newtask-input"
+                        value={editForm.content}
+                        onChange={(e) => setEditForm({ ...editForm, content: e.target.value })}
+                        className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 bg-white"
+                        rows={4}
+                        placeholder="Enter tutorial task content..."
+                      />
+                    </div>
+                    <div className="space-y-4">
+                      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                        <div>
+                          <label className="block text-sm font-medium text-gray-700 mb-2">
+                            Image URL (Optional)
+                          </label>
+                          <input
+                            type="url"
+                            value={editForm.imageUrl}
+                            onChange={(e) => setEditForm({ ...editForm, imageUrl: e.target.value })}
+                            className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
+                            placeholder="https://example.com/image.jpg"
+                          />
+                        </div>
+                        <div>
+                          <label className="block text-sm font-medium text-gray-700 mb-2">
+                            Image Alt Text (Optional)
+                          </label>
+                          <input
+                            type="text"
+                            value={editForm.imageAlt}
+                            onChange={(e) => setEditForm({ ...editForm, imageAlt: e.target.value })}
+                            className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
+                            placeholder="Description of the image"
+                          />
+                        </div>
+                      </div>
+                      
+                      {/* File Upload Section - Only for Week 2+ */}
+                      {selectedWeek >= 2 && (
+                        <div className="border-t pt-4">
+                          <label className="block text-sm font-medium text-gray-700 mb-2">
+                            Upload Local Image (Optional)
+                          </label>
+                          <div className="space-y-2">
+                            <input
+                              type="file"
+                              accept="image/*"
+                              onChange={handleFileChange}
+                              className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
+                            />
+                            {selectedFile && (
+                              <div className="flex items-center space-x-2">
+                                <span className="text-sm text-gray-600">{selectedFile.name}</span>
+                                <button
+                                  type="button"
+                                  onClick={async () => {
+                                    try {
+                                      const imageUrl = await handleFileUpload(selectedFile);
+                                      setEditForm({ ...editForm, imageUrl });
+                                                                                setSelectedFile(null);
+                                                                          } catch (error) {
+                                        console.error('Upload error:', error);
+                                      }
+                                  }}
+                                  disabled={uploading}
+                                  className="bg-green-500 hover:bg-green-600 disabled:bg-gray-400 text-white px-3 py-1 rounded text-sm"
+                                >
+                                  {uploading ? 'Uploading...' : 'Upload'}
+                                </button>
+                              </div>
+                            )}
+                          </div>
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                  <div className="flex justify-end space-x-2 mt-4">
+                    <button
+                      onClick={saveNewTask}
+                      disabled={saving}
+                      className="bg-indigo-500 hover:bg-indigo-600 text-white px-4 py-2 rounded-lg transition-colors duration-200 flex items-center space-x-2 text-sm"
+                    >
+                      {saving ? (
+                        <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div>
+                      ) : (
+                        <>
+                          <CheckIcon className="h-4 w-4" />
+                          <span>Save Task</span>
+                        </>
+                      )}
+                    </button>
+                    <button
+                      onClick={cancelAddingTask}
+                      className="bg-gray-500 hover:bg-gray-600 text-white px-4 py-2 rounded-lg transition-colors duration-200 flex items-center space-x-2 text-sm"
+                    >
+                      <XMarkIcon className="h-4 w-4" />
+                      <span>Cancel</span>
+                    </button>
+                  </div>
+                </div>
+              ) : addingImage ? (
+                <div className="bg-white rounded-lg p-6 border border-gray-200 shadow-sm">
+                  <div className="flex items-center space-x-3 mb-4">
+                    <div className="bg-blue-100 rounded-lg p-2">
+                      <PlusIcon className="h-4 w-4 text-blue-600" />
+                    </div>
+                    <h4 className="text-blue-900 font-semibold text-lg">New Image Task</h4>
+                  </div>
+                  <div className="space-y-4">
+                    <div>
+                      <label className="block text-sm font-medium text-gray-700 mb-2">
+                        Image URL *
+                      </label>
+                      <input
+                        type="url"
+                        value={imageForm.imageUrl}
+                        onChange={(e) => setImageForm({ ...imageForm, imageUrl: e.target.value })}
+                        className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                        placeholder="https://example.com/image.jpg"
+                      />
+                    </div>
+                    <div>
+                      <label className="block text-sm font-medium text-gray-700 mb-2">
+                        Image Alt Text (Optional)
+                      </label>
+                      <input
+                        type="text"
+                        value={imageForm.imageAlt}
+                        onChange={(e) => setImageForm({ ...imageForm, imageAlt: e.target.value })}
+                        className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                        placeholder="Description of the image"
+                      />
+                    </div>
+                    
+                    {/* File Upload Section */}
+                    <div className="border-t pt-4">
+                      <label className="block text-sm font-medium text-gray-700 mb-2">
+                        Upload Local Image (Optional)
+                      </label>
+                      <div className="space-y-2">
+                        <input
+                          type="file"
+                          accept="image/*"
+                          onChange={handleFileChange}
+                          className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                        />
+                        {selectedFile && (
+                          <div className="flex items-center space-x-2">
+                            <span className="text-sm text-gray-600">{selectedFile.name}</span>
+                            <button
+                              type="button"
+                              onClick={async () => {
+                                try {
+                                  const imageUrl = await handleFileUpload(selectedFile);
+                                  setImageForm({ ...imageForm, imageUrl });
+                                  setSelectedFile(null);
+                                } catch (error) {
+                                  console.error('Upload error:', error);
+                                }
+                              }}
+                              disabled={uploading}
+                              className="bg-green-500 hover:bg-green-600 disabled:bg-gray-400 text-white px-3 py-1 rounded text-sm"
+                            >
+                              {uploading ? 'Uploading...' : 'Upload'}
+                            </button>
+                          </div>
+                        )}
+                      </div>
+                    </div>
+
+                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                      <div>
+                        <label className="block text-sm font-medium text-gray-700 mb-2">
+                          Image Size
+                        </label>
+                        <select
+                          value={imageForm.imageSize}
+                          onChange={(e) => setImageForm({ ...imageForm, imageSize: parseInt(e.target.value) })}
+                          className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                        >
+                          <option value={150}>150px</option>
+                          <option value={200}>200px</option>
+                          <option value={300}>300px</option>
+                        </select>
+                      </div>
+                      <div>
+                        <label className="block text-sm font-medium text-gray-700 mb-2">
+                          Image Alignment
+                        </label>
+                        <select
+                          value={imageForm.imageAlignment}
+                          onChange={(e) => setImageForm({ ...imageForm, imageAlignment: e.target.value as 'left' | 'center' | 'right' })}
+                          className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                        >
+                          <option value="left">Left</option>
+                          <option value="center">Center</option>
+                          <option value="right">Right</option>
+                          {selectedWeek >= 4 && <option value="portrait-split">Portrait Split (image left, text+input right)</option>}
+                        </select>
+                      </div>
+                    </div>
+                  </div>
+                  <div className="flex justify-end space-x-2 mt-4">
+                    <button
+                      onClick={saveNewImage}
+                      disabled={saving}
+                      className="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg transition-colors duration-200 flex items-center space-x-2 text-sm"
+                    >
+                      {saving ? (
+                        <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div>
+                      ) : (
+                        <>
+                          <CheckIcon className="h-4 w-4" />
+                          <span>Save Image</span>
+                        </>
+                      )}
+                    </button>
+                    <button
+                      onClick={cancelAddingImage}
+                      className="bg-gray-500 hover:bg-gray-600 text-white px-4 py-2 rounded-lg transition-colors duration-200 flex items-center space-x-2 text-sm"
+                    >
+                      <XMarkIcon className="h-4 w-4" />
+                      <span>Cancel</span>
+                    </button>
+                  </div>
+                </div>
+              ) : (
+                <div className="bg-white rounded-lg p-6 border border-gray-200 border-dashed shadow-sm">
+                  <div className="flex items-center justify-between">
+                    <div className="flex items-center space-x-3">
+                      <div className="bg-gray-100 rounded-lg p-2">
+                        <PlusIcon className="h-5 w-5 text-gray-600" />
+                      </div>
+                      <div>
+                        <h3 className="text-lg font-semibold text-indigo-900">Add New Tutorial Task</h3>
+                        <p className="text-gray-600 text-sm">Create a new tutorial task for Week {selectedWeek}</p>
+                      </div>
+                    </div>
+                    <div className="flex space-x-3">
+                      <div className="flex space-x-3">
+                        <button
+                          onClick={startAddingTask}
+                          className="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-3 rounded-lg font-medium flex items-center space-x-2 shadow-sm"
+                        >
+                          <PlusIcon className="h-5 w-5" />
+                          <span className="font-medium">Add Task</span>
+                        </button>
+                        {selectedWeek >= 3 && (
+                          <button
+                            onClick={startAddingImage}
+                            className="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-medium flex items-center space-x-2 shadow-sm"
+                          >
+                            <PlusIcon className="h-5 w-5" />
+                            <span className="font-medium">Add Image</span>
+                          </button>
+                        )}
+                      </div>
+
+                    </div>
+                  </div>
+                </div>
+              )}
+            </div>
+          )}
+
+          {tutorialTasks.length === 0 && !addingTask ? (
+            <div className="text-center py-12">
+              <DocumentTextIcon className="h-12 w-12 text-gray-400 mx-auto mb-4" />
+              <h3 className="text-lg font-medium text-gray-900 mb-2">
+                No tutorial tasks available
+              </h3>
+              <p className="text-gray-600">
+                Tutorial tasks for Week {selectedWeek} haven't been set up yet.
+              </p>
+            </div>
+          ) : (
+            tutorialTasks.map((task) => (
+              <div key={task._id} className="bg-white rounded-xl shadow-lg border border-gray-100 p-8 hover:shadow-xl transition-shadow duration-300">
+                <div className="mb-6">
+                  <div className="flex items-center justify-between mb-4">
+                    <div className="flex items-center space-x-3">
+                      <div className="bg-indigo-100 rounded-full p-2">
+                        <DocumentTextIcon className="h-5 w-5 text-indigo-900" />
+                      </div>
+                      <div>
+                        <h3 className="text-lg font-semibold text-gray-900 flex items-center">Source Text #{tutorialTasks.indexOf(task) + 1}
+                          {JSON.parse(localStorage.getItem('user') || '{}').role === 'admin' && selectedWeek >= 4 && (
+                            <span className="ml-2 inline-flex items-center space-x-1">
+                              <button
+                                className="px-2 py-1 text-xs bg-gray-100 rounded hover:bg-gray-200"
+                                onClick={() => moveTask(task._id, 'up')}
+                                title="Move up"
+                              >↑</button>
+                              <button
+                                className="px-2 py-1 text-xs bg-gray-100 rounded hover:bg-gray-200"
+                                onClick={() => moveTask(task._id, 'down')}
+                                title="Move down"
+                              >↓</button>
+                            </span>
+                          )}
+                        </h3>
+                      </div>
+                    </div>
+                    {JSON.parse(localStorage.getItem('user') || '{}').role === 'admin' && (
+                      <div className="flex items-center space-x-2">
+                        {editingTask === task._id ? (
+                          <>
+                            <button
+                              onClick={saveTask}
+                              disabled={saving}
+                              className="bg-green-100 hover:bg-green-200 text-green-700 px-3 py-1 rounded-lg transition-colors duration-200"
+                            >
+                              {saving ? (
+                                <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-green-600"></div>
+                              ) : (
+                                <CheckIcon className="h-4 w-4" />
+                              )}
+                            </button>
+                            <button
+                              onClick={cancelEditing}
+                              className="bg-red-100 hover:bg-red-200 text-red-700 px-3 py-1 rounded-lg transition-colors duration-200"
+                            >
+                              <XMarkIcon className="h-4 w-4" />
+                            </button>
+                          </>
+                        ) : (
+                          <>
+                            <button
+                              onClick={() => startEditing(task)}
+                              className="bg-gray-100 hover:bg-gray-200 text-gray-700 px-3 py-1 rounded-md transition-colors duration-200 text-sm"
+                            >
+                              <PencilIcon className="h-4 w-4" />
+                            </button>
+                            <button
+                              onClick={() => deleteTask(task._id)}
+                              className="bg-red-100 hover:bg-red-200 text-red-700 px-3 py-1 rounded-lg transition-colors duration-200"
+                            >
+                              <TrashIcon className="h-4 w-4" />
+                            </button>
+                          </>
+                        )}
+                      </div>
+                    )}
+                  </div>
+
+                  {/* Content - Clean styling with image support */}
+                  <div className="bg-gradient-to-r from-indigo-50 to-blue-50 rounded-xl p-6 mb-6 border border-indigo-200">
+                    {editingTask === task._id ? (
+                      <div className="space-y-4">
+                        <div className="flex items-center justify-end space-x-2 mb-2">
+                          <button onClick={() => applyInlineFormat('tutorial-newtask-input', editForm.content, v => setEditForm({ ...editForm, content: v }), '**')} className="px-2 py-1 text-xs bg-indigo-100 text-indigo-900 rounded">B</button>
+                          <button onClick={() => applyInlineFormat('tutorial-newtask-input', editForm.content, v => setEditForm({ ...editForm, content: v }), '*')} className="px-2 py-1 text-xs bg-indigo-100 text-indigo-900 rounded italic">I</button>
+                          <button onClick={() => applyLinkFormat('tutorial-newtask-input', editForm.content || '', v => setEditForm({ ...editForm, content: v }))} className="px-2 py-1 text-xs bg-indigo-100 text-indigo-900 rounded">Link</button>
+                        </div>
+                        <textarea
+                          id="tutorial-newtask-input"
+                          value={editForm.content}
+                          onChange={(e) => setEditForm({...editForm, content: e.target.value})}
+                          className="w-full px-4 py-3 border border-indigo-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 bg-white"
+                          rows={5}
+                          placeholder="Enter source text..."
+                        />
+                        <div className="space-y-4">
+                          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                            <div>
+                              <label className="block text-sm font-medium text-gray-700 mb-2">Image URL</label>
+                              <input
+                                type="url"
+                                value={editForm.imageUrl}
+                                onChange={(e) => setEditForm({...editForm, imageUrl: e.target.value})}
+                                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
+                                placeholder="https://example.com/image.jpg"
+                              />
+                            </div>
+                            <div>
+                              <label className="block text-sm font-medium text-gray-700 mb-2">Image Alt Text</label>
+                              <input
+                                type="text"
+                                value={editForm.imageAlt}
+                                onChange={(e) => setEditForm({...editForm, imageAlt: e.target.value})}
+                                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
+                                placeholder="Description of the image"
+                              />
+                            </div>
+                          </div>
+                          
+                          {/* File Upload Section - Only for Week 2+ */}
+                          {selectedWeek >= 2 && (
+                            <div className="border-t pt-4">
+                              <label className="block text-sm font-medium text-gray-700 mb-2">
+                                Upload Local Image (Optional)
+                              </label>
+                              <div className="space-y-2">
+                                <input
+                                  type="file"
+                                  accept="image/*"
+                                  onChange={handleFileChange}
+                                  className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
+                                />
+                                {selectedFile && (
+                                  <div className="flex items-center space-x-2">
+                                    <span className="text-sm text-gray-600">{selectedFile.name}</span>
+                                    <button
+                                      type="button"
+                                      onClick={async () => {
+                                        try {
+                                          const imageUrl = await handleFileUpload(selectedFile);
+                                          console.log('Uploaded image URL:', imageUrl);
+                                          setEditForm({ ...editForm, imageUrl });
+                                          console.log('Updated editForm:', { ...editForm, imageUrl });
+                                          
+                                          // Save the task with the new image URL
+                                          if (editingTask) {
+                                            console.log('Saving task with image URL:', imageUrl);
+                                            const response = await api.put(`/api/auth/admin/tutorial-tasks/${editingTask}`, {
+                                              ...editForm,
+                                              imageUrl,
+                                              weekNumber: selectedWeek
+                                            });
+                                            console.log('Task save response:', response.data);
+                                            
+                                            if (response.status >= 200 && response.status < 300) {
+                                              await fetchTutorialTasks(false); // Refresh tasks
+                                            }
+                                          }
+                                          
+                                          setSelectedFile(null);
+                                        } catch (error) {
+                                          console.error('Upload error:', error);
+                                        }
+                                      }}
+                                      disabled={uploading}
+                                      className="bg-green-500 hover:bg-green-600 disabled:bg-gray-400 text-white px-3 py-1 rounded text-sm"
+                                    >
+                                      {uploading ? 'Uploading...' : 'Upload'}
+                                    </button>
+                                  </div>
+                                )}
+                              </div>
+                            </div>
+                          )}
+                        </div>
+                      </div>
+                    ) : (
+                      <div className="space-y-4">
+                        {task.imageUrl ? (
+                          task.imageAlignment === 'portrait-split' && selectedWeek >= 4 ? (
+                            // Portrait split layout
+                            <div className="grid grid-cols-1 md:grid-cols-2 gap-6 items-start">
+                              <div className="w-full flex justify-center">
+                                <div className="inline-block rounded-lg shadow-md overflow-hidden">
+                                  <img src={task.imageUrl} alt={task.imageAlt || 'Uploaded image'} className="w-auto h-auto" style={{ maxHeight: '520px', maxWidth: '100%', objectFit: 'contain' }} />
+                                </div>
+                              </div>
+                              <div className="w-full">
+                                <div className="bg-indigo-50 rounded-lg p-4 mb-4 border border-indigo-200">
+                                  <h5 className="text-indigo-900 font-semibold mb-2">Source Text (from image)</h5>
+                                  <div
+                                    id={`tutorial-source-${task._id}`}
+                                    ref={(el) => {
+                                      if (el) {
+                                        const h = el.getBoundingClientRect().height;
+                                        if (h && Math.abs((sourceHeights[task._id] || 0) - h) > 1) {
+                                          setSourceHeights((prev) => ({ ...prev, [task._id]: h }));
+                                        }
+                                      }
+                                    }}
+                                    className="text-indigo-900 leading-relaxed text-lg font-source-text whitespace-pre-wrap"
+                                  >{renderFormatted(task.content)}</div>
+                                </div>
+                                {localStorage.getItem('token') && (
+                                  <div className="bg-white rounded-lg p-4 border border-gray-200">
+                                    <h5 className="text-gray-900 font-semibold mb-2">Your Group's Translation</h5>
+                                    {/* Group selection (same as bottom block), shown here for portrait-split */}
+                                    <div className="mb-2">
+                                      <label className="block text-xs font-medium text-gray-700 mb-1">Select Your Group</label>
+                                      <select
+                                        value={selectedGroups[task._id] || ''}
+                                        onChange={(e) => setSelectedGroups({ ...selectedGroups, [task._id]: parseInt(e.target.value) })}
+                                        className="w-40 px-2 py-1 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 bg-white text-xs"
+                                      >
+                                        <option value="">Choose...</option>
+                                        {[1,2,3,4,5,6,7,8].map((g) => (<option key={g} value={g}>Group {g}</option>))}
+                                      </select>
+                                    </div>
+                                    <div className="flex items-center justify-end space-x-2 mb-2">
+                                      <button onClick={() => applyInlineFormat(`tutorial-translation-${task._id}`, translationText[task._id] || '', v => setTranslationText({ ...translationText, [task._id]: v }), '**')} className="px-2 py-1 text-xs bg-indigo-100 text-indigo-900 rounded">B</button>
+                                      <button onClick={() => applyInlineFormat(`tutorial-translation-${task._id}`, translationText[task._id] || '', v => setTranslationText({ ...translationText, [task._id]: v }), '*')} className="px-2 py-1 text-xs bg-indigo-100 text-indigo-900 rounded italic">I</button>
+                                      <button onClick={() => applyLinkFormat(`tutorial-translation-${task._id}`, translationText[task._id] || '', v => setTranslationText({ ...translationText, [task._id]: v }))} className="px-2 py-1 text-xs bg-indigo-100 text-indigo-900 rounded">Link</button>
+                                    </div>
+                                      <textarea
+                                        id={`tutorial-translation-${task._id}`}
+                                        value={translationText[task._id] || ''}
+                                        onChange={(e) => setTranslationText({ ...translationText, [task._id]: e.target.value })}
+                                        className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 bg-white"
+                                        style={{ height: sourceHeights[task._id] ? `${sourceHeights[task._id]}px` : 'auto' }}
+                                        rows={4}
+                                        placeholder="Enter your group's translation here..."
+                                      />
+                                    <div className="flex justify-end mt-2">
+                                      <button onClick={() => handleSubmitTranslation(task._id)} disabled={submitting[task._id]} className="bg-indigo-500 hover:bg-indigo-600 disabled:bg-gray-400 text-white px-4 py-2 rounded-lg text-sm">{submitting[task._id] ? 'Submitting...' : 'Submit Translation'}</button>
+                                    </div>
+                                  </div>
+                                )}
+                              </div>
+                            </div>
+                          ) : task.content === 'Image-based task' ? (
+                            // Image-only layout with dynamic sizing and alignment
+                            <div className={`flex flex-col md:flex-row gap-6 items-start ${
+                              task.imageAlignment === 'left' ? 'md:flex-row' : 
+                              task.imageAlignment === 'right' ? 'md:flex-row-reverse' : 
+                              'md:flex-col'
+                            }`}>
+                              {/* Image section */}
+                              <div className={`${
+                                task.imageAlignment === 'left' ? 'w-full md:w-1/2' :
+                                task.imageAlignment === 'right' ? 'w-full md:w-1/2' :
+                                'w-full'
+                              } flex ${
+                                task.imageAlignment === 'left' ? 'justify-start' :
+                                task.imageAlignment === 'right' ? 'justify-end' :
+                                'justify-center'
+                              }`}>
+                                <div className="inline-block rounded-lg shadow-md overflow-hidden">
+                                  <img src={task.imageUrl} alt={task.imageAlt || 'Uploaded image'} className="w-full h-auto" style={{ height: `${task.imageSize || 200}px`, width: 'auto', objectFit: 'contain' }} onError={(e) => { console.error('Image failed to load:', e); (e.currentTarget as HTMLImageElement).style.display = 'none'; }} />
+                                  {task.imageAlt && (<div className="text-xs text-gray-500 mt-2 text-center">Alt: {task.imageAlt}</div>)}
+                                </div>
+                              </div>
+                            </div>
+                          ) : (
+                            // Regular task layout
+                            <div className="flex flex-col md:flex-row gap-6 items-start">
+                              <div className="w-full md:w-1/2 flex justify-center">
+                                {task.imageUrl.startsWith('data:') ? (
+                                  <div className="inline-block rounded-lg shadow-md overflow-hidden">
+                                    <img src={task.imageUrl} alt={task.imageAlt || 'Uploaded image'} className="w-full h-auto" style={{ height: '200px', width: 'auto', objectFit: 'contain' }} onError={(e) => { console.error('Image failed to load:', e); (e.currentTarget as HTMLImageElement).style.display = 'none'; }} />
+                                  </div>
+                                ) : (
+                                  <div className="inline-block rounded-lg shadow-md bg-green-500 text-white p-6 text-center">
+                                    <div className="text-3xl mb-2">📷</div>
+                                    <div className="font-semibold">Image Uploaded</div>
+                                    <div className="text-sm opacity-75">{task.imageUrl}</div>
+                                  </div>
+                                )}
+                              </div>
+                              <div className="w-full md:w-1/2">
+                                <div className="text-indigo-900 leading-relaxed text-lg font-source-text whitespace-pre-wrap">{renderFormatted(task.content)}</div>
+                              </div>
+                            </div>
+                          )
+                        ) : (
+                          // Text only when no image
+                          <div>
+                            <div className="text-indigo-900 leading-relaxed text-lg font-source-text whitespace-pre-wrap">{renderFormatted(task.content)}</div>
+                          </div>
+                        )}
+                        {(() => { console.log('Task imageUrl check:', task._id, task.imageUrl, !!task.imageUrl); return null; })()}
+                      </div>
+                    )}
+                  </div>
+
+
+                </div>
+
+                {/* All Submissions for this Task */}
+                {userSubmissions[task._id] && userSubmissions[task._id].length > 0 && (
+                  <div className="bg-gradient-to-r from-white to-indigo-50 rounded-xl p-6 mb-6 border border-stone-200">
+                    <div className="flex items-center justify-between mb-4">
+                      <div className="flex items-center space-x-2">
+                        <div className="bg-indigo-100 rounded-full p-1">
+                          <CheckCircleIcon className="h-4 w-4 text-indigo-900" />
+                        </div>
+                        <h4 className="text-stone-900 font-semibold text-lg">All Submissions ({userSubmissions[task._id].length})</h4>
+                      </div>
+                      <button
+                        onClick={() => toggleExpanded(task._id)}
+                        className="flex items-center space-x-1 text-indigo-900 hover:text-indigo-900 text-sm font-medium"
+                      >
+                        <span>{expandedSections[task._id] ? 'Collapse' : 'Expand'}</span>
+                        <svg
+                          className={`w-4 h-4 transition-transform duration-200 ${expandedSections[task._id] ? 'rotate-180' : ''}`}
+                          fill="none"
+                          stroke="currentColor"
+                          viewBox="0 0 24 24"
+                        >
+                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+                        </svg>
+                      </button>
+                    </div>
+                    <div className={`grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 transition-all duration-300 ${
+                      expandedSections[task._id] 
+                        ? 'max-h-none overflow-visible' 
+                        : 'max-h-0 overflow-hidden'
+                    }`}>
+                      {userSubmissions[task._id].map((submission, index) => (
+                        <div key={submission._id} className="bg-white rounded-lg p-3 border border-stone-200 flex flex-col justify-between h-full">
+                          <div className="flex items-center justify-between mb-2">
+                            <div className="flex items-center space-x-2">
+                              {submission.isOwner && (
+                                <span className="inline-block bg-purple-100 text-purple-800 text-xs px-1.5 py-0.5 rounded-full">
+                                  Your Submission
+                                </span>
+                              )}
+                            </div>
+                            {getStatusIcon(submission.status)}
+                          </div>
+                          <p className="text-stone-800 leading-relaxed text-base mb-2 font-smiley whitespace-pre-wrap">{renderFormatted(submission.transcreation || '')}</p>
+                          <div className="flex items-center space-x-4 text-xs text-stone-700 mt-auto">
+                            <div className="flex items-center space-x-1">
+                              <span className="font-medium">Group:</span>
+                              <span className="bg-indigo-100 px-1.5 py-0.5 rounded-full text-indigo-900 text-xs">
+                                {submission.groupNumber}
+                              </span>
+                            </div>
+                            <div className="flex items-center space-x-1">
+                              <span className="font-medium">Votes:</span>
+                              <span className="bg-indigo-100 px-1.5 py-0.5 rounded-full text-indigo-900 text-xs">
+                                {(submission.voteCounts?.['1'] || 0) + (submission.voteCounts?.['2'] || 0) + (submission.voteCounts?.['3'] || 0)}
+                              </span>
+                            </div>
+                          </div>
+                          <div className="flex items-center space-x-2 mt-2">
+                            {(submission.isOwner || (JSON.parse(localStorage.getItem('user') || '{}').role === 'admin')) && (
+                              <button
+                                onClick={() => handleEditSubmission(submission._id, submission.transcreation)}
+                                className="text-indigo-900 hover:text-indigo-900 text-sm font-medium"
+                              >
+                                Edit
+                              </button>
+                            )}
+                            {JSON.parse(localStorage.getItem('user') || '{}').role === 'admin' && (
+                              <button
+                                onClick={() => handleDeleteSubmission(submission._id)}
+                                className="text-red-600 hover:text-red-800 text-sm font-medium"
+                              >
+                                Delete
+                              </button>
+                            )}
+                          </div>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                )}
+
+                                  {/* Translation Input (always show if user is logged in, but hide for image-only content) */}
+                  {localStorage.getItem('token') && task.content !== 'Image-based task' && task.imageAlignment !== 'portrait-split' && (
+                                  <div className="bg-white rounded-lg p-6 border border-gray-200 shadow-sm">
+                    <div className="flex items-center space-x-3 mb-4">
+                      <div className="bg-gray-100 rounded-lg p-2">
+                        <DocumentTextIcon className="h-4 w-4 text-gray-600" />
+                      </div>
+                      <h4 className="text-gray-900 font-semibold text-lg">Group Translation</h4>
+                    </div>
+                    
+                    {/* Group Selection */}
+                    <div className="mb-4">
+                      <label className="block text-sm font-medium text-gray-700 mb-2">
+                        Select Your Group *
+                      </label>
+                      <select
+                        value={selectedGroups[task._id] || ''}
+                        onChange={(e) => setSelectedGroups({ ...selectedGroups, [task._id]: parseInt(e.target.value) })}
+                        className="w-48 px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 bg-white text-sm"
+                        required
+                      >
+                        <option value="">Choose your group...</option>
+                        {[1, 2, 3, 4, 5, 6, 7, 8].map((group) => (
+                          <option key={group} value={group}>
+                            Group {group}
+                          </option>
+                        ))}
+                      </select>
+                    </div>
+
+                    <div className="mb-4">
+                      <label className="block text-sm font-medium text-gray-700 mb-2">
+                        Your Group's Translation *
+                      </label>
+                      <div className="flex items-center justify-end space-x-2 mb-2">
+                        <button onClick={() => applyInlineFormat(`tutorial-translation-${task._id}`, translationText[task._id] || '', v => setTranslationText({ ...translationText, [task._id]: v }), '**')} className="px-2 py-1 text-xs bg-indigo-100 text-indigo-900 rounded">B</button>
+                        <button onClick={() => applyInlineFormat(`tutorial-translation-${task._id}`, translationText[task._id] || '', v => setTranslationText({ ...translationText, [task._id]: v }), '*')} className="px-2 py-1 text-xs bg-indigo-100 text-indigo-900 rounded italic">I</button>
+                        <button onClick={() => applyLinkFormat(`tutorial-translation-${task._id}`, translationText[task._id] || '', v => setTranslationText({ ...translationText, [task._id]: v }))} className="px-2 py-1 text-xs bg-indigo-100 text-indigo-900 rounded">Link</button>
+                      </div>
+                      <textarea
+                        id={`tutorial-translation-${task._id}`}
+                        value={translationText[task._id] || ''}
+                        onChange={(e) => setTranslationText({ ...translationText, [task._id]: e.target.value })}
+                        className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 bg-white"
+                        rows={4}
+                        placeholder="Enter your group's translation here..."
+                      />
+                    </div>
+
+                    <button
+                      onClick={() => handleSubmitTranslation(task._id)}
+                      disabled={submitting[task._id]}
+                      className="bg-indigo-500 hover:bg-indigo-600 disabled:bg-gray-400 text-white px-6 py-3 rounded-lg font-medium flex items-center justify-center transition-all duration-200"
+                    >
+                      {submitting[task._id] ? (
+                        <>
+                          <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2"></div>
+                          Submitting...
+                        </>
+                      ) : (
+                        <>
+                          Submit Group Translation
+                          <ArrowRightIcon className="h-4 w-4 ml-2" />
+                        </>
+                      )}
+                    </button>
+                  </div>
+                )}
+
+                {/* Show login message for visitors */}
+                {!localStorage.getItem('token') && (
+                  <div className="bg-gradient-to-r from-gray-50 to-indigo-50 rounded-xl p-6 border border-gray-200">
+                    <div className="flex items-center space-x-2 mb-4">
+                      <div className="bg-gray-100 rounded-full p-1">
+                        <DocumentTextIcon className="h-4 w-4 text-gray-600" />
+                      </div>
+                      <h4 className="text-gray-900 font-semibold text-lg">Login Required</h4>
+                    </div>
+                    <p className="text-gray-700 mb-4">
+                      Please log in to submit translations for this tutorial task.
+                    </p>
+                    <button
+                      onClick={() => window.location.href = '/login'}
+                      className="bg-indigo-500 hover:bg-indigo-600 text-white px-6 py-3 rounded-lg font-medium flex items-center justify-center transition-all duration-200"
+                    >
+                      Go to Login
+                      <ArrowRightIcon className="h-4 w-4 ml-2" />
+                    </button>
+                  </div>
+                )}
+              </div>
+            ))
+          )}
+        </div>
+        </>
+        )}
+      </div>
+
+      {/* Edit Submission Modal */}
+      {editingSubmission && (
+        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+          <div className="bg-white rounded-lg p-6 w-full max-w-2xl mx-4">
+            <div className="flex items-center justify-between mb-4">
+              <h3 className="text-lg font-semibold text-gray-900">Edit Translation</h3>
+              <button
+                onClick={cancelEditSubmission}
+                className="text-gray-400 hover:text-gray-600"
+              >
+                <XMarkIcon className="h-6 w-6" />
+              </button>
+            </div>
+            <div className="mb-4">
+              <textarea
+                value={editSubmissionText}
+                onChange={(e) => setEditSubmissionText(e.target.value)}
+                className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-purple-500"
+                rows={6}
+                placeholder="Enter your translation..."
+              />
+            </div>
+            <div className="flex justify-end space-x-3">
+              <button
+                onClick={cancelEditSubmission}
+                className="px-4 py-2 text-gray-600 hover:text-gray-800 border border-gray-300 rounded-lg"
+              >
+                Cancel
+              </button>
+              <button
+                onClick={saveEditedSubmission}
+                className="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700"
+              >
+                Save Changes
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default TutorialTasks; 

client/src/pages/VoteResults.tsx

@@ -0,0 +1,587 @@
+import React, { useState, useEffect, useMemo } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { 
+  HandThumbUpIcon, 
+  MagnifyingGlassIcon,
+  XMarkIcon
+} from '@heroicons/react/24/outline';
+import { api } from '../services/api';
+
+interface VoteableSubmission {
+  _id: string;
+  transcreation: string;
+  score: number;
+  voteCounts: {
+    '1': number;
+    '2': number;
+    '3': number;
+  };
+  hasVoted: boolean;
+  userRank?: number;
+  groupNumber?: number;
+  isGroupSubmission?: boolean;
+  sourceTextId: {
+    _id: string;
+    title: string;
+    content: string;
+    sourceLanguage: string;
+    sourceCulture: string;
+    category: string;
+    weekNumber: number;
+  };
+}
+
+interface GroupedSubmissions {
+  [sourceTextId: string]: {
+    sourceText: {
+      _id: string;
+      title: string;
+      content: string;
+      sourceLanguage: string;
+      sourceCulture: string;
+      category: string;
+      weekNumber: number;
+    };
+    submissions: VoteableSubmission[];
+  };
+}
+
+const VoteResults: React.FC = () => {
+  const [groupedSubmissions, setGroupedSubmissions] = useState<GroupedSubmissions>({});
+  const [selectedExample, setSelectedExample] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [voting, setVoting] = useState<{[key: string]: boolean}>({});
+  const [searchTerm, setSearchTerm] = useState('');
+  const [sortBy, setSortBy] = useState<'score' | 'votes' | 'st-number'>('score');
+  const [filterCategory, setFilterCategory] = useState<string>('all');
+  const [filterWeek, setFilterWeek] = useState<string>('all');
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    const user = localStorage.getItem('user');
+    if (!user) {
+      navigate('/login');
+      return;
+    }
+    fetchVoteResults();
+  }, [navigate]);
+
+  const fetchVoteResults = async (showLoading = true) => {
+    try {
+      if (showLoading) { setLoading(true); }
+      const response = await api.get('/api/submissions/voteable');
+
+      if (response.data) {
+        const data = response.data;
+        
+        // Transform the data from backend format to frontend format
+        const transformedData: GroupedSubmissions = {};
+        
+        if (data.examples && Array.isArray(data.examples)) {
+          data.examples.forEach((exampleGroup: any) => {
+            const sourceTextId = exampleGroup.example.id;
+            transformedData[sourceTextId] = {
+              sourceText: {
+                _id: sourceTextId,
+                title: exampleGroup.example.title || `Example ${sourceTextId.slice(-4)}`,
+                content: exampleGroup.example.content,
+                sourceLanguage: exampleGroup.example.language,
+                sourceCulture: exampleGroup.example.culture,
+                category: exampleGroup.example.category || 'tutorial',
+                weekNumber: exampleGroup.example.weekNumber || 1
+              },
+              submissions: exampleGroup.translations.map((translation: any) => ({
+                _id: translation.id,
+                transcreation: translation.translation,
+                score: translation.score,
+                voteCounts: translation.voteCounts,
+                hasVoted: translation.hasVoted,
+                userRank: translation.userRank,
+                groupNumber: translation.groupNumber,
+                isGroupSubmission: translation.isGroupSubmission,
+                sourceTextId: {
+                  _id: sourceTextId,
+                  title: exampleGroup.example.title || `Example ${sourceTextId.slice(-4)}`,
+                  content: exampleGroup.example.content,
+                  sourceLanguage: exampleGroup.example.language,
+                  sourceCulture: exampleGroup.example.culture,
+                  category: exampleGroup.example.category || 'tutorial',
+                  weekNumber: exampleGroup.example.weekNumber || 1
+                }
+              }))
+            };
+          });
+        }
+        
+        setGroupedSubmissions(transformedData);
+      } else {
+        console.error('Failed to fetch vote results');
+      }
+    } catch (error) {
+      console.error('Error fetching vote results:', error);
+    } finally {
+      if (showLoading) { setLoading(false); }
+    }
+  };
+
+  const handleVote = async (submissionId: string, rank: number | null) => {
+    try {
+      setVoting({ ...voting, [submissionId]: true });
+      
+      const body = rank ? { rank } : { cancel: true };
+      
+      const response = await api.post(`/api/submissions/${submissionId}/vote`, body);
+
+      if (response.data) {
+        // Refresh the data
+        await fetchVoteResults(false);
+      } else {
+        console.error('Failed to submit vote');
+      }
+    } catch (error) {
+      console.error('Error submitting vote:', error);
+    } finally {
+      setVoting({ ...voting, [submissionId]: false });
+    }
+  };
+
+  const getFilteredTranslations = (submissions: VoteableSubmission[] | undefined) => {
+    if (!submissions || !Array.isArray(submissions)) {
+      return [];
+    }
+    
+    let filtered = submissions;
+
+    // Filter by search term
+    if (searchTerm) {
+      filtered = filtered.filter(sub => 
+        sub.transcreation.toLowerCase().includes(searchTerm.toLowerCase())
+      );
+    }
+
+    // Sort
+    filtered.sort((a, b) => {
+      let aValue: number;
+      let bValue: number;
+
+      switch (sortBy) {
+        case 'score':
+          aValue = a.score || 0;
+          bValue = b.score || 0;
+          break;
+        case 'votes':
+          aValue = (a.voteCounts?.['1'] || 0) + (a.voteCounts?.['2'] || 0) + (a.voteCounts?.['3'] || 0);
+          bValue = (b.voteCounts?.['1'] || 0) + (b.voteCounts?.['2'] || 0) + (b.voteCounts?.['3'] || 0);
+          break;
+        
+        default:
+          aValue = a.score || 0;
+          bValue = b.score || 0;
+      }
+
+      return bValue - aValue; // Always sort descending for better UX
+    });
+
+    return filtered;
+  };
+
+  const getUserVotingProgress = (submissions: VoteableSubmission[] | undefined) => {
+    if (!submissions || !Array.isArray(submissions)) {
+      return {
+        voted: 0,
+        total: 3,
+        percentage: 0
+      };
+    }
+    const userVotes = submissions.filter(sub => sub.hasVoted).length;
+    return {
+      voted: userVotes,
+      total: 3,
+      percentage: Math.min((userVotes / 3) * 100, 100)
+    };
+  };
+
+  const getAvailableRanks = (submissions: VoteableSubmission[] | undefined) => {
+    if (!submissions || !Array.isArray(submissions)) {
+      return [1, 2, 3];
+    }
+    const usedRanks = new Set(submissions.filter(sub => sub.hasVoted).map(sub => sub.userRank));
+    return [1, 2, 3].filter(rank => !usedRanks.has(rank));
+  };
+
+  // Helpers to align numbering with Tutorial/Weekly pages
+  const extractStNumber = (title: string | undefined) => {
+    if (!title) return Number.POSITIVE_INFINITY;
+    const m = title.match(/ST\s*(\d+)/i);
+    return m ? parseInt(m[1], 10) : Number.POSITIVE_INFINITY;
+  };
+
+  const objectIdTime = (id: string | undefined) => {
+    if (!id) return Number.POSITIVE_INFINITY;
+    try { return parseInt(id.slice(0, 8), 16); } catch { return Number.POSITIVE_INFINITY; }
+  };
+
+  const orderedKeysByWeekCategory = useMemo(() => {
+    const map: {[key: string]: string[]} = {};
+    const keys = Object.keys(groupedSubmissions);
+    keys.forEach((k) => {
+      const st = groupedSubmissions[k]?.sourceText;
+      if (!st) return;
+      const wk = st.weekNumber || 0;
+      const cat = st.category || 'tutorial';
+      const bucketKey = `${wk}__${cat}`;
+      if (!map[bucketKey]) map[bucketKey] = [];
+      map[bucketKey].push(k);
+    });
+    // Sort each bucket by ST number if present; fallback to ObjectId time; then by title
+    Object.keys(map).forEach((bucketKey) => {
+      map[bucketKey].sort((a, b) => {
+        const A = groupedSubmissions[a]?.sourceText;
+        const B = groupedSubmissions[b]?.sourceText;
+        const aNum = extractStNumber(A?.title);
+        const bNum = extractStNumber(B?.title);
+        if (aNum !== bNum) return aNum - bNum;
+        const aTime = objectIdTime(A?._id);
+        const bTime = objectIdTime(B?._id);
+        if (aTime !== bTime) return aTime - bTime;
+        return (A?.title || '').localeCompare(B?.title || '');
+      });
+    });
+    return map;
+  }, [groupedSubmissions]);
+
+  const getIndexForKey = (key: string) => {
+    const st = groupedSubmissions[key]?.sourceText;
+    if (!st) return 0;
+    const bucketKey = `${st.weekNumber || 0}__${st.category || 'tutorial'}`;
+    const arr = orderedKeysByWeekCategory[bucketKey] || [];
+    const idx = arr.indexOf(key);
+    return idx >= 0 ? idx : 0;
+  };
+
+  const getDisplayTitle = (sourceText: any, index: number, weekNumber: number) => {
+    if (!sourceText) return 'Untitled';
+    if (sourceText.category === 'tutorial' || sourceText.category === 'weekly-practice') {
+      return `Source Text ${index + 1}`;
+    }
+    return sourceText.title || 'Untitled';
+  };
+
+
+
+  const exampleKeys = Object.keys(groupedSubmissions);
+  
+  const filteredExamples = exampleKeys.filter(key => {
+    const example = groupedSubmissions[key];
+    if (!example || !example.sourceText) return false;
+    
+    if (filterCategory !== 'all' && example.sourceText.category !== filterCategory) return false;
+    if (filterWeek !== 'all' && example.sourceText.weekNumber.toString() !== filterWeek) return false;
+    return true;
+  }).sort((a, b) => {
+    const exampleA = groupedSubmissions[a];
+    const exampleB = groupedSubmissions[b];
+    
+    // First sort by week number
+    if (exampleA.sourceText.weekNumber !== exampleB.sourceText.weekNumber) {
+      return exampleA.sourceText.weekNumber - exampleB.sourceText.weekNumber;
+    }
+    
+    // Then sort by category (tutorial first, then weekly-practice)
+    if (exampleA.sourceText.category !== exampleB.sourceText.category) {
+      if (exampleA.sourceText.category === 'tutorial') return -1;
+      if (exampleB.sourceText.category === 'tutorial') return 1;
+    }
+    
+    // Finally, sort within each week/category bucket
+    if (sortBy === 'st-number') {
+      const aNum = extractStNumber(exampleA.sourceText.title);
+      const bNum = extractStNumber(exampleB.sourceText.title);
+      if (aNum !== bNum) return aNum - bNum;
+      const aTime = objectIdTime(exampleA.sourceText._id);
+      const bTime = objectIdTime(exampleB.sourceText._id);
+      if (aTime !== bTime) return aTime - bTime;
+    }
+    // fallback consistent ordering
+    return (exampleA.sourceText.title || '').localeCompare(exampleB.sourceText.title || '');
+  });
+
+  // If current selection is no longer visible under active filters, clear it
+  useEffect(() => {
+    if (selectedExample && !filteredExamples.includes(selectedExample)) {
+      setSelectedExample(null);
+    }
+  }, [selectedExample, filteredExamples, filterCategory, filterWeek, groupedSubmissions]);
+
+  return (
+    <div className="min-h-screen bg-gray-50 py-8">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        {/* Header */}
+        <div className="mb-8">
+          <div className="flex items-center mb-4">
+            <HandThumbUpIcon className="h-8 w-8 text-indigo-600 mr-3" />
+            <h1 className="text-3xl font-bold text-gray-900">Vote Results</h1>
+          </div>
+          <p className="text-gray-600">
+            Vote on your favorite translations for each example. Rank your top 3 choices.
+          </p>
+        </div>
+
+        {/* Instructions */}
+        <div className="mb-6 bg-blue-50 border border-blue-200 rounded-lg p-4">
+          <h3 className="text-lg font-medium text-blue-900 mb-2">How Ranking Works</h3>
+          <div className="text-blue-800 text-sm space-y-2">
+            <p><strong>Voting System:</strong> You can vote for up to 3 translations per example, ranking them 1st, 2nd, and 3rd place.</p>
+            <p><strong>Scoring:</strong> 1st place votes = 3 points, 2nd place votes = 2 points, 3rd place votes = 1 point.</p>
+            <p><strong>Final Score:</strong> Total points from all votes determine the ranking.</p>
+            <p><strong>Voting Rules:</strong> You can only vote once per example, and you can change your votes at any time.</p>
+          </div>
+        </div>
+
+        {/* Filters */}
+        <div className="mb-6 bg-white rounded-lg shadow-sm border border-gray-200 p-4">
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">Category</label>
+              <select
+                value={filterCategory}
+                onChange={(e) => setFilterCategory(e.target.value)}
+                className="w-full px-3 py-2 border border-gray-300 rounded-md"
+              >
+                <option value="all">All Categories</option>
+                <option value="tutorial">Tutorial Tasks</option>
+                <option value="weekly-practice">Weekly Practice</option>
+              </select>
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">Week</label>
+              <select
+                value={filterWeek}
+                onChange={(e) => setFilterWeek(e.target.value)}
+                className="w-full px-3 py-2 border border-gray-300 rounded-md"
+              >
+                <option value="all">All Weeks</option>
+                {[1, 2, 3, 4, 5, 6].map(week => (
+                  <option key={week} value={week.toString()}>Week {week}</option>
+                ))}
+              </select>
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">Sort By</label>
+              <select
+                value={sortBy}
+                onChange={(e) => setSortBy(e.target.value as 'score' | 'votes' | 'st-number')}
+                className="w-full px-3 py-2 border border-gray-300 rounded-md"
+              >
+                <option value="st-number">ST Number</option>
+                <option value="score">Score</option>
+                <option value="votes">Total Votes</option>
+              </select>
+            </div>
+            
+          </div>
+        </div>
+
+        {/* Source Text Selection */}
+        {filteredExamples.length > 0 ? (
+          <div className="mb-6">
+            <h2 className="text-lg font-medium text-gray-900 mb-4">Select a Source Text</h2>
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+              {filteredExamples.map((key) => {
+                const example = groupedSubmissions[key];
+                if (!example || !example.sourceText) {
+                  return null; // Skip rendering if example or sourceText is undefined
+                }
+                const progress = getUserVotingProgress(example.submissions);
+                const weekSpecificIndex = getIndexForKey(key);
+                
+                return (
+                  <button
+                    key={key}
+                    onClick={() => setSelectedExample(key)}
+                    className={`p-4 rounded-lg border-2 text-left transition-colors ${
+                      selectedExample === key
+                        ? 'border-indigo-500 bg-indigo-50'
+                        : 'border-gray-200 bg-white hover:border-gray-300'
+                    }`}
+                  >
+                    <div className="flex items-center justify-between mb-2">
+                      <h3 className="font-medium text-gray-900 font-source-text line-clamp-1">
+                        {getDisplayTitle(example.sourceText, weekSpecificIndex, example.sourceText.weekNumber)}
+                      </h3>
+                      <span className={`text-xs px-2 py-1 rounded ${
+                        example.sourceText.category === 'tutorial' 
+                          ? 'bg-blue-100 text-blue-800' 
+                          : 'bg-green-100 text-green-800'
+                      }`}>
+                        {example.sourceText.category === 'tutorial' ? 'Tutorial' : 'Practice'}
+                      </span>
+                    </div>
+                    <p className="text-sm text-gray-600 line-clamp-2 mb-2">
+                      {example.sourceText.content || 'No content available'}
+                    </p>
+                    <div className="flex items-center justify-between text-xs text-gray-500">
+                      <span>Week {example.sourceText.weekNumber || 'N/A'}</span>
+                      <span>{progress.voted}/3 votes cast</span>
+                    </div>
+                    <div className="mt-2 bg-gray-200 rounded-full h-2">
+                      <div 
+                        className="bg-indigo-600 h-2 rounded-full transition-all"
+                        style={{ width: `${progress.percentage}%` }}
+                      ></div>
+                    </div>
+                  </button>
+                );
+              })}
+            </div>
+          </div>
+        ) : (
+          <div className="mb-6 bg-white rounded-lg shadow-sm border border-gray-200 p-6">
+            <div className="text-center">
+              <h3 className="text-lg font-medium text-gray-900 mb-2">No Examples Found</h3>
+              <p className="text-gray-600">
+                No submissions found for the selected filters. Try adjusting your category or week selection.
+              </p>
+            </div>
+          </div>
+        )}
+
+        {/* Voting Section - show only after a source text is selected and still matches filters */}
+        {selectedExample && filteredExamples.includes(selectedExample) && groupedSubmissions[selectedExample] && groupedSubmissions[selectedExample].submissions && groupedSubmissions[selectedExample].sourceText && (
+          <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
+            <div className="mb-6">
+              <h2 className="text-xl font-semibold text-gray-900 mb-2">
+                {getDisplayTitle(
+                  groupedSubmissions[selectedExample].sourceText,
+                  getIndexForKey(selectedExample),
+                  groupedSubmissions[selectedExample].sourceText.weekNumber
+                )}
+              </h2>
+              <div className="flex items-center space-x-4 text-sm text-gray-600 mb-3">
+                <span className="bg-indigo-100 text-indigo-800 px-2 py-1 rounded">
+                  {groupedSubmissions[selectedExample].sourceText.sourceLanguage || 'Unknown'}
+                </span>
+                <span className={`px-2 py-1 rounded ${
+                  groupedSubmissions[selectedExample].sourceText.category === 'tutorial'
+                    ? 'bg-blue-100 text-blue-800'
+                    : 'bg-green-100 text-green-800'
+                }`}>
+                  {groupedSubmissions[selectedExample].sourceText.category === 'tutorial' ? 'Tutorial' : 'Practice'}
+                </span>
+                <span>Week {groupedSubmissions[selectedExample].sourceText.weekNumber || 'N/A'}</span>
+              </div>
+              <div className="bg-gray-50 rounded-lg p-4">
+                <p className="text-gray-900 font-source-text">{groupedSubmissions[selectedExample].sourceText.content || 'No content available'}</p>
+              </div>
+            </div>
+
+            {/* Search */}
+            <div className="mb-4">
+              <div className="relative">
+                <MagnifyingGlassIcon className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
+                <input
+                  type="text"
+                  placeholder="Search translations..."
+                  value={searchTerm}
+                  onChange={(e) => setSearchTerm(e.target.value)}
+                  className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500"
+                />
+              </div>
+            </div>
+
+            {/* Instructions */}
+            <div className="mb-4 p-4 bg-blue-50 rounded-lg">
+              <p className="text-sm text-blue-800">
+                <strong>Instructions:</strong> Vote for your top 3 favorite translations. Click the vote buttons to rank them (1st, 2nd, 3rd place). 
+                You can change your votes or cancel them by clicking the same button again.
+              </p>
+            </div>
+
+            {/* Translations Grid */}
+            <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+              {getFilteredTranslations(groupedSubmissions[selectedExample]?.submissions).map((submission) => {
+                const availableRanks = getAvailableRanks(groupedSubmissions[selectedExample]?.submissions);
+                
+                return (
+                  <div key={submission._id} className="border border-gray-200 rounded-lg p-4">
+                    <div className="flex items-start justify-between mb-3">
+                      <div className="flex-1">
+                        <p className="text-gray-900 mb-2 font-smiley">{submission.transcreation}</p>
+                        {submission.isGroupSubmission && submission.groupNumber && (
+                          <div className="mb-2">
+                            <span className="inline-block bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">
+                              Group {submission.groupNumber}
+                            </span>
+                          </div>
+                        )}
+
+                        <div className="flex items-center space-x-4 text-xs text-gray-500">
+                          <span>Score: {submission.score}</span>
+                          <span>Votes: {submission.voteCounts['1'] + submission.voteCounts['2'] + submission.voteCounts['3']}</span>
+                        </div>
+                      </div>
+                      
+                      {/* Vote Buttons */}
+                      <div className="flex flex-col space-y-1 ml-4">
+                        {[1, 2, 3].map((rank) => {
+                          const isVoted = submission.hasVoted && submission.userRank === rank;
+                          const isAvailable = !submission.hasVoted && availableRanks.includes(rank);
+                          const isDisabled = !isVoted && !isAvailable;
+                          
+                          return (
+                            <button
+                              key={rank}
+                              onClick={() => handleVote(submission._id, isVoted ? null : rank)}
+                              disabled={isDisabled || voting[submission._id]}
+                              className={`w-8 h-8 rounded-full text-xs font-medium flex items-center justify-center transition-colors ${
+                                isVoted
+                                  ? 'bg-indigo-600 text-white'
+                                  : isAvailable
+                                  ? 'bg-gray-100 text-gray-700 hover:bg-gray-200'
+                                  : 'bg-gray-50 text-gray-400 cursor-not-allowed'
+                              }`}
+                            >
+                              {isVoted ? <XMarkIcon className="h-3 w-3" /> : rank}
+                            </button>
+                          );
+                        })}
+                      </div>
+                    </div>
+                    
+                    {/* Vote Counts */}
+                    <div className="flex items-center space-x-4 text-xs text-gray-500 mt-2">
+                      <span>1st: {submission.voteCounts['1']}</span>
+                      <span>2nd: {submission.voteCounts['2']}</span>
+                      <span>3rd: {submission.voteCounts['3']}</span>
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+
+            {getFilteredTranslations(groupedSubmissions[selectedExample]?.submissions).length === 0 && (
+              <div className="text-center py-8">
+                <p className="text-gray-500">No translations found matching your search criteria.</p>
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* Placeholder when nothing selected or selection filtered out */}
+        {(!selectedExample || !filteredExamples.includes(selectedExample)) && filteredExamples.length > 0 && (
+          <div className="text-center py-12 bg-white rounded-lg border border-gray-200">
+            <p className="text-gray-600">Select a source text above to view detailed vote results.</p>
+          </div>
+        )}
+
+        {filteredExamples.length === 0 && (
+          <div className="text-center py-12">
+            <p className="text-gray-500">No examples available with the selected filters.</p>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default VoteResults; 

client/src/react-app-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="react-scripts" /> 

client/src/services/api.ts

@@ -0,0 +1,95 @@
+import axios from 'axios';
+
+// Create axios instance with base configuration
+// FORCE REBUILD: Fixed double /api issue by removing /api from baseURL
+const api = axios.create({
+  baseURL: 'https://linguabot-transcreation-backend.hf.space',
+  headers: {
+    'Content-Type': 'application/json',
+  },
+  timeout: 10000, // 10 second timeout
+});
+
+// Debug: Log the API URL being used
+console.log('🔧 API CONFIGURATION DEBUG - FIXED DOUBLE /API ISSUE:');
+console.log('API Base URL: https://linguabot-transcreation-backend.hf.space');
+console.log('Environment variables:', {
+  REACT_APP_API_URL: process.env.REACT_APP_API_URL,
+  NODE_ENV: process.env.NODE_ENV
+});
+console.log('Build timestamp:', new Date().toISOString()); // FORCE REBUILD - Video seeking and subtitle syncing
+console.log('🔄 FORCE REBUILD: Admin API routes fixed - should resolve 404 errors');
+console.log('🔄 FORCE REBUILD: Subtitle submissions feature added - new UI and API endpoints');
+
+// Request interceptor to add auth token and user role
+api.interceptors.request.use(
+  (config) => {
+    const token = localStorage.getItem('token');
+    if (token) {
+      config.headers.Authorization = `Bearer ${token}`;
+    }
+    
+    // Add user role and info to headers
+    const user = localStorage.getItem('user');
+    if (user) {
+      try {
+        const userData = JSON.parse(user);
+        config.headers['user-role'] = userData.role || 'visitor';
+        const derivedUsername = userData.username || userData.name || userData.displayName || (userData.email ? String(userData.email).split('@')[0] : undefined);
+        config.headers['user-info'] = JSON.stringify({
+          _id: userData._id || userData.id,
+          username: derivedUsername,
+          name: userData.name,
+          displayName: userData.displayName,
+          email: userData.email,
+          role: userData.role
+        });
+      } catch (error) {
+        config.headers['user-role'] = 'visitor';
+      }
+    }
+    
+    // Debug: Log the actual request URL
+    console.log('🚀 Making API request to:', (config.baseURL || '') + (config.url || ''));
+    console.log('🔑 Auth token:', token ? 'Present' : 'Missing');
+    
+    return config;
+  },
+  (error) => {
+    return Promise.reject(error);
+  }
+);
+
+// Response interceptor to handle errors
+api.interceptors.response.use(
+  (response) => {
+    console.log('✅ API response received:', response.config.url);
+    return response;
+  },
+  (error) => {
+    console.error('❌ API request failed:', error.config?.url, error.message);
+    
+    // Don't auto-redirect for admin operations - let the component handle it
+    if (error.response?.status === 401 && !error.config?.url?.includes('/subtitles/update/')) {
+      // Token expired or invalid - only redirect for non-admin operations
+      localStorage.removeItem('token');
+      localStorage.removeItem('user');
+      window.location.href = '/login';
+    } else if (error.response?.status === 429) {
+      // Rate limit exceeded - retry after delay
+      console.warn('Rate limit exceeded, retrying after delay...');
+      return new Promise(resolve => {
+        setTimeout(() => {
+          resolve(api.request(error.config));
+        }, 2000); // Wait 2 seconds before retry
+      });
+    } else if (error.response?.status === 500) {
+      console.error('Server error:', error.response.data);
+    } else if (error.code === 'ECONNABORTED') {
+      console.error('Request timeout');
+    }
+    return Promise.reject(error);
+  }
+);
+
+export { api }; 

client/tailwind.config.js

@@ -0,0 +1,61 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./src/**/*.{js,jsx,ts,tsx}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        primary: {
+          50: '#eff6ff',
+          100: '#dbeafe',
+          200: '#bfdbfe',
+          300: '#93c5fd',
+          400: '#60a5fa',
+          500: '#3b82f6',
+          600: '#2563eb',
+          700: '#1d4ed8',
+          800: '#1e40af',
+          900: '#1e3a8a',
+        },
+        cultural: {
+          50: '#fefce8',
+          100: '#fef9c3',
+          200: '#fef08a',
+          300: '#fde047',
+          400: '#facc15',
+          500: '#eab308',
+          600: '#ca8a04',
+          700: '#a16207',
+          800: '#854d0e',
+          900: '#713f12',
+        }
+      },
+      fontFamily: {
+        sans: ['Inter', 'system-ui', 'sans-serif'],
+      },
+      animation: {
+        'fade-in': 'fadeIn 0.3s ease-in-out',
+        'slide-in': 'slideIn 0.3s ease-out',
+        'bounce-in': 'bounceIn 0.6s ease-out',
+      },
+      keyframes: {
+        fadeIn: {
+          '0%': { opacity: '0', transform: 'translateY(10px)' },
+          '100%': { opacity: '1', transform: 'translateY(0)' },
+        },
+        slideIn: {
+          '0%': { transform: 'translateX(-100%)' },
+          '100%': { transform: 'translateX(0)' },
+        },
+        bounceIn: {
+          '0%': { transform: 'scale(0.3)', opacity: '0' },
+          '50%': { transform: 'scale(1.05)' },
+          '70%': { transform: 'scale(0.9)' },
+          '100%': { transform: 'scale(1)', opacity: '1' },
+        },
+      },
+    },
+  },
+  plugins: [],
+} 

client/tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "es6"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": [
+    "src"
+  ]
+} 

deploy/README.md

@@ -0,0 +1,45 @@
+# Deployment Instructions
+
+## Backend Deployment (Hugging Face Spaces)
+
+1. Create a new Space on Hugging Face:
+   - Go to https://huggingface.co/spaces
+   - Click "Create new Space"
+   - Choose "Docker" as the SDK
+   - Name: `your-username/transcreation-backend`
+
+2. Upload files from `backend/` folder:
+   - All files in this directory
+   - Dockerfile
+   - package.json and package-lock.json
+
+3. Set Environment Variables:
+   - MONGODB_URI=your_mongodb_atlas_connection_string
+   - NODE_ENV=production
+   - PORT=5000
+
+## Frontend Deployment (Hugging Face Spaces)
+
+1. Create another Space:
+   - Name: `your-username/transcreation-frontend`
+   - Choose "Docker" as the SDK
+
+2. Upload files from `frontend/` folder:
+   - All files in this directory
+   - Dockerfile
+   - nginx.conf
+
+3. Set Environment Variables:
+   - REACT_APP_API_URL=https://your-backend-space-url.hf.space/api
+
+## Database Setup
+
+1. Create MongoDB Atlas account
+2. Create a new cluster
+3. Get your connection string
+4. Add it as MONGODB_URI environment variable
+
+## URLs
+
+- Backend: https://your-username-transcreation-backend.hf.space
+- Frontend: https://your-username-transcreation-frontend.hf.space

deploy/run-seeding.sh

@@ -0,0 +1,46 @@
+#!/bin/bash
+
+echo "🌱 Database Seeding Helper"
+echo "=========================="
+echo ""
+echo "This script will help you seed your deployed backend database."
+echo ""
+
+# Check if backend is responding
+BACKEND_URL="https://linguabot-transcreation-backend.hf.space"
+echo "🔍 Testing backend connection..."
+if curl -s "$BACKEND_URL/health" > /dev/null; then
+    echo "✅ Backend is responding"
+else
+    echo "❌ Backend is not responding. Please check your backend URL."
+    exit 1
+fi
+
+echo ""
+echo "📋 To seed your deployed database, you need to:"
+echo ""
+echo "1. Go to your Hugging Face Space: https://huggingface.co/spaces/linguabot/transcreation-backend"
+echo "2. Go to Settings → Repository secrets"
+echo "3. Make sure you have MONGODB_URI set with your MongoDB Atlas connection string"
+echo ""
+echo "4. Upload the seed-database.js file to your backend Space"
+echo "5. Go to the Space's terminal and run:"
+echo "   npm run seed"
+echo ""
+echo "5. Or if you prefer, you can run it directly:"
+echo "   node seed-database.js"
+echo ""
+echo "📊 This will create:"
+echo "  👤 Admin user: admin@example.com / admin123"
+echo "  👤 Student user: student@example.com / student123"
+echo "  📚 Tutorial tasks: 3 tasks for Week 1"
+echo "  📝 Weekly practice: 6 tasks for Week 1"
+echo "  📖 Practice examples: 4 examples"
+echo ""
+echo "🔗 After seeding, you can:"
+echo "  1. Log in with admin@example.com / admin123"
+echo "  2. Log in with student@example.com / student123"
+echo "  3. View tutorial tasks and weekly practice"
+echo "  4. Create submissions and test the voting system"
+echo ""
+echo "⚠️  Note: Make sure your MONGODB_URI environment variable is set correctly in your Space settings." 

deploy/seed-deployed-database.sh

@@ -0,0 +1,44 @@
+#!/bin/bash
+
+echo "🌱 Seeding Deployed Database"
+echo "=============================="
+echo ""
+echo "This script will help you seed your deployed backend database with initial data."
+echo ""
+
+# Check if we have the backend URL
+BACKEND_URL="https://linguabot-transcreation-backend.hf.space"
+
+echo "🔍 Testing backend connection..."
+if curl -s "$BACKEND_URL/health" > /dev/null; then
+    echo "✅ Backend is responding"
+else
+    echo "❌ Backend is not responding. Please check your backend URL."
+    exit 1
+fi
+
+echo ""
+echo "📋 To seed your deployed database, you need to:"
+echo ""
+echo "1. Go to your Hugging Face Space: https://huggingface.co/spaces/linguabot/transcreation-backend"
+echo "2. Go to Settings → Repository secrets"
+echo "3. Make sure you have MONGODB_URI set with your MongoDB Atlas connection string"
+echo ""
+echo "4. Then run this command in your backend Space's terminal:"
+echo "   npm run seed"
+echo ""
+echo "5. Or manually run:"
+echo "   node seed-data.js"
+echo ""
+echo "📝 This will create:"
+echo "   - Admin user: admin@example.com / admin123"
+echo "   - Student user: student@example.com / student123"
+echo "   - Tutorial tasks for Week 1"
+echo "   - Weekly practice tasks for all 6 weeks"
+echo ""
+echo "🔗 After seeding, you can:"
+echo "   - Log in with the test accounts"
+echo "   - See tutorial tasks and weekly practice content"
+echo "   - Create submissions and test the voting system"
+echo ""
+echo "Would you like to proceed with the seeding instructions above?" 

docker-compose.yml

@@ -0,0 +1,30 @@
+version: '3.8'
+
+services:
+  backend:
+    build:
+      context: .
+      dockerfile: Dockerfile
+    ports:
+      - "5000:5000"
+    environment:
+      - NODE_ENV=production
+      - PORT=5000
+      - MONGODB_URI=${MONGODB_URI}
+    healthcheck:
+      test: ["CMD", "curl", "-f", "http://localhost:5000/api/health"]
+      interval: 30s
+      timeout: 10s
+      retries: 3
+      start_period: 40s
+
+  frontend:
+    build:
+      context: .
+      dockerfile: client/Dockerfile
+    ports:
+      - "80:80"
+    depends_on:
+      - backend
+    environment:
+      - REACT_APP_API_URL=http://localhost:5000/api 

nginx.conf

@@ -0,0 +1,67 @@
+# Disable PID file to avoid permission issues
+pid /dev/null;
+events {
+    worker_connections 1024;
+}
+
+http {
+    include       /etc/nginx/mime.types;
+    default_type  application/octet-stream;
+
+    # Logging
+    log_format main '$remote_addr - $remote_user [$time_local] "$request" '
+                    '$status $body_bytes_sent "$http_referer" '
+                    '"$http_user_agent" "$http_x_forwarded_for"';
+
+    access_log /var/log/nginx/access.log main;
+    error_log /var/log/nginx/error.log;
+
+    # Gzip compression
+    gzip on;
+    gzip_vary on;
+    gzip_min_length 1024;
+    gzip_proxied any;
+    gzip_comp_level 6;
+    gzip_types
+        text/plain
+        text/css
+        text/xml
+        text/javascript
+        application/json
+        application/javascript
+        application/xml+rss
+        application/atom+xml
+        image/svg+xml;
+
+    server {
+        listen 7860;
+        server_name localhost;
+        root /usr/share/nginx/html;
+        index index.html;
+
+        # Security headers
+        add_header X-Frame-Options "SAMEORIGIN" always;
+        add_header X-XSS-Protection "1; mode=block" always;
+        add_header X-Content-Type-Options "nosniff" always;
+        add_header Referrer-Policy "no-referrer-when-downgrade" always;
+        add_header Content-Security-Policy "default-src 'self' http: https: data: blob: 'unsafe-inline'" always;
+
+        # Handle React Router
+        location / {
+            try_files $uri $uri/ /index.html;
+        }
+
+        # Cache static assets
+        location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
+            expires 1y;
+            add_header Cache-Control "public, immutable";
+        }
+
+        # Health check
+        location /health {
+            access_log off;
+            return 200 "healthy\n";
+            add_header Content-Type text/plain;
+        }
+    }
+} 

package.json

@@ -0,0 +1,19 @@
+{
+  "name": "transcreation-sandbox",
+  "version": "1.0.0",
+  "description": "A web-based tool for postgraduate translation students to practice transcreation and intercultural mediation",
+  "main": "server/index.js",
+  "scripts": {
+    "dev": "concurrently \"npm run server\" \"npm run client\"",
+    "server": "cd server && npm run dev",
+    "client": "cd client && npm start",
+    "build": "cd client && npm run build",
+    "install-all": "npm install && cd server && npm install && cd ../client && npm install"
+  },
+  "keywords": ["translation", "transcreation", "cultural-mediation", "education"],
+  "author": "Transcreation Sandbox Team",
+  "license": "MIT",
+  "devDependencies": {
+    "concurrently": "^8.2.2"
+  }
+}