262 lines
8.1 KiB
TypeScript
262 lines
8.1 KiB
TypeScript
'use client';
|
|
|
|
import Link from 'next/link';
|
|
import { usePathname, useSearchParams } from 'next/navigation';
|
|
import { cn } from '@/lib/utils';
|
|
import {
|
|
LayoutDashboard,
|
|
FileText,
|
|
FileCheck,
|
|
PenTool,
|
|
Search,
|
|
Settings,
|
|
Shield,
|
|
Menu,
|
|
Layers,
|
|
LucideIcon,
|
|
} from 'lucide-react';
|
|
import { Button } from '@/components/ui/button';
|
|
import { useState } from 'react';
|
|
import { Can } from '@/components/common/can';
|
|
import { useAuthStore } from '@/lib/stores/auth-store';
|
|
|
|
export type NavItem = {
|
|
title: string;
|
|
href: string;
|
|
icon: LucideIcon;
|
|
permission?: string | null;
|
|
adminOnly?: boolean;
|
|
matchType?: string;
|
|
excludeType?: string;
|
|
};
|
|
|
|
export const mainNavItems: NavItem[] = [
|
|
{
|
|
title: 'Dashboard',
|
|
href: '/dashboard',
|
|
icon: LayoutDashboard,
|
|
permission: null, // Everyone can see
|
|
},
|
|
{
|
|
title: 'Correspondences',
|
|
href: '/correspondences',
|
|
icon: FileText,
|
|
permission: null,
|
|
excludeType: 'RFA',
|
|
},
|
|
{
|
|
title: 'RFAs',
|
|
href: '/correspondences?type=RFA',
|
|
icon: FileCheck,
|
|
permission: null,
|
|
matchType: 'RFA',
|
|
},
|
|
{
|
|
title: 'Drawings',
|
|
href: '/drawings',
|
|
icon: PenTool,
|
|
permission: null,
|
|
},
|
|
{
|
|
title: 'Circulations',
|
|
href: '/circulation',
|
|
icon: Layers, // Start with generic icon, maybe update import if needed
|
|
permission: null,
|
|
},
|
|
{
|
|
title: 'Transmittals',
|
|
href: '/transmittals',
|
|
icon: FileText,
|
|
permission: null,
|
|
},
|
|
{
|
|
title: 'Search',
|
|
href: '/search',
|
|
icon: Search,
|
|
permission: null,
|
|
},
|
|
{
|
|
title: 'Admin Panel',
|
|
href: '/admin',
|
|
icon: Shield,
|
|
permission: null,
|
|
adminOnly: true,
|
|
},
|
|
];
|
|
|
|
interface SidebarProps {
|
|
className?: string;
|
|
}
|
|
|
|
export function Sidebar({ className }: SidebarProps) {
|
|
const pathname = usePathname();
|
|
const searchParams = useSearchParams();
|
|
const [collapsed, setCollapsed] = useState(false);
|
|
const user = useAuthStore((state) => state.user);
|
|
const isAdmin = user?.role === 'ADMIN' || user?.role === 'DC';
|
|
const currentType = searchParams.get('type')?.toUpperCase();
|
|
|
|
return (
|
|
<div
|
|
className={cn(
|
|
'hidden md:flex flex-col h-screen border-r bg-card transition-all duration-300',
|
|
collapsed ? 'w-16' : 'w-64',
|
|
className
|
|
)}
|
|
>
|
|
<div className="h-16 flex items-center justify-between px-4 border-b">
|
|
{!collapsed && <span className="text-lg font-bold text-primary truncate">LCBP3 DMS</span>}
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
onClick={() => setCollapsed(!collapsed)}
|
|
className={cn('ml-auto', collapsed && 'mx-auto')}
|
|
>
|
|
<Menu className="h-5 w-5" />
|
|
</Button>
|
|
</div>
|
|
|
|
<div className="flex-1 overflow-y-auto py-4">
|
|
<nav className="grid gap-1 px-2">
|
|
{mainNavItems.map((item) => {
|
|
if (item.adminOnly && !isAdmin) return null;
|
|
|
|
const baseHref = item.href.split('?')[0];
|
|
const isRfaSubRoute = item.matchType === 'RFA' && pathname.startsWith('/rfas');
|
|
const isBaseActive = pathname.startsWith(baseHref) || isRfaSubRoute;
|
|
const isTypeMatched =
|
|
!item.matchType ||
|
|
currentType === item.matchType.toUpperCase() ||
|
|
isRfaSubRoute;
|
|
const isTypeExcluded =
|
|
!!item.excludeType && currentType === item.excludeType.toUpperCase();
|
|
const isActive = isBaseActive && isTypeMatched && !isTypeExcluded;
|
|
|
|
const LinkComponent = (
|
|
<Link
|
|
key={item.href}
|
|
href={item.href}
|
|
className={cn(
|
|
'flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground',
|
|
isActive ? 'bg-accent text-accent-foreground' : 'text-muted-foreground',
|
|
collapsed && 'justify-center px-2'
|
|
)}
|
|
title={collapsed ? item.title : undefined}
|
|
>
|
|
<item.icon className="h-5 w-5" />
|
|
{!collapsed && <span>{item.title}</span>}
|
|
</Link>
|
|
);
|
|
|
|
if (item.permission) {
|
|
return (
|
|
<Can key={item.href} permission={item.permission}>
|
|
{LinkComponent}
|
|
</Can>
|
|
);
|
|
}
|
|
|
|
return LinkComponent;
|
|
})}
|
|
</nav>
|
|
</div>
|
|
|
|
<div className="p-4 border-t">
|
|
<Link
|
|
href="/settings"
|
|
className={cn(
|
|
'flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground',
|
|
collapsed && 'justify-center px-2'
|
|
)}
|
|
title="Settings"
|
|
>
|
|
<Settings className="h-5 w-5" />
|
|
{!collapsed && <span>Settings</span>}
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
import { Sheet, SheetContent, SheetTrigger, SheetTitle } from '@/components/ui/sheet';
|
|
|
|
export function MobileSidebar() {
|
|
const pathname = usePathname();
|
|
const searchParams = useSearchParams();
|
|
const [open, setOpen] = useState(false);
|
|
const user = useAuthStore((state) => state.user);
|
|
const isAdmin = user?.role === 'ADMIN' || user?.role === 'DC';
|
|
const currentType = searchParams.get('type')?.toUpperCase();
|
|
|
|
return (
|
|
<Sheet open={open} onOpenChange={setOpen}>
|
|
<SheetTrigger asChild>
|
|
<Button variant="ghost" size="icon" className="md:hidden">
|
|
<Menu className="h-5 w-5" />
|
|
<span className="sr-only">Toggle navigation menu</span>
|
|
</Button>
|
|
</SheetTrigger>
|
|
<SheetContent side="left" className="w-64 p-0">
|
|
<SheetTitle className="sr-only">Mobile Navigation</SheetTitle>
|
|
<div className="h-16 flex items-center px-4 border-b">
|
|
<span className="text-lg font-bold text-primary truncate">LCBP3 DMS</span>
|
|
</div>
|
|
<div className="flex-1 overflow-y-auto py-4 h-[calc(100vh-4rem)]">
|
|
<nav className="grid gap-1 px-2">
|
|
{mainNavItems.map((item) => {
|
|
if (item.adminOnly && !isAdmin) return null;
|
|
|
|
const baseHref = item.href.split('?')[0];
|
|
const isRfaSubRoute = item.matchType === 'RFA' && pathname.startsWith('/rfas');
|
|
const isBaseActive = pathname.startsWith(baseHref) || isRfaSubRoute;
|
|
const isTypeMatched =
|
|
!item.matchType ||
|
|
currentType === item.matchType.toUpperCase() ||
|
|
isRfaSubRoute;
|
|
const isTypeExcluded =
|
|
!!item.excludeType && currentType === item.excludeType.toUpperCase();
|
|
const isActive = isBaseActive && isTypeMatched && !isTypeExcluded;
|
|
|
|
const LinkComponent = (
|
|
<Link
|
|
key={item.href}
|
|
href={item.href}
|
|
onClick={() => setOpen(false)}
|
|
className={cn(
|
|
'flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground',
|
|
isActive ? 'bg-accent text-accent-foreground' : 'text-muted-foreground'
|
|
)}
|
|
>
|
|
<item.icon className="h-5 w-5" />
|
|
<span>{item.title}</span>
|
|
</Link>
|
|
);
|
|
|
|
if (item.permission) {
|
|
return (
|
|
<Can key={item.href} permission={item.permission}>
|
|
{LinkComponent}
|
|
</Can>
|
|
);
|
|
}
|
|
|
|
return LinkComponent;
|
|
})}
|
|
</nav>
|
|
|
|
<div className="p-4 mt-auto border-t absolute bottom-0 w-full left-0 bg-background">
|
|
<Link
|
|
href="/settings"
|
|
onClick={() => setOpen(false)}
|
|
className="flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground"
|
|
>
|
|
<Settings className="h-5 w-5" />
|
|
<span>Settings</span>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</SheetContent>
|
|
</Sheet>
|
|
);
|
|
}
|