Loading organization...
;
+ return
{r.name}
{r.owner.email}
- Today
+ {t('statusToday')}
- Found
+ {t('statusFound')}
void submitConnectionRequest(r.id)}
- aria-label="Send connection request"
- title="Send connection request"
+ aria-label={t('sendRequest')}
+ title={t('sendRequest')}
>
@@ -466,22 +471,22 @@ export default function OrganizationsPage() {
diff --git a/frontend/src/app/[locale]/(dashboard)/patients/page.tsx b/frontend/src/app/[locale]/(dashboard)/patients/page.tsx
index 744c193..61a5f21 100644
--- a/frontend/src/app/[locale]/(dashboard)/patients/page.tsx
+++ b/frontend/src/app/[locale]/(dashboard)/patients/page.tsx
@@ -1,145 +1,151 @@
-'use client';
-
-import { useEffect, useMemo, useState } from 'react';
-import { Button } from '@/components/ui/shared/Button';
-import { ToastStack } from '@/components/ui/shared/Toast';
-import { patientsApi } from '@/lib/api/patients';
-import { formatApiErrorMessage } from '@/components/shared/formatApiError';
-import { useAuth } from '@/lib/hooks/useAuth';
-import { useToast } from '@/lib/hooks/useToast';
-import { hasPermission } from '@/components/shared/permissions';
-import { CreatePatientInput, Patient } from '@/types/patient';
-import { PatientSearchSelect } from '../../../components/ui/patient/PatientSearchSelect';
-import { CreatePatientModal } from '../../../components/ui/patient/CreatePatientModal';
-import { PatientSummaryCard } from '../../../components/ui/patient/PatientSummaryCard';
-
-const EMPTY_PATIENT_FORM: CreatePatientInput = {
- firstName: '',
- lastName: '',
- phone: '',
- email: '',
-};
-
-export default function PatientsPage() {
- const { currentOrganization } = useAuth();
- const toast = useToast();
- const [search, setSearch] = useState('');
- const [patients, setPatients] = useState([]);
- const [selectedPatient, setSelectedPatient] = useState();
- const [loadingPatients, setLoadingPatients] = useState(false);
- const [isCreateOpen, setIsCreateOpen] = useState(false);
- const [savingPatient, setSavingPatient] = useState(false);
- const [patientForm, setPatientForm] = useState(EMPTY_PATIENT_FORM);
- const canEditPatients = hasPermission(currentOrganization, 'TAB_PATIENTS_EDIT');
-
- const sortedPatients = useMemo(
- () =>
- [...patients].sort((a, b) =>
- `${a.firstName} ${a.lastName}`.localeCompare(`${b.firstName} ${b.lastName}`),
- ),
- [patients],
- );
-
- useEffect(() => {
- const timeout = setTimeout(() => {
- void loadPatients(search);
- }, 300);
- return () => clearTimeout(timeout);
- }, [search]);
-
- useEffect(() => {
- void loadPatients('');
- }, []);
-
- async function loadPatients(q: string) {
- setLoadingPatients(true);
- toast.setError('');
- try {
- const response = await patientsApi.list({ q, page: 1, limit: 25 });
- const items = response.data.items;
- setPatients(items);
-
- if (selectedPatient) {
- const freshSelected = items.find((item) => item.id === selectedPatient.id);
- setSelectedPatient(freshSelected);
- }
- } catch (error: unknown) {
- toast.showError(formatApiErrorMessage(error, 'Failed to load patients.'));
- } finally {
- setLoadingPatients(false);
- }
- }
-
- async function handleCreatePatient() {
- setSavingPatient(true);
- toast.setError('');
- try {
- const response = await patientsApi.create(patientForm);
- setIsCreateOpen(false);
- setPatientForm(EMPTY_PATIENT_FORM);
- await loadPatients(search);
- setSelectedPatient(response.data);
- toast.showSuccess(
- `Patient ${response.data.firstName} ${response.data.lastName} was saved successfully.`,
- );
- } catch (error: unknown) {
- toast.showError(formatApiErrorMessage(error, 'Failed to save patient.'));
- } finally {
- setSavingPatient(false);
- }
- }
-
- return (
-
-
-
Patients
- {
- if (!canEditPatients) return;
- toast.clear();
- setPatientForm(EMPTY_PATIENT_FORM);
- setIsCreateOpen(true);
- }}
- title={!canEditPatients ? 'Read-only access for this organization.' : undefined}
- >
- New Patient
-
-
-
-
-
- {isCreateOpen && (
-
setPatientForm((prev) => ({ ...prev, ...patch }))}
- onSubmit={() => void handleCreatePatient()}
- onClose={() => {
- setIsCreateOpen(false);
- setPatientForm(EMPTY_PATIENT_FORM);
- }}
- loading={savingPatient}
- />
- )}
-
-
- ([]);
+ const [selectedPatient, setSelectedPatient] = useState();
+ const [loadingPatients, setLoadingPatients] = useState(false);
+ const [isCreateOpen, setIsCreateOpen] = useState(false);
+ const [savingPatient, setSavingPatient] = useState(false);
+ const [patientForm, setPatientForm] = useState(EMPTY_PATIENT_FORM);
+ const canEditPatients = hasPermission(currentOrganization, 'TAB_PATIENTS_EDIT');
+
+ const sortedPatients = useMemo(
+ () =>
+ [...patients].sort((a, b) =>
+ `${a.firstName} ${a.lastName}`.localeCompare(`${b.firstName} ${b.lastName}`),
+ ),
+ [patients],
+ );
+
+ useEffect(() => {
+ const timeout = setTimeout(() => {
+ void loadPatients(search);
+ }, 300);
+ return () => clearTimeout(timeout);
+ }, [search]);
+
+ useEffect(() => {
+ void loadPatients('');
+ }, []);
+
+ async function loadPatients(q: string) {
+ setLoadingPatients(true);
+ toast.setError('');
+ try {
+ const response = await patientsApi.list({ q, page: 1, limit: 25 });
+ const items = response.data.items;
+ setPatients(items);
+
+ if (selectedPatient) {
+ const freshSelected = items.find((item) => item.id === selectedPatient.id);
+ setSelectedPatient(freshSelected);
+ }
+ } catch (error: unknown) {
+ toast.showError(formatApiErrorMessage(error, t('errorLoadPatients')));
+ } finally {
+ setLoadingPatients(false);
+ }
+ }
+
+ async function handleCreatePatient() {
+ setSavingPatient(true);
+ toast.setError('');
+ try {
+ const response = await patientsApi.create(patientForm);
+ setIsCreateOpen(false);
+ setPatientForm(EMPTY_PATIENT_FORM);
+ await loadPatients(search);
+ setSelectedPatient(response.data);
+ toast.showSuccess(
+ t('successPatientSaved', {
+ firstName: response.data.firstName,
+ lastName: response.data.lastName,
+ }),
+ );
+ } catch (error: unknown) {
+ toast.showError(formatApiErrorMessage(error, t('errorSavePatient')));
+ } finally {
+ setSavingPatient(false);
+ }
+ }
+
+ return (
+
+
+
{t('title')}
+ {
+ if (!canEditPatients) return;
+ toast.clear();
+ setPatientForm(EMPTY_PATIENT_FORM);
+ setIsCreateOpen(true);
+ }}
+ title={!canEditPatients ? tCommon('readOnlyAccess') : undefined}
+ >
+ {t('newPatient')}
+
+
+
+
+
+ {isCreateOpen && (
+
setPatientForm((prev) => ({ ...prev, ...patch }))}
+ onSubmit={() => void handleCreatePatient()}
+ onClose={() => {
+ setIsCreateOpen(false);
+ setPatientForm(EMPTY_PATIENT_FORM);
+ }}
+ loading={savingPatient}
+ />
+ )}
+
+
+
@@ -10,19 +14,14 @@ export default function AccountSettingsPage() {
href="/today"
className="text-sm text-primary hover:opacity-90"
>
- ← Back to app
+ {tCommon('backToApp')}
-
Account
-
- Profile and security settings for your login.
-
+
{t('accountTitle')}
+
{t('accountSubtitle')}
-
- Password change and profile editing will be wired here next (e.g. invite
- flow, reset password).
-
+
{t('accountPlaceholder')}
);
diff --git a/frontend/src/app/[locale]/(dashboard)/settings/organizations/page.tsx b/frontend/src/app/[locale]/(dashboard)/settings/organizations/page.tsx
index f1e7696..7ad39d8 100644
--- a/frontend/src/app/[locale]/(dashboard)/settings/organizations/page.tsx
+++ b/frontend/src/app/[locale]/(dashboard)/settings/organizations/page.tsx
@@ -1,9 +1,12 @@
'use client';
+import { useTranslations } from 'next-intl';
import { Link } from '@/i18n/navigation';
import { OrganizationSelectorContent } from '@/components/ui/organizations/OrganizationSelectorContent';
export default function DashboardOrganizationsSettingsPage() {
+ const tCommon = useTranslations('common');
+
return (
@@ -11,7 +14,7 @@ export default function DashboardOrganizationsSettingsPage() {
href="/today"
className="text-sm text-primary hover:opacity-90"
>
- ← Back to app
+ {tCommon('backToApp')}
diff --git a/frontend/src/app/[locale]/(dashboard)/settings/subscriptions/page.tsx b/frontend/src/app/[locale]/(dashboard)/settings/subscriptions/page.tsx
index 9a2b670..01836c4 100644
--- a/frontend/src/app/[locale]/(dashboard)/settings/subscriptions/page.tsx
+++ b/frontend/src/app/[locale]/(dashboard)/settings/subscriptions/page.tsx
@@ -1,6 +1,7 @@
'use client';
import { useEffect, useState } from 'react';
+import { useTranslations } from 'next-intl';
import { Link, useRouter } from '@/i18n/navigation';
import { useAuth } from '@/lib/hooks/useAuth';
import { authApi } from '@/lib/api/auth';
@@ -9,14 +10,16 @@ import { Toast } from '@/components/ui/shared/Toast';
import type { SubscriptionAlertData } from '@/types/subscription';
const PLAN_OPTIONS = [
- { id: 'solo', name: 'Solo', maxUsers: 1, price: 19 },
- { id: 'small', name: 'Small', maxUsers: 5, price: 49 },
- { id: 'medium', name: 'Medium', maxUsers: 10, price: 89 },
- { id: 'large', name: 'Large', maxUsers: 15, price: 129 },
- { id: 'enterprise', name: 'Enterprise', maxUsers: null, price: 199 },
+ { id: 'solo', nameKey: 'planSolo' as const, maxUsers: 1, price: 19 },
+ { id: 'small', nameKey: 'planSmall' as const, maxUsers: 5, price: 49 },
+ { id: 'medium', nameKey: 'planMedium' as const, maxUsers: 10, price: 89 },
+ { id: 'large', nameKey: 'planLarge' as const, maxUsers: 15, price: 129 },
+ { id: 'enterprise', nameKey: 'planEnterprise' as const, maxUsers: null, price: 199 },
] as const;
export default function SubscriptionsSettingsPage() {
+ const t = useTranslations('settings');
+ const tCommon = useTranslations('common');
const { currentOrganization } = useAuth();
const router = useRouter();
const [alert, setAlert] = useState
(null);
@@ -38,13 +41,13 @@ export default function SubscriptionsSettingsPage() {
if (!currentOrganization) {
return (
- Loading...
+ {tCommon('loadingEllipsis')}
);
}
if (!currentOrganization.isOwner) {
return (
- Redirecting...
+ {tCommon('redirecting')}
);
}
@@ -75,55 +78,51 @@ export default function SubscriptionsSettingsPage() {
href="/today"
className="text-sm text-primary hover:opacity-90"
>
- ← Back to app
+ {tCommon('backToApp')}
- Subscriptions
+ {t('subscriptionsTitle')}
- Your DyoLink workspace plan and seats for{' '}
- {currentOrganization.name} .
- Clinic and lab income tracking stays under the sidebar{' '}
- Billing tab.
+ {t('subscriptionsSubtitle', { orgName: currentOrganization.name })}
{!hasActiveSubscription && (
-
- This organization has no active subscription. Select a plan below to start
- the purchase process.
-
+
{t('noSubscriptionNotice')}
)}
-
Current plan
+
{t('currentPlan')}
{plan?.name ?? '—'}
-
Plan price
+
{t('planPrice')}
{typeof plan?.price === 'number' ? `$${plan.price}` : '—'}
-
Seats used
+
{t('seatsUsed')}
{typeof seatsUsed === 'number' ? seatsUsed : '—'}
- {typeof maxUsers === 'number' ? ` / ${isUnlimited ? 'Unlimited' : maxUsers}` : ''}
+ {typeof maxUsers === 'number'
+ ? ` / ${isUnlimited ? t('unlimited') : maxUsers}`
+ : ''}
-
Seats remaining
+
{t('seatsRemaining')}
- {isUnlimited ? 'Unlimited' : seatsRemaining ?? '—'}
+ {isUnlimited ? t('unlimited') : seatsRemaining ?? '—'}
-
Days remaining
+
{t('daysRemaining')}
{daysUntilPlanEnd ?? '—'}
@@ -133,27 +132,24 @@ export default function SubscriptionsSettingsPage() {
{alert?.showWarning && (
{alert.noActiveSubscription && (
-
No active subscription for this organization.
+
{t('noActiveSubscription')}
)}
{alert.trialExpired && (
-
Trial period has ended. Choose a plan when checkout is available.
+
{t('trialEnded')}
)}
{!alert.trialExpired && alert.trialEndingSoon && (
- Trial ends in {alert.daysUntilTrialEnd ?? '—'} day(s).
+ {t('trialEndsIn', { days: alert.daysUntilTrialEnd ?? '—' })}
)}
{!alert.trialExpired && !alert.trialEndingSoon && alert.seatsLow && (
-
Seat usage is high for this organization.
+
{t('seatsLow')}
)}
)}
-
- Choose a plan to continue. Purchase integration is not active yet, so this
- currently prepares the selection step only.
-
+
{t('choosePlanIntro')}
{PLAN_OPTIONS.map((option) => {
const selected = selectedPlanId === option.id;
@@ -168,11 +164,15 @@ export default function SubscriptionsSettingsPage() {
: 'border-border hover:border-border-strong'
}`}
>
-
{option.name}
+
{t(option.nameKey)}
- {option.maxUsers == null ? 'Unlimited seats' : `${option.maxUsers} seats`}
+ {option.maxUsers == null
+ ? t('unlimitedSeats')
+ : t('seatsCount', { n: option.maxUsers })}
+
+
+ {t('pricePerMonth', { price: option.price })}
-
${option.price} / month
);
})}
@@ -181,13 +181,13 @@ export default function SubscriptionsSettingsPage() {
type="button"
variant="primary"
onClick={() => {
- const selectedPlanLabel = selectedPlan?.name ?? 'the selected plan';
- setPurchaseNotice(
- `Purchase flow will be enabled soon. ${selectedPlanLabel} is selected and ready for checkout setup.`,
- );
+ const selectedPlanLabel = selectedPlan
+ ? t(selectedPlan.nameKey)
+ : t('planSolo');
+ setPurchaseNotice(t('purchaseNotice', { plan: selectedPlanLabel }));
}}
>
- Start purchase process
+ {t('startPurchase')}
diff --git a/frontend/src/app/[locale]/(dashboard)/staff/page.tsx b/frontend/src/app/[locale]/(dashboard)/staff/page.tsx
index 03d5a96..73a0171 100644
--- a/frontend/src/app/[locale]/(dashboard)/staff/page.tsx
+++ b/frontend/src/app/[locale]/(dashboard)/staff/page.tsx
@@ -1,6 +1,7 @@
'use client';
import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useTranslations } from 'next-intl';
import { useRouter } from '@/i18n/navigation';
import {
firstAccessibleDashboardPath,
@@ -16,7 +17,7 @@ import {
resolveStaffFeatureLabel,
formatAccessSummary,
type FeaturePermState,
-} from '../../../components/staff/staff-permission-form';
+} from '@/components/staff/staff-permission-form';
import {
StaffWorkingHoursStep,
createDefaultWorkingHoursState,
@@ -90,6 +91,9 @@ function PermissionGrid({
disabled?: boolean;
organizationType?: 'CLINIC' | 'LAB';
}) {
+ const t = useTranslations('staff');
+ const tFeatures = useTranslations('staff.features');
+
const setRead = (editKey: string, read: boolean) => {
const cur = state[editKey] ?? { read: false, edit: false };
onChange({
@@ -116,19 +120,19 @@ function PermissionGrid({
className="flex flex-col gap-3 rounded-[var(--radius-md)] border border-border/60 bg-background-card/50 px-3 py-3"
>
- {resolveStaffFeatureLabel(g, organizationType)}
+ {resolveStaffFeatureLabel(g, organizationType, tFeatures)}
setRead(g.edit, v)}
/>
setEdit(g.edit, v)}
/>
@@ -141,6 +145,10 @@ function PermissionGrid({
export default function StaffPage() {
const router = useRouter();
+ const t = useTranslations('staff');
+ const tCommon = useTranslations('common');
+ const tFeatures = useTranslations('staff.features');
+ const tWorkingHours = useTranslations('staff.workingHours');
const { currentOrganization, user } = useAuth();
const [members, setMembers] = useState
([]);
const [seats, setSeats] = useState<{
@@ -216,11 +224,11 @@ export default function StaffPage() {
setMembers(res.data.members);
setSeats(res.data.seats);
} catch (e) {
- toast.showError(formatApiErrorMessage(e, 'Failed to load staff.'));
+ toast.showError(formatApiErrorMessage(e, t('errorLoadStaff')));
} finally {
setLoading(false);
}
- }, []);
+ }, [t]);
useEffect(() => {
if (!currentOrganization?.id) return;
@@ -291,7 +299,7 @@ export default function StaffPage() {
await load();
}
} catch (e) {
- toast.showError(formatApiErrorMessage(e, 'Could not copy invitation link.'));
+ toast.showError(formatApiErrorMessage(e, t('errorCopyInvite')));
} finally {
setCopyingInviteMembershipId(null);
}
@@ -312,7 +320,7 @@ export default function StaffPage() {
if (!includeHours || !inviteHasTreatmentEdit) {
return;
}
- const validationError = validateEditorDays(inviteWorkingHoursDays);
+ const validationError = validateEditorDays(inviteWorkingHoursDays, tWorkingHours);
if (validationError) {
throw new Error(validationError);
}
@@ -333,7 +341,7 @@ export default function StaffPage() {
const displayEmail = inviteEmail.trim();
try {
if (includeWorkingHours && inviteHasTreatmentEdit) {
- const validationError = validateEditorDays(inviteWorkingHoursDays);
+ const validationError = validateEditorDays(inviteWorkingHoursDays, tWorkingHours);
if (validationError) {
toast.showError(validationError);
return;
@@ -374,7 +382,7 @@ export default function StaffPage() {
resetInviteForm();
await load();
} catch (e) {
- toast.showError(formatApiErrorMessage(e, 'Failed to send invitation.'));
+ toast.showError(formatApiErrorMessage(e, t('errorSendInvite')));
} finally {
setInviteLoading(false);
}
@@ -397,7 +405,7 @@ export default function StaffPage() {
setEditWorkingHoursDays(state.days);
setEditAutoRepeatWeekly(state.autoRepeatWeekly);
} catch (e) {
- toast.showError(formatApiErrorMessage(e, 'Failed to load working hours.'));
+ toast.showError(formatApiErrorMessage(e, t('errorLoadWorkingHours')));
} finally {
setEditLoadingWorkingHours(false);
}
@@ -406,7 +414,7 @@ export default function StaffPage() {
async function submitEdit() {
if (!editing) return;
if (editHasTreatmentEdit) {
- const validationError = validateEditorDays(editWorkingHoursDays);
+ const validationError = validateEditorDays(editWorkingHoursDays, tWorkingHours);
if (validationError) {
toast.showError(validationError);
return;
@@ -431,19 +439,19 @@ export default function StaffPage() {
permissionNames: permissionNamesFromFeatureState(editPerms),
});
- toast.showSuccess('Member updated.');
+ toast.showSuccess(t('successMemberUpdated'));
setEditing(null);
setEditStep(1);
await load();
} catch (e) {
- toast.showError(formatApiErrorMessage(e, 'Failed to update member.'));
+ toast.showError(formatApiErrorMessage(e, t('errorUpdateMember')));
} finally {
setEditLoading(false);
}
}
function handleDeleteMember() {
- toast.showError('Delete is not implemented yet.');
+ toast.showError(t('errorDeleteNotImplemented'));
}
async function confirmDisableMember() {
@@ -453,11 +461,11 @@ export default function StaffPage() {
toast.setError('');
try {
await staffApi.disableMember(disableTarget.id);
- toast.showSuccess(`${disableTarget.name} was disabled. A seat is now available.`);
+ toast.showSuccess(t('successMemberDisabled', { name: disableTarget.name }));
setDisableTarget(null);
await load();
} catch (e) {
- toast.showError(formatApiErrorMessage(e, 'Failed to disable member.'));
+ toast.showError(formatApiErrorMessage(e, t('errorDisableMember')));
} finally {
setDisablingMembershipId(null);
}
@@ -470,11 +478,11 @@ export default function StaffPage() {
toast.setError('');
try {
await staffApi.enableMember(enableTarget.id);
- toast.showSuccess(`${enableTarget.name} was enabled and can sign in again.`);
+ toast.showSuccess(t('successMemberEnabled', { name: enableTarget.name }));
setEnableTarget(null);
await load();
} catch (e) {
- toast.showError(formatApiErrorMessage(e, 'Failed to enable member.'));
+ toast.showError(formatApiErrorMessage(e, t('errorEnableMember')));
} finally {
setEnablingMembershipId(null);
}
@@ -482,7 +490,7 @@ export default function StaffPage() {
if (!currentOrganization || !canViewStaff(currentOrganization)) {
return (
- Redirecting…
+ {t('redirecting')}
);
}
@@ -490,10 +498,8 @@ export default function StaffPage() {
-
Staff Management
-
- Invite teammates, set tab access, and stay within your plan seat limit.
-
+
{t('title')}
+
{t('subtitle')}
- Invite member
+ {t('inviteMember')}
@@ -515,16 +521,14 @@ export default function StaffPage() {
{seats && (
- Seats:{' '}
+ {t('seatsLabel')}{' '}
{seats.used}
- {seats.unlimited ? ' (unlimited plan)' : ` / ${seats.limit}`}
+ {seats.unlimited ? ` ${t('unlimitedPlan')}` : ` / ${seats.limit}`}
{!seats.unlimited && atSeatLimit && (
- {hasActivePlan
- ? 'Plan seat limit reached for this organization.'
- : 'No active plan selected for this organization. Choose a subscription plan to invite members.'}
+ {hasActivePlan ? t('seatLimitReached') : t('noActivePlan')}
)}
@@ -535,7 +539,7 @@ export default function StaffPage() {
{
setLastInviteInfo(null);
}}
@@ -543,15 +547,15 @@ export default function StaffPage() {
- {lastInviteInfo.name} ({lastInviteInfo.email}) was invited.
+ {t('successInvited', { name: lastInviteInfo.name, email: lastInviteInfo.email })}
{lastInviteInfo.invitationStatus === 'PENDING'
- ? ' Invitation is pending until they open the link, set a password, and log in.'
- : ' Invitation was accepted immediately.'}
+ ? ` ${t('invitedPending')}`
+ : ` ${t('invitedAccepted')}`}
{lastInviteInfo.invitationStatus === 'PENDING' && (
- Invite link
+ {t('inviteLinkHeading')}
{lastInviteInfo.invitationUrl && (
@@ -591,36 +595,36 @@ export default function StaffPage() {
setCopiedInviteMembershipId(lastInviteInfo.membershipId);
setTimeout(() => setCopiedInviteMembershipId(null), 1500);
} catch (e) {
- toast.showError(formatApiErrorMessage(e, 'Could not copy invitation link.'));
+ toast.showError(formatApiErrorMessage(e, t('errorCopyInvite')));
} finally {
setCopyingInviteMembershipId(null);
}
})();
}}
>
- {copiedInviteMembershipId === lastInviteInfo.membershipId ? 'Copied' : 'Copy link'}
+ {copiedInviteMembershipId === lastInviteInfo.membershipId
+ ? tCommon('copied')
+ : tCommon('copyLink')}
-
- Share this link manually via SMS or email. A new link is generated if the previous one expired or was lost.
-
+ {t('shareLinkHint')}
)}
)}
{loading ? (
- Loading team…
+ {t('loadingTeam')}
) : (
- Name
- Email
- Role
- Status
- Access
+ {t('tableName')}
+ {t('tableEmail')}
+ {t('tableRole')}
+ {t('tableStatus')}
+ {t('tableAccess')}
- Action
+ {t('tableAction')}
}
@@ -632,28 +636,28 @@ export default function StaffPage() {
{m.email}
{m.isOwner ? (
- Owner
+ {t('roleOwner')}
) : (
- Staff
+ {t('roleStaff')}
)}
{m.isOwner || m.invitationStatus === 'ACTIVE' ? (
- Active
+ {t('statusActive')}
) : m.invitationStatus === 'PENDING' ? (
- Pending
+ {t('statusPending')}
) : m.invitationStatus === 'DISABLED' ? (
- Disabled
+ {t('statusDisabled')}
) : (
- Expired
+ {t('statusExpired')}
)}
{m.isOwner ? (
- All features
+ {t('allFeatures')}
) : (
- {formatAccessSummary(m.permissions, currentOrganization?.type)}
+ {formatAccessSummary(m.permissions, currentOrganization?.type, tFeatures)}
)}
@@ -666,8 +670,8 @@ export default function StaffPage() {
className="p-2 rounded-md text-text-secondary hover:bg-background-card/80 hover:text-text-primary disabled:opacity-50"
disabled={copyingInviteMembershipId === m.id}
onClick={() => void copyStaffInviteLink(m)}
- aria-label="Copy invitation link"
- title="Copy invitation link (generates a new link if needed)"
+ aria-label={t('copyInviteLink')}
+ title={t('copyInviteLinkTitle')}
>
{copiedInviteMembershipId === m.id ? (
- Invite team member
+ {t('inviteModalTitle')}
{inviteHasTreatmentEdit && (
-
Step {inviteStep} of 2
+
{t('stepOf', { step: inviteStep })}
)}
-
Tab access
+
{t('tabAccess')}
- {inviteStep === 2 ? 'Back' : 'Cancel'}
+ {inviteStep === 2 ? tCommon('back') : tCommon('cancel')}
{inviteStep === 1 ? (
inviteHasTreatmentEdit ? (
@@ -838,7 +842,7 @@ export default function StaffPage() {
disabled={!inviteEmail.trim() || !inviteName.trim()}
onClick={() => setInviteStep(2)}
>
- Next
+ {tCommon('next')}
) : (
void submitInvite(false)}
>
- Send invite
+ {t('sendInvite')}
)
) : (
@@ -858,7 +862,7 @@ export default function StaffPage() {
isLoading={inviteLoading}
onClick={() => void submitInvite(false)}
>
- Skip for now
+ {t('skipForNow')}
void submitInvite(true)}
>
- Send invite
+ {t('sendInvite')}
)}
@@ -885,7 +889,7 @@ export default function StaffPage() {
>
- Enable team member
+ {t('enableModalTitle')}
{
@@ -895,22 +899,15 @@ export default function StaffPage() {
/>
- Enable {enableTarget.name} (
- {enableTarget.email})?
+ {t('enableConfirm', { name: enableTarget.name, email: enableTarget.email })}
- They can sign in to this organization again with their existing account.
- No new invitation is sent and no data was removed while they were disabled.
-
- Enabling uses one seat on your
- plan.
-
+ {t('enableBullet1')}
+ {t('enableBullet2')}
+ {t('enableBullet3')}
{!hasAvailableSeat && (
-
- No seats are available. Disable another member or upgrade your plan before enabling
- this person.
-
+ {t('noSeatsAvailable')}
)}
setEnableTarget(null)}
>
- Cancel
+ {tCommon('cancel')}
void confirmEnableMember()}
>
- Enable member
+ {t('enableMemberButton')}
- Disable team member
+ {t('disableModalTitle')}
{
@@ -955,16 +952,12 @@ export default function StaffPage() {
/>
- Disable {disableTarget.name} (
- {disableTarget.email})?
+ {t('disableConfirm', { name: disableTarget.name, email: disableTarget.email })}
- They will not be able to sign in to this organization.
- No data will be removed.
-
- Disabling frees one seat on your
- plan so you can invite someone else.
-
+ {t('disableBullet1')}
+ {t('disableBullet2')}
+ {t('disableBullet3')}
setDisableTarget(null)}
>
- Cancel
+ {tCommon('cancel')}
void confirmDisableMember()}
>
- Disable member
+ {t('disableMemberButton')}
@@ -998,9 +991,9 @@ export default function StaffPage() {
>
-
Edit member
+
{t('editModalTitle')}
{editHasTreatmentEdit && (
-
Step {editStep} of 2
+
{t('stepOf', { step: editStep })}
)}
-
Tab access
+
{t('tabAccess')}
) : editLoadingWorkingHours ? (
- Loading working hours…
+ {t('loadingWorkingHours')}
) : (
- {editStep === 2 ? 'Back' : 'Cancel'}
+ {editStep === 2 ? tCommon('back') : tCommon('cancel')}
{editStep === 1 ? (
editHasTreatmentEdit ? (
setEditStep(2)}>
- Next
+ {tCommon('next')}
) : (
void submitEdit()}>
- Save
+ {tCommon('save')}
)
) : (
@@ -1073,7 +1066,7 @@ export default function StaffPage() {
disabled={Boolean(editHoursValidationError)}
onClick={() => void submitEdit()}
>
- Save
+ {tCommon('save')}
)}
- Welcome back!!
+ {t('welcomeBack')}
{showNoSubscriptionNotice && (
- This organization does not have an active subscription yet.{' '}
+ {t('noSubscriptionNotice')}{' '}
)}
- Today's Appointments
+ {t('cardTodaysAppointments')}
12
Monday 2/5/2026
- Active Patients
+ {t('cardActivePatients')}
675
- New Lab Case
+ {t('cardNewLabCase')}
5
35 ↑
- Today invoices
+ {t('cardTodayInvoices')}
1200$
21,300 $
);
-}
\ No newline at end of file
+}
diff --git a/frontend/src/app/[locale]/(dashboard)/treatment/page.tsx b/frontend/src/app/[locale]/(dashboard)/treatment/page.tsx
index 1014b41..6b45904 100644
--- a/frontend/src/app/[locale]/(dashboard)/treatment/page.tsx
+++ b/frontend/src/app/[locale]/(dashboard)/treatment/page.tsx
@@ -1,14 +1,16 @@
'use client';
+import { useTranslations } from 'next-intl';
import { TreatmentWorkspace } from '@/components/ui/treatment/TreatmentWorkspace';
import { useAuth } from '@/lib/hooks/useAuth';
export default function TreatmentPage() {
+ const t = useTranslations('treatment');
const { user, currentOrganization, isAuthReady } = useAuth();
if (!isAuthReady || !user) {
return (
- Loading…
+ {t('loading')}
);
}
diff --git a/frontend/src/app/[locale]/(public)/accept-invite/page.tsx b/frontend/src/app/[locale]/(public)/accept-invite/page.tsx
index c1bdc43..5cce4df 100644
--- a/frontend/src/app/[locale]/(public)/accept-invite/page.tsx
+++ b/frontend/src/app/[locale]/(public)/accept-invite/page.tsx
@@ -2,6 +2,7 @@
import { useEffect, useMemo, useState } from 'react';
import { Suspense } from 'react';
+import { useTranslations } from 'next-intl';
import { Link, useRouter } from '@/i18n/navigation';
import { useSearchParams } from 'next/navigation';
import { Button } from '@/components/ui/shared/Button';
@@ -9,6 +10,7 @@ import { Input } from '@/components/ui/shared/Input';
import { staffApi } from '@/lib/api/staff';
function AcceptInviteContent() {
+ const t = useTranslations('auth');
const params = useSearchParams();
const router = useRouter();
const token = useMemo(() => params.get('token') || '', [params]);
@@ -32,7 +34,7 @@ function AcceptInviteContent() {
useEffect(() => {
if (!token) {
setLoading(false);
- setError('Invalid invitation link');
+ setError(t('invalidInvitationLink'));
return;
}
@@ -44,30 +46,31 @@ function AcceptInviteContent() {
setInviteInfo(res.data);
setName(res.data.name || '');
if (res.data.status === 'ACCEPTED') {
- setSuccess('This invitation is already accepted. You can log in now.');
+ setSuccess(t('invitationAlreadyAccepted'));
}
- } catch (e: any) {
- setError(e?.message || 'Could not load invitation');
+ } catch (e: unknown) {
+ const message = e && typeof e === 'object' && 'message' in e ? String(e.message) : '';
+ setError(message || t('errorLoadInvitation'));
} finally {
setLoading(false);
}
})();
- }, [token]);
+ }, [token, t]);
async function onAccept() {
if (!token) return;
setError('');
setSuccess('');
if (!name.trim()) {
- setError('Name is required');
+ setError(t('nameRequired'));
return;
}
if (password.length < 8) {
- setError('Password must be at least 8 characters');
+ setError(t('passwordMinLength8'));
return;
}
if (password !== confirmPassword) {
- setError('Passwords do not match');
+ setError(t('passwordsDoNotMatch'));
return;
}
@@ -78,12 +81,13 @@ function AcceptInviteContent() {
name: name.trim(),
password,
});
- setSuccess('Invitation Accepted. Redirecting to login...');
+ setSuccess(t('invitationAcceptedRedirect'));
setTimeout(() => {
router.replace('/login');
}, 1000);
- } catch (e: any) {
- setError(e?.message || 'Could not accept invitation');
+ } catch (e: unknown) {
+ const message = e && typeof e === 'object' && 'message' in e ? String(e.message) : '';
+ setError(message || t('errorAcceptInvitation'));
} finally {
setSubmitting(false);
}
@@ -92,19 +96,21 @@ function AcceptInviteContent() {
return (
-
Accept invitation
+
{t('acceptInviteTitle')}
{loading ? (
-
Loading invitation...
+
{t('loadingInvitation')}
) : (
<>
{inviteInfo && (
- Organization: {inviteInfo.organizationName}
+ {t('organizationLabel')}{' '}
+ {inviteInfo.organizationName}
- Email: {inviteInfo.email}
+ {t('emailLabel')}{' '}
+ {inviteInfo.email}
)}
@@ -122,27 +128,28 @@ function AcceptInviteContent() {
{inviteInfo?.status !== 'ACCEPTED' && (
- void onAccept()}>
- Activate account
+ {t('activateAccount')}
)}
- Already have access?
)}
@@ -151,15 +158,18 @@ function AcceptInviteContent() {
);
}
+function AcceptInviteFallback() {
+ const t = useTranslations('auth');
+ return (
+
+
{t('loadingInvitation')}
+
+ );
+}
+
export default function AcceptInvitePage() {
return (
-
- Loading invitation...
-
- }
- >
+
}>
);
diff --git a/frontend/src/app/[locale]/(public)/accept-organization-invite/page.tsx b/frontend/src/app/[locale]/(public)/accept-organization-invite/page.tsx
index 6c87eb5..a6434d5 100644
--- a/frontend/src/app/[locale]/(public)/accept-organization-invite/page.tsx
+++ b/frontend/src/app/[locale]/(public)/accept-organization-invite/page.tsx
@@ -1,6 +1,7 @@
'use client';
import { Suspense, useEffect, useMemo, useState } from 'react';
+import { useTranslations } from 'next-intl';
import { Link, useRouter } from '@/i18n/navigation';
import { useSearchParams } from 'next/navigation';
import { useForm, type FieldErrors, type UseFormRegister, type UseFormSetValue } from 'react-hook-form';
@@ -14,33 +15,47 @@ import { OrganizationDetailsFields } from '@/components/ui/auth/OrganizationDeta
import { RegistrationProgressSteps } from '@/components/ui/auth/RegistrationProgressSteps';
import { organizationApi } from '@/lib/api/organization';
-const acceptOrganizationInviteSchema = z
- .object({
- ownerName: z.string().min(2, 'Name must be at least 2 characters'),
- password: z
- .string()
- .min(8, 'Password must be at least 8 characters')
- .regex(/[A-Z]/, 'Password must contain at least one uppercase letter')
- .regex(/[0-9]/, 'Password must contain at least one number'),
- confirmPassword: z.string(),
- organizationName: z.string().min(2, 'Organization name must be at least 2 characters'),
- organizationEmail: z.string().email('Please enter a valid organization email'),
- organizationType: z.enum(['CLINIC', 'LAB'], {
- message: 'Please select organization type',
- }),
- })
- .refine((data) => data.password === data.confirmPassword, {
- message: "Passwords don't match",
- path: ['confirmPassword'],
- });
-
-type AcceptOrganizationInviteForm = z.infer
;
+type AcceptOrganizationInviteForm = {
+ ownerName: string;
+ password: string;
+ confirmPassword: string;
+ organizationName: string;
+ organizationEmail: string;
+ organizationType: 'CLINIC' | 'LAB';
+};
function AcceptOrganizationInviteContent() {
+ const t = useTranslations('auth');
+ const tCommon = useTranslations('common');
+ const tValidation = useTranslations('validation');
const params = useSearchParams();
const router = useRouter();
const token = useMemo(() => params.get('token') || '', [params]);
+ const acceptOrganizationInviteSchema = useMemo(
+ () =>
+ z
+ .object({
+ ownerName: z.string().min(2, tValidation('nameMinLength')),
+ password: z
+ .string()
+ .min(8, tValidation('passwordMinLength'))
+ .regex(/[A-Z]/, tValidation('passwordUppercase'))
+ .regex(/[0-9]/, tValidation('passwordNumber')),
+ confirmPassword: z.string(),
+ organizationName: z.string().min(2, tValidation('organizationNameMinLength')),
+ organizationEmail: z.string().email(tValidation('organizationEmailInvalid')),
+ organizationType: z.enum(['CLINIC', 'LAB'], {
+ message: tValidation('organizationTypeRequired'),
+ }),
+ })
+ .refine((data) => data.password === data.confirmPassword, {
+ message: tValidation('passwordsDoNotMatch'),
+ path: ['confirmPassword'],
+ }),
+ [tValidation],
+ );
+
const [step, setStep] = useState(1);
const [loading, setLoading] = useState(true);
const [submitting, setSubmitting] = useState(false);
@@ -77,7 +92,7 @@ function AcceptOrganizationInviteContent() {
useEffect(() => {
if (!token) {
setLoading(false);
- setError('Invalid invitation link');
+ setError(t('invalidInvitationLink'));
return;
}
@@ -96,16 +111,16 @@ function AcceptOrganizationInviteContent() {
organizationType: res.data.organizationType,
});
if (res.data.status === 'ACCEPTED') {
- setSuccess('This invitation is already accepted. You can log in now.');
+ setSuccess(t('invitationAlreadyAccepted'));
}
} catch (e: unknown) {
const message = e && typeof e === 'object' && 'message' in e ? String(e.message) : '';
- setError(message || 'Could not load invitation');
+ setError(message || t('errorLoadInvitation'));
} finally {
setLoading(false);
}
})();
- }, [token, reset]);
+ }, [token, reset, t]);
const handleNext = async () => {
const isValid = await trigger(['ownerName', 'password', 'confirmPassword']);
@@ -129,11 +144,11 @@ function AcceptOrganizationInviteContent() {
organizationEmail: data.organizationEmail.trim(),
organizationType: data.organizationType,
});
- setSuccess('Invitation accepted. Redirecting to login...');
+ setSuccess(t('organizationAcceptedRedirect'));
setTimeout(() => router.replace('/login'), 1000);
} catch (e: unknown) {
const message = e && typeof e === 'object' && 'message' in e ? String(e.message) : '';
- setError(message || 'Could not accept invitation');
+ setError(message || t('errorAcceptInvitation'));
} finally {
setSubmitting(false);
}
@@ -143,15 +158,15 @@ function AcceptOrganizationInviteContent() {
-
DyoLink
+
{tCommon('appName')}
- Accept organization invitation
+ {t('acceptOrganizationTitle')}
- Already have an account?{' '}
+ {t('alreadyHaveAccount')}{' '}
@@ -159,13 +174,13 @@ function AcceptOrganizationInviteContent() {
{loading ? (
-
Loading invitation...
+
{t('loadingInvitation')}
) : (
<>
{inviteInfo && (
- Invited by:{' '}
+ {t('invitedBy')}{' '}
{inviteInfo.inviterOrganizationName}
@@ -191,37 +206,37 @@ function AcceptOrganizationInviteContent() {
{step === 1 && (
<>
}
/>
}
/>
}
/>
}
/>
void handleNext()} fullWidth>
- Continue
+ {tCommon('continue')}
)}
@@ -236,10 +251,10 @@ function AcceptOrganizationInviteContent() {
/>
setStep(1)}>
- Back
+ {tCommon('back')}
- Activate organization
+ {t('activateOrganization')}
@@ -254,15 +269,18 @@ function AcceptOrganizationInviteContent() {
);
}
+function AcceptOrganizationInviteFallback() {
+ const t = useTranslations('auth');
+ return (
+
+
{t('loadingInvitation')}
+
+ );
+}
+
export default function AcceptOrganizationInvitePage() {
return (
-
- Loading invitation...
-
- }
- >
+
}>
);
diff --git a/frontend/src/app/[locale]/(public)/login/page.tsx b/frontend/src/app/[locale]/(public)/login/page.tsx
index aaacf4c..fc2f8ff 100644
--- a/frontend/src/app/[locale]/(public)/login/page.tsx
+++ b/frontend/src/app/[locale]/(public)/login/page.tsx
@@ -81,7 +81,7 @@ export default function LoginPage() {
{t('signInTitle')}
- Or{' '}
+ {tCommon('or')}{' '}
- By signing up, you agree to our{' '}
+ {t('termsIntro')}{' '}
-
Working hours recommended
-
- Staff with treatment edit access appear as provider columns in Appointments. Set their
- weekly hours so the schedule grid shows the right bookable times.
-
+
{t('recommendedTitle')}
+
{t('recommendedBody')}
) {
onDaysChange(
days.map((day) => (day.dayOfWeek === dayOfWeek ? { ...day, ...patch } : day)),
@@ -71,10 +74,7 @@ export function WorkingHoursEditor({
return (
-
- Set weekly working hours for this provider. The appointments grid uses these hours to show
- bookable time slots.
-
+
{t('intro')}
{days.map((day) => (
@@ -84,12 +84,12 @@ export function WorkingHoursEditor({
>
- {WEEKDAY_LABELS[day.dayOfWeek]}
+ {t(WEEKDAY_KEYS[day.dayOfWeek])}
{
updateDay(day.dayOfWeek, {
isWorking: checked,
@@ -108,7 +108,7 @@ export function WorkingHoursEditor({
{day.shifts.map((shift, shiftIndex) => (
- Start
+ {t('start')}
-
End
+
{t('end')}
removeShift(day.dayOfWeek, shiftIndex)}
>
@@ -152,7 +152,7 @@ export function WorkingHoursEditor({
onClick={() => addShift(day.dayOfWeek)}
>
- Add shift
+ {t('addShift')}
)}
@@ -163,7 +163,7 @@ export function WorkingHoursEditor({
diff --git a/frontend/src/components/staff/staff-permission-form.ts b/frontend/src/components/staff/staff-permission-form.ts
index 0ec4a32..a14ff02 100644
--- a/frontend/src/components/staff/staff-permission-form.ts
+++ b/frontend/src/components/staff/staff-permission-form.ts
@@ -4,27 +4,30 @@
*/
export const STAFF_FEATURE_GROUPS = [
- { label: 'Today', read: 'TAB_TODAY_READ', edit: 'TAB_TODAY_EDIT' },
- { label: 'Staff', read: 'TAB_STAFF_READ', edit: 'TAB_STAFF_EDIT' },
- { label: 'Organizations', read: 'TAB_ORGANIZATIONS_READ', edit: 'TAB_ORGANIZATIONS_EDIT' },
- { label: 'Patients', read: 'TAB_PATIENTS_READ', edit: 'TAB_PATIENTS_EDIT' },
- { label: 'Appointment', read: 'TAB_APPOINTMENTS_READ', edit: 'TAB_APPOINTMENTS_EDIT' },
- { label: 'Treatment', read: 'TAB_TREATMENT_READ', edit: 'TAB_TREATMENT_EDIT' },
- { label: 'Billing', read: 'TAB_BILLING_READ', edit: 'TAB_BILLING_EDIT' },
- { label: 'Reports', read: 'TAB_REPORTS_READ', edit: 'TAB_REPORTS_EDIT' },
+ { labelKey: 'featureToday', read: 'TAB_TODAY_READ', edit: 'TAB_TODAY_EDIT' },
+ { labelKey: 'featureStaff', read: 'TAB_STAFF_READ', edit: 'TAB_STAFF_EDIT' },
+ { labelKey: 'featureOrganizations', read: 'TAB_ORGANIZATIONS_READ', edit: 'TAB_ORGANIZATIONS_EDIT' },
+ { labelKey: 'featurePatients', read: 'TAB_PATIENTS_READ', edit: 'TAB_PATIENTS_EDIT' },
+ { labelKey: 'featureAppointment', read: 'TAB_APPOINTMENTS_READ', edit: 'TAB_APPOINTMENTS_EDIT' },
+ { labelKey: 'featureTreatment', read: 'TAB_TREATMENT_READ', edit: 'TAB_TREATMENT_EDIT' },
+ { labelKey: 'featureBilling', read: 'TAB_BILLING_READ', edit: 'TAB_BILLING_EDIT' },
+ { labelKey: 'featureReports', read: 'TAB_REPORTS_READ', edit: 'TAB_REPORTS_EDIT' },
] as const;
export type FeaturePermState = Record;
export type OrgType = 'CLINIC' | 'LAB' | null | undefined;
+type StaffFeaturesTranslate = (key: string) => string;
+
export function resolveStaffFeatureLabel(
group: (typeof STAFF_FEATURE_GROUPS)[number],
organizationType: OrgType,
+ t: StaffFeaturesTranslate,
): string {
if (group.read === 'TAB_ORGANIZATIONS_READ') {
- return organizationType === 'LAB' ? 'Clinics' : 'Labs';
+ return organizationType === 'LAB' ? t('featureClinics') : t('featureLabs');
}
- return group.label;
+ return t(group.labelKey);
}
export function emptyFeaturePermissionState(): FeaturePermState {
@@ -64,17 +67,18 @@ export function featureStateHasTreatmentEdit(state: FeaturePermState): boolean {
/** Human-readable access for the team table — feature name, or "Feature (Read only)" */
export function formatAccessSummary(
permissionNames: string[] | null | undefined,
- organizationType?: OrgType,
+ organizationType: OrgType,
+ t: StaffFeaturesTranslate,
): string {
- if (!permissionNames?.length) return 'No tab access';
+ if (!permissionNames?.length) return t('noTabAccess');
const set = new Set(permissionNames);
const parts: string[] = [];
for (const g of STAFF_FEATURE_GROUPS) {
const hasEdit = set.has(g.edit);
const hasRead = set.has(g.read) || hasEdit;
if (!hasRead) continue;
- const label = resolveStaffFeatureLabel(g, organizationType);
- parts.push(hasEdit ? label : `${label} (Read only)`);
+ const label = resolveStaffFeatureLabel(g, organizationType, t);
+ parts.push(hasEdit ? label : `${label} ${t('readOnlySuffix')}`);
}
- return parts.length ? parts.join(' · ') : 'No tab access';
+ return parts.length ? parts.join(' · ') : t('noTabAccess');
}
diff --git a/frontend/src/components/staff/workingHours.ts b/frontend/src/components/staff/workingHours.ts
index 87b7af7..f4f646c 100644
--- a/frontend/src/components/staff/workingHours.ts
+++ b/frontend/src/components/staff/workingHours.ts
@@ -1,7 +1,17 @@
export const MINUTES_PER_DAY = 24 * 60;
export const SCHEDULE_SLOT_MINUTES = 15;
-export const WEEKDAY_LABELS = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] as const;
+export const WEEKDAY_KEYS = [
+ 'weekdayMon',
+ 'weekdayTue',
+ 'weekdayWed',
+ 'weekdayThu',
+ 'weekdayFri',
+ 'weekdaySat',
+ 'weekdaySun',
+] as const;
+
+type WorkingHoursTranslate = (key: string, values?: { day: string }) => string;
export type WorkingHoursBlock = {
dayOfWeek: number;
@@ -46,7 +56,7 @@ export function formatMinuteLabel(minute: number): string {
}
export function emptyWorkingHoursEditorDays(): WorkingHoursEditorDay[] {
- return WEEKDAY_LABELS.map((_, dayOfWeek) => ({
+ return WEEKDAY_KEYS.map((_, dayOfWeek) => ({
dayOfWeek,
isWorking: false,
shifts: [{ startMinute: 9 * 60, endMinute: 17 * 60 }],
@@ -61,7 +71,7 @@ export function editorDaysFromBlocks(blocks: WorkingHoursBlock[]): WorkingHoursE
byDay.set(block.dayOfWeek, list);
}
- return WEEKDAY_LABELS.map((_, dayOfWeek) => {
+ return WEEKDAY_KEYS.map((_, dayOfWeek) => {
const shifts = (byDay.get(dayOfWeek) ?? []).sort(
(a, b) => a.startMinute - b.startMinute || a.endMinute - b.endMinute,
);
@@ -89,21 +99,25 @@ export function blocksFromEditorDays(days: WorkingHoursEditorDay[]): WorkingHour
return blocks;
}
-export function validateEditorDays(days: WorkingHoursEditorDay[]): string | null {
+export function validateEditorDays(
+ days: WorkingHoursEditorDay[],
+ t: WorkingHoursTranslate,
+): string | null {
for (const day of days) {
if (!day.isWorking) continue;
+ const dayLabel = t(WEEKDAY_KEYS[day.dayOfWeek]);
if (day.shifts.length === 0) {
- return `${WEEKDAY_LABELS[day.dayOfWeek]} needs at least one shift or should be marked off.`;
+ return t('validationNeedsShift', { day: dayLabel });
}
const sorted = [...day.shifts].sort((a, b) => a.startMinute - b.startMinute);
for (const shift of sorted) {
if (shift.endMinute <= shift.startMinute) {
- return `${WEEKDAY_LABELS[day.dayOfWeek]} shift end time must be after start time.`;
+ return t('validationEndAfterStart', { day: dayLabel });
}
}
for (let i = 1; i < sorted.length; i += 1) {
if (sorted[i].startMinute < sorted[i - 1].endMinute) {
- return `${WEEKDAY_LABELS[day.dayOfWeek]} shifts cannot overlap.`;
+ return t('validationOverlap', { day: dayLabel });
}
}
}
diff --git a/frontend/src/components/treatment/caseSendLabel.ts b/frontend/src/components/treatment/caseSendLabel.ts
index 029dc3e..c2856c9 100644
--- a/frontend/src/components/treatment/caseSendLabel.ts
+++ b/frontend/src/components/treatment/caseSendLabel.ts
@@ -1,17 +1,23 @@
import type { LinkedOrganizationOption, TreatmentCaseSendInfo } from '@/types/treatment';
+export type CaseSendLabelT = (
+ key: 'sentToAt' | 'fallbackOrgName',
+ values?: { orgName: string; datetime: string },
+) => string;
+
export function formatCaseSentLines(
sends: TreatmentCaseSendInfo[] | undefined,
- fallback?: {
+ fallback: {
organizationIds: string[];
sentAt: string | null;
orgs?: LinkedOrganizationOption[];
- },
+ } | undefined,
+ t: CaseSendLabelT,
): string[] {
if (sends?.length) {
return sends.map((s) => {
const at = new Date(s.sentAt).toLocaleString();
- return `Sent to ${s.organizationName} at ${at}`;
+ return t('sentToAt', { orgName: s.organizationName, datetime: at });
});
}
@@ -19,8 +25,8 @@ export function formatCaseSentLines(
const at = new Date(fallback.sentAt).toLocaleString();
const nameById = new Map(fallback.orgs?.map((o) => [o.id, o.name]) ?? []);
return fallback.organizationIds.map((id) => {
- const name = nameById.get(id) ?? 'organization';
- return `Sent to ${name} at ${at}`;
+ const name = nameById.get(id) ?? t('fallbackOrgName');
+ return t('sentToAt', { orgName: name, datetime: at });
});
}
@@ -29,12 +35,13 @@ export function formatCaseSentLines(
export function formatCaseSentSummary(
sends: TreatmentCaseSendInfo[] | undefined,
- fallback?: {
+ fallback: {
organizationIds: string[];
sentAt: string | null;
orgs?: LinkedOrganizationOption[];
- },
+ } | undefined,
+ t: CaseSendLabelT,
): string | null {
- const lines = formatCaseSentLines(sends, fallback);
+ const lines = formatCaseSentLines(sends, fallback, t);
return lines.length > 0 ? lines.join(' · ') : null;
}
diff --git a/frontend/src/components/ui/appointments/AppointmentBookingModal.tsx b/frontend/src/components/ui/appointments/AppointmentBookingModal.tsx
index 16b61d0..0d38723 100644
--- a/frontend/src/components/ui/appointments/AppointmentBookingModal.tsx
+++ b/frontend/src/components/ui/appointments/AppointmentBookingModal.tsx
@@ -1,11 +1,13 @@
'use client';
import { useEffect, useState } from 'react';
+import { useTranslations } from 'next-intl';
import { Button } from '@/components/ui/shared/Button';
import { DialogCloseButton } from '@/components/ui/shared/DialogCloseButton';
import { Dropdown } from '@/components/ui/shared/Dropdown';
import type { AppointmentPurpose, AppointmentRecord } from '@/types/appointment';
-import { APPOINTMENT_PURPOSE_LABEL } from '@/components/ui/appointments/appointmentPurposeStyles';
+import { APPOINTMENT_PURPOSES } from '@/types/appointment';
+import { getPurposeLabel } from '@/components/ui/appointments/appointmentPurposeStyles';
import type { Patient } from '@/types/patient';
import {
combineLocalDateAndTime,
@@ -36,6 +38,14 @@ interface AppointmentBookingModalProps {
deleting?: boolean;
}
+const PURPOSE_OPTION_COLORS: Record = {
+ consultation: '#ddd6fe',
+ filling: '#fed7aa',
+ endo: '#fecaca',
+ visit: '#bae6fd',
+ hygiene: '#d9f99d',
+};
+
export function AppointmentBookingModal({
open,
scheduleDate,
@@ -51,20 +61,15 @@ export function AppointmentBookingModal({
onDelete,
deleting = false,
}: AppointmentBookingModalProps) {
+ const t = useTranslations('appointments');
+ const tCommon = useTranslations('common');
+ const tPatients = useTranslations('patients');
+
const [startTime, setStartTime] = useState('09:00');
const [endTime, setEndTime] = useState('10:00');
const [purpose, setPurpose] = useState('consultation');
const [error, setError] = useState('');
- const purposeTextColor =
- purpose === 'consultation'
- ? '#ddd6fe'
- : purpose === 'filling'
- ? '#fed7aa'
- : purpose === 'endo'
- ? '#fecaca'
- : purpose === 'visit'
- ? '#bae6fd'
- : '#d9f99d';
+ const purposeTextColor = PURPOSE_OPTION_COLORS[purpose];
useEffect(() => {
if (!open) {
@@ -116,7 +121,7 @@ export function AppointmentBookingModal({
return;
}
if (!editingAppointment && !patient) {
- setError('Select a patient first.');
+ setError(t('errorSelectPatient'));
return;
}
@@ -124,26 +129,26 @@ export function AppointmentBookingModal({
const endAt = combineLocalDateAndTime(scheduleDate, endTime);
if (endAt <= startAt) {
- setError('End time must be after start time.');
+ setError(t('errorEndAfterStart'));
return;
}
const now = new Date();
if (isSameLocalCalendarDay(scheduleDate, now) && startAt.getTime() < now.getTime()) {
- setError('Cannot schedule in the past.');
+ setError(t('errorPastSchedule'));
return;
}
const today = new Date();
if (compareLocalDayStart(scheduleDate, today) < 0) {
- setError('Past appointments are view-only.');
+ setError(t('errorPastViewOnly'));
return;
}
const effectivePatientId = editingAppointment?.patientId ?? patient?.id;
const effectiveProviderId = editingAppointment?.providerUserId ?? providerUserId;
if (!effectivePatientId || !effectiveProviderId) {
- setError('Missing appointment details.');
+ setError(t('errorMissingDetails'));
return;
}
@@ -166,29 +171,34 @@ export function AppointmentBookingModal({
>
- {editingAppointment ? 'Edit appointment' : 'New appointment'}
+ {editingAppointment ? t('editTitle') : t('newTitle')}
- Provider: {providerName}
+ {t('providerLabel')}{' '}
+ {providerName}
-
Patient
+
+ {t('patientLabel')}
+
{editingAppointment
? `${editingAppointment.patient.firstName} ${editingAppointment.patient.lastName}`
: patient
? `${patient.firstName} ${patient.lastName}`
- : '—'}
+ : tPatients('emptyValue')}
- Start
+
+ {t('startLabel')}
+
-
End
+
+ {t('endLabel')}
+
setPurpose(e.target.value as AppointmentPurpose)}
style={{ color: purposeTextColor }}
>
-
- {APPOINTMENT_PURPOSE_LABEL.consultation}
-
-
- {APPOINTMENT_PURPOSE_LABEL.filling}
-
-
- {APPOINTMENT_PURPOSE_LABEL.endo}
-
-
- {APPOINTMENT_PURPOSE_LABEL.visit}
-
-
- {APPOINTMENT_PURPOSE_LABEL.hygiene}
-
+ {APPOINTMENT_PURPOSES.map((purposeOption) => (
+
+ {getPurposeLabel(purposeOption, t)}
+
+ ))}
{error &&
{error}
}
@@ -243,14 +249,14 @@ export function AppointmentBookingModal({
disabled={loading || deleting}
isLoading={deleting}
>
- Delete
+ {tCommon('delete')}
) : (
)}
- Cancel
+ {tCommon('cancel')}
- Save
+ {tCommon('save')}
diff --git a/frontend/src/components/ui/appointments/AppointmentOverlapPopover.tsx b/frontend/src/components/ui/appointments/AppointmentOverlapPopover.tsx
index 49cd6ad..5d18b14 100644
--- a/frontend/src/components/ui/appointments/AppointmentOverlapPopover.tsx
+++ b/frontend/src/components/ui/appointments/AppointmentOverlapPopover.tsx
@@ -1,12 +1,13 @@
'use client';
import { useEffect, useRef } from 'react';
+import { useTranslations } from 'next-intl';
import { DialogCloseButton } from '@/components/ui/shared/DialogCloseButton';
import {
- APPOINTMENT_PURPOSE_LABEL,
+ getPurposeLabel,
purposeStyle,
} from '@/components/ui/appointments/appointmentPurposeStyles';
-import type { AppointmentRecord } from '@/types/appointment';
+import type { AppointmentPurpose, AppointmentRecord } from '@/types/appointment';
type AppointmentOverlapPopoverProps = {
appointments: AppointmentRecord[];
@@ -28,6 +29,7 @@ export function AppointmentOverlapPopover({
onSelect,
onClose,
}: AppointmentOverlapPopoverProps) {
+ const t = useTranslations('appointments');
const panelRef = useRef
(null);
useEffect(() => {
@@ -75,13 +77,13 @@ export function AppointmentOverlapPopover({
>
- Overlapping appointments ({sorted.length})
+ {t('overlappingTitle', { count: sorted.length })}
@@ -252,13 +249,15 @@ export function AppointmentScheduleGrid({
title={
columnFullyDisabled
? p.hasWorkingHours
- ? 'Provider is off today'
- : 'Working hours not configured'
+ ? t('slotOffToday')
+ : t('slotHoursNotConfigured')
: !slotActive
- ? 'Outside working hours'
+ ? t('slotOutsideHours')
: slotDisabled
- ? 'You cannot create appointments'
- : `Book ${formatMinuteLabel(slotStartMinute)}`
+ ? t('slotCannotCreate')
+ : t('slotBookAt', {
+ time: formatMinuteLabel(slotStartMinute),
+ })
}
className={`absolute left-0 right-0 border-b border-border/50 transition-colors ${
slotDisabled
@@ -297,8 +296,10 @@ export function AppointmentScheduleGrid({
const patientName = `${apt.patient.firstName} ${apt.patient.lastName}`;
const bannerTitle = [
patientName,
- outsideHours ? 'Outside working hours — editing blocked' : null,
- clusterSize > 1 ? `${clusterSize} overlapping — click to choose` : null,
+ outsideHours ? t('outsideHoursBlocked') : null,
+ clusterSize > 1
+ ? t('overlappingChoose', { count: clusterSize })
+ : null,
!isUnderOneHour && apt.patient.phone ? apt.patient.phone : null,
]
.filter(Boolean)
@@ -345,7 +346,7 @@ export function AppointmentScheduleGrid({
)}
{!isUnderOneHour && clusterSize > 1 && (
- {clusterSize} overlapping
+ {t('overlapping', { count: clusterSize })}
)}
diff --git a/frontend/src/components/ui/appointments/AppointmentScheduleLegend.tsx b/frontend/src/components/ui/appointments/AppointmentScheduleLegend.tsx
index 6e36de3..8ab970f 100644
--- a/frontend/src/components/ui/appointments/AppointmentScheduleLegend.tsx
+++ b/frontend/src/components/ui/appointments/AppointmentScheduleLegend.tsx
@@ -1,20 +1,25 @@
+'use client';
+
+import { useTranslations } from 'next-intl';
import {
- APPOINTMENT_PURPOSE_LABEL,
APPOINTMENT_PURPOSE_LEGEND_SWATCH,
+ getPurposeLabel,
} from '@/components/ui/appointments/appointmentPurposeStyles';
import { APPOINTMENT_PURPOSES } from '@/types/appointment';
export function AppointmentScheduleLegend() {
+ const t = useTranslations('appointments');
+
return (
-
Legend
+
{t('legend')}
{APPOINTMENT_PURPOSES.map((p) => (
))}
diff --git a/frontend/src/components/ui/appointments/AppointmentsPatientSearch.tsx b/frontend/src/components/ui/appointments/AppointmentsPatientSearch.tsx
index e0817fd..5dce8a1 100644
--- a/frontend/src/components/ui/appointments/AppointmentsPatientSearch.tsx
+++ b/frontend/src/components/ui/appointments/AppointmentsPatientSearch.tsx
@@ -1,6 +1,7 @@
'use client';
import { Search } from 'lucide-react';
+import { useTranslations } from 'next-intl';
import { Button } from '@/components/ui/shared/Button';
import { Input } from '@/components/ui/shared/Input';
import type { Patient } from '@/types/patient';
@@ -26,6 +27,9 @@ export function AppointmentsPatientSearch({
canAddPatient,
onAddPatient,
}: AppointmentsPatientSearchProps) {
+ const t = useTranslations('appointments');
+ const tPatients = useTranslations('patients');
+
const trimmed = search.trim();
const showAddForEmptyResults =
trimmed.length > 0 && !loading && patients.length === 0;
@@ -35,7 +39,7 @@ export function AppointmentsPatientSearch({
- {loading &&
Searching…
}
+ {loading &&
{t('searching')}
}
{!loading && trimmed.length === 0 && (
-
Type to search patients by name, phone, or email.
+
{t('searchHint')}
)}
{patients.map((patient) => {
@@ -77,7 +81,9 @@ export function AppointmentsPatientSearch({
{patient.firstName} {patient.lastName}
-
{patient.phone || patient.email || 'No contact'}
+
+ {patient.phone || patient.email || tPatients('noContact')}
+
);
})}
diff --git a/frontend/src/components/ui/appointments/appointmentPurposeStyles.ts b/frontend/src/components/ui/appointments/appointmentPurposeStyles.ts
index c0803ba..813befa 100644
--- a/frontend/src/components/ui/appointments/appointmentPurposeStyles.ts
+++ b/frontend/src/components/ui/appointments/appointmentPurposeStyles.ts
@@ -1,12 +1,25 @@
import type { AppointmentPurpose } from '@/types/appointment';
-export const APPOINTMENT_PURPOSE_LABEL: Record
= {
- consultation: 'Consultation',
- filling: 'Filling',
- endo: 'Endo',
- visit: 'Visit',
- hygiene: 'Hygiene',
-};
+export const APPOINTMENT_PURPOSE_LABEL_KEYS = {
+ consultation: 'purposeConsultation',
+ filling: 'purposeFilling',
+ endo: 'purposeEndo',
+ visit: 'purposeVisit',
+ hygiene: 'purposeHygiene',
+} as const satisfies Record;
+
+export type AppointmentPurposeLabelKey =
+ (typeof APPOINTMENT_PURPOSE_LABEL_KEYS)[AppointmentPurpose];
+
+export type AppointmentPurposeTranslate = (key: AppointmentPurposeLabelKey) => string;
+
+export function getPurposeLabel(
+ purpose: AppointmentPurpose,
+ t: AppointmentPurposeTranslate,
+): string {
+ const key = APPOINTMENT_PURPOSE_LABEL_KEYS[purpose];
+ return key ? t(key) : purpose;
+}
/** Background + border for blocks / legend (matches reference palette). */
export const APPOINTMENT_PURPOSE_STYLES: Record = {
diff --git a/frontend/src/components/ui/auth/OrganizationDetailsFields.tsx b/frontend/src/components/ui/auth/OrganizationDetailsFields.tsx
index d4fd1de..4b9fa1e 100644
--- a/frontend/src/components/ui/auth/OrganizationDetailsFields.tsx
+++ b/frontend/src/components/ui/auth/OrganizationDetailsFields.tsx
@@ -1,5 +1,6 @@
'use client';
+import { useTranslations } from 'next-intl';
import { Building2, Mail } from 'lucide-react';
import type { FieldErrors, UseFormRegister, UseFormSetValue } from 'react-hook-form';
import { Input } from '@/components/ui/shared/Input';
@@ -23,26 +24,28 @@ export function OrganizationDetailsFields({
organizationType,
setValue,
}: OrganizationDetailsFieldsProps) {
+ const t = useTranslations('auth');
+
return (
<>
- Organization type
+ {t('organizationType')}
@@ -58,7 +61,7 @@ export function OrganizationDetailsFields({
}`}
>
Dental Clinic
+ {t('dentalClinic')}
Dental Lab
+ {t('dentalLab')}
{errors.organizationType && (
diff --git a/frontend/src/components/ui/auth/RegistrationProgressSteps.tsx b/frontend/src/components/ui/auth/RegistrationProgressSteps.tsx
index 16d91de..a4ee8f1 100644
--- a/frontend/src/components/ui/auth/RegistrationProgressSteps.tsx
+++ b/frontend/src/components/ui/auth/RegistrationProgressSteps.tsx
@@ -1,5 +1,6 @@
'use client';
+import { useTranslations } from 'next-intl';
import { ChevronRight } from 'lucide-react';
type RegistrationProgressStepsProps = {
@@ -10,9 +11,11 @@ type RegistrationProgressStepsProps = {
export function RegistrationProgressSteps({
step,
- firstLabel = 'Account',
- secondLabel = 'Organization',
+ firstLabel,
+ secondLabel,
}: RegistrationProgressStepsProps) {
+ const t = useTranslations('auth');
+
return (
@@ -31,7 +34,7 @@ export function RegistrationProgressSteps({
step >= 1 ? 'text-primary' : 'text-text-muted'
}`}
>
- {firstLabel}
+ {firstLabel ?? t('stepAccount')}
@@ -50,7 +53,7 @@ export function RegistrationProgressSteps({
step >= 2 ? 'text-primary' : 'text-text-muted'
}`}
>
- {secondLabel}
+ {secondLabel ?? t('stepOrganization')}
diff --git a/frontend/src/components/ui/organizations/CopyInvitationLinkButton.tsx b/frontend/src/components/ui/organizations/CopyInvitationLinkButton.tsx
index a8df1c8..734f000 100644
--- a/frontend/src/components/ui/organizations/CopyInvitationLinkButton.tsx
+++ b/frontend/src/components/ui/organizations/CopyInvitationLinkButton.tsx
@@ -1,5 +1,6 @@
'use client';
+import { useTranslations } from 'next-intl';
import { Check, Copy } from 'lucide-react';
import {
canShareOrganizationInviteLink,
@@ -19,6 +20,8 @@ export function CopyInvitationLinkButton({
copying,
onCopy,
}: CopyInvitationLinkButtonProps) {
+ const t = useTranslations('organizations');
+
if (!canShareOrganizationInviteLink(invitation)) {
return
— ;
}
@@ -29,8 +32,8 @@ export function CopyInvitationLinkButton({
className="p-2 rounded-md text-text-secondary hover:bg-background-card/80 hover:text-text-primary disabled:opacity-50"
disabled={copying}
onClick={onCopy}
- aria-label="Copy invitation link"
- title="Copy invitation link (generates a new link if needed)"
+ aria-label={t('copyInvitationLink')}
+ title={t('copyInvitationLinkTitle')}
>
{copied ?
:
}
diff --git a/frontend/src/components/ui/organizations/InvitationHistoryDialog.tsx b/frontend/src/components/ui/organizations/InvitationHistoryDialog.tsx
index 10cd2bc..4bf5af4 100644
--- a/frontend/src/components/ui/organizations/InvitationHistoryDialog.tsx
+++ b/frontend/src/components/ui/organizations/InvitationHistoryDialog.tsx
@@ -1,5 +1,6 @@
'use client';
+import { useTranslations } from 'next-intl';
import { DialogCloseButton } from '@/components/ui/shared/DialogCloseButton';
import { ToastStack, type ToastMessages } from '@/components/ui/shared/Toast';
import type { OrganizationInvitationHistoryItemDto } from '@/lib/api/organization';
@@ -7,14 +8,6 @@ import { Badge, organizationConnectionStatusVariant } from '@/components/ui/shar
import { Table } from '@/components/ui/shared/Table';
import { CopyInvitationLinkButton } from '@/components/ui/organizations/CopyInvitationLinkButton';
-function formatInvitationStatusLabel(status: OrganizationInvitationHistoryItemDto['status']): string {
- if (status === 'PENDING') return 'Invitation pending';
- if (status === 'ACTIVE') return 'Invitation accepted';
- if (status === 'REJECTED') return 'Invitation rejected';
- if (status === 'EXPIRED') return 'Invitation expired';
- return status;
-}
-
function formatTableDate(value: string): string {
const d = new Date(value);
if (Number.isNaN(d.getTime())) return '—';
@@ -43,6 +36,18 @@ export function InvitationHistoryDialog({
onCopy,
toastMessages,
}: InvitationHistoryDialogProps) {
+ const t = useTranslations('organizations');
+
+ function formatInvitationStatusLabel(
+ status: OrganizationInvitationHistoryItemDto['status'],
+ ): string {
+ if (status === 'PENDING') return t('statusPending');
+ if (status === 'ACTIVE') return t('statusAccepted');
+ if (status === 'REJECTED') return t('statusRejected');
+ if (status === 'EXPIRED') return t('statusExpired');
+ return status;
+ }
+
if (!open) return null;
return (
@@ -55,7 +60,7 @@ export function InvitationHistoryDialog({
>
- Invitation History
+ {t('historyTitle')}
@@ -63,27 +68,27 @@ export function InvitationHistoryDialog({
{toastMessages &&
}
{loading ? (
-
Loading invitation history...
+
{t('loadingHistory')}
) : items.length === 0 ? (
-
No invitations yet.
+
{t('historyEmpty')}
) : (
- Organization
+ {t('tableOrganization')}
- Owner email
+ {t('tableOwnerEmail')}
- Date
+ {t('tableDate')}
- Status
+ {t('tableStatus')}
- Invitation link
+ {t('tableInvitationLink')}
}
diff --git a/frontend/src/components/ui/organizations/OrganizationSelectorContent.tsx b/frontend/src/components/ui/organizations/OrganizationSelectorContent.tsx
index bfe1140..4d1f225 100644
--- a/frontend/src/components/ui/organizations/OrganizationSelectorContent.tsx
+++ b/frontend/src/components/ui/organizations/OrganizationSelectorContent.tsx
@@ -1,6 +1,7 @@
'use client';
import { useMemo, useState } from 'react';
+import { useTranslations } from 'next-intl';
import { useAuth } from '@/lib/hooks/useAuth';
import { canCreateOrganizationFromCurrentOrg } from '@/components/shared/permissions';
import { Building2, Beaker, Mail } from 'lucide-react';
@@ -8,6 +9,9 @@ import { Input } from '@/components/ui/shared/Input';
import { Button } from '@/components/ui/shared/Button';
export function OrganizationSelectorContent() {
+ const t = useTranslations('organizations');
+ const tAuth = useTranslations('auth');
+ const tCommon = useTranslations('common');
const {
organizations,
currentOrganization,
@@ -29,6 +33,9 @@ export function OrganizationSelectorContent() {
const getIcon = (type: string) =>
type === 'CLINIC' ? Loading...
;
+ return {tCommon('loadingEllipsis')}
;
}
return (
-
Organizations
+
{t('selectorTitle')}
- {canCreateOrganization
- ? 'Select an organization to continue, or create a new one.'
- : 'Select an organization to continue.'}
+ {canCreateOrganization ? t('selectorSubtitleWithCreate') : t('selectorSubtitleSelectOnly')}
{canCreateOrganization && (
@@ -71,7 +76,7 @@ export function OrganizationSelectorContent() {
setIsCreateOpen((prev) => !prev);
}}
>
- {isCreateOpen ? 'Cancel' : 'Create Organization'}
+ {isCreateOpen ? tCommon('cancel') : t('createOrganization')}
)}
@@ -79,23 +84,23 @@ export function OrganizationSelectorContent() {
{canCreateOrganization && isCreateOpen && (
setOrganizationName(event.target.value)}
- placeholder="Sunshine Dental Clinic"
+ placeholder={tAuth('organizationNamePlaceholder')}
icon={
}
/>
setOrganizationEmail(event.target.value)}
- placeholder="contact@sunshineclinic.com"
+ placeholder={tAuth('organizationEmailPlaceholder')}
type="email"
icon={
}
/>
- Organization type
+ {tAuth('organizationType')}
- Dental Clinic
+ {tAuth('dentalClinic')}
- Dental Lab
+ {tAuth('dentalLab')}
@@ -135,7 +140,7 @@ export function OrganizationSelectorContent() {
isLoading={isLoading}
disabled={!organizationName.trim() || !organizationEmail.trim()}
>
- Create and Continue
+ {t('createAndContinue')}
@@ -144,9 +149,7 @@ export function OrganizationSelectorContent() {
{!organizations.length ? (
- {canCreateOrganization
- ? 'No organizations found. Create your first one to continue.'
- : 'No organizations found. Ask an organization owner to invite you.'}
+ {canCreateOrganization ? t('emptyCanCreate') : t('emptyAskOwner')}
) : (
@@ -166,12 +169,12 @@ export function OrganizationSelectorContent() {
{org.name}
- {org.type === 'CLINIC' ? 'Dental Clinic' : 'Dental Lab'}
+ {getTypeLabel(org.type)}
- Continue →
+ {t('continueArrow')}
))}
diff --git a/frontend/src/components/ui/patient/CreatePatientModal.tsx b/frontend/src/components/ui/patient/CreatePatientModal.tsx
index 2a52439..e6f3e33 100644
--- a/frontend/src/components/ui/patient/CreatePatientModal.tsx
+++ b/frontend/src/components/ui/patient/CreatePatientModal.tsx
@@ -1,5 +1,6 @@
'use client';
+import { useTranslations } from 'next-intl';
import { Button } from '@/components/ui/shared/Button';
import { DialogCloseButton } from '@/components/ui/shared/DialogCloseButton';
import { Input } from '@/components/ui/shared/Input';
@@ -31,26 +32,29 @@ function CreatePatientFormFields({
loading: boolean;
showCancel: boolean;
}) {
+ const t = useTranslations('patients');
+ const tCommon = useTranslations('common');
+
return (
<>
- Cancel
+ {tCommon('cancel')}
)}
@@ -85,6 +89,8 @@ export function CreatePatientModal({
loading = false,
variant = 'inline',
}: CreatePatientModalProps) {
+ const t = useTranslations('patients');
+
if (!isOpen) {
return null;
}
@@ -112,7 +118,7 @@ export function CreatePatientModal({
id="create-patient-dialog-title"
className="text-lg font-semibold text-text-primary pr-2"
>
- New patient
+ {t('dialogTitle')}
onSearchChange(e.target.value)}
icon={
}
/>
- {loading &&
Loading patients...
}
+ {loading &&
{t('loadingPatients')}
}
{!loading && patients.length === 0 && (
-
No patients found for this search.
+
{t('noResults')}
)}
{patients.map((patient) => {
@@ -53,7 +56,7 @@ export function PatientSearchSelect({
{patient.firstName} {patient.lastName}
-
{patient.phone || patient.email || 'No contact'}
+
{patient.phone || patient.email || t('noContact')}
);
})}
diff --git a/frontend/src/components/ui/patient/PatientSummaryCard.tsx b/frontend/src/components/ui/patient/PatientSummaryCard.tsx
index 1e0d844..fb2e1aa 100644
--- a/frontend/src/components/ui/patient/PatientSummaryCard.tsx
+++ b/frontend/src/components/ui/patient/PatientSummaryCard.tsx
@@ -1,3 +1,6 @@
+'use client';
+
+import { useTranslations } from 'next-intl';
import { Patient } from '@/types/patient';
interface PatientSummaryCardProps {
@@ -5,10 +8,12 @@ interface PatientSummaryCardProps {
}
export function PatientSummaryCard({ patient }: PatientSummaryCardProps) {
+ const t = useTranslations('patients');
+
if (!patient) {
return (
-
Select a patient to view details.
+
{t('selectPatient')}
);
}
@@ -18,10 +23,15 @@ export function PatientSummaryCard({ patient }: PatientSummaryCardProps) {
{patient.firstName} {patient.lastName}
-
Phone: {patient.phone || '-'}
-
Email: {patient.email || '-'}
- Status: {patient.isActive ? 'Active' : 'Inactive'}
+ {t('phoneLabel')} {patient.phone || t('emptyValue')}
+
+
+ {t('emailLabel')} {patient.email || t('emptyValue')}
+
+
+ {t('statusLabel')}{' '}
+ {patient.isActive ? t('statusActive') : t('statusInactive')}
);
diff --git a/frontend/src/components/ui/shared/DialogCloseButton.tsx b/frontend/src/components/ui/shared/DialogCloseButton.tsx
index 07631d9..cac7e94 100644
--- 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 (
diff --git a/frontend/src/components/ui/shared/OrganizationCard.tsx b/frontend/src/components/ui/shared/OrganizationCard.tsx
index 2d785f1..68e3e41 100644
--- 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
= ({
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 (
= ({
{typeText}
{organization.plan && (
- Plan: {organization.plan.name} • {organization.plan.maxUsers} users
+ {t('planLabel', {
+ name: organization.plan.name,
+ maxUsers: organization.plan.maxUsers,
+ })}
)}
(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 (
-
{label}
+
{resolvedLabel}
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')}
>
@@ -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')}
>
@@ -148,7 +151,7 @@ export function ScheduleDayPicker({ value, onChange, label = 'Schedule date' }:
@@ -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')}
- Month
+ {t('month')}
- {MONTH_LABELS.map((name, index) => (
-
- {name}
+ {MONTH_KEYS.map((key, index) => (
+
+ {t(key)}
))}
@@ -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')}
void;
@@ -28,16 +37,18 @@ export function AppointmentsStrip({
onSelectAppointment,
loading = false,
}: AppointmentsStripProps) {
+ const t = useTranslations('treatment');
+
if (stripHidden) {
return (
- Appointments are hidden.
+ {t('hiddenMessage')}
- Show appointments
+ {t('showAppointments')}
);
@@ -48,14 +59,14 @@ export function AppointmentsStrip({
My appointments
+ {t('appointmentsTitle')}
- Hide appointments
+ {t('hideAppointments')}
@@ -65,13 +76,13 @@ export function AppointmentsStrip({
onChange={(d) => onSelectDay(startOfLocalDay(d))}
/>
{loading && (
- Loading appointments…
+ {t('loadingAppointments')}
)}
{appointments.length === 0 && (
-
No appointments assigned to you on this day.
+
{t('emptyDay')}
)}
{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 (
{a.patientFirstName} {a.patientLastName}
- {a.purpose}
+
+ {purposeKey ? t(purposeKey) : a.purpose}
+
);
})}
diff --git a/frontend/src/components/ui/treatment/CaseSentLabel.tsx b/frontend/src/components/ui/treatment/CaseSentLabel.tsx
index ef9460c..281cbe6 100644
--- a/frontend/src/components/ui/treatment/CaseSentLabel.tsx
+++ b/frontend/src/components/ui/treatment/CaseSentLabel.tsx
@@ -1,3 +1,6 @@
+'use client';
+
+import { useTranslations } from 'next-intl';
import { formatCaseSentLines } from '@/components/treatment/caseSendLabel';
import type { LinkedOrganizationOption, PastTreatmentCase, TreatmentCaseDraft } from '@/types/treatment';
@@ -11,11 +14,12 @@ interface CaseSentLabelProps {
}
export function CaseSentLabel({ treatmentCase, orgs, className = 'text-xs text-text-muted' }: CaseSentLabelProps) {
+ const t = useTranslations('treatment');
const lines = formatCaseSentLines(treatmentCase.sends, {
organizationIds: treatmentCase.sendToOrganizationIds ?? [],
sentAt: treatmentCase.sentAt ?? null,
orgs,
- });
+ }, t);
if (lines.length === 0) return null;
diff --git a/frontend/src/components/ui/treatment/FdiToothChart.tsx b/frontend/src/components/ui/treatment/FdiToothChart.tsx
index 49099e5..ce89280 100644
--- a/frontend/src/components/ui/treatment/FdiToothChart.tsx
+++ b/frontend/src/components/ui/treatment/FdiToothChart.tsx
@@ -1,6 +1,7 @@
'use client';
import { useId } from 'react';
+import { useTranslations } from 'next-intl';
import { FDI_LOWER_LEFT_TO_RIGHT, FDI_UPPER_LEFT_TO_RIGHT, getToothShapeKind } from '@/components/treatment/fdiToothMeta';
import { ToothGlyph } from '@/components/ui/treatment/ToothGlyph';
import type { FdiToothId } from '@/types/treatment';
@@ -25,6 +26,7 @@ interface FdiToothChartProps {
}
export function FdiToothChart({ selected, onToggle, disabled }: FdiToothChartProps) {
+ const t = useTranslations('treatment');
const uid = useId().replace(/:/g, '');
const archPeak = 10;
@@ -127,7 +129,11 @@ export function FdiToothChart({ selected, onToggle, disabled }: FdiToothChartPro
${disabled ? 'opacity-50 cursor-not-allowed' : 'hover:scale-105 active:scale-95'}
`}
aria-pressed={isSel}
- aria-label={`FDI tooth ${fdi}${isSel ? ', selected' : ''}`}
+ aria-label={
+ isSel
+ ? `${t('toothAria', { fdi })}${t('toothSelectedSuffix')}`
+ : t('toothAria', { fdi })
+ }
>
-
FDI tooth chart
+
{t('toothChartTitle')}
- Tap teeth to multi-select. Applies to the active case.
+ {t('toothChartHint')}
- Selected: {selected.size === 0 ? '—' : [...selected].sort().join(', ')}
+ {t('selectedLabel')} {selected.size === 0 ? t('selectedEmpty') : [...selected].sort().join(', ')}
- Upper arch
+ {t('upperArch')}
@@ -215,7 +221,7 @@ export function FdiToothChart({ selected, onToggle, disabled }: FdiToothChartPro
- Lower arch
+ {t('lowerArch')}
);
}
diff --git a/frontend/src/components/ui/treatment/PastTreatmentsPanel.tsx b/frontend/src/components/ui/treatment/PastTreatmentsPanel.tsx
index fe0fd4c..68031bf 100644
--- a/frontend/src/components/ui/treatment/PastTreatmentsPanel.tsx
+++ b/frontend/src/components/ui/treatment/PastTreatmentsPanel.tsx
@@ -1,9 +1,18 @@
'use client';
+import { useTranslations } from 'next-intl';
import { FileText } from 'lucide-react';
import type { PastTreatment } from '@/types/treatment';
import { CaseSentLabel } from '@/components/ui/treatment/CaseSentLabel';
+const TREATMENT_TYPE_KEYS = {
+ consultation: 'typeConsultation',
+ filling: 'typeFilling',
+ endo: 'typeEndo',
+ visit: 'typeVisit',
+ hygiene: 'typeHygiene',
+} as const;
+
interface PastTreatmentsPanelProps {
items: PastTreatment[];
loading?: boolean;
@@ -15,43 +24,50 @@ export function PastTreatmentsPanel({
loading,
onReviewTreatment,
}: PastTreatmentsPanelProps) {
+ const t = useTranslations('treatment');
+ const tCommon = useTranslations('common');
+
return (
-
Previous treatments
+
{t('historyTitle')}
- Completed treatments for this patient. Each case is listed separately.
+ {t('historySubtitle')}
- {loading &&
Loading history…
}
+ {loading &&
{t('loadingHistory')}
}
{!loading && items.length === 0 && (
-
No prior treatments for this patient.
+
{t('historyEmpty')}
)}
- {items.map((t) => (
+ {items.map((treatment) => (
-
{t.title}
-
Status: {t.status}
+
{treatment.title}
+
+ {t('statusLabel')} {treatment.status}
+
- {new Date(t.treatmentAt).toLocaleDateString()}
+ {new Date(treatment.treatmentAt).toLocaleDateString()}
- {t.cases.map((c, idx) => {
+ {treatment.cases.map((c, idx) => {
const attachments = c.attachmentMetas ?? [];
+ const typeKey = TREATMENT_TYPE_KEYS[c.treatmentType as keyof typeof TREATMENT_TYPE_KEYS];
+ const typeLabel = typeKey ? t(typeKey) : c.treatmentType;
return (
- Case {idx + 1} · {c.treatmentType}
+ {t('historyCaseLabel', { n: idx + 1, type: typeLabel })}
{c.sentAt && (
- Teeth: {c.teeth.length ? [...c.teeth].sort().join(', ') : 'None selected'}
+ {t('teethLabel')} {c.teeth.length ? [...c.teeth].sort().join(', ') : t('teethNone')}
{c.notes?.trim() && (
{c.notes}
)}
- Attachments
+ {t('attachments')}
{attachments.length === 0 ? (
-
None
+
{tCommon('none')}
) : (
{attachments.map((doc) => (
@@ -106,10 +122,10 @@ export function PastTreatmentsPanel({
onReviewTreatment(t)}
+ onClick={() => onReviewTreatment(treatment)}
className="text-xs text-primary hover:underline focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/35 rounded-[var(--radius-sm)] px-1"
>
- Review details
+ {t('reviewDetails')}
)}
diff --git a/frontend/src/components/ui/treatment/TreatmentCasesEditor.tsx b/frontend/src/components/ui/treatment/TreatmentCasesEditor.tsx
index 1ce2135..0d24eae 100644
--- a/frontend/src/components/ui/treatment/TreatmentCasesEditor.tsx
+++ b/frontend/src/components/ui/treatment/TreatmentCasesEditor.tsx
@@ -1,6 +1,7 @@
'use client';
import { useRef } from 'react';
+import { useTranslations } from 'next-intl';
import { Button } from '@/components/ui/shared/Button';
import { Checkbox } from '@/components/ui/shared/Checkbox';
import { Dropdown } from '@/components/ui/shared/Dropdown';
@@ -54,6 +55,8 @@ export function TreatmentCasesEditor({
onSendCase,
onUploadFiles,
}: TreatmentCasesEditorProps) {
+ const t = useTranslations('treatment');
+ const tCommon = useTranslations('common');
const attachmentInputRef = useRef(null);
const activeCase = cases.find((c) => c.clientId === activeCaseId) ?? cases[0];
const activeLinkedOrganizations = orgs.filter((o) => o.active);
@@ -84,17 +87,17 @@ export function TreatmentCasesEditor({
-
Treatment cases
+
{t('casesTitle')}
- Each case has its own teeth, notes, attachments, and destinations for send.
+ {t('casesSubtitle')}
- Preview
+ {tCommon('preview')}
- Add case
+ {t('addCase')}
@@ -105,7 +108,7 @@ export function TreatmentCasesEditor({
organizationIds: c.sendToOrganizationIds ?? [],
sentAt: c.sentAt ?? null,
orgs,
- });
+ }, t);
return (
- Case {idx + 1}
+ {t('caseLabel', { n: idx + 1 })}
{sentSummary ? ` · ${sentSummary}` : ''}
);
@@ -130,7 +133,7 @@ export function TreatmentCasesEditor({
- Comments
+ {t('comments')}