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

frontend/src/components/ui/appointments/AppointmentsPatientSearch.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { Search } from 'lucide-react';
+import { useTranslations } from 'next-intl';
 import { Button } from '@/components/ui/shared/Button';
 import { Input } from '@/components/ui/shared/Input';
 import type { Patient } from '@/types/patient';
@@ -26,6 +27,9 @@ export function AppointmentsPatientSearch({
   canAddPatient,
   onAddPatient,
 }: AppointmentsPatientSearchProps) {
+  const t = useTranslations('appointments');
+  const tPatients = useTranslations('patients');
+
   const trimmed = search.trim();
   const showAddForEmptyResults =
     trimmed.length > 0 && !loading && patients.length === 0;
@@ -35,7 +39,7 @@ export function AppointmentsPatientSearch({
       <div className="flex flex-col sm:flex-row gap-3 sm:items-center">
         <div className="flex-1">
           <Input
-            placeholder="Search existing patients"
+            placeholder={t('searchPlaceholder')}
             value={search}
             onChange={(e) => onSearchChange(e.target.value)}
             icon={<Search className="h-4 w-4 icon-flat" />}
@@ -47,18 +51,18 @@ export function AppointmentsPatientSearch({
             variant="primary"
             disabled={!canAddPatient}
             onClick={onAddPatient}
-            title={!canAddPatient ? 'You do not have permission to add patients.' : undefined}
+            title={!canAddPatient ? t('noPermissionAdd') : undefined}
           >
-            New Patient
+            {tPatients('newPatient')}
           </Button>
         )}
       </div>
 
       <div className="space-y-2 max-h-72 overflow-y-auto">
-        {loading && <p className="text-sm text-text-muted">Searching…</p>}
+        {loading && <p className="text-sm text-text-muted">{t('searching')}</p>}
 
         {!loading && trimmed.length === 0 && (
-          <p className="text-sm text-text-muted">Type to search patients by name, phone, or email.</p>
+          <p className="text-sm text-text-muted">{t('searchHint')}</p>
         )}
 
         {patients.map((patient) => {
@@ -77,7 +81,9 @@ export function AppointmentsPatientSearch({
               <p className="text-sm font-medium text-text-primary">
                 {patient.firstName} {patient.lastName}
               </p>
-              <p className="text-xs text-text-muted">{patient.phone || patient.email || 'No contact'}</p>
+              <p className="text-xs text-text-muted">
+                {patient.phone || patient.email || tPatients('noContact')}
+              </p>
             </button>
           );
         })}