import { Head, Link } from '@inertiajs/react'; import { AlertTriangle, ArrowRight, CalendarClock, CheckCircle2, ClipboardCheck, DollarSign, History, Layers, PlugZap, Plus, ShieldAlert, Sun, Workflow, } from 'lucide-react'; import { ActivityTimeline } from '@/components/crm/timeline'; import { JobList } from '@/components/crm/job-list'; import { KpiTile } from '@/components/crm/kpi-tile'; import { PipelineBoard } from '@/components/crm/pipeline-board'; import { Callout, EmptyState, PageHeader, SectionCard, } from '@/components/crm/page-header'; import { RuleFlag } from '@/components/crm/status-badge'; import { Button } from '@/components/ui/button'; import { usePermissions } from '@/hooks/use-permissions'; import { useRelease } from '@/hooks/use-release'; import { formatCompactCurrency, formatDuration, formatLongDate, formatNumber, } from '@/lib/format'; import { cn } from '@/lib/utils'; import { dashboard } from '@/routes'; import { create as jobsCreate, index as jobsIndex, show as jobShow, } from '@/routes/jobs'; import type { AttentionItem, DashboardProps } from '@/types'; export default function Dashboard({ metrics, pipeline, byState, attention, trends, deltas, upcomingInstallations, awaitingInspection, awaitingGridCloseout, myJobs, recentActivity, stalledThresholdDays, can, }: DashboardProps) { const { can: canDo } = usePermissions(); // The dashboard is built from jobs, which are a released part like any // other. When they are off, the page says so rather than counting records // it is not showing anywhere else. const { enabled } = useRelease(); const jobsReleased = enabled('jobs'); const activePipeline = pipeline.filter( (stage) => stage.value !== 'completed' && stage.value !== 'cancelled', ); const jobsUrl = (params: Record) => jobsIndex({ query: params }).url; return ( <> {formatLongDate(new Date().toISOString())} · {formatNumber(metrics.activeJobs)} active jobs across {byState.length} states ) : ( <> Dashboard ) } title="Operations dashboard" description="Where every installation stands, what it is waiting on, and what needs a person today." actions={ jobsReleased ? ( <> {canDo('jobs.create') ? ( ) : null} ) : null } /> {jobsReleased ? ( <> {/* The tiles are grouped by shape rather than poured into one long row. The two figures that carry an eight week trend sit together, and the three that carry only a number sit together, so the cards in a row come out the same height because their contents match — rather than a short tile stretching into a mostly empty box to keep up with a tall neighbour. */}
{/* Three columns only when there are three tiles to fill them: on a role without the financials permission the pipeline value tile is dropped, and a third column would otherwise be left empty. */}
{can.viewFinancials ? ( ) : null} row.requiresIndependentInspection) ? 'Includes Victorian independent inspections' : 'Electrical inspection stage' } icon={ClipboardCheck} tone={metrics.awaitingInspection > 0 ? 'warning' : 'slate'} href={jobsUrl({ status: 'inspection_pending' })} /> 0 ? 'info' : 'slate'} href={jobsUrl({ status: 'grid_connection' })} />
job.reason_type === 'blocked') ? 'danger' : 'warning'} actions={ } > {attention.length === 0 ? ( ) : (
    {attention.map((job) => ( ))}
)} jobsUrl({ status: stage.value })} /> {/* A band of two panels, each holding a list that grows as the business does. They are given one height and the lists scroll inside them, so a quiet week in the install diary never leaves a tall empty column beside a long inspection queue. */}
View all } > {upcomingInstallations.length === 0 ? ( ) : ( jobShow(id).url} /> )} View all } > {byState.some((row) => row.requiresIndependentInspection) ? ( Solar PV is prescribed electrical work there, so a Licensed Electrical Inspector must pass the system and issue a Certificate of Electrical Safety before it can be energised. ) : null} {awaitingInspection.length === 0 ? ( ) : ( jobShow(id).url} /> )}
{byState.length === 0 ? ( ) : (
    {byState.map((row) => { const maxJobs = Math.max( ...byState.map((candidate) => candidate.jobsCount), 1, ); return (
  • {row.label} {row.awaitingInspectionCount > 0 ? ( { row.awaitingInspectionCount }{' '} awaiting ) : null}
    {formatNumber(row.jobsCount)} jobs
    {row.requiresIndependentInspection ? ( Independent inspection ) : null} {row.requiresNoticeOfCompletion ? ( Notice of Completion for STCs ) : null} {row.rebateProgram ? ( {row.rebateProgram} ) : null} {!row.requiresIndependentInspection && !row.requiresNoticeOfCompletion && !row.rebateProgram ? ( Standard grid pre-approval and electrical certificate ) : null}
    • ); })}
)} jobShow(id).url} />
{awaitingGridCloseout.length === 0 ? ( ) : ( jobShow(id).url} /> )} {myJobs.length > 0 ? ( jobShow(id).url} /> ) : null}
) : (

When jobs are switched on, this dashboard fills in with the pipeline, the install diary and the work that needs a person today. Nothing has been lost in the meantime: the records are waiting behind the release switch in Settings, and switching it on puts them back exactly as they were.

)} ); } function AttentionRow({ job, href, }: { job: AttentionItem; href: string; }) { return (
  • {job.reason_type === 'blocked' ? ( ) : ( )}
    {job.job_number} {job.customer?.name ?? 'No customer'} {job.status.label}

    {job.reason}

    {job.site ? (

    {job.site.address} {job.site.distribution_network ? ` · ${job.site.distribution_network}` : ''}

    ) : null}
    {job.status.waiting_on} {formatDuration(job.days_in_status)}
    • ); } Dashboard.layout = { breadcrumbs: [ { title: 'Dashboard', href: dashboard(), }, ], };