feat: complete approval workflow

resources/js/components/app-sidebar.tsx

@@ -1,5 +1,6 @@
 import { Link, usePage } from '@inertiajs/react';
 import {
+    Bell,
     CalendarDays,
     CalendarRange,
     LayoutGrid,
@@ -42,6 +43,7 @@ const mainNavItems: NavItem[] = [
         href: '/requisicoes/calendario',
         icon: CalendarRange,
     },
+    { title: 'Notificações', href: '/notificacoes', icon: Bell },
 ];
 
 const footerNavItems: NavItem[] = [
@@ -53,17 +55,22 @@ const footerNavItems: NavItem[] = [
 ];
 
 export function AppSidebar() {
-    const { can } = usePage().props;
+    const { can, unreadNotifications } = usePage().props;
+    const userNavItems = mainNavItems.map((item) =>
+        item.href === '/notificacoes' && unreadNotifications > 0
+            ? { ...item, title: `Notificações (${unreadNotifications})` }
+            : item,
+    );
     const roleNavItems = can.approveReservations
         ? [
-              ...mainNavItems,
+              ...userNavItems,
               {
                   title: 'Aprovações',
                   href: '/aprovacoes',
                   icon: ListChecks,
               },
           ]
-        : mainNavItems;
+        : userNavItems;
     const visibleNavItems = can.administer
         ? [
               ...roleNavItems,