feat: add ItemOverviewDto for enriched item data in items list

feat: implement CustomerDetailPage for detailed customer view and editing

feat: create CustomersPage for listing and managing customers with filters

feat: add ColumnsMenu component for customizable table columns visibility

feat: implement CSV export functionality for data download

feat: add customer code generation logic for unique customer identifiers

Frontend/erp-system/components/Layouts/AppSidebar.tsx

@@ -116,8 +116,6 @@ const navItems: {
       { title: "Purchase Orders", code: "procurement.purchase-orders", href: "/dashboard/procurement/purchase-orders", icon: ShoppingCart },
       { title: "Purchase Returns", code: "procurement.purchase-returns", href: "/dashboard/procurement/purchase-returns", icon: PackageX },
       { title: "Vendors", code: "procurement.vendors", href: "/dashboard/vendors", icon: Truck },
-      { title: "Requisitions", code: "procurement.requisitions", href: "/dashboard/procurement/requisitions", icon: ClipboardList },
-      { title: "RFQs", code: "procurement.rfqs", href: "/dashboard/procurement/rfqs", icon: FileText },
     ],
   },
   {
@@ -129,6 +127,9 @@ const navItems: {
     chevron: true,
     children: [
       { title: "Sales", code: "sales.invoices", href: "/dashboard/sales/invoices", icon: FileText },
+      // Reuses the sales.invoices permission code — customers aren't yet their own
+      // seeded NavItem/Permission on the backend, so this rides along with Sales access.
+      { title: "Customers", code: "sales.invoices", href: "/dashboard/customers", icon: Users },
       { title: "Bundle Templates", code: "sales.bundle-templates", href: "/dashboard/sales/bundles/templates", icon: LayoutList },
       { title: "Free Issues", code: "sales.free-issues", href: "/dashboard/sales/free-issues", icon: PackageX },
       { title: "Day End", code: "sales.day-end", href: "/dashboard/sales/day-end", icon: Lock },

Frontend/erp-system/components/ui/columns-menu.tsx

@@ -0,0 +1,54 @@
+"use client"
+
+import { Columns3 } from "lucide-react"
+
+import { Button } from "@/components/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+
+export interface ColumnOption {
+  key: string
+  label: string
+  /** Columns that must always show (e.g. the name column) omit onToggle to stay unchecked-disabled. */
+  required?: boolean
+}
+
+/** "Columns" button + checklist dropdown for showing/hiding optional table columns. */
+export function ColumnsMenu({
+  columns,
+  visible,
+  onToggle,
+}: {
+  columns: ColumnOption[]
+  visible: Record<string, boolean>
+  onToggle: (key: string, next: boolean) => void
+}) {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger render={<Button variant="outline" size="lg" />}>
+        <Columns3 className="size-4" />
+        Columns
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="min-w-48">
+        <DropdownMenuLabel>Show columns</DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        {columns.map((col) => (
+          <DropdownMenuCheckboxItem
+            key={col.key}
+            checked={col.required ? true : (visible[col.key] ?? true)}
+            onCheckedChange={(checked) => !col.required && onToggle(col.key, checked === true)}
+            disabled={col.required}
+          >
+            {col.label}
+          </DropdownMenuCheckboxItem>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}