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

2026-06-20 14:51:43 +03:30
parent 284fbd08aa
commit b2f4dfa4ca
52 changed files with 3306 additions and 1041 deletions
--- a/frontend/src/components/ui/shared/DialogCloseButton.tsx
+++ b/frontend/src/components/ui/shared/DialogCloseButton.tsx
@@ -1,5 +1,6 @@
 'use client';

+import { useTranslations } from 'next-intl';
 import { X } from 'lucide-react';

 type DialogCloseButtonProps = {
@@ -8,12 +9,14 @@ type DialogCloseButtonProps = {
 };

 export function DialogCloseButton({ onClick, className = '' }: DialogCloseButtonProps) {
+  const t = useTranslations('common');
+
  return (
    <button
      type="button"
      onClick={onClick}
      className={`shrink-0 rounded-[var(--radius-sm)] p-1.5 text-text-muted hover:text-text-primary hover:bg-background-secondary/80 focus:outline-none focus:ring-2 focus:ring-primary/35 ${className}`}
-      aria-label="Close"
+      aria-label={t('close')}
    >
      <X className="h-5 w-5 icon-flat" />
    </button>
--- a/frontend/src/components/ui/shared/OrganizationCard.tsx
+++ b/frontend/src/components/ui/shared/OrganizationCard.tsx
@@ -1,5 +1,7 @@
-// src/components/ui/OrganizationCard.tsx
+'use client';
+
 import React from 'react';
+import { useTranslations } from 'next-intl';
 import { ChevronRight } from 'lucide-react';
 import type { Organization } from '@/types/organization';
 import { organizationTypeIcon } from '@/components/shared/organizationTypeIcon';
@@ -13,8 +15,11 @@ export const OrganizationCard: React.FC<OrganizationCardProps> = ({
  organization,
  onSelect,
 }) => {
+  const t = useTranslations('organizations');
+  const tAuth = useTranslations('auth');
  const Icon = organizationTypeIcon(organization.type);
-  const typeText = organization.type === 'CLINIC' ? 'Dental Clinic' : 'Dental Lab';
+  const typeText =
+    organization.type === 'CLINIC' ? tAuth('dentalClinic') : tAuth('dentalLab');

  return (
    <button
@@ -29,11 +34,14 @@ export const OrganizationCard: React.FC<OrganizationCardProps> = ({
        <p className="text-sm text-text-secondary">{typeText}</p>
        {organization.plan && (
          <p className="text-xs text-text-muted mt-1">
-            Plan: {organization.plan.name} • {organization.plan.maxUsers} users
+            {t('planLabel', {
+              name: organization.plan.name,
+              maxUsers: organization.plan.maxUsers,
+            })}
          </p>
        )}
      </div>
      <ChevronRight className="h-5 w-5 icon-flat text-text-muted group-hover:text-primary transition-colors" />
    </button>
  );
-};
+};
--- a/frontend/src/components/ui/shared/ScheduleDayPicker.tsx
+++ b/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