feat: hide dashboard sections for modules the user cannot access

Only fetch data and render stat cards, lists, and widgets for modules
the user has enabled (marketing, projects, finance).

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

.gitea/workflows/deploy.yml

@@ -0,0 +1,29 @@
+name: Deploy
+
+on:
+  push:
+    branches: [main]
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+
+      - name: Build frontend
+        run: cd client && npm ci && npm run build
+
+      - name: Deploy to app directory
+        run: |
+          rsync -a --delete client/dist/ /opt/apps/marketing-app/client/dist/
+          rsync -a server/ /opt/apps/marketing-app/server/ --exclude node_modules --exclude '*.db' --exclude uploads --exclude .env
+
+      - name: Install production deps
+        run: cd /opt/apps/marketing-app/server && npm ci --production
+
+      - name: Restart service
+        run: sudo systemctl restart marketing-app

CLAUDE.md

@@ -0,0 +1,79 @@
+# Marketing App - Project Context
+
+## Tech Stack
+- **Frontend:** React (Vite), Tailwind CSS, Lucide icons
+- **Backend:** Express.js, NocoDB (database via REST API), SQLite (auth)
+- **Key patterns:** `api.js` normalizes NocoDB responses (snake_case + camelCase aliases, Id/id/_id). SlidePanel uses createPortal. AppContext provides brands/teamMembers. AuthContext provides user/permissions/canEditResource/canDeleteResource.
+
+## Architecture Notes
+- NocoDB uses `Id` (capital I) as primary key, `CreatedAt`/`UpdatedAt` timestamps
+- `ensureRequiredTables()` only creates NEW tables — skips existing ones
+- `ensureFKColumns()` adds Number columns to existing tables (FK_COLUMNS map)
+- `ensureTextColumns()` adds text/other columns to existing tables (TEXT_COLUMNS map)
+- Column migrations run on every server restart in `startServer()`
+
+## Current State / Known Issues
+
+### CRITICAL: Approvers on Artefacts — NOT YET WORKING
+The `approver_ids` column (SingleLineText, comma-separated user IDs) may not exist in the NocoDB Artefacts table. Symptoms: approvers selected in the UI don't persist when panel is closed and reopened.
+
+**Diagnosis steps added:**
+1. Server startup now lists ALL Artefacts table columns and auto-creates missing ones (`approver_ids`, `project_id`, `campaign_id`)
+2. `POST /artefacts` logs the approver_ids being sent and what NocoDB returns
+3. `PATCH /artefacts/:id` logs the update data and the re-read value
+4. `ensureTextColumns()` now logs success/failure for each column creation
+
+**What to check:** Restart the server and look at terminal output:
+- If `approver_ids` is listed in columns → column exists, issue is elsewhere
+- If `⚠ MISSING column` appears → column was missing, should be auto-created now
+- PATCH logs show if the value persists after write (`After re-read: approver_ids=...`)
+
+**Root cause:** `ensureRequiredTables()` (line ~310) skips existing tables entirely (`if (existingTables.has(tableName)) continue`). The `approver_ids` column was added to REQUIRED_TABLES schema but the Artefacts table already existed, so the column was never created. Fixed by adding to TEXT_COLUMNS and adding a belt-and-suspenders check at startup.
+
+### Recently Completed Features
+
+#### Artefacts Page
+- Grid + List view toggle with sorting (recently updated, newest, oldest, title A-Z)
+- Filters: brand, status, type, creator, project, campaign
+- Project and Campaign assignment (dropdowns in create modal + detail panel)
+- Approver multi-select (ApproverMultiSelect component at bottom of Artefacts.jsx)
+- **Save Draft** button in detail panel header (saves title + description)
+- **Delete** button in detail panel header (with permission check via canDeleteResource)
+- Editable title (inline input in header) and description (textarea) in detail panel
+- Language picker for copy artefacts uses predefined list: Arabic (AR), English (EN), French (FR), Bahasa Indonesia (ID)
+- Auto-opens detail panel after creating an artefact
+
+#### Issues Page
+- Board (kanban) + List view toggle with drag-and-drop
+- 5 status columns: New, Acknowledged, In Progress, Resolved, Declined
+- IssueCard component (`client/src/components/IssueCard.jsx`)
+- Inline filters (always visible, no toggle button)
+- Status count cards work as quick-filter buttons
+
+#### AuthContext
+- Added `artefact` type to `canEditResource` and `canDeleteResource` (uses `canEditAnyPost`/`canDeleteAnyPost` permissions + isOwner)
+
+#### Server
+- Artefacts schema has: project_id, campaign_id, approver_ids columns
+- GET/POST/PATCH /artefacts routes handle project_id, campaign_id, approver_ids with name enrichment
+- Issues PATCH supports brand_id (bug fix)
+- FK_COLUMNS includes `Artefacts: ['project_id', 'campaign_id']`
+- TEXT_COLUMNS includes `Artefacts: [{ name: 'approver_ids', uidt: 'SingleLineText' }]`
+
+#### i18n
+- Added 12+ keys to both en.json and ar.json for issues board/list and artefacts grid/list/filters/sorting
+
+## Key Files
+- `server/server.js` — all API routes, schema definitions, migrations
+- `server/nocodb.js` — NocoDB client wrapper
+- `client/src/pages/Artefacts.jsx` — artefacts page + ArtefactDetailPanel + ApproverMultiSelect
+- `client/src/pages/Issues.jsx` — issues page with board + list views
+- `client/src/components/IssueCard.jsx` — card component for issues kanban
+- `client/src/contexts/AuthContext.jsx` — auth, permissions, ownership checks
+- `client/src/utils/api.js` — API client with normalize function
+- `client/src/i18n/en.json` / `ar.json` — translations
+
+## Debugging Tips
+- Console logs prefixed with `[POST /artefacts]` and `[PATCH /artefacts/:id]` show approver data flow
+- Startup logs show all Artefacts table columns and missing column auto-creation
+- NocoDB silently ignores writes to non-existent columns (no error thrown) — this is why approvers appear to save but don't persist

DEPLOYMENT_PLAN.md

@@ -0,0 +1,324 @@
+# Marketing App — Deployment Plan
+
+## Architecture
+
+| Server | Role | What runs |
+|--------|------|-----------|
+| **Server A** (Hetzner, Ubuntu 24.04) | Frontends + Express backends | Nginx, act_runner, marketing-app, hihala-dashboard, other apps |
+| **Server B** (Hetzner, Cloudron) | Data layer + Git | Cloudron, NocoDB, Gitea |
+
+```
+Server B (Cloudron)                   Server A (Ubuntu 24.04)
+┌──────────────────────┐              ┌──────────────────────────────┐
+│  Gitea (git repos)   │◄── register ─│  act_runner (Gitea runner)   │
+│  NocoDB (databases)  │              │  Nginx                       │
+│                      │── webhook ──►│  marketing-app  (systemd)    │
+│                      │              │  hihala-dashboard (systemd)   │
+└──────────────────────┘              └──────────────────────────────┘
+```
+
+Flow: `local dev → git push → Gitea (Server B) → triggers runner on Server A → build + deploy`
+
+---
+
+## Phase 0 — Secure Server A (Ubuntu 24.04)
+
+### 0.1 Create non-root user (if still logging in as root)
+
+```bash
+adduser fahed
+usermod -aG sudo fahed
+
+mkdir -p /home/fahed/.ssh
+cp /root/.ssh/authorized_keys /home/fahed/.ssh/authorized_keys
+chown -R fahed:fahed /home/fahed/.ssh
+chmod 700 /home/fahed/.ssh
+chmod 600 /home/fahed/.ssh/authorized_keys
+```
+
+Test in a **new terminal** before continuing: `ssh fahed@server-a`
+
+### 0.2 Lock down SSH
+
+Edit `/etc/ssh/sshd_config`:
+
+```
+PermitRootLogin no
+PasswordAuthentication no
+PubkeyAuthentication yes
+MaxAuthTries 3
+AllowUsers fahed
+```
+
+```bash
+sudo systemctl restart sshd
+```
+
+Test in a **new terminal** before closing your current session.
+
+### 0.3 Firewall (ufw)
+
+```bash
+sudo ufw default deny incoming
+sudo ufw default allow outgoing
+sudo ufw allow 22/tcp     # SSH
+sudo ufw allow 80/tcp     # HTTP (certbot + redirect)
+sudo ufw allow 443/tcp    # HTTPS
+sudo ufw enable
+sudo ufw status
+```
+
+### 0.4 Automatic security updates
+
+```bash
+sudo apt install -y unattended-upgrades
+sudo dpkg-reconfigure -plow unattended-upgrades
+```
+
+Select **Yes**.
+
+### 0.5 Fail2ban
+
+```bash
+sudo apt install -y fail2ban
+sudo systemctl enable --now fail2ban
+```
+
+### 0.6 Disable unused services
+
+```bash
+sudo ss -tlnp
+# Disable anything unexpected:
+# sudo systemctl disable --now <service-name>
+```
+
+Server B (Cloudron) handles its own security.
+
+---
+
+## Phase 1 — Server B (Cloudron)
+
+1. Install **Gitea** from Cloudron app store → `https://gitea.yourdomain.com`
+2. Install **NocoDB** from Cloudron app store → `https://nocodb.yourdomain.com`
+3. On NocoDB: create a base for marketing-app, generate an API token
+4. On Gitea: create a repo `marketing-app`, push your local code to it
+5. On Gitea: go to **Site Admin → Runners** and copy the runner registration token
+
+---
+
+## Phase 2 — Server A (Ubuntu 24.04)
+
+### 2.1 Install dependencies
+
+```bash
+curl -fsSL https://deb.nodesource.com/setup_20.x | sudo bash -
+sudo apt install -y nodejs nginx certbot python3-certbot-nginx
+```
+
+### 2.2 Create app directory
+
+```bash
+sudo mkdir -p /opt/apps/marketing-app
+sudo chown fahed:fahed /opt/apps/marketing-app
+```
+
+### 2.3 Create .env file (set once, never touched by deploys)
+
+```
+# /opt/apps/marketing-app/server/.env
+NOCODB_URL=https://nocodb.yourdomain.com
+NOCODB_TOKEN=<token-from-step-3>
+NOCODB_BASE_ID=<base-id-from-step-3>
+SESSION_SECRET=<generate-with: openssl rand -hex 32>
+CORS_ORIGIN=https://marketing.yourdomain.com
+NODE_ENV=production
+```
+
+### 2.4 Install and register Gitea runner
+
+```bash
+sudo wget https://gitea.com/gitea/act_runner/releases/latest/download/act_runner-linux-amd64 -O /usr/local/bin/act_runner
+sudo chmod +x /usr/local/bin/act_runner
+mkdir -p /opt/gitea-runner && cd /opt/gitea-runner
+act_runner register \
+  --instance https://gitea.yourdomain.com \
+  --token <token-from-phase-1-step-5> \
+  --name server-a \
+  --labels ubuntu-latest:host
+```
+
+### 2.5 systemd service for the runner
+
+```ini
+# /etc/systemd/system/gitea-runner.service
+[Unit]
+Description=Gitea Actions Runner
+After=network.target
+
+[Service]
+Type=simple
+User=fahed
+WorkingDirectory=/opt/gitea-runner
+ExecStart=/usr/local/bin/act_runner daemon
+Restart=always
+RestartSec=5
+
+[Install]
+WantedBy=multi-user.target
+```
+
+```bash
+sudo systemctl enable --now gitea-runner
+```
+
+### 2.6 systemd service for marketing-app
+
+```ini
+# /etc/systemd/system/marketing-app.service
+[Unit]
+Description=Marketing App
+After=network.target
+
+[Service]
+Type=simple
+User=fahed
+WorkingDirectory=/opt/apps/marketing-app/server
+ExecStart=/usr/bin/node server.js
+Restart=always
+RestartSec=5
+EnvironmentFile=/opt/apps/marketing-app/server/.env
+
+[Install]
+WantedBy=multi-user.target
+```
+
+```bash
+sudo systemctl enable marketing-app
+```
+
+### 2.7 Allow passwordless restart for deploys
+
+```
+# /etc/sudoers.d/gitea-runner
+fahed ALL=(ALL) NOPASSWD: /usr/bin/systemctl restart marketing-app
+fahed ALL=(ALL) NOPASSWD: /usr/bin/systemctl restart hihala-dashboard
+```
+
+### 2.8 DNS
+
+Point `marketing.yourdomain.com` to Server A's IP.
+
+### 2.9 Nginx vhost
+
+```nginx
+# /etc/nginx/sites-available/marketing-app
+server {
+    listen 443 ssl;
+    server_name marketing.yourdomain.com;
+
+    ssl_certificate     /etc/letsencrypt/live/marketing.yourdomain.com/fullchain.pem;
+    ssl_certificate_key /etc/letsencrypt/live/marketing.yourdomain.com/privkey.pem;
+
+    location /api/ {
+        proxy_pass http://127.0.0.1:3001;
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
+        client_max_body_size 50M;
+    }
+
+    location / {
+        root /opt/apps/marketing-app/client/dist;
+        try_files $uri $uri/ /index.html;
+    }
+}
+
+server {
+    listen 80;
+    server_name marketing.yourdomain.com;
+    return 301 https://$host$request_uri;
+}
+```
+
+```bash
+sudo ln -s /etc/nginx/sites-available/marketing-app /etc/nginx/sites-enabled/
+sudo certbot --nginx -d marketing.yourdomain.com
+sudo nginx -t && sudo systemctl reload nginx
+```
+
+---
+
+## Phase 3 — CI/CD Pipeline
+
+### 3.1 Add workflow file to repo
+
+```yaml
+# .gitea/workflows/deploy.yml
+name: Deploy
+on:
+  push:
+    branches: [main]
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+
+      - name: Build frontend
+        run: cd client && npm ci && npm run build
+
+      - name: Deploy to app directory
+        run: |
+          rsync -a --delete client/dist/ /opt/apps/marketing-app/client/dist/
+          rsync -a server/ /opt/apps/marketing-app/server/ \
+            --exclude node_modules --exclude '*.db' --exclude uploads --exclude .env
+
+      - name: Install production deps
+        run: cd /opt/apps/marketing-app/server && npm ci --production
+
+      - name: Restart service
+        run: sudo systemctl restart marketing-app
+```
+
+### 3.2 Add Gitea remote and push
+
+```bash
+cd ~/clawd/projects/marketing-app
+git remote add gitea https://gitea.yourdomain.com/fahed/marketing-app.git
+git push gitea main
+```
+
+---
+
+## Phase 4 — Verify
+
+1. Watch the runner: `journalctl -u gitea-runner -f`
+2. Watch the app: `journalctl -u marketing-app -f`
+3. Open `https://marketing.yourdomain.com`
+4. Test: login, create an artefact, upload a file
+
+---
+
+## Code changes already made (in server.js)
+
+- Session secret reads from `process.env.SESSION_SECRET` with `'dev-fallback-secret'` fallback
+- CORS locks to `process.env.CORS_ORIGIN` in production, open locally
+- Cookie `secure: true` when `NODE_ENV=production`
+- `trust proxy` enabled when `NODE_ENV=production`
+- Static file serving of `client/dist/` + SPA fallback when `NODE_ENV=production`
+
+---
+
+## Adding another app later (e.g. hihala-dashboard)
+
+Repeat phases 1.3-1.4, 2.2-2.3, 2.6, 2.8-2.9, 3.1-3.2 with:
+- Different port (3002)
+- Different subdomain (hihala.yourdomain.com)
+- Different systemd service name (hihala-dashboard)
+- Same runner handles all repos

TESTING_GUIDE.md

@@ -0,0 +1,386 @@
+# UI/UX Improvements - Testing Guide
+
+## Quick Start
+
+1. **Start the app**:
+   ```bash
+   cd /home/fahed/clawd/marketing-app
+   ./start.sh
+   ```
+
+2. **Access the app**:
+   - Open browser: `http://localhost:5173`
+   - Login with your credentials
+
+---
+
+## Test Scenarios
+
+### 1. Toast Notifications 🍞
+
+#### Post Operations
+1. Go to **Post Production** page
+2. Click **"New Post"**
+3. Fill in title, select brand, platform
+4. Click **"Create Post"**
+   - ✅ Should see: Green success toast "Post created successfully!"
+5. Click a post to edit
+6. Change the title
+7. Click **"Save Changes"**
+   - ✅ Should see: Green success toast "Post updated successfully!"
+8. Drag a post to **"Published"** column (without publication links)
+   - ✅ Should see: Red error toast
+9. Click a post, click **"Delete"**, confirm
+   - ✅ Should see: Green success toast "Post deleted successfully!"
+
+#### Task Operations
+1. Go to **Tasks** page
+2. Click **"New Task"**
+3. Fill in title
+4. Click **"Create Task"**
+   - ✅ Should see: Green success toast "Task created successfully!"
+5. Drag a task from "To Do" to "In Progress"
+   - ✅ Should see: Green success toast "Task status updated!"
+
+#### Multiple Toasts
+1. Quickly create 3 tasks in a row
+   - ✅ Should see: 3 toasts stacked on top of each other
+   - ✅ Each should auto-dismiss after 4 seconds
+
+---
+
+### 2. Loading States ⏳
+
+#### Dashboard
+1. **Refresh the page** while on Dashboard
+   - ✅ Should see: Skeleton loaders for:
+     - Welcome message
+     - 4 stat cards
+     - Recent posts list
+     - Upcoming deadlines list
+   - ✅ After loading: Smooth fade to actual content
+
+#### Posts (Kanban View)
+1. Go to **Post Production**
+2. **Refresh the page**
+   - ✅ Should see: 5-column skeleton board with card placeholders
+   - ✅ After loading: Posts appear in correct columns
+
+#### Posts (List View)
+1. Click the **List view** icon
+2. **Refresh the page**
+   - ✅ Should see: Table skeleton with 6 columns
+   - ✅ After loading: Table rows appear
+
+#### Tasks
+1. Go to **Tasks** page
+2. **Refresh the page**
+   - ✅ Should see: Skeleton kanban board
+   - ✅ After loading: Tasks appear in columns
+
+---
+
+### 3. Empty States 🗂️
+
+#### No Posts
+1. Go to **Post Production**
+2. Delete all posts (or use filters to hide all)
+3. With **no posts at all**:
+   - ✅ Should see: Empty state with:
+     - FileText icon
+     - "No posts" title
+     - Helpful description
+     - **"Create Post"** button
+4. Click the button
+   - ✅ Should open: Create post modal
+
+#### Posts Filtered (No Results)
+1. Select a brand filter that has no posts
+   - ✅ Should see: Empty state with:
+     - "No posts found" title
+     - "Try different filter" description
+     - **"Clear Filters"** button
+2. Click the button
+   - ✅ Should clear: All filters
+
+#### No Tasks
+1. Go to **Tasks** page
+2. Delete all tasks
+   - ✅ Should see: Empty state with:
+     - CheckSquare icon
+     - "No tasks yet" title
+     - **"Create Task"** button
+
+#### Tasks Filtered (No Results)
+1. Select **"Assigned to Me"** filter (if you have no tasks assigned)
+   - ✅ Should see: Empty state with:
+     - "No tasks match this filter" title
+     - **"Clear Filters"** button
+
+---
+
+### 4. Micro-interactions ✨
+
+#### Button Hover Effects
+1. Hover over **any button**
+   - ✅ Should see: Button lifts slightly (`-1px`)
+   - ✅ Should see: Subtle shadow appears
+2. Click and hold a button
+   - ✅ Should see: Button presses down (scale `0.98`)
+
+#### Card Hover Effects
+1. Hover over a **PostCard** (in Kanban view)
+   - ✅ Should see: 
+     - Card lifts up (`-3px`)
+     - Shadow becomes more prominent
+     - Smooth transition
+2. Hover over a **TaskCard**
+   - ✅ Should see: Same elevation effect
+   - ✅ Should see: Quick action button appears
+
+#### Stat Card Animation
+1. Go to **Dashboard**
+2. **Refresh the page**
+   - ✅ Should see: 4 stat cards animate in with stagger effect
+   - ✅ Each card appears 50ms after the previous one
+
+#### Focus States
+1. Press **Tab** repeatedly to navigate
+   - ✅ Should see: Blue outline (focus ring) on each element
+   - ✅ Ring should be 2px wide with 2px offset
+2. Navigate to any input field
+3. Press **Tab**
+   - ✅ Should see: Focus ring around input
+
+---
+
+### 5. Form UX 📝
+
+#### Loading Button State
+1. Go to **Post Production**
+2. Click **"New Post"**
+3. Fill in title
+4. Click **"Create Post"**
+   - ✅ During save: Button shows spinner (text disappears)
+   - ✅ Button is disabled (no double-click possible)
+   - ✅ After save: Button returns to normal, modal closes
+
+#### Same for Tasks
+1. Create a task
+   - ✅ Save button shows loading spinner
+   - ✅ Cannot submit twice
+
+#### Input Focus States
+1. Click any input field
+   - ✅ Should see: Blue border and ring effect
+2. Hover over an input (without clicking)
+   - ✅ Should see: Border color changes slightly
+
+---
+
+### 6. Card Improvements 🎴
+
+#### PostCard Visual Hierarchy
+1. Look at posts in **Kanban view**
+   - ✅ Title is prominent (larger, bold)
+   - ✅ Metadata is subtle (smaller, gray)
+   - ✅ Platforms shown with icons
+   - ✅ Brand badge clearly visible
+2. Hover over a card
+   - ✅ Quick action buttons appear
+   - ✅ Card elevates smoothly
+
+#### TaskCard Visual Hierarchy
+1. Look at tasks
+   - ✅ Priority dot is visible (left side, colored)
+   - ✅ Title is clear
+   - ✅ "From:" label for tasks assigned by others
+   - ✅ "Assigned to:" label for tasks you delegated
+   - ✅ Due date with clock icon
+2. Look for **overdue tasks**
+   - ✅ Due date should be red
+
+---
+
+### 7. Accessibility ♿
+
+#### Keyboard Navigation
+1. Press **Tab** to navigate through the page
+   - ✅ Tab order is logical
+   - ✅ All interactive elements can be reached
+   - ✅ Focus is visible at all times
+2. Open a modal
+3. Press **Escape**
+   - ✅ Modal closes
+4. Open a dropdown/select
+5. Use **Arrow keys** to navigate options
+   - ✅ Should work
+
+#### Screen Reader (Optional)
+1. Enable screen reader (VoiceOver on Mac, NVDA on Windows)
+2. Navigate the page
+   - ✅ All text is read correctly
+   - ✅ Buttons are labeled
+   - ✅ Form labels are associated with inputs
+
+#### Color Contrast
+1. Look at all text elements
+   - ✅ Text is readable (WCAG AA compliant)
+   - ✅ Status badges have good contrast
+   - ✅ Buttons have clear text
+
+---
+
+### 8. RTL & i18n 🌍
+
+#### Switch to Arabic
+1. Go to **Settings**
+2. Select **Arabic** language
+3. Check:
+   - ✅ All text switches to Arabic
+   - ✅ Layout flips (RTL)
+   - ✅ Toasts appear on correct side
+   - ✅ All new features have Arabic translations
+
+#### Toast Messages in Arabic
+1. Create a post
+   - ✅ Toast shows: "تم إنشاء المنشور بنجاح!"
+2. Update a task
+   - ✅ Toast shows: "تم تحديث المهمة بنجاح!"
+
+---
+
+## Visual Checklist
+
+### ✅ Toast System
+- [ ] Success toasts are green
+- [ ] Error toasts are red
+- [ ] Warning toasts are amber
+- [ ] Info toasts are blue
+- [ ] Toasts have icons
+- [ ] Toasts auto-dismiss
+- [ ] Multiple toasts stack
+- [ ] Manual close works
+
+### ✅ Loading States
+- [ ] Dashboard skeleton matches layout
+- [ ] Posts skeleton (Kanban) shows 5 columns
+- [ ] Posts skeleton (List) shows table
+- [ ] Tasks skeleton shows 3 columns
+- [ ] Smooth transition to content
+
+### ✅ Empty States
+- [ ] Posts empty state has icon
+- [ ] Posts empty state has CTA
+- [ ] Tasks empty state has icon
+- [ ] Tasks empty state has CTA
+- [ ] Filtered empty states offer clear filters
+- [ ] Messages are helpful and friendly
+
+### ✅ Micro-interactions
+- [ ] Buttons lift on hover
+- [ ] Buttons press on click
+- [ ] Cards elevate on hover
+- [ ] Stat cards stagger animate
+- [ ] Focus rings are visible
+- [ ] Smooth transitions everywhere
+
+### ✅ Forms
+- [ ] Save buttons show loading
+- [ ] Buttons disable during save
+- [ ] No double-submission
+- [ ] Focus states work
+- [ ] Required fields marked
+
+### ✅ Cards
+- [ ] PostCard has hover effect
+- [ ] TaskCard has hover effect
+- [ ] Visual hierarchy is clear
+- [ ] Quick actions appear on hover
+
+### ✅ Accessibility
+- [ ] Tab navigation works
+- [ ] Focus is always visible
+- [ ] Escape closes modals
+- [ ] Color contrast is good
+- [ ] Labels are descriptive
+
+### ✅ i18n
+- [ ] Arabic translation complete
+- [ ] RTL layout works
+- [ ] Toasts in correct language
+
+---
+
+## Performance Check
+
+### Page Load Times
+- Dashboard: Should load < 1 second
+- Posts: Should load < 1 second
+- Tasks: Should load < 1 second
+
+### Animation Smoothness
+- All animations should be smooth (60fps)
+- No jank or stuttering
+- Hover effects are instant
+
+### Network (DevTools)
+1. Open DevTools → Network tab
+2. Refresh the page
+3. Check:
+   - Total bundle size reasonable
+   - No errors
+   - API calls complete quickly
+
+---
+
+## Common Issues & Solutions
+
+### Issue: Toasts don't appear
+- **Check**: Is ToastProvider wrapping the app in App.jsx?
+- **Check**: Is `useToast()` called inside a component within ToastProvider?
+
+### Issue: Skeletons don't show
+- **Check**: Is the loading state properly set before data fetch?
+- **Check**: Are skeleton components imported correctly?
+
+### Issue: Animations are choppy
+- **Check**: Browser hardware acceleration enabled?
+- **Check**: Too many elements animating at once?
+
+### Issue: Focus ring not visible
+- **Check**: Browser default focus outline not overridden?
+- **Check**: CSS for focus-visible applied?
+
+### Issue: RTL layout broken
+- **Check**: All directional CSS uses logical properties?
+- **Check**: Icons/images flipped correctly?
+
+---
+
+## Reporting Issues
+
+If you find any issues:
+
+1. **Note the exact steps** to reproduce
+2. **Take a screenshot** if visual
+3. **Check browser console** for errors
+4. **Note browser** and version
+
+---
+
+## Success Criteria
+
+The app passes if:
+- ✅ All toast scenarios work
+- ✅ All loading states appear correctly
+- ✅ All empty states are helpful
+- ✅ Animations are smooth
+- ✅ Forms provide feedback
+- ✅ Cards look polished
+- ✅ Accessibility features work
+- ✅ i18n is complete
+
+---
+
+**Happy Testing! 🎉**

UI_UX_IMPROVEMENTS.md

@@ -0,0 +1,401 @@
+# UI/UX Improvements Summary
+
+## Overview
+Comprehensive UI/UX enhancements to the marketing app focusing on user feedback, loading states, empty states, micro-interactions, and accessibility.
+
+---
+
+## 1. Toast Notification System ✅
+
+### Components Created
+- **`Toast.jsx`** - Individual toast component with 4 types (success, error, info, warning)
+- **`ToastContainer.jsx`** - Global toast provider with context API
+
+### Features
+- Auto-dismiss after 4 seconds (configurable)
+- Smooth slide-in animation
+- Color-coded by type (green/red/blue/amber)
+- Icon indicators for each type
+- Manual close button
+- Fixed position (top-right)
+- Stacking support for multiple toasts
+
+### Integration
+- Wrapped app in `<ToastProvider>` in `App.jsx`
+- Added toast notifications for:
+  - Post create/update/delete operations
+  - Task create/update/delete operations
+  - Status changes (post/task moved)
+  - Attachment operations
+  - Error states
+
+### Usage Example
+```jsx
+import { useToast } from '../components/ToastContainer'
+
+const toast = useToast()
+toast.success('Post created successfully!')
+toast.error('Failed to save. Please try again.')
+```
+
+---
+
+## 2. Loading States & Skeleton Loaders ✅
+
+### Components Created
+- **`SkeletonLoader.jsx`** - Reusable skeleton components:
+  - `SkeletonCard` - Generic card skeleton
+  - `SkeletonStatCard` - Stat card skeleton
+  - `SkeletonTable` - Table skeleton with configurable rows/cols
+  - `SkeletonKanbanBoard` - Kanban board skeleton (5 columns)
+  - `SkeletonDashboard` - Complete dashboard skeleton
+
+### Features
+- Pulse animation effect
+- Matches actual component layouts
+- Responsive design
+- Smooth transition from skeleton to content
+
+### Integration
+- **Dashboard**: Uses `SkeletonDashboard` while loading
+- **PostProduction**: Uses `SkeletonKanbanBoard` or `SkeletonTable` based on view
+- **Tasks**: Uses skeleton loaders for initial data fetch
+
+---
+
+## 3. Empty States ✅
+
+### Component Created
+- **`EmptyState.jsx`** - Reusable empty state component
+
+### Features
+- Icon support (Lucide icons)
+- Title and description
+- Primary and secondary action buttons
+- Compact mode for inline use
+- Helpful call-to-actions
+
+### Integration
+- **PostProduction**:
+  - No posts: "Create your first post" CTA
+  - Filtered but no results: "Clear Filters" option
+- **Tasks**:
+  - No tasks: "Create Task" CTA
+  - Filtered but no results: "Clear Filters" option
+- **Dashboard**: Empty state messages for posts/deadlines lists
+
+### Features
+- Friendly messaging
+- Action-oriented CTAs
+- Context-aware (different messages for empty vs filtered)
+
+---
+
+## 4. Micro-interactions ✅
+
+### CSS Enhancements in `index.css`
+- **Button animations**:
+  - Hover: subtle lift (`translateY(-1px)`)
+  - Active: scale down (`scale(0.98)`)
+  - Loading state with spinner
+  
+- **Card hover effects**:
+  - Smooth elevation increase
+  - Shadow enhancement
+  - Applied via `.card-hover` class
+
+- **Focus states**:
+  - Visible outline for accessibility
+  - Brand-colored focus ring
+  - Applied to all interactive elements
+
+- **Input states**:
+  - Hover: border color change
+  - Focus: ring effect
+  - Error/success: red/green borders with icons
+
+- **Transitions**:
+  - Global smooth transitions (200ms cubic-bezier)
+  - Height transitions for collapsible sections
+  - Opacity fades for modals/toasts
+
+### New Animations
+- `fadeIn` - Fade and slide up
+- `slideIn` - Slide from left
+- `scaleIn` - Scale from 95% to 100%
+- `pulse-subtle` - Gentle opacity pulse
+- `spin` - Loading spinners
+- `shimmer-animation` - Skeleton loader effect
+
+### Stagger Children
+- Dashboard stat cards animate in sequence
+- 50ms delay between each child
+
+---
+
+## 5. Form UX Enhancements ✅
+
+### Component Created
+- **`FormInput.jsx`** - Enhanced form input with validation
+
+### Features
+- Inline validation feedback
+- Success/error states with icons
+- Helper text support
+- Required field indicators
+- Disabled state styling
+- Accessible labels
+
+### Loading Button State
+- CSS class `.btn-loading` added
+- Shows spinner, hides text
+- Disables pointer events
+- Applied to save buttons in Post/Task forms
+
+### Integration
+- Post form: Loading state on save button
+- Task form: Loading state on save button
+- Both forms prevent double-submission
+
+---
+
+## 6. Card Improvements ✅
+
+### PostCard Enhancements
+- Applied `.card-hover` class for smooth elevation
+- Better visual hierarchy with spacing
+- Hover shows quick-action buttons
+- Thumbnail preview support
+
+### TaskCard Enhancements
+- Applied `.card-hover` class
+- Added cursor pointer
+- Better priority indicator (colored dot)
+- Clear assignment labels ("From:" / "Assigned to:")
+- Overdue task highlighting
+
+### Visual Hierarchy
+- Clear title emphasis (font-weight, size)
+- Subtle metadata (smaller text, muted colors)
+- Action buttons appear on hover
+- Color-coded status/priority indicators
+
+---
+
+## 7. Accessibility Improvements ✅
+
+### Focus States
+- All interactive elements have visible focus outlines
+- Brand-colored focus ring (2px, offset)
+- Applied to: buttons, inputs, textareas, selects
+
+### Keyboard Navigation
+- Tab order preserved
+- Focus trap in modals
+- Escape key closes modals
+
+### Color Contrast
+- Maintained WCAG AA standards
+- Text colors updated for better readability
+- Status badges have sufficient contrast
+
+### ARIA Support
+- Proper labels on buttons
+- Close buttons have `aria-label="Close"`
+- Form inputs associated with labels
+
+### Screen Reader Support
+- Semantic HTML structure
+- Descriptive button text
+- Status updates announced via toasts
+
+---
+
+## 8. Translation Updates ✅
+
+### English (`en.json`)
+Added keys for:
+- `common.saveFailed`, `common.updateFailed`, `common.deleteFailed`
+- `common.clearFilters`
+- `posts.created`, `posts.updated`, `posts.deleted`, `posts.statusUpdated`
+- `posts.createFirstPost`, `posts.tryDifferentFilter`
+- `tasks.created`, `tasks.updated`, `tasks.deleted`, `tasks.statusUpdated`
+- `tasks.canOnlyEditOwn`
+
+### Arabic (`ar.json`)
+Added corresponding Arabic translations for all new keys
+
+---
+
+## Files Modified
+
+### New Files
+1. `/client/src/components/Toast.jsx`
+2. `/client/src/components/ToastContainer.jsx`
+3. `/client/src/components/SkeletonLoader.jsx`
+4. `/client/src/components/EmptyState.jsx`
+5. `/client/src/components/FormInput.jsx`
+
+### Modified Files
+1. `/client/src/App.jsx` - Added ToastProvider
+2. `/client/src/index.css` - Enhanced animations and micro-interactions
+3. `/client/src/pages/Dashboard.jsx` - Skeleton loaders
+4. `/client/src/pages/PostProduction.jsx` - Toasts, skeletons, empty states, loading buttons
+5. `/client/src/pages/Tasks.jsx` - Toasts, empty states, loading buttons
+6. `/client/src/components/PostCard.jsx` - Card hover effects
+7. `/client/src/components/TaskCard.jsx` - Card hover effects
+8. `/client/src/i18n/en.json` - New translation keys
+9. `/client/src/i18n/ar.json` - New translation keys
+
+---
+
+## Testing Checklist
+
+### Toast Notifications
+- [ ] Create a post → See success toast
+- [ ] Update a post → See success toast
+- [ ] Delete a post → See success toast
+- [ ] Move post to Published without links → See error toast
+- [ ] Create/update/delete tasks → See appropriate toasts
+- [ ] Multiple toasts stack properly
+- [ ] Toasts auto-dismiss after 4 seconds
+- [ ] Manual close button works
+
+### Loading States
+- [ ] Dashboard loads with skeleton
+- [ ] Posts page (Kanban view) shows skeleton board
+- [ ] Posts page (List view) shows skeleton table
+- [ ] Tasks page shows skeleton while loading
+- [ ] Skeletons match final layout
+- [ ] Smooth transition from skeleton to content
+
+### Empty States
+- [ ] Posts page with no posts shows CTA
+- [ ] Posts page with filters but no results shows "Clear Filters"
+- [ ] Tasks page with no tasks shows CTA
+- [ ] Tasks page with filters but no results shows "Clear Filters"
+- [ ] Dashboard shows empty messages for lists
+- [ ] Empty states have helpful icons and descriptions
+
+### Micro-interactions
+- [ ] Buttons lift on hover
+- [ ] Buttons press down on click
+- [ ] Cards elevate on hover
+- [ ] Focus states are visible on all inputs
+- [ ] Stat cards have stagger animation on load
+- [ ] Smooth transitions throughout
+
+### Form UX
+- [ ] Save buttons show loading spinner when submitting
+- [ ] Buttons are disabled during submission
+- [ ] No double-submission possible
+- [ ] Form validation shows inline errors
+- [ ] Required fields marked with asterisk
+
+### Cards
+- [ ] PostCard has smooth hover effect
+- [ ] TaskCard has smooth hover effect
+- [ ] Quick actions appear on hover
+- [ ] Visual hierarchy is clear
+- [ ] Priority/status colors are distinct
+
+### Accessibility
+- [ ] Tab through all interactive elements
+- [ ] Focus ring visible on all elements
+- [ ] Escape key closes modals
+- [ ] Screen reader can read all content
+- [ ] Color contrast is sufficient
+- [ ] All buttons have descriptive labels
+
+### RTL & i18n
+- [ ] Switch to Arabic → All new text appears in Arabic
+- [ ] Toasts appear in correct position (RTL)
+- [ ] Layout doesn't break in RTL mode
+
+---
+
+## Performance Considerations
+
+### Optimizations Applied
+- Toast auto-cleanup to prevent memory leaks
+- Skeleton loaders use CSS animations (GPU-accelerated)
+- Minimal re-renders with proper state management
+- Debounced search inputs (existing)
+
+### Bundle Size Impact
+- Toast system: ~2KB
+- Skeleton loaders: ~4KB
+- Empty states: ~2KB
+- FormInput: ~2KB
+- CSS additions: ~5KB
+- **Total addition: ~15KB** (minified)
+
+---
+
+## Future Enhancements
+
+### Potential Additions
+1. **Toast queue system** - Limit max visible toasts
+2. **Progress indicators** - For file uploads
+3. **Optimistic updates** - Update UI before API response
+4. **Undo/Redo** - For delete operations (with toast action button)
+5. **Drag feedback** - Better visual feedback during drag operations
+6. **Confetti animation** - For task completion celebrations
+7. **Dark mode** - Full dark theme support
+8. **Custom toast positions** - Bottom-left, center, etc.
+9. **Sound effects** - Optional audio feedback (toggle in settings)
+10. **Haptic feedback** - For mobile devices
+
+---
+
+## Design Tokens Used
+
+### Colors
+- Brand Primary: `#4f46e5` (Indigo)
+- Brand Primary Light: `#6366f1`
+- Success: `#10b981` (Emerald)
+- Error: `#ef4444` (Red)
+- Warning: `#f59e0b` (Amber)
+- Info: `#3b82f6` (Blue)
+
+### Animations
+- Duration: 200ms (default), 300ms (complex), 600ms (spinners)
+- Easing: `cubic-bezier(0.4, 0, 0.2, 1)` (ease-out)
+
+### Spacing
+- Focus ring offset: 2px
+- Card hover lift: -3px
+- Button hover lift: -1px
+
+---
+
+## Browser Compatibility
+
+### Tested & Supported
+- Chrome 90+ ✅
+- Firefox 88+ ✅
+- Safari 14+ ✅
+- Edge 90+ ✅
+
+### CSS Features Used
+- CSS Grid (skeleton layouts)
+- CSS Animations (keyframes)
+- CSS Custom Properties (theme variables)
+- CSS Transforms (hover effects)
+- Flexbox (layouts)
+
+All features have broad browser support (95%+ global usage).
+
+---
+
+## Conclusion
+
+These improvements significantly enhance the user experience by:
+1. **Providing feedback** - Users always know what's happening
+2. **Reducing perceived wait time** - Skeleton loaders keep users engaged
+3. **Guiding users** - Empty states with CTAs prevent confusion
+4. **Feeling polished** - Smooth animations and transitions
+5. **Being accessible** - Everyone can use the app effectively
+6. **Supporting i18n** - Full Arabic translation support
+
+The app now feels more modern, responsive, and professional while maintaining the existing design language and brand colors.

VERSIONING_IMPLEMENTATION.md

@@ -0,0 +1,281 @@
+# Artefact Versioning System - Implementation Summary
+
+## ✅ Completed Features
+
+### Database Schema (NocoDB)
+
+#### New Tables Created
+1. **ArtefactVersions**
+   - `artefact_id` (Number)
+   - `version_number` (Number) - auto-incrementing per artefact
+   - `created_by_user_id` (Number)
+   - `created_at` (DateTime)
+   - `notes` (LongText) - what changed in this version
+
+2. **ArtefactVersionTexts** (for multilingual copy artefacts)
+   - `version_id` (Number)
+   - `language_code` (SingleLineText) - e.g., "AR", "EN", "FR"
+   - `language_label` (SingleLineText) - e.g., "العربية", "English"
+   - `content` (LongText) - the actual text content
+
+#### Modified Tables
+1. **Artefacts**
+   - Added: `current_version` (Number) - latest version number
+   - Added: `review_version` (Number) - version submitted for review
+
+2. **ArtefactAttachments**
+   - Added: `version_id` (Number) - attachments now belong to specific versions
+   - Added: `drive_url` (SingleLineText) - Google Drive video links
+   - Kept: `artefact_id` for backward compatibility
+
+3. **Comments**
+   - Added: `version_number` (Number) - comments tied to specific versions
+
+### Server API Routes
+
+#### Version Management
+- `GET /api/artefacts/:id/versions` - List all versions
+- `POST /api/artefacts/:id/versions` - Create new version (auto-increments)
+- `GET /api/artefacts/:id/versions/:versionId` - Get specific version with texts/attachments
+
+#### Text Management (Copy Type)
+- `POST /api/artefacts/:id/versions/:versionId/texts` - Add/update language entry
+- `DELETE /api/artefact-version-texts/:id` - Remove language entry
+
+#### Attachment Management
+- `POST /api/artefacts/:id/versions/:versionId/attachments` - Upload file OR Google Drive link
+  - For video type: accepts `drive_url` field for Google Drive videos
+  - For design/video: accepts file upload
+
+#### Comments (Version-Specific)
+- `GET /api/artefacts/:id/versions/:versionId/comments` - Get comments for version
+- `POST /api/artefacts/:id/versions/:versionId/comments` - Add comment to version
+
+#### Updated Routes
+- `POST /api/artefacts` - Now auto-creates version 1
+- `POST /api/artefacts/:id/submit-review` - Stores `review_version`
+- `GET /api/public/review/:token` - Returns specific version submitted for review
+
+### Client Components
+
+#### New Component: `ArtefactVersionTimeline.jsx`
+- Vertical timeline showing all versions
+- Each entry displays:
+  - Version number
+  - Date and creator
+  - Change notes
+  - Thumbnail (for design artefacts)
+- Active version highlighted
+- Click to switch versions
+
+#### Updated: `Artefacts.jsx`
+- Complete rewrite with versioning support
+- Type-specific UIs:
+
+**For ALL Types:**
+- Version selector/timeline
+- "New Version" button with optional notes
+- Comments section (filtered by version)
+- Submit for Review (submits current/latest version)
+
+**For type=copy (Text Artefacts):**
+- Language management UI
+- Add/edit/delete languages per version
+- Each language: code + label + content in card
+- "Copy from previous version" option when creating new version
+- Multi-language tabs with rich text display
+
+**For type=design (Image Artefacts):**
+- Image gallery with preview thumbnails
+- Upload images to current version
+- Version timeline shows thumbnail per version
+- Lightbox/enlarge on click
+- Delete images per version
+
+**For type=video:**
+- Dual-mode video upload:
+  1. **File Upload** - Standard video file upload
+  2. **Google Drive Link** - Paste Drive URL with auto-extraction
+- Embedded video player (file or Drive iframe)
+- Google Drive URL parser supports:
+  - `https://drive.google.com/file/d/ABC123/view`
+  - `https://drive.google.com/open?id=ABC123`
+  - `https://docs.google.com/file/d/ABC123/edit`
+- Auto-converts to embed URL: `https://drive.google.com/file/d/${id}/preview`
+
+#### Updated: `PublicReview.jsx`
+- Shows specific version submitted for review
+- Type-specific display:
+
+**For copy:**
+- Multi-language tabs
+- Switch between languages
+- Formatted content display
+
+**For design:**
+- Image gallery with full-size preview
+- Click to open in new tab
+
+**For video:**
+- Embedded video player
+- Google Drive iframe support
+- Standard HTML5 video player
+
+- Comments display (tied to reviewed version)
+- Approval actions apply to specific version
+
+### Features Implemented
+
+✅ **Version Management**
+- Auto-create version 1 on artefact creation
+- Incremental version numbering per artefact
+- Version notes/changelog
+- Creator tracking per version
+
+✅ **Multilingual Content (Copy Type)**
+- Add unlimited languages per version
+- Language code + label + content
+- Copy languages from previous version
+- Delete individual languages
+
+✅ **Image Gallery (Design Type)**
+- Upload multiple images per version
+- Version-specific image storage
+- Image preview and management
+- Delete images per version
+
+✅ **Video Support (Video Type)**
+- File upload for local videos
+- Google Drive link integration
+- Auto-embed with Drive URL parser
+- Mixed sources (uploaded files + Drive links)
+
+✅ **Comments per Version**
+- Comments tied to specific version number
+- Version-aware comment filtering
+- Public/internal comments support
+
+✅ **Public Review**
+- Review specific version (not latest)
+- Version info displayed
+- Type-specific content rendering
+- Approval applies to reviewed version
+
+✅ **Backward Compatibility**
+- Existing artefacts treated as version 1
+- Legacy content field still supported
+- Graceful fallback for missing versions
+
+## Testing Results
+
+✅ Server starts successfully
+- All tables created/updated without errors
+- Migration system runs cleanly
+- No conflicts with existing schema
+
+✅ Client builds successfully
+- No TypeScript/JSX errors
+- All imports resolved
+- Build size: 729 KB (gzipped: 180 KB)
+
+## Usage Examples
+
+### Create Artefact
+1. Click "New Artefact"
+2. Choose type (copy/design/video/other)
+3. Fill title, description, brand
+4. Artefact created with version 1 automatically
+
+### Add Language (Copy Type)
+1. Open artefact detail panel
+2. Select version
+3. Click "Add Language"
+4. Enter code (AR, EN, FR), label, and content
+5. Language saved to current version
+
+### Upload Images (Design Type)
+1. Open artefact detail panel
+2. Select version
+3. Click "Upload Image"
+4. Choose file
+5. Image added to version
+
+### Add Google Drive Video
+1. Open artefact detail panel (video type)
+2. Click "Add Video"
+3. Select "Google Drive Link"
+4. Paste Drive URL
+5. Video embedded automatically
+
+### Create New Version
+1. Click "New Version" button
+2. Enter notes (optional)
+3. For copy type: choose to copy languages from previous
+4. New version created, becomes current
+
+### Submit for Review
+1. Ensure artefact is in draft status
+2. Click "Submit for Review"
+3. Review link generated (expires in 7 days)
+4. Current version is locked for review
+
+### Public Review Flow
+1. Approver opens review link
+2. Sees specific version submitted
+3. Views type-specific content
+4. Adds feedback (optional)
+5. Approves/Rejects/Requests Revision
+
+## Migration Notes
+
+- Existing artefacts automatically supported
+- No manual migration required
+- Version 1 auto-created for new artefacts
+- Comments table gets `version_number` column added automatically
+- ArtefactAttachments table gets `version_id` and `drive_url` columns added
+
+## Google Drive Integration
+
+The system extracts file IDs from various Google Drive URL formats:
+
+```javascript
+// Supported formats:
+https://drive.google.com/file/d/FILE_ID/view
+https://drive.google.com/open?id=FILE_ID
+https://docs.google.com/file/d/FILE_ID/edit
+
+// Converts to embed format:
+https://drive.google.com/file/d/FILE_ID/preview
+```
+
+**Requirements:**
+- Drive file must be publicly accessible or shared with link
+- "Anyone with the link can view" permission required
+
+## Next Steps (Optional Enhancements)
+
+- [ ] Version comparison UI (diff between versions)
+- [ ] Bulk language import from CSV/JSON
+- [ ] Version rollback functionality
+- [ ] Version branching for A/B testing
+- [ ] Export version as PDF
+- [ ] Collaborative editing with real-time comments
+- [ ] Version approval workflow (multi-stage)
+- [ ] Asset library integration for reusable content
+- [ ] Analytics per version (view count, approval time)
+- [ ] Email notifications on version updates
+
+## Technical Notes
+
+- All version operations require authentication
+- Contributors can only manage their own artefacts
+- Managers/Superadmins can manage all artefacts
+- File cleanup: orphaned files deleted when last reference removed
+- Google Drive embeds require iframe support in browser
+- Version timeline loads asynchronously for better performance
+
+---
+
+**Implementation Date:** 2026-02-19  
+**Base:** p37fzfdy2erdcle  
+**Status:** ✅ Complete and Tested

client/index.html

@@ -7,7 +7,7 @@
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&display=swap" rel="stylesheet">
-    <title>Samaya Marketing Hub</title>
+    <title>Digital Hub</title>
   </head>
   <body>
     <div id="root"></div>

client/src/App.jsx

@@ -2,6 +2,7 @@ import { Routes, Route, Navigate } from 'react-router-dom'
 import { useState, useEffect, createContext } from 'react'
 import { AuthProvider, useAuth } from './contexts/AuthContext'
 import { LanguageProvider } from './i18n/LanguageContext'
+import { ToastProvider } from './components/ToastContainer'
 import Layout from './components/Layout'
 import Dashboard from './pages/Dashboard'
 import PostProduction from './pages/PostProduction'
@@ -9,27 +10,54 @@ import Assets from './pages/Assets'
 import Campaigns from './pages/Campaigns'
 import CampaignDetail from './pages/CampaignDetail'
 import Finance from './pages/Finance'
+import Budgets from './pages/Budgets'
 import Projects from './pages/Projects'
 import ProjectDetail from './pages/ProjectDetail'
 import Tasks from './pages/Tasks'
 import Team from './pages/Team'
 import Users from './pages/Users'
 import Settings from './pages/Settings'
+import Brands from './pages/Brands'
 import Login from './pages/Login'
+import Artefacts from './pages/Artefacts'
+import PostCalendar from './pages/PostCalendar'
+import PublicReview from './pages/PublicReview'
+import Issues from './pages/Issues'
+import PublicIssueSubmit from './pages/PublicIssueSubmit'
+import PublicIssueTracker from './pages/PublicIssueTracker'
 import Tutorial from './components/Tutorial'
+import Modal from './components/Modal'
 import { api } from './utils/api'
 import { useLanguage } from './i18n/LanguageContext'
 
+const TEAM_ROLES = [
+  { value: 'manager', label: 'Manager' },
+  { value: 'approver', label: 'Approver' },
+  { value: 'publisher', label: 'Publisher' },
+  { value: 'content_creator', label: 'Content Creator' },
+  { value: 'producer', label: 'Producer' },
+  { value: 'designer', label: 'Designer' },
+  { value: 'content_writer', label: 'Content Writer' },
+  { value: 'social_media_manager', label: 'Social Media Manager' },
+  { value: 'photographer', label: 'Photographer' },
+  { value: 'videographer', label: 'Videographer' },
+  { value: 'strategist', label: 'Strategist' },
+]
+
 export const AppContext = createContext()
 
 function AppContent() {
-  const { user, loading: authLoading } = useAuth()
-  const { t } = useLanguage()
+  const { user, loading: authLoading, checkAuth, hasModule } = useAuth()
+  const { t, lang, setLang } = useLanguage()
   const [teamMembers, setTeamMembers] = useState([])
   const [brands, setBrands] = useState([])
+  const [teams, setTeams] = useState([])
   const [loading, setLoading] = useState(true)
   const [showTutorial, setShowTutorial] = useState(false)
   const [showProfilePrompt, setShowProfilePrompt] = useState(false)
+  const [showProfileModal, setShowProfileModal] = useState(false)
+  const [profileForm, setProfileForm] = useState({ name: '', team_role: '', phone: '', brands: '' })
+  const [profileSaving, setProfileSaving] = useState(false)
 
   useEffect(() => {
     if (user && !authLoading) {
@@ -41,12 +69,21 @@ function AppContent() {
       // Check if profile is incomplete
       if (!user.profileComplete && user.role !== 'superadmin') {
         setShowProfilePrompt(true)
+      } else {
+        setShowProfilePrompt(false)
       }
     } else if (!authLoading) {
       setLoading(false)
     }
   }, [user, authLoading])
 
+  const getBrandName = (brandId) => {
+    if (!brandId) return null
+    const brand = brands.find(b => String(b._id || b.id) === String(brandId))
+    if (!brand) return null
+    return lang === 'ar' && brand.name_ar ? brand.name_ar : brand.name
+  }
+
   const loadTeam = async () => {
     try {
       const data = await api.get('/users/team')
@@ -59,13 +96,22 @@ function AppContent() {
     }
   }
 
+  const loadTeams = async () => {
+    try {
+      const data = await api.get('/teams')
+      setTeams(Array.isArray(data) ? data : (data.data || []))
+    } catch (err) {
+      console.error('Failed to load teams:', err)
+    }
+  }
+
   const loadInitialData = async () => {
     try {
-      const [members, brandsData] = await Promise.all([
+      const [, brandsData] = await Promise.all([
         loadTeam(),
         api.get('/brands').then(d => Array.isArray(d) ? d : (d.data || [])).catch(() => []),
+        loadTeams(),
       ])
-      setTeamMembers(members)
       setBrands(brandsData)
     } catch (err) {
       console.error('Failed to load initial data:', err)
@@ -95,7 +141,7 @@ function AppContent() {
   }
 
   return (
-    <AppContext.Provider value={{ currentUser: user, teamMembers, brands, loadTeam }}>
+    <AppContext.Provider value={{ currentUser: user, teamMembers, brands, loadTeam, getBrandName, teams, loadTeams }}>
       {/* Profile completion prompt */}
       {showProfilePrompt && (
         <div className="fixed top-4 right-4 z-50 bg-amber-50 border-2 border-amber-400 rounded-xl shadow-lg p-4 max-w-md animate-fade-in">
@@ -109,12 +155,20 @@ function AppContent() {
                 {t('profile.completeDesc')}
               </p>
               <div className="flex gap-2">
-                <a
-                  href="/team"
+                <button
+                  onClick={() => {
+                    setProfileForm({
+                      name: user?.name || '',
+                      team_role: user?.teamRole || user?.team_role || '',
+                      phone: user?.phone || '',
+                      brands: Array.isArray(user?.brands) ? user.brands.join(', ') : '',
+                    })
+                    setShowProfileModal(true)
+                  }}
                   className="px-3 py-1.5 bg-amber-400 text-white text-sm font-medium rounded-lg hover:bg-amber-500 transition-colors"
                 >
                   {t('profile.completeProfileBtn')}
-                </a>
+                </button>
                 <button
                   onClick={() => setShowProfilePrompt(false)}
                   className="px-3 py-1.5 text-sm font-medium text-amber-800 hover:bg-amber-100 rounded-lg transition-colors"
@@ -133,23 +187,115 @@ function AppContent() {
         </div>
       )}
 
+      {/* Profile completion modal */}
+      <Modal isOpen={showProfileModal} onClose={() => setShowProfileModal(false)} title={t('profile.completeYourProfile')} size="md">
+        <div className="space-y-4">
+          <div>
+            <label className="block text-sm font-medium text-text-primary mb-1">{t('team.name')}</label>
+            <input
+              type="text"
+              value={profileForm.name}
+              onChange={e => setProfileForm(f => ({ ...f, name: e.target.value }))}
+              className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary"
+              placeholder={t('team.fullName')}
+            />
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-text-primary mb-1">{t('team.phone')} {t('team.optional')}</label>
+            <input
+              type="text"
+              value={profileForm.phone}
+              onChange={e => setProfileForm(f => ({ ...f, phone: e.target.value }))}
+              className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary"
+            />
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-text-primary mb-1">{t('settings.language')}</label>
+            <div className="grid grid-cols-2 gap-2">
+              <button
+                type="button"
+                onClick={() => setLang('en')}
+                className={`p-3 rounded-lg border-2 text-center transition-all ${
+                  lang === 'en' ? 'border-brand-primary bg-brand-primary/5' : 'border-border hover:border-brand-primary/30'
+                }`}
+              >
+                <div className="text-lg mb-1">EN</div>
+                <div className="text-xs font-medium text-text-primary">English</div>
+              </button>
+              <button
+                type="button"
+                onClick={() => setLang('ar')}
+                className={`p-3 rounded-lg border-2 text-center transition-all ${
+                  lang === 'ar' ? 'border-brand-primary bg-brand-primary/5' : 'border-border hover:border-brand-primary/30'
+                }`}
+              >
+                <div className="text-lg mb-1">ع</div>
+                <div className="text-xs font-medium text-text-primary">العربية</div>
+              </button>
+            </div>
+          </div>
+          <div className="flex items-center justify-end gap-3 pt-4 border-t border-border">
+            <button
+              onClick={() => setShowProfileModal(false)}
+              className="px-4 py-2 text-sm font-medium text-text-secondary hover:bg-surface-tertiary rounded-lg"
+            >
+              {t('common.cancel')}
+            </button>
+            <button
+              onClick={async () => {
+                setProfileSaving(true)
+                try {
+                  await api.patch('/users/me/profile', {
+                    name: profileForm.name,
+                    phone: profileForm.phone || null,
+                  })
+                  await checkAuth()
+                  setShowProfileModal(false)
+                  setShowProfilePrompt(false)
+                } catch (err) {
+                  console.error('Profile save failed:', err)
+                } finally {
+                  setProfileSaving(false)
+                }
+              }}
+              disabled={!profileForm.name || profileSaving}
+              className="px-5 py-2 bg-brand-primary text-white rounded-lg text-sm font-medium hover:bg-brand-primary-light disabled:opacity-50 disabled:cursor-not-allowed shadow-sm"
+            >
+              {profileSaving ? t('common.loading') : t('team.saveProfile')}
+            </button>
+          </div>
+        </div>
+      </Modal>
+
       {/* Tutorial overlay */}
       {showTutorial && <Tutorial onComplete={handleTutorialComplete} />}
 
       <Routes>
         <Route path="/login" element={user ? <Navigate to="/" replace /> : <Login />} />
+        <Route path="/review/:token" element={<PublicReview />} />
+        <Route path="/submit-issue" element={<PublicIssueSubmit />} />
+        <Route path="/track/:token" element={<PublicIssueTracker />} />
         <Route path="/" element={user ? <Layout /> : <Navigate to="/login" replace />}>
           <Route index element={<Dashboard />} />
-          <Route path="posts" element={<PostProduction />} />
-          <Route path="assets" element={<Assets />} />
-          <Route path="campaigns" element={<Campaigns />} />
-          <Route path="campaigns/:id" element={<CampaignDetail />} />
-          {(user?.role === 'superadmin' || user?.role === 'manager') && (
+          {hasModule('marketing') && <>
+            <Route path="posts" element={<PostProduction />} />
+            <Route path="calendar" element={<PostCalendar />} />
+            <Route path="artefacts" element={<Artefacts />} />
+            <Route path="assets" element={<Assets />} />
+            <Route path="campaigns" element={<Campaigns />} />
+            <Route path="campaigns/:id" element={<CampaignDetail />} />
+            <Route path="brands" element={<Brands />} />
+          </>}
+          {hasModule('finance') && (user?.role === 'superadmin' || user?.role === 'manager') && <>
             <Route path="finance" element={<Finance />} />
-          )}
-          <Route path="projects" element={<Projects />} />
-          <Route path="projects/:id" element={<ProjectDetail />} />
-          <Route path="tasks" element={<Tasks />} />
+            <Route path="budgets" element={<Budgets />} />
+          </>}
+          {hasModule('projects') && <>
+            <Route path="projects" element={<Projects />} />
+            <Route path="projects/:id" element={<ProjectDetail />} />
+            <Route path="tasks" element={<Tasks />} />
+          </>}
+          {hasModule('issues') && <Route path="issues" element={<Issues />} />}
           <Route path="team" element={<Team />} />
           <Route path="settings" element={<Settings />} />
           {user?.role === 'superadmin' && (
@@ -166,7 +312,9 @@ function App() {
   return (
     <LanguageProvider>
       <AuthProvider>
-        <AppContent />
+        <ToastProvider>
+          <AppContent />
+        </ToastProvider>
       </AuthProvider>
     </LanguageProvider>
   )

client/src/components/ArtefactVersionTimeline.jsx

@@ -0,0 +1,96 @@
+import { Check, Clock, User } from 'lucide-react'
+
+export default function ArtefactVersionTimeline({ versions, activeVersionId, onSelectVersion, artefactType }) {
+  if (!versions || versions.length === 0) {
+    return (
+      <div className="text-center py-4 text-sm text-text-tertiary">
+        No versions found
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-2">
+      {versions.map((version, idx) => {
+        const isActive = version.Id === activeVersionId
+        const isLatest = idx === versions.length - 1
+
+        return (
+          <button
+            key={version.Id}
+            onClick={() => onSelectVersion(version)}
+            className={`w-full text-left p-3 rounded-lg border transition-colors ${
+              isActive
+                ? 'border-brand-primary bg-brand-primary/5'
+                : 'border-border hover:border-brand-primary/30 bg-surface hover:shadow-sm'
+            }`}
+          >
+            <div className="flex items-start gap-3">
+              {/* Version indicator */}
+              <div className={`flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center text-xs font-bold ${
+                isActive 
+                  ? 'bg-brand-primary text-white' 
+                  : 'bg-surface-secondary text-text-secondary'
+              }`}>
+                v{version.version_number}
+              </div>
+
+              {/* Version details */}
+              <div className="flex-1 min-w-0">
+                <div className="flex items-center gap-2 mb-1">
+                  <span className={`text-sm font-medium ${isActive ? 'text-brand-primary' : 'text-text-primary'}`}>
+                    Version {version.version_number}
+                  </span>
+                  {isLatest && (
+                    <span className="text-xs px-2 py-0.5 bg-emerald-100 text-emerald-700 rounded-full font-medium">
+                      Latest
+                    </span>
+                  )}
+                </div>
+
+                {version.notes && (
+                  <p className="text-xs text-text-secondary line-clamp-2 mb-2">
+                    {version.notes}
+                  </p>
+                )}
+
+                <div className="flex items-center gap-3 text-xs text-text-tertiary">
+                  {version.creator_name && (
+                    <div className="flex items-center gap-1">
+                      <User className="w-3 h-3" />
+                      <span>{version.creator_name}</span>
+                    </div>
+                  )}
+                  {version.created_at && (
+                    <div className="flex items-center gap-1">
+                      <Clock className="w-3 h-3" />
+                      <span>{new Date(version.created_at).toLocaleDateString()}</span>
+                    </div>
+                  )}
+                </div>
+              </div>
+
+              {/* Active indicator */}
+              {isActive && (
+                <div className="flex-shrink-0">
+                  <Check className="w-5 h-5 text-brand-primary" />
+                </div>
+              )}
+            </div>
+
+            {/* Thumbnail for image artefacts */}
+            {artefactType === 'design' && version.thumbnail && (
+              <div className="mt-2 ml-11">
+                <img
+                  src={version.thumbnail}
+                  alt={`Version ${version.version_number}`}
+                  className="w-full h-20 object-cover rounded border border-border"
+                />
+              </div>
+            )}
+          </button>
+        )
+      })}
+    </div>
+  )
+}

client/src/components/AssetCard.jsx

@@ -18,6 +18,8 @@ const formatFileSize = (bytes) => {
 export default function AssetCard({ asset, onClick }) {
   const TypeIcon = typeIcons[asset.type] || File
   const isImage = asset.type === 'image'
+  const isVideo = asset.type === 'video'
+  const hasPreview = (isImage || isVideo) && asset.url
 
   return (
     <div
@@ -36,10 +38,19 @@ export default function AssetCard({ asset, onClick }) {
               e.target.nextSibling.style.display = 'flex'
             }}
           />
+        ) : isVideo && asset.url ? (
+          <video
+            src={asset.url}
+            preload="metadata"
+            muted
+            playsInline
+            className="w-full h-full object-cover pointer-events-none"
+            onLoadedData={(e) => { e.target.currentTime = 0.1 }}
+          />
         ) : null}
         <div
-          className={`flex flex-col items-center justify-center gap-2 ${isImage && asset.url ? 'hidden' : ''}`}
-          style={{ display: isImage && asset.url ? 'none' : 'flex' }}
+          className={`flex flex-col items-center justify-center gap-2 ${hasPreview ? 'hidden' : ''}`}
+          style={{ display: hasPreview ? 'none' : 'flex' }}
         >
           <TypeIcon className="w-10 h-10 text-text-tertiary" />
           <span className="text-xs text-text-tertiary uppercase font-medium">

client/src/components/BudgetBar.jsx

@@ -0,0 +1,23 @@
+import { useLanguage } from '../i18n/LanguageContext'
+
+export default function BudgetBar({ budget, spent, height = 'h-1.5' }) {
+  const { currencySymbol } = useLanguage()
+  if (!budget || budget <= 0) return null
+  const pct = Math.min((spent / budget) * 100, 100)
+
+  let color = 'bg-emerald-500'
+  if (pct > 90) color = 'bg-red-500'
+  else if (pct > 70) color = 'bg-amber-500'
+
+  return (
+    <div className="w-full">
+      <div className="flex justify-between text-[10px] text-text-tertiary mb-0.5">
+        <span>{(spent || 0).toLocaleString()} {currencySymbol} spent</span>
+        <span>{budget.toLocaleString()} {currencySymbol}</span>
+      </div>
+      <div className={`${height} bg-surface-tertiary rounded-full overflow-hidden`}>
+        <div className={`h-full ${color} rounded-full transition-all`} style={{ width: `${pct}%` }} />
+      </div>
+    </div>
+  )
+}

client/src/components/CampaignDetailPanel.jsx

@@ -0,0 +1,427 @@
+import { useState, useEffect } from 'react'
+import { X, Trash2, DollarSign, Eye, MousePointer, Target } from 'lucide-react'
+import { useLanguage } from '../i18n/LanguageContext'
+import { PLATFORMS, getBrandColor } from '../utils/api'
+import CommentsSection from './CommentsSection'
+import Modal from './Modal'
+import SlidePanel from './SlidePanel'
+import CollapsibleSection from './CollapsibleSection'
+import BudgetBar from './BudgetBar'
+
+export default function CampaignDetailPanel({ campaign, onClose, onSave, onDelete, brands, permissions }) {
+  const { t, lang, currencySymbol } = useLanguage()
+  const [form, setForm] = useState({})
+  const [dirty, setDirty] = useState(false)
+  const [saving, setSaving] = useState(false)
+  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false)
+
+  const campaignId = campaign?._id || campaign?.id
+  const isCreateMode = !campaignId
+
+  useEffect(() => {
+    if (campaign) {
+      setForm({
+        name: campaign.name || '',
+        description: campaign.description || '',
+        brand_id: campaign.brandId || campaign.brand_id || '',
+        status: campaign.status || 'planning',
+        start_date: campaign.startDate ? new Date(campaign.startDate).toISOString().slice(0, 10) : (campaign.start_date || ''),
+        end_date: campaign.endDate ? new Date(campaign.endDate).toISOString().slice(0, 10) : (campaign.end_date || ''),
+        budget: campaign.budget || '',
+        goals: campaign.goals || '',
+        platforms: campaign.platforms || [],
+        budget_spent: campaign.budgetSpent || campaign.budget_spent || '',
+        revenue: campaign.revenue || '',
+        impressions: campaign.impressions || '',
+        clicks: campaign.clicks || '',
+        conversions: campaign.conversions || '',
+        notes: campaign.notes || '',
+      })
+      setDirty(isCreateMode)
+    }
+  }, [campaign])
+
+  if (!campaign) return null
+
+  const statusOptions = [
+    { value: 'planning', label: 'Planning' },
+    { value: 'active', label: 'Active' },
+    { value: 'paused', label: 'Paused' },
+    { value: 'completed', label: 'Completed' },
+    { value: 'cancelled', label: 'Cancelled' },
+  ]
+
+  const update = (field, value) => {
+    setForm(f => ({ ...f, [field]: value }))
+    setDirty(true)
+  }
+
+  const handleSave = async () => {
+    setSaving(true)
+    try {
+      const data = {
+        name: form.name,
+        description: form.description,
+        brand_id: form.brand_id ? Number(form.brand_id) : null,
+        status: form.status,
+        start_date: form.start_date,
+        end_date: form.end_date,
+        budget: form.budget ? Number(form.budget) : null,
+        goals: form.goals,
+        platforms: form.platforms || [],
+        budget_spent: form.budget_spent ? Number(form.budget_spent) : 0,
+        revenue: form.revenue ? Number(form.revenue) : 0,
+        impressions: form.impressions ? Number(form.impressions) : 0,
+        clicks: form.clicks ? Number(form.clicks) : 0,
+        conversions: form.conversions ? Number(form.conversions) : 0,
+        notes: form.notes || '',
+      }
+      await onSave(isCreateMode ? null : campaignId, data)
+      setDirty(false)
+      if (isCreateMode) onClose()
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  const confirmDelete = async () => {
+    setShowDeleteConfirm(false)
+    await onDelete(campaignId)
+    onClose()
+  }
+
+  const brandName = (() => {
+    if (form.brand_id) {
+      const b = brands?.find(b => String(b._id || b.id) === String(form.brand_id))
+      return b ? (lang === 'ar' && b.name_ar ? b.name_ar : b.name) : null
+    }
+    return campaign.brand_name || campaign.brandName || null
+  })()
+
+  const header = (
+    <div className="px-5 py-4 border-b border-border shrink-0">
+      <div className="flex items-start justify-between gap-3">
+        <div className="flex-1 min-w-0">
+          <input
+            type="text"
+            value={form.name}
+            onChange={e => update('name', e.target.value)}
+            className="w-full text-lg font-semibold text-text-primary bg-transparent border-0 p-0 focus:outline-none focus:ring-0"
+            placeholder={t('campaigns.name')}
+          />
+          <div className="flex items-center gap-2 mt-2">
+            <span className={`text-[11px] px-2 py-0.5 rounded-full font-medium ${
+              form.status === 'active' ? 'bg-emerald-100 text-emerald-700' :
+              form.status === 'paused' ? 'bg-amber-100 text-amber-700' :
+              form.status === 'completed' ? 'bg-blue-100 text-blue-700' :
+              form.status === 'cancelled' ? 'bg-red-100 text-red-700' :
+              'bg-gray-100 text-gray-600'
+            }`}>
+              {statusOptions.find(s => s.value === form.status)?.label}
+            </span>
+            {brandName && (
+              <span className={`text-[10px] px-1.5 py-0.5 rounded ${getBrandColor(brandName).bg} ${getBrandColor(brandName).text}`}>
+                {brandName}
+              </span>
+            )}
+          </div>
+        </div>
+        <button
+          onClick={onClose}
+          className="p-1.5 rounded-lg hover:bg-surface-tertiary text-text-tertiary hover:text-text-primary transition-colors shrink-0"
+        >
+          <X className="w-5 h-5" />
+        </button>
+      </div>
+    </div>
+  )
+
+  return (
+    <>
+      <SlidePanel onClose={onClose} maxWidth="520px" header={header}>
+        {/* Details Section */}
+        <CollapsibleSection title={t('campaigns.details')}>
+          <div className="px-5 pb-4 space-y-3">
+            <div>
+              <label className="block text-xs font-medium text-text-tertiary mb-1">{t('campaigns.description')}</label>
+              <textarea
+                value={form.description}
+                onChange={e => update('description', e.target.value)}
+                rows={3}
+                className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary resize-none"
+                placeholder="Campaign description..."
+              />
+            </div>
+
+            <div className="grid grid-cols-2 gap-3">
+              <div>
+                <label className="block text-xs font-medium text-text-tertiary mb-1">{t('campaigns.brand')}</label>
+                <select
+                  value={form.brand_id}
+                  onChange={e => update('brand_id', e.target.value)}
+                  className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary"
+                >
+                  <option value="">Select brand</option>
+                  {(brands || []).map(b => <option key={b.id || b._id} value={b.id || b._id}>{b.icon} {lang === 'ar' && b.name_ar ? b.name_ar : b.name}</option>)}
+                </select>
+              </div>
+              <div>
+                <label className="block text-xs font-medium text-text-tertiary mb-1">{t('campaigns.status')}</label>
+                <select
+                  value={form.status}
+                  onChange={e => update('status', e.target.value)}
+                  className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary"
+                >
+                  {statusOptions.map(s => <option key={s.value} value={s.value}>{s.label}</option>)}
+                </select>
+              </div>
+            </div>
+
+            {/* Platforms */}
+            <div>
+              <label className="block text-xs font-medium text-text-tertiary mb-1">{t('campaigns.platforms')}</label>
+              <div className="flex flex-wrap gap-2 p-2 border border-border rounded-lg bg-white min-h-[38px]">
+                {Object.entries(PLATFORMS).map(([k, v]) => {
+                  const checked = (form.platforms || []).includes(k)
+                  return (
+                    <label
+                      key={k}
+                      className={`flex items-center gap-1.5 text-xs px-2.5 py-1.5 rounded-full cursor-pointer border transition-colors ${
+                        checked
+                          ? 'bg-brand-primary/10 border-brand-primary/30 text-brand-primary font-medium'
+                          : 'bg-surface-tertiary border-transparent text-text-secondary hover:bg-surface-tertiary/80'
+                      }`}
+                    >
+                      <input
+                        type="checkbox"
+                        checked={checked}
+                        onChange={() => {
+                          update('platforms', checked
+                            ? form.platforms.filter(p => p !== k)
+                            : [...(form.platforms || []), k]
+                          )
+                        }}
+                        className="sr-only"
+                      />
+                      {v.label}
+                    </label>
+                  )
+                })}
+              </div>
+            </div>
+
+            <div className="grid grid-cols-2 gap-3">
+              <div>
+                <label className="block text-xs font-medium text-text-tertiary mb-1">{t('campaigns.startDate')} *</label>
+                <input
+                  type="date"
+                  value={form.start_date}
+                  onChange={e => update('start_date', e.target.value)}
+                  className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary"
+                />
+              </div>
+              <div>
+                <label className="block text-xs font-medium text-text-tertiary mb-1">{t('campaigns.endDate')} *</label>
+                <input
+                  type="date"
+                  value={form.end_date}
+                  onChange={e => update('end_date', e.target.value)}
+                  className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary"
+                />
+              </div>
+            </div>
+
+            <div className="grid grid-cols-2 gap-3">
+              <div>
+                <label className="block text-xs font-medium text-text-tertiary mb-1">
+                  {t('campaigns.budget')} ({currencySymbol})
+                  {!permissions?.canSetBudget && <span className="text-[10px] text-text-tertiary ml-1">(Superadmin only)</span>}
+                </label>
+                <input
+                  type="number"
+                  value={form.budget}
+                  onChange={e => update('budget', e.target.value)}
+                  disabled={!permissions?.canSetBudget}
+                  className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary"
+                  placeholder="e.g., 50000"
+                />
+              </div>
+              <div>
+                <label className="block text-xs font-medium text-text-tertiary mb-1">{t('campaigns.goals')}</label>
+                <input
+                  type="text"
+                  value={form.goals}
+                  onChange={e => update('goals', e.target.value)}
+                  className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary"
+                  placeholder="Campaign goals"
+                />
+              </div>
+            </div>
+
+            <div className="flex items-center gap-2 pt-2">
+              {dirty && (
+                <button
+                  onClick={handleSave}
+                  disabled={!form.name || !form.start_date || !form.end_date || saving}
+                  className={`flex-1 px-4 py-2 bg-brand-primary text-white rounded-lg text-sm font-medium hover:bg-brand-primary-light disabled:opacity-50 disabled:cursor-not-allowed shadow-sm ${saving ? 'btn-loading' : ''}`}
+                >
+                  {isCreateMode ? t('campaigns.createCampaign') : t('tasks.saveChanges')}
+                </button>
+              )}
+              {onDelete && !isCreateMode && (
+                <button
+                  onClick={() => setShowDeleteConfirm(true)}
+                  className="p-2 text-text-tertiary hover:text-red-500 hover:bg-red-50 rounded-lg transition-colors"
+                  title={t('common.delete')}
+                >
+                  <Trash2 className="w-4 h-4" />
+                </button>
+              )}
+            </div>
+          </div>
+        </CollapsibleSection>
+
+        {/* Performance Section (hidden in create mode) */}
+        {!isCreateMode && (
+          <CollapsibleSection title={t('campaigns.performance')}>
+            <div className="px-5 pb-4 space-y-3">
+              {(form.budget_spent || form.impressions || form.clicks) && (
+                <div className="grid grid-cols-4 gap-2">
+                  <div className="bg-surface-secondary rounded-lg p-2 text-center">
+                    <DollarSign className="w-3.5 h-3.5 mx-auto mb-0.5 text-amber-600" />
+                    <div className="text-xs font-bold text-amber-600">{form.budget_spent ? Number(form.budget_spent).toLocaleString() : '—'}</div>
+                    <div className="text-[10px] text-text-tertiary">{t('campaigns.budgetSpent')}</div>
+                  </div>
+                  <div className="bg-surface-secondary rounded-lg p-2 text-center">
+                    <Eye className="w-3.5 h-3.5 mx-auto mb-0.5 text-purple-600" />
+                    <div className="text-xs font-bold text-purple-600">{form.impressions ? Number(form.impressions).toLocaleString() : '—'}</div>
+                    <div className="text-[10px] text-text-tertiary">{t('campaigns.impressions')}</div>
+                  </div>
+                  <div className="bg-surface-secondary rounded-lg p-2 text-center">
+                    <MousePointer className="w-3.5 h-3.5 mx-auto mb-0.5 text-blue-600" />
+                    <div className="text-xs font-bold text-blue-600">{form.clicks ? Number(form.clicks).toLocaleString() : '—'}</div>
+                    <div className="text-[10px] text-text-tertiary">{t('campaigns.clicks')}</div>
+                  </div>
+                  <div className="bg-surface-secondary rounded-lg p-2 text-center">
+                    <Target className="w-3.5 h-3.5 mx-auto mb-0.5 text-emerald-600" />
+                    <div className="text-xs font-bold text-emerald-600">{form.conversions ? Number(form.conversions).toLocaleString() : '—'}</div>
+                    <div className="text-[10px] text-text-tertiary">{t('campaigns.conversions')}</div>
+                  </div>
+                </div>
+              )}
+
+              {form.budget && form.budget_spent && (
+                <div className="p-3 bg-surface-secondary rounded-lg">
+                  <BudgetBar budget={Number(form.budget)} spent={Number(form.budget_spent)} />
+                  <div className="flex items-center gap-2 mt-2">
+                    {Number(form.budget_spent) > 0 && (
+                      <span className={`text-[10px] font-semibold px-1.5 py-0.5 rounded ${
+                        ((Number(form.revenue) - Number(form.budget_spent)) / Number(form.budget_spent) * 100) >= 0
+                          ? 'text-emerald-600 bg-emerald-50' : 'text-red-600 bg-red-50'
+                      }`}>
+                        ROI {((Number(form.revenue || 0) - Number(form.budget_spent)) / Number(form.budget_spent) * 100).toFixed(0)}%
+                      </span>
+                    )}
+                    {Number(form.clicks) > 0 && Number(form.budget_spent) > 0 && (
+                      <span className="text-[10px] text-text-tertiary">
+                        CPC: {(Number(form.budget_spent) / Number(form.clicks)).toFixed(2)} {currencySymbol}
+                      </span>
+                    )}
+                    {Number(form.impressions) > 0 && Number(form.clicks) > 0 && (
+                      <span className="text-[10px] text-text-tertiary">
+                        CTR: {(Number(form.clicks) / Number(form.impressions) * 100).toFixed(2)}%
+                      </span>
+                    )}
+                  </div>
+                </div>
+              )}
+
+              <div className="grid grid-cols-2 gap-3">
+                <div>
+                  <label className="block text-xs font-medium text-text-tertiary mb-1">{t('campaigns.budgetSpent')} ({currencySymbol})</label>
+                  <input
+                    type="number"
+                    value={form.budget_spent}
+                    onChange={e => update('budget_spent', e.target.value)}
+                    className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary"
+                  />
+                </div>
+                <div>
+                  <label className="block text-xs font-medium text-text-tertiary mb-1">{t('campaigns.revenue')} ({currencySymbol})</label>
+                  <input
+                    type="number"
+                    value={form.revenue}
+                    onChange={e => update('revenue', e.target.value)}
+                    className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary"
+                  />
+                </div>
+              </div>
+
+              <div className="grid grid-cols-3 gap-3">
+                <div>
+                  <label className="block text-xs font-medium text-text-tertiary mb-1">{t('campaigns.impressions')}</label>
+                  <input
+                    type="number"
+                    value={form.impressions}
+                    onChange={e => update('impressions', e.target.value)}
+                    className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary"
+                  />
+                </div>
+                <div>
+                  <label className="block text-xs font-medium text-text-tertiary mb-1">{t('campaigns.clicks')}</label>
+                  <input
+                    type="number"
+                    value={form.clicks}
+                    onChange={e => update('clicks', e.target.value)}
+                    className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary"
+                  />
+                </div>
+                <div>
+                  <label className="block text-xs font-medium text-text-tertiary mb-1">{t('campaigns.conversions')}</label>
+                  <input
+                    type="number"
+                    value={form.conversions}
+                    onChange={e => update('conversions', e.target.value)}
+                    className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary"
+                  />
+                </div>
+              </div>
+
+              <div>
+                <label className="block text-xs font-medium text-text-tertiary mb-1">{t('campaigns.notes')}</label>
+                <textarea
+                  value={form.notes}
+                  onChange={e => update('notes', e.target.value)}
+                  rows={2}
+                  className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary resize-none"
+                  placeholder="Performance notes..."
+                />
+              </div>
+            </div>
+          </CollapsibleSection>
+        )}
+
+        {/* Discussion Section (hidden in create mode) */}
+        {!isCreateMode && (
+          <CollapsibleSection title={t('campaigns.discussion')} noBorder>
+            <div className="px-5 pb-5">
+              <CommentsSection entityType="campaign" entityId={campaignId} />
+            </div>
+          </CollapsibleSection>
+        )}
+      </SlidePanel>
+
+      <Modal
+        isOpen={showDeleteConfirm}
+        onClose={() => setShowDeleteConfirm(false)}
+        title={t('campaigns.deleteCampaign')}
+        isConfirm
+        danger
+        confirmText={t('common.delete')}
+        onConfirm={confirmDelete}
+      >
+        {t('campaigns.deleteConfirm')}
+      </Modal>
+    </>
+  )
+}

client/src/components/CollapsibleSection.jsx

@@ -0,0 +1,24 @@
+import { useState } from 'react'
+import { ChevronDown, ChevronRight } from 'lucide-react'
+
+export default function CollapsibleSection({ title, defaultOpen = true, badge, children, noBorder }) {
+  const [open, setOpen] = useState(defaultOpen)
+
+  return (
+    <div className={noBorder ? '' : 'border-b border-border'}>
+      <button
+        onClick={() => setOpen(!open)}
+        className="w-full flex items-center gap-2 px-5 py-3 text-sm font-semibold text-text-primary hover:bg-surface-secondary transition-colors"
+      >
+        {open ? <ChevronDown className="w-4 h-4" /> : <ChevronRight className="w-4 h-4" />}
+        {title}
+        {badge}
+      </button>
+      <div className={`collapsible-content ${open ? 'is-open' : ''}`}>
+        <div className="collapsible-inner">
+          {children}
+        </div>
+      </div>
+    </div>
+  )
+}

client/src/components/CommentsSection.jsx

@@ -0,0 +1,195 @@
+import { useState, useEffect } from 'react'
+import { Send, Trash2, MessageCircle, Pencil, Check, X } from 'lucide-react'
+import { api, getInitials } from '../utils/api'
+import { useAuth } from '../contexts/AuthContext'
+import { useLanguage } from '../i18n/LanguageContext'
+
+function relativeTime(dateStr, t) {
+  const now = Date.now()
+  const then = new Date(dateStr).getTime()
+  const diffMs = now - then
+  const diffMin = Math.floor(diffMs / 60000)
+  if (diffMin < 1) return t('comments.justNow')
+  if (diffMin < 60) return t('comments.minutesAgo').replace('{n}', diffMin)
+  const diffHours = Math.floor(diffMin / 60)
+  if (diffHours < 24) return t('comments.hoursAgo').replace('{n}', diffHours)
+  const diffDays = Math.floor(diffHours / 24)
+  return t('comments.daysAgo').replace('{n}', diffDays)
+}
+
+export default function CommentsSection({ entityType, entityId }) {
+  const { user } = useAuth()
+  const { t } = useLanguage()
+  const [comments, setComments] = useState([])
+  const [newComment, setNewComment] = useState('')
+  const [sending, setSending] = useState(false)
+  const [editingId, setEditingId] = useState(null)
+  const [editContent, setEditContent] = useState('')
+
+  useEffect(() => {
+    if (entityType && entityId) loadComments()
+  }, [entityType, entityId])
+
+  const loadComments = async () => {
+    try {
+      const data = await api.get(`/comments/${entityType}/${entityId}`)
+      setComments(Array.isArray(data) ? data : (data.data || []))
+    } catch (err) {
+      console.error('Failed to load comments:', err)
+    }
+  }
+
+  const handleSend = async () => {
+    if (!newComment.trim() || sending) return
+    setSending(true)
+    try {
+      await api.post(`/comments/${entityType}/${entityId}`, { content: newComment.trim() })
+      setNewComment('')
+      loadComments()
+    } catch (err) {
+      console.error('Failed to send comment:', err)
+    } finally {
+      setSending(false)
+    }
+  }
+
+  const handleDelete = async (id) => {
+    try {
+      await api.delete(`/comments/${id}`)
+      loadComments()
+    } catch (err) {
+      console.error('Failed to delete comment:', err)
+    }
+  }
+
+  const startEdit = (comment) => {
+    setEditingId(comment.id)
+    setEditContent(comment.content)
+  }
+
+  const cancelEdit = () => {
+    setEditingId(null)
+    setEditContent('')
+  }
+
+  const saveEdit = async (id) => {
+    if (!editContent.trim()) return
+    try {
+      await api.patch(`/comments/${id}`, { content: editContent.trim() })
+      setEditingId(null)
+      setEditContent('')
+      loadComments()
+    } catch (err) {
+      console.error('Failed to edit comment:', err)
+    }
+  }
+
+  const canEdit = (comment) => {
+    if (!user) return false
+    return comment.user_id === user.id
+  }
+
+  const canDelete = (comment) => {
+    if (!user) return false
+    if (comment.user_id === user.id) return true
+    return user.role === 'superadmin' || user.role === 'manager'
+  }
+
+  return (
+    <div className="space-y-3">
+      <h4 className="text-sm font-semibold text-text-primary flex items-center gap-1.5">
+        <MessageCircle className="w-4 h-4" />
+        {t('comments.title')}
+        {comments.length > 0 && (
+          <span className="text-xs font-medium text-text-tertiary bg-surface-tertiary px-1.5 py-0.5 rounded-full">
+            {comments.length}
+          </span>
+        )}
+      </h4>
+
+      {comments.length === 0 && (
+        <p className="text-xs text-text-tertiary py-2">{t('comments.noComments')}</p>
+      )}
+
+      <div className="space-y-2 max-h-64 overflow-y-auto">
+        {comments.map(c => (
+          <div key={c.id} className="flex items-start gap-2 group">
+            <div className="w-7 h-7 rounded-full bg-brand-primary/10 text-brand-primary flex items-center justify-center text-[10px] font-bold shrink-0 mt-0.5">
+              {c.user_avatar ? (
+                <img src={c.user_avatar} className="w-full h-full rounded-full object-cover" alt="" />
+              ) : (
+                getInitials(c.user_name)
+              )}
+            </div>
+            <div className="flex-1 min-w-0">
+              <div className="flex items-center gap-2">
+                <span className="text-xs font-medium text-text-primary">{c.user_name}</span>
+                <span className="text-[10px] text-text-tertiary">{relativeTime(c.created_at, t)}</span>
+                <div className="flex items-center gap-0.5 ml-auto opacity-0 group-hover:opacity-100 transition-opacity">
+                  {canEdit(c) && editingId !== c.id && (
+                    <button
+                      onClick={() => startEdit(c)}
+                      className="p-0.5 rounded text-text-tertiary hover:text-brand-primary"
+                    >
+                      <Pencil className="w-3 h-3" />
+                    </button>
+                  )}
+                  {canDelete(c) && (
+                    <button
+                      onClick={() => handleDelete(c.id)}
+                      className="p-0.5 rounded text-text-tertiary hover:text-red-500"
+                    >
+                      <Trash2 className="w-3 h-3" />
+                    </button>
+                  )}
+                </div>
+              </div>
+              {editingId === c.id ? (
+                <div className="flex items-center gap-1.5 mt-1">
+                  <input
+                    type="text"
+                    value={editContent}
+                    onChange={e => setEditContent(e.target.value)}
+                    onKeyDown={e => {
+                      if (e.key === 'Enter') saveEdit(c.id)
+                      if (e.key === 'Escape') cancelEdit()
+                    }}
+                    autoFocus
+                    className="flex-1 px-2 py-1 text-xs border border-border rounded-md focus:outline-none focus:ring-1 focus:ring-brand-primary/30"
+                  />
+                  <button onClick={() => saveEdit(c.id)} className="p-0.5 rounded text-green-600 hover:bg-green-50">
+                    <Check className="w-3.5 h-3.5" />
+                  </button>
+                  <button onClick={cancelEdit} className="p-0.5 rounded text-text-tertiary hover:bg-surface-tertiary">
+                    <X className="w-3.5 h-3.5" />
+                  </button>
+                </div>
+              ) : (
+                <p className="text-xs text-text-secondary whitespace-pre-wrap break-words">{c.content}</p>
+              )}
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {/* Input */}
+      <div className="flex items-center gap-2">
+        <input
+          type="text"
+          value={newComment}
+          onChange={e => setNewComment(e.target.value)}
+          onKeyDown={e => e.key === 'Enter' && !e.shiftKey && handleSend()}
+          placeholder={t('comments.placeholder')}
+          className="flex-1 px-3 py-1.5 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary"
+        />
+        <button
+          onClick={handleSend}
+          disabled={!newComment.trim() || sending}
+          className="p-2 bg-brand-primary text-white rounded-lg hover:bg-brand-primary-light disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+        >
+          <Send className="w-4 h-4" />
+        </button>
+      </div>
+    </div>
+  )
+}

client/src/components/DatePresetPicker.jsx

@@ -0,0 +1,37 @@
+import { X } from 'lucide-react'
+import { useLanguage } from '../i18n/LanguageContext'
+import { DATE_PRESETS } from '../utils/datePresets'
+
+export default function DatePresetPicker({ onSelect, activePreset, onClear }) {
+  const { t } = useLanguage()
+
+  return (
+    <div className="flex items-center gap-1.5 flex-wrap">
+      {DATE_PRESETS.map(preset => (
+        <button
+          key={preset.key}
+          onClick={() => {
+            const { from, to } = preset.getRange()
+            onSelect(from, to, preset.key)
+          }}
+          className={`px-2.5 py-1 text-[11px] font-medium rounded-full border transition-colors ${
+            activePreset === preset.key
+              ? 'bg-brand-primary/10 border-brand-primary/30 text-brand-primary'
+              : 'bg-white border-border text-text-tertiary hover:text-text-primary hover:border-border-dark'
+          }`}
+        >
+          {t(preset.labelKey)}
+        </button>
+      ))}
+      {activePreset && (
+        <button
+          onClick={onClear}
+          className="p-1 text-text-tertiary hover:text-text-primary transition-colors"
+          title={t('dates.clearDates')}
+        >
+          <X className="w-3.5 h-3.5" />
+        </button>
+      )}
+    </div>
+  )
+}

client/src/components/EmptyState.jsx

@@ -0,0 +1,63 @@
+import { useLanguage } from '../i18n/LanguageContext'
+
+export default function EmptyState({
+  icon: Icon,
+  title,
+  description,
+  actionLabel,
+  onAction,
+  secondaryActionLabel,
+  onSecondaryAction,
+  compact = false
+}) {
+  const { t } = useLanguage()
+
+  if (compact) {
+    return (
+      <div className="py-8 text-center">
+        {Icon && <Icon className="w-8 h-8 text-text-tertiary mx-auto mb-2" />}
+        <p className="text-sm text-text-secondary">{title}</p>
+        {description && <p className="text-xs text-text-tertiary mt-1">{description}</p>}
+        {actionLabel && (
+          <button
+            onClick={onAction}
+            className="mt-3 text-sm text-brand-primary hover:text-brand-primary-light font-medium"
+          >
+            {actionLabel}
+          </button>
+        )}
+      </div>
+    )
+  }
+
+  return (
+    <div className="py-16 text-center">
+      {Icon && (
+        <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-surface-tertiary mb-4">
+          <Icon className="w-8 h-8 text-text-tertiary" />
+        </div>
+      )}
+      <h3 className="text-lg font-semibold text-text-primary mb-2">{title}</h3>
+      {description && <p className="text-sm text-text-secondary max-w-md mx-auto mb-6">{description}</p>}
+      
+      <div className="flex items-center justify-center gap-3">
+        {actionLabel && (
+          <button
+            onClick={onAction}
+            className="px-5 py-2.5 bg-brand-primary text-white rounded-lg text-sm font-medium hover:bg-brand-primary-light shadow-sm transition-all hover:-translate-y-0.5"
+          >
+            {actionLabel}
+          </button>
+        )}
+        {secondaryActionLabel && (
+          <button
+            onClick={onSecondaryAction}
+            className="px-5 py-2.5 bg-white border border-border text-text-primary rounded-lg text-sm font-medium hover:bg-surface-secondary transition-colors"
+          >
+            {secondaryActionLabel}
+          </button>
+        )}
+      </div>
+    </div>
+  )
+}

client/src/components/FormInput.jsx

@@ -0,0 +1,78 @@
+import { AlertCircle, CheckCircle } from 'lucide-react'
+
+export default function FormInput({
+  label,
+  type = 'text',
+  value,
+  onChange,
+  placeholder,
+  required = false,
+  error,
+  success,
+  helpText,
+  disabled = false,
+  className = '',
+  rows,
+  ...props
+}) {
+  const hasError = Boolean(error)
+  const hasSuccess = Boolean(success)
+  const isTextarea = type === 'textarea'
+
+  const inputClasses = `
+    w-full px-3 py-2 text-sm border rounded-lg
+    focus:outline-none focus:ring-2 transition-all
+    ${hasError 
+      ? 'border-red-300 focus:border-red-500 focus:ring-red-500/20' 
+      : hasSuccess
+      ? 'border-emerald-300 focus:border-emerald-500 focus:ring-emerald-500/20'
+      : 'border-border focus:border-brand-primary focus:ring-brand-primary/20'
+    }
+    ${disabled ? 'bg-surface-tertiary cursor-not-allowed opacity-60' : 'bg-white'}
+    ${className}
+  `.trim()
+
+  const InputComponent = isTextarea ? 'textarea' : 'input'
+
+  return (
+    <div className="space-y-1">
+      {label && (
+        <label className="block text-sm font-medium text-text-primary">
+          {label}
+          {required && <span className="text-red-500 ml-0.5">*</span>}
+        </label>
+      )}
+      
+      <div className="relative">
+        <InputComponent
+          type={isTextarea ? undefined : type}
+          value={value}
+          onChange={onChange}
+          placeholder={placeholder}
+          disabled={disabled}
+          className={inputClasses}
+          rows={rows}
+          {...props}
+        />
+        
+        {/* Validation icon */}
+        {(hasError || hasSuccess) && (
+          <div className="absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none">
+            {hasError ? (
+              <AlertCircle className="w-4 h-4 text-red-500" />
+            ) : (
+              <CheckCircle className="w-4 h-4 text-emerald-500" />
+            )}
+          </div>
+        )}
+      </div>
+
+      {/* Helper text or error message */}
+      {(error || success || helpText) && (
+        <p className={`text-xs ${hasError ? 'text-red-600' : hasSuccess ? 'text-emerald-600' : 'text-text-tertiary'}`}>
+          {error || success || helpText}
+        </p>
+      )}
+    </div>
+  )
+}

client/src/components/Header.jsx

@@ -1,7 +1,9 @@
 import { useState, useRef, useEffect } from 'react'
 import { useLocation } from 'react-router-dom'
-import { Bell, ChevronDown, LogOut, Settings, User, Shield } from 'lucide-react'
+import { Bell, ChevronDown, LogOut, Shield, Lock, AlertCircle, CheckCircle } from 'lucide-react'
 import { useAuth } from '../contexts/AuthContext'
+import { getInitials, api } from '../utils/api'
+import Modal from './Modal'
 
 const pageTitles = {
   '/': 'Dashboard',
@@ -24,12 +26,21 @@ const ROLE_INFO = {
 export default function Header() {
   const { user, logout } = useAuth()
   const [showDropdown, setShowDropdown] = useState(false)
+  const [showPasswordModal, setShowPasswordModal] = useState(false)
+  const [passwordForm, setPasswordForm] = useState({ currentPassword: '', newPassword: '', confirmPassword: '' })
+  const [passwordError, setPasswordError] = useState('')
+  const [passwordSuccess, setPasswordSuccess] = useState('')
+  const [passwordSaving, setPasswordSaving] = useState(false)
   const dropdownRef = useRef(null)
   const location = useLocation()
 
-  const pageTitle = pageTitles[location.pathname] || 
-    (location.pathname.startsWith('/projects/') ? 'Project Details' : 
-     location.pathname.startsWith('/campaigns/') ? 'Campaign Details' : 'Page')
+  function getPageTitle(pathname) {
+    if (pageTitles[pathname]) return pageTitles[pathname]
+    if (pathname.startsWith('/projects/')) return 'Project Details'
+    if (pathname.startsWith('/campaigns/')) return 'Campaign Details'
+    return 'Page'
+  }
+  const pageTitle = getPageTitle(location.pathname)
 
   useEffect(() => {
     const handleClickOutside = (e) => {
@@ -41,14 +52,45 @@ export default function Header() {
     return () => document.removeEventListener('mousedown', handleClickOutside)
   }, [])
 
-  const getInitials = (name) => {
-    if (!name) return '?'
-    return name.split(' ').map(w => w[0]).join('').slice(0, 2).toUpperCase()
+  const handlePasswordChange = async () => {
+    setPasswordError('')
+    setPasswordSuccess('')
+    if (passwordForm.newPassword !== passwordForm.confirmPassword) {
+      setPasswordError('New passwords do not match')
+      return
+    }
+    if (passwordForm.newPassword.length < 6) {
+      setPasswordError('New password must be at least 6 characters')
+      return
+    }
+    setPasswordSaving(true)
+    try {
+      await api.patch('/users/me/password', {
+        currentPassword: passwordForm.currentPassword,
+        newPassword: passwordForm.newPassword,
+      })
+      setPasswordSuccess('Password updated successfully')
+      setPasswordForm({ currentPassword: '', newPassword: '', confirmPassword: '' })
+      setTimeout(() => setShowPasswordModal(false), 1500)
+    } catch (err) {
+      setPasswordError(err.message || 'Failed to change password')
+    } finally {
+      setPasswordSaving(false)
+    }
+  }
+
+  const openPasswordModal = () => {
+    setShowDropdown(false)
+    setPasswordForm({ currentPassword: '', newPassword: '', confirmPassword: '' })
+    setPasswordError('')
+    setPasswordSuccess('')
+    setShowPasswordModal(true)
   }
 
   const roleInfo = ROLE_INFO[user?.role] || ROLE_INFO.contributor
 
   return (
+    <>
     <header className="h-16 bg-white border-b border-border flex items-center justify-between px-6 shrink-0 sticky top-0 z-20">
       {/* Page title */}
       <div>
@@ -70,8 +112,8 @@ export default function Header() {
             className="flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-surface-tertiary transition-colors"
           >
             <div className={`w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-semibold ${
-              user?.role === 'superadmin' 
-                ? 'bg-gradient-to-br from-purple-500 to-pink-500' 
+              user?.role === 'superadmin'
+                ? 'bg-gradient-to-br from-purple-500 to-pink-500'
                 : 'bg-gradient-to-br from-blue-500 to-indigo-500'
             }`}>
               {getInitials(user?.name)}
@@ -103,7 +145,7 @@ export default function Header() {
               <div className="py-2">
                 {user?.role === 'superadmin' && (
                   <button
-                    onClick={() => { 
+                    onClick={() => {
                       setShowDropdown(false)
                       window.location.href = '/users'
                     }}
@@ -113,9 +155,17 @@ export default function Header() {
                     <span className="text-sm text-text-primary">User Management</span>
                   </button>
                 )}
-                
+
                 <button
-                  onClick={() => { 
+                  onClick={openPasswordModal}
+                  className="w-full flex items-center gap-3 px-4 py-2.5 hover:bg-surface-secondary transition-colors text-left"
+                >
+                  <Lock className="w-4 h-4 text-text-tertiary" />
+                  <span className="text-sm text-text-primary">Change Password</span>
+                </button>
+
+                <button
+                  onClick={() => {
                     setShowDropdown(false)
                     logout()
                   }}
@@ -130,5 +180,74 @@ export default function Header() {
         </div>
       </div>
     </header>
+
+    {/* Change Password Modal */}
+    <Modal isOpen={showPasswordModal} onClose={() => setShowPasswordModal(false)} title="Change Password" size="md">
+      <div className="space-y-4">
+        <div>
+          <label className="block text-sm font-medium text-text-primary mb-1">Current Password</label>
+          <input
+            type="password"
+            value={passwordForm.currentPassword}
+            onChange={e => { setPasswordForm(f => ({ ...f, currentPassword: e.target.value })); setPasswordError('') }}
+            className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary"
+            placeholder="••••••••"
+          />
+        </div>
+        <div>
+          <label className="block text-sm font-medium text-text-primary mb-1">New Password</label>
+          <input
+            type="password"
+            value={passwordForm.newPassword}
+            onChange={e => { setPasswordForm(f => ({ ...f, newPassword: e.target.value })); setPasswordError('') }}
+            className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary"
+            placeholder="••••••••"
+            minLength={6}
+          />
+        </div>
+        <div>
+          <label className="block text-sm font-medium text-text-primary mb-1">Confirm New Password</label>
+          <input
+            type="password"
+            value={passwordForm.confirmPassword}
+            onChange={e => { setPasswordForm(f => ({ ...f, confirmPassword: e.target.value })); setPasswordError('') }}
+            className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary"
+            placeholder="••••••••"
+            minLength={6}
+          />
+        </div>
+
+        {passwordError && (
+          <div className="flex items-center gap-2 p-3 bg-red-500/10 border border-red-500/30 rounded-lg">
+            <AlertCircle className="w-4 h-4 text-red-500 shrink-0" />
+            <p className="text-sm text-red-500">{passwordError}</p>
+          </div>
+        )}
+
+        {passwordSuccess && (
+          <div className="flex items-center gap-2 p-3 bg-green-500/10 border border-green-500/30 rounded-lg">
+            <CheckCircle className="w-4 h-4 text-green-500 shrink-0" />
+            <p className="text-sm text-green-500">{passwordSuccess}</p>
+          </div>
+        )}
+
+        <div className="flex items-center justify-end gap-3 pt-4 border-t border-border">
+          <button
+            onClick={() => setShowPasswordModal(false)}
+            className="px-4 py-2 text-sm font-medium text-text-secondary hover:bg-surface-tertiary rounded-lg"
+          >
+            Cancel
+          </button>
+          <button
+            onClick={handlePasswordChange}
+            disabled={!passwordForm.currentPassword || !passwordForm.newPassword || !passwordForm.confirmPassword || passwordSaving}
+            className="px-5 py-2 bg-brand-primary text-white rounded-lg text-sm font-medium hover:bg-brand-primary-light disabled:opacity-50 disabled:cursor-not-allowed shadow-sm"
+          >
+            {passwordSaving ? 'Saving...' : 'Update Password'}
+          </button>
+        </div>
+      </div>
+    </Modal>
+    </>
   )
 }

client/src/components/InteractiveTimeline.jsx

@@ -0,0 +1,515 @@
+import { useState, useRef, useEffect, useCallback, useMemo } from 'react'
+import { format, differenceInDays, startOfDay, addDays, isBefore, isAfter } from 'date-fns'
+import { Calendar, Rows3, Rows4 } from 'lucide-react'
+
+const STATUS_COLORS = {
+  todo: 'bg-gray-500',
+  in_progress: 'bg-blue-500',
+  done: 'bg-emerald-500',
+  planning: 'bg-amber-500',
+  active: 'bg-blue-500',
+  paused: 'bg-orange-500',
+  completed: 'bg-emerald-500',
+  cancelled: 'bg-red-400',
+  draft: 'bg-gray-400',
+  in_review: 'bg-yellow-500',
+  approved: 'bg-indigo-500',
+  scheduled: 'bg-purple-500',
+  published: 'bg-emerald-500',
+  planned: 'bg-amber-400',
+  // tracks
+  organic_social: 'bg-green-500',
+  paid_social: 'bg-blue-500',
+  paid_search: 'bg-amber-500',
+  seo_content: 'bg-purple-500',
+  production: 'bg-red-500',
+}
+
+const PRIORITY_BORDER = {
+  urgent: 'ring-2 ring-red-400',
+  high: 'ring-2 ring-orange-300',
+  medium: '',
+  low: '',
+}
+
+const ZOOM_LEVELS = [
+  { key: 'day', label: 'Day', pxPerDay: 48 },
+  { key: 'week', label: 'Week', pxPerDay: 20 },
+]
+
+function getInitials(name) {
+  if (!name) return '?'
+  return name.split(' ').map(w => w[0]).join('').toUpperCase().slice(0, 2)
+}
+
+export default function InteractiveTimeline({ items = [], mapItem, onDateChange, onItemClick, readOnly = false }) {
+  const containerRef = useRef(null)
+  const didDragRef = useRef(false)
+  const optimisticRef = useRef({}) // { [itemId]: { startDate, endDate } } — keeps bar in place until fresh data arrives
+  const [zoomIdx, setZoomIdx] = useState(0)
+  const [barMode, setBarMode] = useState('expanded') // 'compact' | 'expanded'
+  const [tooltip, setTooltip] = useState(null)
+  const [dragState, setDragState] = useState(null) // { itemId, mode: 'move'|'resize-left'|'resize-right', startX, origStart, origEnd }
+  const dragStateRef = useRef(null)
+
+  const pxPerDay = ZOOM_LEVELS[zoomIdx].pxPerDay
+  const today = useMemo(() => startOfDay(new Date()), [])
+
+  // Clear optimistic overrides when fresh data arrives
+  useEffect(() => {
+    optimisticRef.current = {}
+  }, [items])
+
+  // Map items
+  const mapped = useMemo(() => {
+    return items.map(raw => {
+      const m = mapItem(raw)
+      const opt = optimisticRef.current[m.id]
+      return {
+        ...m,
+        _raw: raw,
+        startDate: opt?.startDate || (m.startDate ? startOfDay(new Date(m.startDate)) : null),
+        endDate: opt?.endDate || (m.endDate ? startOfDay(new Date(m.endDate)) : null),
+      }
+    })
+  }, [items, mapItem])
+
+  // Compute time range
+  const { earliest, latest, totalDays, days } = useMemo(() => {
+    let earliest = addDays(today, -7)
+    let latest = addDays(today, 28)
+
+    mapped.forEach(item => {
+      const s = item.startDate || today
+      const e = item.endDate || addDays(s, 3)
+      if (isBefore(s, earliest)) earliest = addDays(s, -3)
+      if (isAfter(e, latest)) latest = addDays(e, 7)
+    })
+
+    const totalDays = differenceInDays(latest, earliest) + 1
+    const days = []
+    for (let i = 0; i < totalDays; i++) {
+      days.push(addDays(earliest, i))
+    }
+    return { earliest, latest, totalDays, days }
+  }, [mapped, today])
+
+  // Auto-scroll to today on mount
+  useEffect(() => {
+    if (containerRef.current) {
+      const todayOffset = differenceInDays(today, earliest) * pxPerDay
+      containerRef.current.scrollLeft = Math.max(0, todayOffset - 200)
+    }
+  }, [earliest, pxPerDay, today])
+
+  // Drag handlers
+  const handleMouseDown = useCallback((e, item, mode) => {
+    if (readOnly || !onDateChange) return
+    e.preventDefault()
+    e.stopPropagation()
+    didDragRef.current = false
+    const initial = {
+      itemId: item.id,
+      mode,
+      startX: e.clientX,
+      origStart: item.startDate || today,
+      origEnd: item.endDate || addDays(item.startDate || today, 3),
+    }
+    dragStateRef.current = initial
+    setDragState(initial)
+  }, [readOnly, onDateChange, today])
+
+  useEffect(() => {
+    if (!dragState) return
+
+    const handleMouseMove = (e) => {
+      const cur = dragStateRef.current
+      if (!cur) return
+      const dx = e.clientX - cur.startX
+      const dayDelta = Math.round(dx / pxPerDay)
+      if (dayDelta === 0) return
+
+      didDragRef.current = true
+      const newState = { ...cur }
+
+      if (cur.mode === 'move') {
+        newState.currentStart = addDays(cur.origStart, dayDelta)
+        newState.currentEnd = addDays(cur.origEnd, dayDelta)
+      } else if (cur.mode === 'resize-left') {
+        const newStart = addDays(cur.origStart, dayDelta)
+        if (isBefore(newStart, cur.origEnd)) {
+          newState.currentStart = newStart
+          newState.currentEnd = cur.origEnd
+        }
+      } else if (cur.mode === 'resize-right') {
+        const newEnd = addDays(cur.origEnd, dayDelta)
+        if (isAfter(newEnd, cur.origStart)) {
+          newState.currentStart = cur.origStart
+          newState.currentEnd = newEnd
+        }
+      }
+      dragStateRef.current = newState
+      setDragState(newState)
+    }
+
+    const handleMouseUp = () => {
+      const prev = dragStateRef.current
+      dragStateRef.current = null
+      setDragState(null)
+      if (prev && (prev.currentStart || prev.currentEnd) && onDateChange) {
+        const startDate = prev.currentStart || prev.origStart
+        const endDate = prev.currentEnd || prev.origEnd
+        // Keep bar in place visually until fresh data arrives
+        optimisticRef.current[prev.itemId] = { startDate, endDate }
+        onDateChange(prev.itemId, {
+          startDate: format(startDate, 'yyyy-MM-dd'),
+          endDate: format(endDate, 'yyyy-MM-dd'),
+        })
+      }
+    }
+
+    document.addEventListener('mousemove', handleMouseMove)
+    document.addEventListener('mouseup', handleMouseUp)
+    return () => {
+      document.removeEventListener('mousemove', handleMouseMove)
+      document.removeEventListener('mouseup', handleMouseUp)
+    }
+  }, [dragState?.itemId, pxPerDay, onDateChange])
+
+  const getBarPosition = useCallback((item) => {
+    let start, end
+
+    // If this item is being dragged, use the drag state
+    if (dragState && dragState.itemId === item.id && (dragState.currentStart || dragState.currentEnd)) {
+      start = dragState.currentStart || item.startDate || today
+      end = dragState.currentEnd || item.endDate || addDays(start, 3)
+    } else {
+      // Check optimistic position (keeps bar in place after drop, before API data refreshes)
+      const opt = optimisticRef.current[item.id]
+      start = opt?.startDate || item.startDate || today
+      end = opt?.endDate || item.endDate || addDays(start, 3)
+    }
+
+    // Ensure end is after start
+    if (!isAfter(end, start)) end = addDays(start, 1)
+
+    const left = differenceInDays(start, earliest) * pxPerDay
+    const width = Math.max(pxPerDay, (differenceInDays(end, start) + 1) * pxPerDay)
+    return { left, width }
+  }, [earliest, pxPerDay, today, dragState])
+
+  const scrollToToday = () => {
+    if (containerRef.current) {
+      const todayOffset = differenceInDays(today, earliest) * pxPerDay
+      containerRef.current.scrollTo({ left: Math.max(0, todayOffset - 200), behavior: 'smooth' })
+    }
+  }
+
+  const isExpanded = barMode === 'expanded'
+  const rowHeight = isExpanded ? 100 : 52
+  const barHeight = isExpanded ? 84 : 36
+  const headerHeight = 48
+  const labelWidth = isExpanded ? 280 : 220
+  const todayOffset = differenceInDays(today, earliest) * pxPerDay
+
+  if (items.length === 0) {
+    return (
+      <div className="bg-white rounded-xl border border-border py-16 text-center">
+        <Calendar className="w-12 h-12 text-text-tertiary mx-auto mb-3" />
+        <p className="text-text-secondary font-medium">No items to display</p>
+        <p className="text-sm text-text-tertiary mt-1">Add items with dates to see the timeline</p>
+      </div>
+    )
+  }
+
+  return (
+    <div className="bg-white rounded-xl border border-border overflow-hidden">
+      {/* Toolbar */}
+      <div className="flex items-center justify-between px-4 py-2 border-b border-border bg-surface-secondary">
+        <div className="flex items-center gap-2">
+          {ZOOM_LEVELS.map((z, i) => (
+            <button
+              key={z.key}
+              onClick={() => setZoomIdx(i)}
+              className={`px-3 py-1 text-xs font-medium rounded-md transition-colors ${
+                zoomIdx === i
+                  ? 'bg-brand-primary text-white shadow-sm'
+                  : 'text-text-tertiary hover:text-text-primary hover:bg-surface-tertiary'
+              }`}
+            >
+              {z.label}
+            </button>
+          ))}
+        </div>
+        <div className="flex items-center gap-2">
+          <button
+            onClick={() => setBarMode(m => m === 'compact' ? 'expanded' : 'compact')}
+            className="flex items-center gap-1.5 px-3 py-1 text-xs font-medium text-text-secondary hover:text-text-primary hover:bg-surface-tertiary rounded-md transition-colors"
+            title={isExpanded ? 'Compact bars' : 'Expanded bars'}
+          >
+            {isExpanded ? <Rows4 className="w-3.5 h-3.5" /> : <Rows3 className="w-3.5 h-3.5" />}
+            {isExpanded ? 'Compact' : 'Expand'}
+          </button>
+          <button
+            onClick={scrollToToday}
+            className="flex items-center gap-1.5 px-3 py-1 text-xs font-medium text-brand-primary hover:bg-brand-primary/10 rounded-md transition-colors"
+          >
+            <Calendar className="w-3.5 h-3.5" />
+            Today
+          </button>
+        </div>
+      </div>
+
+      {/* Timeline */}
+      <div ref={containerRef} className="overflow-x-auto relative" style={{ cursor: dragState ? 'grabbing' : undefined }}>
+        <div style={{ minWidth: `${labelWidth + totalDays * pxPerDay}px` }}>
+          {/* Day header */}
+          <div className="flex sticky top-0 z-20 bg-white border-b border-border" style={{ height: headerHeight }}>
+            <div className="shrink-0 border-r border-border bg-surface-secondary flex items-center px-4 sticky left-0 z-30" style={{ width: labelWidth }}>
+              <span className="text-xs font-semibold text-text-tertiary uppercase tracking-wider">Item</span>
+            </div>
+            <div className="flex relative">
+              {days.map((day, i) => {
+                const isToday = differenceInDays(day, today) === 0
+                const isWeekend = day.getDay() === 0 || day.getDay() === 6
+                const isMonthStart = day.getDate() === 1
+                return (
+                  <div
+                    key={i}
+                    style={{ width: pxPerDay, minWidth: pxPerDay }}
+                    className={`flex flex-col items-center justify-center border-r border-border-light text-[10px] leading-tight ${
+                      isToday ? 'bg-red-50 font-bold text-red-600' :
+                      isWeekend ? 'bg-surface-tertiary/40 text-text-tertiary' :
+                      'text-text-tertiary'
+                    } ${isMonthStart ? 'border-l-2 border-l-text-tertiary/30' : ''}`}
+                  >
+                    {pxPerDay >= 30 && <div>{format(day, 'd')}</div>}
+                    {pxPerDay >= 40 && <div className="text-[8px] uppercase">{format(day, 'EEE')}</div>}
+                    {pxPerDay < 30 && day.getDate() % 7 === 1 && <div>{format(day, 'd')}</div>}
+                  </div>
+                )
+              })}
+            </div>
+          </div>
+
+          {/* Rows */}
+          {mapped.map((item, idx) => {
+            const { left, width } = getBarPosition(item)
+            const statusColor = STATUS_COLORS[item.status] || STATUS_COLORS[item.type] || 'bg-gray-400'
+            const priorityRing = PRIORITY_BORDER[item.priority] || ''
+            const isDragging = dragState?.itemId === item.id
+
+            return (
+              <div
+                key={item.id}
+                className={`flex border-b border-border-light group/row hover:bg-surface-secondary/50 ${isDragging ? 'bg-blue-50/30' : ''}`}
+                style={{ height: rowHeight }}
+              >
+                {/* Label column */}
+                <div
+                  className={`shrink-0 border-r border-border flex ${isExpanded ? 'flex-col justify-center gap-1' : 'items-center gap-2'} px-3 overflow-hidden sticky left-0 z-10 bg-white group-hover/row:bg-surface-secondary/50`}
+                  style={{ width: labelWidth }}
+                >
+                  {isExpanded ? (
+                    <>
+                      <div className="flex items-center gap-2">
+                        {item.thumbnailUrl ? (
+                          <div className="w-8 h-8 rounded overflow-hidden shrink-0">
+                            <img src={item.thumbnailUrl} alt="" className="w-full h-full object-cover" />
+                          </div>
+                        ) : item.assigneeName ? (
+                          <div className="w-6 h-6 rounded-full bg-brand-primary/10 text-brand-primary flex items-center justify-center text-[9px] font-bold shrink-0">
+                            {getInitials(item.assigneeName)}
+                          </div>
+                        ) : null}
+                        <span className="text-sm font-semibold text-text-primary truncate">{item.label}</span>
+                      </div>
+                      {item.description && (
+                        <p className="text-[11px] text-text-tertiary line-clamp-2 leading-tight">{item.description}</p>
+                      )}
+                      {item.tags && item.tags.length > 0 && (
+                        <div className="flex items-center gap-1 flex-wrap">
+                          {item.tags.slice(0, 4).map((tag, i) => (
+                            <span key={i} className="text-[9px] px-1.5 py-0.5 rounded bg-surface-tertiary text-text-secondary font-medium">{tag}</span>
+                          ))}
+                        </div>
+                      )}
+                    </>
+                  ) : (
+                    <>
+                      {item.thumbnailUrl ? (
+                        <div className="w-6 h-6 rounded overflow-hidden shrink-0">
+                          <img src={item.thumbnailUrl} alt="" className="w-full h-full object-cover" />
+                        </div>
+                      ) : item.assigneeName ? (
+                        <div className="w-6 h-6 rounded-full bg-brand-primary/10 text-brand-primary flex items-center justify-center text-[9px] font-bold shrink-0">
+                          {getInitials(item.assigneeName)}
+                        </div>
+                      ) : null}
+                      <span className="text-xs font-medium text-text-primary truncate">{item.label}</span>
+                    </>
+                  )}
+                </div>
+
+                {/* Bar area */}
+                <div className="relative flex-1" style={{ height: rowHeight }}>
+                  {/* Today line */}
+                  {todayOffset >= 0 && (
+                    <div
+                      className="absolute top-0 bottom-0 w-0.5 bg-red-400 z-10"
+                      style={{ left: `${todayOffset + pxPerDay / 2}px` }}
+                    >
+                      {idx === 0 && (
+                        <div className="absolute -top-0 left-1 text-[8px] font-bold text-red-500 bg-red-50 px-1 rounded whitespace-nowrap">
+                          Today
+                        </div>
+                      )}
+                    </div>
+                  )}
+
+                  {/* The bar */}
+                  <div
+                    className={`absolute rounded-lg ${statusColor} ${priorityRing} shadow-sm transition-shadow hover:shadow-md select-none overflow-hidden group ${
+                      !readOnly && onDateChange ? 'cursor-grab active:cursor-grabbing' : 'cursor-pointer'
+                    } ${isDragging ? 'opacity-80 shadow-lg' : ''}`}
+                    style={{
+                      left: `${left}px`,
+                      width: `${width}px`,
+                      height: `${barHeight}px`,
+                      top: isExpanded ? '8px' : '8px',
+                    }}
+                    onMouseDown={(e) => handleMouseDown(e, item, 'move')}
+                    onClick={(e) => {
+                      if (didDragRef.current) {
+                        didDragRef.current = false
+                        return
+                      }
+                      if (onItemClick) {
+                        onItemClick(item._raw)
+                      }
+                    }}
+                    onMouseEnter={(e) => {
+                      if (!dragState) {
+                        const rect = e.currentTarget.getBoundingClientRect()
+                        setTooltip({
+                          item,
+                          x: rect.left + rect.width / 2,
+                          y: rect.top - 8,
+                        })
+                      }
+                    }}
+                    onMouseLeave={() => setTooltip(null)}
+                  >
+                    {/* Left resize handle */}
+                    {!readOnly && onDateChange && (
+                      <div
+                        className="absolute left-0 top-0 bottom-0 w-2 cursor-col-resize hover:bg-white/30 z-10"
+                        onMouseDown={(e) => handleMouseDown(e, item, 'resize-left')}
+                      />
+                    )}
+
+                    {/* Bar content */}
+                    {isExpanded ? (
+                      <div className="flex flex-col gap-0.5 px-3 py-1.5 flex-1 min-w-0 h-full">
+                        <div className="flex items-center gap-1.5">
+                          {item.assigneeName && width > 60 && (
+                            <span className="text-[9px] font-bold text-white/80 bg-white/20 w-5 h-5 rounded-full flex items-center justify-center shrink-0">
+                              {getInitials(item.assigneeName)}
+                            </span>
+                          )}
+                          {width > 80 && (
+                            <span className="text-xs font-semibold text-white truncate">
+                              {item.label}
+                            </span>
+                          )}
+                          {width > 120 && item.status && (
+                            <span className="text-[9px] text-white/70 bg-white/15 px-1.5 py-0.5 rounded ml-auto shrink-0">
+                              {item.status.replace(/_/g, ' ')}
+                            </span>
+                          )}
+                        </div>
+                        {width > 100 && item.description && (
+                          <p className="text-[10px] text-white/60 line-clamp-2 leading-tight">
+                            {item.description}
+                          </p>
+                        )}
+                        {width > 80 && (
+                          <div className="flex items-center gap-1.5 mt-auto">
+                            {item.tags && item.tags.slice(0, 3).map((tag, i) => (
+                              <span key={i} className="text-[8px] px-1 py-0.5 rounded bg-white/15 text-white/70 font-medium">{tag}</span>
+                            ))}
+                            {width > 140 && item.startDate && item.endDate && (
+                              <span className="text-[8px] text-white/50 ml-auto">
+                                {format(item.startDate, 'MMM d')} – {format(item.endDate, 'MMM d')}
+                              </span>
+                            )}
+                          </div>
+                        )}
+                      </div>
+                    ) : (
+                      <div className="flex items-center gap-1.5 px-3 flex-1 min-w-0 h-full">
+                        {item.assigneeName && width > 60 && (
+                          <span className="text-[9px] font-bold text-white/80 bg-white/20 w-5 h-5 rounded-full flex items-center justify-center shrink-0">
+                            {getInitials(item.assigneeName)}
+                          </span>
+                        )}
+                        {width > 80 && (
+                          <span className="text-xs font-medium text-white truncate">
+                            {item.label}
+                          </span>
+                        )}
+                      </div>
+                    )}
+
+                    {/* Right resize handle */}
+                    {!readOnly && onDateChange && (
+                      <div
+                        className="absolute right-0 top-0 bottom-0 w-2 cursor-col-resize hover:bg-white/30 z-10"
+                        onMouseDown={(e) => handleMouseDown(e, item, 'resize-right')}
+                      />
+                    )}
+                  </div>
+                </div>
+              </div>
+            )
+          })}
+        </div>
+      </div>
+
+      {/* Tooltip */}
+      {tooltip && !dragState && (
+        <div
+          className="fixed z-50 pointer-events-none"
+          style={{
+            left: tooltip.x,
+            top: tooltip.y,
+            transform: 'translate(-50%, -100%)',
+          }}
+        >
+          <div className="bg-gray-900 text-white text-xs rounded-lg px-3 py-2 shadow-lg max-w-xs">
+            <div className="font-semibold mb-1">{tooltip.item.label}</div>
+            <div className="text-gray-300 space-y-0.5">
+              {tooltip.item.startDate && (
+                <div>Start: {format(tooltip.item.startDate, 'MMM d, yyyy')}</div>
+              )}
+              {tooltip.item.endDate && (
+                <div>End: {format(tooltip.item.endDate, 'MMM d, yyyy')}</div>
+              )}
+              {tooltip.item.assigneeName && (
+                <div>Assignee: {tooltip.item.assigneeName}</div>
+              )}
+              {tooltip.item.status && (
+                <div>Status: {tooltip.item.status.replace(/_/g, ' ')}</div>
+              )}
+            </div>
+            {!readOnly && onDateChange && (
+              <div className="text-gray-400 mt-1 text-[10px] italic">
+                Drag to move · Drag edges to resize
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}

client/src/components/IssueCard.jsx

@@ -0,0 +1,56 @@
+const PRIORITY_CONFIG = {
+  low: { label: 'Low', dot: 'bg-text-tertiary' },
+  medium: { label: 'Medium', dot: 'bg-blue-500' },
+  high: { label: 'High', dot: 'bg-orange-500' },
+  urgent: { label: 'Urgent', dot: 'bg-red-500' },
+}
+
+const TYPE_LABELS = {
+  request: 'Request',
+  correction: 'Correction',
+  complaint: 'Complaint',
+  suggestion: 'Suggestion',
+  other: 'Other',
+}
+
+export default function IssueCard({ issue, onClick }) {
+  const priority = PRIORITY_CONFIG[issue.priority] || PRIORITY_CONFIG.medium
+
+  const formatDate = (dateStr) => {
+    if (!dateStr) return ''
+    return new Date(dateStr).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })
+  }
+
+  return (
+    <div
+      onClick={() => onClick?.(issue)}
+      className="bg-surface border border-border rounded-lg p-3 cursor-pointer hover:border-brand-primary/30 hover:shadow-sm transition-all"
+    >
+      {/* Priority dot + Title */}
+      <div className="flex items-start gap-2 mb-2">
+        <span className={`w-2 h-2 rounded-full mt-1.5 shrink-0 ${priority.dot}`} />
+        <h4 className="text-sm font-medium text-text-primary line-clamp-2">{issue.title}</h4>
+      </div>
+
+      {/* Metadata */}
+      <div className="flex items-center gap-2 flex-wrap">
+        {issue.category && (
+          <span className="text-[10px] px-1.5 py-0.5 rounded bg-surface-tertiary text-text-secondary font-medium">
+            {issue.category}
+          </span>
+        )}
+        {issue.brand_name && (
+          <span className="text-[10px] px-1.5 py-0.5 rounded bg-brand-primary/10 text-brand-primary font-medium">
+            {issue.brand_name}
+          </span>
+        )}
+      </div>
+
+      {/* Footer */}
+      <div className="flex items-center justify-between mt-2 text-[10px] text-text-tertiary">
+        <span className="truncate max-w-[60%]">{issue.submitter_name}</span>
+        <span>{formatDate(issue.created_at || issue.CreatedAt)}</span>
+      </div>
+    </div>
+  )
+}

client/src/components/IssueDetailPanel.jsx

@@ -0,0 +1,584 @@
+import { useState, useEffect, useContext } from 'react'
+import { X, Copy, Eye, Lock, Send, Upload, FileText, Trash2, Check, Clock, CheckCircle2, XCircle } from 'lucide-react'
+import { api } from '../utils/api'
+import SlidePanel from './SlidePanel'
+import FormInput from './FormInput'
+import Modal from './Modal'
+import { AppContext } from '../App'
+
+const STATUS_CONFIG = {
+  new: { label: 'New', bg: 'bg-purple-100', text: 'text-purple-700', dot: 'bg-purple-500' },
+  acknowledged: { label: 'Acknowledged', bg: 'bg-blue-100', text: 'text-blue-700', dot: 'bg-blue-500' },
+  in_progress: { label: 'In Progress', bg: 'bg-amber-100', text: 'text-amber-700', dot: 'bg-amber-500' },
+  resolved: { label: 'Resolved', bg: 'bg-emerald-100', text: 'text-emerald-700', dot: 'bg-emerald-500' },
+  declined: { label: 'Declined', bg: 'bg-surface-tertiary', text: 'text-text-secondary', dot: 'bg-text-tertiary' },
+}
+
+const PRIORITY_CONFIG = {
+  low: { label: 'Low', bg: 'bg-surface-tertiary', text: 'text-text-secondary' },
+  medium: { label: 'Medium', bg: 'bg-blue-100', text: 'text-blue-700' },
+  high: { label: 'High', bg: 'bg-orange-100', text: 'text-orange-700' },
+  urgent: { label: 'Urgent', bg: 'bg-red-100', text: 'text-red-700' },
+}
+
+export default function IssueDetailPanel({ issue, onClose, onUpdate, teamMembers }) {
+  const { brands } = useContext(AppContext)
+  const [issueData, setIssueData] = useState(null)
+  const [updates, setUpdates] = useState([])
+  const [attachments, setAttachments] = useState([])
+  const [initialLoading, setInitialLoading] = useState(true)
+  const [saving, setSaving] = useState(false)
+  const [uploadingFile, setUploadingFile] = useState(false)
+
+  // Form state
+  const [assignedTo, setAssignedTo] = useState('')
+  const [internalNotes, setInternalNotes] = useState('')
+  const [resolutionSummary, setResolutionSummary] = useState('')
+  const [newUpdate, setNewUpdate] = useState('')
+  const [updateIsPublic, setUpdateIsPublic] = useState(false)
+  
+  // Modals
+  const [showResolveModal, setShowResolveModal] = useState(false)
+  const [showDeclineModal, setShowDeclineModal] = useState(false)
+
+  const issueId = issue?.Id || issue?.id
+
+  useEffect(() => {
+    if (issueId) loadIssueDetails()
+  }, [issueId])
+
+  const loadIssueDetails = async () => {
+    try {
+      const data = await api.get(`/issues/${issueId}`)
+      setIssueData(data)
+      setUpdates(data.updates || [])
+      setAttachments(data.attachments || [])
+      setAssignedTo(data.assigned_to_id || '')
+      setInternalNotes(data.internal_notes || '')
+      setResolutionSummary(data.resolution_summary || '')
+    } catch (err) {
+      console.error('Failed to load issue:', err)
+    } finally {
+      setInitialLoading(false)
+    }
+  }
+
+  const handleUpdateStatus = async (newStatus) => {
+    if (saving) return
+    try {
+      setSaving(true)
+      await api.patch(`/issues/${issueId}`, { status: newStatus })
+      await onUpdate()
+      await loadIssueDetails()
+    } catch (err) {
+      console.error('Failed to update status:', err)
+      alert('Failed to update status')
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  const handleResolve = async () => {
+    if (saving || !resolutionSummary.trim()) return
+    try {
+      setSaving(true)
+      await api.patch(`/issues/${issueId}`, { status: 'resolved', resolution_summary: resolutionSummary })
+      await onUpdate()
+      setShowResolveModal(false)
+      await loadIssueDetails()
+    } catch (err) {
+      console.error('Failed to resolve issue:', err)
+      alert('Failed to resolve issue')
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  const handleDecline = async () => {
+    if (saving || !resolutionSummary.trim()) return
+    try {
+      setSaving(true)
+      await api.patch(`/issues/${issueId}`, { status: 'declined', resolution_summary: resolutionSummary })
+      await onUpdate()
+      setShowDeclineModal(false)
+      await loadIssueDetails()
+    } catch (err) {
+      console.error('Failed to decline issue:', err)
+      alert('Failed to decline issue')
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  const handleAssignmentChange = async (newAssignedTo) => {
+    try {
+      setAssignedTo(newAssignedTo)
+      await api.patch(`/issues/${issueId}`, { assigned_to_id: newAssignedTo || null })
+      await onUpdate()
+    } catch (err) {
+      console.error('Failed to update assignment:', err)
+      alert('Failed to update assignment')
+    }
+  }
+
+  const handleNotesChange = async () => {
+    if (saving) return
+    try {
+      setSaving(true)
+      await api.patch(`/issues/${issueId}`, { internal_notes: internalNotes })
+    } catch (err) {
+      console.error('Failed to save notes:', err)
+      alert('Failed to save notes')
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  const handleAddUpdate = async () => {
+    if (!newUpdate.trim() || saving) return
+    try {
+      setSaving(true)
+      await api.post(`/issues/${issueId}/updates`, { message: newUpdate, is_public: updateIsPublic })
+      setNewUpdate('')
+      setUpdateIsPublic(false)
+      await loadIssueDetails()
+    } catch (err) {
+      console.error('Failed to add update:', err)
+      alert('Failed to add update')
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  const handleFileUpload = async (e) => {
+    const file = e.target.files?.[0]
+    if (!file) return
+    try {
+      setUploadingFile(true)
+      const formData = new FormData()
+      formData.append('file', file)
+      await api.upload(`/issues/${issueId}/attachments`, formData)
+      await loadIssueDetails()
+      e.target.value = '' // Reset input
+    } catch (err) {
+      console.error('Failed to upload file:', err)
+      alert('Failed to upload file')
+    } finally {
+      setUploadingFile(false)
+    }
+  }
+
+  const handleDeleteAttachment = async (attachmentId) => {
+    if (!confirm('Delete this attachment?')) return
+    try {
+      await api.delete(`/issue-attachments/${attachmentId}`)
+      await loadIssueDetails()
+    } catch (err) {
+      console.error('Failed to delete attachment:', err)
+      alert('Failed to delete attachment')
+    }
+  }
+
+  const copyTrackingLink = () => {
+    const url = `${window.location.origin}/track/${issueData.tracking_token}`
+    navigator.clipboard.writeText(url)
+    alert('Tracking link copied to clipboard!')
+  }
+
+  const formatDate = (dateStr) => {
+    if (!dateStr) return ''
+    const date = new Date(dateStr)
+    return date.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', hour: '2-digit', minute: '2-digit' })
+  }
+
+  const formatFileSize = (bytes) => {
+    if (bytes < 1024) return bytes + ' B'
+    if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB'
+    return (bytes / (1024 * 1024)).toFixed(1) + ' MB'
+  }
+
+  if (initialLoading || !issueData) {
+    return (
+      <SlidePanel onClose={onClose} maxWidth="600px">
+        <div className="flex items-center justify-center h-96">
+          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-brand-primary"></div>
+        </div>
+      </SlidePanel>
+    )
+  }
+
+  const statusConfig = STATUS_CONFIG[issueData.status] || STATUS_CONFIG.new
+  const priorityConfig = PRIORITY_CONFIG[issueData.priority] || PRIORITY_CONFIG.medium
+
+  return (
+    <>
+      <SlidePanel
+        onClose={onClose}
+        maxWidth="600px"
+        header={
+          <div className="p-4 border-b border-border bg-surface-secondary">
+            <div className="flex items-start justify-between gap-3 mb-3">
+              <h2 className="text-lg font-bold text-text-primary flex-1">{issueData.title}</h2>
+              <button onClick={onClose} className="p-1 hover:bg-surface-tertiary rounded">
+                <X className="w-5 h-5" />
+              </button>
+            </div>
+            <div className="flex items-center gap-2 flex-wrap">
+              <span className={`text-xs px-2 py-1 rounded-full font-medium flex items-center gap-1.5 ${statusConfig.bg} ${statusConfig.text}`}>
+                <span className={`w-1.5 h-1.5 rounded-full ${statusConfig.dot}`}></span>
+                {statusConfig.label}
+              </span>
+              <span className={`text-xs px-2 py-1 rounded-full font-medium ${priorityConfig.bg} ${priorityConfig.text}`}>
+                {priorityConfig.label}
+              </span>
+              <span className="text-xs px-2 py-1 rounded-full bg-surface-tertiary text-text-secondary capitalize">
+                {issueData.type}
+              </span>
+              <span className="text-xs px-2 py-1 rounded-full bg-surface-tertiary text-text-secondary">
+                {issueData.category}
+              </span>
+              {issueData.brand_name && (
+                <span className="text-xs px-2 py-1 rounded-full bg-brand-primary/10 text-brand-primary font-medium">
+                  {issueData.brand_name}
+                </span>
+              )}
+            </div>
+          </div>
+        }
+      >
+        <div className="p-4 space-y-6">
+          {/* Submitter Info */}
+          <div className="bg-surface-secondary rounded-lg p-4">
+            <h3 className="text-sm font-semibold text-text-primary mb-2">Submitter Information</h3>
+            <div className="space-y-1 text-sm">
+              <div><span className="text-text-tertiary">Name:</span> <span className="text-text-primary font-medium">{issueData.submitter_name}</span></div>
+              <div><span className="text-text-tertiary">Email:</span> <span className="text-text-primary">{issueData.submitter_email}</span></div>
+              {issueData.submitter_phone && (
+                <div><span className="text-text-tertiary">Phone:</span> <span className="text-text-primary">{issueData.submitter_phone}</span></div>
+              )}
+              <div><span className="text-text-tertiary">Submitted:</span> <span className="text-text-primary">{formatDate(issueData.created_at)}</span></div>
+            </div>
+          </div>
+
+          {/* Description */}
+          <div>
+            <h3 className="text-sm font-semibold text-text-primary mb-2">Description</h3>
+            <p className="text-sm text-text-secondary whitespace-pre-wrap">{issueData.description || 'No description provided'}</p>
+          </div>
+
+          {/* Assigned To */}
+          <div>
+            <label className="block text-sm font-semibold text-text-primary mb-2">Assigned To</label>
+            <select
+              value={assignedTo}
+              onChange={(e) => handleAssignmentChange(e.target.value)}
+              className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20"
+            >
+              <option value="">Unassigned</option>
+              {teamMembers.map((member) => (
+                <option key={member.id || member._id} value={member.id || member._id}>
+                  {member.name}
+                </option>
+              ))}
+            </select>
+          </div>
+
+          {/* Brand */}
+          <div>
+            <label className="block text-sm font-semibold text-text-primary mb-2">Brand</label>
+            <select
+              value={issueData.brand_id || ''}
+              onChange={async (e) => {
+                const val = e.target.value || null;
+                try {
+                  await api.patch(`/issues/${issueId}`, { brand_id: val });
+                  loadIssueDetails();
+                  onUpdate();
+                } catch {}
+              }}
+              className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20"
+            >
+              <option value="">No brand</option>
+              {(brands || []).map((b) => (
+                <option key={b._id || b.Id} value={b._id || b.Id}>{b.name}</option>
+              ))}
+            </select>
+          </div>
+
+          {/* Internal Notes */}
+          <div>
+            <label className="block text-sm font-semibold text-text-primary mb-2 flex items-center gap-2">
+              <Lock className="w-4 h-4" />
+              Internal Notes (Staff Only)
+            </label>
+            <textarea
+              value={internalNotes}
+              onChange={(e) => setInternalNotes(e.target.value)}
+              onBlur={handleNotesChange}
+              rows={4}
+              placeholder="Internal notes not visible to submitter..."
+              className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20"
+            />
+          </div>
+
+          {/* Resolution Summary (if resolved/declined) */}
+          {(issueData.status === 'resolved' || issueData.status === 'declined') && issueData.resolution_summary && (
+            <div className="bg-emerald-50 border border-emerald-200 rounded-lg p-4">
+              <h3 className="text-sm font-semibold text-emerald-900 mb-2 flex items-center gap-2">
+                <CheckCircle2 className="w-4 h-4" />
+                Resolution Summary (Public)
+              </h3>
+              <p className="text-sm text-emerald-800 whitespace-pre-wrap">{issueData.resolution_summary}</p>
+              {issueData.resolved_at && (
+                <p className="text-xs text-emerald-600 mt-2">Resolved on {formatDate(issueData.resolved_at)}</p>
+              )}
+            </div>
+          )}
+
+          {/* Status Actions */}
+          {issueData.status !== 'resolved' && issueData.status !== 'declined' && (
+            <div className="flex gap-2 flex-wrap">
+              {issueData.status === 'new' && (
+                <button
+                  onClick={() => handleUpdateStatus('acknowledged')}
+                  disabled={saving}
+                  className="px-4 py-2 bg-blue-600 text-white rounded-lg text-sm font-medium hover:bg-blue-700 disabled:opacity-50"
+                >
+                  <Check className="w-4 h-4 inline mr-1" />
+                  Acknowledge
+                </button>
+              )}
+              {(issueData.status === 'new' || issueData.status === 'acknowledged') && (
+                <button
+                  onClick={() => handleUpdateStatus('in_progress')}
+                  disabled={saving}
+                  className="px-4 py-2 bg-amber-600 text-white rounded-lg text-sm font-medium hover:bg-amber-700 disabled:opacity-50"
+                >
+                  <Clock className="w-4 h-4 inline mr-1" />
+                  Start Work
+                </button>
+              )}
+              <button
+                onClick={() => setShowResolveModal(true)}
+                disabled={saving}
+                className="px-4 py-2 bg-emerald-600 text-white rounded-lg text-sm font-medium hover:bg-emerald-700 disabled:opacity-50"
+              >
+                <CheckCircle2 className="w-4 h-4 inline mr-1" />
+                Resolve
+              </button>
+              <button
+                onClick={() => setShowDeclineModal(true)}
+                disabled={saving}
+                className="px-4 py-2 bg-gray-600 text-white rounded-lg text-sm font-medium hover:bg-gray-700 disabled:opacity-50"
+              >
+                <XCircle className="w-4 h-4 inline mr-1" />
+                Decline
+              </button>
+            </div>
+          )}
+
+          {/* Tracking Link */}
+          <div>
+            <label className="block text-sm font-semibold text-text-primary mb-2">Public Tracking Link</label>
+            <div className="flex gap-2">
+              <input
+                type="text"
+                value={`${window.location.origin}/track/${issueData.tracking_token}`}
+                readOnly
+                className="flex-1 px-3 py-2 text-sm border border-border rounded-lg bg-surface-secondary"
+              />
+              <button
+                onClick={copyTrackingLink}
+                className="px-4 py-2 bg-brand-primary text-white rounded-lg text-sm font-medium hover:bg-brand-primary-light transition-colors"
+              >
+                <Copy className="w-4 h-4" />
+              </button>
+            </div>
+          </div>
+
+          {/* Updates Timeline */}
+          <div>
+            <h3 className="text-sm font-semibold text-text-primary mb-3 flex items-center gap-2">
+              Updates Timeline
+              <span className="text-xs text-text-tertiary font-normal">({updates.length})</span>
+            </h3>
+
+            {/* Add Update */}
+            <div className="bg-surface-secondary rounded-lg p-3 mb-4">
+              <textarea
+                value={newUpdate}
+                onChange={(e) => setNewUpdate(e.target.value)}
+                placeholder="Add an update..."
+                rows={3}
+                className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 mb-2"
+              />
+              <div className="flex items-center justify-between">
+                <label className="flex items-center gap-2 text-sm text-text-secondary cursor-pointer">
+                  <input
+                    type="checkbox"
+                    checked={updateIsPublic}
+                    onChange={(e) => setUpdateIsPublic(e.target.checked)}
+                    className="rounded"
+                  />
+                  <Eye className="w-4 h-4" />
+                  Make public (visible to submitter)
+                </label>
+                <button
+                  onClick={handleAddUpdate}
+                  disabled={!newUpdate.trim() || saving}
+                  className="px-4 py-2 bg-brand-primary text-white rounded-lg text-sm font-medium hover:bg-brand-primary-light disabled:opacity-50 transition-colors flex items-center gap-2"
+                >
+                  <Send className="w-4 h-4" />
+                  Add Update
+                </button>
+              </div>
+            </div>
+
+            {/* Updates List */}
+            <div className="space-y-3">
+              {updates.map((update) => (
+                <div
+                  key={update.Id || update.id}
+                  className={`p-3 rounded-lg border ${update.is_public ? 'bg-brand-primary/5 border-brand-primary/20' : 'bg-surface-secondary border-border'}`}
+                >
+                  <div className="flex items-start justify-between gap-2 mb-2">
+                    <div className="flex items-center gap-2">
+                      <span className="text-sm font-medium text-text-primary">{update.author_name}</span>
+                      <span className={`text-xs px-2 py-0.5 rounded-full ${update.author_type === 'staff' ? 'bg-purple-100 text-purple-700' : 'bg-surface-tertiary text-text-secondary'}`}>
+                        {update.author_type}
+                      </span>
+                      {update.is_public ? (
+                        <Eye className="w-3.5 h-3.5 text-blue-600" title="Public" />
+                      ) : (
+                        <Lock className="w-3.5 h-3.5 text-text-secondary" title="Internal only" />
+                      )}
+                    </div>
+                    <span className="text-xs text-text-tertiary">{formatDate(update.created_at)}</span>
+                  </div>
+                  <p className="text-sm text-text-secondary whitespace-pre-wrap">{update.message}</p>
+                </div>
+              ))}
+              {updates.length === 0 && (
+                <p className="text-sm text-text-tertiary text-center py-6">No updates yet</p>
+              )}
+            </div>
+          </div>
+
+          {/* Attachments */}
+          <div>
+            <h3 className="text-sm font-semibold text-text-primary mb-3 flex items-center gap-2">
+              Attachments
+              <span className="text-xs text-text-tertiary font-normal">({attachments.length})</span>
+            </h3>
+
+            {/* Upload */}
+            <label className="block mb-3">
+              <input type="file" onChange={handleFileUpload} disabled={uploadingFile} className="hidden" />
+              <div className="border-2 border-dashed border-border rounded-lg p-4 text-center cursor-pointer hover:bg-surface-secondary transition-colors">
+                <Upload className="w-6 h-6 mx-auto mb-2 text-text-tertiary" />
+                <p className="text-sm text-text-secondary">
+                  {uploadingFile ? 'Uploading...' : 'Click to upload file'}
+                </p>
+              </div>
+            </label>
+
+            {/* Attachments List */}
+            <div className="space-y-2">
+              {attachments.map((att) => (
+                <div key={att.Id || att.id} className="flex items-center justify-between p-3 bg-surface-secondary rounded-lg">
+                  <div className="flex items-center gap-3 flex-1 min-w-0">
+                    <FileText className="w-5 h-5 text-text-tertiary shrink-0" />
+                    <div className="flex-1 min-w-0">
+                      <p className="text-sm font-medium text-text-primary truncate">{att.original_name}</p>
+                      <p className="text-xs text-text-tertiary">
+                        {formatFileSize(att.size)} • {att.uploaded_by}
+                      </p>
+                    </div>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <a
+                      href={`/api/uploads/${att.filename}`}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="text-xs text-brand-primary hover:underline"
+                    >
+                      Download
+                    </a>
+                    <button onClick={() => handleDeleteAttachment(att.Id || att.id)} className="p-1 hover:bg-surface-tertiary rounded">
+                      <Trash2 className="w-4 h-4 text-red-600" />
+                    </button>
+                  </div>
+                </div>
+              ))}
+              {attachments.length === 0 && (
+                <p className="text-sm text-text-tertiary text-center py-4">No attachments</p>
+              )}
+            </div>
+          </div>
+        </div>
+      </SlidePanel>
+
+      {/* Resolve Modal */}
+      {showResolveModal && (
+        <Modal isOpen title="Resolve Issue" onClose={() => setShowResolveModal(false)}>
+          <div className="space-y-4">
+            <p className="text-sm text-text-secondary">Provide a resolution summary that will be visible to the submitter.</p>
+            <textarea
+              value={resolutionSummary}
+              onChange={(e) => setResolutionSummary(e.target.value)}
+              placeholder="Explain how this issue was resolved..."
+              rows={5}
+              className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20"
+            />
+            <div className="flex gap-2 justify-end">
+              <button
+                onClick={() => setShowResolveModal(false)}
+                className="px-4 py-2 bg-surface-secondary text-text-primary rounded-lg text-sm font-medium hover:bg-surface-tertiary"
+              >
+                Cancel
+              </button>
+              <button
+                onClick={handleResolve}
+                disabled={!resolutionSummary.trim() || saving}
+                className="px-4 py-2 bg-emerald-600 text-white rounded-lg text-sm font-medium hover:bg-emerald-700 disabled:opacity-50"
+              >
+                {saving ? 'Resolving...' : 'Mark as Resolved'}
+              </button>
+            </div>
+          </div>
+        </Modal>
+      )}
+
+      {/* Decline Modal */}
+      {showDeclineModal && (
+        <Modal isOpen title="Decline Issue" onClose={() => setShowDeclineModal(false)}>
+          <div className="space-y-4">
+            <p className="text-sm text-text-secondary">Provide a reason for declining this issue. This will be visible to the submitter.</p>
+            <textarea
+              value={resolutionSummary}
+              onChange={(e) => setResolutionSummary(e.target.value)}
+              placeholder="Explain why this issue cannot be addressed..."
+              rows={5}
+              className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20"
+            />
+            <div className="flex gap-2 justify-end">
+              <button
+                onClick={() => setShowDeclineModal(false)}
+                className="px-4 py-2 bg-surface-secondary text-text-primary rounded-lg text-sm font-medium hover:bg-surface-tertiary"
+              >
+                Cancel
+              </button>
+              <button
+                onClick={handleDecline}
+                disabled={!resolutionSummary.trim() || saving}
+                className="px-4 py-2 bg-gray-600 text-white rounded-lg text-sm font-medium hover:bg-gray-700 disabled:opacity-50"
+              >
+                {saving ? 'Declining...' : 'Decline Issue'}
+              </button>
+            </div>
+          </div>
+        </Modal>
+      )}
+    </>
+  )
+}

client/src/components/Layout.jsx

@@ -7,7 +7,7 @@ export default function Layout() {
   const [collapsed, setCollapsed] = useState(false)
 
   return (
-    <div className="min-h-screen bg-surface-secondary">
+    <div className="min-h-screen bg-mesh">
       <Sidebar collapsed={collapsed} setCollapsed={setCollapsed} />
       <div
         className={`transition-all duration-300 ${

client/src/components/MemberCard.jsx

@@ -1,3 +1,4 @@
+import { getInitials } from '../utils/api'
 import BrandBadge from './BrandBadge'
 
 const ROLE_BADGES = {
@@ -12,15 +13,12 @@ const ROLE_BADGES = {
   photographer: { bg: 'bg-cyan-50', text: 'text-cyan-700', label: 'Photographer' },
   videographer: { bg: 'bg-sky-50', text: 'text-sky-700', label: 'Videographer' },
   strategist: { bg: 'bg-rose-50', text: 'text-rose-700', label: 'Strategist' },
+  superadmin: { bg: 'bg-red-50', text: 'text-red-700', label: 'Super Admin' },
+  contributor: { bg: 'bg-slate-50', text: 'text-slate-700', label: 'Contributor' },
   default: { bg: 'bg-gray-50', text: 'text-gray-700', label: 'Team Member' },
 }
 
 export default function MemberCard({ member, onClick }) {
-  const getInitials = (name) => {
-    if (!name) return '?'
-    return name.split(' ').map(w => w[0]).join('').slice(0, 2).toUpperCase()
-  }
-
   const role = ROLE_BADGES[member.team_role || member.role] || ROLE_BADGES.default
 
   const avatarColors = [
@@ -63,6 +61,17 @@ export default function MemberCard({ member, onClick }) {
           ))}
         </div>
       )}
+
+      {/* Teams */}
+      {member.teams && member.teams.length > 0 && (
+        <div className="flex flex-wrap gap-1 justify-center mt-2">
+          {member.teams.map((team) => (
+            <span key={team.id} className="text-[10px] px-2 py-0.5 rounded-full bg-blue-50 text-blue-600 font-medium">
+              {team.name}
+            </span>
+          ))}
+        </div>
+      )}
     </div>
   )
 }

client/src/components/Modal.jsx

@@ -45,7 +45,7 @@ export default function Modal({
       <div className="fixed inset-0 z-[9999] flex items-center justify-center px-4">
         {/* Backdrop */}
         <div
-          className="fixed inset-0 bg-black/40 backdrop-blur-sm"
+          className="fixed inset-0 bg-black/40 backdrop-blur-sm animate-backdrop-in"
           onClick={onClose}
         />
         
@@ -94,7 +94,7 @@ export default function Modal({
     <div className="fixed inset-0 z-[9999] flex items-start justify-center pt-[10vh] px-4">
       {/* Backdrop */}
       <div
-        className="fixed inset-0 bg-black/40 backdrop-blur-sm"
+        className="fixed inset-0 bg-black/40 backdrop-blur-sm animate-backdrop-in"
         onClick={onClose}
       />
       

client/src/components/PostCard.jsx

@@ -1,32 +1,32 @@
+import { useContext } from 'react'
 import { format } from 'date-fns'
 import { ArrowRight } from 'lucide-react'
+import { getInitials } from '../utils/api'
 import { useLanguage } from '../i18n/LanguageContext'
+import { AppContext } from '../App'
 import BrandBadge from './BrandBadge'
 import StatusBadge from './StatusBadge'
-import PlatformIcon, { PlatformIcons } from './PlatformIcon'
+import { PlatformIcons } from './PlatformIcon'
 
 export default function PostCard({ post, onClick, onMove, compact = false }) {
   const { t } = useLanguage()
+  const { getBrandName } = useContext(AppContext)
+  const brandName = getBrandName(post.brand_id || post.brandId) || post.brand_name || post.brand
   // Support both single platform and platforms array
   const platforms = post.platforms?.length > 0
     ? post.platforms
     : (post.platform ? [post.platform] : [])
 
-  const getInitials = (name) => {
-    if (!name) return '?'
-    return name.split(' ').map(w => w[0]).join('').slice(0, 2).toUpperCase()
-  }
-
   const assigneeName = post.assignedToName || post.assignedName || post.assigned_name || (typeof post.assignedTo === 'object' ? post.assignedTo?.name : null)
 
   if (compact) {
     return (
       <div
         onClick={onClick}
-        className="bg-white rounded-lg p-3 border border-border hover:border-brand-primary/30 hover:shadow-md cursor-pointer transition-all group"
+        className="bg-white rounded-lg p-3 border border-border hover:border-brand-primary/30 cursor-pointer transition-all group overflow-hidden card-hover"
       >
         {post.thumbnail_url && (
-          <div className="w-full h-32 -mx-3 -mt-3 mb-2 rounded-t-lg overflow-hidden">
+          <div className="w-[calc(100%+1.5rem)] h-32 -mx-3 -mt-3 mb-2 rounded-t-lg overflow-hidden">
             <img src={`http://localhost:3001${post.thumbnail_url}`} alt="" className="w-full h-full object-cover" />
           </div>
         )}
@@ -39,7 +39,7 @@ export default function PostCard({ post, onClick, onMove, compact = false }) {
         </div>
         
         <div className="flex items-center gap-2 flex-wrap">
-          {post.brand && <BrandBadge brand={post.brand} />}
+          {brandName && <BrandBadge brand={brandName} />}
         </div>
 
         <div className="flex items-center justify-between mt-3 pt-2 border-t border-border-light">
@@ -105,7 +105,7 @@ export default function PostCard({ post, onClick, onMove, compact = false }) {
           <span className="text-sm font-medium text-text-primary">{post.title}</span>
         </div>
       </td>
-      <td className="px-4 py-3">{post.brand && <BrandBadge brand={post.brand} />}</td>
+      <td className="px-4 py-3">{brandName && <BrandBadge brand={brandName} />}</td>
       <td className="px-4 py-3"><StatusBadge status={post.status} /></td>
       <td className="px-4 py-3">
         <PlatformIcons platforms={platforms} size={16} gap="gap-1.5" />

client/src/components/PostDetailPanel.jsx

@@ -0,0 +1,582 @@
+import { useState, useEffect, useRef } from 'react'
+import { X, Trash2, Upload, FileText, Link2, ExternalLink, FolderOpen } from 'lucide-react'
+import { useLanguage } from '../i18n/LanguageContext'
+import { api, PLATFORMS, getBrandColor } from '../utils/api'
+import CommentsSection from './CommentsSection'
+import Modal from './Modal'
+import SlidePanel from './SlidePanel'
+import CollapsibleSection from './CollapsibleSection'
+
+export default function PostDetailPanel({ post, onClose, onSave, onDelete, brands, teamMembers, campaigns }) {
+  const { t, lang } = useLanguage()
+  const fileInputRef = useRef(null)
+  const [form, setForm] = useState({})
+  const [dirty, setDirty] = useState(false)
+  const [saving, setSaving] = useState(false)
+  const [publishError, setPublishError] = useState('')
+  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false)
+
+  // Attachments state
+  const [attachments, setAttachments] = useState([])
+  const [uploading, setUploading] = useState(false)
+  const [dragActive, setDragActive] = useState(false)
+  const [showAssetPicker, setShowAssetPicker] = useState(false)
+  const [availableAssets, setAvailableAssets] = useState([])
+  const [assetSearch, setAssetSearch] = useState('')
+
+  const postId = post?._id || post?.id
+  const isCreateMode = !postId
+
+  useEffect(() => {
+    if (post) {
+      setForm({
+        title: post.title || '',
+        description: post.description || '',
+        brand_id: post.brandId || post.brand_id || '',
+        platforms: post.platforms || (post.platform ? [post.platform] : []),
+        status: post.status || 'draft',
+        assigned_to: post.assignedTo || post.assigned_to || '',
+        scheduled_date: post.scheduledDate ? new Date(post.scheduledDate).toISOString().slice(0, 16) : '',
+        notes: post.notes || '',
+        campaign_id: post.campaignId || post.campaign_id || '',
+        publication_links: post.publication_links || post.publicationLinks || [],
+      })
+      setDirty(isCreateMode)
+      setPublishError('')
+      if (!isCreateMode) loadAttachments()
+    }
+  }, [post])
+
+  if (!post) return null
+
+  const statusOptions = [
+    { value: 'draft', label: t('posts.status.draft') },
+    { value: 'in_review', label: t('posts.status.in_review') },
+    { value: 'approved', label: t('posts.status.approved') },
+    { value: 'scheduled', label: t('posts.status.scheduled') },
+    { value: 'published', label: t('posts.status.published') },
+  ]
+
+  const update = (field, value) => {
+    setForm(f => ({ ...f, [field]: value }))
+    setDirty(true)
+  }
+
+  const updatePublicationLink = (platform, url) => {
+    setForm(f => {
+      const links = [...(f.publication_links || [])]
+      const idx = links.findIndex(l => l.platform === platform)
+      if (idx >= 0) {
+        links[idx] = { ...links[idx], url }
+      } else {
+        links.push({ platform, url })
+      }
+      return { ...f, publication_links: links }
+    })
+    setDirty(true)
+  }
+
+  const handleSave = async () => {
+    setPublishError('')
+    setSaving(true)
+    try {
+      const data = {
+        title: form.title,
+        description: form.description,
+        brand_id: form.brand_id ? Number(form.brand_id) : null,
+        assigned_to: form.assigned_to ? Number(form.assigned_to) : null,
+        status: form.status,
+        platforms: form.platforms || [],
+        scheduled_date: form.scheduled_date || null,
+        notes: form.notes,
+        campaign_id: form.campaign_id ? Number(form.campaign_id) : null,
+        publication_links: form.publication_links || [],
+      }
+
+      if (data.status === 'published' && data.platforms.length > 0) {
+        const missingPlatforms = data.platforms.filter(platform => {
+          const link = (data.publication_links || []).find(l => l.platform === platform)
+          return !link || !link.url || !link.url.trim()
+        })
+        if (missingPlatforms.length > 0) {
+          const names = missingPlatforms.map(p => PLATFORMS[p]?.label || p).join(', ')
+          setPublishError(`${t('posts.publishMissing')} ${names}`)
+          setSaving(false)
+          return
+        }
+      }
+
+      await onSave(isCreateMode ? null : postId, data)
+      setDirty(false)
+      if (isCreateMode) onClose()
+    } catch (err) {
+      if (err.message?.includes('Cannot publish')) {
+        setPublishError(err.message.replace(/.*: /, ''))
+      }
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  const confirmDelete = async () => {
+    setShowDeleteConfirm(false)
+    await onDelete(postId)
+    onClose()
+  }
+
+  // ─── Attachments ──────────────────────────────
+  async function loadAttachments() {
+    if (!postId) return
+    try {
+      const data = await api.get(`/posts/${postId}/attachments`)
+      setAttachments(Array.isArray(data) ? data : (data.data || []))
+    } catch {
+      setAttachments([])
+    }
+  }
+
+  const handleFileUpload = async (files) => {
+    if (!postId || !files?.length) return
+    setUploading(true)
+    for (const file of files) {
+      const fd = new FormData()
+      fd.append('file', file)
+      try {
+        await api.upload(`/posts/${postId}/attachments`, fd)
+      } catch (err) {
+        console.error('Upload failed:', err)
+      }
+    }
+    setUploading(false)
+    loadAttachments()
+  }
+
+  const handleDeleteAttachment = async (attId) => {
+    try {
+      await api.delete(`/attachments/${attId}`)
+      loadAttachments()
+    } catch (err) {
+      console.error('Delete attachment failed:', err)
+    }
+  }
+
+  const openAssetPicker = async () => {
+    try {
+      const data = await api.get('/assets')
+      setAvailableAssets(Array.isArray(data) ? data : (data.data || []))
+    } catch {
+      setAvailableAssets([])
+    }
+    setAssetSearch('')
+    setShowAssetPicker(true)
+  }
+
+  const handleAttachAsset = async (assetId) => {
+    if (!postId) return
+    try {
+      await api.post(`/posts/${postId}/attachments/from-asset`, { asset_id: assetId })
+      loadAttachments()
+      setShowAssetPicker(false)
+    } catch (err) {
+      console.error('Attach asset failed:', err)
+    }
+  }
+
+  const handleDrop = (e) => {
+    e.preventDefault(); e.stopPropagation(); setDragActive(false)
+    if (e.dataTransfer.files?.length) handleFileUpload(e.dataTransfer.files)
+  }
+
+  const brandName = (() => {
+    if (form.brand_id) {
+      const b = brands?.find(b => String(b._id || b.id) === String(form.brand_id))
+      return b ? (lang === 'ar' && b.name_ar ? b.name_ar : b.name) : null
+    }
+    return post.brand_name || post.brandName || null
+  })()
+
+  const header = (
+    <div className="px-5 py-4 border-b border-border shrink-0">
+      <div className="flex items-start justify-between gap-3">
+        <div className="flex-1 min-w-0">
+          <input
+            type="text"
+            value={form.title}
+            onChange={e => update('title', e.target.value)}
+            className="w-full text-lg font-semibold text-text-primary bg-transparent border-0 p-0 focus:outline-none focus:ring-0"
+            placeholder={t('posts.postTitlePlaceholder')}
+          />
+          <div className="flex items-center gap-2 mt-2">
+            <span className={`text-[11px] px-2 py-0.5 rounded-full font-medium ${
+              form.status === 'published' ? 'bg-emerald-100 text-emerald-700' :
+              form.status === 'scheduled' ? 'bg-purple-100 text-purple-700' :
+              form.status === 'approved' ? 'bg-blue-100 text-blue-700' :
+              form.status === 'in_review' ? 'bg-amber-100 text-amber-700' :
+              'bg-gray-100 text-gray-600'
+            }`}>
+              {statusOptions.find(s => s.value === form.status)?.label}
+            </span>
+            {brandName && (
+              <span className={`text-[10px] px-1.5 py-0.5 rounded ${getBrandColor(brandName).bg} ${getBrandColor(brandName).text}`}>
+                {brandName}
+              </span>
+            )}
+          </div>
+        </div>
+        <button
+          onClick={onClose}
+          className="p-1.5 rounded-lg hover:bg-surface-tertiary text-text-tertiary hover:text-text-primary transition-colors shrink-0"
+        >
+          <X className="w-5 h-5" />
+        </button>
+      </div>
+    </div>
+  )
+
+  return (
+    <>
+      <SlidePanel onClose={onClose} maxWidth="520px" header={header}>
+        {/* Details Section */}
+        <CollapsibleSection title={t('posts.details')}>
+          <div className="px-5 pb-4 space-y-3">
+            <div>
+              <label className="block text-xs font-medium text-text-tertiary mb-1">{t('posts.description')}</label>
+              <textarea
+                value={form.description}
+                onChange={e => update('description', e.target.value)}
+                rows={3}
+                className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary resize-none"
+                placeholder={t('posts.postDescPlaceholder')}
+              />
+            </div>
+
+            <div className="grid grid-cols-2 gap-3">
+              <div>
+                <label className="block text-xs font-medium text-text-tertiary mb-1">{t('posts.brand')}</label>
+                <select
+                  value={form.brand_id}
+                  onChange={e => update('brand_id', e.target.value)}
+                  className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary"
+                >
+                  <option value="">{t('posts.selectBrand')}</option>
+                  {(brands || []).map(b => <option key={b._id || b.id} value={b._id || b.id}>{b.icon} {lang === 'ar' && b.name_ar ? b.name_ar : b.name}</option>)}
+                </select>
+              </div>
+              <div>
+                <label className="block text-xs font-medium text-text-tertiary mb-1">{t('posts.campaign')}</label>
+                <select
+                  value={form.campaign_id}
+                  onChange={e => update('campaign_id', e.target.value)}
+                  className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary"
+                >
+                  <option value="">{t('posts.noCampaign')}</option>
+                  {(campaigns || []).map(c => <option key={c._id || c.id} value={c._id || c.id}>{c.name}</option>)}
+                </select>
+              </div>
+            </div>
+
+            <div className="grid grid-cols-2 gap-3">
+              <div>
+                <label className="block text-xs font-medium text-text-tertiary mb-1">{t('posts.assignTo')}</label>
+                <select
+                  value={form.assigned_to}
+                  onChange={e => update('assigned_to', e.target.value)}
+                  className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary"
+                >
+                  <option value="">{t('common.unassigned')}</option>
+                  {(teamMembers || []).map(m => <option key={m._id || m.id} value={m._id || m.id}>{m.name}</option>)}
+                </select>
+              </div>
+              <div>
+                <label className="block text-xs font-medium text-text-tertiary mb-1">{t('posts.status')}</label>
+                <select
+                  value={form.status}
+                  onChange={e => update('status', e.target.value)}
+                  className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary"
+                >
+                  {statusOptions.map(s => <option key={s.value} value={s.value}>{s.label}</option>)}
+                </select>
+              </div>
+            </div>
+
+            <div className="grid grid-cols-2 gap-3">
+              <div>
+                <label className="block text-xs font-medium text-text-tertiary mb-1">{t('posts.scheduledDate')}</label>
+                <input
+                  type="datetime-local"
+                  value={form.scheduled_date}
+                  onChange={e => update('scheduled_date', e.target.value)}
+                  className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary"
+                />
+              </div>
+              <div>
+                <label className="block text-xs font-medium text-text-tertiary mb-1">{t('posts.notes')}</label>
+                <input
+                  type="text"
+                  value={form.notes}
+                  onChange={e => update('notes', e.target.value)}
+                  className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary"
+                  placeholder={t('posts.additionalNotes')}
+                />
+              </div>
+            </div>
+
+            {publishError && (
+              <div className="p-3 bg-red-50 border border-red-200 rounded-lg text-sm text-red-700">
+                {publishError}
+              </div>
+            )}
+
+            <div className="flex items-center gap-2 pt-2">
+              {dirty && (
+                <button
+                  onClick={handleSave}
+                  disabled={!form.title || saving}
+                  className={`flex-1 px-4 py-2 bg-brand-primary text-white rounded-lg text-sm font-medium hover:bg-brand-primary-light disabled:opacity-50 disabled:cursor-not-allowed shadow-sm ${saving ? 'btn-loading' : ''}`}
+                >
+                  {isCreateMode ? t('posts.createPost') : t('posts.saveChanges')}
+                </button>
+              )}
+              {onDelete && !isCreateMode && (
+                <button
+                  onClick={() => setShowDeleteConfirm(true)}
+                  className="p-2 text-text-tertiary hover:text-red-500 hover:bg-red-50 rounded-lg transition-colors"
+                  title={t('common.delete')}
+                >
+                  <Trash2 className="w-4 h-4" />
+                </button>
+              )}
+            </div>
+          </div>
+        </CollapsibleSection>
+
+        {/* Platforms & Links Section */}
+        <CollapsibleSection title={t('posts.platformsLinks')}>
+          <div className="px-5 pb-4 space-y-3">
+            <div>
+              <label className="block text-xs font-medium text-text-tertiary mb-1">{t('posts.platforms')}</label>
+              <div className="flex flex-wrap gap-2 p-2 border border-border rounded-lg bg-white min-h-[38px]">
+                {Object.entries(PLATFORMS).map(([k, v]) => {
+                  const checked = (form.platforms || []).includes(k)
+                  return (
+                    <label
+                      key={k}
+                      className={`flex items-center gap-1.5 text-xs px-2.5 py-1.5 rounded-full cursor-pointer border transition-colors ${
+                        checked
+                          ? 'bg-brand-primary/10 border-brand-primary/30 text-brand-primary font-medium'
+                          : 'bg-surface-tertiary border-transparent text-text-secondary hover:bg-surface-tertiary/80'
+                      }`}
+                    >
+                      <input
+                        type="checkbox"
+                        checked={checked}
+                        onChange={() => {
+                          update('platforms', checked
+                            ? form.platforms.filter(p => p !== k)
+                            : [...(form.platforms || []), k]
+                          )
+                        }}
+                        className="sr-only"
+                      />
+                      {v.label}
+                    </label>
+                  )
+                })}
+              </div>
+            </div>
+
+            {(form.platforms || []).length > 0 && (
+              <div className="space-y-2 border border-border rounded-lg p-3 bg-surface-secondary">
+                <div className="flex items-center gap-1.5 text-xs font-medium text-text-secondary mb-1">
+                  <Link2 className="w-3.5 h-3.5" />
+                  {t('posts.publicationLinks')}
+                </div>
+                {(form.platforms || []).map(platformKey => {
+                  const platformInfo = PLATFORMS[platformKey] || { label: platformKey }
+                  const existingLink = (form.publication_links || []).find(l => l.platform === platformKey)
+                  const linkUrl = existingLink?.url || ''
+                  return (
+                    <div key={platformKey} className="flex items-center gap-2">
+                      <span className="text-xs font-medium text-text-secondary w-24 shrink-0 flex items-center gap-1.5">
+                        <span className="w-2 h-2 rounded-full shrink-0" style={{ backgroundColor: platformInfo.color || '#888' }} />
+                        {platformInfo.label}
+                      </span>
+                      <input
+                        type="url"
+                        value={linkUrl}
+                        onChange={e => updatePublicationLink(platformKey, e.target.value)}
+                        className="flex-1 px-3 py-1.5 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary"
+                        placeholder="https://..."
+                      />
+                      {linkUrl && (
+                        <a href={linkUrl} target="_blank" rel="noopener noreferrer" className="p-1.5 text-text-tertiary hover:text-brand-primary">
+                          <ExternalLink className="w-3.5 h-3.5" />
+                        </a>
+                      )}
+                    </div>
+                  )
+                })}
+                {form.status === 'published' && (form.platforms || []).some(p => {
+                  const link = (form.publication_links || []).find(l => l.platform === p)
+                  return !link || !link.url?.trim()
+                }) && (
+                  <p className="text-xs text-amber-600 mt-1">{t('posts.publishRequired')}</p>
+                )}
+              </div>
+            )}
+          </div>
+        </CollapsibleSection>
+
+        {/* Attachments Section (hidden in create mode) */}
+        {!isCreateMode && (
+          <CollapsibleSection
+            title={t('posts.attachments')}
+            badge={attachments.length > 0 ? (
+              <span className="text-xs font-medium text-text-tertiary bg-surface-tertiary px-1.5 py-0.5 rounded-full">
+                {attachments.length}
+              </span>
+            ) : null}
+          >
+            <div className="px-5 pb-4">
+              {attachments.length > 0 && (
+                <div className="grid grid-cols-2 gap-2 mb-3">
+                  {attachments.map(att => {
+                    const isImage = att.mime_type?.startsWith('image/') || att.mimeType?.startsWith('image/')
+                    const attUrl = att.url || `/api/uploads/${att.filename}`
+                    const name = att.original_name || att.originalName || att.filename
+                    const attId = att.id || att._id
+                    return (
+                      <div key={attId} className="relative group/att border border-border rounded-lg overflow-hidden bg-white">
+                        <div className="h-20 relative">
+                          {isImage ? (
+                            <a href={attUrl} target="_blank" rel="noopener noreferrer" className="block h-full">
+                              <img src={attUrl} alt={name} className="absolute inset-0 w-full h-full object-cover" />
+                            </a>
+                          ) : (
+                            <a href={attUrl} target="_blank" rel="noopener noreferrer" className="absolute inset-0 flex items-center gap-2 p-3">
+                              <FileText className="w-6 h-6 text-text-tertiary shrink-0" />
+                              <span className="text-xs text-text-secondary truncate">{name}</span>
+                            </a>
+                          )}
+                          <button
+                            onClick={() => handleDeleteAttachment(attId)}
+                            className="absolute top-1 right-1 p-1 bg-black/50 hover:bg-red-500 rounded-full text-white opacity-0 group-hover/att:opacity-100 transition-opacity"
+                            title={t('common.delete')}
+                          >
+                            <X className="w-2.5 h-2.5" />
+                          </button>
+                        </div>
+                        <div className="px-2 py-1 text-[10px] text-text-tertiary truncate border-t border-border-light">{name}</div>
+                      </div>
+                    )
+                  })}
+                </div>
+              )}
+
+              <div
+                className={`border-2 border-dashed rounded-lg p-4 text-center cursor-pointer transition-colors ${
+                  dragActive ? 'border-brand-primary bg-brand-primary/5' : 'border-border hover:border-brand-primary/40'
+                }`}
+                onClick={() => fileInputRef.current?.click()}
+                onDragEnter={e => { e.preventDefault(); setDragActive(true) }}
+                onDragLeave={e => { e.preventDefault(); setDragActive(false) }}
+                onDragOver={e => e.preventDefault()}
+                onDrop={handleDrop}
+              >
+                <input
+                  ref={fileInputRef}
+                  type="file"
+                  multiple
+                  className="hidden"
+                  onChange={e => { handleFileUpload(e.target.files); e.target.value = '' }}
+                />
+                <Upload className={`w-5 h-5 text-text-tertiary mx-auto mb-1 ${uploading ? 'animate-pulse' : ''}`} />
+                <p className="text-xs text-text-secondary">
+                  {dragActive ? t('posts.dropFiles') : t('posts.uploadFiles')}
+                </p>
+              </div>
+
+              <button
+                type="button"
+                onClick={openAssetPicker}
+                className="mt-2 flex items-center gap-2 px-3 py-2 text-sm text-text-secondary border border-border rounded-lg hover:bg-surface-tertiary transition-colors w-full justify-center"
+              >
+                <FolderOpen className="w-4 h-4" />
+                {t('posts.attachFromAssets')}
+              </button>
+
+              {showAssetPicker && (
+                <div className="mt-2 border border-border rounded-lg p-3 bg-surface-secondary">
+                  <div className="flex items-center justify-between mb-2">
+                    <p className="text-xs font-medium text-text-secondary">{t('posts.selectAssets')}</p>
+                    <button onClick={() => setShowAssetPicker(false)} className="p-1 text-text-tertiary hover:text-text-primary">
+                      <X className="w-3.5 h-3.5" />
+                    </button>
+                  </div>
+                  <input
+                    type="text"
+                    value={assetSearch}
+                    onChange={e => setAssetSearch(e.target.value)}
+                    placeholder={t('common.search')}
+                    className="w-full px-3 py-1.5 text-xs border border-border rounded-lg mb-2 focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary"
+                  />
+                  <div className="grid grid-cols-3 gap-2 max-h-48 overflow-y-auto">
+                    {availableAssets
+                      .filter(a => !assetSearch || (a.original_name || a.filename || '').toLowerCase().includes(assetSearch.toLowerCase()))
+                      .map(asset => {
+                        const isImage = asset.mime_type?.startsWith('image/')
+                        const assetUrl = `/api/uploads/${asset.filename}`
+                        const name = asset.original_name || asset.filename
+                        return (
+                          <button
+                            key={asset.id || asset._id}
+                            onClick={() => handleAttachAsset(asset.id || asset._id)}
+                            className="block w-full border border-border rounded-lg overflow-hidden bg-white hover:border-brand-primary hover:ring-2 hover:ring-brand-primary/20 transition-all text-left"
+                          >
+                            <div className="aspect-square relative">
+                              {isImage ? (
+                                <img src={assetUrl} alt={name} className="absolute inset-0 w-full h-full object-cover" />
+                              ) : (
+                                <div className="absolute inset-0 flex items-center justify-center bg-surface-tertiary">
+                                  <FileText className="w-6 h-6 text-text-tertiary" />
+                                </div>
+                              )}
+                            </div>
+                            <div className="px-1.5 py-1 text-[10px] text-text-tertiary truncate border-t border-border-light">{name}</div>
+                          </button>
+                        )
+                      })}
+                  </div>
+                  {availableAssets.filter(a => !assetSearch || (a.original_name || a.filename || '').toLowerCase().includes(assetSearch.toLowerCase())).length === 0 && (
+                    <p className="text-xs text-text-tertiary text-center py-4">{t('posts.noAssetsFound')}</p>
+                  )}
+                </div>
+              )}
+            </div>
+          </CollapsibleSection>
+        )}
+
+        {/* Discussion Section (hidden in create mode) */}
+        {!isCreateMode && (
+          <CollapsibleSection title={t('posts.discussion')} noBorder>
+            <div className="px-5 pb-5">
+              <CommentsSection entityType="post" entityId={postId} />
+            </div>
+          </CollapsibleSection>
+        )}
+      </SlidePanel>
+
+      <Modal
+        isOpen={showDeleteConfirm}
+        onClose={() => setShowDeleteConfirm(false)}
+        title={t('posts.deletePost')}
+        isConfirm
+        danger
+        confirmText={t('posts.deletePost')}
+        onConfirm={confirmDelete}
+      >
+        {t('posts.deleteConfirm')}
+      </Modal>
+    </>
+  )
+}

client/src/components/ProjectCard.jsx

@@ -1,10 +1,14 @@
+import { useContext } from 'react'
 import { format } from 'date-fns'
 import { useNavigate } from 'react-router-dom'
+import { AppContext } from '../App'
 import StatusBadge from './StatusBadge'
 import BrandBadge from './BrandBadge'
 
 export default function ProjectCard({ project }) {
   const navigate = useNavigate()
+  const { getBrandName } = useContext(AppContext)
+  const brandLabel = getBrandName(project.brand_id) || project.brand
 
   const completedTasks = project.tasks?.filter(t => t.status === 'done').length || 0
   const totalTasks = project.tasks?.length || 0
@@ -12,19 +16,27 @@ export default function ProjectCard({ project }) {
 
   const ownerName = typeof project.owner === 'object' ? project.owner?.name : project.owner
 
+  const thumbnailUrl = project.thumbnail_url || project.thumbnailUrl
+
   return (
     <div
       onClick={() => navigate(`/projects/${project._id}`)}
-      className="bg-white rounded-xl border border-border p-5 card-hover cursor-pointer"
+      className="bg-white rounded-xl border border-border card-hover cursor-pointer overflow-hidden"
     >
+      {thumbnailUrl ? (
+        <div className="w-full h-32 overflow-hidden">
+          <img src={thumbnailUrl} alt="" className="w-full h-full object-cover" />
+        </div>
+      ) : null}
+      <div className="p-5">
       <div className="flex items-start justify-between gap-3 mb-3">
         <h4 className="text-base font-semibold text-text-primary line-clamp-1">{project.name}</h4>
         <StatusBadge status={project.status} size="xs" />
       </div>
 
-      {project.brand && (
+      {brandLabel && (
         <div className="mb-3">
-          <BrandBadge brand={project.brand} />
+          <BrandBadge brand={brandLabel} />
         </div>
       )}
 
@@ -63,6 +75,7 @@ export default function ProjectCard({ project }) {
           </span>
         )}
       </div>
+      </div>{/* end p-5 wrapper */}
     </div>
   )
 }

client/src/components/ProjectEditPanel.jsx

@@ -0,0 +1,304 @@
+import { useState, useEffect, useRef } from 'react'
+import { X, Trash2, Upload } from 'lucide-react'
+import { useLanguage } from '../i18n/LanguageContext'
+import { api, getBrandColor } from '../utils/api'
+import CommentsSection from './CommentsSection'
+import Modal from './Modal'
+import SlidePanel from './SlidePanel'
+import CollapsibleSection from './CollapsibleSection'
+
+export default function ProjectEditPanel({ project, onClose, onSave, onDelete, brands, teamMembers }) {
+  const { t, lang } = useLanguage()
+  const thumbnailInputRef = useRef(null)
+  const [form, setForm] = useState({})
+  const [dirty, setDirty] = useState(false)
+  const [saving, setSaving] = useState(false)
+  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false)
+  const [thumbnailUploading, setThumbnailUploading] = useState(false)
+
+  const projectId = project?._id || project?.id
+  if (!project) return null
+
+  useEffect(() => {
+    if (project) {
+      setForm({
+        name: project.name || '',
+        description: project.description || '',
+        brand_id: project.brandId || project.brand_id || '',
+        owner_id: project.ownerId || project.owner_id || '',
+        status: project.status || 'active',
+        start_date: project.startDate || project.start_date ? new Date(project.startDate || project.start_date).toISOString().slice(0, 10) : '',
+        due_date: project.dueDate ? new Date(project.dueDate).toISOString().slice(0, 10) : '',
+      })
+      setDirty(false)
+    }
+  }, [project])
+
+  const statusOptions = [
+    { value: 'active', label: 'Active' },
+    { value: 'paused', label: 'Paused' },
+    { value: 'completed', label: 'Completed' },
+    { value: 'cancelled', label: 'Cancelled' },
+  ]
+
+  const update = (field, value) => {
+    setForm(f => ({ ...f, [field]: value }))
+    setDirty(true)
+  }
+
+  const handleSave = async () => {
+    setSaving(true)
+    try {
+      await onSave(projectId, {
+        name: form.name,
+        description: form.description,
+        brand_id: form.brand_id ? Number(form.brand_id) : null,
+        owner_id: form.owner_id ? Number(form.owner_id) : null,
+        status: form.status,
+        start_date: form.start_date || null,
+        due_date: form.due_date || null,
+      })
+      setDirty(false)
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  const confirmDelete = async () => {
+    setShowDeleteConfirm(false)
+    await onDelete(projectId)
+    onClose()
+  }
+
+  const handleThumbnailUpload = async (file) => {
+    if (!file) return
+    setThumbnailUploading(true)
+    try {
+      const fd = new FormData()
+      fd.append('file', file)
+      await api.upload(`/projects/${projectId}/thumbnail`, fd)
+      // Parent will reload
+      onSave(projectId, form)
+    } catch (err) {
+      console.error('Thumbnail upload failed:', err)
+    } finally {
+      setThumbnailUploading(false)
+    }
+  }
+
+  const handleThumbnailRemove = async () => {
+    try {
+      await api.delete(`/projects/${projectId}/thumbnail`)
+      onSave(projectId, form)
+    } catch (err) {
+      console.error('Thumbnail remove failed:', err)
+    }
+  }
+
+  const brandName = (() => {
+    if (form.brand_id) {
+      const b = brands?.find(b => String(b._id || b.id) === String(form.brand_id))
+      return b ? (lang === 'ar' && b.name_ar ? b.name_ar : b.name) : null
+    }
+    return project.brand_name || project.brandName || null
+  })()
+
+  const header = (
+    <div className="px-5 py-4 border-b border-border shrink-0">
+      <div className="flex items-start justify-between gap-3">
+        <div className="flex-1 min-w-0">
+          <input
+            type="text"
+            value={form.name}
+            onChange={e => update('name', e.target.value)}
+            className="w-full text-lg font-semibold text-text-primary bg-transparent border-0 p-0 focus:outline-none focus:ring-0"
+            placeholder={t('projects.name')}
+          />
+          <div className="flex items-center gap-2 mt-2">
+            <span className={`text-[11px] px-2 py-0.5 rounded-full font-medium ${
+              form.status === 'active' ? 'bg-emerald-100 text-emerald-700' :
+              form.status === 'paused' ? 'bg-amber-100 text-amber-700' :
+              form.status === 'completed' ? 'bg-blue-100 text-blue-700' :
+              form.status === 'cancelled' ? 'bg-red-100 text-red-700' :
+              'bg-gray-100 text-gray-600'
+            }`}>
+              {statusOptions.find(s => s.value === form.status)?.label}
+            </span>
+            {brandName && (
+              <span className={`text-[10px] px-1.5 py-0.5 rounded ${getBrandColor(brandName).bg} ${getBrandColor(brandName).text}`}>
+                {brandName}
+              </span>
+            )}
+          </div>
+        </div>
+        <button
+          onClick={onClose}
+          className="p-1.5 rounded-lg hover:bg-surface-tertiary text-text-tertiary hover:text-text-primary transition-colors shrink-0"
+        >
+          <X className="w-5 h-5" />
+        </button>
+      </div>
+    </div>
+  )
+
+  return (
+    <>
+      <SlidePanel onClose={onClose} maxWidth="420px" header={header}>
+        {/* Details Section */}
+        <CollapsibleSection title={t('projects.details')}>
+          <div className="px-5 pb-4 space-y-3">
+            <div>
+              <label className="block text-xs font-medium text-text-tertiary mb-1">{t('projects.description')}</label>
+              <textarea
+                value={form.description}
+                onChange={e => update('description', e.target.value)}
+                rows={3}
+                className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary resize-none"
+                placeholder="Project description..."
+              />
+            </div>
+
+            <div className="grid grid-cols-2 gap-3">
+              <div>
+                <label className="block text-xs font-medium text-text-tertiary mb-1">{t('projects.brand')}</label>
+                <select
+                  value={form.brand_id}
+                  onChange={e => update('brand_id', e.target.value)}
+                  className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary"
+                >
+                  <option value="">Select brand</option>
+                  {(brands || []).map(b => <option key={b._id || b.id} value={b._id || b.id}>{b.icon} {lang === 'ar' && b.name_ar ? b.name_ar : b.name}</option>)}
+                </select>
+              </div>
+              <div>
+                <label className="block text-xs font-medium text-text-tertiary mb-1">{t('projects.status')}</label>
+                <select
+                  value={form.status}
+                  onChange={e => update('status', e.target.value)}
+                  className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary"
+                >
+                  {statusOptions.map(s => <option key={s.value} value={s.value}>{s.label}</option>)}
+                </select>
+              </div>
+            </div>
+
+            <div className="grid grid-cols-2 gap-3">
+              <div>
+                <label className="block text-xs font-medium text-text-tertiary mb-1">{t('projects.owner')}</label>
+                <select
+                  value={form.owner_id}
+                  onChange={e => update('owner_id', e.target.value)}
+                  className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary"
+                >
+                  <option value="">{t('common.unassigned')}</option>
+                  {(teamMembers || []).map(m => <option key={m._id || m.id} value={m._id || m.id}>{m.name}</option>)}
+                </select>
+              </div>
+              <div>
+                <label className="block text-xs font-medium text-text-tertiary mb-1">{t('projects.startDate')}</label>
+                <input
+                  type="date"
+                  value={form.start_date}
+                  onChange={e => update('start_date', e.target.value)}
+                  className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary"
+                />
+              </div>
+            </div>
+
+            <div>
+              <label className="block text-xs font-medium text-text-tertiary mb-1">{t('projects.dueDate')}</label>
+              <input
+                type="date"
+                value={form.due_date}
+                onChange={e => update('due_date', e.target.value)}
+                className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary"
+              />
+            </div>
+
+            {/* Thumbnail */}
+            <div>
+              <label className="block text-xs font-medium text-text-tertiary mb-1">{t('projects.thumbnail')}</label>
+              {(project.thumbnail_url || project.thumbnailUrl) ? (
+                <div className="relative group rounded-lg overflow-hidden border border-border">
+                  <img src={project.thumbnail_url || project.thumbnailUrl} alt="" className="w-full h-24 object-cover" />
+                  <div className="absolute inset-0 bg-black/0 group-hover:bg-black/30 transition-colors flex items-center justify-center gap-2 opacity-0 group-hover:opacity-100">
+                    <button
+                      onClick={() => thumbnailInputRef.current?.click()}
+                      className="px-3 py-1.5 text-xs bg-white/90 hover:bg-white rounded-lg font-medium text-text-primary transition-colors"
+                    >
+                      {t('projects.changeThumbnail')}
+                    </button>
+                    <button
+                      onClick={handleThumbnailRemove}
+                      className="px-3 py-1.5 text-xs bg-red-500/90 hover:bg-red-500 rounded-lg font-medium text-white transition-colors"
+                    >
+                      {t('projects.removeThumbnail')}
+                    </button>
+                  </div>
+                </div>
+              ) : (
+                <button
+                  onClick={() => thumbnailInputRef.current?.click()}
+                  disabled={thumbnailUploading}
+                  className="w-full border-2 border-dashed border-border rounded-lg p-3 text-center hover:border-brand-primary/40 transition-colors"
+                >
+                  <Upload className={`w-5 h-5 text-text-tertiary mx-auto mb-1 ${thumbnailUploading ? 'animate-pulse' : ''}`} />
+                  <p className="text-xs text-text-secondary">
+                    {thumbnailUploading ? 'Uploading...' : t('projects.uploadThumbnail')}
+                  </p>
+                </button>
+              )}
+              <input
+                ref={thumbnailInputRef}
+                type="file"
+                accept="image/*"
+                className="hidden"
+                onChange={e => { handleThumbnailUpload(e.target.files[0]); e.target.value = '' }}
+              />
+            </div>
+
+            <div className="flex items-center gap-2 pt-2">
+              {dirty && (
+                <button
+                  onClick={handleSave}
+                  disabled={!form.name || saving}
+                  className={`flex-1 px-4 py-2 bg-brand-primary text-white rounded-lg text-sm font-medium hover:bg-brand-primary-light disabled:opacity-50 disabled:cursor-not-allowed shadow-sm ${saving ? 'btn-loading' : ''}`}
+                >
+                  {t('tasks.saveChanges')}
+                </button>
+              )}
+              {onDelete && (
+                <button
+                  onClick={() => setShowDeleteConfirm(true)}
+                  className="p-2 text-text-tertiary hover:text-red-500 hover:bg-red-50 rounded-lg transition-colors"
+                  title={t('common.delete')}
+                >
+                  <Trash2 className="w-4 h-4" />
+                </button>
+              )}
+            </div>
+          </div>
+        </CollapsibleSection>
+
+        {/* Discussion Section */}
+        <CollapsibleSection title={t('projects.discussion')} noBorder>
+          <div className="px-5 pb-5">
+            <CommentsSection entityType="project" entityId={projectId} />
+          </div>
+        </CollapsibleSection>
+      </SlidePanel>
+
+      <Modal
+        isOpen={showDeleteConfirm}
+        onClose={() => setShowDeleteConfirm(false)}
+        title={t('projects.deleteProject')}
+        isConfirm
+        danger
+        confirmText={t('common.delete')}
+        onConfirm={confirmDelete}
+      >
+        {t('projects.deleteConfirm')}
+      </Modal>
+    </>
+  )
+}

client/src/components/Sidebar.jsx

@@ -1,33 +1,109 @@
-import { useContext } from 'react'
+import { useState, useContext } from 'react'
 import { NavLink } from 'react-router-dom'
 import {
   LayoutDashboard, FileEdit, Image, Calendar, Wallet,
-  FolderKanban, CheckSquare, Users, ChevronLeft, ChevronRight, Sparkles, Shield, LogOut, User, Settings, Languages
+  FolderKanban, CheckSquare, Users, ChevronLeft, ChevronRight, ChevronDown,
+  Sparkles, Shield, LogOut, User, Settings, Languages, Tag, LayoutList, Receipt, BarChart3, Palette, CalendarDays, AlertCircle
 } from 'lucide-react'
 import { useAuth } from '../contexts/AuthContext'
 import { useLanguage } from '../i18n/LanguageContext'
 
-const navItems = [
+// Standalone items (no category)
+const standaloneTop = [
   { to: '/', icon: LayoutDashboard, labelKey: 'nav.dashboard', end: true, tutorial: 'dashboard' },
-  { to: '/campaigns', icon: Calendar, labelKey: 'nav.campaigns', tutorial: 'campaigns' },
-  { to: '/finance', icon: Wallet, labelKey: 'nav.finance', minRole: 'manager' },
-  { to: '/posts', icon: FileEdit, labelKey: 'nav.posts', tutorial: 'posts' },
-  { to: '/assets', icon: Image, labelKey: 'nav.assets', tutorial: 'assets' },
-  { to: '/projects', icon: FolderKanban, labelKey: 'nav.projects' },
-  { to: '/tasks', icon: CheckSquare, labelKey: 'nav.tasks', tutorial: 'tasks' },
+]
+
+// Grouped items by module
+const moduleGroups = [
+  {
+    module: 'marketing',
+    labelKey: 'modules.marketing',
+    icon: Calendar,
+    items: [
+      { to: '/campaigns', icon: Calendar, labelKey: 'nav.campaigns', tutorial: 'campaigns' },
+      { to: '/posts', icon: FileEdit, labelKey: 'nav.posts', tutorial: 'posts' },
+      { to: '/calendar', icon: CalendarDays, labelKey: 'nav.calendar' },
+      { to: '/artefacts', icon: Palette, labelKey: 'nav.artefacts' },
+      { to: '/assets', icon: Image, labelKey: 'nav.assets', tutorial: 'assets' },
+      { to: '/brands', icon: Tag, labelKey: 'nav.brands' },
+    ],
+  },
+  {
+    module: 'projects',
+    labelKey: 'modules.projects',
+    icon: FolderKanban,
+    items: [
+      { to: '/projects', icon: LayoutList, labelKey: 'nav.projects' },
+      { to: '/tasks', icon: CheckSquare, labelKey: 'nav.tasks', tutorial: 'tasks' },
+    ],
+  },
+  {
+    module: 'finance',
+    labelKey: 'modules.finance',
+    icon: Wallet,
+    minRole: 'manager',
+    items: [
+      { to: '/finance', icon: BarChart3, labelKey: 'nav.financeDashboard' },
+      { to: '/budgets', icon: Receipt, labelKey: 'nav.budgets' },
+    ],
+  },
+  {
+    module: 'issues',
+    labelKey: 'modules.issues',
+    icon: AlertCircle,
+    items: [
+      { to: '/issues', icon: AlertCircle, labelKey: 'nav.issues' },
+    ],
+  },
+]
+
+const standaloneBottom = [
   { to: '/team', icon: Users, labelKey: 'nav.team', tutorial: 'team' },
 ]
 
 const ROLE_LEVEL = { contributor: 0, manager: 1, superadmin: 2 }
 
 export default function Sidebar({ collapsed, setCollapsed }) {
-  const { user: currentUser, logout } = useAuth()
+  const { user: currentUser, logout, hasModule } = useAuth()
   const { t, lang, setLang } = useLanguage()
   const userLevel = ROLE_LEVEL[currentUser?.role] ?? 0
 
-  const visibleItems = navItems.filter(item => {
-    if (!item.minRole) return true
-    return userLevel >= (ROLE_LEVEL[item.minRole] ?? 0)
+  // Track expanded state for each module group
+  const [expandedGroups, setExpandedGroups] = useState(() => {
+    const initial = {}
+    moduleGroups.forEach(g => { initial[g.module] = true })
+    return initial
+  })
+
+  const toggleGroup = (module) => {
+    setExpandedGroups(prev => ({ ...prev, [module]: !prev[module] }))
+  }
+
+  const navLink = ({ to, icon: Icon, labelKey, end, tutorial }, { sub = false } = {}) => (
+    <NavLink
+      key={to}
+      to={to}
+      end={end}
+      data-tutorial={tutorial}
+      className={({ isActive }) =>
+        `flex items-center gap-3 rounded-lg font-medium transition-all duration-200 group ${
+          sub ? 'px-3 py-1.5 ms-5 text-[13px]' : 'px-3 py-2 text-sm'
+        } ${
+          isActive
+            ? 'bg-white/15 text-white shadow-sm sidebar-active-glow'
+            : 'text-text-on-dark-muted hover:bg-white/8 hover:text-white'
+        }`
+      }
+    >
+      <Icon className={`${sub ? 'w-3.5 h-3.5' : 'w-5 h-5'} shrink-0`} />
+      {!collapsed && <span className="animate-fade-in whitespace-nowrap">{t(labelKey)}</span>}
+    </NavLink>
+  )
+
+  const visibleGroups = moduleGroups.filter(group => {
+    if (!hasModule(group.module)) return false
+    if (group.minRole && userLevel < (ROLE_LEVEL[group.minRole] ?? 0)) return false
+    return true
   })
 
   return (
@@ -38,7 +114,7 @@ export default function Sidebar({ collapsed, setCollapsed }) {
     >
       {/* Logo */}
       <div className="flex items-center gap-3 px-4 h-16 border-b border-white/10 shrink-0">
-        <div className="w-9 h-9 rounded-lg bg-gradient-to-br from-indigo-400 to-purple-500 flex items-center justify-center shrink-0">
+        <div className="w-9 h-9 rounded-lg bg-gradient-to-br from-indigo-400 via-purple-500 to-pink-500 flex items-center justify-center shrink-0 shadow-lg shadow-indigo-500/30">
           <Sparkles className="w-5 h-5 text-white" />
         </div>
         {!collapsed && (
@@ -50,32 +126,53 @@ export default function Sidebar({ collapsed, setCollapsed }) {
       </div>
 
       {/* Navigation */}
-      <nav className="flex-1 py-4 px-3 space-y-1 overflow-y-auto">
-        {visibleItems.map(({ to, icon: Icon, labelKey, end, tutorial }) => (
-          <NavLink
-            key={to}
-            to={to}
-            end={end}
-            data-tutorial={tutorial}
-            className={({ isActive }) =>
-              `flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-all duration-200 group ${
-                isActive
-                  ? 'bg-white/15 text-white shadow-sm'
-                  : 'text-text-on-dark-muted hover:bg-white/8 hover:text-white'
-              }`
-            }
-          >
-            <Icon className="w-5 h-5 shrink-0" />
-            {!collapsed && <span className="animate-fade-in whitespace-nowrap">{t(labelKey)}</span>}
-          </NavLink>
-        ))}
-        
+      <nav className="flex-1 py-3 px-3 space-y-0.5 overflow-y-auto">
+        {/* Dashboard (always visible, standalone) */}
+        {standaloneTop.map(item => navLink(item))}
+
+        {/* Module groups */}
+        {visibleGroups.map(group => {
+          const GroupIcon = group.icon
+          const isExpanded = expandedGroups[group.module]
+
+          if (collapsed) {
+            // When collapsed, just show the sub-item icons
+            return group.items.map(item => navLink(item))
+          }
+
+          return (
+            <div key={group.module} className="mt-3">
+              {/* Category header */}
+              <button
+                onClick={() => toggleGroup(group.module)}
+                className="w-full flex items-center gap-2 px-3 py-2 text-xs font-bold uppercase tracking-wide text-text-on-dark-muted hover:text-white transition-colors rounded-lg hover:bg-white/5"
+              >
+                <GroupIcon className="w-4 h-4 shrink-0 opacity-70" />
+                <span className="flex-1 text-start">{t(group.labelKey)}</span>
+                <ChevronDown className={`w-3.5 h-3.5 opacity-60 transition-transform ${isExpanded ? '' : '-rotate-90'}`} />
+              </button>
+
+              {/* Sub-items */}
+              {isExpanded && (
+                <div className="space-y-0.5 mt-0.5">
+                  {group.items.map(item => navLink(item, { sub: true }))}
+                </div>
+              )}
+            </div>
+          )
+        })}
+
+        {/* Team (always visible) */}
+        <div className="mt-3 pt-2 border-t border-white/8">
+          {standaloneBottom.map(item => navLink(item))}
+        </div>
+
         {/* Superadmin Only: Users Management */}
         {currentUser?.role === 'superadmin' && (
           <NavLink
             to="/users"
             className={({ isActive }) =>
-              `flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-all duration-200 group ${
+              `flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-all duration-200 group ${
                 isActive
                   ? 'bg-white/15 text-white shadow-sm'
                   : 'text-text-on-dark-muted hover:bg-white/8 hover:text-white'
@@ -91,7 +188,7 @@ export default function Sidebar({ collapsed, setCollapsed }) {
         <NavLink
           to="/settings"
           className={({ isActive }) =>
-            `flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-all duration-200 group ${
+            `flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-all duration-200 group ${
               isActive
                 ? 'bg-white/15 text-white shadow-sm'
                 : 'text-text-on-dark-muted hover:bg-white/8 hover:text-white'
@@ -122,7 +219,7 @@ export default function Sidebar({ collapsed, setCollapsed }) {
             </div>
           </div>
         )}
-        
+
         {!collapsed && (
           <>
             {/* Language Toggle */}
@@ -148,7 +245,7 @@ export default function Sidebar({ collapsed, setCollapsed }) {
             </div>
           </>
         )}
-        
+
         {/* Collapse toggle */}
         <div className="p-3 border-t border-white/10">
           <button

client/src/components/SkeletonLoader.jsx

@@ -0,0 +1,161 @@
+// Reusable skeleton components for loading states
+
+export function SkeletonCard() {
+  return (
+    <div className="bg-white rounded-xl border border-border p-5 animate-pulse">
+      <div className="h-4 bg-surface-tertiary rounded w-3/4 mb-3"></div>
+      <div className="h-3 bg-surface-tertiary rounded w-1/2 mb-2"></div>
+      <div className="h-3 bg-surface-tertiary rounded w-2/3"></div>
+    </div>
+  )
+}
+
+export function SkeletonStatCard() {
+  return (
+    <div className="bg-white rounded-xl border border-border p-5 animate-pulse">
+      <div className="flex items-start justify-between mb-4">
+        <div className="w-10 h-10 bg-surface-tertiary rounded-lg"></div>
+        <div className="h-3 bg-surface-tertiary rounded w-16"></div>
+      </div>
+      <div className="h-8 bg-surface-tertiary rounded w-20 mb-2"></div>
+      <div className="h-3 bg-surface-tertiary rounded w-24"></div>
+    </div>
+  )
+}
+
+export function SkeletonTable({ rows = 5, cols = 6 }) {
+  return (
+    <div className="bg-white rounded-xl border border-border overflow-hidden animate-pulse">
+      <div className="border-b border-border bg-surface-secondary p-4">
+        <div className="flex gap-4">
+          {[...Array(cols)].map((_, i) => (
+            <div key={i} className="h-3 bg-surface-tertiary rounded w-20"></div>
+          ))}
+        </div>
+      </div>
+      <div className="divide-y divide-border-light">
+        {[...Array(rows)].map((_, i) => (
+          <div key={i} className="p-4">
+            <div className="flex gap-4">
+              {[...Array(cols)].map((_, j) => (
+                <div key={j} className="h-4 bg-surface-tertiary rounded flex-1"></div>
+              ))}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+export function SkeletonKanbanBoard() {
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-4">
+      {[...Array(5)].map((_, colIdx) => (
+        <div key={colIdx} className="animate-pulse">
+          <div className="flex items-center gap-2 mb-3">
+            <div className="w-2.5 h-2.5 bg-surface-tertiary rounded-full"></div>
+            <div className="h-4 bg-surface-tertiary rounded w-24"></div>
+            <div className="h-5 bg-surface-tertiary rounded-full w-8"></div>
+          </div>
+          <div className="bg-surface-secondary rounded-xl p-2 space-y-2 min-h-[400px]">
+            {[...Array(3)].map((_, cardIdx) => (
+              <div key={cardIdx} className="bg-white rounded-lg border border-border p-3">
+                <div className="h-4 bg-surface-tertiary rounded w-full mb-2"></div>
+                <div className="h-3 bg-surface-tertiary rounded w-3/4 mb-3"></div>
+                <div className="flex gap-2">
+                  <div className="h-5 bg-surface-tertiary rounded w-16"></div>
+                  <div className="h-5 bg-surface-tertiary rounded w-20"></div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+export function SkeletonCalendar() {
+  return (
+    <div className="bg-white rounded-xl border border-border overflow-hidden animate-pulse">
+      <div className="flex items-center justify-between px-6 py-4 border-b border-border">
+        <div className="h-6 bg-surface-tertiary rounded w-40"></div>
+        <div className="h-8 bg-surface-tertiary rounded w-20"></div>
+      </div>
+      <div className="grid grid-cols-7 border-b border-border bg-surface-secondary">
+        {[...Array(7)].map((_, i) => (
+          <div key={i} className="text-center py-3">
+            <div className="h-3 bg-surface-tertiary rounded w-8 mx-auto"></div>
+          </div>
+        ))}
+      </div>
+      <div className="grid grid-cols-7">
+        {[...Array(35)].map((_, i) => (
+          <div key={i} className="border-r border-b border-border min-h-[100px] p-2">
+            <div className="h-5 w-5 bg-surface-tertiary rounded-full mb-2"></div>
+            <div className="space-y-1">
+              <div className="h-3 bg-surface-tertiary rounded w-full"></div>
+              {i % 3 === 0 && <div className="h-3 bg-surface-tertiary rounded w-3/4"></div>}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+export function SkeletonAssetGrid({ count = 10 }) {
+  return (
+    <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-4">
+      {[...Array(count)].map((_, i) => (
+        <div key={i} className="animate-pulse">
+          <div className="aspect-square bg-surface-tertiary rounded-xl"></div>
+          <div className="mt-2 h-3 bg-surface-tertiary rounded w-3/4"></div>
+          <div className="mt-1 h-3 bg-surface-tertiary rounded w-1/2"></div>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+export function SkeletonDashboard() {
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div className="animate-pulse">
+        <div className="h-8 w-64 bg-surface-tertiary rounded-lg mb-2"></div>
+        <div className="h-4 w-48 bg-surface-tertiary rounded"></div>
+      </div>
+
+      {/* Stat cards */}
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+        {[...Array(4)].map((_, i) => (
+          <SkeletonStatCard key={i} />
+        ))}
+      </div>
+
+      {/* Content cards */}
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        {[...Array(2)].map((_, i) => (
+          <div key={i} className="bg-white rounded-xl border border-border animate-pulse">
+            <div className="px-5 py-4 border-b border-border">
+              <div className="h-5 bg-surface-tertiary rounded w-32"></div>
+            </div>
+            <div className="divide-y divide-border-light">
+              {[...Array(5)].map((_, j) => (
+                <div key={j} className="px-5 py-3 flex gap-3">
+                  <div className="flex-1 space-y-2">
+                    <div className="h-4 bg-surface-tertiary rounded w-2/3"></div>
+                    <div className="h-3 bg-surface-tertiary rounded w-1/2"></div>
+                  </div>
+                  <div className="h-6 bg-surface-tertiary rounded w-16"></div>
+                </div>
+              ))}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}

client/src/components/SlidePanel.jsx

@@ -0,0 +1,19 @@
+import { createPortal } from 'react-dom'
+
+export default function SlidePanel({ onClose, maxWidth = '420px', header, children }) {
+  return createPortal(
+    <>
+      <div className="fixed inset-0 bg-black/40 backdrop-blur-sm animate-backdrop-in z-[9998]" onClick={onClose} />
+      <div
+        className="fixed top-0 right-0 h-full w-full bg-white shadow-2xl z-[9998] flex flex-col animate-slide-in-right overflow-hidden"
+        style={{ maxWidth }}
+      >
+        {header}
+        <div className="flex-1 overflow-y-auto">
+          {children}
+        </div>
+      </div>
+    </>,
+    document.body
+  )
+}

client/src/components/StatCard.jsx

@@ -1,20 +1,22 @@
 export default function StatCard({ icon: Icon, label, value, subtitle, color = 'brand-primary', trend }) {
-  const colorMap = {
-    'brand-primary': 'from-indigo-500 to-indigo-600',
-    'brand-secondary': 'from-pink-500 to-pink-600',
-    'brand-tertiary': 'from-amber-500 to-amber-600',
-    'brand-quaternary': 'from-emerald-500 to-emerald-600',
+  const accentMap = {
+    'brand-primary': 'accent-primary',
+    'brand-secondary': 'accent-secondary',
+    'brand-tertiary': 'accent-tertiary',
+    'brand-quaternary': 'accent-quaternary',
   }
 
   const iconBgMap = {
-    'brand-primary': 'bg-indigo-50 text-indigo-600',
-    'brand-secondary': 'bg-pink-50 text-pink-600',
-    'brand-tertiary': 'bg-amber-50 text-amber-600',
-    'brand-quaternary': 'bg-emerald-50 text-emerald-600',
+    'brand-primary': 'bg-indigo-50 text-indigo-600 shadow-lg shadow-indigo-500/20',
+    'brand-secondary': 'bg-pink-50 text-pink-600 shadow-lg shadow-pink-500/20',
+    'brand-tertiary': 'bg-amber-50 text-amber-600 shadow-lg shadow-amber-500/20',
+    'brand-quaternary': 'bg-emerald-50 text-emerald-600 shadow-lg shadow-emerald-500/20',
   }
 
+  const accentClass = accentMap[color] || 'accent-primary'
+
   return (
-    <div className="bg-white rounded-xl border border-border p-5 card-hover">
+    <div className={`stat-card-premium ${accentClass} bg-white rounded-xl border border-border p-5 card-hover`}>
       <div className="flex items-start justify-between">
         <div>
           <p className="text-sm font-medium text-text-tertiary">{label}</p>

client/src/components/TaskCalendarView.jsx

@@ -0,0 +1,176 @@
+import { useState } from 'react'
+import { ChevronLeft, ChevronRight } from 'lucide-react'
+import { PRIORITY_CONFIG } from '../utils/api'
+import { useLanguage } from '../i18n/LanguageContext'
+
+const DAYS = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
+
+function getMonthData(year, month) {
+  const firstDay = new Date(year, month, 1).getDay()
+  const daysInMonth = new Date(year, month + 1, 0).getDate()
+  const prevDays = new Date(year, month, 0).getDate()
+
+  const cells = []
+  // Previous month trailing days
+  for (let i = firstDay - 1; i >= 0; i--) {
+    cells.push({ day: prevDays - i, current: false, date: new Date(year, month - 1, prevDays - i) })
+  }
+  // Current month
+  for (let d = 1; d <= daysInMonth; d++) {
+    cells.push({ day: d, current: true, date: new Date(year, month, d) })
+  }
+  // Next month leading days
+  const remaining = 42 - cells.length
+  for (let d = 1; d <= remaining; d++) {
+    cells.push({ day: d, current: false, date: new Date(year, month + 1, d) })
+  }
+  return cells
+}
+
+function dateKey(d) {
+  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`
+}
+
+export default function TaskCalendarView({ tasks, onTaskClick }) {
+  const { t } = useLanguage()
+  const today = new Date()
+  const [year, setYear] = useState(today.getFullYear())
+  const [month, setMonth] = useState(today.getMonth())
+
+  const cells = getMonthData(year, month)
+  const todayKey = dateKey(today)
+
+  // Group tasks by due_date
+  const tasksByDate = {}
+  const unscheduled = []
+  for (const task of tasks) {
+    const dd = task.due_date || task.dueDate
+    if (dd) {
+      const key = dd.slice(0, 10) // yyyy-mm-dd
+      if (!tasksByDate[key]) tasksByDate[key] = []
+      tasksByDate[key].push(task)
+    } else {
+      unscheduled.push(task)
+    }
+  }
+
+  const prevMonth = () => {
+    if (month === 0) { setMonth(11); setYear(y => y - 1) }
+    else setMonth(m => m - 1)
+  }
+  const nextMonth = () => {
+    if (month === 11) { setMonth(0); setYear(y => y + 1) }
+    else setMonth(m => m + 1)
+  }
+  const goToday = () => { setYear(today.getFullYear()); setMonth(today.getMonth()) }
+
+  const monthLabel = new Date(year, month).toLocaleString('default', { month: 'long', year: 'numeric' })
+
+  const getPillColor = (task) => {
+    const p = task.priority || 'medium'
+    if (p === 'urgent') return 'bg-red-500 text-white'
+    if (p === 'high') return 'bg-orange-400 text-white'
+    if (p === 'medium') return 'bg-amber-400 text-amber-900'
+    return 'bg-gray-300 text-gray-700'
+  }
+
+  return (
+    <div className="flex gap-4">
+      {/* Calendar grid */}
+      <div className="flex-1">
+        {/* Nav */}
+        <div className="flex items-center justify-between mb-4">
+          <div className="flex items-center gap-2">
+            <button onClick={prevMonth} className="p-1.5 rounded-lg hover:bg-surface-tertiary text-text-tertiary hover:text-text-primary transition-colors">
+              <ChevronLeft className="w-4 h-4" />
+            </button>
+            <h3 className="text-sm font-semibold text-text-primary min-w-[150px] text-center">{monthLabel}</h3>
+            <button onClick={nextMonth} className="p-1.5 rounded-lg hover:bg-surface-tertiary text-text-tertiary hover:text-text-primary transition-colors">
+              <ChevronRight className="w-4 h-4" />
+            </button>
+          </div>
+          <button onClick={goToday} className="px-3 py-1 text-xs font-medium text-brand-primary hover:bg-brand-primary/5 rounded-lg transition-colors">
+            {t('tasks.today')}
+          </button>
+        </div>
+
+        {/* Day headers */}
+        <div className="grid grid-cols-7 mb-1">
+          {DAYS.map(d => (
+            <div key={d} className="text-center text-[10px] font-medium text-text-tertiary uppercase py-1">
+              {d}
+            </div>
+          ))}
+        </div>
+
+        {/* Cells */}
+        <div className="grid grid-cols-7 border-t border-l border-border">
+          {cells.map((cell, i) => {
+            const key = dateKey(cell.date)
+            const isToday = key === todayKey
+            const dayTasks = tasksByDate[key] || []
+            return (
+              <div
+                key={i}
+                className={`border-r border-b border-border min-h-[90px] p-1 ${
+                  cell.current ? 'bg-white' : 'bg-surface-secondary/50'
+                }`}
+              >
+                <div className={`text-[11px] font-medium mb-0.5 w-6 h-6 flex items-center justify-center rounded-full ${
+                  isToday ? 'bg-brand-primary text-white' : cell.current ? 'text-text-primary' : 'text-text-tertiary'
+                }`}>
+                  {cell.day}
+                </div>
+                <div className="space-y-0.5">
+                  {dayTasks.slice(0, 3).map(task => (
+                    <button
+                      key={task._id || task.id}
+                      onClick={() => onTaskClick(task)}
+                      className={`w-full text-left text-[10px] px-1.5 py-0.5 rounded truncate font-medium hover:opacity-80 transition-opacity ${
+                        task.status === 'done' ? 'bg-emerald-100 text-emerald-700 line-through' : getPillColor(task)
+                      }`}
+                      title={task.title}
+                    >
+                      {task.title}
+                    </button>
+                  ))}
+                  {dayTasks.length > 3 && (
+                    <div className="text-[9px] text-text-tertiary text-center font-medium">
+                      +{dayTasks.length - 3} more
+                    </div>
+                  )}
+                </div>
+              </div>
+            )
+          })}
+        </div>
+      </div>
+
+      {/* Unscheduled sidebar */}
+      {unscheduled.length > 0 && (
+        <div className="w-48 shrink-0">
+          <h4 className="text-xs font-semibold text-text-tertiary uppercase mb-2">{t('tasks.unscheduled')}</h4>
+          <div className="space-y-1.5 max-h-[500px] overflow-y-auto">
+            {unscheduled.map(task => {
+              const priority = PRIORITY_CONFIG[task.priority] || PRIORITY_CONFIG.medium
+              return (
+                <button
+                  key={task._id || task.id}
+                  onClick={() => onTaskClick(task)}
+                  className="w-full text-left bg-white border border-border rounded-lg p-2 hover:border-brand-primary/30 transition-colors"
+                >
+                  <div className="flex items-center gap-1.5">
+                    <div className={`w-2 h-2 rounded-full ${priority.color} shrink-0`} />
+                    <span className={`text-xs font-medium truncate ${task.status === 'done' ? 'text-text-tertiary line-through' : 'text-text-primary'}`}>
+                      {task.title}
+                    </span>
+                  </div>
+                </button>
+              )
+            })}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}

client/src/components/TaskCard.jsx

@@ -1,6 +1,6 @@
 import { format } from 'date-fns'
-import { ArrowRight, Clock, User, UserCheck } from 'lucide-react'
-import { PRIORITY_CONFIG } from '../utils/api'
+import { ArrowRight, Clock, User, UserCheck, MessageCircle } from 'lucide-react'
+import { PRIORITY_CONFIG, getBrandColor } from '../utils/api'
 import { useAuth } from '../contexts/AuthContext'
 import { useLanguage } from '../i18n/LanguageContext'
 
@@ -8,7 +8,8 @@ export default function TaskCard({ task, onMove, showProject = true }) {
   const { t } = useLanguage()
   const { user: authUser } = useAuth()
   const priority = PRIORITY_CONFIG[task.priority] || PRIORITY_CONFIG.medium
-  const projectName = typeof task.project === 'object' ? task.project?.name : task.projectName
+  const projectName = task.project_name || (typeof task.project === 'object' ? task.project?.name : task.projectName)
+  const brandName = task.brand_name || task.brandName
 
   const nextStatus = {
     todo: 'in_progress',
@@ -23,6 +24,7 @@ export default function TaskCard({ task, onMove, showProject = true }) {
   const dueDate = task.due_date || task.dueDate
   const isOverdue = dueDate && new Date(dueDate) < new Date() && task.status !== 'done'
   const creatorName = task.creator_user_name || task.creatorUserName
+  const commentCount = task.comment_count || task.commentCount || 0
 
   // Determine if this task was assigned by someone else
   const createdByUserId = task.created_by_user_id || task.createdByUserId
@@ -30,7 +32,7 @@ export default function TaskCard({ task, onMove, showProject = true }) {
   const assignedName = task.assigned_name || task.assignedName
 
   return (
-    <div className={`bg-white rounded-lg border border-border p-3 card-hover group ${isExternallyAssigned ? 'border-l-[3px] border-l-blue-400' : ''}`}>
+    <div className={`bg-white rounded-lg border border-border p-3 card-hover group cursor-pointer ${isExternallyAssigned ? 'border-l-[3px] border-l-blue-400' : ''}`}>
       <div className="flex items-start gap-2.5">
         {/* Priority dot */}
         <div className={`w-2.5 h-2.5 rounded-full ${priority.color} mt-1.5 shrink-0`} title={priority.label} />
@@ -56,6 +58,11 @@ export default function TaskCard({ task, onMove, showProject = true }) {
           )}
 
           <div className="flex items-center gap-2 mt-1.5 flex-wrap">
+            {showProject && brandName && (
+              <span className={`text-[10px] px-1.5 py-0.5 rounded ${getBrandColor(brandName).bg} ${getBrandColor(brandName).text}`}>
+                {brandName}
+              </span>
+            )}
             {showProject && projectName && (
               <span className="text-[10px] px-1.5 py-0.5 rounded bg-surface-tertiary text-text-tertiary">
                 {projectName}
@@ -67,6 +74,12 @@ export default function TaskCard({ task, onMove, showProject = true }) {
                 {format(new Date(dueDate), 'MMM d')}
               </span>
             )}
+            {commentCount > 0 && (
+              <span className="text-[10px] flex items-center gap-0.5 text-text-tertiary">
+                <MessageCircle className="w-3 h-3" />
+                {commentCount}
+              </span>
+            )}
             {!isExternallyAssigned && creatorName && (
               <span className="text-[10px] flex items-center gap-1 text-text-tertiary">
                 <User className="w-3 h-3" />
@@ -81,7 +94,7 @@ export default function TaskCard({ task, onMove, showProject = true }) {
       {onMove && nextStatus[task.status] && (
         <div className="mt-2 pt-2 border-t border-border-light opacity-0 group-hover:opacity-100 transition-opacity">
           <button
-            onClick={() => onMove(task._id || task.id, nextStatus[task.status])}
+            onClick={(e) => { e.stopPropagation(); onMove(task._id || task.id, nextStatus[task.status]) }}
             className="text-[11px] text-brand-primary hover:text-brand-primary-light font-medium flex items-center gap-1"
           >
             {nextLabel[task.status]} <ArrowRight className="w-3 h-3" />

client/src/components/TaskDetailPanel.jsx

@@ -0,0 +1,553 @@
+import { useState, useEffect, useRef } from 'react'
+import { X, Trash2, AlertCircle, Upload, FileText, Star } from 'lucide-react'
+import { PRIORITY_CONFIG, getBrandColor, api } from '../utils/api'
+import { useLanguage } from '../i18n/LanguageContext'
+import CommentsSection from './CommentsSection'
+import Modal from './Modal'
+import SlidePanel from './SlidePanel'
+import CollapsibleSection from './CollapsibleSection'
+
+const API_BASE = '/api'
+
+export default function TaskDetailPanel({ task, onClose, onSave, onDelete, projects, users, brands }) {
+  const { t } = useLanguage()
+  const fileInputRef = useRef(null)
+  const [form, setForm] = useState({
+    title: '', description: '', project_id: '', assigned_to: '',
+    priority: 'medium', status: 'todo', start_date: '', due_date: '',
+  })
+  const [dirty, setDirty] = useState(false)
+  const [saving, setSaving] = useState(false)
+  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false)
+
+  // Attachments state
+  const [attachments, setAttachments] = useState([])
+  const [pendingFiles, setPendingFiles] = useState([]) // for create mode (no task ID yet)
+  const [uploading, setUploading] = useState(false)
+  const [maxSizeMB, setMaxSizeMB] = useState(50)
+  const [uploadError, setUploadError] = useState(null)
+  const [currentThumbnail, setCurrentThumbnail] = useState(null)
+
+  const taskId = task?._id || task?.id
+  const isCreateMode = !taskId
+
+  useEffect(() => {
+    api.get('/settings/app').then(s => setMaxSizeMB(s.uploadMaxSizeMB || 50)).catch(() => {})
+  }, [])
+
+  const taskIdRef = useRef(taskId)
+  useEffect(() => {
+    // Only reset form when switching to a different task (or initial mount)
+    const switched = taskIdRef.current !== taskId
+    taskIdRef.current = taskId
+    if (task && (switched || !form.title)) {
+      setForm({
+        title: task.title || '',
+        description: task.description || '',
+        project_id: task.project_id || task.projectId || '',
+        assigned_to: task.assigned_to || task.assignedTo || '',
+        priority: task.priority || 'medium',
+        status: task.status || 'todo',
+        start_date: task.start_date || task.startDate || '',
+        due_date: task.due_date || task.dueDate || '',
+      })
+      setDirty(isCreateMode)
+      if (switched) setPendingFiles([])
+      setCurrentThumbnail(task.thumbnail || null)
+      if (!isCreateMode) loadAttachments()
+    }
+  }, [task])
+
+  if (!task) return null
+
+  const dueDate = task.due_date || task.dueDate
+  const isOverdue = dueDate && new Date(dueDate) < new Date() && task.status !== 'done'
+  const creatorName = task.creator_user_name || task.creatorUserName
+  const priority = PRIORITY_CONFIG[form.priority] || PRIORITY_CONFIG.medium
+
+  const statusOptions = [
+    { value: 'todo', label: t('tasks.todo') },
+    { value: 'in_progress', label: t('tasks.in_progress') },
+    { value: 'done', label: t('tasks.done') },
+  ]
+
+  const priorityOptions = [
+    { value: 'low', label: t('tasks.priority.low') },
+    { value: 'medium', label: t('tasks.priority.medium') },
+    { value: 'high', label: t('tasks.priority.high') },
+    { value: 'urgent', label: t('tasks.priority.urgent') },
+  ]
+
+  const update = (field, value) => {
+    setForm(f => ({ ...f, [field]: value }))
+    setDirty(true)
+  }
+
+  const handleSave = async () => {
+    setSaving(true)
+    try {
+      const data = {
+        title: form.title,
+        description: form.description,
+        project_id: form.project_id || null,
+        assigned_to: form.assigned_to || null,
+        priority: form.priority,
+        status: form.status,
+        start_date: form.start_date || null,
+        due_date: form.due_date || null,
+      }
+      await onSave(isCreateMode ? null : taskId, data, pendingFiles)
+      setDirty(false)
+      setPendingFiles([])
+      if (isCreateMode) onClose()
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  const handleDelete = () => {
+    setShowDeleteConfirm(true)
+  }
+
+  const confirmDelete = () => {
+    onDelete(taskId)
+    setShowDeleteConfirm(false)
+    onClose()
+  }
+
+  // ─── Attachments ──────────────────────────────
+  async function loadAttachments() {
+    if (!taskId) return
+    try {
+      const data = await api.get(`/tasks/${taskId}/attachments`)
+      setAttachments(Array.isArray(data) ? data : (data.data || []))
+    } catch {
+      setAttachments([])
+    }
+  }
+
+  const handleFileUpload = async (files) => {
+    if (!files?.length) return
+    setUploadError(null)
+    const maxBytes = maxSizeMB * 1024 * 1024
+    const tooBig = Array.from(files).find(f => f.size > maxBytes)
+    if (tooBig) {
+      setUploadError(t('tasks.fileTooLarge')
+        .replace('{name}', tooBig.name)
+        .replace('{size}', (tooBig.size / 1024 / 1024).toFixed(1))
+        .replace('{max}', maxSizeMB))
+      return
+    }
+    setUploading(true)
+    for (const file of files) {
+      const fd = new FormData()
+      fd.append('file', file)
+      try {
+        await api.upload(`/tasks/${taskId}/attachments`, fd)
+      } catch (err) {
+        console.error('Upload failed:', err)
+        setUploadError(err.message || 'Upload failed')
+      }
+    }
+    setUploading(false)
+    loadAttachments()
+  }
+
+  const handleDeleteAttachment = async (attId) => {
+    try {
+      await api.delete(`/task-attachments/${attId}`)
+      loadAttachments()
+    } catch (err) {
+      console.error('Delete attachment failed:', err)
+    }
+  }
+
+  const handleSetThumbnail = async (attachment) => {
+    try {
+      const attId = attachment._id || attachment.id || attachment.Id
+      await api.patch(`/tasks/${taskId}/thumbnail`, { attachment_id: attId })
+      const url = attachment.url || `/api/uploads/${attachment.filename}`
+      setCurrentThumbnail(url)
+    } catch (err) {
+      console.error('Set thumbnail failed:', err)
+    }
+  }
+
+  const handleRemoveThumbnail = async () => {
+    try {
+      await api.patch(`/tasks/${taskId}/thumbnail`, { attachment_id: null })
+      setCurrentThumbnail(null)
+    } catch (err) {
+      console.error('Remove thumbnail failed:', err)
+    }
+  }
+
+  // Get brand for the selected project
+  const selectedProject = projects?.find(p => String(p._id || p.id) === String(form.project_id))
+  const brandName = selectedProject ? (selectedProject.brand_name || selectedProject.brandName) : (task.brand_name || task.brandName)
+
+  const header = (
+    <div className="px-5 py-4 border-b border-border shrink-0">
+      {/* Thumbnail banner */}
+      {currentThumbnail && (
+        <div className="relative -mx-5 -mt-4 mb-3 h-32 overflow-hidden">
+          <img src={currentThumbnail} alt="" className="w-full h-full object-cover" />
+          <div className="absolute inset-0 bg-gradient-to-t from-white/80 to-transparent" />
+          <button
+            onClick={handleRemoveThumbnail}
+            className="absolute top-2 right-2 p-1 bg-black/40 hover:bg-black/60 rounded-full text-white transition-colors"
+            title={t('tasks.removeThumbnail')}
+          >
+            <X className="w-3 h-3" />
+          </button>
+        </div>
+      )}
+      <div className="flex items-start justify-between gap-3">
+        <div className="flex-1 min-w-0">
+          <input
+            type="text"
+            value={form.title}
+            onChange={e => update('title', e.target.value)}
+            className="w-full text-lg font-semibold text-text-primary bg-transparent border-0 p-0 focus:outline-none focus:ring-0"
+            placeholder={t('tasks.taskTitle')}
+          />
+          <div className="flex items-center gap-2 mt-2">
+            <span className={`inline-flex items-center gap-1 text-[11px] px-2 py-0.5 rounded-full font-medium ${priority.color === 'bg-gray-400' ? 'bg-gray-100 text-gray-600' : priority.color === 'bg-amber-400' ? 'bg-amber-100 text-amber-700' : priority.color === 'bg-orange-500' ? 'bg-orange-100 text-orange-700' : 'bg-red-100 text-red-700'}`}>
+              <div className={`w-1.5 h-1.5 rounded-full ${priority.color}`} />
+              {priorityOptions.find(p => p.value === form.priority)?.label}
+            </span>
+            <span className={`text-[11px] px-2 py-0.5 rounded-full font-medium ${form.status === 'done' ? 'bg-emerald-100 text-emerald-700' : form.status === 'in_progress' ? 'bg-blue-100 text-blue-700' : 'bg-gray-100 text-gray-600'}`}>
+              {statusOptions.find(s => s.value === form.status)?.label}
+            </span>
+            {isOverdue && !isCreateMode && (
+              <span className="text-[11px] px-2 py-0.5 rounded-full font-medium bg-red-100 text-red-600 flex items-center gap-1">
+                <AlertCircle className="w-3 h-3" />
+                {t('tasks.overdue')}
+              </span>
+            )}
+          </div>
+        </div>
+        <button
+          onClick={onClose}
+          className="p-1.5 rounded-lg hover:bg-surface-tertiary text-text-tertiary hover:text-text-primary transition-colors shrink-0"
+        >
+          <X className="w-5 h-5" />
+        </button>
+      </div>
+    </div>
+  )
+
+  return (
+    <>
+      <SlidePanel onClose={onClose} maxWidth="420px" header={header}>
+        {/* Details Section */}
+        <CollapsibleSection title={t('tasks.details')}>
+          <div className="px-5 pb-4 space-y-3">
+            {/* Description */}
+            <div>
+              <label className="block text-xs font-medium text-text-tertiary mb-1">{t('tasks.description')}</label>
+              <textarea
+                value={form.description}
+                onChange={e => update('description', e.target.value)}
+                rows={3}
+                className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary resize-none"
+                placeholder={t('posts.optionalDetails')}
+              />
+            </div>
+
+            {/* Project */}
+            <div>
+              <label className="block text-xs font-medium text-text-tertiary mb-1">{t('tasks.project')}</label>
+              <div className="flex items-center gap-2">
+                <select
+                  value={form.project_id}
+                  onChange={e => update('project_id', e.target.value)}
+                  className="flex-1 px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary"
+                >
+                  <option value="">{t('tasks.noProject')}</option>
+                  {(projects || []).map(p => (
+                    <option key={p._id || p.id} value={p._id || p.id}>{p.name || p.title}</option>
+                  ))}
+                </select>
+                {brandName && (
+                  <span className={`text-[10px] px-1.5 py-0.5 rounded shrink-0 ${getBrandColor(brandName).bg} ${getBrandColor(brandName).text}`}>
+                    {brandName}
+                  </span>
+                )}
+              </div>
+            </div>
+
+            {/* Assignee */}
+            <div>
+              <label className="block text-xs font-medium text-text-tertiary mb-1">{t('tasks.assignee')}</label>
+              <select
+                value={form.assigned_to}
+                onChange={e => update('assigned_to', e.target.value)}
+                className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary"
+              >
+                <option value="">{t('common.unassigned')}</option>
+                {(users || []).map(m => (
+                  <option key={m._id || m.team_member_id} value={m._id || m.team_member_id}>{m.name}</option>
+                ))}
+              </select>
+            </div>
+
+            {/* Priority & Status */}
+            <div className="grid grid-cols-2 gap-3">
+              <div>
+                <label className="block text-xs font-medium text-text-tertiary mb-1">{t('tasks.priority')}</label>
+                <select
+                  value={form.priority}
+                  onChange={e => update('priority', e.target.value)}
+                  className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary"
+                >
+                  {priorityOptions.map(p => (
+                    <option key={p.value} value={p.value}>{p.label}</option>
+                  ))}
+                </select>
+              </div>
+              <div>
+                <label className="block text-xs font-medium text-text-tertiary mb-1">{t('tasks.status')}</label>
+                <select
+                  value={form.status}
+                  onChange={e => update('status', e.target.value)}
+                  className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary"
+                >
+                  {statusOptions.map(s => (
+                    <option key={s.value} value={s.value}>{s.label}</option>
+                  ))}
+                </select>
+              </div>
+            </div>
+
+            {/* Start Date & Due Date */}
+            <div className="grid grid-cols-2 gap-3">
+              <div>
+                <label className="block text-xs font-medium text-text-tertiary mb-1">{t('tasks.startDate')}</label>
+                <input
+                  type="date"
+                  value={form.start_date}
+                  onChange={e => update('start_date', e.target.value)}
+                  className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary"
+                />
+              </div>
+              <div>
+                <label className="block text-xs font-medium text-text-tertiary mb-1">{t('tasks.dueDate')}</label>
+                <input
+                  type="date"
+                  value={form.due_date}
+                  onChange={e => update('due_date', e.target.value)}
+                  className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary"
+                />
+              </div>
+            </div>
+
+            {/* Created by (read-only) */}
+            {creatorName && !isCreateMode && (
+              <div>
+                <label className="block text-xs font-medium text-text-tertiary mb-1">{t('tasks.createdBy')}</label>
+                <p className="text-sm text-text-secondary">{creatorName}</p>
+              </div>
+            )}
+
+            {/* Action buttons */}
+            <div className="flex items-center gap-2 pt-2">
+              {dirty && (
+                <button
+                  onClick={handleSave}
+                  disabled={!form.title || saving}
+                  className={`flex-1 px-4 py-2 bg-brand-primary text-white rounded-lg text-sm font-medium hover:bg-brand-primary-light disabled:opacity-50 disabled:cursor-not-allowed shadow-sm ${saving ? 'btn-loading' : ''}`}
+                >
+                  {isCreateMode ? t('tasks.createTask') : t('tasks.saveChanges')}
+                </button>
+              )}
+              {onDelete && !isCreateMode && (
+                <button
+                  onClick={handleDelete}
+                  className="p-2 text-text-tertiary hover:text-red-500 hover:bg-red-50 rounded-lg transition-colors"
+                  title={t('common.delete')}
+                >
+                  <Trash2 className="w-4 h-4" />
+                </button>
+              )}
+            </div>
+          </div>
+        </CollapsibleSection>
+
+        {/* Attachments Section */}
+        <CollapsibleSection
+          title={t('tasks.attachments')}
+          badge={(attachments.length + pendingFiles.length) > 0 ? (
+            <span className="text-xs font-medium text-text-tertiary bg-surface-tertiary px-1.5 py-0.5 rounded-full">
+              {attachments.length + pendingFiles.length}
+            </span>
+          ) : null}
+        >
+          <div className="px-5 pb-4">
+            {/* Existing attachment grid (edit mode) */}
+            {attachments.length > 0 && (
+              <div className="grid grid-cols-2 gap-2 mb-3">
+                {attachments.map(att => {
+                  const isImage = att.mime_type?.startsWith('image/') || att.mimeType?.startsWith('image/')
+                  const attUrl = att.url || `/api/uploads/${att.filename}`
+                  const name = att.original_name || att.originalName || att.filename
+                  const attId = att._id || att.id || att.Id
+                  const isThumbnail = currentThumbnail && attUrl === currentThumbnail
+
+                  return (
+                    <div key={attId} className="relative group/att border border-border rounded-lg overflow-hidden bg-white">
+                      <div className="h-20 relative">
+                        {isImage ? (
+                          <a href={attUrl} target="_blank" rel="noopener noreferrer" className="block h-full">
+                            <img src={attUrl} alt={name} className="absolute inset-0 w-full h-full object-cover" />
+                          </a>
+                        ) : (
+                          <a href={attUrl} target="_blank" rel="noopener noreferrer" className="absolute inset-0 flex items-center gap-2 p-3">
+                            <FileText className="w-6 h-6 text-text-tertiary shrink-0" />
+                            <span className="text-xs text-text-secondary truncate">{name}</span>
+                          </a>
+                        )}
+                        {isThumbnail && (
+                          <div className="absolute top-1 left-1 p-0.5 bg-amber-400 rounded-full text-white">
+                            <Star className="w-2.5 h-2.5 fill-current" />
+                          </div>
+                        )}
+                        <div className="absolute top-1 right-1 flex items-center gap-0.5 opacity-0 group-hover/att:opacity-100 transition-opacity">
+                          {isImage && !isThumbnail && (
+                            <button
+                              onClick={() => handleSetThumbnail(att)}
+                              className="p-1 bg-black/50 hover:bg-amber-500 rounded-full text-white transition-colors"
+                              title={t('tasks.setAsThumbnail')}
+                            >
+                              <Star className="w-2.5 h-2.5" />
+                            </button>
+                          )}
+                          <button
+                            onClick={() => handleDeleteAttachment(attId)}
+                            className="p-1 bg-black/50 hover:bg-red-500 rounded-full text-white transition-colors"
+                            title={t('common.delete')}
+                          >
+                            <X className="w-2.5 h-2.5" />
+                          </button>
+                        </div>
+                      </div>
+                      <div className="px-2 py-1 text-[10px] text-text-tertiary truncate border-t border-border-light">
+                        {name}
+                      </div>
+                    </div>
+                  )
+                })}
+              </div>
+            )}
+
+            {/* Pending files grid (create mode) */}
+            {pendingFiles.length > 0 && (
+              <div className="grid grid-cols-2 gap-2 mb-3">
+                {pendingFiles.map((file, i) => {
+                  const isImage = file.type?.startsWith('image/')
+                  const previewUrl = isImage ? URL.createObjectURL(file) : null
+
+                  return (
+                    <div key={i} className="relative group/att border border-border rounded-lg overflow-hidden bg-white">
+                      <div className="h-20 relative">
+                        {isImage ? (
+                          <img src={previewUrl} alt={file.name} className="absolute inset-0 w-full h-full object-cover" />
+                        ) : (
+                          <div className="absolute inset-0 flex items-center gap-2 p-3">
+                            <FileText className="w-6 h-6 text-text-tertiary shrink-0" />
+                            <span className="text-xs text-text-secondary truncate">{file.name}</span>
+                          </div>
+                        )}
+                        <div className="absolute top-1 right-1 flex items-center gap-0.5 opacity-0 group-hover/att:opacity-100 transition-opacity">
+                          <button
+                            onClick={() => setPendingFiles(prev => prev.filter((_, j) => j !== i))}
+                            className="p-1 bg-black/50 hover:bg-red-500 rounded-full text-white transition-colors"
+                            title={t('common.delete')}
+                          >
+                            <X className="w-2.5 h-2.5" />
+                          </button>
+                        </div>
+                      </div>
+                      <div className="px-2 py-1 text-[10px] text-text-tertiary truncate border-t border-border-light">
+                        {file.name}
+                      </div>
+                    </div>
+                  )
+                })}
+              </div>
+            )}
+
+            {/* Upload area */}
+            <div
+              onClick={() => !uploading && fileInputRef.current?.click()}
+              className={`border-2 border-dashed rounded-lg p-4 text-center transition-colors ${
+                uploading ? 'cursor-not-allowed opacity-60 border-border' : 'cursor-pointer border-border hover:border-brand-primary/40'
+              }`}
+            >
+              <input
+                ref={fileInputRef}
+                type="file"
+                multiple
+                className="hidden"
+                onChange={e => {
+                  setUploadError(null)
+                  const files = Array.from(e.target.files || [])
+                  const maxBytes = maxSizeMB * 1024 * 1024
+                  const tooBig = files.find(f => f.size > maxBytes)
+                  if (tooBig) {
+                    setUploadError(t('tasks.fileTooLarge')
+                      .replace('{name}', tooBig.name)
+                      .replace('{size}', (tooBig.size / 1024 / 1024).toFixed(1))
+                      .replace('{max}', maxSizeMB))
+                    e.target.value = ''
+                    return
+                  }
+                  if (isCreateMode) {
+                    if (files.length) setPendingFiles(files)
+                  } else {
+                    handleFileUpload(e.target.files)
+                  }
+                  e.target.value = ''
+                }}
+              />
+              <Upload className={`w-5 h-5 text-text-tertiary mx-auto mb-1 ${uploading ? 'animate-pulse' : ''}`} />
+              <p className="text-xs text-text-secondary">
+                {uploading ? t('posts.uploading') : t('tasks.dropOrClick')}
+              </p>
+              <p className="text-[10px] text-text-tertiary mt-0.5">
+                {t('tasks.maxFileSize').replace('{size}', maxSizeMB)}
+              </p>
+            </div>
+            {uploadError && (
+              <div className="mt-2 p-2 bg-red-50 border border-red-200 rounded-lg text-xs text-red-600">
+                {uploadError}
+              </div>
+            )}
+          </div>
+        </CollapsibleSection>
+
+        {/* Discussion Section (hidden in create mode) */}
+        {!isCreateMode && (
+          <CollapsibleSection title={t('tasks.discussion')} noBorder>
+            <div className="px-5 pb-5">
+              <CommentsSection entityType="task" entityId={taskId} />
+            </div>
+          </CollapsibleSection>
+        )}
+      </SlidePanel>
+
+      {/* Delete Confirmation */}
+      <Modal
+        isOpen={showDeleteConfirm}
+        onClose={() => setShowDeleteConfirm(false)}
+        title={t('tasks.deleteTask')}
+        isConfirm
+        danger
+        confirmText={t('tasks.deleteTask')}
+        onConfirm={confirmDelete}
+      >
+        {t('tasks.deleteConfirm')}
+      </Modal>
+    </>
+  )
+}

client/src/components/TeamMemberPanel.jsx

@@ -0,0 +1,506 @@
+import { useState, useEffect, useRef } from 'react'
+import { X, Trash2, ChevronDown, Check } from 'lucide-react'
+import { useLanguage } from '../i18n/LanguageContext'
+import { api } from '../utils/api'
+import Modal from './Modal'
+import SlidePanel from './SlidePanel'
+import CollapsibleSection from './CollapsibleSection'
+import StatusBadge from './StatusBadge'
+
+const ROLES = [
+  { value: 'manager', label: 'Manager' },
+  { value: 'approver', label: 'Approver' },
+  { value: 'publisher', label: 'Publisher' },
+  { value: 'content_creator', label: 'Content Creator' },
+  { value: 'producer', label: 'Producer' },
+  { value: 'designer', label: 'Designer' },
+  { value: 'content_writer', label: 'Content Writer' },
+  { value: 'social_media_manager', label: 'Social Media Manager' },
+  { value: 'photographer', label: 'Photographer' },
+  { value: 'videographer', label: 'Videographer' },
+  { value: 'strategist', label: 'Strategist' },
+]
+
+const ALL_MODULES = ['marketing', 'projects', 'finance']
+const MODULE_LABELS = { marketing: 'Marketing', projects: 'Projects', finance: 'Finance' }
+const MODULE_COLORS = {
+  marketing: { on: 'bg-emerald-100 text-emerald-700 border-emerald-300', off: 'bg-gray-100 text-gray-400 border-gray-200' },
+  projects: { on: 'bg-blue-100 text-blue-700 border-blue-300', off: 'bg-gray-100 text-gray-400 border-gray-200' },
+  finance: { on: 'bg-amber-100 text-amber-700 border-amber-300', off: 'bg-gray-100 text-gray-400 border-gray-200' },
+}
+
+export default function TeamMemberPanel({ member, isEditingSelf, onClose, onSave, onDelete, canManageTeam, userRole, teams, brands: brandsList }) {
+  const { t, lang } = useLanguage()
+  const [form, setForm] = useState({})
+  const [dirty, setDirty] = useState(false)
+  const [saving, setSaving] = useState(false)
+  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false)
+  const [showBrandsDropdown, setShowBrandsDropdown] = useState(false)
+  const [confirmPassword, setConfirmPassword] = useState('')
+  const [passwordError, setPasswordError] = useState('')
+  const brandsDropdownRef = useRef(null)
+
+  // Workload state (loaded internally)
+  const [memberTasks, setMemberTasks] = useState([])
+  const [memberPosts, setMemberPosts] = useState([])
+  const [loadingWorkload, setLoadingWorkload] = useState(false)
+
+  const memberId = member?._id || member?.id
+  const isCreateMode = !memberId
+
+  useEffect(() => {
+    if (member) {
+      setForm({
+        name: member.name || '',
+        email: member.email || '',
+        password: '',
+        role: member.team_role || member.role || 'content_writer',
+        brands: Array.isArray(member.brands) ? member.brands : [],
+        phone: member.phone || '',
+        modules: Array.isArray(member.modules) ? member.modules : ALL_MODULES,
+        team_ids: Array.isArray(member.teams) ? member.teams.map(t => t.id) : [],
+      })
+      setDirty(isCreateMode)
+      setConfirmPassword('')
+      setPasswordError('')
+      if (!isCreateMode) loadWorkload()
+    }
+  }, [member])
+
+  const loadWorkload = async () => {
+    if (!memberId) return
+    setLoadingWorkload(true)
+    try {
+      const [tasksRes, postsRes] = await Promise.allSettled([
+        api.get(`/tasks?assignedTo=${memberId}`),
+        api.get(`/posts?assignedTo=${memberId}`),
+      ])
+      setMemberTasks(tasksRes.status === 'fulfilled' ? (tasksRes.value.data || tasksRes.value || []) : [])
+      setMemberPosts(postsRes.status === 'fulfilled' ? (postsRes.value.data || postsRes.value || []) : [])
+    } catch {
+      setMemberTasks([])
+      setMemberPosts([])
+    } finally {
+      setLoadingWorkload(false)
+    }
+  }
+
+  if (!member) return null
+
+  const update = (field, value) => {
+    setForm(f => ({ ...f, [field]: value }))
+    setDirty(true)
+  }
+
+  // Close brands dropdown on outside click
+  useEffect(() => {
+    const handleClickOutside = (e) => {
+      if (brandsDropdownRef.current && !brandsDropdownRef.current.contains(e.target)) {
+        setShowBrandsDropdown(false)
+      }
+    }
+    if (showBrandsDropdown) document.addEventListener('mousedown', handleClickOutside)
+    return () => document.removeEventListener('mousedown', handleClickOutside)
+  }, [showBrandsDropdown])
+
+  const toggleBrand = (brandName) => {
+    const current = form.brands || []
+    update('brands', current.includes(brandName)
+      ? current.filter(b => b !== brandName)
+      : [...current, brandName]
+    )
+  }
+
+  const handleSave = async () => {
+    setPasswordError('')
+    if (isCreateMode && form.password && form.password !== confirmPassword) {
+      setPasswordError('Passwords do not match')
+      return
+    }
+    setSaving(true)
+    try {
+      await onSave(isCreateMode ? null : memberId, {
+        name: form.name,
+        email: form.email,
+        password: form.password,
+        role: form.role,
+        brands: form.brands || [],
+        phone: form.phone,
+        modules: form.modules,
+        team_ids: form.team_ids,
+      }, isEditingSelf)
+      setDirty(false)
+      if (isCreateMode) onClose()
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  const confirmDelete = async () => {
+    setShowDeleteConfirm(false)
+    await onDelete(memberId)
+    onClose()
+  }
+
+  const initials = member.name?.split(' ').map(w => w[0]).join('').slice(0, 2).toUpperCase() || '?'
+  const roleName = (form.role || '').replace(/_/g, ' ')
+  const todoCount = memberTasks.filter(t => t.status === 'todo').length
+  const inProgressCount = memberTasks.filter(t => t.status === 'in_progress').length
+  const doneCount = memberTasks.filter(t => t.status === 'done').length
+
+  const header = (
+    <div className="px-5 py-4 border-b border-border shrink-0">
+      <div className="flex items-start justify-between gap-3">
+        <div className="flex items-center gap-3 min-w-0">
+          <div className="w-10 h-10 rounded-full bg-gradient-to-br from-indigo-400 to-purple-500 flex items-center justify-center text-white text-sm font-bold shrink-0">
+            {initials}
+          </div>
+          <div className="flex-1 min-w-0">
+            <input
+              type="text"
+              value={form.name}
+              onChange={e => update('name', e.target.value)}
+              className="w-full text-lg font-semibold text-text-primary bg-transparent border-0 p-0 focus:outline-none focus:ring-0"
+              placeholder={t('team.fullName')}
+            />
+            <span className="text-[11px] px-2 py-0.5 rounded-full font-medium bg-brand-primary/10 text-brand-primary capitalize">
+              {roleName}
+            </span>
+          </div>
+        </div>
+        <button
+          onClick={onClose}
+          className="p-1.5 rounded-lg hover:bg-surface-tertiary text-text-tertiary hover:text-text-primary transition-colors shrink-0"
+        >
+          <X className="w-5 h-5" />
+        </button>
+      </div>
+    </div>
+  )
+
+  return (
+    <>
+      <SlidePanel onClose={onClose} maxWidth="420px" header={header}>
+        {/* Details Section */}
+        <CollapsibleSection title={t('team.details')}>
+          <div className="px-5 pb-4 space-y-3">
+            {!isEditingSelf && (
+              <>
+                <div>
+                  <label className="block text-xs font-medium text-text-tertiary mb-1">{t('team.email')} *</label>
+                  <input
+                    type="email"
+                    value={form.email}
+                    onChange={e => update('email', e.target.value)}
+                    className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary"
+                    placeholder="email@example.com"
+                    disabled={!isCreateMode}
+                  />
+                </div>
+
+                {isCreateMode && (
+                  <div>
+                    <label className="block text-xs font-medium text-text-tertiary mb-1">{t('team.password')}</label>
+                    <input
+                      type="password"
+                      value={form.password}
+                      onChange={e => update('password', e.target.value)}
+                      className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary"
+                      placeholder="••••••••"
+                    />
+                    {!form.password && (
+                      <p className="text-xs text-text-tertiary mt-1">{t('team.defaultPassword')}</p>
+                    )}
+                  </div>
+                )}
+
+                {isCreateMode && form.password && (
+                  <div>
+                    <label className="block text-xs font-medium text-text-tertiary mb-1">Confirm Password</label>
+                    <input
+                      type="password"
+                      value={confirmPassword}
+                      onChange={e => { setConfirmPassword(e.target.value); setPasswordError('') }}
+                      className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary"
+                      placeholder="••••••••"
+                    />
+                    {passwordError && (
+                      <p className="text-xs text-red-500 mt-1">{passwordError}</p>
+                    )}
+                  </div>
+                )}
+              </>
+            )}
+
+            <div className="grid grid-cols-2 gap-3">
+              <div>
+                <label className="block text-xs font-medium text-text-tertiary mb-1">{t('team.teamRole')}</label>
+                {isEditingSelf ? (
+                  <input
+                    type="text"
+                    value={ROLES.find(r => r.value === form.role)?.label || form.role || '—'}
+                    disabled
+                    className="w-full px-3 py-2 text-sm border border-border rounded-lg bg-surface-tertiary text-text-tertiary cursor-not-allowed"
+                  />
+                ) : userRole === 'manager' && isCreateMode ? (
+                  <>
+                    <input
+                      type="text"
+                      value="Contributor"
+                      disabled
+                      className="w-full px-3 py-2 text-sm border border-border rounded-lg bg-surface-tertiary text-text-tertiary cursor-not-allowed"
+                    />
+                    <p className="text-xs text-text-tertiary mt-1">{t('team.fixedRole')}</p>
+                  </>
+                ) : (
+                  <select
+                    value={form.role}
+                    onChange={e => update('role', e.target.value)}
+                    className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary"
+                  >
+                    {ROLES.map(r => <option key={r.value} value={r.value}>{r.label}</option>)}
+                  </select>
+                )}
+              </div>
+              <div>
+                <label className="block text-xs font-medium text-text-tertiary mb-1">{t('team.phone')}</label>
+                <input
+                  type="text"
+                  value={form.phone}
+                  onChange={e => update('phone', e.target.value)}
+                  className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary"
+                  placeholder="+966 ..."
+                />
+              </div>
+            </div>
+
+            <div ref={brandsDropdownRef} className="relative">
+              <label className="block text-xs font-medium text-text-tertiary mb-1">{t('team.brands')}</label>
+              {isEditingSelf ? (
+                <div className="w-full px-3 py-2 text-sm border border-border rounded-lg bg-surface-tertiary text-text-tertiary cursor-not-allowed">
+                  {(form.brands || []).length === 0 ? '—' : (form.brands || []).join(', ')}
+                </div>
+              ) : <>
+              <button
+                type="button"
+                onClick={() => setShowBrandsDropdown(prev => !prev)}
+                className="w-full flex items-center justify-between px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary bg-white text-left"
+              >
+                <span className={`flex-1 truncate ${(form.brands || []).length === 0 ? 'text-text-tertiary' : 'text-text-primary'}`}>
+                  {(form.brands || []).length === 0
+                    ? t('team.selectBrands')
+                    : (form.brands || []).join(', ')
+                  }
+                </span>
+                <ChevronDown className={`w-4 h-4 text-text-tertiary shrink-0 transition-transform ${showBrandsDropdown ? 'rotate-180' : ''}`} />
+              </button>
+
+              {/* Selected brand chips */}
+              {(form.brands || []).length > 0 && (
+                <div className="flex flex-wrap gap-1 mt-1.5">
+                  {(form.brands || []).map(b => (
+                    <span
+                      key={b}
+                      className="inline-flex items-center gap-1 text-[10px] px-2 py-0.5 rounded-full bg-brand-primary/10 text-brand-primary font-medium"
+                    >
+                      {b}
+                      <button type="button" onClick={() => toggleBrand(b)} className="hover:text-red-500">
+                        <X className="w-2.5 h-2.5" />
+                      </button>
+                    </span>
+                  ))}
+                </div>
+              )}
+
+              {/* Dropdown */}
+              {showBrandsDropdown && (
+                <div className="absolute z-20 mt-1 w-full bg-white border border-border rounded-lg shadow-lg max-h-48 overflow-y-auto">
+                  {brandsList && brandsList.length > 0 ? (
+                    brandsList.map(brand => {
+                      const name = lang === 'ar' && brand.name_ar ? brand.name_ar : brand.name
+                      const checked = (form.brands || []).includes(name)
+                      return (
+                        <button
+                          type="button"
+                          key={brand.id || brand._id}
+                          onClick={() => toggleBrand(name)}
+                          className={`w-full flex items-center gap-2.5 px-3 py-2 cursor-pointer hover:bg-surface-secondary transition-colors text-left ${checked ? 'bg-brand-primary/5' : ''}`}
+                        >
+                          <div className={`w-4 h-4 rounded border flex items-center justify-center shrink-0 transition-colors ${
+                            checked ? 'bg-brand-primary border-brand-primary' : 'border-border'
+                          }`}>
+                            {checked && <Check className="w-3 h-3 text-white" />}
+                          </div>
+                          <span className="text-sm text-text-primary">{brand.icon ? `${brand.icon} ` : ''}{name}</span>
+                        </button>
+                      )
+                    })
+                  ) : (
+                    <p className="px-3 py-3 text-xs text-text-tertiary text-center">{t('brands.noBrands')}</p>
+                  )}
+                </div>
+              )}
+              </>}
+            </div>
+
+            {/* Modules toggle */}
+            {!isEditingSelf && canManageTeam && (
+              <div>
+                <label className="block text-xs font-medium text-text-tertiary mb-1">{t('team.modules')}</label>
+                <div className="flex flex-wrap gap-2">
+                  {ALL_MODULES.map(mod => {
+                    const active = (form.modules || []).includes(mod)
+                    const colors = MODULE_COLORS[mod]
+                    return (
+                      <button
+                        key={mod}
+                        type="button"
+                        onClick={() => {
+                          update('modules', active
+                            ? form.modules.filter(m => m !== mod)
+                            : [...(form.modules || []), mod]
+                          )
+                        }}
+                        className={`text-xs px-3 py-1.5 rounded-full border font-medium transition-colors ${active ? colors.on : colors.off}`}
+                      >
+                        {MODULE_LABELS[mod]}
+                      </button>
+                    )
+                  })}
+                </div>
+              </div>
+            )}
+
+            {/* Teams multi-select */}
+            {teams && teams.length > 0 && (
+              <div>
+                <label className="block text-xs font-medium text-text-tertiary mb-1">{t('teams.teams')}</label>
+                <div className="flex flex-wrap gap-2">
+                  {teams.map(team => {
+                    const active = (form.team_ids || []).includes(team.id || team._id)
+                    const teamId = team.id || team._id
+                    return (
+                      <button
+                        key={teamId}
+                        type="button"
+                        onClick={() => {
+                          update('team_ids', active
+                            ? form.team_ids.filter(id => id !== teamId)
+                            : [...(form.team_ids || []), teamId]
+                          )
+                        }}
+                        className={`text-xs px-3 py-1.5 rounded-full border font-medium transition-colors ${
+                          active
+                            ? 'bg-blue-100 text-blue-700 border-blue-300'
+                            : 'bg-gray-100 text-gray-400 border-gray-200'
+                        }`}
+                      >
+                        {team.name}
+                      </button>
+                    )
+                  })}
+                </div>
+              </div>
+            )}
+
+            <div className="flex items-center gap-2 pt-2">
+              {dirty && (
+                <button
+                  onClick={handleSave}
+                  disabled={!form.name || (!isEditingSelf && isCreateMode && !form.email) || saving}
+                  className={`flex-1 px-4 py-2 bg-brand-primary text-white rounded-lg text-sm font-medium hover:bg-brand-primary-light disabled:opacity-50 disabled:cursor-not-allowed shadow-sm ${saving ? 'btn-loading' : ''}`}
+                >
+                  {isEditingSelf ? t('team.saveProfile') : (isCreateMode ? t('team.addMember') : t('team.saveChanges'))}
+                </button>
+              )}
+              {!isCreateMode && !isEditingSelf && canManageTeam && onDelete && (
+                <button
+                  onClick={() => setShowDeleteConfirm(true)}
+                  className="p-2 text-text-tertiary hover:text-red-500 hover:bg-red-50 rounded-lg transition-colors"
+                  title={t('team.remove')}
+                >
+                  <Trash2 className="w-4 h-4" />
+                </button>
+              )}
+            </div>
+          </div>
+        </CollapsibleSection>
+
+        {/* Workload Section (hidden in create mode) */}
+        {!isCreateMode && (
+          <CollapsibleSection title={t('team.workload')} noBorder>
+            <div className="px-5 pb-4 space-y-3">
+              {/* Stats */}
+              <div className="grid grid-cols-4 gap-2">
+                <div className="bg-surface-secondary rounded-lg p-2 text-center">
+                  <p className="text-lg font-bold text-text-primary">{memberTasks.length}</p>
+                  <p className="text-[10px] text-text-tertiary">{t('team.totalTasks')}</p>
+                </div>
+                <div className="bg-surface-secondary rounded-lg p-2 text-center">
+                  <p className="text-lg font-bold text-amber-500">{todoCount}</p>
+                  <p className="text-[10px] text-text-tertiary">{t('team.toDo')}</p>
+                </div>
+                <div className="bg-surface-secondary rounded-lg p-2 text-center">
+                  <p className="text-lg font-bold text-blue-500">{inProgressCount}</p>
+                  <p className="text-[10px] text-text-tertiary">{t('team.inProgress')}</p>
+                </div>
+                <div className="bg-surface-secondary rounded-lg p-2 text-center">
+                  <p className="text-lg font-bold text-emerald-500">{doneCount}</p>
+                  <p className="text-[10px] text-text-tertiary">{t('tasks.done')}</p>
+                </div>
+              </div>
+
+              {/* Recent tasks */}
+              {memberTasks.length > 0 && (
+                <div>
+                  <h4 className="text-xs font-medium text-text-tertiary mb-2">{t('team.recentTasks')}</h4>
+                  <div className="space-y-1 max-h-40 overflow-y-auto">
+                    {memberTasks.slice(0, 8).map(task => (
+                      <div key={task._id} className="flex items-center gap-2 px-2 py-1.5 rounded-lg hover:bg-surface-secondary">
+                        <span className={`text-xs flex-1 min-w-0 truncate ${task.status === 'done' ? 'text-text-tertiary line-through' : 'text-text-primary'}`}>
+                          {task.title}
+                        </span>
+                        <StatusBadge status={task.status} size="xs" />
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              )}
+
+              {/* Recent posts */}
+              {memberPosts.length > 0 && (
+                <div>
+                  <h4 className="text-xs font-medium text-text-tertiary mb-2">{t('team.recentPosts')}</h4>
+                  <div className="space-y-1 max-h-40 overflow-y-auto">
+                    {memberPosts.slice(0, 8).map(post => (
+                      <div key={post._id} className="flex items-center gap-2 px-2 py-1.5 rounded-lg hover:bg-surface-secondary">
+                        <span className="text-xs text-text-primary flex-1 min-w-0 truncate">{post.title}</span>
+                        <StatusBadge status={post.status} size="xs" />
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              )}
+
+              {loadingWorkload && (
+                <p className="text-xs text-text-tertiary text-center py-2">{t('common.loading')}</p>
+              )}
+            </div>
+          </CollapsibleSection>
+        )}
+      </SlidePanel>
+
+      <Modal
+        isOpen={showDeleteConfirm}
+        onClose={() => setShowDeleteConfirm(false)}
+        title={t('team.removeMember')}
+        isConfirm
+        danger
+        confirmText={t('team.remove')}
+        onConfirm={confirmDelete}
+      >
+        {t('team.removeConfirm', { name: member?.name })}
+      </Modal>
+    </>
+  )
+}

client/src/components/TeamPanel.jsx

@@ -0,0 +1,199 @@
+import { useState, useEffect } from 'react'
+import { X, Trash2, Search } from 'lucide-react'
+import { useLanguage } from '../i18n/LanguageContext'
+import { getInitials } from '../utils/api'
+import Modal from './Modal'
+import SlidePanel from './SlidePanel'
+import CollapsibleSection from './CollapsibleSection'
+
+export default function TeamPanel({ team, onClose, onSave, onDelete, teamMembers }) {
+  const { t } = useLanguage()
+  const [form, setForm] = useState({ name: '', description: '', member_ids: [] })
+  const [dirty, setDirty] = useState(false)
+  const [saving, setSaving] = useState(false)
+  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false)
+  const [memberSearch, setMemberSearch] = useState('')
+
+  const teamId = team?.id || team?._id
+  const isCreateMode = !teamId
+
+  useEffect(() => {
+    if (team) {
+      setForm({
+        name: team.name || '',
+        description: team.description || '',
+        member_ids: team.member_ids || [],
+      })
+      setDirty(isCreateMode)
+    }
+  }, [team])
+
+  if (!team) return null
+
+  const update = (field, value) => {
+    setForm(f => ({ ...f, [field]: value }))
+    setDirty(true)
+  }
+
+  const toggleMember = (userId) => {
+    const ids = form.member_ids || []
+    update('member_ids', ids.includes(userId)
+      ? ids.filter(id => id !== userId)
+      : [...ids, userId]
+    )
+  }
+
+  const handleSave = async () => {
+    setSaving(true)
+    try {
+      await onSave(isCreateMode ? null : teamId, {
+        name: form.name,
+        description: form.description,
+        member_ids: form.member_ids,
+      })
+      setDirty(false)
+      if (isCreateMode) onClose()
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  const confirmDelete = async () => {
+    setShowDeleteConfirm(false)
+    await onDelete(teamId)
+    onClose()
+  }
+
+  const filteredMembers = (teamMembers || []).filter(m =>
+    !memberSearch || m.name?.toLowerCase().includes(memberSearch.toLowerCase())
+  )
+
+  const header = (
+    <div className="px-5 py-4 border-b border-border shrink-0">
+      <div className="flex items-start justify-between gap-3">
+        <div className="flex-1 min-w-0">
+          <input
+            type="text"
+            value={form.name}
+            onChange={e => update('name', e.target.value)}
+            className="w-full text-lg font-semibold text-text-primary bg-transparent border-0 p-0 focus:outline-none focus:ring-0"
+            placeholder={t('teams.name')}
+          />
+          <span className="text-[11px] px-2 py-0.5 rounded-full font-medium bg-blue-100 text-blue-700">
+            {(form.member_ids || []).length} {t('teams.members')}
+          </span>
+        </div>
+        <button
+          onClick={onClose}
+          className="p-1.5 rounded-lg hover:bg-surface-tertiary text-text-tertiary hover:text-text-primary transition-colors shrink-0"
+        >
+          <X className="w-5 h-5" />
+        </button>
+      </div>
+    </div>
+  )
+
+  return (
+    <>
+      <SlidePanel onClose={onClose} maxWidth="420px" header={header}>
+        <CollapsibleSection title={t('teams.details')}>
+          <div className="px-5 pb-4 space-y-3">
+            <div>
+              <label className="block text-xs font-medium text-text-tertiary mb-1">{t('teams.name')}</label>
+              <input
+                type="text"
+                value={form.name}
+                onChange={e => update('name', e.target.value)}
+                className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary"
+                placeholder={t('teams.name')}
+              />
+            </div>
+            <div>
+              <label className="block text-xs font-medium text-text-tertiary mb-1">{t('teams.description')}</label>
+              <textarea
+                value={form.description}
+                onChange={e => update('description', e.target.value)}
+                rows={3}
+                className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary resize-none"
+              />
+            </div>
+
+            <div className="flex items-center gap-2 pt-2">
+              {dirty && (
+                <button
+                  onClick={handleSave}
+                  disabled={!form.name || saving}
+                  className={`flex-1 px-4 py-2 bg-brand-primary text-white rounded-lg text-sm font-medium hover:bg-brand-primary-light disabled:opacity-50 disabled:cursor-not-allowed shadow-sm ${saving ? 'btn-loading' : ''}`}
+                >
+                  {isCreateMode ? t('teams.createTeam') : t('common.save')}
+                </button>
+              )}
+              {!isCreateMode && onDelete && (
+                <button
+                  onClick={() => setShowDeleteConfirm(true)}
+                  className="p-2 text-text-tertiary hover:text-red-500 hover:bg-red-50 rounded-lg transition-colors"
+                  title={t('teams.deleteTeam')}
+                >
+                  <Trash2 className="w-4 h-4" />
+                </button>
+              )}
+            </div>
+          </div>
+        </CollapsibleSection>
+
+        <CollapsibleSection title={t('teams.members')} noBorder>
+          <div className="px-5 pb-4">
+            <div className="relative mb-3">
+              <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-text-tertiary" />
+              <input
+                type="text"
+                value={memberSearch}
+                onChange={e => setMemberSearch(e.target.value)}
+                placeholder={t('teams.selectMembers')}
+                className="w-full pl-9 pr-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary"
+              />
+            </div>
+            <div className="space-y-1 max-h-80 overflow-y-auto">
+              {filteredMembers.map(m => {
+                const uid = m.id || m._id
+                const checked = (form.member_ids || []).includes(uid)
+                return (
+                  <label
+                    key={uid}
+                    className={`flex items-center gap-3 p-2 rounded-lg cursor-pointer hover:bg-surface-secondary ${checked ? 'bg-blue-50' : ''}`}
+                  >
+                    <input
+                      type="checkbox"
+                      checked={checked}
+                      onChange={() => toggleMember(uid)}
+                      className="rounded border-border text-brand-primary focus:ring-brand-primary"
+                    />
+                    <div className="w-7 h-7 rounded-full bg-gradient-to-br from-indigo-400 to-purple-500 flex items-center justify-center text-white text-[10px] font-bold shrink-0">
+                      {getInitials(m.name)}
+                    </div>
+                    <span className="text-sm font-medium text-text-primary">{m.name}</span>
+                  </label>
+                )
+              })}
+              {filteredMembers.length === 0 && (
+                <p className="text-xs text-text-tertiary text-center py-4">{t('common.noResults')}</p>
+              )}
+            </div>
+          </div>
+        </CollapsibleSection>
+      </SlidePanel>
+
+      <Modal
+        isOpen={showDeleteConfirm}
+        onClose={() => setShowDeleteConfirm(false)}
+        title={t('teams.deleteTeam')}
+        isConfirm
+        danger
+        confirmText={t('teams.deleteTeam')}
+        onConfirm={confirmDelete}
+      >
+        {t('teams.deleteConfirm')}
+      </Modal>
+    </>
+  )
+}

client/src/components/Toast.jsx

@@ -0,0 +1,50 @@
+import { useEffect } from 'react'
+import { X, CheckCircle, AlertCircle, Info, AlertTriangle } from 'lucide-react'
+
+const TOAST_ICONS = {
+  success: CheckCircle,
+  error: AlertCircle,
+  info: Info,
+  warning: AlertTriangle,
+}
+
+const TOAST_COLORS = {
+  success: 'bg-emerald-50 border-emerald-200 text-emerald-800',
+  error: 'bg-red-50 border-red-200 text-red-800',
+  info: 'bg-blue-50 border-blue-200 text-blue-800',
+  warning: 'bg-amber-50 border-amber-200 text-amber-800',
+}
+
+const ICON_COLORS = {
+  success: 'text-emerald-500',
+  error: 'text-red-500',
+  info: 'text-blue-500',
+  warning: 'text-amber-500',
+}
+
+export default function Toast({ message, type = 'info', onClose, duration = 4000, exiting = false }) {
+  const Icon = TOAST_ICONS[type]
+  const colorClass = TOAST_COLORS[type]
+  const iconColor = ICON_COLORS[type]
+
+  useEffect(() => {
+    if (duration > 0) {
+      const timer = setTimeout(onClose, duration)
+      return () => clearTimeout(timer)
+    }
+  }, [duration, onClose])
+
+  return (
+    <div className={`flex items-start gap-3 p-4 rounded-xl border shadow-lg ${colorClass} ${exiting ? 'animate-slide-out' : 'animate-slide-in'} min-w-[300px] max-w-md`}>
+      <Icon className={`w-5 h-5 shrink-0 mt-0.5 ${iconColor}`} />
+      <p className="flex-1 text-sm font-medium leading-snug">{message}</p>
+      <button
+        onClick={onClose}
+        className="p-0.5 hover:bg-black/5 rounded transition-colors shrink-0"
+        aria-label="Close"
+      >
+        <X className="w-4 h-4" />
+      </button>
+    </div>
+  )
+}

client/src/components/ToastContainer.jsx

@@ -0,0 +1,56 @@
+import { createContext, useContext, useState, useCallback } from 'react'
+import Toast from './Toast'
+
+const ToastContext = createContext()
+
+export function useToast() {
+  const context = useContext(ToastContext)
+  if (!context) {
+    throw new Error('useToast must be used within ToastProvider')
+  }
+  return context
+}
+
+export function ToastProvider({ children }) {
+  const [toasts, setToasts] = useState([])
+
+  const addToast = useCallback((message, type = 'info', duration = 4000) => {
+    const id = Date.now() + Math.random()
+    setToasts(prev => [...prev, { id, message, type, duration }])
+  }, [])
+
+  const removeToast = useCallback((id) => {
+    setToasts(prev => prev.map(t => t.id === id ? { ...t, exiting: true } : t))
+    setTimeout(() => {
+      setToasts(prev => prev.filter(t => t.id !== id))
+    }, 300)
+  }, [])
+
+  const toast = {
+    success: (message, duration) => addToast(message, 'success', duration),
+    error: (message, duration) => addToast(message, 'error', duration),
+    info: (message, duration) => addToast(message, 'info', duration),
+    warning: (message, duration) => addToast(message, 'warning', duration),
+  }
+
+  return (
+    <ToastContext.Provider value={toast}>
+      {children}
+      {/* Toast container - fixed position */}
+      <div className="fixed top-4 right-4 z-50 flex flex-col gap-2 pointer-events-none">
+        <div className="flex flex-col gap-2 pointer-events-auto">
+          {toasts.map(t => (
+            <Toast
+              key={t.id}
+              message={t.message}
+              type={t.type}
+              duration={t.duration}
+              exiting={t.exiting}
+              onClose={() => removeToast(t.id)}
+            />
+          ))}
+        </div>
+      </div>
+    </ToastContext.Provider>
+  )
+}

client/src/components/TrackDetailPanel.jsx

@@ -0,0 +1,307 @@
+import { useState, useEffect } from 'react'
+import { X, Trash2 } from 'lucide-react'
+import { useLanguage } from '../i18n/LanguageContext'
+import { PLATFORMS } from '../utils/api'
+import Modal from './Modal'
+import SlidePanel from './SlidePanel'
+import CollapsibleSection from './CollapsibleSection'
+import BudgetBar from './BudgetBar'
+
+const TRACK_TYPES = {
+  organic_social: { label: 'Organic Social' },
+  paid_social: { label: 'Paid Social' },
+  paid_search: { label: 'Paid Search (PPC)' },
+  seo_content: { label: 'SEO / Content' },
+  production: { label: 'Production' },
+}
+
+const TRACK_STATUSES = ['planned', 'active', 'paused', 'completed']
+
+export default function TrackDetailPanel({ track, campaignId, onClose, onSave, onDelete, scrollToMetrics }) {
+  const { t, currencySymbol } = useLanguage()
+  const [form, setForm] = useState({})
+  const [dirty, setDirty] = useState(false)
+  const [saving, setSaving] = useState(false)
+  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false)
+
+  const trackId = track?._id || track?.id
+  const isCreateMode = !trackId
+
+  useEffect(() => {
+    if (track) {
+      setForm({
+        name: track.name || '',
+        type: track.type || 'organic_social',
+        platform: track.platform || '',
+        budget_allocated: track.budget_allocated || '',
+        status: track.status || 'planned',
+        notes: track.notes || '',
+        budget_spent: track.budget_spent || '',
+        revenue: track.revenue || '',
+        impressions: track.impressions || '',
+        clicks: track.clicks || '',
+        conversions: track.conversions || '',
+      })
+      setDirty(isCreateMode)
+    }
+  }, [track])
+
+  if (!track) return null
+
+  const update = (field, value) => {
+    setForm(f => ({ ...f, [field]: value }))
+    setDirty(true)
+  }
+
+  const handleSave = async () => {
+    setSaving(true)
+    try {
+      const data = {
+        name: form.name,
+        type: form.type,
+        platform: form.platform || null,
+        budget_allocated: form.budget_allocated ? Number(form.budget_allocated) : 0,
+        status: form.status,
+        notes: form.notes,
+        budget_spent: form.budget_spent ? Number(form.budget_spent) : 0,
+        revenue: form.revenue ? Number(form.revenue) : 0,
+        impressions: form.impressions ? Number(form.impressions) : 0,
+        clicks: form.clicks ? Number(form.clicks) : 0,
+        conversions: form.conversions ? Number(form.conversions) : 0,
+      }
+      await onSave(isCreateMode ? null : trackId, data)
+      setDirty(false)
+      if (isCreateMode) onClose()
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  const confirmDelete = async () => {
+    setShowDeleteConfirm(false)
+    await onDelete(trackId)
+    onClose()
+  }
+
+  const typeInfo = TRACK_TYPES[form.type] || TRACK_TYPES.organic_social
+
+  const header = (
+    <div className="px-5 py-4 border-b border-border shrink-0">
+      <div className="flex items-start justify-between gap-3">
+        <div className="flex-1 min-w-0">
+          <input
+            type="text"
+            value={form.name}
+            onChange={e => update('name', e.target.value)}
+            className="w-full text-lg font-semibold text-text-primary bg-transparent border-0 p-0 focus:outline-none focus:ring-0"
+            placeholder={t('tracks.trackName')}
+          />
+          <div className="flex items-center gap-2 mt-2">
+            <span className="text-[10px] px-1.5 py-0.5 rounded bg-surface-tertiary text-text-tertiary">
+              {typeInfo.label}
+            </span>
+            <span className={`text-[11px] px-2 py-0.5 rounded-full font-medium ${
+              form.status === 'active' ? 'bg-emerald-100 text-emerald-700' :
+              form.status === 'paused' ? 'bg-amber-100 text-amber-700' :
+              form.status === 'completed' ? 'bg-blue-100 text-blue-700' :
+              'bg-gray-100 text-gray-600'
+            }`}>
+              {form.status?.charAt(0).toUpperCase() + form.status?.slice(1)}
+            </span>
+          </div>
+        </div>
+        <button
+          onClick={onClose}
+          className="p-1.5 rounded-lg hover:bg-surface-tertiary text-text-tertiary hover:text-text-primary transition-colors shrink-0"
+        >
+          <X className="w-5 h-5" />
+        </button>
+      </div>
+    </div>
+  )
+
+  return (
+    <>
+      <SlidePanel onClose={onClose} maxWidth="420px" header={header}>
+        {/* Details Section */}
+        <CollapsibleSection title={t('tracks.details')}>
+          <div className="px-5 pb-4 space-y-3">
+            <div className="grid grid-cols-2 gap-3">
+              <div>
+                <label className="block text-xs font-medium text-text-tertiary mb-1">{t('tracks.type')}</label>
+                <select
+                  value={form.type}
+                  onChange={e => update('type', e.target.value)}
+                  className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none"
+                >
+                  {Object.entries(TRACK_TYPES).map(([k, v]) => (
+                    <option key={k} value={k}>{v.label}</option>
+                  ))}
+                </select>
+              </div>
+              <div>
+                <label className="block text-xs font-medium text-text-tertiary mb-1">{t('tracks.platform')}</label>
+                <select
+                  value={form.platform}
+                  onChange={e => update('platform', e.target.value)}
+                  className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none"
+                >
+                  <option value="">All / Multiple</option>
+                  {Object.entries(PLATFORMS).map(([k, v]) => (
+                    <option key={k} value={k}>{v.label}</option>
+                  ))}
+                  <option value="google_ads">Google Ads</option>
+                </select>
+              </div>
+            </div>
+
+            <div className="grid grid-cols-2 gap-3">
+              <div>
+                <label className="block text-xs font-medium text-text-tertiary mb-1">{t('tracks.budgetAllocated')} ({currencySymbol})</label>
+                <input
+                  type="number"
+                  value={form.budget_allocated}
+                  onChange={e => update('budget_allocated', e.target.value)}
+                  className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none"
+                  placeholder="0 for free/organic"
+                />
+              </div>
+              <div>
+                <label className="block text-xs font-medium text-text-tertiary mb-1">{t('tracks.status')}</label>
+                <select
+                  value={form.status}
+                  onChange={e => update('status', e.target.value)}
+                  className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none"
+                >
+                  {TRACK_STATUSES.map(s => (
+                    <option key={s} value={s}>{s.charAt(0).toUpperCase() + s.slice(1)}</option>
+                  ))}
+                </select>
+              </div>
+            </div>
+
+            <div>
+              <label className="block text-xs font-medium text-text-tertiary mb-1">{t('tracks.notes')}</label>
+              <textarea
+                value={form.notes}
+                onChange={e => update('notes', e.target.value)}
+                rows={2}
+                className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none resize-none"
+                placeholder="Keywords, targeting details..."
+              />
+            </div>
+
+            <div className="flex items-center gap-2 pt-2">
+              {dirty && (
+                <button
+                  onClick={handleSave}
+                  disabled={saving}
+                  className={`flex-1 px-4 py-2 bg-brand-primary text-white rounded-lg text-sm font-medium hover:bg-brand-primary-light disabled:opacity-50 disabled:cursor-not-allowed shadow-sm ${saving ? 'btn-loading' : ''}`}
+                >
+                  {isCreateMode ? t('tracks.addTrack') : t('tasks.saveChanges')}
+                </button>
+              )}
+              {onDelete && !isCreateMode && (
+                <button
+                  onClick={() => setShowDeleteConfirm(true)}
+                  className="p-2 text-text-tertiary hover:text-red-500 hover:bg-red-50 rounded-lg transition-colors"
+                  title={t('common.delete')}
+                >
+                  <Trash2 className="w-4 h-4" />
+                </button>
+              )}
+            </div>
+          </div>
+        </CollapsibleSection>
+
+        {/* Metrics Section (hidden in create mode) */}
+        {!isCreateMode && (
+          <CollapsibleSection title={t('tracks.metrics')} defaultOpen={!!scrollToMetrics} noBorder>
+            <div className="px-5 pb-4 space-y-3">
+              {Number(form.budget_allocated) > 0 && (
+                <div className="p-3 bg-surface-secondary rounded-lg">
+                  <BudgetBar budget={Number(form.budget_allocated)} spent={Number(form.budget_spent) || 0} height="h-2" />
+                  <div className="flex items-center gap-2 mt-2">
+                    {Number(form.clicks) > 0 && Number(form.budget_spent) > 0 && (
+                      <span className="text-[10px] text-text-tertiary">
+                        CPC: {(Number(form.budget_spent) / Number(form.clicks)).toFixed(2)} {currencySymbol}
+                      </span>
+                    )}
+                    {Number(form.impressions) > 0 && Number(form.clicks) > 0 && (
+                      <span className="text-[10px] text-text-tertiary">
+                        CTR: {(Number(form.clicks) / Number(form.impressions) * 100).toFixed(2)}%
+                      </span>
+                    )}
+                  </div>
+                </div>
+              )}
+
+              <div className="grid grid-cols-2 gap-3">
+                <div>
+                  <label className="block text-xs font-medium text-text-tertiary mb-1">{t('tracks.budgetSpent')} ({currencySymbol})</label>
+                  <input
+                    type="number"
+                    value={form.budget_spent}
+                    onChange={e => update('budget_spent', e.target.value)}
+                    className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none"
+                  />
+                </div>
+                <div>
+                  <label className="block text-xs font-medium text-text-tertiary mb-1">{t('tracks.revenue')} ({currencySymbol})</label>
+                  <input
+                    type="number"
+                    value={form.revenue}
+                    onChange={e => update('revenue', e.target.value)}
+                    className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none"
+                  />
+                </div>
+              </div>
+
+              <div className="grid grid-cols-3 gap-3">
+                <div>
+                  <label className="block text-xs font-medium text-text-tertiary mb-1">{t('campaigns.impressions')}</label>
+                  <input
+                    type="number"
+                    value={form.impressions}
+                    onChange={e => update('impressions', e.target.value)}
+                    className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none"
+                  />
+                </div>
+                <div>
+                  <label className="block text-xs font-medium text-text-tertiary mb-1">{t('campaigns.clicks')}</label>
+                  <input
+                    type="number"
+                    value={form.clicks}
+                    onChange={e => update('clicks', e.target.value)}
+                    className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none"
+                  />
+                </div>
+                <div>
+                  <label className="block text-xs font-medium text-text-tertiary mb-1">{t('campaigns.conversions')}</label>
+                  <input
+                    type="number"
+                    value={form.conversions}
+                    onChange={e => update('conversions', e.target.value)}
+                    className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none"
+                  />
+                </div>
+              </div>
+            </div>
+          </CollapsibleSection>
+        )}
+      </SlidePanel>
+
+      <Modal
+        isOpen={showDeleteConfirm}
+        onClose={() => setShowDeleteConfirm(false)}
+        title={t('tracks.deleteTrack')}
+        isConfirm
+        danger
+        confirmText={t('common.delete')}
+        onConfirm={confirmDelete}
+      >
+        {t('tracks.deleteConfirm')}
+      </Modal>
+    </>
+  )
+}

client/src/contexts/AuthContext.jsx

@@ -55,16 +55,15 @@ export function AuthProvider({ children }) {
   // Check if current user owns a resource
   const isOwner = (resource) => {
     if (!user || !resource) return false
-    return resource.created_by_user_id === user.id
+    const creatorId = resource.created_by_user_id || resource.createdByUserId
+    return creatorId === user.id
   }
 
   // Check if current user is assigned to a resource
   const isAssignedTo = (resource) => {
     if (!user || !resource) return false
-    const teamMemberId = user.team_member_id || user.teamMemberId
-    if (!teamMemberId) return false
     const assignedTo = resource.assigned_to || resource.assignedTo
-    return assignedTo === teamMemberId
+    return assignedTo === user.id
   }
 
   // Check if user can edit a specific resource (owns it, assigned to it, or has role)
@@ -72,13 +71,28 @@ export function AuthProvider({ children }) {
     if (!permissions) return false
     if (type === 'post') return permissions.canEditAnyPost || isOwner(resource) || isAssignedTo(resource)
     if (type === 'task') return permissions.canEditAnyTask || isOwner(resource) || isAssignedTo(resource)
+    if (type === 'campaign') return permissions.canEditCampaigns || isOwner(resource)
+    if (type === 'project') return permissions.canEditProjects || isOwner(resource)
+    if (type === 'artefact') return permissions.canEditAnyPost || isOwner(resource)
     return false
   }
 
+  const ALL_MODULES = ['marketing', 'projects', 'finance', 'issues']
+
+  const hasModule = (mod) => {
+    if (!user) return false
+    if (user.role === 'superadmin') return true
+    const userModules = Array.isArray(user.modules) ? user.modules : ALL_MODULES
+    return userModules.includes(mod)
+  }
+
   const canDeleteResource = (type, resource) => {
     if (!permissions) return false
     if (type === 'post') return permissions.canDeleteAnyPost || isOwner(resource) || isAssignedTo(resource)
     if (type === 'task') return permissions.canDeleteAnyTask || isOwner(resource) || isAssignedTo(resource)
+    if (type === 'campaign') return permissions.canDeleteCampaigns || isOwner(resource)
+    if (type === 'project') return permissions.canDeleteProjects || isOwner(resource)
+    if (type === 'artefact') return permissions.canDeleteAnyPost || isOwner(resource)
     return false
   }
 
@@ -87,6 +101,7 @@ export function AuthProvider({ children }) {
       user, loading, permissions,
       login, logout, checkAuth,
       isOwner, canEditResource, canDeleteResource,
+      hasModule,
     }}>
       {children}
     </AuthContext.Provider>

client/src/i18n/LanguageContext.jsx

@@ -4,20 +4,47 @@ import ar from './ar.json'
 
 const translations = { en, ar }
 
+export const CURRENCIES = [
+  { code: 'SAR', symbol: '⃁', labelEn: 'Saudi Riyal (SAR)', labelAr: 'ريال سعودي' },
+  { code: 'AED', symbol: 'د.إ', labelEn: 'UAE Dirham (AED)', labelAr: 'درهم إماراتي' },
+  { code: 'USD', symbol: '$', labelEn: 'US Dollar (USD)', labelAr: 'دولار أمريكي' },
+  { code: 'EUR', symbol: '€', labelEn: 'Euro (EUR)', labelAr: 'يورو' },
+  { code: 'GBP', symbol: '£', labelEn: 'British Pound (GBP)', labelAr: 'جنيه إسترليني' },
+  { code: 'KWD', symbol: 'د.ك', labelEn: 'Kuwaiti Dinar (KWD)', labelAr: 'دينار كويتي' },
+  { code: 'QAR', symbol: 'ر.ق', labelEn: 'Qatari Riyal (QAR)', labelAr: 'ريال قطري' },
+  { code: 'BHD', symbol: 'د.ب', labelEn: 'Bahraini Dinar (BHD)', labelAr: 'دينار بحريني' },
+  { code: 'OMR', symbol: 'ر.ع', labelEn: 'Omani Rial (OMR)', labelAr: 'ريال عماني' },
+  { code: 'EGP', symbol: 'ج.م', labelEn: 'Egyptian Pound (EGP)', labelAr: 'جنيه مصري' },
+]
+
 const LanguageContext = createContext()
 
 export function LanguageProvider({ children }) {
   const [lang, setLangState] = useState(() => {
     // Load from localStorage or default to 'en'
-    return localStorage.getItem('samaya-lang') || 'en'
+    return localStorage.getItem('digitalhub-lang') || 'en'
+  })
+
+  const [currency, setCurrencyState] = useState(() => {
+    return localStorage.getItem('digitalhub-currency') || 'SAR'
   })
 
   const setLang = (newLang) => {
     if (newLang !== 'en' && newLang !== 'ar') return
     setLangState(newLang)
-    localStorage.setItem('samaya-lang', newLang)
+    localStorage.setItem('digitalhub-lang', newLang)
   }
 
+  const setCurrency = (code) => {
+    const valid = CURRENCIES.find(c => c.code === code)
+    if (!valid) return
+    setCurrencyState(code)
+    localStorage.setItem('digitalhub-currency', code)
+  }
+
+  const currencyObj = CURRENCIES.find(c => c.code === currency) || CURRENCIES[0]
+  const currencySymbol = currencyObj.symbol
+
   const dir = lang === 'ar' ? 'rtl' : 'ltr'
 
   // Update HTML dir attribute whenever language changes
@@ -26,31 +53,13 @@ export function LanguageProvider({ children }) {
     document.documentElement.lang = lang
   }, [dir, lang])
 
-  // Translation function
+  // Translation function (flat dot-notation keys)
   const t = (key) => {
-    const keys = key.split('.')
-    let value = translations[lang]
-    
-    for (const k of keys) {
-      value = value?.[k]
-      if (value === undefined) break
-    }
-    
-    // Fallback to English if translation not found
-    if (value === undefined) {
-      value = translations.en
-      for (const k of keys) {
-        value = value?.[k]
-        if (value === undefined) break
-      }
-    }
-    
-    // Fallback to key itself if still not found
-    return value !== undefined ? value : key
+    return translations[lang]?.[key] ?? translations.en?.[key] ?? key
   }
 
   return (
-    <LanguageContext.Provider value={{ lang, setLang, t, dir }}>
+    <LanguageContext.Provider value={{ lang, setLang, t, dir, currency, setCurrency, currencySymbol }}>
       {children}
     </LanguageContext.Provider>
   )

client/src/i18n/ar.json

@@ -1,19 +1,24 @@
 {
-  "app.name": "سمايا",
-  "app.subtitle": "مركز التسويق",
+  "app.name": "المركز الرقمي",
+  "app.subtitle": "المنصة",
   "nav.dashboard": "لوحة التحكم",
   "nav.campaigns": "الحملات",
   "nav.finance": "المالية والعائد",
+  "nav.financeDashboard": "لوحة التحكم",
+  "nav.budgets": "الميزانيات",
   "nav.posts": "إنتاج المحتوى",
+  "nav.calendar": "تقويم المحتوى",
+  "nav.artefacts": "القطع الإبداعية",
   "nav.assets": "الأصول",
   "nav.projects": "المشاريع",
   "nav.tasks": "المهام",
-  "nav.team": "الفريق",
+  "nav.issues": "المشاكل",
+  "nav.team": "الفرق",
   "nav.settings": "الإعدادات",
   "nav.users": "المستخدمين",
   "nav.logout": "تسجيل الخروج",
+  "nav.brands": "العلامات التجارية",
   "nav.collapse": "طي",
-  
   "common.save": "حفظ",
   "common.cancel": "إلغاء",
   "common.delete": "حذف",
@@ -26,13 +31,15 @@
   "common.loading": "جاري التحميل...",
   "common.unassigned": "غير مُسند",
   "common.required": "مطلوب",
-  
+  "common.saveFailed": "فشل الحفظ. حاول مجدداً.",
+  "common.updateFailed": "فشل التحديث. حاول مجدداً.",
+  "common.deleteFailed": "فشل الحذف. حاول مجدداً.",
+  "common.clearFilters": "مسح الفلاتر",
   "auth.login": "تسجيل الدخول",
   "auth.email": "البريد الإلكتروني",
   "auth.password": "كلمة المرور",
   "auth.loginBtn": "دخول",
   "auth.signingIn": "جاري تسجيل الدخول...",
-  
   "dashboard.title": "لوحة التحكم",
   "dashboard.welcomeBack": "مرحباً بعودتك",
   "dashboard.happeningToday": "إليك ما يحدث مع تسويقك اليوم.",
@@ -41,6 +48,7 @@
   "dashboard.activeCampaigns": "الحملات النشطة",
   "dashboard.total": "إجمالي",
   "dashboard.budgetSpent": "الميزانية المنفقة",
+  "dashboard.budgetRemaining": "الميزانية المتبقية",
   "dashboard.of": "من",
   "dashboard.noBudget": "لا توجد ميزانية بعد",
   "dashboard.overdueTasks": "مهام متأخرة",
@@ -61,8 +69,7 @@
   "dashboard.noPostsYet": "لا توجد منشورات بعد. أنشئ منشورك الأول!",
   "dashboard.upcomingDeadlines": "المواعيد النهائية القادمة",
   "dashboard.noUpcomingDeadlines": "لا توجد مواعيد نهائية هذا الأسبوع. 🎉",
-  "dashboard.loadingHub": "جاري تحميل مركز سمايا للتسويق...",
-  
+  "dashboard.loadingHub": "جاري تحميل المركز الرقمي...",
   "posts.title": "إنتاج المحتوى",
   "posts.newPost": "منشور جديد",
   "posts.editPost": "تعديل المنشور",
@@ -106,13 +113,23 @@
   "posts.approve": "اعتماد",
   "posts.schedule": "جدولة",
   "posts.publish": "نشر",
-  
+  "posts.attachFromAssets": "إرفاق من الأصول",
+  "posts.selectAssets": "اختر أصلاً لإرفاقه",
+  "posts.noAssetsFound": "لا توجد أصول",
+  "posts.created": "تم إنشاء المنشور بنجاح!",
+  "posts.updated": "تم تحديث المنشور بنجاح!",
+  "posts.deleted": "تم حذف المنشور بنجاح!",
+  "posts.statusUpdated": "تم تحديث حالة المنشور!",
+  "posts.attachmentDeleted": "تم حذف المرفق!",
+  "posts.createFirstPost": "أنشئ أول منشور لك للبدء بإنتاج المحتوى.",
+  "posts.periodFrom": "من",
+  "posts.periodTo": "إلى",
+  "posts.tryDifferentFilter": "جرب تعديل الفلاتر لرؤية المزيد من المنشورات.",
   "posts.status.draft": "مسودة",
   "posts.status.in_review": "قيد المراجعة",
   "posts.status.approved": "مُعتمد",
   "posts.status.scheduled": "مجدول",
   "posts.status.published": "منشور",
-  
   "tasks.title": "المهام",
   "tasks.newTask": "مهمة جديدة",
   "tasks.editTask": "تعديل المهمة",
@@ -143,12 +160,52 @@
   "tasks.task": "مهمة",
   "tasks.tasks": "مهام",
   "tasks.of": "من",
-  
   "tasks.priority.low": "منخفض",
   "tasks.priority.medium": "متوسط",
   "tasks.priority.high": "عالي",
   "tasks.priority.urgent": "عاجل",
-  
+  "tasks.created": "تم إنشاء المهمة بنجاح!",
+  "tasks.updated": "تم تحديث المهمة بنجاح!",
+  "tasks.deleted": "تم حذف المهمة بنجاح!",
+  "tasks.statusUpdated": "تم تحديث حالة المهمة!",
+  "tasks.canOnlyEditOwn": "يمكنك فقط تعديل مهامك الخاصة.",
+  "tasks.search": "بحث في المهام...",
+  "tasks.board": "لوحة",
+  "tasks.list": "قائمة",
+  "tasks.calendar": "تقويم",
+  "tasks.filters": "الفلاتر",
+  "tasks.allProjects": "جميع المشاريع",
+  "tasks.allBrands": "جميع العلامات",
+  "tasks.allPriorities": "جميع الأولويات",
+  "tasks.allStatuses": "جميع الحالات",
+  "tasks.allAssignees": "جميع المُسندين",
+  "tasks.allCreators": "جميع المنشئين",
+  "tasks.overdue": "متأخر",
+  "tasks.clearFilters": "مسح الفلاتر",
+  "tasks.details": "التفاصيل",
+  "tasks.discussion": "النقاش",
+  "tasks.unscheduled": "غير مجدول",
+  "tasks.today": "اليوم",
+  "tasks.project": "المشروع",
+  "tasks.brand": "العلامة التجارية",
+  "tasks.status": "الحالة",
+  "tasks.creator": "المنشئ",
+  "tasks.assignee": "المُسند إليه",
+  "tasks.commentCount": "{n} تعليقات",
+  "tasks.dueDateRange": "تاريخ الاستحقاق",
+  "tasks.noProject": "بدون مشروع",
+  "tasks.createdBy": "أنشأها",
+  "tasks.startDate": "تاريخ البدء",
+  "tasks.attachments": "المرفقات",
+  "tasks.uploadFile": "رفع ملف",
+  "tasks.setAsThumbnail": "تعيين كصورة مصغرة",
+  "tasks.removeThumbnail": "إزالة الصورة المصغرة",
+  "tasks.thumbnail": "الصورة المصغرة",
+  "tasks.dropOrClick": "اسحب ملفاً أو انقر للرفع",
+  "projects.thumbnail": "الصورة المصغرة",
+  "projects.uploadThumbnail": "رفع صورة مصغرة",
+  "projects.changeThumbnail": "تغيير الصورة المصغرة",
+  "projects.removeThumbnail": "إزالة الصورة المصغرة",
   "team.title": "الفريق",
   "team.members": "أعضاء الفريق",
   "team.addMember": "إضافة عضو",
@@ -180,30 +237,53 @@
   "team.noTasks": "لا توجد مهام",
   "team.toDo": "للتنفيذ",
   "team.inProgress": "قيد التنفيذ",
-  
   "campaigns.title": "الحملات",
   "campaigns.newCampaign": "حملة جديدة",
   "campaigns.noCampaigns": "لا توجد حملات",
-  
   "assets.title": "الأصول",
   "assets.upload": "رفع",
   "assets.noAssets": "لا توجد أصول",
-  
+  "brands.title": "العلامات التجارية",
+  "brands.addBrand": "إضافة علامة",
+  "brands.editBrand": "تعديل العلامة",
+  "brands.deleteBrand": "حذف العلامة؟",
+  "brands.deleteBrandConfirm": "هل أنت متأكد من حذف هذه العلامة؟ ستفقد المنشورات والحملات المرتبطة بها ارتباطها بالعلامة.",
+  "brands.noBrands": "لا توجد علامات تجارية",
+  "brands.brandName": "الاسم (إنجليزي)",
+  "brands.brandNameAr": "الاسم (عربي)",
+  "brands.brandPriority": "الأولوية",
+  "brands.brandIcon": "الأيقونة",
+  "brands.logo": "الشعار",
+  "brands.uploadLogo": "رفع الشعار",
+  "brands.changeLogo": "تغيير الشعار",
+  "brands.manageBrands": "إدارة العلامات التجارية لمؤسستك",
   "settings.title": "الإعدادات",
   "settings.language": "اللغة",
   "settings.english": "English",
   "settings.arabic": "عربي",
   "settings.restartTutorial": "إعادة تشغيل الدليل التعليمي",
-  "settings.tutorialDesc": "هل تحتاج إلى تذكير؟ أعد تشغيل الدليل التفاعلي للتعرف على جميع ميزات مركز سمايا للتسويق.",
+  "settings.tutorialDesc": "هل تحتاج إلى تذكير؟ أعد تشغيل الدليل التفاعلي للتعرف على جميع ميزات المركز الرقمي.",
   "settings.general": "عام",
   "settings.onboardingTutorial": "الدليل التعليمي",
   "settings.tutorialRestarted": "تم إعادة تشغيل الدليل!",
   "settings.restarting": "جاري إعادة التشغيل...",
   "settings.reloadingPage": "جاري إعادة تحميل الصفحة لبدء الدليل...",
+  "settings.brands": "العلامات التجارية",
+  "settings.manageBrands": "إدارة العلامات التجارية وأسماء العرض",
+  "settings.addBrand": "إضافة علامة",
+  "settings.editBrand": "تعديل العلامة",
+  "settings.brandName": "الاسم (إنجليزي)",
+  "settings.brandNameAr": "الاسم (عربي)",
+  "settings.brandPriority": "الأولوية",
+  "settings.brandIcon": "الأيقونة",
+  "settings.deleteBrand": "حذف العلامة؟",
+  "settings.deleteBrandConfirm": "هل أنت متأكد من حذف هذه العلامة؟ ستفقد المنشورات والحملات المرتبطة بها ارتباطها بالعلامة.",
+  "settings.noBrands": "لا توجد علامات بعد. أضف أول علامة تجارية.",
   "settings.moreComingSoon": "المزيد من الإعدادات قريباً",
   "settings.additionalSettings": "سيتم إضافة إعدادات إضافية للإشعارات وتفضيلات العرض والمزيد هنا.",
+  "settings.currency": "العملة",
+  "settings.currencyHint": "ستُستخدم هذه العملة في جميع الصفحات المالية.",
   "settings.preferences": "إدارة تفضيلاتك وإعدادات التطبيق",
-  
   "tutorial.skip": "تخطي",
   "tutorial.next": "التالي",
   "tutorial.prev": "السابق",
@@ -226,14 +306,185 @@
   "tutorial.newPost.desc": "ابدأ إنشاء المحتوى من هنا. اختر علامتك التجارية والمنصات وأسنده لعضو فريق.",
   "tutorial.filters.title": "التصفية والتركيز",
   "tutorial.filters.desc": "استخدم الفلاتر للتركيز على علامات أو منصات أو أعضاء فريق محددين.",
-  
-  "login.title": "سمايا للتسويق",
+  "login.title": "المركز الرقمي",
   "login.subtitle": "سجل دخولك للمتابعة",
   "login.forgotPassword": "نسيت كلمة المرور؟",
   "login.defaultCreds": "بيانات الدخول الافتراضية:",
-  
+  "comments.title": "النقاش",
+  "comments.noComments": "لا توجد تعليقات بعد. ابدأ المحادثة.",
+  "comments.placeholder": "اكتب تعليقاً...",
+  "comments.justNow": "الآن",
+  "comments.minutesAgo": "منذ {n} دقيقة",
+  "comments.hoursAgo": "منذ {n} ساعة",
+  "comments.daysAgo": "منذ {n} يوم",
   "profile.completeYourProfile": "أكمل ملفك الشخصي",
   "profile.completeDesc": "يرجى إكمال ملفك الشخصي للوصول إلى جميع الميزات ومساعدة فريقك في العثور عليك.",
   "profile.completeProfileBtn": "إكمال الملف",
-  "profile.later": "لاحقاً"
-}
+  "profile.later": "لاحقاً",
+  "timeline.title": "الجدول الزمني",
+  "timeline.day": "يوم",
+  "timeline.week": "أسبوع",
+  "timeline.today": "اليوم",
+  "timeline.startDate": "تاريخ البدء",
+  "timeline.dragToMove": "اسحب للنقل",
+  "timeline.dragToResize": "اسحب الحواف لتغيير الحجم",
+  "timeline.noItems": "لا توجد عناصر للعرض",
+  "timeline.addItems": "أضف عناصر بتواريخ لعرض الجدول الزمني",
+  "timeline.tracks": "المسارات",
+  "timeline.timeline": "الجدول الزمني",
+  "posts.details": "التفاصيل",
+  "posts.platformsLinks": "المنصات والروابط",
+  "posts.discussion": "النقاش",
+  "campaigns.details": "التفاصيل",
+  "campaigns.performance": "الأداء",
+  "campaigns.discussion": "النقاش",
+  "campaigns.name": "الاسم",
+  "campaigns.description": "الوصف",
+  "campaigns.brand": "العلامة التجارية",
+  "campaigns.status": "الحالة",
+  "campaigns.platforms": "المنصات",
+  "campaigns.startDate": "تاريخ البدء",
+  "campaigns.endDate": "تاريخ الانتهاء",
+  "campaigns.budget": "الميزانية",
+  "campaigns.goals": "الأهداف",
+  "campaigns.notes": "ملاحظات",
+  "campaigns.budgetSpent": "المنفق من الميزانية",
+  "campaigns.revenue": "الإيرادات",
+  "campaigns.impressions": "مرات الظهور",
+  "campaigns.clicks": "النقرات",
+  "campaigns.conversions": "التحويلات",
+  "campaigns.createCampaign": "إنشاء حملة",
+  "campaigns.editCampaign": "تعديل الحملة",
+  "campaigns.deleteCampaign": "حذف الحملة؟",
+  "campaigns.deleteConfirm": "هل أنت متأكد من حذف هذه الحملة؟ سيتم حذف جميع البيانات المرتبطة. لا يمكن التراجع.",
+  "tracks.details": "التفاصيل",
+  "tracks.metrics": "المقاييس",
+  "tracks.trackName": "اسم المسار",
+  "tracks.type": "النوع",
+  "tracks.platform": "المنصة",
+  "tracks.budgetAllocated": "الميزانية المخصصة",
+  "tracks.status": "الحالة",
+  "tracks.notes": "ملاحظات",
+  "tracks.budgetSpent": "المنفق من الميزانية",
+  "tracks.revenue": "الإيرادات",
+  "tracks.addTrack": "إضافة مسار",
+  "tracks.editTrack": "تعديل المسار",
+  "tracks.deleteTrack": "حذف المسار؟",
+  "tracks.deleteConfirm": "هل أنت متأكد من حذف هذا المسار؟ لا يمكن التراجع.",
+  "projects.details": "التفاصيل",
+  "projects.discussion": "النقاش",
+  "projects.name": "الاسم",
+  "projects.description": "الوصف",
+  "projects.brand": "العلامة التجارية",
+  "projects.owner": "المالك",
+  "projects.status": "الحالة",
+  "projects.startDate": "تاريخ البدء",
+  "projects.dueDate": "تاريخ الاستحقاق",
+  "projects.editProject": "تعديل المشروع",
+  "projects.deleteProject": "حذف المشروع؟",
+  "projects.deleteConfirm": "هل أنت متأكد من حذف هذا المشروع؟ لا يمكن التراجع.",
+  "team.details": "التفاصيل",
+  "team.workload": "عبء العمل",
+  "team.recentTasks": "المهام الأخيرة",
+  "team.recentPosts": "المنشورات الأخيرة",
+  "team.modules": "الوحدات",
+  "team.selectBrands": "اختر العلامات التجارية...",
+  "team.gridView": "عرض الشبكة",
+  "team.teamsView": "عرض الفرق",
+  "team.unassigned": "غير مُعيّن",
+  "modules.marketing": "التسويق",
+  "modules.projects": "المشاريع",
+  "modules.finance": "المالية",
+  "modules.issues": "المشاكل",
+  "teams.title": "الفرق",
+  "teams.teams": "الفرق",
+  "teams.createTeam": "إنشاء فريق",
+  "teams.editTeam": "تعديل الفريق",
+  "teams.deleteTeam": "حذف الفريق؟",
+  "teams.deleteConfirm": "هل أنت متأكد من حذف هذا الفريق؟ لا يمكن التراجع.",
+  "teams.name": "اسم الفريق",
+  "teams.description": "الوصف",
+  "teams.members": "أعضاء",
+  "teams.details": "التفاصيل",
+  "teams.noTeams": "لا توجد فرق بعد",
+  "teams.selectMembers": "بحث عن أعضاء...",
+  "dates.today": "اليوم",
+  "dates.yesterday": "أمس",
+  "dates.thisWeek": "هذا الأسبوع",
+  "dates.lastWeek": "الأسبوع الماضي",
+  "dates.thisMonth": "هذا الشهر",
+  "dates.lastMonth": "الشهر الماضي",
+  "dates.thisQuarter": "هذا الربع",
+  "dates.thisYear": "هذا العام",
+  "dates.customRange": "نطاق مخصص",
+  "dates.clearDates": "مسح التواريخ",
+  "dashboard.myTasks": "مهامي",
+  "dashboard.projectProgress": "تقدم المشاريع",
+  "dashboard.noProjectsYet": "لا توجد مشاريع بعد",
+  "finance.project": "المشروع",
+  "finance.projectBudget": "ميزانية المشروع",
+  "finance.projectBreakdown": "توزيع المشاريع",
+  "finance.budgetFor": "ميزانية لـ",
+  "budgets.title": "الميزانيات",
+  "budgets.subtitle": "إضافة وإدارة سجلات الميزانية — تتبع المصدر والوجهة والتخصيص",
+  "budgets.addEntry": "إضافة سجل",
+  "budgets.editEntry": "تعديل السجل",
+  "budgets.deleteEntry": "حذف السجل؟",
+  "budgets.deleteConfirm": "هل أنت متأكد من حذف هذا السجل؟ لا يمكن التراجع.",
+  "budgets.searchEntries": "بحث في السجلات...",
+  "budgets.allCategories": "جميع الفئات",
+  "budgets.allDestinations": "جميع الوجهات",
+  "budgets.noEntries": "لا توجد سجلات ميزانية بعد. أضف أول سجل.",
+  "budgets.noMatch": "لا توجد سجلات تطابق الفلاتر.",
+  "budgets.label": "الوصف",
+  "budgets.labelPlaceholder": "مثال: ميزانية التسويق الربع الأول، شراء معدات...",
+  "budgets.amount": "المبلغ",
+  "budgets.dateReceived": "تاريخ الاستلام",
+  "budgets.source": "المصدر",
+  "budgets.sourcePlaceholder": "مثال: موافقة المدير، الميزانية السنوية...",
+  "budgets.destination": "الوجهة",
+  "budgets.selectDestination": "اختر الوجهة...",
+  "budgets.companyCard": "بطاقة الشركة",
+  "budgets.personalAccount": "حساب شخصي",
+  "budgets.corporateAccount": "حساب الشركة",
+  "budgets.otherDest": "أخرى",
+  "budgets.category": "الفئة",
+  "budgets.linkedTo": "مرتبط بـ",
+  "budgets.noCampaign": "بدون حملة",
+  "budgets.noProject": "بدون مشروع",
+  "budgets.general": "عام",
+  "budgets.notes": "ملاحظات",
+  "budgets.notesPlaceholder": "أي تفاصيل حول هذا السجل...",
+  "budgets.date": "التاريخ",
+  "budgets.type": "النوع",
+  "budgets.income": "دخل",
+  "budgets.expense": "مصروف",
+  "budgets.allTypes": "الكل",
+  "budgets.net": "صافي",
+  "budgets.dateExpensed": "التاريخ",
+  "dashboard.expenses": "المصروفات",
+  "finance.expenses": "إجمالي المصروفات",
+  "settings.uploads": "الرفع",
+  "settings.maxFileSize": "الحد الأقصى لحجم الملف",
+  "settings.maxFileSizeHint": "الحد الأقصى المسموح لحجم المرفقات (١-٥٠٠ ميجابايت)",
+  "settings.mb": "ميجابايت",
+  "settings.saved": "تم حفظ الإعدادات!",
+  "tasks.maxFileSize": "الحد الأقصى: {size} ميجابايت",
+  "tasks.fileTooLarge": "الملف \"{name}\" كبير جداً ({size} ميجابايت). الحد المسموح: {max} ميجابايت.",
+  "issues.board": "لوحة",
+  "issues.list": "قائمة",
+  "issues.statusUpdated": "تم تحديث حالة المشكلة!",
+  "issues.dropHere": "أفلت هنا",
+  "issues.noIssuesInColumn": "لا توجد مشاكل",
+  "artefacts.grid": "شبكة",
+  "artefacts.list": "قائمة",
+  "artefacts.allCreators": "جميع المنشئين",
+  "artefacts.allProjects": "جميع المشاريع",
+  "artefacts.allCampaigns": "جميع الحملات",
+  "artefacts.project": "المشروع",
+  "artefacts.campaign": "الحملة",
+  "artefacts.sortRecentlyUpdated": "آخر تحديث",
+  "artefacts.sortNewest": "الأحدث أولاً",
+  "artefacts.sortOldest": "الأقدم أولاً",
+  "artefacts.sortTitleAZ": "العنوان أ-ي"
+}

client/src/i18n/en.json

@@ -1,19 +1,24 @@
 {
-  "app.name": "Samaya",
-  "app.subtitle": "Marketing Hub",
+  "app.name": "Digital Hub",
+  "app.subtitle": "Platform",
   "nav.dashboard": "Dashboard",
   "nav.campaigns": "Campaigns",
   "nav.finance": "Finance & ROI",
+  "nav.financeDashboard": "Dashboard",
+  "nav.budgets": "Budgets",
   "nav.posts": "Post Production",
+  "nav.calendar": "Content Calendar",
+  "nav.artefacts": "Artefacts",
   "nav.assets": "Assets",
   "nav.projects": "Projects",
   "nav.tasks": "Tasks",
-  "nav.team": "Team",
+  "nav.issues": "Issues",
+  "nav.team": "Teams",
   "nav.settings": "Settings",
   "nav.users": "Users",
   "nav.logout": "Logout",
+  "nav.brands": "Brands",
   "nav.collapse": "Collapse",
-  
   "common.save": "Save",
   "common.cancel": "Cancel",
   "common.delete": "Delete",
@@ -26,13 +31,15 @@
   "common.loading": "Loading...",
   "common.unassigned": "Unassigned",
   "common.required": "Required",
-  
+  "common.saveFailed": "Failed to save. Please try again.",
+  "common.updateFailed": "Failed to update. Please try again.",
+  "common.deleteFailed": "Failed to delete. Please try again.",
+  "common.clearFilters": "Clear Filters",
   "auth.login": "Sign In",
   "auth.email": "Email",
   "auth.password": "Password",
   "auth.loginBtn": "Sign In",
   "auth.signingIn": "Signing in...",
-  
   "dashboard.title": "Dashboard",
   "dashboard.welcomeBack": "Welcome back",
   "dashboard.happeningToday": "Here's what's happening with your marketing today.",
@@ -41,6 +48,7 @@
   "dashboard.activeCampaigns": "Active Campaigns",
   "dashboard.total": "total",
   "dashboard.budgetSpent": "Budget Spent",
+  "dashboard.budgetRemaining": "Budget Remaining",
   "dashboard.of": "of",
   "dashboard.noBudget": "No budget yet",
   "dashboard.overdueTasks": "Overdue Tasks",
@@ -61,8 +69,7 @@
   "dashboard.noPostsYet": "No posts yet. Create your first post!",
   "dashboard.upcomingDeadlines": "Upcoming Deadlines",
   "dashboard.noUpcomingDeadlines": "No upcoming deadlines this week. 🎉",
-  "dashboard.loadingHub": "Loading Samaya Marketing Hub...",
-  
+  "dashboard.loadingHub": "Loading Digital Hub...",
   "posts.title": "Post Production",
   "posts.newPost": "New Post",
   "posts.editPost": "Edit Post",
@@ -106,13 +113,23 @@
   "posts.approve": "Approve",
   "posts.schedule": "Schedule",
   "posts.publish": "Publish",
-  
+  "posts.attachFromAssets": "Attach from Assets",
+  "posts.selectAssets": "Select an asset to attach",
+  "posts.noAssetsFound": "No assets found",
+  "posts.created": "Post created successfully!",
+  "posts.updated": "Post updated successfully!",
+  "posts.deleted": "Post deleted successfully!",
+  "posts.statusUpdated": "Post status updated!",
+  "posts.attachmentDeleted": "Attachment deleted!",
+  "posts.createFirstPost": "Create your first post to get started with content production.",
+  "posts.periodFrom": "From",
+  "posts.periodTo": "To",
+  "posts.tryDifferentFilter": "Try adjusting your filters to see more posts.",
   "posts.status.draft": "Draft",
   "posts.status.in_review": "In Review",
   "posts.status.approved": "Approved",
   "posts.status.scheduled": "Scheduled",
   "posts.status.published": "Published",
-  
   "tasks.title": "Tasks",
   "tasks.newTask": "New Task",
   "tasks.editTask": "Edit Task",
@@ -143,12 +160,52 @@
   "tasks.task": "task",
   "tasks.tasks": "tasks",
   "tasks.of": "of",
-  
   "tasks.priority.low": "Low",
   "tasks.priority.medium": "Medium",
   "tasks.priority.high": "High",
   "tasks.priority.urgent": "Urgent",
-  
+  "tasks.created": "Task created successfully!",
+  "tasks.updated": "Task updated successfully!",
+  "tasks.deleted": "Task deleted successfully!",
+  "tasks.statusUpdated": "Task status updated!",
+  "tasks.canOnlyEditOwn": "You can only edit your own tasks.",
+  "tasks.search": "Search tasks...",
+  "tasks.board": "Board",
+  "tasks.list": "List",
+  "tasks.calendar": "Calendar",
+  "tasks.filters": "Filters",
+  "tasks.allProjects": "All Projects",
+  "tasks.allBrands": "All Brands",
+  "tasks.allPriorities": "All Priorities",
+  "tasks.allStatuses": "All Statuses",
+  "tasks.allAssignees": "All Assignees",
+  "tasks.allCreators": "All Creators",
+  "tasks.overdue": "Overdue",
+  "tasks.clearFilters": "Clear Filters",
+  "tasks.details": "Details",
+  "tasks.discussion": "Discussion",
+  "tasks.unscheduled": "Unscheduled",
+  "tasks.today": "Today",
+  "tasks.project": "Project",
+  "tasks.brand": "Brand",
+  "tasks.status": "Status",
+  "tasks.creator": "Creator",
+  "tasks.assignee": "Assignee",
+  "tasks.commentCount": "{n} comments",
+  "tasks.dueDateRange": "Due Date",
+  "tasks.noProject": "No project",
+  "tasks.createdBy": "Created by",
+  "tasks.startDate": "Start Date",
+  "tasks.attachments": "Attachments",
+  "tasks.uploadFile": "Upload file",
+  "tasks.setAsThumbnail": "Set as thumbnail",
+  "tasks.removeThumbnail": "Remove thumbnail",
+  "tasks.thumbnail": "Thumbnail",
+  "tasks.dropOrClick": "Drop file or click to upload",
+  "projects.thumbnail": "Thumbnail",
+  "projects.uploadThumbnail": "Upload Thumbnail",
+  "projects.changeThumbnail": "Change Thumbnail",
+  "projects.removeThumbnail": "Remove Thumbnail",
   "team.title": "Team",
   "team.members": "Team Members",
   "team.addMember": "Add Member",
@@ -180,30 +237,53 @@
   "team.noTasks": "No tasks",
   "team.toDo": "To Do",
   "team.inProgress": "In Progress",
-  
   "campaigns.title": "Campaigns",
   "campaigns.newCampaign": "New Campaign",
   "campaigns.noCampaigns": "No campaigns",
-  
   "assets.title": "Assets",
   "assets.upload": "Upload",
   "assets.noAssets": "No assets",
-  
+  "brands.title": "Brands",
+  "brands.addBrand": "Add Brand",
+  "brands.editBrand": "Edit Brand",
+  "brands.deleteBrand": "Delete Brand?",
+  "brands.deleteBrandConfirm": "Are you sure you want to delete this brand? Posts and campaigns linked to it will lose their brand association.",
+  "brands.noBrands": "No brands yet",
+  "brands.brandName": "Name (English)",
+  "brands.brandNameAr": "Name (Arabic)",
+  "brands.brandPriority": "Priority",
+  "brands.brandIcon": "Icon",
+  "brands.logo": "Logo",
+  "brands.uploadLogo": "Upload Logo",
+  "brands.changeLogo": "Change Logo",
+  "brands.manageBrands": "Manage your organization's brands",
   "settings.title": "Settings",
   "settings.language": "Language",
   "settings.english": "English",
   "settings.arabic": "Arabic",
   "settings.restartTutorial": "Restart Tutorial",
-  "settings.tutorialDesc": "Need a refresher? Restart the interactive tutorial to learn about all the features of the Samaya Marketing Hub.",
+  "settings.tutorialDesc": "Need a refresher? Restart the interactive tutorial to learn about all the features of Digital Hub.",
   "settings.general": "General",
   "settings.onboardingTutorial": "Onboarding Tutorial",
   "settings.tutorialRestarted": "Tutorial Restarted!",
   "settings.restarting": "Restarting...",
   "settings.reloadingPage": "Reloading page to start tutorial...",
+  "settings.brands": "Brands",
+  "settings.manageBrands": "Manage your brands and their display names",
+  "settings.addBrand": "Add Brand",
+  "settings.editBrand": "Edit Brand",
+  "settings.brandName": "Name (English)",
+  "settings.brandNameAr": "Name (Arabic)",
+  "settings.brandPriority": "Priority",
+  "settings.brandIcon": "Icon",
+  "settings.deleteBrand": "Delete Brand?",
+  "settings.deleteBrandConfirm": "Are you sure you want to delete this brand? Posts and campaigns linked to it will lose their brand association.",
+  "settings.noBrands": "No brands yet. Add your first brand.",
   "settings.moreComingSoon": "More Settings Coming Soon",
   "settings.additionalSettings": "Additional settings for notifications, display preferences, and more will be added here.",
+  "settings.currency": "Currency",
+  "settings.currencyHint": "This currency will be used across all financial pages.",
   "settings.preferences": "Manage your preferences and app settings",
-  
   "tutorial.skip": "Skip Tutorial",
   "tutorial.next": "Next",
   "tutorial.prev": "Back",
@@ -226,14 +306,185 @@
   "tutorial.newPost.desc": "Start creating content here. Pick your brand, platforms, and assign it to a team member.",
   "tutorial.filters.title": "Filter & Focus",
   "tutorial.filters.desc": "Use filters to focus on specific brands, platforms, or team members.",
-  
-  "login.title": "Samaya Marketing",
+  "login.title": "Digital Hub",
   "login.subtitle": "Sign in to continue",
   "login.forgotPassword": "Forgot password?",
   "login.defaultCreds": "Default credentials:",
-  
+  "comments.title": "Discussion",
+  "comments.noComments": "No comments yet. Start the conversation.",
+  "comments.placeholder": "Write a comment...",
+  "comments.justNow": "Just now",
+  "comments.minutesAgo": "{n}m ago",
+  "comments.hoursAgo": "{n}h ago",
+  "comments.daysAgo": "{n}d ago",
   "profile.completeYourProfile": "Complete Your Profile",
   "profile.completeDesc": "Please complete your profile to access all features and help your team find you.",
   "profile.completeProfileBtn": "Complete Profile",
-  "profile.later": "Later"
-}
+  "profile.later": "Later",
+  "timeline.title": "Timeline",
+  "timeline.day": "Day",
+  "timeline.week": "Week",
+  "timeline.today": "Today",
+  "timeline.startDate": "Start Date",
+  "timeline.dragToMove": "Drag to move",
+  "timeline.dragToResize": "Drag edges to resize",
+  "timeline.noItems": "No items to display",
+  "timeline.addItems": "Add items with dates to see the timeline",
+  "timeline.tracks": "Tracks",
+  "timeline.timeline": "Timeline",
+  "posts.details": "Details",
+  "posts.platformsLinks": "Platforms & Links",
+  "posts.discussion": "Discussion",
+  "campaigns.details": "Details",
+  "campaigns.performance": "Performance",
+  "campaigns.discussion": "Discussion",
+  "campaigns.name": "Name",
+  "campaigns.description": "Description",
+  "campaigns.brand": "Brand",
+  "campaigns.status": "Status",
+  "campaigns.platforms": "Platforms",
+  "campaigns.startDate": "Start Date",
+  "campaigns.endDate": "End Date",
+  "campaigns.budget": "Budget",
+  "campaigns.goals": "Goals",
+  "campaigns.notes": "Notes",
+  "campaigns.budgetSpent": "Budget Spent",
+  "campaigns.revenue": "Revenue",
+  "campaigns.impressions": "Impressions",
+  "campaigns.clicks": "Clicks",
+  "campaigns.conversions": "Conversions",
+  "campaigns.createCampaign": "Create Campaign",
+  "campaigns.editCampaign": "Edit Campaign",
+  "campaigns.deleteCampaign": "Delete Campaign?",
+  "campaigns.deleteConfirm": "Are you sure you want to delete this campaign? All associated data will be removed. This action cannot be undone.",
+  "tracks.details": "Details",
+  "tracks.metrics": "Metrics",
+  "tracks.trackName": "Track Name",
+  "tracks.type": "Type",
+  "tracks.platform": "Platform",
+  "tracks.budgetAllocated": "Budget Allocated",
+  "tracks.status": "Status",
+  "tracks.notes": "Notes",
+  "tracks.budgetSpent": "Budget Spent",
+  "tracks.revenue": "Revenue",
+  "tracks.addTrack": "Add Track",
+  "tracks.editTrack": "Edit Track",
+  "tracks.deleteTrack": "Delete Track?",
+  "tracks.deleteConfirm": "Are you sure you want to delete this track? This action cannot be undone.",
+  "projects.details": "Details",
+  "projects.discussion": "Discussion",
+  "projects.name": "Name",
+  "projects.description": "Description",
+  "projects.brand": "Brand",
+  "projects.owner": "Owner",
+  "projects.status": "Status",
+  "projects.startDate": "Start Date",
+  "projects.dueDate": "Due Date",
+  "projects.editProject": "Edit Project",
+  "projects.deleteProject": "Delete Project?",
+  "projects.deleteConfirm": "Are you sure you want to delete this project? This action cannot be undone.",
+  "team.details": "Details",
+  "team.workload": "Workload",
+  "team.recentTasks": "Recent Tasks",
+  "team.recentPosts": "Recent Posts",
+  "team.modules": "Modules",
+  "team.selectBrands": "Select brands...",
+  "team.gridView": "Grid View",
+  "team.teamsView": "Teams View",
+  "team.unassigned": "Unassigned",
+  "modules.marketing": "Marketing",
+  "modules.projects": "Projects",
+  "modules.finance": "Finance",
+  "modules.issues": "Issues",
+  "teams.title": "Teams",
+  "teams.teams": "Teams",
+  "teams.createTeam": "Create Team",
+  "teams.editTeam": "Edit Team",
+  "teams.deleteTeam": "Delete Team?",
+  "teams.deleteConfirm": "Are you sure you want to delete this team? This action cannot be undone.",
+  "teams.name": "Team Name",
+  "teams.description": "Description",
+  "teams.members": "members",
+  "teams.details": "Details",
+  "teams.noTeams": "No teams yet",
+  "teams.selectMembers": "Search members...",
+  "dates.today": "Today",
+  "dates.yesterday": "Yesterday",
+  "dates.thisWeek": "This Week",
+  "dates.lastWeek": "Last Week",
+  "dates.thisMonth": "This Month",
+  "dates.lastMonth": "Last Month",
+  "dates.thisQuarter": "This Quarter",
+  "dates.thisYear": "This Year",
+  "dates.customRange": "Custom Range",
+  "dates.clearDates": "Clear Dates",
+  "dashboard.myTasks": "My Tasks",
+  "dashboard.projectProgress": "Project Progress",
+  "dashboard.noProjectsYet": "No projects yet",
+  "finance.project": "Project",
+  "finance.projectBudget": "Project Budget",
+  "finance.projectBreakdown": "Project Breakdown",
+  "finance.budgetFor": "Budget for",
+  "budgets.title": "Budgets",
+  "budgets.subtitle": "Add and manage budget entries — track source, destination, and allocation",
+  "budgets.addEntry": "Add Entry",
+  "budgets.editEntry": "Edit Entry",
+  "budgets.deleteEntry": "Delete Entry?",
+  "budgets.deleteConfirm": "Are you sure you want to delete this budget entry? This action cannot be undone.",
+  "budgets.searchEntries": "Search entries...",
+  "budgets.allCategories": "All Categories",
+  "budgets.allDestinations": "All Destinations",
+  "budgets.noEntries": "No budget entries yet. Add your first entry.",
+  "budgets.noMatch": "No entries match your filters.",
+  "budgets.label": "Label",
+  "budgets.labelPlaceholder": "e.g., Q1 Marketing Budget, Equipment Purchase...",
+  "budgets.amount": "Amount",
+  "budgets.dateReceived": "Date Received",
+  "budgets.source": "Source",
+  "budgets.sourcePlaceholder": "e.g., CEO Approval, Annual Budget...",
+  "budgets.destination": "Destination",
+  "budgets.selectDestination": "Select destination...",
+  "budgets.companyCard": "Company Card",
+  "budgets.personalAccount": "Personal Account",
+  "budgets.corporateAccount": "Corporate Account",
+  "budgets.otherDest": "Other",
+  "budgets.category": "Category",
+  "budgets.linkedTo": "Linked To",
+  "budgets.noCampaign": "No campaign",
+  "budgets.noProject": "No project",
+  "budgets.general": "General",
+  "budgets.notes": "Notes",
+  "budgets.notesPlaceholder": "Any details about this budget entry...",
+  "budgets.date": "Date",
+  "budgets.type": "Type",
+  "budgets.income": "Income",
+  "budgets.expense": "Expense",
+  "budgets.allTypes": "All Types",
+  "budgets.net": "Net",
+  "budgets.dateExpensed": "Date",
+  "dashboard.expenses": "Expenses",
+  "finance.expenses": "Total Expenses",
+  "settings.uploads": "Uploads",
+  "settings.maxFileSize": "Maximum File Size",
+  "settings.maxFileSizeHint": "Maximum allowed file size for attachments (1-500 MB)",
+  "settings.mb": "MB",
+  "settings.saved": "Settings saved!",
+  "tasks.maxFileSize": "Max file size: {size} MB",
+  "tasks.fileTooLarge": "File \"{name}\" is too large ({size} MB). Maximum allowed: {max} MB.",
+  "issues.board": "Board",
+  "issues.list": "List",
+  "issues.statusUpdated": "Issue status updated!",
+  "issues.dropHere": "Drop here",
+  "issues.noIssuesInColumn": "No issues",
+  "artefacts.grid": "Grid",
+  "artefacts.list": "List",
+  "artefacts.allCreators": "All Creators",
+  "artefacts.allProjects": "All Projects",
+  "artefacts.allCampaigns": "All Campaigns",
+  "artefacts.project": "Project",
+  "artefacts.campaign": "Campaign",
+  "artefacts.sortRecentlyUpdated": "Recently Updated",
+  "artefacts.sortNewest": "Newest First",
+  "artefacts.sortOldest": "Oldest First",
+  "artefacts.sortTitleAZ": "Title A-Z"
+}

client/src/index.css

@@ -137,6 +137,21 @@ textarea {
   100% { background-position: 200% 0; }
 }
 
+@keyframes pulse-subtle {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.7; }
+}
+
+@keyframes bounce-subtle {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-4px); }
+}
+
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
 .animate-fade-in {
   animation: fadeIn 0.3s ease-out forwards;
 }
@@ -149,6 +164,58 @@ textarea {
   animation: scaleIn 0.2s ease-out forwards;
 }
 
+.animate-pulse-subtle {
+  animation: pulse-subtle 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+.animate-spin {
+  animation: spin 1s linear infinite;
+}
+
+@keyframes slide-in-right {
+  from { transform: translateX(100%); }
+  to { transform: translateX(0); }
+}
+
+.animate-slide-in-right {
+  animation: slide-in-right 0.3s ease-out;
+}
+
+/* Backdrop fade-in */
+@keyframes backdropFadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+.animate-backdrop-in {
+  animation: backdropFadeIn 0.2s ease-out forwards;
+}
+
+/* Slide out (reverse of slideIn) */
+@keyframes slideOut {
+  from { opacity: 1; transform: translateX(0); }
+  to { opacity: 0; transform: translateX(-12px); }
+}
+
+.animate-slide-out {
+  animation: slideOut 0.3s ease-in forwards;
+}
+
+/* Collapsible section (CSS grid height transition) */
+.collapsible-content {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.collapsible-content.is-open {
+  grid-template-rows: 1fr;
+}
+
+.collapsible-inner {
+  overflow: hidden;
+}
+
 /* Stagger children */
 .stagger-children > * {
   opacity: 0;
@@ -194,6 +261,76 @@ textarea {
   opacity: 1;
 }
 
+/* Mesh background - subtle radial gradients */
+.bg-mesh {
+  background-color: #f8fafc;
+  background-image:
+    radial-gradient(at 20% 20%, rgba(79, 70, 229, 0.04) 0, transparent 50%),
+    radial-gradient(at 80% 40%, rgba(219, 39, 119, 0.03) 0, transparent 50%),
+    radial-gradient(at 40% 80%, rgba(5, 150, 105, 0.03) 0, transparent 50%);
+}
+
+/* Gradient text */
+.text-gradient {
+  background: linear-gradient(135deg, var(--color-brand-primary) 0%, #7c3aed 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+/* Premium stat card - always-visible gradient top bar */
+.stat-card-premium {
+  position: relative;
+  overflow: hidden;
+}
+.stat-card-premium::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 3px;
+  opacity: 1;
+}
+.stat-card-premium.accent-primary::before {
+  background: linear-gradient(90deg, #4f46e5, #7c3aed);
+}
+.stat-card-premium.accent-secondary::before {
+  background: linear-gradient(90deg, #db2777, #ec4899);
+}
+.stat-card-premium.accent-tertiary::before {
+  background: linear-gradient(90deg, #f59e0b, #fbbf24);
+}
+.stat-card-premium.accent-quaternary::before {
+  background: linear-gradient(90deg, #059669, #34d399);
+}
+
+/* Section card - premium container */
+.section-card {
+  background: white;
+  border: 1px solid var(--color-border);
+  border-radius: 1rem;
+  overflow: hidden;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
+  transition: box-shadow 0.3s ease;
+}
+.section-card:hover {
+  box-shadow: 0 4px 20px -4px rgba(0, 0, 0, 0.08);
+}
+.section-card-header {
+  padding: 1rem 1.25rem;
+  border-bottom: 1px solid var(--color-border);
+  background: linear-gradient(180deg, rgba(249, 250, 251, 0.5) 0%, white 100%);
+}
+
+/* Sidebar active glow */
+.sidebar-active-glow {
+  box-shadow: inset 3px 0 0 rgba(129, 140, 248, 0.8);
+}
+[dir="rtl"] .sidebar-active-glow {
+  box-shadow: inset -3px 0 0 rgba(129, 140, 248, 0.8);
+}
+
 /* Refined button styles */
 button {
   border-radius: 0.625rem;
@@ -204,7 +341,49 @@ button:hover:not(:disabled) {
   box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.12);
 }
 button:active:not(:disabled) {
-  transform: translateY(0);
+  transform: translateY(0) scale(0.98);
+}
+button:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+/* Focus states for accessibility */
+button:focus-visible,
+input:focus-visible,
+textarea:focus-visible,
+select:focus-visible {
+  outline: 2px solid var(--color-brand-primary);
+  outline-offset: 2px;
+}
+
+/* Input hover states */
+input:not(:disabled):hover,
+textarea:not(:disabled):hover,
+select:not(:disabled):hover {
+  border-color: var(--color-brand-primary-light);
+}
+
+/* Loading button state */
+.btn-loading {
+  position: relative;
+  pointer-events: none;
+  color: transparent !important;
+}
+.btn-loading::after {
+  content: '';
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 16px;
+  height: 16px;
+  margin-left: -8px;
+  margin-top: -8px;
+  border: 2px solid currentColor;
+  border-right-color: transparent;
+  border-radius: 50%;
+  animation: spin 0.6s linear infinite;
+  color: white;
 }
 
 /* Kanban column */
@@ -217,3 +396,146 @@ button:active:not(:disabled) {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
 }
+
+/* Ripple effect on buttons (optional enhancement) */
+@keyframes ripple {
+  0% {
+    transform: scale(0);
+    opacity: 0.5;
+  }
+  100% {
+    transform: scale(2.5);
+    opacity: 0;
+  }
+}
+
+/* Badge pulse animation */
+.badge-pulse {
+  animation: pulse-subtle 2s ease-in-out infinite;
+}
+
+/* Smooth height transitions */
+.transition-height {
+  transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* Better table row hover */
+tbody tr:hover {
+  background-color: var(--color-surface-secondary);
+}
+
+/* Better select styling */
+select {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 0.75rem center;
+  background-size: 12px;
+  appearance: none;
+  padding-right: 2.5rem;
+}
+
+[dir="rtl"] select {
+  background-position: left 0.75rem center;
+  padding-right: 0.75rem;
+  padding-left: 2.5rem;
+}
+
+/* Checkbox and radio improvements */
+input[type="checkbox"],
+input[type="radio"] {
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+input[type="checkbox"]:checked,
+input[type="radio"]:checked {
+  background-color: var(--color-brand-primary);
+  border-color: var(--color-brand-primary);
+}
+
+/* Disabled state improvements */
+input:disabled,
+textarea:disabled,
+select:disabled {
+  background-color: var(--color-surface-tertiary);
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+/* Success/error input states */
+.input-error {
+  border-color: #ef4444 !important;
+}
+
+.input-error:focus {
+  border-color: #ef4444 !important;
+  ring-color: rgba(239, 68, 68, 0.2) !important;
+}
+
+.input-success {
+  border-color: #10b981 !important;
+}
+
+.input-success:focus {
+  border-color: #10b981 !important;
+  ring-color: rgba(16, 185, 129, 0.2) !important;
+}
+
+/* Tooltip (if needed) */
+.tooltip {
+  position: relative;
+}
+
+.tooltip::after {
+  content: attr(data-tooltip);
+  position: absolute;
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%) translateY(-8px);
+  padding: 0.5rem 0.75rem;
+  background: var(--color-sidebar);
+  color: white;
+  font-size: 0.75rem;
+  border-radius: 0.5rem;
+  white-space: nowrap;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.2s, transform 0.2s;
+}
+
+.tooltip:hover::after {
+  opacity: 1;
+  transform: translateX(-50%) translateY(-4px);
+}
+
+/* Loading spinner for inline use */
+.spinner {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  border: 2px solid currentColor;
+  border-right-color: transparent;
+  border-radius: 50%;
+  animation: spin 0.6s linear infinite;
+}
+
+/* Skeleton shimmer effect */
+@keyframes shimmer-animation {
+  0% {
+    background-position: -468px 0;
+  }
+  100% {
+    background-position: 468px 0;
+  }
+}
+
+.skeleton-shimmer {
+  background: linear-gradient(
+    90deg,
+    var(--color-surface-tertiary) 0%,
+    var(--color-surface-secondary) 50%,
+    var(--color-surface-tertiary) 100%
+  );
+  background-size: 468px 100%;
+  animation: shimmer-animation 1.5s ease-in-out infinite;
+}

client/src/pages/Assets.jsx

@@ -3,6 +3,8 @@ import { Plus, Upload, Search, FolderOpen, ChevronRight, Grid3X3, X } from 'luci
 import { api } from '../utils/api'
 import AssetCard from '../components/AssetCard'
 import Modal from '../components/Modal'
+import CommentsSection from '../components/CommentsSection'
+import { SkeletonAssetGrid } from '../components/SkeletonLoader'
 
 export default function Assets() {
   const [assets, setAssets] = useState([])
@@ -134,13 +136,9 @@ export default function Assets() {
 
   if (loading) {
     return (
-      <div className="animate-pulse">
-        <div className="h-12 bg-surface-tertiary rounded-xl mb-4"></div>
-        <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-4">
-          {[...Array(10)].map((_, i) => (
-            <div key={i} className="aspect-square bg-surface-tertiary rounded-xl"></div>
-          ))}
-        </div>
+      <div className="space-y-4">
+        <div className="h-12 bg-surface-tertiary rounded-xl animate-pulse"></div>
+        <SkeletonAssetGrid count={10} />
       </div>
     )
   }
@@ -222,7 +220,7 @@ export default function Assets() {
           <p className="text-sm text-text-tertiary mt-1">Upload your first asset to get started</p>
         </div>
       ) : (
-        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4">
+        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4 stagger-children">
           {filteredAssets.map(asset => (
             <div key={asset._id || asset.id}>
               <AssetCard asset={asset} onClick={setSelectedAsset} />
@@ -284,6 +282,11 @@ export default function Assets() {
                 <img src={selectedAsset.url} alt={selectedAsset.name} className="w-full max-h-[400px] object-contain" />
               </div>
             )}
+            {selectedAsset.type === 'video' && selectedAsset.url && (
+              <div className="rounded-lg overflow-hidden bg-surface-tertiary">
+                <video src={selectedAsset.url} controls preload="metadata" className="w-full max-h-[400px]" />
+              </div>
+            )}
             <div className="grid grid-cols-2 gap-4 text-sm">
               <div>
                 <p className="text-text-tertiary">Type</p>
@@ -318,6 +321,7 @@ export default function Assets() {
                 </div>
               </div>
             )}
+            <CommentsSection entityType="asset" entityId={selectedAsset.id || selectedAsset._id} />
             <div className="flex items-center gap-3 pt-4 border-t border-border">
               <button
                 onClick={() => handleDeleteAsset(selectedAsset)}

client/src/pages/Brands.jsx

@@ -0,0 +1,340 @@
+import { useState, useEffect, useContext, useRef } from 'react'
+import { Tag, Plus, Edit2, Trash2, Upload, Image } from 'lucide-react'
+import { api } from '../utils/api'
+import { useLanguage } from '../i18n/LanguageContext'
+import { useAuth } from '../contexts/AuthContext'
+import { AppContext } from '../App'
+import Modal from '../components/Modal'
+import { SkeletonCard } from '../components/SkeletonLoader'
+
+const API_BASE = import.meta.env.VITE_API_URL || 'http://localhost:3001/api'
+
+const EMPTY_BRAND = { name: '', name_ar: '', priority: 2, icon: '' }
+
+export default function Brands() {
+  const { t, lang } = useLanguage()
+  const { user } = useAuth()
+  const { getBrandName } = useContext(AppContext)
+  const isSuperadminOrManager = user?.role === 'superadmin' || user?.role === 'manager'
+
+  const [brands, setBrands] = useState([])
+  const [loading, setLoading] = useState(true)
+  const [showModal, setShowModal] = useState(false)
+  const [editingBrand, setEditingBrand] = useState(null)
+  const [brandForm, setBrandForm] = useState(EMPTY_BRAND)
+  const [showDeleteModal, setShowDeleteModal] = useState(false)
+  const [brandToDelete, setBrandToDelete] = useState(null)
+  const [uploading, setUploading] = useState(false)
+  const fileInputRef = useRef(null)
+
+  useEffect(() => {
+    loadBrands()
+  }, [])
+
+  const loadBrands = async () => {
+    try {
+      const data = await api.get('/brands')
+      setBrands(Array.isArray(data) ? data : (data.data || []))
+    } catch (err) {
+      console.error('Failed to load brands:', err)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const openNewBrand = () => {
+    setEditingBrand(null)
+    setBrandForm(EMPTY_BRAND)
+    setShowModal(true)
+  }
+
+  const openEditBrand = (brand) => {
+    setEditingBrand(brand)
+    setBrandForm({
+      name: brand.name || '',
+      name_ar: brand.name_ar || '',
+      priority: brand.priority ?? 2,
+      icon: brand.icon || '',
+    })
+    setShowModal(true)
+  }
+
+  const saveBrand = async () => {
+    try {
+      const data = {
+        name: brandForm.name,
+        name_ar: brandForm.name_ar || null,
+        priority: brandForm.priority ? Number(brandForm.priority) : 2,
+        icon: brandForm.icon || null,
+      }
+      if (editingBrand) {
+        await api.patch(`/brands/${editingBrand.Id || editingBrand._id || editingBrand.id}`, data)
+      } else {
+        await api.post('/brands', data)
+      }
+      setShowModal(false)
+      setEditingBrand(null)
+      loadBrands()
+    } catch (err) {
+      console.error('Failed to save brand:', err)
+    }
+  }
+
+  const confirmDelete = async () => {
+    if (!brandToDelete) return
+    try {
+      await api.delete(`/brands/${brandToDelete.Id || brandToDelete._id || brandToDelete.id}`)
+      setBrandToDelete(null)
+      setShowDeleteModal(false)
+      loadBrands()
+    } catch (err) {
+      console.error('Failed to delete brand:', err)
+    }
+  }
+
+  const handleLogoUpload = async (brand, file) => {
+    const brandId = brand.Id || brand._id || brand.id
+    setUploading(true)
+    try {
+      const formData = new FormData()
+      formData.append('file', file)
+      const res = await fetch(`${API_BASE}/brands/${brandId}/logo`, {
+        method: 'POST',
+        body: formData,
+        credentials: 'include',
+      })
+      if (!res.ok) throw new Error('Upload failed')
+      loadBrands()
+    } catch (err) {
+      console.error('Failed to upload logo:', err)
+    } finally {
+      setUploading(false)
+    }
+  }
+
+  const getBrandId = (brand) => brand.Id || brand._id || brand.id
+
+  if (loading) {
+    return (
+      <div className="space-y-6">
+        <div className="h-12 bg-surface-tertiary rounded-xl animate-pulse"></div>
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+          {[...Array(3)].map((_, i) => <SkeletonCard key={i} />)}
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-6 animate-fade-in">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-bold text-text-primary flex items-center gap-3">
+            <Tag className="w-7 h-7 text-brand-primary" />
+            {t('brands.title')}
+          </h1>
+          <p className="text-sm text-text-tertiary mt-1">{t('brands.manageBrands')}</p>
+        </div>
+        {isSuperadminOrManager && (
+          <button
+            onClick={openNewBrand}
+            className="flex items-center gap-2 px-4 py-2.5 bg-brand-primary text-white rounded-lg text-sm font-medium hover:bg-brand-primary-light shadow-sm transition-colors"
+          >
+            <Plus className="w-4 h-4" />
+            {t('brands.addBrand')}
+          </button>
+        )}
+      </div>
+
+      {/* Brand Cards Grid */}
+      {brands.length === 0 ? (
+        <div className="bg-white rounded-xl border border-border py-16 text-center">
+          <Tag className="w-12 h-12 text-text-quaternary mx-auto mb-3" />
+          <p className="text-sm text-text-tertiary">{t('brands.noBrands')}</p>
+        </div>
+      ) : (
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 stagger-children">
+          {brands.map(brand => {
+            const displayName = lang === 'ar' && brand.name_ar ? brand.name_ar : brand.name
+            return (
+              <div
+                key={getBrandId(brand)}
+                className={`bg-white rounded-xl border border-border overflow-hidden hover:shadow-md transition-all ${isSuperadminOrManager ? 'cursor-pointer' : ''}`}
+                onClick={() => isSuperadminOrManager && openEditBrand(brand)}
+              >
+                {/* Logo area */}
+                <div className="h-32 bg-surface-secondary flex items-center justify-center relative">
+                  {brand.logo ? (
+                    <img
+                      src={`${API_BASE}/uploads/${brand.logo}`}
+                      alt={displayName}
+                      className="w-full h-full object-contain p-4"
+                    />
+                  ) : (
+                    <div className="text-4xl">
+                      {brand.icon || <Image className="w-12 h-12 text-text-quaternary" />}
+                    </div>
+                  )}
+                  {isSuperadminOrManager && (
+                    <div className="absolute top-2 right-2 flex gap-1" onClick={e => e.stopPropagation()}>
+                      <button
+                        onClick={() => openEditBrand(brand)}
+                        className="p-1.5 bg-white/90 hover:bg-white rounded-lg text-text-tertiary hover:text-text-primary shadow-sm"
+                        title={t('common.edit')}
+                      >
+                        <Edit2 className="w-3.5 h-3.5" />
+                      </button>
+                      <button
+                        onClick={() => { setBrandToDelete(brand); setShowDeleteModal(true) }}
+                        className="p-1.5 bg-white/90 hover:bg-white rounded-lg text-text-tertiary hover:text-red-500 shadow-sm"
+                        title={t('common.delete')}
+                      >
+                        <Trash2 className="w-3.5 h-3.5" />
+                      </button>
+                    </div>
+                  )}
+                </div>
+
+                {/* Card body */}
+                <div className="p-4">
+                  <div className="flex items-center gap-2 mb-1">
+                    {brand.icon && <span className="text-lg">{brand.icon}</span>}
+                    <h3 className="text-sm font-semibold text-text-primary truncate">{displayName}</h3>
+                  </div>
+                  <div className="flex items-center gap-3 text-[11px] text-text-tertiary">
+                    {brand.name && <span>EN: {brand.name}</span>}
+                    {brand.name_ar && <span>AR: {brand.name_ar}</span>}
+                    <span>Priority: {brand.priority ?? '—'}</span>
+                  </div>
+                </div>
+              </div>
+            )
+          })}
+        </div>
+      )}
+
+      {/* Create/Edit Modal */}
+      <Modal
+        isOpen={showModal}
+        onClose={() => { setShowModal(false); setEditingBrand(null) }}
+        title={editingBrand ? t('brands.editBrand') : t('brands.addBrand')}
+      >
+        <div className="space-y-4">
+          <div>
+            <label className="block text-sm font-medium text-text-primary mb-1">{t('brands.brandName')} *</label>
+            <input
+              type="text"
+              value={brandForm.name}
+              onChange={e => setBrandForm(f => ({ ...f, name: e.target.value }))}
+              className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary"
+              placeholder="Brand name in English"
+              dir="ltr"
+            />
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-text-primary mb-1">{t('brands.brandNameAr')}</label>
+            <input
+              type="text"
+              value={brandForm.name_ar}
+              onChange={e => setBrandForm(f => ({ ...f, name_ar: e.target.value }))}
+              className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary"
+              placeholder="اسم العلامة بالعربي"
+              dir="rtl"
+            />
+          </div>
+          <div className="grid grid-cols-2 gap-4">
+            <div>
+              <label className="block text-sm font-medium text-text-primary mb-1">{t('brands.brandPriority')}</label>
+              <input
+                type="number"
+                value={brandForm.priority}
+                onChange={e => setBrandForm(f => ({ ...f, priority: e.target.value }))}
+                min="1"
+                max="10"
+                className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary"
+              />
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-text-primary mb-1">{t('brands.brandIcon')}</label>
+              <input
+                type="text"
+                value={brandForm.icon}
+                onChange={e => setBrandForm(f => ({ ...f, icon: e.target.value }))}
+                className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary"
+                placeholder="emoji"
+              />
+            </div>
+          </div>
+
+          {/* Logo upload — only for existing brands */}
+          {editingBrand && (
+            <div>
+              <label className="block text-sm font-medium text-text-primary mb-1">{t('brands.logo')}</label>
+              {editingBrand.logo && (
+                <div className="mb-2 p-2 bg-surface-secondary rounded-lg inline-block">
+                  <img
+                    src={`${API_BASE}/uploads/${editingBrand.logo}`}
+                    alt="Logo"
+                    className="h-16 object-contain"
+                  />
+                </div>
+              )}
+              <div className="flex items-center gap-2">
+                <input
+                  ref={fileInputRef}
+                  type="file"
+                  accept="image/*"
+                  className="hidden"
+                  onChange={e => {
+                    const file = e.target.files?.[0]
+                    if (file) handleLogoUpload(editingBrand, file)
+                    e.target.value = ''
+                  }}
+                />
+                <button
+                  type="button"
+                  onClick={() => fileInputRef.current?.click()}
+                  disabled={uploading}
+                  className="flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium border border-border rounded-lg hover:bg-surface-secondary transition-colors disabled:opacity-50"
+                >
+                  <Upload className="w-3.5 h-3.5" />
+                  {uploading ? t('common.loading') : editingBrand.logo ? t('brands.changeLogo') : t('brands.uploadLogo')}
+                </button>
+              </div>
+            </div>
+          )}
+
+          <div className="flex items-center justify-end gap-3 pt-4 border-t border-border">
+            <button
+              onClick={() => { setShowModal(false); setEditingBrand(null) }}
+              className="px-4 py-2 text-sm font-medium text-text-secondary hover:bg-surface-tertiary rounded-lg"
+            >
+              {t('common.cancel')}
+            </button>
+            <button
+              onClick={saveBrand}
+              disabled={!brandForm.name}
+              className="px-5 py-2 bg-brand-primary text-white rounded-lg text-sm font-medium hover:bg-brand-primary-light disabled:opacity-50 disabled:cursor-not-allowed shadow-sm"
+            >
+              {t('common.save')}
+            </button>
+          </div>
+        </div>
+      </Modal>
+
+      {/* Delete Confirmation */}
+      <Modal
+        isOpen={showDeleteModal}
+        onClose={() => { setShowDeleteModal(false); setBrandToDelete(null) }}
+        title={t('brands.deleteBrand')}
+        isConfirm
+        danger
+        confirmText={t('common.delete')}
+        onConfirm={confirmDelete}
+      >
+        {t('brands.deleteBrandConfirm')}
+      </Modal>
+    </div>
+  )
+}

client/src/pages/Budgets.jsx

@@ -0,0 +1,487 @@
+import { useState, useEffect, useContext } from 'react'
+import { Plus, DollarSign, Edit2, Trash2, Search, CreditCard, User, Building2, TrendingUp, TrendingDown } from 'lucide-react'
+import { format } from 'date-fns'
+import { AppContext } from '../App'
+import { api } from '../utils/api'
+import { useAuth } from '../contexts/AuthContext'
+import { useLanguage } from '../i18n/LanguageContext'
+import Modal from '../components/Modal'
+import StatusBadge from '../components/StatusBadge'
+import { SkeletonTable } from '../components/SkeletonLoader'
+
+const CATEGORIES = [
+  { value: 'marketing', label: 'Marketing' },
+  { value: 'production', label: 'Production' },
+  { value: 'equipment', label: 'Equipment' },
+  { value: 'travel', label: 'Travel' },
+  { value: 'other', label: 'Other' },
+]
+
+const DESTINATIONS = [
+  { value: 'company_card', labelKey: 'budgets.companyCard', icon: CreditCard },
+  { value: 'personal_account', labelKey: 'budgets.personalAccount', icon: User },
+  { value: 'corporate_account', labelKey: 'budgets.corporateAccount', icon: Building2 },
+  { value: 'other', labelKey: 'budgets.otherDest', icon: DollarSign },
+]
+
+const EMPTY_ENTRY = {
+  label: '', amount: '', source: '', destination: '', campaign_id: '', project_id: '',
+  category: 'marketing', date_received: new Date().toISOString().slice(0, 10), notes: '',
+  type: 'income',
+}
+
+export default function Budgets() {
+  const { t, currencySymbol } = useLanguage()
+  const { brands } = useContext(AppContext)
+  const { permissions } = useAuth()
+  const canManageFinance = permissions?.canManageFinance
+  const [entries, setEntries] = useState([])
+  const [campaigns, setCampaigns] = useState([])
+  const [projects, setProjects] = useState([])
+  const [loading, setLoading] = useState(true)
+  const [showModal, setShowModal] = useState(false)
+  const [editing, setEditing] = useState(null)
+  const [form, setForm] = useState(EMPTY_ENTRY)
+  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false)
+  const [entryToDelete, setEntryToDelete] = useState(null)
+  const [searchQuery, setSearchQuery] = useState('')
+  const [filterCategory, setFilterCategory] = useState('')
+  const [filterDestination, setFilterDestination] = useState('')
+  const [filterType, setFilterType] = useState('')
+
+  useEffect(() => { loadAll() }, [])
+
+  const loadAll = async () => {
+    try {
+      const [ent, camp, proj] = await Promise.all([
+        api.get('/budget'),
+        api.get('/campaigns'),
+        api.get('/projects'),
+      ])
+      setEntries(ent.data || ent || [])
+      setCampaigns(camp.data || camp || [])
+      setProjects(proj.data || proj || [])
+    } catch (err) {
+      console.error('Failed to load budgets:', err)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const handleSave = async () => {
+    try {
+      const data = {
+        label: form.label,
+        amount: Number(form.amount),
+        source: form.source || null,
+        destination: form.destination || null,
+        campaign_id: form.campaign_id ? Number(form.campaign_id) : null,
+        project_id: form.project_id ? Number(form.project_id) : null,
+        category: form.category,
+        date_received: form.date_received,
+        notes: form.notes,
+        type: form.type || 'income',
+      }
+      if (editing) {
+        await api.patch(`/budget/${editing._id || editing.id}`, data)
+      } else {
+        await api.post('/budget', data)
+      }
+      setShowModal(false)
+      setEditing(null)
+      setForm(EMPTY_ENTRY)
+      loadAll()
+    } catch (err) {
+      console.error('Save failed:', err)
+    }
+  }
+
+  const openEdit = (entry) => {
+    setEditing(entry)
+    setForm({
+      label: entry.label || '',
+      amount: entry.amount || '',
+      source: entry.source || '',
+      destination: entry.destination || '',
+      campaign_id: entry.campaignId || entry.campaign_id || '',
+      project_id: entry.project_id || '',
+      category: entry.category || 'marketing',
+      date_received: entry.dateReceived || entry.date_received || '',
+      notes: entry.notes || '',
+      type: entry.type || 'income',
+    })
+    setShowModal(true)
+  }
+
+  const handleDelete = async (id) => {
+    setEntryToDelete(id)
+    setShowDeleteConfirm(true)
+  }
+
+  const confirmDelete = async () => {
+    if (!entryToDelete) return
+    await api.delete(`/budget/${entryToDelete}`)
+    setEntryToDelete(null)
+    loadAll()
+  }
+
+  const filteredEntries = entries.filter(e => {
+    if (searchQuery) {
+      const q = searchQuery.toLowerCase()
+      if (!(e.label || '').toLowerCase().includes(q) &&
+          !(e.source || '').toLowerCase().includes(q) &&
+          !(e.campaign_name || '').toLowerCase().includes(q) &&
+          !(e.project_name || '').toLowerCase().includes(q) &&
+          !(e.notes || '').toLowerCase().includes(q)) return false
+    }
+    if (filterCategory && e.category !== filterCategory) return false
+    if (filterDestination && e.destination !== filterDestination) return false
+    if (filterType && (e.type || 'income') !== filterType) return false
+    return true
+  })
+
+  const totalIncome = filteredEntries.filter(e => (e.type || 'income') === 'income').reduce((sum, e) => sum + (e.amount || 0), 0)
+  const totalExpenseAmt = filteredEntries.filter(e => e.type === 'expense').reduce((sum, e) => sum + (e.amount || 0), 0)
+  const totalFiltered = totalIncome - totalExpenseAmt
+
+  const destConfig = (val) => DESTINATIONS.find(d => d.value === val)
+
+  if (loading) {
+    return <SkeletonTable rows={6} cols={6} />
+  }
+
+  return (
+    <div className="space-y-6 animate-fade-in">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-bold text-text-primary">{t('budgets.title')}</h1>
+          <p className="text-sm text-text-tertiary mt-0.5">{t('budgets.subtitle')}</p>
+        </div>
+        {canManageFinance && (
+          <button
+            onClick={() => { setEditing(null); setForm(EMPTY_ENTRY); setShowModal(true) }}
+            className="flex items-center gap-1.5 px-4 py-2 bg-brand-primary text-white rounded-lg text-sm font-medium hover:bg-brand-primary-light shadow-sm"
+          >
+            <Plus className="w-4 h-4" /> {t('budgets.addEntry')}
+          </button>
+        )}
+      </div>
+
+      {/* Filters */}
+      <div className="flex items-center gap-3 flex-wrap">
+        <div className="relative flex-1 min-w-[200px] max-w-xs">
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-text-tertiary" />
+          <input
+            type="text"
+            value={searchQuery}
+            onChange={e => setSearchQuery(e.target.value)}
+            placeholder={t('budgets.searchEntries')}
+            className="w-full pl-9 pr-3 py-2 text-sm border border-border rounded-lg bg-white focus:outline-none focus:ring-2 focus:ring-brand-primary/20"
+          />
+        </div>
+        <select
+          value={filterCategory}
+          onChange={e => setFilterCategory(e.target.value)}
+          className="px-3 py-2 text-sm border border-border rounded-lg bg-white focus:outline-none"
+        >
+          <option value="">{t('budgets.allCategories')}</option>
+          {CATEGORIES.map(c => <option key={c.value} value={c.value}>{c.label}</option>)}
+        </select>
+        <select
+          value={filterDestination}
+          onChange={e => setFilterDestination(e.target.value)}
+          className="px-3 py-2 text-sm border border-border rounded-lg bg-white focus:outline-none"
+        >
+          <option value="">{t('budgets.allDestinations')}</option>
+          {DESTINATIONS.map(d => <option key={d.value} value={d.value}>{t(d.labelKey)}</option>)}
+        </select>
+
+        {/* Type filter */}
+        <div className="flex rounded-lg border border-border overflow-hidden">
+          {[{ value: '', label: t('budgets.allTypes') }, { value: 'income', label: t('budgets.income') }, { value: 'expense', label: t('budgets.expense') }].map(opt => (
+            <button
+              key={opt.value}
+              onClick={() => setFilterType(opt.value)}
+              className={`px-3 py-1.5 text-xs font-medium transition-colors ${
+                filterType === opt.value
+                  ? opt.value === 'expense' ? 'bg-red-500 text-white' : opt.value === 'income' ? 'bg-emerald-500 text-white' : 'bg-brand-primary text-white'
+                  : 'bg-white text-text-secondary hover:bg-surface-secondary'
+              }`}
+            >
+              {opt.label}
+            </button>
+          ))}
+        </div>
+
+        {filteredEntries.length > 0 && (
+          <div className="ml-auto flex items-center gap-3 text-sm text-text-tertiary">
+            <span>{filteredEntries.length} {filteredEntries.length === 1 ? 'entry' : 'entries'}</span>
+            <span className="text-emerald-600 font-semibold">+{totalIncome.toLocaleString()}</span>
+            {totalExpenseAmt > 0 && <span className="text-red-500 font-semibold">-{totalExpenseAmt.toLocaleString()}</span>}
+            <span className="font-bold text-text-primary">= {totalFiltered.toLocaleString()} {currencySymbol}</span>
+          </div>
+        )}
+      </div>
+
+      {/* Entries table */}
+      <div className="section-card">
+        {filteredEntries.length === 0 ? (
+          <div className="py-16 text-center text-sm text-text-tertiary">
+            {entries.length === 0 ? t('budgets.noEntries') : t('budgets.noMatch')}
+          </div>
+        ) : (
+          <div className="overflow-x-auto">
+            <table className="w-full text-sm">
+              <thead>
+                <tr className="border-b border-border bg-surface-secondary">
+                  <th className="px-4 py-3 text-left text-xs font-medium text-text-tertiary">{t('budgets.label')}</th>
+                  <th className="px-4 py-3 text-left text-xs font-medium text-text-tertiary">{t('budgets.source')}</th>
+                  <th className="px-4 py-3 text-left text-xs font-medium text-text-tertiary">{t('budgets.destination')}</th>
+                  <th className="px-4 py-3 text-left text-xs font-medium text-text-tertiary">{t('budgets.linkedTo')}</th>
+                  <th className="px-4 py-3 text-left text-xs font-medium text-text-tertiary">{t('budgets.date')}</th>
+                  <th className="px-4 py-3 text-right text-xs font-medium text-text-tertiary">{t('budgets.amount')}</th>
+                  {canManageFinance && <th className="px-4 py-3 w-20" />}
+                </tr>
+              </thead>
+              <tbody className="divide-y divide-border-light">
+                {filteredEntries.map(entry => {
+                  const dest = destConfig(entry.destination)
+                  const DestIcon = dest?.icon || DollarSign
+                  return (
+                    <tr key={entry.id || entry._id} className="hover:bg-surface-secondary">
+                      <td className="px-4 py-3">
+                        <div className="font-medium text-text-primary">{entry.label}</div>
+                        <div className="flex items-center gap-1.5 mt-0.5">
+                          <span className="text-[10px] px-1.5 py-0.5 rounded bg-surface-tertiary text-text-tertiary capitalize">{entry.category}</span>
+                          <span className={`text-[10px] px-1.5 py-0.5 rounded-full font-medium ${
+                            (entry.type || 'income') === 'expense'
+                              ? 'bg-red-50 text-red-600 border border-red-100'
+                              : 'bg-emerald-50 text-emerald-600 border border-emerald-100'
+                          }`}>
+                            {(entry.type || 'income') === 'expense' ? t('budgets.expense') : t('budgets.income')}
+                          </span>
+                        </div>
+                        {entry.notes && <p className="text-xs text-text-tertiary mt-0.5 truncate max-w-[200px]">{entry.notes}</p>}
+                      </td>
+                      <td className="px-4 py-3 text-text-secondary">{entry.source || <span className="text-text-tertiary">--</span>}</td>
+                      <td className="px-4 py-3">
+                        {entry.destination ? (
+                          <span className="inline-flex items-center gap-1.5 text-xs">
+                            <DestIcon className="w-3 h-3 text-text-tertiary" />
+                            <span className="text-text-secondary">{t(dest?.labelKey || 'budgets.otherDest')}</span>
+                          </span>
+                        ) : <span className="text-text-tertiary">--</span>}
+                      </td>
+                      <td className="px-4 py-3">
+                        {entry.campaign_name && (
+                          <span className="text-[10px] px-1.5 py-0.5 rounded-full bg-blue-50 text-blue-600 font-medium border border-blue-100">
+                            {entry.campaign_name}
+                          </span>
+                        )}
+                        {entry.project_name && (
+                          <span className="text-[10px] px-1.5 py-0.5 rounded-full bg-purple-50 text-purple-600 font-medium border border-purple-100">
+                            {entry.project_name}
+                          </span>
+                        )}
+                        {!entry.campaign_name && !entry.project_name && <span className="text-text-tertiary text-xs">{t('budgets.general')}</span>}
+                      </td>
+                      <td className="px-4 py-3 text-text-secondary whitespace-nowrap">
+                        {entry.date_received ? format(new Date(entry.date_received), 'MMM d, yyyy') : '--'}
+                      </td>
+                      <td className={`px-4 py-3 text-right font-semibold whitespace-nowrap ${
+                        (entry.type || 'income') === 'expense' ? 'text-red-500' : 'text-emerald-600'
+                      }`}>
+                        {(entry.type || 'income') === 'expense' ? '-' : '+'}{Number(entry.amount).toLocaleString()} {currencySymbol}
+                      </td>
+                      {canManageFinance && (
+                        <td className="px-4 py-3">
+                          <div className="flex items-center gap-1">
+                            <button onClick={() => openEdit(entry)} className="p-1.5 hover:bg-surface-tertiary rounded-lg text-text-tertiary hover:text-text-primary">
+                              <Edit2 className="w-3.5 h-3.5" />
+                            </button>
+                            <button onClick={() => handleDelete(entry.id || entry._id)} className="p-1.5 hover:bg-red-50 rounded-lg text-text-tertiary hover:text-red-500">
+                              <Trash2 className="w-3.5 h-3.5" />
+                            </button>
+                          </div>
+                        </td>
+                      )}
+                    </tr>
+                  )
+                })}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </div>
+
+      {/* Add/Edit Modal */}
+      <Modal
+        isOpen={showModal}
+        onClose={() => { setShowModal(false); setEditing(null) }}
+        title={editing ? t('budgets.editEntry') : t('budgets.addEntry')}
+      >
+        <div className="space-y-4">
+          {/* Income / Expense toggle */}
+          <div>
+            <label className="block text-sm font-medium text-text-primary mb-1.5">{t('budgets.type')}</label>
+            <div className="flex gap-2">
+              <button
+                type="button"
+                onClick={() => setForm(f => ({ ...f, type: 'income' }))}
+                className={`flex-1 flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg text-sm font-medium border-2 transition-all ${
+                  form.type === 'income'
+                    ? 'border-emerald-500 bg-emerald-50 text-emerald-700'
+                    : 'border-border bg-white text-text-secondary hover:bg-surface-secondary'
+                }`}
+              >
+                <TrendingUp className="w-4 h-4" />
+                {t('budgets.income')}
+              </button>
+              <button
+                type="button"
+                onClick={() => setForm(f => ({ ...f, type: 'expense' }))}
+                className={`flex-1 flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg text-sm font-medium border-2 transition-all ${
+                  form.type === 'expense'
+                    ? 'border-red-500 bg-red-50 text-red-700'
+                    : 'border-border bg-white text-text-secondary hover:bg-surface-secondary'
+                }`}
+              >
+                <TrendingDown className="w-4 h-4" />
+                {t('budgets.expense')}
+              </button>
+            </div>
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium text-text-primary mb-1">{t('budgets.label')} *</label>
+            <input
+              type="text"
+              value={form.label}
+              onChange={e => setForm(f => ({ ...f, label: e.target.value }))}
+              className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary"
+              placeholder={t('budgets.labelPlaceholder')}
+            />
+          </div>
+
+          <div className="grid grid-cols-2 gap-4">
+            <div>
+              <label className="block text-sm font-medium text-text-primary mb-1">{t('budgets.amount')} ({currencySymbol}) *</label>
+              <input
+                type="number"
+                value={form.amount}
+                onChange={e => setForm(f => ({ ...f, amount: e.target.value }))}
+                className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary"
+                placeholder="50000"
+              />
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-text-primary mb-1">{form.type === 'expense' ? t('budgets.dateExpensed') : t('budgets.dateReceived')} *</label>
+              <input
+                type="date"
+                value={form.date_received}
+                onChange={e => setForm(f => ({ ...f, date_received: e.target.value }))}
+                className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary"
+              />
+            </div>
+          </div>
+
+          <div className="grid grid-cols-2 gap-4">
+            <div>
+              <label className="block text-sm font-medium text-text-primary mb-1">{t('budgets.source')}</label>
+              <input
+                type="text"
+                value={form.source}
+                onChange={e => setForm(f => ({ ...f, source: e.target.value }))}
+                className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none"
+                placeholder={t('budgets.sourcePlaceholder')}
+              />
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-text-primary mb-1">{t('budgets.destination')}</label>
+              <select
+                value={form.destination}
+                onChange={e => setForm(f => ({ ...f, destination: e.target.value }))}
+                className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none"
+              >
+                <option value="">{t('budgets.selectDestination')}</option>
+                {DESTINATIONS.map(d => <option key={d.value} value={d.value}>{t(d.labelKey)}</option>)}
+              </select>
+            </div>
+          </div>
+
+          <div className="grid grid-cols-2 gap-4">
+            <div>
+              <label className="block text-sm font-medium text-text-primary mb-1">{t('budgets.category')}</label>
+              <select
+                value={form.category}
+                onChange={e => setForm(f => ({ ...f, category: e.target.value }))}
+                className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none"
+              >
+                {CATEGORIES.map(c => <option key={c.value} value={c.value}>{c.label}</option>)}
+              </select>
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-text-primary mb-1">{t('budgets.linkedTo')}</label>
+              <div className="flex gap-2">
+                <select
+                  value={form.campaign_id}
+                  onChange={e => setForm(f => ({ ...f, campaign_id: e.target.value, project_id: '' }))}
+                  disabled={!!form.project_id}
+                  className="flex-1 px-3 py-2 text-sm border border-border rounded-lg focus:outline-none disabled:opacity-50 disabled:bg-surface-secondary"
+                >
+                  <option value="">{t('budgets.noCampaign')}</option>
+                  {campaigns.map(c => <option key={c._id || c.id} value={c._id || c.id}>{c.name}</option>)}
+                </select>
+                <select
+                  value={form.project_id}
+                  onChange={e => setForm(f => ({ ...f, project_id: e.target.value, campaign_id: '' }))}
+                  disabled={!!form.campaign_id}
+                  className="flex-1 px-3 py-2 text-sm border border-border rounded-lg focus:outline-none disabled:opacity-50 disabled:bg-surface-secondary"
+                >
+                  <option value="">{t('budgets.noProject')}</option>
+                  {projects.map(p => <option key={p._id || p.id} value={p._id || p.id}>{p.name}</option>)}
+                </select>
+              </div>
+            </div>
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium text-text-primary mb-1">{t('budgets.notes')}</label>
+            <textarea
+              value={form.notes}
+              onChange={e => setForm(f => ({ ...f, notes: e.target.value }))}
+              rows={2}
+              className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none resize-none"
+              placeholder={t('budgets.notesPlaceholder')}
+            />
+          </div>
+
+          <div className="flex justify-end gap-3 pt-4 border-t border-border">
+            <button onClick={() => setShowModal(false)} className="px-4 py-2 text-sm text-text-secondary hover:bg-surface-tertiary rounded-lg">{t('common.cancel')}</button>
+            <button
+              onClick={handleSave}
+              disabled={!form.label || !form.amount || !form.date_received}
+              className="px-5 py-2 bg-brand-primary text-white rounded-lg text-sm font-medium hover:bg-brand-primary-light disabled:opacity-50 disabled:cursor-not-allowed shadow-sm"
+            >
+              {editing ? t('common.save') : t('budgets.addEntry')}
+            </button>
+          </div>
+        </div>
+      </Modal>
+
+      {/* Delete confirmation */}
+      <Modal
+        isOpen={showDeleteConfirm}
+        onClose={() => { setShowDeleteConfirm(false); setEntryToDelete(null) }}
+        title={t('budgets.deleteEntry')}
+        isConfirm
+        danger
+        confirmText={t('common.delete')}
+        onConfirm={confirmDelete}
+      >
+        {t('budgets.deleteConfirm')}
+      </Modal>
+    </div>
+  )
+}

client/src/pages/CampaignDetail.jsx

@@ -1,14 +1,20 @@
 import { useState, useEffect, useContext } from 'react'
 import { useParams, useNavigate } from 'react-router-dom'
-import { ArrowLeft, Plus, Edit2, Trash2, DollarSign, Eye, MousePointer, Target, TrendingUp, FileText, Megaphone, Search, Globe, Pencil } from 'lucide-react'
+import { ArrowLeft, Plus, Edit2, Trash2, DollarSign, Eye, MousePointer, Target, TrendingUp, FileText, Megaphone, Search, Globe, Pencil, Users, X, UserPlus, MessageCircle, Settings } from 'lucide-react'
 import { format } from 'date-fns'
 import { AppContext } from '../App'
 import { useAuth } from '../contexts/AuthContext'
-import { api, PLATFORMS } from '../utils/api'
+import { useLanguage } from '../i18n/LanguageContext'
+import { api, PLATFORMS, getInitials } from '../utils/api'
 import PlatformIcon, { PlatformIcons } from '../components/PlatformIcon'
 import StatusBadge from '../components/StatusBadge'
 import BrandBadge from '../components/BrandBadge'
 import Modal from '../components/Modal'
+import BudgetBar from '../components/BudgetBar'
+import CommentsSection from '../components/CommentsSection'
+import CampaignDetailPanel from '../components/CampaignDetailPanel'
+import TrackDetailPanel from '../components/TrackDetailPanel'
+import PostDetailPanel from '../components/PostDetailPanel'
 
 const TRACK_TYPES = {
   organic_social: { label: 'Organic Social', icon: Megaphone, color: 'text-green-600 bg-green-50', hasBudget: false },
@@ -20,31 +26,6 @@ const TRACK_TYPES = {
 
 const TRACK_STATUSES = ['planned', 'active', 'paused', 'completed']
 
-const EMPTY_TRACK = {
-  name: '', type: 'organic_social', platform: '', budget_allocated: '', status: 'planned', notes: '',
-}
-
-const EMPTY_METRICS = {
-  budget_spent: '', revenue: '', impressions: '', clicks: '', conversions: '', notes: '',
-}
-
-function BudgetBar({ budget, spent }) {
-  if (!budget || budget <= 0) return null
-  const pct = Math.min((spent / budget) * 100, 100)
-  const color = pct > 90 ? 'bg-red-500' : pct > 70 ? 'bg-amber-500' : 'bg-emerald-500'
-  return (
-    <div className="w-full">
-      <div className="flex justify-between text-[10px] text-text-tertiary mb-0.5">
-        <span>{(spent || 0).toLocaleString()} spent</span>
-        <span>{budget.toLocaleString()} SAR</span>
-      </div>
-      <div className="h-2 bg-surface-tertiary rounded-full overflow-hidden">
-        <div className={`h-full ${color} rounded-full transition-all`} style={{ width: `${pct}%` }} />
-      </div>
-    </div>
-  )
-}
-
 function MetricBox({ label, value, icon: Icon, color = 'text-text-primary' }) {
   return (
     <div className="text-center">
@@ -58,36 +39,53 @@ function MetricBox({ label, value, icon: Icon, color = 'text-text-primary' }) {
 export default function CampaignDetail() {
   const { id } = useParams()
   const navigate = useNavigate()
-  const { brands } = useContext(AppContext)
-  const { permissions } = useAuth()
-  const canManage = permissions?.canEditCampaigns
+  const { brands, getBrandName, teamMembers } = useContext(AppContext)
+  const { lang, currencySymbol } = useLanguage()
+  const { permissions, user } = useAuth()
+  const isSuperadmin = user?.role === 'superadmin'
   const [campaign, setCampaign] = useState(null)
   const [tracks, setTracks] = useState([])
   const [posts, setPosts] = useState([])
+  const [assignments, setAssignments] = useState([])
+  const [allUsers, setAllUsers] = useState([])
   const [loading, setLoading] = useState(true)
-  const [showTrackModal, setShowTrackModal] = useState(false)
-  const [editingTrack, setEditingTrack] = useState(null)
-  const [trackForm, setTrackForm] = useState(EMPTY_TRACK)
-  const [showMetricsModal, setShowMetricsModal] = useState(false)
-  const [metricsTrack, setMetricsTrack] = useState(null)
-  const [metricsForm, setMetricsForm] = useState(EMPTY_METRICS)
+  const [showAssignModal, setShowAssignModal] = useState(false)
+  const [selectedUserIds, setSelectedUserIds] = useState([])
+  const canSetBudget = permissions?.canSetBudget
+  const [editingBudget, setEditingBudget] = useState(false)
+  const [budgetValue, setBudgetValue] = useState('')
   const [showDeleteConfirm, setShowDeleteConfirm] = useState(false)
   const [trackToDelete, setTrackToDelete] = useState(null)
+  const [selectedPost, setSelectedPost] = useState(null)
+  const [showDiscussion, setShowDiscussion] = useState(false)
+  const [allCampaigns, setAllCampaigns] = useState([])
+
+  // Panel state
+  const [panelCampaign, setPanelCampaign] = useState(null)
+  const [panelTrack, setPanelTrack] = useState(null)
+  const [trackScrollToMetrics, setTrackScrollToMetrics] = useState(false)
+
+  const isCreator = campaign?.createdByUserId === user?.id || campaign?.created_by_user_id === user?.id
+  const canManage = isSuperadmin || (permissions?.canEditCampaigns && isCreator)
+  const canAssign = isSuperadmin || (permissions?.canAssignCampaigns && isCreator)
 
   useEffect(() => { loadAll() }, [id])
+  useEffect(() => {
+    api.get('/campaigns').then(r => setAllCampaigns(Array.isArray(r) ? r : (r.data || []))).catch(() => {})
+  }, [])
 
   const loadAll = async () => {
     try {
-      const [campRes, tracksRes, postsRes] = await Promise.all([
-        api.get(`/campaigns`),
+      const [campRes, tracksRes, postsRes, assignRes] = await Promise.all([
+        api.get(`/campaigns/${id}`),
         api.get(`/campaigns/${id}/tracks`),
         api.get(`/campaigns/${id}/posts`),
+        api.get(`/campaigns/${id}/assignments`),
       ])
-      const allCampaigns = campRes.data || campRes || []
-      const found = allCampaigns.find(c => String(c.id) === String(id) || String(c._id) === String(id))
-      setCampaign(found || null)
+      setCampaign(campRes.data || campRes || null)
       setTracks(tracksRes.data || tracksRes || [])
       setPosts(postsRes.data || postsRes || [])
+      setAssignments(Array.isArray(assignRes) ? assignRes : (assignRes.data || []))
     } catch (err) {
       console.error('Failed to load campaign:', err)
     } finally {
@@ -95,30 +93,91 @@ export default function CampaignDetail() {
     }
   }
 
-  const saveTrack = async () => {
+  const loadUsersForAssign = async () => {
     try {
-      const data = {
-        name: trackForm.name,
-        type: trackForm.type,
-        platform: trackForm.platform || null,
-        budget_allocated: trackForm.budget_allocated ? Number(trackForm.budget_allocated) : 0,
-        status: trackForm.status,
-        notes: trackForm.notes,
+      const users = await api.get('/users/team?all=true')
+      setAllUsers(Array.isArray(users) ? users : (users.data || []))
+    } catch (err) {
+      console.error('Failed to load users:', err)
+    }
+  }
+
+  const openAssignModal = () => {
+    loadUsersForAssign()
+    setSelectedUserIds(assignments.map(a => a.user_id))
+    setShowAssignModal(true)
+  }
+
+  const saveAssignments = async () => {
+    try {
+      const currentIds = assignments.map(a => a.user_id)
+      const toAdd = selectedUserIds.filter(id => !currentIds.includes(id))
+      const toRemove = currentIds.filter(id => !selectedUserIds.includes(id))
+
+      if (toAdd.length > 0) {
+        await api.post(`/campaigns/${id}/assignments`, { user_ids: toAdd })
       }
-      if (editingTrack) {
-        await api.patch(`/tracks/${editingTrack.id}`, data)
-      } else {
-        await api.post(`/campaigns/${id}/tracks`, data)
+      for (const uid of toRemove) {
+        await api.delete(`/campaigns/${id}/assignments/${uid}`)
       }
-      setShowTrackModal(false)
-      setEditingTrack(null)
-      setTrackForm(EMPTY_TRACK)
+      setShowAssignModal(false)
       loadAll()
     } catch (err) {
-      console.error('Save track failed:', err)
+      console.error('Failed to save assignments:', err)
     }
   }
 
+  const removeAssignment = async (userId) => {
+    try {
+      await api.delete(`/campaigns/${id}/assignments/${userId}`)
+      loadAll()
+    } catch (err) {
+      console.error('Failed to remove assignment:', err)
+    }
+  }
+
+  // Panel handlers
+  const handleCampaignPanelSave = async (campaignId, data) => {
+    await api.patch(`/campaigns/${campaignId}`, data)
+    loadAll()
+  }
+
+  const handleCampaignPanelDelete = async (campaignId) => {
+    await api.delete(`/campaigns/${campaignId}`)
+    navigate('/campaigns')
+  }
+
+  const handleTrackPanelSave = async (trackId, data) => {
+    if (trackId) {
+      await api.patch(`/tracks/${trackId}`, data)
+    } else {
+      await api.post(`/campaigns/${id}/tracks`, data)
+    }
+    setPanelTrack(null)
+    loadAll()
+  }
+
+  const handleTrackPanelDelete = async (trackId) => {
+    await api.delete(`/tracks/${trackId}`)
+    setPanelTrack(null)
+    loadAll()
+  }
+
+  const handlePostPanelSave = async (postId, data) => {
+    if (postId) {
+      await api.patch(`/posts/${postId}`, data)
+    } else {
+      await api.post('/posts', data)
+    }
+    loadAll()
+  }
+
+  const handlePostPanelDelete = async (postId) => {
+    await api.delete(`/posts/${postId}`)
+    setSelectedPost(null)
+    loadAll()
+  }
+
   const deleteTrack = async (trackId) => {
     setTrackToDelete(trackId)
     setShowDeleteConfirm(true)
@@ -131,52 +190,22 @@ export default function CampaignDetail() {
     loadAll()
   }
 
-  const saveMetrics = async () => {
-    try {
-      await api.patch(`/tracks/${metricsTrack.id}`, {
-        budget_spent: metricsForm.budget_spent ? Number(metricsForm.budget_spent) : 0,
-        revenue: metricsForm.revenue ? Number(metricsForm.revenue) : 0,
-        impressions: metricsForm.impressions ? Number(metricsForm.impressions) : 0,
-        clicks: metricsForm.clicks ? Number(metricsForm.clicks) : 0,
-        conversions: metricsForm.conversions ? Number(metricsForm.conversions) : 0,
-        notes: metricsForm.notes || '',
-      })
-      setShowMetricsModal(false)
-      setMetricsTrack(null)
-      loadAll()
-    } catch (err) {
-      console.error('Save metrics failed:', err)
-    }
-  }
-
-  const openEditTrack = (track) => {
-    setEditingTrack(track)
-    setTrackForm({
-      name: track.name || '',
-      type: track.type || 'organic_social',
-      platform: track.platform || '',
-      budget_allocated: track.budget_allocated || '',
-      status: track.status || 'planned',
-      notes: track.notes || '',
-    })
-    setShowTrackModal(true)
-  }
-
-  const openMetrics = (track) => {
-    setMetricsTrack(track)
-    setMetricsForm({
-      budget_spent: track.budget_spent || '',
-      revenue: track.revenue || '',
-      impressions: track.impressions || '',
-      clicks: track.clicks || '',
-      conversions: track.conversions || '',
-      notes: track.notes || '',
-    })
-    setShowMetricsModal(true)
-  }
-
   if (loading) {
-    return <div className="animate-pulse"><div className="h-64 bg-surface-tertiary rounded-xl"></div></div>
+    return (
+      <div className="space-y-6 animate-pulse">
+        <div className="flex items-start gap-4">
+          <div className="w-8 h-8 bg-surface-tertiary rounded-lg"></div>
+          <div className="flex-1">
+            <div className="h-6 bg-surface-tertiary rounded w-64 mb-2"></div>
+            <div className="h-4 bg-surface-tertiary rounded w-96 mb-2"></div>
+            <div className="h-3 bg-surface-tertiary rounded w-48"></div>
+          </div>
+        </div>
+        <div className="h-24 bg-surface-tertiary rounded-xl"></div>
+        <div className="h-48 bg-surface-tertiary rounded-xl"></div>
+        <div className="h-64 bg-surface-tertiary rounded-xl"></div>
+      </div>
+    )
   }
 
   if (!campaign) {
@@ -196,26 +225,108 @@ export default function CampaignDetail() {
   const totalRevenue = tracks.reduce((s, t) => s + (t.revenue || 0), 0)
 
   return (
-    <div className="space-y-6 animate-fade-in">
+    <div className="flex gap-6 animate-fade-in">
+      {/* Main content */}
+      <div className={`space-y-6 min-w-0 ${showDiscussion ? 'flex-1' : 'w-full'}`}>
       {/* Header */}
       <div className="flex items-start gap-4">
         <button onClick={() => navigate('/campaigns')} className="mt-1 p-1.5 hover:bg-surface-tertiary rounded-lg">
           <ArrowLeft className="w-5 h-5 text-text-secondary" />
         </button>
-        <div className="flex-1">
+        <div className="flex-1 min-w-0">
           <div className="flex items-center gap-3 mb-1">
             <h1 className="text-xl font-bold text-text-primary">{campaign.name}</h1>
             <StatusBadge status={campaign.status} />
-            {campaign.brand_name && <BrandBadge brand={campaign.brand_name} />}
+            {(campaign.brand_id || campaign.brand_name) && <BrandBadge brand={getBrandName(campaign.brand_id) || campaign.brand_name} />}
           </div>
           {campaign.description && <p className="text-sm text-text-secondary">{campaign.description}</p>}
-          <div className="flex items-center gap-4 mt-2 text-xs text-text-tertiary">
+          <div className="flex items-center gap-3 mt-2 text-xs text-text-tertiary">
             {campaign.start_date && campaign.end_date && (
               <span>{format(new Date(campaign.start_date), 'MMM d')} – {format(new Date(campaign.end_date), 'MMM d, yyyy')}</span>
             )}
-            {campaign.budget > 0 && <span>Budget: {campaign.budget.toLocaleString()} SAR</span>}
+            <span>
+              Budget: {campaign.budget > 0 ? `${campaign.budget.toLocaleString()} ${currencySymbol}` : 'Not set'}
+            </span>
+            {campaign.platforms && campaign.platforms.length > 0 && (
+              <PlatformIcons platforms={campaign.platforms} size={16} />
+            )}
           </div>
         </div>
+        {/* Action buttons */}
+        <div className="flex items-center gap-2 shrink-0">
+          <button
+            onClick={() => setShowDiscussion(prev => !prev)}
+            className={`flex items-center gap-1.5 px-3 py-2 rounded-lg text-sm font-medium transition-colors ${
+              showDiscussion
+                ? 'bg-brand-primary text-white shadow-sm'
+                : 'bg-surface-tertiary text-text-secondary hover:bg-surface-tertiary/80 hover:text-text-primary'
+            }`}
+          >
+            <MessageCircle className="w-4 h-4" />
+            Discussion
+          </button>
+          {canSetBudget && (
+            <button
+              onClick={() => { setBudgetValue(campaign.budget || ''); setEditingBudget(true) }}
+              className="flex items-center gap-1.5 px-3 py-2 bg-surface-tertiary text-text-secondary hover:bg-surface-tertiary/80 hover:text-text-primary rounded-lg text-sm font-medium transition-colors"
+            >
+              <DollarSign className="w-4 h-4" />
+              Budget
+            </button>
+          )}
+          {canManage && (
+            <button
+              onClick={() => setPanelCampaign(campaign)}
+              className="flex items-center gap-1.5 px-3 py-2 bg-brand-primary text-white rounded-lg text-sm font-medium hover:bg-brand-primary-light shadow-sm transition-colors"
+            >
+              <Settings className="w-4 h-4" />
+              Edit
+            </button>
+          )}
+        </div>
+      </div>
+
+      {/* Assigned Team */}
+      <div className="bg-white rounded-xl border border-border p-5">
+        <div className="flex items-center justify-between mb-3">
+          <h3 className="text-xs uppercase tracking-wider text-text-tertiary font-medium flex items-center gap-1.5">
+            <Users className="w-3.5 h-3.5" /> Assigned Team
+          </h3>
+          {canAssign && (
+            <button
+              onClick={openAssignModal}
+              className="flex items-center gap-1.5 px-3 py-1.5 bg-brand-primary text-white rounded-lg text-xs font-medium hover:bg-brand-primary-light"
+            >
+              <UserPlus className="w-3.5 h-3.5" /> Assign Members
+            </button>
+          )}
+        </div>
+        {assignments.length === 0 ? (
+          <p className="text-xs text-text-tertiary py-2">No team members assigned yet.</p>
+        ) : (
+          <div className="flex flex-wrap gap-2">
+            {assignments.map(a => (
+              <div key={a.user_id} className="flex items-center gap-2 bg-surface-secondary rounded-full pl-1 pr-2 py-1">
+                <div className="w-6 h-6 rounded-full bg-brand-primary/10 text-brand-primary flex items-center justify-center text-[10px] font-bold shrink-0">
+                  {a.user_avatar ? (
+                    <img src={a.user_avatar} className="w-full h-full rounded-full object-cover" alt="" />
+                  ) : (
+                    getInitials(a.user_name)
+                  )}
+                </div>
+                <span className="text-xs font-medium text-text-primary">{a.user_name}</span>
+                {canAssign && (
+                  <button
+                    onClick={() => removeAssignment(a.user_id)}
+                    className="p-0.5 rounded-full hover:bg-red-100 text-text-tertiary hover:text-red-500"
+                  >
+                    <X className="w-3 h-3" />
+                  </button>
+                )}
+              </div>
+            ))}
+          </div>
+        )}
       </div>
 
       {/* Aggregate Metrics */}
@@ -232,7 +343,7 @@ export default function CampaignDetail() {
           </div>
           {totalAllocated > 0 && (
             <div className="mt-4">
-              <BudgetBar budget={totalAllocated} spent={totalSpent} />
+              <BudgetBar budget={totalAllocated} spent={totalSpent} height="h-2" />
             </div>
           )}
         </div>
@@ -244,7 +355,7 @@ export default function CampaignDetail() {
           <h3 className="font-semibold text-text-primary">Tracks</h3>
           {canManage && (
             <button
-              onClick={() => { setEditingTrack(null); setTrackForm(EMPTY_TRACK); setShowTrackModal(true) }}
+              onClick={() => { setPanelTrack({}); setTrackScrollToMetrics(false) }}
               className="flex items-center gap-1.5 px-3 py-1.5 bg-brand-primary text-white rounded-lg text-xs font-medium hover:bg-brand-primary-light"
             >
               <Plus className="w-3.5 h-3.5" /> Add Track
@@ -285,7 +396,7 @@ export default function CampaignDetail() {
                       {/* Budget bar for paid tracks */}
                       {track.budget_allocated > 0 && (
                         <div className="w-48 mt-1.5">
-                          <BudgetBar budget={track.budget_allocated} spent={track.budget_spent || 0} />
+                          <BudgetBar budget={track.budget_allocated} spent={track.budget_spent || 0} height="h-2" />
                         </div>
                       )}
 
@@ -296,7 +407,7 @@ export default function CampaignDetail() {
                           {track.clicks > 0 && <span>🖱 {track.clicks.toLocaleString()}</span>}
                           {track.conversions > 0 && <span>🎯 {track.conversions.toLocaleString()}</span>}
                           {track.clicks > 0 && track.budget_spent > 0 && (
-                            <span>CPC: {(track.budget_spent / track.clicks).toFixed(2)} SAR</span>
+                            <span>CPC: {(track.budget_spent / track.clicks).toFixed(2)} {currencySymbol}</span>
                           )}
                           {track.impressions > 0 && track.clicks > 0 && (
                             <span>CTR: {(track.clicks / track.impressions * 100).toFixed(2)}%</span>
@@ -320,14 +431,14 @@ export default function CampaignDetail() {
                     {canManage && (
                       <div className="flex items-center gap-1 shrink-0">
                         <button
-                          onClick={() => openMetrics(track)}
+                          onClick={() => { setPanelTrack(track); setTrackScrollToMetrics(true) }}
                           title="Update metrics"
                           className="p-1.5 hover:bg-surface-tertiary rounded-lg text-text-tertiary hover:text-brand-primary"
                         >
                           <TrendingUp className="w-4 h-4" />
                         </button>
                         <button
-                          onClick={() => openEditTrack(track)}
+                          onClick={() => { setPanelTrack(track); setTrackScrollToMetrics(false) }}
                           title="Edit track"
                           className="p-1.5 hover:bg-surface-tertiary rounded-lg text-text-tertiary hover:text-text-primary"
                         >
@@ -358,7 +469,14 @@ export default function CampaignDetail() {
           </div>
           <div className="divide-y divide-border-light">
             {posts.map(post => (
-              <div key={post.id} className="flex items-center gap-3 px-5 py-3">
+              <div
+                key={post.id}
+                onClick={() => setSelectedPost(post)}
+                className="flex items-center gap-3 px-5 py-3 hover:bg-surface-secondary cursor-pointer transition-colors"
+              >
+                {post.thumbnail_url && (
+                  <img src={post.thumbnail_url} alt="" className="w-10 h-10 rounded-lg object-cover shrink-0" />
+                )}
                 <div className="flex-1 min-w-0">
                   <div className="flex items-center gap-2">
                     <h4 className="text-sm font-medium text-text-primary">{post.title}</h4>
@@ -366,6 +484,7 @@ export default function CampaignDetail() {
                   </div>
                   <div className="flex items-center gap-2 mt-0.5 text-[10px] text-text-tertiary">
                     {post.track_name && <span className="px-1.5 py-0.5 rounded bg-surface-tertiary">{post.track_name}</span>}
+                    {post.brand_name && <BrandBadge brand={post.brand_name} />}
                     {post.assigned_name && <span>→ {post.assigned_name}</span>}
                     {post.platforms && post.platforms.length > 0 && (
                       <PlatformIcons platforms={post.platforms} size={14} />
@@ -378,175 +497,25 @@ export default function CampaignDetail() {
         </div>
       )}
 
-      {/* Add/Edit Track Modal */}
-      <Modal
-        isOpen={showTrackModal}
-        onClose={() => { setShowTrackModal(false); setEditingTrack(null) }}
-        title={editingTrack ? 'Edit Track' : 'Add Track'}
-      >
-        <div className="space-y-4">
-          <div>
-            <label className="block text-sm font-medium text-text-primary mb-1">Track Name</label>
-            <input
-              type="text"
-              value={trackForm.name}
-              onChange={e => setTrackForm(f => ({ ...f, name: e.target.value }))}
-              className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary"
-              placeholder="e.g., Instagram Paid Ads, Organic Wave, Google Search..."
-            />
-          </div>
+      </div>{/* end main content */}
 
-          <div className="grid grid-cols-2 gap-4">
-            <div>
-              <label className="block text-sm font-medium text-text-primary mb-1">Type</label>
-              <select
-                value={trackForm.type}
-                onChange={e => setTrackForm(f => ({ ...f, type: e.target.value }))}
-                className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none"
-              >
-                {Object.entries(TRACK_TYPES).map(([k, v]) => (
-                  <option key={k} value={k}>{v.label}</option>
-                ))}
-              </select>
-            </div>
-            <div>
-              <label className="block text-sm font-medium text-text-primary mb-1">Platform</label>
-              <select
-                value={trackForm.platform}
-                onChange={e => setTrackForm(f => ({ ...f, platform: e.target.value }))}
-                className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none"
-              >
-                <option value="">All / Multiple</option>
-                {Object.entries(PLATFORMS).map(([k, v]) => (
-                  <option key={k} value={k}>{v.label}</option>
-                ))}
-                <option value="google_ads">Google Ads</option>
-              </select>
-            </div>
-          </div>
-
-          <div className="grid grid-cols-2 gap-4">
-            <div>
-              <label className="block text-sm font-medium text-text-primary mb-1">Budget Allocated (SAR)</label>
-              <input
-                type="number"
-                value={trackForm.budget_allocated}
-                onChange={e => setTrackForm(f => ({ ...f, budget_allocated: e.target.value }))}
-                className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none"
-                placeholder="0 for free/organic"
-              />
-            </div>
-            <div>
-              <label className="block text-sm font-medium text-text-primary mb-1">Status</label>
-              <select
-                value={trackForm.status}
-                onChange={e => setTrackForm(f => ({ ...f, status: e.target.value }))}
-                className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none"
-              >
-                {TRACK_STATUSES.map(s => (
-                  <option key={s} value={s}>{s.charAt(0).toUpperCase() + s.slice(1)}</option>
-                ))}
-              </select>
-            </div>
-          </div>
-
-          <div>
-            <label className="block text-sm font-medium text-text-primary mb-1">Notes</label>
-            <textarea
-              value={trackForm.notes}
-              onChange={e => setTrackForm(f => ({ ...f, notes: e.target.value }))}
-              rows={2}
-              className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none resize-none"
-              placeholder="Keywords, targeting details, content plan..."
-            />
-          </div>
-
-          <div className="flex justify-end gap-3 pt-4 border-t border-border">
-            <button onClick={() => setShowTrackModal(false)} className="px-4 py-2 text-sm text-text-secondary hover:bg-surface-tertiary rounded-lg">Cancel</button>
-            <button onClick={saveTrack} className="px-5 py-2 bg-brand-primary text-white rounded-lg text-sm font-medium hover:bg-brand-primary-light shadow-sm">
-              {editingTrack ? 'Save' : 'Add Track'}
+      {/* ─── DISCUSSION SIDEBAR ─── */}
+      {showDiscussion && (
+        <div className="w-[340px] shrink-0 bg-white rounded-xl border border-border flex flex-col self-start sticky top-4" style={{ maxHeight: 'calc(100vh - 6rem)' }}>
+          <div className="flex items-center justify-between px-4 py-3 border-b border-border">
+            <h3 className="text-sm font-semibold text-text-primary flex items-center gap-1.5">
+              <MessageCircle className="w-4 h-4" />
+              Discussion
+            </h3>
+            <button onClick={() => setShowDiscussion(false)} className="p-1 hover:bg-surface-tertiary rounded-lg text-text-tertiary">
+              <X className="w-4 h-4" />
             </button>
           </div>
-        </div>
-      </Modal>
-
-      {/* Update Metrics Modal */}
-      <Modal
-        isOpen={showMetricsModal}
-        onClose={() => { setShowMetricsModal(false); setMetricsTrack(null) }}
-        title={`Update Metrics — ${metricsTrack?.name || ''}`}
-      >
-        <div className="space-y-4">
-          <div className="grid grid-cols-2 gap-4">
-            <div>
-              <label className="block text-sm font-medium text-text-primary mb-1">Budget Spent (SAR)</label>
-              <input
-                type="number"
-                value={metricsForm.budget_spent}
-                onChange={e => setMetricsForm(f => ({ ...f, budget_spent: e.target.value }))}
-                className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none"
-              />
-            </div>
-            <div>
-              <label className="block text-sm font-medium text-text-primary mb-1">Revenue (SAR)</label>
-              <input
-                type="number"
-                value={metricsForm.revenue}
-                onChange={e => setMetricsForm(f => ({ ...f, revenue: e.target.value }))}
-                className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none"
-              />
-            </div>
-          </div>
-
-          <div className="grid grid-cols-3 gap-4">
-            <div>
-              <label className="block text-sm font-medium text-text-primary mb-1">Impressions</label>
-              <input
-                type="number"
-                value={metricsForm.impressions}
-                onChange={e => setMetricsForm(f => ({ ...f, impressions: e.target.value }))}
-                className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none"
-              />
-            </div>
-            <div>
-              <label className="block text-sm font-medium text-text-primary mb-1">Clicks</label>
-              <input
-                type="number"
-                value={metricsForm.clicks}
-                onChange={e => setMetricsForm(f => ({ ...f, clicks: e.target.value }))}
-                className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none"
-              />
-            </div>
-            <div>
-              <label className="block text-sm font-medium text-text-primary mb-1">Conversions</label>
-              <input
-                type="number"
-                value={metricsForm.conversions}
-                onChange={e => setMetricsForm(f => ({ ...f, conversions: e.target.value }))}
-                className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none"
-              />
-            </div>
-          </div>
-
-          <div>
-            <label className="block text-sm font-medium text-text-primary mb-1">Notes</label>
-            <textarea
-              value={metricsForm.notes}
-              onChange={e => setMetricsForm(f => ({ ...f, notes: e.target.value }))}
-              rows={2}
-              className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none resize-none"
-              placeholder="What's working, what to adjust..."
-            />
-          </div>
-
-          <div className="flex justify-end gap-3 pt-4 border-t border-border">
-            <button onClick={() => setShowMetricsModal(false)} className="px-4 py-2 text-sm text-text-secondary hover:bg-surface-tertiary rounded-lg">Cancel</button>
-            <button onClick={saveMetrics} className="px-5 py-2 bg-brand-primary text-white rounded-lg text-sm font-medium hover:bg-brand-primary-light shadow-sm">
-              Save Metrics
-            </button>
+          <div className="flex-1 overflow-y-auto p-4">
+            <CommentsSection entityType="campaign" entityId={Number(id)} />
           </div>
         </div>
-      </Modal>
+      )}
 
       {/* Delete Track Confirmation */}
       <Modal
@@ -560,6 +529,131 @@ export default function CampaignDetail() {
       >
         Are you sure you want to delete this campaign track? This action cannot be undone.
       </Modal>
+
+      {/* Assign Members Modal */}
+      <Modal
+        isOpen={showAssignModal}
+        onClose={() => setShowAssignModal(false)}
+        title="Assign Team Members"
+      >
+        <div className="space-y-3 max-h-80 overflow-y-auto">
+          {allUsers.map(u => {
+            const checked = selectedUserIds.includes(u.id || u._id)
+            return (
+              <label
+                key={u.id || u._id}
+                className={`flex items-center gap-3 p-2 rounded-lg cursor-pointer hover:bg-surface-secondary ${checked ? 'bg-brand-primary/5' : ''}`}
+              >
+                <input
+                  type="checkbox"
+                  checked={checked}
+                  onChange={() => {
+                    const uid = u.id || u._id
+                    setSelectedUserIds(prev =>
+                      prev.includes(uid) ? prev.filter(id => id !== uid) : [...prev, uid]
+                    )
+                  }}
+                  className="rounded border-border text-brand-primary focus:ring-brand-primary"
+                />
+                <div className="w-7 h-7 rounded-full bg-brand-primary/10 text-brand-primary flex items-center justify-center text-[10px] font-bold shrink-0">
+                  {u.avatar ? (
+                    <img src={u.avatar} className="w-full h-full rounded-full object-cover" alt="" />
+                  ) : (
+                    getInitials(u.name)
+                  )}
+                </div>
+                <div className="flex-1 min-w-0">
+                  <div className="text-sm font-medium text-text-primary">{u.name}</div>
+                  {u.team_role && <div className="text-[10px] text-text-tertiary">{u.team_role}</div>}
+                </div>
+              </label>
+            )
+          })}
+        </div>
+        <div className="flex justify-end gap-3 pt-4 border-t border-border mt-4">
+          <button onClick={() => setShowAssignModal(false)} className="px-4 py-2 text-sm text-text-secondary hover:bg-surface-tertiary rounded-lg">Cancel</button>
+          <button onClick={saveAssignments} className="px-5 py-2 bg-brand-primary text-white rounded-lg text-sm font-medium hover:bg-brand-primary-light shadow-sm">
+            Save Assignments
+          </button>
+        </div>
+      </Modal>
+
+      {/* Budget Modal */}
+      <Modal isOpen={editingBudget} onClose={() => setEditingBudget(false)} title="Set Campaign Budget" size="sm">
+        <div className="space-y-4">
+          <div>
+            <label className="block text-sm font-medium text-text-primary mb-1">Budget ({currencySymbol})</label>
+            <input
+              type="number"
+              value={budgetValue}
+              onChange={e => setBudgetValue(e.target.value)}
+              autoFocus
+              min="0"
+              className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary"
+              placeholder="Enter budget amount"
+            />
+          </div>
+          <div className="flex items-center justify-end gap-3 pt-4 border-t border-border">
+            <button
+              onClick={() => setEditingBudget(false)}
+              className="px-4 py-2 text-sm font-medium text-text-secondary hover:bg-surface-tertiary rounded-lg"
+            >
+              Cancel
+            </button>
+            <button
+              onClick={async () => {
+                try {
+                  await api.patch(`/campaigns/${id}`, { budget: budgetValue ? Number(budgetValue) : null })
+                  setEditingBudget(false)
+                  loadAll()
+                } catch (err) {
+                  console.error('Failed to update budget:', err)
+                }
+              }}
+              className="px-5 py-2 bg-brand-primary text-white rounded-lg text-sm font-medium hover:bg-brand-primary-light shadow-sm"
+            >
+              Save
+            </button>
+          </div>
+        </div>
+      </Modal>
+
+      {/* Post Detail Panel */}
+      {selectedPost && (
+        <PostDetailPanel
+          post={selectedPost}
+          onClose={() => setSelectedPost(null)}
+          onSave={handlePostPanelSave}
+          onDelete={handlePostPanelDelete}
+          brands={brands}
+          teamMembers={teamMembers}
+          campaigns={allCampaigns}
+        />
+      )}
+
+      {/* Campaign Edit Panel */}
+      {panelCampaign && (
+        <CampaignDetailPanel
+          campaign={panelCampaign}
+          onClose={() => setPanelCampaign(null)}
+          onSave={handleCampaignPanelSave}
+          onDelete={permissions?.canDeleteCampaigns ? handleCampaignPanelDelete : null}
+          brands={brands}
+          permissions={permissions}
+        />
+      )}
+
+      {/* Track Detail Panel */}
+      {panelTrack && (
+        <TrackDetailPanel
+          track={panelTrack}
+          campaignId={id}
+          onClose={() => setPanelTrack(null)}
+          onSave={handleTrackPanelSave}
+          onDelete={handleTrackPanelDelete}
+          scrollToMetrics={trackScrollToMetrics}
+        />
+      )}
     </div>
   )
 }

client/src/pages/Campaigns.jsx

@@ -4,35 +4,15 @@ import { Plus, Search, TrendingUp, DollarSign, Eye, MousePointer, Target, BarCha
 import { format } from 'date-fns'
 import { AppContext } from '../App'
 import { useAuth } from '../contexts/AuthContext'
+import { useLanguage } from '../i18n/LanguageContext'
 import { api, PLATFORMS } from '../utils/api'
 import { PlatformIcons } from '../components/PlatformIcon'
-import CampaignCalendar from '../components/CampaignCalendar'
 import StatusBadge from '../components/StatusBadge'
 import BrandBadge from '../components/BrandBadge'
-import Modal from '../components/Modal'
-
-const EMPTY_CAMPAIGN = {
-  name: '', description: '', brand_id: '', status: 'planning',
-  start_date: '', end_date: '', budget: '', goals: '', platforms: [],
-  budget_spent: '', revenue: '', impressions: '', clicks: '', conversions: '', cost_per_click: '', notes: '',
-}
-
-function BudgetBar({ budget, spent }) {
-  if (!budget || budget <= 0) return null
-  const pct = Math.min((spent / budget) * 100, 100)
-  const color = pct > 90 ? 'bg-red-500' : pct > 70 ? 'bg-amber-500' : 'bg-emerald-500'
-  return (
-    <div className="w-full">
-      <div className="flex justify-between text-[10px] text-text-tertiary mb-0.5">
-        <span>{spent?.toLocaleString() || 0} SAR spent</span>
-        <span>{budget?.toLocaleString()} SAR</span>
-      </div>
-      <div className="h-1.5 bg-surface-tertiary rounded-full overflow-hidden">
-        <div className={`h-full ${color} rounded-full transition-all`} style={{ width: `${pct}%` }} />
-      </div>
-    </div>
-  )
-}
+import BudgetBar from '../components/BudgetBar'
+import InteractiveTimeline from '../components/InteractiveTimeline'
+import CampaignDetailPanel from '../components/CampaignDetailPanel'
+import { SkeletonStatCard, SkeletonTable } from '../components/SkeletonLoader'
 
 function ROIBadge({ revenue, spent }) {
   if (!spent || spent <= 0) return null
@@ -56,17 +36,14 @@ function MetricCard({ icon: Icon, label, value, color = 'text-text-primary' }) {
 }
 
 export default function Campaigns() {
-  const { brands } = useContext(AppContext)
+  const { brands, getBrandName } = useContext(AppContext)
+  const { lang, currencySymbol } = useLanguage()
   const { permissions } = useAuth()
   const navigate = useNavigate()
   const [campaigns, setCampaigns] = useState([])
   const [loading, setLoading] = useState(true)
-  const [showModal, setShowModal] = useState(false)
-  const [editingCampaign, setEditingCampaign] = useState(null)
-  const [formData, setFormData] = useState(EMPTY_CAMPAIGN)
+  const [panelCampaign, setPanelCampaign] = useState(null)
   const [filters, setFilters] = useState({ brand: '', status: '' })
-  const [activeTab, setActiveTab] = useState('details') // details | performance
-  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false)
 
   useEffect(() => { loadCampaigns() }, [])
 
@@ -81,69 +58,22 @@ export default function Campaigns() {
     }
   }
 
-  const handleSave = async () => {
-    try {
-      const data = {
-        name: formData.name,
-        description: formData.description,
-        brand_id: formData.brand_id ? Number(formData.brand_id) : null,
-        status: formData.status,
-        start_date: formData.start_date,
-        end_date: formData.end_date,
-        budget: formData.budget ? Number(formData.budget) : null,
-        goals: formData.goals,
-        platforms: formData.platforms || [],
-        budget_spent: formData.budget_spent ? Number(formData.budget_spent) : 0,
-        revenue: formData.revenue ? Number(formData.revenue) : 0,
-        impressions: formData.impressions ? Number(formData.impressions) : 0,
-        clicks: formData.clicks ? Number(formData.clicks) : 0,
-        conversions: formData.conversions ? Number(formData.conversions) : 0,
-        cost_per_click: formData.cost_per_click ? Number(formData.cost_per_click) : 0,
-        notes: formData.notes || '',
-      }
-      if (editingCampaign) {
-        await api.patch(`/campaigns/${editingCampaign.id || editingCampaign._id}`, data)
-      } else {
-        await api.post('/campaigns', data)
-      }
-      setShowModal(false)
-      setEditingCampaign(null)
-      setFormData(EMPTY_CAMPAIGN)
-      loadCampaigns()
-    } catch (err) {
-      console.error('Save failed:', err)
+  const handlePanelSave = async (campaignId, data) => {
+    if (campaignId) {
+      await api.patch(`/campaigns/${campaignId}`, data)
+    } else {
+      await api.post('/campaigns', data)
     }
+    loadCampaigns()
   }
 
-  const openEdit = (campaign) => {
-    setEditingCampaign(campaign)
-    setFormData({
-      name: campaign.name || '',
-      description: campaign.description || '',
-      brand_id: campaign.brandId || campaign.brand_id || '',
-      status: campaign.status || 'planning',
-      start_date: campaign.startDate ? new Date(campaign.startDate).toISOString().slice(0, 10) : '',
-      end_date: campaign.endDate ? new Date(campaign.endDate).toISOString().slice(0, 10) : '',
-      budget: campaign.budget || '',
-      goals: campaign.goals || '',
-      platforms: campaign.platforms || [],
-      budget_spent: campaign.budgetSpent || campaign.budget_spent || '',
-      revenue: campaign.revenue || '',
-      impressions: campaign.impressions || '',
-      clicks: campaign.clicks || '',
-      conversions: campaign.conversions || '',
-      cost_per_click: campaign.costPerClick || campaign.cost_per_click || '',
-      notes: campaign.notes || '',
-    })
-    setActiveTab('details')
-    setShowModal(true)
+  const handlePanelDelete = async (campaignId) => {
+    await api.delete(`/campaigns/${campaignId}`)
+    loadCampaigns()
   }
 
   const openNew = () => {
-    setEditingCampaign(null)
-    setFormData(EMPTY_CAMPAIGN)
-    setActiveTab('details')
-    setShowModal(true)
+    setPanelCampaign({ status: 'planning', platforms: [] })
   }
 
   const filtered = campaigns.filter(c => {
@@ -162,25 +92,63 @@ export default function Campaigns() {
 
   if (loading) {
     return (
-      <div className="space-y-4 animate-pulse">
-        <div className="h-12 bg-surface-tertiary rounded-xl"></div>
-        <div className="h-[400px] bg-surface-tertiary rounded-xl"></div>
+      <div className="space-y-6">
+        <div className="h-12 bg-surface-tertiary rounded-xl animate-pulse"></div>
+        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-3">
+          {[...Array(6)].map((_, i) => <SkeletonStatCard key={i} />)}
+        </div>
+        <SkeletonTable rows={5} cols={6} />
       </div>
     )
   }
 
   return (
     <div className="space-y-6 animate-fade-in">
+      {/* Toolbar */}
+      <div className="flex flex-wrap items-center gap-3">
+        <select
+          value={filters.brand}
+          onChange={e => setFilters(f => ({ ...f, brand: e.target.value }))}
+          className="text-sm border border-border rounded-lg px-3 py-2 bg-white text-text-secondary focus:outline-none"
+        >
+          <option value="">All Brands</option>
+          {brands.map(b => <option key={b.id || b._id} value={b.id || b._id}>{lang === 'ar' && b.name_ar ? b.name_ar : b.name}</option>)}
+        </select>
+
+        <select
+          value={filters.status}
+          onChange={e => setFilters(f => ({ ...f, status: e.target.value }))}
+          className="text-sm border border-border rounded-lg px-3 py-2 bg-white text-text-secondary focus:outline-none"
+        >
+          <option value="">All Statuses</option>
+          <option value="planning">Planning</option>
+          <option value="active">Active</option>
+          <option value="paused">Paused</option>
+          <option value="completed">Completed</option>
+          <option value="cancelled">Cancelled</option>
+        </select>
+
+        {permissions?.canCreateCampaigns && (
+          <button
+            onClick={openNew}
+            className="flex items-center gap-2 px-4 py-2 bg-brand-primary text-white rounded-lg text-sm font-medium hover:bg-brand-primary-light shadow-sm ml-auto"
+          >
+            <Plus className="w-4 h-4" />
+            New Campaign
+          </button>
+        )}
+      </div>
+
       {/* Summary Cards */}
       {(totalBudget > 0 || totalSpent > 0) && (
-        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-3">
+        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-3 stagger-children">
           <div className="bg-white rounded-xl border border-border p-4">
             <div className="flex items-center gap-2 mb-1">
               <DollarSign className="w-4 h-4 text-blue-500" />
               <span className="text-[10px] uppercase tracking-wider text-text-tertiary font-medium">Budget</span>
             </div>
             <div className="text-lg font-bold text-text-primary">{totalBudget.toLocaleString()}</div>
-            <div className="text-[10px] text-text-tertiary">SAR total</div>
+            <div className="text-[10px] text-text-tertiary">{currencySymbol} total</div>
           </div>
           <div className="bg-white rounded-xl border border-border p-4">
             <div className="flex items-center gap-2 mb-1">
@@ -188,7 +156,7 @@ export default function Campaigns() {
               <span className="text-[10px] uppercase tracking-wider text-text-tertiary font-medium">Spent</span>
             </div>
             <div className="text-lg font-bold text-text-primary">{totalSpent.toLocaleString()}</div>
-            <div className="text-[10px] text-text-tertiary">SAR spent</div>
+            <div className="text-[10px] text-text-tertiary">{currencySymbol} spent</div>
           </div>
           <div className="bg-white rounded-xl border border-border p-4">
             <div className="flex items-center gap-2 mb-1">
@@ -217,48 +185,37 @@ export default function Campaigns() {
               <span className="text-[10px] uppercase tracking-wider text-text-tertiary font-medium">Revenue</span>
             </div>
             <div className="text-lg font-bold text-text-primary">{totalRevenue.toLocaleString()}</div>
-            <div className="text-[10px] text-text-tertiary">SAR</div>
+            <div className="text-[10px] text-text-tertiary">{currencySymbol}</div>
           </div>
         </div>
       )}
 
-      {/* Toolbar */}
-      <div className="flex flex-wrap items-center gap-3">
-        <select
-          value={filters.brand}
-          onChange={e => setFilters(f => ({ ...f, brand: e.target.value }))}
-          className="text-sm border border-border rounded-lg px-3 py-2 bg-white text-text-secondary focus:outline-none"
-        >
-          <option value="">All Brands</option>
-          {brands.map(b => <option key={b.id || b._id} value={b.id || b._id}>{b.name}</option>)}
-        </select>
-
-        <select
-          value={filters.status}
-          onChange={e => setFilters(f => ({ ...f, status: e.target.value }))}
-          className="text-sm border border-border rounded-lg px-3 py-2 bg-white text-text-secondary focus:outline-none"
-        >
-          <option value="">All Statuses</option>
-          <option value="planning">Planning</option>
-          <option value="active">Active</option>
-          <option value="paused">Paused</option>
-          <option value="completed">Completed</option>
-          <option value="cancelled">Cancelled</option>
-        </select>
-
-        {permissions?.canCreateCampaigns && (
-          <button
-            onClick={openNew}
-            className="flex items-center gap-2 px-4 py-2 bg-brand-primary text-white rounded-lg text-sm font-medium hover:bg-brand-primary-light shadow-sm ml-auto"
-          >
-            <Plus className="w-4 h-4" />
-            New Campaign
-          </button>
-        )}
-      </div>
-
-      {/* Calendar */}
-      <CampaignCalendar campaigns={filtered} />
+      {/* Timeline */}
+      <InteractiveTimeline
+        items={filtered}
+        mapItem={(campaign) => ({
+          id: campaign._id || campaign.id,
+          label: campaign.name,
+          description: campaign.description,
+          startDate: campaign.startDate || campaign.start_date || campaign.createdAt,
+          endDate: campaign.endDate || campaign.end_date,
+          status: campaign.status,
+          assigneeName: campaign.brandName || campaign.brand_name,
+          tags: campaign.platforms || [],
+        })}
+        onDateChange={async (campaignId, { startDate, endDate }) => {
+          try {
+            await api.patch(`/campaigns/${campaignId}`, { start_date: startDate, end_date: endDate })
+          } catch (err) {
+            console.error('Timeline date update failed:', err)
+          } finally {
+            loadCampaigns()
+          }
+        }}
+        onItemClick={(campaign) => {
+          navigate(`/campaigns/${campaign._id || campaign.id}`)
+        }}
+      />
 
       {/* Campaign list */}
       <div className="bg-white rounded-xl border border-border overflow-hidden">
@@ -277,47 +234,50 @@ export default function Campaigns() {
               return (
                 <div
                   key={campaign.id || campaign._id}
-                  onClick={() => permissions?.canEditCampaigns ? navigate(`/campaigns/${campaign.id || campaign._id}`) : navigate(`/campaigns/${campaign.id || campaign._id}`)}
-                  className="flex items-center gap-4 px-5 py-4 hover:bg-surface-secondary cursor-pointer transition-colors"
+                  onClick={() => navigate(`/campaigns/${campaign.id || campaign._id}`)}
+                  className="relative px-5 py-4 hover:bg-surface-secondary cursor-pointer transition-colors"
                 >
-                  <div className="flex-1 min-w-0">
-                    <div className="flex items-center gap-2 mb-1">
-                      <h4 className="text-sm font-semibold text-text-primary">{campaign.name}</h4>
-                      {campaign.brandName && <BrandBadge brand={campaign.brandName} />}
-                      <ROIBadge revenue={campaign.revenue || 0} spent={spent} />
-                    </div>
-                    {campaign.description && (
-                      <p className="text-xs text-text-secondary line-clamp-1">{campaign.description}</p>
-                    )}
-                    <div className="flex items-center gap-3 mt-1.5">
-                      {campaign.platforms && campaign.platforms.length > 0 && (
-                        <PlatformIcons platforms={campaign.platforms} size={16} />
-                      )}
-                      {budget > 0 && (
-                        <div className="w-32">
-                          <BudgetBar budget={budget} spent={spent} />
-                        </div>
-                      )}
-                    </div>
-                    {/* Quick metrics row */}
-                    {(campaign.impressions > 0 || campaign.clicks > 0) && (
-                      <div className="flex items-center gap-3 mt-1.5 text-[10px] text-text-tertiary">
-                        {campaign.impressions > 0 && <span>👁 {campaign.impressions.toLocaleString()}</span>}
-                        {campaign.clicks > 0 && <span>🖱 {campaign.clicks.toLocaleString()}</span>}
-                        {campaign.conversions > 0 && <span>🎯 {campaign.conversions.toLocaleString()}</span>}
+                  <div className="flex items-center gap-4">
+                    <div className="flex-1 min-w-0">
+                      <div className="flex items-center gap-2 mb-1">
+                        <h4 className="text-sm font-semibold text-text-primary">{campaign.name}</h4>
+                        {(campaign.brand_id || campaign.brandName) && <BrandBadge brand={getBrandName(campaign.brand_id) || campaign.brandName} />}
+                        <ROIBadge revenue={campaign.revenue || 0} spent={spent} />
+                      </div>
+                      {campaign.description && (
+                        <p className="text-xs text-text-secondary line-clamp-1">{campaign.description}</p>
+                      )}
+                      <div className="flex items-center gap-3 mt-1.5">
+                        {budget > 0 && (
+                          <div className="w-32">
+                            <BudgetBar budget={budget} spent={spent} />
+                          </div>
+                        )}
+                        {(campaign.impressions > 0 || campaign.clicks > 0) && (
+                          <div className="flex items-center gap-3 text-[10px] text-text-tertiary">
+                            {campaign.impressions > 0 && <span>👁 {campaign.impressions.toLocaleString()}</span>}
+                            {campaign.clicks > 0 && <span>🖱 {campaign.clicks.toLocaleString()}</span>}
+                            {campaign.conversions > 0 && <span>🎯 {campaign.conversions.toLocaleString()}</span>}
+                          </div>
+                        )}
+                      </div>
+                    </div>
+                    <div className="text-right shrink-0">
+                      <StatusBadge status={campaign.status} size="xs" />
+                      <div className="text-xs text-text-tertiary mt-1">
+                        {campaign.startDate && campaign.endDate ? (
+                          <>
+                            {format(new Date(campaign.startDate), 'MMM d')} – {format(new Date(campaign.endDate), 'MMM d, yyyy')}
+                          </>
+                        ) : '—'}
                       </div>
-                    )}
-                  </div>
-                  <div className="text-right shrink-0">
-                    <StatusBadge status={campaign.status} size="xs" />
-                    <div className="text-xs text-text-tertiary mt-1">
-                      {campaign.startDate && campaign.endDate ? (
-                        <>
-                          {format(new Date(campaign.startDate), 'MMM d')} – {format(new Date(campaign.endDate), 'MMM d, yyyy')}
-                        </>
-                      ) : '—'}
                     </div>
                   </div>
+                  {campaign.platforms && campaign.platforms.length > 0 && (
+                    <div className="flex justify-end mt-2">
+                      <PlatformIcons platforms={campaign.platforms} size={16} />
+                    </div>
+                  )}
                 </div>
               )
             })
@@ -325,313 +285,17 @@ export default function Campaigns() {
         </div>
       </div>
 
-      {/* Create/Edit Modal */}
-      <Modal
-        isOpen={showModal}
-        onClose={() => { setShowModal(false); setEditingCampaign(null) }}
-        title={editingCampaign ? 'Edit Campaign' : 'Create Campaign'}
-        size="lg"
-      >
-        <div className="space-y-4">
-          {/* Tabs */}
-          {editingCampaign && (
-            <div className="flex gap-1 p-1 bg-surface-tertiary rounded-lg">
-              <button
-                onClick={() => setActiveTab('details')}
-                className={`flex-1 px-3 py-1.5 text-sm font-medium rounded-md transition-colors ${
-                  activeTab === 'details' ? 'bg-white text-text-primary shadow-sm' : 'text-text-tertiary hover:text-text-secondary'
-                }`}
-              >
-                Details
-              </button>
-              <button
-                onClick={() => setActiveTab('performance')}
-                className={`flex-1 px-3 py-1.5 text-sm font-medium rounded-md transition-colors ${
-                  activeTab === 'performance' ? 'bg-white text-text-primary shadow-sm' : 'text-text-tertiary hover:text-text-secondary'
-                }`}
-              >
-                Performance & ROI
-              </button>
-            </div>
-          )}
-
-          {activeTab === 'details' ? (
-            <>
-              <div>
-                <label className="block text-sm font-medium text-text-primary mb-1">Name *</label>
-                <input
-                  type="text"
-                  value={formData.name}
-                  onChange={e => setFormData(f => ({ ...f, name: e.target.value }))}
-                  className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary"
-                  placeholder="Campaign name"
-                />
-              </div>
-
-              <div>
-                <label className="block text-sm font-medium text-text-primary mb-1">Description</label>
-                <textarea
-                  value={formData.description}
-                  onChange={e => setFormData(f => ({ ...f, description: e.target.value }))}
-                  rows={3}
-                  className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary resize-none"
-                  placeholder="Campaign description..."
-                />
-              </div>
-
-              <div className="grid grid-cols-2 gap-4">
-                <div>
-                  <label className="block text-sm font-medium text-text-primary mb-1">Brand</label>
-                  <select
-                    value={formData.brand_id}
-                    onChange={e => setFormData(f => ({ ...f, brand_id: e.target.value }))}
-                    className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary"
-                  >
-                    <option value="">Select brand</option>
-                    {brands.map(b => <option key={b.id || b._id} value={b.id || b._id}>{b.icon} {b.name}</option>)}
-                  </select>
-                </div>
-                <div>
-                  <label className="block text-sm font-medium text-text-primary mb-1">Status</label>
-                  <select
-                    value={formData.status}
-                    onChange={e => setFormData(f => ({ ...f, status: e.target.value }))}
-                    className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary"
-                  >
-                    <option value="planning">Planning</option>
-                    <option value="active">Active</option>
-                    <option value="paused">Paused</option>
-                    <option value="completed">Completed</option>
-                    <option value="cancelled">Cancelled</option>
-                  </select>
-                </div>
-              </div>
-
-              {/* Platforms multi-select */}
-              <div>
-                <label className="block text-sm font-medium text-text-primary mb-1">Platforms</label>
-                <div className="flex flex-wrap gap-2 p-2 border border-border rounded-lg bg-white min-h-[42px]">
-                  {Object.entries(PLATFORMS).map(([k, v]) => {
-                    const checked = (formData.platforms || []).includes(k)
-                    return (
-                      <label
-                        key={k}
-                        className={`flex items-center gap-1.5 text-xs px-2.5 py-1.5 rounded-full cursor-pointer border transition-colors ${
-                          checked
-                            ? 'bg-brand-primary/10 border-brand-primary/30 text-brand-primary font-medium'
-                            : 'bg-surface-tertiary border-transparent text-text-secondary hover:bg-surface-tertiary/80'
-                        }`}
-                      >
-                        <input
-                          type="checkbox"
-                          checked={checked}
-                          onChange={() => {
-                            setFormData(f => ({
-                              ...f,
-                              platforms: checked
-                                ? f.platforms.filter(p => p !== k)
-                                : [...(f.platforms || []), k]
-                            }))
-                          }}
-                          className="sr-only"
-                        />
-                        {v.label}
-                      </label>
-                    )
-                  })}
-                </div>
-              </div>
-
-              <div className="grid grid-cols-2 gap-4">
-                <div>
-                  <label className="block text-sm font-medium text-text-primary mb-1">Start Date *</label>
-                  <input
-                    type="date"
-                    value={formData.start_date}
-                    onChange={e => setFormData(f => ({ ...f, start_date: e.target.value }))}
-                    className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary"
-                  />
-                </div>
-                <div>
-                  <label className="block text-sm font-medium text-text-primary mb-1">End Date *</label>
-                  <input
-                    type="date"
-                    value={formData.end_date}
-                    onChange={e => setFormData(f => ({ ...f, end_date: e.target.value }))}
-                    className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary"
-                  />
-                </div>
-              </div>
-
-              <div className="grid grid-cols-2 gap-4">
-                <div>
-                  <label className="block text-sm font-medium text-text-primary mb-1">Budget (SAR)</label>
-                  <input
-                    type="number"
-                    value={formData.budget}
-                    onChange={e => setFormData(f => ({ ...f, budget: e.target.value }))}
-                    className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary"
-                    placeholder="e.g., 50000"
-                  />
-                </div>
-                <div>
-                  <label className="block text-sm font-medium text-text-primary mb-1">Goals</label>
-                  <input
-                    type="text"
-                    value={formData.goals}
-                    onChange={e => setFormData(f => ({ ...f, goals: e.target.value }))}
-                    className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary"
-                    placeholder="Campaign goals"
-                  />
-                </div>
-              </div>
-            </>
-          ) : (
-            /* Performance & ROI Tab */
-            <>
-              {/* Live metrics summary */}
-              {(formData.budget_spent || formData.impressions || formData.clicks) && (
-                <div className="grid grid-cols-4 gap-2 mb-2">
-                  <MetricCard icon={DollarSign} label="Spent" value={formData.budget_spent ? `${Number(formData.budget_spent).toLocaleString()} SAR` : null} color="text-amber-600" />
-                  <MetricCard icon={Eye} label="Impressions" value={formData.impressions ? Number(formData.impressions).toLocaleString() : null} color="text-purple-600" />
-                  <MetricCard icon={MousePointer} label="Clicks" value={formData.clicks ? Number(formData.clicks).toLocaleString() : null} color="text-blue-600" />
-                  <MetricCard icon={Target} label="Conversions" value={formData.conversions ? Number(formData.conversions).toLocaleString() : null} color="text-emerald-600" />
-                </div>
-              )}
-
-              {formData.budget && formData.budget_spent && (
-                <div className="p-3 bg-surface-secondary rounded-lg">
-                  <BudgetBar budget={Number(formData.budget)} spent={Number(formData.budget_spent)} />
-                  <div className="flex items-center gap-2 mt-2">
-                    <ROIBadge revenue={Number(formData.revenue) || 0} spent={Number(formData.budget_spent) || 0} />
-                    {formData.clicks > 0 && formData.budget_spent > 0 && (
-                      <span className="text-[10px] text-text-tertiary">
-                        CPC: {(Number(formData.budget_spent) / Number(formData.clicks)).toFixed(2)} SAR
-                      </span>
-                    )}
-                    {formData.impressions > 0 && formData.clicks > 0 && (
-                      <span className="text-[10px] text-text-tertiary">
-                        CTR: {(Number(formData.clicks) / Number(formData.impressions) * 100).toFixed(2)}%
-                      </span>
-                    )}
-                  </div>
-                </div>
-              )}
-
-              <div className="grid grid-cols-2 gap-4">
-                <div>
-                  <label className="block text-sm font-medium text-text-primary mb-1">Budget Spent (SAR)</label>
-                  <input
-                    type="number"
-                    value={formData.budget_spent}
-                    onChange={e => setFormData(f => ({ ...f, budget_spent: e.target.value }))}
-                    className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary"
-                    placeholder="Amount spent so far"
-                  />
-                </div>
-                <div>
-                  <label className="block text-sm font-medium text-text-primary mb-1">Revenue (SAR)</label>
-                  <input
-                    type="number"
-                    value={formData.revenue}
-                    onChange={e => setFormData(f => ({ ...f, revenue: e.target.value }))}
-                    className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary"
-                    placeholder="Revenue generated"
-                  />
-                </div>
-              </div>
-
-              <div className="grid grid-cols-3 gap-4">
-                <div>
-                  <label className="block text-sm font-medium text-text-primary mb-1">Impressions</label>
-                  <input
-                    type="number"
-                    value={formData.impressions}
-                    onChange={e => setFormData(f => ({ ...f, impressions: e.target.value }))}
-                    className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary"
-                    placeholder="Total impressions"
-                  />
-                </div>
-                <div>
-                  <label className="block text-sm font-medium text-text-primary mb-1">Clicks</label>
-                  <input
-                    type="number"
-                    value={formData.clicks}
-                    onChange={e => setFormData(f => ({ ...f, clicks: e.target.value }))}
-                    className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary"
-                    placeholder="Total clicks"
-                  />
-                </div>
-                <div>
-                  <label className="block text-sm font-medium text-text-primary mb-1">Conversions</label>
-                  <input
-                    type="number"
-                    value={formData.conversions}
-                    onChange={e => setFormData(f => ({ ...f, conversions: e.target.value }))}
-                    className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary"
-                    placeholder="Conversions (visits, tickets...)"
-                  />
-                </div>
-              </div>
-
-              <div>
-                <label className="block text-sm font-medium text-text-primary mb-1">Notes</label>
-                <textarea
-                  value={formData.notes}
-                  onChange={e => setFormData(f => ({ ...f, notes: e.target.value }))}
-                  rows={3}
-                  className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary resize-none"
-                  placeholder="Performance notes, observations, what's working..."
-                />
-              </div>
-            </>
-          )}
-
-          <div className="flex items-center justify-end gap-3 pt-4 border-t border-border">
-            {editingCampaign && permissions?.canDeleteCampaigns && (
-              <button
-                onClick={() => setShowDeleteConfirm(true)}
-                className="px-4 py-2 text-sm font-medium text-red-600 hover:bg-red-50 rounded-lg mr-auto"
-              >
-                Delete
-              </button>
-            )}
-            <button
-              onClick={() => { setShowModal(false); setEditingCampaign(null) }}
-              className="px-4 py-2 text-sm font-medium text-text-secondary hover:bg-surface-tertiary rounded-lg"
-            >
-              Cancel
-            </button>
-            <button
-              onClick={handleSave}
-              disabled={!formData.name || !formData.start_date || !formData.end_date}
-              className="px-5 py-2 bg-brand-primary text-white rounded-lg text-sm font-medium hover:bg-brand-primary-light disabled:opacity-50 disabled:cursor-not-allowed shadow-sm"
-            >
-              {editingCampaign ? 'Save Changes' : 'Create Campaign'}
-            </button>
-          </div>
-        </div>
-      </Modal>
-
-      {/* Delete Confirmation */}
-      <Modal
-        isOpen={showDeleteConfirm}
-        onClose={() => setShowDeleteConfirm(false)}
-        title="Delete Campaign?"
-        isConfirm
-        danger
-        confirmText="Delete Campaign"
-        onConfirm={async () => {
-          if (editingCampaign) {
-            await api.delete(`/campaigns/${editingCampaign.id || editingCampaign._id}`)
-            setShowModal(false)
-            setEditingCampaign(null)
-            loadCampaigns()
-          }
-        }}
-      >
-        Are you sure you want to delete this campaign? All associated posts and tracks will also be deleted. This action cannot be undone.
-      </Modal>
+      {/* Campaign Panel */}
+      {panelCampaign && (
+        <CampaignDetailPanel
+          campaign={panelCampaign}
+          onClose={() => setPanelCampaign(null)}
+          onSave={handlePanelSave}
+          onDelete={permissions?.canDeleteCampaigns ? handlePanelDelete : null}
+          brands={brands}
+          permissions={permissions}
+        />
+      )}
     </div>
   )
 }

client/src/pages/Dashboard.jsx

@@ -1,23 +1,38 @@
-import { useContext, useEffect, useState } from 'react'
-import { Link } from 'react-router-dom'
+import { useContext, useEffect, useState, useMemo } from 'react'
+import { Link, useNavigate } from 'react-router-dom'
 import { format, isAfter, isBefore, addDays } from 'date-fns'
-import { FileText, Megaphone, AlertTriangle, Users, ArrowRight, Clock, Wallet, TrendingUp, DollarSign, PiggyBank } from 'lucide-react'
+import { FileText, Megaphone, AlertTriangle, ArrowRight, Clock, Wallet, TrendingUp, TrendingDown, DollarSign, Landmark, CheckSquare, FolderKanban } from 'lucide-react'
 import { AppContext } from '../App'
+import { useAuth } from '../contexts/AuthContext'
 import { useLanguage } from '../i18n/LanguageContext'
-import { api } from '../utils/api'
+import { api, PRIORITY_CONFIG } from '../utils/api'
 import StatCard from '../components/StatCard'
 import StatusBadge from '../components/StatusBadge'
 import BrandBadge from '../components/BrandBadge'
+import DatePresetPicker from '../components/DatePresetPicker'
+import { SkeletonDashboard } from '../components/SkeletonLoader'
+
+function getBudgetBarColor(percentage) {
+  if (percentage > 90) return 'bg-red-500'
+  if (percentage > 70) return 'bg-amber-500'
+  return 'bg-emerald-500'
+}
 
 function FinanceMini({ finance }) {
-  const { t } = useLanguage()
+  const { t, currencySymbol } = useLanguage()
   if (!finance) return null
   const totalReceived = finance.totalReceived || 0
   const spent = finance.spent || 0
   const remaining = finance.remaining || 0
   const roi = finance.roi || 0
+  const totalExpenses = finance.totalExpenses || 0
+  const campaignBudget = finance.totalCampaignBudget || 0
+  const projectBudget = finance.totalProjectBudget || 0
+  const unallocated = finance.unallocated ?? (totalReceived - campaignBudget - projectBudget)
   const pct = totalReceived > 0 ? (spent / totalReceived) * 100 : 0
-  const barColor = pct > 90 ? 'bg-red-500' : pct > 70 ? 'bg-amber-500' : 'bg-emerald-500'
+  const barColor = getBudgetBarColor(pct)
+  const campPct = totalReceived > 0 ? (campaignBudget / totalReceived) * 100 : 0
+  const projPct = totalReceived > 0 ? (projectBudget / totalReceived) * 100 : 0
 
   return (
     <div className="bg-white rounded-xl border border-border p-5">
@@ -30,35 +45,55 @@ function FinanceMini({ finance }) {
 
       {totalReceived === 0 ? (
         <div className="text-center py-6 text-sm text-text-tertiary">
-          {t('dashboard.noBudgetRecorded')}. <Link to="/finance" className="text-brand-primary underline">{t('dashboard.addBudget')}</Link>
+          {t('dashboard.noBudgetRecorded')}. <Link to="/budgets" className="text-brand-primary underline">{t('dashboard.addBudget')}</Link>
         </div>
       ) : (
         <>
-          {/* Budget bar */}
-          <div className="mb-4">
+          {/* Spending bar */}
+          <div className="mb-3">
             <div className="flex justify-between text-xs text-text-tertiary mb-1">
-              <span>{spent.toLocaleString()} {t('dashboard.sar')} {t('dashboard.spent')}</span>
-              <span>{totalReceived.toLocaleString()} {t('dashboard.sar')} {t('dashboard.received')}</span>
+              <span>{spent.toLocaleString()} {currencySymbol} {t('dashboard.spent')}</span>
+              <span>{totalReceived.toLocaleString()} {currencySymbol} {t('dashboard.received')}</span>
             </div>
-            <div className="h-3 bg-surface-tertiary rounded-full overflow-hidden">
+            <div className="h-2.5 bg-surface-tertiary rounded-full overflow-hidden">
               <div className={`h-full ${barColor} rounded-full transition-all`} style={{ width: `${Math.min(pct, 100)}%` }} />
             </div>
           </div>
 
+          {/* Allocation bar */}
+          {(campaignBudget > 0 || projectBudget > 0) && (
+            <div className="mb-3">
+              <div className="text-[10px] text-text-tertiary mb-1 font-medium uppercase tracking-wide">Allocation</div>
+              <div className="h-2 bg-surface-tertiary rounded-full overflow-hidden flex">
+                {campPct > 0 && <div className="h-full bg-blue-500" style={{ width: `${campPct}%` }} />}
+                {projPct > 0 && <div className="h-full bg-purple-500" style={{ width: `${projPct}%` }} />}
+              </div>
+              <div className="flex gap-3 mt-1 text-[10px] text-text-tertiary">
+                {campaignBudget > 0 && <span><span className="inline-block w-1.5 h-1.5 rounded-full bg-blue-500 mr-1" />{campaignBudget.toLocaleString()}</span>}
+                {projectBudget > 0 && <span><span className="inline-block w-1.5 h-1.5 rounded-full bg-purple-500 mr-1" />{projectBudget.toLocaleString()}</span>}
+                {unallocated > 0 && <span><span className="inline-block w-1.5 h-1.5 rounded-full bg-gray-300 mr-1" />{unallocated.toLocaleString()} free</span>}
+              </div>
+            </div>
+          )}
+
           {/* Key numbers */}
-          <div className="grid grid-cols-3 gap-3">
+          <div className={`grid ${totalExpenses > 0 ? 'grid-cols-3' : 'grid-cols-2'} gap-3`}>
             <div className="text-center p-2 bg-surface-secondary rounded-lg">
-              <PiggyBank className="w-4 h-4 mx-auto mb-1 text-emerald-500" />
+              <Landmark className="w-4 h-4 mx-auto mb-1 text-emerald-500" />
               <div className={`text-sm font-bold ${remaining >= 0 ? 'text-emerald-600' : 'text-red-600'}`}>
                 {remaining.toLocaleString()}
               </div>
               <div className="text-[10px] text-text-tertiary">{t('dashboard.remaining')}</div>
             </div>
-            <div className="text-center p-2 bg-surface-secondary rounded-lg">
-              <DollarSign className="w-4 h-4 mx-auto mb-1 text-purple-500" />
-              <div className="text-sm font-bold text-purple-600">{(finance.revenue || 0).toLocaleString()}</div>
-              <div className="text-[10px] text-text-tertiary">{t('dashboard.revenue')}</div>
-            </div>
+            {totalExpenses > 0 && (
+              <div className="text-center p-2 bg-surface-secondary rounded-lg">
+                <TrendingDown className="w-4 h-4 mx-auto mb-1 text-red-500" />
+                <div className="text-sm font-bold text-red-600">
+                  {totalExpenses.toLocaleString()}
+                </div>
+                <div className="text-[10px] text-text-tertiary">{t('dashboard.expenses')}</div>
+              </div>
+            )}
             <div className="text-center p-2 bg-surface-secondary rounded-lg">
               <TrendingUp className="w-4 h-4 mx-auto mb-1 text-blue-500" />
               <div className={`text-sm font-bold ${roi >= 0 ? 'text-emerald-600' : 'text-red-600'}`}>
@@ -74,26 +109,27 @@ function FinanceMini({ finance }) {
 }
 
 function ActiveCampaignsList({ campaigns, finance }) {
+  const { t, currencySymbol } = useLanguage()
   const active = campaigns.filter(c => c.status === 'active')
   const campaignData = (finance?.campaigns || []).filter(c => c.status === 'active')
 
   if (active.length === 0) return null
 
   return (
-    <div className="bg-white rounded-xl border border-border">
-      <div className="flex items-center justify-between px-5 py-4 border-b border-border">
+    <div className="section-card">
+      <div className="section-card-header flex items-center justify-between">
         <h3 className="font-semibold text-text-primary">{t('dashboard.activeCampaigns')}</h3>
         <Link to="/campaigns" className="text-sm text-brand-primary hover:text-brand-primary-light font-medium flex items-center gap-1">
           {t('dashboard.viewAll')} <ArrowRight className="w-3.5 h-3.5" />
         </Link>
       </div>
       <div className="divide-y divide-border-light">
-        {active.map(c => {
+        {active.slice(0, 5).map(c => {
           const cd = campaignData.find(d => d.id === (c._id || c.id)) || {}
           const spent = cd.tracks_spent || 0
           const allocated = cd.tracks_allocated || 0
           const pct = allocated > 0 ? (spent / allocated) * 100 : 0
-          const barColor = pct > 90 ? 'bg-red-500' : pct > 70 ? 'bg-amber-500' : 'bg-emerald-500'
+          const barColor = getBudgetBarColor(pct)
           return (
             <Link key={c._id || c.id} to={`/campaigns/${c._id || c.id}`} className="flex items-center gap-4 px-5 py-3 hover:bg-surface-secondary transition-colors">
               <div className="flex-1 min-w-0">
@@ -102,7 +138,7 @@ function ActiveCampaignsList({ campaigns, finance }) {
                   <div className="mt-1.5 w-32">
                     <div className="flex justify-between text-[9px] text-text-tertiary mb-0.5">
                       <span>{spent.toLocaleString()}</span>
-                      <span>{allocated.toLocaleString()} SAR</span>
+                      <span>{allocated.toLocaleString()} {currencySymbol}</span>
                     </div>
                     <div className="h-1.5 bg-surface-tertiary rounded-full overflow-hidden">
                       <div className={`h-full ${barColor} rounded-full`} style={{ width: `${Math.min(pct, 100)}%` }} />
@@ -113,7 +149,7 @@ function ActiveCampaignsList({ campaigns, finance }) {
               <div className="text-right shrink-0">
                 {cd.tracks_impressions > 0 && (
                   <div className="text-[10px] text-text-tertiary">
-                    👁 {cd.tracks_impressions.toLocaleString()} · 🖱 {cd.tracks_clicks.toLocaleString()}
+                    {cd.tracks_impressions.toLocaleString()} imp. / {cd.tracks_clicks.toLocaleString()} clicks
                   </div>
                 )}
               </div>
@@ -125,31 +161,153 @@ function ActiveCampaignsList({ campaigns, finance }) {
   )
 }
 
+function MyTasksList({ tasks, currentUserId, navigate, t }) {
+  const myTasks = tasks
+    .filter(task => {
+      const assignedId = task.assigned_to_id || task.assignedTo
+      return assignedId === currentUserId && task.status !== 'done'
+    })
+    .slice(0, 5)
+
+  return (
+    <div className="section-card">
+      <div className="section-card-header flex items-center justify-between">
+        <h3 className="font-semibold text-text-primary flex items-center gap-2">
+          <CheckSquare className="w-4 h-4 text-brand-primary" />
+          {t('dashboard.myTasks')}
+        </h3>
+        <Link to="/tasks" className="text-sm text-brand-primary hover:text-brand-primary-light font-medium flex items-center gap-1">
+          {t('dashboard.viewAll')} <ArrowRight className="w-3.5 h-3.5" />
+        </Link>
+      </div>
+      <div className="divide-y divide-border-light">
+        {myTasks.length === 0 ? (
+          <div className="py-8 text-center text-sm text-text-tertiary">
+            {t('dashboard.allOnTrack')}
+          </div>
+        ) : (
+          myTasks.map(task => (
+            <div
+              key={task._id || task.id}
+              onClick={() => navigate('/tasks')}
+              className="flex items-center gap-3 px-5 py-3 hover:bg-surface-secondary transition-colors cursor-pointer"
+            >
+              <div className={`w-2 h-2 rounded-full shrink-0 ${(PRIORITY_CONFIG[task.priority] || PRIORITY_CONFIG.medium).color}`} />
+              <div className="flex-1 min-w-0">
+                <p className="text-sm font-medium text-text-primary truncate">{task.title}</p>
+                <StatusBadge status={task.status} size="xs" />
+              </div>
+              {task.dueDate && (
+                <div className="flex items-center gap-1 text-xs text-text-tertiary shrink-0">
+                  <Clock className="w-3.5 h-3.5" />
+                  {format(new Date(task.dueDate), 'MMM d')}
+                </div>
+              )}
+            </div>
+          ))
+        )}
+      </div>
+    </div>
+  )
+}
+
+function ProjectProgress({ projects, tasks, t }) {
+  if (!projects || projects.length === 0) return null
+
+  const activeProjects = projects
+    .filter(p => p.status === 'active' || p.status === 'in_progress')
+    .slice(0, 5)
+
+  if (activeProjects.length === 0) return null
+
+  return (
+    <div className="section-card">
+      <div className="section-card-header flex items-center justify-between">
+        <h3 className="font-semibold text-text-primary flex items-center gap-2">
+          <FolderKanban className="w-4 h-4 text-purple-500" />
+          {t('dashboard.projectProgress')}
+        </h3>
+        <Link to="/projects" className="text-sm text-brand-primary hover:text-brand-primary-light font-medium flex items-center gap-1">
+          {t('dashboard.viewAll')} <ArrowRight className="w-3.5 h-3.5" />
+        </Link>
+      </div>
+      <div className="divide-y divide-border-light">
+        {activeProjects.map(project => {
+          const projectId = project._id || project.id
+          const projectTasks = tasks.filter(t => (t.project_id || t.projectId) === projectId)
+          const doneTasks = projectTasks.filter(t => t.status === 'done').length
+          const totalTasks = projectTasks.length
+          const pct = totalTasks > 0 ? (doneTasks / totalTasks) * 100 : 0
+
+          return (
+            <Link key={projectId} to={`/projects/${projectId}`} className="flex items-center gap-4 px-5 py-3 hover:bg-surface-secondary transition-colors">
+              <div className="flex-1 min-w-0">
+                <p className="text-sm font-medium text-text-primary truncate">{project.name}</p>
+                <div className="flex items-center gap-2 mt-1.5">
+                  <div className="flex-1 h-1.5 bg-surface-tertiary rounded-full overflow-hidden max-w-[120px]">
+                    <div className="h-full bg-purple-500 rounded-full transition-all" style={{ width: `${pct}%` }} />
+                  </div>
+                  <span className="text-[10px] text-text-tertiary shrink-0">
+                    {doneTasks}/{totalTasks} {t('tasks.tasks')}
+                  </span>
+                </div>
+              </div>
+              <StatusBadge status={project.status} size="xs" />
+            </Link>
+          )
+        })}
+      </div>
+    </div>
+  )
+}
+
 export default function Dashboard() {
-  const { t } = useLanguage()
+  const { t, currencySymbol } = useLanguage()
+  const navigate = useNavigate()
   const { currentUser, teamMembers } = useContext(AppContext)
+  const { hasModule } = useAuth()
   const [posts, setPosts] = useState([])
   const [campaigns, setCampaigns] = useState([])
   const [tasks, setTasks] = useState([])
+  const [projects, setProjects] = useState([])
   const [finance, setFinance] = useState(null)
   const [loading, setLoading] = useState(true)
 
+  // Date filtering
+  const [dateFrom, setDateFrom] = useState('')
+  const [dateTo, setDateTo] = useState('')
+  const [activePreset, setActivePreset] = useState('')
+
   useEffect(() => {
     loadData()
   }, [])
 
   const loadData = async () => {
     try {
-      const [postsRes, campaignsRes, tasksRes, financeRes] = await Promise.allSettled([
-        api.get('/posts?limit=10&sort=-createdAt'),
-        api.get('/campaigns'),
-        api.get('/tasks'),
-        api.get('/finance/summary'),
-      ])
-      setPosts(postsRes.status === 'fulfilled' ? (postsRes.value.data || postsRes.value || []) : [])
-      setCampaigns(campaignsRes.status === 'fulfilled' ? (campaignsRes.value.data || campaignsRes.value || []) : [])
-      setTasks(tasksRes.status === 'fulfilled' ? (tasksRes.value.data || tasksRes.value || []) : [])
-      setFinance(financeRes.status === 'fulfilled' ? (financeRes.value.data || financeRes.value || null) : null)
+      const fetches = []
+      // Only fetch data for modules the user has access to
+      if (hasModule('marketing')) {
+        fetches.push(api.get('/posts?limit=50&sort=-createdAt').then(r => ({ key: 'posts', data: r.data || r || [] })))
+        fetches.push(api.get('/campaigns').then(r => ({ key: 'campaigns', data: r.data || r || [] })))
+      }
+      if (hasModule('projects')) {
+        fetches.push(api.get('/tasks').then(r => ({ key: 'tasks', data: r.data || r || [] })))
+        fetches.push(api.get('/projects').then(r => ({ key: 'projects', data: r.data || r || [] })))
+      }
+      if (hasModule('finance')) {
+        fetches.push(api.get('/finance/summary').then(r => ({ key: 'finance', data: r.data || r || null })))
+      }
+
+      const results = await Promise.allSettled(fetches)
+      results.forEach(r => {
+        if (r.status !== 'fulfilled') return
+        const { key, data } = r.value
+        if (key === 'posts') setPosts(data)
+        else if (key === 'campaigns') setCampaigns(data)
+        else if (key === 'tasks') setTasks(data)
+        else if (key === 'projects') setProjects(data)
+        else if (key === 'finance') setFinance(data)
+      })
     } catch (err) {
       console.error('Dashboard load error:', err)
     } finally {
@@ -157,12 +315,35 @@ export default function Dashboard() {
     }
   }
 
+  // Filtered data based on date range
+  const filteredPosts = useMemo(() => {
+    if (!dateFrom && !dateTo) return posts
+    return posts.filter(p => {
+      const d = p.scheduled_date || p.scheduledDate
+      if (!d) return true
+      if (dateFrom && d < dateFrom) return false
+      if (dateTo && d > dateTo) return false
+      return true
+    })
+  }, [posts, dateFrom, dateTo])
+
+  const filteredTasks = useMemo(() => {
+    if (!dateFrom && !dateTo) return tasks
+    return tasks.filter(t => {
+      const d = t.due_date || t.dueDate
+      if (!d) return true
+      if (dateFrom && d < dateFrom) return false
+      if (dateTo && d > dateTo) return false
+      return true
+    })
+  }, [tasks, dateFrom, dateTo])
+
   const activeCampaigns = campaigns.filter(c => c.status === 'active').length
-  const overdueTasks = tasks.filter(t =>
+  const overdueTasks = filteredTasks.filter(t =>
     t.dueDate && new Date(t.dueDate) < new Date() && t.status !== 'done'
   ).length
 
-  const upcomingDeadlines = tasks
+  const upcomingDeadlines = filteredTasks
     .filter(t => {
       if (!t.dueDate || t.status === 'done') return false
       const due = new Date(t.dueDate)
@@ -172,140 +353,170 @@ export default function Dashboard() {
     .sort((a, b) => new Date(a.dueDate) - new Date(b.dueDate))
     .slice(0, 8)
 
+  const statCards = []
+  if (hasModule('marketing')) {
+    statCards.push({
+      icon: FileText,
+      label: t('dashboard.totalPosts'),
+      value: filteredPosts.length || 0,
+      subtitle: `${filteredPosts.filter(p => p.status === 'published').length} ${t('dashboard.published')}`,
+      color: 'brand-primary',
+    })
+    statCards.push({
+      icon: Megaphone,
+      label: t('dashboard.activeCampaigns'),
+      value: activeCampaigns,
+      subtitle: `${campaigns.length} ${t('dashboard.total')}`,
+      color: 'brand-secondary',
+    })
+  }
+  if (hasModule('finance')) {
+    statCards.push({
+      icon: Landmark,
+      label: t('dashboard.budgetRemaining'),
+      value: `${(finance?.remaining ?? 0).toLocaleString()}`,
+      subtitle: finance?.totalReceived ? `${(finance.spent || 0).toLocaleString()} ${t('dashboard.spent')} ${t('dashboard.of')} ${finance.totalReceived.toLocaleString()} ${currencySymbol}` : t('dashboard.noBudget'),
+      color: 'brand-tertiary',
+    })
+  }
+  if (hasModule('projects')) {
+    statCards.push({
+      icon: AlertTriangle,
+      label: t('dashboard.overdueTasks'),
+      value: overdueTasks,
+      subtitle: overdueTasks > 0 ? t('dashboard.needsAttention') : t('dashboard.allOnTrack'),
+      color: 'brand-quaternary',
+    })
+  }
+
   if (loading) {
-    return (
-      <div className="space-y-6 animate-pulse">
-        <div className="h-8 w-64 bg-surface-tertiary rounded-lg"></div>
-        <div className="grid grid-cols-4 gap-4">
-          {[...Array(4)].map((_, i) => (
-            <div key={i} className="h-28 bg-surface-tertiary rounded-xl"></div>
-          ))}
-        </div>
-      </div>
-    )
+    return <SkeletonDashboard />
   }
 
   return (
     <div className="space-y-6 animate-fade-in">
-      {/* Welcome */}
-      <div>
-        <h1 className="text-2xl font-bold text-text-primary">
-          Welcome back, {currentUser?.name || 'there'} 👋
-        </h1>
-        <p className="text-text-secondary mt-1">
-          Here's what's happening with your marketing today.
-        </p>
+      {/* Welcome + Date presets */}
+      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
+        <div>
+          <h1 className="text-2xl font-bold text-gradient">
+            {t('dashboard.welcomeBack')}, {currentUser?.name || 'there'}
+          </h1>
+          <p className="text-text-secondary mt-1">
+            {t('dashboard.happeningToday')}
+          </p>
+        </div>
+        <DatePresetPicker
+          activePreset={activePreset}
+          onSelect={(from, to, key) => { setDateFrom(from); setDateTo(to); setActivePreset(key) }}
+          onClear={() => { setDateFrom(''); setDateTo(''); setActivePreset('') }}
+        />
       </div>
 
       {/* Stats */}
-      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 stagger-children">
-        <StatCard
-          icon={FileText}
-          label="Total Posts"
-          value={posts.length || 0}
-          subtitle={`${posts.filter(p => p.status === 'published').length} published`}
-          color="brand-primary"
-        />
-        <StatCard
-          icon={Megaphone}
-          label="Active Campaigns"
-          value={activeCampaigns}
-          subtitle={`${campaigns.length} total`}
-          color="brand-secondary"
-        />
-        <StatCard
-          icon={Wallet}
-          label="Budget Spent"
-          value={`${((finance?.spent || 0)).toLocaleString()}`}
-          subtitle={finance?.totalReceived ? `of ${finance.totalReceived.toLocaleString()} SAR` : 'No budget yet'}
-          color="brand-tertiary"
-        />
-        <StatCard
-          icon={AlertTriangle}
-          label="Overdue Tasks"
-          value={overdueTasks}
-          subtitle={overdueTasks > 0 ? 'Needs attention' : 'All on track'}
-          color="brand-quaternary"
-        />
-      </div>
-
-      {/* Three columns on large, stack on small */}
-      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
-        {/* Budget Overview */}
-        <FinanceMini finance={finance} />
-
-        {/* Active Campaigns with budget bars */}
-        <div className="lg:col-span-2">
-          <ActiveCampaignsList campaigns={campaigns} finance={finance} />
+      {statCards.length > 0 && (
+        <div className={`grid grid-cols-1 sm:grid-cols-2 ${statCards.length >= 4 ? 'lg:grid-cols-4' : statCards.length === 3 ? 'lg:grid-cols-3' : 'lg:grid-cols-2'} gap-4 stagger-children`}>
+          {statCards.map((card, i) => (
+            <StatCard key={i} {...card} />
+          ))}
         </div>
-      </div>
+      )}
 
-      {/* Two columns */}
-      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-        {/* Recent Posts */}
-        <div className="bg-white rounded-xl border border-border">
-          <div className="flex items-center justify-between px-5 py-4 border-b border-border">
-            <h3 className="font-semibold text-text-primary">Recent Posts</h3>
-            <Link to="/posts" className="text-sm text-brand-primary hover:text-brand-primary-light font-medium flex items-center gap-1">
-              View all <ArrowRight className="w-3.5 h-3.5" />
-            </Link>
-          </div>
-          <div className="divide-y divide-border-light">
-            {posts.length === 0 ? (
-              <div className="py-12 text-center text-sm text-text-tertiary">
-                No posts yet. Create your first post!
+      {/* My Tasks + Project Progress */}
+      {hasModule('projects') && (
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+          <MyTasksList tasks={filteredTasks} currentUserId={currentUser?.id || currentUser?._id} navigate={navigate} t={t} />
+          <ProjectProgress projects={projects} tasks={tasks} t={t} />
+        </div>
+      )}
+
+      {/* Budget + Active Campaigns */}
+      {(hasModule('finance') || hasModule('marketing')) && (
+        <div className={`grid grid-cols-1 ${hasModule('finance') && hasModule('marketing') ? 'lg:grid-cols-3' : ''} gap-6`}>
+          {hasModule('finance') && <FinanceMini finance={finance} />}
+          {hasModule('marketing') && (
+            <div className={hasModule('finance') ? 'lg:col-span-2' : ''}>
+              <ActiveCampaignsList campaigns={campaigns} finance={finance} />
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Recent Posts + Upcoming Deadlines */}
+      {(hasModule('marketing') || hasModule('projects')) && (
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+          {/* Recent Posts */}
+          {hasModule('marketing') && (
+            <div className="section-card">
+              <div className="section-card-header flex items-center justify-between">
+                <h3 className="font-semibold text-text-primary">{t('dashboard.recentPosts')}</h3>
+                <Link to="/posts" className="text-sm text-brand-primary hover:text-brand-primary-light font-medium flex items-center gap-1">
+                  {t('dashboard.viewAll')} <ArrowRight className="w-3.5 h-3.5" />
+                </Link>
               </div>
-            ) : (
-              posts.slice(0, 8).map((post) => (
-                <div key={post._id} className="flex items-center gap-3 px-5 py-3 hover:bg-surface-secondary transition-colors">
-                  <div className="flex-1 min-w-0">
-                    <p className="text-sm font-medium text-text-primary truncate">{post.title}</p>
-                    <div className="flex items-center gap-2 mt-1">
-                      {post.brand && <BrandBadge brand={post.brand} />}
+              <div className="divide-y divide-border-light">
+                {filteredPosts.length === 0 ? (
+                  <div className="py-12 text-center text-sm text-text-tertiary">
+                    {t('dashboard.noPostsYet')}
+                  </div>
+                ) : (
+                  filteredPosts.slice(0, 8).map((post) => (
+                    <div
+                      key={post._id}
+                      onClick={() => navigate('/posts')}
+                      className="flex items-center gap-3 px-5 py-3 hover:bg-surface-secondary transition-colors cursor-pointer"
+                    >
+                      <div className="flex-1 min-w-0">
+                        <p className="text-sm font-medium text-text-primary truncate">{post.title}</p>
+                        <div className="flex items-center gap-2 mt-1">
+                          {post.brand && <BrandBadge brand={post.brand} />}
+                        </div>
+                      </div>
+                      <StatusBadge status={post.status} size="xs" />
                     </div>
-                  </div>
-                  <StatusBadge status={post.status} size="xs" />
-                </div>
-              ))
-            )}
-          </div>
-        </div>
-
-        {/* Upcoming Deadlines */}
-        <div className="bg-white rounded-xl border border-border">
-          <div className="flex items-center justify-between px-5 py-4 border-b border-border">
-            <h3 className="font-semibold text-text-primary">Upcoming Deadlines</h3>
-            <Link to="/tasks" className="text-sm text-brand-primary hover:text-brand-primary-light font-medium flex items-center gap-1">
-              View all <ArrowRight className="w-3.5 h-3.5" />
-            </Link>
-          </div>
-          <div className="divide-y divide-border-light">
-            {upcomingDeadlines.length === 0 ? (
-              <div className="py-12 text-center text-sm text-text-tertiary">
-                No upcoming deadlines this week. 🎉
+                  ))
+                )}
               </div>
-            ) : (
-              upcomingDeadlines.map((task) => (
-                <div key={task._id} className="flex items-center gap-3 px-5 py-3 hover:bg-surface-secondary transition-colors">
-                  <div className={`w-2 h-2 rounded-full ${
-                    task.priority === 'urgent' ? 'bg-red-500' :
-                    task.priority === 'high' ? 'bg-orange-500' :
-                    task.priority === 'medium' ? 'bg-amber-400' : 'bg-gray-400'
-                  }`} />
-                  <div className="flex-1 min-w-0">
-                    <p className="text-sm font-medium text-text-primary truncate">{task.title}</p>
-                    <StatusBadge status={task.status} size="xs" />
+            </div>
+          )}
+
+          {/* Upcoming Deadlines */}
+          {hasModule('projects') && (
+            <div className="section-card">
+              <div className="section-card-header flex items-center justify-between">
+                <h3 className="font-semibold text-text-primary">{t('dashboard.upcomingDeadlines')}</h3>
+                <Link to="/tasks" className="text-sm text-brand-primary hover:text-brand-primary-light font-medium flex items-center gap-1">
+                  {t('dashboard.viewAll')} <ArrowRight className="w-3.5 h-3.5" />
+                </Link>
+              </div>
+              <div className="divide-y divide-border-light">
+                {upcomingDeadlines.length === 0 ? (
+                  <div className="py-12 text-center text-sm text-text-tertiary">
+                    {t('dashboard.noUpcomingDeadlines')}
                   </div>
-                  <div className="flex items-center gap-1 text-xs text-text-tertiary shrink-0">
-                    <Clock className="w-3.5 h-3.5" />
-                    {format(new Date(task.dueDate), 'MMM d')}
-                  </div>
-                </div>
-              ))
-            )}
-          </div>
+                ) : (
+                  upcomingDeadlines.map((task) => (
+                    <div
+                      key={task._id}
+                      onClick={() => navigate('/tasks')}
+                      className="flex items-center gap-3 px-5 py-3 hover:bg-surface-secondary transition-colors cursor-pointer"
+                    >
+                      <div className={`w-2 h-2 rounded-full ${(PRIORITY_CONFIG[task.priority] || PRIORITY_CONFIG.medium).color}`} />
+                      <div className="flex-1 min-w-0">
+                        <p className="text-sm font-medium text-text-primary truncate">{task.title}</p>
+                        <StatusBadge status={task.status} size="xs" />
+                      </div>
+                      <div className="flex items-center gap-1 text-xs text-text-tertiary shrink-0">
+                        <Clock className="w-3.5 h-3.5" />
+                        {format(new Date(task.dueDate), 'MMM d')}
+                      </div>
+                    </div>
+                  ))
+                )}
+              </div>
+            </div>
+          )}
         </div>
-      </div>
+      )}
     </div>
   )
 }

client/src/pages/Finance.jsx

@@ -1,24 +1,14 @@
 import { useState, useEffect, useContext } from 'react'
-import { Plus, DollarSign, TrendingUp, TrendingDown, Wallet, PiggyBank, Eye, MousePointer, Target, Edit2, Trash2 } from 'lucide-react'
-import { format } from 'date-fns'
+import { DollarSign, TrendingUp, TrendingDown, Wallet, Landmark, Eye, MousePointer, Target, Briefcase, ArrowRight, Receipt } from 'lucide-react'
+import { Link } from 'react-router-dom'
 import { AppContext } from '../App'
 import { api } from '../utils/api'
-import Modal from '../components/Modal'
+import { useAuth } from '../contexts/AuthContext'
+import { useLanguage } from '../i18n/LanguageContext'
 import StatusBadge from '../components/StatusBadge'
+import { SkeletonStatCard, SkeletonTable } from '../components/SkeletonLoader'
 
-const CATEGORIES = [
-  { value: 'marketing', label: 'Marketing' },
-  { value: 'production', label: 'Production' },
-  { value: 'equipment', label: 'Equipment' },
-  { value: 'travel', label: 'Travel' },
-  { value: 'other', label: 'Other' },
-]
-
-const EMPTY_ENTRY = {
-  label: '', amount: '', source: '', campaign_id: '', category: 'marketing', date_received: new Date().toISOString().slice(0, 10), notes: '',
-}
-
-function StatCard({ icon: Icon, label, value, sub, color = 'text-text-primary', bgColor = 'bg-white' }) {
+function FinanceStatCard({ icon: Icon, label, value, sub, color = 'text-text-primary', bgColor = 'bg-white' }) {
   return (
     <div className={`${bgColor} rounded-xl border border-border p-5`}>
       <div className="flex items-center gap-2 mb-2">
@@ -52,28 +42,17 @@ function ProgressRing({ pct, size = 80, stroke = 8, color = '#10b981' }) {
 
 export default function Finance() {
   const { brands } = useContext(AppContext)
-  const [entries, setEntries] = useState([])
+  const { permissions } = useAuth()
+  const { currencySymbol } = useLanguage()
   const [summary, setSummary] = useState(null)
-  const [campaigns, setCampaigns] = useState([])
   const [loading, setLoading] = useState(true)
-  const [showModal, setShowModal] = useState(false)
-  const [editing, setEditing] = useState(null)
-  const [form, setForm] = useState(EMPTY_ENTRY)
-  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false)
-  const [entryToDelete, setEntryToDelete] = useState(null)
 
   useEffect(() => { loadAll() }, [])
 
   const loadAll = async () => {
     try {
-      const [ent, sum, camp] = await Promise.all([
-        api.get('/budget'),
-        api.get('/finance/summary'),
-        api.get('/campaigns'),
-      ])
-      setEntries(ent.data || ent || [])
+      const sum = await api.get('/finance/summary')
       setSummary(sum.data || sum || {})
-      setCampaigns(camp.data || camp || [])
     } catch (err) {
       console.error('Failed to load finance:', err)
     } finally {
@@ -81,63 +60,13 @@ export default function Finance() {
     }
   }
 
-  const handleSave = async () => {
-    try {
-      const data = {
-        label: form.label,
-        amount: Number(form.amount),
-        source: form.source || null,
-        campaign_id: form.campaign_id ? Number(form.campaign_id) : null,
-        category: form.category,
-        date_received: form.date_received,
-        notes: form.notes,
-      }
-      if (editing) {
-        await api.patch(`/budget/${editing._id || editing.id}`, data)
-      } else {
-        await api.post('/budget', data)
-      }
-      setShowModal(false)
-      setEditing(null)
-      setForm(EMPTY_ENTRY)
-      loadAll()
-    } catch (err) {
-      console.error('Save failed:', err)
-    }
-  }
-
-  const openEdit = (entry) => {
-    setEditing(entry)
-    setForm({
-      label: entry.label || '',
-      amount: entry.amount || '',
-      source: entry.source || '',
-      campaign_id: entry.campaignId || entry.campaign_id || '',
-      category: entry.category || 'marketing',
-      date_received: entry.dateReceived || entry.date_received || '',
-      notes: entry.notes || '',
-    })
-    setShowModal(true)
-  }
-
-  const handleDelete = async (id) => {
-    setEntryToDelete(id)
-    setShowDeleteConfirm(true)
-  }
-
-  const confirmDelete = async () => {
-    if (!entryToDelete) return
-    await api.delete(`/budget/${entryToDelete}`)
-    setEntryToDelete(null)
-    loadAll()
-  }
-
   if (loading) {
     return (
-      <div className="space-y-4 animate-pulse">
-        <div className="grid grid-cols-4 gap-4">
-          {[1, 2, 3, 4].map(i => <div key={i} className="h-28 bg-surface-tertiary rounded-xl" />)}
+      <div className="space-y-4">
+        <div className="grid grid-cols-2 lg:grid-cols-5 gap-4">
+          {[1, 2, 3, 4, 5].map(i => <SkeletonStatCard key={i} />)}
         </div>
+        <SkeletonTable rows={5} cols={7} />
       </div>
     )
   }
@@ -148,25 +77,72 @@ export default function Finance() {
   const remaining = s.remaining || 0
   const totalRevenue = s.revenue || 0
   const roi = s.roi || 0
+  const totalExpenses = s.totalExpenses || 0
   const spendPct = totalReceived > 0 ? (totalSpent / totalReceived) * 100 : 0
+  const totalCampaignBudget = s.totalCampaignBudget || 0
+  const totalProjectBudget = s.totalProjectBudget || 0
+  const unallocated = s.unallocated ?? (totalReceived - totalCampaignBudget - totalProjectBudget)
+  const campaignPct = totalReceived > 0 ? (totalCampaignBudget / totalReceived) * 100 : 0
+  const projectPct = totalReceived > 0 ? (totalProjectBudget / totalReceived) * 100 : 0
+  const unallocatedPct = totalReceived > 0 ? (Math.max(0, unallocated) / totalReceived) * 100 : 0
 
   return (
     <div className="space-y-6 animate-fade-in">
       {/* Top metrics */}
-      <div className="grid grid-cols-2 lg:grid-cols-5 gap-4">
-        <StatCard icon={Wallet} label="Total Received" value={`${totalReceived.toLocaleString()} SAR`} color="text-blue-600" />
-        <StatCard icon={TrendingUp} label="Total Spent" value={`${totalSpent.toLocaleString()} SAR`} sub={`${spendPct.toFixed(1)}% of budget`} color="text-amber-600" />
-        <StatCard icon={PiggyBank} label="Remaining" value={`${remaining.toLocaleString()} SAR`} color={remaining >= 0 ? 'text-emerald-600' : 'text-red-600'} />
-        <StatCard icon={DollarSign} label="Revenue" value={`${totalRevenue.toLocaleString()} SAR`} color="text-purple-600" />
-        <StatCard icon={roi >= 0 ? TrendingUp : TrendingDown} label="Global ROI"
+      <div className={`grid grid-cols-2 ${totalExpenses > 0 ? 'lg:grid-cols-6' : 'lg:grid-cols-5'} gap-4 stagger-children`}>
+        <FinanceStatCard icon={Wallet} label="Total Received" value={`${totalReceived.toLocaleString()} ${currencySymbol}`} color="text-blue-600" />
+        <FinanceStatCard icon={TrendingUp} label="Total Spent" value={`${totalSpent.toLocaleString()} ${currencySymbol}`} sub={`${spendPct.toFixed(1)}% of budget`} color="text-amber-600" />
+        {totalExpenses > 0 && (
+          <FinanceStatCard icon={Receipt} label="Expenses" value={`${totalExpenses.toLocaleString()} ${currencySymbol}`} color="text-red-600" />
+        )}
+        <FinanceStatCard icon={Landmark} label="Remaining" value={`${remaining.toLocaleString()} ${currencySymbol}`} color={remaining >= 0 ? 'text-emerald-600' : 'text-red-600'} />
+        <FinanceStatCard icon={DollarSign} label="Revenue" value={`${totalRevenue.toLocaleString()} ${currencySymbol}`} color="text-purple-600" />
+        <FinanceStatCard icon={roi >= 0 ? TrendingUp : TrendingDown} label="Global ROI"
           value={`${roi.toFixed(1)}%`}
           color={roi >= 0 ? 'text-emerald-600' : 'text-red-600'} />
       </div>
 
+      {/* Budget allocation bar */}
+      {totalReceived > 0 && (
+        <div className="section-card p-5">
+          <div className="flex items-center justify-between mb-3">
+            <h3 className="text-xs uppercase tracking-wider text-text-tertiary font-medium">Budget Allocation</h3>
+            <Link to="/budgets" className="text-xs text-brand-primary hover:text-brand-primary-light font-medium flex items-center gap-1">
+              Manage Budgets <ArrowRight className="w-3 h-3" />
+            </Link>
+          </div>
+          <div className="h-4 bg-surface-tertiary rounded-full overflow-hidden flex">
+            {campaignPct > 0 && (
+              <div className="h-full bg-blue-500 transition-all" style={{ width: `${campaignPct}%` }} title={`Campaigns: ${totalCampaignBudget.toLocaleString()} ${currencySymbol}`} />
+            )}
+            {projectPct > 0 && (
+              <div className="h-full bg-purple-500 transition-all" style={{ width: `${projectPct}%` }} title={`Projects: ${totalProjectBudget.toLocaleString()} ${currencySymbol}`} />
+            )}
+          </div>
+          <div className="flex items-center gap-4 mt-2.5 text-xs">
+            <div className="flex items-center gap-1.5">
+              <div className="w-2.5 h-2.5 rounded-full bg-blue-500" />
+              <span className="text-text-secondary">Campaigns: <span className="font-semibold text-text-primary">{totalCampaignBudget.toLocaleString()} {currencySymbol}</span></span>
+              <span className="text-text-tertiary">({campaignPct.toFixed(0)}%)</span>
+            </div>
+            <div className="flex items-center gap-1.5">
+              <div className="w-2.5 h-2.5 rounded-full bg-purple-500" />
+              <span className="text-text-secondary">Projects: <span className="font-semibold text-text-primary">{totalProjectBudget.toLocaleString()} {currencySymbol}</span></span>
+              <span className="text-text-tertiary">({projectPct.toFixed(0)}%)</span>
+            </div>
+            <div className="flex items-center gap-1.5">
+              <div className="w-2.5 h-2.5 rounded-full bg-gray-300" />
+              <span className="text-text-secondary">Unallocated: <span className="font-semibold text-text-primary">{Math.max(0, unallocated).toLocaleString()} {currencySymbol}</span></span>
+              <span className="text-text-tertiary">({unallocatedPct.toFixed(0)}%)</span>
+            </div>
+          </div>
+        </div>
+      )}
+
       {/* Budget utilization + Global metrics */}
       <div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
         {/* Utilization ring */}
-        <div className="bg-white rounded-xl border border-border p-5 flex flex-col items-center justify-center">
+        <div className="section-card p-5 flex flex-col items-center justify-center">
           <h3 className="text-xs uppercase tracking-wider text-text-tertiary font-medium mb-4">Budget Utilization</h3>
           <ProgressRing
             pct={spendPct}
@@ -175,12 +151,12 @@ export default function Finance() {
             color={spendPct > 90 ? '#ef4444' : spendPct > 70 ? '#f59e0b' : '#10b981'}
           />
           <div className="text-xs text-text-tertiary mt-3">
-            {totalSpent.toLocaleString()} of {totalReceived.toLocaleString()} SAR
+            {totalSpent.toLocaleString()} of {totalReceived.toLocaleString()} {currencySymbol}
           </div>
         </div>
 
         {/* Global performance */}
-        <div className="bg-white rounded-xl border border-border p-5 lg:col-span-2">
+        <div className="section-card p-5 lg:col-span-2">
           <h3 className="text-xs uppercase tracking-wider text-text-tertiary font-medium mb-4">Global Performance</h3>
           <div className="grid grid-cols-3 gap-6">
             <div className="text-center">
@@ -193,7 +169,7 @@ export default function Finance() {
               <div className="text-xl font-bold text-text-primary">{(s.clicks || 0).toLocaleString()}</div>
               <div className="text-xs text-text-tertiary">Clicks</div>
               {s.clicks > 0 && s.spent > 0 && (
-                <div className="text-[10px] text-text-tertiary mt-0.5">CPC: {(s.spent / s.clicks).toFixed(2)} SAR</div>
+                <div className="text-[10px] text-text-tertiary mt-0.5">CPC: {(s.spent / s.clicks).toFixed(2)} {currencySymbol}</div>
               )}
             </div>
             <div className="text-center">
@@ -201,7 +177,7 @@ export default function Finance() {
               <div className="text-xl font-bold text-text-primary">{(s.conversions || 0).toLocaleString()}</div>
               <div className="text-xs text-text-tertiary">Conversions</div>
               {s.conversions > 0 && s.spent > 0 && (
-                <div className="text-[10px] text-text-tertiary mt-0.5">CPA: {(s.spent / s.conversions).toFixed(2)} SAR</div>
+                <div className="text-[10px] text-text-tertiary mt-0.5">CPA: {(s.spent / s.conversions).toFixed(2)} {currencySymbol}</div>
               )}
             </div>
           </div>
@@ -218,42 +194,57 @@ export default function Finance() {
 
       {/* Per-campaign breakdown */}
       {s.campaigns && s.campaigns.length > 0 && (
-        <div className="bg-white rounded-xl border border-border overflow-hidden">
-          <div className="px-5 py-4 border-b border-border">
-            <h3 className="font-semibold text-text-primary">Campaign Breakdown</h3>
+        <div className="section-card">
+          <div className="section-card-header flex items-center gap-3">
+            <div className="p-2 rounded-lg bg-blue-50">
+              <Target className="w-4 h-4 text-blue-600" />
+            </div>
+            <div>
+              <h3 className="font-semibold text-text-primary text-base">Campaign Breakdown</h3>
+              <p className="text-xs text-text-tertiary mt-0.5">{s.campaigns.length} campaigns &middot; Track-level budget allocation</p>
+            </div>
           </div>
           <div className="overflow-x-auto">
             <table className="w-full text-sm">
               <thead>
                 <tr className="border-b border-border bg-surface-secondary">
                   <th className="px-4 py-3 text-left text-xs font-medium text-text-tertiary">Campaign</th>
-                  <th className="px-4 py-3 text-right text-xs font-medium text-text-tertiary">Allocated</th>
+                  <th className="px-4 py-3 text-right text-xs font-medium text-text-tertiary">Budget Assigned</th>
+                  <th className="px-4 py-3 text-right text-xs font-medium text-text-tertiary">Track Allocated</th>
                   <th className="px-4 py-3 text-right text-xs font-medium text-text-tertiary">Spent</th>
+                  <th className="px-4 py-3 text-right text-xs font-medium text-text-tertiary">Expenses</th>
                   <th className="px-4 py-3 text-right text-xs font-medium text-text-tertiary">Revenue</th>
                   <th className="px-4 py-3 text-right text-xs font-medium text-text-tertiary">ROI</th>
-                  <th className="px-4 py-3 text-right text-xs font-medium text-text-tertiary">Impressions</th>
-                  <th className="px-4 py-3 text-right text-xs font-medium text-text-tertiary">Clicks</th>
                   <th className="px-4 py-3 text-center text-xs font-medium text-text-tertiary">Status</th>
                 </tr>
               </thead>
               <tbody className="divide-y divide-border-light">
                 {s.campaigns.map(c => {
-                  const cRoi = c.tracks_spent > 0 ? ((c.tracks_revenue - c.tracks_spent) / c.tracks_spent * 100) : 0
+                  const totalCampaignConsumed = c.tracks_spent + (c.expenses || 0)
+                  const cRoi = totalCampaignConsumed > 0 ? ((c.tracks_revenue - totalCampaignConsumed) / totalCampaignConsumed * 100) : 0
                   return (
                     <tr key={c.id} className="hover:bg-surface-secondary">
                       <td className="px-4 py-3 font-medium text-text-primary">{c.name}</td>
+                      <td className="px-4 py-3 text-right">
+                        {c.budget_from_entries > 0 ? (
+                          <span className="font-semibold text-blue-600">{c.budget_from_entries.toLocaleString()}</span>
+                        ) : <span className="text-text-tertiary">{'\u2014'}</span>}
+                      </td>
                       <td className="px-4 py-3 text-right text-text-secondary">{c.tracks_allocated.toLocaleString()}</td>
                       <td className="px-4 py-3 text-right text-text-secondary">{c.tracks_spent.toLocaleString()}</td>
+                      <td className="px-4 py-3 text-right">
+                        {c.expenses > 0 ? (
+                          <span className="font-semibold text-red-500">-{c.expenses.toLocaleString()}</span>
+                        ) : <span className="text-text-tertiary">{'\u2014'}</span>}
+                      </td>
                       <td className="px-4 py-3 text-right text-text-secondary">{c.tracks_revenue.toLocaleString()}</td>
                       <td className="px-4 py-3 text-right">
-                        {c.tracks_spent > 0 ? (
+                        {totalCampaignConsumed > 0 ? (
                           <span className={`text-xs font-semibold px-1.5 py-0.5 rounded ${cRoi >= 0 ? 'text-emerald-600 bg-emerald-50' : 'text-red-600 bg-red-50'}`}>
                             {cRoi.toFixed(0)}%
                           </span>
-                        ) : '—'}
+                        ) : '\u2014'}
                       </td>
-                      <td className="px-4 py-3 text-right text-text-secondary">{c.tracks_impressions.toLocaleString()}</td>
-                      <td className="px-4 py-3 text-right text-text-secondary">{c.tracks_clicks.toLocaleString()}</td>
                       <td className="px-4 py-3 text-center"><StatusBadge status={c.status} size="xs" /></td>
                     </tr>
                   )
@@ -264,171 +255,46 @@ export default function Finance() {
         </div>
       )}
 
-      {/* Budget entries */}
-      <div className="bg-white rounded-xl border border-border overflow-hidden">
-        <div className="flex items-center justify-between px-5 py-4 border-b border-border">
-          <h3 className="font-semibold text-text-primary">Budget Received</h3>
-          <button
-            onClick={() => { setEditing(null); setForm(EMPTY_ENTRY); setShowModal(true) }}
-            className="flex items-center gap-1.5 px-3 py-1.5 bg-brand-primary text-white rounded-lg text-xs font-medium hover:bg-brand-primary-light"
-          >
-            <Plus className="w-3.5 h-3.5" /> Add Entry
-          </button>
-        </div>
-
-        {entries.length === 0 ? (
-          <div className="py-12 text-center text-sm text-text-tertiary">
-            No budget entries yet. Add your first received budget.
-          </div>
-        ) : (
-          <div className="divide-y divide-border-light">
-            {entries.map(entry => (
-              <div key={entry.id || entry._id} className="flex items-center gap-4 px-5 py-4 hover:bg-surface-secondary">
-                <div className="p-2 rounded-lg bg-emerald-50">
-                  <DollarSign className="w-4 h-4 text-emerald-600" />
-                </div>
-                <div className="flex-1 min-w-0">
-                  <div className="flex items-center gap-2 mb-0.5">
-                    <h4 className="text-sm font-semibold text-text-primary">{entry.label}</h4>
-                    <span className="text-[10px] px-1.5 py-0.5 rounded bg-surface-tertiary text-text-tertiary capitalize">
-                      {entry.category}
-                    </span>
-                  </div>
-                  <div className="text-xs text-text-tertiary">
-                    {entry.source && <span>{entry.source} · </span>}
-                    {entry.campaign_name && <span>{entry.campaign_name} · </span>}
-                    {entry.date_received && format(new Date(entry.date_received), 'MMM d, yyyy')}
-                  </div>
-                  {entry.notes && <p className="text-xs text-text-secondary mt-0.5">{entry.notes}</p>}
-                </div>
-                <div className="text-right shrink-0">
-                  <div className="text-base font-bold text-emerald-600">{Number(entry.amount).toLocaleString()} SAR</div>
-                </div>
-                <div className="flex items-center gap-1 shrink-0">
-                  <button onClick={() => openEdit(entry)} className="p-1.5 hover:bg-surface-tertiary rounded-lg text-text-tertiary hover:text-text-primary">
-                    <Edit2 className="w-4 h-4" />
-                  </button>
-                  <button onClick={() => handleDelete(entry.id || entry._id)} className="p-1.5 hover:bg-red-50 rounded-lg text-text-tertiary hover:text-red-500">
-                    <Trash2 className="w-4 h-4" />
-                  </button>
-                </div>
-              </div>
-            ))}
-          </div>
-        )}
-      </div>
-
-      {/* Add/Edit Modal */}
-      <Modal
-        isOpen={showModal}
-        onClose={() => { setShowModal(false); setEditing(null) }}
-        title={editing ? 'Edit Budget Entry' : 'Add Budget Entry'}
-      >
-        <div className="space-y-4">
-          <div>
-            <label className="block text-sm font-medium text-text-primary mb-1">Label *</label>
-            <input
-              type="text"
-              value={form.label}
-              onChange={e => setForm(f => ({ ...f, label: e.target.value }))}
-              className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary"
-              placeholder="e.g., Seerah Campaign Budget, Additional Q1 Funds..."
-            />
-          </div>
-
-          <div className="grid grid-cols-2 gap-4">
-            <div>
-              <label className="block text-sm font-medium text-text-primary mb-1">Amount (SAR) *</label>
-              <input
-                type="number"
-                value={form.amount}
-                onChange={e => setForm(f => ({ ...f, amount: e.target.value }))}
-                className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary"
-                placeholder="50000"
-              />
+      {/* Allocated Funds breakdown */}
+      {s.projects && s.projects.filter(p => p.budget_allocated > 0 || p.expenses > 0).length > 0 && (
+        <div className="section-card">
+          <div className="section-card-header flex items-center gap-3">
+            <div className="p-2 rounded-lg bg-purple-50">
+              <Briefcase className="w-4 h-4 text-purple-600" />
             </div>
             <div>
-              <label className="block text-sm font-medium text-text-primary mb-1">Date Received *</label>
-              <input
-                type="date"
-                value={form.date_received}
-                onChange={e => setForm(f => ({ ...f, date_received: e.target.value }))}
-                className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary"
-              />
+              <h3 className="font-semibold text-text-primary text-base">Allocated Funds</h3>
+              <p className="text-xs text-text-tertiary mt-0.5">{s.projects.filter(p => p.budget_allocated > 0 || p.expenses > 0).length} work orders with assigned budget</p>
             </div>
           </div>
-
-          <div className="grid grid-cols-2 gap-4">
-            <div>
-              <label className="block text-sm font-medium text-text-primary mb-1">Source</label>
-              <input
-                type="text"
-                value={form.source}
-                onChange={e => setForm(f => ({ ...f, source: e.target.value }))}
-                className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none"
-                placeholder="e.g., CEO Approval, Annual Budget..."
-              />
-            </div>
-            <div>
-              <label className="block text-sm font-medium text-text-primary mb-1">Category</label>
-              <select
-                value={form.category}
-                onChange={e => setForm(f => ({ ...f, category: e.target.value }))}
-                className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none"
-              >
-                {CATEGORIES.map(c => <option key={c.value} value={c.value}>{c.label}</option>)}
-              </select>
-            </div>
-          </div>
-
-          <div>
-            <label className="block text-sm font-medium text-text-primary mb-1">Campaign (optional)</label>
-            <select
-              value={form.campaign_id}
-              onChange={e => setForm(f => ({ ...f, campaign_id: e.target.value }))}
-              className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none"
-            >
-              <option value="">General / Not linked</option>
-              {campaigns.map(c => <option key={c._id || c.id} value={c._id || c.id}>{c.name}</option>)}
-            </select>
-          </div>
-
-          <div>
-            <label className="block text-sm font-medium text-text-primary mb-1">Notes</label>
-            <textarea
-              value={form.notes}
-              onChange={e => setForm(f => ({ ...f, notes: e.target.value }))}
-              rows={2}
-              className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none resize-none"
-              placeholder="Any details about this budget entry..."
-            />
-          </div>
-
-          <div className="flex justify-end gap-3 pt-4 border-t border-border">
-            <button onClick={() => setShowModal(false)} className="px-4 py-2 text-sm text-text-secondary hover:bg-surface-tertiary rounded-lg">Cancel</button>
-            <button
-              onClick={handleSave}
-              disabled={!form.label || !form.amount || !form.date_received}
-              className="px-5 py-2 bg-brand-primary text-white rounded-lg text-sm font-medium hover:bg-brand-primary-light disabled:opacity-50 disabled:cursor-not-allowed shadow-sm"
-            >
-              {editing ? 'Save Changes' : 'Add Entry'}
-            </button>
+          <div className="overflow-x-auto">
+            <table className="w-full text-sm">
+              <thead>
+                <tr className="border-b border-border bg-surface-secondary">
+                  <th className="px-4 py-3 text-left text-xs font-medium text-text-tertiary">Work Order</th>
+                  <th className="px-4 py-3 text-right text-xs font-medium text-text-tertiary">Budget Allocated</th>
+                  <th className="px-4 py-3 text-right text-xs font-medium text-text-tertiary">Expenses</th>
+                  <th className="px-4 py-3 text-center text-xs font-medium text-text-tertiary">Status</th>
+                </tr>
+              </thead>
+              <tbody className="divide-y divide-border-light">
+                {s.projects.filter(p => p.budget_allocated > 0 || p.expenses > 0).map(p => (
+                  <tr key={p.id} className="hover:bg-surface-secondary">
+                    <td className="px-4 py-3 font-medium text-text-primary">{p.name}</td>
+                    <td className="px-4 py-3 text-right text-text-secondary">{p.budget_allocated.toLocaleString()} {currencySymbol}</td>
+                    <td className="px-4 py-3 text-right">
+                      {p.expenses > 0 ? (
+                        <span className="font-semibold text-red-500">-{p.expenses.toLocaleString()}</span>
+                      ) : <span className="text-text-tertiary">{'\u2014'}</span>}
+                    </td>
+                    <td className="px-4 py-3 text-center"><StatusBadge status={p.status} size="xs" /></td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
           </div>
         </div>
-      </Modal>
-
-      {/* Delete Budget Entry Confirmation */}
-      <Modal
-        isOpen={showDeleteConfirm}
-        onClose={() => { setShowDeleteConfirm(false); setEntryToDelete(null) }}
-        title="Delete Budget Entry?"
-        isConfirm
-        danger
-        confirmText="Delete Entry"
-        onConfirm={confirmDelete}
-      >
-        Are you sure you want to delete this budget entry? This action cannot be undone.
-      </Modal>
+      )}
     </div>
   )
 }

client/src/pages/Issues.jsx

@@ -0,0 +1,473 @@
+import { useState, useEffect, useContext, useMemo } from 'react'
+import { AlertCircle, Search, LayoutGrid, List, ChevronUp, ChevronDown } from 'lucide-react'
+import { AppContext } from '../App'
+import { api } from '../utils/api'
+import { useLanguage } from '../i18n/LanguageContext'
+import { useToast } from '../components/ToastContainer'
+import IssueDetailPanel from '../components/IssueDetailPanel'
+import IssueCard from '../components/IssueCard'
+import EmptyState from '../components/EmptyState'
+import { SkeletonTable, SkeletonKanbanBoard } from '../components/SkeletonLoader'
+
+const TYPE_OPTIONS = [
+  { value: 'request', label: 'Request' },
+  { value: 'correction', label: 'Correction' },
+  { value: 'complaint', label: 'Complaint' },
+  { value: 'suggestion', label: 'Suggestion' },
+  { value: 'other', label: 'Other' },
+]
+
+const PRIORITY_CONFIG = {
+  low: { label: 'Low', bg: 'bg-surface-tertiary', text: 'text-text-secondary', dot: 'bg-text-tertiary' },
+  medium: { label: 'Medium', bg: 'bg-blue-100', text: 'text-blue-700', dot: 'bg-blue-500' },
+  high: { label: 'High', bg: 'bg-orange-100', text: 'text-orange-700', dot: 'bg-orange-500' },
+  urgent: { label: 'Urgent', bg: 'bg-red-100', text: 'text-red-700', dot: 'bg-red-500' },
+}
+
+const STATUS_CONFIG = {
+  new: { label: 'New', bg: 'bg-purple-100', text: 'text-purple-700', dot: 'bg-purple-500' },
+  acknowledged: { label: 'Acknowledged', bg: 'bg-blue-100', text: 'text-blue-700', dot: 'bg-blue-500' },
+  in_progress: { label: 'In Progress', bg: 'bg-amber-100', text: 'text-amber-700', dot: 'bg-amber-500' },
+  resolved: { label: 'Resolved', bg: 'bg-emerald-100', text: 'text-emerald-700', dot: 'bg-emerald-500' },
+  declined: { label: 'Declined', bg: 'bg-surface-tertiary', text: 'text-text-secondary', dot: 'bg-text-tertiary' },
+}
+
+const STATUS_ORDER = ['new', 'acknowledged', 'in_progress', 'resolved', 'declined']
+
+export default function Issues() {
+  const { t } = useLanguage()
+  const toast = useToast()
+  const { brands } = useContext(AppContext)
+
+  const [issues, setIssues] = useState([])
+  const [counts, setCounts] = useState({})
+  const [loading, setLoading] = useState(true)
+  const [selectedIssue, setSelectedIssue] = useState(null)
+  const [searchTerm, setSearchTerm] = useState('')
+  const [filters, setFilters] = useState({ status: '', category: '', type: '', priority: '', brand: '' })
+  const [categories, setCategories] = useState([])
+  const [teamMembers, setTeamMembers] = useState([])
+
+  // View mode
+  const [viewMode, setViewMode] = useState('board')
+
+  // Drag and drop
+  const [draggedIssue, setDraggedIssue] = useState(null)
+  const [dragOverCol, setDragOverCol] = useState(null)
+
+  // List sorting
+  const [sortBy, setSortBy] = useState('created_at')
+  const [sortDir, setSortDir] = useState('desc')
+
+  useEffect(() => { loadData() }, [])
+
+  const loadData = async () => {
+    try {
+      setLoading(true)
+      const [issuesData, categoriesData, teamData] = await Promise.all([
+        api.get('/issues'),
+        api.get('/issues/categories'),
+        api.get('/users/team'),
+      ])
+      setIssues(issuesData.issues || [])
+      setCounts(issuesData.counts || {})
+      setCategories(categoriesData || [])
+      setTeamMembers(Array.isArray(teamData) ? teamData : teamData.data || [])
+    } catch (err) {
+      console.error('Failed to load issues:', err)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  // Filtering
+  const filteredIssues = useMemo(() => {
+    let filtered = [...issues]
+    if (searchTerm) {
+      const term = searchTerm.toLowerCase()
+      filtered = filtered.filter(i =>
+        i.title?.toLowerCase().includes(term) ||
+        i.submitter_name?.toLowerCase().includes(term) ||
+        i.submitter_email?.toLowerCase().includes(term) ||
+        i.category?.toLowerCase().includes(term)
+      )
+    }
+    if (filters.status) filtered = filtered.filter(i => i.status === filters.status)
+    if (filters.category) filtered = filtered.filter(i => i.category === filters.category)
+    if (filters.type) filtered = filtered.filter(i => i.type === filters.type)
+    if (filters.priority) filtered = filtered.filter(i => i.priority === filters.priority)
+    if (filters.brand) filtered = filtered.filter(i => String(i.brand_id) === String(filters.brand))
+    return filtered
+  }, [issues, searchTerm, filters])
+
+  // List sorting
+  const sortedIssues = useMemo(() => {
+    const priorityOrder = { urgent: 0, high: 1, medium: 2, low: 3 }
+    const statusOrder = { new: 0, acknowledged: 1, in_progress: 2, resolved: 3, declined: 4 }
+    return [...filteredIssues].sort((a, b) => {
+      let cmp = 0
+      if (sortBy === 'created_at') {
+        cmp = (a.created_at || a.CreatedAt || '').localeCompare(b.created_at || b.CreatedAt || '')
+      } else if (sortBy === 'title') {
+        cmp = (a.title || '').localeCompare(b.title || '')
+      } else if (sortBy === 'priority') {
+        cmp = (priorityOrder[a.priority] ?? 2) - (priorityOrder[b.priority] ?? 2)
+      } else if (sortBy === 'status') {
+        cmp = (statusOrder[a.status] ?? 0) - (statusOrder[b.status] ?? 0)
+      }
+      return sortDir === 'asc' ? cmp : -cmp
+    })
+  }, [filteredIssues, sortBy, sortDir])
+
+  const updateFilter = (key, value) => setFilters(f => ({ ...f, [key]: value }))
+  const clearFilters = () => {
+    setFilters({ status: '', category: '', type: '', priority: '', brand: '' })
+    setSearchTerm('')
+  }
+  const hasActiveFilters = Object.values(filters).some(Boolean) || searchTerm
+
+  const getAssigneeName = (assignedToId) => {
+    if (!assignedToId) return '—'
+    const member = teamMembers.find(m => m.id === assignedToId || m._id === assignedToId)
+    return member?.name || '—'
+  }
+
+  const formatDate = (dateStr) => {
+    if (!dateStr) return '—'
+    return new Date(dateStr).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })
+  }
+
+  // Drag and drop handlers
+  const handleMoveIssue = async (issueId, newStatus) => {
+    try {
+      await api.patch(`/issues/${issueId}`, { status: newStatus })
+      toast.success(t('issues.statusUpdated'))
+      loadData()
+    } catch (err) {
+      console.error('Move issue failed:', err)
+      toast.error('Failed to update status')
+    }
+  }
+
+  const handleDragStart = (e, issue) => {
+    setDraggedIssue(issue)
+    e.dataTransfer.effectAllowed = 'move'
+    setTimeout(() => { if (e.target) e.target.style.opacity = '0.4' }, 0)
+  }
+  const handleDragEnd = (e) => {
+    e.target.style.opacity = '1'
+    setDraggedIssue(null)
+    setDragOverCol(null)
+  }
+  const handleDragOver = (e, colStatus) => {
+    e.preventDefault()
+    e.dataTransfer.dropEffect = 'move'
+    setDragOverCol(colStatus)
+  }
+  const handleDragLeave = (e) => {
+    if (!e.currentTarget.contains(e.relatedTarget)) setDragOverCol(null)
+  }
+  const handleDrop = (e, colStatus) => {
+    e.preventDefault()
+    setDragOverCol(null)
+    if (draggedIssue && draggedIssue.status !== colStatus) {
+      handleMoveIssue(draggedIssue.Id || draggedIssue.id, colStatus)
+    }
+    setDraggedIssue(null)
+  }
+
+  const toggleSort = (col) => {
+    if (sortBy === col) setSortDir(d => d === 'asc' ? 'desc' : 'asc')
+    else { setSortBy(col); setSortDir('asc') }
+  }
+
+  const SortIcon = ({ col }) => {
+    if (sortBy !== col) return null
+    return sortDir === 'asc'
+      ? <ChevronUp className="w-3 h-3 inline ml-0.5" />
+      : <ChevronDown className="w-3 h-3 inline ml-0.5" />
+  }
+
+  if (loading) {
+    return (
+      <div className="space-y-4">
+        {viewMode === 'board' ? <SkeletonKanbanBoard /> : <SkeletonTable rows={8} cols={5} />}
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-4 animate-fade-in">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-bold text-text-primary flex items-center gap-2">
+            <AlertCircle className="w-7 h-7" />
+            Issues
+          </h1>
+          <p className="text-text-secondary mt-1">Track and manage issue submissions</p>
+        </div>
+
+        {/* View switcher */}
+        <div className="flex items-center bg-surface-tertiary rounded-lg p-0.5">
+          {[
+            { mode: 'board', icon: LayoutGrid, label: t('issues.board') },
+            { mode: 'list', icon: List, label: t('issues.list') },
+          ].map(({ mode, icon: Icon, label }) => (
+            <button
+              key={mode}
+              onClick={() => setViewMode(mode)}
+              className={`flex items-center gap-1.5 px-3 py-1.5 rounded-md text-xs font-medium transition-colors ${
+                viewMode === mode
+                  ? 'bg-white text-text-primary shadow-sm'
+                  : 'text-text-tertiary hover:text-text-secondary'
+              }`}
+            >
+              <Icon className="w-3.5 h-3.5" />
+              {label}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* Status Counts */}
+      <div className="grid grid-cols-2 md:grid-cols-5 gap-4 stagger-children">
+        {Object.entries(STATUS_CONFIG).map(([status, config]) => (
+          <div
+            key={status}
+            className={`bg-surface rounded-lg border p-4 cursor-pointer hover:shadow-sm transition-all ${
+              filters.status === status ? 'border-brand-primary ring-1 ring-brand-primary/20' : 'border-border'
+            }`}
+            onClick={() => updateFilter('status', filters.status === status ? '' : status)}
+          >
+            <div className="flex items-center gap-2 mb-1">
+              <span className={`w-2 h-2 rounded-full ${config.dot}`}></span>
+              <span className="text-xs font-medium text-text-tertiary uppercase">{config.label}</span>
+            </div>
+            <div className="text-2xl font-bold text-text-primary">{counts[status] || 0}</div>
+          </div>
+        ))}
+      </div>
+
+      {/* Search & Filters - always visible inline */}
+      <div className="flex items-center gap-3 flex-wrap">
+        {/* Search */}
+        <div className="relative flex-1 min-w-[200px] max-w-xs">
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-text-tertiary" />
+          <input
+            type="text"
+            placeholder="Search issues..."
+            value={searchTerm}
+            onChange={e => setSearchTerm(e.target.value)}
+            className="w-full pl-10 pr-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 bg-surface"
+          />
+        </div>
+
+        <select
+          value={filters.status}
+          onChange={e => updateFilter('status', e.target.value)}
+          className="px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 bg-surface"
+        >
+          <option value="">All Statuses</option>
+          {Object.entries(STATUS_CONFIG).map(([key, config]) => (
+            <option key={key} value={key}>{config.label}</option>
+          ))}
+        </select>
+
+        <select
+          value={filters.category}
+          onChange={e => updateFilter('category', e.target.value)}
+          className="px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 bg-surface"
+        >
+          <option value="">All Categories</option>
+          {categories.map(cat => <option key={cat} value={cat}>{cat}</option>)}
+        </select>
+
+        <select
+          value={filters.type}
+          onChange={e => updateFilter('type', e.target.value)}
+          className="px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 bg-surface"
+        >
+          <option value="">All Types</option>
+          {TYPE_OPTIONS.map(opt => <option key={opt.value} value={opt.value}>{opt.label}</option>)}
+        </select>
+
+        <select
+          value={filters.brand || ''}
+          onChange={e => updateFilter('brand', e.target.value)}
+          className="px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 bg-surface"
+        >
+          <option value="">All Brands</option>
+          {(brands || []).map(b => (
+            <option key={b._id || b.Id} value={b._id || b.Id}>{b.name}</option>
+          ))}
+        </select>
+
+        <select
+          value={filters.priority}
+          onChange={e => updateFilter('priority', e.target.value)}
+          className="px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 bg-surface"
+        >
+          <option value="">All Priorities</option>
+          {Object.entries(PRIORITY_CONFIG).map(([key, config]) => (
+            <option key={key} value={key}>{config.label}</option>
+          ))}
+        </select>
+
+        {hasActiveFilters && (
+          <button onClick={clearFilters} className="px-3 py-2 rounded-lg text-sm font-medium text-text-tertiary hover:text-text-primary">
+            Clear All
+          </button>
+        )}
+      </div>
+
+      {/* Board View */}
+      {viewMode === 'board' && (
+        filteredIssues.length === 0 ? (
+          <EmptyState
+            icon={AlertCircle}
+            title="No issues found"
+            description={hasActiveFilters ? 'Try adjusting your filters' : 'No issues have been submitted yet'}
+          />
+        ) : (
+          <div className="flex gap-4 overflow-x-auto pb-4">
+            {STATUS_ORDER.map(status => {
+              const config = STATUS_CONFIG[status]
+              const columnIssues = filteredIssues.filter(i => i.status === status)
+              return (
+                <div
+                  key={status}
+                  className={`flex-shrink-0 w-72 rounded-xl border transition-colors ${
+                    dragOverCol === status ? 'border-brand-primary bg-brand-primary/5' : 'border-border bg-surface-secondary/50'
+                  }`}
+                  onDragOver={e => handleDragOver(e, status)}
+                  onDragLeave={handleDragLeave}
+                  onDrop={e => handleDrop(e, status)}
+                >
+                  {/* Column header */}
+                  <div className="px-3 py-3 border-b border-border">
+                    <div className="flex items-center gap-2">
+                      <span className={`w-2.5 h-2.5 rounded-full ${config.dot}`} />
+                      <span className="text-sm font-semibold text-text-primary">{config.label}</span>
+                      <span className="text-xs bg-surface-tertiary text-text-tertiary px-1.5 py-0.5 rounded-full font-medium">
+                        {columnIssues.length}
+                      </span>
+                    </div>
+                  </div>
+
+                  {/* Cards */}
+                  <div className="p-2 space-y-2 min-h-[120px]">
+                    {columnIssues.length === 0 ? (
+                      <div className="text-center py-6 text-xs text-text-tertiary">
+                        {t('issues.noIssuesInColumn')}
+                      </div>
+                    ) : (
+                      columnIssues.map(issue => (
+                        <div
+                          key={issue.Id || issue.id}
+                          draggable
+                          onDragStart={e => handleDragStart(e, issue)}
+                          onDragEnd={handleDragEnd}
+                        >
+                          <IssueCard issue={issue} onClick={setSelectedIssue} />
+                        </div>
+                      ))
+                    )}
+                  </div>
+                </div>
+              )
+            })}
+          </div>
+        )
+      )}
+
+      {/* List View */}
+      {viewMode === 'list' && (
+        sortedIssues.length === 0 ? (
+          <EmptyState
+            icon={AlertCircle}
+            title="No issues found"
+            description={hasActiveFilters ? 'Try adjusting your filters' : 'No issues have been submitted yet'}
+          />
+        ) : (
+          <div className="bg-surface rounded-lg border border-border overflow-hidden">
+            <div className="overflow-x-auto">
+              <table className="w-full">
+                <thead className="bg-surface-secondary border-b border-border">
+                  <tr>
+                    <th className="px-4 py-3 text-left text-xs font-semibold text-text-secondary uppercase cursor-pointer hover:text-text-primary" onClick={() => toggleSort('title')}>
+                      Title <SortIcon col="title" />
+                    </th>
+                    <th className="px-4 py-3 text-left text-xs font-semibold text-text-secondary uppercase">Submitter</th>
+                    <th className="px-4 py-3 text-left text-xs font-semibold text-text-secondary uppercase">Brand</th>
+                    <th className="px-4 py-3 text-left text-xs font-semibold text-text-secondary uppercase">Category</th>
+                    <th className="px-4 py-3 text-left text-xs font-semibold text-text-secondary uppercase">Type</th>
+                    <th className="px-4 py-3 text-left text-xs font-semibold text-text-secondary uppercase cursor-pointer hover:text-text-primary" onClick={() => toggleSort('priority')}>
+                      Priority <SortIcon col="priority" />
+                    </th>
+                    <th className="px-4 py-3 text-left text-xs font-semibold text-text-secondary uppercase cursor-pointer hover:text-text-primary" onClick={() => toggleSort('status')}>
+                      Status <SortIcon col="status" />
+                    </th>
+                    <th className="px-4 py-3 text-left text-xs font-semibold text-text-secondary uppercase">Assigned To</th>
+                    <th className="px-4 py-3 text-left text-xs font-semibold text-text-secondary uppercase cursor-pointer hover:text-text-primary" onClick={() => toggleSort('created_at')}>
+                      Created <SortIcon col="created_at" />
+                    </th>
+                  </tr>
+                </thead>
+                <tbody className="divide-y divide-border">
+                  {sortedIssues.map(issue => {
+                    const priorityConfig = PRIORITY_CONFIG[issue.priority] || PRIORITY_CONFIG.medium
+                    const statusConfig = STATUS_CONFIG[issue.status] || STATUS_CONFIG.new
+                    return (
+                      <tr
+                        key={issue.Id || issue.id}
+                        onClick={() => setSelectedIssue(issue)}
+                        className="hover:bg-surface-secondary cursor-pointer transition-colors"
+                      >
+                        <td className="px-4 py-3 text-sm font-medium text-text-primary">{issue.title}</td>
+                        <td className="px-4 py-3 text-sm text-text-secondary">
+                          <div>{issue.submitter_name}</div>
+                          <div className="text-xs text-text-tertiary">{issue.submitter_email}</div>
+                        </td>
+                        <td className="px-4 py-3 text-sm text-text-secondary">{issue.brand_name || issue.brandName || '—'}</td>
+                        <td className="px-4 py-3 text-sm text-text-secondary">{issue.category || '—'}</td>
+                        <td className="px-4 py-3 text-sm">
+                          <span className="text-xs px-2 py-1 rounded-full bg-surface-tertiary text-text-secondary">
+                            {TYPE_OPTIONS.find(t => t.value === issue.type)?.label || issue.type}
+                          </span>
+                        </td>
+                        <td className="px-4 py-3 text-sm">
+                          <span className={`text-xs px-2 py-1 rounded-full font-medium ${priorityConfig.bg} ${priorityConfig.text}`}>
+                            {priorityConfig.label}
+                          </span>
+                        </td>
+                        <td className="px-4 py-3 text-sm">
+                          <span className={`text-xs px-2 py-1 rounded-full font-medium flex items-center gap-1.5 w-fit ${statusConfig.bg} ${statusConfig.text}`}>
+                            <span className={`w-1.5 h-1.5 rounded-full ${statusConfig.dot}`}></span>
+                            {statusConfig.label}
+                          </span>
+                        </td>
+                        <td className="px-4 py-3 text-sm text-text-secondary">{getAssigneeName(issue.assigned_to_id)}</td>
+                        <td className="px-4 py-3 text-sm text-text-tertiary">{formatDate(issue.created_at)}</td>
+                      </tr>
+                    )
+                  })}
+                </tbody>
+              </table>
+            </div>
+          </div>
+        )
+      )}
+
+      {/* Detail Panel */}
+      {selectedIssue && (
+        <IssueDetailPanel
+          issue={selectedIssue}
+          onClose={() => setSelectedIssue(null)}
+          onUpdate={loadData}
+          teamMembers={teamMembers}
+        />
+      )}
+    </div>
+  )
+}

client/src/pages/Login.jsx

@@ -1,8 +1,9 @@
-import { useState } from 'react'
+import { useState, useEffect } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { useAuth } from '../contexts/AuthContext'
 import { useLanguage } from '../i18n/LanguageContext'
-import { Megaphone, Lock, Mail, AlertCircle } from 'lucide-react'
+import { Megaphone, Lock, Mail, AlertCircle, User, CheckCircle } from 'lucide-react'
+import { api } from '../utils/api'
 
 export default function Login() {
   const navigate = useNavigate()
@@ -13,6 +14,17 @@ export default function Login() {
   const [loading, setLoading] = useState(false)
   const [error, setError] = useState('')
 
+  const [needsSetup, setNeedsSetup] = useState(null)
+  const [setupName, setSetupName] = useState('')
+  const [setupEmail, setSetupEmail] = useState('')
+  const [setupPassword, setSetupPassword] = useState('')
+  const [setupConfirm, setSetupConfirm] = useState('')
+  const [setupDone, setSetupDone] = useState(false)
+
+  useEffect(() => {
+    api.get('/setup/status').then(data => setNeedsSetup(data.needsSetup)).catch(() => setNeedsSetup(false))
+  }, [])
+
   const handleSubmit = async (e) => {
     e.preventDefault()
     setError('')
@@ -28,6 +40,35 @@ export default function Login() {
     }
   }
 
+  const handleSetup = async (e) => {
+    e.preventDefault()
+    setError('')
+    if (setupPassword !== setupConfirm) {
+      setError('Passwords do not match')
+      return
+    }
+    setLoading(true)
+
+    try {
+      await api.post('/setup', { name: setupName, email: setupEmail, password: setupPassword })
+      setSetupDone(true)
+      setNeedsSetup(false)
+      setEmail(setupEmail)
+    } catch (err) {
+      setError(err.message || 'Setup failed')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  if (needsSetup === null) {
+    return (
+      <div className="min-h-screen bg-gradient-to-br from-slate-900 via-blue-900 to-slate-900 flex items-center justify-center">
+        <div className="w-8 h-8 border-2 border-white/30 border-t-white rounded-full animate-spin" />
+      </div>
+    )
+  }
+
   return (
     <div className="min-h-screen bg-gradient-to-br from-slate-900 via-blue-900 to-slate-900 flex items-center justify-center px-4">
       <div className="w-full max-w-md">
@@ -36,82 +77,192 @@ export default function Login() {
           <div className="w-16 h-16 bg-gradient-to-br from-blue-500 to-purple-600 rounded-2xl flex items-center justify-center mx-auto mb-4 shadow-lg">
             <Megaphone className="w-8 h-8 text-white" />
           </div>
-          <h1 className="text-3xl font-bold text-white mb-2">{t('login.title')}</h1>
-          <p className="text-slate-400">{t('login.subtitle')}</p>
+          <h1 className="text-3xl font-bold text-white mb-2">
+            {needsSetup ? 'Initial Setup' : t('login.title')}
+          </h1>
+          <p className="text-slate-400">
+            {needsSetup ? 'Create your superadmin account to get started' : t('login.subtitle')}
+          </p>
         </div>
 
-        {/* Login Card */}
-        <div className="bg-slate-800/50 backdrop-blur-sm rounded-2xl border border-slate-700/50 p-8 shadow-2xl">
-          <form onSubmit={handleSubmit} className="space-y-5">
-            {/* Email */}
-            <div>
-              <label className="block text-sm font-medium text-slate-300 mb-2">
-                {t('auth.email')}
-              </label>
-              <div className="relative">
-                <Mail className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-slate-500" />
-                <input
-                  type="email"
-                  value={email}
-                  onChange={(e) => setEmail(e.target.value)}
-                  dir="auto"
-                  className="w-full pl-11 pr-4 py-3 bg-slate-900/50 border border-slate-700 rounded-lg text-white placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"
-                  placeholder="f.mahidi@samayainvest.com"
-                  required
-                  autoFocus
-                />
-              </div>
-            </div>
-
-            {/* Password */}
-            <div>
-              <label className="block text-sm font-medium text-slate-300 mb-2">
-                {t('auth.password')}
-              </label>
-              <div className="relative">
-                <Lock className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-slate-500" />
-                <input
-                  type="password"
-                  value={password}
-                  onChange={(e) => setPassword(e.target.value)}
-                  className="w-full pl-11 pr-4 py-3 bg-slate-900/50 border border-slate-700 rounded-lg text-white placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"
-                  placeholder="••••••••"
-                  required
-                />
-              </div>
-            </div>
-
-            {/* Error Message */}
-            {error && (
-              <div className="flex items-center gap-2 p-3 bg-red-500/10 border border-red-500/30 rounded-lg">
-                <AlertCircle className="w-5 h-5 text-red-400 shrink-0" />
-                <p className="text-sm text-red-400">{error}</p>
-              </div>
-            )}
-
-            {/* Submit Button */}
-            <button
-              type="submit"
-              disabled={loading}
-              className="w-full py-3 bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white font-semibold rounded-lg shadow-lg hover:shadow-xl transition-all disabled:opacity-50 disabled:cursor-not-allowed"
-            >
-              {loading ? (
-                <span className="flex items-center justify-center gap-2">
-                  <div className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin" />
-                  {t('auth.signingIn')}
-                </span>
-              ) : (
-                t('auth.loginBtn')
-              )}
-            </button>
-          </form>
-
-          {/* Default Credentials */}
-          <div className="mt-6 pt-6 border-t border-slate-700/50">
-            <p className="text-xs text-slate-500 text-center">
-              {t('login.defaultCreds')} <span className="text-slate-400 font-medium">f.mahidi@samayainvest.com</span> / <span className="text-slate-400 font-medium">admin123</span>
-            </p>
+        {/* Success Message */}
+        {setupDone && (
+          <div className="flex items-center gap-2 p-3 mb-4 bg-green-500/10 border border-green-500/30 rounded-lg">
+            <CheckCircle className="w-5 h-5 text-green-400 shrink-0" />
+            <p className="text-sm text-green-400">Account created. You can now log in.</p>
           </div>
+        )}
+
+        {/* Card */}
+        <div className="bg-slate-800/50 backdrop-blur-sm rounded-2xl border border-slate-700/50 p-8 shadow-2xl">
+          {needsSetup ? (
+            <form onSubmit={handleSetup} className="space-y-5">
+              {/* Name */}
+              <div>
+                <label className="block text-sm font-medium text-slate-300 mb-2">Name</label>
+                <div className="relative">
+                  <User className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-slate-500" />
+                  <input
+                    type="text"
+                    value={setupName}
+                    onChange={(e) => setSetupName(e.target.value)}
+                    className="w-full pl-11 pr-4 py-3 bg-slate-900/50 border border-slate-700 rounded-lg text-white placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"
+                    placeholder="Your name"
+                    required
+                    autoFocus
+                  />
+                </div>
+              </div>
+
+              {/* Email */}
+              <div>
+                <label className="block text-sm font-medium text-slate-300 mb-2">Email</label>
+                <div className="relative">
+                  <Mail className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-slate-500" />
+                  <input
+                    type="email"
+                    value={setupEmail}
+                    onChange={(e) => setSetupEmail(e.target.value)}
+                    dir="auto"
+                    className="w-full pl-11 pr-4 py-3 bg-slate-900/50 border border-slate-700 rounded-lg text-white placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"
+                    placeholder="admin@company.com"
+                    required
+                  />
+                </div>
+              </div>
+
+              {/* Password */}
+              <div>
+                <label className="block text-sm font-medium text-slate-300 mb-2">Password</label>
+                <div className="relative">
+                  <Lock className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-slate-500" />
+                  <input
+                    type="password"
+                    value={setupPassword}
+                    onChange={(e) => setSetupPassword(e.target.value)}
+                    className="w-full pl-11 pr-4 py-3 bg-slate-900/50 border border-slate-700 rounded-lg text-white placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"
+                    placeholder="Choose a strong password"
+                    required
+                    minLength={6}
+                  />
+                </div>
+              </div>
+
+              {/* Confirm Password */}
+              <div>
+                <label className="block text-sm font-medium text-slate-300 mb-2">Confirm Password</label>
+                <div className="relative">
+                  <Lock className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-slate-500" />
+                  <input
+                    type="password"
+                    value={setupConfirm}
+                    onChange={(e) => setSetupConfirm(e.target.value)}
+                    className="w-full pl-11 pr-4 py-3 bg-slate-900/50 border border-slate-700 rounded-lg text-white placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"
+                    placeholder="Re-enter your password"
+                    required
+                    minLength={6}
+                  />
+                </div>
+              </div>
+
+              {/* Error */}
+              {error && (
+                <div className="flex items-center gap-2 p-3 bg-red-500/10 border border-red-500/30 rounded-lg">
+                  <AlertCircle className="w-5 h-5 text-red-400 shrink-0" />
+                  <p className="text-sm text-red-400">{error}</p>
+                </div>
+              )}
+
+              {/* Submit */}
+              <button
+                type="submit"
+                disabled={loading}
+                className="w-full py-3 bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white font-semibold rounded-lg shadow-lg hover:shadow-xl transition-all disabled:opacity-50 disabled:cursor-not-allowed"
+              >
+                {loading ? (
+                  <span className="flex items-center justify-center gap-2">
+                    <div className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin" />
+                    Creating account...
+                  </span>
+                ) : (
+                  'Create Superadmin Account'
+                )}
+              </button>
+            </form>
+          ) : (
+            <form onSubmit={handleSubmit} className="space-y-5">
+              {/* Email */}
+              <div>
+                <label className="block text-sm font-medium text-slate-300 mb-2">
+                  {t('auth.email')}
+                </label>
+                <div className="relative">
+                  <Mail className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-slate-500" />
+                  <input
+                    type="email"
+                    value={email}
+                    onChange={(e) => setEmail(e.target.value)}
+                    dir="auto"
+                    className="w-full pl-11 pr-4 py-3 bg-slate-900/50 border border-slate-700 rounded-lg text-white placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"
+                    placeholder="user@company.com"
+                    required
+                    autoFocus
+                  />
+                </div>
+              </div>
+
+              {/* Password */}
+              <div>
+                <label className="block text-sm font-medium text-slate-300 mb-2">
+                  {t('auth.password')}
+                </label>
+                <div className="relative">
+                  <Lock className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-slate-500" />
+                  <input
+                    type="password"
+                    value={password}
+                    onChange={(e) => setPassword(e.target.value)}
+                    className="w-full pl-11 pr-4 py-3 bg-slate-900/50 border border-slate-700 rounded-lg text-white placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"
+                    placeholder="••••••••"
+                    required
+                  />
+                </div>
+              </div>
+
+              {/* Error */}
+              {error && (
+                <div className="flex items-center gap-2 p-3 bg-red-500/10 border border-red-500/30 rounded-lg">
+                  <AlertCircle className="w-5 h-5 text-red-400 shrink-0" />
+                  <p className="text-sm text-red-400">{error}</p>
+                </div>
+              )}
+
+              {/* Submit */}
+              <button
+                type="submit"
+                disabled={loading}
+                className="w-full py-3 bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white font-semibold rounded-lg shadow-lg hover:shadow-xl transition-all disabled:opacity-50 disabled:cursor-not-allowed"
+              >
+                {loading ? (
+                  <span className="flex items-center justify-center gap-2">
+                    <div className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin" />
+                    {t('auth.signingIn')}
+                  </span>
+                ) : (
+                  t('auth.loginBtn')
+                )}
+              </button>
+            </form>
+          )}
+
+          {/* Footer */}
+          {!needsSetup && (
+            <div className="mt-6 pt-6 border-t border-slate-700/50">
+              <p className="text-xs text-slate-500 text-center">
+                {t('login.forgotPassword')}
+              </p>
+            </div>
+          )}
         </div>
       </div>
     </div>

client/src/pages/PostCalendar.jsx

@@ -0,0 +1,300 @@
+import { useState, useEffect, useContext } from 'react'
+import { ChevronLeft, ChevronRight, Calendar as CalendarIcon } from 'lucide-react'
+import { AppContext } from '../App'
+import { useLanguage } from '../i18n/LanguageContext'
+import { api, PLATFORMS } from '../utils/api'
+import PostDetailPanel from '../components/PostDetailPanel'
+import { SkeletonCalendar } from '../components/SkeletonLoader'
+
+const DAYS = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
+
+const STATUS_COLORS = {
+  draft: 'bg-surface-tertiary text-text-secondary',
+  in_review: 'bg-amber-100 text-amber-700',
+  approved: 'bg-blue-100 text-blue-700',
+  scheduled: 'bg-purple-100 text-purple-700',
+  published: 'bg-emerald-100 text-emerald-700',
+  rejected: 'bg-red-100 text-red-700',
+}
+
+function getMonthData(year, month) {
+  const firstDay = new Date(year, month, 1).getDay()
+  const daysInMonth = new Date(year, month + 1, 0).getDate()
+  const prevDays = new Date(year, month, 0).getDate()
+
+  const cells = []
+  // Previous month trailing days
+  for (let i = firstDay - 1; i >= 0; i--) {
+    cells.push({ day: prevDays - i, current: false, date: new Date(year, month - 1, prevDays - i) })
+  }
+  // Current month
+  for (let d = 1; d <= daysInMonth; d++) {
+    cells.push({ day: d, current: true, date: new Date(year, month, d) })
+  }
+  // Next month leading days
+  const remaining = 42 - cells.length
+  for (let d = 1; d <= remaining; d++) {
+    cells.push({ day: d, current: false, date: new Date(year, month + 1, d) })
+  }
+  return cells
+}
+
+function dateKey(d) {
+  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`
+}
+
+export default function PostCalendar() {
+  const { t } = useLanguage()
+  const { brands } = useContext(AppContext)
+  const today = new Date()
+  const [year, setYear] = useState(today.getFullYear())
+  const [month, setMonth] = useState(today.getMonth())
+  const [posts, setPosts] = useState([])
+  const [loading, setLoading] = useState(true)
+  const [filters, setFilters] = useState({ brand: '', platform: '', status: '' })
+  const [selectedPost, setSelectedPost] = useState(null)
+
+  useEffect(() => {
+    loadPosts()
+  }, [])
+
+  const loadPosts = async () => {
+    try {
+      const res = await api.get('/posts')
+      setPosts(res.data || res || [])
+    } catch (err) {
+      console.error('Failed to load posts:', err)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const cells = getMonthData(year, month)
+  const todayKey = dateKey(today)
+
+  // Filter posts
+  const filteredPosts = posts.filter(p => {
+    if (filters.brand && String(p.brand_id || p.brandId) !== filters.brand) return false
+    if (filters.platform) {
+      const platforms = p.platforms || (p.platform ? [p.platform] : [])
+      if (!platforms.includes(filters.platform)) return false
+    }
+    if (filters.status && p.status !== filters.status) return false
+    return true
+  })
+
+  // Group posts by date (use scheduled_date or published_date)
+  const postsByDate = {}
+  const unscheduled = []
+  for (const post of filteredPosts) {
+    const dateStr = post.scheduled_date || post.scheduledDate || post.published_date || post.publishedDate
+    if (dateStr) {
+      const key = dateStr.slice(0, 10) // yyyy-mm-dd
+      if (!postsByDate[key]) postsByDate[key] = []
+      postsByDate[key].push(post)
+    } else {
+      unscheduled.push(post)
+    }
+  }
+
+  const prevMonth = () => {
+    if (month === 0) { setMonth(11); setYear(y => y - 1) }
+    else setMonth(m => m - 1)
+  }
+  const nextMonth = () => {
+    if (month === 11) { setMonth(0); setYear(y => y + 1) }
+    else setMonth(m => m + 1)
+  }
+  const goToday = () => { setYear(today.getFullYear()); setMonth(today.getMonth()) }
+
+  const monthLabel = new Date(year, month).toLocaleString('default', { month: 'long', year: 'numeric' })
+
+  const handlePostClick = (post) => {
+    setSelectedPost(post)
+  }
+
+  const handlePanelClose = () => {
+    setSelectedPost(null)
+    loadPosts()
+  }
+
+  if (loading) {
+    return (
+      <div className="space-y-4">
+        <SkeletonCalendar />
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-4 animate-fade-in">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-bold text-text-primary">Content Calendar</h1>
+          <p className="text-sm text-text-secondary mt-1">Schedule and plan your posts</p>
+        </div>
+      </div>
+
+      {/* Filters */}
+      <div className="flex flex-wrap items-center gap-3">
+        <select
+          value={filters.brand}
+          onChange={e => setFilters(f => ({ ...f, brand: e.target.value }))}
+          className="text-sm border border-border rounded-lg px-3 py-2 bg-surface text-text-secondary focus:outline-none focus:ring-2 focus:ring-brand-primary/20 transition-colors"
+        >
+          <option value="">All Brands</option>
+          {brands.map(b => <option key={b._id} value={b._id}>{b.name}</option>)}
+        </select>
+
+        <select
+          value={filters.platform}
+          onChange={e => setFilters(f => ({ ...f, platform: e.target.value }))}
+          className="text-sm border border-border rounded-lg px-3 py-2 bg-surface text-text-secondary focus:outline-none focus:ring-2 focus:ring-brand-primary/20 transition-colors"
+        >
+          <option value="">All Platforms</option>
+          {Object.entries(PLATFORMS).map(([k, v]) => <option key={k} value={k}>{v.label}</option>)}
+        </select>
+
+        <select
+          value={filters.status}
+          onChange={e => setFilters(f => ({ ...f, status: e.target.value }))}
+          className="text-sm border border-border rounded-lg px-3 py-2 bg-surface text-text-secondary focus:outline-none focus:ring-2 focus:ring-brand-primary/20 transition-colors"
+        >
+          <option value="">All Statuses</option>
+          <option value="draft">Draft</option>
+          <option value="in_review">In Review</option>
+          <option value="approved">Approved</option>
+          <option value="scheduled">Scheduled</option>
+          <option value="published">Published</option>
+          <option value="rejected">Rejected</option>
+        </select>
+      </div>
+
+      {/* Calendar */}
+      <div className="bg-surface rounded-xl border border-border overflow-hidden">
+        {/* Nav */}
+        <div className="flex items-center justify-between px-6 py-4 border-b border-border">
+          <div className="flex items-center gap-3">
+            <button onClick={prevMonth} className="p-2 rounded-lg hover:bg-surface-tertiary text-text-tertiary hover:text-text-primary transition-colors">
+              <ChevronLeft className="w-5 h-5" />
+            </button>
+            <h3 className="text-lg font-semibold text-text-primary min-w-[180px] text-center">{monthLabel}</h3>
+            <button onClick={nextMonth} className="p-2 rounded-lg hover:bg-surface-tertiary text-text-tertiary hover:text-text-primary transition-colors">
+              <ChevronRight className="w-5 h-5" />
+            </button>
+          </div>
+          <button onClick={goToday} className="px-4 py-2 text-sm font-medium text-brand-primary hover:bg-brand-primary/5 rounded-lg transition-colors">
+            Today
+          </button>
+        </div>
+
+        {/* Day headers */}
+        <div className="grid grid-cols-7 border-b border-border bg-surface-secondary">
+          {DAYS.map(d => (
+            <div key={d} className="text-center text-xs font-semibold text-text-tertiary uppercase py-3">
+              {d}
+            </div>
+          ))}
+        </div>
+
+        {/* Cells */}
+        <div className="grid grid-cols-7">
+          {cells.map((cell, i) => {
+            const key = dateKey(cell.date)
+            const isToday = key === todayKey
+            const dayPosts = postsByDate[key] || []
+            return (
+              <div
+                key={i}
+                className={`border-r border-b border-border min-h-[110px] p-2 ${
+                  cell.current ? 'bg-surface' : 'bg-surface-secondary/30'
+                } ${i % 7 === 6 ? 'border-r-0' : ''}`}
+              >
+                <div className={`text-sm font-semibold mb-1 w-7 h-7 flex items-center justify-center rounded-full ${
+                  isToday ? 'bg-brand-primary text-white' : cell.current ? 'text-text-primary' : 'text-text-tertiary'
+                }`}>
+                  {cell.day}
+                </div>
+                <div className="space-y-1">
+                  {dayPosts.slice(0, 3).map(post => (
+                    <button
+                      key={post.Id || post._id}
+                      onClick={() => handlePostClick(post)}
+                      className={`w-full text-left text-[10px] px-2 py-1 rounded font-medium hover:opacity-80 transition-opacity truncate ${
+                        STATUS_COLORS[post.status] || 'bg-surface-tertiary text-text-secondary'
+                      }`}
+                      title={post.title}
+                    >
+                      {post.title}
+                    </button>
+                  ))}
+                  {dayPosts.length > 3 && (
+                    <div className="text-[9px] text-text-tertiary text-center font-medium">
+                      +{dayPosts.length - 3} more
+                    </div>
+                  )}
+                </div>
+              </div>
+            )
+          })}
+        </div>
+      </div>
+
+      {/* Unscheduled Posts */}
+      {unscheduled.length > 0 && (
+        <div className="bg-surface rounded-xl border border-border p-6">
+          <h3 className="text-sm font-semibold text-text-tertiary uppercase mb-3">Unscheduled Posts</h3>
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
+            {unscheduled.map(post => (
+              <button
+                key={post.Id || post._id}
+                onClick={() => handlePostClick(post)}
+                className="text-left bg-surface-secondary border border-border rounded-lg p-3 hover:border-brand-primary/30 transition-colors"
+              >
+                <div className="flex items-center gap-2 mb-1">
+                  <span className={`text-xs px-2 py-0.5 rounded-full ${STATUS_COLORS[post.status] || 'bg-surface-tertiary text-text-secondary'}`}>
+                    {post.status}
+                  </span>
+                </div>
+                <p className="text-sm font-medium text-text-primary truncate">{post.title}</p>
+                {post.brand_name && (
+                  <p className="text-xs text-text-tertiary mt-1">{post.brand_name}</p>
+                )}
+              </button>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Legend */}
+      <div className="bg-surface rounded-xl border border-border p-4">
+        <h4 className="text-xs font-semibold text-text-tertiary uppercase mb-3">Status Legend</h4>
+        <div className="flex flex-wrap gap-3">
+          {Object.entries(STATUS_COLORS).map(([status, color]) => (
+            <div key={status} className="flex items-center gap-2">
+              <div className={`w-4 h-4 rounded ${color}`}></div>
+              <span className="text-xs text-text-secondary capitalize">{status.replace('_', ' ')}</span>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* Detail Panel */}
+      {selectedPost && (
+        <PostDetailPanel
+          post={selectedPost}
+          onClose={handlePanelClose}
+          onSave={async (postId, data) => {
+            await api.patch(`/posts/${postId}`, data)
+            handlePanelClose()
+          }}
+          onDelete={async (postId) => {
+            await api.delete(`/posts/${postId}`)
+            handlePanelClose()
+          }}
+        />
+      )}
+    </div>
+  )
+}

client/src/pages/PostProduction.jsx

@@ -1,13 +1,16 @@
-import { useState, useEffect, useContext, useRef } from 'react'
-import { Plus, LayoutGrid, List, Search, Filter, Upload, X, Paperclip, Link2, FileText, Image as ImageIcon, Trash2, ExternalLink } from 'lucide-react'
+import { useState, useEffect, useContext } from 'react'
+import { Plus, LayoutGrid, List, Search, X, FileText } from 'lucide-react'
 import { AppContext } from '../App'
 import { useAuth } from '../contexts/AuthContext'
 import { useLanguage } from '../i18n/LanguageContext'
 import { api, PLATFORMS } from '../utils/api'
 import KanbanBoard from '../components/KanbanBoard'
 import PostCard from '../components/PostCard'
-import StatusBadge from '../components/StatusBadge'
-import Modal from '../components/Modal'
+import PostDetailPanel from '../components/PostDetailPanel'
+import DatePresetPicker from '../components/DatePresetPicker'
+import { SkeletonKanbanBoard, SkeletonTable } from '../components/SkeletonLoader'
+import EmptyState from '../components/EmptyState'
+import { useToast } from '../components/ToastContainer'
 
 const EMPTY_POST = {
   title: '', description: '', brand_id: '', platforms: [],
@@ -16,25 +19,19 @@ const EMPTY_POST = {
 }
 
 export default function PostProduction() {
-  const { t } = useLanguage()
+  const { t, lang } = useLanguage()
   const { teamMembers, brands } = useContext(AppContext)
-  const { canEditResource, canDeleteResource } = useAuth()
+  const { canEditResource } = useAuth()
+  const toast = useToast()
   const [posts, setPosts] = useState([])
   const [loading, setLoading] = useState(true)
   const [view, setView] = useState('kanban')
-  const [showModal, setShowModal] = useState(false)
-  const [editingPost, setEditingPost] = useState(null)
-  const [formData, setFormData] = useState(EMPTY_POST)
+  const [panelPost, setPanelPost] = useState(null)
   const [campaigns, setCampaigns] = useState([])
-  const [filters, setFilters] = useState({ brand: '', platform: '', assignedTo: '', campaign: '' })
+  const [filters, setFilters] = useState({ brand: '', platform: '', assignedTo: '', campaign: '', periodFrom: '', periodTo: '' })
   const [searchTerm, setSearchTerm] = useState('')
-  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false)
-  const [attachments, setAttachments] = useState([])
-  const [uploading, setUploading] = useState(false)
-  const [uploadProgress, setUploadProgress] = useState(0)
-  const [publishError, setPublishError] = useState('')
-  const [dragActive, setDragActive] = useState(false)
-  const fileInputRef = useRef(null)
+  const [activePreset, setActivePreset] = useState('')
+  const [moveError, setMoveError] = useState('')
 
   useEffect(() => {
     loadPosts()
@@ -52,125 +49,43 @@ export default function PostProduction() {
     }
   }
 
-  const handleSave = async () => {
-    setPublishError('')
-    try {
-      const data = {
-        title: formData.title,
-        description: formData.description,
-        brand_id: formData.brand_id ? Number(formData.brand_id) : null,
-        assigned_to: formData.assigned_to ? Number(formData.assigned_to) : null,
-        status: formData.status,
-        platforms: formData.platforms || [],
-        scheduled_date: formData.scheduled_date || null,
-        notes: formData.notes,
-        campaign_id: formData.campaign_id ? Number(formData.campaign_id) : null,
-        publication_links: formData.publication_links || [],
-      }
-
-      // Client-side validation: check publication links before publishing
-      if (data.status === 'published' && data.platforms.length > 0) {
-        const missingPlatforms = data.platforms.filter(platform => {
-          const link = (data.publication_links || []).find(l => l.platform === platform)
-          return !link || !link.url || !link.url.trim()
-        })
-        if (missingPlatforms.length > 0) {
-          const names = missingPlatforms.map(p => PLATFORMS[p]?.label || p).join(', ')
-          setPublishError(`${t('posts.publishMissing')} ${names}`)
-          return
-        }
-      }
-
-      if (editingPost) {
-        await api.patch(`/posts/${editingPost._id}`, data)
-      } else {
-        await api.post('/posts', data)
-      }
-      setShowModal(false)
-      setEditingPost(null)
-      setFormData(EMPTY_POST)
-      setAttachments([])
-      loadPosts()
-    } catch (err) {
-      console.error('Save failed:', err)
-      if (err.message?.includes('Cannot publish')) {
-        setPublishError(err.message.replace(/.*: /, ''))
-      }
-    }
-  }
-
   const handleMovePost = async (postId, newStatus) => {
     try {
       await api.patch(`/posts/${postId}`, { status: newStatus })
+      toast.success(t('posts.statusUpdated'))
       loadPosts()
     } catch (err) {
       console.error('Move failed:', err)
       if (err.message?.includes('Cannot publish')) {
-        alert('Cannot publish: all platform publication links must be filled first.')
-      }
-    }
-  }
-
-  const loadAttachments = async (postId) => {
-    try {
-      const data = await api.get(`/posts/${postId}/attachments`)
-      setAttachments(Array.isArray(data) ? data : (data.data || []))
-    } catch (err) {
-      console.error('Failed to load attachments:', err)
-      setAttachments([])
-    }
-  }
-
-  const handleFileUpload = async (files) => {
-    if (!editingPost || !files?.length) return
-    setUploading(true)
-    setUploadProgress(0)
-    const postId = editingPost._id || editingPost.id
-
-    for (let i = 0; i < files.length; i++) {
-      const fd = new FormData()
-      fd.append('file', files[i])
-      try {
-        await api.upload(`/posts/${postId}/attachments`, fd)
-        setUploadProgress(Math.round(((i + 1) / files.length) * 100))
-      } catch (err) {
-        console.error('Upload failed:', err)
-      }
-    }
-
-    setUploading(false)
-    setUploadProgress(0)
-    loadAttachments(postId)
-  }
-
-  const handleDeleteAttachment = async (attachmentId) => {
-    try {
-      await api.delete(`/attachments/${attachmentId}`)
-      if (editingPost) loadAttachments(editingPost._id || editingPost.id)
-    } catch (err) {
-      console.error('Delete attachment failed:', err)
-    }
-  }
-
-  const handleDragEnter = (e) => { e.preventDefault(); e.stopPropagation(); setDragActive(true) }
-  const handleDragLeaveZone = (e) => { e.preventDefault(); e.stopPropagation(); setDragActive(false) }
-  const handleDragOverZone = (e) => { e.preventDefault(); e.stopPropagation() }
-  const handleDropFiles = (e) => {
-    e.preventDefault(); e.stopPropagation(); setDragActive(false)
-    if (e.dataTransfer.files?.length) handleFileUpload(e.dataTransfer.files)
-  }
-
-  const updatePublicationLink = (platform, url) => {
-    setFormData(f => {
-      const links = [...(f.publication_links || [])]
-      const idx = links.findIndex(l => l.platform === platform)
-      if (idx >= 0) {
-        links[idx] = { ...links[idx], url }
+        setMoveError(t('posts.publishRequired'))
+        setTimeout(() => setMoveError(''), 5000)
+        toast.error(t('posts.publishRequired'))
       } else {
-        links.push({ platform, url })
+        toast.error(t('common.updateFailed'))
       }
-      return { ...f, publication_links: links }
-    })
+    }
+  }
+
+  const handlePanelSave = async (postId, data) => {
+    if (postId) {
+      await api.patch(`/posts/${postId}`, data)
+      toast.success(t('posts.updated'))
+    } else {
+      await api.post('/posts', data)
+      toast.success(t('posts.created'))
+    }
+    loadPosts()
+  }
+
+  const handlePanelDelete = async (postId) => {
+    try {
+      await api.delete(`/posts/${postId}`)
+      toast.success(t('posts.deleted'))
+      loadPosts()
+    } catch (err) {
+      console.error('Delete failed:', err)
+      toast.error(t('common.deleteFailed'))
+    }
   }
 
   const openEdit = (post) => {
@@ -178,30 +93,11 @@ export default function PostProduction() {
       alert('You can only edit your own posts')
       return
     }
-    setEditingPost(post)
-    setPublishError('')
-    setFormData({
-      title: post.title || '',
-      description: post.description || '',
-      brand_id: post.brandId || post.brand_id || '',
-      platforms: post.platforms || (post.platform ? [post.platform] : []),
-      status: post.status || 'draft',
-      assigned_to: post.assignedTo || post.assigned_to || '',
-      scheduled_date: post.scheduledDate ? new Date(post.scheduledDate).toISOString().slice(0, 16) : '',
-      notes: post.notes || '',
-      campaign_id: post.campaignId || post.campaign_id || '',
-      publication_links: post.publication_links || post.publicationLinks || [],
-    })
-    loadAttachments(post._id || post.id)
-    setShowModal(true)
+    setPanelPost(post)
   }
 
   const openNew = () => {
-    setEditingPost(null)
-    setFormData(EMPTY_POST)
-    setAttachments([])
-    setPublishError('')
-    setShowModal(true)
+    setPanelPost(EMPTY_POST)
   }
 
   const filteredPosts = posts.filter(p => {
@@ -210,25 +106,24 @@ export default function PostProduction() {
     if (filters.assignedTo && String(p.assignedTo || p.assigned_to) !== filters.assignedTo) return false
     if (filters.campaign && String(p.campaignId || p.campaign_id) !== filters.campaign) return false
     if (searchTerm && !p.title?.toLowerCase().includes(searchTerm.toLowerCase())) return false
+    if (filters.periodFrom || filters.periodTo) {
+      const postDate = p.scheduledDate || p.scheduled_date || p.published_date || p.publishedDate
+      if (!postDate) return false
+      const d = new Date(postDate).toISOString().slice(0, 10)
+      if (filters.periodFrom && d < filters.periodFrom) return false
+      if (filters.periodTo && d > filters.periodTo) return false
+    }
     return true
   })
 
   if (loading) {
-    return (
-      <div className="space-y-4 animate-pulse">
-        <div className="h-12 bg-surface-tertiary rounded-xl"></div>
-        <div className="flex gap-4">
-          {[...Array(5)].map((_, i) => <div key={i} className="w-72 h-96 bg-surface-tertiary rounded-xl"></div>)}
-        </div>
-      </div>
-    )
+    return view === 'kanban' ? <SkeletonKanbanBoard /> : <SkeletonTable rows={8} cols={6} />
   }
 
   return (
     <div className="space-y-4 animate-fade-in">
       {/* Toolbar */}
       <div className="flex flex-wrap items-center gap-3">
-        {/* Search */}
         <div className="relative flex-1 min-w-[200px] max-w-md">
           <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-text-tertiary" />
           <input
@@ -240,21 +135,21 @@ export default function PostProduction() {
           />
         </div>
 
-        {/* Filters */}
-        <div data-tutorial="filters" className="flex gap-3">
+        <div data-tutorial="filters" className="flex flex-col gap-2">
+          <div className="flex items-center gap-2 flex-wrap">
           <select
             value={filters.brand}
             onChange={e => setFilters(f => ({ ...f, brand: e.target.value }))}
-            className="text-sm border border-border rounded-lg px-3 py-2 bg-white text-text-secondary focus:outline-none focus:ring-2 focus:ring-brand-primary/20"
+            className="text-xs border border-border rounded-lg px-2.5 py-1.5 bg-white text-text-secondary focus:outline-none focus:ring-2 focus:ring-brand-primary/20"
           >
             <option value="">{t('posts.allBrands')}</option>
-            {brands.map(b => <option key={b._id} value={b._id}>{b.name}</option>)}
+            {brands.map(b => <option key={b._id} value={b._id}>{lang === 'ar' && b.name_ar ? b.name_ar : b.name}</option>)}
           </select>
 
           <select
             value={filters.platform}
             onChange={e => setFilters(f => ({ ...f, platform: e.target.value }))}
-            className="text-sm border border-border rounded-lg px-3 py-2 bg-white text-text-secondary focus:outline-none focus:ring-2 focus:ring-brand-primary/20"
+            className="text-xs border border-border rounded-lg px-2.5 py-1.5 bg-white text-text-secondary focus:outline-none focus:ring-2 focus:ring-brand-primary/20"
           >
             <option value="">{t('posts.allPlatforms')}</option>
             {Object.entries(PLATFORMS).map(([k, v]) => <option key={k} value={k}>{v.label}</option>)}
@@ -263,14 +158,40 @@ export default function PostProduction() {
           <select
             value={filters.assignedTo}
             onChange={e => setFilters(f => ({ ...f, assignedTo: e.target.value }))}
-            className="text-sm border border-border rounded-lg px-3 py-2 bg-white text-text-secondary focus:outline-none focus:ring-2 focus:ring-brand-primary/20"
+            className="text-xs border border-border rounded-lg px-2.5 py-1.5 bg-white text-text-secondary focus:outline-none focus:ring-2 focus:ring-brand-primary/20"
           >
             <option value="">{t('posts.allPeople')}</option>
             {teamMembers.map(m => <option key={m._id} value={String(m._id)}>{m.name}</option>)}
           </select>
+          </div>
+
+          <div className="flex items-center gap-2 flex-wrap">
+          <DatePresetPicker
+            activePreset={activePreset}
+            onSelect={(from, to, key) => { setFilters(f => ({ ...f, periodFrom: from, periodTo: to })); setActivePreset(key) }}
+            onClear={() => { setFilters(f => ({ ...f, periodFrom: '', periodTo: '' })); setActivePreset('') }}
+          />
+
+          <div className="flex items-center gap-1.5">
+            <input
+              type="date"
+              value={filters.periodFrom}
+              onChange={e => { setFilters(f => ({ ...f, periodFrom: e.target.value })); setActivePreset('') }}
+              title={t('posts.periodFrom')}
+              className="text-xs border border-border rounded-lg px-2 py-1.5 bg-white text-text-secondary focus:outline-none focus:ring-2 focus:ring-brand-primary/20"
+            />
+            <span className="text-xs text-text-tertiary">–</span>
+            <input
+              type="date"
+              value={filters.periodTo}
+              onChange={e => { setFilters(f => ({ ...f, periodTo: e.target.value })); setActivePreset('') }}
+              title={t('posts.periodTo')}
+              className="text-xs border border-border rounded-lg px-2 py-1.5 bg-white text-text-secondary focus:outline-none focus:ring-2 focus:ring-brand-primary/20"
+            />
+          </div>
+          </div>
         </div>
 
-        {/* View toggle */}
         <div className="flex bg-surface-tertiary rounded-lg p-0.5 ml-auto">
           <button
             onClick={() => setView('kanban')}
@@ -286,7 +207,6 @@ export default function PostProduction() {
           </button>
         </div>
 
-        {/* New post */}
         <button
           data-tutorial="new-post"
           onClick={openNew}
@@ -297,373 +217,66 @@ export default function PostProduction() {
         </button>
       </div>
 
-      {/* Content */}
+      {moveError && (
+        <div className="p-3 bg-amber-50 border border-amber-200 rounded-lg text-sm text-amber-700 flex items-center justify-between">
+          <span>{moveError}</span>
+          <button onClick={() => setMoveError('')} className="p-0.5 hover:bg-amber-100 rounded">
+            <X className="w-4 h-4" />
+          </button>
+        </div>
+      )}
+
       {view === 'kanban' ? (
         <KanbanBoard posts={filteredPosts} onPostClick={openEdit} onMovePost={handleMovePost} />
       ) : (
         <div className="bg-white rounded-xl border border-border overflow-hidden">
-          <table className="w-full">
-            <thead>
-              <tr className="border-b border-border bg-surface-secondary">
-                <th className="text-left px-4 py-3 text-xs font-semibold text-text-tertiary uppercase tracking-wider">{t('posts.postTitle')}</th>
-                <th className="text-left px-4 py-3 text-xs font-semibold text-text-tertiary uppercase tracking-wider">{t('posts.brand')}</th>
-                <th className="text-left px-4 py-3 text-xs font-semibold text-text-tertiary uppercase tracking-wider">{t('posts.status')}</th>
-                <th className="text-left px-4 py-3 text-xs font-semibold text-text-tertiary uppercase tracking-wider">{t('posts.platforms')}</th>
-                <th className="text-left px-4 py-3 text-xs font-semibold text-text-tertiary uppercase tracking-wider">{t('posts.assignTo')}</th>
-                <th className="text-left px-4 py-3 text-xs font-semibold text-text-tertiary uppercase tracking-wider">{t('posts.scheduledDate')}</th>
-              </tr>
-            </thead>
-            <tbody className="divide-y divide-border-light">
-              {filteredPosts.map(post => (
-                <PostCard key={post._id} post={post} onClick={() => openEdit(post)} />
-              ))}
-              {filteredPosts.length === 0 && (
-                <tr>
-                  <td colSpan={6} className="py-12 text-center text-sm text-text-tertiary">
-                    {t('posts.noPostsFound')}
-                  </td>
+          {filteredPosts.length === 0 ? (
+            <EmptyState
+              icon={FileText}
+              title={posts.length === 0 ? t('posts.noPosts') : t('posts.noPostsFound')}
+              description={posts.length === 0 ? t('posts.createFirstPost') : t('posts.tryDifferentFilter')}
+              actionLabel={posts.length === 0 ? t('posts.createPost') : null}
+              onAction={posts.length === 0 ? openNew : null}
+              secondaryActionLabel={posts.length > 0 ? t('common.clearFilters') : null}
+              onSecondaryAction={() => {
+                setFilters({ brand: '', platform: '', assignedTo: '', campaign: '', periodFrom: '', periodTo: '' })
+                setSearchTerm('')
+              }}
+            />
+          ) : (
+            <table className="w-full">
+              <thead>
+                <tr className="border-b border-border bg-surface-secondary">
+                  <th className="text-left px-4 py-3 text-xs font-semibold text-text-tertiary uppercase tracking-wider">{t('posts.postTitle')}</th>
+                  <th className="text-left px-4 py-3 text-xs font-semibold text-text-tertiary uppercase tracking-wider">{t('posts.brand')}</th>
+                  <th className="text-left px-4 py-3 text-xs font-semibold text-text-tertiary uppercase tracking-wider">{t('posts.status')}</th>
+                  <th className="text-left px-4 py-3 text-xs font-semibold text-text-tertiary uppercase tracking-wider">{t('posts.platforms')}</th>
+                  <th className="text-left px-4 py-3 text-xs font-semibold text-text-tertiary uppercase tracking-wider">{t('posts.assignTo')}</th>
+                  <th className="text-left px-4 py-3 text-xs font-semibold text-text-tertiary uppercase tracking-wider">{t('posts.scheduledDate')}</th>
                 </tr>
-              )}
-            </tbody>
-          </table>
+              </thead>
+              <tbody className="divide-y divide-border-light">
+                {filteredPosts.map(post => (
+                  <PostCard key={post._id} post={post} onClick={() => openEdit(post)} />
+                ))}
+              </tbody>
+            </table>
+          )}
         </div>
       )}
 
-      {/* Create/Edit Modal */}
-      <Modal
-        isOpen={showModal}
-        onClose={() => { setShowModal(false); setEditingPost(null) }}
-        title={editingPost ? t('posts.editPost') : t('posts.createPost')}
-        size="lg"
-      >
-        <div className="space-y-4">
-          <div>
-            <label className="block text-sm font-medium text-text-primary mb-1">{t('posts.postTitle')} *</label>
-            <input
-              type="text"
-              value={formData.title}
-              onChange={e => setFormData(f => ({ ...f, title: e.target.value }))}
-              className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary"
-              placeholder={t('posts.postTitlePlaceholder')}
-            />
-          </div>
-
-          <div>
-            <label className="block text-sm font-medium text-text-primary mb-1">{t('posts.description')}</label>
-            <textarea
-              value={formData.description}
-              onChange={e => setFormData(f => ({ ...f, description: e.target.value }))}
-              rows={4}
-              className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary resize-none"
-              placeholder={t('posts.postDescPlaceholder')}
-            />
-          </div>
-
-          {/* Campaign */}
-          <div>
-            <label className="block text-sm font-medium text-text-primary mb-1">{t('posts.campaign')}</label>
-            <select
-              value={formData.campaign_id}
-              onChange={e => setFormData(f => ({ ...f, campaign_id: e.target.value }))}
-              className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary"
-            >
-              <option value="">{t('posts.noCampaign')}</option>
-              {campaigns.map(c => <option key={c._id} value={c._id}>{c.name}</option>)}
-            </select>
-          </div>
-
-          <div className="grid grid-cols-2 gap-4">
-            <div>
-              <label className="block text-sm font-medium text-text-primary mb-1">{t('posts.brand')}</label>
-              <select
-                value={formData.brand_id}
-                onChange={e => setFormData(f => ({ ...f, brand_id: e.target.value }))}
-                className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary"
-              >
-                <option value="">{t('posts.selectBrand')}</option>
-                {brands.map(b => <option key={b._id} value={b._id}>{b.icon} {b.name}</option>)}
-              </select>
-            </div>
-            <div>
-              <label className="block text-sm font-medium text-text-primary mb-1">{t('posts.platforms')}</label>
-              <div className="flex flex-wrap gap-2 p-2 border border-border rounded-lg bg-white min-h-[42px]">
-                {Object.entries(PLATFORMS).map(([k, v]) => {
-                  const checked = (formData.platforms || []).includes(k)
-                  return (
-                    <label
-                      key={k}
-                      className={`flex items-center gap-1.5 text-xs px-2.5 py-1.5 rounded-full cursor-pointer border transition-colors ${
-                        checked
-                          ? 'bg-brand-primary/10 border-brand-primary/30 text-brand-primary font-medium'
-                          : 'bg-surface-tertiary border-transparent text-text-secondary hover:bg-surface-tertiary/80'
-                      }`}
-                    >
-                      <input
-                        type="checkbox"
-                        checked={checked}
-                        onChange={() => {
-                          setFormData(f => ({
-                            ...f,
-                            platforms: checked
-                              ? f.platforms.filter(p => p !== k)
-                              : [...(f.platforms || []), k]
-                          }))
-                        }}
-                        className="sr-only"
-                      />
-                      {v.label}
-                    </label>
-                  )
-                })}
-              </div>
-            </div>
-          </div>
-
-          <div className="grid grid-cols-2 gap-4">
-            <div>
-              <label className="block text-sm font-medium text-text-primary mb-1">{t('posts.status')}</label>
-              <select
-                value={formData.status}
-                onChange={e => setFormData(f => ({ ...f, status: e.target.value }))}
-                className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary"
-              >
-                <option value="draft">{t('posts.status.draft')}</option>
-                <option value="in_review">{t('posts.status.in_review')}</option>
-                <option value="approved">{t('posts.status.approved')}</option>
-                <option value="scheduled">{t('posts.status.scheduled')}</option>
-                <option value="published">{t('posts.status.published')}</option>
-              </select>
-            </div>
-            <div>
-              <label className="block text-sm font-medium text-text-primary mb-1">{t('posts.assignTo')}</label>
-              <select
-                value={formData.assigned_to}
-                onChange={e => setFormData(f => ({ ...f, assigned_to: e.target.value }))}
-                className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary"
-              >
-                <option value="">{t('common.unassigned')}</option>
-                {teamMembers.map(m => <option key={m._id} value={m._id}>{m.name}</option>)}
-              </select>
-            </div>
-          </div>
-
-          <div className="grid grid-cols-2 gap-4">
-            <div>
-              <label className="block text-sm font-medium text-text-primary mb-1">{t('posts.scheduledDate')}</label>
-              <input
-                type="datetime-local"
-                value={formData.scheduled_date}
-                onChange={e => setFormData(f => ({ ...f, scheduled_date: e.target.value }))}
-                className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary"
-              />
-            </div>
-            <div>
-              <label className="block text-sm font-medium text-text-primary mb-1">{t('posts.notes')}</label>
-              <input
-                type="text"
-                value={formData.notes}
-                onChange={e => setFormData(f => ({ ...f, notes: e.target.value }))}
-                className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary"
-                placeholder={t('posts.additionalNotes')}
-              />
-            </div>
-          </div>
-
-          {/* Publication Links */}
-          {(formData.platforms || []).length > 0 && (
-            <div>
-              <label className="block text-sm font-medium text-text-primary mb-2">
-                <span className="flex items-center gap-1.5">
-                  <Link2 className="w-4 h-4" />
-                  {t('posts.publicationLinks')}
-                </span>
-              </label>
-              <div className="space-y-2 border border-border rounded-lg p-3 bg-surface-secondary">
-                {(formData.platforms || []).map(platformKey => {
-                  const platformInfo = PLATFORMS[platformKey] || { label: platformKey }
-                  const existingLink = (formData.publication_links || []).find(l => l.platform === platformKey)
-                  const linkUrl = existingLink?.url || ''
-                  return (
-                    <div key={platformKey} className="flex items-center gap-2">
-                      <span className="text-xs font-medium text-text-secondary w-24 shrink-0 flex items-center gap-1.5">
-                        <span className="w-2 h-2 rounded-full shrink-0" style={{ backgroundColor: platformInfo.color || '#888' }} />
-                        {platformInfo.label}
-                      </span>
-                      <input
-                        type="url"
-                        value={linkUrl}
-                        onChange={e => updatePublicationLink(platformKey, e.target.value)}
-                        className="flex-1 px-3 py-1.5 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary"
-                        placeholder="https://..."
-                      />
-                      {linkUrl && (
-                        <a href={linkUrl} target="_blank" rel="noopener noreferrer" className="p-1.5 text-text-tertiary hover:text-brand-primary">
-                          <ExternalLink className="w-3.5 h-3.5" />
-                        </a>
-                      )}
-                    </div>
-                  )
-                })}
-                {formData.status === 'published' && (formData.platforms || []).some(p => {
-                  const link = (formData.publication_links || []).find(l => l.platform === p)
-                  return !link || !link.url?.trim()
-                }) && (
-                  <p className="text-xs text-amber-600 mt-1">⚠️ {t('posts.publishRequired')}</p>
-                )}
-              </div>
-            </div>
-          )}
-
-          {/* Attachments (only for existing posts) */}
-          {editingPost && (
-            <div>
-              <label className="block text-sm font-medium text-text-primary mb-2">
-                <span className="flex items-center gap-1.5">
-                  <Paperclip className="w-4 h-4" />
-                  {t('posts.attachments')}
-                  <span className="text-xs text-text-tertiary font-normal">({attachments.length})</span>
-                </span>
-              </label>
-
-              {/* Existing attachments */}
-              {attachments.length > 0 && (
-                <div className="grid grid-cols-2 sm:grid-cols-3 gap-2 mb-3">
-                  {attachments.map(att => {
-                    const isImage = att.mime_type?.startsWith('image/') || att.mimeType?.startsWith('image/')
-                    const attUrl = att.url || `/api/uploads/${att.filename}`
-                    const name = att.original_name || att.originalName || att.filename
-                    return (
-                      <div key={att.id || att._id} className="relative group/att border border-border rounded-lg overflow-hidden bg-white">
-                        {isImage ? (
-                          <a href={`http://localhost:3001${attUrl}`} target="_blank" rel="noopener noreferrer">
-                            <img
-                              src={`http://localhost:3001${attUrl}`}
-                              alt={name}
-                              className="w-full h-24 object-cover"
-                            />
-                          </a>
-                        ) : (
-                          <a href={`http://localhost:3001${attUrl}`} target="_blank" rel="noopener noreferrer" className="flex items-center gap-2 p-3 h-24">
-                            <FileText className="w-8 h-8 text-text-tertiary shrink-0" />
-                            <span className="text-xs text-text-secondary truncate">{name}</span>
-                          </a>
-                        )}
-                        <button
-                          onClick={() => handleDeleteAttachment(att.id || att._id)}
-                          className="absolute top-1 right-1 p-1 bg-red-500 text-white rounded-full opacity-0 group-hover/att:opacity-100 transition-opacity shadow-sm"
-                          title={t('posts.deleteAttachment')}
-                        >
-                          <X className="w-3 h-3" />
-                        </button>
-                        <div className="px-2 py-1 text-[10px] text-text-tertiary truncate border-t border-border-light">
-                          {name}
-                        </div>
-                      </div>
-                    )
-                  })}
-                </div>
-              )}
-
-              {/* Upload area */}
-              <div
-                className={`border-2 border-dashed rounded-lg p-4 text-center cursor-pointer transition-colors ${
-                  dragActive ? 'border-brand-primary bg-brand-primary/5' : 'border-border hover:border-brand-primary/40'
-                }`}
-                onClick={() => fileInputRef.current?.click()}
-                onDragEnter={handleDragEnter}
-                onDragLeave={handleDragLeaveZone}
-                onDragOver={handleDragOverZone}
-                onDrop={handleDropFiles}
-              >
-                <input
-                  ref={fileInputRef}
-                  type="file"
-                  multiple
-                  className="hidden"
-                  onChange={(e) => handleFileUpload(e.target.files)}
-                />
-                <Upload className="w-6 h-6 text-text-tertiary mx-auto mb-1" />
-                <p className="text-xs text-text-secondary">
-                  {dragActive ? t('posts.dropFiles') : t('posts.uploadFiles')}
-                </p>
-                <p className="text-[10px] text-text-tertiary mt-0.5">{t('posts.maxSize')}</p>
-              </div>
-
-              {/* Upload progress */}
-              {uploading && (
-                <div className="mt-2">
-                  <div className="flex items-center justify-between text-xs text-text-secondary mb-1">
-                    <span>{t('posts.uploading')}</span>
-                    <span>{uploadProgress}%</span>
-                  </div>
-                  <div className="w-full bg-surface-tertiary rounded-full h-1.5">
-                    <div
-                      className="bg-brand-primary h-1.5 rounded-full transition-all"
-                      style={{ width: `${uploadProgress}%` }}
-                    />
-                  </div>
-                </div>
-              )}
-            </div>
-          )}
-
-          {/* Publish validation error */}
-          {publishError && (
-            <div className="p-3 bg-red-50 border border-red-200 rounded-lg text-sm text-red-700">
-              {publishError}
-            </div>
-          )}
-
-          {/* Actions */}
-          <div className="flex items-center justify-end gap-3 pt-4 border-t border-border">
-            {editingPost && canDeleteResource('post', editingPost) && (
-              <button
-                onClick={() => setShowDeleteConfirm(true)}
-                className="px-4 py-2 text-sm font-medium text-red-600 hover:bg-red-50 rounded-lg mr-auto"
-              >
-                {t('common.delete')}
-              </button>
-            )}
-            <button
-              onClick={() => { setShowModal(false); setEditingPost(null) }}
-              className="px-4 py-2 text-sm font-medium text-text-secondary hover:bg-surface-tertiary rounded-lg"
-            >
-              {t('common.cancel')}
-            </button>
-            <button
-              onClick={handleSave}
-              disabled={!formData.title}
-              className="px-5 py-2 bg-brand-primary text-white rounded-lg text-sm font-medium hover:bg-brand-primary-light disabled:opacity-50 disabled:cursor-not-allowed shadow-sm"
-            >
-              {editingPost ? t('posts.saveChanges') : t('posts.createPost')}
-            </button>
-          </div>
-        </div>
-      </Modal>
-
-      {/* Delete Confirmation */}
-      <Modal
-        isOpen={showDeleteConfirm}
-        onClose={() => setShowDeleteConfirm(false)}
-        title={t('posts.deletePost')}
-        isConfirm
-        danger
-        confirmText={t('posts.deletePost')}
-        onConfirm={async () => {
-          if (editingPost) {
-            try {
-              await api.delete(`/posts/${editingPost._id || editingPost.id}`)
-              setShowModal(false)
-              setEditingPost(null)
-              loadPosts()
-            } catch (err) {
-              console.error('Delete failed:', err)
-            }
-          }
-        }}
-      >
-        {t('posts.deleteConfirm')}
-      </Modal>
+      {/* Post Detail Panel */}
+      {panelPost && (
+        <PostDetailPanel
+          post={panelPost}
+          onClose={() => setPanelPost(null)}
+          onSave={handlePanelSave}
+          onDelete={handlePanelDelete}
+          brands={brands}
+          teamMembers={teamMembers}
+          campaigns={campaigns}
+        />
+      )}
     </div>
   )
 }

client/src/pages/ProjectDetail.jsx

@@ -1,15 +1,20 @@
-import { useState, useEffect, useContext } from 'react'
+import { useState, useEffect, useContext, useRef } from 'react'
 import { useParams, useNavigate } from 'react-router-dom'
 import {
-  ArrowLeft, Plus, Check, Trash2, Edit3, LayoutGrid, List,
-  GanttChart, Settings, Calendar, Clock
+  ArrowLeft, Plus, Check, Trash2, LayoutGrid, List,
+  GanttChart, Settings, Calendar, Clock, MessageCircle, X,
+  Image as ImageIcon
 } from 'lucide-react'
-import { format, differenceInDays, startOfDay, addDays, isAfter, isBefore, parseISO } from 'date-fns'
+import { format, differenceInDays, startOfDay, addDays, isAfter, isBefore } from 'date-fns'
 import { AppContext } from '../App'
 import { api, PRIORITY_CONFIG } from '../utils/api'
+import { useAuth } from '../contexts/AuthContext'
 import StatusBadge from '../components/StatusBadge'
 import BrandBadge from '../components/BrandBadge'
 import Modal from '../components/Modal'
+import CommentsSection from '../components/CommentsSection'
+import ProjectEditPanel from '../components/ProjectEditPanel'
+import TaskDetailPanel from '../components/TaskDetailPanel'
 
 const TASK_COLUMNS = [
   { id: 'todo', label: 'To Do', color: 'bg-gray-400' },
@@ -21,27 +26,32 @@ export default function ProjectDetail() {
   const { id } = useParams()
   const navigate = useNavigate()
   const { teamMembers, brands } = useContext(AppContext)
+  const { permissions, canEditResource, canDeleteResource } = useAuth()
+  const canManageProject = permissions?.canEditProjects
   const [project, setProject] = useState(null)
   const [tasks, setTasks] = useState([])
   const [loading, setLoading] = useState(true)
+  const [assignableUsers, setAssignableUsers] = useState([])
   const [view, setView] = useState('kanban')
-  const [showTaskModal, setShowTaskModal] = useState(false)
-  const [showProjectModal, setShowProjectModal] = useState(false)
-  const [editingTask, setEditingTask] = useState(null)
   const [showDeleteConfirm, setShowDeleteConfirm] = useState(false)
   const [taskToDelete, setTaskToDelete] = useState(null)
-  const [taskForm, setTaskForm] = useState({
-    title: '', description: '', priority: 'medium', assigned_to: '', due_date: '', status: 'todo'
-  })
-  const [projectForm, setProjectForm] = useState({
-    name: '', description: '', brand_id: '', owner_id: '', status: 'active', due_date: ''
-  })
+
+  const [showDiscussion, setShowDiscussion] = useState(false)
+  const [thumbnailUploading, setThumbnailUploading] = useState(false)
+  const thumbnailInputRef = useRef(null)
+
+  // Panel state
+  const [panelProject, setPanelProject] = useState(null)
+  const [panelTask, setPanelTask] = useState(null)
 
   // Drag state for kanban
   const [draggedTask, setDraggedTask] = useState(null)
   const [dragOverCol, setDragOverCol] = useState(null)
 
   useEffect(() => { loadProject() }, [id])
+  useEffect(() => {
+    api.get('/users/assignable').then(res => setAssignableUsers(res.data || res || [])).catch(() => {})
+  }, [])
 
   const loadProject = async () => {
     try {
@@ -56,31 +66,6 @@ export default function ProjectDetail() {
     }
   }
 
-  const handleTaskSave = async () => {
-    try {
-      const data = {
-        title: taskForm.title,
-        description: taskForm.description,
-        priority: taskForm.priority,
-        assigned_to: taskForm.assigned_to ? Number(taskForm.assigned_to) : null,
-        due_date: taskForm.due_date || null,
-        status: taskForm.status,
-        project_id: Number(id),
-      }
-      if (editingTask) {
-        await api.patch(`/tasks/${editingTask._id}`, data)
-      } else {
-        await api.post('/tasks', data)
-      }
-      setShowTaskModal(false)
-      setEditingTask(null)
-      setTaskForm({ title: '', description: '', priority: 'medium', assigned_to: '', due_date: '', status: 'todo' })
-      loadProject()
-    } catch (err) {
-      console.error('Task save failed:', err)
-    }
-  }
-
   const handleTaskStatusChange = async (taskId, newStatus) => {
     try {
       await api.patch(`/tasks/${taskId}`, { status: newStatus })
@@ -106,52 +91,67 @@ export default function ProjectDetail() {
     }
   }
 
+  // Panel handlers
+  const handleProjectPanelSave = async (projectId, data) => {
+    await api.patch(`/projects/${projectId}`, data)
+    loadProject()
+  }
+
+  const handleProjectPanelDelete = async (projectId) => {
+    await api.delete(`/projects/${projectId}`)
+    navigate('/projects')
+  }
+
+  const handleTaskPanelSave = async (taskId, data) => {
+    if (taskId) {
+      await api.patch(`/tasks/${taskId}`, data)
+    } else {
+      await api.post('/tasks', { ...data, project_id: Number(id) })
+    }
+    setPanelTask(null)
+    loadProject()
+  }
+
+  const handleTaskPanelDelete = async (taskId) => {
+    await api.delete(`/tasks/${taskId}`)
+    setPanelTask(null)
+    loadProject()
+  }
+
   const openEditTask = (task) => {
-    setEditingTask(task)
-    setTaskForm({
-      title: task.title || '',
-      description: task.description || '',
-      priority: task.priority || 'medium',
-      assigned_to: task.assignedTo || task.assigned_to || '',
-      due_date: task.dueDate ? new Date(task.dueDate).toISOString().slice(0, 10) : '',
-      status: task.status || 'todo',
-    })
-    setShowTaskModal(true)
+    setPanelTask(task)
   }
 
   const openNewTask = () => {
-    setEditingTask(null)
-    setTaskForm({ title: '', description: '', priority: 'medium', assigned_to: '', due_date: '', status: 'todo' })
-    setShowTaskModal(true)
+    setPanelTask({ title: '', status: 'todo', priority: 'medium', project_id: Number(id) })
   }
 
   const openEditProject = () => {
     if (!project) return
-    setProjectForm({
-      name: project.name || '',
-      description: project.description || '',
-      brand_id: project.brandId || project.brand_id || '',
-      owner_id: project.ownerId || project.owner_id || '',
-      status: project.status || 'active',
-      due_date: project.dueDate ? new Date(project.dueDate).toISOString().slice(0, 10) : '',
-    })
-    setShowProjectModal(true)
+    setPanelProject(project)
   }
 
-  const handleProjectSave = async () => {
+  const handleThumbnailUpload = async (file) => {
+    if (!file) return
+    setThumbnailUploading(true)
     try {
-      await api.patch(`/projects/${id}`, {
-        name: projectForm.name,
-        description: projectForm.description,
-        brand_id: projectForm.brand_id ? Number(projectForm.brand_id) : null,
-        owner_id: projectForm.owner_id ? Number(projectForm.owner_id) : null,
-        status: projectForm.status,
-        due_date: projectForm.due_date || null,
-      })
-      setShowProjectModal(false)
+      const fd = new FormData()
+      fd.append('file', file)
+      await api.upload(`/projects/${id}/thumbnail`, fd)
       loadProject()
     } catch (err) {
-      console.error('Project save failed:', err)
+      console.error('Thumbnail upload failed:', err)
+    } finally {
+      setThumbnailUploading(false)
+    }
+  }
+
+  const handleThumbnailRemove = async () => {
+    try {
+      await api.delete(`/projects/${id}/thumbnail`)
+      loadProject()
+    } catch (err) {
+      console.error('Thumbnail remove failed:', err)
     }
   }
 
@@ -203,38 +203,16 @@ export default function ProjectDetail() {
     )
   }
 
+  const canEditProject = canEditResource('project', project)
   const completedTasks = tasks.filter(t => t.status === 'done').length
   const progress = tasks.length > 0 ? Math.round((completedTasks / tasks.length) * 100) : 0
   const ownerName = project.ownerName || project.owner_name
   const brandName = project.brandName || project.brand_name
 
-  // Gantt chart helpers
-  const getGanttRange = () => {
-    const today = startOfDay(new Date())
-    let earliest = today
-    let latest = addDays(today, 14)
-
-    tasks.forEach(t => {
-      if (t.createdAt) {
-        const d = startOfDay(new Date(t.createdAt))
-        if (isBefore(d, earliest)) earliest = d
-      }
-      if (t.dueDate) {
-        const d = startOfDay(new Date(t.dueDate))
-        if (isAfter(d, latest)) latest = addDays(d, 1)
-      }
-    })
-    if (project.dueDate) {
-      const d = startOfDay(new Date(project.dueDate))
-      if (isAfter(d, latest)) latest = addDays(d, 1)
-    }
-    // Ensure minimum 14 days
-    if (differenceInDays(latest, earliest) < 14) latest = addDays(earliest, 14)
-    return { earliest, latest, totalDays: differenceInDays(latest, earliest) + 1 }
-  }
-
   return (
-    <div className="space-y-6 animate-fade-in">
+    <div className="flex gap-6 animate-fade-in">
+      {/* Main content */}
+      <div className={`space-y-6 min-w-0 ${showDiscussion ? 'flex-1' : 'w-full'}`}>
       {/* Back button */}
       <button
         onClick={() => navigate('/projects')}
@@ -245,7 +223,38 @@ export default function ProjectDetail() {
       </button>
 
       {/* Project header */}
-      <div className="bg-white rounded-xl border border-border p-6">
+      <div className="bg-white rounded-xl border border-border overflow-hidden">
+        {/* Thumbnail banner */}
+        {(project.thumbnail_url || project.thumbnailUrl) && (
+          <div className="relative w-full h-40 overflow-hidden">
+            <img src={project.thumbnail_url || project.thumbnailUrl} alt="" className="w-full h-full object-cover" />
+            <div className="absolute inset-0 bg-gradient-to-t from-black/30 to-transparent" />
+            {canEditProject && (
+              <div className="absolute top-2 right-2 flex items-center gap-1">
+                <button
+                  onClick={() => thumbnailInputRef.current?.click()}
+                  className="px-2 py-1 text-xs bg-black/40 hover:bg-black/60 rounded text-white transition-colors"
+                >
+                  Change
+                </button>
+                <button
+                  onClick={handleThumbnailRemove}
+                  className="p-1 bg-black/40 hover:bg-red-500/80 rounded text-white transition-colors"
+                >
+                  <X className="w-3.5 h-3.5" />
+                </button>
+              </div>
+            )}
+          </div>
+        )}
+        <input
+          ref={thumbnailInputRef}
+          type="file"
+          accept="image/*"
+          className="hidden"
+          onChange={e => { handleThumbnailUpload(e.target.files[0]); e.target.value = '' }}
+        />
+        <div className="p-6">
         <div className="flex items-start justify-between gap-4 mb-4">
           <div>
             <div className="flex items-center gap-3 mb-2">
@@ -267,13 +276,36 @@ export default function ProjectDetail() {
               )}
             </div>
           </div>
-          <button
-            onClick={openEditProject}
-            className="flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium text-text-secondary hover:text-text-primary hover:bg-surface-tertiary rounded-lg transition-colors"
-          >
-            <Settings className="w-4 h-4" />
-            Edit
-          </button>
+          <div className="flex items-center gap-2">
+            {canEditProject && !project.thumbnail_url && !project.thumbnailUrl && (
+              <button
+                onClick={() => thumbnailInputRef.current?.click()}
+                disabled={thumbnailUploading}
+                className="flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium text-text-secondary hover:text-text-primary hover:bg-surface-tertiary rounded-lg transition-colors"
+              >
+                <ImageIcon className="w-4 h-4" />
+                {thumbnailUploading ? 'Uploading...' : 'Thumbnail'}
+              </button>
+            )}
+            <button
+              onClick={() => setShowDiscussion(prev => !prev)}
+              className={`flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium rounded-lg transition-colors ${
+                showDiscussion ? 'bg-brand-primary text-white' : 'text-text-secondary hover:text-text-primary hover:bg-surface-tertiary'
+              }`}
+            >
+              <MessageCircle className="w-4 h-4" />
+              Discussion
+            </button>
+            {canEditProject && (
+              <button
+                onClick={openEditProject}
+                className="flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium text-text-secondary hover:text-text-primary hover:bg-surface-tertiary rounded-lg transition-colors"
+              >
+                <Settings className="w-4 h-4" />
+                Edit
+              </button>
+            )}
+          </div>
         </div>
 
         {project.description && (
@@ -294,7 +326,8 @@ export default function ProjectDetail() {
           </div>
           <p className="text-xs text-text-tertiary mt-1">{completedTasks} of {tasks.length} tasks completed</p>
         </div>
-      </div>
+      </div>{/* end p-6 wrapper */}
+      </div>{/* end project header card */}
 
       {/* View switcher + Add Task */}
       <div className="flex items-center justify-between">
@@ -359,7 +392,9 @@ export default function ProjectDetail() {
                       <TaskKanbanCard
                         key={task._id}
                         task={task}
-                        onEdit={() => openEditTask(task)}
+                        canEdit={canEditResource('task', task)}
+                        canDelete={canDeleteResource('task', task)}
+                        onClick={() => openEditTask(task)}
                         onDelete={() => handleDeleteTask(task._id)}
                         onStatusChange={handleTaskStatusChange}
                         onDragStart={handleDragStart}
@@ -386,26 +421,25 @@ export default function ProjectDetail() {
                 <th className="text-left px-4 py-3 text-xs font-semibold text-text-tertiary uppercase tracking-wider">Priority</th>
                 <th className="text-left px-4 py-3 text-xs font-semibold text-text-tertiary uppercase tracking-wider">Assignee</th>
                 <th className="text-left px-4 py-3 text-xs font-semibold text-text-tertiary uppercase tracking-wider">Due</th>
-                <th className="text-left px-4 py-3 text-xs font-semibold text-text-tertiary uppercase tracking-wider w-16"></th>
               </tr>
             </thead>
             <tbody className="divide-y divide-border-light">
               {tasks.length === 0 ? (
-                <tr><td colSpan={7} className="py-12 text-center text-sm text-text-tertiary">No tasks yet</td></tr>
+                <tr><td colSpan={6} className="py-12 text-center text-sm text-text-tertiary">No tasks yet</td></tr>
               ) : (
                 tasks.map(task => {
                   const prio = PRIORITY_CONFIG[task.priority] || PRIORITY_CONFIG.medium
                   const assigneeName = task.assignedName || task.assigned_name
                   const isOverdue = task.dueDate && new Date(task.dueDate) < new Date() && task.status !== 'done'
                   return (
-                    <tr key={task._id} className="hover:bg-surface-secondary group">
+                    <tr key={task._id} onClick={() => openEditTask(task)} className="hover:bg-surface-secondary cursor-pointer transition-colors">
                       <td className="px-4 py-3">
                         <div className={`w-2.5 h-2.5 rounded-full ${prio.color}`} />
                       </td>
                       <td className="px-4 py-3">
-                        <button onClick={() => openEditTask(task)} className="text-sm font-medium text-text-primary hover:text-brand-primary text-left">
+                        <span className="text-sm font-medium text-text-primary">
                           {task.title}
-                        </button>
+                        </span>
                         {task.description && <p className="text-xs text-text-tertiary line-clamp-1 mt-0.5">{task.description}</p>}
                       </td>
                       <td className="px-4 py-3"><StatusBadge status={task.status} size="xs" /></td>
@@ -414,16 +448,6 @@ export default function ProjectDetail() {
                       <td className={`px-4 py-3 text-xs ${isOverdue ? 'text-red-500 font-medium' : 'text-text-tertiary'}`}>
                         {task.dueDate ? format(new Date(task.dueDate), 'MMM d, yyyy') : '—'}
                       </td>
-                      <td className="px-4 py-3">
-                        <div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
-                          <button onClick={() => openEditTask(task)} className="p-1 rounded hover:bg-surface-tertiary text-text-tertiary">
-                            <Edit3 className="w-3.5 h-3.5" />
-                          </button>
-                          <button onClick={() => handleDeleteTask(task._id)} className="p-1 rounded hover:bg-red-50 text-red-400">
-                            <Trash2 className="w-3.5 h-3.5" />
-                          </button>
-                        </div>
-                      </td>
                     </tr>
                   )
                 })
@@ -435,173 +459,80 @@ export default function ProjectDetail() {
 
       {/* ─── GANTT / TIMELINE VIEW ─── */}
       {view === 'gantt' && <GanttView tasks={tasks} project={project} onEditTask={openEditTask} />}
+      </div>{/* end main content */}
 
-      {/* ─── TASK MODAL ─── */}
-      <Modal
-        isOpen={showTaskModal}
-        onClose={() => { setShowTaskModal(false); setEditingTask(null) }}
-        title={editingTask ? 'Edit Task' : 'Add Task'}
-        size="md"
-      >
-        <div className="space-y-4">
-          <div>
-            <label className="block text-sm font-medium text-text-primary mb-1">Title *</label>
-            <input
-              type="text"
-              value={taskForm.title}
-              onChange={e => setTaskForm(f => ({ ...f, title: e.target.value }))}
-              className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary"
-              placeholder="Task title"
-            />
-          </div>
-          <div>
-            <label className="block text-sm font-medium text-text-primary mb-1">Description</label>
-            <textarea
-              value={taskForm.description}
-              onChange={e => setTaskForm(f => ({ ...f, description: e.target.value }))}
-              rows={2}
-              className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary resize-none"
-              placeholder="Optional description"
-            />
-          </div>
-          <div className="grid grid-cols-2 gap-4">
-            <div>
-              <label className="block text-sm font-medium text-text-primary mb-1">Priority</label>
-              <select value={taskForm.priority} onChange={e => setTaskForm(f => ({ ...f, priority: e.target.value }))}
-                className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary">
-                <option value="low">Low</option>
-                <option value="medium">Medium</option>
-                <option value="high">High</option>
-                <option value="urgent">Urgent</option>
-              </select>
-            </div>
-            <div>
-              <label className="block text-sm font-medium text-text-primary mb-1">Status</label>
-              <select value={taskForm.status} onChange={e => setTaskForm(f => ({ ...f, status: e.target.value }))}
-                className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary">
-                <option value="todo">To Do</option>
-                <option value="in_progress">In Progress</option>
-                <option value="done">Done</option>
-              </select>
-            </div>
-          </div>
-          <div className="grid grid-cols-2 gap-4">
-            <div>
-              <label className="block text-sm font-medium text-text-primary mb-1">Assign To</label>
-              <select value={taskForm.assigned_to} onChange={e => setTaskForm(f => ({ ...f, assigned_to: e.target.value }))}
-                className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary">
-                <option value="">Unassigned</option>
-                {teamMembers.map(m => <option key={m._id} value={m._id}>{m.name}</option>)}
-              </select>
-            </div>
-            <div>
-              <label className="block text-sm font-medium text-text-primary mb-1">Due Date</label>
-              <input type="date" value={taskForm.due_date} onChange={e => setTaskForm(f => ({ ...f, due_date: e.target.value }))}
-                className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary" />
-            </div>
-          </div>
-          <div className="flex items-center justify-end gap-3 pt-4 border-t border-border">
-            {editingTask && (
-              <button onClick={() => handleDeleteTask(editingTask._id)}
-                className="px-4 py-2 text-sm font-medium text-red-600 hover:bg-red-50 rounded-lg mr-auto">
-                Delete
-              </button>
-            )}
-            <button onClick={() => { setShowTaskModal(false); setEditingTask(null) }}
-              className="px-4 py-2 text-sm font-medium text-text-secondary hover:bg-surface-tertiary rounded-lg">
-              Cancel
-            </button>
-            <button onClick={handleTaskSave} disabled={!taskForm.title}
-              className="px-5 py-2 bg-brand-primary text-white rounded-lg text-sm font-medium hover:bg-brand-primary-light disabled:opacity-50 disabled:cursor-not-allowed shadow-sm">
-              {editingTask ? 'Save Changes' : 'Add Task'}
+      {/* ─── DISCUSSION SIDEBAR ─── */}
+      {showDiscussion && (
+        <div className="w-[340px] shrink-0 bg-white rounded-xl border border-border flex flex-col self-start sticky top-4" style={{ maxHeight: 'calc(100vh - 6rem)' }}>
+          <div className="flex items-center justify-between px-4 py-3 border-b border-border">
+            <h3 className="text-sm font-semibold text-text-primary flex items-center gap-1.5">
+              <MessageCircle className="w-4 h-4" />
+              Discussion
+            </h3>
+            <button onClick={() => setShowDiscussion(false)} className="p-1 hover:bg-surface-tertiary rounded-lg text-text-tertiary">
+              <X className="w-4 h-4" />
             </button>
           </div>
+          <div className="flex-1 overflow-y-auto p-4">
+            <CommentsSection entityType="project" entityId={Number(id)} />
+          </div>
         </div>
+      )}
+
+      {/* ─── DELETE TASK CONFIRMATION ─── */}
+      <Modal
+        isOpen={showDeleteConfirm}
+        onClose={() => { setShowDeleteConfirm(false); setTaskToDelete(null) }}
+        title="Delete Task?"
+        isConfirm
+        danger
+        confirmText="Delete Task"
+        onConfirm={confirmDeleteTask}
+      >
+        Are you sure you want to delete this task? This action cannot be undone.
       </Modal>
 
-      {/* ─── PROJECT EDIT MODAL ─── */}
-      <Modal
-        isOpen={showProjectModal}
-        onClose={() => setShowProjectModal(false)}
-        title="Edit Project"
-        size="md"
-      >
-        <div className="space-y-4">
-          <div>
-            <label className="block text-sm font-medium text-text-primary mb-1">Name *</label>
-            <input type="text" value={projectForm.name} onChange={e => setProjectForm(f => ({ ...f, name: e.target.value }))}
-              className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary"
-              placeholder="Project name" />
-          </div>
-          <div>
-            <label className="block text-sm font-medium text-text-primary mb-1">Description</label>
-            <textarea value={projectForm.description} onChange={e => setProjectForm(f => ({ ...f, description: e.target.value }))}
-              rows={3} className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary resize-none"
-              placeholder="Project description..." />
-          </div>
-          <div className="grid grid-cols-2 gap-4">
-            <div>
-              <label className="block text-sm font-medium text-text-primary mb-1">Brand</label>
-              <select value={projectForm.brand_id} onChange={e => setProjectForm(f => ({ ...f, brand_id: e.target.value }))}
-                className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary">
-                <option value="">Select brand</option>
-                {brands.map(b => <option key={b._id} value={b._id}>{b.icon} {b.name}</option>)}
-              </select>
-            </div>
-            <div>
-              <label className="block text-sm font-medium text-text-primary mb-1">Status</label>
-              <select value={projectForm.status} onChange={e => setProjectForm(f => ({ ...f, status: e.target.value }))}
-                className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary">
-                <option value="active">Active</option>
-                <option value="paused">Paused</option>
-                <option value="completed">Completed</option>
-                <option value="cancelled">Cancelled</option>
-              </select>
-            </div>
-          </div>
-          <div className="grid grid-cols-2 gap-4">
-            <div>
-              <label className="block text-sm font-medium text-text-primary mb-1">Owner</label>
-              <select value={projectForm.owner_id} onChange={e => setProjectForm(f => ({ ...f, owner_id: e.target.value }))}
-                className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary">
-                <option value="">Unassigned</option>
-                {teamMembers.map(m => <option key={m._id} value={m._id}>{m.name}</option>)}
-              </select>
-            </div>
-            <div>
-              <label className="block text-sm font-medium text-text-primary mb-1">Due Date</label>
-              <input type="date" value={projectForm.due_date} onChange={e => setProjectForm(f => ({ ...f, due_date: e.target.value }))}
-                className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary" />
-            </div>
-          </div>
-          <div className="flex items-center justify-end gap-3 pt-4 border-t border-border">
-            <button onClick={() => setShowProjectModal(false)}
-              className="px-4 py-2 text-sm font-medium text-text-secondary hover:bg-surface-tertiary rounded-lg">
-              Cancel
-            </button>
-            <button onClick={handleProjectSave} disabled={!projectForm.name}
-              className="px-5 py-2 bg-brand-primary text-white rounded-lg text-sm font-medium hover:bg-brand-primary-light disabled:opacity-50 disabled:cursor-not-allowed shadow-sm">
-              Save Changes
-            </button>
-          </div>
-        </div>
-      </Modal>
+      {/* Project Edit Panel */}
+      {panelProject && (
+        <ProjectEditPanel
+          project={panelProject}
+          onClose={() => setPanelProject(null)}
+          onSave={handleProjectPanelSave}
+          onDelete={handleProjectPanelDelete}
+          brands={brands}
+          teamMembers={teamMembers}
+        />
+      )}
+
+      {/* Task Detail Panel */}
+      {panelTask && (
+        <TaskDetailPanel
+          task={panelTask}
+          onClose={() => setPanelTask(null)}
+          onSave={handleTaskPanelSave}
+          onDelete={handleTaskPanelDelete}
+          projects={project ? [project] : []}
+          users={assignableUsers}
+          brands={brands}
+        />
+      )}
     </div>
   )
 }
 
 // ─── Task Kanban Card ───────────────────────────────
-function TaskKanbanCard({ task, onEdit, onDelete, onStatusChange, onDragStart, onDragEnd }) {
+function TaskKanbanCard({ task, canEdit, canDelete, onClick, onDelete, onStatusChange, onDragStart, onDragEnd }) {
   const priority = PRIORITY_CONFIG[task.priority] || PRIORITY_CONFIG.medium
   const assigneeName = task.assignedName || task.assigned_name
   const isOverdue = task.dueDate && new Date(task.dueDate) < new Date() && task.status !== 'done'
 
   return (
     <div
-      draggable
-      onDragStart={(e) => onDragStart(e, task)}
+      draggable={canEdit}
+      onDragStart={(e) => canEdit && onDragStart(e, task)}
       onDragEnd={onDragEnd}
-      className="bg-white rounded-lg border border-border p-3 group hover:border-brand-primary/30 hover:shadow-sm transition-all cursor-grab active:cursor-grabbing"
+      onClick={onClick}
+      className={`bg-white rounded-lg border border-border p-3 group hover:border-brand-primary/30 hover:shadow-sm transition-all cursor-pointer ${canEdit ? 'active:cursor-grabbing' : ''}`}
     >
       <div className="flex items-start gap-2">
         <div className={`w-2 h-2 rounded-full ${priority.color} mt-1.5 shrink-0`} title={priority.label} />
@@ -623,23 +554,23 @@ function TaskKanbanCard({ task, onEdit, onDelete, onStatusChange, onDragStart, o
         </div>
       </div>
       {/* Actions on hover */}
-      <div className="flex items-center gap-1 mt-2 pt-2 border-t border-border-light opacity-0 group-hover:opacity-100 transition-opacity">
-        {task.status !== 'done' && (
-          <button onClick={() => onStatusChange(task._id, task.status === 'todo' ? 'in_progress' : 'done')}
-            className="text-[10px] text-brand-primary hover:bg-brand-primary/10 px-2 py-0.5 rounded-full flex items-center gap-1">
-            <Check className="w-3 h-3" />
-            {task.status === 'todo' ? 'Start' : 'Complete'}
-          </button>
-        )}
-        <button onClick={onEdit}
-          className="text-[10px] text-text-tertiary hover:bg-surface-tertiary px-2 py-0.5 rounded-full flex items-center gap-1">
-          <Edit3 className="w-3 h-3" /> Edit
-        </button>
-        <button onClick={onDelete}
-          className="text-[10px] text-red-400 hover:bg-red-50 px-2 py-0.5 rounded-full flex items-center gap-1 ml-auto">
-          <Trash2 className="w-3 h-3" />
-        </button>
-      </div>
+      {(canEdit || canDelete) && (
+        <div className="flex items-center gap-1 mt-2 pt-2 border-t border-border-light opacity-0 group-hover:opacity-100 transition-opacity">
+          {canEdit && task.status !== 'done' && (
+            <button onClick={(e) => { e.stopPropagation(); onStatusChange(task._id, task.status === 'todo' ? 'in_progress' : 'done') }}
+              className="text-[10px] text-brand-primary hover:bg-brand-primary/10 px-2 py-0.5 rounded-full flex items-center gap-1">
+              <Check className="w-3 h-3" />
+              {task.status === 'todo' ? 'Start' : 'Complete'}
+            </button>
+          )}
+          {canDelete && (
+            <button onClick={(e) => { e.stopPropagation(); onDelete() }}
+              className="text-[10px] text-red-400 hover:bg-red-50 px-2 py-0.5 rounded-full flex items-center gap-1 ml-auto">
+              <Trash2 className="w-3 h-3" />
+            </button>
+          )}
+        </div>
+      )}
     </div>
   )
 }
@@ -682,7 +613,9 @@ function GanttView({ tasks, project, onEditTask }) {
   const dayWidth = Math.max(36, Math.min(60, 800 / totalDays))
 
   const getBarStyle = (task) => {
-    const start = task.createdAt ? startOfDay(new Date(task.createdAt)) : today
+    const start = task.startDate || task.start_date
+      ? startOfDay(new Date(task.startDate || task.start_date))
+      : task.createdAt ? startOfDay(new Date(task.createdAt)) : today
     const end = task.dueDate ? startOfDay(new Date(task.dueDate)) : addDays(start, 3)
     const left = differenceInDays(start, earliest) * dayWidth
     const width = Math.max(dayWidth, (differenceInDays(end, start) + 1) * dayWidth)
@@ -759,19 +692,6 @@ function GanttView({ tasks, project, onEditTask }) {
           })}
         </div>
       </div>
-
-      {/* Delete Task Confirmation */}
-      <Modal
-        isOpen={showDeleteConfirm}
-        onClose={() => { setShowDeleteConfirm(false); setTaskToDelete(null) }}
-        title="Delete Task?"
-        isConfirm
-        danger
-        confirmText="Delete Task"
-        onConfirm={confirmDeleteTask}
-      >
-        Are you sure you want to delete this task? This action cannot be undone.
-      </Modal>
     </div>
   )
 }

client/src/pages/Projects.jsx

@@ -1,22 +1,29 @@
 import { useState, useEffect, useContext } from 'react'
-import { Plus, Search, FolderKanban } from 'lucide-react'
+import { useNavigate } from 'react-router-dom'
+import { Plus, Search, FolderKanban, LayoutGrid, GanttChart } from 'lucide-react'
 import { AppContext } from '../App'
 import { api } from '../utils/api'
+import { useAuth } from '../contexts/AuthContext'
 import ProjectCard from '../components/ProjectCard'
 import Modal from '../components/Modal'
+import InteractiveTimeline from '../components/InteractiveTimeline'
+import { SkeletonCard } from '../components/SkeletonLoader'
 
 const EMPTY_PROJECT = {
   name: '', description: '', brand_id: '', status: 'active',
-  owner_id: '', due_date: '',
+  owner_id: '', start_date: '', due_date: '',
 }
 
 export default function Projects() {
+  const navigate = useNavigate()
   const { teamMembers, brands } = useContext(AppContext)
+  const { permissions } = useAuth()
   const [projects, setProjects] = useState([])
   const [loading, setLoading] = useState(true)
   const [showModal, setShowModal] = useState(false)
   const [formData, setFormData] = useState(EMPTY_PROJECT)
   const [searchTerm, setSearchTerm] = useState('')
+  const [view, setView] = useState('timeline') // 'grid' | 'timeline'
 
   useEffect(() => { loadProjects() }, [])
 
@@ -39,6 +46,7 @@ export default function Projects() {
         brand_id: formData.brand_id ? Number(formData.brand_id) : null,
         owner_id: formData.owner_id ? Number(formData.owner_id) : null,
         status: formData.status,
+        start_date: formData.start_date || null,
         due_date: formData.due_date || null,
       }
       await api.post('/projects', data)
@@ -57,10 +65,10 @@ export default function Projects() {
 
   if (loading) {
     return (
-      <div className="animate-pulse">
-        <div className="h-12 bg-surface-tertiary rounded-xl mb-4"></div>
+      <div className="space-y-4">
+        <div className="h-12 bg-surface-tertiary rounded-xl animate-pulse"></div>
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-          {[...Array(6)].map((_, i) => <div key={i} className="h-56 bg-surface-tertiary rounded-xl"></div>)}
+          {[...Array(6)].map((_, i) => <SkeletonCard key={i} />)}
         </div>
       </div>
     )
@@ -81,28 +89,77 @@ export default function Projects() {
           />
         </div>
 
-        <button
-          onClick={() => setShowModal(true)}
-          className="flex items-center gap-2 px-4 py-2 bg-brand-primary text-white rounded-lg text-sm font-medium hover:bg-brand-primary-light shadow-sm ml-auto"
-        >
-          <Plus className="w-4 h-4" />
-          New Project
-        </button>
+        {/* View switcher */}
+        <div className="flex items-center gap-1 bg-surface-tertiary rounded-lg p-0.5">
+          {[
+            { id: 'grid', icon: LayoutGrid, label: 'Grid' },
+            { id: 'timeline', icon: GanttChart, label: 'Timeline' },
+          ].map(v => (
+            <button
+              key={v.id}
+              onClick={() => setView(v.id)}
+              className={`flex items-center gap-1.5 px-3 py-1.5 rounded-md text-sm font-medium transition-colors ${
+                view === v.id ? 'bg-white shadow-sm text-text-primary' : 'text-text-tertiary hover:text-text-secondary'
+              }`}
+            >
+              <v.icon className="w-4 h-4" />
+              {v.label}
+            </button>
+          ))}
+        </div>
+
+        {permissions?.canCreateProjects && (
+          <button
+            onClick={() => setShowModal(true)}
+            className="flex items-center gap-2 px-4 py-2 bg-brand-primary text-white rounded-lg text-sm font-medium hover:bg-brand-primary-light shadow-sm ml-auto"
+          >
+            <Plus className="w-4 h-4" />
+            New Project
+          </button>
+        )}
       </div>
 
-      {/* Project grid */}
+      {/* Content */}
       {filtered.length === 0 ? (
         <div className="py-20 text-center">
           <FolderKanban className="w-12 h-12 text-text-tertiary mx-auto mb-3" />
           <p className="text-text-secondary font-medium">No projects yet</p>
           <p className="text-sm text-text-tertiary mt-1">Create your first project to start organizing work</p>
         </div>
-      ) : (
+      ) : view === 'grid' ? (
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 stagger-children">
           {filtered.map(project => (
             <ProjectCard key={project._id} project={project} />
           ))}
         </div>
+      ) : (
+        <InteractiveTimeline
+          items={filtered}
+          mapItem={(project) => ({
+            id: project._id || project.id,
+            label: project.name,
+            description: project.description,
+            startDate: project.startDate || project.start_date || project.createdAt,
+            endDate: project.dueDate || project.due_date,
+            status: project.status,
+            priority: project.priority,
+            assigneeName: project.ownerName || project.owner_name,
+            thumbnailUrl: project.thumbnail_url || project.thumbnailUrl,
+            tags: [project.status, project.priority].filter(Boolean),
+          })}
+          onDateChange={async (projectId, { startDate, endDate }) => {
+            try {
+              await api.patch(`/projects/${projectId}`, { start_date: startDate, due_date: endDate })
+            } catch (err) {
+              console.error('Timeline date update failed:', err)
+            } finally {
+              loadProjects()
+            }
+          }}
+          onItemClick={(project) => {
+            navigate(`/projects/${project._id || project.id}`)
+          }}
+        />
       )}
 
       {/* Create Modal */}
@@ -170,16 +227,26 @@ export default function Projects() {
               </select>
             </div>
             <div>
-              <label className="block text-sm font-medium text-text-primary mb-1">Due Date</label>
+              <label className="block text-sm font-medium text-text-primary mb-1">Start Date</label>
               <input
                 type="date"
-                value={formData.due_date}
-                onChange={e => setFormData(f => ({ ...f, due_date: e.target.value }))}
+                value={formData.start_date}
+                onChange={e => setFormData(f => ({ ...f, start_date: e.target.value }))}
                 className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary"
               />
             </div>
           </div>
 
+          <div>
+            <label className="block text-sm font-medium text-text-primary mb-1">Due Date</label>
+            <input
+              type="date"
+              value={formData.due_date}
+              onChange={e => setFormData(f => ({ ...f, due_date: e.target.value }))}
+              className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary"
+            />
+          </div>
+
           <div className="flex items-center justify-end gap-3 pt-4 border-t border-border">
             <button
               onClick={() => setShowModal(false)}

client/src/pages/PublicIssueSubmit.jsx

@@ -0,0 +1,337 @@
+import { useState } from 'react'
+import { AlertCircle, Send, CheckCircle2, Upload, X } from 'lucide-react'
+import { api } from '../utils/api'
+import FormInput from '../components/FormInput'
+
+const TYPE_OPTIONS = [
+  { value: 'request', label: 'Request' },
+  { value: 'correction', label: 'Correction' },
+  { value: 'complaint', label: 'Complaint' },
+  { value: 'suggestion', label: 'Suggestion' },
+  { value: 'other', label: 'Other' },
+]
+
+const PRIORITY_OPTIONS = [
+  { value: 'low', label: 'Low' },
+  { value: 'medium', label: 'Medium' },
+  { value: 'high', label: 'High' },
+  { value: 'urgent', label: 'Urgent' },
+]
+
+export default function PublicIssueSubmit() {
+  const [form, setForm] = useState({
+    name: '',
+    email: '',
+    phone: '',
+    category: 'Marketing',
+    type: 'request',
+    priority: 'medium',
+    title: '',
+    description: '',
+  })
+  const [file, setFile] = useState(null)
+  const [submitting, setSubmitting] = useState(false)
+  const [submitted, setSubmitted] = useState(false)
+  const [trackingToken, setTrackingToken] = useState('')
+  const [errors, setErrors] = useState({})
+
+  const updateForm = (field, value) => {
+    setForm((f) => ({ ...f, [field]: value }))
+    if (errors[field]) {
+      setErrors((e) => ({ ...e, [field]: '' }))
+    }
+  }
+
+  const handleFileChange = (e) => {
+    const selectedFile = e.target.files?.[0]
+    if (selectedFile) {
+      setFile(selectedFile)
+    }
+  }
+
+  const validate = () => {
+    const newErrors = {}
+    if (!form.name.trim()) newErrors.name = 'Name is required'
+    if (!form.email.trim()) newErrors.email = 'Email is required'
+    else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email)) newErrors.email = 'Invalid email address'
+    if (!form.title.trim()) newErrors.title = 'Title is required'
+    if (!form.description.trim()) newErrors.description = 'Description is required'
+    setErrors(newErrors)
+    return Object.keys(newErrors).length === 0
+  }
+
+  const handleSubmit = async (e) => {
+    e.preventDefault()
+    if (!validate() || submitting) return
+
+    try {
+      setSubmitting(true)
+      const formData = new FormData()
+      formData.append('name', form.name)
+      formData.append('email', form.email)
+      formData.append('phone', form.phone)
+      formData.append('category', form.category)
+      formData.append('type', form.type)
+      formData.append('priority', form.priority)
+      formData.append('title', form.title)
+      formData.append('description', form.description)
+      if (file) {
+        formData.append('file', file)
+      }
+
+      const result = await api.upload('/public/issues', formData)
+      setTrackingToken(result.token)
+      setSubmitted(true)
+    } catch (err) {
+      console.error('Submit error:', err)
+      alert('Failed to submit issue. Please try again.')
+    } finally {
+      setSubmitting(false)
+    }
+  }
+
+  if (submitted) {
+    const trackingUrl = `${window.location.origin}/track/${trackingToken}`
+    return (
+      <div className="min-h-screen bg-surface-secondary py-8 px-4">
+        <div className="max-w-lg mx-auto bg-surface rounded-xl border border-border p-6">
+          <div className="text-center">
+            <div className="w-16 h-16 bg-emerald-100 rounded-full flex items-center justify-center mx-auto mb-4">
+              <CheckCircle2 className="w-10 h-10 text-emerald-600" />
+            </div>
+            <h1 className="text-2xl font-bold text-text-primary mb-2">Issue Submitted Successfully!</h1>
+            <p className="text-sm text-text-tertiary mb-6">
+              Thank you for submitting your issue. You can track its progress using the link below.
+            </p>
+
+            <div className="bg-surface-secondary rounded-lg p-4 mb-6">
+              <label className="block text-xs font-semibold text-text-tertiary uppercase mb-2">Your Tracking Link</label>
+              <div className="flex gap-2">
+                <input
+                  type="text"
+                  value={trackingUrl}
+                  readOnly
+                  className="flex-1 px-3 py-2 text-sm border border-border rounded-lg bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-brand-primary/20 transition-colors"
+                />
+                <button
+                  onClick={() => {
+                    navigator.clipboard.writeText(trackingUrl)
+                    alert('Copied to clipboard!')
+                  }}
+                  className="px-4 py-2 bg-brand-primary text-white rounded-lg font-medium hover:bg-brand-primary-light transition-colors"
+                >
+                  Copy
+                </button>
+              </div>
+            </div>
+
+            <div className="space-y-2">
+              <a
+                href={`/track/${trackingToken}`}
+                className="block w-full px-4 py-2 bg-brand-primary text-white rounded-lg font-medium hover:bg-brand-primary-light transition-colors"
+              >
+                Track Your Issue
+              </a>
+              <button
+                onClick={() => {
+                  setSubmitted(false)
+                  setTrackingToken('')
+                  setForm({
+                    name: '',
+                    email: '',
+                    phone: '',
+                    category: 'Marketing',
+                    type: 'request',
+                    priority: 'medium',
+                    title: '',
+                    description: '',
+                  })
+                  setFile(null)
+                }}
+                className="block w-full px-3 py-1.5 border border-border text-text-secondary rounded-lg hover:bg-surface-tertiary transition-colors"
+              >
+                Submit Another Issue
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="min-h-screen bg-surface-secondary py-8 px-4">
+      <div className="max-w-lg mx-auto bg-surface rounded-xl border border-border p-6">
+        {/* Header */}
+        <div className="text-center mb-6">
+          <div className="w-12 h-12 bg-brand-primary/10 rounded-full flex items-center justify-center mx-auto mb-3">
+            <AlertCircle className="w-6 h-6 text-brand-primary" />
+          </div>
+          <h1 className="text-2xl font-bold text-text-primary mb-2">Submit an Issue</h1>
+          <p className="text-sm text-text-tertiary">
+            Report issues, request corrections, or make suggestions. We'll track your submission and keep you updated.
+          </p>
+        </div>
+
+        {/* Form */}
+        <form onSubmit={handleSubmit} className="space-y-4">
+          {/* Contact Information */}
+          <div>
+            <h2 className="text-sm font-semibold text-text-primary mb-2">Your Information</h2>
+            <div className="space-y-3">
+              <FormInput
+                label="Name"
+                value={form.name}
+                onChange={(e) => updateForm('name', e.target.value)}
+                placeholder="Your full name"
+                required
+                error={errors.name}
+              />
+              <FormInput
+                label="Email"
+                type="email"
+                value={form.email}
+                onChange={(e) => updateForm('email', e.target.value)}
+                placeholder="your.email@example.com"
+                required
+                error={errors.email}
+              />
+              <FormInput
+                label="Phone (Optional)"
+                value={form.phone}
+                onChange={(e) => updateForm('phone', e.target.value)}
+                placeholder="+966 5X XXX XXXX"
+              />
+            </div>
+          </div>
+
+          {/* Issue Details */}
+          <div>
+            <h2 className="text-sm font-semibold text-text-primary mb-2">Issue Details</h2>
+            
+            <div className="space-y-3">
+              <div>
+                <label className="block text-sm font-medium text-text-primary mb-1.5">
+                  Category <span className="text-red-500">*</span>
+                </label>
+                <input
+                  type="text"
+                  value={form.category}
+                  onChange={(e) => updateForm('category', e.target.value)}
+                  placeholder="e.g., Marketing, IT, Operations"
+                  className="w-full px-3 py-2 text-sm border border-border rounded-lg bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-brand-primary/20 transition-colors"
+                />
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium text-text-primary mb-1.5">
+                  Type <span className="text-red-500">*</span>
+                </label>
+                <select
+                  value={form.type}
+                  onChange={(e) => updateForm('type', e.target.value)}
+                  className="w-full px-3 py-2 text-sm border border-border rounded-lg bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-brand-primary/20 transition-colors"
+                >
+                  {TYPE_OPTIONS.map((opt) => (
+                    <option key={opt.value} value={opt.value}>
+                      {opt.label}
+                    </option>
+                  ))}
+                </select>
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium text-text-primary mb-1.5">
+                  Priority <span className="text-red-500">*</span>
+                </label>
+                <select
+                  value={form.priority}
+                  onChange={(e) => updateForm('priority', e.target.value)}
+                  className="w-full px-3 py-2 text-sm border border-border rounded-lg bg-surface text-text-primary focus:outline-none focus:ring-2 focus:ring-brand-primary/20 transition-colors"
+                >
+                  {PRIORITY_OPTIONS.map((opt) => (
+                    <option key={opt.value} value={opt.value}>
+                      {opt.label}
+                    </option>
+                  ))}
+                </select>
+              </div>
+
+              <FormInput
+                label="Title"
+                value={form.title}
+                onChange={(e) => updateForm('title', e.target.value)}
+                placeholder="Brief summary of the issue"
+                required
+                error={errors.title}
+              />
+
+              <FormInput
+                label="Description"
+                type="textarea"
+                value={form.description}
+                onChange={(e) => updateForm('description', e.target.value)}
+                placeholder="Provide detailed information about the issue..."
+                rows={6}
+                required
+                error={errors.description}
+              />
+            </div>
+          </div>
+
+          {/* File Upload */}
+          <div>
+            <h2 className="text-sm font-semibold text-text-primary mb-2">Attachment (Optional)</h2>
+            <label className="block cursor-pointer">
+              <input type="file" onChange={handleFileChange} className="hidden" />
+              <div className="border-2 border-dashed border-border rounded-lg p-4 text-center hover:bg-surface-secondary/50 transition-colors">
+                <Upload className="w-6 h-6 mx-auto mb-2 text-text-tertiary" />
+                {file ? (
+                  <div className="flex items-center justify-center gap-2">
+                    <p className="text-sm text-text-primary font-medium">{file.name}</p>
+                    <button
+                      type="button"
+                      onClick={(e) => {
+                        e.stopPropagation()
+                        setFile(null)
+                      }}
+                      className="p-1 hover:bg-surface-tertiary rounded"
+                    >
+                      <X className="w-4 h-4 text-red-600" />
+                    </button>
+                  </div>
+                ) : (
+                  <p className="text-sm text-text-tertiary">Click to upload a file (screenshots, documents, etc.)</p>
+                )}
+              </div>
+            </label>
+          </div>
+
+          {/* Submit Button */}
+          <button
+            type="submit"
+            disabled={submitting}
+            className="w-full px-4 py-2 bg-brand-primary text-white rounded-lg font-medium hover:bg-brand-primary-light disabled:opacity-50 disabled:cursor-not-allowed transition-colors flex items-center justify-center gap-2"
+          >
+            {submitting ? (
+              <>
+                <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin"></div>
+                Submitting...
+              </>
+            ) : (
+              <>
+                <Send className="w-5 h-5" />
+                Submit Issue
+              </>
+            )}
+          </button>
+        </form>
+
+        {/* Footer Note */}
+        <p className="text-xs text-text-tertiary text-center mt-4">
+          You'll receive a tracking link to monitor the progress of your issue.
+        </p>
+      </div>
+    </div>
+  )
+}

client/src/pages/PublicIssueTracker.jsx

@@ -0,0 +1,361 @@
+import { useState, useEffect } from 'react'
+import { useParams } from 'react-router-dom'
+import { AlertCircle, Clock, CheckCircle2, XCircle, MessageCircle, Upload, FileText, Send } from 'lucide-react'
+import { api } from '../utils/api'
+
+const STATUS_CONFIG = {
+  new: { label: 'New', bg: 'bg-purple-100', text: 'text-purple-700', dot: 'bg-purple-500', icon: AlertCircle },
+  acknowledged: { label: 'Acknowledged', bg: 'bg-blue-100', text: 'text-blue-700', dot: 'bg-blue-500', icon: CheckCircle2 },
+  in_progress: { label: 'In Progress', bg: 'bg-amber-100', text: 'text-amber-700', dot: 'bg-amber-500', icon: Clock },
+  resolved: { label: 'Resolved', bg: 'bg-emerald-100', text: 'text-emerald-700', dot: 'bg-emerald-500', icon: CheckCircle2 },
+  declined: { label: 'Declined', bg: 'bg-gray-100', text: 'text-gray-700', dot: 'bg-gray-500', icon: XCircle },
+}
+
+const PRIORITY_CONFIG = {
+  low: { label: 'Low', color: 'text-gray-700' },
+  medium: { label: 'Medium', color: 'text-blue-700' },
+  high: { label: 'High', color: 'text-orange-700' },
+  urgent: { label: 'Urgent', color: 'text-red-700' },
+}
+
+export default function PublicIssueTracker() {
+  const { token } = useParams()
+  const [issue, setIssue] = useState(null)
+  const [updates, setUpdates] = useState([])
+  const [attachments, setAttachments] = useState([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState(null)
+
+  // Comment form
+  const [commentName, setCommentName] = useState('')
+  const [commentMessage, setCommentMessage] = useState('')
+  const [submittingComment, setSubmittingComment] = useState(false)
+
+  // File upload
+  const [uploadingFile, setUploadingFile] = useState(false)
+
+  useEffect(() => {
+    loadIssue()
+  }, [token])
+
+  const loadIssue = async () => {
+    try {
+      setLoading(true)
+      setError(null)
+      const data = await api.get(`/public/issues/${token}`)
+      setIssue(data.issue)
+      setUpdates(data.updates || [])
+      setAttachments(data.attachments || [])
+    } catch (err) {
+      console.error('Failed to load issue:', err)
+      setError(err.response?.status === 404 ? 'Issue not found' : 'Failed to load issue')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const handleAddComment = async (e) => {
+    e.preventDefault()
+    if (!commentMessage.trim() || submittingComment) return
+
+    try {
+      setSubmittingComment(true)
+      await api.post(`/public/issues/${token}/comment`, {
+        name: commentName.trim() || 'Anonymous',
+        message: commentMessage,
+      })
+      setCommentMessage('')
+      await loadIssue()
+    } catch (err) {
+      console.error('Failed to add comment:', err)
+      alert('Failed to add comment')
+    } finally {
+      setSubmittingComment(false)
+    }
+  }
+
+  const handleFileUpload = async (e) => {
+    const file = e.target.files?.[0]
+    if (!file) return
+
+    try {
+      setUploadingFile(true)
+      const formData = new FormData()
+      formData.append('file', file)
+      formData.append('name', commentName.trim() || 'Anonymous')
+      await api.upload(`/public/issues/${token}/attachments`, formData)
+      await loadIssue()
+      e.target.value = '' // Reset input
+    } catch (err) {
+      console.error('Failed to upload file:', err)
+      alert('Failed to upload file')
+    } finally {
+      setUploadingFile(false)
+    }
+  }
+
+  const formatDate = (dateStr) => {
+    if (!dateStr) return ''
+    const date = new Date(dateStr)
+    return date.toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' })
+  }
+
+  const formatDateTime = (dateStr) => {
+    if (!dateStr) return ''
+    const date = new Date(dateStr)
+    return date.toLocaleString('en-US', {
+      month: 'short',
+      day: 'numeric',
+      year: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit',
+    })
+  }
+
+  const formatFileSize = (bytes) => {
+    if (bytes < 1024) return bytes + ' B'
+    if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB'
+    return (bytes / (1024 * 1024)).toFixed(1) + ' MB'
+  }
+
+  if (loading) {
+    return (
+      <div className="min-h-screen bg-surface-secondary py-8 px-4">
+        <div className="max-w-2xl mx-auto space-y-6 animate-pulse">
+          <div className="bg-surface rounded-xl border border-border p-6 space-y-4">
+            <div className="h-5 bg-surface-tertiary rounded w-24"></div>
+            <div className="h-7 bg-surface-tertiary rounded w-3/4"></div>
+            <div className="h-4 bg-surface-tertiary rounded w-full"></div>
+            <div className="h-4 bg-surface-tertiary rounded w-2/3"></div>
+          </div>
+          <div className="bg-surface rounded-xl border border-border p-6 space-y-4">
+            <div className="h-5 bg-surface-tertiary rounded w-40"></div>
+            <div className="h-20 bg-surface-tertiary rounded"></div>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  if (error) {
+    return (
+      <div className="min-h-screen bg-surface-secondary py-8 px-4 ">
+        <div className="max-w-md mx-auto bg-surface rounded-xl border border-border p-6 text-center">
+          <div className="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-4">
+            <XCircle className="w-10 h-10 text-red-600" />
+          </div>
+          <h1 className="text-2xl font-bold text-text-primary mb-2">Issue Not Found</h1>
+          <p className="text-sm text-text-tertiary mb-6">
+            The tracking link you used is invalid or the issue has been removed.
+          </p>
+          <a
+            href="/submit-issue"
+            className="inline-block px-4 py-2 bg-brand-primary text-white rounded-lg font-medium hover:bg-brand-primary-light transition-colors"
+          >
+            Submit a New Issue
+          </a>
+        </div>
+      </div>
+    )
+  }
+
+  if (!issue) return null
+
+  const statusConfig = STATUS_CONFIG[issue.status] || STATUS_CONFIG.new
+  const StatusIcon = statusConfig.icon
+  const priorityConfig = PRIORITY_CONFIG[issue.priority] || PRIORITY_CONFIG.medium
+
+  return (
+    <div className="min-h-screen bg-surface-secondary py-8 px-4 ">
+      <div className="max-w-2xl mx-auto">
+        {/* Header */}
+        <div className="bg-surface rounded-xl border border-border p-6 mb-6">
+          <div className="mb-4">
+            <div className="flex items-center gap-2 mb-3">
+              <span className={`text-xs px-2 py-1 rounded-full font-medium flex items-center gap-1.5 ${statusConfig.bg} ${statusConfig.text}`}>
+                <span className={`w-1.5 h-1.5 rounded-full ${statusConfig.dot}`}></span>
+                {statusConfig.label}
+              </span>
+              <span className={`text-xs font-medium ${priorityConfig.color}`}>
+                {priorityConfig.label} Priority
+              </span>
+              <span className="text-xs text-text-tertiary">•</span>
+              <span className="text-xs text-text-tertiary capitalize">{issue.type}</span>
+            </div>
+            <h1 className="text-2xl font-bold text-text-primary mb-2">{issue.title}</h1>
+          </div>
+
+          <div className="mb-4">
+            <h2 className="text-sm font-semibold text-text-primary mb-2">Description</h2>
+            <p className="text-sm text-text-tertiary whitespace-pre-wrap">{issue.description}</p>
+          </div>
+
+          <div className="grid grid-cols-2 gap-4 text-sm pt-4 border-t border-border">
+            <div>
+              <span className="text-text-tertiary">Submitted:</span>
+              <span className="text-text-primary font-medium ml-2">{formatDate(issue.created_at)}</span>
+            </div>
+            <div>
+              <span className="text-text-tertiary">Last Updated:</span>
+              <span className="text-text-primary font-medium ml-2">{formatDate(issue.updated_at)}</span>
+            </div>
+          </div>
+        </div>
+
+        {/* Resolution Summary */}
+        {(issue.status === 'resolved' || issue.status === 'declined') && issue.resolution_summary && (
+          <div className={`rounded-2xl shadow-sm p-6 mb-6 ${issue.status === 'resolved' ? 'bg-emerald-50 border-2 border-emerald-200' : 'bg-gray-50 border-2 border-gray-200'}`}>
+            <div className="flex items-start gap-3">
+              {issue.status === 'resolved' ? (
+                <CheckCircle2 className="w-6 h-6 text-emerald-600 shrink-0 mt-1" />
+              ) : (
+                <XCircle className="w-6 h-6 text-gray-600 shrink-0 mt-1" />
+              )}
+              <div className="flex-1">
+                <h2 className={`text-lg font-bold mb-2 ${issue.status === 'resolved' ? 'text-emerald-900' : 'text-gray-900'}`}>
+                  {issue.status === 'resolved' ? 'Resolution' : 'Declined'}
+                </h2>
+                <p className={`${issue.status === 'resolved' ? 'text-emerald-800' : 'text-gray-800'} whitespace-pre-wrap`}>
+                  {issue.resolution_summary}
+                </p>
+                {issue.resolved_at && (
+                  <p className={`text-sm mt-2 ${issue.status === 'resolved' ? 'text-emerald-600' : 'text-gray-600'}`}>
+                    {formatDate(issue.resolved_at)}
+                  </p>
+                )}
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* Progress Timeline */}
+        <div className="bg-surface rounded-2xl shadow-sm p-8 mb-6">
+          <h2 className="text-xl font-bold text-text-primary mb-6 flex items-center gap-2">
+            <MessageCircle className="w-6 h-6" />
+            Progress Updates
+          </h2>
+
+          {updates.length === 0 ? (
+            <div className="text-center py-12">
+              <Clock className="w-12 h-12 text-text-tertiary mx-auto mb-3" />
+              <p className="text-text-secondary">No updates yet. We'll post updates here as we work on your issue.</p>
+            </div>
+          ) : (
+            <div className="space-y-4">
+              {updates.map((update, idx) => (
+                <div key={update.Id || update.id || idx} className="border-l-4 border-brand-primary pl-4 py-2">
+                  <div className="flex items-start justify-between gap-3 mb-2">
+                    <div className="flex items-center gap-2">
+                      <span className="font-semibold text-text-primary">{update.author_name}</span>
+                      <span className={`text-xs px-2 py-0.5 rounded-full ${update.author_type === 'staff' ? 'bg-purple-100 text-purple-700' : 'bg-gray-200 text-gray-700'}`}>
+                        {update.author_type === 'staff' ? 'Team' : 'You'}
+                      </span>
+                    </div>
+                    <span className="text-sm text-text-tertiary">{formatDateTime(update.created_at)}</span>
+                  </div>
+                  <p className="text-text-secondary whitespace-pre-wrap">{update.message}</p>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+
+        {/* Attachments */}
+        {attachments.length > 0 && (
+          <div className="bg-surface rounded-2xl shadow-sm p-8 mb-6">
+            <h2 className="text-xl font-bold text-text-primary mb-6 flex items-center gap-2">
+              <FileText className="w-6 h-6" />
+              Attachments
+            </h2>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+              {attachments.map((att) => (
+                <div key={att.Id || att.id} className="flex items-center justify-between p-3 bg-surface-secondary rounded-lg">
+                  <div className="flex items-center gap-3 flex-1 min-w-0">
+                    <FileText className="w-5 h-5 text-text-tertiary shrink-0" />
+                    <div className="flex-1 min-w-0">
+                      <p className="text-sm font-medium text-text-primary truncate">{att.original_name}</p>
+                      <p className="text-xs text-text-tertiary">
+                        {formatFileSize(att.size)} • {att.uploaded_by}
+                      </p>
+                    </div>
+                  </div>
+                  <a
+                    href={`/api/uploads/${att.filename}`}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="text-xs text-brand-primary hover:underline ml-2"
+                  >
+                    Download
+                  </a>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {/* Add Comment Section */}
+        {issue.status !== 'resolved' && issue.status !== 'declined' && (
+          <div className="bg-surface rounded-2xl shadow-sm p-8">
+            <h2 className="text-xl font-bold text-text-primary mb-6 flex items-center gap-2">
+              <MessageCircle className="w-6 h-6" />
+              Add a Comment
+            </h2>
+
+            <form onSubmit={handleAddComment} className="space-y-4">
+              <div>
+                <label className="block text-sm font-medium text-text-primary mb-2">Your Name (Optional)</label>
+                <input
+                  type="text"
+                  value={commentName}
+                  onChange={(e) => setCommentName(e.target.value)}
+                  placeholder="Your name"
+                  className="w-full px-4 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20"
+                />
+              </div>
+
+              <div>
+                <label className="block text-sm font-medium text-text-primary mb-2">
+                  Message <span className="text-red-500">*</span>
+                </label>
+                <textarea
+                  value={commentMessage}
+                  onChange={(e) => setCommentMessage(e.target.value)}
+                  placeholder="Add additional information or ask a question..."
+                  rows={4}
+                  required
+                  className="w-full px-4 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20"
+                />
+              </div>
+
+              <div className="flex gap-3">
+                <button
+                  type="submit"
+                  disabled={!commentMessage.trim() || submittingComment}
+                  className="px-6 py-3 bg-brand-primary text-white rounded-lg font-medium hover:bg-brand-primary-light disabled:opacity-50 disabled:cursor-not-allowed transition-colors flex items-center gap-2"
+                >
+                  <Send className="w-4 h-4" />
+                  {submittingComment ? 'Sending...' : 'Send Comment'}
+                </button>
+
+                <label className="cursor-pointer">
+                  <input type="file" onChange={handleFileUpload} disabled={uploadingFile} className="hidden" />
+                  <div className="px-6 py-3 bg-surface-secondary text-text-primary rounded-lg font-medium hover:bg-surface-tertiary transition-colors flex items-center gap-2">
+                    <Upload className="w-4 h-4" />
+                    {uploadingFile ? 'Uploading...' : 'Upload File'}
+                  </div>
+                </label>
+              </div>
+            </form>
+          </div>
+        )}
+
+        {/* Footer */}
+        <div className="text-center mt-8">
+          <p className="text-sm text-text-tertiary">
+            Bookmark this page to check your issue status anytime.
+          </p>
+        </div>
+      </div>
+    </div>
+  )
+}

client/src/pages/PublicReview.jsx

@@ -0,0 +1,478 @@
+import { useState, useEffect } from 'react'
+import { useParams } from 'react-router-dom'
+import { CheckCircle, XCircle, AlertCircle, FileText, Image as ImageIcon, Film, Sparkles, Globe } from 'lucide-react'
+
+const STATUS_ICONS = {
+  copy: FileText,
+  design: ImageIcon,
+  video: Film,
+  other: Sparkles,
+}
+
+export default function PublicReview() {
+  const { token } = useParams()
+  const [artefact, setArtefact] = useState(null)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState('')
+  const [submitting, setSubmitting] = useState(false)
+  const [success, setSuccess] = useState('')
+  const [reviewerName, setReviewerName] = useState('')
+  const [feedback, setFeedback] = useState('')
+  const [selectedLanguage, setSelectedLanguage] = useState(0)
+
+  useEffect(() => {
+    loadArtefact()
+  }, [token])
+
+  const loadArtefact = async () => {
+    try {
+      const res = await fetch(`/api/public/review/${token}`)
+      if (!res.ok) {
+        const err = await res.json()
+        setError(err.error || 'Failed to load artefact')
+        setLoading(false)
+        return
+      }
+      const data = await res.json()
+      setArtefact(data)
+    } catch (err) {
+      setError('Failed to load artefact')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const handleAction = async (action) => {
+    if (!reviewerName.trim()) {
+      alert('Please enter your name')
+      return
+    }
+
+    if (action === 'approve' && !confirm('Approve this artefact?')) return
+    if (action === 'reject' && !confirm('Reject this artefact?')) return
+    if (action === 'revision' && !feedback.trim()) {
+      alert('Please provide feedback for revision request')
+      return
+    }
+
+    setSubmitting(true)
+    try {
+      const res = await fetch(`/api/public/review/${token}/${action}`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          approved_by_name: reviewerName,
+          feedback: feedback || undefined,
+        }),
+      })
+
+      if (!res.ok) {
+        const err = await res.json()
+        setError(err.error || 'Action failed')
+        setSubmitting(false)
+        return
+      }
+
+      const data = await res.json()
+      setSuccess(data.message || 'Action completed successfully')
+      setTimeout(() => {
+        loadArtefact()
+      }, 1500)
+    } catch (err) {
+      setError('Action failed')
+    } finally {
+      setSubmitting(false)
+    }
+  }
+
+  const extractDriveFileId = (url) => {
+    const patterns = [
+      /\/file\/d\/([^\/]+)/,
+      /id=([^&]+)/,
+      /\/d\/([^\/]+)/,
+    ]
+
+    for (const pattern of patterns) {
+      const match = url.match(pattern)
+      if (match) return match[1]
+    }
+
+    return null
+  }
+
+  const getDriveEmbedUrl = (url) => {
+    const fileId = extractDriveFileId(url)
+    return fileId ? `https://drive.google.com/file/d/${fileId}/preview` : url
+  }
+
+  if (loading) {
+    return (
+      <div className="min-h-screen bg-surface-secondary flex items-center justify-center">
+        <div className="max-w-3xl w-full mx-auto px-4 space-y-6 animate-pulse">
+          <div className="bg-surface rounded-2xl overflow-hidden">
+            <div className="h-24 bg-surface-tertiary"></div>
+            <div className="p-8 space-y-4">
+              <div className="h-6 bg-surface-tertiary rounded w-2/3"></div>
+              <div className="h-4 bg-surface-tertiary rounded w-1/2"></div>
+              <div className="h-32 bg-surface-tertiary rounded"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  if (error) {
+    return (
+      <div className="min-h-screen bg-surface-secondary flex items-center justify-center p-4">
+        <div className="max-w-md w-full bg-surface rounded-2xl shadow-sm p-8 text-center">
+          <div className="w-16 h-16 rounded-full bg-red-100 flex items-center justify-center mx-auto mb-4">
+            <XCircle className="w-8 h-8 text-red-600" />
+          </div>
+          <h2 className="text-2xl font-bold text-text-primary mb-2">Review Not Available</h2>
+          <p className="text-text-secondary">{error}</p>
+        </div>
+      </div>
+    )
+  }
+
+  if (success) {
+    return (
+      <div className="min-h-screen bg-surface-secondary flex items-center justify-center p-4">
+        <div className="max-w-md w-full bg-surface rounded-2xl shadow-sm p-8 text-center">
+          <div className="w-16 h-16 rounded-full bg-emerald-100 flex items-center justify-center mx-auto mb-4">
+            <CheckCircle className="w-8 h-8 text-emerald-600" />
+          </div>
+          <h2 className="text-2xl font-bold text-text-primary mb-2">Thank You!</h2>
+          <p className="text-text-secondary">{success}</p>
+        </div>
+      </div>
+    )
+  }
+
+  if (!artefact) return null
+
+  const TypeIcon = STATUS_ICONS[artefact.type] || Sparkles
+  const isImage = (url) => /\.(jpg|jpeg|png|gif|webp)$/i.test(url)
+
+  return (
+    <div className="min-h-screen bg-surface-secondary py-12 px-4">
+      <div className="max-w-3xl mx-auto">
+        {/* Header */}
+        <div className="bg-surface rounded-2xl shadow-sm overflow-hidden mb-6">
+          <div className="bg-brand-primary px-8 py-6">
+            <div className="flex items-center gap-3 mb-2">
+              <div className="w-10 h-10 rounded-xl bg-white/20 flex items-center justify-center">
+                <Sparkles className="w-6 h-6 text-white" />
+              </div>
+              <div>
+                <h1 className="text-2xl font-bold text-white">Content Review</h1>
+                <p className="text-white/80 text-sm">Samaya Digital Hub</p>
+              </div>
+            </div>
+          </div>
+
+          <div className="p-8">
+            {/* Artefact Info */}
+            <div className="flex items-start gap-4 mb-6">
+              <div className="w-12 h-12 rounded-xl bg-brand-primary/10 flex items-center justify-center shrink-0">
+                <TypeIcon className="w-6 h-6 text-brand-primary" />
+              </div>
+              <div className="flex-1">
+                <h2 className="text-2xl font-bold text-text-primary mb-1">{artefact.title}</h2>
+                {artefact.description && (
+                  <p className="text-text-secondary mb-2">{artefact.description}</p>
+                )}
+                <div className="flex items-center gap-3 text-sm text-text-tertiary">
+                  <span className="px-2 py-0.5 bg-surface-tertiary rounded-full capitalize">{artefact.type}</span>
+                  {artefact.brand_name && <span>• {artefact.brand_name}</span>}
+                  {artefact.version_number && <span>• Version {artefact.version_number}</span>}
+                </div>
+              </div>
+            </div>
+
+            {/* COPY TYPE: Multilingual Content */}
+            {artefact.type === 'copy' && artefact.texts && artefact.texts.length > 0 && (
+              <div className="mb-6">
+                <div className="flex items-center gap-2 mb-3">
+                  <Globe className="w-4 h-4 text-text-tertiary" />
+                  <h3 className="text-sm font-semibold text-text-tertiary uppercase">Content Languages</h3>
+                </div>
+
+                {/* Language tabs */}
+                <div className="flex items-center gap-2 mb-4 flex-wrap">
+                  {artefact.texts.map((text, idx) => (
+                    <button
+                      key={idx}
+                      onClick={() => setSelectedLanguage(idx)}
+                      className={`px-4 py-2 rounded-lg font-medium transition-colors ${
+                        selectedLanguage === idx
+                          ? 'bg-brand-primary text-white shadow-sm'
+                          : 'bg-surface-tertiary text-text-secondary hover:bg-surface-tertiary/70'
+                      }`}
+                    >
+                      <div className="flex items-center gap-2">
+                        <span className="text-xs font-mono">{text.language_code}</span>
+                        <span className="text-sm">{text.language_label}</span>
+                      </div>
+                    </button>
+                  ))}
+                </div>
+
+                {/* Selected language content */}
+                <div className="bg-surface-secondary rounded-xl p-6 border border-border">
+                  <div className="mb-2 text-xs font-semibold text-text-tertiary uppercase">
+                    {artefact.texts[selectedLanguage].language_label} Content
+                  </div>
+                  <div className="text-text-primary whitespace-pre-wrap leading-relaxed">
+                    {artefact.texts[selectedLanguage].content}
+                  </div>
+                </div>
+              </div>
+            )}
+
+            {/* Legacy content field (for backward compatibility) */}
+            {artefact.content && (!artefact.texts || artefact.texts.length === 0) && (
+              <div className="mb-6">
+                <h3 className="text-sm font-semibold text-text-tertiary uppercase mb-2">Content</h3>
+                <div className="bg-surface-secondary rounded-xl p-4 border border-border">
+                  <pre className="text-text-primary whitespace-pre-wrap font-sans text-sm leading-relaxed">
+                    {artefact.content}
+                  </pre>
+                </div>
+              </div>
+            )}
+
+            {/* DESIGN TYPE: Image Gallery */}
+            {artefact.type === 'design' && artefact.attachments && artefact.attachments.length > 0 && (
+              <div className="mb-6">
+                <div className="flex items-center gap-2 mb-3">
+                  <ImageIcon className="w-4 h-4 text-text-tertiary" />
+                  <h3 className="text-sm font-semibold text-text-tertiary uppercase">Design Files</h3>
+                </div>
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                  {artefact.attachments.map((att, idx) => (
+                    <a
+                      key={idx}
+                      href={att.url}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="block rounded-xl overflow-hidden border-2 border-border hover:border-brand-primary transition-colors shadow-sm hover:shadow-sm"
+                    >
+                      <img
+                        src={att.url}
+                        alt={att.original_name || `Design ${idx + 1}`}
+                        className="w-full h-64 object-cover"
+                      />
+                      {att.original_name && (
+                        <div className="bg-surface-secondary px-4 py-2 border-t border-border">
+                          <p className="text-sm text-text-secondary truncate">{att.original_name}</p>
+                        </div>
+                      )}
+                    </a>
+                  ))}
+                </div>
+              </div>
+            )}
+
+            {/* VIDEO TYPE: Video Player or Drive Embed */}
+            {artefact.type === 'video' && artefact.attachments && artefact.attachments.length > 0 && (
+              <div className="mb-6">
+                <div className="flex items-center gap-2 mb-3">
+                  <Film className="w-4 h-4 text-text-tertiary" />
+                  <h3 className="text-sm font-semibold text-text-tertiary uppercase">Videos</h3>
+                </div>
+                <div className="space-y-4">
+                  {artefact.attachments.map((att, idx) => (
+                    <div key={idx} className="bg-surface-secondary rounded-xl overflow-hidden border border-border">
+                      {att.drive_url ? (
+                        <div>
+                          <div className="px-4 py-2 bg-surface border-b border-border flex items-center gap-2">
+                            <Globe className="w-4 h-4 text-text-tertiary" />
+                            <span className="text-sm font-medium text-text-secondary">Google Drive Video</span>
+                          </div>
+                          <iframe
+                            src={getDriveEmbedUrl(att.drive_url)}
+                            className="w-full h-96"
+                            allow="autoplay"
+                            title={`Video ${idx + 1}`}
+                          />
+                        </div>
+                      ) : (
+                        <div>
+                          {att.original_name && (
+                            <div className="px-4 py-2 bg-surface border-b border-border">
+                              <span className="text-sm font-medium text-text-secondary">{att.original_name}</span>
+                            </div>
+                          )}
+                          <video
+                            src={att.url}
+                            controls
+                            className="w-full"
+                          />
+                        </div>
+                      )}
+                    </div>
+                  ))}
+                </div>
+              </div>
+            )}
+
+            {/* OTHER TYPE: Generic Attachments */}
+            {artefact.type === 'other' && artefact.attachments && artefact.attachments.length > 0 && (
+              <div className="mb-6">
+                <h3 className="text-sm font-semibold text-text-tertiary uppercase mb-3">Attachments</h3>
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+                  {artefact.attachments.map((att, idx) => (
+                    <div key={idx}>
+                      {isImage(att.url) ? (
+                        <a
+                          href={att.url}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          className="block rounded-xl overflow-hidden border border-border hover:border-brand-primary transition-colors"
+                        >
+                          <img
+                            src={att.url}
+                            alt={att.original_name}
+                            className="w-full h-48 object-cover"
+                          />
+                          <div className="bg-surface-secondary px-3 py-2 border-t border-border">
+                            <p className="text-xs text-text-secondary truncate">{att.original_name}</p>
+                          </div>
+                        </a>
+                      ) : (
+                        <a
+                          href={att.url}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          className="flex items-center gap-3 p-4 bg-surface-secondary rounded-xl border border-border hover:border-brand-primary transition-colors"
+                        >
+                          <FileText className="w-8 h-8 text-text-tertiary shrink-0" />
+                          <div className="flex-1 min-w-0">
+                            <p className="text-sm font-medium text-text-primary truncate">{att.original_name}</p>
+                            {att.size && (
+                              <p className="text-xs text-text-tertiary">
+                                {(att.size / 1024).toFixed(1)} KB
+                              </p>
+                            )}
+                          </div>
+                        </a>
+                      )}
+                    </div>
+                  ))}
+                </div>
+              </div>
+            )}
+
+            {/* Comments */}
+            {artefact.comments && artefact.comments.length > 0 && (
+              <div className="mb-6">
+                <h3 className="text-sm font-semibold text-text-tertiary uppercase mb-3">Previous Comments</h3>
+                <div className="space-y-3">
+                  {artefact.comments.map((comment, idx) => (
+                    <div key={idx} className="bg-surface-secondary rounded-lg p-3 border border-border">
+                      <div className="flex items-center gap-2 mb-1">
+                        <span className="text-sm font-medium text-text-primary">
+                          {comment.user_name || comment.author_name || 'Anonymous'}
+                        </span>
+                        {comment.CreatedAt && (
+                          <span className="text-xs text-text-tertiary">
+                            • {new Date(comment.CreatedAt).toLocaleDateString()}
+                          </span>
+                        )}
+                      </div>
+                      <p className="text-sm text-text-secondary whitespace-pre-wrap">{comment.content}</p>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            )}
+
+            {/* Review Form */}
+            {artefact.status === 'pending_review' && (
+              <div className="border-t border-border pt-6">
+                <h3 className="text-lg font-semibold text-text-primary mb-4">Your Review</h3>
+
+                <div className="space-y-4 mb-6">
+                  <div>
+                    <label className="block text-sm font-medium text-text-primary mb-1">Your Name *</label>
+                    <input
+                      type="text"
+                      value={reviewerName}
+                      onChange={e => setReviewerName(e.target.value)}
+                      placeholder="Enter your name"
+                      className="w-full px-4 py-2 border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary bg-surface transition-colors"
+                    />
+                  </div>
+
+                  <div>
+                    <label className="block text-sm font-medium text-text-primary mb-1">Feedback (optional)</label>
+                    <textarea
+                      value={feedback}
+                      onChange={e => setFeedback(e.target.value)}
+                      rows={4}
+                      placeholder="Share your thoughts, suggestions, or required changes..."
+                      className="w-full px-4 py-2 border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary bg-surface transition-colors"
+                    />
+                  </div>
+                </div>
+
+                <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
+                  <button
+                    onClick={() => handleAction('approve')}
+                    disabled={submitting}
+                    className="flex items-center justify-center gap-2 px-4 py-3 bg-emerald-600 text-white rounded-xl font-medium hover:bg-emerald-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed shadow-sm"
+                  >
+                    <CheckCircle className="w-5 h-5" />
+                    Approve
+                  </button>
+                  <button
+                    onClick={() => handleAction('revision')}
+                    disabled={submitting}
+                    className="flex items-center justify-center gap-2 px-4 py-3 bg-amber-500 text-white rounded-xl font-medium hover:bg-amber-600 transition-colors disabled:opacity-50 disabled:cursor-not-allowed shadow-sm"
+                  >
+                    <AlertCircle className="w-5 h-5" />
+                    Request Revision
+                  </button>
+                  <button
+                    onClick={() => handleAction('reject')}
+                    disabled={submitting}
+                    className="flex items-center justify-center gap-2 px-4 py-3 bg-red-600 text-white rounded-xl font-medium hover:bg-red-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed shadow-sm"
+                  >
+                    <XCircle className="w-5 h-5" />
+                    Reject
+                  </button>
+                </div>
+              </div>
+            )}
+
+            {/* Already Reviewed */}
+            {artefact.status !== 'pending_review' && (
+              <div className="border-t border-border pt-6">
+                <div className="bg-blue-50 border border-blue-200 rounded-xl p-4 text-center">
+                  <p className="text-blue-900 font-medium">
+                    This artefact has already been reviewed.
+                  </p>
+                  <p className="text-blue-700 text-sm mt-1">
+                    Status: <span className="font-semibold capitalize">{artefact.status.replace('_', ' ')}</span>
+                  </p>
+                  {artefact.approved_by_name && (
+                    <p className="text-blue-700 text-sm mt-1">
+                      Reviewed by: <span className="font-semibold">{artefact.approved_by_name}</span>
+                    </p>
+                  )}
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* Footer */}
+        <div className="text-center text-text-tertiary text-sm">
+          <p>Powered by Samaya Digital Hub</p>
+        </div>
+      </div>
+    </div>
+  )
+}

client/src/pages/Settings.jsx

@@ -1,12 +1,35 @@
-import { useState } from 'react'
-import { Settings as SettingsIcon, Play, CheckCircle, Languages } from 'lucide-react'
+import { useState, useEffect } from 'react'
+import { Settings as SettingsIcon, Play, CheckCircle, Languages, Coins, Upload } from 'lucide-react'
 import { api } from '../utils/api'
 import { useLanguage } from '../i18n/LanguageContext'
+import { CURRENCIES } from '../i18n/LanguageContext'
 
 export default function Settings() {
-  const { t, lang, setLang } = useLanguage()
+  const { t, lang, setLang, currency, setCurrency } = useLanguage()
   const [restarting, setRestarting] = useState(false)
   const [success, setSuccess] = useState(false)
+  const [maxSizeMB, setMaxSizeMB] = useState(50)
+  const [sizeSaving, setSizeSaving] = useState(false)
+  const [sizeSaved, setSizeSaved] = useState(false)
+
+  useEffect(() => {
+    api.get('/settings/app').then(s => setMaxSizeMB(s.uploadMaxSizeMB || 50)).catch(() => {})
+  }, [])
+
+  const handleSaveMaxSize = async () => {
+    setSizeSaving(true)
+    setSizeSaved(false)
+    try {
+      const res = await api.patch('/settings/app', { uploadMaxSizeMB: maxSizeMB })
+      setMaxSizeMB(res.uploadMaxSizeMB)
+      setSizeSaved(true)
+      setTimeout(() => setSizeSaved(false), 2000)
+    } catch (err) {
+      alert(err.message || 'Failed to save')
+    } finally {
+      setSizeSaving(false)
+    }
+  }
 
   const handleRestartTutorial = async () => {
     setRestarting(true)
@@ -57,6 +80,64 @@ export default function Settings() {
               <option value="ar">{t('settings.arabic')}</option>
             </select>
           </div>
+
+          {/* Currency Selector */}
+          <div>
+            <label className="block text-sm font-medium text-text-primary mb-2 flex items-center gap-2">
+              <Coins className="w-4 h-4" />
+              {t('settings.currency')}
+            </label>
+            <select
+              value={currency}
+              onChange={(e) => setCurrency(e.target.value)}
+              className="w-full max-w-xs px-4 py-2.5 border border-border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary bg-white"
+            >
+              {CURRENCIES.map(c => (
+                <option key={c.code} value={c.code}>
+                  {c.symbol} — {lang === 'ar' ? c.labelAr : c.labelEn}
+                </option>
+              ))}
+            </select>
+            <p className="text-xs text-text-tertiary mt-1.5">{t('settings.currencyHint')}</p>
+          </div>
+        </div>
+      </div>
+
+      {/* Uploads Section */}
+      <div className="bg-white rounded-xl border border-border overflow-hidden">
+        <div className="px-6 py-4 border-b border-border">
+          <h2 className="text-lg font-semibold text-text-primary flex items-center gap-2">
+            <Upload className="w-5 h-5 text-brand-primary" />
+            {t('settings.uploads')}
+          </h2>
+        </div>
+        <div className="p-6 space-y-4">
+          <div>
+            <label className="block text-sm font-medium text-text-primary mb-2">
+              {t('settings.maxFileSize')}
+            </label>
+            <div className="flex items-center gap-3">
+              <input
+                type="number"
+                min="1"
+                max="500"
+                value={maxSizeMB}
+                onChange={(e) => setMaxSizeMB(Number(e.target.value))}
+                className="w-24 px-3 py-2.5 border border-border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary bg-white"
+              />
+              <span className="text-sm text-text-secondary">{t('settings.mb')}</span>
+              <button
+                onClick={handleSaveMaxSize}
+                disabled={sizeSaving}
+                className="px-4 py-2.5 bg-brand-primary text-white rounded-lg text-sm font-medium hover:bg-brand-primary-light disabled:opacity-50 transition-colors"
+              >
+                {sizeSaved ? (
+                  <span className="flex items-center gap-1.5"><CheckCircle className="w-4 h-4" />{t('settings.saved')}</span>
+                ) : sizeSaving ? '...' : t('common.save')}
+              </button>
+            </div>
+            <p className="text-xs text-text-tertiary mt-1.5">{t('settings.maxFileSizeHint')}</p>
+          </div>
         </div>
       </div>
 
@@ -93,18 +174,6 @@ export default function Settings() {
           )}
         </div>
       </div>
-
-      {/* More settings can go here in the future */}
-      <div className="bg-white rounded-xl border border-border overflow-hidden opacity-50">
-        <div className="px-6 py-4 border-b border-border">
-          <h2 className="text-lg font-semibold text-text-primary">{t('settings.moreComingSoon')}</h2>
-        </div>
-        <div className="p-6">
-          <p className="text-sm text-text-secondary">
-            {t('settings.additionalSettings')}
-          </p>
-        </div>
-      </div>
     </div>
   )
 }

client/src/pages/Team.jsx

@@ -1,5 +1,6 @@
 import { useState, useEffect, useContext } from 'react'
-import { Plus, Users, ArrowLeft, User as UserIcon } from 'lucide-react'
+import { Plus, Users, ArrowLeft, User as UserIcon, Edit2, LayoutGrid, Network } from 'lucide-react'
+import { getInitials } from '../utils/api'
 import { AppContext } from '../App'
 import { useAuth } from '../contexts/AuthContext'
 import { useLanguage } from '../i18n/LanguageContext'
@@ -7,110 +8,123 @@ import { api } from '../utils/api'
 import MemberCard from '../components/MemberCard'
 import StatusBadge from '../components/StatusBadge'
 import BrandBadge from '../components/BrandBadge'
-import Modal from '../components/Modal'
-
-const EMPTY_MEMBER = {
-  name: '', email: '', password: '', role: 'content_writer', brands: '', phone: '',
-}
-
-const ROLES = [
-  { value: 'manager', label: 'Manager' },
-  { value: 'approver', label: 'Approver' },
-  { value: 'publisher', label: 'Publisher' },
-  { value: 'content_creator', label: 'Content Creator' },
-  { value: 'producer', label: 'Producer' },
-  { value: 'designer', label: 'Designer' },
-  { value: 'content_writer', label: 'Content Writer' },
-  { value: 'social_media_manager', label: 'Social Media Manager' },
-  { value: 'photographer', label: 'Photographer' },
-  { value: 'videographer', label: 'Videographer' },
-  { value: 'strategist', label: 'Strategist' },
-]
+import TeamMemberPanel from '../components/TeamMemberPanel'
+import TeamPanel from '../components/TeamPanel'
 
 export default function Team() {
   const { t } = useLanguage()
-  const { teamMembers, loadTeam, currentUser } = useContext(AppContext)
+  const { teamMembers, loadTeam, currentUser, teams, loadTeams, brands } = useContext(AppContext)
   const { user } = useAuth()
-  const [showModal, setShowModal] = useState(false)
-  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false)
-  const [editingMember, setEditingMember] = useState(null)
-  const [isEditingSelf, setIsEditingSelf] = useState(false)
-  const [formData, setFormData] = useState(EMPTY_MEMBER)
+  const [panelMember, setPanelMember] = useState(null)
+  const [panelIsEditingSelf, setPanelIsEditingSelf] = useState(false)
   const [selectedMember, setSelectedMember] = useState(null)
   const [memberTasks, setMemberTasks] = useState([])
   const [memberPosts, setMemberPosts] = useState([])
   const [loadingDetail, setLoadingDetail] = useState(false)
+  const [panelTeam, setPanelTeam] = useState(null)
+  const [teamFilter, setTeamFilter] = useState(null)
+  const [viewMode, setViewMode] = useState('grid') // 'grid' | 'teams'
 
   const canManageTeam = user?.role === 'superadmin' || user?.role === 'manager'
 
   const openNew = () => {
-    setEditingMember(null)
-    setIsEditingSelf(false)
-    setFormData(EMPTY_MEMBER)
-    setShowModal(true)
+    setPanelMember({ role: 'content_writer' })
+    setPanelIsEditingSelf(false)
   }
 
   const openEdit = (member) => {
     const isSelf = member._id === user?.id || member.id === user?.id
-    setEditingMember(member)
-    setIsEditingSelf(isSelf)
-    setFormData({
-      name: member.name || '',
-      email: member.email || '',
-      password: '',
-      role: member.team_role || member.role || 'content_writer',
-      brands: Array.isArray(member.brands) ? member.brands.join(', ') : (member.brands || ''),
-      phone: member.phone || '',
-    })
-    setShowModal(true)
+    setPanelMember(member)
+    setPanelIsEditingSelf(isSelf)
   }
 
-  const handleSave = async () => {
+  const handlePanelSave = async (memberId, data, isEditingSelf) => {
     try {
-      const brands = typeof formData.brands === 'string'
-        ? formData.brands.split(',').map(b => b.trim()).filter(Boolean)
-        : formData.brands
-
-      // If editing self, use self-service endpoint
       if (isEditingSelf) {
-        const data = {
-          name: formData.name,
-          team_role: formData.role,
-          brands,
-          phone: formData.phone,
-        }
-        await api.patch('/users/me/profile', data)
+        await api.patch('/users/me/profile', {
+          name: data.name,
+          phone: data.phone,
+        })
       } else {
-        // Manager/superadmin creating or editing other users
-        const data = {
-          name: formData.name,
-          email: formData.email,
-          team_role: formData.role,
-          brands,
-          phone: formData.phone,
+        const payload = {
+          name: data.name,
+          email: data.email,
+          team_role: data.role,
+          brands: data.brands,
+          phone: data.phone,
+          modules: data.modules,
         }
-        if (formData.password) {
-          data.password = formData.password
-        }
-        
-        if (editingMember) {
-          await api.patch(`/users/team/${editingMember._id}`, data)
+        if (data.password) payload.password = data.password
+
+        if (memberId) {
+          await api.patch(`/users/team/${memberId}`, payload)
         } else {
-          await api.post('/users/team', data)
+          const created = await api.post('/users/team', payload)
+          memberId = created?.id || created?.Id
         }
       }
-      
-      setShowModal(false)
-      setEditingMember(null)
-      setIsEditingSelf(false)
-      setFormData(EMPTY_MEMBER)
-      loadTeam()
+
+      // Sync team memberships if team_ids provided
+      if (data.team_ids !== undefined && memberId && !isEditingSelf) {
+        const member = teamMembers.find(m => (m.id || m._id) === memberId)
+        const currentTeamIds = member?.teams ? member.teams.map(t => t.id) : []
+        const targetTeamIds = data.team_ids || []
+
+        const toAdd = targetTeamIds.filter(id => !currentTeamIds.includes(id))
+        const toRemove = currentTeamIds.filter(id => !targetTeamIds.includes(id))
+
+        for (const teamId of toAdd) {
+          await api.post(`/teams/${teamId}/members`, { user_id: memberId })
+        }
+        for (const teamId of toRemove) {
+          await api.delete(`/teams/${teamId}/members/${memberId}`)
+        }
+      }
+
+      await loadTeam()
+      await loadTeams()
     } catch (err) {
       console.error('Save failed:', err)
       alert(err.message || 'Failed to save')
     }
   }
 
+  const handleTeamSave = async (teamId, data) => {
+    try {
+      if (teamId) {
+        await api.patch(`/teams/${teamId}`, data)
+      } else {
+        await api.post('/teams', data)
+      }
+      await loadTeams()
+      await loadTeam()
+    } catch (err) {
+      console.error('Team save failed:', err)
+      alert(err.message || 'Failed to save team')
+    }
+  }
+
+  const handleTeamDelete = async (teamId) => {
+    try {
+      await api.delete(`/teams/${teamId}`)
+      setPanelTeam(null)
+      if (teamFilter === teamId) setTeamFilter(null)
+      await loadTeams()
+      await loadTeam()
+    } catch (err) {
+      console.error('Team delete failed:', err)
+    }
+  }
+
+  const handlePanelDelete = async (memberId) => {
+    await api.delete(`/users/team/${memberId}`)
+    if (selectedMember?._id === memberId) {
+      setSelectedMember(null)
+    }
+    setPanelMember(null)
+    await loadTeam()
+  }
+
   const openMemberDetail = async (member) => {
     setSelectedMember(member)
     setLoadingDetail(true)
@@ -243,18 +257,67 @@ export default function Team() {
             </div>
           </div>
         </div>
+
+        {/* Team Member Panel */}
+        {panelMember && (
+          <TeamMemberPanel
+            member={panelMember}
+            isEditingSelf={panelIsEditingSelf}
+            onClose={() => setPanelMember(null)}
+            onSave={handlePanelSave}
+            onDelete={canManageTeam ? handlePanelDelete : null}
+            canManageTeam={canManageTeam}
+            userRole={user?.role}
+            teams={teams}
+            brands={brands}
+          />
+        )}
       </div>
     )
   }
 
+  const displayedMembers = teamFilter
+    ? teamMembers.filter(m => m.teams?.some(t => t.id === teamFilter))
+    : teamMembers
+
+  // Members not in any team
+  const unassignedMembers = teamMembers.filter(m => !m.teams || m.teams.length === 0)
+
+  const avatarColors = [
+    'from-indigo-400 to-purple-500',
+    'from-pink-400 to-rose-500',
+    'from-emerald-400 to-teal-500',
+    'from-amber-400 to-orange-500',
+    'from-cyan-400 to-blue-500',
+  ]
+
   // Team grid
   return (
     <div className="space-y-4 animate-fade-in">
       {/* Toolbar */}
       <div className="flex items-center justify-between">
-        <p className="text-sm text-text-secondary">
-          {teamMembers.length} {teamMembers.length !== 1 ? t('team.membersPlural') : t('team.member')}
-        </p>
+        <div className="flex items-center gap-3">
+          <p className="text-sm text-text-secondary">
+            {displayedMembers.length} {displayedMembers.length !== 1 ? t('team.membersPlural') : t('team.member')}
+          </p>
+          {/* View toggle */}
+          <div className="flex items-center bg-white border border-border rounded-lg overflow-hidden">
+            <button
+              onClick={() => setViewMode('grid')}
+              className={`p-2 transition-colors ${viewMode === 'grid' ? 'bg-brand-primary text-white' : 'text-text-tertiary hover:text-text-primary'}`}
+              title={t('team.gridView')}
+            >
+              <LayoutGrid className="w-4 h-4" />
+            </button>
+            <button
+              onClick={() => setViewMode('teams')}
+              className={`p-2 transition-colors ${viewMode === 'teams' ? 'bg-brand-primary text-white' : 'text-text-tertiary hover:text-text-primary'}`}
+              title={t('team.teamsView')}
+            >
+              <Network className="w-4 h-4" />
+            </button>
+          </div>
+        </div>
         <div className="flex gap-2">
           {/* Edit own profile button */}
           <button
@@ -267,7 +330,18 @@ export default function Team() {
             <UserIcon className="w-4 h-4" />
             {t('team.myProfile')}
           </button>
-          
+
+          {/* Create Team button (managers and superadmins only) */}
+          {canManageTeam && (
+            <button
+              onClick={() => setPanelTeam({})}
+              className="flex items-center gap-2 px-4 py-2 bg-white border border-border text-text-primary rounded-lg text-sm font-medium hover:bg-surface-secondary transition-colors"
+            >
+              <Users className="w-4 h-4" />
+              {t('teams.createTeam')}
+            </button>
+          )}
+
           {/* Add member button (managers and superadmins only) */}
           {canManageTeam && (
             <button
@@ -281,168 +355,209 @@ export default function Team() {
         </div>
       </div>
 
-      {/* Member grid */}
-      {teamMembers.length === 0 ? (
-        <div className="py-20 text-center">
-          <Users className="w-12 h-12 text-text-tertiary mx-auto mb-3" />
-          <p className="text-text-secondary font-medium">{t('team.noMembers')}</p>
-        </div>
-      ) : (
-        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 stagger-children">
-          {teamMembers.map(member => (
-            <MemberCard key={member._id} member={member} onClick={openMemberDetail} />
-          ))}
-        </div>
+      {/* Grid view: team filter pills + member cards */}
+      {viewMode === 'grid' && (
+        <>
+          {/* Team filter pills */}
+          {teams.length > 0 && (
+            <div className="flex flex-wrap items-center gap-2">
+              <span className="text-xs font-medium text-text-tertiary">{t('teams.teams')}:</span>
+              <button
+                onClick={() => setTeamFilter(null)}
+                className={`text-xs px-3 py-1.5 rounded-full border font-medium transition-colors ${
+                  !teamFilter ? 'bg-brand-primary text-white border-brand-primary' : 'bg-white text-text-secondary border-border hover:bg-surface-tertiary'
+                }`}
+              >
+                {t('common.all')}
+              </button>
+              {teams.map(team => {
+                const tid = team.id || team._id
+                const active = teamFilter === tid
+                return (
+                  <div key={tid} className="flex items-center gap-0.5">
+                    <button
+                      onClick={() => setTeamFilter(active ? null : tid)}
+                      className={`text-xs px-3 py-1.5 rounded-full border font-medium transition-colors ${
+                        active ? 'bg-blue-600 text-white border-blue-600' : 'bg-white text-text-secondary border-border hover:bg-surface-tertiary'
+                      }`}
+                    >
+                      {team.name} ({team.member_count || 0})
+                    </button>
+                    {canManageTeam && (
+                      <button
+                        onClick={() => setPanelTeam(team)}
+                        className="p-1 text-text-tertiary hover:text-text-primary rounded"
+                        title={t('teams.editTeam')}
+                      >
+                        <Edit2 className="w-3 h-3" />
+                      </button>
+                    )}
+                  </div>
+                )
+              })}
+            </div>
+          )}
+
+          {/* Member grid */}
+          {displayedMembers.length === 0 ? (
+            <div className="py-20 text-center">
+              <Users className="w-12 h-12 text-text-tertiary mx-auto mb-3" />
+              <p className="text-text-secondary font-medium">{t('team.noMembers')}</p>
+            </div>
+          ) : (
+            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 stagger-children">
+              {displayedMembers.map(member => (
+                <MemberCard key={member._id} member={member} onClick={openMemberDetail} />
+              ))}
+            </div>
+          )}
+        </>
       )}
 
-      {/* Create/Edit Modal */}
-      <Modal
-        isOpen={showModal}
-        onClose={() => { setShowModal(false); setEditingMember(null); setIsEditingSelf(false) }}
-        title={isEditingSelf ? t('team.editProfile') : (editingMember ? t('team.editMember') : t('team.newMember'))}
-        size="md"
-      >
-        <div className="space-y-4">
-          <div>
-            <label className="block text-sm font-medium text-text-primary mb-1">{t('team.name')} *</label>
-            <input
-              type="text"
-              value={formData.name}
-              onChange={e => setFormData(f => ({ ...f, name: e.target.value }))}
-              className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary"
-              placeholder={t('team.fullName')}
-            />
-          </div>
-
-          {!isEditingSelf && (
+      {/* Teams (org chart) view */}
+      {viewMode === 'teams' && (
+        <div className="space-y-6">
+          {teams.length === 0 && unassignedMembers.length === 0 ? (
+            <div className="py-20 text-center">
+              <Users className="w-12 h-12 text-text-tertiary mx-auto mb-3" />
+              <p className="text-text-secondary font-medium">{t('team.noMembers')}</p>
+            </div>
+          ) : (
             <>
-              <div>
-                <label className="block text-sm font-medium text-text-primary mb-1">{t('team.email')} *</label>
-                <input
-                  type="email"
-                  value={formData.email}
-                  onChange={e => setFormData(f => ({ ...f, email: e.target.value }))}
-                  className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary"
-                  placeholder="email@example.com"
-                  disabled={editingMember}
-                />
-              </div>
+              {teams.map(team => {
+                const tid = team.id || team._id
+                const members = teamMembers.filter(m => m.teams?.some(t => t.id === tid))
+                return (
+                  <div key={tid} className="bg-white rounded-xl border border-border overflow-hidden">
+                    {/* Team header */}
+                    <div className="flex items-center justify-between px-5 py-4 bg-gradient-to-r from-blue-50 to-indigo-50 border-b border-border">
+                      <div className="flex items-center gap-3">
+                        <div className="w-10 h-10 rounded-lg bg-blue-600 flex items-center justify-center text-white">
+                          <Users className="w-5 h-5" />
+                        </div>
+                        <div>
+                          <h3 className="font-semibold text-text-primary">{team.name}</h3>
+                          <p className="text-xs text-text-tertiary">
+                            {members.length} {members.length !== 1 ? t('team.membersPlural') : t('team.member')}
+                            {team.description && ` · ${team.description}`}
+                          </p>
+                        </div>
+                      </div>
+                      {canManageTeam && (
+                        <button
+                          onClick={() => setPanelTeam(team)}
+                          className="px-3 py-1.5 text-sm font-medium text-blue-600 hover:bg-blue-100 rounded-lg transition-colors"
+                        >
+                          <Edit2 className="w-4 h-4" />
+                        </button>
+                      )}
+                    </div>
 
-              {!editingMember && (
-                <div>
-                  <label className="block text-sm font-medium text-text-primary mb-1">{t('team.password')} {editingMember && t('team.optional')}</label>
-                  <input
-                    type="password"
-                    value={formData.password}
-                    onChange={e => setFormData(f => ({ ...f, password: e.target.value }))}
-                    className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary"
-                    placeholder="••••••••"
-                  />
-                  {!formData.password && !editingMember && (
-                    <p className="text-xs text-text-tertiary mt-1">{t('team.defaultPassword')}</p>
-                  )}
+                    {/* Team members */}
+                    {members.length === 0 ? (
+                      <div className="py-8 text-center text-sm text-text-tertiary">{t('team.noMembers')}</div>
+                    ) : (
+                      <div className="divide-y divide-border-light">
+                        {members.map(member => {
+                          const colorIndex = (member.name?.charCodeAt(0) || 0) % avatarColors.length
+                          return (
+                            <div
+                              key={member._id}
+                              onClick={() => openMemberDetail(member)}
+                              className="flex items-center gap-4 px-5 py-3 hover:bg-surface-secondary transition-colors cursor-pointer"
+                            >
+                              <div className={`w-10 h-10 rounded-full bg-gradient-to-br ${avatarColors[colorIndex]} flex items-center justify-center text-white text-sm font-bold shrink-0`}>
+                                {getInitials(member.name)}
+                              </div>
+                              <div className="flex-1 min-w-0">
+                                <p className="text-sm font-medium text-text-primary">{member.name}</p>
+                                <p className="text-xs text-text-tertiary capitalize">{(member.team_role || member.role)?.replace('_', ' ')}</p>
+                              </div>
+                              {member.brands && member.brands.length > 0 && (
+                                <div className="flex flex-wrap gap-1 shrink-0">
+                                  {member.brands.slice(0, 3).map(b => <BrandBadge key={b} brand={b} />)}
+                                </div>
+                              )}
+                            </div>
+                          )
+                        })}
+                      </div>
+                    )}
+                  </div>
+                )
+              })}
+
+              {/* Unassigned members */}
+              {unassignedMembers.length > 0 && (
+                <div className="bg-white rounded-xl border border-border overflow-hidden">
+                  <div className="flex items-center gap-3 px-5 py-4 bg-gray-50 border-b border-border">
+                    <div className="w-10 h-10 rounded-lg bg-gray-400 flex items-center justify-center text-white">
+                      <UserIcon className="w-5 h-5" />
+                    </div>
+                    <div>
+                      <h3 className="font-semibold text-text-primary">{t('team.unassigned')}</h3>
+                      <p className="text-xs text-text-tertiary">
+                        {unassignedMembers.length} {unassignedMembers.length !== 1 ? t('team.membersPlural') : t('team.member')}
+                      </p>
+                    </div>
+                  </div>
+                  <div className="divide-y divide-border-light">
+                    {unassignedMembers.map(member => {
+                      const colorIndex = (member.name?.charCodeAt(0) || 0) % avatarColors.length
+                      return (
+                        <div
+                          key={member._id}
+                          onClick={() => openMemberDetail(member)}
+                          className="flex items-center gap-4 px-5 py-3 hover:bg-surface-secondary transition-colors cursor-pointer"
+                        >
+                          <div className={`w-10 h-10 rounded-full bg-gradient-to-br ${avatarColors[colorIndex]} flex items-center justify-center text-white text-sm font-bold shrink-0`}>
+                            {getInitials(member.name)}
+                          </div>
+                          <div className="flex-1 min-w-0">
+                            <p className="text-sm font-medium text-text-primary">{member.name}</p>
+                            <p className="text-xs text-text-tertiary capitalize">{(member.team_role || member.role)?.replace('_', ' ')}</p>
+                          </div>
+                          {member.brands && member.brands.length > 0 && (
+                            <div className="flex flex-wrap gap-1 shrink-0">
+                              {member.brands.slice(0, 3).map(b => <BrandBadge key={b} brand={b} />)}
+                            </div>
+                          )}
+                        </div>
+                      )
+                    })}
+                  </div>
                 </div>
               )}
             </>
           )}
-
-          <div className="grid grid-cols-2 gap-4">
-            <div>
-              <label className="block text-sm font-medium text-text-primary mb-1">{t('team.teamRole')}</label>
-              {user?.role === 'manager' && !editingMember && !isEditingSelf ? (
-                <>
-                  <input
-                    type="text"
-                    value="Contributor"
-                    disabled
-                    className="w-full px-3 py-2 text-sm border border-border rounded-lg bg-surface-tertiary text-text-tertiary cursor-not-allowed"
-                  />
-                  <p className="text-xs text-text-tertiary mt-1">{t('team.fixedRole')}</p>
-                </>
-              ) : (
-                <select
-                  value={formData.role}
-                  onChange={e => setFormData(f => ({ ...f, role: e.target.value }))}
-                  className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary"
-                >
-                  {ROLES.map(r => <option key={r.value} value={r.value}>{r.label}</option>)}
-                </select>
-              )}
-            </div>
-            <div>
-              <label className="block text-sm font-medium text-text-primary mb-1">{t('team.phone')}</label>
-              <input
-                type="text"
-                value={formData.phone}
-                onChange={e => setFormData(f => ({ ...f, phone: e.target.value }))}
-                className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary"
-                placeholder="+966 ..."
-              />
-            </div>
-          </div>
-
-          <div>
-            <label className="block text-sm font-medium text-text-primary mb-1">{t('team.brands')}</label>
-            <input
-              type="text"
-              value={formData.brands}
-              onChange={e => setFormData(f => ({ ...f, brands: e.target.value }))}
-              className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary"
-              placeholder="Samaya Investment, Hira Cultural District"
-            />
-            <p className="text-xs text-text-tertiary mt-1">{t('team.brandsHelp')}</p>
-          </div>
-
-          <div className="flex items-center justify-end gap-3 pt-4 border-t border-border">
-            {editingMember && !isEditingSelf && canManageTeam && (
-              <button
-                onClick={() => setShowDeleteConfirm(true)}
-                className="px-4 py-2 text-sm font-medium text-red-600 hover:bg-red-50 rounded-lg mr-auto"
-              >
-                {t('team.remove')}
-              </button>
-            )}
-            <button
-              onClick={() => { setShowModal(false); setEditingMember(null); setIsEditingSelf(false) }}
-              className="px-4 py-2 text-sm font-medium text-text-secondary hover:bg-surface-tertiary rounded-lg"
-            >
-              {t('common.cancel')}
-            </button>
-            <button
-              onClick={handleSave}
-              disabled={!formData.name || (!isEditingSelf && !editingMember && !formData.email)}
-              className="px-5 py-2 bg-brand-primary text-white rounded-lg text-sm font-medium hover:bg-brand-primary-light disabled:opacity-50 disabled:cursor-not-allowed shadow-sm"
-            >
-              {isEditingSelf ? t('team.saveProfile') : (editingMember ? t('team.saveChanges') : t('team.addMember'))}
-            </button>
-          </div>
         </div>
-      </Modal>
+      )}
 
-      {/* Delete Confirmation */}
-      <Modal
-        isOpen={showDeleteConfirm}
-        onClose={() => setShowDeleteConfirm(false)}
-        title={t('team.removeMember')}
-        isConfirm
-        danger
-        confirmText={t('team.remove')}
-        onConfirm={async () => {
-          if (editingMember) {
-            await api.delete(`/users/team/${editingMember._id}`)
-            setShowModal(false)
-            setEditingMember(null)
-            setIsEditingSelf(false)
-            setShowDeleteConfirm(false)
-            if (selectedMember?._id === editingMember._id) {
-              setSelectedMember(null)
-            }
-            loadTeam()
-          }
-        }}
-      >
-        {t('team.removeConfirm', { name: editingMember?.name })}
-      </Modal>
+      {/* Team Member Panel */}
+      {panelMember && (
+        <TeamMemberPanel
+          member={panelMember}
+          isEditingSelf={panelIsEditingSelf}
+          onClose={() => setPanelMember(null)}
+          onSave={handlePanelSave}
+          onDelete={canManageTeam ? handlePanelDelete : null}
+          canManageTeam={canManageTeam}
+          userRole={user?.role}
+          teams={teams}
+          brands={brands}
+        />
+      )}
+
+      {/* Team Panel */}
+      {panelTeam && (
+        <TeamPanel
+          team={panelTeam}
+          onClose={() => setPanelTeam(null)}
+          onSave={handleTeamSave}
+          onDelete={canManageTeam ? handleTeamDelete : null}
+          teamMembers={teamMembers}
+        />
+      )}
     </div>
   )
 }

client/src/pages/Users.jsx

@@ -3,6 +3,7 @@ import { Plus, Shield, Edit2, Trash2, UserCheck } from 'lucide-react'
 import { api } from '../utils/api'
 import Modal from '../components/Modal'
 import { useAuth } from '../contexts/AuthContext'
+import { SkeletonTable } from '../components/SkeletonLoader'
 
 const ROLES = [
   { value: 'superadmin', label: 'Superadmin', color: 'bg-purple-100 text-purple-700', icon: '👑' },
@@ -33,6 +34,8 @@ export default function Users() {
   const [form, setForm] = useState(EMPTY_FORM)
   const [showDeleteConfirm, setShowDeleteConfirm] = useState(false)
   const [userToDelete, setUserToDelete] = useState(null)
+  const [confirmPassword, setConfirmPassword] = useState('')
+  const [passwordError, setPasswordError] = useState('')
 
   useEffect(() => { loadUsers() }, [])
 
@@ -48,6 +51,11 @@ export default function Users() {
   }
 
   const handleSave = async () => {
+    setPasswordError('')
+    if (form.password && form.password !== confirmPassword) {
+      setPasswordError('Passwords do not match')
+      return
+    }
     try {
       const data = {
         name: form.name,
@@ -86,12 +94,16 @@ export default function Users() {
       role: user.role || 'contributor',
       avatar: user.avatar || '',
     })
+    setConfirmPassword('')
+    setPasswordError('')
     setShowModal(true)
   }
 
   const openNew = () => {
     setEditingUser(null)
     setForm(EMPTY_FORM)
+    setConfirmPassword('')
+    setPasswordError('')
     setShowModal(true)
   }
 
@@ -109,9 +121,9 @@ export default function Users() {
 
   if (loading) {
     return (
-      <div className="space-y-4 animate-pulse">
-        <div className="h-12 bg-surface-tertiary rounded-xl"></div>
-        <div className="h-64 bg-surface-tertiary rounded-xl"></div>
+      <div className="space-y-6">
+        <div className="h-12 bg-surface-tertiary rounded-xl animate-pulse"></div>
+        <SkeletonTable rows={5} cols={5} />
       </div>
     )
   }
@@ -240,7 +252,7 @@ export default function Users() {
               value={form.email}
               onChange={e => setForm(f => ({ ...f, email: e.target.value }))}
               className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary"
-              placeholder="user@samayainvest.com"
+              placeholder="user@company.com"
               required
             />
           </div>
@@ -252,13 +264,29 @@ export default function Users() {
             <input
               type="password"
               value={form.password}
-              onChange={e => setForm(f => ({ ...f, password: e.target.value }))}
+              onChange={e => { setForm(f => ({ ...f, password: e.target.value })); setPasswordError('') }}
               className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary"
               placeholder="••••••••"
               required={!editingUser}
             />
           </div>
 
+          {form.password && (
+            <div>
+              <label className="block text-sm font-medium text-text-primary mb-1">Confirm Password</label>
+              <input
+                type="password"
+                value={confirmPassword}
+                onChange={e => { setConfirmPassword(e.target.value); setPasswordError('') }}
+                className="w-full px-3 py-2 text-sm border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-primary/20 focus:border-brand-primary"
+                placeholder="••••••••"
+              />
+              {passwordError && (
+                <p className="text-xs text-red-500 mt-1">{passwordError}</p>
+              )}
+            </div>
+          )}
+
           <div>
             <label className="block text-sm font-medium text-text-primary mb-1">Role *</label>
             <div className="grid grid-cols-3 gap-2">

client/src/utils/api.js

@@ -1,6 +1,6 @@
 const API = '/api';
 
-// Map SQLite fields to frontend-friendly format
+// Map NocoDB / snake_case fields to frontend-friendly format
 const toCamel = (s) => s.replace(/_([a-z])/g, (_, c) => c.toUpperCase());
 
 const normalize = (data) => {
@@ -12,12 +12,23 @@ const normalize = (data) => {
       out[camelKey] = v;
       if (camelKey !== k) out[k] = v;
     }
+    // NocoDB uses Id (capital I) — map to id
+    if (out.Id !== undefined && out.id === undefined) out.id = out.Id;
     // Add _id alias
     if (out.id !== undefined && out._id === undefined) out._id = out.id;
+    // NocoDB timestamp fields
+    if (out.CreatedAt && !out.created_at) { out.created_at = out.CreatedAt; out.createdAt = out.CreatedAt; }
+    if (out.UpdatedAt && !out.updated_at) { out.updated_at = out.UpdatedAt; out.updatedAt = out.UpdatedAt; }
     // Map brand_name → brand (frontend expects post.brand as string)
     if (out.brandName && !out.brand) out.brand = out.brandName;
     // Map assigned_name for display
     if (out.assignedName && !out.assignedToName) out.assignedToName = out.assignedName;
+    // Parse JSON text fields from NocoDB (stored as LongText)
+    for (const jsonField of ['platforms', 'brands', 'tags', 'publicationLinks', 'publication_links', 'goals', 'modules']) {
+      if (out[jsonField] && typeof out[jsonField] === 'string') {
+        try { out[jsonField] = JSON.parse(out[jsonField]); } catch {}
+      }
+    }
     return out;
   }
   return data;
@@ -25,13 +36,18 @@ const normalize = (data) => {
 
 const handleResponse = async (r, label) => {
   if (!r.ok) {
-    if (r.status === 401 || r.status === 403) {
-      // Unauthorized - redirect to login if not already there
+    if (r.status === 401) {
+      // Unauthorized (not logged in) - redirect to login if not already there
       if (!window.location.pathname.includes('/login')) {
         window.location.href = '/login';
       }
     }
-    throw new Error(`${label} failed: ${r.status}`);
+    let serverMsg = '';
+    try {
+      const body = await r.json();
+      serverMsg = body.error || '';
+    } catch {}
+    throw new Error(serverMsg || `${label} failed: ${r.status}`);
   }
   const json = await r.json();
   return normalize(json);
@@ -68,21 +84,32 @@ export const api = {
   }).then(r => handleResponse(r, `UPLOAD ${path}`)),
 };
 
-// Brand colors map — matches Samaya brands from backend
-export const BRAND_COLORS = {
-  'Samaya Investment': { bg: 'bg-indigo-100', text: 'text-indigo-700', dot: 'bg-indigo-500' },
-  'Hira Cultural District': { bg: 'bg-amber-100', text: 'text-amber-700', dot: 'bg-amber-500' },
-  'Holy Quran Museum': { bg: 'bg-emerald-100', text: 'text-emerald-700', dot: 'bg-emerald-500' },
-  'Al-Safiya Museum': { bg: 'bg-purple-100', text: 'text-purple-700', dot: 'bg-purple-500' },
-  'Hayhala': { bg: 'bg-red-100', text: 'text-red-700', dot: 'bg-red-500' },
-  'Jabal Thawr': { bg: 'bg-stone-100', text: 'text-stone-700', dot: 'bg-stone-500' },
-  'Coffee Chain': { bg: 'bg-orange-100', text: 'text-orange-700', dot: 'bg-orange-500' },
-  'Taibah Gifts': { bg: 'bg-pink-100', text: 'text-pink-700', dot: 'bg-pink-500' },
-  'Google Maps': { bg: 'bg-blue-100', text: 'text-blue-700', dot: 'bg-blue-500' },
-  'default': { bg: 'bg-gray-100', text: 'text-gray-700', dot: 'bg-gray-500' },
-};
+// Brand color palette — dynamically assigned from a rotating palette
+const BRAND_COLOR_PALETTE = [
+  { bg: 'bg-indigo-100', text: 'text-indigo-700', dot: 'bg-indigo-500' },
+  { bg: 'bg-amber-100', text: 'text-amber-700', dot: 'bg-amber-500' },
+  { bg: 'bg-emerald-100', text: 'text-emerald-700', dot: 'bg-emerald-500' },
+  { bg: 'bg-purple-100', text: 'text-purple-700', dot: 'bg-purple-500' },
+  { bg: 'bg-red-100', text: 'text-red-700', dot: 'bg-red-500' },
+  { bg: 'bg-stone-100', text: 'text-stone-700', dot: 'bg-stone-500' },
+  { bg: 'bg-orange-100', text: 'text-orange-700', dot: 'bg-orange-500' },
+  { bg: 'bg-pink-100', text: 'text-pink-700', dot: 'bg-pink-500' },
+  { bg: 'bg-blue-100', text: 'text-blue-700', dot: 'bg-blue-500' },
+  { bg: 'bg-cyan-100', text: 'text-cyan-700', dot: 'bg-cyan-500' },
+  { bg: 'bg-teal-100', text: 'text-teal-700', dot: 'bg-teal-500' },
+  { bg: 'bg-rose-100', text: 'text-rose-700', dot: 'bg-rose-500' },
+];
 
-export const getBrandColor = (brand) => BRAND_COLORS[brand] || BRAND_COLORS['default'];
+const DEFAULT_BRAND_COLOR = { bg: 'bg-gray-100', text: 'text-gray-700', dot: 'bg-gray-500' };
+const brandColorCache = {};
+
+export const getBrandColor = (brand) => {
+  if (!brand) return DEFAULT_BRAND_COLOR;
+  if (brandColorCache[brand]) return brandColorCache[brand];
+  const idx = Object.keys(brandColorCache).length % BRAND_COLOR_PALETTE.length;
+  brandColorCache[brand] = BRAND_COLOR_PALETTE[idx];
+  return brandColorCache[brand];
+};
 
 // Platform icons helper — svg paths for inline icons
 export const PLATFORMS = {
@@ -123,3 +150,9 @@ export const PRIORITY_CONFIG = {
   high: { label: 'High', color: 'bg-orange-500' },
   urgent: { label: 'Urgent', color: 'bg-red-500' },
 };
+
+// Shared helper: extract initials from a name string
+export function getInitials(name) {
+  if (!name) return '?';
+  return name.split(' ').map(w => w[0]).join('').slice(0, 2).toUpperCase();
+}

client/src/utils/datePresets.js

@@ -0,0 +1,77 @@
+import {
+  startOfDay, endOfDay, subDays,
+  startOfWeek, endOfWeek, subWeeks,
+  startOfMonth, endOfMonth, subMonths,
+  startOfQuarter, endOfQuarter,
+  startOfYear, endOfYear,
+  format,
+} from 'date-fns'
+
+const fmt = d => format(d, 'yyyy-MM-dd')
+
+export const DATE_PRESETS = [
+  {
+    key: 'today',
+    labelKey: 'dates.today',
+    getRange: () => {
+      const now = new Date()
+      return { from: fmt(startOfDay(now)), to: fmt(endOfDay(now)) }
+    },
+  },
+  {
+    key: 'yesterday',
+    labelKey: 'dates.yesterday',
+    getRange: () => {
+      const d = subDays(new Date(), 1)
+      return { from: fmt(startOfDay(d)), to: fmt(endOfDay(d)) }
+    },
+  },
+  {
+    key: 'thisWeek',
+    labelKey: 'dates.thisWeek',
+    getRange: () => {
+      const now = new Date()
+      return { from: fmt(startOfWeek(now, { weekStartsOn: 0 })), to: fmt(endOfWeek(now, { weekStartsOn: 0 })) }
+    },
+  },
+  {
+    key: 'lastWeek',
+    labelKey: 'dates.lastWeek',
+    getRange: () => {
+      const d = subWeeks(new Date(), 1)
+      return { from: fmt(startOfWeek(d, { weekStartsOn: 0 })), to: fmt(endOfWeek(d, { weekStartsOn: 0 })) }
+    },
+  },
+  {
+    key: 'thisMonth',
+    labelKey: 'dates.thisMonth',
+    getRange: () => {
+      const now = new Date()
+      return { from: fmt(startOfMonth(now)), to: fmt(endOfMonth(now)) }
+    },
+  },
+  {
+    key: 'lastMonth',
+    labelKey: 'dates.lastMonth',
+    getRange: () => {
+      const d = subMonths(new Date(), 1)
+      return { from: fmt(startOfMonth(d)), to: fmt(endOfMonth(d)) }
+    },
+  },
+  {
+    key: 'thisQuarter',
+    labelKey: 'dates.thisQuarter',
+    getRange: () => {
+      const now = new Date()
+      return { from: fmt(startOfQuarter(now)), to: fmt(endOfQuarter(now)) }
+    },
+  },
+  {
+    key: 'thisYear',
+    labelKey: 'dates.thisYear',
+    getRange: () => {
+      const now = new Date()
+      return { from: fmt(startOfYear(now)), to: fmt(endOfYear(now)) }
+    },
+  },
+]

server/.env

@@ -0,0 +1,3 @@
+NOCODB_URL=http://localhost:8090
+NOCODB_TOKEN=By-wCdkUm6N9JdfmNpGH2jd6LqEejwOXER7FMkgr
+NOCODB_BASE_ID=p37fzfdy2erdcle

server/app-settings.json

@@ -0,0 +1,3 @@
+{
+  "uploadMaxSizeMB": 500
+}

server/auth-db.js

@@ -0,0 +1,18 @@
+const Database = require('better-sqlite3');
+const path = require('path');
+
+const AUTH_DB_PATH = path.join(__dirname, 'auth.db');
+
+const authDb = new Database(AUTH_DB_PATH);
+authDb.pragma('journal_mode = WAL');
+
+authDb.exec(`
+  CREATE TABLE IF NOT EXISTS auth_credentials (
+    id INTEGER PRIMARY KEY AUTOINCREMENT,
+    email TEXT NOT NULL UNIQUE,
+    password_hash TEXT NOT NULL,
+    nocodb_user_id INTEGER NOT NULL
+  );
+`);
+
+module.exports = { authDb };

server/db.js

@@ -1,410 +0,0 @@
-const Database = require('better-sqlite3');
-const path = require('path');
-const bcrypt = require('bcrypt');
-
-const DB_PATH = path.join(__dirname, 'marketing.db');
-
-const db = new Database(DB_PATH);
-
-// Enable WAL mode and foreign keys
-db.pragma('journal_mode = WAL');
-db.pragma('foreign_keys = ON');
-
-function initialize() {
-  // Create tables
-  db.exec(`
-    CREATE TABLE IF NOT EXISTS team_members (
-      id INTEGER PRIMARY KEY AUTOINCREMENT,
-      name TEXT NOT NULL,
-      email TEXT,
-      role TEXT,
-      avatar_url TEXT,
-      brands TEXT DEFAULT '[]',
-      created_at DATETIME DEFAULT CURRENT_TIMESTAMP
-    );
-
-    CREATE TABLE IF NOT EXISTS brands (
-      id INTEGER PRIMARY KEY AUTOINCREMENT,
-      name TEXT NOT NULL,
-      priority INTEGER DEFAULT 2,
-      color TEXT,
-      icon TEXT,
-      created_at DATETIME DEFAULT CURRENT_TIMESTAMP
-    );
-
-    CREATE TABLE IF NOT EXISTS posts (
-      id INTEGER PRIMARY KEY AUTOINCREMENT,
-      title TEXT NOT NULL,
-      description TEXT,
-      brand_id INTEGER REFERENCES brands(id),
-      assigned_to INTEGER REFERENCES team_members(id),
-      status TEXT DEFAULT 'draft',
-      platform TEXT,
-      content_type TEXT,
-      scheduled_date DATETIME,
-      published_date DATETIME,
-      notes TEXT,
-      created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
-      updated_at DATETIME DEFAULT CURRENT_TIMESTAMP
-    );
-
-    CREATE TABLE IF NOT EXISTS assets (
-      id INTEGER PRIMARY KEY AUTOINCREMENT,
-      filename TEXT NOT NULL,
-      original_name TEXT,
-      mime_type TEXT,
-      size INTEGER,
-      tags TEXT DEFAULT '[]',
-      brand_id INTEGER REFERENCES brands(id),
-      campaign_id INTEGER REFERENCES campaigns(id),
-      uploaded_by INTEGER REFERENCES team_members(id),
-      folder TEXT DEFAULT 'general',
-      created_at DATETIME DEFAULT CURRENT_TIMESTAMP
-    );
-
-    CREATE TABLE IF NOT EXISTS campaigns (
-      id INTEGER PRIMARY KEY AUTOINCREMENT,
-      name TEXT NOT NULL,
-      description TEXT,
-      brand_id INTEGER REFERENCES brands(id),
-      start_date DATE NOT NULL,
-      end_date DATE NOT NULL,
-      status TEXT DEFAULT 'planning',
-      color TEXT,
-      budget REAL,
-      goals TEXT,
-      created_at DATETIME DEFAULT CURRENT_TIMESTAMP
-    );
-
-    CREATE TABLE IF NOT EXISTS projects (
-      id INTEGER PRIMARY KEY AUTOINCREMENT,
-      name TEXT NOT NULL,
-      description TEXT,
-      brand_id INTEGER REFERENCES brands(id),
-      owner_id INTEGER REFERENCES team_members(id),
-      status TEXT DEFAULT 'active',
-      priority TEXT DEFAULT 'medium',
-      due_date DATE,
-      created_at DATETIME DEFAULT CURRENT_TIMESTAMP
-    );
-
-    CREATE TABLE IF NOT EXISTS tasks (
-      id INTEGER PRIMARY KEY AUTOINCREMENT,
-      title TEXT NOT NULL,
-      description TEXT,
-      project_id INTEGER REFERENCES projects(id),
-      assigned_to INTEGER REFERENCES team_members(id),
-      created_by INTEGER REFERENCES team_members(id),
-      status TEXT DEFAULT 'todo',
-      priority TEXT DEFAULT 'medium',
-      due_date DATE,
-      is_personal BOOLEAN DEFAULT 0,
-      created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
-      completed_at DATETIME
-    );
-  `);
-
-  // Budget entries table — tracks money received
-  db.exec(`
-    CREATE TABLE IF NOT EXISTS budget_entries (
-      id INTEGER PRIMARY KEY AUTOINCREMENT,
-      label TEXT NOT NULL,
-      amount REAL NOT NULL,
-      source TEXT,
-      campaign_id INTEGER REFERENCES campaigns(id),
-      category TEXT DEFAULT 'marketing',
-      date_received DATE NOT NULL,
-      notes TEXT DEFAULT '',
-      created_at DATETIME DEFAULT CURRENT_TIMESTAMP
-    );
-  `);
-
-  // Users table for authentication
-  db.exec(`
-    CREATE TABLE IF NOT EXISTS users (
-      id INTEGER PRIMARY KEY AUTOINCREMENT,
-      name TEXT NOT NULL,
-      email TEXT NOT NULL UNIQUE,
-      password_hash TEXT NOT NULL,
-      role TEXT NOT NULL DEFAULT 'contributor',
-      avatar TEXT,
-      created_at DATETIME DEFAULT CURRENT_TIMESTAMP
-    );
-  `);
-
-  // Campaign tracks table
-  db.exec(`
-    CREATE TABLE IF NOT EXISTS campaign_tracks (
-      id INTEGER PRIMARY KEY AUTOINCREMENT,
-      campaign_id INTEGER NOT NULL REFERENCES campaigns(id) ON DELETE CASCADE,
-      name TEXT,
-      type TEXT NOT NULL DEFAULT 'organic_social',
-      platform TEXT,
-      budget_allocated REAL DEFAULT 0,
-      budget_spent REAL DEFAULT 0,
-      revenue REAL DEFAULT 0,
-      impressions INTEGER DEFAULT 0,
-      clicks INTEGER DEFAULT 0,
-      conversions INTEGER DEFAULT 0,
-      notes TEXT DEFAULT '',
-      status TEXT DEFAULT 'planned',
-      created_at DATETIME DEFAULT CURRENT_TIMESTAMP
-    );
-  `);
-
-  // ─── Ownership columns (link to users table) ───
-  const addOwnership = (table, column) => {
-    const cols = db.prepare(`PRAGMA table_info(${table})`).all().map(c => c.name);
-    if (!cols.includes(column)) {
-      db.exec(`ALTER TABLE ${table} ADD COLUMN ${column} INTEGER REFERENCES users(id)`);
-      console.log(`✅ Added ${column} column to ${table}`);
-    }
-  };
-  addOwnership('posts', 'created_by_user_id');
-  addOwnership('tasks', 'created_by_user_id');
-  addOwnership('campaigns', 'created_by_user_id');
-  addOwnership('projects', 'created_by_user_id');
-
-  // Add phone column to team_members if missing
-  const teamMemberCols = db.prepare("PRAGMA table_info(team_members)").all().map(c => c.name);
-  if (!teamMemberCols.includes('phone')) {
-    db.exec("ALTER TABLE team_members ADD COLUMN phone TEXT");
-    console.log('✅ Added phone column to team_members');
-  }
-
-  // Migrations — add columns if they don't exist
-  const campaignCols = db.prepare("PRAGMA table_info(campaigns)").all().map(c => c.name);
-  if (!campaignCols.includes('platforms')) {
-    db.exec("ALTER TABLE campaigns ADD COLUMN platforms TEXT DEFAULT '[]'");
-    console.log('✅ Added platforms column to campaigns');
-  }
-
-  // Campaign performance tracking columns
-  if (!campaignCols.includes('budget_spent')) {
-    db.exec("ALTER TABLE campaigns ADD COLUMN budget_spent REAL DEFAULT 0");
-    console.log('✅ Added budget_spent column to campaigns');
-  }
-  if (!campaignCols.includes('revenue')) {
-    db.exec("ALTER TABLE campaigns ADD COLUMN revenue REAL DEFAULT 0");
-    console.log('✅ Added revenue column to campaigns');
-  }
-  if (!campaignCols.includes('impressions')) {
-    db.exec("ALTER TABLE campaigns ADD COLUMN impressions INTEGER DEFAULT 0");
-    console.log('✅ Added impressions column to campaigns');
-  }
-  if (!campaignCols.includes('clicks')) {
-    db.exec("ALTER TABLE campaigns ADD COLUMN clicks INTEGER DEFAULT 0");
-    console.log('✅ Added clicks column to campaigns');
-  }
-  if (!campaignCols.includes('conversions')) {
-    db.exec("ALTER TABLE campaigns ADD COLUMN conversions INTEGER DEFAULT 0");
-    console.log('✅ Added conversions column to campaigns');
-  }
-  if (!campaignCols.includes('cost_per_click')) {
-    db.exec("ALTER TABLE campaigns ADD COLUMN cost_per_click REAL DEFAULT 0");
-    console.log('✅ Added cost_per_click column to campaigns');
-  }
-  if (!campaignCols.includes('notes')) {
-    db.exec("ALTER TABLE campaigns ADD COLUMN notes TEXT DEFAULT ''");
-    console.log('✅ Added notes column to campaigns');
-  }
-
-  // Add track_id to posts
-  const postCols = db.prepare("PRAGMA table_info(posts)").all().map(c => c.name);
-  if (!postCols.includes('track_id')) {
-    db.exec("ALTER TABLE posts ADD COLUMN track_id INTEGER REFERENCES campaign_tracks(id)");
-    console.log('✅ Added track_id column to posts');
-  }
-  if (!postCols.includes('campaign_id')) {
-    db.exec("ALTER TABLE posts ADD COLUMN campaign_id INTEGER REFERENCES campaigns(id)");
-    console.log('✅ Added campaign_id column to posts');
-  }
-  if (!postCols.includes('platforms')) {
-    // Add platforms column, migrate existing platform values
-    db.exec("ALTER TABLE posts ADD COLUMN platforms TEXT DEFAULT '[]'");
-    // Migrate: copy single platform value into platforms JSON array
-    const rows = db.prepare("SELECT id, platform FROM posts WHERE platform IS NOT NULL AND platform != ''").all();
-    const migrate = db.prepare("UPDATE posts SET platforms = ? WHERE id = ?");
-    for (const row of rows) {
-      migrate.run(JSON.stringify([row.platform]), row.id);
-    }
-    console.log(`✅ Added platforms column to posts, migrated ${rows.length} rows`);
-  }
-
-  // Add campaign_id to assets
-  const assetCols = db.prepare("PRAGMA table_info(assets)").all().map(c => c.name);
-  if (!assetCols.includes('campaign_id')) {
-    db.exec("ALTER TABLE assets ADD COLUMN campaign_id INTEGER REFERENCES campaigns(id)");
-    console.log('✅ Added campaign_id column to assets');
-  }
-
-  // ─── Link users to team_members ───
-  const userCols = db.prepare("PRAGMA table_info(users)").all().map(c => c.name);
-  if (!userCols.includes('team_member_id')) {
-    db.exec("ALTER TABLE users ADD COLUMN team_member_id INTEGER REFERENCES team_members(id)");
-    console.log('✅ Added team_member_id column to users');
-  }
-
-  // ─── Post attachments table ───
-  db.exec(`
-    CREATE TABLE IF NOT EXISTS post_attachments (
-      id INTEGER PRIMARY KEY AUTOINCREMENT,
-      post_id INTEGER NOT NULL REFERENCES posts(id) ON DELETE CASCADE,
-      filename TEXT NOT NULL,
-      original_name TEXT,
-      mime_type TEXT,
-      size INTEGER,
-      url TEXT,
-      created_at DATETIME DEFAULT CURRENT_TIMESTAMP
-    );
-  `);
-
-  // ─── Publication links column on posts ───
-  if (!postCols.includes('publication_links')) {
-    db.exec("ALTER TABLE posts ADD COLUMN publication_links TEXT DEFAULT '[]'");
-    console.log('✅ Added publication_links column to posts');
-  }
-
-  // ─── Merge team_members into users ───
-  if (!userCols.includes('team_role')) {
-    db.exec("ALTER TABLE users ADD COLUMN team_role TEXT");
-    console.log('✅ Added team_role column to users');
-  }
-  if (!userCols.includes('brands')) {
-    db.exec("ALTER TABLE users ADD COLUMN brands TEXT DEFAULT '[]'");
-    console.log('✅ Added brands column to users');
-  }
-  if (!userCols.includes('phone')) {
-    db.exec("ALTER TABLE users ADD COLUMN phone TEXT");
-    console.log('✅ Added phone column to users');
-  }
-  if (!userCols.includes('tutorial_completed')) {
-    db.exec("ALTER TABLE users ADD COLUMN tutorial_completed INTEGER DEFAULT 0");
-    console.log('✅ Added tutorial_completed column to users');
-  }
-
-  // Migrate team_members to users (one-time migration)
-  const teamMembers = db.prepare('SELECT * FROM team_members').all();
-  const defaultPasswordHash = bcrypt.hashSync('changeme123', 10);
-  
-  for (const tm of teamMembers) {
-    // Skip team_member id=9 (Fahed) - he's already user id=1
-    if (tm.id === 9) {
-      // Just update his team_role and brands
-      db.prepare('UPDATE users SET team_role = ?, brands = ?, team_member_id = ? WHERE id = 1')
-        .run(tm.role, tm.brands, tm.id);
-      continue;
-    }
-    
-    // Check if user already exists with this team_member_id
-    const existingUser = db.prepare('SELECT id FROM users WHERE team_member_id = ?').get(tm.id);
-    if (existingUser) {
-      // User exists, just update team_role and brands
-      db.prepare('UPDATE users SET team_role = ?, brands = ?, phone = ? WHERE id = ?')
-        .run(tm.role, tm.brands, tm.phone || null, existingUser.id);
-    } else {
-      // Create new user for this team member
-      db.prepare(`
-        INSERT INTO users (name, email, password_hash, role, team_role, brands, phone, team_member_id)
-        VALUES (?, ?, ?, 'contributor', ?, ?, ?, ?)
-      `).run(
-        tm.name,
-        tm.email,
-        defaultPasswordHash,
-        tm.role,
-        tm.brands,
-        tm.phone || null,
-        tm.id
-      );
-      console.log(`✅ Created user account for team member: ${tm.name}`);
-    }
-  }
-
-  // Seed data only if tables are empty
-  const memberCount = db.prepare('SELECT COUNT(*) as count FROM team_members').get().count;
-  if (memberCount === 0) {
-    seedData();
-  }
-
-  // Seed default superadmin if no users exist
-  const userCount = db.prepare('SELECT COUNT(*) as count FROM users').get().count;
-  if (userCount === 0) {
-    seedDefaultUser();
-  }
-}
-
-function seedData() {
-  const allBrands = JSON.stringify([
-    'Samaya Investment', 'Hira Cultural District', 'Holy Quran Museum',
-    'Al-Safiya Museum', 'Hayhala', 'Jabal Thawr', 'Coffee Chain', 'Taibah Gifts'
-  ]);
-  const someBrands = JSON.stringify([
-    'Samaya Investment', 'Hira Cultural District', 'Holy Quran Museum', 'Al-Safiya Museum'
-  ]);
-  const mostAccounts = JSON.stringify([
-    'Samaya Investment', 'Hira Cultural District', 'Holy Quran Museum',
-    'Al-Safiya Museum', 'Hayhala', 'Jabal Thawr', 'Coffee Chain'
-  ]);
-  const religiousExhibitions = JSON.stringify([
-    'Holy Quran Museum', 'Al-Safiya Museum', 'Jabal Thawr'
-  ]);
-
-  const insertMember = db.prepare(`
-    INSERT INTO team_members (name, email, role, brands) VALUES (?, ?, ?, ?)
-  `);
-
-  const members = [
-    ['Dr. Muhammad Al-Sayed', 'muhammad.alsayed@samaya.sa', 'approver', allBrands],
-    ['Dr. Fahd Al-Thumairi', 'fahd.thumairi@samaya.sa', 'approver', someBrands],
-    ['Fahda Abdul Aziz', 'fahda@samaya.sa', 'publisher', mostAccounts],
-    ['Sara Al-Zahrani', 'sara@samaya.sa', 'content_creator', JSON.stringify(['Samaya Investment', 'Hira Cultural District', 'Coffee Chain'])],
-    ['Noura', 'noura@samaya.sa', 'content_creator', JSON.stringify(['Samaya Investment', 'Hira Cultural District', 'Hayhala', 'Taibah Gifts'])],
-    ['Saeed Ghanem', 'saeed@samaya.sa', 'content_creator', religiousExhibitions],
-    ['Anas Mater', 'anas@samaya.sa', 'producer', JSON.stringify(['Samaya Investment', 'Hira Cultural District'])],
-    ['Muhammad Nu\'man', 'numan@samaya.sa', 'manager', JSON.stringify(['Google Maps'])],
-    ['Fahed', 'fahed@samaya.sa', 'manager', allBrands],
-  ];
-
-  const insertMembers = db.transaction(() => {
-    for (const m of members) {
-      insertMember.run(...m);
-    }
-  });
-  insertMembers();
-
-  // Seed brands
-  const insertBrand = db.prepare(`
-    INSERT INTO brands (name, priority, color, icon) VALUES (?, ?, ?, ?)
-  `);
-
-  const brands = [
-    ['Samaya Investment', 1, '#1E3A5F', '🏢'],
-    ['Hira Cultural District', 1, '#8B4513', '🏛️'],
-    ['Holy Quran Museum', 1, '#2E7D32', '📖'],
-    ['Al-Safiya Museum', 1, '#6A1B9A', '🏺'],
-    ['Hayhala', 1, '#C62828', '🎭'],
-    ['Jabal Thawr', 1, '#4E342E', '⛰️'],
-    ['Coffee Chain', 2, '#795548', '☕'],
-    ['Taibah Gifts', 3, '#E65100', '🎁'],
-  ];
-
-  const insertBrands = db.transaction(() => {
-    for (const b of brands) {
-      insertBrand.run(...b);
-    }
-  });
-  insertBrands();
-
-  console.log('✅ Database seeded with team members and brands');
-}
-
-function seedDefaultUser() {
-  const passwordHash = bcrypt.hashSync('admin123', 10);
-  const insertUser = db.prepare(`
-    INSERT INTO users (name, email, password_hash, role) VALUES (?, ?, ?, ?)
-  `);
-  insertUser.run('Fahed Muhaidi', 'f.mahidi@samayainvest.com', passwordHash, 'superadmin');
-  console.log('✅ Default superadmin created (email: f.mahidi@samayainvest.com, password: admin123)');
-}
-
-module.exports = { db, initialize };

server/nocodb.js

@@ -0,0 +1,216 @@
+require('dotenv').config({ path: __dirname + '/.env' });
+
+const NOCODB_URL = process.env.NOCODB_URL || 'http://localhost:8090';
+const NOCODB_TOKEN = process.env.NOCODB_TOKEN;
+const NOCODB_BASE_ID = process.env.NOCODB_BASE_ID;
+
+class NocoDBError extends Error {
+  constructor(message, status, details) {
+    super(message);
+    this.name = 'NocoDBError';
+    this.status = status;
+    this.details = details;
+  }
+}
+
+// Cache: table name → table ID
+const tableIdCache = {};
+
+async function resolveTableId(tableName) {
+  if (tableIdCache[tableName]) return tableIdCache[tableName];
+
+  const res = await fetch(`${NOCODB_URL}/api/v2/meta/bases/${NOCODB_BASE_ID}/tables`, {
+    headers: { 'xc-token': NOCODB_TOKEN },
+  });
+  if (!res.ok) throw new NocoDBError('Failed to fetch tables', res.status);
+  const data = await res.json();
+  for (const t of data.list || []) {
+    tableIdCache[t.title] = t.id;
+  }
+  if (!tableIdCache[tableName]) {
+    throw new NocoDBError(`Table "${tableName}" not found in base ${NOCODB_BASE_ID}`, 404);
+  }
+  return tableIdCache[tableName];
+}
+
+function buildWhere(conditions) {
+  if (!conditions || conditions.length === 0) return '';
+  return conditions
+    .map(c => `(${c.field},${c.op},${c.value})`)
+    .join('~and');
+}
+
+async function request(method, url, body) {
+  const opts = {
+    method,
+    headers: {
+      'xc-token': NOCODB_TOKEN,
+      'Content-Type': 'application/json',
+    },
+  };
+  if (body !== undefined) opts.body = JSON.stringify(body);
+
+  const res = await fetch(url, opts);
+  if (!res.ok) {
+    let details;
+    try { details = await res.json(); } catch {}
+    throw new NocoDBError(
+      `NocoDB ${method} ${url} failed: ${res.status}`,
+      res.status,
+      details
+    );
+  }
+  // DELETE returns empty or {msg}
+  const text = await res.text();
+  return text ? JSON.parse(text) : {};
+}
+
+// ─── Link Resolution ─────────────────────────────────────────
+
+// Cache: "Table.Field" → { colId, tableId }
+const linkColCache = {};
+
+async function getLinkColId(table, linkField) {
+  const key = `${table}.${linkField}`;
+  if (linkColCache[key]) return linkColCache[key];
+  const tableId = await resolveTableId(table);
+  const res = await fetch(`${NOCODB_URL}/api/v2/meta/tables/${tableId}`, {
+    headers: { 'xc-token': NOCODB_TOKEN },
+  });
+  if (!res.ok) throw new NocoDBError('Failed to fetch table metadata', res.status);
+  const meta = await res.json();
+  for (const c of meta.columns || []) {
+    if (c.uidt === 'Links' || c.uidt === 'LinkToAnotherRecord') {
+      linkColCache[`${table}.${c.title}`] = { colId: c.id, tableId };
+    }
+  }
+  return linkColCache[key] || null;
+}
+
+async function fetchLinkedRecords(table, recordId, linkField) {
+  const info = await getLinkColId(table, linkField);
+  if (!info) return [];
+  try {
+    const data = await request('GET',
+      `${NOCODB_URL}/api/v2/tables/${info.tableId}/links/${info.colId}/records/${recordId}`);
+    return data.list || [];
+  } catch { return []; }
+}
+
+async function resolveLinks(table, records, linkFields) {
+  if (!records || !linkFields || linkFields.length === 0) return;
+  const arr = Array.isArray(records) ? records : [records];
+  const promises = [];
+  for (const record of arr) {
+    for (const field of linkFields) {
+      const val = record[field];
+      if (typeof val === 'number' && val > 0) {
+        promises.push(
+          fetchLinkedRecords(table, record.Id, field)
+            .then(linked => { record[field] = linked; })
+        );
+      } else if (typeof val === 'number') {
+        record[field] = [];
+      }
+    }
+  }
+  await Promise.all(promises);
+}
+
+const nocodb = {
+  /**
+   * List records with optional filtering, sorting, pagination.
+   * Pass `links: ['Field1','Field2']` to resolve linked records.
+   */
+  async list(table, { where, sort, fields, limit, offset, links } = {}) {
+    const tableId = await resolveTableId(table);
+    const params = new URLSearchParams();
+    if (where) params.set('where', typeof where === 'string' ? where : buildWhere(where));
+    if (sort) params.set('sort', sort);
+    if (fields) params.set('fields', Array.isArray(fields) ? fields.join(',') : fields);
+    if (limit) params.set('limit', String(limit));
+    if (offset) params.set('offset', String(offset));
+    const qs = params.toString();
+    const data = await request('GET', `${NOCODB_URL}/api/v2/tables/${tableId}/records${qs ? '?' + qs : ''}`);
+    const records = data.list || [];
+    if (links && links.length > 0) {
+      await resolveLinks(table, records, links);
+    }
+    return records;
+  },
+
+  /**
+   * Get a single record by row ID.
+   * Pass `{ links: ['Field1'] }` as third arg to resolve linked records.
+   */
+  async get(table, rowId, { links } = {}) {
+    const tableId = await resolveTableId(table);
+    const record = await request('GET', `${NOCODB_URL}/api/v2/tables/${tableId}/records/${rowId}`);
+    if (links && links.length > 0) {
+      await resolveLinks(table, [record], links);
+    }
+    return record;
+  },
+
+  /**
+   * Create a single record, returns the created record
+   */
+  async create(table, data) {
+    const tableId = await resolveTableId(table);
+    return request('POST', `${NOCODB_URL}/api/v2/tables/${tableId}/records`, data);
+  },
+
+  /**
+   * Update a single record by row ID
+   */
+  async update(table, rowId, data) {
+    const tableId = await resolveTableId(table);
+    return request('PATCH', `${NOCODB_URL}/api/v2/tables/${tableId}/records`, { Id: rowId, ...data });
+  },
+
+  /**
+   * Delete a single record by row ID
+   */
+  async delete(table, rowId) {
+    const tableId = await resolveTableId(table);
+    return request('DELETE', `${NOCODB_URL}/api/v2/tables/${tableId}/records`, { Id: rowId });
+  },
+
+  /**
+   * Bulk create records
+   */
+  async bulkCreate(table, records) {
+    const tableId = await resolveTableId(table);
+    return request('POST', `${NOCODB_URL}/api/v2/tables/${tableId}/records`, records);
+  },
+
+  /**
+   * Bulk update records (each must include Id)
+   */
+  async bulkUpdate(table, records) {
+    const tableId = await resolveTableId(table);
+    return request('PATCH', `${NOCODB_URL}/api/v2/tables/${tableId}/records`, records);
+  },
+
+  /**
+   * Bulk delete records (each must include Id)
+   */
+  async bulkDelete(table, records) {
+    const tableId = await resolveTableId(table);
+    return request('DELETE', `${NOCODB_URL}/api/v2/tables/${tableId}/records`, records);
+  },
+
+  // Expose helpers
+  buildWhere,
+  resolveTableId,
+  getLinkColId,
+  NocoDBError,
+  clearCache() { Object.keys(tableIdCache).forEach(k => delete tableIdCache[k]); },
+
+  // Config getters
+  get url() { return NOCODB_URL; },
+  get token() { return NOCODB_TOKEN; },
+  get baseId() { return NOCODB_BASE_ID; },
+};
+
+module.exports = nocodb;

server/node_modules/.bin/color-support

@@ -1 +0,0 @@
-../color-support/bin.js

server/node_modules/.bin/mime

@@ -1 +0,0 @@
-../mime/cli.js

server/node_modules/.bin/mkdirp

@@ -1 +0,0 @@
-../mkdirp/bin/cmd.js

server/node_modules/.bin/node-gyp

@@ -1 +0,0 @@
-../node-gyp/bin/node-gyp.js

server/node_modules/.bin/node-gyp-build

@@ -1 +0,0 @@
-../node-gyp-build/bin.js

server/node_modules/.bin/node-gyp-build-optional

@@ -1 +0,0 @@
-../node-gyp-build/optional.js

server/node_modules/.bin/node-gyp-build-test

@@ -1 +0,0 @@
-../node-gyp-build/build-test.js

server/node_modules/.bin/node-which

@@ -1 +0,0 @@
-../which/bin/node-which

server/node_modules/.bin/nopt

@@ -1 +0,0 @@
-../nopt/bin/nopt.js

server/node_modules/.bin/prebuild-install

@@ -1 +0,0 @@
-../prebuild-install/bin.js

server/node_modules/.bin/rc

@@ -1 +0,0 @@
-../rc/cli.js

server/node_modules/.bin/rimraf

@@ -1 +0,0 @@
-../rimraf/bin.js

server/node_modules/.bin/semver

@@ -1 +0,0 @@
-../semver/bin/semver.js

server/node_modules/@gar/promisify/LICENSE.md

@@ -1,10 +0,0 @@
-The MIT License (MIT)
-
-Copyright © 2020-2022 Michael Garvin
-
-Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-

server/node_modules/@gar/promisify/README.md

@@ -1,65 +0,0 @@
-# @gar/promisify
-
-### Promisify an entire object or class instance
-
-This module leverages es6 Proxy and Reflect to promisify every function in an
-object or class instance.
-
-It assumes the callback that the function is expecting is the last
-parameter, and that it is an error-first callback with only one value,
-i.e. `(err, value) => ...`. This mirrors node's `util.promisify` method.
-
-In order that you can use it as a one-stop-shop for all your promisify
-needs, you can also pass it a function.  That function will be
-promisified as normal using node's built-in `util.promisify` method.
-
-[node's custom promisified
-functions](https://nodejs.org/api/util.html#util_custom_promisified_functions)
-will also be mirrored, further allowing this to be a drop-in replacement
-for the built-in `util.promisify`.
-
-### Examples
-
-Promisify an entire object
-
-```javascript
-
-const promisify = require('@gar/promisify')
-
-class Foo {
-  constructor (attr) {
-    this.attr = attr
-  }
-
-  double (input, cb) {
-    cb(null, input * 2)
-  }
-
-const foo = new Foo('baz')
-const promisified = promisify(foo)
-
-console.log(promisified.attr)
-console.log(await promisified.double(1024))
-```
-
-Promisify a function
-
-```javascript
-
-const promisify = require('@gar/promisify')
-
-function foo (a, cb) {
-  if (a !== 'bad') {
-    return cb(null, 'ok')
-  }
-  return cb('not ok')
-}
-
-const promisified = promisify(foo)
-
-// This will resolve to 'ok'
-promisified('good')
-
-// this will reject
-promisified('bad')
-```

server/node_modules/@gar/promisify/index.js

@@ -1,36 +0,0 @@
-'use strict'
-
-const { promisify } = require('util')
-
-const handler = {
-  get: function (target, prop, receiver) {
-    if (typeof target[prop] !== 'function') {
-      return target[prop]
-    }
-    if (target[prop][promisify.custom]) {
-      return function () {
-        return Reflect.get(target, prop, receiver)[promisify.custom].apply(target, arguments)
-      }
-    }
-    return function () {
-      return new Promise((resolve, reject) => {
-        Reflect.get(target, prop, receiver).apply(target, [...arguments, function (err, result) {
-          if (err) {
-            return reject(err)
-          }
-          resolve(result)
-        }])
-      })
-    }
-  }
-}
-
-module.exports = function (thingToPromisify) {
-  if (typeof thingToPromisify === 'function') {
-    return promisify(thingToPromisify)
-  }
-  if (typeof thingToPromisify === 'object') {
-    return new Proxy(thingToPromisify, handler)
-  }
-  throw new TypeError('Can only promisify functions or objects')
-}

server/node_modules/@gar/promisify/package.json

@@ -1,32 +0,0 @@
-{
-  "name": "@gar/promisify",
-  "version": "1.1.3",
-  "description": "Promisify an entire class or object",
-  "main": "index.js",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/wraithgar/gar-promisify.git"
-  },
-  "scripts": {
-    "lint": "standard",
-    "lint:fix": "standard --fix",
-    "test": "lab -a @hapi/code -t 100",
-    "posttest": "npm run lint"
-  },
-  "files": [
-    "index.js"
-  ],
-  "keywords": [
-    "promisify",
-    "all",
-    "class",
-    "object"
-  ],
-  "author": "Gar <gar+npm@danger.computer>",
-  "license": "MIT",
-  "devDependencies": {
-    "@hapi/code": "^8.0.1",
-    "@hapi/lab": "^24.1.0",
-    "standard": "^16.0.3"
-  }
-}

server/node_modules/@npmcli/fs/LICENSE.md

@@ -1,20 +0,0 @@
-<!-- This file is automatically added by @npmcli/template-oss. Do not edit. -->
-
-ISC License
-
-Copyright npm, Inc.
-
-Permission to use, copy, modify, and/or distribute this
-software for any purpose with or without fee is hereby
-granted, provided that the above copyright notice and this
-permission notice appear in all copies.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND NPM DISCLAIMS ALL
-WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL
-IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO
-EVENT SHALL NPM BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
-WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS,
-WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER
-TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE
-USE OR PERFORMANCE OF THIS SOFTWARE.

server/node_modules/@npmcli/fs/README.md

@@ -1,60 +0,0 @@
-# @npmcli/fs
-
-polyfills, and extensions, of the core `fs` module.
-
-## Features
-
-- all exposed functions return promises
-- `fs.rm` polyfill for node versions < 14.14.0
-- `fs.mkdir` polyfill adding support for the `recursive` and `force` options in node versions < 10.12.0
-- `fs.copyFile` extended to accept an `owner` option
-- `fs.mkdir` extended to accept an `owner` option
-- `fs.mkdtemp` extended to accept an `owner` option
-- `fs.writeFile` extended to accept an `owner` option
-- `fs.withTempDir` added
-- `fs.cp` polyfill for node < 16.7.0
-
-## The `owner` option
-
-The `copyFile`, `mkdir`, `mkdtemp`, `writeFile`, and `withTempDir` functions
-all accept a new `owner` property in their options. It can be used in two ways:
-
-- `{ owner: { uid: 100, gid: 100 } }` - set the `uid` and `gid` explicitly
-- `{ owner: 100 }` - use one value, will set both `uid` and `gid` the same
-
-The special string `'inherit'` may be passed instead of a number, which will
-cause this module to automatically determine the correct `uid` and/or `gid`
-from the nearest existing parent directory of the target.
-
-## `fs.withTempDir(root, fn, options) -> Promise`
-
-### Parameters
-
-- `root`: the directory in which to create the temporary directory
-- `fn`: a function that will be called with the path to the temporary directory
-- `options`
-  - `tmpPrefix`: a prefix to be used in the generated directory name
-
-### Usage
-
-The `withTempDir` function creates a temporary directory, runs the provided
-function (`fn`), then removes the temporary directory and resolves or rejects
-based on the result of `fn`.
-
-```js
-const fs = require('@npmcli/fs')
-const os = require('os')
-
-// this function will be called with the full path to the temporary directory
-// it is called with `await` behind the scenes, so can be async if desired.
-const myFunction = async (tempPath) => {
-  return 'done!'
-}
-
-const main = async () => {
-  const result = await fs.withTempDir(os.tmpdir(), myFunction)
-  // result === 'done!'
-}
-
-main()
-```

server/node_modules/@npmcli/fs/lib/common/file-url-to-path/index.js

@@ -1,17 +0,0 @@
-const url = require('url')
-
-const node = require('../node.js')
-const polyfill = require('./polyfill.js')
-
-const useNative = node.satisfies('>=10.12.0')
-
-const fileURLToPath = (path) => {
-  // the polyfill is tested separately from this module, no need to hack
-  // process.version to try to trigger it just for coverage
-  // istanbul ignore next
-  return useNative
-    ? url.fileURLToPath(path)
-    : polyfill(path)
-}
-
-module.exports = fileURLToPath

server/node_modules/@npmcli/fs/lib/common/file-url-to-path/polyfill.js

@@ -1,121 +0,0 @@
-const { URL, domainToUnicode } = require('url')
-
-const CHAR_LOWERCASE_A = 97
-const CHAR_LOWERCASE_Z = 122
-
-const isWindows = process.platform === 'win32'
-
-class ERR_INVALID_FILE_URL_HOST extends TypeError {
-  constructor (platform) {
-    super(`File URL host must be "localhost" or empty on ${platform}`)
-    this.code = 'ERR_INVALID_FILE_URL_HOST'
-  }
-
-  toString () {
-    return `${this.name} [${this.code}]: ${this.message}`
-  }
-}
-
-class ERR_INVALID_FILE_URL_PATH extends TypeError {
-  constructor (msg) {
-    super(`File URL path ${msg}`)
-    this.code = 'ERR_INVALID_FILE_URL_PATH'
-  }
-
-  toString () {
-    return `${this.name} [${this.code}]: ${this.message}`
-  }
-}
-
-class ERR_INVALID_ARG_TYPE extends TypeError {
-  constructor (name, actual) {
-    super(`The "${name}" argument must be one of type string or an instance ` +
-      `of URL. Received type ${typeof actual} ${actual}`)
-    this.code = 'ERR_INVALID_ARG_TYPE'
-  }
-
-  toString () {
-    return `${this.name} [${this.code}]: ${this.message}`
-  }
-}
-
-class ERR_INVALID_URL_SCHEME extends TypeError {
-  constructor (expected) {
-    super(`The URL must be of scheme ${expected}`)
-    this.code = 'ERR_INVALID_URL_SCHEME'
-  }
-
-  toString () {
-    return `${this.name} [${this.code}]: ${this.message}`
-  }
-}
-
-const isURLInstance = (input) => {
-  return input != null && input.href && input.origin
-}
-
-const getPathFromURLWin32 = (url) => {
-  const hostname = url.hostname
-  let pathname = url.pathname
-  for (let n = 0; n < pathname.length; n++) {
-    if (pathname[n] === '%') {
-      const third = pathname.codePointAt(n + 2) | 0x20
-      if ((pathname[n + 1] === '2' && third === 102) ||
-        (pathname[n + 1] === '5' && third === 99)) {
-        throw new ERR_INVALID_FILE_URL_PATH('must not include encoded \\ or / characters')
-      }
-    }
-  }
-
-  pathname = pathname.replace(/\//g, '\\')
-  pathname = decodeURIComponent(pathname)
-  if (hostname !== '') {
-    return `\\\\${domainToUnicode(hostname)}${pathname}`
-  }
-
-  const letter = pathname.codePointAt(1) | 0x20
-  const sep = pathname[2]
-  if (letter < CHAR_LOWERCASE_A || letter > CHAR_LOWERCASE_Z ||
-    (sep !== ':')) {
-    throw new ERR_INVALID_FILE_URL_PATH('must be absolute')
-  }
-
-  return pathname.slice(1)
-}
-
-const getPathFromURLPosix = (url) => {
-  if (url.hostname !== '') {
-    throw new ERR_INVALID_FILE_URL_HOST(process.platform)
-  }
-
-  const pathname = url.pathname
-
-  for (let n = 0; n < pathname.length; n++) {
-    if (pathname[n] === '%') {
-      const third = pathname.codePointAt(n + 2) | 0x20
-      if (pathname[n + 1] === '2' && third === 102) {
-        throw new ERR_INVALID_FILE_URL_PATH('must not include encoded / characters')
-      }
-    }
-  }
-
-  return decodeURIComponent(pathname)
-}
-
-const fileURLToPath = (path) => {
-  if (typeof path === 'string') {
-    path = new URL(path)
-  } else if (!isURLInstance(path)) {
-    throw new ERR_INVALID_ARG_TYPE('path', ['string', 'URL'], path)
-  }
-
-  if (path.protocol !== 'file:') {
-    throw new ERR_INVALID_URL_SCHEME('file')
-  }
-
-  return isWindows
-    ? getPathFromURLWin32(path)
-    : getPathFromURLPosix(path)
-}
-
-module.exports = fileURLToPath

server/node_modules/@npmcli/fs/lib/common/get-options.js

@@ -1,20 +0,0 @@
-// given an input that may or may not be an object, return an object that has
-// a copy of every defined property listed in 'copy'. if the input is not an
-// object, assign it to the property named by 'wrap'
-const getOptions = (input, { copy, wrap }) => {
-  const result = {}
-
-  if (input && typeof input === 'object') {
-    for (const prop of copy) {
-      if (input[prop] !== undefined) {
-        result[prop] = input[prop]
-      }
-    }
-  } else {
-    result[wrap] = input
-  }
-
-  return result
-}
-
-module.exports = getOptions

server/node_modules/@npmcli/fs/lib/common/node.js

@@ -1,9 +0,0 @@
-const semver = require('semver')
-
-const satisfies = (range) => {
-  return semver.satisfies(process.version, range, { includePrerelease: true })
-}
-
-module.exports = {
-  satisfies,
-}