Refactor: Remove unused imports and clean up code across multiple pages

- Removed unused Link imports and associated code for navigation in various pages.
- Simplified TableHeader components by removing unnecessary class names.
- Updated alert dialog styles for better consistency with the design system.
- Cleaned up imports in several components to streamline the codebase.

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

@@ -3,7 +3,7 @@
 import { useEffect, useState } from "react"
 import { useParams, useRouter } from "next/navigation"
 import Link from "next/link"
-import { AlertTriangle, ArrowLeft, Ban, Plus, Save, Send, 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"
@@ -269,9 +269,6 @@ export default function PurchaseOrderDetailPage() {
     <div className="flex flex-col gap-6">
       <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
         <div className="flex items-center gap-3">
-          <Link href="/dashboard/procurement/purchase-orders" className={cn(buttonVariants({ variant: "ghost", size: "icon-lg" }))}>
-            <ArrowLeft className="size-5" />
-          </Link>
           <div>
             <div className="flex items-center gap-3">
               <h1 className="text-2xl font-bold text-foreground">{po.docNo}</h1>

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 { ArrowLeft, Plus, Trash2 } from "lucide-react"
+import { Plus, Trash2 } from "lucide-react"
 
 import { purchaseOrdersApi } from "@/lib/api/purchase-orders"
 import { requisitionsApi } from "@/lib/api/requisitions"
@@ -221,9 +221,6 @@ function NewPurchaseOrderContent() {
   return (
     <div className="flex flex-col gap-6">
       <div className="flex items-center gap-3">
-        <Link href="/dashboard/procurement/purchase-orders" className={cn(buttonVariants({ variant: "ghost", size: "icon-lg" }))}>
-          <ArrowLeft className="size-5" />
-        </Link>
         <div>
           <h1 className="text-2xl font-bold text-foreground">New Purchase Order</h1>
           <p className="text-base text-muted-foreground">Auto-approved on creation; freely editable while open (FR-PROC-03..05).</p>

Frontend/erp-system/app/dashboard/procurement/purchase-returns/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 { ArrowLeft } from "lucide-react"
+import {} from "lucide-react"
 
 import { purchaseReturnsApi } from "@/lib/api/purchase-returns"
 import { grnsApi } from "@/lib/api/grns"
@@ -156,9 +156,6 @@ function NewPurchaseReturnContent() {
   return (
     <div className="flex flex-col gap-6">
       <div className="flex items-center gap-3">
-        <Link href="/dashboard/procurement/purchase-returns" className={cn(buttonVariants({ variant: "ghost", size: "icon-lg" }))}>
-          <ArrowLeft className="size-5" />
-        </Link>
         <div>
           <h1 className="text-2xl font-bold text-foreground">New Purchase Return</h1>
           <p className="text-base text-muted-foreground">Return received goods to the vendor; posts an outbound ledger entry immediately (FR-PROC-08).</p>

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

@@ -3,7 +3,7 @@
 import { useEffect, useState } from "react"
 import { useParams } from "next/navigation"
 import Link from "next/link"
-import { ArrowLeft, FileText, Send, ShoppingCart } from "lucide-react"
+import { FileText, Send, ShoppingCart } from "lucide-react"
 
 import { requisitionsApi } from "@/lib/api/requisitions"
 import { itemsApi } from "@/lib/api/items"
@@ -74,9 +74,6 @@ export default function RequisitionDetailPage() {
     <div className="flex flex-col gap-6">
       <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
         <div className="flex items-center gap-3">
-          <Link href="/dashboard/procurement/requisitions" className={cn(buttonVariants({ variant: "ghost", size: "icon-lg" }))}>
-            <ArrowLeft className="size-5" />
-          </Link>
           <div>
             <div className="flex items-center gap-3">
               <h1 className="text-2xl font-bold text-foreground">{requisition.docNo}</h1>

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

@@ -3,7 +3,7 @@
 import { useEffect, useState } from "react"
 import { useRouter } from "next/navigation"
 import Link from "next/link"
-import { ArrowLeft, Plus, Trash2 } from "lucide-react"
+import { Plus, Trash2 } from "lucide-react"
 
 import { requisitionsApi } from "@/lib/api/requisitions"
 import { itemsApi } from "@/lib/api/items"
@@ -103,9 +103,6 @@ export default function NewRequisitionPage() {
   return (
     <div className="flex flex-col gap-6">
       <div className="flex items-center gap-3">
-        <Link href="/dashboard/procurement/requisitions" className={cn(buttonVariants({ variant: "ghost", size: "icon-lg" }))}>
-          <ArrowLeft className="size-5" />
-        </Link>
         <div>
           <h1 className="text-2xl font-bold text-foreground">New Requisition</h1>
           <p className="text-base text-muted-foreground">Request items for procurement; submit once the lines are ready (FR-PROC-01).</p>

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

@@ -3,7 +3,7 @@
 import { useEffect, useMemo, useState } from "react"
 import { useParams } from "next/navigation"
 import Link from "next/link"
-import { ArrowLeft, ShoppingCart } from "lucide-react"
+import { ShoppingCart } from "lucide-react"
 
 import { rfqsApi } from "@/lib/api/rfqs"
 import { vendorsApi } from "@/lib/api/vendors"
@@ -158,9 +158,6 @@ export default function RfqDetailPage() {
   return (
     <div className="flex flex-col gap-6">
       <div className="flex items-center gap-3">
-        <Link href="/dashboard/procurement/rfqs" className={cn(buttonVariants({ variant: "ghost", size: "icon-lg" }))}>
-          <ArrowLeft className="size-5" />
-        </Link>
         <div>
           <div className="flex items-center gap-3">
             <h1 className="text-2xl font-bold text-foreground">{rfq.docNo}</h1>

Frontend/erp-system/app/dashboard/procurement/rfqs/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 { ArrowLeft, Plus, Trash2 } from "lucide-react"
+import { Plus, Trash2 } from "lucide-react"
 
 import { rfqsApi } from "@/lib/api/rfqs"
 import { requisitionsApi } from "@/lib/api/requisitions"
@@ -149,9 +149,6 @@ function NewRfqContent() {
   return (
     <div className="flex flex-col gap-6">
       <div className="flex items-center gap-3">
-        <Link href="/dashboard/procurement/rfqs" className={cn(buttonVariants({ variant: "ghost", size: "icon-lg" }))}>
-          <ArrowLeft className="size-5" />
-        </Link>
         <div>
           <h1 className="text-2xl font-bold text-foreground">New RFQ</h1>
           <p className="text-base text-muted-foreground">

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

@@ -2,7 +2,6 @@
 
 import { useCallback, useEffect, useMemo, useState } from "react"
 import { useParams, useSearchParams } from "next/navigation"
-import Link from "next/link"
 import {
   addEdge,
   applyEdgeChanges,
@@ -20,11 +19,10 @@ import {
 } from "@xyflow/react"
 import "@xyflow/react/dist/style.css"
 import { useTheme } from "next-themes"
-import { AlertTriangle, ArrowLeft, Lock, Minus, Plus, Save, Square } from "lucide-react"
+import { AlertTriangle, Lock, Minus, Plus, Save, Square } from "lucide-react"
 
-import { cn } from "@/lib/utils"
 import { MOCK_TEMPLATE_INFO } from "@/lib/production-mock-templates"
-import { Button, buttonVariants } from "@/components/ui/button"
+import { Button } from "@/components/ui/button"
 import { toast } from "@/components/ui/toast"
 import StageNode from "./StageNode"
 import AnnotationBoxNode, { LineNodeComponent } from "./AnnotationNodes"
@@ -330,9 +328,6 @@ export default function TemplateBuilderPage() {
     <div className="flex h-[calc(100vh-8rem)] flex-col gap-4">
       <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
         <div className="flex items-center gap-3">
-          <Link href="/dashboard/production/templates" className={cn(buttonVariants({ variant: "ghost", size: "icon-lg" }))}>
-            <ArrowLeft className="size-5" />
-          </Link>
           <div>
             <h1 className="text-2xl font-bold text-foreground">{template.name}</h1>
             <p className="text-base text-muted-foreground">{stageNodes.length} stage{stageNodes.length === 1 ? "" : "s"} · {edges.length} connection{edges.length === 1 ? "" : "s"}</p>

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

@@ -3,7 +3,7 @@
 import { useEffect, useState } from "react"
 import { useParams, useRouter } from "next/navigation"
 import Link from "next/link"
-import { AlertTriangle, ArrowLeft, Save } from "lucide-react"
+import { AlertTriangle, Save } from "lucide-react"
 
 import { itemsApi } from "@/lib/api/items"
 import { categoriesApi } from "@/lib/api/categories"
@@ -183,9 +183,6 @@ export default function ItemDetailPage() {
     <div className="flex flex-col gap-6">
       <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
         <div className="flex items-center gap-3">
-          <Link href="/dashboard/products" className={cn(buttonVariants({ variant: "ghost", size: "icon-lg" }))}>
-            <ArrowLeft className="size-5" />
-          </Link>
           <div>
             <div className="flex items-center gap-3">
               <h1 className="text-2xl font-bold text-foreground">{item.sku}</h1>

Frontend/erp-system/app/dashboard/products/categories/[id]/page.tsx

@@ -1,19 +1,17 @@
 "use client"
 
 import { useEffect, useState } from "react"
-import Link from "next/link"
 import { useParams } from "next/navigation"
-import { ArrowLeft, Ban, CheckCircle2, Network, Pencil, Plus } from "lucide-react"
+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"
 import { Badge } from "@/components/ui/badge"
-import { Button, buttonVariants } from "@/components/ui/button"
+import { Button } 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"
@@ -113,9 +111,6 @@ export default function CategorySubCategoriesPage() {
     <div className="flex flex-col gap-6">
       <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
         <div className="flex items-center gap-3">
-          <Link href="/dashboard/products/categories" className={cn(buttonVariants({ variant: "ghost", size: "icon-lg" }))}>
-            <ArrowLeft className="size-5" />
-          </Link>
           <div>
             <h1 className="text-2xl font-bold text-foreground">{category ? `${category.name} — Subcategories` : "Subcategories"}</h1>
             <p className="text-base text-muted-foreground">
@@ -171,13 +166,13 @@ export default function CategorySubCategoriesPage() {
 
       {!error && subCategories !== null && subCategories.length > 0 && (
         <Table className="text-base">
-          <TableHeader className="bg-indigo-50">
-            <TableRow className="hover:bg-indigo-50">
-              <TableHead className="h-12 px-3 text-sm text-indigo-700">ID</TableHead>
-              <TableHead className="h-12 px-3 text-sm text-indigo-700">Name</TableHead>
-              <TableHead className="h-12 px-3 text-sm text-indigo-700">Status</TableHead>
-              <TableHead className="h-12 px-3 text-sm text-indigo-700">Created At</TableHead>
-              <TableHead className="h-12 px-3 text-sm text-indigo-700">Actions</TableHead>
+          <TableHeader>
+            <TableRow>
+              <TableHead className="h-12 px-3 text-sm">ID</TableHead>
+              <TableHead className="h-12 px-3 text-sm">Name</TableHead>
+              <TableHead className="h-12 px-3 text-sm">Status</TableHead>
+              <TableHead className="h-12 px-3 text-sm">Created At</TableHead>
+              <TableHead className="h-12 px-3 text-sm">Actions</TableHead>
             </TableRow>
           </TableHeader>
           <TableBody>

Frontend/erp-system/app/dashboard/products/item-types/page.tsx

@@ -1,18 +1,16 @@
 "use client"
 
 import { useEffect, useState } from "react"
-import Link from "next/link"
-import { ArrowLeft, Ban, CheckCircle2, Pencil, Plus, SwatchBook } from "lucide-react"
+import { Ban, CheckCircle2, Pencil, Plus, SwatchBook } from "lucide-react"
 
 import { itemTypesApi } from "@/lib/api/item-types"
 import { errorMessage } from "@/lib/error-map"
 import { validateItemTypeName } from "@/lib/validations/master-data"
-import { cn } from "@/lib/utils"
 import { ItemType } from "@/types/master-data"
 
 import { AlertDialog, AlertDialogContent, AlertDialogTrigger } from "@/components/ui/alert-dialog"
 import { Badge } from "@/components/ui/badge"
-import { Button, buttonVariants } from "@/components/ui/button"
+import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import { Field, FieldError, FieldGroup, FieldLabel } from "@/components/ui/field"
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
@@ -110,9 +108,6 @@ export default function ItemTypesPage() {
     <div className="flex flex-col gap-6">
       <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
         <div className="flex items-center gap-3">
-          <Link href="/dashboard/products" className={cn(buttonVariants({ variant: "ghost", size: "icon-lg" }))}>
-            <ArrowLeft className="size-5" />
-          </Link>
           <div>
             <h1 className="text-2xl font-bold text-foreground">Item Types</h1>
             <p className="text-base text-muted-foreground">
@@ -174,13 +169,13 @@ export default function ItemTypesPage() {
 
       {!error && itemTypes !== null && itemTypes.length > 0 && (
         <Table className="text-base">
-          <TableHeader className="bg-indigo-50">
-            <TableRow className="hover:bg-indigo-50">
-              <TableHead className="h-12 px-3 text-sm text-indigo-700">ID</TableHead>
-              <TableHead className="h-12 px-3 text-sm text-indigo-700">Name</TableHead>
-              <TableHead className="h-12 px-3 text-sm text-indigo-700">Status</TableHead>
-              <TableHead className="h-12 px-3 text-sm text-indigo-700">Created At</TableHead>
-              <TableHead className="h-12 px-3 text-sm text-indigo-700">Actions</TableHead>
+          <TableHeader>
+            <TableRow>
+              <TableHead className="h-12 px-3 text-sm">ID</TableHead>
+              <TableHead className="h-12 px-3 text-sm">Name</TableHead>
+              <TableHead className="h-12 px-3 text-sm">Status</TableHead>
+              <TableHead className="h-12 px-3 text-sm">Created At</TableHead>
+              <TableHead className="h-12 px-3 text-sm">Actions</TableHead>
             </TableRow>
           </TableHeader>
           <TableBody>

Frontend/erp-system/app/dashboard/products/new/page.tsx

@@ -3,7 +3,7 @@
 import { useEffect, useMemo, useState } from "react"
 import { useRouter } from "next/navigation"
 import Link from "next/link"
-import { ArrowLeft, Plus, X } from "lucide-react"
+import { Plus, X } from "lucide-react"
 
 import { itemsApi } from "@/lib/api/items"
 import { categoriesApi } from "@/lib/api/categories"
@@ -254,9 +254,6 @@ export default function NewItemPage() {
   return (
     <div className="flex flex-col gap-6">
       <div className="flex items-center gap-3">
-        <Link href="/dashboard/products" className={cn(buttonVariants({ variant: "ghost", size: "icon-lg" }))}>
-          <ArrowLeft className="size-5" />
-        </Link>
         <div>
           <h1 className="text-2xl font-bold text-foreground">New Item</h1>
           <p className="text-base text-muted-foreground">Category, subcategory, brand, and item types (FR-MD-01).</p>
@@ -532,14 +529,14 @@ export default function NewItemPage() {
             {variants.length > 0 && (
               <div className="overflow-x-auto">
                 <Table className="text-base">
-                  <TableHeader className="bg-indigo-50">
-                    <TableRow className="hover:bg-indigo-50">
+                  <TableHeader>
+                    <TableRow>
                       {activeCategories.map((cat) => (
-                        <TableHead key={cat.itemTypeId} className="h-11 px-3 text-sm text-indigo-700">{cat.name}</TableHead>
+                        <TableHead key={cat.itemTypeId} className="h-11 px-3 text-sm">{cat.name}</TableHead>
                       ))}
-                      <TableHead className="h-11 px-3 text-sm text-indigo-700">SKU</TableHead>
+                      <TableHead className="h-11 px-3 text-sm">SKU</TableHead>
                       {priceMode === "fixed" && (
-                        <TableHead className="h-11 px-3 text-sm text-indigo-700">Sale price</TableHead>
+                        <TableHead className="h-11 px-3 text-sm">Sale price</TableHead>
                       )}
                       {/* Quantity column removed 2026-07-17: there is no `initialQty` on the
                           Item contract and no initial-receipt flow — stock arrives via a GRN.

Frontend/erp-system/app/dashboard/products/settings/page.tsx

@@ -1,15 +1,12 @@
 "use client"
 
 import { useEffect, useState } from "react"
-import Link from "next/link"
-import { ArrowLeft, Package } from "lucide-react"
+import { Package } from "lucide-react"
 
 import { productConfigApi } from "@/lib/api/product-config"
 import { errorMessage } from "@/lib/error-map"
-import { cn } from "@/lib/utils"
 import { ProductConfig } from "@/types/master-data"
 
-import { buttonVariants } from "@/components/ui/button"
 import { Skeleton } from "@/components/ui/skeleton"
 import { Switch } from "@/components/ui/switch"
 import { toast } from "@/components/ui/toast"
@@ -70,9 +67,6 @@ export default function ProductSettingsPage() {
   return (
     <div className="flex flex-col gap-6">
       <div className="flex items-center gap-3">
-        <Link href="/dashboard/products" className={cn(buttonVariants({ variant: "ghost", size: "icon-lg" }))}>
-          <ArrowLeft className="size-5" />
-        </Link>
         <div>
           <h1 className="text-2xl font-bold text-foreground">Product Configuration</h1>
           <p className="text-base text-muted-foreground">

Frontend/erp-system/app/dashboard/products/uoms/page.tsx

@@ -1,16 +1,14 @@
 "use client"
 
 import { useEffect, useState } from "react"
-import Link from "next/link"
-import { ArrowLeft, Plus, Ruler } from "lucide-react"
+import { Plus, Ruler } from "lucide-react"
 
 import { uomsApi } from "@/lib/api/uoms"
 import { errorMessage, fieldErrors } from "@/lib/error-map"
 import { validateUomName } from "@/lib/validations/master-data"
-import { cn } from "@/lib/utils"
 import { Uom } from "@/types/master-data"
 
-import { Button, buttonVariants } from "@/components/ui/button"
+import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import { Field, FieldError, FieldGroup, FieldLabel } from "@/components/ui/field"
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
@@ -59,9 +57,6 @@ export default function UomsPage() {
     <div className="flex flex-col gap-6">
       <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
         <div className="flex items-center gap-3">
-          <Link href="/dashboard/products" className={cn(buttonVariants({ variant: "ghost", size: "icon-lg" }))}>
-            <ArrowLeft className="size-5" />
-          </Link>
           <div>
             <h1 className="text-2xl font-bold text-foreground">Units of Measure</h1>
             <p className="text-base text-muted-foreground">Flat UOM master, used as item base UOMs and in per-item conversions (FR-MD-02).</p>

Frontend/erp-system/app/dashboard/receiving/grn/[id]/page.tsx

@@ -3,7 +3,7 @@
 import { useEffect, useRef, useState } from "react"
 import { useParams } from "next/navigation"
 import Link from "next/link"
-import { ArrowLeft, CheckCircle2, PackageCheck, PackageX, ShieldAlert, XCircle } from "lucide-react"
+import { CheckCircle2, PackageCheck, PackageX, ShieldAlert, XCircle } from "lucide-react"
 
 import { grnsApi } from "@/lib/api/grns"
 import { warehousesApi } from "@/lib/api/warehouses"
@@ -118,9 +118,6 @@ export default function GrnDetailPage() {
     <div className="flex flex-col gap-6">
       <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
         <div className="flex items-center gap-3">
-          <Link href="/dashboard/receiving/grn" className={cn(buttonVariants({ variant: "ghost", size: "icon-lg" }))}>
-            <ArrowLeft className="size-5" />
-          </Link>
           <div>
             <div className="flex items-center gap-3">
               <h1 className="text-2xl font-bold text-foreground">{grn.docNo}</h1>

Frontend/erp-system/app/dashboard/receiving/grn/new/page.tsx

@@ -3,7 +3,7 @@
 import { useEffect, useState } from "react"
 import { useRouter } from "next/navigation"
 import Link from "next/link"
-import { ArrowLeft, ExternalLink, Plus, RefreshCw, Trash2 } from "lucide-react"
+import { ExternalLink, Plus, RefreshCw, Trash2 } from "lucide-react"
 
 import { grnsApi } from "@/lib/api/grns"
 import { purchaseOrdersApi } from "@/lib/api/purchase-orders"
@@ -303,9 +303,6 @@ export default function NewGrnPage() {
   return (
     <div className="flex flex-col gap-6">
       <div className="flex items-center gap-3">
-        <Link href="/dashboard/receiving/grn" className={cn(buttonVariants({ variant: "ghost", size: "icon-lg" }))}>
-          <ArrowLeft className="size-5" />
-        </Link>
         <div>
           <h1 className="text-2xl font-bold text-foreground">New GRN</h1>
           <p className="text-base text-muted-foreground">Receive goods against a purchase order, or record a direct receipt (FR-GRN-01/02).</p>
@@ -446,7 +443,7 @@ export default function NewGrnPage() {
               <Table className="text-base">
                 <TableHeader>
                   <TableRow>
-                    <TableHead className="h-12 w-56 px-3 text-sm">Item</TableHead>
+                    <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>
@@ -454,7 +451,7 @@ export default function NewGrnPage() {
                     <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-32 px-3 text-sm">Hold status</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>

Frontend/erp-system/app/dashboard/settings/roles/[id]/page.tsx

@@ -3,7 +3,7 @@
 import { useEffect, useState } from "react"
 import { useParams, useRouter } from "next/navigation"
 import Link from "next/link"
-import { AlertTriangle, ArrowLeft, Save } from "lucide-react"
+import { AlertTriangle, Save } from "lucide-react"
 
 import { navApi } from "@/lib/api/nav"
 import { rolesApi } from "@/lib/api/roles"
@@ -132,9 +132,6 @@ export default function RoleDetailPage() {
     <div className="flex flex-col gap-8">
       <div className="flex items-center justify-between">
         <div className="flex items-center gap-3">
-          <Link href="/dashboard/settings/roles" className={cn(buttonVariants({ variant: "ghost", size: "icon-lg" }))}>
-            <ArrowLeft className="size-5" />
-          </Link>
           <div>
             <div className="flex items-center gap-3">
               <h1 className="text-2xl font-bold text-foreground">{role.code}</h1>

Frontend/erp-system/app/dashboard/settings/users/[id]/page.tsx

@@ -3,7 +3,7 @@
 import { useEffect, useState } from "react"
 import { useParams, useRouter } from "next/navigation"
 import Link from "next/link"
-import { ArrowLeft, Save } from "lucide-react"
+import { Save } from "lucide-react"
 
 import { rolesApi } from "@/lib/api/roles"
 import { usersApi } from "@/lib/api/users"
@@ -83,9 +83,6 @@ export default function UserDetailPage() {
   return (
     <div className="flex flex-col gap-6">
       <div className="flex items-center gap-3">
-        <Link href="/dashboard/settings/users" className={cn(buttonVariants({ variant: "ghost", size: "icon-lg" }))}>
-          <ArrowLeft className="size-5" />
-        </Link>
         <div>
           <div className="flex items-center gap-3">
             <h1 className="text-2xl font-bold text-foreground">{user.username}</h1>

Frontend/erp-system/app/dashboard/stock/adjustments/new/page.tsx

@@ -2,7 +2,7 @@
 
 import { useEffect, useState } from "react"
 import Link from "next/link"
-import { ArrowLeft, CheckCircle2, Plus, Trash2 } from "lucide-react"
+import { CheckCircle2, Plus, Trash2 } from "lucide-react"
 
 import { stockAdjustmentsApi } from "@/lib/api/stock-adjustments"
 import { warehousesApi } from "@/lib/api/warehouses"
@@ -123,9 +123,6 @@ export default function NewAdjustmentPage() {
   return (
     <div className="flex flex-col gap-6">
       <div className="flex items-center gap-3">
-        <Link href="/dashboard/stock/adjustments" className={cn(buttonVariants({ variant: "ghost", size: "icon-lg" }))}>
-          <ArrowLeft className="size-5" />
-        </Link>
         <div>
           <h1 className="text-2xl font-bold text-foreground">New Adjustment</h1>
           <p className="text-base text-muted-foreground">Posts immediately on creation (FR-STK-07) — a reason code is mandatory.</p>

Frontend/erp-system/app/dashboard/stock/adjustments/page.tsx

@@ -2,7 +2,7 @@
 
 import { useEffect, useState } from "react"
 import Link from "next/link"
-import { ArrowLeft, Plus, SlidersHorizontal } from "lucide-react"
+import { Plus, SlidersHorizontal } from "lucide-react"
 
 import { stockAdjustmentsApi } from "@/lib/api/stock-adjustments"
 import { warehousesApi } from "@/lib/api/warehouses"
@@ -39,9 +39,6 @@ export default function AdjustmentsListPage() {
     <div className="flex flex-col gap-6">
       <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
         <div className="flex items-center gap-3">
-          <Link href="/dashboard/stock" className={cn(buttonVariants({ variant: "ghost", size: "icon-lg" }))}>
-            <ArrowLeft className="size-5" />
-          </Link>
           <div>
             <h1 className="text-2xl font-bold text-foreground">Stock Adjustments</h1>
             <p className="text-base text-muted-foreground">Increase, decrease, or write off stock with a reason code (FR-STK-07).</p>

Frontend/erp-system/app/dashboard/stock/counts/[id]/page.tsx

@@ -2,15 +2,14 @@
 
 import { useEffect, useState } from "react"
 import { useParams } from "next/navigation"
-import Link from "next/link"
-import { ArrowLeft, CheckCircle2, ClipboardCheck, Save } from "lucide-react"
+import { CheckCircle2, ClipboardCheck, Save } from "lucide-react"
 
 import { stockCountsApi } from "@/lib/api/stock-counts"
 import { errorMessage } from "@/lib/error-map"
 import { cn } from "@/lib/utils"
 import { PostCountResponse, StockCount } from "@/types/stock"
 
-import { Button, buttonVariants } from "@/components/ui/button"
+import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import { Skeleton } from "@/components/ui/skeleton"
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
@@ -91,9 +90,6 @@ export default function CountDetailPage() {
     <div className="flex flex-col gap-6">
       <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
         <div className="flex items-center gap-3">
-          <Link href="/dashboard/stock/counts" className={cn(buttonVariants({ variant: "ghost", size: "icon-lg" }))}>
-            <ArrowLeft className="size-5" />
-          </Link>
           <div>
             <div className="flex items-center gap-3">
               <h1 className="text-2xl font-bold text-foreground">{count.docNo}</h1>

Frontend/erp-system/app/dashboard/stock/counts/new/page.tsx

@@ -3,7 +3,7 @@
 import { useEffect, useState } from "react"
 import { useRouter } from "next/navigation"
 import Link from "next/link"
-import { ArrowLeft } from "lucide-react"
+import {} from "lucide-react"
 
 import { stockCountsApi } from "@/lib/api/stock-counts"
 import { warehousesApi } from "@/lib/api/warehouses"
@@ -82,9 +82,6 @@ export default function NewCountPage() {
   return (
     <div className="flex flex-col gap-6">
       <div className="flex items-center gap-3">
-        <Link href="/dashboard/stock/counts" className={cn(buttonVariants({ variant: "ghost", size: "icon-lg" }))}>
-          <ArrowLeft className="size-5" />
-        </Link>
         <div>
           <h1 className="text-2xl font-bold text-foreground">New Count</h1>
           <p className="text-base text-muted-foreground">System quantities are snapshotted immediately; enter counted quantities next.</p>

Frontend/erp-system/app/dashboard/stock/counts/page.tsx

@@ -2,7 +2,7 @@
 
 import { useEffect, useState } from "react"
 import Link from "next/link"
-import { ArrowLeft, ClipboardList, Plus } from "lucide-react"
+import { ClipboardList, Plus } from "lucide-react"
 
 import { stockCountsApi } from "@/lib/api/stock-counts"
 import { warehousesApi } from "@/lib/api/warehouses"
@@ -36,9 +36,6 @@ export default function CountsListPage() {
     <div className="flex flex-col gap-6">
       <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
         <div className="flex items-center gap-3">
-          <Link href="/dashboard/stock" className={cn(buttonVariants({ variant: "ghost", size: "icon-lg" }))}>
-            <ArrowLeft className="size-5" />
-          </Link>
           <div>
             <h1 className="text-2xl font-bold text-foreground">Stock Counts</h1>
             <p className="text-base text-muted-foreground">Cycle or full physical counts (FR-STK-08).</p>

Frontend/erp-system/app/dashboard/stock/enquiry/page.tsx

@@ -2,17 +2,15 @@
 
 import { useEffect, useMemo, useState } from "react"
 import Link from "next/link"
-import { ArrowLeft, PackageSearch, Search } from "lucide-react"
+import { PackageSearch, Search } from "lucide-react"
 
 import { stockApi } from "@/lib/api/stock"
 import { itemsApi } from "@/lib/api/items"
 import { warehousesApi } from "@/lib/api/warehouses"
 import { errorMessage } from "@/lib/error-map"
-import { cn } from "@/lib/utils"
 import { OnHand } from "@/types/stock"
 import { ItemListItem, Warehouse } from "@/types/master-data"
 
-import { buttonVariants } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import { Skeleton } from "@/components/ui/skeleton"
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
@@ -59,9 +57,6 @@ export default function StockEnquiryPage() {
   return (
     <div className="flex flex-col gap-6">
       <div className="flex items-center gap-3">
-        <Link href="/dashboard/stock" className={cn(buttonVariants({ variant: "ghost", size: "icon-lg" }))}>
-          <ArrowLeft className="size-5" />
-        </Link>
         <div>
           <h1 className="text-2xl font-bold text-foreground">Stock Enquiry</h1>
           <p className="text-base text-muted-foreground">On-hand, available, on-hold, and in-transit by item and warehouse (FR-STK-12).</p>

Frontend/erp-system/app/dashboard/stock/ledger/page.tsx

@@ -1,8 +1,7 @@
 "use client"
 
 import { useEffect, useMemo, useState } from "react"
-import Link from "next/link"
-import { ArrowLeft, ChevronLeft, ChevronRight, ScrollText } from "lucide-react"
+import { ChevronLeft, ChevronRight, ScrollText } from "lucide-react"
 
 import { stockApi } from "@/lib/api/stock"
 import { itemsApi } from "@/lib/api/items"
@@ -13,7 +12,7 @@ import { LedgerEntry } from "@/types/stock"
 import { PaginationMeta } from "@/types/common"
 import { ItemListItem, Warehouse } from "@/types/master-data"
 
-import { Button, buttonVariants } from "@/components/ui/button"
+import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
 import { Skeleton } from "@/components/ui/skeleton"
@@ -81,9 +80,6 @@ export default function StockLedgerPage() {
   return (
     <div className="flex flex-col gap-6">
       <div className="flex items-center gap-3">
-        <Link href="/dashboard/stock" className={cn(buttonVariants({ variant: "ghost", size: "icon-lg" }))}>
-          <ArrowLeft className="size-5" />
-        </Link>
         <div>
           <h1 className="text-2xl font-bold text-foreground">Stock Ledger</h1>
           <p className="text-base text-muted-foreground">Immutable, append-only movement journal (FR-STK-01).</p>

Frontend/erp-system/app/dashboard/stock/reorder-alerts/page.tsx

@@ -1,18 +1,16 @@
 "use client"
 
 import { useEffect, useMemo, useState } from "react"
-import Link from "next/link"
-import { AlertTriangle, ArrowLeft, CheckCircle2 } from "lucide-react"
+import { AlertTriangle, CheckCircle2 } from "lucide-react"
 
 import { stockApi } from "@/lib/api/stock"
 import { itemsApi } from "@/lib/api/items"
 import { warehousesApi } from "@/lib/api/warehouses"
 import { errorMessage } from "@/lib/error-map"
-import { cn } from "@/lib/utils"
 import { ReorderAlert } from "@/types/stock"
 import { ItemListItem, Warehouse } from "@/types/master-data"
 
-import { Button, buttonVariants } from "@/components/ui/button"
+import { Button } from "@/components/ui/button"
 import { Skeleton } from "@/components/ui/skeleton"
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
 import { toast } from "@/components/ui/toast"
@@ -59,9 +57,6 @@ export default function ReorderAlertsPage() {
   return (
     <div className="flex flex-col gap-6">
       <div className="flex items-center gap-3">
-        <Link href="/dashboard/stock" className={cn(buttonVariants({ variant: "ghost", size: "icon-lg" }))}>
-          <ArrowLeft className="size-5" />
-        </Link>
         <div>
           <h1 className="text-2xl font-bold text-foreground">Reorder Alerts</h1>
           <p className="text-base text-muted-foreground">Items at or below their reorder point (FR-STK-10).</p>

Frontend/erp-system/app/dashboard/stock/transfers/[id]/page.tsx

@@ -2,15 +2,13 @@
 
 import { useEffect, useState } from "react"
 import { useParams } from "next/navigation"
-import Link from "next/link"
-import { ArrowLeft, CheckCircle2, PackageCheck, Truck } from "lucide-react"
+import { CheckCircle2, PackageCheck, Truck } from "lucide-react"
 
 import { stockTransfersApi } from "@/lib/api/stock-transfers"
 import { errorMessage } from "@/lib/error-map"
-import { cn } from "@/lib/utils"
 import { DispatchTransferResponse, ReceiveTransferResponse, StockTransfer } from "@/types/stock"
 
-import { Button, buttonVariants } from "@/components/ui/button"
+import { Button } from "@/components/ui/button"
 import { Skeleton } from "@/components/ui/skeleton"
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
 import { toast } from "@/components/ui/toast"
@@ -85,9 +83,6 @@ export default function TransferDetailPage() {
     <div className="flex flex-col gap-6">
       <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
         <div className="flex items-center gap-3">
-          <Link href="/dashboard/stock/transfers" className={cn(buttonVariants({ variant: "ghost", size: "icon-lg" }))}>
-            <ArrowLeft className="size-5" />
-          </Link>
           <div>
             <div className="flex items-center gap-3">
               <h1 className="text-2xl font-bold text-foreground">{transfer.docNo}</h1>

Frontend/erp-system/app/dashboard/stock/transfers/new/page.tsx

@@ -3,7 +3,7 @@
 import { useEffect, useState } from "react"
 import { useRouter } from "next/navigation"
 import Link from "next/link"
-import { ArrowLeft, Plus, Trash2 } from "lucide-react"
+import { Plus, Trash2 } from "lucide-react"
 
 import { stockTransfersApi } from "@/lib/api/stock-transfers"
 import { warehousesApi } from "@/lib/api/warehouses"
@@ -138,9 +138,6 @@ export default function NewTransferPage() {
   return (
     <div className="flex flex-col gap-6">
       <div className="flex items-center gap-3">
-        <Link href="/dashboard/stock/transfers" className={cn(buttonVariants({ variant: "ghost", size: "icon-lg" }))}>
-          <ArrowLeft className="size-5" />
-        </Link>
         <div>
           <h1 className="text-2xl font-bold text-foreground">New Transfer</h1>
           <p className="text-base text-muted-foreground">Create a transfer, then dispatch and receive it (FR-STK-05).</p>

Frontend/erp-system/app/dashboard/stock/transfers/page.tsx

@@ -2,7 +2,7 @@
 
 import { useEffect, useState } from "react"
 import Link from "next/link"
-import { ArrowLeft, ArrowLeftRight, Plus } from "lucide-react"
+import { ArrowLeftRight, Plus } from "lucide-react"
 
 import { stockTransfersApi } from "@/lib/api/stock-transfers"
 import { warehousesApi } from "@/lib/api/warehouses"
@@ -36,9 +36,6 @@ export default function TransfersListPage() {
     <div className="flex flex-col gap-6">
       <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
         <div className="flex items-center gap-3">
-          <Link href="/dashboard/stock" className={cn(buttonVariants({ variant: "ghost", size: "icon-lg" }))}>
-            <ArrowLeft className="size-5" />
-          </Link>
           <div>
             <h1 className="text-2xl font-bold text-foreground">Stock Transfers</h1>
             <p className="text-base text-muted-foreground">Move stock between warehouses (FR-STK-05/06).</p>

Frontend/erp-system/app/dashboard/stock/valuation/page.tsx

@@ -2,18 +2,15 @@
 
 import { Suspense, useEffect, useMemo, useState } from "react"
 import { useRouter, useSearchParams } from "next/navigation"
-import Link from "next/link"
-import { ArrowLeft, BadgeDollarSign } from "lucide-react"
+import { BadgeDollarSign } from "lucide-react"
 
 import { stockApi } from "@/lib/api/stock"
 import { itemsApi } from "@/lib/api/items"
 import { warehousesApi } from "@/lib/api/warehouses"
 import { errorMessage } from "@/lib/error-map"
-import { cn } from "@/lib/utils"
 import { Valuation } from "@/types/stock"
 import { ItemListItem, Warehouse } from "@/types/master-data"
 
-import { buttonVariants } from "@/components/ui/button"
 import { Label } from "@/components/ui/label"
 import { Skeleton } from "@/components/ui/skeleton"
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
@@ -65,9 +62,6 @@ function ValuationContent() {
   return (
     <div className="flex flex-col gap-6">
       <div className="flex items-center gap-3">
-        <Link href="/dashboard/stock" className={cn(buttonVariants({ variant: "ghost", size: "icon-lg" }))}>
-          <ArrowLeft className="size-5" />
-        </Link>
         <div>
           <h1 className="text-2xl font-bold text-foreground">Valuation</h1>
           <p className="text-base text-muted-foreground">FIFO cost-layer breakdown and total stock value (FR-STK-04).</p>

Frontend/erp-system/app/dashboard/stock/wastage/new/page.tsx

@@ -2,7 +2,7 @@
 
 import { useEffect, useState } from "react"
 import Link from "next/link"
-import { AlertOctagon, ArrowLeft, CheckCircle2 } from "lucide-react"
+import { AlertOctagon, CheckCircle2 } from "lucide-react"
 
 import { isWastageReasonCode, wastageApi } from "@/lib/api/wastage"
 import { reasonCodesApi } from "@/lib/api/reason-codes"
@@ -99,9 +99,6 @@ export default function NewWastagePage() {
   return (
     <div className="flex flex-col gap-6">
       <div className="flex items-center gap-3">
-        <Link href="/dashboard/stock/wastage" className={cn(buttonVariants({ variant: "ghost", size: "icon-lg" }))}>
-          <ArrowLeft className="size-5" />
-        </Link>
         <div>
           <h1 className="text-2xl font-bold text-foreground">Record Wastage</h1>
           <p className="text-base text-muted-foreground">Posts immediately as a stock adjustment (FR-STK-07) — a reason code is mandatory.</p>

Frontend/erp-system/app/dashboard/stock/wastage/page.tsx

@@ -2,7 +2,7 @@
 
 import { useEffect, useMemo, useState } from "react"
 import Link from "next/link"
-import { AlertOctagon, ArrowLeft, Plus } from "lucide-react"
+import { AlertOctagon, Plus } from "lucide-react"
 
 import { isWastageReasonCode, wastageApi, WastageRecord } from "@/lib/api/wastage"
 import { reasonCodesApi } from "@/lib/api/reason-codes"
@@ -68,9 +68,6 @@ export default function WastagePage() {
     <div className="flex flex-col gap-6">
       <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
         <div className="flex items-center gap-3">
-          <Link href="/dashboard/stock" className={cn(buttonVariants({ variant: "ghost", size: "icon-lg" }))}>
-            <ArrowLeft className="size-5" />
-          </Link>
           <div>
             <h1 className="text-2xl font-bold text-foreground">Wastage</h1>
             <p className="text-base text-muted-foreground">

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

@@ -3,7 +3,7 @@
 import { useEffect, useState } from "react"
 import { useParams, useRouter } from "next/navigation"
 import Link from "next/link"
-import { AlertTriangle, ArrowLeft, Save } from "lucide-react"
+import { AlertTriangle, Save } from "lucide-react"
 
 import { vendorsApi } from "@/lib/api/vendors"
 import { errorMessage, fieldErrors } from "@/lib/error-map"
@@ -132,9 +132,6 @@ export default function VendorDetailPage() {
     <div className="flex flex-col gap-6">
       <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
         <div className="flex items-center gap-3">
-          <Link href="/dashboard/vendors" className={cn(buttonVariants({ variant: "ghost", size: "icon-lg" }))}>
-            <ArrowLeft className="size-5" />
-          </Link>
           <div>
             <div className="flex items-center gap-3">
               <h1 className="text-2xl font-bold text-foreground">{vendor.code}</h1>

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

@@ -2,15 +2,13 @@
 
 import { useEffect, useState } from "react"
 import { useParams } from "next/navigation"
-import Link from "next/link"
-import { ArrowLeft, MapPinned, Plus } from "lucide-react"
+import { MapPinned, Plus } from "lucide-react"
 
 import { warehousesApi } from "@/lib/api/warehouses"
 import { errorMessage, fieldErrors } from "@/lib/error-map"
-import { cn } from "@/lib/utils"
 import { Bin, Warehouse } from "@/types/master-data"
 
-import { Button, buttonVariants } from "@/components/ui/button"
+import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import { Field, FieldError, FieldGroup, FieldLabel } from "@/components/ui/field"
 import {
@@ -90,9 +88,6 @@ export default function WarehouseDetailPage() {
     <div className="flex flex-col gap-6">
       <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
         <div className="flex items-center gap-3">
-          <Link href="/dashboard/warehouse" className={cn(buttonVariants({ variant: "ghost", size: "icon-lg" }))}>
-            <ArrowLeft className="size-5" />
-          </Link>
           <div>
             <h1 className="text-2xl font-bold text-foreground">{warehouse.code}</h1>
             <p className="text-base text-muted-foreground">{warehouse.name} · Bin/location structure (FR-WH-01, FR-MD-07)</p>

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

@@ -2,14 +2,13 @@
 
 import { useEffect, useState } from "react"
 import Link from "next/link"
-import { ArrowLeft, Plus, Warehouse as WarehouseIcon } from "lucide-react"
+import { Plus, Warehouse as WarehouseIcon } from "lucide-react"
 
 import { warehousesApi } from "@/lib/api/warehouses"
 import { errorMessage } from "@/lib/error-map"
-import { cn } from "@/lib/utils"
 import { Bin, Warehouse } from "@/types/master-data"
 
-import { Button, buttonVariants } from "@/components/ui/button"
+import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import { Field, FieldError, FieldGroup, FieldLabel } from "@/components/ui/field"
 import {
@@ -100,9 +99,6 @@ export default function WarehousesPage() {
     <div className="flex flex-col gap-6">
       <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
         <div className="flex items-center gap-3">
-          <Link href="/dashboard" className={cn(buttonVariants({ variant: "ghost", size: "icon-lg" }))}>
-            <ArrowLeft className="size-5" />
-          </Link>
           <div>
             <h1 className="text-2xl font-bold text-foreground">Warehouses</h1>
             <p className="text-base text-muted-foreground">Multi-warehouse master data with per-warehouse bin/location structure (FR-WH-01, FR-MD-07).</p>