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

frontend/src/components/staff/WorkingHoursEditor.tsx

@@ -1,11 +1,12 @@
 'use client';
 
 import { Plus, Trash2 } from 'lucide-react';
+import { useTranslations } from 'next-intl';
 import { Button } from '@/components/ui/shared/Button';
 import { Checkbox } from '@/components/ui/shared/Checkbox';
 import {
   MINUTES_PER_DAY,
-  WEEKDAY_LABELS,
+  WEEKDAY_KEYS,
   minutesToTimeInput,
   timeInputToMinutes,
   type WorkingHoursEditorDay,
@@ -29,6 +30,8 @@ export function WorkingHoursEditor({
   onAutoRepeatWeeklyChange,
   disabled = false,
 }: WorkingHoursEditorProps) {
+  const t = useTranslations('staff.workingHours');
+
   function updateDay(dayOfWeek: number, patch: Partial<WorkingHoursEditorDay>) {
     onDaysChange(
       days.map((day) => (day.dayOfWeek === dayOfWeek ? { ...day, ...patch } : day)),
@@ -71,10 +74,7 @@ export function WorkingHoursEditor({
 
   return (
     <div className="space-y-4">
-      <p className="text-sm text-text-secondary">
-        Set weekly working hours for this provider. The appointments grid uses these hours to show
-        bookable time slots.
-      </p>
+      <p className="text-sm text-text-secondary">{t('intro')}</p>
 
       <div className="space-y-3">
         {days.map((day) => (
@@ -84,12 +84,12 @@ export function WorkingHoursEditor({
           >
             <div className="flex items-center justify-between gap-3">
               <span className="text-sm font-medium text-text-primary w-10">
-                {WEEKDAY_LABELS[day.dayOfWeek]}
+                {t(WEEKDAY_KEYS[day.dayOfWeek])}
               </span>
               <Checkbox
                 checked={day.isWorking}
                 disabled={disabled}
-                label="Working day"
+                label={t('workingDay')}
                 onChange={(checked) => {
                   updateDay(day.dayOfWeek, {
                     isWorking: checked,
@@ -108,7 +108,7 @@ export function WorkingHoursEditor({
                 {day.shifts.map((shift, shiftIndex) => (
                   <div key={shiftIndex} className="flex items-end gap-2">
                     <div className="flex-1">
-                      <label className="block text-xs text-text-muted mb-1">Start</label>
+                      <label className="block text-xs text-text-muted mb-1">{t('start')}</label>
                       <input
                         type="time"
                         step={300}
@@ -121,7 +121,7 @@ export function WorkingHoursEditor({
                       />
                     </div>
                     <div className="flex-1">
-                      <label className="block text-xs text-text-muted mb-1">End</label>
+                      <label className="block text-xs text-text-muted mb-1">{t('end')}</label>
                       <input
                         type="time"
                         step={300}
@@ -137,7 +137,7 @@ export function WorkingHoursEditor({
                       type="button"
                       disabled={disabled || day.shifts.length <= 1}
                       className="p-2 rounded-md text-text-muted hover:text-red-500 hover:bg-red-500/10 disabled:opacity-40 disabled:cursor-not-allowed"
-                      aria-label="Remove shift"
+                      aria-label={t('removeShift')}
                       onClick={() => removeShift(day.dayOfWeek, shiftIndex)}
                     >
                       <Trash2 className="w-4 h-4" />
@@ -152,7 +152,7 @@ export function WorkingHoursEditor({
                   onClick={() => addShift(day.dayOfWeek)}
                 >
                   <Plus className="w-3.5 h-3.5 mr-1" />
-                  Add shift
+                  {t('addShift')}
                 </Button>
               </div>
             )}
@@ -163,7 +163,7 @@ export function WorkingHoursEditor({
       <Checkbox
         checked={autoRepeatWeekly}
         disabled={disabled}
-        label="Repeat these hours at the start of each week (copy forward on Monday)"
+        label={t('autoRepeatWeekly')}
         onChange={onAutoRepeatWeeklyChange}
       />
     </div>