258 lines
14 KiB
Vue
258 lines
14 KiB
Vue
<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,
|
|
SidebarGroup,
|
|
SidebarGroupContent,
|
|
SidebarGroupLabel,
|
|
SidebarHeader,
|
|
SidebarMenu,
|
|
SidebarMenuButton,
|
|
SidebarMenuItem,
|
|
SidebarRail,
|
|
} from '@/components/ui/sidebar';
|
|
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'));
|
|
</script>
|
|
|
|
<template>
|
|
<Sidebar collapsible="icon">
|
|
<SidebarHeader>
|
|
<SidebarMenu>
|
|
<SidebarMenuItem>
|
|
<SidebarMenuButton size="lg" as-child>
|
|
<Link href="/admin/dashboard">
|
|
<div class="grid flex-1 text-left text-sm leading-tight">
|
|
<span class="truncate font-semibold">{{ page.props.name }}</span>
|
|
</div>
|
|
</Link>
|
|
</SidebarMenuButton>
|
|
</SidebarMenuItem>
|
|
</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>
|
|
</SidebarContent>
|
|
<SidebarRail />
|
|
</Sidebar>
|
|
</template>
|