feat(NavManager): add NavManager component for manager-specific navigation

Author: Barata-Ribeiro

resources/js/components/app-sidebar.tsx

@@ -1,8 +1,11 @@
+import AppLogo from '@/components/app-logo';
 import { NavAdmin } from '@/components/navigation/nav-admin';
 import NavAttendant from '@/components/navigation/nav-attendant';
 import { NavDoctor } from '@/components/navigation/nav-doctor';
 import { NavFooter } from '@/components/navigation/nav-footer';
 import { NavMain } from '@/components/navigation/nav-main';
+import NavManager from '@/components/navigation/nav-manager';
+import { NavPatient } from '@/components/navigation/nav-patient';
 import { NavUser } from '@/components/navigation/nav-user';
 import {
     Sidebar,
@@ -17,8 +20,6 @@ import { dashboard } from '@/routes';
 import { type NavItem } from '@/types';
 import { Link } from '@inertiajs/react';
 import { BriefcaseBusinessIcon, FolderIcon, LayoutGrid } from 'lucide-react';
-import AppLogo from './app-logo';
-import { NavPatient } from './navigation/nav-patient';
 
 const mainNavItems: NavItem[] = [
     {
@@ -61,6 +62,7 @@ export function AppSidebar() {
                 <NavPatient />
                 <NavAttendant />
                 <NavDoctor />
+                <NavManager />
                 <NavAdmin />
             </SidebarContent>
 

resources/js/components/navigation/nav-manager.tsx

@@ -0,0 +1,51 @@
+import {
+    SidebarGroup,
+    SidebarGroupLabel,
+    SidebarMenu,
+    SidebarMenuButton,
+    SidebarMenuItem,
+} from '@/components/ui/sidebar';
+import invoices from '@/routes/invoices';
+import { type NavItem, SharedData } from '@/types';
+import { Link, usePage } from '@inertiajs/react';
+import { ScrollTextIcon } from 'lucide-react';
+
+export default function NavManager() {
+    const { props, url } = usePage<SharedData>();
+    const auth = props.auth;
+
+    const isManager = auth.roles.includes('Manager');
+    if (!isManager || !auth.user.employee_info_id) return null;
+
+    const managerItems: NavItem[] = [
+        {
+            title: 'Invoices',
+            href: invoices.index().url,
+            icon: ScrollTextIcon,
+        },
+    ];
+
+    return (
+        <SidebarGroup className="px-2 py-0">
+            <SidebarGroupLabel>Manager</SidebarGroupLabel>
+            <SidebarMenu>
+                {managerItems.map((item) => {
+                    const urlWithoutQuery = url.split('?')[0];
+                    const endingPath = typeof item.href === 'string' ? item.href : item.href.url;
+                    const isActive = urlWithoutQuery.endsWith(endingPath);
+
+                    return (
+                        <SidebarMenuItem key={item.title}>
+                            <SidebarMenuButton asChild isActive={isActive} tooltip={{ children: item.title }}>
+                                <Link href={item.href} prefetch>
+                                    {item.icon && <item.icon />}
+                                    <span>{item.title}</span>
+                                </Link>
+                            </SidebarMenuButton>
+                        </SidebarMenuItem>
+                    );
+                })}
+            </SidebarMenu>
+        </SidebarGroup>
+    );
+}