admin/dyolink
0
0
Fork 0
Code Issues 24 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

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

Browse Source
This commit is contained in:
Admin
2026-06-20 14:51:43 +03:30
parent 284fbd08aa
commit b2f4dfa4ca
52 changed files with 3306 additions and 1041 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
frontend/src/app/[locale]/(dashboard)/appointments/page.tsx
View File

@@ -1,6 +1,7 @@
'use client';
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { useTranslations } from 'next-intl';
import { appointmentsApi } from '@/lib/api/appointments';
import { patientsApi } from '@/lib/api/patients';
import { useAuth } from '@/lib/hooks/useAuth';
@@ -28,6 +29,8 @@ const EMPTY_PATIENT_FORM: CreatePatientInput = {
};
export default function AppointmentsPage() {
const t = useTranslations('appointments');
const tPatients = useTranslations('patients');
const { currentOrganization } = useAuth();
const [scheduleDate, setScheduleDate] = useState(() => startOfLocalDay(new Date()));
@@ -99,13 +102,13 @@ export default function AppointmentsPage() {
if (gen !== scheduleLoadGen.current) {
return;
}
toast.showError(formatApiErrorMessage(err, 'Failed to load schedule.'));
toast.showError(formatApiErrorMessage(err, t('errorLoadSchedule')));
} finally {
if (gen === scheduleLoadGen.current) {
setLoadingSchedule(false);
}
}
}, [currentOrganization?.id, scheduleDate]);
}, [currentOrganization?.id, scheduleDate, t]);
useEffect(() => {
void loadSchedule();
@@ -149,12 +152,17 @@ export default function AppointmentsPage() {
setPatientForm(EMPTY_PATIENT_FORM);
await loadPatientsSearch(search);
setSelectedPatient(response.data);
toast.showSuccess(`Patient ${response.data.firstName} ${response.data.lastName} was saved.`);
toast.showSuccess(
t('successPatientSaved', {
firstName: response.data.firstName,
lastName: response.data.lastName,
}),
);
} catch (err: unknown) {
const message =
err && typeof err === 'object' && 'message' in err
? String((err as { message: unknown }).message)
: 'Failed to save patient.';
: tPatients('errorSavePatient');
toast.showError(message);
} finally {
setSavingPatient(false);
@@ -163,11 +171,11 @@ export default function AppointmentsPage() {
function handleSlotClick(startMinute: number, providerUserId: string, providerName: string) {
if (isViewingPastDay) {
toast.showInfo('Past appointments are view-only.');
toast.showInfo(t('infoPastViewOnly'));
return;
}
if (!selectedPatient) {
toast.showInfo('Select a patient before booking.');
toast.showInfo(t('infoSelectPatient'));
return;
}
setBookingStartMinute(startMinute);
@@ -179,7 +187,7 @@ export default function AppointmentsPage() {
function handleAppointmentClick(appointment: AppointmentRecord) {
if (isViewingPastDay) {
toast.showInfo('Past appointments are view-only.');
toast.showInfo(t('infoPastViewOnly'));
return;
}
const provider = providers.find((p) => p.userId === appointment.providerUserId);
@@ -192,9 +200,7 @@ export default function AppointmentsPage() {
}
function handleAppointmentOutsideHours(appointment: AppointmentRecord) {
toast.showError(
'This appointment falls outside the provider’s current working hours and cannot be edited.',
);
toast.showError(t('errorOutsideHours'));
}
async function handleSaveAppointment(payload: {
@@ -214,15 +220,15 @@ export default function AppointmentsPage() {
}
setBookingOpen(false);
setEditingAppointmentId(null);
toast.showSuccess(activeEditingAppointment ? 'Appointment updated.' : 'Appointment saved.');
toast.showSuccess(activeEditingAppointment ? t('successUpdated') : t('successSaved'));
await loadSchedule();
} catch (err: unknown) {
const message =
err && typeof err === 'object' && 'message' in err
? String((err as { message: unknown }).message)
: activeEditingAppointment
? 'Could not update appointment.'
: 'Could not save appointment.';
? t('errorUpdate')
: t('errorSave');
toast.showError(message);
} finally {
setSavingAppointment(false);
@@ -233,7 +239,7 @@ export default function AppointmentsPage() {
if (!activeEditingAppointment) {
return;
}
if (!window.confirm('Remove this appointment?')) {
if (!window.confirm(t('confirmRemove'))) {
return;
}
setDeletingAppointment(true);
@@ -242,13 +248,13 @@ export default function AppointmentsPage() {
await appointmentsApi.remove(activeEditingAppointment.id);
setBookingOpen(false);
setEditingAppointmentId(null);
toast.showSuccess('Appointment removed.');
toast.showSuccess(t('successRemoved'));
await loadSchedule();
} catch (err: unknown) {
const message =
err && typeof err === 'object' && 'message' in err
? String((err as { message: unknown }).message)
: 'Could not delete appointment.';
: t('errorDelete');
toast.showError(message);
} finally {
setDeletingAppointment(false);
@@ -258,10 +264,8 @@ export default function AppointmentsPage() {
return (
<div className="space-y-6">
<div className="flex flex-col gap-1">
<h1 className="text-2xl font-semibold text-text-primary">Appointments</h1>
<p className="text-sm text-text-secondary">
Search a patient, pick a date, then click a time slot under a provider to book.
</p>
<h1 className="text-2xl font-semibold text-text-primary">{t('title')}</h1>
<p className="text-sm text-text-secondary">{t('subtitle')}</p>
</div>
<ToastStack {...toast.messages} />
@@ -296,7 +300,7 @@ export default function AppointmentsPage() {
onChange={(d) => setScheduleDate(startOfLocalDay(d))}
/>
{loadingSchedule && (
<p className="text-sm text-text-muted pb-2">Loading schedule…</p>
<p className="text-sm text-text-muted pb-2">{t('loadingSchedule')}</p>
)}
</div>

137
frontend/src/app/[locale]/(dashboard)/organizations/page.tsx
View File

@@ -1,6 +1,7 @@
'use client';
import { useEffect, useState } from 'react';
import { useCallback, useEffect, useState } from 'react';
import { useTranslations } from 'next-intl';
import { useToast } from '@/lib/hooks/useToast';
import { Check, Trash2, UserPlus, X } from 'lucide-react';
import { useAuth } from '@/lib/hooks/useAuth';
@@ -28,32 +29,6 @@ function formatOrganizationStatusLabel(status: string): string {
return lower.charAt(0).toUpperCase() + lower.slice(1);
}
function formatConnectionStatusLabel(
row: CounterpartItemDto,
currentOrganizationId: string,
): string {
if (row.status === 'PENDING') {
if (
row.pendingInvitationId &&
row.requestedByOrganizationId === currentOrganizationId
) {
return 'Invitation pending';
}
return 'Connection request pending';
}
if (row.status === 'ACTIVE') return 'Connected';
if (row.status === 'REJECTED') return 'Connection request declined';
return formatOrganizationStatusLabel(row.status);
}
function formatApiMessage(err: unknown): string {
if (!err || typeof err !== 'object') return 'Something went wrong';
const m = (err as ApiError).message;
if (Array.isArray(m)) return m.join(', ');
if (typeof m === 'string') return m;
return 'Something went wrong';
}
function formatTableDate(value: string): string {
const d = new Date(value);
if (Number.isNaN(d.getTime())) return '\u2014';
@@ -63,10 +38,42 @@ function formatTableDate(value: string): string {
type TableMode = 'existing' | 'search';
export default function OrganizationsPage() {
const t = useTranslations('organizations');
const tNav = useTranslations('nav');
const tCommon = useTranslations('common');
const { currentOrganization } = useAuth();
const [loading, setLoading] = useState(true);
const toast = useToast();
const formatApiMessage = useCallback(
(err: unknown): string => {
if (!err || typeof err !== 'object') return tCommon('errorGeneric');
const m = (err as ApiError).message;
if (Array.isArray(m)) return m.join(', ');
if (typeof m === 'string') return m;
return tCommon('errorGeneric');
},
[tCommon],
);
const formatConnectionStatusLabel = useCallback(
(row: CounterpartItemDto, currentOrganizationId: string): string => {
if (row.status === 'PENDING') {
if (
row.pendingInvitationId &&
row.requestedByOrganizationId === currentOrganizationId
) {
return t('statusInvitationPending');
}
return t('statusConnectionPending');
}
if (row.status === 'ACTIVE') return t('statusConnected');
if (row.status === 'REJECTED') return t('statusDeclined');
return formatOrganizationStatusLabel(row.status);
},
[t],
);
const [query, setQuery] = useState('');
const [mode, setMode] = useState<TableMode>('existing');
const [searching, setSearching] = useState(false);
@@ -91,8 +98,9 @@ export default function OrganizationsPage() {
pruneAcceptedLinks,
} = useOrganizationInviteLinkCopy(currentOrganization?.id);
const counterpartLabel = currentOrganization?.type === 'LAB' ? 'Clinic' : 'Lab';
const tabLabel = currentOrganization?.type === 'LAB' ? 'Clinics' : 'Labs';
const counterpart =
currentOrganization?.type === 'LAB' ? t('counterpartClinic') : t('counterpartLab');
const tabLabel = currentOrganization?.type === 'LAB' ? tNav('clinics') : tNav('labs');
const existingRows = items;
@@ -142,7 +150,7 @@ export default function OrganizationsPage() {
toast.setError('');
try {
await organizationApi.createConnectionRequest(targetOrganizationId);
toast.showSuccess(`${counterpartLabel} connection request sent.`);
toast.showSuccess(t('successConnectionSent', { counterpart }));
setSearchResults([]);
setQuery('');
setMode('existing');
@@ -163,7 +171,7 @@ export default function OrganizationsPage() {
ownerEmail: manualOwnerEmail.trim(),
});
storeInviteLink(res.data.invitationId, manualOwnerEmail, res.data.invitationUrl);
toast.showSuccess(`Invitation link created for ${manualOwnerEmail.trim()}`);
toast.showSuccess(t('successInviteCreated', { email: manualOwnerEmail.trim() }));
setManualOrganizationName('');
setManualOwnerEmail('');
setShowInviteForm(false);
@@ -206,7 +214,7 @@ export default function OrganizationsPage() {
await loadInvitationHistory();
},
});
toast.showSuccess('Invitation link copied to clipboard.');
toast.showSuccess(t('successLinkCopied'));
} catch (e) {
toast.showError(formatApiMessage(e));
}
@@ -232,7 +240,7 @@ export default function OrganizationsPage() {
},
},
);
toast.showSuccess('Invitation link copied to clipboard.');
toast.showSuccess(t('successLinkCopied'));
} catch (e) {
toast.showError(formatApiMessage(e));
}
@@ -244,7 +252,7 @@ export default function OrganizationsPage() {
try {
await organizationApi.respondToConnectionRequest(connectionId, action);
toast.showSuccess(
action === 'ACCEPT' ? 'Connection request accepted.' : 'Connection request declined.',
action === 'ACCEPT' ? t('successAccepted') : t('successDeclined'),
);
await loadList();
} catch (e) {
@@ -259,7 +267,7 @@ export default function OrganizationsPage() {
toast.setError('');
try {
await organizationApi.deleteConnection(connectionId);
toast.showSuccess('Connection removed.');
toast.showSuccess(t('successRemoved'));
await loadList();
} catch (e) {
toast.showError(formatApiMessage(e));
@@ -276,7 +284,7 @@ export default function OrganizationsPage() {
}
if (!currentOrganization) {
return <p className="text-sm text-text-secondary">Loading organization...</p>;
return <p className="text-sm text-text-secondary">{t('loadingOrganization')}</p>;
}
return (
@@ -284,13 +292,10 @@ export default function OrganizationsPage() {
<div className="flex flex-col gap-1 sm:flex-row sm:items-start sm:justify-between">
<div>
<h1 className="text-2xl font-semibold text-text-primary">{tabLabel}</h1>
<p className="text-sm text-text-secondary mt-1">
Search organizations, send connection requests to existing accounts, or invitation
links when they are not on DyoLink yet.
</p>
<p className="text-sm text-text-secondary mt-1">{t('subtitle')}</p>
</div>
<Button type="button" size="sm" onClick={() => void openInvitationHistory()}>
Invitation History
{t('invitationHistory')}
</Button>
</div>
@@ -300,7 +305,7 @@ export default function OrganizationsPage() {
value={query}
onChange={setQuery}
onSubmit={() => void runSearch()}
placeholder={`Search ${counterpartLabel.toLowerCase()} by name, email, or phone...`}
placeholder={t('searchPlaceholder', { counterpart: counterpart.toLowerCase() })}
actions={
<>
<button
@@ -309,7 +314,7 @@ export default function OrganizationsPage() {
disabled={searching}
className="px-4 py-2 rounded-[var(--radius-sm)] text-sm font-medium border bg-primary-soft text-primary border-primary/50 disabled:opacity-60"
>
Search
{tCommon('search')}
</button>
{mode === 'search' && (
<button
@@ -317,7 +322,7 @@ export default function OrganizationsPage() {
onClick={clearSearchView}
className="px-4 py-2 rounded-[var(--radius-sm)] text-sm font-medium border text-text-secondary border-border/40 hover:bg-background-card/70 hover:border-border"
>
Back to list
{t('backToList')}
</button>
)}
</>
@@ -328,19 +333,19 @@ export default function OrganizationsPage() {
headers={
<tr>
<th className="px-6 py-3 text-left text-xs font-medium text-text-muted uppercase tracking-wider">
Organization
{t('tableOrganization')}
</th>
<th className="px-6 py-3 text-left text-xs font-medium text-text-muted uppercase tracking-wider">
Owner email
{t('tableOwnerEmail')}
</th>
<th className="px-6 py-3 text-left text-xs font-medium text-text-muted uppercase tracking-wider">
Date
{t('tableDate')}
</th>
<th className="px-6 py-3 text-center text-xs font-medium text-text-muted uppercase tracking-wider">
Status
{t('tableStatus')}
</th>
<th className="px-6 py-3 text-right text-xs font-medium text-text-muted uppercase tracking-wider">
Action
{t('tableAction')}
</th>
</tr>
}
@@ -349,14 +354,14 @@ export default function OrganizationsPage() {
{loading ? (
<tr>
<td colSpan={5} className="px-6 py-8 text-sm text-text-secondary">
Loading...
{tCommon('loadingEllipsis')}
</td>
</tr>
) : mode === 'existing' ? (
existingRows.length === 0 ? (
<tr>
<td colSpan={5} className="px-6 py-8 text-sm text-text-secondary">
No connections yet. Search to send a connection request or an invitation link.
{t('emptyConnections')}
</td>
</tr>
) : (
@@ -401,8 +406,8 @@ export default function OrganizationsPage() {
className="p-2 rounded-md text-text-secondary hover:bg-background-card/80 hover:text-text-primary disabled:text-text-muted disabled:opacity-50"
disabled={pendingConnectionRowId !== null && pendingConnectionRowId !== row.id}
onClick={() => void respondToPendingConnection(row.id, 'ACCEPT')}
aria-label="Accept connection request"
title="Accept connection request"
aria-label={t('acceptRequest')}
title={t('acceptRequest')}
>
<Check className="w-4 h-4" />
</button>
@@ -411,8 +416,8 @@ export default function OrganizationsPage() {
className="p-2 rounded-md text-text-secondary hover:bg-red-500/15 hover:text-red-600 disabled:text-text-muted disabled:opacity-50"
disabled={pendingConnectionRowId !== null && pendingConnectionRowId !== row.id}
onClick={() => void respondToPendingConnection(row.id, 'REJECT')}
aria-label="Decline connection request"
title="Decline connection request"
aria-label={t('declineRequest')}
title={t('declineRequest')}
>
<X className="w-4 h-4" />
</button>
@@ -424,8 +429,8 @@ export default function OrganizationsPage() {
className="p-2 rounded-md text-text-secondary hover:bg-red-500/15 hover:text-red-600 disabled:text-text-muted disabled:opacity-50"
disabled={deleteConnectionRowId !== null && deleteConnectionRowId !== row.id}
onClick={() => void deleteConnection(row.id)}
aria-label="Remove connection"
title="Remove connection"
aria-label={t('removeConnection')}
title={t('removeConnection')}
>
<Trash2 className="w-4 h-4" />
</button>
@@ -441,9 +446,9 @@ export default function OrganizationsPage() {
<tr key={r.id} className="hover:bg-background-secondary/45">
<td className="px-6 py-1.5 text-sm font-medium text-text-primary">{r.name}</td>
<td className="px-6 py-1.5 text-sm text-text-secondary">{r.owner.email}</td>
<td className="px-6 py-1.5 text-sm text-text-secondary">Today</td>
<td className="px-6 py-1.5 text-sm text-text-secondary">{t('statusToday')}</td>
<td className="px-6 py-1.5 text-center align-middle">
<Badge variant="default" fixedWidth={false}>Found</Badge>
<Badge variant="default" fixedWidth={false}>{t('statusFound')}</Badge>
</td>
<td className="px-6 py-1.5 text-right">
<button
@@ -453,8 +458,8 @@ export default function OrganizationsPage() {
pendingConnectionRowId !== null && pendingConnectionRowId !== r.id
}
onClick={() => void submitConnectionRequest(r.id)}
aria-label="Send connection request"
title="Send connection request"
aria-label={t('sendRequest')}
title={t('sendRequest')}
>
<UserPlus className="w-4 h-4" />
</button>
@@ -466,22 +471,22 @@ export default function OrganizationsPage() {
<td colSpan={5} className="px-6 py-6">
<div className="flex flex-col gap-3">
<p className="text-sm text-text-secondary">
No organization found in directory search.
{t('noDirectoryResults')}
</p>
<div className="flex flex-wrap items-center gap-2">
<Button type="button" onClick={() => setShowInviteForm((v) => !v)}>
{showInviteForm ? 'Hide invitation fields' : 'Send invitation link'}
{showInviteForm ? t('hideInvitationFields') : t('sendInvitationLink')}
</Button>
</div>
{showInviteForm && (
<div className="grid gap-3 sm:grid-cols-3 mt-1">
<Input
label={`${counterpartLabel} name`}
label={t('counterpartNameLabel', { counterpart })}
value={manualOrganizationName}
onChange={(e) => setManualOrganizationName(e.target.value)}
/>
<Input
label="Owner email"
label={t('ownerEmailLabel')}
type="email"
value={manualOwnerEmail}
onChange={(e) => setManualOwnerEmail(e.target.value)}
@@ -494,7 +499,7 @@ export default function OrganizationsPage() {
onClick={() => void sendInvite()}
className="w-full"
>
Send invitation
{t('sendInvitation')}
</Button>
</div>
</div>

296
frontend/src/app/[locale]/(dashboard)/patients/page.tsx
View File

@@ -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<Patient[]>([]);
const [selectedPatient, setSelectedPatient] = useState<Patient | undefined>();
const [loadingPatients, setLoadingPatients] = useState(false);
const [isCreateOpen, setIsCreateOpen] = useState(false);
const [savingPatient, setSavingPatient] = useState(false);
const [patientForm, setPatientForm] = useState<CreatePatientInput>(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 (
<div className="space-y-6">
<div className="flex items-center justify-between gap-3">
<h1 className="text-2xl font-semibold text-text-primary">Patients</h1>
<Button
variant="primary"
disabled={!canEditPatients}
onClick={() => {
if (!canEditPatients) return;
toast.clear();
setPatientForm(EMPTY_PATIENT_FORM);
setIsCreateOpen(true);
}}
title={!canEditPatients ? 'Read-only access for this organization.' : undefined}
>
New Patient
</Button>
</div>
<ToastStack {...toast.messages} />
{isCreateOpen && (
<CreatePatientModal
isOpen={isCreateOpen}
formData={patientForm}
onChange={(patch) => setPatientForm((prev) => ({ ...prev, ...patch }))}
onSubmit={() => void handleCreatePatient()}
onClose={() => {
setIsCreateOpen(false);
setPatientForm(EMPTY_PATIENT_FORM);
}}
loading={savingPatient}
/>
)}
<div className="grid grid-cols-1 xl:grid-cols-3 gap-6">
<div className="xl:col-span-1">
<PatientSearchSelect
search={search}
onSearchChange={setSearch}
patients={sortedPatients}
selectedPatientId={selectedPatient?.id}
onSelectPatient={setSelectedPatient}
loading={loadingPatients}
/>
</div>
<div className="xl:col-span-2 space-y-4">
<PatientSummaryCard patient={selectedPatient} />
</div>
</div>
</div>
);
}
'use client';
import { useEffect, useMemo, useState } from 'react';
import { useTranslations } from 'next-intl';
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 t = useTranslations('patients');
const tCommon = useTranslations('common');
const { currentOrganization } = useAuth();
const toast = useToast();
const [search, setSearch] = useState('');
const [patients, setPatients] = useState<Patient[]>([]);
const [selectedPatient, setSelectedPatient] = useState<Patient | undefined>();
const [loadingPatients, setLoadingPatients] = useState(false);
const [isCreateOpen, setIsCreateOpen] = useState(false);
const [savingPatient, setSavingPatient] = useState(false);
const [patientForm, setPatientForm] = useState<CreatePatientInput>(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() {

17
frontend/src/app/[locale]/(dashboard)/settings/account/page.tsx
View File

@@ -1,8 +1,12 @@
'use client';
import { useTranslations } from 'next-intl';
import { Link } from '@/i18n/navigation';
export default function AccountSettingsPage() {
const t = useTranslations('settings');
const tCommon = useTranslations('common');
return (
<div className="space-y-6">
<div>
@@ -10,19 +14,14 @@ export default function AccountSettingsPage() {
href="/today"
className="text-sm text-primary hover:opacity-90"
>
← Back to app
{tCommon('backToApp')}
</Link>
<h1 className="text-2xl font-semibold text-text-primary mt-4">Account</h1>
<p className="text-text-secondary text-sm mt-2">
Profile and security settings for your login.
</p>
<h1 className="text-2xl font-semibold text-text-primary mt-4">{t('accountTitle')}</h1>
<p className="text-text-secondary text-sm mt-2">{t('accountSubtitle')}</p>
</div>
<div className="surface-card p-6 space-y-3">
<p className="text-sm text-text-secondary">
Password change and profile editing will be wired here next (e.g. invite
flow, reset password).
</p>
<p className="text-sm text-text-secondary">{t('accountPlaceholder')}</p>
</div>
</div>
);

5
frontend/src/app/[locale]/(dashboard)/settings/organizations/page.tsx
View File

@@ -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 (
<div className="space-y-6">
<div>
@@ -11,7 +14,7 @@ export default function DashboardOrganizationsSettingsPage() {
href="/today"
className="text-sm text-primary hover:opacity-90"
>
← Back to app
{tCommon('backToApp')}
</Link>
</div>
<OrganizationSelectorContent />

80
frontend/src/app/[locale]/(dashboard)/settings/subscriptions/page.tsx
View File

@@ -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<SubscriptionAlertData | null>(null);
@@ -38,13 +41,13 @@ export default function SubscriptionsSettingsPage() {
if (!currentOrganization) {
return (
<p className="text-text-secondary text-sm">Loading...</p>
<p className="text-text-secondary text-sm">{tCommon('loadingEllipsis')}</p>
);
}
if (!currentOrganization.isOwner) {
return (
<p className="text-text-secondary text-sm">Redirecting...</p>
<p className="text-text-secondary text-sm">{tCommon('redirecting')}</p>
);
}
@@ -75,55 +78,51 @@ export default function SubscriptionsSettingsPage() {
href="/today"
className="text-sm text-primary hover:opacity-90"
>
← Back to app
{tCommon('backToApp')}
</Link>
<h1 className="text-2xl font-semibold text-text-primary mt-4">Subscriptions</h1>
<h1 className="text-2xl font-semibold text-text-primary mt-4">{t('subscriptionsTitle')}</h1>
<p className="text-text-secondary text-sm mt-2">
Your DyoLink workspace plan and seats for{' '}
<span className="text-text-primary font-medium">{currentOrganization.name}</span>.
Clinic and lab income tracking stays under the sidebar{' '}
<span className="text-text-primary">Billing</span> tab.
{t('subscriptionsSubtitle', { orgName: currentOrganization.name })}
</p>
</div>
<div className="surface-card p-6 space-y-4">
{!hasActiveSubscription && (
<div className="rounded-[var(--radius-md)] border border-amber-500/30 bg-amber-500/10 p-4">
<p className="text-sm text-amber-200">
This organization has no active subscription. Select a plan below to start
the purchase process.
</p>
<p className="text-sm text-amber-200">{t('noSubscriptionNotice')}</p>
</div>
)}
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-5">
<div>
<p className="text-xs text-text-muted uppercase tracking-wide">Current plan</p>
<p className="text-xs text-text-muted uppercase tracking-wide">{t('currentPlan')}</p>
<p className="text-lg font-medium text-text-primary capitalize">
{plan?.name ?? '—'}
</p>
</div>
<div>
<p className="text-xs text-text-muted uppercase tracking-wide">Plan price</p>
<p className="text-xs text-text-muted uppercase tracking-wide">{t('planPrice')}</p>
<p className="text-lg font-medium text-text-primary">
{typeof plan?.price === 'number' ? `$${plan.price}` : '—'}
</p>
</div>
<div>
<p className="text-xs text-text-muted uppercase tracking-wide">Seats used</p>
<p className="text-xs text-text-muted uppercase tracking-wide">{t('seatsUsed')}</p>
<p className="text-lg font-medium text-text-primary">
{typeof seatsUsed === 'number' ? seatsUsed : '—'}
{typeof maxUsers === 'number' ? ` / ${isUnlimited ? 'Unlimited' : maxUsers}` : ''}
{typeof maxUsers === 'number'
? ` / ${isUnlimited ? t('unlimited') : maxUsers}`
: ''}
</p>
</div>
<div>
<p className="text-xs text-text-muted uppercase tracking-wide">Seats remaining</p>
<p className="text-xs text-text-muted uppercase tracking-wide">{t('seatsRemaining')}</p>
<p className="text-lg font-medium text-text-primary">
{isUnlimited ? 'Unlimited' : seatsRemaining ?? '—'}
{isUnlimited ? t('unlimited') : seatsRemaining ?? '—'}
</p>
</div>
<div>
<p className="text-xs text-text-muted uppercase tracking-wide">Days remaining</p>
<p className="text-xs text-text-muted uppercase tracking-wide">{t('daysRemaining')}</p>
<p className={`text-lg font-medium ${planDayTone}`}>
{daysUntilPlanEnd ?? '—'}
</p>
@@ -133,27 +132,24 @@ export default function SubscriptionsSettingsPage() {
{alert?.showWarning && (
<div className="text-sm text-text-secondary space-y-1">
{alert.noActiveSubscription && (
<p>No active subscription for this organization.</p>
<p>{t('noActiveSubscription')}</p>
)}
{alert.trialExpired && (
<p>Trial period has ended. Choose a plan when checkout is available.</p>
<p>{t('trialEnded')}</p>
)}
{!alert.trialExpired && alert.trialEndingSoon && (
<p>
Trial ends in {alert.daysUntilTrialEnd ?? '—'} day(s).
{t('trialEndsIn', { days: alert.daysUntilTrialEnd ?? '—' })}
</p>
)}
{!alert.trialExpired && !alert.trialEndingSoon && alert.seatsLow && (
<p>Seat usage is high for this organization.</p>
<p>{t('seatsLow')}</p>
)}
</div>
)}
<div className="space-y-3 pt-2">
<p className="text-sm text-text-secondary">
Choose a plan to continue. Purchase integration is not active yet, so this
currently prepares the selection step only.
</p>
<p className="text-sm text-text-secondary">{t('choosePlanIntro')}</p>
<div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
{PLAN_OPTIONS.map((option) => {
const selected = selectedPlanId === option.id;
@@ -168,11 +164,15 @@ export default function SubscriptionsSettingsPage() {
: 'border-border hover:border-border-strong'
}`}
>
<p className="text-base font-medium text-text-primary">{option.name}</p>
<p className="text-base font-medium text-text-primary">{t(option.nameKey)}</p>
<p className="text-sm text-text-secondary mt-1">
{option.maxUsers == null ? 'Unlimited seats' : `${option.maxUsers} seats`}
{option.maxUsers == null
? t('unlimitedSeats')
: t('seatsCount', { n: option.maxUsers })}
</p>
<p className="text-sm text-text-secondary mt-1">
{t('pricePerMonth', { price: option.price })}
</p>
<p className="text-sm text-text-secondary mt-1">${option.price} / month</p>
</button>
);
})}
@@ -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')}
</Button>
</div>
</div>

213
frontend/src/app/[locale]/(dashboard)/staff/page.tsx
View File

@@ -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"
>
<span className="text-sm font-medium text-text-primary">
{resolveStaffFeatureLabel(g, organizationType)}
{resolveStaffFeatureLabel(g, organizationType, tFeatures)}
</span>
<div className="flex flex-col gap-2.5 pl-0.5">
<Checkbox
checked={cell.read}
disabled={disabled}
label="View"
label={t('permissionView')}
onChange={(v) => setRead(g.edit, v)}
/>
<Checkbox
checked={cell.edit}
disabled={disabled}
label="Edit"
label={t('permissionEdit')}
onChange={(v) => setEdit(g.edit, v)}
/>
</div>
@@ -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<StaffMemberDto[]>([]);
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 (
<p className="text-sm text-text-secondary">Redirecting…</p>
<p className="text-sm text-text-secondary">{t('redirecting')}</p>
);
}
@@ -490,10 +498,8 @@ export default function StaffPage() {
<div className="space-y-6">
<div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
<div>
<h1 className="text-2xl font-semibold text-text-primary">Staff Management</h1>
<p className="text-sm text-text-secondary mt-1">
Invite teammates, set tab access, and stay within your plan seat limit.
</p>
<h1 className="text-2xl font-semibold text-text-primary">{t('title')}</h1>
<p className="text-sm text-text-secondary mt-1">{t('subtitle')}</p>
</div>
<Button
size="sm"
@@ -505,9 +511,9 @@ export default function StaffPage() {
}}
disabled={!canEdit || atSeatLimit}
className="shrink-0"
title={!canEdit ? 'Read-only access for this organization.' : undefined}
title={!canEdit ? tCommon('readOnlyAccess') : undefined}
>
Invite member
{t('inviteMember')}
</Button>
</div>
@@ -515,16 +521,14 @@ export default function StaffPage() {
{seats && (
<p className="text-sm text-text-secondary">
Seats:{' '}
{t('seatsLabel')}{' '}
<span className="text-text-primary font-medium">
{seats.used}
{seats.unlimited ? ' (unlimited plan)' : ` / ${seats.limit}`}
{seats.unlimited ? ` ${t('unlimitedPlan')}` : ` / ${seats.limit}`}
</span>
{!seats.unlimited && atSeatLimit && (
<span className="text-amber-600 dark:text-amber-400 ml-2">
{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')}
</span>
)}
</p>
@@ -535,7 +539,7 @@ export default function StaffPage() {
<button
type="button"
className="absolute right-2 top-2 p-1.5 rounded-[var(--radius-sm)] text-text-muted hover:text-text-primary hover:bg-background-card/80"
aria-label="Dismiss"
aria-label={tCommon('dismiss')}
onClick={() => {
setLastInviteInfo(null);
}}
@@ -543,15 +547,15 @@ export default function StaffPage() {
<X className="w-4 h-4" />
</button>
<p className="text-sm text-text-primary pr-6">
<span className="font-medium">{lastInviteInfo.name}</span> ({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')}`}
</p>
{lastInviteInfo.invitationStatus === 'PENDING' && (
<div className="space-y-2 pt-1 border-t border-border/60">
<p className="text-xs font-medium text-text-secondary uppercase tracking-wide">
Invite link
{t('inviteLinkHeading')}
</p>
{lastInviteInfo.invitationUrl && (
<code className="block text-sm px-2 py-1.5 rounded-[var(--radius-sm)] bg-background-card border border-border font-mono break-all">
@@ -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')}
</Button>
<p className="text-xs text-text-muted">
Share this link manually via SMS or email. A new link is generated if the previous one expired or was lost.
</p>
<p className="text-xs text-text-muted">{t('shareLinkHint')}</p>
</div>
)}
</div>
)}
{loading ? (
<p className="text-sm text-text-secondary">Loading team…</p>
<p className="text-sm text-text-secondary">{t('loadingTeam')}</p>
) : (
<Table
headers={
<tr>
<th className="px-6 py-3 text-left text-xs font-medium text-text-muted uppercase tracking-wider">Name</th>
<th className="px-6 py-3 text-left text-xs font-medium text-text-muted uppercase tracking-wider">Email</th>
<th className="px-6 py-3 text-left text-xs font-medium text-text-muted uppercase tracking-wider">Role</th>
<th className="px-6 py-3 text-center text-xs font-medium text-text-muted uppercase tracking-wider">Status</th>
<th className="px-6 py-3 text-left text-xs font-medium text-text-muted uppercase tracking-wider">Access</th>
<th className="px-6 py-3 text-left text-xs font-medium text-text-muted uppercase tracking-wider">{t('tableName')}</th>
<th className="px-6 py-3 text-left text-xs font-medium text-text-muted uppercase tracking-wider">{t('tableEmail')}</th>
<th className="px-6 py-3 text-left text-xs font-medium text-text-muted uppercase tracking-wider">{t('tableRole')}</th>
<th className="px-6 py-3 text-center text-xs font-medium text-text-muted uppercase tracking-wider">{t('tableStatus')}</th>
<th className="px-6 py-3 text-left text-xs font-medium text-text-muted uppercase tracking-wider">{t('tableAccess')}</th>
<th className="px-6 py-3 text-center text-xs font-medium text-text-muted uppercase tracking-wider w-36">
Action
{t('tableAction')}
</th>
</tr>
}
@@ -632,28 +636,28 @@ export default function StaffPage() {
<td className="px-6 py-1.5 text-sm text-text-secondary">{m.email}</td>
<td className="px-6 py-1.5 text-sm">
{m.isOwner ? (
<span className="text-primary font-medium">Owner</span>
<span className="text-primary font-medium">{t('roleOwner')}</span>
) : (
<span className="text-text-secondary">Staff</span>
<span className="text-text-secondary">{t('roleStaff')}</span>
)}
</td>
<td className="px-6 py-1.5 align-middle text-center">
{m.isOwner || m.invitationStatus === 'ACTIVE' ? (
<Badge variant="success">Active</Badge>
<Badge variant="success">{t('statusActive')}</Badge>
) : m.invitationStatus === 'PENDING' ? (
<Badge variant="warning">Pending</Badge>
<Badge variant="warning">{t('statusPending')}</Badge>
) : m.invitationStatus === 'DISABLED' ? (
<Badge variant="default">Disabled</Badge>
<Badge variant="default">{t('statusDisabled')}</Badge>
) : (
<Badge variant="danger">Expired</Badge>
<Badge variant="danger">{t('statusExpired')}</Badge>
)}
</td>
<td className="px-6 py-1.5 text-sm text-text-secondary max-w-md">
{m.isOwner ? (
<span className="text-text-muted">All features</span>
<span className="text-text-muted">{t('allFeatures')}</span>
) : (
<span className="line-clamp-3 text-sm leading-relaxed">
{formatAccessSummary(m.permissions, currentOrganization?.type)}
{formatAccessSummary(m.permissions, currentOrganization?.type, tFeatures)}
</span>
)}
</td>
@@ -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 ? (
<Check className="w-4 h-4" />
@@ -684,9 +688,9 @@ export default function StaffPage() {
? 'text-text-secondary hover:bg-background-card/80 hover:text-primary'
: 'text-text-muted opacity-50 cursor-not-allowed'
}`}
aria-label="Enable member"
aria-label={t('enableMemberAria')}
disabled={!canEdit || enablingMembershipId === m.id}
title="Enable member (uses a seat)"
title={t('enableMemberTitle')}
onClick={() => {
if (!canEdit) return;
setEnableTarget(m);
@@ -703,9 +707,9 @@ export default function StaffPage() {
? 'text-text-secondary hover:bg-background-card/80 hover:text-amber-600'
: 'text-text-muted opacity-50 cursor-not-allowed'
}`}
aria-label="Disable member"
aria-label={t('disableMemberAria')}
disabled={!canEdit || disablingMembershipId === m.id}
title="Disable member (frees a seat)"
title={t('disableMemberTitle')}
onClick={() => {
if (!canEdit) return;
setDisableTarget(m);
@@ -721,7 +725,7 @@ export default function StaffPage() {
? 'text-text-secondary hover:bg-background-card/80 hover:text-text-primary'
: 'text-text-muted opacity-50 cursor-not-allowed'
}`}
aria-label="Edit member"
aria-label={t('editMemberAria')}
disabled={!canEdit}
onClick={() => {
if (!canEdit) return;
@@ -737,9 +741,9 @@ export default function StaffPage() {
? 'text-text-secondary hover:bg-red-500/15 hover:text-red-600'
: 'text-text-muted opacity-50 cursor-not-allowed'
}`}
aria-label="Delete member"
aria-label={t('deleteMemberAria')}
disabled={!canEdit}
title="Delete member (not implemented)"
title={t('deleteMemberTitle')}
onClick={() => {
if (!canEdit) return;
handleDeleteMember();
@@ -768,10 +772,10 @@ export default function StaffPage() {
<div className="flex items-start justify-between gap-3">
<div>
<h2 id="invite-staff-title" className="text-lg font-semibold text-text-primary pr-2">
Invite team member
{t('inviteModalTitle')}
</h2>
{inviteHasTreatmentEdit && (
<p className="text-xs text-text-muted mt-1">Step {inviteStep} of 2</p>
<p className="text-xs text-text-muted mt-1">{t('stepOf', { step: inviteStep })}</p>
)}
</div>
<DialogCloseButton
@@ -785,19 +789,19 @@ export default function StaffPage() {
{inviteStep === 1 ? (
<>
<Input
label="Email"
label={t('labelEmail')}
type="email"
value={inviteEmail}
onChange={(e) => setInviteEmail(e.target.value)}
autoComplete="off"
/>
<Input
label="Display name"
label={t('labelDisplayName')}
value={inviteName}
onChange={(e) => setInviteName(e.target.value)}
/>
<div>
<p className="text-sm font-medium text-text-secondary mb-2">Tab access</p>
<p className="text-sm font-medium text-text-secondary mb-2">{t('tabAccess')}</p>
<PermissionGrid
state={invitePerms}
onChange={setInvitePerms}
@@ -829,7 +833,7 @@ export default function StaffPage() {
resetInviteForm();
}}
>
{inviteStep === 2 ? 'Back' : 'Cancel'}
{inviteStep === 2 ? tCommon('back') : tCommon('cancel')}
</Button>
{inviteStep === 1 ? (
inviteHasTreatmentEdit ? (
@@ -838,7 +842,7 @@ export default function StaffPage() {
disabled={!inviteEmail.trim() || !inviteName.trim()}
onClick={() => setInviteStep(2)}
>
Next
{tCommon('next')}
</Button>
) : (
<Button
@@ -847,7 +851,7 @@ export default function StaffPage() {
disabled={!inviteEmail.trim() || !inviteName.trim()}
onClick={() => void submitInvite(false)}
>
Send invite
{t('sendInvite')}
</Button>
)
) : (
@@ -858,7 +862,7 @@ export default function StaffPage() {
isLoading={inviteLoading}
onClick={() => void submitInvite(false)}
>
Skip for now
{t('skipForNow')}
</Button>
<Button
type="button"
@@ -866,7 +870,7 @@ export default function StaffPage() {
disabled={Boolean(inviteHoursValidationError)}
onClick={() => void submitInvite(true)}
>
Send invite
{t('sendInvite')}
</Button>
</>
)}
@@ -885,7 +889,7 @@ export default function StaffPage() {
>
<div className="flex items-start justify-between gap-2">
<h2 id="enable-staff-title" className="text-lg font-semibold text-text-primary pr-2">
Enable team member
{t('enableModalTitle')}
</h2>
<DialogCloseButton
onClick={() => {
@@ -895,22 +899,15 @@ export default function StaffPage() {
/>
</div>
<p className="text-sm text-text-secondary">
Enable <span className="font-medium text-text-primary">{enableTarget.name}</span> (
{enableTarget.email})?
{t('enableConfirm', { name: enableTarget.name, email: enableTarget.email })}
</p>
<ul className="text-sm text-text-secondary space-y-2 list-disc pl-5">
<li>They can sign in to this organization again with their existing account.</li>
<li>No new invitation is sent and no data was removed while they were disabled.</li>
<li>
Enabling uses <span className="text-text-primary font-medium">one seat</span> on your
plan.
</li>
<li>{t('enableBullet1')}</li>
<li>{t('enableBullet2')}</li>
<li>{t('enableBullet3')}</li>
</ul>
{!hasAvailableSeat && (
<p className="text-sm text-amber-600 dark:text-amber-400">
No seats are available. Disable another member or upgrade your plan before enabling
this person.
</p>
<p className="text-sm text-amber-600 dark:text-amber-400">{t('noSeatsAvailable')}</p>
)}
<div className="flex justify-end gap-2 pt-1">
<Button
@@ -919,7 +916,7 @@ export default function StaffPage() {
disabled={Boolean(enablingMembershipId)}
onClick={() => setEnableTarget(null)}
>
Cancel
{tCommon('cancel')}
</Button>
<Button
type="button"
@@ -928,7 +925,7 @@ export default function StaffPage() {
disabled={Boolean(enablingMembershipId) || !hasAvailableSeat}
onClick={() => void confirmEnableMember()}
>
Enable member
{t('enableMemberButton')}
</Button>
</div>
</div>
@@ -945,7 +942,7 @@ export default function StaffPage() {
>
<div className="flex items-start justify-between gap-2">
<h2 id="disable-staff-title" className="text-lg font-semibold text-text-primary pr-2">
Disable team member
{t('disableModalTitle')}
</h2>
<DialogCloseButton
onClick={() => {
@@ -955,16 +952,12 @@ export default function StaffPage() {
/>
</div>
<p className="text-sm text-text-secondary">
Disable <span className="font-medium text-text-primary">{disableTarget.name}</span> (
{disableTarget.email})?
{t('disableConfirm', { name: disableTarget.name, email: disableTarget.email })}
</p>
<ul className="text-sm text-text-secondary space-y-2 list-disc pl-5">
<li>They will not be able to sign in to this organization.</li>
<li>No data will be removed.</li>
<li>
Disabling frees <span className="text-text-primary font-medium">one seat</span> on your
plan so you can invite someone else.
</li>
<li>{t('disableBullet1')}</li>
<li>{t('disableBullet2')}</li>
<li>{t('disableBullet3')}</li>
</ul>
<div className="flex justify-end gap-2 pt-1">
<Button
@@ -973,7 +966,7 @@ export default function StaffPage() {
disabled={Boolean(disablingMembershipId)}
onClick={() => setDisableTarget(null)}
>
Cancel
{tCommon('cancel')}
</Button>
<Button
type="button"
@@ -982,7 +975,7 @@ export default function StaffPage() {
disabled={Boolean(disablingMembershipId)}
onClick={() => void confirmDisableMember()}
>
Disable member
{t('disableMemberButton')}
</Button>
</div>
</div>
@@ -998,9 +991,9 @@ export default function StaffPage() {
>
<div className="flex items-start justify-between gap-3">
<div>
<h2 className="text-lg font-semibold text-text-primary pr-2">Edit member</h2>
<h2 className="text-lg font-semibold text-text-primary pr-2">{t('editModalTitle')}</h2>
{editHasTreatmentEdit && (
<p className="text-xs text-text-muted mt-1">Step {editStep} of 2</p>
<p className="text-xs text-text-muted mt-1">{t('stepOf', { step: editStep })}</p>
)}
</div>
<DialogCloseButton
@@ -1015,12 +1008,12 @@ export default function StaffPage() {
{editStep === 1 ? (
<>
<Input
label="Display name"
label={t('labelDisplayName')}
value={editName}
onChange={(e) => setEditName(e.target.value)}
/>
<div>
<p className="text-sm font-medium text-text-secondary mb-2">Tab access</p>
<p className="text-sm font-medium text-text-secondary mb-2">{t('tabAccess')}</p>
<PermissionGrid
state={editPerms}
onChange={setEditPerms}
@@ -1029,7 +1022,7 @@ export default function StaffPage() {
</div>
</>
) : editLoadingWorkingHours ? (
<p className="text-sm text-text-secondary">Loading working hours…</p>
<p className="text-sm text-text-secondary">{t('loadingWorkingHours')}</p>
) : (
<StaffWorkingHoursStep
days={editWorkingHoursDays}
@@ -1054,16 +1047,16 @@ export default function StaffPage() {
setEditStep(1);
}}
>
{editStep === 2 ? 'Back' : 'Cancel'}
{editStep === 2 ? tCommon('back') : tCommon('cancel')}
</Button>
{editStep === 1 ? (
editHasTreatmentEdit ? (
<Button type="button" onClick={() => setEditStep(2)}>
Next
{tCommon('next')}
</Button>
) : (
<Button type="button" isLoading={editLoading} onClick={() => void submitEdit()}>
Save
{tCommon('save')}
</Button>
)
) : (
@@ -1073,7 +1066,7 @@ export default function StaffPage() {
disabled={Boolean(editHoursValidationError)}
onClick={() => void submitEdit()}
>
Save
{tCommon('save')}
</Button>
)}
</div>

20
frontend/src/app/[locale]/(dashboard)/today/page.tsx
View File

@@ -1,10 +1,12 @@
'use client';
import { useTranslations } from 'next-intl';
import { Link } from '@/i18n/navigation';
import { useAuth } from '@/lib/hooks/useAuth';
import { Card } from '@/components/ui/shared/Card';
export default function TodayPage() {
const t = useTranslations('today');
const { currentOrganization } = useAuth();
const showNoSubscriptionNotice =
Boolean(currentOrganization?.isOwner) && !currentOrganization?.plan;
@@ -12,42 +14,42 @@ export default function TodayPage() {
return (
<div>
<h1 className="text-2xl font-semibold mb-6">
Welcome back!!
{t('welcomeBack')}
</h1>
{showNoSubscriptionNotice && (
<div className="mb-6 rounded-[var(--radius-md)] border border-amber-500/30 bg-amber-500/10 p-4">
<p className="text-sm text-amber-200">
This organization does not have an active subscription yet.{' '}
{t('noSubscriptionNotice')}{' '}
<Link href="/settings/subscriptions" className="font-medium underline underline-offset-2">
Choose a plan
{t('choosePlanLink')}
</Link>{' '}
to start the purchase process.
{t('noSubscriptionCta')}
</p>
</div>
)}
<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-4">
<Card>
<p className="text-sm text-card-muted">Today's Appointments</p>
<p className="text-sm text-card-muted">{t('cardTodaysAppointments')}</p>
<p className="text-2xl font-semibold mt-2">12</p>
<p className="text-xs text-text-muted mt-1">Monday 2/5/2026</p>
</Card>
<Card>
<p className="text-sm text-card-muted">Active Patients</p>
<p className="text-sm text-card-muted">{t('cardActivePatients')}</p>
<p className="text-2xl font-semibold mt-2">675</p>
</Card>
<Card>
<p className="text-sm text-card-muted">New Lab Case</p>
<p className="text-sm text-card-muted">{t('cardNewLabCase')}</p>
<p className="text-2xl font-semibold mt-2">5</p>
<p className="text-xs text-text-muted mt-1">35 ↑</p>
</Card>
<Card>
<p className="text-sm text-card-muted">Today invoices</p>
<p className="text-sm text-card-muted">{t('cardTodayInvoices')}</p>
<p className="text-2xl font-semibold mt-2">1200$</p>
<p className="text-xs text-text-muted mt-1">21,300 $</p>
</Card>
</div>
</div>
);
}
}

4
frontend/src/app/[locale]/(dashboard)/treatment/page.tsx
View File

@@ -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 (
<div className="text-sm text-text-muted">Loading…</div>
<div className="text-sm text-text-muted">{t('loading')}</div>
);
}

64
frontend/src/app/[locale]/(public)/accept-invite/page.tsx
View File

@@ -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 (
<div className="min-h-screen app-web-bg flex items-center justify-center p-4">
<div className="w-full max-w-md surface-card p-6 space-y-5">
<h1 className="text-xl font-semibold text-text-primary">Accept invitation</h1>
<h1 className="text-xl font-semibold text-text-primary">{t('acceptInviteTitle')}</h1>
{loading ? (
<p className="text-sm text-text-secondary">Loading invitation...</p>
<p className="text-sm text-text-secondary">{t('loadingInvitation')}</p>
) : (
<>
{inviteInfo && (
<div className="rounded-[var(--radius-md)] border border-border/70 bg-background-secondary/70 px-3 py-2 text-sm text-text-secondary space-y-1">
<p>
Organization: <span className="text-text-primary">{inviteInfo.organizationName}</span>
{t('organizationLabel')}{' '}
<span className="text-text-primary">{inviteInfo.organizationName}</span>
</p>
<p>
Email: <span className="text-text-primary">{inviteInfo.email}</span>
{t('emailLabel')}{' '}
<span className="text-text-primary">{inviteInfo.email}</span>
</p>
</div>
)}
@@ -122,27 +128,28 @@ function AcceptInviteContent() {
{inviteInfo?.status !== 'ACCEPTED' && (
<div className="space-y-3">
<Input label="Name" value={name} onChange={(e) => setName(e.target.value)} />
<Input label={t('labelName')} value={name} onChange={(e) => setName(e.target.value)} />
<Input
label="Create password"
label={t('labelCreatePassword')}
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
/>
<Input
label="Confirm password"
label={t('labelConfirmPassword')}
type="password"
value={confirmPassword}
onChange={(e) => setConfirmPassword(e.target.value)}
/>
<Button type="button" fullWidth isLoading={submitting} onClick={() => void onAccept()}>
Activate account
{t('activateAccount')}
</Button>
</div>
)}
<p className="text-xs text-text-muted">
Already have access? <Link href="/login" className="text-primary">Go to login</Link>
{t('alreadyHaveAccess')}{' '}
<Link href="/login" className="text-primary">{t('goToLogin')}</Link>
</p>
</>
)}
@@ -151,15 +158,18 @@ function AcceptInviteContent() {
);
}
function AcceptInviteFallback() {
const t = useTranslations('auth');
return (
<div className="min-h-screen app-web-bg flex items-center justify-center">
<p className="text-sm text-text-secondary">{t('loadingInvitation')}</p>
</div>
);
}
export default function AcceptInvitePage() {
return (
<Suspense
fallback={
<div className="min-h-screen app-web-bg flex items-center justify-center">
<p className="text-sm text-text-secondary">Loading invitation...</p>
</div>
}
>
<Suspense fallback={<AcceptInviteFallback />}>
<AcceptInviteContent />
</Suspense>
);

118
frontend/src/app/[locale]/(public)/accept-organization-invite/page.tsx
View File

@@ -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<typeof acceptOrganizationInviteSchema>;
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() {
<div className="min-h-screen app-web-bg flex flex-col justify-center py-12 sm:px-6 lg:px-8">
<div className="sm:mx-auto sm:w-full sm:max-w-md">
<Link href="/" className="flex justify-center">
<span className="text-3xl font-semibold text-text-primary">DyoLink</span>
<span className="text-3xl font-semibold text-text-primary">{tCommon('appName')}</span>
</Link>
<h2 className="mt-6 text-center text-2xl font-semibold text-text-primary">
Accept organization invitation
{t('acceptOrganizationTitle')}
</h2>
<p className="mt-2 text-center text-sm text-text-secondary">
Already have an account?{' '}
{t('alreadyHaveAccount')}{' '}
<Link href="/login" className="font-medium text-primary hover:opacity-90">
Sign in
{t('signInLink')}
</Link>
</p>
</div>
@@ -159,13 +174,13 @@ function AcceptOrganizationInviteContent() {
<div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
<div className="surface-card py-8 px-4 sm:px-10">
{loading ? (
<p className="text-sm text-text-secondary">Loading invitation...</p>
<p className="text-sm text-text-secondary">{t('loadingInvitation')}</p>
) : (
<>
{inviteInfo && (
<div className="mb-6 rounded-[var(--radius-md)] border border-border/70 bg-background-secondary/70 px-3 py-2 text-sm text-text-secondary space-y-1">
<p>
Invited by:{' '}
{t('invitedBy')}{' '}
<span className="text-text-primary">{inviteInfo.inviterOrganizationName}</span>
</p>
</div>
@@ -191,37 +206,37 @@ function AcceptOrganizationInviteContent() {
{step === 1 && (
<>
<Input
label="Owner email"
label={t('ownerEmail')}
value={inviteInfo?.ownerEmail ?? ''}
readOnly
disabled
icon={<Mail className="h-5 w-5 icon-flat" />}
/>
<Input
label="Full name"
label={t('fullName')}
{...register('ownerName')}
placeholder="John Doe"
placeholder={t('namePlaceholder')}
error={errors.ownerName?.message}
icon={<User className="h-5 w-5 icon-flat" />}
/>
<Input
label="Password"
label={t('password')}
{...register('password')}
type="password"
placeholder="••••••••"
placeholder={t('passwordPlaceholder')}
error={errors.password?.message}
icon={<Lock className="h-5 w-5 icon-flat" />}
/>
<Input
label="Confirm password"
label={t('confirmPassword')}
{...register('confirmPassword')}
type="password"
placeholder="••••••••"
placeholder={t('passwordPlaceholder')}
error={errors.confirmPassword?.message}
icon={<Lock className="h-5 w-5 icon-flat" />}
/>
<Button type="button" variant="primary" onClick={() => void handleNext()} fullWidth>
Continue
{tCommon('continue')}
</Button>
</>
)}
@@ -236,10 +251,10 @@ function AcceptOrganizationInviteContent() {
/>
<div className="flex gap-3">
<Button type="button" variant="outline" onClick={() => setStep(1)}>
Back
{tCommon('back')}
</Button>
<Button type="submit" variant="primary" isLoading={submitting} fullWidth>
Activate organization
{t('activateOrganization')}
</Button>
</div>
</>
@@ -254,15 +269,18 @@ function AcceptOrganizationInviteContent() {
);
}
function AcceptOrganizationInviteFallback() {
const t = useTranslations('auth');
return (
<div className="min-h-screen app-web-bg flex items-center justify-center">
<p className="text-sm text-text-secondary">{t('loadingInvitation')}</p>
</div>
);
}
export default function AcceptOrganizationInvitePage() {
return (
<Suspense
fallback={
<div className="min-h-screen app-web-bg flex items-center justify-center">
<p className="text-sm text-text-secondary">Loading invitation...</p>
</div>
}
>
<Suspense fallback={<AcceptOrganizationInviteFallback />}>
<AcceptOrganizationInviteContent />
</Suspense>
);

6
frontend/src/app/[locale]/(public)/login/page.tsx
View File

@@ -81,7 +81,7 @@ export default function LoginPage() {
{t('signInTitle')}
</h2>
<p className="mt-2 text-center text-sm text-text-secondary">
Or{' '}
{tCommon('or')}{' '}
<Link href="/register" className="font-medium text-primary hover:opacity-90">
{t('startTrialLink')}
</Link>
@@ -95,7 +95,7 @@ export default function LoginPage() {
label={t('email')}
{...register('email')}
type="email"
placeholder="you@example.com"
placeholder={t('emailPlaceholder')}
error={errors.email?.message}
icon={<Mail className="h-5 w-5 icon-flat" />}
/>
@@ -103,7 +103,7 @@ export default function LoginPage() {
label={t('password')}
{...register('password')}
type="password"
placeholder="••••••••"
placeholder={t('passwordPlaceholder')}
error={errors.password?.message}
icon={<Lock className="h-5 w-5 icon-flat" />}
/>

12
frontend/src/app/[locale]/(public)/register/page.tsx
View File

@@ -145,7 +145,7 @@ export default function RegisterPage() {
<Input
label={t('fullName')}
{...register('name')}
placeholder="John Doe"
placeholder={t('namePlaceholder')}
error={errors.name?.message}
icon={<User className="h-5 w-5 icon-flat" />}
/>
@@ -153,7 +153,7 @@ export default function RegisterPage() {
label={t('email')}
{...register('email')}
type="email"
placeholder="you@example.com"
placeholder={t('emailPlaceholder')}
error={errors.email?.message}
icon={<Mail className="h-5 w-5 icon-flat" />}
/>
@@ -161,7 +161,7 @@ export default function RegisterPage() {
label={t('password')}
{...register('password')}
type="password"
placeholder="••••••••"
placeholder={t('passwordPlaceholder')}
error={errors.password?.message}
icon={<Lock className="h-5 w-5 icon-flat" />}
/>
@@ -169,7 +169,7 @@ export default function RegisterPage() {
label={t('confirmPassword')}
{...register('confirmPassword')}
type="password"
placeholder="••••••••"
placeholder={t('passwordPlaceholder')}
error={errors.confirmPassword?.message}
icon={<Lock className="h-5 w-5 icon-flat" />}
/>
@@ -205,11 +205,11 @@ export default function RegisterPage() {
</form>
<p className="mt-6 text-xs text-center text-text-muted">
By signing up, you agree to our{' '}
{t('termsIntro')}{' '}
<Link href="/terms" className="text-primary hover:opacity-90">
{t('termsOfService')}
</Link>{' '}
and{' '}
{tCommon('and')}{' '}
<Link href="/privacy" className="text-primary hover:opacity-90">
{t('privacyPolicy')}
</Link>