Merge pull request 'chore(design-system): add PPMS design system reference and sync bundle' (#62 ) from chore/design-system into master

Reviewed-on: #62
chore(design-system): add PPMS design system reference and sync bundle
2026-06-21 23:24:39 +00:00 · 2026-06-22 04:30:22 +05:30 · 2026-06-21 10:07:24 +00:00 · 2026-06-21 15:35:09 +05:30 · 2026-06-21 08:21:30 +00:00 · 2026-06-21 13:45:56 +05:30
27 changed files with 1359 additions and 40 deletions
--- a/App/app/(portal)/inventory/vendors/vendors-table.tsx
+++ b/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>
                    )}
--- a/App/app/api/po/[id]/export/route.ts
+++ b/App/app/api/po/[id]/export/route.ts
@ -4,7 +4,9 @@ import { NextRequest, NextResponse } from "next/server";
 import ExcelJS from "exceljs";
 import { TC_FIXED_LINE, TC_DEFAULTS } from "@/lib/validations/po";
 import { downloadBuffer } from "@/lib/storage";
-import { CANCELLED_WATERMARK_PNG_BASE64 } from "@/lib/cancelled-watermark";
+import { CANCELLED_WATERMARK_PNG_BASE64, CANCELLED_WATERMARK_W, CANCELLED_WATERMARK_H } from "@/lib/cancelled-watermark";
+import { getImageSize, scaleToBox } from "@/lib/image-size";
+import { signatoryLayout } from "@/lib/po-export-layout";

 // ── Company fallback constants (used when no company is linked to a PO) ──────

@ -32,12 +34,15 @@ function mimeForKey(key: string): string {
  return ext === "jpg" || ext === "jpeg" ? "image/jpeg" : ext === "webp" ? "image/webp" : "image/png";
 }

-// Download a stored image and return it base64-encoded (or null if missing).
-async function fetchImage(key: string | null | undefined): Promise<{ base64: string; mime: string } | null> {
+interface EmbeddedImage { base64: string; mime: string; width: number; height: number }
+
+// Download a stored image; return base64 + mime + pixel dimensions (or null if missing).
+async function fetchImage(key: string | null | undefined): Promise<EmbeddedImage | null> {
  if (!key) return null;
  const buf = await downloadBuffer(key);
  if (!buf) return null;
-  return { base64: buf.toString("base64"), mime: mimeForKey(key) };
+  const size = getImageSize(buf) ?? { width: 100, height: 100 };
+  return { base64: buf.toString("base64"), mime: mimeForKey(key), width: size.width, height: size.height };
 }

 // ── Route ─────────────────────────────────────────────────────────────────────
@ -129,6 +134,7 @@ export async function GET(request: NextRequest, { params }: Props) {
  // Fetch approver's signature for embedding in the document
  let signatureBase64: string | null = null;
  let signatureMime = "image/png";
+  let signatureSize: { width: number; height: number } | null = null;
  if (approvalAction) {
    const approver = await db.user.findUnique({
      where: { id: approvalAction.actorId },
@ -140,6 +146,7 @@ export async function GET(request: NextRequest, { params }: Props) {
        signatureBase64 = buf.toString("base64");
        const ext = approver.signatureKey.split(".").pop()?.toLowerCase();
        signatureMime = ext === "jpg" || ext === "jpeg" ? "image/jpeg" : ext === "webp" ? "image/webp" : "image/png";
+        signatureSize = getImageSize(buf) ?? { width: 360, height: 96 };
      }
    }
  }
@ -278,15 +285,15 @@ export async function GET(request: NextRequest, { params }: Props) {
    ws.mergeCells("A4:I4");
    ws.getRow(4).border = { top: thin(), bottom: thin() };

-    // ══ Company logo (floats top-left over the header, columns A-B) ══════════
+    // ══ Company logo (floats top-left over the header; aspect preserved) ═════
    if (logoImg) {
      const logoId = wb.addImage({
        base64: logoImg.base64,
        extension: logoImg.mime === "image/jpeg" ? "jpeg" : "png",
      });
      ws.addImage(logoId, {
-        tl: { col: 0.1, row: 0.1 } as unknown as ExcelJS.Anchor,
-        br: { col: 1.9, row: 2.9 } as unknown as ExcelJS.Anchor,
+        tl: { col: 0.15, row: 0.2 } as unknown as ExcelJS.Anchor,
+        ext: scaleToBox(logoImg, 96, 52),
        editAs: "oneCell",
      });
    }
@ -453,16 +460,47 @@ export async function GET(request: NextRequest, { params }: Props) {
    ws.getRow(SIG_ROW + 1).height = 14;
    ws.getRow(SIG_ROW + 2).height = 14;

-    // Left sig block (approver — the manager who authorized the PO)
-    if (signatureBase64) {
+    // Left signatory block (cols A-D). Position images by absolute pixels via native
+    // EMU offsets — ExcelJS's fractional-column anchors don't map cleanly to pixels.
+    const EMU = 9525; // EMU per pixel
+    const COL_PX = [22, 4, 28, 15, 8, 15, 15, 8, 16].map((w) => Math.round(w * 7 + 5));
+    const SIG_BLOCK_PX = COL_PX[0] + COL_PX[1] + COL_PX[2] + COL_PX[3]; // A-D
+    const anchorAt = (leftPx: number, row: number) => {
+      let x = 0;
+      for (let c = 0; c < COL_PX.length - 1; c++) {
+        if (leftPx < x + COL_PX[c]) {
+          return { nativeCol: c, nativeColOff: Math.round((leftPx - x) * EMU), nativeRow: row, nativeRowOff: 0 } as unknown as ExcelJS.Anchor;
+        }
+        x += COL_PX[c];
+      }
+      return { nativeCol: COL_PX.length - 1, nativeColOff: Math.round((leftPx - x) * EMU), nativeRow: row, nativeRowOff: 0 } as unknown as ExcelJS.Anchor;
+    };
+
+    const sigExt = signatureBase64 ? scaleToBox(signatureSize ?? { width: 360, height: 96 }, 165, 44) : null;
+    const stampExt = stampImg ? scaleToBox(stampImg, 80, 66) : null;
+    // Signature centred over the name; stamp to its RIGHT with a gap (no overlap).
+    const { sigLeft, stampLeft } = signatoryLayout({ blockPx: SIG_BLOCK_PX, sig: sigExt, stamp: stampExt });
+
+    // Stamp / seal — drawn FIRST so it layers BEHIND the signature if they ever touch.
+    if (stampImg && stampExt && stampLeft != null) {
+      const stampId = wb.addImage({
+        base64: stampImg.base64,
+        extension: stampImg.mime === "image/jpeg" ? "jpeg" : "png",
+      });
+      ws.addImage(stampId, {
+        tl: anchorAt(stampLeft, SIG_ROW - 1),
+        ext: stampExt,
+        editAs: "oneCell",
+      });
+    }
+
+    // Approver signature — drawn AFTER the stamp (on top), centred over the name.
+    if (signatureBase64 && sigExt && sigLeft != null) {
      const imgType = signatureMime === "image/jpeg" ? "jpeg" : "png";
      const imgId = wb.addImage({ base64: signatureBase64, extension: imgType });
-      // Span the image across columns A-D in the sig row
      ws.addImage(imgId, {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        tl: { col: 0, row: SIG_ROW - 1 } as any,
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        br: { col: 4, row: SIG_ROW } as any,
+        tl: anchorAt(Math.max(0, sigLeft), SIG_ROW - 1),
+        ext: sigExt,
        editAs: "oneCell",
      });
      sc(SIG_ROW,     1, "", { border: { top: thin(), left: thin(), right: thin() } });
@ -481,19 +519,6 @@ export async function GET(request: NextRequest, { params }: Props) {
    ws.getRow(SIG_ROW + 2).height = 14;
    ws.getRow(SIG_ROW + 3).height = 14;

-    // Company stamp / seal — overlays the right of the approver's signatory block (cols C-D)
-    if (stampImg) {
-      const stampId = wb.addImage({
-        base64: stampImg.base64,
-        extension: stampImg.mime === "image/jpeg" ? "jpeg" : "png",
-      });
-      ws.addImage(stampId, {
-        tl: { col: 2.2, row: SIG_ROW - 1 } as unknown as ExcelJS.Anchor,
-        br: { col: 3.9, row: SIG_ROW + 2 } as unknown as ExcelJS.Anchor,
-        editAs: "oneCell",
-      });
-    }
-
    // Right sig block (vendor)
    const vName = po.vendor?.name ?? "";
    sc(SIG_ROW,     6, vName, { font: fBold, border: { top: thin(), left: thin(), right: thin() }, align: alignC });
@ -511,12 +536,15 @@ export async function GET(request: NextRequest, { params }: Props) {
    for (let c = 1; c <= 9; c++) sc(BAR_ROW, c, "", { fill: barFill });
    ws.mergeCells(`A${BAR_ROW}:I${BAR_ROW}`);

-    // ══ Cancelled watermark — diagonal "CANCELLED" floating over the sheet ═══
+    // ══ Cancelled watermark — diagonal "CANCELLED" centred over the sheet ════
+    // Pixel-sized (aspect preserved) so the text spans the page like the PDF,
+    // rather than being stretched/squished by a cell-range anchor.
    if (isCancelled) {
      const wmId = wb.addImage({ base64: CANCELLED_WATERMARK_PNG_BASE64, extension: "png" });
+      const ext = scaleToBox({ width: CANCELLED_WATERMARK_W, height: CANCELLED_WATERMARK_H }, 880, 720);
      ws.addImage(wmId, {
-        tl: { col: 0.2, row: 4 } as unknown as ExcelJS.Anchor,
-        br: { col: 9, row: BAR_ROW } as unknown as ExcelJS.Anchor,
+        tl: { col: 0.15, row: 5 } as unknown as ExcelJS.Anchor,
+        ext,
        editAs: "oneCell",
      });
    }
--- a/App/components/po/cancel-po-controls.tsx
+++ b/App/components/po/cancel-po-controls.tsx
@ -47,7 +47,7 @@ export function CancelPoButton({ poId, poNumber }: { poId: string; poNumber: str
      <button
        type="button"
        onClick={() => setOpen(true)}
-        className="rounded-lg border border-danger-200 bg-white px-3 py-2 text-sm font-medium text-danger-600 hover:bg-danger-50 transition-colors"
+        className="rounded-lg bg-danger px-3 py-2 text-sm font-semibold text-white hover:bg-danger-700 transition-colors"
      >
        Cancel PO
      </button>
@ -65,7 +65,7 @@ export function CancelPoButton({ poId, poNumber }: { poId: string; poNumber: str
            </p>

            <label className="mt-4 block text-xs font-medium text-neutral-700">
-              Reason for cancellation <span className="text-danger-600">*</span>
+              Reason for cancellation <span className="text-danger">*</span>
            </label>
            <textarea
              value={reason}
@ -73,7 +73,7 @@ export function CancelPoButton({ poId, poNumber }: { poId: string; poNumber: str
              rows={3}
              autoFocus
              placeholder="e.g. Duplicate order — superseded by a corrected PO"
-              className="mt-1 w-full rounded-lg border border-neutral-300 px-3 py-2 text-sm focus:border-danger-500 focus:outline-none focus:ring-2 focus:ring-danger-500/20"
+              className="mt-1 w-full rounded-lg border border-neutral-300 px-3 py-2 text-sm focus:border-danger focus:outline-none focus:ring-2 focus:ring-danger/20"
            />

            <label className="mt-3 block text-xs font-medium text-neutral-700">
@ -83,7 +83,7 @@ export function CancelPoButton({ poId, poNumber }: { poId: string; poNumber: str
              value={confirmText}
              onChange={(e) => setConfirmText(e.target.value)}
              placeholder="cancel"
-              className="mt-1 w-full rounded-lg border border-neutral-300 px-3 py-2 text-sm font-mono focus:border-danger-500 focus:outline-none focus:ring-2 focus:ring-danger-500/20"
+              className="mt-1 w-full rounded-lg border border-neutral-300 px-3 py-2 text-sm font-mono focus:border-danger focus:outline-none focus:ring-2 focus:ring-danger/20"
            />

            {error && <p className="mt-3 text-sm text-danger-700 bg-danger-50 rounded-lg px-3 py-2">{error}</p>}
@ -101,7 +101,7 @@ export function CancelPoButton({ poId, poNumber }: { poId: string; poNumber: str
                type="button"
                onClick={handleCancel}
                disabled={!canSubmit}
-                className="rounded-lg bg-danger-600 px-4 py-2 text-sm font-semibold text-white hover:bg-danger-700 disabled:opacity-50"
+                className="rounded-lg bg-danger px-4 py-2 text-sm font-semibold text-white hover:bg-danger-700 disabled:opacity-50"
              >
                {pending ? "Cancelling…" : "Cancel this PO"}
              </button>
--- a/App/components/po/po-detail.tsx
+++ b/App/components/po/po-detail.tsx
@ -238,7 +238,7 @@ export async function PoDetail({ po, currentUserId, currentRole, readOnly = fals

      {/* Cancelled banner — reason + supersede link (and the reciprocal "supersedes") */}
      {po.status === "CANCELLED" && (
-        <div className="rounded-lg border border-danger-200 bg-danger-50 px-4 py-3">
+        <div className="rounded-lg border border-danger-100 bg-danger-50 px-4 py-3">
          <p className="text-sm font-semibold text-danger-700">
            Cancelled{po.cancelledAt ? ` on ${formatDate(po.cancelledAt)}` : ""}
          </p>
--- a/App/lib/cancelled-watermark.ts
+++ b/App/lib/cancelled-watermark.ts
--- a/App/lib/image-size.ts
+++ b/App/lib/image-size.ts
@ -0,0 +1,46 @@
+// Image dimension helpers used to size XLSX floating images by pixels with the
+// aspect ratio preserved. ExcelJS's two-cell (tl/br) anchoring otherwise stretches
+// an image to fill a cell range, which distorts logos / signatures / stamps.
+
+/** Read pixel dimensions from a PNG / JPEG / WebP buffer (header parse, no deps). */
+export function getImageSize(buf: Buffer): { width: number; height: number } | null {
+  // PNG — IHDR width/height at byte offsets 16 / 20
+  if (buf.length >= 24 && buf[0] === 0x89 && buf[1] === 0x50 && buf[2] === 0x4e && buf[3] === 0x47) {
+    return { width: buf.readUInt32BE(16), height: buf.readUInt32BE(20) };
+  }
+  // JPEG — scan segments for a Start-Of-Frame marker
+  if (buf.length >= 4 && buf[0] === 0xff && buf[1] === 0xd8) {
+    let o = 2;
+    while (o + 9 < buf.length) {
+      if (buf[o] !== 0xff) { o++; continue; }
+      const m = buf[o + 1];
+      if (m >= 0xc0 && m <= 0xcf && m !== 0xc4 && m !== 0xc8 && m !== 0xcc) {
+        return { height: buf.readUInt16BE(o + 5), width: buf.readUInt16BE(o + 7) };
+      }
+      o += 2 + buf.readUInt16BE(o + 2);
+    }
+  }
+  // WebP — RIFF container, VP8 / VP8L / VP8X
+  if (buf.length >= 30 && buf.toString("ascii", 0, 4) === "RIFF" && buf.toString("ascii", 8, 12) === "WEBP") {
+    const fmt = buf.toString("ascii", 12, 16);
+    if (fmt === "VP8 ") return { width: buf.readUInt16LE(26) & 0x3fff, height: buf.readUInt16LE(28) & 0x3fff };
+    if (fmt === "VP8L") { const b = buf.readUInt32LE(21); return { width: (b & 0x3fff) + 1, height: ((b >> 14) & 0x3fff) + 1 }; }
+    if (fmt === "VP8X") {
+      return {
+        width: 1 + ((buf[24] | (buf[25] << 8) | (buf[26] << 16)) & 0xffffff),
+        height: 1 + ((buf[27] | (buf[28] << 8) | (buf[29] << 16)) & 0xffffff),
+      };
+    }
+  }
+  return null;
+}
+
+/** Scale natural dimensions to fit within a max box (px), preserving aspect ratio. */
+export function scaleToBox(
+  natural: { width: number; height: number },
+  maxW: number,
+  maxH: number
+): { width: number; height: number } {
+  const s = Math.min(maxW / natural.width, maxH / natural.height);
+  return { width: Math.round(natural.width * s), height: Math.round(natural.height * s) };
+}
--- a/App/lib/po-export-layout.ts
+++ b/App/lib/po-export-layout.ts
@ -0,0 +1,32 @@
+// Geometry for the exported PO's left signatory block (cols A-D).
+// The approver signature is centred over the name; the company stamp/seal sits to
+// its RIGHT with a gap so it never overlays the signature or name — important
+// because uploaded signatures/stamps aren't always transparent PNGs.
+
+export interface Size { width: number; height: number }
+
+export interface SignatoryLayout {
+  sigLeft: number | null;   // px from the block's left edge, or null when no signature
+  stampLeft: number | null; // px from the block's left edge, or null when no stamp
+}
+
+export function signatoryLayout(opts: {
+  blockPx: number;
+  sig: Size | null;
+  stamp: Size | null;
+  gap?: number;
+}): SignatoryLayout {
+  const gap = opts.gap ?? 10;
+  const sigLeft = opts.sig ? Math.round((opts.blockPx - opts.sig.width) / 2) : null; // centred
+
+  let stampLeft: number | null = null;
+  if (opts.stamp) {
+    stampLeft =
+      sigLeft != null && opts.sig
+        ? Math.min(opts.blockPx - opts.stamp.width, sigLeft + opts.sig.width + gap) // clear of the signature
+        : opts.blockPx - opts.stamp.width - 6; // no signature → right-align in the block
+    stampLeft = Math.max(0, stampLeft);
+  }
+
+  return { sigLeft, stampLeft };
+}
--- a/App/tests/unit/cancel-po-controls.test.tsx
+++ b/App/tests/unit/cancel-po-controls.test.tsx
@ -0,0 +1,45 @@
+import { describe, it, expect, vi } from "vitest";
+import { render, screen, fireEvent } from "@testing-library/react";
+
+vi.mock("next/navigation", () => ({ useRouter: () => ({ refresh: vi.fn(), push: vi.fn() }) }));
+vi.mock("@/app/(portal)/po/[id]/actions", () => ({ cancelPo: vi.fn(), supersedePo: vi.fn() }));
+
+import { CancelPoButton } from "@/components/po/cancel-po-controls";
+
+// Regression guard: the theme only defines danger / -50 / -100 / -700, so an
+// undefined shade like bg-danger-600 renders no background → the button was
+// invisible (white text on nothing). Both cancel buttons must use `bg-danger`.
+
+describe("CancelPoButton", () => {
+  it("renders the trigger as a filled red (bg-danger) button with white text", () => {
+    render(<CancelPoButton poId="po1" poNumber="PO-1" />);
+    const btn = screen.getByRole("button", { name: "Cancel PO" });
+    // standalone `bg-danger` (a defined token), NOT `bg-danger-600` (undefined → invisible)
+    expect(btn.className).toMatch(/(?:^|\s)bg-danger(?:\s|$)/);
+    expect(btn.className).toContain("text-white");
+  });
+
+  it("opens a modal whose confirm button is a visible filled danger button", () => {
+    render(<CancelPoButton poId="po1" poNumber="PO-1" />);
+    fireEvent.click(screen.getByRole("button", { name: "Cancel PO" }));
+
+    const confirm = screen.getByRole("button", { name: "Cancel this PO" });
+    expect(confirm.className).toMatch(/(?:^|\s)bg-danger(?:\s|$)/);
+    expect(confirm.className).toContain("text-white");
+
+    // Keep PO is always present as the safe default.
+    expect(screen.getByRole("button", { name: "Keep PO" })).toBeInTheDocument();
+  });
+
+  it("keeps the confirm action disabled until 'cancel' is typed and a reason given", () => {
+    render(<CancelPoButton poId="po1" poNumber="PO-1" />);
+    fireEvent.click(screen.getByRole("button", { name: "Cancel PO" }));
+
+    const confirm = screen.getByRole("button", { name: "Cancel this PO" }) as HTMLButtonElement;
+    expect(confirm.disabled).toBe(true);
+
+    fireEvent.change(screen.getByPlaceholderText(/Duplicate order/i), { target: { value: "No longer needed" } });
+    fireEvent.change(screen.getByPlaceholderText("cancel"), { target: { value: "cancel" } });
+    expect(confirm.disabled).toBe(false);
+  });
+});
--- a/App/tests/unit/image-size.test.ts
+++ b/App/tests/unit/image-size.test.ts
@ -0,0 +1,55 @@
+import { describe, it, expect } from "vitest";
+import { getImageSize, scaleToBox } from "@/lib/image-size";
+
+function fakePng(width: number, height: number): Buffer {
+  const b = Buffer.alloc(24);
+  b[0] = 0x89; b[1] = 0x50; b[2] = 0x4e; b[3] = 0x47; // PNG signature start
+  b.writeUInt32BE(width, 16);
+  b.writeUInt32BE(height, 20);
+  return b;
+}
+
+function fakeJpeg(width: number, height: number): Buffer {
+  const b = Buffer.alloc(20);
+  b[0] = 0xff; b[1] = 0xd8;       // SOI
+  b[2] = 0xff; b[3] = 0xc0;       // SOF0 marker
+  b.writeUInt16BE(0x11, 4);       // segment length
+  b[6] = 8;                        // precision
+  b.writeUInt16BE(height, 7);
+  b.writeUInt16BE(width, 9);
+  return b;
+}
+
+describe("getImageSize", () => {
+  it("reads PNG dimensions", () => {
+    expect(getImageSize(fakePng(640, 480))).toEqual({ width: 640, height: 480 });
+  });
+
+  it("reads JPEG dimensions from the SOF marker", () => {
+    expect(getImageSize(fakeJpeg(1024, 768))).toEqual({ width: 1024, height: 768 });
+  });
+
+  it("returns null for non-image data", () => {
+    expect(getImageSize(Buffer.from("not an image at all"))).toBeNull();
+  });
+});
+
+describe("scaleToBox", () => {
+  it("preserves a square aspect ratio (downscale by the binding side)", () => {
+    const r = scaleToBox({ width: 200, height: 200 }, 96, 52);
+    expect(r.width).toBe(r.height); // stays square — never stretched
+    expect(r.height).toBeLessThanOrEqual(52);
+  });
+
+  it("fits a wide image to the width and keeps the ratio", () => {
+    const r = scaleToBox({ width: 360, height: 96 }, 165, 44);
+    expect(r.width).toBeLessThanOrEqual(165);
+    expect(r.height).toBeLessThanOrEqual(44);
+    expect(r.width / r.height).toBeCloseTo(360 / 96, 1);
+  });
+
+  it("keeps the watermark's landscape ratio", () => {
+    const r = scaleToBox({ width: 1400, height: 1000 }, 880, 720);
+    expect(r).toEqual({ width: 880, height: 629 });
+  });
+});
--- a/App/tests/unit/po-export-layout.test.ts
+++ b/App/tests/unit/po-export-layout.test.ts
@ -0,0 +1,39 @@
+import { describe, it, expect } from "vitest";
+import { signatoryLayout } from "@/lib/po-export-layout";
+
+const BLOCK = 503; // px width of the A-D signatory block
+
+describe("signatoryLayout", () => {
+  it("centres the signature in the block", () => {
+    const { sigLeft } = signatoryLayout({ blockPx: BLOCK, sig: { width: 153, height: 44 }, stamp: null });
+    expect(sigLeft).not.toBeNull();
+    expect(sigLeft! + 153 / 2).toBeCloseTo(BLOCK / 2, 0); // centre ≈ block centre
+  });
+
+  it("places the stamp to the RIGHT of the signature with no overlap", () => {
+    const sig = { width: 153, height: 44 };
+    const stamp = { width: 67, height: 66 };
+    const { sigLeft, stampLeft } = signatoryLayout({ blockPx: BLOCK, sig, stamp, gap: 10 });
+    expect(stampLeft! ).toBeGreaterThanOrEqual(sigLeft! + sig.width); // starts at/after signature ends
+    expect(stampLeft! + stamp.width).toBeLessThanOrEqual(BLOCK);     // stays inside the block
+  });
+
+  it("never overlaps even with the widest signature + stamp", () => {
+    const sig = { width: 165, height: 44 };   // scaleToBox caps
+    const stamp = { width: 80, height: 66 };   // scaleToBox caps
+    const { sigLeft, stampLeft } = signatoryLayout({ blockPx: BLOCK, sig, stamp });
+    expect(stampLeft!).toBeGreaterThanOrEqual(sigLeft! + sig.width);
+    expect(stampLeft! + stamp.width).toBeLessThanOrEqual(BLOCK);
+  });
+
+  it("right-aligns the stamp when there is no signature", () => {
+    const { sigLeft, stampLeft } = signatoryLayout({ blockPx: BLOCK, sig: null, stamp: { width: 67, height: 66 } });
+    expect(sigLeft).toBeNull();
+    expect(stampLeft! + 67).toBeLessThanOrEqual(BLOCK);
+    expect(stampLeft!).toBeGreaterThan(BLOCK / 2); // on the right side
+  });
+
+  it("returns nulls when there are no images", () => {
+    expect(signatoryLayout({ blockPx: BLOCK, sig: null, stamp: null })).toEqual({ sigLeft: null, stampLeft: null });
+  });
+});
--- a/App/tests/unit/vendors-table.test.tsx
+++ b/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();
+  });
+});
--- a/Wireframe/design-system.html
+++ b/Wireframe/design-system.html
@ -0,0 +1,534 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+<title>PPMS — Design System</title>
+<script src="https://cdn.tailwindcss.com"></script>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+<script>
+  // ── EXACT theme tokens from App/app/globals.css (@theme) ──
+  tailwind.config = {
+    theme: {
+      extend: {
+        colors: {
+          primary: { 50:"#eff6ff",100:"#dbeafe",200:"#bfdbfe",500:"#3b82f6",600:"#2563eb",700:"#1d4ed8",800:"#1e40af" },
+          success: { DEFAULT:"#16a34a", 50:"#f0fdf4",100:"#dcfce7",700:"#15803d" },
+          warning: { DEFAULT:"#d97706", 50:"#fffbeb",100:"#fef3c7",700:"#b45309" },
+          danger:  { DEFAULT:"#dc2626", 50:"#fef2f2",100:"#fee2e2",700:"#b91c1c" },
+          neutral: { 50:"#fafafa",100:"#f5f5f5",200:"#e5e5e5",300:"#d4d4d4",400:"#a3a3a3",500:"#737373",600:"#525252",700:"#404040",800:"#262626",900:"#171717" },
+        },
+        fontFamily: {
+          sans: ['Inter','ui-sans-serif','system-ui','sans-serif'],
+          mono: ['"JetBrains Mono"','ui-monospace','monospace'],
+        },
+      },
+    },
+  };
+</script>
+<style>
+  body { font-family:'Inter',ui-sans-serif,system-ui,sans-serif; }
+  code, pre, .mono { font-family:'JetBrains Mono',ui-monospace,monospace; }
+  .toc a.active { color:#1d4ed8; font-weight:600; }
+  ::-webkit-scrollbar { width:9px; height:9px; }
+  ::-webkit-scrollbar-thumb { background:#d4d4d4; border-radius:5px; }
+  /* click-to-copy snippet */
+  .snip { position:relative; }
+  .snip code { cursor:copy; }
+  .snip .copied { position:absolute; top:6px; right:8px; font-size:10px; color:#16a34a; opacity:0; transition:opacity .2s; }
+  .snip.show .copied { opacity:1; }
+  html { scroll-behavior:smooth; scroll-padding-top:84px; }
+</style>
+</head>
+<body class="bg-neutral-50 text-neutral-900">
+
+<!-- Top bar -->
+<header class="sticky top-0 z-30 flex h-16 items-center gap-3 border-b border-neutral-200 bg-white/90 px-6 backdrop-blur">
+  <div class="flex h-8 w-8 items-center justify-center rounded-lg bg-primary-600">
+    <svg class="h-4 w-4 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="22" x2="12" y2="8"/><path d="M5 12H2a10 10 0 0 0 20 0h-3"/><circle cx="12" cy="5" r="3"/></svg>
+  </div>
+  <div>
+    <p class="text-sm font-semibold leading-tight">PPMS Design System</p>
+    <p class="text-xs text-neutral-400 leading-tight">Pelagia Purchase Management System · v1</p>
+  </div>
+  <div class="ml-auto hidden sm:flex items-center gap-2 text-xs text-neutral-400">
+    <span class="rounded-full bg-neutral-100 px-2 py-0.5">Next.js 15</span>
+    <span class="rounded-full bg-neutral-100 px-2 py-0.5">Tailwind v4</span>
+    <span class="rounded-full bg-neutral-100 px-2 py-0.5">lucide-react</span>
+    <span class="rounded-full bg-neutral-100 px-2 py-0.5">recharts</span>
+  </div>
+</header>
+
+<div class="mx-auto flex max-w-7xl gap-8 px-6">
+  <!-- TOC -->
+  <nav class="toc sticky top-16 hidden h-[calc(100vh-4rem)] w-52 shrink-0 overflow-y-auto py-8 text-sm lg:block">
+    <p class="mb-2 px-2 text-xs font-semibold uppercase tracking-wider text-neutral-400">Foundations</p>
+    <a href="#overview" class="block rounded px-2 py-1.5 text-neutral-600 hover:bg-neutral-100">Overview</a>
+    <a href="#color" class="block rounded px-2 py-1.5 text-neutral-600 hover:bg-neutral-100">Color</a>
+    <a href="#type" class="block rounded px-2 py-1.5 text-neutral-600 hover:bg-neutral-100">Typography</a>
+    <a href="#tokens" class="block rounded px-2 py-1.5 text-neutral-600 hover:bg-neutral-100">Radius · Shadow · Space</a>
+    <a href="#icons" class="block rounded px-2 py-1.5 text-neutral-600 hover:bg-neutral-100">Icons</a>
+    <p class="mb-2 mt-4 px-2 text-xs font-semibold uppercase tracking-wider text-neutral-400">Layout</p>
+    <a href="#shell" class="block rounded px-2 py-1.5 text-neutral-600 hover:bg-neutral-100">App shell</a>
+    <a href="#pageheader" class="block rounded px-2 py-1.5 text-neutral-600 hover:bg-neutral-100">Page header</a>
+    <p class="mb-2 mt-4 px-2 text-xs font-semibold uppercase tracking-wider text-neutral-400">Components</p>
+    <a href="#buttons" class="block rounded px-2 py-1.5 text-neutral-600 hover:bg-neutral-100">Buttons</a>
+    <a href="#badges" class="block rounded px-2 py-1.5 text-neutral-600 hover:bg-neutral-100">Badges</a>
+    <a href="#status" class="block rounded px-2 py-1.5 text-neutral-600 hover:bg-neutral-100">PO status badges</a>
+    <a href="#cards" class="block rounded px-2 py-1.5 text-neutral-600 hover:bg-neutral-100">Cards & KPIs</a>
+    <a href="#forms" class="block rounded px-2 py-1.5 text-neutral-600 hover:bg-neutral-100">Forms</a>
+    <a href="#segmented" class="block rounded px-2 py-1.5 text-neutral-600 hover:bg-neutral-100">Tabs & segmented</a>
+    <a href="#table" class="block rounded px-2 py-1.5 text-neutral-600 hover:bg-neutral-100">Tables</a>
+    <a href="#alerts" class="block rounded px-2 py-1.5 text-neutral-600 hover:bg-neutral-100">Alerts & dialog</a>
+    <a href="#charts" class="block rounded px-2 py-1.5 text-neutral-600 hover:bg-neutral-100">Charts</a>
+    <p class="mb-2 mt-4 px-2 text-xs font-semibold uppercase tracking-wider text-neutral-400">Conventions</p>
+    <a href="#format" class="block rounded px-2 py-1.5 text-neutral-600 hover:bg-neutral-100">Formatting</a>
+    <a href="#voice" class="block rounded px-2 py-1.5 text-neutral-600 hover:bg-neutral-100">Do & don't</a>
+  </nav>
+
+  <!-- Content -->
+  <main class="min-w-0 flex-1 space-y-16 py-8">
+
+    <!-- OVERVIEW -->
+    <section id="overview">
+      <h1 class="text-2xl font-semibold tracking-tight">Design System</h1>
+      <p class="mt-2 max-w-2xl text-sm leading-relaxed text-neutral-600">
+        The visual language of the Pelagia Purchase Management System — an internal PO tool for a maritime company.
+        Everything here is lifted from the live codebase (<code class="rounded bg-neutral-100 px-1 text-xs">app/globals.css</code> +
+        <code class="rounded bg-neutral-100 px-1 text-xs">components/ui/*</code>), so screens built from these tokens drop straight in.
+      </p>
+      <div class="mt-4 grid gap-3 sm:grid-cols-2 lg:grid-cols-4 text-sm">
+        <div class="rounded-lg border border-neutral-200 bg-white p-4"><p class="text-xs font-medium uppercase tracking-wider text-neutral-400">Framework</p><p class="mt-1 font-medium">Next.js 15 · App Router</p></div>
+        <div class="rounded-lg border border-neutral-200 bg-white p-4"><p class="text-xs font-medium uppercase tracking-wider text-neutral-400">Styling</p><p class="mt-1 font-medium">Tailwind CSS v4</p></div>
+        <div class="rounded-lg border border-neutral-200 bg-white p-4"><p class="text-xs font-medium uppercase tracking-wider text-neutral-400">Primitives</p><p class="mt-1 font-medium">Radix UI · CVA</p></div>
+        <div class="rounded-lg border border-neutral-200 bg-white p-4"><p class="text-xs font-medium uppercase tracking-wider text-neutral-400">Charts · Icons</p><p class="mt-1 font-medium">recharts · lucide</p></div>
+      </div>
+      <p class="mt-4 text-xs text-neutral-400">Tip: click any <code class="rounded bg-neutral-100 px-1">code snippet</code> to copy it.</p>
+    </section>
+
+    <!-- COLOR -->
+    <section id="color">
+      <h2 class="text-lg font-semibold">Color</h2>
+      <p class="mt-1 max-w-2xl text-sm text-neutral-600">Five ramps. <b>Primary</b> = actions, links, active nav. <b>Success</b> = approved / paid. <b>Warning</b> = needs action (edits, vendor ID, partial). <b>Danger</b> = rejected / destructive. <b>Neutral</b> = all structure, text and borders.</p>
+
+      <div class="mt-5 space-y-5" id="ramps"></div>
+    </section>
+
+    <!-- TYPOGRAPHY -->
+    <section id="type">
+      <h2 class="text-lg font-semibold">Typography</h2>
+      <p class="mt-1 text-sm text-neutral-600"><b>Inter</b> for UI, <b>JetBrains Mono</b> for codes &amp; numbers (PO numbers, accounting codes).</p>
+      <div class="mt-4 divide-y divide-neutral-100 rounded-lg border border-neutral-200 bg-white">
+        <div class="flex items-baseline justify-between gap-4 p-4"><p class="text-2xl font-semibold text-neutral-900">Page title</p><code class="text-xs text-neutral-400">text-2xl font-semibold</code></div>
+        <div class="flex items-baseline justify-between gap-4 p-4"><p class="text-lg font-semibold text-neutral-900">Section heading</p><code class="text-xs text-neutral-400">text-lg font-semibold</code></div>
+        <div class="flex items-baseline justify-between gap-4 p-4"><p class="text-base font-semibold text-neutral-900">Card title</p><code class="text-xs text-neutral-400">text-base font-semibold</code></div>
+        <div class="flex items-baseline justify-between gap-4 p-4"><p class="text-sm text-neutral-700">Body / table text — the workhorse size for the whole app.</p><code class="text-xs text-neutral-400">text-sm</code></div>
+        <div class="flex items-baseline justify-between gap-4 p-4"><p class="text-sm text-neutral-500">Muted description &amp; helper text</p><code class="text-xs text-neutral-400">text-sm text-neutral-500</code></div>
+        <div class="flex items-baseline justify-between gap-4 p-4"><p class="text-xs font-semibold uppercase tracking-wider text-neutral-400">Eyebrow / label</p><code class="text-xs text-neutral-400">text-xs uppercase tracking-wider</code></div>
+        <div class="flex items-baseline justify-between gap-4 p-4"><p class="mono text-sm text-neutral-700">PMS/HNR1/9000/2024-25</p><code class="text-xs text-neutral-400">font-mono</code></div>
+      </div>
+    </section>
+
+    <!-- TOKENS -->
+    <section id="tokens">
+      <h2 class="text-lg font-semibold">Radius · Shadow · Spacing</h2>
+      <div class="mt-4 grid gap-4 sm:grid-cols-3">
+        <div class="rounded-lg border border-neutral-200 bg-white p-5">
+          <p class="mb-3 text-xs font-semibold uppercase tracking-wider text-neutral-400">Radius</p>
+          <div class="flex items-end gap-4">
+            <div class="text-center"><div class="h-12 w-12 rounded-md border border-neutral-300 bg-neutral-50"></div><code class="mt-1 block text-[11px] text-neutral-400">rounded-md</code></div>
+            <div class="text-center"><div class="h-12 w-12 rounded-lg border border-neutral-300 bg-neutral-50"></div><code class="mt-1 block text-[11px] text-neutral-400">rounded-lg</code></div>
+            <div class="text-center"><div class="h-12 w-12 rounded-full border border-neutral-300 bg-neutral-50"></div><code class="mt-1 block text-[11px] text-neutral-400">rounded-full</code></div>
+          </div>
+          <p class="mt-3 text-xs text-neutral-500"><b>lg</b> for cards/buttons/inputs, <b>md</b> for nav items, <b>full</b> for badges &amp; avatars.</p>
+        </div>
+        <div class="rounded-lg border border-neutral-200 bg-white p-5">
+          <p class="mb-3 text-xs font-semibold uppercase tracking-wider text-neutral-400">Elevation</p>
+          <div class="flex items-end gap-4">
+            <div class="text-center"><div class="h-12 w-12 rounded-lg border border-neutral-200 bg-white"></div><code class="mt-1 block text-[11px] text-neutral-400">border</code></div>
+            <div class="text-center"><div class="h-12 w-12 rounded-lg border border-neutral-200 bg-white shadow-sm"></div><code class="mt-1 block text-[11px] text-neutral-400">shadow-sm</code></div>
+            <div class="text-center"><div class="h-12 w-12 rounded-lg bg-white shadow-lg"></div><code class="mt-1 block text-[11px] text-neutral-400">shadow-lg</code></div>
+          </div>
+          <p class="mt-3 text-xs text-neutral-500">Flat by default — a 1px <b>border-neutral-200</b> separates surfaces. <b>shadow-sm</b> on cards, <b>shadow-lg</b> only for popovers/dialogs.</p>
+        </div>
+        <div class="rounded-lg border border-neutral-200 bg-white p-5">
+          <p class="mb-3 text-xs font-semibold uppercase tracking-wider text-neutral-400">Spacing rhythm</p>
+          <div class="space-y-1.5">
+            <div class="flex items-center gap-2"><div class="h-3 bg-primary-200" style="width:16px"></div><code class="text-[11px] text-neutral-400">gap-2 · 8px</code></div>
+            <div class="flex items-center gap-2"><div class="h-3 bg-primary-200" style="width:24px"></div><code class="text-[11px] text-neutral-400">gap-3 · 12px (rows)</code></div>
+            <div class="flex items-center gap-2"><div class="h-3 bg-primary-200" style="width:40px"></div><code class="text-[11px] text-neutral-400">p-5 · 20px (cards)</code></div>
+            <div class="flex items-center gap-2"><div class="h-3 bg-primary-200" style="width:48px"></div><code class="text-[11px] text-neutral-400">p-6 / gap-6 · 24px</code></div>
+          </div>
+          <p class="mt-3 text-xs text-neutral-500">Page padding <b>p-6</b>; cards <b>p-5</b>/<b>p-6</b>; controls gap <b>gap-2/3</b>.</p>
+        </div>
+      </div>
+    </section>
+
+    <!-- ICONS -->
+    <section id="icons">
+      <h2 class="text-lg font-semibold">Icons</h2>
+      <p class="mt-1 text-sm text-neutral-600"><b>lucide-react</b>, stroke 2, sized <code class="rounded bg-neutral-100 px-1 text-xs">h-4 w-4</code> inline / <code class="rounded bg-neutral-100 px-1 text-xs">h-5 w-5</code> standalone. They inherit text color (<code class="rounded bg-neutral-100 px-1 text-xs">currentColor</code>).</p>
+      <div class="mt-4 flex flex-wrap gap-3 rounded-lg border border-neutral-200 bg-white p-5 text-neutral-600" id="iconrow"></div>
+    </section>
+
+    <!-- APP SHELL -->
+    <section id="shell">
+      <h2 class="text-lg font-semibold">App shell</h2>
+      <p class="mt-1 max-w-2xl text-sm text-neutral-600">Fixed <b>w-60</b> sidebar (white, <code class="rounded bg-neutral-100 px-1 text-xs">border-r</code>) + <b>h-16</b> top bar + scrollable <code class="rounded bg-neutral-100 px-1 text-xs">main</code> on <code class="rounded bg-neutral-100 px-1 text-xs">bg-neutral-50</code> with <b>p-6</b>. Nav links: <code class="rounded bg-neutral-100 px-1 text-xs">rounded-md px-3 py-2 text-sm font-medium</code>; active = <code class="rounded bg-neutral-100 px-1 text-xs">bg-primary-50 text-primary-700</code>; section eyebrow = <code class="rounded bg-neutral-100 px-1 text-xs">text-xs uppercase tracking-wider text-neutral-400</code>.</p>
+      <div class="mt-4 overflow-hidden rounded-lg border border-neutral-200">
+        <div class="flex h-80 bg-neutral-50">
+          <aside class="flex w-56 shrink-0 flex-col border-r border-neutral-200 bg-white">
+            <div class="flex h-14 items-center gap-2.5 border-b border-neutral-200 px-4">
+              <div class="flex h-8 w-8 items-center justify-center rounded-lg bg-primary-600"><svg class="h-4 w-4 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="12" y1="22" x2="12" y2="8"/><path d="M5 12H2a10 10 0 0 0 20 0h-3"/><circle cx="12" cy="5" r="3"/></svg></div>
+              <span class="text-sm font-semibold">PPMS</span>
+            </div>
+            <nav class="flex-1 space-y-0.5 p-3 text-sm">
+              <a class="flex items-center gap-3 rounded-md bg-primary-50 px-3 py-2 font-medium text-primary-700"><span class="h-4 w-4 rounded bg-primary-600/20"></span>Dashboard</a>
+              <a class="flex items-center gap-3 rounded-md px-3 py-2 font-medium text-neutral-600 hover:bg-neutral-100"><span class="h-4 w-4 rounded bg-neutral-300"></span>New PO</a>
+              <a class="flex items-center gap-3 rounded-md px-3 py-2 font-medium text-neutral-600 hover:bg-neutral-100"><span class="h-4 w-4 rounded bg-neutral-300"></span>Approvals</a>
+              <p class="px-3 pb-1 pt-4 text-xs font-semibold uppercase tracking-wider text-neutral-400">Administration</p>
+              <a class="flex items-center gap-3 rounded-md px-3 py-2 font-medium text-neutral-600 hover:bg-neutral-100"><span class="h-4 w-4 rounded bg-neutral-300"></span>Users</a>
+            </nav>
+          </aside>
+          <div class="flex flex-1 flex-col">
+            <div class="flex h-14 items-center justify-between border-b border-neutral-200 bg-white px-5">
+              <span class="text-sm font-medium text-neutral-500">Dashboard</span>
+              <div class="flex items-center gap-2"><span class="h-7 w-7 rounded-full bg-neutral-200"></span></div>
+            </div>
+            <div class="flex-1 space-y-3 overflow-hidden p-5">
+              <div class="h-4 w-40 rounded bg-neutral-200"></div>
+              <div class="grid grid-cols-3 gap-3">
+                <div class="h-16 rounded-lg border border-neutral-200 bg-white"></div>
+                <div class="h-16 rounded-lg border border-neutral-200 bg-white"></div>
+                <div class="h-16 rounded-lg border border-neutral-200 bg-white"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- PAGE HEADER -->
+    <section id="pageheader">
+      <h2 class="text-lg font-semibold">Page header</h2>
+      <p class="mt-1 text-sm text-neutral-600">Title + muted subtitle on the left, primary action on the right.</p>
+      <div class="mt-4 rounded-lg border border-neutral-200 bg-white p-6">
+        <div class="flex items-start justify-between gap-4">
+          <div>
+            <h1 class="text-2xl font-semibold text-neutral-900">Purchase Orders</h1>
+            <p class="mt-1 text-sm text-neutral-500">Create, track and approve orders across the fleet.</p>
+          </div>
+          <button class="inline-flex h-10 items-center gap-2 rounded-lg bg-primary-600 px-4 text-sm font-medium text-white hover:bg-primary-700">
+            <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>New PO
+          </button>
+        </div>
+      </div>
+      <div class="snip mt-2"><pre class="overflow-x-auto rounded-lg bg-neutral-900 p-3 text-xs leading-relaxed text-neutral-100"><code>&lt;div class="flex items-start justify-between gap-4"&gt;
+  &lt;div&gt;
+    &lt;h1 class="text-2xl font-semibold text-neutral-900"&gt;Title&lt;/h1&gt;
+    &lt;p class="mt-1 text-sm text-neutral-500"&gt;Subtitle&lt;/p&gt;
+  &lt;/div&gt;
+  &lt;Button&gt;New PO&lt;/Button&gt;
+&lt;/div&gt;</code><span class="copied">copied ✓</span></pre></div>
+    </section>
+
+    <!-- BUTTONS -->
+    <section id="buttons">
+      <h2 class="text-lg font-semibold">Buttons</h2>
+      <p class="mt-1 text-sm text-neutral-600">From <code class="rounded bg-neutral-100 px-1 text-xs">components/ui/button.tsx</code> (CVA). Base: <code class="rounded bg-neutral-100 px-1 text-xs">inline-flex items-center gap-2 rounded-lg text-sm font-medium</code> + focus ring.</p>
+      <div class="mt-4 space-y-4 rounded-lg border border-neutral-200 bg-white p-5">
+        <div class="flex flex-wrap items-center gap-3">
+          <button class="inline-flex h-10 items-center gap-2 rounded-lg bg-primary-600 px-4 text-sm font-medium text-white hover:bg-primary-700">Default</button>
+          <button class="inline-flex h-10 items-center gap-2 rounded-lg border border-neutral-300 bg-white px-4 text-sm font-medium text-neutral-700 hover:bg-neutral-50">Secondary</button>
+          <button class="inline-flex h-10 items-center gap-2 rounded-lg bg-success px-4 text-sm font-medium text-white hover:opacity-90">Success</button>
+          <button class="inline-flex h-10 items-center gap-2 rounded-lg border border-warning bg-warning-50 px-4 text-sm font-medium text-warning-700 hover:bg-warning-100">Warning</button>
+          <button class="inline-flex h-10 items-center gap-2 rounded-lg bg-danger px-4 text-sm font-medium text-white hover:opacity-90">Destructive</button>
+          <button class="inline-flex h-10 items-center gap-2 rounded-lg px-4 text-sm font-medium text-neutral-700 hover:bg-neutral-100">Ghost</button>
+          <button class="inline-flex h-10 items-center gap-2 rounded-lg px-1 text-sm font-medium text-primary-600 underline-offset-4 hover:underline">Link</button>
+          <button class="inline-flex h-10 items-center gap-2 rounded-lg bg-primary-600 px-4 text-sm font-medium text-white opacity-60" disabled>Disabled</button>
+        </div>
+        <div class="flex flex-wrap items-center gap-3 border-t border-neutral-100 pt-4">
+          <button class="inline-flex h-8 items-center gap-1.5 rounded-lg bg-primary-600 px-3 text-xs font-medium text-white">sm · h-8</button>
+          <button class="inline-flex h-10 items-center gap-2 rounded-lg bg-primary-600 px-4 text-sm font-medium text-white">md · h-10</button>
+          <button class="inline-flex h-11 items-center gap-2 rounded-lg bg-primary-600 px-5 text-sm font-medium text-white">lg · h-11</button>
+          <button class="inline-flex h-10 w-10 items-center justify-center rounded-lg border border-neutral-300 bg-white text-neutral-700"><svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg></button>
+        </div>
+      </div>
+      <div class="snip mt-2"><pre class="overflow-x-auto rounded-lg bg-neutral-900 p-3 text-xs text-neutral-100"><code>&lt;Button variant="default|secondary|success|warning|destructive|ghost|link" size="sm|md|lg|icon"&gt;</code><span class="copied">copied ✓</span></pre></div>
+    </section>
+
+    <!-- BADGES -->
+    <section id="badges">
+      <h2 class="text-lg font-semibold">Badges</h2>
+      <p class="mt-1 text-sm text-neutral-600">From <code class="rounded bg-neutral-100 px-1 text-xs">components/ui/badge.tsx</code>. Base: <code class="rounded bg-neutral-100 px-1 text-xs">rounded-full px-2.5 py-0.5 text-xs font-medium</code>.</p>
+      <div class="mt-4 flex flex-wrap items-center gap-3 rounded-lg border border-neutral-200 bg-white p-5">
+        <span class="rounded-full bg-primary-100 px-2.5 py-0.5 text-xs font-medium text-primary-700">default</span>
+        <span class="rounded-full bg-neutral-100 px-2.5 py-0.5 text-xs font-medium text-neutral-700">secondary</span>
+        <span class="rounded-full bg-success-100 px-2.5 py-0.5 text-xs font-medium text-success-700">success</span>
+        <span class="rounded-full bg-warning-100 px-2.5 py-0.5 text-xs font-medium text-warning-700">warning</span>
+        <span class="rounded-full bg-danger-100 px-2.5 py-0.5 text-xs font-medium text-danger-700">danger</span>
+        <span class="rounded-full border border-neutral-300 px-2.5 py-0.5 text-xs font-medium text-neutral-600">outline</span>
+      </div>
+    </section>
+
+    <!-- PO STATUS -->
+    <section id="status">
+      <h2 class="text-lg font-semibold">PO status badges</h2>
+      <p class="mt-1 max-w-2xl text-sm text-neutral-600">The 13 lifecycle states map to badge variants in <code class="rounded bg-neutral-100 px-1 text-xs">lib/utils.ts</code> (<code class="rounded bg-neutral-100 px-1 text-xs">PO_STATUS_LABELS</code> / <code class="rounded bg-neutral-100 px-1 text-xs">PO_STATUS_VARIANTS</code>). Reuse this mapping — don't invent new status colors.</p>
+      <div class="mt-4 grid gap-2 rounded-lg border border-neutral-200 bg-white p-5 sm:grid-cols-2 lg:grid-cols-3" id="statusgrid"></div>
+    </section>
+
+    <!-- CARDS -->
+    <section id="cards">
+      <h2 class="text-lg font-semibold">Cards &amp; KPI stats</h2>
+      <p class="mt-1 text-sm text-neutral-600">Card = <code class="rounded bg-neutral-100 px-1 text-xs">rounded-lg border border-neutral-200 bg-white shadow-sm</code>. KPI stat cards drop the shadow and use <b>p-4/5</b>.</p>
+      <div class="mt-4 grid gap-4 lg:grid-cols-2">
+        <div class="rounded-lg border border-neutral-200 bg-white shadow-sm">
+          <div class="flex flex-col gap-1 p-6 pb-4">
+            <h3 class="text-base font-semibold text-neutral-900">Vendor details</h3>
+            <p class="text-sm text-neutral-500">GST-verified supplier on file.</p>
+          </div>
+          <div class="space-y-1 p-6 pt-0 text-sm text-neutral-600"><p>Acme Marine Supplies Pvt Ltd</p><p class="mono text-xs text-neutral-400">GSTIN 27ABCDE1234F1Z5</p></div>
+          <div class="flex items-center gap-2 p-6 pt-0"><button class="inline-flex h-8 items-center rounded-lg bg-primary-600 px-3 text-xs font-medium text-white">Edit</button><button class="inline-flex h-8 items-center rounded-lg border border-neutral-300 bg-white px-3 text-xs font-medium text-neutral-700">View POs</button></div>
+        </div>
+        <div class="grid grid-cols-2 gap-4">
+          <div class="rounded-lg border border-neutral-200 bg-white p-4"><p class="text-xs font-medium uppercase tracking-wider text-neutral-400">Open POs</p><p class="mt-1.5 text-xl font-semibold">24</p><p class="mt-0.5 text-xs text-success-700">▲ 8% vs last month</p></div>
+          <div class="rounded-lg border border-neutral-200 bg-white p-4"><p class="text-xs font-medium uppercase tracking-wider text-neutral-400">Awaiting approval</p><p class="mt-1.5 text-xl font-semibold">7</p><p class="mt-0.5 text-xs text-neutral-400">across 3 vessels</p></div>
+          <div class="rounded-lg border border-neutral-200 bg-white p-4"><p class="text-xs font-medium uppercase tracking-wider text-neutral-400">Spend (FY)</p><p class="mt-1.5 text-xl font-semibold">₹2.4 Cr</p><p class="mt-0.5 text-xs text-neutral-400">FY 2025–26</p></div>
+          <div class="rounded-lg border border-neutral-200 bg-white p-4"><p class="text-xs font-medium uppercase tracking-wider text-neutral-400">Overdue</p><p class="mt-1.5 text-xl font-semibold">2</p><p class="mt-0.5 text-xs text-danger-700">needs attention</p></div>
+        </div>
+      </div>
+    </section>
+
+    <!-- FORMS -->
+    <section id="forms">
+      <h2 class="text-lg font-semibold">Forms</h2>
+      <p class="mt-1 text-sm text-neutral-600">Inputs from <code class="rounded bg-neutral-100 px-1 text-xs">components/ui/input.tsx</code>: <code class="rounded bg-neutral-100 px-1 text-xs">h-10 rounded-lg border-neutral-300</code>, focus <code class="rounded bg-neutral-100 px-1 text-xs">border-primary-500 ring-2 ring-primary-500/20</code>.</p>
+      <div class="mt-4 grid max-w-2xl gap-4 rounded-lg border border-neutral-200 bg-white p-6">
+        <div><label class="mb-1.5 block text-sm font-medium text-neutral-700">PO title</label><input placeholder="e.g. Engine spares — MV Pelagia Star" class="h-10 w-full rounded-lg border border-neutral-300 px-3 text-sm placeholder:text-neutral-400 focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-500/20" /></div>
+        <div class="grid grid-cols-2 gap-4">
+          <div><label class="mb-1.5 block text-sm font-medium text-neutral-700">Cost centre</label><select class="h-10 w-full rounded-lg border border-neutral-300 bg-white px-3 text-sm text-neutral-700 focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-500/20"><option>MV Pelagia Star</option><option>MV Ocean Dawn</option></select></div>
+          <div><label class="mb-1.5 block text-sm font-medium text-neutral-700">Date required</label><input type="date" class="h-10 w-full rounded-lg border border-neutral-300 px-3 text-sm text-neutral-700 focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-500/20" /></div>
+        </div>
+        <div><label class="mb-1.5 block text-sm font-medium text-neutral-700">Notes</label><textarea rows="3" placeholder="Optional…" class="w-full rounded-lg border border-neutral-300 px-3 py-2 text-sm placeholder:text-neutral-400 focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-500/20"></textarea></div>
+        <div><label class="mb-1.5 block text-sm font-medium text-neutral-700">Disabled</label><input disabled value="Read-only value" class="h-10 w-full cursor-not-allowed rounded-lg border border-neutral-300 bg-neutral-50 px-3 text-sm text-neutral-500 opacity-60" /></div>
+        <p class="-mt-1 text-xs text-danger-700">Inline validation error sits under the field in <code class="rounded bg-neutral-100 px-1">text-danger-700</code>.</p>
+      </div>
+    </section>
+
+    <!-- SEGMENTED / TABS -->
+    <section id="segmented">
+      <h2 class="text-lg font-semibold">Tabs &amp; segmented controls</h2>
+      <p class="mt-1 text-sm text-neutral-600">Toolbar filters use a pill segmented control; page sections use an underline tab bar.</p>
+      <div class="mt-4 flex flex-wrap items-center gap-6 rounded-lg border border-neutral-200 bg-white p-5">
+        <div class="inline-flex rounded-lg border border-neutral-200 bg-white p-0.5 text-sm">
+          <button class="rounded-md bg-primary-600 px-3 py-1 font-medium text-white shadow-sm">Monthly</button>
+          <button class="rounded-md px-3 py-1 font-medium text-neutral-500 hover:text-neutral-800">Yearly</button>
+          <button class="rounded-md px-3 py-1 font-medium text-neutral-500 hover:text-neutral-800">Weekly</button>
+        </div>
+        <div class="flex items-center gap-6 border-b border-neutral-200 text-sm">
+          <button class="-mb-px border-b-2 border-primary-600 pb-2 font-medium text-primary-700">Details</button>
+          <button class="-mb-px border-b-2 border-transparent pb-2 font-medium text-neutral-500 hover:text-neutral-800">Line items</button>
+          <button class="-mb-px border-b-2 border-transparent pb-2 font-medium text-neutral-500 hover:text-neutral-800">History</button>
+        </div>
+      </div>
+    </section>
+
+    <!-- TABLE -->
+    <section id="table">
+      <h2 class="text-lg font-semibold">Tables</h2>
+      <p class="mt-1 text-sm text-neutral-600">Header row <code class="rounded bg-neutral-100 px-1 text-xs">bg-neutral-50</code> with <code class="rounded bg-neutral-100 px-1 text-xs">text-xs uppercase tracking-wider text-neutral-400</code>; body rows <code class="rounded bg-neutral-100 px-1 text-xs">divide-y divide-neutral-100</code>, hover <code class="rounded bg-neutral-100 px-1 text-xs">hover:bg-neutral-50</code>; numbers <code class="rounded bg-neutral-100 px-1 text-xs">tabular-nums text-right</code>.</p>
+      <div class="mt-4 overflow-hidden rounded-lg border border-neutral-200 bg-white">
+        <table class="w-full text-sm">
+          <thead class="border-b border-neutral-200 bg-neutral-50 text-left text-xs font-semibold uppercase tracking-wider text-neutral-400">
+            <tr><th class="px-5 py-3">PO Number</th><th class="px-5 py-3">Vessel</th><th class="px-5 py-3">Status</th><th class="px-5 py-3 text-right">Amount</th></tr>
+          </thead>
+          <tbody class="divide-y divide-neutral-100">
+            <tr class="hover:bg-neutral-50"><td class="px-5 py-3 mono text-xs">PMS/HNR1/9001/2025-26</td><td class="px-5 py-3">MV Pelagia Star</td><td class="px-5 py-3"><span class="rounded-full bg-success-100 px-2.5 py-0.5 text-xs font-medium text-success-700">Approved</span></td><td class="px-5 py-3 text-right tabular-nums">₹4,82,000</td></tr>
+            <tr class="hover:bg-neutral-50"><td class="px-5 py-3 mono text-xs">PMS/OCD2/9002/2025-26</td><td class="px-5 py-3">MV Ocean Dawn</td><td class="px-5 py-3"><span class="rounded-full bg-warning-100 px-2.5 py-0.5 text-xs font-medium text-warning-700">Edits Requested</span></td><td class="px-5 py-3 text-right tabular-nums">₹1,15,500</td></tr>
+            <tr class="hover:bg-neutral-50"><td class="px-5 py-3 mono text-xs">PMS/CRT3/9003/2025-26</td><td class="px-5 py-3">MV Coral Trident</td><td class="px-5 py-3"><span class="rounded-full bg-neutral-100 px-2.5 py-0.5 text-xs font-medium text-neutral-700">Closed</span></td><td class="px-5 py-3 text-right tabular-nums">₹92,300</td></tr>
+          </tbody>
+        </table>
+      </div>
+    </section>
+
+    <!-- ALERTS / DIALOG -->
+    <section id="alerts">
+      <h2 class="text-lg font-semibold">Alerts &amp; dialog</h2>
+      <p class="mt-1 text-sm text-neutral-600">Inline callouts use the semantic <b>-50</b> tint + <b>-700</b> text + matching border.</p>
+      <div class="mt-4 space-y-3">
+        <div class="flex items-start gap-3 rounded-lg border border-primary-200 bg-primary-50 p-4 text-sm text-primary-800"><span class="font-medium">ℹ Info</span><span>Imported POs are created directly in the Closed state.</span></div>
+        <div class="flex items-start gap-3 rounded-lg border border-success-100 bg-success-50 p-4 text-sm text-success-700"><span class="font-medium">✓ Success</span><span>Purchase order approved and sent for payment.</span></div>
+        <div class="flex items-start gap-3 rounded-lg border border-warning-100 bg-warning-50 p-4 text-sm text-warning-700"><span class="font-medium">⚠ Warning</span><span>This vendor is unverified — verify before assigning a vendor code.</span></div>
+        <div class="flex items-start gap-3 rounded-lg border border-danger-100 bg-danger-50 p-4 text-sm text-danger-700"><span class="font-medium">✕ Error</span><span>Payment date cannot be in the future.</span></div>
+      </div>
+      <div class="mt-4">
+        <p class="mb-2 text-sm font-medium text-neutral-700">Dialog</p>
+        <div class="relative overflow-hidden rounded-lg border border-neutral-200 bg-neutral-100 p-8">
+          <div class="mx-auto max-w-sm rounded-lg border border-neutral-200 bg-white p-6 shadow-lg">
+            <h3 class="text-base font-semibold text-neutral-900">Delete accounting code?</h3>
+            <p class="mt-1 text-sm text-neutral-500">This removes <b>5110 · Fuel &amp; Lubricants</b>. This action can't be undone.</p>
+            <div class="mt-5 flex justify-end gap-2">
+              <button class="inline-flex h-10 items-center rounded-lg border border-neutral-300 bg-white px-4 text-sm font-medium text-neutral-700 hover:bg-neutral-50">Cancel</button>
+              <button class="inline-flex h-10 items-center rounded-lg bg-danger px-4 text-sm font-medium text-white hover:opacity-90">Delete</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- CHARTS -->
+    <section id="charts">
+      <h2 class="text-lg font-semibold">Charts</h2>
+      <p class="mt-1 max-w-2xl text-sm text-neutral-600"><b>recharts</b> inside a standard card. Grid <code class="rounded bg-neutral-100 px-1 text-xs">strokeDasharray="3 3"</code> in <code class="rounded bg-neutral-100 px-1 text-xs">#f0f0f0</code>; axis ticks <code class="rounded bg-neutral-100 px-1 text-xs">fontSize 11, #737373</code>; bars <code class="rounded bg-neutral-100 px-1 text-xs">radius</code>, lines <code class="rounded bg-neutral-100 px-1 text-xs">strokeWidth 2</code>. Y-axis money formatted via <code class="rounded bg-neutral-100 px-1 text-xs">formatCompactINR</code>.</p>
+      <div class="mt-4 grid gap-4 lg:grid-cols-2">
+        <div class="rounded-lg border border-neutral-200 bg-white p-5">
+          <p class="mb-4 text-sm font-semibold">Spend by cost centre</p>
+          <svg viewBox="0 0 320 170" class="w-full"><line x1="34" y1="10" x2="34" y2="140" stroke="#e5e5e5"/><line x1="34" y1="140" x2="320" y2="140" stroke="#e5e5e5"/>
+            <g><rect x="50" y="40" width="34" height="100" rx="3" fill="#2563eb"/><rect x="104" y="64" width="34" height="76" rx="3" fill="#2563eb"/><rect x="158" y="80" width="34" height="60" rx="3" fill="#2563eb"/><rect x="212" y="98" width="34" height="42" rx="3" fill="#2563eb"/><rect x="266" y="112" width="34" height="28" rx="3" fill="#2563eb"/></g>
+            <g font-size="9" fill="#737373"><text x="0" y="44">₹3Cr</text><text x="0" y="92">₹1.5Cr</text><text x="6" y="140">₹0</text></g>
+          </svg>
+        </div>
+        <div class="rounded-lg border border-neutral-200 bg-white p-5">
+          <p class="mb-4 text-sm font-semibold">Monthly trend</p>
+          <svg viewBox="0 0 320 170" class="w-full"><line x1="34" y1="10" x2="34" y2="140" stroke="#e5e5e5"/><line x1="34" y1="140" x2="320" y2="140" stroke="#e5e5e5"/>
+            <polyline fill="none" stroke="#2563eb" stroke-width="2" points="46,70 92,52 138,96 184,60 230,108 276,46 308,72"/>
+            <polyline fill="none" stroke="#16a34a" stroke-width="2" points="46,110 92,100 138,118 184,88 230,124 276,96 308,104"/>
+            <g fill="#2563eb"><circle cx="92" cy="52" r="2.5"/><circle cx="276" cy="46" r="2.5"/></g>
+          </svg>
+        </div>
+      </div>
+      <div class="mt-3 rounded-lg border border-neutral-200 bg-white p-5">
+        <p class="mb-3 text-sm font-semibold">Multi-series palette</p>
+        <div class="flex flex-wrap gap-2" id="chartpalette"></div>
+      </div>
+    </section>
+
+    <!-- FORMATTING -->
+    <section id="format">
+      <h2 class="text-lg font-semibold">Formatting conventions</h2>
+      <div class="mt-4 overflow-hidden rounded-lg border border-neutral-200 bg-white text-sm">
+        <table class="w-full">
+          <tbody class="divide-y divide-neutral-100">
+            <tr><td class="w-1/3 px-5 py-3 font-medium text-neutral-700">Currency</td><td class="px-5 py-3 text-neutral-600">Indian locale, INR — <code class="mono text-xs">formatCurrency()</code> → ₹4,82,000</td></tr>
+            <tr><td class="px-5 py-3 font-medium text-neutral-700">Compact money</td><td class="px-5 py-3 text-neutral-600"><code class="mono text-xs">formatCompactINR()</code> → ₹2 Cr · ₹49 L · ₹75 K (lakh/crore scale)</td></tr>
+            <tr><td class="px-5 py-3 font-medium text-neutral-700">Dates</td><td class="px-5 py-3 text-neutral-600"><code class="mono text-xs">formatDate()</code> → Jun 22, 2026 · financial year is Apr–Mar (<code class="mono text-xs">2025-26</code>)</td></tr>
+            <tr><td class="px-5 py-3 font-medium text-neutral-700">PO numbers</td><td class="px-5 py-3 text-neutral-600">Mono font, <code class="mono text-xs">COMPANY/VESSEL/ID/FY</code> → PMS/HNR1/9000/2024-25</td></tr>
+            <tr><td class="px-5 py-3 font-medium text-neutral-700">Accounting codes</td><td class="px-5 py-3 text-neutral-600">6-digit mono codes; graphs label headings/sub-headings by <b>name</b>, leaves by <b>code</b></td></tr>
+          </tbody>
+        </table>
+      </div>
+    </section>
+
+    <!-- DO / DON'T -->
+    <section id="voice" class="pb-12">
+      <h2 class="text-lg font-semibold">Do &amp; don't</h2>
+      <div class="mt-4 grid gap-4 md:grid-cols-2">
+        <div class="rounded-lg border border-success-100 bg-success-50 p-5">
+          <p class="mb-2 text-sm font-semibold text-success-700">Do</p>
+          <ul class="space-y-1.5 text-sm text-neutral-700">
+            <li>• Separate surfaces with a 1px <code class="rounded bg-white px-1 text-xs">border-neutral-200</code>, not heavy shadows.</li>
+            <li>• Reuse <code class="rounded bg-white px-1 text-xs">PO_STATUS_VARIANTS</code> for any PO status pill.</li>
+            <li>• Keep one primary action per view; everything else secondary/ghost.</li>
+            <li>• Right-align and <code class="rounded bg-white px-1 text-xs">tabular-nums</code> all money columns.</li>
+            <li>• Use semantic color only for meaning (success=paid, warning=action, danger=stop).</li>
+          </ul>
+        </div>
+        <div class="rounded-lg border border-danger-100 bg-danger-50 p-5">
+          <p class="mb-2 text-sm font-semibold text-danger-700">Don't</p>
+          <ul class="space-y-1.5 text-sm text-neutral-700">
+            <li>• Don't introduce new hues — stay within the five ramps.</li>
+            <li>• Don't use primary blue for decoration; it signals an action.</li>
+            <li>• Don't mix radii — <code class="rounded bg-white px-1 text-xs">rounded-lg</code> for boxes, <code class="rounded bg-white px-1 text-xs">rounded-full</code> for pills.</li>
+            <li>• Don't crowd charts — one chart per card, generous whitespace.</li>
+            <li>• Don't hardcode ₹ formatting — use the shared helpers.</li>
+          </ul>
+        </div>
+      </div>
+    </section>
+
+  </main>
+</div>
+
+<script>
+/* ── data-driven sections ── */
+const RAMPS = [
+  ["Primary","primary",[["50","#eff6ff"],["100","#dbeafe"],["200","#bfdbfe"],["500","#3b82f6"],["600","#2563eb"],["700","#1d4ed8"],["800","#1e40af"]],"600"],
+  ["Success","success",[["50","#f0fdf4"],["100","#dcfce7"],["DEFAULT","#16a34a"],["700","#15803d"]],"DEFAULT"],
+  ["Warning","warning",[["50","#fffbeb"],["100","#fef3c7"],["DEFAULT","#d97706"],["700","#b45309"]],"DEFAULT"],
+  ["Danger","danger",[["50","#fef2f2"],["100","#fee2e2"],["DEFAULT","#dc2626"],["700","#b91c1c"]],"DEFAULT"],
+  ["Neutral","neutral",[["50","#fafafa"],["100","#f5f5f5"],["200","#e5e5e5"],["300","#d4d4d4"],["400","#a3a3a3"],["500","#737373"],["600","#525252"],["700","#404040"],["800","#262626"],["900","#171717"]],"900"],
+];
+document.getElementById("ramps").innerHTML = RAMPS.map(([name,key,stops])=>`
+  <div>
+    <div class="mb-1.5 flex items-baseline gap-2"><span class="text-sm font-semibold">${name}</span><code class="text-xs text-neutral-400">--color-${key}-*</code></div>
+    <div class="grid grid-cols-4 gap-2 sm:grid-cols-7 lg:grid-cols-10">
+      ${stops.map(([s,hex])=>{
+        const dark = ["600","700","800","900","DEFAULT"].includes(s) && !(key==="neutral"&&["50","100","200","300","400"].includes(s));
+        const cls = s==="DEFAULT"? key : `${key}-${s}`;
+        return `<div class="overflow-hidden rounded-lg border border-neutral-200">
+          <div class="h-12" style="background:${hex}"></div>
+          <div class="bg-white px-1.5 py-1"><p class="text-[11px] font-medium">${s}</p><p class="mono text-[10px] text-neutral-400">${hex}</p><p class="mono text-[9px] text-neutral-400">${cls}</p></div>
+        </div>`;}).join("")}
+    </div>
+  </div>`).join("");
+
+/* lucide-style icon set (inline svg paths, stroke 2) */
+const ICONS = {
+  dashboard:'<rect x="3" y="3" width="7" height="9"/><rect x="14" y="3" width="7" height="5"/><rect x="14" y="12" width="7" height="9"/><rect x="3" y="16" width="7" height="5"/>',
+  file:'<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/>',
+  plus:'<line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/>',
+  check:'<polyline points="20 6 9 17 4 12"/>',
+  ship:'<path d="M12 22V8"/><path d="M5 12H2a10 10 0 0 0 20 0h-3"/><circle cx="12" cy="5" r="3"/>',
+  users:'<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/>',
+  card:'<rect x="1" y="4" width="22" height="16" rx="2"/><line x1="1" y1="10" x2="23" y2="10"/>',
+  download:'<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/>',
+  search:'<circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>',
+  bell:'<path d="M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/>',
+  chart:'<path d="M3 3v18h18"/><rect x="7" y="9" width="3" height="9"/><rect x="14" y="5" width="3" height="13"/>',
+  settings:'<circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/>',
+};
+document.getElementById("iconrow").innerHTML = Object.entries(ICONS).map(([n,p])=>`
+  <div class="flex flex-col items-center gap-1 w-16">
+    <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">${p}</svg>
+    <span class="text-[10px] text-neutral-400">${n}</span>
+  </div>`).join("");
+
+/* PO status mapping (from lib/utils.ts) */
+const VARIANT_CLASS = {
+  default:"bg-primary-100 text-primary-700", secondary:"bg-neutral-100 text-neutral-700",
+  success:"bg-success-100 text-success-700", warning:"bg-warning-100 text-warning-700",
+  danger:"bg-danger-100 text-danger-700", outline:"border border-neutral-300 text-neutral-600",
+};
+const PO_STATUS = [
+  ["DRAFT","Draft","outline"],["SUBMITTED","Submitted","secondary"],["MGR_REVIEW","Under Review","secondary"],
+  ["VENDOR_ID_PENDING","Vendor ID Pending","warning"],["EDITS_REQUESTED","Edits Requested","warning"],
+  ["REJECTED","Rejected","danger"],["MGR_APPROVED","Approved","success"],["SENT_FOR_PAYMENT","Sent for Payment","default"],
+  ["PARTIALLY_PAID","Partially Paid","warning"],["PAID_DELIVERED","Paid","success"],
+  ["PARTIALLY_CLOSED","Partially Received","warning"],["CLOSED","Closed","secondary"],["CANCELLED","Cancelled","danger"],
+];
+document.getElementById("statusgrid").innerHTML = PO_STATUS.map(([k,label,v])=>`
+  <div class="flex items-center justify-between gap-2 rounded-md px-2 py-1.5">
+    <span class="rounded-full px-2.5 py-0.5 text-xs font-medium ${VARIANT_CLASS[v]}">${label}</span>
+    <code class="text-[10px] text-neutral-400">${k}</code>
+  </div>`).join("");
+
+/* chart palette */
+const CHART_COLORS=["#2563eb","#16a34a","#9333ea","#ea580c","#0891b2","#dc2626","#ca8a04","#4f46e5"];
+document.getElementById("chartpalette").innerHTML = CHART_COLORS.map((c,i)=>`
+  <div class="flex items-center gap-1.5 rounded-md border border-neutral-200 px-2 py-1"><span class="h-3.5 w-3.5 rounded" style="background:${c}"></span><code class="text-[10px] text-neutral-500">${c}</code></div>`).join("");
+
+/* TOC scroll-spy */
+const links=[...document.querySelectorAll('.toc a')];
+const map=Object.fromEntries(links.map(a=>[a.getAttribute('href').slice(1),a]));
+const io=new IntersectionObserver(es=>{es.forEach(e=>{ if(e.isIntersecting){ links.forEach(l=>l.classList.remove('active')); map[e.target.id]?.classList.add('active'); }});},{rootMargin:'-80px 0px -70% 0px'});
+document.querySelectorAll('main section[id]').forEach(s=>io.observe(s));
+
+/* click-to-copy snippets */
+document.querySelectorAll('.snip code').forEach(c=>{
+  c.addEventListener('click',()=>{ navigator.clipboard?.writeText(c.innerText); const w=c.closest('.snip'); w.classList.add('show'); setTimeout(()=>w.classList.remove('show'),1200); });
+});
+</script>
+</body>
+</html>
--- a/Wireframe/ds-bundle/components/alerts.html
+++ b/Wireframe/ds-bundle/components/alerts.html
@ -0,0 +1,33 @@
+<!-- @dsCard group="Components" name="Alerts & dialog" subtitle="semantic -50 tint + -700 text · modal" width="700" height="440" -->
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8"/>
+<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+<title>PPMS · Alerts</title>
+<script src="https://cdn.tailwindcss.com"></script>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+<script>tailwind.config={theme:{extend:{colors:{primary:{50:"#eff6ff",200:"#bfdbfe",800:"#1e40af"},success:{50:"#f0fdf4",100:"#dcfce7",700:"#15803d"},warning:{50:"#fffbeb",100:"#fef3c7",700:"#b45309"},danger:{DEFAULT:"#dc2626",50:"#fef2f2",100:"#fee2e2",700:"#b91c1c"},neutral:{100:"#f5f5f5",200:"#e5e5e5",300:"#d4d4d4",500:"#737373",700:"#404040",900:"#171717"}},fontFamily:{sans:['Inter','ui-sans-serif','system-ui','sans-serif']}}}}</script>
+<style>body{font-family:'Inter',ui-sans-serif,system-ui,sans-serif}</style>
+</head>
+<body class="bg-neutral-50 p-6 text-neutral-900">
+<h2 class="text-lg font-semibold">Alerts &amp; dialog</h2>
+<p class="mt-1 text-sm text-neutral-600">Inline callouts use the semantic <b>-50</b> tint + <b>-700</b> text + matching border.</p>
+<div class="mt-4 space-y-3">
+  <div class="flex items-start gap-3 rounded-lg border border-primary-200 bg-primary-50 p-4 text-sm text-primary-800"><span class="font-medium">ℹ Info</span><span>Imported POs are created directly in the Closed state.</span></div>
+  <div class="flex items-start gap-3 rounded-lg border border-success-100 bg-success-50 p-4 text-sm text-success-700"><span class="font-medium">✓ Success</span><span>Purchase order approved and sent for payment.</span></div>
+  <div class="flex items-start gap-3 rounded-lg border border-warning-100 bg-warning-50 p-4 text-sm text-warning-700"><span class="font-medium">⚠ Warning</span><span>This vendor is unverified — verify before assigning a vendor code.</span></div>
+  <div class="flex items-start gap-3 rounded-lg border border-danger-100 bg-danger-50 p-4 text-sm text-danger-700"><span class="font-medium">✕ Error</span><span>Payment date cannot be in the future.</span></div>
+</div>
+<div class="mt-4 overflow-hidden rounded-lg border border-neutral-200 bg-neutral-100 p-8">
+  <div class="mx-auto max-w-sm rounded-lg border border-neutral-200 bg-white p-6 shadow-lg">
+    <h3 class="text-base font-semibold text-neutral-900">Delete accounting code?</h3>
+    <p class="mt-1 text-sm text-neutral-500">This removes <b>5110 · Fuel &amp; Lubricants</b>. This action can't be undone.</p>
+    <div class="mt-5 flex justify-end gap-2">
+      <button class="inline-flex h-10 items-center rounded-lg border border-neutral-300 bg-white px-4 text-sm font-medium text-neutral-700 hover:bg-neutral-50">Cancel</button>
+      <button class="inline-flex h-10 items-center rounded-lg bg-danger px-4 text-sm font-medium text-white hover:opacity-90">Delete</button>
+    </div>
+  </div>
+</div>
+</body>
+</html>
--- a/Wireframe/ds-bundle/components/badges.html
+++ b/Wireframe/ds-bundle/components/badges.html
@ -0,0 +1,25 @@
+<!-- @dsCard group="Components" name="Badges" subtitle="6 variants · rounded-full px-2.5 py-0.5 text-xs" width="700" height="160" -->
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8"/>
+<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+<title>PPMS · Badges</title>
+<script src="https://cdn.tailwindcss.com"></script>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+<script>tailwind.config={theme:{extend:{colors:{primary:{100:"#dbeafe",700:"#1d4ed8"},success:{100:"#dcfce7",700:"#15803d"},warning:{100:"#fef3c7",700:"#b45309"},danger:{100:"#fee2e2",700:"#b91c1c"},neutral:{100:"#f5f5f5",200:"#e5e5e5",300:"#d4d4d4",600:"#525252",700:"#404040",900:"#171717"}},fontFamily:{sans:['Inter','ui-sans-serif','system-ui','sans-serif']}}}}</script>
+<style>body{font-family:'Inter',ui-sans-serif,system-ui,sans-serif}</style>
+</head>
+<body class="bg-neutral-50 p-6 text-neutral-900">
+<h2 class="text-lg font-semibold">Badges</h2>
+<p class="mt-1 text-sm text-neutral-600">From <code>components/ui/badge.tsx</code>. Base: <code>rounded-full px-2.5 py-0.5 text-xs font-medium</code>.</p>
+<div class="mt-4 flex flex-wrap items-center gap-3 rounded-lg border border-neutral-200 bg-white p-5">
+  <span class="rounded-full bg-primary-100 px-2.5 py-0.5 text-xs font-medium text-primary-700">default</span>
+  <span class="rounded-full bg-neutral-100 px-2.5 py-0.5 text-xs font-medium text-neutral-700">secondary</span>
+  <span class="rounded-full bg-success-100 px-2.5 py-0.5 text-xs font-medium text-success-700">success</span>
+  <span class="rounded-full bg-warning-100 px-2.5 py-0.5 text-xs font-medium text-warning-700">warning</span>
+  <span class="rounded-full bg-danger-100 px-2.5 py-0.5 text-xs font-medium text-danger-700">danger</span>
+  <span class="rounded-full border border-neutral-300 px-2.5 py-0.5 text-xs font-medium text-neutral-600">outline</span>
+</div>
+</body>
+</html>
--- a/Wireframe/ds-bundle/components/buttons.html
+++ b/Wireframe/ds-bundle/components/buttons.html
@ -0,0 +1,36 @@
+<!-- @dsCard group="Components" name="Buttons" subtitle="7 variants × 4 sizes (CVA)" width="760" height="260" -->
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8"/>
+<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+<title>PPMS · Buttons</title>
+<script src="https://cdn.tailwindcss.com"></script>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+<script>tailwind.config={theme:{extend:{colors:{primary:{600:"#2563eb",700:"#1d4ed8"},success:{DEFAULT:"#16a34a"},warning:{DEFAULT:"#d97706",50:"#fffbeb",100:"#fef3c7",700:"#b45309"},danger:{DEFAULT:"#dc2626"},neutral:{50:"#fafafa",100:"#f5f5f5",200:"#e5e5e5",300:"#d4d4d4",700:"#404040",900:"#171717"}},fontFamily:{sans:['Inter','ui-sans-serif','system-ui','sans-serif']}}}}</script>
+<style>body{font-family:'Inter',ui-sans-serif,system-ui,sans-serif}</style>
+</head>
+<body class="bg-neutral-50 p-6 text-neutral-900">
+<h2 class="text-lg font-semibold">Buttons</h2>
+<p class="mt-1 text-sm text-neutral-600">From <code>components/ui/button.tsx</code> (CVA). Base: <code>inline-flex items-center gap-2 rounded-lg text-sm font-medium</code> + focus ring.</p>
+<div class="mt-4 space-y-4 rounded-lg border border-neutral-200 bg-white p-5">
+  <div class="flex flex-wrap items-center gap-3">
+    <button class="inline-flex h-10 items-center gap-2 rounded-lg bg-primary-600 px-4 text-sm font-medium text-white hover:bg-primary-700">Default</button>
+    <button class="inline-flex h-10 items-center gap-2 rounded-lg border border-neutral-300 bg-white px-4 text-sm font-medium text-neutral-700 hover:bg-neutral-50">Secondary</button>
+    <button class="inline-flex h-10 items-center gap-2 rounded-lg bg-success px-4 text-sm font-medium text-white hover:opacity-90">Success</button>
+    <button class="inline-flex h-10 items-center gap-2 rounded-lg border border-warning bg-warning-50 px-4 text-sm font-medium text-warning-700 hover:bg-warning-100">Warning</button>
+    <button class="inline-flex h-10 items-center gap-2 rounded-lg bg-danger px-4 text-sm font-medium text-white hover:opacity-90">Destructive</button>
+    <button class="inline-flex h-10 items-center gap-2 rounded-lg px-4 text-sm font-medium text-neutral-700 hover:bg-neutral-100">Ghost</button>
+    <button class="inline-flex h-10 items-center gap-2 rounded-lg px-1 text-sm font-medium text-primary-600 underline-offset-4 hover:underline" style="color:#2563eb">Link</button>
+    <button class="inline-flex h-10 items-center gap-2 rounded-lg bg-primary-600 px-4 text-sm font-medium text-white opacity-60" disabled>Disabled</button>
+  </div>
+  <div class="flex flex-wrap items-center gap-3 border-t border-neutral-100 pt-4">
+    <button class="inline-flex h-8 items-center gap-1.5 rounded-lg bg-primary-600 px-3 text-xs font-medium text-white">sm · h-8</button>
+    <button class="inline-flex h-10 items-center gap-2 rounded-lg bg-primary-600 px-4 text-sm font-medium text-white">md · h-10</button>
+    <button class="inline-flex h-11 items-center gap-2 rounded-lg bg-primary-600 px-5 text-sm font-medium text-white">lg · h-11</button>
+    <button class="inline-flex h-10 w-10 items-center justify-center rounded-lg border border-neutral-300 bg-white text-neutral-700"><svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg></button>
+  </div>
+  <p class="text-xs text-neutral-400"><code>variant="default|secondary|success|warning|destructive|ghost|link"</code> · <code>size="sm|md|lg|icon"</code></p>
+</div>
+</body>
+</html>
--- a/Wireframe/ds-bundle/components/cards.html
+++ b/Wireframe/ds-bundle/components/cards.html
@ -0,0 +1,30 @@
+<!-- @dsCard group="Components" name="Cards & KPIs" subtitle="rounded-lg border bg-white shadow-sm · stat cards" width="780" height="340" -->
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8"/>
+<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+<title>PPMS · Cards</title>
+<script src="https://cdn.tailwindcss.com"></script>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+<script>tailwind.config={theme:{extend:{colors:{primary:{600:"#2563eb"},success:{700:"#15803d"},danger:{700:"#b91c1c"},neutral:{200:"#e5e5e5",300:"#d4d4d4",400:"#a3a3a3",500:"#737373",600:"#525252",700:"#404040",900:"#171717"}},fontFamily:{sans:['Inter','ui-sans-serif','system-ui','sans-serif'],mono:['"JetBrains Mono"','ui-monospace','monospace']}}}}</script>
+<style>body{font-family:'Inter',ui-sans-serif,system-ui,sans-serif}.mono{font-family:'JetBrains Mono',ui-monospace,monospace}</style>
+</head>
+<body class="bg-neutral-50 p-6 text-neutral-900">
+<h2 class="text-lg font-semibold">Cards &amp; KPI stats</h2>
+<p class="mt-1 text-sm text-neutral-600">Card = <code>rounded-lg border border-neutral-200 bg-white shadow-sm</code>. KPI stat cards drop the shadow, use <b>p-4</b>.</p>
+<div class="mt-4 grid gap-4 lg:grid-cols-2">
+  <div class="rounded-lg border border-neutral-200 bg-white shadow-sm">
+    <div class="flex flex-col gap-1 p-6 pb-4"><h3 class="text-base font-semibold text-neutral-900">Vendor details</h3><p class="text-sm text-neutral-500">GST-verified supplier on file.</p></div>
+    <div class="space-y-1 p-6 pt-0 text-sm text-neutral-600"><p>Acme Marine Supplies Pvt Ltd</p><p class="mono text-xs text-neutral-400">GSTIN 27ABCDE1234F1Z5</p></div>
+    <div class="flex items-center gap-2 p-6 pt-0"><button class="inline-flex h-8 items-center rounded-lg bg-primary-600 px-3 text-xs font-medium text-white">Edit</button><button class="inline-flex h-8 items-center rounded-lg border border-neutral-300 bg-white px-3 text-xs font-medium text-neutral-700">View POs</button></div>
+  </div>
+  <div class="grid grid-cols-2 gap-4">
+    <div class="rounded-lg border border-neutral-200 bg-white p-4"><p class="text-xs font-medium uppercase tracking-wider text-neutral-400">Open POs</p><p class="mt-1.5 text-xl font-semibold">24</p><p class="mt-0.5 text-xs text-success-700">▲ 8% vs last month</p></div>
+    <div class="rounded-lg border border-neutral-200 bg-white p-4"><p class="text-xs font-medium uppercase tracking-wider text-neutral-400">Awaiting approval</p><p class="mt-1.5 text-xl font-semibold">7</p><p class="mt-0.5 text-xs text-neutral-400">across 3 vessels</p></div>
+    <div class="rounded-lg border border-neutral-200 bg-white p-4"><p class="text-xs font-medium uppercase tracking-wider text-neutral-400">Spend (FY)</p><p class="mt-1.5 text-xl font-semibold">₹2.4 Cr</p><p class="mt-0.5 text-xs text-neutral-400">FY 2025–26</p></div>
+    <div class="rounded-lg border border-neutral-200 bg-white p-4"><p class="text-xs font-medium uppercase tracking-wider text-neutral-400">Overdue</p><p class="mt-1.5 text-xl font-semibold">2</p><p class="mt-0.5 text-xs text-danger-700">needs attention</p></div>
+  </div>
+</div>
+</body>
+</html>
--- a/Wireframe/ds-bundle/components/charts.html
+++ b/Wireframe/ds-bundle/components/charts.html
@ -0,0 +1,35 @@
+<!-- @dsCard group="Components" name="Charts" subtitle="recharts conventions + 8-color series palette" width="780" height="420" -->
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8"/>
+<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+<title>PPMS · Charts</title>
+<script src="https://cdn.tailwindcss.com"></script>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+<script>tailwind.config={theme:{extend:{colors:{neutral:{100:"#f5f5f5",200:"#e5e5e5",500:"#737373",900:"#171717"}},fontFamily:{sans:['Inter','ui-sans-serif','system-ui','sans-serif'],mono:['"JetBrains Mono"','ui-monospace','monospace']}}}}</script>
+<style>body{font-family:'Inter',ui-sans-serif,system-ui,sans-serif}code{font-family:'JetBrains Mono',ui-monospace,monospace}</style>
+</head>
+<body class="bg-neutral-50 p-6 text-neutral-900">
+<h2 class="text-lg font-semibold">Charts</h2>
+<p class="mt-1 max-w-2xl text-sm text-neutral-600"><b>recharts</b> inside a standard card. Grid <code>strokeDasharray="3 3"</code> in <code>#f0f0f0</code>; axis ticks <code>11px #737373</code>; bars <code>radius</code>, lines <code>strokeWidth 2</code>. Y-axis money via <code>formatCompactINR</code>.</p>
+<div class="mt-4 grid gap-4 lg:grid-cols-2">
+  <div class="rounded-lg border border-neutral-200 bg-white p-5">
+    <p class="mb-4 text-sm font-semibold">Spend by cost centre</p>
+    <svg viewBox="0 0 320 170" class="w-full"><line x1="34" y1="10" x2="34" y2="140" stroke="#e5e5e5"/><line x1="34" y1="140" x2="320" y2="140" stroke="#e5e5e5"/><g><rect x="50" y="40" width="34" height="100" rx="3" fill="#2563eb"/><rect x="104" y="64" width="34" height="76" rx="3" fill="#2563eb"/><rect x="158" y="80" width="34" height="60" rx="3" fill="#2563eb"/><rect x="212" y="98" width="34" height="42" rx="3" fill="#2563eb"/><rect x="266" y="112" width="34" height="28" rx="3" fill="#2563eb"/></g><g font-size="9" fill="#737373"><text x="2" y="44">₹3Cr</text><text x="0" y="92">₹1.5Cr</text><text x="10" y="140">₹0</text></g></svg>
+  </div>
+  <div class="rounded-lg border border-neutral-200 bg-white p-5">
+    <p class="mb-4 text-sm font-semibold">Monthly trend</p>
+    <svg viewBox="0 0 320 170" class="w-full"><line x1="34" y1="10" x2="34" y2="140" stroke="#e5e5e5"/><line x1="34" y1="140" x2="320" y2="140" stroke="#e5e5e5"/><polyline fill="none" stroke="#2563eb" stroke-width="2" points="46,70 92,52 138,96 184,60 230,108 276,46 308,72"/><polyline fill="none" stroke="#16a34a" stroke-width="2" points="46,110 92,100 138,118 184,88 230,124 276,96 308,104"/><g fill="#2563eb"><circle cx="92" cy="52" r="2.5"/><circle cx="276" cy="46" r="2.5"/></g></svg>
+  </div>
+</div>
+<div class="mt-3 rounded-lg border border-neutral-200 bg-white p-5">
+  <p class="mb-3 text-sm font-semibold">Multi-series palette</p>
+  <div class="flex flex-wrap gap-2" id="p"></div>
+</div>
+<script>
+const C=["#2563eb","#16a34a","#9333ea","#ea580c","#0891b2","#dc2626","#ca8a04","#4f46e5"];
+document.getElementById("p").innerHTML=C.map(c=>`<div class="flex items-center gap-1.5 rounded-md border border-neutral-200 px-2 py-1"><span class="h-3.5 w-3.5 rounded" style="background:${c}"></span><code class="text-[10px] text-neutral-500">${c}</code></div>`).join("");
+</script>
+</body>
+</html>
--- a/Wireframe/ds-bundle/components/forms.html
+++ b/Wireframe/ds-bundle/components/forms.html
@ -0,0 +1,27 @@
+<!-- @dsCard group="Components" name="Forms" subtitle="inputs/select/textarea, focus ring-primary-500/20" width="680" height="440" -->
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8"/>
+<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+<title>PPMS · Forms</title>
+<script src="https://cdn.tailwindcss.com"></script>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+<script>tailwind.config={theme:{extend:{colors:{primary:{500:"#3b82f6"},danger:{700:"#b91c1c"},neutral:{50:"#fafafa",100:"#f5f5f5",200:"#e5e5e5",300:"#d4d4d4",400:"#a3a3a3",500:"#737373",700:"#404040",900:"#171717"}},fontFamily:{sans:['Inter','ui-sans-serif','system-ui','sans-serif']}}}}</script>
+<style>body{font-family:'Inter',ui-sans-serif,system-ui,sans-serif}</style>
+</head>
+<body class="bg-neutral-50 p-6 text-neutral-900">
+<h2 class="text-lg font-semibold">Forms</h2>
+<p class="mt-1 text-sm text-neutral-600">From <code>components/ui/input.tsx</code>: <code>h-10 rounded-lg border-neutral-300</code>; focus <code>border-primary-500 ring-2 ring-primary-500/20</code>.</p>
+<div class="mt-4 grid max-w-2xl gap-4 rounded-lg border border-neutral-200 bg-white p-6">
+  <div><label class="mb-1.5 block text-sm font-medium text-neutral-700">PO title</label><input placeholder="e.g. Engine spares — MV Pelagia Star" class="h-10 w-full rounded-lg border border-neutral-300 px-3 text-sm placeholder:text-neutral-400 focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-500/20"/></div>
+  <div class="grid grid-cols-2 gap-4">
+    <div><label class="mb-1.5 block text-sm font-medium text-neutral-700">Cost centre</label><select class="h-10 w-full rounded-lg border border-neutral-300 bg-white px-3 text-sm text-neutral-700 focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-500/20"><option>MV Pelagia Star</option><option>MV Ocean Dawn</option></select></div>
+    <div><label class="mb-1.5 block text-sm font-medium text-neutral-700">Date required</label><input type="date" class="h-10 w-full rounded-lg border border-neutral-300 px-3 text-sm text-neutral-700 focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-500/20"/></div>
+  </div>
+  <div><label class="mb-1.5 block text-sm font-medium text-neutral-700">Notes</label><textarea rows="2" placeholder="Optional…" class="w-full rounded-lg border border-neutral-300 px-3 py-2 text-sm placeholder:text-neutral-400 focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-500/20"></textarea></div>
+  <div><label class="mb-1.5 block text-sm font-medium text-neutral-700">Disabled</label><input disabled value="Read-only value" class="h-10 w-full cursor-not-allowed rounded-lg border border-neutral-300 bg-neutral-50 px-3 text-sm text-neutral-500 opacity-60"/></div>
+  <p class="-mt-1 text-xs text-danger-700">Inline validation error sits under the field in <code>text-danger-700</code>.</p>
+</div>
+</body>
+</html>
--- a/Wireframe/ds-bundle/components/po-status.html
+++ b/Wireframe/ds-bundle/components/po-status.html
@ -0,0 +1,23 @@
+<!-- @dsCard group="Components" name="PO status badges" subtitle="13 lifecycle states → badge variants (lib/utils.ts)" width="760" height="320" -->
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8"/>
+<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+<title>PPMS · PO status</title>
+<script src="https://cdn.tailwindcss.com"></script>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+<script>tailwind.config={theme:{extend:{colors:{primary:{100:"#dbeafe",700:"#1d4ed8"},success:{100:"#dcfce7",700:"#15803d"},warning:{100:"#fef3c7",700:"#b45309"},danger:{100:"#fee2e2",700:"#b91c1c"},neutral:{100:"#f5f5f5",200:"#e5e5e5",300:"#d4d4d4",400:"#a3a3a3",600:"#525252",700:"#404040",900:"#171717"}},fontFamily:{sans:['Inter','ui-sans-serif','system-ui','sans-serif'],mono:['"JetBrains Mono"','ui-monospace','monospace']}}}}</script>
+<style>body{font-family:'Inter',ui-sans-serif,system-ui,sans-serif}code{font-family:'JetBrains Mono',ui-monospace,monospace}</style>
+</head>
+<body class="bg-neutral-50 p-6 text-neutral-900">
+<h2 class="text-lg font-semibold">PO status badges</h2>
+<p class="mt-1 max-w-2xl text-sm text-neutral-600">Lifecycle states map to badge variants in <code>lib/utils.ts</code> (<code>PO_STATUS_LABELS</code> / <code>PO_STATUS_VARIANTS</code>). Reuse this mapping — don't invent new status colors.</p>
+<div class="mt-4 grid gap-2 rounded-lg border border-neutral-200 bg-white p-5 sm:grid-cols-2 lg:grid-cols-3" id="g"></div>
+<script>
+const V={default:"bg-primary-100 text-primary-700",secondary:"bg-neutral-100 text-neutral-700",success:"bg-success-100 text-success-700",warning:"bg-warning-100 text-warning-700",danger:"bg-danger-100 text-danger-700",outline:"border border-neutral-300 text-neutral-600"};
+const S=[["DRAFT","Draft","outline"],["SUBMITTED","Submitted","secondary"],["MGR_REVIEW","Under Review","secondary"],["VENDOR_ID_PENDING","Vendor ID Pending","warning"],["EDITS_REQUESTED","Edits Requested","warning"],["REJECTED","Rejected","danger"],["MGR_APPROVED","Approved","success"],["SENT_FOR_PAYMENT","Sent for Payment","default"],["PARTIALLY_PAID","Partially Paid","warning"],["PAID_DELIVERED","Paid","success"],["PARTIALLY_CLOSED","Partially Received","warning"],["CLOSED","Closed","secondary"],["CANCELLED","Cancelled","danger"]];
+document.getElementById("g").innerHTML=S.map(([k,l,v])=>`<div class="flex items-center justify-between gap-2 rounded-md px-2 py-1.5"><span class="rounded-full px-2.5 py-0.5 text-xs font-medium ${V[v]}">${l}</span><code class="text-[10px] text-neutral-400">${k}</code></div>`).join("");
+</script>
+</body>
+</html>
--- a/Wireframe/ds-bundle/components/tables.html
+++ b/Wireframe/ds-bundle/components/tables.html
@ -0,0 +1,29 @@
+<!-- @dsCard group="Components" name="Tables" subtitle="neutral-50 header, divide-y rows, tabular-nums money" width="760" height="280" -->
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8"/>
+<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+<title>PPMS · Tables</title>
+<script src="https://cdn.tailwindcss.com"></script>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+<script>tailwind.config={theme:{extend:{colors:{success:{100:"#dcfce7",700:"#15803d"},warning:{100:"#fef3c7",700:"#b45309"},neutral:{50:"#fafafa",100:"#f5f5f5",200:"#e5e5e5",400:"#a3a3a3",700:"#404040",900:"#171717"}},fontFamily:{sans:['Inter','ui-sans-serif','system-ui','sans-serif'],mono:['"JetBrains Mono"','ui-monospace','monospace']}}}}</script>
+<style>body{font-family:'Inter',ui-sans-serif,system-ui,sans-serif}.mono{font-family:'JetBrains Mono',ui-monospace,monospace}</style>
+</head>
+<body class="bg-neutral-50 p-6 text-neutral-900">
+<h2 class="text-lg font-semibold">Tables</h2>
+<p class="mt-1 text-sm text-neutral-600">Header <code>bg-neutral-50</code> + <code>text-xs uppercase tracking-wider text-neutral-400</code>; rows <code>divide-y divide-neutral-100</code>, hover <code>hover:bg-neutral-50</code>; money <code>tabular-nums text-right</code>.</p>
+<div class="mt-4 overflow-hidden rounded-lg border border-neutral-200 bg-white">
+  <table class="w-full text-sm">
+    <thead class="border-b border-neutral-200 bg-neutral-50 text-left text-xs font-semibold uppercase tracking-wider text-neutral-400">
+      <tr><th class="px-5 py-3">PO Number</th><th class="px-5 py-3">Vessel</th><th class="px-5 py-3">Status</th><th class="px-5 py-3 text-right">Amount</th></tr>
+    </thead>
+    <tbody class="divide-y divide-neutral-100">
+      <tr class="hover:bg-neutral-50"><td class="px-5 py-3 mono text-xs">PMS/HNR1/9001/2025-26</td><td class="px-5 py-3">MV Pelagia Star</td><td class="px-5 py-3"><span class="rounded-full bg-success-100 px-2.5 py-0.5 text-xs font-medium text-success-700">Approved</span></td><td class="px-5 py-3 text-right tabular-nums">₹4,82,000</td></tr>
+      <tr class="hover:bg-neutral-50"><td class="px-5 py-3 mono text-xs">PMS/OCD2/9002/2025-26</td><td class="px-5 py-3">MV Ocean Dawn</td><td class="px-5 py-3"><span class="rounded-full bg-warning-100 px-2.5 py-0.5 text-xs font-medium text-warning-700">Edits Requested</span></td><td class="px-5 py-3 text-right tabular-nums">₹1,15,500</td></tr>
+      <tr class="hover:bg-neutral-50"><td class="px-5 py-3 mono text-xs">PMS/CRT3/9003/2025-26</td><td class="px-5 py-3">MV Coral Trident</td><td class="px-5 py-3"><span class="rounded-full bg-neutral-100 px-2.5 py-0.5 text-xs font-medium text-neutral-700">Closed</span></td><td class="px-5 py-3 text-right tabular-nums">₹92,300</td></tr>
+    </tbody>
+  </table>
+</div>
+</body>
+</html>
--- a/Wireframe/ds-bundle/components/tabs.html
+++ b/Wireframe/ds-bundle/components/tabs.html
@ -0,0 +1,29 @@
+<!-- @dsCard group="Components" name="Tabs & segmented" subtitle="pill segmented control + underline tab bar" width="700" height="180" -->
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8"/>
+<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+<title>PPMS · Tabs</title>
+<script src="https://cdn.tailwindcss.com"></script>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+<script>tailwind.config={theme:{extend:{colors:{primary:{600:"#2563eb",700:"#1d4ed8"},neutral:{200:"#e5e5e5",500:"#737373",800:"#262626",900:"#171717"}},fontFamily:{sans:['Inter','ui-sans-serif','system-ui','sans-serif']}}}}</script>
+<style>body{font-family:'Inter',ui-sans-serif,system-ui,sans-serif}</style>
+</head>
+<body class="bg-neutral-50 p-6 text-neutral-900">
+<h2 class="text-lg font-semibold">Tabs &amp; segmented controls</h2>
+<p class="mt-1 text-sm text-neutral-600">Toolbar filters use a pill segmented control; page sections use an underline tab bar.</p>
+<div class="mt-4 flex flex-wrap items-center gap-6 rounded-lg border border-neutral-200 bg-white p-5">
+  <div class="inline-flex rounded-lg border border-neutral-200 bg-white p-0.5 text-sm">
+    <button class="rounded-md bg-primary-600 px-3 py-1 font-medium text-white shadow-sm">Monthly</button>
+    <button class="rounded-md px-3 py-1 font-medium text-neutral-500 hover:text-neutral-800">Yearly</button>
+    <button class="rounded-md px-3 py-1 font-medium text-neutral-500 hover:text-neutral-800">Weekly</button>
+  </div>
+  <div class="flex items-center gap-6 border-b border-neutral-200 text-sm">
+    <button class="-mb-px border-b-2 border-primary-600 pb-2 font-medium text-primary-700">Details</button>
+    <button class="-mb-px border-b-2 border-transparent pb-2 font-medium text-neutral-500 hover:text-neutral-800">Line items</button>
+    <button class="-mb-px border-b-2 border-transparent pb-2 font-medium text-neutral-500 hover:text-neutral-800">History</button>
+  </div>
+</div>
+</body>
+</html>
--- a/Wireframe/ds-bundle/foundations/colors.html
+++ b/Wireframe/ds-bundle/foundations/colors.html
@ -0,0 +1,33 @@
+<!-- @dsCard group="Foundations" name="Color ramps" subtitle="Primary · Success · Warning · Danger · Neutral" width="780" height="560" -->
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8"/>
+<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+<title>PPMS · Color</title>
+<script src="https://cdn.tailwindcss.com"></script>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+<style>body{font-family:'Inter',ui-sans-serif,system-ui,sans-serif}.mono{font-family:'JetBrains Mono',ui-monospace,monospace}</style>
+</head>
+<body class="bg-neutral-50 p-6" style="color:#171717">
+<h2 class="text-lg font-semibold">Color</h2>
+<p class="mt-1 mb-5 max-w-2xl text-sm" style="color:#525252">Five ramps. <b>Primary</b> = actions/links/active nav · <b>Success</b> = approved/paid · <b>Warning</b> = needs action · <b>Danger</b> = rejected/destructive · <b>Neutral</b> = structure, text, borders.</p>
+<div class="space-y-5" id="r"></div>
+<script>
+const RAMPS=[
+ ["Primary","primary",[["50","#eff6ff"],["100","#dbeafe"],["200","#bfdbfe"],["500","#3b82f6"],["600","#2563eb"],["700","#1d4ed8"],["800","#1e40af"]]],
+ ["Success","success",[["50","#f0fdf4"],["100","#dcfce7"],["DEFAULT","#16a34a"],["700","#15803d"]]],
+ ["Warning","warning",[["50","#fffbeb"],["100","#fef3c7"],["DEFAULT","#d97706"],["700","#b45309"]]],
+ ["Danger","danger",[["50","#fef2f2"],["100","#fee2e2"],["DEFAULT","#dc2626"],["700","#b91c1c"]]],
+ ["Neutral","neutral",[["50","#fafafa"],["100","#f5f5f5"],["200","#e5e5e5"],["300","#d4d4d4"],["400","#a3a3a3"],["500","#737373"],["600","#525252"],["700","#404040"],["800","#262626"],["900","#171717"]]],
+];
+document.getElementById("r").innerHTML=RAMPS.map(([name,key,stops])=>`
+ <div>
+  <div class="mb-1.5 flex items-baseline gap-2"><span class="text-sm font-semibold">${name}</span><code class="mono text-xs" style="color:#a3a3a3">--color-${key}-*</code></div>
+  <div class="grid grid-cols-4 gap-2 sm:grid-cols-7 lg:grid-cols-10">
+   ${stops.map(([s,hex])=>{const cls=s==="DEFAULT"?key:`${key}-${s}`;return `<div class="overflow-hidden rounded-lg" style="border:1px solid #e5e5e5"><div class="h-12" style="background:${hex}"></div><div class="bg-white px-1.5 py-1"><p class="text-[11px] font-medium">${s}</p><p class="mono text-[10px]" style="color:#a3a3a3">${hex}</p><p class="mono text-[9px]" style="color:#a3a3a3">${cls}</p></div></div>`;}).join("")}
+  </div>
+ </div>`).join("");
+</script>
+</body>
+</html>
--- a/Wireframe/ds-bundle/foundations/icons.html
+++ b/Wireframe/ds-bundle/foundations/icons.html
@ -0,0 +1,22 @@
+<!-- @dsCard group="Foundations" name="Icons" subtitle="lucide-react, stroke 2, h-4/h-5, currentColor" width="640" height="200" -->
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8"/>
+<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+<title>PPMS · Icons</title>
+<script src="https://cdn.tailwindcss.com"></script>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+<script>tailwind.config={theme:{extend:{colors:{neutral:{50:"#fafafa",100:"#f5f5f5",200:"#e5e5e5",400:"#a3a3a3",600:"#525252",900:"#171717"}},fontFamily:{sans:['Inter','ui-sans-serif','system-ui','sans-serif']}}}}</script>
+<style>body{font-family:'Inter',ui-sans-serif,system-ui,sans-serif}</style>
+</head>
+<body class="bg-neutral-50 p-6 text-neutral-900">
+<h2 class="text-lg font-semibold">Icons</h2>
+<p class="mt-1 text-sm text-neutral-600"><b>lucide-react</b>, stroke 2, sized <code>h-4 w-4</code> inline / <code>h-5 w-5</code> standalone. They inherit <code>currentColor</code>.</p>
+<div class="mt-4 flex flex-wrap gap-3 rounded-lg border border-neutral-200 bg-white p-5 text-neutral-600" id="i"></div>
+<script>
+const I={dashboard:'<rect x="3" y="3" width="7" height="9"/><rect x="14" y="3" width="7" height="5"/><rect x="14" y="12" width="7" height="9"/><rect x="3" y="16" width="7" height="5"/>',file:'<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/>',plus:'<line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/>',check:'<polyline points="20 6 9 17 4 12"/>',ship:'<path d="M12 22V8"/><path d="M5 12H2a10 10 0 0 0 20 0h-3"/><circle cx="12" cy="5" r="3"/>',users:'<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/>',card:'<rect x="1" y="4" width="22" height="16" rx="2"/><line x1="1" y1="10" x2="23" y2="10"/>',download:'<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/>',search:'<circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>',bell:'<path d="M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/>',chart:'<path d="M3 3v18h18"/><rect x="7" y="9" width="3" height="9"/><rect x="14" y="5" width="3" height="13"/>'};
+document.getElementById("i").innerHTML=Object.entries(I).map(([n,p])=>`<div class="flex w-16 flex-col items-center gap-1"><svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">${p}</svg><span class="text-[10px] text-neutral-400">${n}</span></div>`).join("");
+</script>
+</body>
+</html>
--- a/Wireframe/ds-bundle/foundations/tokens.html
+++ b/Wireframe/ds-bundle/foundations/tokens.html
@ -0,0 +1,46 @@
+<!-- @dsCard group="Foundations" name="Radius · Shadow · Spacing" subtitle="rounded-lg surfaces, 1px borders, shadow-sm" width="780" height="280" -->
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8"/>
+<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+<title>PPMS · Tokens</title>
+<script src="https://cdn.tailwindcss.com"></script>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+<script>tailwind.config={theme:{extend:{colors:{primary:{200:"#bfdbfe"},neutral:{50:"#fafafa",100:"#f5f5f5",200:"#e5e5e5",300:"#d4d4d4",400:"#a3a3a3",500:"#737373",900:"#171717"}},fontFamily:{sans:['Inter','ui-sans-serif','system-ui','sans-serif'],mono:['"JetBrains Mono"','ui-monospace','monospace']}}}}</script>
+<style>body{font-family:'Inter',ui-sans-serif,system-ui,sans-serif}code{font-family:'JetBrains Mono',ui-monospace,monospace}</style>
+</head>
+<body class="bg-neutral-50 p-6 text-neutral-900">
+<h2 class="text-lg font-semibold">Radius · Shadow · Spacing</h2>
+<div class="mt-4 grid gap-4 sm:grid-cols-3">
+  <div class="rounded-lg border border-neutral-200 bg-white p-5">
+    <p class="mb-3 text-xs font-semibold uppercase tracking-wider text-neutral-400">Radius</p>
+    <div class="flex items-end gap-4">
+      <div class="text-center"><div class="h-12 w-12 rounded-md border border-neutral-300 bg-neutral-50"></div><code class="mt-1 block text-[11px] text-neutral-400">rounded-md</code></div>
+      <div class="text-center"><div class="h-12 w-12 rounded-lg border border-neutral-300 bg-neutral-50"></div><code class="mt-1 block text-[11px] text-neutral-400">rounded-lg</code></div>
+      <div class="text-center"><div class="h-12 w-12 rounded-full border border-neutral-300 bg-neutral-50"></div><code class="mt-1 block text-[11px] text-neutral-400">rounded-full</code></div>
+    </div>
+    <p class="mt-3 text-xs text-neutral-500"><b>lg</b> for cards/buttons/inputs, <b>md</b> for nav items, <b>full</b> for badges &amp; avatars.</p>
+  </div>
+  <div class="rounded-lg border border-neutral-200 bg-white p-5">
+    <p class="mb-3 text-xs font-semibold uppercase tracking-wider text-neutral-400">Elevation</p>
+    <div class="flex items-end gap-4">
+      <div class="text-center"><div class="h-12 w-12 rounded-lg border border-neutral-200 bg-white"></div><code class="mt-1 block text-[11px] text-neutral-400">border</code></div>
+      <div class="text-center"><div class="h-12 w-12 rounded-lg border border-neutral-200 bg-white shadow-sm"></div><code class="mt-1 block text-[11px] text-neutral-400">shadow-sm</code></div>
+      <div class="text-center"><div class="h-12 w-12 rounded-lg bg-white shadow-lg"></div><code class="mt-1 block text-[11px] text-neutral-400">shadow-lg</code></div>
+    </div>
+    <p class="mt-3 text-xs text-neutral-500">Flat by default — a 1px <b>border-neutral-200</b> separates surfaces. <b>shadow-sm</b> on cards, <b>shadow-lg</b> only for popovers/dialogs.</p>
+  </div>
+  <div class="rounded-lg border border-neutral-200 bg-white p-5">
+    <p class="mb-3 text-xs font-semibold uppercase tracking-wider text-neutral-400">Spacing rhythm</p>
+    <div class="space-y-1.5">
+      <div class="flex items-center gap-2"><div class="h-3 bg-primary-200" style="width:16px"></div><code class="text-[11px] text-neutral-400">gap-2 · 8px</code></div>
+      <div class="flex items-center gap-2"><div class="h-3 bg-primary-200" style="width:24px"></div><code class="text-[11px] text-neutral-400">gap-3 · 12px (rows)</code></div>
+      <div class="flex items-center gap-2"><div class="h-3 bg-primary-200" style="width:40px"></div><code class="text-[11px] text-neutral-400">p-5 · 20px (cards)</code></div>
+      <div class="flex items-center gap-2"><div class="h-3 bg-primary-200" style="width:48px"></div><code class="text-[11px] text-neutral-400">p-6 / gap-6 · 24px</code></div>
+    </div>
+    <p class="mt-3 text-xs text-neutral-500">Page padding <b>p-6</b>; cards <b>p-5</b>/<b>p-6</b>; control gaps <b>gap-2/3</b>.</p>
+  </div>
+</div>
+</body>
+</html>
--- a/Wireframe/ds-bundle/foundations/typography.html
+++ b/Wireframe/ds-bundle/foundations/typography.html
@ -0,0 +1,26 @@
+<!-- @dsCard group="Foundations" name="Typography" subtitle="Inter (UI) · JetBrains Mono (codes/numbers)" width="760" height="420" -->
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8"/>
+<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+<title>PPMS · Typography</title>
+<script src="https://cdn.tailwindcss.com"></script>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+<script>tailwind.config={theme:{extend:{colors:{neutral:{100:"#f5f5f5",200:"#e5e5e5",400:"#a3a3a3",500:"#737373",700:"#404040",900:"#171717"}},fontFamily:{sans:['Inter','ui-sans-serif','system-ui','sans-serif'],mono:['"JetBrains Mono"','ui-monospace','monospace']}}}}</script>
+<style>body{font-family:'Inter',ui-sans-serif,system-ui,sans-serif}.mono,code{font-family:'JetBrains Mono',ui-monospace,monospace}</style>
+</head>
+<body class="bg-neutral-50 p-6 text-neutral-900">
+<h2 class="text-lg font-semibold">Typography</h2>
+<p class="mt-1 text-sm text-neutral-500"><b>Inter</b> for UI, <b>JetBrains Mono</b> for codes &amp; numbers (PO numbers, accounting codes).</p>
+<div class="mt-4 divide-y divide-neutral-200 rounded-lg border border-neutral-200 bg-white">
+  <div class="flex items-baseline justify-between gap-4 p-4"><p class="text-2xl font-semibold text-neutral-900">Page title</p><code class="text-xs text-neutral-400">text-2xl font-semibold</code></div>
+  <div class="flex items-baseline justify-between gap-4 p-4"><p class="text-lg font-semibold text-neutral-900">Section heading</p><code class="text-xs text-neutral-400">text-lg font-semibold</code></div>
+  <div class="flex items-baseline justify-between gap-4 p-4"><p class="text-base font-semibold text-neutral-900">Card title</p><code class="text-xs text-neutral-400">text-base font-semibold</code></div>
+  <div class="flex items-baseline justify-between gap-4 p-4"><p class="text-sm text-neutral-700">Body / table text — the workhorse size for the whole app.</p><code class="text-xs text-neutral-400">text-sm</code></div>
+  <div class="flex items-baseline justify-between gap-4 p-4"><p class="text-sm text-neutral-500">Muted description &amp; helper text</p><code class="text-xs text-neutral-400">text-sm text-neutral-500</code></div>
+  <div class="flex items-baseline justify-between gap-4 p-4"><p class="text-xs font-semibold uppercase tracking-wider text-neutral-400">Eyebrow / label</p><code class="text-xs text-neutral-400">text-xs uppercase tracking-wider</code></div>
+  <div class="flex items-baseline justify-between gap-4 p-4"><p class="mono text-sm text-neutral-700">PMS/HNR1/9000/2024-25</p><code class="text-xs text-neutral-400">font-mono</code></div>
+</div>
+</body>
+</html>
--- a/Wireframe/ds-bundle/layout/app-shell.html
+++ b/Wireframe/ds-bundle/layout/app-shell.html
@ -0,0 +1,48 @@
+<!-- @dsCard group="Layout" name="App shell" subtitle="w-60 sidebar + h-16 top bar + bg-neutral-50 main" width="780" height="380" -->
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8"/>
+<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+<title>PPMS · App shell</title>
+<script src="https://cdn.tailwindcss.com"></script>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+<script>tailwind.config={theme:{extend:{colors:{primary:{50:"#eff6ff",600:"#2563eb",700:"#1d4ed8"},neutral:{50:"#fafafa",100:"#f5f5f5",200:"#e5e5e5",300:"#d4d4d4",400:"#a3a3a3",600:"#525252",700:"#404040",900:"#171717"}},fontFamily:{sans:['Inter','ui-sans-serif','system-ui','sans-serif']}}}}</script>
+<style>body{font-family:'Inter',ui-sans-serif,system-ui,sans-serif}</style>
+</head>
+<body class="bg-neutral-50 p-6 text-neutral-900">
+<h2 class="text-lg font-semibold">App shell</h2>
+<p class="mt-1 max-w-2xl text-sm text-neutral-600">Fixed <b>w-60</b> white sidebar (<code>border-r</code>) + <b>h-16</b> top bar + scrollable <code>main</code> on <code>bg-neutral-50</code>, <b>p-6</b>. Active nav = <code>bg-primary-50 text-primary-700</code>; section eyebrow = <code>text-xs uppercase tracking-wider text-neutral-400</code>.</p>
+<div class="mt-4 overflow-hidden rounded-lg border border-neutral-200">
+  <div class="flex h-72 bg-neutral-50">
+    <aside class="flex w-56 shrink-0 flex-col border-r border-neutral-200 bg-white">
+      <div class="flex h-14 items-center gap-2.5 border-b border-neutral-200 px-4">
+        <div class="flex h-8 w-8 items-center justify-center rounded-lg bg-primary-600"><svg class="h-4 w-4 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="12" y1="22" x2="12" y2="8"/><path d="M5 12H2a10 10 0 0 0 20 0h-3"/><circle cx="12" cy="5" r="3"/></svg></div>
+        <span class="text-sm font-semibold">PPMS</span>
+      </div>
+      <nav class="flex-1 space-y-0.5 p-3 text-sm">
+        <a class="flex items-center gap-3 rounded-md bg-primary-50 px-3 py-2 font-medium text-primary-700"><span class="h-4 w-4 rounded" style="background:rgba(37,99,235,.2)"></span>Dashboard</a>
+        <a class="flex items-center gap-3 rounded-md px-3 py-2 font-medium text-neutral-600 hover:bg-neutral-100"><span class="h-4 w-4 rounded bg-neutral-300"></span>New PO</a>
+        <a class="flex items-center gap-3 rounded-md px-3 py-2 font-medium text-neutral-600 hover:bg-neutral-100"><span class="h-4 w-4 rounded bg-neutral-300"></span>Approvals</a>
+        <p class="px-3 pb-1 pt-4 text-xs font-semibold uppercase tracking-wider text-neutral-400">Administration</p>
+        <a class="flex items-center gap-3 rounded-md px-3 py-2 font-medium text-neutral-600 hover:bg-neutral-100"><span class="h-4 w-4 rounded bg-neutral-300"></span>Users</a>
+      </nav>
+    </aside>
+    <div class="flex flex-1 flex-col">
+      <div class="flex h-14 items-center justify-between border-b border-neutral-200 bg-white px-5">
+        <span class="text-sm font-medium text-neutral-500">Dashboard</span>
+        <span class="h-7 w-7 rounded-full bg-neutral-200"></span>
+      </div>
+      <div class="flex-1 space-y-3 overflow-hidden p-5">
+        <div class="h-4 w-40 rounded bg-neutral-200"></div>
+        <div class="grid grid-cols-3 gap-3">
+          <div class="h-16 rounded-lg border border-neutral-200 bg-white"></div>
+          <div class="h-16 rounded-lg border border-neutral-200 bg-white"></div>
+          <div class="h-16 rounded-lg border border-neutral-200 bg-white"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+</body>
+</html>
--- a/Wireframe/ds-bundle/layout/page-header.html
+++ b/Wireframe/ds-bundle/layout/page-header.html
@ -0,0 +1,28 @@
+<!-- @dsCard group="Layout" name="Page header" subtitle="Title + muted subtitle, primary action right" width="760" height="180" -->
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8"/>
+<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+<title>PPMS · Page header</title>
+<script src="https://cdn.tailwindcss.com"></script>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+<script>tailwind.config={theme:{extend:{colors:{primary:{600:"#2563eb",700:"#1d4ed8"},neutral:{200:"#e5e5e5",500:"#737373",900:"#171717"}},fontFamily:{sans:['Inter','ui-sans-serif','system-ui','sans-serif']}}}}</script>
+<style>body{font-family:'Inter',ui-sans-serif,system-ui,sans-serif}</style>
+</head>
+<body class="bg-neutral-50 p-6 text-neutral-900">
+<h2 class="text-lg font-semibold">Page header</h2>
+<p class="mt-1 text-sm text-neutral-500">Title + muted subtitle on the left, one primary action on the right.</p>
+<div class="mt-4 rounded-lg border border-neutral-200 bg-white p-6">
+  <div class="flex items-start justify-between gap-4">
+    <div>
+      <h1 class="text-2xl font-semibold text-neutral-900">Purchase Orders</h1>
+      <p class="mt-1 text-sm text-neutral-500">Create, track and approve orders across the fleet.</p>
+    </div>
+    <button class="inline-flex h-10 items-center gap-2 rounded-lg bg-primary-600 px-4 text-sm font-medium text-white hover:bg-primary-700">
+      <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>New PO
+    </button>
+  </div>
+</div>
+</body>
+</html>
Author	SHA1	Message	Date
shad0w	6e25d701d2	Merge pull request 'chore(design-system): add PPMS design system reference and sync bundle' (#62 ) from chore/design-system into master All checks were successful Refresh staging / refresh (push) Successful in 7s Details Reviewed-on: #62	2026-06-21 23:24:39 +00:00
Hardik	2de883c70f	chore(design-system): add PPMS design system reference and sync bundle All checks were successful PR checks / checks (pull_request) Successful in 36s Details PR checks / integration (pull_request) Successful in 26s Details Captures the live PPMS visual language (tokens from globals.css + components/ui/* + lib/utils.ts) so new screens can be prototyped with the same look and feel. - Wireframe/design-system.html: single-page living style guide (color ramps, typography, radius/shadow/spacing, icons, app shell, buttons, badges, PO status badges, cards/KPIs, forms, tabs, tables, alerts/dialog, charts, formatting conventions, do/don't). - Wireframe/ds-bundle/: per-component @dsCard preview cards (Foundations / Layout / Components) used to sync the design system to the claude.ai Design System project. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>	2026-06-22 04:30:22 +05:30
shad0w	e4c4c370f6	Merge pull request 'fix(po): keep export stamp clear of the signature (no overlap)' (#61 ) from fix/stamp-no-overlap into master All checks were successful Refresh staging / refresh (push) Successful in 7s Details Deploy release to production / deploy (push) Successful in 1m4s Details Reviewed-on: #61	2026-06-21 10:07:24 +00:00
Hardik	65a9335de1	fix(po): keep the export stamp clear of the signature (no overlap) All checks were successful PR checks / checks (pull_request) Successful in 35s Details PR checks / integration (pull_request) Successful in 26s Details Uploaded signatures/stamps aren't always transparent PNGs, so an opaque stamp overlapping the signature/name would cover them. Extract the signatory-block geometry into a tested helper (signatoryLayout): the signature is centred over the name and the stamp sits to its RIGHT with a 10px gap — never overlapping. - lib/po-export-layout.ts (signatoryLayout) + unit test - export route uses it instead of inline overlap math Verified in a real export: signature 175-328px (centred), stamp 338-405px (10px gap, no overlap), stamp drawn behind the signature. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>	2026-06-21 15:35:09 +05:30
shad0w	cb661949d9	Merge pull request 'fix(po): size XLSX export images by pixels (aspect preserved)' (#60 ) from fix/xlsx-export-asset-sizing into master All checks were successful Refresh staging / refresh (push) Successful in 7s Details Deploy release to production / deploy (push) Successful in 1m3s Details Reviewed-on: #60	2026-06-21 08:21:30 +00:00
Hardik	610c9aa56d	fix(po): centre signature over name; stamp to its right and behind it All checks were successful PR checks / checks (pull_request) Successful in 34s Details PR checks / integration (pull_request) Successful in 25s Details In the XLSX signatory block, place the approver signature centred over the name and tuck the stamp to its right with a slight overlap. The stamp is now drawn before the signature so it layers behind it (Excel z-order = add order). Images are positioned by absolute pixels via native EMU offsets — ExcelJS's fractional-column anchors don't map cleanly to pixels (the stamp was landing on top of the signature centre instead of to its right). Verified in a real export: signature centre 252px in the 503px A-D block (centred), stamp to the right (305-372px), stamp drawn behind the signature. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>	2026-06-21 13:45:56 +05:30
Hardik	6677ef4fcf	fix(po): size XLSX export images by pixels (aspect preserved) All checks were successful PR checks / checks (pull_request) Successful in 34s Details PR checks / integration (pull_request) Successful in 26s Details The logo, signature, stamp and cancelled watermark were placed with ExcelJS two-cell (tl/br) anchors, which stretch each image to fill a cell range — distorting them and making the watermark text small/squished. The PDF looked fine because CSS sizes by aspect. - New lib/image-size.ts: getImageSize (PNG/JPEG/WebP header parse) + scaleToBox. - Export route now places each image with a oneCell `tl` + pixel `ext`, aspect preserved and matched to the PDF sizes (logo ≤96×52, signature ≤165×44, stamp ≤80×66, watermark ≤880×720). - Watermark regenerated as a landscape canvas with the text filling it, so it spans the page like the PDF instead of sitting small in the centre. - Unit test for getImageSize + scaleToBox. Verified structurally: generated XLSX uses oneCellAnchors with fixed pixel ext sizes (49×52 / 45×44 / 67×66 / 880×629), not stretched cell ranges. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>	2026-06-21 13:27:15 +05:30
shad0w	4fee393c84	Merge pull request 'fix: Add Vendor-ID to /inventory/vendors search' (#58 ) from claude/issue-57 into master All checks were successful Refresh staging / refresh (push) Successful in 7s Details Deploy release to production / deploy (push) Successful in 1m5s Details Reviewed-on: #58	2026-06-21 07:32:06 +00:00
shad0w	3b9bc0be1b	Merge branch 'master' into claude/issue-57 All checks were successful PR checks / checks (pull_request) Successful in 32s Details PR checks / integration (pull_request) Successful in 27s Details	2026-06-21 07:31:33 +00:00
shad0w	0fdd899096	Merge pull request 'fix(po): make cancel buttons red & visible' (#59 ) from fix/cancel-button-red into master All checks were successful Refresh staging / refresh (push) Successful in 7s Details Reviewed-on: #59	2026-06-21 07:30:49 +00:00
Hardik	43d139234e	fix(po): make cancel buttons red & visible (use defined danger tokens) All checks were successful PR checks / checks (pull_request) Successful in 31s Details PR checks / integration (pull_request) Successful in 25s Details The theme only defines danger / danger-50 / danger-100 / danger-700, so bg-danger-600 / danger-500 / danger-200 generated no CSS — the modal confirm button was white-on-nothing (invisible) and the header button wasn't red. - Header "Cancel PO" button → solid red (bg-danger text-white hover:bg-danger-700) - Modal "Cancel this PO" confirm button → bg-danger (now visible) - Inputs/asterisk/banner border → defined danger tokens Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>	2026-06-21 12:59:20 +05:30
Claude (auto-fix)	cb25d2e5fd	feat(vendors): search by vendor ID and show it next to the name All checks were successful PR checks / checks (pull_request) Successful in 34s Details PR checks / integration (pull_request) Successful in 26s Details On /inventory/vendors, include vendorId in the search filter and render it as a muted mono badge beside the vendor name. The vendorId data was already passed to the client component, so this is a presentation/filter change only. Unverified vendors (no vendorId) render unchanged. Fixes #57 Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>	2026-06-21 12:43:21 +05:30
shad0w	9de60200f9	Merge pull request 'feat(po): cancel POs + optional supersede link (#53 )' (#56 ) from feat/po-cancel-supersede into master All checks were successful Refresh staging / refresh (push) Successful in 7s Details Deploy release to production / deploy (push) Successful in 1m7s Details Reviewed-on: #56	2026-06-21 06:58:31 +00:00