store/resources/js/components/MobileBottomNav.vue
Yoga Pangestu 9539ff7042 refactor: remove StockController and related stock verification logic
- Deleted `data-table-actions.vue` component as it is no longer needed.
- Removed `CuttingResultPriceItem` type and related properties from `cutting.ts`.
- Updated routes in `web.php` to eliminate stock verification routes and permissions.
- Removed `StockTest.php` file and its associated tests for stock verification and management.
- Adjusted `CuttingTest.php` to reflect changes in cutting results handling and removed references to product variants.
2026-07-19 17:29:19 +07:00

90 lines
3.0 KiB
Vue

<script setup lang="ts">
import { Link, usePage } from '@inertiajs/vue3';
import { CalendarDays, Clock, ShoppingBag, ShoppingCart } from '@lucide/vue';
import { computed } from 'vue';
import { useCan } from '@/composables/useCan';
import admin from '@/routes/admin';
const page = usePage();
const { can } = useCan();
interface NavItem {
title: string;
href: string;
icon: any;
permission?: string;
badgeKey?: 'pendingLeaveRequests';
}
const navItems: NavItem[] = [
{
title: 'Belanja',
href: admin.manage.purchases.index.url(),
icon: ShoppingBag,
permission: 'purchases.view',
},
{
title: 'Pesanan',
href: admin.manage.orders.index.url(),
icon: ShoppingCart,
permission: 'orders.view',
},
{
title: 'Presensi',
href: admin.hr.attendances.index.url(),
icon: Clock,
permission: 'attendances.view',
},
{
title: 'Cuti',
href: admin.hr.leave_requests.index.url(),
icon: CalendarDays,
permission: 'leave_requests.view',
badgeKey: 'pendingLeaveRequests',
},
];
const visibleItems = computed(() => {
return navItems.filter((item) => !item.permission || can(item.permission));
});
function isActive(href: string): boolean {
return page.url.startsWith(href);
}
function badgeCount(item: NavItem): number {
if (!item.badgeKey) {
return 0;
}
return (page.props as any)[item.badgeKey] ?? 0;
}
</script>
<template>
<nav v-if="visibleItems.length > 0" class="pointer-events-none fixed inset-x-0 bottom-0 z-50 flex justify-center pb-4 lg:hidden">
<div
class="pointer-events-auto flex items-center gap-1 rounded-2xl border bg-background/95 px-2 py-2 shadow-lg backdrop-blur supports-[backdrop-filter]:bg-background/80">
<template v-for="item in visibleItems" :key="item.title">
<Link :href="item.href"
class="relative flex flex-col items-center gap-0.5 rounded-xl px-3.5 py-1.5 text-[11px] font-medium text-muted-foreground transition-all duration-200"
:class="{
'text-primary scale-110 drop-shadow-md': isActive(item.href),
'hover:text-foreground': !isActive(item.href),
}">
<div class="relative">
<component :is="item.icon" class="h-5 w-5 transition-all duration-200" :class="{
'stroke-[2.5px]': isActive(item.href),
}" />
<span v-if="badgeCount(item) > 0"
class="absolute -right-2.5 -top-1.5 flex h-4 min-w-4 items-center justify-center rounded-full bg-destructive px-1 text-[10px] font-bold text-destructive-foreground">
{{ badgeCount(item) }}
</span>
</div>
<span>{{ item.title }}</span>
</Link>
</template>
</div>
</nav>
</template>