feat(d28): Module directory — every client on a module x its fields
New 'Module data' screen (Catalog): pick a module, see all active clients on it with that module's own field-spec values as columns — the whole book at once (all RTGS IPs, all CloudBackup buckets, all RecoverX portals), searchable, portal URLs clickable, each row links to the client. moduleDirectory(db,moduleId) returns fieldSpec + rows; secret VALUES never leave the server (shown as a lock), reveal stays on Client 360. Reuses the field-specs so a new module field appears here with zero code change. typecheck green. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>feat/client-detail-redesign
Thomas Joise
3 days ago
parent
343cc6795d
commit
3f974e9d3d
@ -0,0 +1,98 @@
|
|||||||
|
import { useMemo, useState } from 'react'
|
||||||
|
import { Link } from 'react-router-dom'
|
||||||
|
import {
|
||||||
|
Badge, DataTable, EmptyState, ErrorState, FilterChips, PageHeader, Skeleton, Toolbar,
|
||||||
|
} from '@sims/ui'
|
||||||
|
import { getModules, getModuleDirectory, type FieldDef, type ModuleDirectory as Dir } from '../api'
|
||||||
|
import { useData } from './Clients'
|
||||||
|
|
||||||
|
/** Render one field value: portal URLs become a direct link; blanks are muted. */
|
||||||
|
function fieldCell(f: FieldDef, value: string | undefined) {
|
||||||
|
if (f.type === 'secret') return <span style={{ opacity: 0.5 }}>🔒</span>
|
||||||
|
const v = (value ?? '').trim()
|
||||||
|
if (v === '') return <span style={{ opacity: 0.4 }}>—</span>
|
||||||
|
if (/^https?:\/\//i.test(v)) {
|
||||||
|
return <a href={v} target="_blank" rel="noopener noreferrer" title={v}>Open ↗</a>
|
||||||
|
}
|
||||||
|
if (f.type === 'boolean') return <Badge tone={v === 'true' ? 'green' : undefined}>{v === 'true' ? 'yes' : 'no'}</Badge>
|
||||||
|
return <span style={{ fontSize: 13 }}>{v}</span>
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Module directory (D28): pick a module, see every client on it with that module's own
|
||||||
|
* fields as columns — the whole book at once (all RTGS IPs, all CloudBackup buckets, …),
|
||||||
|
* searchable, each row linking to the client. Reuses the module field-specs, so a field
|
||||||
|
* added to a module shows up here with no code change. Secret values stay hidden (🔒);
|
||||||
|
* reveal happens on Client 360.
|
||||||
|
*/
|
||||||
|
export function ModuleDirectory() {
|
||||||
|
const modules = useData(getModules, [])
|
||||||
|
const [moduleId, setModuleId] = useState<string>('')
|
||||||
|
const [q, setQ] = useState('')
|
||||||
|
|
||||||
|
const active = (modules.data ?? []).filter((m) => m.active)
|
||||||
|
// Default to the first module once the catalog loads.
|
||||||
|
const current = moduleId !== '' ? moduleId : active[0]?.id ?? ''
|
||||||
|
const dir = useData<Dir | undefined>(
|
||||||
|
() => (current === '' ? Promise.resolve(undefined) : getModuleDirectory(current)),
|
||||||
|
[current],
|
||||||
|
)
|
||||||
|
|
||||||
|
const cols = useMemo(() => (dir.data?.fieldSpec ?? []), [dir.data])
|
||||||
|
const shown = useMemo(() => {
|
||||||
|
const rows = dir.data?.rows ?? []
|
||||||
|
const needle = q.trim().toLowerCase()
|
||||||
|
if (needle === '') return rows
|
||||||
|
return rows.filter((r) =>
|
||||||
|
`${r.clientCode} ${r.clientName} ${r.provider ?? ''} ${r.username ?? ''} ${Object.values(r.fieldValues).join(' ')}`
|
||||||
|
.toLowerCase().includes(needle))
|
||||||
|
}, [dir.data, q])
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="wf-page">
|
||||||
|
<PageHeader
|
||||||
|
title="Module data"
|
||||||
|
desc="Every client on a module with its service details side by side — pick a module, scan the whole book, jump to any client."
|
||||||
|
/>
|
||||||
|
<Toolbar>
|
||||||
|
{modules.data === undefined ? <Skeleton rows={1} /> : (
|
||||||
|
<FilterChips
|
||||||
|
chips={active.map((m) => ({ key: m.id, label: m.code }))}
|
||||||
|
active={current}
|
||||||
|
onChange={(k) => { setModuleId(k); setQ('') }}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</Toolbar>
|
||||||
|
<Toolbar>
|
||||||
|
<input
|
||||||
|
className="wf" style={{ maxWidth: 280 }} placeholder="Search client / field value…"
|
||||||
|
aria-label="Search module data"
|
||||||
|
value={q} onChange={(e) => setQ(e.target.value)}
|
||||||
|
/>
|
||||||
|
<span style={{ flex: 1 }} />
|
||||||
|
{dir.data !== undefined && <Badge>{shown.length} of {dir.data.total}</Badge>}
|
||||||
|
</Toolbar>
|
||||||
|
{dir.error !== undefined ? <ErrorState message={dir.error} onRetry={dir.reload} />
|
||||||
|
: dir.data === undefined ? <Skeleton rows={6} />
|
||||||
|
: dir.data.rows.length === 0 ? <EmptyState>No clients are on {dir.data.name} yet.</EmptyState>
|
||||||
|
: shown.length === 0 ? <EmptyState>No {dir.data.name} clients match “{q}”.</EmptyState> : (
|
||||||
|
<div style={{ overflowX: 'auto' }}>
|
||||||
|
<DataTable
|
||||||
|
columns={[
|
||||||
|
{ key: 'client', label: 'Client' },
|
||||||
|
...cols.map((f) => ({ key: f.key, label: f.label })),
|
||||||
|
{ key: 'login', label: 'Login' },
|
||||||
|
]}
|
||||||
|
rows={shown.map((r) => ({
|
||||||
|
client: <Link to={`/clients/${r.clientId}?tab=modules`}>{r.clientCode} · {r.clientName}</Link>,
|
||||||
|
...Object.fromEntries(cols.map((f) => [f.key, fieldCell(f, r.fieldValues[f.key])])),
|
||||||
|
login: r.username !== null && r.username !== ''
|
||||||
|
? <span className="mono" style={{ fontSize: 12 }}>{r.username}{r.hasPassword ? ' 🔑' : ''}</span>
|
||||||
|
: <span style={{ opacity: 0.4 }}>—</span>,
|
||||||
|
}))}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue