App/app/(portal)/inventory/vendors/vendors-table.tsx

@@ -41,6 +41,7 @@ export function VendorsTable({
       ? vendors.filter(
           (v) =>
             v.name.toLowerCase().includes(q) ||
+            (v.vendorId && v.vendorId.toLowerCase().includes(q)) ||
             (v.gstin && v.gstin.toLowerCase().includes(q)) ||
             (v.address && v.address.toLowerCase().includes(q))
         )
@@ -89,7 +90,7 @@ export function VendorsTable({
           <input
             value={query}
             onChange={(e) => setQuery(e.target.value)}
-            placeholder="Search by name, GSTIN or address…"
+            placeholder="Search by name, ID, GSTIN or address…"
             className="w-full rounded-lg border border-neutral-200 py-2 pl-8 pr-8 text-sm focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-500/20"
           />
           {query && (
@@ -151,6 +152,9 @@ export function VendorsTable({
                     <Link href={`/inventory/vendors/${vendor.id}`} className="font-medium text-neutral-900 hover:text-primary-600 hover:underline">
                       {vendor.name}
                     </Link>
+                    {vendor.vendorId && (
+                      <span className="rounded bg-neutral-100 px-1.5 py-0.5 font-mono text-xs text-neutral-500">{vendor.vendorId}</span>
+                    )}
                     {vendor.isVerified && (
                       <span className="rounded-full bg-success-100 px-1.5 py-0.5 text-xs font-medium text-success-700">Verified</span>
                     )}

App/tests/unit/vendors-table.test.tsx

@@ -0,0 +1,64 @@
+import { describe, it, expect, vi } from "vitest";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { VendorsTable } from "@/app/(portal)/inventory/vendors/vendors-table";
+
+vi.mock("next/navigation", () => ({
+  useRouter: () => ({ push: vi.fn() }),
+}));
+
+type Row = Parameters<typeof VendorsTable>[0]["vendors"][number];
+
+const makeRow = (over: Partial<Row> = {}): Row => ({
+  id: "v1",
+  name: "Acme Marine Supplies",
+  vendorId: "VND-001",
+  gstin: null,
+  address: null,
+  isVerified: false,
+  itemCount: 0,
+  primaryContact: null,
+  distanceKm: null,
+  ...over,
+});
+
+describe("VendorsTable — vendor id (issue #57)", () => {
+  it("renders the vendorId next to the name when present", () => {
+    render(<VendorsTable vendors={[makeRow()]} hasSite={false} />);
+    expect(screen.getByText("Acme Marine Supplies")).toBeTruthy();
+    expect(screen.getByText("VND-001")).toBeTruthy();
+  });
+
+  it("omits the id (no placeholder) when vendorId is null", () => {
+    render(<VendorsTable vendors={[makeRow({ vendorId: null })]} hasSite={false} />);
+    expect(screen.queryByText("VND-001")).toBeNull();
+  });
+
+  it("filters by vendorId", () => {
+    const rows = [
+      makeRow({ id: "v1", name: "Acme Marine Supplies", vendorId: "VND-001" }),
+      makeRow({ id: "v2", name: "Beta Traders", vendorId: "VND-999" }),
+    ];
+    render(<VendorsTable vendors={rows} hasSite={false} />);
+    const search = screen.getByPlaceholderText(/Search by name/i);
+    fireEvent.change(search, { target: { value: "VND-999" } });
+    expect(screen.queryByText("Acme Marine Supplies")).toBeNull();
+    expect(screen.getByText("Beta Traders")).toBeTruthy();
+  });
+
+  it("still filters by name", () => {
+    const rows = [
+      makeRow({ id: "v1", name: "Acme Marine Supplies", vendorId: "VND-001" }),
+      makeRow({ id: "v2", name: "Beta Traders", vendorId: "VND-999" }),
+    ];
+    render(<VendorsTable vendors={rows} hasSite={false} />);
+    const search = screen.getByPlaceholderText(/Search by name/i);
+    fireEvent.change(search, { target: { value: "beta" } });
+    expect(screen.getByText("Beta Traders")).toBeTruthy();
+    expect(screen.queryByText("Acme Marine Supplies")).toBeNull();
+  });
+
+  it("advertises ID search in the placeholder", () => {
+    render(<VendorsTable vendors={[makeRow()]} hasSite={false} />);
+    expect(screen.getByPlaceholderText(/Search by name, ID, GSTIN or address/i)).toBeTruthy();
+  });
+});