dress/resources/js/components/app-sidebar.tsx

import AppLogo from '@/components/app-logo';
import { NavMain } from '@/components/nav-main';
import {
    Sidebar,
    SidebarContent,
    SidebarHeader,
    SidebarMenu,
    SidebarMenuButton,
    SidebarMenuItem,
} from '@/components/ui/sidebar';
import { analysis, dashboard } from '@/routes';
import category from '@/routes/category';
import { Link } from '@inertiajs/react';
import {
    BarChart3,
    Boxes,
    DollarSign,
    History,
    LayoutGrid,
    List,
    ScrollText,
    Settings,
    ShieldCheck,
    ShoppingBag,
    ShoppingCart,
    User,
    Wallet,
} from 'lucide-react';

import expense from '@/routes/expense';
import order from '@/routes/order';
import payroll from '@/routes/payroll';
import product from '@/routes/product';
import purchase from '@/routes/purchase';
import system from '@/routes/system';
import user from '@/routes/user';
import type { NavItem } from '@/types';
import type { Auth } from '@/types/auth';
import { usePage } from '@inertiajs/react';

const mainNavItems: NavItem[] = [
    {
        title: 'Dasbor',
        href: dashboard().url,
        icon: LayoutGrid,
        permission: 'View:Dashboard',
    },
    {
        title: 'Analisa',
        href: analysis().url,
        icon: BarChart3,
        permission: 'View:Analysis',
    },
];

const masterNavItems: NavItem[] = [
    {
        title: 'Pegawai',
        href: user.index().url,
        icon: User,
        permission: 'View:User',
    },
    {
        title: 'Kategori',
        href: category.index().url,
        icon: List,
        permission: 'View:Category',
    },
    {
        title: 'Produk',
        href: product.index().url,
        icon: Boxes,
        permission: 'View:Product',
    },
];

const manageNavItems: NavItem[] = [
    {
        title: 'Pesanan',
        href: order.index().url,
        icon: ShoppingBag,
        permission: 'View:Order',
    },
    {
        title: 'Belanja',
        href: purchase.index().url,
        icon: ShoppingCart,
        permission: 'View:Purchase',
    },
];

const financeNavItems: NavItem[] = [
    {
        title: 'Pengeluaran',
        href: expense.index().url,
        icon: Wallet,
        permission: 'View:Expense',
    },
    {
        title: 'Penggajian',
        href: payroll.index().url,
        icon: DollarSign,
        permission: 'View:Payroll',
    },
];

const systemNavItems: NavItem[] = [
    {
        title: 'Pengaturan',
        href: system.settings.index().url,
        icon: Settings,
        permission: 'View:Setting',
    },
    {
        title: 'Role & Izin',
        href: system.role.index().url,
        icon: ShieldCheck,
        permission: 'View:Role',
    },
    {
        title: 'Logs',
        href: system.logs.index().url,
        icon: ScrollText,
        permission: 'View:Log',
    },
    {
        title: 'Riwayat',
        href: system.activityLogs.index().url,
        icon: History,
        permission: 'View:Activity',
    },
];

export function AppSidebar() {
    const { auth } = usePage<{ auth: Auth }>().props;

    const filterNavItems = (items: NavItem[]) => {
        return items.filter((item) => {
            if (!item.permission) return true;
            return auth?.permissions?.includes(item.permission) ?? false;
        });
    };

    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>
                {filterNavItems(mainNavItems).length > 0 && (
                    <NavMain items={filterNavItems(mainNavItems)} />
                )}
                {filterNavItems(masterNavItems).length > 0 && (
                    <NavMain
                        items={filterNavItems(masterNavItems)}
                        label="Master"
                    />
                )}
                {filterNavItems(manageNavItems).length > 0 && (
                    <NavMain
                        items={filterNavItems(manageNavItems)}
                        label="Kelola"
                    />
                )}
                {filterNavItems(financeNavItems).length > 0 && (
                    <NavMain
                        items={filterNavItems(financeNavItems)}
                        label="Keuangan"
                    />
                )}
                {filterNavItems(systemNavItems).length > 0 && (
                    <NavMain
                        items={filterNavItems(systemNavItems)}
                        label="Sistem"
                    />
                )}
            </SidebarContent>
        </Sidebar>
    );
}