188 lines
9.5 KiB
Vue
188 lines
9.5 KiB
Vue
<script setup lang="ts">
|
|
import { Link, usePage } from '@inertiajs/vue3';
|
|
import { Banknote, Clock, FolderTree, Layers, LayoutDashboard, Package, Receipt, 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 showHrMenu = computed(() => can('employees.view') || can('attendances.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 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')
|
|
));
|
|
</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="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>
|
|
</SidebarMenu>
|
|
</SidebarGroupContent>
|
|
</SidebarGroup>
|
|
</SidebarContent>
|
|
<SidebarRail />
|
|
</Sidebar>
|
|
</template>
|