fix(nav): footer avatar opens /profile (User Details); add People to owner nav (skill rankings)

src/components/Layout.jsx

@@ -153,6 +153,7 @@ const Layout = () => {
                     { to: "/admin/schedule", icon: Calendar, label: "Team Schedule" },
                     { to: "/admin/leaderboard", icon: Trophy, label: "Leaderboard" },
                     { to: "/owner/subcontractor-tasks", icon: HardHat, label: "Subcontractor Tasks" },
+                    { to: "/owner/people", icon: Users, label: "People" },
                     { to: "/owner/settings", icon: Settings, label: "Org Settings" },
                     ...commonItems,
                 ];
@@ -307,16 +308,20 @@ const Layout = () => {
                     {/* Divider */}
                     <div className="h-px bg-zinc-200 dark:bg-white/10 my-2" />
                     <div className={`flex items-center ${isCollapsed && !isMobileMenuOpen ? 'justify-center' : 'space-x-3'} transition-all duration-300`}>
-                        {/* Avatar */}
+                        {/* Avatar + info — click to open your User Details / profile */}
+                        <button
+                            onClick={() => { navigate('/profile'); setIsMobileMenuOpen(false); }}
+                            title="View your profile & details"
+                            className={`flex items-center ${isCollapsed && !isMobileMenuOpen ? 'justify-center' : 'space-x-3 flex-1'} min-w-0 text-left rounded-lg p-1 -m-1 hover:bg-zinc-200 dark:hover:bg-white/10 transition-colors focus:outline-none focus:ring-2 focus:ring-amber-500`}
+                        >
                             <div className="w-9 h-9 rounded-full bg-gradient-to-tr from-amber-400 to-orange-600 flex items-center justify-center text-white font-bold text-sm shrink-0 shadow-lg shadow-amber-500/20 ring-2 ring-white dark:ring-zinc-800">
                                 {user?.name?.charAt(0) || 'U'}
                             </div>
-
-                        {/* Info */}
                             <div className={`flex-1 overflow-hidden transition-all duration-300 ${isCollapsed && !isMobileMenuOpen ? 'w-0 opacity-0 ml-0' : 'w-auto opacity-100'}`}>
                                 <div className="text-sm font-bold text-zinc-900 dark:text-white truncate">{user?.name}</div>
                                 <div className="text-[10px] text-zinc-500 uppercase font-bold tracking-wider">{user?.role?.replace('_', ' ')}</div>
                             </div>
+                        </button>
 
                         {/* Logout Button */}
                         {(!isCollapsed || isMobileMenuOpen) && (