dstpabuaran.com/resources/js/components/app-sidebar.tsx

import { Link } from '@inertiajs/react';
import type { LucideIcon } from 'lucide-react';
import {
    Activity,
    ArrowUpFromLine,
    BarChart3,
    Boxes,
    CalendarCheck,
    CalendarDays,
    ClipboardCheck,
    DollarSign,
    HandCoins,
    LayoutGrid,
    Package,
    RefreshCw,
    Scissors,
    Settings,
    ShoppingCart,
    Tags,
    Truck,
    UserCircle,
    Users,
    Wallet,
} from 'lucide-react';
import AppLogo from '@/components/app-logo';
import {
    Sidebar,
    SidebarContent,
    SidebarGroup,
    SidebarGroupLabel,
    SidebarHeader,
    SidebarMenu,
    SidebarMenuButton,
    SidebarMenuItem,
} from '@/components/ui/sidebar';
import { useCurrentUrl } from '@/hooks/use-current-url';
import { dashboard } from '@/routes';
import { index as categoriesIndex } from '@/routes/admin/master/categories';

type NavMenuItem = { title: string; href: string; icon: LucideIcon };

const dasborItem: NavMenuItem = {
    title: 'Dasbor',
    href: dashboard.url(),
    icon: LayoutGrid,
};

const analisaItem: NavMenuItem = {
    title: 'Analisa',
    href: '#',
    icon: BarChart3,
};

const masterItems: NavMenuItem[] = [
    { title: 'Kategori', href: categoriesIndex.url(), icon: Tags },
    { title: 'Produk', href: '#', icon: Package },
    { title: 'Bahan Baku', href: '#', icon: Boxes },
    { title: 'Supplier', href: '#', icon: Truck },
    { title: 'Customer', href: '#', icon: Users },
];

const kelolaItems: NavMenuItem[] = [
    { title: 'Belanja', href: '#', icon: ShoppingCart },
    { title: 'Cutting', href: '#', icon: Scissors },
    { title: 'Restock', href: '#', icon: RefreshCw },
    { title: 'Stok Opname', href: '#', icon: ClipboardCheck },
];

const keuanganItems: NavMenuItem[] = [
    { title: 'Kas Toko', href: '#', icon: Wallet },
    { title: 'Pengeluaran', href: '#', icon: ArrowUpFromLine },
    { title: 'Kasbon', href: '#', icon: HandCoins },
    { title: 'Gaji', href: '#', icon: DollarSign },
];

const sdmItems: NavMenuItem[] = [
    { title: 'Pegawai', href: '#', icon: UserCircle },
    { title: 'Presensi', href: '#', icon: CalendarCheck },
    { title: 'Cuti', href: '#', icon: CalendarDays },
];

const sistemItems: NavMenuItem[] = [
    { title: 'Pengaturan', href: '#', icon: Settings },
    { title: 'Log Aktivitas', href: '#', icon: Activity },
];

function MenuGroup({ label, items }: { label: string; items: NavMenuItem[] }) {
    return (
        <SidebarGroup>
            <SidebarGroupLabel>{label}</SidebarGroupLabel>
            <SidebarMenu>
                {items.map((item) => (
                    <SidebarMenuItem key={item.title}>
                        <SidebarMenuButton asChild tooltip={{ children: item.title }}>
                            <Link href={item.href} prefetch>
                                <item.icon />
                                <span>{item.title}</span>
                            </Link>
                        </SidebarMenuButton>
                    </SidebarMenuItem>
                ))}
            </SidebarMenu>
        </SidebarGroup>
    );
}

export function AppSidebar() {
    const { isCurrentUrl } = useCurrentUrl();

    return (
        <Sidebar collapsible="icon" variant="inset">
            <SidebarHeader>
                <SidebarMenu>
                    <SidebarMenuItem>
                        <SidebarMenuButton size="lg" asChild>
                            <Link href={dashboard.url()} prefetch>
                                <AppLogo />
                            </Link>
                        </SidebarMenuButton>
                    </SidebarMenuItem>
                </SidebarMenu>
            </SidebarHeader>

            <SidebarContent>
                <SidebarGroup>
                    <SidebarMenu>
                        <SidebarMenuItem>
                            <SidebarMenuButton asChild isActive={isCurrentUrl('/dashboard')} tooltip={{ children: dasborItem.title }}>
                                <Link href={dasborItem.href} prefetch>
                                    <dasborItem.icon />
                                    <span>{dasborItem.title}</span>
                                </Link>
                            </SidebarMenuButton>
                        </SidebarMenuItem>
                    </SidebarMenu>
                </SidebarGroup>

                <SidebarGroup>
                    <SidebarMenu>
                        <SidebarMenuItem>
                            <SidebarMenuButton asChild tooltip={{ children: analisaItem.title }}>
                                <Link href={analisaItem.href} prefetch>
                                    <analisaItem.icon />
                                    <span>{analisaItem.title}</span>
                                </Link>
                            </SidebarMenuButton>
                        </SidebarMenuItem>
                    </SidebarMenu>
                </SidebarGroup>

                <MenuGroup label="Master" items={masterItems} />
                <MenuGroup label="Kelola" items={kelolaItems} />
                <MenuGroup label="Keuangan" items={keuanganItems} />
                <MenuGroup label="SDM" items={sdmItems} />
                <MenuGroup label="Sistem" items={sistemItems} />
            </SidebarContent>
        </Sidebar>
    );
}