feat: dashboard translations

frontend/vizzy/app/dashboard/dashboard-page-client.tsx

@@ -7,7 +7,6 @@ import {
   TabsList,
   TabsTrigger,
 } from '@/components/ui/navigation/tabs';
-import { CalendarDateRangePicker } from '@/components/ui/data-display/date-range-picker';
 import { OverviewPage } from './layout/overview-page';
 import { ListingsPage } from './layout/listings-page';
 import { ProposalsPage } from './layout/proposals-page';
@@ -17,19 +16,42 @@ import {
   FilterDropdown,
   type FilterOption,
 } from '@/components/ui/data-display/filter-dropdown';
+import { useTranslations } from 'next-intl';
 import { FavoritesPage } from './layout/favorites-page';
+
 export default function DashboardPageClient() {
   const searchParams = useSearchParams();
   const tabParam = searchParams.get('activeTab');
   const [activeTab, setActiveTab] = useState(tabParam || 'overview');
   const [createListingOpen, setCreateListingOpen] = useState(false);
+  const t = useTranslations('dashboard');
   const [filterOptions, setFilterOptions] = useState<FilterOption[]>([
-    { id: 'received', label: 'Received', checked: false },
-    { id: 'sent', label: 'Sent', checked: false },
-    { id: 'accepted', label: 'Accepted', checked: false },
-    { id: 'rejected', label: 'Rejected', checked: false },
-    { id: 'cancelled', label: 'Cancelled', checked: false },
-    { id: 'pending', label: 'Pending', checked: true },
+    {
+      id: 'received',
+      label: t('proposals.filterOptions.received'),
+      checked: false,
+    },
+    { id: 'sent', label: t('proposals.filterOptions.sent'), checked: false },
+    {
+      id: 'accepted',
+      label: t('proposals.filterOptions.accepted'),
+      checked: false,
+    },
+    {
+      id: 'rejected',
+      label: t('proposals.filterOptions.rejected'),
+      checked: false,
+    },
+    {
+      id: 'cancelled',
+      label: t('proposals.filterOptions.cancelled'),
+      checked: false,
+    },
+    {
+      id: 'pending',
+      label: t('proposals.filterOptions.pending'),
+      checked: true,
+    },
   ]);
   const [filterDropdownOpen, setFilterDropdownOpen] = useState(false);
 
@@ -59,13 +81,9 @@ export default function DashboardPageClient() {
     <div className="border-b">
       <div className="flex-1 space-y-4 p-8 pt-6">
         <div className="flex items-center justify-between space-y-2">
-          <h2 className="text-3xl font-bold tracking-tight">
-            Painel de Controlo
-          </h2>
-          <div className="flex items-center space-x-2">
-            <CalendarDateRangePicker />
-          </div>
+          <h2 className="text-3xl font-bold tracking-tight">{t('title')}</h2>
         </div>
+        <h1 className="py-0 text- dark:text-gray-400">{t('subtitle')}</h1>
         <Tabs
           value={activeTab}
           defaultValue="overview"
@@ -75,13 +93,13 @@ export default function DashboardPageClient() {
           <div className="flex justify-between items-center">
             <TabsList>
               <TabsTrigger value="overview" className="cursor-pointer">
-                Visão Geral
+                {t('tabs.overview')}
               </TabsTrigger>
               <TabsTrigger value="listings" className="cursor-pointer">
-                Anúncios
+                {t('tabs.listings')}
               </TabsTrigger>
               <TabsTrigger value="proposals" className="cursor-pointer">
-                Propostas
+                {t('tabs.proposals')}
               </TabsTrigger>
               <TabsTrigger value="favorites" className="cursor-pointer">
                 Favoritos
@@ -93,16 +111,16 @@ export default function DashboardPageClient() {
                 variant={'default'}
                 onClick={() => setCreateListingOpen(true)}
               >
-                Novo Anúncio
+                {t('listings.button')}
               </Button>
             )}
 
             {activeTab === 'proposals' && (
               <FilterDropdown
                 options={filterOptions}
                 onChange={handleFilterChange}
-                label="Filter proposals"
-                buttonText="Filter proposals"
+                label={t('proposals.filters')}
+                buttonText={t('proposals.filters')}
                 showActiveBadges={false}
                 isOpen={filterDropdownOpen}
                 onOpenChange={setFilterDropdownOpen}

frontend/vizzy/components/profiles/profile-hover-card.tsx

@@ -21,13 +21,45 @@ import { useTranslations } from 'next-intl';
 export default function ProfileHoverCard({ profile }: { profile: Profile }) {
   const t = useTranslations('profile');
   const [contacts, setContacts] = useState<Contact[]>([]);
+  const [isLoadingContacts, setIsLoadingContacts] = useState(true);
+  const [contactsError, setContactsError] = useState<string | null>(null);
+
   useEffect(() => {
     const fetchUserContacts = async () => {
-      const contacts = await fetchContacts(profile.id);
-      if (contacts.data !== null) setContacts(contacts.data);
+      if (!profile?.id) return;
+
+      try {
+        setIsLoadingContacts(true);
+        setContactsError(null);
+        const result = await fetchContacts(profile.id);
+        if (result.data !== null) {
+          setContacts(result.data);
+        }
+      } catch (error) {
+        console.error('Failed to fetch contacts:', error);
+        setContactsError('Failed to load contacts');
+      } finally {
+        setIsLoadingContacts(false);
+      }
     };
+
     fetchUserContacts();
-  }, [profile.id]);
+  }, [profile?.id]);
+
+  // Helper function to get initials for avatar fallback
+  const getInitials = (name: string) => {
+    if (!name) return '';
+    return name
+      .split(' ')
+      .map((n) => n[0]?.toUpperCase() || '')
+      .join('')
+      .slice(0, 2);
+  };
+
+  // Early return moved after hooks
+  if (!profile?.name || !profile?.username) {
+    return null;
+  }
 
   return (
     <HoverCard>
@@ -45,30 +77,36 @@ export default function ProfileHoverCard({ profile }: { profile: Profile }) {
           <div className="flex h-full items-center">
             <div className="flex-shrink-0 ml-4 mr-2">
               <Avatar className="h-24 w-24 shadow-lg bg-gradient-to-b group-hover:scale-105 transition-transform duration-300">
-                <AvatarImage src={profile.avatarUrl} alt={profile.name} />
-                <AvatarFallback>
-                  {profile.name
-                    .split(' ')
-                    .map((name) => name[0].toUpperCase())
-                    .join('')}
-                </AvatarFallback>
+                <AvatarImage
+                  src={profile.avatarUrl || undefined}
+                  alt={t('avatar.altText', { username: profile.username })}
+                />
+                <AvatarFallback>{getInitials(profile.name)}</AvatarFallback>
               </Avatar>
             </div>
 
-            <CardContent className="flex-1 py-4">
+            <CardContent className="flex-1 p-4">
               <div className="flex justify-between items-start gap-2">
                 <div>
                   <h3 className="font-bold text-lg line-clamp-1 group-hover:text-primary transition-colors">
                     {profile.name}
                   </h3>
                   <div className="flex items-center gap-1 text-sm text-muted-foreground">
                     <MapPin className="h-3 w-3" />
-                    <span>{profile.location.slice(0, 30) + '...'}</span>
+                    <span>
+                      {profile.location
+                        ? `${profile.location.slice(0, 30)}...`
+                        : t('location.notAvailable')}
+                    </span>
                   </div>
                   <div className="flex items-center gap-1 text-sm text-muted-foreground">
                     <ShoppingBag className="h-3 w-3" />
                     <span>
-                      {profile.totalSales} {t('stats.totalTransactions.label')}
+                      {typeof profile.totalSales === 'number'
+                        ? `${profile.totalSales} ${t(
+                            'stats.totalTransactions.label',
+                          )}`
+                        : t('stats.noTransactions')}
                     </span>
                   </div>
                 </div>
@@ -77,19 +115,25 @@ export default function ProfileHoverCard({ profile }: { profile: Profile }) {
                     variant="secondary"
                     className="shrink-0 text-xs font-medium opacity-90"
                   >
-                    {'Verified'}
+                    {t('header.verifiedBadge')}
                   </Badge>
                 )}
               </div>
               <p className="text-sm text-muted-foreground flex items-center gap-1">
                 <Calendar className="h-3 w-3" />
-                {t('stats.memberSince.label')}: {profile.memberSince}
+                {profile.memberSince
+                  ? `${t('stats.memberSince.label')}: ${profile.memberSince}`
+                  : t('stats.memberSinceNotAvailable')}
               </p>
               <p className="text-sm text-muted-foreground flex items-center gap-1">
                 <MobileIcon className="h-3 w-3" />
-                {contacts[0]
+                {isLoadingContacts
+                  ? t('contacts.loading')
+                  : contactsError
+                  ? t('contacts.error')
+                  : contacts[0]
                   ? `${contacts[0].name} (${contacts[0].phone_number})`
-                  : 'No contacts'}
+                  : t('contacts.noContacts')}
               </p>
             </CardContent>
           </div>