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

This commit is contained in:
2026-06-20 14:51:43 +03:30
parent 284fbd08aa
commit b2f4dfa4ca
52 changed files with 3306 additions and 1041 deletions

View File

@@ -1,5 +1,6 @@
'use client';
import { useTranslations } from 'next-intl';
import { CalendarDays } from 'lucide-react';
import { purposeStyle } from '@/components/ui/appointments/appointmentPurposeStyles';
import { Card } from '@/components/ui/shared/Card';
@@ -7,6 +8,14 @@ import { ScheduleDayPicker } from '@/components/ui/shared/ScheduleDayPicker';
import { startOfLocalDay } from '@/components/appointments/appointmentTime';
import type { TreatmentAppointment } from '@/types/treatment';
const TREATMENT_TYPE_KEYS = {
consultation: 'typeConsultation',
filling: 'typeFilling',
endo: 'typeEndo',
visit: 'typeVisit',
hygiene: 'typeHygiene',
} as const;
interface AppointmentsStripProps {
stripHidden: boolean;
onToggleStripHidden: () => void;
@@ -28,16 +37,18 @@ export function AppointmentsStrip({
onSelectAppointment,
loading = false,
}: AppointmentsStripProps) {
const t = useTranslations('treatment');
if (stripHidden) {
return (
<Card className="flex items-center justify-between gap-3 flex-wrap" padding="sm">
<p className="text-sm text-text-secondary">Appointments are hidden.</p>
<p className="text-sm text-text-secondary">{t('hiddenMessage')}</p>
<button
type="button"
onClick={onToggleStripHidden}
className="text-sm font-medium text-primary hover:underline focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 rounded-[var(--radius-sm)]"
>
Show appointments
{t('showAppointments')}
</button>
</Card>
);
@@ -48,14 +59,14 @@ export function AppointmentsStrip({
<div className="flex items-center justify-between gap-3 flex-wrap">
<div className="flex items-center gap-2 min-w-0">
<CalendarDays className="w-5 h-5 text-text-muted shrink-0 icon-flat" aria-hidden />
<h2 className="text-sm font-semibold text-text-primary truncate">My appointments</h2>
<h2 className="text-sm font-semibold text-text-primary truncate">{t('appointmentsTitle')}</h2>
</div>
<button
type="button"
onClick={onToggleStripHidden}
className="text-sm font-medium text-primary hover:underline focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 rounded-[var(--radius-sm)]"
>
Hide appointments
{t('hideAppointments')}
</button>
</div>
@@ -65,13 +76,13 @@ export function AppointmentsStrip({
onChange={(d) => onSelectDay(startOfLocalDay(d))}
/>
{loading && (
<p className="text-sm text-text-muted pb-2">Loading appointments</p>
<p className="text-sm text-text-muted pb-2">{t('loadingAppointments')}</p>
)}
</div>
<div className="flex flex-wrap gap-2">
{appointments.length === 0 && (
<p className="text-sm text-text-muted">No appointments assigned to you on this day.</p>
<p className="text-sm text-text-muted">{t('emptyDay')}</p>
)}
{appointments.map((a) => {
const sel = a.id === selectedAppointmentId;
@@ -85,6 +96,7 @@ export function AppointmentsStrip({
minute: '2-digit',
})}`;
const palette = purposeStyle(a.purpose);
const purposeKey = TREATMENT_TYPE_KEYS[a.purpose as keyof typeof TREATMENT_TYPE_KEYS];
return (
<Card
as="button"
@@ -103,7 +115,9 @@ export function AppointmentsStrip({
<p className="text-sm font-medium leading-tight truncate mt-0.5">
{a.patientFirstName} {a.patientLastName}
</p>
<p className="text-[11px] opacity-90 capitalize mt-0.5">{a.purpose}</p>
<p className="text-[11px] opacity-90 capitalize mt-0.5">
{purposeKey ? t(purposeKey) : a.purpose}
</p>
</Card>
);
})}