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

improvement: appointments history component added to patients feature.

Browse Source
This commit is contained in:
Admin
2026-07-12 18:56:01 +03:30
parent 3b47aa9605
commit 1cdf853d32
12 changed files with 374 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
frontend/messages/en.json
View File

@@ -393,7 +393,20 @@
"statusLabel": "Status:",
"statusActive": "Active",
"statusInactive": "Inactive",
"emptyValue": "-"
"emptyValue": "-",
"requiredMark": "*",
"requiredFieldsHint": "Fields marked with * are required. Email is optional.",
"firstNameRequired": "First name is required.",
"lastNameRequired": "Last name is required.",
"emailOptional": "Email (optional)",
"emailOptionalSummary": "Email (optional):",
"appointmentHistoryTitle": "Appointment history",
"appointmentHistorySubtitle": "Past and upcoming appointments for this patient at your clinic.",
"appointmentHistoryLoading": "Loading appointment history…",
"appointmentHistoryEmpty": "No appointments recorded for this patient yet.",
"appointmentHistoryError": "Could not load appointment history.",
"appointmentHistoryProvider": "Provider: {name}",
"appointmentHistoryUnknownProvider": "Unknown provider"
},
"cases": {
"title": "Cases",

15
frontend/messages/fa.json
View File

@@ -393,7 +393,20 @@
"statusLabel": "وضعیت:",
"statusActive": "فعال",
"statusInactive": "غیرفعال",
"emptyValue": "-"
"emptyValue": "-",
"requiredMark": "*",
"requiredFieldsHint": "فیلدهای دارای * الزامی هستند. ایمیل اختیاری است.",
"firstNameRequired": "نام الزامی است.",
"lastNameRequired": "نام خانوادگی الزامی است.",
"emailOptional": "ایمیل (اختیاری)",
"emailOptionalSummary": "ایمیل (اختیاری):",
"appointmentHistoryTitle": "سوابق نوبت",
"appointmentHistorySubtitle": "نوبت‌های گذشته و آینده این بیمار در کلینیک شما.",
"appointmentHistoryLoading": "در حال بارگذاری سوابق نوبت…",
"appointmentHistoryEmpty": "هنوز نوبتی برای این بیمار ثبت نشده است.",
"appointmentHistoryError": "بارگذاری سوابق نوبت انجام نشد.",
"appointmentHistoryProvider": "ارائه‌دهنده: {name}",
"appointmentHistoryUnknownProvider": "ارائه‌دهنده نامشخص"
},
"cases": {
"title": "پرونده‌ها",

15
frontend/messages/nl.json
View File

@@ -393,7 +393,20 @@
"statusLabel": "Status:",
"statusActive": "Actief",
"statusInactive": "Inactief",
"emptyValue": "-"
"emptyValue": "-",
"requiredMark": "*",
"requiredFieldsHint": "Velden met * zijn verplicht. E-mail is optioneel.",
"firstNameRequired": "Voornaam is verplicht.",
"lastNameRequired": "Achternaam is verplicht.",
"emailOptional": "E-mail (optioneel)",
"emailOptionalSummary": "E-mail (optioneel):",
"appointmentHistoryTitle": "Afspraakgeschiedenis",
"appointmentHistorySubtitle": "Eerdere en komende afspraken voor deze patiënt in uw kliniek.",
"appointmentHistoryLoading": "Afspraakgeschiedenis laden…",
"appointmentHistoryEmpty": "Er zijn nog geen afspraken voor deze patiënt.",
"appointmentHistoryError": "Kon afspraakgeschiedenis niet laden.",
"appointmentHistoryProvider": "Behandelaar: {name}",
"appointmentHistoryUnknownProvider": "Onbekende behandelaar"
},
"cases": {
"title": "Dossiers",

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

@@ -13,6 +13,7 @@ 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';
import { PatientAppointmentHistory } from '@/components/ui/patient/PatientAppointmentHistory';
const EMPTY_PATIENT_FORM: CreatePatientInput = {
firstName: '',
@@ -154,6 +155,9 @@ export default function PatientsPage() {
<div className="xl:col-span-2 space-y-4">
<PatientSummaryCard patient={selectedPatient} />
{selectedPatient ? (
<PatientAppointmentHistory patientId={selectedPatient.id} />
) : null}
</div>
</div>
</div>

98
frontend/src/components/ui/patient/CreatePatientModal.tsx
View File

@@ -1,5 +1,6 @@
'use client';
import { useMemo, useState } from 'react';
import { useTranslations } from 'next-intl';
import { Button } from '@/components/ui/shared/Button';
import { DialogCloseButton } from '@/components/ui/shared/DialogCloseButton';
@@ -22,6 +23,8 @@ interface CreatePatientModalProps {
variant?: 'inline' | 'dialog';
}
type FieldErrors = Partial<Record<'firstName' | 'lastName' | 'mobile' | 'email', string>>;
function CreatePatientFormFields({
formData,
onChange,
@@ -39,46 +42,113 @@ function CreatePatientFormFields({
}) {
const t = useTranslations('patients');
const tCommon = useTranslations('common');
const tValidation = useTranslations('validation');
const [fieldErrors, setFieldErrors] = useState<FieldErrors>({});
const requiredMark = t('requiredMark');
const validate = (): boolean => {
const nextErrors: FieldErrors = {};
if (!formData.firstName?.trim()) {
nextErrors.firstName = t('firstNameRequired');
}
if (!formData.lastName?.trim()) {
nextErrors.lastName = t('lastNameRequired');
}
if (!formData.mobile?.trim()) {
nextErrors.mobile = tValidation('mobileRequired');
} else if (!isValidMobile(normalizeMobile(formData.mobile) ?? '')) {
nextErrors.mobile = tValidation('mobileInvalid');
}
if (formData.email?.trim() && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email.trim())) {
nextErrors.email = tValidation('emailInvalid');
}
setFieldErrors(nextErrors);
return Object.keys(nextErrors).length === 0;
};
const handleSubmit = () => {
if (!validate()) {
return;
}
onSubmit();
};
const isSubmitDisabled = useMemo(
() =>
!formData.firstName?.trim() ||
!formData.lastName?.trim() ||
!isValidMobile(normalizeMobile(formData.mobile || '') ?? ''),
[formData.firstName, formData.lastName, formData.mobile],
);
return (
<>
<p className="text-sm text-text-muted">{t('requiredFieldsHint')}</p>
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
<Input
label={t('firstName')}
label={`${t('firstName')} ${requiredMark}`}
value={formData.firstName || ''}
onChange={(e) => onChange({ firstName: e.target.value })}
onChange={(e) => {
onChange({ firstName: e.target.value });
if (fieldErrors.firstName) {
setFieldErrors((prev) => ({ ...prev, firstName: undefined }));
}
}}
required
error={fieldErrors.firstName}
/>
<Input
label={t('lastName')}
label={`${t('lastName')} ${requiredMark}`}
value={formData.lastName || ''}
onChange={(e) => onChange({ lastName: e.target.value })}
onChange={(e) => {
onChange({ lastName: e.target.value });
if (fieldErrors.lastName) {
setFieldErrors((prev) => ({ ...prev, lastName: undefined }));
}
}}
required
error={fieldErrors.lastName}
/>
<Input
label={t('mobile')}
label={`${t('mobile')} ${requiredMark}`}
value={formData.mobile || ''}
onChange={(e) => onChange({ mobile: e.target.value })}
onChange={(e) => {
onChange({ mobile: e.target.value });
if (fieldErrors.mobile) {
setFieldErrors((prev) => ({ ...prev, mobile: undefined }));
}
}}
placeholder={t('mobilePlaceholder')}
required
error={fieldErrors.mobile}
/>
<Input
label={tCommon('email')}
label={t('emailOptional')}
type="email"
value={formData.email || ''}
onChange={(e) => onChange({ email: e.target.value })}
onChange={(e) => {
onChange({ email: e.target.value });
if (fieldErrors.email) {
setFieldErrors((prev) => ({ ...prev, email: undefined }));
}
}}
error={fieldErrors.email}
/>
</div>
<div className="flex flex-col-reverse gap-2 sm:flex-row sm:items-center">
<Button
variant="primary"
onClick={onSubmit}
onClick={handleSubmit}
isLoading={loading}
fullWidth
className="sm:w-auto"
disabled={
!formData.firstName ||
!formData.lastName ||
!isValidMobile(normalizeMobile(formData.mobile || '') ?? '')
}
disabled={isSubmitDisabled}
>
{t('savePatient')}
</Button>

122
frontend/src/components/ui/patient/PatientAppointmentHistory.tsx Normal file
View File

@@ -0,0 +1,122 @@
'use client';
import { useEffect, useState } from 'react';
import { useTranslations } from 'next-intl';
import { formatTimeForInput } from '@/components/appointments/appointmentTime';
import { purposeLabel } from '@/components/ui/appointments/appointmentPurposeStyles';
import { getUserFacingError } from '@/components/shared/formatApiError';
import { TreatmentTypeBadge } from '@/components/ui/treatment/TreatmentTypeBadge';
import { patientsApi } from '@/lib/api/patients';
import { treatmentCatalogApi } from '@/lib/api/treatment-catalog';
import type { PatientAppointmentHistoryItem } from '@/types/patient';
import type { TreatmentCatalogEntry } from '@/types/treatment-catalog';
interface PatientAppointmentHistoryProps {
patientId: string;
}
function formatAppointmentDate(value: string): string {
const date = new Date(value);
if (Number.isNaN(date.getTime())) {
return value;
}
return date.toLocaleDateString(undefined, {
weekday: 'short',
year: 'numeric',
month: 'short',
day: 'numeric',
});
}
export function PatientAppointmentHistory({ patientId }: PatientAppointmentHistoryProps) {
const t = useTranslations('patients');
const tErrors = useTranslations('errors');
const [items, setItems] = useState<PatientAppointmentHistoryItem[]>([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
const [treatmentCatalog, setTreatmentCatalog] = useState<TreatmentCatalogEntry[]>([]);
useEffect(() => {
void treatmentCatalogApi
.list('appointment')
.then((response) => setTreatmentCatalog(response.data))
.catch(() => {});
}, []);
useEffect(() => {
let cancelled = false;
void (async () => {
setLoading(true);
setError(null);
try {
const response = await patientsApi.listAppointments(patientId);
if (!cancelled) {
setItems(response.data);
}
} catch (err: unknown) {
if (!cancelled) {
setError(getUserFacingError(err, tErrors, t('appointmentHistoryError')));
setItems([]);
}
} finally {
if (!cancelled) {
setLoading(false);
}
}
})();
return () => {
cancelled = true;
};
}, [patientId, t, tErrors]);
return (
<div className="surface-card p-4 space-y-3">
<div>
<h3 className="text-base font-semibold text-text-primary">{t('appointmentHistoryTitle')}</h3>
<p className="text-sm text-text-muted mt-1">{t('appointmentHistorySubtitle')}</p>
</div>
{loading ? (
<p className="text-sm text-text-secondary">{t('appointmentHistoryLoading')}</p>
) : error ? (
<p className="text-sm text-red-500">{error}</p>
) : items.length === 0 ? (
<p className="text-sm text-text-secondary">{t('appointmentHistoryEmpty')}</p>
) : (
<ul className="divide-y divide-border/60">
{items.map((item) => (
<li key={item.id} className="py-3 first:pt-0 last:pb-0">
<div className="flex flex-col gap-1 sm:flex-row sm:items-start sm:justify-between">
<div className="min-w-0">
<p className="text-sm font-medium text-text-primary">
{formatAppointmentDate(item.startAt)}
</p>
<p className="text-sm text-text-secondary">
{formatTimeForInput(new Date(item.startAt))}
{' – '}
{formatTimeForInput(new Date(item.endAt))}
</p>
</div>
<div className="flex flex-col gap-1.5 sm:items-end">
{item.purpose ? (
<TreatmentTypeBadge
type={item.purpose}
label={purposeLabel(item.purpose, treatmentCatalog)}
/>
) : null}
<p className="text-sm text-text-muted">
{t('appointmentHistoryProvider', {
name: item.providerName || t('appointmentHistoryUnknownProvider'),
})}
</p>
</div>
</div>
</li>
))}
</ul>
)}
</div>
);
}

3
frontend/src/components/ui/patient/PatientSummaryCard.tsx
View File

@@ -28,7 +28,8 @@ export function PatientSummaryCard({ patient }: PatientSummaryCardProps) {
{t('mobileLabel')} {formatMobileForDisplay(patient.mobile)}
</p>
<p className="text-sm text-text-secondary">
{t('emailLabel')} {patient.email || t('emptyValue')}
{t('emailOptionalSummary')}{' '}
{patient.email || t('emptyValue')}
</p>
<p className="text-sm text-text-secondary">
{t('statusLabel')}{' '}

6
frontend/src/lib/api/patients.ts
View File

@@ -3,6 +3,7 @@ import {
CreatePatientInput,
CreatePatientResponse,
Patient,
PatientAppointmentHistoryResponse,
PatientsListResponse,
} from '@/types/patient';
@@ -21,4 +22,9 @@ export const patientsApi = {
const response = await apiClient.get(`/patients/${id}`);
return response.data;
},
listAppointments: async (patientId: string): Promise<PatientAppointmentHistoryResponse> => {
const response = await apiClient.get(`/patients/${patientId}/appointments`);
return response.data;
},
};

14
frontend/src/types/patient.ts
View File

@@ -39,3 +39,17 @@ export interface CreatePatientResponse {
data: Patient;
existing?: boolean;
}
export interface PatientAppointmentHistoryItem {
id: string;
startAt: string;
endAt: string;
purpose: string;
providerUserId: string;
providerName: string;
}
export interface PatientAppointmentHistoryResponse {
success: boolean;
data: PatientAppointmentHistoryItem[];
}