Merge pull request #1 from incial/develop

Skywalker690 · web-flow · commit 3497adb08290 · 2026-02-08T13:33:04.000+05:30
feat: add avatarUrl to User model and implement avatar display
diff --git a/client/components/MainLayout.tsx b/client/components/MainLayout.tsx
@@ -1,5 +1,5 @@
 
-import React from 'react';
+import React, { useState } from 'react';
 import { User } from '../types';
 import Sidebar from './Sidebar';
 import { LayoutProvider, useLayout } from '../context/LayoutContext';
@@ -14,6 +14,7 @@ interface MainLayoutProps {
 // Separate internal component to consume context
 const LayoutContent: React.FC<MainLayoutProps> = ({ user, onLogout, children }) => {
   const { isSidebarOpen, toggleSidebar, isMobile } = useLayout();
+  const [imageError, setImageError] = useState(false);
 
   return (
     <div className="min-h-screen flex relative">
@@ -45,8 +46,20 @@ const LayoutContent: React.FC<MainLayoutProps> = ({ user, onLogout, children })
                   <span className="font-black text-slate-800 tracking-tight">MEOWENDI</span>
                 </div>
              </div>
-             <div className="w-8 h-8 rounded-full bg-gradient-to-br from-indigo-500 to-violet-600 flex items-center justify-center text-white font-bold text-xs shadow-md">
-                {user.name.charAt(0)}
+             {/* Mobile header avatar */}
+             <div className="relative w-8 h-8">
+               {user.avatarUrl && user.avatarUrl.trim() !== '' && !imageError ? (
+                 <img 
+                   src={user.avatarUrl} 
+                   alt={user.name}
+                   className="w-8 h-8 rounded-full object-cover shadow-md"
+                   onError={() => setImageError(true)}
+                 />
+               ) : (
+                 <div className="w-8 h-8 rounded-full bg-gradient-to-br from-indigo-500 to-violet-600 flex items-center justify-center text-white font-bold text-xs shadow-md">
+                   {user.name.charAt(0)}
+                 </div>
+               )}
              </div>
           </div>
         )}
diff --git a/client/components/Sidebar.tsx b/client/components/Sidebar.tsx
@@ -1,5 +1,5 @@
 
-import React from 'react';
+import React, { useState } from 'react';
 import { Link, useLocation } from 'react-router-dom';
 import { User, UserRole } from '../types';
 import { useLayout } from '../context/LayoutContext';
@@ -24,6 +24,7 @@ interface SidebarProps {
 const Sidebar: React.FC<SidebarProps> = ({ user, onLogout }) => {
   const { isSidebarOpen, toggleSidebar, isMobile } = useLayout();
   const location = useLocation();
+  const [imageError, setImageError] = useState(false);
 
   const navItems = user.role === UserRole.ADMIN 
     ? [
@@ -124,12 +125,23 @@ const Sidebar: React.FC<SidebarProps> = ({ user, onLogout }) => {
             );
           })}
         </nav>
-
         {/* User Footer */}
         <div className="p-4 border-t border-white/5 bg-black/20">
           <div className={`flex items-center gap-3 ${isSidebarOpen ? '' : 'justify-center'}`}>
-            <div className="w-10 h-10 rounded-full bg-gradient-to-br from-indigo-400 to-indigo-600 ring-2 ring-white/10 flex items-center justify-center text-white font-bold shadow-lg shrink-0">
-              {user.name.charAt(0)}
+            {/* Avatar - show profile picture if available, otherwise show initials */}
+            <div className="relative w-10 h-10 shrink-0">
+              {user.avatarUrl && user.avatarUrl.trim() !== '' && !imageError ? (
+                <img 
+                  src={user.avatarUrl}                
+                  alt={user.name}
+                  className="w-10 h-10 rounded-full ring-2 ring-white/10 object-cover shadow-lg"
+                  onError={() => setImageError(true)}
+                />
+              ) : (
+                <div className="w-10 h-10 rounded-full bg-gradient-to-br from-indigo-400 to-indigo-600 ring-2 ring-white/10 flex items-center justify-center text-white font-bold shadow-lg">
+                  {user.name.charAt(0)}
+                </div>
+              )}
             </div>
             
             {isSidebarOpen && (
diff --git a/client/types.ts b/client/types.ts
@@ -23,6 +23,7 @@ export interface User {
   email: string;
   role: UserRole;
   outletId?: string | null; // null for ADMIN, UUID for REFILLER
+  avatarUrl?: string | null; // Profile picture URL (from Google login or manual upload)
 }
 
 export interface StockEntry {
diff --git a/server/src/main/java/com/incial/stockflow/dto/response/UserResponse.java b/server/src/main/java/com/incial/stockflow/dto/response/UserResponse.java
@@ -18,4 +18,5 @@ public class UserResponse {
     private String email;
     private UserRole role;
     private UUID outletId;
+    private String avatarUrl;
 }
diff --git a/server/src/main/java/com/incial/stockflow/service/AuthService.java b/server/src/main/java/com/incial/stockflow/service/AuthService.java
@@ -1,10 +1,5 @@
 package com.incial.stockflow.service;
 
-import com.google.api.client.googleapis.auth.oauth2.GoogleIdToken;
-import com.google.api.client.googleapis.auth.oauth2.GoogleIdTokenVerifier;
-import com.google.api.client.http.javanet.NetHttpTransport;
-import com.google.api.client.json.gson.GsonFactory;
-import com.incial.stockflow.dto.request.GoogleLoginRequest;
 import com.google.api.client.googleapis.auth.oauth2.GoogleIdToken;
 import com.google.api.client.googleapis.auth.oauth2.GoogleIdTokenVerifier;
 import com.google.api.client.http.javanet.NetHttpTransport;
@@ -20,8 +15,7 @@
 import lombok.RequiredArgsConstructor;
 import org.springframework.beans.factory.annotation.Value;
 import org.springframework.security.core.userdetails.UsernameNotFoundException;
-import org.springframework.beans.factory.annotation.Value;
-import org.springframework.security.core.userdetails.UsernameNotFoundException;
+
 import org.springframework.security.crypto.password.PasswordEncoder;
 import org.springframework.stereotype.Service;
 import org.springframework.transaction.annotation.Transactional;
@@ -30,10 +24,6 @@
 import java.security.GeneralSecurityException;
 import java.util.Collections;
 
-import java.io.IOException;
-import java.security.GeneralSecurityException;
-import java.util.Collections;
-
 @Service
 @RequiredArgsConstructor
 public class AuthService {
@@ -66,6 +56,7 @@ public LoginResponse login(LoginRequest request) {
                 .email(user.getEmail())
                 .role(user.getRole())
                 .outletId(user.getOutlet() != null ? user.getOutlet().getId() : null)
+                .avatarUrl(user.getAvatarUrl())
                 .build();
         
         return LoginResponse.builder()
@@ -129,6 +120,7 @@ public LoginResponse loginWithGoogle(GoogleLoginRequest request) {
                     .email(user.getEmail())
                     .role(user.getRole())
                     .outletId(user.getOutlet() != null ? user.getOutlet().getId() : null)
+                    .avatarUrl(user.getAvatarUrl())
                     .build();
 
             return LoginResponse.builder()

Original file line number	Diff line number	Diff line change
`@@ -23,6 +23,7 @@ export interface User {`
`23`	`23`	`email: string;`
`24`	`24`	`role: UserRole;`
`25`	`25`	`outletId?: string \| null; // null for ADMIN, UUID for REFILLER`
	`26`	`+ avatarUrl?: string \| null; // Profile picture URL (from Google login or manual upload)`
`26`	`27`	`}`
`27`	`28`
`28`	`29`	`export interface StockEntry {`
Original file line number	Diff line number	Diff line change
`@@ -18,4 +18,5 @@ public class UserResponse {`
`18`	`18`	`private String email;`
`19`	`19`	`private UserRole role;`
`20`	`20`	`private UUID outletId;`
	`21`	`+ private String avatarUrl;`
`21`	`22`	`}`