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

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

Browse Source
This commit is contained in:
rameen
2026-06-22 11:20:17 +03:30
parent 2f99abbb9e 320cf11d12
commit 770b13bf45
92 changed files with 6547 additions and 1535 deletions
Download Patch File Download Diff File Expand all files Collapse all files

145
frontend/src/app/(dashboard)/patients/page.tsx
View File

@@ -1,145 +0,0 @@
'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>
);
}

241
frontend/src/app/(public)/login/page.tsx
View File

@@ -1,241 +0,0 @@
// src/app/login/page.tsx
// 'use client';
// import { useState } from 'react';
// import { useForm } from 'react-hook-form';
// import { zodResolver } from '@hookform/resolvers/zod';
// import * as z from 'zod';
// import Link from 'next/link';
// import { Mail, Lock } from 'lucide-react';
// import { useAuth } from '@/lib/hooks/useAuth';
// import { Button } from '@/components/ui/Button';
// import { Input } from '@/components/ui/Input';
// const loginSchema = z.object({
// email: z.string().email('Please enter a valid email address'),
// password: z.string().min(1, 'Password is required'),
// });
// type LoginForm = z.infer<typeof loginSchema>;
// export default function LoginPage() {
// const { login, isLoading } = useAuth();
// const [error, setError] = useState<string | null>(null);
// const {
// register,
// handleSubmit,
// formState: { errors },
// } = useForm<LoginForm>({
// resolver: zodResolver(loginSchema),
// });
// const onSubmit = async (data: LoginForm) => {
// try {
// setError(null);
// await login(data.email, data.password);
// } catch (err: any) {
// setError(err.message || 'Invalid email or password');
// }
// };
// return (
// <div className="min-h-screen bg-gray-50 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-bold text-primary-600">DyoLink</span>
// </Link>
// <h2 className="mt-6 text-center text-3xl font-extrabold text-gray-900">
// Sign in to your account
// </h2>
// <p className="mt-2 text-center text-sm text-gray-600">
// Or{' '}
// <Link href="/register" className="font-medium text-primary-600 hover:text-primary-500">
// start your free trial
// </Link>
// </p>
// </div>
// <div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
// <div className="bg-white py-8 px-4 shadow sm:rounded-lg sm:px-10">
// <form className="space-y-6" onSubmit={handleSubmit(onSubmit)}>
// <Input
// label="Email address"
// {...register('email')}
// type="email"
// placeholder="you@example.com"
// error={errors.email?.message}
// icon={<Mail className="h-5 w-5 text-gray-400" />}
// />
// <Input
// label="Password"
// {...register('password')}
// type="password"
// placeholder="••••••••"
// error={errors.password?.message}
// icon={<Lock className="h-5 w-5 text-gray-400" />}
// />
// <div className="flex items-center justify-between">
// <div className="flex items-center">
// <input
// id="remember-me"
// name="remember-me"
// type="checkbox"
// className="h-4 w-4 text-primary-600 focus:ring-primary-500border-gray-300 rounded"
// />
// <label htmlFor="remember-me" className="ml-2 block text-sm text-gray-900">
// Remember me
// </label>
// </div>
// <div className="text-sm">
// <Link href="/forgot-password" className="font-medium text-primary-600 hover:text-primary-500">
// Forgot your password?
// </Link>
// </div>
// </div>
// {error && (
// <div className="p-3 bg-red-50 border border-red-200 rounded-lg">
// <p className="text-sm text-red-600">{error}</p>
// </div>
// )}
// <Button
// type="submit"
// variant="primary"
// isLoading={isLoading}
// fullWidth
// >
// Sign in
// </Button>
// </form>
// </div>
// </div>
// </div>
// );
// }
'use client';
import { useState, useEffect } from 'react';
import { useRouter } from 'next/navigation';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import * as z from 'zod';
import Link from 'next/link';
import { Mail, Lock } from 'lucide-react';
import { useAuth } from '@/lib/hooks/useAuth';
import { Button } from '@/components/ui/shared/Button';
import { Input } from '@/components/ui/shared/Input';
const loginSchema = z.object({
email: z.string().email('Please enter a valid email address'),
password: z.string().min(1, 'Password is required'),
});
type LoginForm = z.infer<typeof loginSchema>;
export default function LoginPage() {
const { login, isLoading, user, isAuthReady } = useAuth();
const router = useRouter();
const [error, setError] = useState<string | null>(null);
useEffect(() => {
if (isAuthReady && user) {
router.push('/today');
}
}, [user, isAuthReady, router]);
const {
register,
handleSubmit,
formState: { errors },
} = useForm<LoginForm>({
resolver: zodResolver(loginSchema),
});
const onSubmit = async (data: LoginForm) => {
try {
setError(null);
await login(data.email, data.password);
} catch (err: any) {
setError(err.message || 'Invalid email or password');
}
};
if (!isAuthReady) {
return (
<div className="min-h-screen app-web-bg flex items-center justify-center">
<p className="text-text-secondary">Loading...</p>
</div>
);
}
return (
<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>
</Link>
<h2 className="mt-6 text-center text-3xl font-semibold text-text-primary">
Sign in to your account
</h2>
<p className="mt-2 text-center text-sm text-text-secondary">
Or{' '}
<Link href="/register" className="font-medium text-primary hover:opacity-90">
start your free trial
</Link>
</p>
</div>
<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">
<form className="space-y-6" onSubmit={handleSubmit(onSubmit)}>
<Input
label="Email address"
{...register('email')}
type="email"
placeholder="you@example.com"
error={errors.email?.message}
icon={<Mail className="h-5 w-5 icon-flat" />}
/>
<Input
label="Password"
{...register('password')}
type="password"
placeholder="••••••••"
error={errors.password?.message}
icon={<Lock className="h-5 w-5 icon-flat" />}
/>
<div className="flex items-center justify-between">
<div className="flex items-center">
<input
id="remember-me"
name="remember-me"
type="checkbox"
className="h-4 w-4 rounded border-border bg-background-secondary text-primary focus:ring-primary/40"
/>
<label htmlFor="remember-me" className="ml-2 block text-sm text-text-secondary">
Remember me
</label>
</div>
<div className="text-sm">
<Link href="/forgot-password" className="font-medium text-primary hover:opacity-90">
Forgot your password?
</Link>
</div>
</div>
{error && (
<div className="p-3 bg-red-50 border border-red-200 rounded-lg">
<p className="text-sm text-red-600">{error}</p>
</div>
)}
<Button
type="submit"
variant="primary"
isLoading={isLoading}
fullWidth
>
Sign in
</Button>
</form>
</div>
</div>
</div>
);
}

206
frontend/src/app/(public)/register/page.tsx
View File

@@ -1,206 +0,0 @@
// src/app/register/page.tsx\
'use client';
import { useState } from 'react';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import * as z from 'zod';
import Link from 'next/link';
import { Mail, Lock, User } from 'lucide-react';
import { useAuth } from '@/lib/hooks/useAuth';
import { OrganizationDetailsFields } from '@/components/ui/auth/OrganizationDetailsFields';
import { RegistrationProgressSteps } from '@/components/ui/auth/RegistrationProgressSteps';
import { Button } from '@/components/ui/shared/Button';
import { Input } from '@/components/ui/shared/Input';
const registerSchema = z.object({
name: z.string().min(2, 'Name must be at least 2 characters'),
email: z.string().email('Please enter a valid email address'),
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 RegisterForm = z.infer<typeof registerSchema>;
export default function RegisterPage() {
const { registerTrial, isLoading } = useAuth();
const [step, setStep] = useState(1);
const [error, setError] = useState<string | null>(null);
const {
register,
handleSubmit,
watch,
formState: { errors },
trigger,
setValue,
} = useForm<RegisterForm>({
resolver: zodResolver(registerSchema),
mode: 'onChange',
});
const organizationType = watch('organizationType');
const handleNext = async () => {
const fieldsToValidate = step === 1
? ['name', 'email', 'password', 'confirmPassword']
: ['organizationName', 'organizationEmail', 'organizationType'];
const isValid = await trigger(fieldsToValidate as any);
if (isValid) {
setStep(step + 1);
}
};
const onSubmit = async (data: RegisterForm) => {
try {
setError(null);
await registerTrial(
data.email,
data.password,
data.name,
data.organizationName,
data.organizationEmail,
data.organizationType
);
// No need to redirect - auth context will handle it
} catch (err: any) {
setError(err.message || 'Registration failed. Please try again.');
}
};
return (
<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>
</Link>
<h2 className="mt-6 text-center text-3xl font-semibold text-text-primary">
Start your 30-day free trial
</h2>
<p className="mt-2 text-center text-sm text-text-secondary">
Already have an account?{' '}
<Link href="/login" className="font-medium text-primary hover:opacity-90">
Sign in
</Link>
</p>
</div>
<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">
<RegistrationProgressSteps step={step} />
{/* Trial Info Banner */}
<div className="mb-6 p-4 bg-primary-soft rounded-[var(--radius-md)] border border-primary/35">
<h3 className="text-sm font-medium text-text-primary mb-2">Your trial
includes:</h3>
<ul className="text-sm text-text-secondary space-y-1">
<li className="flex items-center">
<span className="mr-2">✓</span> Up to 5 team members
</li>
<li className="flex items-center">
<span className="mr-2">✓</span> Full access to all features
</li>
<li className="flex items-center">
<span className="mr-2">✓</span> 30 days free, no credit card
required
</li>
</ul>
</div>
<form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
{step === 1 && (
<>
<Input
label="Full name"
{...register('name')}
placeholder="John Doe"
error={errors.name?.message}
icon={<User className="h-5 w-5 icon-flat" />}
/>
<Input
label="Email address"
{...register('email')}
type="email"
placeholder="you@example.com"
error={errors.email?.message}
icon={<Mail className="h-5 w-5 icon-flat" />}
/>
<Input
label="Password"
{...register('password')}
type="password"
placeholder="••••••••"
error={errors.password?.message}
icon={<Lock className="h-5 w-5 icon-flat" />}
/>
<Input
label="Confirm password"
{...register('confirmPassword')}
type="password"
placeholder="••••••••"
error={errors.confirmPassword?.message}
icon={<Lock className="h-5 w-5 icon-flat" />}
/>
<Button
type="button"
variant="primary"
onClick={handleNext}
fullWidth
>
Continue
</Button>
</>
)}
{step === 2 && (
<>
<OrganizationDetailsFields
register={register as never}
errors={errors as never}
organizationType={organizationType}
setValue={setValue as never}
/>
{error && (
<div className="p-3 bg-red-950/30 border border-red-600/40 rounded-[var(--radius-md)]">
<p className="text-sm text-red-600">{error}</p>
</div>
)}
<div className="flex gap-3">
<Button
type="button"
variant="outline"
onClick={() => setStep(1)}
>
Back
</Button>
<Button
type="submit"
variant="primary"
isLoading={isLoading}
fullWidth
>
Start my free trial
</Button>
</div>
</>
)}
</form>
<p className="mt-6 text-xs text-center text-text-muted">
By signing up, you agree to our{' '}
<Link href="/terms" className="text-primary hover:opacity-90">
Terms of Service
</Link>{' '}
and{' '}
<Link href="/privacy" className="text-primary hover:opacity-90">
Privacy Policy
</Link>
</p>
</div>
</div>
</div>
);
}

62
frontend/src/app/(dashboard)/appointments/page.tsx → 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()));
@@ -46,7 +49,7 @@ export default function AppointmentsPage() {
const [patientForm, setPatientForm] = useState<CreatePatientInput>(EMPTY_PATIENT_FORM);
const [bookingOpen, setBookingOpen] = useState(false);
const [bookingHour, setBookingHour] = useState(9);
const [bookingStartMinute, setBookingStartMinute] = useState(9 * 60);
const [bookingProviderId, setBookingProviderId] = useState<string | null>(null);
const [bookingProviderName, setBookingProviderName] = useState('');
const [editingAppointmentId, setEditingAppointmentId] = useState<string | null>(null);
@@ -87,7 +90,7 @@ export default function AppointmentsPage() {
try {
const range = getLocalDayIsoRange(scheduleDate);
const [pRes, aRes] = await Promise.all([
appointmentsApi.columnProviders(),
appointmentsApi.columnProviders(scheduleDate),
appointmentsApi.list(range),
]);
if (gen !== scheduleLoadGen.current) {
@@ -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,28 +152,33 @@ 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);
}
}
function handleSlotClick(hour: number, providerUserId: string, providerName: string) {
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;
}
setBookingHour(hour);
setBookingStartMinute(startMinute);
setBookingProviderId(providerUserId);
setBookingProviderName(providerName);
setEditingAppointmentId(null);
@@ -179,17 +187,22 @@ 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);
setBookingHour(new Date(appointment.startAt).getHours());
const start = new Date(appointment.startAt);
setBookingStartMinute(start.getHours() * 60 + start.getMinutes());
setBookingProviderId(appointment.providerUserId);
setBookingProviderName(provider?.name ?? bookingProviderName);
setEditingAppointmentId(appointment.id);
setBookingOpen(true);
}
function handleAppointmentOutsideHours(appointment: AppointmentRecord) {
toast.showError(t('errorOutsideHours'));
}
async function handleSaveAppointment(payload: {
patientId: string;
providerUserId: string;
@@ -207,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);
@@ -226,7 +239,7 @@ export default function AppointmentsPage() {
if (!activeEditingAppointment) {
return;
}
if (!window.confirm('Remove this appointment?')) {
if (!window.confirm(t('confirmRemove'))) {
return;
}
setDeletingAppointment(true);
@@ -235,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);
@@ -251,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} />
@@ -289,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>
@@ -298,8 +309,9 @@ export default function AppointmentsPage() {
providers={providers}
appointments={appointments}
canBook={canManageAppointments && !isViewingPastDay}
onSlotClick={(hour, uid, name) => handleSlotClick(hour, uid, name)}
onSlotClick={(startMinute, uid, name) => handleSlotClick(startMinute, uid, name)}
onAppointmentClick={(apt) => handleAppointmentClick(apt)}
onAppointmentOutsideHours={(apt) => handleAppointmentOutsideHours(apt)}
/>
</div>
</div>
@@ -310,7 +322,7 @@ export default function AppointmentsPage() {
patient={selectedPatient}
providerUserId={bookingProviderId}
providerName={bookingProviderName}
initialHour={bookingHour}
initialStartMinute={bookingStartMinute}
editingAppointment={activeEditingAppointment}
onClose={() => {
setBookingOpen(false);

0
frontend/src/app/(dashboard)/billing/page.tsx → frontend/src/app/[locale]/(dashboard)/billing/page.tsx
View File

16
frontend/src/app/(dashboard)/layout.tsx → frontend/src/app/[locale]/(dashboard)/layout.tsx
View File

@@ -1,10 +1,11 @@
'use client';
import { memo, useEffect } from 'react';
import { usePathname, useRouter } from 'next/navigation';
import { useTranslations } from 'next-intl';
import { usePathname, useRouter } from '@/i18n/navigation';
import { useAuth } from '@/lib/hooks/useAuth';
import Sidebar from '@/components/ui/shared/Sidebar';
import { ThemeToggle } from '@/components/ui/shared/ThemeToggle';
import { TopBarControls } from '@/components/ui/shared/TopBarControls';
import { DashboardAccountMenu } from '@/components/ui/dashboard/DashboardAccountMenu';
import {
canAccessAppointmentsSection,
@@ -14,11 +15,11 @@ import {
} from '@/components/shared/permissions';
export default function DashboardLayout({ children }: { children: React.ReactNode }) {
const t = useTranslations('common');
const { user, currentOrganization, isAuthReady } = useAuth();
const router = useRouter();
const pathname = usePathname();
// ✅ AUTH GUARD (runs once per navigation group)
useEffect(() => {
if (!isAuthReady) return;
@@ -44,11 +45,10 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
}
}, [isAuthReady, user, currentOrganization, router, pathname]);
// ✅ LOADING ONLY FOR INITIAL LOAD
if (!isAuthReady) {
return (
<div className="h-screen flex items-center justify-center app-web-bg">
Loading app...
{t('loadingApp')}
</div>
);
}
@@ -56,7 +56,7 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
if (!user || !currentOrganization) {
return (
<div className="h-screen flex items-center justify-center app-web-bg">
Loading workspace...
{t('loadingWorkspace')}
</div>
);
}
@@ -88,9 +88,9 @@ const DashboardHeader = memo(function DashboardHeader({
<h2 className="text-lg font-medium truncate min-w-0">{organizationName}</h2>
<div className="flex items-center gap-3 shrink-0">
<ThemeToggle />
<TopBarControls />
<DashboardAccountMenu />
</div>
</header>
);
});
});

137
frontend/src/app/(dashboard)/organizations/page.tsx → 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';
@@ -29,32 +30,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';
@@ -64,10 +39,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);
@@ -92,8 +99,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;
@@ -143,7 +151,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');
@@ -164,7 +172,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);
@@ -207,7 +215,7 @@ export default function OrganizationsPage() {
await loadInvitationHistory();
},
});
toast.showSuccess('Invitation link copied to clipboard.');
toast.showSuccess(t('successLinkCopied'));
} catch (e) {
toast.showError(formatApiMessage(e));
}
@@ -233,7 +241,7 @@ export default function OrganizationsPage() {
},
},
);
toast.showSuccess('Invitation link copied to clipboard.');
toast.showSuccess(t('successLinkCopied'));
} catch (e) {
toast.showError(formatApiMessage(e));
}
@@ -245,7 +253,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'),
);
notifyPendingConnectionsChanged();
await loadList();
@@ -261,7 +269,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));
@@ -278,7 +286,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 (
@@ -286,13 +294,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>
@@ -302,7 +307,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
@@ -311,7 +316,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
@@ -319,7 +324,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>
)}
</>
@@ -330,19 +335,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>
}
@@ -351,14 +356,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>
) : (
@@ -403,8 +408,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>
@@ -413,8 +418,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>
@@ -426,8 +431,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>
@@ -443,9 +448,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
@@ -455,8 +460,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>
@@ -468,22 +473,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)}
@@ -496,7 +501,7 @@ export default function OrganizationsPage() {
onClick={() => void sendInvite()}
className="w-full"
>
Send invitation
{t('sendInvitation')}
</Button>
</div>
</div>

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

@@ -0,0 +1,151 @@
'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() {

0
frontend/src/app/(dashboard)/reports/page.tsx → frontend/src/app/[locale]/(dashboard)/reports/page.tsx
View File

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

@@ -1,8 +1,12 @@
'use client';
import Link from 'next/link';
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>
);

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

@@ -1,9 +1,12 @@
'use client';
import Link from 'next/link';
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 />

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

@@ -1,8 +1,8 @@
'use client';
import { useEffect, useState } from 'react';
import Link from 'next/link';
import { useRouter } from 'next/navigation';
import { useTranslations } from 'next-intl';
import { Link, useRouter } from '@/i18n/navigation';
import { useAuth } from '@/lib/hooks/useAuth';
import { authApi } from '@/lib/api/auth';
import { Button } from '@/components/ui/shared/Button';
@@ -10,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);
@@ -39,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>
);
}
@@ -76,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>
@@ -134,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;
@@ -169,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>
);
})}
@@ -182,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>

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

@@ -1,7 +1,8 @@
'use client';
import { useCallback, useEffect, useMemo, useState } from 'react';
import { useRouter } from 'next/navigation';
import { useTranslations } from 'next-intl';
import { useRouter } from '@/i18n/navigation';
import {
firstAccessibleDashboardPath,
canEditStaff,
@@ -12,10 +13,18 @@ import {
permissionNamesFromFeatureState,
emptyFeaturePermissionState,
featureStateFromPermissionNames,
featureStateHasTreatmentEdit,
resolveStaffFeatureLabel,
formatAccessSummary,
type FeaturePermState,
} from '../../../components/staff/staff-permission-form';
} from '@/components/staff/staff-permission-form';
import {
StaffWorkingHoursStep,
createDefaultWorkingHoursState,
workingHoursPayloadFromState,
workingHoursStateFromApi,
} from '@/components/staff/StaffWorkingHoursStep';
import { validateEditorDays, type WorkingHoursEditorDay } from '@/components/staff/workingHours';
import { Pencil, Trash2, Copy, Check, X, UserX, UserCheck } from 'lucide-react';
import { DialogCloseButton } from '@/components/ui/shared/DialogCloseButton';
import { useAuth } from '@/lib/hooks/useAuth';
@@ -82,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({
@@ -108,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>
@@ -133,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<{
@@ -144,9 +160,15 @@ export default function StaffPage() {
const toast = useToast();
const [inviteOpen, setInviteOpen] = useState(false);
const [inviteStep, setInviteStep] = useState<1 | 2>(1);
const [inviteEmail, setInviteEmail] = useState('');
const [inviteName, setInviteName] = useState('');
const [invitePerms, setInvitePerms] = useState(() => emptyFeaturePermissionState());
const [inviteWorkingHoursDays, setInviteWorkingHoursDays] = useState<WorkingHoursEditorDay[]>(
() => createDefaultWorkingHoursState().days,
);
const [inviteAutoRepeatWeekly, setInviteAutoRepeatWeekly] = useState(true);
const [inviteHoursValidationError, setInviteHoursValidationError] = useState<string | null>(null);
const [inviteLoading, setInviteLoading] = useState(false);
const [copiedInviteMembershipId, setCopiedInviteMembershipId] = useState<string | null>(null);
const [copyingInviteMembershipId, setCopyingInviteMembershipId] = useState<string | null>(null);
@@ -160,8 +182,15 @@ export default function StaffPage() {
const [pendingInviteLinks, setPendingInviteLinks] = useState<Record<string, StoredInviteLink>>({});
const [editing, setEditing] = useState<StaffMemberDto | null>(null);
const [editStep, setEditStep] = useState<1 | 2>(1);
const [editName, setEditName] = useState('');
const [editPerms, setEditPerms] = useState(() => emptyFeaturePermissionState());
const [editWorkingHoursDays, setEditWorkingHoursDays] = useState<WorkingHoursEditorDay[]>(
() => createDefaultWorkingHoursState().days,
);
const [editAutoRepeatWeekly, setEditAutoRepeatWeekly] = useState(true);
const [editHoursValidationError, setEditHoursValidationError] = useState<string | null>(null);
const [editLoadingWorkingHours, setEditLoadingWorkingHours] = useState(false);
const [editLoading, setEditLoading] = useState(false);
const [disableTarget, setDisableTarget] = useState<StaffMemberDto | null>(null);
const [disablingMembershipId, setDisablingMembershipId] = useState<string | null>(null);
@@ -169,6 +198,11 @@ export default function StaffPage() {
const [enablingMembershipId, setEnablingMembershipId] = useState<string | null>(null);
const canEdit = useMemo(() => canEditStaff(currentOrganization), [currentOrganization]);
const inviteHasTreatmentEdit = useMemo(
() => featureStateHasTreatmentEdit(invitePerms),
[invitePerms],
);
const editHasTreatmentEdit = useMemo(() => featureStateHasTreatmentEdit(editPerms), [editPerms]);
const hasActivePlan = Boolean(currentOrganization?.plan);
const atSeatLimit = useMemo(() => {
if (!seats || seats.unlimited) return false;
@@ -190,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;
@@ -265,25 +299,66 @@ 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);
}
}
async function submitInvite() {
function resetInviteForm() {
setInviteStep(1);
setInviteEmail('');
setInviteName('');
setInvitePerms(emptyFeaturePermissionState());
const defaults = createDefaultWorkingHoursState();
setInviteWorkingHoursDays(defaults.days);
setInviteAutoRepeatWeekly(defaults.autoRepeatWeekly);
setInviteHoursValidationError(null);
}
async function saveInviteWorkingHours(membershipId: string, includeHours: boolean) {
if (!includeHours || !inviteHasTreatmentEdit) {
return;
}
const validationError = validateEditorDays(inviteWorkingHoursDays, tWorkingHours);
if (validationError) {
throw new Error(validationError);
}
await staffApi.upsertWorkingHours(
membershipId,
workingHoursPayloadFromState({
days: inviteWorkingHoursDays,
autoRepeatWeekly: inviteAutoRepeatWeekly,
}),
);
}
async function submitInvite(includeWorkingHours: boolean) {
setInviteLoading(true);
toast.setError('');
setLastInviteInfo(null);
const displayName = inviteName.trim();
const displayEmail = inviteEmail.trim();
try {
if (includeWorkingHours && inviteHasTreatmentEdit) {
const validationError = validateEditorDays(inviteWorkingHoursDays, tWorkingHours);
if (validationError) {
toast.showError(validationError);
return;
}
}
const permissionNames = permissionNamesFromFeatureState(invitePerms);
const res = await staffApi.invite({
email: displayEmail,
name: displayName,
permissionNames,
});
if (includeWorkingHours) {
await saveInviteWorkingHours(res.data.membershipId, true);
}
setLastInviteInfo({
membershipId: res.data.membershipId,
name: displayName,
@@ -304,47 +379,79 @@ export default function StaffPage() {
writeStoredInviteLinks(currentOrganization.id, nextLinks);
}
setInviteOpen(false);
setInviteEmail('');
setInviteName('');
setInvitePerms(emptyFeaturePermissionState());
resetInviteForm();
await load();
} catch (e) {
toast.showError(formatApiErrorMessage(e, 'Failed to send invitation.'));
toast.showError(formatApiErrorMessage(e, t('errorSendInvite')));
} finally {
setInviteLoading(false);
}
}
function openEdit(m: StaffMemberDto) {
async function openEdit(m: StaffMemberDto) {
if (m.isOwner) return;
setEditing(m);
setEditStep(1);
setEditName(m.name);
setEditPerms(
featureStateFromPermissionNames(m.permissions ?? []),
);
setEditPerms(featureStateFromPermissionNames(m.permissions ?? []));
setEditHoursValidationError(null);
const defaults = createDefaultWorkingHoursState();
setEditWorkingHoursDays(defaults.days);
setEditAutoRepeatWeekly(defaults.autoRepeatWeekly);
setEditLoadingWorkingHours(true);
try {
const res = await staffApi.getWorkingHours(m.id);
const state = workingHoursStateFromApi(res.data);
setEditWorkingHoursDays(state.days);
setEditAutoRepeatWeekly(state.autoRepeatWeekly);
} catch (e) {
toast.showError(formatApiErrorMessage(e, t('errorLoadWorkingHours')));
} finally {
setEditLoadingWorkingHours(false);
}
}
async function submitEdit() {
if (!editing) return;
if (editHasTreatmentEdit) {
const validationError = validateEditorDays(editWorkingHoursDays, tWorkingHours);
if (validationError) {
toast.showError(validationError);
return;
}
}
setEditLoading(true);
toast.setError('');
try {
if (editHasTreatmentEdit) {
await staffApi.upsertWorkingHours(
editing.id,
workingHoursPayloadFromState({
days: editWorkingHoursDays,
autoRepeatWeekly: editAutoRepeatWeekly,
}),
);
}
await staffApi.updateMember(editing.id, {
name: editName.trim(),
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() {
@@ -354,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);
}
@@ -371,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);
}
@@ -383,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>
);
}
@@ -391,23 +498,22 @@ 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"
onClick={() => {
if (!canEdit || atSeatLimit) return;
resetInviteForm();
setInviteOpen(true);
setLastInviteInfo(null);
}}
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>
@@ -415,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>
@@ -435,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);
}}
@@ -443,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">
@@ -491,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>
}
@@ -532,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>
@@ -566,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" />
@@ -584,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);
@@ -603,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);
@@ -621,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;
@@ -637,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();
@@ -666,43 +770,110 @@ export default function StaffPage() {
aria-labelledby="invite-staff-title"
>
<div className="flex items-start justify-between gap-3">
<h2 id="invite-staff-title" className="text-lg font-semibold text-text-primary pr-2">
Invite team member
</h2>
<DialogCloseButton onClick={() => setInviteOpen(false)} />
</div>
<Input
label="Email"
type="email"
value={inviteEmail}
onChange={(e) => setInviteEmail(e.target.value)}
autoComplete="off"
/>
<Input
label="Display name"
value={inviteName}
onChange={(e) => setInviteName(e.target.value)}
/>
<div>
<p className="text-sm font-medium text-text-secondary mb-2">Tab access</p>
<PermissionGrid
state={invitePerms}
onChange={setInvitePerms}
organizationType={currentOrganization?.type}
<div>
<h2 id="invite-staff-title" className="text-lg font-semibold text-text-primary pr-2">
{t('inviteModalTitle')}
</h2>
{inviteHasTreatmentEdit && (
<p className="text-xs text-text-muted mt-1">{t('stepOf', { step: inviteStep })}</p>
)}
</div>
<DialogCloseButton
onClick={() => {
setInviteOpen(false);
resetInviteForm();
}}
/>
</div>
{inviteStep === 1 ? (
<>
<Input
label={t('labelEmail')}
type="email"
value={inviteEmail}
onChange={(e) => setInviteEmail(e.target.value)}
autoComplete="off"
/>
<Input
label={t('labelDisplayName')}
value={inviteName}
onChange={(e) => setInviteName(e.target.value)}
/>
<div>
<p className="text-sm font-medium text-text-secondary mb-2">{t('tabAccess')}</p>
<PermissionGrid
state={invitePerms}
onChange={setInvitePerms}
organizationType={currentOrganization?.type}
/>
</div>
</>
) : (
<StaffWorkingHoursStep
days={inviteWorkingHoursDays}
autoRepeatWeekly={inviteAutoRepeatWeekly}
onDaysChange={setInviteWorkingHoursDays}
onAutoRepeatWeeklyChange={setInviteAutoRepeatWeekly}
onValidationChange={setInviteHoursValidationError}
disabled={inviteLoading}
/>
)}
<div className="flex justify-end gap-2 pt-2">
<Button variant="outline" type="button" onClick={() => setInviteOpen(false)}>
Cancel
</Button>
<Button
variant="outline"
type="button"
isLoading={inviteLoading}
disabled={!inviteEmail.trim() || !inviteName.trim()}
onClick={() => void submitInvite()}
onClick={() => {
if (inviteStep === 2) {
setInviteStep(1);
return;
}
setInviteOpen(false);
resetInviteForm();
}}
>
Send invite
{inviteStep === 2 ? tCommon('back') : tCommon('cancel')}
</Button>
{inviteStep === 1 ? (
inviteHasTreatmentEdit ? (
<Button
type="button"
disabled={!inviteEmail.trim() || !inviteName.trim()}
onClick={() => setInviteStep(2)}
>
{tCommon('next')}
</Button>
) : (
<Button
type="button"
isLoading={inviteLoading}
disabled={!inviteEmail.trim() || !inviteName.trim()}
onClick={() => void submitInvite(false)}
>
{t('sendInvite')}
</Button>
)
) : (
<>
<Button
type="button"
variant="outline"
isLoading={inviteLoading}
onClick={() => void submitInvite(false)}
>
{t('skipForNow')}
</Button>
<Button
type="button"
isLoading={inviteLoading}
disabled={Boolean(inviteHoursValidationError)}
onClick={() => void submitInvite(true)}
>
{t('sendInvite')}
</Button>
</>
)}
</div>
</div>
</div>
@@ -718,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={() => {
@@ -728,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
@@ -752,7 +916,7 @@ export default function StaffPage() {
disabled={Boolean(enablingMembershipId)}
onClick={() => setEnableTarget(null)}
>
Cancel
{tCommon('cancel')}
</Button>
<Button
type="button"
@@ -761,7 +925,7 @@ export default function StaffPage() {
disabled={Boolean(enablingMembershipId) || !hasAvailableSeat}
onClick={() => void confirmEnableMember()}
>
Enable member
{t('enableMemberButton')}
</Button>
</div>
</div>
@@ -778,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={() => {
@@ -788,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
@@ -806,7 +966,7 @@ export default function StaffPage() {
disabled={Boolean(disablingMembershipId)}
onClick={() => setDisableTarget(null)}
>
Cancel
{tCommon('cancel')}
</Button>
<Button
type="button"
@@ -815,7 +975,7 @@ export default function StaffPage() {
disabled={Boolean(disablingMembershipId)}
onClick={() => void confirmDisableMember()}
>
Disable member
{t('disableMemberButton')}
</Button>
</div>
</div>
@@ -830,26 +990,85 @@ export default function StaffPage() {
aria-modal="true"
>
<div className="flex items-start justify-between gap-3">
<h2 className="text-lg font-semibold text-text-primary pr-2">Edit member</h2>
<DialogCloseButton onClick={() => setEditing(null)} />
</div>
<p className="text-xs text-text-muted">{editing.email}</p>
<Input label="Display name" value={editName} onChange={(e) => setEditName(e.target.value)} />
<div>
<p className="text-sm font-medium text-text-secondary mb-2">Tab access</p>
<PermissionGrid
state={editPerms}
onChange={setEditPerms}
organizationType={currentOrganization?.type}
<div>
<h2 className="text-lg font-semibold text-text-primary pr-2">{t('editModalTitle')}</h2>
{editHasTreatmentEdit && (
<p className="text-xs text-text-muted mt-1">{t('stepOf', { step: editStep })}</p>
)}
</div>
<DialogCloseButton
onClick={() => {
setEditing(null);
setEditStep(1);
}}
/>
</div>
<p className="text-xs text-text-muted">{editing.email}</p>
{editStep === 1 ? (
<>
<Input
label={t('labelDisplayName')}
value={editName}
onChange={(e) => setEditName(e.target.value)}
/>
<div>
<p className="text-sm font-medium text-text-secondary mb-2">{t('tabAccess')}</p>
<PermissionGrid
state={editPerms}
onChange={setEditPerms}
organizationType={currentOrganization?.type}
/>
</div>
</>
) : editLoadingWorkingHours ? (
<p className="text-sm text-text-secondary">{t('loadingWorkingHours')}</p>
) : (
<StaffWorkingHoursStep
days={editWorkingHoursDays}
autoRepeatWeekly={editAutoRepeatWeekly}
onDaysChange={setEditWorkingHoursDays}
onAutoRepeatWeeklyChange={setEditAutoRepeatWeekly}
onValidationChange={setEditHoursValidationError}
disabled={editLoading}
/>
)}
<div className="flex justify-end gap-2 pt-2">
<Button variant="outline" type="button" onClick={() => setEditing(null)}>
Cancel
</Button>
<Button type="button" isLoading={editLoading} onClick={() => void submitEdit()}>
Save
<Button
variant="outline"
type="button"
onClick={() => {
if (editStep === 2) {
setEditStep(1);
return;
}
setEditing(null);
setEditStep(1);
}}
>
{editStep === 2 ? tCommon('back') : tCommon('cancel')}
</Button>
{editStep === 1 ? (
editHasTreatmentEdit ? (
<Button type="button" onClick={() => setEditStep(2)}>
{tCommon('next')}
</Button>
) : (
<Button type="button" isLoading={editLoading} onClick={() => void submitEdit()}>
{tCommon('save')}
</Button>
)
) : (
<Button
type="button"
isLoading={editLoading}
disabled={Boolean(editHoursValidationError)}
onClick={() => void submitEdit()}
>
{tCommon('save')}
</Button>
)}
</div>
</div>
</div>

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

@@ -1,10 +1,12 @@
'use client';
import Link from 'next/link';
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/(dashboard)/treatment/page.tsx → 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>
);
}

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

@@ -2,13 +2,15 @@
import { useEffect, useMemo, useState } from 'react';
import { Suspense } from 'react';
import Link from 'next/link';
import { useRouter, useSearchParams } from 'next/navigation';
import { useTranslations } from 'next-intl';
import { Link, useRouter } from '@/i18n/navigation';
import { useSearchParams } from 'next/navigation';
import { Button } from '@/components/ui/shared/Button';
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>
);

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

@@ -1,8 +1,9 @@
'use client';
import { Suspense, useEffect, useMemo, useState } from 'react';
import Link from 'next/link';
import { useRouter, useSearchParams } from 'next/navigation';
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';
import type { OrganizationDetailsFormValues } from '@/components/ui/auth/OrganizationDetailsFields';
import { zodResolver } from '@hookform/resolvers/zod';
@@ -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>
);

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

@@ -0,0 +1,144 @@
'use client';
import { useState, useEffect, useMemo } from 'react';
import { useRouter } from '@/i18n/navigation';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import * as z from 'zod';
import { useTranslations } from 'next-intl';
import { Link } from '@/i18n/navigation';
import { Mail, Lock } from 'lucide-react';
import { useAuth } from '@/lib/hooks/useAuth';
import { Button } from '@/components/ui/shared/Button';
import { Input } from '@/components/ui/shared/Input';
import { TopBarControls } from '@/components/ui/shared/TopBarControls';
type LoginForm = {
email: string;
password: string;
};
export default function LoginPage() {
const t = useTranslations('auth');
const tCommon = useTranslations('common');
const tValidation = useTranslations('validation');
const { login, isLoading, user, isAuthReady } = useAuth();
const router = useRouter();
const [error, setError] = useState<string | null>(null);
const loginSchema = useMemo(
() =>
z.object({
email: z.string().email(tValidation('emailInvalid')),
password: z.string().min(1, tValidation('passwordRequired')),
}),
[tValidation],
);
useEffect(() => {
if (isAuthReady && user) {
router.push('/today');
}
}, [user, isAuthReady, router]);
const {
register,
handleSubmit,
formState: { errors },
} = useForm<LoginForm>({
resolver: zodResolver(loginSchema),
});
const onSubmit = async (data: LoginForm) => {
try {
setError(null);
await login(data.email, data.password);
} catch (err: unknown) {
const message = err instanceof Error ? err.message : t('invalidCredentials');
setError(message || t('invalidCredentials'));
}
};
if (!isAuthReady) {
return (
<div className="min-h-screen app-web-bg flex items-center justify-center">
<p className="text-text-secondary">{tCommon('loading')}</p>
</div>
);
}
return (
<div className="relative min-h-screen app-web-bg flex flex-col justify-center py-12 sm:px-6 lg:px-8">
<div className="absolute top-4 right-4">
<TopBarControls />
</div>
<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">{tCommon('appName')}</span>
</Link>
<h2 className="mt-6 text-center text-3xl font-semibold text-text-primary">
{t('signInTitle')}
</h2>
<p className="mt-2 text-center text-sm text-text-secondary">
{tCommon('or')}{' '}
<Link href="/register" className="font-medium text-primary hover:opacity-90">
{t('startTrialLink')}
</Link>
</p>
</div>
<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">
<form className="space-y-6" onSubmit={handleSubmit(onSubmit)}>
<Input
label={t('email')}
{...register('email')}
type="email"
placeholder={t('emailPlaceholder')}
error={errors.email?.message}
icon={<Mail className="h-5 w-5 icon-flat" />}
/>
<Input
label={t('password')}
{...register('password')}
type="password"
placeholder={t('passwordPlaceholder')}
error={errors.password?.message}
icon={<Lock className="h-5 w-5 icon-flat" />}
/>
<div className="flex items-center justify-between">
<div className="flex items-center">
<input
id="remember-me"
name="remember-me"
type="checkbox"
className="h-4 w-4 rounded border-border bg-background-secondary text-primary focus:ring-primary/40"
/>
<label htmlFor="remember-me" className="ml-2 block text-sm text-text-secondary">
{t('rememberMe')}
</label>
</div>
<div className="text-sm">
<Link href="/forgot-password" className="font-medium text-primary hover:opacity-90">
{t('forgotPassword')}
</Link>
</div>
</div>
{error && (
<div className="p-3 bg-red-50 border border-red-200 rounded-lg">
<p className="text-sm text-red-600">{error}</p>
</div>
)}
<Button type="submit" variant="primary" isLoading={isLoading} fullWidth>
{t('signIn')}
</Button>
</form>
</div>
</div>
</div>
);
}

86
frontend/src/app/(public)/page.tsx → frontend/src/app/[locale]/(public)/page.tsx
View File

@@ -1,120 +1,112 @@
'use client';
import Link from 'next/link';
import { useTranslations } from 'next-intl';
import { Link } from '@/i18n/navigation';
import { useAuth } from '@/lib/hooks/useAuth';
import { Button } from '@/components/ui/shared/Button';
import { ThemeToggle } from '@/components/ui/shared/ThemeToggle';
import { TopBarControls } from '@/components/ui/shared/TopBarControls';
import { Building2, Beaker, Calendar, Shield, Clock, Users } from 'lucide-react';
export default function HomePage() {
const t = useTranslations('landing');
const tAuth = useTranslations('auth');
const tCommon = useTranslations('common');
const { user } = useAuth();
return (
<div className="min-h-screen app-web-bg text-text-primary">
{/* Header */}
<header className="border-b border-border/70 bg-background-secondary/65 backdrop-blur-sm fixed top-0 w-full z-10">
<div className="container mx-auto px-4 py-4 flex justify-between items-center">
<div className="text-2xl font-semibold text-text-primary">
DyoLink
{tCommon('appName')}
</div>
<div className="flex items-center gap-3">
<ThemeToggle />
<TopBarControls />
{user ? (
<Link href="/today">
<Button variant="primary">Dashboard</Button>
<Button variant="primary">{tAuth('dashboard')}</Button>
</Link>
) : (
<>
<Link href="/login">
<Button variant="outline">Login</Button>
<Button variant="outline">{tAuth('login')}</Button>
</Link>
<Link href="/register">
<Button variant="primary">Start Trial</Button>
<Button variant="primary">{tAuth('startTrial')}</Button>
</Link>
</>
)}
</div>
</div>
</header>
{/* Hero Section */}
<main className="container mx-auto px-4 pt-32 pb-20">
<div className="max-w-4xl mx-auto text-center">
<h1 className="text-5xl md:text-6xl font-semibold mb-6 leading-tight">
Connect Dental Clinics & Labs
<span className="text-primary"> Seamlessly</span>
{t('heroTitle')}
<span className="text-primary"> {t('heroHighlight')}</span>
</h1>
<p className="text-lg text-text-secondary mb-8 max-w-2xl mx-auto">
Streamline communication between dental professionals. Start with
a 30-day free trial, no credit card required.
{t('heroSubtitle')}
</p>
{!user && (
<Link href="/register">
<Button size="lg" variant="primary" className="px-8">
Start Free Trial
{tAuth('startFreeTrial')}
</Button>
</Link>
)}
</div>
{/* Features */}
<div className="mt-20 grid md:grid-cols-3 gap-6">
<FeatureCard
icon={<Building2 className="h-6 w-6 icon-flat" />}
title="For Clinics"
description="Manage patients, appointments, and send cases to labs instantly."
title={t('featureClinicsTitle')}
description={t('featureClinicsDescription')}
/>
<FeatureCard
icon={<Beaker className="h-6 w-6 icon-flat" />}
title="For Labs"
description="Receive cases, track progress, and communicate with clinics."
title={t('featureLabsTitle')}
description={t('featureLabsDescription')}
/>
<FeatureCard
icon={<Users className="h-6 w-6 icon-flat" />}
title="Team Management"
description="Add up to 5 team members during trial. Scale as you grow."
title={t('featureTeamTitle')}
description={t('featureTeamDescription')}
/>
<FeatureCard
icon={<Calendar className="h-6 w-6 icon-flat" />}
title="30-Day Trial"
description="Full access to all features. No credit card required."
title={t('featureTrialTitle')}
description={t('featureTrialDescription')}
/>
<FeatureCard
icon={<Clock className="h-6 w-6 icon-flat" />}
title="Real-time Updates"
description="Get instant notifications on case status changes."
title={t('featureRealtimeTitle')}
description={t('featureRealtimeDescription')}
/>
<FeatureCard
icon={<Shield className="h-6 w-6 icon-flat" />}
title="Secure & Compliant"
description="HIPAA-compliant with enterprise-grade security."
title={t('featureSecurityTitle')}
description={t('featureSecurityDescription')}
/>
</div>
</main>
{/* Footer */}
<footer className="border-t border-border/70 bg-background-secondary/80">
<div className="container mx-auto px-4 py-8 flex flex-col md:flex-row justify-between items-center text-sm text-text-secondary">
<div>© 2026 DyoLink. All rights reserved.</div>
<div>{t('footerCopyright')}</div>
<div className="flex gap-6 mt-4 md:mt-0">
<Link href="/terms" className="hover:text-primary transition-colors">
Terms & Conditions
{t('termsAndConditions')}
</Link>
<Link href="/privacy" className="hover:text-primary transition-colors">
Privacy Policy
{tAuth('privacyPolicy')}
</Link>
</div>
</div>
</footer>
</div>
@@ -132,19 +124,9 @@ function FeatureCard({
}) {
return (
<div className="surface-card p-5 transition-all hover:border-primary/70 hover:shadow-[0_0_20px_rgba(0,194,255,0.12)]">
<div className="text-primary mb-4">
{icon}
</div>
<h3 className="text-base font-medium text-text-primary mb-2">
{title}
</h3>
<p className="text-sm text-text-secondary">
{description}
</p>
<div className="text-primary mb-4">{icon}</div>
<h3 className="text-base font-medium text-text-primary mb-2">{title}</h3>
<p className="text-sm text-text-secondary">{description}</p>
</div>
);
}
}

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

@@ -0,0 +1,221 @@
'use client';
import { useMemo, useState } from 'react';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import * as z from 'zod';
import { useTranslations } from 'next-intl';
import { Link } from '@/i18n/navigation';
import { Mail, Lock, User } from 'lucide-react';
import { useAuth } from '@/lib/hooks/useAuth';
import { OrganizationDetailsFields } from '@/components/ui/auth/OrganizationDetailsFields';
import { RegistrationProgressSteps } from '@/components/ui/auth/RegistrationProgressSteps';
import { Button } from '@/components/ui/shared/Button';
import { Input } from '@/components/ui/shared/Input';
import { TopBarControls } from '@/components/ui/shared/TopBarControls';
type RegisterForm = {
name: string;
email: string;
password: string;
confirmPassword: string;
organizationName: string;
organizationEmail: string;
organizationType: 'CLINIC' | 'LAB';
};
export default function RegisterPage() {
const t = useTranslations('auth');
const tCommon = useTranslations('common');
const tValidation = useTranslations('validation');
const { registerTrial, isLoading } = useAuth();
const [step, setStep] = useState(1);
const [error, setError] = useState<string | null>(null);
const registerSchema = useMemo(
() =>
z
.object({
name: z.string().min(2, tValidation('nameMinLength')),
email: z.string().email(tValidation('emailInvalid')),
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 {
register,
handleSubmit,
watch,
formState: { errors },
trigger,
setValue,
} = useForm<RegisterForm>({
resolver: zodResolver(registerSchema),
mode: 'onChange',
});
const organizationType = watch('organizationType');
const handleNext = async () => {
const fieldsToValidate =
step === 1
? (['name', 'email', 'password', 'confirmPassword'] as const)
: (['organizationName', 'organizationEmail', 'organizationType'] as const);
const isValid = await trigger([...fieldsToValidate]);
if (isValid) {
setStep(step + 1);
}
};
const onSubmit = async (data: RegisterForm) => {
try {
setError(null);
await registerTrial(
data.email,
data.password,
data.name,
data.organizationName,
data.organizationEmail,
data.organizationType,
);
} catch (err: unknown) {
const message = err instanceof Error ? err.message : t('registrationFailed');
setError(message || t('registrationFailed'));
}
};
return (
<div className="relative min-h-screen app-web-bg flex flex-col justify-center py-12 sm:px-6 lg:px-8">
<div className="absolute top-4 right-4">
<TopBarControls />
</div>
<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">{tCommon('appName')}</span>
</Link>
<h2 className="mt-6 text-center text-3xl font-semibold text-text-primary">
{t('registerTitle')}
</h2>
<p className="mt-2 text-center text-sm text-text-secondary">
{t('registerPrompt')}{' '}
<Link href="/login" className="font-medium text-primary hover:opacity-90">
{t('signInLink')}
</Link>
</p>
</div>
<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">
<RegistrationProgressSteps step={step} />
<div className="mb-6 p-4 bg-primary-soft rounded-[var(--radius-md)] border border-primary/35">
<h3 className="text-sm font-medium text-text-primary mb-2">{t('trialIncludes')}</h3>
<ul className="text-sm text-text-secondary space-y-1">
<li className="flex items-center">
<span className="mr-2">✓</span> {t('trialTeamMembers')}
</li>
<li className="flex items-center">
<span className="mr-2">✓</span> {t('trialFullAccess')}
</li>
<li className="flex items-center">
<span className="mr-2">✓</span> {t('trialNoCard')}
</li>
</ul>
</div>
<form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
{step === 1 && (
<>
<Input
label={t('fullName')}
{...register('name')}
placeholder={t('namePlaceholder')}
error={errors.name?.message}
icon={<User className="h-5 w-5 icon-flat" />}
/>
<Input
label={t('email')}
{...register('email')}
type="email"
placeholder={t('emailPlaceholder')}
error={errors.email?.message}
icon={<Mail className="h-5 w-5 icon-flat" />}
/>
<Input
label={t('password')}
{...register('password')}
type="password"
placeholder={t('passwordPlaceholder')}
error={errors.password?.message}
icon={<Lock className="h-5 w-5 icon-flat" />}
/>
<Input
label={t('confirmPassword')}
{...register('confirmPassword')}
type="password"
placeholder={t('passwordPlaceholder')}
error={errors.confirmPassword?.message}
icon={<Lock className="h-5 w-5 icon-flat" />}
/>
<Button type="button" variant="primary" onClick={handleNext} fullWidth>
{tCommon('continue')}
</Button>
</>
)}
{step === 2 && (
<>
<OrganizationDetailsFields
register={register as never}
errors={errors as never}
organizationType={organizationType}
setValue={setValue as never}
/>
{error && (
<div className="p-3 bg-red-950/30 border border-red-600/40 rounded-[var(--radius-md)]">
<p className="text-sm text-red-600">{error}</p>
</div>
)}
<div className="flex gap-3">
<Button type="button" variant="outline" onClick={() => setStep(1)}>
{tCommon('back')}
</Button>
<Button type="submit" variant="primary" isLoading={isLoading} fullWidth>
{t('startMyFreeTrial')}
</Button>
</div>
</>
)}
</form>
<p className="mt-6 text-xs text-center text-text-muted">
{t('termsIntro')}{' '}
<Link href="/terms" className="text-primary hover:opacity-90">
{t('termsOfService')}
</Link>{' '}
{tCommon('and')}{' '}
<Link href="/privacy" className="text-primary hover:opacity-90">
{t('privacyPolicy')}
</Link>
</p>
</div>
</div>
</div>
);
}

0
frontend/src/app/(public)/select-organization/page.tsx → frontend/src/app/[locale]/(public)/select-organization/page.tsx
View File

56
frontend/src/app/[locale]/layout.tsx Normal file
View File

@@ -0,0 +1,56 @@
import type { Metadata } from 'next';
import { NextIntlClientProvider } from 'next-intl';
import { getMessages, setRequestLocale } from 'next-intl/server';
import { hasLocale } from 'next-intl';
import { notFound } from 'next/navigation';
import Script from 'next/script';
import '@/styles/globals.css';
import '@/styles/background-web.css';
import { AuthProvider } from '@/lib/hooks/useAuth';
import { THEME_STORAGE_KEY } from '@/lib/theme';
import { routing, localeHtmlLang } from '@/i18n/routing';
import { LocaleSync } from '@/components/i18n/LocaleSync';
export const metadata: Metadata = {
title: 'DyoLink - Dental Clinic & Lab Communication Hub',
description: 'Connect dental clinics and laboratories seamlessly',
};
export function generateStaticParams() {
return routing.locales.map((locale) => ({ locale }));
}
export default async function LocaleLayout({
children,
params,
}: {
children: React.ReactNode;
params: Promise<{ locale: string }>;
}) {
const { locale } = await params;
if (!hasLocale(routing.locales, locale)) {
notFound();
}
setRequestLocale(locale);
const messages = await getMessages();
const themeInit = `(function(){try{var k=${JSON.stringify(THEME_STORAGE_KEY)};var t=localStorage.getItem(k);document.documentElement.setAttribute('data-theme',t==='light'||t==='dark'?t:'dark');}catch(e){document.documentElement.setAttribute('data-theme','dark');}})();`;
return (
<html lang={localeHtmlLang(locale)} dir="ltr" suppressHydrationWarning>
<body>
<Script id="theme-init" strategy="beforeInteractive">
{themeInit}
</Script>
<NextIntlClientProvider messages={messages}>
<AuthProvider>
<LocaleSync />
{children}
</AuthProvider>
</NextIntlClientProvider>
</body>
</html>
);
}

30
frontend/src/app/layout.tsx
View File

@@ -1,33 +1,7 @@
// src/app/layout.tsx
import type { Metadata } from 'next';
import Script from 'next/script';
import '@/styles/globals.css';
import '@/styles/background-web.css';
import { AuthProvider } from '@/lib/hooks/useAuth';
import { THEME_STORAGE_KEY } from '@/lib/theme';
export const metadata: Metadata = {
title: 'DyoLink - Dental Clinic & Lab Communication Hub',
description: 'Connect dental clinics and laboratories seamlessly',
};
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
const themeInit = `(function(){try{var k=${JSON.stringify(THEME_STORAGE_KEY)};var t=localStorage.getItem(k);document.documentElement.setAttribute('data-theme',t==='light'||t==='dark'?t:'dark');}catch(e){document.documentElement.setAttribute('data-theme','dark');}})();`;
return (
<html lang="en" suppressHydrationWarning>
<body>
<Script id="theme-init" strategy="beforeInteractive">
{themeInit}
</Script>
<AuthProvider>
{children}
</AuthProvider>
</body>
</html>
);
}
return children;
}