From bd38bbb74e6850d900ff3626ef9dacc745536e82 Mon Sep 17 00:00:00 2001
From: Yoga Pangestu <ypangestu976@gmail.com>
Date: Sat, 13 Jun 2026 12:20:37 +0700
Subject: [PATCH] refactor: replace hardcoded sidebar menu items with a dynamic
 configuration array and automated rendering logic

---
 resources/js/components/AppSidebar.vue | 301 +++++++------------------
 1 file changed, 86 insertions(+), 215 deletions(-)

diff --git a/resources/js/components/AppSidebar.vue b/resources/js/components/AppSidebar.vue
index c85a150..ddca68b 100644
--- a/resources/js/components/AppSidebar.vue
+++ b/resources/js/components/AppSidebar.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { Link, usePage } from '@inertiajs/vue3';
 import { Banknote, CalendarDays, Clock, FolderTree, History, Layers, LayoutDashboard, Package, Receipt, Scissors, Settings2, ShoppingBag, ShoppingCart, User, UserCheck, Users, Wallet, WalletCards } from '@lucide/vue';
-import { computed } from 'vue';
 import {
     Sidebar,
     SidebarContent,
@@ -19,34 +18,68 @@ import { useCan } from '@/composables/useCan';
 const page = usePage();
 const { can } = useCan();
 
-const isDashboardActive = computed(() => page.url.startsWith('/admin/dashboard'));
-const isEmployeesActive = computed(() => page.url.startsWith('/admin/hr/employees'));
-const isAttendancesActive = computed(() => page.url.startsWith('/admin/hr/attendances'));
-const isLeaveRequestsActive = computed(() => page.url.startsWith('/admin/hr/leave-requests'));
-const showHrMenu = computed(() => can('employees.view') || can('attendances.view') || can('leave-requests.view'));
-const isCategoriesActive = computed(() => page.url.startsWith('/admin/master/categories'));
-const isProductsActive = computed(() => page.url.startsWith('/admin/master/products'));
-const isRawMaterialsActive = computed(() => page.url.startsWith('/admin/master/raw-materials'));
-const isSuppliersActive = computed(() => page.url.startsWith('/admin/master/suppliers'));
-const isCustomersActive = computed(() => page.url.startsWith('/admin/master/customers'));
-const isPurchasesActive = computed(() => page.url.startsWith('/admin/manage/purchases'));
-const isOrdersActive = computed(() => page.url.startsWith('/admin/manage/orders'));
-const isCuttingsActive = computed(() => page.url.startsWith('/admin/manage/cuttings'));
-const showManageMenu = computed(() => can('purchases.view') || can('orders.view') || can('cuttings.view'));
-const isCashActive = computed(() => page.url.startsWith('/admin/finance/cash'));
-const isExpensesActive = computed(() => page.url.startsWith('/admin/finance/expenses'));
-const isEmployeeAdvancesActive = computed(() => page.url.startsWith('/admin/finance/employee-advances'));
-const isPayrollActive = computed(() => page.url.startsWith('/admin/finance/payroll'));
-const showFinanceMenu = computed(() => (
-    can('cash.view') || can('expenses.view') || can('employee-advances.view') || can('payroll.view')
-));
-const showMasterMenu = computed(() => (
-    can('categories.view') || can('products.view') || can('raw-materials.view')
-    || can('suppliers.view') || can('customers.view')
-));
-const isSettingActive = computed(() => page.url.startsWith('/admin/system/setting'));
-const isActivityLogsActive = computed(() => page.url.startsWith('/admin/system/activity-logs'));
-const showSystemMenu = computed(() => can('settings.view') || can('activity-logs.view'));
+interface MenuItem {
+    title: string;
+    href: string;
+    icon: any;
+    permission?: string;
+}
+
+interface MenuGroup {
+    label: string;
+    items: MenuItem[];
+}
+
+const menuGroups: MenuGroup[] = [
+    {
+        label: 'Menu',
+        items: [
+            { title: 'Dashboard', href: '/admin/dashboard', icon: LayoutDashboard },
+        ],
+    },
+    {
+        label: 'Master',
+        items: [
+            { title: 'Kategori', href: '/admin/master/categories', icon: FolderTree, permission: 'categories.view' },
+            { title: 'Produk', href: '/admin/master/products', icon: Package, permission: 'products.view' },
+            { title: 'Bahan Baku', href: '/admin/master/raw-materials', icon: Layers, permission: 'raw-materials.view' },
+            { title: 'Supplier', href: '/admin/master/suppliers', icon: User, permission: 'suppliers.view' },
+            { title: 'Customer', href: '/admin/master/customers', icon: UserCheck, permission: 'customers.view' },
+        ],
+    },
+    {
+        label: 'Kelola',
+        items: [
+            { title: 'Belanja', href: '/admin/manage/purchases', icon: ShoppingBag, permission: 'purchases.view' },
+            { title: 'Cutting', href: '/admin/manage/cuttings', icon: Scissors, permission: 'cuttings.view' },
+            { title: 'Pesanan', href: '/admin/manage/orders', icon: ShoppingCart, permission: 'orders.view' },
+        ],
+    },
+    {
+        label: 'Keuangan',
+        items: [
+            { title: 'Kas Toko', href: '/admin/finance/cash', icon: Wallet, permission: 'cash.view' },
+            { title: 'Pengeluaran', href: '/admin/finance/expenses', icon: Receipt, permission: 'expenses.view' },
+            { title: 'Kasbon', href: '/admin/finance/employee-advances', icon: Banknote, permission: 'employee-advances.view' },
+            { title: 'Gaji', href: '/admin/finance/payroll', icon: WalletCards, permission: 'payroll.view' },
+        ],
+    },
+    {
+        label: 'HR',
+        items: [
+            { title: 'Pegawai', href: '/admin/hr/employees', icon: Users, permission: 'employees.view' },
+            { title: 'Presensi', href: '/admin/hr/attendances', icon: Clock, permission: 'attendances.view' },
+            { title: 'Cuti', href: '/admin/hr/leave-requests', icon: CalendarDays, permission: 'leave-requests.view' },
+        ],
+    },
+    {
+        label: 'Sistem',
+        items: [
+            { title: 'Pengaturan', href: '/admin/system/setting', icon: Settings2, permission: 'settings.view' },
+            { title: 'Log Aktivitas', href: '/admin/system/activity-logs', icon: History, permission: 'activity-logs.view' },
+        ],
+    },
+];
 </script>
 
 <template>
@@ -65,193 +98,31 @@ const showSystemMenu = computed(() => can('settings.view') || can('activity-logs
             </SidebarMenu>
         </SidebarHeader>
         <SidebarContent>
-            <SidebarGroup>
-                <SidebarGroupLabel>Menu</SidebarGroupLabel>
-                <SidebarGroupContent>
-                    <SidebarMenu>
-                        <SidebarMenuItem>
-                            <SidebarMenuButton as-child tooltip="Dashboard" :is-active="isDashboardActive">
-                                <Link href="/admin/dashboard">
-                                    <LayoutDashboard />
-                                    <span>Dashboard</span>
-                                </Link>
-                            </SidebarMenuButton>
-                        </SidebarMenuItem>
-                    </SidebarMenu>
-                </SidebarGroupContent>
-            </SidebarGroup>
-            <SidebarGroup v-if="showMasterMenu">
-                <SidebarGroupLabel>Master</SidebarGroupLabel>
-                <SidebarGroupContent>
-                    <SidebarMenu>
-                        <SidebarMenuItem v-if="can('categories.view')">
-                            <SidebarMenuButton as-child tooltip="Kategori" :is-active="isCategoriesActive">
-                                <Link href="/admin/master/categories">
-                                    <FolderTree />
-                                    <span>Kategori</span>
-                                </Link>
-                            </SidebarMenuButton>
-                        </SidebarMenuItem>
-                        <SidebarMenuItem v-if="can('products.view')">
-                            <SidebarMenuButton as-child tooltip="Produk" :is-active="isProductsActive">
-                                <Link href="/admin/master/products">
-                                    <Package />
-                                    <span>Produk</span>
-                                </Link>
-                            </SidebarMenuButton>
-                        </SidebarMenuItem>
-                        <SidebarMenuItem v-if="can('raw-materials.view')">
-                            <SidebarMenuButton as-child tooltip="Bahan Baku" :is-active="isRawMaterialsActive">
-                                <Link href="/admin/master/raw-materials">
-                                    <Layers />
-                                    <span>Bahan Baku</span>
-                                </Link>
-                            </SidebarMenuButton>
-                        </SidebarMenuItem>
-                        <SidebarMenuItem v-if="can('suppliers.view')">
-                            <SidebarMenuButton as-child tooltip="Supplier" :is-active="isSuppliersActive">
-                                <Link href="/admin/master/suppliers">
-                                    <User />
-                                    <span>Supplier</span>
-                                </Link>
-                            </SidebarMenuButton>
-                        </SidebarMenuItem>
-                        <SidebarMenuItem v-if="can('customers.view')">
-                            <SidebarMenuButton as-child tooltip="Customer" :is-active="isCustomersActive">
-                                <Link href="/admin/master/customers">
-                                    <UserCheck />
-                                    <span>Customer</span>
-                                </Link>
-                            </SidebarMenuButton>
-                        </SidebarMenuItem>
-                    </SidebarMenu>
-                </SidebarGroupContent>
-            </SidebarGroup>
-            <SidebarGroup v-if="showManageMenu">
-                <SidebarGroupLabel>Kelola</SidebarGroupLabel>
-                <SidebarGroupContent>
-                    <SidebarMenu>
-                        <SidebarMenuItem v-if="can('purchases.view')">
-                            <SidebarMenuButton as-child tooltip="Belanja" :is-active="isPurchasesActive">
-                                <Link href="/admin/manage/purchases">
-                                    <ShoppingBag />
-                                    <span>Belanja</span>
-                                </Link>
-                            </SidebarMenuButton>
-                        </SidebarMenuItem>
-                        <SidebarMenuItem v-if="can('orders.view')">
-                            <SidebarMenuButton as-child tooltip="Pesanan" :is-active="isOrdersActive">
-                                <Link href="/admin/manage/orders">
-                                    <ShoppingCart />
-                                    <span>Pesanan</span>
-                                </Link>
-                            </SidebarMenuButton>
-                        </SidebarMenuItem>
-                        <SidebarMenuItem v-if="can('cuttings.view')">
-                            <SidebarMenuButton as-child tooltip="Cutting" :is-active="isCuttingsActive">
-                                <Link href="/admin/manage/cuttings">
-                                    <Scissors />
-                                    <span>Cutting</span>
-                                </Link>
-                            </SidebarMenuButton>
-                        </SidebarMenuItem>
-                    </SidebarMenu>
-                </SidebarGroupContent>
-            </SidebarGroup>
-            <SidebarGroup v-if="showFinanceMenu">
-                <SidebarGroupLabel>Keuangan</SidebarGroupLabel>
-                <SidebarGroupContent>
-                    <SidebarMenu>
-                        <SidebarMenuItem v-if="can('cash.view')">
-                            <SidebarMenuButton as-child tooltip="Kas Toko" :is-active="isCashActive">
-                                <Link href="/admin/finance/cash">
-                                    <Wallet />
-                                    <span>Kas Toko</span>
-                                </Link>
-                            </SidebarMenuButton>
-                        </SidebarMenuItem>
-                        <SidebarMenuItem v-if="can('expenses.view')">
-                            <SidebarMenuButton as-child tooltip="Pengeluaran" :is-active="isExpensesActive">
-                                <Link href="/admin/finance/expenses">
-                                    <Receipt />
-                                    <span>Pengeluaran</span>
-                                </Link>
-                            </SidebarMenuButton>
-                        </SidebarMenuItem>
-                        <SidebarMenuItem v-if="can('employee-advances.view')">
-                            <SidebarMenuButton as-child tooltip="Kasbon" :is-active="isEmployeeAdvancesActive">
-                                <Link href="/admin/finance/employee-advances">
-                                    <Banknote />
-                                    <span>Kasbon</span>
-                                </Link>
-                            </SidebarMenuButton>
-                        </SidebarMenuItem>
-                        <SidebarMenuItem v-if="can('payroll.view')">
-                            <SidebarMenuButton as-child tooltip="Gaji" :is-active="isPayrollActive">
-                                <Link href="/admin/finance/payroll">
-                                    <WalletCards />
-                                    <span>Gaji</span>
-                                </Link>
-                            </SidebarMenuButton>
-                        </SidebarMenuItem>
-                    </SidebarMenu>
-                </SidebarGroupContent>
-            </SidebarGroup>
-            <SidebarGroup v-if="showHrMenu">
-                <SidebarGroupLabel>HR</SidebarGroupLabel>
-                <SidebarGroupContent>
-                    <SidebarMenu>
-                        <SidebarMenuItem v-if="can('employees.view')">
-                            <SidebarMenuButton as-child tooltip="Pegawai" :is-active="isEmployeesActive">
-                                <Link href="/admin/hr/employees">
-                                    <Users />
-                                    <span>Pegawai</span>
-                                </Link>
-                            </SidebarMenuButton>
-                        </SidebarMenuItem>
-                        <SidebarMenuItem v-if="can('attendances.view')">
-                            <SidebarMenuButton as-child tooltip="Presensi" :is-active="isAttendancesActive">
-                                <Link href="/admin/hr/attendances">
-                                    <Clock />
-                                    <span>Presensi</span>
-                                </Link>
-                            </SidebarMenuButton>
-                        </SidebarMenuItem>
-                        <SidebarMenuItem v-if="can('leave-requests.view')">
-                            <SidebarMenuButton as-child tooltip="Cuti" :is-active="isLeaveRequestsActive">
-                                <Link href="/admin/hr/leave-requests">
-                                    <CalendarDays />
-                                    <span>Cuti</span>
-                                </Link>
-                            </SidebarMenuButton>
-                        </SidebarMenuItem>
-                    </SidebarMenu>
-                </SidebarGroupContent>
-            </SidebarGroup>
-            <SidebarGroup v-if="showSystemMenu">
-                <SidebarGroupLabel>Sistem</SidebarGroupLabel>
-                <SidebarGroupContent>
-                    <SidebarMenu>
-                        <SidebarMenuItem v-if="can('settings.view')">
-                            <SidebarMenuButton as-child tooltip="Pengaturan" :is-active="isSettingActive">
-                                <Link href="/admin/system/setting">
-                                    <Settings2 />
-                                    <span>Pengaturan</span>
-                                </Link>
-                            </SidebarMenuButton>
-                        </SidebarMenuItem>
-                        <SidebarMenuItem v-if="can('activity-logs.view')">
-                            <SidebarMenuButton as-child tooltip="Log Aktivitas" :is-active="isActivityLogsActive">
-                                <Link href="/admin/system/activity-logs">
-                                    <History />
-                                    <span>Log Aktivitas</span>
-                                </Link>
-                            </SidebarMenuButton>
-                        </SidebarMenuItem>
-                    </SidebarMenu>
-                </SidebarGroupContent>
-            </SidebarGroup>
+            <template v-for="group in menuGroups" :key="group.label">
+                <SidebarGroup v-if="group.items.some(item => !item.permission || can(item.permission))">
+                    <SidebarGroupLabel>{{ group.label }}</SidebarGroupLabel>
+                    <SidebarGroupContent>
+                        <SidebarMenu>
+                            <template v-for="item in group.items" :key="item.href">
+                                <SidebarMenuItem v-if="!item.permission || can(item.permission)">
+                                    <SidebarMenuButton
+                                        as-child
+                                        :tooltip="item.title"
+                                        :is-active="page.url.startsWith(item.href)"
+                                    >
+                                        <Link :href="item.href">
+                                            <component :is="item.icon" />
+                                            <span>{{ item.title }}</span>
+                                        </Link>
+                                    </SidebarMenuButton>
+                                </SidebarMenuItem>
+                            </template>
+                        </SidebarMenu>
+                    </SidebarGroupContent>
+                </SidebarGroup>
+            </template>
         </SidebarContent>
         <SidebarRail />
     </Sidebar>
 </template>
+