feature: localization's first implmentation done. all frontend hardcoded text is now localized.

frontend/src/app/[locale]/(dashboard)/organizations/page.tsx

@@ -1,6 +1,7 @@
 'use client';
 
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
+import { useTranslations } from 'next-intl';
 import { useToast } from '@/lib/hooks/useToast';
 import { Check, Trash2, UserPlus, X } from 'lucide-react';
 import { useAuth } from '@/lib/hooks/useAuth';
@@ -28,32 +29,6 @@ function formatOrganizationStatusLabel(status: string): string {
   return lower.charAt(0).toUpperCase() + lower.slice(1);
 }
 
-function formatConnectionStatusLabel(
-  row: CounterpartItemDto,
-  currentOrganizationId: string,
-): string {
-  if (row.status === 'PENDING') {
-    if (
-      row.pendingInvitationId &&
-      row.requestedByOrganizationId === currentOrganizationId
-    ) {
-      return 'Invitation pending';
-    }
-    return 'Connection request pending';
-  }
-  if (row.status === 'ACTIVE') return 'Connected';
-  if (row.status === 'REJECTED') return 'Connection request declined';
-  return formatOrganizationStatusLabel(row.status);
-}
-
-function formatApiMessage(err: unknown): string {
-  if (!err || typeof err !== 'object') return 'Something went wrong';
-  const m = (err as ApiError).message;
-  if (Array.isArray(m)) return m.join(', ');
-  if (typeof m === 'string') return m;
-  return 'Something went wrong';
-}
-
 function formatTableDate(value: string): string {
   const d = new Date(value);
   if (Number.isNaN(d.getTime())) return '\u2014';
@@ -63,10 +38,42 @@ function formatTableDate(value: string): string {
 type TableMode = 'existing' | 'search';
 
 export default function OrganizationsPage() {
+  const t = useTranslations('organizations');
+  const tNav = useTranslations('nav');
+  const tCommon = useTranslations('common');
   const { currentOrganization } = useAuth();
   const [loading, setLoading] = useState(true);
   const toast = useToast();
 
+  const formatApiMessage = useCallback(
+    (err: unknown): string => {
+      if (!err || typeof err !== 'object') return tCommon('errorGeneric');
+      const m = (err as ApiError).message;
+      if (Array.isArray(m)) return m.join(', ');
+      if (typeof m === 'string') return m;
+      return tCommon('errorGeneric');
+    },
+    [tCommon],
+  );
+
+  const formatConnectionStatusLabel = useCallback(
+    (row: CounterpartItemDto, currentOrganizationId: string): string => {
+      if (row.status === 'PENDING') {
+        if (
+          row.pendingInvitationId &&
+          row.requestedByOrganizationId === currentOrganizationId
+        ) {
+          return t('statusInvitationPending');
+        }
+        return t('statusConnectionPending');
+      }
+      if (row.status === 'ACTIVE') return t('statusConnected');
+      if (row.status === 'REJECTED') return t('statusDeclined');
+      return formatOrganizationStatusLabel(row.status);
+    },
+    [t],
+  );
+
   const [query, setQuery] = useState('');
   const [mode, setMode] = useState<TableMode>('existing');
   const [searching, setSearching] = useState(false);
@@ -91,8 +98,9 @@ export default function OrganizationsPage() {
     pruneAcceptedLinks,
   } = useOrganizationInviteLinkCopy(currentOrganization?.id);
 
-  const counterpartLabel = currentOrganization?.type === 'LAB' ? 'Clinic' : 'Lab';
-  const tabLabel = currentOrganization?.type === 'LAB' ? 'Clinics' : 'Labs';
+  const counterpart =
+    currentOrganization?.type === 'LAB' ? t('counterpartClinic') : t('counterpartLab');
+  const tabLabel = currentOrganization?.type === 'LAB' ? tNav('clinics') : tNav('labs');
 
   const existingRows = items;
 
@@ -142,7 +150,7 @@ export default function OrganizationsPage() {
     toast.setError('');
     try {
       await organizationApi.createConnectionRequest(targetOrganizationId);
-      toast.showSuccess(`${counterpartLabel} connection request sent.`);
+      toast.showSuccess(t('successConnectionSent', { counterpart }));
       setSearchResults([]);
       setQuery('');
       setMode('existing');
@@ -163,7 +171,7 @@ export default function OrganizationsPage() {
         ownerEmail: manualOwnerEmail.trim(),
       });
       storeInviteLink(res.data.invitationId, manualOwnerEmail, res.data.invitationUrl);
-      toast.showSuccess(`Invitation link created for ${manualOwnerEmail.trim()}`);
+      toast.showSuccess(t('successInviteCreated', { email: manualOwnerEmail.trim() }));
       setManualOrganizationName('');
       setManualOwnerEmail('');
       setShowInviteForm(false);
@@ -206,7 +214,7 @@ export default function OrganizationsPage() {
           await loadInvitationHistory();
         },
       });
-      toast.showSuccess('Invitation link copied to clipboard.');
+      toast.showSuccess(t('successLinkCopied'));
     } catch (e) {
       toast.showError(formatApiMessage(e));
     }
@@ -232,7 +240,7 @@ export default function OrganizationsPage() {
           },
         },
       );
-      toast.showSuccess('Invitation link copied to clipboard.');
+      toast.showSuccess(t('successLinkCopied'));
     } catch (e) {
       toast.showError(formatApiMessage(e));
     }
@@ -244,7 +252,7 @@ export default function OrganizationsPage() {
     try {
       await organizationApi.respondToConnectionRequest(connectionId, action);
       toast.showSuccess(
-        action === 'ACCEPT' ? 'Connection request accepted.' : 'Connection request declined.',
+        action === 'ACCEPT' ? t('successAccepted') : t('successDeclined'),
       );
       await loadList();
     } catch (e) {
@@ -259,7 +267,7 @@ export default function OrganizationsPage() {
     toast.setError('');
     try {
       await organizationApi.deleteConnection(connectionId);
-      toast.showSuccess('Connection removed.');
+      toast.showSuccess(t('successRemoved'));
       await loadList();
     } catch (e) {
       toast.showError(formatApiMessage(e));
@@ -276,7 +284,7 @@ export default function OrganizationsPage() {
   }
 
   if (!currentOrganization) {
-    return <p className="text-sm text-text-secondary">Loading organization...</p>;
+    return <p className="text-sm text-text-secondary">{t('loadingOrganization')}</p>;
   }
 
   return (
@@ -284,13 +292,10 @@ export default function OrganizationsPage() {
       <div className="flex flex-col gap-1 sm:flex-row sm:items-start sm:justify-between">
         <div>
           <h1 className="text-2xl font-semibold text-text-primary">{tabLabel}</h1>
-          <p className="text-sm text-text-secondary mt-1">
-            Search organizations, send connection requests to existing accounts, or invitation
-            links when they are not on DyoLink yet.
-          </p>
+          <p className="text-sm text-text-secondary mt-1">{t('subtitle')}</p>
         </div>
         <Button type="button" size="sm" onClick={() => void openInvitationHistory()}>
-          Invitation History
+          {t('invitationHistory')}
         </Button>
       </div>
 
@@ -300,7 +305,7 @@ export default function OrganizationsPage() {
         value={query}
         onChange={setQuery}
         onSubmit={() => void runSearch()}
-        placeholder={`Search ${counterpartLabel.toLowerCase()} by name, email, or phone...`}
+        placeholder={t('searchPlaceholder', { counterpart: counterpart.toLowerCase() })}
         actions={
           <>
             <button
@@ -309,7 +314,7 @@ export default function OrganizationsPage() {
               disabled={searching}
               className="px-4 py-2 rounded-[var(--radius-sm)] text-sm font-medium border bg-primary-soft text-primary border-primary/50 disabled:opacity-60"
             >
-              Search
+              {tCommon('search')}
             </button>
             {mode === 'search' && (
               <button
@@ -317,7 +322,7 @@ export default function OrganizationsPage() {
                 onClick={clearSearchView}
                 className="px-4 py-2 rounded-[var(--radius-sm)] text-sm font-medium border text-text-secondary border-border/40 hover:bg-background-card/70 hover:border-border"
               >
-                Back to list
+                {t('backToList')}
               </button>
             )}
           </>
@@ -328,19 +333,19 @@ export default function OrganizationsPage() {
         headers={
             <tr>
               <th className="px-6 py-3 text-left text-xs font-medium text-text-muted uppercase tracking-wider">
-                Organization
+                {t('tableOrganization')}
               </th>
               <th className="px-6 py-3 text-left text-xs font-medium text-text-muted uppercase tracking-wider">
-                Owner email
+                {t('tableOwnerEmail')}
               </th>
               <th className="px-6 py-3 text-left text-xs font-medium text-text-muted uppercase tracking-wider">
-                Date
+                {t('tableDate')}
               </th>
               <th className="px-6 py-3 text-center text-xs font-medium text-text-muted uppercase tracking-wider">
-                Status
+                {t('tableStatus')}
               </th>
               <th className="px-6 py-3 text-right text-xs font-medium text-text-muted uppercase tracking-wider">
-                Action
+                {t('tableAction')}
               </th>
             </tr>
         }
@@ -349,14 +354,14 @@ export default function OrganizationsPage() {
             {loading ? (
               <tr>
                 <td colSpan={5} className="px-6 py-8 text-sm text-text-secondary">
-                  Loading...
+                  {tCommon('loadingEllipsis')}
                 </td>
               </tr>
             ) : mode === 'existing' ? (
               existingRows.length === 0 ? (
                 <tr>
                   <td colSpan={5} className="px-6 py-8 text-sm text-text-secondary">
-                    No connections yet. Search to send a connection request or an invitation link.
+                    {t('emptyConnections')}
                   </td>
                 </tr>
               ) : (
@@ -401,8 +406,8 @@ export default function OrganizationsPage() {
                                 className="p-2 rounded-md text-text-secondary hover:bg-background-card/80 hover:text-text-primary disabled:text-text-muted disabled:opacity-50"
                                 disabled={pendingConnectionRowId !== null && pendingConnectionRowId !== row.id}
                                 onClick={() => void respondToPendingConnection(row.id, 'ACCEPT')}
-                                aria-label="Accept connection request"
-                                title="Accept connection request"
+                                aria-label={t('acceptRequest')}
+                                title={t('acceptRequest')}
                               >
                                 <Check className="w-4 h-4" />
                               </button>
@@ -411,8 +416,8 @@ export default function OrganizationsPage() {
                                 className="p-2 rounded-md text-text-secondary hover:bg-red-500/15 hover:text-red-600 disabled:text-text-muted disabled:opacity-50"
                                 disabled={pendingConnectionRowId !== null && pendingConnectionRowId !== row.id}
                                 onClick={() => void respondToPendingConnection(row.id, 'REJECT')}
-                                aria-label="Decline connection request"
-                                title="Decline connection request"
+                                aria-label={t('declineRequest')}
+                                title={t('declineRequest')}
                               >
                                 <X className="w-4 h-4" />
                               </button>
@@ -424,8 +429,8 @@ export default function OrganizationsPage() {
                               className="p-2 rounded-md text-text-secondary hover:bg-red-500/15 hover:text-red-600 disabled:text-text-muted disabled:opacity-50"
                               disabled={deleteConnectionRowId !== null && deleteConnectionRowId !== row.id}
                               onClick={() => void deleteConnection(row.id)}
-                              aria-label="Remove connection"
-                              title="Remove connection"
+                              aria-label={t('removeConnection')}
+                              title={t('removeConnection')}
                             >
                               <Trash2 className="w-4 h-4" />
                             </button>
@@ -441,9 +446,9 @@ export default function OrganizationsPage() {
                 <tr key={r.id} className="hover:bg-background-secondary/45">
                   <td className="px-6 py-1.5 text-sm font-medium text-text-primary">{r.name}</td>
                   <td className="px-6 py-1.5 text-sm text-text-secondary">{r.owner.email}</td>
-                  <td className="px-6 py-1.5 text-sm text-text-secondary">Today</td>
+                  <td className="px-6 py-1.5 text-sm text-text-secondary">{t('statusToday')}</td>
                   <td className="px-6 py-1.5 text-center align-middle">
-                    <Badge variant="default" fixedWidth={false}>Found</Badge>
+                    <Badge variant="default" fixedWidth={false}>{t('statusFound')}</Badge>
                   </td>
                   <td className="px-6 py-1.5 text-right">
                     <button
@@ -453,8 +458,8 @@ export default function OrganizationsPage() {
                         pendingConnectionRowId !== null && pendingConnectionRowId !== r.id
                       }
                       onClick={() => void submitConnectionRequest(r.id)}
-                      aria-label="Send connection request"
-                      title="Send connection request"
+                      aria-label={t('sendRequest')}
+                      title={t('sendRequest')}
                     >
                       <UserPlus className="w-4 h-4" />
                     </button>
@@ -466,22 +471,22 @@ export default function OrganizationsPage() {
                 <td colSpan={5} className="px-6 py-6">
                   <div className="flex flex-col gap-3">
                     <p className="text-sm text-text-secondary">
-                      No organization found in directory search.
+                      {t('noDirectoryResults')}
                     </p>
                     <div className="flex flex-wrap items-center gap-2">
                       <Button type="button" onClick={() => setShowInviteForm((v) => !v)}>
-                        {showInviteForm ? 'Hide invitation fields' : 'Send invitation link'}
+                        {showInviteForm ? t('hideInvitationFields') : t('sendInvitationLink')}
                       </Button>
                     </div>
                     {showInviteForm && (
                       <div className="grid gap-3 sm:grid-cols-3 mt-1">
                         <Input
-                          label={`${counterpartLabel} name`}
+                          label={t('counterpartNameLabel', { counterpart })}
                           value={manualOrganizationName}
                           onChange={(e) => setManualOrganizationName(e.target.value)}
                         />
                         <Input
-                          label="Owner email"
+                          label={t('ownerEmailLabel')}
                           type="email"
                           value={manualOwnerEmail}
                           onChange={(e) => setManualOwnerEmail(e.target.value)}
@@ -494,7 +499,7 @@ export default function OrganizationsPage() {
                             onClick={() => void sendInvite()}
                             className="w-full"
                           >
-                            Send invitation
+                            {t('sendInvitation')}
                           </Button>
                         </div>
                       </div>