Merge branch 'master' into feature/tab-warning-flag

2026-06-22 11:20:17 +03:30
parent 2f99abbb9e 320cf11d12
commit 770b13bf45
92 changed files with 6547 additions and 1535 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/LanguageToggle.tsx
+++ b/frontend/src/components/ui/shared/LanguageToggle.tsx
@@ -0,0 +1,94 @@
+'use client';
+
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { Globe, Check } from 'lucide-react';
+import { useLocale, useTranslations } from 'next-intl';
+import { usePathname, useRouter } from '@/i18n/navigation';
+import { useAuth } from '@/lib/hooks/useAuth';
+import { authApi } from '@/lib/api/auth';
+import { locales, type AppLocale } from '@/i18n/routing';
+
+const LOCALE_OPTIONS: AppLocale[] = [...locales];
+
+export function LanguageToggle() {
+  const t = useTranslations('language');
+  const locale = useLocale() as AppLocale;
+  const router = useRouter();
+  const pathname = usePathname();
+  const { user, setUserLanguage } = useAuth();
+  const [open, setOpen] = useState(false);
+  const menuRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const onDocClick = (e: MouseEvent) => {
+      if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener('mousedown', onDocClick);
+    return () => document.removeEventListener('mousedown', onDocClick);
+  }, []);
+
+  const switchLocale = useCallback(
+    async (next: AppLocale) => {
+      if (next === locale) {
+        setOpen(false);
+        return;
+      }
+
+      if (user) {
+        setUserLanguage(next);
+        try {
+          await authApi.updateLanguage(next);
+        } catch {
+          /* keep optimistic locale in client state */
+        }
+      }
+
+      router.replace(pathname, { locale: next });
+      setOpen(false);
+    },
+    [locale, pathname, router, setUserLanguage, user],
+  );
+
+  return (
+    <div className="relative" ref={menuRef}>
+      <button
+        type="button"
+        onClick={() => setOpen((value) => !value)}
+        className="inline-flex h-9 shrink-0 items-center justify-center gap-1.5 rounded-[var(--radius-md)] border border-border/60 bg-background-secondary/80 px-2.5 text-text-primary hover:border-border-strong hover:bg-background-card/80 transition-colors"
+        aria-label={t('selectLanguage')}
+        aria-expanded={open}
+        aria-haspopup="listbox"
+        title={t('label')}
+      >
+        <Globe className="h-[18px] w-[18px] icon-flat" />
+        <span className="text-xs font-medium uppercase">{locale}</span>
+      </button>
+
+      {open && (
+        <ul
+          role="listbox"
+          aria-label={t('selectLanguage')}
+          className="absolute right-0 z-[200] mt-2 min-w-[10rem] rounded-[var(--radius-md)] border border-border bg-background-secondary/95 py-1 shadow-lg backdrop-blur-sm"
+        >
+          {LOCALE_OPTIONS.map((option) => {
+            const selected = option === locale;
+            return (
+              <li key={option} role="option" aria-selected={selected}>
+                <button
+                  type="button"
+                  className="flex w-full items-center justify-between gap-3 px-3 py-2 text-sm text-text-primary hover:bg-background-card/70"
+                  onClick={() => void switchLocale(option)}
+                >
+                  <span>{t(option)}</span>
+                  {selected && <Check className="h-4 w-4 text-primary shrink-0" />}
+                </button>
+              </li>
+            );
+          })}
+        </ul>
+      )}
+    </div>
+  );
+}
--- 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
--- a/frontend/src/components/ui/shared/Sidebar.tsx
+++ b/frontend/src/components/ui/shared/Sidebar.tsx
@@ -1,8 +1,8 @@
 'use client';

-import Link from 'next/link';
 import { memo, useMemo } from 'react';
-import { usePathname } from 'next/navigation';
+import { useTranslations } from 'next-intl';
+import { Link, usePathname } from '@/i18n/navigation';
 import {
  LayoutDashboard,
  Users,
@@ -20,56 +20,48 @@ import {
  organizationTypeIcon,
 } from '@/components/shared/organizationTypeIcon';

-const menu = [
-  { name: 'Dashboard', path: '/today', icon: LayoutDashboard, read: 'TAB_TODAY_READ' as const },
-  { name: 'Staff', path: '/staff', icon: UserCog, read: 'TAB_STAFF_READ' as const },
-  { name: 'Patients', path: '/patients', icon: Users, read: 'TAB_PATIENTS_READ' as const },
-  { name: 'Appointment', path: '/appointments', icon: Calendar, read: 'TAB_APPOINTMENTS_READ' as const },
-  { name: 'Treatment', path: '/treatment', icon: FlaskConical, read: 'TAB_TREATMENT_READ' as const },
-  { name: 'Billing', path: '/billing', icon: CreditCard, read: 'TAB_BILLING_READ' as const },
-  { name: 'Reports', path: '/reports', icon: FileText, read: 'TAB_REPORTS_READ' as const },
-];
-
 function Sidebar() {
+  const t = useTranslations('nav');
+  const tCommon = useTranslations('common');
  const pathname = usePathname();
  const { currentOrganization } = useAuth();
  const pendingConnectionsCount = usePendingConnectionsCount();
-  const counterpartLabel = currentOrganization?.type === 'LAB' ? 'Clinics' : 'Labs';
-  const organizationsTabIcon = organizationTypeIcon(
-    counterpartOrganizationType(currentOrganization?.type),
+
+
+  const menu = useMemo(
+    () => [
+      { name: t('dashboard'), path: '/today', icon: LayoutDashboard, read: 'TAB_TODAY_READ' as const },
+      { name: t('staff'), path: '/staff', icon: UserCog, read: 'TAB_STAFF_READ' as const },
+      {
+        name: currentOrganization?.type === 'LAB' ? t('clinics') : t('labs'),
+        path: '/organizations',
+        icon: organizationTypeIcon(counterpartOrganizationType(currentOrganization?.type)),
+        read: 'TAB_ORGANIZATIONS_READ' as const,
+      },
+      { name: t('patients'), path: '/patients', icon: Users, read: 'TAB_PATIENTS_READ' as const },
+      { name: t('appointment'), path: '/appointments', icon: Calendar, read: 'TAB_APPOINTMENTS_READ' as const },
+      { name: t('treatment'), path: '/treatment', icon: FlaskConical, read: 'TAB_TREATMENT_READ' as const },
+      { name: t('billing'), path: '/billing', icon: CreditCard, read: 'TAB_BILLING_READ' as const },
+      { name: t('reports'), path: '/reports', icon: FileText, read: 'TAB_REPORTS_READ' as const },
+    ],
+    [currentOrganization?.type, t],
  );

  const visibleMenu = useMemo(
-    () => {
-      const withCounterpartTab = [
-        menu[0],
-        menu[1],
-        {
-          name: counterpartLabel,
-          path: '/organizations',
-          icon: organizationsTabIcon,
-          read: 'TAB_ORGANIZATIONS_READ' as const,
-        },
-        menu[2],
-        menu[3],
-        menu[4],
-        menu[5],
-        menu[6],
-      ];
-      return withCounterpartTab.filter((item) => {
+    () =>
+      menu.filter((item) => {
        if (item.path === '/appointments') {
          return canAccessAppointmentsSection(currentOrganization);
        }
        return canViewTab(currentOrganization, item.read);
-      });
-    },
-    [counterpartLabel, organizationsTabIcon, currentOrganization],
+      }),
+    [currentOrganization, menu],
  );

  return (
    <aside className="w-64 bg-background-secondary/90 border-r border-border text-text-primary flex flex-col">
      <div className="h-[71px] px-4 flex items-center">
-        <h1 className="text-lg font-medium tracking-tight">DyoLink</h1>
+        <h1 className="text-lg font-medium tracking-tight">{tCommon('appName')}</h1>
      </div>
      <div className="mx-4 border-b border-border/70" />

@@ -82,7 +74,7 @@ function Sidebar() {

          return (
            <Link
-              key={item.name}
+              key={item.path}
              href={item.path}
              prefetch
              className={`flex items-center gap-3 px-3 py-2.5 rounded-[var(--radius-sm)] border transition-colors ${
@@ -109,4 +101,4 @@ function Sidebar() {
  );
 }

-export default memo(Sidebar);
+export default memo(Sidebar);
--- a/frontend/src/components/ui/shared/ThemeToggle.tsx
+++ b/frontend/src/components/ui/shared/ThemeToggle.tsx
@@ -2,9 +2,11 @@

 import { useEffect, useState } from 'react';
 import { Moon, Sun } from 'lucide-react';
+import { useTranslations } from 'next-intl';
 import { applyTheme, getStoredTheme, type ThemeMode } from '@/lib/theme';

 export function ThemeToggle() {
+  const t = useTranslations('theme');
  const [mode, setMode] = useState<ThemeMode | null>(null);

  useEffect(() => {
@@ -34,8 +36,8 @@ export function ThemeToggle() {
      type="button"
      onClick={handleClick}
      className="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-[var(--radius-md)] border border-border/60 bg-background-secondary/80 text-text-primary hover:border-border-strong hover:bg-background-card/80 transition-colors"
-      aria-label={isDark ? 'Switch to light mode' : 'Switch to dark mode'}
-      title={isDark ? 'Light mode' : 'Dark mode'}
+      aria-label={isDark ? t('switchToLight') : t('switchToDark')}
+      title={isDark ? t('lightMode') : t('darkMode')}
    >
      {isDark ? (
        <Sun className="h-[18px] w-[18px] icon-flat" />
--- a/frontend/src/components/ui/shared/TopBarControls.tsx
+++ b/frontend/src/components/ui/shared/TopBarControls.tsx
@@ -0,0 +1,13 @@
+'use client';
+
+import { LanguageToggle } from '@/components/ui/shared/LanguageToggle';
+import { ThemeToggle } from '@/components/ui/shared/ThemeToggle';
+
+export function TopBarControls({ className = '' }: { className?: string }) {
+  return (
+    <div className={`flex items-center gap-3 shrink-0 ${className}`.trim()}>
+      <LanguageToggle />
+      <ThemeToggle />
+    </div>
+  );
+}