feat(manufacturers): detail page with MPN-level insights

Adds /manufacturers/:id with vendor-wide KPIs, top MPNs by units, failures by MPN, category mix, past-EOL exposure, and a filtered PartModels table. Wires upstream links from PartDetail and PartModelDetail so the manufacturer name is a navigable anchor. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
2026-04-17 15:10:37 -04:00
parent c6fb839005
commit 1d53e81d5e
14 changed files with 1027 additions and 30 deletions
@@ -12,6 +12,7 @@ import Parts from './pages/Parts.js';
 import PartDetail from './pages/PartDetail.js';
 import Locations from './pages/Locations.js';
 import Manufacturers from './pages/Manufacturers.js';
+import ManufacturerDetail from './pages/ManufacturerDetail.js';
 import PartModels from './pages/PartModels.js';
 import PartModelDetail from './pages/PartModelDetail.js';
 import Fms from './pages/Fms.js';
@@ -60,6 +61,7 @@ export default function App() {
                    <Route path="/parts/:id" element={<PartDetail />} />
                    <Route path="/locations" element={<Locations />} />
                    <Route path="/manufacturers" element={<Manufacturers />} />
+                    <Route path="/manufacturers/:id" element={<ManufacturerDetail />} />
                    <Route path="/part-models" element={<PartModels />} />
                    <Route path="/part-models/:id" element={<PartModelDetail />} />
                    <Route path="/fms" element={<Fms />} />
@@ -1,5 +1,6 @@
 import type {
  CreateManufacturerRequest,
+  ManufacturerInsights,
  UpdateManufacturerRequest,
 } from '@vector/shared';
 import { api } from './client.js';
@@ -15,6 +16,16 @@ export function listManufacturers(filters: ManufacturerListFilters = {}) {
  return getList<Manufacturer>('/manufacturers', filters);
 }

+export async function getManufacturer(id: string): Promise<Manufacturer> {
+  const res = await api.get<Manufacturer>(`/manufacturers/${id}`);
+  return res.data;
+}
+
+export async function getManufacturerInsights(id: string): Promise<ManufacturerInsights> {
+  const res = await api.get<ManufacturerInsights>(`/manufacturers/${id}/insights`);
+  return res.data;
+}
+
 export async function createManufacturer(input: CreateManufacturerRequest): Promise<Manufacturer> {
  const res = await api.post<Manufacturer>('/manufacturers', input);
  return res.data;
@@ -15,6 +15,7 @@ export interface Manufacturer {
  name: string;
  createdAt: string;
  updatedAt: string;
+  _count?: { parts: number; partModels: number };
 }

 export interface PartModel {
@@ -20,6 +20,7 @@ export const queryKeys = {
    list: (filters?: Record<string, unknown>) =>
      [...queryKeys.manufacturers.all, 'list', filters ?? {}] as const,
    detail: (id: string) => [...queryKeys.manufacturers.all, 'detail', id] as const,
+    insights: (id: string) => [...queryKeys.manufacturers.all, 'insights', id] as const,
  },
  sites: {
    all: ['sites'] as const,
@@ -0,0 +1,495 @@
+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 { AlertTriangle, ArrowLeft, Edit, Trash2 } from 'lucide-react';
+import {
+  Bar,
+  BarChart,
+  Cell,
+  Legend,
+  Pie,
+  PieChart,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from 'recharts';
+import { toast } from 'sonner';
+import {
+  Badge,
+  Button,
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  Separator,
+  Skeleton,
+} from '@vector/ui';
+import {
+  deleteManufacturer,
+  getManufacturer,
+  getManufacturerInsights,
+} from '../lib/api/manufacturers.js';
+import { listPartModels } from '../lib/api/part-models.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 { ManufacturerFormDialog } from '../components/manufacturers/ManufacturerFormDialog.js';
+import { ConfirmDialog } from '../components/ConfirmDialog.js';
+import { StatCard } from '../components/StatCard.js';
+import type { PartModel } from '../lib/api/types.js';
+
+const CATEGORY_COLORS = [
+  'hsl(217 91% 60%)',
+  'hsl(142 71% 45%)',
+  'hsl(262 83% 58%)',
+  'hsl(38 92% 50%)',
+  'hsl(340 82% 52%)',
+  'hsl(197 80% 50%)',
+  'hsl(0 84% 60%)',
+  'hsl(160 60% 40%)',
+];
+
+const BAR_COLOR = 'hsl(217 91% 60%)';
+const FAILURE_COLOR = 'hsl(0 84% 60%)';
+
+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 ManufacturerDetail() {
+  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 mfrQuery = useQuery({
+    queryKey: queryKeys.manufacturers.detail(id!),
+    queryFn: () => getManufacturer(id!),
+    enabled: Boolean(id),
+  });
+
+  const insightsQuery = useQuery({
+    queryKey: queryKeys.manufacturers.insights(id!),
+    queryFn: () => getManufacturerInsights(id!),
+    enabled: Boolean(id),
+  });
+
+  const deleteMutation = useMutation({
+    mutationFn: () => deleteManufacturer(id!),
+    onSuccess: () => {
+      toast.success('Manufacturer deleted');
+      queryClient.invalidateQueries({ queryKey: queryKeys.manufacturers.all });
+      navigate('/manufacturers', { replace: true });
+    },
+    onError: (err) => {
+      toast.error(err instanceof ApiRequestError ? err.body.message : 'Delete failed');
+    },
+  });
+
+  const modelColumns = useMemo<ColumnDef<PartModel>[]>(
+    () => [
+      {
+        accessorKey: 'mpn',
+        header: 'MPN',
+        cell: ({ row }) => (
+          <Link
+            to={`/part-models/${row.original.id}`}
+            className="font-mono text-xs font-medium hover:underline"
+          >
+            {row.original.mpn}
+          </Link>
+        ),
+      },
+      {
+        id: 'category',
+        header: 'Category',
+        cell: ({ row }) =>
+          row.original.category ? (
+            <Badge variant="outline">{row.original.category.name}</Badge>
+          ) : (
+            <span className="text-xs text-muted-foreground">—</span>
+          ),
+      },
+      {
+        accessorKey: 'eolDate',
+        header: 'EOL',
+        cell: ({ row }) => {
+          const iso = row.original.eolDate;
+          if (!iso) return <span className="text-sm text-muted-foreground">—</span>;
+          const pastEol = new Date(iso).getTime() <= Date.now();
+          return (
+            <div className="flex items-center gap-2">
+              <span className="text-sm">{new Date(iso).toLocaleDateString()}</span>
+              {pastEol && <Badge variant="destructive">Past EOL</Badge>}
+            </div>
+          );
+        },
+      },
+      {
+        id: 'deployedCount',
+        header: 'Parts',
+        cell: ({ row }) => (
+          <span className="text-sm tabular-nums">{row.original._count?.parts ?? 0}</span>
+        ),
+      },
+    ],
+    [],
+  );
+
+  if (mfrQuery.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 (mfrQuery.isError || !mfrQuery.data) {
+    const msg =
+      mfrQuery.error instanceof ApiRequestError
+        ? mfrQuery.error.body.message
+        : 'Manufacturer not found.';
+    return (
+      <Card>
+        <CardHeader>
+          <CardTitle>Manufacturer unavailable</CardTitle>
+          <CardDescription>{msg}</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <Button variant="outline" onClick={() => navigate('/manufacturers')}>
+            <ArrowLeft className="h-4 w-4" />
+            Back to manufacturers
+          </Button>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  const mfr = mfrQuery.data;
+  const insights = insightsQuery.data;
+
+  const failureRate =
+    insights && insights.totalParts > 0
+      ? Math.round((insights.failures.repairs / insights.totalParts) * 100)
+      : null;
+
+  const topModelsData =
+    insights?.topModelsByUnits.map((m) => ({
+      name: m.mpn,
+      count: m.count,
+    })) ?? [];
+
+  const failuresData =
+    insights?.failuresByModel.map((m) => ({
+      name: m.mpn,
+      repairs: m.repairs,
+    })) ?? [];
+
+  const categoryData =
+    insights?.byCategory.map((c) => ({
+      name: c.categoryName,
+      count: c.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('/manufacturers')}
+            aria-label="Back"
+          >
+            <ArrowLeft className="h-4 w-4" />
+          </Button>
+          <div>
+            <h1 className="text-lg font-semibold tracking-tight">{mfr.name}</h1>
+            <p className="text-xs text-muted-foreground">
+              {insights
+                ? `${insights.totalPartModels} MPNs · ${insights.totalParts} parts`
+                : '—'}
+            </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-3 xl:grid-cols-6">
+        {insightsQuery.isPending || !insights ? (
+          Array.from({ length: 6 }).map((_, i) => <Skeleton key={i} className="h-20" />)
+        ) : (
+          <>
+            <StatCard label="MPNs" value={insights.totalPartModels.toLocaleString()} />
+            <StatCard label="Parts" 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 parts'
+              }
+            />
+            <StatCard
+              label="Failures"
+              value={insights.failures.repairs.toLocaleString()}
+              sub={
+                failureRate != null
+                  ? `${failureRate}% of parts · ${insights.failures.distinctFailedParts} distinct`
+                  : undefined
+              }
+            />
+            <StatCard
+              label="FMs implicated"
+              value={insights.failures.fmsImplicating.toLocaleString()}
+            />
+          </>
+        )}
+      </div>
+
+      <div className="grid gap-4 md:grid-cols-2">
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-base">Top MPNs by units</CardTitle>
+            <CardDescription>Where this vendor's inventory is concentrated.</CardDescription>
+          </CardHeader>
+          <CardContent className="h-72">
+            {insightsQuery.isPending ? (
+              <Skeleton className="h-full w-full" />
+            ) : topModelsData.length === 0 ? (
+              <div className="flex h-full items-center justify-center text-sm text-muted-foreground">
+                No parts from this manufacturer yet.
+              </div>
+            ) : (
+              <ResponsiveContainer width="100%" height="100%">
+                <BarChart data={topModelsData} 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" fill={BAR_COLOR} radius={[0, 4, 4, 0]} />
+                </BarChart>
+              </ResponsiveContainer>
+            )}
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-base">Category mix</CardTitle>
+            <CardDescription>What kinds of parts this vendor supplies.</CardDescription>
+          </CardHeader>
+          <CardContent className="h-72">
+            {insightsQuery.isPending ? (
+              <Skeleton className="h-full w-full" />
+            ) : categoryData.length === 0 ? (
+              <div className="flex h-full items-center justify-center text-sm text-muted-foreground">
+                No MPNs yet.
+              </div>
+            ) : (
+              <ResponsiveContainer width="100%" height="100%">
+                <PieChart>
+                  <Pie
+                    data={categoryData}
+                    dataKey="count"
+                    nameKey="name"
+                    innerRadius={55}
+                    outerRadius={90}
+                    paddingAngle={2}
+                  >
+                    {categoryData.map((_c, i) => (
+                      <Cell key={i} fill={CATEGORY_COLORS[i % CATEGORY_COLORS.length]} />
+                    ))}
+                  </Pie>
+                  <Tooltip />
+                  <Legend />
+                </PieChart>
+              </ResponsiveContainer>
+            )}
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-base">Failures by MPN</CardTitle>
+            <CardDescription>
+              Which of this vendor's models have failed most — the "stop buying the X" signal.
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="h-72">
+            {insightsQuery.isPending ? (
+              <Skeleton className="h-full w-full" />
+            ) : failuresData.length === 0 ? (
+              <div className="flex h-full items-center justify-center text-sm text-muted-foreground">
+                No failures recorded for this vendor.
+              </div>
+            ) : (
+              <ResponsiveContainer width="100%" height="100%">
+                <BarChart data={failuresData} 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="repairs" fill={FAILURE_COLOR} radius={[0, 4, 4, 0]} />
+                </BarChart>
+              </ResponsiveContainer>
+            )}
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-base">Summary</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <dl className="space-y-2">
+              <DetailRow label="Name" value={mfr.name} />
+              <DetailRow
+                label="# MPNs"
+                value={<span className="tabular-nums">{mfr._count?.partModels ?? '—'}</span>}
+              />
+              <DetailRow
+                label="# parts"
+                value={<span className="tabular-nums">{mfr._count?.parts ?? '—'}</span>}
+              />
+              <Separator className="my-2" />
+              <DetailRow label="Created" value={new Date(mfr.createdAt).toLocaleString()} />
+              <DetailRow label="Updated" value={new Date(mfr.updatedAt).toLocaleString()} />
+            </dl>
+          </CardContent>
+        </Card>
+      </div>
+
+      {insights && insights.pastEolModels.length > 0 && (
+        <Card className="border-warning/50 bg-warning/5">
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2 text-base">
+              <AlertTriangle className="h-4 w-4 text-warning" />
+              Past-EOL MPNs with deployed parts
+            </CardTitle>
+            <CardDescription>
+              These models have passed their end-of-life date — plan replacements.
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-2 pb-5">
+            {insights.pastEolModels.map((m) => (
+              <div
+                key={m.partModelId}
+                className="flex items-center justify-between rounded-md border border-border bg-background px-3 py-2 text-sm"
+              >
+                <div className="min-w-0">
+                  <div className="truncate font-mono text-xs font-medium">{m.mpn}</div>
+                  {m.eolDate && (
+                    <div className="text-xs text-muted-foreground">
+                      EOL {new Date(m.eolDate).toLocaleDateString()}
+                    </div>
+                  )}
+                </div>
+                <div className="flex items-center gap-3">
+                  <span className="tabular-nums text-muted-foreground">
+                    {m.deployedCount} deployed
+                  </span>
+                  <Button asChild variant="outline" size="sm">
+                    <Link to={`/part-models/${m.partModelId}`}>View</Link>
+                  </Button>
+                </div>
+              </div>
+            ))}
+          </CardContent>
+        </Card>
+      )}
+
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-base">Part models</CardTitle>
+          <CardDescription>Every MPN this manufacturer supplies.</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <DataTable<PartModel, Record<string, never>>
+            columns={modelColumns}
+            getRowId={(m) => m.id}
+            queryKey={(params) =>
+              queryKeys.partModels.list({
+                manufacturerId: id,
+                page: params.page,
+                pageSize: params.pageSize,
+                q: params.q,
+              })
+            }
+            queryFn={(params) =>
+              listPartModels({
+                manufacturerId: id,
+                page: params.page,
+                pageSize: params.pageSize,
+                q: params.q,
+              })
+            }
+            searchPlaceholder="Search MPN..."
+            emptyState={
+              <div className="py-8 text-center text-sm text-muted-foreground">
+                No MPNs from this manufacturer yet.
+              </div>
+            }
+          />
+        </CardContent>
+      </Card>
+
+      <ManufacturerFormDialog
+        open={editOpen}
+        onOpenChange={setEditOpen}
+        manufacturer={mfr}
+      />
+      <ConfirmDialog
+        open={confirmDelete}
+        onOpenChange={setConfirmDelete}
+        title="Delete manufacturer?"
+        description={`Remove ${mfr.name}. Fails if any parts or part models reference it.`}
+        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 { Building, Edit, MoreHorizontal, Plus, Trash2 } from 'lucide-react';
+import { Building, Edit, Eye, MoreHorizontal, Plus, Trash2 } from 'lucide-react';
 import { toast } from 'sonner';
 import {
  Button,
@@ -24,6 +25,7 @@ import { useAuth } from '../contexts/AuthContext.js';
 export default function Manufacturers() {
  const { user } = useAuth();
  const isAdmin = user?.role === 'ADMIN';
+  const navigate = useNavigate();
  const queryClient = useQueryClient();

  const [createOpen, setCreateOpen] = useState(false);
@@ -46,7 +48,14 @@ export default function Manufacturers() {
      {
        accessorKey: 'name',
        header: 'Name',
-        cell: ({ row }) => <span className="font-medium">{row.original.name}</span>,
+        cell: ({ row }) => (
+          <Link
+            to={`/manufacturers/${row.original.id}`}
+            className="font-medium hover:underline"
+          >
+            {row.original.name}
+          </Link>
+        ),
      },
      {
        accessorKey: 'createdAt',
@@ -61,33 +70,40 @@ export default function Manufacturers() {
        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(`/manufacturers/${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 (
@@ -154,7 +154,7 @@ export default function PartDetail() {
                label="Manufacturer"
                value={
                  <Link
-                    to="/manufacturers"
+                    to={`/manufacturers/${part.manufacturerId}`}
                    className="text-foreground hover:underline"
                  >
                    {part.manufacturer.name}
@@ -209,7 +209,16 @@ export default function PartModelDetail() {
          <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.manufacturer ? (
+                <Link
+                  to={`/manufacturers/${model.manufacturerId}`}
+                  className="hover:underline"
+                >
+                  {model.manufacturer.name}
+                </Link>
+              ) : (
+                '—'
+              )}
              {' · '}
              {model.category?.name ?? 'Uncategorized'}
              {eolDate && (
@@ -288,7 +297,21 @@ export default function PartModelDetail() {
          </CardHeader>
          <CardContent>
            <dl className="space-y-2">
-              <DetailRow label="Manufacturer" value={model.manufacturer?.name ?? '—'} />
+              <DetailRow
+                label="Manufacturer"
+                value={
+                  model.manufacturer ? (
+                    <Link
+                      to={`/manufacturers/${model.manufacturerId}`}
+                      className="text-foreground hover:underline"
+                    >
+                      {model.manufacturer.name}
+                    </Link>
+                  ) : (
+                    '—'
+                  )
+                }
+              />
              <DetailRow
                label="MPN"
                value={<span className="font-mono text-xs">{model.mpn}</span>}