feat(subtasks): owner table category/assigned-date columns, owner modal stage timeline + review gate, subcontractor picker stages

src/components/subcontractor/TaskViewModal.jsx

@@ -1,6 +1,8 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { createPortal } from 'react-dom';
-import { X, ClipboardList, MapPin, Calendar, User, Building2, Camera } from 'lucide-react';
+import { X, ClipboardList, MapPin, Calendar, User, Building2, Camera, Clock, CheckCircle, AlertTriangle } from 'lucide-react';
+import { useMockStore } from '../../data/mockStore';
+import { useAuth } from '../../context/AuthContext';
 
 const PRIORITY_STYLES = {
     low:    { label: 'Low',    cls: 'bg-zinc-200 text-zinc-700 dark:bg-zinc-700 dark:text-zinc-300' },
@@ -10,33 +12,111 @@ const PRIORITY_STYLES = {
 
 const STATUS_STYLES = {
     Assigned:              'bg-amber-100 text-amber-700 dark:bg-amber-500/20 dark:text-amber-400',
+    'Pre-Work Inspection': 'bg-purple-100 text-purple-700 dark:bg-purple-500/20 dark:text-purple-400',
     'In Progress':         'bg-blue-100 text-blue-700 dark:bg-blue-500/20 dark:text-blue-400',
     'On Hold':             'bg-slate-100 text-slate-600 dark:bg-slate-500/20 dark:text-slate-400',
+    'Post-Work Review':    'bg-orange-100 text-orange-700 dark:bg-orange-500/20 dark:text-orange-400',
     Completed:             'bg-emerald-100 text-emerald-700 dark:bg-emerald-500/20 dark:text-emerald-400',
+    'Rework Needed':       'bg-red-100 text-red-700 dark:bg-red-500/20 dark:text-red-400',
     Cancelled:             'bg-zinc-200 text-zinc-600 dark:bg-zinc-700 dark:text-zinc-300',
 };
 
+const STATUS_DOT = {
+    Assigned:              'bg-amber-500',
+    'Pre-Work Inspection': 'bg-purple-500',
+    'In Progress':         'bg-blue-500',
+    'On Hold':             'bg-slate-500',
+    'Post-Work Review':    'bg-orange-500',
+    Completed:             'bg-emerald-500',
+    'Rework Needed':       'bg-red-500',
+    Cancelled:             '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 TaskViewModal = ({ isOpen, onClose, task }) => {
+    const { user } = useAuth();
+    const { setSubcontractorTaskStatus } = useMockStore();
+
+    const [reviewNote, setReviewNote] = useState('');
+    const [reworkNote, setReworkNote] = useState('');
+    const [showReworkInput, setShowReworkInput] = useState(false);
+    const [submitting, setSubmitting] = useState(false);
+
     useEffect(() => {
         const handler = (e) => { if (e.key === 'Escape') onClose(); };
         if (isOpen) window.addEventListener('keydown', handler);
         return () => window.removeEventListener('keydown', handler);
     }, [isOpen, onClose]);
 
+    // Reset review state when task changes
+    useEffect(() => {
+        setReviewNote('');
+        setReworkNote('');
+        setShowReworkInput(false);
+        setSubmitting(false);
+    }, [task?.id]);
+
     if (!isOpen || !task) return null;
 
     const priority = PRIORITY_STYLES[task.priority] || PRIORITY_STYLES.medium;
+    const isOwnerOrAdmin = ['OWNER', 'ADMIN'].includes(user?.role);
+    const isPostWorkReview = task.status === 'Post-Work Review';
+
+    // Find the latest "Rework Needed" history entry for the callout
+    const statusHistory = task.statusHistory || [];
+    const reworkEntry = [...statusHistory]
+        .reverse()
+        .find(h => h.status === 'Rework Needed');
+    const showReworkCallout = task.status === 'Rework Needed' || !!reworkEntry;
+
+    const handleApprove = () => {
+        if (submitting) return;
+        setSubmitting(true);
+        const note = reviewNote.trim() || 'Approved — passed review';
+        setSubcontractorTaskStatus(
+            task.id,
+            'Completed',
+            note,
+            { id: user.id, name: user.name, role: user.role },
+        );
+        setSubmitting(false);
+        setReviewNote('');
+    };
+
+    const handleRework = () => {
+        if (!reworkNote.trim() || submitting) return;
+        setSubmitting(true);
+        setSubcontractorTaskStatus(
+            task.id,
+            'Rework Needed',
+            reworkNote.trim(),
+            { id: user.id, name: user.name, role: user.role },
+        );
+        setSubmitting(false);
+        setReworkNote('');
+        setShowReworkInput(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={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">
+                {/* 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">
                     <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">
@@ -84,6 +164,176 @@ const TaskViewModal = ({ isOpen, onClose, task }) => {
                         </div>
                     )}
 
+                    {/* Rework Needed callout — prominent amber banner */}
+                    {showReworkCallout && reworkEntry && (
+                        <div className="p-4 rounded-xl bg-amber-50 dark:bg-amber-500/10 border border-amber-300 dark:border-amber-500/30">
+                            <div className="flex items-center gap-2 mb-2">
+                                <AlertTriangle size={14} className="text-amber-600 dark:text-amber-400 shrink-0" />
+                                <span className="text-xs font-bold uppercase tracking-wider text-amber-700 dark:text-amber-400">
+                                    Rework Requested
+                                </span>
+                                {reworkEntry.actorName && (
+                                    <span className="text-[11px] text-amber-600 dark:text-amber-400 ml-auto font-mono">
+                                        by {reworkEntry.actorName}
+                                    </span>
+                                )}
+                            </div>
+                            {reworkEntry.comment && (
+                                <p className="text-sm text-amber-800 dark:text-amber-200 font-medium whitespace-pre-line">
+                                    {reworkEntry.comment}
+                                </p>
+                            )}
+                            {reworkEntry.photos && reworkEntry.photos.length > 0 && (
+                                <div className="grid grid-cols-3 sm:grid-cols-4 gap-2 mt-3">
+                                    {reworkEntry.photos.map((p) => (
+                                        <div key={p.id} className="aspect-square rounded-lg overflow-hidden border border-amber-200 dark:border-amber-500/30 bg-amber-100 dark:bg-amber-500/10">
+                                            <img src={p.url} alt={p.name || 'Rework photo'} className="w-full h-full object-cover" />
+                                        </div>
+                                    ))}
+                                </div>
+                            )}
+                            <div className="text-[11px] text-amber-500 font-mono mt-2">{formatDateTime(reworkEntry.at)}</div>
+                        </div>
+                    )}
+
+                    {/* Owner review gate — shown only when status is Post-Work Review AND user is OWNER/ADMIN */}
+                    {isPostWorkReview && isOwnerOrAdmin && (
+                        <div className="p-4 rounded-xl bg-orange-50 dark:bg-orange-500/10 border border-orange-300 dark:border-orange-500/30 space-y-4">
+                            <div className="flex items-center gap-2">
+                                <CheckCircle size={14} className="text-orange-600 dark:text-orange-400 shrink-0" />
+                                <h4 className="text-xs font-bold uppercase tracking-wider text-orange-700 dark:text-orange-400">
+                                    Owner Review Required
+                                </h4>
+                            </div>
+                            <p className="text-[12px] text-orange-700 dark:text-orange-300">
+                                This task is awaiting your review. Approve it to mark as Completed, or send it back for rework with a note explaining what needs to be fixed.
+                            </p>
+
+                            {/* Optional approval note */}
+                            <div>
+                                <label className="text-xs font-bold uppercase tracking-wider text-zinc-600 dark:text-zinc-300 mb-1.5 block">
+                                    Approval note <span className="text-zinc-400 font-normal normal-case">(optional)</span>
+                                </label>
+                                <textarea
+                                    value={reviewNote}
+                                    onChange={(e) => setReviewNote(e.target.value)}
+                                    rows={2}
+                                    disabled={submitting}
+                                    placeholder="e.g. Work looks good — passed inspection."
+                                    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-emerald-500/20 focus:border-emerald-500/40 transition-colors disabled:opacity-60"
+                                />
+                            </div>
+
+                            {/* Rework note — shown after clicking Send to Rework */}
+                            {showReworkInput && (
+                                <div>
+                                    <label className="text-xs font-bold uppercase tracking-wider text-red-600 dark:text-red-400 mb-1.5 flex items-center gap-1.5">
+                                        <span className={`w-1.5 h-1.5 rounded-full transition-colors ${reworkNote.trim() ? 'bg-emerald-500' : 'bg-red-500'}`} />
+                                        Rework note <span className={`text-[10px] font-bold uppercase tracking-wider transition-colors ${reworkNote.trim() ? 'text-emerald-600' : 'text-red-500'}`}>{reworkNote.trim() ? 'Ready' : 'Required'}</span>
+                                    </label>
+                                    <textarea
+                                        value={reworkNote}
+                                        onChange={(e) => setReworkNote(e.target.value)}
+                                        rows={3}
+                                        disabled={submitting}
+                                        placeholder="Describe exactly what needs to be fixed or redone…"
+                                        className="w-full text-sm rounded-lg bg-white dark:bg-zinc-900 border border-red-200 dark:border-red-500/30 px-3 py-2 outline-none focus:ring-2 focus:ring-red-500/20 focus:border-red-500/40 transition-colors disabled:opacity-60"
+                                        autoFocus
+                                    />
+                                </div>
+                            )}
+
+                            <div className="flex flex-wrap justify-end gap-2 pt-1">
+                                {showReworkInput && (
+                                    <button
+                                        type="button"
+                                        onClick={() => { setShowReworkInput(false); setReworkNote(''); }}
+                                        disabled={submitting}
+                                        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"
+                                    >
+                                        Cancel
+                                    </button>
+                                )}
+
+                                {!showReworkInput ? (
+                                    <button
+                                        type="button"
+                                        onClick={() => setShowReworkInput(true)}
+                                        disabled={submitting}
+                                        className="inline-flex items-center gap-2 px-4 py-1.5 rounded-lg text-xs font-bold uppercase tracking-wider text-white bg-red-600 hover:bg-red-500 shadow-lg shadow-red-500/20 transition-all active:scale-[0.97] disabled:opacity-40 disabled:cursor-not-allowed disabled:shadow-none"
+                                    >
+                                        <AlertTriangle size={12} /> Send to Rework
+                                    </button>
+                                ) : (
+                                    <button
+                                        type="button"
+                                        onClick={handleRework}
+                                        disabled={!reworkNote.trim() || submitting}
+                                        className="inline-flex items-center gap-2 px-4 py-1.5 rounded-lg text-xs font-bold uppercase tracking-wider text-white bg-red-600 hover:bg-red-500 shadow-lg shadow-red-500/20 transition-all active:scale-[0.97] disabled:opacity-40 disabled:cursor-not-allowed disabled:shadow-none"
+                                    >
+                                        <AlertTriangle size={12} /> Confirm Rework
+                                    </button>
+                                )}
+
+                                <button
+                                    type="button"
+                                    onClick={handleApprove}
+                                    disabled={submitting || showReworkInput}
+                                    className="inline-flex items-center gap-2 px-4 py-1.5 rounded-lg text-xs font-bold uppercase tracking-wider 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"
+                                >
+                                    <CheckCircle size={12} /> Approve — Completed
+                                </button>
+                            </div>
+                        </div>
+                    )}
+
+                    {/* Status History Timeline */}
+                    <div className="rounded-xl bg-zinc-50 dark:bg-white/[0.02] border border-zinc-200 dark:border-white/10 p-4">
+                        <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>
+                        {statusHistory.length === 0 ? (
+                            <p className="text-xs text-zinc-500 italic">No status changes recorded yet.</p>
+                        ) : (
+                            <ol className="space-y-3 max-h-72 overflow-y-auto pr-1 custom-scrollbar">
+                                {[...statusHistory].reverse().map((h) => {
+                                    const dotCls = STATUS_DOT[h.status] || 'bg-zinc-400';
+                                    return (
+                                        <li key={h.id} className="flex items-start gap-3">
+                                            <span className={`mt-1 w-2.5 h-2.5 rounded-full ${dotCls} shrink-0`} />
+                                            <div className="min-w-0 flex-1">
+                                                <div className="flex flex-wrap items-center gap-x-2 gap-y-1">
+                                                    <span className={`px-2.5 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-wide ${STATUS_STYLES[h.status] || STATUS_STYLES.Assigned}`}>
+                                                        {h.status}
+                                                    </span>
+                                                    <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>
+                                                    {h.actorRole && (
+                                                        <span className="text-[10px] uppercase tracking-wider text-zinc-500 font-bold">· {h.actorRole}</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 whitespace-pre-line">{h.comment}</p>
+                                                )}
+                                                {h.photos && h.photos.length > 0 && (
+                                                    <div className="grid grid-cols-3 sm:grid-cols-4 gap-2 mt-2">
+                                                        {h.photos.map((p) => (
+                                                            <div key={p.id} className="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 || 'Status photo'} className="w-full h-full object-cover" />
+                                                            </div>
+                                                        ))}
+                                                    </div>
+                                                )}
+                                            </div>
+                                        </li>
+                                    );
+                                })}
+                            </ol>
+                        )}
+                    </div>
+
                     {/* Photos */}
                     <div>
                         <h4 className="text-xs font-bold uppercase tracking-wider text-zinc-500 mb-2 flex items-center gap-1.5">

src/pages/owner/SubcontractorTasksPage.jsx

@@ -332,11 +332,13 @@ const SubcontractorTasksPage = () => {
                             <thead className="bg-zinc-50 dark:bg-[#18181b] border-b border-zinc-200 dark:border-white/10">
                                 <tr>
                                     <Th>Task</Th>
+                                    <Th>Task Category</Th>
                                     <Th>Subcontractor</Th>
                                     <Th>Location</Th>
                                     <Th>Due</Th>
                                     <Th>Priority</Th>
                                     <Th>Status</Th>
+                                    <Th>Assigned Date</Th>
                                     <Th>Created</Th>
                                     <Th align="right">Actions</Th>
                                 </tr>
@@ -344,7 +346,7 @@ const SubcontractorTasksPage = () => {
                             <tbody className="divide-y divide-zinc-100 dark:divide-white/5">
                                 {paginated.length === 0 ? (
                                     <tr>
-                                        <td colSpan={8}>
+                                        <td colSpan={10}>
                                             <EmptyState />
                                         </td>
                                     </tr>
@@ -482,6 +484,15 @@ const TaskRow = ({ task, onView, onEdit, onCancel, onReassign, openMenu, setOpen
                     <div className="text-[11px] text-zinc-500 font-mono mt-0.5">{task.id}</div>
                 </button>
             </td>
+            <td className="px-5 py-4 whitespace-nowrap">
+                {task.category ? (
+                    <span className="px-2 py-0.5 rounded-full text-xs font-semibold bg-violet-100 text-violet-700 dark:bg-violet-500/20 dark:text-violet-300">
+                        {task.category}
+                    </span>
+                ) : (
+                    <span className="text-zinc-400 text-xs">—</span>
+                )}
+            </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">
@@ -508,6 +519,7 @@ const TaskRow = ({ task, onView, onEdit, onCancel, onReassign, openMenu, setOpen
             </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.assignedDate)}</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">
@@ -584,12 +596,24 @@ const TaskCard = ({ task, onView, onEdit, onCancel, onReassign, canAssign }) =>
                     <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">
+                <div className="flex flex-wrap items-center gap-2 mb-2">
                     <PriorityBadge priority={task.priority} />
+                    {task.category && (
+                        <span className="px-2 py-0.5 rounded-full text-xs font-semibold bg-violet-100 text-violet-700 dark:bg-violet-500/20 dark:text-violet-300">
+                            {task.category}
+                        </span>
+                    )}
                     <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>
+                <div className="flex flex-wrap items-center gap-x-3 gap-y-1 text-[11px] text-zinc-500">
+                    {task.assignedDate && (
+                        <span className="flex items-center gap-1">
+                            <Clock size={11} /> Assigned {formatDate(task.assignedDate)}
+                        </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>

src/pages/subcontractor/SubcontractorTaskDetailPage.jsx

@@ -22,8 +22,11 @@ const PRIORITY_STYLES = {
 
 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'   },
+    'Pre-Work Inspection': { cls: 'bg-violet-100 text-violet-700 dark:bg-violet-500/20 dark:text-violet-400',   icon: AlertCircle,  dot: 'bg-violet-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'  },
+    'Post-Work Review':    { cls: 'bg-indigo-100 text-indigo-700 dark:bg-indigo-500/20 dark:text-indigo-400',   icon: Send,         dot: 'bg-indigo-500'  },
+    'Rework Needed':       { cls: 'bg-amber-100 text-amber-800 dark:bg-amber-500/20 dark:text-amber-300',       icon: AlertTriangle, dot: 'bg-amber-600'  },
     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'    },
 };
@@ -353,6 +356,13 @@ const STATUS_COPY = {
         photoHint: 'Site or arrival photo',
         accent: 'amber',
     },
+    'Pre-Work Inspection': {
+        title: 'Log pre-work site inspection',
+        hint: 'Record your site-walk before starting. Note existing conditions, scope clarifications, and attach inspection photos.',
+        notePlaceholder: 'e.g. Site walk done. Existing shingles in poor shape on north side — photographed. Ready to start.',
+        photoHint: 'Inspection / site-condition photos',
+        accent: 'violet',
+    },
     'In Progress': {
         title: 'Start work',
         hint: 'Add a brief note about what you are starting and attach any "before" photos if you have them.',
@@ -367,6 +377,13 @@ const STATUS_COPY = {
         photoHint: 'Supporting photo (e.g. rain, blocked access)',
         accent: 'orange',
     },
+    'Post-Work Review': {
+        title: 'Submit for owner review',
+        hint: 'Work is complete on your end — submit it to the owner for final review and sign-off. Attach "after" photos and a completion note.',
+        notePlaceholder: 'e.g. All work completed. Cleaned up site. Final photos attached — ready for owner inspection.',
+        photoHint: 'Completion / after photos (required for review)',
+        accent: 'indigo',
+    },
     Completed: {
         title: 'Mark as completed',
         hint: 'Add a final completion note and attach any photos of the finished work.',
@@ -378,8 +395,10 @@ const STATUS_COPY = {
 
 const ACCENT_BTN = {
     amber:   'bg-amber-600 hover:bg-amber-500 shadow-amber-500/20',
+    violet:  'bg-violet-600 hover:bg-violet-500 shadow-violet-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',
+    indigo:  'bg-indigo-600 hover:bg-indigo-500 shadow-indigo-500/20',
     emerald: 'bg-emerald-600 hover:bg-emerald-500 shadow-emerald-500/20',
 };
 
@@ -441,14 +460,17 @@ const StatusManagementCard = ({ task, statuses, disabled, onChange, onPostProgre
         }, 350);
     };
 
-    const canPostUpdates = ['Assigned', 'In Progress', 'On Hold', 'Completed'].includes(task.status);
+    const canPostUpdates = ['Assigned', 'Pre-Work Inspection', 'In Progress', 'On Hold', 'Post-Work Review', 'Rework Needed'].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 'Pre-Work Inspection': return 'bg-violet-600 hover:bg-violet-500 shadow-violet-500/20';
             case 'On Hold':            return 'bg-orange-600 hover:bg-orange-500 shadow-orange-500/20';
+            case 'Post-Work Review':   return 'bg-indigo-600 hover:bg-indigo-500 shadow-indigo-500/20';
+            case 'Rework Needed':      return 'bg-amber-700 hover:bg-amber-600 shadow-amber-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';
         }
@@ -456,7 +478,10 @@ const StatusManagementCard = ({ task, statuses, disabled, onChange, onPostProgre
     const progressPlaceholder = (() => {
         switch (task.status) {
             case 'Assigned':            return 'e.g. "Scheduled for Friday, reviewed site plan."';
+            case 'Pre-Work Inspection': return 'e.g. "Noted existing damage on east wall — photographed. Materials ordered."';
             case 'On Hold':             return 'e.g. "Still waiting on materials — supplier ETA Friday."';
+            case 'Post-Work Review':    return 'e.g. "All punch items cleared. Awaiting owner walk-through confirmation."';
+            case 'Rework Needed':       return 'e.g. "Addressing the rework items — additional materials sourced."';
             case 'Completed':           return 'e.g. "Follow-up walkthrough done, no issues noted."';
             default:                    return 'e.g. "First wall painting completed."';
         }
@@ -464,7 +489,10 @@ const StatusManagementCard = ({ task, statuses, disabled, onChange, onPostProgre
     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 'Pre-Work Inspection': return 'Log any additional observations from your site inspection — existing conditions, scope questions, or equipment notes.';
             case 'On Hold':             return 'Keep the admin posted while this task is paused — share why it is still on hold or what changed.';
+            case 'Post-Work Review':    return 'Post any follow-up notes while awaiting owner review — clarifications, additional photos, or punch-list responses.';
+            case 'Rework Needed':       return 'Share your progress addressing the rework — the owner can track your updates while you make corrections.';
             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.';
         }
@@ -474,6 +502,14 @@ const StatusManagementCard = ({ task, statuses, disabled, onChange, onPostProgre
         return [...(task.activities || [])].sort((a, b) => new Date(b.at) - new Date(a.at));
     }, [task.activities]);
 
+    // Latest rework feedback from owner — shown when status is 'Rework Needed'
+    const reworkFeedback = useMemo(() => {
+        if (task.status !== 'Rework Needed') return null;
+        const history = task.statusHistory || [];
+        // Find the most recent 'Rework Needed' entry (reverse iterate for latest-first)
+        return [...history].reverse().find(h => h.status === 'Rework Needed') || null;
+    }, [task.status, task.statusHistory]);
+
     return (
         <SpotlightCard className="p-5 sm:p-6">
             <SectionHeading
@@ -482,7 +518,45 @@ const StatusManagementCard = ({ task, statuses, disabled, onChange, onPostProgre
                 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">
+            {/* Rework callout — only shown when status is 'Rework Needed' */}
+            {reworkFeedback && (
+                <div className="mt-4 p-4 rounded-xl bg-amber-50 dark:bg-amber-500/10 border border-amber-300 dark:border-amber-500/40 space-y-2">
+                    <div className="flex items-center gap-2">
+                        <AlertTriangle size={14} className="text-amber-600 dark:text-amber-400 shrink-0" />
+                        <span className="text-xs font-bold uppercase tracking-wider text-amber-700 dark:text-amber-400">
+                            Rework Requested
+                        </span>
+                        {reworkFeedback.actorName && (
+                            <span className="text-[11px] text-amber-700/80 dark:text-amber-400/80 ml-auto font-semibold">
+                                by {reworkFeedback.actorName}
+                            </span>
+                        )}
+                    </div>
+                    {reworkFeedback.comment ? (
+                        <p className="text-sm text-amber-900 dark:text-amber-200 whitespace-pre-line">
+                            {reworkFeedback.comment}
+                        </p>
+                    ) : (
+                        <p className="text-sm italic text-amber-700/70 dark:text-amber-400/70">
+                            No specific feedback provided — contact the owner for details.
+                        </p>
+                    )}
+                    {reworkFeedback.photos && reworkFeedback.photos.length > 0 && (
+                        <div className="grid grid-cols-3 sm:grid-cols-4 gap-2 mt-2">
+                            {reworkFeedback.photos.map((p) => (
+                                <div key={p.id} className="aspect-square rounded-lg overflow-hidden border border-amber-200 dark:border-amber-500/30 bg-amber-100 dark:bg-amber-500/10">
+                                    <img src={p.url} alt={p.name || 'Rework photo'} className="w-full h-full object-cover" />
+                                </div>
+                            ))}
+                        </div>
+                    )}
+                    <p className="text-[11px] text-amber-700/70 dark:text-amber-400/60 pt-1">
+                        Address the feedback above, then set status to <strong>In Progress</strong> and later <strong>Post-Work Review</strong> to resubmit.
+                    </p>
+                </div>
+            )}
+
+            <div className="flex flex-wrap gap-2 sm:gap-3 mt-4">
                 {statuses.map(s => {
                     const cfg = STATUS_CONFIG[s] || STATUS_CONFIG.Assigned;
                     const Icon = cfg.icon;
@@ -494,7 +568,7 @@ const StatusManagementCard = ({ task, statuses, disabled, onChange, onPostProgre
                             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
+                            className={`group relative flex items-center justify-center gap-2 px-3 py-3 rounded-xl text-sm font-bold border transition-all flex-1 min-w-[calc(50%-0.375rem)] sm:min-w-[calc(33%-0.375rem)] md:min-w-0
                                 ${isCurrent
                                     ? 'border-blue-500 bg-blue-500/10 text-blue-600 dark:text-blue-400 shadow-lg shadow-blue-500/10'
                                     : isPending
@@ -504,7 +578,14 @@ const StatusManagementCard = ({ task, statuses, disabled, onChange, onPostProgre
                                 disabled:opacity-40 disabled:cursor-not-allowed`}
                         >
                             <Icon size={14} />
-                            <span>{s}</span>
+                            <span className="text-center leading-tight">
+                                {s}
+                                {s === 'Post-Work Review' && (
+                                    <span className="block text-[10px] font-normal normal-case opacity-70 leading-tight mt-0.5">
+                                        Submit for owner review
+                                    </span>
+                                )}
+                            </span>
                             {isCurrent && <span className="absolute top-1 right-1 w-2 h-2 rounded-full bg-blue-500 animate-pulse" />}
                         </button>
                     );