From fca5487f6d743b54189e84d532df12a5e76979b8 Mon Sep 17 00:00:00 2001
From: Alexandre Brandizzi <alex_brandizzi@hotmail.com>
Date: Thu, 6 Aug 2026 23:30:23 -0300
Subject: [PATCH] fix(vendors): enforce prototype visual geometry

---
 e2e/vendors/vendors.spec.ts                   | 19 +++-
 .../_components/vendors-list-toolbar.tsx      | 20 +++-
 .../vendors/_components/vendors-table.tsx     | 96 +++++++++++++++----
 src/app/(protected)/vendors/index.tsx         |  4 +-
 src/components/ui/page-header.tsx             |  9 +-
 5 files changed, 123 insertions(+), 25 deletions(-)

diff --git a/e2e/vendors/vendors.spec.ts b/e2e/vendors/vendors.spec.ts
index 0ce999d2..e5c8bcf3 100644
--- a/e2e/vendors/vendors.spec.ts
+++ b/e2e/vendors/vendors.spec.ts
@@ -306,10 +306,17 @@ test.describe("Vendor directory prototype parity", () => {
   test("covers status tabs, global counts, search, facets, table fields, and filtered footer", async ({
     page,
   }) => {
+    await page.setViewportSize({ width: 1440, height: 1000 });
     const state = await mockVendorApi(page);
     await page.goto("/vendors");
 
-    await expect(page.getByRole("heading", { name: "Vendors / Technicians" })).toBeVisible();
+    const heading = page.getByRole("heading", { name: "Vendors / Technicians" });
+    await expect(heading).toBeVisible();
+    await expect(heading).toHaveCSS("font-family", /Montserrat/);
+    await expect(heading).toHaveCSS("font-size", "30px");
+    await expect(heading).toHaveCSS("font-weight", "800");
+    await expect(heading).toHaveCSS("line-height", "33px");
+    await expect(heading).toHaveCSS("letter-spacing", "-0.6px");
     await expect(page.getByText("3 technicians · 2 active")).toBeVisible();
     await expect(page.getByRole("tab", { name: "Active (2)" })).toHaveAttribute(
       "aria-selected",
@@ -327,6 +334,16 @@ test.describe("Vendor directory prototype parity", () => {
       await expect(page.getByRole("columnheader", { name: heading })).toBeVisible();
     }
     await expect(page.getByRole("columnheader", { name: "Status" })).toBeVisible();
+    const activeTabBox = await page.getByRole("tab", { name: "Active (2)" }).boundingBox();
+    expect(activeTabBox).toMatchObject({ x: 256, y: 159.5, height: 36 });
+    const tableContainerBox = await page.locator("table").locator("..").boundingBox();
+    expect(tableContainerBox).toMatchObject({ x: 260, y: 212.5, width: 1164 });
+    expect(tableContainerBox?.height).toBeCloseTo(738, 0);
+    expect((await page.locator("table").boundingBox())?.width).toBe(1550);
+    expect((await page.getByRole("columnheader", { name: "Company" }).boundingBox())?.height).toBe(
+      47,
+    );
+    expect((await page.locator("tbody tr").first().boundingBox())?.height).toBe(52);
     await expect(page.getByText("Gateway Plumbing")).toBeVisible();
     await expect(page.getByText("+1")).toBeVisible();
     await expect(page.getByText("2 active technicians")).toBeVisible();
diff --git a/src/app/(protected)/vendors/_components/vendors-list-toolbar.tsx b/src/app/(protected)/vendors/_components/vendors-list-toolbar.tsx
index ff5352ec..a8203ecb 100644
--- a/src/app/(protected)/vendors/_components/vendors-list-toolbar.tsx
+++ b/src/app/(protected)/vendors/_components/vendors-list-toolbar.tsx
@@ -31,6 +31,7 @@ export function VendorsListToolbar({
   return (
     <PageHeader
       surface
+      className="-mx-4 -mt-4"
       title="Vendors / Technicians"
       subtitle={`${globalCount} technicians · ${activeCount} active`}
       actions={
@@ -40,17 +41,24 @@ export function VendorsListToolbar({
             onChange={onSearchChange}
             placeholder="Search name, company, trade…"
             aria-label="Search vendors"
+            inputClassName="h-8 py-0 text-[13px]"
           />
           <ToolbarButton
             variant="outline"
-            icon={<SlidersHorizontal size={13} />}
+            icon={<SlidersHorizontal size={16} />}
             onClick={onOpenFilters}
             aria-label="Open vendor filters"
             badge={appliedFilterCount}
+            className="w-[88.609375px] text-[13px]"
           >
             Filters
           </ToolbarButton>
-          <ToolbarButton variant="primary" icon={<Plus size={13} />} onClick={onAddVendor}>
+          <ToolbarButton
+            variant="primary"
+            icon={<Plus size={16} />}
+            onClick={onAddVendor}
+            className="w-[115.546875px] border-0 px-3 text-[13px]"
+          >
             Add Vendor
           </ToolbarButton>
           {isFetching && !isLoading && (
@@ -131,14 +139,18 @@ export function VendorsListFooter({
       sx={{
         alignItems: { xs: "stretch", sm: "center" },
         justifyContent: "space-between",
+        minHeight: 33.5,
+        mx: -2,
+        px: 2,
+        backgroundColor: "var(--color-bg-surface)",
       }}
     >
-      <Text variant="description" tone="muted">
+      <Text variant="caption" as="span" sx={{ color: "#6b7a96", fontSize: 11, lineHeight: 1.5 }}>
         {totalCount} {isActive ? "active" : "inactive"}{" "}
         {totalCount === 1 ? "technician" : "technicians"}
         {isFiltered && " · filtered"}
       </Text>
-      <Text variant="description" tone="muted">
+      <Text variant="caption" as="span" sx={{ color: "#6b7a96", fontSize: 11, lineHeight: 1.5 }}>
         {activeCount} active · {inactiveCount} inactive
       </Text>
       {totalCount > pageSize && (
diff --git a/src/app/(protected)/vendors/_components/vendors-table.tsx b/src/app/(protected)/vendors/_components/vendors-table.tsx
index 1e47a58a..db588cff 100644
--- a/src/app/(protected)/vendors/_components/vendors-table.tsx
+++ b/src/app/(protected)/vendors/_components/vendors-table.tsx
@@ -4,7 +4,7 @@ import EditOutlinedIcon from "@mui/icons-material/EditOutlined";
 import VisibilityOutlinedIcon from "@mui/icons-material/VisibilityOutlined";
 import {
   Avatar,
-  Chip,
+  Box,
   CircularProgress,
   IconButton,
   Link,
@@ -50,6 +50,23 @@ function stopPropagation(event: MouseEvent): void {
   event.stopPropagation();
 }
 
+function VendorStatus({ isActive }: { isActive: boolean }) {
+  return (
+    <Stack direction="row" spacing={1} sx={{ alignItems: "center", pl: 1 }}>
+      <Box
+        component="span"
+        sx={{
+          width: 6,
+          height: 6,
+          borderRadius: "9999px",
+          backgroundColor: isActive ? "success.main" : "text.secondary",
+        }}
+      />
+      <Text variant="description">{isActive ? "Active" : "Inactive"}</Text>
+    </Stack>
+  );
+}
+
 interface VendorTableRowProps {
   row: VendorListItem;
   onOpenDetail: (row: VendorListItem) => void;
@@ -82,12 +99,12 @@ function VendorTableRow({ row, onOpenDetail, onOpenEdit }: VendorTableRowProps)
       onKeyDown={handleKeyDown}
     >
       <TableCell>
-        <Text variant="description" className="font-semibold">
+        <Text variant="description" sx={{ color: "var(--color-foreground)" }}>
           {row.companyName || "—"}
         </Text>
       </TableCell>
       <TableCell>
-        <Stack direction="row" spacing={1.5} sx={{ alignItems: "center" }}>
+        <Stack direction="row" spacing={1.25} sx={{ alignItems: "center" }}>
           <Avatar
             sx={{
               width: 28,
@@ -100,23 +117,44 @@ function VendorTableRow({ row, onOpenDetail, onOpenEdit }: VendorTableRowProps)
           >
             {getInitials(row.contactName)}
           </Avatar>
-          <Text variant="description">{row.contactName || "—"}</Text>
+          <Text variant="description" sx={{ color: "var(--color-foreground)" }}>
+            {row.contactName || "—"}
+          </Text>
         </Stack>
       </TableCell>
-      <TableCell>{locationText}</TableCell>
-      <TableCell>
+      <TableCell sx={{ color: "var(--color-muted-foreground)" }}>{locationText}</TableCell>
+      <TableCell sx={{ color: "var(--color-muted-foreground)" }}>
         {primaryTrade === "—" ? (
           "—"
         ) : (
           <Stack direction="row" spacing={0.5} sx={{ alignItems: "center" }}>
             <span>{primaryTrade}</span>
-            {extraTrades > 0 && <Chip size="small" label={`+${extraTrades}`} />}
+            {extraTrades > 0 && (
+              <Box
+                component="span"
+                sx={{
+                  borderRadius: "9999px",
+                  backgroundColor: "var(--color-bg-muted)",
+                  px: 0.75,
+                  py: 0.25,
+                  fontSize: 10.5,
+                  lineHeight: 1.2,
+                }}
+              >
+                +{extraTrades}
+              </Box>
+            )}
           </Stack>
         )}
       </TableCell>
-      <TableCell>
+      <TableCell sx={{ color: "var(--color-muted-foreground)" }}>
         {row.phone ? (
-          <Link href={`tel:${row.phone}`} underline="hover" onClick={stopPropagation}>
+          <Link
+            href={`tel:${row.phone}`}
+            underline="hover"
+            color="inherit"
+            onClick={stopPropagation}
+          >
             {row.phone}
           </Link>
         ) : (
@@ -125,7 +163,12 @@ function VendorTableRow({ row, onOpenDetail, onOpenEdit }: VendorTableRowProps)
       </TableCell>
       <TableCell>
         {row.email ? (
-          <Link href={`mailto:${row.email}`} underline="hover" onClick={stopPropagation}>
+          <Link
+            href={`mailto:${row.email}`}
+            underline="hover"
+            sx={{ color: "#6b7a96" }}
+            onClick={stopPropagation}
+          >
             {row.email}
           </Link>
         ) : (
@@ -134,11 +177,7 @@ function VendorTableRow({ row, onOpenDetail, onOpenEdit }: VendorTableRowProps)
       </TableCell>
       <TableCell align="center">{row.totalJobs ?? 0}</TableCell>
       <TableCell>
-        <Chip
-          size="small"
-          label={row.isActive ? "Active" : "Inactive"}
-          color={row.isActive ? "success" : "default"}
-        />
+        <VendorStatus isActive={row.isActive} />
       </TableCell>
       <TableCell align="right">
         <Stack
@@ -203,20 +242,28 @@ export function VendorsTable({
     <TableContainer
       component={Paper}
       variant="outlined"
-      sx={{ mt: 2, flex: "1 1 auto", overflow: "auto", borderRadius: 1 }}
+      sx={{
+        mt: 2,
+        mb: 2,
+        flex: "1 1 auto",
+        overflow: "auto",
+        borderRadius: 1.5,
+        fontSize: 13,
+      }}
     >
       <Table
         size="small"
         stickyHeader
         sx={{
-          minWidth: 1260,
+          minWidth: 1550,
+          tableLayout: "fixed",
           "& .MuiTableCell-head": {
             backgroundColor: "var(--color-bg-muted)",
             color: "var(--color-foreground)",
             fontSize: 10.5,
             fontWeight: 700,
             letterSpacing: "0.06em",
-            lineHeight: 1.2,
+            lineHeight: "24px",
             px: 1.75,
             py: 1.375,
             textTransform: "uppercase",
@@ -226,6 +273,8 @@ export function VendorsTable({
             fontSize: 13,
             px: 1.5,
             py: 1,
+            height: 52,
+            lineHeight: 1.43,
             whiteSpace: "nowrap",
           },
           "& .vendor-row-actions": {
@@ -238,6 +287,17 @@ export function VendorsTable({
             },
         }}
       >
+        <colgroup>
+          <col style={{ width: 196.34375 }} />
+          <col style={{ width: 207.25 }} />
+          <col style={{ width: 152.703125 }} />
+          <col style={{ width: 218.15625 }} />
+          <col style={{ width: 152.703125 }} />
+          <col style={{ width: 251.90625 }} />
+          <col style={{ width: 109.078125 }} />
+          <col style={{ width: 119.984375 }} />
+          <col style={{ width: 141.875 }} />
+        </colgroup>
         <TableHead>
           <TableRow>
             {TABLE_COLUMNS.map((column) => (
diff --git a/src/app/(protected)/vendors/index.tsx b/src/app/(protected)/vendors/index.tsx
index c81ed17f..48447ad6 100644
--- a/src/app/(protected)/vendors/index.tsx
+++ b/src/app/(protected)/vendors/index.tsx
@@ -59,6 +59,7 @@ function VendorStatusTabs({
         flexShrink: 0,
         borderBottom: (theme) => `1px solid ${theme.palette.divider}`,
         backgroundColor: "var(--color-bg-surface)",
+        mx: -2,
         px: 1.5,
         "& .MuiTab-root": {
           minHeight: 36,
@@ -68,6 +69,7 @@ function VendorStatusTabs({
           fontWeight: 500,
           textTransform: "none",
         },
+        "& .MuiTab-root:first-of-type": { width: 102.84375 },
         "& .Mui-selected": { fontWeight: 600 },
         "& .MuiTabs-indicator": { height: 2 },
       }}
@@ -139,7 +141,7 @@ export default function VendorsListPage() {
   const appliedChips = describeChips(filters.appliedFilters, jobBucketLabels);
 
   return (
-    <Box className="flex h-full flex-col overflow-hidden p-2.5">
+    <Box className="flex h-full flex-col overflow-hidden px-4 pt-4 pb-0">
       <VendorsListToolbar
         globalCount={activeCount + inactiveCount}
         activeCount={activeCount}
diff --git a/src/components/ui/page-header.tsx b/src/components/ui/page-header.tsx
index 566ae837..23c273cc 100644
--- a/src/components/ui/page-header.tsx
+++ b/src/components/ui/page-header.tsx
@@ -49,10 +49,17 @@ export function PageHeader({
             "m-0 font-display mt-1! text-[30px]! font-extrabold leading-[1.1] tracking-[-0.02em] text-foreground",
             eyebrow && "mt-1",
           )}
+          sx={{ fontSize: 30, fontWeight: 800, lineHeight: 1.1, letterSpacing: "-0.02em" }}
         >
           {title}
         </Text>
-        <Text variant="description" tone="muted" when={Boolean(subtitle)}>
+        <Text
+          variant="description"
+          as="span"
+          tone="muted"
+          when={Boolean(subtitle)}
+          sx={{ mt: 0.75, fontWeight: 500 }}
+        >
           {subtitle}
         </Text>
       </Stack>