fix(vendors): enforce prototype visual geometry

2026-10-02 13:13:12 +00:00 · 2026-08-06 23:30:23 -03:00 · 2026-08-06 23:30:23 -03:00 · fca5487f6d
commit fca5487f6d
parent ec203e1f5b
5 changed files with 123 additions and 25 deletions
--- 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();
--- 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 && (
--- 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) => (
--- 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}
--- 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>