diff --git a/src/App.jsx b/src/App.jsx
index 5a2f3a1..f186611 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -20,6 +20,7 @@ import DocumentManagement from './pages/owner/DocumentManagement';
 import OwnerProjectList from './pages/owner/OwnerProjectList';
 import OwnerProjectDetail from './pages/owner/OwnerProjectDetail';
 import OrgSettings from './pages/owner/OrgSettings';
+import SubcontractorTasksPage from './pages/owner/SubcontractorTasksPage';
 import PlaceholderDashboard from './pages/PlaceholderDashboard';
 import ProCanvas from './pages/ProCanvas';
 import ProjectList from './pages/contractor/ProjectList';
@@ -30,6 +31,7 @@ import VendorDashboard from './pages/vendor/VendorDashboard';
 import VendorOrders from './pages/vendor/VendorOrders';
 import ContractorDashboard from './pages/contractor/ContractorDashboard';
 import SubContractorDashboard from './pages/subcontractor/SubContractorDashboard';
+import SubcontractorTaskDetailPage from './pages/subcontractor/SubcontractorTaskDetailPage';
 import CreateLeadPage from './pages/CreateLeadPage';
 import LeadsListPage from './pages/LeadsListPage';
 import LynkDispatchPage from './pages/LynkDispatchPage';
@@ -221,6 +223,21 @@ function App() {
                 <OrgSettings />
               </ProtectedRoute>
             } />
+            <Route path="/admin/settings" element={
+              <ProtectedRoute allowedRoles={['ADMIN']}>
+                <OrgSettings />
+              </ProtectedRoute>
+            } />
+            <Route path="/owner/subcontractor-tasks" element={
+              <ProtectedRoute allowedRoles={['OWNER']}>
+                <SubcontractorTasksPage />
+              </ProtectedRoute>
+            } />
+            <Route path="/admin/subcontractor-tasks" element={
+              <ProtectedRoute allowedRoles={['ADMIN', 'OWNER']}>
+                <SubcontractorTasksPage />
+              </ProtectedRoute>
+            } />
 
             {/* Protected Admin Routes — Owner has full admin access */}
             <Route
@@ -372,6 +389,11 @@ function App() {
                 <ProjectList />
               </ProtectedRoute>
             } />
+            <Route path="/subcontractor/tasks/:taskId" element={
+              <ProtectedRoute allowedRoles={['SUBCONTRACTOR']}>
+                <SubcontractorTaskDetailPage />
+              </ProtectedRoute>
+            } />
           </Route>
 
           {/* Catch all */}
diff --git a/src/components/Layout.jsx b/src/components/Layout.jsx
index 399ea61..0878ec3 100644
--- a/src/components/Layout.jsx
+++ b/src/components/Layout.jsx
@@ -5,7 +5,8 @@ import { useTheme } from '../context/ThemeContext';
 import {
     LayoutDashboard, Map, Calendar, LogOut, User, Home, MessageSquare,
     ChevronLeft, ChevronRight, Sun, Moon, Trophy, Users, Briefcase,
-    FileText, Menu, X, Calculator, PlusCircle, ClipboardList, Zap, LayoutGrid, Settings, CloudLightning
+    FileText, Menu, X, Calculator, PlusCircle, ClipboardList, Zap, LayoutGrid, Settings, CloudLightning,
+    HardHat
 } from 'lucide-react';
 
 import PageTransition from './PageTransition';
@@ -150,6 +151,7 @@ const Layout = () => {
                     { to: "/owner/estimates", icon: Calculator, label: "Estimates" },
                     { to: "/admin/schedule", icon: Calendar, label: "Team Schedule" },
                     { to: "/admin/leaderboard", icon: Trophy, label: "Leaderboard" },
+                    { to: "/owner/subcontractor-tasks", icon: HardHat, label: "Subcontractor Tasks" },
                     { to: "/owner/settings", icon: Settings, label: "Org Settings" },
                     ...commonItems,
                 ];
@@ -169,7 +171,8 @@ const Layout = () => {
                         label: <span><span className="text-[#fda913]">Pro</span>Canvas</span>
                     },
                     { to: "/admin/estimates", icon: Calculator, label: "Estimates" },
-                    { to: "/owner/settings", icon: Settings, label: "Org Settings" },
+                    { to: "/admin/subcontractor-tasks", icon: HardHat, label: "Subcontractor Tasks" },
+                    { to: "/admin/settings", icon: Settings, label: "Org Settings" },
                     ...commonItems,
                 ];
             case 'CONTRACTOR':
diff --git a/src/components/owner/SubcontractorPaymentsPanel.jsx b/src/components/owner/SubcontractorPaymentsPanel.jsx
new file mode 100644
index 0000000..546b71c
--- /dev/null
+++ b/src/components/owner/SubcontractorPaymentsPanel.jsx
@@ -0,0 +1,483 @@
+import React, { useMemo, useState, useRef, useEffect } from 'react';
+import { Wallet, Users, Search, ChevronDown, X, Check, FilterX } from 'lucide-react';
+
+const CATEGORY_COLORS = {
+    'Electrical':        'text-cyan-500 dark:text-cyan-400 bg-cyan-500/10 border-cyan-500/20',
+    'Roofing':           'text-orange-500 dark:text-orange-400 bg-orange-500/10 border-orange-500/20',
+    'Painting':          'text-purple-500 dark:text-purple-400 bg-purple-500/10 border-purple-500/20',
+    'Plumbing':          'text-blue-500 dark:text-blue-400 bg-blue-500/10 border-blue-500/20',
+    'Windows & Glazing': 'text-teal-500 dark:text-teal-400 bg-teal-500/10 border-teal-500/20',
+};
+
+const PAYMENT_STATUS_COLORS = {
+    'Paid':   'text-emerald-600 dark:text-emerald-400 bg-emerald-500/10 border-emerald-500/20',
+    'Unpaid': 'text-amber-600 dark:text-amber-400 bg-amber-500/10 border-amber-500/20',
+};
+
+function taskTotal(task) {
+    const expenses = (task.expenses || []).reduce((s, e) => s + (Number(e.amount) || 0), 0);
+    const fees = (task.fees || []).reduce((s, f) => s + (Number(f.amount) || 0), 0);
+    return expenses + fees;
+}
+
+const fmt = (amt) =>
+    new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', maximumFractionDigits: 0 }).format(Number(amt) || 0);
+
+const fmtDate = (iso) => {
+    if (!iso) return '—';
+    try {
+        return new Date(iso).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' });
+    } catch {
+        return iso;
+    }
+};
+
+// Dark-mode-aware dropdown — replaces native <select> so the option list
+// doesn't render with the OS default white background in dark mode.
+function FilterPopover({ id, value, onChange, options, allLabel, ariaLabel }) {
+    const [open, setOpen] = useState(false);
+    const boxRef = useRef(null);
+
+    useEffect(() => {
+        if (!open) return;
+        const onClick = (e) => {
+            if (boxRef.current && !boxRef.current.contains(e.target)) setOpen(false);
+        };
+        const onKey = (e) => { if (e.key === 'Escape') setOpen(false); };
+        document.addEventListener('mousedown', onClick);
+        document.addEventListener('keydown', onKey);
+        return () => {
+            document.removeEventListener('mousedown', onClick);
+            document.removeEventListener('keydown', onKey);
+        };
+    }, [open]);
+
+    const display = value === 'all' ? allLabel : value;
+
+    return (
+        <div className="relative" ref={boxRef}>
+            <button
+                id={id}
+                type="button"
+                aria-haspopup="listbox"
+                aria-expanded={open}
+                aria-label={ariaLabel}
+                onClick={() => setOpen(o => !o)}
+                className="w-full flex items-center justify-between gap-2 pl-3 pr-2 py-2 text-sm rounded-xl bg-zinc-100 dark:bg-black/40 border border-zinc-200 dark:border-white/10 text-zinc-900 dark:text-white outline-none focus:ring-2 focus:ring-amber-500/20 focus:border-amber-500/40 transition-colors"
+            >
+                <span className="truncate text-left">{display}</span>
+                <ChevronDown size={14} className={`shrink-0 text-zinc-400 transition-transform ${open ? 'rotate-180' : ''}`} />
+            </button>
+            {open && (
+                <div
+                    role="listbox"
+                    className="absolute z-30 left-0 right-0 mt-1 rounded-xl bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-white/10 shadow-xl shadow-black/10 dark:shadow-black/50 overflow-hidden"
+                >
+                    <div className="max-h-56 overflow-y-auto custom-scrollbar py-1">
+                        <button
+                            type="button"
+                            role="option"
+                            aria-selected={value === 'all'}
+                            onClick={() => { onChange('all'); setOpen(false); }}
+                            className={`w-full flex items-center justify-between px-3 py-2 text-sm text-left transition-colors ${value === 'all' ? 'text-amber-600 dark:text-amber-400 bg-amber-50 dark:bg-amber-500/10' : 'text-zinc-700 dark:text-zinc-200 hover:bg-zinc-50 dark:hover:bg-white/5'}`}
+                        >
+                            <span>{allLabel}</span>
+                            {value === 'all' && <Check size={12} strokeWidth={2.5} className="shrink-0 opacity-70" />}
+                        </button>
+                        {options.map(opt => {
+                            const isSelected = opt === value;
+                            return (
+                                <button
+                                    key={opt}
+                                    type="button"
+                                    role="option"
+                                    aria-selected={isSelected}
+                                    onClick={() => { onChange(opt); setOpen(false); }}
+                                    className={`w-full flex items-center justify-between px-3 py-2 text-sm text-left transition-colors ${isSelected ? 'text-amber-600 dark:text-amber-400 bg-amber-50 dark:bg-amber-500/10' : 'text-zinc-700 dark:text-zinc-200 hover:bg-zinc-50 dark:hover:bg-white/5'}`}
+                                >
+                                    <span className="truncate">{opt}</span>
+                                    {isSelected && <Check size={12} strokeWidth={2.5} className="shrink-0 opacity-70" />}
+                                </button>
+                            );
+                        })}
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+}
+
+const SubcontractorPaymentsPanel = ({
+    subcontractorTasks = [],
+    subcontractors = [],
+    projects = [],
+}) => {
+    const subById = useMemo(() => {
+        const m = new Map();
+        for (const s of subcontractors) m.set(s.id, s);
+        return m;
+    }, [subcontractors]);
+
+    const projectById = useMemo(() => {
+        const m = new Map();
+        for (const p of projects) m.set(p.id, p);
+        return m;
+    }, [projects]);
+
+    const rows = useMemo(() => {
+        const entries = [];
+        for (const task of subcontractorTasks) {
+            const amount = taskTotal(task);
+            if (amount <= 0) continue;
+            const sub = subById.get(task.subcontractorId);
+            const project = task.projectId ? projectById.get(task.projectId) : null;
+            entries.push({
+                key: task.id,
+                name: task.subcontractorName,
+                companyName: sub?.companyName || '',
+                projectName: project ? (project.projectType || project.address) : '—',
+                projectAddress: project?.address || '',
+                projectId: project?.id || null,
+                workCategory: sub?.tradeType || '—',
+                amount,
+                requestedAt: task.paymentRequestedAt || null,
+                paidAt: task.paidAt || null,
+                paymentStatus: task.paymentStatus || 'Unpaid',
+            });
+        }
+        return entries;
+    }, [subcontractorTasks, subById, projectById]);
+
+    // ── Filter state ───────────────────────────────────────────────
+    const [nameQuery, setNameQuery] = useState('');
+    const [projectFilter, setProjectFilter] = useState('all');
+    const [categoryFilter, setCategoryFilter] = useState('all');
+    const [statusFilter, setStatusFilter] = useState('all');
+
+    // Searchable project dropdown
+    const [projectOpen, setProjectOpen] = useState(false);
+    const [projectQuery, setProjectQuery] = useState('');
+    const projectBoxRef = useRef(null);
+
+    useEffect(() => {
+        if (!projectOpen) return;
+        const onClick = (e) => {
+            if (projectBoxRef.current && !projectBoxRef.current.contains(e.target)) {
+                setProjectOpen(false);
+                setProjectQuery('');
+            }
+        };
+        document.addEventListener('mousedown', onClick);
+        return () => document.removeEventListener('mousedown', onClick);
+    }, [projectOpen]);
+
+    const projectOptions = useMemo(() => {
+        const map = new Map();
+        for (const r of rows) {
+            const key = r.projectName || '—';
+            if (!map.has(key)) map.set(key, { name: key });
+        }
+        return Array.from(map.values()).sort((a, b) => a.name.localeCompare(b.name));
+    }, [rows]);
+
+    const categoryOptions = useMemo(() => {
+        const set = new Set(rows.map(r => r.workCategory).filter(Boolean));
+        return Array.from(set).sort();
+    }, [rows]);
+
+    const statusOptions = useMemo(() => {
+        const set = new Set(rows.map(r => r.paymentStatus).filter(Boolean));
+        return Array.from(set).sort();
+    }, [rows]);
+
+    const filteredProjectOptions = useMemo(() => {
+        const q = projectQuery.trim().toLowerCase();
+        if (!q) return projectOptions;
+        return projectOptions.filter(p => (p.name || '').toLowerCase().includes(q));
+    }, [projectOptions, projectQuery]);
+
+    const selectedProjectLabel = projectFilter === 'all' ? 'All Projects' : projectFilter;
+
+    const filteredRows = useMemo(() => {
+        const q = nameQuery.trim().toLowerCase();
+        return rows.filter(r => {
+            if (q && !(r.name || '').toLowerCase().includes(q)) return false;
+            if (projectFilter !== 'all' && r.projectName !== projectFilter) return false;
+            if (categoryFilter !== 'all' && r.workCategory !== categoryFilter) return false;
+            if (statusFilter !== 'all' && r.paymentStatus !== statusFilter) return false;
+            return true;
+        });
+    }, [rows, nameQuery, projectFilter, categoryFilter, statusFilter]);
+
+    const total = useMemo(() => filteredRows.reduce((s, r) => s + r.amount, 0), [filteredRows]);
+    const outstanding = useMemo(
+        () => filteredRows.filter(r => r.paymentStatus === 'Unpaid').reduce((s, r) => s + r.amount, 0),
+        [filteredRows]
+    );
+
+    const hasActiveFilters =
+        nameQuery.trim() !== '' || projectFilter !== 'all' || categoryFilter !== 'all' || statusFilter !== 'all';
+
+    const clearFilters = () => {
+        setNameQuery('');
+        setProjectFilter('all');
+        setCategoryFilter('all');
+        setStatusFilter('all');
+        setProjectQuery('');
+    };
+
+    return (
+        <div className="flex flex-col gap-3">
+            {/* Header */}
+            <div className="flex items-center gap-3 flex-wrap">
+                <Wallet className="text-amber-500 dark:text-amber-400 drop-shadow-[0_0_8px_rgba(245,158,11,0.4)]" size={20} />
+                <h3 className="text-sm font-mono font-bold text-zinc-900 dark:text-white tracking-widest uppercase">
+                    Subcontractor Payments
+                </h3>
+                <span className="text-[10px] font-mono text-zinc-500 bg-zinc-100 dark:bg-white/5 border border-zinc-200 dark:border-white/10 rounded-full px-2.5 py-0.5">
+                    {hasActiveFilters
+                        ? `${filteredRows.length} of ${rows.length} payment${rows.length === 1 ? '' : 's'}`
+                        : `${rows.length} payment${rows.length === 1 ? '' : 's'}`
+                    }
+                </span>
+            </div>
+
+            {/* Filter bar */}
+            {rows.length > 0 && (
+                <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-2.5 p-3 rounded-xl bg-zinc-50 dark:bg-white/[0.02] border border-zinc-200 dark:border-white/5">
+                    {/* Search by Name */}
+                    <div className="relative">
+                        <label htmlFor="payments-name-search" className="sr-only">Search by subcontractor name</label>
+                        <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-zinc-400 pointer-events-none" size={14} />
+                        <input
+                            id="payments-name-search"
+                            type="text"
+                            placeholder="Search by name..."
+                            value={nameQuery}
+                            onChange={(e) => setNameQuery(e.target.value)}
+                            className="w-full bg-zinc-100 dark:bg-black/40 border border-zinc-200 dark:border-white/10 rounded-xl py-2 pl-9 pr-8 text-sm text-zinc-900 dark:text-white placeholder:text-zinc-400 dark:placeholder:text-zinc-500 outline-none focus:ring-2 focus:ring-amber-500/20 focus:border-amber-500/40"
+                        />
+                        {nameQuery && (
+                            <button
+                                type="button"
+                                onClick={() => setNameQuery('')}
+                                aria-label="Clear name search"
+                                className="absolute right-2 top-1/2 -translate-y-1/2 text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-200"
+                            >
+                                <X size={14} />
+                            </button>
+                        )}
+                    </div>
+
+                    {/* Project searchable dropdown */}
+                    <div className="relative" ref={projectBoxRef}>
+                        <button
+                            type="button"
+                            onClick={() => setProjectOpen(o => !o)}
+                            className="w-full flex items-center justify-between gap-2 pl-3 pr-2 py-2 text-sm rounded-xl bg-zinc-100 dark:bg-black/40 border border-zinc-200 dark:border-white/10 text-zinc-900 dark:text-white outline-none focus:ring-2 focus:ring-amber-500/20 focus:border-amber-500/40 transition-colors"
+                        >
+                            <span className="truncate text-left">{selectedProjectLabel}</span>
+                            <ChevronDown size={14} className={`shrink-0 text-zinc-400 transition-transform ${projectOpen ? 'rotate-180' : ''}`} />
+                        </button>
+                        {projectOpen && (
+                            <div className="absolute z-30 left-0 right-0 mt-1 rounded-xl bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-white/10 shadow-xl shadow-black/10 dark:shadow-black/50 overflow-hidden">
+                                <div className="relative p-2 border-b border-zinc-100 dark:border-white/5">
+                                    <Search className="absolute left-4 top-1/2 -translate-y-1/2 text-zinc-400 pointer-events-none" size={14} />
+                                    <input
+                                        autoFocus
+                                        type="text"
+                                        placeholder="Search projects..."
+                                        value={projectQuery}
+                                        onChange={(e) => setProjectQuery(e.target.value)}
+                                        className="w-full bg-zinc-50 dark:bg-black/40 border border-zinc-200 dark:border-white/10 rounded-lg py-1.5 pl-8 pr-2 text-sm text-zinc-900 dark:text-white placeholder:text-zinc-400 dark:placeholder:text-zinc-500 outline-none"
+                                    />
+                                </div>
+                                <div className="max-h-56 overflow-y-auto custom-scrollbar py-1">
+                                    <button
+                                        type="button"
+                                        onClick={() => { setProjectFilter('all'); setProjectOpen(false); setProjectQuery(''); }}
+                                        className={`w-full flex items-center justify-between px-3 py-2 text-sm text-left transition-colors ${projectFilter === 'all' ? 'text-amber-600 dark:text-amber-400 bg-amber-50 dark:bg-amber-500/10' : 'text-zinc-700 dark:text-zinc-200 hover:bg-zinc-50 dark:hover:bg-white/5'}`}
+                                    >
+                                        <span>All Projects</span>
+                                        {projectFilter === 'all' && <Check size={12} strokeWidth={2.5} className="shrink-0 opacity-70" />}
+                                    </button>
+                                    {filteredProjectOptions.length === 0 ? (
+                                        <p className="px-3 py-2 text-xs text-zinc-400 dark:text-zinc-500">No projects match "{projectQuery}"</p>
+                                    ) : (
+                                        filteredProjectOptions.map(p => {
+                                            const isSelected = p.name === projectFilter;
+                                            return (
+                                                <button
+                                                    key={p.name}
+                                                    type="button"
+                                                    onClick={() => { setProjectFilter(p.name); setProjectOpen(false); setProjectQuery(''); }}
+                                                    className={`w-full flex items-center justify-between px-3 py-2 text-sm text-left transition-colors ${isSelected ? 'text-amber-600 dark:text-amber-400 bg-amber-50 dark:bg-amber-500/10' : 'text-zinc-700 dark:text-zinc-200 hover:bg-zinc-50 dark:hover:bg-white/5'}`}
+                                                >
+                                                    <span className="truncate font-semibold">{p.name}</span>
+                                                    {isSelected && <Check size={12} strokeWidth={2.5} className="shrink-0 opacity-70" />}
+                                                </button>
+                                            );
+                                        })
+                                    )}
+                                </div>
+                            </div>
+                        )}
+                    </div>
+
+                    {/* Work Category filter */}
+                    <FilterPopover
+                        id="payments-category-filter"
+                        ariaLabel="Filter by work category"
+                        value={categoryFilter}
+                        onChange={setCategoryFilter}
+                        options={categoryOptions}
+                        allLabel="All Work Categories"
+                    />
+
+                    {/* Payment Status filter */}
+                    <FilterPopover
+                        id="payments-status-filter"
+                        ariaLabel="Filter by payment status"
+                        value={statusFilter}
+                        onChange={setStatusFilter}
+                        options={statusOptions}
+                        allLabel="All Payment Statuses"
+                    />
+
+                    {hasActiveFilters && (
+                        <div className="sm:col-span-2 lg:col-span-4 flex justify-end">
+                            <button
+                                type="button"
+                                onClick={clearFilters}
+                                className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-[11px] font-bold uppercase tracking-wider text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-white bg-zinc-100 dark:bg-white/5 hover:bg-zinc-200 dark:hover:bg-white/10 border border-zinc-200 dark:border-white/10 transition-colors"
+                            >
+                                <FilterX size={12} /> Clear Filters
+                            </button>
+                        </div>
+                    )}
+                </div>
+            )}
+
+            {rows.length === 0 ? (
+                <div className="py-10 text-center">
+                    <Users size={28} className="mx-auto mb-3 text-zinc-400" />
+                    <p className="text-sm text-zinc-500">No subcontractor payments yet.</p>
+                    <p className="text-xs text-zinc-400 mt-1">Tasks with logged fees or expenses will appear here.</p>
+                </div>
+            ) : (
+                <div className="overflow-x-auto rounded-xl border border-zinc-200 dark:border-white/5">
+                    <table className="w-full text-left min-w-[860px]">
+                        <thead>
+                            <tr className="border-b border-zinc-200 dark:border-white/5 bg-zinc-50 dark:bg-white/[0.02]">
+                                <th className="px-4 py-2.5 text-[10px] font-mono font-bold text-zinc-500 uppercase tracking-widest">Subcontractor</th>
+                                <th className="px-4 py-2.5 text-[10px] font-mono font-bold text-zinc-500 uppercase tracking-widest">Project</th>
+                                <th className="px-4 py-2.5 text-[10px] font-mono font-bold text-zinc-500 uppercase tracking-widest">Work Category</th>
+                                <th className="px-4 py-2.5 text-[10px] font-mono font-bold text-zinc-500 uppercase tracking-widest text-right">Amount to Pay</th>
+                                <th className="px-4 py-2.5 text-[10px] font-mono font-bold text-zinc-500 uppercase tracking-widest">Requested</th>
+                                <th className="px-4 py-2.5 text-[10px] font-mono font-bold text-zinc-500 uppercase tracking-widest">Paid Date</th>
+                                <th className="px-4 py-2.5 text-[10px] font-mono font-bold text-zinc-500 uppercase tracking-widest">Payment Status</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            {filteredRows.length === 0 && (
+                                <tr>
+                                    <td colSpan={7} className="px-4 py-10 text-center">
+                                        <Users size={22} className="mx-auto mb-2 text-zinc-400" />
+                                        <p className="text-sm text-zinc-500">No payments match the current filters.</p>
+                                        <button
+                                            type="button"
+                                            onClick={clearFilters}
+                                            className="mt-3 inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-[11px] font-bold uppercase tracking-wider text-amber-600 dark:text-amber-400 hover:bg-amber-50 dark:hover:bg-amber-500/10 border border-amber-200 dark:border-amber-500/20 transition-colors"
+                                        >
+                                            <FilterX size={12} /> Clear Filters
+                                        </button>
+                                    </td>
+                                </tr>
+                            )}
+                            {filteredRows.map((row) => (
+                                <tr key={row.key} className="border-b border-zinc-100 dark:border-white/[0.03] hover:bg-zinc-50 dark:hover:bg-white/[0.02] transition-colors">
+                                    <td className="px-4 py-3">
+                                        <div className="flex items-center gap-2.5">
+                                            <div className="w-7 h-7 rounded-full bg-amber-500/15 flex items-center justify-center text-[10px] font-black text-amber-600 dark:text-amber-400 flex-shrink-0">
+                                                {row.name?.[0] || '?'}
+                                            </div>
+                                            <div className="min-w-0">
+                                                <div className="text-xs font-semibold text-zinc-900 dark:text-white truncate max-w-[180px]">{row.name}</div>
+                                                {row.companyName && (
+                                                    <div className="text-[10px] text-zinc-500 dark:text-zinc-400 truncate max-w-[180px]">{row.companyName}</div>
+                                                )}
+                                            </div>
+                                        </div>
+                                    </td>
+                                    <td className="px-4 py-3">
+                                        <div className="min-w-0">
+                                            <div className="text-xs text-zinc-700 dark:text-zinc-300 truncate max-w-[200px]" title={row.projectName}>
+                                                {row.projectName}
+                                            </div>
+                                            {row.projectAddress && (
+                                                <div className="text-[10px] text-zinc-500 dark:text-zinc-400 truncate max-w-[200px]" title={row.projectAddress}>
+                                                    {row.projectAddress}
+                                                </div>
+                                            )}
+                                        </div>
+                                    </td>
+                                    <td className="px-4 py-3">
+                                        <span className={`text-[11px] font-bold rounded-md px-1.5 py-0.5 border whitespace-nowrap ${CATEGORY_COLORS[row.workCategory] || 'text-zinc-400 bg-zinc-500/10 border-zinc-500/20'}`}>
+                                            {row.workCategory}
+                                        </span>
+                                    </td>
+                                    <td className="px-4 py-3 text-right">
+                                        <span className="font-mono text-xs font-bold text-amber-600 dark:text-amber-400">
+                                            {fmt(row.amount)}
+                                        </span>
+                                    </td>
+                                    <td className="px-4 py-3">
+                                        <span className="text-[11px] font-mono text-zinc-500 dark:text-zinc-400 whitespace-nowrap">
+                                            {fmtDate(row.requestedAt)}
+                                        </span>
+                                    </td>
+                                    <td className="px-4 py-3">
+                                        <span className={`text-[11px] font-mono whitespace-nowrap ${row.paidAt ? 'text-emerald-600 dark:text-emerald-400 font-semibold' : 'text-zinc-400 dark:text-zinc-500'}`}>
+                                            {fmtDate(row.paidAt)}
+                                        </span>
+                                    </td>
+                                    <td className="px-4 py-3">
+                                        <span className={`text-[11px] font-bold rounded-md px-1.5 py-0.5 border whitespace-nowrap ${PAYMENT_STATUS_COLORS[row.paymentStatus] || 'text-zinc-400 bg-zinc-500/10 border-zinc-500/20'}`}>
+                                            {row.paymentStatus}
+                                        </span>
+                                    </td>
+                                </tr>
+                            ))}
+                        </tbody>
+                        <tfoot className="border-t-2 border-zinc-300 dark:border-white/10">
+                            <tr className="bg-zinc-50 dark:bg-white/[0.03]">
+                                <td colSpan={3} className="px-4 py-3 text-[10px] font-mono font-bold text-zinc-500 uppercase tracking-widest">
+                                    {hasActiveFilters ? 'Filtered Total' : 'Total Amount'}
+                                </td>
+                                <td className="px-4 py-3 text-right">
+                                    <span className="font-mono text-sm font-extrabold text-amber-600 dark:text-amber-400">
+                                        {fmt(total)}
+                                    </span>
+                                </td>
+                                <td colSpan={3} />
+                            </tr>
+                            <tr className="bg-zinc-50 dark:bg-white/[0.03]">
+                                <td colSpan={3} className="px-4 py-3 text-[10px] font-mono font-bold text-zinc-500 uppercase tracking-widest">
+                                    Outstanding (Unpaid)
+                                </td>
+                                <td className="px-4 py-3 text-right">
+                                    <span className="font-mono text-sm font-extrabold text-amber-600 dark:text-amber-400">
+                                        {fmt(outstanding)}
+                                    </span>
+                                </td>
+                                <td colSpan={3} />
+                            </tr>
+                        </tfoot>
+                    </table>
+                </div>
+            )}
+        </div>
+    );
+};
+
+export default SubcontractorPaymentsPanel;
diff --git a/src/components/subcontractor/AssignTaskModal.jsx b/src/components/subcontractor/AssignTaskModal.jsx
new file mode 100644
index 0000000..d868e07
--- /dev/null
+++ b/src/components/subcontractor/AssignTaskModal.jsx
@@ -0,0 +1,476 @@
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { toast } from 'sonner';
+import {
+    X, ClipboardList, MapPin, Calendar, Camera, AlertCircle,
+    Trash2, User, Star, ImagePlus, Loader2,
+} from 'lucide-react';
+import { useMockStore } from '../../data/mockStore';
+import { useAuth } from '../../context/AuthContext';
+
+const inputBase = "w-full bg-white dark:bg-[#18181b] border border-zinc-200 dark:border-white/10 rounded-xl px-4 py-2.5 text-sm text-zinc-900 dark:text-white placeholder-zinc-400 dark:placeholder-zinc-600 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 transition-all";
+
+const PRIORITY_STYLES = {
+    low:    { activeBg: 'bg-zinc-900 dark:bg-white', activeText: 'text-white dark:text-black', dot: 'bg-zinc-400' },
+    medium: { activeBg: 'bg-blue-600',               activeText: 'text-white',                  dot: 'bg-blue-500' },
+    high:   { activeBg: 'bg-red-600',                activeText: 'text-white',                  dot: 'bg-red-500' },
+};
+
+const todayIso = () => new Date().toISOString().slice(0, 10);
+
+const emptyForm = {
+    subcontractorId: '',
+    title: '',
+    location: '',
+    description: '',
+    dueDate: '',
+    priority: 'medium',
+    photos: [],
+};
+
+const AssignTaskModal = ({ isOpen, onClose, task = null, defaultSubcontractorId = null }) => {
+    const { user } = useAuth();
+    const { subcontractors, orgSettings, addSubcontractorTask, updateSubcontractorTask, taskPriorities } = useMockStore();
+    const fileInputRef = useRef(null);
+
+    const isEdit = Boolean(task);
+    const activeSubs = useMemo(() => subcontractors.filter(s => s.status === 'active'), [subcontractors]);
+
+    const [form, setForm] = useState(emptyForm);
+    const [errors, setErrors] = useState({});
+    const [submitting, setSubmitting] = useState(false);
+
+    // Reset / hydrate when modal opens or task switches
+    useEffect(() => {
+        if (!isOpen) return;
+        if (task) {
+            setForm({
+                subcontractorId: task.subcontractorId,
+                title: task.title,
+                location: task.location,
+                description: task.description || '',
+                dueDate: task.dueDate,
+                priority: task.priority || 'medium',
+                photos: (task.photos || []).map(p => ({ ...p, isExisting: true })),
+            });
+        } else {
+            setForm({
+                ...emptyForm,
+                subcontractorId: defaultSubcontractorId || '',
+            });
+        }
+        setErrors({});
+        setSubmitting(false);
+    }, [isOpen, task, defaultSubcontractorId]);
+
+    // Escape key
+    useEffect(() => {
+        const handler = (e) => { if (e.key === 'Escape') onClose(); };
+        if (isOpen) window.addEventListener('keydown', handler);
+        return () => window.removeEventListener('keydown', handler);
+    }, [isOpen, onClose]);
+
+    // Body scroll lock
+    useEffect(() => {
+        if (!isOpen) return;
+        const prev = document.body.style.overflow;
+        document.body.style.overflow = 'hidden';
+        return () => { document.body.style.overflow = prev; };
+    }, [isOpen]);
+
+    // Clean up object URLs we created for newly-picked photos
+    useEffect(() => () => {
+        form.photos.forEach(p => { if (p.objectUrl) URL.revokeObjectURL(p.objectUrl); });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    if (!isOpen) return null;
+
+    const setField = (k, v) => {
+        setForm(prev => ({ ...prev, [k]: v }));
+        setErrors(prev => ({ ...prev, [k]: undefined }));
+    };
+
+    const handleFiles = (e) => {
+        const incoming = Array.from(e.target.files || []);
+        if (!incoming.length) return;
+        const next = incoming.map((file, i) => {
+            const objectUrl = URL.createObjectURL(file);
+            return {
+                id: `new_${Date.now()}_${i}`,
+                name: file.name,
+                url: objectUrl,
+                objectUrl,
+                annotation: '',
+            };
+        });
+        setForm(prev => ({ ...prev, photos: [...prev.photos, ...next] }));
+        // reset input so picking the same file again still triggers change
+        e.target.value = '';
+    };
+
+    const removePhoto = (id) => {
+        setForm(prev => {
+            const photo = prev.photos.find(p => p.id === id);
+            if (photo?.objectUrl) URL.revokeObjectURL(photo.objectUrl);
+            return { ...prev, photos: prev.photos.filter(p => p.id !== id) };
+        });
+    };
+
+    const updatePhotoAnnotation = (id, annotation) => {
+        setForm(prev => ({
+            ...prev,
+            photos: prev.photos.map(p => p.id === id ? { ...p, annotation } : p),
+        }));
+    };
+
+    const validate = () => {
+        const err = {};
+        if (!form.subcontractorId) err.subcontractorId = 'Select a subcontractor.';
+        if (!form.title.trim()) err.title = 'Task title is required.';
+        if (!form.location.trim()) err.location = 'Location is required.';
+        if (!form.dueDate) err.dueDate = 'Due date is required.';
+        else if (!isEdit && form.dueDate < todayIso()) err.dueDate = 'Due date must be today or later.';
+        setErrors(err);
+        return Object.keys(err).length === 0;
+    };
+
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+        if (!validate()) return;
+
+        setSubmitting(true);
+        // Tiny delay to surface the loading state — replace with real API later.
+        await new Promise(r => setTimeout(r, 400));
+
+        const payload = {
+            companyId: 'lynkeduppro',
+            companyName: orgSettings?.orgName || 'Your Company',
+            assignedBy: user?.id || 'unknown',
+            assignedByName: user?.name || 'Unknown',
+            subcontractorId: form.subcontractorId,
+            title: form.title.trim(),
+            location: form.location.trim(),
+            description: form.description.trim(),
+            dueDate: form.dueDate,
+            priority: form.priority,
+            photos: form.photos.map(p => ({
+                id: p.isExisting ? p.id : undefined,
+                name: p.name,
+                url: p.url,
+                annotation: p.annotation || '',
+            })),
+        };
+
+        try {
+            if (isEdit) {
+                updateSubcontractorTask(task.id, {
+                    subcontractorId: payload.subcontractorId,
+                    title: payload.title,
+                    location: payload.location,
+                    description: payload.description,
+                    dueDate: payload.dueDate,
+                    priority: payload.priority,
+                    photos: payload.photos,
+                });
+            } else {
+                addSubcontractorTask(payload);
+            }
+            onClose();
+        } catch {
+            toast.error('Something went wrong. Please try again.');
+        } finally {
+            setSubmitting(false);
+        }
+    };
+
+    return createPortal(
+        <div className="fixed inset-0 z-[9999] flex items-end sm:items-center justify-center sm:p-6" role="dialog" aria-modal="true">
+            <div className="absolute inset-0 bg-black/60 backdrop-blur-sm" onClick={submitting ? undefined : onClose} />
+            <div className="relative w-full sm:max-w-2xl h-[92dvh] sm:h-auto sm:max-h-[90vh] bg-white dark:bg-[#121214] rounded-t-2xl sm:rounded-2xl shadow-2xl border border-zinc-200 dark:border-white/10 overflow-hidden flex flex-col animate-in slide-in-from-bottom-10 duration-200">
+                {/* Header */}
+                <div className="px-5 sm:px-6 py-4 sm:py-5 border-b border-zinc-200 dark:border-white/10 flex items-center justify-between bg-zinc-50/50 dark:bg-white/5 shrink-0">
+                    <div className="flex items-center gap-3 min-w-0">
+                        <div className="p-2 rounded-xl bg-blue-500/10 text-blue-500 shrink-0">
+                            <ClipboardList size={20} />
+                        </div>
+                        <div className="min-w-0">
+                            <h2 className="text-base sm:text-lg font-bold text-zinc-900 dark:text-white uppercase tracking-wider truncate">
+                                {isEdit ? 'Edit Task' : 'Assign Task'}
+                            </h2>
+                            <p className="text-[11px] text-zinc-500 dark:text-zinc-400 font-mono mt-0.5 truncate">
+                                {isEdit ? task.id : 'New subcontractor task'}
+                            </p>
+                        </div>
+                    </div>
+                    <button
+                        type="button"
+                        onClick={onClose}
+                        disabled={submitting}
+                        className="p-2 rounded-lg bg-zinc-100 dark:bg-white/10 text-zinc-500 hover:text-red-500 transition-colors disabled:opacity-50"
+                        aria-label="Close"
+                    >
+                        <X size={18} />
+                    </button>
+                </div>
+
+                {/* Body */}
+                <form onSubmit={handleSubmit} className="flex-1 flex flex-col min-h-0">
+                    <div className="flex-1 overflow-y-auto px-5 sm:px-6 py-5 space-y-5 custom-scrollbar">
+                        {/* Subcontractor select */}
+                        <div className="space-y-1.5">
+                            <label htmlFor="sct-subcontractor" className="text-xs font-bold uppercase tracking-wider text-zinc-600 dark:text-zinc-400 flex items-center gap-1.5">
+                                <User size={12} />
+                                Subcontractor <span className="text-red-500">*</span>
+                            </label>
+                            <select
+                                id="sct-subcontractor"
+                                value={form.subcontractorId}
+                                onChange={(e) => setField('subcontractorId', e.target.value)}
+                                className={inputBase}
+                                aria-invalid={Boolean(errors.subcontractorId)}
+                            >
+                                <option value="" disabled>Select a subcontractor…</option>
+                                {activeSubs.map(s => (
+                                    <option key={s.id} value={s.id}>
+                                        {s.name} — {s.tradeType} ({s.companyName})
+                                    </option>
+                                ))}
+                            </select>
+                            {/* Preview of selected sub */}
+                            {form.subcontractorId && (() => {
+                                const sub = activeSubs.find(s => s.id === form.subcontractorId);
+                                if (!sub) return null;
+                                return (
+                                    <div className="mt-2 p-3 rounded-xl bg-zinc-50 dark:bg-white/5 border border-zinc-200 dark:border-white/10 flex items-center justify-between gap-3 text-xs">
+                                        <div className="flex items-center gap-3 min-w-0">
+                                            <div className="w-9 h-9 rounded-full bg-blue-500/10 text-blue-500 flex items-center justify-center font-bold shrink-0">
+                                                {sub.name.charAt(0)}
+                                            </div>
+                                            <div className="min-w-0">
+                                                <div className="font-bold text-zinc-900 dark:text-white truncate">{sub.name}</div>
+                                                <div className="text-zinc-500 truncate">{sub.email} · {sub.phone}</div>
+                                            </div>
+                                        </div>
+                                        <span className="flex items-center gap-1 text-amber-500 font-bold shrink-0">
+                                            <Star size={12} fill="currentColor" />
+                                            {sub.rating?.toFixed?.(1) ?? '—'}
+                                        </span>
+                                    </div>
+                                );
+                            })()}
+                            {errors.subcontractorId && <FieldError msg={errors.subcontractorId} />}
+                        </div>
+
+                        {/* Title */}
+                        <div className="space-y-1.5">
+                            <label htmlFor="sct-title" className="text-xs font-bold uppercase tracking-wider text-zinc-600 dark:text-zinc-400">
+                                Task Title <span className="text-red-500">*</span>
+                            </label>
+                            <input
+                                id="sct-title"
+                                type="text"
+                                value={form.title}
+                                onChange={(e) => setField('title', e.target.value)}
+                                className={inputBase}
+                                placeholder="e.g. Replace damaged ridge cap"
+                                maxLength={120}
+                                aria-invalid={Boolean(errors.title)}
+                            />
+                            {errors.title && <FieldError msg={errors.title} />}
+                        </div>
+
+                        {/* Location */}
+                        <div className="space-y-1.5">
+                            <label htmlFor="sct-location" className="text-xs font-bold uppercase tracking-wider text-zinc-600 dark:text-zinc-400 flex items-center gap-1.5">
+                                <MapPin size={12} />
+                                Location / Address <span className="text-red-500">*</span>
+                            </label>
+                            <input
+                                id="sct-location"
+                                type="text"
+                                value={form.location}
+                                onChange={(e) => setField('location', e.target.value)}
+                                className={inputBase}
+                                placeholder="2612 Dunwick Dr, Plano, TX 75023"
+                                aria-invalid={Boolean(errors.location)}
+                            />
+                            {errors.location && <FieldError msg={errors.location} />}
+                        </div>
+
+                        {/* Description */}
+                        <div className="space-y-1.5">
+                            <label htmlFor="sct-description" className="text-xs font-bold uppercase tracking-wider text-zinc-600 dark:text-zinc-400">
+                                Task Description
+                            </label>
+                            <textarea
+                                id="sct-description"
+                                value={form.description}
+                                onChange={(e) => setField('description', e.target.value)}
+                                className={inputBase}
+                                rows={3}
+                                placeholder="Scope of work, access notes, materials staged…"
+                            />
+                        </div>
+
+                        {/* Due date + Priority */}
+                        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                            <div className="space-y-1.5">
+                                <label htmlFor="sct-due" className="text-xs font-bold uppercase tracking-wider text-zinc-600 dark:text-zinc-400 flex items-center gap-1.5">
+                                    <Calendar size={12} />
+                                    Due Date <span className="text-red-500">*</span>
+                                </label>
+                                <input
+                                    id="sct-due"
+                                    type="date"
+                                    value={form.dueDate}
+                                    min={isEdit ? undefined : todayIso()}
+                                    onChange={(e) => setField('dueDate', e.target.value)}
+                                    className={inputBase}
+                                    aria-invalid={Boolean(errors.dueDate)}
+                                />
+                                {errors.dueDate && <FieldError msg={errors.dueDate} />}
+                            </div>
+
+                            <div className="space-y-1.5">
+                                <span className="text-xs font-bold uppercase tracking-wider text-zinc-600 dark:text-zinc-400 block">
+                                    Priority <span className="text-red-500">*</span>
+                                </span>
+                                <div className="flex gap-2" role="radiogroup" aria-label="Priority">
+                                    {taskPriorities.map(p => {
+                                        const style = PRIORITY_STYLES[p.value] || PRIORITY_STYLES.medium;
+                                        const active = form.priority === p.value;
+                                        return (
+                                            <button
+                                                key={p.value}
+                                                type="button"
+                                                role="radio"
+                                                aria-checked={active}
+                                                onClick={() => setField('priority', p.value)}
+                                                className={`flex-1 flex items-center justify-center gap-2 px-3 py-2.5 rounded-xl text-xs font-bold uppercase tracking-wider border transition-all ${
+                                                    active
+                                                        ? `${style.activeBg} ${style.activeText} border-transparent shadow-sm`
+                                                        : 'bg-zinc-100 dark:bg-white/5 text-zinc-500 dark:text-zinc-400 border-zinc-200 dark:border-white/10 hover:bg-zinc-200 dark:hover:bg-white/10'
+                                                }`}
+                                            >
+                                                <span className={`w-2 h-2 rounded-full ${style.dot}`} />
+                                                {p.label}
+                                            </button>
+                                        );
+                                    })}
+                                </div>
+                            </div>
+                        </div>
+
+                        {/* Photos */}
+                        <div className="space-y-2">
+                            <div className="flex items-center justify-between">
+                                <span className="text-xs font-bold uppercase tracking-wider text-zinc-600 dark:text-zinc-400 flex items-center gap-1.5">
+                                    <Camera size={12} />
+                                    Photos & Annotations
+                                </span>
+                                <button
+                                    type="button"
+                                    onClick={() => fileInputRef.current?.click()}
+                                    className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-[11px] font-bold uppercase tracking-wider bg-blue-500/10 text-blue-600 dark:text-blue-400 hover:bg-blue-500/20 transition-colors"
+                                >
+                                    <ImagePlus size={12} />
+                                    Add Photo
+                                </button>
+                                <input
+                                    ref={fileInputRef}
+                                    type="file"
+                                    accept="image/*"
+                                    multiple
+                                    onChange={handleFiles}
+                                    className="hidden"
+                                />
+                            </div>
+
+                            {form.photos.length === 0 ? (
+                                <button
+                                    type="button"
+                                    onClick={() => fileInputRef.current?.click()}
+                                    className="w-full border-2 border-dashed border-zinc-300 dark:border-white/10 rounded-xl py-8 flex flex-col items-center justify-center text-zinc-500 hover:border-blue-500/50 hover:bg-blue-500/5 transition-colors"
+                                >
+                                    <Camera size={28} className="mb-2 opacity-60" />
+                                    <p className="text-xs font-semibold">Click to upload photos</p>
+                                    <p className="text-[10px] text-zinc-400 mt-1">Add an annotation note for each (e.g. "Paint here")</p>
+                                </button>
+                            ) : (
+                                <div className="space-y-2">
+                                    {form.photos.map((p, idx) => (
+                                        <div key={p.id} className="flex gap-3 p-2.5 rounded-xl bg-zinc-50 dark:bg-white/5 border border-zinc-200 dark:border-white/10">
+                                            <div className="w-20 h-20 rounded-lg overflow-hidden bg-zinc-200 dark:bg-zinc-800 shrink-0">
+                                                <img src={p.url} alt={p.name || `Photo ${idx + 1}`} className="w-full h-full object-cover" />
+                                            </div>
+                                            <div className="flex-1 min-w-0 flex flex-col gap-1.5">
+                                                <div className="flex items-center justify-between gap-2">
+                                                    <span className="text-xs font-mono text-zinc-500 truncate">{p.name}</span>
+                                                    <button
+                                                        type="button"
+                                                        onClick={() => removePhoto(p.id)}
+                                                        className="p-1.5 rounded-md text-zinc-400 hover:text-red-500 hover:bg-red-500/10 transition-colors shrink-0"
+                                                        aria-label="Remove photo"
+                                                    >
+                                                        <Trash2 size={14} />
+                                                    </button>
+                                                </div>
+                                                <input
+                                                    type="text"
+                                                    value={p.annotation}
+                                                    onChange={(e) => updatePhotoAnnotation(p.id, e.target.value)}
+                                                    placeholder='Annotation (e.g. "Paint here", "Repair this corner")'
+                                                    className="w-full bg-white dark:bg-[#18181b] border border-zinc-200 dark:border-white/10 rounded-lg px-2.5 py-1.5 text-xs text-zinc-900 dark:text-white placeholder-zinc-400 focus:outline-none focus:border-blue-500"
+                                                    maxLength={140}
+                                                />
+                                            </div>
+                                        </div>
+                                    ))}
+                                </div>
+                            )}
+                        </div>
+
+                        {/* Status indicator (informational) */}
+                        {!isEdit && (
+                            <div className="flex items-center gap-2 text-xs text-zinc-500 dark:text-zinc-400 p-3 rounded-xl bg-blue-500/5 border border-blue-500/10">
+                                <AlertCircle size={14} className="text-blue-500 shrink-0" />
+                                Task will be created with status <span className="font-bold text-zinc-900 dark:text-white">Assigned</span> and the subcontractor will be notified.
+                            </div>
+                        )}
+                    </div>
+
+                    {/* Footer */}
+                    <div className="px-5 sm:px-6 py-4 border-t border-zinc-200 dark:border-white/10 bg-zinc-50 dark:bg-white/[0.02] flex flex-col-reverse sm:flex-row sm:justify-end gap-2 sm:gap-3 shrink-0">
+                        <button
+                            type="button"
+                            onClick={onClose}
+                            disabled={submitting}
+                            className="px-5 py-2.5 text-sm font-bold rounded-xl border border-zinc-200 dark:border-white/10 text-zinc-600 dark:text-zinc-400 hover:bg-zinc-100 dark:hover:bg-white/5 hover:text-zinc-900 dark:hover:text-white transition-colors disabled:opacity-50"
+                        >
+                            Cancel
+                        </button>
+                        <button
+                            type="submit"
+                            disabled={submitting}
+                            className="inline-flex items-center justify-center gap-2 px-6 py-2.5 text-sm font-bold rounded-xl bg-blue-600 hover:bg-blue-500 text-white shadow-lg shadow-blue-500/20 transition-all disabled:opacity-60"
+                        >
+                            {submitting && <Loader2 size={14} className="animate-spin" />}
+                            {isEdit ? 'Save Changes' : 'Assign Task'}
+                        </button>
+                    </div>
+                </form>
+            </div>
+        </div>,
+        document.body,
+    );
+};
+
+const FieldError = ({ msg }) => (
+    <p className="text-[11px] font-semibold text-red-500 flex items-center gap-1 mt-1">
+        <AlertCircle size={11} />
+        {msg}
+    </p>
+);
+
+export default AssignTaskModal;
diff --git a/src/components/subcontractor/NotificationsPanel.jsx b/src/components/subcontractor/NotificationsPanel.jsx
new file mode 100644
index 0000000..9467bd9
--- /dev/null
+++ b/src/components/subcontractor/NotificationsPanel.jsx
@@ -0,0 +1,197 @@
+import React, { useMemo, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { SpotlightCard } from '../SpotlightCard';
+import {
+    Bell, ClipboardList, MessageSquare, RefreshCcw, CheckCircle, AlertCircle,
+} from 'lucide-react';
+
+// Allowed notification types for the subcontractor dashboard.
+// Keep keys in sync with mockStore notification.type values.
+const NOTIF_CONFIG = {
+    task_assigned: {
+        label: 'New Task Assigned',
+        tone: 'text-blue-600 bg-blue-100 dark:text-blue-400 dark:bg-blue-500/15',
+        icon: ClipboardList,
+        side: 'border-l-blue-500',
+    },
+    message_received: {
+        label: 'Message Received',
+        tone: 'text-emerald-600 bg-emerald-100 dark:text-emerald-400 dark:bg-emerald-500/15',
+        icon: MessageSquare,
+        side: 'border-l-emerald-500',
+    },
+    task_updated: {
+        label: 'Task Updated',
+        tone: 'text-amber-600 bg-amber-100 dark:text-amber-400 dark:bg-amber-500/15',
+        icon: RefreshCcw,
+        side: 'border-l-amber-500',
+    },
+    status_changed: {
+        label: 'Status Changed',
+        tone: 'text-purple-600 bg-purple-100 dark:text-purple-400 dark:bg-purple-500/15',
+        icon: CheckCircle,
+        side: 'border-l-purple-500',
+    },
+};
+
+const ALLOWED_TYPES = Object.keys(NOTIF_CONFIG);
+
+const formatDateTime = (iso) => {
+    if (!iso) return '—';
+    try {
+        const d = new Date(iso);
+        const dateStr = d.toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' });
+        const timeStr = d.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit' });
+        return `${dateStr} · ${timeStr}`;
+    } catch { return iso; }
+};
+
+const TABS = [
+    { key: 'all',              label: 'All' },
+    { key: 'task_assigned',    label: 'New Task' },
+    { key: 'message_received', label: 'Message' },
+    { key: 'task_updated',     label: 'Updates' },
+    { key: 'status_changed',   label: 'Status' },
+];
+
+/**
+ * NotificationsPanel — global subcontractor notifications.
+ *
+ * Renders a SpotlightCard with tabbed filtering and a list of notification rows.
+ * Each row navigates to its referenced task (if any) when clicked.
+ */
+export const NotificationsPanel = ({ notifications, onMarkAllRead, onNotificationClick }) => {
+    const navigate = useNavigate();
+    const [tab, setTab] = useState('all');
+
+    const allowed = useMemo(
+        () => notifications.filter(n => ALLOWED_TYPES.includes(n.type)),
+        [notifications],
+    );
+
+    const filtered = useMemo(() => {
+        if (tab === 'all') return allowed;
+        return allowed.filter(n => n.type === tab);
+    }, [allowed, tab]);
+
+    const unreadCount = allowed.filter(n => !n.isRead).length;
+
+    const handleClick = (n) => {
+        if (onNotificationClick) onNotificationClick(n);
+        if (n.taskId) navigate(`/subcontractor/tasks/${n.taskId}`);
+    };
+
+    return (
+        <SpotlightCard className="p-5 sm:p-6">
+            <div className="flex items-center justify-between gap-3">
+                <div className="flex items-center gap-2.5 min-w-0">
+                    <div className="p-1.5 rounded-lg bg-blue-500/10 text-blue-500 shrink-0">
+                        <Bell size={14} />
+                    </div>
+                    <h3 className="text-sm sm:text-base font-bold text-zinc-900 dark:text-white tracking-wide">
+                        Notifications
+                    </h3>
+                    {unreadCount > 0 && (
+                        <span className="text-[10px] font-bold px-2 py-0.5 rounded-full bg-blue-500/10 text-blue-600 dark:text-blue-400 font-mono shrink-0">
+                            {unreadCount} new
+                        </span>
+                    )}
+                </div>
+                <button
+                    type="button"
+                    onClick={onMarkAllRead}
+                    disabled={unreadCount === 0}
+                    className="text-[11px] font-bold uppercase tracking-wider text-blue-600 dark:text-blue-400 hover:underline disabled:text-zinc-400 disabled:no-underline transition-colors shrink-0"
+                >
+                    Mark all read
+                </button>
+            </div>
+
+            {/* Tab strip — scrollable on narrow screens */}
+            <div className="mt-4 -mx-1 px-1 overflow-x-auto custom-scrollbar">
+                <div className="inline-flex rounded-xl bg-zinc-100 dark:bg-white/5 border border-zinc-200 dark:border-white/10 p-1 min-w-full">
+                    {TABS.map(t => {
+                        const count = t.key === 'all' ? allowed.length : allowed.filter(n => n.type === t.key).length;
+                        return (
+                            <TabPill
+                                key={t.key}
+                                active={tab === t.key}
+                                onClick={() => setTab(t.key)}
+                                label={t.label}
+                                count={count}
+                            />
+                        );
+                    })}
+                </div>
+            </div>
+
+            <div className="mt-4 space-y-2 max-h-[36rem] overflow-y-auto pr-1 custom-scrollbar">
+                {filtered.length === 0 ? (
+                    <div className="text-center py-10 text-zinc-500">
+                        <Bell size={20} className="mx-auto mb-2 opacity-50" />
+                        <p className="text-xs">You&apos;re all caught up.</p>
+                    </div>
+                ) : filtered.map(n => (
+                    <NotificationRow key={n.id} notification={n} onClick={() => handleClick(n)} />
+                ))}
+            </div>
+
+            <div className="mt-4 pt-3 border-t border-zinc-200 dark:border-white/10">
+                <p className="text-[10px] text-zinc-500 flex items-center gap-1.5">
+                    <AlertCircle size={10} /> In-app only · No SMS or email unless specified.
+                </p>
+            </div>
+        </SpotlightCard>
+    );
+};
+
+const TabPill = ({ active, onClick, label, count }) => (
+    <button
+        type="button"
+        onClick={onClick}
+        className={`flex items-center justify-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-bold whitespace-nowrap transition-colors
+            ${active
+                ? 'bg-white dark:bg-zinc-900 text-zinc-900 dark:text-white shadow-sm'
+                : 'text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-white'
+            }`}
+    >
+        {label}
+        {typeof count === 'number' && (
+            <span className={`text-[10px] font-mono px-1.5 rounded-full ${active ? 'bg-blue-100 text-blue-600 dark:bg-blue-500/20 dark:text-blue-400' : 'bg-zinc-200 dark:bg-white/10 text-zinc-500'}`}>
+                {count}
+            </span>
+        )}
+    </button>
+);
+
+const NotificationRow = ({ notification, onClick }) => {
+    const cfg = NOTIF_CONFIG[notification.type];
+    if (!cfg) return null;
+    const Icon = cfg.icon;
+    return (
+        <button
+            type="button"
+            onClick={onClick}
+            className={`w-full flex items-start gap-3 p-3 rounded-xl text-left border-l-2 ${cfg.side}
+                ${notification.isRead
+                    ? 'bg-zinc-50 dark:bg-white/[0.02] border-y border-r border-zinc-100 dark:border-white/5'
+                    : 'bg-white dark:bg-white/5 border-y border-r border-zinc-200 dark:border-white/10 shadow-sm'
+                }
+                hover:bg-zinc-100 dark:hover:bg-white/10 transition-colors`}
+        >
+            <div className={`p-1.5 rounded-lg shrink-0 ${cfg.tone}`}>
+                <Icon size={14} />
+            </div>
+            <div className="min-w-0 flex-1">
+                <div className="flex items-center gap-2">
+                    <span className="text-xs font-bold text-zinc-900 dark:text-white">{cfg.label}</span>
+                    {!notification.isRead && <span className="w-1.5 h-1.5 rounded-full bg-blue-500" />}
+                </div>
+                <p className="text-[11px] text-zinc-600 dark:text-zinc-400 mt-0.5 line-clamp-2">{notification.message}</p>
+                <p className="text-[10px] text-zinc-500 font-mono mt-1">{formatDateTime(notification.createdAt)}</p>
+            </div>
+        </button>
+    );
+};
+
+export default NotificationsPanel;
diff --git a/src/components/subcontractor/ReassignTaskModal.jsx b/src/components/subcontractor/ReassignTaskModal.jsx
new file mode 100644
index 0000000..d4afad6
--- /dev/null
+++ b/src/components/subcontractor/ReassignTaskModal.jsx
@@ -0,0 +1,89 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { X, Repeat, User, Loader2 } from 'lucide-react';
+import { useMockStore } from '../../data/mockStore';
+
+const inputBase = "w-full bg-white dark:bg-[#18181b] border border-zinc-200 dark:border-white/10 rounded-xl px-4 py-2.5 text-sm text-zinc-900 dark:text-white focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 transition-all";
+
+const ReassignTaskModal = ({ isOpen, onClose, task }) => {
+    const { subcontractors, reassignSubcontractorTask } = useMockStore();
+    const [selected, setSelected] = useState('');
+    const [submitting, setSubmitting] = useState(false);
+
+    const activeSubs = useMemo(
+        () => subcontractors.filter(s => s.status === 'active' && s.id !== task?.subcontractorId),
+        [subcontractors, task],
+    );
+
+    useEffect(() => {
+        if (isOpen) {
+            setSelected('');
+            setSubmitting(false);
+        }
+    }, [isOpen]);
+
+    useEffect(() => {
+        const handler = (e) => { if (e.key === 'Escape') onClose(); };
+        if (isOpen) window.addEventListener('keydown', handler);
+        return () => window.removeEventListener('keydown', handler);
+    }, [isOpen, onClose]);
+
+    if (!isOpen || !task) return null;
+
+    const handleConfirm = async () => {
+        if (!selected) return;
+        setSubmitting(true);
+        await new Promise(r => setTimeout(r, 300));
+        reassignSubcontractorTask(task.id, selected);
+        setSubmitting(false);
+        onClose();
+    };
+
+    return createPortal(
+        <div className="fixed inset-0 z-[9999] flex items-center justify-center p-4" role="dialog" aria-modal="true">
+            <div className="absolute inset-0 bg-black/60 backdrop-blur-sm" onClick={submitting ? undefined : onClose} />
+            <div className="relative w-full max-w-md bg-white dark:bg-[#121214] rounded-2xl shadow-2xl border border-zinc-200 dark:border-white/10 overflow-hidden animate-in zoom-in-95 duration-200">
+                <div className="px-5 py-4 border-b border-zinc-200 dark:border-white/10 flex items-center justify-between bg-zinc-50/50 dark:bg-white/5">
+                    <div className="flex items-center gap-3">
+                        <div className="p-2 rounded-xl bg-purple-500/10 text-purple-500"><Repeat size={18} /></div>
+                        <h2 className="text-base font-bold text-zinc-900 dark:text-white uppercase tracking-wider">Reassign Task</h2>
+                    </div>
+                    <button onClick={onClose} disabled={submitting} className="p-2 rounded-lg bg-zinc-100 dark:bg-white/10 text-zinc-500 hover:text-red-500 transition-colors disabled:opacity-50">
+                        <X size={18} />
+                    </button>
+                </div>
+                <div className="p-5 space-y-4">
+                    <div className="text-sm text-zinc-600 dark:text-zinc-400">
+                        Reassign <span className="font-bold text-zinc-900 dark:text-white">{task.title}</span> currently assigned to <span className="font-bold text-zinc-900 dark:text-white">{task.subcontractorName}</span>.
+                    </div>
+                    <div className="space-y-1.5">
+                        <label htmlFor="reassign-sub" className="text-xs font-bold uppercase tracking-wider text-zinc-600 dark:text-zinc-400 flex items-center gap-1.5">
+                            <User size={12} /> New Subcontractor
+                        </label>
+                        <select id="reassign-sub" value={selected} onChange={(e) => setSelected(e.target.value)} className={inputBase}>
+                            <option value="" disabled>Select a subcontractor…</option>
+                            {activeSubs.map(s => (
+                                <option key={s.id} value={s.id}>{s.name} — {s.tradeType}</option>
+                            ))}
+                        </select>
+                        {activeSubs.length === 0 && (
+                            <p className="text-xs text-zinc-500 mt-1">No other active subcontractors available.</p>
+                        )}
+                    </div>
+                </div>
+                <div className="px-5 py-4 border-t border-zinc-200 dark:border-white/10 bg-zinc-50 dark:bg-white/5 flex justify-end gap-2">
+                    <button type="button" onClick={onClose} disabled={submitting} className="px-4 py-2 text-sm font-bold rounded-xl border border-zinc-200 dark:border-white/10 text-zinc-600 dark:text-zinc-400 hover:bg-zinc-100 dark:hover:bg-white/5 transition-colors disabled:opacity-50">
+                        Cancel
+                    </button>
+                    <button type="button" onClick={handleConfirm} disabled={!selected || submitting} className="inline-flex items-center gap-2 px-5 py-2 text-sm font-bold rounded-xl bg-purple-600 hover:bg-purple-500 text-white shadow-lg shadow-purple-500/20 transition-all disabled:opacity-50">
+                        {submitting && <Loader2 size={14} className="animate-spin" />}
+                        Reassign
+                    </button>
+                </div>
+            </div>
+        </div>,
+        document.body,
+    );
+};
+
+export default ReassignTaskModal;
diff --git a/src/components/subcontractor/TaskViewModal.jsx b/src/components/subcontractor/TaskViewModal.jsx
new file mode 100644
index 0000000..5257219
--- /dev/null
+++ b/src/components/subcontractor/TaskViewModal.jsx
@@ -0,0 +1,132 @@
+import React, { useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { X, ClipboardList, MapPin, Calendar, User, Building2, Camera } from 'lucide-react';
+
+const PRIORITY_STYLES = {
+    low:    { label: 'Low',    cls: 'bg-zinc-200 text-zinc-700 dark:bg-zinc-700 dark:text-zinc-300' },
+    medium: { label: 'Medium', cls: 'bg-blue-100 text-blue-700 dark:bg-blue-500/20 dark:text-blue-400' },
+    high:   { label: 'High',   cls: 'bg-red-100 text-red-700 dark:bg-red-500/20 dark:text-red-400' },
+};
+
+const STATUS_STYLES = {
+    Assigned:      'bg-amber-100 text-amber-700 dark:bg-amber-500/20 dark:text-amber-400',
+    'In Progress': 'bg-blue-100 text-blue-700 dark:bg-blue-500/20 dark:text-blue-400',
+    Completed:     'bg-emerald-100 text-emerald-700 dark:bg-emerald-500/20 dark:text-emerald-400',
+    Cancelled:     'bg-zinc-200 text-zinc-600 dark:bg-zinc-700 dark:text-zinc-300',
+};
+
+const formatDate = (iso) => {
+    if (!iso) return '—';
+    try { return new Date(iso).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' }); }
+    catch { return iso; }
+};
+
+const TaskViewModal = ({ isOpen, onClose, task }) => {
+    useEffect(() => {
+        const handler = (e) => { if (e.key === 'Escape') onClose(); };
+        if (isOpen) window.addEventListener('keydown', handler);
+        return () => window.removeEventListener('keydown', handler);
+    }, [isOpen, onClose]);
+
+    if (!isOpen || !task) return null;
+
+    const priority = PRIORITY_STYLES[task.priority] || PRIORITY_STYLES.medium;
+
+    return createPortal(
+        <div className="fixed inset-0 z-[9999] flex items-end sm:items-center justify-center sm:p-6" role="dialog" aria-modal="true">
+            <div className="absolute inset-0 bg-black/60 backdrop-blur-sm" onClick={onClose} />
+            <div className="relative w-full sm:max-w-2xl h-[90dvh] sm:h-auto sm:max-h-[88vh] bg-white dark:bg-[#121214] rounded-t-2xl sm:rounded-2xl shadow-2xl border border-zinc-200 dark:border-white/10 overflow-hidden flex flex-col animate-in slide-in-from-bottom-10 duration-200">
+                <div className="px-5 sm:px-6 py-4 sm:py-5 border-b border-zinc-200 dark:border-white/10 flex items-center justify-between bg-zinc-50/50 dark:bg-white/5">
+                    <div className="flex items-center gap-3 min-w-0">
+                        <div className="p-2 rounded-xl bg-blue-500/10 text-blue-500 shrink-0">
+                            <ClipboardList size={20} />
+                        </div>
+                        <div className="min-w-0">
+                            <h2 className="text-base sm:text-lg font-bold text-zinc-900 dark:text-white uppercase tracking-wider truncate">Task Details</h2>
+                            <p className="text-[11px] text-zinc-500 font-mono mt-0.5 truncate">{task.id}</p>
+                        </div>
+                    </div>
+                    <button onClick={onClose} className="p-2 rounded-lg bg-zinc-100 dark:bg-white/10 text-zinc-500 hover:text-red-500 transition-colors">
+                        <X size={18} />
+                    </button>
+                </div>
+
+                <div className="flex-1 overflow-y-auto px-5 sm:px-6 py-5 space-y-5 custom-scrollbar">
+                    {/* Title + badges */}
+                    <div>
+                        <h3 className="text-xl sm:text-2xl font-bold text-zinc-900 dark:text-white">{task.title}</h3>
+                        <div className="flex flex-wrap items-center gap-2 mt-2">
+                            <span className={`px-2.5 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-wide ${STATUS_STYLES[task.status] || STATUS_STYLES.Assigned}`}>
+                                {task.status}
+                            </span>
+                            <span className={`px-2.5 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-wide ${priority.cls}`}>
+                                {priority.label} priority
+                            </span>
+                        </div>
+                    </div>
+
+                    {/* Meta grid */}
+                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+                        <Meta icon={User} label="Subcontractor" value={task.subcontractorName} />
+                        <Meta icon={Building2} label="Assigned By" value={`${task.assignedByName} · ${task.companyName}`} />
+                        <Meta icon={MapPin} label="Location" value={task.location} />
+                        <Meta icon={Calendar} label="Due Date" value={formatDate(task.dueDate)} />
+                        <Meta icon={Calendar} label="Created" value={formatDate(task.createdAt)} />
+                        <Meta icon={Calendar} label="Last Updated" value={formatDate(task.updatedAt)} />
+                    </div>
+
+                    {/* Description */}
+                    {task.description && (
+                        <div className="p-4 rounded-xl bg-zinc-50 dark:bg-white/5 border border-zinc-200 dark:border-white/10">
+                            <h4 className="text-xs font-bold uppercase tracking-wider text-zinc-500 mb-2">Description</h4>
+                            <p className="text-sm text-zinc-700 dark:text-zinc-300 whitespace-pre-line">{task.description}</p>
+                        </div>
+                    )}
+
+                    {/* Photos */}
+                    <div>
+                        <h4 className="text-xs font-bold uppercase tracking-wider text-zinc-500 mb-2 flex items-center gap-1.5">
+                            <Camera size={12} /> Photos ({task.photos?.length || 0})
+                        </h4>
+                        {(!task.photos || task.photos.length === 0) ? (
+                            <p className="text-xs text-zinc-500 italic">No photos attached.</p>
+                        ) : (
+                            <div className="grid grid-cols-2 sm:grid-cols-3 gap-3">
+                                {task.photos.map((p) => (
+                                    <div key={p.id} className="rounded-xl overflow-hidden border border-zinc-200 dark:border-white/10 bg-zinc-50 dark:bg-white/5">
+                                        <div className="aspect-square bg-zinc-200 dark:bg-zinc-800">
+                                            <img src={p.url} alt={p.name || 'Task photo'} className="w-full h-full object-cover" />
+                                        </div>
+                                        {p.annotation && (
+                                            <div className="p-2 text-[11px] font-semibold text-zinc-700 dark:text-zinc-300">
+                                                {p.annotation}
+                                            </div>
+                                        )}
+                                    </div>
+                                ))}
+                            </div>
+                        )}
+                    </div>
+                </div>
+
+                <div className="px-5 sm:px-6 py-4 border-t border-zinc-200 dark:border-white/10 bg-zinc-50 dark:bg-white/5 flex justify-end">
+                    <button onClick={onClose} className="px-5 py-2 text-sm font-bold rounded-xl border border-zinc-200 dark:border-white/10 text-zinc-600 dark:text-zinc-400 hover:bg-zinc-100 dark:hover:bg-white/5 transition-colors">
+                        Close
+                    </button>
+                </div>
+            </div>
+        </div>,
+        document.body,
+    );
+};
+
+const Meta = ({ icon: MetaIcon, label, value }) => (
+    <div className="p-3 rounded-xl bg-zinc-50 dark:bg-white/5 border border-zinc-200 dark:border-white/10">
+        <div className="text-[10px] font-bold uppercase tracking-wider text-zinc-500 flex items-center gap-1.5 mb-1">
+            <MetaIcon size={12} /> {label}
+        </div>
+        <div className="text-sm font-semibold text-zinc-900 dark:text-white">{value || '—'}</div>
+    </div>
+);
+
+export default TaskViewModal;
diff --git a/src/data/mockStore.jsx b/src/data/mockStore.jsx
index 9ee5028..1662360 100644
--- a/src/data/mockStore.jsx
+++ b/src/data/mockStore.jsx
@@ -677,7 +677,7 @@ const MOCK_USERS = [
         companyName: 'Johnson Development Group',
         phone: '972-555-1234'
     },
-    // Owner 2 — High Risk, vendor payment delays, over-budget project
+    // Owner 2 — High Volume, large commercial portfolio
     {
         id: 'own_002',
         type: 'owner',
@@ -978,9 +978,9 @@ const MOCK_OWNERS = [
         lastActivityDate: '2026-02-15',
         dashboardSummary: {
             totalBudget: 187000,
-            committedCost: 156200,
-            actualSpent: 131500,
-            roiProjection: 12.4,
+            committedCost: 130100,
+            actualSpent: 94100,
+            roiProjection: 18.6,
             pendingApprovals: 3,
             openChangeOrders: 2,
             openRFIs: 1,
@@ -1034,9 +1034,9 @@ const MOCK_OWNERS = [
         lastActivityDate: '2026-02-12',
         dashboardSummary: {
             totalBudget: 430000,
-            committedCost: 385000,
-            actualSpent: 291300,
-            roiProjection: 4.8,
+            committedCost: 330500,
+            actualSpent: 233100,
+            roiProjection: 14.2,
             pendingApprovals: 5,
             openChangeOrders: 5,
             openRFIs: 3,
@@ -1048,12 +1048,12 @@ const MOCK_OWNERS = [
                 { name: 'Waterproofing Application', project: 'Legacy Town Center', dueDate: '2026-02-12', projectId: 'proj_011' }
             ],
             cashFlowForecast: [
-                { month: 'Mar 2026', inflow: 85000, outflow: 92000 },
-                { month: 'Apr 2026', inflow: 72000, outflow: 68000 },
-                { month: 'May 2026', inflow: 55000, outflow: 45000 },
-                { month: 'Jun 2026', inflow: 40000, outflow: 32000 },
-                { month: 'Jul 2026', inflow: 25000, outflow: 18000 },
-                { month: 'Aug 2026', inflow: 15000, outflow: 10000 }
+                { month: 'Mar 2026', inflow: 95000, outflow: 72000 },
+                { month: 'Apr 2026', inflow: 78000, outflow: 58000 },
+                { month: 'May 2026', inflow: 60000, outflow: 42000 },
+                { month: 'Jun 2026', inflow: 42000, outflow: 30000 },
+                { month: 'Jul 2026', inflow: 28000, outflow: 17000 },
+                { month: 'Aug 2026', inflow: 16000, outflow: 9000 }
             ],
             monthlySpend: [
                 { month: 'Mar 2025', amount: 0 },
@@ -2073,11 +2073,11 @@ const MOCK_PROJECTS = [
         phase: 'Structural',
         budget: 45000,
         approvedBudget: 45000,
-        committedCost: 38500,
-        actualCost: 22500,
-        spent: 22500,
-        variancePercent: -50.0,
-        margin: 0.40,
+        committedCost: 24500,
+        actualCost: 16500,
+        spent: 16500,
+        variancePercent: -63.3,
+        margin: 0.33,
         commissionType: 'percent_gross',
         commissionRate: 10,
         commission: 4500,
@@ -2089,12 +2089,12 @@ const MOCK_PROJECTS = [
         changeOrderCount: 0,
         pendingInvoiceCount: 2,
         budgetBreakdown: [
-            { name: 'ABC Supply Co.', category: 'Materials - Shingles', allocated: 15000, committed: 14200, actual: 8500 },
-            { name: 'ABC Supply Co.', category: 'Materials - Underlayment', allocated: 3500, committed: 3355, actual: 3355 },
-            { name: 'Texas Roofing Crew A', category: 'Labor - Tear Off', allocated: 8000, committed: 8000, actual: 8000 },
-            { name: 'Texas Roofing Crew A', category: 'Labor - Install', allocated: 12000, committed: 7200, actual: 0 },
-            { name: 'City of Plano', category: 'Permits & Inspection', allocated: 2500, committed: 2500, actual: 2645 },
-            { name: 'Junk King DFW', category: 'Cleanup & Haul-Away', allocated: 4000, committed: 3245, actual: 0 }
+            { name: 'ABC Supply Co.', category: 'Materials - Shingles', allocated: 15000, committed: 9000, actual: 7000 },
+            { name: 'ABC Supply Co.', category: 'Materials - Underlayment', allocated: 3500, committed: 2500, actual: 2500 },
+            { name: 'Texas Roofing Crew A', category: 'Labor - Tear Off', allocated: 8000, committed: 5000, actual: 5000 },
+            { name: 'Texas Roofing Crew A', category: 'Labor - Install', allocated: 12000, committed: 4500, actual: 0 },
+            { name: 'City of Plano', category: 'Permits & Inspection', allocated: 2500, committed: 2000, actual: 2000 },
+            { name: 'Junk King DFW', category: 'Cleanup & Haul-Away', allocated: 4000, committed: 1500, actual: 0 }
         ],
         changeOrders: [],
         rfis: [],
@@ -2156,11 +2156,11 @@ const MOCK_PROJECTS = [
         phase: 'Handover',
         budget: 8500,
         approvedBudget: 8500,
-        committedCost: 8500,
-        actualCost: 8500,
-        spent: 8500,
-        variancePercent: 0,
-        margin: 0.35,
+        committedCost: 6800,
+        actualCost: 6200,
+        spent: 6200,
+        variancePercent: -27.1,
+        margin: 0.27,
         commissionType: 'flat',
         commissionRate: 850,
         commission: 850,
@@ -2213,7 +2213,7 @@ const MOCK_PROJECTS = [
         actualCost: 18400,
         spent: 18400,
         variancePercent: -42.5,
-        margin: 0.30,
+        margin: 0.12,
         commissionType: 'percent_net',
         commissionRate: 15,
         commission: 3200,
@@ -2276,7 +2276,7 @@ const MOCK_PROJECTS = [
         ]
     },
 
-    // Project 4: Active, over budget (spent > budget)
+    // Project 4: Active, on track, under budget
     {
         id: 'proj_004',
         ownerId: 'own_001',
@@ -2300,7 +2300,7 @@ const MOCK_PROJECTS = [
         startDate: '2025-12-01',
         endDate: '2026-02-28',
         completionPercentage: 78,
-        healthScore: 35,
+        healthScore: 76,
         openRFIs: 1,
         changeOrderCount: 2,
         pendingInvoiceCount: 2,
@@ -2497,7 +2497,7 @@ const MOCK_PROJECTS = [
 
     // =====================================================================
     // OWNER 2: Diana Reeves (own_002) — 6 Projects
-    // High risk owner, vendor payment delays, over-budget project
+    // High volume owner, large commercial portfolio
     // =====================================================================
 
     // Project 7: Active, on track, healthy budget (commercial)
@@ -2517,7 +2517,7 @@ const MOCK_PROJECTS = [
         actualCost: 48000,
         spent: 48000,
         variancePercent: -61.6,
-        margin: 0.35,
+        margin: 0.22,
         commissionType: 'percent_gross',
         commissionRate: 10,
         commission: 12500,
@@ -2600,7 +2600,7 @@ const MOCK_PROJECTS = [
         ]
     },
 
-    // Project 8: Active, over budget (spent > budget)
+    // Project 8: Active, on track, under budget
     {
         id: 'proj_008',
         ownerId: 'own_002',
@@ -2613,18 +2613,18 @@ const MOCK_PROJECTS = [
         phase: 'Finishing',
         budget: 75000,
         approvedBudget: 75000,
-        committedCost: 91500,
-        actualCost: 91500,
-        spent: 91500,
-        variancePercent: 22.0,
-        margin: -0.22,
+        committedCost: 52000,
+        actualCost: 44500,
+        spent: 44500,
+        variancePercent: -40.7,
+        margin: 0.30,
         commissionType: 'percent_net',
         commissionRate: 12,
         commission: 7500,
         startDate: '2025-11-18',
         endDate: '2026-02-28',
         completionPercentage: 88,
-        healthScore: 25,
+        healthScore: 80,
         openRFIs: 0,
         changeOrderCount: 2,
         pendingInvoiceCount: 2,
@@ -2722,8 +2722,8 @@ const MOCK_PROJECTS = [
         projectType: 'Parking Lot Resurface',
         status: 'completed',
         budget: 35000,
-        spent: 35000,
-        margin: 0.30,
+        spent: 23800,
+        margin: 0.32,
         commissionType: 'custom',
         commissionRate: 3500,
         commission: 3500,
@@ -2732,9 +2732,9 @@ const MOCK_PROJECTS = [
         completionPercentage: 100,
         phase: 'Handover',
         approvedBudget: 35000,
-        committedCost: 35000,
-        actualCost: 35000,
-        variancePercent: 0.0,
+        committedCost: 26500,
+        actualCost: 23800,
+        variancePercent: -32.0,
         healthScore: 100,
         openRFIs: 0,
         changeOrderCount: 0,
@@ -5053,6 +5053,838 @@ const KANBAN_PROJECT_DATA = {
     },
 };
 
+// ---------------------------------------------------------------------------
+// Subcontractor Management (Feature 8.2 – Task Assignment)
+// Subcontractors are independent of any single company so the same record can
+// be referenced by tasks coming from multiple Admin/Owner orgs.
+// ---------------------------------------------------------------------------
+export const SUBCONTRACTOR_TASK_PRIORITIES = [
+    { value: 'low',    label: 'Low',    color: '#6B7280' },
+    { value: 'medium', label: 'Medium', color: '#3B82F6' },
+    { value: 'high',   label: 'High',   color: '#EF4444' },
+];
+
+export const SUBCONTRACTOR_TASK_STATUSES = [
+    'Assigned',
+    'In Progress',
+    'On Hold',
+    'Completed',
+    'Cancelled',
+];
+
+// Statuses the subcontractor themselves can set from the Task Detail page.
+// Owner / admin can still flip a task to Cancelled from the admin page.
+export const SUBCONTRACTOR_SELF_STATUSES = ['Assigned', 'In Progress', 'On Hold', 'Completed'];
+
+export const SUBCONTRACTOR_EXPENSE_CATEGORIES = [
+    'Materials',
+    'Equipment Rental',
+    'Travel / Fuel',
+    'Permits',
+    'Disposal / Dumpster',
+    'Other',
+];
+
+export const SUBCONTRACTOR_FEE_TYPES = [
+    'Labour / Service Fee',
+    'Inspection Fee',
+    'Mobilization Fee',
+    'Overtime',
+    'Callback / Warranty',
+    'Other',
+];
+
+const MOCK_SUBCONTRACTORS = [
+    {
+        id: 'sub_001',
+        name: 'Carlos Subcontractor',
+        companyName: 'Electric Pro Services',
+        tradeType: 'Electrical',
+        email: 'carlos@electricpro.com',
+        phone: '469-555-9012',
+        status: 'active',
+        rating: 4.8,
+        companies: ['lynkeduppro'],
+        joinedAt: '2024-08-01',
+    },
+    {
+        id: 'sub_002',
+        name: 'Maya Patel',
+        companyName: 'Skyline Roof Crew',
+        tradeType: 'Roofing',
+        email: 'maya@skylineroof.com',
+        phone: '214-555-1247',
+        status: 'active',
+        rating: 4.6,
+        companies: ['lynkeduppro', 'acmebuilds'],
+        joinedAt: '2024-05-12',
+    },
+    {
+        id: 'sub_003',
+        name: 'Dwayne Holland',
+        companyName: 'Holland Painting Co.',
+        tradeType: 'Painting',
+        email: 'dwayne@hollandpaint.com',
+        phone: '972-555-8312',
+        status: 'active',
+        rating: 4.4,
+        companies: ['lynkeduppro'],
+        joinedAt: '2024-09-21',
+    },
+    {
+        id: 'sub_004',
+        name: 'Jennifer Wu',
+        companyName: 'Wu Plumbing',
+        tradeType: 'Plumbing',
+        email: 'jenn@wuplumbing.com',
+        phone: '469-555-3340',
+        status: 'active',
+        rating: 4.9,
+        companies: ['lynkeduppro', 'acmebuilds', 'planobuilders'],
+        joinedAt: '2024-02-10',
+    },
+    {
+        id: 'sub_005',
+        name: 'Greg Alston',
+        companyName: 'Alston Window Pros',
+        tradeType: 'Windows & Glazing',
+        email: 'greg@alstonwindows.com',
+        phone: '214-555-0299',
+        status: 'inactive',
+        rating: 4.1,
+        companies: ['lynkeduppro'],
+        joinedAt: '2023-11-15',
+    },
+];
+
+const MOCK_SUBCONTRACTOR_TASKS = [
+    // -------------------------------------------------------------------
+    // sct_001 — Maya Patel (sub_002) — fully populated reference task
+    // -------------------------------------------------------------------
+    {
+        id: 'sct_001',
+        companyId: 'lynkeduppro',
+        companyName: 'LynkedUp Pro Roofing',
+        subcontractorId: 'sub_002',
+        subcontractorName: 'Maya Patel',
+        assignedBy: 'owner_001',
+        assignedByName: 'Justin Johnson',
+        title: 'Replace damaged ridge cap',
+        location: '2612 Dunwick Dr, Plano, TX 75023',
+        description: 'Two ridge cap shingles missing on the south slope after wind storm. Replace with matching tile and seal. Inspect adjacent tiles for hairline cracks while you are up there.',
+        dueDate: '2026-05-25',
+        priority: 'high',
+        status: 'In Progress',
+        photos: [
+            { id: 'sct_001_p1', name: 'Roof_Damage.jpg',     url: '/assets/images/properties/Hail_Damaged_Shingles.jpg', annotation: 'Repair this corner' },
+            { id: 'sct_001_p2', name: 'Roof_Wide.jpg',       url: '/assets/images/properties/Storm_Worn_Roof.jpg',       annotation: 'Inspect adjacent tiles too' },
+            { id: 'sct_001_p3', name: 'Ridge_Closeup.jpg',   url: '/assets/images/properties/Cracked_Storm_Shingles.jpg', annotation: 'Closeup of missing cap' },
+            { id: 'sct_001_p4', name: 'Roof_Reference.jpg',  url: '/assets/images/properties/Overlapping_Roof_Shingles.jpg', annotation: '' },
+        ],
+        statusHistory: [
+            { id: 'sct_001_h1', status: 'Assigned',    actorId: 'owner_001', actorName: 'Justin Johnson', comment: 'Task created and assigned.', at: '2026-05-15T09:12:00Z' },
+            { id: 'sct_001_h2', status: 'In Progress', actorId: 'sub_002',   actorName: 'Maya Patel',     comment: 'On site, sourced materials.', at: '2026-05-16T08:30:00Z' },
+        ],
+        thread: [
+            { id: 'sct_001_t1', channel: 'group', senderId: 'owner_001', senderName: 'Justin Johnson', senderRole: 'Owner',         body: 'Please source them — match Owens Corning Estate Gray as best you can.', at: '2026-05-15T09:14:00Z' },
+            { id: 'sct_001_t2', channel: 'group', senderId: 'sub_002',   senderName: 'Maya Patel',     senderRole: 'Subcontractor', body: 'Got it. I’ll be there on May 20. Do you have shingles in storage or should I source them?', at: '2026-05-15T10:30:00Z', mine: true },
+            { id: 'sct_001_t3', channel: 'group', senderId: 'owner_001', senderName: 'Justin Johnson', senderRole: 'Owner',         body: 'Source them and put it on the task expenses. Homeowner is OK to reimburse.', at: '2026-05-15T11:00:00Z' },
+            { id: 'sct_001_t4', channel: 'group', senderId: 'sub_002',   senderName: 'Maya Patel',     senderRole: 'Subcontractor', body: 'Sounds good — picking up at Home Depot tomorrow morning.', at: '2026-05-15T11:08:00Z', mine: true },
+            { id: 'sct_001_t5', channel: 'direct', senderId: 'owner_001', senderName: 'Justin Johnson', senderRole: 'Owner',         body: 'Heads up team: homeowner is sensitive about noise — keep work to daylight hours only. No early-morning starts.', at: '2026-05-15T11:05:00Z' },
+            { id: 'sct_001_t6', channel: 'group',    senderId: 'ADM01',     senderName: 'Admin One',      senderRole: 'Admin',         body: 'Permits are not required for this scope. Skip the city portal step.', at: '2026-05-15T12:10:00Z' },
+            { id: 'sct_001_t7', channel: 'direct', senderId: 'sub_002',   senderName: 'Maya Patel',     senderRole: 'Subcontractor', body: 'Noted. Will text homeowner when crew is 30 min out.', at: '2026-05-15T12:25:00Z', mine: true },
+        ],
+        expenses: [
+            { id: 'sct_001_e1', description: 'Owens Corning Estate Gray (single pkg)', category: 'Materials',           amount: 64.5,  notes: 'From Home Depot, kept receipt.', receiptUrl: 'mock://receipts/oc-estate-gray.pdf', createdAt: '2026-05-16T13:10:00Z' },
+            { id: 'sct_001_e2', description: 'Roofing nails 1.25"',                    category: 'Materials',           amount: 14.99, notes: '',                                receiptUrl: '',                                  createdAt: '2026-05-16T13:12:00Z' },
+            { id: 'sct_001_e3', description: 'Sealant tube',                           category: 'Materials',           amount: 21.0,  notes: 'NP1 polyurethane.',               receiptUrl: '',                                  createdAt: '2026-05-16T13:14:00Z' },
+            { id: 'sct_001_e4', description: 'Dumpster rental (half day)',             category: 'Equipment Rental',    amount: 85.0,  notes: 'Shared with adjacent job.',       receiptUrl: '',                                  createdAt: '2026-05-16T15:00:00Z' },
+            { id: 'sct_001_e5', description: 'Fuel — round trip to supply yard',       category: 'Travel / Fuel',       amount: 18.4,  notes: '',                                receiptUrl: '',                                  createdAt: '2026-05-16T17:30:00Z' },
+        ],
+        fees: [
+            { id: 'sct_001_f1', description: 'Labour — Ridge Cap Replacement', type: 'Labour / Service Fee', amount: 350, createdAt: '2026-05-16T13:20:00Z' },
+            { id: 'sct_001_f2', description: 'Mobilization to site',           type: 'Mobilization Fee',     amount: 75,  createdAt: '2026-05-16T13:22:00Z' },
+        ],
+        activities: [
+            {
+                id: 'sct_001_a1', type: 'status_change', status: 'Assigned',
+                note: 'Task created and assigned. Materials list shared with crew.',
+                photos: [],
+                actorId: 'owner_001', actorName: 'Justin Johnson', actorRole: 'Owner',
+                at: '2026-05-15T09:12:00Z',
+            },
+            {
+                id: 'sct_001_a2', type: 'status_change', status: 'In Progress',
+                note: 'On site, sourced replacement Owens Corning Estate Gray. Starting on the south slope.',
+                photos: [
+                    { id: 'sct_001_a2_p1', url: '/assets/images/properties/Hail_Damaged_Shingles.jpg', name: 'arrival.jpg' },
+                ],
+                actorId: 'sub_002', actorName: 'Maya Patel', actorRole: 'Subcontractor',
+                at: '2026-05-16T08:30:00Z',
+            },
+            {
+                id: 'sct_001_a3', type: 'progress_update', status: 'In Progress',
+                note: 'First two damaged ridge tiles removed. Decking underneath is clean — no rot.',
+                photos: [
+                    { id: 'sct_001_a3_p1', url: '/assets/images/properties/Storm_Worn_Roof.jpg', name: 'decking-clean.jpg' },
+                ],
+                actorId: 'sub_002', actorName: 'Maya Patel', actorRole: 'Subcontractor',
+                at: '2026-05-16T10:45:00Z',
+            },
+            {
+                id: 'sct_001_a4', type: 'progress_update', status: 'In Progress',
+                note: 'Replacement ridge caps installed on lower row. Sealing next.',
+                photos: [
+                    { id: 'sct_001_a4_p1', url: '/assets/images/properties/Cracked_Storm_Shingles.jpg', name: 'lower-row.jpg' },
+                    { id: 'sct_001_a4_p2', url: '/assets/images/properties/Overlapping_Roof_Shingles.jpg', name: 'wide-shot.jpg' },
+                ],
+                actorId: 'sub_002', actorName: 'Maya Patel', actorRole: 'Subcontractor',
+                at: '2026-05-16T14:20:00Z',
+            },
+        ],
+        projectId: 'proj_004',
+        paymentStatus: 'Unpaid',
+        paymentRequestedAt: '2026-05-16T17:30:00Z',
+        createdAt: '2026-05-15T09:12:00Z',
+        updatedAt: '2026-05-16T17:30:00Z',
+    },
+
+    // -------------------------------------------------------------------
+    // sct_002 — Carlos (sub_001) — In Progress electrical
+    // -------------------------------------------------------------------
+    {
+        id: 'sct_002',
+        companyId: 'lynkeduppro',
+        companyName: 'LynkedUp Pro Roofing',
+        subcontractorId: 'sub_001',
+        subcontractorName: 'Carlos Subcontractor',
+        assignedBy: 'owner_001',
+        assignedByName: 'Justin Johnson',
+        title: 'Replace breaker panel',
+        location: '6613 Phoenix Pl, Plano, TX 75023',
+        description: 'Outdated 100A panel — upgrade to 200A. Permit pulled, materials staged on site. Coordinate Oncor disconnect for the morning of installation.',
+        dueDate: '2026-05-22',
+        priority: 'medium',
+        status: 'In Progress',
+        photos: [
+            { id: 'sct_002_p1', name: 'Old_Panel.jpg', url: '/assets/images/properties/Beige_Two_Story_House.jpg', annotation: 'Existing 100A panel — disconnect and remove' },
+            { id: 'sct_002_p2', name: 'Service_Mast.jpg', url: '/assets/images/properties/Modern_White_Suburban_Home.jpg', annotation: 'Service mast — verify clearance' },
+        ],
+        statusHistory: [
+            { id: 'sct_002_h1', status: 'Assigned',    actorId: 'owner_001', actorName: 'Justin Johnson',        comment: 'Task created and assigned.',     at: '2026-05-10T15:40:00Z' },
+            { id: 'sct_002_h2', status: 'In Progress', actorId: 'sub_001',   actorName: 'Carlos Subcontractor', comment: 'On site, started disconnect.',  at: '2026-05-12T08:20:00Z' },
+        ],
+        thread: [
+            { id: 'sct_002_t1', channel: 'group', senderId: 'sub_001',   senderName: 'Carlos Subcontractor', senderRole: 'Subcontractor', body: 'Oncor disconnect is confirmed for May 12, 8 AM.', at: '2026-05-11T16:00:00Z', mine: true },
+            { id: 'sct_002_t2', channel: 'group', senderId: 'owner_001', senderName: 'Justin Johnson',       senderRole: 'Owner',         body: 'Perfect. Homeowner will be on site.',              at: '2026-05-11T16:30:00Z' },
+            { id: 'sct_002_t3', channel: 'group',    senderId: 'ADM01',     senderName: 'Admin One',            senderRole: 'Admin',         body: 'Inspection slot booked with the city for May 15.', at: '2026-05-12T09:30:00Z' },
+        ],
+        expenses: [
+            { id: 'sct_002_e1', description: '200A panel — Square D',        category: 'Materials', amount: 312.0, notes: '',                       receiptUrl: '', createdAt: '2026-05-11T09:00:00Z' },
+            { id: 'sct_002_e2', description: 'Conduit + fittings',           category: 'Materials', amount: 47.25, notes: '3/4" EMT + connectors.', receiptUrl: '', createdAt: '2026-05-11T09:10:00Z' },
+            { id: 'sct_002_e3', description: 'Permit fee — City of Plano',   category: 'Permits',   amount: 95.0,  notes: 'Reimbursable.',          receiptUrl: '', createdAt: '2026-05-11T14:00:00Z' },
+        ],
+        fees: [
+            { id: 'sct_002_f1', description: 'Labour — Day 1 disconnect / prep', type: 'Labour / Service Fee', amount: 425, createdAt: '2026-05-12T17:00:00Z' },
+        ],
+        activities: [
+            {
+                id: 'sct_002_a1', type: 'status_change', status: 'Assigned',
+                note: 'Task created and assigned. Permit pulled, materials staged.',
+                photos: [],
+                actorId: 'owner_001', actorName: 'Justin Johnson', actorRole: 'Owner',
+                at: '2026-05-10T15:40:00Z',
+            },
+            {
+                id: 'sct_002_a2', type: 'status_change', status: 'In Progress',
+                note: 'Oncor on site for disconnect. Cutting power to existing 100A panel and starting tear-out.',
+                photos: [
+                    { id: 'sct_002_a2_p1', url: '/assets/images/properties/Beige_Two_Story_House.jpg', name: 'oncor-disconnect.jpg' },
+                ],
+                actorId: 'sub_001', actorName: 'Carlos Subcontractor', actorRole: 'Subcontractor',
+                at: '2026-05-12T08:20:00Z',
+            },
+            {
+                id: 'sct_002_a3', type: 'progress_update', status: 'In Progress',
+                note: 'Old 100A panel removed. Service entrance wires capped and labelled. Mast looks good — no signs of corrosion.',
+                photos: [
+                    { id: 'sct_002_a3_p1', url: '/assets/images/properties/Modern_White_Suburban_Home.jpg', name: 'mast-check.jpg' },
+                    { id: 'sct_002_a3_p2', url: '/assets/images/properties/Brick_Front_Porch_Home.jpg',     name: 'old-panel-out.jpg' },
+                ],
+                actorId: 'sub_001', actorName: 'Carlos Subcontractor', actorRole: 'Subcontractor',
+                at: '2026-05-12T10:30:00Z',
+            },
+            {
+                id: 'sct_002_a4', type: 'progress_update', status: 'In Progress',
+                note: 'New 200A Square D panel mounted and bonded. Two new ground rods driven and connected.',
+                photos: [
+                    { id: 'sct_002_a4_p1', url: '/assets/images/properties/Sunny_Suburban_House.jpg',       name: 'new-panel-mount.jpg' },
+                ],
+                actorId: 'sub_001', actorName: 'Carlos Subcontractor', actorRole: 'Subcontractor',
+                at: '2026-05-12T13:15:00Z',
+            },
+            {
+                id: 'sct_002_a5', type: 'progress_update', status: 'In Progress',
+                note: 'Migrated 20 of 24 home circuits to the new panel. Tested with multimeter — all live and balanced across legs. Remaining 4 circuits (HVAC + dryer) to be wired tomorrow before re-energizing.',
+                photos: [
+                    { id: 'sct_002_a5_p1', url: '/assets/images/properties/Luxury_Driveway_Residence.jpg',  name: 'circuits-migrated.jpg' },
+                    { id: 'sct_002_a5_p2', url: '/assets/images/properties/Overlapping_Roof_Shingles.jpg', name: 'panel-labels.jpg' },
+                ],
+                actorId: 'sub_001', actorName: 'Carlos Subcontractor', actorRole: 'Subcontractor',
+                at: '2026-05-12T16:00:00Z',
+            },
+        ],
+        projectId: 'proj_003',
+        paymentStatus: 'Unpaid',
+        paymentRequestedAt: '2026-05-12T17:00:00Z',
+        createdAt: '2026-05-10T15:40:00Z',
+        updatedAt: '2026-05-12T17:00:00Z',
+    },
+
+    // -------------------------------------------------------------------
+    // sct_003 — Dwayne (sub_003) — Completed paint job
+    // -------------------------------------------------------------------
+    {
+        id: 'sct_003',
+        companyId: 'lynkeduppro',
+        companyName: 'LynkedUp Pro Roofing',
+        subcontractorId: 'sub_003',
+        subcontractorName: 'Dwayne Holland',
+        assignedBy: 'ADM01',
+        assignedByName: 'Admin One',
+        title: 'Touch-up exterior paint',
+        location: '3913 Arizona Pl, Plano, TX 75023',
+        description: 'Front fascia and side trim need fresh coat after siding repair. Match existing Sherwin-Williams color.',
+        dueDate: '2026-05-18',
+        priority: 'low',
+        status: 'Completed',
+        photos: [
+            { id: 'sct_003_p1', name: 'Before.jpg', url: '/assets/images/properties/Brick_Front_Porch_Home.jpg', annotation: 'Before' },
+        ],
+        statusHistory: [
+            { id: 'sct_003_h1', status: 'Assigned',    actorId: 'ADM01',   actorName: 'Admin One',       comment: 'Task created.',                  at: '2026-05-05T11:00:00Z' },
+            { id: 'sct_003_h2', status: 'In Progress', actorId: 'sub_003', actorName: 'Dwayne Holland', comment: 'Started prep work.',            at: '2026-05-13T08:00:00Z' },
+            { id: 'sct_003_h3', status: 'Completed',  actorId: 'sub_003', actorName: 'Dwayne Holland', comment: 'Walked through with homeowner.', at: '2026-05-14T17:30:00Z' },
+        ],
+        thread: [
+            { id: 'sct_003_t1', channel: 'group', senderId: 'sub_003', senderName: 'Dwayne Holland', senderRole: 'Subcontractor', body: 'Wrapped up — homeowner signed off. Photos uploaded.', at: '2026-05-14T17:25:00Z', mine: true },
+        ],
+        expenses: [
+            { id: 'sct_003_e1', description: 'Paint — SW Repose Gray (1 gal)', category: 'Materials', amount: 52.5, notes: '', receiptUrl: '', createdAt: '2026-05-13T07:30:00Z' },
+        ],
+        fees: [
+            { id: 'sct_003_f1', description: 'Touch-up paint labour', type: 'Labour / Service Fee', amount: 180, createdAt: '2026-05-14T17:35:00Z' },
+        ],
+        projectId: 'proj_006',
+        paymentStatus: 'Paid',
+        paymentRequestedAt: '2026-05-14T17:35:00Z',
+        paidAt: '2026-05-18T10:15:00Z',
+        createdAt: '2026-05-05T11:00:00Z',
+        updatedAt: '2026-05-14T17:30:00Z',
+    },
+
+    // -------------------------------------------------------------------
+    // sct_004 — Maya (sub_002) — emergency tarping, Assigned
+    // -------------------------------------------------------------------
+    {
+        id: 'sct_004',
+        companyId: 'lynkeduppro',
+        companyName: 'LynkedUp Pro Roofing',
+        subcontractorId: 'sub_002',
+        subcontractorName: 'Maya Patel',
+        assignedBy: 'owner_001',
+        assignedByName: 'Justin Johnson',
+        title: 'Emergency tarp — storm damage',
+        location: '4221 Magnolia Ln, Plano, TX 75023',
+        description: 'Hailstorm overnight; 3–4 ft section of decking exposed near chimney. Tarp ASAP to prevent further water intrusion. Permanent repair will be scheduled after insurance scope.',
+        dueDate: '2026-05-19',
+        priority: 'high',
+        status: 'Assigned',
+        photos: [
+            { id: 'sct_004_p1', name: 'Storm_Damage.jpg', url: '/assets/images/properties/Broken_Roof_Surface.jpg', annotation: 'Exposed decking near chimney' },
+            { id: 'sct_004_p2', name: 'Roof_Texture.jpg', url: '/assets/images/properties/Residential_Roof_Texture.jpg', annotation: '' },
+        ],
+        statusHistory: [
+            { id: 'sct_004_h1', status: 'Assigned', actorId: 'owner_001', actorName: 'Justin Johnson', comment: 'Storm-response priority. Please confirm ETA.', at: '2026-05-18T22:40:00Z' },
+        ],
+        thread: [
+            { id: 'sct_004_t1', channel: 'group', senderId: 'owner_001', senderName: 'Justin Johnson', senderRole: 'Owner',         body: 'Can you make it first thing tomorrow morning?',  at: '2026-05-18T22:42:00Z' },
+            { id: 'sct_004_t2', channel: 'group', senderId: 'sub_002',   senderName: 'Maya Patel',     senderRole: 'Subcontractor', body: 'Yes — on site by 7:30 AM. Bringing tarps and battens.', at: '2026-05-18T23:05:00Z', mine: true },
+            { id: 'sct_004_t3', channel: 'direct', senderId: 'owner_001', senderName: 'Justin Johnson', senderRole: 'Owner',         body: 'Customer is filing an insurance claim — make sure to document everything with photos.', at: '2026-05-18T23:10:00Z' },
+        ],
+        expenses: [],
+        fees: [],
+        projectId: 'proj_003',
+        paymentStatus: 'Unpaid',
+        paymentRequestedAt: null,
+        createdAt: '2026-05-18T22:40:00Z',
+        updatedAt: '2026-05-18T23:10:00Z',
+    },
+
+    // -------------------------------------------------------------------
+    // sct_005 — Maya (sub_002) — Attic ventilation inspection, On Hold
+    // -------------------------------------------------------------------
+    {
+        id: 'sct_005',
+        companyId: 'lynkeduppro',
+        companyName: 'LynkedUp Pro Roofing',
+        subcontractorId: 'sub_002',
+        subcontractorName: 'Maya Patel',
+        assignedBy: 'ADM01',
+        assignedByName: 'Admin One',
+        title: 'Inspect attic ventilation',
+        location: '5510 Custer Rd, Plano, TX 75023',
+        description: 'Customer reports unusually high attic temps. Check ridge vent, soffit airflow, and intake/exhaust balance. Recommend remediation.',
+        dueDate: '2026-05-30',
+        priority: 'medium',
+        status: 'On Hold',
+        photos: [
+            { id: 'sct_005_p1', name: 'Attic_View.jpg', url: '/assets/images/properties/Roof_Inspection_Angle.jpg', annotation: 'Access from south gable' },
+        ],
+        statusHistory: [
+            { id: 'sct_005_h1', status: 'Assigned',    actorId: 'ADM01',   actorName: 'Admin One',   comment: 'Task created.', at: '2026-05-12T10:00:00Z' },
+            { id: 'sct_005_h2', status: 'In Progress', actorId: 'sub_002', actorName: 'Maya Patel', comment: 'Initial pass done; baffles look blocked.', at: '2026-05-14T11:00:00Z' },
+            { id: 'sct_005_h3', status: 'On Hold',    actorId: 'sub_002', actorName: 'Maya Patel', comment: 'Waiting on homeowner to clear stored boxes from access path.', at: '2026-05-15T16:00:00Z' },
+        ],
+        thread: [
+            { id: 'sct_005_t1', channel: 'group', senderId: 'sub_002', senderName: 'Maya Patel', senderRole: 'Subcontractor', body: 'Access is blocked — homeowner needs to move some storage before I can complete the inspection.', at: '2026-05-15T15:55:00Z', mine: true },
+            { id: 'sct_005_t2', channel: 'direct', senderId: 'ADM01',   senderName: 'Admin One',  senderRole: 'Admin',         body: 'I will reach out to the homeowner and reschedule.', at: '2026-05-15T16:20:00Z' },
+        ],
+        expenses: [
+            { id: 'sct_005_e1', description: 'Infrared thermometer (rental)', category: 'Equipment Rental', amount: 35.0, notes: '', receiptUrl: '', createdAt: '2026-05-14T10:30:00Z' },
+        ],
+        fees: [
+            { id: 'sct_005_f1', description: 'Inspection — initial visit', type: 'Inspection Fee', amount: 125, createdAt: '2026-05-14T13:00:00Z' },
+        ],
+        activities: [
+            {
+                id: 'sct_005_a1', type: 'status_change', status: 'Assigned',
+                note: 'Task created. Customer reports unusually high attic temps.',
+                photos: [],
+                actorId: 'ADM01', actorName: 'Admin One', actorRole: 'Admin',
+                at: '2026-05-12T10:00:00Z',
+            },
+            {
+                id: 'sct_005_a2', type: 'status_change', status: 'In Progress',
+                note: 'Initial inspection pass — soffit baffles appear blocked. Need attic access for confirmation.',
+                photos: [
+                    { id: 'sct_005_a2_p1', url: '/assets/images/properties/Roof_Inspection_Angle.jpg', name: 'south-gable.jpg' },
+                ],
+                actorId: 'sub_002', actorName: 'Maya Patel', actorRole: 'Subcontractor',
+                at: '2026-05-14T11:00:00Z',
+            },
+            {
+                id: 'sct_005_a3', type: 'status_change', status: 'On Hold',
+                note: 'Work stopped — homeowner needs to clear stored boxes blocking attic access before I can finish.',
+                photos: [
+                    { id: 'sct_005_a3_p1', url: '/assets/images/properties/Beige_Two_Story_House.jpg', name: 'access-blocked.jpg' },
+                ],
+                actorId: 'sub_002', actorName: 'Maya Patel', actorRole: 'Subcontractor',
+                at: '2026-05-15T16:00:00Z',
+            },
+        ],
+        projectId: 'proj_012',
+        paymentStatus: 'Unpaid',
+        paymentRequestedAt: '2026-05-14T13:00:00Z',
+        createdAt: '2026-05-12T10:00:00Z',
+        updatedAt: '2026-05-15T16:20:00Z',
+    },
+
+    // -------------------------------------------------------------------
+    // sct_006 — Maya (sub_002) — Gutter replacement, Assigned
+    // -------------------------------------------------------------------
+    {
+        id: 'sct_006',
+        companyId: 'lynkeduppro',
+        companyName: 'LynkedUp Pro Roofing',
+        subcontractorId: 'sub_002',
+        subcontractorName: 'Maya Patel',
+        assignedBy: 'owner_001',
+        assignedByName: 'Justin Johnson',
+        title: 'Replace gutter on south elevation',
+        location: '8917 Elmwood Dr, Plano, TX 75025',
+        description: '30 ft section of K-style gutter — pulling away from fascia after storm. Replace with new 6" oversized gutter, match existing bronze color.',
+        dueDate: '2026-06-02',
+        priority: 'low',
+        status: 'Assigned',
+        photos: [],
+        statusHistory: [
+            { id: 'sct_006_h1', status: 'Assigned', actorId: 'owner_001', actorName: 'Justin Johnson', comment: 'Task created and assigned.', at: '2026-05-17T14:00:00Z' },
+        ],
+        thread: [],
+        expenses: [],
+        fees: [],
+        projectId: 'proj_011',
+        paymentStatus: 'Unpaid',
+        paymentRequestedAt: null,
+        createdAt: '2026-05-17T14:00:00Z',
+        updatedAt: '2026-05-17T14:00:00Z',
+    },
+
+    // -------------------------------------------------------------------
+    // sct_007 — Maya (sub_002) — completed earlier this month
+    // -------------------------------------------------------------------
+    {
+        id: 'sct_007',
+        companyId: 'lynkeduppro',
+        companyName: 'LynkedUp Pro Roofing',
+        subcontractorId: 'sub_002',
+        subcontractorName: 'Maya Patel',
+        assignedBy: 'ADM01',
+        assignedByName: 'Admin One',
+        title: 'Roof deck repair — north slope',
+        location: '1408 Cedar Ridge, Allen, TX 75002',
+        description: 'Sheathing soft in two ~2x2 ft areas. Cut out, replace with matching OSB, re-felt and re-shingle.',
+        dueDate: '2026-05-08',
+        priority: 'high',
+        status: 'Completed',
+        photos: [
+            { id: 'sct_007_p1', name: 'Deck_Repair.jpg', url: '/assets/images/properties/Cracked_Asphalt_Shingles.jpg', annotation: 'Soft section, top right' },
+        ],
+        statusHistory: [
+            { id: 'sct_007_h1', status: 'Assigned',    actorId: 'ADM01',   actorName: 'Admin One',  comment: 'Task created.',          at: '2026-05-01T09:00:00Z' },
+            { id: 'sct_007_h2', status: 'In Progress', actorId: 'sub_002', actorName: 'Maya Patel', comment: 'Tear-off underway.',     at: '2026-05-05T07:30:00Z' },
+            { id: 'sct_007_h3', status: 'Completed',  actorId: 'sub_002', actorName: 'Maya Patel', comment: 'Closed out, photos in.', at: '2026-05-07T16:45:00Z' },
+        ],
+        thread: [
+            { id: 'sct_007_t1', channel: 'group', senderId: 'sub_002', senderName: 'Maya Patel', senderRole: 'Subcontractor', body: 'All done — closed out. Final photos uploaded.', at: '2026-05-07T16:40:00Z', mine: true },
+        ],
+        expenses: [
+            { id: 'sct_007_e1', description: 'OSB sheathing 4x8 (2 sheets)', category: 'Materials',        amount: 76.0,  notes: '', receiptUrl: '', createdAt: '2026-05-05T07:00:00Z' },
+            { id: 'sct_007_e2', description: 'Underlayment roll',            category: 'Materials',        amount: 38.0,  notes: '', receiptUrl: '', createdAt: '2026-05-05T07:05:00Z' },
+            { id: 'sct_007_e3', description: 'Disposal — dump fee',          category: 'Disposal / Dumpster', amount: 55.0,  notes: '', receiptUrl: '', createdAt: '2026-05-07T17:00:00Z' },
+        ],
+        fees: [
+            { id: 'sct_007_f1', description: 'Labour — deck repair (2 days)', type: 'Labour / Service Fee', amount: 920, createdAt: '2026-05-07T16:50:00Z' },
+        ],
+        projectId: 'proj_011',
+        paymentStatus: 'Paid',
+        paymentRequestedAt: '2026-05-07T16:50:00Z',
+        paidAt: '2026-05-12T14:00:00Z',
+        createdAt: '2026-05-01T09:00:00Z',
+        updatedAt: '2026-05-07T17:00:00Z',
+    },
+
+    // -------------------------------------------------------------------
+    // sct_008 — Carlos (sub_001) — GFCI install, fully populated
+    // -------------------------------------------------------------------
+    {
+        id: 'sct_008',
+        companyId: 'lynkeduppro',
+        companyName: 'LynkedUp Pro Roofing',
+        subcontractorId: 'sub_001',
+        subcontractorName: 'Carlos Subcontractor',
+        assignedBy: 'ADM01',
+        assignedByName: 'Admin One',
+        title: 'Install GFCI outlets — kitchen + bath',
+        location: '224 Greenfield Way, Frisco, TX 75033',
+        description: 'Replace 4 standard receptacles with GFCI: 2 kitchen counter outlets (left of sink + island), 1 master bath vanity, 1 powder room vanity. Code update required as part of insurance work. Use Leviton SmartlockPro 20A devices. Test all branches with plug-in tester before signing off.',
+        dueDate: '2026-05-26',
+        priority: 'medium',
+        status: 'In Progress',
+        photos: [
+            { id: 'sct_008_p1', name: 'Kitchen_Outlet.jpg',  url: '/assets/images/properties/Modern_White_Suburban_Home.jpg',  annotation: 'Kitchen — left of sink, current standard receptacle' },
+            { id: 'sct_008_p2', name: 'Island_Outlet.jpg',   url: '/assets/images/properties/Sunny_Suburban_House.jpg',       annotation: 'Island outlet — replace with GFCI' },
+            { id: 'sct_008_p3', name: 'Master_Bath.jpg',     url: '/assets/images/properties/Brick_Front_Porch_Home.jpg',     annotation: 'Master bath vanity outlet' },
+            { id: 'sct_008_p4', name: 'Powder_Room.jpg',     url: '/assets/images/properties/Luxury_Driveway_Residence.jpg',  annotation: 'Powder room — confirm wire gauge' },
+        ],
+        statusHistory: [
+            { id: 'sct_008_h1', status: 'Assigned',    actorId: 'ADM01',   actorName: 'Admin One',           comment: 'Task created and assigned.',          at: '2026-05-16T13:00:00Z' },
+            { id: 'sct_008_h2', status: 'In Progress', actorId: 'sub_001', actorName: 'Carlos Subcontractor', comment: 'On site, kitchen done; bath next.',  at: '2026-05-19T10:15:00Z' },
+        ],
+        thread: [
+            { id: 'sct_008_t1', channel: 'group', senderId: 'ADM01',     senderName: 'Admin One',           senderRole: 'Admin',         body: 'Insurance is reimbursing the code upgrade — keep receipts for the GFCI devices.', at: '2026-05-16T13:05:00Z' },
+            { id: 'sct_008_t2', channel: 'group', senderId: 'sub_001',   senderName: 'Carlos Subcontractor', senderRole: 'Subcontractor', body: 'Confirmed — Leviton 20A devices, will keep receipts. Targeting May 19 for the visit.', at: '2026-05-16T14:20:00Z', mine: true },
+            { id: 'sct_008_t3', channel: 'group', senderId: 'owner_001', senderName: 'Justin Johnson',       senderRole: 'Owner',         body: 'Homeowner has 2 small kids — please bring outlet covers as a courtesy.', at: '2026-05-17T09:00:00Z' },
+            { id: 'sct_008_t4', channel: 'group', senderId: 'sub_001',   senderName: 'Carlos Subcontractor', senderRole: 'Subcontractor', body: 'Will do. Already in my truck.', at: '2026-05-17T09:05:00Z', mine: true },
+            { id: 'sct_008_t5', channel: 'group', senderId: 'sub_001',   senderName: 'Carlos Subcontractor', senderRole: 'Subcontractor', body: 'Kitchen done. Both counter outlets and the island are on GFCI now. Starting bath after lunch.', at: '2026-05-19T12:30:00Z', mine: true },
+            { id: 'sct_008_t6', channel: 'direct', senderId: 'ADM01',     senderName: 'Admin One',           senderRole: 'Admin',         body: 'No permit needed for like-for-like swap. Skip the city portal.', at: '2026-05-16T13:10:00Z' },
+            { id: 'sct_008_t7', channel: 'group',    senderId: 'owner_001', senderName: 'Justin Johnson',       senderRole: 'Owner',         body: 'Carlos — if you find any aluminum branch wiring, stop and flag it. We will scope as a change order.', at: '2026-05-17T10:00:00Z' },
+            { id: 'sct_008_t8', channel: 'direct', senderId: 'sub_001',   senderName: 'Carlos Subcontractor', senderRole: 'Subcontractor', body: 'All copper, no aluminum. Proceeding as scoped.', at: '2026-05-19T10:30:00Z', mine: true },
+        ],
+        expenses: [
+            { id: 'sct_008_e1', description: 'Leviton 20A GFCI receptacles (qty 4)', category: 'Materials',     amount: 92.0,  notes: 'SmartlockPro tamper-resistant.',    receiptUrl: 'mock://receipts/leviton-gfci.pdf', createdAt: '2026-05-18T16:00:00Z' },
+            { id: 'sct_008_e2', description: 'Wire nuts + electrical tape',          category: 'Materials',     amount: 11.5,  notes: '',                                  receiptUrl: '',                                createdAt: '2026-05-18T16:02:00Z' },
+            { id: 'sct_008_e3', description: 'Childproof outlet covers (10-pack)',   category: 'Materials',     amount: 8.99,  notes: 'Courtesy for homeowner.',           receiptUrl: '',                                createdAt: '2026-05-18T16:05:00Z' },
+            { id: 'sct_008_e4', description: 'Plug-in circuit tester',               category: 'Equipment Rental', amount: 24.0, notes: 'Sperry Instruments GFCI tester.',  receiptUrl: '',                                createdAt: '2026-05-18T16:10:00Z' },
+            { id: 'sct_008_e5', description: 'Fuel — Frisco round trip',             category: 'Travel / Fuel', amount: 22.4,  notes: '',                                  receiptUrl: '',                                createdAt: '2026-05-19T18:00:00Z' },
+        ],
+        fees: [
+            { id: 'sct_008_f1', description: 'Labour — Kitchen GFCI install (2 outlets + island)', type: 'Labour / Service Fee', amount: 220, createdAt: '2026-05-19T12:35:00Z' },
+            { id: 'sct_008_f2', description: 'Mobilization to site',                              type: 'Mobilization Fee',     amount: 75,  createdAt: '2026-05-19T08:00:00Z' },
+        ],
+        activities: [
+            {
+                id: 'sct_008_a1', type: 'status_change', status: 'Assigned',
+                note: 'Task created and assigned to Carlos. Insurance covering code upgrade.',
+                photos: [],
+                actorId: 'ADM01', actorName: 'Admin One', actorRole: 'Admin',
+                at: '2026-05-16T13:00:00Z',
+            },
+            {
+                id: 'sct_008_a2', type: 'status_change', status: 'In Progress',
+                note: 'Arrived on site. Verified wiring is copper (no aluminum). Starting kitchen counter outlets first.',
+                photos: [
+                    { id: 'sct_008_a2_p1', url: '/assets/images/properties/Modern_White_Suburban_Home.jpg', name: 'kitchen-before.jpg' },
+                ],
+                actorId: 'sub_001', actorName: 'Carlos Subcontractor', actorRole: 'Subcontractor',
+                at: '2026-05-19T10:15:00Z',
+            },
+            {
+                id: 'sct_008_a3', type: 'progress_update', status: 'In Progress',
+                note: 'Both kitchen counter outlets swapped to Leviton 20A GFCI. Tested with plug-in tester — passed.',
+                photos: [
+                    { id: 'sct_008_a3_p1', url: '/assets/images/properties/Sunny_Suburban_House.jpg', name: 'gfci-installed.jpg' },
+                ],
+                actorId: 'sub_001', actorName: 'Carlos Subcontractor', actorRole: 'Subcontractor',
+                at: '2026-05-19T12:30:00Z',
+            },
+        ],
+        projectId: 'proj_011',
+        paymentStatus: 'Unpaid',
+        paymentRequestedAt: '2026-05-19T12:35:00Z',
+        createdAt: '2026-05-16T13:00:00Z',
+        updatedAt: '2026-05-19T18:00:00Z',
+    },
+
+    // -------------------------------------------------------------------
+    // sct_010 — Carlos (sub_001) — newly assigned, awaiting acknowledgement
+    // -------------------------------------------------------------------
+    {
+        id: 'sct_010',
+        companyId: 'lynkeduppro',
+        companyName: 'LynkedUp Pro Roofing',
+        subcontractorId: 'sub_001',
+        subcontractorName: 'Carlos Subcontractor',
+        assignedBy: 'owner_001',
+        assignedByName: 'Justin Johnson',
+        title: 'Install EV charger circuit — garage',
+        location: '3917 Arizona Pl, Plano, TX 75023',
+        description: 'Homeowner purchased a Tesla Wall Connector. Run a dedicated 60A 240V circuit from the main panel to the garage wall. Coordinate with homeowner for outage window. Permit required.',
+        dueDate: '2026-05-29',
+        priority: 'medium',
+        status: 'Assigned',
+        photos: [
+            { id: 'sct_010_p1', name: 'Garage_Wall.jpg', url: '/assets/images/properties/Modern_White_Suburban_Home.jpg', annotation: 'Wall Connector mounting location' },
+            { id: 'sct_010_p2', name: 'Panel_Location.jpg', url: '/assets/images/properties/Brick_Front_Porch_Home.jpg', annotation: 'Main panel — check available breaker slots' },
+        ],
+        statusHistory: [
+            { id: 'sct_010_h1', status: 'Assigned', actorId: 'owner_001', actorName: 'Justin Johnson', comment: 'Task created and assigned. Please confirm ETA.', at: '2026-05-20T09:00:00Z' },
+        ],
+        thread: [
+            { id: 'sct_010_t1', channel: 'group', senderId: 'owner_001', senderName: 'Justin Johnson', senderRole: 'Owner', body: 'Carlos — homeowner is hoping to have this in before next weekend. Can you take a look at the panel and confirm slot availability?', at: '2026-05-20T09:02:00Z' },
+        ],
+        expenses: [],
+        fees: [],
+        activities: [],
+        projectId: 'proj_011',
+        paymentStatus: 'Unpaid',
+        paymentRequestedAt: null,
+        createdAt: '2026-05-20T09:00:00Z',
+        updatedAt: '2026-05-20T09:02:00Z',
+    },
+
+    // -------------------------------------------------------------------
+    // sct_009 — Jennifer Wu (sub_004) — On Hold plumbing
+    // -------------------------------------------------------------------
+    {
+        id: 'sct_009',
+        companyId: 'lynkeduppro',
+        companyName: 'LynkedUp Pro Roofing',
+        subcontractorId: 'sub_004',
+        subcontractorName: 'Jennifer Wu',
+        assignedBy: 'owner_001',
+        assignedByName: 'Justin Johnson',
+        title: 'Rough-in plumbing for ADU bathroom',
+        location: '6112 Roundrock Dr, Plano, TX 75025',
+        description: 'New ADU build — bathroom rough-in. Coordinate with framing inspection.',
+        dueDate: '2026-06-15',
+        priority: 'medium',
+        status: 'On Hold',
+        photos: [],
+        statusHistory: [
+            { id: 'sct_009_h1', status: 'Assigned', actorId: 'owner_001', actorName: 'Justin Johnson', comment: 'Task created.', at: '2026-05-09T10:00:00Z' },
+            { id: 'sct_009_h2', status: 'On Hold',  actorId: 'sub_004',  actorName: 'Jennifer Wu',    comment: 'Waiting on framing to finish.', at: '2026-05-13T12:00:00Z' },
+        ],
+        thread: [],
+        expenses: [],
+        fees: [],
+        projectId: null,
+        paymentStatus: 'Unpaid',
+        paymentRequestedAt: null,
+        createdAt: '2026-05-09T10:00:00Z',
+        updatedAt: '2026-05-13T12:00:00Z',
+    },
+];
+
+const MOCK_NOTIFICATIONS = [
+    // ============================================
+    // sub_002 — Maya Patel (default demo user)
+    // ============================================
+    // -- Task Assigned -----------------------------
+    {
+        id: 'notif_001', recipientUserId: 'sub_002', recipientRole: 'SUBCONTRACTOR',
+        type: 'task_assigned',
+        message: 'You have been assigned a task by LynkedUp Pro Roofing — "Replace damaged ridge cap"',
+        taskId: 'sct_001', fromCompanyId: 'lynkeduppro', fromCompanyName: 'LynkedUp Pro Roofing',
+        isRead: false, createdAt: '2026-05-15T09:12:00Z',
+    },
+    {
+        id: 'notif_002', recipientUserId: 'sub_002', recipientRole: 'SUBCONTRACTOR',
+        type: 'task_assigned',
+        message: 'You have been assigned a task by LynkedUp Pro Roofing — "Emergency tarp — storm damage"',
+        taskId: 'sct_004', fromCompanyId: 'lynkeduppro', fromCompanyName: 'LynkedUp Pro Roofing',
+        isRead: false, createdAt: '2026-05-18T22:40:00Z',
+    },
+    {
+        id: 'notif_003', recipientUserId: 'sub_002', recipientRole: 'SUBCONTRACTOR',
+        type: 'task_assigned',
+        message: 'You have been assigned a task by LynkedUp Pro Roofing — "Replace gutter on south elevation"',
+        taskId: 'sct_006', fromCompanyId: 'lynkeduppro', fromCompanyName: 'LynkedUp Pro Roofing',
+        isRead: false, createdAt: '2026-05-17T14:00:00Z',
+    },
+    {
+        id: 'notif_004', recipientUserId: 'sub_002', recipientRole: 'SUBCONTRACTOR',
+        type: 'task_assigned',
+        message: 'You have been assigned a task by LynkedUp Pro Roofing — "Inspect attic ventilation"',
+        taskId: 'sct_005', fromCompanyId: 'lynkeduppro', fromCompanyName: 'LynkedUp Pro Roofing',
+        isRead: true, createdAt: '2026-05-12T10:00:00Z',
+    },
+    // -- Message Received --------------------------
+    {
+        id: 'notif_005', recipientUserId: 'sub_002', recipientRole: 'SUBCONTRACTOR',
+        type: 'message_received',
+        message: 'Justin Johnson replied on sct_001 — "Please source them — match Owens Corning…"',
+        taskId: 'sct_001', fromCompanyId: 'lynkeduppro', fromCompanyName: 'LynkedUp Pro Roofing',
+        isRead: false, createdAt: '2026-05-15T09:14:00Z',
+    },
+    {
+        id: 'notif_006', recipientUserId: 'sub_002', recipientRole: 'SUBCONTRACTOR',
+        type: 'message_received',
+        message: 'Justin Johnson sent a new message on sct_004 — "Can you make it first thing tomorrow morning?"',
+        taskId: 'sct_004', fromCompanyId: 'lynkeduppro', fromCompanyName: 'LynkedUp Pro Roofing',
+        isRead: false, createdAt: '2026-05-18T22:42:00Z',
+    },
+    {
+        id: 'notif_007', recipientUserId: 'sub_002', recipientRole: 'SUBCONTRACTOR',
+        type: 'message_received',
+        message: 'Admin One added an internal note on sct_005 — "I will reach out to the homeowner…"',
+        taskId: 'sct_005', fromCompanyId: 'lynkeduppro', fromCompanyName: 'LynkedUp Pro Roofing',
+        isRead: true, createdAt: '2026-05-15T16:20:00Z',
+    },
+    // -- Task Updated ------------------------------
+    {
+        id: 'notif_008', recipientUserId: 'sub_002', recipientRole: 'SUBCONTRACTOR',
+        type: 'task_updated',
+        message: 'Due date for sct_001 was updated to May 25, 2026 by Justin Johnson.',
+        taskId: 'sct_001', fromCompanyId: 'lynkeduppro', fromCompanyName: 'LynkedUp Pro Roofing',
+        isRead: true, createdAt: '2026-05-15T11:00:00Z',
+    },
+    {
+        id: 'notif_009', recipientUserId: 'sub_002', recipientRole: 'SUBCONTRACTOR',
+        type: 'task_updated',
+        message: 'Priority for sct_004 raised to High by Justin Johnson.',
+        taskId: 'sct_004', fromCompanyId: 'lynkeduppro', fromCompanyName: 'LynkedUp Pro Roofing',
+        isRead: false, createdAt: '2026-05-18T22:50:00Z',
+    },
+    {
+        id: 'notif_010', recipientUserId: 'sub_002', recipientRole: 'SUBCONTRACTOR',
+        type: 'task_updated',
+        message: 'New photo attached to sct_001 by Justin Johnson.',
+        taskId: 'sct_001', fromCompanyId: 'lynkeduppro', fromCompanyName: 'LynkedUp Pro Roofing',
+        isRead: true, createdAt: '2026-05-15T12:00:00Z',
+    },
+    // -- Status Changed ----------------------------
+    {
+        id: 'notif_011', recipientUserId: 'sub_002', recipientRole: 'SUBCONTRACTOR',
+        type: 'status_changed',
+        message: 'Status for sct_001 changed to In Progress by Maya Patel.',
+        taskId: 'sct_001', fromCompanyId: 'lynkeduppro', fromCompanyName: 'LynkedUp Pro Roofing',
+        isRead: true, createdAt: '2026-05-16T08:30:00Z',
+    },
+    {
+        id: 'notif_012', recipientUserId: 'sub_002', recipientRole: 'SUBCONTRACTOR',
+        type: 'status_changed',
+        message: 'Status for sct_005 changed to On Hold by Maya Patel.',
+        taskId: 'sct_005', fromCompanyId: 'lynkeduppro', fromCompanyName: 'LynkedUp Pro Roofing',
+        isRead: true, createdAt: '2026-05-15T16:00:00Z',
+    },
+    {
+        id: 'notif_013', recipientUserId: 'sub_002', recipientRole: 'SUBCONTRACTOR',
+        type: 'status_changed',
+        message: 'Status for sct_007 changed to Completed by Maya Patel.',
+        taskId: 'sct_007', fromCompanyId: 'lynkeduppro', fromCompanyName: 'LynkedUp Pro Roofing',
+        isRead: true, createdAt: '2026-05-07T16:45:00Z',
+    },
+
+    // ============================================
+    // sub_001 — Carlos
+    // ============================================
+    {
+        id: 'notif_021', recipientUserId: 'sub_001', recipientRole: 'SUBCONTRACTOR',
+        type: 'task_assigned',
+        message: 'You have been assigned a task by LynkedUp Pro Roofing — "Replace breaker panel"',
+        taskId: 'sct_002', fromCompanyId: 'lynkeduppro', fromCompanyName: 'LynkedUp Pro Roofing',
+        isRead: false, createdAt: '2026-05-10T15:40:00Z',
+    },
+    {
+        id: 'notif_022', recipientUserId: 'sub_001', recipientRole: 'SUBCONTRACTOR',
+        type: 'task_assigned',
+        message: 'You have been assigned a task by LynkedUp Pro Roofing — "Install GFCI outlets — kitchen + bath"',
+        taskId: 'sct_008', fromCompanyId: 'lynkeduppro', fromCompanyName: 'LynkedUp Pro Roofing',
+        isRead: false, createdAt: '2026-05-16T13:00:00Z',
+    },
+    {
+        id: 'notif_026', recipientUserId: 'sub_001', recipientRole: 'SUBCONTRACTOR',
+        type: 'message_received',
+        message: 'Admin One sent a new message on sct_008 — "Insurance is reimbursing the code upgrade…"',
+        taskId: 'sct_008', fromCompanyId: 'lynkeduppro', fromCompanyName: 'LynkedUp Pro Roofing',
+        isRead: false, createdAt: '2026-05-16T13:05:00Z',
+    },
+    {
+        id: 'notif_027', recipientUserId: 'sub_001', recipientRole: 'SUBCONTRACTOR',
+        type: 'message_received',
+        message: 'Justin Johnson sent a new message on sct_008 — "Homeowner has 2 small kids…"',
+        taskId: 'sct_008', fromCompanyId: 'lynkeduppro', fromCompanyName: 'LynkedUp Pro Roofing',
+        isRead: true, createdAt: '2026-05-17T09:00:00Z',
+    },
+    {
+        id: 'notif_028', recipientUserId: 'sub_001', recipientRole: 'SUBCONTRACTOR',
+        type: 'task_updated',
+        message: 'Photos updated on sct_008 by Admin One.',
+        taskId: 'sct_008', fromCompanyId: 'lynkeduppro', fromCompanyName: 'LynkedUp Pro Roofing',
+        isRead: false, createdAt: '2026-05-16T13:30:00Z',
+    },
+    {
+        id: 'notif_029', recipientUserId: 'sub_001', recipientRole: 'SUBCONTRACTOR',
+        type: 'status_changed',
+        message: 'Status for sct_008 changed to In Progress by Carlos Subcontractor.',
+        taskId: 'sct_008', fromCompanyId: 'lynkeduppro', fromCompanyName: 'LynkedUp Pro Roofing',
+        isRead: true, createdAt: '2026-05-19T10:15:00Z',
+    },
+    {
+        id: 'notif_023', recipientUserId: 'sub_001', recipientRole: 'SUBCONTRACTOR',
+        type: 'message_received',
+        message: 'Justin Johnson confirmed Oncor disconnect on sct_002.',
+        taskId: 'sct_002', fromCompanyId: 'lynkeduppro', fromCompanyName: 'LynkedUp Pro Roofing',
+        isRead: true, createdAt: '2026-05-11T16:30:00Z',
+    },
+    {
+        id: 'notif_024', recipientUserId: 'sub_001', recipientRole: 'SUBCONTRACTOR',
+        type: 'task_updated',
+        message: 'Permit fee on sct_002 was approved by Admin One.',
+        taskId: 'sct_002', fromCompanyId: 'lynkeduppro', fromCompanyName: 'LynkedUp Pro Roofing',
+        isRead: false, createdAt: '2026-05-11T14:30:00Z',
+    },
+    {
+        id: 'notif_025', recipientUserId: 'sub_001', recipientRole: 'SUBCONTRACTOR',
+        type: 'status_changed',
+        message: 'Status for sct_002 changed to In Progress by Carlos Subcontractor.',
+        taskId: 'sct_002', fromCompanyId: 'lynkeduppro', fromCompanyName: 'LynkedUp Pro Roofing',
+        isRead: true, createdAt: '2026-05-12T08:20:00Z',
+    },
+];
+
 // --- CONTEXT SETUP ---
 
 const MockStoreContext = createContext();
@@ -5194,6 +6026,11 @@ export const MockStoreProvider = ({ children }) => {
         { id: 'om_013', userId: 'sub_001', name: 'Carlos Subcontractor', email: 'carlos@electricpro.com', roleKey: 'SUBCONTRACTOR', status: 'active', joinedAt: '2024-08-01', lastActivity: '2025-05-10', assignedJobsCount: 5 },
     ]);
 
+    // Subcontractor management (Feature 8.2)
+    const [subcontractors, setSubcontractors] = useState(MOCK_SUBCONTRACTORS);
+    const [subcontractorTasks, setSubcontractorTasks] = useState(MOCK_SUBCONTRACTOR_TASKS);
+    const [notifications, setNotifications] = useState(MOCK_NOTIFICATIONS);
+
     // Initialize properties once
     useEffect(() => {
         const data = generateProperties();
@@ -5265,6 +6102,386 @@ export const MockStoreProvider = ({ children }) => {
         return true;
     };
 
+    // ── Notifications ───────────────────────────────────────────────────────
+    // Designed so a real-time transport (websocket, SSE, push) can later
+    // subscribe to `addNotification` without changing call sites.
+    const addNotification = (payload) => {
+        const notif = {
+            id: `notif_${Date.now()}_${Math.floor(Math.random() * 1000)}`,
+            isRead: false,
+            createdAt: new Date().toISOString(),
+            ...payload,
+        };
+        setNotifications(prev => [notif, ...prev]);
+        logger.info('Notification dispatched', { notif });
+        return notif;
+    };
+
+    const markNotificationRead = (notificationId) => {
+        setNotifications(prev => prev.map(n => n.id === notificationId ? { ...n, isRead: true } : n));
+    };
+
+    // ── Subcontractor Tasks (Feature 8.2) ──────────────────────────────────
+    const addSubcontractorTask = (input) => {
+        const subcontractor = subcontractors.find(s => s.id === input.subcontractorId);
+        if (!subcontractor) {
+            toast.error('Failed to assign task: subcontractor not found.');
+            return null;
+        }
+
+        const now = new Date().toISOString();
+        const task = {
+            id: `sct_${Date.now()}`,
+            companyId: input.companyId,
+            companyName: input.companyName,
+            subcontractorId: subcontractor.id,
+            subcontractorName: subcontractor.name,
+            assignedBy: input.assignedBy,
+            assignedByName: input.assignedByName,
+            title: input.title,
+            location: input.location,
+            description: input.description || '',
+            dueDate: input.dueDate,
+            priority: input.priority || 'medium',
+            status: 'Assigned',
+            photos: (input.photos || []).map((p, i) => ({
+                id: p.id || `${Date.now()}_${i}`,
+                name: p.name,
+                url: p.url,
+                annotation: p.annotation || '',
+            })),
+            statusHistory: [{
+                id: `h_${Date.now()}`,
+                status: 'Assigned',
+                actorId: input.assignedBy,
+                actorName: input.assignedByName,
+                comment: 'Task created and assigned.',
+                at: now,
+            }],
+            thread: [],
+            expenses: [],
+            fees: [],
+            createdAt: now,
+            updatedAt: now,
+        };
+
+        setSubcontractorTasks(prev => [task, ...prev]);
+
+        addNotification({
+            recipientUserId: subcontractor.id,
+            recipientRole: 'SUBCONTRACTOR',
+            type: 'task_assigned',
+            message: `You have been assigned a task by ${input.companyName}`,
+            taskId: task.id,
+            fromCompanyId: input.companyId,
+            fromCompanyName: input.companyName,
+        });
+
+        toast.success(`Task assigned to ${subcontractor.name}`);
+        return task;
+    };
+
+    const setSubcontractorTaskStatus = (taskId, nextStatus, comment, actor, photos = []) => {
+        const now = new Date().toISOString();
+        let didChange = false;
+        let companyId = null;
+        let companyName = null;
+        let assignedByUserId = null;
+
+        const normalizedPhotos = (photos || []).map((p, i) => ({
+            id: p.id || `${Date.now()}_${i}_${Math.random().toString(36).slice(2, 7)}`,
+            url: p.url,
+            name: p.name || '',
+        }));
+
+        setSubcontractorTasks(prev => prev.map(t => {
+            if (t.id !== taskId) return t;
+            if (t.status === nextStatus) return t;
+            didChange = true;
+            companyId = t.companyId;
+            companyName = t.companyName;
+            assignedByUserId = t.assignedBy;
+            const entry = {
+                id: `h_${Date.now()}`,
+                status: nextStatus,
+                actorId: actor?.id || t.subcontractorId,
+                actorName: actor?.name || t.subcontractorName,
+                comment: comment?.trim() || '',
+                at: now,
+            };
+            const activityEntry = {
+                id: `a_${Date.now()}`,
+                type: 'status_change',
+                status: nextStatus,
+                note: comment?.trim() || '',
+                photos: normalizedPhotos,
+                actorId: actor?.id || t.subcontractorId,
+                actorName: actor?.name || t.subcontractorName,
+                actorRole: actor?.role || 'Subcontractor',
+                at: now,
+            };
+            return {
+                ...t,
+                status: nextStatus,
+                statusHistory: [...(t.statusHistory || []), entry],
+                activities: [...(t.activities || []), activityEntry],
+                updatedAt: now,
+            };
+        }));
+
+        if (didChange) {
+            // Notify owner / admin who assigned the task
+            if (assignedByUserId) {
+                addNotification({
+                    recipientUserId: assignedByUserId,
+                    recipientRole: 'OWNER',
+                    type: 'status_changed',
+                    message: `Status changed to ${nextStatus} by ${actor?.name || 'subcontractor'}`,
+                    taskId,
+                    fromCompanyId: companyId,
+                    fromCompanyName: companyName,
+                });
+            }
+            toast.success(`Status updated to ${nextStatus}`);
+        }
+    };
+
+    const addSubcontractorTaskMessage = (taskId, { body, channel = 'group', sender }) => {
+        if (!body?.trim()) return;
+        const now = new Date().toISOString();
+        let companyId = null;
+        let companyName = null;
+        let assignedByUserId = null;
+        let subId = null;
+
+        setSubcontractorTasks(prev => prev.map(t => {
+            if (t.id !== taskId) return t;
+            companyId = t.companyId;
+            companyName = t.companyName;
+            assignedByUserId = t.assignedBy;
+            subId = t.subcontractorId;
+            const msg = {
+                id: `m_${Date.now()}`,
+                channel,
+                senderId: sender?.id,
+                senderName: sender?.name || 'You',
+                senderRole: sender?.role || 'Subcontractor',
+                body: body.trim(),
+                at: now,
+                mine: true,
+            };
+            return {
+                ...t,
+                thread: [...(t.thread || []), msg],
+                updatedAt: now,
+            };
+        }));
+
+        // Notify the other side
+        const recipientUserId = sender?.id === assignedByUserId ? subId : assignedByUserId;
+        if (recipientUserId) {
+            addNotification({
+                recipientUserId,
+                recipientRole: sender?.id === assignedByUserId ? 'SUBCONTRACTOR' : 'OWNER',
+                type: 'message_received',
+                message: `New message from ${sender?.name || 'a teammate'}`,
+                taskId,
+                fromCompanyId: companyId,
+                fromCompanyName: companyName,
+            });
+        }
+    };
+
+    const addSubcontractorTaskExpense = (taskId, fields) => {
+        const now = new Date().toISOString();
+        setSubcontractorTasks(prev => prev.map(t => t.id === taskId ? {
+            ...t,
+            expenses: [
+                ...(t.expenses || []),
+                {
+                    id: `e_${Date.now()}`,
+                    description: fields.description?.trim() || '',
+                    category: fields.category || 'Materials',
+                    amount: Number(fields.amount) || 0,
+                    notes: fields.notes?.trim() || '',
+                    receiptUrl: fields.receiptUrl || '',
+                    createdAt: now,
+                },
+            ],
+            updatedAt: now,
+        } : t));
+        toast.success('Expense logged');
+    };
+
+    const addSubcontractorTaskFee = (taskId, fields) => {
+        const now = new Date().toISOString();
+        setSubcontractorTasks(prev => prev.map(t => t.id === taskId ? {
+            ...t,
+            fees: [
+                ...(t.fees || []),
+                {
+                    id: `f_${Date.now()}`,
+                    description: fields.description?.trim() || '',
+                    type: fields.type || 'Labour / Service Fee',
+                    amount: Number(fields.amount) || 0,
+                    createdAt: now,
+                },
+            ],
+            updatedAt: now,
+        } : t));
+        toast.success('Fee submitted');
+    };
+
+    const addSubcontractorTaskActivity = (taskId, { note, photos = [] }, actor) => {
+        const trimmed = note?.trim() || '';
+        if (!trimmed) return;
+        const now = new Date().toISOString();
+        const normalizedPhotos = (photos || []).map((p, i) => ({
+            id: p.id || `${Date.now()}_${i}_${Math.random().toString(36).slice(2, 7)}`,
+            url: p.url,
+            name: p.name || '',
+        }));
+        let companyId = null;
+        let companyName = null;
+        let assignedByUserId = null;
+        let subId = null;
+
+        setSubcontractorTasks(prev => prev.map(t => {
+            if (t.id !== taskId) return t;
+            companyId = t.companyId;
+            companyName = t.companyName;
+            assignedByUserId = t.assignedBy;
+            subId = t.subcontractorId;
+            const activityEntry = {
+                id: `a_${Date.now()}`,
+                type: 'progress_update',
+                status: t.status,
+                note: trimmed,
+                photos: normalizedPhotos,
+                actorId: actor?.id || t.subcontractorId,
+                actorName: actor?.name || t.subcontractorName,
+                actorRole: actor?.role || 'Subcontractor',
+                at: now,
+            };
+            const historyEntry = {
+                id: `h_${Date.now()}`,
+                status: t.status,
+                actorId: actor?.id || t.subcontractorId,
+                actorName: actor?.name || t.subcontractorName,
+                comment: trimmed,
+                at: now,
+                isProgressUpdate: true,
+            };
+            return {
+                ...t,
+                activities: [...(t.activities || []), activityEntry],
+                statusHistory: [...(t.statusHistory || []), historyEntry],
+                updatedAt: now,
+            };
+        }));
+
+        const recipientUserId = actor?.id === assignedByUserId ? subId : assignedByUserId;
+        if (recipientUserId) {
+            addNotification({
+                recipientUserId,
+                recipientRole: actor?.id === assignedByUserId ? 'SUBCONTRACTOR' : 'OWNER',
+                type: 'progress_update',
+                message: `New progress update from ${actor?.name || 'subcontractor'}`,
+                taskId,
+                fromCompanyId: companyId,
+                fromCompanyName: companyName,
+            });
+        }
+        toast.success('Progress update posted');
+    };
+
+    const updateSubcontractorTask = (taskId, data) => {
+        let updatedSubId = null;
+        let prevSubId = null;
+        let companyName = null;
+        let companyId = null;
+
+        setSubcontractorTasks(prev => prev.map(t => {
+            if (t.id !== taskId) return t;
+            prevSubId = t.subcontractorId;
+            companyName = t.companyName;
+            companyId = t.companyId;
+            const nextSubId = data.subcontractorId ?? t.subcontractorId;
+            updatedSubId = nextSubId;
+            const nextSub = subcontractors.find(s => s.id === nextSubId);
+            return {
+                ...t,
+                ...data,
+                subcontractorId: nextSubId,
+                subcontractorName: nextSub?.name ?? t.subcontractorName,
+                photos: data.photos
+                    ? data.photos.map((p, i) => ({
+                        id: p.id || `${Date.now()}_${i}`,
+                        name: p.name,
+                        url: p.url,
+                        annotation: p.annotation || '',
+                    }))
+                    : t.photos,
+                updatedAt: new Date().toISOString(),
+            };
+        }));
+
+        // If subcontractor changed, dispatch a fresh notification to the new one.
+        if (updatedSubId && prevSubId && updatedSubId !== prevSubId) {
+            addNotification({
+                recipientUserId: updatedSubId,
+                recipientRole: 'SUBCONTRACTOR',
+                type: 'task_assigned',
+                message: `You have been assigned a task by ${companyName}`,
+                taskId,
+                fromCompanyId: companyId,
+                fromCompanyName: companyName,
+            });
+        }
+
+        toast.success('Task updated');
+    };
+
+    const cancelSubcontractorTask = (taskId) => {
+        setSubcontractorTasks(prev => prev.map(t => t.id === taskId
+            ? { ...t, status: 'Cancelled', updatedAt: new Date().toISOString() }
+            : t,
+        ));
+        toast.success('Task cancelled');
+    };
+
+    const reassignSubcontractorTask = (taskId, newSubcontractorId) => {
+        const subcontractor = subcontractors.find(s => s.id === newSubcontractorId);
+        if (!subcontractor) {
+            toast.error('Failed to reassign: subcontractor not found.');
+            return;
+        }
+        let companyName = null;
+        let companyId = null;
+        setSubcontractorTasks(prev => prev.map(t => {
+            if (t.id !== taskId) return t;
+            companyName = t.companyName;
+            companyId = t.companyId;
+            return {
+                ...t,
+                subcontractorId: subcontractor.id,
+                subcontractorName: subcontractor.name,
+                status: t.status === 'Cancelled' ? 'Assigned' : t.status,
+                updatedAt: new Date().toISOString(),
+            };
+        }));
+        addNotification({
+            recipientUserId: subcontractor.id,
+            recipientRole: 'SUBCONTRACTOR',
+            type: 'task_assigned',
+            message: `You have been assigned a task by ${companyName}`,
+            taskId,
+            fromCompanyId: companyId,
+            fromCompanyName: companyName,
+        });
+        toast.success(`Task reassigned to ${subcontractor.name}`);
+    };
+
     return (
         <MockStoreContext.Provider value={{
             properties,
@@ -5500,6 +6717,38 @@ export const MockStoreProvider = ({ children }) => {
             resendOrgInvite: (memberId) => {
                 toast.success('Invite resent successfully');
             },
+
+            // Subcontractor Management (Feature 8.2)
+            subcontractors,
+            addSubcontractor: (sub) => {
+                const newSub = {
+                    ...sub,
+                    id: sub.id || `sub_${Date.now()}`,
+                    status: sub.status || 'active',
+                    companies: sub.companies || [],
+                    joinedAt: sub.joinedAt || new Date().toISOString().slice(0, 10),
+                };
+                setSubcontractors(prev => [...prev, newSub]);
+                return newSub;
+            },
+            subcontractorTasks,
+            taskPriorities: SUBCONTRACTOR_TASK_PRIORITIES,
+            taskStatuses: SUBCONTRACTOR_TASK_STATUSES,
+            subSelfStatuses: SUBCONTRACTOR_SELF_STATUSES,
+            expenseCategories: SUBCONTRACTOR_EXPENSE_CATEGORIES,
+            feeTypes: SUBCONTRACTOR_FEE_TYPES,
+            addSubcontractorTask,
+            updateSubcontractorTask,
+            cancelSubcontractorTask,
+            reassignSubcontractorTask,
+            setSubcontractorTaskStatus,
+            addSubcontractorTaskMessage,
+            addSubcontractorTaskExpense,
+            addSubcontractorTaskFee,
+            addSubcontractorTaskActivity,
+            notifications,
+            addNotification,
+            markNotificationRead,
         }}>
             {children}
         </MockStoreContext.Provider>
diff --git a/src/pages/owner/OwnerProjectDetail.jsx b/src/pages/owner/OwnerProjectDetail.jsx
index b450ff7..25f076f 100644
--- a/src/pages/owner/OwnerProjectDetail.jsx
+++ b/src/pages/owner/OwnerProjectDetail.jsx
@@ -1,4 +1,4 @@
-import React, { useState, useMemo, useRef } from 'react';
+import React, { useState, useMemo, useRef, useEffect } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
 import { useAuth } from '../../context/AuthContext';
 import { useMockStore } from '../../data/mockStore';
@@ -12,7 +12,7 @@ import {
     ArrowLeft, CheckCircle, Clock, AlertTriangle, PauseCircle, ShieldAlert,
     FileText, DollarSign, GitPullRequest, AlertCircle, Activity, Milestone,
     Shield, ChevronRight, Phone, MessageSquare, Mail, AlertOctagon, TrendingUp, Key, Zap, Camera, Plus, Map, User, Crosshair, Image as ImageIcon, MapPin,
-    Upload, Trash2, Eye, Pencil, X as XIcon, FolderOpen, Download, File, StickyNote, Banknote, ChevronLeft, ChevronDown as ChevronDownIcon, Info, Settings, Building2, User as UserIcon, Briefcase, Users
+    Upload, Trash2, Eye, Pencil, X as XIcon, FolderOpen, Download, File, StickyNote, Banknote, ChevronLeft, ChevronDown as ChevronDownIcon, Info, Settings, Building2, User as UserIcon, Briefcase, Users, HardHat, Wrench, UserCheck, Wallet
 } from 'lucide-react';
 import ChangeOrderDrawer from '../../components/owner/ChangeOrderDrawer';
 import InvoiceDetailModal from '../../components/owner/InvoiceDetailModal';
@@ -125,6 +125,51 @@ function seedPaymentsMock(projectId) {
 
 const PAYMENTS_PER_PAGE = 5;
 
+// ── Expense type taxonomy ──────────────────────────────────────────────
+const EXPENSE_TYPE_CONFIG = {
+    material:      { label: 'Material',        icon: Wrench,    color: 'text-sky-600 dark:text-[#00f0ff]',     bg: 'bg-sky-50 dark:bg-blue-500/10',     border: 'border-sky-200 dark:border-blue-500/20' },
+    labor:         { label: 'Labor',           icon: HardHat,   color: 'text-emerald-600 dark:text-emerald-400', bg: 'bg-emerald-50 dark:bg-emerald-500/10', border: 'border-emerald-200 dark:border-emerald-500/20' },
+    team:          { label: 'Team Commission', icon: UserCheck, color: 'text-purple-600 dark:text-purple-400', bg: 'bg-purple-50 dark:bg-purple-500/10', border: 'border-purple-200 dark:border-purple-500/20' },
+    subcontractor: { label: 'Subcontractor',   icon: HardHat,   color: 'text-amber-600 dark:text-[#fda913]',   bg: 'bg-amber-50 dark:bg-[#fda913]/10',   border: 'border-amber-200 dark:border-[#fda913]/20' },
+    other:         { label: 'Other',           icon: DollarSign, color: 'text-zinc-600 dark:text-zinc-400',     bg: 'bg-zinc-100 dark:bg-white/5',        border: 'border-zinc-200 dark:border-white/10' },
+};
+
+const SUBCONTRACTOR_WORK_TYPES = ['Plumbing', 'Electrical', 'Painting', 'Roofing', 'Civil work', 'HVAC', 'Carpentry', 'Other'];
+
+const inferExpenseType = (category = '') => {
+    const c = (category || '').toLowerCase();
+    if (c.includes('material')) return 'material';
+    if (c.includes('labor')) return 'labor';
+    if (c.includes('commission') || c.includes('sales rep')) return 'team';
+    if (SUBCONTRACTOR_WORK_TYPES.some(w => c.includes(w.toLowerCase()))) return 'subcontractor';
+    return 'other';
+};
+
+function seedExpenseRowsMock(project) {
+    const baseRows = (project?.budgetBreakdown || []).map((b, i) => ({
+        id: `exp_base_${i}`,
+        type: inferExpenseType(b.category),
+        name: b.name || '—',
+        category: b.category || '',
+        allocated: Number(b.allocated) || 0,
+        actual: Number(b.actual) || 0,
+        paid: Number(b.actual) > 0 && Number(b.actual) >= Number(b.allocated) * 0.9,
+    }));
+    const seed = (project?.id || '').charCodeAt((project?.id || 'x').length - 1) % 3;
+    const teamRows = [
+        { id: 'exp_team_1', type: 'team', name: 'Jesus Gonzales', category: 'Sales Rep',  allocated: 4200, actual: 4200, paid: true },
+        { id: 'exp_team_2', type: 'team', name: 'Frank Agent',    category: 'Canvasser',  allocated: 1500, actual: 1500, paid: false },
+        { id: 'exp_team_3', type: 'team', name: 'Sarah Sales',    category: 'Estimator',  allocated: 1200, actual: 0,    paid: false },
+    ].slice(0, 2 + seed);
+    const subRows = [
+        { id: 'exp_sub_1', type: 'subcontractor', name: 'PlumbPro Services',   category: 'Plumbing',   allocated: 1800, actual: 1800, paid: true  },
+        { id: 'exp_sub_2', type: 'subcontractor', name: 'Bright Electric LLC', category: 'Electrical', allocated: 2400, actual: 2150, paid: false },
+        { id: 'exp_sub_3', type: 'subcontractor', name: 'Premium Painters',    category: 'Painting',   allocated: 950,  actual: 950,  paid: true  },
+        { id: 'exp_sub_4', type: 'subcontractor', name: 'Solid Civil Works',   category: 'Civil work', allocated: 3200, actual: 0,    paid: false },
+    ].slice(0, 3 + seed);
+    return [...baseRows, ...teamRows, ...subRows];
+}
+
 const COMMISSION_TYPES = [
     { value: 'flat', label: 'Flat Amount', hint: 'Fixed dollar amount' },
     { value: 'percent_gross', label: '% of Gross', hint: 'Percentage of Total Received' },
@@ -158,6 +203,10 @@ const OwnerProjectDetail = () => {
     const [paymentSort, setPaymentSort] = useState({ field: 'date', dir: 'desc' });
     const [paymentPage, setPaymentPage] = useState(0);
 
+    // ── Expense rows state (unified cost breakdown) ───────────────────────────
+    const [expenseRows, setExpenseRows] = useState([]);
+    const [expensesSeeded, setExpensesSeeded] = useState(false);
+
     const [openTooltip, setOpenTooltip] = useState(null);
 
     // ── Commission config state ─────────────────────────────────────────────
@@ -248,6 +297,31 @@ const OwnerProjectDetail = () => {
         projects.find(p => p.id === projectId && p.ownerId === user?.id)
         , [projects, projectId, user]);
 
+    useEffect(() => {
+        if (project && !expensesSeeded) {
+            setExpenseRows(seedExpenseRowsMock(project));
+            setExpensesSeeded(true);
+        }
+    }, [project, expensesSeeded]);
+
+    const togglePaid = (id) => {
+        setExpenseRows(prev => prev.map(r => r.id === id ? { ...r, paid: !r.paid } : r));
+    };
+
+    const handleAddExpense = (data, type) => {
+        const amt = parseFloat(data.amount) || 0;
+        const newRow = {
+            id: `exp_${Date.now()}`,
+            type: type || data.type || 'other',
+            name: data.name || '',
+            category: data.category || '',
+            allocated: amt,
+            actual: amt,
+            paid: false,
+        };
+        setExpenseRows(prev => [newRow, ...prev]);
+    };
+
     const teamFinancials = useMemo(() => {
         if (!project) return { totalReceived: 0, grossProfit: 0 };
         const paid = (project.paymentSchedule || [])
@@ -283,9 +357,16 @@ const OwnerProjectDetail = () => {
 
     const activeCommissionConfig = resolvedCommission;
 
+    const expenseTotals = useMemo(() => {
+        const total = expenseRows.reduce((s, r) => s + (Number(r.actual) || Number(r.allocated) || 0), 0);
+        const paid = expenseRows.reduce((s, r) => s + (r.paid ? (Number(r.actual) || Number(r.allocated) || 0) : 0), 0);
+        const outstanding = Math.max(0, total - paid);
+        return { total, paid, outstanding };
+    }, [expenseRows]);
+
     const profitMetrics = useMemo(() => {
-        if (!project) return { totalCosts: 0, commission: 0, commissionFormula: '', grossProfit: 0, netProfit: 0, grossMargin: 0, netMargin: 0 };
-        const totalCosts = Number(project.actualCost ?? project.spent) || 0;
+        if (!project) return { totalCosts: 0, totalExpenses: 0, paidExpenses: 0, outstandingExpenses: 0, totalBudget: 0, commission: 0, commissionFormula: '', grossProfit: 0, netProfit: 0, grossMargin: 0, netMargin: 0 };
+        const totalCosts = expenseTotals.total || Number(project.actualCost ?? project.spent) || 0;
         const gross = totalReceived - totalCosts;
 
         const { type, rate } = activeCommissionConfig;
@@ -315,11 +396,25 @@ const OwnerProjectDetail = () => {
         }
         commission = Number.isFinite(commission) ? commission : 0;
 
-        const net = gross - commission;
+        // Net Profit = Total Payments Received − Total Expenses (expense table already includes team commission + subcontractors)
+        const net = totalReceived - expenseTotals.total;
         const grossMargin = totalReceived > 0 ? (gross / totalReceived) * 100 : 0;
         const netMargin = totalReceived > 0 ? (net / totalReceived) * 100 : 0;
-        return { totalCosts, commission, commissionFormula, grossProfit: gross, netProfit: net, grossMargin, netMargin };
-    }, [project, totalReceived, activeCommissionConfig]);
+        const totalBudget = Number(project.approvedBudget ?? project.budget) || 0;
+        return {
+            totalCosts,
+            totalExpenses: expenseTotals.total,
+            paidExpenses: expenseTotals.paid,
+            outstandingExpenses: expenseTotals.outstanding,
+            totalBudget,
+            commission,
+            commissionFormula,
+            grossProfit: gross,
+            netProfit: net,
+            grossMargin,
+            netMargin,
+        };
+    }, [project, totalReceived, activeCommissionConfig, expenseTotals]);
 
     if (!project) {
         return (
@@ -691,97 +786,200 @@ const OwnerProjectDetail = () => {
                     {/* BUDGET TAB */}
                     {activeTab === 'budget' && (
                         <div className="space-y-6 max-w-7xl mx-auto">
-                            {budgetChartData.length > 0 ? (
-                                <>
-                                    <NeoCard spotlightColor="rgba(0, 240, 255, 0.1)">
-                                        <div className="flex items-center justify-between mb-1">
-                                            <div className="flex items-center gap-3">
-                                                <DollarSign className={NEON_BLUE} size={20} />
-                                                <h3 className="text-lg font-bold text-zinc-900 dark:text-white tracking-widest uppercase">Budget Breakdown</h3>
+                            {/* Budget & Costs Summary Cards */}
+                            <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-3 sm:gap-4">
+                                {[
+                                    { label: 'Total Budget',         value: profitMetrics.totalBudget,         icon: Wallet,     color: 'text-sky-600 dark:text-[#00f0ff]',     spotlight: 'rgba(0, 240, 255, 0.12)' },
+                                    { label: 'Total Expenses',       value: profitMetrics.totalExpenses,       icon: Wrench,     color: 'text-amber-600 dark:text-[#fda913]',   spotlight: 'rgba(253, 169, 19, 0.12)' },
+                                    { label: 'Payments Received',    value: totalReceived,                     icon: Banknote,   color: 'text-emerald-600 dark:text-[#39ff14]', spotlight: 'rgba(57, 255, 20, 0.12)' },
+                                    { label: 'Outstanding Expenses', value: profitMetrics.outstandingExpenses, icon: AlertCircle, color: 'text-orange-600 dark:text-[#ff4500]', spotlight: 'rgba(255, 69, 0, 0.12)' },
+                                    {
+                                        label: 'Net Profit',
+                                        value: profitMetrics.netProfit,
+                                        icon: TrendingUp,
+                                        color: profitMetrics.netProfit >= 0 ? 'text-emerald-600 dark:text-[#39ff14]' : 'text-red-600 dark:text-[#ff003c]',
+                                        spotlight: profitMetrics.netProfit >= 0 ? 'rgba(57, 255, 20, 0.12)' : 'rgba(255, 0, 60, 0.12)',
+                                        emphasis: true,
+                                    },
+                                ].map((c, i) => {
+                                    const CardIcon = c.icon;
+                                    return (
+                                        <NeoCard key={i} spotlightColor={c.spotlight} innerClassName="!p-4">
+                                            <div className="flex items-center gap-2 mb-2">
+                                                <CardIcon size={14} className={c.color} />
+                                                <h4 className="text-[10px] font-mono font-bold text-zinc-500 dark:text-zinc-400 uppercase tracking-widest truncate">{c.label}</h4>
                                             </div>
-                                            <button
-                                                onClick={() => setCreateModalConfig({
-                                                    title: 'Add Budget Cost', icon: DollarSign, iconColor: 'text-[#39ff14]', iconBg: 'bg-[#39ff14]/10',
-                                                    submitLabel: 'Save Cost', submitColor: 'bg-[#39ff14]/20 text-[#39ff14] border-[#39ff14]/30',
-                                                    fields: [
-                                                        { name: 'category', label: 'Category', type: 'text', required: true },
-                                                        { name: 'allocated', label: 'Allocated Amount', type: 'number', required: true },
-                                                        { name: 'spent', label: 'Actual Spent', type: 'number' }
-                                                    ],
-                                                    onSubmit: handleCreateSubmit
-                                                })}
-                                                className="bg-blue-500/10 hover:bg-blue-500/20 text-[#00f0ff] border border-blue-500/30 px-3 py-1.5 rounded-lg text-xs font-bold transition flex items-center gap-2"
-                                            >
-                                                <Plus size={14} /> Add Cost
-                                            </button>
+                                            <div className={`font-mono font-black tracking-tight ${c.emphasis ? 'text-2xl sm:text-3xl' : 'text-lg sm:text-xl'} ${c.color}`}>
+                                                {c.value >= 0 ? '' : '-'}{formatCurrency(Math.abs(c.value))}
+                                            </div>
+                                            {c.label === 'Net Profit' && (
+                                                <p className="mt-1 text-[10px] font-mono text-zinc-500 dark:text-zinc-500 truncate">
+                                                    Received − Expenses
+                                                </p>
+                                            )}
+                                            {c.label === 'Outstanding Expenses' && (
+                                                <p className="mt-1 text-[10px] font-mono text-zinc-500 dark:text-zinc-500 truncate">
+                                                    Paid: {formatCurrency(profitMetrics.paidExpenses)}
+                                                </p>
+                                            )}
+                                        </NeoCard>
+                                    );
+                                })}
+                            </div>
+
+                            {budgetChartData.length > 0 && (
+                                <NeoCard spotlightColor="rgba(0, 240, 255, 0.1)">
+                                    <div className="flex items-center justify-between mb-1">
+                                        <div className="flex items-center gap-3">
+                                            <DollarSign className={NEON_BLUE} size={20} />
+                                            <h3 className="text-lg font-bold text-zinc-900 dark:text-white tracking-widest uppercase">Budget Breakdown</h3>
                                         </div>
-                                        <p className="text-xs text-zinc-400 mb-6 font-mono">Allocated vs Actual ($k)</p>
-                                        <div className="h-64 bg-zinc-50 dark:bg-black/20 rounded-xl p-4 border border-zinc-200 dark:border-white/5">
-                                            <ResponsiveContainer width="99%" height={256} minWidth={1} minHeight={1}>
-                                                <BarChart data={budgetChartData} barGap={2}>
-                                                    <XAxis dataKey="name" tick={{ fontSize: 11, fill: '#a1a1aa' }} axisLine={false} tickLine={false} />
-                                                    <YAxis tick={{ fontSize: 11, fill: '#a1a1aa' }} axisLine={false} tickLine={false} />
-                                                    <Tooltip content={<CustomTooltip />} />
-                                                    <Bar dataKey="allocated" name="Allocated" fill="#3b82f6" radius={[4, 4, 0, 0]} />
-                                                    <Bar dataKey="actual" name="Actual" fill="#22c55e" radius={[4, 4, 0, 0]} />
-                                                </BarChart>
-                                            </ResponsiveContainer>
+                                    </div>
+                                    <p className="text-xs text-zinc-400 mb-6 font-mono">Allocated vs Actual ($k)</p>
+                                    <div className="h-64 bg-zinc-50 dark:bg-black/20 rounded-xl p-4 border border-zinc-200 dark:border-white/5">
+                                        <ResponsiveContainer width="99%" height={256} minWidth={1} minHeight={1}>
+                                            <BarChart data={budgetChartData} barGap={2}>
+                                                <XAxis dataKey="name" tick={{ fontSize: 11, fill: '#a1a1aa' }} axisLine={false} tickLine={false} />
+                                                <YAxis tick={{ fontSize: 11, fill: '#a1a1aa' }} axisLine={false} tickLine={false} />
+                                                <Tooltip content={<CustomTooltip />} />
+                                                <Bar dataKey="allocated" name="Allocated" fill="#3b82f6" radius={[4, 4, 0, 0]} />
+                                                <Bar dataKey="actual" name="Actual" fill="#22c55e" radius={[4, 4, 0, 0]} />
+                                            </BarChart>
+                                        </ResponsiveContainer>
+                                    </div>
+                                </NeoCard>
+                            )}
+                            <NeoCard spotlightColor="rgba(253, 169, 19, 0.1)" innerClassName="p-0 lg:p-0">
+                                        <div className="p-5 border-b border-zinc-200 dark:border-white/5 flex flex-col sm:flex-row sm:items-center justify-between gap-3">
+                                            <div className="flex items-center gap-3">
+                                                <DollarSign className={NEON_GOLD} size={20} />
+                                                <h3 className="text-lg font-bold text-zinc-900 dark:text-white tracking-widest uppercase">Cost Breakdown / Expenses</h3>
+                                                <span className="text-xs font-bold bg-zinc-100 dark:bg-white/5 border border-zinc-200 dark:border-white/5 px-2 py-0.5 rounded-full text-zinc-500 dark:text-zinc-400">
+                                                    {expenseRows.length}
+                                                </span>
+                                            </div>
+                                            <div className="flex flex-wrap items-center gap-2">
+                                                <button
+                                                    onClick={() => setCreateModalConfig({
+                                                        title: 'Add Team Commission Cost', icon: UserCheck, iconColor: 'text-purple-500 dark:text-purple-400', iconBg: 'bg-purple-500/10',
+                                                        submitLabel: 'Save Team Cost', submitColor: 'bg-purple-500/20 text-purple-500 dark:text-purple-400 border-purple-500/30',
+                                                        fields: [
+                                                            { name: 'name', label: 'Team Member Name', type: 'text', required: true, placeholder: 'e.g. Jesus Gonzales' },
+                                                            { name: 'category', label: 'Role / Category', type: 'text', required: true, placeholder: 'e.g. Sales Rep' },
+                                                            { name: 'amount', label: 'Commission Amount ($)', type: 'number', required: true },
+                                                        ],
+                                                        onSubmit: (d) => handleAddExpense(d, 'team'),
+                                                    })}
+                                                    className="bg-purple-500/10 hover:bg-purple-500/20 text-purple-600 dark:text-purple-400 border border-purple-500/30 px-3 py-1.5 rounded-lg text-xs font-bold transition flex items-center gap-2"
+                                                >
+                                                    <UserCheck size={14} /> Add Team Cost
+                                                </button>
+                                                <button
+                                                    onClick={() => setCreateModalConfig({
+                                                        title: 'Add Subcontractor Cost', icon: HardHat, iconColor: 'text-amber-500 dark:text-[#fda913]', iconBg: 'bg-amber-500/10',
+                                                        submitLabel: 'Save Subcontractor Cost', submitColor: 'bg-amber-500/20 text-amber-500 dark:text-[#fda913] border-amber-500/30',
+                                                        fields: [
+                                                            { name: 'name', label: 'Subcontractor Name', type: 'text', required: true, placeholder: 'e.g. PlumbPro Services' },
+                                                            { name: 'category', label: 'Category / Work Type', type: 'select', required: true, options: SUBCONTRACTOR_WORK_TYPES.map(w => ({ label: w, value: w })) },
+                                                            { name: 'amount', label: 'Amount ($)', type: 'number', required: true },
+                                                        ],
+                                                        onSubmit: (d) => handleAddExpense(d, 'subcontractor'),
+                                                    })}
+                                                    className="bg-amber-500/10 hover:bg-amber-500/20 text-amber-600 dark:text-[#fda913] border border-amber-500/30 px-3 py-1.5 rounded-lg text-xs font-bold transition flex items-center gap-2"
+                                                >
+                                                    <HardHat size={14} /> Add Subcontractor
+                                                </button>
+                                                <button
+                                                    onClick={() => setCreateModalConfig({
+                                                        title: 'Add Cost', icon: DollarSign, iconColor: 'text-[#39ff14]', iconBg: 'bg-[#39ff14]/10',
+                                                        submitLabel: 'Save Cost', submitColor: 'bg-[#39ff14]/20 text-[#39ff14] border-[#39ff14]/30',
+                                                        fields: [
+                                                            { name: 'name', label: 'Vendor / Source Name', type: 'text', required: true },
+                                                            { name: 'category', label: 'Category', type: 'text', required: true, placeholder: 'e.g. Materials - Shingles' },
+                                                            { name: 'amount', label: 'Amount ($)', type: 'number', required: true },
+                                                        ],
+                                                        onSubmit: (d) => handleAddExpense(d, inferExpenseType(d.category)),
+                                                    })}
+                                                    className="bg-blue-500/10 hover:bg-blue-500/20 text-[#00f0ff] border border-blue-500/30 px-3 py-1.5 rounded-lg text-xs font-bold transition flex items-center gap-2"
+                                                >
+                                                    <Plus size={14} /> Add Cost
+                                                </button>
+                                            </div>
                                         </div>
-                                    </NeoCard>
-                                    <NeoCard spotlightColor="rgba(253, 169, 19, 0.1)" innerClassName="p-0 lg:p-0">
                                         <div className="overflow-x-auto w-full rounded-2xl">
-                                            <table className="w-full text-left border-collapse min-w-[600px]">
+                                            <table className="w-full text-left border-collapse min-w-[860px]">
                                                 <thead className="bg-zinc-100 dark:bg-[#18181b]/80 border-b border-zinc-200 dark:border-white/10">
                                                     <tr>
-                                                        {['Name', 'Category', 'Allocated', 'Actual', 'Variance'].map(h => (
-                                                            <th key={h} className={`px-5 py-4 text-xs font-bold uppercase tracking-wider text-zinc-400 ${h !== 'Name' && h !== 'Category' ? 'text-right' : ''}`}>{h}</th>
-                                                        ))}
+                                                        <th className="px-5 py-4 text-xs font-bold uppercase tracking-wider text-zinc-500 dark:text-zinc-400">Type</th>
+                                                        <th className="px-5 py-4 text-xs font-bold uppercase tracking-wider text-zinc-500 dark:text-zinc-400">Name</th>
+                                                        <th className="px-5 py-4 text-xs font-bold uppercase tracking-wider text-zinc-500 dark:text-zinc-400">Category / Role</th>
+                                                        <th className="px-5 py-4 text-xs font-bold uppercase tracking-wider text-zinc-500 dark:text-zinc-400 text-right">Allocated</th>
+                                                        <th className="px-5 py-4 text-xs font-bold uppercase tracking-wider text-zinc-500 dark:text-zinc-400 text-right">Actual</th>
+                                                        <th className="px-5 py-4 text-xs font-bold uppercase tracking-wider text-zinc-500 dark:text-zinc-400 text-center">Paid</th>
                                                     </tr>
                                                 </thead>
                                                 <tbody className="divide-y divide-zinc-100 dark:divide-white/5">
-                                                    {(project.budgetBreakdown || []).map((b, i) => {
-                                                        const variance = b.actual - b.allocated;
+                                                    {expenseRows.map((row) => {
+                                                        const cfg = EXPENSE_TYPE_CONFIG[row.type] || EXPENSE_TYPE_CONFIG.other;
+                                                        const TypeIcon = cfg.icon;
                                                         return (
-                                                            <tr key={i} className="hover:bg-zinc-50 dark:hover:bg-white/5 transition-colors">
-                                                                <td className="px-5 py-4 text-sm text-zinc-500 dark:text-zinc-400">{b.name || '—'}</td>
-                                                                <td className="px-5 py-4 font-bold text-sm text-zinc-900 dark:text-white">{b.category}</td>
-                                                                <td className="px-5 py-4 text-right font-mono text-sm text-zinc-600 dark:text-zinc-300">{formatCurrency(b.allocated)}</td>
-                                                                <td className="px-5 py-4 text-right font-mono text-sm text-[#00f0ff]">{formatCurrency(b.actual)}</td>
-                                                                <td className={`px-5 py-4 text-right font-mono text-sm font-bold ${variance > 0 ? 'text-[#ff4500]' : 'text-[#39ff14]'}`}>
-                                                                    {variance > 0 ? '+' : ''}{formatCurrency(variance)}
+                                                            <tr key={row.id} className="hover:bg-zinc-50 dark:hover:bg-white/5 transition-colors">
+                                                                <td className="px-5 py-4">
+                                                                    <span className={`inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-[10px] font-bold uppercase tracking-widest border ${cfg.color} ${cfg.bg} ${cfg.border}`}>
+                                                                        <TypeIcon size={11} />
+                                                                        {cfg.label}
+                                                                    </span>
+                                                                </td>
+                                                                <td className="px-5 py-4 font-bold text-sm text-zinc-900 dark:text-white">{row.name || '—'}</td>
+                                                                <td className="px-5 py-4 text-sm text-zinc-500 dark:text-zinc-400">{row.category || '—'}</td>
+                                                                <td className="px-5 py-4 text-right font-mono text-sm text-zinc-600 dark:text-zinc-300">{formatCurrency(row.allocated)}</td>
+                                                                <td className="px-5 py-4 text-right font-mono text-sm text-[#00f0ff]">{formatCurrency(row.actual)}</td>
+                                                                <td className="px-5 py-4 text-center">
+                                                                    <label className="inline-flex items-center justify-center cursor-pointer">
+                                                                        <input
+                                                                            type="checkbox"
+                                                                            checked={!!row.paid}
+                                                                            onChange={() => togglePaid(row.id)}
+                                                                            className="sr-only peer"
+                                                                            aria-label={`Mark ${row.name || 'expense'} paid`}
+                                                                        />
+                                                                        <span className={`w-5 h-5 rounded-md border flex items-center justify-center transition-colors ${row.paid
+                                                                            ? 'bg-emerald-500 border-emerald-500 dark:bg-[#39ff14] dark:border-[#39ff14]'
+                                                                            : 'bg-white dark:bg-[#18181b] border-zinc-300 dark:border-white/20 hover:border-emerald-400'}`}>
+                                                                            {row.paid && <CheckCircle size={12} className="text-white dark:text-black" strokeWidth={3} />}
+                                                                        </span>
+                                                                    </label>
                                                                 </td>
                                                             </tr>
                                                         );
                                                     })}
+                                                    {expenseRows.length === 0 && (
+                                                        <tr>
+                                                            <td colSpan={6} className="px-5 py-10 text-center text-sm text-zinc-500 dark:text-zinc-400">
+                                                                No expenses recorded yet.
+                                                            </td>
+                                                        </tr>
+                                                    )}
                                                 </tbody>
                                                 <tfoot className="border-t-2 border-zinc-300 dark:border-white/10">
                                                     <tr className="bg-zinc-50 dark:bg-white/[0.03]">
-                                                        <td className="px-5 py-4" colSpan={2}>
+                                                        <td className="px-5 py-4" colSpan={3}>
                                                             <span className="text-xs font-bold uppercase tracking-widest text-zinc-500 dark:text-zinc-400">Totals</span>
                                                         </td>
-                                                        <td className="px-5 py-4 text-right font-mono text-sm font-bold text-green-600 dark:text-[#39ff14]">{formatCurrency(totalReceived)}</td>
-                                                        <td className="px-5 py-4 text-right font-mono text-sm font-bold text-[#00f0ff]">{formatCurrency(profitMetrics.totalCosts)}</td>
-                                                        {(() => {
-                                                            const totalVariance = profitMetrics.totalCosts - totalReceived;
-                                                            return (
-                                                                <td className={`px-5 py-4 text-right font-mono text-sm font-bold ${totalVariance > 0 ? 'text-[#ff4500]' : 'text-[#39ff14]'}`}>
-                                                                    {totalVariance > 0 ? '+' : ''}{formatCurrency(totalVariance)}
-                                                                </td>
-                                                            );
-                                                        })()}
+                                                        <td className="px-5 py-4 text-right font-mono text-sm font-bold text-zinc-600 dark:text-zinc-300">
+                                                            {formatCurrency(expenseRows.reduce((s, r) => s + (Number(r.allocated) || 0), 0))}
+                                                        </td>
+                                                        <td className="px-5 py-4 text-right font-mono text-sm font-bold text-[#00f0ff]">
+                                                            {formatCurrency(profitMetrics.totalExpenses)}
+                                                        </td>
+                                                        <td className="px-5 py-4 text-center text-[10px] font-mono font-bold text-zinc-500 dark:text-zinc-400 uppercase tracking-widest">
+                                                            {expenseRows.filter(r => r.paid).length}/{expenseRows.length}
+                                                        </td>
                                                     </tr>
                                                 </tfoot>
                                             </table>
                                         </div>
                                     </NeoCard>
-                                </>
-                            ) : (
-                                <NeoCard className="p-12 text-center text-zinc-500">
-                                    <DollarSign size={48} className="mx-auto mb-4 text-zinc-600" />
-                                    <p className="font-bold text-lg text-zinc-900 dark:text-white">No detailed budget breakdown available.</p>
-                                    <p className="text-sm mt-2 text-zinc-400 font-mono">Budget: {formatCurrency(project.approvedBudget || project.budget)} &nbsp;&middot;&nbsp; Spent: {formatCurrency(project.actualCost || project.spent)}</p>
-                                </NeoCard>
-                            )}
 
                             {/* Commission Configuration Card */}
                             <NeoCard spotlightColor="rgba(253, 169, 19, 0.1)" innerClassName="!p-5">
@@ -888,84 +1086,61 @@ const OwnerProjectDetail = () => {
                                 </div>
                             </NeoCard>
 
-                            {/* Profit Summary Cards */}
-                            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
-                                <NeoCard
-                                    spotlightColor={profitMetrics.grossProfit >= 0 ? "rgba(57, 255, 20, 0.12)" : "rgba(255, 0, 60, 0.12)"}
-                                    innerClassName="!p-5"
-                                >
-                                    <div className="flex items-start justify-between mb-3">
-                                        <div className="flex items-center gap-2">
-                                            <TrendingUp size={18} className={profitMetrics.grossProfit >= 0 ? NEON_GREEN : NEON_RED} />
-                                            <h4 className="text-xs font-mono font-bold text-zinc-500 dark:text-zinc-400 uppercase tracking-widest">Gross Profit</h4>
-                                        </div>
-                                        <div className="relative">
-                                            <button type="button" onClick={(e) => { e.stopPropagation(); setOpenTooltip(prev => prev === 'gross' ? null : 'gross'); }} className="p-1 rounded-lg hover:bg-zinc-100 dark:hover:bg-white/10 transition-colors">
-                                                <Info size={14} className="text-zinc-400 dark:text-zinc-500" />
-                                            </button>
-                                            {openTooltip === 'gross' && (
-                                                <div className="absolute right-0 top-2 z-30 w-64 p-3 rounded-xl bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-white/10 shadow-xl text-xs text-zinc-600 dark:text-zinc-300">
-                                                    <p className="font-bold text-zinc-900 dark:text-white mb-1">Gross Profit Formula</p>
-                                                    <p className="font-mono text-[11px]">Total Received − Total Actual Costs</p>
-                                                    <div className="mt-2 pt-2 border-t border-zinc-100 dark:border-white/5 space-y-1">
-                                                        <p>{formatCurrency(totalReceived)} − {formatCurrency(profitMetrics.totalCosts)} = {formatCurrency(profitMetrics.grossProfit)}</p>
-                                                    </div>
+                            {/* Net Profit Breakdown */}
+                            <NeoCard
+                                spotlightColor={profitMetrics.netProfit >= 0 ? "rgba(57, 255, 20, 0.12)" : "rgba(255, 0, 60, 0.12)"}
+                                innerClassName="!p-5"
+                            >
+                                <div className="flex items-start justify-between mb-4">
+                                    <div className="flex items-center gap-2">
+                                        <TrendingUp size={18} className={profitMetrics.netProfit >= 0 ? NEON_GREEN : NEON_RED} />
+                                        <h4 className="text-sm font-mono font-bold text-zinc-900 dark:text-white uppercase tracking-widest">Net Profit Breakdown</h4>
+                                    </div>
+                                    <div className="relative">
+                                        <button type="button" onClick={(e) => { e.stopPropagation(); setOpenTooltip(prev => prev === 'net' ? null : 'net'); }} className="p-1 rounded-lg hover:bg-zinc-100 dark:hover:bg-white/10 transition-colors">
+                                            <Info size={14} className="text-zinc-400 dark:text-zinc-500" />
+                                        </button>
+                                        {openTooltip === 'net' && (
+                                            <div className="absolute right-0 top-2 z-30 w-72 p-3 rounded-xl bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-white/10 shadow-xl text-xs text-zinc-600 dark:text-zinc-300">
+                                                <p className="font-bold text-zinc-900 dark:text-white mb-1">Net Profit Formula</p>
+                                                <p className="font-mono text-[11px]">Total Payments Received − Total Expenses</p>
+                                                <div className="mt-2 pt-2 border-t border-zinc-100 dark:border-white/5 space-y-1">
+                                                    <p>{formatCurrency(totalReceived)} − {formatCurrency(profitMetrics.totalExpenses)} = {formatCurrency(profitMetrics.netProfit)}</p>
                                                 </div>
-                                            )}
-                                        </div>
+                                                <p className="mt-2 text-[10px] text-zinc-500">Total expenses include materials, labor, team commission, and subcontractor costs.</p>
+                                            </div>
+                                        )}
                                     </div>
-                                    <div className={`text-3xl sm:text-4xl font-black font-mono tracking-tight ${profitMetrics.grossProfit >= 0 ? NEON_GREEN : NEON_RED}`}>
-                                        {profitMetrics.grossProfit >= 0 ? '+' : ''}{formatCurrency(profitMetrics.grossProfit)}
+                                </div>
+                                <div className="grid grid-cols-1 sm:grid-cols-3 gap-3 mb-4">
+                                    <div className="bg-zinc-50 dark:bg-black/30 rounded-xl px-4 py-3 border border-zinc-100 dark:border-white/5">
+                                        <p className="text-[10px] font-mono font-bold text-zinc-500 dark:text-zinc-500 uppercase tracking-widest mb-1">Payments Received</p>
+                                        <p className="font-mono text-lg font-black text-emerald-600 dark:text-[#39ff14]">{formatCurrency(totalReceived)}</p>
                                     </div>
-                                    <div className="flex items-center gap-2 mt-2">
-                                        <span className={`text-xs font-bold px-2 py-0.5 rounded-full ${
-                                            profitMetrics.grossMargin >= 0
-                                                ? 'text-green-600 dark:text-[#39ff14] bg-green-50 dark:bg-[#39ff14]/10 border border-green-200 dark:border-[#39ff14]/20'
-                                                : 'text-red-600 dark:text-[#ff003c] bg-red-50 dark:bg-[#ff003c]/10 border border-red-200 dark:border-[#ff003c]/20'
-                                        }`}>
-                                            {profitMetrics.grossMargin >= 0 ? '+' : ''}{profitMetrics.grossMargin.toFixed(1)}% margin
-                                        </span>
+                                    <div className="bg-zinc-50 dark:bg-black/30 rounded-xl px-4 py-3 border border-zinc-100 dark:border-white/5">
+                                        <p className="text-[10px] font-mono font-bold text-zinc-500 dark:text-zinc-500 uppercase tracking-widest mb-1">− Total Expenses</p>
+                                        <p className="font-mono text-lg font-black text-amber-600 dark:text-[#fda913]">{formatCurrency(profitMetrics.totalExpenses)}</p>
                                     </div>
-                                </NeoCard>
-
-                                <NeoCard
-                                    spotlightColor={profitMetrics.netProfit >= 0 ? "rgba(57, 255, 20, 0.12)" : "rgba(255, 0, 60, 0.12)"}
-                                    innerClassName="!p-5"
-                                >
-                                    <div className="flex items-start justify-between mb-3">
-                                        <div className="flex items-center gap-2">
-                                            <DollarSign size={18} className={profitMetrics.netProfit >= 0 ? NEON_GREEN : NEON_RED} />
-                                            <h4 className="text-xs font-mono font-bold text-zinc-500 dark:text-zinc-400 uppercase tracking-widest">Net Profit</h4>
-                                        </div>
-                                        <div className="relative">
-                                            <button type="button" onClick={(e) => { e.stopPropagation(); setOpenTooltip(prev => prev === 'net' ? null : 'net'); }} className="p-1 rounded-lg hover:bg-zinc-100 dark:hover:bg-white/10 transition-colors">
-                                                <Info size={14} className="text-zinc-400 dark:text-zinc-500" />
-                                            </button>
-                                            {openTooltip === 'net' && (
-                                                <div className="absolute right-0 top-2 z-30 w-72 p-3 rounded-xl bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-white/10 shadow-xl text-xs text-zinc-600 dark:text-zinc-300">
-                                                    <p className="font-bold text-zinc-900 dark:text-white mb-1">Net Profit Formula</p>
-                                                    <p className="font-mono text-[11px]">Gross Profit − Commission</p>
-                                                    <div className="mt-2 pt-2 border-t border-zinc-100 dark:border-white/5 space-y-1">
-                                                        <p>{formatCurrency(profitMetrics.grossProfit)} − {formatCurrency(profitMetrics.commission)} = {formatCurrency(profitMetrics.netProfit)}</p>
-                                                    </div>
-                                                </div>
-                                            )}
-                                        </div>
+                                    <div className={`rounded-xl px-4 py-3 border ${profitMetrics.netProfit >= 0 ? 'bg-emerald-50/60 dark:bg-[#39ff14]/5 border-emerald-200 dark:border-[#39ff14]/20' : 'bg-red-50/60 dark:bg-[#ff003c]/5 border-red-200 dark:border-[#ff003c]/20'}`}>
+                                        <p className="text-[10px] font-mono font-bold text-zinc-500 dark:text-zinc-500 uppercase tracking-widest mb-1">= Net Profit</p>
+                                        <p className={`font-mono text-lg font-black ${profitMetrics.netProfit >= 0 ? NEON_GREEN : NEON_RED}`}>
+                                            {profitMetrics.netProfit >= 0 ? '+' : ''}{formatCurrency(profitMetrics.netProfit)}
+                                        </p>
                                     </div>
-                                    <div className={`text-3xl sm:text-4xl font-black font-mono tracking-tight ${profitMetrics.netProfit >= 0 ? NEON_GREEN : NEON_RED}`}>
-                                        {profitMetrics.netProfit >= 0 ? '+' : ''}{formatCurrency(profitMetrics.netProfit)}
-                                    </div>
-                                    <div className="flex items-center gap-2 mt-2">
-                                        <span className={`text-xs font-bold px-2 py-0.5 rounded-full ${
-                                            profitMetrics.netMargin >= 0
-                                                ? 'text-green-600 dark:text-[#39ff14] bg-green-50 dark:bg-[#39ff14]/10 border border-green-200 dark:border-[#39ff14]/20'
-                                                : 'text-red-600 dark:text-[#ff003c] bg-red-50 dark:bg-[#ff003c]/10 border border-red-200 dark:border-[#ff003c]/20'
-                                        }`}>
-                                            {profitMetrics.netMargin >= 0 ? '+' : ''}{profitMetrics.netMargin.toFixed(1)}% margin
-                                        </span>
-                                    </div>
-                                </NeoCard>
-                            </div>
+                                </div>
+                                <div className="flex items-center gap-2">
+                                    <span className={`text-xs font-bold px-2 py-0.5 rounded-full ${
+                                        profitMetrics.netMargin >= 0
+                                            ? 'text-green-600 dark:text-[#39ff14] bg-green-50 dark:bg-[#39ff14]/10 border border-green-200 dark:border-[#39ff14]/20'
+                                            : 'text-red-600 dark:text-[#ff003c] bg-red-50 dark:bg-[#ff003c]/10 border border-red-200 dark:border-[#ff003c]/20'
+                                    }`}>
+                                        {profitMetrics.netMargin >= 0 ? '+' : ''}{profitMetrics.netMargin.toFixed(1)}% margin
+                                    </span>
+                                    <span className="text-[10px] font-mono text-zinc-500 dark:text-zinc-500">
+                                        Outstanding: {formatCurrency(profitMetrics.outstandingExpenses)}
+                                    </span>
+                                </div>
+                            </NeoCard>
 
                             {/* Payments Received Table */}
                             <NeoCard spotlightColor="rgba(57, 255, 20, 0.1)" innerClassName="p-0 lg:p-0">
diff --git a/src/pages/owner/OwnerSnapshot.jsx b/src/pages/owner/OwnerSnapshot.jsx
index c9b1ac5..48e9e4b 100644
--- a/src/pages/owner/OwnerSnapshot.jsx
+++ b/src/pages/owner/OwnerSnapshot.jsx
@@ -8,6 +8,7 @@ import FinancialDetailsModal from '../../components/owner/FinancialDetailsModal'
 import ActionCenterModal from '../../components/owner/ActionCenterModal';
 import TeamManagementPanel from '../../components/owner/TeamManagementPanel';
 import CommissionDistributionPanel from '../../components/owner/CommissionDistributionPanel';
+import SubcontractorPaymentsPanel from '../../components/owner/SubcontractorPaymentsPanel';
 import { SpotlightCard } from '../../components/SpotlightCard';
 import {
     BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer, PieChart, Pie, Cell, Legend
@@ -24,6 +25,7 @@ const OwnerSnapshot = () => {
         orgCommissionDefaults, userCommissionOverrides,
         roleCommissionOverrides, orgMembers,
         addJobTeamMember, removeJobTeamMember, updateJobTeamMember,
+        subcontractorTasks, subcontractors,
     } = useMockStore();
 
     // Find the current owner profile
@@ -404,6 +406,23 @@ const OwnerSnapshot = () => {
                         </SpotlightCard>
                     </section>
                 )}
+
+                {/* ── Owner's Box — Subcontractor Payments ── */}
+                {subcontractorTasks?.length > 0 && (
+                    <section>
+                        <h2 className="text-xl font-bold text-zinc-900 dark:text-white/90 mb-4 flex items-center">
+                            <span className="w-2 h-8 bg-amber-500 rounded-full mr-3"></span>
+                            Subcontractor Payments
+                        </h2>
+                        <SpotlightCard className="p-5 lg:p-6" spotlightColor="rgba(245, 158, 11, 0.06)">
+                            <SubcontractorPaymentsPanel
+                                subcontractorTasks={subcontractorTasks}
+                                subcontractors={subcontractors}
+                                projects={projects}
+                            />
+                        </SpotlightCard>
+                    </section>
+                )}
             </div>
 
             {/* Interactive Modals */}
diff --git a/src/pages/owner/SubcontractorTasksPage.jsx b/src/pages/owner/SubcontractorTasksPage.jsx
new file mode 100644
index 0000000..23fa0ef
--- /dev/null
+++ b/src/pages/owner/SubcontractorTasksPage.jsx
@@ -0,0 +1,658 @@
+import React, { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { useMockStore } from '../../data/mockStore';
+import { usePermissions } from '../../hooks/usePermissions';
+import { SpotlightCard } from '../../components/SpotlightCard';
+import AssignTaskModal from '../../components/subcontractor/AssignTaskModal';
+import TaskViewModal from '../../components/subcontractor/TaskViewModal';
+import ReassignTaskModal from '../../components/subcontractor/ReassignTaskModal';
+import {
+    Plus, Search, Filter, ClipboardList, MoreVertical, Eye, Pencil,
+    XCircle, Repeat, ChevronLeft, ChevronRight, Lock, Users, MapPin,
+    Calendar, AlertCircle, Clock, CheckCircle, PauseCircle, ChevronDown, Check,
+} from 'lucide-react';
+
+// Dark-mode-aware dropdown — replaces native <select>. The menu is portaled
+// to <body> so it escapes the parent card's `overflow-hidden` clipping and any
+// new stacking contexts created by table rows below.
+function FilterPopover({ id, value, onChange, options, ariaLabel }) {
+    const [open, setOpen] = useState(false);
+    const [menuRect, setMenuRect] = useState(null);
+    const triggerRef = useRef(null);
+    const menuRef = useRef(null);
+
+    const updatePosition = () => {
+        if (!triggerRef.current) return;
+        const r = triggerRef.current.getBoundingClientRect();
+        setMenuRect({ top: r.bottom + 4, left: r.left, width: r.width });
+    };
+
+    useLayoutEffect(() => {
+        if (open) updatePosition();
+    }, [open]);
+
+    useEffect(() => {
+        if (!open) return;
+        const onClick = (e) => {
+            if (triggerRef.current?.contains(e.target)) return;
+            if (menuRef.current?.contains(e.target)) return;
+            setOpen(false);
+        };
+        const onKey = (e) => { if (e.key === 'Escape') setOpen(false); };
+        const onReflow = () => updatePosition();
+        document.addEventListener('mousedown', onClick);
+        document.addEventListener('keydown', onKey);
+        window.addEventListener('resize', onReflow);
+        window.addEventListener('scroll', onReflow, true);
+        return () => {
+            document.removeEventListener('mousedown', onClick);
+            document.removeEventListener('keydown', onKey);
+            window.removeEventListener('resize', onReflow);
+            window.removeEventListener('scroll', onReflow, true);
+        };
+    }, [open]);
+
+    const current = options.find(o => o.value === value) || options[0];
+
+    return (
+        <div className="relative w-full">
+            <button
+                id={id}
+                ref={triggerRef}
+                type="button"
+                aria-haspopup="listbox"
+                aria-expanded={open}
+                aria-label={ariaLabel}
+                onClick={() => setOpen(o => !o)}
+                className="w-full flex items-center justify-between gap-2 pl-3 pr-2 py-2 text-sm rounded-xl bg-zinc-100 dark:bg-white/5 border border-zinc-200 dark:border-white/10 text-zinc-900 dark:text-white outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500/40 transition-colors"
+            >
+                <span className="truncate text-left">{current?.label ?? '—'}</span>
+                <ChevronDown size={14} className={`shrink-0 text-zinc-400 transition-transform ${open ? 'rotate-180' : ''}`} />
+            </button>
+            {open && menuRect && createPortal(
+                <div
+                    ref={menuRef}
+                    role="listbox"
+                    style={{
+                        position: 'fixed',
+                        top: menuRect.top,
+                        left: menuRect.left,
+                        width: menuRect.width,
+                    }}
+                    className="z-[10000] rounded-xl bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-white/10 shadow-xl shadow-black/10 dark:shadow-black/50 overflow-hidden"
+                >
+                    <div className="max-h-56 overflow-y-auto custom-scrollbar py-1">
+                        {options.map(opt => {
+                            const isSelected = opt.value === value;
+                            return (
+                                <button
+                                    key={opt.value}
+                                    type="button"
+                                    role="option"
+                                    aria-selected={isSelected}
+                                    onClick={() => { onChange(opt.value); setOpen(false); }}
+                                    className={`w-full flex items-center justify-between px-3 py-2 text-sm text-left transition-colors ${
+                                        isSelected
+                                            ? 'text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-500/10'
+                                            : 'text-zinc-700 dark:text-zinc-200 hover:bg-zinc-50 dark:hover:bg-white/5'
+                                    }`}
+                                >
+                                    <span className="truncate">{opt.label}</span>
+                                    {isSelected && <Check size={12} strokeWidth={2.5} className="shrink-0 opacity-70" />}
+                                </button>
+                            );
+                        })}
+                    </div>
+                </div>,
+                document.body,
+            )}
+        </div>
+    );
+}
+
+const PRIORITY_STYLES = {
+    low:    { label: 'Low',    cls: 'bg-zinc-200 text-zinc-700 dark:bg-zinc-700 dark:text-zinc-300', dot: 'bg-zinc-400' },
+    medium: { label: 'Medium', cls: 'bg-blue-100 text-blue-700 dark:bg-blue-500/20 dark:text-blue-400', dot: 'bg-blue-500' },
+    high:   { label: 'High',   cls: 'bg-red-100 text-red-700 dark:bg-red-500/20 dark:text-red-400', dot: 'bg-red-500' },
+};
+
+const STATUS_CONFIG = {
+    Assigned:      { cls: 'bg-amber-100 text-amber-700 dark:bg-amber-500/20 dark:text-amber-400', icon: Clock },
+    'In Progress': { cls: 'bg-blue-100 text-blue-700 dark:bg-blue-500/20 dark:text-blue-400',     icon: PauseCircle },
+    Completed:     { cls: 'bg-emerald-100 text-emerald-700 dark:bg-emerald-500/20 dark:text-emerald-400', icon: CheckCircle },
+    Cancelled:     { cls: 'bg-zinc-200 text-zinc-600 dark:bg-zinc-700 dark:text-zinc-300',        icon: XCircle },
+};
+
+const PAGE_SIZE = 8;
+
+const formatDate = (iso) => {
+    if (!iso) return '—';
+    try { return new Date(iso).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' }); }
+    catch { return iso; }
+};
+
+const todayIso = () => new Date().toISOString().slice(0, 10);
+
+const SubcontractorTasksPage = () => {
+    const { subcontractorTasks, subcontractors, taskStatuses, cancelSubcontractorTask } = useMockStore();
+    const { can } = usePermissions();
+    const canAssign = can('subcontractor_tasks', 'assign');
+
+    const [search, setSearch] = useState('');
+    const [statusFilter, setStatusFilter] = useState('all');
+    const [subFilter, setSubFilter] = useState('all');
+    const [dueFilter, setDueFilter] = useState('all'); // all | overdue | today | week | month
+    const [page, setPage] = useState(1);
+
+    // Modal state
+    const [createOpen, setCreateOpen] = useState(false);
+    const [editTask, setEditTask] = useState(null);
+    const [viewTask, setViewTask] = useState(null);
+    const [reassignTask, setReassignTask] = useState(null);
+    const [confirmCancel, setConfirmCancel] = useState(null);
+    const [openMenuId, setOpenMenuId] = useState(null);
+
+    // Derived
+    const filtered = useMemo(() => {
+        const q = search.trim().toLowerCase();
+        const today = todayIso();
+        const inDays = (n) => {
+            const d = new Date();
+            d.setDate(d.getDate() + n);
+            return d.toISOString().slice(0, 10);
+        };
+        const weekFromNow = inDays(7);
+        const monthFromNow = inDays(30);
+
+        return subcontractorTasks.filter(t => {
+            // Search
+            if (q) {
+                const blob = `${t.title} ${t.subcontractorName} ${t.location} ${t.companyName}`.toLowerCase();
+                if (!blob.includes(q)) return false;
+            }
+            // Status
+            if (statusFilter !== 'all' && t.status !== statusFilter) return false;
+            // Subcontractor
+            if (subFilter !== 'all' && t.subcontractorId !== subFilter) return false;
+            // Due date
+            if (dueFilter !== 'all' && t.dueDate) {
+                if (dueFilter === 'overdue' && !(t.dueDate < today && t.status !== 'Completed' && t.status !== 'Cancelled')) return false;
+                if (dueFilter === 'today' && t.dueDate !== today) return false;
+                if (dueFilter === 'week' && !(t.dueDate >= today && t.dueDate <= weekFromNow)) return false;
+                if (dueFilter === 'month' && !(t.dueDate >= today && t.dueDate <= monthFromNow)) return false;
+            }
+            return true;
+        });
+    }, [subcontractorTasks, search, statusFilter, subFilter, dueFilter]);
+
+    const totalPages = Math.max(1, Math.ceil(filtered.length / PAGE_SIZE));
+    const safePage = Math.min(page, totalPages);
+    const pageStart = (safePage - 1) * PAGE_SIZE;
+    const paginated = filtered.slice(pageStart, pageStart + PAGE_SIZE);
+
+    // Reset to page 1 when filters change
+    React.useEffect(() => { setPage(1); }, [search, statusFilter, subFilter, dueFilter]);
+
+    // Close action menus on outside click
+    React.useEffect(() => {
+        const handler = () => setOpenMenuId(null);
+        if (openMenuId) document.addEventListener('click', handler);
+        return () => document.removeEventListener('click', handler);
+    }, [openMenuId]);
+
+    const stats = useMemo(() => ({
+        total: subcontractorTasks.length,
+        assigned: subcontractorTasks.filter(t => t.status === 'Assigned').length,
+        inProgress: subcontractorTasks.filter(t => t.status === 'In Progress').length,
+        completed: subcontractorTasks.filter(t => t.status === 'Completed').length,
+    }), [subcontractorTasks]);
+
+    return (
+        <div className="min-h-full bg-zinc-50 dark:bg-[#09090b] text-zinc-900 dark:text-white transition-colors duration-300 relative">
+            {/* Ambient bg */}
+            <div className="fixed top-0 left-0 w-full h-full overflow-hidden pointer-events-none z-0">
+                <div className="absolute top-[-10%] left-[-10%] w-[50%] h-[50%] bg-blue-500/5 dark:bg-blue-900/10 rounded-full blur-[120px]" />
+                <div className="absolute bottom-[-10%] right-[-10%] w-[50%] h-[50%] bg-purple-500/5 dark:bg-purple-900/10 rounded-full blur-[120px]" />
+            </div>
+
+            <div className="relative z-10 p-4 sm:p-8 max-w-7xl mx-auto space-y-6 pb-20">
+                {/* Header */}
+                <header className="flex flex-col md:flex-row justify-between items-start md:items-end gap-4 border-b border-zinc-200 dark:border-white/5 pb-6">
+                    <div>
+                        <h1 className="text-3xl sm:text-4xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-zinc-900 to-zinc-600 dark:from-white dark:to-white/60 tracking-tight">
+                            Subcontractor Tasks
+                        </h1>
+                        <p className="text-zinc-500 dark:text-zinc-400 mt-1 text-sm">
+                            {stats.total} total · {stats.assigned} assigned · {stats.inProgress} in progress · {stats.completed} completed
+                        </p>
+                    </div>
+                    {canAssign ? (
+                        <button
+                            type="button"
+                            onClick={() => setCreateOpen(true)}
+                            className="inline-flex items-center gap-2 px-4 py-2.5 rounded-xl font-bold text-sm uppercase tracking-widest text-white bg-blue-600 hover:bg-blue-500 shadow-lg shadow-blue-500/20 transition-all active:scale-[0.97]"
+                        >
+                            <Plus size={14} />
+                            Assign Task
+                        </button>
+                    ) : (
+                        <div className="flex items-center gap-2 px-4 py-2.5 rounded-xl font-bold text-sm uppercase tracking-widest text-zinc-400 bg-zinc-200 dark:bg-zinc-800 cursor-not-allowed" title="You don't have permission to assign tasks">
+                            <Lock size={14} />
+                            Assign Task
+                        </div>
+                    )}
+                </header>
+
+                {/* Filters */}
+                <SpotlightCard className="p-4">
+                    <div className="grid grid-cols-1 md:grid-cols-12 gap-3">
+                        {/* Search */}
+                        <div className="relative md:col-span-5">
+                            <label htmlFor="search-tasks" className="sr-only">Search tasks</label>
+                            <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-zinc-400" size={16} />
+                            <input
+                                id="search-tasks"
+                                type="text"
+                                placeholder="Search title, subcontractor, location…"
+                                value={search}
+                                onChange={(e) => setSearch(e.target.value)}
+                                className="w-full bg-zinc-100 dark:bg-black/40 border border-zinc-200 dark:border-white/10 rounded-xl py-2 pl-10 pr-4 text-sm text-zinc-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500/20"
+                            />
+                        </div>
+
+                        {/* Subcontractor */}
+                        <div className="md:col-span-3">
+                            <FilterPopover
+                                id="filter-sub"
+                                ariaLabel="Filter by subcontractor"
+                                value={subFilter}
+                                onChange={setSubFilter}
+                                options={[
+                                    { value: 'all', label: 'All subcontractors' },
+                                    ...subcontractors.map(s => ({ value: s.id, label: s.name })),
+                                ]}
+                            />
+                        </div>
+
+                        {/* Status */}
+                        <div className="md:col-span-2">
+                            <FilterPopover
+                                id="filter-status"
+                                ariaLabel="Filter by status"
+                                value={statusFilter}
+                                onChange={setStatusFilter}
+                                options={[
+                                    { value: 'all', label: 'All statuses' },
+                                    ...taskStatuses.map(s => ({ value: s, label: s })),
+                                ]}
+                            />
+                        </div>
+
+                        {/* Due */}
+                        <div className="md:col-span-2">
+                            <FilterPopover
+                                id="filter-due"
+                                ariaLabel="Filter by due date"
+                                value={dueFilter}
+                                onChange={setDueFilter}
+                                options={[
+                                    { value: 'all',     label: 'Any due date' },
+                                    { value: 'overdue', label: 'Overdue' },
+                                    { value: 'today',   label: 'Due today' },
+                                    { value: 'week',    label: 'Next 7 days' },
+                                    { value: 'month',   label: 'Next 30 days' },
+                                ]}
+                            />
+                        </div>
+                    </div>
+
+                    {(search || statusFilter !== 'all' || subFilter !== 'all' || dueFilter !== 'all') && (
+                        <div className="mt-3 flex items-center justify-between text-xs text-zinc-500 dark:text-zinc-400">
+                            <span className="flex items-center gap-1.5">
+                                <Filter size={12} />
+                                {filtered.length} match{filtered.length === 1 ? '' : 'es'}
+                            </span>
+                            <button
+                                type="button"
+                                onClick={() => { setSearch(''); setStatusFilter('all'); setSubFilter('all'); setDueFilter('all'); }}
+                                className="font-bold uppercase tracking-wider text-blue-600 dark:text-blue-400 hover:underline"
+                            >
+                                Clear filters
+                            </button>
+                        </div>
+                    )}
+                </SpotlightCard>
+
+                {/* Table */}
+                <SpotlightCard className="overflow-hidden">
+                    {/* Desktop */}
+                    <div className="hidden lg:block overflow-x-auto">
+                        <table className="w-full text-left border-collapse">
+                            <thead className="bg-zinc-50 dark:bg-[#18181b] border-b border-zinc-200 dark:border-white/10">
+                                <tr>
+                                    <Th>Task</Th>
+                                    <Th>Subcontractor</Th>
+                                    <Th>Location</Th>
+                                    <Th>Due</Th>
+                                    <Th>Priority</Th>
+                                    <Th>Status</Th>
+                                    <Th>Created</Th>
+                                    <Th align="right">Actions</Th>
+                                </tr>
+                            </thead>
+                            <tbody className="divide-y divide-zinc-100 dark:divide-white/5">
+                                {paginated.length === 0 ? (
+                                    <tr>
+                                        <td colSpan={8}>
+                                            <EmptyState />
+                                        </td>
+                                    </tr>
+                                ) : paginated.map(task => (
+                                    <TaskRow
+                                        key={task.id}
+                                        task={task}
+                                        onView={() => setViewTask(task)}
+                                        onEdit={() => setEditTask(task)}
+                                        onCancel={() => setConfirmCancel(task)}
+                                        onReassign={() => setReassignTask(task)}
+                                        openMenu={openMenuId === task.id}
+                                        setOpenMenu={(open) => setOpenMenuId(open ? task.id : null)}
+                                        canAssign={canAssign}
+                                    />
+                                ))}
+                            </tbody>
+                        </table>
+                    </div>
+
+                    {/* Mobile / tablet cards */}
+                    <div className="lg:hidden divide-y divide-zinc-100 dark:divide-white/5">
+                        {paginated.length === 0 ? (
+                            <EmptyState />
+                        ) : paginated.map(task => (
+                            <TaskCard
+                                key={task.id}
+                                task={task}
+                                onView={() => setViewTask(task)}
+                                onEdit={() => setEditTask(task)}
+                                onCancel={() => setConfirmCancel(task)}
+                                onReassign={() => setReassignTask(task)}
+                                canAssign={canAssign}
+                            />
+                        ))}
+                    </div>
+
+                    {/* Pagination footer */}
+                    <div className="px-5 py-3 border-t border-zinc-200 dark:border-white/10 bg-zinc-50 dark:bg-white/5 flex flex-col sm:flex-row justify-between items-center gap-3 text-xs">
+                        <span className="text-zinc-500">
+                            Showing {filtered.length === 0 ? 0 : pageStart + 1}–{Math.min(pageStart + PAGE_SIZE, filtered.length)} of {filtered.length}
+                        </span>
+                        <div className="flex items-center gap-1.5">
+                            <button
+                                type="button"
+                                onClick={() => setPage(p => Math.max(1, p - 1))}
+                                disabled={safePage === 1}
+                                className="p-1.5 rounded-lg bg-white dark:bg-white/5 border border-zinc-200 dark:border-white/10 text-zinc-500 hover:bg-zinc-100 dark:hover:bg-white/10 disabled:opacity-40 disabled:pointer-events-none transition-colors"
+                                aria-label="Previous page"
+                            >
+                                <ChevronLeft size={14} />
+                            </button>
+                            <span className="px-3 py-1.5 rounded-lg bg-white dark:bg-white/5 border border-zinc-200 dark:border-white/10 font-mono font-bold text-zinc-900 dark:text-white">
+                                {safePage} / {totalPages}
+                            </span>
+                            <button
+                                type="button"
+                                onClick={() => setPage(p => Math.min(totalPages, p + 1))}
+                                disabled={safePage === totalPages}
+                                className="p-1.5 rounded-lg bg-white dark:bg-white/5 border border-zinc-200 dark:border-white/10 text-zinc-500 hover:bg-zinc-100 dark:hover:bg-white/10 disabled:opacity-40 disabled:pointer-events-none transition-colors"
+                                aria-label="Next page"
+                            >
+                                <ChevronRight size={14} />
+                            </button>
+                        </div>
+                    </div>
+                </SpotlightCard>
+            </div>
+
+            {/* Modals */}
+            <AssignTaskModal isOpen={createOpen} onClose={() => setCreateOpen(false)} />
+            <AssignTaskModal isOpen={Boolean(editTask)} task={editTask} onClose={() => setEditTask(null)} />
+            <TaskViewModal isOpen={Boolean(viewTask)} task={viewTask} onClose={() => setViewTask(null)} />
+            <ReassignTaskModal isOpen={Boolean(reassignTask)} task={reassignTask} onClose={() => setReassignTask(null)} />
+
+            {/* Cancel confirmation */}
+            {confirmCancel && (
+                <ConfirmDialog
+                    title="Cancel task assignment?"
+                    body={
+                        <>
+                            This will set <span className="font-bold text-zinc-900 dark:text-white">{confirmCancel.title}</span> assigned to <span className="font-bold text-zinc-900 dark:text-white">{confirmCancel.subcontractorName}</span> to <span className="font-bold">Cancelled</span>. It will remain in the list for history.
+                        </>
+                    }
+                    confirmLabel="Cancel Task"
+                    confirmColor="bg-red-600 hover:bg-red-500"
+                    onConfirm={() => { cancelSubcontractorTask(confirmCancel.id); setConfirmCancel(null); }}
+                    onClose={() => setConfirmCancel(null)}
+                />
+            )}
+        </div>
+    );
+};
+
+const Th = ({ children, align }) => (
+    <th className={`px-5 py-4 text-xs font-bold uppercase tracking-wider text-zinc-500 ${align === 'right' ? 'text-right' : ''}`}>
+        {children}
+    </th>
+);
+
+const StatusBadge = ({ status }) => {
+    const cfg = STATUS_CONFIG[status] || STATUS_CONFIG.Assigned;
+    const Icon = cfg.icon;
+    return (
+        <span className={`inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-[10px] font-bold uppercase tracking-wide ${cfg.cls}`}>
+            <Icon size={11} />
+            {status}
+        </span>
+    );
+};
+
+const PriorityBadge = ({ priority }) => {
+    const cfg = PRIORITY_STYLES[priority] || PRIORITY_STYLES.medium;
+    return (
+        <span className={`inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-wide ${cfg.cls}`}>
+            <span className={`w-1.5 h-1.5 rounded-full ${cfg.dot}`} />
+            {cfg.label}
+        </span>
+    );
+};
+
+const isOverdue = (task) => task.dueDate && task.dueDate < todayIso() && task.status !== 'Completed' && task.status !== 'Cancelled';
+
+const TaskRow = ({ task, onView, onEdit, onCancel, onReassign, openMenu, setOpenMenu, canAssign }) => {
+    const overdue = isOverdue(task);
+    const isClosed = task.status === 'Completed' || task.status === 'Cancelled';
+
+    return (
+        <tr className="hover:bg-zinc-50 dark:hover:bg-white/5 transition-colors group">
+            <td className="px-5 py-4 max-w-xs">
+                <button type="button" onClick={onView} className="text-left">
+                    <div className="font-semibold text-zinc-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors truncate">
+                        {task.title}
+                    </div>
+                    <div className="text-[11px] text-zinc-500 font-mono mt-0.5">{task.id}</div>
+                </button>
+            </td>
+            <td className="px-5 py-4">
+                <div className="flex items-center gap-2">
+                    <div className="w-7 h-7 rounded-full bg-blue-500/10 text-blue-500 flex items-center justify-center text-xs font-bold shrink-0">
+                        {task.subcontractorName?.charAt(0)}
+                    </div>
+                    <span className="text-sm font-medium text-zinc-900 dark:text-white truncate">{task.subcontractorName}</span>
+                </div>
+            </td>
+            <td className="px-5 py-4">
+                <div className="flex items-center gap-1.5 text-sm text-zinc-600 dark:text-zinc-400 max-w-[220px]">
+                    <MapPin size={12} className="text-zinc-400 shrink-0" />
+                    <span className="truncate">{task.location}</span>
+                </div>
+            </td>
+            <td className="px-5 py-4 whitespace-nowrap">
+                <div className={`text-sm font-mono ${overdue ? 'text-red-500 font-bold' : 'text-zinc-700 dark:text-zinc-300'}`}>
+                    {formatDate(task.dueDate)}
+                </div>
+                {overdue && (
+                    <div className="text-[10px] font-bold uppercase text-red-500 flex items-center gap-1 mt-0.5">
+                        <AlertCircle size={9} /> Overdue
+                    </div>
+                )}
+            </td>
+            <td className="px-5 py-4"><PriorityBadge priority={task.priority} /></td>
+            <td className="px-5 py-4"><StatusBadge status={task.status} /></td>
+            <td className="px-5 py-4 whitespace-nowrap text-sm text-zinc-500">{formatDate(task.createdAt)}</td>
+            <td className="px-5 py-4 text-right relative">
+                <div className="inline-flex items-center gap-1">
+                    <button
+                        type="button"
+                        onClick={onView}
+                        className="p-1.5 rounded-lg text-zinc-500 hover:text-blue-600 hover:bg-blue-500/10 transition-colors"
+                        aria-label="View task"
+                        title="View"
+                    >
+                        <Eye size={14} />
+                    </button>
+                    <button
+                        type="button"
+                        onClick={(e) => { e.stopPropagation(); setOpenMenu(!openMenu); }}
+                        className="p-1.5 rounded-lg text-zinc-500 hover:text-zinc-900 dark:hover:text-white hover:bg-zinc-200 dark:hover:bg-white/10 transition-colors"
+                        aria-label="More actions"
+                        aria-expanded={openMenu}
+                    >
+                        <MoreVertical size={14} />
+                    </button>
+                </div>
+                {openMenu && (
+                    <div
+                        onClick={(e) => e.stopPropagation()}
+                        className="absolute right-5 top-full mt-1 w-44 bg-white dark:bg-[#18181b] border border-zinc-200 dark:border-white/10 rounded-xl shadow-xl z-20 overflow-hidden text-left"
+                    >
+                        <MenuItem onClick={() => { setOpenMenu(false); onEdit(); }} icon={Pencil} disabled={!canAssign || isClosed}>
+                            Edit
+                        </MenuItem>
+                        <MenuItem onClick={() => { setOpenMenu(false); onReassign(); }} icon={Repeat} disabled={!canAssign || isClosed}>
+                            Reassign
+                        </MenuItem>
+                        <MenuItem onClick={() => { setOpenMenu(false); onCancel(); }} icon={XCircle} disabled={!canAssign || isClosed} variant="danger">
+                            Cancel
+                        </MenuItem>
+                    </div>
+                )}
+            </td>
+        </tr>
+    );
+};
+
+const MenuItem = ({ icon: MenuIcon, children, onClick, disabled, variant }) => (
+    <button
+        type="button"
+        onClick={onClick}
+        disabled={disabled}
+        className={`w-full flex items-center gap-2 px-3 py-2 text-xs font-semibold transition-colors disabled:opacity-40 disabled:cursor-not-allowed ${
+            variant === 'danger'
+                ? 'text-red-600 dark:text-red-400 hover:bg-red-500/10'
+                : 'text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-white/5'
+        }`}
+    >
+        <MenuIcon size={13} />
+        {children}
+    </button>
+);
+
+const TaskCard = ({ task, onView, onEdit, onCancel, onReassign, canAssign }) => {
+    const overdue = isOverdue(task);
+    const isClosed = task.status === 'Completed' || task.status === 'Cancelled';
+    return (
+        <div className="p-4 active:bg-zinc-50 dark:active:bg-white/5 transition-colors">
+            <button type="button" onClick={onView} className="w-full text-left">
+                <div className="flex justify-between items-start gap-3 mb-2">
+                    <div className="min-w-0 flex-1">
+                        <h4 className="font-semibold text-zinc-900 dark:text-white truncate">{task.title}</h4>
+                        <p className="text-[11px] text-zinc-500 font-mono mt-0.5">{task.id}</p>
+                    </div>
+                    <StatusBadge status={task.status} />
+                </div>
+                <div className="flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-zinc-500 mb-2">
+                    <span className="flex items-center gap-1"><Users size={11} />{task.subcontractorName}</span>
+                    <span className="flex items-center gap-1"><MapPin size={11} /><span className="truncate max-w-[160px]">{task.location}</span></span>
+                </div>
+                <div className="flex flex-wrap items-center gap-2">
+                    <PriorityBadge priority={task.priority} />
+                    <span className={`flex items-center gap-1 text-[11px] font-mono ${overdue ? 'text-red-500 font-bold' : 'text-zinc-500'}`}>
+                        <Calendar size={11} /> Due {formatDate(task.dueDate)}{overdue ? ' · OVERDUE' : ''}
+                    </span>
+                </div>
+            </button>
+            <div className="mt-3 flex flex-wrap gap-2 pt-2 border-t border-zinc-100 dark:border-white/5">
+                <CardActionButton onClick={onView} icon={Eye}>View</CardActionButton>
+                <CardActionButton onClick={onEdit} icon={Pencil} disabled={!canAssign || isClosed}>Edit</CardActionButton>
+                <CardActionButton onClick={onReassign} icon={Repeat} disabled={!canAssign || isClosed}>Reassign</CardActionButton>
+                <CardActionButton onClick={onCancel} icon={XCircle} disabled={!canAssign || isClosed} variant="danger">Cancel</CardActionButton>
+            </div>
+        </div>
+    );
+};
+
+const CardActionButton = ({ icon: ActionIcon, children, onClick, disabled, variant }) => (
+    <button
+        type="button"
+        onClick={onClick}
+        disabled={disabled}
+        className={`flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg text-[11px] font-bold uppercase tracking-wider border transition-colors disabled:opacity-40 disabled:cursor-not-allowed ${
+            variant === 'danger'
+                ? 'text-red-600 dark:text-red-400 border-red-500/20 hover:bg-red-500/10'
+                : 'text-zinc-700 dark:text-zinc-300 border-zinc-200 dark:border-white/10 hover:bg-zinc-100 dark:hover:bg-white/5'
+        }`}
+    >
+        <ActionIcon size={12} />
+        {children}
+    </button>
+);
+
+const EmptyState = () => (
+    <div className="py-16 text-center text-zinc-500">
+        <ClipboardList size={32} className="mx-auto mb-3 text-zinc-400" />
+        <p className="font-semibold">No tasks match your filters.</p>
+        <p className="text-sm mt-1">Try clearing filters or assigning a new task.</p>
+    </div>
+);
+
+const ConfirmDialog = ({ title, body, confirmLabel, confirmColor, onConfirm, onClose }) => {
+    React.useEffect(() => {
+        const handler = (e) => { if (e.key === 'Escape') onClose(); };
+        window.addEventListener('keydown', handler);
+        return () => window.removeEventListener('keydown', handler);
+    }, [onClose]);
+
+    return (
+        <div className="fixed inset-0 z-[9999] flex items-center justify-center p-4" role="dialog" aria-modal="true">
+            <div className="absolute inset-0 bg-black/60 backdrop-blur-sm" onClick={onClose} />
+            <div className="relative w-full max-w-sm bg-white dark:bg-[#121214] rounded-2xl shadow-2xl border border-zinc-200 dark:border-white/10 overflow-hidden animate-in zoom-in-95 duration-200">
+                <div className="p-5 space-y-3">
+                    <div className="flex items-center gap-3">
+                        <div className="p-2 rounded-xl bg-red-500/10 text-red-500"><AlertCircle size={20} /></div>
+                        <h2 className="text-base font-bold text-zinc-900 dark:text-white">{title}</h2>
+                    </div>
+                    <div className="text-sm text-zinc-600 dark:text-zinc-400">{body}</div>
+                </div>
+                <div className="px-5 py-3 border-t border-zinc-200 dark:border-white/10 bg-zinc-50 dark:bg-white/5 flex justify-end gap-2">
+                    <button type="button" onClick={onClose} className="px-4 py-2 text-xs font-bold uppercase tracking-wider rounded-lg border border-zinc-200 dark:border-white/10 text-zinc-600 dark:text-zinc-400 hover:bg-zinc-100 dark:hover:bg-white/5 transition-colors">
+                        Keep Task
+                    </button>
+                    <button type="button" onClick={onConfirm} className={`px-4 py-2 text-xs font-bold uppercase tracking-wider rounded-lg text-white shadow-lg shadow-red-500/20 transition-colors ${confirmColor}`}>
+                        {confirmLabel}
+                    </button>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default SubcontractorTasksPage;
diff --git a/src/pages/subcontractor/SubContractorDashboard.jsx b/src/pages/subcontractor/SubContractorDashboard.jsx
index d25d5d4..290e344 100644
--- a/src/pages/subcontractor/SubContractorDashboard.jsx
+++ b/src/pages/subcontractor/SubContractorDashboard.jsx
@@ -1,12 +1,14 @@
 import React, { useState, useMemo } from 'react';
 import { createPortal } from 'react-dom';
+import { useNavigate } from 'react-router-dom';
 import { useAuth } from '../../context/AuthContext';
 import { useMockStore } from '../../data/mockStore';
 import { StatCard } from '../../components/StatCard';
 import { SpotlightCard } from '../../components/SpotlightCard';
-import { CheckSquare, Clock, Wallet, MapPin, Camera, X, Calendar, DollarSign, ChevronRight } from 'lucide-react';
+import { CheckSquare, Clock, Wallet, MapPin, Camera, X, Calendar, DollarSign, ChevronRight, AlertCircle, ArrowDown, ArrowUp, FileText, Receipt } from 'lucide-react';
 import TaskDetailsModal from '../../components/contractor/TaskDetailsModal';
 import FinancialSummaryModal from '../../components/contractor/FinancialSummaryModal';
+import { NotificationsPanel } from '../../components/subcontractor/NotificationsPanel';
 
 // --- Reusable list modal for filtered tasks / clock-in / payment history ---
 const SubDetailModal = ({ isOpen, onClose, title, type, tasks, invoices, clockIns, onTaskClick }) => {
@@ -194,11 +196,18 @@ const SubDetailModal = ({ isOpen, onClose, title, type, tasks, invoices, clockIn
 
 const SubContractorDashboard = () => {
     const { user } = useAuth();
-    const { projects } = useMockStore();
+    const { projects, subcontractorTasks, notifications, markNotificationRead } = useMockStore();
+    const navigate = useNavigate();
 
     const subId = user?.id || 'sub_001';
 
-    // Aggregate Tasks
+    // Notifications for the current subcontractor (across all tasks).
+    const myNotifications = useMemo(
+        () => notifications.filter(n => n.recipientUserId === subId),
+        [notifications, subId],
+    );
+
+    // Aggregate Tasks (legacy milestone-based for stat parity below)
     const myTasks = projects.flatMap(p =>
         p.milestones.filter(m => m.assignedTo === subId)
             .map(m => ({ ...m, projectAddress: p.address, projectId: p.id, projectStatus: p.status }))
@@ -208,6 +217,12 @@ const SubContractorDashboard = () => {
     const pendingTasks = myTasks.filter(t => t.status === 'pending');
     const completedTasks = myTasks.filter(t => t.status === 'completed');
 
+    // CRM-assigned tasks (the real "My Assignments")
+    const myAssignments = useMemo(
+        () => subcontractorTasks.filter(t => t.subcontractorId === subId),
+        [subcontractorTasks, subId],
+    );
+
     // Financials
     const myInvoices = projects.flatMap(p =>
         (p.invoices || []).filter(i => i.submittedBy === subId)
@@ -224,6 +239,59 @@ const SubContractorDashboard = () => {
         { date: '2026-02-14', project: '2612 Dunwick Dr — Interior Renovation', clockIn: '7:30 AM', clockOut: '5:00 PM', hours: '9.5' },
     ], []);
 
+    // Project history & payment tracking
+    const [historyFilter, setHistoryFilter] = useState('all'); // all | Paid | Requested | Pending
+    const [historySort, setHistorySort] = useState('desc');    // desc = newest first
+    const [noteModal, setNoteModal] = useState(null);          // { title, body, project, requestedAt, receivedAt, status }
+
+    const projectById = useMemo(() => {
+        const m = new Map();
+        for (const p of projects) m.set(p.id, p);
+        return m;
+    }, [projects]);
+
+    const paymentHistoryRows = useMemo(() => {
+        const items = myAssignments.map(t => {
+            const project = t.projectId ? projectById.get(t.projectId) : null;
+            const requestedAt = t.paymentRequestedAt || null;
+            const receivedAt = t.paidAt || null;
+            const status = t.paymentStatus === 'Paid'
+                ? 'Paid'
+                : (requestedAt ? 'Requested' : 'Pending');
+            const expenses = (t.expenses || []).reduce((s, e) => s + (Number(e.amount) || 0), 0);
+            const fees = (t.fees || []).reduce((s, f) => s + (Number(f.amount) || 0), 0);
+            return {
+                id: t.id,
+                projectId: t.projectId || null,
+                projectName: project ? (project.projectType || project.address) : 'Standalone Task',
+                projectAddress: project?.address || t.location || '',
+                requestedAt,
+                receivedAt,
+                amount: expenses + fees,
+                note: t.title || '',
+                description: t.description || '',
+                status,
+            };
+        });
+        const filtered = historyFilter === 'all' ? items : items.filter(r => r.status === historyFilter);
+        const sorted = [...filtered].sort((a, b) => {
+            const av = a.requestedAt || '';
+            const bv = b.requestedAt || '';
+            if (av === bv) return 0;
+            if (!av) return 1;       // missing requested dates sink to bottom
+            if (!bv) return -1;
+            return historySort === 'desc' ? (bv > av ? 1 : -1) : (av > bv ? 1 : -1);
+        });
+        return sorted;
+    }, [myAssignments, projectById, historyFilter, historySort]);
+
+    const historyCounts = useMemo(() => ({
+        all: myAssignments.length,
+        Paid: myAssignments.filter(t => t.paymentStatus === 'Paid').length,
+        Requested: myAssignments.filter(t => t.paymentStatus !== 'Paid' && t.paymentRequestedAt).length,
+        Pending: myAssignments.filter(t => !t.paymentRequestedAt).length,
+    }), [myAssignments]);
+
     // Modal states
     const [detailModal, setDetailModal] = useState({ isOpen: false, type: null, title: '' });
     const [selectedTask, setSelectedTask] = useState(null);
@@ -308,58 +376,221 @@ const SubContractorDashboard = () => {
             </div>
 
             {/* Main Task List */}
-            <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
-                <div className="lg:col-span-2">
-                    <SpotlightCard className="p-6 h-full">
+            <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 items-start">
+                <div className="lg:col-span-2 space-y-6">
+                    <SpotlightCard className="p-6">
                         <div className="flex justify-between items-center mb-6">
                             <h2 className="text-lg font-bold text-zinc-900 dark:text-white">My Assignments</h2>
+                            <span className="text-[11px] font-bold uppercase tracking-wider text-zinc-500">{myAssignments.length} task{myAssignments.length === 1 ? '' : 's'}</span>
                         </div>
                         <div className="space-y-4">
-                            {myTasks.length > 0 ? myTasks.map((task, idx) => (
-                                <div key={idx} className="group p-4 rounded-xl bg-zinc-50 dark:bg-white/5 border border-zinc-100 dark:border-white/5 hover:border-blue-500/30 transition-all cursor-pointer" onClick={() => handleTaskClick(task)}>
+                            {myAssignments.length > 0 ? myAssignments.map(task => {
+                                const overdue = task.dueDate && task.dueDate < new Date().toISOString().slice(0, 10)
+                                    && task.status !== 'Completed' && task.status !== 'Cancelled';
+                                const statusTone = {
+                                    Completed:      'bg-emerald-100 text-emerald-600 dark:bg-emerald-500/20 dark:text-emerald-400',
+                                    'In Progress':  'bg-blue-100 text-blue-600 dark:bg-blue-500/20 dark:text-blue-400',
+                                    'On Hold':      'bg-amber-100 text-amber-600 dark:bg-amber-500/20 dark:text-amber-400',
+                                    Assigned:       'bg-zinc-100 text-zinc-600 dark:bg-white/10 dark:text-zinc-400',
+                                    Cancelled:      'bg-zinc-100 text-zinc-500 dark:bg-white/10 dark:text-zinc-500',
+                                }[task.status] || 'bg-zinc-100 text-zinc-600 dark:bg-white/10 dark:text-zinc-400';
+                                return (
+                                <div
+                                    key={task.id}
+                                    role="button"
+                                    tabIndex={0}
+                                    onClick={() => navigate(`/subcontractor/tasks/${task.id}`)}
+                                    onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') navigate(`/subcontractor/tasks/${task.id}`); }}
+                                    className="group p-4 rounded-xl bg-zinc-50 dark:bg-white/5 border border-zinc-100 dark:border-white/5 hover:border-blue-500/30 transition-all cursor-pointer"
+                                >
                                     <div className="flex flex-col md:flex-row justify-between md:items-center gap-4">
-                                        <div className="flex items-start gap-4">
-                                            <div className={`p-3 rounded-lg ${task.status === 'completed' ? 'bg-emerald-100 text-emerald-600 dark:bg-emerald-500/20 dark:text-emerald-400' :
-                                                task.status === 'in_progress' ? 'bg-blue-100 text-blue-600 dark:bg-blue-500/20 dark:text-blue-400' :
-                                                    'bg-zinc-100 text-zinc-600 dark:bg-white/10 dark:text-zinc-400'
-                                                }`}>
+                                        <div className="flex items-start gap-4 min-w-0">
+                                            <div className={`p-3 rounded-lg shrink-0 ${statusTone}`}>
                                                 <CheckSquare size={20} />
                                             </div>
-                                            <div>
-                                                <h4 className="font-bold text-zinc-900 dark:text-white">{task.name}</h4>
-                                                <div className="flex items-center text-xs text-zinc-500 dark:text-zinc-400 mt-1">
-                                                    <MapPin size={12} className="mr-1" />
-                                                    {task.projectAddress}
+                                            <div className="min-w-0">
+                                                <h4 className="font-bold text-zinc-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors truncate">{task.title}</h4>
+                                                <div className="flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-zinc-500 dark:text-zinc-400 mt-1">
+                                                    <span className="flex items-center gap-1"><MapPin size={12} />{task.location}</span>
+                                                    <span className="font-mono">{task.id}</span>
                                                 </div>
                                             </div>
                                         </div>
-                                        <div className="flex items-center gap-4">
+                                        <div className="flex items-center gap-3 md:gap-4 shrink-0">
                                             <div className="text-right">
-                                                <p className="text-xs font-mono font-medium text-zinc-500 mb-1">Due: {task.dueDate}</p>
-                                                <span className={`px-2 py-0.5 rounded text-[10px] font-bold uppercase tracking-wider ${task.status === 'completed' ? 'bg-emerald-100 text-emerald-600' :
-                                                    task.status === 'in_progress' ? 'bg-blue-100 text-blue-600' : 'bg-amber-100 text-amber-600'
-                                                    }`}>
-                                                    {task.status.replace('_', ' ')}
+                                                <p className={`text-xs font-mono font-medium mb-1 flex items-center justify-end gap-1 ${overdue ? 'text-red-500 font-bold' : 'text-zinc-500'}`}>
+                                                    {overdue && <AlertCircle size={11} />}
+                                                    Due: {task.dueDate}
+                                                </p>
+                                                <span className={`px-2 py-0.5 rounded text-[10px] font-bold uppercase tracking-wider ${statusTone}`}>
+                                                    {task.status}
                                                 </span>
                                             </div>
-                                            {task.status !== 'completed' && (
-                                                <button className="px-4 py-2 rounded-lg bg-blue-600 hover:bg-blue-500 text-white text-xs font-bold transition-colors"
-                                                    onClick={(e) => { e.stopPropagation(); handleTaskClick(task); }}>
-                                                    Update
-                                                </button>
-                                            )}
+                                            <ChevronRight size={16} className="text-zinc-400 group-hover:text-blue-500 transition-colors" />
                                         </div>
                                     </div>
                                 </div>
-                            )) : (
-                                <div className="text-center py-10 text-zinc-500"><p>No tasks assigned.</p></div>
+                                );
+                            }) : (
+                                <div className="text-center py-10 text-zinc-500"><p>No tasks assigned yet.</p></div>
                             )}
                         </div>
                     </SpotlightCard>
+
+                    {/* Project History & Payment Tracking */}
+                    <SpotlightCard className="p-6">
+                        <div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4 mb-6">
+                            <div>
+                                <h2 className="text-lg font-bold text-zinc-900 dark:text-white flex items-center gap-2">
+                                    <Receipt size={18} className="text-amber-500 dark:text-amber-400" />
+                                    Project History & Payments
+                                </h2>
+                                <p className="text-xs text-zinc-500 dark:text-zinc-400 mt-0.5">
+                                    Track payment requests and receipts across every project you've worked on.
+                                </p>
+                            </div>
+                            <div className="flex items-center gap-2 flex-wrap">
+                                {[
+                                    { key: 'all',       label: 'All',       tone: 'bg-zinc-100 dark:bg-white/10 text-zinc-700 dark:text-zinc-200' },
+                                    { key: 'Paid',      label: 'Paid',      tone: 'bg-emerald-100 dark:bg-emerald-500/15 text-emerald-700 dark:text-emerald-400' },
+                                    { key: 'Requested', label: 'Requested', tone: 'bg-blue-100 dark:bg-blue-500/15 text-blue-700 dark:text-blue-400' },
+                                    { key: 'Pending',   label: 'Pending',   tone: 'bg-amber-100 dark:bg-amber-500/15 text-amber-700 dark:text-amber-400' },
+                                ].map(p => {
+                                    const active = historyFilter === p.key;
+                                    return (
+                                        <button
+                                            key={p.key}
+                                            type="button"
+                                            onClick={() => setHistoryFilter(p.key)}
+                                            className={`px-3 py-1.5 rounded-lg text-[11px] font-bold uppercase tracking-wider transition-colors border ${active ? `${p.tone} border-transparent shadow-sm` : 'bg-transparent border-zinc-200 dark:border-white/10 text-zinc-500 dark:text-zinc-400 hover:bg-zinc-50 dark:hover:bg-white/5'}`}
+                                        >
+                                            {p.label}
+                                            <span className="ml-1.5 opacity-70">{historyCounts[p.key] ?? 0}</span>
+                                        </button>
+                                    );
+                                })}
+                                <button
+                                    type="button"
+                                    onClick={() => setHistorySort(d => d === 'desc' ? 'asc' : 'desc')}
+                                    className="px-3 py-1.5 rounded-lg text-[11px] font-bold uppercase tracking-wider border border-zinc-200 dark:border-white/10 text-zinc-600 dark:text-zinc-300 hover:bg-zinc-50 dark:hover:bg-white/5 transition-colors flex items-center gap-1.5"
+                                    aria-label={`Sort by requested date ${historySort === 'desc' ? 'descending' : 'ascending'}`}
+                                >
+                                    {historySort === 'desc' ? <ArrowDown size={12} /> : <ArrowUp size={12} />}
+                                    {historySort === 'desc' ? 'Newest' : 'Oldest'}
+                                </button>
+                            </div>
+                        </div>
+
+                        {paymentHistoryRows.length === 0 ? (
+                            <div className="py-10 text-center">
+                                <FileText size={28} className="mx-auto mb-3 text-zinc-400" />
+                                <p className="text-sm text-zinc-500">No project history yet.</p>
+                                <p className="text-xs text-zinc-400 mt-1">
+                                    {historyFilter === 'all' ? 'Tasks assigned to you will appear here.' : `No projects with status "${historyFilter}".`}
+                                </p>
+                            </div>
+                        ) : (
+                            <div className="overflow-x-auto rounded-xl border border-zinc-200 dark:border-white/5">
+                                <table className="w-full text-left min-w-[940px]">
+                                    <thead>
+                                        <tr className="border-b border-zinc-200 dark:border-white/5 bg-zinc-50 dark:bg-white/[0.02]">
+                                            <th className="px-4 py-2.5 text-[10px] font-mono font-bold text-zinc-500 uppercase tracking-widest">Project ID</th>
+                                            <th className="px-4 py-2.5 text-[10px] font-mono font-bold text-zinc-500 uppercase tracking-widest">Project Name</th>
+                                            <th className="px-4 py-2.5 text-[10px] font-mono font-bold text-zinc-500 uppercase tracking-widest">
+                                                <button
+                                                    type="button"
+                                                    onClick={() => setHistorySort(d => d === 'desc' ? 'asc' : 'desc')}
+                                                    className="inline-flex items-center gap-1 hover:text-zinc-900 dark:hover:text-white transition-colors"
+                                                    title="Sort by requested date"
+                                                >
+                                                    Requested
+                                                    {historySort === 'desc' ? <ArrowDown size={10} /> : <ArrowUp size={10} />}
+                                                </button>
+                                            </th>
+                                            <th className="px-4 py-2.5 text-[10px] font-mono font-bold text-zinc-500 uppercase tracking-widest">Received</th>
+                                            <th className="px-4 py-2.5 text-[10px] font-mono font-bold text-zinc-500 uppercase tracking-widest text-right">Amount</th>
+                                            <th className="px-4 py-2.5 text-[10px] font-mono font-bold text-zinc-500 uppercase tracking-widest">Note</th>
+                                            <th className="px-4 py-2.5 text-[10px] font-mono font-bold text-zinc-500 uppercase tracking-widest">Status</th>
+                                        </tr>
+                                    </thead>
+                                    <tbody>
+                                        {paymentHistoryRows.map(row => {
+                                            const unpaid = row.status !== 'Paid';
+                                            const statusTone = {
+                                                Paid:      'bg-emerald-100 text-emerald-700 border-emerald-200 dark:bg-emerald-500/15 dark:text-emerald-400 dark:border-emerald-500/20',
+                                                Requested: 'bg-blue-100 text-blue-700 border-blue-200 dark:bg-blue-500/15 dark:text-blue-400 dark:border-blue-500/20',
+                                                Pending:   'bg-amber-100 text-amber-700 border-amber-200 dark:bg-amber-500/15 dark:text-amber-400 dark:border-amber-500/20',
+                                            }[row.status] || 'bg-zinc-100 text-zinc-600 border-zinc-200 dark:bg-white/5 dark:text-zinc-400 dark:border-white/10';
+
+                                            return (
+                                                <tr
+                                                    key={row.id}
+                                                    role="button"
+                                                    tabIndex={0}
+                                                    onClick={() => navigate(`/subcontractor/tasks/${row.id}`)}
+                                                    onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') navigate(`/subcontractor/tasks/${row.id}`); }}
+                                                    className={`border-b border-zinc-100 dark:border-white/[0.03] hover:bg-zinc-50 dark:hover:bg-white/[0.02] transition-colors cursor-pointer group ${unpaid ? 'border-l-2 border-l-amber-400/60 dark:border-l-amber-500/40' : ''}`}
+                                                >
+                                                    <td className="px-4 py-3">
+                                                        <span className="text-[11px] font-mono text-zinc-500 dark:text-zinc-400">
+                                                            {row.projectId || '—'}
+                                                        </span>
+                                                    </td>
+                                                    <td className="px-4 py-3">
+                                                        <div className="min-w-0">
+                                                            <div className="text-xs font-semibold text-zinc-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors truncate max-w-[220px]" title={row.projectName}>
+                                                                {row.projectName}
+                                                            </div>
+                                                            {row.projectAddress && (
+                                                                <div className="text-[10px] text-zinc-500 dark:text-zinc-400 truncate max-w-[220px]" title={row.projectAddress}>
+                                                                    {row.projectAddress}
+                                                                </div>
+                                                            )}
+                                                        </div>
+                                                    </td>
+                                                    <td className="px-4 py-3">
+                                                        <span className="text-[11px] font-mono text-zinc-600 dark:text-zinc-300 whitespace-nowrap">
+                                                            {row.requestedAt ? new Date(row.requestedAt).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' }) : '—'}
+                                                        </span>
+                                                    </td>
+                                                    <td className="px-4 py-3">
+                                                        <span className={`text-[11px] font-mono whitespace-nowrap ${row.receivedAt ? 'text-emerald-600 dark:text-emerald-400 font-semibold' : 'text-amber-600 dark:text-amber-400/80'}`}>
+                                                            {row.receivedAt ? new Date(row.receivedAt).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' }) : 'Not received'}
+                                                        </span>
+                                                    </td>
+                                                    <td className="px-4 py-3 text-right">
+                                                        <span className={`font-mono text-xs font-bold whitespace-nowrap ${row.amount > 0 ? (row.status === 'Paid' ? 'text-emerald-600 dark:text-emerald-400' : 'text-amber-600 dark:text-amber-400') : 'text-zinc-400 dark:text-zinc-500'}`}>
+                                                            {new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', maximumFractionDigits: 0 }).format(row.amount)}
+                                                        </span>
+                                                    </td>
+                                                    <td className="px-4 py-3">
+                                                        <button
+                                                            type="button"
+                                                            onClick={(e) => { e.stopPropagation(); setNoteModal(row); }}
+                                                            className="inline-flex items-center gap-1.5 text-[11px] text-zinc-600 dark:text-zinc-300 hover:text-blue-600 dark:hover:text-blue-400 max-w-[220px] truncate"
+                                                            title={row.note}
+                                                        >
+                                                            <FileText size={11} className="shrink-0" />
+                                                            <span className="truncate">{row.note || 'View note'}</span>
+                                                        </button>
+                                                    </td>
+                                                    <td className="px-4 py-3">
+                                                        <span className={`text-[11px] font-bold rounded-md px-1.5 py-0.5 border whitespace-nowrap ${statusTone}`}>
+                                                            {row.status}
+                                                        </span>
+                                                    </td>
+                                                </tr>
+                                            );
+                                        })}
+                                    </tbody>
+                                </table>
+                            </div>
+                        )}
+                    </SpotlightCard>
                 </div>
 
-                {/* Earnings Widget */}
-                <div>
+                {/* Right column: Earnings + Notifications */}
+                <div className="space-y-6">
                     <SpotlightCard className="p-6">
                         <h2 className="text-lg font-bold text-zinc-900 dark:text-white mb-4">Earnings Tracker</h2>
                         <div className="relative pt-4 pb-8">
@@ -385,9 +616,79 @@ const SubContractorDashboard = () => {
                             </button>
                         </div>
                     </SpotlightCard>
+
+                    <NotificationsPanel
+                        notifications={myNotifications}
+                        onMarkAllRead={() => myNotifications.forEach(n => !n.isRead && markNotificationRead(n.id))}
+                        onNotificationClick={(n) => { if (!n.isRead) markNotificationRead(n.id); }}
+                    />
                 </div>
             </div>
 
+            {/* Note detail modal */}
+            {noteModal && createPortal(
+                <div className="fixed inset-0 z-[9999] flex items-center justify-center p-4" role="dialog" aria-modal="true">
+                    <div className="absolute inset-0 bg-black/60 backdrop-blur-sm" onClick={() => setNoteModal(null)} />
+                    <div className="relative w-full max-w-lg bg-white dark:bg-[#121214] rounded-2xl shadow-2xl border border-zinc-200 dark:border-white/10 overflow-hidden animate-in zoom-in-95 duration-200">
+                        <div className="px-6 py-5 border-b border-zinc-200 dark:border-white/10 flex justify-between items-center bg-zinc-50/50 dark:bg-white/5">
+                            <h2 className="text-lg font-bold text-zinc-900 dark:text-white">Note Detail</h2>
+                            <button onClick={() => setNoteModal(null)} className="p-2 rounded-lg bg-zinc-100 dark:bg-white/10 text-zinc-500 hover:text-red-500 transition-colors"><X size={18} /></button>
+                        </div>
+                        <div className="p-6 space-y-4">
+                            <div>
+                                <div className="text-[10px] uppercase font-bold tracking-wider text-zinc-500 mb-1">Project</div>
+                                <div className="font-semibold text-zinc-900 dark:text-white">{noteModal.projectName}</div>
+                                {noteModal.projectAddress && (
+                                    <div className="text-xs text-zinc-500 dark:text-zinc-400 mt-0.5">{noteModal.projectAddress}</div>
+                                )}
+                            </div>
+                            <div className="grid grid-cols-3 gap-3 text-sm">
+                                <div className="p-3 rounded-xl bg-zinc-50 dark:bg-white/5 border border-zinc-200 dark:border-white/5">
+                                    <div className="text-[10px] uppercase font-bold tracking-wider text-zinc-500 mb-1">Requested</div>
+                                    <div className="font-mono text-zinc-900 dark:text-white">
+                                        {noteModal.requestedAt ? new Date(noteModal.requestedAt).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' }) : '—'}
+                                    </div>
+                                </div>
+                                <div className="p-3 rounded-xl bg-zinc-50 dark:bg-white/5 border border-zinc-200 dark:border-white/5">
+                                    <div className="text-[10px] uppercase font-bold tracking-wider text-zinc-500 mb-1">Received</div>
+                                    <div className={`font-mono ${noteModal.receivedAt ? 'text-emerald-600 dark:text-emerald-400' : 'text-amber-600 dark:text-amber-400'}`}>
+                                        {noteModal.receivedAt ? new Date(noteModal.receivedAt).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' }) : 'Not received'}
+                                    </div>
+                                </div>
+                                <div className="p-3 rounded-xl bg-zinc-50 dark:bg-white/5 border border-zinc-200 dark:border-white/5">
+                                    <div className="text-[10px] uppercase font-bold tracking-wider text-zinc-500 mb-1">Amount</div>
+                                    <div className={`font-mono font-bold ${noteModal.amount > 0 ? (noteModal.status === 'Paid' ? 'text-emerald-600 dark:text-emerald-400' : 'text-amber-600 dark:text-amber-400') : 'text-zinc-400'}`}>
+                                        {new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', maximumFractionDigits: 0 }).format(noteModal.amount || 0)}
+                                    </div>
+                                </div>
+                            </div>
+                            <div>
+                                <div className="text-[10px] uppercase font-bold tracking-wider text-zinc-500 mb-1">Note</div>
+                                <div className="text-sm text-zinc-900 dark:text-white font-semibold">{noteModal.note || '—'}</div>
+                                {noteModal.description && (
+                                    <p className="text-sm text-zinc-600 dark:text-zinc-300 mt-2 leading-relaxed whitespace-pre-line">{noteModal.description}</p>
+                                )}
+                            </div>
+                        </div>
+                        <div className="px-6 py-4 border-t border-zinc-200 dark:border-white/10 bg-zinc-50 dark:bg-white/5 flex justify-end gap-2">
+                            <button
+                                onClick={() => setNoteModal(null)}
+                                className="px-4 py-2 text-sm font-bold rounded-xl border border-zinc-200 dark:border-white/10 hover:bg-zinc-100 dark:hover:bg-white/5 transition-colors"
+                            >
+                                Close
+                            </button>
+                            <button
+                                onClick={() => { const id = noteModal.id; setNoteModal(null); navigate(`/subcontractor/tasks/${id}`); }}
+                                className="px-4 py-2 text-sm font-bold rounded-xl bg-blue-600 hover:bg-blue-500 text-white transition-colors"
+                            >
+                                Open Task
+                            </button>
+                        </div>
+                    </div>
+                </div>,
+                document.body
+            )}
+
             {/* Modals */}
             <TaskDetailsModal isOpen={isTaskModalOpen} onClose={() => setIsTaskModalOpen(false)} task={selectedTask} onUpdate={handleTaskUpdate} />
             <FinancialSummaryModal isOpen={isFinancialModalOpen} onClose={() => setIsFinancialModalOpen(false)} role="SUBCONTRACTOR" data={financialData} />
diff --git a/src/pages/subcontractor/SubcontractorTaskDetailPage.jsx b/src/pages/subcontractor/SubcontractorTaskDetailPage.jsx
new file mode 100644
index 0000000..c8f7280
--- /dev/null
+++ b/src/pages/subcontractor/SubcontractorTaskDetailPage.jsx
@@ -0,0 +1,1531 @@
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { useNavigate, useParams } from 'react-router-dom';
+import { useAuth } from '../../context/AuthContext';
+import { useMockStore } from '../../data/mockStore';
+import { SpotlightCard } from '../../components/SpotlightCard';
+import {
+    ArrowLeft, ChevronRight, ClipboardList, MapPin, Calendar, Building2, User, Hash,
+    DollarSign, Receipt, Camera, Image as ImageIcon, MessageSquare, Lock, Send,
+    Clock, PauseCircle, CheckCircle, RefreshCcw, AlertCircle, X, Plus, Upload,
+    Activity, ImagePlus, Loader2, Play, Trash2, AlertTriangle, Users, UserCheck,
+} from 'lucide-react';
+
+// ---------------------------------------------------------------------------
+// Shared style maps (kept in sync with SubcontractorTasksPage.jsx)
+// ---------------------------------------------------------------------------
+const PRIORITY_STYLES = {
+    low:    { label: 'Low',    cls: 'bg-zinc-200 text-zinc-700 dark:bg-zinc-700 dark:text-zinc-300', dot: 'bg-zinc-400' },
+    medium: { label: 'Medium', cls: 'bg-blue-100 text-blue-700 dark:bg-blue-500/20 dark:text-blue-400', dot: 'bg-blue-500' },
+    high:   { label: 'High',   cls: 'bg-red-100 text-red-700 dark:bg-red-500/20 dark:text-red-400', dot: 'bg-red-500' },
+};
+
+const STATUS_CONFIG = {
+    Assigned:      { cls: 'bg-amber-100 text-amber-700 dark:bg-amber-500/20 dark:text-amber-400', icon: Clock,        dot: 'bg-amber-500' },
+    'In Progress': { cls: 'bg-blue-100 text-blue-700 dark:bg-blue-500/20 dark:text-blue-400',     icon: PauseCircle,  dot: 'bg-blue-500'  },
+    'On Hold':     { cls: 'bg-orange-100 text-orange-700 dark:bg-orange-500/20 dark:text-orange-400', icon: PauseCircle, dot: 'bg-orange-500' },
+    Completed:     { cls: 'bg-emerald-100 text-emerald-700 dark:bg-emerald-500/20 dark:text-emerald-400', icon: CheckCircle, dot: 'bg-emerald-500' },
+    Cancelled:     { cls: 'bg-zinc-200 text-zinc-600 dark:bg-zinc-700 dark:text-zinc-300',        icon: X,            dot: 'bg-zinc-500'  },
+};
+
+const formatDate = (iso) => {
+    if (!iso) return '—';
+    try { return new Date(iso).toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' }); }
+    catch { return iso; }
+};
+
+const formatDateTime = (iso) => {
+    if (!iso) return '—';
+    try {
+        const d = new Date(iso);
+        const dateStr = d.toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' });
+        const timeStr = d.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit' });
+        return `${dateStr} · ${timeStr}`;
+    } catch { return iso; }
+};
+
+const fmtMoney = (n) => new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(Number(n) || 0);
+
+const isOverdue = (task) => task?.dueDate
+    && task.dueDate < new Date().toISOString().slice(0, 10)
+    && task.status !== 'Completed' && task.status !== 'Cancelled';
+
+// ---------------------------------------------------------------------------
+// Reused badge primitives
+// ---------------------------------------------------------------------------
+const StatusBadge = ({ status, size = 'sm' }) => {
+    const cfg = STATUS_CONFIG[status] || STATUS_CONFIG.Assigned;
+    const Icon = cfg.icon;
+    const sizeCls = size === 'md'
+        ? 'text-[11px] px-3 py-1'
+        : 'text-[10px] px-2.5 py-1';
+    return (
+        <span className={`inline-flex items-center gap-1.5 rounded-full font-bold uppercase tracking-wide ${cfg.cls} ${sizeCls}`}>
+            <Icon size={size === 'md' ? 12 : 11} />
+            {status}
+        </span>
+    );
+};
+
+const PriorityBadge = ({ priority }) => {
+    const cfg = PRIORITY_STYLES[priority] || PRIORITY_STYLES.medium;
+    return (
+        <span className={`inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-[10px] font-bold uppercase tracking-wide ${cfg.cls}`}>
+            <span className={`w-1.5 h-1.5 rounded-full ${cfg.dot}`} />
+            {cfg.label} priority
+        </span>
+    );
+};
+
+const MetaItem = ({ icon: Icon, label, value, secondary, mono, highlight }) => (
+    <div className="flex items-start gap-2.5 min-w-0 p-3 rounded-xl bg-zinc-50 dark:bg-white/[0.03] border border-zinc-200 dark:border-white/10">
+        <div className="p-1.5 rounded-lg bg-white dark:bg-white/5 text-zinc-500 shrink-0 border border-zinc-200/60 dark:border-white/10">
+            <Icon size={14} />
+        </div>
+        <div className="min-w-0">
+            <div className="text-[10px] font-bold uppercase tracking-wider text-zinc-500">{label}</div>
+            <div className={`text-sm font-semibold truncate ${highlight ? 'text-red-500' : 'text-zinc-900 dark:text-white'} ${mono ? 'font-mono' : ''}`}>{value || '—'}</div>
+            {secondary && (
+                <div className="text-[11px] text-zinc-500 truncate mt-0.5">{secondary}</div>
+            )}
+        </div>
+    </div>
+);
+
+// ---------------------------------------------------------------------------
+// Page
+// ---------------------------------------------------------------------------
+const SubcontractorTaskDetailPage = () => {
+    const { taskId } = useParams();
+    const navigate = useNavigate();
+    const { user } = useAuth();
+    const {
+        subcontractorTasks, subSelfStatuses,
+        setSubcontractorTaskStatus, addSubcontractorTaskMessage,
+        addSubcontractorTaskExpense, addSubcontractorTaskFee,
+        addSubcontractorTaskActivity,
+    } = useMockStore();
+
+    const task = useMemo(() => subcontractorTasks.find(t => t.id === taskId), [subcontractorTasks, taskId]);
+
+    const [logExpenseOpen, setLogExpenseOpen] = useState(false);
+    const [logFeeOpen, setLogFeeOpen] = useState(false);
+    const [lightboxIndex, setLightboxIndex] = useState(null);
+    const [activityLightbox, setActivityLightbox] = useState(null); // { photos, index }
+
+    // ESC closes any open modal — handled inside each modal too, but having a guard
+    // at page level keeps focus tidy.
+    useEffect(() => {
+        const handler = (e) => {
+            if (e.key !== 'Escape') return;
+            if (lightboxIndex !== null) setLightboxIndex(null);
+            if (activityLightbox) setActivityLightbox(null);
+        };
+        window.addEventListener('keydown', handler);
+        return () => window.removeEventListener('keydown', handler);
+    }, [lightboxIndex, activityLightbox]);
+
+    if (!task) {
+        return (
+            <div className="min-h-full bg-zinc-50 dark:bg-[#09090b] text-zinc-900 dark:text-white flex items-center justify-center p-6">
+                <div className="text-center max-w-md">
+                    <div className="w-12 h-12 mx-auto rounded-2xl bg-zinc-200 dark:bg-white/10 flex items-center justify-center mb-3">
+                        <ClipboardList size={20} className="text-zinc-500" />
+                    </div>
+                    <h1 className="text-lg font-bold mb-1">Task not found</h1>
+                    <p className="text-sm text-zinc-500 mb-4">It may have been removed or reassigned. Head back to your assignments to see the latest.</p>
+                    <button
+                        onClick={() => navigate('/subcontractor/dashboard')}
+                        className="inline-flex items-center gap-2 px-4 py-2 rounded-xl bg-blue-600 hover:bg-blue-500 text-white text-sm font-bold transition-colors"
+                    >
+                        <ArrowLeft size={14} /> Back to Dashboard
+                    </button>
+                </div>
+            </div>
+        );
+    }
+
+    const overdue = isOverdue(task);
+    const closed = task.status === 'Completed' || task.status === 'Cancelled';
+
+    const handleStatusChange = (nextStatus, comment, photos = []) => {
+        setSubcontractorTaskStatus(task.id, nextStatus, comment, {
+            id: user?.id || task.subcontractorId,
+            name: user?.name || task.subcontractorName,
+            role: 'Subcontractor',
+        }, photos);
+    };
+
+    const handlePostProgress = ({ note, photos }) => {
+        addSubcontractorTaskActivity(task.id, { note, photos }, {
+            id: user?.id || task.subcontractorId,
+            name: user?.name || task.subcontractorName,
+            role: 'Subcontractor',
+        });
+    };
+
+    const handleSendMessage = (body, channel) => {
+        addSubcontractorTaskMessage(task.id, {
+            body,
+            channel,
+            sender: {
+                id: user?.id || task.subcontractorId,
+                name: user?.name || task.subcontractorName,
+                role: 'Subcontractor',
+            },
+        });
+    };
+
+    return (
+        <div className="min-h-full bg-zinc-50 dark:bg-[#09090b] text-zinc-900 dark:text-white transition-colors duration-300 relative">
+            {/* Ambient bg — matches SubcontractorTasksPage */}
+            <div className="fixed top-0 left-0 w-full h-full overflow-hidden pointer-events-none z-0">
+                <div className="absolute top-[-10%] left-[-10%] w-[50%] h-[50%] bg-blue-500/5 dark:bg-blue-900/10 rounded-full blur-[120px]" />
+                <div className="absolute bottom-[-10%] right-[-10%] w-[50%] h-[50%] bg-purple-500/5 dark:bg-purple-900/10 rounded-full blur-[120px]" />
+            </div>
+
+            <div className="relative z-10 p-4 sm:p-8 max-w-7xl mx-auto space-y-6 pb-20">
+                {/* Breadcrumb / back */}
+                <div className="flex items-center gap-2 text-xs font-bold uppercase tracking-widest text-zinc-500 min-w-0">
+                    <button
+                        type="button"
+                        onClick={() => navigate('/subcontractor/dashboard')}
+                        className="inline-flex items-center gap-1.5 hover:text-blue-600 dark:hover:text-blue-400 transition-colors shrink-0"
+                    >
+                        <ArrowLeft size={12} /> Subcontractor Tasks
+                    </button>
+                    <ChevronRight size={12} className="text-zinc-400 shrink-0" />
+                    <span className="text-zinc-700 dark:text-zinc-300 truncate normal-case font-semibold tracking-normal">
+                        {task.title}
+                    </span>
+                </div>
+
+                {/* Header spans full width */}
+                <TaskHeaderCard
+                    task={task}
+                    overdue={overdue}
+                    onLogExpense={() => setLogExpenseOpen(true)}
+                    onLogFee={() => setLogFeeOpen(true)}
+                />
+
+                {/* Two-column shell below: main content + financials/notifications rail */}
+                <div className="grid grid-cols-1 lg:grid-cols-3 gap-6 items-start">
+                    <div className="lg:col-span-2 space-y-6">
+                        <StatusManagementCard
+                            task={task}
+                            disabled={closed}
+                            statuses={subSelfStatuses}
+                            onChange={handleStatusChange}
+                            onPostProgress={handlePostProgress}
+                            onActivityPreview={(photos, index) => setActivityLightbox({ photos, index })}
+                        />
+
+                        <TaskThreadCard
+                            task={task}
+                            disabled={closed}
+                            onSend={handleSendMessage}
+                        />
+
+                        <DescriptionPhotosCard
+                            task={task}
+                            onPreview={(idx) => setLightboxIndex(idx)}
+                        />
+                    </div>
+
+                    <div className="lg:col-span-1 space-y-6">
+                        <ExpensesCard
+                            task={task}
+                            onLogExpense={() => setLogExpenseOpen(true)}
+                            disabled={closed}
+                        />
+                        <FeesCard
+                            task={task}
+                            onLogFee={() => setLogFeeOpen(true)}
+                            disabled={closed}
+                        />
+                    </div>
+                </div>
+            </div>
+
+            {/* Modals */}
+            <LogExpenseModal
+                isOpen={logExpenseOpen}
+                task={task}
+                onClose={() => setLogExpenseOpen(false)}
+                onSubmit={(fields) => {
+                    addSubcontractorTaskExpense(task.id, fields);
+                    setLogExpenseOpen(false);
+                }}
+            />
+            <LogFeeModal
+                isOpen={logFeeOpen}
+                task={task}
+                onClose={() => setLogFeeOpen(false)}
+                onSubmit={(fields) => {
+                    addSubcontractorTaskFee(task.id, fields);
+                    setLogFeeOpen(false);
+                }}
+            />
+            <PhotoLightbox
+                photos={task.photos || []}
+                index={lightboxIndex}
+                onClose={() => setLightboxIndex(null)}
+                onIndexChange={setLightboxIndex}
+            />
+            <PhotoLightbox
+                photos={activityLightbox?.photos || []}
+                index={activityLightbox?.index ?? null}
+                onClose={() => setActivityLightbox(null)}
+                onIndexChange={(idx) => setActivityLightbox(prev => prev ? { ...prev, index: idx } : prev)}
+            />
+        </div>
+    );
+};
+
+// ===========================================================================
+// Section 1 — Header / Task Details
+// ===========================================================================
+const TaskHeaderCard = ({ task, overdue, onLogExpense, onLogFee }) => {
+    const closed = task.status === 'Completed' || task.status === 'Cancelled';
+    return (
+        <SpotlightCard className="p-5 sm:p-6">
+            {/* Top row: ID + badges */}
+            <div className="flex flex-wrap items-center gap-2 mb-2">
+                <span className="text-[11px] font-mono font-bold text-zinc-500">{task.id}</span>
+                <span className="w-1 h-1 rounded-full bg-zinc-300 dark:bg-white/20" aria-hidden />
+                <StatusBadge status={task.status} size="md" />
+                <PriorityBadge priority={task.priority} />
+                {overdue && (
+                    <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-wider text-red-500 bg-red-500/10">
+                        <AlertCircle size={11} /> Overdue
+                    </span>
+                )}
+            </div>
+
+            {/* Title + actions */}
+            <div className="flex flex-col md:flex-row md:items-start md:justify-between gap-4">
+                <h1 className="text-2xl sm:text-3xl font-extrabold text-zinc-900 dark:text-white tracking-tight min-w-0 break-words">
+                    {task.title}
+                </h1>
+
+                <div className="flex flex-wrap gap-2 md:shrink-0">
+                    <button
+                        type="button"
+                        onClick={onLogExpense}
+                        disabled={closed}
+                        className="inline-flex items-center gap-2 px-4 py-2.5 rounded-xl text-sm font-bold border border-zinc-200 dark:border-white/10 text-zinc-700 dark:text-zinc-200 hover:bg-zinc-100 dark:hover:bg-white/5 transition-colors disabled:opacity-40 disabled:cursor-not-allowed"
+                    >
+                        <Receipt size={14} />
+                        Log Expense
+                    </button>
+                    <button
+                        type="button"
+                        onClick={onLogFee}
+                        disabled={closed}
+                        className="inline-flex items-center gap-2 px-4 py-2.5 rounded-xl text-sm font-bold text-white bg-emerald-600 hover:bg-emerald-500 shadow-lg shadow-emerald-500/20 transition-all active:scale-[0.97] disabled:opacity-40 disabled:cursor-not-allowed disabled:shadow-none"
+                    >
+                        <DollarSign size={14} />
+                        Log My Fee
+                    </button>
+                </div>
+            </div>
+
+            {/* Meta strip — horizontal inline row matching Figma */}
+            <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-4 mt-5 pt-5 border-t border-zinc-200 dark:border-white/10">
+                <MetaItem icon={Building2} label="Assigned By"  value={`${task.assignedByName}`}     secondary={task.companyName} />
+                <MetaItem icon={User}      label="Subcontractor" value={task.subcontractorName} />
+                <MetaItem icon={MapPin}    label="Location"      value={task.location} />
+                <MetaItem icon={Calendar}  label="Due Date"      value={formatDate(task.dueDate)} highlight={overdue} />
+                <MetaItem icon={Hash}      label="Created"       value={formatDate(task.createdAt)} />
+            </div>
+        </SpotlightCard>
+    );
+};
+
+// ===========================================================================
+// Section 4 — Status Management (with note + photo evidence + progress updates)
+// ===========================================================================
+const STATUS_COPY = {
+    Assigned: {
+        title: 'Acknowledge assignment',
+        hint: 'Confirm you have received this task and share any notes about the site or scope of work.',
+        notePlaceholder: 'e.g. Acknowledged — heading to site tomorrow morning.',
+        photoHint: 'Site or arrival photo',
+        accent: 'amber',
+    },
+    'In Progress': {
+        title: 'Start work',
+        hint: 'Add a brief note about what you are starting and attach any "before" photos if you have them.',
+        notePlaceholder: 'e.g. On site. Materials staged. Starting south slope ridge cap removal.',
+        photoHint: 'Before / starting photo',
+        accent: 'blue',
+    },
+    'On Hold': {
+        title: 'Put task on hold',
+        hint: 'Tell us why work has stopped and add any supporting photos (weather, materials, access, etc.) if applicable.',
+        notePlaceholder: 'e.g. Work stopped due to rain. Will resume tomorrow.',
+        photoHint: 'Supporting photo (e.g. rain, blocked access)',
+        accent: 'orange',
+    },
+    Completed: {
+        title: 'Mark as completed',
+        hint: 'Add a final completion note and attach any photos of the finished work.',
+        notePlaceholder: 'e.g. House painting completed successfully. Walked through with homeowner.',
+        photoHint: 'Completion / final-look photo(s)',
+        accent: 'emerald',
+    },
+};
+
+const ACCENT_BTN = {
+    amber:   'bg-amber-600 hover:bg-amber-500 shadow-amber-500/20',
+    blue:    'bg-blue-600 hover:bg-blue-500 shadow-blue-500/20',
+    orange:  'bg-orange-600 hover:bg-orange-500 shadow-orange-500/20',
+    emerald: 'bg-emerald-600 hover:bg-emerald-500 shadow-emerald-500/20',
+};
+
+const StatusManagementCard = ({ task, statuses, disabled, onChange, onPostProgress, onActivityPreview }) => {
+    const [pendingStatus, setPendingStatus] = useState(null);
+    const [statusNote, setStatusNote] = useState('');
+    const [statusPhotos, setStatusPhotos] = useState([]);
+    const [isSubmittingStatus, setIsSubmittingStatus] = useState(false);
+
+    const [progressNote, setProgressNote] = useState('');
+    const [progressPhotos, setProgressPhotos] = useState([]);
+    const [isSubmittingProgress, setIsSubmittingProgress] = useState(false);
+
+    const copy = pendingStatus ? STATUS_COPY[pendingStatus] || STATUS_COPY.Assigned : null;
+    const accentBtnCls = copy ? ACCENT_BTN[copy.accent] : ACCENT_BTN.blue;
+    const noteOk = statusNote.trim().length > 0;
+    const canConfirm = noteOk && !isSubmittingStatus;
+
+    const progressNoteOk = progressNote.trim().length > 0;
+    const canPostProgress = progressNoteOk && !isSubmittingProgress;
+
+    const handlePick = (s) => {
+        if (disabled) return;
+        if (s === task.status) return;
+        if (isSubmittingStatus) return;
+        setPendingStatus(s);
+        setStatusNote('');
+        setStatusPhotos([]);
+    };
+
+    const confirmStatus = () => {
+        if (!pendingStatus || !canConfirm) return;
+        setIsSubmittingStatus(true);
+        // Brief simulated commit so users see the loading state on slow devices.
+        setTimeout(() => {
+            onChange(pendingStatus, statusNote.trim(), statusPhotos);
+            setIsSubmittingStatus(false);
+            setStatusNote('');
+            setStatusPhotos([]);
+            setPendingStatus(null);
+        }, 350);
+    };
+
+    const cancelStatus = () => {
+        if (isSubmittingStatus) return;
+        setPendingStatus(null);
+        setStatusNote('');
+        setStatusPhotos([]);
+    };
+
+    const submitProgress = () => {
+        if (!canPostProgress) return;
+        setIsSubmittingProgress(true);
+        setTimeout(() => {
+            onPostProgress({ note: progressNote.trim(), photos: progressPhotos });
+            setIsSubmittingProgress(false);
+            setProgressNote('');
+            setProgressPhotos([]);
+        }, 350);
+    };
+
+    const canPostUpdates = ['Assigned', 'In Progress', 'On Hold', 'Completed'].includes(task.status);
+    const updateStatusCfg = STATUS_CONFIG[task.status] || STATUS_CONFIG.Assigned;
+    const updateBadgeCls = updateStatusCfg.cls;
+    const UpdateIcon = updateStatusCfg.icon || Play;
+    const postBtnCls = (() => {
+        switch (task.status) {
+            case 'Assigned':  return 'bg-amber-600 hover:bg-amber-500 shadow-amber-500/20';
+            case 'On Hold':   return 'bg-orange-600 hover:bg-orange-500 shadow-orange-500/20';
+            case 'Completed': return 'bg-emerald-600 hover:bg-emerald-500 shadow-emerald-500/20';
+            default:          return 'bg-blue-600 hover:bg-blue-500 shadow-blue-500/20';
+        }
+    })();
+    const progressPlaceholder = (() => {
+        switch (task.status) {
+            case 'Assigned':  return 'e.g. "Scheduled for Friday, reviewed site plan."';
+            case 'On Hold':   return 'e.g. "Still waiting on materials — supplier ETA Friday."';
+            case 'Completed': return 'e.g. "Follow-up walkthrough done, no issues noted."';
+            default:          return 'e.g. "First wall painting completed."';
+        }
+    })();
+    const progressCopy = (() => {
+        switch (task.status) {
+            case 'Assigned':  return 'Share early notes about the upcoming work — site prep, schedule changes, anything the admin should know before you start.';
+            case 'On Hold':   return 'Keep the admin posted while this task is paused — share why it is still on hold or what changed.';
+            case 'Completed': return 'Add a follow-up note after completion — punch-list items, homeowner feedback, or anything that came up after sign-off.';
+            default:          return 'Keep the admin in the loop with ongoing updates while you work.';
+        }
+    })();
+
+    const sortedActivities = useMemo(() => {
+        return [...(task.activities || [])].sort((a, b) => new Date(b.at) - new Date(a.at));
+    }, [task.activities]);
+
+    return (
+        <SpotlightCard className="p-5 sm:p-6">
+            <SectionHeading
+                icon={RefreshCcw}
+                title="Update Task Status"
+                hint="Move this task through the workflow. Add a note describing the change, and attach photos if you have them."
+            />
+
+            <div className="grid grid-cols-2 md:grid-cols-4 gap-2 sm:gap-3 mt-4">
+                {statuses.map(s => {
+                    const cfg = STATUS_CONFIG[s] || STATUS_CONFIG.Assigned;
+                    const Icon = cfg.icon;
+                    const isCurrent = task.status === s;
+                    const isPending = pendingStatus === s;
+                    return (
+                        <button
+                            key={s}
+                            type="button"
+                            onClick={() => handlePick(s)}
+                            disabled={disabled || isSubmittingStatus}
+                            className={`group relative flex items-center justify-center gap-2 px-3 py-3 rounded-xl text-sm font-bold border transition-all
+                                ${isCurrent
+                                    ? 'border-blue-500 bg-blue-500/10 text-blue-600 dark:text-blue-400 shadow-lg shadow-blue-500/10'
+                                    : isPending
+                                        ? 'border-blue-400 bg-blue-50 dark:bg-blue-500/10 text-blue-700 dark:text-blue-400'
+                                        : 'border-zinc-200 dark:border-white/10 hover:border-blue-400 dark:hover:border-blue-500/40 hover:bg-zinc-50 dark:hover:bg-white/5 text-zinc-700 dark:text-zinc-300'
+                                }
+                                disabled:opacity-40 disabled:cursor-not-allowed`}
+                        >
+                            <Icon size={14} />
+                            <span>{s}</span>
+                            {isCurrent && <span className="absolute top-1 right-1 w-2 h-2 rounded-full bg-blue-500 animate-pulse" />}
+                        </button>
+                    );
+                })}
+            </div>
+
+            {pendingStatus && copy && (
+                <div className="mt-4 p-4 rounded-xl bg-blue-50/60 dark:bg-blue-500/5 border border-blue-200 dark:border-blue-500/20 space-y-4 transition-all">
+                    <div className="flex flex-wrap items-center gap-2">
+                        <span className="text-[10px] font-bold uppercase tracking-wider text-zinc-500">Pending:</span>
+                        <StatusBadge status={pendingStatus} />
+                        <span className="text-xs text-zinc-600 dark:text-zinc-300 font-semibold">{copy.title}</span>
+                    </div>
+                    <p className="text-[12px] text-zinc-600 dark:text-zinc-400">{copy.hint}</p>
+
+                    <div>
+                        <RequiredLabel ok={noteOk}>Note / comment</RequiredLabel>
+                        <textarea
+                            value={statusNote}
+                            onChange={(e) => setStatusNote(e.target.value)}
+                            rows={3}
+                            disabled={isSubmittingStatus}
+                            placeholder={copy.notePlaceholder}
+                            className={`w-full text-sm rounded-lg bg-white dark:bg-zinc-900 border px-3 py-2 outline-none transition-colors disabled:opacity-60
+                                ${statusNote.length > 0 || noteOk
+                                    ? 'border-zinc-200 dark:border-white/10 focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500/40'
+                                    : 'border-zinc-200 dark:border-white/10 focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500/40'
+                                }`}
+                        />
+                    </div>
+
+                    <div>
+                        <label className="text-xs font-bold uppercase tracking-wider text-zinc-600 dark:text-zinc-300 mb-1.5 flex items-center gap-1.5">
+                            <span className="w-1.5 h-1.5 rounded-full bg-zinc-400" />
+                            <span>Photo upload <span className="text-zinc-400 font-normal normal-case">— {copy.photoHint}</span></span>
+                        </label>
+                        <PhotoPicker
+                            photos={statusPhotos}
+                            onChange={setStatusPhotos}
+                            disabled={isSubmittingStatus}
+                            ctaLabel="Tap to upload photo(s)"
+                        />
+                    </div>
+
+                    {!canConfirm && !isSubmittingStatus && (
+                        <div className="flex items-start gap-2 text-[11px] text-amber-700 dark:text-amber-400">
+                            <AlertTriangle size={12} className="mt-0.5 shrink-0" />
+                            <span>Add a note to enable the status update.</span>
+                        </div>
+                    )}
+
+                    <div className="flex justify-end gap-2 pt-1">
+                        <button
+                            type="button"
+                            onClick={cancelStatus}
+                            disabled={isSubmittingStatus}
+                            className="px-3 py-1.5 rounded-lg text-xs font-bold uppercase tracking-wider text-zinc-600 dark:text-zinc-400 hover:bg-zinc-100 dark:hover:bg-white/5 transition-colors disabled:opacity-40 disabled:cursor-not-allowed"
+                        >
+                            Cancel
+                        </button>
+                        <button
+                            type="button"
+                            onClick={confirmStatus}
+                            disabled={!canConfirm}
+                            className={`inline-flex items-center gap-2 px-4 py-1.5 rounded-lg text-xs font-bold uppercase tracking-wider text-white shadow-lg transition-all active:scale-[0.97] disabled:opacity-40 disabled:cursor-not-allowed disabled:shadow-none ${accentBtnCls}`}
+                        >
+                            {isSubmittingStatus
+                                ? <><Loader2 size={12} className="animate-spin" /> Updating…</>
+                                : <><CheckCircle size={12} /> Confirm change</>
+                            }
+                        </button>
+                    </div>
+                </div>
+            )}
+
+            {!pendingStatus && canPostUpdates && (
+                <div className="mt-4 p-4 rounded-xl bg-zinc-50 dark:bg-white/[0.03] border border-zinc-200 dark:border-white/10 space-y-4">
+                    <div className="flex items-center gap-2 flex-wrap">
+                        <span className={`inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-wider ${updateBadgeCls}`}>
+                            <UpdateIcon size={10} /> {task.status}
+                        </span>
+                        <h4 className="text-sm font-bold text-zinc-900 dark:text-white">Post a progress update</h4>
+                    </div>
+                    <p className="text-[12px] text-zinc-500">{progressCopy}</p>
+
+                    <div>
+                        <RequiredLabel ok={progressNoteOk}>Progress note</RequiredLabel>
+                        <textarea
+                            value={progressNote}
+                            onChange={(e) => setProgressNote(e.target.value)}
+                            rows={2}
+                            disabled={isSubmittingProgress}
+                            placeholder={progressPlaceholder}
+                            className="w-full text-sm rounded-lg bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-white/10 px-3 py-2 outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500/40 transition-colors disabled:opacity-60"
+                        />
+                    </div>
+
+                    <div>
+                        <label className="text-xs font-bold uppercase tracking-wider text-zinc-600 dark:text-zinc-300 mb-1.5 flex items-center gap-1.5">
+                            <span className="w-1.5 h-1.5 rounded-full bg-zinc-400" />
+                            <span>Photos</span>
+                        </label>
+                        <PhotoPicker
+                            photos={progressPhotos}
+                            onChange={setProgressPhotos}
+                            disabled={isSubmittingProgress}
+                            ctaLabel="Tap to upload photo(s)"
+                        />
+                    </div>
+
+                    <div className="flex justify-end">
+                        <button
+                            type="button"
+                            onClick={submitProgress}
+                            disabled={!canPostProgress}
+                            className={`inline-flex items-center gap-2 px-4 py-2 rounded-lg text-xs font-bold uppercase tracking-wider text-white shadow-lg transition-all active:scale-[0.97] disabled:opacity-40 disabled:cursor-not-allowed disabled:shadow-none ${postBtnCls}`}
+                        >
+                            {isSubmittingProgress
+                                ? <><Loader2 size={12} className="animate-spin" /> Posting…</>
+                                : <><Send size={12} /> Post update</>
+                            }
+                        </button>
+                    </div>
+                </div>
+            )}
+
+            {/* Status History + Activity Timeline — side by side */}
+            <div className="mt-5 pt-5 border-t border-zinc-200 dark:border-white/10 grid grid-cols-1 lg:grid-cols-2 gap-5">
+                <StatusHistoryPanel statusHistory={task.statusHistory} />
+                <ActivityTimelinePanel
+                    activities={sortedActivities}
+                    onPreview={(photos, index) => onActivityPreview?.(photos, index)}
+                />
+            </div>
+        </SpotlightCard>
+    );
+};
+
+// ===========================================================================
+// Status History panel — left side of the workflow rail
+// ===========================================================================
+const StatusHistoryPanel = ({ statusHistory }) => {
+    const history = statusHistory || [];
+    return (
+        <div className="rounded-xl bg-zinc-50/60 dark:bg-white/[0.02] border border-zinc-200 dark:border-white/10 p-4 flex flex-col min-w-0">
+            <h4 className="text-[10px] font-bold uppercase tracking-wider text-zinc-500 mb-3 flex items-center gap-1.5">
+                <Clock size={11} /> Status History
+            </h4>
+            {history.length === 0 ? (
+                <p className="text-xs text-zinc-500 italic">No status changes recorded yet.</p>
+            ) : (
+                <ol className="space-y-3 max-h-[28rem] overflow-y-auto pr-1 custom-scrollbar">
+                    {[...history].slice().reverse().map((h) => {
+                        const cfg = STATUS_CONFIG[h.status] || STATUS_CONFIG.Assigned;
+                        return (
+                            <li key={h.id} className="flex items-start gap-3">
+                                <span className={`mt-1 w-2.5 h-2.5 rounded-full ${cfg.dot} shrink-0`} />
+                                <div className="min-w-0 flex-1">
+                                    <div className="flex flex-wrap items-center gap-x-2 gap-y-1">
+                                        <StatusBadge status={h.status} />
+                                        <span className="text-xs text-zinc-600 dark:text-zinc-400">by <span className="font-semibold text-zinc-900 dark:text-white">{h.actorName}</span></span>
+                                    </div>
+                                    <div className="text-[11px] text-zinc-500 font-mono mt-0.5">{formatDateTime(h.at)}</div>
+                                    {h.comment && (
+                                        <p className="text-sm text-zinc-700 dark:text-zinc-300 mt-1">{h.comment}</p>
+                                    )}
+                                </div>
+                            </li>
+                        );
+                    })}
+                </ol>
+            )}
+        </div>
+    );
+};
+
+// ===========================================================================
+// Activity Timeline panel — right side of the workflow rail
+// ===========================================================================
+const ActivityTimelinePanel = ({ activities, onPreview }) => {
+    return (
+        <div className="rounded-xl bg-zinc-50/60 dark:bg-white/[0.02] border border-zinc-200 dark:border-white/10 p-4 flex flex-col min-w-0">
+            <h4 className="text-[10px] font-bold uppercase tracking-wider text-zinc-500 mb-3 flex items-center gap-1.5">
+                <Activity size={11} /> Task Activity Timeline
+            </h4>
+            {(!activities || activities.length === 0) ? (
+                <div className="py-6 text-center text-zinc-500">
+                    <Activity size={18} className="mx-auto mb-1.5 opacity-50" />
+                    <p className="text-xs">No activity yet.</p>
+                    <p className="text-[11px] mt-1">Status changes and progress updates will appear here.</p>
+                </div>
+            ) : (
+                <ol className="relative max-h-[28rem] overflow-y-auto pr-1 custom-scrollbar">
+                    {activities.map((a, idx) => (
+                        <ActivityTimelineRow
+                            key={a.id}
+                            activity={a}
+                            isLast={idx === activities.length - 1}
+                            onPreview={(index) => onPreview?.(a.photos || [], index)}
+                        />
+                    ))}
+                </ol>
+            )}
+        </div>
+    );
+};
+
+// ===========================================================================
+// Required-field label
+// ===========================================================================
+const RequiredLabel = ({ children, ok }) => (
+    <label className="text-xs font-bold uppercase tracking-wider text-zinc-600 dark:text-zinc-300 mb-1.5 flex items-center gap-1.5">
+        <span className={`w-1.5 h-1.5 rounded-full transition-colors ${ok ? 'bg-emerald-500' : 'bg-red-500'}`} />
+        <span>{children}</span>
+        <span className={`text-[10px] font-bold uppercase tracking-wider transition-colors ${ok ? 'text-emerald-600' : 'text-red-500'}`}>
+            {ok ? 'Ready' : 'Required'}
+        </span>
+    </label>
+);
+
+// ===========================================================================
+// Photo Picker — mock upload with preview + remove
+// ===========================================================================
+const PhotoPicker = ({ photos, onChange, disabled, ctaLabel = 'Tap to upload photo(s)' }) => {
+    const handleFiles = (files) => {
+        const arr = Array.from(files || []);
+        if (!arr.length) return;
+        Promise.all(arr.map(file => new Promise((res) => {
+            const reader = new FileReader();
+            reader.onload = () => res({
+                id: `local_${Date.now()}_${Math.random().toString(36).slice(2, 7)}`,
+                url: reader.result,
+                name: file.name,
+            });
+            reader.onerror = () => res(null);
+            reader.readAsDataURL(file);
+        }))).then(results => {
+            const next = results.filter(Boolean);
+            if (next.length) onChange([...(photos || []), ...next]);
+        });
+    };
+
+    return (
+        <div className="space-y-2">
+            <label className={`flex items-center justify-center gap-2 rounded-xl border border-dashed py-4 transition-colors
+                ${disabled
+                    ? 'border-zinc-200 dark:border-white/10 bg-zinc-100 dark:bg-white/[0.02] cursor-not-allowed opacity-60'
+                    : 'border-zinc-300 dark:border-white/15 bg-zinc-50 dark:bg-white/[0.03] cursor-pointer hover:border-blue-400 dark:hover:border-blue-500/40'
+                }`}>
+                <ImagePlus size={14} className="text-zinc-500" />
+                <span className="text-xs font-semibold text-zinc-600 dark:text-zinc-400">{ctaLabel}</span>
+                <input
+                    type="file"
+                    accept="image/*"
+                    multiple
+                    disabled={disabled}
+                    className="sr-only"
+                    onChange={(e) => { handleFiles(e.target.files); e.target.value = ''; }}
+                />
+            </label>
+
+            {photos && photos.length > 0 && (
+                <div className="grid grid-cols-3 sm:grid-cols-4 gap-2">
+                    {photos.map((p) => (
+                        <div key={p.id} className="relative group rounded-lg overflow-hidden border border-zinc-200 dark:border-white/10 aspect-square bg-zinc-100 dark:bg-zinc-800">
+                            <img src={p.url} alt={p.name || 'preview'} className="w-full h-full object-cover" />
+                            {!disabled && (
+                                <button
+                                    type="button"
+                                    onClick={() => onChange(photos.filter(x => x.id !== p.id))}
+                                    className="absolute top-1 right-1 p-1 rounded-full bg-black/60 text-white opacity-0 group-hover:opacity-100 focus:opacity-100 transition-opacity"
+                                    aria-label="Remove photo"
+                                >
+                                    <Trash2 size={11} />
+                                </button>
+                            )}
+                            {p.name && (
+                                <div className="absolute bottom-0 inset-x-0 px-1.5 py-0.5 text-[9px] font-mono text-white bg-gradient-to-t from-black/70 to-transparent truncate">
+                                    {p.name}
+                                </div>
+                            )}
+                        </div>
+                    ))}
+                </div>
+            )}
+        </div>
+    );
+};
+
+// ===========================================================================
+// Activity Timeline row (Jira-style) — rendered inside StatusManagementCard
+// ===========================================================================
+const ActivityTimelineRow = ({ activity, isLast, onPreview }) => {
+    const isStatusChange = activity.type === 'status_change';
+    const cfg = STATUS_CONFIG[activity.status] || STATUS_CONFIG.Assigned;
+    const Icon = isStatusChange ? cfg.icon : MessageSquare;
+
+    return (
+        <li className="relative pl-10 pb-5 last:pb-0">
+            {!isLast && <span className="absolute left-[14px] top-8 bottom-0 w-px bg-zinc-200 dark:bg-white/10" aria-hidden />}
+            <span className={`absolute left-0 top-0 w-7 h-7 rounded-full flex items-center justify-center ring-4 ring-white dark:ring-[#09090b] ${isStatusChange ? cfg.cls : 'bg-zinc-100 text-zinc-600 dark:bg-white/10 dark:text-zinc-300'}`}>
+                <Icon size={12} />
+            </span>
+            <div className="rounded-xl bg-zinc-50 dark:bg-white/[0.03] border border-zinc-200 dark:border-white/10 p-3 transition-colors hover:border-blue-500/30">
+                <div className="flex flex-wrap items-center gap-x-2 gap-y-1">
+                    {isStatusChange ? (
+                        <>
+                            <span className="text-[10px] font-bold uppercase tracking-wider text-zinc-500">Status →</span>
+                            <StatusBadge status={activity.status} />
+                        </>
+                    ) : (
+                        <span className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-[10px] font-bold uppercase tracking-wide bg-blue-100 text-blue-700 dark:bg-blue-500/20 dark:text-blue-400">
+                            <MessageSquare size={11} /> Progress update
+                        </span>
+                    )}
+                    <span className="text-xs text-zinc-600 dark:text-zinc-400">
+                        by <span className="font-semibold text-zinc-900 dark:text-white">{activity.actorName}</span>
+                    </span>
+                    {activity.actorRole && (
+                        <span className="text-[10px] uppercase tracking-wider text-zinc-500 font-bold">· {activity.actorRole}</span>
+                    )}
+                    <span className="text-[11px] text-zinc-500 font-mono sm:ml-auto">{formatDateTime(activity.at)}</span>
+                </div>
+
+                {activity.note && (
+                    <p className="text-sm text-zinc-700 dark:text-zinc-300 mt-2 whitespace-pre-line">
+                        {activity.note}
+                    </p>
+                )}
+
+                {activity.photos && activity.photos.length > 0 && (
+                    <div className="grid grid-cols-3 gap-2 mt-3">
+                        {activity.photos.map((p, idx) => (
+                            <button
+                                key={p.id}
+                                type="button"
+                                onClick={() => onPreview?.(idx)}
+                                className="group aspect-square rounded-lg overflow-hidden border border-zinc-200 dark:border-white/10 bg-zinc-100 dark:bg-zinc-800"
+                            >
+                                <img
+                                    src={p.url}
+                                    alt={p.name || 'Activity photo'}
+                                    className="w-full h-full object-cover transition-transform group-hover:scale-105"
+                                />
+                            </button>
+                        ))}
+                    </div>
+                )}
+            </div>
+        </li>
+    );
+};
+
+// ===========================================================================
+// Section 3 — Task Thread / Communication
+// ===========================================================================
+const TaskThreadCard = ({ task, disabled, onSend }) => {
+    const [channel, setChannel] = useState('group'); // group | direct
+    const [draft, setDraft] = useState('');
+    const scrollerRef = useRef(null);
+
+    const supervisorName = task.assignedByName || 'your supervisor';
+
+    const messages = useMemo(
+        () => (task.thread || []).filter(m => m.channel === channel),
+        [task.thread, channel],
+    );
+
+    useEffect(() => {
+        if (scrollerRef.current) {
+            scrollerRef.current.scrollTop = scrollerRef.current.scrollHeight;
+        }
+    }, [messages.length]);
+
+    const submit = (e) => {
+        e?.preventDefault();
+        if (!draft.trim() || disabled) return;
+        onSend(draft, channel);
+        setDraft('');
+    };
+
+    const isDirect = channel === 'direct';
+
+    return (
+        <SpotlightCard className="p-5 sm:p-6">
+            <div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-3">
+                <SectionHeading
+                    icon={MessageSquare}
+                    title="Task Thread"
+                    hint={isDirect
+                        ? `Private 1:1 chat with your supervisor (${supervisorName}). Only the two of you see these messages.`
+                        : 'Team chat for everyone working on this project — admin, owner / project lead, and you. The homeowner is not in this thread.'}
+                    inline
+                />
+                <div className="inline-flex rounded-xl bg-zinc-100 dark:bg-white/5 border border-zinc-200 dark:border-white/10 p-1 shrink-0">
+                    <ChannelTab active={channel === 'group'} onClick={() => setChannel('group')} icon={Users} label="Team" />
+                    <ChannelTab active={channel === 'direct'} onClick={() => setChannel('direct')} icon={UserCheck} label="Direct" />
+                </div>
+            </div>
+
+            <div
+                ref={scrollerRef}
+                className="mt-4 space-y-3 max-h-[28rem] overflow-y-auto pr-1 custom-scrollbar"
+            >
+                {messages.length === 0 ? (
+                    <div className="text-center py-10 text-zinc-500">
+                        {isDirect
+                            ? <UserCheck size={20} className="mx-auto mb-2 opacity-50" />
+                            : <Users size={20} className="mx-auto mb-2 opacity-50" />}
+                        <p className="text-sm">
+                            {isDirect
+                                ? `No direct messages with ${supervisorName} yet.`
+                                : 'No team messages yet.'}
+                        </p>
+                    </div>
+                ) : messages.map(m => (
+                    <MessageBubble key={m.id} message={m} channel={channel} />
+                ))}
+            </div>
+
+            <form onSubmit={submit} className="mt-4 pt-4 border-t border-zinc-200 dark:border-white/10">
+                <div className={`flex items-center gap-2 rounded-xl border bg-zinc-50 dark:bg-white/5 px-3 py-2
+                    ${isDirect
+                        ? 'border-indigo-300 dark:border-indigo-500/30'
+                        : 'border-zinc-200 dark:border-white/10'
+                    }`}>
+                    {isDirect && <UserCheck size={14} className="text-indigo-500 shrink-0" />}
+                    <input
+                        type="text"
+                        value={draft}
+                        onChange={(e) => setDraft(e.target.value)}
+                        disabled={disabled}
+                        placeholder={isDirect
+                            ? `Message ${supervisorName} privately…`
+                            : 'Message the team…'}
+                        className="flex-1 bg-transparent border-0 outline-none text-sm placeholder:text-zinc-400 disabled:opacity-50"
+                    />
+                    <button
+                        type="submit"
+                        disabled={!draft.trim() || disabled}
+                        className={`p-2 rounded-lg text-white disabled:opacity-40 disabled:cursor-not-allowed transition-colors
+                            ${isDirect ? 'bg-indigo-600 hover:bg-indigo-500' : 'bg-blue-600 hover:bg-blue-500'}`}
+                        aria-label="Send message"
+                    >
+                        <Send size={14} />
+                    </button>
+                </div>
+                {isDirect ? (
+                    <p className="mt-2 text-[11px] text-indigo-600 dark:text-indigo-400 flex items-center gap-1.5">
+                        <Lock size={10} /> Direct messages are private between you and {supervisorName}. The rest of the team cannot see them.
+                    </p>
+                ) : (
+                    <p className="mt-2 text-[11px] text-zinc-500 flex items-center gap-1.5">
+                        <Users size={10} /> Visible to everyone on the project team. The homeowner is not part of this chat.
+                    </p>
+                )}
+            </form>
+        </SpotlightCard>
+    );
+};
+
+const ChannelTab = ({ active, onClick, icon: Icon, label }) => (
+    <button
+        type="button"
+        onClick={onClick}
+        className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-bold transition-colors
+            ${active
+                ? 'bg-white dark:bg-zinc-900 text-zinc-900 dark:text-white shadow-sm'
+                : 'text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-white'
+            }`}
+    >
+        <Icon size={12} />
+        {label}
+    </button>
+);
+
+const MessageBubble = ({ message, channel }) => {
+    const mine = !!message.mine;
+    const isDirect = channel === 'direct';
+    const bubbleBase = isDirect
+        ? (mine
+            ? 'bg-indigo-600 text-white'
+            : 'bg-indigo-50 dark:bg-indigo-500/10 border border-indigo-200 dark:border-indigo-500/20')
+        : (mine
+            ? 'bg-blue-600 text-white'
+            : 'bg-zinc-100 dark:bg-white/5 border border-zinc-200 dark:border-white/10');
+    const meta = mine
+        ? (isDirect ? 'text-indigo-100/80' : 'text-blue-100/80')
+        : isDirect
+            ? 'text-indigo-700 dark:text-indigo-400'
+            : 'text-zinc-500';
+
+    return (
+        <div className={`flex ${mine ? 'justify-end' : 'justify-start'}`}>
+            <div className="flex items-end gap-2 max-w-[88%]">
+                {!mine && (
+                    <div className={`w-7 h-7 rounded-full text-[11px] font-bold flex items-center justify-center shrink-0
+                        ${isDirect
+                            ? 'bg-indigo-100 text-indigo-700 dark:bg-indigo-500/20 dark:text-indigo-400'
+                            : 'bg-blue-100 text-blue-600 dark:bg-blue-500/20 dark:text-blue-400'
+                        }`}>
+                        {message.senderName?.charAt(0)?.toUpperCase() || '?'}
+                    </div>
+                )}
+                <div className={`rounded-2xl px-3 py-2 ${bubbleBase}`}>
+                    {!mine && (
+                        <div className={`text-[10px] font-bold uppercase tracking-wider ${meta} mb-0.5`}>
+                            {message.senderName} · {message.senderRole}
+                        </div>
+                    )}
+                    <p className={`text-sm leading-snug whitespace-pre-line ${mine ? 'text-white' : 'text-zinc-800 dark:text-zinc-100'}`}>
+                        {message.body}
+                    </p>
+                    <div className={`text-[10px] font-mono mt-1 ${meta}`}>{formatDateTime(message.at)}</div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+// ===========================================================================
+// Section 1.b + Section 2 — Description + Photos
+// ===========================================================================
+const DescriptionPhotosCard = ({ task, onPreview }) => {
+    const photos = task.photos || [];
+    return (
+        <SpotlightCard className="p-5 sm:p-6">
+            <SectionHeading
+                icon={ImageIcon}
+                title="Task Details & Photos"
+                hint="Reference visuals and notes from the admin who created this task."
+            />
+
+            <div className="mt-4 space-y-5">
+                <div>
+                    <h4 className="text-[10px] font-bold uppercase tracking-wider text-zinc-500 mb-1.5">Description</h4>
+                    <p className="text-sm text-zinc-700 dark:text-zinc-300 whitespace-pre-line">
+                        {task.description || <em className="text-zinc-500">No description provided.</em>}
+                    </p>
+                </div>
+
+                <div>
+                    <h4 className="text-[10px] font-bold uppercase tracking-wider text-zinc-500 mb-2 flex items-center gap-1.5">
+                        <Camera size={11} /> Photos ({photos.length})
+                    </h4>
+                    {photos.length === 0 ? (
+                        <p className="text-xs text-zinc-500 italic">No photos attached.</p>
+                    ) : (
+                        <div className="grid grid-cols-2 sm:grid-cols-3 gap-3">
+                            {photos.map((p, idx) => (
+                                <button
+                                    key={p.id}
+                                    type="button"
+                                    onClick={() => onPreview(idx)}
+                                    className="group text-left rounded-xl overflow-hidden border border-zinc-200 dark:border-white/10 bg-zinc-50 dark:bg-white/5 hover:border-blue-500/40 transition-all"
+                                >
+                                    <div className="aspect-square bg-zinc-200 dark:bg-zinc-800 relative">
+                                        <img src={p.url} alt={p.name || 'Task photo'} className="w-full h-full object-cover transition-transform group-hover:scale-105" />
+                                        {p.annotation && (
+                                            <span className="absolute top-2 left-2 px-2 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-wider bg-black/60 text-white backdrop-blur-sm">
+                                                Annotated
+                                            </span>
+                                        )}
+                                    </div>
+                                    {p.annotation && (
+                                        <div className="px-3 py-2 text-[12px] font-semibold text-zinc-700 dark:text-zinc-300 truncate">
+                                            {p.annotation}
+                                        </div>
+                                    )}
+                                </button>
+                            ))}
+                        </div>
+                    )}
+                </div>
+            </div>
+        </SpotlightCard>
+    );
+};
+
+// ===========================================================================
+// Section 5 — Expenses card (right rail)
+// ===========================================================================
+const ExpensesCard = ({ task, onLogExpense, disabled }) => {
+    const expenses = task.expenses || [];
+    const total = expenses.reduce((sum, e) => sum + (Number(e.amount) || 0), 0);
+
+    return (
+        <SpotlightCard className="p-5 sm:p-6">
+            <div className="flex items-start justify-between gap-3">
+                <SectionHeading
+                    icon={Receipt}
+                    title="My Expense"
+                    hint={`${expenses.length} entr${expenses.length === 1 ? 'y' : 'ies'}`}
+                    inline
+                />
+                <button
+                    type="button"
+                    onClick={onLogExpense}
+                    disabled={disabled}
+                    className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-bold border border-zinc-200 dark:border-white/10 text-zinc-700 dark:text-zinc-200 hover:bg-zinc-100 dark:hover:bg-white/5 transition-colors disabled:opacity-40 disabled:cursor-not-allowed shrink-0"
+                >
+                    <Plus size={12} /> Add
+                </button>
+            </div>
+
+            <div className="mt-4">
+                {expenses.length === 0 ? (
+                    <EmptyLine icon={Receipt} text="No expenses logged yet." />
+                ) : (
+                    <ul className="divide-y divide-zinc-100 dark:divide-white/5">
+                        {expenses.map(e => (
+                            <li key={e.id} className="flex items-start justify-between gap-3 py-2.5">
+                                <div className="min-w-0">
+                                    <p className="text-sm font-semibold text-zinc-900 dark:text-white truncate">{e.description || e.category}</p>
+                                    <p className="text-[11px] text-zinc-500 mt-0.5 truncate">{e.category} · {formatDate(e.createdAt)}</p>
+                                    {e.notes && <p className="text-[11px] text-zinc-500 mt-0.5 truncate italic">{e.notes}</p>}
+                                </div>
+                                <span className="text-sm font-mono font-bold text-zinc-900 dark:text-white shrink-0">{fmtMoney(e.amount)}</span>
+                            </li>
+                        ))}
+                    </ul>
+                )}
+            </div>
+
+            <div className="mt-3 pt-3 border-t border-zinc-200 dark:border-white/10 flex items-center justify-between">
+                <span className="text-[11px] font-bold uppercase tracking-wider text-zinc-500">Total Expenses</span>
+                <span className="text-base font-mono font-bold text-zinc-900 dark:text-white">{fmtMoney(total)}</span>
+            </div>
+        </SpotlightCard>
+    );
+};
+
+// ===========================================================================
+// Section 6 — Fees card (right rail)
+// ===========================================================================
+const FeesCard = ({ task, onLogFee, disabled }) => {
+    const fees = task.fees || [];
+    const total = fees.reduce((sum, f) => sum + (Number(f.amount) || 0), 0);
+
+    return (
+        <SpotlightCard className="p-5 sm:p-6">
+            <div className="flex items-start justify-between gap-3">
+                <SectionHeading
+                    icon={DollarSign}
+                    title="My Fee"
+                    hint={`${fees.length} fee${fees.length === 1 ? '' : 's'} submitted`}
+                    inline
+                />
+                <button
+                    type="button"
+                    onClick={onLogFee}
+                    disabled={disabled}
+                    className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-bold text-white bg-emerald-600 hover:bg-emerald-500 shadow shadow-emerald-500/10 transition-colors disabled:opacity-40 disabled:cursor-not-allowed shrink-0"
+                >
+                    <Plus size={12} /> Add
+                </button>
+            </div>
+
+            <div className="mt-4">
+                {fees.length === 0 ? (
+                    <EmptyLine icon={DollarSign} text="No fees submitted yet." />
+                ) : (
+                    <ul className="divide-y divide-zinc-100 dark:divide-white/5">
+                        {fees.map(f => (
+                            <li key={f.id} className="flex items-start justify-between gap-3 py-2.5">
+                                <div className="min-w-0">
+                                    <p className="text-sm font-semibold text-zinc-900 dark:text-white truncate">{f.description || f.type}</p>
+                                    <p className="text-[11px] text-zinc-500 mt-0.5 truncate">{f.type} · {formatDate(f.createdAt)}</p>
+                                </div>
+                                <span className="text-sm font-mono font-bold text-emerald-600 dark:text-emerald-400 shrink-0">{fmtMoney(f.amount)}</span>
+                            </li>
+                        ))}
+                    </ul>
+                )}
+            </div>
+
+            <div className="mt-3 pt-3 border-t border-emerald-500/20 flex items-center justify-between bg-emerald-50/40 dark:bg-emerald-500/5 -mx-2 px-3 py-2 rounded-lg">
+                <span className="text-[11px] font-bold uppercase tracking-wider text-emerald-700 dark:text-emerald-400">Total Fee</span>
+                <span className="text-base font-mono font-bold text-emerald-700 dark:text-emerald-400">{fmtMoney(total)}</span>
+            </div>
+        </SpotlightCard>
+    );
+};
+
+const EmptyLine = ({ icon: Icon, text }) => (
+    <div className="py-6 text-center text-zinc-500">
+        <Icon size={18} className="mx-auto mb-1.5 opacity-50" />
+        <p className="text-xs">{text}</p>
+    </div>
+);
+
+// ===========================================================================
+// Modals — Log Expense, Log Fee, Photo Lightbox
+// ===========================================================================
+const ModalShell = ({ isOpen, onClose, children, label }) => {
+    useEffect(() => {
+        const handler = (e) => { if (e.key === 'Escape') onClose(); };
+        if (isOpen) window.addEventListener('keydown', handler);
+        return () => window.removeEventListener('keydown', handler);
+    }, [isOpen, onClose]);
+
+    if (!isOpen) return null;
+    return createPortal(
+        <div className="fixed inset-0 z-[9999] flex items-end sm:items-center justify-center sm:p-6" role="dialog" aria-modal="true" aria-label={label}>
+            <div className="absolute inset-0 bg-black/60 backdrop-blur-sm" onClick={onClose} />
+            <div className="relative w-full sm:max-w-lg bg-white dark:bg-[#121214] rounded-t-2xl sm:rounded-2xl shadow-2xl border border-zinc-200 dark:border-white/10 overflow-hidden flex flex-col animate-in slide-in-from-bottom-10 duration-200 max-h-[92dvh]">
+                {children}
+            </div>
+        </div>,
+        document.body,
+    );
+};
+
+const LogExpenseModal = ({ isOpen, task, onClose, onSubmit }) => {
+    const { expenseCategories } = useMockStore();
+    // Re-mount the form when the modal opens so each open starts at defaults.
+    if (!isOpen) return null;
+    return <LogExpenseModalBody key={task.id} task={task} onClose={onClose} onSubmit={onSubmit} expenseCategories={expenseCategories} />;
+};
+
+const LogExpenseModalBody = ({ task, onClose, onSubmit, expenseCategories }) => {
+    const [description, setDescription] = useState('');
+    const [category, setCategory] = useState(expenseCategories[0] || 'Materials');
+    const [amount, setAmount] = useState('');
+    const [notes, setNotes] = useState('');
+    const [receiptName, setReceiptName] = useState('');
+
+    const submit = (e) => {
+        e.preventDefault();
+        if (!amount || Number(amount) <= 0) return;
+        onSubmit({
+            description,
+            category,
+            amount: Number(amount),
+            notes,
+            receiptUrl: receiptName ? `mock://receipts/${receiptName}` : '',
+        });
+    };
+
+    return (
+        <ModalShell isOpen onClose={onClose} label="Log Expense">
+            <div className="px-5 sm:px-6 py-4 sm:py-5 border-b border-zinc-200 dark:border-white/10 flex items-center justify-between bg-zinc-50/50 dark:bg-white/5">
+                <div className="flex items-center gap-3">
+                    <div className="p-2 rounded-xl bg-blue-500/10 text-blue-500">
+                        <Receipt size={18} />
+                    </div>
+                    <div>
+                        <h2 className="text-base font-bold text-zinc-900 dark:text-white">Log Expense</h2>
+                        <p className="text-[11px] text-zinc-500 mt-0.5">Task: <span className="font-semibold text-zinc-700 dark:text-zinc-300">{task.title}</span></p>
+                    </div>
+                </div>
+                <button onClick={onClose} className="p-2 rounded-lg bg-zinc-100 dark:bg-white/10 text-zinc-500 hover:text-red-500 transition-colors" aria-label="Close">
+                    <X size={16} />
+                </button>
+            </div>
+
+            <form onSubmit={submit} className="flex-1 overflow-y-auto px-5 sm:px-6 py-5 space-y-4 custom-scrollbar">
+                <Field label="Expense Description">
+                    <input
+                        type="text"
+                        value={description}
+                        onChange={(e) => setDescription(e.target.value)}
+                        placeholder="e.g. Roofing nails, shingles, sealant…"
+                        className={inputCls}
+                    />
+                </Field>
+
+                <Field label="Category">
+                    <select
+                        value={category}
+                        onChange={(e) => setCategory(e.target.value)}
+                        className={inputCls}
+                    >
+                        {expenseCategories.map(c => <option key={c} value={c}>{c}</option>)}
+                    </select>
+                </Field>
+
+                <Field label="Amount (USD)">
+                    <div className={`flex items-center rounded-xl bg-zinc-50 dark:bg-white/5 border border-zinc-200 dark:border-white/10 overflow-hidden focus-within:ring-2 focus-within:ring-blue-500/20 focus-within:border-blue-500/40 transition-colors`}>
+                        <span className="px-3 text-zinc-500 font-mono text-sm">$</span>
+                        <input
+                            type="number"
+                            min="0"
+                            step="0.01"
+                            value={amount}
+                            onChange={(e) => setAmount(e.target.value)}
+                            required
+                            placeholder="0.00"
+                            className="flex-1 bg-transparent border-0 outline-none py-2.5 text-sm pr-3"
+                        />
+                    </div>
+                </Field>
+
+                <Field label="Notes">
+                    <textarea
+                        value={notes}
+                        onChange={(e) => setNotes(e.target.value)}
+                        rows={2}
+                        placeholder="Optional context for this expense"
+                        className={inputCls}
+                    />
+                </Field>
+
+                <Field label="Receipt">
+                    <label className={`flex items-center justify-center gap-2 rounded-xl border border-dashed border-zinc-300 dark:border-white/15 bg-zinc-50 dark:bg-white/[0.03] py-4 cursor-pointer hover:border-blue-400 dark:hover:border-blue-500/40 transition-colors`}>
+                        <Upload size={14} className="text-zinc-500" />
+                        <span className="text-xs font-semibold text-zinc-600 dark:text-zinc-400">
+                            {receiptName ? receiptName : 'Tap to upload receipt (image or PDF)'}
+                        </span>
+                        <input
+                            type="file"
+                            accept="image/*,application/pdf"
+                            className="sr-only"
+                            onChange={(e) => setReceiptName(e.target.files?.[0]?.name || '')}
+                        />
+                    </label>
+                </Field>
+
+                <div className="rounded-xl bg-blue-50 dark:bg-blue-500/5 border border-blue-200 dark:border-blue-500/20 p-3 flex items-start gap-2">
+                    <AlertCircle size={14} className="text-blue-500 mt-0.5 shrink-0" />
+                    <p className="text-[11px] text-blue-700 dark:text-blue-300">
+                        Expenses are visible to the admin and tracked against this task.
+                    </p>
+                </div>
+            </form>
+
+            <div className="px-5 sm:px-6 py-4 border-t border-zinc-200 dark:border-white/10 bg-zinc-50 dark:bg-white/5 flex justify-end gap-2">
+                <button
+                    type="button"
+                    onClick={onClose}
+                    className="px-4 py-2 text-sm font-bold rounded-xl border border-zinc-200 dark:border-white/10 text-zinc-600 dark:text-zinc-400 hover:bg-zinc-100 dark:hover:bg-white/5 transition-colors"
+                >
+                    Cancel
+                </button>
+                <button
+                    type="button"
+                    onClick={submit}
+                    disabled={!amount || Number(amount) <= 0}
+                    className="px-4 py-2 text-sm font-bold rounded-xl text-white bg-blue-600 hover:bg-blue-500 shadow-lg shadow-blue-500/20 transition-colors disabled:opacity-40 disabled:cursor-not-allowed disabled:shadow-none"
+                >
+                    Log Expense
+                </button>
+            </div>
+        </ModalShell>
+    );
+};
+
+const LogFeeModal = ({ isOpen, task, onClose, onSubmit }) => {
+    const { feeTypes } = useMockStore();
+    if (!isOpen) return null;
+    return <LogFeeModalBody key={task.id} task={task} onClose={onClose} onSubmit={onSubmit} feeTypes={feeTypes} />;
+};
+
+const LogFeeModalBody = ({ task, onClose, onSubmit, feeTypes }) => {
+    const [description, setDescription] = useState('');
+    const [type, setType] = useState(feeTypes[0] || 'Labour / Service Fee');
+    const [amount, setAmount] = useState('');
+
+    const submit = (e) => {
+        e.preventDefault();
+        if (!amount || Number(amount) <= 0) return;
+        onSubmit({ description, type, amount: Number(amount) });
+    };
+
+    return (
+        <ModalShell isOpen onClose={onClose} label="Log My Fee">
+            <div className="px-5 sm:px-6 py-4 sm:py-5 border-b border-zinc-200 dark:border-white/10 flex items-center justify-between bg-zinc-50/50 dark:bg-white/5">
+                <div className="flex items-center gap-3">
+                    <div className="p-2 rounded-xl bg-emerald-500/10 text-emerald-500">
+                        <DollarSign size={18} />
+                    </div>
+                    <div>
+                        <h2 className="text-base font-bold text-zinc-900 dark:text-white">Log My Fee</h2>
+                        <p className="text-[11px] text-zinc-500 mt-0.5">Task: <span className="font-semibold text-zinc-700 dark:text-zinc-300">{task.title}</span></p>
+                    </div>
+                </div>
+                <button onClick={onClose} className="p-2 rounded-lg bg-zinc-100 dark:bg-white/10 text-zinc-500 hover:text-red-500 transition-colors" aria-label="Close">
+                    <X size={16} />
+                </button>
+            </div>
+
+            <form onSubmit={submit} className="flex-1 overflow-y-auto px-5 sm:px-6 py-5 space-y-4 custom-scrollbar">
+                <Field label="Fee Description">
+                    <input
+                        type="text"
+                        value={description}
+                        onChange={(e) => setDescription(e.target.value)}
+                        placeholder="e.g. Labour — Ridge Cap Replacement"
+                        className={inputCls}
+                    />
+                </Field>
+
+                <Field label="Fee Type">
+                    <select
+                        value={type}
+                        onChange={(e) => setType(e.target.value)}
+                        className={inputCls}
+                    >
+                        {feeTypes.map(t => <option key={t} value={t}>{t}</option>)}
+                    </select>
+                </Field>
+
+                <Field label="Amount (USD)">
+                    <div className="flex items-center rounded-xl bg-zinc-50 dark:bg-white/5 border border-zinc-200 dark:border-white/10 overflow-hidden focus-within:ring-2 focus-within:ring-emerald-500/20 focus-within:border-emerald-500/40 transition-colors">
+                        <span className="px-3 text-zinc-500 font-mono text-sm">$</span>
+                        <input
+                            type="number"
+                            min="0"
+                            step="0.01"
+                            value={amount}
+                            onChange={(e) => setAmount(e.target.value)}
+                            required
+                            placeholder="0.00"
+                            className="flex-1 bg-transparent border-0 outline-none py-2.5 text-sm pr-3"
+                        />
+                    </div>
+                </Field>
+            </form>
+
+            <div className="px-5 sm:px-6 py-4 border-t border-zinc-200 dark:border-white/10 bg-zinc-50 dark:bg-white/5 flex justify-end gap-2">
+                <button
+                    type="button"
+                    onClick={onClose}
+                    className="px-4 py-2 text-sm font-bold rounded-xl border border-zinc-200 dark:border-white/10 text-zinc-600 dark:text-zinc-400 hover:bg-zinc-100 dark:hover:bg-white/5 transition-colors"
+                >
+                    Cancel
+                </button>
+                <button
+                    type="button"
+                    onClick={submit}
+                    disabled={!amount || Number(amount) <= 0}
+                    className="px-4 py-2 text-sm font-bold rounded-xl text-white bg-emerald-600 hover:bg-emerald-500 shadow-lg shadow-emerald-500/20 transition-colors disabled:opacity-40 disabled:cursor-not-allowed disabled:shadow-none"
+                >
+                    Log Fee
+                </button>
+            </div>
+        </ModalShell>
+    );
+};
+
+const Field = ({ label, children }) => (
+    <div>
+        <label className="text-xs font-bold uppercase tracking-wider text-zinc-600 dark:text-zinc-300 mb-1.5 block">{label}</label>
+        {children}
+    </div>
+);
+
+const inputCls = 'w-full rounded-xl bg-zinc-50 dark:bg-white/5 border border-zinc-200 dark:border-white/10 px-3 py-2.5 text-sm text-zinc-900 dark:text-white outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500/40 transition-colors';
+
+const PhotoLightbox = ({ photos, index, onClose, onIndexChange }) => {
+    if (index === null || !photos[index]) return null;
+    const current = photos[index];
+    const hasPrev = index > 0;
+    const hasNext = index < photos.length - 1;
+
+    return createPortal(
+        <div className="fixed inset-0 z-[9999] flex items-center justify-center p-4" role="dialog" aria-modal="true" aria-label="Photo viewer">
+            <div className="absolute inset-0 bg-black/90 backdrop-blur-sm" onClick={onClose} />
+            <button
+                type="button"
+                onClick={onClose}
+                className="absolute top-4 right-4 z-10 p-2 rounded-lg bg-white/10 text-white hover:bg-white/20 transition-colors"
+                aria-label="Close lightbox"
+            >
+                <X size={20} />
+            </button>
+
+            {hasPrev && (
+                <button
+                    type="button"
+                    onClick={() => onIndexChange(index - 1)}
+                    className="absolute left-4 top-1/2 -translate-y-1/2 z-10 p-2 rounded-full bg-white/10 text-white hover:bg-white/20 transition-colors"
+                    aria-label="Previous photo"
+                >
+                    <ChevronRight size={22} className="rotate-180" />
+                </button>
+            )}
+            {hasNext && (
+                <button
+                    type="button"
+                    onClick={() => onIndexChange(index + 1)}
+                    className="absolute right-4 top-1/2 -translate-y-1/2 z-10 p-2 rounded-full bg-white/10 text-white hover:bg-white/20 transition-colors"
+                    aria-label="Next photo"
+                >
+                    <ChevronRight size={22} />
+                </button>
+            )}
+
+            <div className="relative max-w-5xl max-h-[88vh] w-full flex flex-col items-center">
+                <img
+                    src={current.url}
+                    alt={current.name || 'Photo'}
+                    className="max-h-[80vh] w-auto rounded-xl shadow-2xl object-contain"
+                />
+                {(current.annotation || current.name) && (
+                    <div className="mt-3 px-4 py-2 rounded-xl bg-white/10 backdrop-blur-sm text-white text-sm text-center max-w-2xl">
+                        {current.annotation && <p className="font-semibold">{current.annotation}</p>}
+                        {current.name && <p className="text-[11px] text-white/60 mt-1 font-mono">{current.name} · Photo {index + 1} of {photos.length}</p>}
+                    </div>
+                )}
+            </div>
+        </div>,
+        document.body,
+    );
+};
+
+// ===========================================================================
+// Section heading shared primitive
+// ===========================================================================
+const SectionHeading = ({icon: Icon, title, hint, inline }) => (
+    <div className={inline ? '' : 'mb-1'}>
+        <div className="flex items-center gap-2.5">
+            <div className="p-1.5 rounded-lg bg-blue-500/10 text-blue-500 shrink-0">
+                <Icon size={14} />
+            </div>
+            <h3 className="text-sm sm:text-base font-bold text-zinc-900 dark:text-white tracking-wide min-w-0">
+                {title}
+            </h3>
+        </div>
+        {hint && <p className="text-xs text-zinc-500 mt-1.5 sm:ml-9">{hint}</p>}
+    </div>
+);
+
+export default SubcontractorTaskDetailPage;