siakad-itm/resources/js/components/app-sidebar.tsx

import { usePage } from '@inertiajs/react';
import type { Icon } from '@tabler/icons-react';
import { IconGridDots, IconHelp, IconMessageDots } from '@tabler/icons-react';
import {
    BookOpen,
    Building2,
    Calendar,
    CalendarClock,
    ClipboardCheck,
    ClipboardList,
    FileCheck2,
    FileText,
    GraduationCap,
    Mail,
    Megaphone,
    MessageCircle,
    Receipt,
    School,
    User,
    Users,
} from 'lucide-react';
import * as React from 'react';

import AppLogoIcon from '@/components/app-logo-icon';
import type { NavGroup, NavItem } from '@/components/nav-main';
import { NavMain } from '@/components/nav-main';
import { NavSecondary } from '@/components/nav-secondary';
import {
    Sidebar,
    SidebarContent,
    SidebarHeader,
    SidebarMenu,
    SidebarMenuButton,
    SidebarMenuItem,
} from '@/components/ui/sidebar';
import { index as assignmentsRoute } from '@/routes/admin/academic-classes/assignments';
import { index as attendancesRoute } from '@/routes/admin/academic-classes/attendances';
import { index as materialsRoute } from '@/routes/admin/academic-classes/materials';
import { index as schedulesRoute } from '@/routes/admin/academic-classes/schedules';
import { index as feedbackRoute } from '@/routes/admin/feedback';
import { index as tuitionInvoicesRoute } from '@/routes/admin/finances/tuition-invoices';
import { index as announcementsRoute } from '@/routes/admin/manage/announcements';
import { index as courseClassesRoute } from '@/routes/admin/manage/course-classes';
import { index as courseRegistrationsRoute } from '@/routes/admin/manage/course-registrations';
import { index as academicTerm } from '@/routes/admin/master/academic-terms';
import { index as coursesRoute } from '@/routes/admin/master/courses';
import { index as departmentsRoute } from '@/routes/admin/master/departments';
import { index as academicAdvisingLogsRoute } from '@/routes/admin/services/academic-advising-logs';
import { index as letterRequestsRoute } from '@/routes/admin/services/letter-requests';
import { index as administratorsRoute } from '@/routes/admin/users/administrators';
import { index as lecturersRoute } from '@/routes/admin/users/lecturers';
import { index as studentsRoute } from '@/routes/admin/users/students';

const data: {
    navMain: (NavGroup | NavItem)[];
    navSecondary: { title: string; url: string; icon: Icon }[];
} = {
    navMain: [
        {
            name: 'Dasbor',
            url: '#',
            icon: IconGridDots,
        },
        {
            label: 'Pengguna',
            items: [
                {
                    name: 'Administrator',
                    url: administratorsRoute.url(),
                    icon: User,
                },
                {
                    name: 'Dosen',
                    url: lecturersRoute.url(),
                    icon: Users,
                },
                {
                    name: 'Mahasiswa',
                    url: studentsRoute.url(),
                    icon: GraduationCap,
                },
            ],
        },
        {
            label: 'Master',
            items: [
                {
                    name: 'Periode Akademik',
                    url: academicTerm.url(),
                    icon: Calendar,
                },
                {
                    name: 'Jurusan',
                    url: departmentsRoute.url(),
                    icon: Building2,
                },
                {
                    name: 'Mata Kuliah',
                    url: coursesRoute.url(),
                    icon: BookOpen,
                },
            ],
        },
        {
            label: 'Kelola',
            items: [
                {
                    name: 'Registrasi KRS',
                    url: courseRegistrationsRoute.url(),
                    icon: FileCheck2,
                },
                {
                    name: 'Kelas Mata Kuliah',
                    url: courseClassesRoute.url(),
                    icon: School,
                },
                {
                    name: 'Pengumuman',
                    url: announcementsRoute.url(),
                    icon: Megaphone,
                },
            ],
        },
        {
            label: 'Kelas',
            items: [
                {
                    name: 'Materi',
                    url: materialsRoute.url(),
                    icon: FileText,
                },
                {
                    name: 'Tugas',
                    url: assignmentsRoute.url(),
                    icon: ClipboardList,
                },
                {
                    name: 'Jadwal',
                    url: schedulesRoute.url(),
                    icon: CalendarClock,
                },
                {
                    name: 'Kehadiran',
                    url: attendancesRoute.url(),
                    icon: ClipboardCheck,
                },
            ],
        },
        {
            label: 'Keuangan',
            items: [
                {
                    name: 'Tagihan',
                    url: tuitionInvoicesRoute.url(),
                    icon: Receipt,
                },
            ],
        },
        {
            label: 'Layanan',
            items: [
                {
                    name: 'Surat Permohonan',
                    url: letterRequestsRoute.url(),
                    icon: Mail,
                },
                {
                    name: 'Bimbingan Akademik',
                    url: academicAdvisingLogsRoute.url(),
                    icon: MessageCircle,
                },
            ],
        },
    ],
    navSecondary: [
        {
            title: 'Kritik dan Saran',
            url: feedbackRoute.url(),
            icon: IconMessageDots,
        },
        {
            title: 'Bantuan',
            url: '#',
            icon: IconHelp,
        },
    ],
};

export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
    const { name } = usePage().props;

    return (
        <Sidebar collapsible="icon" {...props}>
            <SidebarHeader>
                <SidebarMenu>
                    <SidebarMenuItem>
                        <SidebarMenuButton
                            asChild
                            className="data-[slot=sidebar-menu-button]:p-1.5!"
                        >
                            <a href="#">
                                <AppLogoIcon className="size-5! rounded-sm object-cover" />
                                <span className="text-base font-semibold">
                                    {name}
                                </span>
                            </a>
                        </SidebarMenuButton>
                    </SidebarMenuItem>
                </SidebarMenu>
            </SidebarHeader>
            <SidebarContent>
                <NavMain items={data.navMain} />
                <NavSecondary items={data.navSecondary} className="mt-auto" />
            </SidebarContent>
        </Sidebar>
    );
}