add subcontractor task assign/list for admin and owner feature
This commit is contained in:
Satyam Rastogi
@@ -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