feat: enhance purchase orders management with delete and approve actions

- Added delete and approve functionality for purchase orders in the procurement dashboard.
- Integrated toast notifications for user feedback on actions.
- Updated the purchase orders table to include action buttons for viewing, editing, approving, and deleting orders.

refactor: improve stage editor panel UI and functionality

- Refactored StageEditorPanel to use a dialog for better user experience.
- Enhanced input handling and added custom fields management.
- Improved layout and organization of inputs and outputs sections.

fix: streamline template builder page layout

- Adjusted layout of the template builder page for better responsiveness and usability.
- Ensured the StageEditorPanel is displayed correctly when a node is selected.

feat: implement vendor code generation logic

- Created a new utility function to generate unique vendor codes based on the vendor name.
- Updated the vendor creation form to auto-generate vendor codes and display them to the user.
- Removed manual vendor code input requirement, improving user experience and reducing errors.

Frontend/erp-system/app/dashboard/procurement/purchase-orders/[id]/page.tsx

@@ -3,7 +3,11 @@
 import { useEffect, useState } from "react"
 import { useParams, useRouter } from "next/navigation"
 import Link from "next/link"
+<<<<<<< HEAD
 import { AlertTriangle, Ban, Plus, Save, Send, Trash2 } from "lucide-react"
+=======
+import { AlertTriangle, ArrowLeft, Ban, Check, Plus, Save, Trash2 } from "lucide-react"
+>>>>>>> 5d0ea3f (feat: enhance purchase orders management with delete and approve actions)
 
 import { isPoEditable, purchaseOrdersApi } from "@/lib/api/purchase-orders"
 import { warehousesApi } from "@/lib/api/warehouses"
@@ -195,10 +199,10 @@ export default function PurchaseOrderDetailPage() {
       const updated = await purchaseOrdersApi.submit(po.poId)
       setPo(updated)
       setLines(toDraftLines(updated))
-      toast.success("Purchase order submitted", `${updated.docNo} — now ${updated.status} and locked for editing.`)
+      toast.success("Purchase order approved", `${updated.docNo} — now ${updated.status} and locked for editing.`)
     } catch (err) {
       setSaveError(errorMessage(err))
-      toast.error("Could not submit purchase order", errorMessage(err))
+      toast.error("Could not approve purchase order", errorMessage(err))
     } finally {
       setSubmitting(false)
     }
@@ -283,9 +287,9 @@ export default function PurchaseOrderDetailPage() {
         <div className="flex flex-wrap items-center gap-3">
           {po.status === "Draft" && (
             <>
-              <Button variant="outline" size="lg" onClick={handleSubmitPo} disabled={submitting || deleting}>
+              <Button variant="success" size="lg" onClick={handleSubmitPo} disabled={submitting || deleting}>
-                <Send className="size-5" />
+                <Check className="size-5" />
-                {submitting ? "Submitting…" : "Submit"}
+                {submitting ? "Approving…" : "Approve"}
               </Button>
               <Button variant="destructive" size="lg" onClick={handleDelete} disabled={deleting || submitting}>
                 <Trash2 className="size-5" />

Frontend/erp-system/app/dashboard/procurement/purchase-orders/new/page.tsx

@@ -3,7 +3,7 @@
 import { Suspense, useEffect, useState } from "react"
 import { useRouter, useSearchParams } from "next/navigation"
 import Link from "next/link"
-import { Plus, Trash2 } from "lucide-react"
+import { ArrowLeft, ExternalLink, Plus, Trash2 } from "lucide-react"
 
 import { purchaseOrdersApi } from "@/lib/api/purchase-orders"
 import { requisitionsApi } from "@/lib/api/requisitions"
@@ -15,13 +15,22 @@ 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"
@@ -73,22 +82,83 @@ 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([
-      itemsApi.list({ pageSize: 200, status: "Active" }),
+      loadItems(),
-      uomsApi.list(),
+      uomsApi.list().then((uo) => setUoms(uo.items)),
-      warehousesApi.list(),
+      warehousesApi.list().then((wh) => setWarehouses(wh.items)),
-      vendorsApi.list({ pageSize: 200, status: "Active" }),
+      loadVendors(),
-    ])
+    ]).catch((err) => setLoadError(errorMessage(err)))
-      .then(([it, uo, wh, ve]) => {
+    // eslint-disable-next-line react-hooks/exhaustive-deps
-        setItems(it.items)
-        setUoms(uo.items)
-        setWarehouses(wh.items)
-        setVendors(ve.items)
-      })
-      .catch((err) => setLoadError(errorMessage(err)))
   }, [])
 
+  // 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,
+      })
+      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)
+    }
+  }
+
   useEffect(() => {
     if (requisitionId) {
       requisitionsApi
@@ -236,43 +306,72 @@ function NewPurchaseOrderContent() {
       {!loading && (
         <>
           <div className="grid grid-cols-1 gap-4 sm:grid-cols-4">
-            <div className="flex flex-col gap-2">
+            <div className="flex flex-col gap-2 sm:col-span-2">
-              <Label className="text-base">Vendor code</Label>
+              <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, value: v.vendorId }))}
+                  items={(vendors ?? []).map((v) => ({ label: `${v.code} — ${v.name}`, value: v.vendorId }))}
                 >
                   <SelectTrigger className="h-12! w-full text-base">
-                  <SelectValue placeholder="Select vendor code" />
+                    <SelectValue placeholder="Select vendor" />
                   </SelectTrigger>
                   <SelectContent>
                     {(vendors ?? []).map((v) => (
                       <SelectItem key={v.vendorId} value={v.vendorId} className="text-base">
-                      {v.code}
+                        {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 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>
@@ -287,11 +386,23 @@ 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>
+            </div>
 
             {lines.length > 0 && (
               <div className="overflow-x-auto">

Frontend/erp-system/app/dashboard/procurement/purchase-orders/page.tsx

@@ -2,9 +2,9 @@
 
 import { useEffect, useState } from "react"
 import Link from "next/link"
-import { ChevronLeft, ChevronRight, Plus, ShoppingCart } from "lucide-react"
+import { Check, ChevronLeft, ChevronRight, Eye, Pencil, Plus, ShoppingCart, Trash2 } from "lucide-react"
 
-import { purchaseOrdersApi } from "@/lib/api/purchase-orders"
+import { isPoEditable, 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,6 +16,7 @@ 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"
@@ -32,6 +33,8 @@ 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)
@@ -60,6 +63,34 @@ 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 (
@@ -133,10 +164,13 @@ 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) => (
+              {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">
@@ -149,8 +183,57 @@ export default function PurchaseOrdersListPage() {
                     </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>
-              ))}
+                )
+              })}
             </TableBody>
           </Table>
 

Frontend/erp-system/app/dashboard/production/templates/[id]/StageEditorPanel.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { Plus, Trash2, X } from "lucide-react"
+import { Plus, Trash2 } from "lucide-react"
 
 import { cn } from "@/lib/utils"
 import { CustomFieldType, StageInputSource } from "@/types/production"
@@ -15,6 +15,7 @@ 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"
@@ -175,13 +176,11 @@ export function StageEditorPanel({
   }
 
   return (
-    <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">
+    <Dialog open onOpenChange={(next) => !next && onClose()}>
-      <div className="mb-4 flex items-center justify-between">
+      <DialogContent className="max-h-[85vh] w-full max-w-lg overflow-y-auto sm:max-w-lg">
-        <h2 className="text-base font-bold text-foreground">Stage editor</h2>
+        <DialogHeader>
-        <button type="button" onClick={onClose} className="text-muted-foreground hover:text-foreground" aria-label="Close panel">
+          <DialogTitle>Stage editor</DialogTitle>
-          <X className="size-5" />
+        </DialogHeader>
-        </button>
-      </div>
 
         <div className="flex flex-col gap-4">
           <Field>
@@ -434,6 +433,7 @@ export function StageEditorPanel({
             </Button>
           )}
         </div>
-    </div>
+      </DialogContent>
+    </Dialog>
   )
 }

Frontend/erp-system/app/dashboard/production/templates/[id]/page.tsx

@@ -765,8 +765,7 @@ export default function TemplateBuilderPage() {
         </div>
       )}
 
-      <div className="flex min-h-0 flex-1 gap-4">
+      <div className="min-h-0 flex-1 overflow-hidden rounded-2xl bg-muted ring-1 ring-foreground/10">
-        <div className="min-w-0 flex-1 overflow-hidden rounded-2xl bg-muted ring-1 ring-foreground/10">
         {mounted && (
           <ReactFlow
             nodes={displayNodes}
@@ -805,6 +804,5 @@ export default function TemplateBuilderPage() {
         />
       )}
     </div>
-    </div>
   )
 }

Frontend/erp-system/app/dashboard/vendors/page.tsx

@@ -5,8 +5,9 @@ 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, fieldErrors } from "@/lib/error-map"
+import { errorMessage } 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"
 
@@ -44,7 +45,6 @@ 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,8 +52,14 @@ 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)
@@ -75,8 +81,11 @@ 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("")
@@ -86,7 +95,6 @@ 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)
@@ -94,14 +102,15 @@ export default function VendorsPage() {
 
     setSubmitting(true)
     try {
-      const result = await vendorsApi.create({ code, name, terms: terms || null, taxReg: taxReg || null, currency })
+      const result = await vendorsApi.create({ code: generatedCode, 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) {
-      const fe = fieldErrors(err)
+      // A 409 here means another creation raced ours for the same generated code — the
-      if (fe?.code) setErrors({ code: fe.code })
+      // proactive de-dupe above only knows about codes loaded when the dialog opened.
       toast.error("Could not create vendor", errorMessage(err))
     } finally {
       setSubmitting(false)
@@ -145,19 +154,18 @@ 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.</DialogDescription>
+              <DialogDescription>Create a supplier record. Its code is generated from the name.</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" />

Frontend/erp-system/lib/vendor-code.ts

@@ -0,0 +1,18 @@
+/** 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}`
+}