diff --git a/.claude/settings.local.json b/.claude/settings.local.json
index 6fd1d97..0127d29 100644
--- a/.claude/settings.local.json
+++ b/.claude/settings.local.json
@@ -2,7 +2,60 @@
   "permissions": {
     "allow": [
       "Bash(\"/Users/kraohasanee/Documents/40-49 Fourge:*)",
-      "Bash(vercel --version)"
+      "Bash(vercel --version)",
+      "Bash(vercel --prod)",
+      "Bash(supabase --version)",
+      "Bash(brew install:*)",
+      "Read(//usr/local/bin/**)",
+      "Read(//Users/kraohasanee/.local/bin/**)",
+      "Read(//usr/**)",
+      "Bash(command -v supabase)",
+      "Read(//Users/kraohasanee/Library/**)",
+      "Bash(npx supabase:*)",
+      "Bash(echo $PATH)",
+      "Bash(supabase functions:*)",
+      "Bash(npm install:*)",
+      "Bash(export PATH=\"/opt/homebrew/bin:$PATH\")",
+      "Read(//opt/homebrew/bin/**)",
+      "Read(//Users/kraohasanee/.npm/bin/**)",
+      "Bash(export PATH=\"/usr/local/bin:/opt/homebrew/bin:$PATH\")",
+      "Read(//Users/kraohasanee/.supabase/**)",
+      "Bash(supabase status:*)",
+      "Bash(supabase orgs:*)",
+      "Bash(supabase projects:*)",
+      "Bash(supabase db:*)",
+      "Bash(npm run:*)",
+      "Bash(npx vercel:*)",
+      "Bash(curl -vI https://portal.fourgebranding.com)",
+      "Bash(dig portal.fourgebranding.com A +short)",
+      "Bash(dig portal.fourgebranding.com CNAME +short)",
+      "Bash(curl:*)",
+      "Bash(supabase migration:*)",
+      "Bash(ls \"/Users/kraohasanee/Documents/40-49 Fourge Branding/41 Website/fourge-portal\"/.env*)",
+      "Bash(supabase secrets:*)",
+      "Bash(stripe version:*)",
+      "Bash(stripe config:*)",
+      "Bash(stripe checkout:*)",
+      "Bash(stripe payment_intents list --limit 10)",
+      "Bash(stripe charges:*)",
+      "Bash(vercel ls:*)",
+      "Bash(vercel promote:*)",
+      "Bash(vercel inspect:*)",
+      "Bash(python3 -c \"import sys,json; d=json.load\\(sys.stdin\\); print\\(d.get\\('gitSource', d.get\\('meta', ''\\)\\)\\)\")",
+      "Bash(npx vite:*)",
+      "Bash(wait)",
+      "Bash(stripe webhook_endpoints list)",
+      "Bash(grep VITE_SUPABASE_ANON_KEY .env.local)",
+      "Bash(grep VITE_SUPABASE_ANON_KEY .env.production)",
+      "Bash(vercel whoami *)",
+      "Bash(vercel deploy *)",
+      "Bash(vercel build *)",
+      "Bash(vercel pull *)",
+      "Bash(sudo npm *)",
+      "Bash(npx vercel@latest --prod)",
+      "Bash(git add *)",
+      "Bash(git commit -m ' *)",
+      "Bash(git push *)"
     ]
   }
 }
diff --git a/.gitignore b/.gitignore
index fc5ae9f..3b62bc5 100755
--- a/.gitignore
+++ b/.gitignore
@@ -23,3 +23,4 @@ dist-ssr
 *.sln
 *.sw?
 .vercel
+supabase/.temp
diff --git a/api/fourge-passwords-crypto.js b/api/fourge-passwords-crypto.js
new file mode 100644
index 0000000..c6cc61e
--- /dev/null
+++ b/api/fourge-passwords-crypto.js
@@ -0,0 +1,98 @@
+import crypto from 'crypto';
+import { createClient } from '@supabase/supabase-js';
+
+function json(res, status, body) {
+  res.status(status).setHeader('Content-Type', 'application/json');
+  res.setHeader('Cache-Control', 'no-store');
+  res.send(JSON.stringify(body));
+}
+
+async function requireTeam(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.');
+  }
+
+  const callerClient = createClient(supabaseUrl, supabaseAnonKey, {
+    auth: { persistSession: false, autoRefreshToken: false },
+    global: { headers: { Authorization: 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('role')
+    .eq('id', userData.user.id)
+    .single();
+
+  if (profileError) {
+    return { ok: false, status: 500, message: profileError.message };
+  }
+
+  if (profile?.role !== 'team') {
+    return { ok: false, status: 403, message: 'Forbidden' };
+  }
+
+  return { ok: true };
+}
+
+function getKey() {
+  const secret = process.env.PASSWORD_VAULT_KEY || '';
+  if (!secret) throw new Error('PASSWORD_VAULT_KEY is not configured on Vercel.');
+  return Buffer.from(secret, 'base64');
+}
+
+export default async function handler(req, res) {
+  if (req.method !== 'POST') return json(res, 405, { error: 'Method not allowed' });
+
+  try {
+    const authHeader = req.headers.authorization || '';
+    if (!authHeader) return json(res, 401, { error: 'No authorization header' });
+
+    const auth = await requireTeam(authHeader);
+    if (!auth.ok) return json(res, auth.status, { error: auth.message });
+
+    const { action, plaintext, ciphertext, iv } = req.body || {};
+    const key = getKey();
+
+    if (action === 'encrypt') {
+      if (!plaintext) return json(res, 400, { error: 'plaintext required' });
+
+      const ivBuffer = crypto.randomBytes(12);
+      const cipher = crypto.createCipheriv('aes-256-gcm', key, ivBuffer);
+      const encrypted = Buffer.concat([cipher.update(String(plaintext), 'utf8'), cipher.final()]);
+      const tag = cipher.getAuthTag();
+      const packed = Buffer.concat([encrypted, tag]);
+
+      return json(res, 200, {
+        ciphertext: packed.toString('base64'),
+        iv: ivBuffer.toString('base64'),
+      });
+    }
+
+    if (action === 'decrypt') {
+      if (!ciphertext || !iv) return json(res, 400, { error: 'ciphertext and iv required' });
+
+      const raw = Buffer.from(String(ciphertext), 'base64');
+      const ivBuffer = Buffer.from(String(iv), 'base64');
+      const encrypted = raw.subarray(0, raw.length - 16);
+      const tag = raw.subarray(raw.length - 16);
+
+      const decipher = crypto.createDecipheriv('aes-256-gcm', key, ivBuffer);
+      decipher.setAuthTag(tag);
+      const decrypted = Buffer.concat([decipher.update(encrypted), decipher.final()]);
+
+      return json(res, 200, { plaintext: decrypted.toString('utf8') });
+    }
+
+    return json(res, 400, { error: 'Invalid action' });
+  } catch (error) {
+    return json(res, 500, { error: error.message || 'Unexpected server error' });
+  }
+}
diff --git a/api/seafile.js b/api/seafile.js
new file mode 100644
index 0000000..77f59f8
--- /dev/null
+++ b/api/seafile.js
@@ -0,0 +1,496 @@
+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 === '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/api/server-status.js b/api/server-status.js
new file mode 100644
index 0000000..c7e2259
--- /dev/null
+++ b/api/server-status.js
@@ -0,0 +1,446 @@
+import { createClient } from '@supabase/supabase-js';
+
+const STATUS_ENDPOINTS = {
+  supabase: 'https://supabase.statuspage.io/api/v2/summary.json',
+  vercel: 'https://www.vercel-status.com/api/v2/summary.json',
+};
+
+const SUPABASE_LIMITS = {
+  storageBytes: 1024 * 1024 * 1024,
+  databaseBytes: 500 * 1024 * 1024,
+  egressBytes: 5 * 1024 * 1024 * 1024,
+};
+
+const VERCEL_LIMITS = {
+  fastDataTransferBytes: 100 * 1024 * 1024 * 1024,
+  edgeRequests: 1_000_000,
+  functionInvocations: 1_000_000,
+  activeCpuHours: 4,
+};
+
+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 toNumber(value) {
+  if (value === undefined || value === null || value === '') return null;
+  const parsed = Number(value);
+  return Number.isFinite(parsed) ? parsed : null;
+}
+
+function makeQuota(id, label, used, limit, unit, note, source = 'live') {
+  return {
+    id,
+    label,
+    used,
+    limit,
+    unit,
+    note,
+    source,
+  };
+}
+
+async function fetchJson(url) {
+  const response = await fetch(url, {
+    headers: { 'User-Agent': 'FourgePortal/1.0' },
+  });
+
+  if (!response.ok) {
+    throw new Error(`Request failed (${response.status})`);
+  }
+
+  return response.json();
+}
+
+async function fetchStatusSummary(url) {
+  try {
+    const summary = await fetchJson(url);
+    return {
+      ok: true,
+      status: summary.status || null,
+      updatedAt: summary.page?.updated_at || null,
+      components: Array.isArray(summary.components)
+        ? summary.components.map(component => ({
+            id: component.id,
+            name: component.name,
+            status: component.status,
+          }))
+        : [],
+    };
+  } catch (error) {
+    return {
+      ok: false,
+      status: { indicator: 'major', description: error.message || 'Status unavailable' },
+      updatedAt: null,
+      components: [],
+    };
+  }
+}
+
+async function requireTeam(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.');
+  }
+
+  const callerClient = createClient(supabaseUrl, supabaseAnonKey, {
+    auth: { persistSession: false, autoRefreshToken: false },
+    global: { headers: { Authorization: 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('role')
+    .eq('id', userData.user.id)
+    .single();
+
+  if (profileError) {
+    return { ok: false, status: 500, message: profileError.message };
+  }
+
+  if (profile?.role !== 'team') {
+    return { ok: false, status: 403, message: 'Forbidden' };
+  }
+
+  return { ok: true, supabaseUrl };
+}
+
+async function countRows(client, table) {
+  const { count, error } = await client.from(table).select('id', { count: 'exact', head: true });
+  if (error) throw error;
+  return count || 0;
+}
+
+async function listStorageFolder(storageClient, bucketId, folder = '') {
+  const pageSize = 100;
+  let offset = 0;
+  const entries = [];
+
+  while (true) {
+    const { data, error } = await storageClient.from(bucketId).list(folder, {
+      limit: pageSize,
+      offset,
+      sortBy: { column: 'name', order: 'asc' },
+    });
+
+    if (error) throw error;
+    if (!data?.length) break;
+
+    entries.push(...data);
+    if (data.length < pageSize) break;
+    offset += pageSize;
+  }
+
+  return entries;
+}
+
+function isStorageFile(entry) {
+  return Boolean(entry?.metadata && typeof entry.metadata === 'object' && 'size' in entry.metadata);
+}
+
+async function getBucketUsage(storageClient, bucketId, folder = '') {
+  let totalBytes = 0;
+  let totalFiles = 0;
+
+  const entries = await listStorageFolder(storageClient, bucketId, folder);
+  for (const entry of entries) {
+    if (isStorageFile(entry)) {
+      totalFiles += 1;
+      totalBytes += Number(entry.metadata.size || 0);
+      continue;
+    }
+
+    const childFolder = folder ? `${folder}/${entry.name}` : entry.name;
+    const childUsage = await getBucketUsage(storageClient, bucketId, childFolder);
+    totalFiles += childUsage.totalFiles;
+    totalBytes += childUsage.totalBytes;
+  }
+
+  return { totalBytes, totalFiles };
+}
+
+async function getStorageUsage(admin) {
+  const { data: buckets, error } = await admin.storage.listBuckets();
+  if (error) throw error;
+
+  const bucketEntries = [];
+  let totalBytes = 0;
+  let totalFiles = 0;
+
+  for (const bucket of buckets || []) {
+    const bucketUsage = await getBucketUsage(admin.storage, bucket.id);
+    totalBytes += bucketUsage.totalBytes;
+    totalFiles += bucketUsage.totalFiles;
+    bucketEntries.push({ bucketId: bucket.id, bytes: bucketUsage.totalBytes });
+  }
+
+  bucketEntries.sort((a, b) => b.bytes - a.bytes);
+  return { totalBytes, totalFiles, buckets: bucketEntries };
+}
+
+async function getSupabaseUsageSnapshot(supabaseUrl, overridesResult) {
+  const serviceRoleKey = process.env.SUPABASE_SERVICE_ROLE_KEY;
+  const databaseBytesFallback = toNumber(process.env.SUPABASE_DB_SIZE_BYTES);
+  const egressBytesFallback = toNumber(process.env.SUPABASE_EGRESS_BYTES);
+  const overrides = overridesResult?.data || null;
+  const egressBytes = toNumber(overrides?.supabase_egress_bytes) ?? egressBytesFallback;
+
+  if (!serviceRoleKey) {
+    return {
+      configured: false,
+      message: 'Set SUPABASE_SERVICE_ROLE_KEY on Vercel to show live Supabase usage.',
+      quotas: [
+        makeQuota('storage', 'Storage', null, SUPABASE_LIMITS.storageBytes, 'bytes', 'Live storage usage is not configured.', 'unavailable'),
+        makeQuota('database', 'Database size', databaseBytesFallback, SUPABASE_LIMITS.databaseBytes, 'bytes', databaseBytesFallback === null ? 'Run the latest migration or set SUPABASE_DB_SIZE_BYTES manually.' : 'Manual value from env.', databaseBytesFallback === null ? 'unavailable' : 'manual'),
+        makeQuota('egress', 'Egress', egressBytes, SUPABASE_LIMITS.egressBytes, 'bytes', egressBytes === null ? 'Set this on the Server Status page when you want to track current egress manually.' : 'Manual value saved from Server Status.', egressBytes === null ? 'unavailable' : 'manual'),
+      ],
+      stats: [],
+    };
+  }
+
+  const admin = createClient(supabaseUrl, serviceRoleKey, {
+    auth: { persistSession: false, autoRefreshToken: false },
+  });
+
+  const [
+    storageUsage,
+    companyCount,
+    projectCount,
+    taskCount,
+    brandBookCount,
+    profileCount,
+    databaseSizeResult,
+  ] = await Promise.all([
+    getStorageUsage(admin),
+    countRows(admin, 'companies'),
+    countRows(admin, 'projects'),
+    countRows(admin, 'tasks'),
+    countRows(admin, 'brand_books'),
+    countRows(admin, 'profiles'),
+    admin.rpc('get_database_size_bytes'),
+  ]);
+
+  const databaseBytes = databaseSizeResult.error
+    ? null
+    : toNumber(databaseSizeResult.data);
+
+  return {
+    configured: true,
+    message: null,
+    quotas: [
+      makeQuota('storage', 'Storage', storageUsage.totalBytes, SUPABASE_LIMITS.storageBytes, 'bytes', `${storageUsage.totalFiles} file${storageUsage.totalFiles === 1 ? '' : 's'} across ${storageUsage.buckets.length} bucket${storageUsage.buckets.length === 1 ? '' : 's'}.`),
+      makeQuota(
+        'database',
+        'Database size',
+        databaseBytes,
+        SUPABASE_LIMITS.databaseBytes,
+        'bytes',
+        databaseBytes === null
+          ? 'Run the latest Supabase migration to enable live database-size reporting.'
+          : 'Live reading from Supabase.',
+        databaseBytes === null ? 'unavailable' : 'live'
+      ),
+      makeQuota('egress', 'Egress', egressBytes, SUPABASE_LIMITS.egressBytes, 'bytes', egressBytes === null ? 'Set this on the Server Status page when you want to track current egress manually.' : 'Manual value saved from Server Status.', egressBytes === null ? 'unavailable' : 'manual'),
+    ],
+    stats: [
+      { label: 'Storage Files', value: storageUsage.totalFiles },
+      { label: 'Buckets', value: storageUsage.buckets.length },
+      { label: 'Companies', value: companyCount },
+      { label: 'Projects', value: projectCount },
+      { label: 'Jobs', value: taskCount },
+      { label: 'Users', value: profileCount },
+      { label: 'Brand Books', value: brandBookCount },
+    ],
+    buckets: storageUsage.buckets.slice(0, 5),
+  };
+}
+
+async function getVercelUsageSnapshot() {
+  const vercelToken = process.env.VERCEL_TOKEN;
+  const teamId = process.env.VERCEL_TEAM_ID || process.env.VERCEL_ORG_ID || '';
+  const projectId = process.env.VERCEL_PROJECT_ID || '';
+
+  const fastDataTransferBytes = toNumber(process.env.VERCEL_FAST_DATA_TRANSFER_BYTES);
+  const edgeRequests = toNumber(process.env.VERCEL_EDGE_REQUESTS);
+  const functionInvocations = toNumber(process.env.VERCEL_FUNCTION_INVOCATIONS);
+  const activeCpuHours = toNumber(process.env.VERCEL_ACTIVE_CPU_HOURS);
+
+  const quotas = [
+    makeQuota('fast-data-transfer', 'Fast Data Transfer', fastDataTransferBytes, VERCEL_LIMITS.fastDataTransferBytes, 'bytes', fastDataTransferBytes === null ? 'Optional: set VERCEL_FAST_DATA_TRANSFER_BYTES to visualize current usage.' : 'Manual value from env.', fastDataTransferBytes === null ? 'unavailable' : 'manual'),
+    makeQuota('edge-requests', 'Edge Requests', edgeRequests, VERCEL_LIMITS.edgeRequests, 'count', edgeRequests === null ? 'Optional: set VERCEL_EDGE_REQUESTS to visualize current usage.' : 'Manual value from env.', edgeRequests === null ? 'unavailable' : 'manual'),
+    makeQuota('function-invocations', 'Function Invocations', functionInvocations, VERCEL_LIMITS.functionInvocations, 'count', functionInvocations === null ? 'Optional: set VERCEL_FUNCTION_INVOCATIONS to visualize current usage.' : 'Manual value from env.', functionInvocations === null ? 'unavailable' : 'manual'),
+    makeQuota('active-cpu', 'Functions Active CPU', activeCpuHours, VERCEL_LIMITS.activeCpuHours, 'hours', activeCpuHours === null ? 'Optional: set VERCEL_ACTIVE_CPU_HOURS to visualize current usage.' : 'Manual value from env.', activeCpuHours === null ? 'unavailable' : 'manual'),
+  ];
+
+  if (!vercelToken) {
+    return {
+      configured: false,
+      message: 'Set VERCEL_TOKEN on Vercel to show project and deployment counts.',
+      quotas,
+      stats: [],
+    };
+  }
+
+  const authHeaders = { Authorization: `Bearer ${vercelToken}` };
+  const teamQuery = teamId ? `?teamId=${encodeURIComponent(teamId)}` : '';
+  const deploymentParams = new URLSearchParams({
+    limit: '20',
+    since: String(Date.now() - 30 * 24 * 60 * 60 * 1000),
+  });
+
+  if (projectId) deploymentParams.set('projectId', projectId);
+  if (teamId) deploymentParams.set('teamId', teamId);
+
+  const [projectsResponse, deploymentsResponse] = await Promise.all([
+    fetch(`https://api.vercel.com/v9/projects${teamQuery}`, { headers: authHeaders }),
+    fetch(`https://api.vercel.com/v6/deployments?${deploymentParams.toString()}`, { headers: authHeaders }),
+  ]);
+
+  let projectCount = null;
+  let deployments30d = null;
+  let deploymentsToday = null;
+
+  if (projectsResponse.ok) {
+    const projectsJson = await projectsResponse.json();
+    projectCount = Array.isArray(projectsJson.projects) ? projectsJson.projects.length : null;
+  }
+
+  if (deploymentsResponse.ok) {
+    const deploymentsJson = await deploymentsResponse.json();
+    const deployments = Array.isArray(deploymentsJson.deployments) ? deploymentsJson.deployments : [];
+    deployments30d = deployments.length;
+    const todayStart = new Date();
+    todayStart.setHours(0, 0, 0, 0);
+    deploymentsToday = deployments.filter(deployment => {
+      const createdAt = Number(deployment.createdAt || 0);
+      return createdAt >= todayStart.getTime();
+    }).length;
+  }
+
+  return {
+    configured: true,
+    message: null,
+    quotas,
+    stats: [
+      ...(projectCount === null ? [] : [{ label: 'Projects', value: projectCount }]),
+      ...(deployments30d === null ? [] : [{ label: 'Deployments (30d)', value: deployments30d }]),
+      ...(deploymentsToday === null ? [] : [{ label: 'Deployments Today', value: deploymentsToday }]),
+    ],
+  };
+}
+
+function applyManualOverrides(services, overrides) {
+  if (!overrides) return services;
+
+  const updateQuota = (serviceKey, quotaId, value, note) => {
+    const service = services[serviceKey];
+    if (!service) return;
+    service.usage.quotas = (service.usage.quotas || []).map(quota =>
+      quota.id === quotaId
+        ? {
+            ...quota,
+            used: toNumber(value),
+            note: toNumber(value) === null ? quota.note : note,
+            source: toNumber(value) === null ? quota.source : 'manual',
+          }
+        : quota
+    );
+  };
+
+  updateQuota('supabase', 'egress', overrides.supabase_egress_bytes, 'Manual value saved from Server Status.');
+  updateQuota('vercel', 'fast-data-transfer', overrides.vercel_fast_data_transfer_bytes, 'Manual value saved from Server Status.');
+  updateQuota('vercel', 'edge-requests', overrides.vercel_edge_requests, 'Manual value saved from Server Status.');
+  updateQuota('vercel', 'function-invocations', overrides.vercel_function_invocations, 'Manual value saved from Server Status.');
+  updateQuota('vercel', 'active-cpu', overrides.vercel_active_cpu_hours, 'Manual value saved from Server Status.');
+
+  return services;
+}
+
+export default async function handler(req, res) {
+  if (!['GET', 'POST'].includes(req.method)) {
+    return json(res, 405, { error: 'Method not allowed' });
+  }
+
+  const authHeader = req.headers.authorization || '';
+  if (!authHeader) {
+    return json(res, 401, { error: 'Missing authorization header' });
+  }
+
+  try {
+    const authResult = await requireTeam(authHeader);
+    if (!authResult.ok) {
+      return json(res, authResult.status, { error: authResult.message });
+    }
+
+    const serviceRoleKey = process.env.SUPABASE_SERVICE_ROLE_KEY;
+    const admin = serviceRoleKey
+      ? createClient(authResult.supabaseUrl, serviceRoleKey, {
+          auth: { persistSession: false, autoRefreshToken: false },
+        })
+      : null;
+
+    if (req.method === 'POST') {
+      if (!admin) return json(res, 500, { error: 'SUPABASE_SERVICE_ROLE_KEY is required to save overrides.' });
+
+      const body = typeof req.body === 'string' ? JSON.parse(req.body || '{}') : (req.body || {});
+      const payload = {
+        id: true,
+        supabase_egress_bytes: toNumber(body.supabase_egress_bytes),
+        vercel_fast_data_transfer_bytes: toNumber(body.vercel_fast_data_transfer_bytes),
+        vercel_edge_requests: toNumber(body.vercel_edge_requests),
+        vercel_function_invocations: toNumber(body.vercel_function_invocations),
+        vercel_active_cpu_hours: toNumber(body.vercel_active_cpu_hours),
+        updated_at: new Date().toISOString(),
+      };
+
+      const { error } = await admin.from('server_status_overrides').upsert(payload);
+      if (error) return json(res, 500, { error: error.message });
+      return json(res, 200, { success: true });
+    }
+
+    const overridesResult = admin
+      ? await admin.from('server_status_overrides').select('*').eq('id', true).maybeSingle()
+      : { data: null, error: null };
+
+    const [supabaseStatus, vercelStatus, supabaseUsage, vercelUsage] = await Promise.all([
+      fetchStatusSummary(STATUS_ENDPOINTS.supabase),
+      fetchStatusSummary(STATUS_ENDPOINTS.vercel),
+      getSupabaseUsageSnapshot(authResult.supabaseUrl, overridesResult),
+      getVercelUsageSnapshot(),
+    ]);
+
+    const services = applyManualOverrides({
+      supabase: {
+        name: 'Supabase',
+        provider: 'supabase',
+        status: supabaseStatus,
+        usage: supabaseUsage,
+        limits: SUPABASE_LIMITS,
+      },
+      vercel: {
+        name: 'Vercel',
+        provider: 'vercel',
+        status: vercelStatus,
+        usage: vercelUsage,
+        limits: VERCEL_LIMITS,
+      },
+    }, overridesResult.data);
+
+    return json(res, 200, {
+      checkedAt: new Date().toISOString(),
+      overrides: overridesResult.data || null,
+      services,
+    });
+  } catch (error) {
+    return json(res, 500, { error: error.message || 'Server status failed' });
+  }
+}
diff --git a/eslint.config.js b/eslint.config.js
index 4fa125d..e0901fc 100755
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -5,7 +5,18 @@ import reactRefresh from 'eslint-plugin-react-refresh'
 import { defineConfig, globalIgnores } from 'eslint/config'
 
 export default defineConfig([
-  globalIgnores(['dist']),
+  globalIgnores(['dist', '.vercel']),
+  {
+    files: ['api/**/*.js'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.node,
+      sourceType: 'module',
+    },
+    rules: {
+      'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
+    },
+  },
   {
     files: ['**/*.{js,jsx}'],
     extends: [
diff --git a/index.html b/index.html
index 29e0177..3171ca4 100755
--- a/index.html
+++ b/index.html
@@ -3,6 +3,10 @@
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png" />
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+    <meta name="theme-color" content="#111111" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>fourge-portal</title>
   </head>
diff --git a/kakeibo-preview/index.html b/kakeibo-preview/index.html
new file mode 100644
index 0000000..bcc1d57
--- /dev/null
+++ b/kakeibo-preview/index.html
@@ -0,0 +1,1603 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Kakeibo — App Preview</title>
+<style>
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+
+  :root {
+    /* Theme: Ink (default dark) */
+    --bg: #0e0e0f;
+    --surface: #1a1a1e;
+    --surface2: #252529;
+    --surface3: #2e2e34;
+    --border: rgba(255,255,255,0.08);
+    --text: #f0f0f2;
+    --text2: #9898a8;
+    --text3: #5a5a6a;
+    --accent: #c8a96e;
+    --accent2: #7c9e8c;
+    --accent3: #9b7ea8;
+    --accent4: #8fa3c8;
+    --pill: rgba(200,169,110,0.15);
+    --pill-text: #c8a96e;
+    --red: #d47070;
+    --green: #7ca88a;
+    --tab-bg: #1a1a1e;
+    --tab-active: #c8a96e;
+    --progress-bg: rgba(255,255,255,0.08);
+    --card-shadow: 0 2px 12px rgba(0,0,0,0.4);
+    --btn-primary: #c8a96e;
+    --btn-primary-text: #0e0e0f;
+    --input-bg: #252529;
+    --status-bar: #f0f0f2;
+  }
+
+  body.theme-paper {
+    --bg: #f5f0e8;
+    --surface: #faf7f2;
+    --surface2: #ede8df;
+    --surface3: #e4ddd0;
+    --border: rgba(0,0,0,0.08);
+    --text: #2a2118;
+    --text2: #7a6a55;
+    --text3: #b0a090;
+    --accent: #8b5e3c;
+    --accent2: #5a7d5e;
+    --accent3: #7a5a8b;
+    --accent4: #4a6a8b;
+    --pill: rgba(139,94,60,0.12);
+    --pill-text: #8b5e3c;
+    --red: #c05050;
+    --green: #4a7a5a;
+    --tab-bg: #ede8df;
+    --tab-active: #8b5e3c;
+    --progress-bg: rgba(0,0,0,0.08);
+    --card-shadow: 0 2px 12px rgba(0,0,0,0.08);
+    --btn-primary: #8b5e3c;
+    --btn-primary-text: #faf7f2;
+    --input-bg: #ede8df;
+    --status-bar: #2a2118;
+  }
+
+  body.theme-sakura {
+    --bg: #1a0e14;
+    --surface: #241520;
+    --surface2: #2e1d2a;
+    --surface3: #382535;
+    --border: rgba(255,180,200,0.1);
+    --text: #f5e8f0;
+    --text2: #b890a8;
+    --text3: #7a5570;
+    --accent: #e8849c;
+    --accent2: #a08ec8;
+    --accent3: #c88e58;
+    --accent4: #88b8a8;
+    --pill: rgba(232,132,156,0.15);
+    --pill-text: #e8849c;
+    --red: #e87878;
+    --green: #88b898;
+    --tab-bg: #241520;
+    --tab-active: #e8849c;
+    --progress-bg: rgba(255,180,200,0.1);
+    --card-shadow: 0 2px 16px rgba(0,0,0,0.5);
+    --btn-primary: #e8849c;
+    --btn-primary-text: #1a0e14;
+    --input-bg: #2e1d2a;
+    --status-bar: #f5e8f0;
+  }
+
+  body.theme-stone {
+    --bg: #f0f0ee;
+    --surface: #fafafa;
+    --surface2: #e8e8e6;
+    --surface3: #dcdcda;
+    --border: rgba(0,0,0,0.07);
+    --text: #1a1a1a;
+    --text2: #6a6a6a;
+    --text3: #aaaaaa;
+    --accent: #2a2a2a;
+    --accent2: #4a7a5a;
+    --accent3: #6a4a7a;
+    --accent4: #4a5a7a;
+    --pill: rgba(42,42,42,0.1);
+    --pill-text: #2a2a2a;
+    --red: #b05050;
+    --green: #4a7a5a;
+    --tab-bg: #e8e8e6;
+    --tab-active: #2a2a2a;
+    --progress-bg: rgba(0,0,0,0.07);
+    --card-shadow: 0 2px 12px rgba(0,0,0,0.06);
+    --btn-primary: #2a2a2a;
+    --btn-primary-text: #fafafa;
+    --input-bg: #e8e8e6;
+    --status-bar: #1a1a1a;
+  }
+
+  body {
+    background: #111;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start;
+    min-height: 100vh;
+    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Hiragino Sans', system-ui, sans-serif;
+    padding: 32px 20px;
+    gap: 28px;
+  }
+
+  /* Theme switcher */
+  .theme-bar {
+    display: flex;
+    gap: 10px;
+    align-items: center;
+  }
+
+  .theme-label {
+    color: #666;
+    font-size: 12px;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    margin-right: 4px;
+  }
+
+  .theme-btn {
+    width: 28px;
+    height: 28px;
+    border-radius: 50%;
+    border: 2.5px solid transparent;
+    cursor: pointer;
+    transition: transform 0.15s, border-color 0.15s;
+    position: relative;
+  }
+  .theme-btn:hover { transform: scale(1.15); }
+  .theme-btn.active { border-color: #fff; }
+  .theme-btn.t-ink { background: linear-gradient(135deg, #0e0e0f 50%, #c8a96e 50%); }
+  .theme-btn.t-paper { background: linear-gradient(135deg, #f5f0e8 50%, #8b5e3c 50%); }
+  .theme-btn.t-sakura { background: linear-gradient(135deg, #1a0e14 50%, #e8849c 50%); }
+  .theme-btn.t-stone { background: linear-gradient(135deg, #f0f0ee 50%, #2a2a2a 50%); }
+
+  /* Screen nav */
+  .screen-nav {
+    display: flex;
+    gap: 8px;
+  }
+  .screen-btn {
+    padding: 6px 14px;
+    border-radius: 20px;
+    border: 1px solid rgba(255,255,255,0.15);
+    background: rgba(255,255,255,0.05);
+    color: #999;
+    font-size: 12px;
+    cursor: pointer;
+    transition: all 0.15s;
+    letter-spacing: 0.04em;
+  }
+  .screen-btn:hover { background: rgba(255,255,255,0.1); color: #ccc; }
+  .screen-btn.active { background: rgba(255,255,255,0.15); color: #fff; border-color: rgba(255,255,255,0.3); }
+
+  /* Phone shell */
+  .phone-wrap {
+    position: relative;
+  }
+
+  .phone {
+    width: 390px;
+    height: 844px;
+    background: var(--bg);
+    border-radius: 54px;
+    overflow: hidden;
+    position: relative;
+    box-shadow:
+      0 0 0 1px rgba(255,255,255,0.12),
+      0 0 0 10px #1c1c1e,
+      0 0 0 11px rgba(255,255,255,0.08),
+      0 40px 80px rgba(0,0,0,0.7);
+    transition: background 0.3s;
+  }
+
+  /* Dynamic island */
+  .dynamic-island {
+    position: absolute;
+    top: 12px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 120px;
+    height: 36px;
+    background: #000;
+    border-radius: 20px;
+    z-index: 100;
+  }
+
+  /* Status bar */
+  .status-bar {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 58px;
+    display: flex;
+    align-items: flex-end;
+    justify-content: space-between;
+    padding: 0 28px 8px;
+    z-index: 50;
+    color: var(--status-bar);
+    font-size: 13px;
+    font-weight: 600;
+    transition: color 0.3s;
+  }
+  .status-time { font-variant-numeric: tabular-nums; }
+  .status-icons { display: flex; gap: 6px; align-items: center; }
+  .status-icon { font-size: 12px; }
+
+  /* Screen content */
+  .screen {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: none;
+    flex-direction: column;
+    background: var(--bg);
+    transition: background 0.3s;
+    overflow: hidden;
+  }
+  .screen.active { display: flex; }
+
+  /* Scroll area */
+  .scroll-area {
+    flex: 1;
+    overflow-y: auto;
+    overflow-x: hidden;
+    padding-top: 58px;
+    padding-bottom: 100px;
+    scrollbar-width: none;
+  }
+  .scroll-area::-webkit-scrollbar { display: none; }
+
+  /* Tab bar */
+  .tab-bar {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 88px;
+    background: var(--tab-bg);
+    border-top: 1px solid var(--border);
+    display: flex;
+    align-items: flex-start;
+    padding-top: 10px;
+    z-index: 50;
+    transition: background 0.3s, border-color 0.3s;
+  }
+  .tab-item {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 4px;
+    cursor: pointer;
+    padding-top: 2px;
+  }
+  .tab-icon {
+    font-size: 22px;
+    color: var(--text3);
+    transition: color 0.2s;
+  }
+  .tab-item.active .tab-icon { color: var(--tab-active); }
+  .tab-label {
+    font-size: 10px;
+    color: var(--text3);
+    letter-spacing: 0.04em;
+    transition: color 0.2s;
+  }
+  .tab-item.active .tab-label { color: var(--tab-active); }
+
+  /* FAB */
+  .fab {
+    position: absolute;
+    bottom: 96px;
+    right: 24px;
+    width: 52px;
+    height: 52px;
+    border-radius: 50%;
+    background: var(--btn-primary);
+    color: var(--btn-primary-text);
+    font-size: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
+    cursor: pointer;
+    z-index: 60;
+    transition: background 0.3s;
+    font-weight: 300;
+    line-height: 1;
+  }
+
+  /* Typography */
+  .page-title {
+    font-size: 28px;
+    font-weight: 700;
+    color: var(--text);
+    letter-spacing: -0.5px;
+    padding: 20px 24px 4px;
+    transition: color 0.3s;
+  }
+  .page-subtitle {
+    font-size: 13px;
+    color: var(--text3);
+    padding: 0 24px 20px;
+    transition: color 0.3s;
+  }
+  .section-label {
+    font-size: 11px;
+    font-weight: 600;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+    color: var(--text3);
+    padding: 16px 24px 8px;
+    transition: color 0.3s;
+  }
+
+  /* Cards */
+  .card {
+    background: var(--surface);
+    border-radius: 20px;
+    margin: 0 16px 12px;
+    padding: 18px;
+    border: 1px solid var(--border);
+    box-shadow: var(--card-shadow);
+    transition: background 0.3s, border-color 0.3s;
+  }
+
+  /* Hero card */
+  .hero-card {
+    background: var(--surface);
+    border-radius: 24px;
+    margin: 0 16px 16px;
+    padding: 24px;
+    border: 1px solid var(--border);
+    box-shadow: var(--card-shadow);
+    transition: all 0.3s;
+  }
+  .hero-month {
+    font-size: 12px;
+    font-weight: 600;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+    color: var(--text3);
+    margin-bottom: 8px;
+  }
+  .hero-amount {
+    font-size: 42px;
+    font-weight: 700;
+    color: var(--text);
+    letter-spacing: -2px;
+    line-height: 1;
+    margin-bottom: 4px;
+    font-variant-numeric: tabular-nums;
+  }
+  .hero-currency {
+    font-size: 22px;
+    font-weight: 400;
+    color: var(--text2);
+    vertical-align: super;
+    margin-right: 4px;
+    letter-spacing: 0;
+  }
+  .hero-sub {
+    font-size: 13px;
+    color: var(--text2);
+    margin-bottom: 24px;
+  }
+  .hero-stats {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    gap: 12px;
+  }
+  .hero-stat {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
+  .hero-stat-label {
+    font-size: 10px;
+    color: var(--text3);
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+  }
+  .hero-stat-value {
+    font-size: 16px;
+    font-weight: 600;
+    color: var(--text);
+    font-variant-numeric: tabular-nums;
+  }
+  .hero-stat-value.positive { color: var(--green); }
+  .hero-stat-value.negative { color: var(--red); }
+
+  /* Pillar row */
+  .pillars {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 10px;
+    margin: 0 16px 16px;
+  }
+  .pillar-card {
+    background: var(--surface);
+    border-radius: 18px;
+    padding: 16px;
+    border: 1px solid var(--border);
+    box-shadow: var(--card-shadow);
+    transition: all 0.3s;
+    cursor: pointer;
+  }
+  .pillar-header {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 10px;
+  }
+  .pillar-icon {
+    width: 32px;
+    height: 32px;
+    border-radius: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 16px;
+  }
+  .pi-survival { background: rgba(143,163,200,0.2); }
+  .pi-optional { background: rgba(124,158,140,0.2); }
+  .pi-culture { background: rgba(155,126,168,0.2); }
+  .pi-extra { background: rgba(212,112,112,0.2); }
+  .pillar-name {
+    font-size: 12px;
+    font-weight: 600;
+    color: var(--text);
+    transition: color 0.3s;
+  }
+  .pillar-jp {
+    font-size: 10px;
+    color: var(--text3);
+    transition: color 0.3s;
+  }
+  .pillar-amounts {
+    display: flex;
+    justify-content: space-between;
+    align-items: baseline;
+    margin-bottom: 8px;
+  }
+  .pillar-spent {
+    font-size: 18px;
+    font-weight: 700;
+    color: var(--text);
+    font-variant-numeric: tabular-nums;
+    transition: color 0.3s;
+  }
+  .pillar-budget {
+    font-size: 11px;
+    color: var(--text3);
+    font-variant-numeric: tabular-nums;
+    transition: color 0.3s;
+  }
+  .progress-bar {
+    height: 4px;
+    background: var(--progress-bg);
+    border-radius: 2px;
+    overflow: hidden;
+    transition: background 0.3s;
+  }
+  .progress-fill {
+    height: 100%;
+    border-radius: 2px;
+    transition: width 0.6s ease, background 0.3s;
+  }
+  .pf-survival { background: var(--accent4); }
+  .pf-optional { background: var(--accent2); }
+  .pf-culture { background: var(--accent3); }
+  .pf-extra { background: var(--red); }
+
+  /* Recent transactions */
+  .tx-item {
+    display: flex;
+    align-items: center;
+    gap: 14px;
+    padding: 12px 0;
+    border-bottom: 1px solid var(--border);
+    transition: border-color 0.3s;
+  }
+  .tx-item:last-child { border-bottom: none; }
+  .tx-icon {
+    width: 40px;
+    height: 40px;
+    border-radius: 12px;
+    background: var(--surface2);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 18px;
+    flex-shrink: 0;
+    transition: background 0.3s;
+  }
+  .tx-info { flex: 1; min-width: 0; }
+  .tx-name {
+    font-size: 14px;
+    font-weight: 500;
+    color: var(--text);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    transition: color 0.3s;
+  }
+  .tx-meta {
+    font-size: 11px;
+    color: var(--text3);
+    margin-top: 1px;
+    transition: color 0.3s;
+  }
+  .tx-amount {
+    font-size: 15px;
+    font-weight: 600;
+    color: var(--red);
+    font-variant-numeric: tabular-nums;
+    flex-shrink: 0;
+  }
+  .tx-amount.income { color: var(--green); }
+
+  /* Envelopes screen */
+  .envelope-item {
+    display: flex;
+    align-items: center;
+    gap: 14px;
+    padding: 14px 0;
+    border-bottom: 1px solid var(--border);
+    cursor: pointer;
+    transition: border-color 0.3s;
+  }
+  .envelope-item:last-child { border-bottom: none; }
+  .envelope-icon {
+    width: 44px;
+    height: 44px;
+    border-radius: 14px;
+    background: var(--surface2);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 20px;
+    flex-shrink: 0;
+    transition: background 0.3s;
+  }
+  .envelope-info { flex: 1; min-width: 0; }
+  .envelope-name {
+    font-size: 15px;
+    font-weight: 500;
+    color: var(--text);
+    margin-bottom: 6px;
+    transition: color 0.3s;
+  }
+  .envelope-bar-wrap {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+  .envelope-bar {
+    flex: 1;
+    height: 4px;
+    background: var(--progress-bg);
+    border-radius: 2px;
+    overflow: hidden;
+    transition: background 0.3s;
+  }
+  .envelope-bar-fill {
+    height: 100%;
+    border-radius: 2px;
+    transition: width 0.6s ease;
+  }
+  .envelope-pct {
+    font-size: 10px;
+    color: var(--text3);
+    font-variant-numeric: tabular-nums;
+    flex-shrink: 0;
+    width: 28px;
+    text-align: right;
+    transition: color 0.3s;
+  }
+  .envelope-right {
+    text-align: right;
+    flex-shrink: 0;
+  }
+  .envelope-remaining {
+    font-size: 15px;
+    font-weight: 600;
+    color: var(--text);
+    font-variant-numeric: tabular-nums;
+    transition: color 0.3s;
+  }
+  .envelope-remaining.low { color: var(--red); }
+  .envelope-budget {
+    font-size: 11px;
+    color: var(--text3);
+    font-variant-numeric: tabular-nums;
+    transition: color 0.3s;
+  }
+
+  /* Pillar header row */
+  .pillar-section-header {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 18px 24px 6px;
+  }
+  .psh-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    flex-shrink: 0;
+  }
+  .psh-name {
+    font-size: 13px;
+    font-weight: 600;
+    color: var(--text2);
+    flex: 1;
+    transition: color 0.3s;
+  }
+  .psh-total {
+    font-size: 12px;
+    color: var(--text3);
+    font-variant-numeric: tabular-nums;
+    transition: color 0.3s;
+  }
+
+  /* Log transaction screen */
+  .log-header {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 68px 24px 24px;
+  }
+  .log-back {
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    background: var(--surface2);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 16px;
+    cursor: pointer;
+    color: var(--accent);
+    transition: background 0.3s;
+  }
+  .log-title {
+    font-size: 20px;
+    font-weight: 700;
+    color: var(--text);
+    flex: 1;
+    transition: color 0.3s;
+  }
+
+  .amount-display {
+    text-align: center;
+    padding: 8px 24px 32px;
+  }
+  .amount-big {
+    font-size: 56px;
+    font-weight: 300;
+    color: var(--text);
+    letter-spacing: -3px;
+    font-variant-numeric: tabular-nums;
+    transition: color 0.3s;
+  }
+  .amount-big .currency-sym {
+    font-size: 28px;
+    font-weight: 400;
+    color: var(--text3);
+    vertical-align: super;
+    margin-right: 4px;
+  }
+  .amount-cursor {
+    display: inline-block;
+    width: 2px;
+    height: 44px;
+    background: var(--accent);
+    vertical-align: middle;
+    animation: blink 1s step-end infinite;
+    border-radius: 1px;
+    transition: background 0.3s;
+  }
+  @keyframes blink { 50% { opacity: 0; } }
+
+  .form-group {
+    margin: 0 16px 12px;
+  }
+  .form-label {
+    font-size: 11px;
+    font-weight: 600;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    color: var(--text3);
+    margin-bottom: 8px;
+    padding-left: 4px;
+    transition: color 0.3s;
+  }
+  .form-input {
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: 14px;
+    padding: 14px 16px;
+    font-size: 15px;
+    color: var(--text);
+    width: 100%;
+    transition: all 0.3s;
+  }
+  .form-input.placeholder { color: var(--text3); }
+
+  .pillar-chips {
+    display: flex;
+    gap: 8px;
+    padding: 0 16px;
+    overflow-x: auto;
+    scrollbar-width: none;
+    margin-bottom: 12px;
+    -webkit-overflow-scrolling: touch;
+  }
+  .pillar-chips::-webkit-scrollbar { display: none; }
+  .pillar-chip {
+    padding: 8px 16px;
+    border-radius: 20px;
+    background: var(--surface);
+    border: 1px solid var(--border);
+    font-size: 13px;
+    color: var(--text2);
+    white-space: nowrap;
+    cursor: pointer;
+    transition: all 0.2s;
+  }
+  .pillar-chip.selected {
+    background: var(--pill);
+    border-color: var(--accent);
+    color: var(--pill-text);
+  }
+
+  .numpad {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 1px;
+    background: var(--border);
+    margin: 8px 16px 0;
+    border-radius: 18px;
+    overflow: hidden;
+  }
+  .numpad-key {
+    background: var(--surface);
+    padding: 18px;
+    text-align: center;
+    font-size: 22px;
+    font-weight: 400;
+    color: var(--text);
+    cursor: pointer;
+    transition: background 0.1s, color 0.3s;
+    user-select: none;
+  }
+  .numpad-key:active { background: var(--surface3); }
+  .numpad-key.action {
+    font-size: 16px;
+    font-weight: 600;
+    color: var(--accent);
+  }
+  .numpad-key.delete { font-size: 18px; }
+
+  /* Journal screen */
+  .month-selector {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 12px 24px;
+  }
+  .month-arrow {
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    background: var(--surface2);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 14px;
+    color: var(--text2);
+    cursor: pointer;
+    transition: background 0.3s;
+  }
+  .month-name {
+    font-size: 18px;
+    font-weight: 600;
+    color: var(--text);
+    transition: color 0.3s;
+  }
+
+  .kakeibo-questions {
+    margin: 0 16px 16px;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+  }
+  .kq-card {
+    background: var(--surface);
+    border-radius: 18px;
+    padding: 18px;
+    border: 1px solid var(--border);
+    box-shadow: var(--card-shadow);
+    transition: all 0.3s;
+  }
+  .kq-num {
+    font-size: 10px;
+    font-weight: 700;
+    letter-spacing: 0.12em;
+    color: var(--accent);
+    text-transform: uppercase;
+    margin-bottom: 4px;
+    transition: color 0.3s;
+  }
+  .kq-question {
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--text);
+    margin-bottom: 8px;
+    transition: color 0.3s;
+  }
+  .kq-answer {
+    font-size: 22px;
+    font-weight: 700;
+    color: var(--text);
+    font-variant-numeric: tabular-nums;
+    transition: color 0.3s;
+  }
+  .kq-answer.green { color: var(--green); }
+  .kq-answer.red { color: var(--red); }
+  .kq-reflection {
+    font-size: 13px;
+    color: var(--text2);
+    line-height: 1.5;
+    font-style: italic;
+    transition: color 0.3s;
+  }
+
+  .save-btn {
+    margin: 0 16px;
+    background: var(--btn-primary);
+    color: var(--btn-primary-text);
+    border-radius: 16px;
+    padding: 16px;
+    text-align: center;
+    font-size: 16px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.3s;
+  }
+
+  /* Pill badge */
+  .badge {
+    display: inline-block;
+    padding: 3px 10px;
+    border-radius: 20px;
+    background: var(--pill);
+    color: var(--pill-text);
+    font-size: 11px;
+    font-weight: 600;
+    transition: all 0.3s;
+  }
+
+  /* Savings ring visual */
+  .savings-ring-wrap {
+    display: flex;
+    justify-content: center;
+    padding: 16px 0 24px;
+  }
+  .savings-ring {
+    position: relative;
+    width: 140px;
+    height: 140px;
+  }
+  .savings-ring svg {
+    transform: rotate(-90deg);
+  }
+  .savings-ring-text {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    text-align: center;
+  }
+  .srt-pct {
+    font-size: 28px;
+    font-weight: 700;
+    color: var(--text);
+    display: block;
+    line-height: 1;
+    font-variant-numeric: tabular-nums;
+    transition: color 0.3s;
+  }
+  .srt-label {
+    font-size: 10px;
+    color: var(--text3);
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    transition: color 0.3s;
+  }
+
+  /* Streak */
+  .streak-row {
+    display: flex;
+    gap: 6px;
+    padding: 0 24px 8px;
+  }
+  .streak-dot {
+    width: 28px;
+    height: 28px;
+    border-radius: 8px;
+    background: var(--surface2);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 12px;
+    transition: background 0.3s;
+  }
+  .streak-dot.logged { background: var(--accent); }
+  .streak-dot.today { background: var(--accent); box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent); }
+
+  /* Divider */
+  .divider {
+    height: 1px;
+    background: var(--border);
+    margin: 4px 24px;
+    transition: background 0.3s;
+  }
+
+  /* Greeting */
+  .greeting {
+    padding: 68px 24px 0;
+  }
+  .greeting-ja {
+    font-size: 11px;
+    letter-spacing: 0.16em;
+    color: var(--text3);
+    margin-bottom: 4px;
+    transition: color 0.3s;
+  }
+  .greeting-main {
+    font-size: 26px;
+    font-weight: 700;
+    color: var(--text);
+    letter-spacing: -0.5px;
+    transition: color 0.3s;
+  }
+  .greeting-main span { color: var(--accent); }
+
+  /* Settings screen */
+  .settings-section {
+    margin: 0 16px 16px;
+  }
+  .setting-row {
+    display: flex;
+    align-items: center;
+    gap: 14px;
+    padding: 14px 0;
+    border-bottom: 1px solid var(--border);
+    transition: border-color 0.3s;
+  }
+  .setting-row:last-child { border-bottom: none; }
+  .setting-icon-wrap {
+    width: 36px;
+    height: 36px;
+    border-radius: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 18px;
+    flex-shrink: 0;
+  }
+  .setting-text { flex: 1; }
+  .setting-name {
+    font-size: 15px;
+    color: var(--text);
+    transition: color 0.3s;
+  }
+  .setting-value {
+    font-size: 12px;
+    color: var(--text3);
+    margin-top: 1px;
+    transition: color 0.3s;
+  }
+  .setting-chevron {
+    font-size: 14px;
+    color: var(--text3);
+    transition: color 0.3s;
+  }
+  .toggle {
+    width: 44px;
+    height: 26px;
+    border-radius: 13px;
+    background: var(--green);
+    position: relative;
+    flex-shrink: 0;
+  }
+  .toggle-knob {
+    position: absolute;
+    top: 3px;
+    right: 3px;
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    background: white;
+    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
+  }
+  .toggle.off { background: var(--surface3); }
+  .toggle.off .toggle-knob { right: auto; left: 3px; }
+</style>
+</head>
+<body>
+
+<!-- Controls -->
+<div class="theme-bar">
+  <span class="theme-label">Theme</span>
+  <div class="theme-btn t-ink active" onclick="setTheme('ink', this)" title="Ink"></div>
+  <div class="theme-btn t-paper" onclick="setTheme('paper', this)" title="Paper"></div>
+  <div class="theme-btn t-sakura" onclick="setTheme('sakura', this)" title="Sakura"></div>
+  <div class="theme-btn t-stone" onclick="setTheme('stone', this)" title="Stone"></div>
+</div>
+
+<div class="screen-nav">
+  <div class="screen-btn active" onclick="showScreen('home', this)">Home</div>
+  <div class="screen-btn" onclick="showScreen('envelopes', this)">Envelopes</div>
+  <div class="screen-btn" onclick="showScreen('log', this)">Log</div>
+  <div class="screen-btn" onclick="showScreen('journal', this)">Journal</div>
+</div>
+
+<!-- Phone -->
+<div class="phone-wrap">
+  <div class="phone" id="phone">
+    <div class="dynamic-island"></div>
+
+    <!-- STATUS BAR -->
+    <div class="status-bar">
+      <span class="status-time">9:41</span>
+      <div class="status-icons">
+        <span class="status-icon">▲</span>
+        <span class="status-icon">WiFi</span>
+        <span class="status-icon">■■■</span>
+      </div>
+    </div>
+
+    <!-- ═══════════ HOME SCREEN ═══════════ -->
+    <div class="screen active" id="screen-home">
+      <div class="scroll-area">
+        <div class="greeting">
+          <div class="greeting-ja">今月の予算 · May 2026</div>
+          <div class="greeting-main">Good morning, <span>Krao</span></div>
+        </div>
+
+        <!-- 7-day streak -->
+        <div style="padding: 16px 24px 0;">
+          <div style="display:flex; align-items:center; gap:8px; margin-bottom:8px;">
+            <span style="font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--text3); transition:color 0.3s;">Logging streak</span>
+            <span class="badge">7 days 🔥</span>
+          </div>
+          <div class="streak-row" style="padding:0;">
+            <div class="streak-dot logged">M</div>
+            <div class="streak-dot logged">T</div>
+            <div class="streak-dot logged">W</div>
+            <div class="streak-dot logged">T</div>
+            <div class="streak-dot logged">F</div>
+            <div class="streak-dot logged">S</div>
+            <div class="streak-dot today">S</div>
+          </div>
+        </div>
+
+        <!-- Hero card -->
+        <div style="padding: 16px 0 0;">
+          <div class="hero-card">
+            <div class="hero-month">Remaining Budget</div>
+            <div class="hero-amount"><span class="hero-currency">฿</span>28,450</div>
+            <div class="hero-sub">of ฿65,000 allocated this month</div>
+            <div class="hero-stats">
+              <div class="hero-stat">
+                <span class="hero-stat-label">Income</span>
+                <span class="hero-stat-value">฿85,000</span>
+              </div>
+              <div class="hero-stat">
+                <span class="hero-stat-label">Spent</span>
+                <span class="hero-stat-value negative">฿36,550</span>
+              </div>
+              <div class="hero-stat">
+                <span class="hero-stat-label">Saved</span>
+                <span class="hero-stat-value positive">฿20,000</span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Savings ring -->
+        <div class="savings-ring-wrap">
+          <div class="savings-ring">
+            <svg width="140" height="140" viewBox="0 0 140 140">
+              <circle cx="70" cy="70" r="58" fill="none" stroke="var(--progress-bg)" stroke-width="10"/>
+              <circle cx="70" cy="70" r="58" fill="none" stroke="var(--green)" stroke-width="10"
+                stroke-dasharray="364.4" stroke-dashoffset="291.5" stroke-linecap="round"/>
+            </svg>
+            <div class="savings-ring-text">
+              <span class="srt-pct">23%</span>
+              <span class="srt-label">saved</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- Pillars grid -->
+        <div class="section-label">Spending Pillars</div>
+        <div class="pillars">
+          <div class="pillar-card">
+            <div class="pillar-header">
+              <div class="pillar-icon pi-survival">🏠</div>
+              <div>
+                <div class="pillar-name">Survival</div>
+                <div class="pillar-jp">生存</div>
+              </div>
+            </div>
+            <div class="pillar-amounts">
+              <span class="pillar-spent">฿18,200</span>
+              <span class="pillar-budget">/ ฿22,000</span>
+            </div>
+            <div class="progress-bar"><div class="progress-fill pf-survival" style="width:83%"></div></div>
+          </div>
+
+          <div class="pillar-card">
+            <div class="pillar-header">
+              <div class="pillar-icon pi-optional">✨</div>
+              <div>
+                <div class="pillar-name">Optional</div>
+                <div class="pillar-jp">娯楽</div>
+              </div>
+            </div>
+            <div class="pillar-amounts">
+              <span class="pillar-spent">฿8,100</span>
+              <span class="pillar-budget">/ ฿15,000</span>
+            </div>
+            <div class="progress-bar"><div class="progress-fill pf-optional" style="width:54%"></div></div>
+          </div>
+
+          <div class="pillar-card">
+            <div class="pillar-header">
+              <div class="pillar-icon pi-culture">📚</div>
+              <div>
+                <div class="pillar-name">Culture</div>
+                <div class="pillar-jp">教養</div>
+              </div>
+            </div>
+            <div class="pillar-amounts">
+              <span class="pillar-spent">฿4,250</span>
+              <span class="pillar-budget">/ ฿8,000</span>
+            </div>
+            <div class="progress-bar"><div class="progress-fill pf-culture" style="width:53%"></div></div>
+          </div>
+
+          <div class="pillar-card">
+            <div class="pillar-header">
+              <div class="pillar-icon pi-extra">⚡</div>
+              <div>
+                <div class="pillar-name">Extra</div>
+                <div class="pillar-jp">予備</div>
+              </div>
+            </div>
+            <div class="pillar-amounts">
+              <span class="pillar-spent">฿6,000</span>
+              <span class="pillar-budget">/ ฿10,000</span>
+            </div>
+            <div class="progress-bar"><div class="progress-fill pf-extra" style="width:60%"></div></div>
+          </div>
+        </div>
+
+        <!-- Recent transactions -->
+        <div class="section-label">Recent</div>
+        <div class="card">
+          <div class="tx-item">
+            <div class="tx-icon">🛒</div>
+            <div class="tx-info">
+              <div class="tx-name">Tops Supermarket</div>
+              <div class="tx-meta">Groceries · Survival</div>
+            </div>
+            <div class="tx-amount">-฿1,240</div>
+          </div>
+          <div class="tx-item">
+            <div class="tx-icon">☕</div>
+            <div class="tx-info">
+              <div class="tx-name">Café Amazon</div>
+              <div class="tx-meta">Coffee · Optional</div>
+            </div>
+            <div class="tx-amount">-฿85</div>
+          </div>
+          <div class="tx-item">
+            <div class="tx-icon">📖</div>
+            <div class="tx-info">
+              <div class="tx-name">Kinokuniya</div>
+              <div class="tx-meta">Books · Culture</div>
+            </div>
+            <div class="tx-amount">-฿520</div>
+          </div>
+          <div class="tx-item">
+            <div class="tx-icon">💰</div>
+            <div class="tx-info">
+              <div class="tx-name">Salary</div>
+              <div class="tx-meta">Income · May 1</div>
+            </div>
+            <div class="tx-amount income">+฿85,000</div>
+          </div>
+        </div>
+      </div>
+
+      <!-- FAB -->
+      <div class="fab" onclick="showScreen('log', document.querySelector('.screen-btn:nth-child(3)'))">+</div>
+
+      <!-- Tab bar -->
+      <div class="tab-bar">
+        <div class="tab-item active" onclick="showScreen('home', document.querySelector('.screen-btn:nth-child(1)'))">
+          <div class="tab-icon">⌂</div>
+          <div class="tab-label">Home</div>
+        </div>
+        <div class="tab-item" onclick="showScreen('envelopes', document.querySelector('.screen-btn:nth-child(2)'))">
+          <div class="tab-icon">✉</div>
+          <div class="tab-label">Envelopes</div>
+        </div>
+        <div class="tab-item" onclick="showScreen('journal', document.querySelector('.screen-btn:nth-child(4)'))">
+          <div class="tab-icon">◎</div>
+          <div class="tab-label">Journal</div>
+        </div>
+        <div class="tab-item">
+          <div class="tab-icon">◈</div>
+          <div class="tab-label">Settings</div>
+        </div>
+      </div>
+    </div>
+
+    <!-- ═══════════ ENVELOPES SCREEN ═══════════ -->
+    <div class="screen" id="screen-envelopes">
+      <div class="scroll-area">
+        <div class="page-title">Envelopes</div>
+        <div class="page-subtitle">May 2026 · ฿65,000 allocated</div>
+
+        <!-- Survival -->
+        <div class="pillar-section-header">
+          <div class="psh-dot" style="background:var(--accent4)"></div>
+          <span class="psh-name">🏠 Survival · 生存</span>
+          <span class="psh-total">฿18,200 / ฿22,000</span>
+        </div>
+        <div class="card" style="margin-bottom:8px; padding: 6px 18px;">
+          <div class="envelope-item">
+            <div class="envelope-icon">🏠</div>
+            <div class="envelope-info">
+              <div class="envelope-name">Rent</div>
+              <div class="envelope-bar-wrap">
+                <div class="envelope-bar"><div class="envelope-bar-fill" style="width:100%; background:var(--accent4)"></div></div>
+                <span class="envelope-pct">100%</span>
+              </div>
+            </div>
+            <div class="envelope-right">
+              <div class="envelope-remaining low">฿0</div>
+              <div class="envelope-budget">of ฿12,000</div>
+            </div>
+          </div>
+          <div class="envelope-item">
+            <div class="envelope-icon">🛒</div>
+            <div class="envelope-info">
+              <div class="envelope-name">Groceries</div>
+              <div class="envelope-bar-wrap">
+                <div class="envelope-bar"><div class="envelope-bar-fill" style="width:62%; background:var(--accent4)"></div></div>
+                <span class="envelope-pct">62%</span>
+              </div>
+            </div>
+            <div class="envelope-right">
+              <div class="envelope-remaining">฿3,800</div>
+              <div class="envelope-budget">of ฿10,000</div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Optional -->
+        <div class="pillar-section-header">
+          <div class="psh-dot" style="background:var(--accent2)"></div>
+          <span class="psh-name">✨ Optional · 娯楽</span>
+          <span class="psh-total">฿8,100 / ฿15,000</span>
+        </div>
+        <div class="card" style="margin-bottom:8px; padding: 6px 18px;">
+          <div class="envelope-item">
+            <div class="envelope-icon">🍜</div>
+            <div class="envelope-info">
+              <div class="envelope-name">Dining Out</div>
+              <div class="envelope-bar-wrap">
+                <div class="envelope-bar"><div class="envelope-bar-fill" style="width:44%; background:var(--accent2)"></div></div>
+                <span class="envelope-pct">44%</span>
+              </div>
+            </div>
+            <div class="envelope-right">
+              <div class="envelope-remaining">฿5,600</div>
+              <div class="envelope-budget">of ฿10,000</div>
+            </div>
+          </div>
+          <div class="envelope-item">
+            <div class="envelope-icon">🛍</div>
+            <div class="envelope-info">
+              <div class="envelope-name">Shopping</div>
+              <div class="envelope-bar-wrap">
+                <div class="envelope-bar"><div class="envelope-bar-fill" style="width:76%; background:var(--accent2)"></div></div>
+                <span class="envelope-pct">76%</span>
+              </div>
+            </div>
+            <div class="envelope-right">
+              <div class="envelope-remaining">฿1,200</div>
+              <div class="envelope-budget">of ฿5,000</div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Culture -->
+        <div class="pillar-section-header">
+          <div class="psh-dot" style="background:var(--accent3)"></div>
+          <span class="psh-name">📚 Culture · 教養</span>
+          <span class="psh-total">฿4,250 / ฿8,000</span>
+        </div>
+        <div class="card" style="margin-bottom:8px; padding: 6px 18px;">
+          <div class="envelope-item">
+            <div class="envelope-icon">📖</div>
+            <div class="envelope-info">
+              <div class="envelope-name">Books</div>
+              <div class="envelope-bar-wrap">
+                <div class="envelope-bar"><div class="envelope-bar-fill" style="width:35%; background:var(--accent3)"></div></div>
+                <span class="envelope-pct">35%</span>
+              </div>
+            </div>
+            <div class="envelope-right">
+              <div class="envelope-remaining">฿3,250</div>
+              <div class="envelope-budget">of ฿5,000</div>
+            </div>
+          </div>
+          <div class="envelope-item">
+            <div class="envelope-icon">🎬</div>
+            <div class="envelope-info">
+              <div class="envelope-name">Entertainment</div>
+              <div class="envelope-bar-wrap">
+                <div class="envelope-bar"><div class="envelope-bar-fill" style="width:67%; background:var(--accent3)"></div></div>
+                <span class="envelope-pct">67%</span>
+              </div>
+            </div>
+            <div class="envelope-right">
+              <div class="envelope-remaining">฿1,000</div>
+              <div class="envelope-budget">of ฿3,000</div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Extra -->
+        <div class="pillar-section-header">
+          <div class="psh-dot" style="background:var(--red)"></div>
+          <span class="psh-name">⚡ Extra · 予備</span>
+          <span class="psh-total">฿6,000 / ฿10,000</span>
+        </div>
+        <div class="card" style="padding: 6px 18px;">
+          <div class="envelope-item">
+            <div class="envelope-icon">💊</div>
+            <div class="envelope-info">
+              <div class="envelope-name">Medical</div>
+              <div class="envelope-bar-wrap">
+                <div class="envelope-bar"><div class="envelope-bar-fill" style="width:60%; background:var(--red)"></div></div>
+                <span class="envelope-pct">60%</span>
+              </div>
+            </div>
+            <div class="envelope-right">
+              <div class="envelope-remaining">฿4,000</div>
+              <div class="envelope-budget">of ฿10,000</div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="fab">+</div>
+
+      <div class="tab-bar">
+        <div class="tab-item" onclick="showScreen('home', document.querySelector('.screen-btn:nth-child(1)'))">
+          <div class="tab-icon">⌂</div>
+          <div class="tab-label">Home</div>
+        </div>
+        <div class="tab-item active">
+          <div class="tab-icon">✉</div>
+          <div class="tab-label">Envelopes</div>
+        </div>
+        <div class="tab-item" onclick="showScreen('journal', document.querySelector('.screen-btn:nth-child(4)'))">
+          <div class="tab-icon">◎</div>
+          <div class="tab-label">Journal</div>
+        </div>
+        <div class="tab-item">
+          <div class="tab-icon">◈</div>
+          <div class="tab-label">Settings</div>
+        </div>
+      </div>
+    </div>
+
+    <!-- ═══════════ LOG SCREEN ═══════════ -->
+    <div class="screen" id="screen-log">
+      <div class="scroll-area" style="padding-bottom: 20px;">
+        <div class="log-header">
+          <div class="log-back" onclick="showScreen('home', document.querySelector('.screen-btn:nth-child(1)'))">‹</div>
+          <div class="log-title">Log Expense</div>
+          <div style="font-size:13px; color:var(--text3); transition:color 0.3s;">Today</div>
+        </div>
+
+        <div class="amount-display">
+          <div class="amount-big">
+            <span class="currency-sym">฿</span>0<span class="amount-cursor"></span>
+          </div>
+        </div>
+
+        <!-- Description -->
+        <div class="form-group">
+          <div class="form-label">What did you spend on?</div>
+          <div class="form-input placeholder">e.g. Lunch at Pier 21…</div>
+        </div>
+
+        <!-- Pillar chips -->
+        <div style="padding: 0 0 4px;">
+          <div class="form-label" style="padding: 0 20px 8px;">Pillar</div>
+          <div class="pillar-chips">
+            <div class="pillar-chip selected">🏠 Survival</div>
+            <div class="pillar-chip">✨ Optional</div>
+            <div class="pillar-chip">📚 Culture</div>
+            <div class="pillar-chip">⚡ Extra</div>
+          </div>
+        </div>
+
+        <!-- Envelope -->
+        <div class="form-group">
+          <div class="form-label">Envelope</div>
+          <div class="form-input placeholder">Select envelope →</div>
+        </div>
+
+        <!-- Note -->
+        <div class="form-group">
+          <div class="form-label">Note (optional)</div>
+          <div class="form-input placeholder" style="min-height:60px;">How did this make you feel?</div>
+        </div>
+
+        <!-- Numpad -->
+        <div class="numpad">
+          <div class="numpad-key">1</div>
+          <div class="numpad-key">2</div>
+          <div class="numpad-key">3</div>
+          <div class="numpad-key">4</div>
+          <div class="numpad-key">5</div>
+          <div class="numpad-key">6</div>
+          <div class="numpad-key">7</div>
+          <div class="numpad-key">8</div>
+          <div class="numpad-key">9</div>
+          <div class="numpad-key action">.</div>
+          <div class="numpad-key">0</div>
+          <div class="numpad-key delete">⌫</div>
+        </div>
+
+        <div style="margin: 12px 16px 0;">
+          <div class="save-btn">Save Transaction</div>
+        </div>
+      </div>
+    </div>
+
+    <!-- ═══════════ JOURNAL SCREEN ═══════════ -->
+    <div class="screen" id="screen-journal">
+      <div class="scroll-area">
+        <div class="page-title">Journal</div>
+        <div class="page-subtitle">月次記録 · Monthly reflection</div>
+
+        <div class="month-selector">
+          <div class="month-arrow">‹</div>
+          <div class="month-name">May 2026</div>
+          <div class="month-arrow">›</div>
+        </div>
+
+        <!-- Intention -->
+        <div class="section-label">This month's intention</div>
+        <div class="card">
+          <div style="font-size:13px; color:var(--text2); line-height:1.6; font-style:italic; transition:color 0.3s;">
+            "Save more by cooking at home. Try to keep Optional spending under ฿12,000 this month."
+          </div>
+        </div>
+
+        <!-- Four questions -->
+        <div class="section-label">The four questions · 四つの問い</div>
+        <div class="kakeibo-questions">
+          <div class="kq-card">
+            <div class="kq-num">01 · いくら稼ぎましたか</div>
+            <div class="kq-question">How much did you earn?</div>
+            <div class="kq-answer">฿85,000</div>
+          </div>
+
+          <div class="kq-card">
+            <div class="kq-num">02 · いくら使いましたか</div>
+            <div class="kq-question">How much did you spend?</div>
+            <div class="kq-answer red">฿36,550 <span style="font-size:13px; font-weight:400; color:var(--text3);">so far</span></div>
+          </div>
+
+          <div class="kq-card">
+            <div class="kq-num">03 · いくら貯金できましたか</div>
+            <div class="kq-question">How much did you save?</div>
+            <div class="kq-answer green">฿20,000 <span style="font-size:13px; font-weight:400; color:var(--text3);">(23%)</span></div>
+          </div>
+
+          <div class="kq-card">
+            <div class="kq-num">04 · どうすれば改善できますか</div>
+            <div class="kq-question">How can you improve?</div>
+            <div class="kq-reflection">"Shopping envelope is 76% used with 2 weeks left. Plan before buying."</div>
+          </div>
+        </div>
+
+        <!-- Past months -->
+        <div class="section-label">Past reflections</div>
+        <div class="card" style="padding: 8px 18px;">
+          <div class="tx-item">
+            <div class="tx-icon" style="background:var(--surface3);">📓</div>
+            <div class="tx-info">
+              <div class="tx-name">April 2026</div>
+              <div class="tx-meta">Saved 18% · ฿15,300</div>
+            </div>
+            <div style="color:var(--text3); font-size:14px;">›</div>
+          </div>
+          <div class="tx-item">
+            <div class="tx-icon" style="background:var(--surface3);">📓</div>
+            <div class="tx-info">
+              <div class="tx-name">March 2026</div>
+              <div class="tx-meta">Saved 22% · ฿18,700</div>
+            </div>
+            <div style="color:var(--text3); font-size:14px;">›</div>
+          </div>
+        </div>
+      </div>
+
+      <div class="tab-bar">
+        <div class="tab-item" onclick="showScreen('home', document.querySelector('.screen-btn:nth-child(1)'))">
+          <div class="tab-icon">⌂</div>
+          <div class="tab-label">Home</div>
+        </div>
+        <div class="tab-item" onclick="showScreen('envelopes', document.querySelector('.screen-btn:nth-child(2)'))">
+          <div class="tab-icon">✉</div>
+          <div class="tab-label">Envelopes</div>
+        </div>
+        <div class="tab-item active">
+          <div class="tab-icon">◎</div>
+          <div class="tab-label">Journal</div>
+        </div>
+        <div class="tab-item">
+          <div class="tab-icon">◈</div>
+          <div class="tab-label">Settings</div>
+        </div>
+      </div>
+    </div>
+
+  </div><!-- /phone -->
+</div><!-- /phone-wrap -->
+
+<script>
+function setTheme(theme, btn) {
+  document.body.className = theme === 'ink' ? '' : 'theme-' + theme;
+  document.querySelectorAll('.theme-btn').forEach(b => b.classList.remove('active'));
+  btn.classList.add('active');
+}
+
+function showScreen(name, navBtn) {
+  // hide all screens
+  document.querySelectorAll('.screen').forEach(s => s.classList.remove('active'));
+  document.getElementById('screen-' + name).classList.add('active');
+
+  // update top nav
+  document.querySelectorAll('.screen-btn').forEach(b => b.classList.remove('active'));
+  if (navBtn) navBtn.classList.add('active');
+}
+</script>
+</body>
+</html>
diff --git a/package-lock.json b/package-lock.json
index eba71c3..cec7c2d 100755
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,8 +9,11 @@
       "version": "0.0.0",
       "dependencies": {
         "@supabase/supabase-js": "^2.99.3",
+        "heic-to": "^1.4.2",
+        "heic2any": "^0.0.4",
         "jspdf": "^4.2.1",
         "jspdf-autotable": "^5.0.7",
+        "jszip": "^3.10.1",
         "react": "^19.2.4",
         "react-dom": "^19.2.4",
         "react-router-dom": "^7.13.1"
@@ -1328,6 +1331,12 @@
         "url": "https://opencollective.com/core-js"
       }
     },
+    "node_modules/core-util-is": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
+      "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==",
+      "license": "MIT"
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
@@ -1787,6 +1796,18 @@
         "node": ">=8"
       }
     },
+    "node_modules/heic-to": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/heic-to/-/heic-to-1.4.2.tgz",
+      "integrity": "sha512-y69thwxfNcEm2Vk8lbOD/cMabnvMJyOREfJYiCHcXCDqlfcPyJoBhyRc8+iDe1B95LRfpbTOpzxzY1xbRkdwBA==",
+      "license": "LGPL-3.0"
+    },
+    "node_modules/heic2any": {
+      "version": "0.0.4",
+      "resolved": "https://registry.npmjs.org/heic2any/-/heic2any-0.0.4.tgz",
+      "integrity": "sha512-3lLnZiDELfabVH87htnRolZ2iehX9zwpRyGNz22GKXIu0fznlblf0/ftppXKNqS26dqFSeqfIBhAmAj/uSp0cA==",
+      "license": "MIT"
+    },
     "node_modules/hermes-estree": {
       "version": "0.25.1",
       "resolved": "https://registry.npmjs.org/hermes-estree/-/hermes-estree-0.25.1.tgz",
@@ -1837,6 +1858,12 @@
         "node": ">= 4"
       }
     },
+    "node_modules/immediate": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz",
+      "integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==",
+      "license": "MIT"
+    },
     "node_modules/import-fresh": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
@@ -1864,6 +1891,12 @@
         "node": ">=0.8.19"
       }
     },
+    "node_modules/inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+      "license": "ISC"
+    },
     "node_modules/iobuffer": {
       "version": "5.4.0",
       "resolved": "https://registry.npmjs.org/iobuffer/-/iobuffer-5.4.0.tgz",
@@ -1893,6 +1926,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/isarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+      "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==",
+      "license": "MIT"
+    },
     "node_modules/isexe": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
@@ -1993,6 +2032,24 @@
         "jspdf": "^2 || ^3 || ^4"
       }
     },
+    "node_modules/jszip": {
+      "version": "3.10.1",
+      "resolved": "https://registry.npmjs.org/jszip/-/jszip-3.10.1.tgz",
+      "integrity": "sha512-xXDvecyTpGLrqFrvkrUSoxxfJI5AH7U8zxxtVclpsUtMCq4JQ290LY8AW5c7Ggnr/Y/oK+bQMbqK2qmtk3pN4g==",
+      "license": "(MIT OR GPL-3.0-or-later)",
+      "dependencies": {
+        "lie": "~3.3.0",
+        "pako": "~1.0.2",
+        "readable-stream": "~2.3.6",
+        "setimmediate": "^1.0.5"
+      }
+    },
+    "node_modules/jszip/node_modules/pako": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz",
+      "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==",
+      "license": "(MIT AND Zlib)"
+    },
     "node_modules/keyv": {
       "version": "4.5.4",
       "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
@@ -2017,6 +2074,15 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/lie": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/lie/-/lie-3.3.0.tgz",
+      "integrity": "sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==",
+      "license": "MIT",
+      "dependencies": {
+        "immediate": "~3.0.5"
+      }
+    },
     "node_modules/lightningcss": {
       "version": "1.32.0",
       "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.32.0.tgz",
@@ -2519,6 +2585,12 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/process-nextick-args": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
+      "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==",
+      "license": "MIT"
+    },
     "node_modules/punycode": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
@@ -2598,6 +2670,21 @@
         "react-dom": ">=18"
       }
     },
+    "node_modules/readable-stream": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
+      "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
+      "license": "MIT",
+      "dependencies": {
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.3",
+        "isarray": "~1.0.0",
+        "process-nextick-args": "~2.0.0",
+        "safe-buffer": "~5.1.1",
+        "string_decoder": "~1.1.1",
+        "util-deprecate": "~1.0.1"
+      }
+    },
     "node_modules/regenerator-runtime": {
       "version": "0.13.11",
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
@@ -2666,6 +2753,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+      "license": "MIT"
+    },
     "node_modules/scheduler": {
       "version": "0.27.0",
       "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz",
@@ -2688,6 +2781,12 @@
       "integrity": "sha512-oeM1lpU/UvhTxw+g3cIfxXHyJRc/uidd3yK1P242gzHds0udQBYzs3y8j4gCCW+ZJ7ad0yctld8RYO+bdurlvw==",
       "license": "MIT"
     },
+    "node_modules/setimmediate": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
+      "integrity": "sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA==",
+      "license": "MIT"
+    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -2731,6 +2830,15 @@
         "node": ">=0.1.14"
       }
     },
+    "node_modules/string_decoder": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+      "license": "MIT",
+      "dependencies": {
+        "safe-buffer": "~5.1.0"
+      }
+    },
     "node_modules/strip-json-comments": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
@@ -2860,6 +2968,12 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
+      "license": "MIT"
+    },
     "node_modules/utrie": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/utrie/-/utrie-1.0.2.tgz",
diff --git a/package.json b/package.json
index ca3f856..6f52232 100755
--- a/package.json
+++ b/package.json
@@ -11,8 +11,11 @@
   },
   "dependencies": {
     "@supabase/supabase-js": "^2.99.3",
+    "heic-to": "^1.4.2",
+    "heic2any": "^0.0.4",
     "jspdf": "^4.2.1",
     "jspdf-autotable": "^5.0.7",
+    "jszip": "^3.10.1",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
     "react-router-dom": "^7.13.1"
diff --git a/public/.well-known/apple-developer-merchantid-domain-association b/public/.well-known/apple-developer-merchantid-domain-association
new file mode 100644
index 0000000..579b09f
--- /dev/null
+++ b/public/.well-known/apple-developer-merchantid-domain-association
@@ -0,0 +1 @@
+7B227073704964223A2239373943394538343346343131343044463144313834343232393232313734313034353044314339464446394437384337313531303944334643463542433731222C2276657273696F6E223A312C22637265617465644F6E223A313731353230333737303832312C227369676E6174757265223A223330383030363039326138363438383666373064303130373032613038303330383030323031303133313064333030623036303936303836343830313635303330343032303133303830303630393261383634383836663730643031303730313030303061303830333038323033653333303832303338386130303330323031303230323038313636333463386230653330353731373330306130363038326138363438636533643034303330323330376133313265333032633036303335353034303330633235343137303730366336353230343137303730366336393633363137343639366636653230343936653734363536373732363137343639366636653230343334313230326432303437333333313236333032343036303335353034306230633164343137303730366336353230343336353732373436393636363936333631373436393666366532303431373537343638366637323639373437393331313333303131303630333535303430613063306134313730373036633635323034393665363332653331306233303039303630333535303430363133303235353533333031653137306433323334333033343332333933313337333433373332333735613137306433323339333033343332333833313337333433373332333635613330356633313235333032333036303335353034303330633163363536333633326437333664373032643632373236663662363537323264373336393637366535663535343333343264353035323466343433313134333031323036303335353034306230633062363934663533323035333739373337343635366437333331313333303131303630333535303430613063306134313730373036633635323034393665363332653331306233303039303630333535303430363133303235353533333035393330313330363037326138363438636533643032303130363038326138363438636533643033303130373033343230303034633231353737656465626436633762323231386636386464373039306131323138646337623062643666326332383364383436303935643934616634613534313162383334323065643831316633343037653833333331663163353463336637656233323230643662616435643465666634393238393839336537633066313361333832303231313330383230323064333030633036303335353164313330313031666630343032333030303330316630363033353531643233303431383330313638303134323366323439633434663933653465663237653663346636323836633366613262626664326534623330343530363038326230363031303530353037303130313034333933303337333033353036303832623036303130353035303733303031383632393638373437343730336132663266366636333733373032653631373037303663363532653633366636643266366636333733373033303334326436313730373036633635363136393633363133333330333233303832303131643036303335353164323030343832303131343330383230313130333038323031306330363039326138363438383666373633363430353031333038316665333038316333303630383262303630313035303530373032303233303831623630633831623335323635366336393631366536333635323036663665323037343638363937333230363336353732373436393636363936333631373436353230363237393230363136653739323037303631373237343739323036313733373337353664363537333230363136333633363537303734363136653633363532303666363632303734363836353230373436383635366532303631373037303663363936333631363236633635323037333734363136653634363137323634323037343635373236643733323036313665363432303633366636653634363937343639366636653733323036663636323037353733363532633230363336353732373436393636363936333631373436353230373036663663363936333739323036313665363432303633363537323734363936363639363336313734363936663665323037303732363136333734363936333635323037333734363137343635366436353665373437333265333033363036303832623036303130353035303730323031313632613638373437343730336132663266373737373737326536313730373036633635326536333666366432663633363537323734363936363639363336313734363536313735373436383666373236393734373932663330333430363033353531643166303432643330326233303239613032376130323538363233363837343734373033613266326636333732366332653631373037303663363532653633366636643266363137303730366336353631363936333631333332653633373236633330316430363033353531643065303431363034313439343537646236666435373438313836383938393736326637653537383530376537396235383234333030653036303335353164306630313031666630343034303330323037383033303066303630393261383634383836663736333634303631643034303230353030333030613036303832613836343863653364303430333032303334393030333034363032323130306336663032336362323631346262333033383838613136323938336531613933663130353666353066613738636462396261346361323431636331346532356530323231303062653363643064666431363234376636343934343735333830653964343463323238613130383930613361316463373234623862346362383838393831386263333038323032656533303832303237356130303330323031303230323038343936643266626633613938646139373330306130363038326138363438636533643034303330323330363733313162333031393036303335353034303330633132343137303730366336353230353236663666373432303433343132303264323034373333333132363330323430363033353530343062306331643431373037303663363532303433363537323734363936363639363336313734363936663665323034313735373436383666373236393734373933313133333031313036303335353034306130633061343137303730366336353230343936653633326533313062333030393036303335353034303631333032353535333330316531373064333133343330333533303336333233333334333633333330356131373064333233393330333533303336333233333334333633333330356133303761333132653330326330363033353530343033306332353431373037303663363532303431373037303663363936333631373436393666366532303439366537343635363737323631373436393666366532303433343132303264323034373333333132363330323430363033353530343062306331643431373037303663363532303433363537323734363936363639363336313734363936663665323034313735373436383666373236393734373933313133333031313036303335353034306130633061343137303730366336353230343936653633326533313062333030393036303335353034303631333032353535333330353933303133303630373261383634386365336430323031303630383261383634386365336430333031303730333432303030346630313731313834313964373634383564353161356532353831303737366538383061326566646537626165346465303864666334623933653133333536643536363562333561653232643039373736306432323465376262613038666437363137636538386362373662623636373062656338653832393834666635343435613338316637333038316634333034363036303832623036303130353035303730313031303433613330333833303336303630383262303630313035303530373330303138363261363837343734373033613266326636663633373337303265363137303730366336353265363336663664326636663633373337303330333432643631373037303663363537323666366637343633363136373333333031643036303335353164306530343136303431343233663234396334346639336534656632376536633466363238366333666132626266643265346233303066303630333535316431333031303166663034303533303033303130316666333031663036303335353164323330343138333031363830313462626230646561313538333338383961613438613939646562656264656261666461636232346162333033373036303335353164316630343330333032653330326361303261613032383836323636383734373437303361326632663633373236633265363137303730366336353265363336663664326636313730373036633635373236663666373436333631363733333265363337323663333030653036303335353164306630313031666630343034303330323031303633303130303630613261383634383836663736333634303630323065303430323035303033303061303630383261383634386365336430343033303230333637303033303634303233303361636637323833353131363939623138366662333563333536636136326266663431376564643930663735346461323865626566313963383135653432623738396638393866373962353939663938643534313064386639646539633266653032333033323264643534343231623061333035373736633564663333383362393036376664313737633263323136643936346663363732363938323132366635346638376137643162393963623962303938393231363130363939306630393932316430303030333138323031383833303832303138343032303130313330383138363330376133313265333032633036303335353034303330633235343137303730366336353230343137303730366336393633363137343639366636653230343936653734363536373732363137343639366636653230343334313230326432303437333333313236333032343036303335353034306230633164343137303730366336353230343336353732373436393636363936333631373436393666366532303431373537343638366637323639373437393331313333303131303630333535303430613063306134313730373036633635323034393665363332653331306233303039303630333535303430363133303235353533303230383136363334633862306533303537313733303062303630393630383634383031363530333034303230316130383139333330313830363039326138363438383666373064303130393033333130623036303932613836343838366637306430313037303133303163303630393261383634383836663730643031303930353331306631373064333233343330333533303338333233313332333933333330356133303238303630393261383634383836663730643031303933343331316233303139333030623036303936303836343830313635303330343032303161313061303630383261383634386365336430343033303233303266303630393261383634383836663730643031303930343331323230343230333232323236336439393239313365333235663163306437643761363331346230343535303337343561363032346633633930313232366166333530626332653330306130363038326138363438636533643034303330323034343733303435303232303537386536353236623062356233306465323562346231343865366632336530626438383631353335613666623865633461396465373338343333633262653530323231303062653834323635333334393162303965376330306437333565323762643865623236373964653462366433613138666434636564386261376565306166383161303030303030303030303030227D
\ No newline at end of file
diff --git a/public/apple-touch-icon.png b/public/apple-touch-icon.png
new file mode 100644
index 0000000..ac15e90
Binary files /dev/null and b/public/apple-touch-icon.png differ
diff --git a/public/favicon-16.png b/public/favicon-16.png
new file mode 100644
index 0000000..99492e0
Binary files /dev/null and b/public/favicon-16.png differ
diff --git a/public/favicon-32.png b/public/favicon-32.png
new file mode 100644
index 0000000..9f38fea
Binary files /dev/null and b/public/favicon-32.png differ
diff --git a/public/favicon.svg b/public/favicon.svg
old mode 100755
new mode 100644
index 6893eb1..271b8b9
--- a/public/favicon.svg
+++ b/public/favicon.svg
@@ -1 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="48" height="46" fill="none" viewBox="0 0 48 46"><path fill="#863bff" d="M25.946 44.938c-.664.845-2.021.375-2.021-.698V33.937a2.26 2.26 0 0 0-2.262-2.262H10.287c-.92 0-1.456-1.04-.92-1.788l7.48-10.471c1.07-1.497 0-3.578-1.842-3.578H1.237c-.92 0-1.456-1.04-.92-1.788L10.013.474c.214-.297.556-.474.92-.474h28.894c.92 0 1.456 1.04.92 1.788l-7.48 10.471c-1.07 1.498 0 3.579 1.842 3.579h11.377c.943 0 1.473 1.088.89 1.83L25.947 44.94z" style="fill:#863bff;fill:color(display-p3 .5252 .23 1);fill-opacity:1"/><mask id="a" width="48" height="46" x="0" y="0" maskUnits="userSpaceOnUse" style="mask-type:alpha"><path fill="#000" d="M25.842 44.938c-.664.844-2.021.375-2.021-.698V33.937a2.26 2.26 0 0 0-2.262-2.262H10.183c-.92 0-1.456-1.04-.92-1.788l7.48-10.471c1.07-1.498 0-3.579-1.842-3.579H1.133c-.92 0-1.456-1.04-.92-1.787L9.91.473c.214-.297.556-.474.92-.474h28.894c.92 0 1.456 1.04.92 1.788l-7.48 10.471c-1.07 1.498 0 3.578 1.842 3.578h11.377c.943 0 1.473 1.088.89 1.832L25.843 44.94z" style="fill:#000;fill-opacity:1"/></mask><g mask="url(#a)"><g filter="url(#b)"><ellipse cx="5.508" cy="14.704" fill="#ede6ff" rx="5.508" ry="14.704" style="fill:#ede6ff;fill:color(display-p3 .9275 .9033 1);fill-opacity:1" transform="matrix(.00324 1 1 -.00324 -4.47 31.516)"/></g><g filter="url(#c)"><ellipse cx="10.399" cy="29.851" fill="#ede6ff" rx="10.399" ry="29.851" style="fill:#ede6ff;fill:color(display-p3 .9275 .9033 1);fill-opacity:1" transform="matrix(.00324 1 1 -.00324 -39.328 7.883)"/></g><g filter="url(#d)"><ellipse cx="5.508" cy="30.487" fill="#7e14ff" rx="5.508" ry="30.487" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.814 -25.913 -14.639)scale(1 -1)"/></g><g filter="url(#e)"><ellipse cx="5.508" cy="30.599" fill="#7e14ff" rx="5.508" ry="30.599" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.814 -32.644 -3.334)scale(1 -1)"/></g><g filter="url(#f)"><ellipse cx="5.508" cy="30.599" fill="#7e14ff" rx="5.508" ry="30.599" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="matrix(.00324 1 1 -.00324 -34.34 30.47)"/></g><g filter="url(#g)"><ellipse cx="14.072" cy="22.078" fill="#ede6ff" rx="14.072" ry="22.078" style="fill:#ede6ff;fill:color(display-p3 .9275 .9033 1);fill-opacity:1" transform="rotate(93.35 24.506 48.493)scale(-1 1)"/></g><g filter="url(#h)"><ellipse cx="3.47" cy="21.501" fill="#7e14ff" rx="3.47" ry="21.501" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.009 28.708 47.59)scale(-1 1)"/></g><g filter="url(#i)"><ellipse cx="3.47" cy="21.501" fill="#7e14ff" rx="3.47" ry="21.501" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.009 28.708 47.59)scale(-1 1)"/></g><g filter="url(#j)"><ellipse cx=".387" cy="8.972" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(39.51 .387 8.972)"/></g><g filter="url(#k)"><ellipse cx="47.523" cy="-6.092" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 47.523 -6.092)"/></g><g filter="url(#l)"><ellipse cx="41.412" cy="6.333" fill="#47bfff" rx="5.971" ry="9.665" style="fill:#47bfff;fill:color(display-p3 .2799 .748 1);fill-opacity:1" transform="rotate(37.892 41.412 6.333)"/></g><g filter="url(#m)"><ellipse cx="-1.879" cy="38.332" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 -1.88 38.332)"/></g><g filter="url(#n)"><ellipse cx="-1.879" cy="38.332" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 -1.88 38.332)"/></g><g filter="url(#o)"><ellipse cx="35.651" cy="29.907" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 35.651 29.907)"/></g><g filter="url(#p)"><ellipse cx="38.418" cy="32.4" fill="#47bfff" rx="5.971" ry="15.297" style="fill:#47bfff;fill:color(display-p3 .2799 .748 1);fill-opacity:1" transform="rotate(37.892 38.418 32.4)"/></g></g><defs><filter id="b" width="60.045" height="41.654" x="-19.77" y="16.149" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="7.659"/></filter><filter id="c" width="90.34" height="51.437" x="-54.613" y="-7.533" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="7.659"/></filter><filter id="d" width="79.355" height="29.4" x="-49.64" y="2.03" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="e" width="79.579" height="29.4" x="-45.045" y="20.029" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="f" width="79.579" height="29.4" x="-43.513" y="21.178" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="g" width="74.749" height="58.852" x="15.756" y="-17.901" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="7.659"/></filter><filter id="h" width="61.377" height="25.362" x="23.548" y="2.284" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="i" width="61.377" height="25.362" x="23.548" y="2.284" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="j" width="56.045" height="63.649" x="-27.636" y="-22.853" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="k" width="54.814" height="64.646" x="20.116" y="-38.415" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="l" width="33.541" height="35.313" x="24.641" y="-11.323" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="m" width="54.814" height="64.646" x="-29.286" y="6.009" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="n" width="54.814" height="64.646" x="-29.286" y="6.009" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="o" width="54.814" height="64.646" x="8.244" y="-2.416" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="p" width="39.409" height="43.623" x="18.713" y="10.588" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter></defs></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+  <rect width="512" height="512" rx="120" fill="#111111"/>
+  <path fill="#F5A523" d="M152 104h224c18 0 32 14 32 32s-14 32-32 32H216v86h138c18 0 32 14 32 32s-14 32-32 32H216v126c0 18-14 32-32 32s-32-14-32-32V136c0-18 14-32 32-32Z"/>
+</svg>
diff --git a/scripts/cleanup-orphaned-storage.mjs b/scripts/cleanup-orphaned-storage.mjs
new file mode 100644
index 0000000..9d8e459
--- /dev/null
+++ b/scripts/cleanup-orphaned-storage.mjs
@@ -0,0 +1,113 @@
+/**
+ * cleanup-orphaned-storage.mjs
+ *
+ * Removes files in the `submissions` storage bucket that have no matching
+ * row in `submission_files`. These are orphaned uploads from before the
+ * silent-failure bug was fixed.
+ *
+ * Usage:
+ *   SUPABASE_SERVICE_ROLE_KEY=<your-key> node scripts/cleanup-orphaned-storage.mjs
+ *
+ * The service role key is in Supabase dashboard → Project Settings → API.
+ * Run once, then you can delete this script if you like.
+ */
+
+import { createClient } from '@supabase/supabase-js';
+
+const SUPABASE_URL = 'https://fqflxxqvennhvoeywrdw.supabase.co';
+const SERVICE_ROLE_KEY = process.env.SUPABASE_SERVICE_ROLE_KEY;
+
+if (!SERVICE_ROLE_KEY) {
+  console.error('Error: SUPABASE_SERVICE_ROLE_KEY env var is required.');
+  console.error('  SUPABASE_SERVICE_ROLE_KEY=<key> node scripts/cleanup-orphaned-storage.mjs');
+  process.exit(1);
+}
+
+const supabase = createClient(SUPABASE_URL, SERVICE_ROLE_KEY);
+
+async function listAllStorageFiles(bucket) {
+  // Storage structure: submissions/{taskId}/{timestamp}_{filename}
+  // List the root to get task-ID "folders", then list each folder for files.
+  const allPaths = [];
+
+  const { data: folders, error: folderError } = await supabase.storage
+    .from(bucket)
+    .list('', { limit: 1000, sortBy: { column: 'name', order: 'asc' } });
+
+  if (folderError) throw new Error(`Failed to list root: ${folderError.message}`);
+  if (!folders?.length) return allPaths;
+
+  for (const folder of folders) {
+    // Supabase returns folders as items with `id: null`
+    if (folder.id !== null) {
+      // It's a top-level file (rare, skip)
+      allPaths.push(folder.name);
+      continue;
+    }
+
+    const { data: files, error: fileError } = await supabase.storage
+      .from(bucket)
+      .list(folder.name, { limit: 1000, sortBy: { column: 'name', order: 'asc' } });
+
+    if (fileError) {
+      console.warn(`  Warning: failed to list ${folder.name}/: ${fileError.message}`);
+      continue;
+    }
+
+    for (const file of files ?? []) {
+      if (file.id !== null) {
+        allPaths.push(`${folder.name}/${file.name}`);
+      }
+    }
+  }
+
+  return allPaths;
+}
+
+async function main() {
+  console.log('Fetching all submission_files records from database...');
+  const { data: dbFiles, error: dbError } = await supabase
+    .from('submission_files')
+    .select('storage_path')
+    .not('storage_path', 'is', null);
+
+  if (dbError) throw new Error(`DB query failed: ${dbError.message}`);
+
+  const knownPaths = new Set((dbFiles ?? []).map(r => r.storage_path));
+  console.log(`  ${knownPaths.size} file records found in database.`);
+
+  console.log('\nListing all files in submissions storage bucket...');
+  const storagePaths = await listAllStorageFiles('submissions');
+  console.log(`  ${storagePaths.length} files found in storage.`);
+
+  const orphans = storagePaths.filter(p => !knownPaths.has(p));
+  console.log(`\n${orphans.length} orphaned file(s) found (in storage but not in DB).`);
+
+  if (orphans.length === 0) {
+    console.log('Nothing to clean up.');
+    return;
+  }
+
+  console.log('\nOrphaned files:');
+  orphans.forEach(p => console.log(`  ${p}`));
+
+  // Delete in batches of 100 (Supabase limit)
+  const BATCH = 100;
+  let deleted = 0;
+  for (let i = 0; i < orphans.length; i += BATCH) {
+    const batch = orphans.slice(i, i + BATCH);
+    const { error: delError } = await supabase.storage.from('submissions').remove(batch);
+    if (delError) {
+      console.error(`  Error deleting batch: ${delError.message}`);
+    } else {
+      deleted += batch.length;
+    }
+  }
+
+  console.log(`\nDone. ${deleted}/${orphans.length} orphaned file(s) deleted.`);
+}
+
+main().catch(err => {
+  console.error('Fatal error:', err.message);
+  process.exit(1);
+});
diff --git a/src/components/Layout.jsx b/src/components/Layout.jsx
index 517503f..8fad640 100755
--- a/src/components/Layout.jsx
+++ b/src/components/Layout.jsx
@@ -3,15 +3,35 @@ import { NavLink, useNavigate, useLocation } from 'react-router-dom';
 import { useAuth } from '../context/AuthContext';
 
 function TeamNav({ onNav }) {
+  const primaryLinks = [
+    { to: '/dashboard', label: 'Dashboard' },
+    { to: '/requests', label: 'Requests' },
+    { to: '/file-sharing', label: 'File Sharing' },
+    { to: '/companies', label: 'Clients & Users' },
+  ];
+
+  const utilityLinks = [
+    { to: '/meeting-notes', label: 'Meeting Notes' },
+    { to: '/invoices', label: 'Invoices & Expenses' },
+    { to: '/survey-maker', label: 'Survey Maker' },
+    { to: '/brand-book', label: 'Brand Book Maker' },
+    { to: '/converters', label: 'Image Converter' },
+    { to: '/fourge-passwords', label: 'Fourge Passwords' },
+    { to: '/server-status', label: 'Server Status' },
+  ];
+
   return (
     <div className="sidebar-section">
-      {[
-        { to: '/dashboard', label: 'Dashboard' },
-        { to: '/requests', label: 'Requests Inbox' },
-        { to: '/brand-book', label: 'Brand Book (beta)' },
-        { to: '/invoices', label: 'Invoices' },
-        { to: '/companies', label: 'Clients & Users' },
-      ].map(({ to, label }) => (
+      {primaryLinks.map(({ to, label }) => (
+        <NavLink key={to} to={to} onClick={onNav} className={({ isActive }) => `sidebar-link${isActive ? ' active' : ''}`}>
+          {label}
+        </NavLink>
+      ))}
+      <div style={{ height: 1, margin: '10px 12px', background: 'var(--border)' }} />
+      <div style={{ padding: '0 12px 8px', fontSize: 11, fontWeight: 700, letterSpacing: 0.8, textTransform: 'uppercase', color: 'var(--text-muted)' }}>
+        Team Tools
+      </div>
+      {utilityLinks.map(({ to, label }) => (
         <NavLink key={to} to={to} onClick={onNav} className={({ isActive }) => `sidebar-link${isActive ? ' active' : ''}`}>
           {label}
         </NavLink>
@@ -26,6 +46,8 @@ function ClientNav({ onNav }) {
       {[
         { 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 }) => (
@@ -38,11 +60,33 @@ function ClientNav({ onNav }) {
 }
 
 function ExternalNav({ onNav }) {
+  const links = [
+    { to: '/dashboard', label: 'Dashboard' },
+    { to: '/assigned-requests', label: 'Requests' },
+    { to: '/my-purchase-orders', label: 'Purchase Orders' },
+    { to: '/file-sharing', label: 'File Sharing' },
+    { to: '/survey-maker', label: 'Survey Maker' },
+    { to: '/brand-book', label: 'Brand Book Maker' },
+    { to: '/converters', label: 'Image Converter' },
+  ];
+
   return (
     <div className="sidebar-section">
-      <NavLink to="/dashboard" onClick={onNav} className={({ isActive }) => `sidebar-link${isActive ? ' active' : ''}`}>
-        Dashboard
-      </NavLink>
+      {links.map(({ to, label }, index) => (
+        <div key={to}>
+          {index === 2 && (
+            <>
+              <div style={{ height: 1, margin: '10px 12px', background: 'var(--border)' }} />
+              <div style={{ padding: '0 12px 8px', fontSize: 11, fontWeight: 700, letterSpacing: 0.8, textTransform: 'uppercase', color: 'var(--text-muted)' }}>
+                Team Tools
+              </div>
+            </>
+          )}
+          <NavLink to={to} onClick={onNav} className={({ isActive }) => `sidebar-link${isActive ? ' active' : ''}`}>
+            {label}
+          </NavLink>
+        </div>
+      ))}
     </div>
   );
 }
@@ -53,36 +97,58 @@ export default function Layout({ children }) {
   const location = useLocation();
   const [theme, setTheme] = useState(() => localStorage.getItem('theme') || 'dark');
   const [menuOpen, setMenuOpen] = useState(false);
+  const [sidebarCollapsed, setSidebarCollapsed] = useState(() => localStorage.getItem('sidebarCollapsed') === 'true');
 
   useEffect(() => {
     document.documentElement.setAttribute('data-theme', theme);
     localStorage.setItem('theme', theme);
   }, [theme]);
 
-  // Close menu on route change
-  useEffect(() => { setMenuOpen(false); }, [location.pathname]);
+  useEffect(() => {
+    localStorage.setItem('sidebarCollapsed', String(sidebarCollapsed));
+  }, [sidebarCollapsed]);
+
+  // Close menu on route change (derived-state pattern, no effect needed)
+  const [lastPathname, setLastPathname] = useState(location.pathname);
+  if (lastPathname !== location.pathname) {
+    setLastPathname(location.pathname);
+    setMenuOpen(false);
+  }
 
   const toggleTheme = () => setTheme(t => t === 'dark' ? 'light' : 'dark');
-  const handleLogout = () => { logout(); navigate('/'); };
+  const handleLogout = async () => {
+    await logout();
+    navigate('/');
+  };
 
   const initials = currentUser?.name
     ?.split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2);
 
   return (
-    <div className="app-layout">
+    <div className={`app-layout${sidebarCollapsed ? ' sidebar-collapsed' : ''}`}>
       {/* Overlay */}
       {menuOpen && <div className="sidebar-overlay" onClick={() => setMenuOpen(false)} />}
 
       <aside className={`sidebar${menuOpen ? ' sidebar-open' : ''}`}>
         <div className="sidebar-logo">
-          <img src="/fourge-logo.png" alt="Fourge Branding" style={{ width: 140, display: 'block' }} />
+          <img className="brand-logo brand-logo-sidebar" src="/fourge-logo.png" alt="Fourge Branding" />
+          <button
+            className="sidebar-pin-toggle"
+            onClick={() => setSidebarCollapsed(current => !current)}
+            title={sidebarCollapsed ? 'Pin sidebar open' : 'Collapse sidebar'}
+            aria-label={sidebarCollapsed ? 'Pin sidebar open' : 'Collapse sidebar'}
+          >
+            {sidebarCollapsed ? '›' : '‹'}
+          </button>
         </div>
 
-        {currentUser?.role === 'team'
-          ? <TeamNav onNav={() => setMenuOpen(false)} />
-          : currentUser?.role === 'external'
-            ? <ExternalNav onNav={() => setMenuOpen(false)} />
-            : <ClientNav onNav={() => setMenuOpen(false)} />}
+        {!sidebarCollapsed && (
+          currentUser?.role === 'team'
+            ? <TeamNav onNav={() => setMenuOpen(false)} />
+            : currentUser?.role === 'external'
+              ? <ExternalNav onNav={() => setMenuOpen(false)} />
+              : <ClientNav onNav={() => setMenuOpen(false)} />
+        )}
 
         <div className="sidebar-bottom">
           <NavLink to="/settings" onClick={() => setMenuOpen(false)} className={({ isActive }) => `sidebar-link${isActive ? ' active' : ''}`}>
@@ -92,16 +158,12 @@ export default function Layout({ children }) {
               <div className="sidebar-user-role">{currentUser?.role === 'external' ? 'Team' : currentUser?.role}</div>
             </div>
           </NavLink>
-          <div style={{ display: 'flex', alignItems: 'center', padding: '0 12px', gap: 8 }}>
-            <button className="sidebar-link" style={{ flex: 1 }} onClick={handleLogout}>Sign Out</button>
+          <div className="sidebar-bottom-actions">
+            {!sidebarCollapsed && <button className="sidebar-link" style={{ flex: 1 }} onClick={handleLogout}>Sign Out</button>}
             <button
               onClick={toggleTheme}
+              className="sidebar-theme-toggle"
               title={theme === 'dark' ? 'Switch to light mode' : 'Switch to dark mode'}
-              style={{
-                background: 'transparent', border: '1px solid #333', borderRadius: '6px',
-                padding: '7px 10px', cursor: 'pointer', color: '#888',
-                fontSize: 13, lineHeight: 1, transition: 'all 0.15s', flexShrink: 0,
-              }}
             >
               {theme === 'dark' ? '☀' : '☾'}
             </button>
@@ -115,6 +177,7 @@ export default function Layout({ children }) {
           <button className="hamburger" onClick={() => setMenuOpen(o => !o)} aria-label="Menu">
             <span /><span /><span />
           </button>
+          <img className="brand-logo brand-logo-mobile" src="/fourge-logo.png" alt="Fourge Branding" />
         </div>
         <main className="main-content">
           {children}
diff --git a/src/components/LoadingButton.jsx b/src/components/LoadingButton.jsx
new file mode 100644
index 0000000..9075e68
--- /dev/null
+++ b/src/components/LoadingButton.jsx
@@ -0,0 +1,8 @@
+export default function LoadingButton({ loading = false, disabled = false, children, loadingText, className = 'btn', type = 'button', ...props }) {
+  return (
+    <button type={type} className={className} disabled={disabled || loading} {...props}>
+      {loading && <span className="btn-spinner" aria-hidden="true" />}
+      <span>{loading ? (loadingText || children) : children}</span>
+    </button>
+  );
+}
diff --git a/src/components/PageLoader.jsx b/src/components/PageLoader.jsx
new file mode 100644
index 0000000..98b1685
--- /dev/null
+++ b/src/components/PageLoader.jsx
@@ -0,0 +1,15 @@
+export default function PageLoader({ opacity = 0.6 }) {
+  return (
+    <div
+      style={{
+        minHeight: '100vh',
+        background: 'var(--bg, #111)',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      <img src="/fourge-logo.png" alt="Loading" style={{ width: 160, opacity }} />
+    </div>
+  );
+}
diff --git a/src/context/AuthContext.jsx b/src/context/AuthContext.jsx
index 3b7eafc..987cd14 100755
--- a/src/context/AuthContext.jsx
+++ b/src/context/AuthContext.jsx
@@ -1,60 +1,121 @@
-import { createContext, useContext, useState, useEffect } from 'react';
+import { createContext, useContext, useState, useEffect, useEffectEvent } from 'react';
 import { supabase } from '../lib/supabase';
+import PageLoader from '../components/PageLoader';
 
 const AuthContext = createContext(null);
 
 const PROFILE_CACHE_KEY = 'fourge_profile';
 
 export function AuthProvider({ children }) {
-  const [currentUser, setCurrentUser] = useState(() => {
-    // Seed from cache instantly — no loading flash for returning users
-    try {
-      const cached = localStorage.getItem(PROFILE_CACHE_KEY);
-      return cached ? JSON.parse(cached) : null;
-    } catch { return null; }
-  });
+  const [currentUser, setCurrentUser] = useState(null);
   const [loading, setLoading] = useState(true);
 
-  const fetchAndCacheProfile = async (authUser) => {
+  const fetchAndCacheProfile = async (authUser, attempt = 0) => {
     try {
-      const { data } = await supabase
-        .from('profiles')
-        .select('*, company:companies(id, name, phone, address)')
-        .eq('id', authUser.id)
-        .single();
+      const { data, error } = await Promise.race([
+        supabase
+          .from('profiles')
+          .select('*, company:companies(id, name, phone, address)')
+          .eq('id', authUser.id)
+          .single(),
+        new Promise((_, reject) => setTimeout(() => reject(new Error('Profile fetch timeout')), 8000)),
+      ]);
       if (data) {
-        const profile = { ...data, email: authUser.email };
+        const { data: memberships } = await supabase
+          .from('company_members')
+          .select('company:companies(id, name, phone, address)')
+          .eq('profile_id', authUser.id);
+        const companies = (memberships || [])
+          .map(membership => membership.company)
+          .filter(Boolean);
+        if (data.role === 'client' && data.company && !companies.some(company => company.id === data.company.id)) {
+          companies.unshift(data.company);
+        }
+        const profile = { ...data, email: authUser.email, companies };
         setCurrentUser(profile);
         localStorage.setItem(PROFILE_CACHE_KEY, JSON.stringify(profile));
+        return profile;
       }
+      // Profile row not found yet (trigger race on first login) — retry once
+      if (error && attempt === 0) {
+        await new Promise(r => setTimeout(r, 800));
+        return fetchAndCacheProfile(authUser, 1);
+      }
+      console.error('Profile fetch failed:', error);
     } catch (err) {
       console.error('Profile fetch failed:', err);
     }
+    return null;
   };
 
-  useEffect(() => {
-    // Fallback — stop blocking after 2s max
-    const timeout = setTimeout(() => setLoading(false), 2000);
-    let resolved = false;
-
-    const { data: { subscription } } = supabase.auth.onAuthStateChange(async (event, session) => {
-      if (session?.user) {
-        // Fetch fresh profile in background (cache already seeded above)
-        fetchAndCacheProfile(session.user);
-      } else {
-        setCurrentUser(null);
+  const syncSessionUser = useEffectEvent(async (session) => {
+    if (session?.user) {
+      try {
+        const cached = localStorage.getItem(PROFILE_CACHE_KEY);
+        if (cached && JSON.parse(cached)?.id !== session.user.id) {
+          localStorage.removeItem(PROFILE_CACHE_KEY);
+        }
+      } catch {
         localStorage.removeItem(PROFILE_CACHE_KEY);
       }
 
-      if (!resolved) {
-        resolved = true;
-        clearTimeout(timeout);
-        setLoading(false);
+      await fetchAndCacheProfile(session.user);
+      return;
+    }
+
+    setCurrentUser(null);
+    localStorage.removeItem(PROFILE_CACHE_KEY);
+  });
+
+  useEffect(() => {
+    let active = true;
+
+    const bootstrap = async () => {
+      let hasCachedProfile = false;
+
+      // Show cached profile immediately so returning users aren't stuck on the loader
+      try {
+        const cached = localStorage.getItem(PROFILE_CACHE_KEY);
+        if (cached) {
+          const profile = JSON.parse(cached);
+          if (profile?.id && active) {
+            hasCachedProfile = true;
+            setCurrentUser(profile);
+            setLoading(false);
+          }
+        }
+      } catch { /* corrupt cache, ignore */ }
+
+      try {
+        // Timeout getSession — Edge can stall on this indefinitely
+        const sessionPromise = supabase.auth.getSession();
+        const timeout = new Promise((_, reject) =>
+          setTimeout(() => reject(new Error('Session timeout')), 6000)
+        );
+        const { data: { session } } = await Promise.race([sessionPromise, timeout]);
+        if (!active) return;
+        await syncSessionUser(session);
+        if (active) setLoading(false);
+      } catch (err) {
+        console.warn('Auth bootstrap failed:', err.message);
+        // If we have no cached user either, clear so they see the login page
+        if (active && !hasCachedProfile) {
+          setCurrentUser(null);
+          setLoading(false);
+        }
       }
+    };
+
+    bootstrap();
+
+    const { data: { subscription } } = supabase.auth.onAuthStateChange(async (_event, session) => {
+      if (!active) return;
+      await syncSessionUser(session);
+      if (active) setLoading(false);
     });
 
     return () => {
-      clearTimeout(timeout);
+      active = false;
       subscription.unsubscribe();
     };
   }, []);
@@ -83,14 +144,7 @@ export function AuthProvider({ children }) {
     localStorage.removeItem(PROFILE_CACHE_KEY);
   };
 
-  if (loading) return (
-    <div style={{
-      minHeight: '100vh', background: '#111111',
-      display: 'flex', alignItems: 'center', justifyContent: 'center',
-    }}>
-      <img src="/fourge-logo.png" alt="Fourge Branding" style={{ width: 160, opacity: 0.6 }} />
-    </div>
-  );
+  if (loading) return <PageLoader />;
 
   return (
     <AuthContext.Provider value={{ currentUser, login, signup, logout }}>
@@ -99,4 +153,5 @@ export function AuthProvider({ children }) {
   );
 }
 
+// eslint-disable-next-line react-refresh/only-export-components
 export const useAuth = () => useContext(AuthContext);
diff --git a/src/index.css b/src/index.css
index efa972f..9c459dd 100755
--- a/src/index.css
+++ b/src/index.css
@@ -22,6 +22,8 @@
   --text-secondary: #a8a8a8;
   --text-muted: #666666;
   --border: #2a2a2a;
+  --interactive-hover-border: #3a3a3a;
+  --interactive-row-hover: rgba(255,255,255,0.02);
   --danger: #ef4444;
   --success: #22c55e;
 }
@@ -39,6 +41,8 @@
   --text-secondary: #5a5a5a;
   --text-muted: #999999;
   --border: #e0e0e0;
+  --interactive-hover-border: #d0d0d0;
+  --interactive-row-hover: #fafafa;
 }
 [data-theme="light"] input[type="text"],
 [data-theme="light"] input[type="email"],
@@ -105,12 +109,46 @@ body {
   height: 100vh;
   overflow-y: auto;
   border-right: 1px solid var(--border);
+  transition: width 0.2s ease, min-width 0.2s ease;
 }
 
 .sidebar-logo {
   padding: 0 20px 24px;
   border-bottom: 1px solid var(--border);
   margin-bottom: 16px;
+  position: relative;
+}
+.brand-logo {
+  display: block;
+  height: auto;
+}
+.brand-logo-sidebar {
+  width: 140px;
+}
+.sidebar-pin-toggle {
+  position: absolute;
+  right: 12px;
+  top: 0;
+  width: 26px;
+  height: 26px;
+  border-radius: 6px;
+  border: 1px solid #333;
+  background: transparent;
+  color: var(--sidebar-text);
+  cursor: pointer;
+  font-size: 18px;
+  line-height: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.sidebar-pin-toggle:hover {
+  background: var(--sidebar-hover-bg);
+  color: #fff;
+}
+.brand-logo-auth {
+  width: 200px;
+  margin: 0 auto 8px;
 }
 .sidebar-logo h1 { font-size: 18px; font-weight: 700; color: #fff; letter-spacing: -0.3px; }
 .sidebar-logo span { font-size: 12px; color: var(--sidebar-text); }
@@ -138,6 +176,28 @@ body {
   margin-top: auto; padding: 16px 12px 0;
   border-top: 1px solid var(--border);
 }
+.sidebar-bottom-actions {
+  display: flex;
+  align-items: center;
+  padding: 0 12px;
+  gap: 8px;
+}
+.sidebar-theme-toggle {
+  background: transparent;
+  border: 1px solid #333;
+  border-radius: 6px;
+  padding: 7px 10px;
+  cursor: pointer;
+  color: #888;
+  font-size: 13px;
+  line-height: 1;
+  transition: all 0.15s;
+  flex-shrink: 0;
+}
+.sidebar-theme-toggle:hover {
+  background: var(--sidebar-hover-bg);
+  color: #fff;
+}
 .sidebar-user { padding: 10px 12px; display: flex; align-items: center; gap: 10px; }
 .sidebar-avatar {
   width: 30px; height: 30px; border-radius: 4px;
@@ -150,8 +210,48 @@ body {
 .sidebar-user-role { font-size: 11px; color: var(--sidebar-text); text-transform: capitalize; }
 
 .main-wrapper { margin-left: 240px; flex: 1; display: flex; flex-direction: column; min-height: 100vh; }
+.main-wrapper { transition: margin-left 0.2s ease; }
 .main-content { flex: 1; padding: 32px; }
 
+.app-layout.sidebar-collapsed .sidebar {
+  width: 76px;
+  min-width: 76px;
+}
+.app-layout.sidebar-collapsed .main-wrapper {
+  margin-left: 76px;
+}
+.app-layout.sidebar-collapsed .sidebar-logo {
+  padding: 0 12px 52px;
+}
+.app-layout.sidebar-collapsed .brand-logo-sidebar {
+  display: none;
+}
+.app-layout.sidebar-collapsed .sidebar-pin-toggle {
+  left: 50%;
+  right: auto;
+  top: 0;
+  transform: translateX(-50%);
+}
+.app-layout.sidebar-collapsed .sidebar-avatar {
+  margin: 0 auto;
+}
+.app-layout.sidebar-collapsed .sidebar-user-info {
+  display: none;
+}
+.app-layout.sidebar-collapsed .sidebar-bottom {
+  padding-left: 8px;
+  padding-right: 8px;
+}
+.app-layout.sidebar-collapsed .sidebar-bottom-actions {
+  justify-content: center;
+  padding: 8px 0 0;
+}
+.app-layout.sidebar-collapsed .sidebar-theme-toggle {
+  width: 32px;
+  height: 32px;
+  padding: 0;
+}
+
 /* Page header */
 .page-header {
   margin-bottom: 28px; display: flex;
@@ -163,13 +263,482 @@ body {
 /* Cards */
 .card { background: var(--card-bg); border-radius: 8px; border: 1px solid var(--border); padding: 20px; }
 .card-title { font-size: 14px; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 16px; }
+.page-toolbar {
+  margin-bottom: 24px;
+}
+.page-toolbar-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+  gap: 18px;
+}
+.page-toolbar-section + .page-toolbar-section {
+  margin-top: 18px;
+}
+.page-toolbar-actions,
+.page-toolbar-filters {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+  align-items: center;
+}
+.page-toolbar-label {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+  color: var(--text-muted);
+  line-height: 1;
+}
+.page-toolbar-status {
+  font-size: 12px;
+  color: var(--text-muted);
+  margin-top: 10px;
+}
 
 /* Stats */
 .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 28px; }
 .stat-card { background: var(--card-bg); border-radius: 8px; border: 1px solid var(--border); padding: 20px; }
+.stat-card-highlight {
+  border-color: rgba(245, 165, 35, 0.45);
+  background:
+    linear-gradient(180deg, rgba(245, 165, 35, 0.12), rgba(245, 165, 35, 0.04)),
+    var(--card-bg);
+  box-shadow: inset 0 0 0 1px rgba(245, 165, 35, 0.08);
+}
 .stat-value { font-size: 32px; font-weight: 700; color: var(--text-primary); letter-spacing: -1px; }
 .stat-label { font-size: 12px; color: var(--text-muted); margin-top: 4px; text-transform: uppercase; letter-spacing: 0.4px; }
 .stat-icon { display: none; }
+.dashboard-chart-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+  gap: 18px;
+}
+.dashboard-chart-card {
+  background: var(--card-bg);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 20px;
+}
+.dashboard-chart-content {
+  display: grid;
+  grid-template-columns: 140px 1fr;
+  gap: 20px;
+  align-items: center;
+}
+.dashboard-pie-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.dashboard-pie {
+  width: 132px;
+  height: 132px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+}
+.dashboard-pie::after {
+  content: '';
+  position: absolute;
+  inset: 18px;
+  border-radius: 50%;
+  background: var(--card-bg);
+  border: 1px solid var(--border);
+}
+.dashboard-pie-center {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  line-height: 1.1;
+}
+.dashboard-pie-center strong {
+  font-size: 22px;
+  color: var(--text-primary);
+}
+.dashboard-pie-center span {
+  margin-top: 4px;
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--text-muted);
+}
+.dashboard-legend {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.dashboard-legend-item {
+  display: grid;
+  grid-template-columns: 10px 1fr auto;
+  gap: 10px;
+  align-items: center;
+  font-size: 13px;
+  color: var(--text-secondary);
+}
+.dashboard-legend-item strong {
+  color: var(--text-primary);
+}
+.dashboard-legend-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 999px;
+}
+
+.server-status-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+  gap: 18px;
+}
+
+.status-stats-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+  gap: 10px;
+  margin-top: 18px;
+}
+
+.status-stat-card,
+.status-component {
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: var(--card-bg-2);
+  padding: 12px 14px;
+}
+
+.status-stat-value {
+  font-size: 20px;
+  font-weight: 700;
+  color: var(--text-primary);
+  letter-spacing: -0.3px;
+}
+
+.status-stat-label {
+  margin-top: 4px;
+  font-size: 11px;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.status-components-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+  gap: 10px;
+}
+
+.status-meter {
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: var(--card-bg-2);
+  padding: 14px 16px;
+}
+
+.status-meter-track {
+  margin: 12px 0 10px;
+  height: 8px;
+  border-radius: 999px;
+  background: rgba(255,255,255,0.06);
+  overflow: hidden;
+}
+
+.status-meter-fill {
+  height: 100%;
+  border-radius: inherit;
+  transition: width 0.2s ease;
+}
+
+.meeting-timeline {
+  display: grid;
+  gap: 18px;
+}
+
+.meeting-note-card {
+  display: grid;
+  grid-template-columns: 16px minmax(0, 1fr);
+  gap: 14px;
+  align-items: start;
+}
+
+.meeting-note-marker {
+  width: 12px;
+  height: 12px;
+  border-radius: 999px;
+  background: var(--accent);
+  margin-top: 8px;
+  box-shadow: 0 0 0 4px rgba(245, 165, 35, 0.12);
+}
+
+.meeting-note-content {
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: var(--card-bg-2);
+  padding: 16px;
+}
+
+.meeting-note-header {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  align-items: flex-start;
+}
+
+.meeting-note-title {
+  font-size: 15px;
+  font-weight: 700;
+  color: var(--text-primary);
+}
+
+.meeting-note-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 14px;
+  margin-top: 6px;
+  font-size: 12px;
+  color: var(--text-muted);
+}
+
+.meeting-note-body {
+  margin-top: 14px;
+  white-space: pre-wrap;
+  color: var(--text-primary);
+  font-size: 13px;
+}
+
+/* File Sharing */
+.file-browser {
+  width: 100%;
+  max-width: none;
+  background: var(--card-bg);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  overflow: hidden;
+  position: relative;
+}
+
+.file-browser-dragging {
+  border-color: var(--accent);
+}
+
+.file-browser-toolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 14px;
+  padding: 14px 16px;
+  border-bottom: 1px solid var(--border);
+  background: var(--card-bg);
+}
+
+.file-browser-breadcrumbs,
+.file-browser-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.file-breadcrumb {
+  border: 1px solid var(--border);
+  background: var(--card-bg-2);
+  color: var(--text-primary);
+  border-radius: 6px;
+  padding: 7px 10px;
+  font-family: inherit;
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.file-breadcrumb::before {
+  content: '/';
+  color: var(--text-muted);
+  margin-right: 6px;
+}
+
+.file-breadcrumb:hover {
+  border-color: var(--interactive-hover-border);
+}
+
+.file-browser-create {
+  display: grid;
+  grid-template-columns: minmax(180px, 340px) auto;
+  gap: 8px;
+  align-items: center;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--border);
+  background: var(--card-bg-2);
+}
+
+.file-upload-input {
+  display: none;
+}
+
+.file-list {
+  min-height: 0;
+  position: relative;
+  overflow-x: auto;
+  overflow-y: visible;
+}
+
+.file-row {
+  display: grid;
+  grid-template-columns: 34px minmax(260px, 1fr) minmax(90px, 120px) minmax(110px, 140px) minmax(170px, 190px);
+  gap: 10px;
+  align-items: center;
+  width: 100%;
+  min-width: 700px;
+  min-height: 52px;
+  padding: 0 16px;
+  border: 0;
+  border-bottom: 1px solid var(--border);
+  background: transparent;
+  color: var(--text-primary);
+  font-family: inherit;
+  text-align: left;
+}
+
+.file-row:last-child {
+  border-bottom: 0;
+}
+
+.file-row:not(.file-row-head):hover,
+.file-row-button:hover {
+  background: var(--interactive-row-hover);
+}
+
+
+.file-row-head {
+  min-height: 38px;
+  color: var(--text-muted);
+  font-size: 10px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.6px;
+  background: var(--card-bg);
+}
+
+.file-row-button {
+  cursor: pointer;
+}
+
+.file-icon {
+  width: 28px;
+  height: 28px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--accent);
+  background: var(--card-bg-2);
+}
+
+.file-name,
+.file-name-button {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--text-primary);
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.file-name-button {
+  border: 0;
+  background: transparent;
+  font-family: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.file-name-button:hover {
+  color: var(--accent);
+}
+
+.file-meta {
+  color: var(--text-secondary);
+  font-size: 12px;
+}
+
+.file-row-actions {
+  display: flex;
+  gap: 6px;
+  justify-content: flex-end;
+}
+
+.file-drop-overlay {
+  position: absolute;
+  inset: 0;
+  z-index: 8;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(17, 17, 17, 0.72);
+  border: 2px dashed var(--accent);
+  pointer-events: none;
+}
+
+.file-drop-panel {
+  min-width: 280px;
+  max-width: min(420px, calc(100% - 40px));
+  border: 1px solid rgba(245, 165, 35, 0.45);
+  border-radius: 8px;
+  background: var(--card-bg);
+  padding: 28px;
+  text-align: center;
+  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.28);
+}
+
+.file-drop-icon {
+  width: 46px;
+  height: 46px;
+  border-radius: 8px;
+  background: var(--accent);
+  color: #111;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 24px;
+  font-weight: 800;
+  margin-bottom: 14px;
+}
+
+.file-drop-title {
+  font-size: 17px;
+  font-weight: 700;
+  color: var(--text-primary);
+}
+
+.file-drop-subtitle {
+  margin-top: 5px;
+  font-size: 13px;
+  color: var(--text-secondary);
+}
+
+@media (max-width: 760px) {
+  .file-browser-toolbar {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  .file-browser-actions {
+    justify-content: flex-start;
+  }
+
+  .file-browser-create {
+    grid-template-columns: 1fr;
+  }
+
+  .file-row {
+    grid-template-columns: 34px minmax(220px, 1fr) 90px 110px 170px;
+    min-width: 700px;
+  }
+}
 
 /* Buttons */
 .btn {
@@ -179,6 +748,28 @@ body {
   transition: all 0.15s; text-decoration: none; white-space: nowrap;
   font-family: inherit; line-height: 1;
 }
+.btn:disabled {
+  opacity: 0.65;
+  cursor: not-allowed;
+}
+.btn-spinner {
+  width: 13px;
+  height: 13px;
+  border: 2px solid currentColor;
+  border-right-color: transparent;
+  border-radius: 50%;
+  display: inline-block;
+  flex-shrink: 0;
+  animation: btn-spin 0.7s linear infinite;
+}
+.btn-sm .btn-spinner {
+  width: 11px;
+  height: 11px;
+  border-width: 1.5px;
+}
+@keyframes btn-spin {
+  to { transform: rotate(360deg); }
+}
 .btn-sm { padding: 5px 12px; font-size: 12px; line-height: 1; }
 .btn-primary { background: var(--accent); color: #111111; }
 .btn-primary:hover { background: var(--accent-hover); }
@@ -286,11 +877,139 @@ select option { background: #222; color: #fff; }
 .notification { padding: 12px 16px; border-radius: 6px; font-size: 13px; font-weight: 500; margin-bottom: 20px; }
 .notification-success { background: rgba(34,197,94,0.1); color: #4ade80; border: 1px solid rgba(34,197,94,0.2); }
 .notification-info { background: rgba(37,99,235,0.1); color: #60a5fa; border: 1px solid rgba(37,99,235,0.2); }
-.request-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 8px; padding: 20px; margin-bottom: 8px; transition: border-color 0.15s; }
-.request-card:hover { border-color: #3a3a3a; }
-.request-card-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 10px; }
+.request-card,
+.interactive-surface {
+  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
+}
+.request-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 8px; padding: 12px 16px; margin-bottom: 0; }
+.request-card:hover,
+.interactive-surface:hover { border-color: var(--interactive-hover-border); }
+.request-card:hover { background: var(--interactive-row-hover); }
+.interactive-row,
+.interactive-panel-toggle {
+  transition: background 0.15s, border-color 0.15s, color 0.15s;
+}
+.interactive-row:hover,
+.interactive-panel-toggle:hover {
+  background: var(--interactive-row-hover);
+}
+.request-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0; }
 .request-card-title { font-size: 15px; font-weight: 600; color: var(--text-primary); }
 .request-card-meta { font-size: 12px; color: var(--text-secondary); margin-top: 4px; }
+.request-title-inline-meta {
+  margin-left: 8px;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--text-muted);
+}
+.request-card-detailed { display: flex; gap: 12px; align-items: center; }
+.request-card-select { display: flex; align-items: center; }
+.request-card-badges { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
+.request-revision-chip {
+  display: inline-flex;
+  align-items: center;
+  padding: 4px 8px;
+  border-radius: 999px;
+  border: 1px solid var(--border);
+  background: var(--card-bg-2);
+  color: var(--text-secondary);
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.5px;
+}
+.request-column-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 12px;
+  font-size: 13px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.6px;
+  color: var(--text-muted);
+}
+.request-section-header {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 0 0 12px;
+  background: transparent;
+  border: none;
+  font-family: inherit;
+  font-size: 13px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.6px;
+  color: var(--text-muted);
+  cursor: pointer;
+}
+.request-section-body {
+  padding: 0 0 4px;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+.request-section-caret {
+  font-size: 11px;
+  color: var(--text-muted);
+}
+.request-project-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin: 4px 0 10px;
+  font-size: 12px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--text-muted);
+}
+.request-toolbar-card { margin-bottom: 24px; }
+.request-toolbar-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+  gap: 18px;
+  margin-top: 18px;
+}
+.request-toolbar-actions,
+.request-filter-row {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+  align-items: center;
+}
+.request-select-all-label {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+  color: var(--text-muted);
+  line-height: 1;
+}
+.request-toolbar-status {
+  font-size: 12px;
+  color: var(--text-muted);
+  margin-top: 10px;
+}
+.request-company-count {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 28px;
+  padding: 3px 8px;
+  border-radius: 999px;
+  border: 1px solid var(--border);
+  background: var(--card-bg);
+  color: var(--text-secondary);
+  font-size: 11px;
+}
+.request-empty-column {
+  color: var(--text-muted);
+}
 .action-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
 .assign-select { padding: 6px 10px; border-radius: 6px; border: 1px solid var(--border); font-size: 13px; color: var(--text-primary); background: var(--card-bg-2); cursor: pointer; font-family: inherit; }
 .assign-select option { background: #222; }
@@ -309,10 +1028,110 @@ select option { background: #222; color: #fff; }
 .text-muted { color: var(--text-muted); }
 .text-secondary { color: var(--text-secondary); }
 
+.client-summary-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.client-summary-tile {
+  padding: 14px 16px;
+  border-radius: 8px;
+  border: 1px solid var(--border);
+  background: var(--card-bg-2);
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.client-summary-tile strong {
+  font-size: 24px;
+  color: var(--text-primary);
+  letter-spacing: -0.5px;
+}
+
+.client-summary-tile span {
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--text-muted);
+}
+
+.client-inline-empty {
+  padding: 20px 16px;
+  border: 1px dashed var(--border);
+  border-radius: 8px;
+  color: var(--text-muted);
+  font-size: 13px;
+  text-align: center;
+}
+
+.client-mini-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.client-mini-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 12px 14px;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: var(--card-bg-2);
+  text-decoration: none;
+}
+
+.client-mini-row strong {
+  display: block;
+  font-size: 13px;
+  color: var(--text-primary);
+}
+
+.client-mini-row span {
+  display: block;
+  font-size: 11px;
+  color: var(--text-muted);
+  margin-top: 3px;
+}
+
+.client-project-card {
+  padding: 14px 16px;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: var(--card-bg);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.client-project-card-title {
+  font-weight: 700;
+  font-size: 14px;
+  color: var(--text-primary);
+}
+
+.client-project-card-meta {
+  font-size: 12px;
+  color: var(--text-muted);
+  margin-top: 4px;
+}
+
+.client-project-highlight {
+  color: var(--accent);
+  font-weight: 700;
+}
+
 /* Mobile topbar — hidden on desktop */
 .mobile-topbar {
   display: none;
 }
+.brand-logo-mobile {
+  width: 110px;
+  margin-left: 12px;
+}
 
 /* Hamburger button */
 .hamburger {
@@ -345,8 +1164,28 @@ select option { background: #222; color: #fff; }
   .sidebar {
     position: fixed; left: -240px; top: 0; z-index: 200;
     transition: left 0.25s ease; height: 100vh;
+    width: 240px;
+    min-width: 240px;
   }
   .sidebar.sidebar-open { left: 0; }
+  .app-layout.sidebar-collapsed .sidebar {
+    width: 240px;
+    min-width: 240px;
+  }
+  .app-layout.sidebar-collapsed .brand-logo-sidebar {
+    width: 140px;
+    display: block;
+  }
+  .app-layout.sidebar-collapsed .sidebar-pin-toggle {
+    display: none;
+  }
+  .app-layout.sidebar-collapsed .sidebar-user-info {
+    display: block;
+  }
+  .app-layout.sidebar-collapsed .sidebar-bottom-actions {
+    justify-content: flex-start;
+    padding: 0 12px;
+  }
 
   /* Show overlay when menu open */
   .sidebar-overlay { display: block; }
@@ -375,6 +1214,11 @@ select option { background: #222; color: #fff; }
 
   /* Request cards */
   .request-card-header { flex-direction: column; gap: 8px; }
+  .request-card-badges { justify-content: flex-start; }
+  .page-toolbar-grid { grid-template-columns: 1fr; }
+  .dashboard-chart-content { grid-template-columns: 1fr; }
+  .dashboard-pie-wrap { justify-content: flex-start; }
+  .client-summary-grid { grid-template-columns: 1fr; }
 
   /* Auth card full width */
   .auth-card { padding: 24px 20px; }
diff --git a/src/lib/archiveHelpers.js b/src/lib/archiveHelpers.js
new file mode 100644
index 0000000..b5cf393
--- /dev/null
+++ b/src/lib/archiveHelpers.js
@@ -0,0 +1,839 @@
+import JSZip from 'jszip';
+import { supabase } from './supabase';
+import { getBrandBookStoragePaths, getCompanyLogoStoragePath } from './deleteHelpers';
+
+const ARCHIVE_VERSION = 1;
+const FILE_BATCH_SIZE = 100;
+const ROW_BATCH_SIZE = 100;
+
+function sanitizeFilename(value) {
+  return (value || 'archive').replace(/[^a-z0-9._ -]/gi, '_').trim();
+}
+
+function reportProgress(onProgress, message) {
+  if (typeof onProgress === 'function') onProgress(message);
+}
+
+function triggerDownload(blob, filename) {
+  const url = URL.createObjectURL(blob);
+  const link = document.createElement('a');
+  link.href = url;
+  link.download = filename;
+  document.body.appendChild(link);
+  link.click();
+  link.remove();
+  setTimeout(() => URL.revokeObjectURL(url), 1000);
+}
+
+function chunk(list, size) {
+  const chunks = [];
+  for (let i = 0; i < list.length; i += size) chunks.push(list.slice(i, i + size));
+  return chunks;
+}
+
+function uniqueValues(values) {
+  return [...new Set((values || []).filter(Boolean))];
+}
+
+async function selectByValues(table, column, values, select = '*') {
+  const results = [];
+  for (const batch of chunk(values, FILE_BATCH_SIZE)) {
+    const { data, error } = await supabase.from(table).select(select).in(column, batch);
+    if (error) throw error;
+    results.push(...(data || []));
+  }
+  return results;
+}
+
+async function insertRows(table, rows) {
+  if (!rows?.length) return;
+  for (const batch of chunk(rows, ROW_BATCH_SIZE)) {
+    const { error } = await supabase.from(table).insert(batch);
+    if (error) throw error;
+  }
+}
+
+async function fetchStorageBlob(bucket, path) {
+  const { data, error } = await supabase.storage.from(bucket).download(path);
+  if (error) throw new Error(`Failed to download ${bucket}/${path}: ${error.message}`);
+  return data;
+}
+
+async function fillZipWithFiles(zip, fileRefs, onProgress) {
+  if (!fileRefs.length) {
+    reportProgress(onProgress, 'No files to download');
+    return;
+  }
+
+  for (let i = 0; i < fileRefs.length; i += 1) {
+    const fileRef = fileRefs[i];
+    reportProgress(onProgress, `Downloading files ${i + 1}/${fileRefs.length}`);
+    const blob = await fetchStorageBlob(fileRef.bucket, fileRef.path);
+    zip.file(fileRef.zipPath, blob);
+  }
+}
+
+function buildBrandBookFileRefs(books) {
+  return (books || []).flatMap(book =>
+    getBrandBookStoragePaths(book).map(path => ({
+      bucket: 'brand-books',
+      path,
+      zipPath: `storage/brand-books/${path}`,
+    }))
+  );
+}
+
+function buildSubmissionFileRefs(submissionFiles) {
+  return (submissionFiles || [])
+    .filter(file => file.storage_path)
+    .map(file => ({
+      bucket: 'submissions',
+      path: file.storage_path,
+      zipPath: `storage/submissions/${file.storage_path}`,
+    }));
+}
+
+function buildDeliveryFileRefs(deliveryFiles) {
+  return (deliveryFiles || [])
+    .filter(file => file.storage_path)
+    .map(file => ({
+      bucket: 'deliveries',
+      path: file.storage_path,
+      zipPath: `storage/deliveries/${file.storage_path}`,
+    }));
+}
+
+function buildCompanyLogoFileRefs(company, brandBooks) {
+  const urls = uniqueValues([
+    company?.client_logo_url,
+    ...(brandBooks || []).map(book => book.client_logo_url),
+  ]);
+
+  return urls
+    .map(url => getCompanyLogoStoragePath(url))
+    .filter(Boolean)
+    .map(path => ({
+      bucket: 'company-logos',
+      path,
+      zipPath: `storage/company-logos/${path}`,
+    }));
+}
+
+function dedupeFileRefs(fileRefs) {
+  const seen = new Set();
+  return fileRefs.filter(ref => {
+    const key = `${ref.bucket}:${ref.path}`;
+    if (seen.has(key)) return false;
+    seen.add(key);
+    return true;
+  });
+}
+
+async function collectCompanySnapshot(companyId) {
+  const [
+    { data: company, error: companyError },
+    { data: companyPrices, error: pricesError },
+    { data: projects, error: projectsError },
+    { data: invoices, error: invoicesError },
+    { data: brandBooks, error: brandBooksError },
+    { data: companyProfiles, error: profilesError },
+  ] = await Promise.all([
+    supabase.from('companies').select('*').eq('id', companyId).single(),
+    supabase.from('company_prices').select('*').eq('company_id', companyId),
+    supabase.from('projects').select('*').eq('company_id', companyId),
+    supabase.from('invoices').select('*').eq('company_id', companyId),
+    supabase.from('brand_books').select('*').eq('client_id', companyId),
+    supabase.from('profiles').select('id, name, email, role, company_id').eq('company_id', companyId),
+  ]);
+
+  if (companyError) throw companyError;
+  if (pricesError) throw pricesError;
+  if (projectsError) throw projectsError;
+  if (invoicesError) throw invoicesError;
+  if (brandBooksError) throw brandBooksError;
+  if (profilesError) throw profilesError;
+  if (!company) throw new Error('Company not found.');
+
+  const projectIds = (projects || []).map(project => project.id);
+  const invoiceIds = (invoices || []).map(invoice => invoice.id);
+  const [tasks, projectMembers, invoiceItems] = await Promise.all([
+    projectIds.length ? selectByValues('tasks', 'project_id', projectIds) : Promise.resolve([]),
+    projectIds.length ? selectByValues('project_members', 'project_id', projectIds) : Promise.resolve([]),
+    invoiceIds.length ? selectByValues('invoice_items', 'invoice_id', invoiceIds) : Promise.resolve([]),
+  ]);
+
+  const taskIds = tasks.map(task => task.id);
+  const submissions = taskIds.length ? await selectByValues('submissions', 'task_id', taskIds) : [];
+  const submissionIds = submissions.map(submission => submission.id);
+  const [submissionFiles, deliveries] = await Promise.all([
+    submissionIds.length ? selectByValues('submission_files', 'submission_id', submissionIds) : Promise.resolve([]),
+    submissionIds.length ? selectByValues('deliveries', 'submission_id', submissionIds) : Promise.resolve([]),
+  ]);
+
+  const deliveryIds = deliveries.map(delivery => delivery.id);
+  const deliveryFiles = deliveryIds.length ? await selectByValues('delivery_files', 'delivery_id', deliveryIds) : [];
+
+  const referencedProfileIds = uniqueValues([
+    ...companyProfiles.map(profile => profile.id),
+    ...projectMembers.map(member => member.profile_id),
+    ...tasks.map(task => task.assigned_to),
+    ...submissions.map(submission => submission.submitted_by),
+    ...invoices.map(invoice => invoice.created_by),
+  ]);
+
+  const referencedProfiles = referencedProfileIds.length
+    ? await selectByValues('profiles', 'id', referencedProfileIds, 'id, name, email, role, company_id')
+    : [];
+
+  const fileRefs = dedupeFileRefs([
+    ...buildSubmissionFileRefs(submissionFiles),
+    ...buildDeliveryFileRefs(deliveryFiles),
+    ...buildBrandBookFileRefs(brandBooks),
+    ...buildCompanyLogoFileRefs(company, brandBooks),
+  ]);
+
+  return {
+    company,
+    companyPrices,
+    projects,
+    tasks,
+    submissions,
+    submissionFiles,
+    deliveries,
+    deliveryFiles,
+    invoices,
+    invoiceItems,
+    brandBooks,
+    projectMembers,
+    companyProfiles,
+    referencedProfiles,
+    fileRefs,
+  };
+}
+
+async function collectTaskSnapshot(taskIds) {
+  const tasks = taskIds.length ? await selectByValues('tasks', 'id', taskIds) : [];
+  const projectIds = uniqueValues(tasks.map(task => task.project_id));
+  const projects = projectIds.length ? await selectByValues('projects', 'id', projectIds) : [];
+  const companyIds = uniqueValues(projects.map(project => project.company_id));
+  const companies = companyIds.length ? await selectByValues('companies', 'id', companyIds) : [];
+
+  const submissions = taskIds.length ? await selectByValues('submissions', 'task_id', taskIds) : [];
+  const submissionIds = submissions.map(submission => submission.id);
+  const [submissionFiles, deliveries] = await Promise.all([
+    submissionIds.length ? selectByValues('submission_files', 'submission_id', submissionIds) : Promise.resolve([]),
+    submissionIds.length ? selectByValues('deliveries', 'submission_id', submissionIds) : Promise.resolve([]),
+  ]);
+  const deliveryIds = deliveries.map(delivery => delivery.id);
+  const deliveryFiles = deliveryIds.length ? await selectByValues('delivery_files', 'delivery_id', deliveryIds) : [];
+  const invoiceItems = submissionIds.length
+    ? (await selectByValues('invoice_items', 'submission_id', submissionIds)).filter(item => taskIds.includes(item.task_id))
+    : [];
+
+  const referencedProfileIds = uniqueValues([
+    ...tasks.map(task => task.assigned_to),
+    ...submissions.map(submission => submission.submitted_by),
+  ]);
+  const referencedProfiles = referencedProfileIds.length
+    ? await selectByValues('profiles', 'id', referencedProfileIds, 'id, name, email, role, company_id')
+    : [];
+
+  const fileRefs = dedupeFileRefs([
+    ...buildSubmissionFileRefs(submissionFiles),
+    ...buildDeliveryFileRefs(deliveryFiles),
+  ]);
+
+  return {
+    tasks,
+    projects,
+    companies,
+    submissions,
+    submissionFiles,
+    deliveries,
+    deliveryFiles,
+    invoiceItems,
+    referencedProfiles,
+    fileRefs,
+  };
+}
+
+async function collectBrandBookSnapshot(bookId) {
+  const { data: brandBook, error } = await supabase.from('brand_books').select('*').eq('id', bookId).single();
+  if (error) throw error;
+  if (!brandBook) throw new Error('Brand book not found.');
+
+  const company = brandBook.client_id
+    ? (await supabase.from('companies').select('id, name').eq('id', brandBook.client_id).single()).data
+    : null;
+
+  const fileRefs = dedupeFileRefs([
+    ...buildBrandBookFileRefs([brandBook]),
+  ]);
+
+  return {
+    brandBook,
+    company,
+    fileRefs,
+  };
+}
+
+async function collectBrandBooksSnapshot(bookIds) {
+  const brandBooks = bookIds.length ? await selectByValues('brand_books', 'id', bookIds) : [];
+  if (!brandBooks.length) throw new Error('No brand books found.');
+
+  const companyIds = uniqueValues(brandBooks.map(book => book.client_id));
+  const companies = companyIds.length ? await selectByValues('companies', 'id', companyIds, 'id, name') : [];
+
+  const fileRefs = dedupeFileRefs([
+    ...buildBrandBookFileRefs(brandBooks),
+  ]);
+
+  return {
+    brandBooks,
+    companies,
+    fileRefs,
+  };
+}
+
+function buildArchiveManifest(snapshot) {
+  return {
+    archive_version: ARCHIVE_VERSION,
+    archived_at: new Date().toISOString(),
+    scope: 'company',
+    company_id: snapshot.company.id,
+    company_name: snapshot.company.name,
+    data: {
+      company: snapshot.company,
+      company_prices: snapshot.companyPrices,
+      projects: snapshot.projects,
+      tasks: snapshot.tasks,
+      submissions: snapshot.submissions,
+      submission_files: snapshot.submissionFiles,
+      deliveries: snapshot.deliveries,
+      delivery_files: snapshot.deliveryFiles,
+      invoices: snapshot.invoices,
+      invoice_items: snapshot.invoiceItems,
+      brand_books: snapshot.brandBooks,
+      project_members: snapshot.projectMembers,
+      company_profiles: snapshot.companyProfiles,
+      referenced_profiles: snapshot.referencedProfiles,
+    },
+    storage_files: snapshot.fileRefs,
+  };
+}
+
+function buildCompaniesArchiveManifest(snapshot) {
+  return {
+    archive_version: ARCHIVE_VERSION,
+    archived_at: new Date().toISOString(),
+    scope: 'companies',
+    company_ids: snapshot.companies.map(company => company.id),
+    data: {
+      companies: snapshot.companies,
+      company_prices: snapshot.companyPrices,
+      projects: snapshot.projects,
+      tasks: snapshot.tasks,
+      submissions: snapshot.submissions,
+      submission_files: snapshot.submissionFiles,
+      deliveries: snapshot.deliveries,
+      delivery_files: snapshot.deliveryFiles,
+      invoices: snapshot.invoices,
+      invoice_items: snapshot.invoiceItems,
+      brand_books: snapshot.brandBooks,
+      project_members: snapshot.projectMembers,
+      company_profiles: snapshot.companyProfiles,
+      referenced_profiles: snapshot.referencedProfiles,
+    },
+    storage_files: snapshot.fileRefs,
+  };
+}
+
+export async function archiveCompanyToLocalZip(companyId, options = {}) {
+  const { onProgress } = options;
+  reportProgress(onProgress, 'Collecting company data');
+  const snapshot = await collectCompanySnapshot(companyId);
+  const manifest = buildArchiveManifest(snapshot);
+  const zip = new JSZip();
+
+  zip.file('manifest.json', JSON.stringify(manifest, null, 2));
+  await fillZipWithFiles(zip, snapshot.fileRefs, onProgress);
+
+  reportProgress(onProgress, 'Packaging archive');
+  const blob = await zip.generateAsync({ type: 'blob' });
+  const filename = `${sanitizeFilename(snapshot.company.name)}_${snapshot.company.id}_archive.zip`;
+  reportProgress(onProgress, 'Starting download');
+  triggerDownload(blob, filename);
+
+  return {
+    filename,
+    companyName: snapshot.company.name,
+    fileCount: snapshot.fileRefs.length,
+  };
+}
+
+export async function archiveCompaniesToLocalZip(companyIds, options = {}) {
+  const { onProgress } = options;
+  reportProgress(onProgress, 'Collecting company data');
+  const companies = companyIds.length ? await selectByValues('companies', 'id', companyIds) : [];
+  if (!companies.length) throw new Error('No companies found.');
+
+  const snapshots = await Promise.all(companies.map(company => collectCompanySnapshot(company.id)));
+  const merged = {
+    companies: snapshots.map(snapshot => snapshot.company),
+    companyPrices: snapshots.flatMap(snapshot => snapshot.companyPrices),
+    projects: snapshots.flatMap(snapshot => snapshot.projects),
+    tasks: snapshots.flatMap(snapshot => snapshot.tasks),
+    submissions: snapshots.flatMap(snapshot => snapshot.submissions),
+    submissionFiles: snapshots.flatMap(snapshot => snapshot.submissionFiles),
+    deliveries: snapshots.flatMap(snapshot => snapshot.deliveries),
+    deliveryFiles: snapshots.flatMap(snapshot => snapshot.deliveryFiles),
+    invoices: snapshots.flatMap(snapshot => snapshot.invoices),
+    invoiceItems: snapshots.flatMap(snapshot => snapshot.invoiceItems),
+    brandBooks: snapshots.flatMap(snapshot => snapshot.brandBooks),
+    projectMembers: snapshots.flatMap(snapshot => snapshot.projectMembers),
+    companyProfiles: snapshots.flatMap(snapshot => snapshot.companyProfiles),
+    referencedProfiles: snapshots.flatMap(snapshot => snapshot.referencedProfiles),
+    fileRefs: dedupeFileRefs(snapshots.flatMap(snapshot => snapshot.fileRefs)),
+  };
+
+  const zip = new JSZip();
+  const manifest = buildCompaniesArchiveManifest(merged);
+  zip.file('manifest.json', JSON.stringify(manifest, null, 2));
+
+  await fillZipWithFiles(zip, merged.fileRefs, onProgress);
+  reportProgress(onProgress, 'Packaging archive');
+  const blob = await zip.generateAsync({ type: 'blob' });
+  const filename = `companies_${merged.companies.length}_${new Date().toISOString().slice(0, 10)}.zip`;
+  reportProgress(onProgress, 'Starting download');
+  triggerDownload(blob, filename);
+
+  return {
+    filename,
+    companyCount: merged.companies.length,
+  };
+}
+
+export async function archiveCompletedJobsToLocalZip(taskIds, options = {}) {
+  const { onProgress } = options;
+  reportProgress(onProgress, 'Collecting completed jobs');
+  const snapshot = await collectTaskSnapshot(taskIds);
+  if (!snapshot.tasks.length) throw new Error('No completed jobs found to archive.');
+
+  const zip = new JSZip();
+  const manifest = {
+    archive_version: ARCHIVE_VERSION,
+    archived_at: new Date().toISOString(),
+    scope: 'completed_tasks',
+    task_count: snapshot.tasks.length,
+    company_refs: snapshot.companies,
+    project_refs: snapshot.projects,
+    data: {
+      tasks: snapshot.tasks,
+      submissions: snapshot.submissions,
+      submission_files: snapshot.submissionFiles,
+      deliveries: snapshot.deliveries,
+      delivery_files: snapshot.deliveryFiles,
+      invoice_items: snapshot.invoiceItems,
+      referenced_profiles: snapshot.referencedProfiles,
+    },
+    storage_files: snapshot.fileRefs,
+  };
+
+  zip.file('manifest.json', JSON.stringify(manifest, null, 2));
+  await fillZipWithFiles(zip, snapshot.fileRefs, onProgress);
+  reportProgress(onProgress, 'Packaging archive');
+  const blob = await zip.generateAsync({ type: 'blob' });
+  const filename = `completed_jobs_${snapshot.tasks.length}_${new Date().toISOString().slice(0, 10)}.zip`;
+  reportProgress(onProgress, 'Starting download');
+  triggerDownload(blob, filename);
+
+  return {
+    filename,
+    taskCount: snapshot.tasks.length,
+  };
+}
+
+export async function archiveBrandBookToLocalZip(bookId, options = {}) {
+  const { onProgress } = options;
+  reportProgress(onProgress, 'Collecting brand book');
+  const snapshot = await collectBrandBookSnapshot(bookId);
+  const zip = new JSZip();
+  const manifest = {
+    archive_version: ARCHIVE_VERSION,
+    archived_at: new Date().toISOString(),
+    scope: 'brand_book',
+    brand_book_id: snapshot.brandBook.id,
+    client_ref: snapshot.company,
+    data: {
+      brand_book: snapshot.brandBook,
+    },
+    storage_files: snapshot.fileRefs,
+  };
+
+  zip.file('manifest.json', JSON.stringify(manifest, null, 2));
+  await fillZipWithFiles(zip, snapshot.fileRefs, onProgress);
+  reportProgress(onProgress, 'Packaging archive');
+  const blob = await zip.generateAsync({ type: 'blob' });
+  const filename = `${sanitizeFilename(snapshot.brandBook.client_name || 'brand_book')}_${snapshot.brandBook.id}_brand_book.zip`;
+  reportProgress(onProgress, 'Starting download');
+  triggerDownload(blob, filename);
+
+  return {
+    filename,
+    bookId: snapshot.brandBook.id,
+  };
+}
+
+export async function archiveBrandBooksToLocalZip(bookIds, options = {}) {
+  const { onProgress } = options;
+  reportProgress(onProgress, 'Collecting brand books');
+  const snapshot = await collectBrandBooksSnapshot(bookIds);
+  const zip = new JSZip();
+  const manifest = {
+    archive_version: ARCHIVE_VERSION,
+    archived_at: new Date().toISOString(),
+    scope: 'brand_books',
+    brand_book_ids: snapshot.brandBooks.map(book => book.id),
+    company_refs: snapshot.companies,
+    data: {
+      brand_books: snapshot.brandBooks,
+    },
+    storage_files: snapshot.fileRefs,
+  };
+
+  zip.file('manifest.json', JSON.stringify(manifest, null, 2));
+  await fillZipWithFiles(zip, snapshot.fileRefs, onProgress);
+  reportProgress(onProgress, 'Packaging archive');
+  const blob = await zip.generateAsync({ type: 'blob' });
+  const filename = `brand_books_${snapshot.brandBooks.length}_${new Date().toISOString().slice(0, 10)}.zip`;
+  reportProgress(onProgress, 'Starting download');
+  triggerDownload(blob, filename);
+
+  return {
+    filename,
+    bookCount: snapshot.brandBooks.length,
+  };
+}
+
+async function assertNoRestoreConflicts(manifest) {
+  const companyRows = manifest.data.companies || (manifest.data.company ? [manifest.data.company] : []);
+  const checks = [
+    ['companies', companyRows.map(row => row.id)],
+    ['company_prices', (manifest.data.company_prices || []).map(row => row.id)],
+    ['projects', (manifest.data.projects || []).map(row => row.id)],
+    ['tasks', (manifest.data.tasks || []).map(row => row.id)],
+    ['submissions', (manifest.data.submissions || []).map(row => row.id)],
+    ['submission_files', (manifest.data.submission_files || []).map(row => row.id)],
+    ['deliveries', (manifest.data.deliveries || []).map(row => row.id)],
+    ['delivery_files', (manifest.data.delivery_files || []).map(row => row.id)],
+    ['invoices', (manifest.data.invoices || []).map(row => row.id)],
+    ['invoice_items', (manifest.data.invoice_items || []).map(row => row.id)],
+    ['brand_books', (manifest.data.brand_books || []).map(row => row.id)],
+    ['project_members', (manifest.data.project_members || []).map(row => row.id)],
+  ];
+
+  for (const [table, ids] of checks) {
+    const values = uniqueValues(ids);
+    if (!values.length) continue;
+    const existing = await selectByValues(table, 'id', values, 'id');
+    if (existing.length) {
+      throw new Error(`Restore blocked: ${table} already contains archived IDs.`);
+    }
+  }
+}
+
+async function readAnyArchiveManifest(file, onProgress) {
+  reportProgress(onProgress, 'Reading archive');
+  const zip = await JSZip.loadAsync(file);
+  const manifestFile = zip.file('manifest.json');
+  if (!manifestFile) throw new Error('Invalid archive: manifest.json is missing.');
+
+  reportProgress(onProgress, 'Reading manifest');
+  const manifest = JSON.parse(await manifestFile.async('string'));
+  if (manifest.archive_version !== ARCHIVE_VERSION) throw new Error('Unsupported archive version.');
+
+  return { zip, manifest };
+}
+
+async function uploadArchiveFiles(zip, fileRefs, onProgress) {
+  const refs = fileRefs || [];
+  if (!refs.length) {
+    reportProgress(onProgress, 'No files to restore');
+    return;
+  }
+
+  for (let i = 0; i < refs.length; i += 1) {
+    const ref = refs[i];
+    const zipFile = zip.file(ref.zipPath);
+    if (!zipFile) throw new Error(`Archive is missing ${ref.zipPath}.`);
+
+    reportProgress(onProgress, `Uploading files ${i + 1}/${refs.length}`);
+    const blob = await zipFile.async('blob');
+    const { error } = await supabase.storage.from(ref.bucket).upload(ref.path, blob, {
+      upsert: true,
+      contentType: blob.type || undefined,
+    });
+    if (error) throw error;
+  }
+}
+
+function getMissingProfileSummary(existingProfileIds, manifest) {
+  const hasProfile = id => !id || existingProfileIds.has(id);
+
+  return {
+    companyProfiles: (manifest.data.company_profiles || []).filter(profile => !existingProfileIds.has(profile.id)).length,
+    taskAssignments: (manifest.data.tasks || []).filter(task => task.assigned_to && !hasProfile(task.assigned_to)).length,
+    submissions: (manifest.data.submissions || []).filter(submission => submission.submitted_by && !hasProfile(submission.submitted_by)).length,
+    invoices: (manifest.data.invoices || []).filter(invoice => invoice.created_by && !hasProfile(invoice.created_by)).length,
+    projectMembers: (manifest.data.project_members || []).filter(member => member.profile_id && !hasProfile(member.profile_id)).length,
+  };
+}
+
+export async function restoreCompanyArchive(file, options = {}) {
+  const { onProgress } = options;
+  const { zip, manifest } = await readAnyArchiveManifest(file, onProgress);
+  if (!['company', 'companies'].includes(manifest.scope)) {
+    throw new Error('This archive is not a company archive.');
+  }
+
+  const normalizedManifest = manifest.scope === 'company'
+    ? manifest
+    : {
+        ...manifest,
+        data: {
+          company: null,
+          company_prices: manifest.data.company_prices || [],
+          projects: manifest.data.projects || [],
+          tasks: manifest.data.tasks || [],
+          submissions: manifest.data.submissions || [],
+          submission_files: manifest.data.submission_files || [],
+          deliveries: manifest.data.deliveries || [],
+          delivery_files: manifest.data.delivery_files || [],
+          invoices: manifest.data.invoices || [],
+          invoice_items: manifest.data.invoice_items || [],
+          brand_books: manifest.data.brand_books || [],
+          project_members: manifest.data.project_members || [],
+          company_profiles: manifest.data.company_profiles || [],
+          referenced_profiles: manifest.data.referenced_profiles || [],
+          companies: manifest.data.companies || [],
+        },
+      };
+
+  const companyRows = manifest.scope === 'company'
+    ? [manifest.data.company]
+    : (manifest.data.companies || []);
+
+  const companyScopedManifest = {
+    ...normalizedManifest,
+    data: {
+      ...normalizedManifest.data,
+      companies: companyRows,
+    },
+  };
+
+  reportProgress(onProgress, 'Validating restore');
+  await assertNoRestoreConflicts({
+    ...companyScopedManifest,
+    data: {
+      ...companyScopedManifest.data,
+      company: companyRows[0],
+      companies: companyRows,
+    },
+  });
+
+  const referencedProfileIds = uniqueValues([
+    ...(companyScopedManifest.data.company_profiles || []).map(profile => profile.id),
+    ...(companyScopedManifest.data.project_members || []).map(member => member.profile_id),
+    ...(companyScopedManifest.data.tasks || []).map(task => task.assigned_to),
+    ...(companyScopedManifest.data.submissions || []).map(submission => submission.submitted_by),
+    ...(companyScopedManifest.data.invoices || []).map(invoice => invoice.created_by),
+  ]);
+  const existingProfiles = referencedProfileIds.length
+    ? await selectByValues('profiles', 'id', referencedProfileIds, 'id')
+    : [];
+  const existingProfileIds = new Set(existingProfiles.map(profile => profile.id));
+
+  await uploadArchiveFiles(zip, manifest.storage_files, onProgress);
+
+  reportProgress(onProgress, 'Restoring database records');
+  const restoredTasks = (companyScopedManifest.data.tasks || []).map(task => ({
+    ...task,
+    assigned_to: existingProfileIds.has(task.assigned_to) ? task.assigned_to : null,
+  }));
+  const restoredSubmissions = (companyScopedManifest.data.submissions || []).map(submission => ({
+    ...submission,
+    submitted_by: existingProfileIds.has(submission.submitted_by) ? submission.submitted_by : null,
+  }));
+  const restoredInvoices = (companyScopedManifest.data.invoices || []).map(invoice => ({
+    ...invoice,
+    created_by: existingProfileIds.has(invoice.created_by) ? invoice.created_by : null,
+  }));
+  const restoredProjectMembers = (companyScopedManifest.data.project_members || []).filter(member => existingProfileIds.has(member.profile_id));
+  const restoredCompanyProfileRows = (companyScopedManifest.data.company_profiles || [])
+    .filter(profile => existingProfileIds.has(profile.id));
+
+  await insertRows('companies', companyRows);
+  await insertRows('company_prices', companyScopedManifest.data.company_prices || []);
+  await insertRows('projects', companyScopedManifest.data.projects || []);
+  await insertRows('tasks', restoredTasks);
+  await insertRows('submissions', restoredSubmissions);
+  await insertRows('submission_files', companyScopedManifest.data.submission_files || []);
+  await insertRows('deliveries', companyScopedManifest.data.deliveries || []);
+  await insertRows('delivery_files', companyScopedManifest.data.delivery_files || []);
+  await insertRows('invoices', restoredInvoices);
+  await insertRows('invoice_items', companyScopedManifest.data.invoice_items || []);
+  await insertRows('brand_books', companyScopedManifest.data.brand_books || []);
+  await insertRows('project_members', restoredProjectMembers);
+
+  if (restoredCompanyProfileRows.length) {
+    reportProgress(onProgress, 'Re-linking existing users');
+    const profilesByCompany = restoredCompanyProfileRows.reduce((acc, profile) => {
+      const key = profile.company_id;
+      if (!key) return acc;
+      if (!acc[key]) acc[key] = [];
+      acc[key].push(profile.id);
+      return acc;
+    }, {});
+
+    for (const [companyId, profileIds] of Object.entries(profilesByCompany)) {
+      for (const batch of chunk(profileIds, ROW_BATCH_SIZE)) {
+        const { error } = await supabase.from('profiles')
+          .update({ company_id: companyId })
+          .in('id', batch);
+        if (error) throw error;
+      }
+    }
+  }
+
+  return {
+    companyName: companyRows[0]?.name || manifest.company_name,
+    companyCount: companyRows.length,
+    missingProfiles: getMissingProfileSummary(existingProfileIds, {
+      data: {
+        company_profiles: companyScopedManifest.data.company_profiles || [],
+        project_members: companyScopedManifest.data.project_members || [],
+        tasks: companyScopedManifest.data.tasks || [],
+        submissions: companyScopedManifest.data.submissions || [],
+        invoices: companyScopedManifest.data.invoices || [],
+      },
+    }),
+  };
+}
+
+export async function restoreCompletedJobsArchive(file, options = {}) {
+  const { onProgress } = options;
+  const { zip, manifest } = await readAnyArchiveManifest(file, onProgress);
+  if (manifest.scope !== 'completed_tasks') throw new Error('This archive is not a completed jobs archive.');
+
+  reportProgress(onProgress, 'Validating restore');
+  const taskIds = uniqueValues((manifest.data.tasks || []).map(task => task.id));
+  const submissionIds = uniqueValues((manifest.data.submissions || []).map(submission => submission.id));
+  const deliveryIds = uniqueValues((manifest.data.deliveries || []).map(delivery => delivery.id));
+  const companyIds = uniqueValues((manifest.company_refs || []).map(company => company.id));
+  const projectIds = uniqueValues((manifest.project_refs || []).map(project => project.id));
+  const invoiceItemIds = uniqueValues((manifest.data.invoice_items || []).map(item => item.id));
+
+  const [existingTasks, existingSubmissions, existingDeliveries, existingCompanies, existingProjects, existingInvoiceItems] = await Promise.all([
+    taskIds.length ? selectByValues('tasks', 'id', taskIds, 'id') : Promise.resolve([]),
+    submissionIds.length ? selectByValues('submissions', 'id', submissionIds, 'id') : Promise.resolve([]),
+    deliveryIds.length ? selectByValues('deliveries', 'id', deliveryIds, 'id') : Promise.resolve([]),
+    companyIds.length ? selectByValues('companies', 'id', companyIds, 'id') : Promise.resolve([]),
+    projectIds.length ? selectByValues('projects', 'id', projectIds, 'id') : Promise.resolve([]),
+    invoiceItemIds.length ? selectByValues('invoice_items', 'id', invoiceItemIds, 'id') : Promise.resolve([]),
+  ]);
+
+  if (existingTasks.length || existingSubmissions.length || existingDeliveries.length) {
+    throw new Error('Restore blocked: one or more archived job IDs already exist.');
+  }
+  if (existingCompanies.length !== companyIds.length) {
+    throw new Error('Restore blocked: one or more original companies no longer exist.');
+  }
+  if (existingProjects.length !== projectIds.length) {
+    throw new Error('Restore blocked: one or more original projects no longer exist.');
+  }
+
+  const referencedProfileIds = uniqueValues([
+    ...(manifest.data.tasks || []).map(task => task.assigned_to),
+    ...(manifest.data.submissions || []).map(submission => submission.submitted_by),
+  ]);
+  const existingProfiles = referencedProfileIds.length
+    ? await selectByValues('profiles', 'id', referencedProfileIds, 'id')
+    : [];
+  const existingProfileIds = new Set(existingProfiles.map(profile => profile.id));
+
+  await uploadArchiveFiles(zip, manifest.storage_files, onProgress);
+
+  reportProgress(onProgress, 'Restoring database records');
+  const restoredTasks = (manifest.data.tasks || []).map(task => ({
+    ...task,
+    assigned_to: existingProfileIds.has(task.assigned_to) ? task.assigned_to : null,
+  }));
+  const restoredSubmissions = (manifest.data.submissions || []).map(submission => ({
+    ...submission,
+    submitted_by: existingProfileIds.has(submission.submitted_by) ? submission.submitted_by : null,
+  }));
+
+  await insertRows('tasks', restoredTasks);
+  await insertRows('submissions', restoredSubmissions);
+  await insertRows('submission_files', manifest.data.submission_files || []);
+  await insertRows('deliveries', manifest.data.deliveries || []);
+  await insertRows('delivery_files', manifest.data.delivery_files || []);
+
+  const existingInvoiceItemIds = new Set(existingInvoiceItems.map(item => item.id));
+  const invoiceItemsToInsert = [];
+  const invoiceItemsToUpdate = [];
+  for (const item of manifest.data.invoice_items || []) {
+    if (existingInvoiceItemIds.has(item.id)) invoiceItemsToUpdate.push(item);
+    else invoiceItemsToInsert.push(item);
+  }
+  await insertRows('invoice_items', invoiceItemsToInsert);
+  for (const item of invoiceItemsToUpdate) {
+    const { error } = await supabase.from('invoice_items')
+      .update({ task_id: item.task_id, submission_id: item.submission_id })
+      .eq('id', item.id);
+    if (error) throw error;
+  }
+
+  return {
+    taskCount: restoredTasks.length,
+    clearedAssignments: restoredTasks.filter(task => !task.assigned_to).length,
+    clearedSubmissionUsers: restoredSubmissions.filter(submission => !submission.submitted_by).length,
+  };
+}
+
+export async function restoreBrandBookArchive(file, options = {}) {
+  const { onProgress } = options;
+  const { zip, manifest } = await readAnyArchiveManifest(file, onProgress);
+  if (!['brand_book', 'brand_books'].includes(manifest.scope)) {
+    throw new Error('This archive is not a brand book archive.');
+  }
+
+  reportProgress(onProgress, 'Validating restore');
+  const books = manifest.scope === 'brand_book'
+    ? [manifest.data.brand_book]
+    : (manifest.data.brand_books || []);
+
+  const existingBookIds = uniqueValues(books.map(book => book.id));
+  const existingBooks = existingBookIds.length ? await selectByValues('brand_books', 'id', existingBookIds, 'id') : [];
+  if (existingBooks.length) throw new Error('Restore blocked: one or more brand book IDs already exist.');
+
+  const companyIds = uniqueValues(books.map(book => book.client_id));
+  const existingCompanies = companyIds.length ? await selectByValues('companies', 'id', companyIds, 'id') : [];
+  const existingCompanyIds = new Set(existingCompanies.map(company => company.id));
+
+  const restoredBooks = books.map(book => (
+    book.client_id && !existingCompanyIds.has(book.client_id)
+      ? { ...book, client_id: null }
+      : { ...book }
+  ));
+
+  await uploadArchiveFiles(zip, manifest.storage_files, onProgress);
+  reportProgress(onProgress, 'Restoring database records');
+  await insertRows('brand_books', restoredBooks);
+
+  return {
+    bookCount: restoredBooks.length,
+    unlinkedCount: restoredBooks.filter(book => !book.client_id).length,
+    clientName: restoredBooks[0]?.client_name,
+  };
+}
diff --git a/src/lib/brandBookEditor.js b/src/lib/brandBookEditor.js
index 328f818..a739556 100644
--- a/src/lib/brandBookEditor.js
+++ b/src/lib/brandBookEditor.js
@@ -14,33 +14,252 @@ function formatDate(dateStr) {
   return d.toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' });
 }
 
-// Accepts File, data URL string, or https URL string — returns data URL
+function formatCoverAddress(address) {
+  const parts = String(address || '')
+    .split(',')
+    .map(part => part.trim())
+    .filter(Boolean);
+  if (parts.length >= 3) {
+    const countryless = parts[parts.length - 1].toLowerCase() === 'united states' || parts[parts.length - 1].toLowerCase() === 'usa'
+      ? parts.slice(0, -1)
+      : parts;
+    return [
+      countryless[0],
+      countryless.slice(1).join(', '),
+    ].filter(Boolean);
+  }
+  return address ? [address] : [];
+}
+
+// Parse JPEG EXIF orientation tag from raw bytes (returns 1–8; 1 = normal).
+function parseExifOrientation(bytes) {
+  if (bytes.length < 4 || bytes[0] !== 0xFF || bytes[1] !== 0xD8) return 1;
+  let pos = 2;
+  while (pos < bytes.length - 4) {
+    if (bytes[pos] !== 0xFF) break;
+    const marker = bytes[pos + 1];
+    if (marker === 0xDA) break; // SOS — no more metadata
+    const segLen = (bytes[pos + 2] << 8) | bytes[pos + 3];
+    if (marker === 0xE1 && segLen >= 14 &&
+        bytes[pos+4]===0x45 && bytes[pos+5]===0x78 && bytes[pos+6]===0x69 &&
+        bytes[pos+7]===0x66 && bytes[pos+8]===0x00 && bytes[pos+9]===0x00) {
+      const tiff = pos + 10;
+      const le = bytes[tiff] === 0x49;
+      const r16 = (o) => le ? (bytes[o]|(bytes[o+1]<<8)) : ((bytes[o]<<8)|bytes[o+1]);
+      const r32 = (o) => le
+        ? ((bytes[o]|(bytes[o+1]<<8)|(bytes[o+2]<<16)|(bytes[o+3]<<24))>>>0)
+        : (((bytes[o]<<24)|(bytes[o+1]<<16)|(bytes[o+2]<<8)|bytes[o+3])>>>0);
+      const ifd = tiff + r32(tiff + 4);
+      if (ifd + 2 > bytes.length) break;
+      const n = r16(ifd);
+      for (let i = 0; i < n; i++) {
+        const e = ifd + 2 + i * 12;
+        if (e + 12 > bytes.length) break;
+        if (r16(e) === 0x0112) return r16(e + 8);
+      }
+    }
+    pos += 2 + segLen;
+  }
+  return 1;
+}
+
+// Apply EXIF orientation correction to a Blob → returns corrected data URL.
+//
+// Strategy: try createImageBitmap(imageOrientation:'none') first to get raw pixels,
+// then apply explicit canvas transforms. BUT some browsers (older Safari) ignore the
+// option and return already-corrected pixels — detect this by comparing bitmap
+// dimensions to what the EXIF orientation implies for raw pixels, and skip the
+// transform if the browser already corrected. Falls back to img→canvas if
+// createImageBitmap throws.
+async function correctOrientation(blob) {
+  if (!blob) return null;
+  const isPng = blob.type === 'image/png';
+  const toDataUrl = (b) => new Promise((res) => {
+    const r = new FileReader();
+    r.onload = (e) => res(e.target.result);
+    r.onerror = () => res(null);
+    r.readAsDataURL(b);
+  });
+  if (isPng) return toDataUrl(blob);
+
+  let orientation = 1;
+  let ab = null;
+  try { ab = await blob.arrayBuffer(); orientation = parseExifOrientation(new Uint8Array(ab)); }
+  catch { /* treat as normal */ }
+
+  if (orientation <= 1) return toDataUrl(blob);
+
+  // Helper: build canvas with explicit transform if needed.
+  // swapAxes orientations (5-8): raw JPEG stores landscape pixels.
+  // If browser ignored imageOrientation:'none', it returned corrected (portrait) pixels —
+  // detect this by checking bmpW > bmpH (raw=landscape) vs bmpW < bmpH (corrected=portrait).
+  const applyToCanvas = (source, bmpW, bmpH) => {
+    const swapAxes = orientation >= 5;
+    // For swap-axes orientations: raw = landscape (w > h), corrected = portrait (w < h)
+    const isRaw = swapAxes ? (bmpW > bmpH) : true;
+    const c = document.createElement('canvas');
+    const ctx = c.getContext('2d');
+    if (isRaw && swapAxes) { c.width = bmpH; c.height = bmpW; }
+    else                   { c.width = bmpW; c.height = bmpH; }
+    if (isRaw) {
+      switch (orientation) {
+        case 2: ctx.transform(-1,  0,  0,  1, bmpW,    0); break;
+        case 3: ctx.transform(-1,  0,  0, -1, bmpW, bmpH); break;
+        case 4: ctx.transform( 1,  0,  0, -1,    0, bmpH); break;
+        case 5: ctx.transform( 0,  1,  1,  0,    0,    0); break;
+        case 6: ctx.transform( 0,  1, -1,  0, bmpH,    0); break;
+        case 7: ctx.transform( 0, -1, -1,  0, bmpH, bmpW); break;
+        case 8: ctx.transform( 0, -1,  1,  0,    0, bmpW); break;
+      }
+    }
+    ctx.drawImage(source, 0, 0);
+    return c.toDataURL('image/jpeg', 0.92);
+  };
+
+  // Primary: createImageBitmap with imageOrientation:'none'
+  try {
+    const src = ab ? new Blob([ab], { type: blob.type }) : blob;
+    const bmp = await createImageBitmap(src, { imageOrientation: 'none' });
+    const result = applyToCanvas(bmp, bmp.width, bmp.height);
+    bmp.close();
+    return result;
+  } catch { /* fall through */ }
+
+  // Fallback: img→canvas (browser may auto-correct EXIF — dimension check handles both cases)
+  const dataUrl = await toDataUrl(blob);
+  if (!dataUrl) return null;
+  return new Promise((resolve) => {
+    const img = new Image();
+    img.onload = () => {
+      try { resolve(applyToCanvas(img, img.naturalWidth, img.naturalHeight)); }
+      catch { resolve(dataUrl); }
+    };
+    img.onerror = () => resolve(dataUrl);
+    img.src = dataUrl;
+  });
+}
+
+function getDataUrlMimeType(dataUrl) {
+  if (typeof dataUrl !== 'string') return '';
+  const match = dataUrl.match(/^data:([^;,]+)[;,]/i);
+  return match?.[1]?.toLowerCase() || '';
+}
+
+function isPdfSafeDataUrl(dataUrl) {
+  const mime = getDataUrlMimeType(dataUrl);
+  return mime === 'image/png' || mime === 'image/jpeg';
+}
+
+function getJsPdfFormat(dataUrl) {
+  return getDataUrlMimeType(dataUrl) === 'image/png' ? 'PNG' : 'JPEG';
+}
+
+async function ensurePdfSafeDataUrl(dataUrl, preferPng = false) {
+  if (!dataUrl) return null;
+  if (isPdfSafeDataUrl(dataUrl)) return dataUrl;
+
+  const img = await loadImage(dataUrl);
+  if (!img) return null;
+
+  const c = document.createElement('canvas');
+  c.width = img.naturalWidth || img.width || 1;
+  c.height = img.naturalHeight || img.height || 1;
+  const ctx = c.getContext('2d');
+  if (!ctx) return null;
+
+  if (!preferPng) {
+    ctx.fillStyle = '#ffffff';
+    ctx.fillRect(0, 0, c.width, c.height);
+  }
+  ctx.drawImage(img, 0, 0);
+
+  return preferPng
+    ? c.toDataURL('image/png')
+    : c.toDataURL('image/jpeg', 0.92);
+}
+
+function addDataUrlImage(doc, dataUrl, x, y, w, h) {
+  if (!dataUrl) return;
+  doc.addImage(dataUrl, getJsPdfFormat(dataUrl), x, y, w, h);
+}
+
+// Accepts File/Blob, data URL string, or https/blob URL string.
+// Returns EXIF-corrected, PDF-safe data URL, or null on failure.
+// 15-second fetch timeout prevents infinite hangs on stalled network requests.
 async function resolvePhoto(source) {
   if (!source) return null;
-  if (source instanceof File) {
-    return new Promise((resolve) => {
-      const reader = new FileReader();
-      reader.onload = (e) => resolve(e.target.result);
-      reader.onerror = () => resolve(null);
-      reader.readAsDataURL(source);
-    });
+  if (source instanceof File || source instanceof Blob) {
+    const corrected = await correctOrientation(source);
+    return ensurePdfSafeDataUrl(corrected, source.type === 'image/png');
   }
   if (typeof source === 'string') {
-    if (source.startsWith('data:')) return source;
+    if (source.startsWith('data:')) {
+      return ensurePdfSafeDataUrl(source, getDataUrlMimeType(source) === 'image/png');
+    }
     try {
-      const resp = await fetch(source);
+      const ctrl = new AbortController();
+      const timer = setTimeout(() => ctrl.abort(), 15000);
+      const resp = await fetch(source, { signal: ctrl.signal });
+      clearTimeout(timer);
       const blob = await resp.blob();
-      return new Promise((resolve) => {
-        const reader = new FileReader();
-        reader.onload = (e) => resolve(e.target.result);
-        reader.onerror = () => resolve(null);
-        reader.readAsDataURL(blob);
-      });
+      const corrected = await correctOrientation(blob);
+      return ensurePdfSafeDataUrl(corrected, blob.type === 'image/png');
     } catch { return null; }
   }
   return null;
 }
 
+// Downsample a data-URL image to 300 DPI for its rendered display size before
+// embedding in jsPDF. PNGs are preserved only when needed for transparency.
+// Images already at or below the target pixel count are returned as-is.
+const PX_PER_PT = 300 / 72;
+const MAP_PX_PER_PT = 180 / 72;
+const SIGN_PX_PER_PT = 180 / 72;
+const THUMB_PX_PER_PT = 110 / 72;
+
+function toMapJpeg(dataUrl, img, displayPtW, displayPtH, quality = 0.78) {
+  if (!dataUrl || !img) return dataUrl;
+  const tW = Math.max(1, Math.round(displayPtW * MAP_PX_PER_PT));
+  const tH = Math.max(1, Math.round(displayPtH * MAP_PX_PER_PT));
+  if (!dataUrl.startsWith('data:image/png') && img.naturalWidth <= tW && img.naturalHeight <= tH) return dataUrl;
+  const c = document.createElement('canvas');
+  c.width = tW;
+  c.height = tH;
+  c.getContext('2d').drawImage(img, 0, 0, tW, tH);
+  return c.toDataURL('image/jpeg', quality);
+}
+
+function toCoverImage(dataUrl, img, displayPtW, displayPtH, quality = 0.82, pxPerPt = PX_PER_PT) {
+  if (!dataUrl || !img) return null;
+  const tW = Math.max(1, Math.round(displayPtW * pxPerPt));
+  const tH = Math.max(1, Math.round(displayPtH * pxPerPt));
+  const srcAspect = img.naturalWidth / img.naturalHeight;
+  const dstAspect = displayPtW / displayPtH;
+  let sx = 0;
+  let sy = 0;
+  let sW = img.naturalWidth;
+  let sH = img.naturalHeight;
+
+  if (srcAspect > dstAspect) {
+    sW = img.naturalHeight * dstAspect;
+    sx = (img.naturalWidth - sW) / 2;
+  } else {
+    sH = img.naturalWidth / dstAspect;
+    sy = (img.naturalHeight - sH) / 2;
+  }
+
+  const c = document.createElement('canvas');
+  c.width = tW;
+  c.height = tH;
+  const ctx = c.getContext('2d');
+  ctx.drawImage(img, sx, sy, sW, sH, 0, 0, tW, tH);
+  const format = dataUrl.startsWith('data:image/png') ? 'PNG' : 'JPEG';
+  const croppedDataUrl = format === 'PNG'
+    ? c.toDataURL('image/png')
+    : c.toDataURL('image/jpeg', quality);
+  return { dataUrl: croppedDataUrl, format };
+}
+
 function loadImage(src) {
   return new Promise((resolve) => {
     if (!src) return resolve(null);
@@ -98,13 +317,11 @@ const BOLCHOZ_FOOTER_H = BOLCHOZ_LOGO_H + 8; // space reserved at bottom for foo
 
 function addBolchozFooter(doc, pageNum, totalPages, clientLogoDataUrl, clientLogoImg) {
   const logoY = H - MARGIN - BOLCHOZ_LOGO_H;
-  const pgDivY = H - MARGIN - 3.5; // vertical center of 10pt text
-
   let footerLogoW = 0;
   if (clientLogoDataUrl && clientLogoImg) {
     const aspect = clientLogoImg.naturalWidth / clientLogoImg.naturalHeight;
     footerLogoW = BOLCHOZ_LOGO_H * aspect;
-    doc.addImage(clientLogoDataUrl, MARGIN, logoY, footerLogoW, BOLCHOZ_LOGO_H);
+    addDataUrlImage(doc, clientLogoDataUrl, MARGIN, logoY, footerLogoW, BOLCHOZ_LOGO_H);
   }
 
   const pgLabel = `Page ${String(pageNum).padStart(2, '0')} of ${String(totalPages).padStart(2, '0')}`;
@@ -113,14 +330,6 @@ function addBolchozFooter(doc, pageNum, totalPages, clientLogoDataUrl, clientLog
   doc.setTextColor(150, 150, 150);
   doc.text(pgLabel, W - MARGIN, H - MARGIN, { align: 'right' });
 
-  const pgLabelW = doc.getTextWidth(pgLabel);
-  const divStartX = MARGIN + (footerLogoW > 0 ? footerLogoW + 12 : 0);
-  const divEndX = W - MARGIN - pgLabelW - 10;
-  if (divEndX > divStartX) {
-    doc.setDrawColor(210, 210, 210);
-    doc.setLineWidth(0.5);
-    doc.line(divStartX, pgDivY, divEndX, pgDivY);
-  }
 }
 
 export async function generateBrandBookEditorPDF(data) {
@@ -131,7 +340,7 @@ export async function generateBrandBookEditorPDF(data) {
     clientContactName, clientContactEmail, clientContactPhone,
     approvedDate, approvalNotes } = data;
 
-  const doc = new jsPDF({ orientation: 'landscape', format: 'letter', unit: 'pt' });
+  const doc = new jsPDF({ orientation: 'landscape', format: 'letter', unit: 'pt', compress: true });
 
   // Load assets
   const logo = await loadImage('/fourge-logo.png');
@@ -147,14 +356,28 @@ export async function generateBrandBookEditorPDF(data) {
   ]);
   const clientLogoImg = clientLogoDataUrl ? await loadImage(clientLogoDataUrl) : null;
   const signPhotoDataUrls = await Promise.all(signs.map(s => resolvePhoto(s.photoSource)));
+  const signExistingPhotoDataUrls = await Promise.all(signs.map(s => resolvePhoto(s.existingPhotoSource)));
+  const signRecommendationPhotoDataUrls = await Promise.all(signs.map(s => resolvePhoto(s.recommendationPhotoSource)));
+  const signDetailPhotoDataUrls = await Promise.all(signs.map(s => resolvePhoto(s.signDetailPhotoSource)));
   const sitePhotoDataUrls = await Promise.all((sitePhotoSources || []).map(s => resolvePhoto(s)));
   const validSitePhotos = sitePhotoDataUrls.filter(Boolean);
   const PHOTOS_PER_PAGE = 16;
 
   // Count pages
+  const INV_LABEL_H = 18;
+  const TABLE_ROW_H = 18;
+  const invFirstH = H - MARGIN - BOLCHOZ_FOOTER_H - (MARGIN + INV_LABEL_H);
+  const invFirstCap = Math.max(0, Math.floor(invFirstH / TABLE_ROW_H) - 1);
+  const invContH = invFirstH; // same geometry on cont. pages
+  const invContCap = Math.max(1, Math.floor(invContH / TABLE_ROW_H) - 1);
+  const extraInvPages = template === 'bolchoz' && signs.length > invFirstCap
+    ? Math.ceil((signs.length - invFirstCap) / invContCap)
+    : 0;
+
   let totalPages = 1; // cover
   if (siteMapDataUrl) totalPages++; // site map page
   totalPages++; // sign inventory
+  totalPages += extraInvPages; // overflow inventory pages
   totalPages += signs.length; // sign pages
   totalPages += Math.ceil(validSitePhotos.length / PHOTOS_PER_PAGE); // site photo pages
 
@@ -186,7 +409,7 @@ export async function generateBrandBookEditorPDF(data) {
       let dW, dH;
       if (ratio >= 1) { dW = logoBoxSize; dH = dW / ratio; }
       else { dH = logoBoxSize; dW = dH * ratio; }
-      doc.addImage(projectLogoDataUrl, logoBoxX, logoBoxY, dW, dH);
+      addDataUrlImage(doc, projectLogoDataUrl, logoBoxX, logoBoxY, dW, dH);
     }
   } else {
     doc.setFontSize(9);
@@ -238,18 +461,14 @@ export async function generateBrandBookEditorPDF(data) {
   doc.setTextColor(30, 30, 30);
   if (revisionDate) doc.text(formatDate(revisionDate), rtx(formatDate(revisionDate)), ty);
 
-  const sepY = logoBoxY + logoBoxSize + 10;
-
-  const botY = sepY + 14;
   const halfW = (W - MARGIN * 2 - 20) / 2;
-  const rightColX = MARGIN + halfW + 20;
 
   // ── Bottom left: Customer (anchored to bottom-left corner) ──────────────────
   const addrText = customerAddress || siteAddress || '';
   const addrLineH = 11;
   doc.setFontSize(9);
   doc.setFont('helvetica', 'normal');
-  const addrLines = addrText ? doc.splitTextToSize(addrText, halfW) : [];
+  const addrLines = formatCoverAddress(addrText);
 
   // Work bottom-up to anchor to H - MARGIN
   const lY_addr = H - MARGIN;
@@ -364,7 +583,7 @@ export async function generateBrandBookEditorPDF(data) {
         dH = clientLogoH; dW = dH * ratio;
         dx = clBoxLeft + (clientLogoW - dW) / 2; dy = clBoxTop;
       }
-      doc.addImage(clientLogoDataUrl, dx, dy, dW, dH);
+      addDataUrlImage(doc, clientLogoDataUrl, dx, dy, dW, dH);
     }
   } else {
     doc.setFontSize(8);
@@ -390,6 +609,25 @@ export async function generateBrandBookEditorPDF(data) {
   }
 
   const cY = H / 2;
+  if (projectLogoDataUrl) {
+    const pImg = await loadImage(projectLogoDataUrl);
+    if (pImg) {
+      const logoAreaW = 170;
+      const logoAreaH = 120;
+      const ratio = pImg.naturalWidth / pImg.naturalHeight;
+      let dW;
+      let dH;
+      if (ratio >= logoAreaW / logoAreaH) {
+        dW = logoAreaW;
+        dH = dW / ratio;
+      } else {
+        dH = logoAreaH;
+        dW = dH * ratio;
+      }
+      addDataUrlImage(doc, projectLogoDataUrl, W / 2 - dW / 2, cY - 190, dW, dH);
+    }
+  }
+
   doc.setFontSize(9); doc.setFont('helvetica', 'bold');
   doc.setTextColor(...ACCENT); doc.setCharSpace(3);
   doc.text('BRAND BOOK', W / 2, cY - 50, { align: 'center' });
@@ -407,14 +645,20 @@ export async function generateBrandBookEditorPDF(data) {
     doc.text(projectName, W / 2, cY + 14, { align: 'center' });
   }
 
+  const coverAddressLines = formatCoverAddress(customerAddress || siteAddress || '');
+  if (coverAddressLines.length > 0) {
+    doc.setFontSize(8); doc.setFont('helvetica', 'normal');
+    doc.setTextColor(150, 150, 150);
+    doc.text(coverAddressLines, W / 2, cY + 36, { align: 'center' });
+  }
+
   const metaParts = [];
-  if (siteAddress) metaParts.push(siteAddress);
   if (displayDate) metaParts.push(displayDate);
   if (preparedBy) metaParts.push(`Prepared by ${preparedBy}`);
   if (metaParts.length > 0) {
     doc.setFontSize(8); doc.setFont('helvetica', 'normal');
     doc.setTextColor(150, 150, 150);
-    doc.text(metaParts.join('  ·  '), W / 2, cY + 36, { align: 'center' });
+    doc.text(metaParts.join('  ·  '), W / 2, cY + 36 + (coverAddressLines.length * 10), { align: 'center' });
   }
 
   doc.setFontSize(9); doc.setFont('helvetica', 'bold');
@@ -428,17 +672,7 @@ export async function generateBrandBookEditorPDF(data) {
     pageNum++;
     doc.addPage();
     if (template === 'bolchoz') {
-      addBolchozFooter(doc, pageNum, totalPages, clientLogoDataUrl, clientLogoImg);
-
-      // "Site Map" header top-left
-      doc.setFontSize(14);
-      doc.setFont('helvetica', 'bold');
-      doc.setTextColor(160, 160, 160);
-      doc.setCharSpace(1.5);
-      doc.text('SITE MAP', MARGIN, MARGIN);
-      doc.setCharSpace(0);
-
-      const smLabelH = 22; // space below label before map
+      const smLabelH = 18; // space below label before map
       const smTop = MARGIN + smLabelH;
       const smBottom = H - MARGIN - BOLCHOZ_FOOTER_H;
       const smW = W - MARGIN * 2;
@@ -450,12 +684,29 @@ export async function generateBrandBookEditorPDF(data) {
         const boxAspect = smW / smH;
         let dw, dh, dx, dy;
         if (aspect > boxAspect) {
-          dw = smW; dh = dw / aspect; dx = MARGIN; dy = smTop + (smH - dh) / 2;
+          dh = smH; dw = dh * aspect;
+          dx = MARGIN - (dw - smW) / 2; dy = smTop;
         } else {
-          dh = smH; dw = dh * aspect; dx = MARGIN + (smW - dw) / 2; dy = smTop;
+          dw = smW; dh = dw / aspect;
+          dx = MARGIN; dy = smTop - (dh - smH) / 2;
         }
-        doc.addImage(siteMapDataUrl, dx, dy, dw, dh);
+        addDataUrlImage(doc, toMapJpeg(siteMapDataUrl, smImg, dw, dh), dx, dy, dw, dh);
+        // Mask overflow with white overlays
+        doc.setFillColor(255, 255, 255);
+        doc.rect(0, 0, W, smTop, 'F');
+        doc.rect(0, smTop + smH, W, H - smTop - smH, 'F');
+        doc.rect(0, smTop, MARGIN, smH, 'F');
+        doc.rect(MARGIN + smW, smTop, W - MARGIN - smW, smH, 'F');
       }
+
+      // Footer and header drawn last so they sit on top of overlays
+      addBolchozFooter(doc, pageNum, totalPages, clientLogoDataUrl, clientLogoImg);
+      doc.setFontSize(14);
+      doc.setFont('helvetica', 'bold');
+      doc.setTextColor(160, 160, 160);
+      doc.setCharSpace(1.5);
+      doc.text('SITE MAP', MARGIN, MARGIN + 10);
+      doc.setCharSpace(0);
     } else {
       addHeader(doc, logo, logoW, logoH, 'Site Map', pageNum, totalPages);
       addFooter(doc, clientName, displayDate);
@@ -475,7 +726,7 @@ export async function generateBrandBookEditorPDF(data) {
         }
         doc.setDrawColor(200, 200, 200); doc.setLineWidth(0.4);
         doc.rect(MARGIN, smTop, smW, smH);
-        doc.addImage(siteMapDataUrl, dx, dy, dw, dh);
+        addDataUrlImage(doc, toMapJpeg(siteMapDataUrl, smImg, dw, dh), dx, dy, dw, dh);
       }
     }
   }
@@ -484,7 +735,8 @@ export async function generateBrandBookEditorPDF(data) {
   pageNum++;
   doc.addPage();
 
-  const invContentTop = template === 'bolchoz' ? MARGIN : HEADER_H + 16;
+  const invLabelH = 18; // space for "FLOOR PLAN" / "SIGN INVENTORY" labels
+  const invContentTop = template === 'bolchoz' ? MARGIN + invLabelH : HEADER_H + 16;
   const invContentBottom = template === 'bolchoz' ? H - MARGIN - BOLCHOZ_FOOTER_H : H - 30;
   const invContentH = invContentBottom - invContentTop;
 
@@ -513,7 +765,7 @@ export async function generateBrandBookEditorPDF(data) {
           drawW = mapW; drawH = mapW / imgAspect;
           drawX = mapX; drawY = mapY - (drawH - invContentH) / 2;
         }
-        doc.addImage(inventoryMapDataUrl, drawX, drawY, drawW, drawH);
+        addDataUrlImage(doc, toMapJpeg(inventoryMapDataUrl, invMapImg, drawW, drawH), drawX, drawY, drawW, drawH);
       }
     }
 
@@ -531,6 +783,15 @@ export async function generateBrandBookEditorPDF(data) {
       doc.text('No Map Available', mapX + mapW / 2, mapY + invContentH / 2, { align: 'center' });
     }
 
+    // Draw page labels on top of overlays
+    doc.setFontSize(14);
+    doc.setFont('helvetica', 'bold');
+    doc.setTextColor(160, 160, 160);
+    doc.setCharSpace(1.5);
+    doc.text('FLOOR PLAN', MARGIN, MARGIN + 10);
+    doc.text('SIGN INVENTORY', tableX, MARGIN + 10);
+    doc.setCharSpace(0);
+
     addBolchozFooter(doc, pageNum, totalPages, clientLogoDataUrl, clientLogoImg);
   } else {
     addHeader(doc, logo, logoW, logoH, 'Sign Inventory', pageNum, totalPages);
@@ -548,7 +809,7 @@ export async function generateBrandBookEditorPDF(data) {
           drawH = invContentH; drawW = invContentH * imgAspect;
           drawX = mapX + (mapW - drawW) / 2; drawY = mapY;
         }
-        doc.addImage(inventoryMapDataUrl, drawX, drawY, drawW, drawH);
+        addDataUrlImage(doc, toMapJpeg(inventoryMapDataUrl, invMapImg, drawW, drawH), drawX, drawY, drawW, drawH);
       }
     } else {
       doc.setFontSize(14);
@@ -558,7 +819,40 @@ export async function generateBrandBookEditorPDF(data) {
     }
   }
 
-  drawInventoryTable(doc, signs, tableX, invContentTop, tableW, invContentH, template);
+  let nextSignIdx = drawInventoryTable(doc, signs, tableX, invContentTop, tableW, invContentH, template, 0);
+
+  // ─── SIGN INVENTORY CONTINUATION PAGES (bolchoz) ─────────────────────────────
+  while (template === 'bolchoz' && nextSignIdx < signs.length) {
+    pageNum++;
+    doc.addPage();
+    addBolchozFooter(doc, pageNum, totalPages, clientLogoDataUrl, clientLogoImg);
+
+    const contTop = MARGIN + INV_LABEL_H;
+    const contH = H - MARGIN - BOLCHOZ_FOOTER_H - contTop;
+    const contW = W - MARGIN * 2;
+
+    doc.setFontSize(14);
+    doc.setFont('helvetica', 'bold');
+    doc.setTextColor(160, 160, 160);
+    doc.setCharSpace(1.5);
+    doc.text('SIGN INVENTORY', MARGIN, MARGIN + 10);
+    doc.setCharSpace(0);
+
+    nextSignIdx = drawInventoryTable(doc, signs, MARGIN, contTop, contW, contH, template, nextSignIdx);
+  }
+
+  // ─── Cover-fit helper (maintains aspect ratio, fills box with centered crop) ──
+  // Images are downsampled to 300 DPI for their rendered display size before
+  // embedding — keeps file size small while maintaining print quality.
+  const drawCover = async (dataUrl, bx, by, bw, bh, options = {}) => {
+    const img = await loadImage(dataUrl);
+    if (!img) return;
+    const cropped = toCoverImage(dataUrl, img, bw, bh, options.quality ?? 0.8, options.pxPerPt ?? SIGN_PX_PER_PT);
+    if (!cropped) return;
+    doc.setFillColor(245, 245, 245);
+    doc.rect(bx, by, bw, bh, 'F');
+    doc.addImage(cropped.dataUrl, cropped.format, bx, by, bw, bh);
+  };
 
   // ─── SIGN PAGES ───────────────────────────────────────────────────────────────
   for (let i = 0; i < signs.length; i++) {
@@ -576,98 +870,197 @@ export async function generateBrandBookEditorPDF(data) {
 
     const top = template === 'bolchoz' ? MARGIN : HEADER_H + 16;
     const bottom = template === 'bolchoz' ? H - MARGIN - BOLCHOZ_FOOTER_H : H - 30;
-    const availH = bottom - top;
-    const photoW = (W - MARGIN * 2 - 20) * 0.45;
-    const specsX = MARGIN + photoW + 20;
-    const specsW = W - MARGIN - specsX;
 
-    if (photoDataUrl) {
-      const photoImg = await loadImage(photoDataUrl);
-      if (photoImg) {
-        const imgAspect = photoImg.naturalWidth / photoImg.naturalHeight;
-        const boxAspect = photoW / availH;
-        let dw, dh, dx, dy;
-        if (imgAspect > boxAspect) {
-          dw = photoW; dh = photoW / imgAspect;
-          dx = MARGIN; dy = top + (availH - dh) / 2;
-        } else {
-          dh = availH; dw = availH * imgAspect;
-          dx = MARGIN + (photoW - dw) / 2; dy = top;
+    if (template === 'bolchoz') {
+      // ── Bolchoz sign page ──────────────────────────────────────────────────────
+      const TEAL = [80, 80, 80]; // dark gray divider
+      const PHOTO_W = 288; // 4"
+      const PHOTO_H = 180; // 2.5"
+      const photoX = W - MARGIN - PHOTO_W;
+      const textW = photoX - MARGIN - 16;
+
+      // Diamond header
+      const dr = 20;
+      const dcx = MARGIN + dr;
+      const dcy = top + dr;
+
+      doc.setDrawColor(160, 160, 160);
+      doc.setLineWidth(0.8);
+      doc.lines([[dr, dr], [-dr, dr], [-dr, -dr], [dr, -dr]], dcx, dcy - dr, [1, 1], 'S', true);
+      doc.setFontSize(13);
+      doc.setFont('helvetica', 'bold');
+      doc.setTextColor(...DARK);
+      doc.text(sign.signNumber || String(i + 1), dcx, dcy + 4, { align: 'center' });
+
+      const recText = sign.recommendation || '-';
+      doc.setFontSize(14);
+      doc.setFont('helvetica', 'bold');
+      doc.setTextColor(160, 160, 160);
+      doc.setCharSpace(1.5);
+      doc.text(doc.splitTextToSize(recText, W - MARGIN - (dcx + dr + 12))[0], dcx + dr + 12, dcy + 5);
+      doc.setCharSpace(0);
+
+      const tealY = top + dr * 2 + 8;
+      doc.setDrawColor(...TEAL);
+      doc.setLineWidth(1);
+      doc.line(MARGIN, tealY, W - MARGIN, tealY);
+      const sy = tealY + 16;
+
+      // ── Two-column layout ──────────────────────────────────────────────────────
+      const colStart = sy;
+
+
+      // ── Compute all positions ─────────────────────────────────────────────────
+      const rcAvailH   = bottom - colStart;
+      const RC_LABEL_H = 16;
+      const RC_PHOTO_H = (rcAvailH - RC_LABEL_H * 2) / 2;
+      const existHeaderY = colStart;
+      const existPhotoY  = existHeaderY + RC_LABEL_H;
+      const recHeaderY   = existPhotoY + RC_PHOTO_H;
+      const recPhotoY    = recHeaderY + RC_LABEL_H;
+
+      const availH   = bottom - colStart;
+      const LABEL_H  = 16;
+      const DETAIL_H = 180;  // 2.5"
+      const GAP      = 16;
+      const specH    = availH / 3;
+      const specStartY    = colStart;
+      const specContentY  = specStartY + LABEL_H;
+      const detailHeaderY = colStart + specH + GAP;
+      const detailPhotoY  = detailHeaderY + LABEL_H;
+      const notesStartY   = detailPhotoY + DETAIL_H + GAP;
+      const notesContentY = notesStartY + LABEL_H;
+
+      const specLines = sign.specifications ? doc.splitTextToSize(sign.specifications, textW) : [];
+      const noteLines = sign.notes          ? doc.splitTextToSize(sign.notes, textW)          : [];
+
+      // ── Draw order: sign detail first, right column photos second (covers any
+      //    spill from sign detail masks), teal line last before text ──────────────
+      await drawCover(signDetailPhotoDataUrls[i], MARGIN, detailPhotoY, textW, DETAIL_H);
+      await drawCover(signExistingPhotoDataUrls[i], photoX, existPhotoY, PHOTO_W, RC_PHOTO_H);
+      await drawCover(signRecommendationPhotoDataUrls[i], photoX, recPhotoY, PHOTO_W, RC_PHOTO_H);
+
+      // Redraw teal line on top of any photo masks
+      doc.setDrawColor(...TEAL); doc.setLineWidth(1);
+      doc.line(MARGIN, tealY, W - MARGIN, tealY);
+
+      // ── All text last so nothing gets painted over ────────────────────────────
+      doc.setFontSize(10); doc.setFont('helvetica', 'bold'); doc.setTextColor(80, 80, 80);
+      doc.text('Existing:', photoX, existHeaderY + 12);
+      if (sign.type) {
+        const lw = doc.getTextWidth('Existing:');
+        doc.setFont('helvetica', 'normal'); doc.setTextColor(50, 50, 50);
+        doc.text(doc.splitTextToSize(sign.type, PHOTO_W - lw - 4)[0], photoX + lw + 4, existHeaderY + 12);
+      }
+      doc.setFontSize(10); doc.setFont('helvetica', 'bold'); doc.setTextColor(80, 80, 80);
+      doc.text('Recommendation:', photoX, recHeaderY + 12);
+      if (sign.recommendation) {
+        const lw = doc.getTextWidth('Recommendation:');
+        doc.setFont('helvetica', 'normal'); doc.setTextColor(50, 50, 50);
+        doc.text(doc.splitTextToSize(sign.recommendation, PHOTO_W - lw - 4)[0], photoX + lw + 4, recHeaderY + 12);
+      }
+
+      doc.setFontSize(10); doc.setFont('helvetica', 'bold'); doc.setTextColor(100, 100, 100);
+      doc.text('Specifications:', MARGIN, specStartY + 11);
+      if (specLines.length) {
+        doc.setFont('helvetica', 'normal'); doc.setTextColor(60, 60, 60);
+        doc.text(specLines, MARGIN, specContentY + 11);
+      }
+      doc.setFontSize(10); doc.setFont('helvetica', 'bold'); doc.setTextColor(120, 120, 120);
+      doc.text('Sign Detail:', MARGIN, detailHeaderY + 11);
+      doc.setFontSize(10); doc.setFont('helvetica', 'bold'); doc.setTextColor(100, 100, 100);
+      doc.text('Notes:', MARGIN, notesStartY + 11);
+      if (noteLines.length) {
+        doc.setFont('helvetica', 'italic'); doc.setTextColor(80, 80, 80);
+        doc.text(noteLines, MARGIN, notesContentY + 11);
+      }
+
+    } else {
+      // ── Fourge sign page ───────────────────────────────────────────────────────
+      const availH = bottom - top;
+      const photoW = (W - MARGIN * 2 - 20) * 0.45;
+      const specsX = MARGIN + photoW + 20;
+      const specsW = W - MARGIN - specsX;
+
+      if (photoDataUrl) {
+        const photoImg = await loadImage(photoDataUrl);
+        if (photoImg) {
+          const cropped = toCoverImage(photoDataUrl, photoImg, photoW, availH, 0.8, SIGN_PX_PER_PT);
+          if (!cropped) continue;
+          doc.setFillColor(245, 245, 245);
+          doc.rect(MARGIN, top, photoW, availH, 'F');
+          doc.addImage(cropped.dataUrl, cropped.format, MARGIN, top, photoW, availH);
+          doc.setDrawColor(200, 200, 200);
+          doc.setLineWidth(0.5);
+          doc.rect(MARGIN, top, photoW, availH);
         }
+      } else {
         doc.setFillColor(245, 245, 245);
         doc.rect(MARGIN, top, photoW, availH, 'F');
-        doc.addImage(photoDataUrl, dx, dy, dw, dh);
+        doc.setFontSize(10);
+        doc.setFont('helvetica', 'normal');
+        doc.setTextColor(180, 180, 180);
+        doc.text('No Photo', MARGIN + photoW / 2, top + availH / 2, { align: 'center' });
         doc.setDrawColor(200, 200, 200);
         doc.setLineWidth(0.5);
         doc.rect(MARGIN, top, photoW, availH);
       }
-    } else {
-      doc.setFillColor(245, 245, 245);
-      doc.rect(MARGIN, top, photoW, availH, 'F');
+
+      let sy = top;
+      doc.setFillColor(...ACCENT);
+      doc.roundedRect(specsX, sy, 44, 18, 3, 3, 'F');
       doc.setFontSize(10);
-      doc.setFont('helvetica', 'normal');
-      doc.setTextColor(180, 180, 180);
-      doc.text('No Photo', MARGIN + photoW / 2, top + availH / 2, { align: 'center' });
-      doc.setDrawColor(200, 200, 200);
-      doc.setLineWidth(0.5);
-      doc.rect(MARGIN, top, photoW, availH);
-    }
-
-    let sy = top;
-
-    doc.setFillColor(...ACCENT);
-    doc.roundedRect(specsX, sy, 44, 18, 3, 3, 'F');
-    doc.setFontSize(10);
-    doc.setFont('helvetica', 'bold');
-    doc.setTextColor(...DARK);
-    doc.text(`#${sign.signNumber || (i + 1)}`, specsX + 22, sy + 12, { align: 'center' });
-    sy += 26;
-
-    doc.setFontSize(16);
-    doc.setFont('helvetica', 'bold');
-    doc.setTextColor(30, 30, 30);
-    doc.text(sign.type || 'Sign Type', specsX, sy);
-    sy += 20;
-
-    doc.setDrawColor(...ACCENT);
-    doc.setLineWidth(1);
-    doc.line(specsX, sy, specsX + specsW, sy);
-    sy += 12;
-
-    const specs = [
-      ['Location', sign.location || '-'],
-      ['Dimensions', sign.width && sign.height ? `${sign.width}" W × ${sign.height}" H` : '-'],
-      ['Material', sign.material || '— (placeholder)'],
-      ['Illumination', sign.illumination || '— (placeholder)'],
-      ['Condition', sign.condition || '— (placeholder)'],
-      ['Mount Type', sign.mountType || '— (placeholder)'],
-    ];
-
-    specs.forEach(([label, value]) => {
-      doc.setFontSize(7);
       doc.setFont('helvetica', 'bold');
-      doc.setTextColor(150, 150, 150);
-      doc.text(label.toUpperCase(), specsX, sy);
-      sy += 9;
-      doc.setFontSize(10);
-      doc.setFont('helvetica', 'normal');
-      doc.setTextColor(40, 40, 40);
-      const wrapped = doc.splitTextToSize(value, specsW);
-      doc.text(wrapped, specsX, sy);
-      sy += wrapped.length * 6 + 10;
-    });
+      doc.setTextColor(...DARK);
+      doc.text(`#${sign.signNumber || (i + 1)}`, specsX + 22, sy + 12, { align: 'center' });
+      sy += 26;
 
-    if (sign.notes) {
-      doc.setFontSize(7);
+      doc.setFontSize(16);
       doc.setFont('helvetica', 'bold');
-      doc.setTextColor(150, 150, 150);
-      doc.text('NOTES', specsX, sy);
-      sy += 9;
-      doc.setFontSize(9);
-      doc.setFont('helvetica', 'normal');
-      doc.setTextColor(80, 80, 80);
-      const noteLines = doc.splitTextToSize(sign.notes, specsW);
-      doc.text(noteLines, specsX, sy);
+      doc.setTextColor(30, 30, 30);
+      doc.text(sign.type || 'Sign Type', specsX, sy);
+      sy += 20;
+
+      doc.setDrawColor(...ACCENT);
+      doc.setLineWidth(1);
+      doc.line(specsX, sy, specsX + specsW, sy);
+      sy += 12;
+
+      const specs = [
+        ['Location', sign.location || '-'],
+        ['Dimensions', sign.width && sign.height ? `${sign.width}" W × ${sign.height}" H` : '-'],
+        ['Material', sign.material || '— (placeholder)'],
+        ['Illumination', sign.illumination || '— (placeholder)'],
+        ['Condition', sign.condition || '— (placeholder)'],
+        ['Mount Type', sign.mountType || '— (placeholder)'],
+      ];
+
+      specs.forEach(([label, value]) => {
+        doc.setFontSize(7);
+        doc.setFont('helvetica', 'bold');
+        doc.setTextColor(150, 150, 150);
+        doc.text(label.toUpperCase(), specsX, sy);
+        sy += 9;
+        doc.setFontSize(10);
+        doc.setFont('helvetica', 'normal');
+        doc.setTextColor(40, 40, 40);
+        const wrapped = doc.splitTextToSize(value, specsW);
+        doc.text(wrapped, specsX, sy);
+        sy += wrapped.length * 6 + 10;
+      });
+
+      if (sign.notes) {
+        doc.setFontSize(7);
+        doc.setFont('helvetica', 'bold');
+        doc.setTextColor(150, 150, 150);
+        doc.text('NOTES', specsX, sy);
+        sy += 9;
+        doc.setFontSize(9);
+        doc.setFont('helvetica', 'normal');
+        doc.setTextColor(80, 80, 80);
+        const noteLines = doc.splitTextToSize(sign.notes, specsW);
+        doc.text(noteLines, specsX, sy);
+      }
     }
   }
 
@@ -690,7 +1083,8 @@ export async function generateBrandBookEditorPDF(data) {
         addFooter(doc, clientName, displayDate);
       }
 
-      const top = template === 'bolchoz' ? MARGIN : HEADER_H + 14;
+      const SITE_LABEL_H = template === 'bolchoz' ? 18 : 0;
+      const top = template === 'bolchoz' ? MARGIN + SITE_LABEL_H : HEADER_H + 14;
       const bottom = template === 'bolchoz' ? H - MARGIN - BOLCHOZ_FOOTER_H : H - 30;
       const availW = W - MARGIN * 2;
       const thumbW = (availW - gapX * (cols - 1)) / cols;
@@ -704,34 +1098,30 @@ export async function generateBrandBookEditorPDF(data) {
         const tx = MARGIN + col * (thumbW + gapX);
         const ty = top + row * (thumbH + gapY);
 
-        doc.setFillColor(245, 245, 245);
-        doc.rect(tx, ty, thumbW, thumbH, 'F');
-
-        const img = await loadImage(dataUrl);
-        if (img) {
-          const aspect = img.naturalWidth / img.naturalHeight;
-          const boxAspect = thumbW / thumbH;
-          let dw, dh, dx, dy;
-          if (aspect > boxAspect) {
-            dw = thumbW; dh = thumbW / aspect; dx = tx; dy = ty + (thumbH - dh) / 2;
-          } else {
-            dh = thumbH; dw = thumbH * aspect; dx = tx + (thumbW - dw) / 2; dy = ty;
-          }
-          doc.addImage(dataUrl, dx, dy, dw, dh);
-        }
+        await drawCover(dataUrl, tx, ty, thumbW, thumbH, { quality: 0.72, pxPerPt: THUMB_PX_PER_PT });
         doc.setDrawColor(200, 200, 200);
         doc.setLineWidth(0.3);
         doc.rect(tx, ty, thumbW, thumbH);
       }
+
+      // Draw header after photos so masks can't cover it
+      if (template === 'bolchoz') {
+        doc.setFontSize(14);
+        doc.setFont('helvetica', 'bold');
+        doc.setTextColor(160, 160, 160);
+        doc.setCharSpace(1.5);
+        doc.text('SITE PHOTOS', MARGIN, MARGIN + 10);
+        doc.setCharSpace(0);
+      }
     }
   }
 
   const safePart = (str) => (str || '').replace(/[^a-zA-Z0-9 ]/g, '').trim().replace(/\s+/g, ' ');
-  const filename = [safePart(projectName), safePart(siteAddress), `R${rev}`].filter(Boolean).join('.');
+  const filename = [safePart(projectName), `R${rev}`].filter(Boolean).join('.');
   doc.save(`${filename || 'BrandBook'}.pdf`);
 }
 
-function drawInventoryTable(doc, signs, x, y, w, h, template) {
+function drawInventoryTable(doc, signs, x, y, w, h, template, startIndex = 0) {
   const colDefs = template === 'bolchoz'
     ? [
         { label: '#', flex: 0.5 },
@@ -749,18 +1139,20 @@ function drawInventoryTable(doc, signs, x, y, w, h, template) {
   const cols = colDefs.map(c => ({ ...c, w: (c.flex / totalFlex) * w }));
 
   const rowH = 18;
-  doc.setFillColor(...DARK);
+  doc.setFillColor(120, 120, 120);
   doc.rect(x, y, w, rowH, 'F');
   doc.setFontSize(7);
   doc.setFont('helvetica', 'bold');
-  doc.setTextColor(...ACCENT);
+  doc.setTextColor(255, 255, 255);
 
   let cx = x;
   cols.forEach(col => { doc.text(col.label, cx + 5, y + 12); cx += col.w; });
 
   let ry = y + rowH;
-  signs.forEach((sign, i) => {
-    if (ry > y + h - rowH) return;
+  let nextIndex = startIndex;
+  for (let i = startIndex; i < signs.length; i++) {
+    if (ry + rowH > y + h) break;
+    const sign = signs[i];
     const rowData = template === 'bolchoz'
       ? [
           sign.signNumber || String(i + 1),
@@ -792,7 +1184,8 @@ function drawInventoryTable(doc, signs, x, y, w, h, template) {
     doc.setLineWidth(0.2);
     doc.line(x, ry + rowH, x + w, ry + rowH);
     ry += rowH;
-  });
+    nextIndex = i + 1;
+  }
 
   doc.setDrawColor(180, 180, 180);
   doc.setLineWidth(0.5);
@@ -804,4 +1197,6 @@ function drawInventoryTable(doc, signs, x, y, w, h, template) {
     doc.setTextColor(160, 160, 160);
     doc.text('No signs added yet', x + w / 2, y + rowH + 16, { align: 'center' });
   }
+
+  return nextIndex;
 }
diff --git a/src/lib/brandbook.js b/src/lib/brandbook.js
deleted file mode 100644
index 54e4eb7..0000000
--- a/src/lib/brandbook.js
+++ /dev/null
@@ -1,546 +0,0 @@
-import jsPDF from 'jspdf';
-
-function loadImage(src) {
-  return new Promise((resolve) => {
-    const img = new Image();
-    img.crossOrigin = 'anonymous';
-    img.onload = () => resolve(img);
-    img.onerror = () => resolve(null);
-    img.src = src;
-  });
-}
-
-function hexToRgb(hex) {
-  const clean = hex.replace('#', '');
-  const bigint = parseInt(clean, 16);
-  return [(bigint >> 16) & 255, (bigint >> 8) & 255, bigint & 255];
-}
-
-function isLight(hex) {
-  const [r, g, b] = hexToRgb(hex);
-  return (r * 299 + g * 587 + b * 114) / 1000 > 160;
-}
-
-function getImgFormat(dataUrl) {
-  if (!dataUrl) return 'PNG';
-  if (/image\/jpe?g/i.test(dataUrl)) return 'JPEG';
-  return 'PNG';
-}
-
-async function toDataUrl(url) {
-  const img = await loadImage(url);
-  if (!img) return null;
-  const canvas = document.createElement('canvas');
-  canvas.width = img.naturalWidth;
-  canvas.height = img.naturalHeight;
-  canvas.getContext('2d').drawImage(img, 0, 0);
-  return canvas.toDataURL('image/png');
-}
-
-function sectionHeader(doc, label, y, pageWidth) {
-  doc.setFillColor(245, 165, 35);
-  doc.rect(14, y, 3, 10, 'F');
-  doc.setFontSize(10);
-  doc.setFont('helvetica', 'bold');
-  doc.setTextColor(30, 30, 30);
-  doc.text(label.toUpperCase(), 21, y + 7);
-  return y + 18;
-}
-
-function addHeader(doc, pageWidth, logo, logoW, logoH, headerH) {
-  doc.setFillColor(20, 20, 20);
-  doc.rect(0, 0, pageWidth, headerH, 'F');
-  if (logo) {
-    doc.addImage(logo, 'PNG', 14, 6, logoW, logoH);
-  } else {
-    doc.setFontSize(10);
-    doc.setFont('helvetica', 'bold');
-    doc.setTextColor(255, 255, 255);
-    doc.text('FOURGE BRANDING', 14, headerH / 2 + 3);
-  }
-  doc.setFontSize(7);
-  doc.setFont('helvetica', 'normal');
-  doc.setTextColor(130, 130, 130);
-  doc.text('hello@fourgebranding.com  ·  www.fourgebranding.com', pageWidth - 14, headerH / 2 + 2, { align: 'right' });
-}
-
-function addPageNumber(doc, pageNum, total, pageHeight, pageWidth) {
-  doc.setFontSize(7);
-  doc.setFont('helvetica', 'normal');
-  doc.setTextColor(180, 180, 180);
-  doc.text(`${pageNum} / ${total}`, pageWidth - 14, pageHeight - 8, { align: 'right' });
-  doc.setDrawColor(230, 230, 230);
-  doc.setLineWidth(0.3);
-  doc.line(14, pageHeight - 13, pageWidth - 14, pageHeight - 13);
-}
-
-function formatDate(dateStr) {
-  if (!dateStr) return '—';
-  const d = new Date(dateStr + 'T00:00:00');
-  return d.toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' });
-}
-
-export async function generateBrandBookPDF(data) {
-  const doc = new jsPDF();
-  const pageWidth = doc.internal.pageSize.width;
-  const pageHeight = doc.internal.pageSize.height;
-
-  // Preload Fourge logo for inner pages
-  const fourgeLogoImg = await loadImage('/fourge-logo.png');
-  const logoW = 36;
-  const logoH = fourgeLogoImg ? (logoW / (fourgeLogoImg.naturalWidth / fourgeLogoImg.naturalHeight)) : 8;
-  const headerH = logoH + 12;
-
-  // Pre-convert client logo URL to data URL
-  let clientLogoDataUrl = null;
-  if (data.clientLogoUrl) {
-    clientLogoDataUrl = await toDataUrl(data.clientLogoUrl);
-  }
-
-  const colors = (data.colors || []).filter(c => c.name || c.hex);
-  const hasFonts = data.primaryFont || data.secondaryFont || data.fontNotes;
-  const hasVoice = data.brandVoice || data.brandAdjectives;
-  const hasLogo = data.logoNotes;
-  const hasDoDont = data.dos || data.donts;
-
-  let totalPages = 1;
-  if (data.brandStory || data.brandValues) totalPages++;
-  if (colors.length > 0) totalPages++;
-  if (hasFonts) totalPages++;
-  if (hasVoice) totalPages++;
-  if (hasLogo || hasDoDont) totalPages++;
-
-  let currentPage = 0;
-
-  // ─── PAGE 1: Cover ───────────────────────────────────────────────────────────
-  currentPage++;
-
-  const M = 12.7;           // 0.5" margin in mm
-  const logoBox = 127;      // 5" × 5" in mm
-  const clientLogoW = 88.9; // 3.5" in mm
-  const clientLogoH = 38.1; // 1.5" in mm
-
-  // White background
-  doc.setFillColor(255, 255, 255);
-  doc.rect(0, 0, pageWidth, pageHeight, 'F');
-
-  // ── Project logo box (top left) ──────────────────────────────────────────────
-  doc.setDrawColor(210, 210, 210);
-  doc.setLineWidth(0.4);
-  doc.rect(M, M, logoBox, logoBox);
-
-  if (data.projectLogoDataUrl) {
-    const pImg = await loadImage(data.projectLogoDataUrl);
-    if (pImg) {
-      const ratio = pImg.naturalWidth / pImg.naturalHeight;
-      let dW, dH;
-      if (ratio >= 1) {
-        // Landscape/square: fill width first
-        dW = logoBox;
-        dH = dW / ratio;
-      } else {
-        // Portrait: fill height first
-        dH = logoBox;
-        dW = dH * ratio;
-      }
-      doc.addImage(data.projectLogoDataUrl, getImgFormat(data.projectLogoDataUrl), M, M, dW, dH);
-    }
-  } else {
-    doc.setFontSize(8);
-    doc.setFont('helvetica', 'normal');
-    doc.setTextColor(210, 210, 210);
-    doc.text('PROJECT LOGO', M + logoBox / 2, M + logoBox / 2, { align: 'center' });
-  }
-
-  // ── Dates (top right) ────────────────────────────────────────────────────────
-  const dateColX = M + logoBox + 10;
-  let ty = M + 4;
-
-  doc.setFontSize(7);
-  doc.setFont('helvetica', 'bold');
-  doc.setTextColor(160, 160, 160);
-  doc.setCharSpace(1.2);
-  doc.text('CREATION DATE', dateColX, ty);
-  doc.setCharSpace(0);
-  ty += 6;
-  doc.setFontSize(10);
-  doc.setFont('helvetica', 'normal');
-  doc.setTextColor(30, 30, 30);
-  doc.text(formatDate(data.creationDate), dateColX, ty);
-  ty += 16;
-
-  doc.setFontSize(7);
-  doc.setFont('helvetica', 'bold');
-  doc.setTextColor(160, 160, 160);
-  doc.setCharSpace(1.2);
-  doc.text('REVISION DATE', dateColX, ty);
-  doc.setCharSpace(0);
-  ty += 6;
-  doc.setFontSize(10);
-  doc.setFont('helvetica', 'normal');
-  doc.setTextColor(30, 30, 30);
-  doc.text(formatDate(data.revisionDate), dateColX, ty);
-
-  // ── Separator line ────────────────────────────────────────────────────────────
-  const sepY = M + logoBox + 7;
-  doc.setDrawColor(210, 210, 210);
-  doc.setLineWidth(0.3);
-  doc.line(M, sepY, pageWidth - M, sepY);
-
-  const botY = sepY + 10;
-  const colW = (pageWidth - 2 * M - 10) / 2;
-  const rightColX = M + colW + 10;
-
-  // ── Bottom left: Customer ─────────────────────────────────────────────────────
-  let lY = botY;
-  doc.setFontSize(7);
-  doc.setFont('helvetica', 'bold');
-  doc.setTextColor(160, 160, 160);
-  doc.setCharSpace(1.2);
-  doc.text('CUSTOMER', M, lY);
-  doc.setCharSpace(0);
-  lY += 7;
-  doc.setFontSize(13);
-  doc.setFont('helvetica', 'bold');
-  doc.setTextColor(20, 20, 20);
-  doc.text(data.customerName || '—', M, lY);
-  lY += 8;
-  if (data.streetAddress) {
-    doc.setFontSize(9);
-    doc.setFont('helvetica', 'normal');
-    doc.setTextColor(80, 80, 80);
-    const addrLines = doc.splitTextToSize(data.streetAddress, colW);
-    doc.text(addrLines, M, lY);
-  }
-
-  // ── Bottom right: Signature / Approval ───────────────────────────────────────
-  let rY = botY;
-
-  // Signature of approval
-  doc.setFontSize(7);
-  doc.setFont('helvetica', 'bold');
-  doc.setTextColor(160, 160, 160);
-  doc.setCharSpace(1.2);
-  doc.text('SIGNATURE OF APPROVAL', rightColX, rY);
-  doc.setCharSpace(0);
-  rY += 12;
-  doc.setDrawColor(180, 180, 180);
-  doc.setLineWidth(0.3);
-  doc.line(rightColX, rY, pageWidth - M, rY);
-  rY += 14;
-
-  // Approved date
-  doc.setFontSize(7);
-  doc.setFont('helvetica', 'bold');
-  doc.setTextColor(160, 160, 160);
-  doc.setCharSpace(1.2);
-  doc.text('APPROVED DATE', rightColX, rY);
-  doc.setCharSpace(0);
-  rY += 6;
-  doc.setFontSize(10);
-  doc.setFont('helvetica', 'normal');
-  doc.setTextColor(30, 30, 30);
-  doc.text(formatDate(data.approvedDate), rightColX, rY);
-  rY += 14;
-
-  // Notes
-  doc.setFontSize(7);
-  doc.setFont('helvetica', 'bold');
-  doc.setTextColor(160, 160, 160);
-  doc.setCharSpace(1.2);
-  doc.text('NOTES', rightColX, rY);
-  doc.setCharSpace(0);
-  rY += 6;
-  if (data.approvalNotes) {
-    doc.setFontSize(9);
-    doc.setFont('helvetica', 'normal');
-    doc.setTextColor(60, 60, 60);
-    const noteLines = doc.splitTextToSize(data.approvalNotes, colW);
-    doc.text(noteLines, rightColX, rY);
-  }
-
-  // ── Client logo + contact (right-bottom aligned) ──────────────────────────────
-  // Contact text (right-aligned), bottom of page
-  const contactLineH = 5.5;
-  const hasContact = data.clientContactName || data.clientContactEmail || data.clientContactPhone;
-  const contactLines = [data.clientContactName, data.clientContactEmail, data.clientContactPhone].filter(Boolean);
-  const contactBlockH = contactLines.length * contactLineH;
-  const contactStartY = pageHeight - M - contactBlockH;
-
-  if (contactLines.length > 0) {
-    doc.setFontSize(9);
-    doc.setFont('helvetica', 'normal');
-    doc.setTextColor(60, 60, 60);
-    let cy = contactStartY + 4;
-    if (data.clientContactName) {
-      doc.setFont('helvetica', 'bold');
-      doc.text(data.clientContactName, pageWidth - M, cy, { align: 'right' });
-      cy += contactLineH;
-    }
-    doc.setFont('helvetica', 'normal');
-    if (data.clientContactEmail) { doc.text(data.clientContactEmail, pageWidth - M, cy, { align: 'right' }); cy += contactLineH; }
-    if (data.clientContactPhone) { doc.text(data.clientContactPhone, pageWidth - M, cy, { align: 'right' }); }
-  }
-
-  // Client logo box: 3.5" × 1.5", right-bottom, above contact text
-  const logoBoxGap = hasContact ? contactBlockH + 5 : 4;
-  const clientLogoBoxBottom = pageHeight - M - (hasContact ? contactBlockH + 6 : 2);
-  const clientLogoBoxTop = clientLogoBoxBottom - clientLogoH;
-  const clientLogoBoxLeft = pageWidth - M - clientLogoW;
-
-  doc.setDrawColor(210, 210, 210);
-  doc.setLineWidth(0.3);
-  doc.rect(clientLogoBoxLeft, clientLogoBoxTop, clientLogoW, clientLogoH);
-
-  if (clientLogoDataUrl) {
-    const clImg = await loadImage(clientLogoDataUrl);
-    if (clImg) {
-      const ratio = clImg.naturalWidth / clImg.naturalHeight;
-      // Scale to contain within box
-      let dW = clientLogoW, dH = clientLogoH;
-      if (ratio > clientLogoW / clientLogoH) {
-        dW = clientLogoW;
-        dH = dW / ratio;
-      } else {
-        dH = clientLogoH;
-        dW = dH * ratio;
-      }
-      // Center in box
-      const ox = clientLogoBoxLeft + (clientLogoW - dW) / 2;
-      const oy = clientLogoBoxTop + (clientLogoH - dH) / 2;
-      doc.addImage(clientLogoDataUrl, 'PNG', ox, oy, dW, dH);
-    }
-  } else if (!hasContact) {
-    doc.setFontSize(8);
-    doc.setFont('helvetica', 'normal');
-    doc.setTextColor(210, 210, 210);
-    doc.text('CLIENT LOGO', clientLogoBoxLeft + clientLogoW / 2, clientLogoBoxTop + clientLogoH / 2, { align: 'center' });
-  }
-
-  // ─── PAGE 2: Brand Story + Values ────────────────────────────────────────────
-  if (data.brandStory || data.brandValues) {
-    currentPage++;
-    doc.addPage();
-    addHeader(doc, pageWidth, fourgeLogoImg, logoW, logoH, headerH);
-    let y = headerH + 16;
-
-    if (data.brandStory) {
-      y = sectionHeader(doc, 'Brand Story', y, pageWidth);
-      doc.setFontSize(10);
-      doc.setFont('helvetica', 'normal');
-      doc.setTextColor(60, 60, 60);
-      const lines = doc.splitTextToSize(data.brandStory, pageWidth - 28);
-      doc.text(lines, 14, y);
-      y += lines.length * 6 + 16;
-    }
-
-    if (data.brandValues) {
-      y = sectionHeader(doc, 'Brand Values', y, pageWidth);
-      const values = data.brandValues.split('\n').map(v => v.trim()).filter(Boolean);
-      values.forEach(val => {
-        doc.setFillColor(245, 165, 35);
-        doc.circle(17, y - 1, 1.2, 'F');
-        doc.setFontSize(10);
-        doc.setFont('helvetica', 'normal');
-        doc.setTextColor(50, 50, 50);
-        doc.text(val, 22, y);
-        y += 8;
-      });
-    }
-
-    addPageNumber(doc, currentPage, totalPages, pageHeight, pageWidth);
-  }
-
-  // ─── PAGE 3: Color Palette ────────────────────────────────────────────────────
-  if (colors.length > 0) {
-    currentPage++;
-    doc.addPage();
-    addHeader(doc, pageWidth, fourgeLogoImg, logoW, logoH, headerH);
-    let y = headerH + 16;
-    y = sectionHeader(doc, 'Color Palette', y, pageWidth);
-
-    const swatchW = 52;
-    const swatchH = 40;
-    const cols = 3;
-    const gapX = (pageWidth - 28 - swatchW * cols) / (cols - 1);
-
-    colors.forEach((color, i) => {
-      const col = i % cols;
-      const row = Math.floor(i / cols);
-      const x = 14 + col * (swatchW + gapX);
-      const sy = y + row * (swatchH + 22);
-
-      const rgb = hexToRgb(color.hex || '#cccccc');
-      doc.setFillColor(...rgb);
-      doc.roundedRect(x, sy, swatchW, swatchH, 3, 3, 'F');
-
-      doc.setFontSize(7);
-      doc.setFont('helvetica', 'bold');
-      doc.setTextColor(...(isLight(color.hex || '#cccccc') ? [60, 60, 60] : [220, 220, 220]));
-      doc.text((color.hex || '').toUpperCase(), x + swatchW / 2, sy + swatchH - 5, { align: 'center' });
-
-      doc.setFontSize(9);
-      doc.setFont('helvetica', 'bold');
-      doc.setTextColor(40, 40, 40);
-      doc.text(color.name || 'Unnamed', x + swatchW / 2, sy + swatchH + 8, { align: 'center' });
-    });
-
-    addPageNumber(doc, currentPage, totalPages, pageHeight, pageWidth);
-  }
-
-  // ─── PAGE 4: Typography ───────────────────────────────────────────────────────
-  if (hasFonts) {
-    currentPage++;
-    doc.addPage();
-    addHeader(doc, pageWidth, fourgeLogoImg, logoW, logoH, headerH);
-    let y = headerH + 16;
-    y = sectionHeader(doc, 'Typography', y, pageWidth);
-
-    const fontItems = [
-      data.primaryFont && ['Primary Font', data.primaryFont],
-      data.secondaryFont && ['Secondary Font', data.secondaryFont],
-    ].filter(Boolean);
-
-    fontItems.forEach(([label, fontName]) => {
-      doc.setFillColor(248, 248, 248);
-      doc.setDrawColor(220, 220, 220);
-      doc.setLineWidth(0.3);
-      doc.roundedRect(14, y, pageWidth - 28, 28, 3, 3, 'FD');
-
-      doc.setFontSize(7);
-      doc.setFont('helvetica', 'bold');
-      doc.setTextColor(150, 150, 150);
-      doc.text(label.toUpperCase(), 20, y + 8);
-
-      doc.setFontSize(16);
-      doc.setFont('helvetica', 'bold');
-      doc.setTextColor(30, 30, 30);
-      doc.text(fontName, 20, y + 21);
-
-      y += 36;
-    });
-
-    if (data.fontNotes) {
-      y += 4;
-      y = sectionHeader(doc, 'Usage Notes', y, pageWidth);
-      doc.setFontSize(10);
-      doc.setFont('helvetica', 'normal');
-      doc.setTextColor(60, 60, 60);
-      const lines = doc.splitTextToSize(data.fontNotes, pageWidth - 28);
-      doc.text(lines, 14, y);
-    }
-
-    addPageNumber(doc, currentPage, totalPages, pageHeight, pageWidth);
-  }
-
-  // ─── PAGE 5: Brand Voice ──────────────────────────────────────────────────────
-  if (hasVoice) {
-    currentPage++;
-    doc.addPage();
-    addHeader(doc, pageWidth, fourgeLogoImg, logoW, logoH, headerH);
-    let y = headerH + 16;
-    y = sectionHeader(doc, 'Brand Voice & Tone', y, pageWidth);
-
-    if (data.brandVoice) {
-      doc.setFontSize(10);
-      doc.setFont('helvetica', 'normal');
-      doc.setTextColor(60, 60, 60);
-      const lines = doc.splitTextToSize(data.brandVoice, pageWidth - 28);
-      doc.text(lines, 14, y);
-      y += lines.length * 6 + 16;
-    }
-
-    if (data.brandAdjectives) {
-      y = sectionHeader(doc, 'Brand Personality', y, pageWidth);
-      const tags = data.brandAdjectives.split(',').map(t => t.trim()).filter(Boolean);
-      let tx = 14;
-      tags.forEach(tag => {
-        const tw = doc.getTextWidth(tag) + 10;
-        if (tx + tw > pageWidth - 14) { tx = 14; y += 14; }
-        doc.setFillColor(255, 243, 215);
-        doc.setDrawColor(245, 165, 35);
-        doc.setLineWidth(0.3);
-        doc.roundedRect(tx, y - 6, tw, 10, 2, 2, 'FD');
-        doc.setFontSize(8);
-        doc.setFont('helvetica', 'bold');
-        doc.setTextColor(150, 100, 20);
-        doc.text(tag, tx + 5, y + 1);
-        tx += tw + 5;
-      });
-    }
-
-    addPageNumber(doc, currentPage, totalPages, pageHeight, pageWidth);
-  }
-
-  // ─── PAGE 6: Logo + Do's & Don'ts ────────────────────────────────────────────
-  if (hasLogo || hasDoDont) {
-    currentPage++;
-    doc.addPage();
-    addHeader(doc, pageWidth, fourgeLogoImg, logoW, logoH, headerH);
-    let y = headerH + 16;
-
-    if (hasLogo) {
-      y = sectionHeader(doc, 'Logo Usage Guidelines', y, pageWidth);
-      doc.setFontSize(10);
-      doc.setFont('helvetica', 'normal');
-      doc.setTextColor(60, 60, 60);
-      const lines = doc.splitTextToSize(data.logoNotes, pageWidth - 28);
-      doc.text(lines, 14, y);
-      y += lines.length * 6 + 16;
-    }
-
-    if (hasDoDont) {
-      const colW = (pageWidth - 28 - 8) / 2;
-
-      if (data.dos) {
-        doc.setFillColor(22, 163, 74);
-        doc.rect(14, y, 3, 10, 'F');
-        doc.setFontSize(10);
-        doc.setFont('helvetica', 'bold');
-        doc.setTextColor(22, 163, 74);
-        doc.text("DO'S", 21, y + 7);
-
-        const dosLines = data.dos.split('\n').map(l => l.trim()).filter(Boolean);
-        let dy = y + 18;
-        dosLines.forEach(line => {
-          doc.setFillColor(22, 163, 74);
-          doc.circle(16, dy - 1, 1.2, 'F');
-          doc.setFontSize(9);
-          doc.setFont('helvetica', 'normal');
-          doc.setTextColor(50, 50, 50);
-          const wrapped = doc.splitTextToSize(line, colW - 10);
-          doc.text(wrapped, 21, dy);
-          dy += wrapped.length * 5.5 + 3;
-        });
-      }
-
-      if (data.donts) {
-        const startX = 14 + colW + 8;
-        doc.setFillColor(220, 38, 38);
-        doc.rect(startX, y, 3, 10, 'F');
-        doc.setFontSize(10);
-        doc.setFont('helvetica', 'bold');
-        doc.setTextColor(220, 38, 38);
-        doc.text("DON'TS", startX + 7, y + 7);
-
-        const dontsLines = data.donts.split('\n').map(l => l.trim()).filter(Boolean);
-        let dy = y + 18;
-        dontsLines.forEach(line => {
-          doc.setFillColor(220, 38, 38);
-          doc.circle(startX + 2, dy - 1, 1.2, 'F');
-          doc.setFontSize(9);
-          doc.setFont('helvetica', 'normal');
-          doc.setTextColor(50, 50, 50);
-          const wrapped = doc.splitTextToSize(line, colW - 10);
-          doc.text(wrapped, startX + 7, dy);
-          dy += wrapped.length * 5.5 + 3;
-        });
-      }
-    }
-
-    addPageNumber(doc, currentPage, totalPages, pageHeight, pageWidth);
-  }
-
-  const safeName = (data.brandName || 'brand-book').toLowerCase().replace(/[^a-z0-9]+/g, '-');
-  doc.save(`${safeName}-brand-book.pdf`);
-}
diff --git a/src/lib/dates.js b/src/lib/dates.js
new file mode 100644
index 0000000..e52e784
--- /dev/null
+++ b/src/lib/dates.js
@@ -0,0 +1,49 @@
+export function formatDateEST(value) {
+  if (!value) return '—';
+  return new Date(value).toLocaleDateString('en-US', {
+    timeZone: 'America/New_York',
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric',
+  });
+}
+
+export function parseDateOnly(value) {
+  if (!value) return null;
+  const [year, month, day] = String(value).split('-').map(Number);
+  if (!year || !month || !day) return null;
+  return new Date(year, month - 1, day);
+}
+
+export function getTodayDateOnlyEST() {
+  const parts = new Intl.DateTimeFormat('en-CA', {
+    timeZone: 'America/New_York',
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+  }).formatToParts(new Date());
+  const year = parts.find((part) => part.type === 'year')?.value;
+  const month = parts.find((part) => part.type === 'month')?.value;
+  const day = parts.find((part) => part.type === 'day')?.value;
+  return year && month && day ? `${year}-${month}-${day}` : '';
+}
+
+export function addDaysToDateOnly(value, days) {
+  const date = parseDateOnly(value);
+  if (!date) return '';
+  date.setDate(date.getDate() + days);
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, '0');
+  const day = String(date.getDate()).padStart(2, '0');
+  return `${year}-${month}-${day}`;
+}
+
+export function formatDateOnly(value, fallback = '—') {
+  const date = parseDateOnly(value);
+  if (!date) return fallback;
+  return date.toLocaleDateString('en-US', {
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric',
+  });
+}
diff --git a/src/lib/deleteHelpers.js b/src/lib/deleteHelpers.js
index b3092d5..f639fba 100644
--- a/src/lib/deleteHelpers.js
+++ b/src/lib/deleteHelpers.js
@@ -1,5 +1,45 @@
 import { supabase } from './supabase';
 
+async function removeFromBucket(bucket, paths) {
+  const uniquePaths = [...new Set((paths || []).filter(Boolean))];
+  if (!uniquePaths.length) return;
+
+  const { error } = await supabase.storage.from(bucket).remove(uniquePaths);
+  if (error) {
+    throw new Error(`Failed to delete files from ${bucket}: ${error.message}`);
+  }
+}
+
+export function getBrandBookStoragePaths(book) {
+  if (!book) return [];
+
+  const signPaths = (book.signs || []).flatMap(sign => [
+    sign.photoPath,
+    sign.existingPhotoPath,
+    sign.recommendationPhotoPath,
+    sign.signDetailPhotoPath,
+  ]);
+
+  return [
+    book.site_map_path,
+    book.inventory_map_path,
+    book.project_logo_path,
+    ...(book.survey_photo_paths || []),
+    ...signPaths,
+  ].filter(Boolean);
+}
+
+export function getCompanyLogoStoragePath(publicUrl) {
+  if (!publicUrl || typeof publicUrl !== 'string') return null;
+
+  const marker = '/storage/v1/object/public/company-logos/';
+  const idx = publicUrl.indexOf(marker);
+  if (idx === -1) return null;
+
+  const path = publicUrl.slice(idx + marker.length);
+  return path ? decodeURIComponent(path) : null;
+}
+
 /**
  * Deletes all storage files (submissions + deliveries buckets) for the given task IDs.
  * Call this before deleting tasks/projects/companies from the DB.
@@ -24,7 +64,7 @@ export async function cleanupTaskStorage(taskIds) {
       .in('submission_id', subIds);
 
     const subPaths = (subFiles || []).map(f => f.storage_path).filter(Boolean);
-    if (subPaths.length) await supabase.storage.from('submissions').remove(subPaths);
+    await removeFromBucket('submissions', subPaths);
 
     // Get deliveries (linked via submission_id, not task_id)
     const { data: deliveries } = await supabase
@@ -41,7 +81,51 @@ export async function cleanupTaskStorage(taskIds) {
         .in('delivery_id', delIds);
 
       const delPaths = (delFiles || []).map(f => f.storage_path).filter(Boolean);
-      if (delPaths.length) await supabase.storage.from('deliveries').remove(delPaths);
+      await removeFromBucket('deliveries', delPaths);
     }
   }
 }
+
+/**
+ * Deletes brand book storage assets from the `brand-books` bucket.
+ * Call this before deleting the brand_books row from the DB.
+ */
+export async function cleanupBrandBookStorage(book) {
+  if (!book) return;
+  const paths = getBrandBookStoragePaths(book);
+  await removeFromBucket('brand-books', paths);
+}
+
+/**
+ * Deletes a whole company footprint, including brand books and logo storage.
+ * Client/external profiles are preserved by the DB and simply become unassigned.
+ */
+export async function deleteCompanyData(companyId) {
+  if (!companyId) return;
+
+  const [{ data: company }, { data: projects }, { data: brandBooks }] = await Promise.all([
+    supabase.from('companies').select('id, client_logo_url').eq('id', companyId).single(),
+    supabase.from('projects').select('id').eq('company_id', companyId),
+    supabase.from('brand_books').select('*').eq('client_id', companyId),
+  ]);
+
+  const projectIds = (projects || []).map(project => project.id);
+  if (projectIds.length) {
+    const { data: tasks } = await supabase.from('tasks').select('id').in('project_id', projectIds);
+    const taskIds = (tasks || []).map(task => task.id);
+    await cleanupTaskStorage(taskIds);
+  }
+
+  for (const book of brandBooks || []) {
+    await cleanupBrandBookStorage(book);
+  }
+
+  if (brandBooks?.length) {
+    await supabase.from('brand_books').delete().eq('client_id', companyId);
+  }
+
+  const logoPath = getCompanyLogoStoragePath(company?.client_logo_url);
+  await removeFromBucket('company-logos', logoPath ? [logoPath] : []);
+
+  await supabase.from('companies').delete().eq('id', companyId);
+}
diff --git a/src/lib/email.js b/src/lib/email.js
old mode 100755
new mode 100644
index d77c86d..555d16d
--- a/src/lib/email.js
+++ b/src/lib/email.js
@@ -1,16 +1,88 @@
 import { supabase } from './supabase';
 
-export async function sendEmail(type, to, data) {
-  const { data: result, error } = await supabase.functions.invoke('send-email', {
-    body: { type, to, data },
-  });
-  if (error) {
-    console.error('Email invoke error:', error);
-    throw new Error(`Email failed: ${error.message || JSON.stringify(error)}`);
-  }
-  if (result?.error) {
-    console.error('Email send error:', result.error);
-    throw new Error(`Email failed: ${JSON.stringify(result.error)}`);
-  }
-  return result;
+const supabaseUrl = import.meta.env.VITE_SUPABASE_URL;
+const supabaseAnonKey = import.meta.env.VITE_SUPABASE_ANON_KEY;
+
+async function getAccessToken() {
+  const { data: sessionData } = await supabase.auth.getSession();
+  if (sessionData?.session?.access_token) return sessionData.session.access_token;
+
+  const { data: refreshed, error: refreshError } = await supabase.auth.refreshSession();
+  if (refreshError) throw new Error(refreshError.message || 'Failed to refresh session');
+  if (!refreshed?.session?.access_token) throw new Error('No active session');
+  return refreshed.session.access_token;
+}
+
+export function blobToEmailAttachment(blob, filename) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onloadend = () => {
+      const result = String(reader.result || '');
+      resolve({
+        filename,
+        content: result.includes(',') ? result.split(',')[1] : result,
+      });
+    };
+    reader.onerror = () => reject(new Error(`Failed to encode ${filename}`));
+    reader.readAsDataURL(blob);
+  });
+}
+
+async function postEmailRequest(type, to, data, token, attachments = []) {
+  const response = await fetch(`${supabaseUrl}/functions/v1/send-email`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      apikey: supabaseAnonKey,
+      Authorization: `Bearer ${token}`,
+    },
+    body: JSON.stringify({ type, to, data, attachments }),
+  });
+
+  const raw = await response.text();
+  let body = null;
+
+  if (raw) {
+    try {
+      body = JSON.parse(raw);
+    } catch {
+      body = { raw };
+    }
+  }
+
+  if (!response.ok) {
+    const detail = body?.error || body?.message || raw || `HTTP ${response.status}`;
+    throw new Error(String(detail));
+  }
+
+  if (body?.error) {
+    throw new Error(typeof body.error === 'string' ? body.error : JSON.stringify(body.error));
+  }
+
+  return body;
+}
+
+export async function sendEmail(type, to, data, attachments = []) {
+  const token = await getAccessToken();
+
+  try {
+    return await postEmailRequest(type, to, data, token, attachments);
+  } catch (error) {
+    if (!/invalid jwt/i.test(error?.message || '')) {
+      console.error('Email request failed:', error);
+      throw new Error(`Email failed: ${error?.message || 'Unknown email error'}`);
+    }
+
+    const { data: refreshed, error: refreshError } = await supabase.auth.refreshSession();
+    if (refreshError || !refreshed?.session?.access_token) {
+      throw new Error(`Email failed: ${refreshError?.message || error.message}`);
+    }
+
+    try {
+      return await postEmailRequest(type, to, data, refreshed.session.access_token, attachments);
+    } catch (retryError) {
+      console.error('Email retry failed:', retryError);
+      throw new Error(`Email failed: ${retryError?.message || 'Unknown email error'}`);
+    }
+  }
 }
diff --git a/src/lib/invoice.js b/src/lib/invoice.js
index 65458a3..636f3f8 100644
--- a/src/lib/invoice.js
+++ b/src/lib/invoice.js
@@ -1,5 +1,5 @@
 import jsPDF from 'jspdf';
-import autoTable from 'jspdf-autotable';
+import JSZip from 'jszip';
 
 function loadImage(src) {
   return new Promise((resolve) => {
@@ -11,170 +11,1054 @@ function loadImage(src) {
   });
 }
 
-export async function generateInvoicePDF(invoice, company, items) {
-  const client = company; // alias for PDF layout vars below
-  const doc = new jsPDF();
-  const pageWidth = doc.internal.pageSize.width;
+function formatCurrency(value) {
+  return `$${Number(value || 0).toFixed(2)}`;
+}
 
-  // Load logo first to know its height
+function formatDate(value) {
+  return new Date(value).toLocaleDateString('en-US', {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric',
+  });
+}
+
+function wrapText(ctx, text, maxWidth) {
+  const words = String(text || '').split(/\s+/).filter(Boolean);
+  if (!words.length) return [''];
+
+  const lines = [];
+  let currentLine = words[0];
+
+  for (let i = 1; i < words.length; i += 1) {
+    const nextLine = `${currentLine} ${words[i]}`;
+    if (ctx.measureText(nextLine).width <= maxWidth) {
+      currentLine = nextLine;
+    } else {
+      lines.push(currentLine);
+      currentLine = words[i];
+    }
+  }
+
+  lines.push(currentLine);
+  return lines;
+}
+
+function drawTextBlock(ctx, text, x, y, maxWidth, lineHeight) {
+  const paragraphs = String(text || '').split('\n');
+  let currentY = y;
+
+  paragraphs.forEach((paragraph, index) => {
+    const lines = wrapText(ctx, paragraph, maxWidth);
+    lines.forEach((line) => {
+      ctx.fillText(line, x, currentY);
+      currentY += lineHeight;
+    });
+    if (index < paragraphs.length - 1) currentY += lineHeight * 0.35;
+  });
+
+  return currentY;
+}
+
+function drawRightText(ctx, text, x, y) {
+  const width = ctx.measureText(text).width;
+  ctx.fillText(text, x - width, y);
+}
+
+function drawRule(ctx, x1, x2, y, color = '#dcdcdc', width = 1) {
+  ctx.save();
+  ctx.strokeStyle = color;
+  ctx.lineWidth = width;
+  ctx.beginPath();
+  ctx.moveTo(x1, y);
+  ctx.lineTo(x2, y);
+  ctx.stroke();
+  ctx.beginPath();
+  ctx.restore();
+}
+
+function canvasToBlob(canvas, type, quality) {
+  return new Promise((resolve, reject) => {
+    canvas.toBlob((blob) => {
+      if (blob) resolve(blob);
+      else reject(new Error('Failed to render invoice image.'));
+    }, type, quality);
+  });
+}
+
+export async function generateInvoicePDF(invoice, company, items, options = {}) {
+  const client = company || {};
   const logo = await loadImage('/fourge-logo.png');
-  const logoW = 40;
-  const logoH = logo ? (logoW / (logo.naturalWidth / logo.naturalHeight)) : 8;
-  const headerH = logoH + 12; // tight padding around logo
 
-  // Black header band — sized to logo
+  const pageWidth = 612;
+  const pageHeight = 792;
+  const margin = 42;
+  const rightEdge = pageWidth - margin;
+  const logoW = 96;
+  const logoH = logo ? (logoW / (logo.naturalWidth / logo.naturalHeight)) : 18;
+  const headerH = Math.max(48, logoH + 18);
+  const rowTopPadding = 9;
+  const rowBottomPadding = 9;
+  const rowLineHeight = 11;
+  const tableX = margin;
+  const tableWidth = pageWidth - margin * 2;
+  const descriptionWidth = tableWidth - 72 - 104 - 96;
+  const qtyWidth = 72;
+  const unitPriceWidth = 104;
+  const measureCanvas = document.createElement('canvas');
+  const measureCtx = measureCanvas.getContext('2d');
+  if (!measureCtx) throw new Error('Canvas rendering is unavailable in this browser.');
+
+  const details = [
+    ['Date', formatDate(invoice.invoice_date)],
+    ['Due', formatDate(invoice.due_date)],
+    ['Terms', 'Net 30'],
+  ];
+  const statusColors = { draft: [150, 150, 150], sent: [37, 99, 235], paid: [22, 163, 74] };
+  const sc = statusColors[invoice.status] || [150, 150, 150];
+  const payUrl = `https://portal.fourgebranding.com/pay/${encodeURIComponent(invoice.invoice_number)}`;
+  const footerY = pageHeight - 28;
+  const footerText = 'Payment due within 30 days of invoice date. Thank you for your business!';
+  const doc = new jsPDF({ unit: 'pt', format: 'letter', compress: true, putOnlyUsedFonts: true, precision: 2 });
+
+  function getFirstPageTableStart() {
+    const afterHeader = headerH + 22;
+    const detailBottom = afterHeader + 12 + (details.length * 12);
+    const billBottom = client.email ? afterHeader + 42 : afterHeader + 32;
+    return Math.max(detailBottom, billBottom) + 16;
+  }
+
+  function getContinuationTableStart() {
+    return headerH + 18;
+  }
+
+  function estimateNotesHeight() {
+    if (!invoice.notes) return 0;
+    measureCtx.font = '9px Helvetica, Arial, sans-serif';
+    const paragraphs = String(invoice.notes).split('\n');
+    let lines = 0;
+    paragraphs.forEach((paragraph, index) => {
+      lines += wrapText(measureCtx, paragraph, pageWidth / 2 - margin).length;
+      if (index < paragraphs.length - 1) lines += 0.35;
+    });
+    return 26 + 12 + (lines * 12);
+  }
+
+  const notesHeight = estimateNotesHeight();
+  const lastPageReserve = 10 + 24 + (invoice.notes ? notesHeight : 0) + 32;
+  const footerReserve = (pageHeight - footerY) + 16;
+
+  function rowDataForItem(item) {
+    measureCtx.font = '9px Helvetica, Arial, sans-serif';
+    const descriptionLines = wrapText(measureCtx, item.description || '', descriptionWidth - 20);
+    const rowHeight = rowTopPadding + rowBottomPadding + (descriptionLines.length * rowLineHeight);
+    return { item, descriptionLines, rowHeight };
+  }
+
+  const measuredRows = items.map(rowDataForItem);
+  const firstPageItemsLimit = pageHeight - footerReserve - lastPageReserve - (getFirstPageTableStart() + 8 + 22);
+  const continuationItemsLimit = pageHeight - footerReserve - lastPageReserve - (getContinuationTableStart() + 8 + 22);
+  const fullContinuationItemsLimit = pageHeight - footerReserve - (getContinuationTableStart() + 8 + 22);
+  const pages = [];
+  let pageRows = [];
+  let currentHeight = 0;
+  let currentLimit = firstPageItemsLimit;
+
+  measuredRows.forEach((row) => {
+    const needsBreak = pageRows.length > 0 && currentHeight + row.rowHeight > currentLimit;
+    if (needsBreak) {
+      pages.push(pageRows);
+      pageRows = [];
+      currentHeight = 0;
+      currentLimit = fullContinuationItemsLimit;
+    }
+    pageRows.push(row);
+    currentHeight += row.rowHeight;
+  });
+
+  if (!pages.length && currentHeight <= firstPageItemsLimit) {
+    pages.push(pageRows);
+  } else if (pageRows.length) {
+    while (currentHeight > continuationItemsLimit && pageRows.length > 1) {
+      const moved = pageRows.pop();
+      currentHeight -= moved.rowHeight;
+      pages.push(pageRows);
+      pageRows = [moved];
+      currentHeight = moved.rowHeight;
+    }
+    pages.push(pageRows);
+  }
+
+  if (!pages.length) pages.push([]);
+
+  async function renderPage(rows, pageIndex, pageCount) {
+    const isFirstPage = pageIndex === 0;
+    const isLastPage = pageIndex === pageCount - 1;
+    const canvas = document.createElement('canvas');
+    canvas.width = pageWidth * 3;
+    canvas.height = pageHeight * 3;
+
+    const ctx = canvas.getContext('2d');
+    if (!ctx) throw new Error('Canvas rendering is unavailable in this browser.');
+
+    ctx.scale(3, 3);
+    ctx.fillStyle = '#ffffff';
+    ctx.fillRect(0, 0, pageWidth, pageHeight);
+
+    ctx.fillStyle = '#141414';
+    ctx.fillRect(0, 0, pageWidth, headerH);
+
+    if (logo) {
+      ctx.drawImage(logo, margin, 12, logoW, logoH);
+    } else {
+      ctx.font = '700 13px Helvetica, Arial, sans-serif';
+      ctx.fillStyle = '#ffffff';
+      ctx.fillText('FOURGE BRANDING', margin, headerH / 2 + 4);
+    }
+
+    ctx.font = '9px Helvetica, Arial, sans-serif';
+    ctx.fillStyle = '#a0a0a0';
+    drawRightText(
+      ctx,
+    '1855.368.7434  |  hello@fourgebranding.com  |  www.fourgebranding.com',
+      rightEdge,
+      headerH / 2 + 2,
+    );
+
+    let tableStart;
+    if (isFirstPage) {
+      const afterHeader = headerH + 30;
+      ctx.font = '700 21px Helvetica, Arial, sans-serif';
+      ctx.fillStyle = '#1e1e1e';
+      ctx.fillText('INVOICE', margin, afterHeader);
+
+      ctx.font = '10px Helvetica, Arial, sans-serif';
+      ctx.fillStyle = '#6b7280';
+      drawRightText(ctx, invoice.invoice_number, rightEdge, afterHeader - 3);
+
+      let dy = afterHeader + 12;
+      details.forEach(([label, val]) => {
+        ctx.font = '8px Helvetica, Arial, sans-serif';
+        ctx.fillStyle = '#9ca3af';
+        ctx.fillText(label, rightEdge - 120, dy);
+        ctx.font = '700 8px Helvetica, Arial, sans-serif';
+        ctx.fillStyle = '#1f2937';
+        drawRightText(ctx, val, rightEdge, dy);
+        dy += 12;
+      });
+
+      ctx.font = '700 8px Helvetica, Arial, sans-serif';
+      ctx.fillStyle = `rgb(${sc.join(',')})`;
+      drawRightText(ctx, String(invoice.status || '').toUpperCase(), rightEdge, dy);
+
+      const billStartY = afterHeader + 14;
+      ctx.font = '700 7px Helvetica, Arial, sans-serif';
+      ctx.fillStyle = '#9ca3af';
+      ctx.fillText('BILL TO', margin, billStartY);
+
+      ctx.font = '700 10px Helvetica, Arial, sans-serif';
+      ctx.fillStyle = '#1e1e1e';
+      ctx.fillText(invoice.bill_to || client.name || 'Client', margin, billStartY + 14);
+
+      let billY = billStartY + 28;
+      if (client.email) {
+        ctx.font = '9px Helvetica, Arial, sans-serif';
+        ctx.fillStyle = '#4b5563';
+        ctx.fillText(client.email, margin, billY);
+      } else {
+        billY -= 10;
+      }
+
+      tableStart = Math.max(billY, dy) + 16;
+    } else {
+      const continuationY = headerH + 18;
+      ctx.font = '700 14px Helvetica, Arial, sans-serif';
+      ctx.fillStyle = '#1e1e1e';
+      ctx.fillText(`INVOICE ${invoice.invoice_number}`, margin, continuationY);
+      ctx.font = '8px Helvetica, Arial, sans-serif';
+      ctx.fillStyle = '#6b7280';
+      drawRightText(ctx, `Page ${pageIndex + 1} of ${pageCount}`, rightEdge, continuationY);
+      tableStart = continuationY + 12;
+    }
+
+    ctx.strokeStyle = '#dcdcdc';
+    ctx.lineWidth = 1;
+    ctx.beginPath();
+    ctx.moveTo(margin, tableStart);
+    ctx.lineTo(rightEdge, tableStart);
+    ctx.stroke();
+
+    const headerY = tableStart + 8;
+    ctx.fillStyle = '#1e1e1e';
+    ctx.fillRect(tableX, headerY, tableWidth, 22);
+    ctx.font = '700 8px Helvetica, Arial, sans-serif';
+    ctx.fillStyle = '#ffffff';
+    ctx.fillText('Description', tableX + 10, headerY + 14);
+    drawRightText(ctx, 'Qty', tableX + descriptionWidth + qtyWidth - 10, headerY + 14);
+    drawRightText(ctx, 'Unit Price', tableX + descriptionWidth + qtyWidth + unitPriceWidth - 10, headerY + 14);
+    drawRightText(ctx, 'Total', tableX + tableWidth - 10, headerY + 14);
+
+    let currentY = headerY + 22;
+    rows.forEach((row, index) => {
+      const absoluteIndex = pages.slice(0, pageIndex).reduce((sum, page) => sum + page.length, 0) + index;
+      ctx.fillStyle = absoluteIndex % 2 === 0 ? '#ffffff' : '#f9f9f9';
+      ctx.fillRect(tableX, currentY, tableWidth, row.rowHeight);
+
+      ctx.strokeStyle = '#e5e7eb';
+      ctx.lineWidth = 1;
+      ctx.beginPath();
+      ctx.moveTo(tableX, currentY + row.rowHeight);
+      ctx.lineTo(tableX + tableWidth, currentY + row.rowHeight);
+      ctx.stroke();
+
+      ctx.font = '9px Helvetica, Arial, sans-serif';
+      ctx.fillStyle = '#1f2937';
+      let textY = currentY + rowTopPadding + 7;
+      row.descriptionLines.forEach((line) => {
+        ctx.fillText(line, tableX + 10, textY);
+        textY += rowLineHeight;
+      });
+
+      drawRightText(ctx, String(Number(row.item.quantity || 0)), tableX + descriptionWidth + qtyWidth - 10, currentY + 16);
+      drawRightText(ctx, formatCurrency(row.item.unit_price), tableX + descriptionWidth + qtyWidth + unitPriceWidth - 10, currentY + 16);
+      ctx.font = '700 9px Helvetica, Arial, sans-serif';
+      drawRightText(
+        ctx,
+        formatCurrency(Number(row.item.quantity || 0) * Number(row.item.unit_price || 0)),
+        tableX + tableWidth - 10,
+        currentY + 16,
+      );
+
+      currentY += row.rowHeight;
+    });
+
+    let payLinkRects = null;
+    if (isLastPage) {
+      ctx.fillStyle = '#141414';
+      ctx.fillRect(rightEdge - 128, currentY + 10, 128, 24);
+      ctx.font = '700 8px Helvetica, Arial, sans-serif';
+      ctx.fillStyle = '#ffffff';
+      ctx.fillText('TOTAL', rightEdge - 116, currentY + 25);
+      ctx.font = '700 10px Helvetica, Arial, sans-serif';
+      drawRightText(ctx, formatCurrency(invoice.total), rightEdge - 10, currentY + 25);
+
+      if (invoice.notes) {
+        const notesY = currentY + 26;
+        ctx.font = '700 7px Helvetica, Arial, sans-serif';
+        ctx.fillStyle = '#9ca3af';
+        ctx.fillText('NOTES', margin, notesY);
+        ctx.font = '9px Helvetica, Arial, sans-serif';
+        ctx.fillStyle = '#4b5563';
+        drawTextBlock(ctx, invoice.notes, margin, notesY + 12, pageWidth / 2 - margin, 12);
+      }
+
+      const payY = invoice.notes ? currentY + 58 : currentY + 26;
+      ctx.fillStyle = '#141414';
+      ctx.beginPath();
+      ctx.roundRect(margin, payY, 108, 24, 4);
+      ctx.fill();
+      ctx.font = '700 8px Helvetica, Arial, sans-serif';
+      ctx.fillStyle = '#ffffff';
+      const buttonText = 'PAY NOW ONLINE';
+      drawRightText(ctx, buttonText, margin + 54 + (ctx.measureText(buttonText).width / 2), payY + 15);
+
+      ctx.font = '8px Helvetica, Arial, sans-serif';
+      ctx.fillStyle = '#6b7280';
+      ctx.fillText(payUrl, margin, payY + 38);
+      payLinkRects = {
+        button: { x: margin, y: payY, width: 108, height: 24 },
+        url: { x: margin, y: payY + 24, width: Math.min(320, pageWidth - margin * 2), height: 18 },
+      };
+    }
+
+    ctx.strokeStyle = '#dcdcdc';
+    ctx.lineWidth = 1;
+    ctx.beginPath();
+    ctx.moveTo(margin, footerY - 12);
+    ctx.lineTo(rightEdge, footerY - 12);
+    ctx.stroke();
+    ctx.font = '7px Helvetica, Arial, sans-serif';
+    ctx.fillStyle = '#a0a0a0';
+    drawRightText(ctx, footerText, pageWidth / 2 + (ctx.measureText(footerText).width / 2), footerY);
+
+    const pngBlob = await canvasToBlob(canvas, 'image/png');
+    const pngUrl = await new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.onloadend = () => resolve(reader.result);
+      reader.onerror = () => reject(new Error('Failed to encode invoice image.'));
+      reader.readAsDataURL(pngBlob);
+    });
+
+    return { pngUrl, payLinkRects };
+  }
+
+  for (let i = 0; i < pages.length; i += 1) {
+    const { pngUrl, payLinkRects } = await renderPage(pages[i], i, pages.length);
+    if (i > 0) doc.addPage('letter', 'portrait');
+    doc.addImage(pngUrl, 'PNG', 0, 0, pageWidth, pageHeight, undefined, 'FAST');
+    if (payLinkRects) {
+      doc.link(payLinkRects.button.x, payLinkRects.button.y, payLinkRects.button.width, payLinkRects.button.height, { url: payUrl });
+      doc.link(payLinkRects.url.x, payLinkRects.url.y, payLinkRects.url.width, payLinkRects.url.height, { url: payUrl });
+    }
+  }
+
+  const filename = `${invoice.invoice_number}.pdf`;
+  if (options.save === false || options.output === 'blob') return doc.output('blob');
+  doc.save(filename);
+  return null;
+}
+
+// ─── Receipt PDF ─────────────────────────────────────────────────────────────
+
+export async function generateReceiptPDF(invoice, company, items, options = {}) {
+  const client = company || {};
+  const logo = await loadImage('/fourge-logo.png');
+
+  const pageWidth = 612;
+  const pageHeight = 792;
+  const margin = 42;
+  const rightEdge = pageWidth - margin;
+  const logoW = 96;
+  const logoH = logo ? (logoW / (logo.naturalWidth / logo.naturalHeight)) : 18;
+  const headerH = Math.max(48, logoH + 18);
+
+  const paidDate = invoice.paid_at
+    ? new Date(invoice.paid_at).toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' })
+    : formatDate(invoice.invoice_date);
+
+  const fee = Number(invoice.stripe_fee || 0);
+  const net = Number(invoice.total) - fee;
+  const billTo = invoice.bill_to || client.name || 'Client';
+  const paymentMethod = fee > 0 ? 'Card · via Stripe' : 'Marked as paid';
+
+  const canvas = document.createElement('canvas');
+  canvas.width = pageWidth * 3;
+  canvas.height = pageHeight * 3;
+  const ctx = canvas.getContext('2d');
+  if (!ctx) throw new Error('Canvas rendering unavailable.');
+  ctx.scale(3, 3);
+
+  // Background
+  ctx.fillStyle = '#ffffff';
+  ctx.fillRect(0, 0, pageWidth, pageHeight);
+
+  // Header bar
+  ctx.fillStyle = '#141414';
+  ctx.fillRect(0, 0, pageWidth, headerH);
+  if (logo) ctx.drawImage(logo, margin, 12, logoW, logoH);
+  ctx.font = '9px Helvetica, Arial, sans-serif';
+  ctx.fillStyle = '#a0a0a0';
+  drawRightText(ctx, '1855.368.7434  |  hello@fourgebranding.com  |  www.fourgebranding.com', rightEdge, headerH / 2 + 2);
+
+  // Title row
+  const titleY = headerH + 32;
+  ctx.font = '700 22px Helvetica, Arial, sans-serif';
+  ctx.fillStyle = '#1e1e1e';
+  ctx.fillText('RECEIPT', margin, titleY);
+
+  // PAID badge
+  const badgeX = rightEdge - 58;
+  const badgeY = titleY - 18;
+  ctx.fillStyle = '#16a34a';
+  ctx.beginPath();
+  ctx.roundRect(badgeX, badgeY, 58, 22, 4);
+  ctx.fill();
+  ctx.beginPath();
+  ctx.font = '700 10px Helvetica, Arial, sans-serif';
+  ctx.fillStyle = '#ffffff';
+  ctx.fillText('✓  PAID', badgeX + 9, badgeY + 14);
+
+  // Meta info block
+  const metaY = titleY + 14;
+  const metaItems = [
+    ['Receipt For', invoice.invoice_number],
+    ['Payment Date', paidDate],
+    ['Payment Method', paymentMethod],
+  ];
+  metaItems.forEach(([label, val], i) => {
+    const x = margin + i * 170;
+    ctx.font = '700 7px Helvetica, Arial, sans-serif';
+    ctx.fillStyle = '#9ca3af';
+    ctx.fillText(label.toUpperCase(), x, metaY);
+    ctx.font = '8px Helvetica, Arial, sans-serif';
+    ctx.fillStyle = '#1f2937';
+    ctx.fillText(val, x, metaY + 12);
+  });
+
+  // Bill To
+  const billY = metaY + 32;
+  ctx.font = '700 7px Helvetica, Arial, sans-serif';
+  ctx.fillStyle = '#9ca3af';
+  ctx.fillText('RECEIVED FROM', margin, billY);
+  ctx.font = '700 11px Helvetica, Arial, sans-serif';
+  ctx.fillStyle = '#1e1e1e';
+  ctx.fillText(billTo, margin, billY + 14);
+
+  // Divider
+  const divY = billY + 26;
+  drawRule(ctx, margin, rightEdge, divY);
+
+  // Items table header
+  const tableW = pageWidth - margin * 2;
+  const thY = divY + 8;
+  ctx.fillStyle = '#1e1e1e';
+  ctx.fillRect(margin, thY, tableW, 20);
+  ctx.font = '700 7.5px Helvetica, Arial, sans-serif';
+  ctx.fillStyle = '#ffffff';
+  ctx.fillText('Description', margin + 8, thY + 13);
+  drawRightText(ctx, 'Qty', margin + tableW * 0.72, thY + 13);
+  drawRightText(ctx, 'Unit Price', margin + tableW * 0.87, thY + 13);
+  drawRightText(ctx, 'Amount', rightEdge - 4, thY + 13);
+
+  // Items rows
+  let ry = thY + 20;
+  items.forEach((item, idx) => {
+    const rowH = 20;
+    ctx.fillStyle = idx % 2 === 0 ? '#ffffff' : '#f9f9f9';
+    ctx.fillRect(margin, ry, tableW, rowH);
+    ctx.strokeStyle = '#e5e7eb';
+    ctx.lineWidth = 1;
+    ctx.beginPath();
+    ctx.moveTo(margin, ry + rowH);
+    ctx.lineTo(rightEdge, ry + rowH);
+    ctx.stroke();
+    ctx.font = '8.5px Helvetica, Arial, sans-serif';
+    ctx.fillStyle = '#1f2937';
+    ctx.fillText(String(item.description || '').substring(0, 48), margin + 8, ry + 13);
+    drawRightText(ctx, String(Number(item.quantity)), margin + tableW * 0.72, ry + 13);
+    drawRightText(ctx, formatCurrency(item.unit_price), margin + tableW * 0.87, ry + 13);
+    ctx.font = '700 8.5px Helvetica, Arial, sans-serif';
+    drawRightText(ctx, formatCurrency(Number(item.quantity) * Number(item.unit_price)), rightEdge - 4, ry + 13);
+    ry += rowH;
+  });
+
+  // Totals block
+  let ty = ry + 10;
+  ctx.fillStyle = '#141414';
+  ctx.fillRect(rightEdge - 128, ty, 128, 24);
+  ctx.font = '700 8px Helvetica, Arial, sans-serif';
+  ctx.fillStyle = '#ffffff';
+  ctx.fillText('TOTAL PAID', rightEdge - 116, ty + 15);
+  ctx.font = '700 10px Helvetica, Arial, sans-serif';
+  drawRightText(ctx, formatCurrency(invoice.total), rightEdge - 10, ty + 15);
+  ty += 36;
+
+  if (fee > 0) {
+    ctx.font = '8px Helvetica, Arial, sans-serif';
+    ctx.fillStyle = '#6b7280';
+    ctx.fillText('Stripe Processing Fee', rightEdge - 180, ty);
+    drawRightText(ctx, `-${formatCurrency(fee)}`, rightEdge - 4, ty);
+    ty += 14;
+
+    ctx.font = '700 8px Helvetica, Arial, sans-serif';
+    ctx.fillStyle = '#1f2937';
+    ctx.fillText('Net Received', rightEdge - 180, ty);
+    drawRightText(ctx, formatCurrency(net), rightEdge - 4, ty);
+    ty += 16;
+  }
+
+  // Thank-you note
+  ty += 8;
+  ctx.font = '8px Helvetica, Arial, sans-serif';
+  ctx.fillStyle = '#6b7280';
+  ctx.fillText('Thank you for your business! This receipt confirms payment in full.', margin, ty);
+
+  // Footer
+  const footerY = pageHeight - 28;
+  ctx.font = '7px Helvetica, Arial, sans-serif';
+  ctx.fillStyle = '#a0a0a0';
+  const footerText = `Fourge Branding  ·  Receipt for ${invoice.invoice_number}  ·  ${paidDate}`;
+  ctx.fillText(footerText, margin, footerY);
+
+  // Render to PDF
+  const pngBlob = await canvasToBlob(canvas, 'image/png');
+  const pngUrl = await new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onloadend = () => resolve(reader.result);
+    reader.onerror = () => reject(new Error('Failed to encode receipt image.'));
+    reader.readAsDataURL(pngBlob);
+  });
+
+  const doc = new jsPDF({ unit: 'pt', format: 'letter', compress: true, putOnlyUsedFonts: true, precision: 2 });
+  doc.addImage(pngUrl, 'PNG', 0, 0, pageWidth, pageHeight, undefined, 'FAST');
+  const filename = `${invoice.invoice_number}-receipt.pdf`;
+  if (options.save === false || options.output === 'blob') return doc.output('blob');
+  doc.save(filename);
+  return null;
+}
+
+export async function generateSubcontractorPOPDF(po, options = {}) {
+  const logo = await loadImage('/fourge-logo.png');
+  const doc = new jsPDF({ unit: 'pt', format: 'letter', compress: true, putOnlyUsedFonts: true, precision: 2 });
+  const pageWidth = 612;
+  const margin = 42;
+  const rightEdge = pageWidth - margin;
+  const headerH = 62;
+  const poNumber = po.po_number || 'PO';
+  const statusLabel = String(po.status || 'draft').replace(/_/g, ' ').toUpperCase();
+  const projectName = po.project?.name || 'Subcontractor Work';
+  const companyName = po.project?.company?.name || 'Fourge Branding';
+  const subcontractorName = po.profile?.name || 'External Team Member';
+  const subcontractorEmail = po.profile?.email || '';
+
   doc.setFillColor(20, 20, 20);
   doc.rect(0, 0, pageWidth, headerH, 'F');
 
-  // Logo
   if (logo) {
-    doc.addImage(logo, 'PNG', 14, 6, logoW, logoH);
+    const logoW = 96;
+    const logoH = logoW / (logo.naturalWidth / logo.naturalHeight);
+    doc.addImage(logo, 'PNG', margin, 16, logoW, logoH);
   } else {
-    doc.setFontSize(13);
     doc.setFont('helvetica', 'bold');
+    doc.setFontSize(13);
     doc.setTextColor(255, 255, 255);
-    doc.text('FOURGE BRANDING', 14, headerH / 2 + 4);
+    doc.text('FOURGE BRANDING', margin, 36);
   }
 
-  // Contact info in header (right, small)
-  doc.setFontSize(7);
   doc.setFont('helvetica', 'normal');
-  doc.setTextColor(160, 160, 160);
-  doc.text('1.855.FOURGE4  ·  1855.368.7434  |  hello@fourgebranding.com  |  www.fourgebranding.com', pageWidth - 14, headerH / 2 + 2, { align: 'right' });
-
-  // INVOICE title + number (below header, left-right)
-  const afterHeader = headerH + 10;
-  doc.setFontSize(20);
-  doc.setFont('helvetica', 'bold');
-  doc.setTextColor(30, 30, 30);
-  doc.text('INVOICE', 14, afterHeader + 8);
-
   doc.setFontSize(9);
-  doc.setFont('helvetica', 'normal');
-  doc.setTextColor(100, 100, 100);
-  doc.text(invoice.invoice_number, pageWidth - 14, afterHeader + 4, { align: 'right' });
+  doc.setTextColor(170, 170, 170);
+  doc.text('1855.368.7434  |  hello@fourgebranding.com  |  www.fourgebranding.com', rightEdge, 35, { align: 'right' });
 
-  // Invoice details (right column)
-  const details = [
-    ['Date', new Date(invoice.invoice_date).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' })],
-    ['Due', new Date(invoice.due_date).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' })],
-    ['Terms', 'Net 30'],
-  ];
-  let dy = afterHeader + 10;
-  details.forEach(([label, val]) => {
-    doc.setFontSize(8);
-    doc.setFont('helvetica', 'normal');
-    doc.setTextColor(130, 130, 130);
-    doc.text(label, pageWidth - 60, dy);
-    doc.setFont('helvetica', 'bold');
-    doc.setTextColor(40, 40, 40);
-    doc.text(val, pageWidth - 14, dy, { align: 'right' });
-    dy += 6;
-  });
-
-  // Status
-  const statusColors = { draft: [150, 150, 150], sent: [37, 99, 235], paid: [22, 163, 74] };
-  const sc = statusColors[invoice.status] || [150, 150, 150];
-  doc.setFontSize(8);
+  let y = 102;
+  doc.setTextColor(30, 30, 30);
   doc.setFont('helvetica', 'bold');
-  doc.setTextColor(...sc);
-  doc.text(invoice.status.toUpperCase(), pageWidth - 14, dy, { align: 'right' });
-
-  // Bill To (left column, same zone)
-  const billStartY = afterHeader + 18;
-  doc.setFontSize(7);
-  doc.setFont('helvetica', 'bold');
-  doc.setTextColor(150, 150, 150);
-  doc.text('BILL TO', 14, billStartY);
+  doc.setFontSize(22);
+  doc.text('PURCHASE ORDER', margin, y);
 
   doc.setFontSize(10);
+  doc.setTextColor(90, 90, 90);
+  doc.text(poNumber, rightEdge, y - 4, { align: 'right' });
+  y += 24;
+
   doc.setFont('helvetica', 'bold');
+  doc.setFontSize(9);
+  doc.setTextColor(120, 120, 120);
+  doc.text('SUBCONTRACTOR', margin, y);
+  doc.text('DETAILS', 330, y);
+  y += 16;
+
+  doc.setFont('helvetica', 'bold');
+  doc.setFontSize(12);
   doc.setTextColor(30, 30, 30);
-  doc.text(client.name, 14, billStartY + 6);
+  doc.text(subcontractorName, margin, y);
+  doc.text(projectName, 330, y);
+  y += 14;
 
   doc.setFont('helvetica', 'normal');
-  doc.setFontSize(9);
-  doc.setTextColor(80, 80, 80);
-  let billY = billStartY + 6;
-  if (client.email) { billY += 5; doc.text(client.email, 14, billY); }
+  doc.setFontSize(10);
+  doc.setTextColor(95, 95, 95);
+  if (subcontractorEmail) doc.text(subcontractorEmail, margin, y);
+  doc.text(companyName, 330, y);
+  y += 30;
 
-  // Divider
-  const tableStart = Math.max(billY, dy) + 8;
-  doc.setDrawColor(220, 220, 220);
-  doc.setLineWidth(0.4);
-  doc.line(14, tableStart, pageWidth - 14, tableStart);
+  const rows = [
+    ['PO Date', po.date ? formatDate(po.date) : ''],
+    ['Due Date', po.due_date ? formatDate(po.due_date) : 'Not set'],
+    ['Terms', po.terms || 'Net 15'],
+    ['Status', statusLabel],
+    ['Amount', formatCurrency(po.amount)],
+  ];
 
-  // Line items table — tight
-  autoTable(doc, {
-    startY: tableStart + 2,
-    head: [['Description', 'Qty', 'Unit Price', 'Total']],
-    body: items.map(item => [
-      item.description,
-      Number(item.quantity).toString(),
-      `$${Number(item.unit_price).toFixed(2)}`,
-      `$${(Number(item.quantity) * Number(item.unit_price)).toFixed(2)}`,
-    ]),
-    headStyles: {
-      fillColor: [30, 30, 30],
-      textColor: [255, 255, 255],
-      fontStyle: 'bold',
-      fontSize: 8,
-      cellPadding: 4,
-    },
-    bodyStyles: {
-      fontSize: 9,
-      textColor: [40, 40, 40],
-      cellPadding: 4,
-      fillColor: [255, 255, 255],
-    },
-    alternateRowStyles: { fillColor: [249, 249, 249] },
-    columnStyles: {
-      0: { cellWidth: 'auto' },
-      1: { cellWidth: 14, halign: 'center' },
-      2: { cellWidth: 30, halign: 'right' },
-      3: { cellWidth: 30, halign: 'right', fontStyle: 'bold' },
-    },
-    margin: { left: 14, right: 14 },
-    theme: 'striped',
-    tableLineColor: [225, 225, 225],
-    tableLineWidth: 0.2,
-  });
-
-  const finalY = doc.lastAutoTable.finalY;
-
-  // Total box
-  doc.setFillColor(20, 20, 20);
-  doc.rect(pageWidth - 70, finalY + 4, 56, 11, 'F');
-  doc.setFontSize(8);
-  doc.setFont('helvetica', 'bold');
-  doc.setTextColor(255, 255, 255);
-  doc.text('TOTAL', pageWidth - 66, finalY + 11);
-  doc.setFontSize(9);
-  doc.text(`$${Number(invoice.total).toFixed(2)}`, pageWidth - 16, finalY + 11, { align: 'right' });
-
-  // Notes
-  if (invoice.notes) {
-    const notesY = finalY + 22;
-    doc.setFontSize(7);
-    doc.setFont('helvetica', 'bold');
-    doc.setTextColor(150, 150, 150);
-    doc.text('NOTES', 14, notesY);
+  const tableX = margin;
+  const tableW = pageWidth - margin * 2;
+  rows.forEach(([label, value], index) => {
+    const rowY = y + index * 28;
+    if (index % 2 === 0) {
+      doc.setFillColor(248, 248, 248);
+      doc.rect(tableX, rowY - 16, tableW, 28, 'F');
+    }
     doc.setFont('helvetica', 'normal');
-    doc.setFontSize(9);
-    doc.setTextColor(80, 80, 80);
-    const split = doc.splitTextToSize(invoice.notes, pageWidth / 2);
-    doc.text(split, 14, notesY + 5);
+    doc.setFontSize(10);
+    doc.setTextColor(105, 105, 105);
+    doc.text(label, tableX + 12, rowY);
+    doc.setFont('helvetica', 'bold');
+    doc.setTextColor(35, 35, 35);
+    doc.text(String(value), tableX + tableW - 12, rowY, { align: 'right' });
+  });
+  y += rows.length * 28 + 22;
+
+  if (po.items?.length > 0) {
+    doc.setFont('helvetica', 'bold');
+    doc.setFontSize(11);
+    doc.setTextColor(30, 30, 30);
+    doc.text('Line Items', margin, y);
+    y += 16;
+
+    const sortedItems = po.items
+      .slice()
+      .sort((a, b) => Number(a.sort_order || 0) - Number(b.sort_order || 0));
+
+    sortedItems.forEach((item, index) => {
+      const rowTop = y + index * 28;
+      if (index % 2 === 0) {
+        doc.setFillColor(248, 248, 248);
+        doc.rect(tableX, rowTop - 14, tableW, 28, 'F');
+      }
+      doc.setFont('helvetica', 'normal');
+      doc.setFontSize(10);
+      doc.setTextColor(45, 45, 45);
+      doc.text(item.description || item.task?.title || 'Work Item', tableX + 12, rowTop);
+      doc.setFont('helvetica', 'bold');
+      doc.text(formatCurrency(item.amount), tableX + tableW - 12, rowTop, { align: 'right' });
+    });
+
+    y += sortedItems.length * 28 + 22;
   }
 
-  // Footer
-  const footerY = doc.internal.pageSize.height - 14;
-  doc.setDrawColor(220, 220, 220);
-  doc.setLineWidth(0.4);
-  doc.line(14, footerY - 4, pageWidth - 14, footerY - 4);
-  doc.setFontSize(7);
-  doc.setFont('helvetica', 'normal');
-  doc.setTextColor(160, 160, 160);
-  doc.text('Payment due within 30 days of invoice date. Thank you for your business!', pageWidth / 2, footerY, { align: 'center' });
+  doc.setFont('helvetica', 'bold');
+  doc.setFontSize(11);
+  doc.setTextColor(30, 30, 30);
+  doc.text(po.items?.length > 0 ? 'Summary' : 'Scope of Work', margin, y);
+  y += 16;
 
-  doc.save(`${invoice.invoice_number}.pdf`);
+  doc.setFont('helvetica', 'normal');
+  doc.setFontSize(10);
+  doc.setTextColor(70, 70, 70);
+  const scopeLines = doc.splitTextToSize(po.description || '', pageWidth - margin * 2);
+  doc.text(scopeLines, margin, y);
+  y += scopeLines.length * 13 + 18;
+
+  if (po.notes) {
+    doc.setFont('helvetica', 'bold');
+    doc.setTextColor(30, 30, 30);
+    doc.text('Notes', margin, y);
+    y += 16;
+    doc.setFont('helvetica', 'normal');
+    doc.setTextColor(70, 70, 70);
+    const noteLines = doc.splitTextToSize(po.notes, pageWidth - margin * 2);
+    doc.text(noteLines, margin, y);
+  }
+
+  doc.setDrawColor(220, 220, 220);
+  doc.line(margin, 704, rightEdge, 704);
+  doc.setFont('helvetica', 'normal');
+  doc.setFontSize(9);
+  doc.setTextColor(120, 120, 120);
+  doc.text(
+    'This purchase order authorizes the subcontractor work described above. Payment is subject to Fourge Branding approval and completion of assigned work.',
+    margin,
+    724,
+    { maxWidth: pageWidth - margin * 2 },
+  );
+
+  const filename = `${poNumber}.pdf`;
+  if (options.save === false || options.output === 'blob') return doc.output('blob');
+  doc.save(filename);
+  return null;
+}
+
+// ─── CPA Year-End Export ────────────────────────────────────────────────────
+
+function escapeCsv(value) {
+  const str = String(value == null ? '' : value);
+  if (str.includes(',') || str.includes('"') || str.includes('\n')) {
+    return `"${str.replace(/"/g, '""')}"`;
+  }
+  return str;
+}
+
+function downloadBlob(blob, filename) {
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = filename;
+  a.click();
+  URL.revokeObjectURL(url);
+}
+
+export async function exportCPAPackage(invoices, itemsByInvoice, expenses = [], year) {
+  // ── CSV ──────────────────────────────────────────────────────────────────
+  const invoiceCsvHeaders = [
+    'Invoice #', 'Invoice Date', 'Due Date', 'Bill To',
+    'Description', 'Total (USD)', 'Stripe Fee (USD)', 'Net Received (USD)',
+  ];
+
+  const invoiceCsvRows = invoices.map(inv => {
+    const items = itemsByInvoice[inv.id] || [];
+    const description = items.map(it => it.description).join('; ') || '';
+    const fee = Number(inv.stripe_fee || 0);
+    const net = Number(inv.total) - fee;
+    return [
+      inv.invoice_number,
+      formatDate(inv.invoice_date),
+      formatDate(inv.due_date),
+      inv.bill_to || '',
+      description,
+      Number(inv.total).toFixed(2),
+      fee.toFixed(2),
+      net.toFixed(2),
+    ].map(escapeCsv).join(',');
+  });
+
+  const expenseCsvHeaders = ['Expense Date', 'Category', 'Description', 'Amount (USD)', 'Notes'];
+  const expenseCsvRows = expenses.map(exp => [
+    formatDate(exp.date),
+    exp.category || '',
+    exp.description || '',
+    Number(exp.amount || 0).toFixed(2),
+    exp.notes || '',
+  ].map(escapeCsv).join(','));
+
+  const combinedCsvContent = [
+    'Paid Invoices',
+    invoiceCsvHeaders.map(escapeCsv).join(','),
+    ...invoiceCsvRows,
+    '',
+    'Expenses',
+    expenseCsvHeaders.map(escapeCsv).join(','),
+    ...expenseCsvRows,
+  ].join('\n');
+
+  // ── PDF ──────────────────────────────────────────────────────────────────
+  const logo = await loadImage('/fourge-logo.png');
+  const pageWidth = 612;
+  const pageHeight = 792;
+  const margin = 42;
+  const rightEdge = pageWidth - margin;
+  const logoW = 96;
+  const logoH = logo ? (logoW / (logo.naturalWidth / logo.naturalHeight)) : 18;
+  const headerH = Math.max(48, logoH + 18);
+
+  const totalBilled = invoices.reduce((s, i) => s + Number(i.total), 0);
+  const totalFees = invoices.reduce((s, i) => s + Number(i.stripe_fee || 0), 0);
+  const totalNet = totalBilled - totalFees;
+  const totalExpenses = expenses.reduce((s, e) => s + Number(e.amount || 0), 0);
+
+  const rowH = 20;
+  const tableTop = headerH + 60;
+  const colW = { num: 78, date: 66, billTo: 120, desc: 96, total: 60, fee: 52, net: 56 }; // sum = 528 = pageWidth - margin*2
+  const expenseColW = { date: 78, category: 92, desc: 190, amount: 64, notes: 104 };
+
+  // pagination
+  const footerY = pageHeight - 28;
+  const usableH = footerY - 16 - tableTop - 22; // minus header row
+  const rowsPerFirstPage = Math.floor(usableH / rowH);
+  const rowsPerPage = Math.floor(usableH / rowH);
+
+  const invoicePages = [];
+  let remainingInvoices = [...invoices];
+  invoicePages.push(remainingInvoices.splice(0, rowsPerFirstPage));
+  while (remainingInvoices.length) invoicePages.push(remainingInvoices.splice(0, rowsPerPage));
+  if (!invoicePages.length) invoicePages.push([]);
+
+  const expensePages = [];
+  let remainingExpenses = [...expenses];
+  while (remainingExpenses.length) expensePages.push(remainingExpenses.splice(0, rowsPerPage));
+  if (!expensePages.length && expenses.length > 0) expensePages.push([]);
+
+  const totalPages = invoicePages.length + expensePages.length + 1;
+
+  const doc = new jsPDF({ unit: 'pt', format: 'letter', compress: true, putOnlyUsedFonts: true, precision: 2 });
+
+  async function renderPage(pageIndex, title, subtitle, headerLabels, drawRows) {
+    const canvas = document.createElement('canvas');
+    canvas.width = pageWidth * 3;
+    canvas.height = pageHeight * 3;
+    const ctx = canvas.getContext('2d');
+    ctx.scale(3, 3);
+
+    // background
+    ctx.fillStyle = '#ffffff';
+    ctx.fillRect(0, 0, pageWidth, pageHeight);
+
+    // header bar
+    ctx.fillStyle = '#141414';
+    ctx.fillRect(0, 0, pageWidth, headerH);
+    if (logo) {
+      ctx.drawImage(logo, margin, 12, logoW, logoH);
+    }
+    ctx.font = '9px Helvetica, Arial, sans-serif';
+    ctx.fillStyle = '#a0a0a0';
+    drawRightText(ctx, '1855.368.7434  |  hello@fourgebranding.com  |  www.fourgebranding.com', rightEdge, headerH / 2 + 2);
+
+    if (pageIndex === 0) {
+      ctx.font = '700 18px Helvetica, Arial, sans-serif';
+      ctx.fillStyle = '#1e1e1e';
+      ctx.fillText(title, margin, headerH + 28);
+      ctx.font = '9px Helvetica, Arial, sans-serif';
+      ctx.fillStyle = '#6b7280';
+      ctx.fillText(subtitle, margin, headerH + 44);
+    } else {
+      ctx.font = '700 11px Helvetica, Arial, sans-serif';
+      ctx.fillStyle = '#1e1e1e';
+      ctx.fillText(title, margin, headerH + 20);
+      ctx.font = '8px Helvetica, Arial, sans-serif';
+      ctx.fillStyle = '#6b7280';
+      drawRightText(ctx, `Page ${pageIndex + 1} of ${totalPages}`, rightEdge, headerH + 20);
+    }
+
+    const th = tableTop;
+    ctx.fillStyle = '#141414';
+    ctx.fillRect(margin, th, pageWidth - margin * 2, 20);
+    ctx.font = '700 7.5px Helvetica, Arial, sans-serif';
+    ctx.fillStyle = '#ffffff';
+    headerLabels(ctx, th);
+    drawRows(ctx, th + 20);
+
+    ctx.strokeStyle = '#dcdcdc';
+    ctx.lineWidth = 1;
+    ctx.beginPath();
+    ctx.moveTo(margin, footerY - 12);
+    ctx.lineTo(rightEdge, footerY - 12);
+    ctx.stroke();
+    ctx.font = '7px Helvetica, Arial, sans-serif';
+    ctx.fillStyle = '#a0a0a0';
+    const footerText = `Fourge Branding  ·  ${year} Year-End Summary  ·  Confidential`;
+    drawRightText(ctx, footerText, margin + (ctx.measureText(footerText).width) + margin, footerY);
+
+    const pngBlob = await canvasToBlob(canvas, 'image/png');
+    const pngUrl = await new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.onloadend = () => resolve(reader.result);
+      reader.onerror = () => reject(new Error('Failed to encode page image.'));
+      reader.readAsDataURL(pngBlob);
+    });
+
+    if (pageIndex > 0) doc.addPage('letter', 'portrait');
+    doc.addImage(pngUrl, 'PNG', 0, 0, pageWidth, pageHeight, undefined, 'FAST');
+  }
+
+  let pageIndex = 0;
+  for (const pageInvoices of invoicePages) {
+    await renderPage(
+      pageIndex,
+      `${year} Invoice & Expense Summary`,
+      'Prepared for CPA — combined invoice and expense summary',
+      (ctx, th) => {
+        let cx = margin + 6;
+        ctx.fillText('Invoice #', cx, th + 13); cx += colW.num;
+        ctx.fillText('Date', cx, th + 13); cx += colW.date;
+        ctx.fillText('Bill To', cx, th + 13); cx += colW.billTo;
+        ctx.fillText('Description', cx, th + 13); cx += colW.desc;
+        drawRightText(ctx, 'Total', cx + colW.total - 6, th + 13); cx += colW.total;
+        drawRightText(ctx, 'Fee', cx + colW.fee - 6, th + 13); cx += colW.fee;
+        drawRightText(ctx, 'Net', rightEdge - 8, th + 13);
+      },
+      (ctx, startY) => {
+        let ry = startY;
+        pageInvoices.forEach((inv, idx) => {
+          const items = itemsByInvoice[inv.id] || [];
+          const desc = items.map(it => it.description).join('; ') || '—';
+          const fee = Number(inv.stripe_fee || 0);
+          const net = Number(inv.total) - fee;
+
+          ctx.fillStyle = idx % 2 === 0 ? '#ffffff' : '#f9f9f9';
+          ctx.fillRect(margin, ry, pageWidth - margin * 2, rowH);
+          ctx.strokeStyle = '#e5e7eb';
+          ctx.lineWidth = 0.5;
+          ctx.beginPath();
+          ctx.moveTo(margin, ry + rowH);
+          ctx.lineTo(rightEdge, ry + rowH);
+          ctx.stroke();
+
+          ctx.font = '8px Helvetica, Arial, sans-serif';
+          ctx.fillStyle = '#1f2937';
+          let rx = margin + 6;
+          ctx.fillText(inv.invoice_number, rx, ry + 13); rx += colW.num;
+          ctx.fillText(formatDate(inv.invoice_date), rx, ry + 13); rx += colW.date;
+          ctx.fillText((inv.bill_to || '').substring(0, 22), rx, ry + 13); rx += colW.billTo;
+          ctx.fillText(desc.substring(0, 20), rx, ry + 13); rx += colW.desc;
+          ctx.font = '700 8px Helvetica, Arial, sans-serif';
+          drawRightText(ctx, formatCurrency(inv.total), rx + colW.total - 6, ry + 13); rx += colW.total;
+          ctx.font = '8px Helvetica, Arial, sans-serif';
+          ctx.fillStyle = '#6b7280';
+          drawRightText(ctx, fee > 0 ? formatCurrency(fee) : '—', rx + colW.fee - 6, ry + 13); rx += colW.fee;
+          ctx.font = '700 8px Helvetica, Arial, sans-serif';
+          ctx.fillStyle = '#1f2937';
+          drawRightText(ctx, formatCurrency(net), rx + colW.net - 6, ry + 13);
+          ry += rowH;
+        });
+      }
+    );
+    pageIndex += 1;
+  }
+
+  for (const pageExpenses of expensePages) {
+    await renderPage(
+      pageIndex,
+      `${year} Expense Listing`,
+      'Prepared for CPA — expense detail',
+      (ctx, th) => {
+        let cx = margin + 6;
+        ctx.fillText('Date', cx, th + 13); cx += expenseColW.date;
+        ctx.fillText('Category', cx, th + 13); cx += expenseColW.category;
+        ctx.fillText('Description', cx, th + 13); cx += expenseColW.desc;
+        drawRightText(ctx, 'Amount', cx + expenseColW.amount - 6, th + 13); cx += expenseColW.amount;
+        ctx.fillText('Notes', cx, th + 13);
+      },
+      (ctx, startY) => {
+        let ry = startY;
+        pageExpenses.forEach((exp, idx) => {
+          ctx.fillStyle = idx % 2 === 0 ? '#ffffff' : '#f9f9f9';
+          ctx.fillRect(margin, ry, pageWidth - margin * 2, rowH);
+          ctx.strokeStyle = '#e5e7eb';
+          ctx.lineWidth = 0.5;
+          ctx.beginPath();
+          ctx.moveTo(margin, ry + rowH);
+          ctx.lineTo(rightEdge, ry + rowH);
+          ctx.stroke();
+
+          ctx.font = '8px Helvetica, Arial, sans-serif';
+          ctx.fillStyle = '#1f2937';
+          let rx = margin + 6;
+          ctx.fillText(formatDate(exp.date), rx, ry + 13); rx += expenseColW.date;
+          ctx.fillText((exp.category || '').substring(0, 16), rx, ry + 13); rx += expenseColW.category;
+          ctx.fillText((exp.description || '').substring(0, 34), rx, ry + 13); rx += expenseColW.desc;
+          ctx.font = '700 8px Helvetica, Arial, sans-serif';
+          drawRightText(ctx, formatCurrency(exp.amount), rx + expenseColW.amount - 6, ry + 13); rx += expenseColW.amount;
+          ctx.font = '8px Helvetica, Arial, sans-serif';
+          ctx.fillStyle = '#6b7280';
+          ctx.fillText((exp.notes || '—').substring(0, 18), rx, ry + 13);
+          ry += rowH;
+        });
+      }
+    );
+    pageIndex += 1;
+  }
+
+  await renderPage(
+    pageIndex,
+    `${year} Summary Totals`,
+    'Prepared for CPA — combined invoice and expense summary',
+    (ctx, th) => {
+      ctx.fillText('Summary', margin + 6, th + 13);
+    },
+    (ctx, startY) => {
+      const sy = startY + 12;
+      const summaryX = rightEdge - 220;
+      const rows = [
+        ['Total Billed', formatCurrency(totalBilled), false],
+        ['Total Stripe Fees', `−${formatCurrency(totalFees)}`, false],
+        ['Net Received', formatCurrency(totalNet), true],
+        ['Total Expenses', `−${formatCurrency(totalExpenses)}`, false],
+      ];
+      let sumY = sy + 10;
+      rows.forEach(([label, val, bold]) => {
+        ctx.font = bold ? '700 8px Helvetica, Arial, sans-serif' : '8px Helvetica, Arial, sans-serif';
+        ctx.fillStyle = bold ? '#1e1e1e' : '#6b7280';
+        ctx.fillText(label, summaryX, sumY);
+        ctx.font = bold ? '700 8px Helvetica, Arial, sans-serif' : '8px Helvetica, Arial, sans-serif';
+        ctx.fillStyle = bold ? '#1e1e1e' : '#4b5563';
+        drawRightText(ctx, val, rightEdge, sumY);
+        sumY += 16;
+      });
+
+      ctx.font = '8px Helvetica, Arial, sans-serif';
+      ctx.fillStyle = '#6b7280';
+      ctx.fillText(
+        `${invoices.length} paid invoice${invoices.length !== 1 ? 's' : ''} · ${expenses.length} expense${expenses.length !== 1 ? 's' : ''} · ${year} fiscal year`,
+        margin,
+        sy + 10
+      );
+    }
+  );
+
+  const pdfBlob = doc.output('blob');
+  const zip = new JSZip();
+  zip.file(`fourge-${year}-summary.csv`, combinedCsvContent);
+  zip.file(`fourge-${year}-summary.pdf`, pdfBlob);
+
+  const zipBlob = await zip.generateAsync({ type: 'blob' });
+  downloadBlob(zipBlob, `fourge-${year}-cpa-export.zip`);
 }
diff --git a/src/lib/pageCache.js b/src/lib/pageCache.js
new file mode 100644
index 0000000..6e869a3
--- /dev/null
+++ b/src/lib/pageCache.js
@@ -0,0 +1,24 @@
+const PREFIX = 'fourge_page_cache:';
+
+export function readPageCache(key, maxAgeMs = 60_000) {
+  try {
+    const raw = sessionStorage.getItem(PREFIX + key);
+    if (!raw) return null;
+    const parsed = JSON.parse(raw);
+    if (!parsed?.savedAt || Date.now() - parsed.savedAt > maxAgeMs) return null;
+    return parsed.data ?? null;
+  } catch {
+    return null;
+  }
+}
+
+export function writePageCache(key, data) {
+  try {
+    sessionStorage.setItem(PREFIX + key, JSON.stringify({
+      savedAt: Date.now(),
+      data,
+    }));
+  } catch {
+    // Ignore cache write failures.
+  }
+}
diff --git a/src/lib/requestSubmission.js b/src/lib/requestSubmission.js
new file mode 100644
index 0000000..a5cf059
--- /dev/null
+++ b/src/lib/requestSubmission.js
@@ -0,0 +1,118 @@
+import { supabase } from './supabase';
+
+function normalizeProjectName(name = '') {
+  return String(name).trim().toLowerCase();
+}
+
+export async function findOrCreateProject(companyId, projectName, knownProjects = []) {
+  const normalized = normalizeProjectName(projectName);
+  if (!companyId || !normalized) throw new Error('Project company and name are required.');
+
+  const existingKnown = knownProjects.find(project => normalizeProjectName(project.name) === normalized);
+  if (existingKnown) return existingKnown;
+
+  const { data: candidateProjects, error: lookupError } = await supabase
+    .from('projects')
+    .select('id, name, company_id, status')
+    .eq('company_id', companyId)
+    .ilike('name', projectName.trim());
+  if (lookupError) throw lookupError;
+
+  const matched = (candidateProjects || []).find(project => normalizeProjectName(project.name) === normalized);
+  if (matched) return matched;
+
+  const { data: newProject, error: insertError } = await supabase
+    .from('projects')
+    .insert({
+      company_id: companyId,
+      name: projectName.trim(),
+      status: 'active',
+    })
+    .select('id, name, company_id, status')
+    .single();
+
+  if (!insertError && newProject) return newProject;
+
+  if (insertError?.code === '23505') {
+    const { data: retryProjects, error: retryError } = await supabase
+      .from('projects')
+      .select('id, name, company_id, status')
+      .eq('company_id', companyId)
+      .ilike('name', projectName.trim());
+    if (retryError) throw retryError;
+    const retried = (retryProjects || []).find(project => normalizeProjectName(project.name) === normalized);
+    if (retried) return retried;
+  }
+
+  throw insertError || new Error('Failed to create project.');
+}
+
+export async function createTaskForRequest({ projectId, title, requestKey }) {
+  const { data: task, error } = await supabase
+    .from('tasks')
+    .insert({
+      project_id: projectId,
+      title,
+      status: 'not_started',
+      current_version: 0,
+      request_key: requestKey,
+    })
+    .select()
+    .single();
+
+  if (!error && task) return { task, duplicate: false };
+
+  if (error?.code === '23505' && requestKey) {
+    const { data: existingTask, error: existingError } = await supabase
+      .from('tasks')
+      .select('*')
+      .eq('request_key', requestKey)
+      .single();
+    if (existingError) throw existingError;
+    if (existingTask) return { task: existingTask, duplicate: true };
+  }
+
+  throw error || new Error('Failed to create task.');
+}
+
+export async function createInitialSubmissionForRequest({
+  taskId,
+  requestKey,
+  isHot,
+  serviceType,
+  deadline,
+  description,
+  submittedBy,
+  submittedByName,
+}) {
+  const { data: submission, error } = await supabase
+    .from('submissions')
+    .insert({
+      task_id: taskId,
+      request_key: requestKey,
+      version_number: 0,
+      type: 'initial',
+      is_hot: isHot,
+      service_type: serviceType,
+      deadline: deadline || null,
+      description,
+      submitted_by: submittedBy,
+      submitted_by_name: submittedByName,
+    })
+    .select()
+    .single();
+
+  if (!error && submission) return { submission, duplicate: false };
+
+  if (error?.code === '23505' && requestKey) {
+    const { data: existingSubmission, error: existingError } = await supabase
+      .from('submissions')
+      .select('*')
+      .eq('request_key', requestKey)
+      .single();
+    if (existingError) throw existingError;
+    if (existingSubmission) return { submission: existingSubmission, duplicate: true };
+  }
+
+  throw error || new Error('Failed to create submission.');
+}
diff --git a/src/lib/seafileFolders.js b/src/lib/seafileFolders.js
new file mode 100644
index 0000000..a946da7
--- /dev/null
+++ b/src/lib/seafileFolders.js
@@ -0,0 +1,19 @@
+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/lib/signsurvey.js b/src/lib/signsurvey.js
deleted file mode 100644
index 76162e9..0000000
--- a/src/lib/signsurvey.js
+++ /dev/null
@@ -1,441 +0,0 @@
-import jsPDF from 'jspdf';
-
-// Letter landscape: 792 x 612 pt
-const W = 792;
-const H = 612;
-const MARGIN = 36;
-const ACCENT = [245, 165, 35];
-const DARK = [18, 18, 18];
-const HEADER_H = 32;
-
-// Accepts File, data URL string, or https URL string — returns data URL
-async function resolvePhoto(source) {
-  if (!source) return null;
-  if (source instanceof File) {
-    return new Promise((resolve) => {
-      const reader = new FileReader();
-      reader.onload = (e) => resolve(e.target.result);
-      reader.onerror = () => resolve(null);
-      reader.readAsDataURL(source);
-    });
-  }
-  if (typeof source === 'string') {
-    if (source.startsWith('data:')) return source;
-    try {
-      const resp = await fetch(source);
-      const blob = await resp.blob();
-      return new Promise((resolve) => {
-        const reader = new FileReader();
-        reader.onload = (e) => resolve(e.target.result);
-        reader.onerror = () => resolve(null);
-        reader.readAsDataURL(blob);
-      });
-    } catch { return null; }
-  }
-  return null;
-}
-
-function loadImage(src) {
-  return new Promise((resolve) => {
-    if (!src) return resolve(null);
-    const img = new Image();
-    img.crossOrigin = 'anonymous';
-    img.onload = () => resolve(img);
-    img.onerror = () => resolve(null);
-    img.src = src;
-  });
-}
-
-function addHeader(doc, logo, logoW, logoH, title, pageNum, totalPages) {
-  doc.setFillColor(...DARK);
-  doc.rect(0, 0, W, HEADER_H, 'F');
-  doc.setFillColor(...ACCENT);
-  doc.rect(0, 0, 4, HEADER_H, 'F');
-
-  if (logo) {
-    doc.addImage(logo, 'PNG', MARGIN, (HEADER_H - logoH) / 2, logoW, logoH);
-  } else {
-    doc.setFontSize(9);
-    doc.setFont('helvetica', 'bold');
-    doc.setTextColor(255, 255, 255);
-    doc.text('FOURGE BRANDING', MARGIN, HEADER_H / 2 + 3);
-  }
-
-  doc.setFontSize(9);
-  doc.setFont('helvetica', 'bold');
-  doc.setTextColor(200, 200, 200);
-  doc.text(title.toUpperCase(), W / 2, HEADER_H / 2 + 3, { align: 'center' });
-
-  doc.setFontSize(8);
-  doc.setFont('helvetica', 'normal');
-  doc.setTextColor(120, 120, 120);
-  doc.text(`${pageNum} / ${totalPages}`, W - MARGIN, HEADER_H / 2 + 3, { align: 'right' });
-}
-
-function addFooter(doc, clientName, date) {
-  doc.setDrawColor(60, 60, 60);
-  doc.setLineWidth(0.3);
-  doc.line(MARGIN, H - 22, W - MARGIN, H - 22);
-  doc.setFontSize(7);
-  doc.setFont('helvetica', 'normal');
-  doc.setTextColor(130, 130, 130);
-  doc.text(clientName, MARGIN, H - 12);
-  doc.text('hello@fourgebranding.com  ·  www.fourgebranding.com', W / 2, H - 12, { align: 'center' });
-  if (date) doc.text(date, W - MARGIN, H - 12, { align: 'right' });
-}
-
-export async function generateBrandBookEditorPDF(data) {
-  const { clientName, projectName, siteAddress, bookDate, preparedBy, revision,
-    siteMapSource, signs, surveyPhotoSources } = data;
-
-  const doc = new jsPDF({ orientation: 'landscape', format: 'letter', unit: 'pt' });
-
-  // Load assets
-  const logo = await loadImage('/fourge-logo.png');
-  const logoW = 40;
-  const logoH = logo ? (logoW / (logo.naturalWidth / logo.naturalHeight)) : 10;
-
-  // Resolve all photos to data URLs up front
-  const siteMapDataUrl = await resolvePhoto(siteMapSource);
-  const signPhotoDataUrls = await Promise.all(signs.map(s => resolvePhoto(s.photoSource)));
-  const surveyPhotoDataUrls = await Promise.all((surveyPhotoSources || []).map(s => resolvePhoto(s)));
-
-  // Count pages
-  let totalPages = 1; // cover
-  totalPages++; // sign inventory
-  totalPages += signs.length;
-  if (surveyPhotoDataUrls.some(Boolean)) totalPages++;
-
-  let pageNum = 0;
-  const displayDate = bookDate
-    ? new Date(bookDate + 'T12:00:00').toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' })
-    : '';
-
-  // ─── COVER PAGE ──────────────────────────────────────────────────────────────
-  pageNum++;
-  doc.setFillColor(...DARK);
-  doc.rect(0, 0, W, H, 'F');
-  doc.setFillColor(...ACCENT);
-  doc.rect(0, 0, W, 4, 'F');
-  doc.rect(0, H - 4, W, 4, 'F');
-
-  if (logo) {
-    doc.addImage(logo, 'PNG', MARGIN, 22, logoW, logoH);
-  } else {
-    doc.setFontSize(10);
-    doc.setFont('helvetica', 'bold');
-    doc.setTextColor(255, 255, 255);
-    doc.text('FOURGE BRANDING', MARGIN, 38);
-  }
-
-  const cy = H / 2;
-
-  doc.setFontSize(9);
-  doc.setFont('helvetica', 'bold');
-  doc.setTextColor(...ACCENT);
-  doc.setCharSpace(3);
-  doc.text('BRAND BOOK', W / 2, cy - 54, { align: 'center' });
-  doc.setCharSpace(0);
-
-  doc.setDrawColor(...ACCENT);
-  doc.setLineWidth(0.5);
-  doc.line(W / 2 - 40, cy - 46, W / 2 + 40, cy - 46);
-
-  doc.setFontSize(36);
-  doc.setFont('helvetica', 'bold');
-  doc.setTextColor(255, 255, 255);
-  doc.text(clientName || 'Client Name', W / 2, cy - 18, { align: 'center' });
-
-  if (projectName) {
-    doc.setFontSize(14);
-    doc.setFont('helvetica', 'normal');
-    doc.setTextColor(160, 160, 160);
-    doc.text(projectName, W / 2, cy + 12, { align: 'center' });
-  }
-
-  const metaParts = [];
-  if (siteAddress) metaParts.push(siteAddress);
-  if (displayDate) metaParts.push(displayDate);
-  if (preparedBy) metaParts.push(`Prepared by ${preparedBy}`);
-  if (metaParts.length > 0) {
-    doc.setFontSize(9);
-    doc.setFont('helvetica', 'normal');
-    doc.setTextColor(100, 100, 100);
-    doc.text(metaParts.join('  ·  '), W / 2, cy + 36, { align: 'center' });
-  }
-
-  // Revision badge bottom right of cover
-  const rev = String(revision || '01').padStart(2, '0');
-  doc.setFontSize(10);
-  doc.setFont('helvetica', 'bold');
-  doc.setTextColor(80, 80, 80);
-  doc.text(`R${rev}`, W - MARGIN, cy + 36, { align: 'right' });
-
-  // ─── PAGE 2: SIGN INVENTORY ───────────────────────────────────────────────────
-  pageNum++;
-  doc.addPage();
-  addHeader(doc, logo, logoW, logoH, 'Sign Inventory', pageNum, totalPages);
-  addFooter(doc, clientName, displayDate);
-
-  const contentTop = HEADER_H + 16;
-  const contentBottom = H - 30;
-  const contentH = contentBottom - contentTop;
-
-  if (siteMapDataUrl) {
-    const mapW = (W - MARGIN * 2 - 16) * 0.55;
-    const mapH = contentH;
-    const mapX = MARGIN;
-    const mapY = contentTop;
-
-    const siteImg = await loadImage(siteMapDataUrl);
-    if (siteImg) {
-      const imgAspect = siteImg.naturalWidth / siteImg.naturalHeight;
-      const boxAspect = mapW / mapH;
-      let drawW, drawH, drawX, drawY;
-      if (imgAspect > boxAspect) {
-        drawW = mapW; drawH = mapW / imgAspect;
-        drawX = mapX; drawY = mapY + (mapH - drawH) / 2;
-      } else {
-        drawH = mapH; drawW = mapH * imgAspect;
-        drawX = mapX + (mapW - drawW) / 2; drawY = mapY;
-      }
-      doc.setDrawColor(80, 80, 80);
-      doc.setLineWidth(0.5);
-      doc.rect(mapX, mapY, mapW, mapH);
-      doc.addImage(siteMapDataUrl, drawX, drawY, drawW, drawH);
-    }
-
-    const tableX = MARGIN + mapW + 16;
-    const tableW = W - MARGIN - tableX;
-    drawInventoryTable(doc, signs, tableX, contentTop, tableW, contentH);
-  } else {
-    drawInventoryTable(doc, signs, MARGIN, contentTop, W - MARGIN * 2, contentH);
-  }
-
-  // ─── SIGN PAGES ───────────────────────────────────────────────────────────────
-  for (let i = 0; i < signs.length; i++) {
-    const sign = signs[i];
-    const photoDataUrl = signPhotoDataUrls[i];
-    pageNum++;
-    doc.addPage();
-    const signLabel = `Sign ${sign.signNumber || (i + 1)} — ${sign.type || 'Sign'}`;
-    addHeader(doc, logo, logoW, logoH, signLabel, pageNum, totalPages);
-    addFooter(doc, clientName, displayDate);
-
-    const top = HEADER_H + 16;
-    const bottom = H - 30;
-    const availH = bottom - top;
-    const photoW = (W - MARGIN * 2 - 20) * 0.45;
-    const specsX = MARGIN + photoW + 20;
-    const specsW = W - MARGIN - specsX;
-
-    if (photoDataUrl) {
-      const photoImg = await loadImage(photoDataUrl);
-      if (photoImg) {
-        const imgAspect = photoImg.naturalWidth / photoImg.naturalHeight;
-        const boxAspect = photoW / availH;
-        let dw, dh, dx, dy;
-        if (imgAspect > boxAspect) {
-          dw = photoW; dh = photoW / imgAspect;
-          dx = MARGIN; dy = top + (availH - dh) / 2;
-        } else {
-          dh = availH; dw = availH * imgAspect;
-          dx = MARGIN + (photoW - dw) / 2; dy = top;
-        }
-        doc.setFillColor(30, 30, 30);
-        doc.rect(MARGIN, top, photoW, availH, 'F');
-        doc.addImage(photoDataUrl, dx, dy, dw, dh);
-        doc.setDrawColor(60, 60, 60);
-        doc.setLineWidth(0.5);
-        doc.rect(MARGIN, top, photoW, availH);
-      }
-    } else {
-      doc.setFillColor(30, 30, 30);
-      doc.rect(MARGIN, top, photoW, availH, 'F');
-      doc.setFontSize(10);
-      doc.setFont('helvetica', 'normal');
-      doc.setTextColor(80, 80, 80);
-      doc.text('No Photo', MARGIN + photoW / 2, top + availH / 2, { align: 'center' });
-      doc.setDrawColor(60, 60, 60);
-      doc.setLineWidth(0.5);
-      doc.rect(MARGIN, top, photoW, availH);
-    }
-
-    let sy = top;
-
-    doc.setFillColor(...ACCENT);
-    doc.roundedRect(specsX, sy, 44, 18, 3, 3, 'F');
-    doc.setFontSize(10);
-    doc.setFont('helvetica', 'bold');
-    doc.setTextColor(...DARK);
-    doc.text(`#${sign.signNumber || (i + 1)}`, specsX + 22, sy + 12, { align: 'center' });
-    sy += 26;
-
-    doc.setFontSize(16);
-    doc.setFont('helvetica', 'bold');
-    doc.setTextColor(30, 30, 30);
-    doc.text(sign.type || 'Sign Type', specsX, sy);
-    sy += 20;
-
-    doc.setDrawColor(...ACCENT);
-    doc.setLineWidth(1);
-    doc.line(specsX, sy, specsX + specsW, sy);
-    sy += 12;
-
-    const specs = [
-      ['Location', sign.location || '—'],
-      ['Dimensions', sign.width && sign.height ? `${sign.width}" W × ${sign.height}" H` : '—'],
-      ['Material', sign.material || '— (placeholder)'],
-      ['Illumination', sign.illumination || '— (placeholder)'],
-      ['Condition', sign.condition || '— (placeholder)'],
-      ['Mount Type', sign.mountType || '— (placeholder)'],
-    ];
-
-    specs.forEach(([label, value]) => {
-      doc.setFontSize(7);
-      doc.setFont('helvetica', 'bold');
-      doc.setTextColor(150, 150, 150);
-      doc.text(label.toUpperCase(), specsX, sy);
-      sy += 9;
-      doc.setFontSize(10);
-      doc.setFont('helvetica', 'normal');
-      doc.setTextColor(40, 40, 40);
-      const wrapped = doc.splitTextToSize(value, specsW);
-      doc.text(wrapped, specsX, sy);
-      sy += wrapped.length * 6 + 10;
-    });
-
-    if (sign.notes) {
-      doc.setFontSize(7);
-      doc.setFont('helvetica', 'bold');
-      doc.setTextColor(150, 150, 150);
-      doc.text('NOTES', specsX, sy);
-      sy += 9;
-      doc.setFontSize(9);
-      doc.setFont('helvetica', 'normal');
-      doc.setTextColor(80, 80, 80);
-      const noteLines = doc.splitTextToSize(sign.notes, specsW);
-      doc.text(noteLines, specsX, sy);
-    }
-  }
-
-  // ─── SURVEY PHOTOS PAGE ───────────────────────────────────────────────────────
-  const validSurveyPhotos = surveyPhotoDataUrls.filter(Boolean);
-  if (validSurveyPhotos.length > 0) {
-    pageNum++;
-    doc.addPage();
-    addHeader(doc, logo, logoW, logoH, 'Site Photos', pageNum, totalPages);
-    addFooter(doc, clientName, displayDate);
-
-    const top = HEADER_H + 14;
-    const bottom = H - 30;
-    const availW = W - MARGIN * 2;
-    const cols = 4;
-    const rows = 3;
-    const gapX = 10;
-    const gapY = 10;
-    const thumbW = (availW - gapX * (cols - 1)) / cols;
-    const thumbH = (bottom - top - gapY * (rows - 1)) / rows;
-
-    for (let i = 0; i < Math.min(validSurveyPhotos.length, cols * rows); i++) {
-      const dataUrl = validSurveyPhotos[i];
-      const col = i % cols;
-      const row = Math.floor(i / cols);
-      const tx = MARGIN + col * (thumbW + gapX);
-      const ty = top + row * (thumbH + gapY);
-
-      doc.setFillColor(30, 30, 30);
-      doc.rect(tx, ty, thumbW, thumbH, 'F');
-
-      const img = await loadImage(dataUrl);
-      if (img) {
-        const aspect = img.naturalWidth / img.naturalHeight;
-        const boxAspect = thumbW / thumbH;
-        let dw, dh, dx, dy;
-        if (aspect > boxAspect) {
-          dw = thumbW; dh = thumbW / aspect; dx = tx; dy = ty + (thumbH - dh) / 2;
-        } else {
-          dh = thumbH; dw = thumbH * aspect; dx = tx + (thumbW - dw) / 2; dy = ty;
-        }
-        doc.addImage(dataUrl, dx, dy, dw, dh);
-      }
-      doc.setDrawColor(60, 60, 60);
-      doc.setLineWidth(0.3);
-      doc.rect(tx, ty, thumbW, thumbH);
-    }
-
-    if (validSurveyPhotos.length > cols * rows) {
-      doc.setFontSize(8);
-      doc.setFont('helvetica', 'italic');
-      doc.setTextColor(120, 120, 120);
-      doc.text(`+${validSurveyPhotos.length - cols * rows} more photos not shown`, W - MARGIN, bottom + 8, { align: 'right' });
-    }
-  }
-
-  const safePart = (str) => (str || '').replace(/[^a-zA-Z0-9 ]/g, '').trim().replace(/\s+/g, ' ');
-  const filename = [safePart(projectName), safePart(siteAddress), `R${rev}`].filter(Boolean).join('.');
-  doc.save(`${filename || 'BrandBook'}.pdf`);
-}
-
-function drawInventoryTable(doc, signs, x, y, w, h) {
-  const colDefs = [
-    { label: '#', flex: 0.5 },
-    { label: 'Type', flex: 1.5 },
-    { label: 'Location', flex: 2 },
-    { label: 'Dimensions', flex: 1.2 },
-    { label: 'Notes', flex: 2 },
-  ];
-  const totalFlex = colDefs.reduce((s, c) => s + c.flex, 0);
-  const cols = colDefs.map(c => ({ ...c, w: (c.flex / totalFlex) * w }));
-
-  const rowH = 18;
-  doc.setFillColor(30, 30, 30);
-  doc.rect(x, y, w, rowH, 'F');
-  doc.setFontSize(7);
-  doc.setFont('helvetica', 'bold');
-  doc.setTextColor(...ACCENT);
-
-  let cx = x;
-  cols.forEach(col => { doc.text(col.label, cx + 5, y + 12); cx += col.w; });
-
-  let ry = y + rowH;
-  signs.forEach((sign, i) => {
-    if (ry > y + h - rowH) return;
-    const rowData = [
-      sign.signNumber || String(i + 1),
-      sign.type || '—',
-      sign.location || '—',
-      sign.width && sign.height ? `${sign.width}" × ${sign.height}"` : '—',
-      sign.notes || '',
-    ];
-
-    doc.setFillColor(i % 2 === 0 ? 248 : 242, i % 2 === 0 ? 248 : 242, i % 2 === 0 ? 248 : 242);
-    doc.rect(x, ry, w, rowH, 'F');
-    doc.setFontSize(8);
-    doc.setFont('helvetica', 'normal');
-    doc.setTextColor(40, 40, 40);
-
-    cx = x;
-    cols.forEach((col, ci) => {
-      const truncated = doc.splitTextToSize(rowData[ci] || '', col.w - 8)[0] || '';
-      doc.text(truncated, cx + 5, ry + 12);
-      cx += col.w;
-    });
-
-    doc.setDrawColor(220, 220, 220);
-    doc.setLineWidth(0.2);
-    doc.line(x, ry + rowH, x + w, ry + rowH);
-    ry += rowH;
-  });
-
-  doc.setDrawColor(180, 180, 180);
-  doc.setLineWidth(0.5);
-  doc.rect(x, y, w, ry - y);
-
-  if (signs.length === 0) {
-    doc.setFontSize(9);
-    doc.setFont('helvetica', 'italic');
-    doc.setTextColor(160, 160, 160);
-    doc.text('No signs added yet', x + w / 2, y + rowH + 16, { align: 'center' });
-  }
-}
diff --git a/src/lib/surveyMakerPdf.js b/src/lib/surveyMakerPdf.js
new file mode 100644
index 0000000..af624b3
--- /dev/null
+++ b/src/lib/surveyMakerPdf.js
@@ -0,0 +1,239 @@
+import jsPDF from 'jspdf';
+
+const W = 792;
+const H = 612;
+const MARGIN = 36;
+const ACCENT = [245, 165, 35];
+const DARK = [18, 18, 18];
+const HEADER_H = 64;
+
+function formatDate(dateStr) {
+  if (!dateStr) return '-';
+  const d = new Date(`${dateStr}T12:00:00`);
+  return d.toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' });
+}
+
+async function blobToDataUrl(blob) {
+  return new Promise((resolve) => {
+    const reader = new FileReader();
+    reader.onload = (event) => resolve(event.target?.result || null);
+    reader.onerror = () => resolve(null);
+    reader.readAsDataURL(blob);
+  });
+}
+
+async function resolvePhoto(source) {
+  if (!source) return null;
+  if (source instanceof File || source instanceof Blob) {
+    return blobToDataUrl(source);
+  }
+  if (typeof source === 'string') return source.startsWith('data:') ? source : null;
+  return null;
+}
+
+function getFormat(dataUrl) {
+  return dataUrl?.startsWith('data:image/png') ? 'PNG' : 'JPEG';
+}
+
+function loadImage(src) {
+  return new Promise((resolve) => {
+    if (!src) return resolve(null);
+    const img = new Image();
+    img.onload = () => resolve(img);
+    img.onerror = () => resolve(null);
+    img.src = src;
+  });
+}
+
+const PX_PER_PT = 300 / 72;
+
+function toPrintJpeg(dataUrl, img, displayPtW, displayPtH, quality = 0.82) {
+  if (!dataUrl || dataUrl.startsWith('data:image/png')) return dataUrl;
+  const tW = Math.round(displayPtW * PX_PER_PT);
+  const tH = Math.round(displayPtH * PX_PER_PT);
+  if (img.naturalWidth <= tW && img.naturalHeight <= tH) return dataUrl;
+  const canvas = document.createElement('canvas');
+  canvas.width = tW;
+  canvas.height = tH;
+  canvas.getContext('2d').drawImage(img, 0, 0, tW, tH);
+  return canvas.toDataURL('image/jpeg', quality);
+}
+
+function addHeader(doc, title, pageNum, totalPages) {
+  doc.setFillColor(255, 255, 255);
+  doc.rect(0, 0, W, HEADER_H, 'F');
+  doc.setFillColor(...ACCENT);
+  doc.rect(0, 0, 4, HEADER_H, 'F');
+  doc.setDrawColor(220, 220, 220);
+  doc.setLineWidth(0.3);
+  doc.line(0, HEADER_H, W, HEADER_H);
+
+  doc.setFontSize(10);
+  doc.setFont('helvetica', 'bold');
+  doc.setTextColor(...DARK);
+  doc.text(title.toUpperCase(), MARGIN, HEADER_H / 2 + 4);
+
+  doc.setFontSize(8);
+  doc.setFont('helvetica', 'normal');
+  doc.setTextColor(140, 140, 140);
+  doc.text(`${pageNum} / ${totalPages}`, W - MARGIN, HEADER_H / 2 + 4, { align: 'right' });
+}
+
+function drawCoverImage(doc, dataUrl, img, x, y, w, h) {
+  if (!dataUrl || !img) return;
+  const srcAspect = img.naturalWidth / img.naturalHeight;
+  const boxAspect = w / h;
+  let drawW;
+  let drawH;
+  let drawX;
+  let drawY;
+
+  if (srcAspect > boxAspect) {
+    drawW = w;
+    drawH = w / srcAspect;
+    drawX = x;
+    drawY = y + (h - drawH) / 2;
+  } else {
+    drawH = h;
+    drawW = h * srcAspect;
+    drawX = x + (w - drawW) / 2;
+    drawY = y;
+  }
+
+  const printableDataUrl = toPrintJpeg(dataUrl, img, drawW, drawH);
+  doc.addImage(printableDataUrl, getFormat(printableDataUrl), drawX, drawY, drawW, drawH);
+}
+
+export async function generateSurveyMakerPdf(data) {
+  const { clientName, siteAddress, surveyDate, preparedBy, projectName, signs } = data;
+  const doc = new jsPDF({ orientation: 'landscape', format: 'letter', unit: 'pt', compress: true });
+
+  const signPhotos = await Promise.all((signs || []).map(async (sign) => {
+    const mainDataUrl = await resolvePhoto(sign.mainPhoto);
+    const contextDataUrls = await Promise.all([
+      resolvePhoto(sign.contextPhoto1),
+      resolvePhoto(sign.contextPhoto2),
+      resolvePhoto(sign.contextPhoto3),
+    ]);
+    const mainImage = mainDataUrl ? await loadImage(mainDataUrl) : null;
+    const contextImages = await Promise.all(contextDataUrls.map(async (dataUrl) => (dataUrl ? loadImage(dataUrl) : null)));
+
+    return { mainDataUrl, mainImage, contextDataUrls, contextImages };
+  }));
+
+  const totalPages = Math.max(1, 1 + signs.length);
+
+  doc.setFillColor(255, 255, 255);
+  doc.rect(0, 0, W, H, 'F');
+  doc.setFillColor(...ACCENT);
+  doc.rect(0, 0, W, 5, 'F');
+  doc.rect(0, H - 5, W, 5, 'F');
+
+  doc.setFontSize(30);
+  doc.setFont('helvetica', 'bold');
+  doc.setTextColor(...DARK);
+  doc.text(projectName || 'Sign Survey', MARGIN, 88);
+
+  const details = [
+    ['Client', clientName || '-'],
+    ['Site Address', siteAddress || '-'],
+    ['Survey Date', formatDate(surveyDate)],
+    ['Prepared By', preparedBy || '-'],
+    ['Sign Count', String(signs.length)],
+  ];
+
+  let y = 148;
+  details.forEach(([label, value]) => {
+    doc.setFontSize(9);
+    doc.setFont('helvetica', 'bold');
+    doc.setTextColor(150, 150, 150);
+    doc.text(label.toUpperCase(), MARGIN, y);
+    y += 16;
+    doc.setFontSize(14);
+    doc.setFont('helvetica', 'normal');
+    doc.setTextColor(40, 40, 40);
+    const lines = doc.splitTextToSize(value, 320);
+    doc.text(lines, MARGIN, y);
+    y += lines.length * 16 + 18;
+  });
+
+  if (signPhotos[0]?.mainDataUrl && signPhotos[0]?.mainImage) {
+    const photoX = 410;
+    const photoY = 110;
+    const photoW = W - photoX - MARGIN;
+    const photoH = 360;
+    drawCoverImage(doc, signPhotos[0].mainDataUrl, signPhotos[0].mainImage, photoX, photoY, photoW, photoH);
+  }
+
+  doc.setFontSize(8);
+  doc.setTextColor(140, 140, 140);
+  doc.text('1 / ' + totalPages, W - MARGIN, H - 18, { align: 'right' });
+
+  for (let index = 0; index < signs.length; index += 1) {
+    const sign = signs[index];
+    const photo = signPhotos[index];
+    doc.addPage();
+    addHeader(doc, sign.signName || `Sign ${index + 1}`, index + 2, totalPages);
+
+    const top = HEADER_H + 20;
+    const leftW = 270;
+    const rightX = MARGIN + leftW + 20;
+    const rightW = W - rightX - MARGIN;
+    const mainPhotoH = 280;
+    const contextGap = 10;
+    const contextPhotoY = top + mainPhotoH + 12;
+    const contextPhotoW = (rightW - contextGap * 2) / 3;
+    const contextPhotoH = H - contextPhotoY - 36;
+
+    doc.setFontSize(18);
+    doc.setFont('helvetica', 'bold');
+    doc.setTextColor(...DARK);
+    doc.text(sign.signName || `Sign ${index + 1}`, MARGIN, top + 10);
+
+    let textY = top + 42;
+    const blocks = [
+      ['Measurements', sign.measurements || '-'],
+      ['Notes', sign.notes || '-'],
+    ];
+
+    blocks.forEach(([label, value]) => {
+      doc.setFontSize(9);
+      doc.setFont('helvetica', 'bold');
+      doc.setTextColor(150, 150, 150);
+      doc.text(label.toUpperCase(), MARGIN, textY);
+      textY += 16;
+      doc.setFontSize(11);
+      doc.setFont('helvetica', 'normal');
+      doc.setTextColor(50, 50, 50);
+      const lines = doc.splitTextToSize(value, leftW);
+      doc.text(lines, MARGIN, textY);
+      textY += lines.length * 14 + 24;
+    });
+
+    if (photo?.mainDataUrl && photo?.mainImage) {
+      drawCoverImage(doc, photo.mainDataUrl, photo.mainImage, rightX, top, rightW, mainPhotoH);
+    } else {
+      doc.setFontSize(10);
+      doc.setTextColor(170, 170, 170);
+      doc.text('No Main Photo', rightX + rightW / 2, top + mainPhotoH / 2, { align: 'center' });
+    }
+
+    for (let contextIndex = 0; contextIndex < 3; contextIndex += 1) {
+      const x = rightX + contextIndex * (contextPhotoW + contextGap);
+
+      const contextDataUrl = photo?.contextDataUrls?.[contextIndex];
+      const contextImage = photo?.contextImages?.[contextIndex];
+      if (contextDataUrl && contextImage) {
+        drawCoverImage(doc, contextDataUrl, contextImage, x, contextPhotoY, contextPhotoW, contextPhotoH);
+      } else {
+        doc.setFontSize(9);
+        doc.setTextColor(180, 180, 180);
+        doc.text(`Context ${contextIndex + 1}`, x + contextPhotoW / 2, contextPhotoY + contextPhotoH / 2, { align: 'center' });
+      }
+    }
+  }
+
+  const safe = (value) => (value || '').replace(/[^a-zA-Z0-9 ]/g, '').trim().replace(/\s+/g, ' ');
+  const filename = [safe(projectName || 'Survey'), safe(clientName), formatDate(surveyDate).replace(/[^a-zA-Z0-9]/g, '')].filter(Boolean).join('.');
+  doc.save(`${filename || 'SurveyMaker'}.pdf`);
+}
diff --git a/src/lib/taskDeadlines.js b/src/lib/taskDeadlines.js
new file mode 100644
index 0000000..d7a728d
--- /dev/null
+++ b/src/lib/taskDeadlines.js
@@ -0,0 +1,28 @@
+export function getCurrentVersionForTask(task, submissions) {
+  return Math.max(
+    task?.current_version || 0,
+    ...((submissions || []).map(submission => submission.version_number || 0))
+  );
+}
+
+export function getDeadlineSourceSubmission(task, submissions) {
+  const taskSubs = (submissions || []).filter(submission => submission?.task_id === task?.id);
+  if (taskSubs.length === 0) return null;
+
+  const deadlineRow = [...taskSubs]
+    .filter(submission => submission.deadline)
+    .sort((a, b) => {
+      if ((b.version_number ?? 0) !== (a.version_number ?? 0)) return (b.version_number ?? 0) - (a.version_number ?? 0);
+      return new Date(b.submitted_at || 0).getTime() - new Date(a.submitted_at || 0).getTime();
+    })[0];
+
+  if (deadlineRow) return deadlineRow;
+
+  const currentVersion = getCurrentVersionForTask(task, taskSubs);
+  const currentVersionSubs = taskSubs.filter(submission => (submission.version_number || 0) === currentVersion);
+
+  return [...currentVersionSubs].sort((a, b) => {
+    if ((b.version_number ?? 0) !== (a.version_number ?? 0)) return (b.version_number ?? 0) - (a.version_number ?? 0);
+    return new Date(b.submitted_at || 0).getTime() - new Date(a.submitted_at || 0).getTime();
+  })[0] || null;
+}
diff --git a/src/lib/withTimeout.js b/src/lib/withTimeout.js
new file mode 100644
index 0000000..10dc4ef
--- /dev/null
+++ b/src/lib/withTimeout.js
@@ -0,0 +1,13 @@
+export async function withTimeout(promise, ms = 12000, label = 'Request') {
+  let timerId;
+  try {
+    return await Promise.race([
+      promise,
+      new Promise((_, reject) => {
+        timerId = window.setTimeout(() => reject(new Error(`${label} timed out`)), ms);
+      }),
+    ]);
+  } finally {
+    if (timerId) window.clearTimeout(timerId);
+  }
+}
diff --git a/src/pages/Login.jsx b/src/pages/Login.jsx
index 13639d4..5bdb9fb 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 === 'team' ? '/dashboard' : '/my-dashboard', { replace: true });
+      navigate(currentUser.role === 'client' ? '/my-dashboard' : '/dashboard', { replace: true });
     }
   }, [currentUser, navigate]);
 
@@ -25,8 +25,8 @@ export default function Login() {
     const { error: err } = await login(email, password);
     if (err) {
       setError('Invalid email or password.');
-      setLoading(false);
     }
+    setLoading(false);
     // Navigation handled by useEffect watching currentUser
   };
 
@@ -34,7 +34,7 @@ export default function Login() {
     <div className="auth-page">
       <div className="auth-card">
         <div className="auth-logo">
-          <img src="/fourge-logo.png" alt="Fourge Branding" style={{ width: 200, marginBottom: 8 }} />
+          <img className="brand-logo brand-logo-auth" src="/fourge-logo.png" alt="Fourge Branding" />
           <p>Client & Project Portal</p>
         </div>
 
diff --git a/src/pages/PayInvoice.jsx b/src/pages/PayInvoice.jsx
new file mode 100644
index 0000000..51f2268
--- /dev/null
+++ b/src/pages/PayInvoice.jsx
@@ -0,0 +1,153 @@
+import { useState, useEffect } from 'react';
+import { useParams, useSearchParams } from 'react-router-dom';
+
+const supabaseUrl = import.meta.env.VITE_SUPABASE_URL;
+const supabaseAnonKey = import.meta.env.VITE_SUPABASE_ANON_KEY;
+const currencyFormatter = new Intl.NumberFormat('en-US', {
+  style: 'currency',
+  currency: 'USD',
+});
+
+export default function PayInvoice() {
+  const { id } = useParams();
+  const [searchParams] = useSearchParams();
+  const success = searchParams.get('success') === '1';
+  const cancelled = searchParams.get('cancelled') === '1';
+
+  const [invoice, setInvoice] = useState(null);
+  const [company, setCompany] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [paying, setPaying] = useState(false);
+  const [error, setError] = useState('');
+  const totalLabel = currencyFormatter.format(Number(invoice?.total || 0));
+
+  useEffect(() => {
+    async function load() {
+      try {
+        const response = await fetch(`${supabaseUrl}/functions/v1/get-public-invoice`, {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+            apikey: supabaseAnonKey,
+          },
+          body: JSON.stringify({ invoice_ref: id }),
+        });
+
+        const body = await response.json();
+        if (!response.ok || !body?.invoice) {
+          setLoading(false);
+          return;
+        }
+
+        setInvoice(body.invoice);
+        setCompany(body.invoice.companies || null);
+      } catch (err) {
+        console.error('PayInvoice load failed:', err);
+      } finally {
+        setLoading(false);
+      }
+    }
+    load();
+  }, [id]);
+
+  const handlePay = async () => {
+    setPaying(true);
+    setError('');
+    try {
+      const response = await fetch(`${supabaseUrl}/functions/v1/create-checkout-session`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          apikey: supabaseAnonKey,
+        },
+        body: JSON.stringify({ invoice_ref: id }),
+      });
+
+      const body = await response.json();
+      if (!response.ok || !body?.url) throw new Error(body?.error || 'Could not create payment session.');
+      window.location.href = body.url;
+    } catch (err) {
+      setError(err.message);
+      setPaying(false);
+    }
+  };
+
+  return (
+    <div style={{ minHeight: '100vh', background: '#f5f5f5', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', padding: 24 }}>
+      <div style={{ width: '100%', maxWidth: 480 }}>
+        {/* Logo */}
+        <div style={{ textAlign: 'center', marginBottom: 32 }}>
+          <img src="/fourge-logo.png" alt="Fourge Branding" style={{ height: 36, filter: 'invert(1)' }} />
+        </div>
+
+        {loading ? (
+          <div style={{ textAlign: 'center', color: '#666' }}>Loading...</div>
+        ) : !invoice ? (
+          <div style={{ background: '#fff', color: '#141414', borderRadius: 12, padding: 32, textAlign: 'center', boxShadow: '0 2px 12px rgba(0,0,0,0.08)' }}>
+            <div style={{ fontSize: 18, fontWeight: 700, marginBottom: 8 }}>Invoice not found</div>
+            <div style={{ color: '#666' }}>This payment link may be invalid or expired.</div>
+          </div>
+        ) : success || invoice.status === 'paid' ? (
+          <div style={{ background: '#fff', color: '#141414', borderRadius: 12, padding: 32, textAlign: 'center', boxShadow: '0 2px 12px rgba(0,0,0,0.08)' }}>
+            <div style={{ fontSize: 32, marginBottom: 12 }}>✓</div>
+            <div style={{ fontSize: 20, fontWeight: 700, marginBottom: 8 }}>Payment received</div>
+            <div style={{ color: '#666', marginBottom: 4 }}>{invoice.invoice_number}</div>
+            <div style={{ fontSize: 24, fontWeight: 700, color: '#16a34a', marginTop: 16 }}>{totalLabel}</div>
+            <div style={{ color: '#666', marginTop: 6, fontSize: 12, letterSpacing: '0.3px' }}>Charged in USD</div>
+            <div style={{ color: '#666', marginTop: 8, fontSize: 13 }}>Thank you for your payment. We'll be in touch!</div>
+          </div>
+        ) : (
+          <div style={{ background: '#fff', color: '#141414', borderRadius: 12, padding: 32, boxShadow: '0 2px 12px rgba(0,0,0,0.08)' }}>
+            <div style={{ fontSize: 13, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.5px', color: '#999', marginBottom: 4 }}>Invoice</div>
+            <div style={{ fontSize: 22, fontWeight: 700, marginBottom: 4 }}>{invoice.invoice_number}</div>
+            <div style={{ color: '#666', marginBottom: 24 }}>{invoice.bill_to || company?.name}</div>
+
+            <div style={{ display: 'flex', justifyContent: 'space-between', padding: '12px 0', borderTop: '1px solid #eee', borderBottom: '1px solid #eee', marginBottom: 24 }}>
+              <div>
+                <div style={{ fontSize: 12, color: '#999', marginBottom: 2 }}>Invoice Date</div>
+                <div style={{ fontWeight: 600, color: '#141414' }}>{new Date(invoice.invoice_date).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' })}</div>
+              </div>
+              <div style={{ textAlign: 'right' }}>
+                <div style={{ fontSize: 12, color: '#999', marginBottom: 2 }}>Due Date</div>
+                <div style={{ fontWeight: 600, color: '#141414' }}>{new Date(invoice.due_date).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' })}</div>
+              </div>
+            </div>
+
+            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 24 }}>
+              <div style={{ fontSize: 14, color: '#666' }}>Total Due</div>
+              <div style={{ fontSize: 28, fontWeight: 700, color: '#141414' }}>{totalLabel}</div>
+            </div>
+
+            {cancelled && (
+              <div style={{ background: '#fef2f2', border: '1px solid #fecaca', borderRadius: 8, padding: '10px 14px', fontSize: 13, color: '#dc2626', marginBottom: 16 }}>
+                Payment was cancelled. You can try again below.
+              </div>
+            )}
+
+            {error && (
+              <div style={{ background: '#fef2f2', border: '1px solid #fecaca', borderRadius: 8, padding: '10px 14px', fontSize: 13, color: '#dc2626', marginBottom: 16 }}>
+                {error}
+              </div>
+            )}
+
+            <button
+              onClick={handlePay}
+              disabled={paying}
+              style={{
+                width: '100%', padding: '14px', borderRadius: 8, border: 'none',
+                background: paying ? '#999' : '#141414', color: '#fff',
+                fontSize: 16, fontWeight: 700, cursor: paying ? 'not-allowed' : 'pointer',
+              }}
+            >
+              {paying ? 'Redirecting to payment...' : `Pay ${totalLabel}`}
+            </button>
+
+            <div style={{ textAlign: 'center', marginTop: 16, fontSize: 12, color: '#999' }}>
+              Secured by Stripe · Charged in USD · hello@fourgebranding.com
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/src/pages/Settings.jsx b/src/pages/Settings.jsx
index 6a787fa..1ae012d 100755
--- a/src/pages/Settings.jsx
+++ b/src/pages/Settings.jsx
@@ -5,47 +5,32 @@ import { useAuth } from '../context/AuthContext';
 
 export default function Settings() {
   const { currentUser } = useAuth();
-  const [form, setForm] = useState({
-    name: currentUser?.name || '',
-    company: currentUser?.company || '',
-  });
-  const [passwords, setPasswords] = useState({ current: '', next: '', confirm: '' });
-  const [profileSaved, setProfileSaved] = useState(false);
+  const [passwords, setPasswords] = useState({ next: '', confirm: '' });
   const [passwordSaved, setPasswordSaved] = useState(false);
   const [passwordError, setPasswordError] = useState('');
-  const [saving, setSaving] = useState(false);
   const [savingPw, setSavingPw] = useState(false);
 
-  const set = (field) => (e) => setForm(f => ({ ...f, [field]: e.target.value }));
   const setPw = (field) => (e) => setPasswords(p => ({ ...p, [field]: e.target.value }));
 
-  const handleProfileSave = async (e) => {
-    e.preventDefault();
-    setSaving(true);
-    await supabase.from('profiles').update({
-      name: form.name.trim(),
-      company: form.company.trim(),
-    }).eq('id', currentUser.id);
-    setProfileSaved(true);
-    setSaving(false);
-    setTimeout(() => setProfileSaved(false), 3000);
-  };
-
   const handlePasswordSave = async (e) => {
     e.preventDefault();
     setPasswordError('');
+    setPasswordSaved(false);
     if (passwords.next !== passwords.confirm) { setPasswordError('New passwords do not match.'); return; }
     if (passwords.next.length < 6) { setPasswordError('Password must be at least 6 characters.'); return; }
     setSavingPw(true);
-    const { error } = await supabase.auth.updateUser({ password: passwords.next });
-    if (error) { setPasswordError(error.message); setSavingPw(false); return; }
-    setPasswords({ current: '', next: '', confirm: '' });
-    setPasswordSaved(true);
-    setSavingPw(false);
-    setTimeout(() => setPasswordSaved(false), 3000);
+    try {
+      const { error } = await supabase.auth.updateUser({ password: passwords.next });
+      if (error) { setPasswordError(error.message); return; }
+      setPasswords({ next: '', confirm: '' });
+      setPasswordSaved(true);
+      setTimeout(() => setPasswordSaved(false), 3000);
+    } finally {
+      setSavingPw(false);
+    }
   };
 
-  const initials = form.name
+  const initials = (currentUser?.name || '')
     .split(' ')
     .map(n => n[0])
     .join('')
@@ -56,63 +41,26 @@ export default function Settings() {
     <Layout>
       <div className="page-header">
         <div>
-          <div className="page-title">Profile & Settings</div>
-          <div className="page-subtitle">Update your name, company, and password.</div>
+          <div className="page-title">Settings</div>
+          <div className="page-subtitle">Your account info and password.</div>
         </div>
       </div>
 
       <div style={{ maxWidth: 520, display: 'flex', flexDirection: 'column', gap: 24 }}>
 
-        {/* Avatar preview */}
         <div className="card" style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
           <div className="sidebar-avatar" style={{ width: 56, height: 56, fontSize: 20, flexShrink: 0 }}>
             {initials || '?'}
           </div>
           <div>
-            <div style={{ fontWeight: 700, fontSize: 15 }}>{form.name || 'Your Name'}</div>
+            <div style={{ fontWeight: 700, fontSize: 15 }}>{currentUser?.name || '—'}</div>
             <div style={{ fontSize: 13, color: 'var(--text-secondary)' }}>{currentUser?.email}</div>
-            <div style={{ fontSize: 12, color: 'var(--text-muted)', marginTop: 2, textTransform: 'capitalize' }}>{currentUser?.role}</div>
+            <div style={{ fontSize: 12, color: 'var(--text-muted)', marginTop: 2, textTransform: 'capitalize' }}>
+              {currentUser?.role}{currentUser?.company?.name ? ` · ${currentUser.company.name}` : ''}
+            </div>
           </div>
         </div>
 
-        {/* Profile form */}
-        <div className="card">
-          <div className="card-title">Profile Info</div>
-          <form onSubmit={handleProfileSave}>
-            <div className="form-group">
-              <label>Full Name *</label>
-              <input
-                type="text"
-                placeholder="First Last"
-                value={form.name}
-                onChange={set('name')}
-                required
-              />
-            </div>
-            <div className="form-group">
-              <label>Company / Organization</label>
-              <input
-                type="text"
-                placeholder="Your company"
-                value={form.company}
-                onChange={set('company')}
-              />
-            </div>
-            <div className="form-group">
-              <label>Email Address</label>
-              <input type="email" value={currentUser?.email} disabled style={{ opacity: 0.6, cursor: 'not-allowed' }} />
-              <div style={{ fontSize: 11, color: 'var(--text-muted)', marginTop: 4 }}>Contact Fourge to change your email.</div>
-            </div>
-            {profileSaved && (
-              <div className="notification notification-success" style={{ marginBottom: 12 }}>✓ Profile updated.</div>
-            )}
-            <button type="submit" className="btn btn-primary" disabled={saving}>
-              {saving ? 'Saving...' : 'Save Changes'}
-            </button>
-          </form>
-        </div>
-
-        {/* Password form */}
         <div className="card">
           <div className="card-title">Change Password</div>
           <form onSubmit={handlePasswordSave}>
diff --git a/src/pages/Signup.jsx b/src/pages/Signup.jsx
deleted file mode 100755
index 5c93f4e..0000000
--- a/src/pages/Signup.jsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import { useState } from 'react';
-import { Link, useNavigate } from 'react-router-dom';
-import { useAuth } from '../context/AuthContext';
-
-export default function Signup() {
-  const { signup } = useAuth();
-  const navigate = useNavigate();
-  const [form, setForm] = useState({ name: '', email: '', password: '', confirm: '' });
-  const [error, setError] = useState('');
-  const [loading, setLoading] = useState(false);
-
-  const set = (field) => (e) => setForm(f => ({ ...f, [field]: e.target.value }));
-
-  const handleSubmit = async (e) => {
-    e.preventDefault();
-    if (form.password !== form.confirm) { setError('Passwords do not match.'); return; }
-    if (form.password.length < 6) { setError('Password must be at least 6 characters.'); return; }
-    setLoading(true);
-    setError('');
-    const { error: err } = await signup(form.email, form.password, form.name);
-    if (err) { setError(err); setLoading(false); return; }
-    navigate('/', { state: { message: 'Account created! Please sign in.' } });
-  };
-
-  return (
-    <div className="auth-page">
-      <div className="auth-card">
-        <div className="auth-logo">
-          <img src="/fourge-logo.png" alt="Fourge Branding" style={{ width: 180, marginBottom: 8 }} />
-          <p>Create your client account</p>
-        </div>
-
-        <form onSubmit={handleSubmit}>
-          <div className="form-group">
-            <label>Full Name *</label>
-            <input type="text" placeholder="Jane Smith" value={form.name} onChange={set('name')} required />
-          </div>
-          <div className="form-group">
-            <label>Email Address *</label>
-            <input type="email" placeholder="jane@company.com" value={form.email} onChange={set('email')} required />
-          </div>
-          <div className="form-group">
-            <label>Password *</label>
-            <input type="password" placeholder="Min. 6 characters" value={form.password} onChange={set('password')} required />
-          </div>
-          <div className="form-group">
-            <label>Confirm Password *</label>
-            <input type="password" placeholder="Repeat password" value={form.confirm} onChange={set('confirm')} required />
-          </div>
-          {error && <p style={{ color: '#ef4444', fontSize: 13, marginBottom: 12 }}>{error}</p>}
-          <button type="submit" className="btn btn-primary w-full btn-lg" disabled={loading}>
-            {loading ? 'Creating account...' : 'Create Account'}
-          </button>
-        </form>
-
-        <p style={{ textAlign: 'center', marginTop: 20, fontSize: 13, color: '#a8a8a8' }}>
-          Already have an account?{' '}
-          <Link to="/" style={{ color: 'var(--accent)' }}>Sign in</Link>
-        </p>
-      </div>
-    </div>
-  );
-}
diff --git a/src/pages/SignupConfirmation.jsx b/src/pages/SignupConfirmation.jsx
deleted file mode 100755
index aebbe51..0000000
--- a/src/pages/SignupConfirmation.jsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { Link } from 'react-router-dom';
-
-export default function SignupConfirmation() {
-  return (
-    <div className="auth-page">
-      <div className="auth-card" style={{ textAlign: 'center' }}>
-        <img src="/fourge-logo.png" alt="Fourge Branding" style={{ width: 180, marginBottom: 24 }} />
-        <div style={{ fontSize: 48, marginBottom: 16 }}>📧</div>
-        <h2 style={{ fontSize: 20, fontWeight: 700, marginBottom: 8, color: '#fff' }}>Check your email</h2>
-        <p style={{ fontSize: 14, color: '#a8a8a8', marginBottom: 24, lineHeight: 1.6 }}>
-          We sent a confirmation link to your email address. Click it to activate your account, then come back to sign in.
-        </p>
-        <Link to="/" className="btn btn-primary w-full" style={{ justifyContent: 'center' }}>
-          Back to Sign In
-        </Link>
-      </div>
-    </div>
-  );
-}
diff --git a/src/pages/external/MyPurchaseOrders.jsx b/src/pages/external/MyPurchaseOrders.jsx
new file mode 100644
index 0000000..686debf
--- /dev/null
+++ b/src/pages/external/MyPurchaseOrders.jsx
@@ -0,0 +1,183 @@
+import { useEffect, useState } from 'react';
+import Layout from '../../components/Layout';
+import { supabase } from '../../lib/supabase';
+import { useAuth } from '../../context/AuthContext';
+import { withTimeout } from '../../lib/withTimeout';
+
+const poStatusColor = {
+  draft: 'not_started',
+  sent: 'in_progress',
+  approved: 'client_approved',
+  ready_to_pay: 'in_progress',
+  paid: 'client_approved',
+  cancelled: 'needs_revision',
+};
+
+const poStatusLabel = {
+  draft: 'Draft',
+  sent: 'Sent',
+  approved: 'Approved',
+  ready_to_pay: 'Ready to Pay',
+  paid: 'Paid',
+  cancelled: 'Cancelled',
+};
+
+export default function MyPurchaseOrders() {
+  const { currentUser } = useAuth();
+  const [purchaseOrders, setPurchaseOrders] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState('');
+  const [savingId, setSavingId] = useState('');
+
+  useEffect(() => {
+    async function load() {
+      if (!currentUser?.id) {
+        setLoading(false);
+        return;
+      }
+      try {
+        const { data, error: loadError } = await withTimeout(
+          supabase
+            .from('subcontractor_payments')
+            .select('*, project:projects(id, name, company:companies(name)), items:subcontractor_po_items(*, task:tasks(id, title))')
+            .eq('profile_id', currentUser.id)
+            .order('date', { ascending: false }),
+          12000,
+          'Purchase orders load'
+        );
+
+        if (loadError) {
+          console.error('Failed to load purchase orders:', loadError);
+          setError(loadError.message || 'Failed to load purchase orders.');
+          setPurchaseOrders([]);
+        } else {
+          setPurchaseOrders(data || []);
+          setError('');
+        }
+      } catch (error) {
+        console.error('Purchase orders load failed:', error);
+        setError(error.message || 'Failed to load purchase orders.');
+        setPurchaseOrders([]);
+      } finally {
+        setLoading(false);
+      }
+    }
+
+    load();
+  }, [currentUser?.id]);
+
+  const handleApprove = async (po) => {
+    setSavingId(po.id);
+    const { data, error: approveError } = await supabase
+      .from('subcontractor_payments')
+      .update({ status: 'approved', approved_at: new Date().toISOString() })
+      .eq('id', po.id)
+      .eq('profile_id', currentUser.id)
+      .select('*, project:projects(id, name, company:companies(name)), items:subcontractor_po_items(*, task:tasks(id, title))')
+      .single();
+
+    if (approveError) {
+      alert(`Failed to approve PO: ${approveError.message}`);
+    } else if (data) {
+      setPurchaseOrders(prev => prev.map(row => row.id === po.id ? data : row));
+    }
+    setSavingId('');
+  };
+
+  return (
+    <Layout>
+      <div className="page-header">
+        <div>
+          <div className="page-title">Purchase Orders</div>
+          <div className="page-subtitle">Review and approve subcontractor work orders assigned to you.</div>
+        </div>
+      </div>
+
+      {loading ? (
+        <p style={{ color: 'var(--text-muted)' }}>Loading...</p>
+      ) : error ? (
+        <div className="card" style={{ color: 'var(--danger)' }}>{error}</div>
+      ) : purchaseOrders.length === 0 ? (
+        <div className="empty-state">
+          <h3>No purchase orders</h3>
+          <p>New POs will appear here when the Fourge team sends them.</p>
+        </div>
+      ) : (
+        <div style={{ display: 'grid', gap: 12 }}>
+          {purchaseOrders.map(po => (
+            <div key={po.id} className="card">
+              <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 16, marginBottom: 12 }}>
+                <div>
+                  <div style={{ fontSize: 12, color: 'var(--text-muted)', fontWeight: 700, textTransform: 'uppercase' }}>
+                    {po.po_number || 'Purchase Order'}
+                  </div>
+                  <div className="card-title" style={{ marginBottom: 4 }}>{po.project?.name || 'Subcontractor Work'}</div>
+                  <div style={{ color: 'var(--text-muted)', fontSize: 13 }}>
+                    {po.project?.company?.name || 'Fourge Branding'} · {new Date(po.date).toLocaleDateString()}
+                    {po.due_date ? ` · Due ${new Date(po.due_date).toLocaleDateString()}` : ''}
+                  </div>
+                </div>
+                <span className={`badge badge-${poStatusColor[po.status] || 'not_started'}`}>
+                  {poStatusLabel[po.status] || po.status}
+                </span>
+              </div>
+
+              <div style={{ display: 'grid', gap: 10 }}>
+                <div>
+                  <div style={{ fontSize: 11, fontWeight: 700, color: 'var(--text-muted)', textTransform: 'uppercase', marginBottom: 4 }}>Scope</div>
+                  <div style={{ whiteSpace: 'pre-wrap' }}>{po.description}</div>
+                </div>
+                {po.items?.length > 0 && (
+                  <div>
+                    <div style={{ fontSize: 11, fontWeight: 700, color: 'var(--text-muted)', textTransform: 'uppercase', marginBottom: 4 }}>Line Items</div>
+                    <div style={{ border: '1px solid var(--border)', borderRadius: 8, overflow: 'hidden' }}>
+                      {po.items
+                        .slice()
+                        .sort((a, b) => Number(a.sort_order || 0) - Number(b.sort_order || 0))
+                        .map(item => (
+                          <div key={item.id} style={{ display: 'grid', gridTemplateColumns: '1fr auto', gap: 12, padding: '10px 12px', borderBottom: '1px solid var(--border)' }}>
+                            <div>
+                              <div style={{ fontWeight: 700 }}>{item.description || item.task?.title}</div>
+                              {item.task?.title && item.description !== item.task.title && (
+                                <div style={{ color: 'var(--text-muted)', fontSize: 12 }}>{item.task.title}</div>
+                              )}
+                            </div>
+                            <div style={{ fontWeight: 800 }}>${Number(item.amount).toFixed(2)}</div>
+                          </div>
+                        ))}
+                    </div>
+                  </div>
+                )}
+                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, minmax(0, 1fr))', gap: 10 }}>
+                  <div>
+                    <div style={{ fontSize: 11, fontWeight: 700, color: 'var(--text-muted)', textTransform: 'uppercase' }}>Amount</div>
+                    <div style={{ fontWeight: 800 }}>${Number(po.amount).toFixed(2)}</div>
+                  </div>
+                  <div>
+                    <div style={{ fontSize: 11, fontWeight: 700, color: 'var(--text-muted)', textTransform: 'uppercase' }}>Terms</div>
+                    <div>{po.terms || 'Net 15'}</div>
+                  </div>
+                  <div>
+                    <div style={{ fontSize: 11, fontWeight: 700, color: 'var(--text-muted)', textTransform: 'uppercase' }}>Paid</div>
+                    <div>{po.paid_at ? new Date(po.paid_at).toLocaleDateString() : 'Not paid'}</div>
+                  </div>
+                </div>
+                {po.notes && (
+                  <div style={{ color: 'var(--text-muted)', fontSize: 13 }}>{po.notes}</div>
+                )}
+              </div>
+
+              {po.status === 'sent' && (
+                <div style={{ marginTop: 14, display: 'flex', justifyContent: 'flex-end' }}>
+                  <button className="btn btn-primary btn-sm" onClick={() => handleApprove(po)} disabled={savingId === po.id}>
+                    {savingId === po.id ? 'Approving...' : 'Approve PO'}
+                  </button>
+                </div>
+              )}
+            </div>
+          ))}
+        </div>
+      )}
+    </Layout>
+  );
+}
diff --git a/src/pages/team/BrandBook.jsx b/src/pages/team/BrandBook.jsx
index 59e7484..5fad2b4 100644
--- a/src/pages/team/BrandBook.jsx
+++ b/src/pages/team/BrandBook.jsx
@@ -1,7 +1,10 @@
 import { useState, useEffect, useRef } from 'react';
 import Layout from '../../components/Layout';
+import LoadingButton from '../../components/LoadingButton';
 import { supabase } from '../../lib/supabase';
 import { generateBrandBookEditorPDF } from '../../lib/brandBookEditor';
+import { cleanupBrandBookStorage } from '../../lib/deleteHelpers';
+import { archiveBrandBooksToLocalZip, restoreBrandBookArchive } from '../../lib/archiveHelpers';
 
 const BUCKET = 'brand-books';
 
@@ -10,17 +13,20 @@ const EMPTY_SIGN = () => ({
   signNumber: '',
   type: '',
   recommendation: '',
-  location: '',
-  width: '',
-  height: '',
-  material: '',
-  illumination: '',
-  condition: '',
-  mountType: '',
+  specifications: '',
   notes: '',
   photo: null,
   photoPath: '',
   _photoPreview: '',
+  existingPhoto: null,
+  existingPhotoPath: '',
+  _existingPhotoPreview: '',
+  recommendationPhoto: null,
+  recommendationPhotoPath: '',
+  _recommendationPhotoPreview: '',
+  signDetailPhoto: null,
+  signDetailPhotoPath: '',
+  _signDetailPhotoPreview: '',
 });
 
 const EMPTY_BOOK_INFO = {
@@ -50,6 +56,51 @@ const TEMPLATE_OPTIONS = [
   { value: 'bolchoz', label: 'Bolchoz Sign Solutions' },
 ];
 
+const PHOTO_FILE_ACCEPT = 'image/*,.heic,.heif,.avif,.tif,.tiff,.bmp,.webp,.jpeg,.jpg,.png,.gif';
+const PHOTO_FILE_EXTENSIONS = new Set(['heic', 'heif', 'avif', 'tif', 'tiff', 'bmp', 'webp', 'jpeg', 'jpg', 'png', 'gif']);
+const MAPBOX_TOKEN = import.meta.env.VITE_MAPBOX_TOKEN || '';
+
+const normalizeRevision = (value) => {
+  const digits = String(value ?? '').replace(/\D/g, '').slice(0, 2);
+  if (!digits) return '00';
+  return digits.padStart(2, '0');
+};
+
+const isPhotoFile = (file) => {
+  if (!file) return false;
+  if (file.type?.startsWith('image/')) return true;
+  const extension = file.name?.split('.').pop()?.toLowerCase();
+  return extension ? PHOTO_FILE_EXTENSIONS.has(extension) : false;
+};
+
+const getMapboxCoordinates = async (address) => {
+  const features = await getMapboxAddressSuggestions(address, 1);
+  const coordinates = features[0]?.center;
+  if (!coordinates || coordinates.length < 2) throw new Error('No map result found for that address.');
+  return coordinates;
+};
+
+const getMapboxAddressSuggestions = async (address, limit = 5) => {
+  const params = new URLSearchParams({
+    access_token: MAPBOX_TOKEN,
+    autocomplete: 'true',
+    country: 'us',
+    limit: String(limit),
+    types: 'address,place,postcode,locality,neighborhood,poi',
+  });
+  const response = await fetch(`https://api.mapbox.com/geocoding/v5/mapbox.places/${encodeURIComponent(address)}.json?${params.toString()}`);
+  if (!response.ok) throw new Error('Unable to find that address.');
+  const data = await response.json();
+  return data.features || [];
+};
+
+const buildStaticMapUrl = ([lng, lat], style = 'satellite-streets-v12', zoom = 18) => {
+  if (!MAPBOX_TOKEN || lng == null || lat == null) return '';
+  const marker = `pin-s+f5a523(${lng},${lat})`;
+  const camera = `${lng},${lat},${zoom},0`;
+  return `https://api.mapbox.com/styles/v1/mapbox/${style}/static/${marker}/${camera}/700x467@2x?access_token=${encodeURIComponent(MAPBOX_TOKEN)}`;
+};
+
 // ─── Helpers ──────────────────────────────────────────────────────────────────
 const getSignedUrl = async (path) => {
   if (!path) return null;
@@ -75,9 +126,16 @@ export default function BrandBook() {
   const [siteMapFile, setSiteMapFile] = useState(null);
   const [siteMapPath, setSiteMapPath] = useState('');
   const [siteMapPreview, setSiteMapPreview] = useState(null);
+  const [autoMapAddress, setAutoMapAddress] = useState('');
+  const [autoMapLoading, setAutoMapLoading] = useState(false);
+  const [autoMapError, setAutoMapError] = useState('');
+  const [siteMapManuallyCleared, setSiteMapManuallyCleared] = useState(false);
+  const [inventoryMapManuallyCleared, setInventoryMapManuallyCleared] = useState(false);
+  const [addressSuggestions, setAddressSuggestions] = useState([]);
+  const [addressSuggesting, setAddressSuggesting] = useState(false);
+  const [showAddressSuggestions, setShowAddressSuggestions] = useState(false);
   const [signs, setSigns] = useState([EMPTY_SIGN()]);
   const [photoItems, setPhotoItems] = useState([]);
-  const [expandedSign, setExpandedSign] = useState(0);
 
   const [inventoryMapFile, setInventoryMapFile] = useState(null);
   const [inventoryMapPath, setInventoryMapPath] = useState('');
@@ -98,20 +156,172 @@ export default function BrandBook() {
   const sitePhotosRef = useRef();
   const projectLogoRef = useRef();
   const clientLogoRef = useRef();
+  const restoreArchiveRef = useRef();
+  const [archivingSelected, setArchivingSelected] = useState(false);
+  const [archiveStatus, setArchiveStatus] = useState('');
+  const [restoringArchive, setRestoringArchive] = useState(false);
+  const [restoreStatus, setRestoreStatus] = useState('');
+  const [selectedBookIds, setSelectedBookIds] = useState([]);
+  const [filterCompany, setFilterCompany] = useState('');
 
   useEffect(() => {
     supabase.from('companies').select('id, name').order('name').then(({ data }) => setClients(data || []));
     fetchBooks();
   }, []);
 
+  useEffect(() => {
+    const address = bookInfo.customerAddress.trim();
+    if (!address || autoMapAddress === address) return undefined;
+    if ((siteMapManuallyCleared || siteMapPath || (siteMapFile && !autoMapAddress))
+      && (inventoryMapManuallyCleared || inventoryMapPath || (inventoryMapFile && !autoMapAddress))) return undefined;
+
+    const timeoutId = setTimeout(() => {
+      if (address.includes(',') && address.length >= 12) {
+        loadMapsFromAddress(address, { silent: true });
+      }
+    }, 900);
+
+    return () => clearTimeout(timeoutId);
+  }, [
+    bookInfo.customerAddress,
+    siteMapPath,
+    siteMapFile,
+    siteMapManuallyCleared,
+    inventoryMapPath,
+    inventoryMapFile,
+    inventoryMapManuallyCleared,
+    autoMapAddress,
+  ]);
+
+  useEffect(() => {
+    const query = bookInfo.customerAddress.trim();
+    if (!MAPBOX_TOKEN || query.length < 3) {
+      setAddressSuggestions([]);
+      setAddressSuggesting(false);
+      return undefined;
+    }
+
+    let cancelled = false;
+    const timeoutId = setTimeout(async () => {
+      setAddressSuggesting(true);
+      try {
+        const suggestions = await getMapboxAddressSuggestions(query, 5);
+        if (!cancelled) setAddressSuggestions(suggestions);
+      } catch {
+        if (!cancelled) setAddressSuggestions([]);
+      } finally {
+        if (!cancelled) setAddressSuggesting(false);
+      }
+    }, 250);
+
+    return () => {
+      cancelled = true;
+      clearTimeout(timeoutId);
+    };
+  }, [bookInfo.customerAddress]);
+
   const fetchBooks = async () => {
     setLoadingBooks(true);
     const { data } = await supabase.from('brand_books').select('*').order('updated_at', { ascending: false });
     setSavedBooks(data || []);
+    setSelectedBookIds(prev => prev.filter(id => (data || []).some(book => book.id === id)));
     setLoadingBooks(false);
   };
 
   const set = (field) => (e) => setBookInfo(b => ({ ...b, [field]: e.target.value }));
+  const handleRevisionChange = (e) => {
+    const digits = e.target.value.replace(/\D/g, '').slice(0, 2);
+    setBookInfo(b => ({ ...b, revision: digits }));
+  };
+  const handleRevisionBlur = () => {
+    setBookInfo(b => ({ ...b, revision: normalizeRevision(b.revision) }));
+  };
+
+  const loadMapsFromAddress = async (address = bookInfo.customerAddress, { silent = false, feature = null } = {}) => {
+    const trimmed = String(address || '').trim();
+    if (!trimmed) {
+      if (!silent) setAutoMapError('Enter a customer address first.');
+      return;
+    }
+    if (!MAPBOX_TOKEN) {
+      if (!silent) setAutoMapError('Mapbox token is not configured yet. Add VITE_MAPBOX_TOKEN in Vercel to enable automatic site maps.');
+      return;
+    }
+    if (autoMapLoading) return;
+
+    setAutoMapLoading(true);
+    setAutoMapError('');
+    try {
+      const coordinates = feature?.center || await getMapboxCoordinates(trimmed);
+      const shouldLoadSiteMap = !siteMapManuallyCleared || !siteMapFile;
+      const shouldLoadInventoryMap = !inventoryMapManuallyCleared || !inventoryMapFile;
+      const [siteResponse, inventoryResponse] = await Promise.all([
+        shouldLoadSiteMap ? fetch(buildStaticMapUrl(coordinates, 'satellite-streets-v12')) : Promise.resolve(null),
+        shouldLoadInventoryMap ? fetch(buildStaticMapUrl(coordinates, 'streets-v12', 18.2)) : Promise.resolve(null),
+      ]);
+      if ((siteResponse && !siteResponse.ok) || (inventoryResponse && !inventoryResponse.ok)) throw new Error('Unable to load map image.');
+      const [siteBlob, inventoryBlob] = await Promise.all([
+        siteResponse ? siteResponse.blob() : Promise.resolve(null),
+        inventoryResponse ? inventoryResponse.blob() : Promise.resolve(null),
+      ]);
+      if ((siteBlob && !siteBlob.type.startsWith('image/')) || (inventoryBlob && !inventoryBlob.type.startsWith('image/'))) throw new Error('Map service did not return an image.');
+
+      const fullAddress = feature?.place_name || trimmed;
+
+      setBookInfo(b => ({ ...b, customerAddress: fullAddress, siteAddress: fullAddress }));
+      if (siteBlob) {
+        const siteFile = new File([siteBlob], 'site-map.png', { type: siteBlob.type || 'image/png' });
+        setSiteMapFile(siteFile);
+        setSiteMapPath('');
+        setSiteMapPreview(URL.createObjectURL(siteFile));
+        setSiteMapManuallyCleared(false);
+      }
+      if (inventoryBlob) {
+        const inventoryFile = new File([inventoryBlob], 'inventory-map.png', { type: inventoryBlob.type || 'image/png' });
+        setInventoryMapFile(inventoryFile);
+        setInventoryMapPath('');
+        setInventoryMapPreview(URL.createObjectURL(inventoryFile));
+        setInventoryMapManuallyCleared(false);
+      }
+      setAutoMapAddress(fullAddress);
+      setShowAddressSuggestions(false);
+    } catch (error) {
+      setAutoMapError(error.message || 'Unable to load map for this address.');
+    } finally {
+      setAutoMapLoading(false);
+    }
+  };
+
+  const handleCustomerAddressChange = (e) => {
+    const value = e.target.value;
+    setBookInfo(b => ({ ...b, customerAddress: value, siteAddress: value }));
+    setAutoMapError('');
+    setSiteMapManuallyCleared(false);
+    setInventoryMapManuallyCleared(false);
+    setShowAddressSuggestions(true);
+  };
+
+  const handleSelectAddressSuggestion = (feature) => {
+    const fullAddress = feature.place_name || '';
+    setBookInfo(b => ({ ...b, customerAddress: fullAddress, siteAddress: fullAddress }));
+    setAddressSuggestions([]);
+    setShowAddressSuggestions(false);
+    loadMapsFromAddress(fullAddress, { feature });
+  };
+
+  const clearSiteMap = () => {
+    setSiteMapFile(null);
+    setSiteMapPath('');
+    setSiteMapPreview(null);
+    setSiteMapManuallyCleared(true);
+  };
+
+  const clearInventoryMap = () => {
+    setInventoryMapFile(null);
+    setInventoryMapPath('');
+    setInventoryMapPreview(null);
+    setInventoryMapManuallyCleared(true);
+  };
 
   const handleClientChange = async (e) => {
     const id = e.target.value;
@@ -134,6 +344,7 @@ export default function BrandBook() {
           clientContactEmail: co.contact_email || '',
           clientContactPhone: co.contact_phone || '',
           customerAddress: b.customerAddress || co.address || b.siteAddress || '',
+          siteAddress: b.siteAddress || b.customerAddress || co.address || '',
         }));
       }
     }
@@ -144,13 +355,18 @@ export default function BrandBook() {
     setSiteMapFile(null);
     setSiteMapPath('');
     setSiteMapPreview(null);
+    setAutoMapAddress('');
+    setAutoMapError('');
+    setSiteMapManuallyCleared(false);
+    setInventoryMapManuallyCleared(false);
+    setAddressSuggestions([]);
+    setShowAddressSuggestions(false);
     setInventoryMapFile(null);
     setInventoryMapPath('');
     setInventoryMapPreview(null);
     setSigns([EMPTY_SIGN()]);
     setPhotoItems([]);
     setCurrentId(null);
-    setExpandedSign(0);
     setNotification(null);
     setProjectLogoFile(null);
     setProjectLogoPath('');
@@ -166,8 +382,23 @@ export default function BrandBook() {
       getSignedUrl(book.project_logo_path),
     ]);
     const signsWithPreviews = await Promise.all((book.signs || []).map(async (sign) => {
-      const preview = await getSignedUrl(sign.photoPath);
-      return { ...sign, photo: null, _photoPreview: preview || '' };
+      const [preview, existingPreview, recommendationPreview, signDetailPreview] = await Promise.all([
+        getSignedUrl(sign.photoPath),
+        getSignedUrl(sign.existingPhotoPath),
+        getSignedUrl(sign.recommendationPhotoPath),
+        getSignedUrl(sign.signDetailPhotoPath),
+      ]);
+      return {
+        ...sign,
+        photo: null,
+        _photoPreview: preview || '',
+        existingPhoto: null,
+        _existingPhotoPreview: existingPreview || '',
+        recommendationPhoto: null,
+        _recommendationPhotoPreview: recommendationPreview || '',
+        signDetailPhoto: null,
+        _signDetailPhotoPreview: signDetailPreview || '',
+      };
     }));
     const surveyItems = await Promise.all((book.survey_photo_paths || []).map(async (path) => {
       const preview = await getSignedUrl(path);
@@ -186,7 +417,7 @@ export default function BrandBook() {
       siteAddress: book.site_address || '',
       bookDate: book.book_date || new Date().toISOString().split('T')[0],
       preparedBy: book.prepared_by || '',
-      revision: book.revision || '01',
+      revision: normalizeRevision(book.revision || '01'),
       template: book.template || 'fourge',
       creationDate: book.creation_date || new Date().toISOString().slice(0, 10),
       revisionDate: book.revision_date || '',
@@ -211,56 +442,83 @@ export default function BrandBook() {
     setSigns(signsWithPreviews.length > 0 ? signsWithPreviews : [EMPTY_SIGN()]);
     setPhotoItems(surveyItems);
     setCurrentId(book.id);
-    setExpandedSign(null);
     setView('form');
   };
 
-  const handleAddRevision = async (book) => {
-    setNotification(null);
-    const { siteMapSignedUrl, inventoryMapSignedUrl, projectLogoSignedUrl, signsWithPreviews, surveyItems } = await buildLoadedState(book);
-    const nextRev = String((parseInt(book.revision || '1', 10) + 1)).padStart(2, '0');
-    setBookInfo({
-      clientId: book.client_id || '',
-      clientName: book.client_name || '',
-      projectName: book.project_name || '',
-      siteAddress: book.site_address || '',
-      bookDate: new Date().toISOString().split('T')[0],
-      preparedBy: book.prepared_by || '',
-      revision: nextRev,
-      template: book.template || 'fourge',
-      creationDate: book.creation_date || new Date().toISOString().slice(0, 10),
-      revisionDate: new Date().toISOString().slice(0, 10),
-      customerName: book.customer_name || '',
-      customerAddress: book.customer_address || book.site_address || '',
-      clientLogoUrl: book.client_logo_url || '',
-      clientContactName: book.client_contact_name || '',
-      clientContactEmail: book.client_contact_email || '',
-      clientContactPhone: book.client_contact_phone || '',
-      approvedDate: '',
-      approvalNotes: '',
-    });
-    setSiteMapFile(null);
-    setSiteMapPath(book.site_map_path || '');
-    setSiteMapPreview(siteMapSignedUrl);
-    setInventoryMapFile(null);
-    setInventoryMapPath(book.inventory_map_path || '');
-    setInventoryMapPreview(inventoryMapSignedUrl);
-    setProjectLogoFile(null);
-    setProjectLogoPath(book.project_logo_path || '');
-    setProjectLogoPreview(projectLogoSignedUrl || '');
-    setSigns(signsWithPreviews.length > 0 ? signsWithPreviews : [EMPTY_SIGN()]);
-    setPhotoItems(surveyItems);
-    setCurrentId(null);
-    setExpandedSign(null);
-    setView('form');
-  };
-
-  const handleDelete = async (id) => {
+  const handleDelete = async (book) => {
     if (!window.confirm('Delete this brand book? This cannot be undone.')) return;
-    await supabase.from('brand_books').delete().eq('id', id);
+    await cleanupBrandBookStorage(book);
+    await supabase.from('brand_books').delete().eq('id', book.id);
     fetchBooks();
   };
 
+  const handleArchiveSelected = async () => {
+    if (!selectedBookIds.length) {
+      alert('Select at least one brand book to archive.');
+      return;
+    }
+    if (!window.confirm(`Download one archive for ${selectedBookIds.length} selected brand book${selectedBookIds.length === 1 ? '' : 's'}?`)) return;
+
+    setArchivingSelected(true);
+    try {
+      const selectedBooks = savedBooks.filter(book => selectedBookIds.includes(book.id));
+      const archive = await archiveBrandBooksToLocalZip(selectedBookIds, { onProgress: setArchiveStatus });
+      const shouldDelete = window.confirm(
+        `Archive downloaded as "${archive.filename}".\n\nRemove those ${archive.bookCount} brand book${archive.bookCount === 1 ? '' : 's'} from Supabase now?`
+      );
+
+      if (shouldDelete) {
+        for (const book of selectedBooks) {
+          await cleanupBrandBookStorage(book);
+        }
+        await supabase.from('brand_books').delete().in('id', selectedBookIds);
+        setSelectedBookIds([]);
+        await fetchBooks();
+        setArchiveStatus('');
+        alert(`Archived and removed ${archive.bookCount} brand book${archive.bookCount === 1 ? '' : 's'}.`);
+      }
+    } catch (error) {
+      alert(`Archive failed: ${error.message}`);
+    } finally {
+      setArchivingSelected(false);
+      setArchiveStatus('');
+    }
+  };
+
+  const handleRestoreArchive = async (e) => {
+    const file = e.target.files?.[0];
+    e.target.value = '';
+    if (!file) return;
+
+    setRestoringArchive(true);
+    try {
+      const result = await restoreBrandBookArchive(file, { onProgress: setRestoreStatus });
+      await fetchBooks();
+      alert(
+        result.unlinkedCount
+          ? `Restored ${result.bookCount} brand book${result.bookCount === 1 ? '' : 's'}. ${result.unlinkedCount} restored without a linked client record because the original company no longer exists.`
+          : `Restored ${result.bookCount} brand book${result.bookCount === 1 ? '' : 's'}.`
+      );
+    } catch (error) {
+      alert(`Restore failed: ${error.message}`);
+    } finally {
+      setRestoringArchive(false);
+      setRestoreStatus('');
+    }
+  };
+
+  const allSelected = savedBooks.length > 0 && selectedBookIds.length === savedBooks.length;
+  const toggleSelectedBook = (bookId) => {
+    setSelectedBookIds(prev => prev.includes(bookId)
+      ? prev.filter(id => id !== bookId)
+      : [...prev, bookId]
+    );
+  };
+
+  const toggleSelectAll = () => {
+    setSelectedBookIds(allSelected ? [] : savedBooks.map(book => book.id));
+  };
+
   const handleSave = async () => {
     if (!bookInfo.clientName.trim()) {
       setNotification({ type: 'error', msg: 'Please select a client.' });
@@ -303,8 +561,40 @@ export default function BrandBook() {
           photoPath = `${bookId}/sign-${sign._key}.${ext}`;
           await uploadFile(sign.photo, photoPath);
         }
-        const { photo, _photoPreview, ...rest } = sign;
-        return { ...rest, photoPath };
+
+        let existingPhotoPath = sign.existingPhotoPath || '';
+        if (sign.existingPhoto) {
+          const ext = sign.existingPhoto.name.split('.').pop().toLowerCase();
+          existingPhotoPath = `${bookId}/sign-${sign._key}-existing.${ext}`;
+          await uploadFile(sign.existingPhoto, existingPhotoPath);
+        }
+
+        let recommendationPhotoPath = sign.recommendationPhotoPath || '';
+        if (sign.recommendationPhoto) {
+          const ext = sign.recommendationPhoto.name.split('.').pop().toLowerCase();
+          recommendationPhotoPath = `${bookId}/sign-${sign._key}-recommendation.${ext}`;
+          await uploadFile(sign.recommendationPhoto, recommendationPhotoPath);
+        }
+
+        let signDetailPhotoPath = sign.signDetailPhotoPath || '';
+        if (sign.signDetailPhoto) {
+          const ext = sign.signDetailPhoto.name.split('.').pop().toLowerCase();
+          signDetailPhotoPath = `${bookId}/sign-${sign._key}-detail.${ext}`;
+          await uploadFile(sign.signDetailPhoto, signDetailPhotoPath);
+        }
+
+        const {
+          photo: _photo,
+          _photoPreview,
+          existingPhoto: _existingPhoto,
+          _existingPhotoPreview,
+          recommendationPhoto: _recommendationPhoto,
+          _recommendationPhotoPreview,
+          signDetailPhoto: _signDetailPhoto,
+          _signDetailPhotoPreview,
+          ...rest
+        } = sign;
+        return { ...rest, photoPath, existingPhotoPath, recommendationPhotoPath, signDetailPhotoPath };
       }));
 
       // Upload survey photos if new file
@@ -326,7 +616,7 @@ export default function BrandBook() {
         site_address: bookInfo.siteAddress,
         book_date: bookInfo.bookDate || null,
         prepared_by: bookInfo.preparedBy,
-        revision: bookInfo.revision,
+        revision: normalizeRevision(bookInfo.revision),
         template: bookInfo.template || 'fourge',
         site_map_path: finalSiteMapPath,
         inventory_map_path: finalInventoryMapPath || null,
@@ -349,6 +639,26 @@ export default function BrandBook() {
 
       const { error: upsertError } = await supabase.from('brand_books').upsert(dbData);
       if (upsertError) throw upsertError;
+      const savedSignsWithPreviews = await Promise.all(finalSigns.map(async (sign) => {
+        const [photoPreview, existingPhotoPreview, recommendationPhotoPreview, signDetailPhotoPreview] = await Promise.all([
+          getSignedUrl(sign.photoPath),
+          getSignedUrl(sign.existingPhotoPath),
+          getSignedUrl(sign.recommendationPhotoPath),
+          getSignedUrl(sign.signDetailPhotoPath),
+        ]);
+
+        return {
+          ...sign,
+          photo: null,
+          existingPhoto: null,
+          recommendationPhoto: null,
+          signDetailPhoto: null,
+          _photoPreview: photoPreview || '',
+          _existingPhotoPreview: existingPhotoPreview || '',
+          _recommendationPhotoPreview: recommendationPhotoPreview || '',
+          _signDetailPhotoPreview: signDetailPhotoPreview || '',
+        };
+      }));
       setCurrentId(bookId);
       setSiteMapPath(finalSiteMapPath);
       setSiteMapFile(null);
@@ -356,7 +666,7 @@ export default function BrandBook() {
       setInventoryMapFile(null);
       setProjectLogoPath(finalProjectLogoPath);
       setProjectLogoFile(null);
-      setSigns(finalSigns.map(s => ({ ...s, photo: null })));
+      setSigns(savedSignsWithPreviews);
       setPhotoItems(finalSurveyPaths.filter(Boolean).map((path, i) => ({
         file: null,
         path,
@@ -366,8 +676,9 @@ export default function BrandBook() {
       setNotification({ type: 'success', msg: '✓ Brand book saved!' });
     } catch (err) {
       setNotification({ type: 'error', msg: `Save failed: ${err.message}` });
+    } finally {
+      setSaving(false);
     }
-    setSaving(false);
   };
 
   const handleGenerate = async () => {
@@ -385,6 +696,9 @@ export default function BrandBook() {
       const signsWithSource = await Promise.all(signs.map(async s => ({
         ...s,
         photoSource: s.photo || (s.photoPath ? await getSignedUrl(s.photoPath) : null),
+        existingPhotoSource: s.existingPhoto || (s.existingPhotoPath ? await getSignedUrl(s.existingPhotoPath) : null),
+        recommendationPhotoSource: s.recommendationPhoto || (s.recommendationPhotoPath ? await getSignedUrl(s.recommendationPhotoPath) : null),
+        signDetailPhotoSource: s.signDetailPhoto || (s.signDetailPhotoPath ? await getSignedUrl(s.signDetailPhotoPath) : null),
       })));
       const sitePhotoSources = await Promise.all(photoItems.map(async item =>
         item.file || (item.path ? await getSignedUrl(item.path) : null)
@@ -398,7 +712,7 @@ export default function BrandBook() {
         siteAddress: bookInfo.siteAddress,
         bookDate: bookInfo.bookDate,
         preparedBy: bookInfo.preparedBy,
-        revision: bookInfo.revision,
+        revision: normalizeRevision(bookInfo.revision),
         siteMapSource,
         inventoryMapSource,
         signs: signsWithSource,
@@ -419,8 +733,9 @@ export default function BrandBook() {
       setNotification({ type: 'success', msg: '✓ Brand book PDF downloaded!' });
     } catch (err) {
       setNotification({ type: 'error', msg: `Failed to generate PDF: ${err.message}` });
+    } finally {
+      setGenerating(false);
     }
-    setGenerating(false);
   };
 
   // ── Project logo helpers ──────────────────────────────────────────────────────
@@ -467,12 +782,14 @@ export default function BrandBook() {
   // ── Sign helpers ─────────────────────────────────────────────────────────────
   const updateSign = (key, field, value) =>
     setSigns(prev => prev.map(s => s._key === key ? { ...s, [field]: value } : s));
-  const addSign = () => { setSigns(prev => [...prev, EMPTY_SIGN()]); setExpandedSign(signs.length); };
+  const addSign = () => { setSigns(prev => [...prev, EMPTY_SIGN()]); };
   const removeSign = (key) => setSigns(prev => prev.filter(s => s._key !== key));
-  const handleSignPhoto = (key, file) => {
-    updateSign(key, 'photo', file);
-    updateSign(key, '_photoPreview', URL.createObjectURL(file));
-    updateSign(key, 'photoPath', ''); // clear old path when new file selected
+  const handleSignPhoto = (key, field, file) => {
+    const previewField = `_${field}Preview`;
+    const pathField = `${field}Path`;
+    updateSign(key, field, file);
+    updateSign(key, previewField, URL.createObjectURL(file));
+    updateSign(key, pathField, '');
   };
 
   // ── Map helpers ───────────────────────────────────────────────────────────────
@@ -480,62 +797,182 @@ export default function BrandBook() {
     setSiteMapFile(file);
     setSiteMapPath('');
     setSiteMapPreview(URL.createObjectURL(file));
+    setAutoMapAddress('');
+    setAutoMapError('');
+    setSiteMapManuallyCleared(false);
   };
 
   const handleInventoryMapFile = (file) => {
     setInventoryMapFile(file);
     setInventoryMapPath('');
     setInventoryMapPreview(URL.createObjectURL(file));
+    setAutoMapAddress('');
+    setAutoMapError('');
+    setInventoryMapManuallyCleared(false);
   };
 
   // ── Survey photo helpers ──────────────────────────────────────────────────────
   const handleSitePhotos = (files) => {
     const newItems = Array.from(files)
-      .filter(f => f.type.startsWith('image/'))
+      .filter(isPhotoFile)
       .map(file => ({ file, path: '', preview: URL.createObjectURL(file) }));
     setPhotoItems(prev => [...prev, ...newItems]);
   };
   const removeSitePhoto = (i) => setPhotoItems(prev => prev.filter((_, idx) => idx !== i));
 
   // ── Unsaved changes indicator ─────────────────────────────────────────────────
-  const hasUnsavedPhotos = siteMapFile || inventoryMapFile || signs.some(s => s.photo) || photoItems.some(i => i.file);
+  const hasUnsavedPhotos = siteMapFile || inventoryMapFile || signs.some(s => (
+    s.photo || s.existingPhoto || s.recommendationPhoto || s.signDetailPhoto
+  )) || photoItems.some(i => i.file);
 
   // ═══════════════════════════════════════════════════════════════════════════════
   // LIST VIEW
   // ═══════════════════════════════════════════════════════════════════════════════
   if (view === 'list') {
+    const companyNames = [...new Set(savedBooks.map(book => book.client_name || clients.find(client => client.id === book.client_id)?.name).filter(Boolean))].sort();
+    const filteredBooks = savedBooks.filter(book => {
+      if (!filterCompany) return true;
+      const clientName = book.client_name || clients.find(client => client.id === book.client_id)?.name;
+      return clientName === filterCompany;
+    });
+
     return (
       <Layout>
         <div className="page-header">
           <div>
             <div className="page-title">
-              Brand Book
-              <span style={{ fontSize: 13, fontWeight: 500, color: 'var(--accent)', marginLeft: 8, padding: '2px 8px', border: '1px solid var(--accent)', borderRadius: 4 }}>beta</span>
+              Brand Book Maker
             </div>
             <div className="page-subtitle">Saved brand books — click to edit or add a revision.</div>
           </div>
-          <button className="btn btn-primary btn-sm" onClick={handleNew}>+ New Brand Book</button>
+          <div style={{ display: 'flex', gap: 8 }}>
+            <button className="btn btn-primary btn-sm" onClick={handleNew}>+ New Brand Book</button>
+          </div>
+          <input
+            ref={restoreArchiveRef}
+            type="file"
+            accept=".zip,application/zip"
+            style={{ display: 'none' }}
+            onChange={handleRestoreArchive}
+          />
+        </div>
+
+        <div className="card request-toolbar-card">
+          <div className="request-toolbar-section">
+            <div className="card-title" style={{ marginBottom: 10 }}>Archive</div>
+            <div className="request-toolbar-actions">
+              {savedBooks.length > 0 && (
+                <>
+                  <label className="request-select-all-label">
+                    <input type="checkbox" checked={allSelected} onChange={toggleSelectAll} />
+                    Select All
+                  </label>
+                  <button
+                    className="btn btn-outline btn-sm"
+                    onClick={handleArchiveSelected}
+                    disabled={archivingSelected || !selectedBookIds.length}
+                  >
+                    {archivingSelected ? 'Archiving...' : `Archive Selected (${selectedBookIds.length})`}
+                  </button>
+                </>
+              )}
+              <button
+                className="btn btn-outline btn-sm"
+                onClick={() => restoreArchiveRef.current?.click()}
+                disabled={restoringArchive}
+              >
+                {restoringArchive ? 'Restoring...' : 'Restore Brand Book'}
+              </button>
+            </div>
+            {archiveStatus && <div className="request-toolbar-status">{archiveStatus}</div>}
+            {restoreStatus && <div className="request-toolbar-status">{restoreStatus}</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
+                    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>
+          )}
         </div>
 
         {loadingBooks ? (
           <p style={{ padding: '24px 0', color: 'var(--text-muted)' }}>Loading...</p>
-        ) : savedBooks.length === 0 ? (
+        ) : filteredBooks.length === 0 ? (
           <div className="empty-state">
-            <h3>No brand books yet</h3>
-            <p>Create your first brand book to get started.</p>
+            <h3>{savedBooks.length === 0 ? 'No brand books yet' : 'No matching brand books'}</h3>
+            <p>{savedBooks.length === 0 ? 'Create your first brand book to get started.' : 'Try clearing the current company filter.'}</p>
             <button className="btn btn-primary" onClick={handleNew} style={{ marginTop: 16 }}>+ New Brand Book</button>
           </div>
         ) : (
-          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
-            {savedBooks.map(book => (
-              <BookListItem
-                key={book.id}
-                book={book}
-                onEdit={() => handleLoad(book)}
-                onRevision={() => handleAddRevision(book)}
-                onDelete={() => handleDelete(book.id)}
-              />
-            ))}
+          <div className="table-wrapper">
+            <table>
+              <thead>
+                <tr>
+                  <th></th>
+                  <th>Name</th>
+                  <th>Revision</th>
+                  <th>Sign Count</th>
+                  <th>Client</th>
+                  <th>Updated</th>
+                  <th></th>
+                </tr>
+              </thead>
+              <tbody>
+                {filteredBooks.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
+                    ? new Date(book.updated_at).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })
+                    : '—';
+
+                  return (
+                    <tr key={book.id} onClick={() => handleLoad(book)} style={{ cursor: 'pointer' }}>
+                      <td onClick={e => e.stopPropagation()}>
+                        <input
+                          type="checkbox"
+                          checked={selectedBookIds.includes(book.id)}
+                          onChange={() => toggleSelectedBook(book.id)}
+                          onClick={e => e.stopPropagation()}
+                        />
+                      </td>
+                      <td style={{ fontWeight: 600 }}>{book.project_name || 'Brand Book'}</td>
+                      <td>{`R${String(book.revision || '01').padStart(2, '0')}`}</td>
+                      <td>{signCount}</td>
+                      <td>{clientName}</td>
+                      <td>{updated}</td>
+                      <td onClick={e => e.stopPropagation()}>
+                        <button
+                          className="btn btn-outline btn-sm"
+                          style={{ color: 'var(--danger)', borderColor: 'var(--danger)' }}
+                          onClick={() => handleDelete(book)}
+                        >
+                          Delete
+                        </button>
+                      </td>
+                    </tr>
+                  );
+                })}
+              </tbody>
+            </table>
           </div>
         )}
       </Layout>
@@ -552,7 +989,7 @@ export default function BrandBook() {
         <div>
           <div className="page-title">
             {currentId
-              ? `${bookInfo.clientName || 'Brand Book'} — ${bookInfo.projectName || ''} R${String(bookInfo.revision).padStart(2, '0')}`
+              ? `${bookInfo.projectName || 'Brand Book'} R${String(bookInfo.revision).padStart(2, '0')}`
               : 'New Brand Book'}
           </div>
           <div className="page-subtitle">
@@ -564,11 +1001,9 @@ export default function BrandBook() {
           <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
           <button className="btn btn-outline btn-sm" onClick={() => { if (window.confirm('Discard changes?')) { resetForm(); setView('list'); } }}>Discard</button>
           <button className="btn btn-outline btn-sm" onClick={handleSave} disabled={saving}>
-            {saving ? 'Saving...' : '💾 Save'}
-          </button>
-          <button className="btn btn-primary btn-sm" onClick={handleGenerate} disabled={generating}>
-            {generating ? 'Generating...' : '⬇ Generate PDF'}
+            {saving ? 'Saving...' : 'Save'}
           </button>
+          <LoadingButton className="btn btn-primary btn-sm" loading={generating} loadingText="Generating..." onClick={handleGenerate}>Generate PDF</LoadingButton>
           </div>
           {notification && (
             <span style={{ fontSize: 13, color: notification.type === 'error' ? 'var(--danger, #dc2626)' : 'var(--success, #16a34a)' }}>
@@ -602,6 +1037,23 @@ export default function BrandBook() {
               {TEMPLATE_OPTIONS.map(t => <option key={t.value} value={t.value}>{t.label}</option>)}
             </select>
           </div>
+          <div className="form-group" style={{ maxWidth: 180 }}>
+            <label>Revision</label>
+            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+              <span style={{ fontWeight: 600, color: 'var(--text-primary)' }}>R</span>
+              <input
+                type="text"
+                inputMode="numeric"
+                pattern="[0-9]*"
+                maxLength={2}
+                value={bookInfo.revision}
+                onChange={handleRevisionChange}
+                onBlur={handleRevisionBlur}
+                placeholder="00"
+                style={{ maxWidth: 88 }}
+              />
+            </div>
+          </div>
         </div>
 
         {/* ── COVER PAGE ───────────────────────────────────────────────────── */}
@@ -624,7 +1076,7 @@ export default function BrandBook() {
                     Remove
                   </button>
                 )}
-                <input ref={projectLogoRef} type="file" accept="image/*" style={{ display: 'none' }} onChange={handleProjectLogoUpload} />
+                <input ref={projectLogoRef} type="file" accept={PHOTO_FILE_ACCEPT} style={{ display: 'none' }} onChange={handleProjectLogoUpload} />
               </div>
             </div>
           </div>
@@ -649,7 +1101,72 @@ export default function BrandBook() {
             </div>
             <div className="form-group">
               <label>Customer Address <span style={{ fontWeight: 400, color: 'var(--text-muted)' }}>(optional)</span></label>
-              <input type="text" placeholder="e.g. 123 Main St, City, State 00000" value={bookInfo.customerAddress} onChange={set('customerAddress')} />
+              <div style={{ position: 'relative' }}>
+                <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
+                  <input
+                    type="text"
+                    placeholder="e.g. 123 Main St, City, State 00000"
+                    value={bookInfo.customerAddress}
+                    onChange={handleCustomerAddressChange}
+                    onFocus={() => setShowAddressSuggestions(true)}
+                    style={{ margin: 0 }}
+                  />
+                  <LoadingButton
+                    className="btn btn-outline btn-sm"
+                    loading={autoMapLoading}
+                    disabled={autoMapLoading || !bookInfo.customerAddress.trim()}
+                    loadingText="Loading..."
+                    onClick={() => loadMapsFromAddress()}
+                  >
+                    Load Maps
+                  </LoadingButton>
+                </div>
+                {showAddressSuggestions && (addressSuggestions.length > 0 || addressSuggesting) && (
+                  <div
+                    style={{
+                      position: 'absolute',
+                      top: 'calc(100% + 4px)',
+                      left: 0,
+                      right: 0,
+                      zIndex: 20,
+                      border: '1px solid var(--border)',
+                      borderRadius: 8,
+                      background: 'var(--card-bg)',
+                      boxShadow: '0 16px 36px rgba(0,0,0,0.28)',
+                      overflow: 'hidden',
+                    }}
+                  >
+                    {addressSuggesting && (
+                      <div style={{ padding: '10px 12px', fontSize: 12, color: 'var(--text-muted)' }}>Searching...</div>
+                    )}
+                    {addressSuggestions.map(feature => (
+                      <button
+                        key={feature.id}
+                        type="button"
+                        onClick={() => handleSelectAddressSuggestion(feature)}
+                        style={{
+                          display: 'block',
+                          width: '100%',
+                          textAlign: 'left',
+                          padding: '10px 12px',
+                          border: 'none',
+                          borderTop: '1px solid var(--border)',
+                          background: 'transparent',
+                          color: 'var(--text-primary)',
+                          cursor: 'pointer',
+                          fontFamily: 'inherit',
+                          fontSize: 13,
+                        }}
+                      >
+                        {feature.place_name}
+                      </button>
+                    ))}
+                  </div>
+                )}
+              </div>
+              {autoMapError && (
+                <div style={{ fontSize: 12, color: 'var(--danger)', marginTop: 6 }}>{autoMapError}</div>
+              )}
             </div>
           </div>
 
@@ -677,7 +1194,7 @@ export default function BrandBook() {
                   {uploadingClientLogo ? 'Uploading...' : bookInfo.clientLogoUrl ? 'Replace Logo' : 'Upload Logo'}
                 </button>
                 {!bookInfo.clientId && <span style={{ marginLeft: 10, fontSize: 12, color: 'var(--text-muted)' }}>Select a client first</span>}
-                <input ref={clientLogoRef} type="file" accept="image/*" style={{ display: 'none' }} onChange={handleClientLogoUpload} />
+                <input ref={clientLogoRef} type="file" accept={PHOTO_FILE_ACCEPT} style={{ display: 'none' }} onChange={handleClientLogoUpload} />
               </div>
             </div>
           </div>
@@ -719,7 +1236,7 @@ export default function BrandBook() {
             <SiteMapDropZone
               preview={siteMapPreview}
               onFile={handleSiteMapFile}
-              onClear={() => { setSiteMapFile(null); setSiteMapPath(''); setSiteMapPreview(null); }}
+              onClear={clearSiteMap}
               inputRef={siteMapRef}
             />
           </div>
@@ -727,13 +1244,13 @@ export default function BrandBook() {
 
         {/* ── INVENTORY MAP ─────────────────────────────────────────────────── */}
         <div className="card">
-          <div className="card-title">Sign Inventory Map</div>
+          <div className="card-title">Site Map</div>
           <div className="form-group">
             <label>Inventory Map Image <span style={{ fontWeight: 400, color: 'var(--text-muted)' }}>(shown on the left side of the sign inventory page — different from the site map)</span></label>
             <SiteMapDropZone
               preview={inventoryMapPreview}
               onFile={handleInventoryMapFile}
-              onClear={() => { setInventoryMapFile(null); setInventoryMapPath(''); setInventoryMapPreview(null); }}
+              onClear={clearInventoryMap}
               inputRef={inventoryMapRef}
             />
           </div>
@@ -751,16 +1268,17 @@ export default function BrandBook() {
                 key={sign._key}
                 sign={sign}
                 index={i}
-                expanded={expandedSign === i}
-                onToggle={() => setExpandedSign(expandedSign === i ? null : i)}
                 onChange={(field, val) => updateSign(sign._key, field, val)}
-                onPhotoChange={(file) => handleSignPhoto(sign._key, file)}
+                onPhotoChange={(field, file) => handleSignPhoto(sign._key, field, file)}
                 onRemove={() => removeSign(sign._key)}
                 canRemove={signs.length > 1}
+                template={bookInfo.template}
               />
             ))}
           </div>
-          <button className="btn btn-outline btn-sm" onClick={addSign} style={{ marginTop: 12 }}>+ Add Sign</button>
+          <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: 12 }}>
+            <button className="btn btn-outline btn-sm" onClick={addSign}>+ Add Sign</button>
+          </div>
         </div>
 
         {/* ── SITE PHOTOS ───────────────────────────────────────────────────── */}
@@ -782,12 +1300,13 @@ export default function BrandBook() {
       {/* Bottom actions */}
       <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 8, marginTop: 24, paddingBottom: 40 }}>
         <div style={{ display: 'flex', gap: 8 }}>
-          <button className="btn btn-outline" onClick={handleSave} disabled={saving}>
-            {saving ? 'Saving...' : '💾 Save Brand Book'}
+          <button className="btn btn-outline btn-sm" onClick={() => { if (window.confirm('Discard changes?')) { resetForm(); setView('list'); } }}>
+            Discard
           </button>
-          <button className="btn btn-primary btn-lg" onClick={handleGenerate} disabled={generating}>
-            {generating ? 'Generating...' : '⬇ Generate Brand Book PDF'}
+          <button className="btn btn-outline btn-sm" onClick={handleSave} disabled={saving}>
+            {saving ? 'Saving...' : 'Save'}
           </button>
+          <LoadingButton className="btn btn-primary btn-sm" loading={generating} loadingText="Generating..." onClick={handleGenerate}>Generate PDF</LoadingButton>
         </div>
         {notification && (
           <span style={{ fontSize: 13, color: notification.type === 'error' ? 'var(--danger, #dc2626)' : 'var(--success, #16a34a)' }}>
@@ -800,96 +1319,33 @@ export default function BrandBook() {
 }
 
 // ─── Book List Item ───────────────────────────────────────────────────────────
-function BookListItem({ book, onEdit, onRevision, onDelete }) {
-  const signCount = Array.isArray(book.signs) ? book.signs.length : 0;
-  const date = book.book_date
-    ? new Date(book.book_date + 'T12:00:00').toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })
-    : null;
-  const updated = book.updated_at
-    ? new Date(book.updated_at).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })
-    : null;
-
-  return (
-    <div style={{
-      padding: '12px 16px',
-      border: '1px solid var(--border)',
-      borderRadius: 8,
-      background: 'var(--card-bg)',
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'space-between',
-      gap: 16,
-    }}>
-      <div style={{ flex: 1, minWidth: 0 }}>
-        <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
-          <span style={{ fontWeight: 700, fontSize: 14, color: 'var(--text-primary)' }}>{book.client_name}</span>
-          {book.project_name && (
-            <span style={{ fontSize: 13, color: 'var(--text-secondary)' }}>— {book.project_name}</span>
-          )}
-          <span style={{
-            fontSize: 11, fontWeight: 700, padding: '1px 7px',
-            background: 'var(--accent)', color: '#1a1a1a', borderRadius: 4,
-          }}>R{String(book.revision || '01').padStart(2, '0')}</span>
-          {book.template && book.template !== 'fourge' && (
-            <span style={{ fontSize: 11, padding: '1px 7px', background: 'var(--surface-2)', color: 'var(--text-muted)', borderRadius: 4, border: '1px solid var(--border)' }}>
-              {TEMPLATE_OPTIONS.find(t => t.value === book.template)?.label || book.template}
-            </span>
-          )}
-        </div>
-        <div style={{ fontSize: 12, color: 'var(--text-muted)', marginTop: 3, display: 'flex', gap: 12, flexWrap: 'wrap' }}>
-          {book.site_address && <span>📍 {book.site_address}</span>}
-          {signCount > 0 && <span>🪧 {signCount} sign{signCount !== 1 ? 's' : ''}</span>}
-          {date && <span>📅 {date}</span>}
-          {updated && <span style={{ color: 'var(--text-muted)', opacity: 0.7 }}>Saved {updated}</span>}
-        </div>
-      </div>
-      <div style={{ display: 'flex', gap: 6, flexShrink: 0 }}>
-        <button className="btn btn-outline btn-sm" onClick={onEdit}>Edit</button>
-        <button
-          className="btn btn-outline btn-sm"
-          onClick={onRevision}
-          title="Create a new revision based on this one"
-          style={{ color: 'var(--accent)', borderColor: 'var(--accent)' }}
-        >+ Revision</button>
-        <button
-          type="button"
-          onClick={onDelete}
-          style={{ background: 'none', border: 'none', color: 'var(--danger, #dc2626)', cursor: 'pointer', fontSize: 16, padding: '0 4px' }}
-        >✕</button>
-      </div>
-    </div>
-  );
-}
-
 // ─── Sign Card ────────────────────────────────────────────────────────────────
-function SignCard({ sign, index, expanded, onToggle, onChange, onPhotoChange, onRemove, canRemove }) {
+function SignCard({ sign, index, onChange, onPhotoChange, onRemove, canRemove, template }) {
   const photoInputRef = useRef();
+  const existingPhotoInputRef = useRef();
+  const recommendationPhotoInputRef = useRef();
+  const signDetailPhotoInputRef = useRef();
   const dragCounter = useRef(0);
   const [dragging, setDragging] = useState(false);
 
   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) => {
+  const handleDrop = (field) => (e) => {
     e.preventDefault(); dragCounter.current = 0; setDragging(false);
     const file = e.dataTransfer.files[0];
-    if (file && file.type.startsWith('image/')) onPhotoChange(file);
+    if (isPhotoFile(file)) onPhotoChange(field, file);
   };
 
-  const summary = [sign.type, sign.location].filter(Boolean).join(' — ') || 'New Sign';
-  const hasPhoto = sign._photoPreview;
+  const summary = [sign.type, sign.recommendation].filter(Boolean).join(' — ') || 'New Sign';
+  const hasPhoto = sign._photoPreview || sign._existingPhotoPreview || sign._recommendationPhotoPreview || sign._signDetailPhotoPreview;
 
   return (
     <div style={{ border: '1px solid var(--border)', borderRadius: 8, overflow: 'hidden' }}>
-      <button
-        type="button"
-        onClick={onToggle}
-        style={{
-          width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between',
-          padding: '10px 14px', background: 'var(--card-bg-2)', border: 'none', cursor: 'pointer',
-          fontFamily: 'inherit', borderBottom: expanded ? '1px solid var(--border)' : 'none',
-        }}
-      >
+      <div style={{
+        width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between',
+        padding: '10px 14px', background: 'var(--card-bg-2)', borderBottom: '1px solid var(--border)',
+      }}>
         <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
           <span style={{ fontSize: 10, fontWeight: 700, padding: '2px 8px', background: 'var(--accent)', color: '#1a1a1a', borderRadius: 4 }}>
             #{sign.signNumber || (index + 1)}
@@ -900,100 +1356,146 @@ function SignCard({ sign, index, expanded, onToggle, onChange, onPhotoChange, on
           {hasPhoto && <span style={{ fontSize: 11, color: 'var(--text-muted)' }}>📷</span>}
           {sign.photo && <span style={{ fontSize: 11, color: 'var(--accent)' }}>unsaved photo</span>}
           {canRemove && (
-            <span role="button" onClick={e => { e.stopPropagation(); onRemove(); }}
+            <span role="button" onClick={onRemove}
               style={{ fontSize: 13, color: 'var(--danger, #dc2626)', padding: '2px 6px', cursor: 'pointer' }}>✕</span>
           )}
-          <span style={{ fontSize: 11, color: 'var(--text-muted)' }}>{expanded ? '▲' : '▼'}</span>
         </div>
-      </button>
+      </div>
 
-      {expanded && (
-        <div style={{ padding: 16 }}>
-          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, marginBottom: 12 }}>
-            <div className="form-group" style={{ margin: 0 }}>
-              <label>Sign # / ID</label>
-              <input type="text" placeholder={`e.g. ${index + 1}`} value={sign.signNumber} onChange={e => onChange('signNumber', e.target.value)} />
-            </div>
-            <div className="form-group" style={{ margin: 0 }}>
-              <label>Existing Type</label>
-              <input type="text" placeholder="e.g. Monument, Channel Letter, Pylon…" value={sign.type} onChange={e => onChange('type', e.target.value)} />
-            </div>
-            <div className="form-group" style={{ margin: 0 }}>
-              <label>Recommendation</label>
-              <input type="text" placeholder="e.g. New Monument Sign" value={sign.recommendation} onChange={e => onChange('recommendation', e.target.value)} />
-            </div>
-            <div className="form-group" style={{ margin: 0 }}>
-              <label>Location</label>
-              <input type="text" placeholder="e.g. Main entrance, North parking lot" value={sign.location} onChange={e => onChange('location', e.target.value)} />
-            </div>
-            <div className="form-group" style={{ margin: 0 }}>
-              <label>Dimensions (inches)</label>
-              <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
-                <input type="text" placeholder='Width"' value={sign.width} onChange={e => onChange('width', e.target.value)} style={{ flex: 1 }} />
-                <span style={{ color: 'var(--text-muted)', fontSize: 12 }}>×</span>
-                <input type="text" placeholder='Height"' value={sign.height} onChange={e => onChange('height', e.target.value)} style={{ flex: 1 }} />
-              </div>
-            </div>
-          </div>
-          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 12, marginBottom: 12 }}>
-            <div className="form-group" style={{ margin: 0 }}>
-              <label>Material <span style={{ fontWeight: 400, color: 'var(--text-muted)' }}>placeholder</span></label>
-              <input type="text" placeholder="e.g. Aluminum, Acrylic" value={sign.material} onChange={e => onChange('material', e.target.value)} />
-            </div>
-            <div className="form-group" style={{ margin: 0 }}>
-              <label>Illumination <span style={{ fontWeight: 400, color: 'var(--text-muted)' }}>placeholder</span></label>
-              <input type="text" placeholder="e.g. LED, None, Neon" value={sign.illumination} onChange={e => onChange('illumination', e.target.value)} />
-            </div>
-            <div className="form-group" style={{ margin: 0 }}>
-              <label>Condition <span style={{ fontWeight: 400, color: 'var(--text-muted)' }}>placeholder</span></label>
-              <input type="text" placeholder="e.g. Good, Fair, Poor" value={sign.condition} onChange={e => onChange('condition', e.target.value)} />
-            </div>
-          </div>
-          <div style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 12, marginBottom: 12 }}>
-            <div className="form-group" style={{ margin: 0 }}>
-              <label>Mount Type <span style={{ fontWeight: 400, color: 'var(--text-muted)' }}>placeholder</span></label>
-              <input type="text" placeholder="e.g. Wall, Post, Ground" value={sign.mountType} onChange={e => onChange('mountType', e.target.value)} />
-            </div>
-            <div className="form-group" style={{ margin: 0 }}>
-              <label>Notes</label>
-              <input type="text" placeholder="Any additional observations…" value={sign.notes} onChange={e => onChange('notes', e.target.value)} />
-            </div>
+      <div style={{ padding: 16 }}>
+        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, marginBottom: 12 }}>
+          <div className="form-group" style={{ margin: 0 }}>
+            <label>Sign # / ID</label>
+            <input type="text" placeholder={`e.g. ${index + 1}`} value={sign.signNumber} onChange={e => onChange('signNumber', e.target.value)} />
           </div>
           <div className="form-group" style={{ margin: 0 }}>
-            <label>Sign Photo</label>
-            <div
-              onDragEnter={handleDragEnter} onDragLeave={handleDragLeave}
-              onDragOver={handleDragOver} onDrop={handleDrop}
-              onClick={() => photoInputRef.current?.click()}
-              style={{
-                border: `2px dashed ${dragging ? 'var(--accent)' : 'var(--border)'}`,
-                borderRadius: 8,
-                background: dragging ? 'rgba(245,165,35,0.05)' : 'var(--input-bg, var(--card-bg))',
-                padding: 12, cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 12,
-                transition: 'border-color 0.15s, background 0.15s', minHeight: 60,
-              }}
-            >
-              {sign._photoPreview ? (
-                <>
-                  <img src={sign._photoPreview} alt="sign" style={{ height: 60, width: 80, objectFit: 'cover', borderRadius: 4, flexShrink: 0 }} />
-                  <div>
-                    <div style={{ fontSize: 13, fontWeight: 500, color: 'var(--text-primary)' }}>
-                      {sign.photo ? sign.photo.name : 'Saved photo'}
-                    </div>
-                    <div style={{ fontSize: 11, color: 'var(--text-muted)', marginTop: 2 }}>Click to replace · drag a new photo</div>
-                  </div>
-                </>
-              ) : (
-                <div style={{ color: dragging ? 'var(--accent)' : 'var(--text-muted)', fontSize: 13 }}>
-                  {dragging ? '📂 Drop photo here' : '📷 Click to upload or drag & drop a photo'}
-                </div>
-              )}
-            </div>
-            <input ref={photoInputRef} type="file" accept="image/*" style={{ display: 'none' }}
-              onChange={e => { const f = e.target.files[0]; if (f) onPhotoChange(f); e.target.value = ''; }} />
+            <label>Existing Type</label>
+            <input type="text" placeholder="e.g. Monument, Channel Letter, Pylon…" value={sign.type} onChange={e => onChange('type', e.target.value)} />
+          </div>
+          <div className="form-group" style={{ margin: 0 }}>
+            <label>Recommendation</label>
+            <input type="text" placeholder="e.g. New Monument Sign" value={sign.recommendation} onChange={e => onChange('recommendation', e.target.value)} />
           </div>
         </div>
-      )}
+
+        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, marginBottom: 12 }}>
+          <div className="form-group" style={{ margin: 0 }}>
+            <label>Specifications</label>
+            <textarea
+              placeholder="Detailed specifications for the existing sign..."
+              value={sign.specifications}
+              onChange={e => onChange('specifications', e.target.value)}
+              style={{ minHeight: 90 }}
+            />
+          </div>
+          <div className="form-group" style={{ margin: 0 }}>
+            <label>Notes</label>
+            <textarea
+              placeholder="Additional notes..."
+              value={sign.notes}
+              onChange={e => onChange('notes', e.target.value)}
+              style={{ minHeight: 90 }}
+            />
+          </div>
+        </div>
+
+        {template === 'bolchoz' ? (
+          <div style={{ display: 'grid', gridTemplateColumns: 'minmax(220px, 1fr) minmax(420px, 2fr)', gap: 12 }}>
+            <PhotoField
+              label="Existing Photo"
+              preview={sign._existingPhotoPreview}
+              fileName={sign.existingPhoto?.name}
+              dragging={dragging}
+              inputRef={existingPhotoInputRef}
+              onDragEnter={handleDragEnter}
+              onDragLeave={handleDragLeave}
+              onDragOver={handleDragOver}
+              onDrop={handleDrop('existingPhoto')}
+              onPick={(file) => onPhotoChange('existingPhoto', file)}
+            />
+            <CombinedMockupPhotoField
+              recommendationPreview={sign._recommendationPhotoPreview}
+              recommendationFileName={sign.recommendationPhoto?.name}
+              signDetailPreview={sign._signDetailPhotoPreview}
+              signDetailFileName={sign.signDetailPhoto?.name}
+              baseSourceImage={sign._existingPhotoPreview || sign._photoPreview || null}
+              dragging={dragging}
+              recommendationInputRef={recommendationPhotoInputRef}
+              signDetailInputRef={signDetailPhotoInputRef}
+              onDragEnter={handleDragEnter}
+              onDragLeave={handleDragLeave}
+              onDragOver={handleDragOver}
+              onRecommendationDrop={handleDrop('recommendationPhoto')}
+              onSignDetailDrop={handleDrop('signDetailPhoto')}
+              onRecommendationPick={(file) => onPhotoChange('recommendationPhoto', file)}
+              onSignDetailPick={(file) => onPhotoChange('signDetailPhoto', file)}
+            />
+          </div>
+        ) : (
+          <PhotoField
+            label="Sign Photo"
+            preview={sign._photoPreview}
+            fileName={sign.photo?.name}
+            dragging={dragging}
+            inputRef={photoInputRef}
+            onDragEnter={handleDragEnter}
+            onDragLeave={handleDragLeave}
+            onDragOver={handleDragOver}
+            onDrop={handleDrop('photo')}
+            onPick={(file) => onPhotoChange('photo', file)}
+          />
+        )}
+      </div>
+    </div>
+  );
+}
+
+function PhotoField({ label, preview, fileName, dragging, inputRef, onDragEnter, onDragLeave, onDragOver, onDrop, onPick }) {
+  return (
+    <div className="form-group" style={{ margin: 0 }}>
+      <label>{label}</label>
+      <div
+        onDragEnter={onDragEnter}
+        onDragLeave={onDragLeave}
+        onDragOver={onDragOver}
+        onDrop={onDrop}
+        onClick={() => inputRef.current?.click()}
+        style={{
+          border: `2px dashed ${dragging ? 'var(--accent)' : 'var(--border)'}`,
+          borderRadius: 8,
+          background: dragging ? 'rgba(245,165,35,0.05)' : 'var(--input-bg, var(--card-bg))',
+          padding: 12,
+          cursor: 'pointer',
+          display: 'flex',
+          alignItems: 'center',
+          gap: 12,
+          transition: 'border-color 0.15s, background 0.15s',
+          minHeight: 60,
+        }}
+      >
+        {preview ? (
+          <>
+            <img src={preview} alt={label} style={{ height: 60, width: 80, objectFit: 'cover', borderRadius: 4, flexShrink: 0 }} />
+            <div>
+              <div style={{ fontSize: 13, fontWeight: 500, color: 'var(--text-primary)' }}>
+                {fileName || 'Saved photo'}
+              </div>
+              <div style={{ fontSize: 11, color: 'var(--text-muted)', marginTop: 2 }}>Click to replace · drag a new photo</div>
+            </div>
+          </>
+        ) : (
+          <div style={{ color: dragging ? 'var(--accent)' : 'var(--text-muted)', fontSize: 13 }}>
+            {dragging ? '📂 Drop photo here' : '📷 Click to upload or drag & drop a photo'}
+          </div>
+        )}
+      </div>
+      <input
+        ref={inputRef}
+        type="file"
+        accept={PHOTO_FILE_ACCEPT}
+        style={{ display: 'none' }}
+        onChange={e => { const f = e.target.files[0]; if (f) onPick(f); e.target.value = ''; }}
+      />
     </div>
   );
 }
@@ -1008,7 +1510,7 @@ function SiteMapDropZone({ preview, onFile, onClear, inputRef }) {
   const handleDrop = (e) => {
     e.preventDefault(); dragCounter.current = 0; setDragging(false);
     const file = e.dataTransfer.files[0];
-    if (file && file.type.startsWith('image/')) onFile(file);
+    if (isPhotoFile(file)) onFile(file);
   };
 
   if (preview) {
@@ -1039,7 +1541,7 @@ function SiteMapDropZone({ preview, onFile, onClear, inputRef }) {
       >
         {dragging ? '📂 Drop site map here' : '🗺 Click to upload or drag & drop a site map image'}
       </div>
-      <input ref={inputRef} type="file" accept="image/*" style={{ display: 'none' }}
+      <input ref={inputRef} type="file" accept={PHOTO_FILE_ACCEPT} style={{ display: 'none' }}
         onChange={e => { const f = e.target.files[0]; if (f) onFile(f); e.target.value = ''; }} />
     </>
   );
@@ -1071,7 +1573,7 @@ function SitePhotosDropZone({ photoItems, onFiles, onRemove, inputRef }) {
       >
         {dragging ? '📂 Drop photos here' : '📷 Click to upload or drag & drop photos (select multiple)'}
       </div>
-      <input ref={inputRef} type="file" accept="image/*" multiple style={{ display: 'none' }}
+      <input ref={inputRef} type="file" accept={PHOTO_FILE_ACCEPT} multiple style={{ display: 'none' }}
         onChange={e => { if (e.target.files.length) { onFiles(e.target.files); e.target.value = ''; } }} />
       {photoItems.length > 0 && (
         <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
@@ -1106,3 +1608,2235 @@ function SitePhotosDropZone({ photoItems, onFiles, onRemove, inputRef }) {
     </div>
   );
 }
+
+// ─── Combined Mockup Photo Field (one editor for both outputs) ────────────────
+function CombinedMockupPhotoField({
+  recommendationPreview,
+  recommendationFileName,
+  signDetailPreview,
+  signDetailFileName,
+  baseSourceImage,
+  dragging,
+  recommendationInputRef,
+  signDetailInputRef,
+  onDragEnter,
+  onDragLeave,
+  onDragOver,
+  onRecommendationDrop,
+  onSignDetailDrop,
+  onRecommendationPick,
+  onSignDetailPick,
+}) {
+  const [showEditor, setShowEditor] = useState(false);
+
+  const targetSource = (target) => {
+    if (target === 'recommendation') return recommendationPreview || baseSourceImage;
+    return signDetailPreview || recommendationPreview || baseSourceImage;
+  };
+
+  const tileStyle = {
+    border: `2px dashed ${dragging ? 'var(--accent)' : 'var(--border)'}`,
+    borderRadius: 8,
+    background: dragging ? 'rgba(245,165,35,0.05)' : 'var(--input-bg, var(--card-bg))',
+    padding: 12,
+    cursor: 'pointer',
+    display: 'flex',
+    alignItems: 'center',
+    gap: 12,
+    transition: 'border-color 0.15s, background 0.15s',
+    minHeight: 60,
+    position: 'relative',
+  };
+
+  const renderTile = ({ label, preview, fileName, inputRef, onDrop, onPick }) => (
+    <div
+      onDragEnter={onDragEnter}
+      onDragLeave={onDragLeave}
+      onDragOver={onDragOver}
+      onDrop={onDrop}
+      onClick={() => setShowEditor(true)}
+      style={tileStyle}
+    >
+      {preview ? (
+        <>
+          <img src={preview} alt={label} style={{ height: 60, width: 80, objectFit: 'cover', borderRadius: 4, flexShrink: 0 }} />
+          <div>
+            <div style={{ fontSize: 13, fontWeight: 500, color: 'var(--text-primary)' }}>{fileName || 'Saved photo'}</div>
+            <div style={{ fontSize: 11, color: 'var(--text-muted)', marginTop: 2 }}>Click to open shared editor</div>
+          </div>
+        </>
+      ) : (
+        <div style={{ color: dragging ? 'var(--accent)' : 'var(--text-muted)', fontSize: 13 }}>
+          {dragging ? 'Drop photo here' : `${label}: open editor or upload`}
+        </div>
+      )}
+      <button
+        type="button"
+        onClick={(e) => { e.stopPropagation(); inputRef.current?.click(); }}
+        style={{
+          position: 'absolute', top: 6, right: 6,
+          fontSize: 10, color: 'var(--text-muted)',
+          background: 'var(--card-bg-2, var(--card-bg))',
+          border: '1px solid var(--border)', borderRadius: 4,
+          padding: '2px 7px', cursor: 'pointer', lineHeight: '16px',
+        }}
+      >
+        Upload
+      </button>
+      <input
+        ref={inputRef}
+        type="file"
+        accept={PHOTO_FILE_ACCEPT}
+        style={{ display: 'none' }}
+        onChange={e => { const f = e.target.files[0]; if (f) onPick(f); e.target.value = ''; }}
+      />
+    </div>
+  );
+
+  return (
+    <div className="form-group" style={{ margin: 0 }}>
+      <label>Mockup Photos</label>
+      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
+        {renderTile({
+          label: 'Recommendation Photo',
+          preview: recommendationPreview,
+          fileName: recommendationFileName,
+          inputRef: recommendationInputRef,
+          onDrop: onRecommendationDrop,
+          onPick: onRecommendationPick,
+        })}
+        {renderTile({
+          label: 'Sign Detail Photo',
+          preview: signDetailPreview,
+          fileName: signDetailFileName,
+          inputRef: signDetailInputRef,
+          onDrop: onSignDetailDrop,
+          onPick: onSignDetailPick,
+        })}
+      </div>
+      <button
+        type="button"
+        className="btn btn-outline btn-sm"
+        onClick={() => setShowEditor(true)}
+        style={{ marginTop: 8 }}
+      >
+        Open Shared Mockup Editor
+      </button>
+      {showEditor && (
+        <PhotoEditorModal
+          title="Sign Mockup Editor"
+          subtitle="Edit recommendation and sign detail photos from the same popup."
+          targets={[
+            {
+              id: 'recommendation',
+              label: 'Recommendation',
+              sourceImage: targetSource('recommendation'),
+              applyLabel: 'Apply to Recommendation',
+              outputName: 'recommendation.jpg',
+              downloadPrefix: 'recommendation-mockup',
+            },
+            {
+              id: 'signDetail',
+              label: 'Sign Detail',
+              sourceImage: targetSource('signDetail'),
+              applyLabel: 'Apply to Sign Detail',
+              outputName: 'sign-detail-mockup.jpg',
+              downloadPrefix: 'sign-detail-mockup',
+            },
+          ]}
+          onApply={(file, targetId) => {
+            if (targetId === 'signDetail') onSignDetailPick(file);
+            else onRecommendationPick(file);
+          }}
+          onCancel={() => setShowEditor(false)}
+        />
+      )}
+    </div>
+  );
+}
+
+// ─── Recommendation Photo Field (click → editor, drag → direct upload) ────────
+function RecommendationPhotoField({ preview, fileName, dragging, inputRef, onDragEnter, onDragLeave, onDragOver, onDrop, onPick, editorSourceImage }) {
+  const [showEditor, setShowEditor] = useState(false);
+
+  const handleUploadClick = (e) => {
+    e.stopPropagation();
+    inputRef.current?.click();
+  };
+
+  return (
+    <div className="form-group" style={{ margin: 0 }}>
+      <label>Recommendation Photo</label>
+      <div
+        onDragEnter={onDragEnter}
+        onDragLeave={onDragLeave}
+        onDragOver={onDragOver}
+        onDrop={onDrop}
+        onClick={() => setShowEditor(true)}
+        style={{
+          border: `2px dashed ${dragging ? 'var(--accent)' : 'var(--border)'}`,
+          borderRadius: 8,
+          background: dragging ? 'rgba(245,165,35,0.05)' : 'var(--input-bg, var(--card-bg))',
+          padding: 12,
+          cursor: 'pointer',
+          display: 'flex',
+          alignItems: 'center',
+          gap: 12,
+          transition: 'border-color 0.15s, background 0.15s',
+          minHeight: 60,
+          position: 'relative',
+        }}
+      >
+        {preview ? (
+          <>
+            <img src={preview} alt="Recommendation Photo" style={{ height: 60, width: 80, objectFit: 'cover', borderRadius: 4, flexShrink: 0 }} />
+            <div>
+              <div style={{ fontSize: 13, fontWeight: 500, color: 'var(--text-primary)' }}>{fileName || 'Saved photo'}</div>
+              <div style={{ fontSize: 11, color: 'var(--text-muted)', marginTop: 2 }}>Click to edit · drag a new photo</div>
+            </div>
+          </>
+        ) : (
+          <div style={{ color: dragging ? 'var(--accent)' : 'var(--text-muted)', fontSize: 13 }}>
+            {dragging ? '📂 Drop photo here' : '✏️ Click to edit existing photo · or drag & drop'}
+          </div>
+        )}
+        {/* Upload button sits in corner so it doesn't trigger the editor */}
+        <button
+          type="button"
+          onClick={handleUploadClick}
+          style={{
+            position: 'absolute', top: 6, right: 6,
+            fontSize: 10, color: 'var(--text-muted)',
+            background: 'var(--card-bg-2, var(--card-bg))',
+            border: '1px solid var(--border)', borderRadius: 4,
+            padding: '2px 7px', cursor: 'pointer', lineHeight: '16px',
+          }}
+        >
+          Upload file
+        </button>
+      </div>
+      <input
+        ref={inputRef}
+        type="file"
+        accept={PHOTO_FILE_ACCEPT}
+        style={{ display: 'none' }}
+        onChange={e => { const f = e.target.files[0]; if (f) onPick(f); e.target.value = ''; }}
+      />
+      {showEditor && (
+        <PhotoEditorModal
+          sourceImage={editorSourceImage}
+          title="Sign Mockup Editor"
+          subtitle="Import artwork, add dimensions, then save as the recommendation photo."
+          applyLabel="Apply as Recommendation Photo"
+          outputName="recommendation.jpg"
+          downloadPrefix="recommendation-mockup"
+          onApply={(file) => { onPick(file); setShowEditor(false); }}
+          onCancel={() => setShowEditor(false)}
+        />
+      )}
+    </div>
+  );
+}
+
+// ─── Sign Detail Photo Field (click → dimension editor, drag → upload) ───────
+function SignDetailPhotoField({ preview, fileName, dragging, inputRef, onDragEnter, onDragLeave, onDragOver, onDrop, onPick }) {
+  const [showEditor, setShowEditor] = useState(false);
+
+  const handleUploadClick = (e) => {
+    e.stopPropagation();
+    inputRef.current?.click();
+  };
+
+  return (
+    <div className="form-group" style={{ margin: 0 }}>
+      <label>Sign Detail Photo</label>
+      <div
+        onDragEnter={onDragEnter}
+        onDragLeave={onDragLeave}
+        onDragOver={onDragOver}
+        onDrop={onDrop}
+        onClick={() => preview && setShowEditor(true)}
+        style={{
+          border: `2px dashed ${dragging ? 'var(--accent)' : 'var(--border)'}`,
+          borderRadius: 8,
+          background: dragging ? 'rgba(245,165,35,0.05)' : 'var(--input-bg, var(--card-bg))',
+          padding: 12,
+          cursor: preview ? 'pointer' : 'default',
+          display: 'flex',
+          alignItems: 'center',
+          gap: 12,
+          transition: 'border-color 0.15s, background 0.15s',
+          minHeight: 60,
+          position: 'relative',
+        }}
+      >
+        {preview ? (
+          <>
+            <img src={preview} alt="Sign Detail Photo" style={{ height: 60, width: 80, objectFit: 'cover', borderRadius: 4, flexShrink: 0 }} />
+            <div>
+              <div style={{ fontSize: 13, fontWeight: 500, color: 'var(--text-primary)' }}>{fileName || 'Saved photo'}</div>
+              <div style={{ fontSize: 11, color: 'var(--text-muted)', marginTop: 2 }}>Click to add dimensions · drag a new photo</div>
+            </div>
+          </>
+        ) : (
+          <div style={{ color: dragging ? 'var(--accent)' : 'var(--text-muted)', fontSize: 13 }}>
+            {dragging ? '📂 Drop photo here' : '📐 Upload a sign detail photo to add dimensions'}
+          </div>
+        )}
+        <button
+          type="button"
+          onClick={handleUploadClick}
+          style={{
+            position: 'absolute', top: 6, right: 6,
+            fontSize: 10, color: 'var(--text-muted)',
+            background: 'var(--card-bg-2, var(--card-bg))',
+            border: '1px solid var(--border)', borderRadius: 4,
+            padding: '2px 7px', cursor: 'pointer', lineHeight: '16px',
+          }}
+        >
+          Upload file
+        </button>
+      </div>
+      <input
+        ref={inputRef}
+        type="file"
+        accept={PHOTO_FILE_ACCEPT}
+        style={{ display: 'none' }}
+        onChange={e => { const f = e.target.files[0]; if (f) onPick(f); e.target.value = ''; }}
+      />
+      {showEditor && (
+        <PhotoEditorModal
+          sourceImage={preview}
+          title="Sign Mockup Editor"
+          subtitle="Import artwork, add dimensions, then save as the sign detail photo."
+          applyLabel="Apply to Sign Detail Photo"
+          outputName="sign-detail-mockup.jpg"
+          downloadPrefix="sign-detail-mockup"
+          onApply={(file) => { onPick(file); setShowEditor(false); }}
+          onCancel={() => setShowEditor(false)}
+        />
+      )}
+    </div>
+  );
+}
+
+// ─── Dimension Editor ────────────────────────────────────────────────────────
+function DimensionEditorModal({ sourceImage, onApply, onCancel }) {
+  const canvasRef = useRef(null);
+  const [baseImage, setBaseImage] = useState(null);
+  const [loaded, setLoaded] = useState(false);
+  const [dimensions, setDimensions] = useState([]);
+  const [draftPoints, setDraftPoints] = useState([]);
+  const [draftOffsetPoint, setDraftOffsetPoint] = useState(null);
+  const [isPlacingOffset, setIsPlacingOffset] = useState(false);
+  const [dimensionMode, setDimensionMode] = useState('line');
+  const [boxStart, setBoxStart] = useState(null);
+  const [boxEnd, setBoxEnd] = useState(null);
+  const [activeDimensionId, setActiveDimensionId] = useState(null);
+  const [dimensionText, setDimensionText] = useState('');
+  const [boxWidthText, setBoxWidthText] = useState('');
+  const [boxHeightText, setBoxHeightText] = useState('');
+  const activeDimension = dimensions.find(item => item.id === activeDimensionId) || null;
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const img = new Image();
+    img.crossOrigin = 'anonymous';
+    img.onload = () => {
+      const MAX_W = 960;
+      const MAX_H = 580;
+      const scale = Math.min(MAX_W / img.naturalWidth, MAX_H / img.naturalHeight, 1);
+      canvas.width = Math.round(img.naturalWidth * scale);
+      canvas.height = Math.round(img.naturalHeight * scale);
+      setBaseImage(img);
+      setLoaded(true);
+    };
+    img.onerror = () => {
+      canvas.width = 800;
+      canvas.height = 500;
+      setLoaded(true);
+    };
+    img.src = sourceImage;
+  }, [sourceImage]);
+
+  useEffect(() => {
+    renderDimensionCanvas(true);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [baseImage, dimensions, draftPoints, draftOffsetPoint, activeDimensionId, boxStart, boxEnd]);
+
+  const getCanvasPos = (event) => {
+    const canvas = canvasRef.current;
+    const rect = canvas.getBoundingClientRect();
+    const scaleX = canvas.width / rect.width;
+    const scaleY = canvas.height / rect.height;
+    const src = event.touches ? event.touches[0] : event;
+    return {
+      x: (src.clientX - rect.left) * scaleX,
+      y: (src.clientY - rect.top) * scaleY,
+    };
+  };
+
+  function drawDimension(ctx, item, selected = false) {
+    const color = '#000000';
+    const line = getDimensionLine(item);
+    ctx.save();
+    ctx.strokeStyle = color;
+    ctx.fillStyle = color;
+    const dimensionLineWidth = selected ? 3 : 2.25;
+    ctx.lineWidth = dimensionLineWidth;
+
+    // Extension lines from picked object points to the offset dimension line.
+    [item.start, item.end].forEach((point, index) => {
+      const target = index === 0 ? line.start : line.end;
+      ctx.beginPath();
+      ctx.moveTo(point.x, point.y);
+      ctx.lineTo(target.x, target.y);
+      ctx.stroke();
+    });
+
+    ctx.beginPath();
+    ctx.moveTo(line.start.x, line.start.y);
+    ctx.lineTo(line.end.x, line.end.y);
+    ctx.stroke();
+
+    const tickLength = 18;
+    const tickAngle = (135 * Math.PI) / 180;
+    ctx.lineWidth = dimensionLineWidth * 2;
+    [line.start, line.end].forEach((point) => {
+      ctx.beginPath();
+      ctx.moveTo(point.x - Math.cos(tickAngle) * tickLength / 2, point.y - Math.sin(tickAngle) * tickLength / 2);
+      ctx.lineTo(point.x + Math.cos(tickAngle) * tickLength / 2, point.y + Math.sin(tickAngle) * tickLength / 2);
+      ctx.stroke();
+    });
+    ctx.lineWidth = dimensionLineWidth;
+
+    const midX = (line.start.x + line.end.x) / 2;
+    const midY = (line.start.y + line.end.y) / 2;
+    ctx.font = '700 21px Helvetica, Arial, sans-serif';
+    ctx.textAlign = 'center';
+    ctx.textBaseline = 'middle';
+    const label = item.label || 'Dimension';
+    const width = ctx.measureText(label).width;
+    const labelPaddingX = 10;
+    const labelHeight = 30;
+    const labelWidth = width + labelPaddingX * 2;
+    const dx = line.end.x - line.start.x;
+    const dy = line.end.y - line.start.y;
+    const lineLength = Math.hypot(dx, dy);
+    const isMostlyHorizontal = Math.abs(dx) >= Math.abs(dy);
+    const needsOutsideLabel = isMostlyHorizontal
+      ? lineLength < labelWidth + 28
+      : lineLength < labelHeight + 28;
+    let labelX = midX;
+    let labelY = midY;
+
+    if (needsOutsideLabel) {
+      const leaderGap = 8;
+      if (isMostlyHorizontal) {
+        const leftPoint = line.start.x <= line.end.x ? line.start : line.end;
+        const rightPoint = line.start.x <= line.end.x ? line.end : line.start;
+        const leftRoom = leftPoint.x;
+        const rightRoom = ctx.canvas.width - rightPoint.x;
+        const placeLeft = leftRoom >= labelWidth + leaderGap || leftRoom >= rightRoom;
+        labelX = placeLeft
+          ? leftPoint.x - leaderGap - labelWidth / 2
+          : rightPoint.x + leaderGap + labelWidth / 2;
+        labelY = midY;
+        const labelEdgeX = placeLeft ? labelX + labelWidth / 2 : labelX - labelWidth / 2;
+        ctx.beginPath();
+        ctx.moveTo(placeLeft ? leftPoint.x : rightPoint.x, midY);
+        ctx.lineTo(labelEdgeX, labelY);
+        ctx.stroke();
+      } else {
+        const topPoint = line.start.y <= line.end.y ? line.start : line.end;
+        const bottomPoint = line.start.y <= line.end.y ? line.end : line.start;
+        const topRoom = topPoint.y;
+        const bottomRoom = ctx.canvas.height - bottomPoint.y;
+        const placeTop = topRoom >= labelHeight + leaderGap || topRoom >= bottomRoom;
+        labelX = midX;
+        labelY = placeTop
+          ? topPoint.y - leaderGap - labelHeight / 2
+          : bottomPoint.y + leaderGap + labelHeight / 2;
+        const labelEdgeY = placeTop ? labelY + labelHeight / 2 : labelY - labelHeight / 2;
+        ctx.beginPath();
+        ctx.moveTo(midX, placeTop ? topPoint.y : bottomPoint.y);
+        ctx.lineTo(labelX, labelEdgeY);
+        ctx.stroke();
+      }
+    }
+
+    ctx.fillStyle = '#ffffff';
+    ctx.fillRect(labelX - labelWidth / 2, labelY - labelHeight / 2, labelWidth, labelHeight);
+    ctx.fillStyle = color;
+    ctx.fillText(label, labelX, labelY);
+    ctx.restore();
+  }
+
+  function getDimensionLine(item) {
+    if (item.lineStart && item.lineEnd) {
+      return { start: item.lineStart, end: item.lineEnd };
+    }
+    return { start: item.start, end: item.end };
+  }
+
+  function buildOffsetDimension(start, end, offsetPoint, label) {
+    const dx = end.x - start.x;
+    const dy = end.y - start.y;
+    const len = Math.hypot(dx, dy) || 1;
+    const nx = -dy / len;
+    const ny = dx / len;
+    const mid = { x: (start.x + end.x) / 2, y: (start.y + end.y) / 2 };
+    const offset = (offsetPoint.x - mid.x) * nx + (offsetPoint.y - mid.y) * ny;
+    return {
+      id: crypto.randomUUID(),
+      start,
+      end,
+      lineStart: { x: start.x + nx * offset, y: start.y + ny * offset },
+      lineEnd: { x: end.x + nx * offset, y: end.y + ny * offset },
+      label,
+    };
+  }
+
+  function renderDimensionCanvas(showGuides) {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext('2d');
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    if (baseImage) {
+      ctx.drawImage(baseImage, 0, 0, canvas.width, canvas.height);
+    } else {
+      ctx.fillStyle = '#e5e5e5';
+      ctx.fillRect(0, 0, canvas.width, canvas.height);
+    }
+    dimensions.forEach(item => drawDimension(ctx, item, item.id === activeDimensionId));
+    if (showGuides && draftPoints.length > 0) {
+      ctx.fillStyle = '#000000';
+      draftPoints.forEach((point) => {
+        ctx.beginPath();
+        ctx.arc(point.x, point.y, 5, 0, Math.PI * 2);
+        ctx.fill();
+      });
+    }
+    if (showGuides && draftPoints.length === 2 && draftOffsetPoint) {
+      drawDimension(ctx, buildOffsetDimension(draftPoints[0], draftPoints[1], draftOffsetPoint, dimensionText || 'Dimension'), true);
+    }
+    if (showGuides && boxStart && boxEnd) {
+      const rect = getRectFromPoints(boxStart, boxEnd);
+      ctx.save();
+      ctx.strokeStyle = '#000000';
+      ctx.lineWidth = 2;
+      ctx.setLineDash([6, 4]);
+      ctx.strokeRect(rect.x, rect.y, rect.w, rect.h);
+      ctx.setLineDash([]);
+      ctx.restore();
+    }
+  }
+
+  function getRectFromPoints(a, b) {
+    const x = Math.min(a.x, b.x);
+    const y = Math.min(a.y, b.y);
+    return { x, y, w: Math.abs(b.x - a.x), h: Math.abs(b.y - a.y) };
+  }
+
+  function addBoxDimensions(rect) {
+    const offset = 28;
+    const groupId = crypto.randomUUID();
+    const widthDim = {
+      ...buildOffsetDimension(
+        { x: rect.x, y: rect.y },
+        { x: rect.x + rect.w, y: rect.y },
+        { x: rect.x + rect.w / 2, y: rect.y - offset },
+        boxWidthText || dimensionText || 'Width'
+      ),
+      group: 'box',
+      groupId,
+    };
+    const heightDim = {
+      ...buildOffsetDimension(
+        { x: rect.x, y: rect.y },
+        { x: rect.x, y: rect.y + rect.h },
+        { x: rect.x - offset, y: rect.y + rect.h / 2 },
+        boxHeightText || dimensionText || 'Height'
+      ),
+      group: 'box',
+      groupId,
+    };
+    setDimensions(prev => [...prev, widthDim, heightDim]);
+    setActiveDimensionId(widthDim.id);
+  }
+
+  function autoDetectBoxDimensions() {
+    if (!baseImage) return;
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+
+    const detectCanvas = document.createElement('canvas');
+    const maxDetectW = 260;
+    const scale = Math.min(maxDetectW / canvas.width, 1);
+    detectCanvas.width = Math.max(1, Math.round(canvas.width * scale));
+    detectCanvas.height = Math.max(1, Math.round(canvas.height * scale));
+    const detectCtx = detectCanvas.getContext('2d', { willReadFrequently: true });
+    detectCtx.drawImage(baseImage, 0, 0, detectCanvas.width, detectCanvas.height);
+
+    const { width, height } = detectCanvas;
+    const image = detectCtx.getImageData(0, 0, width, height);
+    const data = image.data;
+
+    const columnCounts = new Uint16Array(width);
+    const rowCounts = new Uint16Array(height);
+    let nonWhiteCount = 0;
+    const marginX = Math.round(width * 0.01);
+    const marginY = Math.round(height * 0.01);
+
+    for (let y = marginY; y < height - marginY; y++) {
+      for (let x = marginX; x < width - marginX; x++) {
+        const p = (y * width + x) * 4;
+        const alpha = data[p + 3];
+        const red = data[p];
+        const green = data[p + 1];
+        const blue = data[p + 2];
+        const isWhite = red >= 245 && green >= 245 && blue >= 245;
+        if (alpha > 24 && !isWhite) {
+          columnCounts[x] += 1;
+          rowCounts[y] += 1;
+          nonWhiteCount += 1;
+        }
+      }
+    }
+
+    const minColumnHits = Math.max(2, Math.round(height * 0.006));
+    const minRowHits = Math.max(2, Math.round(width * 0.006));
+    let whiteBoundsMinX = -1;
+    let whiteBoundsMaxX = -1;
+    let whiteBoundsMinY = -1;
+    let whiteBoundsMaxY = -1;
+
+    for (let x = marginX; x < width - marginX; x++) {
+      if (columnCounts[x] >= minColumnHits) {
+        whiteBoundsMinX = x;
+        break;
+      }
+    }
+    for (let x = width - marginX - 1; x >= marginX; x--) {
+      if (columnCounts[x] >= minColumnHits) {
+        whiteBoundsMaxX = x;
+        break;
+      }
+    }
+    for (let y = marginY; y < height - marginY; y++) {
+      if (rowCounts[y] >= minRowHits) {
+        whiteBoundsMinY = y;
+        break;
+      }
+    }
+    for (let y = height - marginY - 1; y >= marginY; y--) {
+      if (rowCounts[y] >= minRowHits) {
+        whiteBoundsMaxY = y;
+        break;
+      }
+    }
+
+    const whiteBoundsW = whiteBoundsMaxX - whiteBoundsMinX;
+    const whiteBoundsH = whiteBoundsMaxY - whiteBoundsMinY;
+    const nonWhiteRatio = nonWhiteCount / ((width - marginX * 2) * (height - marginY * 2));
+    const hasUsefulWhiteBounds =
+      whiteBoundsMinX >= 0 &&
+      whiteBoundsMinY >= 0 &&
+      whiteBoundsW >= width * 0.03 &&
+      whiteBoundsH >= height * 0.03 &&
+      nonWhiteRatio >= 0.0005 &&
+      nonWhiteRatio <= 0.65 &&
+      (whiteBoundsW < width * 0.95 || whiteBoundsH < height * 0.95);
+
+    if (hasUsefulWhiteBounds) {
+      const padding = 4;
+      const rectX = Math.max(0, whiteBoundsMinX / scale - padding);
+      const rectY = Math.max(0, whiteBoundsMinY / scale - padding);
+      addBoxDimensions({
+        x: rectX,
+        y: rectY,
+        w: Math.min(canvas.width, whiteBoundsMaxX / scale + padding) - rectX,
+        h: Math.min(canvas.height, whiteBoundsMaxY / scale + padding) - rectY,
+      });
+      return;
+    }
+
+    const luminance = new Float32Array(width * height);
+    const gradients = [];
+
+    for (let i = 0; i < width * height; i++) {
+      const p = i * 4;
+      luminance[i] = data[p] * 0.299 + data[p + 1] * 0.587 + data[p + 2] * 0.114;
+    }
+    for (let y = 1; y < height - 1; y++) {
+      for (let x = 1; x < width - 1; x++) {
+        const i = y * width + x;
+        gradients.push(Math.abs(luminance[i] - luminance[i + 1]) + Math.abs(luminance[i] - luminance[i + width]));
+      }
+    }
+
+    if (!gradients.length) return;
+    const mean = gradients.reduce((sum, value) => sum + value, 0) / gradients.length;
+    const variance = gradients.reduce((sum, value) => sum + Math.pow(value - mean, 2), 0) / gradients.length;
+    const threshold = Math.max(24, Math.min(70, mean + Math.sqrt(variance) * 1.1));
+    const edges = new Uint8Array(width * height);
+    const borderX = Math.round(width * 0.03);
+    const borderY = Math.round(height * 0.03);
+
+    for (let y = borderY; y < height - borderY; y++) {
+      for (let x = borderX; x < width - borderX; x++) {
+        const i = y * width + x;
+        const gradient = Math.abs(luminance[i] - luminance[i + 1]) + Math.abs(luminance[i] - luminance[i + width]);
+        if (gradient >= threshold) edges[i] = 1;
+      }
+    }
+
+    const visited = new Uint8Array(width * height);
+    const centerX = width / 2;
+    const centerY = height / 2;
+    let best = null;
+
+    for (let y = borderY; y < height - borderY; y++) {
+      for (let x = borderX; x < width - borderX; x++) {
+        const startIndex = y * width + x;
+        if (!edges[startIndex] || visited[startIndex]) continue;
+
+        const stack = [startIndex];
+        visited[startIndex] = 1;
+        let count = 0;
+        let minX = x;
+        let maxX = x;
+        let minY = y;
+        let maxY = y;
+
+        while (stack.length) {
+          const index = stack.pop();
+          const px = index % width;
+          const py = Math.floor(index / width);
+          count += 1;
+          minX = Math.min(minX, px);
+          maxX = Math.max(maxX, px);
+          minY = Math.min(minY, py);
+          maxY = Math.max(maxY, py);
+
+          for (let oy = -1; oy <= 1; oy++) {
+            for (let ox = -1; ox <= 1; ox++) {
+              if (!ox && !oy) continue;
+              const nx = px + ox;
+              const ny = py + oy;
+              if (nx < borderX || nx >= width - borderX || ny < borderY || ny >= height - borderY) continue;
+              const nextIndex = ny * width + nx;
+              if (!edges[nextIndex] || visited[nextIndex]) continue;
+              visited[nextIndex] = 1;
+              stack.push(nextIndex);
+            }
+          }
+        }
+
+        const boxW = maxX - minX;
+        const boxH = maxY - minY;
+        if (count < 18 || boxW < width * 0.04 || boxH < height * 0.04) continue;
+        const boxCenterX = (minX + maxX) / 2;
+        const boxCenterY = (minY + maxY) / 2;
+        const centerPenalty = Math.hypot((boxCenterX - centerX) / width, (boxCenterY - centerY) / height) * 120;
+        const score = count + boxW * boxH * 0.02 - centerPenalty;
+        if (!best || score > best.score) best = { minX, maxX, minY, maxY, score };
+      }
+    }
+
+    if (!best) {
+      window.alert('Could not detect a clear sign/object area. Drag a box manually on the image.');
+      return;
+    }
+
+    const padding = 10;
+    const rect = {
+      x: Math.max(0, best.minX / scale - padding),
+      y: Math.max(0, best.minY / scale - padding),
+      w: Math.min(canvas.width, best.maxX / scale + padding) - Math.max(0, best.minX / scale - padding),
+      h: Math.min(canvas.height, best.maxY / scale + padding) - Math.max(0, best.minY / scale - padding),
+    };
+    addBoxDimensions(rect);
+  }
+
+  const findDimensionAtPoint = (point) => {
+    const distanceToSegment = (pointValue, start, end) => {
+      const dx = end.x - start.x;
+      const dy = end.y - start.y;
+      const lenSq = dx * dx + dy * dy || 1;
+      const t = Math.max(0, Math.min(1, ((pointValue.x - start.x) * dx + (pointValue.y - start.y) * dy) / lenSq));
+      const x = start.x + t * dx;
+      const y = start.y + t * dy;
+      return Math.hypot(pointValue.x - x, pointValue.y - y);
+    };
+      return dimensions.find(item => {
+        const line = getDimensionLine(item);
+        return distanceToSegment(point, line.start, line.end) < 10;
+      }) || null;
+  };
+
+  const handlePointerDown = (e) => {
+    e.preventDefault();
+    const point = getCanvasPos(e);
+    if (dimensionMode === 'box') {
+      setBoxStart(point);
+      setBoxEnd(point);
+      setActiveDimensionId(null);
+      return;
+    }
+    if (draftPoints.length === 2) {
+      setIsPlacingOffset(true);
+      setDraftOffsetPoint(point);
+      return;
+    }
+    const existing = findDimensionAtPoint(point);
+    if (existing) {
+      setActiveDimensionId(existing.id);
+      setDimensionText(existing.label || '');
+      return;
+    }
+    setDraftPoints(prev => prev.length >= 2 ? [point] : [...prev, point]);
+    setDraftOffsetPoint(null);
+    setActiveDimensionId(null);
+  };
+
+  const handlePointerMove = (e) => {
+    if (dimensionMode === 'box' && boxStart) {
+      e.preventDefault();
+      setBoxEnd(getCanvasPos(e));
+      return;
+    }
+    if (!isPlacingOffset || draftPoints.length !== 2) return;
+    e.preventDefault();
+    setDraftOffsetPoint(getCanvasPos(e));
+  };
+
+  const handlePointerUp = () => {
+    if (dimensionMode === 'box') {
+      if (!boxStart || !boxEnd) return;
+      const rect = getRectFromPoints(boxStart, boxEnd);
+      if (rect.w < 8 || rect.h < 8) {
+        setBoxStart(null);
+        setBoxEnd(null);
+        return;
+      }
+      addBoxDimensions(rect);
+      setBoxStart(null);
+      setBoxEnd(null);
+      return;
+    }
+    if (!isPlacingOffset || draftPoints.length !== 2 || !draftOffsetPoint) return;
+    if (Math.hypot(draftPoints[1].x - draftPoints[0].x, draftPoints[1].y - draftPoints[0].y) < 8) {
+      setDraftPoints([]);
+      setDraftOffsetPoint(null);
+      setIsPlacingOffset(false);
+      return;
+    }
+    const label = dimensionText || 'Dimension';
+    const next = buildOffsetDimension(draftPoints[0], draftPoints[1], draftOffsetPoint, label);
+    setDimensions(prev => [...prev, next]);
+    setActiveDimensionId(next.id);
+    setDraftPoints([]);
+    setDraftOffsetPoint(null);
+    setIsPlacingOffset(false);
+  };
+
+  const updateActiveLabel = () => {
+    if (!activeDimensionId) return;
+    setDimensions(prev => prev.map(item => item.id === activeDimensionId ? { ...item, label: dimensionText || 'Dimension' } : item));
+  };
+
+  const removeActiveDimension = () => {
+    if (!activeDimensionId) return;
+    const selected = dimensions.find(item => item.id === activeDimensionId);
+    setDimensions(prev => {
+      if (selected?.group === 'box' && selected.groupId) {
+        return prev.filter(item => item.groupId !== selected.groupId);
+      }
+      return prev.filter(item => item.id !== activeDimensionId);
+    });
+    setActiveDimensionId(null);
+    setDimensionText('');
+  };
+
+  const switchDimensionMode = (mode) => {
+    setDimensionMode(mode);
+    setDraftPoints([]);
+    setDraftOffsetPoint(null);
+    setIsPlacingOffset(false);
+    setBoxStart(null);
+    setBoxEnd(null);
+  };
+
+  const handleApply = () => {
+    renderDimensionCanvas(false);
+    canvasRef.current.toBlob(blob => {
+      onApply(new File([blob], 'sign-detail-dimensions.jpg', { type: 'image/jpeg' }));
+    }, 'image/jpeg', 0.92);
+    requestAnimationFrame(() => renderDimensionCanvas(true));
+  };
+
+  return (
+    <div
+      style={{
+        position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.72)',
+        display: 'flex', alignItems: 'center', justifyContent: 'center',
+        zIndex: 9999, padding: 20,
+      }}
+      onClick={(e) => { if (e.target === e.currentTarget) onCancel(); }}
+    >
+      <div style={{ background: 'var(--card-bg)', borderRadius: 12, display: 'flex', flexDirection: 'column', maxWidth: '98vw', maxHeight: '96vh', overflow: 'hidden', boxShadow: '0 24px 64px rgba(0,0,0,0.55)' }}>
+        <div style={{ padding: '12px 18px', borderBottom: '1px solid var(--border)', display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexShrink: 0 }}>
+          <div>
+            <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--text-primary)' }}>Sign Detail Dimensions</div>
+            <div style={{ fontSize: 11, color: 'var(--text-muted)', marginTop: 2 }}>Add line dimensions or drag a box to auto-place width and height callouts.</div>
+          </div>
+          <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: 6, overflow: 'hidden' }}>
+            {[
+              ['line', 'Line'],
+              ['box', 'Box'],
+            ].map(([mode, label]) => (
+              <button
+                key={mode}
+                className={`btn btn-sm ${dimensionMode === mode ? 'btn-primary' : 'btn-outline'}`}
+                style={{ border: 'none', borderRadius: 0 }}
+                onClick={() => switchDimensionMode(mode)}
+              >
+                {label}
+              </button>
+            ))}
+          </div>
+          <input
+            type="text"
+            value={dimensionText}
+            onChange={e => setDimensionText(e.target.value)}
+            placeholder='e.g. 48" W, 24" H, 8 ft'
+            style={{ minHeight: 32, margin: 0, width: 220 }}
+          />
+          {dimensionMode === 'box' && (
+            <>
+              <input
+                type="text"
+                value={boxWidthText}
+                onChange={e => setBoxWidthText(e.target.value)}
+                placeholder='Width e.g. 48"'
+                style={{ minHeight: 32, margin: 0, width: 130 }}
+              />
+              <input
+                type="text"
+                value={boxHeightText}
+                onChange={e => setBoxHeightText(e.target.value)}
+                placeholder='Height e.g. 24"'
+                style={{ minHeight: 32, margin: 0, width: 130 }}
+              />
+              <button className="btn btn-outline btn-sm" onClick={autoDetectBoxDimensions} disabled={!loaded || !baseImage}>Auto Box</button>
+            </>
+          )}
+          <button className="btn btn-outline btn-sm" onClick={updateActiveLabel} disabled={!activeDimension}>Update Selected</button>
+          <button className="btn btn-outline btn-sm" onClick={removeActiveDimension} disabled={!activeDimension}>Remove Selected</button>
+          <span style={{ fontSize: 11, color: 'var(--text-muted)' }}>
+            {dimensionMode === 'box'
+              ? 'Drag a box around the artwork/sign area to auto-add width and height.'
+              : (
+                <>
+                  {draftPoints.length === 0 && 'Click first point.'}
+                  {draftPoints.length === 1 && 'Click second point.'}
+                  {draftPoints.length === 2 && 'Drag outward to place the dimension line.'}
+                  {draftPoints.length === 0 && ' Click an existing dimension to edit it.'}
+                </>
+              )}
+          </span>
+        </div>
+        <div style={{ overflow: 'auto', flex: 1, background: '#2a2a2a', display: 'flex', alignItems: 'flex-start', justifyContent: 'center', position: 'relative' }}>
+          {!loaded && <div style={{ padding: 48, color: '#888', fontSize: 13 }}>Loading image…</div>}
+          <canvas
+            ref={canvasRef}
+            style={{ display: loaded ? 'block' : 'none', cursor: 'crosshair', maxWidth: '100%', touchAction: 'none', userSelect: 'none' }}
+            onPointerDown={handlePointerDown}
+            onPointerMove={handlePointerMove}
+            onPointerUp={handlePointerUp}
+            onPointerLeave={handlePointerUp}
+          />
+        </div>
+        <div style={{ padding: '12px 18px', borderTop: '1px solid var(--border)', display: 'flex', justifyContent: 'flex-end', gap: 8, flexShrink: 0 }}>
+          <button className="btn btn-outline btn-sm" onClick={onCancel}>Cancel</button>
+          <button className="btn btn-primary btn-sm" onClick={handleApply}>Apply to Sign Detail Photo</button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// ─── Artwork Mockup Editor ───────────────────────────────────────────────────
+const HANDLE_SIZE = 12;
+
+function makeArtworkPoints(x, y, w, h) {
+  return [
+    { x, y },
+    { x: x + w, y },
+    { x: x + w, y: y + h },
+    { x, y: y + h },
+  ];
+}
+
+function cloneArtworkState(items) {
+  return items.map(item => ({
+    ...item,
+    points: item.points.map(point => ({ ...point })),
+  }));
+}
+
+function getArtworkBounds(points) {
+  const xs = points.map(p => p.x);
+  const ys = points.map(p => p.y);
+  const minX = Math.min(...xs);
+  const maxX = Math.max(...xs);
+  const minY = Math.min(...ys);
+  const maxY = Math.max(...ys);
+  return { x: minX, y: minY, w: maxX - minX, h: maxY - minY };
+}
+
+function getArtworkHandles(artwork) {
+  const labels = ['nw', 'ne', 'se', 'sw'];
+  return artwork.points.map((point, index) => ({ ...point, id: labels[index], index }));
+}
+
+function getRotateHandle(artwork) {
+  const [topLeft, topRight] = artwork.points;
+  const midX = (topLeft.x + topRight.x) / 2;
+  const midY = (topLeft.y + topRight.y) / 2;
+  const dx = topRight.x - topLeft.x;
+  const dy = topRight.y - topLeft.y;
+  const length = Math.hypot(dx, dy) || 1;
+  return {
+    x: midX - (dy / length) * 34,
+    y: midY + (dx / length) * 34,
+  };
+}
+
+function pointInPolygon(point, polygon) {
+  let inside = false;
+  for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i, i += 1) {
+    const xi = polygon[i].x;
+    const yi = polygon[i].y;
+    const xj = polygon[j].x;
+    const yj = polygon[j].y;
+    const intersects = ((yi > point.y) !== (yj > point.y)) &&
+      (point.x < ((xj - xi) * (point.y - yi)) / (yj - yi || 1) + xi);
+    if (intersects) inside = !inside;
+  }
+  return inside;
+}
+
+function interpolateQuad(points, u, v) {
+  const [p0, p1, p2, p3] = points;
+  return {
+    x: (1 - u) * (1 - v) * p0.x + u * (1 - v) * p1.x + u * v * p2.x + (1 - u) * v * p3.x,
+    y: (1 - u) * (1 - v) * p0.y + u * (1 - v) * p1.y + u * v * p2.y + (1 - u) * v * p3.y,
+  };
+}
+
+function rotatePoints(points, degrees) {
+  const radians = (degrees * Math.PI) / 180;
+  const cos = Math.cos(radians);
+  const sin = Math.sin(radians);
+  const center = points.reduce((acc, point) => ({ x: acc.x + point.x / points.length, y: acc.y + point.y / points.length }), { x: 0, y: 0 });
+  return points.map(point => {
+    const dx = point.x - center.x;
+    const dy = point.y - center.y;
+    return {
+      x: center.x + dx * cos - dy * sin,
+      y: center.y + dx * sin + dy * cos,
+    };
+  });
+}
+
+function drawTriangleImage(ctx, img, s0, s1, s2, d0, d1, d2) {
+  const denom = s0.x * (s1.y - s2.y) + s1.x * (s2.y - s0.y) + s2.x * (s0.y - s1.y);
+  if (!denom) return;
+  const a = (d0.x * (s1.y - s2.y) + d1.x * (s2.y - s0.y) + d2.x * (s0.y - s1.y)) / denom;
+  const c = (d0.x * (s2.x - s1.x) + d1.x * (s0.x - s2.x) + d2.x * (s1.x - s0.x)) / denom;
+  const e = (d0.x * (s1.x * s2.y - s2.x * s1.y) + d1.x * (s2.x * s0.y - s0.x * s2.y) + d2.x * (s0.x * s1.y - s1.x * s0.y)) / denom;
+  const b = (d0.y * (s1.y - s2.y) + d1.y * (s2.y - s0.y) + d2.y * (s0.y - s1.y)) / denom;
+  const d = (d0.y * (s2.x - s1.x) + d1.y * (s0.x - s2.x) + d2.y * (s1.x - s0.x)) / denom;
+  const f = (d0.y * (s1.x * s2.y - s2.x * s1.y) + d1.y * (s2.x * s0.y - s0.x * s2.y) + d2.y * (s0.x * s1.y - s1.x * s0.y)) / denom;
+
+  ctx.save();
+  ctx.beginPath();
+  ctx.moveTo(d0.x, d0.y);
+  ctx.lineTo(d1.x, d1.y);
+  ctx.lineTo(d2.x, d2.y);
+  ctx.closePath();
+  ctx.clip();
+  ctx.transform(a, b, c, d, e, f);
+  ctx.drawImage(img, 0, 0);
+  ctx.restore();
+}
+
+function drawImageInQuad(ctx, img, points) {
+  const steps = 10;
+  for (let y = 0; y < steps; y += 1) {
+    for (let x = 0; x < steps; x += 1) {
+      const u0 = x / steps;
+      const u1 = (x + 1) / steps;
+      const v0 = y / steps;
+      const v1 = (y + 1) / steps;
+      const d00 = interpolateQuad(points, u0, v0);
+      const d10 = interpolateQuad(points, u1, v0);
+      const d11 = interpolateQuad(points, u1, v1);
+      const d01 = interpolateQuad(points, u0, v1);
+      const s00 = { x: u0 * img.naturalWidth, y: v0 * img.naturalHeight };
+      const s10 = { x: u1 * img.naturalWidth, y: v0 * img.naturalHeight };
+      const s11 = { x: u1 * img.naturalWidth, y: v1 * img.naturalHeight };
+      const s01 = { x: u0 * img.naturalWidth, y: v1 * img.naturalHeight };
+      drawTriangleImage(ctx, img, s00, s10, s11, d00, d10, d11);
+      drawTriangleImage(ctx, img, s00, s11, s01, d00, d11, d01);
+    }
+  }
+}
+
+function PhotoEditorModal({
+  sourceImage,
+  onApply,
+  onCancel,
+  title = 'Sign Mockup Editor',
+  subtitle = 'Import artwork, add dimensions, then save the edited photo.',
+  applyLabel = 'Apply Edited Photo',
+  outputName = 'sign-mockup.jpg',
+  downloadPrefix = 'sign-mockup',
+  targets = null,
+}) {
+  const canvasRef = useRef(null);
+  const artworkInputRef = useRef(null);
+  const dragRef = useRef(null);
+  const layerDragRef = useRef(null);
+  const [baseImage, setBaseImage] = useState(null);
+  const [artworks, setArtworks] = useState([]);
+  const [dimensions, setDimensions] = useState([]);
+  const [history, setHistory] = useState([[]]);
+  const [historyIndex, setHistoryIndex] = useState(0);
+  const [activeTool, setActiveTool] = useState('select');
+  const [selectedArtworkId, setSelectedArtworkId] = useState(null);
+  const [activeDimensionId, setActiveDimensionId] = useState(null);
+  const [loaded, setLoaded] = useState(false);
+  const [calibrating, setCalibrating] = useState(false);
+  const [calibrationPoints, setCalibrationPoints] = useState([]);
+  const [calibrationDistance, setCalibrationDistance] = useState('');
+  const [sizeUnit, setSizeUnit] = useState('in');
+  const [artworkWidth, setArtworkWidth] = useState('');
+  const [artworkHeight, setArtworkHeight] = useState('');
+  const [lockRatio, setLockRatio] = useState(true);
+  const [draftPoints, setDraftPoints] = useState([]);
+  const [draftOffsetPoint, setDraftOffsetPoint] = useState(null);
+  const [isPlacingOffset, setIsPlacingOffset] = useState(false);
+  const [boxStart, setBoxStart] = useState(null);
+  const [boxEnd, setBoxEnd] = useState(null);
+  const [dimensionText, setDimensionText] = useState('');
+  const [boxWidthText, setBoxWidthText] = useState('');
+  const [boxHeightText, setBoxHeightText] = useState('');
+  const [activeTargetId, setActiveTargetId] = useState(targets?.[0]?.id || 'single');
+  const [targetSources, setTargetSources] = useState(() => Object.fromEntries((targets || []).map(target => [target.id, target.sourceImage || ''])));
+  const activeTarget = targets?.find(target => target.id === activeTargetId) || null;
+  const effectiveSourceImage = activeTarget ? targetSources[activeTarget.id] : sourceImage;
+  const effectiveApplyLabel = activeTarget?.applyLabel || applyLabel;
+  const effectiveOutputName = activeTarget?.outputName || outputName;
+  const effectiveDownloadPrefix = activeTarget?.downloadPrefix || downloadPrefix;
+  const selectedArtwork = artworks.find(item => item.id === selectedArtworkId) || null;
+  const activeDimension = dimensions.find(item => item.id === activeDimensionId) || null;
+
+  const commitArtworks = (updater) => {
+    setArtworks(prev => {
+      const next = typeof updater === 'function' ? updater(prev) : updater;
+      setHistory(current => {
+        const trimmed = current.slice(0, historyIndex + 1);
+        return [...trimmed, cloneArtworkState(next)].slice(-40);
+      });
+      setHistoryIndex(index => Math.min(index + 1, 39));
+      return next;
+    });
+  };
+
+  const setArtworksLive = (updater) => {
+    setArtworks(prev => typeof updater === 'function' ? updater(prev) : updater);
+  };
+
+  const resetEditorLayers = () => {
+    setArtworks([]);
+    setDimensions([]);
+    setHistory([[]]);
+    setHistoryIndex(0);
+    setSelectedArtworkId(null);
+    setActiveDimensionId(null);
+    setCalibrationPoints([]);
+    setCalibrating(false);
+    setDraftPoints([]);
+    setDraftOffsetPoint(null);
+    setIsPlacingOffset(false);
+    setBoxStart(null);
+    setBoxEnd(null);
+  };
+
+  useEffect(() => {
+    if (!targets) return;
+    setTargetSources(Object.fromEntries(targets.map(target => [target.id, target.sourceImage || ''])));
+  }, [targets]);
+
+  useEffect(() => {
+    resetEditorLayers();
+  }, [activeTargetId]);
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext('2d');
+
+    const initBlank = () => {
+      canvas.width = 800;
+      canvas.height = 500;
+      ctx.fillStyle = '#e5e5e5';
+      ctx.fillRect(0, 0, canvas.width, canvas.height);
+      setBaseImage(null);
+      setLoaded(true);
+    };
+
+    setLoaded(false);
+    if (!effectiveSourceImage) { initBlank(); return; }
+
+    const img = new Image();
+    img.crossOrigin = 'anonymous';
+    img.onload = () => {
+      const MAX_W = 960;
+      const MAX_H = 580;
+      const scale = Math.min(MAX_W / img.naturalWidth, MAX_H / img.naturalHeight, 1);
+      canvas.width  = Math.round(img.naturalWidth  * scale);
+      canvas.height = Math.round(img.naturalHeight * scale);
+      setBaseImage(img);
+      setLoaded(true);
+    };
+    img.onerror = initBlank;
+    img.src = effectiveSourceImage;
+  }, [effectiveSourceImage]);
+
+  useEffect(() => {
+    renderCanvas(true);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [baseImage, artworks, dimensions, selectedArtworkId, activeDimensionId, calibrationPoints, draftPoints, draftOffsetPoint, boxStart, boxEnd]);
+
+  const getCanvasPos = (event) => {
+    const canvas = canvasRef.current;
+    const rect = canvas.getBoundingClientRect();
+    const scaleX = canvas.width / rect.width;
+    const scaleY = canvas.height / rect.height;
+    const src = event.touches ? event.touches[0] : event;
+    return {
+      x: (src.clientX - rect.left) * scaleX,
+      y: (src.clientY - rect.top)  * scaleY,
+    };
+  };
+
+  function getDimensionLine(item) {
+    if (item.lineStart && item.lineEnd) return { start: item.lineStart, end: item.lineEnd };
+    return { start: item.start, end: item.end };
+  }
+
+  function buildOffsetDimension(start, end, offsetPoint, label) {
+    const dx = end.x - start.x;
+    const dy = end.y - start.y;
+    const len = Math.hypot(dx, dy) || 1;
+    const nx = -dy / len;
+    const ny = dx / len;
+    const mid = { x: (start.x + end.x) / 2, y: (start.y + end.y) / 2 };
+    const offset = (offsetPoint.x - mid.x) * nx + (offsetPoint.y - mid.y) * ny;
+    return {
+      id: crypto.randomUUID(),
+      start,
+      end,
+      lineStart: { x: start.x + nx * offset, y: start.y + ny * offset },
+      lineEnd: { x: end.x + nx * offset, y: end.y + ny * offset },
+      label,
+    };
+  }
+
+  function drawDimension(ctx, item, selected = false) {
+    const color = '#000000';
+    const line = getDimensionLine(item);
+    ctx.save();
+    ctx.strokeStyle = color;
+    ctx.fillStyle = color;
+    const dimensionLineWidth = selected ? 3 : 2.25;
+    ctx.lineWidth = dimensionLineWidth;
+
+    [item.start, item.end].forEach((point, index) => {
+      const target = index === 0 ? line.start : line.end;
+      ctx.beginPath();
+      ctx.moveTo(point.x, point.y);
+      ctx.lineTo(target.x, target.y);
+      ctx.stroke();
+    });
+
+    ctx.beginPath();
+    ctx.moveTo(line.start.x, line.start.y);
+    ctx.lineTo(line.end.x, line.end.y);
+    ctx.stroke();
+
+    const tickLength = 18;
+    const tickAngle = (135 * Math.PI) / 180;
+    ctx.lineWidth = dimensionLineWidth * 2;
+    [line.start, line.end].forEach((point) => {
+      ctx.beginPath();
+      ctx.moveTo(point.x - Math.cos(tickAngle) * tickLength / 2, point.y - Math.sin(tickAngle) * tickLength / 2);
+      ctx.lineTo(point.x + Math.cos(tickAngle) * tickLength / 2, point.y + Math.sin(tickAngle) * tickLength / 2);
+      ctx.stroke();
+    });
+    ctx.lineWidth = dimensionLineWidth;
+
+    const midX = (line.start.x + line.end.x) / 2;
+    const midY = (line.start.y + line.end.y) / 2;
+    ctx.font = '700 21px Helvetica, Arial, sans-serif';
+    ctx.textAlign = 'center';
+    ctx.textBaseline = 'middle';
+    const label = item.label || 'Dimension';
+    const width = ctx.measureText(label).width;
+    const labelPaddingX = 10;
+    const labelHeight = 30;
+    const labelWidth = width + labelPaddingX * 2;
+    const dx = line.end.x - line.start.x;
+    const dy = line.end.y - line.start.y;
+    const lineLength = Math.hypot(dx, dy);
+    const isMostlyHorizontal = Math.abs(dx) >= Math.abs(dy);
+    const needsOutsideLabel = isMostlyHorizontal ? lineLength < labelWidth + 28 : lineLength < labelHeight + 28;
+    let labelX = midX;
+    let labelY = midY;
+
+    if (needsOutsideLabel) {
+      const leaderGap = 8;
+      if (isMostlyHorizontal) {
+        const leftPoint = line.start.x <= line.end.x ? line.start : line.end;
+        const rightPoint = line.start.x <= line.end.x ? line.end : line.start;
+        const placeLeft = leftPoint.x >= labelWidth + leaderGap || leftPoint.x >= ctx.canvas.width - rightPoint.x;
+        labelX = placeLeft ? leftPoint.x - leaderGap - labelWidth / 2 : rightPoint.x + leaderGap + labelWidth / 2;
+        labelY = midY;
+        ctx.beginPath();
+        ctx.moveTo(placeLeft ? leftPoint.x : rightPoint.x, midY);
+        ctx.lineTo(placeLeft ? labelX + labelWidth / 2 : labelX - labelWidth / 2, labelY);
+        ctx.stroke();
+      } else {
+        const topPoint = line.start.y <= line.end.y ? line.start : line.end;
+        const bottomPoint = line.start.y <= line.end.y ? line.end : line.start;
+        const placeTop = topPoint.y >= labelHeight + leaderGap || topPoint.y >= ctx.canvas.height - bottomPoint.y;
+        labelX = midX;
+        labelY = placeTop ? topPoint.y - leaderGap - labelHeight / 2 : bottomPoint.y + leaderGap + labelHeight / 2;
+        ctx.beginPath();
+        ctx.moveTo(midX, placeTop ? topPoint.y : bottomPoint.y);
+        ctx.lineTo(labelX, placeTop ? labelY + labelHeight / 2 : labelY - labelHeight / 2);
+        ctx.stroke();
+      }
+    }
+
+    ctx.fillStyle = '#ffffff';
+    ctx.fillRect(labelX - labelWidth / 2, labelY - labelHeight / 2, labelWidth, labelHeight);
+    ctx.fillStyle = color;
+    ctx.fillText(label, labelX, labelY);
+    ctx.restore();
+  }
+
+  function renderCanvas(showGuides) {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext('2d');
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    if (baseImage) {
+      ctx.drawImage(baseImage, 0, 0, canvas.width, canvas.height);
+    } else {
+      ctx.fillStyle = '#e5e5e5';
+      ctx.fillRect(0, 0, canvas.width, canvas.height);
+    }
+
+    artworks.forEach((item) => {
+      const alpha = item.opacity == null ? 1 : item.opacity;
+      ctx.save();
+      ctx.globalAlpha = alpha;
+      drawImageInQuad(ctx, item.img, item.points);
+      ctx.restore();
+      if (showGuides && item.id === selectedArtworkId) {
+        const rotateHandle = getRotateHandle(item);
+        ctx.strokeStyle = '#f5a523';
+        ctx.lineWidth = 2;
+        ctx.setLineDash([6, 4]);
+        ctx.beginPath();
+        item.points.forEach((point, index) => {
+          if (index === 0) ctx.moveTo(point.x, point.y);
+          else ctx.lineTo(point.x, point.y);
+        });
+        ctx.closePath();
+        ctx.stroke();
+        ctx.setLineDash([]);
+        ctx.beginPath();
+        const topMid = { x: (item.points[0].x + item.points[1].x) / 2, y: (item.points[0].y + item.points[1].y) / 2 };
+        ctx.moveTo(topMid.x, topMid.y);
+        ctx.lineTo(rotateHandle.x, rotateHandle.y);
+        ctx.stroke();
+        getArtworkHandles(item).forEach(({ x, y }) => {
+          ctx.fillStyle = '#ffffff';
+          ctx.strokeStyle = '#f5a523';
+          ctx.lineWidth = 2;
+          ctx.beginPath();
+          ctx.rect(x - HANDLE_SIZE / 2, y - HANDLE_SIZE / 2, HANDLE_SIZE, HANDLE_SIZE);
+          ctx.fill();
+          ctx.stroke();
+        });
+        ctx.fillStyle = '#1a1a1a';
+        ctx.strokeStyle = '#f5a523';
+        ctx.lineWidth = 2;
+        ctx.beginPath();
+        ctx.arc(rotateHandle.x, rotateHandle.y, HANDLE_SIZE / 1.5, 0, Math.PI * 2);
+        ctx.fill();
+        ctx.stroke();
+        ctx.fillStyle = '#f5a523';
+        ctx.font = '700 10px Helvetica, Arial, sans-serif';
+        ctx.fillText('↻', rotateHandle.x - 4, rotateHandle.y + 4);
+      }
+    });
+
+    dimensions.forEach(item => drawDimension(ctx, item, item.id === activeDimensionId));
+    if (showGuides && draftPoints.length > 0) {
+      ctx.fillStyle = '#000000';
+      draftPoints.forEach((point) => {
+        ctx.beginPath();
+        ctx.arc(point.x, point.y, 5, 0, Math.PI * 2);
+        ctx.fill();
+      });
+    }
+    if (showGuides && draftPoints.length === 2 && draftOffsetPoint) {
+      drawDimension(ctx, buildOffsetDimension(draftPoints[0], draftPoints[1], draftOffsetPoint, dimensionText || 'Dimension'), true);
+    }
+    if (showGuides && boxStart && boxEnd) {
+      const rect = getRectFromPoints(boxStart, boxEnd);
+      ctx.save();
+      ctx.strokeStyle = '#000000';
+      ctx.lineWidth = 2;
+      ctx.setLineDash([6, 4]);
+      ctx.strokeRect(rect.x, rect.y, rect.w, rect.h);
+      ctx.setLineDash([]);
+      ctx.restore();
+    }
+
+    if (showGuides && calibrationPoints.length > 0) {
+      ctx.fillStyle = '#22c55e';
+      calibrationPoints.forEach((point) => {
+        ctx.beginPath();
+        ctx.arc(point.x, point.y, 5, 0, Math.PI * 2);
+        ctx.fill();
+      });
+      if (calibrationPoints.length === 2) {
+        ctx.strokeStyle = '#22c55e';
+        ctx.lineWidth = 2;
+        ctx.beginPath();
+        ctx.moveTo(calibrationPoints[0].x, calibrationPoints[0].y);
+        ctx.lineTo(calibrationPoints[1].x, calibrationPoints[1].y);
+        ctx.stroke();
+      }
+    }
+  }
+
+  const hitHandle = (point, item = selectedArtwork) => {
+    if (!item) return null;
+    return getArtworkHandles(item).find(handle =>
+      Math.abs(point.x - handle.x) <= HANDLE_SIZE && Math.abs(point.y - handle.y) <= HANDLE_SIZE
+    ) || null;
+  };
+
+  const hitRotateHandle = (point, item = selectedArtwork) => {
+    if (!item) return false;
+    const handle = getRotateHandle(item);
+    return Math.hypot(point.x - handle.x, point.y - handle.y) <= HANDLE_SIZE * 1.4;
+  };
+
+  const findArtworkAtPoint = (point) => {
+    for (let i = artworks.length - 1; i >= 0; i -= 1) {
+      if (pointInPolygon(point, artworks[i].points)) return artworks[i];
+    }
+    return null;
+  };
+
+  const pxPerInch = (() => {
+    if (calibrationPoints.length !== 2 || !Number(calibrationDistance)) return null;
+    const [a, b] = calibrationPoints;
+    const px = Math.hypot(b.x - a.x, b.y - a.y);
+    return px / Number(calibrationDistance);
+  })();
+
+  function getRectFromPoints(a, b) {
+    const x = Math.min(a.x, b.x);
+    const y = Math.min(a.y, b.y);
+    return { x, y, w: Math.abs(b.x - a.x), h: Math.abs(b.y - a.y) };
+  }
+
+  function addBoxDimensions(rect) {
+    const offset = 28;
+    const groupId = crypto.randomUUID();
+    const widthDim = {
+      ...buildOffsetDimension(
+        { x: rect.x, y: rect.y },
+        { x: rect.x + rect.w, y: rect.y },
+        { x: rect.x + rect.w / 2, y: rect.y - offset },
+        boxWidthText || dimensionText || 'Width'
+      ),
+      group: 'box',
+      groupId,
+    };
+    const heightDim = {
+      ...buildOffsetDimension(
+        { x: rect.x, y: rect.y },
+        { x: rect.x, y: rect.y + rect.h },
+        { x: rect.x - offset, y: rect.y + rect.h / 2 },
+        boxHeightText || dimensionText || 'Height'
+      ),
+      group: 'box',
+      groupId,
+    };
+    setDimensions(prev => [...prev, widthDim, heightDim]);
+    setActiveDimensionId(widthDim.id);
+    setSelectedArtworkId(null);
+  }
+
+  const autoDimensionSelectedArtwork = () => {
+    if (!selectedArtwork) return;
+    const bounds = getArtworkBounds(selectedArtwork.points);
+    if (bounds.w < 8 || bounds.h < 8) return;
+    addBoxDimensions(bounds);
+  };
+
+  const findDimensionAtPoint = (point) => {
+    const distanceToSegment = (pointValue, start, end) => {
+      const dx = end.x - start.x;
+      const dy = end.y - start.y;
+      const lenSq = dx * dx + dy * dy || 1;
+      const t = Math.max(0, Math.min(1, ((pointValue.x - start.x) * dx + (pointValue.y - start.y) * dy) / lenSq));
+      const x = start.x + t * dx;
+      const y = start.y + t * dy;
+      return Math.hypot(pointValue.x - x, pointValue.y - y);
+    };
+    return dimensions.find(item => {
+      const line = getDimensionLine(item);
+      return distanceToSegment(point, line.start, line.end) < 12;
+    }) || null;
+  };
+
+  const updateActiveDimensionLabel = () => {
+    if (!activeDimensionId) return;
+    setDimensions(prev => prev.map(item => item.id === activeDimensionId ? { ...item, label: dimensionText || 'Dimension' } : item));
+  };
+
+  const removeActiveDimension = () => {
+    if (!activeDimensionId) return;
+    const selected = dimensions.find(item => item.id === activeDimensionId);
+    setDimensions(prev => {
+      if (selected?.group === 'box' && selected.groupId) return prev.filter(item => item.groupId !== selected.groupId);
+      return prev.filter(item => item.id !== activeDimensionId);
+    });
+    setActiveDimensionId(null);
+    setDimensionText('');
+  };
+
+  const resetDimensionDraft = () => {
+    setDraftPoints([]);
+    setDraftOffsetPoint(null);
+    setIsPlacingOffset(false);
+    setBoxStart(null);
+    setBoxEnd(null);
+  };
+
+  const autoDetectBoxDimensions = () => {
+    if (!baseImage) return;
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const detectCanvas = document.createElement('canvas');
+    const maxDetectW = 300;
+    const scale = Math.min(maxDetectW / canvas.width, 1);
+    detectCanvas.width = Math.max(1, Math.round(canvas.width * scale));
+    detectCanvas.height = Math.max(1, Math.round(canvas.height * scale));
+    const detectCtx = detectCanvas.getContext('2d', { willReadFrequently: true });
+    detectCtx.drawImage(baseImage, 0, 0, detectCanvas.width, detectCanvas.height);
+    const { width, height } = detectCanvas;
+    const { data } = detectCtx.getImageData(0, 0, width, height);
+    const columnCounts = new Uint16Array(width);
+    const rowCounts = new Uint16Array(height);
+    const marginX = Math.round(width * 0.01);
+    const marginY = Math.round(height * 0.01);
+    let nonWhiteCount = 0;
+
+    for (let y = marginY; y < height - marginY; y++) {
+      for (let x = marginX; x < width - marginX; x++) {
+        const p = (y * width + x) * 4;
+        const isWhite = data[p] >= 245 && data[p + 1] >= 245 && data[p + 2] >= 245;
+        if (data[p + 3] > 24 && !isWhite) {
+          columnCounts[x] += 1;
+          rowCounts[y] += 1;
+          nonWhiteCount += 1;
+        }
+      }
+    }
+
+    const minColumnHits = Math.max(2, Math.round(height * 0.006));
+    const minRowHits = Math.max(2, Math.round(width * 0.006));
+    let minX = -1;
+    let maxX = -1;
+    let minY = -1;
+    let maxY = -1;
+    for (let x = marginX; x < width - marginX; x++) if (columnCounts[x] >= minColumnHits) { minX = x; break; }
+    for (let x = width - marginX - 1; x >= marginX; x--) if (columnCounts[x] >= minColumnHits) { maxX = x; break; }
+    for (let y = marginY; y < height - marginY; y++) if (rowCounts[y] >= minRowHits) { minY = y; break; }
+    for (let y = height - marginY - 1; y >= marginY; y--) if (rowCounts[y] >= minRowHits) { maxY = y; break; }
+
+    const boundsW = maxX - minX;
+    const boundsH = maxY - minY;
+    const nonWhiteRatio = nonWhiteCount / ((width - marginX * 2) * (height - marginY * 2));
+    if (minX < 0 || minY < 0 || boundsW < width * 0.03 || boundsH < height * 0.03 || nonWhiteRatio > 0.65) {
+      window.alert('Could not detect a clear non-white object. Drag a box manually.');
+      return;
+    }
+
+    const padding = 4;
+    const rectX = Math.max(0, minX / scale - padding);
+    const rectY = Math.max(0, minY / scale - padding);
+    addBoxDimensions({
+      x: rectX,
+      y: rectY,
+      w: Math.min(canvas.width, maxX / scale + padding) - rectX,
+      h: Math.min(canvas.height, maxY / scale + padding) - rectY,
+    });
+  };
+
+  const handleArtworkFiles = (fileList) => {
+    const files = Array.from(fileList || []).filter(isPhotoFile);
+    if (!files.length) {
+      alert('Please upload image artwork.');
+      return;
+    }
+    files.forEach((file, fileIndex) => {
+    const url = URL.createObjectURL(file);
+    const img = new Image();
+    img.onload = () => {
+      URL.revokeObjectURL(url);
+      const canvas = canvasRef.current;
+      const maxW = canvas.width * 0.35;
+      const maxH = canvas.height * 0.35;
+      const scale = Math.min(maxW / img.naturalWidth, maxH / img.naturalHeight, 1);
+      const w = Math.max(40, img.naturalWidth * scale);
+      const h = Math.max(40, img.naturalHeight * scale);
+      const id = crypto.randomUUID();
+      const offset = (artworks.length + fileIndex) * 18;
+      const x = (canvas.width - w) / 2 + offset;
+      const y = (canvas.height - h) / 2 + offset;
+      const nextArtwork = {
+        id,
+        name: file.name,
+        img,
+        points: makeArtworkPoints(x, y, w, h),
+        ratio: img.naturalWidth / img.naturalHeight,
+        opacity: 1,
+      };
+      commitArtworks(prev => [...prev, nextArtwork]);
+      setSelectedArtworkId(id);
+      setArtworkWidth('');
+      setArtworkHeight('');
+    };
+    img.onerror = () => {
+      URL.revokeObjectURL(url);
+      alert('Could not load that artwork file.');
+    };
+    img.src = url;
+    });
+  };
+
+  const applySpecifiedSize = () => {
+    if (!selectedArtwork) return;
+    const widthValue = Number(artworkWidth);
+    const heightValue = Number(artworkHeight);
+    if (!widthValue && !heightValue) return;
+    if (sizeUnit === 'in' && !pxPerInch) {
+      alert('Calibrate the photo first, or switch the size unit to pixels.');
+      return;
+    }
+    const multiplier = sizeUnit === 'in' ? pxPerInch : 1;
+    const bounds = getArtworkBounds(selectedArtwork.points);
+    let nextW = widthValue ? widthValue * multiplier : bounds.w;
+    let nextH = heightValue ? heightValue * multiplier : bounds.h;
+    if (lockRatio && widthValue && !heightValue) nextH = nextW / selectedArtwork.ratio;
+    if (lockRatio && heightValue && !widthValue) nextW = nextH * selectedArtwork.ratio;
+    if (lockRatio && widthValue && heightValue) nextH = nextW / selectedArtwork.ratio;
+    const centerX = bounds.x + bounds.w / 2;
+    const centerY = bounds.y + bounds.h / 2;
+    commitArtworks(prev => prev.map(item => item.id === selectedArtwork.id
+      ? { ...item, points: makeArtworkPoints(centerX - nextW / 2, centerY - nextH / 2, Math.max(10, nextW), Math.max(10, nextH)) }
+      : item
+    ));
+  };
+
+  const removeSelectedArtwork = () => {
+    if (!selectedArtworkId) return;
+    commitArtworks(prev => {
+      const next = prev.filter(item => item.id !== selectedArtworkId);
+      setSelectedArtworkId(next[next.length - 1]?.id || null);
+      return next;
+    });
+  };
+
+  const duplicateSelectedArtwork = () => {
+    if (!selectedArtwork) return;
+    const id = crypto.randomUUID();
+    const copy = {
+      ...selectedArtwork,
+      id,
+      name: `${selectedArtwork.name || 'Artwork'} copy`,
+      points: selectedArtwork.points.map(point => ({ x: point.x + 18, y: point.y + 18 })),
+    };
+    commitArtworks(prev => [...prev, copy]);
+    setSelectedArtworkId(id);
+  };
+
+  const reorderLayer = (dragId, targetId) => {
+    if (!dragId || !targetId || dragId === targetId) return;
+    commitArtworks(prev => {
+      const next = [...prev];
+      const from = next.findIndex(item => item.id === dragId);
+      const to = next.findIndex(item => item.id === targetId);
+      if (from < 0 || to < 0) return prev;
+      const [moved] = next.splice(from, 1);
+      next.splice(to, 0, moved);
+      return next;
+    });
+  };
+
+  const updateSelectedArtwork = (changes) => {
+    if (!selectedArtworkId) return;
+    commitArtworks(prev => prev.map(item => item.id === selectedArtworkId ? { ...item, ...changes } : item));
+  };
+
+  const nudgeSelectedArtwork = (dx, dy) => {
+    if (!selectedArtworkId) return;
+    commitArtworks(prev => prev.map(item => item.id === selectedArtworkId
+      ? { ...item, points: item.points.map(point => ({ x: point.x + dx, y: point.y + dy })) }
+      : item
+    ));
+  };
+
+  const undo = () => {
+    if (historyIndex <= 0) return;
+    const nextIndex = historyIndex - 1;
+    const next = cloneArtworkState(history[nextIndex] || []);
+    setHistoryIndex(nextIndex);
+    setArtworks(next);
+    setSelectedArtworkId(current => next.some(item => item.id === current) ? current : next[next.length - 1]?.id || null);
+  };
+
+  const redo = () => {
+    if (historyIndex >= history.length - 1) return;
+    const nextIndex = historyIndex + 1;
+    const next = cloneArtworkState(history[nextIndex] || []);
+    setHistoryIndex(nextIndex);
+    setArtworks(next);
+    setSelectedArtworkId(current => next.some(item => item.id === current) ? current : next[next.length - 1]?.id || null);
+  };
+
+  const handlePointerDown = (e) => {
+    e.preventDefault();
+    const point = getCanvasPos(e);
+    if (activeTool === 'box') {
+      setBoxStart(point);
+      setBoxEnd(point);
+      setActiveDimensionId(null);
+      setSelectedArtworkId(null);
+      return;
+    }
+    if (activeTool === 'dimension') {
+      if (draftPoints.length === 2) {
+        setIsPlacingOffset(true);
+        setDraftOffsetPoint(point);
+        return;
+      }
+      const existingDimension = findDimensionAtPoint(point);
+      if (existingDimension) {
+        setActiveDimensionId(existingDimension.id);
+        setSelectedArtworkId(null);
+        setDimensionText(existingDimension.label || '');
+        return;
+      }
+      setDraftPoints(prev => prev.length >= 2 ? [point] : [...prev, point]);
+      setDraftOffsetPoint(null);
+      setActiveDimensionId(null);
+      setSelectedArtworkId(null);
+      return;
+    }
+    if (calibrating) {
+      setCalibrationPoints(prev => {
+        const next = prev.length >= 2 ? [point] : [...prev, point];
+        if (next.length === 2) setCalibrating(false);
+        return next;
+      });
+      return;
+    }
+    const existingDimension = findDimensionAtPoint(point);
+    if (existingDimension && !findArtworkAtPoint(point)) {
+      setActiveDimensionId(existingDimension.id);
+      setSelectedArtworkId(null);
+      setDimensionText(existingDimension.label || '');
+      return;
+    }
+    const targetArtwork = selectedArtwork && (hitHandle(point, selectedArtwork) || pointInPolygon(point, selectedArtwork.points))
+      ? selectedArtwork
+      : findArtworkAtPoint(point);
+    if (!targetArtwork) {
+      setSelectedArtworkId(null);
+      setActiveDimensionId(null);
+      return;
+    }
+    setSelectedArtworkId(targetArtwork.id);
+    setActiveDimensionId(null);
+    const handle = hitHandle(point, targetArtwork);
+    if (hitRotateHandle(point, targetArtwork)) {
+      const center = targetArtwork.points.reduce((acc, p) => ({ x: acc.x + p.x / targetArtwork.points.length, y: acc.y + p.y / targetArtwork.points.length }), { x: 0, y: 0 });
+      dragRef.current = {
+        type: 'rotate',
+        startAngle: Math.atan2(point.y - center.y, point.x - center.x),
+        center,
+        initial: { ...targetArtwork, points: targetArtwork.points.map(p => ({ ...p })) },
+      };
+    } else if (handle) {
+      dragRef.current = { type: 'resize', handle, start: point, initial: { ...targetArtwork, points: targetArtwork.points.map(p => ({ ...p })) } };
+    } else {
+      dragRef.current = { type: 'move', start: point, initial: { ...targetArtwork, points: targetArtwork.points.map(p => ({ ...p })) } };
+    }
+  };
+
+  const handlePointerMove = (e) => {
+    if (activeTool === 'box' && boxStart) {
+      e.preventDefault();
+      setBoxEnd(getCanvasPos(e));
+      return;
+    }
+    if (activeTool === 'dimension' && isPlacingOffset && draftPoints.length === 2) {
+      e.preventDefault();
+      setDraftOffsetPoint(getCanvasPos(e));
+      return;
+    }
+    if (!dragRef.current) return;
+    e.preventDefault();
+    const point = getCanvasPos(e);
+    const drag = dragRef.current;
+    if (drag.type === 'move') {
+      const dx = point.x - drag.start.x;
+      const dy = point.y - drag.start.y;
+      const points = drag.initial.points.map(p => ({ x: p.x + dx, y: p.y + dy }));
+      setArtworksLive(prev => prev.map(item => item.id === drag.initial.id ? { ...item, points } : item));
+      return;
+    }
+
+    if (drag.type === 'rotate') {
+      const currentAngle = Math.atan2(point.y - drag.center.y, point.x - drag.center.x);
+      const degrees = ((currentAngle - drag.startAngle) * 180) / Math.PI;
+      const points = rotatePoints(drag.initial.points, degrees);
+      setArtworksLive(prev => prev.map(item => item.id === drag.initial.id ? { ...item, points } : item));
+      return;
+    }
+
+    const minSize = 16;
+    const handleIndex = drag.handle.index;
+    if (!lockRatio) {
+      const points = drag.initial.points.map((p, index) => index === handleIndex ? point : { ...p });
+      setArtworksLive(prev => prev.map(item => item.id === drag.initial.id ? { ...item, points } : item));
+      return;
+    }
+
+    const oppositeIndex = (handleIndex + 2) % 4;
+    const anchor = drag.initial.points[oppositeIndex];
+    const dx = point.x - anchor.x;
+    const dy = point.y - anchor.y;
+    let w = Math.max(minSize, Math.abs(dx));
+    let h = w / drag.initial.ratio;
+    if (Math.abs(dy) > h) {
+      h = Math.max(minSize, Math.abs(dy));
+      w = h * drag.initial.ratio;
+    }
+    const x = dx >= 0 ? anchor.x : anchor.x - w;
+    const y = dy >= 0 ? anchor.y : anchor.y - h;
+    const points = makeArtworkPoints(x, y, w, h);
+    setArtworksLive(prev => prev.map(item => item.id === drag.initial.id ? { ...item, points } : item));
+  };
+
+  const handlePointerUp = () => {
+    if (activeTool === 'box') {
+      if (!boxStart || !boxEnd) return;
+      const rect = getRectFromPoints(boxStart, boxEnd);
+      if (rect.w >= 8 && rect.h >= 8) addBoxDimensions(rect);
+      setBoxStart(null);
+      setBoxEnd(null);
+      return;
+    }
+    if (activeTool === 'dimension') {
+      if (!isPlacingOffset || draftPoints.length !== 2 || !draftOffsetPoint) return;
+      if (Math.hypot(draftPoints[1].x - draftPoints[0].x, draftPoints[1].y - draftPoints[0].y) >= 8) {
+        const next = buildOffsetDimension(draftPoints[0], draftPoints[1], draftOffsetPoint, dimensionText || 'Dimension');
+        setDimensions(prev => [...prev, next]);
+        setActiveDimensionId(next.id);
+      }
+      setDraftPoints([]);
+      setDraftOffsetPoint(null);
+      setIsPlacingOffset(false);
+      return;
+    }
+    if (dragRef.current) {
+      const draggedId = dragRef.current.initial.id;
+      setArtworks(prev => {
+        setHistory(current => {
+          const trimmed = current.slice(0, historyIndex + 1);
+          return [...trimmed, cloneArtworkState(prev)].slice(-40);
+        });
+        setHistoryIndex(index => Math.min(index + 1, 39));
+        setSelectedArtworkId(draggedId);
+        return prev;
+      });
+    }
+    dragRef.current = null;
+  };
+
+  const handleArtworkDrop = (e) => {
+    e.preventDefault();
+    handleArtworkFiles(e.dataTransfer.files);
+  };
+
+  const handleApply = () => {
+    renderCanvas(false);
+    canvasRef.current.toBlob(blob => {
+      if (!blob) return;
+      const file = new File([blob], effectiveOutputName, { type: 'image/jpeg' });
+      if (activeTarget) {
+        setTargetSources(prev => ({ ...prev, [activeTarget.id]: URL.createObjectURL(blob) }));
+        onApply(file, activeTarget.id);
+      } else {
+        onApply(file);
+      }
+    }, 'image/jpeg', 0.92);
+    requestAnimationFrame(() => renderCanvas(true));
+  };
+
+  const saveAsJpg = () => {
+    renderCanvas(false);
+    canvasRef.current.toBlob(blob => {
+      if (!blob) return;
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = `${effectiveDownloadPrefix}-${new Date().toISOString().slice(0, 10)}.jpg`;
+      a.click();
+      URL.revokeObjectURL(url);
+      requestAnimationFrame(() => renderCanvas(true));
+    }, 'image/jpeg', 0.92);
+  };
+
+  useEffect(() => {
+    const handleKeyDown = (event) => {
+      if (!selectedArtworkId) return;
+      const target = event.target;
+      if (target && ['INPUT', 'TEXTAREA', 'SELECT'].includes(target.tagName)) return;
+      const step = event.shiftKey ? 10 : 1;
+      if (event.key === 'ArrowUp') { event.preventDefault(); nudgeSelectedArtwork(0, -step); }
+      if (event.key === 'ArrowDown') { event.preventDefault(); nudgeSelectedArtwork(0, step); }
+      if (event.key === 'ArrowLeft') { event.preventDefault(); nudgeSelectedArtwork(-step, 0); }
+      if (event.key === 'ArrowRight') { event.preventDefault(); nudgeSelectedArtwork(step, 0); }
+      if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === 'z') {
+        event.preventDefault();
+        if (event.shiftKey) redo();
+        else undo();
+      }
+      if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === 'y') {
+        event.preventDefault();
+        redo();
+      }
+    };
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectedArtworkId, historyIndex, history]);
+
+  return (
+    <div
+      style={{
+        position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.72)',
+        display: 'flex', alignItems: 'center', justifyContent: 'center',
+        zIndex: 9999, padding: 20,
+      }}
+      onClick={(e) => { if (e.target === e.currentTarget) onCancel(); }}
+    >
+      <div style={{
+        background: 'var(--card-bg)', borderRadius: 12, display: 'flex', flexDirection: 'column',
+        maxWidth: '98vw', maxHeight: '96vh', overflow: 'hidden',
+        boxShadow: '0 24px 64px rgba(0,0,0,0.55)',
+      }}>
+        {/* Header */}
+        <div style={{ padding: '12px 18px', borderBottom: '1px solid var(--border)', display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexShrink: 0 }}>
+          <div>
+            <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--text-primary)' }}>{title}</div>
+            <div style={{ fontSize: 11, color: 'var(--text-muted)', marginTop: 2 }}>{subtitle}</div>
+          </div>
+          <button onClick={onCancel} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-muted)', fontSize: 18, lineHeight: 1, padding: '0 2px' }}>✕</button>
+        </div>
+
+        {targets && (
+          <div style={{ padding: '10px 18px 0', display: 'flex', gap: 8, flexShrink: 0 }}>
+            {targets.map(target => (
+              <button
+                key={target.id}
+                type="button"
+                className={`btn btn-sm ${target.id === activeTargetId ? 'btn-primary' : 'btn-outline'}`}
+                onClick={() => setActiveTargetId(target.id)}
+              >
+                {target.label}
+              </button>
+            ))}
+            <span style={{ alignSelf: 'center', fontSize: 11, color: 'var(--text-muted)' }}>
+              Apply saves the current tab, then you can switch tabs without closing.
+            </span>
+          </div>
+        )}
+
+        {/* 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: 6, overflow: 'hidden' }}>
+            {[
+              ['select', 'Select'],
+              ['dimension', 'Line Dim'],
+              ['box', 'Box Dim'],
+            ].map(([tool, label]) => (
+              <button
+                key={tool}
+                className={`btn btn-sm ${activeTool === tool ? 'btn-primary' : 'btn-outline'}`}
+                style={{ border: 'none', borderRadius: 0 }}
+                onClick={() => { setActiveTool(tool); resetDimensionDraft(); setCalibrating(false); }}
+              >
+                {label}
+              </button>
+            ))}
+          </div>
+          <button className="btn btn-primary btn-sm" onClick={() => artworkInputRef.current?.click()}>Import Artwork</button>
+          <input
+            ref={artworkInputRef}
+            type="file"
+            accept={PHOTO_FILE_ACCEPT}
+            multiple
+            style={{ display: 'none' }}
+            onChange={e => { if (e.target.files.length) handleArtworkFiles(e.target.files); e.target.value = ''; }}
+          />
+          <button className="btn btn-outline btn-sm" onClick={undo} disabled={historyIndex <= 0}>Undo</button>
+          <button className="btn btn-outline btn-sm" onClick={redo} disabled={historyIndex >= history.length - 1}>Redo</button>
+          <button className="btn btn-outline btn-sm" onClick={removeSelectedArtwork} disabled={!selectedArtwork}>Remove Artwork</button>
+          <button className="btn btn-outline btn-sm" onClick={duplicateSelectedArtwork} disabled={!selectedArtwork}>Duplicate</button>
+          <button className="btn btn-outline btn-sm" onClick={autoDimensionSelectedArtwork} disabled={!selectedArtwork}>Auto Dim Artwork</button>
+          <input
+            type="text"
+            value={dimensionText}
+            onChange={e => setDimensionText(e.target.value)}
+            placeholder='Dimension text'
+            style={{ minHeight: 32, margin: 0, width: 145 }}
+          />
+          {activeTool === 'box' && (
+            <>
+              <input
+                type="text"
+                value={boxWidthText}
+                onChange={e => setBoxWidthText(e.target.value)}
+                placeholder='Width'
+                style={{ minHeight: 32, margin: 0, width: 90 }}
+              />
+              <input
+                type="text"
+                value={boxHeightText}
+                onChange={e => setBoxHeightText(e.target.value)}
+                placeholder='Height'
+                style={{ minHeight: 32, margin: 0, width: 90 }}
+              />
+              <button className="btn btn-outline btn-sm" onClick={autoDetectBoxDimensions} disabled={!loaded || !baseImage}>Auto Box</button>
+            </>
+          )}
+          <button className="btn btn-outline btn-sm" onClick={updateActiveDimensionLabel} disabled={!activeDimension}>Update Dim</button>
+          <button className="btn btn-outline btn-sm" onClick={removeActiveDimension} disabled={!activeDimension}>Remove Dim</button>
+          <button className={`btn btn-sm ${calibrating ? 'btn-primary' : 'btn-outline'}`} onClick={() => { setCalibrating(true); setCalibrationPoints([]); }}>
+            Pick Scale Points
+          </button>
+          <input
+            type="number"
+            min="0"
+            step="0.01"
+            placeholder="Real distance"
+            value={calibrationDistance}
+            onChange={e => setCalibrationDistance(e.target.value)}
+            style={{ width: 110, minHeight: 32, margin: 0 }}
+          />
+          <span style={{ fontSize: 12, color: 'var(--text-muted)' }}>inches</span>
+          <div style={{ width: 1, height: 28, background: 'var(--border)' }} />
+          <input
+            type="number"
+            min="0"
+            step="0.01"
+            placeholder="Artwork W"
+            value={artworkWidth}
+            onChange={e => setArtworkWidth(e.target.value)}
+            style={{ width: 100, minHeight: 32, margin: 0 }}
+          />
+          <input
+            type="number"
+            min="0"
+            step="0.01"
+            placeholder="Artwork H"
+            value={artworkHeight}
+            onChange={e => setArtworkHeight(e.target.value)}
+            style={{ width: 100, minHeight: 32, margin: 0 }}
+          />
+          <select value={sizeUnit} onChange={e => setSizeUnit(e.target.value)} style={{ width: 72, minHeight: 32, margin: 0 }}>
+            <option value="in">in</option>
+            <option value="px">px</option>
+          </select>
+          <label style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 12, color: 'var(--text-muted)' }}>
+            <input type="checkbox" checked={lockRatio} onChange={e => setLockRatio(e.target.checked)} style={{ width: 14, height: 14, margin: 0 }} />
+            Lock ratio
+          </label>
+          <label style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 12, color: 'var(--text-muted)' }}>
+            Opacity
+            <input
+              type="range"
+              min="0.1"
+              max="1"
+              step="0.05"
+              value={selectedArtwork?.opacity ?? 1}
+              onChange={e => updateSelectedArtwork({ opacity: Number(e.target.value) })}
+              disabled={!selectedArtwork}
+              style={{ width: 90 }}
+            />
+          </label>
+          <button className="btn btn-outline btn-sm" onClick={applySpecifiedSize} disabled={!selectedArtwork}>Apply Size</button>
+          <span style={{ fontSize: 11, color: 'var(--text-muted)' }}>
+            {pxPerInch ? `${pxPerInch.toFixed(1)} px/in` : calibrating ? 'Click two points on a known-size item' : 'Drop artwork here, drag layers, lock ratio for normal resize, unlock for free transform'}
+          </span>
+        </div>
+
+        <div style={{ display: 'grid', gridTemplateColumns: '220px minmax(0, 1fr)', minHeight: 0, flex: 1 }}>
+          <div style={{ borderRight: '1px solid var(--border)', background: 'var(--card-bg)', padding: 12, overflowY: 'auto' }}>
+            <div style={{ fontSize: 11, fontWeight: 700, color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: 0.5, marginBottom: 10 }}>Layers</div>
+            {dimensions.length > 0 && (
+              <>
+                <div style={{ fontSize: 10, fontWeight: 700, color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: 0.5, marginBottom: 6 }}>Dimensions</div>
+                <div style={{ display: 'flex', flexDirection: 'column', gap: 6, marginBottom: 14 }}>
+                  {dimensions.map((item, index) => (
+                    <button
+                      key={item.id}
+                      type="button"
+                      onClick={() => {
+                        setActiveDimensionId(item.id);
+                        setSelectedArtworkId(null);
+                        setDimensionText(item.label || '');
+                        setActiveTool('select');
+                      }}
+                      style={{
+                        border: `1px solid ${item.id === activeDimensionId ? 'var(--accent)' : 'var(--border)'}`,
+                        background: item.id === activeDimensionId ? 'rgba(245,165,35,0.12)' : 'var(--card-bg-2)',
+                        color: 'var(--text-primary)',
+                        borderRadius: 6,
+                        padding: '8px 10px',
+                        cursor: 'pointer',
+                        textAlign: 'left',
+                        fontSize: 12,
+                      }}
+                    >
+                      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
+                        <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{item.label || 'Dimension'}</span>
+                        <span style={{ color: 'var(--text-muted)', fontSize: 10 }}>D{index + 1}</span>
+                      </div>
+                    </button>
+                  ))}
+                </div>
+              </>
+            )}
+            <div style={{ fontSize: 10, fontWeight: 700, color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: 0.5, marginBottom: 6 }}>Artwork</div>
+            {artworks.length === 0 ? (
+              <div style={{ fontSize: 12, color: 'var(--text-muted)', lineHeight: 1.5 }}>
+                Import or drop artwork to create layers.
+              </div>
+            ) : (
+              <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
+                {[...artworks].reverse().map((item) => {
+                  const displayIndex = artworks.findIndex(layer => layer.id === item.id) + 1;
+                  return (
+                    <button
+                      key={item.id}
+                      type="button"
+                      draggable
+                      onDragStart={() => { layerDragRef.current = item.id; }}
+                      onDragOver={e => e.preventDefault()}
+                      onDrop={() => {
+                        reorderLayer(layerDragRef.current, item.id);
+                        layerDragRef.current = null;
+                      }}
+                      onClick={() => {
+                        setSelectedArtworkId(item.id);
+                        setActiveDimensionId(null);
+                      }}
+                      style={{
+                        border: `1px solid ${item.id === selectedArtworkId ? 'var(--accent)' : 'var(--border)'}`,
+                        background: item.id === selectedArtworkId ? 'rgba(245,165,35,0.12)' : 'var(--card-bg-2)',
+                        color: 'var(--text-primary)',
+                        borderRadius: 6,
+                        padding: '8px 10px',
+                        cursor: 'grab',
+                        textAlign: 'left',
+                        fontSize: 12,
+                      }}
+                    >
+                      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
+                        <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{item.name || 'Artwork'}</span>
+                        <span style={{ color: 'var(--text-muted)', fontSize: 10 }}>#{displayIndex}</span>
+                      </div>
+                    </button>
+                  );
+                })}
+              </div>
+            )}
+            <div style={{ fontSize: 11, color: 'var(--text-muted)', lineHeight: 1.5, marginTop: 12 }}>
+              Drag artwork layers up/down to change stacking. Use arrow keys to nudge selected artwork.
+            </div>
+          </div>
+
+          {/* Canvas area */}
+          <div
+            onDragOver={e => e.preventDefault()}
+            onDrop={handleArtworkDrop}
+            style={{ overflow: 'auto', background: '#2a2a2a', display: 'flex', alignItems: 'flex-start', justifyContent: 'center', position: 'relative', minHeight: 420 }}
+          >
+            {!loaded && (
+              <div style={{ padding: 48, color: '#888', fontSize: 13 }}>Loading image…</div>
+            )}
+            <canvas
+              ref={canvasRef}
+              style={{ display: loaded ? 'block' : 'none', cursor: calibrating || activeTool !== 'select' ? 'crosshair' : 'move', maxWidth: '100%', touchAction: 'none', userSelect: 'none' }}
+              onPointerDown={handlePointerDown}
+              onPointerMove={handlePointerMove}
+              onPointerUp={handlePointerUp}
+              onPointerLeave={handlePointerUp}
+            />
+          </div>
+        </div>
+
+        {/* Footer */}
+        <div style={{ padding: '12px 18px', borderTop: '1px solid var(--border)', display: 'flex', justifyContent: 'flex-end', gap: 8, flexShrink: 0 }}>
+          <button className="btn btn-outline btn-sm" onClick={onCancel}>Cancel</button>
+          <button className="btn btn-outline btn-sm" onClick={saveAsJpg}>Save as JPG</button>
+          <button className="btn btn-primary btn-sm" onClick={handleApply}>{effectiveApplyLabel}</button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/pages/team/BrandIdentity.jsx b/src/pages/team/BrandIdentity.jsx
deleted file mode 100644
index c9c8f42..0000000
--- a/src/pages/team/BrandIdentity.jsx
+++ /dev/null
@@ -1,505 +0,0 @@
-import { useState, useEffect, useRef } from 'react';
-import Layout from '../../components/Layout';
-import { supabase } from '../../lib/supabase';
-import { generateBrandBookPDF } from '../../lib/brandbook';
-
-const DEFAULT_COLORS = [
-  { name: 'Primary', hex: '#1a1a1a' },
-  { name: 'Accent', hex: '#F5A523' },
-  { name: 'White', hex: '#ffffff' },
-];
-
-const EMPTY_FORM = {
-  // Cover page
-  selectedCompanyId: '',
-  projectLogoDataUrl: null,
-  creationDate: new Date().toISOString().slice(0, 10),
-  revisionDate: '',
-  customerName: '',
-  streetAddress: '',
-  clientLogoUrl: '',
-  clientContactName: '',
-  clientContactEmail: '',
-  clientContactPhone: '',
-  approvedDate: '',
-  approvalNotes: '',
-  // Brand identity
-  companyName: '',
-  brandName: '',
-  tagline: '',
-  brandStory: '',
-  brandValues: '',
-  colors: DEFAULT_COLORS,
-  primaryFont: '',
-  secondaryFont: '',
-  fontNotes: '',
-  brandVoice: '',
-  brandAdjectives: '',
-  logoNotes: '',
-  dos: '',
-  donts: '',
-};
-
-export default function BrandBook() {
-  const [companies, setCompanies] = useState([]);
-  const [form, setForm] = useState(EMPTY_FORM);
-  const [generating, setGenerating] = useState(false);
-  const [notification, setNotification] = useState(null);
-  const [uploadingClientLogo, setUploadingClientLogo] = useState(false);
-  const [savingClientInfo, setSavingClientInfo] = useState(false);
-  const [clientInfoSaved, setClientInfoSaved] = useState(false);
-
-  const projectLogoRef = useRef();
-  const clientLogoRef = useRef();
-
-  useEffect(() => {
-    supabase.from('companies').select('id, name').order('name').then(({ data }) => setCompanies(data || []));
-  }, []);
-
-  const set = (field) => (e) => setForm(f => ({ ...f, [field]: e.target.value }));
-
-  const handleCompanyChange = async (e) => {
-    const companyId = e.target.value;
-    if (!companyId) {
-      setForm(f => ({ ...f, selectedCompanyId: '', companyName: '', customerName: '', streetAddress: '', clientLogoUrl: '', clientContactName: '', clientContactEmail: '', clientContactPhone: '' }));
-      return;
-    }
-    const { data: co } = await supabase.from('companies').select('*').eq('id', companyId).single();
-    if (co) {
-      setForm(f => ({
-        ...f,
-        selectedCompanyId: companyId,
-        companyName: co.name,
-        customerName: f.customerName || co.name,
-        streetAddress: co.address || f.streetAddress,
-        clientLogoUrl: co.client_logo_url || '',
-        clientContactName: co.contact_name || '',
-        clientContactEmail: co.contact_email || '',
-        clientContactPhone: co.contact_phone || '',
-      }));
-    }
-  };
-
-  const handleProjectLogoUpload = (e) => {
-    const file = e.target.files[0];
-    if (!file) return;
-    const reader = new FileReader();
-    reader.onload = (ev) => setForm(f => ({ ...f, projectLogoDataUrl: ev.target.result }));
-    reader.readAsDataURL(file);
-  };
-
-  const handleClientLogoUpload = async (e) => {
-    const file = e.target.files[0];
-    if (!file) return;
-    if (!form.selectedCompanyId) {
-      setNotification({ type: 'error', msg: 'Select a company before uploading their logo.' });
-      return;
-    }
-    setUploadingClientLogo(true);
-    const ext = file.name.split('.').pop().toLowerCase();
-    const path = `${form.selectedCompanyId}/logo.${ext}`;
-    await supabase.storage.from('company-logos').remove([path]);
-    const { error } = await supabase.storage.from('company-logos').upload(path, file, { upsert: true });
-    if (!error) {
-      const { data: { publicUrl } } = supabase.storage.from('company-logos').getPublicUrl(path);
-      await supabase.from('companies').update({ client_logo_url: publicUrl }).eq('id', form.selectedCompanyId);
-      setForm(f => ({ ...f, clientLogoUrl: publicUrl }));
-    } else {
-      setNotification({ type: 'error', msg: 'Failed to upload client logo.' });
-    }
-    setUploadingClientLogo(false);
-  };
-
-  const handleSaveClientInfo = async () => {
-    if (!form.selectedCompanyId) return;
-    setSavingClientInfo(true);
-    await supabase.from('companies').update({
-      address: form.streetAddress || null,
-      contact_name: form.clientContactName || null,
-      contact_email: form.clientContactEmail || null,
-      contact_phone: form.clientContactPhone || null,
-    }).eq('id', form.selectedCompanyId);
-    setSavingClientInfo(false);
-    setClientInfoSaved(true);
-    setTimeout(() => setClientInfoSaved(false), 2500);
-  };
-
-  const setColor = (i, field, value) => {
-    setForm(f => ({
-      ...f,
-      colors: f.colors.map((c, idx) => idx === i ? { ...c, [field]: value } : c),
-    }));
-  };
-
-  const addColor = () => setForm(f => ({ ...f, colors: [...f.colors, { name: '', hex: '#cccccc' }] }));
-  const removeColor = (i) => setForm(f => ({ ...f, colors: f.colors.filter((_, idx) => idx !== i) }));
-
-  const handleGenerate = async () => {
-    if (!form.brandName.trim()) {
-      setNotification({ type: 'error', msg: 'Brand name is required.' });
-      return;
-    }
-    setGenerating(true);
-    setNotification(null);
-    try {
-      await generateBrandBookPDF(form);
-      setNotification({ type: 'success', msg: '✓ Brand book PDF downloaded!' });
-    } catch (err) {
-      setNotification({ type: 'error', msg: `Failed to generate PDF: ${err.message}` });
-    }
-    setGenerating(false);
-  };
-
-  const handleReset = () => {
-    if (window.confirm('Clear all fields and start over?')) {
-      setForm(EMPTY_FORM);
-      setNotification(null);
-    }
-  };
-
-  return (
-    <Layout>
-      <div className="page-header">
-        <div>
-          <div className="page-title">Brand Book <span style={{ fontSize: 13, fontWeight: 500, color: 'var(--accent)', marginLeft: 8, padding: '2px 8px', border: '1px solid var(--accent)', borderRadius: 4 }}>beta</span></div>
-          <div className="page-subtitle">Fill in the brand details below and generate a PDF brand book.</div>
-        </div>
-        <div style={{ display: 'flex', gap: 8 }}>
-          <button className="btn btn-outline btn-sm" onClick={handleReset}>Reset</button>
-          <button className="btn btn-primary btn-sm" onClick={handleGenerate} disabled={generating}>
-            {generating ? 'Generating...' : '⬇ Generate PDF'}
-          </button>
-        </div>
-      </div>
-
-      {notification && (
-        <div className={`notification ${notification.type === 'error' ? 'notification-error' : 'notification-success'}`} style={{ marginBottom: 24 }}>
-          {notification.msg}
-        </div>
-      )}
-
-      <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
-
-        {/* ── COVER PAGE ─────────────────────────────────────────────────────────── */}
-        <div className="card">
-          <div className="card-title">Cover Page</div>
-
-          {/* Company + Brand Name */}
-          <div className="grid-2">
-            <div className="form-group">
-              <label>Client Company</label>
-              <select value={form.selectedCompanyId} onChange={handleCompanyChange}>
-                <option value="">— Select company —</option>
-                {companies.map(c => <option key={c.id} value={c.id}>{c.name}</option>)}
-              </select>
-            </div>
-            <div className="form-group">
-              <label>Brand Name *</label>
-              <input type="text" placeholder="e.g. Acme Corp" value={form.brandName} onChange={set('brandName')} />
-            </div>
-          </div>
-
-          {/* Project Logo */}
-          <div className="form-group">
-            <label>Project Logo <span style={{ fontWeight: 400, color: 'var(--text-muted)' }}>(top left, 5"×5" area)</span></label>
-            <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
-              {form.projectLogoDataUrl && (
-                <img
-                  src={form.projectLogoDataUrl}
-                  alt="Project logo preview"
-                  style={{ maxHeight: 60, maxWidth: 120, objectFit: 'contain', border: '1px solid var(--border)', borderRadius: 6, padding: 4, background: '#fff' }}
-                />
-              )}
-              <div>
-                <button className="btn btn-outline btn-sm" onClick={() => projectLogoRef.current?.click()}>
-                  {form.projectLogoDataUrl ? 'Replace Logo' : 'Upload Logo'}
-                </button>
-                {form.projectLogoDataUrl && (
-                  <button className="btn btn-outline btn-sm" style={{ marginLeft: 8, color: 'var(--danger)', borderColor: 'var(--danger)' }} onClick={() => setForm(f => ({ ...f, projectLogoDataUrl: null }))}>
-                    Remove
-                  </button>
-                )}
-                <input ref={projectLogoRef} type="file" accept="image/*" style={{ display: 'none' }} onChange={handleProjectLogoUpload} />
-              </div>
-            </div>
-          </div>
-
-          {/* Dates */}
-          <div className="grid-2">
-            <div className="form-group">
-              <label>Creation Date</label>
-              <input type="date" value={form.creationDate} onChange={set('creationDate')} />
-            </div>
-            <div className="form-group">
-              <label>Revision Date <span style={{ fontWeight: 400, color: 'var(--text-muted)' }}>(optional)</span></label>
-              <input type="date" value={form.revisionDate} onChange={set('revisionDate')} />
-            </div>
-          </div>
-
-          {/* Customer info */}
-          <div className="grid-2">
-            <div className="form-group">
-              <label>Customer Name</label>
-              <input type="text" placeholder="e.g. Acme Corp" value={form.customerName} onChange={set('customerName')} />
-            </div>
-            <div className="form-group">
-              <label>Street Address <span style={{ fontWeight: 400, color: 'var(--text-muted)' }}>(optional)</span></label>
-              <input type="text" placeholder="e.g. 123 Main St, City, State 00000" value={form.streetAddress} onChange={set('streetAddress')} />
-            </div>
-          </div>
-
-          {/* Divider */}
-          <div style={{ borderTop: '1px solid var(--border)', margin: '8px 0 20px' }} />
-
-          {/* Client info (saved per company) */}
-          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 14 }}>
-            <div>
-              <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--text-primary)' }}>Client Info</div>
-              <div style={{ fontSize: 12, color: 'var(--text-muted)', marginTop: 2 }}>Saved to the selected company — reused across all brand books.</div>
-            </div>
-            {form.selectedCompanyId && (
-              <button className="btn btn-outline btn-sm" onClick={handleSaveClientInfo} disabled={savingClientInfo}>
-                {savingClientInfo ? 'Saving...' : clientInfoSaved ? '✓ Saved' : 'Save to Company'}
-              </button>
-            )}
-          </div>
-
-          {/* Client logo */}
-          <div className="form-group">
-            <label>Client Logo <span style={{ fontWeight: 400, color: 'var(--text-muted)' }}>(3.5"×1.5" area, bottom right)</span></label>
-            <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
-              {form.clientLogoUrl && (
-                <img
-                  src={form.clientLogoUrl}
-                  alt="Client logo preview"
-                  style={{ maxHeight: 50, maxWidth: 140, objectFit: 'contain', border: '1px solid var(--border)', borderRadius: 6, padding: 4, background: '#fff' }}
-                />
-              )}
-              <div>
-                <button
-                  className="btn btn-outline btn-sm"
-                  onClick={() => clientLogoRef.current?.click()}
-                  disabled={uploadingClientLogo}
-                >
-                  {uploadingClientLogo ? 'Uploading...' : form.clientLogoUrl ? 'Replace Logo' : 'Upload Logo'}
-                </button>
-                {!form.selectedCompanyId && (
-                  <span style={{ marginLeft: 10, fontSize: 12, color: 'var(--text-muted)' }}>Select a company first</span>
-                )}
-                <input ref={clientLogoRef} type="file" accept="image/*" style={{ display: 'none' }} onChange={handleClientLogoUpload} />
-              </div>
-            </div>
-          </div>
-
-          <div className="grid-2" style={{ marginTop: 4 }}>
-            <div className="form-group">
-              <label>Contact Name</label>
-              <input type="text" placeholder="e.g. Jane Smith" value={form.clientContactName} onChange={set('clientContactName')} />
-            </div>
-            <div className="form-group">
-              <label>Email</label>
-              <input type="email" placeholder="e.g. jane@client.com" value={form.clientContactEmail} onChange={set('clientContactEmail')} />
-            </div>
-          </div>
-          <div className="form-group" style={{ maxWidth: 320 }}>
-            <label>Phone</label>
-            <input type="text" placeholder="e.g. (555) 000-0000" value={form.clientContactPhone} onChange={set('clientContactPhone')} />
-          </div>
-
-          {/* Divider */}
-          <div style={{ borderTop: '1px solid var(--border)', margin: '8px 0 20px' }} />
-
-          {/* Approval */}
-          <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--text-primary)', marginBottom: 14 }}>Approval</div>
-          <div className="grid-2">
-            <div className="form-group">
-              <label>Approved Date <span style={{ fontWeight: 400, color: 'var(--text-muted)' }}>(optional)</span></label>
-              <input type="date" value={form.approvedDate} onChange={set('approvedDate')} />
-            </div>
-          </div>
-          <div className="form-group">
-            <label>Notes <span style={{ fontWeight: 400, color: 'var(--text-muted)' }}>(optional)</span></label>
-            <textarea
-              placeholder="Any approval notes or conditions..."
-              value={form.approvalNotes}
-              onChange={set('approvalNotes')}
-              style={{ minHeight: 70 }}
-            />
-          </div>
-        </div>
-
-        {/* ── BRAND IDENTITY ─────────────────────────────────────────────────────── */}
-        <div className="card">
-          <div className="card-title">Brand Identity</div>
-          <div className="form-group">
-            <label>Tagline <span style={{ fontWeight: 400, color: 'var(--text-muted)' }}>(optional)</span></label>
-            <input type="text" placeholder="e.g. Built for the bold." value={form.tagline} onChange={set('tagline')} />
-          </div>
-        </div>
-
-        {/* ── BRAND STORY ────────────────────────────────────────────────────────── */}
-        <div className="card">
-          <div className="card-title">Brand Story & Values</div>
-          <div className="form-group">
-            <label>Brand Story</label>
-            <textarea
-              placeholder="Describe the brand — its origin, mission, and what makes it unique..."
-              value={form.brandStory}
-              onChange={set('brandStory')}
-              style={{ minHeight: 120 }}
-            />
-          </div>
-          <div className="form-group">
-            <label>
-              Brand Values
-              <span style={{ fontWeight: 400, color: 'var(--text-muted)', marginLeft: 6 }}>one per line</span>
-            </label>
-            <textarea
-              placeholder={"Innovation\nAuthenticity\nCommunity"}
-              value={form.brandValues}
-              onChange={set('brandValues')}
-              style={{ minHeight: 80 }}
-            />
-          </div>
-        </div>
-
-        {/* ── COLOR PALETTE ──────────────────────────────────────────────────────── */}
-        <div className="card">
-          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16 }}>
-            <div className="card-title" style={{ margin: 0 }}>Color Palette</div>
-            <button className="btn btn-outline btn-sm" onClick={addColor}>+ Add Color</button>
-          </div>
-          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
-            {form.colors.map((color, i) => (
-              <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
-                <input
-                  type="color"
-                  value={color.hex}
-                  onChange={e => setColor(i, 'hex', e.target.value)}
-                  style={{ width: 44, height: 38, padding: 2, borderRadius: 6, border: '1px solid var(--border)', cursor: 'pointer', background: 'none' }}
-                />
-                <input
-                  type="text"
-                  value={color.hex}
-                  onChange={e => setColor(i, 'hex', e.target.value)}
-                  placeholder="#000000"
-                  style={{ width: 100, margin: 0, fontFamily: 'monospace', fontSize: 13 }}
-                />
-                <input
-                  type="text"
-                  value={color.name}
-                  onChange={e => setColor(i, 'name', e.target.value)}
-                  placeholder="Color name"
-                  style={{ flex: 1, margin: 0 }}
-                />
-                <div style={{ width: 38, height: 38, borderRadius: 6, background: color.hex, border: '1px solid var(--border)', flexShrink: 0 }} />
-                <button
-                  type="button"
-                  onClick={() => removeColor(i)}
-                  style={{ background: 'none', border: 'none', color: 'var(--danger)', cursor: 'pointer', fontSize: 16, padding: '0 4px', flexShrink: 0 }}
-                >✕</button>
-              </div>
-            ))}
-          </div>
-        </div>
-
-        {/* ── TYPOGRAPHY ─────────────────────────────────────────────────────────── */}
-        <div className="card">
-          <div className="card-title">Typography</div>
-          <div className="grid-2">
-            <div className="form-group">
-              <label>Primary Font</label>
-              <input type="text" placeholder="e.g. Neue Haas Grotesk" value={form.primaryFont} onChange={set('primaryFont')} />
-            </div>
-            <div className="form-group">
-              <label>Secondary Font</label>
-              <input type="text" placeholder="e.g. Freight Text Pro" value={form.secondaryFont} onChange={set('secondaryFont')} />
-            </div>
-          </div>
-          <div className="form-group">
-            <label>Usage Notes</label>
-            <textarea
-              placeholder="e.g. Primary font used for headings and UI. Secondary font for body copy and long-form text..."
-              value={form.fontNotes}
-              onChange={set('fontNotes')}
-              style={{ minHeight: 80 }}
-            />
-          </div>
-        </div>
-
-        {/* ── BRAND VOICE ────────────────────────────────────────────────────────── */}
-        <div className="card">
-          <div className="card-title">Brand Voice & Tone</div>
-          <div className="form-group">
-            <label>Voice Description</label>
-            <textarea
-              placeholder="Describe how the brand communicates — its personality, tone, and style of writing..."
-              value={form.brandVoice}
-              onChange={set('brandVoice')}
-              style={{ minHeight: 100 }}
-            />
-          </div>
-          <div className="form-group">
-            <label>
-              Brand Adjectives
-              <span style={{ fontWeight: 400, color: 'var(--text-muted)', marginLeft: 6 }}>comma separated</span>
-            </label>
-            <input
-              type="text"
-              placeholder="e.g. Bold, Approachable, Modern, Trustworthy"
-              value={form.brandAdjectives}
-              onChange={set('brandAdjectives')}
-            />
-          </div>
-        </div>
-
-        {/* ── LOGO GUIDELINES ────────────────────────────────────────────────────── */}
-        <div className="card">
-          <div className="card-title">Logo Usage Guidelines</div>
-          <div className="form-group">
-            <label>Guidelines</label>
-            <textarea
-              placeholder="e.g. Always use the full-color logo on light backgrounds. Use the white version on dark backgrounds. Minimum size 40px. Never stretch, rotate, or recolor the logo..."
-              value={form.logoNotes}
-              onChange={set('logoNotes')}
-              style={{ minHeight: 100 }}
-            />
-          </div>
-        </div>
-
-        {/* ── DO'S & DON'TS ──────────────────────────────────────────────────────── */}
-        <div className="card">
-          <div className="card-title">Do's & Don'ts</div>
-          <div className="grid-2">
-            <div className="form-group">
-              <label style={{ color: '#16a34a' }}>✓ Do's <span style={{ fontWeight: 400, color: 'var(--text-muted)' }}>one per line</span></label>
-              <textarea
-                placeholder={"Use brand colors consistently\nMaintain clear space around the logo\nUse approved fonts only"}
-                value={form.dos}
-                onChange={set('dos')}
-                style={{ minHeight: 120 }}
-              />
-            </div>
-            <div className="form-group">
-              <label style={{ color: '#dc2626' }}>✕ Don'ts <span style={{ fontWeight: 400, color: 'var(--text-muted)' }}>one per line</span></label>
-              <textarea
-                placeholder={"Don't alter the logo colors\nDon't use unapproved fonts\nDon't place logo on busy backgrounds"}
-                value={form.donts}
-                onChange={set('donts')}
-                style={{ minHeight: 120 }}
-              />
-            </div>
-          </div>
-        </div>
-
-      </div>
-
-      <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 8, marginTop: 24, paddingBottom: 40 }}>
-        <button className="btn btn-outline" onClick={handleReset}>Reset</button>
-        <button className="btn btn-primary btn-lg" onClick={handleGenerate} disabled={generating}>
-          {generating ? 'Generating...' : '⬇ Generate Brand Book PDF'}
-        </button>
-      </div>
-    </Layout>
-  );
-}
diff --git a/src/pages/team/Companies.jsx b/src/pages/team/Companies.jsx
index ccc1ae8..6a60eb0 100644
--- a/src/pages/team/Companies.jsx
+++ b/src/pages/team/Companies.jsx
@@ -1,16 +1,26 @@
-import { useState, useEffect } from 'react';
-import { Link, useNavigate } from 'react-router-dom';
+import { useState, useEffect, useRef } from 'react';
+import { useNavigate } from 'react-router-dom';
 import Layout from '../../components/Layout';
 import { supabase } from '../../lib/supabase';
-import { cleanupTaskStorage } from '../../lib/deleteHelpers';
+import { deleteCompanyData } from '../../lib/deleteHelpers';
+import { restoreCompanyArchive } from '../../lib/archiveHelpers';
+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 [companies, setCompanies] = useState([]);
-  const [profiles, setProfiles] = useState([]);
-  const [projects, setProjects] = useState([]);
-  const [tasks, setTasks] = useState([]);
-  const [loading, setLoading] = useState(true);
+  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);
@@ -20,25 +30,29 @@ export default function Companies() {
   const [editingUserId, setEditingUserId] = useState(null);
   const [editUserVal, setEditUserVal] = useState('');
   const [deletingUserId, setDeletingUserId] = useState(null);
+  const [restoringArchive, setRestoringArchive] = useState(false);
+  const [restoreStatus, setRestoreStatus] = useState('');
+  const [filterCompany, setFilterCompany] = useState('');
+  const [activeTab, setActiveTab] = useState('companies');
+  const restoreInputRef = useRef(null);
+
+  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();
   }, []);
 
-  async function load() {
-    const [{ data: co }, { data: prof }, { data: p }, { data: t }] = await Promise.all([
-      supabase.from('companies').select('*').order('name'),
-      supabase.from('profiles').select('id, name, email, company_id').eq('role', 'client'),
-      supabase.from('projects').select('id, company_id, status'),
-      supabase.from('tasks').select('id, project_id, status'),
-    ]);
-    setCompanies(co || []);
-    setProfiles(prof || []);
-    setProjects(p || []);
-    setTasks(t || []);
-    setLoading(false);
-  }
-
   const handleCreate = async (e) => {
     e.preventDefault();
     if (!newForm.name.trim()) return;
@@ -50,6 +64,7 @@ export default function Companies() {
     }).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}`);
@@ -58,16 +73,39 @@ export default function Companies() {
 
   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;
-
-    const companyProjects = projects.filter(p => p.company_id === company.id);
-    const projectIds = companyProjects.map(p => p.id);
-    if (projectIds.length) {
-      const companyTaskIds = tasks.filter(t => projectIds.includes(t.project_id)).map(t => t.id);
-      await cleanupTaskStorage(companyTaskIds);
-    }
-
-    await supabase.from('companies').delete().eq('id', company.id);
+    await deleteCompanyData(company.id);
     setCompanies(prev => prev.filter(c => c.id !== company.id));
+    load();
+  };
+
+  const handleRestoreArchive = async (e) => {
+    const file = e.target.files?.[0];
+    e.target.value = '';
+    if (!file) return;
+
+    setRestoringArchive(true);
+    try {
+      const result = await restoreCompanyArchive(file, { onProgress: setRestoreStatus });
+      await load();
+
+      const missing = [];
+      if (result.missingProfiles.companyProfiles) missing.push(`${result.missingProfiles.companyProfiles} client profiles were not re-linked`);
+      if (result.missingProfiles.projectMembers) missing.push(`${result.missingProfiles.projectMembers} external project memberships were skipped`);
+      if (result.missingProfiles.taskAssignments) missing.push(`${result.missingProfiles.taskAssignments} task assignments were cleared`);
+      if (result.missingProfiles.submissions) missing.push(`${result.missingProfiles.submissions} submission user links were cleared`);
+      if (result.missingProfiles.invoices) missing.push(`${result.missingProfiles.invoices} invoice creator links were cleared`);
+
+      alert(
+        missing.length
+          ? `Restored ${result.companyCount || 1} compan${(result.companyCount || 1) === 1 ? 'y' : 'ies'}.\n\nNote: ${missing.join('; ')}.`
+          : `Restored ${result.companyCount || 1} compan${(result.companyCount || 1) === 1 ? 'y' : 'ies'} successfully.`
+      );
+    } catch (error) {
+      alert(`Restore failed: ${error.message}`);
+    } finally {
+      setRestoringArchive(false);
+      setRestoreStatus('');
+    }
   };
 
   const handleEditUserSave = async (userId) => {
@@ -81,7 +119,8 @@ export default function Companies() {
     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 errMsg = data?.error || error?.message;
+    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);
@@ -101,19 +140,33 @@ export default function Companies() {
       },
     });
     setSaving(false);
-    const errMsg = data?.error || error?.message || (error ? JSON.stringify(error) : null);
+    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 unassigned = profiles.filter(p => !p.company_id);
+  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>
@@ -122,20 +175,48 @@ export default function Companies() {
           <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 user{unassigned.length !== 1 ? 's' : ''}
+                · {unassigned.length} unassigned client{unassigned.length !== 1 ? 's' : ''}
               </span>
             )}
           </div>
         </div>
-        <div style={{ display: 'flex', gap: 8 }}>
-          <button className="btn btn-outline btn-sm" onClick={() => { setShowNewUser(s => !s); setShowNew(false); setUserError(''); }}>
-            {showNewUser ? 'Cancel' : '+ New User'}
-          </button>
-          <button className="btn btn-primary btn-sm" onClick={() => { setShowNew(s => !s); setShowNewUser(false); }}>
-            {showNew ? 'Cancel' : '+ New Company'}
-          </button>
+        <input
+          ref={restoreInputRef}
+          type="file"
+          accept=".zip,application/zip"
+          style={{ display: 'none' }}
+          onChange={handleRestoreArchive}
+        />
+      </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>
 
@@ -166,7 +247,7 @@ export default function Companies() {
                 <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">External</option>
+                  <option value="external">Subcontractor</option>
                 </select>
               </div>
             </div>
@@ -235,121 +316,362 @@ export default function Companies() {
         </div>
       )}
 
-      {unassigned.length > 0 && (
-        <div className="card" style={{ marginBottom: 24, borderColor: 'var(--danger)' }}>
-          <div className="card-title" style={{ color: 'var(--danger)' }}>Unassigned Users</div>
-          <p style={{ fontSize: 13, color: 'var(--text-secondary)', marginBottom: 12 }}>
-            These users have signed up but haven't been assigned to a 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 style={{ marginBottom: 12, display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, flexWrap: 'wrap' }}>
+        <div className="card-title" style={{ marginBottom: 0, display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap' }}>
+          {[
+            { id: 'companies', label: 'Companies' },
+            { id: 'clients', label: 'Clients' },
+            { id: 'subcontractors', label: 'Subcontractors' },
+          ].map((tab, index) => (
+            <span key={tab.id} style={{ display: 'inline-flex', alignItems: 'center', gap: 10 }}>
+              {index > 0 && <span style={{ color: 'var(--text-muted)' }}>|</span>}
+              <button
+                type="button"
+                onClick={() => setActiveTab(tab.id)}
+                style={{
+                  background: 'none',
+                  border: 'none',
+                  padding: 0,
+                  margin: 0,
+                  cursor: 'pointer',
+                  color: activeTab === tab.id ? 'var(--text-primary)' : 'var(--text-muted)',
+                  font: 'inherit',
+                  textTransform: 'inherit',
+                  letterSpacing: 'inherit',
+                }}
+              >
+                {tab.label}
+              </button>
+            </span>
+          ))}
         </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' && (
+        <>
+          <div className="card request-toolbar-card">
+            <div className="request-toolbar-section">
+              <div className="card-title" style={{ marginBottom: 10 }}>Restore Archive</div>
+              <div className="request-toolbar-actions">
+                <button
+                  className="btn btn-outline btn-sm"
+                  onClick={() => restoreInputRef.current?.click()}
+                  disabled={restoringArchive}
+                >
+                  {restoringArchive ? 'Restoring...' : 'Restore Archive'}
+                </button>
+              </div>
+              {restoreStatus && <div className="request-toolbar-status">{restoreStatus}</div>}
+            </div>
+          </div>
+
+          {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>
+          )}
+        </>
       )}
 
-      {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 style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
-          {companies.map(company => {
-            const companyProfiles = profiles.filter(p => p.company_id === company.id);
-            const companyProjects = projects.filter(p => p.company_id === company.id);
-            const projectIds = companyProjects.map(p => p.id);
-            const activeTasks = tasks.filter(t => projectIds.includes(t.project_id) && t.status !== 'client_approved');
-
-            return (
-              <div key={company.id} style={{ border: '1px solid var(--border)', borderRadius: 8, overflow: 'hidden', background: 'var(--card-bg)' }}>
-                <Link to={`/companies/${company.id}`} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '14px 18px', background: 'var(--card-bg-2)', borderBottom: '1px solid var(--border)', textDecoration: 'none', cursor: 'pointer' }}>
-                  <div>
-                    <div style={{ fontWeight: 700, fontSize: 15, color: 'var(--text-primary)' }}>{company.name}</div>
-                    <div style={{ fontSize: 12, color: 'var(--text-muted)', marginTop: 3 }}>
-                      {companyProfiles.length} user{companyProfiles.length !== 1 ? 's' : ''}
-                      {' · '}
-                      {companyProjects.length} project{companyProjects.length !== 1 ? 's' : ''}
-                      {activeTasks.length > 0 && <> · <span style={{ color: 'var(--accent)', fontWeight: 600 }}>{activeTasks.length} active</span></>}
-                      {company.phone && <> · {company.phone}</>}
-                    </div>
-                  </div>
-                  <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
-                    <span style={{ fontSize: 12, color: 'var(--text-muted)' }}>›</span>
+      {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
-                      type="button"
-                      onClick={e => { e.preventDefault(); e.stopPropagation(); handleDeleteCompany(company); }}
-                      style={{ background: 'none', border: 'none', color: 'var(--danger, #dc2626)', cursor: 'pointer', fontSize: 16, padding: '0 4px', lineHeight: 1 }}
-                      title="Delete company"
-                    >✕</button>
-                  </div>
-                </Link>
-
-                {companyProfiles.length > 0 && (
-                  <div>
-                    {companyProfiles.map((profile, i) => (
-                      <div
-                        key={profile.id}
-                        style={{
-                          display: 'flex', alignItems: 'center', gap: 10,
-                          padding: '10px 18px',
-                          borderBottom: i < companyProfiles.length - 1 ? '1px solid var(--border)' : 'none',
-                        }}
+                      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)}
                       >
-                        <div style={{
-                          width: 28, height: 28, borderRadius: 4, background: 'var(--accent)',
-                          display: 'flex', alignItems: 'center', justifyContent: 'center',
-                          fontSize: 11, fontWeight: 700, color: '#111', flexShrink: 0,
-                        }}>
-                          {profile.name?.split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2)}
-                        </div>
-                        <div>
-                          <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--text-primary)' }}>{profile.name}</div>
-                          <div style={{ fontSize: 11, color: 'var(--text-muted)' }}>{profile.email || '—'}</div>
-                        </div>
-                      </div>
+                        {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 1d56c82..8151f6b 100644
--- a/src/pages/team/CompanyDetail.jsx
+++ b/src/pages/team/CompanyDetail.jsx
@@ -4,7 +4,8 @@ import Layout from '../../components/Layout';
 import StatusBadge from '../../components/StatusBadge';
 import { supabase } from '../../lib/supabase';
 import { serviceTypes } from '../../data/mockData';
-import { cleanupTaskStorage } from '../../lib/deleteHelpers';
+import { cleanupTaskStorage, deleteCompanyData } from '../../lib/deleteHelpers';
+import { syncSeafileFolders } from '../../lib/seafileFolders';
 
 export default function CompanyDetail() {
   const { id } = useParams();
@@ -14,7 +15,7 @@ export default function CompanyDetail() {
   const [projects, setProjects] = useState([]);
   const [tasks, setTasks] = useState([]);
   const [users, setUsers] = useState([]);
-  const [unassigned, setUnassigned] = useState([]);
+  const [availableUsers, setAvailableUsers] = useState([]);
   const [prices, setPrices] = useState([]);
   const [loading, setLoading] = useState(true);
   const [tab, setTab] = useState('users');
@@ -30,28 +31,38 @@ export default function CompanyDetail() {
   const [editUserVal, setEditUserVal] = useState('');
   const [deletingUserId, setDeletingUserId] = useState(null);
 
-  useEffect(() => {
-    load();
-  }, [id]);
-
   async function load() {
-    const [{ data: co }, { data: p }, { data: pr }, { data: u }, { data: unassignedUsers }, { data: t }] = await Promise.all([
+    const [{ data: co }, { data: p }, { data: pr }, { data: memberRows }, { data: allUsers }, { data: t }] = await Promise.all([
       supabase.from('companies').select('*').eq('id', id).single(),
       supabase.from('projects').select('*').eq('company_id', id).order('created_at', { ascending: false }),
       supabase.from('company_prices').select('*').eq('company_id', id),
-      supabase.from('profiles').select('id, name, email, created_at').eq('company_id', id).eq('role', 'client'),
-      supabase.from('profiles').select('id, name, email').eq('role', 'client').is('company_id', null),
+      supabase.from('company_members').select('profile_id, created_at, profile:profiles(id, name, email, created_at, role, company_id)').eq('company_id', id),
+      supabase.from('profiles').select('id, name, email, created_at, role, company_id').eq('role', 'client').order('name'),
       supabase.from('tasks').select('*, project:projects!inner(company_id)').eq('project.company_id', id),
     ]);
+    const assignedMap = new Map();
+    (memberRows || []).forEach(row => {
+      if (row.profile?.role === 'client') assignedMap.set(row.profile.id, { ...row.profile, membership_created_at: row.created_at });
+    });
+    (allUsers || []).filter(user => user.company_id === id).forEach(user => {
+      if (!assignedMap.has(user.id)) assignedMap.set(user.id, user);
+    });
+    const assignedUsers = [...assignedMap.values()].sort((a, b) => (a.name || '').localeCompare(b.name || ''));
+    const assignedIds = new Set(assignedUsers.map(user => user.id));
     setCompany(co);
     setProjects(p || []);
     setPrices(pr || []);
-    setUsers(u || []);
-    setUnassigned(unassignedUsers || []);
+    setUsers(assignedUsers);
+    setAvailableUsers((allUsers || []).filter(user => !assignedIds.has(user.id)));
     setTasks(t || []);
     setLoading(false);
   }
 
+  useEffect(() => {
+    // eslint-disable-next-line react-hooks/set-state-in-effect
+    load();
+  }, [id]); // eslint-disable-line react-hooks/exhaustive-deps
+
   const handleCompanyNameSave = async (e) => {
     e.preventDefault();
     if (!nameVal.trim()) return;
@@ -73,38 +84,61 @@ export default function CompanyDetail() {
     if (!window.confirm(`Delete "${user.name}"? This will permanently remove their account and all access. This cannot be undone.`)) return;
     setDeletingUserId(user.id);
     const { data, error } = await supabase.functions.invoke('delete-user', { body: { user_id: user.id } });
-    const errMsg = data?.error || error?.message;
+    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; }
     setUsers(prev => prev.filter(u => u.id !== user.id));
+    setAvailableUsers(prev => prev.filter(u => u.id !== user.id));
     setDeletingUserId(null);
   };
 
   const handleAssignUser = async (userId) => {
     setAssigning(true);
-    await supabase.from('profiles').update({ company_id: id }).eq('id', userId);
-    // Move user from unassigned to users list
-    const user = unassigned.find(u => u.id === userId);
+    const user = availableUsers.find(u => u.id === userId);
+    const { error } = await supabase
+      .from('company_members')
+      .upsert({ company_id: id, profile_id: userId }, { onConflict: 'company_id,profile_id' });
+    if (error) {
+      alert('Failed to assign user. Please try again.');
+      setAssigning(false);
+      return;
+    }
+    if (user && !user.company_id) {
+      await supabase.from('profiles').update({ company_id: id }).eq('id', userId);
+    }
     if (user) {
-      setUsers(prev => [...prev, { ...user, created_at: new Date().toISOString() }]);
-      setUnassigned(prev => prev.filter(u => u.id !== userId));
+      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);
   };
 
   const handleRemoveUser = async (userId) => {
-    if (!window.confirm('Remove this user from the company? They will lose access to all company data.')) return;
-    await supabase.from('profiles').update({ company_id: null }).eq('id', userId);
+    if (!window.confirm('Remove this user from the company? They will lose access to this company data.')) return;
+    await supabase.from('company_members').delete().eq('company_id', id).eq('profile_id', userId);
     const user = users.find(u => u.id === userId);
+    if (user?.company_id === id) {
+      const { data: nextMembership } = await supabase
+        .from('company_members')
+        .select('company_id')
+        .eq('profile_id', userId)
+        .neq('company_id', id)
+        .limit(1)
+        .maybeSingle();
+      await supabase.from('profiles').update({ company_id: nextMembership?.company_id || null }).eq('id', userId);
+    }
     if (user) {
       setUsers(prev => prev.filter(u => u.id !== userId));
-      setUnassigned(prev => [...prev, user]);
+      setAvailableUsers(prev => [...prev, { ...user, company_id: user.company_id === id ? null : user.company_id }]
+        .sort((a, b) => (a.name || '').localeCompare(b.name || '')));
     }
   };
 
   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 cleanupTaskStorage(tasks.map(t => t.id));
-    await supabase.from('companies').delete().eq('id', id);
+    await deleteCompanyData(id);
     navigate('/companies');
   };
 
@@ -247,9 +281,9 @@ export default function CompanyDetail() {
             }}
           >
             {t}
-            {t === 'users' && unassigned.length > 0 && (
+            {t === 'users' && availableUsers.length > 0 && (
               <span style={{ marginLeft: 6, fontSize: 10, background: 'var(--danger)', color: 'white', padding: '1px 5px', borderRadius: 10, fontWeight: 700 }}>
-                {unassigned.length}
+                {availableUsers.length}
               </span>
             )}
           </button>
@@ -297,6 +331,7 @@ export default function CompanyDetail() {
                           <>
                             <div style={{ fontWeight: 600, fontSize: 14 }}>{user.name}</div>
                             <div style={{ fontSize: 12, color: 'var(--text-muted)' }}>{user.email || '—'}</div>
+                            <div style={{ fontSize: 11, color: 'var(--text-muted)', textTransform: 'capitalize', marginTop: 2 }}>{user.role || '—'}</div>
                           </>
                         )}
                       </div>
@@ -327,14 +362,14 @@ export default function CompanyDetail() {
             )}
           </div>
 
-          {unassigned.length > 0 && (
+          {availableUsers.length > 0 && (
             <div className="card">
-              <div className="card-title">Unassigned Users</div>
+              <div className="card-title">Available Users</div>
               <p style={{ fontSize: 13, color: 'var(--text-secondary)', marginBottom: 14 }}>
-                These users have signed up but aren't assigned to any company yet.
+                Add an existing client user to this company. External subcontractors are assigned to projects instead.
               </p>
               <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
-                {unassigned.map(user => (
+                {availableUsers.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 ? (
@@ -354,6 +389,7 @@ export default function CompanyDetail() {
                         <>
                           <div style={{ fontWeight: 600, fontSize: 13 }}>{user.name}</div>
                           <div style={{ fontSize: 12, color: 'var(--text-muted)' }}>{user.email}</div>
+                          <div style={{ fontSize: 11, color: 'var(--text-muted)', textTransform: 'capitalize', marginTop: 2 }}>{user.role || '—'}</div>
                         </>
                       )}
                     </div>
@@ -422,8 +458,8 @@ export default function CompanyDetail() {
                 const active = projectTasks.filter(t => t.status !== 'client_approved').length;
                 const done = projectTasks.filter(t => t.status === 'client_approved').length;
                 return (
-                  <div key={project.id} style={{ display: 'flex', alignItems: 'center', background: 'var(--card-bg)', border: '1px solid var(--border)', borderRadius: 8, overflow: 'hidden' }}>
-                    <Link to={`/projects/${project.id}`} style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '14px 16px', textDecoration: 'none', cursor: 'pointer' }}>
+                  <div key={project.id} className="interactive-surface" style={{ display: 'flex', alignItems: 'center', background: 'var(--card-bg)', border: '1px solid var(--border)', borderRadius: 8, overflow: 'hidden' }}>
+                    <Link to={`/projects/${project.id}`} className="interactive-row" style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '14px 16px', textDecoration: 'none', cursor: 'pointer' }}>
                       <div>
                         <div style={{ fontWeight: 600, fontSize: 14, color: 'var(--text-primary)' }}>{project.name}</div>
                         <div style={{ fontSize: 12, color: 'var(--text-muted)', marginTop: 3 }}>
diff --git a/src/pages/team/Converters.jsx b/src/pages/team/Converters.jsx
new file mode 100644
index 0000000..d5e1c0e
--- /dev/null
+++ b/src/pages/team/Converters.jsx
@@ -0,0 +1,432 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+import JSZip from 'jszip';
+import { heicTo, isHeic } from 'heic-to/csp';
+import Layout from '../../components/Layout';
+import LoadingButton from '../../components/LoadingButton';
+
+const INPUT_ACCEPT = 'image/*,.heic,.heif,.avif,.tif,.tiff,.bmp,.webp,.jpeg,.jpg,.png,.gif';
+const OUTPUT_FORMATS = [
+  { value: 'jpeg', label: 'JPG', mime: 'image/jpeg', extension: 'jpg' },
+  { value: 'png', label: 'PNG', mime: 'image/png', extension: 'png' },
+  { value: 'webp', label: 'WEBP', mime: 'image/webp', extension: 'webp' },
+];
+const HEIC_EXTENSIONS = new Set(['heic', 'heif']);
+const MAX_FILES = 100;
+
+function getExtension(name = '') {
+  return name.split('.').pop()?.toLowerCase() || '';
+}
+
+function isHeicFile(file) {
+  return HEIC_EXTENSIONS.has(getExtension(file.name)) || file.type === 'image/heic' || file.type === 'image/heif';
+}
+
+function stripExtension(name = '') {
+  return name.replace(/\.[^.]+$/, '') || 'converted-image';
+}
+
+function downloadBlob(blob, filename) {
+  const url = URL.createObjectURL(blob);
+  const link = document.createElement('a');
+  link.href = url;
+  link.download = filename;
+  document.body.appendChild(link);
+  link.click();
+  link.remove();
+  setTimeout(() => URL.revokeObjectURL(url), 1000);
+}
+
+async function loadImageFromBlob(blob) {
+  if ('createImageBitmap' in window) {
+    try {
+      return await createImageBitmap(blob);
+    } catch {
+      // Fallback to HTMLImageElement below.
+    }
+  }
+
+  return new Promise((resolve, reject) => {
+    const url = URL.createObjectURL(blob);
+    const img = new Image();
+    img.onload = () => {
+      URL.revokeObjectURL(url);
+      resolve(img);
+    };
+    img.onerror = () => {
+      URL.revokeObjectURL(url);
+      reject(new Error('Could not decode image.'));
+    };
+    img.src = url;
+  });
+}
+
+async function canvasToBlob(canvas, type, quality) {
+  return new Promise((resolve, reject) => {
+    canvas.toBlob((blob) => {
+      if (!blob) {
+        reject(new Error('Conversion failed.'));
+        return;
+      }
+      resolve(blob);
+    }, type, quality);
+  });
+}
+
+async function convertRasterBlob(blob, format, quality) {
+  const image = await loadImageFromBlob(blob);
+  const width = image.width || image.naturalWidth;
+  const height = image.height || image.naturalHeight;
+  const canvas = document.createElement('canvas');
+  canvas.width = width;
+  canvas.height = height;
+  const ctx = canvas.getContext('2d');
+
+  if (!ctx) throw new Error('Canvas is not available in this browser.');
+
+  if (format.mime === 'image/jpeg') {
+    ctx.fillStyle = '#ffffff';
+    ctx.fillRect(0, 0, width, height);
+  }
+
+  ctx.drawImage(image, 0, 0, width, height);
+  const outputBlob = await canvasToBlob(canvas, format.mime, quality);
+
+  if (typeof image.close === 'function') image.close();
+  return outputBlob;
+}
+
+async function convertHeicFile(file, format, quality) {
+  if (format.mime === 'image/jpeg' || format.mime === 'image/png') {
+    try {
+      return await heicTo({ blob: file, type: format.mime, quality });
+    } catch (primaryError) {
+      try {
+        return await convertRasterBlob(file, format, quality);
+      } catch {
+        throw new Error(primaryError?.message || 'HEIC format not supported.');
+      }
+    }
+  }
+
+  const bitmap = await heicTo({ blob: file, type: 'bitmap' });
+  const width = bitmap.width || bitmap.naturalWidth;
+  const height = bitmap.height || bitmap.naturalHeight;
+  const canvas = document.createElement('canvas');
+  canvas.width = width;
+  canvas.height = height;
+  const ctx = canvas.getContext('2d');
+  if (!ctx) throw new Error('Canvas is not available in this browser.');
+
+  if (format.mime === 'image/jpeg') {
+    ctx.fillStyle = '#ffffff';
+    ctx.fillRect(0, 0, width, height);
+  }
+
+  ctx.drawImage(bitmap, 0, 0, width, height);
+  if (typeof bitmap.close === 'function') bitmap.close();
+  return canvasToBlob(canvas, format.mime, quality);
+}
+
+async function convertFile(file, format, quality) {
+  const looksHeic = isHeicFile(file);
+  const confirmedHeic = looksHeic ? await isHeic(file).catch(() => false) : false;
+  if (looksHeic || confirmedHeic) {
+    return convertHeicFile(file, format, quality);
+  }
+
+  return convertRasterBlob(file, format, quality);
+}
+
+export default function Converters() {
+  const inputRef = useRef(null);
+  const [files, setFiles] = useState([]);
+  const [outputFormat, setOutputFormat] = useState('jpeg');
+  const [quality, setQuality] = useState(0.92);
+  const [results, setResults] = useState([]);
+  const [converting, setConverting] = useState(false);
+  const [downloading, setDownloading] = useState('');
+  const [limitMessage, setLimitMessage] = useState('');
+
+  const selectedFormat = useMemo(
+    () => OUTPUT_FORMATS.find((format) => format.value === outputFormat) || OUTPUT_FORMATS[0],
+    [outputFormat]
+  );
+
+  useEffect(() => () => {
+    results.forEach((result) => {
+      if (result.previewUrl) URL.revokeObjectURL(result.previewUrl);
+    });
+  }, [results]);
+
+  const addFiles = (incoming) => {
+    const nextFiles = Array.from(incoming || []).filter(Boolean);
+    if (!nextFiles.length) return;
+
+    setFiles((current) => {
+      const existing = new Set(current.map(file => `${file.name}-${file.size}-${file.lastModified}`));
+      const deduped = nextFiles.filter(file => !existing.has(`${file.name}-${file.size}-${file.lastModified}`));
+      const availableSlots = Math.max(0, MAX_FILES - current.length);
+      const accepted = deduped.slice(0, availableSlots);
+      const skippedCount = deduped.length - accepted.length;
+
+      setLimitMessage(skippedCount > 0
+        ? `Only the first ${MAX_FILES} files can be queued at one time. ${skippedCount} file${skippedCount === 1 ? '' : 's'} were skipped.`
+        : ''
+      );
+
+      return [...current, ...accepted];
+    });
+  };
+
+  const removeFile = (targetIndex) => {
+    setFiles((current) => current.filter((_, index) => index !== targetIndex));
+  };
+
+  const clearAll = () => {
+    setFiles([]);
+    setResults((current) => {
+      current.forEach((result) => {
+        if (result.previewUrl) URL.revokeObjectURL(result.previewUrl);
+      });
+      return [];
+    });
+  };
+
+  const handleConvert = async () => {
+    if (!files.length) return;
+
+    setConverting(true);
+    setResults((current) => {
+      current.forEach((result) => {
+        if (result.previewUrl) URL.revokeObjectURL(result.previewUrl);
+      });
+      return files.map((file) => ({
+        id: `${file.name}-${file.size}-${file.lastModified}`,
+        name: file.name,
+        status: 'pending',
+        previewUrl: '',
+        blob: null,
+        error: '',
+      }));
+    });
+
+    for (let index = 0; index < files.length; index += 1) {
+      const file = files[index];
+      const id = `${file.name}-${file.size}-${file.lastModified}`;
+
+      setResults((current) => current.map((result) => (
+        result.id === id ? { ...result, status: 'converting', error: '' } : result
+      )));
+
+      try {
+        const blob = await convertFile(file, selectedFormat, quality);
+        const previewUrl = URL.createObjectURL(blob);
+
+        setResults((current) => current.map((result) => {
+          if (result.id !== id) return result;
+          if (result.previewUrl) URL.revokeObjectURL(result.previewUrl);
+          return {
+            ...result,
+            status: 'done',
+            blob,
+            previewUrl,
+            error: '',
+          };
+        }));
+      } catch (error) {
+        setResults((current) => current.map((result) => (
+          result.id === id
+            ? { ...result, status: 'error', blob: null, previewUrl: '', error: error.message || 'Conversion failed.' }
+            : result
+        )));
+      }
+    }
+
+    setConverting(false);
+  };
+
+  const handleDownloadAll = async () => {
+    const completed = results.filter(result => result.status === 'done' && result.blob);
+    if (!completed.length || downloading) return;
+
+    setDownloading('all');
+    try {
+      const zip = new JSZip();
+      completed.forEach((result) => {
+        zip.file(`${stripExtension(result.name)}.${selectedFormat.extension}`, result.blob);
+      });
+
+      const blob = await zip.generateAsync({ type: 'blob' });
+      downloadBlob(blob, `converted-images-${selectedFormat.extension}.zip`);
+    } finally {
+      setDownloading('');
+    }
+  };
+
+  const completedCount = results.filter(result => result.status === 'done').length;
+
+  return (
+    <Layout>
+      <div className="page-header">
+        <div>
+          <div className="page-title">Image Converter</div>
+          <div className="page-subtitle">Convert image files in bulk, including HEIC/HEIF to JPG, PNG, or WEBP.</div>
+        </div>
+      </div>
+
+      <div style={{ display: 'grid', gap: 24 }}>
+        <div className="card">
+          <div className="card-title">Image Converter</div>
+          <div style={{ display: 'grid', gap: 18 }}>
+            <div
+              onClick={() => inputRef.current?.click()}
+              onDragOver={(e) => e.preventDefault()}
+              onDrop={(e) => {
+                e.preventDefault();
+                addFiles(e.dataTransfer.files);
+              }}
+              style={{
+                border: '2px dashed var(--border)',
+                borderRadius: 10,
+                padding: '28px 18px',
+                textAlign: 'center',
+                cursor: 'pointer',
+                background: 'var(--card-bg-2)',
+                color: 'var(--text-muted)',
+              }}
+            >
+              <div style={{ fontSize: 15, fontWeight: 600, color: 'var(--text-primary)', marginBottom: 6 }}>
+                Drop images here or click to upload
+              </div>
+              <div style={{ fontSize: 13 }}>
+                Supports JPG, PNG, WEBP, GIF, BMP, TIFF, AVIF, HEIC, and HEIF. Max {MAX_FILES} files per batch.
+              </div>
+            </div>
+            <input
+              ref={inputRef}
+              type="file"
+              accept={INPUT_ACCEPT}
+              multiple
+              style={{ display: 'none' }}
+              onChange={(e) => {
+                addFiles(e.target.files);
+                e.target.value = '';
+              }}
+            />
+
+            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: 14 }}>
+              <div className="form-group" style={{ margin: 0 }}>
+                <label>Convert To</label>
+                <select value={outputFormat} onChange={(e) => setOutputFormat(e.target.value)}>
+                  {OUTPUT_FORMATS.map((format) => (
+                    <option key={format.value} value={format.value}>{format.label}</option>
+                  ))}
+                </select>
+              </div>
+              <div className="form-group" style={{ margin: 0 }}>
+                <label>Quality</label>
+                <input
+                  type="range"
+                  min="0.5"
+                  max="1"
+                  step="0.01"
+                  value={quality}
+                  disabled={selectedFormat.mime === 'image/png'}
+                  onChange={(e) => setQuality(Number(e.target.value))}
+                />
+                <div style={{ fontSize: 12, color: 'var(--text-muted)', marginTop: 6 }}>
+                  {selectedFormat.mime === 'image/png'
+                    ? 'PNG uses lossless output.'
+                    : `${Math.round(quality * 100)}% output quality.`}
+                </div>
+              </div>
+            </div>
+
+            <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
+              <button className="btn btn-primary" onClick={handleConvert} disabled={!files.length || converting}>
+                {converting ? 'Converting...' : `Convert ${files.length ? `(${files.length})` : ''}`}
+              </button>
+              <LoadingButton className="btn btn-outline" loading={downloading === 'all'} disabled={!completedCount || Boolean(downloading)} loadingText="Preparing..." onClick={handleDownloadAll}>Download All</LoadingButton>
+              <button className="btn btn-outline" onClick={clearAll} disabled={!files.length && !results.length}>
+                Clear
+              </button>
+            </div>
+            {limitMessage && (
+              <div style={{ fontSize: 12, color: 'var(--text-muted)' }}>
+                {limitMessage}
+              </div>
+            )}
+          </div>
+        </div>
+
+        <div className="card">
+          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, marginBottom: 14, flexWrap: 'wrap' }}>
+            <div className="card-title" style={{ margin: 0 }}>Files</div>
+            <div style={{ fontSize: 12, color: 'var(--text-muted)' }}>
+              {files.length} selected · {completedCount} converted
+            </div>
+          </div>
+
+          {!files.length ? (
+            <div style={{ color: 'var(--text-muted)', fontSize: 13 }}>No files added yet.</div>
+          ) : (
+            <div style={{ display: 'grid', gap: 12 }}>
+              {files.map((file, index) => {
+                const id = `${file.name}-${file.size}-${file.lastModified}`;
+                const result = results.find(item => item.id === id);
+                const outputName = `${stripExtension(file.name)}.${selectedFormat.extension}`;
+
+                return (
+                  <div
+                    key={id}
+                    style={{
+                      border: '1px solid var(--border)',
+                      borderRadius: 10,
+                      padding: 14,
+                      display: 'grid',
+                      gridTemplateColumns: 'minmax(0, 1fr) auto',
+                      gap: 14,
+                      alignItems: 'center',
+                    }}
+                  >
+                    <div style={{ minWidth: 0 }}>
+                      <div style={{ fontSize: 14, fontWeight: 700, color: 'var(--text-primary)' }}>{file.name}</div>
+                      <div style={{ fontSize: 12, color: 'var(--text-muted)', marginTop: 4 }}>
+                        {file.type || 'Unknown type'} · {(file.size / 1024 / 1024).toFixed(file.size >= 1024 * 1024 ? 2 : 3)} MB
+                      </div>
+                      {result?.status === 'error' && (
+                        <div style={{ fontSize: 12, color: 'var(--danger)', marginTop: 8 }}>{result.error}</div>
+                      )}
+                      {result?.status === 'done' && (
+                        <div style={{ fontSize: 12, color: 'var(--success, #16a34a)', marginTop: 8 }}>
+                          Ready as {outputName}
+                        </div>
+                      )}
+                      {result?.status === 'converting' && (
+                        <div style={{ fontSize: 12, color: 'var(--accent)', marginTop: 8 }}>Converting...</div>
+                      )}
+                    </div>
+
+                    <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', justifyContent: 'flex-end' }}>
+                      {result?.status === 'done' && result.blob && (
+                        <button
+                          className="btn btn-outline btn-sm"
+                          onClick={() => downloadBlob(result.blob, outputName)}
+                        >
+                          Download
+                        </button>
+                      )}
+                      <button className="btn btn-outline btn-sm" onClick={() => removeFile(index)}>
+                        Remove
+                      </button>
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          )}
+        </div>
+      </div>
+    </Layout>
+  );
+}
diff --git a/src/pages/team/CreateInvoice.jsx b/src/pages/team/CreateInvoice.jsx
index 8383229..65c73bc 100644
--- a/src/pages/team/CreateInvoice.jsx
+++ b/src/pages/team/CreateInvoice.jsx
@@ -1,13 +1,34 @@
 import { useState, useEffect, useRef } from 'react';
 import { useNavigate } from 'react-router-dom';
 import Layout from '../../components/Layout';
+import LoadingButton from '../../components/LoadingButton';
 import { supabase } from '../../lib/supabase';
 import { useAuth } from '../../context/AuthContext';
+import { generateInvoicePDF } from '../../lib/invoice';
+import { blobToEmailAttachment, sendEmail } from '../../lib/email';
+import { withTimeout } from '../../lib/withTimeout';
+
+// Computed at module load time — stable for the lifetime of the invoice creation session
+const INVOICE_TODAY = new Date().toISOString().split('T')[0];
+const INVOICE_NET30 = new Date(Date.now() + 30 * 24 * 60 * 60 * 1000).toISOString().split('T')[0];
 
 function newItem(description = '', unit_price = '', quantity = 1, task_id = null, submission_id = null) {
   return { id: crypto.randomUUID(), description, unit_price, quantity, task_id, submission_id };
 }
 
+const buildNewItemDescription = (task) => {
+  const projectName = task.project?.name || 'No Project';
+  const taskTitle = task.title || task.service_type || 'Untitled';
+  return `${projectName} • ${taskTitle}`;
+};
+
+const buildRevisionItemDescription = (revision) => {
+  const projectName = revision.task?.project?.name || 'No Project';
+  const taskTitle = revision.task?.title || revision.service_type || 'Revision';
+  const versionLabel = 'R' + String(revision.version_number || 0).padStart(2, '0');
+  return `${projectName} • ${taskTitle} • Revision ${versionLabel}`;
+};
+
 export default function CreateInvoice() {
   const navigate = useNavigate();
   const { currentUser } = useAuth();
@@ -17,28 +38,56 @@ export default function CreateInvoice() {
   const [uninvoicedTasks, setUninvoicedTasks] = useState([]);
   const [uninvoicedRevisions, setUninvoicedRevisions] = useState([]);
   const [priceList, setPriceList] = useState([]);
+  const [billTo, setBillTo] = useState('');
+  const [invoiceEmail, setInvoiceEmail] = useState('');
+  const [companyRecipients, setCompanyRecipients] = useState([]);
   const [items, setItems] = useState([newItem()]);
   const [notes, setNotes] = useState('');
   const [saving, setSaving] = useState(false);
   const [loadingTasks, setLoadingTasks] = useState(false);
   const dragItem = useRef(null);
-  const dragOver = useRef(null);
-
-  const today = new Date().toISOString().split('T')[0];
-  const net30 = new Date(Date.now() + 30 * 24 * 60 * 60 * 1000).toISOString().split('T')[0];
+  const today = INVOICE_TODAY;
+  const net30 = INVOICE_NET30;
 
   useEffect(() => {
-    supabase.from('companies').select('id, name').order('name').then(({ data }) => setCompanies(data || []));
+    supabase.from('companies').select('id, name, contact_email').order('name').then(({ data }) => setCompanies(data || []));
   }, []);
 
   useEffect(() => {
-    if (!selectedCompanyId) { setUninvoicedTasks([]); setUninvoicedRevisions([]); setPriceList([]); setItems([newItem()]); return; }
+    if (!selectedCompanyId) {
+      setUninvoicedTasks([]);
+      setUninvoicedRevisions([]);
+      setPriceList([]);
+      setItems([newItem()]);
+      setBillTo('');
+      setInvoiceEmail('');
+      setCompanyRecipients([]);
+      return;
+    }
+    setBillTo(companies.find(c => c.id === selectedCompanyId)?.name || '');
     setLoadingTasks(true);
     Promise.all([
       supabase.from('projects').select('id').eq('company_id', selectedCompanyId),
       supabase.from('company_prices').select('*').eq('company_id', selectedCompanyId),
-    ]).then(async ([{ data: projects }, { data: prices }]) => {
+      supabase.from('company_members').select('profile:profiles(id, name, email, role, company_id)').eq('company_id', selectedCompanyId),
+      supabase.from('profiles').select('id, name, email, role, company_id').eq('company_id', selectedCompanyId).in('role', ['client', 'external']).order('name'),
+    ]).then(async ([{ data: projects }, { data: prices }, { data: memberRows }, { data: primaryUsers }]) => {
       setPriceList(prices || []);
+      const recipientMap = new Map();
+      (memberRows || []).forEach(row => {
+        if (row.profile?.email) recipientMap.set(row.profile.id, row.profile);
+      });
+      (primaryUsers || []).forEach(user => {
+        if (user.email) recipientMap.set(user.id, user);
+      });
+      const recipients = [...recipientMap.values()]
+        .sort((a, b) => {
+          if (a.role === 'client' && b.role !== 'client') return -1;
+          if (a.role !== 'client' && b.role === 'client') return 1;
+          return (a.name || '').localeCompare(b.name || '');
+        });
+      setCompanyRecipients(recipients);
+      setInvoiceEmail(recipients[0]?.email || companies.find(c => c.id === selectedCompanyId)?.contact_email || '');
       if (projects && projects.length > 0) {
         const projectIds = projects.map(p => p.id);
         const [{ data: tasks }, { data: revisions }] = await Promise.all([
@@ -69,13 +118,11 @@ export default function CreateInvoice() {
       }
       setLoadingTasks(false);
     });
-  }, [selectedCompanyId]);
+  }, [selectedCompanyId, companies]);
 
   const addTaskAsItem = (task) => {
     const price = priceList.find(p => p.service_type === task.service_type && p.price_type === 'new');
-    const description = task.service_type && task.service_type !== task.title
-      ? `${task.service_type} — ${task.title}`
-      : task.title;
+    const description = buildNewItemDescription(task);
     setItems(prev => {
       if (prev.length === 1 && !prev[0].description && !prev[0].unit_price) {
         return [newItem(description, price?.price || '', 1, task.id)];
@@ -90,12 +137,8 @@ export default function CreateInvoice() {
   };
 
   const addRevisionAsItem = (revision) => {
-    const versionLabel = 'v' + String((revision.version_number || 1) - 1).padStart(2, '0');
     const serviceLabel = getRevisionServiceType(revision);
-    const taskTitle = revision.task?.title;
-    const description = serviceLabel && taskTitle && serviceLabel !== taskTitle
-      ? `${serviceLabel} — ${taskTitle} — Revision ${versionLabel}`
-      : `${serviceLabel || taskTitle || 'Revision'} — Revision ${versionLabel}`;
+    const description = buildRevisionItemDescription(revision);
     const price = priceList.find(p => p.service_type === serviceLabel && p.price_type === 'revision');
     setItems(prev => {
       if (prev.length === 1 && !prev[0].description && !prev[0].unit_price) {
@@ -137,52 +180,129 @@ export default function CreateInvoice() {
   const handleSave = async (status) => {
     if (!selectedCompanyId) return alert('Please select a company.');
     if (items.every(i => !i.description)) return alert('Please add at least one line item.');
+    if (status === 'sent' && !invoiceEmail.trim()) return alert('Please enter an email recipient before finalizing and sending.');
+    if (status === 'sent' && !selectedCompany) return alert('Please select a valid company before finalizing and sending.');
     setSaving(true);
+    try {
+      const year = new Date().getFullYear();
+      const { count, error: countError } = await supabase
+        .from('invoices')
+        .select('*', { count: 'exact', head: true })
+        .gte('created_at', `${year}-01-01`);
+      if (countError) throw countError;
 
-    const year = new Date().getFullYear();
-    const { count } = await supabase.from('invoices').select('*', { count: 'exact', head: true }).gte('created_at', `${year}-01-01`);
-    const invoiceNumber = `INV-${year}-${String((count || 0) + 1).padStart(3, '0')}`;
+      const invoiceNumber = `INV-${year}-${String((count || 0) + 1).padStart(3, '0')}`;
+      const initialStatus = status === 'sent' ? 'draft' : status;
+      const { data: invoice, error } = await supabase.from('invoices').insert({
+        company_id: selectedCompanyId,
+        invoice_number: invoiceNumber,
+        invoice_date: today,
+        due_date: net30,
+        status: initialStatus,
+        bill_to: billTo || null,
+        invoice_email: invoiceEmail.trim() || null,
+        notes: notes || null,
+        total,
+        created_by: currentUser?.id,
+      }).select().single();
+      if (error || !invoice) throw error || new Error('Invoice record was not created.');
 
-    const { data: invoice, error } = await supabase.from('invoices').insert({
-      company_id: selectedCompanyId,
-      invoice_number: invoiceNumber,
-      invoice_date: today,
-      due_date: net30,
-      status,
-      notes: notes || null,
-      total,
-      created_by: currentUser?.id,
-    }).select().single();
+      const validItems = items.filter(i => i.description);
+      if (validItems.length > 0) {
+        const { error: itemError } = await supabase.from('invoice_items').insert(
+          validItems.map(item => ({
+            invoice_id: invoice.id,
+            task_id: item.task_id || null,
+            submission_id: item.submission_id || null,
+            description: item.description,
+            quantity: Number(item.quantity) || 1,
+            unit_price: Number(item.unit_price) || 0,
+          }))
+        );
+        if (itemError) throw itemError;
+      }
 
-    if (error || !invoice) { setSaving(false); alert('Error saving invoice.'); return; }
+      const taskIds = [...new Set(validItems.filter(i => i.task_id && !i.submission_id).map(i => i.task_id))];
+      if (taskIds.length > 0) {
+        const { error: taskError } = await supabase.from('tasks').update({ invoiced: true }).in('id', taskIds);
+        if (taskError) throw taskError;
+      }
 
-    const validItems = items.filter(i => i.description);
-    if (validItems.length > 0) {
-      await supabase.from('invoice_items').insert(
-        validItems.map(item => ({
-          invoice_id: invoice.id,
-          task_id: item.task_id || null,
-          submission_id: item.submission_id || null,
-          description: item.description,
-          quantity: Number(item.quantity) || 1,
-          unit_price: Number(item.unit_price) || 0,
-        }))
-      );
+      const submissionIds = [...new Set(validItems.filter(i => i.submission_id).map(i => i.submission_id))];
+      if (submissionIds.length > 0) {
+        const { error: submissionError } = await supabase.from('submissions').update({ invoiced: true }).in('id', submissionIds);
+        if (submissionError) throw submissionError;
+      }
+
+      let nextInvoice = invoice;
+      if (status === 'sent') {
+        try {
+          const dueDate = new Date(net30).toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' });
+          const payUrl = `https://portal.fourgebranding.com/pay/${encodeURIComponent(invoiceNumber)}`;
+          const invoiceForPdf = { ...invoice, status: 'sent' };
+          const pdfItems = validItems.map(item => ({
+            description: item.description,
+            quantity: Number(item.quantity) || 1,
+            unit_price: Number(item.unit_price) || 0,
+          }));
+          const emailData = {
+            invoiceNumber,
+            billTo: billTo || selectedCompany.name,
+            total: `$${total.toFixed(2)}`,
+            dueDate,
+            payUrl,
+            notes: notes || '',
+          };
+
+          let attachments = [];
+          let attachmentWarning = '';
+          try {
+            const invoicePdf = await withTimeout(
+              generateInvoicePDF(invoiceForPdf, selectedCompany, pdfItems, { save: false }),
+              8000,
+              'Invoice PDF generation'
+            );
+            const attachment = await withTimeout(
+              blobToEmailAttachment(invoicePdf, `${invoiceNumber}.pdf`),
+              5000,
+              'Invoice attachment encoding'
+            );
+            attachments = [attachment];
+          } catch (attachmentError) {
+            console.error('Invoice PDF attachment skipped during creation:', attachmentError);
+            attachmentWarning = ' The invoice email was sent without the PDF attachment.';
+          }
+
+          await withTimeout(
+            sendEmail('invoice_sent', invoiceEmail.trim(), emailData, attachments),
+            12000,
+            'Sending invoice email'
+          );
+
+          const { data: sentInvoice, error: sentError } = await supabase
+            .from('invoices')
+            .update({ status: 'sent' })
+            .eq('id', invoice.id)
+            .select()
+            .single();
+          if (sentError) throw sentError;
+          nextInvoice = sentInvoice || { ...invoice, status: 'sent' };
+          if (attachmentWarning) {
+            alert(`Invoice sent successfully.${attachmentWarning}`);
+          }
+        } catch (sendError) {
+          console.error('Failed to send invoice during creation:', sendError);
+          alert(`Invoice was saved as a draft, but the email was not sent: ${sendError.message}`);
+        }
+      }
+
+      navigate(`/invoices/${invoice.id}`, { state: { invoice: nextInvoice } });
+    } catch (saveError) {
+      console.error('Failed to save invoice:', saveError);
+      alert(`Failed to save invoice: ${saveError.message || 'Unknown error'}`);
+    } finally {
+      setSaving(false);
     }
-
-    // Mark tasks as invoiced (only items without a submission_id are base task items)
-    const taskIds = validItems.filter(i => i.task_id && !i.submission_id).map(i => i.task_id);
-    if (taskIds.length > 0) {
-      await supabase.from('tasks').update({ invoiced: true }).in('id', taskIds);
-    }
-
-    // Mark client revisions as invoiced
-    const submissionIds = validItems.filter(i => i.submission_id).map(i => i.submission_id);
-    if (submissionIds.length > 0) {
-      await supabase.from('submissions').update({ invoiced: true }).in('id', submissionIds);
-    }
-
-    navigate(`/invoices/${invoice.id}`, { state: { invoice } });
   };
 
   const selectedCompany = companies.find(c => c.id === selectedCompanyId);
@@ -196,12 +316,6 @@ export default function CreateInvoice() {
           <div className="page-title">New Invoice</div>
           <div className="page-subtitle">Invoice date: {new Date(today).toLocaleDateString()} · Due: {new Date(net30).toLocaleDateString()} (Net 30)</div>
         </div>
-        <div className="action-buttons">
-          <button className="btn btn-outline btn-sm" onClick={() => handleSave('draft')} disabled={saving}>Save Draft</button>
-          <button className="btn btn-primary btn-sm" onClick={() => handleSave('sent')} disabled={saving}>
-            {saving ? 'Saving...' : 'Finalise & Send'}
-          </button>
-        </div>
       </div>
 
       <div className="card" style={{ marginBottom: 24 }}>
@@ -216,8 +330,33 @@ export default function CreateInvoice() {
           </select>
         </div>
         {selectedCompany && (
-          <div style={{ padding: '12px 14px', background: 'var(--bg)', borderRadius: 8, border: '1px solid var(--border)', fontSize: 13 }}>
-            <div style={{ fontWeight: 600 }}>{selectedCompany.name}</div>
+          <div className="grid-2" style={{ marginTop: 12 }}>
+            <div className="form-group" style={{ marginBottom: 0 }}>
+              <label>Bill To</label>
+              <input
+                type="text"
+                value={billTo}
+                onChange={e => setBillTo(e.target.value)}
+                placeholder={selectedCompany.name}
+              />
+            </div>
+            <div className="form-group" style={{ marginBottom: 0 }}>
+              <label>Email To</label>
+              <input
+                type="email"
+                list="company-invoice-recipients"
+                value={invoiceEmail}
+                onChange={e => setInvoiceEmail(e.target.value)}
+                placeholder={companyRecipients[0]?.email || 'client@example.com'}
+              />
+              <datalist id="company-invoice-recipients">
+                {companyRecipients.map(recipient => (
+                  <option key={recipient.id} value={recipient.email}>
+                    {recipient.name ? `${recipient.name} (${recipient.role})` : recipient.role}
+                  </option>
+                ))}
+              </datalist>
+            </div>
           </div>
         )}
       </div>
@@ -248,8 +387,10 @@ export default function CreateInvoice() {
               return (
                 <div key={task.id} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '8px 12px', background: 'var(--bg)', borderRadius: 6, border: '1px solid var(--border)' }}>
                   <div>
-                    <div style={{ fontSize: 13, fontWeight: 600 }}>{task.service_type && task.service_type !== task.title ? `${task.service_type} — ${task.title}` : task.title}</div>
-                    <div style={{ fontSize: 11, color: 'var(--text-muted)' }}>{task.project?.name} · {price ? `$${Number(price.price).toFixed(2)}` : 'No price set'}</div>
+                    <div style={{ fontSize: 13, fontWeight: 600 }}>{buildNewItemDescription(task)}</div>
+                    <div style={{ fontSize: 11, color: 'var(--text-muted)' }}>
+                      {task.service_type || 'Other'} • {price ? `$${Number(price.price).toFixed(2)}` : 'No price set'}
+                    </div>
                   </div>
                   <button
                     className={`btn btn-sm ${alreadyAdded ? 'btn-outline' : 'btn-primary'}`}
@@ -283,19 +424,16 @@ export default function CreateInvoice() {
           ) : (
             <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
               {uninvoicedRevisions.map(rev => {
-                const versionLabel = 'v' + String((rev.version_number || 1) - 1).padStart(2, '0');
                 const revServiceType = getRevisionServiceType(rev);
                 const price = priceList.find(p => p.service_type === revServiceType && p.price_type === 'revision');
                 const alreadyAdded = items.some(i => i.submission_id === rev.id);
                 return (
                   <div key={rev.id} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '8px 12px', background: 'var(--bg)', borderRadius: 6, border: '1px solid var(--border)' }}>
                     <div>
-                      <div style={{ fontSize: 13, fontWeight: 600 }}>
-                        {revServiceType && rev.task?.title && revServiceType !== rev.task?.title
-                          ? `${revServiceType} — ${rev.task.title} — Revision ${versionLabel}`
-                          : `${revServiceType || rev.task?.title || 'Revision'} — Revision ${versionLabel}`}
+                      <div style={{ fontSize: 13, fontWeight: 600 }}>{buildRevisionItemDescription(rev)}</div>
+                      <div style={{ fontSize: 11, color: 'var(--text-muted)' }}>
+                        {revServiceType || 'Other'} • {price ? `$${Number(price.price).toFixed(2)}` : 'No price set'}
                       </div>
-                      <div style={{ fontSize: 11, color: 'var(--text-muted)' }}>{rev.task?.project?.name} · {price ? `$${Number(price.price).toFixed(2)}` : 'No price set'}</div>
                     </div>
                     <button
                       className={`btn btn-sm ${alreadyAdded ? 'btn-outline' : 'btn-primary'}`}
@@ -381,9 +519,9 @@ export default function CreateInvoice() {
 
       <div className="action-buttons">
         <button className="btn btn-outline" onClick={() => handleSave('draft')} disabled={saving}>Save Draft</button>
-        <button className="btn btn-primary" onClick={() => handleSave('sent')} disabled={saving}>
-          {saving ? 'Saving...' : 'Finalise & Send'}
-        </button>
+        <LoadingButton className="btn btn-primary" onClick={() => handleSave('sent')} loading={saving} loadingText="Finalizing & Sending...">
+          Finalise & Send
+        </LoadingButton>
         <button className="btn btn-outline" onClick={() => navigate('/invoices')}>Cancel</button>
       </div>
     </Layout>
diff --git a/src/pages/team/CreateSubcontractorPO.jsx b/src/pages/team/CreateSubcontractorPO.jsx
new file mode 100644
index 0000000..4ecaeaf
--- /dev/null
+++ b/src/pages/team/CreateSubcontractorPO.jsx
@@ -0,0 +1,393 @@
+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';
+import { sendEmail } from '../../lib/email';
+
+const FIELD_LABEL_STYLE = { fontSize: 11, fontWeight: 600, color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: 0.5, display: 'block', marginBottom: 4 };
+const FIELD_INPUT_STYLE = { minHeight: 42, margin: 0 };
+
+const blankSubcontractorPO = () => ({
+  profile_id: '',
+  project_id: '',
+  date: new Date().toISOString().slice(0, 10),
+  due_date: '',
+  description: '',
+  terms: 'Net 15',
+  notes: '',
+  line_items: [{ task_id: '', description: '', amount: '' }],
+});
+
+function getTaskServiceType(task) {
+  const initial = (task?.submissions || []).find(submission => submission.type === 'initial') || (task?.submissions || [])[0];
+  return initial?.service_type || task?.service_type || task?.title || 'Work Item';
+}
+
+export default function CreateSubcontractorPO() {
+  const navigate = useNavigate();
+  const { currentUser } = useAuth();
+  const [externalProfiles, setExternalProfiles] = useState([]);
+  const [projects, setProjects] = useState([]);
+  const [projectTasks, setProjectTasks] = useState([]);
+  const [purchaseOrders, setPurchaseOrders] = useState([]);
+  const [usedTaskItems, setUsedTaskItems] = useState([]);
+  const [form, setForm] = useState(blankSubcontractorPO());
+  const [saving, setSaving] = useState(false);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    async function load() {
+      const [{ data: subcontractors }, { data: projectRows }, { data: taskRows }, { data: poRows }, { data: usedRows }] = await Promise.all([
+        supabase.from('profiles').select('id, name, email').eq('role', 'external').order('name'),
+        supabase.from('projects').select('id, name, company:companies(name)').order('created_at', { ascending: false }),
+        supabase.from('tasks').select('id, project_id, title, status, submissions(service_type, type)').order('submitted_at', { ascending: false }),
+        supabase.from('subcontractor_payments').select('po_number').order('created_at', { ascending: false }),
+        supabase
+          .from('subcontractor_po_items')
+          .select('task_id, po:subcontractor_payments!inner(id, po_number, status, profile:profiles!subcontractor_payments_profile_id_fkey(name, email))')
+          .not('task_id', 'is', null)
+          .neq('po.status', 'cancelled'),
+      ]);
+      setExternalProfiles(subcontractors || []);
+      setProjects(projectRows || []);
+      setProjectTasks(taskRows || []);
+      setPurchaseOrders(poRows || []);
+      setUsedTaskItems(usedRows || []);
+      setLoading(false);
+    }
+    load();
+  }, []);
+
+  const nextPONumber = () => {
+    const year = new Date().getFullYear();
+    const sameYear = purchaseOrders
+      .map(po => po.po_number)
+      .filter(number => typeof number === 'string' && number.startsWith(`PO-${year}-`));
+    const max = sameYear.reduce((highest, number) => {
+      const value = Number(number.split('-').pop());
+      return Number.isFinite(value) ? Math.max(highest, value) : highest;
+    }, 0);
+    return `PO-${year}-${String(max + 1).padStart(4, '0')}`;
+  };
+
+  const filteredTasks = form.project_id
+    ? projectTasks.filter(task => task.project_id === form.project_id)
+    : [];
+  const availableTasks = filteredTasks.filter(task => !usedTaskItems.some(item => item.task_id === task.id));
+  const getUsedTaskItem = (taskId) => usedTaskItems.find(item => item.task_id === taskId);
+
+  const getValidLineItems = () => form.line_items
+    .map((item, index) => {
+      const task = projectTasks.find(row => row.id === item.task_id);
+      return {
+        task_id: item.task_id || null,
+        description: item.description.trim() || (task ? getTaskServiceType(task) : ''),
+        amount: Number(item.amount),
+        sort_order: index,
+      };
+    })
+    .filter(item => item.description && Number.isFinite(item.amount) && item.amount > 0);
+
+  const total = getValidLineItems().reduce((sum, item) => sum + item.amount, 0);
+
+  const handleProjectChange = (projectId) => {
+    setForm(prev => ({
+      ...prev,
+      project_id: projectId,
+      line_items: [{ task_id: '', description: '', amount: '' }],
+    }));
+  };
+
+  const updateLineItem = (index, updates) => {
+    setForm(prev => ({
+      ...prev,
+      line_items: prev.line_items.map((item, itemIndex) => itemIndex === index ? { ...item, ...updates } : item),
+    }));
+  };
+
+  const handleLineTaskChange = (index, taskId) => {
+    const task = projectTasks.find(row => row.id === taskId);
+    updateLineItem(index, { task_id: taskId, description: task ? getTaskServiceType(task) : '' });
+  };
+
+  const addTaskAsLineItem = (task) => {
+    const nextItem = { task_id: task.id, description: getTaskServiceType(task), amount: '' };
+    setForm(prev => {
+      if (prev.line_items.length === 1 && !prev.line_items[0].description && !prev.line_items[0].amount) {
+        return { ...prev, line_items: [nextItem] };
+      }
+      if (prev.line_items.some(item => item.task_id === task.id)) return prev;
+      return { ...prev, line_items: [...prev.line_items, nextItem] };
+    });
+  };
+
+  const addLineItem = () => {
+    setForm(prev => ({
+      ...prev,
+      line_items: [...prev.line_items, { task_id: '', description: '', amount: '' }],
+    }));
+  };
+
+  const removeLineItem = (index) => {
+    setForm(prev => ({
+      ...prev,
+      line_items: prev.line_items.length > 1
+        ? prev.line_items.filter((_, itemIndex) => itemIndex !== index)
+        : [{ task_id: '', description: '', amount: '' }],
+    }));
+  };
+
+  const handleSave = async (status = 'draft') => {
+    const lineItems = getValidLineItems();
+    if (!form.profile_id) return alert('Please select a subcontractor.');
+    if (lineItems.length === 0) return alert('Please add at least one line item with an amount.');
+
+    setSaving(true);
+    const summary = form.description.trim() || lineItems.map(item => item.description).join(', ');
+    const { data, error } = await supabase
+      .from('subcontractor_payments')
+      .insert({
+        po_number: nextPONumber(),
+        profile_id: form.profile_id,
+        project_id: form.project_id || null,
+        date: form.date,
+        due_date: form.due_date || null,
+        description: summary,
+        amount: total,
+        terms: form.terms.trim() || 'Net 15',
+        notes: form.notes.trim(),
+        status,
+        sent_at: status === 'sent' ? new Date().toISOString() : null,
+        created_by: currentUser?.id || null,
+      })
+      .select()
+      .single();
+
+    if (error || !data) {
+      setSaving(false);
+      alert(`Failed to create PO: ${error?.message || 'unknown error'}`);
+      return;
+    }
+
+    const { error: itemError } = await supabase
+      .from('subcontractor_po_items')
+      .insert(lineItems.map(item => ({ ...item, po_id: data.id })));
+
+    setSaving(false);
+    if (itemError) {
+      alert(`PO was created, but line items failed: ${itemError.message}`);
+      return;
+    }
+
+    if (status === 'sent') {
+      const subcontractor = externalProfiles.find(profile => profile.id === form.profile_id);
+      const project = projects.find(row => row.id === form.project_id);
+      if (subcontractor?.email) {
+        try {
+          await sendEmail('subcontractor_po_sent', subcontractor.email, {
+            poNumber: data.po_number || 'Purchase Order',
+            subcontractorName: subcontractor.name || 'there',
+            projectName: project?.name || 'Subcontractor Work',
+            companyName: project?.company?.name || 'Fourge Branding',
+            amount: `$${total.toFixed(2)}`,
+            dueDate: form.due_date ? new Date(form.due_date).toLocaleDateString() : 'Not set',
+            terms: form.terms.trim() || 'Net 15',
+            scope: lineItems.map(item => `${item.description} - $${item.amount.toFixed(2)}`).join('\n'),
+            portalUrl: 'https://portal.fourgebranding.com/my-purchase-orders',
+          });
+        } catch (emailError) {
+          alert(`PO was finalized, but the email failed: ${emailError.message || 'unknown error'}`);
+        }
+      } else {
+        alert('PO was finalized, but this subcontractor has no email on file.');
+      }
+    }
+    navigate('/invoices', { state: { tab: 'subcontractor-po' } });
+  };
+
+  return (
+    <Layout>
+      <button className="back-link" onClick={() => navigate('/invoices', { state: { tab: 'subcontractor-po' } })}>← Back to Subcontractor PO</button>
+
+      <div className="page-header">
+        <div>
+          <div className="page-title">New Subcontractor PO</div>
+          <div className="page-subtitle">Create a draft purchase order for subcontractor work.</div>
+        </div>
+      </div>
+
+      <div className="card" style={{ marginBottom: 24 }}>
+        <div className="card-title">Subcontractor</div>
+        <div className="grid-2">
+          <div className="form-group" style={{ marginBottom: 0 }}>
+            <label>External Team Member *</label>
+            <select value={form.profile_id} onChange={e => setForm(prev => ({ ...prev, profile_id: e.target.value }))}>
+              <option value="">Choose a subcontractor...</option>
+              {externalProfiles.map(profile => (
+                <option key={profile.id} value={profile.id}>
+                  {profile.name || profile.email} {profile.name && profile.email ? `(${profile.email})` : ''}
+                </option>
+              ))}
+            </select>
+          </div>
+          <div className="form-group" style={{ marginBottom: 0 }}>
+            <label>Project</label>
+            <select value={form.project_id} onChange={e => handleProjectChange(e.target.value)}>
+              <option value="">No project</option>
+              {projects.map(project => (
+                <option key={project.id} value={project.id}>
+                  {project.name}{project.company?.name ? ` · ${project.company.name}` : ''}
+                </option>
+              ))}
+            </select>
+          </div>
+        </div>
+      </div>
+
+      {form.project_id && (
+        <div className="card" style={{ marginBottom: 24 }}>
+          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12 }}>
+            <div className="card-title" style={{ marginBottom: 0 }}>Project Tasks</div>
+            {availableTasks.length > 0 && (
+              <button className="btn btn-outline btn-sm" onClick={() => availableTasks.forEach(task => addTaskAsLineItem(task))}>
+                + Add All
+              </button>
+            )}
+          </div>
+          {filteredTasks.length === 0 ? (
+            <p style={{ fontSize: 13, color: 'var(--text-muted)' }}>No tasks found for this project.</p>
+          ) : (
+            <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
+              {filteredTasks.map(task => {
+                const alreadyAdded = form.line_items.some(item => item.task_id === task.id);
+                const usedItem = getUsedTaskItem(task.id);
+                const usedBy = usedItem?.po?.profile?.name || usedItem?.po?.profile?.email || 'another PO';
+                return (
+                  <div key={task.id} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '8px 12px', background: 'var(--bg)', borderRadius: 6, border: '1px solid var(--border)' }}>
+                    <div>
+                      <div style={{ fontSize: 13, fontWeight: 700 }}>{task.title}</div>
+                      <div style={{ fontSize: 11, color: 'var(--text-muted)' }}>
+                        {usedItem
+                          ? `Already on ${usedItem.po?.po_number || 'a PO'} for ${usedBy}`
+                          : getTaskServiceType(task)}
+                      </div>
+                    </div>
+                    <button
+                      className={`btn btn-sm ${alreadyAdded || usedItem ? 'btn-outline' : 'btn-primary'}`}
+                      onClick={() => !alreadyAdded && !usedItem && addTaskAsLineItem(task)}
+                      disabled={alreadyAdded || Boolean(usedItem)}
+                    >
+                      {usedItem ? 'Already Used' : alreadyAdded ? 'Added' : '+ Add'}
+                    </button>
+                  </div>
+                );
+              })}
+            </div>
+          )}
+        </div>
+      )}
+
+      <div className="card" style={{ marginBottom: 24 }}>
+        <div className="card-title">Line Items</div>
+        <div style={{ display: 'grid', gridTemplateColumns: '1fr 120px 40px', gap: 8, marginBottom: 8 }}>
+          {['Description', 'Pay Amount', ''].map((header, index) => (
+            <div key={header} style={{ fontSize: 11, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.5px', color: 'var(--text-muted)', textAlign: index > 0 ? 'right' : 'left' }}>{header}</div>
+          ))}
+        </div>
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+          {form.line_items.map((item, index) => (
+            <div key={index} style={{ display: 'grid', gridTemplateColumns: '1fr 120px 40px', gap: 8, alignItems: 'start' }}>
+              <div style={{ display: 'grid', gap: 8 }}>
+                {form.project_id && (
+                  <select
+                    value={item.task_id}
+                    onChange={e => handleLineTaskChange(index, e.target.value)}
+                    style={{ margin: 0 }}
+                  >
+                    <option value="">Custom line item...</option>
+                    {availableTasks.map(task => (
+                      <option key={task.id} value={task.id}>{task.title}</option>
+                    ))}
+                  </select>
+                )}
+                <input
+                  type="text"
+                  placeholder="Description..."
+                  value={item.description}
+                  onChange={e => updateLineItem(index, { description: e.target.value })}
+                  style={{ margin: 0 }}
+                />
+              </div>
+              <input
+                type="number"
+                min="0"
+                step="0.01"
+                placeholder="0.00"
+                value={item.amount}
+                onChange={e => updateLineItem(index, { amount: e.target.value })}
+                style={{ margin: 0, textAlign: 'right' }}
+              />
+              <button onClick={() => removeLineItem(index)} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--danger)', fontSize: 16, padding: 4 }}>✕</button>
+            </div>
+          ))}
+        </div>
+
+        <button className="btn btn-outline btn-sm" style={{ marginTop: 12 }} onClick={addLineItem}>
+          + Add Line Item
+        </button>
+
+        <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: 20, paddingTop: 16, borderTop: '1px solid var(--border)' }}>
+          <div style={{ textAlign: 'right' }}>
+            <div style={{ fontSize: 11, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.5px', color: 'var(--text-muted)', marginBottom: 4 }}>Total</div>
+            <div style={{ fontSize: 26, fontWeight: 700, color: 'var(--accent)' }}>${total.toFixed(2)}</div>
+          </div>
+        </div>
+      </div>
+
+      <div className="card" style={{ marginBottom: 24 }}>
+        <div className="card-title">PO Details</div>
+        <div className="grid-2">
+          <div className="form-group">
+            <label style={FIELD_LABEL_STYLE}>PO Date</label>
+            <input type="date" value={form.date} onChange={e => setForm(prev => ({ ...prev, date: e.target.value }))} style={FIELD_INPUT_STYLE} />
+          </div>
+          <div className="form-group">
+            <label style={FIELD_LABEL_STYLE}>Due Date</label>
+            <input type="date" value={form.due_date} onChange={e => setForm(prev => ({ ...prev, due_date: e.target.value }))} style={FIELD_INPUT_STYLE} />
+          </div>
+        </div>
+        <div className="form-group">
+          <label style={FIELD_LABEL_STYLE}>Terms</label>
+          <input type="text" value={form.terms} onChange={e => setForm(prev => ({ ...prev, terms: e.target.value }))} />
+        </div>
+      </div>
+
+      <div className="card" style={{ marginBottom: 24 }}>
+        <div className="card-title">Notes</div>
+        <textarea
+          placeholder="Optional overview, special instructions, payment notes..."
+          value={form.description}
+          onChange={e => setForm(prev => ({ ...prev, description: e.target.value }))}
+          style={{ minHeight: 80 }}
+        />
+        <input
+          type="text"
+          placeholder="Internal notes, payment method, invoice number..."
+          value={form.notes}
+          onChange={e => setForm(prev => ({ ...prev, notes: e.target.value }))}
+          style={{ marginTop: 12 }}
+        />
+      </div>
+
+      <div className="action-buttons" style={{ justifyContent: 'flex-start', marginBottom: 32 }}>
+        <button className="btn btn-outline" onClick={() => handleSave('draft')} disabled={saving || loading}>
+          {saving ? 'Saving...' : 'Save Draft'}
+        </button>
+        <button className="btn btn-primary" onClick={() => handleSave('sent')} disabled={saving || loading}>
+          {saving ? 'Saving...' : 'Finalize & Send'}
+        </button>
+      </div>
+    </Layout>
+  );
+}
diff --git a/src/pages/team/Dashboard.jsx b/src/pages/team/Dashboard.jsx
index ad69127..c5fc286 100755
--- a/src/pages/team/Dashboard.jsx
+++ b/src/pages/team/Dashboard.jsx
@@ -4,12 +4,85 @@ 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 style={{ marginBottom: 10, border: '1px solid var(--border)', borderRadius: 8, overflow: 'hidden', background: 'var(--card-bg)' }}>
+    <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',
@@ -34,10 +107,10 @@ function CompanyGroup({ company, tasks, projects }) {
           {tasks.map(task => {
             const project = projects.find(p => p.id === task.project_id);
             return (
-              <Link key={task.id} to={`/tasks/${task.id}`} style={{ padding: '10px 14px', borderBottom: '1px solid var(--border)', display: 'flex', flexDirection: 'column', gap: 4, textDecoration: 'none', cursor: 'pointer' }}>
+              <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)' }}>{'v' + String(task.current_version || 0).padStart(2, '0')}</span>
+                    {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>
@@ -59,8 +132,9 @@ function CompanyGroup({ company, tasks, projects }) {
 function ProjectGroup({ project, tasks }) {
   const [open, setOpen] = useState(true);
   return (
-    <div style={{ marginBottom: 10, border: '1px solid var(--border)', borderRadius: 8, overflow: 'hidden', background: 'var(--card-bg)' }}>
+    <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',
@@ -81,9 +155,9 @@ function ProjectGroup({ project, tasks }) {
       {open && (
         <div>
           {tasks.map(task => (
-            <a key={task.id} href={`/tasks/${task.id}`} style={{ padding: '10px 14px', borderBottom: '1px solid var(--border)', display: 'flex', alignItems: 'center', justifyContent: 'space-between', textDecoration: 'none' }}>
+            <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)' }}>{'v' + String(task.current_version || 0).padStart(2, '0')}</span>
+                {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>
@@ -94,6 +168,102 @@ function ProjectGroup({ project, tasks }) {
   );
 }
 
+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 ExternalDashboard({ currentUser, projects, tasks }) {
   const activeTasks = tasks.filter(t => t.status !== 'client_approved');
   const completedTasks = tasks.filter(t => t.status === 'client_approved');
@@ -149,63 +319,63 @@ function ExternalDashboard({ currentUser, projects, tasks }) {
   );
 }
 
-function GroupedColumn({ tasks, companies, projects, emptyText }) {
-  if (tasks.length === 0) return (
-    <div style={{ padding: '24px 16px', textAlign: 'center', color: 'var(--text-muted)', fontSize: 13, background: 'var(--card-bg)', borderRadius: 8, border: '1px solid var(--border)' }}>
-      {emptyText}
-    </div>
-  );
-
-  const groups = companies
-    .map(company => {
-      const companyProjectIds = projects.filter(p => p.company_id === company.id).map(p => p.id);
-      const companyTasks = tasks.filter(t => companyProjectIds.includes(t.project_id));
-      return { company, tasks: companyTasks };
-    })
-    .filter(g => g.tasks.length > 0);
-
-  return (
-    <div>
-      {groups.map(({ company, tasks: groupTasks }) => (
-        <CompanyGroup key={company.id} company={company} tasks={groupTasks} projects={projects} />
-      ))}
-    </div>
-  );
-}
-
 export default function Dashboard() {
   const { currentUser } = useAuth();
-  const [tasks, setTasks] = useState([]);
-  const [projects, setProjects] = useState([]);
-  const [companies, setCompanies] = useState([]);
-  const [loading, setLoading] = useState(true);
-  const [showCompleted, setShowCompleted] = useState(false);
-
   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 [loading, setLoading] = useState(() => !cached);
 
   useEffect(() => {
     async function load() {
-      if (isExternal) {
-        const [{ data: p }, { data: t }] = await Promise.all([
-          supabase.from('projects').select('*').order('created_at', { ascending: false }),
-          supabase.from('tasks').select('*').order('submitted_at', { ascending: false }),
-        ]);
-        setProjects(p || []);
-        setTasks(t || []);
-      } else {
-        const [{ data: t }, { data: p }, { data: co }] = await Promise.all([
-          supabase.from('tasks').select('*').order('submitted_at', { ascending: false }),
-          supabase.from('projects').select('*'),
-          supabase.from('companies').select('*').order('name'),
-        ]);
-        setTasks(t || []);
-        setProjects(p || []);
-        setCompanies(co || []);
+      try {
+        if (isExternal) {
+          const [{ data: p }, { data: t }] = 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 }),
+          ]), 12000, 'Dashboard load');
+          setProjects(p || []);
+          setTasks(t || []);
+          setSubmissions([]);
+          writePageCache(cacheKey, { projects: p || [], tasks: t || [], submissions: [] });
+        } 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'),
+          ]), 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,
+          }));
+
+          setTasks(tasksWithDeadlines);
+          setProjects(p || []);
+          writePageCache(cacheKey, { tasks: tasksWithDeadlines, projects: p || [], submissions: submissionsWithRole });
+          setSubmissions(submissionsWithRole);
+        }
+      } catch (error) {
+        console.error('Dashboard load failed:', error);
       }
       setLoading(false);
     }
     load();
-  }, [isExternal]);
+  }, [cacheKey, isExternal]);
 
   if (loading) return <Layout><p style={{ padding: 24, color: 'var(--text-muted)' }}>Loading...</p></Layout>;
 
@@ -213,11 +383,32 @@ export default function Dashboard() {
     return <ExternalDashboard currentUser={currentUser} projects={projects} tasks={tasks} />;
   }
 
-  const activeTasks = tasks.filter(t => ['in_progress', 'on_hold', 'client_review'].includes(t.status));
+  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 completedTasks = tasks.filter(t => t.status === 'client_approved');
-  const activeProjects = projects.filter(p => p.status === 'active');
-
+  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">
@@ -225,58 +416,71 @@ export default function Dashboard() {
           <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 style={{ display: 'flex', gap: 8 }}>
-          <button className="btn btn-outline btn-sm" onClick={() => setShowCompleted(s => !s)}>
-            {showCompleted ? 'Hide Completed' : 'Show Completed'}
-          </button>
-          <Link to="/requests" className="btn btn-primary btn-sm">View Requests</Link>
-        </div>
       </div>
 
       <div className="stats-grid">
-        <div className="stat-card">
-          <div className="stat-icon">📁</div>
-          <div className="stat-value">{activeProjects.length}</div>
-          <div className="stat-label">Active Projects</div>
-        </div>
-        <div className="stat-card">
+        <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-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">{completedTasks.length}</div>
-          <div className="stat-label">Completed</div>
+          <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={{ display: 'grid', gridTemplateColumns: showCompleted ? '1fr 1fr 1fr' : '1fr 1fr', gap: 24 }}>
-        <div>
-          <div className="card-title">Not Started</div>
-          <GroupedColumn tasks={notStartedTasks} companies={companies} projects={projects} emptyText="Nothing waiting to start" />
-        </div>
-        <div>
-          <div className="card-title">Active Jobs</div>
-          <GroupedColumn tasks={activeTasks} companies={companies} projects={projects} emptyText="No active jobs" />
-        </div>
-        {showCompleted && (
-          <div>
-            <div className="card-title" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
-              Completed
-              <button onClick={() => setShowCompleted(false)} style={{ fontSize: 11, color: 'var(--text-muted)', background: 'none', border: 'none', cursor: 'pointer' }}>
-                Hide ✕
-              </button>
-            </div>
-            <GroupedColumn tasks={completedTasks} companies={companies} projects={projects} emptyText="No completed jobs yet" />
-          </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>
+
     </Layout>
   );
 }
diff --git a/src/pages/team/FileSharing.jsx b/src/pages/team/FileSharing.jsx
index 4d84339..8f0c109 100644
--- a/src/pages/team/FileSharing.jsx
+++ b/src/pages/team/FileSharing.jsx
@@ -32,7 +32,6 @@ export default function FileSharing() {
   const { currentUser } = useAuth();
   const [currentPath, setCurrentPath] = useState('/');
   const [entries, setEntries] = useState([]);
-  const [usageBytes, setUsageBytes] = useState(0);
   const [configured, setConfigured] = useState(true);
   const [parentPath, setParentPath] = useState('/');
   const [loading, setLoading] = useState(true);
@@ -41,6 +40,7 @@ export default function FileSharing() {
   const [error, setError] = useState('');
   const [folderName, setFolderName] = useState('');
   const [showFolderInput, setShowFolderInput] = useState(false);
+  const [movingEntry, setMovingEntry] = useState(null);
   const fileInputRef = useRef(null);
 
   const breadcrumbs = useMemo(() => pathParts(currentPath), [currentPath]);
@@ -77,7 +77,6 @@ export default function FileSharing() {
       const data = await apiFetch(`/api/seafile?${params.toString()}`);
       setConfigured(data.configured !== false);
       setEntries(data.entries || []);
-      setUsageBytes(Number(data.usageBytes || 0));
       setCurrentPath(data.path || '/');
       setParentPath(data.parentPath || '/');
       if (data.configured === false) setError(data.error || 'Seafile is not configured yet.');
@@ -224,9 +223,27 @@ export default function FileSharing() {
     e.preventDefault();
     setDragging(false);
     if (!configured || loading || working) return;
+    if (!e.dataTransfer.files?.length) return;
     uploadFiles(e.dataTransfer.files);
   };
 
+  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('');
+    }
+  };
+
   return (
     <Layout>
       <div className="page-header">
@@ -234,9 +251,6 @@ export default function FileSharing() {
           <div className="page-title">File Sharing</div>
           <div className="page-subtitle">Shared Seafile workspace for team members and subcontractors.</div>
         </div>
-        <div className="page-subtitle" style={{ marginTop: 6 }}>
-          Used in this location: {formatBytes(usageBytes)}
-        </div>
       </div>
 
       <section
@@ -337,30 +351,62 @@ export default function FileSharing() {
               <h3>No files here yet</h3>
               <p>Upload files or create a folder to start this workspace.</p>
             </div>
-          ) : entries.map(entry => (
-            <div className="file-row" key={`${entry.type}:${entry.path}`}>
-              <span className="file-icon">{entry.type === 'dir' ? '▣' : '□'}</span>
-              {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>
-              )}
-              <span className="file-meta">{formatBytes(entry.aggregateSize ?? entry.size)}</span>
-              <span className="file-meta">{formatDate(entry.mtime)}</span>
-              <span className="file-row-actions">
-                {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>
+          ) : entries.map(entry => {
+            const isMoving = movingEntry?.path === entry.path;
+            const targetFolders = entries.filter(e => e.type === 'dir' && e.path !== entry.path);
+            return (
+              <div className="file-row" key={`${entry.type}:${entry.path}`}>
+                <span className="file-icon">{entry.type === 'dir' ? '▣' : '□'}</span>
+                {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>
                 )}
-                <LoadingButton className="btn btn-danger btn-sm" loading={working === `delete:${entry.path}`} disabled={Boolean(working)} loadingText="Deleting..." onClick={() => deleteEntry(entry)}>
-                  Delete
-                </LoadingButton>
-              </span>
-            </div>
-          ))}
+                <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>
+                      )}
+                      {targetFolders.length > 0 && (
+                        <button type="button" className="btn btn-outline btn-sm" disabled={Boolean(working)} onClick={() => 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>
     </Layout>
diff --git a/src/pages/team/FourgePasswords.jsx b/src/pages/team/FourgePasswords.jsx
new file mode 100644
index 0000000..ccfdb22
--- /dev/null
+++ b/src/pages/team/FourgePasswords.jsx
@@ -0,0 +1,370 @@
+import { useEffect, useState } from 'react';
+import Layout from '../../components/Layout';
+import { supabase } from '../../lib/supabase';
+import { useAuth } from '../../context/AuthContext';
+
+function emptyForm() {
+  return {
+    service_name: '',
+    service_url: '',
+    username: '',
+    password: '',
+    notes: '',
+  };
+}
+
+function sortEntries(entries) {
+  return [...entries].sort((a, b) => a.service_name.localeCompare(b.service_name, undefined, { sensitivity: 'base' }));
+}
+
+function formatDate(value) {
+  if (!value) return 'Unknown';
+  return new Date(value).toLocaleString('en-US', {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric',
+    hour: 'numeric',
+    minute: '2-digit',
+  });
+}
+
+function normalizeUrl(value) {
+  const raw = String(value || '').trim();
+  if (!raw) return '';
+  if (/^https?:\/\//i.test(raw)) return raw;
+  return `https://${raw}`;
+}
+
+async function invokeCrypto(action, payload) {
+  const { data: sessionData } = await supabase.auth.getSession();
+  const accessToken = sessionData.session?.access_token;
+  const response = await fetch('/api/fourge-passwords-crypto', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      ...(accessToken ? { Authorization: `Bearer ${accessToken}` } : {}),
+    },
+    body: JSON.stringify({ action, ...payload }),
+  });
+
+  const data = await response.json().catch(() => null);
+  if (!response.ok) throw new Error(data?.error || `Vault operation failed (${response.status})`);
+  if (data?.error) throw new Error(data.error);
+  return data;
+}
+
+export default function FourgePasswords() {
+  const { currentUser } = useAuth();
+  const [entries, setEntries] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [status, setStatus] = useState('');
+  const [editingId, setEditingId] = useState(null);
+  const [form, setForm] = useState(emptyForm());
+  const [revealed, setRevealed] = useState({});
+
+  async function loadEntries() {
+    setLoading(true);
+    const { data, error } = await supabase
+      .from('fourge_passwords')
+      .select('id, service_name, service_url, username, notes, created_at, updated_at, created_by')
+      .order('service_name', { ascending: true });
+
+    if (error) {
+      setStatus(`Failed to load passwords: ${error.message}`);
+      setEntries([]);
+      setLoading(false);
+      return;
+    }
+
+    setEntries(sortEntries(data || []));
+    setLoading(false);
+    setStatus('');
+  }
+
+  useEffect(() => {
+    loadEntries();
+  }, []);
+
+  function beginCreate() {
+    setEditingId('new');
+    setForm(emptyForm());
+    setStatus('');
+  }
+
+  function beginEdit(entry) {
+    setEditingId(entry.id);
+    setForm({
+      service_name: entry.service_name || '',
+      service_url: entry.service_url || '',
+      username: entry.username || '',
+      password: '',
+      notes: entry.notes || '',
+    });
+    setStatus('');
+  }
+
+  function cancelEdit() {
+    setEditingId(null);
+    setForm(emptyForm());
+  }
+
+  async function handleSave(event) {
+    event.preventDefault();
+    if (!form.service_name.trim() || !form.username.trim()) {
+      setStatus('Service and username are required.');
+      return;
+    }
+
+    if (editingId === 'new' && !form.password) {
+      setStatus('Password is required for new entries.');
+      return;
+    }
+
+    setSaving(true);
+    setStatus('');
+
+    try {
+      let encryptedPayload = null;
+      if (form.password) {
+        encryptedPayload = await invokeCrypto('encrypt', { plaintext: form.password });
+      }
+
+      const payload = {
+        service_name: form.service_name.trim(),
+        service_url: form.service_url.trim(),
+        username: form.username.trim(),
+        notes: form.notes.trim(),
+        updated_at: new Date().toISOString(),
+      };
+
+      if (encryptedPayload) {
+        payload.encrypted_password = encryptedPayload.ciphertext;
+        payload.password_iv = encryptedPayload.iv;
+      }
+
+      if (editingId === 'new') {
+        payload.created_by = currentUser?.id || null;
+        const { data, error } = await supabase
+          .from('fourge_passwords')
+          .insert(payload)
+          .select('id, service_name, service_url, username, notes, created_at, updated_at, created_by')
+          .single();
+
+        if (error) throw error;
+        setEntries(prev => sortEntries([...prev, data]));
+        setStatus('Password saved.');
+      } else {
+        const { data, error } = await supabase
+          .from('fourge_passwords')
+          .update(payload)
+          .eq('id', editingId)
+          .select('id, service_name, service_url, username, notes, created_at, updated_at, created_by')
+          .single();
+
+        if (error) throw error;
+        setEntries(prev => sortEntries(prev.map(entry => entry.id === editingId ? data : entry)));
+        setStatus('Password updated.');
+      }
+
+      cancelEdit();
+    } catch (error) {
+      setStatus(`Save failed: ${error.message}`);
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  async function handleDelete(entry) {
+    if (!window.confirm(`Delete the password entry for "${entry.service_name}"?`)) return;
+
+    setStatus('');
+    const { error } = await supabase.from('fourge_passwords').delete().eq('id', entry.id);
+    if (error) {
+      setStatus(`Delete failed: ${error.message}`);
+      return;
+    }
+
+    setEntries(prev => prev.filter(item => item.id !== entry.id));
+    setRevealed(prev => {
+      const next = { ...prev };
+      delete next[entry.id];
+      return next;
+    });
+    setStatus('Password deleted.');
+  }
+
+  async function handleReveal(entry) {
+    if (revealed[entry.id]) {
+      setRevealed(prev => {
+        const next = { ...prev };
+        delete next[entry.id];
+        return next;
+      });
+      return;
+    }
+
+    setStatus('');
+    try {
+      const { data, error } = await supabase
+        .from('fourge_passwords')
+        .select('encrypted_password, password_iv')
+        .eq('id', entry.id)
+        .single();
+
+      if (error) throw error;
+
+      const decrypted = await invokeCrypto('decrypt', {
+        ciphertext: data.encrypted_password,
+        iv: data.password_iv,
+      });
+
+      setRevealed(prev => ({ ...prev, [entry.id]: decrypted.plaintext }));
+    } catch (error) {
+      setStatus(`Reveal failed: ${error.message}`);
+    }
+  }
+
+  async function handleCopy(entry) {
+    try {
+      let password = revealed[entry.id];
+      if (!password) {
+        const { data, error } = await supabase
+          .from('fourge_passwords')
+          .select('encrypted_password, password_iv')
+          .eq('id', entry.id)
+          .single();
+
+        if (error) throw error;
+
+        const decrypted = await invokeCrypto('decrypt', {
+          ciphertext: data.encrypted_password,
+          iv: data.password_iv,
+        });
+        password = decrypted.plaintext;
+        setRevealed(prev => ({ ...prev, [entry.id]: password }));
+      }
+
+      await navigator.clipboard.writeText(password);
+      setStatus(`Copied password for ${entry.service_name}.`);
+    } catch (error) {
+      setStatus(`Copy failed: ${error.message}`);
+    }
+  }
+
+  return (
+    <Layout>
+      <div className="page-header">
+        <div>
+          <div className="page-title">Fourge Passwords</div>
+          <div className="page-subtitle">Encrypted team-only vault entries for services, logins, and internal access.</div>
+        </div>
+        <button className="btn btn-primary btn-sm" onClick={beginCreate}>
+          + New Password
+        </button>
+      </div>
+
+      {(editingId || status) && (
+        <div className="card" style={{ marginBottom: 20 }}>
+          {editingId && (
+            <form onSubmit={handleSave} style={{ display: 'grid', gap: 14 }}>
+              <div className="card-title">{editingId === 'new' ? 'Add Password' : 'Edit Password'}</div>
+              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: 12 }}>
+                <input className="input" placeholder="Service name" value={form.service_name} onChange={(e) => setForm(prev => ({ ...prev, service_name: e.target.value }))} />
+                <input className="input" placeholder="Service URL" value={form.service_url} onChange={(e) => setForm(prev => ({ ...prev, service_url: e.target.value }))} />
+                <input className="input" placeholder="Username / email" value={form.username} onChange={(e) => setForm(prev => ({ ...prev, username: e.target.value }))} />
+                <input className="input" placeholder={editingId === 'new' ? 'Password' : 'New password (leave blank to keep current)'} value={form.password} onChange={(e) => setForm(prev => ({ ...prev, password: e.target.value }))} />
+              </div>
+              <textarea className="input" rows="4" placeholder="Notes" value={form.notes} onChange={(e) => setForm(prev => ({ ...prev, notes: e.target.value }))} />
+              <div style={{ display: 'flex', gap: 8 }}>
+                <button className="btn btn-primary btn-sm" type="submit" disabled={saving}>
+                  {saving ? 'Saving...' : 'Save'}
+                </button>
+                <button className="btn btn-outline btn-sm" type="button" onClick={cancelEdit}>
+                  Cancel
+                </button>
+              </div>
+            </form>
+          )}
+          {status && <div style={{ marginTop: editingId ? 12 : 0, fontSize: 13, color: 'var(--text-secondary)' }}>{status}</div>}
+        </div>
+      )}
+
+      <div className="card">
+        {loading ? (
+          <div style={{ color: 'var(--text-muted)' }}>Loading passwords...</div>
+        ) : entries.length === 0 ? (
+          <div className="empty-state" style={{ padding: '28px 20px' }}>
+            <h3 style={{ marginBottom: 8 }}>No passwords yet</h3>
+            <p>Add encrypted password entries for internal services and team access.</p>
+          </div>
+        ) : (
+          <div style={{ display: 'grid', gap: 10 }}>
+            {entries.map(entry => (
+              <div
+                key={entry.id}
+                className="interactive-row"
+                style={{
+                  padding: '16px',
+                  border: '1px solid var(--border)',
+                  borderRadius: 10,
+                  display: 'grid',
+                  gap: 10,
+                }}
+              >
+                <div style={{ display: 'flex', justifyContent: 'space-between', gap: 12, alignItems: 'flex-start', flexWrap: 'wrap' }}>
+                  <div>
+                    <div style={{ fontSize: 15, fontWeight: 700, color: 'var(--text-primary)' }}>{entry.service_name}</div>
+                    <div style={{ fontSize: 12, color: 'var(--text-muted)', marginTop: 4 }}>
+                      Updated {formatDate(entry.updated_at || entry.created_at)}
+                    </div>
+                  </div>
+                  <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
+                    <button className="btn btn-outline btn-sm" onClick={() => handleReveal(entry)}>
+                      {revealed[entry.id] ? 'Hide' : 'Reveal'}
+                    </button>
+                    <button className="btn btn-outline btn-sm" onClick={() => handleCopy(entry)}>
+                      Copy
+                    </button>
+                    <button className="btn btn-outline btn-sm" onClick={() => beginEdit(entry)}>
+                      Edit
+                    </button>
+                    <button className="btn btn-outline btn-sm" onClick={() => handleDelete(entry)}>
+                      Delete
+                    </button>
+                  </div>
+                </div>
+
+                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: 12 }}>
+                  <div>
+                    <div style={{ fontSize: 11, color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: 0.5 }}>Username</div>
+                    <div style={{ fontSize: 14, color: 'var(--text-primary)', marginTop: 4 }}>{entry.username}</div>
+                  </div>
+                  <div>
+                    <div style={{ fontSize: 11, color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: 0.5 }}>Password</div>
+                    <div style={{ fontSize: 14, color: 'var(--text-primary)', marginTop: 4, fontFamily: 'monospace' }}>
+                      {revealed[entry.id] || '••••••••••••'}
+                    </div>
+                  </div>
+                  <div>
+                    <div style={{ fontSize: 11, color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: 0.5 }}>Service URL</div>
+                    <div style={{ fontSize: 14, color: 'var(--text-primary)', marginTop: 4, wordBreak: 'break-word' }}>
+                      {entry.service_url ? <a href={normalizeUrl(entry.service_url)} target="_blank" rel="noreferrer" style={{ color: 'var(--accent)' }}>{entry.service_url}</a> : '—'}
+                    </div>
+                  </div>
+                </div>
+
+                {entry.notes && (
+                  <div>
+                    <div style={{ fontSize: 11, color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: 0.5 }}>Notes</div>
+                    <div style={{ fontSize: 13, color: 'var(--text-secondary)', marginTop: 4, whiteSpace: 'pre-wrap' }}>{entry.notes}</div>
+                  </div>
+                )}
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </Layout>
+  );
+}
diff --git a/src/pages/team/Invoices.jsx b/src/pages/team/Invoices.jsx
index 9108891..1d81e99 100644
--- a/src/pages/team/Invoices.jsx
+++ b/src/pages/team/Invoices.jsx
@@ -1,15 +1,73 @@
 import { useState, useEffect } from 'react';
-import { Link, useNavigate } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
 import Layout from '../../components/Layout';
 import { supabase } from '../../lib/supabase';
+import { readPageCache, writePageCache } from '../../lib/pageCache';
+import { exportCPAPackage, generateSubcontractorPOPDF } from '../../lib/invoice';
+import { sendEmail } from '../../lib/email';
 
+const CATEGORIES = ['Software', 'Contractor', 'Advertising', 'Office', 'Travel', 'Meals', 'Equipment', 'Other'];
 const statusColor = { draft: 'not_started', sent: 'in_progress', paid: 'client_approved' };
+const poStatusColor = {
+  draft: 'not_started',
+  sent: 'in_progress',
+  approved: 'client_approved',
+  ready_to_pay: 'in_progress',
+  paid: 'client_approved',
+  cancelled: 'needs_revision',
+};
+const poStatusLabel = {
+  draft: 'Draft',
+  sent: 'Sent',
+  approved: 'Approved',
+  ready_to_pay: 'Ready to Pay',
+  paid: 'Paid',
+  cancelled: 'Cancelled',
+};
+const RECEIPT_BUCKET = 'expense-receipts';
+const FIELD_LABEL_STYLE = { fontSize: 11, fontWeight: 600, color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: 0.5, display: 'block', marginBottom: 4 };
+const FIELD_INPUT_STYLE = { minHeight: 42, margin: 0 };
+
+const blankExpense = () => ({
+  date: new Date().toISOString().slice(0, 10),
+  description: '',
+  category: 'Other',
+  amount: '',
+  notes: '',
+  receipt: null,
+  receipt_path: null,
+  receipt_name: null,
+  removeReceipt: false,
+});
+
+function getFileExt(name = '') {
+  const clean = String(name).split('.').pop()?.toLowerCase();
+  return clean && clean !== name ? clean.replace(/[^a-z0-9]/g, '') : 'bin';
+}
 
 export default function Invoices() {
   const navigate = useNavigate();
-  const [invoices, setInvoices] = useState([]);
-  const [loading, setLoading] = useState(true);
+  const location = useLocation();
+  const cached = readPageCache('team_invoices');
+  const [invoices, setInvoices] = useState(() => cached?.invoices || []);
+  const [loading, setLoading] = useState(() => !cached);
+  const [activeTab, setActiveTab] = useState(() => location.state?.tab || 'invoices');
   const [filter, setFilter] = useState('all');
+  const [filterCompany, setFilterCompany] = useState('');
+  const [exportYear, setExportYear] = useState(new Date().getFullYear());
+  const [exporting, setExporting] = useState(false);
+
+  const [expenses, setExpenses] = useState([]);
+  const [expensesLoading, setExpensesLoading] = useState(true);
+  const [expensesError, setExpensesError] = useState('');
+  const [newExpense, setNewExpense] = useState(blankExpense());
+  const [addingExpense, setAddingExpense] = useState(false);
+  const [editingExpenseId, setEditingExpenseId] = useState('');
+  const [expenseFilter, setExpenseFilter] = useState('all');
+  const [subcontractorPOs, setSubcontractorPOs] = useState([]);
+  const [subcontractorLoading, setSubcontractorLoading] = useState(true);
+  const [subcontractorError, setSubcontractorError] = useState('');
+  const [selectedSubcontractorPOId, setSelectedSubcontractorPOId] = useState('');
 
   useEffect(() => {
     async function load() {
@@ -18,98 +76,810 @@ export default function Invoices() {
         .select('*, company:companies(name)')
         .order('created_at', { ascending: false });
       setInvoices(data || []);
+      writePageCache('team_invoices', { invoices: data || [] });
       setLoading(false);
     }
     load();
   }, []);
 
-  const filtered = filter === 'all' ? invoices : invoices.filter(inv => inv.status === filter);
+  useEffect(() => {
+    async function loadExpenses() {
+      const [{ data, error }, { data: purchaseOrders, error: purchaseOrdersError }] = await Promise.all([
+        supabase.from('expenses').select('*').order('date', { ascending: false }),
+        supabase
+          .from('subcontractor_payments')
+          .select('*, profile:profiles!subcontractor_payments_profile_id_fkey(id, name, email), project:projects(id, name, company:companies(name)), items:subcontractor_po_items(*, task:tasks(id, title))')
+          .order('date', { ascending: false }),
+      ]);
+      if (error) {
+        console.error('Failed to load expenses:', error);
+        setExpensesError(error.message || 'Failed to load expenses.');
+        setExpenses([]);
+      } else {
+        setExpenses(data || []);
+        setExpensesError('');
+      }
+      if (purchaseOrdersError) {
+        console.error('Failed to load subcontractor POs:', purchaseOrdersError);
+        setSubcontractorError(purchaseOrdersError.message || 'Failed to load subcontractor POs.');
+        setSubcontractorPOs([]);
+      } else {
+        setSubcontractorPOs(purchaseOrders || []);
+        setSubcontractorError('');
+      }
+      setExpensesLoading(false);
+      setSubcontractorLoading(false);
+    }
+    loadExpenses();
+  }, []);
+
+  const startEditExpense = (expense) => {
+    setEditingExpenseId(expense.id);
+    setNewExpense({
+      date: expense.date,
+      description: expense.description || '',
+      category: expense.category || 'Other',
+      amount: String(expense.amount ?? ''),
+      notes: expense.notes || '',
+      receipt: null,
+      receipt_path: expense.receipt_path || null,
+      receipt_name: expense.receipt_name || null,
+      removeReceipt: false,
+    });
+    setExpensesError('');
+  };
+
+  const cancelExpenseEdit = () => {
+    setEditingExpenseId('');
+    setNewExpense(blankExpense());
+    setExpensesError('');
+  };
+
+  const handleAddExpense = async (e) => {
+    e.preventDefault();
+    if (!newExpense.description.trim() || !newExpense.amount) return;
+    setAddingExpense(true);
+    setExpensesError('');
+    try {
+      const existingExpense = editingExpenseId ? expenses.find(expense => expense.id === editingExpenseId) : null;
+      let receiptPath = existingExpense?.receipt_path || newExpense.receipt_path || null;
+      let receiptName = existingExpense?.receipt_name || newExpense.receipt_name || null;
+
+      if (newExpense.removeReceipt && existingExpense?.receipt_path) {
+        await supabase.storage.from(RECEIPT_BUCKET).remove([existingExpense.receipt_path]);
+        receiptPath = null;
+        receiptName = null;
+      }
+
+      if (newExpense.receipt) {
+        const ext = getFileExt(newExpense.receipt.name);
+        receiptName = newExpense.receipt.name;
+        receiptPath = `${newExpense.date}/${Date.now()}-${crypto.randomUUID()}.${ext}`;
+        const { error: uploadError } = await supabase.storage.from(RECEIPT_BUCKET).upload(receiptPath, newExpense.receipt, { upsert: false });
+        if (uploadError) throw uploadError;
+        if (existingExpense?.receipt_path) {
+          await supabase.storage.from(RECEIPT_BUCKET).remove([existingExpense.receipt_path]);
+        }
+      }
+
+      const payload = {
+        date: newExpense.date,
+        description: newExpense.description.trim(),
+        category: newExpense.category,
+        amount: Number(newExpense.amount),
+        notes: newExpense.notes.trim(),
+        receipt_path: receiptPath,
+        receipt_name: receiptName,
+      };
+
+      const query = editingExpenseId
+        ? supabase.from('expenses').update(payload).eq('id', editingExpenseId)
+        : supabase.from('expenses').insert(payload);
+      const { data, error } = await query.select().single();
+
+      if (error) {
+        if (newExpense.receipt && receiptPath) {
+          await supabase.storage.from(RECEIPT_BUCKET).remove([receiptPath]);
+        }
+        throw error;
+      }
+
+      if (data) {
+        setExpenses(prev => editingExpenseId
+          ? prev.map(expense => expense.id === editingExpenseId ? data : expense)
+          : [data, ...prev]
+        );
+        setNewExpense(blankExpense());
+        setEditingExpenseId('');
+      }
+    } catch (error) {
+      console.error(`Failed to ${editingExpenseId ? 'update' : 'add'} expense:`, error);
+      setExpensesError(error.message || `Failed to ${editingExpenseId ? 'update' : 'add'} expense.`);
+      alert(`Failed to ${editingExpenseId ? 'update' : 'add'} expense: ${error.message || 'unknown error'}`);
+    }
+    setAddingExpense(false);
+  };
+
+  const handleDeleteExpense = async (id) => {
+    if (!window.confirm('Delete this expense?')) return;
+    const expense = expenses.find(e => e.id === id);
+    if (expense?.receipt_path) {
+      await supabase.storage.from(RECEIPT_BUCKET).remove([expense.receipt_path]);
+    }
+    await supabase.from('expenses').delete().eq('id', id);
+    setExpenses(prev => prev.filter(e => e.id !== id));
+  };
+
+  const handleViewReceipt = async (expense) => {
+    if (!expense.receipt_path) return;
+    const { data, error } = await supabase.storage.from(RECEIPT_BUCKET).createSignedUrl(expense.receipt_path, 3600, {
+      download: expense.receipt_name || undefined,
+    });
+    if (error || !data?.signedUrl) {
+      const message = error?.message || 'Failed to open receipt.';
+      setExpensesError(message);
+      alert(message);
+      return;
+    }
+    window.open(data.signedUrl, '_blank', 'noopener,noreferrer');
+  };
+
+  const updateSubcontractorPO = async (po, updates, errorLabel = 'Failed to update PO') => {
+    const { data, error } = await supabase
+      .from('subcontractor_payments')
+      .update(updates)
+      .eq('id', po.id)
+      .select('*, profile:profiles!subcontractor_payments_profile_id_fkey(id, name, email), project:projects(id, name, company:companies(name)), items:subcontractor_po_items(*, task:tasks(id, title))')
+      .single();
+    if (error) {
+      alert(`${errorLabel}: ${error.message}`);
+      return null;
+    }
+    if (data) {
+      setSubcontractorPOs(prev => prev.map(row => row.id === po.id ? data : row));
+      setSelectedSubcontractorPOId(current => current === po.id ? data.id : current);
+    }
+    return data;
+  };
+
+  const handleSendSubcontractorPO = async (po) => {
+    const sentPO = await updateSubcontractorPO(po, { status: 'sent', sent_at: new Date().toISOString() }, 'Failed to send PO');
+    if (!sentPO?.profile?.email) return;
+    try {
+      await sendEmail('subcontractor_po_sent', sentPO.profile.email, {
+        poNumber: sentPO.po_number || 'Purchase Order',
+        subcontractorName: sentPO.profile?.name || 'there',
+        projectName: sentPO.project?.name || 'Subcontractor Work',
+        companyName: sentPO.project?.company?.name || 'Fourge Branding',
+        amount: `$${Number(sentPO.amount).toFixed(2)}`,
+        dueDate: sentPO.due_date ? new Date(sentPO.due_date).toLocaleDateString() : 'Not set',
+        terms: sentPO.terms || 'Net 15',
+        scope: sentPO.items?.length
+          ? sentPO.items.map(item => `${item.description} — $${Number(item.amount).toFixed(2)}`).join('\n')
+          : sentPO.description,
+        portalUrl: 'https://portal.fourgebranding.com/my-purchase-orders',
+      });
+    } catch (emailError) {
+      console.error('Failed to email subcontractor PO:', emailError);
+      alert(`PO was marked sent, but the email failed: ${emailError.message || 'unknown error'}`);
+    }
+  };
+
+  const handleReadyToPaySubcontractorPO = (po) => {
+    updateSubcontractorPO(po, { status: 'ready_to_pay' }, 'Failed to mark ready to pay');
+  };
+
+  const handleMarkSubcontractorPaid = async (po) => {
+    const paidAt = new Date().toISOString().slice(0, 10);
+    updateSubcontractorPO(po, { status: 'paid', paid_at: paidAt }, 'Failed to mark as paid');
+  };
+
+  const handleReopenSubcontractorPO = async (po) => {
+    updateSubcontractorPO(po, { status: 'draft', paid_at: null, cancelled_at: null }, 'Failed to reopen PO');
+  };
+
+  const handleCancelSubcontractorPO = async (po) => {
+    if (!window.confirm(`Cancel ${po.po_number || 'this PO'}?`)) return;
+    updateSubcontractorPO(po, { status: 'cancelled', cancelled_at: new Date().toISOString() }, 'Failed to cancel PO');
+  };
+
+  const handleDeleteSubcontractorPO = async (id) => {
+    if (!window.confirm('Delete this subcontractor PO?')) return;
+    await supabase.from('subcontractor_payments').delete().eq('id', id);
+    setSubcontractorPOs(prev => prev.filter(po => po.id !== id));
+    setSelectedSubcontractorPOId(current => current === id ? '' : current);
+  };
+
+  const handleDownloadSubcontractorPO = async (po) => {
+    try {
+      await generateSubcontractorPOPDF(po);
+    } catch (error) {
+      console.error('Failed to download subcontractor PO:', error);
+      alert(`Failed to download PO: ${error.message || 'unknown error'}`);
+    }
+  };
+
+  const handleCPAExport = async () => {
+    setExporting(true);
+    try {
+      const yearInvoices = invoices.filter(inv =>
+        inv.status === 'paid' && new Date(inv.invoice_date).getFullYear() === exportYear
+      );
+      const yearExpenses = expenses.filter(exp =>
+        new Date(exp.date).getFullYear() === exportYear
+      );
+      const yearSubcontractorExpenses = subcontractorPOs
+        .filter(po => po.status === 'paid' && new Date(po.paid_at || po.date).getFullYear() === exportYear)
+        .map(po => ({
+          date: po.paid_at || po.date,
+          category: 'Contractor',
+          description: `Subcontractor: ${po.profile?.name || 'External'} — ${po.items?.length ? po.items.map(item => item.description).join('; ') : po.description}`,
+          amount: po.amount,
+          notes: [po.po_number, po.project?.name, po.notes || po.profile?.email || ''].filter(Boolean).join(' · '),
+        }));
+      const exportExpenses = [...yearExpenses, ...yearSubcontractorExpenses];
+      if (!yearInvoices.length && !exportExpenses.length) {
+        alert(`No data found for ${exportYear}.`);
+        return;
+      }
+      const { data: allItems } = yearInvoices.length ? await supabase
+        .from('invoice_items')
+        .select('invoice_id, description')
+        .in('invoice_id', yearInvoices.map(i => i.id)) : { data: [] };
+      const itemsByInvoice = (allItems || []).reduce((acc, item) => {
+        (acc[item.invoice_id] = acc[item.invoice_id] || []).push(item);
+        return acc;
+      }, {});
+      await exportCPAPackage(yearInvoices, itemsByInvoice, exportExpenses, exportYear);
+    } finally {
+      setExporting(false);
+    }
+  };
+
+  const paidYears = [...new Set(
+    invoices.filter(i => i.status === 'paid').map(i => new Date(i.invoice_date).getFullYear())
+  )].sort((a, b) => b - a);
+
+  const companyNames = [...new Set(invoices.map(inv => inv.company?.name).filter(Boolean))].sort();
+  const filtered = invoices.filter(inv => {
+    if (filter !== 'all' && inv.status !== filter) return false;
+    if (filterCompany && inv.company?.name !== filterCompany) return false;
+    return true;
+  });
 
   const totals = {
     all: invoices.reduce((s, i) => s + Number(i.total), 0),
     draft: invoices.filter(i => i.status === 'draft').reduce((s, i) => s + Number(i.total), 0),
     sent: invoices.filter(i => i.status === 'sent').reduce((s, i) => s + Number(i.total), 0),
     paid: invoices.filter(i => i.status === 'paid').reduce((s, i) => s + Number(i.total), 0),
+    netReceived: invoices.filter(i => i.status === 'paid').reduce((s, i) => s + Number(i.total) - Number(i.stripe_fee || 0), 0),
   };
 
+  const filteredExpenses = expenseFilter === 'all'
+    ? expenses
+    : expenses.filter(e => e.category === expenseFilter);
+  const paidSubcontractorPOs = subcontractorPOs.filter(po => po.status === 'paid');
+  const payableSubcontractorPOs = subcontractorPOs.filter(po => ['approved', 'ready_to_pay'].includes(po.status));
+  const selectedSubcontractorPO = subcontractorPOs.find(po => po.id === selectedSubcontractorPOId);
+  const totalPaidSubcontractors = paidSubcontractorPOs.reduce((s, po) => s + Number(po.amount), 0);
+  const totalPayableSubcontractors = payableSubcontractorPOs.reduce((s, po) => s + Number(po.amount), 0);
+  const totalExpenses = filteredExpenses.reduce((s, e) => s + Number(e.amount), 0);
+  const currentYear = new Date().getFullYear();
+  const yearExpenses = expenses.filter(e => new Date(e.date).getFullYear() === currentYear);
+  const currentYearExpenseTotal = yearExpenses.reduce((s, e) => s + Number(e.amount), 0);
+  const currentYearPaidSubcontractors = paidSubcontractorPOs
+    .filter(po => new Date(po.paid_at || po.date).getFullYear() === currentYear)
+    .reduce((s, po) => s + Number(po.amount), 0);
+  const currentYearTotalExpenses = currentYearExpenseTotal + currentYearPaidSubcontractors;
+  const revenue = totals.paid;
+  const profit = totals.netReceived - expenses.reduce((s, e) => s + Number(e.amount), 0) - totalPaidSubcontractors;
+
   return (
     <Layout>
       <div className="page-header">
         <div>
-          <div className="page-title">Invoices</div>
-          <div className="page-subtitle">{invoices.length} invoice{invoices.length !== 1 ? 's' : ''} total</div>
+          <div className="page-title">Invoices & Expenses</div>
+          <div className="page-subtitle">{invoices.length} invoice{invoices.length !== 1 ? 's' : ''} · {expenses.length} expense{expenses.length !== 1 ? 's' : ''} · {subcontractorPOs.length} subcontractor PO{subcontractorPOs.length !== 1 ? 's' : ''}</div>
+        </div>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+          {paidYears.length > 0 && (
+            <select
+              value={exportYear}
+              onChange={e => setExportYear(Number(e.target.value))}
+              className="btn btn-outline btn-sm"
+              style={{ cursor: 'pointer' }}
+            >
+              {paidYears.map(y => (
+                <option key={y} value={y}>{y}</option>
+              ))}
+            </select>
+          )}
+          <button className="btn btn-outline btn-sm" onClick={handleCPAExport} disabled={exporting}>
+            {exporting ? 'Exporting…' : 'Export for CPA'}
+          </button>
         </div>
-        <button className="btn btn-primary btn-sm" onClick={() => navigate('/invoices/new')}>+ New Invoice</button>
       </div>
 
-      <div className="stats-grid" style={{ marginBottom: 24 }}>
+      <div className="stats-grid" style={{ marginBottom: 18 }}>
         {[
+          { label: 'Revenue', value: revenue, detail: 'paid invoices' },
+          { label: 'Profit', value: profit, detail: 'net minus expenses' },
           { label: 'Outstanding', value: totals.sent, count: invoices.filter(i => i.status === 'sent').length },
           { label: 'Paid', value: totals.paid, count: invoices.filter(i => i.status === 'paid').length },
-          { label: 'Draft', value: totals.draft, count: invoices.filter(i => i.status === 'draft').length },
-          { label: 'Total Billed', value: totals.all, count: invoices.length },
-        ].map(({ label, value, count }) => (
-          <div key={label} className="stat-card">
-            <div className="stat-value" style={{ fontSize: 22 }}>${value.toFixed(2)}</div>
-            <div className="stat-label">{label} · {count} invoice{count !== 1 ? 's' : ''}</div>
+          { label: 'Net Received', value: totals.netReceived, detail: 'after Stripe fees' },
+        ].map(({ label, value, count, detail }) => (
+          <div key={label} className={`stat-card${label === 'Revenue' ? ' stat-card-highlight' : ''}`}>
+            <div className="stat-value" style={{ fontSize: 22, color: label === 'Profit' && value < 0 ? 'var(--danger)' : undefined }}>${value.toFixed(2)}</div>
+            <div className="stat-label">{count !== undefined ? `${label} · ${count} invoice${count !== 1 ? 's' : ''}` : `${label} · ${detail}`}</div>
           </div>
         ))}
       </div>
 
-      <div style={{ display: 'flex', gap: 8, marginBottom: 16 }}>
-        {['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 className="stats-grid" style={{ marginBottom: 24 }}>
+        <div className="stat-card">
+          <div className="stat-value" style={{ fontSize: 22 }}>${currentYearTotalExpenses.toFixed(2)}</div>
+          <div className="stat-label">Expenses This Year · includes paid subcontractors</div>
+        </div>
+        <div className="stat-card">
+          <div className="stat-value" style={{ fontSize: 22 }}>${totalExpenses.toFixed(2)}</div>
+          <div className="stat-label">Filtered Expenses · {filteredExpenses.length} item{filteredExpenses.length !== 1 ? 's' : ''}</div>
+        </div>
+        <div className="stat-card">
+          <div className="stat-value" style={{ fontSize: 22 }}>${totalPayableSubcontractors.toFixed(2)}</div>
+          <div className="stat-label">Subcontractors Payable · {payableSubcontractorPOs.length} approved/ready</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 style={{ marginBottom: 12, display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, flexWrap: 'wrap' }}>
+        <div className="card-title" style={{ marginBottom: 0, display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap' }}>
+          {[
+            { id: 'invoices', label: 'Invoices' },
+            { id: 'subcontractor-po', label: 'Subcontractor PO' },
+            { id: 'expenses', label: 'Expenses' },
+          ].map((tab, index) => (
+            <span key={tab.id} style={{ display: 'inline-flex', alignItems: 'center', gap: 10 }}>
+              {index > 0 && <span style={{ color: 'var(--text-muted)' }}>|</span>}
+              <button
+                type="button"
+                onClick={() => setActiveTab(tab.id)}
+                style={{
+                  background: 'none',
+                  border: 'none',
+                  padding: 0,
+                  margin: 0,
+                  cursor: 'pointer',
+                  color: activeTab === tab.id ? 'var(--text-primary)' : 'var(--text-muted)',
+                  font: 'inherit',
+                  textTransform: 'inherit',
+                  letterSpacing: 'inherit',
+                }}
+              >
+                {tab.label}
+              </button>
+            </span>
+          ))}
         </div>
-      ) : (
-        <div className="table-wrapper">
-          <table>
-            <thead>
-              <tr>
-                <th>Invoice #</th>
-                <th>Company</th>
-                <th>Date</th>
-                <th>Due</th>
-                <th>Status</th>
-                <th>Total</th>
-              </tr>
-            </thead>
-            <tbody>
-              {filtered.map(inv => (
-                <tr key={inv.id} onClick={() => navigate(`/invoices/${inv.id}`)} style={{ cursor: 'pointer' }}>
-                  <td style={{ fontWeight: 600 }}>{inv.invoice_number}</td>
-                  <td>
-                    <div style={{ fontWeight: 600 }}>{inv.company?.name}</div>
-                  </td>
-                  <td>{new Date(inv.invoice_date).toLocaleDateString()}</td>
-                  <td>
-                    <span style={{ color: inv.status !== 'paid' && new Date(inv.due_date) < new Date() ? 'var(--danger)' : 'inherit' }}>
-                      {new Date(inv.due_date).toLocaleDateString()}
-                    </span>
-                  </td>
-                  <td><span className={`badge badge-${statusColor[inv.status]}`} style={{ textTransform: 'capitalize' }}>{inv.status}</span></td>
-                  <td style={{ fontWeight: 700 }}>${Number(inv.total).toFixed(2)}</td>
-                </tr>
+        {activeTab === 'invoices' && (
+          <button className="btn btn-primary btn-sm" onClick={() => navigate('/invoices/new')}>+ New Invoice</button>
+        )}
+        {activeTab === 'subcontractor-po' && (
+          <button className="btn btn-primary btn-sm" onClick={() => navigate('/subcontractor-pos/new')}>+ New PO</button>
+        )}
+      </div>
+
+      {activeTab === 'invoices' && (
+      <div>
+
+        {/* ── 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">
+              <table>
+                <thead>
+                  <tr>
+                    <th>Invoice #</th>
+                    <th>Bill To</th>
+                    <th>Date</th>
+                    <th>Due</th>
+                    <th>Status</th>
+                    <th>Total</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {filtered.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>
+                      <td>{new Date(inv.invoice_date).toLocaleDateString()}</td>
+                      <td>
+                        <span style={{ color: inv.status !== 'paid' && new Date(inv.due_date) < new Date() ? 'var(--danger)' : 'inherit' }}>
+                          {new Date(inv.due_date).toLocaleDateString()}
+                        </span>
+                      </td>
+                      <td><span className={`badge badge-${statusColor[inv.status]}`} style={{ textTransform: 'capitalize' }}>{inv.status}</span></td>
+                      <td style={{ fontWeight: 700 }}>${Number(inv.total).toFixed(2)}</td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          )}
+        </div>
+      </div>
+      )}
+
+      {activeTab === 'expenses' && (
+      <div style={{ display: 'grid', gridTemplateColumns: '1fr 360px', gap: 24, alignItems: 'start' }}>
+        <div>
+          <div className="card" style={{ marginBottom: 16 }}>
+            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, marginBottom: 12 }}>
+              <div className="card-title" style={{ marginBottom: 0 }}>Saved Expenses</div>
+              <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>
+              {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>
               ))}
-            </tbody>
-          </table>
+            </div>
+
+            {expensesLoading ? (
+              <p style={{ color: 'var(--text-muted)', fontSize: 13 }}>Loading...</p>
+            ) : expensesError ? (
+              <p style={{ color: 'var(--danger)', fontSize: 13 }}>{expensesError}</p>
+            ) : filteredExpenses.length === 0 ? (
+              <p style={{ color: 'var(--text-muted)', fontSize: 13 }}>No expenses yet.</p>
+            ) : (
+              <div className="table-wrapper" style={{ marginTop: 0 }}>
+                <table>
+                  <thead>
+                    <tr>
+                      <th>Date</th>
+                      <th>Description</th>
+                      <th>Category</th>
+                      <th>Notes</th>
+                      <th style={{ textAlign: 'right' }}>Amount</th>
+                      <th style={{ width: 140, textAlign: 'right' }}>Action</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {filteredExpenses.map(exp => (
+                      <tr key={exp.id}>
+                        <td>{new Date(exp.date).toLocaleDateString()}</td>
+                        <td style={{ fontWeight: 600 }}>{exp.description}</td>
+                        <td>{exp.category}</td>
+                        <td style={{ color: 'var(--text-muted)' }}>
+                          {exp.notes || exp.receipt_path ? (
+                            <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
+                              <span>{exp.notes || '—'}</span>
+                              {exp.receipt_path && (
+                                <button
+                                  className="btn btn-outline btn-sm"
+                                  style={{ width: 'fit-content' }}
+                                  onClick={() => handleViewReceipt(exp)}
+                                >
+                                  View Receipt
+                                </button>
+                              )}
+                            </div>
+                          ) : '—'}
+                        </td>
+                        <td style={{ textAlign: 'right', fontWeight: 700 }}>${Number(exp.amount).toFixed(2)}</td>
+                        <td style={{ textAlign: 'right' }}>
+                          <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 6 }}>
+                            <button
+                              className="btn btn-outline btn-sm"
+                              onClick={() => startEditExpense(exp)}
+                            >
+                              Edit
+                            </button>
+                            <button
+                              className="btn btn-danger btn-sm"
+                              onClick={() => handleDeleteExpense(exp.id)}
+                            >
+                              Delete
+                            </button>
+                          </div>
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            )}
+          </div>
+
         </div>
+
+        {/* ── Expenses ── */}
+        <div>
+          <div className="card" style={{ marginBottom: 16 }}>
+            <div className="card-title">{editingExpenseId ? 'Edit Expense' : 'Add Expense'}</div>
+            <form onSubmit={handleAddExpense} style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
+              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
+                <div>
+                  <label style={FIELD_LABEL_STYLE}>Date</label>
+                  <input
+                    type="date"
+                    className="input"
+                    value={newExpense.date}
+                    onChange={e => setNewExpense(p => ({ ...p, date: e.target.value }))}
+                    style={FIELD_INPUT_STYLE}
+                    required
+                  />
+                </div>
+                <div>
+                  <label style={FIELD_LABEL_STYLE}>Amount (USD)</label>
+                  <input
+                    type="number"
+                    step="0.01"
+                    min="0"
+                    className="input"
+                    placeholder="0.00"
+                    value={newExpense.amount}
+                    onChange={e => setNewExpense(p => ({ ...p, amount: e.target.value }))}
+                    style={{ ...FIELD_INPUT_STYLE, minHeight: 38, borderRadius: 10 }}
+                    required
+                  />
+                </div>
+              </div>
+              <div>
+                <label style={FIELD_LABEL_STYLE}>Description</label>
+                <input
+                  type="text"
+                  className="input"
+                  placeholder="What was this for?"
+                  value={newExpense.description}
+                  onChange={e => setNewExpense(p => ({ ...p, description: e.target.value }))}
+                  required
+                />
+              </div>
+              <div>
+                <label style={FIELD_LABEL_STYLE}>Category</label>
+                <select
+                  className="input"
+                  value={newExpense.category}
+                  onChange={e => setNewExpense(p => ({ ...p, category: e.target.value }))}
+                  style={FIELD_INPUT_STYLE}
+                >
+                  {CATEGORIES.map(c => <option key={c} value={c}>{c}</option>)}
+                </select>
+              </div>
+              <div>
+                <label style={FIELD_LABEL_STYLE}>Notes (optional)</label>
+                <input
+                  type="text"
+                  className="input"
+                  placeholder="Any extra details"
+                  value={newExpense.notes}
+                  onChange={e => setNewExpense(p => ({ ...p, notes: e.target.value }))}
+                />
+              </div>
+              <div>
+                <label style={FIELD_LABEL_STYLE}>Receipt / Photo (optional)</label>
+                <input
+                  type="file"
+                  className="input"
+                  accept="image/*,.pdf"
+                  style={{ ...FIELD_INPUT_STYLE, padding: '9px 12px' }}
+                  onChange={e => setNewExpense(p => ({ ...p, receipt: e.target.files?.[0] || null, removeReceipt: false }))}
+                />
+                {!newExpense.receipt && newExpense.receipt_path && (
+                  <div style={{ marginTop: 6, display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
+                    <span style={{ fontSize: 12, color: 'var(--text-muted)' }}>{newExpense.receipt_name || 'Existing receipt attached'}</span>
+                    <button
+                      type="button"
+                      className="btn btn-outline btn-sm"
+                      onClick={() => handleViewReceipt(newExpense)}
+                    >
+                      View Receipt
+                    </button>
+                    <button
+                      type="button"
+                      className="btn btn-outline btn-sm"
+                      style={{ color: 'var(--danger)' }}
+                      onClick={() => setNewExpense(p => ({ ...p, removeReceipt: true, receipt_path: null, receipt_name: null }))}
+                    >
+                      Remove Receipt
+                    </button>
+                  </div>
+                )}
+                {newExpense.receipt && (
+                  <div style={{ marginTop: 6, fontSize: 12, color: 'var(--text-muted)' }}>
+                    {newExpense.receipt.name}
+                  </div>
+                )}
+              </div>
+              <div className="action-buttons" style={{ marginTop: 4 }}>
+                <button className="btn btn-primary btn-sm" type="submit" disabled={addingExpense}>
+                  {addingExpense ? (editingExpenseId ? 'Saving…' : 'Adding…') : (editingExpenseId ? 'Save Changes' : '+ Add Expense')}
+                </button>
+                {editingExpenseId && (
+                  <button className="btn btn-outline btn-sm" type="button" onClick={cancelExpenseEdit}>
+                    Cancel
+                  </button>
+                )}
+              </div>
+              {expensesError && (
+                <div style={{ fontSize: 12, color: 'var(--danger)' }}>
+                  {expensesError}
+                </div>
+              )}
+            </form>
+          </div>
+
+        </div>
+      </div>
+      )}
+
+      {activeTab === 'subcontractor-po' && (
+      <div>
+        <div>
+          <div className="card" style={{ marginBottom: 16 }}>
+            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, marginBottom: 12 }}>
+              <div className="card-title" style={{ marginBottom: 0 }}>POs & Payments</div>
+              <div style={{ display: 'flex', gap: 12, fontSize: 13, fontWeight: 700 }}>
+                <span style={{ color: 'var(--accent)' }}>${totalPayableSubcontractors.toFixed(2)} payable</span>
+                <span>${totalPaidSubcontractors.toFixed(2)} paid</span>
+              </div>
+            </div>
+
+            {subcontractorLoading ? (
+              <p style={{ color: 'var(--text-muted)', fontSize: 13 }}>Loading...</p>
+            ) : subcontractorError ? (
+              <p style={{ color: 'var(--danger)', fontSize: 13 }}>{subcontractorError}</p>
+            ) : subcontractorPOs.length === 0 ? (
+              <p style={{ color: 'var(--text-muted)', fontSize: 13 }}>No subcontractor POs yet.</p>
+            ) : (
+              <>
+                {selectedSubcontractorPO && (
+                  <div style={{ marginBottom: 16, padding: 16, background: 'var(--bg)', border: '1px solid var(--border)', borderRadius: 8 }}>
+                    <div style={{ display: 'flex', justifyContent: 'space-between', gap: 16, alignItems: 'flex-start', marginBottom: 12 }}>
+                      <div>
+                        <div style={{ fontSize: 18, fontWeight: 800 }}>{selectedSubcontractorPO.po_number || 'Purchase Order'}</div>
+                        <div style={{ color: 'var(--text-muted)', fontSize: 13 }}>
+                          {selectedSubcontractorPO.profile?.name || 'External'} · {selectedSubcontractorPO.project?.name || 'No project'}
+                        </div>
+                      </div>
+                      <button className="btn btn-outline btn-sm" onClick={() => setSelectedSubcontractorPOId('')}>Close</button>
+                    </div>
+                    <div className="detail-grid" style={{ marginBottom: 12 }}>
+                      <div className="detail-item"><label>Status</label><p><span className={`badge badge-${poStatusColor[selectedSubcontractorPO.status] || 'not_started'}`}>{poStatusLabel[selectedSubcontractorPO.status] || selectedSubcontractorPO.status}</span></p></div>
+                      <div className="detail-item"><label>Amount</label><p>${Number(selectedSubcontractorPO.amount).toFixed(2)}</p></div>
+                      <div className="detail-item"><label>Date</label><p>{new Date(selectedSubcontractorPO.date).toLocaleDateString()}</p></div>
+                      <div className="detail-item"><label>Due</label><p>{selectedSubcontractorPO.due_date ? new Date(selectedSubcontractorPO.due_date).toLocaleDateString() : '—'}</p></div>
+                    </div>
+                    {selectedSubcontractorPO.items?.length > 0 && (
+                      <div style={{ display: 'grid', gap: 6, marginBottom: 12 }}>
+                        {selectedSubcontractorPO.items
+                          .slice()
+                          .sort((a, b) => Number(a.sort_order || 0) - Number(b.sort_order || 0))
+                          .map(item => (
+                            <div key={item.id} style={{ display: 'flex', justifyContent: 'space-between', gap: 12, fontSize: 13 }}>
+                              <span>{item.description || item.task?.title}</span>
+                              <strong>${Number(item.amount).toFixed(2)}</strong>
+                            </div>
+                          ))}
+                      </div>
+                    )}
+                    {selectedSubcontractorPO.notes && (
+                      <p style={{ color: 'var(--text-secondary)', fontSize: 13, whiteSpace: 'pre-wrap' }}>{selectedSubcontractorPO.notes}</p>
+                    )}
+                    <div className="action-buttons" style={{ marginTop: 12 }}>
+                      {selectedSubcontractorPO.status === 'draft' && <button className="btn btn-primary btn-sm" onClick={() => handleSendSubcontractorPO(selectedSubcontractorPO)}>Finalize & Send</button>}
+                      {['sent', 'approved'].includes(selectedSubcontractorPO.status) && <button className="btn btn-outline btn-sm" onClick={() => handleReadyToPaySubcontractorPO(selectedSubcontractorPO)}>Mark Ready</button>}
+                      {selectedSubcontractorPO.status === 'ready_to_pay' && <button className="btn btn-success btn-sm" onClick={() => handleMarkSubcontractorPaid(selectedSubcontractorPO)}>Mark Paid</button>}
+                      {selectedSubcontractorPO.status === 'paid' && <button className="btn btn-outline btn-sm" onClick={() => handleReopenSubcontractorPO(selectedSubcontractorPO)}>Reopen</button>}
+                      <button className="btn btn-outline btn-sm" onClick={() => handleDownloadSubcontractorPO(selectedSubcontractorPO)}>Download</button>
+                      {!['paid', 'cancelled'].includes(selectedSubcontractorPO.status) && <button className="btn btn-outline btn-sm" onClick={() => handleCancelSubcontractorPO(selectedSubcontractorPO)}>Cancel</button>}
+                      <button className="btn btn-danger btn-sm" onClick={() => handleDeleteSubcontractorPO(selectedSubcontractorPO.id)}>Delete</button>
+                    </div>
+                  </div>
+                )}
+                <div className="table-wrapper" style={{ marginTop: 0 }}>
+                  <table>
+                    <thead>
+                      <tr>
+                        <th>PO #</th>
+                        <th>Subcontractor</th>
+                        <th>Date</th>
+                        <th>Status</th>
+                        <th style={{ textAlign: 'right' }}>Amount</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {subcontractorPOs.map(po => (
+                        <tr key={po.id} onClick={() => navigate(`/subcontractor-pos/${po.id}`)} style={{ cursor: 'pointer' }}>
+                          <td>
+                            <div style={{ fontWeight: 700 }}>{po.po_number || 'PO'}</div>
+                          </td>
+                          <td>
+                            <div style={{ fontWeight: 600 }}>{po.profile?.name || 'External'}</div>
+                            <div style={{ color: 'var(--text-muted)', fontSize: 12 }}>{po.profile?.email || '—'}</div>
+                          </td>
+                          <td>
+                            <div>{new Date(po.paid_at || po.date).toLocaleDateString()}</div>
+                            {po.due_date && <div style={{ color: 'var(--text-muted)', fontSize: 12 }}>Due {new Date(po.due_date).toLocaleDateString()}</div>}
+                          </td>
+                          <td>
+                            <span className={`badge badge-${poStatusColor[po.status] || 'not_started'}`} style={{ textTransform: 'capitalize' }}>
+                              {poStatusLabel[po.status] || po.status}
+                            </span>
+                          </td>
+                          <td style={{ textAlign: 'right', fontWeight: 700 }}>${Number(po.amount).toFixed(2)}</td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
+              </>
+            )}
+          </div>
+        </div>
+
+      </div>
       )}
     </Layout>
   );
diff --git a/src/pages/team/MeetingNotes.jsx b/src/pages/team/MeetingNotes.jsx
new file mode 100644
index 0000000..4c2525b
--- /dev/null
+++ b/src/pages/team/MeetingNotes.jsx
@@ -0,0 +1,193 @@
+import { useEffect, useState } from 'react';
+import Layout from '../../components/Layout';
+import LoadingButton from '../../components/LoadingButton';
+import { supabase } from '../../lib/supabase';
+import { useAuth } from '../../context/AuthContext';
+
+function emptyForm() {
+  return {
+    title: '',
+    attendees: '',
+    meeting_at: new Date().toISOString().slice(0, 16),
+    notes: '',
+  };
+}
+
+function formatMeetingDate(value) {
+  if (!value) return 'Unknown date';
+  return new Date(value).toLocaleString('en-US', {
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric',
+    hour: 'numeric',
+    minute: '2-digit',
+  });
+}
+
+export default function MeetingNotes() {
+  const { currentUser } = useAuth();
+  const [notes, setNotes] = useState([]);
+  const [form, setForm] = useState(emptyForm());
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [deletingId, setDeletingId] = useState('');
+  const [status, setStatus] = useState('');
+
+  useEffect(() => {
+    let isMounted = true;
+
+    async function loadInitialNotes() {
+      const { data, error } = await supabase
+        .from('meeting_notes')
+        .select('*')
+        .order('meeting_at', { ascending: false })
+        .order('created_at', { ascending: false });
+
+      if (!isMounted) return;
+
+      if (error) {
+        setStatus(`Failed to load meeting notes: ${error.message}`);
+        setNotes([]);
+      } else {
+        setNotes(data || []);
+        setStatus('');
+      }
+      setLoading(false);
+    }
+
+    loadInitialNotes();
+
+    return () => {
+      isMounted = false;
+    };
+  }, []);
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    if (!form.title.trim() || !form.notes.trim()) {
+      setStatus('Meeting title and notes are required.');
+      return;
+    }
+
+    setSaving(true);
+    const payload = {
+      title: form.title.trim(),
+      attendees: form.attendees.trim(),
+      meeting_at: form.meeting_at ? new Date(form.meeting_at).toISOString() : new Date().toISOString(),
+      notes: form.notes.trim(),
+      created_by: currentUser?.id || null,
+      updated_at: new Date().toISOString(),
+    };
+
+    const { data, error } = await supabase
+      .from('meeting_notes')
+      .insert(payload)
+      .select('*')
+      .single();
+
+    setSaving(false);
+    if (error) {
+      setStatus(`Failed to save note: ${error.message}`);
+      return;
+    }
+
+    setNotes(prev => [data, ...prev]);
+    setForm(emptyForm());
+    setStatus('Meeting note added.');
+  };
+
+  const handleDelete = async (entry) => {
+    if (!window.confirm(`Delete meeting note "${entry.title}"?`)) return;
+    setDeletingId(entry.id);
+    const { error } = await supabase.from('meeting_notes').delete().eq('id', entry.id);
+    setDeletingId('');
+    if (error) {
+      setStatus(`Failed to delete note: ${error.message}`);
+      return;
+    }
+    setNotes(prev => prev.filter(note => note.id !== entry.id));
+    setStatus('Meeting note deleted.');
+  };
+
+  return (
+    <Layout>
+      <div className="page-header">
+        <div>
+          <div className="page-title">Meeting Notes</div>
+          <div className="page-subtitle">Internal team timeline for meeting recaps, decisions, and follow-ups.</div>
+        </div>
+      </div>
+
+      <div style={{ display: 'grid', gap: 18 }}>
+        <section className="card">
+          <div className="card-title">Add Note</div>
+          <form onSubmit={handleSubmit}>
+            <div className="grid-2">
+              <div className="form-group">
+                <label>Meeting Title</label>
+                <input type="text" value={form.title} onChange={(e) => setForm(prev => ({ ...prev, title: e.target.value }))} placeholder="Weekly team sync" />
+              </div>
+              <div className="form-group">
+                <label>Meeting Date</label>
+                <input type="datetime-local" value={form.meeting_at} onChange={(e) => setForm(prev => ({ ...prev, meeting_at: e.target.value }))} />
+              </div>
+            </div>
+            <div className="form-group">
+              <label>Attendees</label>
+              <input type="text" value={form.attendees} onChange={(e) => setForm(prev => ({ ...prev, attendees: e.target.value }))} placeholder="Team, client, subcontractor" />
+            </div>
+            <div className="form-group" style={{ marginBottom: 12 }}>
+              <label>Notes</label>
+              <textarea value={form.notes} onChange={(e) => setForm(prev => ({ ...prev, notes: e.target.value }))} placeholder="Key decisions, next steps, blockers, and follow-up items..." style={{ minHeight: 180 }} />
+            </div>
+            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, flexWrap: 'wrap' }}>
+              <div style={{ color: 'var(--text-muted)', fontSize: 12 }}>{status || 'Newest notes appear first in the timeline.'}</div>
+              <LoadingButton className="btn btn-primary" loading={saving} loadingText="Saving...">Save Note</LoadingButton>
+            </div>
+          </form>
+        </section>
+
+        <section className="card">
+          <div className="card-title">Timeline</div>
+          {loading ? (
+            <div style={{ color: 'var(--text-muted)' }}>Loading meeting notes...</div>
+          ) : notes.length === 0 ? (
+            <div className="empty-state" style={{ padding: '36px 12px' }}>
+              <h3>No meeting notes yet</h3>
+              <p>Add the first entry to start the internal timeline.</p>
+            </div>
+          ) : (
+            <div className="meeting-timeline">
+              {notes.map((entry) => (
+                <article key={entry.id} className="meeting-note-card">
+                  <div className="meeting-note-marker" aria-hidden="true" />
+                  <div className="meeting-note-content">
+                    <div className="meeting-note-header">
+                      <div>
+                        <div className="meeting-note-title">{entry.title}</div>
+                        <div className="meeting-note-meta">
+                          <span>{formatMeetingDate(entry.meeting_at)}</span>
+                          {entry.attendees ? <span>Attendees: {entry.attendees}</span> : null}
+                        </div>
+                      </div>
+                      <LoadingButton
+                        className="btn btn-danger btn-sm"
+                        loading={deletingId === entry.id}
+                        disabled={Boolean(deletingId)}
+                        loadingText="Deleting..."
+                        onClick={() => handleDelete(entry)}
+                      >
+                        Delete
+                      </LoadingButton>
+                    </div>
+                    <div className="meeting-note-body">{entry.notes}</div>
+                  </div>
+                </article>
+              ))}
+            </div>
+          )}
+        </section>
+      </div>
+    </Layout>
+  );
+}
diff --git a/src/pages/team/Projects.jsx b/src/pages/team/Projects.jsx
deleted file mode 100755
index 4814c29..0000000
--- a/src/pages/team/Projects.jsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import { Link } from 'react-router-dom';
-import Layout from '../../components/Layout';
-import StatusBadge from '../../components/StatusBadge';
-import { mockProjects, mockTasks } from '../../data/mockData';
-
-export default function Projects() {
-  return (
-    <Layout>
-      <div className="page-header">
-        <div>
-          <div className="page-title">Projects</div>
-          <div className="page-subtitle">All client engagements and their tasks.</div>
-        </div>
-      </div>
-
-      <div className="table-wrapper">
-        <table>
-          <thead>
-            <tr>
-              <th>Project</th>
-              <th>Client</th>
-              <th>Company</th>
-              <th>Jobs</th>
-              <th>Status</th>
-              <th>Created</th>
-            </tr>
-          </thead>
-          <tbody>
-            {mockProjects.map(project => {
-              const tasks = mockTasks.filter(t => t.projectId === project.id);
-              const activeTasks = tasks.filter(t => t.status !== 'approved');
-              return (
-                <tr key={project.id}>
-                  <td>
-                    <Link to={`/projects/${project.id}`} className="table-link">{project.name}</Link>
-                  </td>
-                  <td>
-                    {project.clientName}
-                    {!project.clientId && (
-                      <span className="badge badge-not_started" style={{ marginLeft: 6, fontSize: 10 }}>Guest</span>
-                    )}
-                  </td>
-                  <td style={{ color: 'var(--text-secondary)' }}>{project.company || '—'}</td>
-                  <td>
-                    <span style={{ fontWeight: 600 }}>{activeTasks.length}</span>
-                    <span style={{ color: 'var(--text-muted)', fontSize: 12 }}> / {tasks.length} active jobs</span>
-                  </td>
-                  <td><StatusBadge status={project.status} /></td>
-                  <td style={{ color: 'var(--text-secondary)' }}>{project.createdAt}</td>
-                </tr>
-              );
-            })}
-          </tbody>
-        </table>
-      </div>
-    </Layout>
-  );
-}
diff --git a/src/pages/team/Requests.jsx b/src/pages/team/Requests.jsx
index 6adb3ad..ee158a6 100755
--- a/src/pages/team/Requests.jsx
+++ b/src/pages/team/Requests.jsx
@@ -1,192 +1,704 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef } 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 { cleanupTaskStorage } from '../../lib/deleteHelpers';
+import { archiveCompletedJobsToLocalZip, restoreCompletedJobsArchive } from '../../lib/archiveHelpers';
+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 [submissions, setSubmissions] = useState([]);
-  const [tasks, setTasks] = useState([]);
-  const [projects, setProjects] = useState([]);
-  const [companies, setCompanies] = useState([]);
-  const [loading, setLoading] = useState(true);
+  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 [archivingSelected, setArchivingSelected] = useState(false);
+  const [archiveStatus, setArchiveStatus] = useState('');
+  const [restoringArchive, setRestoringArchive] = useState(false);
+  const [restoreStatus, setRestoreStatus] = useState('');
+  const [selectedTaskIds, setSelectedTaskIds] = useState([]);
+  const restoreInputRef = 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() {
-      const [{ data: subs }, { data: t }, { data: p }, { data: co }] = await Promise.all([
+    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)
+      );
+      setSelectedTaskIds(prev => prev.filter(id => (t || []).some(task => task.id === id && task.status === 'client_approved' && !(task.invoiced && closedTaskIds.has(task.id)))));
+    } catch (error) {
+      console.error('Requests load failed:', error);
+      setSubmissions([]);
+      setTasks([]);
+      setProjects([]);
+      setCompanies([]);
+      setInvoices([]);
+      setInvoiceItems([]);
+    } finally {
       setLoading(false);
     }
-    load();
-  }, []);
+  }
+
+  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);
+    }
+  };
+
+  const handleArchiveSelected = async () => {
+    if (!selectedTaskIds.length) {
+      alert('Select at least one completed job to archive.');
+      return;
+    }
+    if (!window.confirm(`Download an archive for ${selectedTaskIds.length} selected completed job${selectedTaskIds.length === 1 ? '' : 's'}?`)) return;
+
+    setArchivingSelected(true);
+    try {
+      const archive = await archiveCompletedJobsToLocalZip(selectedTaskIds, { onProgress: setArchiveStatus });
+      const shouldDelete = window.confirm(
+        `Archive downloaded as "${archive.filename}".\n\nRemove those completed jobs from Supabase now?`
+      );
+
+      if (shouldDelete) {
+        await cleanupTaskStorage(selectedTaskIds);
+        await supabase.from('tasks').delete().in('id', selectedTaskIds);
+        setSelectedTaskIds([]);
+        await load();
+        setArchiveStatus('');
+        alert(`Archived and removed ${archive.taskCount} completed job${archive.taskCount === 1 ? '' : 's'}.`);
+      }
+    } catch (error) {
+      alert(`Archive failed: ${error.message}`);
+    } finally {
+      setArchivingSelected(false);
+      setArchiveStatus('');
+    }
+  };
+
+  const handleRestoreArchive = async (e) => {
+    const file = e.target.files?.[0];
+    e.target.value = '';
+    if (!file) return;
+
+    setRestoringArchive(true);
+    try {
+      const result = await restoreCompletedJobsArchive(file, { onProgress: setRestoreStatus });
+      await load();
+      const notes = [];
+      if (result.clearedAssignments) notes.push(`${result.clearedAssignments} assignments cleared`);
+      if (result.clearedSubmissionUsers) notes.push(`${result.clearedSubmissionUsers} submission user links cleared`);
+      alert(
+        notes.length
+          ? `Restored ${result.taskCount} completed job${result.taskCount === 1 ? '' : 's'}.\n\nNote: ${notes.join('; ')}.`
+          : `Restored ${result.taskCount} completed job${result.taskCount === 1 ? '' : 's'}.`
+      );
+    } catch (error) {
+      alert(`Restore failed: ${error.message}`);
+    } finally {
+      setRestoringArchive(false);
+      setRestoreStatus('');
+    }
+  };
 
   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 completedTaskIds = latestTaskGroups
+    .filter(({ task }) => task.status === 'client_approved' && !isFullyClosedTask(task))
+    .map(({ task }) => task.id);
+
+  const allCompletedSelected = completedTaskIds.length > 0 && selectedTaskIds.length === completedTaskIds.length;
+  const toggleSelectedTask = (taskId) => {
+    setSelectedTaskIds(prev => prev.includes(taskId)
+      ? prev.filter(id => id !== taskId)
+      : [...prev, taskId]
+    );
+  };
+  const toggleSelectAllCompleted = () => {
+    setSelectedTaskIds(allCompletedSelected ? [] : completedTaskIds);
+  };
+
+  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 }, showCheckbox = false) => {
+    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' }}>
+        {showCheckbox && (
+          <td onClick={e => e.stopPropagation()}>
+            <input
+              type="checkbox"
+              checked={selectedTaskIds.includes(task.id)}
+              disabled={!isCompleted}
+              onChange={() => toggleSelectedTask(task.id)}
+              onClick={e => e.stopPropagation()}
+            />
+          </td>
+        )}
+        <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 Inbox</div>
-          <div className="page-subtitle">All incoming submissions — initial requests and revisions.</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>
+        <input
+          ref={restoreInputRef}
+          type="file"
+          accept=".zip,application/zip"
+          style={{ display: 'none' }}
+          onChange={handleRestoreArchive}
+        />
       </div>
 
-      {companies.length > 0 && (
-        <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', marginBottom: 10 }}>
-          <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>
-          ))}
+      {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>
       )}
-      {[...new Set(submissions.map(s => s.submitted_by_name).filter(Boolean))].sort().length > 0 && (
-        <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', marginBottom: 20 }}>
-          <button className={`btn btn-sm ${!filterUser ? 'btn-primary' : 'btn-outline'}`} onClick={() => setFilterUser('')}>All Users</button>
-          {[...new Set(submissions.map(s => s.submitted_by_name).filter(Boolean))].sort().map(name => (
+
+      <div className="card request-toolbar-card">
+        <div className="request-toolbar-section">
+          <div className="card-title" style={{ marginBottom: 10 }}>Archive</div>
+          <div className="request-toolbar-actions">
+            {completedTaskIds.length > 0 && (
+              <>
+                <label className="request-select-all-label">
+                  <input type="checkbox" checked={allCompletedSelected} onChange={toggleSelectAllCompleted} />
+                  Select All Completed
+                </label>
+                <button
+                  className="btn btn-outline btn-sm"
+                  onClick={handleArchiveSelected}
+                  disabled={archivingSelected || !selectedTaskIds.length}
+                >
+                  {archivingSelected ? 'Archiving...' : `Archive Selected (${selectedTaskIds.length})`}
+                </button>
+              </>
+            )}
             <button
-              key={name}
-              className={`btn btn-sm ${filterUser === name ? 'btn-primary' : 'btn-outline'}`}
-              onClick={() => setFilterUser(f => f === name ? '' : name)}
+              className="btn btn-outline btn-sm"
+              onClick={() => restoreInputRef.current?.click()}
+              disabled={restoringArchive}
             >
-              {name}
+              {restoringArchive ? 'Restoring...' : 'Restore Archive'}
             </button>
-          ))}
+          </div>
+          {archiveStatus && <div className="request-toolbar-status">{archiveStatus}</div>}
+          {restoreStatus && <div className="request-toolbar-status">{restoreStatus}</div>}
         </div>
-      )}
+
+        {(companies.length > 0 || requesterNames.length > 0) && (
+          <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>
-      ) : (() => {
-        // Group by task_id + version_number
-        const groupMap = {};
-        submissions.forEach(sub => {
-          const key = `${sub.task_id}-${sub.version_number}`;
-          if (!groupMap[key]) groupMap[key] = [];
-          groupMap[key].push(sub);
-        });
-
-        // Sort groups by latest submitted_at descending, then apply filters
-        const groups = Object.values(groupMap).filter(group => {
-          const primary = group.find(s => s.type !== 'amendment') || group[0];
-          const task = tasks.find(t => t.id === primary.task_id);
-          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 aMax = Math.max(...a.map(s => new Date(s.submitted_at)));
-          const bMax = Math.max(...b.map(s => new Date(s.submitted_at)));
-          return bMax - aMax;
-        });
-
-        // Group by company
-        const byCompany = {};
-        groups.forEach(group => {
-          const primary = group.find(s => s.type !== 'amendment') || group[0];
-          const task = tasks.find(t => t.id === primary.task_id);
-          const project = projects.find(p => p.id === task?.project_id);
-          const company = companies.find(co => co.id === project?.company_id);
-          const key = company?.id || '__none__';
-          if (!byCompany[key]) byCompany[key] = { company, groups: [] };
-          byCompany[key].groups.push(group);
-        });
-
-        const renderCard = (group) => {
-          const primary = group.find(s => s.type !== 'amendment') || group[0];
-          const amendments = group.filter(s => s.type === 'amendment');
-          const task = tasks.find(t => t.id === primary.task_id);
-          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';
-
-          return (
-            <div key={primary.id} className="request-card" style={{ cursor: task ? 'pointer' : 'default' }} onClick={() => task && navigate(`/tasks/${task.id}`)}>
-              <div className="request-card-header">
-                <div>
-                  <div className="request-card-title">
-                    {task?.title || primary.service_type}
-                    <StatusBadge status={primary.type} />
-                  </div>
-                  <div className="request-card-meta">
-                    From <strong>{primary.submitted_by_name}</strong>
-                    {company && (
-                      <> · <Link to={`/companies/${company.id}`} className="table-link" onClick={e => e.stopPropagation()}>{company.name}</Link></>
-                    )}
-                    {' · '}{new Date(primary.submitted_at).toLocaleDateString()}
-                  </div>
-                </div>
-                <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
-                  {isCompleted
-                    ? <span className="badge badge-client_approved">Completed</span>
-                    : <StatusBadge status={task?.status || 'not_started'} />
-                  }
-                </div>
-              </div>
-
-              <div style={{ display: 'flex', gap: 24, marginBottom: 12 }}>
-                <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 || 'Not specified'}</div>
-                </div>
-                <div>
-                  <span style={{ fontSize: 11, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.5px', color: 'var(--text-muted)' }}>Project</span>
-                  <div style={{ fontSize: 13, marginTop: 2 }}>
-                    {project ? <Link to={`/projects/${project.id}`} className="table-link" onClick={e => e.stopPropagation()}>{project.name}</Link> : '—'}
-                  </div>
-                </div>
-              </div>
-
-              <p style={{ fontSize: 13, color: 'var(--text-secondary)', lineHeight: 1.6, marginBottom: amendments.length > 0 ? 12 : 0 }}>{primary.description}</p>
-
-              {amendments.map(amendment => (
-                <div key={amendment.id} style={{ padding: '12px 14px', background: 'var(--bg)', borderRadius: 8, border: '1px solid var(--border)', marginTop: 8 }}>
-                  <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} · {new Date(amendment.submitted_at).toLocaleDateString()}
-                  </div>
-                  <p style={{ fontSize: 13, lineHeight: 1.6, color: 'var(--text-secondary)', whiteSpace: 'pre-wrap', margin: 0 }}>{amendment.description}</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: 12, display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, flexWrap: 'wrap' }}>
+            <div className="card-title" style={{ marginBottom: 0, display: 'flex', alignItems: 'center', gap: 10, 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, index) => (
+                <span key={tab.id} style={{ display: 'inline-flex', alignItems: 'center', gap: 10 }}>
+                  {index > 0 && <span style={{ color: 'var(--text-muted)' }}>|</span>}
+                  <button
+                    type="button"
+                    onClick={() => setActiveTab(tab.id)}
+                    style={{
+                      background: 'none',
+                      border: 'none',
+                      padding: 0,
+                      margin: 0,
+                      cursor: 'pointer',
+                      color: activeTab === tab.id ? 'var(--text-primary)' : 'var(--text-muted)',
+                      font: 'inherit',
+                      textTransform: 'inherit',
+                      letterSpacing: 'inherit',
+                    }}
+                  >
+                    {tab.label}
+                    <span className="request-company-count" style={{ marginLeft: 6 }}>{tab.count}</span>
+                  </button>
+                </span>
               ))}
             </div>
-          );
-        };
-
-        return Object.values(byCompany).map(({ company, groups: companyGroups }) => (
-          <div key={company?.id || '__none__'} style={{ marginBottom: 32 }}>
-            <div style={{ fontSize: 13, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.6px', color: 'var(--text-muted)', marginBottom: 10 }}>
-              {company
-                ? <Link to={`/companies/${company.id}`} style={{ color: 'var(--text-muted)', textDecoration: 'none' }}>{company.name}</Link>
-                : 'No Company'
-              }
-            </div>
-            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
-              {companyGroups.map(renderCard)}
-            </div>
           </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></th>
+                        <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, true))}
+                    </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
new file mode 100644
index 0000000..0a535a1
--- /dev/null
+++ b/src/pages/team/ServerStatus.jsx
@@ -0,0 +1,253 @@
+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/SignSurvey.jsx b/src/pages/team/SignSurvey.jsx
deleted file mode 100644
index 5f8e555..0000000
--- a/src/pages/team/SignSurvey.jsx
+++ /dev/null
@@ -1,802 +0,0 @@
-import { useState, useEffect, useRef } from 'react';
-import Layout from '../../components/Layout';
-import { supabase } from '../../lib/supabase';
-import { generateBrandBookEditorPDF } from '../../lib/signsurvey';
-
-const BUCKET = 'brand-books';
-
-const EMPTY_SIGN = () => ({
-  _key: Math.random().toString(36).slice(2),
-  signNumber: '',
-  type: '',
-  location: '',
-  width: '',
-  height: '',
-  material: '',
-  illumination: '',
-  condition: '',
-  mountType: '',
-  notes: '',
-  photo: null,
-  photoPath: '',
-  _photoPreview: '',
-});
-
-const EMPTY_BOOK_INFO = {
-  clientId: '',
-  clientName: '',
-  projectName: '',
-  siteAddress: '',
-  bookDate: new Date().toISOString().split('T')[0],
-  preparedBy: '',
-  revision: '01',
-};
-
-// ─── Helpers ──────────────────────────────────────────────────────────────────
-const getSignedUrl = async (path) => {
-  if (!path) return null;
-  const { data } = await supabase.storage.from(BUCKET).createSignedUrl(path, 86400 * 7);
-  return data?.signedUrl || null;
-};
-
-const uploadFile = async (file, path) => {
-  const { error } = await supabase.storage.from(BUCKET).upload(path, file, { upsert: true });
-  if (error) throw error;
-  return path;
-};
-
-// ─── Main Component ───────────────────────────────────────────────────────────
-export default function BrandBook() {
-  const [view, setView] = useState('list');
-  const [savedBooks, setSavedBooks] = useState([]);
-  const [loadingBooks, setLoadingBooks] = useState(true);
-  const [currentId, setCurrentId] = useState(null);
-
-  const [clients, setClients] = useState([]);
-  const [bookInfo, setBookInfo] = useState(EMPTY_BOOK_INFO);
-  const [siteMapFile, setSiteMapFile] = useState(null);
-  const [siteMapPath, setSiteMapPath] = useState('');
-  const [siteMapPreview, setSiteMapPreview] = useState(null);
-  const [signs, setSigns] = useState([EMPTY_SIGN()]);
-  const [photoItems, setPhotoItems] = useState([]);
-  const [expandedSign, setExpandedSign] = useState(0);
-
-  const [generating, setGenerating] = useState(false);
-  const [saving, setSaving] = useState(false);
-  const [notification, setNotification] = useState(null);
-
-  const siteMapRef = useRef();
-  const sitePhotosRef = useRef();
-
-  useEffect(() => {
-    supabase.from('companies').select('id, name').order('name').then(({ data }) => setClients(data || []));
-    fetchBooks();
-  }, []);
-
-  const fetchBooks = async () => {
-    setLoadingBooks(true);
-    const { data } = await supabase.from('brand_books').select('*').order('updated_at', { ascending: false });
-    setSavedBooks(data || []);
-    setLoadingBooks(false);
-  };
-
-  const set = (field) => (e) => setBookInfo(b => ({ ...b, [field]: e.target.value }));
-
-  const handleClientChange = (e) => {
-    const id = e.target.value;
-    const client = clients.find(c => c.id === id);
-    setBookInfo(b => ({ ...b, clientId: id, clientName: client ? client.name : '' }));
-  };
-
-  const resetForm = () => {
-    setBookInfo(EMPTY_BOOK_INFO);
-    setSiteMapFile(null);
-    setSiteMapPath('');
-    setSiteMapPreview(null);
-    setSigns([EMPTY_SIGN()]);
-    setPhotoItems([]);
-    setCurrentId(null);
-    setExpandedSign(0);
-    setNotification(null);
-  };
-
-  const handleNew = () => { resetForm(); setView('form'); };
-
-  const buildLoadedState = async (book) => {
-    const siteMapSignedUrl = await getSignedUrl(book.site_map_path);
-    const signsWithPreviews = await Promise.all((book.signs || []).map(async (sign) => {
-      const preview = await getSignedUrl(sign.photoPath);
-      return { ...sign, photo: null, _photoPreview: preview || '' };
-    }));
-    const surveyItems = await Promise.all((book.survey_photo_paths || []).map(async (path) => {
-      const preview = await getSignedUrl(path);
-      return { file: null, path, preview: preview || '' };
-    }));
-    return { siteMapSignedUrl, signsWithPreviews, surveyItems };
-  };
-
-  const handleLoad = async (book) => {
-    setNotification(null);
-    const { siteMapSignedUrl, signsWithPreviews, surveyItems } = await buildLoadedState(book);
-    setBookInfo({
-      clientId: book.client_id || '',
-      clientName: book.client_name || '',
-      projectName: book.project_name || '',
-      siteAddress: book.site_address || '',
-      bookDate: book.book_date || new Date().toISOString().split('T')[0],
-      preparedBy: book.prepared_by || '',
-      revision: book.revision || '01',
-    });
-    setSiteMapFile(null);
-    setSiteMapPath(book.site_map_path || '');
-    setSiteMapPreview(siteMapSignedUrl);
-    setSigns(signsWithPreviews.length > 0 ? signsWithPreviews : [EMPTY_SIGN()]);
-    setPhotoItems(surveyItems);
-    setCurrentId(book.id);
-    setExpandedSign(null);
-    setView('form');
-  };
-
-  const handleAddRevision = async (book) => {
-    setNotification(null);
-    const { siteMapSignedUrl, signsWithPreviews, surveyItems } = await buildLoadedState(book);
-    const nextRev = String((parseInt(book.revision || '1', 10) + 1)).padStart(2, '0');
-    setBookInfo({
-      clientId: book.client_id || '',
-      clientName: book.client_name || '',
-      projectName: book.project_name || '',
-      siteAddress: book.site_address || '',
-      bookDate: new Date().toISOString().split('T')[0],
-      preparedBy: book.prepared_by || '',
-      revision: nextRev,
-    });
-    setSiteMapFile(null);
-    setSiteMapPath(book.site_map_path || '');
-    setSiteMapPreview(siteMapSignedUrl);
-    setSigns(signsWithPreviews.length > 0 ? signsWithPreviews : [EMPTY_SIGN()]);
-    setPhotoItems(surveyItems);
-    setCurrentId(null); // new entry on save
-    setExpandedSign(null);
-    setView('form');
-  };
-
-  const handleDelete = async (id) => {
-    if (!window.confirm('Delete this brand book? This cannot be undone.')) return;
-    await supabase.from('brand_books').delete().eq('id', id);
-    fetchBooks();
-  };
-
-  const handleSave = async () => {
-    if (!bookInfo.clientName.trim()) {
-      setNotification({ type: 'error', msg: 'Please select a client.' });
-      return;
-    }
-    setSaving(true);
-    setNotification(null);
-    try {
-      const bookId = currentId || crypto.randomUUID();
-
-      // Upload site map if new file
-      let finalSiteMapPath = siteMapPath;
-      if (siteMapFile) {
-        const ext = siteMapFile.name.split('.').pop().toLowerCase();
-        finalSiteMapPath = `${bookId}/site-map.${ext}`;
-        await uploadFile(siteMapFile, finalSiteMapPath);
-      }
-
-      // Upload sign photos if new file
-      const finalSigns = await Promise.all(signs.map(async (sign) => {
-        let photoPath = sign.photoPath || '';
-        if (sign.photo) {
-          const ext = sign.photo.name.split('.').pop().toLowerCase();
-          photoPath = `${bookId}/sign-${sign._key}.${ext}`;
-          await uploadFile(sign.photo, photoPath);
-        }
-        const { photo, _photoPreview, ...rest } = sign;
-        return { ...rest, photoPath };
-      }));
-
-      // Upload survey photos if new file
-      const finalSurveyPaths = await Promise.all(photoItems.map(async (item, i) => {
-        if (item.file) {
-          const ext = item.file.name.split('.').pop().toLowerCase();
-          const path = `${bookId}/survey-${i}-${Date.now()}.${ext}`;
-          await uploadFile(item.file, path);
-          return path;
-        }
-        return item.path;
-      }));
-
-      const dbData = {
-        id: bookId,
-        client_id: bookInfo.clientId || null,
-        client_name: bookInfo.clientName,
-        project_name: bookInfo.projectName,
-        site_address: bookInfo.siteAddress,
-        book_date: bookInfo.bookDate || null,
-        prepared_by: bookInfo.preparedBy,
-        revision: bookInfo.revision,
-        site_map_path: finalSiteMapPath,
-        signs: finalSigns,
-        survey_photo_paths: finalSurveyPaths.filter(Boolean),
-        updated_at: new Date().toISOString(),
-      };
-
-      await supabase.from('brand_books').upsert(dbData);
-      setCurrentId(bookId);
-      setSiteMapPath(finalSiteMapPath);
-      setSiteMapFile(null);
-      setSigns(finalSigns.map(s => ({ ...s, photo: null })));
-      setPhotoItems(finalSurveyPaths.filter(Boolean).map((path, i) => ({
-        file: null,
-        path,
-        preview: photoItems[i]?.preview || '',
-      })));
-      await fetchBooks();
-      setNotification({ type: 'success', msg: '✓ Brand book saved!' });
-    } catch (err) {
-      setNotification({ type: 'error', msg: `Save failed: ${err.message}` });
-    }
-    setSaving(false);
-  };
-
-  const handleGenerate = async () => {
-    if (!bookInfo.clientName.trim()) {
-      setNotification({ type: 'error', msg: 'Please select a client.' });
-      return;
-    }
-    setGenerating(true);
-    setNotification(null);
-    try {
-      const siteMapSource = siteMapFile || (siteMapPath ? await getSignedUrl(siteMapPath) : null);
-      const signsWithSource = await Promise.all(signs.map(async s => ({
-        ...s,
-        photoSource: s.photo || (s.photoPath ? await getSignedUrl(s.photoPath) : null),
-      })));
-      const sitePhotoSources = await Promise.all(photoItems.map(async item =>
-        item.file || (item.path ? await getSignedUrl(item.path) : null)
-      ));
-
-      await generateBrandBookEditorPDF({
-        clientName: bookInfo.clientName,
-        projectName: bookInfo.projectName,
-        siteAddress: bookInfo.siteAddress,
-        bookDate: bookInfo.bookDate,
-        preparedBy: bookInfo.preparedBy,
-        revision: bookInfo.revision,
-        siteMapSource,
-        signs: signsWithSource,
-        sitePhotoSources,
-      });
-      setNotification({ type: 'success', msg: '✓ Brand book PDF downloaded!' });
-    } catch (err) {
-      setNotification({ type: 'error', msg: `Failed to generate PDF: ${err.message}` });
-    }
-    setGenerating(false);
-  };
-
-  // ── Sign helpers ─────────────────────────────────────────────────────────────
-  const updateSign = (key, field, value) =>
-    setSigns(prev => prev.map(s => s._key === key ? { ...s, [field]: value } : s));
-  const addSign = () => { setSigns(prev => [...prev, EMPTY_SIGN()]); setExpandedSign(signs.length); };
-  const removeSign = (key) => setSigns(prev => prev.filter(s => s._key !== key));
-  const handleSignPhoto = (key, file) => {
-    updateSign(key, 'photo', file);
-    updateSign(key, '_photoPreview', URL.createObjectURL(file));
-    updateSign(key, 'photoPath', ''); // clear old path when new file selected
-  };
-
-  // ── Site map helpers ──────────────────────────────────────────────────────────
-  const handleSiteMapFile = (file) => {
-    setSiteMapFile(file);
-    setSiteMapPath('');
-    setSiteMapPreview(URL.createObjectURL(file));
-  };
-
-  // ── Survey photo helpers ──────────────────────────────────────────────────────
-  const handleSitePhotos = (files) => {
-    const newItems = Array.from(files)
-      .filter(f => f.type.startsWith('image/'))
-      .map(file => ({ file, path: '', preview: URL.createObjectURL(file) }));
-    setPhotoItems(prev => [...prev, ...newItems]);
-  };
-  const removeSitePhoto = (i) => setPhotoItems(prev => prev.filter((_, idx) => idx !== i));
-
-  // ── Unsaved changes indicator ─────────────────────────────────────────────────
-  const hasUnsavedPhotos = siteMapFile || signs.some(s => s.photo) || photoItems.some(i => i.file);
-
-  // ═══════════════════════════════════════════════════════════════════════════════
-  // LIST VIEW
-  // ═══════════════════════════════════════════════════════════════════════════════
-  if (view === 'list') {
-    return (
-      <Layout>
-        <div className="page-header">
-          <div>
-            <div className="page-title">
-              Brand Book
-              <span style={{ fontSize: 13, fontWeight: 500, color: 'var(--accent)', marginLeft: 8, padding: '2px 8px', border: '1px solid var(--accent)', borderRadius: 4 }}>beta</span>
-            </div>
-            <div className="page-subtitle">Saved brand books — click to edit or add a revision.</div>
-          </div>
-          <button className="btn btn-primary btn-sm" onClick={handleNew}>+ New Brand Book</button>
-        </div>
-
-        {loadingBooks ? (
-          <p style={{ padding: '24px 0', color: 'var(--text-muted)' }}>Loading...</p>
-        ) : savedBooks.length === 0 ? (
-          <div className="empty-state">
-            <h3>No brand books yet</h3>
-            <p>Create your first brand book to get started.</p>
-            <button className="btn btn-primary" onClick={handleNew} style={{ marginTop: 16 }}>+ New Brand Book</button>
-          </div>
-        ) : (
-          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
-            {savedBooks.map(book => (
-              <BookListItem
-                key={book.id}
-                book={book}
-                onEdit={() => handleLoad(book)}
-                onRevision={() => handleAddRevision(book)}
-                onDelete={() => handleDelete(book.id)}
-              />
-            ))}
-          </div>
-        )}
-      </Layout>
-    );
-  }
-
-  // ═══════════════════════════════════════════════════════════════════════════════
-  // FORM VIEW
-  // ═══════════════════════════════════════════════════════════════════════════════
-  return (
-    <Layout>
-      <div className="page-header">
-        <div>
-          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
-            <button
-              className="btn btn-outline btn-sm"
-              onClick={() => setView('list')}
-              style={{ fontSize: 12 }}
-            >← All Brand Books</button>
-            <div className="page-title" style={{ margin: 0 }}>
-              {currentId
-                ? `${bookInfo.clientName || 'Brand Book'} — ${bookInfo.projectName || ''} R${String(bookInfo.revision).padStart(2, '0')}`
-                : 'New Brand Book'}
-            </div>
-          </div>
-          <div className="page-subtitle" style={{ marginTop: 4 }}>
-            {currentId ? 'Editing saved brand book' : 'Unsaved — fill in details and save'}
-            {hasUnsavedPhotos && <span style={{ color: 'var(--accent)', marginLeft: 8 }}>· Unsaved photos</span>}
-          </div>
-        </div>
-        <div style={{ display: 'flex', gap: 8 }}>
-          <button className="btn btn-outline btn-sm" onClick={() => { if (window.confirm('Discard changes?')) { resetForm(); setView('list'); } }}>Discard</button>
-          <button className="btn btn-outline btn-sm" onClick={handleSave} disabled={saving}>
-            {saving ? 'Saving...' : '💾 Save'}
-          </button>
-          <button className="btn btn-primary btn-sm" onClick={handleGenerate} disabled={generating}>
-            {generating ? 'Generating...' : '⬇ Generate PDF'}
-          </button>
-        </div>
-      </div>
-
-      {notification && (
-        <div className={`notification ${notification.type === 'error' ? 'notification-error' : 'notification-success'}`} style={{ marginBottom: 24 }}>
-          {notification.msg}
-        </div>
-      )}
-
-      <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
-
-        {/* ── BRAND BOOK INFO ──────────────────────────────────────────────── */}
-        <div className="card">
-          <div className="card-title">Brand Book Info</div>
-          <div className="grid-2">
-            <div className="form-group">
-              <label>Client *</label>
-              <select value={bookInfo.clientId} onChange={handleClientChange}>
-                <option value="">— Select client —</option>
-                {clients.map(c => <option key={c.id} value={c.id}>{c.name}</option>)}
-              </select>
-            </div>
-            <div className="form-group">
-              <label>Project Name</label>
-              <input type="text" placeholder="e.g. Bolchoz Sign Solutions 2025" value={bookInfo.projectName} onChange={set('projectName')} />
-            </div>
-          </div>
-          <div className="grid-2">
-            <div className="form-group">
-              <label>Site Address</label>
-              <input type="text" placeholder="e.g. 123 Main St, City, State" value={bookInfo.siteAddress} onChange={set('siteAddress')} />
-            </div>
-            <div className="form-group">
-              <label>Date</label>
-              <input type="date" value={bookInfo.bookDate} onChange={set('bookDate')} />
-            </div>
-          </div>
-          <div className="grid-2">
-            <div className="form-group">
-              <label>Prepared By</label>
-              <input type="text" placeholder="e.g. John Smith" value={bookInfo.preparedBy} onChange={set('preparedBy')} />
-            </div>
-            <div className="form-group">
-              <label>Revision #</label>
-              <input
-                type="number"
-                min="1"
-                max="99"
-                value={parseInt(bookInfo.revision, 10) || 1}
-                onChange={e => setBookInfo(b => ({ ...b, revision: String(e.target.value).padStart(2, '0') }))}
-                style={{ width: 100 }}
-              />
-            </div>
-          </div>
-        </div>
-
-        {/* ── SITE MAP ──────────────────────────────────────────────────────── */}
-        <div className="card">
-          <div className="card-title">Site Map</div>
-          <div className="form-group">
-            <label>Upload Site Map Image <span style={{ fontWeight: 400, color: 'var(--text-muted)' }}>(optional — shown on page 2 beside the sign inventory)</span></label>
-            <SiteMapDropZone
-              preview={siteMapPreview}
-              onFile={handleSiteMapFile}
-              onClear={() => { setSiteMapFile(null); setSiteMapPath(''); setSiteMapPreview(null); }}
-              inputRef={siteMapRef}
-            />
-          </div>
-        </div>
-
-        {/* ── SIGNS ─────────────────────────────────────────────────────────── */}
-        <div className="card">
-          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16 }}>
-            <div className="card-title" style={{ margin: 0 }}>Signs</div>
-            <button className="btn btn-outline btn-sm" onClick={addSign}>+ Add Sign</button>
-          </div>
-          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
-            {signs.map((sign, i) => (
-              <SignCard
-                key={sign._key}
-                sign={sign}
-                index={i}
-                expanded={expandedSign === i}
-                onToggle={() => setExpandedSign(expandedSign === i ? null : i)}
-                onChange={(field, val) => updateSign(sign._key, field, val)}
-                onPhotoChange={(file) => handleSignPhoto(sign._key, file)}
-                onRemove={() => removeSign(sign._key)}
-                canRemove={signs.length > 1}
-              />
-            ))}
-          </div>
-          <button className="btn btn-outline btn-sm" onClick={addSign} style={{ marginTop: 12 }}>+ Add Sign</button>
-        </div>
-
-        {/* ── SITE PHOTOS ───────────────────────────────────────────────────── */}
-        <div className="card">
-          <div className="card-title">Site Photos</div>
-          <div className="form-group">
-            <label>General site photos <span style={{ fontWeight: 400, color: 'var(--text-muted)' }}>(displayed as thumbnails on the last page — up to 12 shown)</span></label>
-            <SitePhotosDropZone
-              photoItems={photoItems}
-              onFiles={handleSitePhotos}
-              onRemove={removeSitePhoto}
-              inputRef={sitePhotosRef}
-            />
-          </div>
-        </div>
-
-      </div>
-
-      {/* Bottom actions */}
-      <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 8, marginTop: 24, paddingBottom: 40 }}>
-        <button className="btn btn-outline" onClick={handleSave} disabled={saving}>
-          {saving ? 'Saving...' : '💾 Save Brand Book'}
-        </button>
-        <button className="btn btn-primary btn-lg" onClick={handleGenerate} disabled={generating}>
-          {generating ? 'Generating...' : '⬇ Generate Brand Book PDF'}
-        </button>
-      </div>
-    </Layout>
-  );
-}
-
-// ─── Book List Item ───────────────────────────────────────────────────────────
-function BookListItem({ book, onEdit, onRevision, onDelete }) {
-  const signCount = Array.isArray(book.signs) ? book.signs.length : 0;
-  const date = book.book_date
-    ? new Date(book.book_date + 'T12:00:00').toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })
-    : null;
-  const updated = book.updated_at
-    ? new Date(book.updated_at).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })
-    : null;
-
-  return (
-    <div style={{
-      padding: '12px 16px',
-      border: '1px solid var(--border)',
-      borderRadius: 8,
-      background: 'var(--card-bg)',
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'space-between',
-      gap: 16,
-    }}>
-      <div style={{ flex: 1, minWidth: 0 }}>
-        <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
-          <span style={{ fontWeight: 700, fontSize: 14, color: 'var(--text-primary)' }}>{book.client_name}</span>
-          {book.project_name && (
-            <span style={{ fontSize: 13, color: 'var(--text-secondary)' }}>— {book.project_name}</span>
-          )}
-          <span style={{
-            fontSize: 11, fontWeight: 700, padding: '1px 7px',
-            background: 'var(--accent)', color: '#1a1a1a', borderRadius: 4,
-          }}>R{String(book.revision || '01').padStart(2, '0')}</span>
-        </div>
-        <div style={{ fontSize: 12, color: 'var(--text-muted)', marginTop: 3, display: 'flex', gap: 12, flexWrap: 'wrap' }}>
-          {book.site_address && <span>📍 {book.site_address}</span>}
-          {signCount > 0 && <span>🪧 {signCount} sign{signCount !== 1 ? 's' : ''}</span>}
-          {date && <span>📅 {date}</span>}
-          {updated && <span style={{ color: 'var(--text-muted)', opacity: 0.7 }}>Saved {updated}</span>}
-        </div>
-      </div>
-      <div style={{ display: 'flex', gap: 6, flexShrink: 0 }}>
-        <button className="btn btn-outline btn-sm" onClick={onEdit}>Edit</button>
-        <button
-          className="btn btn-outline btn-sm"
-          onClick={onRevision}
-          title="Create a new revision based on this one"
-          style={{ color: 'var(--accent)', borderColor: 'var(--accent)' }}
-        >+ Revision</button>
-        <button
-          type="button"
-          onClick={onDelete}
-          style={{ background: 'none', border: 'none', color: 'var(--danger, #dc2626)', cursor: 'pointer', fontSize: 16, padding: '0 4px' }}
-        >✕</button>
-      </div>
-    </div>
-  );
-}
-
-// ─── Sign Card ────────────────────────────────────────────────────────────────
-function SignCard({ sign, index, expanded, onToggle, onChange, onPhotoChange, onRemove, canRemove }) {
-  const photoInputRef = useRef();
-  const dragCounter = useRef(0);
-  const [dragging, setDragging] = useState(false);
-
-  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 file = e.dataTransfer.files[0];
-    if (file && file.type.startsWith('image/')) onPhotoChange(file);
-  };
-
-  const summary = [sign.type, sign.location].filter(Boolean).join(' — ') || 'New Sign';
-  const hasPhoto = sign._photoPreview;
-
-  return (
-    <div style={{ border: '1px solid var(--border)', borderRadius: 8, overflow: 'hidden' }}>
-      <button
-        type="button"
-        onClick={onToggle}
-        style={{
-          width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between',
-          padding: '10px 14px', background: 'var(--card-bg-2)', border: 'none', cursor: 'pointer',
-          fontFamily: 'inherit', borderBottom: expanded ? '1px solid var(--border)' : 'none',
-        }}
-      >
-        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
-          <span style={{ fontSize: 10, fontWeight: 700, padding: '2px 8px', background: 'var(--accent)', color: '#1a1a1a', borderRadius: 4 }}>
-            #{sign.signNumber || (index + 1)}
-          </span>
-          <span style={{ fontSize: 13, fontWeight: 600, color: 'var(--text-primary)' }}>{summary}</span>
-        </div>
-        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
-          {hasPhoto && <span style={{ fontSize: 11, color: 'var(--text-muted)' }}>📷</span>}
-          {sign.photo && <span style={{ fontSize: 11, color: 'var(--accent)' }}>unsaved photo</span>}
-          {canRemove && (
-            <span role="button" onClick={e => { e.stopPropagation(); onRemove(); }}
-              style={{ fontSize: 13, color: 'var(--danger, #dc2626)', padding: '2px 6px', cursor: 'pointer' }}>✕</span>
-          )}
-          <span style={{ fontSize: 11, color: 'var(--text-muted)' }}>{expanded ? '▲' : '▼'}</span>
-        </div>
-      </button>
-
-      {expanded && (
-        <div style={{ padding: 16 }}>
-          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, marginBottom: 12 }}>
-            <div className="form-group" style={{ margin: 0 }}>
-              <label>Sign # / ID</label>
-              <input type="text" placeholder={`e.g. ${index + 1}`} value={sign.signNumber} onChange={e => onChange('signNumber', e.target.value)} />
-            </div>
-            <div className="form-group" style={{ margin: 0 }}>
-              <label>Sign Type</label>
-              <input type="text" placeholder="e.g. Monument, Channel Letter, Pylon…" value={sign.type} onChange={e => onChange('type', e.target.value)} />
-            </div>
-            <div className="form-group" style={{ margin: 0 }}>
-              <label>Location</label>
-              <input type="text" placeholder="e.g. Main entrance, North parking lot" value={sign.location} onChange={e => onChange('location', e.target.value)} />
-            </div>
-            <div className="form-group" style={{ margin: 0 }}>
-              <label>Dimensions (inches)</label>
-              <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
-                <input type="text" placeholder='Width"' value={sign.width} onChange={e => onChange('width', e.target.value)} style={{ flex: 1 }} />
-                <span style={{ color: 'var(--text-muted)', fontSize: 12 }}>×</span>
-                <input type="text" placeholder='Height"' value={sign.height} onChange={e => onChange('height', e.target.value)} style={{ flex: 1 }} />
-              </div>
-            </div>
-          </div>
-          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 12, marginBottom: 12 }}>
-            <div className="form-group" style={{ margin: 0 }}>
-              <label>Material <span style={{ fontWeight: 400, color: 'var(--text-muted)' }}>placeholder</span></label>
-              <input type="text" placeholder="e.g. Aluminum, Acrylic" value={sign.material} onChange={e => onChange('material', e.target.value)} />
-            </div>
-            <div className="form-group" style={{ margin: 0 }}>
-              <label>Illumination <span style={{ fontWeight: 400, color: 'var(--text-muted)' }}>placeholder</span></label>
-              <input type="text" placeholder="e.g. LED, None, Neon" value={sign.illumination} onChange={e => onChange('illumination', e.target.value)} />
-            </div>
-            <div className="form-group" style={{ margin: 0 }}>
-              <label>Condition <span style={{ fontWeight: 400, color: 'var(--text-muted)' }}>placeholder</span></label>
-              <input type="text" placeholder="e.g. Good, Fair, Poor" value={sign.condition} onChange={e => onChange('condition', e.target.value)} />
-            </div>
-          </div>
-          <div style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 12, marginBottom: 12 }}>
-            <div className="form-group" style={{ margin: 0 }}>
-              <label>Mount Type <span style={{ fontWeight: 400, color: 'var(--text-muted)' }}>placeholder</span></label>
-              <input type="text" placeholder="e.g. Wall, Post, Ground" value={sign.mountType} onChange={e => onChange('mountType', e.target.value)} />
-            </div>
-            <div className="form-group" style={{ margin: 0 }}>
-              <label>Notes</label>
-              <input type="text" placeholder="Any additional observations…" value={sign.notes} onChange={e => onChange('notes', e.target.value)} />
-            </div>
-          </div>
-          <div className="form-group" style={{ margin: 0 }}>
-            <label>Sign Photo</label>
-            <div
-              onDragEnter={handleDragEnter} onDragLeave={handleDragLeave}
-              onDragOver={handleDragOver} onDrop={handleDrop}
-              onClick={() => photoInputRef.current?.click()}
-              style={{
-                border: `2px dashed ${dragging ? 'var(--accent)' : 'var(--border)'}`,
-                borderRadius: 8,
-                background: dragging ? 'rgba(245,165,35,0.05)' : 'var(--input-bg, var(--card-bg))',
-                padding: 12, cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 12,
-                transition: 'border-color 0.15s, background 0.15s', minHeight: 60,
-              }}
-            >
-              {sign._photoPreview ? (
-                <>
-                  <img src={sign._photoPreview} alt="sign" style={{ height: 60, width: 80, objectFit: 'cover', borderRadius: 4, flexShrink: 0 }} />
-                  <div>
-                    <div style={{ fontSize: 13, fontWeight: 500, color: 'var(--text-primary)' }}>
-                      {sign.photo ? sign.photo.name : 'Saved photo'}
-                    </div>
-                    <div style={{ fontSize: 11, color: 'var(--text-muted)', marginTop: 2 }}>Click to replace · drag a new photo</div>
-                  </div>
-                </>
-              ) : (
-                <div style={{ color: dragging ? 'var(--accent)' : 'var(--text-muted)', fontSize: 13 }}>
-                  {dragging ? '📂 Drop photo here' : '📷 Click to upload or drag & drop a photo'}
-                </div>
-              )}
-            </div>
-            <input ref={photoInputRef} type="file" accept="image/*" style={{ display: 'none' }}
-              onChange={e => { const f = e.target.files[0]; if (f) onPhotoChange(f); e.target.value = ''; }} />
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}
-
-// ─── Site Map Drop Zone ───────────────────────────────────────────────────────
-function SiteMapDropZone({ preview, onFile, onClear, inputRef }) {
-  const dragCounter = useRef(0);
-  const [dragging, setDragging] = useState(false);
-  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 file = e.dataTransfer.files[0];
-    if (file && file.type.startsWith('image/')) onFile(file);
-  };
-
-  if (preview) {
-    return (
-      <div style={{ display: 'flex', alignItems: 'flex-start', gap: 16 }}>
-        <img src={preview} alt="site map" style={{ maxHeight: 160, maxWidth: 280, borderRadius: 6, border: '1px solid var(--border)', objectFit: 'contain' }} />
-        <div>
-          <button className="btn btn-outline btn-sm" onClick={onClear}>Remove</button>
-          <div style={{ fontSize: 11, color: 'var(--text-muted)', marginTop: 8 }}>Click to replace</div>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <>
-      <div
-        onDragEnter={handleDragEnter} onDragLeave={handleDragLeave}
-        onDragOver={handleDragOver} onDrop={handleDrop}
-        onClick={() => inputRef.current?.click()}
-        style={{
-          border: `2px dashed ${dragging ? 'var(--accent)' : 'var(--border)'}`,
-          borderRadius: 8,
-          background: dragging ? 'rgba(245,165,35,0.05)' : 'var(--input-bg, var(--card-bg))',
-          padding: '24px 16px', textAlign: 'center', cursor: 'pointer',
-          color: dragging ? 'var(--accent)' : 'var(--text-muted)', fontSize: 13, transition: 'all 0.15s',
-        }}
-      >
-        {dragging ? '📂 Drop site map here' : '🗺 Click to upload or drag & drop a site map image'}
-      </div>
-      <input ref={inputRef} type="file" accept="image/*" style={{ display: 'none' }}
-        onChange={e => { const f = e.target.files[0]; if (f) onFile(f); e.target.value = ''; }} />
-    </>
-  );
-}
-
-// ─── Survey Photos Drop Zone ──────────────────────────────────────────────────
-function SitePhotosDropZone({ photoItems, onFiles, onRemove, inputRef }) {
-  const dragCounter = useRef(0);
-  const [dragging, setDragging] = useState(false);
-  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); onFiles(e.dataTransfer.files); };
-
-  return (
-    <div>
-      <div
-        onDragEnter={handleDragEnter} onDragLeave={handleDragLeave}
-        onDragOver={handleDragOver} onDrop={handleDrop}
-        onClick={() => inputRef.current?.click()}
-        style={{
-          border: `2px dashed ${dragging ? 'var(--accent)' : 'var(--border)'}`,
-          borderRadius: 8,
-          background: dragging ? 'rgba(245,165,35,0.05)' : 'var(--input-bg, var(--card-bg))',
-          padding: '20px 16px', textAlign: 'center', cursor: 'pointer',
-          color: dragging ? 'var(--accent)' : 'var(--text-muted)', fontSize: 13,
-          marginBottom: photoItems.length > 0 ? 12 : 0, transition: 'all 0.15s',
-        }}
-      >
-        {dragging ? '📂 Drop photos here' : '📷 Click to upload or drag & drop photos (select multiple)'}
-      </div>
-      <input ref={inputRef} type="file" accept="image/*" multiple style={{ display: 'none' }}
-        onChange={e => { if (e.target.files.length) { onFiles(e.target.files); e.target.value = ''; } }} />
-      {photoItems.length > 0 && (
-        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
-          {photoItems.map((item, i) => (
-            <div key={i} style={{ position: 'relative' }}>
-              <img
-                src={item.preview}
-                alt={item.file?.name || `photo ${i + 1}`}
-                style={{ width: 80, height: 60, objectFit: 'cover', borderRadius: 4, border: '1px solid var(--border)', display: 'block' }}
-              />
-              {item.file && (
-                <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, background: 'rgba(245,165,35,0.8)', fontSize: 8, textAlign: 'center', borderRadius: '0 0 4px 4px', padding: '1px 2px', color: '#1a1a1a', fontWeight: 700 }}>NEW</div>
-              )}
-              <button
-                type="button"
-                onClick={() => onRemove(i)}
-                style={{
-                  position: 'absolute', top: -6, right: -6,
-                  background: '#dc2626', border: 'none', borderRadius: '50%',
-                  width: 18, height: 18, fontSize: 10, color: '#fff',
-                  cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', lineHeight: 1,
-                }}
-              >✕</button>
-            </div>
-          ))}
-          <div style={{ fontSize: 11, color: 'var(--text-muted)', alignSelf: 'flex-end', marginLeft: 4 }}>
-            {photoItems.length} photo{photoItems.length !== 1 ? 's' : ''}
-            {photoItems.length > 12 && <span style={{ color: 'var(--accent)' }}> (first 12 shown in PDF)</span>}
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}
diff --git a/src/pages/team/SubcontractorPODetail.jsx b/src/pages/team/SubcontractorPODetail.jsx
new file mode 100644
index 0000000..d8294f9
--- /dev/null
+++ b/src/pages/team/SubcontractorPODetail.jsx
@@ -0,0 +1,247 @@
+import { useEffect, useState } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import Layout from '../../components/Layout';
+import LoadingButton from '../../components/LoadingButton';
+import { supabase } from '../../lib/supabase';
+import { sendEmail } from '../../lib/email';
+import { generateSubcontractorPOPDF } from '../../lib/invoice';
+
+const poStatusColor = {
+  draft: 'not_started',
+  sent: 'in_progress',
+  approved: 'client_approved',
+  ready_to_pay: 'in_progress',
+  paid: 'client_approved',
+  cancelled: 'needs_revision',
+};
+
+const poStatusLabel = {
+  draft: 'Draft',
+  sent: 'Sent',
+  approved: 'Approved',
+  ready_to_pay: 'Ready to Pay',
+  paid: 'Paid',
+  cancelled: 'Cancelled',
+};
+
+const poSelect = '*, profile:profiles!subcontractor_payments_profile_id_fkey(id, name, email), project:projects(id, name, company:companies(name)), items:subcontractor_po_items(*, task:tasks(id, title))';
+
+export default function SubcontractorPODetail() {
+  const { id } = useParams();
+  const navigate = useNavigate();
+  const [po, setPO] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [generating, setGenerating] = useState(false);
+
+  useEffect(() => {
+    async function load() {
+      try {
+        const { data } = await supabase
+          .from('subcontractor_payments')
+          .select(poSelect)
+          .eq('id', id)
+          .single();
+        setPO(data || null);
+      } catch (error) {
+        console.error('Subcontractor PO load failed:', error);
+      } finally {
+        setLoading(false);
+      }
+    }
+    load();
+  }, [id]);
+
+  const updatePO = async (updates, errorLabel = 'Failed to update PO') => {
+    setSaving(true);
+    const { data, error } = await supabase
+      .from('subcontractor_payments')
+      .update(updates)
+      .eq('id', id)
+      .select(poSelect)
+      .single();
+    setSaving(false);
+    if (error) {
+      alert(`${errorLabel}: ${error.message}`);
+      return null;
+    }
+    setPO(data);
+    return data;
+  };
+
+  const sendPOEmail = async (sentPO) => {
+    if (!sentPO?.profile?.email) {
+      alert('This subcontractor has no email on file.');
+      return;
+    }
+    await sendEmail('subcontractor_po_sent', sentPO.profile.email, {
+      poNumber: sentPO.po_number || 'Purchase Order',
+      subcontractorName: sentPO.profile?.name || 'there',
+      projectName: sentPO.project?.name || 'Subcontractor Work',
+      companyName: sentPO.project?.company?.name || 'Fourge Branding',
+      amount: `$${Number(sentPO.amount).toFixed(2)}`,
+      dueDate: sentPO.due_date ? new Date(sentPO.due_date).toLocaleDateString() : 'Not set',
+      terms: sentPO.terms || 'Net 15',
+      scope: sentPO.items?.length
+        ? sentPO.items.map(item => `${item.description} - $${Number(item.amount).toFixed(2)}`).join('\n')
+        : sentPO.description,
+      portalUrl: 'https://portal.fourgebranding.com/my-purchase-orders',
+    });
+  };
+
+  const handleFinalizeSend = async () => {
+    if (!window.confirm(`Finalize and send ${po.po_number || 'this PO'} to ${po.profile?.email || 'the subcontractor'}?`)) return;
+    const sentPO = await updatePO({ status: 'sent', sent_at: new Date().toISOString() }, 'Failed to finalize PO');
+    if (!sentPO) return;
+    try {
+      await sendPOEmail(sentPO);
+      alert('PO email sent successfully.');
+    } catch (error) {
+      alert(`PO was finalized, but the email failed: ${error.message || 'unknown error'}`);
+    }
+  };
+
+  const handleResend = async () => {
+    if (!window.confirm(`Resend ${po.po_number || 'this PO'} to ${po.profile?.email || 'the subcontractor'}?`)) return;
+    setSaving(true);
+    try {
+      await sendPOEmail(po);
+      alert('PO email sent successfully.');
+    } catch (error) {
+      alert(`Failed to send PO: ${error.message || 'unknown error'}`);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleReadyToPay = () => updatePO({ status: 'ready_to_pay' }, 'Failed to mark ready to pay');
+  const handleMarkPaid = () => updatePO({ status: 'paid', paid_at: new Date().toISOString().slice(0, 10) }, 'Failed to mark paid');
+  const handleReopen = () => updatePO({ status: 'draft', paid_at: null, cancelled_at: null }, 'Failed to reopen PO');
+
+  const handleCancel = async () => {
+    if (!window.confirm(`Cancel ${po.po_number || 'this PO'}?`)) return;
+    await updatePO({ status: 'cancelled', cancelled_at: new Date().toISOString() }, 'Failed to cancel PO');
+  };
+
+  const handleDelete = async () => {
+    if (!window.confirm(`Delete ${po.po_number || 'this PO'}? This cannot be undone.`)) return;
+    setSaving(true);
+    const { error } = await supabase.from('subcontractor_payments').delete().eq('id', id);
+    if (error) {
+      alert(`Failed to delete PO: ${error.message}`);
+      setSaving(false);
+      return;
+    }
+    navigate('/invoices', { state: { tab: 'subcontractor-po' } });
+  };
+
+  const handleDownload = async () => {
+    if (generating) return;
+    setGenerating(true);
+    try {
+      await generateSubcontractorPOPDF(po);
+    } finally {
+      setGenerating(false);
+    }
+  };
+
+  if (loading) return <Layout><p style={{ padding: 24, color: 'var(--text-muted)' }}>Loading...</p></Layout>;
+  if (!po) return <Layout><p>Purchase order not found.</p></Layout>;
+
+  const sortedItems = (po.items || []).slice().sort((a, b) => Number(a.sort_order || 0) - Number(b.sort_order || 0));
+
+  return (
+    <Layout>
+      <button className="back-link" onClick={() => navigate('/invoices', { state: { tab: 'subcontractor-po' } })}>← Back to Subcontractor PO</button>
+
+      <div className="page-header">
+        <div>
+          <div className="page-title">{po.po_number || 'Purchase Order'}</div>
+        </div>
+        <div className="action-buttons">
+          <span className={`badge badge-${poStatusColor[po.status] || 'not_started'}`} style={{ fontSize: 13, padding: '6px 14px' }}>
+            {poStatusLabel[po.status] || po.status}
+          </span>
+          <LoadingButton className="btn btn-primary" loading={generating} loadingText="Generating..." onClick={handleDownload}>Download PO</LoadingButton>
+          {po.status !== 'draft' && po.status !== 'cancelled' && (
+            <button className="btn btn-outline" onClick={handleResend} disabled={saving}>Resend PO</button>
+          )}
+        </div>
+      </div>
+
+      <div className="grid-2" style={{ marginBottom: 24 }}>
+        <div className="card">
+          <div className="card-title">Subcontractor</div>
+          <div style={{ fontSize: 15, fontWeight: 700 }}>{po.profile?.name || 'External Team Member'}</div>
+          <div style={{ color: 'var(--text-muted)', fontSize: 13, marginTop: 4 }}>{po.profile?.email || 'No email on file'}</div>
+        </div>
+        <div className="card">
+          <div className="card-title">PO Details</div>
+          <div className="detail-grid" style={{ marginBottom: 0 }}>
+            <div className="detail-item"><label>PO Date</label><p>{new Date(po.date).toLocaleDateString()}</p></div>
+            <div className="detail-item"><label>Due Date</label><p>{po.due_date ? new Date(po.due_date).toLocaleDateString() : '—'}</p></div>
+            <div className="detail-item"><label>Terms</label><p>{po.terms || 'Net 15'}</p></div>
+            <div className="detail-item"><label>Project</label><p>{po.project?.name || 'No project'}</p></div>
+            <div className="detail-item"><label>Client</label><p>{po.project?.company?.name || '—'}</p></div>
+            <div className="detail-item"><label>Total</label><p style={{ fontSize: 18, fontWeight: 700, color: 'var(--accent)' }}>${Number(po.amount).toFixed(2)}</p></div>
+            {po.paid_at && <div className="detail-item"><label>Paid On</label><p>{new Date(po.paid_at).toLocaleDateString()}</p></div>}
+          </div>
+        </div>
+      </div>
+
+      <div className="card" style={{ marginBottom: 24 }}>
+        <div className="card-title">Line Items</div>
+        <div className="table-wrapper" style={{ border: 'none' }}>
+          <table>
+            <thead>
+              <tr>
+                <th>Project</th>
+                <th>Task</th>
+                <th>Description</th>
+                <th style={{ textAlign: 'right' }}>Amount</th>
+              </tr>
+            </thead>
+            <tbody>
+              {sortedItems.map(item => (
+                <tr key={item.id}>
+                  <td>{po.project?.name || 'No project'}</td>
+                  <td>{item.task?.title || '—'}</td>
+                  <td>{item.description}</td>
+                  <td style={{ textAlign: 'right', fontWeight: 700 }}>${Number(item.amount).toFixed(2)}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+        <div style={{ display: 'flex', justifyContent: 'flex-end', padding: '16px 16px 0', borderTop: '1px solid var(--border)', marginTop: 8 }}>
+          <div style={{ textAlign: 'right' }}>
+            <div style={{ fontSize: 11, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.5px', color: 'var(--text-muted)', marginBottom: 4 }}>Total</div>
+            <div style={{ fontSize: 24, fontWeight: 700, color: 'var(--accent)' }}>${Number(po.amount).toFixed(2)}</div>
+          </div>
+        </div>
+      </div>
+
+      {(po.description || po.notes?.trim()) && (
+        <div className="card" style={{ marginBottom: 24 }}>
+          <div className="card-title">Notes</div>
+          {po.description && <p style={{ fontSize: 14, color: 'var(--text-secondary)', lineHeight: 1.6, whiteSpace: 'pre-wrap' }}>{po.description}</p>}
+          {po.notes?.trim() && <p style={{ fontSize: 14, color: 'var(--text-secondary)', lineHeight: 1.6, whiteSpace: 'pre-wrap' }}>{po.notes}</p>}
+        </div>
+      )}
+
+      <div className="card">
+        <div className="card-title">Actions</div>
+        <div className="action-buttons">
+          {po.status === 'draft' && <button className="btn btn-primary" onClick={handleFinalizeSend} disabled={saving}>Finalize & Send</button>}
+          {po.status !== 'draft' && po.status !== 'cancelled' && <button className="btn btn-outline" onClick={handleResend} disabled={saving}>Resend PO</button>}
+          {['sent', 'approved'].includes(po.status) && <button className="btn btn-outline" onClick={handleReadyToPay} disabled={saving}>Mark Ready</button>}
+          {po.status === 'ready_to_pay' && <button className="btn btn-success" onClick={handleMarkPaid} disabled={saving}>Mark Paid</button>}
+          {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>
+        </div>
+      </div>
+    </Layout>
+  );
+}
diff --git a/src/pages/team/SurveyMaker.jsx b/src/pages/team/SurveyMaker.jsx
new file mode 100644
index 0000000..35a5199
--- /dev/null
+++ b/src/pages/team/SurveyMaker.jsx
@@ -0,0 +1,312 @@
+import { useRef, useState } from 'react';
+import Layout from '../../components/Layout';
+import LoadingButton from '../../components/LoadingButton';
+import { generateSurveyMakerPdf } from '../../lib/surveyMakerPdf';
+
+const PHOTO_FILE_ACCEPT = 'image/*,.heic,.heif,.avif,.tif,.tiff,.bmp,.webp,.jpeg,.jpg,.png,.gif';
+const PHOTO_FILE_EXTENSIONS = new Set(['heic', 'heif', 'avif', 'tif', 'tiff', 'bmp', 'webp', 'jpeg', 'jpg', 'png', 'gif']);
+
+const EMPTY_SIGN = () => ({
+  id: Math.random().toString(36).slice(2),
+  signName: '',
+  measurements: '',
+  notes: '',
+  mainPhoto: null,
+  mainPreview: '',
+  contextPhoto1: null,
+  contextPreview1: '',
+  contextPhoto2: null,
+  contextPreview2: '',
+  contextPhoto3: null,
+  contextPreview3: '',
+});
+
+function isPhotoFile(file) {
+  if (!file) return false;
+  if (file.type?.startsWith('image/')) return true;
+  const extension = file.name?.split('.').pop()?.toLowerCase();
+  return extension ? PHOTO_FILE_EXTENSIONS.has(extension) : false;
+}
+
+export default function SurveyMaker() {
+  const [surveyInfo, setSurveyInfo] = useState({
+    clientName: '',
+    projectName: '',
+    siteAddress: '',
+    surveyDate: new Date().toISOString().slice(0, 10),
+    preparedBy: '',
+  });
+  const [signs, setSigns] = useState([EMPTY_SIGN()]);
+  const [generating, setGenerating] = useState(false);
+  const [notification, setNotification] = useState(null);
+
+  const setField = (field) => (event) => {
+    setSurveyInfo(current => ({ ...current, [field]: event.target.value }));
+  };
+
+  const updateSign = (id, field, value) => {
+    setSigns(current => current.map(sign => (sign.id === id ? { ...sign, [field]: value } : sign)));
+  };
+
+  const handlePhoto = (id, field, previewField, file) => {
+    if (!isPhotoFile(file)) return;
+    updateSign(id, field, file);
+    updateSign(id, previewField, URL.createObjectURL(file));
+  };
+
+  const addSign = () => {
+    setSigns(current => [...current, EMPTY_SIGN()]);
+  };
+
+  const removeSign = (id) => {
+    setSigns(current => current.length === 1 ? current : current.filter(sign => sign.id !== id));
+  };
+
+  const handleGenerate = async () => {
+    setGenerating(true);
+    setNotification(null);
+
+    try {
+      await generateSurveyMakerPdf({
+        ...surveyInfo,
+        signs,
+      });
+      setNotification({ type: 'success', msg: '✓ Survey PDF downloaded!' });
+    } catch (error) {
+      setNotification({ type: 'error', msg: `Failed to generate PDF: ${error.message}` });
+    } finally {
+      setGenerating(false);
+    }
+  };
+
+  return (
+    <Layout>
+      <div className="page-header">
+        <div>
+          <div className="page-title">Survey Maker</div>
+          <div className="page-subtitle">Create a survey PDF with sign photos, measurements, and notes.</div>
+        </div>
+        <LoadingButton className="btn btn-primary btn-sm" loading={generating} loadingText="Generating..." onClick={handleGenerate}>Generate PDF</LoadingButton>
+      </div>
+
+      {notification && (
+        <div style={{ marginBottom: 18, color: notification.type === 'error' ? 'var(--danger)' : 'var(--success, #16a34a)', fontSize: 13 }}>
+          {notification.msg}
+        </div>
+      )}
+
+      <div style={{ display: 'grid', gap: 24 }}>
+        <div className="card">
+          <div className="card-title">Survey Info</div>
+          <div className="grid-2">
+            <div className="form-group">
+              <label>Client Name</label>
+              <input type="text" value={surveyInfo.clientName} onChange={setField('clientName')} placeholder="e.g. Bolchoz Sign Solutions" />
+            </div>
+            <div className="form-group">
+              <label>Project Name</label>
+              <input type="text" value={surveyInfo.projectName} onChange={setField('projectName')} placeholder="e.g. Main Street Sign Survey" />
+            </div>
+            <div className="form-group">
+              <label>Survey Date</label>
+              <input type="date" value={surveyInfo.surveyDate} onChange={setField('surveyDate')} />
+            </div>
+            <div className="form-group">
+              <label>Prepared By</label>
+              <input type="text" value={surveyInfo.preparedBy} onChange={setField('preparedBy')} placeholder="Your name" />
+            </div>
+          </div>
+          <div className="form-group" style={{ marginBottom: 0 }}>
+            <label>Site Address</label>
+            <input type="text" value={surveyInfo.siteAddress} onChange={setField('siteAddress')} placeholder="e.g. 123 Main St, City, State" />
+          </div>
+        </div>
+
+        <div className="card">
+          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16 }}>
+            <div className="card-title" style={{ margin: 0 }}>Signs</div>
+            <button className="btn btn-outline btn-sm" onClick={addSign}>+ Add Sign</button>
+          </div>
+
+          <div style={{ display: 'grid', gap: 14 }}>
+            {signs.map((sign, index) => (
+              <SignCard
+                key={sign.id}
+                sign={sign}
+                index={index}
+                onChange={updateSign}
+                onPhoto={handlePhoto}
+                onRemove={removeSign}
+                canRemove={signs.length > 1}
+              />
+            ))}
+          </div>
+        </div>
+      </div>
+    </Layout>
+  );
+}
+
+function SignCard({ sign, index, onChange, onPhoto, onRemove, canRemove }) {
+  const mainInputRef = useRef(null);
+  const contextInputRef1 = useRef(null);
+  const contextInputRef2 = useRef(null);
+  const contextInputRef3 = useRef(null);
+
+  return (
+    <div style={{ border: '1px solid var(--border)', borderRadius: 10, padding: 16, display: 'grid', gap: 14 }}>
+      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
+        <div style={{ fontSize: 14, fontWeight: 700, color: 'var(--text-primary)' }}>
+          {sign.signName || `Sign ${index + 1}`}
+        </div>
+        {canRemove && (
+          <button className="btn btn-outline btn-sm" onClick={() => onRemove(sign.id)}>
+            Remove
+          </button>
+        )}
+      </div>
+
+      <div className="grid-2">
+        <div className="form-group">
+          <label>Sign Name</label>
+          <input
+            type="text"
+            value={sign.signName}
+            onChange={(event) => onChange(sign.id, 'signName', event.target.value)}
+            placeholder={`e.g. Sign ${index + 1}`}
+          />
+        </div>
+        <div className="form-group">
+          <label>Main Photo</label>
+          <PhotoPicker
+            inputRef={mainInputRef}
+            preview={sign.mainPreview}
+            label="Click to upload main sign photo"
+            onPick={(file) => onPhoto(sign.id, 'mainPhoto', 'mainPreview', file)}
+          />
+        </div>
+      </div>
+
+      <div className="form-group" style={{ marginBottom: 0 }}>
+        <label>Context Photos</label>
+        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12 }}>
+          <PhotoPicker
+            inputRef={contextInputRef1}
+            preview={sign.contextPreview1}
+            label="Context photo 1"
+            small
+            onPick={(file) => onPhoto(sign.id, 'contextPhoto1', 'contextPreview1', file)}
+          />
+          <PhotoPicker
+            inputRef={contextInputRef2}
+            preview={sign.contextPreview2}
+            label="Context photo 2"
+            small
+            onPick={(file) => onPhoto(sign.id, 'contextPhoto2', 'contextPreview2', file)}
+          />
+          <PhotoPicker
+            inputRef={contextInputRef3}
+            preview={sign.contextPreview3}
+            label="Context photo 3"
+            small
+            onPick={(file) => onPhoto(sign.id, 'contextPhoto3', 'contextPreview3', file)}
+          />
+        </div>
+      </div>
+
+      <div className="grid-2">
+        <div className="form-group">
+          <label>Measurements / Info</label>
+          <textarea
+            value={sign.measurements}
+            onChange={(event) => onChange(sign.id, 'measurements', event.target.value)}
+            placeholder={'e.g. 48" W x 24" H\nAluminum panel\nMounted to brick facade'}
+            style={{ minHeight: 110 }}
+          />
+        </div>
+        <div className="form-group">
+          <label>Notes</label>
+          <textarea
+            value={sign.notes}
+            onChange={(event) => onChange(sign.id, 'notes', event.target.value)}
+            placeholder="Additional survey notes..."
+            style={{ minHeight: 110 }}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function PhotoPicker({ inputRef, preview, label, onPick, small = false }) {
+  const dragCounter = useRef(0);
+  const [dragging, setDragging] = useState(false);
+
+  const handleDragEnter = (event) => {
+    event.preventDefault();
+    dragCounter.current += 1;
+    setDragging(true);
+  };
+
+  const handleDragLeave = (event) => {
+    event.preventDefault();
+    dragCounter.current -= 1;
+    if (dragCounter.current === 0) setDragging(false);
+  };
+
+  const handleDragOver = (event) => {
+    event.preventDefault();
+  };
+
+  const handleDrop = (event) => {
+    event.preventDefault();
+    dragCounter.current = 0;
+    setDragging(false);
+    const file = event.dataTransfer.files?.[0];
+    if (isPhotoFile(file)) onPick(file);
+  };
+
+  return (
+    <>
+      <div
+        onClick={() => inputRef.current?.click()}
+        onDragEnter={handleDragEnter}
+        onDragLeave={handleDragLeave}
+        onDragOver={handleDragOver}
+        onDrop={handleDrop}
+        style={{
+          border: `2px dashed ${dragging ? 'var(--accent)' : 'var(--border)'}`,
+          borderRadius: 8,
+          minHeight: small ? 110 : 120,
+          cursor: 'pointer',
+          background: dragging ? 'rgba(245,165,35,0.05)' : 'var(--card-bg-2)',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          overflow: 'hidden',
+          padding: 10,
+          transition: 'border-color 0.15s, background 0.15s',
+        }}
+      >
+        {preview ? (
+          <img src={preview} alt={label} style={{ maxHeight: small ? 100 : 150, maxWidth: '100%', objectFit: 'contain', borderRadius: 6 }} />
+        ) : (
+          <div style={{ fontSize: 13, color: 'var(--text-muted)', textAlign: 'center' }}>
+            {dragging ? 'Drop photo here' : label}
+          </div>
+        )}
+      </div>
+      <input
+        ref={inputRef}
+        type="file"
+        accept={PHOTO_FILE_ACCEPT}
+        style={{ display: 'none' }}
+        onChange={(event) => {
+          const file = event.target.files?.[0];
+          if (isPhotoFile(file)) onPick(file);
+          event.target.value = '';
+        }}
+      />
+    </>
+  );
+}
diff --git a/src/pages/team/TaskDetail.jsx b/src/pages/team/TaskDetail.jsx
index f71410d..d19c00d 100755
--- a/src/pages/team/TaskDetail.jsx
+++ b/src/pages/team/TaskDetail.jsx
@@ -3,16 +3,50 @@ 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 vLabel = (v) => 'v' + String(v || 0).padStart(2, '0');
+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();
@@ -24,6 +58,7 @@ export default function TaskDetail() {
   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';
@@ -31,14 +66,23 @@ export default function TaskDetail() {
   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: '' });
@@ -46,22 +90,63 @@ export default function TaskDetail() {
   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 canTeamApprove =
+    !isExternal
+    && task?.status === 'client_review'
+    && currentPrimarySubmission?.submitted_by === currentUser?.id;
+
   useEffect(() => {
     async function load() {
-      const { data: t } = await supabase.from('tasks').select('*').eq('id', id).single();
-      if (!t) { setLoading(false); return; }
-      setTask(t);
+      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 || []);
-      setLoading(false);
+        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]);
@@ -100,7 +185,7 @@ export default function TaskDetail() {
   const processFiles = (incoming) => {
     const combined = [...sendForm.files, ...incoming];
     const errors = [];
-    if (combined.length > MAX_FILES) errors.push(`Maximum ${MAX_FILES} files allowed.`);
+    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([]);
@@ -139,37 +224,70 @@ export default function TaskDetail() {
     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 {
-      // Use the primary (non-amendment) submission for the current version
-      const currentVersion = (task.current_version || 0) + 1;
-      const primarySub = submissions.find(s => s.version_number === currentVersion && s.type !== 'amendment')
-        || submissions.filter(s => s.type !== 'amendment').pop();
-      if (!primarySub) { setSaving(false); return; }
+      // 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.');
 
-      const uploadedFiles = [];
-      for (const file of sendForm.files) {
-        const path = `${id}/${Date.now()}_${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.push({ name: file.name, storage_path: path, size: file.size });
+      // 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.');
       }
 
-      const { data: delivery, error: deliveryError } = await supabase.from('deliveries').insert({
+      // 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,
-      }).select().single();
+        sent_at: new Date().toISOString(),
+      }, { onConflict: 'submission_id' }).select().single();
       if (deliveryError) throw new Error(`Delivery failed: ${deliveryError.message}`);
 
       if (delivery && uploadedFiles.length > 0) {
-        await supabase.from('delivery_files').insert(
+        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' }));
 
@@ -180,31 +298,25 @@ export default function TaskDetail() {
         .order('version_number');
       setSubmissions(subs || []);
 
-      // Fetch company user emails to notify
-      const { data: companyUsers } = await supabase
-        .from('profiles')
-        .select('email')
-        .eq('company_id', company?.id)
-        .eq('role', 'client');
-      const clientEmails = (companyUsers || []).map(u => u.email).filter(Boolean);
-
-      // Fall back to sender if no client emails found
-      const emailRecipients = clientEmails.length > 0 ? clientEmails : (currentUser?.email ? [currentUser.email] : []);
-
-      if (emailRecipients.length > 0) {
-        await sendEmail('sent_to_client', emailRecipients, {
-          clientFirstName: company?.name,
-          serviceType: task.title,
-          projectName: project?.name,
-          message: sendForm.message,
-          taskId: id,
-          senderEmail: currentUser?.email,
-        });
-      }
-
       setShowSendForm(false);
       setSendForm({ files: [], message: '' });
-      setNotification(`✓ Sent to client — ${uploadedFiles.length} file${uploadedFiles.length !== 1 ? 's' : ''} delivered.`);
+      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 {
@@ -212,21 +324,59 @@ export default function TaskDetail() {
     }
   };
 
-  const getFileUrl = async (path) => {
-    const { data } = await supabase.storage.from('deliveries').createSignedUrl(path, 3600);
-    if (data?.signedUrl) window.open(data.signedUrl, '_blank');
+  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 (path) => {
-    const { data } = await supabase.storage.from('submissions').createSignedUrl(path, 3600);
-    if (data?.signedUrl) window.open(data.signedUrl, '_blank');
+  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;
-    await cleanupTaskStorage([id]);
-    await supabase.from('tasks').delete().eq('id', id);
-    navigate(`/projects/${task.project_id}`);
+    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);
+    await supabase.from('tasks').update({ status: 'client_approved', completed_at: new Date().toISOString() }).eq('id', id);
+    setTask(t => ({ ...t, status: 'client_approved', completed_at: new Date().toISOString() }));
+    setNotification('✓ Job approved.');
+    setSaving(false);
   };
 
   const handleSaveTitle = async (e) => {
@@ -239,6 +389,141 @@ export default function TaskDetail() {
     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 = [];
@@ -253,8 +538,7 @@ export default function TaskDetail() {
     e.preventDefault();
     setSaving(true);
     try {
-      const maxVersion = submissions.reduce((max, s) => Math.max(max, s.version_number), 0);
-      const newVersion = maxVersion + 1;
+      const newVersion = getRevisionBaseline(task, submissions) + 1;
 
       const uploadedFiles = [];
       for (const file of workForm.files) {
@@ -276,13 +560,14 @@ export default function TaskDetail() {
       if (subError) throw new Error(subError.message);
 
       if (sub && uploadedFiles.length > 0) {
-        await supabase.from('submission_files').insert(
+        const { error: filesError } = await supabase.from('submission_files').insert(
           uploadedFiles.map(f => ({ ...f, submission_id: sub.id }))
         );
+        if (filesError) throw new Error(`File records failed: ${filesError.message}`);
       }
 
-      await supabase.from('tasks').update({ current_version: newVersion - 1 }).eq('id', id);
-      setTask(t => ({ ...t, current_version: newVersion - 1 }));
+      await supabase.from('tasks').update({ current_version: newVersion }).eq('id', id);
+      setTask(t => ({ ...t, current_version: newVersion }));
 
       const { data: subs } = await supabase
         .from('submissions')
@@ -301,29 +586,39 @@ export default function TaskDetail() {
     }
   };
 
-  const downloadAllSubmissionFiles = async (files, versionLabel) => {
-    const zip = new JSZip();
-    for (const file of files) {
-      const { data } = await supabase.storage.from('submissions').createSignedUrl(file.storage_path, 3600);
-      if (data?.signedUrl) {
-        const response = await fetch(data.signedUrl);
-        const blob = await response.blob();
-        zip.file(file.name, blob);
+  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('');
     }
-    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);
   };
 
   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 titleWithVersion = `${task.title} ${vLabel(task.current_version)}`;
+  const revisionBaseline = getRevisionBaseline(task, submissions);
+  const titleWithVersion = `${task.title} ${rLabel(revisionBaseline)}`;
 
   return (
     <Layout>
@@ -380,14 +675,16 @@ export default function TaskDetail() {
 
       {showSendForm && (
         <div className="card" style={{ marginBottom: 24, border: '1px solid var(--accent)', borderRadius: 12 }}>
-          <div className="card-title">Send to Client — {company?.name}</div>
+          <div className="card-title">{currentDelivery ? 'Update Client Delivery' : 'Send to Client'} — {company?.name}</div>
           <p style={{ fontSize: 13, color: 'var(--text-secondary)', marginBottom: 16 }}>
-            Upload the completed file and add an optional message for the client.
+            {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>
-                Attach Files *
+                {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>
@@ -434,6 +731,27 @@ export default function TaskDetail() {
                   ))}
                 </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>
@@ -444,11 +762,28 @@ export default function TaskDetail() {
                 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 || saving}>
-                {saving ? 'Uploading...' : `✉️ Send to Client${sendForm.files.length > 0 ? ` (${sendForm.files.length} file${sendForm.files.length !== 1 ? 's' : ''})` : ''}`}
+              <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: '' }); }}>Cancel</button>
+              <button type="button" className="btn btn-outline" onClick={() => { setShowSendForm(false); setSendForm({ files: [], message: '' }); setExtraClientEmail(''); }}>Cancel</button>
             </div>
           </form>
         </div>
@@ -459,9 +794,45 @@ export default function TaskDetail() {
           <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>Version</label><p style={{ fontWeight: 700, fontSize: 16 }}>{vLabel(task.current_version)}</p></div>
-            <div className="detail-item"><label>Submitted</label><p>{new Date(task.submitted_at).toLocaleDateString()}</p></div>
-            <div className="detail-item"><label>Completed</label><p>{task.completed_at ? new Date(task.completed_at).toLocaleDateString() : '—'}</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">
@@ -485,7 +856,7 @@ export default function TaskDetail() {
             {task.status === 'in_progress' && (
               <>
                 {!isExternal && !showSendForm && (
-                  <button className="btn btn-success btn-sm" onClick={() => setShowSendForm(true)}>✉️ Send to Client</button>
+                  <button className="btn btn-success btn-sm" onClick={handleOpenSendForm}>✉️ Send to Client</button>
                 )}
                 {isExternal && (
                   <button className="btn btn-primary btn-sm" onClick={() => setShowWorkUpload(s => !s)} disabled={saving}>
@@ -499,9 +870,18 @@ export default function TaskDetail() {
               <button className="btn btn-primary btn-sm" onClick={handleResume} disabled={saving}>▶ Resume</button>
             )}
             {task.status === 'client_review' && (
-              <div style={{ padding: '10px 14px', background: 'var(--bg)', borderRadius: 8, fontSize: 13, color: '#7c3aed', fontWeight: 500 }}>
-                ⏳ Awaiting client review — no action needed.
-              </div>
+              <>
+                {!isExternal && !showSendForm && (
+                  <button className="btn btn-success btn-sm" onClick={handleOpenSendForm}>✉️ Add Files / Resend</button>
+                )}
+                {canTeamApprove ? (
+                  <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 }}>
@@ -509,6 +889,57 @@ export default function TaskDetail() {
               </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">
@@ -516,37 +947,109 @@ export default function TaskDetail() {
           {submissions.length === 0 ? (
             <p style={{ color: 'var(--text-muted)', fontSize: 13 }}>No request notes yet.</p>
           ) : (() => {
-            const currentVersion = task.current_version + 1;
-            const currentGroup = submissions.filter(s => s.version_number === currentVersion);
-            const primary = currentGroup.find(s => s.type !== 'amendment') || currentGroup[0];
+            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 }}>{vLabel(primary.version_number - 1)}</span>
+                  <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} · {new Date(primary.submitted_at).toLocaleDateString()}
+                    {primary.submitted_by_name} · {formatDateEST(primary.submitted_at)}
                   </span>
+                  {!isExternal && !editingRequest && (
+                    <button className="btn btn-outline btn-sm" onClick={startEditRequest}>Edit</button>
+                  )}
                 </div>
-                <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>
-                <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>
+                {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} · {new Date(amendment.submitted_at).toLocaleDateString()}
+                      {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 && (
@@ -557,7 +1060,7 @@ export default function TaskDetail() {
                               <span>📎</span>
                               <span style={{ fontSize: 12, fontWeight: 500 }}>{file.name}</span>
                             </div>
-                            <button className="btn btn-outline btn-sm" onClick={() => getSubmissionFileUrl(file.storage_path)}>📥 View</button>
+                            <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>
@@ -568,9 +1071,7 @@ export default function TaskDetail() {
                   <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>
-                      {primary.files.length > 1 && (
-                        <button className="btn btn-outline btn-sm" onClick={() => downloadAllSubmissionFiles(primary.files, vLabel(primary.version_number - 1))}>⬇ Download All</button>
-                      )}
+                      <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) => (
@@ -579,7 +1080,7 @@ export default function TaskDetail() {
                             <span>📎</span>
                             <span style={{ fontSize: 13, fontWeight: 500 }}>{file.name}</span>
                           </div>
-                          <button className="btn btn-outline btn-sm" onClick={() => getSubmissionFileUrl(file.storage_path)}>📥 View</button>
+                          <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>
@@ -665,7 +1166,7 @@ export default function TaskDetail() {
 
       {submissions.length > 0 && (
         <div className="card">
-          <div className="card-title">Version History</div>
+          <div className="card-title">Revision History</div>
           <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
             {Object.values(
               submissions.reduce((groups, sub) => {
@@ -674,7 +1175,7 @@ export default function TaskDetail() {
                 groups[key].push(sub);
                 return groups;
               }, {})
-            ).reverse().map((group, gi, all) => {
+            ).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;
@@ -682,12 +1183,12 @@ export default function TaskDetail() {
               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 }}>{vLabel(primary.version_number - 1)}</span>
+                    <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} · {new Date(primary.submitted_at).toLocaleDateString()}
+                      {primary.submitted_by_name} · {formatDateEST(primary.submitted_at)}
                     </span>
                   </div>
                   <div style={{ padding: '12px 16px' }}>
@@ -707,9 +1208,7 @@ export default function TaskDetail() {
                       <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>
-                          {primary.files.length > 1 && (
-                            <button className="btn btn-outline btn-sm" onClick={() => downloadAllSubmissionFiles(primary.files)}>⬇ Download All</button>
-                          )}
+                          <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) => (
@@ -718,7 +1217,7 @@ export default function TaskDetail() {
                                 <span>📎</span>
                                 <span style={{ fontSize: 13, fontWeight: 500 }}>{file.name}</span>
                               </div>
-                              <button className="btn btn-outline btn-sm" onClick={() => getSubmissionFileUrl(file.storage_path)}>📥 View</button>
+                              <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>
@@ -730,7 +1229,7 @@ export default function TaskDetail() {
                           Amended Request
                         </div>
                         <div style={{ fontSize: 12, color: 'var(--text-muted)', marginBottom: 6 }}>
-                          {amendment.submitted_by_name} · {new Date(amendment.submitted_at).toLocaleDateString()}
+                          {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 && (
@@ -741,7 +1240,7 @@ export default function TaskDetail() {
                                   <span>📎</span>
                                   <span style={{ fontSize: 12, fontWeight: 500 }}>{file.name}</span>
                                 </div>
-                                <button className="btn btn-outline btn-sm" onClick={() => getSubmissionFileUrl(file.storage_path)}>📥 View</button>
+                                <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>
@@ -752,7 +1251,7 @@ export default function TaskDetail() {
                   {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 {new Date(delivery.sent_at).toLocaleDateString()}
+                        ✓ Delivered by {delivery.sent_by} on {formatDateEST(delivery.sent_at)}
                       </div>
                       <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
                         {(delivery.files || []).map((file, fi) => (
@@ -762,16 +1261,16 @@ export default function TaskDetail() {
                               <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>
-                            <button className="btn btn-outline btn-sm" onClick={() => getFileUrl(file.storage_path)}>📥 View</button>
+                            <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>
               );
             })}
diff --git a/supabase/.temp/cli-latest b/supabase/.temp/cli-latest
old mode 100755
new mode 100644
index 0cce2dc..a333a1d
--- a/supabase/.temp/cli-latest
+++ b/supabase/.temp/cli-latest
@@ -1 +1 @@
-v2.78.1
\ No newline at end of file
+v2.98.2
\ No newline at end of file
diff --git a/supabase/.temp/gotrue-version b/supabase/.temp/gotrue-version
old mode 100755
new mode 100644
diff --git a/supabase/.temp/pooler-url b/supabase/.temp/pooler-url
old mode 100755
new mode 100644
diff --git a/supabase/.temp/postgres-version b/supabase/.temp/postgres-version
old mode 100755
new mode 100644
diff --git a/supabase/.temp/project-ref b/supabase/.temp/project-ref
old mode 100755
new mode 100644
diff --git a/supabase/.temp/rest-version b/supabase/.temp/rest-version
old mode 100755
new mode 100644
diff --git a/supabase/.temp/storage-migration b/supabase/.temp/storage-migration
old mode 100755
new mode 100644
index b781586..2494908
--- a/supabase/.temp/storage-migration
+++ b/supabase/.temp/storage-migration
@@ -1 +1 @@
-fix-optimized-search-function
\ No newline at end of file
+operation-ergonomics
\ No newline at end of file
diff --git a/supabase/.temp/storage-version b/supabase/.temp/storage-version
old mode 100755
new mode 100644
index f663f9d..14186a2
--- a/supabase/.temp/storage-version
+++ b/supabase/.temp/storage-version
@@ -1 +1 @@
-v1.37.7
\ No newline at end of file
+v1.48.20
\ No newline at end of file
diff --git a/supabase/config.toml b/supabase/config.toml
new file mode 100644
index 0000000..8d1c82a
--- /dev/null
+++ b/supabase/config.toml
@@ -0,0 +1,5 @@
+[functions.send-email]
+verify_jwt = false
+
+[functions.create-user]
+verify_jwt = false
diff --git a/supabase/functions/create-checkout-session/index.ts b/supabase/functions/create-checkout-session/index.ts
new file mode 100644
index 0000000..dd4073e
--- /dev/null
+++ b/supabase/functions/create-checkout-session/index.ts
@@ -0,0 +1,92 @@
+import { serve } from 'https://deno.land/std@0.168.0/http/server.ts';
+import { createClient } from 'https://esm.sh/@supabase/supabase-js@2';
+import Stripe from 'https://esm.sh/stripe@14?target=deno';
+
+const stripe = new Stripe(Deno.env.get('STRIPE_SECRET_KEY')!, { apiVersion: '2023-10-16' });
+const STRIPE_CURRENCY = 'usd';
+const STRIPE_CURRENCY_LABEL = 'USD';
+
+const corsHeaders = {
+  'Access-Control-Allow-Origin': '*',
+  'Access-Control-Allow-Headers': 'authorization, x-client-info, apikey, content-type',
+};
+
+serve(async (req) => {
+  if (req.method === 'OPTIONS') return new Response('ok', { headers: corsHeaders });
+
+  try {
+    const { invoice_id, invoice_ref } = await req.json();
+    const invoiceRef = invoice_ref || invoice_id;
+    if (!invoiceRef) return new Response(JSON.stringify({ error: 'invoice_ref required' }), { status: 400, headers: corsHeaders });
+
+    const supabase = createClient(
+      Deno.env.get('SUPABASE_URL')!,
+      Deno.env.get('SUPABASE_SERVICE_ROLE_KEY')!,
+    );
+
+    let invoice = null;
+    let error = null;
+
+    ({ data: invoice, error } = await supabase
+      .from('invoices')
+      .select('*')
+      .eq('id', invoiceRef)
+      .maybeSingle());
+
+    if (!invoice) {
+      ({ data: invoice, error } = await supabase
+        .from('invoices')
+        .select('*')
+        .eq('invoice_number', invoiceRef)
+        .maybeSingle());
+    }
+
+    if (error || !invoice) return new Response(JSON.stringify({ error: 'Invoice not found' }), { status: 404, headers: corsHeaders });
+    if (invoice.status === 'paid') return new Response(JSON.stringify({ error: 'Invoice already paid' }), { status: 400, headers: corsHeaders });
+
+    const { data: company } = invoice.company_id
+      ? await supabase
+          .from('companies')
+          .select('name, email')
+          .eq('id', invoice.company_id)
+          .maybeSingle()
+      : { data: null };
+
+    const origin = 'https://portal.fourgebranding.com';
+    const billToLabel = invoice.bill_to || company?.name;
+
+    const session = await stripe.checkout.sessions.create({
+      // No payment_method_types — Stripe uses whatever is enabled in the dashboard
+      // (cards, ACH, etc.) without needing to hardcode them here.
+      mode: 'payment',
+      customer_email: company?.email || undefined,
+      line_items: [{
+        price_data: {
+          currency: STRIPE_CURRENCY,
+          product_data: {
+            name: `Invoice ${invoice.invoice_number} (${STRIPE_CURRENCY_LABEL})`,
+            description: billToLabel
+              ? `Fourge Branding — ${billToLabel} (${STRIPE_CURRENCY_LABEL})`
+              : `Fourge Branding invoice charged in ${STRIPE_CURRENCY_LABEL}`,
+          },
+          unit_amount: Math.round(Number(invoice.total) * 100),
+        },
+        quantity: 1,
+      }],
+      // Stamp invoice_id on both the session and the payment intent so the
+      // webhook can match it whether the payment settles instantly (card) or
+      // asynchronously (ACH — payment_intent.succeeded fires days later).
+      metadata: { invoice_id: invoice.id, currency: STRIPE_CURRENCY },
+      payment_intent_data: {
+        metadata: { invoice_id: invoice.id },
+      },
+      success_url: `${origin}/pay/${encodeURIComponent(invoice.invoice_number)}?success=1`,
+      cancel_url: `${origin}/pay/${encodeURIComponent(invoice.invoice_number)}?cancelled=1`,
+    });
+
+    return new Response(JSON.stringify({ url: session.url }), { headers: { ...corsHeaders, 'Content-Type': 'application/json' } });
+  } catch (err) {
+    console.error(err);
+    return new Response(JSON.stringify({ error: err.message }), { status: 500, headers: corsHeaders });
+  }
+});
diff --git a/supabase/functions/create-user/index.ts b/supabase/functions/create-user/index.ts
index 98ccef8..7556939 100644
--- a/supabase/functions/create-user/index.ts
+++ b/supabase/functions/create-user/index.ts
@@ -1,5 +1,4 @@
 // deno-lint-ignore-file
-import { serve } from 'https://deno.land/std@0.168.0/http/server.ts'
 import { createClient } from 'https://esm.sh/@supabase/supabase-js@2'
 
 const corsHeaders = {
@@ -7,17 +6,18 @@ const corsHeaders = {
   'Access-Control-Allow-Headers': 'authorization, x-client-info, apikey, content-type',
 }
 
-const ok = (body: Record<string, unknown>) => new Response(JSON.stringify(body), {
-  status: 200,
-  headers: { ...corsHeaders, 'Content-Type': 'application/json' },
-})
+const json = (body: Record<string, unknown>, status: number) =>
+  new Response(JSON.stringify(body), {
+    status,
+    headers: { ...corsHeaders, 'Content-Type': 'application/json' },
+  })
 
-serve(async (req) => {
+Deno.serve(async (req) => {
   if (req.method === 'OPTIONS') return new Response('ok', { headers: corsHeaders })
 
   try {
     const authHeader = req.headers.get('Authorization') ?? ''
-    if (!authHeader) return ok({ error: 'No authorization header' })
+    if (!authHeader) return json({ error: 'No authorization header' }, 401)
 
     const callerClient = createClient(
       Deno.env.get('SUPABASE_URL') ?? '',
@@ -26,16 +26,19 @@ serve(async (req) => {
     )
 
     const { data: userData, error: userError } = await callerClient.auth.getUser()
-    if (userError || !userData?.user) return ok({ error: `Auth failed: ${userError?.message ?? 'no user'}` })
+    if (userError || !userData?.user) return json({ error: `Auth failed: ${userError?.message ?? 'no user'}` }, 401)
 
     const { data: profile, error: profileError } = await callerClient
       .from('profiles').select('role').eq('id', userData.user.id).single()
-    if (profileError) return ok({ error: `Profile error: ${profileError.message}` })
-    if (profile?.role !== 'team') return ok({ error: 'Forbidden: team only' })
+    if (profileError) return json({ error: `Profile error: ${profileError.message}` }, 500)
+    if (profile?.role !== 'team') return json({ error: 'Forbidden: team only' }, 403)
 
     const body = await req.json()
-    const { name, email, password, company_id } = body
-    if (!name || !email || !password) return ok({ error: 'name, email and password are required' })
+    const { name, email, password, company_id, role: roleParam } = body
+    if (!name || !email || !password) return json({ error: 'name, email and password are required' }, 400)
+
+    const validRoles = ['team', 'client', 'external']
+    const role = validRoles.includes(roleParam) ? roleParam : 'client'
 
     const admin = createClient(
       Deno.env.get('SUPABASE_URL') ?? '',
@@ -46,20 +49,47 @@ serve(async (req) => {
       email,
       password,
       email_confirm: true,
-      user_metadata: { name, role: 'client' },
+      user_metadata: { name, role },
     })
 
-    if (createError) return ok({ error: `Create user failed: ${createError.message}` })
+    if (createError) return json({ error: `Create user failed: ${createError.message}` }, 500)
+
+    if (role === 'client' && company_id && created?.user) {
+      const { error: profileUpsertError } = await admin
+        .from('profiles')
+        .upsert({
+          id: created.user.id,
+          name,
+          email,
+          role,
+          company_id,
+        }, { onConflict: 'id' })
+      if (profileUpsertError) return json({ error: `User created but profile setup failed: ${profileUpsertError.message}` }, 500)
 
-    if (company_id && created?.user) {
       const { error: assignError } = await admin
         .from('profiles').update({ company_id }).eq('id', created.user.id)
-      if (assignError) return ok({ error: `User created but company assign failed: ${assignError.message}` })
+      if (assignError) return json({ error: `User created but company assign failed: ${assignError.message}` }, 500)
+
+      const { error: membershipError } = await admin
+        .from('company_members')
+        .upsert({ company_id, profile_id: created.user.id }, { onConflict: 'company_id,profile_id' })
+      if (membershipError) return json({ error: `User created but company membership failed: ${membershipError.message}` }, 500)
+    } else if (role === 'external' && created?.user) {
+      const { error: profileUpsertError } = await admin
+        .from('profiles')
+        .upsert({
+          id: created.user.id,
+          name,
+          email,
+          role,
+          company_id: null,
+        }, { onConflict: 'id' })
+      if (profileUpsertError) return json({ error: `User created but profile setup failed: ${profileUpsertError.message}` }, 500)
     }
 
-    return ok({ success: true })
+    return json({ success: true }, 200)
 
   } catch (err) {
-    return ok({ error: `Unexpected: ${String(err)}` })
+    return json({ error: `Unexpected: ${String(err)}` }, 500)
   }
 })
diff --git a/supabase/functions/delete-user/index.ts b/supabase/functions/delete-user/index.ts
new file mode 100644
index 0000000..992f1a9
--- /dev/null
+++ b/supabase/functions/delete-user/index.ts
@@ -0,0 +1,53 @@
+// deno-lint-ignore-file
+import { createClient } from 'https://esm.sh/@supabase/supabase-js@2'
+
+const corsHeaders = {
+  'Access-Control-Allow-Origin': '*',
+  'Access-Control-Allow-Headers': 'authorization, x-client-info, apikey, content-type',
+}
+
+const json = (body: Record<string, unknown>, status: number) =>
+  new Response(JSON.stringify(body), {
+    status,
+    headers: { ...corsHeaders, 'Content-Type': 'application/json' },
+  })
+
+Deno.serve(async (req) => {
+  if (req.method === 'OPTIONS') return new Response('ok', { headers: corsHeaders })
+
+  try {
+    const authHeader = req.headers.get('Authorization') ?? ''
+    if (!authHeader) return json({ error: 'No authorization header' }, 401)
+
+    const callerClient = createClient(
+      Deno.env.get('SUPABASE_URL') ?? '',
+      Deno.env.get('SUPABASE_ANON_KEY') ?? '',
+      { global: { headers: { Authorization: authHeader } } }
+    )
+
+    const { data: userData, error: userError } = await callerClient.auth.getUser()
+    if (userError || !userData?.user) return json({ error: `Auth failed: ${userError?.message ?? 'no user'}` }, 401)
+
+    const { data: profile, error: profileError } = await callerClient
+      .from('profiles').select('role').eq('id', userData.user.id).single()
+    if (profileError) return json({ error: `Profile error: ${profileError.message}` }, 500)
+    if (profile?.role !== 'team') return json({ error: 'Forbidden: team only' }, 403)
+
+    const body = await req.json()
+    const { user_id } = body
+    if (!user_id) return json({ error: 'user_id is required' }, 400)
+
+    const admin = createClient(
+      Deno.env.get('SUPABASE_URL') ?? '',
+      Deno.env.get('SUPABASE_SERVICE_ROLE_KEY') ?? ''
+    )
+
+    const { error: deleteError } = await admin.auth.admin.deleteUser(user_id)
+    if (deleteError) return json({ error: `Delete failed: ${deleteError.message}` }, 500)
+
+    return json({ success: true }, 200)
+
+  } catch (err) {
+    return json({ error: `Unexpected: ${String(err)}` }, 500)
+  }
+})
diff --git a/supabase/functions/fourge-passwords-crypto/index.ts b/supabase/functions/fourge-passwords-crypto/index.ts
new file mode 100644
index 0000000..9678b6c
--- /dev/null
+++ b/supabase/functions/fourge-passwords-crypto/index.ts
@@ -0,0 +1,99 @@
+// deno-lint-ignore-file
+import { createClient } from 'https://esm.sh/@supabase/supabase-js@2'
+
+const corsHeaders = {
+  'Access-Control-Allow-Origin': '*',
+  'Access-Control-Allow-Headers': 'authorization, x-client-info, apikey, content-type',
+}
+
+const json = (body: Record<string, unknown>, status: number) =>
+  new Response(JSON.stringify(body), {
+    status,
+    headers: { ...corsHeaders, 'Content-Type': 'application/json' },
+  })
+
+function encodeBase64(bytes: Uint8Array) {
+  return btoa(String.fromCharCode(...bytes))
+}
+
+function decodeBase64(value: string) {
+  return Uint8Array.from(atob(value), char => char.charCodeAt(0))
+}
+
+async function requireTeam(authHeader: string) {
+  const supabaseUrl = Deno.env.get('SUPABASE_URL') ?? ''
+  const supabaseKey = Deno.env.get('SUPABASE_ANON_KEY') || Deno.env.get('SUPABASE_SERVICE_ROLE_KEY') || ''
+
+  const callerClient = createClient(
+    supabaseUrl,
+    supabaseKey,
+    { global: { headers: { Authorization: authHeader } } }
+  )
+
+  const { data: userData, error: userError } = await callerClient.auth.getUser()
+  if (userError || !userData?.user) return { ok: false, error: `Auth failed: ${userError?.message ?? 'no user'}`, status: 401 }
+
+  const { data: profile, error: profileError } = await callerClient
+    .from('profiles').select('role').eq('id', userData.user.id).single()
+
+  if (profileError) return { ok: false, error: `Profile error: ${profileError.message}`, status: 500 }
+  if (profile?.role !== 'team') return { ok: false, error: 'Forbidden: team only', status: 403 }
+
+  return { ok: true }
+}
+
+async function getKey() {
+  const secret = Deno.env.get('PASSWORD_VAULT_KEY') ?? ''
+  if (!secret) throw new Error('PASSWORD_VAULT_KEY is not configured.')
+
+  const rawKey = decodeBase64(secret)
+  return crypto.subtle.importKey('raw', rawKey, 'AES-GCM', false, ['encrypt', 'decrypt'])
+}
+
+Deno.serve(async (req) => {
+  if (req.method === 'OPTIONS') return new Response('ok', { headers: corsHeaders })
+
+  try {
+    const authHeader = req.headers.get('Authorization') ?? ''
+    if (!authHeader) return json({ error: 'No authorization header' }, 401)
+
+    const auth = await requireTeam(authHeader)
+    if (!auth.ok) return json({ error: auth.error as string }, auth.status as number)
+
+    const body = await req.json()
+    const action = body?.action
+    const key = await getKey()
+
+    if (action === 'encrypt') {
+      const plaintext = String(body?.plaintext ?? '')
+      if (!plaintext) return json({ error: 'plaintext required' }, 400)
+
+      const iv = crypto.getRandomValues(new Uint8Array(12))
+      const encoded = new TextEncoder().encode(plaintext)
+      const ciphertext = await crypto.subtle.encrypt({ name: 'AES-GCM', iv }, key, encoded)
+
+      return json({
+        ciphertext: encodeBase64(new Uint8Array(ciphertext)),
+        iv: encodeBase64(iv),
+      }, 200)
+    }
+
+    if (action === 'decrypt') {
+      const ciphertext = String(body?.ciphertext ?? '')
+      const ivValue = String(body?.iv ?? '')
+      if (!ciphertext || !ivValue) return json({ error: 'ciphertext and iv required' }, 400)
+
+      const decrypted = await crypto.subtle.decrypt(
+        { name: 'AES-GCM', iv: decodeBase64(ivValue) },
+        key,
+        decodeBase64(ciphertext),
+      )
+
+      return json({ plaintext: new TextDecoder().decode(decrypted) }, 200)
+    }
+
+    return json({ error: 'Invalid action' }, 400)
+  } catch (err) {
+    return json({ error: `Unexpected: ${String(err)}` }, 500)
+  }
+})
diff --git a/supabase/functions/get-public-invoice/index.ts b/supabase/functions/get-public-invoice/index.ts
new file mode 100644
index 0000000..12ec521
--- /dev/null
+++ b/supabase/functions/get-public-invoice/index.ts
@@ -0,0 +1,70 @@
+import { serve } from 'https://deno.land/std@0.168.0/http/server.ts';
+import { createClient } from 'https://esm.sh/@supabase/supabase-js@2';
+
+const corsHeaders = {
+  'Access-Control-Allow-Origin': '*',
+  'Access-Control-Allow-Headers': 'authorization, x-client-info, apikey, content-type',
+};
+
+serve(async (req) => {
+  if (req.method === 'OPTIONS') return new Response('ok', { headers: corsHeaders });
+
+  try {
+    const { invoice_id, invoice_ref } = await req.json();
+    const invoiceRef = invoice_ref || invoice_id;
+
+    if (!invoiceRef) {
+      return new Response(JSON.stringify({ error: 'invoice_ref required' }), {
+        status: 400,
+        headers: { ...corsHeaders, 'Content-Type': 'application/json' },
+      });
+    }
+
+    const supabase = createClient(
+      Deno.env.get('SUPABASE_URL')!,
+      Deno.env.get('SUPABASE_SERVICE_ROLE_KEY')!,
+    );
+
+    let invoice = null;
+    let error = null;
+
+    ({ data: invoice, error } = await supabase
+      .from('invoices')
+      .select('id, invoice_number, invoice_date, due_date, total, status, bill_to, company_id')
+      .eq('id', invoiceRef)
+      .maybeSingle());
+
+    if (!invoice) {
+      ({ data: invoice, error } = await supabase
+        .from('invoices')
+        .select('id, invoice_number, invoice_date, due_date, total, status, bill_to, company_id')
+        .eq('invoice_number', invoiceRef)
+        .maybeSingle());
+    }
+
+    if (error || !invoice) {
+      return new Response(JSON.stringify({ error: 'Invoice not found' }), {
+        status: 404,
+        headers: { ...corsHeaders, 'Content-Type': 'application/json' },
+      });
+    }
+
+    const { data: company } = invoice.company_id
+      ? await supabase
+          .from('companies')
+          .select('name, email')
+          .eq('id', invoice.company_id)
+          .maybeSingle()
+      : { data: null };
+
+    return new Response(JSON.stringify({ invoice: { ...invoice, companies: company || null } }), {
+      headers: { ...corsHeaders, 'Content-Type': 'application/json' },
+    });
+  } catch (err) {
+    console.error(err);
+    return new Response(JSON.stringify({ error: err.message }), {
+      status: 500,
+      headers: { ...corsHeaders, 'Content-Type': 'application/json' },
+    });
+  }
+});
diff --git a/supabase/functions/send-email/index.ts b/supabase/functions/send-email/index.ts
index c93ef52..c1f89dc 100755
--- a/supabase/functions/send-email/index.ts
+++ b/supabase/functions/send-email/index.ts
@@ -1,102 +1,445 @@
 import { serve } from 'https://deno.land/std@0.168.0/http/server.ts';
+import { createClient } from 'https://esm.sh/@supabase/supabase-js@2';
 
 const RESEND_API_KEY = Deno.env.get('RESEND_API_KEY');
+const SUPABASE_URL = Deno.env.get('SUPABASE_URL');
+const SUPABASE_SERVICE_ROLE_KEY = Deno.env.get('SUPABASE_SERVICE_ROLE_KEY');
 const FROM = 'Fourge Branding <hello@fourgebranding.com>';
+const TEAM_EMAILS = [
+  'krao@fourgebranding.com',
+  'smarsell@fourgebranding.com',
+  'swebb@fourgebranding.com',
+  'twebb@fourgebranding.com',
+];
+
+const ALLOWED_TYPES = ['new_request', 'sent_to_client', 'revision_submitted', 'client_approved', 'invoice_sent', 'receipt_sent', 'subcontractor_po_sent'] as const;
+type EmailType = typeof ALLOWED_TYPES[number];
+
+// Types that only team members may trigger
+const TEAM_ONLY_TYPES: EmailType[] = ['sent_to_client', 'invoice_sent', 'receipt_sent', 'subcontractor_po_sent'];
 
 const corsHeaders = {
   'Access-Control-Allow-Origin': '*',
   'Access-Control-Allow-Headers': 'authorization, x-client-info, apikey, content-type',
 };
 
+/** Escape a value for safe insertion into HTML. */
+const esc = (s: unknown): string => {
+  if (s == null) return '';
+  return String(s)
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;');
+};
+
+/** Escape and convert newlines to <br> for multi-line text fields. */
+const escMultiline = (s: unknown): string =>
+  esc(s).replace(/\n/g, '<br>');
+
+/** Validate a string field: must be a non-empty string within max length. */
+const requireStr = (val: unknown, max = 500): string => {
+  if (typeof val !== 'string' || !val.trim()) throw new Error('Missing required field');
+  if (val.length > max) throw new Error('Field exceeds maximum length');
+  return val.trim();
+};
+
+/** Validate an optional string field. Returns '' if absent. */
+const optStr = (val: unknown, max = 500): string => {
+  if (val == null || val === '') return '';
+  if (typeof val !== 'string') throw new Error('Invalid field type');
+  if (val.length > max) throw new Error('Field exceeds maximum length');
+  return val.trim();
+};
+
+/** Basic UUID format check. */
+const isUuid = (v: unknown): v is string =>
+  typeof v === 'string' && /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i.test(v);
+
+/** Basic email format check. */
+const isEmail = (v: unknown): v is string =>
+  typeof v === 'string' && /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v) && v.length <= 254;
+
+const parseJsonSafe = async (res: Response) => {
+  const text = await res.text();
+  if (!text) return null;
+  try {
+    return JSON.parse(text);
+  } catch {
+    return { raw: text };
+  }
+};
+
+const isBase64 = (value: unknown): value is string =>
+  typeof value === 'string' && value.length <= 10_000_000 && /^[A-Za-z0-9+/=]+$/.test(value);
+
+const safeFilename = (value: unknown): string => {
+  const filename = requireStr(value, 180);
+  if (!/^[a-zA-Z0-9._ -]+\.pdf$/i.test(filename)) throw new Error('Invalid attachment filename');
+  return filename;
+};
+
 serve(async (req) => {
   if (req.method === 'OPTIONS') {
     return new Response('ok', { headers: corsHeaders });
   }
 
-  try {
-    const { type, to, data } = await req.json();
+  const respond = (body: unknown, status: number) =>
+    new Response(JSON.stringify(body), {
+      headers: { ...corsHeaders, 'Content-Type': 'application/json' },
+      status,
+    });
 
+  try {
+    if (!SUPABASE_URL || !SUPABASE_SERVICE_ROLE_KEY) {
+      return respond({ error: 'Missing Supabase environment variables' }, 500);
+    }
+    if (!RESEND_API_KEY) {
+      return respond({ error: 'Missing RESEND_API_KEY' }, 500);
+    }
+
+    // ── 1. Authentication ────────────────────────────────────────────────────
+    const authHeader = req.headers.get('Authorization') ?? '';
+    const accessToken = authHeader.startsWith('Bearer ') ? authHeader.slice(7) : '';
+    if (!accessToken) {
+      return respond({ error: 'Unauthorized' }, 401);
+    }
+
+    // Use service role client to validate the token — works with ES256 JWTs
+    const adminClient = createClient(SUPABASE_URL, SUPABASE_SERVICE_ROLE_KEY);
+
+    const { data: userData, error: authError } = await adminClient.auth.getUser(accessToken);
+    if (authError || !userData?.user) {
+      return respond({ error: `Auth failed: ${authError?.message ?? 'no user'}` }, 401);
+    }
+
+    // ── 2. Role lookup ───────────────────────────────────────────────────────
+    const { data: profile } = await adminClient
+      .from('profiles')
+      .select('role')
+      .eq('id', userData.user.id)
+      .single();
+
+    const role: string = profile?.role ?? '';
+    if (!['team', 'client', 'external'].includes(role)) {
+      return respond({ error: 'Forbidden' }, 403);
+    }
+
+    // ── 3. Parse and validate body ───────────────────────────────────────────
+    const body = await req.json();
+    const { type, to, data, attachments } = body;
+
+    if (!ALLOWED_TYPES.includes(type)) {
+      return respond({ error: 'Invalid email type' }, 400);
+    }
+
+    if (TEAM_ONLY_TYPES.includes(type) && role !== 'team') {
+      return respond({ error: 'Forbidden' }, 403);
+    }
+
+    const safeAttachments = Array.isArray(attachments)
+      ? attachments.slice(0, 3).map((attachment) => {
+          const filename = safeFilename(attachment?.filename);
+          if (!isBase64(attachment?.content)) throw new Error('Invalid attachment content');
+          return { filename, content: attachment.content };
+        })
+      : [];
+
+    // ── 4. Build email per type (with validated + escaped fields) ────────────
     let subject = '';
     let html = '';
 
     if (type === 'new_request') {
-      subject = `New Request: ${data.serviceType} — ${data.clientName}`;
+      const serviceType  = requireStr(data?.serviceType);
+      const clientName   = requireStr(data?.clientName);
+      const clientEmail  = requireStr(data?.clientEmail);
+      const projectName  = requireStr(data?.projectName);
+      const description  = requireStr(data?.description, 10000);
+      const company      = optStr(data?.company);
+      const deadline     = optStr(data?.deadline);
+      const taskId       = data?.taskId;
+      if (!isUuid(taskId)) throw new Error('Invalid taskId');
+
+      subject = `New Request: ${esc(serviceType)} — ${esc(clientName)}`;
       html = `
         <h2>New Request Received</h2>
-        <p><strong>From:</strong> ${data.clientName} (${data.clientEmail})</p>
-        <p><strong>Company:</strong> ${data.company || '—'}</p>
-        <p><strong>Service:</strong> ${data.serviceType}</p>
-        <p><strong>Project:</strong> ${data.projectName}</p>
-        ${data.deadline ? `<p><strong>Deadline:</strong> ${data.deadline}</p>` : ''}
+        <p><strong>From:</strong> ${esc(clientName)} (${esc(clientEmail)})</p>
+        <p><strong>Company:</strong> ${esc(company) || '—'}</p>
+        <p><strong>Service:</strong> ${esc(serviceType)}</p>
+        <p><strong>Project:</strong> ${esc(projectName)}</p>
+        ${deadline ? `<p><strong>Deadline:</strong> ${esc(deadline)}</p>` : ''}
         <hr />
         <p><strong>Description:</strong></p>
-        <p>${data.description}</p>
+        <p>${escMultiline(description)}</p>
         <br />
-        <a href="https://portal.fourgebranding.com/tasks/${data.taskId}" style="background:#F5A523;color:#1a1a1a;padding:10px 20px;border-radius:6px;text-decoration:none;font-weight:600;">View Job</a>
+        <a href="https://portal.fourgebranding.com/tasks/${esc(taskId)}" style="background:#F5A523;color:#1a1a1a;padding:10px 20px;border-radius:6px;text-decoration:none;font-weight:600;">View Job</a>
       `;
     }
 
     else if (type === 'sent_to_client') {
-      subject = `Your ${data.serviceType} is ready for review!`;
+      const serviceType      = requireStr(data?.serviceType);
+      const clientFirstName  = requireStr(data?.clientFirstName);
+      const projectName      = requireStr(data?.projectName);
+      const message          = optStr(data?.message, 5000);
+      const taskId           = data?.taskId;
+      if (!isUuid(taskId)) throw new Error('Invalid taskId');
+
+      subject = `Your ${esc(serviceType)} is ready for review!`;
       html = `
-        <h2>Hi ${data.clientFirstName},</h2>
-        <p>Your <strong>${data.serviceType}</strong> for <strong>${data.projectName}</strong> is ready for review.</p>
-        ${data.message ? `<p>${data.message}</p>` : ''}
+        <h2>Hi ${esc(clientFirstName)},</h2>
+        <p>Your <strong>${esc(serviceType)}</strong> for <strong>${esc(projectName)}</strong> is ready for review.</p>
+        ${message ? `<p>${escMultiline(message)}</p>` : ''}
         <p>Please log in to the portal to review and approve or request changes.</p>
         <br />
-        <a href="https://portal.fourgebranding.com/my-requests/${data.taskId}" style="background:#F5A523;color:#1a1a1a;padding:10px 20px;border-radius:6px;text-decoration:none;font-weight:600;">Review Your Work</a>
+        <a href="https://portal.fourgebranding.com/my-requests/${esc(taskId)}" style="background:#F5A523;color:#1a1a1a;padding:10px 20px;border-radius:6px;text-decoration:none;font-weight:600;">Review Your Work</a>
         <br /><br />
         <p style="color:#666;font-size:13px;">— The Fourge Branding Team</p>
       `;
     }
 
     else if (type === 'revision_submitted') {
-      subject = `Revision Request: ${data.serviceType} — ${data.clientName}`;
+      const serviceType  = requireStr(data?.serviceType);
+      const clientName   = requireStr(data?.clientName);
+      const projectName  = requireStr(data?.projectName);
+      const version      = requireStr(data?.version);
+      const description  = requireStr(data?.description, 10000);
+      const deadline     = optStr(data?.deadline);
+      const taskId       = data?.taskId;
+      if (!isUuid(taskId)) throw new Error('Invalid taskId');
+
+      subject = `Revision Request: ${esc(serviceType)} — ${esc(clientName)}`;
       html = `
         <h2>Revision Requested</h2>
-        <p><strong>From:</strong> ${data.clientName}</p>
-        <p><strong>Job:</strong> ${data.serviceType} — ${data.projectName}</p>
-        <p><strong>New Version:</strong> ${data.version}</p>
-        ${data.deadline ? `<p><strong>New Deadline:</strong> ${data.deadline}</p>` : ''}
+        <p><strong>From:</strong> ${esc(clientName)}</p>
+        <p><strong>Job:</strong> ${esc(serviceType)} — ${esc(projectName)}</p>
+        <p><strong>New Version:</strong> ${esc(version)}</p>
+        ${deadline ? `<p><strong>New Deadline:</strong> ${esc(deadline)}</p>` : ''}
         <hr />
         <p><strong>Requested changes:</strong></p>
-        <p>${data.description}</p>
+        <p>${escMultiline(description)}</p>
         <br />
-        <a href="https://portal.fourgebranding.com/tasks/${data.taskId}" style="background:#F5A523;color:#1a1a1a;padding:10px 20px;border-radius:6px;text-decoration:none;font-weight:600;">View Job</a>
+        <a href="https://portal.fourgebranding.com/tasks/${esc(taskId)}" style="background:#F5A523;color:#1a1a1a;padding:10px 20px;border-radius:6px;text-decoration:none;font-weight:600;">View Job</a>
       `;
     }
 
     else if (type === 'client_approved') {
-      subject = `Approved! ${data.serviceType} — ${data.clientName}`;
+      const serviceType  = requireStr(data?.serviceType);
+      const clientName   = requireStr(data?.clientName);
+      const projectName  = requireStr(data?.projectName);
+      const taskId       = data?.taskId;
+      if (!isUuid(taskId)) throw new Error('Invalid taskId');
+
+      subject = `Approved! ${esc(serviceType)} — ${esc(clientName)}`;
       html = `
         <h2>Job Approved ✓</h2>
-        <p><strong>${data.clientName}</strong> has approved <strong>${data.serviceType}</strong> for <strong>${data.projectName}</strong>.</p>
+        <p><strong>${esc(clientName)}</strong> has approved <strong>${esc(serviceType)}</strong> for <strong>${esc(projectName)}</strong>.</p>
         <p>This job is now complete.</p>
         <br />
-        <a href="https://portal.fourgebranding.com/tasks/${data.taskId}" style="background:#F5A523;color:#1a1a1a;padding:10px 20px;border-radius:6px;text-decoration:none;font-weight:600;">View Job</a>
+        <a href="https://portal.fourgebranding.com/tasks/${esc(taskId)}" style="background:#F5A523;color:#1a1a1a;padding:10px 20px;border-radius:6px;text-decoration:none;font-weight:600;">View Job</a>
       `;
     }
 
+    else if (type === 'invoice_sent') {
+      const invoiceNumber = requireStr(data?.invoiceNumber);
+      const billTo        = requireStr(data?.billTo);
+      const total         = requireStr(data?.total);
+      const dueDate       = requireStr(data?.dueDate);
+      const payUrl        = requireStr(data?.payUrl);
+      const notes         = optStr(data?.notes, 2000);
+
+      subject = `Invoice ${esc(invoiceNumber)} from Fourge Branding — ${esc(total)} due ${esc(dueDate)}`;
+      html = `
+        <div style="font-family:sans-serif;max-width:520px;margin:0 auto;color:#1a1a1a;">
+          <div style="background:#141414;padding:20px 28px;border-radius:8px 8px 0 0;">
+            <img src="https://portal.fourgebranding.com/fourge-logo.png" alt="Fourge Branding" style="height:28px;" />
+          </div>
+          <div style="background:#fff;padding:28px;border:1px solid #e5e7eb;border-top:none;border-radius:0 0 8px 8px;">
+            <h2 style="margin:0 0 8px;font-size:20px;">Hi ${esc(billTo)},</h2>
+            <p style="color:#555;margin:0 0 24px;">Please find your invoice from Fourge Branding below.</p>
+
+            <table style="width:100%;border-collapse:collapse;margin-bottom:24px;">
+              <tr style="background:#f9f9f9;">
+                <td style="padding:10px 14px;font-size:13px;color:#666;">Invoice #</td>
+                <td style="padding:10px 14px;font-size:13px;font-weight:700;text-align:right;">${esc(invoiceNumber)}</td>
+              </tr>
+              <tr>
+                <td style="padding:10px 14px;font-size:13px;color:#666;">Amount Due</td>
+                <td style="padding:10px 14px;font-size:18px;font-weight:700;color:#141414;text-align:right;">${esc(total)}</td>
+              </tr>
+              <tr style="background:#f9f9f9;">
+                <td style="padding:10px 14px;font-size:13px;color:#666;">Due Date</td>
+                <td style="padding:10px 14px;font-size:13px;font-weight:600;text-align:right;">${esc(dueDate)}</td>
+              </tr>
+            </table>
+
+            ${notes ? `<p style="background:#f9f9f9;padding:12px 14px;border-radius:6px;font-size:13px;color:#555;margin-bottom:24px;">${escMultiline(notes)}</p>` : ''}
+
+            <a href="${esc(payUrl)}" style="display:block;background:#141414;color:#fff;text-align:center;padding:14px;border-radius:8px;text-decoration:none;font-weight:700;font-size:16px;margin-bottom:20px;">Pay Now — ${esc(total)}</a>
+
+            <p style="font-size:12px;color:#999;text-align:center;margin:0;">
+              Secured by Stripe · Charged in USD<br/>
+              Questions? <a href="mailto:hello@fourgebranding.com" style="color:#555;">hello@fourgebranding.com</a>
+            </p>
+          </div>
+        </div>
+      `;
+    }
+
+    else if (type === 'receipt_sent') {
+      const invoiceNumber = requireStr(data?.invoiceNumber);
+      const billTo        = requireStr(data?.billTo);
+      const total         = requireStr(data?.total);
+      const paidDate      = requireStr(data?.paidDate);
+
+      subject = `Payment Receipt — ${esc(invoiceNumber)} — Thank you!`;
+      html = `
+        <div style="font-family:sans-serif;max-width:520px;margin:0 auto;color:#1a1a1a;">
+          <div style="background:#141414;padding:20px 28px;border-radius:8px 8px 0 0;">
+            <img src="https://portal.fourgebranding.com/fourge-logo.png" alt="Fourge Branding" style="height:28px;" />
+          </div>
+          <div style="background:#fff;padding:28px;border:1px solid #e5e7eb;border-top:none;border-radius:0 0 8px 8px;">
+            <div style="text-align:center;margin-bottom:20px;">
+              <div style="display:inline-block;background:#16a34a;color:#fff;font-weight:700;font-size:13px;padding:6px 16px;border-radius:20px;letter-spacing:0.5px;">✓ PAYMENT RECEIVED</div>
+            </div>
+            <h2 style="margin:0 0 8px;font-size:20px;">Hi ${esc(billTo)},</h2>
+            <p style="color:#555;margin:0 0 24px;">Thank you — your payment has been received. Here's your receipt.</p>
+
+            <table style="width:100%;border-collapse:collapse;margin-bottom:24px;">
+              <tr style="background:#f9f9f9;">
+                <td style="padding:10px 14px;font-size:13px;color:#666;">Invoice #</td>
+                <td style="padding:10px 14px;font-size:13px;font-weight:700;text-align:right;">${esc(invoiceNumber)}</td>
+              </tr>
+              <tr>
+                <td style="padding:10px 14px;font-size:13px;color:#666;">Amount Paid</td>
+                <td style="padding:10px 14px;font-size:18px;font-weight:700;color:#16a34a;text-align:right;">${esc(total)}</td>
+              </tr>
+              <tr style="background:#f9f9f9;">
+                <td style="padding:10px 14px;font-size:13px;color:#666;">Payment Date</td>
+                <td style="padding:10px 14px;font-size:13px;font-weight:600;text-align:right;">${esc(paidDate)}</td>
+              </tr>
+            </table>
+
+            <p style="font-size:12px;color:#999;text-align:center;margin:0;">
+              Questions? <a href="mailto:hello@fourgebranding.com" style="color:#555;">hello@fourgebranding.com</a>
+            </p>
+          </div>
+        </div>
+      `;
+    }
+
+    else if (type === 'subcontractor_po_sent') {
+      const poNumber          = requireStr(data?.poNumber);
+      const subcontractorName = requireStr(data?.subcontractorName);
+      const projectName       = requireStr(data?.projectName);
+      const companyName       = requireStr(data?.companyName);
+      const amount            = requireStr(data?.amount);
+      const dueDate           = requireStr(data?.dueDate);
+      const terms             = requireStr(data?.terms);
+      const scope             = requireStr(data?.scope, 10000);
+      const portalUrl         = requireStr(data?.portalUrl);
+
+      subject = `Purchase Order ${esc(poNumber)} from Fourge Branding — ${esc(amount)}`;
+      html = `
+        <div style="font-family:sans-serif;max-width:560px;margin:0 auto;color:#1a1a1a;">
+          <div style="background:#141414;padding:20px 28px;border-radius:8px 8px 0 0;">
+            <img src="https://portal.fourgebranding.com/fourge-logo.png" alt="Fourge Branding" style="height:28px;" />
+          </div>
+          <div style="background:#fff;padding:28px;border:1px solid #e5e7eb;border-top:none;border-radius:0 0 8px 8px;">
+            <h2 style="margin:0 0 8px;font-size:20px;">Hi ${esc(subcontractorName)},</h2>
+            <p style="color:#555;margin:0 0 24px;">A subcontractor purchase order is ready for your review.</p>
+
+            <table style="width:100%;border-collapse:collapse;margin-bottom:24px;">
+              <tr style="background:#f9f9f9;">
+                <td style="padding:10px 14px;font-size:13px;color:#666;">PO #</td>
+                <td style="padding:10px 14px;font-size:13px;font-weight:700;text-align:right;">${esc(poNumber)}</td>
+              </tr>
+              <tr>
+                <td style="padding:10px 14px;font-size:13px;color:#666;">Project</td>
+                <td style="padding:10px 14px;font-size:13px;font-weight:700;text-align:right;">${esc(projectName)}</td>
+              </tr>
+              <tr style="background:#f9f9f9;">
+                <td style="padding:10px 14px;font-size:13px;color:#666;">Company</td>
+                <td style="padding:10px 14px;font-size:13px;font-weight:700;text-align:right;">${esc(companyName)}</td>
+              </tr>
+              <tr>
+                <td style="padding:10px 14px;font-size:13px;color:#666;">Amount</td>
+                <td style="padding:10px 14px;font-size:18px;font-weight:700;color:#141414;text-align:right;">${esc(amount)}</td>
+              </tr>
+              <tr style="background:#f9f9f9;">
+                <td style="padding:10px 14px;font-size:13px;color:#666;">Due</td>
+                <td style="padding:10px 14px;font-size:13px;font-weight:600;text-align:right;">${esc(dueDate)}</td>
+              </tr>
+              <tr>
+                <td style="padding:10px 14px;font-size:13px;color:#666;">Terms</td>
+                <td style="padding:10px 14px;font-size:13px;font-weight:600;text-align:right;">${esc(terms)}</td>
+              </tr>
+            </table>
+
+            <div style="background:#f9f9f9;padding:12px 14px;border-radius:6px;font-size:13px;color:#555;margin-bottom:24px;">
+              <strong>Scope</strong><br />
+              ${escMultiline(scope)}
+            </div>
+
+            <a href="${esc(portalUrl)}" style="display:block;background:#141414;color:#fff;text-align:center;padding:14px;border-radius:8px;text-decoration:none;font-weight:700;font-size:16px;margin-bottom:20px;">Review and Approve PO</a>
+
+            <p style="font-size:12px;color:#999;text-align:center;margin:0;">
+              Questions? <a href="mailto:hello@fourgebranding.com" style="color:#555;">hello@fourgebranding.com</a>
+            </p>
+          </div>
+        </div>
+      `;
+    }
+
+    // ── 5. Resolve recipients ────────────────────────────────────────────────
+    const teamTypes = ['new_request', 'revision_submitted', 'client_approved'];
+    let recipients: string[];
+    let cc: string[] | undefined;
+
+    if (teamTypes.includes(type)) {
+      recipients = TEAM_EMAILS;
+    } else {
+      // Validate caller-supplied recipient list
+      const toList = Array.isArray(to) ? to : [to];
+      recipients = [...new Set(toList.map(val => typeof val === 'string' ? val.trim() : val).filter(isEmail))];
+      if (recipients.length === 0) throw new Error('No valid recipient emails');
+      if (recipients.length > 20) throw new Error('Too many recipients');
+
+      const senderEmail = optStr(data?.senderEmail);
+      if (senderEmail && isEmail(senderEmail)) cc = [senderEmail];
+      if (type === 'invoice_sent') {
+        cc = [...new Set([...(cc || []), 'hello@fourgebranding.com'])];
+      }
+    }
+
+    // ── 6. Send via Resend ───────────────────────────────────────────────────
+    const payload: Record<string, unknown> = { from: FROM, to: recipients, subject, html };
+    if (cc) payload.cc = cc;
+    if (safeAttachments.length) payload.attachments = safeAttachments;
+
     const res = await fetch('https://api.resend.com/emails', {
       method: 'POST',
       headers: {
         'Authorization': `Bearer ${RESEND_API_KEY}`,
         'Content-Type': 'application/json',
       },
-      body: JSON.stringify({ from: FROM, to, subject, html }),
+      body: JSON.stringify(payload),
     });
 
-    const result = await res.json();
+    const result = await parseJsonSafe(res);
+    if (!res.ok) {
+      const message =
+        (result && typeof result === 'object' && 'message' in result && typeof result.message === 'string' && result.message)
+        || (result && typeof result === 'object' && 'error' in result && typeof result.error === 'string' && result.error)
+        || `Resend request failed with status ${res.status}`;
+      console.error('Resend API error:', { status: res.status, result });
+      return respond({ error: message, resend_status: res.status, resend_body: result }, 400);
+    }
 
-    return new Response(JSON.stringify(result), {
-      headers: { ...corsHeaders, 'Content-Type': 'application/json' },
-      status: res.ok ? 200 : 400,
-    });
+    return respond(result, 200);
 
   } catch (err) {
-    return new Response(JSON.stringify({ error: err.message }), {
-      headers: { ...corsHeaders, 'Content-Type': 'application/json' },
-      status: 500,
-    });
+    console.error('send-email failed:', err);
+    return respond({ error: (err as Error).message }, 500);
   }
 });
diff --git a/supabase/functions/stripe-webhook/index.ts b/supabase/functions/stripe-webhook/index.ts
index af46bc2..646efed 100644
--- a/supabase/functions/stripe-webhook/index.ts
+++ b/supabase/functions/stripe-webhook/index.ts
@@ -17,38 +17,52 @@ serve(async (req) => {
     return new Response(`Webhook Error: ${err.message}`, { status: 400 });
   }
 
+  const supabase = createClient(
+    Deno.env.get('SUPABASE_URL')!,
+    Deno.env.get('SUPABASE_SERVICE_ROLE_KEY')!,
+  );
+
+  // Helper: retrieve fee from a payment intent and mark invoice paid
+  async function markPaid(paymentIntentId: string, invoice_id: string) {
+    let stripe_fee: number | null = null;
+    try {
+      const pi = await stripe.paymentIntents.retrieve(paymentIntentId, {
+        expand: ['latest_charge.balance_transaction'],
+      });
+      const charge = pi.latest_charge as Stripe.Charge | null;
+      const balanceTx = charge?.balance_transaction as Stripe.BalanceTransaction | null;
+      if (balanceTx?.fee != null) stripe_fee = balanceTx.fee / 100;
+    } catch (err) {
+      console.error('Failed to retrieve Stripe fee:', err.message);
+    }
+
+    const updateData: Record<string, unknown> = {
+      status: 'paid',
+      paid_at: new Date().toISOString(),
+    };
+    if (stripe_fee !== null) updateData.stripe_fee = stripe_fee;
+    await supabase.from('invoices').update(updateData).eq('id', invoice_id);
+  }
+
+  // Card payments: session completes with payment_status = 'paid' immediately
   if (event.type === 'checkout.session.completed') {
     const session = event.data.object as Stripe.Checkout.Session;
     const invoice_id = session.metadata?.invoice_id;
+    const paymentIntentId = session.payment_intent as string | null;
 
+    // Only mark paid here for instant payment methods (card).
+    // ACH sessions complete with payment_status 'unpaid' — let payment_intent.succeeded handle those.
+    if (invoice_id && paymentIntentId && session.payment_status === 'paid') {
+      await markPaid(paymentIntentId, invoice_id);
+    }
+  }
+
+  // ACH / async payment methods: payment_intent.succeeded fires when money actually settles
+  if (event.type === 'payment_intent.succeeded') {
+    const pi = event.data.object as Stripe.PaymentIntent;
+    const invoice_id = pi.metadata?.invoice_id;
     if (invoice_id) {
-      const supabase = createClient(
-        Deno.env.get('SUPABASE_URL')!,
-        Deno.env.get('SUPABASE_SERVICE_ROLE_KEY')!,
-      );
-
-      // Retrieve the Stripe processing fee from the balance transaction
-      let stripe_fee: number | null = null;
-      try {
-        const paymentIntentId = session.payment_intent as string;
-        if (paymentIntentId) {
-          const paymentIntent = await stripe.paymentIntents.retrieve(paymentIntentId, {
-            expand: ['latest_charge.balance_transaction'],
-          });
-          const charge = paymentIntent.latest_charge as Stripe.Charge | null;
-          const balanceTx = charge?.balance_transaction as Stripe.BalanceTransaction | null;
-          if (balanceTx?.fee != null) {
-            stripe_fee = balanceTx.fee / 100;
-          }
-        }
-      } catch (err) {
-        console.error('Failed to retrieve Stripe fee:', err.message);
-      }
-
-      const updateData: Record<string, unknown> = { status: 'paid' };
-      if (stripe_fee !== null) updateData.stripe_fee = stripe_fee;
-
-      await supabase.from('invoices').update(updateData).eq('id', invoice_id);
+      await markPaid(pi.id, invoice_id);
     }
   }
 
diff --git a/supabase/migrations/20260407173000_add_database_size_rpc.sql b/supabase/migrations/20260407173000_add_database_size_rpc.sql
new file mode 100644
index 0000000..84e4a74
--- /dev/null
+++ b/supabase/migrations/20260407173000_add_database_size_rpc.sql
@@ -0,0 +1,12 @@
+create or replace function public.get_database_size_bytes()
+returns bigint
+language sql
+security definer
+set search_path = public
+as $$
+  select pg_database_size(current_database());
+$$;
+
+revoke all on function public.get_database_size_bytes() from public;
+grant execute on function public.get_database_size_bytes() to authenticated;
+grant execute on function public.get_database_size_bytes() to service_role;
diff --git a/supabase/migrations/20260407180500_add_server_status_overrides.sql b/supabase/migrations/20260407180500_add_server_status_overrides.sql
new file mode 100644
index 0000000..019807e
--- /dev/null
+++ b/supabase/migrations/20260407180500_add_server_status_overrides.sql
@@ -0,0 +1,22 @@
+create table if not exists public.server_status_overrides (
+  id boolean primary key default true,
+  supabase_egress_bytes bigint,
+  vercel_fast_data_transfer_bytes bigint,
+  vercel_edge_requests bigint,
+  vercel_function_invocations bigint,
+  vercel_active_cpu_hours numeric(10,4),
+  updated_at timestamptz not null default now()
+);
+
+alter table public.server_status_overrides enable row level security;
+
+drop policy if exists "Team all server_status_overrides" on public.server_status_overrides;
+create policy "Team all server_status_overrides"
+  on public.server_status_overrides
+  for all
+  using (get_my_role() = 'team')
+  with check (get_my_role() = 'team');
+
+insert into public.server_status_overrides (id)
+values (true)
+on conflict (id) do nothing;
diff --git a/supabase/migrations/20260408025500_normalize_submission_versions.sql b/supabase/migrations/20260408025500_normalize_submission_versions.sql
new file mode 100644
index 0000000..c34c233
--- /dev/null
+++ b/supabase/migrations/20260408025500_normalize_submission_versions.sql
@@ -0,0 +1,24 @@
+with affected_tasks as (
+  select s.task_id
+  from public.submissions s
+  group by s.task_id
+  having min(s.version_number) filter (where s.type <> 'amendment') = 1
+     and count(*) filter (where s.type <> 'amendment' and s.version_number = 0) = 0
+)
+update public.submissions s
+set version_number = s.version_number - 1
+from affected_tasks a
+where s.task_id = a.task_id;
+
+with corrected_versions as (
+  select
+    s.task_id,
+    coalesce(max(s.version_number) filter (where s.type <> 'amendment'), 0) as corrected_current_version
+  from public.submissions s
+  group by s.task_id
+)
+update public.tasks t
+set current_version = cv.corrected_current_version
+from corrected_versions cv
+where t.id = cv.task_id
+  and t.current_version is distinct from cv.corrected_current_version;
diff --git a/supabase/migrations/20260408130000_normalize_invalid_submission_service_types.sql b/supabase/migrations/20260408130000_normalize_invalid_submission_service_types.sql
new file mode 100644
index 0000000..c2e7da0
--- /dev/null
+++ b/supabase/migrations/20260408130000_normalize_invalid_submission_service_types.sql
@@ -0,0 +1,14 @@
+update public.submissions
+set service_type = 'Other'
+where coalesce(service_type, '') not in (
+  'Logo Design',
+  'Brand Identity',
+  'Brand Guidelines',
+  'Brand Book',
+  'Social Media Graphics',
+  'Print Design',
+  'Business Cards',
+  'Packaging Design',
+  'Web Design',
+  'Other'
+);
diff --git a/supabase/migrations/20260408140000_add_bill_to_invoices.sql b/supabase/migrations/20260408140000_add_bill_to_invoices.sql
new file mode 100644
index 0000000..945ce0e
--- /dev/null
+++ b/supabase/migrations/20260408140000_add_bill_to_invoices.sql
@@ -0,0 +1 @@
+alter table public.invoices add column if not exists bill_to text;
diff --git a/supabase/migrations/20260409110000_add_fourge_files_bucket.sql b/supabase/migrations/20260409110000_add_fourge_files_bucket.sql
new file mode 100644
index 0000000..da2475a
--- /dev/null
+++ b/supabase/migrations/20260409110000_add_fourge_files_bucket.sql
@@ -0,0 +1,17 @@
+insert into storage.buckets (id, name, public)
+select 'fourge-files', 'fourge-files', false
+where not exists (
+  select 1 from storage.buckets where id = 'fourge-files'
+);
+
+create policy "Team reads fourge files storage" on storage.objects
+  for select to authenticated
+  using (bucket_id = 'fourge-files' and get_my_role() = 'team');
+
+create policy "Team inserts fourge files storage" on storage.objects
+  for insert to authenticated
+  with check (bucket_id = 'fourge-files' and get_my_role() = 'team');
+
+create policy "Team deletes fourge files storage" on storage.objects
+  for delete to authenticated
+  using (bucket_id = 'fourge-files' and get_my_role() = 'team');
diff --git a/supabase/migrations/add_external_role.sql b/supabase/migrations/20260409120000_add_external_role.sql
similarity index 78%
rename from supabase/migrations/add_external_role.sql
rename to supabase/migrations/20260409120000_add_external_role.sql
index 2892adb..be674ad 100644
--- a/supabase/migrations/add_external_role.sql
+++ b/supabase/migrations/20260409120000_add_external_role.sql
@@ -1,9 +1,3 @@
--- ============================================================
--- Migration: Add external role and project_members table
--- Run this in Supabase → SQL Editor → Run
--- ============================================================
-
--- 1. Update profiles.role check constraint to include 'external'
 do $$
 declare
   cname text;
@@ -13,7 +7,8 @@ begin
   where table_schema = 'public'
     and table_name = 'profiles'
     and constraint_type = 'CHECK'
-    and constraint_name ilike '%role%';
+    and constraint_name = 'profiles_role_check';
+
   if cname is not null then
     execute 'alter table public.profiles drop constraint ' || quote_ident(cname);
   end if;
@@ -23,48 +18,51 @@ $$;
 alter table public.profiles
   add constraint profiles_role_check check (role in ('team', 'client', 'external'));
 
--- 2. project_members table
-create table public.project_members (
+create table if not exists public.project_members (
   id uuid default gen_random_uuid() primary key,
   project_id uuid references public.projects(id) on delete cascade not null,
   profile_id uuid references public.profiles(id) on delete cascade not null,
   created_at timestamptz default now() not null,
   unique(project_id, profile_id)
 );
+
 alter table public.project_members enable row level security;
 
--- 3. Helper function
 create or replace function public.is_external()
 returns boolean as $$
   select get_my_role() = 'external';
 $$ language sql security definer stable;
 
--- 4. RLS: project_members
+drop policy if exists "Team all project_members" on public.project_members;
 create policy "Team all project_members" on public.project_members
   for all using (get_my_role() = 'team');
+
+drop policy if exists "External reads own memberships" on public.project_members;
 create policy "External reads own memberships" on public.project_members
   for select using (profile_id = auth.uid());
 
--- 5. RLS: projects (external reads assigned only)
+drop policy if exists "External reads assigned projects" on public.projects;
 create policy "External reads assigned projects" on public.projects
   for select using (
     get_my_role() = 'external' and
     id in (select project_id from public.project_members where profile_id = auth.uid())
   );
 
--- 6. RLS: tasks (external reads + updates assigned projects)
+drop policy if exists "External reads assigned tasks" on public.tasks;
 create policy "External reads assigned tasks" on public.tasks
   for select using (
     get_my_role() = 'external' and
     project_id in (select project_id from public.project_members where profile_id = auth.uid())
   );
+
+drop policy if exists "External updates assigned tasks" on public.tasks;
 create policy "External updates assigned tasks" on public.tasks
   for update using (
     get_my_role() = 'external' and
     project_id in (select project_id from public.project_members where profile_id = auth.uid())
   );
 
--- 7. RLS: submissions
+drop policy if exists "External reads assigned submissions" on public.submissions;
 create policy "External reads assigned submissions" on public.submissions
   for select using (
     get_my_role() = 'external' and
@@ -74,12 +72,14 @@ create policy "External reads assigned submissions" on public.submissions
       where pm.profile_id = auth.uid()
     )
   );
+
+drop policy if exists "External inserts submissions" on public.submissions;
 create policy "External inserts submissions" on public.submissions
   for insert with check (
     get_my_role() = 'external' and submitted_by = auth.uid()
   );
 
--- 8. RLS: submission_files
+drop policy if exists "External reads assigned submission_files" on public.submission_files;
 create policy "External reads assigned submission_files" on public.submission_files
   for select using (
     get_my_role() = 'external' and
@@ -90,10 +90,12 @@ create policy "External reads assigned submission_files" on public.submission_fi
       where pm.profile_id = auth.uid()
     )
   );
+
+drop policy if exists "External inserts submission_files" on public.submission_files;
 create policy "External inserts submission_files" on public.submission_files
   for insert with check (get_my_role() = 'external');
 
--- 9. RLS: deliveries (read only)
+drop policy if exists "External reads assigned deliveries" on public.deliveries;
 create policy "External reads assigned deliveries" on public.deliveries
   for select using (
     get_my_role() = 'external' and
@@ -105,7 +107,7 @@ create policy "External reads assigned deliveries" on public.deliveries
     )
   );
 
--- 10. RLS: delivery_files (read only)
+drop policy if exists "External reads assigned delivery_files" on public.delivery_files;
 create policy "External reads assigned delivery_files" on public.delivery_files
   for select using (
     get_my_role() = 'external' and
@@ -117,7 +119,3 @@ create policy "External reads assigned delivery_files" on public.delivery_files
       where pm.profile_id = auth.uid()
     )
   );
-
--- 11. RLS: profiles (external reads own profile only — already covered by existing policy)
--- "Own profile select" policy already handles this with: id = auth.uid()
--- No additional policy needed.
diff --git a/supabase/migrations/20260409120100_add_revision_billing.sql b/supabase/migrations/20260409120100_add_revision_billing.sql
new file mode 100644
index 0000000..9d07bd5
--- /dev/null
+++ b/supabase/migrations/20260409120100_add_revision_billing.sql
@@ -0,0 +1,23 @@
+alter table public.submissions
+  add column if not exists revision_type text;
+
+do $$
+begin
+  if not exists (
+    select 1
+    from pg_constraint
+    where conname = 'submissions_revision_type_check'
+      and conrelid = 'public.submissions'::regclass
+  ) then
+    alter table public.submissions
+      add constraint submissions_revision_type_check
+      check (revision_type in ('fourge_error', 'client_revision'));
+  end if;
+end;
+$$;
+
+alter table public.submissions
+  add column if not exists invoiced boolean not null default false;
+
+alter table public.invoice_items
+  add column if not exists submission_id uuid references public.submissions(id) on delete set null;
diff --git a/supabase/migrations/20260409120200_fix_submission_files_insert.sql b/supabase/migrations/20260409120200_fix_submission_files_insert.sql
new file mode 100644
index 0000000..5f6ce7e
--- /dev/null
+++ b/supabase/migrations/20260409120200_fix_submission_files_insert.sql
@@ -0,0 +1,28 @@
+drop policy if exists "Client inserts submission_files" on public.submission_files;
+drop policy if exists "External inserts submission_files" on public.submission_files;
+
+create policy "Client inserts submission_files" on public.submission_files
+  for insert with check (
+    get_my_role() = 'client'
+    and submission_id in (
+      select s.id
+      from public.submissions s
+      join public.tasks t on t.id = s.task_id
+      join public.projects p on p.id = t.project_id
+      where p.company_id = get_my_company_id()
+        and s.submitted_by = auth.uid()
+    )
+  );
+
+create policy "External inserts submission_files" on public.submission_files
+  for insert with check (
+    get_my_role() = 'external'
+    and submission_id in (
+      select s.id
+      from public.submissions s
+      join public.tasks t on t.id = s.task_id
+      join public.project_members pm on pm.project_id = t.project_id
+      where pm.profile_id = auth.uid()
+        and s.submitted_by = auth.uid()
+    )
+  );
diff --git a/supabase/migrations/20260409120300_restrict_profile_self_update.sql b/supabase/migrations/20260409120300_restrict_profile_self_update.sql
new file mode 100644
index 0000000..8edf001
--- /dev/null
+++ b/supabase/migrations/20260409120300_restrict_profile_self_update.sql
@@ -0,0 +1,10 @@
+drop policy if exists "Own profile update" on public.profiles;
+
+create policy "Own profile update" on public.profiles
+  for update
+  using (id = auth.uid())
+  with check (
+    id = auth.uid()
+    and role = (select role from public.profiles where id = auth.uid())
+    and company_id is not distinct from (select company_id from public.profiles where id = auth.uid())
+  );
diff --git a/supabase/migrations/20260409120400_tighten_storage_policies.sql b/supabase/migrations/20260409120400_tighten_storage_policies.sql
new file mode 100644
index 0000000..94c8e3c
--- /dev/null
+++ b/supabase/migrations/20260409120400_tighten_storage_policies.sql
@@ -0,0 +1,118 @@
+drop policy if exists "Auth users upload to submissions" on storage.objects;
+drop policy if exists "Auth users read submissions" on storage.objects;
+drop policy if exists "Team upload deliveries" on storage.objects;
+drop policy if exists "Auth users read deliveries" on storage.objects;
+
+drop policy if exists "Team reads submissions storage" on storage.objects;
+create policy "Team reads submissions storage" on storage.objects
+  for select to authenticated
+  using (bucket_id = 'submissions' and get_my_role() = 'team');
+
+drop policy if exists "Client reads submissions storage" on storage.objects;
+create policy "Client reads submissions storage" on storage.objects
+  for select to authenticated
+  using (
+    bucket_id = 'submissions'
+    and get_my_role() = 'client'
+    and split_part(name, '/', 1) in (
+      select t.id::text
+      from public.tasks t
+      join public.projects p on p.id = t.project_id
+      where p.company_id = get_my_company_id()
+    )
+  );
+
+drop policy if exists "External reads submissions storage" on storage.objects;
+create policy "External reads submissions storage" on storage.objects
+  for select to authenticated
+  using (
+    bucket_id = 'submissions'
+    and get_my_role() = 'external'
+    and split_part(name, '/', 1) in (
+      select t.id::text
+      from public.tasks t
+      join public.project_members pm on pm.project_id = t.project_id
+      where pm.profile_id = auth.uid()
+    )
+  );
+
+drop policy if exists "Team inserts submissions storage" on storage.objects;
+create policy "Team inserts submissions storage" on storage.objects
+  for insert to authenticated
+  with check (bucket_id = 'submissions' and get_my_role() = 'team');
+
+drop policy if exists "Client inserts submissions storage" on storage.objects;
+create policy "Client inserts submissions storage" on storage.objects
+  for insert to authenticated
+  with check (
+    bucket_id = 'submissions'
+    and get_my_role() = 'client'
+    and split_part(name, '/', 1) in (
+      select t.id::text
+      from public.tasks t
+      join public.projects p on p.id = t.project_id
+      where p.company_id = get_my_company_id()
+    )
+  );
+
+drop policy if exists "External inserts submissions storage" on storage.objects;
+create policy "External inserts submissions storage" on storage.objects
+  for insert to authenticated
+  with check (
+    bucket_id = 'submissions'
+    and get_my_role() = 'external'
+    and split_part(name, '/', 1) in (
+      select t.id::text
+      from public.tasks t
+      join public.project_members pm on pm.project_id = t.project_id
+      where pm.profile_id = auth.uid()
+    )
+  );
+
+drop policy if exists "Team deletes submissions storage" on storage.objects;
+create policy "Team deletes submissions storage" on storage.objects
+  for delete to authenticated
+  using (bucket_id = 'submissions' and get_my_role() = 'team');
+
+drop policy if exists "Team reads deliveries storage" on storage.objects;
+create policy "Team reads deliveries storage" on storage.objects
+  for select to authenticated
+  using (bucket_id = 'deliveries' and get_my_role() = 'team');
+
+drop policy if exists "Client reads deliveries storage" on storage.objects;
+create policy "Client reads deliveries storage" on storage.objects
+  for select to authenticated
+  using (
+    bucket_id = 'deliveries'
+    and get_my_role() = 'client'
+    and split_part(name, '/', 1) in (
+      select t.id::text
+      from public.tasks t
+      join public.projects p on p.id = t.project_id
+      where p.company_id = get_my_company_id()
+    )
+  );
+
+drop policy if exists "External reads deliveries storage" on storage.objects;
+create policy "External reads deliveries storage" on storage.objects
+  for select to authenticated
+  using (
+    bucket_id = 'deliveries'
+    and get_my_role() = 'external'
+    and split_part(name, '/', 1) in (
+      select t.id::text
+      from public.tasks t
+      join public.project_members pm on pm.project_id = t.project_id
+      where pm.profile_id = auth.uid()
+    )
+  );
+
+drop policy if exists "Team inserts deliveries storage" on storage.objects;
+create policy "Team inserts deliveries storage" on storage.objects
+  for insert to authenticated
+  with check (bucket_id = 'deliveries' and get_my_role() = 'team');
+
+drop policy if exists "Team deletes deliveries storage" on storage.objects;
+create policy "Team deletes deliveries storage" on storage.objects
+  for delete to authenticated
+  using (bucket_id = 'deliveries' and get_my_role() = 'team');
diff --git a/supabase/migrations/20260409120500_add_client_update_policies.sql b/supabase/migrations/20260409120500_add_client_update_policies.sql
new file mode 100644
index 0000000..1241767
--- /dev/null
+++ b/supabase/migrations/20260409120500_add_client_update_policies.sql
@@ -0,0 +1,11 @@
+drop policy if exists "Client updates own company" on public.companies;
+create policy "Client updates own company" on public.companies
+  for update
+  using (id = get_my_company_id())
+  with check (id = get_my_company_id());
+
+drop policy if exists "Client updates own company projects" on public.projects;
+create policy "Client updates own company projects" on public.projects
+  for update
+  using (company_id = get_my_company_id())
+  with check (company_id = get_my_company_id());
diff --git a/supabase/migrations/20260409124500_add_fourge_files_update_policy.sql b/supabase/migrations/20260409124500_add_fourge_files_update_policy.sql
new file mode 100644
index 0000000..2c9d2ab
--- /dev/null
+++ b/supabase/migrations/20260409124500_add_fourge_files_update_policy.sql
@@ -0,0 +1,4 @@
+create policy "Team updates fourge files storage" on storage.objects
+  for update to authenticated
+  using (bucket_id = 'fourge-files' and get_my_role() = 'team')
+  with check (bucket_id = 'fourge-files' and get_my_role() = 'team');
diff --git a/supabase/migrations/20260409133000_add_fourge_passwords.sql b/supabase/migrations/20260409133000_add_fourge_passwords.sql
new file mode 100644
index 0000000..1280661
--- /dev/null
+++ b/supabase/migrations/20260409133000_add_fourge_passwords.sql
@@ -0,0 +1,18 @@
+create table if not exists public.fourge_passwords (
+  id uuid default gen_random_uuid() primary key,
+  service_name text not null,
+  service_url text default '',
+  username text not null default '',
+  encrypted_password text not null,
+  password_iv text not null,
+  notes text default '',
+  created_by uuid references public.profiles(id) on delete set null,
+  created_at timestamptz not null default now(),
+  updated_at timestamptz not null default now()
+);
+
+alter table public.fourge_passwords enable row level security;
+
+create policy "Team all fourge_passwords" on public.fourge_passwords
+  for all using (get_my_role() = 'team')
+  with check (get_my_role() = 'team');
diff --git a/supabase/migrations/20260414180000_add_expenses.sql b/supabase/migrations/20260414180000_add_expenses.sql
new file mode 100644
index 0000000..662170f
--- /dev/null
+++ b/supabase/migrations/20260414180000_add_expenses.sql
@@ -0,0 +1,14 @@
+create table public.expenses (
+  id uuid default gen_random_uuid() primary key,
+  date date default current_date not null,
+  description text not null,
+  category text not null default 'Other',
+  amount numeric(10,2) not null,
+  notes text default '',
+  receipt_path text,
+  receipt_name text,
+  created_by uuid references public.profiles(id) on delete set null,
+  created_at timestamptz default now() not null
+);
+alter table public.expenses enable row level security;
+create policy "Team all expenses" on public.expenses for all using (get_my_role() = 'team');
diff --git a/supabase/migrations/20260414181000_add_paid_at_to_invoices.sql b/supabase/migrations/20260414181000_add_paid_at_to_invoices.sql
new file mode 100644
index 0000000..67f2938
--- /dev/null
+++ b/supabase/migrations/20260414181000_add_paid_at_to_invoices.sql
@@ -0,0 +1 @@
+alter table public.invoices add column if not exists paid_at timestamptz;
diff --git a/supabase/migrations/20260414182000_add_expense_receipt_columns.sql b/supabase/migrations/20260414182000_add_expense_receipt_columns.sql
new file mode 100644
index 0000000..0880c72
--- /dev/null
+++ b/supabase/migrations/20260414182000_add_expense_receipt_columns.sql
@@ -0,0 +1,2 @@
+alter table public.expenses add column if not exists receipt_path text;
+alter table public.expenses add column if not exists receipt_name text;
diff --git a/supabase/migrations/20260414193000_add_expense_receipts.sql b/supabase/migrations/20260414193000_add_expense_receipts.sql
new file mode 100644
index 0000000..2456981
--- /dev/null
+++ b/supabase/migrations/20260414193000_add_expense_receipts.sql
@@ -0,0 +1,22 @@
+alter table public.expenses
+  add column if not exists receipt_path text,
+  add column if not exists receipt_name text;
+
+insert into storage.buckets (id, name, public)
+values ('expense-receipts', 'expense-receipts', false)
+on conflict (id) do nothing;
+
+drop policy if exists "Team reads expense receipts storage" on storage.objects;
+drop policy if exists "Team inserts expense receipts storage" on storage.objects;
+drop policy if exists "Team updates expense receipts storage" on storage.objects;
+drop policy if exists "Team deletes expense receipts storage" on storage.objects;
+
+create policy "Team reads expense receipts storage" on storage.objects
+  for select to authenticated using (bucket_id = 'expense-receipts' and get_my_role() = 'team');
+create policy "Team inserts expense receipts storage" on storage.objects
+  for insert to authenticated with check (bucket_id = 'expense-receipts' and get_my_role() = 'team');
+create policy "Team updates expense receipts storage" on storage.objects
+  for update to authenticated using (bucket_id = 'expense-receipts' and get_my_role() = 'team')
+  with check (bucket_id = 'expense-receipts' and get_my_role() = 'team');
+create policy "Team deletes expense receipts storage" on storage.objects
+  for delete to authenticated using (bucket_id = 'expense-receipts' and get_my_role() = 'team');
diff --git a/supabase/migrations/20260420140000_add_company_memberships.sql b/supabase/migrations/20260420140000_add_company_memberships.sql
new file mode 100644
index 0000000..8d55e1e
--- /dev/null
+++ b/supabase/migrations/20260420140000_add_company_memberships.sql
@@ -0,0 +1,153 @@
+create table if not exists public.company_members (
+  id uuid default gen_random_uuid() primary key,
+  company_id uuid references public.companies(id) on delete cascade not null,
+  profile_id uuid references public.profiles(id) on delete cascade not null,
+  created_at timestamptz default now() not null,
+  unique(company_id, profile_id)
+);
+
+alter table public.company_members enable row level security;
+
+insert into public.company_members (company_id, profile_id)
+select company_id, id
+from public.profiles
+where company_id is not null
+on conflict (company_id, profile_id) do nothing;
+
+create or replace function public.has_company_access(company uuid)
+returns boolean as $$
+  select exists (
+    select 1
+    from public.profiles p
+    where p.id = auth.uid()
+      and (
+        p.company_id = company
+        or exists (
+          select 1
+          from public.company_members cm
+          where cm.profile_id = auth.uid()
+            and cm.company_id = company
+        )
+      )
+  );
+$$ language sql security definer stable;
+
+drop policy if exists "Team all company_members" on public.company_members;
+drop policy if exists "Users read own company memberships" on public.company_members;
+create policy "Team all company_members" on public.company_members
+  for all using (get_my_role() = 'team') with check (get_my_role() = 'team');
+create policy "Users read own company memberships" on public.company_members
+  for select using (profile_id = auth.uid());
+
+drop policy if exists "Client reads own company" on public.companies;
+drop policy if exists "Client updates own company" on public.companies;
+create policy "Client reads assigned companies" on public.companies
+  for select using (has_company_access(id));
+create policy "Client updates primary company" on public.companies
+  for update using (id = get_my_company_id()) with check (id = get_my_company_id());
+
+drop policy if exists "Client reads company projects" on public.projects;
+drop policy if exists "Client inserts company projects" on public.projects;
+drop policy if exists "Client updates own company projects" on public.projects;
+create policy "Client reads assigned company projects" on public.projects
+  for select using (has_company_access(company_id));
+create policy "Client inserts assigned company projects" on public.projects
+  for insert with check (get_my_role() = 'client' and has_company_access(company_id));
+create policy "Client updates assigned company projects" on public.projects
+  for update using (get_my_role() = 'client' and has_company_access(company_id))
+  with check (get_my_role() = 'client' and has_company_access(company_id));
+
+drop policy if exists "Client reads company tasks" on public.tasks;
+drop policy if exists "Client insert task" on public.tasks;
+drop policy if exists "Client updates company tasks" on public.tasks;
+create policy "Client reads assigned company tasks" on public.tasks for select using (
+  project_id in (select id from public.projects where has_company_access(company_id))
+);
+create policy "Client inserts assigned company tasks" on public.tasks for insert with check (
+  get_my_role() = 'client'
+  and project_id in (select id from public.projects where has_company_access(company_id))
+);
+create policy "Client updates assigned company tasks" on public.tasks
+  for update
+  using (
+    get_my_role() = 'client'
+    and project_id in (select id from public.projects where has_company_access(company_id))
+  )
+  with check (
+    get_my_role() = 'client'
+    and project_id in (select id from public.projects where has_company_access(company_id))
+  );
+
+drop policy if exists "Client reads company submissions" on public.submissions;
+drop policy if exists "Client inserts submissions" on public.submissions;
+create policy "Client reads assigned company submissions" on public.submissions for select using (
+  task_id in (
+    select t.id from public.tasks t
+    join public.projects p on p.id = t.project_id
+    where has_company_access(p.company_id)
+  )
+);
+create policy "Client inserts assigned company submissions" on public.submissions for insert with check (
+  get_my_role() = 'client'
+  and submitted_by = auth.uid()
+  and task_id in (
+    select t.id from public.tasks t
+    join public.projects p on p.id = t.project_id
+    where has_company_access(p.company_id)
+  )
+);
+
+drop policy if exists "Client reads company submission_files" on public.submission_files;
+drop policy if exists "Client inserts submission_files" on public.submission_files;
+create policy "Client reads assigned company submission_files" on public.submission_files for select using (
+  submission_id in (
+    select s.id from public.submissions s
+    join public.tasks t on t.id = s.task_id
+    join public.projects p on p.id = t.project_id
+    where has_company_access(p.company_id)
+  )
+);
+create policy "Client inserts assigned company submission_files" on public.submission_files for insert with check (
+  get_my_role() = 'client'
+  and submission_id in (
+    select s.id from public.submissions s
+    join public.tasks t on t.id = s.task_id
+    join public.projects p on p.id = t.project_id
+    where has_company_access(p.company_id)
+      and s.submitted_by = auth.uid()
+  )
+);
+
+drop policy if exists "Client reads company deliveries" on public.deliveries;
+create policy "Client reads assigned company deliveries" on public.deliveries for select using (
+  submission_id in (
+    select s.id from public.submissions s
+    join public.tasks t on t.id = s.task_id
+    join public.projects p on p.id = t.project_id
+    where has_company_access(p.company_id)
+  )
+);
+
+drop policy if exists "Client reads company delivery_files" on public.delivery_files;
+create policy "Client reads assigned company delivery_files" on public.delivery_files for select using (
+  delivery_id in (
+    select d.id from public.deliveries d
+    join public.submissions s on s.id = d.submission_id
+    join public.tasks t on t.id = s.task_id
+    join public.projects p on p.id = t.project_id
+    where has_company_access(p.company_id)
+  )
+);
+
+drop policy if exists "Client reads own company prices" on public.company_prices;
+create policy "Client reads assigned company prices" on public.company_prices
+  for select using (has_company_access(company_id));
+
+drop policy if exists "Client reads company invoices" on public.invoices;
+create policy "Client reads assigned company invoices" on public.invoices
+  for select using (has_company_access(company_id));
+
+drop policy if exists "Client reads company invoice_items" on public.invoice_items;
+create policy "Client reads assigned company invoice_items" on public.invoice_items for select using (
+  invoice_id in (select id from public.invoices where has_company_access(company_id))
+);
diff --git a/supabase/migrations/20260420143000_add_invoice_email.sql b/supabase/migrations/20260420143000_add_invoice_email.sql
new file mode 100644
index 0000000..ec853bb
--- /dev/null
+++ b/supabase/migrations/20260420143000_add_invoice_email.sql
@@ -0,0 +1,2 @@
+alter table public.invoices
+  add column if not exists invoice_email text;
diff --git a/supabase/migrations/20260420150000_add_subcontractor_payments.sql b/supabase/migrations/20260420150000_add_subcontractor_payments.sql
new file mode 100644
index 0000000..6c3a1da
--- /dev/null
+++ b/supabase/migrations/20260420150000_add_subcontractor_payments.sql
@@ -0,0 +1,18 @@
+create table if not exists public.subcontractor_payments (
+  id uuid default gen_random_uuid() primary key,
+  profile_id uuid references public.profiles(id) on delete set null,
+  date date default current_date not null,
+  description text not null,
+  amount numeric(10,2) not null,
+  status text not null default 'pending' check (status in ('pending', 'paid')),
+  paid_at date,
+  notes text default '',
+  created_by uuid references public.profiles(id) on delete set null,
+  created_at timestamptz default now() not null
+);
+
+alter table public.subcontractor_payments enable row level security;
+
+drop policy if exists "Team all subcontractor_payments" on public.subcontractor_payments;
+create policy "Team all subcontractor_payments" on public.subcontractor_payments
+  for all using (get_my_role() = 'team') with check (get_my_role() = 'team');
diff --git a/supabase/migrations/20260420153000_remove_external_company_memberships.sql b/supabase/migrations/20260420153000_remove_external_company_memberships.sql
new file mode 100644
index 0000000..210d94e
--- /dev/null
+++ b/supabase/migrations/20260420153000_remove_external_company_memberships.sql
@@ -0,0 +1,9 @@
+delete from public.company_members cm
+using public.profiles p
+where p.id = cm.profile_id
+  and p.role = 'external';
+
+update public.profiles
+set company_id = null
+where role = 'external'
+  and company_id is not null;
diff --git a/supabase/migrations/20260420154500_subcontractor_purchase_orders.sql b/supabase/migrations/20260420154500_subcontractor_purchase_orders.sql
new file mode 100644
index 0000000..96d6529
--- /dev/null
+++ b/supabase/migrations/20260420154500_subcontractor_purchase_orders.sql
@@ -0,0 +1,52 @@
+alter table public.subcontractor_payments
+  add column if not exists po_number text,
+  add column if not exists project_id uuid references public.projects(id) on delete set null,
+  add column if not exists due_date date,
+  add column if not exists terms text default 'Net 15',
+  add column if not exists sent_at timestamptz,
+  add column if not exists approved_at timestamptz,
+  add column if not exists cancelled_at timestamptz;
+
+alter table public.subcontractor_payments
+  drop constraint if exists subcontractor_payments_status_check;
+
+update public.subcontractor_payments
+set status = 'ready_to_pay'
+where status = 'pending';
+
+alter table public.subcontractor_payments
+  add constraint subcontractor_payments_status_check
+  check (status in ('draft', 'sent', 'approved', 'ready_to_pay', 'paid', 'cancelled'));
+
+with numbered as (
+  select
+    id,
+    'PO-' || to_char(coalesce(created_at, now()), 'YYYY') || '-' || lpad((row_number() over (order by created_at, id))::text, 4, '0') as generated_po_number
+  from public.subcontractor_payments
+  where po_number is null
+)
+update public.subcontractor_payments sp
+set po_number = numbered.generated_po_number
+from numbered
+where sp.id = numbered.id;
+
+create unique index if not exists subcontractor_payments_po_number_key
+  on public.subcontractor_payments(po_number)
+  where po_number is not null;
+
+drop policy if exists "External reads own subcontractor purchase orders" on public.subcontractor_payments;
+create policy "External reads own subcontractor purchase orders" on public.subcontractor_payments
+  for select using (
+    get_my_role() = 'external'
+    and profile_id = auth.uid()
+  );
+
+drop policy if exists "External updates own subcontractor purchase orders" on public.subcontractor_payments;
+create policy "External updates own subcontractor purchase orders" on public.subcontractor_payments
+  for update using (
+    get_my_role() = 'external'
+    and profile_id = auth.uid()
+  ) with check (
+    get_my_role() = 'external'
+    and profile_id = auth.uid()
+  );
diff --git a/supabase/migrations/20260421103000_add_subcontractor_po_items.sql b/supabase/migrations/20260421103000_add_subcontractor_po_items.sql
new file mode 100644
index 0000000..9bbc733
--- /dev/null
+++ b/supabase/migrations/20260421103000_add_subcontractor_po_items.sql
@@ -0,0 +1,33 @@
+create table if not exists public.subcontractor_po_items (
+  id uuid default gen_random_uuid() primary key,
+  po_id uuid references public.subcontractor_payments(id) on delete cascade not null,
+  task_id uuid references public.tasks(id) on delete set null,
+  description text not null,
+  amount numeric(10,2) not null,
+  sort_order integer default 0 not null,
+  created_at timestamptz default now() not null
+);
+
+alter table public.subcontractor_po_items enable row level security;
+
+drop policy if exists "Team all subcontractor_po_items" on public.subcontractor_po_items;
+create policy "Team all subcontractor_po_items" on public.subcontractor_po_items
+  for all using (get_my_role() = 'team') with check (get_my_role() = 'team');
+
+drop policy if exists "External reads own subcontractor_po_items" on public.subcontractor_po_items;
+create policy "External reads own subcontractor_po_items" on public.subcontractor_po_items
+  for select using (
+    get_my_role() = 'external'
+    and po_id in (
+      select id from public.subcontractor_payments
+      where profile_id = auth.uid()
+    )
+  );
+
+insert into public.subcontractor_po_items (po_id, task_id, description, amount, sort_order)
+select id, null, description, amount, 0
+from public.subcontractor_payments sp
+where not exists (
+  select 1 from public.subcontractor_po_items item
+  where item.po_id = sp.id
+);
diff --git a/supabase/migrations/20260421120000_require_nonblank_project_names.sql b/supabase/migrations/20260421120000_require_nonblank_project_names.sql
new file mode 100644
index 0000000..4acf3c5
--- /dev/null
+++ b/supabase/migrations/20260421120000_require_nonblank_project_names.sql
@@ -0,0 +1,10 @@
+update public.projects
+set name = 'Untitled Project ' || left(id::text, 8)
+where length(trim(coalesce(name, ''))) = 0;
+
+alter table public.projects
+  drop constraint if exists projects_name_not_blank;
+
+alter table public.projects
+  add constraint projects_name_not_blank
+  check (length(trim(name)) > 0);
diff --git a/supabase/migrations/20260421121000_prevent_duplicate_active_subcontractor_po_tasks.sql b/supabase/migrations/20260421121000_prevent_duplicate_active_subcontractor_po_tasks.sql
new file mode 100644
index 0000000..5d73664
--- /dev/null
+++ b/supabase/migrations/20260421121000_prevent_duplicate_active_subcontractor_po_tasks.sql
@@ -0,0 +1,75 @@
+create or replace function public.prevent_duplicate_active_subcontractor_po_task()
+returns trigger as $$
+declare
+  current_po_status text;
+  duplicate_po_number text;
+begin
+  if new.task_id is null then
+    return new;
+  end if;
+
+  select status into current_po_status
+  from public.subcontractor_payments
+  where id = new.po_id;
+
+  if current_po_status = 'cancelled' then
+    return new;
+  end if;
+
+  select sp.po_number into duplicate_po_number
+  from public.subcontractor_po_items item
+  join public.subcontractor_payments sp on sp.id = item.po_id
+  where item.task_id = new.task_id
+    and item.id <> coalesce(new.id, '00000000-0000-0000-0000-000000000000'::uuid)
+    and sp.status <> 'cancelled'
+  limit 1;
+
+  if duplicate_po_number is not null then
+    raise exception 'Task is already attached to active subcontractor PO %', duplicate_po_number
+      using errcode = '23505';
+  end if;
+
+  return new;
+end;
+$$ language plpgsql security definer;
+
+drop trigger if exists prevent_duplicate_active_subcontractor_po_task on public.subcontractor_po_items;
+create trigger prevent_duplicate_active_subcontractor_po_task
+  before insert or update of task_id, po_id on public.subcontractor_po_items
+  for each row execute function public.prevent_duplicate_active_subcontractor_po_task();
+
+create or replace function public.prevent_duplicate_on_subcontractor_po_reactivation()
+returns trigger as $$
+declare
+  duplicate_task_title text;
+begin
+  if old.status = new.status or new.status = 'cancelled' then
+    return new;
+  end if;
+
+  select t.title into duplicate_task_title
+  from public.subcontractor_po_items current_item
+  join public.subcontractor_po_items other_item
+    on other_item.task_id = current_item.task_id
+   and other_item.po_id <> current_item.po_id
+  join public.subcontractor_payments other_po
+    on other_po.id = other_item.po_id
+   and other_po.status <> 'cancelled'
+  left join public.tasks t on t.id = current_item.task_id
+  where current_item.po_id = new.id
+    and current_item.task_id is not null
+  limit 1;
+
+  if duplicate_task_title is not null then
+    raise exception 'Cannot reactivate PO because task "%" is already attached to another active subcontractor PO', duplicate_task_title
+      using errcode = '23505';
+  end if;
+
+  return new;
+end;
+$$ language plpgsql security definer;
+
+drop trigger if exists prevent_duplicate_on_subcontractor_po_reactivation on public.subcontractor_payments;
+create trigger prevent_duplicate_on_subcontractor_po_reactivation
+  before update of status on public.subcontractor_payments
+  for each row execute function public.prevent_duplicate_on_subcontractor_po_reactivation();
diff --git a/supabase/migrations/20260423113000_allow_client_revision_unassign.sql b/supabase/migrations/20260423113000_allow_client_revision_unassign.sql
new file mode 100644
index 0000000..b789603
--- /dev/null
+++ b/supabase/migrations/20260423113000_allow_client_revision_unassign.sql
@@ -0,0 +1,30 @@
+-- Allow client revision returns to clear stale assignments while keeping
+-- assignment fields protected for normal client updates.
+create or replace function public.guard_task_update()
+returns trigger as $$
+declare
+  caller_role text;
+begin
+  select role into caller_role from public.profiles where id = auth.uid();
+
+  if caller_role = 'client' then
+    new.project_id := old.project_id;
+    new.invoiced := old.invoiced;
+
+    if not (
+      new.status = 'not_started'
+      and coalesce(new.current_version, 0) > coalesce(old.current_version, 0)
+      and new.assigned_to is null
+      and new.assigned_name is null
+    ) then
+      new.assigned_to := old.assigned_to;
+      new.assigned_name := old.assigned_name;
+    end if;
+  elsif caller_role = 'external' then
+    new.project_id := old.project_id;
+    new.invoiced := old.invoiced;
+  end if;
+
+  return new;
+end;
+$$ language plpgsql security definer;
diff --git a/supabase/migrations/20260423150000_add_meeting_notes.sql b/supabase/migrations/20260423150000_add_meeting_notes.sql
new file mode 100644
index 0000000..faeafed
--- /dev/null
+++ b/supabase/migrations/20260423150000_add_meeting_notes.sql
@@ -0,0 +1,15 @@
+create table public.meeting_notes (
+  id uuid default gen_random_uuid() primary key,
+  meeting_at timestamptz default now() not null,
+  title text not null,
+  attendees text default '',
+  notes text not null default '',
+  created_by uuid references public.profiles(id) on delete set null,
+  created_at timestamptz default now() not null,
+  updated_at timestamptz default now() not null
+);
+
+alter table public.meeting_notes enable row level security;
+
+create policy "Team all meeting_notes" on public.meeting_notes
+  for all using (get_my_role() = 'team') with check (get_my_role() = 'team');
diff --git a/supabase/migrations/20260424090000_add_submission_hot_flag.sql b/supabase/migrations/20260424090000_add_submission_hot_flag.sql
new file mode 100644
index 0000000..701f7e9
--- /dev/null
+++ b/supabase/migrations/20260424090000_add_submission_hot_flag.sql
@@ -0,0 +1,2 @@
+alter table public.submissions
+  add column if not exists is_hot boolean not null default false;
diff --git a/supabase/migrations/20260428103000_prevent_duplicate_requests.sql b/supabase/migrations/20260428103000_prevent_duplicate_requests.sql
new file mode 100644
index 0000000..6fd91a9
--- /dev/null
+++ b/supabase/migrations/20260428103000_prevent_duplicate_requests.sql
@@ -0,0 +1,16 @@
+alter table public.tasks
+  add column if not exists request_key uuid;
+
+alter table public.submissions
+  add column if not exists request_key uuid;
+
+create unique index if not exists tasks_request_key_key
+  on public.tasks (request_key)
+  where request_key is not null;
+
+create unique index if not exists submissions_request_key_key
+  on public.submissions (request_key)
+  where request_key is not null;
+
+create unique index if not exists projects_company_normalized_name_key
+  on public.projects (company_id, lower(btrim(name)));
diff --git a/supabase/migrations/20260507120000_auto_sync_subcontractor_project_members.sql b/supabase/migrations/20260507120000_auto_sync_subcontractor_project_members.sql
new file mode 100644
index 0000000..626400f
--- /dev/null
+++ b/supabase/migrations/20260507120000_auto_sync_subcontractor_project_members.sql
@@ -0,0 +1,27 @@
+-- Auto-add subcontractor to project_members when a PO is created or updated
+-- so RLS allows them to read all tasks in their assigned project.
+
+create or replace function public.sync_subcontractor_project_member()
+returns trigger as $$
+begin
+  if new.profile_id is not null and new.project_id is not null then
+    insert into public.project_members (project_id, profile_id)
+    values (new.project_id, new.profile_id)
+    on conflict (project_id, profile_id) do nothing;
+  end if;
+  return new;
+end;
+$$ language plpgsql security definer;
+
+drop trigger if exists trg_sync_subcontractor_project_member on public.subcontractor_payments;
+create trigger trg_sync_subcontractor_project_member
+  after insert or update of profile_id, project_id
+  on public.subcontractor_payments
+  for each row execute function public.sync_subcontractor_project_member();
+
+-- Backfill existing POs
+insert into public.project_members (project_id, profile_id)
+select distinct project_id, profile_id
+from public.subcontractor_payments
+where profile_id is not null and project_id is not null
+on conflict (project_id, profile_id) do nothing;
diff --git a/supabase/migrations/20260507130000_allow_all_mime_types_submissions.sql b/supabase/migrations/20260507130000_allow_all_mime_types_submissions.sql
new file mode 100644
index 0000000..df6718b
--- /dev/null
+++ b/supabase/migrations/20260507130000_allow_all_mime_types_submissions.sql
@@ -0,0 +1,5 @@
+-- Remove allowed MIME type restrictions from submissions and deliveries buckets
+-- so clients and team can upload any file type (ZIP, etc.)
+update storage.buckets
+set allowed_mime_types = null
+where id in ('submissions', 'deliveries');
diff --git a/supabase/migrations/20260513120000_client_task_delete_policy.sql b/supabase/migrations/20260513120000_client_task_delete_policy.sql
new file mode 100644
index 0000000..1e9dfa3
--- /dev/null
+++ b/supabase/migrations/20260513120000_client_task_delete_policy.sql
@@ -0,0 +1,20 @@
+-- Allow clients to delete tasks in their own company's projects.
+-- Previously only team members could delete tasks (no client delete policy existed),
+-- so client-side "Delete Request" silently failed with 0 rows deleted.
+
+drop policy if exists "Client deletes company tasks" on public.tasks;
+create policy "Client deletes company tasks" on public.tasks
+  for delete using (
+    get_my_role() = 'client'
+    and project_id in (
+      select id from public.projects where has_company_access(company_id)
+    )
+  );
+
+-- Also allow clients to delete projects (needed when the last task in a project is deleted).
+drop policy if exists "Client deletes company projects" on public.projects;
+create policy "Client deletes company projects" on public.projects
+  for delete using (
+    get_my_role() = 'client'
+    and has_company_access(company_id)
+  );
diff --git a/supabase/migrations/add_brand_book_cover_fields.sql b/supabase/migrations/add_brand_book_cover_fields.sql
deleted file mode 100644
index d8960da..0000000
--- a/supabase/migrations/add_brand_book_cover_fields.sql
+++ /dev/null
@@ -1,13 +0,0 @@
--- Add cover page fields to brand_books table
-ALTER TABLE brand_books
-  ADD COLUMN IF NOT EXISTS creation_date date,
-  ADD COLUMN IF NOT EXISTS revision_date date,
-  ADD COLUMN IF NOT EXISTS customer_name text,
-  ADD COLUMN IF NOT EXISTS customer_address text,
-  ADD COLUMN IF NOT EXISTS project_logo_path text,
-  ADD COLUMN IF NOT EXISTS client_logo_url text,
-  ADD COLUMN IF NOT EXISTS client_contact_name text,
-  ADD COLUMN IF NOT EXISTS client_contact_email text,
-  ADD COLUMN IF NOT EXISTS client_contact_phone text,
-  ADD COLUMN IF NOT EXISTS approved_date date,
-  ADD COLUMN IF NOT EXISTS approval_notes text;
diff --git a/supabase/migrations/add_brand_book_template_fields.sql b/supabase/migrations/add_brand_book_template_fields.sql
deleted file mode 100644
index a2e6ed3..0000000
--- a/supabase/migrations/add_brand_book_template_fields.sql
+++ /dev/null
@@ -1,4 +0,0 @@
--- Add template and inventory map fields to brand_books table
-ALTER TABLE brand_books
-  ADD COLUMN IF NOT EXISTS template text DEFAULT 'fourge',
-  ADD COLUMN IF NOT EXISTS inventory_map_path text;
diff --git a/supabase/migrations/add_company_brand_fields.sql b/supabase/migrations/add_company_brand_fields.sql
deleted file mode 100644
index 3e7ed8c..0000000
--- a/supabase/migrations/add_company_brand_fields.sql
+++ /dev/null
@@ -1,29 +0,0 @@
--- Add brand book / cover page fields to companies
-ALTER TABLE companies
-  ADD COLUMN IF NOT EXISTS address text,
-  ADD COLUMN IF NOT EXISTS contact_name text,
-  ADD COLUMN IF NOT EXISTS contact_email text,
-  ADD COLUMN IF NOT EXISTS contact_phone text,
-  ADD COLUMN IF NOT EXISTS client_logo_url text;
-
--- Create public bucket for company logos
-DO $$
-BEGIN
-  IF NOT EXISTS (SELECT 1 FROM storage.buckets WHERE id = 'company-logos') THEN
-    INSERT INTO storage.buckets (id, name, public) VALUES ('company-logos', 'company-logos', true);
-  END IF;
-END $$;
-
--- Storage policies for company-logos
-DROP POLICY IF EXISTS "Authenticated users can manage company logos" ON storage.objects;
-DROP POLICY IF EXISTS "Public can read company logos" ON storage.objects;
-
-CREATE POLICY "Authenticated users can manage company logos"
-  ON storage.objects FOR ALL
-  TO authenticated
-  USING (bucket_id = 'company-logos')
-  WITH CHECK (bucket_id = 'company-logos');
-
-CREATE POLICY "Public can read company logos"
-  ON storage.objects FOR SELECT
-  USING (bucket_id = 'company-logos');
diff --git a/supabase/migrations/add_price_type.sql b/supabase/migrations/add_price_type.sql
deleted file mode 100644
index 2b66bbb..0000000
--- a/supabase/migrations/add_price_type.sql
+++ /dev/null
@@ -1,17 +0,0 @@
--- ============================================================
--- Migration: Add price_type to company_prices (new vs revision)
--- Run in Supabase → SQL Editor → Run
--- ============================================================
-
--- Add price_type column (existing rows default to 'new')
-alter table public.company_prices
-  add column price_type text not null default 'new'
-  check (price_type in ('new', 'revision'));
-
--- Drop old unique constraint and add new one that includes price_type
-alter table public.company_prices
-  drop constraint company_prices_company_id_service_type_key;
-
-alter table public.company_prices
-  add constraint company_prices_company_id_service_type_price_type_key
-  unique (company_id, service_type, price_type);
diff --git a/supabase/migrations/add_revision_billing.sql b/supabase/migrations/add_revision_billing.sql
deleted file mode 100644
index 6ec135e..0000000
--- a/supabase/migrations/add_revision_billing.sql
+++ /dev/null
@@ -1,15 +0,0 @@
--- ============================================================
--- Migration: Add revision billing tracking
--- Run in Supabase → SQL Editor → Run
--- ============================================================
-
--- Add revision_type and invoiced to submissions
-alter table public.submissions
-  add column revision_type text check (revision_type in ('fourge_error', 'client_revision'));
-
-alter table public.submissions
-  add column invoiced boolean not null default false;
-
--- Add submission_id to invoice_items (links a line item to a specific revision)
-alter table public.invoice_items
-  add column submission_id uuid references public.submissions(id) on delete set null;
diff --git a/supabase/schema.sql b/supabase/schema.sql
index 2dbe50a..677ac4e 100755
--- a/supabase/schema.sql
+++ b/supabase/schema.sql
@@ -33,6 +33,7 @@ create table public.projects (
   id uuid default gen_random_uuid() primary key,
   company_id uuid references public.companies(id) on delete cascade not null,
   name text not null,
+  constraint projects_name_not_blank check (length(trim(name)) > 0),
   description text default '',
   status text not null check (status in ('active', 'completed')) default 'active',
   created_at timestamptz default now() not null
@@ -43,6 +44,7 @@ alter table public.projects enable row level security;
 create table public.tasks (
   id uuid default gen_random_uuid() primary key,
   project_id uuid references public.projects(id) on delete cascade not null,
+  request_key uuid,
   title text not null,
   assigned_to uuid references public.profiles(id) on delete set null,
   assigned_name text,
@@ -58,10 +60,12 @@ alter table public.tasks enable row level security;
 create table public.submissions (
   id uuid default gen_random_uuid() primary key,
   task_id uuid references public.tasks(id) on delete cascade not null,
+  request_key uuid,
   version_number integer not null,
   type text not null check (type in ('initial', 'revision', 'amendment')) default 'initial',
   revision_type text check (revision_type in ('fourge_error', 'client_revision')),
   invoiced boolean not null default false,
+  is_hot boolean not null default false,
   service_type text default '',
   deadline date,
   description text default '',
@@ -71,6 +75,17 @@ create table public.submissions (
 );
 alter table public.submissions enable row level security;
 
+create unique index if not exists tasks_request_key_key
+  on public.tasks (request_key)
+  where request_key is not null;
+
+create unique index if not exists submissions_request_key_key
+  on public.submissions (request_key)
+  where request_key is not null;
+
+create unique index if not exists projects_company_normalized_name_key
+  on public.projects (company_id, lower(btrim(name)));
+
 -- Submission Files
 create table public.submission_files (
   id uuid default gen_random_uuid() primary key,
@@ -132,12 +147,62 @@ create table public.invoices (
   due_date date,
   total numeric(10,2) default 0,
   notes text default '',
+  bill_to text,
+  invoice_email text,
   stripe_fee numeric(10,2),
   created_by uuid references public.profiles(id) on delete set null,
   created_at timestamptz default now() not null
 );
 alter table public.invoices enable row level security;
 
+-- Expenses
+create table public.expenses (
+  id uuid default gen_random_uuid() primary key,
+  date date default current_date not null,
+  description text not null,
+  category text not null default 'Other',
+  amount numeric(10,2) not null,
+  notes text default '',
+  receipt_path text,
+  receipt_name text,
+  created_by uuid references public.profiles(id) on delete set null,
+  created_at timestamptz default now() not null
+);
+alter table public.expenses enable row level security;
+create policy "Team all expenses" on public.expenses for all using (get_my_role() = 'team');
+
+-- Subcontractor Payments (tracked separately, included as contractor expenses)
+create table public.subcontractor_payments (
+  id uuid default gen_random_uuid() primary key,
+  profile_id uuid references public.profiles(id) on delete set null,
+  date date default current_date not null,
+  description text not null,
+  amount numeric(10,2) not null,
+  status text not null default 'pending' check (status in ('pending', 'paid')),
+  paid_at date,
+  notes text default '',
+  created_by uuid references public.profiles(id) on delete set null,
+  created_at timestamptz default now() not null
+);
+alter table public.subcontractor_payments enable row level security;
+create policy "Team all subcontractor_payments" on public.subcontractor_payments
+  for all using (get_my_role() = 'team') with check (get_my_role() = 'team');
+
+-- Meeting Notes
+create table public.meeting_notes (
+  id uuid default gen_random_uuid() primary key,
+  meeting_at timestamptz default now() not null,
+  title text not null,
+  attendees text default '',
+  notes text not null default '',
+  created_by uuid references public.profiles(id) on delete set null,
+  created_at timestamptz default now() not null,
+  updated_at timestamptz default now() not null
+);
+alter table public.meeting_notes enable row level security;
+create policy "Team all meeting_notes" on public.meeting_notes
+  for all using (get_my_role() = 'team') with check (get_my_role() = 'team');
+
 -- Invoice Items
 create table public.invoice_items (
   id uuid default gen_random_uuid() primary key,
@@ -243,9 +308,17 @@ begin
 
   if caller_role = 'client' then
     new.project_id    := old.project_id;
-    new.assigned_to   := old.assigned_to;
-    new.assigned_name := old.assigned_name;
     new.invoiced      := old.invoiced;
+
+    if not (
+      new.status = 'not_started'
+      and coalesce(new.current_version, 0) > coalesce(old.current_version, 0)
+      and new.assigned_to is null
+      and new.assigned_name is null
+    ) then
+      new.assigned_to   := old.assigned_to;
+      new.assigned_name := old.assigned_name;
+    end if;
   elsif caller_role = 'external' then
     new.project_id := old.project_id;
     new.invoiced   := old.invoiced;
@@ -474,6 +547,7 @@ insert into storage.buckets (id, name, public) values ('submissions', 'submissio
 insert into storage.buckets (id, name, public) values ('deliveries', 'deliveries', false);
 insert into storage.buckets (id, name, public) values ('company-logos', 'company-logos', true);
 insert into storage.buckets (id, name, public) values ('fourge-files', 'fourge-files', false);
+insert into storage.buckets (id, name, public) values ('expense-receipts', 'expense-receipts', false);
 
 -- Company Logos (public bucket — team manages, public can read for embedded URLs in PDFs)
 create policy "Team manages company logos" on storage.objects
@@ -546,6 +620,17 @@ create policy "Team updates fourge files storage" on storage.objects
 create policy "Team deletes fourge files storage" on storage.objects
   for delete to authenticated using (bucket_id = 'fourge-files' and get_my_role() = 'team');
 
+-- Expense Receipts: team-only storage for uploaded expense receipts/photos
+create policy "Team reads expense receipts storage" on storage.objects
+  for select to authenticated using (bucket_id = 'expense-receipts' and get_my_role() = 'team');
+create policy "Team inserts expense receipts storage" on storage.objects
+  for insert to authenticated with check (bucket_id = 'expense-receipts' and get_my_role() = 'team');
+create policy "Team updates expense receipts storage" on storage.objects
+  for update to authenticated using (bucket_id = 'expense-receipts' and get_my_role() = 'team')
+  with check (bucket_id = 'expense-receipts' and get_my_role() = 'team');
+create policy "Team deletes expense receipts storage" on storage.objects
+  for delete to authenticated using (bucket_id = 'expense-receipts' and get_my_role() = 'team');
+
 -- ============================================================
 -- Trigger: auto-create profile on signup
 -- Team assigns company_id later via the Companies page
diff --git a/vercel.json b/vercel.json
index 0f32683..c5ae177 100644
--- a/vercel.json
+++ b/vercel.json
@@ -1,3 +1,3 @@
 {
-  "rewrites": [{ "source": "/(.*)", "destination": "/index.html" }]
+  "rewrites": [{ "source": "/((?!\\.well-known).*)", "destination": "/index.html" }]
 }
diff --git a/vite.config.js b/vite.config.js
index 8b0f57b..fbfcbed 100755
--- a/vite.config.js
+++ b/vite.config.js
@@ -4,4 +4,14 @@ import react from '@vitejs/plugin-react'
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [react()],
+  build: {
+    rollupOptions: {
+      output: {
+        manualChunks(id) {
+          if (id.includes('node_modules/jspdf')) return 'pdf-libs';
+          if (id.includes('node_modules/react') || id.includes('node_modules/react-dom') || id.includes('node_modules/react-router')) return 'react-vendor';
+        },
+      },
+    },
+  },
 })