Enhance Friends, Groups, and Profile Management Features (#206)

* 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.

* feat: Implement core application pages and reusable UI components.

* feat: Enhance UI accessibility and improve error handling in profile management

* feat: Improve authentication error handling and add file upload validation in profile settings

* feat: Enhance keyboard accessibility and ARIA attributes for Friends and GroupDetails components

* feat: Add error handling and retry functionality in Friends component

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/components/ui/Button.tsx

@@ -1,23 +1,23 @@
 import React from 'react';
-import { useTheme } from '../../contexts/ThemeContext';
 import { THEMES } from '../../constants';
+import { useTheme } from '../../contexts/ThemeContext';
 
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   variant?: 'primary' | 'secondary' | 'danger' | 'ghost';
   size?: 'sm' | 'md' | 'lg';
 }
 
-export const Button: React.FC<ButtonProps> = ({ 
-  children, 
-  variant = 'primary', 
-  size = 'md', 
-  className = '', 
-  ...props 
+export const Button: React.FC<ButtonProps> = ({
+  children,
+  variant = 'primary',
+  size = 'md',
+  className = '',
+  ...props
 }) => {
   const { style } = useTheme();
 
   const baseStyles = "transition-all duration-200 font-bold flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed";
-  
+
   const sizeStyles = {
     sm: "px-3 py-1.5 text-sm",
     md: "px-5 py-2.5 text-base",
@@ -27,8 +27,8 @@ export const Button: React.FC<ButtonProps> = ({
   let themeStyles = "";
 
   if (style === THEMES.NEOBRUTALISM) {
-    themeStyles = "border-2 border-black shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] hover:translate-x-[2px] hover:translate-y-[2px] hover:shadow-[2px_2px_0px_0px_rgba(0,0,0,1)] active:translate-x-[4px] active:translate-y-[4px] active:shadow-none rounded-none uppercase tracking-wider";
-    
+    themeStyles = "border-2 border-black shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] hover:translate-x-[2px] hover:translate-y-[2px] hover:shadow-[2px_2px_0px_0px_rgba(0,0,0,1)] active:translate-x-[4px] active:translate-y-[4px] active:shadow-none rounded-none uppercase tracking-wider font-mono";
+
     if (variant === 'primary') themeStyles += " bg-neo-main text-white";
     if (variant === 'secondary') themeStyles += " bg-neo-second text-black";
     if (variant === 'danger') themeStyles += " bg-red-500 text-white";
@@ -37,15 +37,15 @@ export const Button: React.FC<ButtonProps> = ({
   } else {
     // Glassmorphism
     themeStyles = "rounded-xl backdrop-blur-md border border-white/20 shadow-lg hover:shadow-xl active:scale-95";
-    
+
     if (variant === 'primary') themeStyles += " bg-gradient-to-r from-blue-500 to-purple-600 text-white shadow-blue-500/30";
     if (variant === 'secondary') themeStyles += " bg-white/10 text-white hover:bg-white/20";
     if (variant === 'danger') themeStyles += " bg-gradient-to-r from-red-500 to-pink-600 text-white shadow-red-500/30";
     if (variant === 'ghost') themeStyles += " bg-transparent border-none shadow-none hover:bg-white/10 text-current";
   }
 
   return (
-    <button 
+    <button
       className={`${baseStyles} ${sizeStyles[size]} ${themeStyles} ${className}`}
       {...props}
     >

web/components/ui/Modal.tsx

@@ -1,8 +1,8 @@
+import { AnimatePresence, motion, Variants } from 'framer-motion';
+import { X } from 'lucide-react';
 import React from 'react';
-import { motion, AnimatePresence, Variants } from 'framer-motion';
-import { useTheme } from '../../contexts/ThemeContext';
 import { THEMES } from '../../constants';
-import { X } from 'lucide-react';
+import { useTheme } from '../../contexts/ThemeContext';
 
 interface ModalProps {
   isOpen: boolean;
@@ -22,20 +22,20 @@ export const Modal: React.FC<ModalProps> = ({ isOpen, onClose, title, children,
 
   const modalVariants: Variants = style === THEMES.NEOBRUTALISM ? {
     hidden: { y: '100%', rotate: -5, opacity: 0 },
-    visible: { 
-      y: 0, 
-      rotate: 0, 
+    visible: {
+      y: 0,
+      rotate: 0,
       opacity: 1,
-      transition: { type: 'spring', damping: 15, stiffness: 200 } 
+      transition: { type: 'spring', damping: 15, stiffness: 200 }
     },
     exit: { y: '100%', rotate: 5, opacity: 0 }
   } : {
     hidden: { scale: 0.8, opacity: 0, backdropFilter: 'blur(0px)' },
-    visible: { 
-      scale: 1, 
-      opacity: 1, 
+    visible: {
+      scale: 1,
+      opacity: 1,
       backdropFilter: 'blur(10px)',
-      transition: { type: 'spring', damping: 20, stiffness: 300 } 
+      transition: { type: 'spring', damping: 20, stiffness: 300 }
     },
     exit: { scale: 0.8, opacity: 0 }
   };
@@ -58,8 +58,8 @@ export const Modal: React.FC<ModalProps> = ({ isOpen, onClose, title, children,
             animate="visible"
             exit="exit"
             className={`relative w-full max-w-lg overflow-hidden flex flex-col max-h-[90vh] 
-              ${style === THEMES.NEOBRUTALISM 
-                ? 'bg-white border-2 border-black shadow-[8px_8px_0px_0px_rgba(0,0,0,1)]' 
+              ${style === THEMES.NEOBRUTALISM
+                ? 'bg-white border-2 border-black shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] rounded-none'
                 : 'bg-gray-900/80 border border-white/20 rounded-3xl shadow-2xl text-white'}`}
           >
             {/* Header */}

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>
   );