feat(d22): P2 — onboarding checklist per project + Projects (Onboarding) board
Per client-module in the Modules tab: a MilestoneChecklist (tick with date, + Add step), reloading in place. New Onboarding work page: Stats header + per-milestone board (done/total, pending badge, warn/ok tint) with click-through to the pending projects for each milestone (client links to Client 360). Nav + /projects route. typecheck + web build clean, web tests 4/4. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>feat/client-detail-redesign
Thomas Joise
4 days ago
parent
3c2e51ae6c
commit
c5480cf8cd
@ -0,0 +1,94 @@
|
|||||||
|
import { useState } from 'react'
|
||||||
|
import { Link } from 'react-router-dom'
|
||||||
|
import {
|
||||||
|
Badge, Button, DataTable, EmptyState, ErrorState, PageHeader, Skeleton, StatCard, Stats, Toolbar,
|
||||||
|
} from '@sims/ui'
|
||||||
|
import { getPendingProjects, getProjectBoard, type MilestoneBoardRow, type PendingProject } from '../api'
|
||||||
|
import { useData } from './Clients'
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Onboarding board (D22): per-milestone completion across every active project. Each
|
||||||
|
* row is one checklist step with its done/total and a pending-count badge — green when
|
||||||
|
* the whole book has cleared it, amber while anyone is still behind. Click a row (or
|
||||||
|
* "View pending") to drill into the projects still waiting on that step, each linking
|
||||||
|
* back to its client 360°. Per-project ticking lives on the client's Modules tab.
|
||||||
|
*/
|
||||||
|
export function Projects() {
|
||||||
|
const board = useData(getProjectBoard, [])
|
||||||
|
const [selected, setSelected] = useState<MilestoneBoardRow | undefined>()
|
||||||
|
const pending = useData<PendingProject[]>(
|
||||||
|
() => (selected !== undefined ? getPendingProjects(selected.key) : Promise.resolve([])),
|
||||||
|
[selected?.key],
|
||||||
|
)
|
||||||
|
|
||||||
|
const rows = board.data
|
||||||
|
const cleared = rows?.filter((r) => r.pending === 0 && r.total > 0).length ?? 0
|
||||||
|
const attention = rows?.filter((r) => r.pending > 0).length ?? 0
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="wf-page">
|
||||||
|
<PageHeader
|
||||||
|
title="Onboarding"
|
||||||
|
desc="Every onboarding step across all active projects — how many have cleared it and who is still pending. Click a step to see the stragglers."
|
||||||
|
/>
|
||||||
|
<Stats>
|
||||||
|
<StatCard label="Steps tracked" value={rows !== undefined ? String(rows.length) : '…'} />
|
||||||
|
<StatCard label="Fully cleared" value={rows !== undefined ? String(cleared) : '…'} hint="every project done" hintTone="ok" />
|
||||||
|
<StatCard label="Needs attention" value={rows !== undefined ? String(attention) : '…'} hint="someone still pending" hintTone={attention > 0 ? 'warn' : 'ok'} />
|
||||||
|
</Stats>
|
||||||
|
|
||||||
|
{board.error !== undefined && <ErrorState message={board.error} onRetry={board.reload} />}
|
||||||
|
{board.error !== undefined ? null
|
||||||
|
: rows === undefined ? <Skeleton rows={6} />
|
||||||
|
: rows.length === 0 ? <EmptyState>No active projects yet — assign a module to a client to start tracking onboarding.</EmptyState> : (
|
||||||
|
<DataTable
|
||||||
|
columns={[
|
||||||
|
{ key: 'step', label: 'Step' },
|
||||||
|
{ key: 'done', label: 'Done', numeric: true },
|
||||||
|
{ key: 'pending', label: 'Pending', numeric: true },
|
||||||
|
{ key: 'act', label: '' },
|
||||||
|
]}
|
||||||
|
rowTone={(i) => (rows[i]!.pending > 0 ? 'warn' : 'ok')}
|
||||||
|
onRowClick={(_row, i) => setSelected(rows[i]!)}
|
||||||
|
rows={rows.map((r) => ({
|
||||||
|
step: r.label,
|
||||||
|
done: `${r.done} / ${r.total}`,
|
||||||
|
pending: r.pending > 0 ? <Badge tone="warn">{r.pending}</Badge> : <Badge tone="ok">0</Badge>,
|
||||||
|
act: (
|
||||||
|
// The <tr> selects on click; stop the button from double-firing.
|
||||||
|
<span onClick={(e) => e.stopPropagation()}>
|
||||||
|
<Button onClick={() => setSelected(r)}>View pending</Button>
|
||||||
|
</span>
|
||||||
|
),
|
||||||
|
}))}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{selected !== undefined && (
|
||||||
|
<>
|
||||||
|
<Toolbar>
|
||||||
|
<h3 style={{ margin: 0 }}>Pending: {selected.label}</h3>
|
||||||
|
<span style={{ flex: 1 }} />
|
||||||
|
{pending.data !== undefined && <Badge tone={pending.data.length > 0 ? 'warn' : 'ok'}>{pending.data.length} pending</Badge>}
|
||||||
|
<Button onClick={() => setSelected(undefined)}>Close</Button>
|
||||||
|
</Toolbar>
|
||||||
|
{pending.error !== undefined && <ErrorState message={pending.error} onRetry={pending.reload} />}
|
||||||
|
{pending.error !== undefined ? null
|
||||||
|
: pending.data === undefined ? <Skeleton rows={4} />
|
||||||
|
: pending.data.length === 0 ? <EmptyState>Every active project has cleared “{selected.label}”.</EmptyState> : (
|
||||||
|
<DataTable
|
||||||
|
columns={[
|
||||||
|
{ key: 'client', label: 'Client' },
|
||||||
|
{ key: 'module', label: 'Module' },
|
||||||
|
]}
|
||||||
|
rows={pending.data.map((p) => ({
|
||||||
|
client: <Link to={`/clients/${p.clientId}`}>{p.clientName}</Link>,
|
||||||
|
module: <><span className="mono">{p.moduleCode}</span> · {p.moduleName}</>,
|
||||||
|
}))}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue