From 54abdacb083111b8614c0f5a4aad1baea7ffc759 Mon Sep 17 00:00:00 2001
From: Satyam Rastogi <satyamrastogi302@gmail.com>
Date: Fri, 29 May 2026 21:59:18 +0530
Subject: [PATCH] fix(nav): footer avatar opens /profile (User Details); add
 People to owner nav (skill rankings)

---
 src/components/Layout.jsx | 25 +++++++++++++++----------
 1 file changed, 15 insertions(+), 10 deletions(-)

diff --git a/src/components/Layout.jsx b/src/components/Layout.jsx
index 7c16372..6b74130 100644
--- a/src/components/Layout.jsx
+++ b/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 */}
-                        <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>
+                        {/* 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>
+                            <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) && (