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
33 changed files with 818 additions and 1411 deletions
@@ -33,11 +33,10 @@ public sealed class BundleSalesController : ApiControllerBase
    [ProducesResponseType(typeof(PagedResponse<BundleSaleSummaryDto>), StatusCodes.Status200OK)]
    public async Task<ActionResult<PagedResponse<BundleSaleSummaryDto>>> List(
        [FromQuery] PageQuery query,
-        [FromQuery] BundleSaleStatus? status,
        [FromQuery] int? customerId,
        [FromQuery] int? warehouseId,
        CancellationToken ct)
-        => Ok(await _bundles.ListAsync(query, status, customerId, warehouseId, ct));
+        => Ok(await _bundles.ListAsync(query, customerId, warehouseId, ct));

    [HttpGet("{bundleSaleId:int}")]
    [ProducesResponseType(typeof(BundleSaleDto), StatusCodes.Status200OK)]
@@ -23,7 +23,6 @@ public sealed class BundleSaleService : IBundleSaleService
    private readonly IRepository<Warehouse> _warehouses;
    private readonly IRepository<User> _users;
    private readonly ISalesDomainService _sales;
-    private readonly IUomConverter _uomConverter;
    private readonly ISalesPostingService _posting;
    private readonly ICurrentUser _currentUser;
    private readonly INumberSequenceService _numbers;
@@ -38,7 +37,6 @@ public sealed class BundleSaleService : IBundleSaleService
        IRepository<Warehouse> warehouses,
        IRepository<User> users,
        ISalesDomainService sales,
-        IUomConverter uomConverter,
        ISalesPostingService posting,
        ICurrentUser currentUser,
        INumberSequenceService numbers,
@@ -52,7 +50,6 @@ public sealed class BundleSaleService : IBundleSaleService
        _warehouses = warehouses;
        _users = users;
        _sales = sales;
-        _uomConverter = uomConverter;
        _posting = posting;
        _currentUser = currentUser;
        _numbers = numbers;
@@ -88,7 +85,7 @@ public sealed class BundleSaleService : IBundleSaleService
                x.BundleSaleTemplateLineId, x.ItemId, x.UomId, x.WarehouseId, x.Qty, x.UnitPrice, x.IncludeInBundle, x.SortOrder)).ToList());
    }

-    public async Task<PagedResponse<BundleSaleSummaryDto>> ListAsync(PageQuery query, BundleSaleStatus? status, int? customerId, int? warehouseId, CancellationToken ct = default)
+    public async Task<PagedResponse<BundleSaleSummaryDto>> ListAsync(PageQuery query, int? customerId, int? warehouseId, CancellationToken ct = default)
    {
        IQueryable<BundleSale> q = _bundles.Query().AsNoTracking().Include(x => x.Lines);
        if (!string.IsNullOrWhiteSpace(query.Q))
@@ -96,7 +93,6 @@ public sealed class BundleSaleService : IBundleSaleService
            var term = query.Q.Trim();
            q = q.Where(x => EF.Functions.ILike(x.BundleNo, $"%{term}%") || EF.Functions.ILike(x.BundleName, $"%{term}%") || EF.Functions.ILike(x.BundleCode, $"%{term}%"));
        }
-        if (status is not null) q = q.Where(x => x.Status == status);
        if (customerId is not null) q = q.Where(x => x.CustomerId == customerId);
        if (warehouseId is not null) q = q.Where(x => x.WarehouseId == warehouseId);
        var total = await q.CountAsync(ct);
@@ -208,23 +204,21 @@ public sealed class BundleSaleService : IBundleSaleService
        {
            if (r.Qty <= 0)
                throw new DomainException(ErrorCodes.Validation, "Bundle line quantity must be greater than zero.", 422);
-
-            // Bundle sales use the header warehouse as the source of truth for stock and pricing.
-            // Keep any per-line warehouse input from drifting away from the header.
-            var lineWarehouseId = warehouseId;
-
+            if (r.WarehouseId != warehouseId)
+                throw new DomainException(ErrorCodes.Validation,
+                    $"Bundle line warehouse {r.WarehouseId} must match header warehouse {warehouseId}.", 422);
            var item = await _items.Query().AsNoTracking().FirstAsync(x => x.ItemId == r.ItemId, ct);
-            await _sales.ValidateSalesLineAsync(warehouseId, r.ItemId, r.UomId, lineWarehouseId, r.Qty, 0m, null, ct);
-            var (qtyBase, unitCostBase) = await _uomConverter.ToBaseAsync(item, r.UomId, r.Qty, r.UnitPrice, ct);
-            var calc = _sales.ComputeLine(qtyBase, 0m, unitCostBase, SalesDiscountMode.Amount, 0m, 0m, 0m, 0m, false);
+            await _sales.ValidateSalesLineAsync(warehouseId, r.ItemId, r.UomId, r.WarehouseId, r.Qty, 0m, null, ct);
+            var resolved = await _sales.ResolveLinePriceAsync(r.ItemId, r.WarehouseId, r.UnitPrice, true, ct);
+            var calc = _sales.ComputeLine(r.Qty, 0m, resolved.UnitPrice, SalesDiscountMode.Amount, 0m, 0m, 0m, 0m, false);
            lines.Add(new BundleSaleLine
            {
                ItemId = r.ItemId,
                Description = item.Name,
-                Qty = qtyBase,
-                UomId = item.BaseUomId,
-                WarehouseId = lineWarehouseId,
-                UnitPrice = unitCostBase,
+                Qty = r.Qty,
+                UomId = r.UomId,
+                WarehouseId = r.WarehouseId,
+                UnitPrice = resolved.UnitPrice,
                LineTotal = calc.LineTotal,
                IncludeInBundle = r.IncludeInBundle,
                IsComponent = true,
@@ -20,7 +20,6 @@ public sealed class SalesPostingService : ISalesPostingService
    private readonly IRepository<Item> _items;
    private readonly IFifoCostingService _fifo;
    private readonly ISalesDomainService _sales;
-    private readonly IUomConverter _uomConverter;
    private readonly ICurrentUser _currentUser;
    private readonly IUnitOfWork _uow;

@@ -31,7 +30,6 @@ public sealed class SalesPostingService : ISalesPostingService
        IRepository<Item> items,
        IFifoCostingService fifo,
        ISalesDomainService sales,
-        IUomConverter uomConverter,
        ICurrentUser currentUser,
        IUnitOfWork uow)
    {
@@ -41,7 +39,6 @@ public sealed class SalesPostingService : ISalesPostingService
        _items = items;
        _fifo = fifo;
        _sales = sales;
-        _uomConverter = uomConverter;
        _currentUser = currentUser;
        _uow = uow;
    }
@@ -122,14 +119,15 @@ public sealed class SalesPostingService : ISalesPostingService
        {
            if (!await _sales.IsStockedItemAsync(line.ItemId, ct))
                continue;
-
-            var item = await _items.Query().AsNoTracking()
-                .FirstAsync(x => x.ItemId == line.ItemId, ct);
            var available = await _fifo.GetOnHandAsync(line.ItemId, line.WarehouseId, ct);
            if (available >= line.Qty) continue;

-            issues.Add(new BundleSalePostingIssueDto(
-                line.BundleSaleLineId, line.ItemId, item.Sku, item.Name, line.WarehouseId, line.Qty, available, line.Qty - available));
+            var item = await _items.Query().AsNoTracking()
+                .Where(x => x.ItemId == line.ItemId)
+                .Select(x => new { x.Sku, x.Name })
+                .FirstAsync(ct);
+
+            issues.Add(new BundleSalePostingIssueDto(line.BundleSaleLineId, line.ItemId, item.Sku, item.Name, line.WarehouseId, line.Qty, available, line.Qty - available));
        }

        return new BundleSalePostingCheckDto(bundle.BundleSaleId, bundle.BundleNo, bundle.Status, issues.Count == 0, issues);
@@ -141,10 +139,10 @@ public sealed class SalesPostingService : ISalesPostingService
            notFoundMessage: $"Sales invoice {salesInvoiceId} was not found.",
            statusSelector: x => x.Status,
            ensureDraftMessage: x => $"Sales invoice {x.SalesInvoiceId} is {x.Status} and cannot be posted.",
-            getLines: x => x.Lines.Select(l => new PostingLine(l.ItemId, l.WarehouseId, l.UomId, l.Qty + l.FreeQty, l.Qty, l.FreeQty)),
+            getLines: x => x.Lines.Select(l => new PostingLine(l.ItemId, l.WarehouseId, l.Qty + l.FreeQty, l.Qty, l.FreeQty)),
            setPosted: x => x.Status = SalesInvoiceStatus.Posted,
            setUpdated: x => x.UpdatedAt = DateTime.UtcNow,
-            sourceDocType: DocumentTypes.SalesInvoice,
+            sourceDocType: nameof(SalesInvoice),
            getDocId: x => x.SalesInvoiceId,
            ct: ct);

@@ -154,10 +152,10 @@ public sealed class SalesPostingService : ISalesPostingService
            notFoundMessage: $"Sales slip {salesSlipId} was not found.",
            statusSelector: x => x.Status,
            ensureDraftMessage: x => $"Sales slip {x.SalesSlipId} is {x.Status} and cannot be posted.",
-            getLines: x => x.Lines.Select(l => new PostingLine(l.ItemId, l.WarehouseId, l.UomId, l.Qty + l.FreeQty, l.Qty, l.FreeQty)),
+            getLines: x => x.Lines.Select(l => new PostingLine(l.ItemId, l.WarehouseId, l.Qty + l.FreeQty, l.Qty, l.FreeQty)),
            setPosted: x => x.Status = SalesSlipStatus.Posted,
            setUpdated: x => x.UpdatedAt = DateTime.UtcNow,
-            sourceDocType: DocumentTypes.SalesSlip,
+            sourceDocType: nameof(SalesSlip),
            getDocId: x => x.SalesSlipId,
            ct: ct);

@@ -167,12 +165,10 @@ public sealed class SalesPostingService : ISalesPostingService
            notFoundMessage: $"Bundle sale {bundleSaleId} was not found.",
            statusSelector: x => x.Status,
            ensureDraftMessage: x => $"Bundle sale {x.BundleSaleId} is {x.Status} and cannot be posted.",
-            // Bundle lines are normalized to base UOM on save, so posting should consume the
-            // stored base quantity directly instead of converting again.
-            getLines: x => x.Lines.Where(l => l.IncludeInBundle).Select(l => new PostingLine(l.ItemId, l.WarehouseId, l.UomId, l.Qty, l.Qty, 0m)),
+            getLines: x => x.Lines.Where(l => l.IncludeInBundle).Select(l => new PostingLine(l.ItemId, l.WarehouseId, l.Qty, l.Qty, 0m)),
            setPosted: x => x.Status = BundleSaleStatus.Posted,
            setUpdated: x => x.UpdatedAt = DateTime.UtcNow,
-            sourceDocType: DocumentTypes.BundleSale,
+            sourceDocType: nameof(BundleSale),
            getDocId: x => x.BundleSaleId,
            ct: ct);

@@ -214,5 +210,5 @@ public sealed class SalesPostingService : ISalesPostingService
        }, ct);
    }

-    private sealed record PostingLine(int ItemId, int WarehouseId, int UomId, decimal Qty, decimal PaidQty, decimal FreeQty);
+    private sealed record PostingLine(int ItemId, int WarehouseId, decimal Qty, decimal PaidQty, decimal FreeQty);
 }
@@ -9,6 +9,8 @@ namespace ERPCore.Services;

 public sealed class SalesPromotionSuggestionService : ISalesPromotionSuggestionService
 {
+    private const decimal FreeIssueThreshold = 10m;
+
    private readonly IRepository<SalesSlip> _slips;
    private readonly IRepository<Item> _items;

@@ -25,14 +27,7 @@ public sealed class SalesPromotionSuggestionService : ISalesPromotionSuggestionS

        if (slip is null) return null;

-        var freeIssueLines = slip.Lines
-            .Where(x => x.IsFreeIssue || x.FreeQty > 0m)
-            .ToList();
-
-        if (freeIssueLines.Count == 0)
-            return new SalesFreeIssueSuggestionDto(slip.SalesSlipId, slip.SlipNo, slip.SlipDate, Array.Empty<SalesFreeIssueSuggestionLineDto>());
-
-        var itemIds = freeIssueLines.Select(x => x.ItemId).Distinct().ToList();
+        var itemIds = slip.Lines.Select(x => x.ItemId).Distinct().ToList();
        var candidateItems = await _items.Query().AsNoTracking()
            .Where(x => itemIds.Contains(x.ItemId) && x.Status == EntityStatus.Active)
            .ToListAsync(ct);
@@ -40,10 +35,13 @@ public sealed class SalesPromotionSuggestionService : ISalesPromotionSuggestionS
        var byItemId = candidateItems.ToDictionary(x => x.ItemId);
        var suggestions = new List<SalesFreeIssueSuggestionLineDto>();

-        foreach (var line in freeIssueLines)
+        foreach (var line in slip.Lines.Where(x => x.Qty >= FreeIssueThreshold))
        {
            if (!byItemId.TryGetValue(line.ItemId, out var item)) continue;

+            var freeQty = Math.Floor(line.Qty / FreeIssueThreshold);
+            if (freeQty <= 0m) continue;
+
            var rewardOptions = new List<SalesFreeIssueRewardOptionDto>
            {
                new(item.ItemId, item.Sku, item.Name, item.SalePrice)
@@ -64,8 +62,8 @@ public sealed class SalesPromotionSuggestionService : ISalesPromotionSuggestionS
                item.Sku,
                item.Name,
                line.Qty,
-                line.FreeQty,
-                line.Qty,
+                freeQty,
+                FreeIssueThreshold,
                rewardOptions));
        }

@@ -73,4 +71,4 @@ public sealed class SalesPromotionSuggestionService : ISalesPromotionSuggestionS
            ? new SalesFreeIssueSuggestionDto(slip.SalesSlipId, slip.SlipNo, slip.SlipDate, Array.Empty<SalesFreeIssueSuggestionLineDto>())
            : new SalesFreeIssueSuggestionDto(slip.SalesSlipId, slip.SlipNo, slip.SlipDate, suggestions);
    }
-}
+}
@@ -6,7 +6,7 @@
    }
  },
  "ConnectionStrings": {
-    "DefaultConnection": "Host=187.127.102.190;Port=5432;Database=ERPCoreTest;Username=postgres;Password=post@hexdive"
+    "DefaultConnection": "Host=localhost;Port=5432;Database=ERPCoreTest;Username=postgres;Password=root"
  },
  "AuthHex": {
    "BaseUrl": "http://localhost:5011"
@@ -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,10 +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 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 submit purchase order", errorMessage(err))
    } finally {
      setSubmitting(false)
    }
@@ -282,9 +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="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"
@@ -52,10 +43,10 @@ function newKey() {
  return `poline-${keySeq}`
 }

-// Tax is still not entered at PO creation — it's captured at GRN receipt (with discount/VAT
-// there) and stays off this form, though it remains on the payload since the backend line
-// DTO still requires it. Unit price *is* entered here; a PO prefilled from an RFQ starts
-// from its negotiated price (below) but stays editable.
+// Unit price and tax are no longer entered at PO creation — pricing is captured at GRN
+// receipt (with discount/VAT there). They default to 0 here and stay off the form, but
+// remain on the payload because the backend line DTO still requires them; a PO prefilled
+// from an RFQ keeps its negotiated price (below).
 function emptyLine(): DraftLine {
  return { key: newKey(), itemId: null, uomId: null, warehouseId: null, qty: "", unitPrice: "0", tax: "0" }
 }
@@ -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-1">
-              <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,34 +287,21 @@ 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 && (
              <div className="overflow-x-auto">
-                <Table className="table-fixed text-base">
+                <Table className="text-base">
                  <TableHeader>
                    <TableRow>
-                      <TableHead className="h-12 w-32 px-3 text-sm">Item</TableHead>
-                      <TableHead className="h-12 w-16 px-3 text-sm">UOM</TableHead>
-                      <TableHead className="h-12 w-20 px-3 text-sm">Warehouse</TableHead>
+                      <TableHead className="h-12 w-56 px-3 text-sm">Item</TableHead>
+                      <TableHead className="h-12 w-28 px-3 text-sm">UOM</TableHead>
+                      <TableHead className="h-12 w-40 px-3 text-sm">Warehouse</TableHead>
                      <TableHead className="h-12 w-24 px-3 text-sm">Qty</TableHead>
-                      <TableHead className="h-12 w-28 px-3 text-sm">Unit price</TableHead>
                      <TableHead className="h-12 w-10 px-3" />
                    </TableRow>
                  </TableHeader>
@@ -425,15 +313,11 @@ function NewPurchaseOrderContent() {
                        <TableRow key={line.key}>
                          <TableCell className="px-3 py-3 align-top">
                            {requisitionId || rfqId ? (
-                              <div className="flex h-11 items-center truncate text-base" title={item ? `${item.sku} — ${item.name}` : undefined}>{item ? `${item.sku} — ${item.name}` : `Item #${line.itemId}`}</div>
+                              <div className="flex h-11 items-center text-base">{item ? `${item.sku} — ${item.name}` : `Item #${line.itemId}`}</div>
                            ) : (
                              <>
                                <Select<number | null> value={line.itemId} onValueChange={(v) => updateLine(line.key, { itemId: v })}>
-                                  <SelectTrigger
-                                    className="h-11! w-full text-base"
-                                    aria-invalid={!!errors.itemId}
-                                    title={item ? `${item.sku} — ${item.name}` : undefined}
-                                  >
+                                  <SelectTrigger className="h-11! w-full text-base" aria-invalid={!!errors.itemId}>
                                    <SelectValue placeholder="Select item" />
                                  </SelectTrigger>
                                  <SelectContent>
@@ -490,18 +374,6 @@ function NewPurchaseOrderContent() {
                            />
                            <FieldError errors={[errors.qty ? { message: errors.qty } : undefined]} />
                          </TableCell>
-                          <TableCell className="px-3 py-3 align-top">
-                            <Input
-                              type="number"
-                              min="0"
-                              step="any"
-                              value={line.unitPrice}
-                              aria-invalid={!!errors.unitPrice}
-                              onChange={(e) => updateLine(line.key, { unitPrice: e.target.value })}
-                              className="h-11 text-base"
-                            />
-                            <FieldError errors={[errors.unitPrice ? { message: errors.unitPrice } : undefined]} />
-                          </TableCell>
                          <TableCell className="px-3 py-3 align-top">
                            <Button type="button" variant="ghost" size="icon" onClick={() => removeLine(line.key)} aria-label="Remove line">
                              <Trash2 className="size-5" />
@@ -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>
  )
 }
@@ -188,7 +188,7 @@ export default function ItemDetailPage() {
              <h1 className="text-2xl font-bold text-foreground">{item.sku}</h1>
              <Badge
                variant="outline"
-                className={cn("h-6 w-fit justify-center border-transparent px-2.5 text-sm", item.status === "Active" ? "bg-success/10 text-success" : "bg-destructive/10 text-destructive")}
+                className={cn("h-6 w-fit justify-center border-transparent px-2.5 text-sm", item.status === "Active" ? "bg-success/10 text-success" : "bg-muted text-muted-foreground")}
              >
                {item.status}
              </Badge>
@@ -257,15 +257,7 @@ export default function BrandsPage() {
                  <TableCell className="px-3 py-3.5 text-muted-foreground">#{b.brandId}</TableCell>
                  <TableCell className="px-3 py-3.5 font-medium">{b.name}</TableCell>
                  <TableCell className="px-3 py-3.5">
-                    <Badge
-                      variant="outline"
-                      className={cn(
-                        "border-transparent",
-                        b.status === "Active" ? "bg-success/10 text-success" : "bg-destructive/10 text-destructive"
-                      )}
-                    >
-                      {b.status}
-                    </Badge>
+                    <Badge variant={b.status === "Active" ? "default" : "secondary"}>{b.status}</Badge>
                  </TableCell>
                  <TableCell className="px-3 py-3.5 text-muted-foreground">{new Date(b.createdAt).toLocaleDateString()}</TableCell>
                  <TableCell className="px-3 py-3.5">
@@ -7,7 +7,6 @@ import { Ban, CheckCircle2, Network, Pencil, Plus } from "lucide-react"
 import { categoriesApi, subCategoriesApi } from "@/lib/api/categories"
 import { errorMessage } from "@/lib/error-map"
 import { validateCategoryName } from "@/lib/validations/master-data"
-import { cn } from "@/lib/utils"
 import { Category, SubCategory } from "@/types/master-data"

 import { AlertDialog, AlertDialogContent, AlertDialogTrigger } from "@/components/ui/alert-dialog"
@@ -182,15 +181,7 @@ export default function CategorySubCategoriesPage() {
                <TableCell className="px-3 py-3.5 text-muted-foreground">#{s.subCategoryId}</TableCell>
                <TableCell className="px-3 py-3.5 font-medium">{s.name}</TableCell>
                <TableCell className="px-3 py-3.5">
-                  <Badge
-                    variant="outline"
-                    className={cn(
-                      "border-transparent",
-                      s.status === "Active" ? "bg-success/10 text-success" : "bg-destructive/10 text-destructive"
-                    )}
-                  >
-                    {s.status}
-                  </Badge>
+                  <Badge variant={s.status === "Active" ? "default" : "secondary"}>{s.status}</Badge>
                </TableCell>
                <TableCell className="px-3 py-3.5 text-muted-foreground">{new Date(s.createdAt).toLocaleDateString()}</TableCell>
                <TableCell className="px-3 py-3.5">
@@ -256,15 +256,7 @@ export default function CategoriesPage() {
                  <TableCell className="px-3 py-3.5 text-muted-foreground">#{c.categoryId}</TableCell>
                  <TableCell className="px-3 py-3.5 font-medium">{c.name}</TableCell>
                  <TableCell className="px-3 py-3.5">
-                    <Badge
-                      variant="outline"
-                      className={cn(
-                        "border-transparent",
-                        c.status === "Active" ? "bg-success/10 text-success" : "bg-destructive/10 text-destructive"
-                      )}
-                    >
-                      {c.status}
-                    </Badge>
+                    <Badge variant={c.status === "Active" ? "default" : "secondary"}>{c.status}</Badge>
                  </TableCell>
                  <TableCell className="px-3 py-3.5 text-muted-foreground">{new Date(c.createdAt).toLocaleDateString()}</TableCell>
                  <TableCell className="px-3 py-3.5">
@@ -240,7 +240,7 @@ export default function ItemsPage() {
                      variant="outline"
                      className={cn(
                        "h-6 w-fit justify-center border-transparent px-2.5 text-sm",
-                        item.status === "Active" ? "bg-success/10 text-success" : "bg-destructive/10 text-destructive"
+                        item.status === "Active" ? "bg-success/10 text-success" : "bg-muted text-muted-foreground"
                      )}
                    >
                      {item.status}
@@ -440,220 +440,220 @@ export default function NewGrnPage() {

            {!poLoading && lines.length > 0 && (
              <div className="overflow-x-auto">
-                <Table className="text-base">
-                  <TableHeader>
-                    <TableRow>
-                      <TableHead className="h-12 w-56 px-3 text-sm">Item</TableHead>
-                      <TableHead className="h-12 w-24 px-3 text-sm">UOM</TableHead>
-                      <TableHead className="h-12 w-28 px-3 text-sm">Bin</TableHead>
-                      <TableHead className="h-12 w-32 px-3 text-sm">Qty</TableHead>
-                      <TableHead className="h-12 w-28 px-3 text-sm">Unit cost</TableHead>
-                      <TableHead className="h-12 w-24 px-3 text-sm">Disc %</TableHead>
-                      <TableHead className="h-12 w-24 px-3 text-sm">VAT %</TableHead>
-                      <TableHead className="h-12 w-28 px-3 text-sm text-right">Line total</TableHead>
-                      <TableHead className="h-12 w-56 px-3 text-sm">Hold status</TableHead>
-                      <TableHead className="h-12 w-44 px-3 text-sm">Batch / Serial</TableHead>
-                      <TableHead className="h-12 w-10 px-3" />
-                    </TableRow>
-                  </TableHeader>
-                  <TableBody>
-                    {lines.map((line) => {
-                      const item = itemFor(line.itemId)
-                      const errors = lineErrors[line.key] ?? {}
-                      return (
-                        <TableRow key={line.key}>
-                          <TableCell className="px-3 py-3 align-top">
-                            {line.poLineId ? (
-                              <div className="flex h-11 items-center text-base">
-                                {item ? `${item.sku} — ${item.name}` : `Item #${line.itemId}`}
+              <Table className="text-base">
+                <TableHeader>
+                  <TableRow>
+                    <TableHead className="h-12 w-96 px-3 text-sm">Item</TableHead>
+                    <TableHead className="h-12 w-24 px-3 text-sm">UOM</TableHead>
+                    <TableHead className="h-12 w-28 px-3 text-sm">Bin</TableHead>
+                    <TableHead className="h-12 w-20 px-3 text-sm">Qty</TableHead>
+                    <TableHead className="h-12 w-28 px-3 text-sm">Unit cost</TableHead>
+                    <TableHead className="h-12 w-24 px-3 text-sm">Disc %</TableHead>
+                    <TableHead className="h-12 w-24 px-3 text-sm">VAT %</TableHead>
+                    <TableHead className="h-12 w-28 px-3 text-sm text-right">Line total</TableHead>
+                    <TableHead className="h-12 w-56 px-3 text-sm">Hold status</TableHead>
+                    <TableHead className="h-12 w-44 px-3 text-sm">Batch / Serial</TableHead>
+                    <TableHead className="h-12 w-10 px-3" />
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {lines.map((line) => {
+                    const item = itemFor(line.itemId)
+                    const errors = lineErrors[line.key] ?? {}
+                    return (
+                      <TableRow key={line.key}>
+                        <TableCell className="px-3 py-3 align-top">
+                          {line.poLineId ? (
+                            <div className="flex h-11 items-center text-base">
+                              {item ? `${item.sku} — ${item.name}` : `Item #${line.itemId}`}
+                            </div>
+                          ) : (
+                            <>
+                              <Select<number | null> value={line.itemId} onValueChange={(v) => updateLine(line.key, { itemId: v })}>
+                                <SelectTrigger className="h-11! w-full text-base" aria-invalid={!!errors.itemId}>
+                                  <SelectValue placeholder="Select item" />
+                                </SelectTrigger>
+                                <SelectContent>
+                                  {(items ?? []).map((i) => (
+                                    <SelectItem key={i.itemId} value={i.itemId} className="text-base">
+                                      {i.sku} — {i.name}
+                                    </SelectItem>
+                                  ))}
+                                </SelectContent>
+                              </Select>
+                              <FieldError errors={[errors.itemId ? { message: errors.itemId } : undefined]} />
+                            </>
+                          )}
+                        </TableCell>
+                        <TableCell className="px-3 py-3 align-top">
+                          {line.poLineId ? (
+                            <div className="flex h-11 items-center text-base">
+                              {uoms?.find((u) => u.uomId === line.uomId)?.name ?? `#${line.uomId}`}
+                            </div>
+                          ) : (
+                            <>
+                              <Select<number | null> value={line.uomId} onValueChange={(v) => updateLine(line.key, { uomId: v })}>
+                                <SelectTrigger className="h-11! w-full text-base" aria-invalid={!!errors.uomId}>
+                                  <SelectValue placeholder="UOM" />
+                                </SelectTrigger>
+                                <SelectContent>
+                                  {(uoms ?? []).map((u) => (
+                                    <SelectItem key={u.uomId} value={u.uomId} className="text-base">
+                                      {u.name}
+                                    </SelectItem>
+                                  ))}
+                                </SelectContent>
+                              </Select>
+                              <FieldError errors={[errors.uomId ? { message: errors.uomId } : undefined]} />
+                            </>
+                          )}
+                        </TableCell>
+                        <TableCell className="px-3 py-3 align-top">
+                          <Select<number | null> value={line.binId} onValueChange={(v) => updateLine(line.key, { binId: v })}>
+                            <SelectTrigger className="h-11! w-full text-base">
+                              <SelectValue placeholder="None" />
+                            </SelectTrigger>
+                            <SelectContent>
+                              {bins.map((b) => (
+                                <SelectItem key={b.binId} value={b.binId} className="text-base">
+                                  {b.code}
+                                </SelectItem>
+                              ))}
+                            </SelectContent>
+                          </Select>
+                        </TableCell>
+                        <TableCell className="px-3 py-3 align-top">
+                          <Input
+                            type="number"
+                            min="0"
+                            step="any"
+                            value={line.qty}
+                            aria-invalid={!!errors.qty}
+                            onChange={(e) => updateLine(line.key, { qty: e.target.value })}
+                            className="h-11 text-base"
+                          />
+                          <FieldError errors={[errors.qty ? { message: errors.qty } : undefined]} />
+                        </TableCell>
+                        <TableCell className="px-3 py-3 align-top">
+                          <Input
+                            type="number"
+                            min="0"
+                            step="any"
+                            value={line.unitCost}
+                            aria-invalid={!!errors.unitCost}
+                            onChange={(e) => updateLine(line.key, { unitCost: e.target.value })}
+                            className="h-11 text-base"
+                          />
+                          <FieldError errors={[errors.unitCost ? { message: errors.unitCost } : undefined]} />
+                          {line.poUnitPrice !== null && Number(line.unitCost) !== line.poUnitPrice && (
+                            <p className="mt-1 text-xs text-warning">
+                              PO price {line.poUnitPrice.toFixed(2)} — variance recorded
+                            </p>
+                          )}
+                        </TableCell>
+                        <TableCell className="px-3 py-3 align-top">
+                          <Input
+                            type="number"
+                            min="0"
+                            max="100"
+                            step="any"
+                            value={line.discountPct}
+                            aria-invalid={!!errors.discountPct}
+                            onChange={(e) => updateLine(line.key, { discountPct: e.target.value })}
+                            className="h-11 text-base"
+                          />
+                          <FieldError errors={[errors.discountPct ? { message: errors.discountPct } : undefined]} />
+                        </TableCell>
+                        <TableCell className="px-3 py-3 align-top">
+                          <Input
+                            type="number"
+                            min="0"
+                            max="100"
+                            step="any"
+                            value={line.vatPct}
+                            aria-invalid={!!errors.vatPct}
+                            onChange={(e) => updateLine(line.key, { vatPct: e.target.value })}
+                            className="h-11 text-base"
+                          />
+                          <FieldError errors={[errors.vatPct ? { message: errors.vatPct } : undefined]} />
+                        </TableCell>
+                        <TableCell className="px-3 py-3 align-top text-right tabular-nums">
+                          {(() => {
+                            const c = computeLine(line)
+                            return (
+                              <div className="flex h-11 flex-col justify-center">
+                                <span>{c.lineTotal.toFixed(2)}</span>
+                                <span className="text-xs text-muted-foreground">
+                                  net {c.receivedValue.toFixed(2)} + VAT {c.vatAmount.toFixed(2)}
+                                </span>
                              </div>
-                            ) : (
-                              <>
-                                <Select<number | null> value={line.itemId} onValueChange={(v) => updateLine(line.key, { itemId: v })}>
-                                  <SelectTrigger className="h-11! w-full text-base" aria-invalid={!!errors.itemId}>
-                                    <SelectValue placeholder="Select item" />
-                                  </SelectTrigger>
-                                  <SelectContent>
-                                    {(items ?? []).map((i) => (
-                                      <SelectItem key={i.itemId} value={i.itemId} className="text-base">
-                                        {i.sku} — {i.name}
-                                      </SelectItem>
-                                    ))}
-                                  </SelectContent>
-                                </Select>
-                                <FieldError errors={[errors.itemId ? { message: errors.itemId } : undefined]} />
-                              </>
-                            )}
-                          </TableCell>
-                          <TableCell className="px-3 py-3 align-top">
-                            {line.poLineId ? (
-                              <div className="flex h-11 items-center text-base">
-                                {uoms?.find((u) => u.uomId === line.uomId)?.name ?? `#${line.uomId}`}
-                              </div>
-                            ) : (
-                              <>
-                                <Select<number | null> value={line.uomId} onValueChange={(v) => updateLine(line.key, { uomId: v })}>
-                                  <SelectTrigger className="h-11! w-full text-base" aria-invalid={!!errors.uomId}>
-                                    <SelectValue placeholder="UOM" />
-                                  </SelectTrigger>
-                                  <SelectContent>
-                                    {(uoms ?? []).map((u) => (
-                                      <SelectItem key={u.uomId} value={u.uomId} className="text-base">
-                                        {u.name}
-                                      </SelectItem>
-                                    ))}
-                                  </SelectContent>
-                                </Select>
-                                <FieldError errors={[errors.uomId ? { message: errors.uomId } : undefined]} />
-                              </>
-                            )}
-                          </TableCell>
-                          <TableCell className="px-3 py-3 align-top">
-                            <Select<number | null> value={line.binId} onValueChange={(v) => updateLine(line.key, { binId: v })}>
-                              <SelectTrigger className="h-11! w-full text-base">
-                                <SelectValue placeholder="None" />
-                              </SelectTrigger>
-                              <SelectContent>
-                                {bins.map((b) => (
-                                  <SelectItem key={b.binId} value={b.binId} className="text-base">
-                                    {b.code}
-                                  </SelectItem>
-                                ))}
-                              </SelectContent>
-                            </Select>
-                          </TableCell>
-                          <TableCell className="px-3 py-3 align-top">
-                            <Input
-                              type="number"
-                              min="0"
-                              step="any"
-                              value={line.qty}
-                              aria-invalid={!!errors.qty}
-                              onChange={(e) => updateLine(line.key, { qty: e.target.value })}
-                              className="h-11 text-base"
-                            />
-                            <FieldError errors={[errors.qty ? { message: errors.qty } : undefined]} />
-                          </TableCell>
-                          <TableCell className="px-3 py-3 align-top">
-                            <Input
-                              type="number"
-                              min="0"
-                              step="any"
-                              value={line.unitCost}
-                              aria-invalid={!!errors.unitCost}
-                              onChange={(e) => updateLine(line.key, { unitCost: e.target.value })}
-                              className="h-11 text-base"
-                            />
-                            <FieldError errors={[errors.unitCost ? { message: errors.unitCost } : undefined]} />
-                            {line.poUnitPrice !== null && Number(line.unitCost) !== line.poUnitPrice && (
-                              <p className="mt-1 text-xs text-warning">
-                                PO price {line.poUnitPrice.toFixed(2)} — variance recorded
-                              </p>
-                            )}
-                          </TableCell>
-                          <TableCell className="px-3 py-3 align-top">
-                            <Input
-                              type="number"
-                              min="0"
-                              max="100"
-                              step="any"
-                              value={line.discountPct}
-                              aria-invalid={!!errors.discountPct}
-                              onChange={(e) => updateLine(line.key, { discountPct: e.target.value })}
-                              className="h-11 text-base"
-                            />
-                            <FieldError errors={[errors.discountPct ? { message: errors.discountPct } : undefined]} />
-                          </TableCell>
-                          <TableCell className="px-3 py-3 align-top">
-                            <Input
-                              type="number"
-                              min="0"
-                              max="100"
-                              step="any"
-                              value={line.vatPct}
-                              aria-invalid={!!errors.vatPct}
-                              onChange={(e) => updateLine(line.key, { vatPct: e.target.value })}
-                              className="h-11 text-base"
-                            />
-                            <FieldError errors={[errors.vatPct ? { message: errors.vatPct } : undefined]} />
-                          </TableCell>
-                          <TableCell className="px-3 py-3 align-top text-right tabular-nums">
-                            {(() => {
-                              const c = computeLine(line)
-                              return (
-                                <div className="flex h-11 flex-col justify-center">
-                                  <span>{c.lineTotal.toFixed(2)}</span>
-                                  <span className="text-xs text-muted-foreground">
-                                    net {c.receivedValue.toFixed(2)} + VAT {c.vatAmount.toFixed(2)}
-                                  </span>
-                                </div>
-                              )
-                            })()}
-                          </TableCell>
-                          <TableCell className="px-3 py-3 align-top">
-                            <Select<HoldStatus>
-                              value={line.holdStatus}
-                              onValueChange={(v) => v && updateLine(line.key, { holdStatus: v })}
-                            >
-                              <SelectTrigger className="h-11! w-full text-base">
-                                <SelectValue />
-                              </SelectTrigger>
-                              <SelectContent>
-                                <SelectItem value="Available" className="text-base">Available</SelectItem>
-                                <SelectItem value="OnHold" className="text-base">On hold (inspection)</SelectItem>
-                              </SelectContent>
-                            </Select>
-                          </TableCell>
-                          <TableCell className="px-3 py-3 align-top">
-                            {item?.trackingMode === "Batch" && (
-                              <div className="flex flex-col gap-1.5">
-                                <Input
-                                  placeholder="Batch no."
-                                  value={line.batchNo}
-                                  aria-invalid={!!errors.batchNo}
-                                  onChange={(e) => updateLine(line.key, { batchNo: e.target.value })}
-                                  className="h-9 text-sm"
-                                />
-                                <Input
-                                  type="date"
-                                  value={line.expiryDate}
-                                  onChange={(e) => updateLine(line.key, { expiryDate: e.target.value })}
-                                  className="h-9 text-sm"
-                                />
-                                <FieldError errors={[errors.batchNo ? { message: errors.batchNo } : undefined]} />
-                              </div>
-                            )}
-                            {item?.trackingMode === "Serial" && (
-                              <div className="flex flex-col gap-1.5">
-                                <textarea
-                                  placeholder="One serial per line"
-                                  value={line.serialNumbersText}
-                                  aria-invalid={!!errors.serialNumbers}
-                                  onChange={(e) => updateLine(line.key, { serialNumbersText: e.target.value })}
-                                  className="min-h-16 w-full rounded-lg border border-input bg-transparent p-2 text-sm outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"
-                                />
-                                <FieldError errors={[errors.serialNumbers ? { message: errors.serialNumbers } : undefined]} />
-                              </div>
-                            )}
-                            {(!item || item.trackingMode === "None") && (
-                              <span className="text-sm text-muted-foreground">—</span>
-                            )}
-                          </TableCell>
-                          <TableCell className="px-3 py-3 align-top">
-                            <Button type="button" variant="ghost" size="icon" onClick={() => removeLine(line.key)} aria-label="Remove line">
-                              <Trash2 className="size-5" />
-                            </Button>
-                          </TableCell>
-                        </TableRow>
-                      )
-                    })}
-                  </TableBody>
-                </Table>
+                            )
+                          })()}
+                        </TableCell>
+                        <TableCell className="px-3 py-3 align-top">
+                          <Select<HoldStatus>
+                            value={line.holdStatus}
+                            onValueChange={(v) => v && updateLine(line.key, { holdStatus: v })}
+                          >
+                            <SelectTrigger className="h-11! w-full text-base">
+                              <SelectValue />
+                            </SelectTrigger>
+                            <SelectContent>
+                              <SelectItem value="Available" className="text-base">Available</SelectItem>
+                              <SelectItem value="OnHold" className="text-base">On hold (inspection)</SelectItem>
+                            </SelectContent>
+                          </Select>
+                        </TableCell>
+                        <TableCell className="px-3 py-3 align-top">
+                          {item?.trackingMode === "Batch" && (
+                            <div className="flex flex-col gap-1.5">
+                              <Input
+                                placeholder="Batch no."
+                                value={line.batchNo}
+                                aria-invalid={!!errors.batchNo}
+                                onChange={(e) => updateLine(line.key, { batchNo: e.target.value })}
+                                className="h-9 text-sm"
+                              />
+                              <Input
+                                type="date"
+                                value={line.expiryDate}
+                                onChange={(e) => updateLine(line.key, { expiryDate: e.target.value })}
+                                className="h-9 text-sm"
+                              />
+                              <FieldError errors={[errors.batchNo ? { message: errors.batchNo } : undefined]} />
+                            </div>
+                          )}
+                          {item?.trackingMode === "Serial" && (
+                            <div className="flex flex-col gap-1.5">
+                              <textarea
+                                placeholder="One serial per line"
+                                value={line.serialNumbersText}
+                                aria-invalid={!!errors.serialNumbers}
+                                onChange={(e) => updateLine(line.key, { serialNumbersText: e.target.value })}
+                                className="min-h-16 w-full rounded-lg border border-input bg-transparent p-2 text-sm outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"
+                              />
+                              <FieldError errors={[errors.serialNumbers ? { message: errors.serialNumbers } : undefined]} />
+                            </div>
+                          )}
+                          {(!item || item.trackingMode === "None") && (
+                            <span className="text-sm text-muted-foreground">—</span>
+                          )}
+                        </TableCell>
+                        <TableCell className="px-3 py-3 align-top">
+                          <Button type="button" variant="ghost" size="icon" onClick={() => removeLine(line.key)} aria-label="Remove line">
+                            <Trash2 className="size-5" />
+                          </Button>
+                        </TableCell>
+                      </TableRow>
+                    )
+                  })}
+                </TableBody>
+              </Table>
              </div>
            )}

            {!poLoading && lines.length > 0 && (
-              <div className="flex justify-end gap-3 border-t border-border pt-4 text-base">
+              <div className="flex justify-end gap-6 pr-12 text-base">
                <span className="text-muted-foreground">Document total (incl. VAT)</span>
                <span className="font-semibold tabular-nums">
                  {lines.reduce((sum, l) => sum + computeLine(l).lineTotal, 0).toFixed(2)}
@@ -3,7 +3,7 @@
 import { useEffect, useMemo, useState } from "react"
 import Link from "next/link"
 import { useParams, useRouter } from "next/navigation"
-import { ArrowLeft, CheckCircle2, Edit, ExternalLink, Minus, Plus, Printer, Save, XCircle } from "lucide-react"
+import { ArrowLeft, CheckCircle2, Edit, Minus, Plus, Printer, Save, XCircle } from "lucide-react"

 import { bundleApi } from "@/lib/api/bundles"
 import { itemsApi } from "@/lib/api/items"
@@ -26,18 +26,6 @@ import { ManagedUser } from "@/types/users"

 type EditableLine = BundleSaleTemplateLine & { key: string }

-const createBlankLine = (templateLine?: BundleSaleTemplateLine): EditableLine => ({
-  key: crypto.randomUUID(),
-  bundleSaleTemplateLineId: templateLine?.bundleSaleTemplateLineId ?? 0,
-  itemId: templateLine?.itemId ?? 0,
-  uomId: templateLine?.uomId ?? 0,
-  warehouseId: templateLine?.warehouseId ?? 0,
-  qty: templateLine?.qty ?? 1,
-  unitPrice: templateLine?.unitPrice ?? 0,
-  includeInBundle: templateLine?.includeInBundle ?? true,
-  sortOrder: templateLine?.sortOrder ?? 0,
-})
-
 function statusClass(status: BundleSale["status"]) {
  switch (status) {
    case "Draft":
@@ -106,7 +94,7 @@ export default function BundleSaleDetailPage() {
            key: `${line.bundleSaleLineId}`,
            bundleSaleTemplateLineId: line.bundleSaleLineId,
            itemId: line.itemId,
-            uomId: items.find((candidate) => candidate.itemId === line.itemId)?.baseUomId ?? line.uomId,
+            uomId: line.uomId,
            warehouseId: line.warehouseId,
            qty: line.qty,
            unitPrice: line.unitPrice,
@@ -116,7 +104,7 @@ export default function BundleSaleDetailPage() {
        )
      })
      .catch((err) => setError(errorMessage(err)))
-  }, [bundleSaleId, params.id, items])
+  }, [bundleSaleId, params.id])

  const templateLabel = useMemo(() => templates.find((t) => t.bundleSaleTemplateId === templateId)?.templateName ?? "Template", [templates, templateId])
  const componentSubtotal = useMemo(() => lines.reduce((sum, line) => sum + Number(line.qty || 0) * Number(line.unitPrice || 0), 0), [lines])
@@ -128,9 +116,9 @@ export default function BundleSaleDetailPage() {
  }

  function addLine() {
-    const source = template?.lines[0]
+    const source = lines[lines.length - 1]
    if (!source) return
-    setLines((prev) => [...prev, createBlankLine(source)])
+    setLines((prev) => [...prev, { ...source, key: crypto.randomUUID() }])
  }

  function removeLine(key: string) {
@@ -182,20 +170,6 @@ export default function BundleSaleDetailPage() {
    }
  }

-  const shortageIssues = bundle && bundle.status === "Draft"
-    ? bundle.lines
-        .filter((line) => line.includeInBundle)
-        .filter((line) => Number(line.qty || 0) > 0)
-        .map((line) => ({
-          bundleSaleLineId: line.bundleSaleLineId,
-          itemId: line.itemId,
-          itemSku: items.find((item) => item.itemId === line.itemId)?.sku ?? `#${line.itemId}`,
-          itemName: items.find((item) => item.itemId === line.itemId)?.name ?? line.itemId.toString(),
-          warehouseId: line.warehouseId,
-          requestedQty: line.qty,
-        }))
-      : []
-
  async function cancelBundle() {
    if (!bundle) return
    setBusy(true)
@@ -262,47 +236,6 @@ export default function BundleSaleDetailPage() {

      {error ? <div className="rounded-lg border border-destructive/30 bg-destructive/5 p-5 text-base text-destructive">{error}</div> : null}

-      {bundle.status === "Draft" && shortageIssues.length > 0 ? (
-        <div className="rounded-lg border border-amber-200 bg-amber-50 p-4 text-sm text-amber-900">
-          <div className="flex flex-col gap-3 md:flex-row md:items-start md:justify-between">
-            <div>
-              <div className="font-semibold">Stock shortage detected before posting</div>
-              <div className="mt-1">This bundle cannot be posted until every included component has enough available stock in the selected warehouse.</div>
-            </div>
-            <Link
-              href="/dashboard/receiving/grn/new"
-              className="inline-flex h-9 items-center gap-2 self-start rounded-full border border-amber-300 bg-white px-4 text-sm font-medium text-amber-950 shadow-sm hover:bg-amber-100"
-            >
-              <ExternalLink className="size-4" />
-              Create GRN
-            </Link>
-          </div>
-          <div className="mt-3 overflow-x-auto">
-            <table className="w-full text-sm">
-              <thead className="text-left text-xs uppercase tracking-wide text-amber-900/70">
-                <tr>
-                  <th className="py-1 pr-3">Item</th>
-                  <th className="py-1 pr-3">Warehouse</th>
-                  <th className="py-1 pr-3 text-right">Requested</th>
-                </tr>
-              </thead>
-              <tbody>
-                {shortageIssues.map((issue) => (
-                  <tr key={issue.bundleSaleLineId} className="border-t border-amber-200/60">
-                    <td className="py-2 pr-3">
-                      <div className="font-medium">{issue.itemSku}</div>
-                      <div className="text-xs text-amber-900/70">{issue.itemName}</div>
-                    </td>
-                    <td className="py-2 pr-3">{issue.warehouseId}</td>
-                    <td className="py-2 pr-3 text-right font-mono tabular-nums">{issue.requestedQty.toFixed(0)}</td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          </div>
-        </div>
-      ) : null}
-
      <section className="rounded-2xl border bg-card p-4 shadow-sm">
        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
          <div className="space-y-1.5">
@@ -371,7 +304,7 @@ export default function BundleSaleDetailPage() {
                      <Select value={line.itemId ? String(line.itemId) : "all"} onValueChange={(v) => {
                        const itemId = Number(v)
                        const item = items.find((candidate) => candidate.itemId === itemId)
-                        updateLine(line.key, { itemId, uomId: item?.baseUomId ?? line.uomId, unitPrice: item?.salePrice ?? line.unitPrice })
+                        updateLine(line.key, { itemId, unitPrice: item?.salePrice ?? line.unitPrice })
                      }} disabled={!editing || !isDraft}>
                        <SelectTrigger className="h-9 text-sm">
                          <SelectValue placeholder="Select item" />
@@ -386,7 +319,7 @@ export default function BundleSaleDetailPage() {
                      </Select>
                    </TableCell>
                    <TableCell className="min-w-40">
-                      <Select value={line.uomId ? String(line.uomId) : "all"} onValueChange={(v) => updateLine(line.key, { uomId: v === "all" ? 0 : Number(v) })} disabled>
+                      <Select value={line.uomId ? String(line.uomId) : "all"} onValueChange={(v) => updateLine(line.key, { uomId: v === "all" ? 0 : Number(v) })} disabled={!editing || !isDraft}>
                        <SelectTrigger className="h-9 text-sm">
                          <SelectValue placeholder="Select UOM" />
                        </SelectTrigger>
@@ -401,78 +334,15 @@ export default function BundleSaleDetailPage() {
                    </TableCell>
                    <TableCell className="text-right w-28"><Input type="number" min="0" step="0.01" value={line.qty} onChange={(e) => updateLine(line.key, { qty: Number(e.target.value) })} disabled={!editing || !isDraft} className="text-right" /></TableCell>
                    <TableCell className="text-right w-32"><Input type="number" min="0" step="0.01" value={line.unitPrice} onChange={(e) => updateLine(line.key, { unitPrice: Number(e.target.value) })} disabled={!editing || !isDraft} className="text-right" /></TableCell>
-                    <TableCell className="text-right">
-                      {editing && isDraft ? (
-                        <button
-                          type="button"
-                          onClick={() => updateLine(line.key, { includeInBundle: !line.includeInBundle })}
-                          className={cn(
-                            "rounded-full px-3 py-1 text-xs font-medium",
-                            line.includeInBundle ? "bg-emerald-50 text-emerald-800" : "bg-muted text-muted-foreground"
-                          )}
-                        >
-                          {line.includeInBundle ? "Included" : "Excluded"}
-                        </button>
-                      ) : (
-                        line.includeInBundle ? "Included" : "Excluded"
-                      )}
-                    </TableCell>
+                    <TableCell className="text-right">{line.includeInBundle ? "Yes" : "No"}</TableCell>
                    {editing && isDraft ? <TableCell className="text-right"><Button type="button" variant="ghost" size="icon-sm" onClick={() => removeLine(line.key)} disabled={lines.length === 1}><Minus className="size-4" /></Button></TableCell> : null}
                  </TableRow>
                ))}
-                {lines.length === 0 ? (
-                  <TableRow>
-                    <TableCell colSpan={editing && isDraft ? 6 : 5} className="py-10 text-center text-sm text-muted-foreground">
-                      No component rows yet. Click Add line to start.
-                    </TableCell>
-                  </TableRow>
-                ) : null}
            </TableBody>
          </Table>
        </div>
      </section>

-      {bundle.status === "Draft" && shortageIssues.length > 0 ? (
-        <div className="rounded-lg border border-amber-200 bg-amber-50 p-4 text-sm text-amber-900">
-          <div className="flex flex-col gap-3 md:flex-row md:items-start md:justify-between">
-            <div>
-              <div className="font-semibold">Stock shortage detected before posting</div>
-              <div className="mt-1">This bundle cannot be posted until every included component has enough available stock in the selected warehouse.</div>
-            </div>
-            <Link
-              href="/dashboard/receiving/grn/new"
-              className="inline-flex h-9 items-center gap-2 self-start rounded-full border border-amber-300 bg-white px-4 text-sm font-medium text-amber-950 shadow-sm hover:bg-amber-100"
-            >
-              <ExternalLink className="size-4" />
-              Create GRN
-            </Link>
-          </div>
-          <div className="mt-3 overflow-x-auto">
-            <table className="w-full text-sm">
-              <thead className="text-left text-xs uppercase tracking-wide text-amber-900/70">
-                <tr>
-                  <th className="py-1 pr-3">Item</th>
-                  <th className="py-1 pr-3">Warehouse</th>
-                  <th className="py-1 pr-3 text-right">Requested</th>
-                </tr>
-              </thead>
-              <tbody>
-                {shortageIssues.map((issue) => (
-                  <tr key={issue.bundleSaleLineId} className="border-t border-amber-200/60">
-                    <td className="py-2 pr-3">
-                      <div className="font-medium">{issue.itemSku}</div>
-                      <div className="text-xs text-amber-900/70">{issue.itemName}</div>
-                    </td>
-                    <td className="py-2 pr-3">{issue.warehouseId}</td>
-                    <td className="py-2 pr-3 text-right font-mono tabular-nums">{issue.requestedQty.toFixed(0)}</td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          </div>
-        </div>
-      ) : null}
-
      <section className="rounded-2xl border bg-card p-4 shadow-sm">
        <div className="grid gap-3 md:grid-cols-3">
          <div><div className="text-xs text-muted-foreground">Component subtotal</div><div className="text-lg font-semibold">{componentSubtotal.toFixed(2)}</div></div>
@@ -3,7 +3,7 @@
 import { Suspense, useEffect, useMemo, useState } from "react"
 import { useRouter, useSearchParams } from "next/navigation"
 import Link from "next/link"
-import { ArrowLeft, ExternalLink, Minus, Plus, Save } from "lucide-react"
+import { ArrowLeft, Minus, Plus, Save } from "lucide-react"

 import { bundleApi } from "@/lib/api/bundles"
 import { customersApi } from "@/lib/api/customers"
@@ -27,17 +27,7 @@ import { BundleSaleTemplate, BundleSaleTemplateLine, BundleSaleTemplateSummary,

 type EditableLine = BundleSaleTemplateLine & { key: string }

-const createBlankLine = (templateLine?: BundleSaleTemplateLine): EditableLine => ({
-  key: crypto.randomUUID(),
-  bundleSaleTemplateLineId: templateLine?.bundleSaleTemplateLineId ?? 0,
-  itemId: templateLine?.itemId ?? 0,
-  uomId: templateLine?.uomId ?? 0,
-  warehouseId: templateLine?.warehouseId ?? 0,
-  qty: templateLine?.qty ?? 1,
-  unitPrice: templateLine?.unitPrice ?? 0,
-  includeInBundle: templateLine?.includeInBundle ?? true,
-  sortOrder: templateLine?.sortOrder ?? 0,
-})
+const blankLine = (source: BundleSaleTemplateLine): EditableLine => ({ ...source, key: crypto.randomUUID() })

 function NewBundleSaleContent() {
  const router = useRouter()
@@ -91,20 +81,10 @@ function NewBundleSaleContent() {
    if (!templateId) return
    bundleApi.getTemplate(templateId).then((res) => {
      setTemplate(res)
-      setLines(
-        res.lines.length > 0
-          ? res.lines.map((line) => {
-              const item = items.find((candidate) => candidate.itemId === line.itemId)
-              return createBlankLine({
-                ...line,
-                uomId: item?.baseUomId ?? line.uomId,
-              })
-            })
-          : [createBlankLine()]
-      )
+      setLines(res.lines.map(blankLine))
      setBundlePrice(res.lines.reduce((sum, line) => sum + line.qty * line.unitPrice, 0))
    }).catch((err) => setSubmitError(errorMessage(err)))
-  }, [items, templateId])
+  }, [templateId])

  const templateLabel = useMemo(() => template?.templateName ?? "Select template", [template])
  const componentSubtotal = useMemo(() => lines.reduce((sum, line) => sum + Number(line.qty || 0) * Number(line.unitPrice || 0), 0), [lines])
@@ -114,7 +94,9 @@ function NewBundleSaleContent() {
  }

  function addLine() {
-    setLines((prev) => [...prev, createBlankLine(template?.lines[0])])
+    const source = lines[lines.length - 1] ?? template?.lines[0]
+    if (!source) return
+    setLines((prev) => [...prev, blankLine(source)])
  }

  function removeLine(key: string) {
@@ -169,22 +151,6 @@ function NewBundleSaleContent() {

      {submitError ? <div className="rounded-lg border border-destructive/30 bg-destructive/5 p-5 text-base text-destructive">{submitError}</div> : null}

-      <div className="rounded-lg border border-amber-200 bg-amber-50 p-4 text-sm text-amber-900">
-        <div className="flex flex-col gap-3 md:flex-row md:items-start md:justify-between">
-          <div>
-            <div className="font-semibold">Need stock before saving this bundle?</div>
-            <div className="mt-1">Save the bundle as a draft first. After that, open the draft detail page to check shortages and create a GRN if needed.</div>
-          </div>
-          <Link
-            href="/dashboard/receiving/grn/new"
-            className="inline-flex h-9 items-center gap-2 self-start rounded-full border border-amber-300 bg-white px-4 text-sm font-medium text-amber-950 shadow-sm hover:bg-amber-100"
-          >
-            <ExternalLink className="size-4" />
-            Create GRN
-          </Link>
-        </div>
-      </div>
-
      <section className="rounded-2xl border bg-card p-4 shadow-sm">
        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
          <div className="space-y-1.5">
@@ -256,14 +222,13 @@ function NewBundleSaleContent() {
              {lines.map((line) => (
                <TableRow key={line.key}>
                  <TableCell className="min-w-72">
-                    <Select value={line.itemId ? String(line.itemId) : "all"} onValueChange={(v) => {
+                      <Select value={line.itemId ? String(line.itemId) : "all"} onValueChange={(v) => {
                        const itemId = Number(v)
-                        const item = items.find((candidate) => candidate.itemId === itemId)
-                        updateLine(line.key, {
-                          itemId,
-                          uomId: item?.baseUomId ?? line.uomId,
-                          unitPrice: item?.salePrice ?? line.unitPrice,
-                        })
+                      const item = items.find((candidate) => candidate.itemId === itemId)
+                      updateLine(line.key, {
+                        itemId,
+                        unitPrice: item?.salePrice ?? line.unitPrice,
+                      })
                    }}>
                      <SelectTrigger className="h-9 text-sm">
                        <SelectValue placeholder="Select item" />
@@ -278,7 +243,7 @@ function NewBundleSaleContent() {
                    </Select>
                  </TableCell>
                  <TableCell className="min-w-40">
-                      <Select value={line.uomId ? String(line.uomId) : "all"} onValueChange={(v) => updateLine(line.key, { uomId: v === "all" ? 0 : Number(v) })} disabled>
+                      <Select value={line.uomId ? String(line.uomId) : "all"} onValueChange={(v) => updateLine(line.key, { uomId: v === "all" ? 0 : Number(v) })}>
                      <SelectTrigger className="h-9 text-sm">
                        <SelectValue placeholder="Select UOM" />
                      </SelectTrigger>
@@ -293,30 +258,12 @@ function NewBundleSaleContent() {
                  </TableCell>
                  <TableCell className="text-right w-28"><Input type="number" min="0" step="0.01" value={line.qty} onChange={(e) => updateLine(line.key, { qty: Number(e.target.value) })} className="text-right" /></TableCell>
                  <TableCell className="text-right w-32"><Input type="number" min="0" step="0.01" value={line.unitPrice} onChange={(e) => updateLine(line.key, { unitPrice: Number(e.target.value) })} className="text-right" /></TableCell>
-                  <TableCell className="text-right">
-                    <button
-                      type="button"
-                      onClick={() => updateLine(line.key, { includeInBundle: !line.includeInBundle })}
-                      className={cn(
-                        "rounded-full px-3 py-1 text-xs font-medium",
-                        line.includeInBundle ? "bg-emerald-50 text-emerald-800" : "bg-muted text-muted-foreground"
-                      )}
-                    >
-                      {line.includeInBundle ? "Included" : "Excluded"}
-                    </button>
-                  </TableCell>
+                  <TableCell className="text-right">{line.includeInBundle ? "Yes" : "No"}</TableCell>
                  <TableCell className="text-right">
                    <Button type="button" variant="ghost" size="icon-sm" onClick={() => removeLine(line.key)} disabled={lines.length === 1}><Minus className="size-4" /></Button>
                  </TableCell>
                </TableRow>
              ))}
-              {lines.length === 0 && (
-                <TableRow>
-                  <TableCell colSpan={6} className="py-10 text-center text-sm text-muted-foreground">
-                    No component rows yet. Click Add component to start.
-                  </TableCell>
-                </TableRow>
-              )}
            </TableBody>
          </Table>
        </div>
@@ -84,18 +84,7 @@ export default function BundleSalesPage() {
      .catch((err) => setError(errorMessage(err)))
  }, [page, status, query, customerId, warehouseId])

-  const visibleRows = useMemo(
-    () =>
-      rows?.filter((row) => {
-        const matchesStatus = status === "All" || row.status === status
-        const matchesQuery =
-          `${row.bundleNo} ${row.bundleName} ${row.customerSnapshotName} ${row.bundleCode}`
-            .toLowerCase()
-            .includes(query.toLowerCase())
-        return matchesStatus && matchesQuery
-      }) ?? [],
-    [rows, query, status]
-  )
+  const visibleRows = useMemo(() => rows ?? [], [rows])
  const hasFilters = status !== "All" || query.length > 0 || customerId !== null || warehouseId !== null
  const bundleTotal = visibleRows.reduce((sum, row) => sum + row.grandTotal, 0)
  const printHref = `/print/sales/bundles?status=${encodeURIComponent(status)}&q=${encodeURIComponent(query)}&customerId=${customerId ?? ""}&warehouseId=${warehouseId ?? ""}`
@@ -136,12 +125,7 @@ export default function BundleSalesPage() {
            ))}
          </div>
          <div className="flex flex-1 flex-col gap-3 lg:flex-row lg:items-center lg:justify-end">
-            <Input
-              value={searchInput}
-              onChange={(e) => setSearchInput(e.target.value)}
-              placeholder="Filter by bundle, code, or customer"
-              className="h-12 w-full lg:max-w-sm"
-            />
+            <Input value={searchInput} onChange={(e) => setSearchInput(e.target.value)} placeholder="Filter by bundle, code, or customer" className="h-12 w-full lg:max-w-sm" />
            <Button variant="outline" size="sm" className="lg:ml-auto" onClick={() => setShowFilters((v) => !v)}>
              <Filter className="size-4" />
              Advanced
@@ -3,7 +3,7 @@
 import { use, useEffect, useMemo, useState } from "react"
 import Link from "next/link"
 import { useRouter } from "next/navigation"
-import { ArrowLeft, ExternalLink, Minus, Plus, Printer, Save, Send, X } from "lucide-react"
+import { ArrowLeft, Minus, Plus, Printer, Save, Send, X } from "lucide-react"

 import { salesApi } from "@/lib/api/sales"
 import { customersApi } from "@/lib/api/customers"
@@ -157,11 +157,6 @@ export default function SalesInvoiceDetailPage({ params }: { params: Promise<{ i
    })
  }

-  function resolveLineUnitPrice(line: Line): number | null {
-    if (line.unitPrice !== null && line.unitPrice !== undefined) return Number(line.unitPrice)
-    return getSuggestedUnitPrice(items, line.itemId)
-  }
-
  function addLine() {
    setLines((prev) => [...prev, { ...blankLine(`line-${Date.now()}`), warehouseId: warehouseId ?? 0 }])
  }
@@ -186,14 +181,14 @@ export default function SalesInvoiceDetailPage({ params }: { params: Promise<{ i
          customerId,
          warehouseId,
          invoiceType,
-            lines: lines.map((line) => ({
-              itemId: Number(line.itemId),
-              uomId: Number(line.uomId),
-              warehouseId: Number(line.warehouseId),
-              qty: Number(line.qty),
-              freeQty: Number(line.freeQty),
-              unitPrice: resolveLineUnitPrice(line),
-              allowManualPriceOverride: line.allowManualPriceOverride,
+          lines: lines.map((line) => ({
+            itemId: Number(line.itemId),
+            uomId: Number(line.uomId),
+            warehouseId: Number(line.warehouseId),
+            qty: Number(line.qty),
+            freeQty: Number(line.freeQty),
+            unitPrice: line.unitPrice === null ? null : Number(line.unitPrice),
+            allowManualPriceOverride: line.allowManualPriceOverride,
            discountMode: line.discountMode,
            discountPct: Number(line.discountPct),
            discountAmount: Number(line.discountAmount),
@@ -383,19 +378,8 @@ export default function SalesInvoiceDetailPage({ params }: { params: Promise<{ i
        {invoice.status === "Draft" && postingCheck && !postingCheck.canPost ? (
          <div className="border-t pt-5">
            <div className="rounded-lg border border-amber-200 bg-amber-50 p-4 text-sm text-amber-900">
-              <div className="flex flex-col gap-3 md:flex-row md:items-start md:justify-between">
-                <div>
-                  <div className="font-semibold">Stock shortage detected before posting</div>
-                  <div className="mt-1 text-sm">The invoice cannot be posted until every line has enough available stock in the selected warehouse.</div>
-                </div>
-                <Link
-                  href="/dashboard/receiving/grn/new"
-                  className="inline-flex h-9 items-center gap-2 self-start rounded-full border border-amber-300 bg-white px-4 text-sm font-medium text-amber-950 shadow-sm hover:bg-amber-100"
-                >
-                  <ExternalLink className="size-4" />
-                  Create GRN
-                </Link>
-              </div>
+              <div className="font-semibold">Stock shortage detected before posting</div>
+              <div className="mt-1 text-sm">The invoice cannot be posted until every line has enough available stock in the selected warehouse.</div>
              <div className="mt-3 overflow-x-auto">
                <table className="w-full text-sm">
                  <thead className="text-left text-xs uppercase tracking-wide text-amber-900/70">
@@ -448,15 +432,6 @@ export default function SalesInvoiceDetailPage({ params }: { params: Promise<{ i
                  <Save className="size-4" />
                  {saving ? "Saving..." : "Save invoice"}
                </button>
-                {postingCheck && !postingCheck.canPost ? (
-                  <Link
-                    href="/dashboard/receiving/grn/new"
-                    className="inline-flex h-9 items-center gap-2 rounded-full border border-amber-300 bg-white px-4 text-sm font-medium text-amber-950 shadow-sm hover:bg-amber-100"
-                  >
-                    <ExternalLink className="size-4" />
-                    Resolve stock in GRN
-                  </Link>
-                ) : null}
                <button type="button" onClick={post} disabled={!canPost} className="inline-flex h-9 items-center gap-2 rounded-full bg-black px-4 text-sm font-medium text-white shadow-sm hover:bg-black/90 disabled:cursor-not-allowed disabled:opacity-40">
                  <Send className="size-4" />
                  {postingCheck && !postingCheck.canPost ? "Resolve shortages first" : busy === "post" ? "Posting..." : "Post invoice"}
@@ -521,15 +496,15 @@ export default function SalesInvoiceDetailPage({ params }: { params: Promise<{ i
                          />
                        </td>
                        <td className="px-4 py-3 w-28">
-                        <input
-                          type="number"
-                          min="0"
-                          step="1"
-                          value={line.freeQty}
-                          onChange={(e) => updateLine(line.key, { freeQty: Number(e.target.value) || 0 })}
-                          className="h-10 w-full rounded-lg border border-input bg-background px-3 text-right font-mono tabular-nums text-sm"
-                        />
-                      </td>
+                          <input
+                            type="number"
+                            min="0"
+                            step="1"
+                            value={line.freeQty}
+                            onChange={(e) => updateLine(line.key, { freeQty: Number(e.target.value) || 0 })}
+                            className="h-10 w-full rounded-lg border border-input bg-background px-3 text-right font-mono tabular-nums text-sm"
+                          />
+                        </td>
                        <td className="px-4 py-3 w-32">
                          <input
                            type="number"
@@ -539,11 +514,6 @@ export default function SalesInvoiceDetailPage({ params }: { params: Promise<{ i
                            onChange={(e) => updateLine(line.key, { unitPrice: e.target.value === "" ? null : Number(e.target.value) })}
                            className="h-10 w-full rounded-lg border border-input bg-background px-3 text-right font-mono tabular-nums text-sm"
                          />
-                          <div className="mt-1 text-[11px] text-muted-foreground">
-                            {getSuggestedUnitPrice(items, line.itemId) !== null
-                              ? `Suggested: ${money.format(getSuggestedUnitPrice(items, line.itemId) ?? 0)}`
-                              : "No price suggestion available"}
-                          </div>
                        </td>
                        <td className="px-4 py-3 w-24 text-right">
                    <button
@@ -400,11 +400,6 @@ export default function NewSalesInvoicePage() {
                        onChange={(e) => updateLine(line.key, { unitPrice: e.target.value === "" ? null : Number(e.target.value) })}
                        className="h-9 w-28 text-right font-mono text-sm tabular-nums"
                      />
-                      <div className="mt-1 text-[11px] text-muted-foreground">
-                        {getSuggestedUnitPrice(items, line.itemId) !== null
-                          ? `Suggested: ${lkr.format(getSuggestedUnitPrice(items, line.itemId) ?? 0)}`
-                          : "No price suggestion available"}
-                      </div>
                    </TableCell>
                    <TableCell className="px-4 py-2">
                      <Input
@@ -2,7 +2,7 @@

 import { use, useEffect, useMemo, useState } from "react"
 import Link from "next/link"
-import { ArrowLeft, ExternalLink, Minus, Plus, Printer, Save, Send, X } from "lucide-react"
+import { ArrowLeft, Minus, Plus, Printer, Save, Send, X } from "lucide-react"

 import { salesApi } from "@/lib/api/sales"
 import { customersApi } from "@/lib/api/customers"
@@ -155,11 +155,6 @@ export default function SalesSlipDetailPage({ params }: { params: Promise<{ id:
    })
  }

-  function resolveLineUnitPrice(line: Line): number | null {
-    if (line.unitPrice !== null && line.unitPrice !== undefined) return Number(line.unitPrice)
-    return getSuggestedUnitPrice(items, line.itemId)
-  }
-
  function addLine() {
    setLines((prev) => [...prev, blankLine(`line-${Date.now()}`)])
  }
@@ -177,14 +172,14 @@ export default function SalesSlipDetailPage({ params }: { params: Promise<{ id:
        customerId,
        warehouseId,
        cashierUserId,
-          lines: lines.map((line) => ({
-            itemId: Number(line.itemId),
-            uomId: Number(line.uomId),
-            warehouseId: Number(line.warehouseId),
-            qty: Number(line.qty),
-            freeQty: Number(line.freeQty),
-            unitPrice: resolveLineUnitPrice(line),
-            allowManualPriceOverride: line.allowManualPriceOverride,
+        lines: lines.map((line) => ({
+          itemId: Number(line.itemId),
+          uomId: Number(line.uomId),
+          warehouseId: Number(line.warehouseId),
+          qty: Number(line.qty),
+          freeQty: Number(line.freeQty),
+          unitPrice: line.unitPrice === null ? null : Number(line.unitPrice),
+          allowManualPriceOverride: line.allowManualPriceOverride,
          discountMode: line.discountMode,
          discountPct: Number(line.discountPct),
          discountAmount: Number(line.discountAmount),
@@ -340,15 +335,10 @@ export default function SalesSlipDetailPage({ params }: { params: Promise<{ id:
                  <TableCell className="px-4 py-3">
                    <div className="font-medium text-foreground">{line.description}</div>
                    <div className="text-xs text-muted-foreground">SKU {items.find((i) => i.itemId === line.itemId)?.sku ?? `#${line.itemId}`}</div>
-                    <div className="mt-1 text-[11px] text-muted-foreground">
-                      {getSuggestedUnitPrice(items, line.itemId) !== null
-                        ? `Suggested: ${money.format(getSuggestedUnitPrice(items, line.itemId) ?? 0)}`
-                        : "No price suggestion available"}
-                    </div>
                  </TableCell>
                  <TableCell className="px-4 py-3">{uoms.find((u) => u.uomId === line.uomId)?.name ?? `#${line.uomId}`}</TableCell>
                  <TableCell className="px-4 py-3 text-right">{line.qty.toFixed(0)}</TableCell>
-                  <TableCell className="px-4 py-3 text-right">{line.freeQty > 0 ? line.freeQty.toFixed(0) : "-"}</TableCell>
+                  <TableCell className="px-4 py-3 text-right">{line.freeQty > 0 ? line.freeQty.toFixed(0) : "â€”"}</TableCell>
                  <TableCell className="px-4 py-3 text-right">{money.format(line.unitPrice)}</TableCell>
                  <TableCell className="px-4 py-3 text-right font-medium">{money.format(line.lineTotal)}</TableCell>
                </TableRow>
@@ -360,19 +350,8 @@ export default function SalesSlipDetailPage({ params }: { params: Promise<{ id:

      {slip.status === "Draft" && postingCheck && !postingCheck.canPost ? (
        <div className="rounded-lg border border-amber-200 bg-amber-50 p-4 text-sm text-amber-900">
-          <div className="flex flex-col gap-3 md:flex-row md:items-start md:justify-between">
-            <div>
-              <div className="font-semibold">Stock shortage detected before posting</div>
-              <div className="mt-1">This slip cannot be posted until every line has enough available stock in the selected warehouse.</div>
-            </div>
-            <Link
-              href="/dashboard/receiving/grn/new"
-              className="inline-flex h-9 items-center gap-2 self-start rounded-full border border-amber-300 bg-white px-4 text-sm font-medium text-amber-950 shadow-sm hover:bg-amber-100"
-            >
-              <ExternalLink className="size-4" />
-              Create GRN
-            </Link>
-          </div>
+          <div className="font-semibold">Stock shortage detected before posting</div>
+          <div className="mt-1">This slip cannot be posted until every line has enough available stock in the selected warehouse.</div>
          <div className="mt-3 overflow-x-auto">
            <table className="w-full text-sm">
              <thead className="text-left text-xs uppercase tracking-wide text-amber-900/70">
@@ -111,11 +111,6 @@ export default function NewSalesSlipPage() {
    })
  }

-  function resolveLineUnitPrice(line: Line): number | null {
-    if (line.unitPrice !== null && line.unitPrice !== undefined) return Number(line.unitPrice)
-    return getSuggestedUnitPrice(items, line.itemId)
-  }
-
  function addLine() {
    setLines((prev) => [...prev, blankLine(`line-${Date.now()}`)])
  }
@@ -167,7 +162,7 @@ export default function NewSalesSlipPage() {
        warehouseId: Number(line.warehouseId),
        qty: Number(line.qty),
        freeQty: Number(line.freeQty),
-        unitPrice: resolveLineUnitPrice(line),
+        unitPrice: line.unitPrice === null ? null : Number(line.unitPrice),
        allowManualPriceOverride: line.allowManualPriceOverride,
        discountMode: line.discountMode,
        discountPct: Number(line.discountPct),
@@ -371,11 +366,6 @@ export default function NewSalesSlipPage() {
                        onChange={(e) => updateLine(line.key, { unitPrice: e.target.value === "" ? null : Number(e.target.value) })}
                        className="h-9 w-28 text-right font-mono text-sm tabular-nums"
                      />
-                      <div className="mt-1 text-[11px] text-muted-foreground">
-                        {getSuggestedUnitPrice(items, line.itemId) !== null
-                          ? `Suggested: ${lkr.format(getSuggestedUnitPrice(items, line.itemId) ?? 0)}`
-                          : "No price suggestion available"}
-                      </div>
                    </TableCell>
                    <TableCell className="px-4 py-2">
                      <Input
@@ -1,3 +1,69 @@
+import Link from "next/link"
+import {
+  AlertOctagon,
+  AlertTriangle,
+  ArrowLeftRight,
+  BadgeDollarSign,
+  ClipboardList,
+  PackageSearch,
+  ScrollText,
+  SlidersHorizontal,
+  type LucideIcon,
+} from "lucide-react"
+
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+
+const areas: { title: string; description: string; href: string; icon: LucideIcon }[] = [
+  {
+    title: "Stock Enquiry",
+    description: "On-hand, available, on-hold, and in-transit quantities by item and warehouse.",
+    href: "/dashboard/stock/enquiry",
+    icon: PackageSearch,
+  },
+  {
+    title: "Stock Ledger",
+    description: "The immutable, append-only movement journal — every in/out with running balance.",
+    href: "/dashboard/stock/ledger",
+    icon: ScrollText,
+  },
+  {
+    title: "Valuation",
+    description: "FIFO cost-layer breakdown and total stock value by item and warehouse.",
+    href: "/dashboard/stock/valuation",
+    icon: BadgeDollarSign,
+  },
+  {
+    title: "Transfers",
+    description: "Move stock between warehouses: create, dispatch, and receive (in-transit).",
+    href: "/dashboard/stock/transfers",
+    icon: ArrowLeftRight,
+  },
+  {
+    title: "Adjustments",
+    description: "Increase, decrease, or write off stock with a mandatory reason code.",
+    href: "/dashboard/stock/adjustments",
+    icon: SlidersHorizontal,
+  },
+  {
+    title: "Counts",
+    description: "Cycle or full physical counts — snapshot, enter counts, post variance.",
+    href: "/dashboard/stock/counts",
+    icon: ClipboardList,
+  },
+  {
+    title: "Reorder Alerts",
+    description: "Items at or below their reorder point, with a one-click requisition.",
+    href: "/dashboard/stock/reorder-alerts",
+    icon: AlertTriangle,
+  },
+  {
+    title: "Wastage",
+    description: "Damage, theft/loss, and expiry write-offs — reason-coded adjustments with a totals report.",
+    href: "/dashboard/stock/wastage",
+    icon: AlertOctagon,
+  },
+]
+
 export default function StockHubPage() {
  return (
    <div className="flex flex-col gap-6">
@@ -7,6 +73,26 @@ export default function StockHubPage() {
          FIFO-costed stock across multiple warehouses (FR-STK-01..14).
        </p>
      </div>
+
+      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-3">
+        {areas.map((area) => (
+          <Link key={area.href} href={area.href}>
+            <Card className="h-full transition-shadow hover:shadow-md">
+              <CardHeader>
+                <div className="flex items-center gap-3">
+                  <div className="flex size-11 shrink-0 items-center justify-center rounded-xl bg-primary/10 text-primary">
+                    <area.icon className="size-5" />
+                  </div>
+                  <CardTitle className="text-lg">{area.title}</CardTitle>
+                </div>
+              </CardHeader>
+              <CardContent>
+                <p className="text-base text-muted-foreground">{area.description}</p>
+              </CardContent>
+            </Card>
+          </Link>
+        ))}
+      </div>
    </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" />
@@ -4,9 +4,6 @@ import { useEffect, useState } from "react"
 import Link from "next/link"
 import { usePathname } from "next/navigation"
 import {
-  AlertOctagon,
-  AlertTriangle,
-  ArrowLeftRight,
  Banknote,
  BadgeDollarSign,
  BookOpen,
@@ -32,7 +29,6 @@ import {
  Menu,
  Package,
  PackageCheck,
-  PackageSearch,
  PackageX,
  PlayCircle,
  PieChart,
@@ -40,7 +36,6 @@ import {
  ReceiptText,
  Ruler,
  Scale,
-  ScrollText,
  Settings,
  ShieldCheck,
  ShoppingCart,
@@ -121,26 +116,7 @@ const navItems: {
    ],
  },
  { title: "Receiving", code: "receiving", href: "/dashboard/receiving/grn", icon: PackageCheck, chevron: true },
-  {
-    title: "Stock",
-    code: "stock",
-    href: "/dashboard/stock",
-    // Clicking "Stock" itself lands on Stock Ledger — the hub page underneath has nothing on
-    // it (its card grid was removed once the sidebar grew these sub-items), same as Procurement.
-    landingHref: "/dashboard/stock/ledger",
-    icon: Warehouse,
-    chevron: true,
-    children: [
-      { title: "Stock Ledger", code: "stock.ledger", href: "/dashboard/stock/ledger", icon: ScrollText },
-      { title: "Stock Enquiry", code: "stock.enquiry", href: "/dashboard/stock/enquiry", icon: PackageSearch },
-      { title: "Valuation", code: "stock.valuation", href: "/dashboard/stock/valuation", icon: BadgeDollarSign },
-      { title: "Transfers", code: "stock.transfers", href: "/dashboard/stock/transfers", icon: ArrowLeftRight },
-      { title: "Adjustments", code: "stock.adjustments", href: "/dashboard/stock/adjustments", icon: SlidersHorizontal },
-      { title: "Counts", code: "stock.counts", href: "/dashboard/stock/counts", icon: ClipboardList },
-      { title: "Reorder Alerts", code: "stock.reorder-alerts", href: "/dashboard/stock/reorder-alerts", icon: AlertTriangle },
-      { title: "Wastage", code: "stock.wastage", href: "/dashboard/stock/wastage", icon: AlertOctagon },
-    ],
-  },
+  { title: "Stock", code: "stock", href: "/dashboard/stock", icon: Warehouse, chevron: true },
  { title: "Warehouses", code: "warehouses", href: "/dashboard/warehouse", icon: Building2, chevron: true },
  { title: "Orders", code: "orders", href: "/dashboard/orders", icon: ShoppingCart, chevron: true },
  {
@@ -426,15 +402,14 @@ export function AppSidebar() {
  // flashing the full menu to a restricted role. Once resolved, a nav item
  // is visible if its own code is granted, or (for parents) if any child is.
  //
-  // "procurement", "hrm", "sales", "production" and "stock" are exempted from that check
-  // (frontend-only): no role is currently seeded with NAV:procurement/NAV:hrm/NAV:production
-  // or their children server-side (stock's children specifically have no SubNavItem rows at
-  // all yet), which would hide the whole section for everyone. Remove each bypass once roles
-  // are granted the permission properly (Settings → Roles → Sidebar permissions) or a backend
-  // seed grants it. This is also flagged in 02-SECURITY.md as the AR-09 sidebar-visibility
+  // "procurement", "hrm", "sales" and "production" are exempted from that check (frontend-only): no
+  // role is currently seeded with NAV:procurement/NAV:hrm/NAV:production or their children
+  // server-side, which would hide the whole section for everyone. Remove each bypass once roles are granted
+  // the permission properly (Settings → Roles → Sidebar permissions) or a backend seed
+  // grants it. This is also flagged in 02-SECURITY.md as the AR-09 sidebar-visibility
  // stopgap for HRM's salary/PII data — it hides HRM from the UI but doesn't enforce
  // anything server-side.
-  const bypassCodes = new Set(["procurement", "sales", "hrm", "production", "stock"])
+  const bypassCodes = new Set(["procurement", "sales", "hrm", "production"])
  const visibleItems = loading
    ? []
    : navItems
@@ -1,6 +1,6 @@
 "use client"

-import { useEffect, useState } from "react"
+import { useState } from "react"
 import Link from "next/link"
 import { usePathname, useRouter } from "next/navigation"
 import { ArrowLeft, Bell, LogOut, Settings, User } from "lucide-react"
@@ -165,12 +165,9 @@ export function Header() {
  const [notifications, setNotifications] = useState(initialNotifications)
  const unreadCount = notifications.filter((n) => n.unread).length

-  // Read after mount so the first client render matches the server render.
-  const [user, setUser] = useState<AuthUser | null>(null)
-
-  useEffect(() => {
-    setUser(getStoredUser())
-  }, [])
+  // Read after mount, not during render: localStorage doesn't exist on the server, and
+  // reading it while rendering would desync the hydration pass.
+  const [user] = useState<AuthUser | null>(() => getStoredUser())

  const markAllAsRead = () =>
    setNotifications((prev) => prev.map((n) => ({ ...n, unread: false })))
@@ -281,18 +278,16 @@ export function Header() {
          <DropdownMenuTrigger className="flex items-center gap-2 rounded-full py-1 pr-2 pl-1 outline-none hover:bg-muted">
            <Avatar>
              <AvatarFallback className="bg-primary/10 font-semibold text-primary">
-                {user ? initials(displayName(user)) : "?"}
+                {initials(displayName(user))}
              </AvatarFallback>
            </Avatar>
            <span className="hidden text-sm font-semibold text-foreground sm:block">
-              {user ? displayName(user) : "Signed in"}
+              {displayName(user)}
            </span>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="end" className="w-80 p-2">
            <div className="px-2 py-2.5">
-              <p className="text-base font-semibold text-foreground">
-                {user ? displayName(user) : "Signed in"}
-              </p>
+              <p className="text-base font-semibold text-foreground">{displayName(user)}</p>
              {user?.email && <p className="text-sm font-normal text-muted-foreground">{user.email}</p>}
            </div>
            <DropdownMenuSeparator />
@@ -1,4 +1,4 @@
-"use client"
+"use client"

 import Link from "next/link"
 import { Lightbulb, PackageCheck } from "lucide-react"
@@ -11,7 +11,7 @@ export function FreeIssuePromotionSuggestions({ suggestion }: { suggestion: Sale
  if (!suggestion || suggestion.lines.length === 0) {
    return (
      <div className="rounded-2xl border border-dashed p-6 text-sm text-muted-foreground">
-        No free-issue suggestions were generated for this slip yet.
+        No free-issue promotion suggestions were generated for this slip yet.
      </div>
    )
  }
@@ -22,10 +22,10 @@ export function FreeIssuePromotionSuggestions({ suggestion }: { suggestion: Sale
        <div>
          <div className="inline-flex items-center gap-2 rounded-full bg-amber-500/10 px-3 py-1 text-xs font-semibold uppercase tracking-wide text-amber-700">
            <Lightbulb className="size-3.5" />
-            Suggestion only
+            Backend suggestion
          </div>
          <h2 className="mt-2 text-lg font-semibold text-foreground">Free-issue promotions</h2>
-          <p className="text-sm text-muted-foreground">These are suggestions only. You can review them before creating a free issue.</p>
+          <p className="text-sm text-muted-foreground">The server suggests reward quantities and alternate products for this slip.</p>
        </div>
        <Link href="/dashboard/sales/free-issues/new" className={cn(buttonVariants({ variant: "outline", size: "sm" }))}>
          Create free issue
@@ -40,12 +40,14 @@ export function FreeIssuePromotionSuggestions({ suggestion }: { suggestion: Sale
                <div className="font-medium text-foreground">{line.itemName}</div>
                <div className="text-sm text-muted-foreground">{line.itemSku} • Qty {line.qty}</div>
              </div>
-              <div className="rounded-full bg-primary/10 px-3 py-1 text-xs font-semibold text-primary">Free issue</div>
+              <div className="rounded-full bg-primary/10 px-3 py-1 text-xs font-semibold text-primary">
+                Buy {line.triggerQty} get {line.suggestedFreeQty} free
+              </div>
            </div>

            <div className="mt-3 flex flex-wrap gap-2 text-sm">
              {line.rewardOptions.map((option, index) => (
-                <span key={option.itemId} className={cn("inline-flex items-center gap-1 rounded-full border px-3 py-1", index === 0 && "border-primary bg-primary/5 text-primary")}>
+                <span key={option.itemId} className={cn("inline-flex items-center gap-1 rounded-full border px-3 py-1", index === 0 && "border-primary bg-primary/5 text-primary") }>
                  {index === 0 ? <PackageCheck className="size-3.5" /> : null}
                  {option.name}
                </span>
@@ -53,11 +55,11 @@ export function FreeIssuePromotionSuggestions({ suggestion }: { suggestion: Sale
            </div>

            <div className="mt-3 text-sm text-muted-foreground">
-              Free qty: <span className="font-medium text-foreground">{line.suggestedFreeQty.toFixed(2)}</span>
+              Suggested free qty: <span className="font-medium text-foreground">{line.suggestedFreeQty.toFixed(2)}</span>
            </div>
          </div>
        ))}
      </div>
    </div>
  )
-}
+}
@@ -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