feat(e2e): add Playwright end-to-end tests for authentication, GRN, production, stock transfers, and adjustments

- Introduced Playwright configuration for e2e testing. - Implemented authentication tests to validate login functionality. - Created tests for GRN (Goods Receipt Note) to ensure proper stock handling. - Developed production run tests to verify lifecycle and stock posting. - Added stock transfer tests to check movement between warehouses. - Implemented stock adjustment tests for positive and negative adjustments. - Established API seeder for test data setup and verification. - Enhanced utility functions for UI interactions and response handling.
2026-08-05 13:23:07 +05:30
11 changed files with 390 additions and 726 deletions
@@ -129,8 +129,6 @@ Convention: `docs/01-DOC-GUIDE.md §6`. Update this file in the **same commit**
 > **Fields not explicitly spelled out verbatim in GL's reference** (its own numeric-id column names for `ChequeBook`/`ChequePage`, and `ReceivedCheque`'s JSON id field) are built from the request-body field names GL *does* document plus this project's consistent `<entity>Id` convention, flagged in `types/general-ledger.ts`'s comments — `chequeNo`/`chequeBookNo` (both explicitly documented as the identifying route values) are used for keys/URLs throughout instead, sidestepping the guess entirely wherever possible. **Not done:** live smoke test against a running GL instance — this entire module is unverified against real Cheque Management data. Verified: `tsc --noEmit`/`eslint` clean on every touched file; `npm run build` compiles successfully (Turbopack), its full-project TypeScript check still blocked only by the pre-existing, unrelated `hrm/employees/[id]` error.
 >
 > **2026-07-20 (3) — General Ledger report corrected again: `accountId` dropped entirely, not just made direct-entry.** The GL service's own contract changed (confirmed against its updated docs): `GeneralLedger`'s `accountId` is now optional, and the *omitted* case is the real General Ledger (every postable account together, each with its own running balance, sorted by `accountCode` then `entryDate`) — supplying `accountId` is a separate "Account Ledger" (single account + descendants) mode this page doesn't use. Superseding the same-day entry above: the numeric Account ID input is gone, `reportsApi.generalLedger()` dropped the `accountId` parameter, and the page now fetches on `periodStart`/`periodEnd` alone with sensible defaults — auto-fetching on page load like every other report screen (this also resolves the earlier-reported "no network call when landing on the page," which was the now-removed account-required gate). Result rows are grouped into per-account sections in the table (a header row wherever `accountCode` changes), matching the API's per-account running-balance reset. No frontend change was needed for the same-day `BalanceSheet` response addition (a synthetic `"Current Year Earnings"` equity row) — the existing generic row renderer already displays whatever rows come back. Verified: `tsc --noEmit` clean, `npx eslint app/dashboard/ledgers lib/api/general-ledger.ts` produces zero output, `npm run build` succeeds.
->
-> **2026-08-05 — Cheque Management status/type fields were rendering as raw integers, not names (user-reported + confirmed with GL's own `06_Enums_Reference.md`).** That doc's key fact: GL has no global `JsonStringEnumConverter`. A JSON-**body** enum field (e.g. the Issue-cheque form's `payeeType`) is independently declared `string` server-side and parsed via `Enum.TryParse`, and a query-string enum filter binds natively by name — both already correct here, unaffected. But `ChequeBook.status`, `ChequePage.issueStatus`, `ChequePage.payeeType`, `ReceivedCheque.receivedFromType`, and `ReceivedCheque.status` are genuine enum-typed properties on GL's own **response** DTOs, backed by real `integer` DB columns — with no converter, GL's JSON serializes each one as its raw number (`1`/`2`/`3`/...), not its name. This wasn't just a cosmetic label bug: every list badge, the dialogs' status-based available-actions logic, and any `===` comparison against this frontend's own string enums (`ChequeBookStatus.Active`, etc.) would have silently mismatched against these numbers. Fixed at the API boundary, not scattered across every consumer: added five `*_BY_CODE` lookup maps to `types/general-ledger.ts` (one per affected field, keyed by the exact integers `06_Enums_Reference.md` documents), and applied them in `lib/api/general-ledger.ts` via new `Raw*` types (describing GL's actual `number`/`number | null` response shape for these fields) plus `mapChequeBook`/`mapChequePage`/`mapReceivedCheque` helpers wired into every `chequeBooksApi`/`chequePagesApi`/`receivedChequesApi` method that returns one — so every page/dialog/badge map keeps working against the same string values as before, unchanged. Cross-checked every other enum in that doc's "Persisted enums" table against this frontend (`JournalEntryStatus`/`PeriodStatus`/`TaxCalculationBasis`/`TaxAppliesTo`/`DepreciationMethod`/`FixedAssetStatus`/`AuditCategory`/`AuditAction`) — none are consumed anywhere in this app, confirming Cheque Management was the complete fix, not a partial one. Verified: `tsc --noEmit`/`eslint` clean on both touched files.

 ## 7. UX states
 - [~] Loading / empty / error states on every list — done for the GRN list/create/detail screens; other screens still unbuilt
@@ -3,7 +3,8 @@
 import { useEffect, useState } from "react"
 import { useParams, useRouter } from "next/navigation"
 import Link from "next/link"
-import { AlertTriangle, ArrowLeft, Ban, Check, Plus, Save, Trash2 } from "lucide-react"
+import { AlertTriangle, Ban, Plus, Save, Send, Trash2 } from "lucide-react"
+
 import { isPoEditable, purchaseOrdersApi } from "@/lib/api/purchase-orders"
 import { warehousesApi } from "@/lib/api/warehouses"
 import { itemsApi } from "@/lib/api/items"
@@ -194,12 +195,10 @@ export default function PurchaseOrderDetailPage() {
      const updated = await purchaseOrdersApi.submit(po.poId)
      setPo(updated)
      setLines(toDraftLines(updated))
-      toast.success("Purchase order approved", `${updated.docNo} — now ${updated.status} and locked for editing.`)
-      toast.success("Purchase order approved", `${updated.docNo} — now ${updated.status} and locked for editing.`)
+      toast.success("Purchase order submitted", `${updated.docNo} — now ${updated.status} and locked for editing.`)
    } catch (err) {
      setSaveError(errorMessage(err))
-      toast.error("Could not approve purchase order", errorMessage(err))
-      toast.error("Could not approve purchase order", errorMessage(err))
+      toast.error("Could not submit purchase order", errorMessage(err))
    } finally {
      setSubmitting(false)
    }
@@ -284,12 +283,9 @@ export default function PurchaseOrderDetailPage() {
        <div className="flex flex-wrap items-center gap-3">
          {po.status === "Draft" && (
            <>
-              <Button variant="success" size="lg" onClick={handleSubmitPo} disabled={submitting || deleting}>
-                <Check className="size-5" />
-                {submitting ? "Approving…" : "Approve"}
-              <Button variant="success" size="lg" onClick={handleSubmitPo} disabled={submitting || deleting}>
-                <Check className="size-5" />
-                {submitting ? "Approving…" : "Approve"}
+              <Button variant="outline" size="lg" onClick={handleSubmitPo} disabled={submitting || deleting}>
+                <Send className="size-5" />
+                {submitting ? "Submitting…" : "Submit"}
              </Button>
              <Button variant="destructive" size="lg" onClick={handleDelete} disabled={deleting || submitting}>
                <Trash2 className="size-5" />
@@ -3,7 +3,7 @@
 import { Suspense, useEffect, useState } from "react"
 import { useRouter, useSearchParams } from "next/navigation"
 import Link from "next/link"
-import { ArrowLeft, ExternalLink, Plus, Trash2 } from "lucide-react"
+import { Plus, Trash2 } from "lucide-react"

 import { purchaseOrdersApi } from "@/lib/api/purchase-orders"
 import { requisitionsApi } from "@/lib/api/requisitions"
@@ -15,22 +15,13 @@ import { uomsApi } from "@/lib/api/uoms"
 import { errorMessage } from "@/lib/error-map"
 import { validatePoLine } from "@/lib/validations/procurement"
 import { cn } from "@/lib/utils"
-import { generateVendorCode } from "@/lib/vendor-code"
 import { CreatePoLineInput } from "@/types/procurement"
 import { ItemListItem, Uom, Vendor, Warehouse } from "@/types/master-data"

 import { Button, buttonVariants } from "@/components/ui/button"
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "@/components/ui/dialog"
-import { Field, FieldError, FieldGroup, FieldLabel } from "@/components/ui/field"
 import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
+import { FieldError } from "@/components/ui/field"
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
 import { Skeleton } from "@/components/ui/skeleton"
@@ -82,82 +73,21 @@ function NewPurchaseOrderContent() {
  const [submitError, setSubmitError] = useState<string | null>(null)
  const [submitting, setSubmitting] = useState(false)

-  const [vendorDialogOpen, setVendorDialogOpen] = useState(false)
-  const [vName, setVName] = useState("")
-  const [vTerms, setVTerms] = useState("")
-  const [vTaxReg, setVTaxReg] = useState("")
-  const [vCurrency, setVCurrency] = useState("LKR")
-  const [vErrors, setVErrors] = useState<Record<string, string>>({})
-  const [vSubmitting, setVSubmitting] = useState(false)
-
-  const generatedVendorCode = vName.trim() ? generateVendorCode(vName, (vendors ?? []).map((v) => v.code)) : ""
-
-  function loadItems() {
-    return itemsApi.list({ pageSize: 200, status: "Active" }).then((it) => setItems(it.items))
-  }
-  function loadVendors() {
-    return vendorsApi.list({ pageSize: 200, status: "Active" }).then((ve) => setVendors(ve.items))
-  }
-
  useEffect(() => {
    Promise.all([
-      loadItems(),
-      uomsApi.list().then((uo) => setUoms(uo.items)),
-      warehousesApi.list().then((wh) => setWarehouses(wh.items)),
-      loadVendors(),
-    ]).catch((err) => setLoadError(errorMessage(err)))
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
-
-  // A new item is created on the standalone item builder (too many fields for a modal here),
-  // typically in another tab — refetch on refocus so it shows up in the line pickers without
-  // the user having to reload this page and lose their draft.
-  useEffect(() => {
-    function onFocus() {
-      loadItems().catch(() => {})
-    }
-    window.addEventListener("focus", onFocus)
-    return () => window.removeEventListener("focus", onFocus)
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
-
-  function resetVendorForm() {
-    setVName("")
-    setVTerms("")
-    setVTaxReg("")
-    setVCurrency("LKR")
-    setVErrors({})
-  }
-
-  async function handleCreateVendor() {
-    const nextErrors: Record<string, string> = {}
-    if (!vName.trim()) nextErrors.name = "Vendor name is required"
-    if (!vCurrency.trim()) nextErrors.currency = "Currency is required"
-    setVErrors(nextErrors)
-    if (Object.keys(nextErrors).length > 0) return
-
-    setVSubmitting(true)
-    try {
-      const result = await vendorsApi.create({
-        code: generatedVendorCode,
-        name: vName,
-        terms: vTerms || null,
-        taxReg: vTaxReg || null,
-        currency: vCurrency,
+      itemsApi.list({ pageSize: 200, status: "Active" }),
+      uomsApi.list(),
+      warehousesApi.list(),
+      vendorsApi.list({ pageSize: 200, status: "Active" }),
+    ])
+      .then(([it, uo, wh, ve]) => {
+        setItems(it.items)
+        setUoms(uo.items)
+        setWarehouses(wh.items)
+        setVendors(ve.items)
      })
-      await loadVendors()
-      setVendorId(result.data.vendorId)
-      toast.success("Vendor created", `${result.data.code} — ${result.data.name}`)
-      setVendorDialogOpen(false)
-      resetVendorForm()
-    } catch (err) {
-      // A 409 here means another creation raced ours for the same generated code — the
-      // proactive de-dupe above only knows about vendors loaded when the dialog opened.
-      toast.error("Could not create vendor", errorMessage(err))
-    } finally {
-      setVSubmitting(false)
-    }
-  }
+      .catch((err) => setLoadError(errorMessage(err)))
+  }, [])

  useEffect(() => {
    if (requisitionId) {
@@ -306,72 +236,43 @@ function NewPurchaseOrderContent() {
      {!loading && (
        <>
          <div className="grid grid-cols-1 gap-4 sm:grid-cols-4">
-            <div className="flex flex-col gap-2 sm:col-span-2">
-              <Label className="text-base">Vendor</Label>
-              <div className="flex items-center gap-2">
-                <Select<number | null>
-                  value={vendorId}
-                  onValueChange={setVendorId}
-                  items={(vendors ?? []).map((v) => ({ label: `${v.code} — ${v.name}`, value: v.vendorId }))}
-                >
-                  <SelectTrigger className="h-12! w-full text-base">
-                    <SelectValue placeholder="Select vendor" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    {(vendors ?? []).map((v) => (
-                      <SelectItem key={v.vendorId} value={v.vendorId} className="text-base">
-                        {v.code} — {v.name}
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
-
-                <Dialog open={vendorDialogOpen} onOpenChange={(o) => { setVendorDialogOpen(o); if (!o) resetVendorForm() }}>
-                  <DialogTrigger
-                    render={<Button type="button" variant="outline" size="icon-lg" aria-label="New vendor" title="New vendor" />}
-                  >
-                    <Plus className="size-5" />
-                  </DialogTrigger>
-                  <DialogContent className="sm:max-w-md">
-                    <DialogHeader className="items-center text-center">
-                      <DialogTitle>New vendor</DialogTitle>
-                      <DialogDescription>Create a supplier record without leaving this PO. Its code is generated from the name.</DialogDescription>
-                    </DialogHeader>
-                    <FieldGroup>
-                      <Field data-invalid={!!vErrors.name}>
-                        <FieldLabel htmlFor="po-v-name">Name</FieldLabel>
-                        <Input id="po-v-name" value={vName} onChange={(e) => setVName(e.target.value)} placeholder="Lanka Steel Traders (Pvt) Ltd" aria-invalid={!!vErrors.name} />
-                        <FieldError errors={[vErrors.name ? { message: vErrors.name } : undefined]} />
-                      </Field>
-                      <Field>
-                        <FieldLabel htmlFor="po-v-code">Code (auto-generated)</FieldLabel>
-                        <Input id="po-v-code" value={generatedVendorCode} readOnly disabled placeholder="Enter a name to generate a code" className="text-muted-foreground" />
-                      </Field>
-                      <Field>
-                        <FieldLabel htmlFor="po-v-terms">Payment terms (optional)</FieldLabel>
-                        <Input id="po-v-terms" value={vTerms} onChange={(e) => setVTerms(e.target.value)} placeholder="NET30" />
-                      </Field>
-                      <Field>
-                        <FieldLabel htmlFor="po-v-taxreg">Tax registration (optional)</FieldLabel>
-                        <Input id="po-v-taxreg" value={vTaxReg} onChange={(e) => setVTaxReg(e.target.value)} placeholder="134567890-7000" />
-                      </Field>
-                      <Field data-invalid={!!vErrors.currency}>
-                        <FieldLabel htmlFor="po-v-currency">Currency</FieldLabel>
-                        <Input id="po-v-currency" value={vCurrency} onChange={(e) => setVCurrency(e.target.value)} placeholder="LKR" maxLength={3} aria-invalid={!!vErrors.currency} />
-                        <FieldError errors={[vErrors.currency ? { message: vErrors.currency } : undefined]} />
-                      </Field>
-                    </FieldGroup>
-                    <div className="flex flex-col-reverse gap-3 pt-2 sm:flex-row sm:justify-center">
-                      <Button variant="outline" className="w-full sm:w-auto sm:min-w-36" onClick={() => setVendorDialogOpen(false)} disabled={vSubmitting}>
-                        Cancel
-                      </Button>
-                      <Button className="w-full sm:w-auto sm:min-w-36" onClick={handleCreateVendor} disabled={vSubmitting}>
-                        {vSubmitting ? "Creating…" : "Create"}
-                      </Button>
-                    </div>
-                  </DialogContent>
-                </Dialog>
-              </div>
+            <div className="flex flex-col gap-2">
+              <Label className="text-base">Vendor code</Label>
+              <Select<number | null>
+                value={vendorId}
+                onValueChange={setVendorId}
+                items={(vendors ?? []).map((v) => ({ label: v.code, value: v.vendorId }))}
+              >
+                <SelectTrigger className="h-12! w-full text-base">
+                  <SelectValue placeholder="Select vendor code" />
+                </SelectTrigger>
+                <SelectContent>
+                  {(vendors ?? []).map((v) => (
+                    <SelectItem key={v.vendorId} value={v.vendorId} className="text-base">
+                      {v.code}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="flex flex-col gap-2">
+              <Label className="text-base">Vendor name</Label>
+              <Select<number | null>
+                value={vendorId}
+                onValueChange={setVendorId}
+                items={(vendors ?? []).map((v) => ({ label: v.name, value: v.vendorId }))}
+              >
+                <SelectTrigger className="h-12! w-full text-base">
+                  <SelectValue placeholder="Select vendor name" />
+                </SelectTrigger>
+                <SelectContent>
+                  {(vendors ?? []).map((v) => (
+                    <SelectItem key={v.vendorId} value={v.vendorId} className="text-base">
+                      {v.name}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
            </div>
            {requisitionId && (
              <div className="flex flex-col justify-end pb-2.5 text-sm text-muted-foreground">From Requisition #{requisitionId}</div>
@@ -386,22 +287,10 @@ function NewPurchaseOrderContent() {
          <div className="flex flex-col gap-3">
            <div className="flex items-center justify-between">
              <h2 className="text-base font-semibold text-foreground">Lines</h2>
-              <div className="flex items-center gap-2">
-                <Link
-                  href="/dashboard/products/new"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className={cn(buttonVariants({ variant: "outline" }))}
-                  title="Opens in a new tab — the item list here refreshes when you come back"
-                >
-                  <ExternalLink className="size-5" />
-                  New item
-                </Link>
-                <Button type="button" variant="outline" onClick={() => setLines((prev) => [...prev, emptyLine()])}>
-                  <Plus className="size-5" />
-                  Add line
-                </Button>
-              </div>
+              <Button type="button" variant="outline" onClick={() => setLines((prev) => [...prev, emptyLine()])}>
+                <Plus className="size-5" />
+                Add line
+              </Button>
            </div>

            {lines.length > 0 && (
@@ -2,9 +2,9 @@

 import { useEffect, useState } from "react"
 import Link from "next/link"
-import { Check, ChevronLeft, ChevronRight, Eye, Pencil, Plus, ShoppingCart, Trash2 } from "lucide-react"
+import { ChevronLeft, ChevronRight, Plus, ShoppingCart } from "lucide-react"

-import { isPoEditable, purchaseOrdersApi } from "@/lib/api/purchase-orders"
+import { purchaseOrdersApi } from "@/lib/api/purchase-orders"
 import { vendorsApi } from "@/lib/api/vendors"
 import { errorMessage } from "@/lib/error-map"
 import { PurchaseOrderStatus, PurchaseOrderSummary } from "@/types/procurement"
@@ -16,7 +16,6 @@ import { Input } from "@/components/ui/input"
 import { Skeleton } from "@/components/ui/skeleton"
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
-import { toast } from "@/components/ui/toast"
 import { PoStatusBadge } from "@/components/procurement/status-badges"

 type StatusFilter = PurchaseOrderStatus | "All"
@@ -33,8 +32,6 @@ export default function PurchaseOrdersListPage() {
  const [query, setQuery] = useState("")
  const [status, setStatus] = useState<StatusFilter>("All")
  const [page, setPage] = useState(1)
-  const [deletingId, setDeletingId] = useState<number | null>(null)
-  const [approvingId, setApprovingId] = useState<number | null>(null)

  useEffect(() => {
    const timeout = setTimeout(() => setQuery(searchInput.trim()), 300)
@@ -63,34 +60,6 @@ export default function PurchaseOrdersListPage() {
    return vendors.find((v) => v.vendorId === vendorId)?.code ?? `#${vendorId}`
  }

-  async function handleDelete(po: PurchaseOrderSummary) {
-    if (!window.confirm(`Delete draft ${po.docNo}? This cannot be undone.`)) return
-    setDeletingId(po.poId)
-    try {
-      await purchaseOrdersApi.remove(po.poId)
-      toast.success("Draft deleted", po.docNo)
-      load()
-    } catch (err) {
-      toast.error("Could not delete purchase order", errorMessage(err))
-    } finally {
-      setDeletingId(null)
-    }
-  }
-
-  async function handleApprove(po: PurchaseOrderSummary) {
-    if (!window.confirm(`Approve ${po.docNo}? It will be locked for editing once approved.`)) return
-    setApprovingId(po.poId)
-    try {
-      const updated = await purchaseOrdersApi.submit(po.poId)
-      toast.success("Purchase order approved", `${updated.docNo} — now ${updated.status}.`)
-      load()
-    } catch (err) {
-      toast.error("Could not approve purchase order", errorMessage(err))
-    } finally {
-      setApprovingId(null)
-    }
-  }
-
  const hasFilters = query.length > 0 || status !== "All"

  return (
@@ -164,76 +133,24 @@ export default function PurchaseOrdersListPage() {
                <TableHead className="h-12 px-3 text-sm">Status</TableHead>
                <TableHead className="h-12 px-3 text-sm">Grand total</TableHead>
                <TableHead className="h-12 px-3 text-sm">Created</TableHead>
-                <TableHead className="h-12 w-44 px-3 text-sm">Actions</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
-              {pos.map((po) => {
-                const editable = isPoEditable(po.status)
-                return (
-                  <TableRow key={po.poId}>
-                    <TableCell className="px-3 py-3.5">
-                      <Link href={`/dashboard/procurement/purchase-orders/${po.poId}`} className="font-medium text-foreground hover:underline">
-                        {po.docNo}
-                      </Link>
-                    </TableCell>
-                    <TableCell className="px-3 py-3.5">{vendorCode(po.vendorId)}</TableCell>
-                    <TableCell className="px-3 py-3.5">
-                      <PoStatusBadge status={po.status} />
-                    </TableCell>
-                    <TableCell className="px-3 py-3.5">{po.totals.currency} {po.totals.grandTotal.toFixed(2)}</TableCell>
-                    <TableCell className="px-3 py-3.5">{new Date(po.createdAt).toLocaleString()}</TableCell>
-                    <TableCell className="px-3 py-3.5">
-                      <div className="flex items-center gap-1">
-                        <Link
-                          href={`/dashboard/procurement/purchase-orders/${po.poId}`}
-                          className={cn(buttonVariants({ variant: "ghost", size: "icon" }))}
-                          aria-label="View"
-                          title="View"
-                        >
-                          <Eye className="size-4" />
-                        </Link>
-                        {editable && (
-                          <>
-                            <Link
-                              href={`/dashboard/procurement/purchase-orders/${po.poId}`}
-                              className={cn(buttonVariants({ variant: "ghost", size: "icon" }))}
-                              aria-label="Edit draft"
-                              title="Edit draft"
-                            >
-                              <Pencil className="size-4" />
-                            </Link>
-                            <Button
-                              type="button"
-                              variant="ghost"
-                              size="icon"
-                              aria-label="Approve draft"
-                              title="Approve draft"
-                              disabled={approvingId === po.poId || deletingId === po.poId}
-                              onClick={() => handleApprove(po)}
-                              className="text-success hover:bg-success/10 hover:text-success"
-                            >
-                              <Check className="size-4" />
-                            </Button>
-                            <Button
-                              type="button"
-                              variant="ghost"
-                              size="icon"
-                              aria-label="Delete draft"
-                              title="Delete draft"
-                              disabled={deletingId === po.poId || approvingId === po.poId}
-                              onClick={() => handleDelete(po)}
-                              className="text-destructive hover:bg-destructive/10 hover:text-destructive"
-                            >
-                              <Trash2 className="size-4" />
-                            </Button>
-                          </>
-                        )}
-                      </div>
-                    </TableCell>
-                  </TableRow>
-                )
-              })}
+              {pos.map((po) => (
+                <TableRow key={po.poId}>
+                  <TableCell className="px-3 py-3.5">
+                    <Link href={`/dashboard/procurement/purchase-orders/${po.poId}`} className="font-medium text-foreground hover:underline">
+                      {po.docNo}
+                    </Link>
+                  </TableCell>
+                  <TableCell className="px-3 py-3.5">{vendorCode(po.vendorId)}</TableCell>
+                  <TableCell className="px-3 py-3.5">
+                    <PoStatusBadge status={po.status} />
+                  </TableCell>
+                  <TableCell className="px-3 py-3.5">{po.totals.currency} {po.totals.grandTotal.toFixed(2)}</TableCell>
+                  <TableCell className="px-3 py-3.5">{new Date(po.createdAt).toLocaleString()}</TableCell>
+                </TableRow>
+              ))}
            </TableBody>
          </Table>

@@ -1,6 +1,6 @@
 "use client"

-import { Plus, Trash2 } from "lucide-react"
+import { Plus, Trash2, X } from "lucide-react"

 import { cn } from "@/lib/utils"
 import { CustomFieldType, StageInputSource } from "@/types/production"
@@ -15,7 +15,6 @@ import {
 } from "./types"

 import { Button } from "@/components/ui/button"
-import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
 import { Field, FieldLabel } from "@/components/ui/field"
 import { Input } from "@/components/ui/input"
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
@@ -176,264 +175,265 @@ export function StageEditorPanel({
  }

  return (
-    <Dialog open onOpenChange={(next) => !next && onClose()}>
-      <DialogContent className="max-h-[85vh] w-full max-w-lg overflow-y-auto sm:max-w-lg">
-        <DialogHeader>
-          <DialogTitle>Stage editor</DialogTitle>
-        </DialogHeader>
+    <div className="flex h-full w-full flex-col overflow-y-auto rounded-2xl bg-card p-4 shadow-sm ring-1 ring-foreground/10 sm:w-96">
+      <div className="mb-4 flex items-center justify-between">
+        <h2 className="text-base font-bold text-foreground">Stage editor</h2>
+        <button type="button" onClick={onClose} className="text-muted-foreground hover:text-foreground" aria-label="Close panel">
+          <X className="size-5" />
+        </button>
+      </div>

-        <div className="flex flex-col gap-4">
-          <Field>
-            <FieldLabel>Name</FieldLabel>
-            <Input value={data.name} disabled={readOnly} onChange={(e) => onChange({ name: e.target.value })} placeholder="e.g. Welding" />
-          </Field>
+      <div className="flex flex-col gap-4">
+        <Field>
+          <FieldLabel>Name</FieldLabel>
+          <Input value={data.name} disabled={readOnly} onChange={(e) => onChange({ name: e.target.value })} placeholder="e.g. Welding" />
+        </Field>

-          <Field>
-            <FieldLabel>Role label</FieldLabel>
-            <Input
-              value={data.roleLabel}
-              disabled={readOnly}
-              onChange={(e) => onChange({ roleLabel: e.target.value })}
-              placeholder="e.g. QA"
-              list="role-suggestions"
-            />
-            <datalist id="role-suggestions">
-              {ROLE_SUGGESTIONS.map((r) => (
-                <option key={r} value={r} />
-              ))}
-            </datalist>
-          </Field>
+        <Field>
+          <FieldLabel>Role label</FieldLabel>
+          <Input
+            value={data.roleLabel}
+            disabled={readOnly}
+            onChange={(e) => onChange({ roleLabel: e.target.value })}
+            placeholder="e.g. QA"
+            list="role-suggestions"
+          />
+          <datalist id="role-suggestions">
+            {ROLE_SUGGESTIONS.map((r) => (
+              <option key={r} value={r} />
+            ))}
+          </datalist>
+        </Field>

-          <Field>
-            <FieldLabel>Estimated minutes</FieldLabel>
-            <Input
-              type="number"
-              min={0}
-              value={data.estimatedMinutes}
-              disabled={readOnly}
-              onChange={(e) => onChange({ estimatedMinutes: Number(e.target.value) || 0 })}
-            />
-          </Field>
+        <Field>
+          <FieldLabel>Estimated minutes</FieldLabel>
+          <Input
+            type="number"
+            min={0}
+            value={data.estimatedMinutes}
+            disabled={readOnly}
+            onChange={(e) => onChange({ estimatedMinutes: Number(e.target.value) || 0 })}
+          />
+        </Field>

-          {/* Inputs */}
-          <div>
-            <div className="mb-2 flex items-center justify-between">
-              <p className="text-sm font-semibold text-foreground">Inputs</p>
-              {!readOnly && (
-                <Button type="button" variant="ghost" size="sm" onClick={addInput}>
-                  <Plus className="size-4" />
-                  Add
-                </Button>
-              )}
-            </div>
-            <div className="flex flex-col gap-2">
-              {data.inputs.length === 0 && <p className="text-sm text-muted-foreground">No inputs yet.</p>}
-              {data.inputs.map((input) => (
-                <div key={input.localId} className="rounded-lg border border-border p-2.5">
-                  <div className="mb-2 flex items-center justify-between gap-2">
-                    <Select<StageInputSource>
-                      value={input.source}
-                      onValueChange={(v) => v && changeInputSource(input.localId, v)}
+        {/* Inputs */}
+        <div>
+          <div className="mb-2 flex items-center justify-between">
+            <p className="text-sm font-semibold text-foreground">Inputs</p>
+            {!readOnly && (
+              <Button type="button" variant="ghost" size="sm" onClick={addInput}>
+                <Plus className="size-4" />
+                Add
+              </Button>
+            )}
+          </div>
+          <div className="flex flex-col gap-2">
+            {data.inputs.length === 0 && <p className="text-sm text-muted-foreground">No inputs yet.</p>}
+            {data.inputs.map((input) => (
+              <div key={input.localId} className="rounded-lg border border-border p-2.5">
+                <div className="mb-2 flex items-center justify-between gap-2">
+                  <Select<StageInputSource>
+                    value={input.source}
+                    onValueChange={(v) => v && changeInputSource(input.localId, v)}
+                  >
+                    <SelectTrigger className="h-8! flex-1 text-sm" disabled={readOnly}>
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="Stock" className="text-sm">Stock</SelectItem>
+                      <SelectItem value="Upstream" className="text-sm">Upstream</SelectItem>
+                    </SelectContent>
+                  </Select>
+                  {!readOnly && (
+                    <button type="button" onClick={() => removeInput(input.localId)} className="shrink-0 text-muted-foreground hover:text-destructive" aria-label="Remove input">
+                      <Trash2 className="size-4" />
+                    </button>
+                  )}
+                </div>
+
+                <div className="flex flex-col gap-2">
+                  {input.source === "Stock" ? (
+                    <Select<number>
+                      value={input.itemId}
+                      onValueChange={(v) => v && pickInputItem(input, v)}
                    >
-                      <SelectTrigger className="h-8! flex-1 text-sm" disabled={readOnly}>
-                        <SelectValue />
+                      <SelectTrigger className="h-8! w-full text-sm" disabled={readOnly}>
+                        <SelectValue placeholder="Pick an item" />
                      </SelectTrigger>
                      <SelectContent>
-                        <SelectItem value="Stock" className="text-sm">Stock</SelectItem>
-                        <SelectItem value="Upstream" className="text-sm">Upstream</SelectItem>
-                      </SelectContent>
-                    </Select>
-                    {!readOnly && (
-                      <button type="button" onClick={() => removeInput(input.localId)} className="shrink-0 text-muted-foreground hover:text-destructive" aria-label="Remove input">
-                        <Trash2 className="size-4" />
-                      </button>
-                    )}
-                  </div>
-
-                  <div className="flex flex-col gap-2">
-                    {input.source === "Stock" ? (
-                      <Select<number>
-                        value={input.itemId}
-                        onValueChange={(v) => v && pickInputItem(input, v)}
-                      >
-                        <SelectTrigger className="h-8! w-full text-sm" disabled={readOnly}>
-                          <SelectValue placeholder="Pick an item" />
-                        </SelectTrigger>
-                        <SelectContent>
-                          {items.map((i) => (
-                            <SelectItem key={i.itemId} value={i.itemId} className="text-sm">
-                              {i.name} · {i.sku}
-                            </SelectItem>
-                          ))}
-                        </SelectContent>
-                      </Select>
-                    ) : (
-                      <Select<string>
-                        value={input.fromOutputKey}
-                        onValueChange={(v) => v && updateInput(input.localId, { fromOutputKey: v })}
-                      >
-                        <SelectTrigger className="h-8! w-full text-sm" disabled={readOnly || upstreamOptions.length === 0}>
-                          <SelectValue placeholder={upstreamOptions.length === 0 ? "No upstream stages connected" : "Pick an upstream output"} />
-                        </SelectTrigger>
-                        <SelectContent>
-                          {upstreamOptions.map((o) => (
-                            <SelectItem key={o.outputKey} value={o.outputKey} className="text-sm">
-                              {o.stageName} — {o.outputName}
-                            </SelectItem>
-                          ))}
-                        </SelectContent>
-                      </Select>
-                    )}
-
-                    <QtyRow
-                      qty={input.qtyPerBatch}
-                      uomId={input.uomId}
-                      uoms={uoms}
-                      readOnly={readOnly}
-                      onQtyChange={(qtyPerBatch) => updateInput(input.localId, { qtyPerBatch })}
-                      onUomChange={(uomId) => updateInput(input.localId, { uomId })}
-                    />
-                  </div>
-                </div>
-              ))}
-            </div>
-          </div>
-
-          {/* Outputs */}
-          <div>
-            <div className="mb-2 flex items-center justify-between">
-              <p className="text-sm font-semibold text-foreground">
-                Outputs{isTerminal && <span className="ml-1.5 font-normal text-muted-foreground">(terminal — finished good)</span>}
-              </p>
-              {!readOnly && (
-                <Button type="button" variant="ghost" size="sm" onClick={addOutput}>
-                  <Plus className="size-4" />
-                  Add
-                </Button>
-              )}
-            </div>
-            <div className="flex flex-col gap-2">
-              {data.outputs.length === 0 && <p className="text-sm text-muted-foreground">No outputs yet.</p>}
-              {data.outputs.map((output) => (
-                <div key={output.key} className="rounded-lg border border-border p-2.5">
-                  <div className="mb-2 flex items-center gap-2">
-                    {isTerminal ? (
-                      <Select<number> value={output.itemId} onValueChange={(v) => v && pickOutputItem(output, v)}>
-                        <SelectTrigger className="h-8! flex-1 text-sm" disabled={readOnly}>
-                          <SelectValue placeholder="Pick the finished-good item" />
-                        </SelectTrigger>
-                        <SelectContent>
-                          {items.map((i) => (
-                            <SelectItem key={i.itemId} value={i.itemId} className="text-sm">
-                              {i.name} · {i.sku}
-                            </SelectItem>
-                          ))}
-                        </SelectContent>
-                      </Select>
-                    ) : (
-                      <Input
-                        value={output.name}
-                        disabled={readOnly}
-                        onChange={(e) => updateOutput(output.key, { name: e.target.value })}
-                        placeholder="Output name (work in progress)"
-                        className="h-8 flex-1 text-sm"
-                      />
-                    )}
-                    {!readOnly && (
-                      <button type="button" onClick={() => removeOutput(output.key)} className="shrink-0 text-muted-foreground hover:text-destructive" aria-label="Remove output">
-                        <Trash2 className="size-4" />
-                      </button>
-                    )}
-                  </div>
-                  <QtyRow
-                    qty={output.qtyPerBatch}
-                    uomId={output.uomId}
-                    uoms={uoms}
-                    readOnly={readOnly}
-                    onQtyChange={(qtyPerBatch) => updateOutput(output.key, { qtyPerBatch })}
-                    onUomChange={(uomId) => updateOutput(output.key, { uomId })}
-                  />
-                </div>
-              ))}
-            </div>
-          </div>
-
-          {/* Custom fields */}
-          <div>
-            <div className="mb-2 flex items-center justify-between">
-              <p className="text-sm font-semibold text-foreground">Custom fields</p>
-              {!readOnly && (
-                <Button type="button" variant="ghost" size="sm" onClick={addField}>
-                  <Plus className="size-4" />
-                  Add
-                </Button>
-              )}
-            </div>
-            <div className="flex flex-col gap-2">
-              {data.fieldDefs.length === 0 && <p className="text-sm text-muted-foreground">No custom fields.</p>}
-              {data.fieldDefs.map((field) => (
-                <div key={field.localId} className="rounded-lg border border-border p-2.5">
-                  <div className="mb-2 flex items-center gap-2">
-                    <Input
-                      value={field.label}
-                      disabled={readOnly}
-                      onChange={(e) => updateField(field.localId, { label: e.target.value })}
-                      placeholder="Label"
-                      className="h-8 flex-1 text-sm"
-                    />
-                    {!readOnly && (
-                      <button type="button" onClick={() => removeField(field.localId)} className="shrink-0 text-muted-foreground hover:text-destructive" aria-label="Remove field">
-                        <Trash2 className="size-4" />
-                      </button>
-                    )}
-                  </div>
-                  {field.key && <p className="mb-2 font-mono text-xs text-muted-foreground">key: {field.key}</p>}
-                  <div className="flex items-center gap-2">
-                    <Select<CustomFieldType>
-                      value={field.type}
-                      onValueChange={(v) => v && updateField(field.localId, { type: v })}
-                    >
-                      <SelectTrigger className="h-8! flex-1 text-sm" disabled={readOnly}>
-                        <SelectValue />
-                      </SelectTrigger>
-                      <SelectContent>
-                        {FIELD_TYPES.map((t) => (
-                          <SelectItem key={t} value={t} className="text-sm">{t}</SelectItem>
+                        {items.map((i) => (
+                          <SelectItem key={i.itemId} value={i.itemId} className="text-sm">
+                            {i.name} · {i.sku}
+                          </SelectItem>
                        ))}
                      </SelectContent>
                    </Select>
-                    <div className="flex items-center gap-1.5">
-                      <Switch
-                        size="sm"
-                        checked={field.required}
-                        disabled={readOnly}
-                        onCheckedChange={(checked) => updateField(field.localId, { required: checked })}
-                      />
-                      <span className="text-xs text-muted-foreground">Required</span>
-                    </div>
-                  </div>
-                  {field.type === "Select" && (
+                  ) : (
+                    <Select<string>
+                      value={input.fromOutputKey}
+                      onValueChange={(v) => v && updateInput(input.localId, { fromOutputKey: v })}
+                    >
+                      <SelectTrigger className="h-8! w-full text-sm" disabled={readOnly || upstreamOptions.length === 0}>
+                        <SelectValue placeholder={upstreamOptions.length === 0 ? "No upstream stages connected" : "Pick an upstream output"} />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {upstreamOptions.map((o) => (
+                          <SelectItem key={o.outputKey} value={o.outputKey} className="text-sm">
+                            {o.stageName} — {o.outputName}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  )}
+
+                  <QtyRow
+                    qty={input.qtyPerBatch}
+                    uomId={input.uomId}
+                    uoms={uoms}
+                    readOnly={readOnly}
+                    onQtyChange={(qtyPerBatch) => updateInput(input.localId, { qtyPerBatch })}
+                    onUomChange={(uomId) => updateInput(input.localId, { uomId })}
+                  />
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* Outputs */}
+        <div>
+          <div className="mb-2 flex items-center justify-between">
+            <p className="text-sm font-semibold text-foreground">
+              Outputs{isTerminal && <span className="ml-1.5 font-normal text-muted-foreground">(terminal — finished good)</span>}
+            </p>
+            {!readOnly && (
+              <Button type="button" variant="ghost" size="sm" onClick={addOutput}>
+                <Plus className="size-4" />
+                Add
+              </Button>
+            )}
+          </div>
+          <div className="flex flex-col gap-2">
+            {data.outputs.length === 0 && <p className="text-sm text-muted-foreground">No outputs yet.</p>}
+            {data.outputs.map((output) => (
+              <div key={output.key} className="rounded-lg border border-border p-2.5">
+                <div className="mb-2 flex items-center gap-2">
+                  {isTerminal ? (
+                    <Select<number> value={output.itemId} onValueChange={(v) => v && pickOutputItem(output, v)}>
+                      <SelectTrigger className="h-8! flex-1 text-sm" disabled={readOnly}>
+                        <SelectValue placeholder="Pick the finished-good item" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {items.map((i) => (
+                          <SelectItem key={i.itemId} value={i.itemId} className="text-sm">
+                            {i.name} · {i.sku}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  ) : (
                    <Input
-                      value={field.options.join(", ")}
+                      value={output.name}
                      disabled={readOnly}
-                      onChange={(e) => updateField(field.localId, { options: e.target.value.split(",").map((s) => s.trim()).filter(Boolean) })}
-                      placeholder="Options, comma separated"
-                      className="mt-2 h-8 text-sm"
+                      onChange={(e) => updateOutput(output.key, { name: e.target.value })}
+                      placeholder="Output name (work in progress)"
+                      className="h-8 flex-1 text-sm"
                    />
                  )}
+                  {!readOnly && (
+                    <button type="button" onClick={() => removeOutput(output.key)} className="shrink-0 text-muted-foreground hover:text-destructive" aria-label="Remove output">
+                      <Trash2 className="size-4" />
+                    </button>
+                  )}
                </div>
-              ))}
-            </div>
+                <QtyRow
+                  qty={output.qtyPerBatch}
+                  uomId={output.uomId}
+                  uoms={uoms}
+                  readOnly={readOnly}
+                  onQtyChange={(qtyPerBatch) => updateOutput(output.key, { qtyPerBatch })}
+                  onUomChange={(uomId) => updateOutput(output.key, { uomId })}
+                />
+              </div>
+            ))}
          </div>
-
-          {!readOnly && (
-            <Button type="button" variant="outline" className={cn("mt-2 text-destructive hover:bg-destructive/10")} onClick={onDelete}>
-              <Trash2 className="size-4" />
-              Delete stage
-            </Button>
-          )}
        </div>
-      </DialogContent>
-    </Dialog>
+
+        {/* Custom fields */}
+        <div>
+          <div className="mb-2 flex items-center justify-between">
+            <p className="text-sm font-semibold text-foreground">Custom fields</p>
+            {!readOnly && (
+              <Button type="button" variant="ghost" size="sm" onClick={addField}>
+                <Plus className="size-4" />
+                Add
+              </Button>
+            )}
+          </div>
+          <div className="flex flex-col gap-2">
+            {data.fieldDefs.length === 0 && <p className="text-sm text-muted-foreground">No custom fields.</p>}
+            {data.fieldDefs.map((field) => (
+              <div key={field.localId} className="rounded-lg border border-border p-2.5">
+                <div className="mb-2 flex items-center gap-2">
+                  <Input
+                    value={field.label}
+                    disabled={readOnly}
+                    onChange={(e) => updateField(field.localId, { label: e.target.value })}
+                    placeholder="Label"
+                    className="h-8 flex-1 text-sm"
+                  />
+                  {!readOnly && (
+                    <button type="button" onClick={() => removeField(field.localId)} className="shrink-0 text-muted-foreground hover:text-destructive" aria-label="Remove field">
+                      <Trash2 className="size-4" />
+                    </button>
+                  )}
+                </div>
+                {field.key && <p className="mb-2 font-mono text-xs text-muted-foreground">key: {field.key}</p>}
+                <div className="flex items-center gap-2">
+                  <Select<CustomFieldType>
+                    value={field.type}
+                    onValueChange={(v) => v && updateField(field.localId, { type: v })}
+                  >
+                    <SelectTrigger className="h-8! flex-1 text-sm" disabled={readOnly}>
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {FIELD_TYPES.map((t) => (
+                        <SelectItem key={t} value={t} className="text-sm">{t}</SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                  <div className="flex items-center gap-1.5">
+                    <Switch
+                      size="sm"
+                      checked={field.required}
+                      disabled={readOnly}
+                      onCheckedChange={(checked) => updateField(field.localId, { required: checked })}
+                    />
+                    <span className="text-xs text-muted-foreground">Required</span>
+                  </div>
+                </div>
+                {field.type === "Select" && (
+                  <Input
+                    value={field.options.join(", ")}
+                    disabled={readOnly}
+                    onChange={(e) => updateField(field.localId, { options: e.target.value.split(",").map((s) => s.trim()).filter(Boolean) })}
+                    placeholder="Options, comma separated"
+                    className="mt-2 h-8 text-sm"
+                  />
+                )}
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {!readOnly && (
+          <Button type="button" variant="outline" className={cn("mt-2 text-destructive hover:bg-destructive/10")} onClick={onDelete}>
+            <Trash2 className="size-4" />
+            Delete stage
+          </Button>
+        )}
+      </div>
+    </div>
  )
 }
@@ -765,44 +765,46 @@ function TemplateBuilderContent() {
        </div>
      )}

-      <div className="min-h-0 flex-1 overflow-hidden rounded-2xl bg-muted ring-1 ring-foreground/10">
-        {mounted && (
-          <ReactFlow
-            nodes={displayNodes}
-            edges={edges}
-            nodeTypes={nodeTypes}
-            onNodesChange={locked ? undefined : onNodesChange}
-            onEdgesChange={locked ? undefined : onEdgesChange}
-            onNodesDelete={locked ? undefined : onNodesDelete}
-            onConnect={locked ? undefined : onConnect}
-            onNodeClick={onNodeClick}
-            onPaneClick={onPaneClick}
-            nodesDraggable={!locked}
-            nodesConnectable={!locked}
-            elementsSelectable
-            colorMode={resolvedTheme === "dark" ? "dark" : "light"}
-            fitView
-          >
-            <Background />
-            <Controls showInteractive={!locked} />
-            <MiniMap pannable zoomable />
-          </ReactFlow>
+      <div className="flex min-h-0 flex-1 gap-4">
+        <div className="min-w-0 flex-1 overflow-hidden rounded-2xl bg-muted ring-1 ring-foreground/10">
+          {mounted && (
+            <ReactFlow
+              nodes={displayNodes}
+              edges={edges}
+              nodeTypes={nodeTypes}
+              onNodesChange={locked ? undefined : onNodesChange}
+              onEdgesChange={locked ? undefined : onEdgesChange}
+              onNodesDelete={locked ? undefined : onNodesDelete}
+              onConnect={locked ? undefined : onConnect}
+              onNodeClick={onNodeClick}
+              onPaneClick={onPaneClick}
+              nodesDraggable={!locked}
+              nodesConnectable={!locked}
+              elementsSelectable
+              colorMode={resolvedTheme === "dark" ? "dark" : "light"}
+              fitView
+            >
+              <Background />
+              <Controls showInteractive={!locked} />
+              <MiniMap pannable zoomable />
+            </ReactFlow>
+          )}
+        </div>
+
+        {selectedNode && (
+          <StageEditorPanel
+            data={selectedNode.data as StageNodeData}
+            isTerminal={analysis.terminalIds.has(selectedNode.id)}
+            upstreamOptions={upstreamOptions}
+            items={items}
+            uoms={uoms}
+            readOnly={locked}
+            onChange={(patch) => updateNodeData(selectedNode.id, patch)}
+            onDelete={() => deleteNode(selectedNode.id)}
+            onClose={() => setSelectedNodeId(null)}
+          />
        )}
      </div>
-
-      {selectedNode && (
-        <StageEditorPanel
-          data={selectedNode.data as StageNodeData}
-          isTerminal={analysis.terminalIds.has(selectedNode.id)}
-          upstreamOptions={upstreamOptions}
-          items={items}
-          uoms={uoms}
-          readOnly={locked}
-          onChange={(patch) => updateNodeData(selectedNode.id, patch)}
-          onDelete={() => deleteNode(selectedNode.id)}
-          onClose={() => setSelectedNodeId(null)}
-        />
-      )}
    </div>
  )
 }
@@ -5,9 +5,8 @@ import Link from "next/link"
 import { ChevronLeft, ChevronRight, Eye, Pencil, Plus, Search, Trash2, Truck } from "lucide-react"

 import { vendorsApi } from "@/lib/api/vendors"
-import { errorMessage } from "@/lib/error-map"
+import { errorMessage, fieldErrors } from "@/lib/error-map"
 import { cn } from "@/lib/utils"
-import { generateVendorCode } from "@/lib/vendor-code"
 import { EntityStatus, PaginationMeta } from "@/types/common"
 import { Vendor } from "@/types/master-data"

@@ -45,6 +44,7 @@ export default function VendorsPage() {
  const [page, setPage] = useState(1)

  const [open, setOpen] = useState(false)
+  const [code, setCode] = useState("")
  const [name, setName] = useState("")
  const [terms, setTerms] = useState("")
  const [taxReg, setTaxReg] = useState("")
@@ -52,14 +52,8 @@ export default function VendorsPage() {
  const [errors, setErrors] = useState<Record<string, string>>({})
  const [submitting, setSubmitting] = useState(false)

-  // Separate from the paginated table list above — this needs every existing code (up to the
-  // server's page-size cap) to de-dupe against, not just the current page's 5 rows.
-  const [allVendorCodes, setAllVendorCodes] = useState<string[]>([])
-
  const [actionPendingId, setActionPendingId] = useState<number | null>(null)

-  const generatedCode = name.trim() ? generateVendorCode(name, allVendorCodes) : ""
-
  useEffect(() => {
    const timeout = setTimeout(() => setQuery(searchInput.trim()), 300)
    return () => clearTimeout(timeout)
@@ -81,11 +75,8 @@ export default function VendorsPage() {

  useEffect(load, [query, status, page])

-  useEffect(() => {
-    vendorsApi.list({ pageSize: 200 }).then((res) => setAllVendorCodes(res.items.map((v) => v.code))).catch(() => {})
-  }, [])
-
  function resetForm() {
+    setCode("")
    setName("")
    setTerms("")
    setTaxReg("")
@@ -95,6 +86,7 @@ export default function VendorsPage() {

  async function handleCreate() {
    const nextErrors: Record<string, string> = {}
+    if (!code.trim()) nextErrors.code = "Vendor code is required"
    if (!name.trim()) nextErrors.name = "Vendor name is required"
    if (!currency.trim()) nextErrors.currency = "Currency is required"
    setErrors(nextErrors)
@@ -102,15 +94,14 @@ export default function VendorsPage() {

    setSubmitting(true)
    try {
-      const result = await vendorsApi.create({ code: generatedCode, name, terms: terms || null, taxReg: taxReg || null, currency })
+      const result = await vendorsApi.create({ code, name, terms: terms || null, taxReg: taxReg || null, currency })
      toast.success("Vendor created", `${result.data.code} — ${result.data.name}`)
      setOpen(false)
      resetForm()
      load()
-      setAllVendorCodes((codes) => [...codes, result.data.code])
    } catch (err) {
-      // A 409 here means another creation raced ours for the same generated code — the
-      // proactive de-dupe above only knows about codes loaded when the dialog opened.
+      const fe = fieldErrors(err)
+      if (fe?.code) setErrors({ code: fe.code })
      toast.error("Could not create vendor", errorMessage(err))
    } finally {
      setSubmitting(false)
@@ -154,18 +145,19 @@ export default function VendorsPage() {
          <DialogContent className="sm:max-w-md">
            <DialogHeader className="items-center text-center">
              <DialogTitle>New vendor</DialogTitle>
-              <DialogDescription>Create a supplier record. Its code is generated from the name.</DialogDescription>
+              <DialogDescription>Create a supplier record.</DialogDescription>
            </DialogHeader>
            <FieldGroup>
+              <Field data-invalid={!!errors.code}>
+                <FieldLabel htmlFor="v-code">Code</FieldLabel>
+                <Input id="v-code" value={code} onChange={(e) => setCode(e.target.value)} placeholder="VN-005" aria-invalid={!!errors.code} />
+                <FieldError errors={[errors.code ? { message: errors.code } : undefined]} />
+              </Field>
              <Field data-invalid={!!errors.name}>
                <FieldLabel htmlFor="v-name">Name</FieldLabel>
                <Input id="v-name" value={name} onChange={(e) => setName(e.target.value)} placeholder="Lanka Steel Traders (Pvt) Ltd" aria-invalid={!!errors.name} />
                <FieldError errors={[errors.name ? { message: errors.name } : undefined]} />
              </Field>
-              <Field>
-                <FieldLabel htmlFor="v-code">Code (auto-generated)</FieldLabel>
-                <Input id="v-code" value={generatedCode} readOnly disabled placeholder="Enter a name to generate a code" className="text-muted-foreground" />
-              </Field>
              <Field>
                <FieldLabel htmlFor="v-terms">Payment terms (optional)</FieldLabel>
                <Input id="v-terms" value={terms} onChange={(e) => setTerms(e.target.value)} placeholder="NET30" />
@@ -37,11 +37,6 @@ import {
  ReceivedFromType,
  CreateReceivedChequeRequest,
  UpdateReceivedChequeStatusRequest,
-  CHEQUE_BOOK_STATUS_BY_CODE,
-  CHEQUE_PAGE_ISSUE_STATUS_BY_CODE,
-  PAYEE_TYPE_BY_CODE,
-  RECEIVED_FROM_TYPE_BY_CODE,
-  RECEIVED_CHEQUE_STATUS_BY_CODE,
 } from "@/types/general-ledger"

 const GL_BASE = "/api/v1/gl"
@@ -262,100 +257,50 @@ export const cashAccountTypesApi = {
 * routes, not a numeric id. No `list()`/`get()` for pages standalone — a book's pages are always
 * read via `get(chequeBookNo, true)`'s `pages[]`, which is the only place this frontend needs them.
 */
-// GL sends `ChequeBook.status`/`ChequePage.issueStatus`/`ChequePage.payeeType`/
-// `ReceivedCheque.receivedFromType`/`ReceivedCheque.status` as raw integers, not their string
-// name (06_Enums_Reference.md — no global JsonStringEnumConverter on GL's side; see the long
-// comment above the `*_BY_CODE` maps in types/general-ledger.ts for why). These `Raw*` shapes
-// describe exactly what GL's JSON actually contains for those fields; the `map*` functions below
-// translate them into this frontend's normal string-enum `ChequeBook`/`ChequePage`/`ReceivedCheque`
-// types immediately after each call returns, so every other file in this app can keep comparing
-// against `ChequeBookStatus.Active` etc. exactly as before.
-type RawChequePage = Omit<ChequePage, "issueStatus" | "payeeType"> & {
-  issueStatus: number
-  payeeType: number | null
-}
-type RawChequeBook = Omit<ChequeBook, "status" | "pages"> & {
-  status: number
-  pages: RawChequePage[]
-}
-type RawReceivedCheque = Omit<ReceivedCheque, "receivedFromType" | "status"> & {
-  receivedFromType: number
-  status: number
-}
-
-function mapChequePage(raw: RawChequePage): ChequePage {
-  return {
-    ...raw,
-    issueStatus: CHEQUE_PAGE_ISSUE_STATUS_BY_CODE[raw.issueStatus],
-    payeeType: raw.payeeType == null ? null : PAYEE_TYPE_BY_CODE[raw.payeeType],
-  }
-}
-
-function mapChequeBook(raw: RawChequeBook): ChequeBook {
-  return {
-    ...raw,
-    status: CHEQUE_BOOK_STATUS_BY_CODE[raw.status],
-    pages: (raw.pages ?? []).map(mapChequePage),
-  }
-}
-
-function mapReceivedCheque(raw: RawReceivedCheque): ReceivedCheque {
-  return {
-    ...raw,
-    receivedFromType: RECEIVED_FROM_TYPE_BY_CODE[raw.receivedFromType],
-    status: RECEIVED_CHEQUE_STATUS_BY_CODE[raw.status],
-  }
-}
-
 export const chequeBooksApi = {
-  async list(params?: {
+  list(params?: {
    bankAccountId?: number
    branchId?: number
    status?: ChequeBookStatus
    page?: number
    pageSize?: number
  }): Promise<GlPagedResult<ChequeBook>> {
-    const res = await glRequest<GlPagedResult<RawChequeBook>>("/cheque-books", { query: { ...params } })
-    return { ...res, items: res.items.map(mapChequeBook) }
+    return glRequest<GlPagedResult<ChequeBook>>("/cheque-books", { query: { ...params } })
  },

  /** `expandPages` maps to GL's `?expand=pages` — omit it for just the book's own fields. */
-  async get(chequeBookNo: string, expandPages = false): Promise<ChequeBook> {
-    const res = await glRequest<RawChequeBook>(`/cheque-books/${encodeURIComponent(chequeBookNo)}`, {
+  get(chequeBookNo: string, expandPages = false): Promise<ChequeBook> {
+    return glRequest<ChequeBook>(`/cheque-books/${encodeURIComponent(chequeBookNo)}`, {
      query: expandPages ? { expand: "pages" } : undefined,
    })
-    return mapChequeBook(res)
  },

  /** Auto-generates every leaf (`totalLeaves` `ChequePage` rows, all `Unused`) in the same call — the response's `pages[]` already has them. */
-  async create(request: CreateChequeBookRequest): Promise<ChequeBook> {
-    const res = await glRequest<RawChequeBook>("/cheque-books", { method: "POST", body: request })
-    return mapChequeBook(res)
+  create(request: CreateChequeBookRequest): Promise<ChequeBook> {
+    return glRequest<ChequeBook>("/cheque-books", { method: "POST", body: request })
  },
 }

 export const chequePagesApi = {
-  async issue(chequeNo: string, request: IssueChequePageRequest): Promise<ChequePage> {
-    const res = await glRequest<RawChequePage>(`/cheque-pages/${encodeURIComponent(chequeNo)}/issue`, {
+  issue(chequeNo: string, request: IssueChequePageRequest): Promise<ChequePage> {
+    return glRequest<ChequePage>(`/cheque-pages/${encodeURIComponent(chequeNo)}/issue`, {
      method: "PUT",
      body: request,
    })
-    return mapChequePage(res)
  },

  /** `Clear`/`Bounce`/`Cancel`/`Void` — only valid from certain `issueStatus` values, see `types/general-ledger.ts`'s `ChequePageStatusAction`. */
-  async updateStatus(chequeNo: string, request: UpdateChequePageStatusRequest): Promise<ChequePage> {
-    const res = await glRequest<RawChequePage>(`/cheque-pages/${encodeURIComponent(chequeNo)}/status`, {
+  updateStatus(chequeNo: string, request: UpdateChequePageStatusRequest): Promise<ChequePage> {
+    return glRequest<ChequePage>(`/cheque-pages/${encodeURIComponent(chequeNo)}/status`, {
      method: "PUT",
      body: request,
    })
-    return mapChequePage(res)
  },
 }

 /** Received Cheques — cheques received from customers/suppliers/others, deliberately unlinked to any `ChequeBook`. */
 export const receivedChequesApi = {
-  async list(params?: {
+  list(params?: {
    companyId?: number
    branchId?: number
    status?: ReceivedChequeStatus
@@ -363,18 +308,15 @@ export const receivedChequesApi = {
    page?: number
    pageSize?: number
  }): Promise<GlPagedResult<ReceivedCheque>> {
-    const res = await glRequest<GlPagedResult<RawReceivedCheque>>("/received-cheques", { query: { ...params } })
-    return { ...res, items: res.items.map(mapReceivedCheque) }
+    return glRequest<GlPagedResult<ReceivedCheque>>("/received-cheques", { query: { ...params } })
  },

-  async create(request: CreateReceivedChequeRequest): Promise<ReceivedCheque> {
-    const res = await glRequest<RawReceivedCheque>("/received-cheques", { method: "POST", body: request })
-    return mapReceivedCheque(res)
+  create(request: CreateReceivedChequeRequest): Promise<ReceivedCheque> {
+    return glRequest<ReceivedCheque>("/received-cheques", { method: "POST", body: request })
  },

  /** `Deposit`/`Clear`/`Return`/`Cancel` — only valid from certain statuses, see `types/general-ledger.ts`'s `ReceivedChequeStatusAction`. */
-  async updateStatus(id: number, request: UpdateReceivedChequeStatusRequest): Promise<ReceivedCheque> {
-    const res = await glRequest<RawReceivedCheque>(`/received-cheques/${id}/status`, { method: "PUT", body: request })
-    return mapReceivedCheque(res)
+  updateStatus(id: number, request: UpdateReceivedChequeStatusRequest): Promise<ReceivedCheque> {
+    return glRequest<ReceivedCheque>(`/received-cheques/${id}/status`, { method: "PUT", body: request })
  },
 }
@@ -1,18 +0,0 @@
-/** First word of the name, uppercased and stripped to alphanumerics — falls back to "VN"
- * so an empty/punctuation-only name still yields a usable base. Mirrors the warehouse
- * code generator (app/dashboard/warehouse/page.tsx). */
-function vendorCodeBase(name: string): string {
-  const firstWord = name.trim().split(/\s+/)[0] ?? ""
-  const cleaned = firstWord.toUpperCase().replace(/[^A-Z0-9]/g, "")
-  return cleaned.slice(0, 10) || "VN"
-}
-
-/** Appends a numeric suffix until the code doesn't collide with an existing one — the
- * backend enforces global uniqueness (409 on conflict) but has no generation of its own. */
-export function generateVendorCode(name: string, existingCodes: string[]): string {
-  const base = `VN-${vendorCodeBase(name)}`
-  if (!existingCodes.includes(base)) return base
-  let suffix = 2
-  while (existingCodes.includes(`${base}${suffix}`)) suffix += 1
-  return `${base}${suffix}`
-}
@@ -410,59 +410,6 @@ export enum ReceivedChequeStatusAction {
  Cancel = "Cancel",
 }

-/**
- * Confirmed (`06_Enums_Reference.md`, user-supplied) — GL has **no global `JsonStringEnumConverter`**
- * registered. That's documented there as a request-body binding gotcha (a JSON-body enum field must
- * be sent as its string name, parsed server-side via `Enum.TryParse`), but the same missing converter
- * also governs the other direction: every one of these five fields is a real enum-typed property on
- * GL's own response DTO (backed by an `integer` DB column, per that doc's "Persisted enums" table),
- * so with no converter registered, GL's JSON response serializes each one as its **raw integer**
- * (`1`/`2`/`3`/...), not the name — confirmed live by the user ("most status has integer numbers").
- * Request bodies/query-string filters are unaffected and still take the string name as before (a
- * JSON-body enum field is independently declared `string` server-side, and query-string enum
- * binding parses names natively) — only inbound response values need translating. These maps do
- * that translation, keyed by the exact integer values `06_Enums_Reference.md` documents; applied in
- * `lib/api/general-ledger.ts` immediately after each GL call returns, so every consumer of
- * `ChequeBook`/`ChequePage`/`ReceivedCheque` in this frontend keeps working with the same string
- * enum values as before and never has to know GL sent a number.
- */
-export const CHEQUE_BOOK_STATUS_BY_CODE: Record<number, ChequeBookStatus> = {
-  1: ChequeBookStatus.Active,
-  2: ChequeBookStatus.Completed,
-  3: ChequeBookStatus.Cancelled,
-}
-
-export const CHEQUE_PAGE_ISSUE_STATUS_BY_CODE: Record<number, ChequePageIssueStatus> = {
-  1: ChequePageIssueStatus.Unused,
-  2: ChequePageIssueStatus.Issued,
-  3: ChequePageIssueStatus.Cleared,
-  4: ChequePageIssueStatus.Bounced,
-  5: ChequePageIssueStatus.Cancelled,
-  6: ChequePageIssueStatus.Void,
-}
-
-/** `ChequePage.payeeType` is nullable — only set once a page is issued (`06_Enums_Reference.md`). */
-export const PAYEE_TYPE_BY_CODE: Record<number, PayeeType> = {
-  1: PayeeType.Supplier,
-  2: PayeeType.Customer,
-  3: PayeeType.Employee,
-  4: PayeeType.Other,
-}
-
-export const RECEIVED_FROM_TYPE_BY_CODE: Record<number, ReceivedFromType> = {
-  1: ReceivedFromType.Customer,
-  2: ReceivedFromType.Supplier,
-  3: ReceivedFromType.Other,
-}
-
-export const RECEIVED_CHEQUE_STATUS_BY_CODE: Record<number, ReceivedChequeStatus> = {
-  1: ReceivedChequeStatus.Received,
-  2: ReceivedChequeStatus.Deposited,
-  3: ReceivedChequeStatus.Cleared,
-  4: ReceivedChequeStatus.Returned,
-  5: ReceivedChequeStatus.Cancelled,
-}
-
 /**
 * A single leaf of a Cheque Book. GL's own reference confirms every field named in the `issue`
 * request body plus `issueStatus`/`printedAt`/`clearedDate`/`clearedByBank`/`cancelReason` in
@@ -520,7 +520,6 @@ that role sees the sidebar entries — normal onboarding, not a bug.
  spread across the available width instead of stretching a single narrow column. Modals
  (`ChequePageDialog`/`ReceivedChequeDialog`) were deliberately left at their existing fixed width —
  a dialog is supposed to stay narrow, this complaint was about full-page create forms only.
- [x] **Cheque Management status/type fields were displaying raw integers, not names (2026-08-05, user-reported + confirmed live) — fixed by mapping GL's response integers to this frontend's string enums at the API boundary.** User supplied GL's own `06_Enums_Reference.md`: GL has no global `JsonStringEnumConverter`, so while a JSON-**body** enum field is independently declared `string` server-side (and a query-string enum filter binds natively by name — both already correct here, unaffected), a real enum-typed **response** DTO property serializes as its raw underlying integer with no converter to turn it back into a name. `ChequeBook.status`, `ChequePage.issueStatus`, `ChequePage.payeeType`, `ReceivedCheque.receivedFromType`, and `ReceivedCheque.status` are exactly that — genuine DB-backed enum properties on GL's response DTOs — so every one of them was arriving as `1`/`2`/`3`/... instead of `"Active"`/`"Issued"`/`"Supplier"`, silently breaking every `===` comparison this frontend does against its own string enums (list badges, the create-form's own `<Select>` values, and both dialogs' status-based available-actions logic), not just the visible label. Added five `*_BY_CODE` lookup maps to `types/general-ledger.ts` (`CHEQUE_BOOK_STATUS_BY_CODE`/`CHEQUE_PAGE_ISSUE_STATUS_BY_CODE`/`PAYEE_TYPE_BY_CODE`/`RECEIVED_FROM_TYPE_BY_CODE`/`RECEIVED_CHEQUE_STATUS_BY_CODE`), keyed by the exact integer values `06_Enums_Reference.md` documents. Applied them in `lib/api/general-ledger.ts` via new `Raw*` types (describing what GL's JSON for these fields actually is: `number`/`number | null`) and `mapChequeBook`/`mapChequePage`/`mapReceivedCheque` helpers, wired into every `chequeBooksApi`/`chequePagesApi`/`receivedChequesApi` method that returns one of these shapes — the translation happens once, at the API boundary, so every existing page/dialog/badge map keeps comparing against the same string enum values as before and needed zero changes itself. Checked every other enum in `06_Enums_Reference.md`'s "Persisted enums" table (`JournalEntryStatus`/`PeriodStatus`/`TaxCalculationBasis`/`TaxAppliesTo`/`DepreciationMethod`/`FixedAssetStatus`/`AuditCategory`/`AuditAction`) against this frontend — none are consumed anywhere (no Journal Entry/Fiscal Period/Tax Code/Fixed Asset/Audit Log UI exists here), so Cheque Management is the complete fix, not a partial one. Verified: `tsc --noEmit`/`eslint` clean on both touched files.
 - [ ] **Not done — internal ERPCore→GL wiring.** Unrelated to this revision, still deferred
  (`docs/12` §6).
 - [ ] **Deferred — bank/cash account edit.** Needs GL service changes first (§4); now needs them for