Complete all for Items

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

@@ -14,8 +14,10 @@ import {
   Menu,
   Package,
   PackageCheck,
+  Ruler,
   Settings,
   ShoppingCart,
+  SlidersHorizontal,
   SwatchBook,
   Tag,
   Truck,
@@ -43,7 +45,9 @@ const navItems: {
       { title: "Item", href: "/dashboard/products", icon: Boxes },
       { title: "Category", href: "/dashboard/products/categories", icon: ListTree },
       { title: "Brand", href: "/dashboard/products/brands", icon: Tag },
-      { title: "Variant", href: "/dashboard/products/variants", icon: SwatchBook },
+      { title: "Item Type", href: "/dashboard/products/item-types", icon: SwatchBook },
+      { title: "UOM", href: "/dashboard/products/uoms", icon: Ruler },
+      { title: "Configuration", href: "/dashboard/products/settings", icon: SlidersHorizontal },
     ],
   },
   { title: "Vendors", href: "/dashboard/vendors", icon: Truck, chevron: true },

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

@@ -1,10 +1,13 @@
 "use client"
 
-import { useState } from "react"
+import { useEffect, useState } from "react"
 import Link from "next/link"
 import { usePathname, useRouter } from "next/navigation"
 import { ArrowLeft, Bell, LogOut, Settings, User } from "lucide-react"
 
+import { authApi } from "@/lib/api/auth"
+import { clearStoredUser, displayName, getStoredUser } from "@/lib/auth-session"
+import { AuthUser } from "@/types/auth"
 import { cn } from "@/lib/utils"
 import { Avatar, AvatarFallback } from "@/components/ui/avatar"
 import { Badge } from "@/components/ui/badge"
@@ -17,6 +20,14 @@ import {
 } from "@/components/ui/dropdown-menu"
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
 
+/** Avatar initials from a display name: "ERP Admin" -> "EA", "erpadmin" -> "ER". */
+function initials(name: string): string {
+  const parts = name.trim().split(/\s+/).filter(Boolean)
+  if (parts.length === 0) return "?"
+  if (parts.length === 1) return parts[0].slice(0, 2).toUpperCase()
+  return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase()
+}
+
 const PROCUREMENT_TITLES: Record<string, string> = {
   "/dashboard/procurement": "Procurement",
   "/dashboard/procurement/requisitions": "Requisitions",
@@ -69,6 +80,10 @@ function titleFromPath(pathname: string) {
   if (pathname === "/dashboard/products/new") return "New Item"
   if (pathname === "/dashboard/products/uoms") return "Units of Measure"
   if (pathname === "/dashboard/products/categories") return "Categories"
+  if (pathname.startsWith("/dashboard/products/categories/")) return "Subcategories"
+  if (pathname === "/dashboard/products/brands") return "Brands"
+  if (pathname === "/dashboard/products/item-types") return "Item Types"
+  if (pathname === "/dashboard/products/settings") return "Product Configuration"
   if (/^\/dashboard\/products\/[^/]+$/.test(pathname)) return "Item"
 
   const segment = pathname.split("/").filter(Boolean).pop() ?? "dashboard"
@@ -122,9 +137,31 @@ export function Header() {
   const [notifications, setNotifications] = useState(initialNotifications)
   const unreadCount = notifications.filter((n) => n.unread).length
 
+  // 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, setUser] = useState<AuthUser | null>(null)
+  useEffect(() => setUser(getStoredUser()), [])
+
   const markAllAsRead = () =>
     setNotifications((prev) => prev.map((n) => ({ ...n, unread: false })))
 
+  async function handleLogout() {
+    try {
+      // Always call it, even without a userId: AuthHex returns none on login, so the
+      // server resolves the user from the session token. Skipping the call would leave
+      // the erp_at cookie alive and the "logout" would be cosmetic.
+      await authApi.logout(user?.userId ?? null)
+    } catch {
+      // A failed logout must not strand the user in the app: the cookie may already be
+      // gone or upstream may be down. Clear locally and leave either way — worst case the
+      // server-side session lapses on its own.
+    } finally {
+      clearStoredUser()
+      router.push("/login")
+      router.refresh()
+    }
+  }
+
   return (
     <header className="mx-6 mt-3 mb-6 flex items-center justify-between gap-2 rounded-3xl bg-white py-4 pr-4 pl-14 shadow-sm ring-1 ring-black/5 lg:mx-8 lg:mt-4 lg:gap-4 lg:p-4">
       <div className="flex items-center gap-3">
@@ -212,17 +249,17 @@ export function Header() {
           <DropdownMenuTrigger className="flex items-center gap-2 rounded-full py-1 pr-2 pl-1 outline-none hover:bg-slate-50">
             <Avatar>
               <AvatarFallback className="bg-indigo-50 font-semibold text-indigo-600">
-                JM
+                {initials(displayName(user))}
               </AvatarFallback>
             </Avatar>
             <span className="hidden text-sm font-semibold text-slate-700 sm:block">
-              John Martinez
+              {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-slate-900">John Martinez</p>
-              <p className="text-sm font-normal text-muted-foreground">john52martinez@gmail.com</p>
+              <p className="text-base font-semibold text-slate-900">{displayName(user)}</p>
+              {user?.email && <p className="text-sm font-normal text-muted-foreground">{user.email}</p>}
             </div>
             <DropdownMenuSeparator />
             <DropdownMenuItem
@@ -242,7 +279,7 @@ export function Header() {
             <DropdownMenuSeparator />
             <DropdownMenuItem
               variant="destructive"
-              render={<Link href="/login" />}
+              onClick={handleLogout}
               className="gap-3 px-3 py-2.5 text-base [&_svg:not([class*='size-'])]:size-5"
             >
               <LogOut />

Frontend/erp-system/components/ui/switch.tsx

@@ -0,0 +1,32 @@
+"use client"
+
+import { Switch as SwitchPrimitive } from "@base-ui/react/switch"
+
+import { cn } from "@/lib/utils"
+
+function Switch({
+  className,
+  size = "default",
+  ...props
+}: SwitchPrimitive.Root.Props & {
+  size?: "sm" | "default"
+}) {
+  return (
+    <SwitchPrimitive.Root
+      data-slot="switch"
+      data-size={size}
+      className={cn(
+        "peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:bg-primary data-unchecked:bg-input dark:data-unchecked:bg-input/80 data-disabled:cursor-not-allowed data-disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <SwitchPrimitive.Thumb
+        data-slot="switch-thumb"
+        className="pointer-events-none block rounded-full bg-background ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] dark:data-checked:bg-primary-foreground group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 dark:data-unchecked:bg-foreground"
+      />
+    </SwitchPrimitive.Root>
+  )
+}
+
+export { Switch }