feat: add pending leave requests and employee advances notifications to sidebar menu items, enhancing user awareness of outstanding tasks

app/Http/Middleware/HandleInertiaRequests.php

@@ -2,6 +2,10 @@
 
 namespace App\Http\Middleware;
 
+use App\Enums\EmployeeAdvanceStatus;
+use App\Enums\LeaveRequestStatus;
+use App\Models\EmployeeAdvance;
+use App\Models\LeaveRequest;
 use App\Services\System\Setting\SystemService;
 use App\Settings\SystemSettings;
 use Illuminate\Http\Request;
@@ -63,6 +67,34 @@ public function share(Request $request): array
                 || $request->cookie('sidebar_state') === 'true',
             'appearance' => $request->cookie('appearance', 'system'),
             'vapidPublicKey' => config('webpush.vapid.public_key'),
+            'pendingLeaveRequests' => fn () => $this->pendingLeaveRequests($request),
+            'pendingEmployeeAdvances' => fn () => $this->pendingEmployeeAdvances($request),
         ];
     }
+
+    private function pendingLeaveRequests(Request $request): int
+    {
+        $user = $request->user();
+
+        if ($user === null || ! $user->hasAnyRole(['owner', 'developer'])) {
+            return 0;
+        }
+
+        return LeaveRequest::query()
+            ->where('status', LeaveRequestStatus::PENDING)
+            ->count();
+    }
+
+    private function pendingEmployeeAdvances(Request $request): int
+    {
+        $user = $request->user();
+
+        if ($user === null || ! $user->hasAnyRole(['owner', 'developer'])) {
+            return 0;
+        }
+
+        return EmployeeAdvance::query()
+            ->where('status', EmployeeAdvanceStatus::PENDING)
+            ->count();
+    }
 }

package-lock.json

@@ -12,7 +12,7 @@
                 "@fullcalendar/vue3": "^6.1.20",
                 "@inertiajs/vite": "^3.0.0",
                 "@inertiajs/vue3": "^3.0.0",
-                "@lucide/vue": "^1.18.0",
+                "@lucide/vue": "^1.21.0",
                 "@point-of-sale/receipt-printer-encoder": "^3.0.3",
                 "@point-of-sale/webbluetooth-receipt-printer": "^2.0.0",
                 "@point-of-sale/webserial-receipt-printer": "^2.0.0",
@@ -2618,9 +2618,9 @@
             "license": "MIT"
         },
         "node_modules/@lucide/vue": {
-            "version": "1.18.0",
+            "version": "1.21.0",
-            "resolved": "https://registry.npmjs.org/@lucide/vue/-/vue-1.18.0.tgz",
+            "resolved": "https://registry.npmjs.org/@lucide/vue/-/vue-1.21.0.tgz",
-            "integrity": "sha512-DmnUpDB85PlMZ+ofjZLcKq3JoJnaD1bk7SIj9xwUvqerfNqA6hCLa0/m3gIybH6rdrErABbqvTD8yYJdNqiZ3Q==",
+            "integrity": "sha512-eoFn3tppjKAc12ZqdnRSMFdtwQ1ZMRQFb6SV1Eub6Y8kU28ccnqKeSFdnur9hMg8gIbosU2Y3WFJr/J/xS/IlQ==",
             "license": "ISC",
             "peerDependencies": {
                 "vue": ">=3.0.1"

package.json

@@ -40,7 +40,7 @@
         "@fullcalendar/vue3": "^6.1.20",
         "@inertiajs/vite": "^3.0.0",
         "@inertiajs/vue3": "^3.0.0",
-        "@lucide/vue": "^1.18.0",
+        "@lucide/vue": "^1.21.0",
         "@point-of-sale/receipt-printer-encoder": "^3.0.3",
         "@point-of-sale/webbluetooth-receipt-printer": "^2.0.0",
         "@point-of-sale/webserial-receipt-printer": "^2.0.0",

resources/js/components/AppSidebar.vue

@@ -9,6 +9,7 @@ import {
     SidebarGroupLabel,
     SidebarHeader,
     SidebarMenu,
+    SidebarMenuBadge,
     SidebarMenuButton,
     SidebarMenuItem,
     SidebarRail,
@@ -23,6 +24,7 @@ interface MenuItem {
     href: string;
     icon: any;
     permission?: string;
+    badgeKey?: 'pendingLeaveRequests' | 'pendingEmployeeAdvances';
 }
 
 interface MenuGroup {
@@ -60,7 +62,7 @@ const menuGroups: MenuGroup[] = [
         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: 'Kasbon', href: '/admin/finance/employee-advances', icon: Banknote, permission: 'employee-advances.view', badgeKey: 'pendingEmployeeAdvances' },
             { title: 'Gaji', href: '/admin/finance/payroll', icon: WalletCards, permission: 'payroll.view' },
         ],
     },
@@ -69,7 +71,7 @@ const menuGroups: MenuGroup[] = [
         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' },
+            { title: 'Cuti', href: '/admin/hr/leave-requests', icon: CalendarDays, permission: 'leave-requests.view', badgeKey: 'pendingLeaveRequests' },
         ],
     },
     {
@@ -116,6 +118,9 @@ const menuGroups: MenuGroup[] = [
                                             <span>{{ item.title }}</span>
                                         </Link>
                                     </SidebarMenuButton>
+                                    <SidebarMenuBadge v-if="item.badgeKey && (page.props as any)[item.badgeKey] > 0">
+                                        {{ (page.props as any)[item.badgeKey] }}
+                                    </SidebarMenuBadge>
                                 </SidebarMenuItem>
                             </template>
                         </SidebarMenu>