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

frontend/src/components/ui/shared/ScheduleDayPicker.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { useEffect, useId, useRef, useState } from 'react';
+import { useTranslations } from 'next-intl';
 import { ChevronDown, ChevronLeft, ChevronRight } from 'lucide-react';
 import { addCalendarDays, startOfLocalDay } from '@/components/appointments/appointmentTime';
 
@@ -10,19 +11,19 @@ interface ScheduleDayPickerProps {
   label?: string;
 }
 
-const MONTH_LABELS = [
-  'January',
-  'February',
-  'March',
-  'April',
-  'May',
-  'June',
-  'July',
-  'August',
-  'September',
-  'October',
-  'November',
-  'December',
+const MONTH_KEYS = [
+  'monthJanuary',
+  'monthFebruary',
+  'monthMarch',
+  'monthApril',
+  'monthMay',
+  'monthJune',
+  'monthJuly',
+  'monthAugust',
+  'monthSeptember',
+  'monthOctober',
+  'monthNovember',
+  'monthDecember',
 ] as const;
 
 function daysInMonth(year: number, month: number): number {
@@ -55,12 +56,14 @@ const selectClassName = `
  * Calendar day navigator (arrows + year/month/day panel).
  * Does not restrict past dates — parent pages enforce read-only vs editable for schedule grids/forms.
  */
-export function ScheduleDayPicker({ value, onChange, label = 'Schedule date' }: ScheduleDayPickerProps) {
+export function ScheduleDayPicker({ value, onChange, label }: ScheduleDayPickerProps) {
+  const t = useTranslations('schedule');
   const panelId = useId();
   const rootRef = useRef<HTMLDivElement>(null);
   const [panelOpen, setPanelOpen] = useState(false);
 
   const normalizedValue = startOfLocalDay(value);
+  const resolvedLabel = label ?? t('defaultLabel');
 
   const labelText = normalizedValue.toLocaleDateString(undefined, {
     weekday: 'short',
@@ -108,13 +111,13 @@ export function ScheduleDayPicker({ value, onChange, label = 'Schedule date' }:
 
   return (
     <div ref={rootRef} className="relative w-full max-w-md">
-      <p className="text-sm font-medium text-text-secondary mb-2">{label}</p>
+      <p className="text-sm font-medium text-text-secondary mb-2">{resolvedLabel}</p>
       <div className="flex items-center gap-1 rounded-[var(--radius-md)] border border-border bg-background-secondary/90 px-1 py-1 shadow-[inset_0_1px_0_rgba(255,255,255,0.02)]">
         <button
           type="button"
           onClick={() => onChange(addCalendarDays(normalizedValue, -1))}
           className="shrink-0 rounded-[var(--radius-sm)] p-2 text-text-muted hover:text-text-primary hover:bg-background-card/80 focus:outline-none focus:ring-2 focus:ring-primary/35"
-          aria-label="Previous day"
+          aria-label={t('previousDay')}
         >
           <ChevronLeft className="h-4 w-4 icon-flat" />
         </button>
@@ -138,7 +141,7 @@ export function ScheduleDayPicker({ value, onChange, label = 'Schedule date' }:
           type="button"
           onClick={() => onChange(addCalendarDays(normalizedValue, 1))}
           className="shrink-0 rounded-[var(--radius-sm)] p-2 text-text-muted hover:text-text-primary hover:bg-background-card/80 focus:outline-none focus:ring-2 focus:ring-primary/35"
-          aria-label="Next day"
+          aria-label={t('nextDay')}
         >
           <ChevronRight className="h-4 w-4 icon-flat" />
         </button>
@@ -148,7 +151,7 @@ export function ScheduleDayPicker({ value, onChange, label = 'Schedule date' }:
         <div
           id={panelId}
           role="dialog"
-          aria-label="Choose schedule date"
+          aria-label={t('chooseDate')}
           className="absolute left-0 right-0 top-full z-50 mt-2 rounded-[var(--radius-md)] border border-border bg-background-secondary p-3 shadow-lg"
         >
           <div className="grid grid-cols-3 gap-2">
@@ -157,7 +160,7 @@ export function ScheduleDayPicker({ value, onChange, label = 'Schedule date' }:
                 htmlFor={`${panelId}-year`}
                 className="mb-1 block text-xs font-medium text-text-muted"
               >
-                Year
+                {t('year')}
               </label>
               <div className="relative">
                 <select
@@ -186,7 +189,7 @@ export function ScheduleDayPicker({ value, onChange, label = 'Schedule date' }:
                 htmlFor={`${panelId}-month`}
                 className="mb-1 block text-xs font-medium text-text-muted"
               >
-                Month
+                {t('month')}
               </label>
               <div className="relative">
                 <select
@@ -197,9 +200,9 @@ export function ScheduleDayPicker({ value, onChange, label = 'Schedule date' }:
                   }
                   className={selectClassName}
                 >
-                  {MONTH_LABELS.map((name, index) => (
-                    <option key={name} value={index}>
-                      {name}
+                  {MONTH_KEYS.map((key, index) => (
+                    <option key={key} value={index}>
+                      {t(key)}
                     </option>
                   ))}
                 </select>
@@ -215,7 +218,7 @@ export function ScheduleDayPicker({ value, onChange, label = 'Schedule date' }:
                 htmlFor={`${panelId}-day`}
                 className="mb-1 block text-xs font-medium text-text-muted"
               >
-                Day
+                {t('day')}
               </label>
               <div className="relative">
                 <select