refactor: replace hardcoded sidebar menu items with a dynamic configuration array and automated rendering logic
This commit is contained in:
Yoga Pangestu
parent
869866beaf
commit
bd38bbb74e
@ -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>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user