diff --git a/api/seafile.js b/api/seafile.js
deleted file mode 100644
index cba4231..0000000
--- a/api/seafile.js
+++ /dev/null
@@ -1,515 +0,0 @@
-import { createClient } from '@supabase/supabase-js';
-
-const DIRECTORY_USAGE_CACHE_TTL_MS = 2 * 60 * 1000;
-const directoryUsageCache = new Map();
-
-function json(res, status, body) {
-  res.status(status).setHeader('Content-Type', 'application/json');
-  res.setHeader('Cache-Control', 'no-store');
-  res.send(JSON.stringify(body));
-}
-
-function normalizeBaseUrl(url) {
-  return String(url || '').trim().replace(/\/+$/, '');
-}
-
-function normalizePath(path) {
-  const raw = String(path || '/').trim();
-  const parts = raw.split('/').filter(Boolean);
-  const clean = [];
-
-  for (const part of parts) {
-    if (part === '.' || part === '') continue;
-    if (part === '..') throw new Error('Invalid path');
-    clean.push(part);
-  }
-
-  return `/${clean.join('/')}`;
-}
-
-function joinPath(...parts) {
-  return normalizePath(parts.join('/'));
-}
-
-function safeName(value, fallback) {
-  const cleaned = String(value || '')
-    .trim()
-    .replace(/[\\/:*?"<>|#%{}^~[\]`]+/g, '-')
-    .replace(/\s+/g, ' ')
-    .replace(/^-+|-+$/g, '');
-
-  return cleaned || fallback;
-}
-
-function fillTemplate(template, profile) {
-  const name = safeName(profile.name, profile.id);
-  const companyName = safeName(profile.company?.name, name);
-  const email = safeName(profile.email, profile.id);
-  const emailName = safeName(String(profile.email || '').split('@')[0], profile.id);
-
-  return String(template || '')
-    .replaceAll('{id}', profile.id)
-    .replaceAll('{name}', name)
-    .replaceAll('{companyName}', companyName)
-    .replaceAll('{email}', email)
-    .replaceAll('{emailName}', emailName);
-}
-
-function getConfig() {
-  const serverUrl = normalizeBaseUrl(process.env.SEAFILE_SERVER_URL);
-  const apiToken = process.env.SEAFILE_API_TOKEN;
-  const repoId = process.env.SEAFILE_REPO_ID;
-
-  return {
-    serverUrl,
-    webUrl: normalizeBaseUrl(process.env.SEAFILE_WEB_URL || serverUrl),
-    apiToken,
-    repoId,
-    teamRoot: normalizePath(process.env.SEAFILE_TEAM_ROOT_PATH || '/'),
-    externalRoot: normalizePath(process.env.SEAFILE_EXTERNAL_ROOT_PATH || '/Subcontractors'),
-    externalTemplate: process.env.SEAFILE_EXTERNAL_FOLDER_TEMPLATE || '{name}',
-    clientRoot: normalizePath(process.env.SEAFILE_CLIENT_ROOT_PATH || '/Clients'),
-    clientTemplate: process.env.SEAFILE_CLIENT_FOLDER_TEMPLATE || '{companyName}',
-    configured: Boolean(serverUrl && apiToken && repoId),
-  };
-}
-
-async function createCallerClient(authHeader) {
-  const supabaseUrl = process.env.VITE_SUPABASE_URL || process.env.SUPABASE_URL;
-  const supabaseAnonKey = process.env.VITE_SUPABASE_ANON_KEY || process.env.SUPABASE_ANON_KEY;
-
-  if (!supabaseUrl || !supabaseAnonKey) {
-    throw new Error('Supabase auth env is not configured on Vercel.');
-  }
-
-  return createClient(supabaseUrl, supabaseAnonKey, {
-    auth: { persistSession: false, autoRefreshToken: false },
-    global: { headers: { Authorization: authHeader } },
-  });
-}
-
-async function requirePortalUser(authHeader) {
-  const callerClient = await createCallerClient(authHeader);
-
-  const { data: userData, error: userError } = await callerClient.auth.getUser();
-  if (userError || !userData?.user) {
-    return { ok: false, status: 401, message: 'Unauthorized' };
-  }
-
-  const { data: profile, error: profileError } = await callerClient
-    .from('profiles')
-    .select('id, name, role, company:companies(id, name)')
-    .eq('id', userData.user.id)
-    .single();
-
-  if (profileError) {
-    return { ok: false, status: 500, message: profileError.message };
-  }
-
-  if (!['team', 'external', 'client'].includes(profile?.role)) {
-    return { ok: false, status: 403, message: 'Forbidden' };
-  }
-
-  return {
-    ok: true,
-    callerClient,
-    profile: {
-      ...profile,
-      email: userData.user.email,
-    },
-  };
-}
-
-function getUserRoot(config, profile) {
-  if (profile.role === 'team') return config.teamRoot;
-
-  if (profile.role === 'client') {
-    const templated = fillTemplate(config.clientTemplate, profile);
-    if (templated.startsWith('/')) return normalizePath(templated);
-
-    return joinPath(config.clientRoot, templated);
-  }
-
-  const templated = fillTemplate(config.externalTemplate, profile);
-  if (templated.startsWith('/')) return normalizePath(templated);
-
-  return joinPath(config.externalRoot, templated);
-}
-
-function resolveSeafilePath(config, profile, requestedPath = '/') {
-  const root = getUserRoot(config, profile);
-  const virtualPath = normalizePath(requestedPath);
-  return {
-    root,
-    virtualPath,
-    seafilePath: joinPath(root, virtualPath),
-  };
-}
-
-async function seafileRequest(config, endpoint, options = {}) {
-  const response = await fetch(`${config.serverUrl}${endpoint}`, {
-    ...options,
-    headers: {
-      Authorization: `Token ${config.apiToken}`,
-      Accept: 'application/json',
-      ...(options.headers || {}),
-    },
-  });
-
-  const text = await response.text();
-  let body = text;
-  try {
-    body = text ? JSON.parse(text) : null;
-  } catch {
-    body = text;
-  }
-
-  if (!response.ok) {
-    const message = typeof body === 'object' && body?.error_msg ? body.error_msg : text || `Seafile returned ${response.status}`;
-    const error = new Error(message);
-    error.status = response.status;
-    throw error;
-  }
-
-  return body;
-}
-
-async function createSeafileFolder(config, path) {
-  const body = new URLSearchParams({ operation: 'mkdir', create_parents: 'true' });
-  await seafileRequest(config, `/api2/repos/${encodeURIComponent(config.repoId)}/dir/?p=${encodeURIComponent(path)}`, {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
-    body,
-  });
-}
-
-async function createSeafileFolderIfMissing(config, path) {
-  try {
-    await createSeafileFolder(config, path);
-    return true;
-  } catch (error) {
-    const message = String(error.message || '').toLowerCase();
-    if (error.status === 400 || message.includes('already') || message.includes('exist')) return false;
-    throw error;
-  }
-}
-
-function getCachedDirectoryUsage(cacheKey) {
-  const cached = directoryUsageCache.get(cacheKey);
-  if (!cached) return null;
-  if ((Date.now() - cached.timestamp) > DIRECTORY_USAGE_CACHE_TTL_MS) {
-    directoryUsageCache.delete(cacheKey);
-    return null;
-  }
-
-  return cached.bytes;
-}
-
-function setCachedDirectoryUsage(cacheKey, bytes) {
-  directoryUsageCache.set(cacheKey, {
-    bytes: Number(bytes) || 0,
-    timestamp: Date.now(),
-  });
-}
-
-async function listDirectoryEntries(config, path) {
-  const entries = await seafileRequest(
-    config,
-    `/api2/repos/${encodeURIComponent(config.repoId)}/dir/?p=${encodeURIComponent(path)}`
-  );
-
-  return Array.isArray(entries) ? entries : [];
-}
-
-async function getDirectoryUsageBytes(config, path, prefetchedEntries = null) {
-  const normalizedPath = normalizePath(path);
-  const cacheKey = `${config.repoId}:${normalizedPath}`;
-  const cached = getCachedDirectoryUsage(cacheKey);
-  if (cached != null) return cached;
-
-  const entries = prefetchedEntries || await listDirectoryEntries(config, normalizedPath);
-  let total = 0;
-
-  for (const entry of entries) {
-    if (entry.type === 'file') {
-      total += Number(entry.size || 0);
-      continue;
-    }
-
-    if (entry.type === 'dir') {
-      total += await getDirectoryUsageBytes(config, joinPath(normalizedPath, entry.name));
-    }
-  }
-
-  setCachedDirectoryUsage(cacheKey, total);
-  return total;
-}
-
-function clearDirectoryUsageCache(config, path) {
-  const normalizedPath = normalizePath(path);
-  const prefixes = [];
-  let cursor = normalizedPath;
-
-  while (true) {
-    prefixes.push(`${config.repoId}:${cursor}`);
-    if (cursor === '/') break;
-    cursor = parentDir(cursor);
-  }
-
-  for (const key of prefixes) {
-    directoryUsageCache.delete(key);
-  }
-}
-
-function entryPath(parent, name) {
-  return joinPath(parent, name);
-}
-
-function parentDir(path) {
-  const normalized = normalizePath(path);
-  const parts = normalized.split('/').filter(Boolean);
-  parts.pop();
-  return `/${parts.join('/')}`;
-}
-
-function basename(path) {
-  const parts = normalizePath(path).split('/').filter(Boolean);
-  return parts[parts.length - 1] || '';
-}
-
-async function syncManagedFolders(config, auth) {
-  if (auth.profile.role !== 'team') {
-    const error = new Error('Team only');
-    error.status = 403;
-    throw error;
-  }
-
-  const [{ data: companies, error: companiesError }, { data: externals, error: externalsError }] = await Promise.all([
-    auth.callerClient.from('companies').select('id, name').order('name'),
-    auth.callerClient.from('profiles').select('id, name, email, role').eq('role', 'external').order('name'),
-  ]);
-
-  if (companiesError) throw new Error(companiesError.message);
-  if (externalsError) throw new Error(externalsError.message);
-
-  const folderPaths = [
-    config.clientRoot,
-    config.externalRoot,
-    ...(companies || []).map(company => {
-      const profile = { id: company.id, name: company.name, email: '', company };
-      const templated = fillTemplate(config.clientTemplate, profile);
-      return templated.startsWith('/') ? normalizePath(templated) : joinPath(config.clientRoot, templated);
-    }),
-    ...(externals || []).map(profile => {
-      const templated = fillTemplate(config.externalTemplate, profile);
-      return templated.startsWith('/') ? normalizePath(templated) : joinPath(config.externalRoot, templated);
-    }),
-  ];
-
-  const uniquePaths = [...new Set(folderPaths)].filter(path => path !== '/');
-  let created = 0;
-
-  for (const path of uniquePaths) {
-    if (await createSeafileFolderIfMissing(config, path)) created += 1;
-  }
-
-  return {
-    created,
-    checked: uniquePaths.length,
-    clients: companies?.length || 0,
-    subcontractors: externals?.length || 0,
-  };
-}
-
-export default async function handler(req, res) {
-  try {
-    const authHeader = req.headers.authorization || '';
-    if (!authHeader) return json(res, 401, { error: 'No authorization header' });
-
-    const auth = await requirePortalUser(authHeader);
-    if (!auth.ok) return json(res, auth.status, { error: auth.message });
-
-    const config = getConfig();
-    if (!config.configured) {
-      return json(res, 200, {
-        configured: false,
-        error: 'Seafile is not configured yet.',
-        requiredEnv: ['SEAFILE_SERVER_URL', 'SEAFILE_API_TOKEN', 'SEAFILE_REPO_ID'],
-      });
-    }
-
-    const action = req.query.action || (req.method === 'GET' ? 'list' : '');
-    const requestedPath = req.query.path || req.body?.path;
-    const resolved = resolveSeafilePath(config, auth.profile, requestedPath || '/');
-    const invalidateUsage = req.query.invalidateUsage === '1';
-
-    if (req.method === 'POST' && action === 'sync-folders') {
-      const result = await syncManagedFolders(config, auth);
-      return json(res, 200, { success: true, ...result });
-    }
-
-    if (req.method === 'GET' && action === 'config') {
-      return json(res, 200, {
-        configured: true,
-        role: auth.profile.role,
-        root: resolved.root,
-        webUrl: config.webUrl,
-      });
-    }
-
-    if (req.method === 'GET' && action === 'list') {
-      if (invalidateUsage) clearDirectoryUsageCache(config, resolved.seafilePath);
-      let entries;
-      try {
-        entries = await listDirectoryEntries(config, resolved.seafilePath);
-      } catch (error) {
-        if (!['external', 'client'].includes(auth.profile.role) || resolved.virtualPath !== '/') throw error;
-        await createSeafileFolder(config, resolved.root);
-        entries = await listDirectoryEntries(config, resolved.seafilePath);
-      }
-
-      const normalizedEntries = (Array.isArray(entries) ? entries : []).map((item) => {
-        const itemPath = entryPath(resolved.virtualPath, item.name);
-
-        return {
-          id: item.id,
-          name: item.name,
-          type: item.type,
-          size: item.type === 'file' ? Number(item.size || 0) : 0,
-          aggregateSize: item.type === 'file' ? Number(item.size || 0) : null,
-          mtime: item.mtime || null,
-          permission: item.permission || null,
-          path: itemPath,
-        };
-      }).sort((a, b) => {
-        if (a.type !== b.type) return a.type === 'dir' ? -1 : 1;
-        return a.name.localeCompare(b.name);
-      });
-
-      return json(res, 200, {
-        configured: true,
-        path: resolved.virtualPath,
-        canGoUp: resolved.virtualPath !== '/',
-        parentPath: parentDir(resolved.virtualPath),
-        entries: normalizedEntries,
-        webUrl: config.webUrl,
-      });
-    }
-
-    if (req.method === 'GET' && action === 'download') {
-      const url = await seafileRequest(
-        config,
-        `/api2/repos/${encodeURIComponent(config.repoId)}/file/?p=${encodeURIComponent(resolved.seafilePath)}&reuse=1`
-      );
-
-      return json(res, 200, { url });
-    }
-
-    if (req.method === 'POST' && action === 'mkdir') {
-      const folderName = safeName(req.body?.name, '');
-      if (!folderName) return json(res, 400, { error: 'Folder name is required.' });
-
-      const folderPath = joinPath(resolved.seafilePath, folderName);
-      await createSeafileFolder(config, folderPath);
-      clearDirectoryUsageCache(config, resolved.seafilePath);
-
-      return json(res, 200, { success: true });
-    }
-
-    if (req.method === 'POST' && action === 'upload-link') {
-      const uploadLink = await seafileRequest(
-        config,
-        `/api2/repos/${encodeURIComponent(config.repoId)}/upload-link/?p=${encodeURIComponent(resolved.seafilePath)}`
-      );
-
-      return json(res, 200, {
-        uploadLink: typeof uploadLink === 'string' ? uploadLink : String(uploadLink || ''),
-        parentDir: resolved.seafilePath,
-      });
-    }
-
-    if (req.method === 'POST' && action === 'rename') {
-      const newName = safeName(req.body?.name, '');
-      if (!newName) return json(res, 400, { error: 'New name is required.' });
-
-      const type = req.body?.type || 'file';
-      const endpoint = type === 'dir'
-        ? `/api2/repos/${encodeURIComponent(config.repoId)}/dir/?p=${encodeURIComponent(resolved.seafilePath)}`
-        : `/api2/repos/${encodeURIComponent(config.repoId)}/file/?p=${encodeURIComponent(resolved.seafilePath)}`;
-
-      const body = new URLSearchParams({ operation: 'rename', newname: newName });
-      await seafileRequest(config, endpoint, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
-        body,
-      });
-
-      return json(res, 200, { success: true });
-    }
-
-    if (req.method === 'POST' && action === 'move') {
-      const srcPath = req.body?.srcPath;
-      const dstDir = req.body?.dstDir;
-      if (!srcPath || !dstDir) return json(res, 400, { error: 'srcPath and dstDir are required.' });
-
-      const resolvedSrc = resolveSeafilePath(config, auth.profile, srcPath);
-      const resolvedDst = resolveSeafilePath(config, auth.profile, dstDir);
-      const itemName = basename(resolvedSrc.seafilePath);
-      const srcDir = parentDir(resolvedSrc.seafilePath);
-      if (!itemName) return json(res, 400, { error: 'Cannot move root.' });
-
-      const type = req.body?.type || 'file';
-      const endpoint = type === 'dir'
-        ? `/api2/repos/${encodeURIComponent(config.repoId)}/dir/?p=${encodeURIComponent(resolvedSrc.seafilePath)}`
-        : `/api2/repos/${encodeURIComponent(config.repoId)}/file/?p=${encodeURIComponent(resolvedSrc.seafilePath)}`;
-
-      const body = new URLSearchParams({
-        operation: 'move',
-        dst_repo: config.repoId,
-        dst_dir: resolvedDst.seafilePath,
-      });
-
-      await seafileRequest(config, endpoint, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
-        body,
-      });
-
-      clearDirectoryUsageCache(config, srcDir);
-      clearDirectoryUsageCache(config, resolvedDst.seafilePath);
-
-      return json(res, 200, { success: true });
-    }
-
-    if (req.method === 'DELETE' && action === 'delete') {
-      const type = req.query.type || req.body?.type;
-      if (!['file', 'dir'].includes(type)) return json(res, 400, { error: 'Valid item type is required.' });
-
-      const itemName = basename(resolved.seafilePath);
-      const itemParent = parentDir(resolved.seafilePath);
-      if (!itemName) return json(res, 400, { error: 'Cannot delete the root folder.' });
-
-      const body = new URLSearchParams({
-        file_names: itemName,
-      });
-
-      await seafileRequest(
-        config,
-        `/api2/repos/${encodeURIComponent(config.repoId)}/fileops/delete/?p=${encodeURIComponent(itemParent)}`,
-        {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
-          body,
-        }
-      );
-
-      clearDirectoryUsageCache(config, itemParent);
-
-      return json(res, 200, { success: true });
-    }
-
-    return json(res, 405, { error: 'Method not allowed' });
-  } catch (error) {
-    return json(res, error.status || 500, { error: error.message || 'Unexpected Seafile error' });
-  }
-}
diff --git a/src/App.jsx b/src/App.jsx
index 295d93f..026b87d 100755
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,22 +1,36 @@
-import { lazy, Suspense } from 'react';
-import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
+import { lazy, Suspense, Component } from 'react';
+import { BrowserRouter, Routes, Route, Navigate, useParams } from 'react-router-dom';
 import { AuthProvider } from './context/AuthContext';
 import ProtectedRoute from './components/ProtectedRoute';
 import PageLoader from './components/PageLoader';
 
+class ChunkErrorBoundary extends Component {
+  state = { error: null };
+  static getDerivedStateFromError(error) { return { error }; }
+  render() {
+    if (this.state.error) {
+      return (
+        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '60vh', gap: 16 }}>
+          <div style={{ fontSize: 14, color: 'var(--text-secondary)' }}>Page failed to load.</div>
+          <button className="btn btn-primary" onClick={() => { this.setState({ error: null }); window.location.reload(); }}>
+            Reload
+          </button>
+        </div>
+      );
+    }
+    return this.props.children;
+  }
+}
+
 import Login from './pages/Login';
 import PayInvoice from './pages/PayInvoice';
 
 const Settings = lazy(() => import('./pages/Settings'));
-const Dashboard = lazy(() => import('./pages/team/Dashboard'));
-const Companies = lazy(() => import('./pages/team/Companies'));
+const CompaniesPage = lazy(() => import('./pages/CompaniesPage'));
 const CompanyDetail = lazy(() => import('./pages/team/CompanyDetail'));
-const ProjectDetail = lazy(() => import('./pages/team/ProjectDetail'));
-const TeamProjects = lazy(() => import('./pages/team/TeamProjects'));
-const Requests = lazy(() => import('./pages/team/Requests'));
 const Invoices = lazy(() => import('./pages/team/Invoices'));
 const MeetingNotes = lazy(() => import('./pages/team/MeetingNotes'));
-const TaskDetail = lazy(() => import('./pages/team/TaskDetail'));
+const RequestDetail = lazy(() => import('./pages/RequestDetail'));
 const CreateInvoice = lazy(() => import('./pages/team/CreateInvoice'));
 const CreateSubcontractorPO = lazy(() => import('./pages/team/CreateSubcontractorPO'));
 const InvoiceDetail = lazy(() => import('./pages/team/InvoiceDetail'));
@@ -25,40 +39,55 @@ const SubInvoiceDetail = lazy(() => import('./pages/team/SubInvoiceDetail'));
 const SurveyMaker = lazy(() => import('./pages/team/SurveyMaker'));
 const BrandBook = lazy(() => import('./pages/team/BrandBook'));
 const Converters = lazy(() => import('./pages/team/Converters'));
-const ServerStatus = lazy(() => import('./pages/team/ServerStatus'));
 const FileSharing = lazy(() => import('./pages/team/FileSharing'));
 const FourgePasswords = lazy(() => import('./pages/team/FourgePasswords'));
-const ExternalMyRequests = lazy(() => import('./pages/external/MyRequests'));
 const MyPurchaseOrders = lazy(() => import('./pages/external/MyPurchaseOrders'));
 const ExternalMyInvoices = lazy(() => import('./pages/external/MyInvoices'));
-const ExternalProjects = lazy(() => import('./pages/external/ExternalProjects'));
 const ExternalMyInvoiceDetail = lazy(() => import('./pages/external/MyInvoiceDetail'));
 const ExternalMyInvoiceCreate = lazy(() => import('./pages/external/MyInvoiceCreate'));
-const ClientDashboard = lazy(() => import('./pages/client/ClientDashboard'));
-const MyCompany = lazy(() => import('./pages/client/MyCompany'));
-const MyRequests = lazy(() => import('./pages/client/MyRequests'));
-const MyProjects = lazy(() => import('./pages/client/MyProjects'));
-const MyProjectDetail = lazy(() => import('./pages/client/MyProjectDetail'));
+const Projects = lazy(() => import('./pages/Projects'));
+const ProjectDetailPage = lazy(() => import('./pages/ProjectDetailPage'));
+const DashboardPage = lazy(() => import('./pages/DashboardPage'));
+const RequestsPage = lazy(() => import('./pages/RequestsPage'));
 const MyInvoices = lazy(() => import('./pages/client/MyInvoices'));
-const RequestDetail = lazy(() => import('./pages/client/RequestDetail'));
 const NewRequest = lazy(() => import('./pages/client/NewRequest'));
 const NewProject = lazy(() => import('./pages/client/NewProject'));
 
+function RedirectProjectDetail() {
+  const { id } = useParams();
+  return <Navigate to={`/projects/${id}`} replace />;
+}
+
+function RedirectRequestDetail() {
+  const { id } = useParams();
+  return <Navigate to={`/requests/${id}`} replace />;
+}
+
+function NavigateCompanyDetail() {
+  const { id } = useParams();
+  return <Navigate to={`/company/${id}`} replace />;
+}
+
 export default function App() {
   return (
     <AuthProvider>
       <BrowserRouter>
+        <ChunkErrorBoundary>
         <Suspense fallback={<PageLoader />}>
         <Routes>
           <Route path="/" element={<Login />} />
 
-          <Route path="/dashboard" element={<ProtectedRoute role={['team', 'external']}><Dashboard /></ProtectedRoute>} />
-          <Route path="/projects/:id" element={<ProtectedRoute role={['team', 'external']}><ProjectDetail /></ProtectedRoute>} />
-          <Route path="/tasks/:id" element={<ProtectedRoute role={['team', 'external']}><TaskDetail /></ProtectedRoute>} />
-          <Route path="/companies" element={<ProtectedRoute role="team"><Companies /></ProtectedRoute>} />
-          <Route path="/companies/:id" element={<ProtectedRoute role="team"><CompanyDetail /></ProtectedRoute>} />
-          <Route path="/requests" element={<ProtectedRoute role="team"><Requests /></ProtectedRoute>} />
-          <Route path="/team-projects" element={<ProtectedRoute role="team"><TeamProjects /></ProtectedRoute>} />
+          <Route path="/dashboard" element={<ProtectedRoute role={['team', 'external', 'client']}><DashboardPage /></ProtectedRoute>} />
+          <Route path="/projects" element={<ProtectedRoute role={['team', 'external', 'client']}><Projects /></ProtectedRoute>} />
+          <Route path="/projects/:id" element={<ProtectedRoute role={['team', 'external', 'client']}><ProjectDetailPage /></ProtectedRoute>} />
+          <Route path="/tasks/:id" element={<RedirectRequestDetail />} />
+          <Route path="/requests/:id" element={<ProtectedRoute role={['team', 'external', 'client']}><RequestDetail /></ProtectedRoute>} />
+          <Route path="/company" element={<ProtectedRoute role={['team', 'client']}><CompaniesPage /></ProtectedRoute>} />
+          <Route path="/company/:id" element={<ProtectedRoute role={['team', 'client']}><CompanyDetail /></ProtectedRoute>} />
+          <Route path="/companies" element={<Navigate to="/company" replace />} />
+          <Route path="/companies/:id" element={<NavigateCompanyDetail />} />
+          <Route path="/requests" element={<ProtectedRoute role={['team', 'external', 'client']}><RequestsPage /></ProtectedRoute>} />
+          <Route path="/team-projects" element={<Navigate to="/projects" replace />} />
           <Route path="/meeting-notes" element={<ProtectedRoute role="team"><MeetingNotes /></ProtectedRoute>} />
           <Route path="/invoices" element={<ProtectedRoute role="team"><Invoices /></ProtectedRoute>} />
           <Route path="/invoices/new" element={<ProtectedRoute role="team"><CreateInvoice /></ProtectedRoute>} />
@@ -72,22 +101,22 @@ export default function App() {
           <Route path="/file-sharing" element={<ProtectedRoute role={['team', 'external', 'client']}><FileSharing /></ProtectedRoute>} />
           <Route path="/file-uploads" element={<Navigate to="/file-sharing" replace />} />
           <Route path="/fourge-passwords" element={<ProtectedRoute role="team"><FourgePasswords /></ProtectedRoute>} />
-          <Route path="/server-status" element={<ProtectedRoute role="team"><ServerStatus /></ProtectedRoute>} />
-          <Route path="/assigned-requests" element={<ProtectedRoute role="external"><ExternalMyRequests /></ProtectedRoute>} />
+          <Route path="/server-status" element={<Navigate to="/dashboard" replace />} />
+          <Route path="/assigned-requests" element={<Navigate to="/requests" replace />} />
           <Route path="/my-purchase-orders" element={<ProtectedRoute role="external"><MyPurchaseOrders /></ProtectedRoute>} />
-          <Route path="/my-projects-sub" element={<ProtectedRoute role="external"><ExternalProjects /></ProtectedRoute>} />
+          <Route path="/my-projects-sub" element={<Navigate to="/projects" replace />} />
           <Route path="/my-invoices-sub" element={<ProtectedRoute role="external"><ExternalMyInvoices /></ProtectedRoute>} />
           <Route path="/my-invoices-sub/new" element={<ProtectedRoute role="external"><ExternalMyInvoiceCreate /></ProtectedRoute>} />
           <Route path="/my-invoices-sub/:id" element={<ProtectedRoute role="external"><ExternalMyInvoiceDetail /></ProtectedRoute>} />
 
           <Route path="/settings" element={<ProtectedRoute><Settings /></ProtectedRoute>} />
 
-          <Route path="/my-dashboard" element={<ProtectedRoute role="client"><ClientDashboard /></ProtectedRoute>} />
-          <Route path="/my-company" element={<ProtectedRoute role="client"><MyCompany /></ProtectedRoute>} />
-          <Route path="/my-requests" element={<ProtectedRoute role="client"><MyRequests /></ProtectedRoute>} />
-          <Route path="/my-requests/:id" element={<ProtectedRoute role="client"><RequestDetail /></ProtectedRoute>} />
-          <Route path="/my-projects" element={<ProtectedRoute role="client"><MyProjects /></ProtectedRoute>} />
-          <Route path="/my-projects/:id" element={<ProtectedRoute role="client"><MyProjectDetail /></ProtectedRoute>} />
+          <Route path="/my-dashboard" element={<Navigate to="/dashboard" replace />} />
+          <Route path="/my-company" element={<Navigate to="/company" replace />} />
+          <Route path="/my-requests" element={<Navigate to="/requests" replace />} />
+          <Route path="/my-requests/:id" element={<RedirectRequestDetail />} />
+          <Route path="/my-projects" element={<Navigate to="/projects" replace />} />
+          <Route path="/my-projects/:id" element={<RedirectProjectDetail />} />
           <Route path="/my-invoices" element={<ProtectedRoute role="client"><MyInvoices /></ProtectedRoute>} />
           <Route path="/new-request" element={<ProtectedRoute role="client"><NewRequest /></ProtectedRoute>} />
           <Route path="/new-project" element={<ProtectedRoute role="client"><NewProject /></ProtectedRoute>} />
@@ -96,6 +125,7 @@ export default function App() {
           <Route path="*" element={<Navigate to="/" replace />} />
         </Routes>
         </Suspense>
+        </ChunkErrorBoundary>
       </BrowserRouter>
     </AuthProvider>
   );
diff --git a/src/components/FileBrowser.jsx b/src/components/FileBrowser.jsx
new file mode 100644
index 0000000..4e551b0
--- /dev/null
+++ b/src/components/FileBrowser.jsx
@@ -0,0 +1,664 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+import LoadingButton from './LoadingButton';
+import { supabase } from '../lib/supabase';
+import { useAuth } from '../context/AuthContext';
+
+function formatBytes(bytes) {
+  const value = Number(bytes || 0);
+  if (!value) return '—';
+  const units = ['B', 'KB', 'MB', 'GB', 'TB'];
+  const index = Math.min(Math.floor(Math.log(value) / Math.log(1024)), units.length - 1);
+  return `${(value / (1024 ** index)).toFixed(index === 0 ? 0 : 1)} ${units[index]}`;
+}
+
+function formatDate(dt) {
+  if (!dt) return '—';
+  return new Date(dt).toLocaleDateString();
+}
+
+function fileIconStyle(ext) {
+  const e = ext.toLowerCase();
+  if (['jpg','jpeg','png','gif','webp','svg','ico','bmp','tiff','avif','heic'].includes(e)) return { bg: '#16a34a', color: '#fff' };
+  if (['mp4','mov','avi','mkv','webm','m4v','wmv','flv'].includes(e)) return { bg: '#7c3aed', color: '#fff' };
+  if (['mp3','wav','ogg','flac','aac','m4a','wma'].includes(e)) return { bg: '#db2777', color: '#fff' };
+  if (e === 'pdf') return { bg: '#dc2626', color: '#fff' };
+  if (['doc','docx','rtf','odt'].includes(e)) return { bg: '#2563eb', color: '#fff' };
+  if (['txt','md'].includes(e)) return { bg: '#64748b', color: '#fff' };
+  if (['xls','xlsx','csv','ods','numbers'].includes(e)) return { bg: '#16a34a', color: '#fff' };
+  if (['ppt','pptx','odp','key'].includes(e)) return { bg: '#ea580c', color: '#fff' };
+  if (['zip','rar','7z','tar','gz','bz2','xz'].includes(e)) return { bg: '#92400e', color: '#fff' };
+  if (['js','ts','jsx','tsx','html','css','scss','json','py','rb','php','java','c','cpp','cs','go','rs'].includes(e)) return { bg: '#0891b2', color: '#fff' };
+  if (['ttf','otf','woff','woff2'].includes(e)) return { bg: '#6b7280', color: '#fff' };
+  if (['ai','eps'].includes(e)) return { bg: '#ff6c00', color: '#fff' };
+  if (['psd','psb'].includes(e)) return { bg: '#001e36', color: '#31a8ff' };
+  if (['indd','idml'].includes(e)) return { bg: '#49021f', color: '#ff3366' };
+  if (['fig','sketch','xd'].includes(e)) return { bg: '#7c3aed', color: '#fff' };
+  return { bg: '#475569', color: '#fff' };
+}
+
+function FileIcon({ entry }) {
+  if (entry.type === 'dir') return <span className="file-icon">📁</span>;
+  const ext = (entry.name.includes('.') ? entry.name.split('.').pop() : '').toUpperCase().slice(0, 4) || 'FILE';
+  const { bg, color } = fileIconStyle(ext);
+  return (
+    <span className="file-icon" style={{ background: bg, color, border: 'none', fontSize: 9, fontWeight: 700, letterSpacing: 0.4, fontFamily: 'monospace' }}>
+      {ext}
+    </span>
+  );
+}
+
+function pathParts(path) {
+  return String(path || '/').split('/').filter(Boolean);
+}
+
+function pathTo(index, parts) {
+  return `/${parts.slice(0, index + 1).join('/')}`;
+}
+
+function encodeFbPath(path) {
+  return path.split('/').map(p => encodeURIComponent(p)).join('/');
+}
+
+function joinVirtualPath(...parts) {
+  return ('/' + parts.join('/')).replace(/\/+/g, '/').replace(/\/$/, '') || '/';
+}
+
+export default function FileBrowser({ initialPath = '/', rootPath = '/', showSync = false }) {
+  const { currentUser } = useAuth();
+  const [currentPath, setCurrentPath] = useState(initialPath);
+  const [entries, setEntries] = useState([]);
+  const [configured, setConfigured] = useState(true);
+  const [parentPath, setParentPath] = useState('/');
+  const [canGoUp, setCanGoUp] = useState(false);
+  const [loading, setLoading] = useState(true);
+  const [working, setWorking] = useState('');
+  const [dragging, setDragging] = useState(false);
+  const [error, setError] = useState('');
+  const [readOnly, setReadOnly] = useState(false);
+  const [folderName, setFolderName] = useState('');
+  const [showFolderInput, setShowFolderInput] = useState(false);
+  const [movingEntry, setMovingEntry] = useState(null);
+  const [renamingEntry, setRenamingEntry] = useState(null);
+  const [renameValue, setRenameValue] = useState('');
+  const [draggedEntry, setDraggedEntry] = useState(null);
+  const [dragOverFolder, setDragOverFolder] = useState(null);
+  const [uploadProgress, setUploadProgress] = useState(null);
+  const fileInputRef = useRef(null);
+  const folderInputRef = useRef(null);
+
+  const breadcrumbs = useMemo(() => pathParts(currentPath), [currentPath]);
+
+  const apiFetch = async (url, options = {}) => {
+    const { data: { session } } = await supabase.auth.getSession();
+    if (!session?.access_token) throw new Error('Your session expired. Please sign in again.');
+
+    const response = await fetch(url, {
+      ...options,
+      headers: {
+        Authorization: `Bearer ${session.access_token}`,
+        ...(options.body instanceof FormData ? {} : { 'Content-Type': 'application/json' }),
+        ...(options.headers || {}),
+      },
+    });
+
+    const data = await response.json().catch(() => ({}));
+    if (!response.ok) throw new Error(data.error || 'File request failed.');
+    return data;
+  };
+
+  const loadFiles = async (path = currentPath) => {
+    setLoading(true);
+    setError('');
+    try {
+      const params = new URLSearchParams({ action: 'list', path });
+      const data = await apiFetch(`/api/filebrowser?${params}`);
+      setConfigured(data.configured !== false);
+      setEntries(data.entries || []);
+      setCurrentPath(data.path || '/');
+      setParentPath(data.parentPath || '/');
+      setCanGoUp(data.canGoUp || false);
+      setReadOnly(data.readOnly || false);
+      if (data.configured === false) setError(data.error || 'FileBrowser is not configured.');
+    } catch (err) {
+      setError(err.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    loadFiles(initialPath);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [initialPath]);
+
+  const openFolder = (entry) => {
+    if (entry.type === 'dir') loadFiles(entry.path);
+  };
+
+  const downloadFile = async (entry) => {
+    setWorking(`download:${entry.path}`);
+    setError('');
+    try {
+      const data = await apiFetch(`/api/filebrowser?action=download&path=${encodeURIComponent(entry.path)}`);
+      if (data.url && data.token) {
+        // Append token as query param for browser direct download
+        const sep = data.url.includes('?') ? '&' : '?';
+        const a = document.createElement('a');
+        a.href = `${data.url}${sep}auth=${encodeURIComponent(data.token)}`;
+        a.download = entry.name;
+        a.target = '_blank';
+        a.rel = 'noopener noreferrer';
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+      }
+    } catch (err) {
+      setError(err.message);
+    } finally {
+      setWorking('');
+    }
+  };
+
+  const deleteEntry = async (entry) => {
+    const kind = entry.type === 'dir' ? 'folder' : 'file';
+    if (!window.confirm(`Delete "${entry.name}" ${kind}? This cannot be undone.`)) return;
+
+    setWorking(`delete:${entry.path}`);
+    setError('');
+    try {
+      await apiFetch(`/api/filebrowser?action=delete&path=${encodeURIComponent(entry.path)}`, {
+        method: 'DELETE',
+      });
+      await loadFiles(currentPath);
+    } catch (err) {
+      setError(err.message);
+    } finally {
+      setWorking('');
+    }
+  };
+
+  const createFolder = async (e) => {
+    e.preventDefault();
+    if (!folderName.trim()) return;
+
+    setWorking('mkdir');
+    setError('');
+    try {
+      await apiFetch('/api/filebrowser?action=mkdir', {
+        method: 'POST',
+        body: JSON.stringify({ path: currentPath, name: folderName }),
+      });
+      setFolderName('');
+      setShowFolderInput(false);
+      await loadFiles(currentPath);
+    } catch (err) {
+      setError(err.message);
+    } finally {
+      setWorking('');
+    }
+  };
+
+  const renameEntry = async (e) => {
+    e.preventDefault();
+    const newName = renameValue.trim();
+    if (!newName || newName === renamingEntry.name) {
+      setRenamingEntry(null);
+      return;
+    }
+
+    setWorking(`rename:${renamingEntry.path}`);
+    setError('');
+    try {
+      await apiFetch('/api/filebrowser?action=rename', {
+        method: 'POST',
+        body: JSON.stringify({ path: renamingEntry.path, name: newName }),
+      });
+      setRenamingEntry(null);
+      await loadFiles(currentPath);
+    } catch (err) {
+      setError(err.message);
+    } finally {
+      setWorking('');
+    }
+  };
+
+  const startRename = (entry) => {
+    setMovingEntry(null);
+    setRenamingEntry(entry);
+    setRenameValue(entry.name);
+  };
+
+  async function uploadOneFile(url, token, fbPath, file, retries = 3) {
+    for (let attempt = 1; attempt <= retries; attempt++) {
+      try {
+        const res = await fetch(`${url}/api/resources?source=files&path=${encodeURIComponent(fbPath)}&override=true`, {
+          method: 'POST',
+          headers: {
+            Authorization: `Bearer ${token}`,
+            'Content-Type': 'application/octet-stream',
+          },
+          body: file,
+        });
+        if (!res.ok) {
+          const text = await res.text();
+          throw new Error(`${text || res.status}`);
+        }
+        return;
+      } catch (e) {
+        if (attempt === retries) throw new Error(`Upload failed for ${file.name} after ${retries} attempts: ${e.message}`);
+        await new Promise(r => setTimeout(r, attempt * 1000));
+      }
+    }
+  }
+
+  async function runConcurrent(tasks, concurrency = 2) {
+    let index = 0;
+    let done = 0;
+    const total = tasks.length;
+    const errors = [];
+    await Promise.all(Array.from({ length: concurrency }, async () => {
+      while (index < total) {
+        const task = tasks[index++];
+        try { await task(); } catch (e) { errors.push(e); }
+        done++;
+        setUploadProgress(Math.round((done / total) * 100));
+      }
+    }));
+    if (errors.length) throw errors[0];
+  }
+
+  // Upload files directly to FileBrowser using admin token
+  const uploadFiles = async (files) => {
+    const selected = Array.from(files || []);
+    if (!selected.length) return;
+
+    setWorking('upload');
+    setUploadProgress(0);
+    setError('');
+    try {
+      const tokenData = await apiFetch('/api/filebrowser?action=upload-token', {
+        method: 'POST',
+        body: JSON.stringify({ path: currentPath }),
+      });
+
+      const { token, url, fbPath } = tokenData;
+      const tasks = selected.map(file => () => uploadOneFile(url, token, joinVirtualPath(fbPath, file.name), file));
+      await runConcurrent(tasks);
+      setUploadProgress(100);
+    } catch (err) {
+      setError(err.message);
+    } finally {
+      setWorking('');
+      setUploadProgress(null);
+      if (fileInputRef.current) fileInputRef.current.value = '';
+      setDragging(false);
+      await loadFiles(currentPath);
+    }
+  };
+
+  const uploadFolder = async (files) => {
+    const selected = Array.from(files || []).filter(f => f.webkitRelativePath);
+    if (!selected.length) return;
+
+    setWorking('upload');
+    setUploadProgress(0);
+    setError('');
+
+    try {
+      const tokenData = await apiFetch('/api/filebrowser?action=upload-token', {
+        method: 'POST',
+        body: JSON.stringify({ path: currentPath }),
+      });
+
+      const { token, url, fbPath } = tokenData;
+
+      // Create directories sequentially shallow-first
+      const dirsNeeded = new Set();
+      for (const file of selected) {
+        const parts = file.webkitRelativePath.split('/').slice(0, -1);
+        for (let i = 1; i <= parts.length; i++) dirsNeeded.add(parts.slice(0, i).join('/'));
+      }
+      const sortedDirs = [...dirsNeeded].sort((a, b) => a.split('/').length - b.split('/').length);
+      for (const dir of sortedDirs) {
+        const dirFbPath = joinVirtualPath(fbPath, dir);
+        await fetch(`${url}/api/resources?source=files&path=${encodeURIComponent(dirFbPath)}&isDir=true`, {
+          method: 'POST',
+          headers: { Authorization: `Bearer ${token}` },
+        }).catch(() => {});
+      }
+
+      // Upload files concurrently
+      const tasks = selected.map(file => () => uploadOneFile(url, token, joinVirtualPath(fbPath, file.webkitRelativePath), file));
+      await runConcurrent(tasks);
+      setUploadProgress(100);
+    } catch (err) {
+      setError(err.message);
+    } finally {
+      setWorking('');
+      setUploadProgress(null);
+      if (folderInputRef.current) folderInputRef.current.value = '';
+      await loadFiles(currentPath);
+    }
+  };
+
+  const moveEntry = async (entry, targetFolderPath) => {
+    setWorking(`move:${entry.path}`);
+    setError('');
+    try {
+      await apiFetch('/api/filebrowser?action=move', {
+        method: 'POST',
+        body: JSON.stringify({ srcPath: entry.path, dstPath: targetFolderPath }),
+      });
+      setMovingEntry(null);
+      await loadFiles(currentPath);
+    } catch (err) {
+      setError(err.message);
+    } finally {
+      setWorking('');
+    }
+  };
+
+  const handleDragEnter = (e) => {
+    e.preventDefault();
+    if (!configured || loading || working || draggedEntry || readOnly) return;
+    setDragging(true);
+  };
+
+  const handleDragOver = (e) => {
+    e.preventDefault();
+    if (!configured || loading || working || draggedEntry || readOnly) return;
+    e.dataTransfer.dropEffect = 'copy';
+    setDragging(true);
+  };
+
+  const handleDragLeave = (e) => {
+    e.preventDefault();
+    if (!e.currentTarget.contains(e.relatedTarget)) setDragging(false);
+  };
+
+  const readFsEntry = (entry) => new Promise((resolve) => {
+    if (entry.isFile) {
+      entry.file(file => {
+        const rel = entry.fullPath.replace(/^\//, '');
+        Object.defineProperty(file, 'webkitRelativePath', { value: rel, writable: false, configurable: true });
+        resolve([file]);
+      });
+    } else if (entry.isDirectory) {
+      const reader = entry.createReader();
+      const readAll = (acc) => reader.readEntries(async (entries) => {
+        if (!entries.length) { resolve(acc); return; }
+        const nested = await Promise.all(entries.map(readFsEntry));
+        readAll([...acc, ...nested.flat()]);
+      });
+      readAll([]);
+    } else {
+      resolve([]);
+    }
+  });
+
+  const handleDrop = async (e) => {
+    e.preventDefault();
+    setDragging(false);
+    if (draggedEntry) return;
+    if (!configured || loading || working) return;
+
+    const items = Array.from(e.dataTransfer.items || []);
+    const fsEntries = items.map(item => item.webkitGetAsEntry?.()).filter(Boolean);
+
+    if (fsEntries.length && fsEntries.some(en => en.isDirectory)) {
+      const allFiles = (await Promise.all(fsEntries.map(readFsEntry))).flat();
+      uploadFolder(allFiles);
+    } else {
+      if (!e.dataTransfer.files?.length) return;
+      uploadFiles(e.dataTransfer.files);
+    }
+  };
+
+  const handleRowDragStart = (e, entry) => {
+    e.stopPropagation();
+    setDraggedEntry(entry);
+    e.dataTransfer.effectAllowed = 'move';
+  };
+
+  const handleRowDragEnd = () => {
+    setDraggedEntry(null);
+    setDragOverFolder(null);
+  };
+
+  const handleFolderDragOver = (e, folder) => {
+    if (!draggedEntry || draggedEntry.path === folder.path) return;
+    e.preventDefault();
+    e.stopPropagation();
+    e.dataTransfer.dropEffect = 'move';
+    setDragOverFolder(folder.path);
+  };
+
+  const handleFolderDragLeave = (e) => {
+    if (!e.currentTarget.contains(e.relatedTarget)) setDragOverFolder(null);
+  };
+
+  const handleFolderDrop = (e, folder) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setDragOverFolder(null);
+    if (!draggedEntry || draggedEntry.path === folder.path) return;
+    const entry = draggedEntry;
+    setDraggedEntry(null);
+    moveEntry(entry, folder.path);
+  };
+
+  return (
+    <section
+      className={`file-browser${dragging ? ' file-browser-dragging' : ''}`}
+      onDragEnter={handleDragEnter}
+      onDragOver={handleDragOver}
+      onDragLeave={handleDragLeave}
+      onDrop={handleDrop}
+    >
+      {(loading || working || uploadProgress !== null) && (
+        <div className="file-browser-progress">
+          <div
+            className={`file-browser-progress-bar${uploadProgress === null ? ' indeterminate' : ''}`}
+            style={uploadProgress !== null ? { width: `${uploadProgress}%` } : undefined}
+          />
+        </div>
+      )}
+
+      {dragging && (
+        <div className="file-drop-overlay">
+          <div className="file-drop-panel">
+            <div className="file-drop-icon">↑</div>
+            <div className="file-drop-title">Drop files to upload</div>
+            <div className="file-drop-subtitle">Files will be added to the current folder.</div>
+          </div>
+        </div>
+      )}
+
+      <div className="file-browser-toolbar">
+        <div className="file-browser-breadcrumbs">
+          <button type="button" onClick={() => loadFiles(rootPath)} className="file-breadcrumb">Files</button>
+          {breadcrumbs.slice(pathParts(rootPath).length).map((part, index) => {
+            const absIndex = pathParts(rootPath).length + index;
+            return (
+              <button type="button" key={`${part}-${absIndex}`} onClick={() => loadFiles(pathTo(absIndex, breadcrumbs))} className="file-breadcrumb">
+                {part}
+              </button>
+            );
+          })}
+        </div>
+
+        <div className="file-browser-actions">
+          {!readOnly && (showFolderInput ? (
+            <form style={{ display: 'flex', gap: 6 }} onSubmit={createFolder}>
+              <input
+                type="text"
+                value={folderName}
+                onChange={(e) => setFolderName(e.target.value)}
+                placeholder="Folder name"
+                autoFocus
+                disabled={!configured || loading || Boolean(working)}
+                style={{ fontSize: 13, padding: '4px 8px', borderRadius: 6, border: '1px solid var(--border)', background: 'var(--input-bg)', color: 'var(--text-primary)', width: 160 }}
+              />
+              <LoadingButton type="submit" className="btn btn-outline btn-sm" loading={working === 'mkdir'} disabled={!folderName.trim() || !configured || loading || Boolean(working)} loadingText="Creating...">
+                Create
+              </LoadingButton>
+              <button type="button" className="btn btn-outline btn-sm" onClick={() => { setShowFolderInput(false); setFolderName(''); }}>Cancel</button>
+            </form>
+          ) : (
+            <button className="btn btn-outline btn-sm" disabled={!configured || loading || Boolean(working)} onClick={() => setShowFolderInput(true)}>
+              + New Folder
+            </button>
+          ))}
+          <LoadingButton className="btn btn-outline btn-sm" loading={loading} disabled={Boolean(working)} loadingText="Refreshing..." onClick={() => loadFiles(currentPath)}>
+            ⟳ Refresh
+          </LoadingButton>
+          {entries.length > 0 && (
+            <LoadingButton className="btn btn-outline btn-sm" loading={working === `download:${currentPath}`} disabled={Boolean(working)} loadingText="Zipping..." onClick={() => downloadFile({ path: currentPath, name: breadcrumbs[breadcrumbs.length - 1] || 'files', type: 'dir' })}>
+              ↓ ZIP
+            </LoadingButton>
+          )}
+          {!readOnly && (
+            <>
+              <input ref={fileInputRef} type="file" multiple className="file-upload-input" onChange={(e) => uploadFiles(e.target.files)} />
+              <input ref={folderInputRef} type="file" className="file-upload-input" onChange={(e) => uploadFolder(e.target.files)} {...{ webkitdirectory: '' }} />
+              <LoadingButton className="btn btn-outline btn-sm" loading={working === 'upload'} disabled={!configured || loading || Boolean(working)} loadingText="Uploading..." onClick={() => folderInputRef.current?.click()}>
+                ↑ Folder
+              </LoadingButton>
+              <LoadingButton className="btn btn-primary btn-sm" loading={working === 'upload'} disabled={!configured || loading || Boolean(working)} loadingText="Uploading..." onClick={() => fileInputRef.current?.click()}>
+                ↑ Files
+              </LoadingButton>
+            </>
+          )}
+        </div>
+      </div>
+
+      {uploadProgress !== null && (
+        <div style={{ padding: '4px 12px', fontSize: 12, color: 'var(--text-muted)' }}>
+          Uploading... {uploadProgress}%
+        </div>
+      )}
+
+      {error && <div className="notification notification-info">{error}</div>}
+
+      {draggedEntry && (
+        <div style={{ padding: '6px 12px', fontSize: 12, color: 'var(--text-muted)' }}>
+          Dragging "{draggedEntry.name}" — drop onto a folder to move it
+        </div>
+      )}
+
+      <div className="file-list">
+        {canGoUp && currentPath !== rootPath && (
+          <button type="button" className="file-row file-row-button" onClick={() => loadFiles(parentPath)} disabled={loading || Boolean(working)}>
+            <span className="file-icon">↰</span>
+            <span className="file-name">Up one folder</span>
+            <span className="file-meta">—</span>
+            <span className="file-meta">—</span>
+            <span />
+          </button>
+        )}
+
+        <div className="file-row file-row-head">
+          <span />
+          <span>Name</span>
+          <span style={{ textAlign: 'right' }}>Size</span>
+          <span style={{ textAlign: 'right' }}>Modified</span>
+          <span />
+        </div>
+
+        {loading ? (
+          <div className="empty-state">Loading files...</div>
+        ) : entries.length === 0 ? (
+          <div className="empty-state">
+            <h3>No files here yet</h3>
+            <p>Upload files or create a folder to start this workspace.</p>
+          </div>
+        ) : entries.map(entry => {
+          const isMoving = movingEntry?.path === entry.path;
+          const isRenaming = renamingEntry?.path === entry.path;
+          const targetFolders = entries.filter(e => e.type === 'dir' && e.path !== entry.path);
+          const isDragTarget = entry.type === 'dir' && draggedEntry && draggedEntry.path !== entry.path;
+          const isDragOver = dragOverFolder === entry.path;
+
+          return (
+            <div
+              className={`file-row${isDragOver ? ' file-row-drag-over' : ''}`}
+              key={`${entry.type}:${entry.path}`}
+              draggable={!working}
+              onDragStart={(e) => handleRowDragStart(e, entry)}
+              onDragEnd={handleRowDragEnd}
+              onDragOver={isDragTarget ? (e) => handleFolderDragOver(e, entry) : undefined}
+              onDragLeave={isDragTarget ? handleFolderDragLeave : undefined}
+              onDrop={isDragTarget ? (e) => handleFolderDrop(e, entry) : undefined}
+              style={isDragOver ? { outline: '2px solid var(--accent)', borderRadius: 6 } : undefined}
+            >
+              <FileIcon entry={entry} />
+              {isRenaming ? (
+                <form style={{ display: 'flex', gap: 6, flex: 1 }} onSubmit={renameEntry}>
+                  <input
+                    type="text"
+                    value={renameValue}
+                    onChange={(e) => setRenameValue(e.target.value)}
+                    autoFocus
+                    disabled={Boolean(working)}
+                    style={{ fontSize: 13, padding: '2px 8px', borderRadius: 6, border: '1px solid var(--border)', background: 'var(--input-bg)', color: 'var(--text-primary)', flex: 1, minWidth: 0 }}
+                    onKeyDown={(e) => { if (e.key === 'Escape') setRenamingEntry(null); }}
+                  />
+                  <LoadingButton type="submit" className="btn btn-outline btn-sm" loading={working === `rename:${entry.path}`} disabled={!renameValue.trim() || Boolean(working)} loadingText="Renaming...">
+                    Save
+                  </LoadingButton>
+                  <button type="button" className="btn btn-outline btn-sm" onClick={() => setRenamingEntry(null)}>Cancel</button>
+                </form>
+              ) : entry.type === 'dir' ? (
+                <button type="button" className="file-name file-name-button" onClick={() => openFolder(entry)} disabled={Boolean(working)}>
+                  {entry.name}
+                </button>
+              ) : (
+                <span className="file-name">{entry.name}</span>
+              )}
+              {!isRenaming && (
+                <>
+                  <span className="file-meta">{formatBytes(entry.size)}</span>
+                  <span className="file-meta">{formatDate(entry.mtime)}</span>
+                  <span className="file-row-actions">
+                    {readOnly ? null : isMoving ? (
+                      <>
+                        <span style={{ fontSize: 11, color: 'var(--text-muted)', whiteSpace: 'nowrap' }}>Move to:</span>
+                        {targetFolders.length === 0 ? (
+                          <span style={{ fontSize: 11, color: 'var(--text-muted)' }}>No folders here</span>
+                        ) : targetFolders.map(folder => (
+                          <LoadingButton
+                            key={folder.path}
+                            className="btn btn-outline btn-sm"
+                            loading={working === `move:${entry.path}`}
+                            disabled={Boolean(working)}
+                            loadingText="Moving..."
+                            onClick={() => moveEntry(entry, folder.path)}
+                          >
+                            {folder.name}
+                          </LoadingButton>
+                        ))}
+                        <button type="button" className="btn btn-outline btn-sm" onClick={() => setMovingEntry(null)} disabled={Boolean(working)}>✕</button>
+                      </>
+                    ) : (
+                      <>
+                        <LoadingButton className="btn-icon" title={entry.type === 'dir' ? 'Download ZIP' : 'Download'} loading={working === `download:${entry.path}`} disabled={Boolean(working)} loadingText="↓" onClick={() => downloadFile(entry)}>
+                          ↓
+                        </LoadingButton>
+                        <button type="button" className="btn-icon" title="Rename" disabled={Boolean(working)} onClick={() => startRename(entry)}>
+                          <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
+                        </button>
+                        <LoadingButton className="btn-icon btn-icon-danger" title="Delete" loading={working === `delete:${entry.path}`} disabled={Boolean(working)} loadingText="…" onClick={() => deleteEntry(entry)}>
+                          ✕
+                        </LoadingButton>
+                      </>
+                    )}
+                  </span>
+                </>
+              )}
+            </div>
+          );
+        })}
+      </div>
+    </section>
+  );
+}
diff --git a/src/components/Layout.jsx b/src/components/Layout.jsx
index 9adb644..ea24724 100755
--- a/src/components/Layout.jsx
+++ b/src/components/Layout.jsx
@@ -3,12 +3,13 @@ import { NavLink, useNavigate, useLocation } from 'react-router-dom';
 import { useAuth } from '../context/AuthContext';
 
 function TeamNav({ onNav }) {
+  const location = useLocation();
+
   const primaryLinks = [
     { to: '/dashboard', label: 'Dashboard' },
     { to: '/requests', label: 'Requests' },
-    { to: '/team-projects', label: 'Projects' },
+    { to: '/projects', label: 'Projects' },
     { to: '/file-sharing', label: 'File Sharing' },
-    { to: '/companies', label: 'Clients & Users' },
   ];
 
   const utilityLinks = [
@@ -18,9 +19,11 @@ function TeamNav({ onNav }) {
     { to: '/brand-book', label: 'Brand Book Maker' },
     { to: '/converters', label: 'Image Converter' },
     { to: '/fourge-passwords', label: 'Fourge Passwords' },
-    { to: '/server-status', label: 'Server Status' },
   ];
 
+  const isCompaniesActive = location.pathname === '/company' && !location.search.includes('tab=users');
+  const isUsersActive = location.pathname === '/company' && location.search.includes('tab=users');
+
   return (
     <div className="sidebar-section">
       {primaryLinks.map(({ to, label }) => (
@@ -37,22 +40,36 @@ function TeamNav({ onNav }) {
           {label}
         </NavLink>
       ))}
+      <NavLink to="/company" onClick={onNav} className={() => `sidebar-link${isCompaniesActive ? ' active' : ''}`}>
+        Companies
+      </NavLink>
+      <NavLink to="/company?tab=users" onClick={onNav} className={() => `sidebar-link${isUsersActive ? ' active' : ''}`}>
+        Users
+      </NavLink>
     </div>
   );
 }
 
 function ClientNav({ onNav }) {
+  const { currentUser } = useAuth();
+  const companies = currentUser?.companies?.length
+    ? currentUser.companies
+    : currentUser?.company ? [currentUser.company] : [];
+  const companyTo = companies.length === 1 ? `/company/${companies[0].id}` : '/company';
+
+  const links = [
+    { to: '/dashboard', label: 'Dashboard' },
+    { to: '/projects', label: 'Projects' },
+    { to: '/requests', label: 'Requests' },
+    { to: '/file-sharing', label: 'File Sharing' },
+    { to: '/my-invoices', label: 'Invoices' },
+    { to: companyTo, label: 'Company' },
+  ];
+
   return (
     <div className="sidebar-section">
-      {[
-        { to: '/my-dashboard', label: 'Dashboard' },
-        { to: '/my-projects', label: 'Projects' },
-        { to: '/my-requests', label: 'Requests' },
-        { to: '/file-sharing', label: 'File Sharing' },
-        { to: '/my-invoices', label: 'Invoices' },
-        { to: '/my-company', label: 'Company' },
-      ].map(({ to, label }) => (
-        <NavLink key={to} to={to} onClick={onNav} className={({ isActive }) => `sidebar-link${isActive ? ' active' : ''}`}>
+      {links.map(({ to, label }) => (
+        <NavLink key={label} to={to} onClick={onNav} className={({ isActive }) => `sidebar-link${isActive ? ' active' : ''}`}>
           {label}
         </NavLink>
       ))}
@@ -63,8 +80,8 @@ function ClientNav({ onNav }) {
 function ExternalNav({ onNav }) {
   const links = [
     { to: '/dashboard', label: 'Dashboard' },
-    { to: '/assigned-requests', label: 'Requests' },
-    { to: '/my-projects-sub', label: 'Projects' },
+    { to: '/requests', label: 'Requests' },
+    { to: '/projects', label: 'Projects' },
     { to: '/my-invoices-sub', label: 'Invoices' },
     { to: '/file-sharing', label: 'File Sharing' },
     { to: '/survey-maker', label: 'Survey Maker' },
diff --git a/src/components/ProtectedRoute.jsx b/src/components/ProtectedRoute.jsx
index 06a51f7..0dd3822 100755
--- a/src/components/ProtectedRoute.jsx
+++ b/src/components/ProtectedRoute.jsx
@@ -7,7 +7,7 @@ export default function ProtectedRoute({ children, role }) {
   if (role) {
     const allowed = Array.isArray(role) ? role : [role];
     if (!allowed.includes(currentUser.role)) {
-      return <Navigate to={currentUser.role === 'client' ? '/my-dashboard' : '/dashboard'} replace />;
+      return <Navigate to="/dashboard" replace />;
     }
   }
   return children;
diff --git a/src/components/SortTh.jsx b/src/components/SortTh.jsx
new file mode 100644
index 0000000..50b9a2d
--- /dev/null
+++ b/src/components/SortTh.jsx
@@ -0,0 +1,14 @@
+export default function SortTh({ col, children, sortKey, sortDir, onSort, style }) {
+  const active = sortKey === col;
+  return (
+    <th
+      onClick={() => onSort(col)}
+      style={{ cursor: 'pointer', userSelect: 'none', whiteSpace: 'nowrap', ...style }}
+    >
+      {children}
+      <span style={{ marginLeft: 4, opacity: active ? 0.85 : 0.2, fontSize: 9 }}>
+        {active ? (sortDir === 'asc' ? '▲' : '▼') : '▲▼'}
+      </span>
+    </th>
+  );
+}
diff --git a/src/context/AuthContext.jsx b/src/context/AuthContext.jsx
index 987cd14..3a3a09f 100755
--- a/src/context/AuthContext.jsx
+++ b/src/context/AuthContext.jsx
@@ -12,20 +12,24 @@ export function AuthProvider({ children }) {
 
   const fetchAndCacheProfile = async (authUser, attempt = 0) => {
     try {
-      const { data, error } = await Promise.race([
-        supabase
-          .from('profiles')
-          .select('*, company:companies(id, name, phone, address)')
-          .eq('id', authUser.id)
-          .single(),
+      const [profileResult, membershipsResult] = await Promise.race([
+        Promise.all([
+          supabase
+            .from('profiles')
+            .select('*, company:companies(id, name, phone, address)')
+            .eq('id', authUser.id)
+            .single(),
+          supabase
+            .from('company_members')
+            .select('company:companies(id, name, phone, address)')
+            .eq('profile_id', authUser.id),
+        ]),
         new Promise((_, reject) => setTimeout(() => reject(new Error('Profile fetch timeout')), 8000)),
       ]);
+
+      const { data, error } = profileResult;
       if (data) {
-        const { data: memberships } = await supabase
-          .from('company_members')
-          .select('company:companies(id, name, phone, address)')
-          .eq('profile_id', authUser.id);
-        const companies = (memberships || [])
+        const companies = ((membershipsResult.data || []))
           .map(membership => membership.company)
           .filter(Boolean);
         if (data.role === 'client' && data.company && !companies.some(company => company.id === data.company.id)) {
diff --git a/src/hooks/useSortable.js b/src/hooks/useSortable.js
new file mode 100644
index 0000000..cc6e24e
--- /dev/null
+++ b/src/hooks/useSortable.js
@@ -0,0 +1,28 @@
+import { useState } from 'react';
+
+export function useSortable(defaultKey = '', defaultDir = 'asc') {
+  const [sortKey, setSortKey] = useState(defaultKey);
+  const [sortDir, setSortDir] = useState(defaultDir);
+
+  const toggle = (key) => {
+    if (sortKey === key) setSortDir(d => d === 'asc' ? 'desc' : 'asc');
+    else { setSortKey(key); setSortDir('asc'); }
+  };
+
+  const sort = (data, getVal) => {
+    if (!sortKey) return data;
+    return [...data].sort((a, b) => {
+      const av = getVal ? getVal(a, sortKey) : a[sortKey];
+      const bv = getVal ? getVal(b, sortKey) : b[sortKey];
+      if (av == null && bv == null) return 0;
+      if (av == null) return 1;
+      if (bv == null) return -1;
+      const cmp = typeof av === 'number' && typeof bv === 'number'
+        ? av - bv
+        : String(av).localeCompare(String(bv), undefined, { numeric: true, sensitivity: 'base' });
+      return sortDir === 'asc' ? cmp : -cmp;
+    });
+  };
+
+  return { sortKey, sortDir, toggle, sort };
+}
diff --git a/src/index.css b/src/index.css
index 15a3ab5..1fc6813 100755
--- a/src/index.css
+++ b/src/index.css
@@ -131,7 +131,7 @@ body {
   top: 0;
   width: 26px;
   height: 26px;
-  border-radius: 20px;
+  border-radius: 4px;
   border: 1px solid #333;
   background: transparent;
   color: var(--sidebar-text);
@@ -161,7 +161,7 @@ body {
 
 .sidebar-link {
   display: flex; align-items: center; gap: 10px;
-  padding: 9px 12px; border-radius: 20px;
+  padding: 9px 12px; border-radius: 4px;
   color: var(--sidebar-text); text-decoration: none;
   font-size: 13px; font-weight: 500;
   transition: background 0.15s, color 0.15s;
@@ -185,7 +185,7 @@ body {
 .sidebar-theme-toggle {
   background: transparent;
   border: 1px solid #333;
-  border-radius: 20px;
+  border-radius: 4px;
   padding: 7px 10px;
   cursor: pointer;
   color: #888;
@@ -615,7 +615,7 @@ body {
 
 .file-row {
   display: grid;
-  grid-template-columns: 34px minmax(260px, 1fr) minmax(90px, 120px) minmax(110px, 140px) minmax(170px, 190px);
+  grid-template-columns: 34px minmax(180px, 2fr) minmax(90px, 120px) minmax(110px, 140px) minmax(220px, 1fr);
   gap: 10px;
   align-items: center;
   width: 100%;
@@ -692,6 +692,7 @@ body {
 .file-meta {
   color: var(--text-secondary);
   font-size: 12px;
+  text-align: right;
 }
 
 .file-row-actions {
@@ -700,6 +701,44 @@ body {
   justify-content: flex-end;
 }
 
+.file-action-btn {
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  justify-content: center;
+  font-size: 14px;
+}
+
+.btn-icon {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 4px 6px;
+  color: var(--text-secondary);
+  display: inline-flex;
+  align-items: center;
+  border-radius: 6px;
+  font-family: inherit;
+  font-size: 17px;
+  line-height: 1;
+  transition: color 0.15s, background 0.15s;
+}
+.btn-icon:hover:not(:disabled) {
+  color: var(--text-primary);
+  background: var(--interactive-row-hover);
+}
+.btn-icon:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+.btn-icon-danger {
+  color: var(--danger);
+}
+.btn-icon-danger:hover:not(:disabled) {
+  color: var(--danger);
+  background: var(--interactive-row-hover);
+}
+
 .file-drop-overlay {
   position: absolute;
   inset: 0;
@@ -764,7 +803,7 @@ body {
   }
 
   .file-row {
-    grid-template-columns: 34px minmax(220px, 1fr) 90px 110px 170px;
+    grid-template-columns: 34px minmax(150px, 2fr) 90px 110px minmax(170px, 1fr);
     min-width: 700px;
   }
 }
@@ -772,7 +811,7 @@ body {
 /* Buttons */
 .btn {
   display: inline-flex; align-items: center; gap: 6px;
-  padding: 9px 18px; border-radius: 20px; font-size: 13px;
+  padding: 9px 18px; border-radius: 4px; font-size: 13px;
   font-weight: 600; cursor: pointer; border: 1px solid transparent;
   transition: all 0.15s; text-decoration: none; white-space: nowrap;
   font-family: inherit; line-height: 1;
@@ -998,6 +1037,17 @@ select option { background: #222; color: #fff; }
   color: var(--text-muted);
 }
 .request-toolbar-card { margin-bottom: 24px; }
+.filter-select {
+  padding: 6px 10px;
+  border-radius: 4px;
+  border: 1px solid var(--border);
+  background: var(--card-bg);
+  color: var(--text);
+  font-size: 13px;
+  cursor: pointer;
+  width: 25%;
+  min-width: 120px;
+}
 .request-toolbar-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
@@ -1258,7 +1308,7 @@ select option { background: #222; color: #fff; }
 /* Tab bar */
 .tab-btn {
   padding: 6px 14px;
-  border-radius: 20px;
+  border-radius: 4px;
   border: 1px solid var(--border);
   background: transparent;
   color: var(--text-muted);
diff --git a/src/lib/filebrowserFolders.js b/src/lib/filebrowserFolders.js
new file mode 100644
index 0000000..1bf78a8
--- /dev/null
+++ b/src/lib/filebrowserFolders.js
@@ -0,0 +1,86 @@
+import { supabase } from './supabase';
+
+async function fbCall(method, action, body = null) {
+  const { data: { session } } = await supabase.auth.getSession();
+  if (!session?.access_token) return;
+
+  await fetch(`/api/filebrowser?action=${action}`, {
+    method,
+    headers: {
+      Authorization: `Bearer ${session.access_token}`,
+      'Content-Type': 'application/json',
+    },
+    body: body ? JSON.stringify(body) : undefined,
+  }).catch(() => {});
+}
+
+// Create /Clients/{name}/ folder. Silently fails if already exists.
+export async function createClientFolder(companyName) {
+  if (!companyName) return;
+  // Ensure /Clients dir exists first
+  await fbCall('POST', 'mkdir', { path: '/', name: 'Clients' });
+  await fbCall('POST', 'mkdir', { path: '/Clients', name: companyName });
+}
+
+// Rename /Clients/{oldName} → /Clients/{newName}
+export async function renameClientFolder(oldName, newName) {
+  if (!oldName || !newName || oldName === newName) return;
+  await fbCall('POST', 'rename', { path: `/Clients/${oldName}`, name: newName });
+}
+
+// Upload files to Clients/{company}/Projects/{project}/{task}/Request Info/ in FileBrowser.
+// Best-effort — call with .catch(() => {}) so failures don't block submission.
+export async function uploadFilesToRequestInfo(files, projectName, taskTitle, versionNumber = 0) {
+  if (!files?.length || !projectName || !taskTitle) return;
+  const { data: { session } } = await supabase.auth.getSession();
+  if (!session?.access_token) return;
+  const authHeader = `Bearer ${session.access_token}`;
+
+  const revFolder = `R${String(versionNumber).padStart(2, '0')}`;
+
+  // Ensure folder hierarchy exists (mkdir is idempotent)
+  const segments = [
+    { path: '/', name: 'Projects' },
+    { path: '/Projects', name: projectName },
+    { path: `/Projects/${projectName}`, name: taskTitle },
+    { path: `/Projects/${projectName}/${taskTitle}`, name: 'Request Info' },
+    { path: `/Projects/${projectName}/${taskTitle}/Request Info`, name: revFolder },
+  ];
+  for (const seg of segments) {
+    await fetch('/api/filebrowser?action=mkdir', {
+      method: 'POST',
+      headers: { Authorization: authHeader, 'Content-Type': 'application/json' },
+      body: JSON.stringify({ path: seg.path, name: seg.name }),
+    }).catch(() => {});
+  }
+
+  // Get upload token for R## folder
+  const virtualPath = `/Projects/${projectName}/${taskTitle}/Request Info/${revFolder}`;
+  const tokenRes = await fetch('/api/filebrowser?action=upload-token', {
+    method: 'POST',
+    headers: { Authorization: authHeader, 'Content-Type': 'application/json' },
+    body: JSON.stringify({ path: virtualPath }),
+  }).catch(() => null);
+  if (!tokenRes?.ok) return;
+
+  const { token, url, fbPath } = await tokenRes.json();
+  if (!token || !url || !fbPath) return;
+
+  for (const file of files) {
+    await fetch(`${url}/api/resources?source=files&path=${encodeURIComponent(`${fbPath}/${file.name}`)}&override=true`, {
+      method: 'POST',
+      headers: { Authorization: `Bearer ${token}`, 'Content-Type': file.type || 'application/octet-stream' },
+      body: file,
+    }).catch(() => {});
+  }
+}
+
+// Create missing /Clients/{name}/ folders for all companies. Run on create/rename only.
+export async function backfillClientFolders() {
+  const { data } = await supabase.from('companies').select('name');
+  if (!data?.length) return;
+  await fbCall('POST', 'mkdir', { path: '/', name: 'Clients' });
+  for (const company of data) {
+    if (company.name) await fbCall('POST', 'mkdir', { path: '/Clients', name: company.name });
+  }
+}
diff --git a/src/lib/seafileFolders.js b/src/lib/seafileFolders.js
deleted file mode 100644
index a946da7..0000000
--- a/src/lib/seafileFolders.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import { supabase } from './supabase';
-
-export async function syncSeafileFolders() {
-  const { data: { session } } = await supabase.auth.getSession();
-  if (!session?.access_token) return { skipped: true };
-
-  const response = await fetch('/api/seafile?action=sync-folders', {
-    method: 'POST',
-    headers: {
-      Authorization: `Bearer ${session.access_token}`,
-      'Content-Type': 'application/json',
-    },
-    body: JSON.stringify({}),
-  });
-
-  const data = await response.json().catch(() => ({}));
-  if (!response.ok) throw new Error(data.error || 'Failed to sync Seafile folders.');
-  return data;
-}
diff --git a/src/pages/CompaniesPage.jsx b/src/pages/CompaniesPage.jsx
new file mode 100644
index 0000000..e7c9fd9
--- /dev/null
+++ b/src/pages/CompaniesPage.jsx
@@ -0,0 +1,691 @@
+import { useState, useEffect } from 'react';
+import { useNavigate, useSearchParams } from 'react-router-dom';
+import Layout from '../components/Layout';
+import SortTh from '../components/SortTh';
+import { useSortable } from '../hooks/useSortable';
+import { supabase } from '../lib/supabase';
+import { useAuth } from '../context/AuthContext';
+import { deleteCompanyData } from '../lib/deleteHelpers';
+import { readPageCache, writePageCache } from '../lib/pageCache';
+import { createClientFolder, backfillClientFolders } from '../lib/filebrowserFolders';
+
+// ── Team view ─────────────────────────────────────────────────────────────────
+
+function TeamCompanies() {
+  const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
+  const tab = searchParams.get('tab') || 'companies';
+  const cached = readPageCache('team_companies');
+  const [companies, setCompanies] = useState(() => cached?.companies || []);
+  const [profiles, setProfiles] = useState(() => cached?.profiles || []);
+  const [companyMemberships, setCompanyMemberships] = useState(() => cached?.companyMemberships || []);
+  const [loading, setLoading] = useState(() => !cached);
+  const [showNew, setShowNew] = useState(false);
+  const [newForm, setNewForm] = useState({ name: '', phone: '', address: '' });
+  const [showNewUser, setShowNewUser] = useState(false);
+  const [userForm, setUserForm] = useState({ name: '', email: '', password: '', company_id: '', role: 'client' });
+  const [saving, setSaving] = useState(false);
+  const [userError, setUserError] = useState('');
+  const [editingUserId, setEditingUserId] = useState(null);
+  const [editUserVal, setEditUserVal] = useState('');
+  const [deletingUserId, setDeletingUserId] = useState(null);
+  const [filterCompany, setFilterCompany] = useState('');
+  const { sortKey: coSortKey, sortDir: coSortDir, toggle: coToggle, sort: coSort } = useSortable('name');
+  const { sortKey: clSortKey, sortDir: clSortDir, toggle: clToggle, sort: clSort } = useSortable('name');
+  const { sortKey: subSortKey, sortDir: subSortDir, toggle: subToggle, sort: subSort } = useSortable('name');
+
+  async function load() {
+    const [{ data: co }, { data: prof }, { data: memberships }] = await Promise.all([
+      supabase.from('companies').select('*').order('name'),
+      supabase.from('profiles').select('id, name, email, company_id, role').in('role', ['client', 'external']).order('name'),
+      supabase.from('company_members').select('company_id, profile_id'),
+    ]);
+    setCompanies(co || []);
+    setProfiles(prof || []);
+    setCompanyMemberships(memberships || []);
+    writePageCache('team_companies', { companies: co || [], profiles: prof || [], companyMemberships: memberships || [] });
+    setLoading(false);
+  }
+
+  useEffect(() => { load(); }, []);
+
+  const handleCreate = async (e) => {
+    e.preventDefault();
+    if (!newForm.name.trim()) return;
+    setSaving(true);
+    const { data } = await supabase.from('companies').insert({
+      name: newForm.name.trim(),
+      phone: newForm.phone.trim(),
+      address: newForm.address.trim(),
+    }).select().single();
+    setSaving(false);
+    if (data) {
+      createClientFolder(data.name).catch(() => {});
+      backfillClientFolders().catch(() => {});
+      setShowNew(false);
+      setNewForm({ name: '', phone: '', address: '' });
+      navigate(`/company/${data.id}`);
+    }
+  };
+
+  const handleDeleteCompany = async (company) => {
+    if (!window.confirm(`Delete "${company.name}"? This will permanently delete all projects, jobs, files, and data for this company. This cannot be undone.`)) return;
+    await deleteCompanyData(company.id);
+    setCompanies(prev => prev.filter(c => c.id !== company.id));
+    load();
+  };
+
+  const handleEditUserSave = async (userId) => {
+    if (!editUserVal.trim()) return;
+    await supabase.from('profiles').update({ name: editUserVal.trim() }).eq('id', userId);
+    setProfiles(prev => prev.map(u => u.id === userId ? { ...u, name: editUserVal.trim() } : u));
+    setEditingUserId(null);
+  };
+
+  const handleDeleteUser = async (user) => {
+    if (!window.confirm(`Delete "${user.name}"? This will permanently remove their account. This cannot be undone.`)) return;
+    setDeletingUserId(user.id);
+    const { data, error } = await supabase.functions.invoke('delete-user', { body: { user_id: user.id } });
+    const errBody = error?.context ? await error.context.json().catch(() => null) : null;
+    const errMsg = errBody?.error || data?.error || error?.message;
+    if (errMsg) { alert(`Failed to delete user: ${errMsg}`); setDeletingUserId(null); return; }
+    setProfiles(prev => prev.filter(u => u.id !== user.id));
+    setDeletingUserId(null);
+  };
+
+  const handleCreateUser = async (e) => {
+    e.preventDefault();
+    setUserError('');
+    setSaving(true);
+    const { data, error } = await supabase.functions.invoke('create-user', {
+      body: {
+        name: userForm.name.trim(),
+        email: userForm.email.trim(),
+        password: userForm.password,
+        role: userForm.role,
+        company_id: userForm.role === 'client' ? (userForm.company_id || null) : null,
+      },
+    });
+    setSaving(false);
+    const errBody = error?.context ? await error.context.json().catch(() => null) : null;
+    const errMsg = errBody?.error || data?.error || error?.message;
+    if (errMsg) { setUserError(errMsg); return; }
+    setShowNewUser(false);
+    setUserForm({ name: '', email: '', password: '', company_id: '', role: 'client' });
+    load();
+  };
+
+  if (loading) return <Layout><p style={{ padding: 24, color: 'var(--text-muted)' }}>Loading...</p></Layout>;
+
+  const getProfileCompanyIds = (profile) => {
+    const ids = new Set(
+      companyMemberships
+        .filter(m => m.profile_id === profile.id && profile.role === 'client')
+        .map(m => m.company_id)
+    );
+    if (profile.role === 'client' && profile.company_id) ids.add(profile.company_id);
+    return [...ids];
+  };
+
+  const clientProfiles = profiles.filter(p => p.role === 'client');
+  const subcontractors = profiles.filter(p => p.role === 'external');
+  const unassigned = clientProfiles.filter(p => getProfileCompanyIds(p).length === 0);
+  const editPen = <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>;
+
+  return (
+    <Layout>
+      <div className="page-header">
+        <div>
+          <div className="page-title">{tab === 'users' ? 'Users' : 'Companies'}</div>
+          <div className="page-subtitle">
+            {tab === 'users' ? (
+              <>
+                {clientProfiles.length} client user{clientProfiles.length !== 1 ? 's' : ''}
+                <span style={{ marginLeft: 10 }}>· {subcontractors.length} subcontractor{subcontractors.length !== 1 ? 's' : ''}</span>
+                {unassigned.length > 0 && (
+                  <span style={{ marginLeft: 10, color: 'var(--danger)', fontWeight: 600 }}>
+                    · {unassigned.length} unassigned
+                  </span>
+                )}
+              </>
+            ) : (
+              <>{companies.length} {companies.length !== 1 ? 'companies' : 'company'}</>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* Clients (companies) — only on companies tab */}
+      {tab === 'companies' && <>
+      {/* Clients (companies) */}
+      <div className="card" style={{ marginBottom: 24 }}>
+        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16 }}>
+          <div className="card-title" style={{ marginBottom: 0 }}>Clients</div>
+          <button className="btn btn-primary btn-sm" onClick={() => { setShowNew(v => !v); setShowNewUser(false); }}>+ New Client</button>
+        </div>
+        {showNew && (
+          <div style={{ marginBottom: 20, padding: 16, background: 'var(--bg)', borderRadius: 8, border: '1px solid var(--border)' }}>
+            <form onSubmit={handleCreate}>
+              <div className="form-group">
+                <label>Company Name *</label>
+                <input type="text" placeholder="Acme Corp" value={newForm.name}
+                  onChange={e => setNewForm(f => ({ ...f, name: e.target.value }))} required autoFocus />
+              </div>
+              <div className="grid-2">
+                <div className="form-group">
+                  <label>Phone</label>
+                  <input type="text" placeholder="+1 (555) 000-0000" value={newForm.phone}
+                    onChange={e => setNewForm(f => ({ ...f, phone: e.target.value }))} />
+                </div>
+                <div className="form-group">
+                  <label>Address</label>
+                  <input type="text" placeholder="123 Main St, City, State" value={newForm.address}
+                    onChange={e => setNewForm(f => ({ ...f, address: e.target.value }))} />
+                </div>
+              </div>
+              <div className="action-buttons">
+                <button type="submit" className="btn btn-primary" disabled={saving || !newForm.name.trim()}>
+                  {saving ? 'Creating...' : 'Create Client'}
+                </button>
+                <button type="button" className="btn btn-outline" onClick={() => setShowNew(false)}>Cancel</button>
+              </div>
+            </form>
+          </div>
+        )}
+        {companies.length === 0 ? (
+          <div style={{ padding: '20px 0', textAlign: 'center', color: 'var(--text-muted)' }}>No clients yet.</div>
+        ) : (
+          <div className="table-wrapper">
+            <table>
+              <thead>
+                <tr>
+                  <SortTh col="name" sortKey={coSortKey} sortDir={coSortDir} onSort={coToggle}>Company</SortTh>
+                  <SortTh col="clients" sortKey={coSortKey} sortDir={coSortDir} onSort={coToggle}>Users</SortTh>
+                  <SortTh col="phone" sortKey={coSortKey} sortDir={coSortDir} onSort={coToggle}>Phone</SortTh>
+                  <SortTh col="address" sortKey={coSortKey} sortDir={coSortDir} onSort={coToggle}>Address</SortTh>
+                  <th style={{ width: 1, whiteSpace: 'nowrap' }}>Actions</th>
+                </tr>
+              </thead>
+              <tbody>
+                {coSort(companies, (company, key) => {
+                  if (key === 'clients') return clientProfiles.filter(p => getProfileCompanyIds(p).includes(company.id)).length;
+                  return company[key] || '';
+                }).map(company => {
+                  const companyProfiles = clientProfiles.filter(p => getProfileCompanyIds(p).includes(company.id));
+                  return (
+                    <tr key={company.id} onClick={() => navigate(`/company/${company.id}`)} style={{ cursor: 'pointer' }}>
+                      <td style={{ fontWeight: 600 }}>{company.name}</td>
+                      <td>{companyProfiles.length}</td>
+                      <td>{company.phone || '—'}</td>
+                      <td>{company.address || '—'}</td>
+                      <td onClick={e => e.stopPropagation()}>
+                        <button className="btn-icon btn-icon-danger" title="Delete Company"
+                          onClick={() => handleDeleteCompany(company)}>✕</button>
+                      </td>
+                    </tr>
+                  );
+                })}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </div>
+      </>}
+
+      {/* Users — only on users tab */}
+      {tab === 'users' && <>
+      <div className="card" style={{ marginBottom: 24 }}>
+        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16 }}>
+          <div className="card-title" style={{ marginBottom: 0 }}>Users</div>
+          <button className="btn btn-primary btn-sm" onClick={() => { setShowNewUser(v => !v); setShowNew(false); setUserForm(f => ({ ...f, role: 'client' })); }}>
+            + New User
+          </button>
+        </div>
+        {showNewUser && userForm.role === 'client' && (
+          <div style={{ marginBottom: 20, padding: 16, background: 'var(--bg)', borderRadius: 8, border: '1px solid var(--border)' }}>
+            <form onSubmit={handleCreateUser}>
+              <div className="grid-2">
+                <div className="form-group">
+                  <label>Full Name *</label>
+                  <input type="text" placeholder="Jane Smith" value={userForm.name}
+                    onChange={e => setUserForm(f => ({ ...f, name: e.target.value }))} required autoFocus />
+                </div>
+                <div className="form-group">
+                  <label>Email *</label>
+                  <input type="email" placeholder="jane@acme.com" value={userForm.email}
+                    onChange={e => setUserForm(f => ({ ...f, email: e.target.value }))} required />
+                </div>
+              </div>
+              <div className="grid-2">
+                <div className="form-group">
+                  <label>Password *</label>
+                  <input type="password" placeholder="Temporary password" value={userForm.password}
+                    onChange={e => setUserForm(f => ({ ...f, password: e.target.value }))} required minLength={6} />
+                </div>
+                <div className="form-group">
+                  <label>Assign to Company</label>
+                  <select value={userForm.company_id} onChange={e => setUserForm(f => ({ ...f, company_id: e.target.value }))}>
+                    <option value="">No company yet</option>
+                    {companies.map(c => <option key={c.id} value={c.id}>{c.name}</option>)}
+                  </select>
+                </div>
+              </div>
+              {userError && <p style={{ fontSize: 13, color: 'var(--danger)', marginBottom: 12 }}>{userError}</p>}
+              <div className="action-buttons">
+                <button type="submit" className="btn btn-primary" disabled={saving}>{saving ? 'Creating...' : 'Create User'}</button>
+                <button type="button" className="btn btn-outline" onClick={() => setShowNewUser(false)}>Cancel</button>
+              </div>
+            </form>
+          </div>
+        )}
+        {unassigned.length > 0 && (
+          <div style={{ marginBottom: 16, padding: 14, background: 'rgba(var(--danger-rgb, 220,38,38),0.06)', borderRadius: 8, border: '1px solid var(--danger)' }}>
+            <div style={{ fontSize: 12, fontWeight: 600, color: 'var(--danger)', marginBottom: 8 }}>Unassigned ({unassigned.length})</div>
+            <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
+              {unassigned.map(user => (
+                <div key={user.id} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '8px 12px', background: 'var(--card-bg)', borderRadius: 6, border: '1px solid var(--border)' }}>
+                  <div style={{ flex: 1 }}>
+                    {editingUserId === user.id ? (
+                      <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
+                        <input type="text" value={editUserVal} onChange={e => setEditUserVal(e.target.value)} autoFocus
+                          style={{ margin: 0, fontSize: 13, padding: '3px 8px', width: 180 }}
+                          onKeyDown={e => { if (e.key === 'Enter') handleEditUserSave(user.id); if (e.key === 'Escape') setEditingUserId(null); }} />
+                        <button className="btn btn-primary btn-sm" onClick={() => handleEditUserSave(user.id)}>Save</button>
+                        <button className="btn btn-outline btn-sm" onClick={() => setEditingUserId(null)}>Cancel</button>
+                      </div>
+                    ) : (
+                      <>
+                        <div style={{ fontWeight: 600, fontSize: 13 }}>{user.name}</div>
+                        <div style={{ fontSize: 12, color: 'var(--text-muted)' }}>{user.email}</div>
+                      </>
+                    )}
+                  </div>
+                  {editingUserId !== user.id && (
+                    <div style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
+                      <button className="btn-icon" title="Edit" onClick={() => { setEditingUserId(user.id); setEditUserVal(user.name); }}>{editPen}</button>
+                      <button className="btn-icon btn-icon-danger" title="Delete" onClick={() => handleDeleteUser(user)} disabled={deletingUserId === user.id}>
+                        {deletingUserId === user.id ? '...' : '✕'}
+                      </button>
+                    </div>
+                  )}
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+        {clientProfiles.length === 0 ? (
+          <div style={{ padding: '20px 0', textAlign: 'center', color: 'var(--text-muted)' }}>No users yet.</div>
+        ) : (
+          <div className="table-wrapper">
+            <table>
+              <thead>
+                <tr>
+                  <SortTh col="name" sortKey={clSortKey} sortDir={clSortDir} onSort={clToggle}>Name</SortTh>
+                  <SortTh col="email" sortKey={clSortKey} sortDir={clSortDir} onSort={clToggle}>Email</SortTh>
+                  <SortTh col="company" sortKey={clSortKey} sortDir={clSortDir} onSort={clToggle}>Company</SortTh>
+                  <th style={{ width: 1, whiteSpace: 'nowrap' }}>Actions</th>
+                </tr>
+              </thead>
+              <tbody>
+                {clSort(
+                  clientProfiles,
+                  (user, key) => {
+                    if (key === 'company') return getProfileCompanyIds(user).map(id => companies.find(c => c.id === id)?.name).filter(Boolean).join(', ');
+                    return user[key] || '';
+                  }
+                ).map(user => {
+                  const companyNames = getProfileCompanyIds(user).map(id => companies.find(c => c.id === id)?.name).filter(Boolean);
+                  return (
+                    <tr key={user.id}>
+                      <td style={{ fontWeight: 600 }}>
+                        {editingUserId === user.id ? (
+                          <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
+                            <input type="text" value={editUserVal} onChange={e => setEditUserVal(e.target.value)} autoFocus
+                              style={{ margin: 0, fontSize: 13, padding: '3px 8px', width: 180 }}
+                              onKeyDown={e => { if (e.key === 'Enter') handleEditUserSave(user.id); if (e.key === 'Escape') setEditingUserId(null); }} />
+                            <button className="btn btn-primary btn-sm" onClick={() => handleEditUserSave(user.id)}>Save</button>
+                            <button className="btn btn-outline btn-sm" onClick={() => setEditingUserId(null)}>Cancel</button>
+                          </div>
+                        ) : (user.name || '—')}
+                      </td>
+                      <td>{user.email || '—'}</td>
+                      <td>{companyNames.length ? companyNames.join(', ') : '—'}</td>
+                      <td>
+                        {editingUserId !== user.id && (
+                          <div style={{ display: 'flex', gap: 6, justifyContent: 'flex-end', flexWrap: 'nowrap' }}>
+                            <button className="btn-icon" title="Edit" onClick={() => { setEditingUserId(user.id); setEditUserVal(user.name || ''); }}>{editPen}</button>
+                            <button className="btn-icon btn-icon-danger" title="Delete" onClick={() => handleDeleteUser(user)} disabled={deletingUserId === user.id}>
+                              {deletingUserId === user.id ? '...' : '✕'}
+                            </button>
+                          </div>
+                        )}
+                      </td>
+                    </tr>
+                  );
+                })}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </div>
+
+      {/* Subcontractors */}
+      <div className="card" style={{ marginBottom: 24 }}>
+        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16 }}>
+          <div className="card-title" style={{ marginBottom: 0 }}>Subcontractors</div>
+          <button className="btn btn-primary btn-sm" onClick={() => { setShowNewUser(v => !v); setShowNew(false); setUserForm(f => ({ ...f, role: 'external', company_id: '' })); }}>
+            + New Subcontractor
+          </button>
+        </div>
+        {showNewUser && userForm.role === 'external' && (
+          <div style={{ marginBottom: 20, padding: 16, background: 'var(--bg)', borderRadius: 8, border: '1px solid var(--border)' }}>
+            <form onSubmit={handleCreateUser}>
+              <div className="grid-2">
+                <div className="form-group">
+                  <label>Full Name *</label>
+                  <input type="text" placeholder="Jane Smith" value={userForm.name}
+                    onChange={e => setUserForm(f => ({ ...f, name: e.target.value }))} required autoFocus />
+                </div>
+                <div className="form-group">
+                  <label>Email *</label>
+                  <input type="email" placeholder="jane@acme.com" value={userForm.email}
+                    onChange={e => setUserForm(f => ({ ...f, email: e.target.value }))} required />
+                </div>
+              </div>
+              <div className="form-group" style={{ maxWidth: 260 }}>
+                <label>Password *</label>
+                <input type="password" placeholder="Temporary password" value={userForm.password}
+                  onChange={e => setUserForm(f => ({ ...f, password: e.target.value }))} required minLength={6} />
+              </div>
+              {userError && <p style={{ fontSize: 13, color: 'var(--danger)', marginBottom: 12 }}>{userError}</p>}
+              <div className="action-buttons">
+                <button type="submit" className="btn btn-primary" disabled={saving}>{saving ? 'Creating...' : 'Create Subcontractor'}</button>
+                <button type="button" className="btn btn-outline" onClick={() => setShowNewUser(false)}>Cancel</button>
+              </div>
+            </form>
+          </div>
+        )}
+        {subcontractors.length === 0 ? (
+          <div style={{ padding: '20px 0', textAlign: 'center', color: 'var(--text-muted)' }}>No subcontractors yet.</div>
+        ) : (
+          <div className="table-wrapper">
+            <table>
+              <thead>
+                <tr>
+                  <SortTh col="name" sortKey={subSortKey} sortDir={subSortDir} onSort={subToggle}>Name</SortTh>
+                  <SortTh col="email" sortKey={subSortKey} sortDir={subSortDir} onSort={subToggle}>Email</SortTh>
+                  <th style={{ width: 1, whiteSpace: 'nowrap' }}>Actions</th>
+                </tr>
+              </thead>
+              <tbody>
+                {subSort(subcontractors, (u, key) => u[key] || '').map(user => (
+                  <tr key={user.id}>
+                    <td style={{ fontWeight: 600 }}>
+                      {editingUserId === user.id ? (
+                        <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
+                          <input type="text" value={editUserVal} onChange={e => setEditUserVal(e.target.value)} autoFocus
+                            style={{ margin: 0, fontSize: 13, padding: '3px 8px', width: 180 }}
+                            onKeyDown={e => { if (e.key === 'Enter') handleEditUserSave(user.id); if (e.key === 'Escape') setEditingUserId(null); }} />
+                          <button className="btn btn-primary btn-sm" onClick={() => handleEditUserSave(user.id)}>Save</button>
+                          <button className="btn btn-outline btn-sm" onClick={() => setEditingUserId(null)}>Cancel</button>
+                        </div>
+                      ) : (user.name || '—')}
+                    </td>
+                    <td>{user.email || '—'}</td>
+                    <td>
+                      {editingUserId !== user.id && (
+                        <div style={{ display: 'flex', gap: 6, justifyContent: 'flex-end', flexWrap: 'nowrap' }}>
+                          <button className="btn-icon" title="Edit" onClick={() => { setEditingUserId(user.id); setEditUserVal(user.name || ''); }}>{editPen}</button>
+                          <button className="btn-icon btn-icon-danger" title="Delete" onClick={() => handleDeleteUser(user)} disabled={deletingUserId === user.id}>
+                            {deletingUserId === user.id ? '...' : '✕'}
+                          </button>
+                        </div>
+                      )}
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </div>
+      </>}
+    </Layout>
+  );
+}
+
+// ── Client view (2+ companies — same list UI, filtered) ───────────────────────
+
+function ClientCompanyList() {
+  const { currentUser } = useAuth();
+  const navigate = useNavigate();
+  const companies = currentUser?.companies || [];
+  const { sortKey, sortDir, toggle, sort } = useSortable('name');
+
+  return (
+    <Layout>
+      <div className="page-header">
+        <div>
+          <div className="page-title">Companies</div>
+          <div className="page-subtitle">{companies.length} {companies.length !== 1 ? 'companies' : 'company'}</div>
+        </div>
+      </div>
+      <div className="card">
+        {companies.length === 0 ? (
+          <div style={{ padding: '20px 0', textAlign: 'center', color: 'var(--text-muted)' }}>No companies linked to your account.</div>
+        ) : (
+          <div className="table-wrapper">
+            <table>
+              <thead>
+                <tr>
+                  <SortTh col="name" sortKey={sortKey} sortDir={sortDir} onSort={toggle}>Company</SortTh>
+                  <SortTh col="phone" sortKey={sortKey} sortDir={sortDir} onSort={toggle}>Phone</SortTh>
+                  <SortTh col="address" sortKey={sortKey} sortDir={sortDir} onSort={toggle}>Address</SortTh>
+                </tr>
+              </thead>
+              <tbody>
+                {sort(companies, (c, key) => c[key] || '').map(company => (
+                  <tr key={company.id} onClick={() => navigate(`/company/${company.id}`)} style={{ cursor: 'pointer' }}>
+                    <td style={{ fontWeight: 600 }}>{company.name}</td>
+                    <td>{company.phone || '—'}</td>
+                    <td>{company.address || '—'}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </div>
+    </Layout>
+  );
+}
+
+// ── (removed old ClientCompanies dropdown — kept for reference only) ──────────
+
+function _UnusedClientCompanies() {
+  const { currentUser } = useAuth();
+  const companies = currentUser?.companies || [];
+  const [selectedId, setSelectedId] = useState(companies[0]?.id || null);
+  const company = companies.find(c => c.id === selectedId) || companies[0] || null;
+
+  const [members, setMembers] = useState([]);
+  const [loading, setLoading] = useState(!!company?.id);
+  const [editing, setEditing] = useState(false);
+  const [form, setForm] = useState({ name: company?.name || '', phone: company?.phone || '', address: company?.address || '' });
+  const [saving, setSaving] = useState(false);
+
+  useEffect(() => {
+    if (!company?.id) return;
+    setForm({ name: company.name || '', phone: company.phone || '', address: company.address || '' });
+    setEditing(false);
+    setLoading(true);
+    async function load() {
+      const [{ data: primaryMembers }, { data: memberRows }] = await Promise.all([
+        supabase.from('profiles').select('id, name, email').eq('company_id', company.id).in('role', ['client', 'external']),
+        supabase.from('company_members').select('profile:profiles(id, name, email)').eq('company_id', company.id),
+      ]);
+      const memberMap = new Map();
+      (primaryMembers || []).forEach(m => memberMap.set(m.id, m));
+      (memberRows || []).forEach(row => { if (row.profile) memberMap.set(row.profile.id, row.profile); });
+      setMembers([...memberMap.values()]);
+      setLoading(false);
+    }
+    load();
+  }, [company?.id]);
+
+  const handleSave = async (e) => {
+    e.preventDefault();
+    setSaving(true);
+    const { error } = await supabase.from('companies').update({
+      name: form.name.trim(),
+      phone: form.phone.trim(),
+      address: form.address.trim(),
+    }).eq('id', company.id);
+    setSaving(false);
+    if (error) { alert('Failed to save. Please try again.'); return; }
+    setEditing(false);
+  };
+
+  if (!company) return (
+    <Layout>
+      <div className="page-header"><div className="page-title">My Company</div></div>
+      <p style={{ color: 'var(--text-muted)' }}>No company linked to your account.</p>
+    </Layout>
+  );
+
+  if (loading) return <Layout><p style={{ padding: 24, color: 'var(--text-muted)' }}>Loading...</p></Layout>;
+
+  const companyDetails = [
+    { label: 'Company Name', value: form.name || company.name || '—' },
+    { label: 'Phone', value: company.phone || '—' },
+    { label: 'Address', value: company.address || '—' },
+    { label: 'Members', value: String(members.length) },
+  ];
+
+  return (
+    <Layout>
+      <div className="page-header">
+        <div>
+          {companies.length > 1 ? (
+            <div style={{ marginBottom: 4 }}>
+              <select
+                value={selectedId}
+                onChange={e => setSelectedId(e.target.value)}
+                style={{
+                  fontSize: 22, fontWeight: 700, background: 'var(--card-bg)',
+                  border: '1px solid var(--border)', borderRadius: 6,
+                  color: 'var(--text-primary)', cursor: 'pointer',
+                  padding: '4px 8px', fontFamily: 'inherit',
+                }}
+              >
+                {companies.map(c => <option key={c.id} value={c.id}>{c.name}</option>)}
+              </select>
+            </div>
+          ) : (
+            <div className="page-title">{form.name || company.name}</div>
+          )}
+          <div className="page-subtitle">
+            {[company.phone, company.address].filter(Boolean).join(' · ') || 'No contact info on file'}
+          </div>
+        </div>
+        {!editing && (
+          <button className="btn btn-outline" onClick={() => setEditing(true)}>Edit Info</button>
+        )}
+      </div>
+
+      <div className="stats-grid" style={{ marginBottom: 24 }}>
+        {companyDetails.map(detail => (
+          <div key={detail.label} className={`stat-card${detail.label === 'Members' ? ' stat-card-highlight' : ''}`}>
+            <div className="stat-value" style={{ fontSize: detail.label === 'Members' ? 28 : 18 }}>{detail.value}</div>
+            <div className="stat-label">{detail.label}</div>
+          </div>
+        ))}
+      </div>
+
+      {editing && (
+        <div className="card" style={{ marginBottom: 24, maxWidth: 520 }}>
+          <div className="card-title">Edit Company Info</div>
+          <form onSubmit={handleSave}>
+            <div className="form-group">
+              <label>Company Name *</label>
+              <input type="text" value={form.name} onChange={e => setForm(f => ({ ...f, name: e.target.value }))} required />
+            </div>
+            <div className="grid-2">
+              <div className="form-group">
+                <label>Phone</label>
+                <input type="text" placeholder="+1 (555) 000-0000" value={form.phone}
+                  onChange={e => setForm(f => ({ ...f, phone: e.target.value }))} />
+              </div>
+              <div className="form-group">
+                <label>Address</label>
+                <input type="text" placeholder="123 Main St, City, State" value={form.address}
+                  onChange={e => setForm(f => ({ ...f, address: e.target.value }))} />
+              </div>
+            </div>
+            <div className="action-buttons">
+              <button type="submit" className="btn btn-primary" disabled={saving || !form.name.trim()}>
+                {saving ? 'Saving...' : 'Save Changes'}
+              </button>
+              <button type="button" className="btn btn-outline" onClick={() => {
+                setEditing(false);
+                setForm({ name: company.name || '', phone: company.phone || '', address: company.address || '' });
+              }}>Cancel</button>
+            </div>
+          </form>
+        </div>
+      )}
+
+      <div className="card">
+        <div className="card-title">People</div>
+        {members.length === 0 ? (
+          <p style={{ fontSize: 13, color: 'var(--text-muted)' }}>No members found.</p>
+        ) : (
+          <div style={{ display: 'flex', flexDirection: 'column' }}>
+            {members.map((member, i) => (
+              <div key={member.id} style={{
+                display: 'flex', alignItems: 'center', gap: 12, padding: '12px 0',
+                borderBottom: i < members.length - 1 ? '1px solid var(--border)' : 'none',
+              }}>
+                <div style={{
+                  width: 36, height: 36, borderRadius: 6, background: 'var(--accent)',
+                  display: 'flex', alignItems: 'center', justifyContent: 'center',
+                  fontSize: 13, fontWeight: 700, color: '#111', flexShrink: 0,
+                }}>
+                  {member.name?.split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2)}
+                </div>
+                <div>
+                  <div style={{ fontWeight: 600, fontSize: 14, color: 'var(--text-primary)' }}>
+                    {member.name}
+                    {member.id === currentUser.id && (
+                      <span style={{ marginLeft: 8, fontSize: 11, color: 'var(--accent)', fontWeight: 500 }}>You</span>
+                    )}
+                  </div>
+                  <div style={{ fontSize: 12, color: 'var(--text-muted)' }}>{member.email || '—'}</div>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </Layout>
+  );
+}
+
+// ── Entry point ───────────────────────────────────────────────────────────────
+
+export default function CompaniesPage() {
+  const { currentUser } = useAuth();
+  const navigate = useNavigate();
+  const companies = currentUser?.companies || [];
+
+  if (currentUser?.role === 'team') return <TeamCompanies />;
+
+  // Client: 1 company → redirect straight to profile
+  if (companies.length === 1) {
+    navigate(`/company/${companies[0].id}`, { replace: true });
+    return null;
+  }
+
+  // Client: 2+ companies → filtered list
+  return <ClientCompanyList />;
+}
diff --git a/src/pages/DashboardPage.jsx b/src/pages/DashboardPage.jsx
new file mode 100644
index 0000000..79a6500
--- /dev/null
+++ b/src/pages/DashboardPage.jsx
@@ -0,0 +1,585 @@
+import { useState, useEffect } from 'react';
+import { Link } from 'react-router-dom';
+import Layout from '../components/Layout';
+import StatusBadge from '../components/StatusBadge';
+import { supabase } from '../lib/supabase';
+import { useAuth } from '../context/AuthContext';
+import { readPageCache, writePageCache } from '../lib/pageCache';
+import { withTimeout } from '../lib/withTimeout';
+import { getDeadlineSourceSubmission } from '../lib/taskDeadlines';
+import { formatDateOnly, parseDateOnly } from '../lib/dates';
+
+// ─── Team / External helpers ───────────────────────────────────────────────
+
+function getDeadlineMeta(value) {
+  const date = parseDateOnly(value);
+  if (!date) return null;
+  const today = new Date();
+  today.setHours(0, 0, 0, 0);
+  const diffDays = Math.round((date.getTime() - today.getTime()) / (1000 * 60 * 60 * 24));
+  if (diffDays < 0) return { label: `${Math.abs(diffDays)} day${Math.abs(diffDays) === 1 ? '' : 's'} overdue`, color: 'var(--danger)' };
+  if (diffDays === 0) return { label: 'Due today', color: '#f97316' };
+  if (diffDays === 1) return { label: 'Due tomorrow', color: '#f5a523' };
+  return { label: `Due in ${diffDays} days`, color: 'var(--text-muted)' };
+}
+
+function TaskListCard({ title, subtitle, tasks, projects, emptyMessage }) {
+  return (
+    <div className="card">
+      <div className="card-title" style={{ marginBottom: 6 }}>{title}</div>
+      {subtitle && <div style={{ fontSize: 12, color: 'var(--text-muted)', marginBottom: 14 }}>{subtitle}</div>}
+      {tasks.length === 0 ? (
+        <div style={{ color: 'var(--text-muted)', fontSize: 13 }}>{emptyMessage}</div>
+      ) : (
+        <div style={{ display: 'grid', gap: 10 }}>
+          {tasks.map(task => {
+            const project = projects.find(p => p.id === task.project_id);
+            const deadlineMeta = getDeadlineMeta(task.deadline);
+            return (
+              <Link
+                key={task.id}
+                to={`/requests/${task.id}`}
+                className="interactive-row"
+                style={{ border: '1px solid var(--border)', borderRadius: 8, padding: '12px 14px', textDecoration: 'none', display: 'grid', gap: 6 }}
+              >
+                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
+                  <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--text-primary)' }}>{task.title}</div>
+                  <StatusBadge status={task.status} />
+                </div>
+                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, flexWrap: 'wrap' }}>
+                  <div style={{ fontSize: 12, color: 'var(--text-muted)' }}>
+                    {project?.name || 'No project'}{task.assigned_name ? ` · ${task.assigned_name}` : ''}
+                  </div>
+                  <div style={{ fontSize: 12, color: deadlineMeta?.color || 'var(--text-muted)', fontWeight: deadlineMeta ? 600 : 500 }}>
+                    {formatDateOnly(task.deadline, 'No deadline')}
+                    {deadlineMeta ? ` · ${deadlineMeta.label}` : ''}
+                  </div>
+                </div>
+              </Link>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function CompanyGroup({ company, tasks, projects }) {
+  const [open, setOpen] = useState(true);
+  return (
+    <div className="interactive-surface" style={{ marginBottom: 10, border: '1px solid var(--border)', borderRadius: 8, overflow: 'hidden', background: 'var(--card-bg)' }}>
+      <button
+        className="interactive-panel-toggle"
+        onClick={() => setOpen(o => !o)}
+        style={{ width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '10px 14px', background: 'var(--card-bg-2)', border: 'none', cursor: 'pointer', borderBottom: open ? '1px solid var(--border)' : 'none', fontFamily: 'inherit' }}
+      >
+        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+          <span style={{ fontSize: 13, fontWeight: 700, color: 'var(--text-primary)' }}>{company.name}</span>
+          <span style={{ fontSize: 11, fontWeight: 600, padding: '1px 7px', borderRadius: 20, background: 'var(--accent)', color: '#1a1a1a' }}>{tasks.length}</span>
+        </div>
+        <span style={{ fontSize: 12, color: 'var(--text-muted)' }}>{open ? '▲' : '▼'}</span>
+      </button>
+      {open && (
+        <div>
+          {tasks.map(task => {
+            const project = projects.find(p => p.id === task.project_id);
+            return (
+              <Link key={task.id} to={`/requests/${task.id}`} className="interactive-row" style={{ padding: '10px 14px', borderBottom: '1px solid var(--border)', display: 'flex', flexDirection: 'column', gap: 4, textDecoration: 'none', cursor: 'pointer' }}>
+                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+                  <span style={{ fontSize: 13, fontWeight: 600, color: 'var(--text-primary)' }}>
+                    {task.title} <span style={{ fontWeight: 400, color: 'var(--text-muted)' }}>{'R' + String(task.current_version || 0).padStart(2, '0')}</span>
+                  </span>
+                  <StatusBadge status={task.status} />
+                </div>
+                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                  <span style={{ fontSize: 11, color: 'var(--text-secondary)' }}>{project?.name}</span>
+                  <span style={{ fontSize: 11, color: task.assigned_name ? 'var(--text-secondary)' : 'var(--text-muted)' }}>{task.assigned_name || 'Unassigned'}</span>
+                </div>
+              </Link>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function ProjectGroup({ project, tasks }) {
+  const [open, setOpen] = useState(true);
+  return (
+    <div className="interactive-surface" style={{ marginBottom: 10, border: '1px solid var(--border)', borderRadius: 8, overflow: 'hidden', background: 'var(--card-bg)' }}>
+      <button
+        className="interactive-panel-toggle"
+        onClick={() => setOpen(o => !o)}
+        style={{ width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '10px 14px', background: 'var(--card-bg-2)', border: 'none', cursor: 'pointer', borderBottom: open ? '1px solid var(--border)' : 'none', fontFamily: 'inherit' }}
+      >
+        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+          <span style={{ fontSize: 13, fontWeight: 700, color: 'var(--text-primary)' }}>{project.name}</span>
+          <span style={{ fontSize: 11, fontWeight: 600, padding: '1px 7px', borderRadius: 20, background: 'var(--accent)', color: '#1a1a1a' }}>{tasks.length}</span>
+        </div>
+        <span style={{ fontSize: 12, color: 'var(--text-muted)' }}>{open ? '▲' : '▼'}</span>
+      </button>
+      {open && (
+        <div>
+          {tasks.map(task => (
+            <a key={task.id} href={`/requests/${task.id}`} className="interactive-row" style={{ padding: '10px 14px', borderBottom: '1px solid var(--border)', display: 'flex', alignItems: 'center', justifyContent: 'space-between', textDecoration: 'none' }}>
+              <span style={{ fontSize: 13, fontWeight: 600, color: 'var(--text-primary)' }}>
+                {task.title} <span style={{ fontWeight: 400, color: 'var(--text-muted)' }}>{'R' + String(task.current_version || 0).padStart(2, '0')}</span>
+              </span>
+              <StatusBadge status={task.status} />
+            </a>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function OutputCharts({ title, subtitle, taskPeople, revisionPeople }) {
+  const taskRows = [...(taskPeople || [])].sort((a, b) => b.total - a.total || a.name.localeCompare(b.name));
+  const revisionRows = [...(revisionPeople || [])].sort((a, b) => b.revisions - a.revisions || a.name.localeCompare(b.name));
+  const hasData = taskRows.length > 0 || revisionRows.length > 0;
+  const chartColors = ['#F5A523', '#60A5FA', '#4ADE80', '#F87171', '#C084FC', '#FBBF24', '#22C55E', '#38BDF8'];
+  const totalTasks = taskRows.reduce((sum, p) => sum + p.total, 0);
+  const totalRevisions = revisionRows.reduce((sum, p) => sum + p.revisions, 0);
+  const taskGradient = taskRows.length
+    ? `conic-gradient(${taskRows.map((p, i) => { const start = (taskRows.slice(0, i).reduce((s, x) => s + x.total, 0) / Math.max(totalTasks, 1)) * 100; const end = (taskRows.slice(0, i + 1).reduce((s, x) => s + x.total, 0) / Math.max(totalTasks, 1)) * 100; return `${chartColors[i % chartColors.length]} ${start}% ${end}%`; }).join(', ')})`
+    : 'none';
+  const revisionGradient = totalRevisions > 0
+    ? `conic-gradient(${revisionRows.map((p, i) => { const start = (revisionRows.slice(0, i).reduce((s, x) => s + x.revisions, 0) / totalRevisions) * 100; const end = (revisionRows.slice(0, i + 1).reduce((s, x) => s + x.revisions, 0) / totalRevisions) * 100; return `${chartColors[i % chartColors.length]} ${start}% ${end}%`; }).join(', ')})`
+    : 'none';
+  return (
+    <div className="card">
+      <div className="card-title" style={{ marginBottom: 6 }}>{title}</div>
+      <div style={{ fontSize: 12, color: 'var(--text-muted)', marginBottom: 14 }}>{subtitle}</div>
+      {!hasData ? (
+        <div style={{ color: 'var(--text-muted)', fontSize: 13 }}>No completed assigned tasks yet.</div>
+      ) : (
+        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 18 }}>
+          {[
+            { title: 'New Tasks', total: totalTasks, rows: taskRows, valueKey: 'total', gradient: taskGradient },
+            { title: 'Revisions', total: totalRevisions, rows: revisionRows, valueKey: 'revisions', gradient: revisionGradient },
+          ].map(chart => (
+            <div key={chart.title} style={{ border: '1px solid var(--border)', borderRadius: 8, padding: 16, background: 'var(--card-bg-2)' }}>
+              <div style={{ display: 'grid', gridTemplateColumns: '140px minmax(0, 1fr)', gap: 18, alignItems: 'center' }}>
+                <div className="dashboard-pie-wrap">
+                  <div className="dashboard-pie" style={{ background: chart.gradient }}>
+                    <div className="dashboard-pie-center">
+                      <strong>{chart.total}</strong>
+                      <span>{chart.title}</span>
+                    </div>
+                  </div>
+                </div>
+                <div className="dashboard-legend">
+                  {chart.rows.map((person, index) => {
+                    const value = person[chart.valueKey];
+                    const percent = chart.total ? Math.round((value / chart.total) * 100) : 0;
+                    return (
+                      <div key={`${chart.title}-${person.name}`} className="dashboard-legend-item">
+                        <span className="dashboard-legend-dot" style={{ background: chartColors[index % chartColors.length] }} />
+                        <span style={{ minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{person.name}</span>
+                        <strong>{value} · {percent}%</strong>
+                      </div>
+                    );
+                  })}
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function buildTaskPeople(tasks) {
+  const completed = tasks.filter(t => t.status === 'client_approved' && t.assigned_name);
+  return [...completed.reduce((map, t) => {
+    const entry = map.get(t.assigned_name) || { name: t.assigned_name, total: 0 };
+    entry.total += 1;
+    map.set(t.assigned_name, entry);
+    return map;
+  }, new Map()).values()];
+}
+
+function buildRevisionPeople(submissions, tasks, roleFilter) {
+  return [...(submissions || []).reduce((map, sub) => {
+    if ((sub.version_number || 0) <= 0) return map;
+    if (!sub.delivery?.sent_by) return map;
+    if (roleFilter && sub.delivery_sender_role !== roleFilter) return map;
+    if (!roleFilter && sub.delivery_sender_role === 'external') return map;
+    const entry = map.get(sub.delivery.sent_by) || { name: sub.delivery.sent_by, revisions: 0 };
+    entry.revisions += 1;
+    map.set(sub.delivery.sent_by, entry);
+    return map;
+  }, new Map()).values()];
+}
+
+function SubcontractorRates({ externals }) {
+  const [rates, setRates] = useState(() => Object.fromEntries(externals.map(p => [p.id, String(p.brand_book_rate ?? 60)])));
+  const [saving, setSaving] = useState('');
+  const [saved, setSaved] = useState('');
+  const handleSave = async (profile) => {
+    const rate = parseFloat(rates[profile.id]);
+    if (isNaN(rate) || rate < 0) return;
+    setSaving(profile.id);
+    await supabase.from('profiles').update({ brand_book_rate: rate }).eq('id', profile.id);
+    setSaving('');
+    setSaved(profile.id);
+    setTimeout(() => setSaved(s => s === profile.id ? '' : s), 2000);
+  };
+  if (externals.length === 0) return null;
+  return (
+    <div className="card" style={{ marginTop: 24 }}>
+      <div className="card-title" style={{ marginBottom: 4 }}>Subcontractor Rates</div>
+      <div style={{ fontSize: 12, color: 'var(--text-muted)', marginBottom: 16 }}>Brand book rate per completed task, used to calculate invoices.</div>
+      <div style={{ display: 'grid', gap: 10 }}>
+        {externals.map(profile => (
+          <div key={profile.id} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '10px 14px', border: '1px solid var(--border)', borderRadius: 8, background: 'var(--card-bg-2)' }}>
+            <div style={{ flex: 1, fontSize: 13, fontWeight: 600, color: 'var(--text-primary)' }}>{profile.name || profile.email}</div>
+            <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
+              <span style={{ fontSize: 12, color: 'var(--text-muted)' }}>$/task</span>
+              <input type="number" min="0" step="0.01" value={rates[profile.id] ?? '60'} onChange={e => setRates(r => ({ ...r, [profile.id]: e.target.value }))} style={{ width: 80, fontSize: 13, padding: '4px 8px', borderRadius: 6, border: '1px solid var(--border)', background: 'var(--input-bg)', color: 'var(--text-primary)', textAlign: 'right' }} />
+              <button className="btn btn-outline btn-sm" disabled={saving === profile.id} onClick={() => handleSave(profile)}>
+                {saving === profile.id ? 'Saving...' : saved === profile.id ? '✓ Saved' : 'Save'}
+              </button>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function ExternalDashboard({ currentUser, projects, tasks, pos }) {
+  const activeTasks = tasks.filter(t => t.status !== 'client_approved');
+  const completedTasks = tasks.filter(t => t.status === 'client_approved');
+  const unpaidAmount = pos.filter(p => !['paid', 'cancelled'].includes(p.status)).reduce((s, p) => s + Number(p.amount || 0), 0);
+  const paidAmount = pos.filter(p => p.status === 'paid').reduce((s, p) => s + Number(p.amount || 0), 0);
+  return (
+    <Layout>
+      <div className="page-header">
+        <div>
+          <div className="page-title">Welcome back, {currentUser?.name?.split(' ')[0]}</div>
+          <div className="page-subtitle">Your assigned projects.</div>
+        </div>
+      </div>
+      <div className="stats-grid" style={{ marginBottom: 24 }}>
+        <div className="stat-card stat-card-highlight">
+          <div className="stat-value">{activeTasks.length}</div>
+          <div className="stat-label">Active Tasks</div>
+        </div>
+        <div className="stat-card">
+          <div className="stat-value">{completedTasks.length}</div>
+          <div className="stat-label">Completed Tasks</div>
+        </div>
+        <div className="stat-card">
+          <div className="stat-value" style={{ color: unpaidAmount > 0 ? 'var(--accent)' : undefined }}>${unpaidAmount.toFixed(2)}</div>
+          <div className="stat-label">Unpaid Invoices</div>
+        </div>
+        <div className="stat-card">
+          <div className="stat-value">${paidAmount.toFixed(2)}</div>
+          <div className="stat-label">Paid Invoices</div>
+        </div>
+      </div>
+      {projects.length === 0 ? (
+        <div className="empty-state">
+          <div className="empty-state-icon">📋</div>
+          <h3>No projects assigned yet</h3>
+          <p>Your team lead will assign you to projects.</p>
+        </div>
+      ) : (
+        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
+          <div>
+            <div className="card-title">Active Jobs</div>
+            {activeTasks.length === 0 ? (
+              <div style={{ padding: '24px 16px', textAlign: 'center', color: 'var(--text-muted)', fontSize: 13, background: 'var(--card-bg)', borderRadius: 8, border: '1px solid var(--border)' }}>No active jobs</div>
+            ) : projects.map(project => {
+              const projectTasks = activeTasks.filter(t => t.project_id === project.id);
+              if (projectTasks.length === 0) return null;
+              return <ProjectGroup key={project.id} project={project} tasks={projectTasks} />;
+            })}
+          </div>
+          <div>
+            <div className="card-title">Completed</div>
+            {completedTasks.length === 0 ? (
+              <div style={{ padding: '24px 16px', textAlign: 'center', color: 'var(--text-muted)', fontSize: 13, background: 'var(--card-bg)', borderRadius: 8, border: '1px solid var(--border)' }}>No completed jobs yet</div>
+            ) : projects.map(project => {
+              const projectTasks = completedTasks.filter(t => t.project_id === project.id);
+              if (projectTasks.length === 0) return null;
+              return <ProjectGroup key={project.id} project={project} tasks={projectTasks} />;
+            })}
+          </div>
+        </div>
+      )}
+    </Layout>
+  );
+}
+
+// ─── Client helpers ────────────────────────────────────────────────────────
+
+function ClientTaskRow({ task, project }) {
+  return (
+    <Link
+      to={`/requests/${task.id}`}
+      className="interactive-row"
+      style={{ display: 'flex', flexDirection: 'column', gap: 4, padding: '10px 14px', borderBottom: '1px solid var(--border)', textDecoration: 'none', cursor: 'pointer' }}
+    >
+      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
+        <span style={{ fontSize: 13, fontWeight: 600, color: 'var(--text-primary)' }}>{task.title}</span>
+        <StatusBadge status={task.status} />
+      </div>
+      <span style={{ fontSize: 11, color: 'var(--text-muted)' }}>{project?.name || '—'}</span>
+    </Link>
+  );
+}
+
+function ClientTaskColumn({ title, tasks, projects, emptyMessage }) {
+  return (
+    <div className="card" style={{ padding: 0, overflow: 'hidden' }}>
+      <div style={{ padding: '12px 14px', borderBottom: tasks.length > 0 ? '1px solid var(--border)' : 'none', background: 'var(--card-bg-2)' }}>
+        <span style={{ fontSize: 13, fontWeight: 700, color: 'var(--text-primary)' }}>{title}</span>
+        {tasks.length > 0 && (
+          <span style={{ marginLeft: 8, fontSize: 11, fontWeight: 600, padding: '1px 7px', borderRadius: 20, background: 'var(--accent)', color: '#1a1a1a' }}>{tasks.length}</span>
+        )}
+      </div>
+      {tasks.length === 0 ? (
+        <div style={{ padding: '14px', fontSize: 13, color: 'var(--text-muted)' }}>{emptyMessage}</div>
+      ) : tasks.map(task => (
+        <ClientTaskRow key={task.id} task={task} project={projects.find(p => p.id === task.project_id)} />
+      ))}
+    </div>
+  );
+}
+
+// ─── Main export ───────────────────────────────────────────────────────────
+
+export default function DashboardPage() {
+  const { currentUser } = useAuth();
+  const isClient = currentUser?.role === 'client';
+  const isExternal = currentUser?.role === 'external';
+
+  // ── Client state ──────────────────────────────────────────────────────
+  const hasCompany = Boolean(currentUser?.company_id || currentUser?.company?.id || currentUser?.companies?.length);
+  const companies = isClient
+    ? (currentUser?.companies?.length ? currentUser.companies : (currentUser?.company ? [currentUser.company] : [])).slice().sort((a, b) => a.name.localeCompare(b.name))
+    : [];
+  const [activeCompanyId, setActiveCompanyId] = useState(companies[0]?.id || null);
+  const [allClientTasks, setAllClientTasks] = useState([]);
+  const [allClientProjects, setAllClientProjects] = useState([]);
+  const [allClientInvoices, setAllClientInvoices] = useState([]);
+
+  // ── Team/External state ───────────────────────────────────────────────
+  const cacheKey = isExternal ? 'team_dashboard_external' : 'team_dashboard';
+  const cached = !isClient ? readPageCache(cacheKey, 5 * 60_000) : null;
+  const [tasks, setTasks] = useState(() => cached?.tasks || []);
+  const [projects, setProjects] = useState(() => cached?.projects || []);
+  const [submissions, setSubmissions] = useState(() => cached?.submissions || []);
+  const [pos, setPos] = useState(() => cached?.pos || []);
+  const [externalProfiles, setExternalProfiles] = useState(() => cached?.externalProfiles || []);
+
+  const [loading, setLoading] = useState(() => isClient ? hasCompany : !cached);
+
+  useEffect(() => {
+    if (isClient) {
+      if (!hasCompany) { setLoading(false); return; }
+      async function loadClient() {
+        try {
+          const [{ data: activeTasks }, { data: invoices }] = await withTimeout(Promise.all([
+            supabase.from('tasks').select('id, title, status, project_id').in('status', ['client_review', 'in_progress', 'on_hold', 'not_started']).order('submitted_at', { ascending: false }),
+            supabase.from('invoices').select('total, status, company_id').eq('status', 'sent'),
+          ]), 12000, 'Client dashboard load');
+          const clientTasks = activeTasks || [];
+          setAllClientTasks(clientTasks);
+          setAllClientInvoices(invoices || []);
+          if (clientTasks.length > 0) {
+            const projectIds = [...new Set(clientTasks.map(t => t.project_id).filter(Boolean))];
+            const { data: proj } = await supabase.from('projects').select('id, name, company_id').in('id', projectIds);
+            setAllClientProjects(proj || []);
+          }
+        } catch (error) {
+          console.error('ClientDashboard load failed:', error);
+        } finally {
+          setLoading(false);
+        }
+      }
+      loadClient();
+    } else {
+      async function loadTeam() {
+        try {
+          if (isExternal) {
+            const [{ data: p }, { data: t }, { data: posData }] = await withTimeout(Promise.all([
+              supabase.from('projects').select('id, name').order('created_at', { ascending: false }),
+              supabase.from('tasks').select('id, title, status, current_version, project_id').order('submitted_at', { ascending: false }),
+              supabase.from('subcontractor_payments').select('id, amount, status').eq('profile_id', currentUser.id),
+            ]), 12000, 'Dashboard load');
+            setProjects(p || []);
+            setTasks(t || []);
+            setPos(posData || []);
+            setSubmissions([]);
+            writePageCache(cacheKey, { projects: p || [], tasks: t || [], submissions: [], pos: posData || [], externalProfiles: [] });
+          } else {
+            const [{ data: t }, { data: p }, { data: subs }, { data: profiles }] = await withTimeout(Promise.all([
+              supabase.from('tasks').select('id, title, status, current_version, project_id, assigned_name, assigned_to, completed_at').order('submitted_at', { ascending: false }),
+              supabase.from('projects').select('id, name, status, company_id'),
+              supabase.from('submissions').select('task_id, version_number, deadline, type, submitted_by, submitted_by_name, delivery:deliveries(sent_by, sent_at)').order('version_number', { ascending: false }),
+              supabase.from('profiles').select('id, role, name, email, brand_book_rate'),
+            ]), 12000, 'Dashboard load');
+            const roleById = new Map((profiles || []).map(pr => [pr.id, pr.role]));
+            const roleByName = new Map((profiles || []).map(pr => [pr.name, pr.role]));
+            const tasksWithDeadlines = (t || []).map(task => ({
+              ...task,
+              deadline: getDeadlineSourceSubmission(task, subs)?.deadline || null,
+              assignee_role: roleById.get(task.assigned_to) || null,
+            }));
+            const subsWithRole = (subs || []).map(sub => ({
+              ...sub,
+              submitter_role: roleById.get(sub.submitted_by) || null,
+              delivery_sender_role: roleByName.get(sub.delivery?.sent_by) || null,
+            }));
+            const externals = (profiles || []).filter(pr => pr.role === 'external');
+            setTasks(tasksWithDeadlines);
+            setProjects(p || []);
+            setExternalProfiles(externals);
+            writePageCache(cacheKey, { tasks: tasksWithDeadlines, projects: p || [], submissions: subsWithRole, pos: [], externalProfiles: externals });
+            setSubmissions(subsWithRole);
+          }
+        } catch (error) {
+          console.error('Dashboard load failed:', error);
+        }
+        setLoading(false);
+      }
+      loadTeam();
+    }
+  }, [isClient, isExternal, hasCompany, cacheKey]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  if (loading) return <Layout><p style={{ padding: 24, color: 'var(--text-muted)' }}>Loading...</p></Layout>;
+
+  // ── Client render ──────────────────────────────────────────────────────
+  if (isClient) {
+    const filterByCompany = (clientTasks) => {
+      if (companies.length <= 1 || !activeCompanyId) return clientTasks;
+      return clientTasks.filter(t => {
+        const proj = allClientProjects.find(p => p.id === t.project_id);
+        return proj?.company_id === activeCompanyId;
+      });
+    };
+    const visibleTasks = filterByCompany(allClientTasks);
+    const visibleProjects = companies.length <= 1 ? allClientProjects : allClientProjects.filter(p => p.company_id === activeCompanyId);
+    const visibleInvoices = companies.length <= 1 || !activeCompanyId ? allClientInvoices : allClientInvoices.filter(i => i.company_id === activeCompanyId);
+    const reviewTasks = visibleTasks.filter(t => t.status === 'client_review');
+    const inProgressTasks = visibleTasks.filter(t => ['in_progress', 'on_hold', 'not_started'].includes(t.status));
+    const outstandingInvoices = visibleInvoices.reduce((sum, inv) => sum + Number(inv.total || 0), 0);
+
+    return (
+      <Layout>
+        <div className="page-header">
+          <div>
+            <div className="page-title">Welcome back, {currentUser?.name?.split(' ')[0]}</div>
+            <div className="page-subtitle">Track active work and the items that need your attention.</div>
+          </div>
+          <Link to="/new-request" className="btn btn-primary">+ New Request</Link>
+        </div>
+        <div className="stats-grid">
+          <div className="stat-card stat-card-highlight">
+            <div className="stat-value" style={{ color: reviewTasks.length > 0 ? 'var(--accent)' : undefined }}>{reviewTasks.length}</div>
+            <div className="stat-label">Awaiting Review</div>
+          </div>
+          <div className="stat-card">
+            <div className="stat-value">{inProgressTasks.filter(t => ['in_progress', 'on_hold'].includes(t.status)).length}</div>
+            <div className="stat-label">In Progress</div>
+          </div>
+          <div className="stat-card">
+            <div className="stat-value">{inProgressTasks.filter(t => t.status === 'not_started').length}</div>
+            <div className="stat-label">Not Started</div>
+          </div>
+          <div className="stat-card">
+            <div className="stat-value" style={{ fontSize: 22 }}>${outstandingInvoices.toFixed(2)}</div>
+            <div className="stat-label">Outstanding Invoices</div>
+          </div>
+        </div>
+        {companies.length > 1 && (
+          <div style={{ marginTop: 20, marginBottom: 4, display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap' }} className="card-title">
+            {companies.map((company, index) => (
+              <span key={company.id} style={{ display: 'inline-flex', alignItems: 'center', gap: 10 }}>
+                {index > 0 && <span style={{ color: 'var(--text-muted)' }}>|</span>}
+                <button type="button" onClick={() => setActiveCompanyId(company.id)} style={{ background: 'none', border: 'none', padding: 0, margin: 0, cursor: 'pointer', font: 'inherit', textTransform: 'inherit', letterSpacing: 'inherit', color: activeCompanyId === company.id ? 'var(--text-primary)' : 'var(--text-muted)' }}>
+                  {company.name}
+                </button>
+              </span>
+            ))}
+          </div>
+        )}
+        <div className="grid-2" style={{ marginTop: 16 }}>
+          <ClientTaskColumn title="Awaiting Your Review" tasks={reviewTasks} projects={visibleProjects} emptyMessage="No items need your review." />
+          <ClientTaskColumn title="In Progress" tasks={inProgressTasks} projects={visibleProjects} emptyMessage="No items currently in progress." />
+        </div>
+      </Layout>
+    );
+  }
+
+  // ── External render ────────────────────────────────────────────────────
+  if (isExternal) {
+    return <ExternalDashboard currentUser={currentUser} projects={projects} tasks={tasks} pos={pos} />;
+  }
+
+  // ── Team render ────────────────────────────────────────────────────────
+  const activeTasks = tasks.filter(t => t.status !== 'client_approved');
+  const inProgressTasks = tasks.filter(t => t.status === 'in_progress');
+  const notStartedTasks = tasks.filter(t => t.status === 'not_started');
+  const onHoldTasks = tasks.filter(t => t.status === 'on_hold');
+  const reviewTasks = tasks.filter(t => t.status === 'client_review');
+  const upcomingDeadlineTasks = [...tasks].filter(t => t.deadline && t.status !== 'client_approved').sort((a, b) => parseDateOnly(a.deadline) - parseDateOnly(b.deadline)).slice(0, 6);
+  const assignedToMeTasks = [...tasks].filter(t => t.assigned_to === currentUser?.id && t.status !== 'client_approved').sort((a, b) => { const ad = parseDateOnly(a.deadline); const bd = parseDateOnly(b.deadline); if (ad && bd) return ad - bd; if (ad) return -1; if (bd) return 1; return 0; }).slice(0, 6);
+  const teamOutputTasks = tasks.filter(t => t.assignee_role !== 'external');
+  const subOutputTasks = tasks.filter(t => t.assignee_role === 'external');
+
+  return (
+    <Layout>
+      <div className="page-header">
+        <div>
+          <div className="page-title">Welcome back, {currentUser?.name?.split(' ')[0]}</div>
+          <div className="page-subtitle">Here's what's happening across your projects.</div>
+        </div>
+      </div>
+      <div className="stats-grid">
+        <div className="stat-card stat-card-highlight">
+          <div className="stat-icon">⚡</div>
+          <div className="stat-value">{activeTasks.length}</div>
+          <div className="stat-label">Active Jobs</div>
+        </div>
+        <div className="stat-card">
+          <div className="stat-icon">⏹</div>
+          <div className="stat-value">{notStartedTasks.length}</div>
+          <div className="stat-label">Not Started</div>
+        </div>
+        <div className="stat-card">
+          <div className="stat-icon">▶</div>
+          <div className="stat-value">{inProgressTasks.length}</div>
+          <div className="stat-label">In Progress</div>
+        </div>
+        <div className="stat-card">
+          <div className="stat-icon">⏸</div>
+          <div className="stat-value">{onHoldTasks.length}</div>
+          <div className="stat-label">On Hold</div>
+        </div>
+        <div className="stat-card">
+          <div className="stat-icon">🕓</div>
+          <div className="stat-value">{reviewTasks.length}</div>
+          <div className="stat-label">Awaiting Client Review</div>
+        </div>
+      </div>
+      <div style={{ marginTop: 24 }}>
+        <OutputCharts title="Completed By Team Member" subtitle="Completed-task output by team assignee, with revisions counted by the person who submitted them." taskPeople={buildTaskPeople(teamOutputTasks)} revisionPeople={buildRevisionPeople(submissions, tasks, null)} />
+      </div>
+      <div style={{ marginTop: 24 }}>
+        <OutputCharts title="Completed By Subcontractor" subtitle="Completed-task output by subcontractor assignee, with revisions counted by the person who submitted them." taskPeople={buildTaskPeople(subOutputTasks)} revisionPeople={buildRevisionPeople(submissions, tasks, 'external')} />
+      </div>
+      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24, marginTop: 24 }}>
+        <TaskListCard title="Deadlines" subtitle="Upcoming due dates across active work." tasks={upcomingDeadlineTasks} projects={projects} emptyMessage="No active deadlines right now." />
+        <TaskListCard title="Assigned To You" subtitle="Your active jobs, sorted by deadline." tasks={assignedToMeTasks} projects={projects} emptyMessage="Nothing is assigned to you right now." />
+      </div>
+      <SubcontractorRates externals={externalProfiles} />
+    </Layout>
+  );
+}
diff --git a/src/pages/Login.jsx b/src/pages/Login.jsx
index 5bdb9fb..c00c855 100755
--- a/src/pages/Login.jsx
+++ b/src/pages/Login.jsx
@@ -14,7 +14,7 @@ export default function Login() {
 
   useEffect(() => {
     if (currentUser) {
-      navigate(currentUser.role === 'client' ? '/my-dashboard' : '/dashboard', { replace: true });
+      navigate('/dashboard', { replace: true });
     }
   }, [currentUser, navigate]);
 
diff --git a/src/pages/ProjectDetailPage.jsx b/src/pages/ProjectDetailPage.jsx
new file mode 100644
index 0000000..78be224
--- /dev/null
+++ b/src/pages/ProjectDetailPage.jsx
@@ -0,0 +1,468 @@
+import { useState, useEffect, useRef } from 'react';
+import { useParams, Link, useNavigate } from 'react-router-dom';
+import Layout from '../components/Layout';
+import StatusBadge from '../components/StatusBadge';
+import { supabase } from '../lib/supabase';
+import { useAuth } from '../context/AuthContext';
+import { serviceTypes } from '../data/mockData';
+import { cleanupTaskStorage } from '../lib/deleteHelpers';
+import { addDaysToDateOnly, getTodayDateOnlyEST } from '../lib/dates';
+
+const rLabel = (v) => 'R' + String(v || 0).padStart(2, '0');
+const emptyJobForm = () => ({ title: '', serviceType: '', deadline: addDaysToDateOnly(getTodayDateOnlyEST(), 3), description: '', requestedBy: '', isHot: false });
+
+export default function ProjectDetailPage() {
+  const { id } = useParams();
+  const navigate = useNavigate();
+  const { currentUser } = useAuth();
+
+  const isClient = currentUser?.role === 'client';
+  const isExternal = currentUser?.role === 'external';
+  const isTeam = currentUser?.role === 'team';
+
+  const [project, setProject] = useState(null);
+  const [company, setCompany] = useState(null);
+  const [companyUsers, setCompanyUsers] = useState([]);
+  const [tasks, setTasks] = useState([]);
+  const [submissions, setSubmissions] = useState([]);
+  const [members, setMembers] = useState([]);
+  const [externalProfiles, setExternalProfiles] = useState([]);
+  const [projectFiles, setProjectFiles] = useState([]);
+  const [loading, setLoading] = useState(true);
+
+  const [editingName, setEditingName] = useState(false);
+  const [nameVal, setNameVal] = useState('');
+  const [savingName, setSavingName] = useState(false);
+
+  const [showAddJob, setShowAddJob] = useState(false);
+  const [jobForm, setJobForm] = useState(emptyJobForm);
+  const [savingJob, setSavingJob] = useState(false);
+
+  const [selectedExternal, setSelectedExternal] = useState('');
+  const [addingMember, setAddingMember] = useState(false);
+
+  const [uploadingFile, setUploadingFile] = useState(false);
+  const fileInputRef = useRef(null);
+
+  const [filter, setFilter] = useState('all');
+
+  const requesterOptions = [
+    ...(currentUser ? [{ id: currentUser.id, name: `${currentUser.name} (You)`, email: currentUser.email || '' }] : []),
+    ...companyUsers.filter(u => u.id !== currentUser?.id),
+  ];
+
+  useEffect(() => {
+    async function load() {
+      try {
+        const { data: p } = await supabase.from('projects').select('*').eq('id', id).single();
+        if (!p) return;
+        setProject(p);
+
+        if (isClient) {
+          const { data: t } = await supabase.from('tasks').select('*').eq('project_id', id).order('submitted_at', { ascending: false });
+          setTasks(t || []);
+          if (t && t.length > 0) {
+            const { data: subs } = await supabase.from('submissions').select('id, task_id, submitted_by, submitted_by_name, version_number, type').in('task_id', t.map(task => task.id)).order('version_number');
+            setSubmissions(subs || []);
+          }
+        } else {
+          const [{ data: co }, { data: t }, { data: users }, { data: pm }, { data: ext }, { data: pf }] = await Promise.all([
+            supabase.from('companies').select('*').eq('id', p.company_id).single(),
+            supabase.from('tasks').select('*').eq('project_id', id).order('submitted_at', { ascending: false }),
+            supabase.from('profiles').select('id, name, email').eq('company_id', p.company_id).eq('role', 'client'),
+            supabase.from('project_members').select('*, profile:profiles(id, name, email)').eq('project_id', id),
+            supabase.from('profiles').select('id, name, email').eq('role', 'external').order('name'),
+            supabase.from('project_files').select('*').eq('project_id', id).order('created_at', { ascending: false }),
+          ]);
+          setCompany(co);
+          setTasks(t || []);
+          setCompanyUsers(users || []);
+          setMembers(pm || []);
+          setExternalProfiles(ext || []);
+          setProjectFiles(pf || []);
+        }
+      } catch (error) {
+        console.error('ProjectDetailPage load failed:', error);
+      } finally {
+        setLoading(false);
+      }
+    }
+    load();
+  }, [id]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const handleSaveName = async (e) => {
+    e.preventDefault();
+    if (!nameVal.trim()) return;
+    setSavingName(true);
+    const { error } = await supabase.from('projects').update({ name: nameVal.trim() }).eq('id', id);
+    if (!error) { setProject(p => ({ ...p, name: nameVal.trim() })); setEditingName(false); }
+    else alert('Failed to save name.');
+    setSavingName(false);
+  };
+
+  const handleDeleteProject = async () => {
+    if (!window.confirm(`Delete project "${project.name}"? All jobs and files will be permanently deleted.`)) return;
+    await cleanupTaskStorage(tasks.map(t => t.id));
+    await supabase.from('projects').delete().eq('id', id);
+    navigate(`/company/${company?.id}`);
+  };
+
+  const handleDeleteTask = async (taskId, e) => {
+    e.stopPropagation();
+    if (!window.confirm('Delete this job? All submissions and files will be permanently deleted.')) return;
+    await cleanupTaskStorage([taskId]);
+    await supabase.from('tasks').delete().eq('id', taskId);
+    setTasks(prev => prev.filter(t => t.id !== taskId));
+  };
+
+  const handleAddJob = async (e) => {
+    e.preventDefault();
+    setSavingJob(true);
+    const requestor = requesterOptions.find(u => u.id === jobForm.requestedBy);
+    if (!requestor) { setSavingJob(false); return; }
+    const { data: task } = await supabase.from('tasks').insert({ project_id: id, title: jobForm.title.trim(), status: 'not_started', current_version: 0 }).select().single();
+    if (task) {
+      await supabase.from('submissions').insert({ task_id: task.id, version_number: 0, type: 'initial', is_hot: jobForm.isHot, service_type: jobForm.serviceType, deadline: jobForm.deadline || null, description: jobForm.description.trim() || null, submitted_by: requestor.id, submitted_by_name: requestor.name.replace(' (You)', '') });
+      setTasks(prev => [task, ...prev]);
+      setJobForm(emptyJobForm());
+      setShowAddJob(false);
+    }
+    setSavingJob(false);
+  };
+
+  const handleAddMember = async () => {
+    if (!selectedExternal) return;
+    const { data } = await supabase.from('project_members').insert({ project_id: id, profile_id: selectedExternal }).select('*, profile:profiles(id, name, email)').single();
+    if (data) { setMembers(prev => [...prev, data]); setSelectedExternal(''); setAddingMember(false); }
+  };
+
+  const handleRemoveMember = async (profileId) => {
+    await supabase.from('project_members').delete().eq('project_id', id).eq('profile_id', profileId);
+    setMembers(prev => prev.filter(m => m.profile_id !== profileId));
+  };
+
+  const handleUploadFile = async (e) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+    setUploadingFile(true);
+    const path = `${id}/${Date.now()}_${file.name}`;
+    const { error: upErr } = await supabase.storage.from('project-files').upload(path, file);
+    if (upErr) { alert('Upload failed: ' + upErr.message); setUploadingFile(false); return; }
+    const { data: rec } = await supabase.from('project_files').insert({ project_id: id, name: file.name, storage_path: path, size: file.size, uploaded_by: currentUser.id, uploaded_by_name: currentUser.name }).select().single();
+    if (rec) setProjectFiles(prev => [rec, ...prev]);
+    if (fileInputRef.current) fileInputRef.current.value = '';
+    setUploadingFile(false);
+  };
+
+  const handleDeleteFile = async (file) => {
+    if (!window.confirm(`Delete "${file.name}"?`)) return;
+    await supabase.storage.from('project-files').remove([file.storage_path]);
+    await supabase.from('project_files').delete().eq('id', file.id);
+    setProjectFiles(prev => prev.filter(f => f.id !== file.id));
+  };
+
+  const handleDownloadFile = async (file) => {
+    const { data } = await supabase.storage.from('project-files').createSignedUrl(file.storage_path, 60);
+    if (data?.signedUrl) window.open(data.signedUrl, '_blank');
+  };
+
+  if (loading) return <Layout><p style={{ padding: 24, color: 'var(--text-muted)' }}>Loading...</p></Layout>;
+  if (!project) return <Layout><p>Project not found.</p></Layout>;
+
+  const filteredTasks = isClient && filter === 'mine'
+    ? tasks.filter(task => {
+        const initial = submissions.find(s => s.task_id === task.id && s.type === 'initial');
+        return initial?.submitted_by === currentUser.id;
+      })
+    : tasks;
+
+  return (
+    <Layout>
+      <button className="back-link" onClick={() => navigate(isClient ? '/projects' : isExternal ? '/dashboard' : `/company/${company?.id}`)}>
+        ← Back to {isClient ? 'Projects' : isExternal ? 'Dashboard' : company?.name}
+      </button>
+
+      <div className="page-header">
+        <div>
+          {editingName && (isTeam || isClient) ? (
+            <form onSubmit={handleSaveName} style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 4 }}>
+              <input type="text" value={nameVal} onChange={e => setNameVal(e.target.value)} autoFocus required style={{ fontSize: 22, fontWeight: 700, padding: '4px 10px', margin: 0, width: 280 }} />
+              <button type="submit" className="btn btn-primary btn-sm" disabled={savingName}>{savingName ? '...' : 'Save'}</button>
+              <button type="button" className="btn btn-outline btn-sm" onClick={() => setEditingName(false)}>Cancel</button>
+            </form>
+          ) : (
+            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
+              <div className="page-title">{project.name}</div>
+              {(isTeam || isClient) && (
+                <button className="btn btn-outline btn-sm" onClick={() => { setNameVal(project.name); setEditingName(true); }}>Edit</button>
+              )}
+            </div>
+          )}
+          <div className="page-subtitle">
+            {!isClient && company && (
+              <>
+                {isExternal
+                  ? <span style={{ color: 'var(--text-secondary)' }}>{company.name}</span>
+                  : <Link to={`/company/${company.id}`} style={{ color: 'var(--accent)' }}>{company.name}</Link>
+                }
+                {' · '}
+              </>
+            )}
+            {isClient
+              ? `${tasks.length} request${tasks.length !== 1 ? 's' : ''} · Started ${new Date(project.created_at).toLocaleDateString()}`
+              : `Started ${new Date(project.created_at).toLocaleDateString()}`
+            }
+          </div>
+        </div>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+          <StatusBadge status={project.status} />
+          {isClient && (
+            <Link to={`/new-request?project=${encodeURIComponent(project.name)}`} className="btn btn-primary">+ Add Request</Link>
+          )}
+          {isTeam && (
+            <>
+              <button className="btn btn-outline btn-sm" style={{ color: 'var(--danger, #dc2626)', borderColor: 'var(--danger, #dc2626)' }} onClick={handleDeleteProject}>Delete Project</button>
+              <button className="btn btn-primary btn-sm" onClick={() => setShowAddJob(s => !s)}>{showAddJob ? 'Cancel' : '+ Add Job'}</button>
+            </>
+          )}
+        </div>
+      </div>
+
+      {/* Team: Add job form */}
+      {isTeam && showAddJob && (
+        <div className="card" style={{ marginBottom: 24, border: '1px solid var(--accent)', borderRadius: 12 }}>
+          <div className="card-title">Add Job — {project.name}</div>
+          <form onSubmit={handleAddJob}>
+            <div className="grid-2">
+              <div className="form-group">
+                <label>Job Title *</label>
+                <input type="text" placeholder="e.g. Logo Design" value={jobForm.title} onChange={e => setJobForm(f => ({ ...f, title: e.target.value }))} required autoFocus />
+              </div>
+              <div className="form-group">
+                <label>Service Type *</label>
+                <select value={jobForm.serviceType} onChange={e => setJobForm(f => ({ ...f, serviceType: e.target.value }))} required>
+                  <option value="">Select a service...</option>
+                  {serviceTypes.map(s => <option key={s} value={s}>{s}</option>)}
+                </select>
+              </div>
+            </div>
+            <div className="grid-2">
+              <div className="form-group">
+                <label>Deadline <span style={{ fontWeight: 400, color: 'var(--text-muted)' }}>(optional)</span></label>
+                <input type="date" value={jobForm.deadline} onChange={e => setJobForm(f => ({ ...f, deadline: e.target.value }))} />
+              </div>
+              <div className="form-group">
+                <label>Requested By *</label>
+                <select value={jobForm.requestedBy} onChange={e => setJobForm(f => ({ ...f, requestedBy: e.target.value }))} required>
+                  <option value="">Select requester...</option>
+                  {requesterOptions.map(u => <option key={u.id} value={u.id}>{u.name}{u.email ? ` (${u.email})` : ''}</option>)}
+                </select>
+              </div>
+            </div>
+            <div className="form-group" style={{ marginTop: -4 }}>
+              <label style={{ display: 'flex', alignItems: 'center', gap: 10, fontWeight: 500, cursor: 'pointer' }}>
+                <input type="checkbox" checked={jobForm.isHot} onChange={e => setJobForm(f => ({ ...f, isHot: e.target.checked }))} />
+                <span>Mark as Hot</span>
+              </label>
+            </div>
+            <div className="form-group">
+              <label>Notes <span style={{ fontWeight: 400, color: 'var(--text-muted)' }}>(optional)</span></label>
+              <textarea placeholder="Any details about the job..." value={jobForm.description} onChange={e => setJobForm(f => ({ ...f, description: e.target.value }))} style={{ minHeight: 80 }} />
+            </div>
+            <div className="action-buttons">
+              <button type="submit" className="btn btn-primary" disabled={savingJob}>{savingJob ? 'Adding...' : 'Add Job'}</button>
+              <button type="button" className="btn btn-outline" onClick={() => { setShowAddJob(false); setJobForm(emptyJobForm()); }}>Cancel</button>
+            </div>
+          </form>
+        </div>
+      )}
+
+      {/* Team/External: Project info cards */}
+      {!isClient && (
+        <div className="grid-2" style={{ marginBottom: 24 }}>
+          <div className="card">
+            <div className="card-title">Project Info</div>
+            <div className="detail-grid" style={{ marginBottom: 0 }}>
+              <div className="detail-item"><label>Company</label><p>{company?.name || '—'}</p></div>
+              <div className="detail-item"><label>Status</label><p><StatusBadge status={project.status} /></p></div>
+              <div className="detail-item"><label>Started</label><p>{new Date(project.created_at).toLocaleDateString()}</p></div>
+            </div>
+          </div>
+          <div className="card">
+            <div className="card-title">Project Summary</div>
+            <div className="detail-grid" style={{ marginBottom: 0 }}>
+              <div className="detail-item"><label>Total Tasks</label><p>{tasks.length}</p></div>
+              <div className="detail-item"><label>Completed</label><p>{tasks.filter(t => t.status === 'client_approved').length}</p></div>
+              <div className="detail-item"><label>In Progress</label><p>{tasks.filter(t => t.status === 'in_progress').length}</p></div>
+              <div className="detail-item"><label>Awaiting Review</label><p>{tasks.filter(t => t.status === 'client_review').length}</p></div>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Team/External: Project Files */}
+      {!isClient && (
+        <>
+          <div className="card-title">Project Files</div>
+          <div className="card" style={{ marginBottom: 24 }}>
+            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: projectFiles.length > 0 ? 14 : 0 }}>
+              <div />
+              {isTeam && (
+                <>
+                  <button className="btn btn-outline btn-sm" onClick={() => fileInputRef.current?.click()} disabled={uploadingFile}>{uploadingFile ? 'Uploading...' : '+ Upload File'}</button>
+                  <input ref={fileInputRef} type="file" style={{ display: 'none' }} onChange={handleUploadFile} />
+                </>
+              )}
+            </div>
+            {projectFiles.length === 0 ? (
+              <p style={{ fontSize: 13, color: 'var(--text-muted)', margin: 0 }}>No files uploaded yet.</p>
+            ) : (
+              <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
+                {projectFiles.map(f => (
+                  <div key={f.id} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '8px 12px', background: 'var(--bg)', borderRadius: 8, border: '1px solid var(--border)' }}>
+                    <div>
+                      <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--text-primary)' }}>{f.name}</div>
+                      <div style={{ fontSize: 11, color: 'var(--text-muted)' }}>{f.uploaded_by_name && `${f.uploaded_by_name} · `}{new Date(f.created_at).toLocaleDateString()}{f.size ? ` · ${(f.size / 1024).toFixed(0)} KB` : ''}</div>
+                    </div>
+                    <div style={{ display: 'flex', gap: 6 }}>
+                      <button className="btn btn-outline btn-sm" onClick={() => handleDownloadFile(f)}>Download</button>
+                      {isTeam && (
+                        <button onClick={() => handleDeleteFile(f)} style={{ background: 'none', border: 'none', color: 'var(--danger)', cursor: 'pointer', fontSize: 16, padding: '0 4px' }} title="Delete file">✕</button>
+                      )}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+        </>
+      )}
+
+      {/* Client: mine/all filter */}
+      {isClient && (
+        <div className="card page-toolbar" style={{ marginBottom: 16 }}>
+          <div className="page-toolbar-grid">
+            <div className="page-toolbar-section">
+              <div className="card-title" style={{ marginBottom: 10 }}>Filter</div>
+              <div className="page-toolbar-filters">
+                <button className={`btn btn-sm ${filter === 'all' ? 'btn-primary' : 'btn-outline'}`} onClick={() => setFilter('all')}>All Requests</button>
+                <button className={`btn btn-sm ${filter === 'mine' ? 'btn-primary' : 'btn-outline'}`} onClick={() => setFilter('mine')}>Mine Only</button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Tasks / Requests */}
+      <div className="card-title">Tasks</div>
+      {filteredTasks.length === 0 ? (
+        <div className="empty-state">
+          <div className="empty-state-icon">📋</div>
+          <h3>{isClient && filter === 'mine' ? "You haven't submitted any requests to this project" : isClient ? 'No requests yet' : 'No jobs yet'}</h3>
+          {isClient ? (
+            <Link to={`/new-request?project=${encodeURIComponent(project.name)}`} className="btn btn-primary" style={{ marginTop: 16 }}>Add Request</Link>
+          ) : isTeam ? (
+            <button className="btn btn-primary" style={{ marginTop: 16 }} onClick={() => setShowAddJob(true)}>+ Add Job</button>
+          ) : null}
+        </div>
+      ) : isClient ? (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+          {filteredTasks.map(task => {
+            const taskSubs = submissions.filter(s => s.task_id === task.id);
+            const initialSub = taskSubs.find(s => s.type === 'initial') || taskSubs[0];
+            const latestSub = taskSubs[taskSubs.length - 1];
+            const hasRevision = latestSub && initialSub && latestSub.id !== initialSub.id && latestSub.submitted_by_name !== initialSub.submitted_by_name;
+            const isMine = initialSub?.submitted_by === currentUser.id;
+            return (
+              <Link key={task.id} to={`/requests/${task.id}`} className="request-card" style={{ textDecoration: 'none', cursor: 'pointer', display: 'block' }}>
+                <div className="request-card-header">
+                  <div>
+                    <div className="request-card-title">
+                      {task.title}{' '}
+                      <span style={{ fontWeight: 400, color: 'var(--text-muted)', fontSize: 13 }}>{rLabel(task.current_version)}</span>
+                      {isMine && <span style={{ marginLeft: 8, fontSize: 11, background: 'rgba(245,165,35,0.15)', color: 'var(--accent)', padding: '2px 8px', borderRadius: 4, fontWeight: 600 }}>Mine</span>}
+                    </div>
+                    <div className="request-card-meta" style={{ marginTop: 4 }}>
+                      {initialSub?.submitted_by_name && <>By {initialSub.submitted_by_name}</>}
+                      {hasRevision && <> · Updated by {latestSub.submitted_by_name}</>}
+                    </div>
+                  </div>
+                  <StatusBadge status={task.status} />
+                </div>
+              </Link>
+            );
+          })}
+        </div>
+      ) : (
+        <div className="table-wrapper">
+          <table>
+            <thead>
+              <tr>
+                <th>Job</th>
+                <th>Assigned To</th>
+                <th>Revision</th>
+                <th>Status</th>
+                <th>Submitted</th>
+                <th></th>
+              </tr>
+            </thead>
+            <tbody>
+              {filteredTasks.map(task => (
+                <tr key={task.id} onClick={() => navigate(`/requests/${task.id}`)} style={{ cursor: 'pointer' }}>
+                  <td>
+                    {task.title}
+                    <span style={{ marginLeft: 6, fontWeight: 600, color: 'var(--text-muted)', fontSize: 12 }}>{'R' + String(task.current_version || 0).padStart(2, '0')}</span>
+                  </td>
+                  <td style={{ color: task.assigned_name ? 'var(--text-primary)' : 'var(--text-muted)' }}>{task.assigned_name || 'Unassigned'}</td>
+                  <td><span className="badge badge-not_started">R{String(task.current_version || 0).padStart(2, '0')}</span></td>
+                  <td><StatusBadge status={task.status} /></td>
+                  <td style={{ color: 'var(--text-secondary)' }}>{new Date(task.submitted_at).toLocaleDateString()}</td>
+                  {isTeam && (
+                    <td onClick={e => e.stopPropagation()}>
+                      <button type="button" onClick={e => handleDeleteTask(task.id, e)} style={{ background: 'none', border: 'none', color: 'var(--danger, #dc2626)', cursor: 'pointer', fontSize: 16, padding: '0 4px' }} title="Delete job">✕</button>
+                    </td>
+                  )}
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+
+      {/* Team: External members */}
+      {isTeam && (
+        <div className="card" style={{ marginTop: 24 }}>
+          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 14 }}>
+            <div className="card-title" style={{ margin: 0 }}>External Members</div>
+            {!addingMember && <button className="btn btn-outline btn-sm" onClick={() => setAddingMember(true)}>+ Add</button>}
+          </div>
+          {addingMember && (
+            <div style={{ display: 'flex', gap: 8, marginBottom: 12 }}>
+              <select value={selectedExternal} onChange={e => setSelectedExternal(e.target.value)} style={{ flex: 1 }}>
+                <option value="">Select external member...</option>
+                {externalProfiles.filter(p => !members.find(m => m.profile_id === p.id)).map(p => <option key={p.id} value={p.id}>{p.name} — {p.email}</option>)}
+              </select>
+              <button className="btn btn-primary btn-sm" onClick={handleAddMember} disabled={!selectedExternal}>Add</button>
+              <button className="btn btn-outline btn-sm" onClick={() => { setAddingMember(false); setSelectedExternal(''); }}>Cancel</button>
+            </div>
+          )}
+          {members.length === 0 ? (
+            <p style={{ fontSize: 13, color: 'var(--text-muted)', margin: 0 }}>No external members assigned to this project.</p>
+          ) : (
+            <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
+              {members.map(m => (
+                <div key={m.id} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '8px 12px', background: 'var(--bg)', borderRadius: 8, border: '1px solid var(--border)' }}>
+                  <div>
+                    <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--text-primary)' }}>{m.profile?.name}</div>
+                    <div style={{ fontSize: 11, color: 'var(--text-muted)' }}>{m.profile?.email}</div>
+                  </div>
+                  <button onClick={() => handleRemoveMember(m.profile_id)} style={{ background: 'none', border: 'none', color: 'var(--danger)', cursor: 'pointer', fontSize: 16, padding: '0 4px' }} title="Remove from project">✕</button>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      )}
+    </Layout>
+  );
+}
diff --git a/src/pages/Projects.jsx b/src/pages/Projects.jsx
new file mode 100644
index 0000000..bbe4300
--- /dev/null
+++ b/src/pages/Projects.jsx
@@ -0,0 +1,318 @@
+import { useState, useEffect, useMemo } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import Layout from '../components/Layout';
+import StatusBadge from '../components/StatusBadge';
+import { supabase } from '../lib/supabase';
+import { useAuth } from '../context/AuthContext';
+import { withTimeout } from '../lib/withTimeout';
+
+// ─── Client helpers ────────────────────────────────────────────────────────
+
+const rLabel = (v) => 'R' + String(v || 0).padStart(2, '0');
+
+function ClientProjectGroup({ project, tasks, submissions, currentUserId, filter }) {
+  const [open, setOpen] = useState(false);
+  const filteredTasks = filter === 'mine'
+    ? tasks.filter(task => {
+        const initial = submissions.find(s => s.task_id === task.id && s.type === 'initial');
+        return initial?.submitted_by === currentUserId;
+      })
+    : tasks;
+  if (filter === 'mine' && filteredTasks.length === 0) return null;
+  return (
+    <div className="interactive-surface" style={{ border: '1px solid var(--border)', borderRadius: 8, overflow: 'hidden', marginBottom: 8 }}>
+      <button
+        className="interactive-panel-toggle"
+        onClick={() => setOpen(o => !o)}
+        style={{ width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '12px 16px', background: 'var(--card-bg-2)', border: 'none', cursor: 'pointer', borderBottom: open ? '1px solid var(--border)' : 'none', fontFamily: 'inherit' }}
+      >
+        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
+          <Link to={`/projects/${project.id}`} onClick={e => e.stopPropagation()} style={{ fontSize: 14, fontWeight: 700, color: 'var(--text-primary)', textDecoration: 'none' }}>
+            {project.name}
+          </Link>
+          <span style={{ fontSize: 11, fontWeight: 600, padding: '2px 8px', borderRadius: 4, background: 'rgba(245,165,35,0.15)', color: 'var(--accent)' }}>
+            {filteredTasks.length} request{filteredTasks.length !== 1 ? 's' : ''}
+          </span>
+        </div>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
+          <StatusBadge status={project.status} />
+          <span style={{ fontSize: 12, color: 'var(--text-muted)' }}>{open ? '▲' : '▼'}</span>
+        </div>
+      </button>
+      {open && (
+        <div style={{ background: 'var(--card-bg)' }}>
+          {filteredTasks.length === 0 ? (
+            <div style={{ padding: '16px', fontSize: 13, color: 'var(--text-muted)', textAlign: 'center' }}>No requests in this project yet.</div>
+          ) : filteredTasks.map((task, i) => {
+            const taskSubs = submissions.filter(s => s.task_id === task.id);
+            const initialSub = taskSubs.find(s => s.type === 'initial') || taskSubs[0];
+            const latestSub = taskSubs[taskSubs.length - 1];
+            const hasRevision = latestSub && initialSub && latestSub.id !== initialSub.id && latestSub.submitted_by_name !== initialSub.submitted_by_name;
+            const isMine = initialSub?.submitted_by === currentUserId;
+            return (
+              <Link
+                key={task.id}
+                to={`/requests/${task.id}`}
+                className="interactive-row"
+                style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '12px 16px', borderBottom: i < filteredTasks.length - 1 ? '1px solid var(--border)' : 'none', gap: 8, textDecoration: 'none', cursor: 'pointer' }}
+              >
+                <div style={{ minWidth: 0 }}>
+                  <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
+                    <span style={{ fontWeight: 600, fontSize: 13, color: 'var(--text-primary)' }}>{task.title}</span>
+                    <span style={{ fontSize: 12, color: 'var(--text-muted)' }}>{rLabel(task.current_version)}</span>
+                    {isMine && <span style={{ fontSize: 11, background: 'rgba(245,165,35,0.15)', color: 'var(--accent)', padding: '1px 7px', borderRadius: 4, fontWeight: 600 }}>Mine</span>}
+                  </div>
+                  <div style={{ fontSize: 11, color: 'var(--text-muted)', marginTop: 3 }}>
+                    {initialSub?.submitted_by_name && <>By {initialSub.submitted_by_name}</>}
+                    {hasRevision && <> · Updated by {latestSub.submitted_by_name}</>}
+                  </div>
+                </div>
+                <StatusBadge status={task.status} />
+              </Link>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ─── Main export ───────────────────────────────────────────────────────────
+
+export default function Projects() {
+  const { currentUser } = useAuth();
+  const navigate = useNavigate();
+  const isTeam = currentUser?.role === 'team';
+  const isExternal = currentUser?.role === 'external';
+  const isClient = currentUser?.role === 'client';
+
+  const [projects, setProjects] = useState([]);
+  const [tasks, setTasks] = useState([]);
+  const [submissions, setSubmissions] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState('');
+
+  // Team-specific state
+  const [search, setSearch] = useState('');
+  const [activeTab, setActiveTab] = useState('all');
+
+  // Client-specific state
+  const [filter, setFilter] = useState('all');
+  const companies = isClient
+    ? (currentUser.companies?.length ? currentUser.companies : (currentUser.company ? [currentUser.company] : [])).slice().sort((a, b) => a.name.localeCompare(b.name))
+    : [];
+  const [activeCompanyId, setActiveCompanyId] = useState(() => companies[0]?.id || null);
+
+  useEffect(() => {
+    async function load() {
+      try {
+        if (isTeam) {
+          const { data } = await supabase
+            .from('projects')
+            .select('id, name, status, created_at, company:companies(id, name)')
+            .order('created_at', { ascending: false });
+          setProjects(data || []);
+        } else if (isExternal) {
+          if (!currentUser?.id) { setLoading(false); return; }
+          const { data, error: err } = await supabase
+            .from('projects')
+            .select('id, name, status, company:companies(name)')
+            .order('created_at', { ascending: false });
+          if (err) setError(err.message);
+          else setProjects(data || []);
+        } else if (isClient) {
+          const [{ data: p }, { data: t }] = await withTimeout(Promise.all([
+            supabase.from('projects').select('*').order('created_at', { ascending: false }),
+            supabase.from('tasks').select('*').order('submitted_at', { ascending: false }),
+          ]), 12000, 'Projects load');
+          setProjects(p || []);
+          setTasks(t || []);
+          if (t && t.length > 0) {
+            const { data: subs } = await withTimeout(
+              supabase.from('submissions').select('id, task_id, submitted_by, submitted_by_name, version_number, type').in('task_id', t.map(task => task.id)).order('version_number'),
+              12000,
+              'Project submissions load'
+            );
+            setSubmissions(subs || []);
+          }
+        }
+      } catch (err) {
+        console.error('Projects load failed:', err);
+        setError(err.message || 'Failed to load.');
+        setProjects([]);
+        setTasks([]);
+        setSubmissions([]);
+      } finally {
+        setLoading(false);
+      }
+    }
+    load();
+  }, [isTeam, isExternal, isClient, currentUser?.id]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const teamCompanies = useMemo(() => {
+    if (!isTeam) return [];
+    const seen = new Map();
+    projects.forEach(p => { if (p.company?.id && !seen.has(p.company.id)) seen.set(p.company.id, p.company.name); });
+    return [...seen.entries()].sort((a, b) => a[1].localeCompare(b[1]));
+  }, [isTeam, projects]);
+
+  if (loading) return <Layout><p style={{ padding: 24, color: 'var(--text-muted)' }}>Loading...</p></Layout>;
+
+  // ── Team render ────────────────────────────────────────────────────────
+  if (isTeam) {
+    const filtered = projects.filter(p => {
+      const matchesTab = activeTab === 'all' || p.company?.id === activeTab;
+      const matchesSearch = !search || p.name.toLowerCase().includes(search.toLowerCase()) || p.company?.name?.toLowerCase().includes(search.toLowerCase());
+      return matchesTab && matchesSearch;
+    });
+    return (
+      <Layout>
+        <div className="page-header">
+          <div>
+            <div className="page-title">Projects</div>
+            <div className="page-subtitle">All active client projects.</div>
+          </div>
+          <input type="text" placeholder="Search projects..." value={search} onChange={e => setSearch(e.target.value)} style={{ width: 220 }} />
+        </div>
+        <div className="tab-bar" style={{ marginBottom: 20, display: 'flex', gap: 4, flexWrap: 'wrap' }}>
+          <button className={`tab-btn${activeTab === 'all' ? ' active' : ''}`} onClick={() => setActiveTab('all')}>All ({projects.length})</button>
+          {teamCompanies.map(([id, name]) => (
+            <button key={id} className={`tab-btn${activeTab === id ? ' active' : ''}`} onClick={() => setActiveTab(id)}>
+              {name} ({projects.filter(p => p.company?.id === id).length})
+            </button>
+          ))}
+        </div>
+        {filtered.length === 0 ? (
+          <div className="empty-state">
+            <h3>No projects found</h3>
+            <p>Projects are created from the Clients &amp; Users page.</p>
+          </div>
+        ) : (
+          <div className="table-wrapper">
+            <table>
+              <thead>
+                <tr>
+                  <th>Project</th>
+                  {activeTab === 'all' && <th>Client</th>}
+                  <th>Status</th>
+                  <th>Started</th>
+                </tr>
+              </thead>
+              <tbody>
+                {filtered.map(p => (
+                  <tr key={p.id} style={{ cursor: 'pointer' }} onClick={() => navigate(`/projects/${p.id}`)}>
+                    <td style={{ fontWeight: 600 }}>{p.name}</td>
+                    {activeTab === 'all' && <td style={{ color: 'var(--text-muted)' }}>{p.company?.name || '—'}</td>}
+                    <td><StatusBadge status={p.status} /></td>
+                    <td style={{ color: 'var(--text-muted)' }}>{new Date(p.created_at).toLocaleDateString()}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </Layout>
+    );
+  }
+
+  // ── External render ────────────────────────────────────────────────────
+  if (isExternal) {
+    return (
+      <Layout>
+        <div className="page-header">
+          <div>
+            <div className="page-title">Projects</div>
+            <div className="page-subtitle">All projects you are assigned to.</div>
+          </div>
+        </div>
+        {error && <div className="card" style={{ color: 'var(--danger)', marginBottom: 16 }}>{error}</div>}
+        {projects.length === 0 ? (
+          <div className="empty-state">
+            <h3>No projects yet</h3>
+            <p>Projects will appear here once the team assigns you to one.</p>
+          </div>
+        ) : (
+          <div className="table-wrapper">
+            <table>
+              <thead>
+                <tr>
+                  <th>Project</th>
+                  <th>Client</th>
+                  <th>Status</th>
+                </tr>
+              </thead>
+              <tbody>
+                {projects.map(p => (
+                  <tr key={p.id} style={{ cursor: 'pointer' }} onClick={() => navigate(`/projects/${p.id}`)}>
+                    <td style={{ fontWeight: 600 }}>{p.name}</td>
+                    <td style={{ color: 'var(--text-muted)' }}>{p.company?.name || '—'}</td>
+                    <td style={{ textTransform: 'capitalize', color: 'var(--text-muted)' }}>{p.status || 'Active'}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </Layout>
+    );
+  }
+
+  // ── Client render ──────────────────────────────────────────────────────
+  const visibleProjects = companies.length > 1 ? projects.filter(p => p.company_id === activeCompanyId) : projects;
+
+  return (
+    <Layout>
+      <div className="page-header">
+        <div>
+          <div className="page-title">Projects</div>
+          <div className="page-subtitle">All work for your company.</div>
+        </div>
+        <Link to="/new-project" className="btn btn-primary">+ New Project</Link>
+      </div>
+
+      <div className="card page-toolbar">
+        <div className="page-toolbar-grid">
+          <div className="page-toolbar-section">
+            <div className="card-title" style={{ marginBottom: 10 }}>Filter</div>
+            <div className="page-toolbar-filters">
+              <button className={`btn btn-sm ${filter === 'all' ? 'btn-primary' : 'btn-outline'}`} onClick={() => setFilter('all')}>All Requests</button>
+              <button className={`btn btn-sm ${filter === 'mine' ? 'btn-primary' : 'btn-outline'}`} onClick={() => setFilter('mine')}>Mine Only</button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {companies.length > 1 && (
+        <div style={{ marginBottom: 16, display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap' }} className="card-title">
+          {companies.map((company, index) => (
+            <span key={company.id} style={{ display: 'inline-flex', alignItems: 'center', gap: 10 }}>
+              {index > 0 && <span style={{ color: 'var(--text-muted)' }}>|</span>}
+              <button type="button" onClick={() => setActiveCompanyId(company.id)} style={{ background: 'none', border: 'none', padding: 0, margin: 0, cursor: 'pointer', font: 'inherit', textTransform: 'inherit', letterSpacing: 'inherit', color: activeCompanyId === company.id ? 'var(--text-primary)' : 'var(--text-muted)' }}>
+                {company.name}
+              </button>
+            </span>
+          ))}
+        </div>
+      )}
+
+      {projects.length === 0 ? (
+        <div className="empty-state">
+          <h3>No projects yet</h3>
+          <p>Submit a request and a project will be created automatically.</p>
+          <Link to="/new-project" className="btn btn-primary" style={{ marginTop: 16 }}>+ New Project</Link>
+        </div>
+      ) : visibleProjects.length === 0 ? (
+        <div className="empty-state"><h3>No projects for this company</h3></div>
+      ) : visibleProjects.map(project => (
+        <ClientProjectGroup
+          key={project.id}
+          project={project}
+          tasks={tasks.filter(t => t.project_id === project.id)}
+          submissions={submissions}
+          currentUserId={currentUser.id}
+          filter={filter}
+        />
+      ))}
+    </Layout>
+  );
+}
diff --git a/src/pages/RequestDetail.jsx b/src/pages/RequestDetail.jsx
new file mode 100644
index 0000000..ee8f4bd
--- /dev/null
+++ b/src/pages/RequestDetail.jsx
@@ -0,0 +1,1247 @@
+import { useState, useEffect, useRef } from 'react';
+import { useParams, useNavigate, Link } from 'react-router-dom';
+import JSZip from 'jszip';
+import Layout from '../components/Layout';
+import StatusBadge from '../components/StatusBadge';
+import LoadingButton from '../components/LoadingButton';
+import FileAttachment from '../components/FileAttachment';
+import { supabase } from '../lib/supabase';
+import { sendEmail } from '../lib/email';
+import { useAuth } from '../context/AuthContext';
+import { serviceTypes } from '../data/mockData';
+import { cleanupTaskStorage } from '../lib/deleteHelpers';
+import { addDaysToDateOnly, formatDateEST, getTodayDateOnlyEST } from '../lib/dates';
+import { uploadFilesToRequestInfo } from '../lib/filebrowserFolders';
+
+const rLabel = (v) => 'R' + String(v || 0).padStart(2, '0');
+const MAX_FILES = 20;
+const MAX_SIZE_MB = 10;
+const MAX_SIZE_BYTES = MAX_SIZE_MB * 1024 * 1024;
+const DELIVERY_UPLOAD_CONCURRENCY = 3;
+const formatSize = (bytes) => bytes < 1024 * 1024 ? (bytes / 1024).toFixed(1) + ' KB' : (bytes / (1024 * 1024)).toFixed(1) + ' MB';
+const getPrimaryForVersion = (submissions, version) =>
+  submissions.find(s => s.version_number === version && s.type !== 'amendment') || null;
+const getCurrentPrimarySubmission = (submissions, currentVersion) =>
+  getPrimaryForVersion(submissions, currentVersion)
+  || [...submissions].filter(s => s.type !== 'amendment').sort((a, b) => b.version_number - a.version_number)[0]
+  || null;
+const getRevisionBaseline = (task, submissions) =>
+  Math.max(task?.current_version || 0, ...(submissions || []).map(sub => sub.version_number || 0));
+
+async function uploadDeliveryFiles(taskId, files) {
+  const uploadedFiles = new Array(files.length);
+  let nextIndex = 0;
+  async function worker() {
+    while (nextIndex < files.length) {
+      const index = nextIndex++;
+      const file = files[index];
+      const path = `${taskId}/${Date.now()}_${index}_${file.name}`;
+      const { data: uploaded, error } = await supabase.storage.from('deliveries').upload(path, file);
+      if (error) throw new Error(`Upload failed: ${error.message}`);
+      if (uploaded) uploadedFiles[index] = { name: file.name, storage_path: path, size: file.size };
+    }
+  }
+  const workerCount = Math.min(DELIVERY_UPLOAD_CONCURRENCY, files.length);
+  await Promise.all(Array.from({ length: workerCount }, () => worker()));
+  return uploadedFiles.filter(Boolean);
+}
+
+export default function RequestDetail() {
+  const { id } = useParams();
+  const navigate = useNavigate();
+  const { currentUser } = useAuth();
+
+  const isClient = currentUser?.role === 'client';
+  const isExternal = currentUser?.role === 'external';
+  const isTeam = currentUser?.role === 'team';
+
+  const [task, setTask] = useState(null);
+  const [project, setProject] = useState(null);
+  const [company, setCompany] = useState(null);
+  const [submissions, setSubmissions] = useState([]);
+  const [teamMembers, setTeamMembers] = useState([]);
+  const [companyUsers, setCompanyUsers] = useState([]);
+  const [loading, setLoading] = useState(true);
+
+  const [editingTitle, setEditingTitle] = useState(false);
+  const [titleVal, setTitleVal] = useState('');
+  const [savingTitle, setSavingTitle] = useState(false);
+  const [editingRevision, setEditingRevision] = useState(false);
+  const [revisionVal, setRevisionVal] = useState('');
+  const [savingRevision, setSavingRevision] = useState(false);
+  const [editingRequest, setEditingRequest] = useState(false);
+  const [requestForm, setRequestForm] = useState({ serviceType: '', deadline: addDaysToDateOnly(getTodayDateOnlyEST(), 3), description: '', requestedBy: '', isHot: false });
+  const [savingRequest, setSavingRequest] = useState(false);
+
+  const [notification, setNotification] = useState(null);
+  const [showSendForm, setShowSendForm] = useState(false);
+  const [sendForm, setSendForm] = useState({ files: [], message: '' });
+  const [clientEmails, setClientEmails] = useState([]);
+  const [extraClientEmail, setExtraClientEmail] = useState('');
+  const [fileErrors, setFileErrors] = useState([]);
+  const [dragging, setDragging] = useState(false);
+  const dragCounter = useRef(0);
+  const [saving, setSaving] = useState(false);
+  const [downloading, setDownloading] = useState('');
+
+  const [showWorkUpload, setShowWorkUpload] = useState(false);
+  const [workForm, setWorkForm] = useState({ files: [], description: '' });
+  const [workFileErrors, setWorkFileErrors] = useState([]);
+  const [workDragging, setWorkDragging] = useState(false);
+  const workDragCounter = useRef(0);
+
+  const [companyProjects, setCompanyProjects] = useState([]);
+  const [showMoveProject, setShowMoveProject] = useState(false);
+  const [moveProjectId, setMoveProjectId] = useState('');
+  const [showNewProject, setShowNewProject] = useState(false);
+  const [newProjectName, setNewProjectName] = useState('');
+
+  // Client-specific state
+  const [clientAction, setClientAction] = useState(null);
+  const [revisionForm, setRevisionForm] = useState({ serviceType: '', deadline: addDaysToDateOnly(getTodayDateOnlyEST(), 3), description: '', revisionType: 'client_revision', isHot: false });
+  const [revisionFiles, setRevisionFiles] = useState([]);
+  const [submitted, setSubmitted] = useState(false);
+
+  const requesterOptions = [
+    ...(currentUser ? [{ id: currentUser.id, name: `${currentUser.name} (You)`, email: currentUser.email || '' }] : []),
+    ...companyUsers.filter(user => user.id !== currentUser?.id),
+  ];
+  const currentPrimarySubmission = getCurrentPrimarySubmission(submissions, getRevisionBaseline(task, submissions));
+  const currentDelivery = currentPrimarySubmission?.delivery || null;
+  const currentDeliveryFiles = currentDelivery?.files || [];
+
+  useEffect(() => {
+    async function load() {
+      try {
+        const { data: t } = await supabase.from('tasks').select('*').eq('id', id).single();
+        if (!t) return;
+        setTask(t);
+
+        const baseLoads = [
+          supabase.from('projects').select('*, company:companies(*)').eq('id', t.project_id).single(),
+          supabase.from('submissions').select('*, files:submission_files(*), delivery:deliveries(*, files:delivery_files(*))').eq('task_id', id).order('version_number'),
+        ];
+
+        if (!isClient) {
+          baseLoads.push(supabase.from('profiles').select('*').eq('role', 'team'));
+        }
+
+        const results = await Promise.all(baseLoads);
+        const [{ data: p }, { data: subs }] = results;
+        setProject(p);
+        setCompany(p?.company || null);
+        setSubmissions(subs || []);
+
+        if (!isClient) {
+          setTeamMembers(results[2]?.data || []);
+        }
+
+        if (p?.company?.id && isTeam) {
+          const [{ data: projects }, { data: users }] = await Promise.all([
+            supabase.from('projects').select('id, name').eq('company_id', p.company.id).neq('id', t.project_id).order('name'),
+            supabase.from('profiles').select('id, name, email').eq('company_id', p.company.id).eq('role', 'client').order('name'),
+          ]);
+          setCompanyProjects(projects || []);
+          setCompanyUsers(users || []);
+        }
+      } catch (error) {
+        console.error('RequestDetail load failed:', error);
+      } finally {
+        setLoading(false);
+      }
+    }
+    load();
+  }, [id]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const refreshSubmissions = async () => {
+    const { data: subs } = await supabase
+      .from('submissions')
+      .select('*, files:submission_files(*), delivery:deliveries(*, files:delivery_files(*))')
+      .eq('task_id', id)
+      .order('version_number');
+    setSubmissions(subs || []);
+  };
+
+  // ── Team/External actions ──────────────────────────────────────────────────
+
+  const updateStatus = async (newStatus, message) => {
+    setSaving(true);
+    await supabase.from('tasks').update({ status: newStatus }).eq('id', id);
+    setTask(t => ({ ...t, status: newStatus }));
+    setNotification(message);
+    setSaving(false);
+  };
+
+  const handleStart = async () => {
+    await supabase.from('tasks').update({ status: 'in_progress', assigned_to: currentUser.id, assigned_name: currentUser.name }).eq('id', id);
+    setTask(t => ({ ...t, status: 'in_progress', assigned_to: currentUser.id, assigned_name: currentUser.name }));
+    setNotification('✓ Job started and assigned to you.');
+  };
+  const handleOnHold = () => updateStatus('on_hold', '✓ Job placed on hold.');
+  const handleResume = () => updateStatus('in_progress', '✓ Job resumed — back to In Progress.');
+
+  const handleAssign = async (e) => {
+    const value = e.target.value;
+    const member = teamMembers.find(m => m.id === value);
+    await supabase.from('tasks').update({ assigned_to: value || null, assigned_name: member?.name || null }).eq('id', id);
+    setTask(t => ({ ...t, assigned_to: value || null, assigned_name: member?.name || null }));
+    setNotification('✓ Job assigned.');
+  };
+
+  const handleTeamApprove = async () => {
+    setSaving(true);
+    const { error } = await supabase.from('tasks').update({ status: 'client_approved', completed_at: new Date().toISOString() }).eq('id', id);
+    if (error) {
+      setNotification(`✗ Error approving: ${error.message}`);
+    } else {
+      setTask(t => ({ ...t, status: 'client_approved', completed_at: new Date().toISOString() }));
+      setNotification('✓ Job approved.');
+    }
+    setSaving(false);
+  };
+
+  const handleDeleteTask = async () => {
+    if (isClient) {
+      setSaving(true);
+      try {
+        try {
+          const { data: subs } = await supabase.from('submissions').select('id').eq('task_id', id);
+          if (subs?.length > 0) {
+            const { data: storageFiles } = await supabase.from('submission_files').select('storage_path').in('submission_id', subs.map(s => s.id));
+            if (storageFiles?.length > 0) await supabase.storage.from('submissions').remove(storageFiles.map(f => f.storage_path));
+            const { data: deliveries } = await supabase.from('deliveries').select('id').in('submission_id', subs.map(s => s.id));
+            if (deliveries?.length > 0) {
+              const { data: deliveryFiles } = await supabase.from('delivery_files').select('storage_path').in('delivery_id', deliveries.map(d => d.id));
+              if (deliveryFiles?.length > 0) await supabase.storage.from('deliveries').remove(deliveryFiles.map(f => f.storage_path));
+            }
+          }
+        } catch (storageErr) {
+          console.warn('Storage cleanup failed, continuing:', storageErr.message);
+        }
+        const { error: deleteError } = await supabase.from('tasks').delete().eq('id', id);
+        if (deleteError) throw new Error(deleteError.message);
+        navigate('/projects');
+      } catch (err) {
+        console.error('Delete failed:', err);
+        alert(`Failed to delete: ${err.message}`);
+        setSaving(false);
+      }
+      return;
+    }
+    if (!window.confirm(`Delete "${task.title}"? All submissions and files will be permanently deleted.`)) return;
+    setSaving(true);
+    try {
+      try { await cleanupTaskStorage([id]); } catch (storageErr) { console.warn('Storage cleanup failed:', storageErr.message); }
+      const { error: deleteError } = await supabase.from('tasks').delete().eq('id', id);
+      if (deleteError) throw new Error(deleteError.message);
+      navigate(`/projects/${task.project_id}`);
+    } catch (err) {
+      setNotification(`✗ Error deleting task: ${err.message}`);
+      setSaving(false);
+    }
+  };
+
+  const handleSaveTitle = async (e) => {
+    e.preventDefault();
+    if (!titleVal.trim()) return;
+    setSavingTitle(true);
+    await supabase.from('tasks').update({ title: titleVal.trim() }).eq('id', id);
+    setTask(t => ({ ...t, title: titleVal.trim() }));
+    setEditingTitle(false);
+    setSavingTitle(false);
+  };
+
+  const handleSaveRevision = async (e) => {
+    e.preventDefault();
+    const nextVersion = Number.parseInt(revisionVal, 10);
+    if (!Number.isInteger(nextVersion) || nextVersion < 0 || nextVersion > 99) {
+      setNotification('✗ Error: Revision must be between R00 and R99.');
+      return;
+    }
+    const currentVersion = getRevisionBaseline(task, submissions);
+    const hasCollision = submissions.some(sub => sub.version_number === nextVersion && sub.version_number !== currentVersion);
+    if (hasCollision) {
+      setNotification(`✗ Error: ${rLabel(nextVersion)} already exists in this job history.`);
+      return;
+    }
+    setSavingRevision(true);
+    const currentSubmissionIds = submissions.filter(sub => sub.version_number === currentVersion).map(sub => sub.id);
+    if (currentSubmissionIds.length > 0) {
+      const { error: submissionsError } = await supabase.from('submissions').update({ version_number: nextVersion }).in('id', currentSubmissionIds);
+      if (submissionsError) { setNotification(`✗ Error: ${submissionsError.message}`); setSavingRevision(false); return; }
+    }
+    const { error: taskError } = await supabase.from('tasks').update({ current_version: nextVersion }).eq('id', id);
+    if (taskError) {
+      setNotification(`✗ Error: ${taskError.message}`);
+    } else {
+      setTask(t => ({ ...t, current_version: nextVersion }));
+      setSubmissions(prev => prev.map(sub => sub.version_number === currentVersion ? { ...sub, version_number: nextVersion } : sub));
+      setEditingRevision(false);
+      setNotification(`✓ Revision updated to ${rLabel(nextVersion)}.`);
+    }
+    setSavingRevision(false);
+  };
+
+  const handleSaveRequest = async (e) => {
+    e.preventDefault();
+    const currentPrimary = getCurrentPrimarySubmission(submissions, getRevisionBaseline(task, submissions));
+    if (!currentPrimary) return;
+    setSavingRequest(true);
+    const selectedRequester = requesterOptions.find(user => user.id === requestForm.requestedBy);
+    if (!selectedRequester) { setNotification('✗ Error: Please select who requested this task.'); setSavingRequest(false); return; }
+    const { error } = await supabase.from('submissions').update({
+      service_type: requestForm.serviceType,
+      deadline: requestForm.deadline || null,
+      is_hot: requestForm.isHot,
+      description: requestForm.description,
+      submitted_by: requestForm.requestedBy,
+      submitted_by_name: selectedRequester.name.replace(' (You)', ''),
+    }).eq('id', currentPrimary.id);
+    if (!error) {
+      setSubmissions(prev => prev.map(sub => sub.id === currentPrimary.id ? { ...sub, service_type: requestForm.serviceType, deadline: requestForm.deadline || null, is_hot: requestForm.isHot, description: requestForm.description, submitted_by: requestForm.requestedBy, submitted_by_name: selectedRequester.name.replace(' (You)', '') } : sub));
+      setEditingRequest(false);
+      setNotification('✓ Request details updated.');
+    } else {
+      setNotification(`✗ Error: ${error.message}`);
+    }
+    setSavingRequest(false);
+  };
+
+  const processFiles = (incoming) => {
+    const combined = [...sendForm.files, ...incoming];
+    const errors = [];
+    if (combined.length + currentDeliveryFiles.length > MAX_FILES) errors.push(`Maximum ${MAX_FILES} files allowed.`);
+    incoming.filter(f => f.size > MAX_SIZE_BYTES).forEach(f => errors.push(`"${f.name}" exceeds 10 MB limit.`));
+    if (errors.length > 0) { setFileErrors(errors); return; }
+    setFileErrors([]);
+    setSendForm(f => ({ ...f, files: combined }));
+  };
+
+  const handleOpenSendForm = async () => {
+    const currentPrimary = getCurrentPrimarySubmission(submissions, getRevisionBaseline(task, submissions));
+    const [{ data: profileRows }, { data: co }, requesterResult] = await Promise.all([
+      supabase.from('profiles').select('id, email').eq('company_id', company?.id).eq('role', 'client'),
+      supabase.from('companies').select('contact_email').eq('id', company?.id).single(),
+      currentPrimary?.submitted_by ? supabase.from('profiles').select('email').eq('id', currentPrimary.submitted_by).single() : Promise.resolve({ data: null }),
+    ]);
+    const requesterEmail = requesterResult?.data?.email || null;
+    const profileEmails = (profileRows || []).map(u => u.email).filter(Boolean);
+    const contactEmail = co?.contact_email;
+    const orderedEmails = requesterEmail ? [requesterEmail, ...profileEmails.filter(email => email !== requesterEmail)] : profileEmails;
+    setClientEmails(orderedEmails.length > 0 ? orderedEmails : (contactEmail ? [contactEmail] : []));
+    setSendForm({ files: [], message: currentPrimary?.delivery?.message || '' });
+    setExtraClientEmail('');
+    setShowSendForm(true);
+  };
+
+  const handleSendToClient = async (e) => {
+    e.preventDefault();
+    setSaving(true);
+    try {
+      const recipients = clientEmails.length > 0 ? clientEmails : (extraClientEmail ? [extraClientEmail] : []);
+      if (recipients.length === 0) throw new Error('No client email — add one before sending.');
+      const primarySub = getCurrentPrimarySubmission(submissions, getRevisionBaseline(task, submissions));
+      if (!primarySub) { setSaving(false); return; }
+      const existingFiles = primarySub.delivery?.files || [];
+      if (sendForm.files.length === 0 && existingFiles.length === 0) throw new Error('Attach at least one file before sending.');
+      const uploadedFiles = await uploadDeliveryFiles(id, sendForm.files);
+      if (extraClientEmail && clientEmails.length === 0) {
+        await supabase.from('companies').update({ contact_email: extraClientEmail }).eq('id', company.id);
+        setCompany(c => ({ ...c, contact_email: extraClientEmail }));
+      }
+      const { data: delivery, error: deliveryError } = await supabase.from('deliveries').upsert({ submission_id: primarySub.id, sent_by: currentUser?.name, message: sendForm.message, sent_at: new Date().toISOString() }, { onConflict: 'submission_id' }).select().single();
+      if (deliveryError) throw new Error(`Delivery failed: ${deliveryError.message}`);
+      if (delivery && uploadedFiles.length > 0) {
+        const { error: filesError } = await supabase.from('delivery_files').insert(uploadedFiles.map(f => ({ ...f, delivery_id: delivery.id })));
+        if (filesError) throw new Error(`File records failed: ${filesError.message}`);
+      }
+      await supabase.from('tasks').update({ status: 'client_review' }).eq('id', id);
+      setTask(t => ({ ...t, status: 'client_review' }));
+      await refreshSubmissions();
+      setShowSendForm(false);
+      setSendForm({ files: [], message: '' });
+      setExtraClientEmail('');
+      const totalDeliveredFiles = existingFiles.length + uploadedFiles.length;
+      const updateLabel = existingFiles.length > 0 ? `${uploadedFiles.length} new file${uploadedFiles.length !== 1 ? 's' : ''} added, ${totalDeliveredFiles} total` : `${uploadedFiles.length} file${uploadedFiles.length !== 1 ? 's' : ''} delivered`;
+      setNotification(`✓ Sent to client — ${updateLabel}.`);
+      void sendEmail('sent_to_client', recipients, { clientFirstName: company?.name, serviceType: task.title, projectName: project?.name, message: sendForm.message, taskId: id, senderEmail: currentUser?.email }).catch(err => console.error('Send-to-client email failed:', err));
+    } catch (err) {
+      setNotification(`✗ Error: ${err.message}`);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleWorkUpload = async (e) => {
+    e.preventDefault();
+    setSaving(true);
+    try {
+      const currentPrimary = getCurrentPrimarySubmission(submissions, getRevisionBaseline(task, submissions));
+      if (!currentPrimary) throw new Error('No submission found for this task.');
+      const uploadedFiles = [];
+      for (const file of workForm.files) {
+        const path = `${id}/${Date.now()}_${file.name}`;
+        const { data: uploaded, error } = await supabase.storage.from('submissions').upload(path, file);
+        if (error) throw new Error(`Upload failed: ${error.message}`);
+        if (uploaded) uploadedFiles.push({ name: file.name, storage_path: path, size: file.size });
+      }
+      if (uploadedFiles.length > 0) {
+        const { error: filesError } = await supabase.from('submission_files').insert(uploadedFiles.map(f => ({ ...f, submission_id: currentPrimary.id })));
+        if (filesError) throw new Error(`File records failed: ${filesError.message}`);
+      }
+      await supabase.from('tasks').update({ status: 'client_review' }).eq('id', id);
+      setTask(t => ({ ...t, status: 'client_review' }));
+      await refreshSubmissions();
+      setWorkForm({ files: [], description: '' });
+      setShowWorkUpload(false);
+      setNotification(`✓ Work submitted — ${uploadedFiles.length} file${uploadedFiles.length !== 1 ? 's' : ''} uploaded. Awaiting team review.`);
+    } catch (err) {
+      setNotification(`✗ Error: ${err.message}`);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleMoveProject = async () => {
+    if (!moveProjectId) return;
+    const dest = companyProjects.find(p => p.id === moveProjectId);
+    await supabase.from('tasks').update({ project_id: moveProjectId }).eq('id', id);
+    setTask(t => ({ ...t, project_id: moveProjectId }));
+    setProject(p => ({ ...p, id: moveProjectId, name: dest?.name }));
+    setCompanyProjects(prev => {
+      const updated = prev.filter(p => p.id !== moveProjectId);
+      if (project) updated.push({ id: project.id, name: project.name });
+      return updated.sort((a, b) => a.name.localeCompare(b.name));
+    });
+    setShowMoveProject(false);
+    setMoveProjectId('');
+    setNotification(`✓ Job moved to "${dest?.name}".`);
+  };
+
+  const handleCreateAndMove = async () => {
+    if (!newProjectName.trim()) return;
+    setSaving(true);
+    try {
+      const { data: newProj, error } = await supabase.from('projects').insert({ company_id: company.id, name: newProjectName.trim(), status: 'active' }).select().single();
+      if (error) throw new Error(error.message);
+      await supabase.from('tasks').update({ project_id: newProj.id }).eq('id', id);
+      setTask(t => ({ ...t, project_id: newProj.id }));
+      setProject(p => ({ ...p, id: newProj.id, name: newProj.name }));
+      setCompanyProjects(prev => [...prev, { id: project.id, name: project.name }].sort((a, b) => a.name.localeCompare(b.name)));
+      setShowMoveProject(false);
+      setShowNewProject(false);
+      setNewProjectName('');
+      setNotification(`✓ Project "${newProj.name}" created and job moved.`);
+    } catch (err) {
+      setNotification(`✗ Error: ${err.message}`);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  // ── Client-specific actions ────────────────────────────────────────────────
+
+  const handleClientApprove = async () => {
+    setSaving(true);
+    await supabase.from('tasks').update({ status: 'client_approved', completed_at: new Date().toISOString() }).eq('id', id);
+    setTask(t => ({ ...t, status: 'client_approved' }));
+    setClientAction('approved');
+    sendEmail('client_approved', 'hello@fourgebranding.com', { clientName: currentUser.name, serviceType: task.title, projectName: project?.name, taskId: id }).catch(err => console.error('Client approved email failed:', err));
+    setSaving(false);
+  };
+
+  const handleRevisionSubmit = async (e) => {
+    e.preventDefault();
+    setSaving(true);
+    const revisionBaseline = getRevisionBaseline(task, submissions);
+    try {
+      if (clientAction === 'edit') {
+        const { data: newSub, error: subError } = await supabase.from('submissions').insert({ task_id: id, version_number: revisionBaseline, type: 'amendment', is_hot: revisionForm.isHot, service_type: task.title, deadline: revisionForm.deadline || null, description: revisionForm.description, submitted_by: currentUser.id, submitted_by_name: currentUser.name }).select().single();
+        if (subError) throw new Error(subError.message);
+        if (newSub && revisionFiles.length > 0) {
+          for (const file of revisionFiles) {
+            const path = `${id}/${Date.now()}_${file.name}`;
+            const { data: uploaded, error: uploadError } = await supabase.storage.from('submissions').upload(path, file);
+            if (uploadError) throw new Error(`Failed to upload "${file.name}": ${uploadError.message}`);
+            if (uploaded) {
+              const { error: fileRecordError } = await supabase.from('submission_files').insert({ submission_id: newSub.id, name: file.name, storage_path: path, size: file.size });
+              if (fileRecordError) throw new Error(`Failed to save file record for "${file.name}": ${fileRecordError.message}`);
+            }
+          }
+          if (project?.name && task?.title) uploadFilesToRequestInfo(revisionFiles, project.name, task.title, revisionBaseline).catch(() => {});
+        }
+      } else {
+        const newVersion = revisionBaseline + 1;
+        await supabase.from('tasks').update({ status: 'not_started', current_version: newVersion, assigned_to: null, assigned_name: null }).eq('id', id);
+        const { data: newSub, error: subError } = await supabase.from('submissions').insert({ task_id: id, version_number: newVersion, type: 'revision', is_hot: revisionForm.isHot, revision_type: revisionForm.revisionType, service_type: revisionForm.serviceType, deadline: revisionForm.deadline || null, description: revisionForm.description, submitted_by: currentUser.id, submitted_by_name: currentUser.name }).select().single();
+        if (subError) throw new Error(subError.message);
+        if (newSub && revisionFiles.length > 0) {
+          for (const file of revisionFiles) {
+            const path = `${id}/${Date.now()}_${file.name}`;
+            const { data: uploaded, error: uploadError } = await supabase.storage.from('submissions').upload(path, file);
+            if (uploadError) throw new Error(`Failed to upload "${file.name}": ${uploadError.message}`);
+            if (uploaded) {
+              const { error: fileRecordError } = await supabase.from('submission_files').insert({ submission_id: newSub.id, name: file.name, storage_path: path, size: file.size });
+              if (fileRecordError) throw new Error(`Failed to save file record for "${file.name}": ${fileRecordError.message}`);
+            }
+          }
+          if (project?.name && task?.title) uploadFilesToRequestInfo(revisionFiles, project.name, task.title, newVersion).catch(() => {});
+        }
+        setTask(t => ({ ...t, status: 'not_started', current_version: newVersion, assigned_to: null, assigned_name: null }));
+        sendEmail('revision_submitted', 'hello@fourgebranding.com', { clientName: currentUser.name, serviceType: task.title, projectName: project?.name, version: rLabel(newVersion), deadline: revisionForm.deadline, description: revisionForm.description, taskId: id }).catch(err => console.error('Revision submitted email failed:', err));
+      }
+      await refreshSubmissions();
+      setSubmitted(true);
+      setClientAction(null);
+      setRevisionFiles([]);
+    } catch (err) {
+      console.error('Revision submit failed:', err);
+      alert(`Failed to submit: ${err.message}`);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  // ── File helpers ───────────────────────────────────────────────────────────
+
+  const getFileUrl = async (file) => {
+    const key = `delivery:${file.storage_path}`;
+    if (downloading) return;
+    setDownloading(key);
+    try {
+      const { data } = await supabase.storage.from('deliveries').createSignedUrl(file.storage_path, 3600, { download: file.name });
+      if (data?.signedUrl) window.open(data.signedUrl, '_blank');
+    } finally { setDownloading(''); }
+  };
+
+  const getSubmissionFileUrl = async (file) => {
+    const key = `submission:${file.storage_path}`;
+    if (downloading) return;
+    setDownloading(key);
+    try {
+      const { data } = await supabase.storage.from('submissions').createSignedUrl(file.storage_path, 3600, { download: file.name });
+      if (data?.signedUrl) window.open(data.signedUrl, '_blank');
+    } finally { setDownloading(''); }
+  };
+
+  const downloadAllSubmissionFiles = async (files, versionLabel) => {
+    const label = versionLabel || rLabel(getRevisionBaseline(task, submissions));
+    const key = `zip:${label}`;
+    if (downloading) return;
+    setDownloading(key);
+    try {
+      const zip = new JSZip();
+      for (const file of files) {
+        const { data } = await supabase.storage.from('submissions').createSignedUrl(file.storage_path, 3600, { download: file.name });
+        if (data?.signedUrl) {
+          const response = await fetch(data.signedUrl);
+          const blob = await response.blob();
+          zip.file(file.name, blob);
+        }
+      }
+      const content = await zip.generateAsync({ type: 'blob' });
+      const zipName = `${project?.name || 'files'} ${label}.zip`.replace(/[^a-z0-9 ._-]/gi, '_');
+      const a = document.createElement('a');
+      a.href = URL.createObjectURL(content);
+      a.download = zipName;
+      a.click();
+      URL.revokeObjectURL(a.href);
+    } finally { setDownloading(''); }
+  };
+
+  // ── Render ─────────────────────────────────────────────────────────────────
+
+  if (loading) return <Layout><p style={{ padding: 24, color: 'var(--text-muted)' }}>Loading...</p></Layout>;
+  if (!task) return <Layout><p>Request not found.</p></Layout>;
+
+  const revisionBaseline = getRevisionBaseline(task, submissions);
+  const titleWithVersion = `${task.title} ${rLabel(revisionBaseline)}`;
+
+  const canEdit = ['not_started', 'in_progress'].includes(task.status);
+  const canReview = task.status === 'client_review';
+  const canReopen = task.status === 'client_approved';
+
+  const clientFormTitle = clientAction === 'edit'
+    ? `Amend Request — ${rLabel(revisionBaseline)}`
+    : clientAction === 'reopen'
+    ? `Request New Revision — will become ${rLabel(revisionBaseline + 1)}`
+    : `Request a Revision — will become ${rLabel(revisionBaseline + 1)}`;
+
+  return (
+    <Layout>
+      <button className="back-link" onClick={() => navigate(`/projects/${task.project_id}`)}>
+        ← Back to {project?.name}
+      </button>
+
+      <div className="page-header">
+        <div>
+          {editingTitle && !isClient && !isExternal ? (
+            <form onSubmit={handleSaveTitle} style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 4 }}>
+              <input type="text" value={titleVal} onChange={e => setTitleVal(e.target.value)} autoFocus required style={{ fontSize: 22, fontWeight: 700, padding: '4px 10px', margin: 0, width: 280 }} />
+              <button type="submit" className="btn btn-primary btn-sm" disabled={savingTitle}>{savingTitle ? '...' : 'Save'}</button>
+              <button type="button" className="btn btn-outline btn-sm" onClick={() => setEditingTitle(false)}>Cancel</button>
+            </form>
+          ) : (
+            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
+              <div className="page-title">{titleWithVersion}</div>
+              {isTeam && (
+                <button className="btn-icon" title="Edit" onClick={() => { setTitleVal(task.title); setEditingTitle(true); }}>
+                  <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
+                </button>
+              )}
+            </div>
+          )}
+          <div className="page-subtitle">
+            {isTeam && company && (
+              <>
+                <Link to={`/company/${company.id}`} style={{ color: 'var(--accent)' }}>{company.name}</Link>
+                {' › '}
+              </>
+            )}
+            <Link to={`/projects/${project?.id}`} style={{ color: 'var(--accent)' }}>{project?.name}</Link>
+          </div>
+        </div>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+          <StatusBadge status={task.status} />
+          {isClient && clientAction !== 'confirm-delete' && (
+            <button className="btn-icon btn-icon-danger" onClick={() => setClientAction('confirm-delete')} title="Delete">✕</button>
+          )}
+          {!isClient && !isExternal && (
+            <button className="btn-icon btn-icon-danger" onClick={handleDeleteTask} title="Delete Job">✕</button>
+          )}
+        </div>
+      </div>
+
+      {/* Client delete confirm */}
+      {isClient && clientAction === 'confirm-delete' && (
+        <div className="card" style={{ background: 'var(--bg)', borderColor: 'var(--danger)', marginBottom: 24 }}>
+          <div style={{ fontWeight: 600, marginBottom: 8 }}>⚠ Delete this request?</div>
+          <p style={{ fontSize: 13, color: 'var(--text-secondary)', marginBottom: 16 }}>
+            This will permanently delete <strong>{titleWithVersion}</strong> and all its history. This cannot be undone.
+          </p>
+          <div className="action-buttons">
+            <button className="btn" style={{ background: '#ef4444', color: 'white', border: 'none' }} onClick={handleDeleteTask} disabled={saving}>
+              {saving ? 'Deleting...' : 'Yes, Delete'}
+            </button>
+            <button className="btn btn-outline" onClick={() => setClientAction(null)}>Cancel</button>
+          </div>
+        </div>
+      )}
+
+      {/* Notifications */}
+      {notification && <div className="notification notification-success">{notification}</div>}
+      {isClient && submitted && (
+        <div className="notification notification-success">
+          ✓ Your {clientAction === 'edit' ? 'changes have' : 'revision request has'} been submitted. Our team will get started shortly.
+        </div>
+      )}
+      {isClient && clientAction === 'approved' && (
+        <div className="notification notification-success">
+          ✓ You have approved {rLabel(revisionBaseline)}. This job is now complete!
+        </div>
+      )}
+
+      {/* Client action cards */}
+      {isClient && canReview && !submitted && clientAction !== 'confirm-delete' && clientAction !== 'revision' && (
+        <div className="card" style={{ borderColor: 'var(--accent)', marginBottom: 24 }}>
+          <div style={{ fontWeight: 600, marginBottom: 8 }}>🎨 Your work is ready for review!</div>
+          <p style={{ fontSize: 13, color: 'var(--text-secondary)', marginBottom: 16 }}>
+            Please review the delivered work for <strong>{titleWithVersion}</strong> and let us know if you are happy or need changes.
+          </p>
+          <div className="action-buttons">
+            <button className="btn btn-success" onClick={handleClientApprove} disabled={saving}>✓ Approve — I'm Happy!</button>
+            <button className="btn btn-warning" onClick={() => { setClientAction('revision'); setRevisionForm(f => ({ ...f, serviceType: task.title })); }}>✏️ Request Revision</button>
+          </div>
+        </div>
+      )}
+      {isClient && canEdit && !submitted && clientAction !== 'confirm-delete' && clientAction !== 'edit' && (
+        <div className="card" style={{ marginBottom: 24 }}>
+          <div style={{ fontWeight: 600, marginBottom: 8 }}>✏️ Need to make changes?</div>
+          <p style={{ fontSize: 13, color: 'var(--text-secondary)', marginBottom: 16 }}>
+            Your request is still being worked on. You can update the details or requirements.
+          </p>
+          <button className="btn btn-warning" onClick={() => {
+            const currentPrimary = submissions.find(sub => sub.version_number === revisionBaseline && sub.type !== 'amendment') || submissions[0];
+            setClientAction('edit');
+            setRevisionForm({ serviceType: task.title, deadline: currentPrimary?.deadline || addDaysToDateOnly(getTodayDateOnlyEST(), 3), description: currentPrimary?.description || '', revisionType: 'client_revision', isHot: Boolean(currentPrimary?.is_hot) });
+          }}>
+            Edit Request
+          </button>
+        </div>
+      )}
+      {isClient && canReopen && !submitted && clientAction !== 'confirm-delete' && clientAction !== 'reopen' && (
+        <div className="card" style={{ marginBottom: 24 }}>
+          <div style={{ fontWeight: 600, marginBottom: 8 }}>🔄 Need more changes?</div>
+          <p style={{ fontSize: 13, color: 'var(--text-secondary)', marginBottom: 16 }}>
+            This job was approved but you can still request a new revision if needed.
+          </p>
+          <button className="btn btn-warning" onClick={() => { setClientAction('reopen'); setRevisionForm({ serviceType: task.title, deadline: addDaysToDateOnly(getTodayDateOnlyEST(), 3), description: '', revisionType: 'client_revision', isHot: false }); }}>
+            Request New Revision
+          </button>
+        </div>
+      )}
+
+      {/* Client revision form */}
+      {isClient && (clientAction === 'revision' || clientAction === 'edit' || clientAction === 'reopen') && (
+        <div className="card" style={{ marginBottom: 24 }}>
+          <div className="card-title">{clientFormTitle}</div>
+          <form onSubmit={handleRevisionSubmit}>
+            <div className="grid-2">
+              <div className="form-group">
+                <label>Service Type</label>
+                <input type="text" value={revisionForm.serviceType} readOnly disabled style={{ opacity: 0.6, cursor: 'not-allowed' }} />
+              </div>
+              <div className="form-group">
+                <label>Deadline</label>
+                <input type="date" value={revisionForm.deadline} onChange={e => setRevisionForm(f => ({ ...f, deadline: e.target.value }))} />
+              </div>
+            </div>
+            <div className="form-group" style={{ marginTop: -4 }}>
+              <label style={{ display: 'flex', alignItems: 'center', gap: 10, fontWeight: 500, cursor: 'pointer' }}>
+                <input type="checkbox" checked={revisionForm.isHot} onChange={e => setRevisionForm(f => ({ ...f, isHot: e.target.checked }))} />
+                <span>Mark as Hot</span>
+              </label>
+            </div>
+            {(clientAction === 'revision' || clientAction === 'reopen') && (
+              <div className="form-group">
+                <label>Revision Type *</label>
+                <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginTop: 4 }}>
+                  <label style={{ display: 'flex', alignItems: 'flex-start', gap: 10, cursor: 'pointer', fontWeight: 400 }}>
+                    <input type="radio" name="revisionType" value="client_revision" checked={revisionForm.revisionType === 'client_revision'} onChange={e => setRevisionForm(f => ({ ...f, revisionType: e.target.value }))} style={{ marginTop: 2, flexShrink: 0 }} />
+                    <div>
+                      <div style={{ fontWeight: 600, fontSize: 13 }}>Client Revision</div>
+                      <div style={{ fontSize: 12, color: 'var(--text-muted)' }}>I want changes made to the current work</div>
+                    </div>
+                  </label>
+                  <label style={{ display: 'flex', alignItems: 'flex-start', gap: 10, cursor: 'pointer', fontWeight: 400 }}>
+                    <input type="radio" name="revisionType" value="fourge_error" checked={revisionForm.revisionType === 'fourge_error'} onChange={e => setRevisionForm(f => ({ ...f, revisionType: e.target.value }))} style={{ marginTop: 2, flexShrink: 0 }} />
+                    <div>
+                      <div style={{ fontWeight: 600, fontSize: 13 }}>Fourge Error</div>
+                      <div style={{ fontSize: 12, color: 'var(--text-muted)' }}>Something was incorrect or not delivered as agreed</div>
+                    </div>
+                  </label>
+                </div>
+              </div>
+            )}
+            <div className="form-group">
+              <label>{clientAction === 'edit' ? 'What would you like to change? *' : 'What needs to be changed? *'}</label>
+              <textarea placeholder={clientAction === 'edit' ? "Describe what you'd like to update or change..." : "Describe exactly what you'd like us to change or improve..."} value={revisionForm.description} onChange={e => setRevisionForm(f => ({ ...f, description: e.target.value }))} required />
+            </div>
+            <FileAttachment files={revisionFiles} onChange={setRevisionFiles} />
+            <div className="action-buttons">
+              <button type="submit" className="btn btn-primary" disabled={saving}>{saving ? 'Submitting...' : 'Submit'}</button>
+              <button type="button" className="btn btn-outline" onClick={() => setClientAction(null)}>Cancel</button>
+            </div>
+          </form>
+        </div>
+      )}
+
+      {/* Team/External: Send form */}
+      {!isClient && showSendForm && (
+        <div className="card" style={{ marginBottom: 24, border: '1px solid var(--accent)', borderRadius: 12 }}>
+          <div className="card-title">{currentDelivery ? 'Update Client Delivery' : 'Send to Client'} — {company?.name}</div>
+          <p style={{ fontSize: 13, color: 'var(--text-secondary)', marginBottom: 16 }}>
+            {currentDelivery ? 'Add files or resend the email with the current delivery package.' : 'Upload the completed file and add an optional message for the client.'}
+          </p>
+          <form onSubmit={handleSendToClient}>
+            <div className="form-group">
+              <label>
+                {currentDelivery ? 'Add Files' : 'Attach Files *'}
+                <span style={{ fontWeight: 400, color: 'var(--text-muted)', marginLeft: 6 }}>Up to {MAX_FILES} files · Max {MAX_SIZE_MB} MB each</span>
+              </label>
+              <div
+                onDragEnter={e => { e.preventDefault(); dragCounter.current++; setDragging(true); }}
+                onDragLeave={e => { e.preventDefault(); dragCounter.current--; if (dragCounter.current === 0) setDragging(false); }}
+                onDragOver={e => e.preventDefault()}
+                onDrop={e => { e.preventDefault(); dragCounter.current = 0; setDragging(false); const dropped = Array.from(e.dataTransfer.files); if (dropped.length > 0) processFiles(dropped); }}
+                style={{ border: `2px dashed ${dragging ? 'var(--accent)' : sendForm.files.length > 0 ? 'var(--accent)' : 'var(--border)'}`, borderRadius: 8, padding: '20px 16px', textAlign: 'center', background: dragging ? 'color-mix(in srgb, var(--accent) 8%, var(--bg))' : 'var(--bg)', transition: 'all 0.15s' }}
+              >
+                <input type="file" multiple onChange={e => { processFiles(Array.from(e.target.files)); e.target.value = ''; }} style={{ display: 'none' }} id="file-upload" />
+                <label htmlFor="file-upload" style={{ cursor: 'pointer' }}>
+                  <div style={{ fontSize: 24, marginBottom: 6 }}>{dragging ? '📂' : '📎'}</div>
+                  <div style={{ fontWeight: 600, fontSize: 13 }}>{dragging ? 'Drop files here' : sendForm.files.length > 0 ? `${sendForm.files.length} file${sendForm.files.length !== 1 ? 's' : ''} added — click or drag to add more` : 'Click or drag files here'}</div>
+                  <div style={{ fontSize: 12, color: 'var(--text-secondary)', marginTop: 4 }}>Any file type accepted</div>
+                </label>
+              </div>
+              {fileErrors.map((err, i) => <div key={i} style={{ fontSize: 12, color: 'var(--danger)', marginTop: 4 }}>⚠ {err}</div>)}
+              {sendForm.files.length > 0 && (
+                <div style={{ marginTop: 10, display: 'flex', flexDirection: 'column', gap: 6 }}>
+                  {sendForm.files.map((file, i) => (
+                    <div key={i} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '8px 12px', background: 'var(--card-bg)', borderRadius: 8, border: '1px solid var(--border)' }}>
+                      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}><span>📄</span><div><div style={{ fontSize: 13, fontWeight: 600 }}>{file.name}</div><div style={{ fontSize: 11, color: 'var(--text-muted)' }}>{formatSize(file.size)}</div></div></div>
+                      <button type="button" onClick={() => setSendForm(f => ({ ...f, files: f.files.filter((_, fi) => fi !== i) }))} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--danger)', fontSize: 16 }}>✕</button>
+                    </div>
+                  ))}
+                </div>
+              )}
+              {currentDeliveryFiles.length > 0 && (
+                <div style={{ marginTop: 12 }}>
+                  <div style={{ fontSize: 11, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.5px', color: 'var(--text-muted)', marginBottom: 6 }}>Already Delivered</div>
+                  <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
+                    {currentDeliveryFiles.map((file, i) => (
+                      <div key={file.id || i} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '8px 12px', background: 'var(--card-bg)', borderRadius: 8, border: '1px solid var(--border)' }}>
+                        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}><span>📄</span><div><div style={{ fontSize: 13, fontWeight: 600 }}>{file.name}</div>{file.size > 0 && <div style={{ fontSize: 11, color: 'var(--text-muted)' }}>{formatSize(file.size)}</div>}</div></div>
+                        <LoadingButton className="btn btn-outline btn-sm" loading={downloading === `delivery:${file.storage_path}`} disabled={Boolean(downloading)} loadingText="Downloading..." onClick={() => getFileUrl(file)}>📥 Download</LoadingButton>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              )}
+            </div>
+            <div className="form-group">
+              <label>Message to Client <span style={{ fontWeight: 400, color: 'var(--text-muted)' }}>(optional)</span></label>
+              <textarea placeholder={`Hi ${company?.name}, your ${task.title} is ready for review!`} value={sendForm.message} onChange={e => setSendForm(f => ({ ...f, message: e.target.value }))} style={{ minHeight: 80 }} />
+            </div>
+            {clientEmails.length === 0 && (
+              <div className="form-group" style={{ padding: '12px 14px', background: 'color-mix(in srgb, var(--danger) 8%, var(--bg))', borderRadius: 8, border: '1px solid var(--danger)' }}>
+                <label style={{ color: 'var(--danger)', marginBottom: 6, display: 'block' }}>⚠ No client email on file for {company?.name}</label>
+                <input type="email" required placeholder="client@example.com" value={extraClientEmail} onChange={e => setExtraClientEmail(e.target.value)} />
+                <p style={{ fontSize: 12, color: 'var(--text-muted)', marginTop: 6, marginBottom: 0 }}>This will be saved as the company contact email.</p>
+              </div>
+            )}
+            <div className="action-buttons">
+              <button type="submit" className="btn btn-success" disabled={(sendForm.files.length === 0 && currentDeliveryFiles.length === 0) || saving || (clientEmails.length === 0 && !extraClientEmail)}>
+                {saving ? 'Uploading...' : `✉️ ${currentDelivery ? 'Resend to Client' : 'Send to Client'}${sendForm.files.length > 0 ? ` (${sendForm.files.length} new file${sendForm.files.length !== 1 ? 's' : ''})` : ''}`}
+              </button>
+              <button type="button" className="btn btn-outline" onClick={() => { setShowSendForm(false); setSendForm({ files: [], message: '' }); setExtraClientEmail(''); }}>Cancel</button>
+            </div>
+          </form>
+        </div>
+      )}
+
+      {/* Team/External: External work upload */}
+      {isExternal && showWorkUpload && (
+        <div className="card" style={{ marginBottom: 24, border: '1px solid var(--accent)', borderRadius: 12 }}>
+          <div className="card-title">Submit Finished Work</div>
+          <p style={{ fontSize: 13, color: 'var(--text-secondary)', marginBottom: 16 }}>Upload your completed files. This will mark the task as ready for team review.</p>
+          <form onSubmit={handleWorkUpload}>
+            <div className="form-group">
+              <label>Files * <span style={{ fontWeight: 400, color: 'var(--text-muted)', marginLeft: 6 }}>Up to {MAX_FILES} files · Max {MAX_SIZE_MB} MB each</span></label>
+              <div
+                onDragEnter={e => { e.preventDefault(); workDragCounter.current++; setWorkDragging(true); }}
+                onDragLeave={e => { e.preventDefault(); workDragCounter.current--; if (workDragCounter.current === 0) setWorkDragging(false); }}
+                onDragOver={e => e.preventDefault()}
+                onDrop={e => { e.preventDefault(); workDragCounter.current = 0; setWorkDragging(false); const dropped = Array.from(e.dataTransfer.files); if (dropped.length > 0) { const combined = [...workForm.files, ...dropped]; if (combined.length > MAX_FILES) { setWorkFileErrors([`Maximum ${MAX_FILES} files allowed.`]); return; } setWorkFileErrors([]); setWorkForm(f => ({ ...f, files: combined })); }; }}
+                style={{ border: `2px dashed ${workDragging ? 'var(--accent)' : workForm.files.length > 0 ? 'var(--accent)' : 'var(--border)'}`, borderRadius: 8, padding: '20px 16px', textAlign: 'center', background: workDragging ? 'color-mix(in srgb, var(--accent) 8%, var(--bg))' : 'var(--bg)', transition: 'all 0.15s' }}
+              >
+                <input type="file" multiple onChange={e => { const combined = [...workForm.files, ...Array.from(e.target.files)]; if (combined.length > MAX_FILES) { setWorkFileErrors([`Maximum ${MAX_FILES} files allowed.`]); return; } setWorkFileErrors([]); setWorkForm(f => ({ ...f, files: combined })); e.target.value = ''; }} style={{ display: 'none' }} id="work-file-upload" />
+                <label htmlFor="work-file-upload" style={{ cursor: 'pointer' }}>
+                  <div style={{ fontSize: 24, marginBottom: 6 }}>{workDragging ? '📂' : '📎'}</div>
+                  <div style={{ fontWeight: 600, fontSize: 13 }}>{workDragging ? 'Drop files here' : workForm.files.length > 0 ? `${workForm.files.length} file${workForm.files.length !== 1 ? 's' : ''} added` : 'Click or drag files here'}</div>
+                  <div style={{ fontSize: 12, color: 'var(--text-secondary)', marginTop: 4 }}>Any file type accepted</div>
+                </label>
+              </div>
+              {workFileErrors.map((err, i) => <div key={i} style={{ fontSize: 12, color: 'var(--danger)', marginTop: 4 }}>⚠ {err}</div>)}
+              {workForm.files.length > 0 && (
+                <div style={{ marginTop: 10, display: 'flex', flexDirection: 'column', gap: 6 }}>
+                  {workForm.files.map((file, i) => (
+                    <div key={i} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '8px 12px', background: 'var(--card-bg)', borderRadius: 8, border: '1px solid var(--border)' }}>
+                      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}><span>📄</span><div><div style={{ fontSize: 13, fontWeight: 600 }}>{file.name}</div><div style={{ fontSize: 11, color: 'var(--text-muted)' }}>{formatSize(file.size)}</div></div></div>
+                      <button type="button" onClick={() => setWorkForm(f => ({ ...f, files: f.files.filter((_, fi) => fi !== i) }))} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--danger)', fontSize: 16 }}>✕</button>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+            <div className="form-group">
+              <label>Notes <span style={{ fontWeight: 400, color: 'var(--text-muted)' }}>(optional)</span></label>
+              <textarea placeholder="Any notes for the team..." value={workForm.description} onChange={e => setWorkForm(f => ({ ...f, description: e.target.value }))} style={{ minHeight: 80 }} />
+            </div>
+            <div className="action-buttons">
+              <button type="submit" className="btn btn-primary" disabled={workForm.files.length === 0 || saving}>{saving ? 'Submitting...' : `⬆ Submit${workForm.files.length > 0 ? ` (${workForm.files.length} file${workForm.files.length !== 1 ? 's' : ''})` : ''}`}</button>
+              <button type="button" className="btn btn-outline" onClick={() => { setShowWorkUpload(false); setWorkForm({ files: [], description: '' }); }}>Cancel</button>
+            </div>
+          </form>
+        </div>
+      )}
+
+      {/* Job details card (team/external only) */}
+      {!isClient && (
+        <div className="grid-2" style={{ marginBottom: 24 }}>
+          <div className="card">
+            <div className="card-title">Job Details</div>
+            <div className="detail-grid" style={{ marginBottom: 16 }}>
+              <div className="detail-item"><label>Status</label><p><StatusBadge status={task.status} /></p></div>
+              <div className="detail-item">
+                <label>Revision</label>
+                {editingRevision && isTeam ? (
+                  <form onSubmit={handleSaveRevision} style={{ display: 'flex', alignItems: 'center', gap: 6, marginTop: 4 }}>
+                    <span style={{ fontWeight: 700, fontSize: 13 }}>R</span>
+                    <input type="text" inputMode="numeric" pattern="[0-9]*" maxLength={2} value={revisionVal} onChange={e => setRevisionVal(e.target.value.replace(/\D/g, '').slice(0, 2))} autoFocus required style={{ width: 54, padding: '4px 8px', fontSize: 13 }} />
+                    <button type="submit" className="btn btn-primary btn-sm" disabled={savingRevision}>{savingRevision ? '...' : 'Save'}</button>
+                    <button type="button" className="btn btn-outline btn-sm" onClick={() => setEditingRevision(false)}>Cancel</button>
+                  </form>
+                ) : (
+                  <p style={{ display: 'flex', alignItems: 'center', gap: 8, fontWeight: 700, fontSize: 16 }}>
+                    {rLabel(revisionBaseline)}
+                    {isTeam && (
+                      <button className="btn-icon" title="Edit" onClick={() => { setRevisionVal(String(revisionBaseline).padStart(2, '0')); setEditingRevision(true); }}>
+                        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
+                      </button>
+                    )}
+                  </p>
+                )}
+              </div>
+              <div className="detail-item"><label>Submitted</label><p>{formatDateEST(task.submitted_at)}</p></div>
+              <div className="detail-item"><label>Completed</label><p>{task.completed_at ? formatDateEST(task.completed_at) : '—'}</p></div>
+              <div className="detail-item"><label>Revisions Done</label><p>{revisionBaseline}</p></div>
+            </div>
+            {isTeam && (
+              <div className="form-group">
+                <label>Assigned To</label>
+                <select value={task.assigned_to || ''} onChange={handleAssign} style={{ width: '100%' }}>
+                  <option value="">Unassigned</option>
+                  {task.assigned_to && !teamMembers.find(m => m.id === task.assigned_to) && (
+                    <option value={task.assigned_to}>{task.assigned_name || 'Unknown'}</option>
+                  )}
+                  {teamMembers.map(m => <option key={m.id} value={m.id}>{m.name}</option>)}
+                </select>
+              </div>
+            )}
+            {isExternal && task.assigned_name && (
+              <div className="form-group">
+                <label>Assigned To</label>
+                <p style={{ margin: 0, fontSize: 14 }}>{task.assigned_name}</p>
+              </div>
+            )}
+            <div className="action-buttons" style={{ marginTop: 8 }}>
+              {task.status === 'not_started' && (
+                <button className="btn btn-primary btn-sm" onClick={handleStart} disabled={saving}>▶ Start Job</button>
+              )}
+              {task.status === 'in_progress' && (
+                <>
+                  {!showSendForm && <button className="btn btn-success btn-sm" onClick={handleOpenSendForm}>✉️ Send to Client</button>}
+                  {isExternal && !showWorkUpload && <button className="btn btn-outline btn-sm" onClick={() => setShowWorkUpload(true)}>⬆ Submit Work</button>}
+                  <button className="btn btn-outline btn-sm" onClick={handleOnHold} disabled={saving}>⏸ Put On Hold</button>
+                </>
+              )}
+              {task.status === 'on_hold' && (
+                <button className="btn btn-primary btn-sm" onClick={handleResume} disabled={saving}>▶ Resume</button>
+              )}
+              {task.status === 'client_review' && (
+                <>
+                  {!isExternal && !showSendForm && <button className="btn btn-success btn-sm" onClick={handleOpenSendForm}>✉️ Add Files / Resend</button>}
+                  {isExternal && !showSendForm && <button className="btn btn-outline btn-sm" onClick={handleOpenSendForm}>📎 Add Files</button>}
+                  {isTeam ? (
+                    <button className="btn btn-success btn-sm" onClick={handleTeamApprove} disabled={saving}>✓ Approve Request</button>
+                  ) : (
+                    <div style={{ padding: '10px 14px', background: 'var(--bg)', borderRadius: 8, fontSize: 13, color: '#7c3aed', fontWeight: 500 }}>
+                      ⏳ Awaiting client review.
+                    </div>
+                  )}
+                </>
+              )}
+              {task.status === 'client_approved' && (
+                <div style={{ padding: '10px 14px', background: 'var(--bg)', borderRadius: 8, fontSize: 13, color: '#16a34a', fontWeight: 500 }}>
+                  ✓ Client approved this job.
+                </div>
+              )}
+            </div>
+            {isTeam && (
+              <div style={{ marginTop: 12, paddingTop: 12, borderTop: '1px solid var(--border)' }}>
+                {!showMoveProject ? (
+                  <button className="btn btn-outline btn-sm" onClick={() => setShowMoveProject(true)}>↗ Move to Project</button>
+                ) : showNewProject ? (
+                  <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+                    <input type="text" placeholder="New project name..." value={newProjectName} onChange={e => setNewProjectName(e.target.value)} onKeyDown={e => e.key === 'Enter' && handleCreateAndMove()} autoFocus style={{ flex: 1, fontSize: 13 }} />
+                    <button className="btn btn-primary btn-sm" onClick={handleCreateAndMove} disabled={!newProjectName.trim() || saving}>{saving ? '...' : 'Create & Move'}</button>
+                    <button className="btn btn-outline btn-sm" onClick={() => { setShowNewProject(false); setNewProjectName(''); }}>Back</button>
+                  </div>
+                ) : (
+                  <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+                    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+                      <select value={moveProjectId} onChange={e => setMoveProjectId(e.target.value)} style={{ flex: 1, fontSize: 13 }}>
+                        <option value="">Select project...</option>
+                        {companyProjects.map(p => <option key={p.id} value={p.id}>{p.name}</option>)}
+                      </select>
+                      <button className="btn btn-primary btn-sm" onClick={handleMoveProject} disabled={!moveProjectId}>Move</button>
+                      <button className="btn btn-outline btn-sm" onClick={() => { setShowMoveProject(false); setShowNewProject(false); setMoveProjectId(''); }}>Cancel</button>
+                    </div>
+                    <button className="btn btn-outline btn-sm" style={{ alignSelf: 'flex-start', fontSize: 12 }} onClick={() => setShowNewProject(true)}>+ Create new project</button>
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
+
+          <div className="card">
+            <div className="card-title">Current Request Notes</div>
+            {submissions.length === 0 ? (
+              <p style={{ color: 'var(--text-muted)', fontSize: 13 }}>No request notes yet.</p>
+            ) : (() => {
+              const primary = getCurrentPrimarySubmission(submissions, revisionBaseline);
+              const currentGroup = primary ? submissions.filter(s => s.version_number === primary.version_number) : [];
+              const amendments = currentGroup.filter(s => s.type === 'amendment');
+              if (!primary) return null;
+              const startEditRequest = () => {
+                setRequestForm({ serviceType: primary.service_type || '', deadline: primary.deadline || '', description: primary.description || '', requestedBy: primary.submitted_by || currentUser?.id || '', isHot: Boolean(primary.is_hot) });
+                setEditingRequest(true);
+              };
+              return (
+                <>
+                  <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 14 }}>
+                    <span style={{ fontWeight: 700, fontSize: 13 }}>{rLabel(primary.version_number)}</span>
+                    <StatusBadge status={primary.type} />
+                    <span style={{ fontSize: 12, color: 'var(--text-muted)', marginLeft: 'auto' }}>{primary.submitted_by_name} · {formatDateEST(primary.submitted_at)}</span>
+                    {isTeam && !editingRequest && (
+                      <button className="btn-icon" title="Edit" onClick={startEditRequest}>
+                        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
+                      </button>
+                    )}
+                  </div>
+                  {editingRequest && isTeam ? (
+                    <form onSubmit={handleSaveRequest}>
+                      <div className="grid-2" style={{ marginBottom: 14 }}>
+                        <div className="form-group" style={{ marginBottom: 0 }}>
+                          <label>Service Type</label>
+                          <select value={requestForm.serviceType} onChange={e => setRequestForm(f => ({ ...f, serviceType: e.target.value }))} required>
+                            <option value="">Select service...</option>
+                            {serviceTypes.map(service => <option key={service} value={service}>{service}</option>)}
+                          </select>
+                        </div>
+                        <div className="form-group" style={{ marginBottom: 0 }}>
+                          <label>Deadline</label>
+                          <input type="date" value={requestForm.deadline} onChange={e => setRequestForm(f => ({ ...f, deadline: e.target.value }))} />
+                        </div>
+                      </div>
+                      <div className="form-group">
+                        <label>Requested By *</label>
+                        <select value={requestForm.requestedBy} onChange={e => setRequestForm(f => ({ ...f, requestedBy: e.target.value }))} required>
+                          <option value="">Select requester...</option>
+                          {requesterOptions.map(user => <option key={user.id} value={user.id}>{user.name}{user.email ? ` (${user.email})` : ''}</option>)}
+                        </select>
+                      </div>
+                      <div className="form-group">
+                        <label style={{ display: 'flex', alignItems: 'center', gap: 10, fontWeight: 500, cursor: 'pointer' }}>
+                          <input type="checkbox" checked={requestForm.isHot} onChange={e => setRequestForm(f => ({ ...f, isHot: e.target.checked }))} />
+                          <span>Mark as Hot</span>
+                        </label>
+                      </div>
+                      <div className="form-group">
+                        <label>Description</label>
+                        <textarea value={requestForm.description} onChange={e => setRequestForm(f => ({ ...f, description: e.target.value }))} style={{ minHeight: 100 }} />
+                      </div>
+                      <div className="action-buttons" style={{ marginBottom: 14 }}>
+                        <button type="submit" className="btn btn-primary btn-sm" disabled={savingRequest}>{savingRequest ? 'Saving...' : 'Save'}</button>
+                        <button type="button" className="btn btn-outline btn-sm" onClick={() => setEditingRequest(false)}>Cancel</button>
+                      </div>
+                    </form>
+                  ) : (
+                    <>
+                      <div className="detail-grid" style={{ marginBottom: 14 }}>
+                        <div className="detail-item"><label>Service Type</label><p>{primary.service_type}</p></div>
+                        <div className="detail-item"><label>Deadline</label><p>{primary.deadline || '—'}</p></div>
+                        <div className="detail-item"><label>Hot</label><p>{primary.is_hot ? 'Yes' : 'No'}</p></div>
+                      </div>
+                      <div className="detail-item" style={{ marginBottom: 14 }}>
+                        <label>Requested By</label>
+                        <p>{primary.submitted_by_name || '—'}</p>
+                      </div>
+                      <div>
+                        <label style={{ fontSize: 11, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.5px', color: 'var(--text-muted)' }}>Description</label>
+                        <p style={{ marginTop: 8, fontSize: 14, lineHeight: 1.7, color: 'var(--text-primary)', background: 'var(--bg)', padding: '12px 14px', borderRadius: 8, border: '1px solid var(--border)', whiteSpace: 'pre-wrap' }}>{primary.description}</p>
+                      </div>
+                    </>
+                  )}
+                  {amendments.map(amendment => (
+                    <div key={amendment.id} style={{ marginTop: 12, padding: '12px 14px', background: 'var(--bg)', borderRadius: 8, border: '1px solid var(--border)' }}>
+                      <div style={{ fontSize: 11, fontWeight: 700, textTransform: 'uppercase', color: 'var(--accent)', marginBottom: 6, letterSpacing: 0.5 }}>Amended Request</div>
+                      <div style={{ fontSize: 12, color: 'var(--text-muted)', marginBottom: 6 }}>{amendment.submitted_by_name} · {formatDateEST(amendment.submitted_at)}</div>
+                      <p style={{ fontSize: 13, lineHeight: 1.6, color: 'var(--text-secondary)', whiteSpace: 'pre-wrap', margin: 0 }}>{amendment.description}</p>
+                      {amendment.files?.length > 0 && (
+                        <div style={{ marginTop: 8, display: 'flex', flexDirection: 'column', gap: 4 }}>
+                          {amendment.files.map((file, fi) => (
+                            <div key={fi} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '5px 10px', background: 'var(--card-bg)', borderRadius: 6, border: '1px solid var(--border)' }}>
+                              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}><span>📎</span><span style={{ fontSize: 12, fontWeight: 500 }}>{file.name}</span></div>
+                              <LoadingButton className="btn-icon" loading={downloading === `submission:${file.storage_path}`} disabled={Boolean(downloading)} loadingText="↓" onClick={() => getSubmissionFileUrl(file)}>📥 Download</LoadingButton>
+                            </div>
+                          ))}
+                        </div>
+                      )}
+                    </div>
+                  ))}
+                  {primary.files?.length > 0 && (
+                    <div style={{ marginTop: 12 }}>
+                      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 6 }}>
+                        <label style={{ fontSize: 11, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.5px', color: 'var(--text-muted)' }}>Attached Files</label>
+                        <LoadingButton className="btn-icon" loading={downloading === `zip:${rLabel(primary.version_number)}`} disabled={Boolean(downloading)} loadingText="↓" onClick={() => downloadAllSubmissionFiles(primary.files, rLabel(primary.version_number))}>⬇ Download All</LoadingButton>
+                      </div>
+                      <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
+                        {primary.files.map((file, fi) => (
+                          <div key={fi} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '6px 10px', background: 'var(--bg)', borderRadius: 6, border: '1px solid var(--border)' }}>
+                            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}><span>📎</span><span style={{ fontSize: 13, fontWeight: 500 }}>{file.name}</span></div>
+                            <LoadingButton className="btn btn-outline btn-sm" loading={downloading === `submission:${file.storage_path}`} disabled={Boolean(downloading)} loadingText="Downloading..." onClick={() => getSubmissionFileUrl(file)}>📥 Download</LoadingButton>
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+                  )}
+                </>
+              );
+            })()}
+          </div>
+        </div>
+      )}
+
+      {/* Revision history */}
+      {submissions.length > 0 && (
+      <div className="card" style={{ marginBottom: 24 }}>
+        <div className="card-title">Revision History</div>
+      <div className={isClient ? 'version-timeline' : undefined} style={isClient ? undefined : { display: 'flex', flexDirection: 'column', gap: 0 }}>
+        {Object.values(
+          submissions.reduce((groups, sub) => {
+            const key = sub.version_number;
+            if (!groups[key]) groups[key] = [];
+            groups[key].push(sub);
+            return groups;
+          }, {})
+        ).reverse().map((group, gi) => {
+          const primary = group.find(s => s.type !== 'amendment') || group[0];
+          const amendments = group.filter(s => s.type === 'amendment');
+          const delivery = primary.delivery;
+          const isCurrent = gi === 0;
+
+          if (isClient) {
+            return (
+              <div key={primary.id} className="version-item">
+                <div className="version-header">
+                  <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
+                    <div className="version-number">{rLabel(primary.version_number)}</div>
+                    <StatusBadge status={primary.type} />
+                    {primary.revision_type && <StatusBadge status={primary.revision_type} />}
+                  </div>
+                  <div style={{ fontSize: 12, color: 'var(--text-secondary)' }}>
+                    {primary.submitted_by_name && <span>{primary.submitted_by_name} · </span>}
+                    {formatDateEST(primary.submitted_at)}
+                  </div>
+                </div>
+                <div className="detail-grid">
+                  <div className="detail-item"><label>Service</label><p>{primary.service_type}</p></div>
+                  <div className="detail-item"><label>Deadline</label><p>{primary.deadline || '—'}</p></div>
+                  <div className="detail-item"><label>Hot</label><p>{primary.is_hot ? 'Yes' : 'No'}</p></div>
+                </div>
+                <div className="detail-item"><label>Description</label><p style={{ marginTop: 4, lineHeight: 1.6, color: 'var(--text-secondary)', whiteSpace: 'pre-wrap' }}>{primary.description}</p></div>
+                {primary.files?.length > 0 && (
+                  <div style={{ marginTop: 10 }}>
+                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 4 }}>
+                      <label style={{ fontSize: 11, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.5px', color: 'var(--text-muted)' }}>Attached Files</label>
+                      <LoadingButton className="btn-icon" loading={downloading === `zip:${rLabel(primary.version_number)}`} disabled={Boolean(downloading)} loadingText="↓" onClick={() => downloadAllSubmissionFiles(primary.files, rLabel(primary.version_number))}>⬇ Download All</LoadingButton>
+                    </div>
+                    <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
+                      {primary.files.map((file, fi) => (
+                        <div key={fi} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '6px 10px', background: 'var(--bg)', borderRadius: 6, border: '1px solid var(--border)' }}>
+                          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}><span>📎</span><span style={{ fontSize: 13, fontWeight: 500 }}>{file.name}</span></div>
+                          <LoadingButton className="btn-icon" loading={downloading === `submission:${file.storage_path}`} disabled={Boolean(downloading)} loadingText="↓" onClick={() => getSubmissionFileUrl(file)}>📥 Download</LoadingButton>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                )}
+                {amendments.map(amendment => (
+                  <div key={amendment.id} style={{ marginTop: 12, padding: '12px 14px', background: 'var(--bg)', borderRadius: 8, border: '1px solid var(--border)' }}>
+                    <div style={{ fontSize: 11, fontWeight: 700, textTransform: 'uppercase', color: 'var(--accent)', marginBottom: 8, letterSpacing: 0.5 }}>Amended Request</div>
+                    <div style={{ fontSize: 12, color: 'var(--text-muted)', marginBottom: 6 }}>{amendment.submitted_by_name} · {formatDateEST(amendment.submitted_at)}</div>
+                    <p style={{ fontSize: 13, lineHeight: 1.6, color: 'var(--text-secondary)', whiteSpace: 'pre-wrap', margin: 0 }}>{amendment.description}</p>
+                    {amendment.files?.length > 0 && (
+                      <div style={{ marginTop: 8, display: 'flex', flexDirection: 'column', gap: 4 }}>
+                        {amendment.files.map((file, fi) => (
+                          <div key={fi} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '5px 10px', background: 'var(--card-bg)', borderRadius: 6, border: '1px solid var(--border)' }}>
+                            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}><span>📎</span><span style={{ fontSize: 12, fontWeight: 500 }}>{file.name}</span></div>
+                            <LoadingButton className="btn-icon" loading={downloading === `submission:${file.storage_path}`} disabled={Boolean(downloading)} loadingText="↓" onClick={() => getSubmissionFileUrl(file)}>📥 Download</LoadingButton>
+                          </div>
+                        ))}
+                      </div>
+                    )}
+                  </div>
+                ))}
+                {delivery && delivery.files && delivery.files.length > 0 && (
+                  <div style={{ marginTop: 12, padding: '10px 14px', background: 'var(--bg)', borderRadius: 8, border: '1px solid var(--border)' }}>
+                    <div style={{ fontSize: 11, fontWeight: 600, textTransform: 'uppercase', color: '#16a34a', marginBottom: 8 }}>✓ Delivered {formatDateEST(delivery.sent_at)}</div>
+                    {delivery.files.map((file, fi) => (
+                      <div key={fi} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '6px 10px', background: 'var(--card-bg)', borderRadius: 6, border: '1px solid var(--border)', marginBottom: 4 }}>
+                        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}><span>📄</span><span style={{ fontSize: 13, fontWeight: 500 }}>{file.name}</span></div>
+                        <LoadingButton className="btn-icon" loading={downloading === `delivery:${file.storage_path}`} disabled={Boolean(downloading)} loadingText="↓" onClick={() => getFileUrl(file)}>📥 Download</LoadingButton>
+                      </div>
+                    ))}
+                  </div>
+                )}
+              </div>
+            );
+          }
+
+          // Team/External revision history style
+          return (
+            <div key={primary.id} style={{ borderRadius: 8, border: `1px solid ${isCurrent ? 'var(--accent)' : 'var(--border)'}`, background: 'var(--bg)', overflow: 'hidden', opacity: isCurrent ? 1 : 0.85, marginBottom: 12 }}>
+              <div style={{ padding: '12px 16px', display: 'flex', alignItems: 'center', gap: 10, borderBottom: '1px solid var(--border)', background: 'var(--card-bg-2)' }}>
+                <span style={{ fontWeight: 700, fontSize: 13 }}>{rLabel(primary.version_number)}</span>
+                <StatusBadge status={primary.type} />
+                {primary.revision_type && <StatusBadge status={primary.revision_type} />}
+                {isCurrent && <span style={{ fontSize: 11, color: 'var(--accent)', fontWeight: 600 }}>Current</span>}
+                <span style={{ fontSize: 12, color: 'var(--text-muted)', marginLeft: 'auto' }}>{primary.submitted_by_name} · {formatDateEST(primary.submitted_at)}</span>
+              </div>
+              <div style={{ padding: '12px 16px' }}>
+                <div style={{ display: 'flex', gap: 24, marginBottom: 8 }}>
+                  <div><span style={{ fontSize: 11, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.5px', color: 'var(--text-muted)' }}>Service</span><div style={{ fontSize: 13, marginTop: 2 }}>{primary.service_type}</div></div>
+                  <div><span style={{ fontSize: 11, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.5px', color: 'var(--text-muted)' }}>Deadline</span><div style={{ fontSize: 13, marginTop: 2 }}>{primary.deadline || '—'}</div></div>
+                </div>
+                <p style={{ fontSize: 13, color: 'var(--text-secondary)', lineHeight: 1.6, whiteSpace: 'pre-wrap', margin: 0 }}>{primary.description}</p>
+                {primary.files?.length > 0 && (
+                  <div style={{ marginTop: 10 }}>
+                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 4 }}>
+                      <span style={{ fontSize: 11, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.5px', color: 'var(--text-muted)' }}>Attached Files</span>
+                      <LoadingButton className="btn-icon" loading={downloading === `zip:${rLabel(revisionBaseline)}`} disabled={Boolean(downloading)} loadingText="↓" onClick={() => downloadAllSubmissionFiles(primary.files)}>⬇ Download All</LoadingButton>
+                    </div>
+                    <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
+                      {primary.files.map((file, fi) => (
+                        <div key={fi} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '6px 10px', background: 'var(--card-bg-2)', borderRadius: 6, border: '1px solid var(--border)' }}>
+                          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}><span>📎</span><span style={{ fontSize: 13, fontWeight: 500 }}>{file.name}</span></div>
+                          <LoadingButton className="btn-icon" loading={downloading === `submission:${file.storage_path}`} disabled={Boolean(downloading)} loadingText="↓" onClick={() => getSubmissionFileUrl(file)}>📥 Download</LoadingButton>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                )}
+                {amendments.map(amendment => (
+                  <div key={amendment.id} style={{ marginTop: 12, padding: '12px 14px', background: 'var(--card-bg)', borderRadius: 8, border: '1px solid var(--border)' }}>
+                    <div style={{ fontSize: 11, fontWeight: 700, textTransform: 'uppercase', color: 'var(--accent)', marginBottom: 6, letterSpacing: 0.5 }}>Amended Request</div>
+                    <div style={{ fontSize: 12, color: 'var(--text-muted)', marginBottom: 6 }}>{amendment.submitted_by_name} · {formatDateEST(amendment.submitted_at)}</div>
+                    <p style={{ fontSize: 13, lineHeight: 1.6, color: 'var(--text-secondary)', whiteSpace: 'pre-wrap', margin: 0 }}>{amendment.description}</p>
+                    {amendment.files?.length > 0 && (
+                      <div style={{ marginTop: 8, display: 'flex', flexDirection: 'column', gap: 4 }}>
+                        {amendment.files.map((file, fi) => (
+                          <div key={fi} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '5px 10px', background: 'var(--bg)', borderRadius: 6, border: '1px solid var(--border)' }}>
+                            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}><span>📎</span><span style={{ fontSize: 12, fontWeight: 500 }}>{file.name}</span></div>
+                            <LoadingButton className="btn-icon" loading={downloading === `submission:${file.storage_path}`} disabled={Boolean(downloading)} loadingText="↓" onClick={() => getSubmissionFileUrl(file)}>📥 Download</LoadingButton>
+                          </div>
+                        ))}
+                      </div>
+                    )}
+                  </div>
+                ))}
+              </div>
+              {delivery ? (
+                <div style={{ padding: '10px 16px', borderTop: '1px solid var(--border)' }}>
+                  <div style={{ fontSize: 11, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.5px', color: '#16a34a', marginBottom: 8 }}>✓ Delivered by {delivery.sent_by} on {formatDateEST(delivery.sent_at)}</div>
+                  <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
+                    {(delivery.files || []).map((file, fi) => (
+                      <div key={fi} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '6px 10px', background: 'var(--card-bg-2)', borderRadius: 6, border: '1px solid var(--border)' }}>
+                        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}><span>📄</span><span style={{ fontSize: 13, fontWeight: 500 }}>{file.name}</span>{file.size > 0 && <span style={{ fontSize: 11, color: 'var(--text-muted)' }}>{formatSize(file.size)}</span>}</div>
+                        <LoadingButton className="btn-icon" loading={downloading === `delivery:${file.storage_path}`} disabled={Boolean(downloading)} loadingText="↓" onClick={() => getFileUrl(file)}>📥 Download</LoadingButton>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              ) : isCurrent ? (
+                <div style={{ padding: '10px 16px', borderTop: '1px solid var(--border)' }}>
+                  <span style={{ fontSize: 12, color: 'var(--text-muted)' }}>📎 No file delivered yet for this version.</span>
+                </div>
+              ) : null}
+            </div>
+          );
+        })}
+      </div>
+      </div>
+      )}
+    </Layout>
+  );
+}
diff --git a/src/pages/RequestsPage.jsx b/src/pages/RequestsPage.jsx
new file mode 100644
index 0000000..fd12b6c
--- /dev/null
+++ b/src/pages/RequestsPage.jsx
@@ -0,0 +1,674 @@
+import { useState, useEffect } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import Layout from '../components/Layout';
+import StatusBadge from '../components/StatusBadge';
+import { supabase } from '../lib/supabase';
+import { useAuth } from '../context/AuthContext';
+import { serviceTypes } from '../data/mockData';
+import { readPageCache, writePageCache } from '../lib/pageCache';
+import { withTimeout } from '../lib/withTimeout';
+import { getCurrentVersionForTask, getDeadlineSourceSubmission } from '../lib/taskDeadlines';
+import { addDaysToDateOnly, formatDateOnly, getTodayDateOnlyEST } from '../lib/dates';
+import { createInitialSubmissionForRequest, createTaskForRequest, findOrCreateProject } from '../lib/requestSubmission';
+
+const EMPTY_FORM = () => ({ companyId: '', project: '', serviceType: '', title: '', deadline: addDaysToDateOnly(getTodayDateOnlyEST(), 3), description: '', requestedBy: '', isHot: false });
+
+export default function RequestsPage() {
+  const { currentUser } = useAuth();
+  const navigate = useNavigate();
+  const isTeam = currentUser?.role === 'team';
+  const isExternal = currentUser?.role === 'external';
+  const isClient = currentUser?.role === 'client';
+
+  // ── Shared state ───────────────────────────────────────────────────────
+  const [projects, setProjects] = useState([]);
+  const [tasks, setTasks] = useState([]);
+  const [submissions, setSubmissions] = useState([]);
+  const [loading, setLoading] = useState(() => {
+    if (isTeam) return !readPageCache('team_requests');
+    if (isExternal) return !readPageCache(`ext-requests:${currentUser?.id}`, 3 * 60_000);
+    return true;
+  });
+  const [error, setError] = useState('');
+  const [activeTab, setActiveTab] = useState('active');
+
+  // ── Team-only state ────────────────────────────────────────────────────
+  const teamCached = isTeam ? readPageCache('team_requests') : null;
+  const [companies, setCompanies] = useState(() => teamCached?.companies || []);
+  const [invoices, setInvoices] = useState(() => teamCached?.invoices || []);
+  const [invoiceItems, setInvoiceItems] = useState(() => teamCached?.invoiceItems || []);
+  const [companyUsers, setCompanyUsers] = useState([]);
+  const [filterCompany, setFilterCompany] = useState('');
+  const [filterUser, setFilterUser] = useState('');
+  const [showAddForm, setShowAddForm] = useState(false);
+  const [addForm, setAddForm] = useState(EMPTY_FORM());
+  const [formProjects, setFormProjects] = useState([]);
+  const [customProjectNames, setCustomProjectNames] = useState([]);
+  const [isTypingProject, setIsTypingProject] = useState(false);
+  const [newProjectName, setNewProjectName] = useState('');
+  const [addSaving, setAddSaving] = useState(false);
+  const [addError, setAddError] = useState('');
+  const [addRequestKey, setAddRequestKey] = useState(() => crypto.randomUUID());
+
+  // ── External-only state ────────────────────────────────────────────────
+  const extCacheKey = `ext-requests:${currentUser?.id}`;
+  const extCached = isExternal ? readPageCache(extCacheKey, 3 * 60_000) : null;
+  const [paidTaskIds, setPaidTaskIds] = useState(() => new Set(extCached?.paidTaskIds || []));
+  const [filterProject, setFilterProject] = useState('');
+  const [filterRequester, setFilterRequester] = useState('');
+
+  // ── Client-only state ──────────────────────────────────────────────────
+  const [clientInvoices, setClientInvoices] = useState([]);
+  const [clientInvoiceItems, setClientInvoiceItems] = useState([]);
+
+  useEffect(() => {
+    if (isTeam) {
+      async function loadTeam() {
+        try {
+          const [{ data: subs }, { data: t }, { data: p }, { data: co }, { data: inv }, { data: itemRows }] = await withTimeout(Promise.all([
+            supabase.from('submissions').select('*').order('submitted_at', { ascending: false }),
+            supabase.from('tasks').select('*'),
+            supabase.from('projects').select('*'),
+            supabase.from('companies').select('id, name'),
+            supabase.from('invoices').select('id, status'),
+            supabase.from('invoice_items').select('task_id, invoice_id'),
+          ]), 12000, 'Requests load');
+          setSubmissions(subs || []);
+          setTasks(t || []);
+          setProjects(p || []);
+          setCompanies(co || []);
+          setInvoices(inv || []);
+          setInvoiceItems(itemRows || []);
+          writePageCache('team_requests', { submissions: subs || [], tasks: t || [], projects: p || [], companies: co || [], invoices: inv || [], invoiceItems: itemRows || [] });
+        } catch (err) {
+          console.error('Requests load failed:', err);
+          setSubmissions([]); setTasks([]); setProjects([]); setCompanies([]); setInvoices([]); setInvoiceItems([]);
+        } finally {
+          setLoading(false);
+        }
+      }
+      if (teamCached) {
+        setSubmissions(teamCached.submissions || []);
+        setTasks(teamCached.tasks || []);
+        setProjects(teamCached.projects || []);
+        setLoading(false);
+      } else {
+        loadTeam();
+      }
+    } else if (isExternal) {
+      async function loadExternal() {
+        if (!currentUser?.id) { setLoading(false); return; }
+        try {
+          const [{ data: projectData }, { data: taskData }, { data: subData }, { data: paidItems }] = await withTimeout(
+            Promise.all([
+              supabase.from('projects').select('id, name, company_id').order('created_at', { ascending: false }),
+              supabase.from('tasks').select('id, title, status, current_version, project_id, invoiced').order('submitted_at', { ascending: false }),
+              supabase.from('submissions').select('task_id, submitted_by_name, version_number, deadline, is_hot, service_type, submitted_at').order('submitted_at', { ascending: false }),
+              supabase.from('subcontractor_invoice_items').select('task_id, invoice:subcontractor_invoices!inner(status)').eq('subcontractor_invoices.status', 'paid'),
+            ]),
+            15000, 'External requests load'
+          );
+          const paid = new Set((paidItems || []).filter(item => item.invoice?.status === 'paid' && item.task_id).map(item => item.task_id));
+          setProjects(projectData || []);
+          setTasks(taskData || []);
+          setSubmissions(subData || []);
+          setPaidTaskIds(paid);
+          writePageCache(extCacheKey, { projects: projectData || [], tasks: taskData || [], submissions: subData || [], paidTaskIds: [...paid] });
+          setError('');
+        } catch (err) {
+          console.error('External requests load failed:', err);
+          setError(err.message || 'Failed to load requests.');
+        } finally {
+          setLoading(false);
+        }
+      }
+      if (extCached) {
+        setProjects(extCached.projects || []);
+        setTasks(extCached.tasks || []);
+        setSubmissions(extCached.submissions || []);
+        setLoading(false);
+      } else {
+        loadExternal();
+      }
+    } else if (isClient) {
+      async function loadClient() {
+        try {
+          const { data: mySubs } = await withTimeout(
+            supabase.from('submissions').select('task_id, submitted_by_name, version_number, type').eq('submitted_by', currentUser.id).eq('type', 'initial'),
+            10000, 'My submissions'
+          );
+          if (!mySubs || mySubs.length === 0) { setLoading(false); return; }
+          const myTaskIds = mySubs.map(s => s.task_id);
+          const [{ data: t }, { data: allSubs }, { data: inv }, { data: itemRows }] = await withTimeout(
+            Promise.all([
+              supabase.from('tasks').select('*, project:projects(id, name, created_at, status)').in('id', myTaskIds),
+              supabase.from('submissions').select('task_id, submitted_by_name, version_number, type').in('task_id', myTaskIds).order('version_number'),
+              supabase.from('invoices').select('id, status'),
+              supabase.from('invoice_items').select('task_id, invoice_id').in('task_id', myTaskIds),
+            ]),
+            12000, 'My requests data'
+          );
+          const clientTasks = t || [];
+          setTasks(clientTasks);
+          setSubmissions(allSubs || []);
+          setClientInvoices(inv || []);
+          setClientInvoiceItems(itemRows || []);
+          const projectMap = {};
+          clientTasks.forEach(task => { const p = task.project; if (p && !projectMap[p.id]) projectMap[p.id] = { ...p }; });
+          setProjects(Object.values(projectMap));
+        } catch (err) {
+          console.error('MyRequests load failed:', err);
+        } finally {
+          setLoading(false);
+        }
+      }
+      loadClient();
+    }
+  }, [isTeam, isExternal, isClient, currentUser?.id]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // ── Team: company change → reload form projects ────────────────────────
+  const requesterOptions = isTeam ? [
+    ...(currentUser ? [{ id: currentUser.id, name: `${currentUser.name} (You)`, email: currentUser.email || '' }] : []),
+    ...companyUsers.filter(user => user.id !== currentUser?.id),
+  ] : [];
+
+  useEffect(() => {
+    if (!isTeam) return;
+    setFormProjects([]); setCustomProjectNames([]); setCompanyUsers([]);
+    setAddForm(f => ({ ...f, project: '', requestedBy: currentUser?.id || '' }));
+    setIsTypingProject(false); setNewProjectName('');
+    if (!addForm.companyId) return;
+    withTimeout(Promise.all([
+      supabase.from('projects').select('id, name').eq('company_id', addForm.companyId).order('name'),
+      supabase.from('profiles').select('id, name, email').eq('company_id', addForm.companyId).eq('role', 'client').order('name'),
+    ]), 10000, 'Request form load').then(([projectsResult, usersResult]) => {
+      setFormProjects(projectsResult.data || []);
+      setCompanyUsers(usersResult.data || []);
+    }).catch(() => { setFormProjects([]); setCompanyUsers([]); });
+  }, [addForm.companyId]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const handleAddProjectName = () => {
+    const name = newProjectName.trim();
+    if (!name) return;
+    if (!customProjectNames.includes(name) && !formProjects.some(p => p.name === name)) setCustomProjectNames(prev => [...prev, name]);
+    setAddForm(f => ({ ...f, project: name }));
+    setIsTypingProject(false); setNewProjectName('');
+  };
+
+  const handleAddRequest = async (e) => {
+    e.preventDefault();
+    if (addSaving) return;
+    setAddSaving(true); setAddError('');
+    try {
+      const requester = requesterOptions.find(user => user.id === addForm.requestedBy);
+      if (!requester) throw new Error('Please select who requested this task.');
+      const projectName = addForm.project.trim();
+      if (!projectName) throw new Error('Please select or create a project.');
+      const resolvedProject = await findOrCreateProject(addForm.companyId, projectName, formProjects);
+      if (!formProjects.some(p => p.id === resolvedProject.id)) setFormProjects(prev => [...prev, { id: resolvedProject.id, name: resolvedProject.name }]);
+      if (!projects.some(p => p.id === resolvedProject.id)) setProjects(prev => [...prev, resolvedProject]);
+      const { task } = await createTaskForRequest({ projectId: resolvedProject.id, title: addForm.title.trim() || addForm.serviceType, requestKey: addRequestKey });
+      if (!task) throw new Error('Failed to create task.');
+      const { submission: sub } = await createInitialSubmissionForRequest({ taskId: task.id, requestKey: addRequestKey, isHot: addForm.isHot, serviceType: addForm.serviceType, deadline: addForm.deadline, description: addForm.description, submittedBy: requester.id, submittedByName: requester.name.replace(' (You)', '') });
+      if (!sub) throw new Error('Failed to create submission.');
+      const [{ data: newSubs }, { data: newTasks }] = await Promise.all([
+        supabase.from('submissions').select('*').order('submitted_at', { ascending: false }),
+        supabase.from('tasks').select('*'),
+      ]);
+      setSubmissions(newSubs || []); setTasks(newTasks || []);
+      setShowAddForm(false); setAddForm(EMPTY_FORM()); setAddRequestKey(crypto.randomUUID());
+      setCustomProjectNames([]); setIsTypingProject(false); setNewProjectName('');
+    } catch (err) {
+      setAddError(err.message);
+    } finally {
+      setAddSaving(false);
+    }
+  };
+
+  const setAdd = (field) => (e) => setAddForm(f => ({ ...f, [field]: e.target.value }));
+
+  if (loading) return <Layout><p style={{ padding: 24, color: 'var(--text-muted)' }}>Loading...</p></Layout>;
+
+  // ── Team render ────────────────────────────────────────────────────────
+  if (isTeam) {
+    const requesterNames = [...new Set(submissions.map(s => s.submitted_by_name).filter(Boolean))].sort();
+    const paidInvoiceIds = new Set(invoices.filter(inv => inv.status === 'paid').map(inv => inv.id));
+    const paidIds = new Set(invoiceItems.filter(item => item.task_id && paidInvoiceIds.has(item.invoice_id)).map(item => item.task_id));
+    const isFullyClosedTask = (task) => task?.status === 'client_approved' && Boolean(task?.invoiced) && paidIds.has(task.id);
+    const latestTaskGroups = tasks.map(task => {
+      const taskSubs = submissions.filter(s => s.task_id === task.id);
+      const deadlineSource = getDeadlineSourceSubmission(task, taskSubs);
+      if (!deadlineSource) return null;
+      const currentVersion = getCurrentVersionForTask(task, taskSubs);
+      const latestGroup = taskSubs.filter(s => s.version_number === currentVersion);
+      return { task, primary: deadlineSource, group: latestGroup };
+    }).filter(Boolean);
+    const filteredGroups = latestTaskGroups.filter(({ task, group }) => {
+      const project = projects.find(p => p.id === task?.project_id);
+      if (filterCompany && project?.company_id !== filterCompany) return false;
+      if (filterUser && !group.some(s => s.submitted_by_name === filterUser)) return false;
+      return true;
+    }).sort((a, b) => Math.max(...b.group.map(s => new Date(s.submitted_at).getTime())) - Math.max(...a.group.map(s => new Date(s.submitted_at).getTime())));
+    const activeGroups = filteredGroups.filter(({ task }) => task?.status !== 'client_approved' && task?.status !== 'client_review');
+    const clientReviewGroups = filteredGroups.filter(({ task }) => task?.status === 'client_review');
+    const completedGroups = filteredGroups.filter(({ task }) => task?.status === 'client_approved' && !isFullyClosedTask(task));
+    const closedGroups = filteredGroups.filter(({ task }) => isFullyClosedTask(task));
+    const renderRow = ({ task, primary }) => {
+      const project = projects.find(p => p.id === task?.project_id);
+      const company = companies.find(co => co.id === project?.company_id);
+      const isCompleted = task?.status === 'client_approved';
+      const isFullyClosed = isFullyClosedTask(task);
+      return (
+        <tr key={task.id} onClick={() => task && navigate(`/requests/${task.id}`)} style={{ cursor: task ? 'pointer' : 'default' }}>
+          <td style={{ fontWeight: 600 }}>{project?.name || 'No project'}</td>
+          <td style={{ fontWeight: 600 }}>
+            <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
+              <span>{task?.title || primary.service_type}</span>
+              {primary.is_hot ? <span className="badge badge-needs_revision">Hot</span> : null}
+            </div>
+          </td>
+          <td>{`R${String(primary.version_number ?? 0).padStart(2, '0')}`}</td>
+          <td>{primary.service_type || 'Request'}</td>
+          <td>{company ? <Link to={`/company/${company.id}`} className="table-link" onClick={e => e.stopPropagation()}>{company.name}</Link> : 'No client'}</td>
+          <td>{formatDateOnly(primary.deadline, 'Not specified')}</td>
+          <td>{isFullyClosed ? <span className="badge badge-client_approved">Paid & Closed</span> : isCompleted ? <span className="badge badge-client_approved">Completed</span> : <StatusBadge status={task?.status || 'not_started'} />}</td>
+        </tr>
+      );
+    };
+    const teamTabs = [
+      { id: 'active', label: 'Active', groups: activeGroups },
+      { id: 'client-review', label: 'Client Review', groups: clientReviewGroups },
+      { id: 'completed', label: 'Completed', groups: completedGroups },
+      { id: 'closed', label: 'Fully Closed', groups: closedGroups },
+    ];
+    const currentGroups = teamTabs.find(t => t.id === activeTab)?.groups || [];
+
+    return (
+      <Layout>
+        <div className="page-header">
+          <div>
+            <div className="page-title">Requests</div>
+            <div className="page-subtitle">Track incoming requests, revisions, and completed jobs in one place.</div>
+          </div>
+          <button className="btn btn-primary btn-sm" onClick={() => { setShowAddForm(s => !s); setAddError(''); }}>
+            {showAddForm ? 'Cancel' : '+ Add Request'}
+          </button>
+        </div>
+
+        {showAddForm && (
+          <div className="card" style={{ marginBottom: 24, border: '1px solid var(--accent)', borderRadius: 12 }}>
+            <div className="card-title">Add Request</div>
+            <form onSubmit={handleAddRequest}>
+              <div className="grid-2">
+                <div className="form-group">
+                  <label>Company *</label>
+                  <select value={addForm.companyId} onChange={setAdd('companyId')} required>
+                    <option value="">Select company...</option>
+                    {companies.map(co => <option key={co.id} value={co.id}>{co.name}</option>)}
+                  </select>
+                </div>
+                <div className="form-group">
+                  <label>Project *</label>
+                  {isTypingProject ? (
+                    <div style={{ display: 'flex', gap: 8 }}>
+                      <input type="text" placeholder="Enter project name..." value={newProjectName} onChange={e => setNewProjectName(e.target.value)} onKeyDown={e => { if (e.key === 'Enter') { e.preventDefault(); handleAddProjectName(); } }} autoFocus style={{ flex: 1 }} />
+                      <button type="button" className="btn btn-primary btn-sm" onClick={handleAddProjectName} disabled={!newProjectName.trim()}>Add</button>
+                      <button type="button" className="btn btn-outline btn-sm" onClick={() => { setIsTypingProject(false); setNewProjectName(''); }}>Cancel</button>
+                    </div>
+                  ) : (
+                    <select value={addForm.project} onChange={e => { if (e.target.value === '__new__') { setIsTypingProject(true); setAddForm(f => ({ ...f, project: '' })); } else { setAddForm(f => ({ ...f, project: e.target.value })); } }} required disabled={!addForm.companyId}>
+                      <option value="">{addForm.companyId ? 'Select project...' : 'Select company first'}</option>
+                      {[...formProjects.map(p => p.name), ...customProjectNames.filter(n => !formProjects.some(p => p.name === n))].map(name => (
+                        <option key={name} value={name}>{name}</option>
+                      ))}
+                      {addForm.companyId && <option value="__new__">＋ Create new project...</option>}
+                    </select>
+                  )}
+                </div>
+              </div>
+              <div className="grid-2">
+                <div className="form-group">
+                  <label>Service Type *</label>
+                  <select value={addForm.serviceType} onChange={setAdd('serviceType')} required>
+                    <option value="">Select service...</option>
+                    {serviceTypes.map(s => <option key={s} value={s}>{s}</option>)}
+                  </select>
+                </div>
+                <div className="form-group">
+                  <label>Deadline <span style={{ fontWeight: 400, color: 'var(--text-muted)' }}>(optional)</span></label>
+                  <input type="date" value={addForm.deadline} onChange={setAdd('deadline')} />
+                </div>
+              </div>
+              <div className="form-group" style={{ marginTop: -4 }}>
+                <label style={{ display: 'flex', alignItems: 'center', gap: 10, fontWeight: 500, cursor: 'pointer' }}>
+                  <input type="checkbox" checked={addForm.isHot} onChange={e => setAddForm(f => ({ ...f, isHot: e.target.checked }))} />
+                  <span>Mark as Hot</span>
+                </label>
+              </div>
+              <div className="form-group">
+                <label>Requested By *</label>
+                <select value={addForm.requestedBy} onChange={setAdd('requestedBy')} disabled={!addForm.companyId} required>
+                  <option value="">{addForm.companyId ? 'Select requester...' : 'Select company first'}</option>
+                  {requesterOptions.map(user => <option key={user.id} value={user.id}>{user.name}{user.email ? ` (${user.email})` : ''}</option>)}
+                </select>
+              </div>
+              <div className="form-group">
+                <label>Title <span style={{ fontWeight: 400, color: 'var(--text-muted)' }}>(optional — defaults to service type)</span></label>
+                <input type="text" placeholder={addForm.serviceType || 'e.g. Brand Book — 2026'} value={addForm.title} onChange={setAdd('title')} />
+              </div>
+              <div className="form-group">
+                <label>Description *</label>
+                <textarea placeholder="Notes on the request..." value={addForm.description} onChange={setAdd('description')} style={{ minHeight: 100 }} required />
+              </div>
+              {addError && <div style={{ fontSize: 13, color: 'var(--danger)', marginBottom: 12 }}>⚠ {addError}</div>}
+              <div className="action-buttons">
+                <button type="submit" className="btn btn-primary" disabled={addSaving}>{addSaving ? 'Adding...' : 'Add Request'}</button>
+                <button type="button" className="btn btn-outline" onClick={() => { setShowAddForm(false); setAddForm(EMPTY_FORM()); setCustomProjectNames([]); setIsTypingProject(false); setNewProjectName(''); setAddError(''); }}>Cancel</button>
+              </div>
+            </form>
+          </div>
+        )}
+
+        {(companies.length > 0 || requesterNames.length > 0) && (
+          <div className="card request-toolbar-card" style={{ marginBottom: 16 }}>
+            <div className="request-toolbar-grid">
+              {companies.length > 0 && (
+                <div className="request-toolbar-section">
+                  <div className="card-title" style={{ marginBottom: 10 }}>Filter By Company</div>
+                  <div className="request-filter-row">
+                    <button className={`btn btn-sm ${!filterCompany ? 'btn-primary' : 'btn-outline'}`} onClick={() => setFilterCompany('')}>All</button>
+                    {companies.map(co => (
+                      <button key={co.id} className={`btn btn-sm ${filterCompany === co.id ? 'btn-primary' : 'btn-outline'}`} onClick={() => setFilterCompany(f => f === co.id ? '' : co.id)}>{co.name}</button>
+                    ))}
+                  </div>
+                </div>
+              )}
+              {requesterNames.length > 0 && (
+                <div className="request-toolbar-section">
+                  <div className="card-title" style={{ marginBottom: 10 }}>Filter By Requester</div>
+                  <div className="request-filter-row">
+                    <button className={`btn btn-sm ${!filterUser ? 'btn-primary' : 'btn-outline'}`} onClick={() => setFilterUser('')}>All</button>
+                    {requesterNames.map(name => (
+                      <button key={name} className={`btn btn-sm ${filterUser === name ? 'btn-primary' : 'btn-outline'}`} onClick={() => setFilterUser(f => f === name ? '' : name)}>{name}</button>
+                    ))}
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+        )}
+
+        {submissions.length === 0 ? (
+          <div className="empty-state"><h3>No requests yet</h3><p>Client requests will appear here.</p></div>
+        ) : filteredGroups.length === 0 ? (
+          <div className="empty-state"><h3>No matching requests</h3><p>Try clearing the current company or requester filters.</p></div>
+        ) : (
+          <div>
+            <div style={{ marginBottom: 20, display: 'flex', gap: 4, flexWrap: 'wrap' }}>
+              {teamTabs.map(tab => (
+                <button key={tab.id} type="button" className={`tab-btn${activeTab === tab.id ? ' active' : ''}`} onClick={() => setActiveTab(tab.id)}>
+                  {tab.label} ({tab.groups.length})
+                </button>
+              ))}
+            </div>
+            {currentGroups.length === 0 ? (
+              <div className="empty-state" style={{ padding: '28px 20px' }}>
+                <h3>No {teamTabs.find(t => t.id === activeTab)?.label.toLowerCase()} requests</h3>
+              </div>
+            ) : (
+              <div className="table-wrapper">
+                <table>
+                  <thead>
+                    <tr>
+                      <th>Project</th><th>Name</th><th>Revision</th><th>Request Type</th><th>Client</th><th>Deadline</th><th>Status</th>
+                    </tr>
+                  </thead>
+                  <tbody>{currentGroups.map(group => renderRow(group))}</tbody>
+                </table>
+              </div>
+            )}
+          </div>
+        )}
+      </Layout>
+    );
+  }
+
+  // ── External render ────────────────────────────────────────────────────
+  if (isExternal) {
+    const isFullyClosedExt = (task) => task?.status === 'client_approved' && paidTaskIds.has(task.id);
+    const latestTaskGroupsExt = tasks.map(task => {
+      const taskSubs = submissions.filter(s => s.task_id === task.id);
+      const deadlineSource = getDeadlineSourceSubmission(task, taskSubs);
+      if (!deadlineSource) return null;
+      const currentVersion = getCurrentVersionForTask(task, taskSubs);
+      const latestGroup = taskSubs.filter(s => s.version_number === currentVersion);
+      return { task, primary: deadlineSource, group: latestGroup };
+    }).filter(Boolean);
+    const projectNames = [...new Map(latestTaskGroupsExt.map(({ task }) => { const p = projects.find(proj => proj.id === task.project_id); return p ? [p.id, p] : null; }).filter(Boolean)).values()];
+    const requesterNamesExt = [...new Set(submissions.map(s => s.submitted_by_name).filter(Boolean))].sort();
+    const filteredGroupsExt = latestTaskGroupsExt.filter(({ task, group }) => {
+      if (filterProject && task.project_id !== filterProject) return false;
+      if (filterRequester && !group.some(s => s.submitted_by_name === filterRequester)) return false;
+      return true;
+    }).sort((a, b) => Math.max(...b.group.map(s => new Date(s.submitted_at).getTime())) - Math.max(...a.group.map(s => new Date(s.submitted_at).getTime())));
+    const extTabs = [
+      { id: 'active', label: 'Active', groups: filteredGroupsExt.filter(({ task }) => task?.status !== 'client_approved' && task?.status !== 'client_review') },
+      { id: 'client-review', label: 'Client Review', groups: filteredGroupsExt.filter(({ task }) => task?.status === 'client_review') },
+      { id: 'completed', label: 'Completed', groups: filteredGroupsExt.filter(({ task }) => task?.status === 'client_approved' && !isFullyClosedExt(task)) },
+      { id: 'closed', label: 'Fully Closed', groups: filteredGroupsExt.filter(({ task }) => isFullyClosedExt(task)) },
+    ];
+    const currentExtGroups = extTabs.find(t => t.id === activeTab)?.groups || [];
+    const renderExtRow = ({ task, primary }) => {
+      const project = projects.find(p => p.id === task?.project_id);
+      const isCompleted = task?.status === 'client_approved';
+      const isFullyClosed = isFullyClosedExt(task);
+      return (
+        <tr key={task.id} onClick={() => navigate(`/requests/${task.id}`)} style={{ cursor: 'pointer' }}>
+          <td style={{ fontWeight: 600 }}>{project?.name || 'No project'}</td>
+          <td style={{ fontWeight: 600 }}>
+            <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
+              <span>{task?.title || primary.service_type}</span>
+              {primary.is_hot ? <span className="badge badge-needs_revision">Hot</span> : null}
+            </div>
+          </td>
+          <td>{`R${String(primary.version_number ?? 0).padStart(2, '0')}`}</td>
+          <td>{primary.service_type || 'Request'}</td>
+          <td>{formatDateOnly(primary.deadline, 'Not specified')}</td>
+          <td>{isFullyClosed ? <span className="badge badge-client_approved">Paid & Closed</span> : isCompleted ? <span className="badge badge-client_approved">Completed</span> : <StatusBadge status={task?.status || 'not_started'} />}</td>
+        </tr>
+      );
+    };
+
+    return (
+      <Layout>
+        <div className="page-header">
+          <div>
+            <div className="page-title">Requests</div>
+            <div className="page-subtitle">All tasks in your assigned projects.</div>
+          </div>
+        </div>
+
+        {(projectNames.length > 0 || requesterNamesExt.length > 0) && (
+          <div className="card request-toolbar-card" style={{ marginBottom: 16 }}>
+            <div className="request-toolbar-grid">
+              {projectNames.length > 0 && (
+                <div className="request-toolbar-section">
+                  <div className="card-title" style={{ marginBottom: 10 }}>Filter By Project</div>
+                  <div className="request-filter-row">
+                    <button className={`btn btn-sm ${!filterProject ? 'btn-primary' : 'btn-outline'}`} onClick={() => setFilterProject('')}>All</button>
+                    {projectNames.map(p => (
+                      <button key={p.id} className={`btn btn-sm ${filterProject === p.id ? 'btn-primary' : 'btn-outline'}`} onClick={() => setFilterProject(f => f === p.id ? '' : p.id)}>{p.name}</button>
+                    ))}
+                  </div>
+                </div>
+              )}
+              {requesterNamesExt.length > 0 && (
+                <div className="request-toolbar-section">
+                  <div className="card-title" style={{ marginBottom: 10 }}>Filter By Requester</div>
+                  <div className="request-filter-row">
+                    <button className={`btn btn-sm ${!filterRequester ? 'btn-primary' : 'btn-outline'}`} onClick={() => setFilterRequester('')}>All</button>
+                    {requesterNamesExt.map(name => (
+                      <button key={name} className={`btn btn-sm ${filterRequester === name ? 'btn-primary' : 'btn-outline'}`} onClick={() => setFilterRequester(f => f === name ? '' : name)}>{name}</button>
+                    ))}
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+        )}
+
+        {submissions.length === 0 ? (
+          <div className="empty-state"><h3>No requests yet</h3><p>Tasks will appear here once Fourge assigns you to a project.</p></div>
+        ) : filteredGroupsExt.length === 0 ? (
+          <div className="empty-state"><h3>No matching requests</h3><p>Try clearing the current filters.</p></div>
+        ) : (
+          <div>
+            <div style={{ marginBottom: 20, display: 'flex', gap: 4, flexWrap: 'wrap' }}>
+              {extTabs.map(tab => (
+                <button key={tab.id} type="button" className={`tab-btn${activeTab === tab.id ? ' active' : ''}`} onClick={() => setActiveTab(tab.id)}>
+                  {tab.label} ({tab.groups.length})
+                </button>
+              ))}
+            </div>
+            {currentExtGroups.length === 0 ? (
+              <div className="empty-state" style={{ padding: '28px 20px' }}>
+                <h3>No {extTabs.find(t => t.id === activeTab)?.label.toLowerCase()} requests</h3>
+              </div>
+            ) : (
+              <div className="table-wrapper">
+                <table>
+                  <thead>
+                    <tr><th>Project</th><th>Name</th><th>Revision</th><th>Request Type</th><th>Deadline</th><th>Status</th></tr>
+                  </thead>
+                  <tbody>{currentExtGroups.map(group => renderExtRow(group))}</tbody>
+                </table>
+              </div>
+            )}
+          </div>
+        )}
+        {error && <div className="card" style={{ color: 'var(--danger)', marginTop: 16 }}>{error}</div>}
+      </Layout>
+    );
+  }
+
+  // ── Client render ──────────────────────────────────────────────────────
+  const paidInvoiceIds = new Set(clientInvoices.filter(inv => inv.status === 'paid').map(inv => inv.id));
+  const clientPaidTaskIds = new Set(clientInvoiceItems.filter(item => item.task_id && paidInvoiceIds.has(item.invoice_id)).map(item => item.task_id));
+  const isFullyClosedClient = (task) => task?.status === 'client_approved' && Boolean(task?.invoiced) && clientPaidTaskIds.has(task.id);
+  const activeTasks = tasks.filter(t => t.status !== 'client_review' && t.status !== 'client_approved');
+  const reviewTasks = tasks.filter(t => t.status === 'client_review');
+  const completedTasks = tasks.filter(t => t.status === 'client_approved' && !isFullyClosedClient(t));
+  const closedTasks = tasks.filter(t => isFullyClosedClient(t));
+  const clientTabs = [
+    { id: 'active', label: 'Active', count: activeTasks.length, tasks: activeTasks, closed: false, emptyTitle: 'No active requests' },
+    { id: 'client-review', label: 'Client Review', count: reviewTasks.length, tasks: reviewTasks, closed: false, emptyTitle: 'No requests in review' },
+    { id: 'completed', label: 'Completed', count: completedTasks.length, tasks: completedTasks, closed: false, emptyTitle: 'No completed requests' },
+    { id: 'closed', label: 'Fully Closed', count: closedTasks.length, tasks: closedTasks, closed: true, emptyTitle: 'No fully closed requests' },
+  ];
+
+  const renderClientTaskRow = (task, showClosedStatus = false, isLast = false) => {
+    const taskSubs = submissions.filter(s => s.task_id === task.id);
+    const initialSub = taskSubs.find(s => s.type === 'initial') || taskSubs[0];
+    const latestSub = taskSubs[taskSubs.length - 1];
+    const hasRevision = taskSubs.length > 1 && latestSub?.submitted_by_name !== initialSub?.submitted_by_name;
+    return (
+      <div key={task.id} className="interactive-row" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '12px 16px', borderBottom: isLast ? 'none' : '1px solid var(--border)', cursor: 'pointer' }} onClick={() => navigate(`/requests/${task.id}`)}>
+        <div>
+          <span style={{ fontWeight: 600, fontSize: 13, color: 'var(--text-primary)' }}>
+            {task.title}{' '}
+            <span style={{ fontWeight: 400, color: 'var(--text-muted)' }}>{'R' + String(task.current_version || 0).padStart(2, '0')}</span>
+          </span>
+          <div style={{ fontSize: 11, color: 'var(--text-muted)', marginTop: 2 }}>
+            {task.submitted_at && `${new Date(task.submitted_at).toLocaleDateString()} · `}Submitted by {initialSub?.submitted_by_name || 'Unknown'}
+            {hasRevision && ` · Last updated by ${latestSub.submitted_by_name}`}
+          </div>
+        </div>
+        <div className="flex items-center gap-3">
+          {showClosedStatus ? <span className="badge badge-client_approved">Paid & Closed</span> : <StatusBadge status={task.status} />}
+        </div>
+      </div>
+    );
+  };
+
+  return (
+    <Layout>
+      <div className="page-header">
+        <div>
+          <div className="page-title">My Requests</div>
+          <div className="page-subtitle">Requests you have submitted.</div>
+        </div>
+        <button className="btn btn-primary" onClick={() => navigate('/new-request')}>+ New Request</button>
+      </div>
+
+      <div className="stats-grid" style={{ marginBottom: 24 }}>
+        <div className="stat-card stat-card-highlight">
+          <div className="stat-value">{projects.length}</div>
+          <div className="stat-label">Projects</div>
+        </div>
+        <div className="stat-card">
+          <div className="stat-value">{activeTasks.length + reviewTasks.length}</div>
+          <div className="stat-label">Active Requests</div>
+        </div>
+        <div className="stat-card">
+          <div className="stat-value" style={{ color: reviewTasks.length > 0 ? 'var(--accent)' : undefined }}>{reviewTasks.length}</div>
+          <div className="stat-label">Awaiting Review</div>
+        </div>
+        <div className="stat-card">
+          <div className="stat-value">{completedTasks.length}</div>
+          <div className="stat-label">Completed</div>
+        </div>
+        <div className="stat-card">
+          <div className="stat-value">{closedTasks.length}</div>
+          <div className="stat-label">Fully Closed</div>
+        </div>
+      </div>
+
+      {projects.length === 0 ? (
+        <div className="empty-state">
+          <div className="empty-state-icon">📋</div>
+          <h3>No requests yet</h3>
+          <p>Submit a new request to get started.</p>
+          <button className="btn btn-primary" style={{ marginTop: 16 }} onClick={() => navigate('/new-request')}>Submit Request</button>
+        </div>
+      ) : (
+        <div>
+          <div style={{ marginBottom: 20, display: 'flex', gap: 4, flexWrap: 'wrap' }}>
+            {clientTabs.map(tab => (
+              <button key={tab.id} type="button" className={`tab-btn${activeTab === tab.id ? ' active' : ''}`} onClick={() => setActiveTab(tab.id)}>
+                {tab.label} ({tab.count})
+              </button>
+            ))}
+          </div>
+          {clientTabs.filter(tab => tab.id === activeTab).map(section => {
+            const sectionProjects = projects.filter(project => section.tasks.some(task => task.project?.id === project.id));
+            if (sectionProjects.length === 0) {
+              return (
+                <div key={section.id} className="empty-state">
+                  <h3>{section.emptyTitle}</h3>
+                  {section.closed && <p>Requests move here once they are completed, invoiced, and paid.</p>}
+                </div>
+              );
+            }
+            return (
+              <div key={section.id}>
+                {sectionProjects.map(project => {
+                  const projectTasks = section.tasks.filter(task => task.project?.id === project.id);
+                  return (
+                    <div key={project.id} className="interactive-surface" style={{ marginBottom: 10, border: '1px solid var(--border)', borderRadius: 8, overflow: 'hidden', background: 'var(--card-bg)' }}>
+                      <div className="interactive-panel-toggle" style={{ cursor: 'default', padding: '12px 16px', borderBottom: '1px solid var(--border)', background: 'var(--card-bg-2)' }}>
+                        <div className="request-card-title">{project.name}</div>
+                      </div>
+                      <div style={{ display: 'flex', flexDirection: 'column' }}>
+                        {projectTasks.map((task, index) => renderClientTaskRow(task, section.closed, index === projectTasks.length - 1))}
+                      </div>
+                    </div>
+                  );
+                })}
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </Layout>
+  );
+}
diff --git a/src/pages/client/ClientDashboard.jsx b/src/pages/client/ClientDashboard.jsx
deleted file mode 100644
index 6cf2ce3..0000000
--- a/src/pages/client/ClientDashboard.jsx
+++ /dev/null
@@ -1,177 +0,0 @@
-import { useState, useEffect } from 'react';
-import { Link } from 'react-router-dom';
-import Layout from '../../components/Layout';
-import StatusBadge from '../../components/StatusBadge';
-import { supabase } from '../../lib/supabase';
-import { useAuth } from '../../context/AuthContext';
-import { withTimeout } from '../../lib/withTimeout';
-
-function TaskRow({ task, project }) {
-  return (
-    <Link
-      to={`/my-requests/${task.id}`}
-      className="interactive-row"
-      style={{
-        display: 'flex', flexDirection: 'column', gap: 4,
-        padding: '10px 14px', borderBottom: '1px solid var(--border)',
-        textDecoration: 'none', cursor: 'pointer',
-      }}
-    >
-      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
-        <span style={{ fontSize: 13, fontWeight: 600, color: 'var(--text-primary)' }}>{task.title}</span>
-        <StatusBadge status={task.status} />
-      </div>
-      <span style={{ fontSize: 11, color: 'var(--text-muted)' }}>{project?.name || '—'}</span>
-    </Link>
-  );
-}
-
-function TaskColumn({ title, tasks, projects, emptyMessage }) {
-  return (
-    <div className="card" style={{ padding: 0, overflow: 'hidden' }}>
-      <div style={{ padding: '12px 14px', borderBottom: tasks.length > 0 ? '1px solid var(--border)' : 'none', background: 'var(--card-bg-2)' }}>
-        <span style={{ fontSize: 13, fontWeight: 700, color: 'var(--text-primary)' }}>{title}</span>
-        {tasks.length > 0 && (
-          <span style={{ marginLeft: 8, fontSize: 11, fontWeight: 600, padding: '1px 7px', borderRadius: 20, background: 'var(--accent)', color: '#1a1a1a' }}>
-            {tasks.length}
-          </span>
-        )}
-      </div>
-      {tasks.length === 0 ? (
-        <div style={{ padding: '14px', fontSize: 13, color: 'var(--text-muted)' }}>{emptyMessage}</div>
-      ) : (
-        tasks.map(task => (
-          <TaskRow key={task.id} task={task} project={projects.find(p => p.id === task.project_id)} />
-        ))
-      )}
-    </div>
-  );
-}
-
-export default function ClientDashboard() {
-  const { currentUser } = useAuth();
-  const hasCompany = Boolean(currentUser?.company_id || currentUser?.company?.id || currentUser?.companies?.length);
-  const companies = (currentUser?.companies?.length ? currentUser.companies : (currentUser?.company ? [currentUser.company] : [])).slice().sort((a, b) => a.name.localeCompare(b.name));
-  const [activeCompanyId, setActiveCompanyId] = useState(companies[0]?.id || null);
-
-  const [allTasks, setAllTasks] = useState([]);
-  const [allProjects, setAllProjects] = useState([]);
-  const [allInvoices, setAllInvoices] = useState([]);
-  const [loading, setLoading] = useState(hasCompany);
-
-  useEffect(() => {
-    if (!hasCompany) { setLoading(false); return; }
-    async function load() {
-      try {
-        const [{ data: activeTasks }, { data: invoices }] = await withTimeout(Promise.all([
-          supabase.from('tasks').select('id, title, status, project_id').in('status', ['client_review', 'in_progress', 'on_hold', 'not_started']).order('submitted_at', { ascending: false }),
-          supabase.from('invoices').select('total, status, company_id').eq('status', 'sent'),
-        ]), 12000, 'Client dashboard load');
-
-        const tasks = activeTasks || [];
-        setAllTasks(tasks);
-        setAllInvoices(invoices || []);
-
-        if (tasks.length > 0) {
-          const projectIds = [...new Set(tasks.map(t => t.project_id).filter(Boolean))];
-          const { data: proj } = await supabase.from('projects').select('id, name, company_id').in('id', projectIds);
-          setAllProjects(proj || []);
-        }
-      } catch (error) {
-        console.error('ClientDashboard load failed:', error);
-      } finally {
-        setLoading(false);
-      }
-    }
-    load();
-  }, [hasCompany]);
-
-  const filterByCompany = (tasks) => {
-    if (companies.length <= 1 || !activeCompanyId) return tasks;
-    return tasks.filter(t => {
-      const proj = allProjects.find(p => p.id === t.project_id);
-      return proj?.company_id === activeCompanyId;
-    });
-  };
-
-  const visibleTasks = filterByCompany(allTasks);
-  const visibleProjects = companies.length <= 1
-    ? allProjects
-    : allProjects.filter(p => p.company_id === activeCompanyId);
-  const visibleInvoices = companies.length <= 1 || !activeCompanyId
-    ? allInvoices
-    : allInvoices.filter(i => i.company_id === activeCompanyId);
-
-  const reviewTasks = visibleTasks.filter(t => t.status === 'client_review');
-  const inProgressTasks = visibleTasks.filter(t => ['in_progress', 'on_hold', 'not_started'].includes(t.status));
-  const outstandingInvoices = visibleInvoices.reduce((sum, inv) => sum + Number(inv.total || 0), 0);
-
-  if (loading) return <Layout><p style={{ padding: 24, color: 'var(--text-muted)' }}>Loading...</p></Layout>;
-
-  return (
-    <Layout>
-      <div className="page-header">
-        <div>
-          <div className="page-title">Welcome back, {currentUser?.name?.split(' ')[0]}</div>
-          <div className="page-subtitle">Track active work and the items that need your attention.</div>
-        </div>
-        <Link to="/new-request" className="btn btn-primary">+ New Request</Link>
-      </div>
-
-      <div className="stats-grid">
-        <div className="stat-card stat-card-highlight">
-          <div className="stat-value" style={{ color: reviewTasks.length > 0 ? 'var(--accent)' : undefined }}>{reviewTasks.length}</div>
-          <div className="stat-label">Awaiting Review</div>
-        </div>
-        <div className="stat-card">
-          <div className="stat-value">{inProgressTasks.filter(t => ['in_progress', 'on_hold'].includes(t.status)).length}</div>
-          <div className="stat-label">In Progress</div>
-        </div>
-        <div className="stat-card">
-          <div className="stat-value">{inProgressTasks.filter(t => t.status === 'not_started').length}</div>
-          <div className="stat-label">Not Started</div>
-        </div>
-        <div className="stat-card">
-          <div className="stat-value" style={{ fontSize: 22 }}>${outstandingInvoices.toFixed(2)}</div>
-          <div className="stat-label">Outstanding Invoices</div>
-        </div>
-      </div>
-
-      {companies.length > 1 && (
-        <div style={{ marginTop: 20, marginBottom: 4, display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap' }} className="card-title">
-          {companies.map((company, index) => (
-            <span key={company.id} style={{ display: 'inline-flex', alignItems: 'center', gap: 10 }}>
-              {index > 0 && <span style={{ color: 'var(--text-muted)' }}>|</span>}
-              <button
-                type="button"
-                onClick={() => setActiveCompanyId(company.id)}
-                style={{
-                  background: 'none', border: 'none', padding: 0, margin: 0,
-                  cursor: 'pointer', font: 'inherit', textTransform: 'inherit', letterSpacing: 'inherit',
-                  color: activeCompanyId === company.id ? 'var(--text-primary)' : 'var(--text-muted)',
-                }}
-              >
-                {company.name}
-              </button>
-            </span>
-          ))}
-        </div>
-      )}
-
-      <div className="grid-2" style={{ marginTop: 16 }}>
-        <TaskColumn
-          title="Awaiting Your Review"
-          tasks={reviewTasks}
-          projects={visibleProjects}
-          emptyMessage="No items need your review."
-        />
-        <TaskColumn
-          title="In Progress"
-          tasks={inProgressTasks}
-          projects={visibleProjects}
-          emptyMessage="No items currently in progress."
-        />
-      </div>
-    </Layout>
-  );
-}
diff --git a/src/pages/client/MyCompany.jsx b/src/pages/client/MyCompany.jsx
deleted file mode 100644
index 4fb1659..0000000
--- a/src/pages/client/MyCompany.jsx
+++ /dev/null
@@ -1,194 +0,0 @@
-import { useState, useEffect } from 'react';
-import Layout from '../../components/Layout';
-import { supabase } from '../../lib/supabase';
-import { useAuth } from '../../context/AuthContext';
-
-export default function MyCompany() {
-  const { currentUser } = useAuth();
-  const companies = currentUser?.companies || [];
-  const [selectedId, setSelectedId] = useState(companies[0]?.id || null);
-  const company = companies.find(c => c.id === selectedId) || companies[0] || null;
-
-  const [members, setMembers] = useState([]);
-  const [loading, setLoading] = useState(!!company?.id);
-  const [editing, setEditing] = useState(false);
-  const [form, setForm] = useState({ name: company?.name || '', phone: company?.phone || '', address: company?.address || '' });
-  const [saving, setSaving] = useState(false);
-
-  useEffect(() => {
-    if (!company?.id) return;
-    setForm({ name: company.name || '', phone: company.phone || '', address: company.address || '' });
-    setEditing(false);
-    setLoading(true);
-    async function load() {
-      const [{ data: primaryMembers }, { data: memberRows }] = await Promise.all([
-        supabase.from('profiles').select('id, name, email').eq('company_id', company.id).in('role', ['client', 'external']),
-        supabase.from('company_members').select('profile:profiles(id, name, email)').eq('company_id', company.id),
-      ]);
-      const memberMap = new Map();
-      (primaryMembers || []).forEach(m => memberMap.set(m.id, m));
-      (memberRows || []).forEach(row => {
-        if (row.profile) memberMap.set(row.profile.id, row.profile);
-      });
-      setMembers([...memberMap.values()]);
-      setLoading(false);
-    }
-    load();
-  }, [company?.id]);
-
-  const handleSave = async (e) => {
-    e.preventDefault();
-    setSaving(true);
-    const { error } = await supabase.from('companies').update({
-      name: form.name.trim(),
-      phone: form.phone.trim(),
-      address: form.address.trim(),
-    }).eq('id', company.id);
-    setSaving(false);
-    if (error) { alert('Failed to save. Please try again.'); return; }
-    setEditing(false);
-  };
-
-  if (!company) return (
-    <Layout>
-      <div className="page-header"><div className="page-title">My Company</div></div>
-      <p style={{ color: 'var(--text-muted)' }}>No company linked to your account.</p>
-    </Layout>
-  );
-
-  if (loading) return <Layout><p style={{ padding: 24, color: 'var(--text-muted)' }}>Loading...</p></Layout>;
-
-  const companyDetails = [
-    { label: 'Company Name', value: form.name || company.name || '—' },
-    { label: 'Phone', value: company.phone || '—' },
-    { label: 'Address', value: company.address || '—' },
-    { label: 'Members', value: String(members.length) },
-  ];
-
-  return (
-    <Layout>
-      <div className="page-header">
-        <div>
-          {companies.length > 1 ? (
-            <div style={{ marginBottom: 4 }}>
-              <select
-                value={selectedId}
-                onChange={e => setSelectedId(e.target.value)}
-                style={{
-                  fontSize: 22, fontWeight: 700, background: 'var(--card-bg)',
-                  border: '1px solid var(--border)', borderRadius: 6,
-                  color: 'var(--text-primary)', cursor: 'pointer',
-                  padding: '4px 8px', fontFamily: 'inherit',
-                }}
-              >
-                {companies.map(c => <option key={c.id} value={c.id}>{c.name}</option>)}
-              </select>
-            </div>
-          ) : (
-            <div className="page-title">{form.name || company.name}</div>
-          )}
-          <div className="page-subtitle">
-            {[company.phone, company.address].filter(Boolean).join(' · ') || 'No contact info on file'}
-          </div>
-        </div>
-        {!editing && (
-          <button className="btn btn-outline" onClick={() => setEditing(true)}>Edit Info</button>
-        )}
-      </div>
-
-      <div className="stats-grid" style={{ marginBottom: 24 }}>
-        {companyDetails.map(detail => (
-          <div key={detail.label} className={`stat-card${detail.label === 'Members' ? ' stat-card-highlight' : ''}`}>
-            <div className="stat-value" style={{ fontSize: detail.label === 'Members' ? 28 : 18 }}>{detail.value}</div>
-            <div className="stat-label">{detail.label}</div>
-          </div>
-        ))}
-      </div>
-
-      {editing && (
-        <div className="card" style={{ marginBottom: 24, maxWidth: 520 }}>
-          <div className="card-title">Edit Company Info</div>
-          <form onSubmit={handleSave}>
-            <div className="form-group">
-              <label>Company Name *</label>
-              <input
-                type="text"
-                value={form.name}
-                onChange={e => setForm(f => ({ ...f, name: e.target.value }))}
-                required
-              />
-            </div>
-            <div className="grid-2">
-              <div className="form-group">
-                <label>Phone</label>
-                <input
-                  type="text"
-                  placeholder="+1 (555) 000-0000"
-                  value={form.phone}
-                  onChange={e => setForm(f => ({ ...f, phone: e.target.value }))}
-                />
-              </div>
-              <div className="form-group">
-                <label>Address</label>
-                <input
-                  type="text"
-                  placeholder="123 Main St, City, State"
-                  value={form.address}
-                  onChange={e => setForm(f => ({ ...f, address: e.target.value }))}
-                />
-              </div>
-            </div>
-            <div className="action-buttons">
-              <button type="submit" className="btn btn-primary" disabled={saving || !form.name.trim()}>
-                {saving ? 'Saving...' : 'Save Changes'}
-              </button>
-              <button type="button" className="btn btn-outline" onClick={() => {
-                setEditing(false);
-                setForm({ name: company.name || '', phone: company.phone || '', address: company.address || '' });
-              }}>
-                Cancel
-              </button>
-            </div>
-          </form>
-        </div>
-      )}
-
-      <div className="card">
-        <div className="card-title">People</div>
-        {members.length === 0 ? (
-          <p style={{ fontSize: 13, color: 'var(--text-muted)' }}>No members found.</p>
-        ) : (
-          <div style={{ display: 'flex', flexDirection: 'column' }}>
-            {members.map((member, i) => (
-              <div
-                key={member.id}
-                style={{
-                  display: 'flex', alignItems: 'center', gap: 12,
-                  padding: '12px 0',
-                  borderBottom: i < members.length - 1 ? '1px solid var(--border)' : 'none',
-                }}
-              >
-                <div style={{
-                  width: 36, height: 36, borderRadius: 6, background: 'var(--accent)',
-                  display: 'flex', alignItems: 'center', justifyContent: 'center',
-                  fontSize: 13, fontWeight: 700, color: '#111', flexShrink: 0,
-                }}>
-                  {member.name?.split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2)}
-                </div>
-                <div>
-                  <div style={{ fontWeight: 600, fontSize: 14, color: 'var(--text-primary)' }}>
-                    {member.name}
-                    {member.id === currentUser.id && (
-                      <span style={{ marginLeft: 8, fontSize: 11, color: 'var(--accent)', fontWeight: 500 }}>You</span>
-                    )}
-                  </div>
-                  <div style={{ fontSize: 12, color: 'var(--text-muted)' }}>{member.email || '—'}</div>
-                </div>
-              </div>
-            ))}
-          </div>
-        )}
-      </div>
-    </Layout>
-  );
-}
diff --git a/src/pages/client/MyInvoices.jsx b/src/pages/client/MyInvoices.jsx
index 774d8d8..00db003 100644
--- a/src/pages/client/MyInvoices.jsx
+++ b/src/pages/client/MyInvoices.jsx
@@ -1,9 +1,11 @@
 import { useState, useEffect } from 'react';
 import Layout from '../../components/Layout';
 import LoadingButton from '../../components/LoadingButton';
+import SortTh from '../../components/SortTh';
 import { supabase } from '../../lib/supabase';
 import { generateInvoicePDF } from '../../lib/invoice';
 import { useAuth } from '../../context/AuthContext';
+import { useSortable } from '../../hooks/useSortable';
 
 const statusColor = { draft: 'not_started', sent: 'in_progress', paid: 'client_approved' };
 
@@ -15,6 +17,7 @@ export default function MyInvoices() {
   const [invoices, setInvoices] = useState([]);
   const [loading, setLoading] = useState(true);
   const [generatingInvoiceId, setGeneratingInvoiceId] = useState('');
+  const { sortKey, sortDir, toggle, sort } = useSortable('invoice_date');
 
   useEffect(() => {
     async function load() {
@@ -46,6 +49,14 @@ export default function MyInvoices() {
   const paid = visible.filter(i => i.status === 'paid').reduce((s, i) => s + Number(i.total), 0);
   const overdueCount = visible.filter(inv => inv.status !== 'paid' && new Date(inv.due_date) < new Date()).length;
 
+  const sorted = sort(visible, (inv, key) => {
+    if (key === 'invoice_date' || key === 'due_date') return new Date(inv[key] || 0).getTime();
+    if (key === 'total') return Number(inv.total || 0);
+    return inv[key] || '';
+  });
+
+  const th = { sortKey, sortDir, onSort: toggle };
+
   return (
     <Layout>
       <div className="page-header">
@@ -71,23 +82,10 @@ export default function MyInvoices() {
       </div>
 
       {companies.length > 1 && (
-        <div style={{ marginBottom: 16, display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap' }} className="card-title">
-          {companies.map((company, index) => (
-            <span key={company.id} style={{ display: 'inline-flex', alignItems: 'center', gap: 10 }}>
-              {index > 0 && <span style={{ color: 'var(--text-muted)' }}>|</span>}
-              <button
-                type="button"
-                onClick={() => setActiveCompanyId(company.id)}
-                style={{
-                  background: 'none', border: 'none', padding: 0, margin: 0,
-                  cursor: 'pointer', font: 'inherit', textTransform: 'inherit', letterSpacing: 'inherit',
-                  color: activeCompanyId === company.id ? 'var(--text-primary)' : 'var(--text-muted)',
-                }}
-              >
-                {company.name}
-              </button>
-            </span>
-          ))}
+        <div style={{ marginBottom: 16 }}>
+          <select className="filter-select" value={activeCompanyId || ''} onChange={e => setActiveCompanyId(e.target.value)}>
+            {companies.map(c => <option key={c.id} value={c.id}>{c.name}</option>)}
+          </select>
         </div>
       )}
 
@@ -99,31 +97,49 @@ export default function MyInvoices() {
           <p>Your invoices will appear here once they are sent.</p>
         </div>
       ) : (
-        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
-          {visible.map(inv => {
-            const isOverdue = inv.status !== 'paid' && new Date(inv.due_date) < new Date();
-            return (
-              <div key={inv.id} className="interactive-surface" style={{ border: '1px solid var(--border)', borderRadius: 8, background: 'var(--card-bg)', padding: '14px 18px', display: 'flex', alignItems: 'center', gap: 16 }}>
-                <div style={{ flex: 1, minWidth: 0 }}>
-                  <div style={{ fontWeight: 600, fontSize: 14, color: 'var(--text-primary)', marginBottom: 4 }}>
-                    {inv.invoice_number}
-                    <span style={{ fontWeight: 400, fontSize: 12, color: 'var(--text-muted)', marginLeft: 10 }}>
-                      Issued {new Date(inv.invoice_date).toLocaleDateString()}
-                      {inv.items?.length > 0 && ` · ${inv.items.length} item${inv.items.length !== 1 ? 's' : ''}`}
-                    </span>
-                  </div>
-                  <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
-                    <span className={`badge badge-${statusColor[inv.status]}`} style={{ textTransform: 'capitalize' }}>{inv.status}</span>
-                    {isOverdue && <span style={{ fontSize: 12, color: 'var(--danger)' }}>Overdue</span>}
-                    <span style={{ fontSize: 14, fontWeight: 700, color: 'var(--accent)' }}>${Number(inv.total).toFixed(2)}</span>
-                  </div>
-                </div>
-                <LoadingButton className="btn btn-outline btn-sm" loading={generatingInvoiceId === inv.id} disabled={Boolean(generatingInvoiceId)} loadingText="Generating..." onClick={() => handleDownload(inv)} style={{ flexShrink: 0 }}>
-                  Download PDF
-                </LoadingButton>
-              </div>
-            );
-          })}
+        <div className="card">
+          <div className="table-wrapper">
+            <table>
+              <thead>
+                <tr>
+                  <SortTh col="invoice_number" {...th}>Invoice #</SortTh>
+                  <SortTh col="invoice_date" {...th}>Issued</SortTh>
+                  <SortTh col="due_date" {...th}>Due</SortTh>
+                  <SortTh col="status" {...th}>Status</SortTh>
+                  <SortTh col="total" {...th}>Total</SortTh>
+                  <th></th>
+                </tr>
+              </thead>
+              <tbody>
+                {sorted.map(inv => {
+                  const isOverdue = inv.status !== 'paid' && new Date(inv.due_date) < new Date();
+                  return (
+                    <tr key={inv.id}>
+                      <td style={{ fontWeight: 600 }}>{inv.invoice_number}</td>
+                      <td style={{ color: 'var(--text-muted)' }}>{new Date(inv.invoice_date).toLocaleDateString()}</td>
+                      <td style={{ color: isOverdue ? 'var(--danger)' : 'var(--text-muted)' }}>
+                        {inv.due_date ? new Date(inv.due_date).toLocaleDateString() : '—'}
+                        {isOverdue && <span style={{ marginLeft: 6, fontSize: 11 }}>Overdue</span>}
+                      </td>
+                      <td><span className={`badge badge-${statusColor[inv.status]}`} style={{ textTransform: 'capitalize' }}>{inv.status}</span></td>
+                      <td style={{ fontWeight: 700, color: 'var(--accent)' }}>${Number(inv.total).toFixed(2)}</td>
+                      <td>
+                        <LoadingButton
+                          className="btn btn-outline btn-sm"
+                          loading={generatingInvoiceId === inv.id}
+                          disabled={Boolean(generatingInvoiceId)}
+                          loadingText="Generating..."
+                          onClick={() => handleDownload(inv)}
+                        >
+                          Download PDF
+                        </LoadingButton>
+                      </td>
+                    </tr>
+                  );
+                })}
+              </tbody>
+            </table>
+          </div>
         </div>
       )}
     </Layout>
diff --git a/src/pages/client/MyProjectDetail.jsx b/src/pages/client/MyProjectDetail.jsx
deleted file mode 100644
index ae4d2e1..0000000
--- a/src/pages/client/MyProjectDetail.jsx
+++ /dev/null
@@ -1,201 +0,0 @@
-import { useState, useEffect } from 'react';
-import { useParams, useNavigate, Link } from 'react-router-dom';
-import Layout from '../../components/Layout';
-import StatusBadge from '../../components/StatusBadge';
-import { supabase } from '../../lib/supabase';
-import { useAuth } from '../../context/AuthContext';
-import { withTimeout } from '../../lib/withTimeout';
-
-const rLabel = (v) => 'R' + String(v || 0).padStart(2, '0');
-
-export default function MyProjectDetail() {
-  const { id } = useParams();
-  const navigate = useNavigate();
-  const { currentUser } = useAuth();
-
-  const [project, setProject] = useState(null);
-  const [tasks, setTasks] = useState([]);
-  const [submissions, setSubmissions] = useState([]);
-  const [loading, setLoading] = useState(true);
-  const [filter, setFilter] = useState('all');
-  const [editingName, setEditingName] = useState(false);
-  const [nameVal, setNameVal] = useState('');
-  const [savingName, setSavingName] = useState(false);
-
-  useEffect(() => {
-    async function load() {
-      try {
-        const { data: p } = await withTimeout(
-          supabase.from('projects').select('*').eq('id', id).single(),
-          12000,
-          'Project detail load'
-        );
-        if (!p) return;
-        setProject(p);
-
-        const { data: t } = await withTimeout(
-          supabase
-            .from('tasks')
-            .select('*')
-            .eq('project_id', id)
-            .order('submitted_at', { ascending: false }),
-          12000,
-          'Project tasks load'
-        );
-        setTasks(t || []);
-
-        if (t && t.length > 0) {
-          const { data: subs } = await withTimeout(
-            supabase
-            .from('submissions')
-            .select('id, task_id, submitted_by, submitted_by_name, version_number, type')
-            .in('task_id', t.map(task => task.id))
-            .order('version_number'),
-            12000,
-            'Project submissions load'
-          );
-          setSubmissions(subs || []);
-        } else {
-          setSubmissions([]);
-        }
-      } catch (error) {
-        console.error('MyProjectDetail load failed:', error);
-      } finally {
-        setLoading(false);
-      }
-    }
-    load();
-  }, [id]);
-
-  const handleSaveName = async (e) => {
-    e.preventDefault();
-    if (!nameVal.trim()) return;
-    setSavingName(true);
-    const { error } = await supabase.from('projects').update({ name: nameVal.trim() }).eq('id', id);
-    if (!error) {
-      setProject(p => ({ ...p, name: nameVal.trim() }));
-      setEditingName(false);
-    } else {
-      alert('Failed to save name.');
-    }
-    setSavingName(false);
-  };
-
-  if (loading) return <Layout><p style={{ padding: 24, color: 'var(--text-muted)' }}>Loading...</p></Layout>;
-  if (!project) return <Layout><p>Project not found.</p></Layout>;
-
-  const filteredTasks = filter === 'mine'
-    ? tasks.filter(task => {
-        const initial = submissions.find(s => s.task_id === task.id && s.type === 'initial');
-        return initial?.submitted_by === currentUser.id;
-      })
-    : tasks;
-
-  return (
-    <Layout>
-      <button className="back-link" onClick={() => navigate('/my-projects')}>← Back to Projects</button>
-
-      <div className="page-header">
-        <div>
-          {editingName ? (
-            <form onSubmit={handleSaveName} style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
-              <input
-                type="text"
-                value={nameVal}
-                onChange={e => setNameVal(e.target.value)}
-                autoFocus
-                required
-                style={{ fontSize: 22, fontWeight: 700, padding: '4px 10px', margin: 0, width: 260 }}
-              />
-              <button type="submit" className="btn btn-primary btn-sm" disabled={savingName}>{savingName ? '...' : 'Save'}</button>
-              <button type="button" className="btn btn-outline btn-sm" onClick={() => setEditingName(false)}>Cancel</button>
-            </form>
-          ) : (
-            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
-              <div className="page-title">{project.name}</div>
-              <button
-                className="btn btn-outline btn-sm"
-                onClick={() => { setNameVal(project.name); setEditingName(true); }}
-              >
-                Edit
-              </button>
-            </div>
-          )}
-          <div className="page-subtitle">
-            {tasks.length} request{tasks.length !== 1 ? 's' : ''} · Started {new Date(project.created_at).toLocaleDateString()}
-          </div>
-        </div>
-        <Link to={`/new-request?project=${encodeURIComponent(project.name)}`} className="btn btn-primary">
-          + Add Request
-        </Link>
-      </div>
-
-      <div className="card page-toolbar">
-        <div className="page-toolbar-grid">
-          <div className="page-toolbar-section">
-            <div className="card-title" style={{ marginBottom: 10 }}>Filter</div>
-            <div className="page-toolbar-filters">
-              <button
-                className={`btn btn-sm ${filter === 'all' ? 'btn-primary' : 'btn-outline'}`}
-                onClick={() => setFilter('all')}
-              >
-                All Requests
-              </button>
-              <button
-                className={`btn btn-sm ${filter === 'mine' ? 'btn-primary' : 'btn-outline'}`}
-                onClick={() => setFilter('mine')}
-              >
-                Mine Only
-              </button>
-            </div>
-          </div>
-
-        </div>
-      </div>
-
-      {filteredTasks.length === 0 ? (
-        <div className="empty-state">
-          <h3>{filter === 'mine' ? "You haven't submitted any requests to this project" : 'No requests yet'}</h3>
-          <Link to={`/new-request?project=${encodeURIComponent(project.name)}`} className="btn btn-primary" style={{ marginTop: 16 }}>
-            Add Request
-          </Link>
-        </div>
-      ) : (
-        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
-          {filteredTasks.map(task => {
-            const taskSubs = submissions.filter(s => s.task_id === task.id);
-            const initialSub = taskSubs.find(s => s.type === 'initial') || taskSubs[0];
-            const latestSub = taskSubs[taskSubs.length - 1];
-            const hasRevision = latestSub && initialSub && latestSub.id !== initialSub.id && latestSub.submitted_by_name !== initialSub.submitted_by_name;
-            const isMine = initialSub?.submitted_by === currentUser.id;
-
-            return (
-              <Link key={task.id} to={`/my-requests/${task.id}`} className="request-card" style={{ textDecoration: 'none', cursor: 'pointer', display: 'block' }}>
-                <div className="request-card-header">
-                  <div>
-                    <div className="request-card-title">
-                      {task.title}{' '}
-                      <span style={{ fontWeight: 400, color: 'var(--text-muted)', fontSize: 13 }}>
-                        {rLabel(task.current_version)}
-                      </span>
-                      {isMine && (
-                        <span style={{ marginLeft: 8, fontSize: 11, background: 'rgba(245,165,35,0.15)', color: 'var(--accent)', padding: '2px 8px', borderRadius: 4, fontWeight: 600 }}>
-                          Mine
-                        </span>
-                      )}
-                    </div>
-                    <div className="request-card-meta" style={{ marginTop: 4 }}>
-                      {initialSub?.submitted_by_name && <>By {initialSub.submitted_by_name}</>}
-                      {hasRevision && <> · Updated by {latestSub.submitted_by_name}</>}
-                    </div>
-                  </div>
-                  <StatusBadge status={task.status} />
-                </div>
-              </Link>
-            );
-          })}
-        </div>
-      )}
-    </Layout>
-  );
-}
diff --git a/src/pages/client/MyProjects.jsx b/src/pages/client/MyProjects.jsx
deleted file mode 100755
index 1954a41..0000000
--- a/src/pages/client/MyProjects.jsx
+++ /dev/null
@@ -1,243 +0,0 @@
-import { useState, useEffect } from 'react';
-import { Link } from 'react-router-dom';
-import Layout from '../../components/Layout';
-import StatusBadge from '../../components/StatusBadge';
-import { supabase } from '../../lib/supabase';
-import { useAuth } from '../../context/AuthContext';
-import { withTimeout } from '../../lib/withTimeout';
-
-const rLabel = (v) => 'R' + String(v || 0).padStart(2, '0');
-
-function ProjectGroup({ project, tasks, submissions, currentUserId, filter }) {
-  const [open, setOpen] = useState(false);
-
-  const filteredTasks = filter === 'mine'
-    ? tasks.filter(task => {
-        const initial = submissions.find(s => s.task_id === task.id && s.type === 'initial');
-        return initial?.submitted_by === currentUserId;
-      })
-    : tasks;
-
-  if (filter === 'mine' && filteredTasks.length === 0) return null;
-
-  return (
-    <div className="interactive-surface" style={{ border: '1px solid var(--border)', borderRadius: 8, overflow: 'hidden', marginBottom: 8 }}>
-      {/* Project header — clickable to collapse */}
-      <button
-        className="interactive-panel-toggle"
-        onClick={() => setOpen(o => !o)}
-        style={{
-          width: '100%', display: 'flex', alignItems: 'center',
-          justifyContent: 'space-between', padding: '12px 16px',
-          background: 'var(--card-bg-2)', border: 'none', cursor: 'pointer',
-          borderBottom: open ? '1px solid var(--border)' : 'none',
-          fontFamily: 'inherit',
-        }}
-      >
-        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
-          <Link
-            to={`/my-projects/${project.id}`}
-            onClick={e => e.stopPropagation()}
-            style={{ fontSize: 14, fontWeight: 700, color: 'var(--text-primary)', textDecoration: 'none' }}
-          >
-            {project.name}
-          </Link>
-          <span style={{ fontSize: 11, fontWeight: 600, padding: '2px 8px', borderRadius: 4, background: 'rgba(245,165,35,0.15)', color: 'var(--accent)' }}>
-            {filteredTasks.length} request{filteredTasks.length !== 1 ? 's' : ''}
-          </span>
-        </div>
-        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
-          <StatusBadge status={project.status} />
-          <span style={{ fontSize: 12, color: 'var(--text-muted)' }}>{open ? '▲' : '▼'}</span>
-        </div>
-      </button>
-
-      {open && (
-        <div style={{ background: 'var(--card-bg)' }}>
-          {filteredTasks.length === 0 ? (
-            <div style={{ padding: '16px', fontSize: 13, color: 'var(--text-muted)', textAlign: 'center' }}>
-              No requests in this project yet.
-            </div>
-          ) : (
-            filteredTasks.map((task, i) => {
-              const taskSubs = submissions.filter(s => s.task_id === task.id);
-              const initialSub = taskSubs.find(s => s.type === 'initial') || taskSubs[0];
-              const latestSub = taskSubs[taskSubs.length - 1];
-              const hasRevision = latestSub && initialSub && latestSub.id !== initialSub.id && latestSub.submitted_by_name !== initialSub.submitted_by_name;
-              const isMine = initialSub?.submitted_by === currentUserId;
-
-              return (
-                <Link
-                  key={task.id}
-                  to={`/my-requests/${task.id}`}
-                  className="interactive-row"
-                  style={{
-                    display: 'flex', alignItems: 'center', justifyContent: 'space-between',
-                    padding: '12px 16px',
-                    borderBottom: i < filteredTasks.length - 1 ? '1px solid var(--border)' : 'none',
-                    gap: 8, textDecoration: 'none', cursor: 'pointer',
-                  }}
-                >
-                  <div style={{ minWidth: 0 }}>
-                    <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
-                      <span style={{ fontWeight: 600, fontSize: 13, color: 'var(--text-primary)' }}>
-                        {task.title}
-                      </span>
-                      <span style={{ fontSize: 12, color: 'var(--text-muted)' }}>
-                        {rLabel(task.current_version)}
-                      </span>
-                      {isMine && (
-                        <span style={{ fontSize: 11, background: 'rgba(245,165,35,0.15)', color: 'var(--accent)', padding: '1px 7px', borderRadius: 4, fontWeight: 600 }}>
-                          Mine
-                        </span>
-                      )}
-                    </div>
-                    <div style={{ fontSize: 11, color: 'var(--text-muted)', marginTop: 3 }}>
-                      {initialSub?.submitted_by_name && <>By {initialSub.submitted_by_name}</>}
-                      {hasRevision && <> · Updated by {latestSub.submitted_by_name}</>}
-                    </div>
-                  </div>
-                  <StatusBadge status={task.status} />
-                </Link>
-              );
-            })
-          )}
-        </div>
-      )}
-    </div>
-  );
-}
-
-export default function MyProjects() {
-  const { currentUser } = useAuth();
-  const [projects, setProjects] = useState([]);
-  const [tasks, setTasks] = useState([]);
-  const [submissions, setSubmissions] = useState([]);
-  const [loading, setLoading] = useState(true);
-  const [filter, setFilter] = useState('all'); // 'all' | 'mine'
-  const companies = (currentUser.companies?.length ? currentUser.companies : (currentUser.company ? [currentUser.company] : [])).slice().sort((a, b) => a.name.localeCompare(b.name));
-  const [activeCompanyId, setActiveCompanyId] = useState(() => companies[0]?.id || null);
-
-  useEffect(() => {
-    async function load() {
-      try {
-        const [{ data: p }, { data: t }] = await withTimeout(Promise.all([
-          supabase.from('projects').select('*').order('created_at', { ascending: false }),
-          supabase.from('tasks').select('*').order('submitted_at', { ascending: false }),
-        ]), 12000, 'Projects load');
-        setProjects(p || []);
-        setTasks(t || []);
-
-        if (t && t.length > 0) {
-          const { data: subs } = await withTimeout(
-            supabase
-              .from('submissions')
-              .select('id, task_id, submitted_by, submitted_by_name, version_number, type')
-              .in('task_id', t.map(task => task.id))
-              .order('version_number'),
-            12000,
-            'Project submissions load'
-          );
-          setSubmissions(subs || []);
-        } else {
-          setSubmissions([]);
-        }
-      } catch (error) {
-        console.error('MyProjects load failed:', error);
-        setProjects([]);
-        setTasks([]);
-        setSubmissions([]);
-      } finally {
-        setLoading(false);
-      }
-    }
-    load();
-  }, []);
-
-  if (loading) return <Layout><p style={{ padding: 24, color: 'var(--text-muted)' }}>Loading...</p></Layout>;
-
-  return (
-    <Layout>
-      <div className="page-header">
-        <div>
-          <div className="page-title">Projects</div>
-          <div className="page-subtitle">All work for your company.</div>
-        </div>
-        <Link to="/new-project" className="btn btn-primary">+ New Project</Link>
-      </div>
-
-      <div className="card page-toolbar">
-        <div className="page-toolbar-grid">
-          <div className="page-toolbar-section">
-            <div className="card-title" style={{ marginBottom: 10 }}>Filter</div>
-            <div className="page-toolbar-filters">
-              <button
-                className={`btn btn-sm ${filter === 'all' ? 'btn-primary' : 'btn-outline'}`}
-                onClick={() => setFilter('all')}
-              >
-                All Requests
-              </button>
-              <button
-                className={`btn btn-sm ${filter === 'mine' ? 'btn-primary' : 'btn-outline'}`}
-                onClick={() => setFilter('mine')}
-              >
-                Mine Only
-              </button>
-            </div>
-          </div>
-
-        </div>
-      </div>
-
-      {companies.length > 1 && (
-        <div style={{ marginBottom: 16, display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap' }} className="card-title">
-          {companies.map((company, index) => (
-            <span key={company.id} style={{ display: 'inline-flex', alignItems: 'center', gap: 10 }}>
-              {index > 0 && <span style={{ color: 'var(--text-muted)' }}>|</span>}
-              <button
-                type="button"
-                onClick={() => setActiveCompanyId(company.id)}
-                style={{
-                  background: 'none', border: 'none', padding: 0, margin: 0,
-                  cursor: 'pointer', font: 'inherit', textTransform: 'inherit', letterSpacing: 'inherit',
-                  color: activeCompanyId === company.id ? 'var(--text-primary)' : 'var(--text-muted)',
-                }}
-              >
-                {company.name}
-              </button>
-            </span>
-          ))}
-        </div>
-      )}
-
-      {projects.length === 0 ? (
-        <div className="empty-state">
-          <h3>No projects yet</h3>
-          <p>Submit a request and a project will be created automatically.</p>
-          <Link to="/new-project" className="btn btn-primary" style={{ marginTop: 16 }}>+ New Project</Link>
-        </div>
-      ) : (() => {
-        const visibleProjects = companies.length > 1
-          ? projects.filter(p => p.company_id === activeCompanyId)
-          : projects;
-
-        if (visibleProjects.length === 0) return (
-          <div className="empty-state">
-            <h3>No projects for this company</h3>
-          </div>
-        );
-
-        return visibleProjects.map(project => (
-          <ProjectGroup
-            key={project.id}
-            project={project}
-            tasks={tasks.filter(t => t.project_id === project.id)}
-            submissions={submissions}
-            currentUserId={currentUser.id}
-            filter={filter}
-          />
-        ));
-      })()}
-    </Layout>
-  );
-}
diff --git a/src/pages/client/MyRequests.jsx b/src/pages/client/MyRequests.jsx
deleted file mode 100755
index a33724b..0000000
--- a/src/pages/client/MyRequests.jsx
+++ /dev/null
@@ -1,213 +0,0 @@
-import { useState, useEffect } from 'react';
-import { Link } from 'react-router-dom';
-import Layout from '../../components/Layout';
-import StatusBadge from '../../components/StatusBadge';
-import { supabase } from '../../lib/supabase';
-import { useAuth } from '../../context/AuthContext';
-import { withTimeout } from '../../lib/withTimeout';
-
-export default function MyRequests() {
-  const { currentUser } = useAuth();
-  const [projects, setProjects] = useState([]);
-  const [tasks, setTasks] = useState([]);
-  const [submissions, setSubmissions] = useState([]);
-  const [invoices, setInvoices] = useState([]);
-  const [invoiceItems, setInvoiceItems] = useState([]);
-  const [loading, setLoading] = useState(true);
-  const [activeTab, setActiveTab] = useState('active');
-
-  useEffect(() => {
-    async function load() {
-      try {
-        const { data: mySubs } = await withTimeout(
-          supabase.from('submissions').select('task_id, submitted_by_name, version_number, type').eq('submitted_by', currentUser.id).eq('type', 'initial'),
-          10000, 'My submissions'
-        );
-
-        if (!mySubs || mySubs.length === 0) return;
-
-        const myTaskIds = mySubs.map(s => s.task_id);
-
-        const [{ data: t }, { data: allSubs }, { data: inv }, { data: itemRows }] = await withTimeout(
-          Promise.all([
-            supabase.from('tasks').select('*, project:projects(id, name, created_at, status)').in('id', myTaskIds),
-            supabase.from('submissions').select('task_id, submitted_by_name, version_number, type').in('task_id', myTaskIds).order('version_number'),
-            supabase.from('invoices').select('id, status'),
-            supabase.from('invoice_items').select('task_id, invoice_id').in('task_id', myTaskIds),
-          ]),
-          12000, 'My requests data'
-        );
-
-        const tasks = t || [];
-        setTasks(tasks);
-        setSubmissions(allSubs || []);
-        setInvoices(inv || []);
-        setInvoiceItems(itemRows || []);
-
-        const projectMap = {};
-        tasks.forEach(task => {
-          const p = task.project;
-          if (p && !projectMap[p.id]) projectMap[p.id] = { ...p, id: p.id };
-        });
-        setProjects(Object.values(projectMap));
-      } catch (err) {
-        console.error('MyRequests load failed:', err);
-      } finally {
-        setLoading(false);
-      }
-    }
-    load();
-  }, [currentUser.id]);
-
-  if (loading) return <Layout><p style={{ padding: 24, color: 'var(--text-muted)' }}>Loading...</p></Layout>;
-
-  const paidInvoiceIds = new Set(invoices.filter(invoice => invoice.status === 'paid').map(invoice => invoice.id));
-  const paidTaskIds = new Set(
-    invoiceItems
-      .filter(item => item.task_id && paidInvoiceIds.has(item.invoice_id))
-      .map(item => item.task_id)
-  );
-  const isFullyClosedTask = (task) => task?.status === 'client_approved' && Boolean(task?.invoiced) && paidTaskIds.has(task.id);
-  const activeCount = tasks.filter(task => task.status !== 'client_approved').length;
-  const reviewCount = tasks.filter(task => task.status === 'client_review').length;
-  const completedCount = tasks.filter(task => task.status === 'client_approved' && !isFullyClosedTask(task)).length;
-  const fullyClosedCount = tasks.filter(task => isFullyClosedTask(task)).length;
-  const activeTasks = tasks.filter(task => task.status !== 'client_review' && task.status !== 'client_approved');
-  const reviewTasks = tasks.filter(task => task.status === 'client_review');
-  const completedTasks = tasks.filter(task => task.status === 'client_approved' && !isFullyClosedTask(task));
-  const closedTasks = tasks.filter(task => isFullyClosedTask(task));
-  const renderTaskRow = (task, showClosedStatus = false, isLast = false) => {
-    const taskSubs = submissions.filter(s => s.task_id === task.id);
-    const initialSub = taskSubs.find(s => s.type === 'initial') || taskSubs[0];
-    const latestSub = taskSubs[taskSubs.length - 1];
-    const hasRevision = taskSubs.length > 1 && latestSub?.submitted_by_name !== initialSub?.submitted_by_name;
-    return (
-      <Link
-        key={task.id}
-        to={`/my-requests/${task.id}`}
-        className="interactive-row"
-        style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '12px 16px', borderBottom: isLast ? 'none' : '1px solid var(--border)', textDecoration: 'none' }}
-      >
-        <div>
-          <span style={{ fontWeight: 600, fontSize: 13, color: 'var(--text-primary)' }}>
-            {task.title}{' '}
-            <span style={{ fontWeight: 400, color: 'var(--text-muted)' }}>
-              {'R' + String(task.current_version || 0).padStart(2, '0')}
-            </span>
-          </span>
-          <div style={{ fontSize: 11, color: 'var(--text-muted)', marginTop: 2 }}>
-            {task.submitted_at && `${new Date(task.submitted_at).toLocaleDateString()} · `}Submitted by {initialSub?.submitted_by_name || 'Unknown'}
-            {hasRevision && ` · Last updated by ${latestSub.submitted_by_name}`}
-          </div>
-        </div>
-        <div className="flex items-center gap-3">
-          {showClosedStatus ? (
-            <span className="badge badge-client_approved">Paid & Closed</span>
-          ) : (
-            <StatusBadge status={task.status} />
-          )}
-        </div>
-      </Link>
-    );
-  };
-
-  return (
-    <Layout>
-      <div className="page-header">
-        <div>
-          <div className="page-title">My Requests</div>
-          <div className="page-subtitle">Requests you have submitted.</div>
-        </div>
-        <Link to="/new-request" className="btn btn-primary">+ New Request</Link>
-      </div>
-
-      <div className="stats-grid" style={{ marginBottom: 24 }}>
-        <div className="stat-card stat-card-highlight">
-          <div className="stat-value">{projects.length}</div>
-          <div className="stat-label">Projects</div>
-        </div>
-        <div className="stat-card">
-          <div className="stat-value">{activeCount}</div>
-          <div className="stat-label">Active Requests</div>
-        </div>
-        <div className="stat-card">
-          <div className="stat-value" style={{ color: reviewCount > 0 ? 'var(--accent)' : undefined }}>{reviewCount}</div>
-          <div className="stat-label">Awaiting Review</div>
-        </div>
-        <div className="stat-card">
-          <div className="stat-value">{completedCount}</div>
-          <div className="stat-label">Completed</div>
-        </div>
-        <div className="stat-card">
-          <div className="stat-value">{fullyClosedCount}</div>
-          <div className="stat-label">Fully Closed</div>
-        </div>
-      </div>
-
-      {projects.length === 0 ? (
-        <div className="empty-state">
-          <div className="empty-state-icon">📋</div>
-          <h3>No requests yet</h3>
-          <p>Submit a new request to get started.</p>
-          <Link to="/new-request" className="btn btn-primary" style={{ marginTop: 16 }}>Submit Request</Link>
-        </div>
-      ) : (
-        <div>
-          <div style={{ marginBottom: 20, display: 'flex', gap: 4, flexWrap: 'wrap' }}>
-            {[
-              { id: 'active', label: 'Active', count: activeTasks.length },
-              { id: 'client-review', label: 'Client Review', count: reviewTasks.length },
-              { id: 'completed', label: 'Completed', count: completedTasks.length },
-              { id: 'closed', label: 'Fully Closed', count: closedTasks.length },
-            ].map(tab => (
-              <button
-                key={tab.id}
-                type="button"
-                className={`tab-btn${activeTab === tab.id ? ' active' : ''}`}
-                onClick={() => setActiveTab(tab.id)}
-              >
-                {tab.label} ({tab.count})
-              </button>
-            ))}
-          </div>
-
-          {[
-            { id: 'active', emptyTitle: 'No active requests', tasks: activeTasks, closed: false },
-            { id: 'client-review', emptyTitle: 'No requests in review', tasks: reviewTasks, closed: false },
-            { id: 'completed', emptyTitle: 'No completed requests', tasks: completedTasks, closed: false },
-            { id: 'closed', emptyTitle: 'No fully closed requests', tasks: closedTasks, closed: true },
-          ].filter(section => section.id === activeTab).map(section => {
-            const sectionProjects = projects.filter(project => section.tasks.some(task => task.project?.id === project.id));
-
-            if (sectionProjects.length === 0) {
-              return (
-                <div key={section.id} className="empty-state">
-                  <h3>{section.emptyTitle}</h3>
-                  {section.closed && <p>Requests move here once they are completed, invoiced, and paid.</p>}
-                </div>
-              );
-            }
-
-            return (
-              <div key={section.id}>
-                {sectionProjects.map(project => {
-                  const projectTasks = section.tasks.filter(task => task.project?.id === project.id);
-                  return (
-                    <div key={project.id} className="interactive-surface" style={{ marginBottom: 10, border: '1px solid var(--border)', borderRadius: 8, overflow: 'hidden', background: 'var(--card-bg)' }}>
-                      <div className="interactive-panel-toggle" style={{ cursor: 'default', padding: '12px 16px', borderBottom: '1px solid var(--border)', background: 'var(--card-bg-2)' }}>
-                        <div className="request-card-title">{project.name}</div>
-                      </div>
-                      <div style={{ display: 'flex', flexDirection: 'column' }}>
-                        {projectTasks.map((task, index) => renderTaskRow(task, section.closed, index === projectTasks.length - 1))}
-                      </div>
-                    </div>
-                  );
-                })}
-              </div>
-            );
-          })}
-        </div>
-      )}
-    </Layout>
-  );
-}
diff --git a/src/pages/client/NewRequest.jsx b/src/pages/client/NewRequest.jsx
index 8a9e1cc..2f30e96 100755
--- a/src/pages/client/NewRequest.jsx
+++ b/src/pages/client/NewRequest.jsx
@@ -8,6 +8,7 @@ import { sendEmail } from '../../lib/email';
 import { useAuth } from '../../context/AuthContext';
 import { addDaysToDateOnly, getTodayDateOnlyEST } from '../../lib/dates';
 import { createInitialSubmissionForRequest, createTaskForRequest, findOrCreateProject } from '../../lib/requestSubmission';
+import { uploadFilesToRequestInfo } from '../../lib/filebrowserFolders';
 
 const defaultRequestDeadline = () => addDaysToDateOnly(getTodayDateOnlyEST(), 3);
 const emptyForm = (project = '') => ({ project, serviceType: '', title: '', deadline: defaultRequestDeadline(), description: '', isHot: false });
@@ -139,6 +140,10 @@ export default function NewRequest() {
             }
           }
         }
+
+        // Best-effort: also copy files to FileBrowser Request Info folder
+        const taskTitle = form.title.trim() || form.serviceType;
+        uploadFilesToRequestInfo(files, resolvedProject.name, taskTitle).catch(() => {});
       }
 
       sendEmail('new_request', 'hello@fourgebranding.com', {
diff --git a/src/pages/client/RequestDetail.jsx b/src/pages/client/RequestDetail.jsx
deleted file mode 100755
index 693a700..0000000
--- a/src/pages/client/RequestDetail.jsx
+++ /dev/null
@@ -1,611 +0,0 @@
-import { useState, useEffect } from 'react';
-import { useParams, useNavigate } from 'react-router-dom';
-import JSZip from 'jszip';
-import Layout from '../../components/Layout';
-import StatusBadge from '../../components/StatusBadge';
-import FileAttachment from '../../components/FileAttachment';
-import LoadingButton from '../../components/LoadingButton';
-import { supabase } from '../../lib/supabase';
-import { sendEmail } from '../../lib/email';
-import { useAuth } from '../../context/AuthContext';
-import { formatDateEST } from '../../lib/dates';
-import { addDaysToDateOnly, getTodayDateOnlyEST } from '../../lib/dates';
-
-const rLabel = (v) => 'R' + String(v || 0).padStart(2, '0');
-const getRevisionBaseline = (task, submissions) =>
-  Math.max(task?.current_version || 0, ...(submissions || []).map(sub => sub.version_number || 0));
-
-export default function RequestDetail() {
-  const { id } = useParams();
-  const navigate = useNavigate();
-  const { currentUser } = useAuth();
-
-  const [task, setTask] = useState(null);
-  const [project, setProject] = useState(null);
-  const [submissions, setSubmissions] = useState([]);
-  const [loading, setLoading] = useState(true);
-
-  const [editingTitle, setEditingTitle] = useState(false);
-  const [titleVal, setTitleVal] = useState('');
-  const [savingTitle, setSavingTitle] = useState(false);
-
-  const [action, setAction] = useState(null);
-  const [revisionForm, setRevisionForm] = useState({ serviceType: '', deadline: addDaysToDateOnly(getTodayDateOnlyEST(), 3), description: '', revisionType: 'client_revision', isHot: false });
-  const [revisionFiles, setRevisionFiles] = useState([]);
-  const [submitted, setSubmitted] = useState(false);
-  const [saving, setSaving] = useState(false);
-  const [downloading, setDownloading] = useState('');
-
-  useEffect(() => {
-    async function load() {
-      try {
-        const { data: t } = await supabase.from('tasks').select('*').eq('id', id).single();
-        if (!t) return;
-        setTask(t);
-
-        const [{ data: p }, { data: subs }] = await Promise.all([
-          supabase.from('projects').select('*').eq('id', t.project_id).single(),
-          supabase.from('submissions').select('*, files:submission_files(*), delivery:deliveries(*, files:delivery_files(*))').eq('task_id', id).order('version_number'),
-        ]);
-        setProject(p);
-        setSubmissions(subs || []);
-      } catch (error) {
-        console.error('RequestDetail load failed:', error);
-      } finally {
-        setLoading(false);
-      }
-    }
-    load();
-  }, [id]);
-
-  const handleApprove = async () => {
-    setSaving(true);
-    await supabase.from('tasks').update({ status: 'client_approved', completed_at: new Date().toISOString() }).eq('id', id);
-    setTask(t => ({ ...t, status: 'client_approved' }));
-    setAction('approved');
-    sendEmail('client_approved', 'hello@fourgebranding.com', {
-      clientName: currentUser.name,
-      serviceType: task.title,
-      projectName: project?.name,
-      taskId: id,
-    }).catch((emailError) => {
-      console.error('Client approved email failed:', emailError);
-    });
-    setSaving(false);
-  };
-
-  const handleDelete = async () => {
-    setSaving(true);
-    try {
-      // Clean up storage files — non-blocking (don't let storage errors prevent DB delete)
-      try {
-        const { data: subs } = await supabase.from('submissions').select('id').eq('task_id', id);
-        if (subs && subs.length > 0) {
-          const { data: storageFiles } = await supabase
-            .from('submission_files').select('storage_path').in('submission_id', subs.map(s => s.id));
-          if (storageFiles && storageFiles.length > 0) {
-            await supabase.storage.from('submissions').remove(storageFiles.map(f => f.storage_path));
-          }
-          const { data: deliveries } = await supabase
-            .from('deliveries').select('id').in('submission_id', subs.map(s => s.id));
-          if (deliveries && deliveries.length > 0) {
-            const { data: deliveryFiles } = await supabase
-              .from('delivery_files').select('storage_path').in('delivery_id', deliveries.map(d => d.id));
-            if (deliveryFiles && deliveryFiles.length > 0) {
-              await supabase.storage.from('deliveries').remove(deliveryFiles.map(f => f.storage_path));
-            }
-          }
-        }
-      } catch (storageErr) {
-        console.warn('Storage cleanup failed, continuing with DB delete:', storageErr.message);
-      }
-
-      const { error: deleteError } = await supabase.from('tasks').delete().eq('id', id);
-      if (deleteError) throw new Error(deleteError.message);
-
-      navigate('/my-projects');
-    } catch (err) {
-      console.error('Delete failed:', err);
-      alert(`Failed to delete: ${err.message}`);
-      setSaving(false);
-    }
-  };
-
-  const handleRevisionSubmit = async (e) => {
-    e.preventDefault();
-    setSaving(true);
-
-    try {
-      if (action === 'edit') {
-        // No version bump — amendment notes attach to the current version
-        const { data: newSub, error: subError } = await supabase.from('submissions').insert({
-          task_id: id,
-          version_number: getRevisionBaseline(task, submissions),
-          type: 'amendment',
-          is_hot: revisionForm.isHot,
-          service_type: task.title,
-          deadline: revisionForm.deadline || null,
-          description: revisionForm.description,
-          submitted_by: currentUser.id,
-          submitted_by_name: currentUser.name,
-        }).select().single();
-        if (subError) throw new Error(subError.message);
-
-        if (newSub && revisionFiles.length > 0) {
-          for (const file of revisionFiles) {
-            const path = `${id}/${Date.now()}_${file.name}`;
-            const { data: uploaded, error: uploadError } = await supabase.storage.from('submissions').upload(path, file);
-            if (uploadError) throw new Error(`Failed to upload "${file.name}": ${uploadError.message}`);
-            if (uploaded) {
-              const { error: fileRecordError } = await supabase.from('submission_files').insert({
-                submission_id: newSub.id, name: file.name, storage_path: path, size: file.size,
-              });
-              if (fileRecordError) throw new Error(`Failed to save file record for "${file.name}": ${fileRecordError.message}`);
-            }
-          }
-        }
-      } else {
-        const newVersion = getRevisionBaseline(task, submissions) + 1;
-        await supabase.from('tasks').update({
-          status: 'not_started',
-          current_version: newVersion,
-          assigned_to: null,
-          assigned_name: null,
-        }).eq('id', id);
-
-        const { data: newSub, error: subError } = await supabase.from('submissions').insert({
-          task_id: id,
-          version_number: newVersion,
-          type: 'revision',
-          is_hot: revisionForm.isHot,
-          revision_type: revisionForm.revisionType,
-          service_type: revisionForm.serviceType,
-          deadline: revisionForm.deadline || null,
-          description: revisionForm.description,
-          submitted_by: currentUser.id,
-          submitted_by_name: currentUser.name,
-        }).select().single();
-        if (subError) throw new Error(subError.message);
-
-        if (newSub && revisionFiles.length > 0) {
-          for (const file of revisionFiles) {
-            const path = `${id}/${Date.now()}_${file.name}`;
-            const { data: uploaded, error: uploadError } = await supabase.storage.from('submissions').upload(path, file);
-            if (uploadError) throw new Error(`Failed to upload "${file.name}": ${uploadError.message}`);
-            if (uploaded) {
-              const { error: fileRecordError } = await supabase.from('submission_files').insert({
-                submission_id: newSub.id, name: file.name, storage_path: path, size: file.size,
-              });
-              if (fileRecordError) throw new Error(`Failed to save file record for "${file.name}": ${fileRecordError.message}`);
-            }
-          }
-        }
-
-        setTask(t => ({ ...t, status: 'not_started', current_version: newVersion, assigned_to: null, assigned_name: null }));
-
-        sendEmail('revision_submitted', 'hello@fourgebranding.com', {
-          clientName: currentUser.name,
-          serviceType: task.title,
-          projectName: project?.name,
-          version: rLabel(newVersion),
-          deadline: revisionForm.deadline,
-          description: revisionForm.description,
-          taskId: id,
-        }).catch((emailError) => {
-          console.error('Revision submitted email failed:', emailError);
-        });
-      }
-
-      const { data: refreshed } = await supabase
-        .from('submissions')
-        .select('*, files:submission_files(*), delivery:deliveries(*, files:delivery_files(*))')
-        .eq('task_id', id)
-        .order('version_number');
-      setSubmissions(refreshed || []);
-
-      setSubmitted(true);
-      setAction(null);
-    } catch (err) {
-      console.error('Revision submit failed:', err);
-      alert(`Failed to submit: ${err.message}`);
-    } finally {
-      setSaving(false);
-    }
-  };
-
-  const set = (field) => (e) => setRevisionForm(f => ({
-    ...f,
-    [field]: e.target.type === 'checkbox' ? e.target.checked : e.target.value,
-  }));
-
-  const getFileUrl = async (file) => {
-    const key = `delivery:${file.storage_path}`;
-    if (downloading) return;
-    setDownloading(key);
-    try {
-      const { data } = await supabase.storage.from('deliveries').createSignedUrl(file.storage_path, 3600, {
-        download: file.name,
-      });
-      if (data?.signedUrl) window.open(data.signedUrl, '_blank');
-    } finally {
-      setDownloading('');
-    }
-  };
-
-  const getSubmissionFileUrl = async (file) => {
-    const key = `submission:${file.storage_path}`;
-    if (downloading) return;
-    setDownloading(key);
-    try {
-      const { data } = await supabase.storage.from('submissions').createSignedUrl(file.storage_path, 3600, {
-        download: file.name,
-      });
-      if (data?.signedUrl) window.open(data.signedUrl, '_blank');
-    } finally {
-      setDownloading('');
-    }
-  };
-
-  const handleSaveTitle = async (e) => {
-    e.preventDefault();
-    if (!titleVal.trim()) return;
-    setSavingTitle(true);
-    await supabase.from('tasks').update({ title: titleVal.trim() }).eq('id', id);
-    setTask(t => ({ ...t, title: titleVal.trim() }));
-    setEditingTitle(false);
-    setSavingTitle(false);
-  };
-
-  const downloadAllSubmissionFiles = async (files, versionLabel) => {
-    const key = `zip:${versionLabel}`;
-    if (downloading) return;
-    setDownloading(key);
-    try {
-      const zip = new JSZip();
-      for (const file of files) {
-        const { data } = await supabase.storage.from('submissions').createSignedUrl(file.storage_path, 3600, {
-          download: file.name,
-        });
-        if (data?.signedUrl) {
-          const response = await fetch(data.signedUrl);
-          const blob = await response.blob();
-          zip.file(file.name, blob);
-        }
-      }
-      const content = await zip.generateAsync({ type: 'blob' });
-      const zipName = `${project?.name || 'files'} ${versionLabel}.zip`.replace(/[^a-z0-9 ._-]/gi, '_');
-      const a = document.createElement('a');
-      a.href = URL.createObjectURL(content);
-      a.download = zipName;
-      a.click();
-      URL.revokeObjectURL(a.href);
-    } finally {
-      setDownloading('');
-    }
-  };
-
-  if (loading) return <Layout><p style={{ padding: 24, color: 'var(--text-muted)' }}>Loading...</p></Layout>;
-  if (!task) return <Layout><p>Job not found.</p></Layout>;
-
-  const canEdit   = ['not_started', 'in_progress'].includes(task.status);
-  const canReview = task.status === 'client_review';
-  const canReopen = task.status === 'client_approved';
-  const revisionBaseline = getRevisionBaseline(task, submissions);
-  const titleWithVersion = `${task.title} ${rLabel(revisionBaseline)}`;
-
-  const formTitle = action === 'edit'
-    ? `Amend Request — ${rLabel(revisionBaseline)}`
-    : action === 'reopen'
-    ? `Request New Revision — will become ${rLabel(revisionBaseline + 1)}`
-    : `Request a Revision — will become ${rLabel(revisionBaseline + 1)}`;
-
-  const formPlaceholder = action === 'edit'
-    ? "Describe what you'd like to update or change..."
-    : "Describe exactly what you'd like us to change or improve...";
-
-  return (
-    <Layout>
-      <button className="back-link" onClick={() => navigate('/my-projects')}>← Back to Projects</button>
-
-      <div className="page-header">
-        <div>
-          {editingTitle ? (
-            <form onSubmit={handleSaveTitle} style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 4 }}>
-              <input
-                type="text"
-                value={titleVal}
-                onChange={e => setTitleVal(e.target.value)}
-                autoFocus
-                required
-                style={{ fontSize: 22, fontWeight: 700, padding: '4px 10px', margin: 0, width: 280 }}
-              />
-              <button type="submit" className="btn btn-primary btn-sm" disabled={savingTitle}>{savingTitle ? '...' : 'Save'}</button>
-              <button type="button" className="btn btn-outline btn-sm" onClick={() => setEditingTitle(false)}>Cancel</button>
-            </form>
-          ) : (
-            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
-              <div className="page-title">{titleWithVersion}</div>
-              <button className="btn btn-outline btn-sm" onClick={() => { setTitleVal(task.title); setEditingTitle(true); }}>Edit</button>
-            </div>
-          )}
-          <div className="page-subtitle">{project?.name}</div>
-        </div>
-        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
-          <StatusBadge status={task.status} />
-          {action !== 'confirm-delete' && (
-            <button
-              className="btn btn-sm"
-              style={{ background: '#ef4444', color: 'white', border: 'none' }}
-              onClick={() => setAction('confirm-delete')}
-            >
-              Delete
-            </button>
-          )}
-        </div>
-      </div>
-
-      {action === 'confirm-delete' && (
-        <div className="card" style={{ background: 'var(--bg)', borderColor: 'var(--danger)', marginBottom: 24 }}>
-          <div style={{ fontWeight: 600, marginBottom: 8 }}>⚠ Delete this request?</div>
-          <p style={{ fontSize: 13, color: 'var(--text-secondary)', marginBottom: 16 }}>
-            This will permanently delete <strong>{titleWithVersion}</strong> and all its history. This cannot be undone.
-          </p>
-          <div className="action-buttons">
-            <button className="btn" style={{ background: '#ef4444', color: 'white', border: 'none' }} onClick={handleDelete} disabled={saving}>
-              {saving ? 'Deleting...' : 'Yes, Delete'}
-            </button>
-            <button className="btn btn-outline" onClick={() => setAction(null)}>Cancel</button>
-          </div>
-        </div>
-      )}
-
-      {submitted && (
-        <div className="notification notification-success">
-          ✓ Your {action === 'edit' ? 'changes have' : 'revision request has'} been submitted as {rLabel(revisionBaseline)}. Our team will get started shortly.
-        </div>
-      )}
-
-      {action === 'approved' && (
-        <div className="notification notification-success">
-          ✓ You've approved {rLabel(revisionBaseline)}. This job is now complete!
-        </div>
-      )}
-
-      {canReview && !submitted && action !== 'confirm-delete' && action !== 'revision' && (
-        <div className="card" style={{ borderColor: 'var(--accent)', marginBottom: 24 }}>
-          <div style={{ fontWeight: 600, marginBottom: 8 }}>🎨 Your work is ready for review!</div>
-          <p style={{ fontSize: 13, color: 'var(--text-secondary)', marginBottom: 16 }}>
-            Please review the delivered work for <strong>{titleWithVersion}</strong> and let us know if you're happy or need changes.
-          </p>
-          <div className="action-buttons">
-            <button className="btn btn-success" onClick={handleApprove} disabled={saving}>✓ Approve — I'm Happy!</button>
-            <button className="btn btn-warning" onClick={() => { setAction('revision'); setRevisionForm(f => ({ ...f, serviceType: task.title })); }}>✏️ Request Revision</button>
-          </div>
-        </div>
-      )}
-
-      {canEdit && !submitted && action !== 'confirm-delete' && action !== 'edit' && (
-        <div className="card" style={{ marginBottom: 24 }}>
-          <div style={{ fontWeight: 600, marginBottom: 8 }}>✏️ Need to make changes?</div>
-          <p style={{ fontSize: 13, color: 'var(--text-secondary)', marginBottom: 16 }}>
-            Your request is still being worked on. You can update the details or requirements.
-          </p>
-          <button
-            className="btn btn-warning"
-            onClick={() => {
-              const currentPrimary = submissions.find(sub => sub.version_number === getRevisionBaseline(task, submissions) && sub.type !== 'amendment') || submissions[0];
-              setAction('edit');
-              setRevisionForm({
-                serviceType: task.title,
-                deadline: currentPrimary?.deadline || addDaysToDateOnly(getTodayDateOnlyEST(), 3),
-                description: currentPrimary?.description || '',
-                revisionType: 'client_revision',
-                isHot: Boolean(currentPrimary?.is_hot),
-              });
-            }}
-          >
-            Edit Request
-          </button>
-        </div>
-      )}
-
-      {canReopen && !submitted && action !== 'confirm-delete' && action !== 'reopen' && (
-        <div className="card" style={{ marginBottom: 24 }}>
-          <div style={{ fontWeight: 600, marginBottom: 8 }}>🔄 Need more changes?</div>
-          <p style={{ fontSize: 13, color: 'var(--text-secondary)', marginBottom: 16 }}>
-            This job was approved but you can still request a new revision if needed.
-          </p>
-          <button
-            className="btn btn-warning"
-            onClick={() => {
-              setAction('reopen');
-              setRevisionForm({
-                serviceType: task.title,
-                deadline: addDaysToDateOnly(getTodayDateOnlyEST(), 3),
-                description: '',
-                revisionType: 'client_revision',
-                isHot: false,
-              });
-            }}
-          >
-            Request New Revision
-          </button>
-        </div>
-      )}
-
-      {(action === 'revision' || action === 'edit' || action === 'reopen') && (
-        <div className="card" style={{ marginBottom: 24 }}>
-          <div className="card-title">{formTitle}</div>
-          <form onSubmit={handleRevisionSubmit}>
-            <div className="grid-2">
-              <div className="form-group">
-                <label>Service Type</label>
-                <input type="text" value={revisionForm.serviceType} readOnly disabled style={{ opacity: 0.6, cursor: 'not-allowed' }} />
-              </div>
-              <div className="form-group">
-                <label>Deadline</label>
-                <input type="date" value={revisionForm.deadline} onChange={set('deadline')} />
-              </div>
-            </div>
-            <div className="form-group" style={{ marginTop: -4 }}>
-              <label style={{ display: 'flex', alignItems: 'center', gap: 10, fontWeight: 500, cursor: 'pointer' }}>
-                <input
-                  type="checkbox"
-                  checked={revisionForm.isHot}
-                  onChange={set('isHot')}
-                />
-                <span>Mark as Hot</span>
-              </label>
-            </div>
-            {(action === 'revision' || action === 'reopen') && (
-              <div className="form-group">
-                <label>Revision Type *</label>
-                <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginTop: 4 }}>
-                  <label style={{ display: 'flex', alignItems: 'flex-start', gap: 10, cursor: 'pointer', fontWeight: 400 }}>
-                    <input
-                      type="radio"
-                      name="revisionType"
-                      value="client_revision"
-                      checked={revisionForm.revisionType === 'client_revision'}
-                      onChange={set('revisionType')}
-                      style={{ marginTop: 2, flexShrink: 0 }}
-                    />
-                    <div>
-                      <div style={{ fontWeight: 600, fontSize: 13 }}>Client Revision</div>
-                      <div style={{ fontSize: 12, color: 'var(--text-muted)' }}>I want changes made to the current work</div>
-                    </div>
-                  </label>
-                  <label style={{ display: 'flex', alignItems: 'flex-start', gap: 10, cursor: 'pointer', fontWeight: 400 }}>
-                    <input
-                      type="radio"
-                      name="revisionType"
-                      value="fourge_error"
-                      checked={revisionForm.revisionType === 'fourge_error'}
-                      onChange={set('revisionType')}
-                      style={{ marginTop: 2, flexShrink: 0 }}
-                    />
-                    <div>
-                      <div style={{ fontWeight: 600, fontSize: 13 }}>Fourge Error</div>
-                      <div style={{ fontSize: 12, color: 'var(--text-muted)' }}>Something was incorrect or not delivered as agreed</div>
-                    </div>
-                  </label>
-                </div>
-              </div>
-            )}
-            <div className="form-group">
-              <label>{action === 'edit' ? 'What would you like to change? *' : 'What needs to be changed? *'}</label>
-              <textarea placeholder={formPlaceholder} value={revisionForm.description} onChange={set('description')} required />
-            </div>
-            <FileAttachment files={revisionFiles} onChange={setRevisionFiles} />
-            <div className="action-buttons">
-              <button type="submit" className="btn btn-primary" disabled={saving}>{saving ? 'Submitting...' : 'Submit'}</button>
-              <button type="button" className="btn btn-outline" onClick={() => setAction(null)}>Cancel</button>
-            </div>
-          </form>
-        </div>
-      )}
-
-      <div className="card-title">Revision History</div>
-      <div className="version-timeline">
-        {Object.values(
-          submissions.reduce((groups, sub) => {
-            const key = sub.version_number;
-            if (!groups[key]) groups[key] = [];
-            groups[key].push(sub);
-            return groups;
-          }, {})
-        ).reverse().map(group => {
-          const primary = group.find(s => s.type !== 'amendment') || group[0];
-          const amendments = group.filter(s => s.type === 'amendment');
-          const delivery = primary.delivery;
-          return (
-            <div key={primary.id} className="version-item">
-              <div className="version-header">
-                <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
-                  <div className="version-number">{rLabel(primary.version_number)}</div>
-                  <StatusBadge status={primary.type} />
-                  {primary.revision_type && <StatusBadge status={primary.revision_type} />}
-                </div>
-                <div style={{ fontSize: 12, color: 'var(--text-secondary)' }}>
-                  {primary.submitted_by_name && <span>{primary.submitted_by_name} · </span>}
-                  {formatDateEST(primary.submitted_at)}
-                </div>
-              </div>
-              <div className="detail-grid">
-                <div className="detail-item"><label>Service</label><p>{primary.service_type}</p></div>
-                <div className="detail-item"><label>Deadline</label><p>{primary.deadline || '—'}</p></div>
-                <div className="detail-item"><label>Hot</label><p>{primary.is_hot ? 'Yes' : 'No'}</p></div>
-              </div>
-              <div className="detail-item">
-                <label>Description</label>
-                <p style={{ marginTop: 4, lineHeight: 1.6, color: 'var(--text-secondary)', whiteSpace: 'pre-wrap' }}>{primary.description}</p>
-              </div>
-
-              {primary.files?.length > 0 && (
-                <div style={{ marginTop: 10 }}>
-                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 4 }}>
-                    <label style={{ fontSize: 11, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.5px', color: 'var(--text-muted)' }}>Attached Files</label>
-                    <LoadingButton className="btn btn-outline btn-sm" loading={downloading === `zip:${rLabel(primary.version_number)}`} disabled={Boolean(downloading)} loadingText="Downloading..." onClick={() => downloadAllSubmissionFiles(primary.files, rLabel(primary.version_number))}>⬇ Download All</LoadingButton>
-                  </div>
-                  <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
-                    {primary.files.map((file, fi) => (
-                      <div key={fi} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '6px 10px', background: 'var(--bg)', borderRadius: 6, border: '1px solid var(--border)' }}>
-                        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
-                          <span>📎</span>
-                          <span style={{ fontSize: 13, fontWeight: 500 }}>{file.name}</span>
-                        </div>
-                        <LoadingButton className="btn btn-outline btn-sm" loading={downloading === `submission:${file.storage_path}`} disabled={Boolean(downloading)} loadingText="Downloading..." onClick={() => getSubmissionFileUrl(file)}>📥 Download</LoadingButton>
-                      </div>
-                    ))}
-                  </div>
-                </div>
-              )}
-
-              {amendments.map(amendment => (
-                <div key={amendment.id} style={{ marginTop: 12, padding: '12px 14px', background: 'var(--bg)', borderRadius: 8, border: '1px solid var(--border)' }}>
-                  <div style={{ fontSize: 11, fontWeight: 700, textTransform: 'uppercase', color: 'var(--accent)', marginBottom: 8, letterSpacing: 0.5 }}>
-                    Amended Request
-                  </div>
-                  <div style={{ fontSize: 12, color: 'var(--text-muted)', marginBottom: 6 }}>
-                    {amendment.submitted_by_name} · {formatDateEST(amendment.submitted_at)}
-                  </div>
-                  <p style={{ fontSize: 13, lineHeight: 1.6, color: 'var(--text-secondary)', whiteSpace: 'pre-wrap', margin: 0 }}>{amendment.description}</p>
-                  {amendment.files?.length > 0 && (
-                    <div style={{ marginTop: 8, display: 'flex', flexDirection: 'column', gap: 4 }}>
-                      {amendment.files.map((file, fi) => (
-                        <div key={fi} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '5px 10px', background: 'var(--card-bg)', borderRadius: 6, border: '1px solid var(--border)' }}>
-                          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
-                            <span>📎</span>
-                            <span style={{ fontSize: 12, fontWeight: 500 }}>{file.name}</span>
-                          </div>
-                          <LoadingButton className="btn btn-outline btn-sm" loading={downloading === `submission:${file.storage_path}`} disabled={Boolean(downloading)} loadingText="Downloading..." onClick={() => getSubmissionFileUrl(file)}>📥 Download</LoadingButton>
-                        </div>
-                      ))}
-                    </div>
-                  )}
-                </div>
-              ))}
-
-              {delivery && delivery.files && delivery.files.length > 0 && (
-                <div style={{ marginTop: 12, padding: '10px 14px', background: 'var(--bg)', borderRadius: 8, border: '1px solid var(--border)' }}>
-                  <div style={{ fontSize: 11, fontWeight: 600, textTransform: 'uppercase', color: '#16a34a', marginBottom: 8 }}>
-                    ✓ Delivered {formatDateEST(delivery.sent_at)}
-                  </div>
-                  {delivery.files.map((file, fi) => (
-                    <div key={fi} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '6px 10px', background: 'var(--card-bg)', borderRadius: 6, border: '1px solid var(--border)', marginBottom: 4 }}>
-                      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
-                        <span>📄</span>
-                        <span style={{ fontSize: 13, fontWeight: 500 }}>{file.name}</span>
-                      </div>
-                      <LoadingButton className="btn btn-outline btn-sm" loading={downloading === `delivery:${file.storage_path}`} disabled={Boolean(downloading)} loadingText="Downloading..." onClick={() => getFileUrl(file)}>📥 Download</LoadingButton>
-                    </div>
-                  ))}
-                </div>
-              )}
-            </div>
-          );
-        })}
-      </div>
-    </Layout>
-  );
-}
diff --git a/src/pages/external/ExternalProjects.jsx b/src/pages/external/ExternalProjects.jsx
deleted file mode 100644
index 6134629..0000000
--- a/src/pages/external/ExternalProjects.jsx
+++ /dev/null
@@ -1,69 +0,0 @@
-import { useEffect, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
-import Layout from '../../components/Layout';
-import { supabase } from '../../lib/supabase';
-import { useAuth } from '../../context/AuthContext';
-
-export default function ExternalProjects() {
-  const { currentUser } = useAuth();
-  const navigate = useNavigate();
-  const [projects, setProjects] = useState([]);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState('');
-
-  useEffect(() => {
-    if (!currentUser?.id) { setLoading(false); return; }
-    supabase
-      .from('projects')
-      .select('id, name, status, company:companies(name)')
-      .order('created_at', { ascending: false })
-      .then(({ data, error: err }) => {
-        if (err) setError(err.message);
-        else setProjects(data || []);
-        setLoading(false);
-      });
-  }, [currentUser?.id]);
-
-  return (
-    <Layout>
-      <div className="page-header">
-        <div>
-          <div className="page-title">Projects</div>
-          <div className="page-subtitle">All projects you are assigned to.</div>
-        </div>
-      </div>
-
-      {error && <div className="card" style={{ color: 'var(--danger)', marginBottom: 16 }}>{error}</div>}
-
-      {loading ? (
-        <p style={{ padding: 24, color: 'var(--text-muted)' }}>Loading...</p>
-      ) : projects.length === 0 ? (
-        <div className="empty-state">
-          <h3>No projects yet</h3>
-          <p>Projects will appear here once the team assigns you to one.</p>
-        </div>
-      ) : (
-        <div className="table-wrapper">
-          <table>
-            <thead>
-              <tr>
-                <th>Project</th>
-                <th>Client</th>
-                <th>Status</th>
-              </tr>
-            </thead>
-            <tbody>
-              {projects.map(p => (
-                <tr key={p.id} style={{ cursor: 'pointer' }} onClick={() => navigate(`/projects/${p.id}`)}>
-                  <td style={{ fontWeight: 600 }}>{p.name}</td>
-                  <td style={{ color: 'var(--text-muted)' }}>{p.company?.name || '—'}</td>
-                  <td style={{ textTransform: 'capitalize', color: 'var(--text-muted)' }}>{p.status || 'Active'}</td>
-                </tr>
-              ))}
-            </tbody>
-          </table>
-        </div>
-      )}
-    </Layout>
-  );
-}
diff --git a/src/pages/external/MyInvoiceDetail.jsx b/src/pages/external/MyInvoiceDetail.jsx
index 2a37500..00aa245 100644
--- a/src/pages/external/MyInvoiceDetail.jsx
+++ b/src/pages/external/MyInvoiceDetail.jsx
@@ -249,13 +249,14 @@ export default function MyInvoiceDetail() {
           )}
           {invoice.status !== 'paid' && (
             <LoadingButton
-              className="btn btn-danger"
+              className="btn-icon btn-icon-danger"
               loading={deleting}
-              loadingText="Deleting..."
+              loadingText="..."
               disabled={submitting || deleting}
+              title="Delete Invoice"
               onClick={handleDelete}
             >
-              Delete Invoice
+              ✕
             </LoadingButton>
           )}
         </div>
diff --git a/src/pages/external/MyInvoices.jsx b/src/pages/external/MyInvoices.jsx
index e986ab7..c4da0eb 100644
--- a/src/pages/external/MyInvoices.jsx
+++ b/src/pages/external/MyInvoices.jsx
@@ -2,9 +2,11 @@ import { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import Layout from '../../components/Layout';
 import StatusBadge from '../../components/StatusBadge';
+import SortTh from '../../components/SortTh';
 import { supabase } from '../../lib/supabase';
 import { useAuth } from '../../context/AuthContext';
 import { readPageCache, writePageCache } from '../../lib/pageCache';
+import { useSortable } from '../../hooks/useSortable';
 
 const STATUS_BADGE = { draft: 'not_started', submitted: 'in_progress', paid: 'client_approved' };
 const STATUS_LABEL = { draft: 'Draft', submitted: 'Submitted', paid: 'Paid' };
@@ -25,6 +27,7 @@ export default function MyInvoices() {
   const [invoices, setInvoices] = useState(() => cached || []);
   const [loading, setLoading] = useState(() => !cached);
   const [error, setError] = useState('');
+  const { sortKey, sortDir, toggle, sort } = useSortable('created_at');
 
   useEffect(() => {
     if (!currentUser?.id) { setLoading(false); return; }
@@ -62,30 +65,36 @@ export default function MyInvoices() {
           <p>Create your first invoice to get paid for your completed work.</p>
         </div>
       ) : (
-        <div className="table-wrapper">
-          <table>
-            <thead>
-              <tr>
-                <th>Invoice #</th>
-                <th>Submitted</th>
-                <th>Status</th>
-                <th style={{ textAlign: 'right' }}>Total</th>
-              </tr>
-            </thead>
-            <tbody>
-              {invoices.map(inv => {
-                const total = invoiceTotal(inv.items);
-                return (
-                  <tr key={inv.id} style={{ cursor: 'pointer' }} onClick={() => navigate(`/my-invoices-sub/${inv.id}`)}>
-                    <td style={{ fontWeight: 700 }}>{inv.invoice_number}</td>
-                    <td>{inv.submitted_at ? new Date(inv.submitted_at).toLocaleDateString() : <span style={{ color: 'var(--text-muted)' }}>—</span>}</td>
-                    <td><StatusBadge status={STATUS_BADGE[inv.status]} label={STATUS_LABEL[inv.status]} /></td>
-                    <td style={{ textAlign: 'right', fontWeight: 700 }}>{fmt(total)}</td>
-                  </tr>
-                );
-              })}
-            </tbody>
-          </table>
+        <div className="card">
+          <div className="table-wrapper">
+            <table>
+              <thead>
+                <tr>
+                  <SortTh col="invoice_number" sortKey={sortKey} sortDir={sortDir} onSort={toggle}>Invoice #</SortTh>
+                  <SortTh col="submitted_at" sortKey={sortKey} sortDir={sortDir} onSort={toggle}>Submitted</SortTh>
+                  <SortTh col="status" sortKey={sortKey} sortDir={sortDir} onSort={toggle}>Status</SortTh>
+                  <SortTh col="total" sortKey={sortKey} sortDir={sortDir} onSort={toggle} style={{ textAlign: 'right' }}>Total</SortTh>
+                </tr>
+              </thead>
+              <tbody>
+                {sort(invoices, (inv, key) => {
+                  if (key === 'total') return invoiceTotal(inv.items);
+                  if (key === 'submitted_at') return inv.submitted_at ? new Date(inv.submitted_at).getTime() : 0;
+                  return inv[key] || '';
+                }).map(inv => {
+                  const total = invoiceTotal(inv.items);
+                  return (
+                    <tr key={inv.id} style={{ cursor: 'pointer' }} onClick={() => navigate(`/my-invoices-sub/${inv.id}`)}>
+                      <td style={{ fontWeight: 700 }}>{inv.invoice_number}</td>
+                      <td>{inv.submitted_at ? new Date(inv.submitted_at).toLocaleDateString() : <span style={{ color: 'var(--text-muted)' }}>—</span>}</td>
+                      <td><StatusBadge status={STATUS_BADGE[inv.status]} label={STATUS_LABEL[inv.status]} /></td>
+                      <td style={{ textAlign: 'right', fontWeight: 700 }}>{fmt(total)}</td>
+                    </tr>
+                  );
+                })}
+              </tbody>
+            </table>
+          </div>
         </div>
       )}
     </Layout>
diff --git a/src/pages/external/MyRequests.jsx b/src/pages/external/MyRequests.jsx
deleted file mode 100644
index d0b9cd6..0000000
--- a/src/pages/external/MyRequests.jsx
+++ /dev/null
@@ -1,249 +0,0 @@
-import { useEffect, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
-import Layout from '../../components/Layout';
-import StatusBadge from '../../components/StatusBadge';
-import { supabase } from '../../lib/supabase';
-import { useAuth } from '../../context/AuthContext';
-import { withTimeout } from '../../lib/withTimeout';
-import { getCurrentVersionForTask, getDeadlineSourceSubmission } from '../../lib/taskDeadlines';
-import { formatDateOnly } from '../../lib/dates';
-import { readPageCache, writePageCache } from '../../lib/pageCache';
-
-export default function ExternalMyRequests() {
-  const { currentUser } = useAuth();
-  const navigate = useNavigate();
-  const cacheKey = `ext-requests:${currentUser?.id}`;
-  const cached = readPageCache(cacheKey, 3 * 60_000);
-  const [projects, setProjects] = useState(() => cached?.projects || []);
-  const [tasks, setTasks] = useState(() => cached?.tasks || []);
-  const [submissions, setSubmissions] = useState(() => cached?.submissions || []);
-  const [paidTaskIds, setPaidTaskIds] = useState(() => new Set(cached?.paidTaskIds || []));
-  const [loading, setLoading] = useState(() => !cached);
-  const [error, setError] = useState('');
-  const [activeTab, setActiveTab] = useState('active');
-  const [filterProject, setFilterProject] = useState('');
-  const [filterRequester, setFilterRequester] = useState('');
-
-  useEffect(() => {
-    async function load() {
-      if (!currentUser?.id) { setLoading(false); return; }
-      try {
-        const [
-          { data: projectData, error: projectError },
-          { data: taskData, error: taskError },
-          { data: subData, error: subError },
-          { data: paidItems },
-        ] = await withTimeout(
-          Promise.all([
-            supabase.from('projects').select('id, name, company_id').order('created_at', { ascending: false }),
-            supabase.from('tasks').select('id, title, status, current_version, project_id, invoiced').order('submitted_at', { ascending: false }),
-            supabase.from('submissions').select('task_id, submitted_by_name, version_number, deadline, is_hot, service_type, submitted_at').order('submitted_at', { ascending: false }),
-            supabase
-              .from('subcontractor_invoice_items')
-              .select('task_id, invoice:subcontractor_invoices!inner(status)')
-              .eq('subcontractor_invoices.status', 'paid'),
-          ]),
-          15000,
-          'External requests load'
-        );
-
-        if (projectError) throw projectError;
-        if (taskError) throw taskError;
-        if (subError) throw subError;
-
-        const paid = new Set(
-          (paidItems || [])
-            .filter(item => item.invoice?.status === 'paid' && item.task_id)
-            .map(item => item.task_id)
-        );
-
-        setProjects(projectData || []);
-        setTasks(taskData || []);
-        setSubmissions(subData || []);
-        setPaidTaskIds(paid);
-        writePageCache(cacheKey, { projects: projectData || [], tasks: taskData || [], submissions: subData || [], paidTaskIds: [...paid] });
-        setError('');
-      } catch (err) {
-        console.error('External requests load failed:', err);
-        setError(err.message || 'Failed to load requests.');
-      } finally {
-        setLoading(false);
-      }
-    }
-    load();
-  }, [currentUser?.id]);
-
-  if (loading) return <Layout><p style={{ padding: 24, color: 'var(--text-muted)' }}>Loading...</p></Layout>;
-
-  const isFullyClosedTask = (task) => task?.status === 'client_approved' && paidTaskIds.has(task.id);
-
-  const latestTaskGroups = tasks.map(task => {
-    const taskSubs = submissions.filter(s => s.task_id === task.id);
-    const deadlineSource = getDeadlineSourceSubmission(task, taskSubs);
-    if (!deadlineSource) return null;
-    const currentVersion = getCurrentVersionForTask(task, taskSubs);
-    const latestGroup = taskSubs.filter(s => s.version_number === currentVersion);
-    return { task, primary: deadlineSource, group: latestGroup };
-  }).filter(Boolean);
-
-  const projectNames = [...new Map(
-    latestTaskGroups.map(({ task }) => {
-      const p = projects.find(p => p.id === task.project_id);
-      return p ? [p.id, p] : null;
-    }).filter(Boolean)
-  ).values()];
-
-  const requesterNames = [...new Set(submissions.map(s => s.submitted_by_name).filter(Boolean))].sort();
-
-  const filteredGroups = latestTaskGroups.filter(({ task, group }) => {
-    if (filterProject && task.project_id !== filterProject) return false;
-    if (filterRequester && !group.some(s => s.submitted_by_name === filterRequester)) return false;
-    return true;
-  }).sort((a, b) => {
-    const aLatest = Math.max(...a.group.map(s => new Date(s.submitted_at).getTime()));
-    const bLatest = Math.max(...b.group.map(s => new Date(s.submitted_at).getTime()));
-    return bLatest - aLatest;
-  });
-
-  const activeGroups = filteredGroups.filter(({ task }) => task?.status !== 'client_approved' && task?.status !== 'client_review');
-  const clientReviewGroups = filteredGroups.filter(({ task }) => task?.status === 'client_review');
-  const completedGroups = filteredGroups.filter(({ task }) => task?.status === 'client_approved' && !isFullyClosedTask(task));
-  const closedGroups = filteredGroups.filter(({ task }) => isFullyClosedTask(task));
-
-  const renderRow = ({ task, primary }) => {
-    const project = projects.find(p => p.id === task?.project_id);
-    const isCompleted = task?.status === 'client_approved';
-    const isFullyClosed = isFullyClosedTask(task);
-    const revisionLabel = `R${String(primary.version_number ?? 0).padStart(2, '0')}`;
-    const deadline = formatDateOnly(primary.deadline, 'Not specified');
-
-    return (
-      <tr key={task.id} onClick={() => navigate(`/tasks/${task.id}`)} style={{ cursor: 'pointer' }}>
-        <td style={{ fontWeight: 600 }}>{project?.name || 'No project'}</td>
-        <td style={{ fontWeight: 600 }}>
-          <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
-            <span>{task?.title || primary.service_type}</span>
-            {primary.is_hot ? <span className="badge badge-needs_revision">Hot</span> : null}
-          </div>
-        </td>
-        <td>{revisionLabel}</td>
-        <td>{primary.service_type || 'Request'}</td>
-        <td>{deadline}</td>
-        <td>{isFullyClosed ? <span className="badge badge-client_approved">Paid & Closed</span> : isCompleted ? <span className="badge badge-client_approved">Completed</span> : <StatusBadge status={task?.status || 'not_started'} />}</td>
-      </tr>
-    );
-  };
-
-  const tabList = [
-    { id: 'active', label: 'Active', groups: activeGroups },
-    { id: 'client-review', label: 'Client Review', groups: clientReviewGroups },
-    { id: 'completed', label: 'Completed', groups: completedGroups },
-    { id: 'closed', label: 'Fully Closed', groups: closedGroups },
-  ];
-  const currentGroups = tabList.find(t => t.id === activeTab)?.groups || [];
-
-  return (
-    <Layout>
-      <div className="page-header">
-        <div>
-          <div className="page-title">Requests</div>
-          <div className="page-subtitle">All tasks in your assigned projects.</div>
-        </div>
-      </div>
-
-      {(projectNames.length > 0 || requesterNames.length > 0) && (
-      <div className="card request-toolbar-card" style={{ marginBottom: 16 }}>
-        <div className="request-toolbar-grid">
-          {projectNames.length > 0 && (
-            <div className="request-toolbar-section">
-              <div className="card-title" style={{ marginBottom: 10 }}>Filter By Project</div>
-              <div className="request-filter-row">
-                <button className={`btn btn-sm ${!filterProject ? 'btn-primary' : 'btn-outline'}`} onClick={() => setFilterProject('')}>All</button>
-                {projectNames.map(p => (
-                  <button
-                    key={p.id}
-                    className={`btn btn-sm ${filterProject === p.id ? 'btn-primary' : 'btn-outline'}`}
-                    onClick={() => setFilterProject(f => f === p.id ? '' : p.id)}
-                  >
-                    {p.name}
-                  </button>
-                ))}
-              </div>
-            </div>
-          )}
-          {requesterNames.length > 0 && (
-            <div className="request-toolbar-section">
-              <div className="card-title" style={{ marginBottom: 10 }}>Filter By Requester</div>
-              <div className="request-filter-row">
-                <button className={`btn btn-sm ${!filterRequester ? 'btn-primary' : 'btn-outline'}`} onClick={() => setFilterRequester('')}>All</button>
-                {requesterNames.map(name => (
-                  <button
-                    key={name}
-                    className={`btn btn-sm ${filterRequester === name ? 'btn-primary' : 'btn-outline'}`}
-                    onClick={() => setFilterRequester(f => f === name ? '' : name)}
-                  >
-                    {name}
-                  </button>
-                ))}
-              </div>
-            </div>
-          )}
-        </div>
-      </div>
-      )}
-
-      {submissions.length === 0 ? (
-        <div className="empty-state">
-          <h3>No requests yet</h3>
-          <p>Tasks will appear here once Fourge assigns you to a project.</p>
-        </div>
-      ) : filteredGroups.length === 0 ? (
-        <div className="empty-state">
-          <h3>No matching requests</h3>
-          <p>Try clearing the current filters.</p>
-        </div>
-      ) : (
-        <div>
-          <div style={{ marginBottom: 20, display: 'flex', gap: 4, flexWrap: 'wrap' }}>
-            {tabList.map(tab => (
-              <button
-                key={tab.id}
-                type="button"
-                className={`tab-btn${activeTab === tab.id ? ' active' : ''}`}
-                onClick={() => setActiveTab(tab.id)}
-              >
-                {tab.label} ({tab.groups.length})
-              </button>
-            ))}
-          </div>
-
-          {currentGroups.length === 0 ? (
-            <div className="empty-state" style={{ padding: '28px 20px' }}>
-              <h3>No {tabList.find(t => t.id === activeTab)?.label.toLowerCase()} requests</h3>
-            </div>
-          ) : (
-            <div className="table-wrapper">
-              <table>
-                <thead>
-                  <tr>
-                    <th>Project</th>
-                    <th>Name</th>
-                    <th>Revision</th>
-                    <th>Request Type</th>
-                    <th>Deadline</th>
-                    <th>Status</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  {currentGroups.map(group => renderRow(group))}
-                </tbody>
-              </table>
-            </div>
-          )}
-        </div>
-      )}
-
-      {error && <div className="card" style={{ color: 'var(--danger)', marginTop: 16 }}>{error}</div>}
-    </Layout>
-  );
-}
diff --git a/src/pages/team/BrandBook.jsx b/src/pages/team/BrandBook.jsx
index fc9f46a..f9546b9 100644
--- a/src/pages/team/BrandBook.jsx
+++ b/src/pages/team/BrandBook.jsx
@@ -1,6 +1,8 @@
 import { useState, useEffect, useRef } from 'react';
 import Layout from '../../components/Layout';
 import LoadingButton from '../../components/LoadingButton';
+import SortTh from '../../components/SortTh';
+import { useSortable } from '../../hooks/useSortable';
 import { supabase } from '../../lib/supabase';
 import { generateBrandBookEditorPDF } from '../../lib/brandBookEditor';
 import { cleanupBrandBookStorage } from '../../lib/deleteHelpers';
@@ -156,6 +158,8 @@ export default function BrandBook() {
   const projectLogoRef = useRef();
   const clientLogoRef = useRef();
   const [filterCompany, setFilterCompany] = useState('');
+  const [selectedBookIds, setSelectedBookIds] = useState([]);
+  const { sortKey: bbSortKey, sortDir: bbSortDir, toggle: bbToggle, sort: bbSort } = useSortable('updated_at');
 
   useEffect(() => {
     supabase.from('companies').select('id, name').order('name').then(({ data }) => setClients(data || []));
@@ -777,27 +781,11 @@ export default function BrandBook() {
         </div>
 
         {companyNames.length > 0 && (
-        <div className="card request-toolbar-card" style={{ marginBottom: 16 }}>
-          <div className="request-toolbar-section">
-            <div className="card-title" style={{ marginBottom: 10 }}>Filter By Company</div>
-            <div className="request-filter-row">
-              <button
-                className={`btn btn-sm ${!filterCompany ? 'btn-primary' : 'btn-outline'}`}
-                onClick={() => setFilterCompany('')}
-              >
-                All
-              </button>
-              {companyNames.map(name => (
-                <button
-                  key={name}
-                  className={`btn btn-sm ${filterCompany === name ? 'btn-primary' : 'btn-outline'}`}
-                  onClick={() => setFilterCompany(current => current === name ? '' : name)}
-                >
-                  {name}
-                </button>
-              ))}
-            </div>
-          </div>
+        <div style={{ display: 'flex', gap: 12, marginBottom: 16 }}>
+          <select className="filter-select" value={filterCompany} onChange={e => setFilterCompany(e.target.value)}>
+            <option value="">All Companies</option>
+            {companyNames.map(name => <option key={name} value={name}>{name}</option>)}
+          </select>
         </div>
         )}
 
@@ -814,16 +802,21 @@ export default function BrandBook() {
             <table>
               <thead>
                 <tr>
-                  <th>Name</th>
-                  <th>Revision</th>
-                  <th>Sign Count</th>
-                  <th>Client</th>
-                  <th>Updated</th>
+                  <SortTh col="project_name" sortKey={bbSortKey} sortDir={bbSortDir} onSort={bbToggle}>Name</SortTh>
+                  <SortTh col="revision" sortKey={bbSortKey} sortDir={bbSortDir} onSort={bbToggle}>Revision</SortTh>
+                  <SortTh col="sign_count" sortKey={bbSortKey} sortDir={bbSortDir} onSort={bbToggle}>Sign Count</SortTh>
+                  <SortTh col="client" sortKey={bbSortKey} sortDir={bbSortDir} onSort={bbToggle}>Client</SortTh>
+                  <SortTh col="updated_at" sortKey={bbSortKey} sortDir={bbSortDir} onSort={bbToggle}>Updated</SortTh>
                   <th></th>
                 </tr>
               </thead>
               <tbody>
-                {filteredBooks.map(book => {
+                {bbSort(filteredBooks, (book, key) => {
+                  if (key === 'sign_count') return Array.isArray(book.signs) ? book.signs.length : 0;
+                  if (key === 'client') return book.client_name || clients.find(c => c.id === book.client_id)?.name || '';
+                  if (key === 'updated_at') return book.updated_at ? new Date(book.updated_at).getTime() : 0;
+                  return book[key] || '';
+                }).map(book => {
                   const signCount = Array.isArray(book.signs) ? book.signs.length : 0;
                   const clientName = book.client_name || clients.find(client => client.id === book.client_id)?.name || 'No client';
                   const updated = book.updated_at
@@ -839,11 +832,11 @@ export default function BrandBook() {
                       <td>{updated}</td>
                       <td onClick={e => e.stopPropagation()}>
                         <button
-                          className="btn btn-outline btn-sm"
-                          style={{ color: 'var(--danger)', borderColor: 'var(--danger)' }}
+                          className="btn-icon btn-icon-danger"
                           onClick={() => handleDelete(book)}
+                          title="Delete"
                         >
-                          Delete
+                          ✕
                         </button>
                       </td>
                     </tr>
@@ -2373,7 +2366,7 @@ function DimensionEditorModal({ sourceImage, onApply, onCancel }) {
           <button onClick={onCancel} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-muted)', fontSize: 18, lineHeight: 1, padding: '0 2px' }}>✕</button>
         </div>
         <div style={{ padding: '10px 18px', borderBottom: '1px solid var(--border)', display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap', background: 'var(--card-bg-2, var(--card-bg))', flexShrink: 0 }}>
-          <div style={{ display: 'flex', border: '1px solid var(--border)', borderRadius: 20, overflow: 'hidden' }}>
+          <div style={{ display: 'flex', border: '1px solid var(--border)', borderRadius: 4, overflow: 'hidden' }}>
             {[
               ['line', 'Line'],
               ['box', 'Box'],
@@ -3485,7 +3478,7 @@ function PhotoEditorModal({
 
         {/* Toolbar */}
         <div style={{ padding: '10px 18px', borderBottom: '1px solid var(--border)', display: 'flex', alignItems: 'center', gap: 12, flexWrap: 'wrap', background: 'var(--card-bg-2, var(--card-bg))', flexShrink: 0 }}>
-          <div style={{ display: 'flex', border: '1px solid var(--border)', borderRadius: 20, overflow: 'hidden' }}>
+          <div style={{ display: 'flex', border: '1px solid var(--border)', borderRadius: 4, overflow: 'hidden' }}>
             {[
               ['select', 'Select'],
               ['dimension', 'Line Dim'],
diff --git a/src/pages/team/Companies.jsx b/src/pages/team/Companies.jsx
deleted file mode 100644
index 753e6ac..0000000
--- a/src/pages/team/Companies.jsx
+++ /dev/null
@@ -1,610 +0,0 @@
-import { useState, useEffect } from 'react';
-import { useNavigate } from 'react-router-dom';
-import Layout from '../../components/Layout';
-import { supabase } from '../../lib/supabase';
-import { deleteCompanyData } from '../../lib/deleteHelpers';
-import { readPageCache, writePageCache } from '../../lib/pageCache';
-import { syncSeafileFolders } from '../../lib/seafileFolders';
-
-function getRoleLabel(role) {
-  if (role === 'external') return 'Subcontractor';
-  if (role === 'client') return 'Client';
-  if (role === 'team') return 'Team';
-  return role || '—';
-}
-
-export default function Companies() {
-  const navigate = useNavigate();
-  const cached = readPageCache('team_companies');
-  const [companies, setCompanies] = useState(() => cached?.companies || []);
-  const [profiles, setProfiles] = useState(() => cached?.profiles || []);
-  const [companyMemberships, setCompanyMemberships] = useState(() => cached?.companyMemberships || []);
-  const [loading, setLoading] = useState(() => !cached);
-  const [showNew, setShowNew] = useState(false);
-  const [newForm, setNewForm] = useState({ name: '', phone: '', address: '' });
-  const [showNewUser, setShowNewUser] = useState(false);
-  const [userForm, setUserForm] = useState({ name: '', email: '', password: '', company_id: '', role: 'client' });
-  const [saving, setSaving] = useState(false);
-  const [userError, setUserError] = useState('');
-  const [editingUserId, setEditingUserId] = useState(null);
-  const [editUserVal, setEditUserVal] = useState('');
-  const [deletingUserId, setDeletingUserId] = useState(null);
-  const [filterCompany, setFilterCompany] = useState('');
-  const [activeTab, setActiveTab] = useState('companies');
-
-  async function load() {
-    const [{ data: co }, { data: prof }, { data: memberships }] = await Promise.all([
-      supabase.from('companies').select('*').order('name'),
-      supabase.from('profiles').select('id, name, email, company_id, role').in('role', ['client', 'external']).order('name'),
-      supabase.from('company_members').select('company_id, profile_id'),
-    ]);
-    setCompanies(co || []);
-    setProfiles(prof || []);
-    setCompanyMemberships(memberships || []);
-    writePageCache('team_companies', { companies: co || [], profiles: prof || [], companyMemberships: memberships || [] });
-    setLoading(false);
-  }
-
-  useEffect(() => {
-    load();
-  }, []);
-
-  const handleCreate = async (e) => {
-    e.preventDefault();
-    if (!newForm.name.trim()) return;
-    setSaving(true);
-    const { data } = await supabase.from('companies').insert({
-      name: newForm.name.trim(),
-      phone: newForm.phone.trim(),
-      address: newForm.address.trim(),
-    }).select().single();
-    setSaving(false);
-    if (data) {
-      syncSeafileFolders().catch((error) => console.warn('Seafile folder sync failed:', error.message));
-      setShowNew(false);
-      setNewForm({ name: '', phone: '', address: '' });
-      navigate(`/companies/${data.id}`);
-    }
-  };
-
-  const handleDeleteCompany = async (company) => {
-    if (!window.confirm(`Delete "${company.name}"? This will permanently delete all projects, jobs, files, and data for this company. This cannot be undone.`)) return;
-    await deleteCompanyData(company.id);
-    setCompanies(prev => prev.filter(c => c.id !== company.id));
-    load();
-  };
-
-  const handleEditUserSave = async (userId) => {
-    if (!editUserVal.trim()) return;
-    await supabase.from('profiles').update({ name: editUserVal.trim() }).eq('id', userId);
-    setProfiles(prev => prev.map(u => u.id === userId ? { ...u, name: editUserVal.trim() } : u));
-    setEditingUserId(null);
-  };
-
-  const handleDeleteUser = async (user) => {
-    if (!window.confirm(`Delete "${user.name}"? This will permanently remove their account. This cannot be undone.`)) return;
-    setDeletingUserId(user.id);
-    const { data, error } = await supabase.functions.invoke('delete-user', { body: { user_id: user.id } });
-    const errBody = error?.context ? await error.context.json().catch(() => null) : null;
-    const errMsg = errBody?.error || data?.error || error?.message;
-    if (errMsg) { alert(`Failed to delete user: ${errMsg}`); setDeletingUserId(null); return; }
-    setProfiles(prev => prev.filter(u => u.id !== user.id));
-    setDeletingUserId(null);
-  };
-
-  const handleCreateUser = async (e) => {
-    e.preventDefault();
-    setUserError('');
-    setSaving(true);
-    const { data, error } = await supabase.functions.invoke('create-user', {
-      body: {
-        name: userForm.name.trim(),
-        email: userForm.email.trim(),
-        password: userForm.password,
-        role: userForm.role,
-        company_id: userForm.role === 'client' ? (userForm.company_id || null) : null,
-      },
-    });
-    setSaving(false);
-    const errBody = error?.context ? await error.context.json().catch(() => null) : null;
-    const errMsg = errBody?.error || data?.error || error?.message;
-    if (errMsg) {
-      setUserError(errMsg);
-      return;
-    }
-    setShowNewUser(false);
-    setUserForm({ name: '', email: '', password: '', company_id: '', role: 'client' });
-    syncSeafileFolders().catch((syncError) => console.warn('Seafile folder sync failed:', syncError.message));
-    load();
-  };
-
-  if (loading) return <Layout><p style={{ padding: 24, color: 'var(--text-muted)' }}>Loading...</p></Layout>;
-
-  const getProfileCompanyIds = (profile) => {
-    const ids = new Set(
-      companyMemberships
-        .filter(membership => membership.profile_id === profile.id && profile.role === 'client')
-        .map(membership => membership.company_id)
-    );
-    if (profile.role === 'client' && profile.company_id) ids.add(profile.company_id);
-    return [...ids];
-  };
-
-  const clientProfiles = profiles.filter(profile => profile.role === 'client');
-  const subcontractors = profiles.filter(profile => profile.role === 'external');
-  const unassigned = clientProfiles.filter(profile => getProfileCompanyIds(profile).length === 0);
-
-  return (
-    <Layout>
-      <div className="page-header">
-        <div>
-          <div className="page-title">Clients & Users</div>
-          <div className="page-subtitle">
-            {companies.length} {companies.length !== 1 ? 'companies' : 'company'}
-            <span style={{ marginLeft: 10 }}>
-              · {clientProfiles.length} client user{clientProfiles.length !== 1 ? 's' : ''}
-            </span>
-            <span style={{ marginLeft: 10 }}>
-              · {subcontractors.length} subcontractor{subcontractors.length !== 1 ? 's' : ''}
-            </span>
-            {unassigned.length > 0 && (
-              <span style={{ marginLeft: 10, color: 'var(--danger)', fontWeight: 600 }}>
-                · {unassigned.length} unassigned client{unassigned.length !== 1 ? 's' : ''}
-              </span>
-            )}
-          </div>
-        </div>
-      </div>
-
-      <div className="stats-grid" style={{ marginBottom: 24 }}>
-        <div className="stat-card">
-          <div className="stat-icon">🏢</div>
-          <div className="stat-value">{companies.length}</div>
-          <div className="stat-label">Companies</div>
-        </div>
-        <div className="stat-card">
-          <div className="stat-icon">👥</div>
-          <div className="stat-value">{clientProfiles.length}</div>
-          <div className="stat-label">Client Users</div>
-        </div>
-        <div className="stat-card">
-          <div className="stat-icon">🧾</div>
-          <div className="stat-value">{subcontractors.length}</div>
-          <div className="stat-label">Subcontractors</div>
-        </div>
-        <div className="stat-card">
-          <div className="stat-icon">⚠️</div>
-          <div className="stat-value">{unassigned.length}</div>
-          <div className="stat-label">Unassigned Clients</div>
-        </div>
-      </div>
-
-      {showNewUser && (
-        <div className="card" style={{ marginBottom: 24, maxWidth: 480 }}>
-          <div className="card-title">New User</div>
-          <form onSubmit={handleCreateUser}>
-            <div className="grid-2">
-              <div className="form-group">
-                <label>Full Name *</label>
-                <input type="text" placeholder="Jane Smith" value={userForm.name}
-                  onChange={e => setUserForm(f => ({ ...f, name: e.target.value }))} required autoFocus />
-              </div>
-              <div className="form-group">
-                <label>Email *</label>
-                <input type="email" placeholder="jane@acme.com" value={userForm.email}
-                  onChange={e => setUserForm(f => ({ ...f, email: e.target.value }))} required />
-              </div>
-            </div>
-            <div className="grid-2">
-              <div className="form-group">
-                <label>Password *</label>
-                <input type="password" placeholder="Temporary password" value={userForm.password}
-                  onChange={e => setUserForm(f => ({ ...f, password: e.target.value }))} required minLength={6} />
-              </div>
-              <div className="form-group">
-                <label>Role *</label>
-                <select value={userForm.role} onChange={e => setUserForm(f => ({ ...f, role: e.target.value, company_id: '' }))}>
-                  <option value="client">Client</option>
-                  <option value="team">Team</option>
-                  <option value="external">Subcontractor</option>
-                </select>
-              </div>
-            </div>
-            {userForm.role === 'client' && (
-            <div className="form-group">
-              <label>Assign to Company</label>
-              <select value={userForm.company_id} onChange={e => setUserForm(f => ({ ...f, company_id: e.target.value }))}>
-                <option value="">No company yet</option>
-                {companies.map(c => <option key={c.id} value={c.id}>{c.name}</option>)}
-              </select>
-            </div>
-            )}
-            {userError && <p style={{ fontSize: 13, color: 'var(--danger)', marginBottom: 12 }}>{userError}</p>}
-            <div className="action-buttons">
-              <button type="submit" className="btn btn-primary" disabled={saving}>
-                {saving ? 'Creating...' : 'Create User'}
-              </button>
-              <button type="button" className="btn btn-outline" onClick={() => setShowNewUser(false)}>Cancel</button>
-            </div>
-          </form>
-        </div>
-      )}
-
-      {showNew && (
-        <div className="card" style={{ marginBottom: 24, maxWidth: 480 }}>
-          <div className="card-title">New Company</div>
-          <form onSubmit={handleCreate}>
-            <div className="form-group">
-              <label>Company Name *</label>
-              <input
-                type="text"
-                placeholder="Acme Corp"
-                value={newForm.name}
-                onChange={e => setNewForm(f => ({ ...f, name: e.target.value }))}
-                required
-                autoFocus
-              />
-            </div>
-            <div className="grid-2">
-              <div className="form-group">
-                <label>Phone</label>
-                <input
-                  type="text"
-                  placeholder="+1 (555) 000-0000"
-                  value={newForm.phone}
-                  onChange={e => setNewForm(f => ({ ...f, phone: e.target.value }))}
-                />
-              </div>
-              <div className="form-group">
-                <label>Address</label>
-                <input
-                  type="text"
-                  placeholder="123 Main St, City, State"
-                  value={newForm.address}
-                  onChange={e => setNewForm(f => ({ ...f, address: e.target.value }))}
-                />
-              </div>
-            </div>
-            <div className="action-buttons">
-              <button type="submit" className="btn btn-primary" disabled={saving || !newForm.name.trim()}>
-                {saving ? 'Creating...' : 'Create Company'}
-              </button>
-              <button type="button" className="btn btn-outline" onClick={() => setShowNew(false)}>Cancel</button>
-            </div>
-          </form>
-        </div>
-      )}
-
-      <div style={{ marginBottom: 20, display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, flexWrap: 'wrap' }}>
-        <div style={{ display: 'flex', gap: 4, flexWrap: 'wrap' }}>
-          {[
-            { id: 'companies', label: 'Companies' },
-            { id: 'clients', label: 'Clients' },
-            { id: 'subcontractors', label: 'Subcontractors' },
-          ].map(tab => (
-            <button
-              key={tab.id}
-              type="button"
-              className={`tab-btn${activeTab === tab.id ? ' active' : ''}`}
-              onClick={() => setActiveTab(tab.id)}
-            >
-              {tab.label}
-            </button>
-          ))}
-        </div>
-        {activeTab === 'companies' && (
-          <button
-            className="btn btn-primary btn-sm"
-            onClick={() => { setShowNew(true); setShowNewUser(false); }}
-          >
-            + New Company
-          </button>
-        )}
-        {activeTab === 'clients' && (
-          <button
-            className="btn btn-primary btn-sm"
-            onClick={() => { setShowNewUser(true); setShowNew(false); setUserForm(f => ({ ...f, role: 'client' })); }}
-          >
-            + New Client
-          </button>
-        )}
-        {activeTab === 'subcontractors' && (
-          <button
-            className="btn btn-primary btn-sm"
-            onClick={() => { setShowNewUser(true); setShowNew(false); setUserForm(f => ({ ...f, role: 'external', company_id: '' })); }}
-          >
-            + New Subcontractor
-          </button>
-        )}
-      </div>
-
-      {activeTab === 'companies' && (
-        <>
-          {companies.length === 0 ? (
-            <div className="empty-state">
-              <h3>No companies yet</h3>
-              <p>Create a company to get started.</p>
-              <button className="btn btn-primary" style={{ marginTop: 16 }} onClick={() => setShowNew(true)}>+ New Company</button>
-            </div>
-          ) : (
-            <div className="table-wrapper">
-              <table>
-                <thead>
-                  <tr>
-                    <th>Company</th>
-                    <th>Clients</th>
-                    <th>Phone</th>
-                    <th>Address</th>
-                    <th style={{ width: 1, whiteSpace: 'nowrap' }}>Actions</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  {companies.map(company => {
-                    const companyProfiles = clientProfiles.filter(profile => getProfileCompanyIds(profile).includes(company.id));
-
-                    return (
-                      <tr key={company.id} onClick={() => navigate(`/companies/${company.id}`)} style={{ cursor: 'pointer' }}>
-                        <td>
-                          <div style={{ fontWeight: 600 }}>{company.name}</div>
-                          {companyProfiles.length > 0 && (
-                            <div style={{ marginTop: 8, display: 'flex', flexDirection: 'column', gap: 6 }}>
-                              {companyProfiles.map(profile => (
-                                <div key={profile.id} style={{ display: 'flex', alignItems: 'flex-start', gap: 8, color: 'var(--text-muted)', fontSize: 12, lineHeight: 1.4 }}>
-                                  <span style={{ color: 'var(--accent)', lineHeight: 1.2 }}>•</span>
-                                  <div style={{ minWidth: 0 }}>
-                                    <div style={{ color: 'var(--text-secondary)', fontWeight: 600 }}>{profile.name || '—'}</div>
-                                  </div>
-                                </div>
-                              ))}
-                            </div>
-                          )}
-                        </td>
-                        <td>{companyProfiles.length}</td>
-                        <td>{company.phone || '—'}</td>
-                        <td>{company.address || '—'}</td>
-                        <td onClick={(e) => e.stopPropagation()}>
-                          <button
-                            className="btn btn-outline btn-sm"
-                            style={{ color: 'var(--danger)', borderColor: 'var(--danger)' }}
-                            onClick={() => handleDeleteCompany(company)}
-                          >
-                            Delete
-                          </button>
-                        </td>
-                      </tr>
-                    );
-                  })}
-                </tbody>
-              </table>
-            </div>
-          )}
-        </>
-      )}
-
-      {activeTab === 'clients' && (
-        <>
-          <div className="card request-toolbar-card" style={{ marginBottom: 16 }}>
-            {companies.length > 0 && (
-              <div className="request-toolbar-grid">
-                <div className="request-toolbar-section">
-                  <div className="card-title" style={{ marginBottom: 10 }}>Filter By Company</div>
-                  <div className="request-filter-row">
-                    <button
-                      className={`btn btn-sm ${!filterCompany ? 'btn-primary' : 'btn-outline'}`}
-                      onClick={() => setFilterCompany('')}
-                    >
-                      All
-                    </button>
-                    {companies.map(company => (
-                      <button
-                        key={company.id}
-                        className={`btn btn-sm ${filterCompany === company.id ? 'btn-primary' : 'btn-outline'}`}
-                        onClick={() => setFilterCompany(current => current === company.id ? '' : company.id)}
-                      >
-                        {company.name}
-                      </button>
-                    ))}
-                  </div>
-                </div>
-              </div>
-            )}
-          </div>
-
-          {unassigned.length > 0 && (
-            <div className="card" style={{ marginBottom: 24, borderColor: 'var(--danger)' }}>
-              <div className="card-title" style={{ color: 'var(--danger)' }}>Unassigned Client Users</div>
-              <p style={{ fontSize: 13, color: 'var(--text-secondary)', marginBottom: 12 }}>
-                These client users are not linked to any company yet.
-              </p>
-              <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
-                {unassigned.map(user => (
-                  <div key={user.id} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '10px 14px', background: 'var(--bg)', borderRadius: 8, border: '1px solid var(--border)' }}>
-                    <div style={{ flex: 1 }}>
-                      {editingUserId === user.id ? (
-                        <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
-                          <input
-                            type="text"
-                            value={editUserVal}
-                            onChange={e => setEditUserVal(e.target.value)}
-                            autoFocus
-                            style={{ margin: 0, fontSize: 13, padding: '3px 8px', width: 180 }}
-                            onKeyDown={e => { if (e.key === 'Enter') handleEditUserSave(user.id); if (e.key === 'Escape') setEditingUserId(null); }}
-                          />
-                          <button className="btn btn-primary btn-sm" onClick={() => handleEditUserSave(user.id)}>Save</button>
-                          <button className="btn btn-outline btn-sm" onClick={() => setEditingUserId(null)}>Cancel</button>
-                        </div>
-                      ) : (
-                        <>
-                          <div style={{ fontWeight: 600, fontSize: 13 }}>{user.name}</div>
-                          <div style={{ fontSize: 12, color: 'var(--text-muted)' }}>{user.email}</div>
-                        </>
-                      )}
-                    </div>
-                    {editingUserId !== user.id && (
-                      <div style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
-                        <span style={{ fontSize: 12, color: 'var(--danger)', fontWeight: 500, marginRight: 4 }}>No company</span>
-                        <button className="btn btn-outline btn-sm" onClick={() => { setEditingUserId(user.id); setEditUserVal(user.name); }}>Edit</button>
-                        <button
-                          className="btn btn-outline btn-sm"
-                          style={{ color: 'var(--danger)', borderColor: 'var(--danger)' }}
-                          onClick={() => handleDeleteUser(user)}
-                          disabled={deletingUserId === user.id}
-                        >{deletingUserId === user.id ? '...' : 'Delete'}</button>
-                      </div>
-                    )}
-                  </div>
-                ))}
-              </div>
-            </div>
-          )}
-
-          {clientProfiles.filter(profile => !filterCompany || getProfileCompanyIds(profile).includes(filterCompany)).length === 0 ? (
-            <div className="empty-state">
-              <h3>No client users</h3>
-              <p>Create a client user to link them to a company.</p>
-            </div>
-          ) : (
-            <div className="table-wrapper">
-              <table>
-                <thead>
-                  <tr>
-                    <th>Name</th>
-                    <th>Email</th>
-                    <th>Company</th>
-                    <th>Role</th>
-                    <th style={{ width: 1, whiteSpace: 'nowrap' }}>Actions</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  {clientProfiles
-                    .filter(profile => !filterCompany || getProfileCompanyIds(profile).includes(filterCompany))
-                    .map(user => {
-                      const companyNames = getProfileCompanyIds(user)
-                        .map(companyId => companies.find(company => company.id === companyId)?.name)
-                        .filter(Boolean);
-
-                      return (
-                        <tr key={user.id}>
-                          <td style={{ fontWeight: 600 }}>
-                            {editingUserId === user.id ? (
-                              <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
-                                <input
-                                  type="text"
-                                  value={editUserVal}
-                                  onChange={e => setEditUserVal(e.target.value)}
-                                  autoFocus
-                                  style={{ margin: 0, fontSize: 13, padding: '3px 8px', width: 180 }}
-                                  onKeyDown={e => {
-                                    if (e.key === 'Enter') handleEditUserSave(user.id);
-                                    if (e.key === 'Escape') setEditingUserId(null);
-                                  }}
-                                />
-                                <button className="btn btn-primary btn-sm" onClick={() => handleEditUserSave(user.id)}>Save</button>
-                                <button className="btn btn-outline btn-sm" onClick={() => setEditingUserId(null)}>Cancel</button>
-                              </div>
-                            ) : (
-                              user.name || '—'
-                            )}
-                          </td>
-                          <td>{user.email || '—'}</td>
-                          <td>{companyNames.length ? companyNames.join(', ') : '—'}</td>
-                          <td>{getRoleLabel(user.role)}</td>
-                          <td>
-                            {editingUserId !== user.id && (
-                              <div style={{ display: 'flex', gap: 6, justifyContent: 'flex-end', flexWrap: 'nowrap', whiteSpace: 'nowrap' }}>
-                                <button className="btn btn-outline btn-sm" onClick={() => { setEditingUserId(user.id); setEditUserVal(user.name || ''); }}>
-                                  Edit
-                                </button>
-                                <button
-                                  className="btn btn-outline btn-sm"
-                                  style={{ color: 'var(--danger)', borderColor: 'var(--danger)' }}
-                                  onClick={() => handleDeleteUser(user)}
-                                  disabled={deletingUserId === user.id}
-                                >
-                                  {deletingUserId === user.id ? '...' : 'Delete'}
-                                </button>
-                              </div>
-                            )}
-                          </td>
-                        </tr>
-                      );
-                    })}
-                </tbody>
-              </table>
-            </div>
-          )}
-        </>
-      )}
-
-      {activeTab === 'subcontractors' && (
-        <div>
-          {subcontractors.length === 0 ? (
-            <div className="empty-state" style={{ padding: '20px 18px' }}>
-              <h3>No subcontractors yet</h3>
-              <p>Create a subcontractor user to manage external access and POs.</p>
-            </div>
-          ) : (
-            <div className="table-wrapper">
-              <table>
-                <thead>
-                  <tr>
-                    <th>Name</th>
-                    <th>Email</th>
-                    <th>Role</th>
-                    <th style={{ width: 1, whiteSpace: 'nowrap' }}>Actions</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  {subcontractors.map(user => (
-                    <tr key={user.id}>
-                      <td style={{ fontWeight: 600 }}>
-                        {editingUserId === user.id ? (
-                          <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
-                            <input
-                              type="text"
-                              value={editUserVal}
-                              onChange={e => setEditUserVal(e.target.value)}
-                              autoFocus
-                              style={{ margin: 0, fontSize: 13, padding: '3px 8px', width: 180 }}
-                              onKeyDown={e => {
-                                if (e.key === 'Enter') handleEditUserSave(user.id);
-                                if (e.key === 'Escape') setEditingUserId(null);
-                              }}
-                            />
-                            <button className="btn btn-primary btn-sm" onClick={() => handleEditUserSave(user.id)}>Save</button>
-                            <button className="btn btn-outline btn-sm" onClick={() => setEditingUserId(null)}>Cancel</button>
-                          </div>
-                        ) : (
-                          user.name || '—'
-                        )}
-                      </td>
-                      <td>{user.email || '—'}</td>
-                      <td>{getRoleLabel(user.role)}</td>
-                      <td>
-                        {editingUserId !== user.id && (
-                          <div style={{ display: 'flex', gap: 6, justifyContent: 'flex-end', flexWrap: 'nowrap', whiteSpace: 'nowrap' }}>
-                            <button className="btn btn-outline btn-sm" onClick={() => { setEditingUserId(user.id); setEditUserVal(user.name || ''); }}>
-                              Edit
-                            </button>
-                            <button
-                              className="btn btn-outline btn-sm"
-                              style={{ color: 'var(--danger)', borderColor: 'var(--danger)' }}
-                              onClick={() => handleDeleteUser(user)}
-                              disabled={deletingUserId === user.id}
-                            >
-                              {deletingUserId === user.id ? '...' : 'Delete'}
-                            </button>
-                          </div>
-                        )}
-                      </td>
-                    </tr>
-                  ))}
-                </tbody>
-              </table>
-            </div>
-          )}
-        </div>
-      )}
-    </Layout>
-  );
-}
diff --git a/src/pages/team/CompanyDetail.jsx b/src/pages/team/CompanyDetail.jsx
index 776497c..1bdf735 100644
--- a/src/pages/team/CompanyDetail.jsx
+++ b/src/pages/team/CompanyDetail.jsx
@@ -3,13 +3,16 @@ import { useParams, Link, useNavigate } from 'react-router-dom';
 import Layout from '../../components/Layout';
 import StatusBadge from '../../components/StatusBadge';
 import { supabase } from '../../lib/supabase';
+import { useAuth } from '../../context/AuthContext';
 import { serviceTypes } from '../../data/mockData';
 import { cleanupTaskStorage, deleteCompanyData } from '../../lib/deleteHelpers';
-import { syncSeafileFolders } from '../../lib/seafileFolders';
+import { renameClientFolder, backfillClientFolders } from '../../lib/filebrowserFolders';
 
 export default function CompanyDetail() {
   const { id } = useParams();
   const navigate = useNavigate();
+  const { currentUser } = useAuth();
+  const isTeam = currentUser?.role === 'team';
 
   const [company, setCompany] = useState(null);
   const [projects, setProjects] = useState([]);
@@ -67,7 +70,10 @@ export default function CompanyDetail() {
     e.preventDefault();
     if (!nameVal.trim()) return;
     setSavingName(true);
+    const oldName = company.name;
     await supabase.from('companies').update({ name: nameVal.trim() }).eq('id', id);
+    renameClientFolder(oldName, nameVal.trim()).catch(() => {});
+    backfillClientFolders().catch(() => {});
     setCompany(c => ({ ...c, name: nameVal.trim() }));
     setEditingName(false);
     setSavingName(false);
@@ -110,7 +116,6 @@ export default function CompanyDetail() {
       setUsers(prev => [...prev, { ...user, company_id: user.company_id || id, created_at: user.created_at || new Date().toISOString() }]
         .sort((a, b) => (a.name || '').localeCompare(b.name || '')));
       setAvailableUsers(prev => prev.filter(u => u.id !== userId));
-      syncSeafileFolders().catch((syncError) => console.warn('Seafile folder sync failed:', syncError.message));
     }
     setAssigning(false);
   };
@@ -139,7 +144,7 @@ export default function CompanyDetail() {
   const handleDeleteCompany = async () => {
     if (!window.confirm(`Delete "${company.name}"? This will permanently delete all projects, jobs, files, and data. This cannot be undone.`)) return;
     await deleteCompanyData(id);
-    navigate('/companies');
+    navigate('/company');
   };
 
   const handleDeleteProject = async (project) => {
@@ -206,11 +211,11 @@ export default function CompanyDetail() {
 
   return (
     <Layout>
-      <button className="back-link" onClick={() => navigate('/companies')}>← Back to Companies</button>
+      <button className="back-link" onClick={() => navigate('/company')}>← Back to Companies</button>
 
       <div className="page-header">
         <div>
-          {editingName ? (
+          {isTeam && editingName ? (
             <form onSubmit={handleCompanyNameSave} style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 4 }}>
               <input
                 type="text"
@@ -226,7 +231,7 @@ export default function CompanyDetail() {
           ) : (
             <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
               <div className="page-title">{company.name}</div>
-              <button className="btn btn-outline btn-sm" onClick={() => { setNameVal(company.name); setEditingName(true); }}>Edit</button>
+              {isTeam && <button className="btn-icon" title="Edit" onClick={() => { setNameVal(company.name); setEditingName(true); }}><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg></button>}
             </div>
           )}
           <div className="page-subtitle">
@@ -236,11 +241,10 @@ export default function CompanyDetail() {
             {!company.phone && !company.address && 'No contact info'}
           </div>
         </div>
-        <button
-          className="btn btn-outline btn-sm"
-          style={{ color: 'var(--danger, #dc2626)', borderColor: 'var(--danger, #dc2626)' }}
+        {isTeam && <button
+          className="btn-icon btn-icon-danger"
           onClick={handleDeleteCompany}
-        >Delete Company</button>
+        title="Delete Company">✕</button>}
       </div>
 
       <div className="stats-grid" style={{ marginBottom: 28 }}>
@@ -268,7 +272,7 @@ export default function CompanyDetail() {
 
       {/* Tabs */}
       <div style={{ display: 'flex', gap: 4, marginBottom: 24, flexWrap: 'wrap' }}>
-        {['users', 'projects', 'pricing'].map(t => (
+        {(isTeam ? ['users', 'projects', 'pricing'] : ['users', 'projects']).map(t => (
           <button
             key={t}
             onClick={() => setTab(t)}
@@ -331,23 +335,24 @@ export default function CompanyDetail() {
                         )}
                       </div>
                     </div>
-                    {editingUserId !== user.id && (
+                    {isTeam && editingUserId !== user.id && (
                       <div style={{ display: 'flex', gap: 6, flexShrink: 0 }}>
                         <button
-                          className="btn btn-outline btn-sm"
+                          className="btn-icon"
+                          title="Edit"
                           onClick={() => { setEditingUserId(user.id); setEditUserVal(user.name); }}
-                        >Edit</button>
+                        ><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg></button>
                         <button
                           className="btn btn-outline btn-sm"
                           onClick={() => handleRemoveUser(user.id)}
                         >Unassign</button>
                         <button
-                          className="btn btn-outline btn-sm"
-                          style={{ color: 'var(--danger)', borderColor: 'var(--danger)' }}
+                          className="btn-icon btn-icon-danger"
+                          title="Delete"
                           onClick={() => handleDeleteUser(user)}
                           disabled={deletingUserId === user.id}
                         >
-                          {deletingUserId === user.id ? '...' : 'Delete'}
+                          {deletingUserId === user.id ? '...' : '✕'}
                         </button>
                       </div>
                     )}
@@ -357,7 +362,7 @@ export default function CompanyDetail() {
             )}
           </div>
 
-          {availableUsers.length > 0 && (
+          {isTeam && availableUsers.length > 0 && (
             <div className="card">
               <div className="card-title">Available Users</div>
               <p style={{ fontSize: 13, color: 'var(--text-secondary)', marginBottom: 14 }}>
@@ -393,13 +398,13 @@ export default function CompanyDetail() {
                         <button className="btn btn-primary btn-sm" onClick={() => handleAssignUser(user.id)} disabled={assigning}>
                           Assign to {company.name}
                         </button>
-                        <button className="btn btn-outline btn-sm" onClick={() => { setEditingUserId(user.id); setEditUserVal(user.name); }}>Edit</button>
+                        <button className="btn-icon" title="Edit" onClick={() => { setEditingUserId(user.id); setEditUserVal(user.name); }}><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg></button>
                         <button
-                          className="btn btn-outline btn-sm"
-                          style={{ color: 'var(--danger)', borderColor: 'var(--danger)' }}
+                          className="btn-icon btn-icon-danger"
+                          title="Delete"
                           onClick={() => handleDeleteUser(user)}
                           disabled={deletingUserId === user.id}
-                        >{deletingUserId === user.id ? '...' : 'Delete'}</button>
+                        >{deletingUserId === user.id ? '...' : '✕'}</button>
                       </div>
                     )}
                   </div>
@@ -413,11 +418,11 @@ export default function CompanyDetail() {
       {/* Projects Tab */}
       {tab === 'projects' && (
         <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
-          <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
+          {isTeam && <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
             <button className="btn btn-primary btn-sm" onClick={() => setShowNewProject(s => !s)}>
               {showNewProject ? 'Cancel' : '+ New Project'}
             </button>
-          </div>
+          </div>}
 
           {showNewProject && (
             <div className="card">
@@ -466,12 +471,12 @@ export default function CompanyDetail() {
                       </div>
                       <span style={{ fontSize: 12, color: 'var(--text-muted)' }}>›</span>
                     </Link>
-                    <button
+                    {isTeam && <button
                       type="button"
                       onClick={() => handleDeleteProject(project)}
                       style={{ background: 'none', border: 'none', borderLeft: '1px solid var(--border)', color: 'var(--danger, #dc2626)', cursor: 'pointer', fontSize: 16, padding: '0 14px', alignSelf: 'stretch', display: 'flex', alignItems: 'center' }}
                       title="Delete project"
-                    >✕</button>
+                    >✕</button>}
                   </div>
                 );
               })}
diff --git a/src/pages/team/Dashboard.jsx b/src/pages/team/Dashboard.jsx
deleted file mode 100755
index f7fe1ba..0000000
--- a/src/pages/team/Dashboard.jsx
+++ /dev/null
@@ -1,567 +0,0 @@
-import { useState, useEffect } from 'react';
-import { Link } from 'react-router-dom';
-import Layout from '../../components/Layout';
-import StatusBadge from '../../components/StatusBadge';
-import { supabase } from '../../lib/supabase';
-import { useAuth } from '../../context/AuthContext';
-import { readPageCache, writePageCache } from '../../lib/pageCache';
-import { withTimeout } from '../../lib/withTimeout';
-import { getDeadlineSourceSubmission } from '../../lib/taskDeadlines';
-import { formatDateOnly, parseDateOnly } from '../../lib/dates';
-
-function formatDeadline(value) {
-  return formatDateOnly(value, 'No deadline');
-}
-
-function getDeadlineMeta(value) {
-  const date = parseDateOnly(value);
-  if (!date) return null;
-
-  const today = new Date();
-  today.setHours(0, 0, 0, 0);
-  const diffDays = Math.round((date.getTime() - today.getTime()) / (1000 * 60 * 60 * 24));
-
-  if (diffDays < 0) return { label: `${Math.abs(diffDays)} day${Math.abs(diffDays) === 1 ? '' : 's'} overdue`, color: 'var(--danger)' };
-  if (diffDays === 0) return { label: 'Due today', color: '#f97316' };
-  if (diffDays === 1) return { label: 'Due tomorrow', color: '#f5a523' };
-  return { label: `Due in ${diffDays} days`, color: 'var(--text-muted)' };
-}
-
-function TaskListCard({ title, subtitle, tasks, projects, emptyMessage }) {
-  return (
-    <div className="card">
-      <div className="card-title" style={{ marginBottom: 6 }}>{title}</div>
-      {subtitle && <div style={{ fontSize: 12, color: 'var(--text-muted)', marginBottom: 14 }}>{subtitle}</div>}
-
-      {tasks.length === 0 ? (
-        <div style={{ color: 'var(--text-muted)', fontSize: 13 }}>{emptyMessage}</div>
-      ) : (
-        <div style={{ display: 'grid', gap: 10 }}>
-          {tasks.map(task => {
-            const project = projects.find(p => p.id === task.project_id);
-            const deadlineMeta = getDeadlineMeta(task.deadline);
-
-            return (
-              <Link
-                key={task.id}
-                to={`/tasks/${task.id}`}
-                className="interactive-row"
-                style={{
-                  border: '1px solid var(--border)',
-                  borderRadius: 8,
-                  padding: '12px 14px',
-                  textDecoration: 'none',
-                  display: 'grid',
-                  gap: 6,
-                }}
-              >
-                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
-                  <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--text-primary)' }}>{task.title}</div>
-                  <StatusBadge status={task.status} />
-                </div>
-                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, flexWrap: 'wrap' }}>
-                  <div style={{ fontSize: 12, color: 'var(--text-muted)' }}>
-                    {project?.name || 'No project'}{task.assigned_name ? ` · ${task.assigned_name}` : ''}
-                  </div>
-                  <div style={{ fontSize: 12, color: deadlineMeta?.color || 'var(--text-muted)', fontWeight: deadlineMeta ? 600 : 500 }}>
-                    {formatDeadline(task.deadline)}
-                    {deadlineMeta ? ` · ${deadlineMeta.label}` : ''}
-                  </div>
-                </div>
-              </Link>
-            );
-          })}
-        </div>
-      )}
-    </div>
-  );
-}
-
-function CompanyGroup({ company, tasks, projects }) {
-  const [open, setOpen] = useState(true);
-  return (
-    <div className="interactive-surface" style={{ marginBottom: 10, border: '1px solid var(--border)', borderRadius: 8, overflow: 'hidden', background: 'var(--card-bg)' }}>
-      <button
-        className="interactive-panel-toggle"
-        onClick={() => setOpen(o => !o)}
-        style={{
-          width: '100%', display: 'flex', alignItems: 'center',
-          justifyContent: 'space-between', padding: '10px 14px',
-          background: 'var(--card-bg-2)', border: 'none', cursor: 'pointer',
-          borderBottom: open ? '1px solid var(--border)' : 'none',
-          fontFamily: 'inherit',
-        }}
-      >
-        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
-          <span style={{ fontSize: 13, fontWeight: 700, color: 'var(--text-primary)' }}>
-            {company.name}
-          </span>
-          <span style={{ fontSize: 11, fontWeight: 600, padding: '1px 7px', borderRadius: 20, background: 'var(--accent)', color: '#1a1a1a' }}>
-            {tasks.length}
-          </span>
-        </div>
-        <span style={{ fontSize: 12, color: 'var(--text-muted)' }}>{open ? '▲' : '▼'}</span>
-      </button>
-      {open && (
-        <div>
-          {tasks.map(task => {
-            const project = projects.find(p => p.id === task.project_id);
-            return (
-              <Link key={task.id} to={`/tasks/${task.id}`} className="interactive-row" style={{ padding: '10px 14px', borderBottom: '1px solid var(--border)', display: 'flex', flexDirection: 'column', gap: 4, textDecoration: 'none', cursor: 'pointer' }}>
-                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
-                  <span style={{ fontSize: 13, fontWeight: 600, color: 'var(--text-primary)' }}>
-                    {task.title} <span style={{ fontWeight: 400, color: 'var(--text-muted)' }}>{'R' + String(task.current_version || 0).padStart(2, '0')}</span>
-                  </span>
-                  <StatusBadge status={task.status} />
-                </div>
-                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
-                  <span style={{ fontSize: 11, color: 'var(--text-secondary)' }}>{project?.name}</span>
-                  <span style={{ fontSize: 11, color: task.assigned_name ? 'var(--text-secondary)' : 'var(--text-muted)' }}>
-                    {task.assigned_name || 'Unassigned'}
-                  </span>
-                </div>
-              </Link>
-            );
-          })}
-        </div>
-      )}
-    </div>
-  );
-}
-
-function ProjectGroup({ project, tasks }) {
-  const [open, setOpen] = useState(true);
-  return (
-    <div className="interactive-surface" style={{ marginBottom: 10, border: '1px solid var(--border)', borderRadius: 8, overflow: 'hidden', background: 'var(--card-bg)' }}>
-      <button
-        className="interactive-panel-toggle"
-        onClick={() => setOpen(o => !o)}
-        style={{
-          width: '100%', display: 'flex', alignItems: 'center',
-          justifyContent: 'space-between', padding: '10px 14px',
-          background: 'var(--card-bg-2)', border: 'none', cursor: 'pointer',
-          borderBottom: open ? '1px solid var(--border)' : 'none',
-          fontFamily: 'inherit',
-        }}
-      >
-        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
-          <span style={{ fontSize: 13, fontWeight: 700, color: 'var(--text-primary)' }}>{project.name}</span>
-          <span style={{ fontSize: 11, fontWeight: 600, padding: '1px 7px', borderRadius: 20, background: 'var(--accent)', color: '#1a1a1a' }}>
-            {tasks.length}
-          </span>
-        </div>
-        <span style={{ fontSize: 12, color: 'var(--text-muted)' }}>{open ? '▲' : '▼'}</span>
-      </button>
-      {open && (
-        <div>
-          {tasks.map(task => (
-            <a key={task.id} href={`/tasks/${task.id}`} className="interactive-row" style={{ padding: '10px 14px', borderBottom: '1px solid var(--border)', display: 'flex', alignItems: 'center', justifyContent: 'space-between', textDecoration: 'none' }}>
-              <span style={{ fontSize: 13, fontWeight: 600, color: 'var(--text-primary)' }}>
-                {task.title} <span style={{ fontWeight: 400, color: 'var(--text-muted)' }}>{'R' + String(task.current_version || 0).padStart(2, '0')}</span>
-              </span>
-              <StatusBadge status={task.status} />
-            </a>
-          ))}
-        </div>
-      )}
-    </div>
-  );
-}
-
-function OutputCharts({ title, subtitle, taskPeople, revisionPeople }) {
-  const taskRows = [...(taskPeople || [])].sort((a, b) => b.total - a.total || a.name.localeCompare(b.name));
-  const revisionRows = [...(revisionPeople || [])].sort((a, b) => b.revisions - a.revisions || a.name.localeCompare(b.name));
-  const hasData = taskRows.length > 0 || revisionRows.length > 0;
-
-  const chartColors = ['#F5A523', '#60A5FA', '#4ADE80', '#F87171', '#C084FC', '#FBBF24', '#22C55E', '#38BDF8'];
-  const totalTasks = taskRows.reduce((sum, person) => sum + person.total, 0);
-  const totalRevisions = revisionRows.reduce((sum, person) => sum + person.revisions, 0);
-
-  const taskGradient = taskRows.length
-    ? `conic-gradient(${taskRows.map((person, index) => {
-      const start = (taskRows.slice(0, index).reduce((sum, item) => sum + item.total, 0) / Math.max(totalTasks, 1)) * 100;
-      const end = ((taskRows.slice(0, index + 1).reduce((sum, item) => sum + item.total, 0)) / Math.max(totalTasks, 1)) * 100;
-      return `${chartColors[index % chartColors.length]} ${start}% ${end}%`;
-    }).join(', ')})`
-    : 'none';
-
-  const revisionGradient = totalRevisions > 0
-    ? `conic-gradient(${revisionRows.map((person, index) => {
-      const start = (revisionRows.slice(0, index).reduce((sum, item) => sum + item.revisions, 0) / totalRevisions) * 100;
-      const end = ((revisionRows.slice(0, index + 1).reduce((sum, item) => sum + item.revisions, 0)) / totalRevisions) * 100;
-      return `${chartColors[index % chartColors.length]} ${start}% ${end}%`;
-    }).join(', ')})`
-    : 'none';
-
-  return (
-    <div className="card">
-      <div className="card-title" style={{ marginBottom: 6 }}>{title}</div>
-      <div style={{ fontSize: 12, color: 'var(--text-muted)', marginBottom: 14 }}>{subtitle}</div>
-
-      {!hasData ? (
-        <div style={{ color: 'var(--text-muted)', fontSize: 13 }}>No completed assigned tasks yet.</div>
-      ) : (
-        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 18 }}>
-          {[
-            { title: 'New Tasks', total: totalTasks, rows: taskRows, valueKey: 'total', gradient: taskGradient },
-            { title: 'Revisions', total: totalRevisions, rows: revisionRows, valueKey: 'revisions', gradient: revisionGradient },
-          ].map((chart) => (
-            <div key={chart.title} style={{ border: '1px solid var(--border)', borderRadius: 8, padding: 16, background: 'var(--card-bg-2)' }}>
-              <div style={{ display: 'grid', gridTemplateColumns: '140px minmax(0, 1fr)', gap: 18, alignItems: 'center' }}>
-                <div className="dashboard-pie-wrap">
-                  <div className="dashboard-pie" style={{ background: chart.gradient }}>
-                    <div className="dashboard-pie-center">
-                      <strong>{chart.total}</strong>
-                      <span>{chart.title}</span>
-                    </div>
-                  </div>
-                </div>
-                <div className="dashboard-legend">
-                  {chart.rows.map((person, index) => {
-                    const value = person[chart.valueKey];
-                    const percent = chart.total ? Math.round((value / chart.total) * 100) : 0;
-                    return (
-                      <div key={`${chart.title}-${person.name}`} className="dashboard-legend-item">
-                        <span className="dashboard-legend-dot" style={{ background: chartColors[index % chartColors.length] }} />
-                        <span style={{ minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{person.name}</span>
-                        <strong>{value} · {percent}%</strong>
-                      </div>
-                    );
-                  })}
-                </div>
-              </div>
-            </div>
-          ))}
-        </div>
-      )}
-    </div>
-  );
-}
-
-function buildTaskPeople(tasks) {
-  const completedAssignedTasks = tasks.filter(task => task.status === 'client_approved' && task.assigned_name);
-  return [...completedAssignedTasks.reduce((map, task) => {
-    const person = task.assigned_name;
-    const entry = map.get(person) || { name: person, total: 0 };
-    entry.total += 1;
-    map.set(person, entry);
-    return map;
-  }, new Map()).values()];
-}
-
-function buildRevisionPeople(submissions, tasks, roleFilter) {
-  return [...(submissions || []).reduce((map, submission) => {
-    if ((submission.version_number || 0) <= 0) return map;
-    if (!submission.delivery?.sent_by) return map;
-    if (roleFilter && submission.delivery_sender_role !== roleFilter) return map;
-    if (!roleFilter && submission.delivery_sender_role === 'external') return map;
-
-    const person = submission.delivery.sent_by;
-    const entry = map.get(person) || { name: person, revisions: 0 };
-    entry.revisions += 1;
-    map.set(person, entry);
-    return map;
-  }, new Map()).values()];
-}
-
-function SubcontractorRates({ externals }) {
-  const [rates, setRates] = useState(() => Object.fromEntries(externals.map(p => [p.id, String(p.brand_book_rate ?? 60)])));
-  const [saving, setSaving] = useState('');
-  const [saved, setSaved] = useState('');
-
-  const handleSave = async (profile) => {
-    const rate = parseFloat(rates[profile.id]);
-    if (isNaN(rate) || rate < 0) return;
-    setSaving(profile.id);
-    await supabase.from('profiles').update({ brand_book_rate: rate }).eq('id', profile.id);
-    setSaving('');
-    setSaved(profile.id);
-    setTimeout(() => setSaved(s => s === profile.id ? '' : s), 2000);
-  };
-
-  if (externals.length === 0) return null;
-
-  return (
-    <div className="card" style={{ marginTop: 24 }}>
-      <div className="card-title" style={{ marginBottom: 4 }}>Subcontractor Rates</div>
-      <div style={{ fontSize: 12, color: 'var(--text-muted)', marginBottom: 16 }}>Brand book rate per completed task, used to calculate invoices.</div>
-      <div style={{ display: 'grid', gap: 10 }}>
-        {externals.map(profile => (
-          <div key={profile.id} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '10px 14px', border: '1px solid var(--border)', borderRadius: 8, background: 'var(--card-bg-2)' }}>
-            <div style={{ flex: 1, fontSize: 13, fontWeight: 600, color: 'var(--text-primary)' }}>{profile.name || profile.email}</div>
-            <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
-              <span style={{ fontSize: 12, color: 'var(--text-muted)' }}>$/task</span>
-              <input
-                type="number"
-                min="0"
-                step="0.01"
-                value={rates[profile.id] ?? '60'}
-                onChange={e => setRates(r => ({ ...r, [profile.id]: e.target.value }))}
-                style={{ width: 80, fontSize: 13, padding: '4px 8px', borderRadius: 6, border: '1px solid var(--border)', background: 'var(--input-bg)', color: 'var(--text-primary)', textAlign: 'right' }}
-              />
-              <button
-                className="btn btn-outline btn-sm"
-                disabled={saving === profile.id}
-                onClick={() => handleSave(profile)}
-              >
-                {saving === profile.id ? 'Saving...' : saved === profile.id ? '✓ Saved' : 'Save'}
-              </button>
-            </div>
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-}
-
-function ExternalDashboard({ currentUser, projects, tasks, pos }) {
-  const activeTasks = tasks.filter(t => t.status !== 'client_approved');
-  const completedTasks = tasks.filter(t => t.status === 'client_approved');
-  const unpaidAmount = pos.filter(p => !['paid', 'cancelled'].includes(p.status)).reduce((s, p) => s + Number(p.amount || 0), 0);
-  const paidAmount = pos.filter(p => p.status === 'paid').reduce((s, p) => s + Number(p.amount || 0), 0);
-
-  return (
-    <Layout>
-      <div className="page-header">
-        <div>
-          <div className="page-title">Welcome back, {currentUser?.name?.split(' ')[0]}</div>
-          <div className="page-subtitle">Your assigned projects.</div>
-        </div>
-      </div>
-
-      <div className="stats-grid" style={{ marginBottom: 24 }}>
-        <div className="stat-card stat-card-highlight">
-          <div className="stat-value">{activeTasks.length}</div>
-          <div className="stat-label">Active Tasks</div>
-        </div>
-        <div className="stat-card">
-          <div className="stat-value">{completedTasks.length}</div>
-          <div className="stat-label">Completed Tasks</div>
-        </div>
-        <div className="stat-card">
-          <div className="stat-value" style={{ color: unpaidAmount > 0 ? 'var(--accent)' : undefined }}>
-            ${unpaidAmount.toFixed(2)}
-          </div>
-          <div className="stat-label">Unpaid Invoices</div>
-        </div>
-        <div className="stat-card">
-          <div className="stat-value">${paidAmount.toFixed(2)}</div>
-          <div className="stat-label">Paid Invoices</div>
-        </div>
-      </div>
-
-      {projects.length === 0 ? (
-        <div className="empty-state">
-          <div className="empty-state-icon">📋</div>
-          <h3>No projects assigned yet</h3>
-          <p>Your team lead will assign you to projects.</p>
-        </div>
-      ) : (
-        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
-          <div>
-            <div className="card-title">Active Jobs</div>
-            {activeTasks.length === 0 ? (
-              <div style={{ padding: '24px 16px', textAlign: 'center', color: 'var(--text-muted)', fontSize: 13, background: 'var(--card-bg)', borderRadius: 8, border: '1px solid var(--border)' }}>
-                No active jobs
-              </div>
-            ) : (
-              projects.map(project => {
-                const projectTasks = activeTasks.filter(t => t.project_id === project.id);
-                if (projectTasks.length === 0) return null;
-                return <ProjectGroup key={project.id} project={project} tasks={projectTasks} />;
-              })
-            )}
-          </div>
-          <div>
-            <div className="card-title">Completed</div>
-            {completedTasks.length === 0 ? (
-              <div style={{ padding: '24px 16px', textAlign: 'center', color: 'var(--text-muted)', fontSize: 13, background: 'var(--card-bg)', borderRadius: 8, border: '1px solid var(--border)' }}>
-                No completed jobs yet
-              </div>
-            ) : (
-              projects.map(project => {
-                const projectTasks = completedTasks.filter(t => t.project_id === project.id);
-                if (projectTasks.length === 0) return null;
-                return <ProjectGroup key={project.id} project={project} tasks={projectTasks} />;
-              })
-            )}
-          </div>
-        </div>
-      )}
-    </Layout>
-  );
-}
-
-export default function Dashboard() {
-  const { currentUser } = useAuth();
-  const isExternal = currentUser?.role === 'external';
-  const cacheKey = isExternal ? 'team_dashboard_external' : 'team_dashboard';
-  const cached = readPageCache(cacheKey, 5 * 60_000);
-  const [tasks, setTasks] = useState(() => cached?.tasks || []);
-  const [projects, setProjects] = useState(() => cached?.projects || []);
-  const [submissions, setSubmissions] = useState(() => cached?.submissions || []);
-  const [pos, setPos] = useState(() => cached?.pos || []);
-  const [externalProfiles, setExternalProfiles] = useState(() => cached?.externalProfiles || []);
-  const [loading, setLoading] = useState(() => !cached);
-
-  useEffect(() => {
-    async function load() {
-      try {
-        if (isExternal) {
-          const [{ data: p }, { data: t }, { data: posData }] = await withTimeout(Promise.all([
-            supabase.from('projects').select('id, name').order('created_at', { ascending: false }),
-            supabase.from('tasks').select('id, title, status, current_version, project_id').order('submitted_at', { ascending: false }),
-            supabase.from('subcontractor_payments').select('id, amount, status').eq('profile_id', currentUser.id),
-          ]), 12000, 'Dashboard load');
-          setProjects(p || []);
-          setTasks(t || []);
-          setPos(posData || []);
-          setSubmissions([]);
-          writePageCache(cacheKey, { projects: p || [], tasks: t || [], submissions: [], pos: posData || [], externalProfiles: [] });
-        } else {
-          const [{ data: t }, { data: p }, { data: submissions }, { data: profiles }] = await withTimeout(Promise.all([
-            supabase.from('tasks').select('id, title, status, current_version, project_id, assigned_name, assigned_to, completed_at').order('submitted_at', { ascending: false }),
-            supabase.from('projects').select('id, name, status, company_id'),
-            supabase.from('submissions').select('task_id, version_number, deadline, type, submitted_by, submitted_by_name, delivery:deliveries(sent_by, sent_at)').order('version_number', { ascending: false }),
-            supabase.from('profiles').select('id, role, name, email, brand_book_rate'),
-          ]), 12000, 'Dashboard load');
-
-          const roleByProfileId = new Map((profiles || []).map(profile => [profile.id, profile.role]));
-          const roleByProfileName = new Map((profiles || []).map(profile => [profile.name, profile.role]));
-
-          const tasksWithDeadlines = (t || []).map(task => ({
-            ...task,
-            deadline: getDeadlineSourceSubmission(task, submissions)?.deadline || null,
-            assignee_role: roleByProfileId.get(task.assigned_to) || null,
-          }));
-
-          const submissionsWithRole = (submissions || []).map(submission => ({
-            ...submission,
-            submitter_role: roleByProfileId.get(submission.submitted_by) || null,
-            delivery_sender_role: roleByProfileName.get(submission.delivery?.sent_by) || null,
-          }));
-
-          const externals = (profiles || []).filter(pr => pr.role === 'external');
-          setTasks(tasksWithDeadlines);
-          setProjects(p || []);
-          setExternalProfiles(externals);
-          writePageCache(cacheKey, { tasks: tasksWithDeadlines, projects: p || [], submissions: submissionsWithRole, pos: [], externalProfiles: externals });
-          setSubmissions(submissionsWithRole);
-        }
-      } catch (error) {
-        console.error('Dashboard load failed:', error);
-      }
-      setLoading(false);
-    }
-    load();
-  }, [cacheKey, isExternal]);
-
-  if (loading) return <Layout><p style={{ padding: 24, color: 'var(--text-muted)' }}>Loading...</p></Layout>;
-
-  if (isExternal) {
-    return <ExternalDashboard currentUser={currentUser} projects={projects} tasks={tasks} pos={pos} />;
-  }
-
-  const activeTasks = tasks.filter(t => t.status !== 'client_approved');
-  const inProgressTasks = tasks.filter(t => t.status === 'in_progress');
-  const notStartedTasks = tasks.filter(t => t.status === 'not_started');
-  const onHoldTasks = tasks.filter(t => t.status === 'on_hold');
-  const reviewTasks = tasks.filter(t => t.status === 'client_review');
-  const upcomingDeadlineTasks = [...tasks]
-    .filter(task => task.deadline && task.status !== 'client_approved')
-    .sort((a, b) => parseDateOnly(a.deadline) - parseDateOnly(b.deadline))
-    .slice(0, 6);
-  const assignedToMeTasks = [...tasks]
-    .filter(task => task.assigned_to === currentUser?.id && task.status !== 'client_approved')
-    .sort((a, b) => {
-      const aDate = parseDateOnly(a.deadline);
-      const bDate = parseDateOnly(b.deadline);
-      if (aDate && bDate) return aDate - bDate;
-      if (aDate) return -1;
-      if (bDate) return 1;
-      return 0;
-    })
-    .slice(0, 6);
-  const teamOutputTasks = tasks.filter(task => task.assignee_role !== 'external');
-  const subcontractorOutputTasks = tasks.filter(task => task.assignee_role === 'external');
-  const teamTaskPeople = buildTaskPeople(teamOutputTasks);
-  const subcontractorTaskPeople = buildTaskPeople(subcontractorOutputTasks);
-  const teamRevisionPeople = buildRevisionPeople(submissions, tasks, null);
-  const subcontractorRevisionPeople = buildRevisionPeople(submissions, tasks, 'external');
-  return (
-    <Layout>
-      <div className="page-header">
-        <div>
-          <div className="page-title">Welcome back, {currentUser?.name?.split(' ')[0]}</div>
-          <div className="page-subtitle">Here's what's happening across your projects.</div>
-        </div>
-      </div>
-
-      <div className="stats-grid">
-        <div className="stat-card stat-card-highlight">
-          <div className="stat-icon">⚡</div>
-          <div className="stat-value">{activeTasks.length}</div>
-          <div className="stat-label">Active Jobs</div>
-        </div>
-        <div className="stat-card">
-          <div className="stat-icon">⏹</div>
-          <div className="stat-value">{notStartedTasks.length}</div>
-          <div className="stat-label">Not Started</div>
-        </div>
-        <div className="stat-card">
-          <div className="stat-icon">▶</div>
-          <div className="stat-value">{inProgressTasks.length}</div>
-          <div className="stat-label">In Progress</div>
-        </div>
-        <div className="stat-card">
-          <div className="stat-icon">⏸</div>
-          <div className="stat-value">{onHoldTasks.length}</div>
-          <div className="stat-label">On Hold</div>
-        </div>
-        <div className="stat-card">
-          <div className="stat-icon">🕓</div>
-          <div className="stat-value">{reviewTasks.length}</div>
-          <div className="stat-label">Awaiting Client Review</div>
-        </div>
-      </div>
-
-      <div style={{ marginTop: 24 }}>
-        <OutputCharts
-          title="Completed By Team Member"
-          subtitle="Completed-task output by team assignee, with revisions counted by the person who submitted them."
-          taskPeople={teamTaskPeople}
-          revisionPeople={teamRevisionPeople}
-        />
-      </div>
-
-      <div style={{ marginTop: 24 }}>
-        <OutputCharts
-          title="Completed By Subcontractor"
-          subtitle="Completed-task output by subcontractor assignee, with revisions counted by the person who submitted them."
-          taskPeople={subcontractorTaskPeople}
-          revisionPeople={subcontractorRevisionPeople}
-        />
-      </div>
-
-      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24, marginTop: 24 }}>
-        <TaskListCard
-          title="Deadlines"
-          subtitle="Upcoming due dates across active work."
-          tasks={upcomingDeadlineTasks}
-          projects={projects}
-          emptyMessage="No active deadlines right now."
-        />
-        <TaskListCard
-          title="Assigned To You"
-          subtitle="Your active jobs, sorted by deadline."
-          tasks={assignedToMeTasks}
-          projects={projects}
-          emptyMessage="Nothing is assigned to you right now."
-        />
-      </div>
-
-      <SubcontractorRates externals={externalProfiles} />
-
-    </Layout>
-  );
-}
diff --git a/src/pages/team/FileSharing.jsx b/src/pages/team/FileSharing.jsx
index 1345412..56ecc61 100644
--- a/src/pages/team/FileSharing.jsx
+++ b/src/pages/team/FileSharing.jsx
@@ -1,540 +1,16 @@
-import { useEffect, useMemo, useRef, useState } from 'react';
 import Layout from '../../components/Layout';
-import LoadingButton from '../../components/LoadingButton';
-import { supabase } from '../../lib/supabase';
-import { useAuth } from '../../context/AuthContext';
-import { syncSeafileFolders } from '../../lib/seafileFolders';
-
-function formatBytes(bytes) {
-  const value = Number(bytes || 0);
-  if (!value) return '—';
-  const units = ['B', 'KB', 'MB', 'GB', 'TB'];
-  const index = Math.min(Math.floor(Math.log(value) / Math.log(1024)), units.length - 1);
-  return `${(value / (1024 ** index)).toFixed(index === 0 ? 0 : 1)} ${units[index]}`;
-}
-
-function formatDate(timestamp) {
-  if (!timestamp) return '—';
-  const millis = Number(timestamp) * 1000;
-  if (!Number.isFinite(millis)) return '—';
-  return new Date(millis).toLocaleDateString();
-}
-
-function pathParts(path) {
-  return String(path || '/').split('/').filter(Boolean);
-}
-
-function pathTo(index, parts) {
-  return `/${parts.slice(0, index + 1).join('/')}`;
-}
+import FileBrowser from '../../components/FileBrowser';
 
 export default function FileSharing() {
-  const { currentUser } = useAuth();
-  const [currentPath, setCurrentPath] = useState('/');
-  const [entries, setEntries] = useState([]);
-  const [configured, setConfigured] = useState(true);
-  const [parentPath, setParentPath] = useState('/');
-  const [loading, setLoading] = useState(true);
-  const [working, setWorking] = useState('');
-  const [dragging, setDragging] = useState(false);
-  const [error, setError] = useState('');
-  const [folderName, setFolderName] = useState('');
-  const [showFolderInput, setShowFolderInput] = useState(false);
-  const [movingEntry, setMovingEntry] = useState(null);
-  const [renamingEntry, setRenamingEntry] = useState(null);
-  const [renameValue, setRenameValue] = useState('');
-  const [draggedEntry, setDraggedEntry] = useState(null);
-  const [dragOverFolder, setDragOverFolder] = useState(null);
-  const [uploadProgress, setUploadProgress] = useState(null);
-  const fileInputRef = useRef(null);
-
-  const breadcrumbs = useMemo(() => pathParts(currentPath), [currentPath]);
-
-  const apiFetch = async (url, options = {}) => {
-    const { data: { session } } = await supabase.auth.getSession();
-    if (!session?.access_token) throw new Error('Your session expired. Please sign in again.');
-
-    const response = await fetch(url, {
-      ...options,
-      headers: {
-        Authorization: `Bearer ${session.access_token}`,
-        ...(options.body instanceof FormData ? {} : { 'Content-Type': 'application/json' }),
-        ...(options.headers || {}),
-      },
-    });
-
-    const data = await response.json().catch(() => ({}));
-    if (!response.ok) throw new Error(data.error || 'File sharing request failed.');
-    return data;
-  };
-
-  const loadFiles = async (path = currentPath, options = {}) => {
-    const { invalidateUsage = false } = options;
-    setLoading(true);
-    setError('');
-    try {
-      const params = new URLSearchParams({ action: 'list', path });
-      if (invalidateUsage) params.set('invalidateUsage', '1');
-
-      const data = await apiFetch(`/api/seafile?${params.toString()}`);
-      setConfigured(data.configured !== false);
-      setEntries(data.entries || []);
-      setCurrentPath(data.path || '/');
-      setParentPath(data.parentPath || '/');
-      if (data.configured === false) setError(data.error || 'Seafile is not configured yet.');
-    } catch (err) {
-      setError(err.message);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  useEffect(() => {
-    loadFiles('/');
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  const handleSyncFolders = async () => {
-    setWorking('sync');
-    setError('');
-    try {
-      await syncSeafileFolders();
-      await loadFiles(currentPath, { invalidateUsage: true });
-    } catch (err) {
-      setError(err.message);
-    } finally {
-      setWorking('');
-    }
-  };
-
-  const openFolder = (entry) => {
-    if (entry.type === 'dir') loadFiles(entry.path);
-  };
-
-  const downloadFile = async (entry) => {
-    setWorking(`download:${entry.path}`);
-    setError('');
-    try {
-      const data = await apiFetch(`/api/seafile?action=download&path=${encodeURIComponent(entry.path)}`);
-      if (data.url) window.open(data.url, '_blank');
-    } catch (err) {
-      setError(err.message);
-    } finally {
-      setWorking('');
-    }
-  };
-
-  const deleteEntry = async (entry) => {
-    const kind = entry.type === 'dir' ? 'folder' : 'file';
-    if (!window.confirm(`Delete "${entry.name}" ${kind}? This cannot be undone.`)) return;
-
-    setWorking(`delete:${entry.path}`);
-    setError('');
-    try {
-      await apiFetch(`/api/seafile?action=delete&path=${encodeURIComponent(entry.path)}&type=${encodeURIComponent(entry.type)}`, {
-        method: 'DELETE',
-      });
-      await loadFiles(currentPath);
-    } catch (err) {
-      setError(err.message);
-    } finally {
-      setWorking('');
-    }
-  };
-
-  const createFolder = async (e) => {
-    e.preventDefault();
-    if (!folderName.trim()) return;
-
-    setWorking('mkdir');
-    setError('');
-    try {
-      await apiFetch('/api/seafile?action=mkdir', {
-        method: 'POST',
-        body: JSON.stringify({ path: currentPath, name: folderName }),
-      });
-      setFolderName('');
-      setShowFolderInput(false);
-      await loadFiles(currentPath, { invalidateUsage: true });
-    } catch (err) {
-      setError(err.message);
-    } finally {
-      setWorking('');
-    }
-  };
-
-  const renameEntry = async (e) => {
-    e.preventDefault();
-    const newName = renameValue.trim();
-    if (!newName || newName === renamingEntry.name) {
-      setRenamingEntry(null);
-      return;
-    }
-
-    setWorking(`rename:${renamingEntry.path}`);
-    setError('');
-    try {
-      await apiFetch('/api/seafile?action=rename', {
-        method: 'POST',
-        body: JSON.stringify({ path: renamingEntry.path, name: newName, type: renamingEntry.type }),
-      });
-      setRenamingEntry(null);
-      await loadFiles(currentPath);
-    } catch (err) {
-      setError(err.message);
-    } finally {
-      setWorking('');
-    }
-  };
-
-  const startRename = (entry) => {
-    setMovingEntry(null);
-    setRenamingEntry(entry);
-    setRenameValue(entry.name);
-  };
-
-  const uploadFiles = async (files) => {
-    const selected = Array.from(files || []);
-    if (!selected.length) return;
-
-    setWorking('upload');
-    setUploadProgress(0);
-    setError('');
-    try {
-      const data = await apiFetch('/api/seafile?action=upload-link', {
-        method: 'POST',
-        body: JSON.stringify({ path: currentPath }),
-      });
-
-      if (!data.uploadLink || !data.parentDir) throw new Error('Seafile did not return an upload link.');
-
-      const formData = new FormData();
-      selected.forEach(file => formData.append('file', file));
-      formData.append('parent_dir', data.parentDir);
-      formData.append('replace', '0');
-
-      await new Promise((resolve, reject) => {
-        const xhr = new XMLHttpRequest();
-        const url = `${data.uploadLink}${data.uploadLink.includes('?') ? '&' : '?'}ret-json=1`;
-        xhr.open('POST', url);
-        xhr.upload.onprogress = (e) => {
-          if (e.lengthComputable) setUploadProgress(Math.round((e.loaded / e.total) * 100));
-        };
-        xhr.onload = () => {
-          if (xhr.status >= 200 && xhr.status < 300) resolve();
-          else reject(new Error(xhr.responseText || 'Upload failed.'));
-        };
-        xhr.onerror = () => reject(new Error('Upload failed.'));
-        xhr.send(formData);
-      });
-
-      await loadFiles(currentPath);
-    } catch (err) {
-      setError(err.message);
-    } finally {
-      setWorking('');
-      setUploadProgress(null);
-      if (fileInputRef.current) fileInputRef.current.value = '';
-      setDragging(false);
-    }
-  };
-
-  const moveEntry = async (entry, targetFolderPath) => {
-    setWorking(`move:${entry.path}`);
-    setError('');
-    try {
-      await apiFetch('/api/seafile?action=move', {
-        method: 'POST',
-        body: JSON.stringify({ srcPath: entry.path, dstDir: targetFolderPath, type: entry.type }),
-      });
-      setMovingEntry(null);
-      await loadFiles(currentPath);
-    } catch (err) {
-      setError(err.message);
-    } finally {
-      setWorking('');
-    }
-  };
-
-  // Section-level drag handlers (OS file upload)
-  const handleDragEnter = (e) => {
-    e.preventDefault();
-    if (!configured || loading || working || draggedEntry) return;
-    setDragging(true);
-  };
-
-  const handleDragOver = (e) => {
-    e.preventDefault();
-    if (!configured || loading || working || draggedEntry) return;
-    e.dataTransfer.dropEffect = 'copy';
-    setDragging(true);
-  };
-
-  const handleDragLeave = (e) => {
-    e.preventDefault();
-    if (!e.currentTarget.contains(e.relatedTarget)) setDragging(false);
-  };
-
-  const handleDrop = (e) => {
-    e.preventDefault();
-    setDragging(false);
-    if (draggedEntry) return;
-    if (!configured || loading || working) return;
-    if (!e.dataTransfer.files?.length) return;
-    uploadFiles(e.dataTransfer.files);
-  };
-
-  // Row drag handlers (entry-to-folder move)
-  const handleRowDragStart = (e, entry) => {
-    e.stopPropagation();
-    setDraggedEntry(entry);
-    e.dataTransfer.effectAllowed = 'move';
-  };
-
-  const handleRowDragEnd = () => {
-    setDraggedEntry(null);
-    setDragOverFolder(null);
-  };
-
-  const handleFolderDragOver = (e, folder) => {
-    if (!draggedEntry || draggedEntry.path === folder.path) return;
-    e.preventDefault();
-    e.stopPropagation();
-    e.dataTransfer.dropEffect = 'move';
-    setDragOverFolder(folder.path);
-  };
-
-  const handleFolderDragLeave = (e) => {
-    if (!e.currentTarget.contains(e.relatedTarget)) setDragOverFolder(null);
-  };
-
-  const handleFolderDrop = (e, folder) => {
-    e.preventDefault();
-    e.stopPropagation();
-    setDragOverFolder(null);
-    if (!draggedEntry || draggedEntry.path === folder.path) return;
-    const entry = draggedEntry;
-    setDraggedEntry(null);
-    moveEntry(entry, folder.path);
-  };
-
   return (
     <Layout>
       <div className="page-header">
         <div>
           <div className="page-title">File Sharing</div>
-          <div className="page-subtitle">Shared Seafile workspace for team members and subcontractors.</div>
+          <div className="page-subtitle">Shared workspace for team members and subcontractors.</div>
         </div>
       </div>
-
-      <section
-        className={`file-browser${dragging ? ' file-browser-dragging' : ''}`}
-        onDragEnter={handleDragEnter}
-        onDragOver={handleDragOver}
-        onDragLeave={handleDragLeave}
-        onDrop={handleDrop}
-      >
-        {(loading || working || uploadProgress !== null) && (
-          <div className="file-browser-progress">
-            <div
-              className={`file-browser-progress-bar${uploadProgress === null ? ' indeterminate' : ''}`}
-              style={uploadProgress !== null ? { width: `${uploadProgress}%` } : undefined}
-            />
-          </div>
-        )}
-
-        {dragging && (
-          <div className="file-drop-overlay">
-            <div className="file-drop-panel">
-              <div className="file-drop-icon">↑</div>
-              <div className="file-drop-title">Drop files to upload</div>
-              <div className="file-drop-subtitle">Files will be added to the current folder.</div>
-            </div>
-          </div>
-        )}
-
-        <div className="file-browser-toolbar">
-          <div className="file-browser-breadcrumbs">
-            <button type="button" onClick={() => loadFiles('/')} className="file-breadcrumb">Files</button>
-            {breadcrumbs.map((part, index) => (
-              <button type="button" key={`${part}-${index}`} onClick={() => loadFiles(pathTo(index, breadcrumbs))} className="file-breadcrumb">
-                {part}
-              </button>
-            ))}
-          </div>
-
-          <div className="file-browser-actions">
-            {currentUser?.role === 'team' && (
-              <LoadingButton className="btn btn-outline btn-sm" loading={working === 'sync'} disabled={loading || Boolean(working)} loadingText="Syncing..." onClick={handleSyncFolders}>
-                Sync Folders
-              </LoadingButton>
-            )}
-            {showFolderInput ? (
-              <form style={{ display: 'flex', gap: 6 }} onSubmit={createFolder}>
-                <input
-                  type="text"
-                  value={folderName}
-                  onChange={(e) => setFolderName(e.target.value)}
-                  placeholder="Folder name"
-                  autoFocus
-                  disabled={!configured || loading || Boolean(working)}
-                  style={{ fontSize: 13, padding: '4px 8px', borderRadius: 6, border: '1px solid var(--border)', background: 'var(--input-bg)', color: 'var(--text-primary)', width: 160 }}
-                />
-                <LoadingButton type="submit" className="btn btn-outline btn-sm" loading={working === 'mkdir'} disabled={!folderName.trim() || !configured || loading || Boolean(working)} loadingText="Creating...">
-                  Create
-                </LoadingButton>
-                <button type="button" className="btn btn-outline btn-sm" onClick={() => { setShowFolderInput(false); setFolderName(''); }}>Cancel</button>
-              </form>
-            ) : (
-              <button className="btn btn-outline btn-sm" disabled={!configured || loading || Boolean(working)} onClick={() => setShowFolderInput(true)}>
-                + New Folder
-              </button>
-            )}
-            <LoadingButton className="btn btn-outline btn-sm" loading={loading} disabled={Boolean(working)} loadingText="Refreshing..." onClick={() => loadFiles(currentPath)}>
-              ⟳ Refresh
-            </LoadingButton>
-            <input
-              ref={fileInputRef}
-              type="file"
-              multiple
-              className="file-upload-input"
-              onChange={(e) => uploadFiles(e.target.files)}
-            />
-            <LoadingButton className="btn btn-primary btn-sm" loading={working === 'upload'} disabled={!configured || loading || Boolean(working)} loadingText="Uploading..." onClick={() => fileInputRef.current?.click()}>
-              ↑ Upload
-            </LoadingButton>
-          </div>
-        </div>
-
-        {error && <div className="notification notification-info">{error}</div>}
-
-        {draggedEntry && (
-          <div style={{ padding: '6px 12px', fontSize: 12, color: 'var(--text-muted)' }}>
-            Dragging "{draggedEntry.name}" — drop onto a folder to move it
-          </div>
-        )}
-
-        <div className="file-list">
-          {currentPath !== '/' && (
-            <button type="button" className="file-row file-row-button" onClick={() => loadFiles(parentPath)} disabled={loading || Boolean(working)}>
-              <span className="file-icon">↰</span>
-              <span className="file-name">Up one folder</span>
-              <span className="file-meta">—</span>
-              <span className="file-meta">—</span>
-              <span>Actions</span>
-            </button>
-          )}
-
-          <div className="file-row file-row-head">
-            <span />
-            <span>Name</span>
-            <span>Size</span>
-            <span>Modified</span>
-            <span />
-          </div>
-
-          {loading ? (
-            <div className="empty-state">Loading files...</div>
-          ) : entries.length === 0 ? (
-            <div className="empty-state">
-              <h3>No files here yet</h3>
-              <p>Upload files or create a folder to start this workspace.</p>
-            </div>
-          ) : entries.map(entry => {
-            const isMoving = movingEntry?.path === entry.path;
-            const isRenaming = renamingEntry?.path === entry.path;
-            const targetFolders = entries.filter(e => e.type === 'dir' && e.path !== entry.path);
-            const isDragTarget = entry.type === 'dir' && draggedEntry && draggedEntry.path !== entry.path;
-            const isDragOver = dragOverFolder === entry.path;
-
-            return (
-              <div
-                className={`file-row${isDragOver ? ' file-row-drag-over' : ''}`}
-                key={`${entry.type}:${entry.path}`}
-                draggable={!working}
-                onDragStart={(e) => handleRowDragStart(e, entry)}
-                onDragEnd={handleRowDragEnd}
-                onDragOver={isDragTarget ? (e) => handleFolderDragOver(e, entry) : undefined}
-                onDragLeave={isDragTarget ? handleFolderDragLeave : undefined}
-                onDrop={isDragTarget ? (e) => handleFolderDrop(e, entry) : undefined}
-                style={isDragOver ? { outline: '2px solid var(--accent)', borderRadius: 6 } : undefined}
-              >
-                <span className="file-icon">{entry.type === 'dir' ? '▣' : '□'}</span>
-                {isRenaming ? (
-                  <form style={{ display: 'flex', gap: 6, flex: 1 }} onSubmit={renameEntry}>
-                    <input
-                      type="text"
-                      value={renameValue}
-                      onChange={(e) => setRenameValue(e.target.value)}
-                      autoFocus
-                      disabled={Boolean(working)}
-                      style={{ fontSize: 13, padding: '2px 8px', borderRadius: 6, border: '1px solid var(--border)', background: 'var(--input-bg)', color: 'var(--text-primary)', flex: 1, minWidth: 0 }}
-                      onKeyDown={(e) => { if (e.key === 'Escape') setRenamingEntry(null); }}
-                    />
-                    <LoadingButton type="submit" className="btn btn-outline btn-sm" loading={working === `rename:${entry.path}`} disabled={!renameValue.trim() || Boolean(working)} loadingText="Renaming...">
-                      Save
-                    </LoadingButton>
-                    <button type="button" className="btn btn-outline btn-sm" onClick={() => setRenamingEntry(null)}>Cancel</button>
-                  </form>
-                ) : entry.type === 'dir' ? (
-                  <button type="button" className="file-name file-name-button" onClick={() => openFolder(entry)} disabled={Boolean(working)}>
-                    {entry.name}
-                  </button>
-                ) : (
-                  <span className="file-name">{entry.name}</span>
-                )}
-                {!isRenaming && (
-                  <>
-                    <span className="file-meta">{formatBytes(entry.aggregateSize ?? entry.size)}</span>
-                    <span className="file-meta">{formatDate(entry.mtime)}</span>
-                    <span className="file-row-actions">
-                      {isMoving ? (
-                        <>
-                          <span style={{ fontSize: 11, color: 'var(--text-muted)', whiteSpace: 'nowrap' }}>Move to:</span>
-                          {targetFolders.length === 0 ? (
-                            <span style={{ fontSize: 11, color: 'var(--text-muted)' }}>No folders here</span>
-                          ) : targetFolders.map(folder => (
-                            <LoadingButton
-                              key={folder.path}
-                              className="btn btn-outline btn-sm"
-                              loading={working === `move:${entry.path}`}
-                              disabled={Boolean(working)}
-                              loadingText="Moving..."
-                              onClick={() => moveEntry(entry, folder.path)}
-                            >
-                              {folder.name}
-                            </LoadingButton>
-                          ))}
-                          <button type="button" className="btn btn-outline btn-sm" onClick={() => setMovingEntry(null)} disabled={Boolean(working)}>✕</button>
-                        </>
-                      ) : (
-                        <>
-                          {entry.type === 'file' && (
-                            <LoadingButton className="btn btn-outline btn-sm" loading={working === `download:${entry.path}`} disabled={Boolean(working)} loadingText="Opening..." onClick={() => downloadFile(entry)}>
-                              Download
-                            </LoadingButton>
-                          )}
-                          <button type="button" className="btn btn-outline btn-sm" disabled={Boolean(working)} onClick={() => startRename(entry)}>
-                            Rename
-                          </button>
-                          {targetFolders.length > 0 && (
-                            <button type="button" className="btn btn-outline btn-sm" disabled={Boolean(working)} onClick={() => { setRenamingEntry(null); setMovingEntry(entry); }}>
-                              Move
-                            </button>
-                          )}
-                          <LoadingButton className="btn btn-danger btn-sm" loading={working === `delete:${entry.path}`} disabled={Boolean(working)} loadingText="Deleting..." onClick={() => deleteEntry(entry)}>
-                            Delete
-                          </LoadingButton>
-                        </>
-                      )}
-                    </span>
-                  </>
-                )}
-              </div>
-            );
-          })}
-        </div>
-      </section>
+      <FileBrowser />
     </Layout>
   );
 }
diff --git a/src/pages/team/FourgePasswords.jsx b/src/pages/team/FourgePasswords.jsx
index ccfdb22..9923ea1 100644
--- a/src/pages/team/FourgePasswords.jsx
+++ b/src/pages/team/FourgePasswords.jsx
@@ -326,11 +326,11 @@ export default function FourgePasswords() {
                     <button className="btn btn-outline btn-sm" onClick={() => handleCopy(entry)}>
                       Copy
                     </button>
-                    <button className="btn btn-outline btn-sm" onClick={() => beginEdit(entry)}>
-                      Edit
+                    <button className="btn-icon" title="Edit" onClick={() => beginEdit(entry)}>
+                      <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
                     </button>
-                    <button className="btn btn-outline btn-sm" onClick={() => handleDelete(entry)}>
-                      Delete
+                    <button className="btn-icon btn-icon-danger" title="Delete" onClick={() => handleDelete(entry)}>
+                      ✕
                     </button>
                   </div>
                 </div>
diff --git a/src/pages/team/InvoiceDetail.jsx b/src/pages/team/InvoiceDetail.jsx
index a1e0a7a..edb1143 100644
--- a/src/pages/team/InvoiceDetail.jsx
+++ b/src/pages/team/InvoiceDetail.jsx
@@ -315,7 +315,7 @@ export default function InvoiceDetail() {
         <div>
           <div className="page-title">{invoice.invoice_number}</div>
           <div className="page-subtitle">
-            <Link to={`/companies/${company?.id}`} style={{ color: 'var(--accent)' }}>{company?.name}</Link>
+            <Link to={`/company/${company?.id}`} style={{ color: 'var(--accent)' }}>{company?.name}</Link>
           </div>
         </div>
         <div className="action-buttons">
@@ -340,7 +340,7 @@ export default function InvoiceDetail() {
           <div className="card-title">Bill To</div>
           <div style={{ fontSize: 15, fontWeight: 700 }}>{invoice.bill_to || company?.name}</div>
           <div style={{ marginTop: 12 }}>
-            <Link to={`/companies/${company?.id}`} className="btn btn-outline btn-sm">View Company</Link>
+            <Link to={`/company/${company?.id}`} className="btn btn-outline btn-sm">View Company</Link>
           </div>
         </div>
         <div className="card">
@@ -490,7 +490,7 @@ export default function InvoiceDetail() {
               </LoadingButton>
             </>
           )}
-          <button className="btn btn-danger" onClick={handleDelete} disabled={saving}>Delete Invoice</button>
+          <button className="btn-icon btn-icon-danger" title="Delete Invoice" onClick={handleDelete} disabled={saving}>✕</button>
         </div>
       </div>
     </Layout>
diff --git a/src/pages/team/Invoices.jsx b/src/pages/team/Invoices.jsx
index 808b546..4c1984d 100644
--- a/src/pages/team/Invoices.jsx
+++ b/src/pages/team/Invoices.jsx
@@ -1,6 +1,8 @@
 import { useState, useEffect } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
 import Layout from '../../components/Layout';
+import SortTh from '../../components/SortTh';
+import { useSortable } from '../../hooks/useSortable';
 import { supabase } from '../../lib/supabase';
 import { readPageCache, writePageCache } from '../../lib/pageCache';
 import { exportCPAPackage, generateSubcontractorPOPDF } from '../../lib/invoice';
@@ -53,6 +55,9 @@ export default function Invoices() {
   const [loading, setLoading] = useState(() => !cached);
   const [activeTab, setActiveTab] = useState(() => location.state?.tab || 'invoices');
   const [filter, setFilter] = useState('all');
+  const { sortKey: invSortKey, sortDir: invSortDir, toggle: invToggle, sort: invSort } = useSortable('invoice_date');
+  const { sortKey: expSortKey, sortDir: expSortDir, toggle: expToggle, sort: expSort } = useSortable('date');
+  const { sortKey: subSortKey, sortDir: subSortDir, toggle: subToggle, sort: subSort } = useSortable('submitted_at');
   const [filterCompany, setFilterCompany] = useState('');
   const [exportYear, setExportYear] = useState(new Date().getFullYear());
   const [exporting, setExporting] = useState(false);
@@ -507,27 +512,18 @@ export default function Invoices() {
         </div>
       </div>
 
-      <div style={{ marginBottom: 20, display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, flexWrap: 'wrap' }}>
-        <div style={{ display: 'flex', gap: 4, flexWrap: 'wrap' }}>
-          {[
-            { id: 'invoices', label: 'Invoices' },
-            { id: 'sub-invoices', label: 'Subcontractor Invoices' },
-            { id: 'expenses', label: 'Expenses' },
-          ].map(tab => (
-            <button
-              key={tab.id}
-              type="button"
-              className={`tab-btn${activeTab === tab.id ? ' active' : ''}`}
-              onClick={() => setActiveTab(tab.id)}
-            >
-              {tab.label}
-            </button>
-          ))}
-        </div>
-        {activeTab === 'invoices' && (
-          <button className="btn btn-primary btn-sm" onClick={() => navigate('/invoices/new')}>+ New Invoice</button>
+      <div style={{ display: 'flex', gap: 12, marginBottom: 16, flexWrap: 'wrap' }}>
+        {companyNames.length > 0 && (
+          <select className="filter-select" value={filterCompany} onChange={e => setFilterCompany(e.target.value)}>
+            <option value="">All Companies</option>
+            {companyNames.map(name => <option key={name} value={name}>{name}</option>)}
+          </select>
         )}
-
+        <select className="filter-select" value={activeTab} onChange={e => setActiveTab(e.target.value)}>
+          <option value="invoices">Invoices</option>
+          <option value="sub-invoices">Subcontractor Invoices</option>
+          <option value="expenses">Expenses</option>
+        </select>
       </div>
 
       {activeTab === 'invoices' && (
@@ -535,71 +531,48 @@ export default function Invoices() {
 
         {/* ── Invoices ── */}
         <div>
-          <div className="card request-toolbar-card" style={{ marginBottom: 16 }}>
-            <div className="request-toolbar-section">
-              <div className="card-title" style={{ marginBottom: 10 }}>Filter by Status</div>
-              <div className="request-toolbar-actions">
-                {['all', 'draft', 'sent', 'paid'].map(s => (
-                  <button
-                    key={s}
-                    onClick={() => setFilter(s)}
-                    className={`btn btn-sm ${filter === s ? 'btn-primary' : 'btn-outline'}`}
-                    style={{ textTransform: 'capitalize' }}
-                  >
-                    {s}
-                  </button>
-                ))}
-              </div>
-            </div>
-            {companyNames.length > 0 && (
-              <div className="request-toolbar-grid">
-                <div className="request-toolbar-section">
-                  <div className="card-title" style={{ marginBottom: 10 }}>Filter by Company</div>
-                  <div className="request-filter-row">
-                    <button
-                      onClick={() => setFilterCompany('')}
-                      className={`btn btn-sm ${!filterCompany ? 'btn-primary' : 'btn-outline'}`}
-                    >
-                      All
-                    </button>
-                    {companyNames.map(name => (
-                      <button
-                        key={name}
-                        onClick={() => setFilterCompany(current => current === name ? '' : name)}
-                        className={`btn btn-sm ${filterCompany === name ? 'btn-primary' : 'btn-outline'}`}
-                      >
-                        {name}
-                      </button>
-                    ))}
-                  </div>
-                </div>
-              </div>
-            )}
-          </div>
-
           {loading ? (
             <p style={{ color: 'var(--text-muted)' }}>Loading...</p>
-          ) : filtered.length === 0 ? (
-            <div className="empty-state">
-              <h3>No invoices</h3>
-              <p>Create your first invoice to get started.</p>
-              <button className="btn btn-primary" style={{ marginTop: 16 }} onClick={() => navigate('/invoices/new')}>+ New Invoice</button>
-            </div>
           ) : (
-            <div className="table-wrapper">
+            <div className="card">
+              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, marginBottom: 16, flexWrap: 'wrap' }}>
+                <div style={{ display: 'flex', gap: 4, flexWrap: 'wrap' }}>
+                  {[
+                    { id: 'all', label: 'All' },
+                    { id: 'draft', label: 'Draft' },
+                    { id: 'sent', label: 'Sent' },
+                    { id: 'paid', label: 'Paid' },
+                  ].map(s => (
+                    <button key={s.id} type="button" className={`tab-btn${filter === s.id ? ' active' : ''}`} onClick={() => setFilter(s.id)}>{s.label}</button>
+                  ))}
+                </div>
+                <button className="btn btn-primary btn-sm" onClick={() => navigate('/invoices/new')}>+ New Invoice</button>
+              </div>
+              {filtered.length === 0 ? (
+                <div className="empty-state">
+                  <h3>No invoices</h3>
+                  <p>Create your first invoice to get started.</p>
+                  <button className="btn btn-primary" style={{ marginTop: 16 }} onClick={() => navigate('/invoices/new')}>+ New Invoice</button>
+                </div>
+              ) : (
+              <div className="table-wrapper">
               <table>
                 <thead>
                   <tr>
-                    <th>Invoice #</th>
-                    <th>Bill To</th>
-                    <th>Date</th>
-                    <th>Due</th>
-                    <th>Status</th>
-                    <th>Total</th>
+                    <SortTh col="invoice_number" sortKey={invSortKey} sortDir={invSortDir} onSort={invToggle}>Invoice #</SortTh>
+                    <SortTh col="bill_to" sortKey={invSortKey} sortDir={invSortDir} onSort={invToggle}>Bill To</SortTh>
+                    <SortTh col="invoice_date" sortKey={invSortKey} sortDir={invSortDir} onSort={invToggle}>Date</SortTh>
+                    <SortTh col="due_date" sortKey={invSortKey} sortDir={invSortDir} onSort={invToggle}>Due</SortTh>
+                    <SortTh col="status" sortKey={invSortKey} sortDir={invSortDir} onSort={invToggle}>Status</SortTh>
+                    <SortTh col="total" sortKey={invSortKey} sortDir={invSortDir} onSort={invToggle}>Total</SortTh>
                   </tr>
                 </thead>
                 <tbody>
-                  {filtered.map(inv => (
+                  {invSort(filtered, (inv, key) => {
+                    if (key === 'total') return Number(inv.total) || 0;
+                    if (key === 'invoice_date' || key === 'due_date') return new Date(inv[key]).getTime();
+                    return inv[key] || inv.company?.name || '';
+                  }).map(inv => (
                     <tr key={inv.id} onClick={() => navigate(`/invoices/${inv.id}`)} style={{ cursor: 'pointer' }}>
                       <td style={{ fontWeight: 600 }}>{inv.invoice_number}</td>
                       <td style={{ fontWeight: 600 }}>{inv.bill_to || inv.company?.name}</td>
@@ -615,6 +588,8 @@ export default function Invoices() {
                   ))}
                 </tbody>
               </table>
+              </div>
+              )}
             </div>
           )}
         </div>
@@ -622,7 +597,7 @@ export default function Invoices() {
       )}
 
       {activeTab === 'expenses' && (
-      <div style={{ display: 'grid', gridTemplateColumns: '1fr 360px', gap: 24, alignItems: 'start' }}>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
         <div>
           <div className="card" style={{ marginBottom: 16 }}>
             <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, marginBottom: 12 }}>
@@ -630,21 +605,10 @@ export default function Invoices() {
               <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--accent)' }}>${totalExpenses.toFixed(2)}</div>
             </div>
 
-            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, marginBottom: 12 }}>
-              <button
-                onClick={() => setExpenseFilter('all')}
-                className={`btn btn-sm ${expenseFilter === 'all' ? 'btn-primary' : 'btn-outline'}`}
-              >
-                All
-              </button>
+            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 4, marginBottom: 12 }}>
+              <button onClick={() => setExpenseFilter('all')} className={`tab-btn${expenseFilter === 'all' ? ' active' : ''}`}>All</button>
               {CATEGORIES.filter(c => expenses.some(e => e.category === c)).map(c => (
-                <button
-                  key={c}
-                  onClick={() => setExpenseFilter(f => f === c ? 'all' : c)}
-                  className={`btn btn-sm ${expenseFilter === c ? 'btn-primary' : 'btn-outline'}`}
-                >
-                  {c}
-                </button>
+                <button key={c} onClick={() => setExpenseFilter(f => f === c ? 'all' : c)} className={`tab-btn${expenseFilter === c ? ' active' : ''}`}>{c}</button>
               ))}
             </div>
 
@@ -659,16 +623,20 @@ export default function Invoices() {
                 <table>
                   <thead>
                     <tr>
-                      <th>Date</th>
-                      <th>Description</th>
-                      <th>Category</th>
-                      <th>Notes</th>
-                      <th style={{ textAlign: 'right' }}>Amount</th>
+                      <SortTh col="date" sortKey={expSortKey} sortDir={expSortDir} onSort={expToggle}>Date</SortTh>
+                      <SortTh col="description" sortKey={expSortKey} sortDir={expSortDir} onSort={expToggle}>Description</SortTh>
+                      <SortTh col="category" sortKey={expSortKey} sortDir={expSortDir} onSort={expToggle}>Category</SortTh>
+                      <SortTh col="notes" sortKey={expSortKey} sortDir={expSortDir} onSort={expToggle}>Notes</SortTh>
+                      <SortTh col="amount" sortKey={expSortKey} sortDir={expSortDir} onSort={expToggle} style={{ textAlign: 'right' }}>Amount</SortTh>
                       <th style={{ width: 140, textAlign: 'right' }}>Action</th>
                     </tr>
                   </thead>
                   <tbody>
-                    {filteredExpenses.map(exp => (
+                    {expSort(filteredExpenses, (exp, key) => {
+                      if (key === 'amount') return Number(exp.amount) || 0;
+                      if (key === 'date') return exp.date || '';
+                      return exp[key] || '';
+                    }).map(exp => (
                       <tr key={exp.id}>
                         <td>{new Date(exp.date).toLocaleDateString()}</td>
                         <td style={{ fontWeight: 600 }}>{exp.description}</td>
@@ -693,16 +661,18 @@ export default function Invoices() {
                         <td style={{ textAlign: 'right' }}>
                           <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 6 }}>
                             <button
-                              className="btn btn-outline btn-sm"
+                              className="btn-icon"
+                              title="Edit"
                               onClick={() => startEditExpense(exp)}
                             >
-                              Edit
+                              <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
                             </button>
                             <button
-                              className="btn btn-danger btn-sm"
+                              className="btn-icon btn-icon-danger"
+                              title="Delete"
                               onClick={() => handleDeleteExpense(exp.id)}
                             >
-                              Delete
+                              ✕
                             </button>
                           </div>
                         </td>
@@ -858,16 +828,21 @@ export default function Invoices() {
               <table>
                 <thead>
                   <tr>
-                    <th>Invoice #</th>
-                    <th>Subcontractor</th>
-                    <th>Submitted</th>
-                    <th>Status</th>
-                    <th style={{ textAlign: 'right' }}>Total</th>
+                    <SortTh col="invoice_number" sortKey={subSortKey} sortDir={subSortDir} onSort={subToggle}>Invoice #</SortTh>
+                    <SortTh col="subcontractor" sortKey={subSortKey} sortDir={subSortDir} onSort={subToggle}>Subcontractor</SortTh>
+                    <SortTh col="submitted_at" sortKey={subSortKey} sortDir={subSortDir} onSort={subToggle}>Submitted</SortTh>
+                    <SortTh col="status" sortKey={subSortKey} sortDir={subSortDir} onSort={subToggle}>Status</SortTh>
+                    <SortTh col="total" sortKey={subSortKey} sortDir={subSortDir} onSort={subToggle} style={{ textAlign: 'right' }}>Total</SortTh>
                     <th style={{ textAlign: 'right' }}>Actions</th>
                   </tr>
                 </thead>
                 <tbody>
-                  {subInvoices.map(inv => {
+                  {subSort(subInvoices, (inv, key) => {
+                    if (key === 'total') return (inv.items || []).reduce((s, i) => s + Number(i.unit_price || 0) * Number(i.quantity || 1), 0);
+                    if (key === 'subcontractor') return inv.profile?.name || '';
+                    if (key === 'submitted_at') return inv.submitted_at ? new Date(inv.submitted_at).getTime() : 0;
+                    return inv[key] || '';
+                  }).map(inv => {
                     const total = (inv.items || []).reduce((s, i) => s + Number(i.unit_price || 0) * Number(i.quantity || 1), 0);
                     const subInvoiceStatusColor = { draft: 'not_started', submitted: 'in_progress', paid: 'client_approved' };
                     return (
diff --git a/src/pages/team/MeetingNotes.jsx b/src/pages/team/MeetingNotes.jsx
index 4c2525b..87df919 100644
--- a/src/pages/team/MeetingNotes.jsx
+++ b/src/pages/team/MeetingNotes.jsx
@@ -171,13 +171,14 @@ export default function MeetingNotes() {
                         </div>
                       </div>
                       <LoadingButton
-                        className="btn btn-danger btn-sm"
+                        className="btn-icon btn-icon-danger"
                         loading={deletingId === entry.id}
                         disabled={Boolean(deletingId)}
-                        loadingText="Deleting..."
+                        loadingText="..."
+                        title="Delete"
                         onClick={() => handleDelete(entry)}
                       >
-                        Delete
+                        ✕
                       </LoadingButton>
                     </div>
                     <div className="meeting-note-body">{entry.notes}</div>
diff --git a/src/pages/team/ProjectDetail.jsx b/src/pages/team/ProjectDetail.jsx
deleted file mode 100755
index e9ddf2e..0000000
--- a/src/pages/team/ProjectDetail.jsx
+++ /dev/null
@@ -1,507 +0,0 @@
-import { useState, useEffect, useRef } from 'react';
-import { useParams, Link, useNavigate } from 'react-router-dom';
-import Layout from '../../components/Layout';
-import StatusBadge from '../../components/StatusBadge';
-import { supabase } from '../../lib/supabase';
-import { useAuth } from '../../context/AuthContext';
-import { serviceTypes } from '../../data/mockData';
-import { cleanupTaskStorage } from '../../lib/deleteHelpers';
-import { addDaysToDateOnly, getTodayDateOnlyEST } from '../../lib/dates';
-
-const emptyJobForm = () => ({ title: '', serviceType: '', deadline: addDaysToDateOnly(getTodayDateOnlyEST(), 3), description: '', requestedBy: '', isHot: false });
-
-export default function ProjectDetail() {
-  const { id } = useParams();
-  const navigate = useNavigate();
-  const { currentUser } = useAuth();
-
-  const [project, setProject] = useState(null);
-  const [company, setCompany] = useState(null);
-  const [companyUsers, setCompanyUsers] = useState([]);
-  const [tasks, setTasks] = useState([]);
-  const [loading, setLoading] = useState(true);
-
-  const isExternal = currentUser?.role === 'external';
-
-  const [editingName, setEditingName] = useState(false);
-  const [nameVal, setNameVal] = useState('');
-  const [savingName, setSavingName] = useState(false);
-
-  const [showAddJob, setShowAddJob] = useState(false);
-  const [jobForm, setJobForm] = useState(emptyJobForm);
-  const [savingJob, setSavingJob] = useState(false);
-
-  const [members, setMembers] = useState([]);
-  const [externalProfiles, setExternalProfiles] = useState([]);
-  const [selectedExternal, setSelectedExternal] = useState('');
-  const [addingMember, setAddingMember] = useState(false);
-
-  const [projectFiles, setProjectFiles] = useState([]);
-  const [uploadingFile, setUploadingFile] = useState(false);
-  const fileInputRef = useRef(null);
-  const requesterOptions = [
-    ...(currentUser ? [{ id: currentUser.id, name: `${currentUser.name} (You)`, email: currentUser.email || '' }] : []),
-    ...companyUsers.filter(user => user.id !== currentUser?.id),
-  ];
-
-  useEffect(() => {
-    async function load() {
-      try {
-        const { data: p } = await supabase.from('projects').select('*').eq('id', id).single();
-        if (!p) return;
-        setProject(p);
-
-        const [{ data: co }, { data: t }, { data: users }, { data: pm }, { data: ext }, { data: pf }] = await Promise.all([
-          supabase.from('companies').select('*').eq('id', p.company_id).single(),
-          supabase.from('tasks').select('*').eq('project_id', id).order('submitted_at', { ascending: false }),
-          supabase.from('profiles').select('id, name, email').eq('company_id', p.company_id).eq('role', 'client'),
-          supabase.from('project_members').select('*, profile:profiles(id, name, email)').eq('project_id', id),
-          supabase.from('profiles').select('id, name, email').eq('role', 'external').order('name'),
-          supabase.from('project_files').select('*').eq('project_id', id).order('created_at', { ascending: false }),
-        ]);
-        setCompany(co);
-        setTasks(t || []);
-        setCompanyUsers(users || []);
-        setMembers(pm || []);
-        setExternalProfiles(ext || []);
-        setProjectFiles(pf || []);
-      } catch (error) {
-        console.error('ProjectDetail load failed:', error);
-      } finally {
-        setLoading(false);
-      }
-    }
-    load();
-  }, [id]);
-
-  const handleDeleteProject = async () => {
-    if (!window.confirm(`Delete project "${project.name}"? All jobs and files will be permanently deleted.`)) return;
-    await cleanupTaskStorage(tasks.map(t => t.id));
-    await supabase.from('projects').delete().eq('id', id);
-    navigate(`/companies/${company?.id}`);
-  };
-
-  const handleDeleteTask = async (taskId, e) => {
-    e.stopPropagation();
-    if (!window.confirm('Delete this job? All submissions and files will be permanently deleted.')) return;
-    await cleanupTaskStorage([taskId]);
-    await supabase.from('tasks').delete().eq('id', taskId);
-    setTasks(prev => prev.filter(t => t.id !== taskId));
-  };
-
-  const handleSaveName = async (e) => {
-    e.preventDefault();
-    if (!nameVal.trim()) return;
-    setSavingName(true);
-    const { error } = await supabase.from('projects').update({ name: nameVal.trim() }).eq('id', id);
-    if (!error) {
-      setProject(p => ({ ...p, name: nameVal.trim() }));
-      setEditingName(false);
-    } else {
-      alert('Failed to save name.');
-    }
-    setSavingName(false);
-  };
-
-  const handleAddJob = async (e) => {
-    e.preventDefault();
-    setSavingJob(true);
-    const requestor = requesterOptions.find(u => u.id === jobForm.requestedBy);
-    if (!requestor) {
-      setSavingJob(false);
-      return;
-    }
-
-    const { data: task } = await supabase.from('tasks').insert({
-      project_id: id,
-      title: jobForm.title.trim(),
-      status: 'not_started',
-      current_version: 0,
-    }).select().single();
-
-    if (task) {
-      await supabase.from('submissions').insert({
-        task_id: task.id,
-        version_number: 0,
-        type: 'initial',
-        is_hot: jobForm.isHot,
-        service_type: jobForm.serviceType,
-        deadline: jobForm.deadline || null,
-        description: jobForm.description.trim() || null,
-        submitted_by: requestor.id,
-        submitted_by_name: requestor.name.replace(' (You)', ''),
-      });
-
-      setTasks(prev => [task, ...prev]);
-      setJobForm(emptyJobForm());
-      setShowAddJob(false);
-    }
-
-    setSavingJob(false);
-  };
-
-  const handleAddMember = async () => {
-    if (!selectedExternal) return;
-    const { data } = await supabase.from('project_members')
-      .insert({ project_id: id, profile_id: selectedExternal })
-      .select('*, profile:profiles(id, name, email)')
-      .single();
-    if (data) {
-      setMembers(prev => [...prev, data]);
-      setSelectedExternal('');
-      setAddingMember(false);
-    }
-  };
-
-  const handleRemoveMember = async (profileId) => {
-    await supabase.from('project_members').delete().eq('project_id', id).eq('profile_id', profileId);
-    setMembers(prev => prev.filter(m => m.profile_id !== profileId));
-  };
-
-  const handleUploadFile = async (e) => {
-    const file = e.target.files?.[0];
-    if (!file) return;
-    setUploadingFile(true);
-    const path = `${id}/${Date.now()}_${file.name}`;
-    const { error: upErr } = await supabase.storage.from('project-files').upload(path, file);
-    if (upErr) { alert('Upload failed: ' + upErr.message); setUploadingFile(false); return; }
-    const { data: rec } = await supabase.from('project_files').insert({
-      project_id: id,
-      name: file.name,
-      storage_path: path,
-      size: file.size,
-      uploaded_by: currentUser.id,
-      uploaded_by_name: currentUser.name,
-    }).select().single();
-    if (rec) setProjectFiles(prev => [rec, ...prev]);
-    if (fileInputRef.current) fileInputRef.current.value = '';
-    setUploadingFile(false);
-  };
-
-  const handleDeleteFile = async (file) => {
-    if (!window.confirm(`Delete "${file.name}"?`)) return;
-    await supabase.storage.from('project-files').remove([file.storage_path]);
-    await supabase.from('project_files').delete().eq('id', file.id);
-    setProjectFiles(prev => prev.filter(f => f.id !== file.id));
-  };
-
-  const handleDownloadFile = async (file) => {
-    const { data } = await supabase.storage.from('project-files').createSignedUrl(file.storage_path, 60);
-    if (data?.signedUrl) window.open(data.signedUrl, '_blank');
-  };
-
-  if (loading) return <Layout><p style={{ padding: 24, color: 'var(--text-muted)' }}>Loading...</p></Layout>;
-  if (!project) return <Layout><p>Project not found.</p></Layout>;
-
-  return (
-    <Layout>
-      <button className="back-link" onClick={() => navigate(isExternal ? '/dashboard' : `/companies/${company?.id}`)}>
-        ← Back to {isExternal ? 'Dashboard' : company?.name}
-      </button>
-
-      <div className="page-header">
-        <div>
-          {editingName && !isExternal ? (
-            <form onSubmit={handleSaveName} style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 4 }}>
-              <input
-                type="text"
-                value={nameVal}
-                onChange={e => setNameVal(e.target.value)}
-                autoFocus
-                required
-                style={{ fontSize: 22, fontWeight: 700, padding: '4px 10px', margin: 0, width: 280 }}
-              />
-              <button type="submit" className="btn btn-primary btn-sm" disabled={savingName}>{savingName ? '...' : 'Save'}</button>
-              <button type="button" className="btn btn-outline btn-sm" onClick={() => setEditingName(false)}>Cancel</button>
-            </form>
-          ) : (
-            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
-              <div className="page-title">{project.name}</div>
-              {!isExternal && (
-                <button className="btn btn-outline btn-sm" onClick={() => { setNameVal(project.name); setEditingName(true); }}>Edit</button>
-              )}
-            </div>
-          )}
-          <div className="page-subtitle">
-            {company && (
-              <>
-                {isExternal ? (
-                  <span style={{ color: 'var(--text-secondary)' }}>{company.name}</span>
-                ) : (
-                  <Link to={`/companies/${company.id}`} style={{ color: 'var(--accent)' }}>{company.name}</Link>
-                )}
-                {' · '}
-              </>
-            )}
-            Started {new Date(project.created_at).toLocaleDateString()}
-          </div>
-        </div>
-        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
-          <StatusBadge status={project.status} />
-          {!isExternal && (
-            <>
-              <button
-                className="btn btn-outline btn-sm"
-                style={{ color: 'var(--danger, #dc2626)', borderColor: 'var(--danger, #dc2626)' }}
-                onClick={handleDeleteProject}
-              >Delete Project</button>
-              <button className="btn btn-primary btn-sm" onClick={() => setShowAddJob(s => !s)}>
-                {showAddJob ? 'Cancel' : '+ Add Job'}
-              </button>
-            </>
-          )}
-        </div>
-      </div>
-
-      {showAddJob && (
-        <div className="card" style={{ marginBottom: 24, border: '1px solid var(--accent)', borderRadius: 12 }}>
-          <div className="card-title">Add Job — {project.name}</div>
-          <form onSubmit={handleAddJob}>
-            <div className="grid-2">
-              <div className="form-group">
-                <label>Job Title *</label>
-                <input
-                  type="text"
-                  placeholder="e.g. Logo Design"
-                  value={jobForm.title}
-                  onChange={e => setJobForm(f => ({ ...f, title: e.target.value }))}
-                  required
-                  autoFocus
-                />
-              </div>
-              <div className="form-group">
-                <label>Service Type *</label>
-                <select
-                  value={jobForm.serviceType}
-                  onChange={e => setJobForm(f => ({ ...f, serviceType: e.target.value }))}
-                  required
-                >
-                  <option value="">Select a service...</option>
-                  {serviceTypes.map(s => <option key={s} value={s}>{s}</option>)}
-                </select>
-              </div>
-            </div>
-            <div className="grid-2">
-              <div className="form-group">
-                <label>Deadline <span style={{ fontWeight: 400, color: 'var(--text-muted)' }}>(optional)</span></label>
-                <input
-                  type="date"
-                  value={jobForm.deadline}
-                  onChange={e => setJobForm(f => ({ ...f, deadline: e.target.value }))}
-                />
-              </div>
-              <div className="form-group">
-                <label>Requested By *</label>
-                <select
-                  value={jobForm.requestedBy}
-                  onChange={e => setJobForm(f => ({ ...f, requestedBy: e.target.value }))}
-                  required
-                >
-                  <option value="">Select requester...</option>
-                  {requesterOptions.map(u => <option key={u.id} value={u.id}>{u.name}{u.email ? ` (${u.email})` : ''}</option>)}
-                </select>
-              </div>
-            </div>
-            <div className="form-group" style={{ marginTop: -4 }}>
-              <label style={{ display: 'flex', alignItems: 'center', gap: 10, fontWeight: 500, cursor: 'pointer' }}>
-                <input
-                  type="checkbox"
-                  checked={jobForm.isHot}
-                  onChange={e => setJobForm(f => ({ ...f, isHot: e.target.checked }))}
-                />
-                <span>Mark as Hot</span>
-              </label>
-            </div>
-            <div className="form-group">
-              <label>Notes <span style={{ fontWeight: 400, color: 'var(--text-muted)' }}>(optional)</span></label>
-              <textarea
-                placeholder="Any details about the job..."
-                value={jobForm.description}
-                onChange={e => setJobForm(f => ({ ...f, description: e.target.value }))}
-                style={{ minHeight: 80 }}
-              />
-            </div>
-            <div className="action-buttons">
-              <button type="submit" className="btn btn-primary" disabled={savingJob}>
-                {savingJob ? 'Adding...' : 'Add Job'}
-              </button>
-              <button type="button" className="btn btn-outline" onClick={() => { setShowAddJob(false); setJobForm(emptyJobForm()); }}>
-                Cancel
-              </button>
-            </div>
-          </form>
-        </div>
-      )}
-
-      <div className="grid-2" style={{ marginBottom: 24 }}>
-        <div className="card">
-          <div className="card-title">Project Info</div>
-          <div className="detail-grid" style={{ marginBottom: 0 }}>
-            <div className="detail-item"><label>Company</label><p>{company?.name || '—'}</p></div>
-            <div className="detail-item"><label>Status</label><p><StatusBadge status={project.status} /></p></div>
-            <div className="detail-item"><label>Started</label><p>{new Date(project.created_at).toLocaleDateString()}</p></div>
-          </div>
-        </div>
-        <div className="card">
-          <div className="card-title">Project Summary</div>
-          <div className="detail-grid" style={{ marginBottom: 0 }}>
-            <div className="detail-item"><label>Total Tasks</label><p>{tasks.length}</p></div>
-            <div className="detail-item"><label>Completed</label><p>{tasks.filter(t => t.status === 'client_approved').length}</p></div>
-            <div className="detail-item"><label>In Progress</label><p>{tasks.filter(t => t.status === 'in_progress').length}</p></div>
-            <div className="detail-item"><label>Awaiting Review</label><p>{tasks.filter(t => t.status === 'client_review').length}</p></div>
-          </div>
-        </div>
-      </div>
-
-      <div className="card-title">Project Files</div>
-      <div className="card" style={{ marginBottom: 24 }}>
-        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 14 }}>
-          <div />
-          {!isExternal && (
-            <>
-              <button
-                className="btn btn-outline btn-sm"
-                onClick={() => fileInputRef.current?.click()}
-                disabled={uploadingFile}
-              >{uploadingFile ? 'Uploading...' : '+ Upload File'}</button>
-              <input ref={fileInputRef} type="file" style={{ display: 'none' }} onChange={handleUploadFile} />
-            </>
-          )}
-        </div>
-        {projectFiles.length === 0 ? (
-          <p style={{ fontSize: 13, color: 'var(--text-muted)', margin: 0 }}>No files uploaded yet.</p>
-        ) : (
-          <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
-            {projectFiles.map(f => (
-              <div key={f.id} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '8px 12px', background: 'var(--bg)', borderRadius: 8, border: '1px solid var(--border)' }}>
-                <div>
-                  <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--text-primary)' }}>{f.name}</div>
-                  <div style={{ fontSize: 11, color: 'var(--text-muted)' }}>
-                    {f.uploaded_by_name && `${f.uploaded_by_name} · `}
-                    {new Date(f.created_at).toLocaleDateString()}
-                    {f.size ? ` · ${(f.size / 1024).toFixed(0)} KB` : ''}
-                  </div>
-                </div>
-                <div style={{ display: 'flex', gap: 6 }}>
-                  <button
-                    className="btn btn-outline btn-sm"
-                    onClick={() => handleDownloadFile(f)}
-                  >Download</button>
-                  {!isExternal && (
-                    <button
-                      onClick={() => handleDeleteFile(f)}
-                      style={{ background: 'none', border: 'none', color: 'var(--danger)', cursor: 'pointer', fontSize: 16, padding: '0 4px' }}
-                      title="Delete file"
-                    >✕</button>
-                  )}
-                </div>
-              </div>
-            ))}
-          </div>
-        )}
-      </div>
-
-      <div className="card-title">Tasks</div>
-      {tasks.length === 0 ? (
-        <div className="empty-state">
-          <div className="empty-state-icon">📋</div>
-          <h3>No jobs yet</h3>
-          <p>Add a job to get started.</p>
-          <button className="btn btn-primary" style={{ marginTop: 16 }} onClick={() => setShowAddJob(true)}>+ Add Job</button>
-        </div>
-      ) : (
-        <div className="table-wrapper">
-          <table>
-            <thead>
-              <tr>
-                <th>Job</th>
-                <th>Assigned To</th>
-                <th>Revision</th>
-                <th>Status</th>
-                <th>Submitted</th>
-                <th></th>
-              </tr>
-            </thead>
-            <tbody>
-              {tasks.map(task => (
-                <tr key={task.id} onClick={() => navigate(`/tasks/${task.id}`)} style={{ cursor: 'pointer' }}>
-                  <td>
-                    {task.title}
-                    <span style={{ marginLeft: 6, fontWeight: 600, color: 'var(--text-muted)', fontSize: 12 }}>
-                      {'R' + String(task.current_version || 0).padStart(2, '0')}
-                    </span>
-                  </td>
-                  <td style={{ color: task.assigned_name ? 'var(--text-primary)' : 'var(--text-muted)' }}>
-                    {task.assigned_name || 'Unassigned'}
-                  </td>
-                  <td>
-                    <span className="badge badge-not_started">R{String(task.current_version || 0).padStart(2, '0')}</span>
-                  </td>
-                  <td><StatusBadge status={task.status} /></td>
-                  <td style={{ color: 'var(--text-secondary)' }}>
-                    {new Date(task.submitted_at).toLocaleDateString()}
-                  </td>
-                  {!isExternal && (
-                  <td onClick={e => e.stopPropagation()}>
-                    <button
-                      type="button"
-                      onClick={e => handleDeleteTask(task.id, e)}
-                      style={{ background: 'none', border: 'none', color: 'var(--danger, #dc2626)', cursor: 'pointer', fontSize: 16, padding: '0 4px' }}
-                      title="Delete job"
-                    >✕</button>
-                  </td>
-                  )}
-                </tr>
-              ))}
-            </tbody>
-          </table>
-        </div>
-      )}
-      {!isExternal && (
-        <div className="card" style={{ marginTop: 24 }}>
-          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 14 }}>
-            <div className="card-title" style={{ margin: 0 }}>External Members</div>
-            {!addingMember && (
-              <button className="btn btn-outline btn-sm" onClick={() => setAddingMember(true)}>+ Add</button>
-            )}
-          </div>
-          {addingMember && (
-            <div style={{ display: 'flex', gap: 8, marginBottom: 12 }}>
-              <select
-                value={selectedExternal}
-                onChange={e => setSelectedExternal(e.target.value)}
-                style={{ flex: 1 }}
-              >
-                <option value="">Select external member...</option>
-                {externalProfiles
-                  .filter(p => !members.find(m => m.profile_id === p.id))
-                  .map(p => <option key={p.id} value={p.id}>{p.name} — {p.email}</option>)}
-              </select>
-              <button className="btn btn-primary btn-sm" onClick={handleAddMember} disabled={!selectedExternal}>Add</button>
-              <button className="btn btn-outline btn-sm" onClick={() => { setAddingMember(false); setSelectedExternal(''); }}>Cancel</button>
-            </div>
-          )}
-          {members.length === 0 ? (
-            <p style={{ fontSize: 13, color: 'var(--text-muted)', margin: 0 }}>No external members assigned to this project.</p>
-          ) : (
-            <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
-              {members.map(m => (
-                <div key={m.id} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '8px 12px', background: 'var(--bg)', borderRadius: 8, border: '1px solid var(--border)' }}>
-                  <div>
-                    <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--text-primary)' }}>{m.profile?.name}</div>
-                    <div style={{ fontSize: 11, color: 'var(--text-muted)' }}>{m.profile?.email}</div>
-                  </div>
-                  <button
-                    onClick={() => handleRemoveMember(m.profile_id)}
-                    style={{ background: 'none', border: 'none', color: 'var(--danger)', cursor: 'pointer', fontSize: 16, padding: '0 4px' }}
-                    title="Remove from project"
-                  >✕</button>
-                </div>
-              ))}
-            </div>
-          )}
-        </div>
-      )}
-    </Layout>
-  );
-}
diff --git a/src/pages/team/Requests.jsx b/src/pages/team/Requests.jsx
deleted file mode 100755
index 6d4887c..0000000
--- a/src/pages/team/Requests.jsx
+++ /dev/null
@@ -1,560 +0,0 @@
-import { useState, useEffect } from 'react';
-import { Link, useNavigate } from 'react-router-dom';
-import Layout from '../../components/Layout';
-import StatusBadge from '../../components/StatusBadge';
-import { supabase } from '../../lib/supabase';
-import { useAuth } from '../../context/AuthContext';
-import { serviceTypes } from '../../data/mockData';
-import { readPageCache, writePageCache } from '../../lib/pageCache';
-import { withTimeout } from '../../lib/withTimeout';
-import { getCurrentVersionForTask, getDeadlineSourceSubmission } from '../../lib/taskDeadlines';
-import { addDaysToDateOnly, formatDateOnly, getTodayDateOnlyEST } from '../../lib/dates';
-import { createInitialSubmissionForRequest, createTaskForRequest, findOrCreateProject } from '../../lib/requestSubmission';
-
-const EMPTY_FORM = () => ({ companyId: '', project: '', serviceType: '', title: '', deadline: addDaysToDateOnly(getTodayDateOnlyEST(), 3), description: '', requestedBy: '', isHot: false });
-
-export default function Requests() {
-  const navigate = useNavigate();
-  const { currentUser } = useAuth();
-  const cached = readPageCache('team_requests');
-  const [submissions, setSubmissions] = useState(() => cached?.submissions || []);
-  const [tasks, setTasks] = useState(() => cached?.tasks || []);
-  const [projects, setProjects] = useState(() => cached?.projects || []);
-  const [companies, setCompanies] = useState(() => cached?.companies || []);
-  const [invoices, setInvoices] = useState(() => cached?.invoices || []);
-  const [invoiceItems, setInvoiceItems] = useState(() => cached?.invoiceItems || []);
-  const [companyUsers, setCompanyUsers] = useState([]);
-  const [loading, setLoading] = useState(() => !cached);
-  const [activeTab, setActiveTab] = useState('active');
-  const [filterCompany, setFilterCompany] = useState('');
-  const [filterUser, setFilterUser] = useState('');
-
-  const [showAddForm, setShowAddForm] = useState(false);
-  const [addForm, setAddForm] = useState(EMPTY_FORM());
-  const [formProjects, setFormProjects] = useState([]);
-  const [customProjectNames, setCustomProjectNames] = useState([]);
-  const [isTypingProject, setIsTypingProject] = useState(false);
-  const [newProjectName, setNewProjectName] = useState('');
-  const [addSaving, setAddSaving] = useState(false);
-  const [addError, setAddError] = useState('');
-  const [addRequestKey, setAddRequestKey] = useState(() => crypto.randomUUID());
-  const requesterOptions = [
-    ...(currentUser ? [{ id: currentUser.id, name: `${currentUser.name} (You)`, email: currentUser.email || '' }] : []),
-    ...companyUsers.filter(user => user.id !== currentUser?.id),
-  ];
-
-  useEffect(() => {
-    load();
-  }, []);
-
-  async function load() {
-    try {
-      const [{ data: subs }, { data: t }, { data: p }, { data: co }, { data: inv }, { data: itemRows }] = await withTimeout(Promise.all([
-        supabase.from('submissions').select('*').order('submitted_at', { ascending: false }),
-        supabase.from('tasks').select('*'),
-        supabase.from('projects').select('*'),
-        supabase.from('companies').select('id, name'),
-        supabase.from('invoices').select('id, status'),
-        supabase.from('invoice_items').select('task_id, invoice_id'),
-      ]), 12000, 'Requests load');
-      setSubmissions(subs || []);
-      setTasks(t || []);
-      setProjects(p || []);
-      setCompanies(co || []);
-      setInvoices(inv || []);
-      setInvoiceItems(itemRows || []);
-      writePageCache('team_requests', {
-        submissions: subs || [],
-        tasks: t || [],
-        projects: p || [],
-        companies: co || [],
-        invoices: inv || [],
-        invoiceItems: itemRows || [],
-      });
-      const paidInvoiceIds = new Set((inv || []).filter(invoice => invoice.status === 'paid').map(invoice => invoice.id));
-      const closedTaskIds = new Set(
-        (itemRows || [])
-          .filter(item => item.task_id && paidInvoiceIds.has(item.invoice_id))
-          .map(item => item.task_id)
-      );
-    } catch (error) {
-      console.error('Requests load failed:', error);
-      setSubmissions([]);
-      setTasks([]);
-      setProjects([]);
-      setCompanies([]);
-      setInvoices([]);
-      setInvoiceItems([]);
-    } finally {
-      setLoading(false);
-    }
-  }
-
-  useEffect(() => {
-    setFormProjects([]);
-    setCustomProjectNames([]);
-    setCompanyUsers([]);
-    setAddForm(f => ({ ...f, project: '', requestedBy: currentUser?.id || '' }));
-    setIsTypingProject(false);
-    setNewProjectName('');
-    if (!addForm.companyId) return;
-    withTimeout(Promise.all([
-      supabase.from('projects').select('id, name').eq('company_id', addForm.companyId).order('name'),
-      supabase.from('profiles').select('id, name, email').eq('company_id', addForm.companyId).eq('role', 'client').order('name'),
-    ]), 10000, 'Request form load').then(([projectsResult, usersResult]) => {
-      setFormProjects(projectsResult.data || []);
-      setCompanyUsers(usersResult.data || []);
-    }).catch((error) => {
-      console.error('Request form load failed:', error);
-      setFormProjects([]);
-      setCompanyUsers([]);
-    });
-  }, [addForm.companyId]);
-
-  const setAdd = (field) => (e) => setAddForm(f => ({ ...f, [field]: e.target.value }));
-
-  const handleAddProjectName = () => {
-    const name = newProjectName.trim();
-    if (!name) return;
-    if (!customProjectNames.includes(name) && !formProjects.some(p => p.name === name)) {
-      setCustomProjectNames(prev => [...prev, name]);
-    }
-    setAddForm(f => ({ ...f, project: name }));
-    setIsTypingProject(false);
-    setNewProjectName('');
-  };
-
-  const handleAddRequest = async (e) => {
-    e.preventDefault();
-    if (addSaving) return;
-    setAddSaving(true);
-    setAddError('');
-    try {
-      const requester = requesterOptions.find(user => user.id === addForm.requestedBy);
-      if (!requester) throw new Error('Please select who requested this task.');
-      const projectName = addForm.project.trim();
-      if (!projectName) throw new Error('Please select or create a project.');
-      const resolvedProject = await findOrCreateProject(addForm.companyId, projectName, formProjects);
-      if (!formProjects.some(project => project.id === resolvedProject.id)) {
-        setFormProjects(prev => [...prev, { id: resolvedProject.id, name: resolvedProject.name }]);
-      }
-      if (!projects.some(project => project.id === resolvedProject.id)) {
-        setProjects(prev => [...prev, resolvedProject]);
-      }
-
-      const { task } = await createTaskForRequest({
-        projectId: resolvedProject.id,
-        title: addForm.title.trim() || addForm.serviceType,
-        requestKey: addRequestKey,
-      });
-      if (!task) throw new Error('Failed to create task.');
-
-      const { submission: sub } = await createInitialSubmissionForRequest({
-        taskId: task.id,
-        requestKey: addRequestKey,
-        isHot: addForm.isHot,
-        serviceType: addForm.serviceType,
-        deadline: addForm.deadline,
-        description: addForm.description,
-        submittedBy: requester.id,
-        submittedByName: requester.name.replace(' (You)', ''),
-      });
-      if (!sub) throw new Error('Failed to create submission.');
-
-      // Refresh list
-      const [{ data: newSubs }, { data: newTasks }] = await Promise.all([
-        supabase.from('submissions').select('*').order('submitted_at', { ascending: false }),
-        supabase.from('tasks').select('*'),
-      ]);
-      setSubmissions(newSubs || []);
-      setTasks(newTasks || []);
-
-      setShowAddForm(false);
-      setAddForm(EMPTY_FORM());
-      setAddRequestKey(crypto.randomUUID());
-      setCustomProjectNames([]);
-      setIsTypingProject(false);
-      setNewProjectName('');
-    } catch (err) {
-      setAddError(err.message);
-    } finally {
-      setAddSaving(false);
-    }
-  };
-
-  if (loading) return <Layout><p style={{ padding: 24, color: 'var(--text-muted)' }}>Loading...</p></Layout>;
-
-  const requesterNames = [...new Set(submissions.map(s => s.submitted_by_name).filter(Boolean))].sort();
-  const paidInvoiceIds = new Set(invoices.filter(invoice => invoice.status === 'paid').map(invoice => invoice.id));
-  const paidTaskIds = new Set(
-    invoiceItems
-      .filter(item => item.task_id && paidInvoiceIds.has(item.invoice_id))
-      .map(item => item.task_id)
-  );
-  const isFullyClosedTask = (task) => task?.status === 'client_approved' && Boolean(task?.invoiced) && paidTaskIds.has(task.id);
-  const latestTaskGroups = tasks.map(task => {
-    const taskSubs = submissions.filter(sub => sub.task_id === task.id);
-    const deadlineSource = getDeadlineSourceSubmission(task, taskSubs);
-    if (!deadlineSource) return null;
-
-    const currentVersion = getCurrentVersionForTask(task, taskSubs);
-    const latestGroup = taskSubs.filter(sub => sub.version_number === currentVersion);
-    return { task, primary: deadlineSource, group: latestGroup };
-  }).filter(Boolean);
-
-  const filteredGroups = latestTaskGroups.filter(({ task, group }) => {
-    const project = projects.find(p => p.id === task?.project_id);
-    if (filterCompany && project?.company_id !== filterCompany) return false;
-    if (filterUser && !group.some(s => s.submitted_by_name === filterUser)) return false;
-    return true;
-  }).sort((a, b) => {
-    const aLatest = Math.max(...a.group.map(s => new Date(s.submitted_at).getTime()));
-    const bLatest = Math.max(...b.group.map(s => new Date(s.submitted_at).getTime()));
-    return bLatest - aLatest;
-  });
-
-  const activeGroups = filteredGroups.filter(({ task }) => task?.status !== 'client_approved' && task?.status !== 'client_review');
-  const clientReviewGroups = filteredGroups.filter(({ task }) => task?.status === 'client_review');
-  const completedGroups = filteredGroups.filter(({ task }) => task?.status === 'client_approved' && !isFullyClosedTask(task));
-  const closedGroups = filteredGroups.filter(({ task }) => isFullyClosedTask(task));
-  const renderRow = ({ task, primary }) => {
-    const project = projects.find(p => p.id === task?.project_id);
-    const company = companies.find(co => co.id === project?.company_id);
-    const isCompleted = task?.status === 'client_approved';
-    const isFullyClosed = isFullyClosedTask(task);
-    const revisionLabel = `R${String(primary.version_number ?? 0).padStart(2, '0')}`;
-    const deadline = formatDateOnly(primary.deadline, 'Not specified');
-
-    return (
-      <tr key={task.id} onClick={() => task && navigate(`/tasks/${task.id}`)} style={{ cursor: task ? 'pointer' : 'default' }}>
-        <td style={{ fontWeight: 600 }}>{project?.name || 'No project'}</td>
-        <td style={{ fontWeight: 600 }}>
-          <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
-            <span>{task?.title || primary.service_type}</span>
-            {primary.is_hot ? <span className="badge badge-needs_revision">Hot</span> : null}
-          </div>
-        </td>
-        <td>{revisionLabel}</td>
-        <td>{primary.service_type || 'Request'}</td>
-        <td>
-          {company
-            ? <Link to={`/companies/${company.id}`} className="table-link" onClick={e => e.stopPropagation()}>{company.name}</Link>
-            : 'No client'}
-        </td>
-        <td>{deadline}</td>
-        <td>{isFullyClosed ? <span className="badge badge-client_approved">Paid & Closed</span> : isCompleted ? <span className="badge badge-client_approved">Completed</span> : <StatusBadge status={task?.status || 'not_started'} />}</td>
-      </tr>
-    );
-  };
-
-  return (
-    <Layout>
-      <div className="page-header">
-        <div>
-          <div className="page-title">Requests</div>
-          <div className="page-subtitle">Track incoming requests, revisions, and completed jobs in one place.</div>
-        </div>
-        <div style={{ display: 'flex', gap: 8 }}>
-          <button className="btn btn-primary btn-sm" onClick={() => { setShowAddForm(s => !s); setAddError(''); }}>
-            {showAddForm ? 'Cancel' : '+ Add Request'}
-          </button>
-        </div>
-      </div>
-
-      {showAddForm && (
-        <div className="card" style={{ marginBottom: 24, border: '1px solid var(--accent)', borderRadius: 12 }}>
-          <div className="card-title">Add Request</div>
-          <form onSubmit={handleAddRequest}>
-            <div className="grid-2">
-              <div className="form-group">
-                <label>Company *</label>
-                <select value={addForm.companyId} onChange={setAdd('companyId')} required>
-                  <option value="">Select company...</option>
-                  {companies.map(co => <option key={co.id} value={co.id}>{co.name}</option>)}
-                </select>
-              </div>
-              <div className="form-group">
-                <label>Project *</label>
-                {isTypingProject ? (
-                  <div style={{ display: 'flex', gap: 8 }}>
-                    <input
-                      type="text"
-                      placeholder="Enter project name..."
-                      value={newProjectName}
-                      onChange={e => setNewProjectName(e.target.value)}
-                      onKeyDown={e => { if (e.key === 'Enter') { e.preventDefault(); handleAddProjectName(); } }}
-                      autoFocus
-                      style={{ flex: 1 }}
-                    />
-                    <button type="button" className="btn btn-primary btn-sm" onClick={handleAddProjectName} disabled={!newProjectName.trim()}>Add</button>
-                    <button type="button" className="btn btn-outline btn-sm" onClick={() => { setIsTypingProject(false); setNewProjectName(''); }}>Cancel</button>
-                  </div>
-                ) : (
-                  <select
-                    value={addForm.project}
-                    onChange={e => {
-                      if (e.target.value === '__new__') { setIsTypingProject(true); setAddForm(f => ({ ...f, project: '' })); }
-                      else { setAddForm(f => ({ ...f, project: e.target.value })); }
-                    }}
-                    required
-                    disabled={!addForm.companyId}
-                  >
-                    <option value="">{addForm.companyId ? 'Select project...' : 'Select company first'}</option>
-                    {[...formProjects.map(p => p.name), ...customProjectNames.filter(n => !formProjects.some(p => p.name === n))].map(name => (
-                      <option key={name} value={name}>{name}</option>
-                    ))}
-                    {addForm.companyId && <option value="__new__">＋ Create new project...</option>}
-                  </select>
-                )}
-              </div>
-            </div>
-
-            <div className="grid-2">
-              <div className="form-group">
-                <label>Service Type *</label>
-                <select value={addForm.serviceType} onChange={setAdd('serviceType')} required>
-                  <option value="">Select service...</option>
-                  {serviceTypes.map(s => <option key={s} value={s}>{s}</option>)}
-                </select>
-              </div>
-              <div className="form-group">
-                <label>Deadline <span style={{ fontWeight: 400, color: 'var(--text-muted)' }}>(optional)</span></label>
-                <input type="date" value={addForm.deadline} onChange={setAdd('deadline')} />
-              </div>
-            </div>
-
-            <div className="form-group" style={{ marginTop: -4 }}>
-              <label style={{ display: 'flex', alignItems: 'center', gap: 10, fontWeight: 500, cursor: 'pointer' }}>
-                <input
-                  type="checkbox"
-                  checked={addForm.isHot}
-                  onChange={e => setAddForm(f => ({ ...f, isHot: e.target.checked }))}
-                />
-                <span>Mark as Hot</span>
-              </label>
-            </div>
-
-            <div className="form-group">
-              <label>Requested By *</label>
-              <select value={addForm.requestedBy} onChange={setAdd('requestedBy')} disabled={!addForm.companyId} required>
-                <option value="">{addForm.companyId ? 'Select requester...' : 'Select company first'}</option>
-                {requesterOptions.map(user => (
-                  <option key={user.id} value={user.id}>
-                    {user.name}{user.email ? ` (${user.email})` : ''}
-                  </option>
-                ))}
-              </select>
-            </div>
-
-            <div className="form-group">
-              <label>Title <span style={{ fontWeight: 400, color: 'var(--text-muted)' }}>(optional — defaults to service type)</span></label>
-              <input type="text" placeholder={addForm.serviceType || 'e.g. Brand Book — 2026'} value={addForm.title} onChange={setAdd('title')} />
-            </div>
-
-            <div className="form-group">
-              <label>Description *</label>
-              <textarea placeholder="Notes on the request..." value={addForm.description} onChange={setAdd('description')} style={{ minHeight: 100 }} required />
-            </div>
-
-            {addError && <div style={{ fontSize: 13, color: 'var(--danger)', marginBottom: 12 }}>⚠ {addError}</div>}
-
-            <div className="action-buttons">
-              <button type="submit" className="btn btn-primary" disabled={addSaving}>{addSaving ? 'Adding...' : 'Add Request'}</button>
-              <button type="button" className="btn btn-outline" onClick={() => { setShowAddForm(false); setAddForm(EMPTY_FORM()); setCustomProjectNames([]); setIsTypingProject(false); setNewProjectName(''); setAddError(''); }}>Cancel</button>
-            </div>
-          </form>
-        </div>
-      )}
-
-      {(companies.length > 0 || requesterNames.length > 0) && (
-      <div className="card request-toolbar-card" style={{ marginBottom: 16 }}>
-        <div className="request-toolbar-grid">
-          {companies.length > 0 && (
-            <div className="request-toolbar-section">
-              <div className="card-title" style={{ marginBottom: 10 }}>Filter By Company</div>
-              <div className="request-filter-row">
-                <button className={`btn btn-sm ${!filterCompany ? 'btn-primary' : 'btn-outline'}`} onClick={() => setFilterCompany('')}>All</button>
-                {companies.map(co => (
-                  <button
-                    key={co.id}
-                    className={`btn btn-sm ${filterCompany === co.id ? 'btn-primary' : 'btn-outline'}`}
-                    onClick={() => setFilterCompany(f => f === co.id ? '' : co.id)}
-                  >
-                    {co.name}
-                  </button>
-                ))}
-              </div>
-            </div>
-          )}
-          {requesterNames.length > 0 && (
-            <div className="request-toolbar-section">
-              <div className="card-title" style={{ marginBottom: 10 }}>Filter By Requester</div>
-              <div className="request-filter-row">
-                <button className={`btn btn-sm ${!filterUser ? 'btn-primary' : 'btn-outline'}`} onClick={() => setFilterUser('')}>All</button>
-                {requesterNames.map(name => (
-                  <button
-                    key={name}
-                    className={`btn btn-sm ${filterUser === name ? 'btn-primary' : 'btn-outline'}`}
-                    onClick={() => setFilterUser(f => f === name ? '' : name)}
-                  >
-                    {name}
-                  </button>
-                ))}
-              </div>
-            </div>
-          )}
-        </div>
-      </div>
-      )}
-
-      {submissions.length === 0 ? (
-        <div className="empty-state">
-          <h3>No requests yet</h3>
-          <p>Client requests will appear here.</p>
-        </div>
-      ) : filteredGroups.length === 0 ? (
-        <div className="empty-state">
-          <h3>No matching requests</h3>
-          <p>Try clearing the current company or requester filters.</p>
-        </div>
-      ) : (
-        <div>
-          <div style={{ marginBottom: 20, display: 'flex', gap: 4, flexWrap: 'wrap' }}>
-            {[
-              { id: 'active', label: 'Active', count: activeGroups.length },
-              { id: 'client-review', label: 'Client Review', count: clientReviewGroups.length },
-              { id: 'completed', label: 'Completed', count: completedGroups.length },
-              { id: 'closed', label: 'Fully Closed', count: closedGroups.length },
-            ].map(tab => (
-              <button
-                key={tab.id}
-                type="button"
-                className={`tab-btn${activeTab === tab.id ? ' active' : ''}`}
-                onClick={() => setActiveTab(tab.id)}
-              >
-                {tab.label} ({tab.count})
-              </button>
-            ))}
-          </div>
-
-          {activeTab === 'active' && (
-            <div>
-              {activeGroups.length === 0 ? (
-                <div className="empty-state" style={{ padding: '28px 20px' }}>
-                  <h3>No active requests</h3>
-                </div>
-              ) : (
-                <div className="table-wrapper">
-                  <table>
-                    <thead>
-                      <tr>
-                        <th>Project</th>
-                        <th>Name</th>
-                        <th>Revision</th>
-                        <th>Request Type</th>
-                        <th>Client</th>
-                        <th>Deadline</th>
-                        <th>Status</th>
-                      </tr>
-                    </thead>
-                    <tbody>
-                      {activeGroups.map(group => renderRow(group))}
-                    </tbody>
-                  </table>
-                </div>
-              )}
-            </div>
-          )}
-
-          {activeTab === 'client-review' && (
-            <div>
-              {clientReviewGroups.length === 0 ? (
-                <div className="empty-state" style={{ padding: '28px 20px' }}>
-                  <h3>No requests in client review</h3>
-                </div>
-              ) : (
-                <div className="table-wrapper">
-                  <table>
-                    <thead>
-                      <tr>
-                        <th>Project</th>
-                        <th>Name</th>
-                        <th>Revision</th>
-                        <th>Request Type</th>
-                        <th>Client</th>
-                        <th>Deadline</th>
-                        <th>Status</th>
-                      </tr>
-                    </thead>
-                    <tbody>
-                      {clientReviewGroups.map(group => renderRow(group))}
-                    </tbody>
-                  </table>
-                </div>
-              )}
-            </div>
-          )}
-
-          {activeTab === 'completed' && (
-            <div>
-              {completedGroups.length === 0 ? (
-                <div className="empty-state" style={{ padding: '28px 20px' }}>
-                  <h3>No completed requests</h3>
-                </div>
-              ) : (
-                <div className="table-wrapper">
-                  <table>
-                    <thead>
-                      <tr>
-                        <th>Project</th>
-                        <th>Name</th>
-                        <th>Revision</th>
-                        <th>Request Type</th>
-                        <th>Client</th>
-                        <th>Deadline</th>
-                        <th>Status</th>
-                      </tr>
-                    </thead>
-                    <tbody>
-                      {completedGroups.map(group => renderRow(group))}
-                    </tbody>
-                  </table>
-                </div>
-              )}
-            </div>
-          )}
-
-          {activeTab === 'closed' && (
-            <div>
-              {closedGroups.length === 0 ? (
-                <div className="empty-state" style={{ padding: '28px 20px' }}>
-                  <h3>No fully closed requests</h3>
-                  <p>Requests move here once they are completed, invoiced, and paid.</p>
-                </div>
-              ) : (
-                <div className="table-wrapper">
-                  <table>
-                    <thead>
-                      <tr>
-                        <th>Project</th>
-                        <th>Name</th>
-                        <th>Revision</th>
-                        <th>Request Type</th>
-                        <th>Client</th>
-                        <th>Deadline</th>
-                        <th>Status</th>
-                      </tr>
-                    </thead>
-                    <tbody>
-                      {closedGroups.map(group => renderRow(group))}
-                    </tbody>
-                  </table>
-                </div>
-              )}
-            </div>
-          )}
-        </div>
-      )}
-    </Layout>
-  );
-}
diff --git a/src/pages/team/ServerStatus.jsx b/src/pages/team/ServerStatus.jsx
deleted file mode 100644
index 0a535a1..0000000
--- a/src/pages/team/ServerStatus.jsx
+++ /dev/null
@@ -1,253 +0,0 @@
-import { useEffect, useState } from 'react';
-import Layout from '../../components/Layout';
-import { supabase } from '../../lib/supabase';
-
-const STATUS_STYLE = {
-  none: { bg: 'rgba(34,197,94,0.15)', border: 'rgba(34,197,94,0.3)', color: '#4ade80', label: 'Operational' },
-  minor: { bg: 'rgba(245,165,35,0.15)', border: 'rgba(245,165,35,0.3)', color: '#f5a523', label: 'Minor Issues' },
-  major: { bg: 'rgba(239,68,68,0.15)', border: 'rgba(239,68,68,0.3)', color: '#f87171', label: 'Major Outage' },
-  critical: { bg: 'rgba(239,68,68,0.15)', border: 'rgba(239,68,68,0.3)', color: '#f87171', label: 'Critical Outage' },
-  maintenance: { bg: 'rgba(96,165,250,0.15)', border: 'rgba(96,165,250,0.3)', color: '#93c5fd', label: 'Maintenance' },
-};
-
-function formatBytes(bytes) {
-  if (bytes === null || bytes === undefined || Number.isNaN(bytes)) return 'Unavailable';
-  if (bytes === 0) return '0 B';
-  const units = ['B', 'KB', 'MB', 'GB', 'TB'];
-  const index = Math.min(Math.floor(Math.log(bytes) / Math.log(1024)), units.length - 1);
-  const value = bytes / 1024 ** index;
-  return `${value >= 100 ? value.toFixed(0) : value.toFixed(value >= 10 ? 1 : 2)} ${units[index]}`;
-}
-
-function formatValue(value, unit) {
-  if (value === null || value === undefined) return 'Unavailable';
-  if (unit === 'bytes') return formatBytes(value);
-  if (unit === 'hours') return `${Number(value).toFixed(Number(value) >= 10 ? 0 : 1)} h`;
-  return Number(value).toLocaleString();
-}
-
-function formatDate(value) {
-  if (!value) return 'Unavailable';
-  return new Date(value).toLocaleString();
-}
-
-function StatusPill({ indicator, description }) {
-  const style = STATUS_STYLE[indicator] || STATUS_STYLE.major;
-  return (
-    <div
-      style={{
-        display: 'inline-flex',
-        alignItems: 'center',
-        gap: 8,
-        padding: '6px 12px',
-        borderRadius: 999,
-        background: style.bg,
-        border: `1px solid ${style.border}`,
-        color: style.color,
-        fontSize: 12,
-        fontWeight: 700,
-      }}
-    >
-      <span>{style.label}</span>
-      {description ? <span style={{ opacity: 0.9, fontWeight: 500 }}>· {description}</span> : null}
-    </div>
-  );
-}
-
-function UsageBar({ quota }) {
-  const canMeasure = quota.used !== null && quota.used !== undefined && quota.limit;
-  const percent = canMeasure ? Math.min((quota.used / quota.limit) * 100, 100) : 0;
-  const remaining = canMeasure ? Math.max(quota.limit - quota.used, 0) : null;
-  const overLimit = canMeasure && quota.used > quota.limit;
-  const tone = overLimit ? 'var(--danger)' : percent >= 85 ? '#f5a523' : 'var(--accent)';
-
-  return (
-    <div className="status-meter">
-      <div style={{ display: 'flex', justifyContent: 'space-between', gap: 12, alignItems: 'baseline' }}>
-        <div>
-          <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--text-primary)' }}>{quota.label}</div>
-          <div style={{ fontSize: 12, color: 'var(--text-muted)', marginTop: 2 }}>{quota.note}</div>
-        </div>
-        <div style={{ textAlign: 'right', flexShrink: 0 }}>
-          <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--text-primary)' }}>
-            {formatValue(quota.used, quota.unit)} / {formatValue(quota.limit, quota.unit)}
-          </div>
-          <div style={{ fontSize: 12, color: overLimit ? 'var(--danger)' : 'var(--text-muted)' }}>
-            {canMeasure ? `${percent.toFixed(1)}% used` : quota.source === 'manual' ? 'Manual reading' : 'Not available yet'}
-          </div>
-        </div>
-      </div>
-      <div className="status-meter-track">
-        <div className="status-meter-fill" style={{ width: `${percent}%`, background: tone }} />
-      </div>
-      <div style={{ fontSize: 12, color: 'var(--text-muted)' }}>
-        {canMeasure
-          ? overLimit
-            ? `${formatValue(quota.used - quota.limit, quota.unit)} over the free-tier reference.`
-            : `${formatValue(remaining, quota.unit)} left before the free-tier reference.`
-          : 'No current reading is available for this metric.'}
-      </div>
-    </div>
-  );
-}
-
-function StatsGrid({ stats }) {
-  if (!stats?.length) return null;
-  return (
-    <div className="status-stats-grid">
-      {stats.map((stat) => (
-        <div key={stat.label} className="status-stat-card">
-          <div className="status-stat-value">{Number(stat.value).toLocaleString()}</div>
-          <div className="status-stat-label">{stat.label}</div>
-        </div>
-      ))}
-    </div>
-  );
-}
-
-function ServiceCard({ service }) {
-  const topComponents = (service.status.components || []).slice(0, 6);
-  const visibleQuotas = service.usage.quotas || [];
-
-  return (
-    <section className="card" style={{ padding: 22 }}>
-      <div style={{ display: 'flex', justifyContent: 'space-between', gap: 16, alignItems: 'flex-start', flexWrap: 'wrap' }}>
-        <div>
-          <div className="card-title" style={{ marginBottom: 8 }}>{service.name}</div>
-          <StatusPill indicator={service.status.status?.indicator} description={service.status.status?.description} />
-          <div style={{ fontSize: 12, color: 'var(--text-muted)', marginTop: 10 }}>
-            Last checked {formatDate(service.status.updatedAt)}
-          </div>
-        </div>
-        <div style={{ minWidth: 220, fontSize: 12, color: 'var(--text-muted)' }}>
-          {service.usage.message ? (
-            <div style={{ padding: '10px 12px', border: '1px solid var(--border)', borderRadius: 8, background: 'var(--card-bg-2)' }}>
-              {service.usage.message}
-            </div>
-          ) : (
-            <div style={{ padding: '10px 12px', border: '1px solid var(--border)', borderRadius: 8, background: 'var(--card-bg-2)' }}>
-              Free-tier bars show current usage where the server can measure it.
-            </div>
-          )}
-        </div>
-      </div>
-
-      {topComponents.length > 0 && (
-        <div style={{ marginTop: 18 }}>
-          <div style={{ fontSize: 12, textTransform: 'uppercase', letterSpacing: 0.6, color: 'var(--text-muted)', marginBottom: 10 }}>
-            Components
-          </div>
-          <div className="status-components-grid">
-            {topComponents.map((component) => (
-              <div key={component.id} className="status-component">
-                <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--text-primary)' }}>{component.name}</div>
-                <div style={{ fontSize: 12, color: 'var(--text-muted)', marginTop: 4, textTransform: 'capitalize' }}>
-                  {component.status.replaceAll('_', ' ')}
-                </div>
-              </div>
-            ))}
-          </div>
-        </div>
-      )}
-
-      <StatsGrid stats={service.usage.stats} />
-
-      <div style={{ display: 'grid', gap: 14, marginTop: service.usage.stats?.length ? 18 : 22 }}>
-        {visibleQuotas.map((quota) => (
-          <UsageBar key={quota.id} quota={quota} />
-        ))}
-      </div>
-
-      {service.usage.buckets?.length > 0 && (
-        <div style={{ marginTop: 18 }}>
-          <div style={{ fontSize: 12, textTransform: 'uppercase', letterSpacing: 0.6, color: 'var(--text-muted)', marginBottom: 10 }}>
-            Biggest Supabase Buckets
-          </div>
-          <div className="status-components-grid">
-            {service.usage.buckets.map((bucket) => (
-              <div key={bucket.bucketId} className="status-component">
-                <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--text-primary)' }}>{bucket.bucketId}</div>
-                <div style={{ fontSize: 12, color: 'var(--text-muted)', marginTop: 4 }}>{formatBytes(bucket.bytes)}</div>
-              </div>
-            ))}
-          </div>
-        </div>
-      )}
-    </section>
-  );
-}
-
-export default function ServerStatus() {
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState('');
-  const [payload, setPayload] = useState(null);
-
-  const load = async (cancelledRef) => {
-    setLoading(true);
-    setError('');
-
-    try {
-      const { data: sessionData, error: sessionError } = await supabase.auth.getSession();
-      if (sessionError) throw sessionError;
-
-      const accessToken = sessionData.session?.access_token;
-      if (!accessToken) throw new Error('You must be signed in to view server status.');
-
-      const response = await fetch('/api/server-status', {
-        headers: {
-          Authorization: `Bearer ${accessToken}`,
-        },
-      });
-
-      const json = await response.json();
-      if (!response.ok) {
-        throw new Error(json.error || 'Unable to load server status.');
-      }
-
-      if (!cancelledRef.current) {
-        setPayload(json);
-      }
-    } catch (err) {
-      if (!cancelledRef.current) {
-        setError(err.message || 'Unable to load server status.');
-      }
-    } finally {
-      if (!cancelledRef.current) {
-        setLoading(false);
-      }
-    }
-  };
-
-  useEffect(() => {
-    const cancelledRef = { current: false };
-    load(cancelledRef);
-    return () => {
-      cancelledRef.current = true;
-    };
-  }, []);
-
-  return (
-    <Layout>
-      <div className="page-header">
-        <div>
-          <div className="page-title">Server Status</div>
-          <div className="page-subtitle">Live service health plus free-tier usage references for Supabase and Vercel.</div>
-        </div>
-        <button className="btn btn-outline btn-sm" onClick={() => load({ current: false })} disabled={loading}>
-          {loading ? 'Refreshing...' : 'Refresh'}
-        </button>
-      </div>
-
-      {loading ? (
-        <div className="card" style={{ padding: 28, color: 'var(--text-muted)' }}>Loading current service status…</div>
-      ) : error ? (
-        <div className="card" style={{ padding: 28, borderColor: 'rgba(239,68,68,0.4)', color: '#fca5a5' }}>{error}</div>
-      ) : (
-        <div className="server-status-grid">
-          <ServiceCard service={payload.services.supabase} />
-          <ServiceCard service={payload.services.vercel} />
-        </div>
-      )}
-    </Layout>
-  );
-}
diff --git a/src/pages/team/SubInvoiceDetail.jsx b/src/pages/team/SubInvoiceDetail.jsx
index 9637146..e296c5b 100644
--- a/src/pages/team/SubInvoiceDetail.jsx
+++ b/src/pages/team/SubInvoiceDetail.jsx
@@ -190,8 +190,8 @@ export default function SubInvoiceDetail() {
               {generating ? 'Generating…' : 'Download Receipt'}
             </button>
           )}
-          <button className="btn btn-danger" onClick={handleDelete} disabled={saving}>
-            Delete Invoice
+          <button className="btn-icon btn-icon-danger" title="Delete Invoice" onClick={handleDelete} disabled={saving}>
+            ✕
           </button>
         </div>
       </div>
diff --git a/src/pages/team/SubcontractorPODetail.jsx b/src/pages/team/SubcontractorPODetail.jsx
index d8294f9..e4b3b6b 100644
--- a/src/pages/team/SubcontractorPODetail.jsx
+++ b/src/pages/team/SubcontractorPODetail.jsx
@@ -239,7 +239,7 @@ export default function SubcontractorPODetail() {
           {po.status === 'paid' && <button className="btn btn-outline" onClick={handleReopen} disabled={saving}>Reopen</button>}
           <LoadingButton className="btn btn-primary" loading={generating} loadingText="Generating..." onClick={handleDownload}>Download PO</LoadingButton>
           {!['paid', 'cancelled'].includes(po.status) && <button className="btn btn-outline" onClick={handleCancel} disabled={saving}>Cancel PO</button>}
-          <button className="btn btn-danger" onClick={handleDelete} disabled={saving}>Delete PO</button>
+          <button className="btn-icon btn-icon-danger" title="Delete PO" onClick={handleDelete} disabled={saving}>✕</button>
         </div>
       </div>
     </Layout>
diff --git a/src/pages/team/TaskDetail.jsx b/src/pages/team/TaskDetail.jsx
deleted file mode 100755
index 0be2a53..0000000
--- a/src/pages/team/TaskDetail.jsx
+++ /dev/null
@@ -1,1276 +0,0 @@
-import { useState, useEffect, useRef } from 'react';
-import { useParams, useNavigate, Link } from 'react-router-dom';
-import JSZip from 'jszip';
-import Layout from '../../components/Layout';
-import StatusBadge from '../../components/StatusBadge';
-import LoadingButton from '../../components/LoadingButton';
-import { supabase } from '../../lib/supabase';
-import { sendEmail } from '../../lib/email';
-import { useAuth } from '../../context/AuthContext';
-import { serviceTypes } from '../../data/mockData';
-import { cleanupTaskStorage } from '../../lib/deleteHelpers';
-import { addDaysToDateOnly, formatDateEST, getTodayDateOnlyEST } from '../../lib/dates';
-
-const rLabel = (v) => 'R' + String(v || 0).padStart(2, '0');
-const MAX_FILES = 20;
-const MAX_SIZE_MB = 10;
-const MAX_SIZE_BYTES = MAX_SIZE_MB * 1024 * 1024;
-const DELIVERY_UPLOAD_CONCURRENCY = 3;
-const formatSize = (bytes) => bytes < 1024 * 1024 ? (bytes / 1024).toFixed(1) + ' KB' : (bytes / (1024 * 1024)).toFixed(1) + ' MB';
-const getPrimaryForVersion = (submissions, version) =>
-  submissions.find(s => s.version_number === version && s.type !== 'amendment') || null;
-const getCurrentPrimarySubmission = (submissions, currentVersion) =>
-  getPrimaryForVersion(submissions, currentVersion)
-  || [...submissions].filter(s => s.type !== 'amendment').sort((a, b) => b.version_number - a.version_number)[0]
-  || null;
-const getRevisionBaseline = (task, submissions) =>
-  Math.max(task?.current_version || 0, ...(submissions || []).map(sub => sub.version_number || 0));
-
-async function uploadDeliveryFiles(taskId, files) {
-  const uploadedFiles = new Array(files.length);
-  let nextIndex = 0;
-
-  async function worker() {
-    while (nextIndex < files.length) {
-      const index = nextIndex++;
-      const file = files[index];
-      const path = `${taskId}/${Date.now()}_${index}_${file.name}`;
-      const { data: uploaded, error } = await supabase.storage.from('deliveries').upload(path, file);
-      if (error) throw new Error(`Upload failed: ${error.message}`);
-      if (uploaded) {
-        uploadedFiles[index] = { name: file.name, storage_path: path, size: file.size };
-      }
-    }
-  }
-
-  const workerCount = Math.min(DELIVERY_UPLOAD_CONCURRENCY, files.length);
-  await Promise.all(Array.from({ length: workerCount }, () => worker()));
-  return uploadedFiles.filter(Boolean);
-}
-
-export default function TaskDetail() {
-  const { id } = useParams();
-  const navigate = useNavigate();
-  const { currentUser } = useAuth();
-
-  const [task, setTask] = useState(null);
-  const [project, setProject] = useState(null);
-  const [company, setCompany] = useState(null);
-  const [submissions, setSubmissions] = useState([]);
-  const [teamMembers, setTeamMembers] = useState([]);
-  const [companyUsers, setCompanyUsers] = useState([]);
-  const [loading, setLoading] = useState(true);
-
-  const isExternal = currentUser?.role === 'external';
-
-  const [editingTitle, setEditingTitle] = useState(false);
-  const [titleVal, setTitleVal] = useState('');
-  const [savingTitle, setSavingTitle] = useState(false);
-  const [editingRevision, setEditingRevision] = useState(false);
-  const [revisionVal, setRevisionVal] = useState('');
-  const [savingRevision, setSavingRevision] = useState(false);
-  const [editingRequest, setEditingRequest] = useState(false);
-  const [requestForm, setRequestForm] = useState({ serviceType: '', deadline: addDaysToDateOnly(getTodayDateOnlyEST(), 3), description: '', requestedBy: '', isHot: false });
-  const [savingRequest, setSavingRequest] = useState(false);
-
-  const [notification, setNotification] = useState(null);
-  const [showSendForm, setShowSendForm] = useState(false);
-  const [sendForm, setSendForm] = useState({ files: [], message: '' });
-  const [clientEmails, setClientEmails] = useState([]);
-  const [extraClientEmail, setExtraClientEmail] = useState('');
-  const [fileErrors, setFileErrors] = useState([]);
-  const [dragging, setDragging] = useState(false);
-  const dragCounter = useRef(0);
-  const [saving, setSaving] = useState(false);
-  const [downloading, setDownloading] = useState('');
-
-  const [showWorkUpload, setShowWorkUpload] = useState(false);
-  const [workForm, setWorkForm] = useState({ files: [], description: '' });
-  const [workFileErrors, setWorkFileErrors] = useState([]);
-  const [workDragging, setWorkDragging] = useState(false);
-  const workDragCounter = useRef(0);
-
-  const [companyProjects, setCompanyProjects] = useState([]);
-  const [showMoveProject, setShowMoveProject] = useState(false);
-  const [moveProjectId, setMoveProjectId] = useState('');
-  const [showNewProject, setShowNewProject] = useState(false);
-  const [newProjectName, setNewProjectName] = useState('');
-  const requesterOptions = [
-    ...(currentUser ? [{ id: currentUser.id, name: `${currentUser.name} (You)`, email: currentUser.email || '' }] : []),
-    ...companyUsers.filter(user => user.id !== currentUser?.id),
-  ];
-  const currentPrimarySubmission = getCurrentPrimarySubmission(submissions, getRevisionBaseline(task, submissions));
-  const currentDelivery = currentPrimarySubmission?.delivery || null;
-  const currentDeliveryFiles = currentDelivery?.files || [];
-  const canApprove =
-    currentUser?.role === 'client'
-    && task?.status === 'client_review';
-
-  useEffect(() => {
-    async function load() {
-      try {
-        const { data: t } = await supabase.from('tasks').select('*').eq('id', id).single();
-        if (!t) return;
-        setTask(t);
-
-        const [{ data: p }, { data: subs }, { data: team }] = await Promise.all([
-          supabase.from('projects').select('*, company:companies(*)').eq('id', t.project_id).single(),
-          supabase.from('submissions').select('*, files:submission_files(*), delivery:deliveries(*, files:delivery_files(*))').eq('task_id', id).order('version_number'),
-          supabase.from('profiles').select('*').eq('role', 'team'),
-        ]);
-        setProject(p);
-        setCompany(p?.company || null);
-        setSubmissions(subs || []);
-        setTeamMembers(team || []);
-
-        if (p?.company?.id) {
-          const [{ data: projects }, { data: users }] = await Promise.all([
-            supabase
-              .from('projects')
-              .select('id, name')
-              .eq('company_id', p.company.id)
-              .neq('id', t.project_id)
-              .order('name'),
-            supabase
-              .from('profiles')
-              .select('id, name, email')
-              .eq('company_id', p.company.id)
-              .eq('role', 'client')
-              .order('name'),
-          ]);
-          setCompanyProjects(projects || []);
-          setCompanyUsers(users || []);
-        }
-      } catch (error) {
-        console.error('TaskDetail load failed:', error);
-      } finally {
-        setLoading(false);
-      }
-    }
-    load();
-  }, [id]);
-
-  const updateStatus = async (newStatus, message) => {
-    setSaving(true);
-    await supabase.from('tasks').update({ status: newStatus }).eq('id', id);
-    setTask(t => ({ ...t, status: newStatus }));
-    setNotification(message);
-    setSaving(false);
-  };
-
-  const handleStart = async () => {
-    await supabase.from('tasks').update({
-      status: 'in_progress',
-      assigned_to: currentUser.id,
-      assigned_name: currentUser.name,
-    }).eq('id', id);
-    setTask(t => ({ ...t, status: 'in_progress', assigned_to: currentUser.id, assigned_name: currentUser.name }));
-    setNotification('✓ Job started and assigned to you.');
-  };
-  const handleOnHold = () => updateStatus('on_hold', '✓ Job placed on hold.');
-  const handleResume = () => updateStatus('in_progress', '✓ Job resumed — back to In Progress.');
-
-  const handleAssign = async (e) => {
-    const value = e.target.value;
-    const member = teamMembers.find(m => m.id === value);
-    await supabase.from('tasks').update({
-      assigned_to: value || null,
-      assigned_name: member?.name || null,
-    }).eq('id', id);
-    setTask(t => ({ ...t, assigned_to: value || null, assigned_name: member?.name || null }));
-    setNotification('✓ Job assigned.');
-  };
-
-  const processFiles = (incoming) => {
-    const combined = [...sendForm.files, ...incoming];
-    const errors = [];
-    if (combined.length + currentDeliveryFiles.length > MAX_FILES) errors.push(`Maximum ${MAX_FILES} files allowed.`);
-    incoming.filter(f => f.size > MAX_SIZE_BYTES).forEach(f => errors.push(`"${f.name}" exceeds 10 MB limit.`));
-    if (errors.length > 0) { setFileErrors(errors); return; }
-    setFileErrors([]);
-    setSendForm(f => ({ ...f, files: combined }));
-  };
-
-  const handleFileChange = (e) => {
-    processFiles(Array.from(e.target.files));
-    e.target.value = '';
-  };
-
-  const handleDragEnter = (e) => {
-    e.preventDefault();
-    dragCounter.current++;
-    setDragging(true);
-  };
-
-  const handleDragLeave = (e) => {
-    e.preventDefault();
-    dragCounter.current--;
-    if (dragCounter.current === 0) setDragging(false);
-  };
-
-  const handleDragOver = (e) => e.preventDefault();
-
-  const handleDrop = (e) => {
-    e.preventDefault();
-    dragCounter.current = 0;
-    setDragging(false);
-    const dropped = Array.from(e.dataTransfer.files);
-    if (dropped.length > 0) processFiles(dropped);
-  };
-
-  const removeFile = (index) => {
-    setSendForm(f => ({ ...f, files: f.files.filter((_, i) => i !== index) }));
-    setFileErrors([]);
-  };
-
-  const handleOpenSendForm = async () => {
-    const currentPrimary = getCurrentPrimarySubmission(submissions, getRevisionBaseline(task, submissions));
-    const [{ data: profileRows }, { data: co }, requesterResult] = await Promise.all([
-      supabase.from('profiles').select('id, email').eq('company_id', company?.id).eq('role', 'client'),
-      supabase.from('companies').select('contact_email').eq('id', company?.id).single(),
-      currentPrimary?.submitted_by
-        ? supabase.from('profiles').select('email').eq('id', currentPrimary.submitted_by).single()
-        : Promise.resolve({ data: null }),
-    ]);
-    const requesterEmail = requesterResult?.data?.email || null;
-    const profileEmails = (profileRows || []).map(u => u.email).filter(Boolean);
-    const contactEmail = co?.contact_email;
-    const orderedEmails = requesterEmail
-      ? [requesterEmail, ...profileEmails.filter(email => email !== requesterEmail)]
-      : profileEmails;
-    setClientEmails(orderedEmails.length > 0 ? orderedEmails : (contactEmail ? [contactEmail] : []));
-    setSendForm({ files: [], message: currentPrimary?.delivery?.message || '' });
-    setExtraClientEmail('');
-    setShowSendForm(true);
-  };
-
-  const handleSendToClient = async (e) => {
-    e.preventDefault();
-    setSaving(true);
-    try {
-      // 1. Validate recipients before any side effects
-      const recipients = clientEmails.length > 0 ? clientEmails : (extraClientEmail ? [extraClientEmail] : []);
-      if (recipients.length === 0) throw new Error('No client email — add one before sending.');
-
-      // 2. Find the current submission to deliver against
-      const primarySub = getCurrentPrimarySubmission(submissions, getRevisionBaseline(task, submissions));
-      if (!primarySub) { setSaving(false); return; }
-      const existingFiles = primarySub.delivery?.files || [];
-      if (sendForm.files.length === 0 && existingFiles.length === 0) {
-        throw new Error('Attach at least one file before sending.');
-      }
-
-      // 3. Upload new files to storage. Existing delivery files are kept on resend.
-      const uploadedFiles = await uploadDeliveryFiles(id, sendForm.files);
-
-      // 4. Persist extra email to company if it was provided
-      if (extraClientEmail && clientEmails.length === 0) {
-        await supabase.from('companies').update({ contact_email: extraClientEmail }).eq('id', company.id);
-        setCompany(c => ({ ...c, contact_email: extraClientEmail }));
-      }
-
-      // 5. Write delivery record and files before attempting email. The
-      // email edge function is secondary and should not block the delivery.
-      const { data: delivery, error: deliveryError } = await supabase.from('deliveries').upsert({
-        submission_id: primarySub.id,
-        sent_by: currentUser?.name,
-        message: sendForm.message,
-        sent_at: new Date().toISOString(),
-      }, { onConflict: 'submission_id' }).select().single();
-      if (deliveryError) throw new Error(`Delivery failed: ${deliveryError.message}`);
-
-      if (delivery && uploadedFiles.length > 0) {
-        const { error: filesError } = await supabase.from('delivery_files').insert(
-          uploadedFiles.map(f => ({ ...f, delivery_id: delivery.id }))
-        );
-        if (filesError) throw new Error(`File records failed: ${filesError.message}`);
-      }
-
-      // 6. Mark task as client_review
-      await supabase.from('tasks').update({ status: 'client_review' }).eq('id', id);
-      setTask(t => ({ ...t, status: 'client_review' }));
-
-      const { data: subs } = await supabase
-        .from('submissions')
-        .select('*, files:submission_files(*), delivery:deliveries(*, files:delivery_files(*))')
-        .eq('task_id', id)
-        .order('version_number');
-      setSubmissions(subs || []);
-
-      setShowSendForm(false);
-      setSendForm({ files: [], message: '' });
-      setExtraClientEmail('');
-      const totalDeliveredFiles = existingFiles.length + uploadedFiles.length;
-      const updateLabel = existingFiles.length > 0
-        ? `${uploadedFiles.length} new file${uploadedFiles.length !== 1 ? 's' : ''} added, ${totalDeliveredFiles} total`
-        : `${uploadedFiles.length} file${uploadedFiles.length !== 1 ? 's' : ''} delivered`;
-      setNotification(`✓ Sent to client — ${updateLabel}.`);
-
-      void sendEmail('sent_to_client', recipients, {
-        clientFirstName: company?.name,
-        serviceType: task.title,
-        projectName: project?.name,
-        message: sendForm.message,
-        taskId: id,
-        senderEmail: currentUser?.email,
-      }).catch((emailError) => {
-        console.error('Send-to-client email failed:', emailError);
-      });
-    } catch (err) {
-      setNotification(`✗ Error: ${err.message}`);
-    } finally {
-      setSaving(false);
-    }
-  };
-
-  const getFileUrl = async (file) => {
-    const key = `delivery:${file.storage_path}`;
-    if (downloading) return;
-    setDownloading(key);
-    try {
-      const { data } = await supabase.storage.from('deliveries').createSignedUrl(file.storage_path, 3600, {
-        download: file.name,
-      });
-      if (data?.signedUrl) window.open(data.signedUrl, '_blank');
-    } finally {
-      setDownloading('');
-    }
-  };
-
-  const getSubmissionFileUrl = async (file) => {
-    const key = `submission:${file.storage_path}`;
-    if (downloading) return;
-    setDownloading(key);
-    try {
-      const { data } = await supabase.storage.from('submissions').createSignedUrl(file.storage_path, 3600, {
-        download: file.name,
-      });
-      if (data?.signedUrl) window.open(data.signedUrl, '_blank');
-    } finally {
-      setDownloading('');
-    }
-  };
-
-  const handleDeleteTask = async () => {
-    if (!window.confirm(`Delete "${task.title}"? All submissions and files will be permanently deleted.`)) return;
-    setSaving(true);
-    try {
-      // Storage cleanup first — but don't let a storage error block the DB delete
-      try {
-        await cleanupTaskStorage([id]);
-      } catch (storageErr) {
-        console.warn('Storage cleanup failed, continuing with DB delete:', storageErr.message);
-      }
-      const { error: deleteError } = await supabase.from('tasks').delete().eq('id', id);
-      if (deleteError) throw new Error(deleteError.message);
-      navigate(`/projects/${task.project_id}`);
-    } catch (err) {
-      setNotification(`✗ Error deleting task: ${err.message}`);
-      setSaving(false);
-    }
-  };
-
-  const handleTeamApprove = async () => {
-    setSaving(true);
-    const { error } = await supabase.from('tasks').update({ status: 'client_approved', completed_at: new Date().toISOString() }).eq('id', id);
-    if (error) {
-      setNotification(`✗ Error approving: ${error.message}`);
-    } else {
-      setTask(t => ({ ...t, status: 'client_approved', completed_at: new Date().toISOString() }));
-      setNotification('✓ Job approved.');
-    }
-    setSaving(false);
-  };
-
-  const handleSaveTitle = async (e) => {
-    e.preventDefault();
-    if (!titleVal.trim()) return;
-    setSavingTitle(true);
-    await supabase.from('tasks').update({ title: titleVal.trim() }).eq('id', id);
-    setTask(t => ({ ...t, title: titleVal.trim() }));
-    setEditingTitle(false);
-    setSavingTitle(false);
-  };
-
-  const handleSaveRevision = async (e) => {
-    e.preventDefault();
-    const nextVersion = Number.parseInt(revisionVal, 10);
-    if (!Number.isInteger(nextVersion) || nextVersion < 0 || nextVersion > 99) {
-      setNotification('✗ Error: Revision must be between R00 and R99.');
-      return;
-    }
-
-    const currentVersion = getRevisionBaseline(task, submissions);
-    const hasCollision = submissions.some(sub =>
-      sub.version_number === nextVersion && sub.version_number !== currentVersion
-    );
-    if (hasCollision) {
-      setNotification(`✗ Error: ${rLabel(nextVersion)} already exists in this job history.`);
-      return;
-    }
-
-    setSavingRevision(true);
-    const currentSubmissionIds = submissions
-      .filter(sub => sub.version_number === currentVersion)
-      .map(sub => sub.id);
-
-    if (currentSubmissionIds.length > 0) {
-      const { error: submissionsError } = await supabase
-        .from('submissions')
-        .update({ version_number: nextVersion })
-        .in('id', currentSubmissionIds);
-      if (submissionsError) {
-        setNotification(`✗ Error: ${submissionsError.message}`);
-        setSavingRevision(false);
-        return;
-      }
-    }
-
-    const { error: taskError } = await supabase
-      .from('tasks')
-      .update({ current_version: nextVersion })
-      .eq('id', id);
-
-    if (taskError) {
-      setNotification(`✗ Error: ${taskError.message}`);
-    } else {
-      setTask(t => ({ ...t, current_version: nextVersion }));
-      setSubmissions(prev => prev.map(sub =>
-        sub.version_number === currentVersion ? { ...sub, version_number: nextVersion } : sub
-      ));
-      setEditingRevision(false);
-      setNotification(`✓ Revision updated to ${rLabel(nextVersion)}.`);
-    }
-    setSavingRevision(false);
-  };
-
-  const handleSaveRequest = async (e) => {
-    e.preventDefault();
-    const currentPrimary = getCurrentPrimarySubmission(submissions, getRevisionBaseline(task, submissions));
-    if (!currentPrimary) return;
-
-    setSavingRequest(true);
-    const selectedRequester = requesterOptions.find(user => user.id === requestForm.requestedBy);
-    if (!selectedRequester) {
-      setNotification('✗ Error: Please select who requested this task.');
-      setSavingRequest(false);
-      return;
-    }
-
-    const { error } = await supabase.from('submissions').update({
-      service_type: requestForm.serviceType,
-      deadline: requestForm.deadline || null,
-      is_hot: requestForm.isHot,
-      description: requestForm.description,
-      submitted_by: requestForm.requestedBy,
-      submitted_by_name: selectedRequester.name.replace(' (You)', ''),
-    }).eq('id', currentPrimary.id);
-
-    if (!error) {
-      setSubmissions(prev => prev.map(sub => sub.id === currentPrimary.id ? {
-        ...sub,
-        service_type: requestForm.serviceType,
-        deadline: requestForm.deadline || null,
-        is_hot: requestForm.isHot,
-        description: requestForm.description,
-        submitted_by: requestForm.requestedBy,
-        submitted_by_name: selectedRequester.name.replace(' (You)', ''),
-      } : sub));
-      setEditingRequest(false);
-      setNotification('✓ Request details updated.');
-    } else {
-      setNotification(`✗ Error: ${error.message}`);
-    }
-    setSavingRequest(false);
-  };
-
-  const handleMoveProject = async () => {
-    if (!moveProjectId) return;
-    const dest = companyProjects.find(p => p.id === moveProjectId);
-    await supabase.from('tasks').update({ project_id: moveProjectId }).eq('id', id);
-    setTask(t => ({ ...t, project_id: moveProjectId }));
-    setProject(p => ({ ...p, id: moveProjectId, name: dest?.name }));
-    setCompanyProjects(prev => {
-      const updated = prev.filter(p => p.id !== moveProjectId);
-      if (project) updated.push({ id: project.id, name: project.name });
-      return updated.sort((a, b) => a.name.localeCompare(b.name));
-    });
-    setShowMoveProject(false);
-    setMoveProjectId('');
-    setNotification(`✓ Job moved to "${dest?.name}".`);
-  };
-
-  const handleCreateAndMove = async () => {
-    if (!newProjectName.trim()) return;
-    setSaving(true);
-    try {
-      const { data: newProj, error } = await supabase.from('projects').insert({
-        company_id: company.id,
-        name: newProjectName.trim(),
-        status: 'active',
-      }).select().single();
-      if (error) throw new Error(error.message);
-      await supabase.from('tasks').update({ project_id: newProj.id }).eq('id', id);
-      setTask(t => ({ ...t, project_id: newProj.id }));
-      setProject(p => ({ ...p, id: newProj.id, name: newProj.name }));
-      setCompanyProjects(prev =>
-        [...prev, { id: project.id, name: project.name }].sort((a, b) => a.name.localeCompare(b.name))
-      );
-      setShowMoveProject(false);
-      setShowNewProject(false);
-      setNewProjectName('');
-      setNotification(`✓ Project "${newProj.name}" created and job moved.`);
-    } catch (err) {
-      setNotification(`✗ Error: ${err.message}`);
-    } finally {
-      setSaving(false);
-    }
-  };
-
-  const processWorkFiles = (incoming) => {
-    const combined = [...workForm.files, ...incoming];
-    const errors = [];
-    if (combined.length > MAX_FILES) errors.push(`Maximum ${MAX_FILES} files allowed.`);
-    incoming.filter(f => f.size > MAX_SIZE_BYTES).forEach(f => errors.push(`"${f.name}" exceeds 10 MB limit.`));
-    if (errors.length > 0) { setWorkFileErrors(errors); return; }
-    setWorkFileErrors([]);
-    setWorkForm(f => ({ ...f, files: combined }));
-  };
-
-  const handleWorkUpload = async (e) => {
-    e.preventDefault();
-    setSaving(true);
-    try {
-      const currentPrimary = getCurrentPrimarySubmission(submissions, getRevisionBaseline(task, submissions));
-      if (!currentPrimary) throw new Error('No submission found for this task.');
-
-      const uploadedFiles = [];
-      for (const file of workForm.files) {
-        const path = `${id}/${Date.now()}_${file.name}`;
-        const { data: uploaded, error } = await supabase.storage.from('submissions').upload(path, file);
-        if (error) throw new Error(`Upload failed: ${error.message}`);
-        if (uploaded) uploadedFiles.push({ name: file.name, storage_path: path, size: file.size });
-      }
-
-      if (uploadedFiles.length > 0) {
-        const { error: filesError } = await supabase.from('submission_files').insert(
-          uploadedFiles.map(f => ({ ...f, submission_id: currentPrimary.id }))
-        );
-        if (filesError) throw new Error(`File records failed: ${filesError.message}`);
-      }
-
-      await supabase.from('tasks').update({ status: 'client_review' }).eq('id', id);
-      setTask(t => ({ ...t, status: 'client_review' }));
-
-      const { data: subs } = await supabase
-        .from('submissions')
-        .select('*, files:submission_files(*), delivery:deliveries(*, files:delivery_files(*))')
-        .eq('task_id', id)
-        .order('version_number');
-      setSubmissions(subs || []);
-
-      setWorkForm({ files: [], description: '' });
-      setShowWorkUpload(false);
-      setNotification(`✓ Work submitted — ${uploadedFiles.length} file${uploadedFiles.length !== 1 ? 's' : ''} uploaded. Awaiting team review.`);
-    } catch (err) {
-      setNotification(`✗ Error: ${err.message}`);
-    } finally {
-      setSaving(false);
-    }
-  };
-
-  const downloadAllSubmissionFiles = async (files, versionLabel = rLabel(getRevisionBaseline(task, submissions))) => {
-    const key = `zip:${versionLabel}`;
-    if (downloading) return;
-    setDownloading(key);
-    try {
-      const zip = new JSZip();
-      for (const file of files) {
-        const { data } = await supabase.storage.from('submissions').createSignedUrl(file.storage_path, 3600, {
-          download: file.name,
-        });
-        if (data?.signedUrl) {
-          const response = await fetch(data.signedUrl);
-          const blob = await response.blob();
-          zip.file(file.name, blob);
-        }
-      }
-      const content = await zip.generateAsync({ type: 'blob' });
-      const zipName = `${project?.name || 'files'} ${versionLabel}.zip`.replace(/[^a-z0-9 ._-]/gi, '_');
-      const a = document.createElement('a');
-      a.href = URL.createObjectURL(content);
-      a.download = zipName;
-      a.click();
-      URL.revokeObjectURL(a.href);
-    } finally {
-      setDownloading('');
-    }
-  };
-
-  if (loading) return <Layout><p style={{ padding: 24, color: 'var(--text-muted)' }}>Loading...</p></Layout>;
-  if (!task) return <Layout><p>Job not found.</p></Layout>;
-
-  const revisionBaseline = getRevisionBaseline(task, submissions);
-  const titleWithVersion = `${task.title} ${rLabel(revisionBaseline)}`;
-
-  return (
-    <Layout>
-      <button className="back-link" onClick={() => navigate(`/projects/${task.project_id}`)}>
-        ← Back to {project?.name}
-      </button>
-
-      <div className="page-header">
-        <div>
-          {editingTitle && !isExternal ? (
-            <form onSubmit={handleSaveTitle} style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 4 }}>
-              <input
-                type="text"
-                value={titleVal}
-                onChange={e => setTitleVal(e.target.value)}
-                autoFocus
-                required
-                style={{ fontSize: 22, fontWeight: 700, padding: '4px 10px', margin: 0, width: 280 }}
-              />
-              <button type="submit" className="btn btn-primary btn-sm" disabled={savingTitle}>{savingTitle ? '...' : 'Save'}</button>
-              <button type="button" className="btn btn-outline btn-sm" onClick={() => setEditingTitle(false)}>Cancel</button>
-            </form>
-          ) : (
-            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
-              <div className="page-title">{titleWithVersion}</div>
-              {!isExternal && (
-                <button className="btn btn-outline btn-sm" onClick={() => { setTitleVal(task.title); setEditingTitle(true); }}>Edit</button>
-              )}
-            </div>
-          )}
-          <div className="page-subtitle">
-            {!isExternal && company && (
-              <>
-                <Link to={`/companies/${company.id}`} style={{ color: 'var(--accent)' }}>{company.name}</Link>
-                {' › '}
-              </>
-            )}
-            <Link to={`/projects/${project?.id}`} style={{ color: 'var(--accent)' }}>{project?.name}</Link>
-          </div>
-        </div>
-        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
-          <StatusBadge status={task.status} />
-          {!isExternal && (
-            <button
-              className="btn btn-outline btn-sm"
-              style={{ color: 'var(--danger, #dc2626)', borderColor: 'var(--danger, #dc2626)' }}
-              onClick={handleDeleteTask}
-            >Delete Job</button>
-          )}
-        </div>
-      </div>
-
-      {notification && <div className="notification notification-success">{notification}</div>}
-
-      {showSendForm && (
-        <div className="card" style={{ marginBottom: 24, border: '1px solid var(--accent)', borderRadius: 12 }}>
-          <div className="card-title">{currentDelivery ? 'Update Client Delivery' : 'Send to Client'} — {company?.name}</div>
-          <p style={{ fontSize: 13, color: 'var(--text-secondary)', marginBottom: 16 }}>
-            {currentDelivery
-              ? 'Add files or resend the email with the current delivery package.'
-              : 'Upload the completed file and add an optional message for the client.'}
-          </p>
-          <form onSubmit={handleSendToClient}>
-            <div className="form-group">
-              <label>
-                {currentDelivery ? 'Add Files' : 'Attach Files *'}
-                <span style={{ fontWeight: 400, color: 'var(--text-muted)', marginLeft: 6 }}>
-                  Up to {MAX_FILES} files · Max {MAX_SIZE_MB} MB each
-                </span>
-              </label>
-              <div
-                onDragEnter={handleDragEnter}
-                onDragLeave={handleDragLeave}
-                onDragOver={handleDragOver}
-                onDrop={handleDrop}
-                style={{
-                  border: `2px dashed ${dragging ? 'var(--accent)' : sendForm.files.length > 0 ? 'var(--accent)' : 'var(--border)'}`,
-                  borderRadius: 8, padding: '20px 16px', textAlign: 'center',
-                  background: dragging ? 'color-mix(in srgb, var(--accent) 8%, var(--bg))' : 'var(--bg)',
-                  transition: 'all 0.15s',
-                }}
-              >
-                <input type="file" multiple onChange={handleFileChange} style={{ display: 'none' }} id="file-upload" />
-                <label htmlFor="file-upload" style={{ cursor: 'pointer' }}>
-                  <div style={{ fontSize: 24, marginBottom: 6 }}>{dragging ? '📂' : '📎'}</div>
-                  <div style={{ fontWeight: 600, fontSize: 13 }}>
-                    {dragging
-                      ? 'Drop files here'
-                      : sendForm.files.length > 0
-                        ? `${sendForm.files.length} file${sendForm.files.length !== 1 ? 's' : ''} added — click or drag to add more`
-                        : 'Click or drag files here'}
-                  </div>
-                  <div style={{ fontSize: 12, color: 'var(--text-secondary)', marginTop: 4 }}>Any file type accepted</div>
-                </label>
-              </div>
-              {fileErrors.map((err, i) => <div key={i} style={{ fontSize: 12, color: 'var(--danger)', marginTop: 4 }}>⚠ {err}</div>)}
-              {sendForm.files.length > 0 && (
-                <div style={{ marginTop: 10, display: 'flex', flexDirection: 'column', gap: 6 }}>
-                  {sendForm.files.map((file, i) => (
-                    <div key={i} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '8px 12px', background: 'var(--card-bg)', borderRadius: 8, border: '1px solid var(--border)' }}>
-                      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
-                        <span>📄</span>
-                        <div>
-                          <div style={{ fontSize: 13, fontWeight: 600 }}>{file.name}</div>
-                          <div style={{ fontSize: 11, color: 'var(--text-muted)' }}>{formatSize(file.size)}</div>
-                        </div>
-                      </div>
-                      <button type="button" onClick={() => removeFile(i)} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--danger)', fontSize: 16 }}>✕</button>
-                    </div>
-                  ))}
-                </div>
-              )}
-              {currentDeliveryFiles.length > 0 && (
-                <div style={{ marginTop: 12 }}>
-                  <div style={{ fontSize: 11, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.5px', color: 'var(--text-muted)', marginBottom: 6 }}>
-                    Already Delivered
-                  </div>
-                  <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
-                    {currentDeliveryFiles.map((file, i) => (
-                      <div key={file.id || i} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '8px 12px', background: 'var(--card-bg)', borderRadius: 8, border: '1px solid var(--border)' }}>
-                        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
-                          <span>📄</span>
-                          <div>
-                            <div style={{ fontSize: 13, fontWeight: 600 }}>{file.name}</div>
-                            {file.size > 0 && <div style={{ fontSize: 11, color: 'var(--text-muted)' }}>{formatSize(file.size)}</div>}
-                          </div>
-                        </div>
-                        <LoadingButton className="btn btn-outline btn-sm" loading={downloading === `delivery:${file.storage_path}`} disabled={Boolean(downloading)} loadingText="Downloading..." onClick={() => getFileUrl(file)}>📥 Download</LoadingButton>
-                      </div>
-                    ))}
-                  </div>
-                </div>
-              )}
-            </div>
-            <div className="form-group">
-              <label>Message to Client <span style={{ fontWeight: 400, color: 'var(--text-muted)' }}>(optional)</span></label>
-              <textarea
-                placeholder={`Hi ${company?.name}, your ${task.title} is ready for review!`}
-                value={sendForm.message}
-                onChange={e => setSendForm(f => ({ ...f, message: e.target.value }))}
-                style={{ minHeight: 80 }}
-              />
-            </div>
-            {clientEmails.length === 0 && (
-              <div className="form-group" style={{ padding: '12px 14px', background: 'color-mix(in srgb, var(--danger) 8%, var(--bg))', borderRadius: 8, border: '1px solid var(--danger)' }}>
-                <label style={{ color: 'var(--danger)', marginBottom: 6, display: 'block' }}>
-                  ⚠ No client email on file for {company?.name}
-                </label>
-                <input
-                  type="email"
-                  required
-                  placeholder="client@example.com"
-                  value={extraClientEmail}
-                  onChange={e => setExtraClientEmail(e.target.value)}
-                />
-                <p style={{ fontSize: 12, color: 'var(--text-muted)', marginTop: 6, marginBottom: 0 }}>
-                  This will be saved as the company contact email.
-                </p>
-              </div>
-            )}
-            <div className="action-buttons">
-              <button type="submit" className="btn btn-success" disabled={(sendForm.files.length === 0 && currentDeliveryFiles.length === 0) || saving || (clientEmails.length === 0 && !extraClientEmail)}>
-                {saving ? 'Uploading...' : `✉️ ${currentDelivery ? 'Resend to Client' : 'Send to Client'}${sendForm.files.length > 0 ? ` (${sendForm.files.length} new file${sendForm.files.length !== 1 ? 's' : ''})` : ''}`}
-              </button>
-              <button type="button" className="btn btn-outline" onClick={() => { setShowSendForm(false); setSendForm({ files: [], message: '' }); setExtraClientEmail(''); }}>Cancel</button>
-            </div>
-          </form>
-        </div>
-      )}
-
-      <div className="grid-2" style={{ marginBottom: 24 }}>
-        <div className="card">
-          <div className="card-title">Job Details</div>
-          <div className="detail-grid" style={{ marginBottom: 16 }}>
-            <div className="detail-item"><label>Status</label><p><StatusBadge status={task.status} /></p></div>
-            <div className="detail-item">
-              <label>Revision</label>
-              {editingRevision && !isExternal ? (
-                <form onSubmit={handleSaveRevision} style={{ display: 'flex', alignItems: 'center', gap: 6, marginTop: 4 }}>
-                  <span style={{ fontWeight: 700, fontSize: 13 }}>R</span>
-                  <input
-                    type="text"
-                    inputMode="numeric"
-                    pattern="[0-9]*"
-                    maxLength={2}
-                    value={revisionVal}
-                    onChange={e => setRevisionVal(e.target.value.replace(/\D/g, '').slice(0, 2))}
-                    autoFocus
-                    required
-                    style={{ width: 54, padding: '4px 8px', fontSize: 13 }}
-                  />
-                  <button type="submit" className="btn btn-primary btn-sm" disabled={savingRevision}>{savingRevision ? '...' : 'Save'}</button>
-                  <button type="button" className="btn btn-outline btn-sm" onClick={() => setEditingRevision(false)}>Cancel</button>
-                </form>
-              ) : (
-                <p style={{ display: 'flex', alignItems: 'center', gap: 8, fontWeight: 700, fontSize: 16 }}>
-                  {rLabel(revisionBaseline)}
-                  {!isExternal && (
-                    <button
-                      className="btn btn-outline btn-sm"
-                      onClick={() => {
-                        setRevisionVal(String(revisionBaseline).padStart(2, '0'));
-                        setEditingRevision(true);
-                      }}
-                    >
-                      Edit
-                    </button>
-                  )}
-                </p>
-              )}
-            </div>
-            <div className="detail-item"><label>Submitted</label><p>{formatDateEST(task.submitted_at)}</p></div>
-            <div className="detail-item"><label>Completed</label><p>{task.completed_at ? formatDateEST(task.completed_at) : '—'}</p></div>
-            <div className="detail-item"><label>Revisions Done</label><p>{revisionBaseline}</p></div>
-          </div>
-          {!isExternal && (
-            <div className="form-group">
-              <label>Assigned To</label>
-              <select value={task.assigned_to || ''} onChange={handleAssign} style={{ width: '100%' }}>
-                <option value="">Unassigned</option>
-                {teamMembers.map(m => <option key={m.id} value={m.id}>{m.name}</option>)}
-              </select>
-            </div>
-          )}
-          {isExternal && task.assigned_name && (
-            <div className="form-group">
-              <label>Assigned To</label>
-              <p style={{ margin: 0, fontSize: 14, color: 'var(--text-primary)' }}>{task.assigned_name}</p>
-            </div>
-          )}
-          <div className="action-buttons" style={{ marginTop: 8 }}>
-            {task.status === 'not_started' && (
-              <button className="btn btn-primary btn-sm" onClick={handleStart} disabled={saving}>▶ Start Job</button>
-            )}
-            {task.status === 'in_progress' && (
-              <>
-                {!isExternal && !showSendForm && (
-                  <button className="btn btn-success btn-sm" onClick={handleOpenSendForm}>✉️ Send to Client</button>
-                )}
-                {isExternal && !showSendForm && (
-                  <button className="btn btn-success btn-sm" onClick={handleOpenSendForm}>✉️ Send to Client</button>
-                )}
-                <button className="btn btn-outline btn-sm" onClick={handleOnHold} disabled={saving}>⏸ Put On Hold</button>
-              </>
-            )}
-            {task.status === 'on_hold' && (
-              <button className="btn btn-primary btn-sm" onClick={handleResume} disabled={saving}>▶ Resume</button>
-            )}
-            {task.status === 'client_review' && (
-              <>
-                {!isExternal && !showSendForm && (
-                  <button className="btn btn-success btn-sm" onClick={handleOpenSendForm}>✉️ Add Files / Resend</button>
-                )}
-                {isExternal && !showSendForm && (
-                  <button className="btn btn-outline btn-sm" onClick={handleOpenSendForm}>📎 Add Files</button>
-                )}
-                {canApprove ? (
-                  <button className="btn btn-success btn-sm" onClick={handleTeamApprove} disabled={saving}>✓ Approve Request</button>
-                ) : (
-                  <div style={{ padding: '10px 14px', background: 'var(--bg)', borderRadius: 8, fontSize: 13, color: '#7c3aed', fontWeight: 500 }}>
-                    ⏳ Awaiting client review.
-                  </div>
-                )}
-              </>
-            )}
-            {task.status === 'client_approved' && (
-              <div style={{ padding: '10px 14px', background: 'var(--bg)', borderRadius: 8, fontSize: 13, color: '#16a34a', fontWeight: 500 }}>
-                ✓ Client approved this job.
-              </div>
-            )}
-          </div>
-          {!isExternal && (
-            <div style={{ marginTop: 12, paddingTop: 12, borderTop: '1px solid var(--border)' }}>
-              {!showMoveProject ? (
-                <button className="btn btn-outline btn-sm" onClick={() => setShowMoveProject(true)}>
-                  ↗ Move to Project
-                </button>
-              ) : showNewProject ? (
-                <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
-                  <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
-                    <input
-                      type="text"
-                      placeholder="New project name..."
-                      value={newProjectName}
-                      onChange={e => setNewProjectName(e.target.value)}
-                      onKeyDown={e => e.key === 'Enter' && handleCreateAndMove()}
-                      autoFocus
-                      style={{ flex: 1, fontSize: 13 }}
-                    />
-                    <button className="btn btn-primary btn-sm" onClick={handleCreateAndMove} disabled={!newProjectName.trim() || saving}>
-                      {saving ? '...' : 'Create & Move'}
-                    </button>
-                    <button className="btn btn-outline btn-sm" onClick={() => { setShowNewProject(false); setNewProjectName(''); }}>Back</button>
-                  </div>
-                </div>
-              ) : (
-                <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
-                  <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
-                    <select
-                      value={moveProjectId}
-                      onChange={e => setMoveProjectId(e.target.value)}
-                      style={{ flex: 1, fontSize: 13 }}
-                    >
-                      <option value="">Select project...</option>
-                      {companyProjects.map(p => (
-                        <option key={p.id} value={p.id}>{p.name}</option>
-                      ))}
-                    </select>
-                    <button className="btn btn-primary btn-sm" onClick={handleMoveProject} disabled={!moveProjectId}>Move</button>
-                    <button className="btn btn-outline btn-sm" onClick={() => { setShowMoveProject(false); setShowNewProject(false); setMoveProjectId(''); }}>Cancel</button>
-                  </div>
-                  <button
-                    className="btn btn-outline btn-sm"
-                    style={{ alignSelf: 'flex-start', fontSize: 12 }}
-                    onClick={() => setShowNewProject(true)}
-                  >
-                    + Create new project
-                  </button>
-                </div>
-              )}
-            </div>
-          )}
-        </div>
-
-        <div className="card">
-          <div className="card-title">Current Request Notes</div>
-          {submissions.length === 0 ? (
-            <p style={{ color: 'var(--text-muted)', fontSize: 13 }}>No request notes yet.</p>
-          ) : (() => {
-            const primary = getCurrentPrimarySubmission(submissions, revisionBaseline);
-            const currentGroup = primary ? submissions.filter(s => s.version_number === primary.version_number) : [];
-            const amendments = currentGroup.filter(s => s.type === 'amendment');
-            if (!primary) return null;
-            const startEditRequest = () => {
-              setRequestForm({
-                serviceType: primary.service_type || '',
-                deadline: primary.deadline || '',
-                description: primary.description || '',
-                requestedBy: primary.submitted_by || currentUser?.id || '',
-                isHot: Boolean(primary.is_hot),
-              });
-              setEditingRequest(true);
-            };
-            return (
-              <>
-                <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 14 }}>
-                  <span style={{ fontWeight: 700, fontSize: 13 }}>{rLabel(primary.version_number)}</span>
-                  <StatusBadge status={primary.type} />
-                  <span style={{ fontSize: 12, color: 'var(--text-muted)', marginLeft: 'auto' }}>
-                    {primary.submitted_by_name} · {formatDateEST(primary.submitted_at)}
-                  </span>
-                  {!isExternal && !editingRequest && (
-                    <button className="btn btn-outline btn-sm" onClick={startEditRequest}>Edit</button>
-                  )}
-                </div>
-                {editingRequest && !isExternal ? (
-                  <form onSubmit={handleSaveRequest}>
-                    <div className="grid-2" style={{ marginBottom: 14 }}>
-                      <div className="form-group" style={{ marginBottom: 0 }}>
-                        <label>Service Type</label>
-                        <select
-                          value={requestForm.serviceType}
-                          onChange={e => setRequestForm(f => ({ ...f, serviceType: e.target.value }))}
-                          required
-                        >
-                          <option value="">Select service...</option>
-                          {serviceTypes.map(service => (
-                            <option key={service} value={service}>{service}</option>
-                          ))}
-                        </select>
-                      </div>
-                      <div className="form-group" style={{ marginBottom: 0 }}>
-                        <label>Deadline</label>
-                        <input type="date" value={requestForm.deadline} onChange={e => setRequestForm(f => ({ ...f, deadline: e.target.value }))} />
-                      </div>
-                    </div>
-                    <div className="form-group">
-                      <label>Requested By *</label>
-                      <select value={requestForm.requestedBy} onChange={e => setRequestForm(f => ({ ...f, requestedBy: e.target.value }))} required>
-                        <option value="">Select requester...</option>
-                        {requesterOptions.map(user => (
-                          <option key={user.id} value={user.id}>
-                            {user.name}{user.email ? ` (${user.email})` : ''}
-                          </option>
-                        ))}
-                      </select>
-                    </div>
-                    <div className="form-group">
-                      <label style={{ display: 'flex', alignItems: 'center', gap: 10, fontWeight: 500, cursor: 'pointer' }}>
-                        <input
-                          type="checkbox"
-                          checked={requestForm.isHot}
-                          onChange={e => setRequestForm(f => ({ ...f, isHot: e.target.checked }))}
-                        />
-                        <span>Mark as Hot</span>
-                      </label>
-                    </div>
-                    <div className="form-group">
-                      <label>Description</label>
-                      <textarea value={requestForm.description} onChange={e => setRequestForm(f => ({ ...f, description: e.target.value }))} style={{ minHeight: 100 }} />
-                    </div>
-                    <div className="action-buttons" style={{ marginBottom: 14 }}>
-                      <button type="submit" className="btn btn-primary btn-sm" disabled={savingRequest}>{savingRequest ? 'Saving...' : 'Save'}</button>
-                      <button type="button" className="btn btn-outline btn-sm" onClick={() => setEditingRequest(false)}>Cancel</button>
-                    </div>
-                  </form>
-                ) : (
-                  <>
-                    <div className="detail-grid" style={{ marginBottom: 14 }}>
-                      <div className="detail-item"><label>Service Type</label><p>{primary.service_type}</p></div>
-                      <div className="detail-item"><label>Deadline</label><p>{primary.deadline || '—'}</p></div>
-                      <div className="detail-item"><label>Hot</label><p>{primary.is_hot ? 'Yes' : 'No'}</p></div>
-                    </div>
-                    <div className="detail-item" style={{ marginBottom: 14 }}>
-                      <label>Requested By</label>
-                      <p>{primary.submitted_by_name || '—'}</p>
-                    </div>
-                    <div>
-                      <label style={{ fontSize: 11, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.5px', color: 'var(--text-muted)' }}>Description</label>
-                      <p style={{ marginTop: 8, fontSize: 14, lineHeight: 1.7, color: 'var(--text-primary)', background: 'var(--bg)', padding: '12px 14px', borderRadius: 8, border: '1px solid var(--border)', whiteSpace: 'pre-wrap' }}>
-                        {primary.description}
-                      </p>
-                    </div>
-                  </>
-                )}
-                {amendments.map(amendment => (
-                  <div key={amendment.id} style={{ marginTop: 12, padding: '12px 14px', background: 'var(--bg)', borderRadius: 8, border: '1px solid var(--border)' }}>
-                    <div style={{ fontSize: 11, fontWeight: 700, textTransform: 'uppercase', color: 'var(--accent)', marginBottom: 6, letterSpacing: 0.5 }}>
-                      Amended Request
-                    </div>
-                    <div style={{ fontSize: 12, color: 'var(--text-muted)', marginBottom: 6 }}>
-                      {amendment.submitted_by_name} · {formatDateEST(amendment.submitted_at)}
-                    </div>
-                    <p style={{ fontSize: 13, lineHeight: 1.6, color: 'var(--text-secondary)', whiteSpace: 'pre-wrap', margin: 0 }}>{amendment.description}</p>
-                    {amendment.files?.length > 0 && (
-                      <div style={{ marginTop: 8, display: 'flex', flexDirection: 'column', gap: 4 }}>
-                        {amendment.files.map((file, fi) => (
-                          <div key={fi} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '5px 10px', background: 'var(--card-bg)', borderRadius: 6, border: '1px solid var(--border)' }}>
-                            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
-                              <span>📎</span>
-                              <span style={{ fontSize: 12, fontWeight: 500 }}>{file.name}</span>
-                            </div>
-                            <LoadingButton className="btn btn-outline btn-sm" loading={downloading === `submission:${file.storage_path}`} disabled={Boolean(downloading)} loadingText="Downloading..." onClick={() => getSubmissionFileUrl(file)}>📥 Download</LoadingButton>
-                          </div>
-                        ))}
-                      </div>
-                    )}
-                  </div>
-                ))}
-                {primary.files?.length > 0 && (
-                  <div style={{ marginTop: 12 }}>
-                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 6 }}>
-                      <label style={{ fontSize: 11, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.5px', color: 'var(--text-muted)' }}>Attached Files</label>
-                      <LoadingButton className="btn btn-outline btn-sm" loading={downloading === `zip:${rLabel(primary.version_number)}`} disabled={Boolean(downloading)} loadingText="Downloading..." onClick={() => downloadAllSubmissionFiles(primary.files, rLabel(primary.version_number))}>⬇ Download All</LoadingButton>
-                    </div>
-                    <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
-                      {primary.files.map((file, fi) => (
-                        <div key={fi} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '6px 10px', background: 'var(--bg)', borderRadius: 6, border: '1px solid var(--border)' }}>
-                          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
-                            <span>📎</span>
-                            <span style={{ fontSize: 13, fontWeight: 500 }}>{file.name}</span>
-                          </div>
-                          <LoadingButton className="btn btn-outline btn-sm" loading={downloading === `submission:${file.storage_path}`} disabled={Boolean(downloading)} loadingText="Downloading..." onClick={() => getSubmissionFileUrl(file)}>📥 Download</LoadingButton>
-                        </div>
-                      ))}
-                    </div>
-                  </div>
-                )}
-              </>
-            );
-          })()}
-        </div>
-      </div>
-
-      {showWorkUpload && (
-        <div className="card" style={{ marginBottom: 24, border: '1px solid var(--accent)', borderRadius: 12 }}>
-          <div className="card-title">Submit Finished Work</div>
-          <p style={{ fontSize: 13, color: 'var(--text-secondary)', marginBottom: 16 }}>
-            Upload your completed files. This will mark the task as ready for team review.
-          </p>
-          <form onSubmit={handleWorkUpload}>
-            <div className="form-group">
-              <label>
-                Files *
-                <span style={{ fontWeight: 400, color: 'var(--text-muted)', marginLeft: 6 }}>
-                  Up to {MAX_FILES} files · Max {MAX_SIZE_MB} MB each
-                </span>
-              </label>
-              <div
-                onDragEnter={e => { e.preventDefault(); workDragCounter.current++; setWorkDragging(true); }}
-                onDragLeave={e => { e.preventDefault(); workDragCounter.current--; if (workDragCounter.current === 0) setWorkDragging(false); }}
-                onDragOver={e => e.preventDefault()}
-                onDrop={e => { e.preventDefault(); workDragCounter.current = 0; setWorkDragging(false); const dropped = Array.from(e.dataTransfer.files); if (dropped.length > 0) processWorkFiles(dropped); }}
-                style={{
-                  border: `2px dashed ${workDragging ? 'var(--accent)' : workForm.files.length > 0 ? 'var(--accent)' : 'var(--border)'}`,
-                  borderRadius: 8, padding: '20px 16px', textAlign: 'center',
-                  background: workDragging ? 'color-mix(in srgb, var(--accent) 8%, var(--bg))' : 'var(--bg)',
-                  transition: 'all 0.15s',
-                }}
-              >
-                <input type="file" multiple onChange={e => { processWorkFiles(Array.from(e.target.files)); e.target.value = ''; }} style={{ display: 'none' }} id="work-file-upload" />
-                <label htmlFor="work-file-upload" style={{ cursor: 'pointer' }}>
-                  <div style={{ fontSize: 24, marginBottom: 6 }}>{workDragging ? '📂' : '📎'}</div>
-                  <div style={{ fontWeight: 600, fontSize: 13 }}>
-                    {workDragging ? 'Drop files here' : workForm.files.length > 0 ? `${workForm.files.length} file${workForm.files.length !== 1 ? 's' : ''} added — click or drag to add more` : 'Click or drag files here'}
-                  </div>
-                  <div style={{ fontSize: 12, color: 'var(--text-secondary)', marginTop: 4 }}>Any file type accepted</div>
-                </label>
-              </div>
-              {workFileErrors.map((err, i) => <div key={i} style={{ fontSize: 12, color: 'var(--danger)', marginTop: 4 }}>⚠ {err}</div>)}
-              {workForm.files.length > 0 && (
-                <div style={{ marginTop: 10, display: 'flex', flexDirection: 'column', gap: 6 }}>
-                  {workForm.files.map((file, i) => (
-                    <div key={i} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '8px 12px', background: 'var(--card-bg)', borderRadius: 8, border: '1px solid var(--border)' }}>
-                      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
-                        <span>📄</span>
-                        <div>
-                          <div style={{ fontSize: 13, fontWeight: 600 }}>{file.name}</div>
-                          <div style={{ fontSize: 11, color: 'var(--text-muted)' }}>{formatSize(file.size)}</div>
-                        </div>
-                      </div>
-                      <button type="button" onClick={() => setWorkForm(f => ({ ...f, files: f.files.filter((_, fi) => fi !== i) }))} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--danger)', fontSize: 16 }}>✕</button>
-                    </div>
-                  ))}
-                </div>
-              )}
-            </div>
-            <div className="form-group">
-              <label>Notes <span style={{ fontWeight: 400, color: 'var(--text-muted)' }}>(optional)</span></label>
-              <textarea
-                placeholder="Any notes for the team..."
-                value={workForm.description}
-                onChange={e => setWorkForm(f => ({ ...f, description: e.target.value }))}
-                style={{ minHeight: 80 }}
-              />
-            </div>
-            <div className="action-buttons">
-              <button type="submit" className="btn btn-primary" disabled={workForm.files.length === 0 || saving}>
-                {saving ? 'Submitting...' : `⬆ Submit${workForm.files.length > 0 ? ` (${workForm.files.length} file${workForm.files.length !== 1 ? 's' : ''})` : ''}`}
-              </button>
-              <button type="button" className="btn btn-outline" onClick={() => { setShowWorkUpload(false); setWorkForm({ files: [], description: '' }); }}>Cancel</button>
-            </div>
-          </form>
-        </div>
-      )}
-
-      {submissions.length > 0 && (
-        <div className="card">
-          <div className="card-title">Revision History</div>
-          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
-            {Object.values(
-              submissions.reduce((groups, sub) => {
-                const key = sub.version_number;
-                if (!groups[key]) groups[key] = [];
-                groups[key].push(sub);
-                return groups;
-              }, {})
-            ).reverse().map((group, gi) => {
-              const primary = group.find(s => s.type !== 'amendment') || group[0];
-              const amendments = group.filter(s => s.type === 'amendment');
-              const delivery = primary.delivery;
-              const isCurrent = gi === 0;
-              return (
-                <div key={primary.id} style={{ borderRadius: 8, border: `1px solid ${isCurrent ? 'var(--accent)' : 'var(--border)'}`, background: 'var(--bg)', overflow: 'hidden', opacity: isCurrent ? 1 : 0.85 }}>
-                  <div style={{ padding: '12px 16px', display: 'flex', alignItems: 'center', gap: 10, borderBottom: '1px solid var(--border)', background: 'var(--card-bg-2)' }}>
-                    <span style={{ fontWeight: 700, fontSize: 13 }}>{rLabel(primary.version_number)}</span>
-                    <StatusBadge status={primary.type} />
-                    {primary.revision_type && <StatusBadge status={primary.revision_type} />}
-                    {isCurrent && <span style={{ fontSize: 11, color: 'var(--accent)', fontWeight: 600 }}>Current</span>}
-                    <span style={{ fontSize: 12, color: 'var(--text-muted)', marginLeft: 'auto' }}>
-                      {primary.submitted_by_name} · {formatDateEST(primary.submitted_at)}
-                    </span>
-                  </div>
-                  <div style={{ padding: '12px 16px' }}>
-                    <div style={{ display: 'flex', gap: 24, marginBottom: 8 }}>
-                      <div>
-                        <span style={{ fontSize: 11, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.5px', color: 'var(--text-muted)' }}>Service</span>
-                        <div style={{ fontSize: 13, marginTop: 2 }}>{primary.service_type}</div>
-                      </div>
-                      <div>
-                        <span style={{ fontSize: 11, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.5px', color: 'var(--text-muted)' }}>Deadline</span>
-                        <div style={{ fontSize: 13, marginTop: 2 }}>{primary.deadline || '—'}</div>
-                      </div>
-                    </div>
-                    <p style={{ fontSize: 13, color: 'var(--text-secondary)', lineHeight: 1.6, whiteSpace: 'pre-wrap', margin: 0 }}>{primary.description}</p>
-
-                    {primary.files?.length > 0 && (
-                      <div style={{ marginTop: 10 }}>
-                        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 4 }}>
-                          <span style={{ fontSize: 11, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.5px', color: 'var(--text-muted)' }}>Attached Files</span>
-                          <LoadingButton className="btn btn-outline btn-sm" loading={downloading === `zip:${rLabel(revisionBaseline)}`} disabled={Boolean(downloading)} loadingText="Downloading..." onClick={() => downloadAllSubmissionFiles(primary.files)}>⬇ Download All</LoadingButton>
-                        </div>
-                        <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
-                          {primary.files.map((file, fi) => (
-                            <div key={fi} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '6px 10px', background: 'var(--card-bg-2)', borderRadius: 6, border: '1px solid var(--border)' }}>
-                              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
-                                <span>📎</span>
-                                <span style={{ fontSize: 13, fontWeight: 500 }}>{file.name}</span>
-                              </div>
-                              <LoadingButton className="btn btn-outline btn-sm" loading={downloading === `submission:${file.storage_path}`} disabled={Boolean(downloading)} loadingText="Downloading..." onClick={() => getSubmissionFileUrl(file)}>📥 Download</LoadingButton>
-                            </div>
-                          ))}
-                        </div>
-                      </div>
-                    )}
-                    {amendments.map(amendment => (
-                      <div key={amendment.id} style={{ marginTop: 12, padding: '12px 14px', background: 'var(--card-bg)', borderRadius: 8, border: '1px solid var(--border)' }}>
-                        <div style={{ fontSize: 11, fontWeight: 700, textTransform: 'uppercase', color: 'var(--accent)', marginBottom: 6, letterSpacing: 0.5 }}>
-                          Amended Request
-                        </div>
-                        <div style={{ fontSize: 12, color: 'var(--text-muted)', marginBottom: 6 }}>
-                          {amendment.submitted_by_name} · {formatDateEST(amendment.submitted_at)}
-                        </div>
-                        <p style={{ fontSize: 13, lineHeight: 1.6, color: 'var(--text-secondary)', whiteSpace: 'pre-wrap', margin: 0 }}>{amendment.description}</p>
-                        {amendment.files?.length > 0 && (
-                          <div style={{ marginTop: 8, display: 'flex', flexDirection: 'column', gap: 4 }}>
-                            {amendment.files.map((file, fi) => (
-                              <div key={fi} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '5px 10px', background: 'var(--bg)', borderRadius: 6, border: '1px solid var(--border)' }}>
-                                <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
-                                  <span>📎</span>
-                                  <span style={{ fontSize: 12, fontWeight: 500 }}>{file.name}</span>
-                                </div>
-                                <LoadingButton className="btn btn-outline btn-sm" loading={downloading === `submission:${file.storage_path}`} disabled={Boolean(downloading)} loadingText="Downloading..." onClick={() => getSubmissionFileUrl(file)}>📥 Download</LoadingButton>
-                              </div>
-                            ))}
-                          </div>
-                        )}
-                      </div>
-                    ))}
-                  </div>
-                  {delivery ? (
-                    <div style={{ padding: '10px 16px', borderTop: '1px solid var(--border)' }}>
-                      <div style={{ fontSize: 11, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.5px', color: '#16a34a', marginBottom: 8 }}>
-                        ✓ Delivered by {delivery.sent_by} on {formatDateEST(delivery.sent_at)}
-                      </div>
-                      <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
-                        {(delivery.files || []).map((file, fi) => (
-                          <div key={fi} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '6px 10px', background: 'var(--card-bg-2)', borderRadius: 6, border: '1px solid var(--border)' }}>
-                            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
-                              <span>📄</span>
-                              <span style={{ fontSize: 13, fontWeight: 500 }}>{file.name}</span>
-                              {file.size > 0 && <span style={{ fontSize: 11, color: 'var(--text-muted)' }}>{formatSize(file.size)}</span>}
-                            </div>
-                            <LoadingButton className="btn btn-outline btn-sm" loading={downloading === `delivery:${file.storage_path}`} disabled={Boolean(downloading)} loadingText="Downloading..." onClick={() => getFileUrl(file)}>📥 Download</LoadingButton>
-                          </div>
-                        ))}
-                      </div>
-                    </div>
-                  ) : isCurrent ? (
-                    <div style={{ padding: '10px 16px', borderTop: '1px solid var(--border)' }}>
-                      <span style={{ fontSize: 12, color: 'var(--text-muted)' }}>📎 No file delivered yet for this version.</span>
-                    </div>
-                  ) : null}
-                </div>
-              );
-            })}
-          </div>
-        </div>
-      )}
-    </Layout>
-  );
-}
diff --git a/src/pages/team/TeamProjects.jsx b/src/pages/team/TeamProjects.jsx
deleted file mode 100644
index b539373..0000000
--- a/src/pages/team/TeamProjects.jsx
+++ /dev/null
@@ -1,111 +0,0 @@
-import { useEffect, useState, useMemo } from 'react';
-import { useNavigate } from 'react-router-dom';
-import Layout from '../../components/Layout';
-import StatusBadge from '../../components/StatusBadge';
-import { supabase } from '../../lib/supabase';
-
-export default function TeamProjects() {
-  const navigate = useNavigate();
-  const [projects, setProjects] = useState([]);
-  const [loading, setLoading] = useState(true);
-  const [search, setSearch] = useState('');
-  const [activeTab, setActiveTab] = useState('all');
-
-  useEffect(() => {
-    supabase
-      .from('projects')
-      .select('id, name, status, created_at, company:companies(id, name)')
-      .order('created_at', { ascending: false })
-      .then(({ data }) => {
-        setProjects(data || []);
-        setLoading(false);
-      });
-  }, []);
-
-  const companies = useMemo(() => {
-    const seen = new Map();
-    projects.forEach(p => {
-      if (p.company?.id && !seen.has(p.company.id)) seen.set(p.company.id, p.company.name);
-    });
-    return [...seen.entries()].sort((a, b) => a[1].localeCompare(b[1]));
-  }, [projects]);
-
-  const filtered = projects.filter(p => {
-    const matchesTab = activeTab === 'all' || p.company?.id === activeTab;
-    const matchesSearch = !search ||
-      p.name.toLowerCase().includes(search.toLowerCase()) ||
-      p.company?.name?.toLowerCase().includes(search.toLowerCase());
-    return matchesTab && matchesSearch;
-  });
-
-  return (
-    <Layout>
-      <div className="page-header">
-        <div>
-          <div className="page-title">Projects</div>
-          <div className="page-subtitle">All active client projects.</div>
-        </div>
-        <input
-          type="text"
-          placeholder="Search projects..."
-          value={search}
-          onChange={e => setSearch(e.target.value)}
-          style={{ width: 220 }}
-        />
-      </div>
-
-      <div className="tab-bar" style={{ marginBottom: 20, display: 'flex', gap: 4, flexWrap: 'wrap' }}>
-        <button
-          className={`tab-btn${activeTab === 'all' ? ' active' : ''}`}
-          onClick={() => setActiveTab('all')}
-        >
-          All ({projects.length})
-        </button>
-        {companies.map(([id, name]) => {
-          const count = projects.filter(p => p.company?.id === id).length;
-          return (
-            <button
-              key={id}
-              className={`tab-btn${activeTab === id ? ' active' : ''}`}
-              onClick={() => setActiveTab(id)}
-            >
-              {name} ({count})
-            </button>
-          );
-        })}
-      </div>
-
-      {loading ? (
-        <p style={{ padding: 24, color: 'var(--text-muted)' }}>Loading...</p>
-      ) : filtered.length === 0 ? (
-        <div className="empty-state">
-          <h3>No projects found</h3>
-          <p>Projects are created from the Clients &amp; Users page.</p>
-        </div>
-      ) : (
-        <div className="table-wrapper">
-          <table>
-            <thead>
-              <tr>
-                <th>Project</th>
-                {activeTab === 'all' && <th>Client</th>}
-                <th>Status</th>
-                <th>Started</th>
-              </tr>
-            </thead>
-            <tbody>
-              {filtered.map(p => (
-                <tr key={p.id} style={{ cursor: 'pointer' }} onClick={() => navigate(`/projects/${p.id}`)}>
-                  <td style={{ fontWeight: 600 }}>{p.name}</td>
-                  {activeTab === 'all' && <td style={{ color: 'var(--text-muted)' }}>{p.company?.name || '—'}</td>}
-                  <td><StatusBadge status={p.status} /></td>
-                  <td style={{ color: 'var(--text-muted)' }}>{new Date(p.created_at).toLocaleDateString()}</td>
-                </tr>
-              ))}
-            </tbody>
-          </table>
-        </div>
-      )}
-    </Layout>
-  );
-}
diff --git a/vercel.json b/vercel.json
index c5ae177..386a3bf 100644
--- a/vercel.json
+++ b/vercel.json
@@ -1,3 +1,6 @@
 {
-  "rewrites": [{ "source": "/((?!\\.well-known).*)", "destination": "/index.html" }]
+  "rewrites": [{ "source": "/((?!\\.well-known).*)", "destination": "/index.html" }],
+  "functions": {
+    "api/backfill-request-files.js": { "maxDuration": 300 }
+  }
 }