123 lines
4.5 KiB
TypeScript
123 lines
4.5 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { usePathname } from "next/navigation";
|
|
import {
|
|
LayoutDashboard,
|
|
Cpu,
|
|
Package,
|
|
ClipboardList,
|
|
Factory,
|
|
History,
|
|
Users,
|
|
Truck,
|
|
Building2,
|
|
ClipboardCheck,
|
|
Settings,
|
|
LogOut,
|
|
} from "lucide-react";
|
|
import { cn } from "@/lib/utils";
|
|
import { useAuth } from "@/contexts/auth-context";
|
|
import { Button } from "@/components/ui/button";
|
|
|
|
const navItems = [
|
|
{ href: "/", label: "Dashboard", icon: LayoutDashboard, section: "dashboard" },
|
|
{ href: "/customers", label: "Customers & Orders", icon: Users, section: "customers" },
|
|
{ href: "/suppliers", label: "Suppliers", icon: Building2, section: "suppliers" },
|
|
{ href: "/products", label: "Products", icon: Package, section: "products" },
|
|
{ href: "/components", label: "Components", icon: Cpu, section: "components" },
|
|
{ href: "/bom", label: "Bill of Materials", icon: ClipboardList, section: "products" },
|
|
{ href: "/stock-history", label: "Purchase History", icon: History, section: "stock-history" },
|
|
{ href: "/production", label: "Production Planning", icon: Factory, section: "production" },
|
|
{ href: "/logistics", label: "Logistics", icon: Truck, section: "logistics" },
|
|
{ href: "/stock-take", label: "Stock Take", icon: ClipboardCheck, section: "stock-take" },
|
|
];
|
|
|
|
export function AppSidebar() {
|
|
const pathname = usePathname();
|
|
const { user, logout, canAccessSection } = useAuth();
|
|
|
|
// Filter nav items based on user permissions
|
|
const visibleNavItems = navItems.filter((item) => canAccessSection(item.section));
|
|
|
|
return (
|
|
<aside className="flex h-screen w-64 flex-shrink-0 flex-col bg-sidebar text-sidebar-foreground">
|
|
<div className="flex h-16 items-center gap-3 border-b border-sidebar-border px-6">
|
|
<Cpu className="h-7 w-7 text-sidebar-primary" />
|
|
<div>
|
|
<h1 className="text-base font-bold tracking-tight text-sidebar-primary-foreground">
|
|
Linse
|
|
</h1>
|
|
<p className="text-xs text-sidebar-foreground/60">Component Manager</p>
|
|
</div>
|
|
</div>
|
|
<nav className="flex-1 px-3 py-4 overflow-y-auto">
|
|
<ul className="flex flex-col gap-1">
|
|
{visibleNavItems.map((item) => {
|
|
const isActive =
|
|
pathname === item.href ||
|
|
(item.href !== "/" && pathname.startsWith(item.href));
|
|
return (
|
|
<li key={item.href}>
|
|
<Link
|
|
href={item.href}
|
|
className={cn(
|
|
"flex items-center gap-3 rounded-md px-3 py-2.5 text-base font-medium transition-colors",
|
|
isActive
|
|
? "bg-sidebar-accent text-sidebar-primary"
|
|
: "text-sidebar-foreground/70 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
|
|
)}
|
|
>
|
|
<item.icon className="h-5 w-5" />
|
|
{item.label}
|
|
</Link>
|
|
</li>
|
|
);
|
|
})}
|
|
|
|
{/* Settings - Admin Only */}
|
|
{user?.role === "admin" && (
|
|
<li className="mt-4 pt-4 border-t border-sidebar-border">
|
|
<Link
|
|
href="/settings"
|
|
className={cn(
|
|
"flex items-center gap-3 rounded-md px-3 py-2.5 text-base font-medium transition-colors",
|
|
pathname === "/settings"
|
|
? "bg-sidebar-accent text-sidebar-primary"
|
|
: "text-sidebar-foreground/70 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
|
|
)}
|
|
>
|
|
<Settings className="h-5 w-5" />
|
|
Settings
|
|
</Link>
|
|
</li>
|
|
)}
|
|
</ul>
|
|
</nav>
|
|
|
|
{/* User info and logout */}
|
|
<div className="border-t border-sidebar-border px-4 py-4">
|
|
<div className="flex items-center justify-between">
|
|
<div className="min-w-0 flex-1">
|
|
<p className="text-sm font-medium text-sidebar-foreground truncate">
|
|
{user?.name}
|
|
</p>
|
|
<p className="text-xs text-sidebar-foreground/50 truncate">
|
|
{user?.email}
|
|
</p>
|
|
</div>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
onClick={logout}
|
|
className="text-sidebar-foreground/70 hover:text-sidebar-foreground hover:bg-sidebar-accent flex-shrink-0"
|
|
title="Sign out"
|
|
>
|
|
<LogOut className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
);
|
|
}
|