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

frontend/src/components/ui/treatment/PastTreatmentsPanel.tsx

@@ -1,9 +1,18 @@
 'use client';
 
+import { useTranslations } from 'next-intl';
 import { FileText } from 'lucide-react';
 import type { PastTreatment } from '@/types/treatment';
 import { CaseSentLabel } from '@/components/ui/treatment/CaseSentLabel';
 
+const TREATMENT_TYPE_KEYS = {
+  consultation: 'typeConsultation',
+  filling: 'typeFilling',
+  endo: 'typeEndo',
+  visit: 'typeVisit',
+  hygiene: 'typeHygiene',
+} as const;
+
 interface PastTreatmentsPanelProps {
   items: PastTreatment[];
   loading?: boolean;
@@ -15,43 +24,50 @@ export function PastTreatmentsPanel({
   loading,
   onReviewTreatment,
 }: PastTreatmentsPanelProps) {
+  const t = useTranslations('treatment');
+  const tCommon = useTranslations('common');
+
   return (
     <div className="surface-card p-4 space-y-3">
       <div>
-        <h3 className="text-sm font-semibold text-text-primary">Previous treatments</h3>
+        <h3 className="text-sm font-semibold text-text-primary">{t('historyTitle')}</h3>
         <p className="text-[11px] text-text-muted mt-0.5">
-          Completed treatments for this patient. Each case is listed separately.
+          {t('historySubtitle')}
         </p>
       </div>
 
-      {loading && <p className="text-sm text-text-muted">Loading history…</p>}
+      {loading && <p className="text-sm text-text-muted">{t('loadingHistory')}</p>}
 
       {!loading && items.length === 0 && (
-        <p className="text-sm text-text-muted">No prior treatments for this patient.</p>
+        <p className="text-sm text-text-muted">{t('historyEmpty')}</p>
       )}
 
       <div className="space-y-3 max-h-[min(420px,50vh)] overflow-y-auto pr-1">
-        {items.map((t) => (
+        {items.map((treatment) => (
           <article
-            key={t.id}
+            key={treatment.id}
             className="border border-border/70 rounded-[var(--radius-md)] p-2.5 bg-background-secondary/40 space-y-2"
           >
             <div className="flex items-start justify-between gap-2">
               <div className="min-w-0">
-                <p className="text-sm font-medium text-text-primary truncate">{t.title}</p>
-                <p className="text-[11px] text-text-secondary capitalize mt-0.5">Status: {t.status}</p>
+                <p className="text-sm font-medium text-text-primary truncate">{treatment.title}</p>
+                <p className="text-[11px] text-text-secondary capitalize mt-0.5">
+                  {t('statusLabel')} {treatment.status}
+                </p>
               </div>
               <time
                 className="text-[11px] text-text-muted tabular-nums shrink-0"
-                dateTime={t.treatmentAt}
+                dateTime={treatment.treatmentAt}
               >
-                {new Date(t.treatmentAt).toLocaleDateString()}
+                {new Date(treatment.treatmentAt).toLocaleDateString()}
               </time>
             </div>
 
             <div className="space-y-1.5">
-              {t.cases.map((c, idx) => {
+              {treatment.cases.map((c, idx) => {
                 const attachments = c.attachmentMetas ?? [];
+                const typeKey = TREATMENT_TYPE_KEYS[c.treatmentType as keyof typeof TREATMENT_TYPE_KEYS];
+                const typeLabel = typeKey ? t(typeKey) : c.treatmentType;
                 return (
                   <div
                     key={c.id}
@@ -59,7 +75,7 @@ export function PastTreatmentsPanel({
                   >
                     <div className="flex items-center justify-between gap-2">
                       <p className="text-xs font-medium text-text-primary capitalize">
-                        Case {idx + 1} · {c.treatmentType}
+                        {t('historyCaseLabel', { n: idx + 1, type: typeLabel })}
                       </p>
                       {c.sentAt && (
                         <CaseSentLabel
@@ -69,17 +85,17 @@ export function PastTreatmentsPanel({
                       )}
                     </div>
                     <p className="text-[11px] text-text-secondary">
-                      Teeth: {c.teeth.length ? [...c.teeth].sort().join(', ') : 'None selected'}
+                      {t('teethLabel')} {c.teeth.length ? [...c.teeth].sort().join(', ') : t('teethNone')}
                     </p>
                     {c.notes?.trim() && (
                       <p className="text-[11px] text-text-muted line-clamp-2">{c.notes}</p>
                     )}
                     <div>
                       <p className="text-[10px] uppercase tracking-wide text-text-muted mb-1">
-                        Attachments
+                        {t('attachments')}
                       </p>
                       {attachments.length === 0 ? (
-                        <p className="text-[11px] text-text-muted">None</p>
+                        <p className="text-[11px] text-text-muted">{tCommon('none')}</p>
                       ) : (
                         <ul className="space-y-0.5">
                           {attachments.map((doc) => (
@@ -106,10 +122,10 @@ export function PastTreatmentsPanel({
               <div className="pt-1 flex justify-end">
                 <button
                   type="button"
-                  onClick={() => onReviewTreatment(t)}
+                  onClick={() => onReviewTreatment(treatment)}
                   className="text-xs text-primary hover:underline focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/35 rounded-[var(--radius-sm)] px-1"
                 >
-                  Review details
+                  {t('reviewDetails')}
                 </button>
               </div>
             )}