-
+
+
-
-
{task.name}
-
-
- {task.projectAddress}
+
+
{task.title}
+
+ {task.location}
+ {task.id}
-
+
-
Due: {task.dueDate}
-
- {task.status.replace('_', ' ')}
+
+ {overdue && }
+ Due: {task.dueDate}
+
+
+ {task.status}
- {task.status !== 'completed' && (
-
- )}
+
- )) : (
-
+ );
+ }) : (
+
)}
- {/* Earnings Widget */}
-
+ {/* Right column: Earnings + Notifications */}
+
Earnings Tracker
@@ -385,6 +412,12 @@ const SubContractorDashboard = () => {
+
+
myNotifications.forEach(n => !n.isRead && markNotificationRead(n.id))}
+ onNotificationClick={(n) => { if (!n.isRead) markNotificationRead(n.id); }}
+ />
diff --git a/src/pages/subcontractor/SubcontractorTaskDetailPage.jsx b/src/pages/subcontractor/SubcontractorTaskDetailPage.jsx
new file mode 100644
index 0000000..7bad063
--- /dev/null
+++ b/src/pages/subcontractor/SubcontractorTaskDetailPage.jsx
@@ -0,0 +1,1098 @@
+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,
+} 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 (
+
+
+ {status}
+
+ );
+};
+
+const PriorityBadge = ({ priority }) => {
+ const cfg = PRIORITY_STYLES[priority] || PRIORITY_STYLES.medium;
+ return (
+
+
+ {cfg.label} priority
+
+ );
+};
+
+const MetaItem = ({ icon: Icon, label, value, secondary, mono, highlight }) => (
+
+
+
+
+
+
{label}
+
{value || '—'}
+ {secondary && (
+
{secondary}
+ )}
+
+
+);
+
+// ---------------------------------------------------------------------------
+// Page
+// ---------------------------------------------------------------------------
+const SubcontractorTaskDetailPage = () => {
+ const { taskId } = useParams();
+ const navigate = useNavigate();
+ const { user } = useAuth();
+ const {
+ subcontractorTasks, subSelfStatuses,
+ setSubcontractorTaskStatus, addSubcontractorTaskMessage,
+ addSubcontractorTaskExpense, addSubcontractorTaskFee,
+ } = 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);
+
+ // 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);
+ };
+ window.addEventListener('keydown', handler);
+ return () => window.removeEventListener('keydown', handler);
+ }, [lightboxIndex]);
+
+ if (!task) {
+ return (
+
+
+
+
+
+
Task not found
+
It may have been removed or reassigned. Head back to your assignments to see the latest.
+
+
+
+ );
+ }
+
+ const overdue = isOverdue(task);
+ const closed = task.status === 'Completed' || task.status === 'Cancelled';
+
+ const handleStatusChange = (nextStatus, comment) => {
+ setSubcontractorTaskStatus(task.id, nextStatus, comment, {
+ 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 (
+
+ {/* Ambient bg — matches SubcontractorTasksPage */}
+
+
+
+ {/* Breadcrumb / back */}
+
+
+
+
+ {task.title}
+
+
+
+ {/* Header spans full width */}
+
setLogExpenseOpen(true)}
+ onLogFee={() => setLogFeeOpen(true)}
+ />
+
+ {/* Two-column shell below: main content + financials/notifications rail */}
+
+
+
+
+
+
+ setLightboxIndex(idx)}
+ />
+
+
+
+ setLogExpenseOpen(true)}
+ disabled={closed}
+ />
+ setLogFeeOpen(true)}
+ disabled={closed}
+ />
+
+
+
+ {/* Modals */}
+
setLogExpenseOpen(false)}
+ onSubmit={(fields) => {
+ addSubcontractorTaskExpense(task.id, fields);
+ setLogExpenseOpen(false);
+ }}
+ />
+ setLogFeeOpen(false)}
+ onSubmit={(fields) => {
+ addSubcontractorTaskFee(task.id, fields);
+ setLogFeeOpen(false);
+ }}
+ />
+ setLightboxIndex(null)}
+ onIndexChange={setLightboxIndex}
+ />
+
+ );
+};
+
+// ===========================================================================
+// Section 1 — Header / Task Details
+// ===========================================================================
+const TaskHeaderCard = ({ task, overdue, onLogExpense, onLogFee }) => {
+ const closed = task.status === 'Completed' || task.status === 'Cancelled';
+ return (
+
+ {/* Top row: ID + badges */}
+
+
{task.id}
+
+
+
+ {overdue && (
+
+ Overdue
+
+ )}
+
+
+ {task.title}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+// ===========================================================================
+// Section 4 — Status Management
+// ===========================================================================
+const StatusManagementCard = ({ task, statuses, disabled, onChange }) => {
+ const [comment, setComment] = useState('');
+ const [pendingStatus, setPendingStatus] = useState(null);
+
+ const handlePick = (s) => {
+ if (disabled) return;
+ if (s === task.status) return;
+ setPendingStatus(s);
+ };
+
+ const confirm = () => {
+ if (!pendingStatus) return;
+ onChange(pendingStatus, comment);
+ setComment('');
+ setPendingStatus(null);
+ };
+
+ const cancel = () => {
+ setPendingStatus(null);
+ setComment('');
+ };
+
+ return (
+
+
+
+
+ {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 (
+
+ );
+ })}
+
+
+ {pendingStatus && (
+
+
+ Changing status to {pendingStatus}. Add an optional comment for the admin.
+
+