Added user account overview for admins

frontend/src/App.jsx

@@ -25,6 +25,7 @@ function App() {
   const [showUsers, setShowUsers] = useState(false);
   const [showTickets, setShowTickets] = useState(false);
   const [showProfile, setShowProfile] = useState(false);
+  const [viewingUsername, setViewingUsername] = useState(null);
   const [connectionError, setConnectionError] = useState(false);
   const [theme, setTheme] = useState(localStorage.getItem('theme') || 'dark');
   const [sidebarOpen, setSidebarOpen] = useState(true);
@@ -118,6 +119,12 @@ function App() {
     loadServers();
   };
 
+  const handleViewProfile = (username) => {
+    setViewingUsername(username);
+    setShowProfile(true);
+    setShowUsers(false);
+  };
+
   const startServer = async (serverName) => {
     try {
       const response = await axios.post(
@@ -201,7 +208,7 @@ function App() {
             </div>
           </div>
         </header>
-        <Users token={token} theme={currentTheme} />
+        <Users token={token} theme={currentTheme} onViewProfile={handleViewProfile} />
       </div>
     );
   }
@@ -284,7 +291,10 @@ function App() {
                 </div>
                 <ThemeSelector currentTheme={theme} onThemeChange={handleThemeChange} />
                 <button
-                  onClick={() => setShowProfile(false)}
+                  onClick={() => {
+                    setShowProfile(false);
+                    setViewingUsername(null);
+                  }}
                   className={`${currentTheme.card} ${currentTheme.hover} px-4 py-2 rounded-lg transition flex items-center gap-2`}
                 >
                   <Server className="w-4 h-4" />
@@ -301,7 +311,7 @@ function App() {
             </div>
           </div>
         </header>
-        <Profile token={token} user={user} theme={currentTheme} onUsernameChange={handleUsernameChange} />
+        <Profile token={token} user={user} theme={currentTheme} onUsernameChange={handleUsernameChange} viewingUsername={viewingUsername} />
       </div>
     );
   }
@@ -345,7 +355,10 @@ function App() {
               </div>
               <ThemeSelector currentTheme={theme} onThemeChange={handleThemeChange} />
               <button
-                onClick={() => setShowProfile(true)}
+                onClick={() => {
+                  setShowProfile(true);
+                  setViewingUsername(null);
+                }}
                 className={`${currentTheme.accent} ${currentTheme.accentHover} px-4 py-2 rounded-lg transition flex items-center gap-2 text-white`}
               >
                 <UserCircle className="w-4 h-4" />