feat(part-models): detail page with fleet insights

Adds /part-models/:id mirroring host/part detail pattern: KPIs for units, spend, avg price, failure counts, and FMs implicating the model, a state-breakdown bar chart, and the parts-of-this-model table. New GET /part-models/:id/insights aggregates via part.groupBy + aggregate and repair/fm counts. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
2026-04-17 14:51:39 -04:00
parent 13e3444258
commit c6fb839005
13 changed files with 738 additions and 27 deletions
@@ -13,6 +13,7 @@ import PartDetail from './pages/PartDetail.js';
 import Locations from './pages/Locations.js';
 import Manufacturers from './pages/Manufacturers.js';
 import PartModels from './pages/PartModels.js';
+import PartModelDetail from './pages/PartModelDetail.js';
 import Fms from './pages/Fms.js';
 import FmDetail from './pages/FmDetail.js';
 import Repairs from './pages/Repairs.js';
@@ -60,6 +61,7 @@ export default function App() {
                    <Route path="/locations" element={<Locations />} />
                    <Route path="/manufacturers" element={<Manufacturers />} />
                    <Route path="/part-models" element={<PartModels />} />
+                    <Route path="/part-models/:id" element={<PartModelDetail />} />
                    <Route path="/fms" element={<Fms />} />
                    <Route path="/fms/:id" element={<FmDetail />} />
                    <Route path="/repairs" element={<Repairs />} />
@@ -0,0 +1,21 @@
+import { Card, CardContent } from '@vector/ui';
+
+interface StatCardProps {
+  label: string;
+  value: string;
+  sub?: string;
+}
+
+export function StatCard({ label, value, sub }: StatCardProps) {
+  return (
+    <Card>
+      <CardContent className="p-4">
+        <div className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
+          {label}
+        </div>
+        <div className="truncate text-2xl font-semibold tracking-tight">{value}</div>
+        {sub && <div className="mt-0.5 text-xs text-muted-foreground">{sub}</div>}
+      </CardContent>
+    </Card>
+  );
+}
@@ -1,5 +1,6 @@
 import type {
  CreatePartModelRequest,
+  PartModelInsights,
  UpdatePartModelRequest,
 } from '@vector/shared';
 import { api } from './client.js';
@@ -40,3 +41,8 @@ export async function updatePartModel(
 export async function deletePartModel(id: string): Promise<void> {
  await api.delete(`/part-models/${id}`);
 }
+
+export async function getPartModelInsights(id: string): Promise<PartModelInsights> {
+  const res = await api.get<PartModelInsights>(`/part-models/${id}/insights`);
+  return res.data;
+}
@@ -15,6 +15,7 @@ export type PartListFilters = {
  state?: string;
  manufacturerId?: string;
  categoryId?: string;
+  partModelId?: string;
  binId?: string;
  tagId?: string;
  eolOnly?: boolean;
@@ -73,6 +73,7 @@ export const queryKeys = {
    list: (filters?: Record<string, unknown>) =>
      [...queryKeys.partModels.all, 'list', filters ?? {}] as const,
    detail: (id: string) => [...queryKeys.partModels.all, 'detail', id] as const,
+    insights: (id: string) => [...queryKeys.partModels.all, 'insights', id] as const,
  },
  tags: {
    all: ['tags'] as const,
@@ -0,0 +1,413 @@
+import { useMemo, useState } from 'react';
+import { Link, useNavigate, useParams } from 'react-router-dom';
+import type { ColumnDef } from '@tanstack/react-table';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { ArrowLeft, Edit, Trash2 } from 'lucide-react';
+import { Bar, BarChart, Cell, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
+import { toast } from 'sonner';
+import type { PartState } from '@vector/shared';
+import {
+  Button,
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  Separator,
+  Skeleton,
+} from '@vector/ui';
+import { deletePartModel, getPartModel, getPartModelInsights } from '../lib/api/part-models.js';
+import { listParts } from '../lib/api/parts.js';
+import { ApiRequestError } from '../lib/api/client.js';
+import { queryKeys } from '../lib/queryKeys.js';
+import { useAuth } from '../contexts/AuthContext.js';
+import { DataTable } from '../components/data-table/DataTable.js';
+import { PartStateBadge } from '../components/parts/PartStateBadge.js';
+import { PartModelFormDialog } from '../components/part-models/PartModelFormDialog.js';
+import { ConfirmDialog } from '../components/ConfirmDialog.js';
+import { StatCard } from '../components/StatCard.js';
+import type { Part } from '../lib/api/types.js';
+
+const STATE_LABELS: Record<PartState, string> = {
+  SPARE: 'Spare',
+  DEPLOYED: 'Deployed',
+  BROKEN: 'Broken',
+  PENDING_DESTRUCTION: 'Pending destruction',
+  PENDING_DROP_IN_CUSTODY: 'In custody',
+  PENDING_DESTRUCTION_IN_CUSTODY: 'In custody (destroy)',
+  PENDING_REPAIR: 'Held for repair',
+};
+
+const STATE_FILL: Record<PartState, string> = {
+  SPARE: 'hsl(217 91% 60%)',
+  DEPLOYED: 'hsl(142 71% 45%)',
+  BROKEN: 'hsl(0 84% 60%)',
+  PENDING_DESTRUCTION: 'hsl(38 92% 50%)',
+  PENDING_DROP_IN_CUSTODY: 'hsl(262 83% 58%)',
+  PENDING_DESTRUCTION_IN_CUSTODY: 'hsl(340 82% 52%)',
+  PENDING_REPAIR: 'hsl(197 80% 50%)',
+};
+
+function currency(dollars: number): string {
+  return dollars.toLocaleString(undefined, { style: 'currency', currency: 'USD' });
+}
+
+function DetailRow({ label, value }: { label: string; value: React.ReactNode }) {
+  return (
+    <div className="grid grid-cols-[10rem_1fr] gap-2 text-sm">
+      <dt className="text-muted-foreground">{label}</dt>
+      <dd className="text-foreground">{value}</dd>
+    </div>
+  );
+}
+
+export default function PartModelDetail() {
+  const { id } = useParams<{ id: string }>();
+  const navigate = useNavigate();
+  const queryClient = useQueryClient();
+  const { user } = useAuth();
+  const isAdmin = user?.role === 'ADMIN';
+
+  const [editOpen, setEditOpen] = useState(false);
+  const [confirmDelete, setConfirmDelete] = useState(false);
+
+  const modelQuery = useQuery({
+    queryKey: queryKeys.partModels.detail(id!),
+    queryFn: () => getPartModel(id!),
+    enabled: Boolean(id),
+  });
+
+  const insightsQuery = useQuery({
+    queryKey: queryKeys.partModels.insights(id!),
+    queryFn: () => getPartModelInsights(id!),
+    enabled: Boolean(id),
+  });
+
+  const deleteMutation = useMutation({
+    mutationFn: () => deletePartModel(id!),
+    onSuccess: () => {
+      toast.success('Part model deleted');
+      queryClient.invalidateQueries({ queryKey: queryKeys.partModels.all });
+      navigate('/part-models', { replace: true });
+    },
+    onError: (err) => {
+      toast.error(err instanceof ApiRequestError ? err.body.message : 'Delete failed');
+    },
+  });
+
+  const partColumns = useMemo<ColumnDef<Part>[]>(
+    () => [
+      {
+        accessorKey: 'serialNumber',
+        header: 'Serial',
+        cell: ({ row }) => (
+          <Link to={`/parts/${row.original.id}`} className="font-mono text-xs hover:underline">
+            {row.original.serialNumber}
+          </Link>
+        ),
+      },
+      {
+        accessorKey: 'state',
+        header: 'State',
+        cell: ({ row }) => <PartStateBadge state={row.original.state} />,
+      },
+      {
+        id: 'location',
+        header: 'Location',
+        cell: ({ row }) => {
+          const p = row.original;
+          if (p.host) {
+            return (
+              <span className="font-mono text-xs">
+                {p.host.assetId} / {p.host.name}
+              </span>
+            );
+          }
+          if (p.custodian) {
+            return <span className="text-xs">Custody: {p.custodian.username}</span>;
+          }
+          if (p.bin?.fullPath) {
+            return <span className="font-mono text-xs">{p.bin.fullPath}</span>;
+          }
+          return <span className="text-xs text-muted-foreground italic">Unassigned</span>;
+        },
+      },
+      {
+        accessorKey: 'price',
+        header: 'Price',
+        cell: ({ row }) =>
+          row.original.price != null ? (
+            <span className="tabular-nums">{currency(row.original.price)}</span>
+          ) : (
+            <span className="text-muted-foreground">—</span>
+          ),
+      },
+    ],
+    [],
+  );
+
+  if (modelQuery.isPending) {
+    return (
+      <div className="space-y-4">
+        <Skeleton className="h-8 w-64" />
+        <Skeleton className="h-24 w-full" />
+        <Skeleton className="h-48 w-full" />
+      </div>
+    );
+  }
+
+  if (modelQuery.isError || !modelQuery.data) {
+    const msg =
+      modelQuery.error instanceof ApiRequestError
+        ? modelQuery.error.body.message
+        : 'Part model not found.';
+    return (
+      <Card>
+        <CardHeader>
+          <CardTitle>Part model unavailable</CardTitle>
+          <CardDescription>{msg}</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <Button variant="outline" onClick={() => navigate('/part-models')}>
+            <ArrowLeft className="h-4 w-4" />
+            Back to part models
+          </Button>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  const model = modelQuery.data;
+  const insights = insightsQuery.data;
+  const eolDate = model.eolDate ? new Date(model.eolDate) : null;
+  const pastEol = eolDate ? eolDate.getTime() <= Date.now() : false;
+
+  const failureRate =
+    insights && insights.totalParts > 0
+      ? Math.round((insights.failures.repairs / insights.totalParts) * 100)
+      : null;
+
+  const chartData =
+    insights?.byState.map((s) => ({
+      name: STATE_LABELS[s.state],
+      state: s.state,
+      count: s.count,
+    })) ?? [];
+
+  return (
+    <div className="space-y-5">
+      <div className="flex items-center justify-between gap-3">
+        <div className="flex items-center gap-3">
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={() => navigate('/part-models')}
+            aria-label="Back"
+          >
+            <ArrowLeft className="h-4 w-4" />
+          </Button>
+          <div>
+            <h1 className="font-mono text-lg font-semibold tracking-tight">{model.mpn}</h1>
+            <p className="text-xs text-muted-foreground">
+              {model.manufacturer?.name ?? '—'}
+              {' · '}
+              {model.category?.name ?? 'Uncategorized'}
+              {eolDate && (
+                <>
+                  {' · EOL '}
+                  <span className={pastEol ? 'text-warning' : ''}>
+                    {eolDate.toLocaleDateString()}
+                  </span>
+                </>
+              )}
+            </p>
+          </div>
+        </div>
+        <div className="flex items-center gap-2">
+          {isAdmin && (
+            <Button variant="outline" size="sm" onClick={() => setEditOpen(true)}>
+              <Edit className="h-3.5 w-3.5" />
+              Edit
+            </Button>
+          )}
+          {isAdmin && (
+            <Button
+              variant="outline"
+              size="sm"
+              className="text-destructive hover:text-destructive"
+              onClick={() => setConfirmDelete(true)}
+            >
+              <Trash2 className="h-3.5 w-3.5" />
+              Delete
+            </Button>
+          )}
+        </div>
+      </div>
+
+      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-5">
+        {insightsQuery.isPending || !insights ? (
+          Array.from({ length: 5 }).map((_, i) => <Skeleton key={i} className="h-20" />)
+        ) : (
+          <>
+            <StatCard label="Units" value={insights.totalParts.toLocaleString()} />
+            <StatCard label="Total spent" value={currency(insights.priceStats.total)} />
+            <StatCard
+              label="Avg price"
+              value={
+                insights.priceStats.countWithPrice > 0
+                  ? currency(insights.priceStats.average)
+                  : '—'
+              }
+              sub={
+                insights.priceStats.countWithPrice > 0
+                  ? `${insights.priceStats.countWithPrice} priced`
+                  : 'No priced units'
+              }
+            />
+            <StatCard
+              label="Failures"
+              value={insights.failures.repairs.toLocaleString()}
+              sub={
+                failureRate != null
+                  ? `${failureRate}% of units · ${insights.failures.distinctFailedParts} distinct`
+                  : undefined
+              }
+            />
+            <StatCard
+              label="FMs implicated"
+              value={insights.failures.fmsImplicating.toLocaleString()}
+            />
+          </>
+        )}
+      </div>
+
+      <div className="grid gap-4 md:grid-cols-[1fr_1.2fr]">
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-base">Summary</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <dl className="space-y-2">
+              <DetailRow label="Manufacturer" value={model.manufacturer?.name ?? '—'} />
+              <DetailRow
+                label="MPN"
+                value={<span className="font-mono text-xs">{model.mpn}</span>}
+              />
+              <DetailRow
+                label="Category"
+                value={
+                  model.category?.name ?? (
+                    <span className="text-muted-foreground italic">Uncategorized</span>
+                  )
+                }
+              />
+              <DetailRow
+                label="EOL"
+                value={
+                  eolDate ? (
+                    <span className={pastEol ? 'text-warning' : ''}>
+                      {eolDate.toLocaleDateString()}
+                    </span>
+                  ) : (
+                    <span className="text-muted-foreground">—</span>
+                  )
+                }
+              />
+              <DetailRow label="Destroy on fail" value={model.destroyOnFail ? 'Yes' : 'No'} />
+              <Separator className="my-2" />
+              <DetailRow label="Created" value={new Date(model.createdAt).toLocaleString()} />
+              <DetailRow label="Updated" value={new Date(model.updatedAt).toLocaleString()} />
+            </dl>
+            {model.notes && (
+              <>
+                <Separator className="my-3" />
+                <div>
+                  <p className="mb-1 text-xs font-medium text-muted-foreground">Notes</p>
+                  <p className="whitespace-pre-wrap text-sm text-foreground">{model.notes}</p>
+                </div>
+              </>
+            )}
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-base">State breakdown</CardTitle>
+            <CardDescription>How the fleet is distributed across lifecycle states.</CardDescription>
+          </CardHeader>
+          <CardContent className="h-72">
+            {insightsQuery.isPending ? (
+              <Skeleton className="h-full w-full" />
+            ) : chartData.length === 0 ? (
+              <div className="flex h-full items-center justify-center text-sm text-muted-foreground">
+                No units of this model yet.
+              </div>
+            ) : (
+              <ResponsiveContainer width="100%" height="100%">
+                <BarChart data={chartData} layout="vertical" margin={{ left: 16 }}>
+                  <XAxis type="number" tick={{ fontSize: 12 }} allowDecimals={false} />
+                  <YAxis type="category" dataKey="name" tick={{ fontSize: 11 }} width={120} />
+                  <Tooltip cursor={{ fill: 'hsl(var(--accent) / 0.2)' }} />
+                  <Bar dataKey="count" radius={[0, 4, 4, 0]}>
+                    {chartData.map((s) => (
+                      <Cell key={s.state} fill={STATE_FILL[s.state]} />
+                    ))}
+                  </Bar>
+                </BarChart>
+              </ResponsiveContainer>
+            )}
+          </CardContent>
+        </Card>
+      </div>
+
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-base">Parts of this model</CardTitle>
+          <CardDescription>Every unit tracked under {model.mpn}.</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <DataTable<Part, Record<string, never>>
+            columns={partColumns}
+            getRowId={(p) => p.id}
+            queryKey={(params) =>
+              queryKeys.parts.list({
+                partModelId: id,
+                page: params.page,
+                pageSize: params.pageSize,
+                q: params.q,
+                sort: params.sort,
+              })
+            }
+            queryFn={(params) =>
+              listParts({
+                partModelId: id,
+                page: params.page,
+                pageSize: params.pageSize,
+                q: params.q,
+                sort: params.sort,
+              })
+            }
+            searchPlaceholder="Search serial..."
+            emptyState={
+              <div className="py-8 text-center text-sm text-muted-foreground">
+                No parts of this model yet.
+              </div>
+            }
+          />
+        </CardContent>
+      </Card>
+
+      <PartModelFormDialog open={editOpen} onOpenChange={setEditOpen} partModel={model} />
+      <ConfirmDialog
+        open={confirmDelete}
+        onOpenChange={setConfirmDelete}
+        title="Delete part model?"
+        description={`Remove ${model.mpn}. Fails if any parts reference this model.`}
+        confirmLabel="Delete"
+        destructive
+        pending={deleteMutation.isPending}
+        onConfirm={() => deleteMutation.mutate()}
+      />
+    </div>
+  );
+}
@@ -1,7 +1,8 @@
 import { useMemo, useState } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
 import type { ColumnDef } from '@tanstack/react-table';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
-import { Check, Edit, Layers, MoreHorizontal, Plus, Trash2 } from 'lucide-react';
+import { Check, Edit, Eye, Layers, MoreHorizontal, Plus, Trash2 } from 'lucide-react';
 import { toast } from 'sonner';
 import {
  Badge,
@@ -25,6 +26,7 @@ import { useAuth } from '../contexts/AuthContext.js';
 export default function PartModels() {
  const { user } = useAuth();
  const isAdmin = user?.role === 'ADMIN';
+  const navigate = useNavigate();
  const queryClient = useQueryClient();

  const [createOpen, setCreateOpen] = useState(false);
@@ -55,7 +57,12 @@ export default function PartModels() {
        accessorKey: 'mpn',
        header: 'MPN',
        cell: ({ row }) => (
-          <span className="font-mono text-xs font-medium">{row.original.mpn}</span>
+          <Link
+            to={`/part-models/${row.original.id}`}
+            className="font-mono text-xs font-medium hover:underline"
+          >
+            {row.original.mpn}
+          </Link>
        ),
      },
      {
@@ -104,33 +111,40 @@ export default function PartModels() {
        id: 'actions',
        header: () => <span className="sr-only">Actions</span>,
        size: 40,
-        cell: ({ row }) =>
-          isAdmin ? (
-            <DropdownMenu>
-              <DropdownMenuTrigger asChild>
-                <Button variant="ghost" size="icon" className="h-7 w-7">
-                  <MoreHorizontal className="h-4 w-4" />
-                </Button>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent align="end" className="w-36">
-                <DropdownMenuItem onSelect={() => setEditing(row.original)}>
-                  <Edit className="h-3.5 w-3.5" />
-                  Edit
-                </DropdownMenuItem>
-                <DropdownMenuSeparator />
-                <DropdownMenuItem
-                  onSelect={() => setDeleting(row.original)}
-                  className="text-destructive focus:text-destructive"
-                >
-                  <Trash2 className="h-3.5 w-3.5" />
-                  Delete
-                </DropdownMenuItem>
-              </DropdownMenuContent>
-            </DropdownMenu>
-          ) : null,
+        cell: ({ row }) => (
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="ghost" size="icon" className="h-7 w-7">
+                <MoreHorizontal className="h-4 w-4" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end" className="w-36">
+              <DropdownMenuItem onSelect={() => navigate(`/part-models/${row.original.id}`)}>
+                <Eye className="h-3.5 w-3.5" />
+                View
+              </DropdownMenuItem>
+              {isAdmin && (
+                <>
+                  <DropdownMenuItem onSelect={() => setEditing(row.original)}>
+                    <Edit className="h-3.5 w-3.5" />
+                    Edit
+                  </DropdownMenuItem>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuItem
+                    onSelect={() => setDeleting(row.original)}
+                    className="text-destructive focus:text-destructive"
+                  >
+                    <Trash2 className="h-3.5 w-3.5" />
+                    Delete
+                  </DropdownMenuItem>
+                </>
+              )}
+            </DropdownMenuContent>
+          </DropdownMenu>
+        ),
      },
    ],
-    [isAdmin],
+    [isAdmin, navigate],
  );

  return (