fix: display correct team name in user profile

pages/UserProfile.tsx

@@ -1,11 +1,12 @@
 import React, { useState, useEffect, useRef } from 'react';
 import { Camera, Save, Mail, User as UserIcon, Building, Shield, Loader2, CheckCircle2 } from 'lucide-react';
-import { getUserById, getTenants, updateUser, uploadAvatar } from '../services/dataService';
+import { getUserById, getTenants, getTeams, updateUser, uploadAvatar } from '../services/dataService';
 import { User, Tenant } from '../types';
 
 export const UserProfile: React.FC = () => {
   const [user, setUser] = useState<User | null>(null);
   const [tenant, setTenant] = useState<Tenant | null>(null);
+  const [teamName, setTeamName] = useState<string>('');
   const [isLoading, setIsLoading] = useState(false);
   const [isSuccess, setIsSuccess] = useState(false);
   const [isUploading, setIsUploading] = useState(false);
@@ -31,6 +32,12 @@ export const UserProfile: React.FC = () => {
             if (userTenant) {
               setTenant(userTenant);
             }
+
+            if (fetchedUser.team_id) {
+              const teams = await getTeams(fetchedUser.tenant_id);
+              const userTeam = teams.find(t => t.id === fetchedUser.team_id);
+              if (userTeam) setTeamName(userTeam.name);
+            }
           }
         } catch (err) {
           console.error("Error fetching profile data:", err);
@@ -144,7 +151,7 @@ export const UserProfile: React.FC = () => {
               </span>
               {user.team_id && (
                 <span className="px-3 py-1 bg-blue-100 text-blue-700 rounded-full text-xs font-semibold border border-blue-200 dark:bg-blue-900/30 dark:text-blue-400 dark:border-blue-800">
-                  {tenant?.name ? `Time ${tenant.name}` : user.team_id}
+                  {teamName || user.team_id}
                 </span>
               )}
             </div>