import { Head, router, useForm } from '@inertiajs/react'; import { CalendarClock, CheckCircle2, ChevronDown, ClipboardList, Plus, Save, UserCheck, } from 'lucide-react'; import { useEffect, useState } from 'react'; import { Field } from '@/components/crm/form-field'; import { KpiTile } from '@/components/crm/kpi-tile'; import { NativeSelect } from '@/components/crm/native-select'; import { EmptyState, PageHeader } from '@/components/crm/page-header'; import { PriorityBadge, StatusLabel } from '@/components/crm/status-badge'; import { FilterBar, FilterField, SearchInput, SegmentedControl, TableCard, } from '@/components/crm/toolbar'; import { Button } from '@/components/ui/button'; import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from '@/components/ui/dialog'; import { Input } from '@/components/ui/input'; import { formatDate } from '@/lib/format'; import { cn } from '@/lib/utils'; import { index as tasksIndex, store, update } from '@/routes/operations/tasks'; type Option = { value: string; label: string }; type StatusOption = Option & { color: string }; type TaskRow = { id: number; reference: string; title: string; description: string | null; job: { id: number; job_number: string; title: string } | null; customer: { id: number; name: string } | null; lead: { id: number; lead_number: string; name: string } | null; from_department: StatusOption; assigned_department: StatusOption; owner: { id: number; name: string } | null; status: StatusOption; priority: { value: string; label: string; color: string }; due_on: string | null; is_overdue: boolean; days_until_due: number | null; completion_notes: string | null; }; type Filters = { search: string | null; department: string | null; status: string | null; scope: string; }; export default function Tasks({ tasks, board, filters, options, stats, can, }: { tasks: TaskRow[]; board: Array<{ department: string; label: string; color: string; count: number; tasks: TaskRow[]; }>; filters: Filters; options: { departments: StatusOption[]; taskStatuses: StatusOption[]; priorities: Option[]; staff: Array<{ value: number; label: string }>; customers: Array<{ value: number; label: string }>; jobs: Array<{ value: number; label: string }>; }; stats: { open: number; overdue: number; due_today: number; completed_this_week: number; }; can: { manage: boolean }; }) { const [search, setSearch] = useState(filters.search ?? ''); const [showCreate, setShowCreate] = useState(false); const [completing, setCompleting] = useState(null); const [view, setView] = useState<'board' | 'list'>('board'); const [collapsedDepartments, setCollapsedDepartments] = useState< Record >({}); const toggleDepartment = (department: string): void => { setCollapsedDepartments((current) => ({ ...current, [department]: !current[department], })); }; useEffect(() => { setSearch(filters.search ?? ''); }, [filters.search]); const apply = (changes: Partial) => { router.get( tasksIndex().url, { ...filters, ...changes, search: search || null }, { preserveState: true, preserveScroll: true, replace: true }, ); }; return ( <>
Operations } title="Department handovers" description="Work passed between departments, with an owner and a date. A task always names the department it came from, so the person doing the work knows who is waiting." actions={ can.manage ? ( ) : undefined } />
0 ? 'danger' : 'slate'} href={tasksIndex({ query: { scope: 'overdue' } }).url} /> 0 ? 'warning' : 'slate'} />
{ event.preventDefault(); apply({}); }} > apply({ scope })} options={[ { value: 'open', label: 'Open' }, { value: 'mine', label: 'Mine' }, { value: 'overdue', label: 'Overdue' }, { value: 'done', label: 'Done' }, ]} /> } > apply({ department: event.target.value || null, }) } className="h-9 w-40" > {options.departments.map((department) => ( ))} apply({ status: event.target.value || null, }) } className="h-9 w-40" > {options.taskStatuses.map((status) => ( ))}
{view === 'board' ? (
{board.map((column) => (
{column.count}
{collapsedDepartments[column.department] ? (

{column.count === 0 ? 'Nothing waiting.' : `${column.count} hidden`}

) : (
{column.tasks.length === 0 ? (

Nothing waiting.

) : null} {column.tasks.map((task) => (

{task.title}

{task.reference} {task.job ? ` · ${task.job.job_number}` : task.customer ? ` · ${task.customer.name}` : ''}

From{' '} {task.from_department.label} {task.owner ? ` · ${task.owner.name}` : ' · unassigned'}

{task.due_on ? `Due ${formatDate(task.due_on)}` : 'No due date'} {can.manage && task.status.value !== 'done' ? ( ) : null}
))}
)}
))}
) : (
{tasks.length === 0 ? ( ) : null} {tasks.map((task) => (

{task.title}

{task.reference} ·{' '} {task.from_department.label} →{' '} {task.assigned_department.label} {task.owner ? ` · ${task.owner.name}` : ''} {task.job ? ` · ${task.job.job_number}` : ''}

{task.due_on ? formatDate(task.due_on) : 'No due date'} {task.status.label} {can.manage && task.status.value !== 'done' ? ( ) : null}
))}
)}
{can.manage ? ( <> setShowCreate(false)} /> {completing ? ( setCompleting(null)} /> ) : null} ) : null} ); } function TaskDialog({ open, options, onClose, }: { open: boolean; options: { departments: StatusOption[]; priorities: Option[]; staff: Array<{ value: number; label: string }>; customers: Array<{ value: number; label: string }>; jobs: Array<{ value: number; label: string }>; }; onClose: () => void; }) { const form = useForm({ title: '', description: '', job_id: '', customer_id: '', from_department: options.departments[0]?.value ?? 'sales', assigned_department: options.departments[1]?.value ?? 'operations', owner_id: '', priority: 'normal', due_on: '', }); const submit = () => { form.post(store().url, { preserveScroll: true, onSuccess: () => { form.reset(); onClose(); }, }); }; return ( !state && onClose()}> Hand work to a department Say what is needed, which install it is about, and when the asking department expects it back.
{ event.preventDefault(); submit(); }} className="grid gap-3 sm:grid-cols-2" > form.setData('title', event.target.value) } required /> form.setData( 'from_department', event.target.value, ) } > {options.departments.map((department) => ( ))} form.setData( 'assigned_department', event.target.value, ) } > {options.departments.map((department) => ( ))} form.setData('job_id', event.target.value) } > {options.jobs.map((job) => ( ))} form.setData('customer_id', event.target.value) } > {options.customers.map((customer) => ( ))} form.setData('owner_id', event.target.value) } > {options.staff.map((person) => ( ))} form.setData('priority', event.target.value) } > {options.priorities.map((priority) => ( ))} form.setData('due_on', event.target.value) } />