add subcontractor task assign/list for admin and owner feature
This commit is contained in:
Satyam Rastogi
+11
@@ -20,6 +20,7 @@ import DocumentManagement from './pages/owner/DocumentManagement';
|
|||||||
import OwnerProjectList from './pages/owner/OwnerProjectList';
|
import OwnerProjectList from './pages/owner/OwnerProjectList';
|
||||||
import OwnerProjectDetail from './pages/owner/OwnerProjectDetail';
|
import OwnerProjectDetail from './pages/owner/OwnerProjectDetail';
|
||||||
import OrgSettings from './pages/owner/OrgSettings';
|
import OrgSettings from './pages/owner/OrgSettings';
|
||||||
|
import SubcontractorTasksPage from './pages/owner/SubcontractorTasksPage';
|
||||||
import PlaceholderDashboard from './pages/PlaceholderDashboard';
|
import PlaceholderDashboard from './pages/PlaceholderDashboard';
|
||||||
import ProCanvas from './pages/ProCanvas';
|
import ProCanvas from './pages/ProCanvas';
|
||||||
import ProjectList from './pages/contractor/ProjectList';
|
import ProjectList from './pages/contractor/ProjectList';
|
||||||
@@ -219,6 +220,16 @@ function App() {
|
|||||||
<OrgSettings />
|
<OrgSettings />
|
||||||
</ProtectedRoute>
|
</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 */}
|
{/* Protected Admin Routes — Owner has full admin access */}
|
||||||
<Route
|
<Route
|
||||||
|
|||||||
@@ -5,7 +5,8 @@ import { useTheme } from '../context/ThemeContext';
|
|||||||
import {
|
import {
|
||||||
LayoutDashboard, Map, Calendar, LogOut, User, Home, MessageSquare,
|
LayoutDashboard, Map, Calendar, LogOut, User, Home, MessageSquare,
|
||||||
ChevronLeft, ChevronRight, Sun, Moon, Trophy, Users, Briefcase,
|
ChevronLeft, ChevronRight, Sun, Moon, Trophy, Users, Briefcase,
|
||||||
FileText, Menu, X, Calculator, PlusCircle, ClipboardList, Zap, LayoutGrid, Settings
|
FileText, Menu, X, Calculator, PlusCircle, ClipboardList, Zap, LayoutGrid, Settings,
|
||||||
|
HardHat
|
||||||
} from 'lucide-react';
|
} from 'lucide-react';
|
||||||
|
|
||||||
import PageTransition from './PageTransition';
|
import PageTransition from './PageTransition';
|
||||||
@@ -149,6 +150,7 @@ const Layout = () => {
|
|||||||
{ to: "/owner/estimates", icon: Calculator, label: "Estimates" },
|
{ to: "/owner/estimates", icon: Calculator, label: "Estimates" },
|
||||||
{ to: "/admin/schedule", icon: Calendar, label: "Team Schedule" },
|
{ to: "/admin/schedule", icon: Calendar, label: "Team Schedule" },
|
||||||
{ to: "/admin/leaderboard", icon: Trophy, label: "Leaderboard" },
|
{ to: "/admin/leaderboard", icon: Trophy, label: "Leaderboard" },
|
||||||
|
{ to: "/owner/subcontractor-tasks", icon: HardHat, label: "Subcontractor Tasks" },
|
||||||
{ to: "/owner/settings", icon: Settings, label: "Org Settings" },
|
{ to: "/owner/settings", icon: Settings, label: "Org Settings" },
|
||||||
...commonItems,
|
...commonItems,
|
||||||
];
|
];
|
||||||
@@ -167,6 +169,7 @@ const Layout = () => {
|
|||||||
label: <span><span className="text-[#fda913]">Pro</span>Canvas</span>
|
label: <span><span className="text-[#fda913]">Pro</span>Canvas</span>
|
||||||
},
|
},
|
||||||
{ to: "/admin/estimates", icon: Calculator, label: "Estimates" },
|
{ to: "/admin/estimates", icon: Calculator, label: "Estimates" },
|
||||||
|
{ to: "/admin/subcontractor-tasks", icon: HardHat, label: "Subcontractor Tasks" },
|
||||||
{ to: "/owner/settings", icon: Settings, label: "Org Settings" },
|
{ to: "/owner/settings", icon: Settings, label: "Org Settings" },
|
||||||
...commonItems,
|
...commonItems,
|
||||||
];
|
];
|
||||||
|
|||||||
@@ -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;
|
||||||
@@ -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;
|
||||||
@@ -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;
|
||||||
@@ -5000,6 +5000,176 @@ 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',
|
||||||
|
'Completed',
|
||||||
|
'Cancelled',
|
||||||
|
];
|
||||||
|
|
||||||
|
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 = [
|
||||||
|
{
|
||||||
|
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.',
|
||||||
|
dueDate: '2026-05-25',
|
||||||
|
priority: 'high',
|
||||||
|
status: 'Assigned',
|
||||||
|
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' },
|
||||||
|
],
|
||||||
|
createdAt: '2026-05-15T09:12:00Z',
|
||||||
|
updatedAt: '2026-05-15T09:12:00Z',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
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.',
|
||||||
|
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' },
|
||||||
|
],
|
||||||
|
createdAt: '2026-05-10T15:40:00Z',
|
||||||
|
updatedAt: '2026-05-12T08:20:00Z',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
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.',
|
||||||
|
dueDate: '2026-05-18',
|
||||||
|
priority: 'low',
|
||||||
|
status: 'Completed',
|
||||||
|
photos: [],
|
||||||
|
createdAt: '2026-05-05T11:00:00Z',
|
||||||
|
updatedAt: '2026-05-14T17:30:00Z',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const MOCK_NOTIFICATIONS = [
|
||||||
|
{
|
||||||
|
id: 'notif_001',
|
||||||
|
recipientUserId: 'sub_001',
|
||||||
|
recipientRole: 'SUBCONTRACTOR',
|
||||||
|
type: 'task_assigned',
|
||||||
|
message: 'You have been assigned a task by LynkedUp Pro Roofing',
|
||||||
|
taskId: 'sct_002',
|
||||||
|
fromCompanyId: 'lynkeduppro',
|
||||||
|
fromCompanyName: 'LynkedUp Pro Roofing',
|
||||||
|
isRead: false,
|
||||||
|
createdAt: '2026-05-10T15:40:00Z',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'notif_002',
|
||||||
|
recipientUserId: 'sub_002',
|
||||||
|
recipientRole: 'SUBCONTRACTOR',
|
||||||
|
type: 'task_assigned',
|
||||||
|
message: 'You have been assigned a task by LynkedUp Pro Roofing',
|
||||||
|
taskId: 'sct_001',
|
||||||
|
fromCompanyId: 'lynkeduppro',
|
||||||
|
fromCompanyName: 'LynkedUp Pro Roofing',
|
||||||
|
isRead: false,
|
||||||
|
createdAt: '2026-05-15T09:12:00Z',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
// --- CONTEXT SETUP ---
|
// --- CONTEXT SETUP ---
|
||||||
|
|
||||||
const MockStoreContext = createContext();
|
const MockStoreContext = createContext();
|
||||||
@@ -5028,6 +5198,11 @@ export const MockStoreProvider = ({ children }) => {
|
|||||||
const [kanbanColumns, setKanbanColumns] = useState(KANBAN_COLUMNS_INITIAL);
|
const [kanbanColumns, setKanbanColumns] = useState(KANBAN_COLUMNS_INITIAL);
|
||||||
const [kanbanLeads, setKanbanLeads] = useState(KANBAN_LEADS_INITIAL);
|
const [kanbanLeads, setKanbanLeads] = useState(KANBAN_LEADS_INITIAL);
|
||||||
|
|
||||||
|
// Subcontractor management (Feature 8.2)
|
||||||
|
const [subcontractors, setSubcontractors] = useState(MOCK_SUBCONTRACTORS);
|
||||||
|
const [subcontractorTasks, setSubcontractorTasks] = useState(MOCK_SUBCONTRACTOR_TASKS);
|
||||||
|
const [notifications, setNotifications] = useState(MOCK_NOTIFICATIONS);
|
||||||
|
|
||||||
// Commission Settings — Org defaults + per-user overrides
|
// Commission Settings — Org defaults + per-user overrides
|
||||||
const [orgCommissionDefaults, setOrgCommissionDefaults] = useState({
|
const [orgCommissionDefaults, setOrgCommissionDefaults] = useState({
|
||||||
type: 'percent_gross',
|
type: 'percent_gross',
|
||||||
@@ -5211,6 +5386,161 @@ export const MockStoreProvider = ({ children }) => {
|
|||||||
return true;
|
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 || '',
|
||||||
|
})),
|
||||||
|
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 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 (
|
return (
|
||||||
<MockStoreContext.Provider value={{
|
<MockStoreContext.Provider value={{
|
||||||
properties,
|
properties,
|
||||||
@@ -5432,6 +5762,30 @@ export const MockStoreProvider = ({ children }) => {
|
|||||||
resendOrgInvite: (memberId) => {
|
resendOrgInvite: (memberId) => {
|
||||||
toast.success('Invite resent successfully');
|
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,
|
||||||
|
addSubcontractorTask,
|
||||||
|
updateSubcontractorTask,
|
||||||
|
cancelSubcontractorTask,
|
||||||
|
reassignSubcontractorTask,
|
||||||
|
notifications,
|
||||||
|
addNotification,
|
||||||
|
markNotificationRead,
|
||||||
}}>
|
}}>
|
||||||
{children}
|
{children}
|
||||||
</MockStoreContext.Provider>
|
</MockStoreContext.Provider>
|
||||||
|
|||||||
@@ -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;
|
||||||
Reference in New Issue
Block a user