Added, beneficiaries, site visits and change management

PostFundManagement.ConsoleUI/src/components/layout/AppLayout.tsx

@@ -11,10 +11,14 @@ import {
   Menu,
   X,
   ChevronRight,
+  ChevronDown,
   ShieldCheck,
   Database,
   Home,
   User,
+  Users,
+  GitPullRequest,
+  MapPin,
 } from 'lucide-react';
 import { useAuth } from '../../auth/AuthProvider';
 import { BrandLogo } from '../ui/BrandLogo';
@@ -23,7 +27,22 @@ import { useQuery } from '@tanstack/react-query';
 import { getUsers } from '../../services/api';
 import { getUserEmail, registerUserEmail } from '../../lib/formatters';
 
-const navItems = [
+interface SubNavItem {
+  name: string;
+  path: string;
+  icon: React.ElementType;
+  help?: string;
+}
+
+interface NavItem {
+  name: string;
+  path: string;
+  icon: React.ElementType;
+  help: string;
+  subItems?: SubNavItem[];
+}
+
+const navItems: NavItem[] = [
   {
     name: 'Executive Dashboard',
     path: '/dashboard',
@@ -41,6 +60,26 @@ const navItems = [
     path: '/projects',
     icon: FolderKanban,
     help: 'Project Work Breakdown Structure (WBS), contractual deliverables, scheduled milestones, evidence verification, and execution tracking.',
+    subItems: [
+      {
+        name: 'Beneficiaries',
+        path: '/projects/beneficiaries',
+        icon: Users,
+        help: 'Manage target beneficiaries, demographics, and statutory compliance items satisfying beneficiaries.',
+      },
+      {
+        name: 'Change Management',
+        path: '/projects/change-management',
+        icon: GitPullRequest,
+        help: 'Track project issues, contractual change requests, and resolve changes in-place.',
+      },
+    ],
+  },
+  {
+    name: 'Site Visits',
+    path: '/site-visits',
+    icon: MapPin,
+    help: 'Log physical site visits, field observations, inspector findings, and project feedback.',
   },
   {
     name: 'Grant & Financials',
@@ -151,21 +190,52 @@ export const AppLayout: React.FC = () => {
         <nav className="flex-1 overflow-y-auto px-3 py-4 space-y-1.5">
           {navItems.map((item) => {
             const Icon = item.icon;
+            const hasSub = item.subItems && item.subItems.length > 0;
+
             return (
-              <NavLink
-                key={item.path}
-                to={item.path}
-                className={({ isActive }) =>
-                  `flex items-center gap-3 px-3.5 py-2.5 rounded-xl text-xs font-medium transition-all min-w-0 ${
-                    isActive
-                      ? 'bg-gradient-to-r from-blue-600 to-indigo-600 text-white shadow-md shadow-blue-600/25 font-semibold'
-                      : 'text-slate-400 hover:text-slate-100 hover:bg-slate-800/60'
-                  }`
-                }
-              >
-                <Icon className="w-4 h-4 shrink-0" />
-                {sidebarOpen && <span className="truncate">{item.name}</span>}
-              </NavLink>
+              <div key={item.path} className="space-y-1">
+                <NavLink
+                  to={item.path}
+                  end={hasSub}
+                  className={({ isActive }) =>
+                    `flex items-center gap-3 px-3.5 py-2.5 rounded-xl text-xs font-medium transition-all min-w-0 ${
+                      isActive
+                        ? 'bg-gradient-to-r from-blue-600 to-indigo-600 text-white shadow-md shadow-blue-600/25 font-semibold'
+                        : 'text-slate-400 hover:text-slate-100 hover:bg-slate-800/60'
+                    }`
+                  }
+                  title={item.name}
+                >
+                  <Icon className="w-4 h-4 shrink-0" />
+                  {sidebarOpen && <span className="truncate flex-1">{item.name}</span>}
+                </NavLink>
+
+                {/* Sub-items under parent item */}
+                {hasSub && sidebarOpen && (
+                  <div className="pl-6 pr-1 py-1 space-y-1 border-l border-slate-800/80 ml-5">
+                    {item.subItems?.map((subItem) => {
+                      const SubIcon = subItem.icon;
+                      return (
+                        <NavLink
+                          key={subItem.path}
+                          to={subItem.path}
+                          className={({ isActive }) =>
+                            `flex items-center gap-2.5 px-3 py-2 rounded-lg text-[11px] font-medium transition-all min-w-0 ${
+                              isActive
+                                ? 'bg-blue-600/20 text-blue-300 font-semibold border border-blue-500/30'
+                                : 'text-slate-400 hover:text-slate-200 hover:bg-slate-800/50'
+                            }`
+                          }
+                          title={subItem.name}
+                        >
+                          <SubIcon className="w-3.5 h-3.5 shrink-0 text-slate-400" />
+                          <span className="truncate">{subItem.name}</span>
+                        </NavLink>
+                      );
+                    })}
+                  </div>
+                )}
+              </div>
             );
           })}
         </nav>