feat: enhance Friends page with group breakdown and loading states

- Refactored Friends component to include group breakdown for each friend.
- Added loading skeletons while fetching friends data.
- Implemented expandable friend rows to show detailed group balances.
- Improved error handling and user feedback during data fetching.

feat: improve GroupDetails with member management and settings tabs

- Added functionality to leave groups and kick members with confirmation prompts.
- Introduced settings tabs for group information, members, and danger actions.
- Enhanced UI for inviting members and managing group settings.

feat: create Profile page for user account management

- Implemented profile editing functionality with image upload and name change.
- Added modal for editing profile details and handling image selection.
- Integrated logout functionality and menu items for account settings.

feat: update API service with new endpoints for profile and group management

- Added API calls for updating user profiles and managing group memberships.
- Included Google login functionality in the authentication service.

chore: add Firebase service for Google authentication

- Set up Firebase configuration and authentication methods for Google sign-in.

Author: Devasy

web/App.tsx

@@ -1,14 +1,15 @@
 import React from 'react';
-import { HashRouter, Routes, Route, Navigate } from 'react-router-dom';
+import { HashRouter, Navigate, Route, Routes } from 'react-router-dom';
+import { Layout } from './components/layout/Layout';
+import { ThemeWrapper } from './components/layout/ThemeWrapper';
 import { AuthProvider, useAuth } from './contexts/AuthContext';
 import { ThemeProvider } from './contexts/ThemeContext';
 import { Auth } from './pages/Auth';
 import { Dashboard } from './pages/Dashboard';
-import { Groups } from './pages/Groups';
-import { GroupDetails } from './pages/GroupDetails';
 import { Friends } from './pages/Friends';
-import { Layout } from './components/layout/Layout';
-import { ThemeWrapper } from './components/layout/ThemeWrapper';
+import { GroupDetails } from './pages/GroupDetails';
+import { Groups } from './pages/Groups';
+import { Profile } from './pages/Profile';
 
 // Protected Route Wrapper
 const ProtectedRoute = ({ children }: { children: React.ReactElement }) => {
@@ -35,7 +36,7 @@ const AppRoutes = () => {
           <Route path="/groups" element={<ProtectedRoute><Groups /></ProtectedRoute>} />
           <Route path="/groups/:id" element={<ProtectedRoute><GroupDetails /></ProtectedRoute>} />
           <Route path="/friends" element={<ProtectedRoute><Friends /></ProtectedRoute>} />
-          <Route path="/profile" element={<ProtectedRoute><div className="p-8 text-center text-xl">Profile Management Coming Soon</div></ProtectedRoute>} />
+          <Route path="/profile" element={<ProtectedRoute><Profile /></ProtectedRoute>} />
 
           <Route path="*" element={<Navigate to={isAuthenticated ? "/dashboard" : "/login"} />} />
         </Routes>

web/components/layout/Sidebar.tsx

@@ -1,9 +1,8 @@
-import React from 'react';
+import { CreditCard, Layers, LayoutDashboard, LogOut, Moon, Sun, UserCircle, Users } from 'lucide-react';
 import { Link, useLocation } from 'react-router-dom';
-import { useTheme } from '../../contexts/ThemeContext';
-import { useAuth } from '../../contexts/AuthContext';
 import { THEMES } from '../../constants';
-import { LayoutDashboard, Users, UserCircle, LogOut, Sun, Moon, Layers, CreditCard, UserPlus } from 'lucide-react';
+import { useAuth } from '../../contexts/AuthContext';
+import { useTheme } from '../../contexts/ThemeContext';
 import { Button } from '../ui/Button';
 
 export const Sidebar = () => {
@@ -56,9 +55,13 @@ export const Sidebar = () => {
       <div className="mt-auto flex flex-col gap-4">
         {user && (
           <div className={`p-4 flex items-center gap-3 ${style === THEMES.NEOBRUTALISM ? 'border-2 border-black bg-white text-black' : 'rounded-xl bg-black/20 text-white'}`}>
-             <div className="w-8 h-8 rounded-full bg-gradient-to-br from-yellow-400 to-orange-500 flex items-center justify-center font-bold text-white">
-                {user.name.charAt(0)}
-             </div>
+             {user.imageUrl && /^(https?:|data:image)/.test(user.imageUrl) ? (
+                <img src={user.imageUrl} alt={user.name} className="w-8 h-8 rounded-full object-cover" />
+             ) : (
+                <div className="w-8 h-8 rounded-full bg-gradient-to-br from-yellow-400 to-orange-500 flex items-center justify-center font-bold text-white">
+                   {user.name.charAt(0)}
+                </div>
+             )}
              <div className="flex-1 overflow-hidden">
                <p className="font-bold truncate">{user.name}</p>
              </div>

web/contexts/AuthContext.tsx

@@ -1,13 +1,14 @@
-import React, { createContext, useContext, useState, useEffect, ReactNode } from 'react';
-import { User } from '../types';
+import { createContext, ReactNode, useContext, useEffect, useState } from 'react';
 import { getProfile } from '../services/api';
+import { User } from '../types';
 
 interface AuthContextType {
   user: User | null;
   isAuthenticated: boolean;
   isLoading: boolean;
   login: (token: string, user: User) => void;
   logout: () => void;
+  updateUserInContext: (userData: User) => void;
 }
 
 const AuthContext = createContext<AuthContextType | undefined>(undefined);
@@ -47,8 +48,12 @@ export const AuthProvider = ({ children }: { children: ReactNode }) => {
     setUser(null);
   };
 
+  const updateUserInContext = (userData: User) => {
+    setUser(userData);
+  };
+
   return (
-    <AuthContext.Provider value={{ user, isAuthenticated: !!user, isLoading, login, logout }}>
+    <AuthContext.Provider value={{ user, isAuthenticated: !!user, isLoading, login, logout, updateUserInContext }}>
       {children}
     </AuthContext.Provider>
   );