feat: host detail page + FM host context

Add /hosts/:id detail page with unified timeline (HostEvents + FMs + Repairs + part arrivals/departures) and a deployed-parts table. Hosts list rows now link to the page. FM list + detail surface inline State/Stack badges next to the asset ID, with the asset ID linking to the host page. HostEvent audit model added; create/update in the hosts service now diff and log state, stack, and field changes the same way parts.ts does. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
2026-04-17 14:04:07 -04:00
parent 60255f20bb
commit b0e9c5d1d0
19 changed files with 1228 additions and 91 deletions
@@ -0,0 +1,245 @@
+import { useState } from 'react';
+import { Link, useNavigate, useParams } from 'react-router-dom';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { ArrowLeft, Edit, Trash2 } from 'lucide-react';
+import { toast } from 'sonner';
+import {
+  Button,
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  Separator,
+  Skeleton,
+} from '@vector/ui';
+import { deleteHost, getHost, listHostDeployedParts } from '../lib/api/hosts.js';
+import { ApiRequestError } from '../lib/api/client.js';
+import { queryKeys } from '../lib/queryKeys.js';
+import { useAuth } from '../contexts/AuthContext.js';
+import { HostStateBadge, HostStackBadge } from '../components/hosts/HostStateBadge.js';
+import { HostTimeline } from '../components/hosts/HostTimeline.js';
+import { HostFormDialog } from '../components/hosts/HostFormDialog.js';
+import { PartStateBadge } from '../components/parts/PartStateBadge.js';
+import { ConfirmDialog } from '../components/ConfirmDialog.js';
+
+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 HostDetail() {
+  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 { data: host, isPending, isError, error } = useQuery({
+    queryKey: queryKeys.hosts.detail(id!),
+    queryFn: () => getHost(id!),
+    enabled: Boolean(id),
+  });
+
+  const deployedPartsQuery = useQuery({
+    queryKey: queryKeys.hosts.deployedParts(id!),
+    queryFn: () => listHostDeployedParts(id!),
+    enabled: Boolean(id),
+  });
+
+  const deleteMutation = useMutation({
+    mutationFn: () => deleteHost(id!),
+    onSuccess: () => {
+      toast.success('Host deleted');
+      queryClient.invalidateQueries({ queryKey: queryKeys.hosts.all });
+      navigate('/hosts', { replace: true });
+    },
+    onError: (err) => {
+      toast.error(err instanceof ApiRequestError ? err.body.message : 'Delete failed');
+    },
+  });
+
+  if (isPending) {
+    return (
+      <div className="space-y-4">
+        <Skeleton className="h-8 w-64" />
+        <Skeleton className="h-32 w-full" />
+        <Skeleton className="h-48 w-full" />
+      </div>
+    );
+  }
+
+  if (isError || !host) {
+    const msg = error instanceof ApiRequestError ? error.body.message : 'Host not found.';
+    return (
+      <Card>
+        <CardHeader>
+          <CardTitle>Host unavailable</CardTitle>
+          <CardDescription>{msg}</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <Button variant="outline" onClick={() => navigate('/hosts')}>
+            <ArrowLeft className="h-4 w-4" />
+            Back to hosts
+          </Button>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  const deployedParts = deployedPartsQuery.data ?? [];
+
+  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('/hosts')} aria-label="Back">
+            <ArrowLeft className="h-4 w-4" />
+          </Button>
+          <div>
+            <h1 className="text-lg font-semibold tracking-tight">{host.name}</h1>
+            <p className="text-xs text-muted-foreground">
+              <span className="font-mono">{host.assetId}</span>
+              {host.location ? ` · ${host.location}` : ''}
+            </p>
+          </div>
+        </div>
+        <div className="flex items-center gap-2">
+          <HostStateBadge state={host.state} />
+          <HostStackBadge stack={host.stack} />
+          <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 md:grid-cols-[1fr_1.2fr]">
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-base">Summary</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <dl className="space-y-2">
+              <DetailRow
+                label="Asset ID"
+                value={<span className="font-mono text-xs">{host.assetId}</span>}
+              />
+              <DetailRow label="Name" value={host.name} />
+              <DetailRow label="State" value={<HostStateBadge state={host.state} />} />
+              <DetailRow label="Stack" value={<HostStackBadge stack={host.stack} />} />
+              <DetailRow
+                label="Location"
+                value={
+                  host.location ?? <span className="text-muted-foreground italic">—</span>
+                }
+              />
+              <Separator className="my-2" />
+              <DetailRow label="Created" value={new Date(host.createdAt).toLocaleString()} />
+              <DetailRow label="Updated" value={new Date(host.updatedAt).toLocaleString()} />
+            </dl>
+            {host.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">{host.notes}</p>
+                </div>
+              </>
+            )}
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-base">History</CardTitle>
+            <CardDescription>
+              FMs, repairs, part swaps, and host field changes.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <HostTimeline hostId={host.id} />
+          </CardContent>
+        </Card>
+      </div>
+
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-base">Deployed parts</CardTitle>
+          <CardDescription>Parts currently installed on this host.</CardDescription>
+        </CardHeader>
+        <CardContent>
+          {deployedPartsQuery.isPending ? (
+            <Skeleton className="h-16 w-full" />
+          ) : deployedParts.length === 0 ? (
+            <p className="text-sm text-muted-foreground">No parts deployed here.</p>
+          ) : (
+            <div className="overflow-hidden rounded-md border">
+              <table className="w-full text-sm">
+                <thead className="bg-muted/40 text-xs text-muted-foreground">
+                  <tr>
+                    <th className="px-3 py-2 text-left font-medium">Serial</th>
+                    <th className="px-3 py-2 text-left font-medium">MPN</th>
+                    <th className="px-3 py-2 text-left font-medium">Manufacturer</th>
+                    <th className="px-3 py-2 text-left font-medium">State</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {deployedParts.map((p) => (
+                    <tr key={p.id} className="border-t">
+                      <td className="px-3 py-2">
+                        <Link
+                          to={`/parts/${p.id}`}
+                          className="font-mono text-xs hover:underline"
+                        >
+                          {p.serialNumber}
+                        </Link>
+                      </td>
+                      <td className="px-3 py-2 font-mono text-xs">{p.partModel.mpn}</td>
+                      <td className="px-3 py-2 text-muted-foreground">
+                        {p.manufacturer.name}
+                      </td>
+                      <td className="px-3 py-2">
+                        <PartStateBadge state={p.state} />
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      <HostFormDialog open={editOpen} onOpenChange={setEditOpen} host={host} />
+      <ConfirmDialog
+        open={confirmDelete}
+        onOpenChange={setConfirmDelete}
+        title="Delete host?"
+        description={`Permanently remove ${host.name}. Fails if any repair jobs reference it.`}
+        confirmLabel="Delete"
+        destructive
+        pending={deleteMutation.isPending}
+        onConfirm={() => deleteMutation.mutate()}
+      />
+    </div>
+  );
+}