feature: a mocked implementation of v1 UI done.
This commit is contained in:
@@ -1,10 +1,18 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { TreatmentWorkspace } from '@/components/treatment/TreatmentWorkspace';
|
||||||
|
import { useAuth } from '@/lib/hooks/useAuth';
|
||||||
|
|
||||||
export default function TreatmentPage() {
|
export default function TreatmentPage() {
|
||||||
|
const { user, currentOrganization, isAuthReady } = useAuth();
|
||||||
|
|
||||||
|
if (!isAuthReady || !user) {
|
||||||
return (
|
return (
|
||||||
<div className="space-y-3">
|
<div className="text-sm text-text-muted">Loading…</div>
|
||||||
<h1 className="text-2xl font-semibold text-text-primary">Treatment</h1>
|
);
|
||||||
<p className="text-sm text-text-secondary">
|
}
|
||||||
Treatment module is coming soon.
|
|
||||||
</p>
|
return (
|
||||||
</div>
|
<TreatmentWorkspace userId={user.id} currentOrganization={currentOrganization} />
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
114
frontend/src/components/treatment/AppointmentsStrip.tsx
Normal file
114
frontend/src/components/treatment/AppointmentsStrip.tsx
Normal file
@@ -0,0 +1,114 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { CalendarDays } from 'lucide-react';
|
||||||
|
import { purposeStyle } from '@/components/ui/appointments/appointmentPurposeStyles';
|
||||||
|
import { ScheduleDayPicker } from '@/components/ui/common/ScheduleDayPicker';
|
||||||
|
import { startOfLocalDay } from '@/lib/appointmentTime';
|
||||||
|
import type { TreatmentAppointment } from '@/types/treatment';
|
||||||
|
|
||||||
|
interface AppointmentsStripProps {
|
||||||
|
stripHidden: boolean;
|
||||||
|
onToggleStripHidden: () => void;
|
||||||
|
selectedDay: Date;
|
||||||
|
onSelectDay: (day: Date) => void;
|
||||||
|
/** Same lower bound as Appointments schedule (cannot pick days before this). */
|
||||||
|
minScheduleDate: Date;
|
||||||
|
appointments: TreatmentAppointment[];
|
||||||
|
selectedAppointmentId: string | null;
|
||||||
|
onSelectAppointment: (id: string) => void;
|
||||||
|
loading?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function AppointmentsStrip({
|
||||||
|
stripHidden,
|
||||||
|
onToggleStripHidden,
|
||||||
|
selectedDay,
|
||||||
|
onSelectDay,
|
||||||
|
minScheduleDate,
|
||||||
|
appointments,
|
||||||
|
selectedAppointmentId,
|
||||||
|
onSelectAppointment,
|
||||||
|
loading = false,
|
||||||
|
}: AppointmentsStripProps) {
|
||||||
|
if (stripHidden) {
|
||||||
|
return (
|
||||||
|
<div className="surface-card p-3 flex items-center justify-between gap-3 flex-wrap">
|
||||||
|
<p className="text-sm text-text-secondary">Appointments are hidden.</p>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={onToggleStripHidden}
|
||||||
|
className="text-sm font-medium text-primary hover:underline focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 rounded-[var(--radius-sm)]"
|
||||||
|
>
|
||||||
|
Show appointments
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="surface-card p-4 space-y-4">
|
||||||
|
<div className="flex items-center justify-between gap-3 flex-wrap">
|
||||||
|
<div className="flex items-center gap-2 min-w-0">
|
||||||
|
<CalendarDays className="w-5 h-5 text-text-muted shrink-0 icon-flat" aria-hidden />
|
||||||
|
<h2 className="text-sm font-semibold text-text-primary truncate">My appointments</h2>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={onToggleStripHidden}
|
||||||
|
className="text-sm font-medium text-primary hover:underline focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 rounded-[var(--radius-sm)]"
|
||||||
|
>
|
||||||
|
Hide appointments
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex flex-col sm:flex-row sm:items-end gap-4 sm:justify-between">
|
||||||
|
<ScheduleDayPicker
|
||||||
|
value={selectedDay}
|
||||||
|
minDate={minScheduleDate}
|
||||||
|
onChange={(d) => onSelectDay(startOfLocalDay(d))}
|
||||||
|
/>
|
||||||
|
{loading && (
|
||||||
|
<p className="text-sm text-text-muted pb-2">Loading appointments…</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex flex-wrap gap-2">
|
||||||
|
{appointments.length === 0 && (
|
||||||
|
<p className="text-sm text-text-muted">No appointments assigned to you on this day.</p>
|
||||||
|
)}
|
||||||
|
{appointments.map((a) => {
|
||||||
|
const sel = a.id === selectedAppointmentId;
|
||||||
|
const start = new Date(a.startAt);
|
||||||
|
const end = new Date(a.endAt);
|
||||||
|
const timeLabel = `${start.toLocaleTimeString(undefined, {
|
||||||
|
hour: 'numeric',
|
||||||
|
minute: '2-digit',
|
||||||
|
})} – ${end.toLocaleTimeString(undefined, {
|
||||||
|
hour: 'numeric',
|
||||||
|
minute: '2-digit',
|
||||||
|
})}`;
|
||||||
|
const palette = purposeStyle(a.purpose);
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
key={a.id}
|
||||||
|
type="button"
|
||||||
|
onClick={() => onSelectAppointment(a.id)}
|
||||||
|
className={`
|
||||||
|
text-left rounded-[var(--radius-sm)] border px-3 py-2 min-w-[200px] max-w-[280px] transition-shadow min-h-[52px]
|
||||||
|
focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/45
|
||||||
|
${palette}
|
||||||
|
${sel ? 'ring-2 ring-primary ring-offset-2 ring-offset-background-secondary shadow-[inset_0_1px_0_rgba(255,255,255,0.06)]' : 'hover:brightness-110'}
|
||||||
|
`}
|
||||||
|
>
|
||||||
|
<p className="text-[11px] font-medium tabular-nums opacity-95">{timeLabel}</p>
|
||||||
|
<p className="text-sm font-medium leading-tight truncate mt-0.5">
|
||||||
|
{a.patientFirstName} {a.patientLastName}
|
||||||
|
</p>
|
||||||
|
<p className="text-[11px] opacity-90 capitalize mt-0.5">{a.purpose}</p>
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
83
frontend/src/components/treatment/FdiToothChart.tsx
Normal file
83
frontend/src/components/treatment/FdiToothChart.tsx
Normal file
@@ -0,0 +1,83 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useId } from 'react';
|
||||||
|
import { FDI_LOWER_LEFT_TO_RIGHT, FDI_UPPER_LEFT_TO_RIGHT, getToothShapeKind } from '@/components/treatment/fdiToothMeta';
|
||||||
|
import { ToothGlyph } from '@/components/treatment/ToothGlyph';
|
||||||
|
import type { FdiToothId } from '@/types/treatment';
|
||||||
|
|
||||||
|
function quadrantMirrored(fdi: FdiToothId): boolean {
|
||||||
|
const q = fdi[0];
|
||||||
|
return q === '2' || q === '3';
|
||||||
|
}
|
||||||
|
|
||||||
|
interface FdiToothChartProps {
|
||||||
|
selected: ReadonlySet<FdiToothId>;
|
||||||
|
onToggle: (fdi: FdiToothId) => void;
|
||||||
|
disabled?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function FdiToothChart({ selected, onToggle, disabled }: FdiToothChartProps) {
|
||||||
|
const uid = useId().replace(/:/g, '');
|
||||||
|
|
||||||
|
const Row = ({ teeth }: { teeth: FdiToothId[] }) => (
|
||||||
|
<div className="flex flex-wrap justify-center gap-x-1 gap-y-2">
|
||||||
|
{teeth.map((fdi, i) => {
|
||||||
|
const kind = getToothShapeKind(fdi);
|
||||||
|
const gid = `${uid}-g-${fdi}-${i}`;
|
||||||
|
const isSel = selected.has(fdi);
|
||||||
|
return (
|
||||||
|
<div key={fdi} className="flex flex-col items-center w-[2.25rem]">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
disabled={disabled}
|
||||||
|
onClick={() => onToggle(fdi)}
|
||||||
|
className={`
|
||||||
|
rounded-[var(--radius-sm)] p-0.5 transition-transform
|
||||||
|
focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/50
|
||||||
|
${disabled ? 'opacity-50 cursor-not-allowed' : 'hover:scale-105 active:scale-95'}
|
||||||
|
`}
|
||||||
|
aria-pressed={isSel}
|
||||||
|
aria-label={`FDI tooth ${fdi}${isSel ? ', selected' : ''}`}
|
||||||
|
>
|
||||||
|
<ToothGlyph kind={kind} gradientId={gid} selected={isSel} mirrored={quadrantMirrored(fdi)} />
|
||||||
|
</button>
|
||||||
|
<span
|
||||||
|
className={`text-[10px] tabular-nums leading-none mt-0.5 font-medium ${
|
||||||
|
isSel ? 'text-primary' : 'text-text-muted'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{fdi}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="surface-card p-4 space-y-6">
|
||||||
|
<div className="flex items-start justify-between gap-3 flex-wrap">
|
||||||
|
<div>
|
||||||
|
<h3 className="text-sm font-semibold text-text-primary">FDI tooth chart</h3>
|
||||||
|
<p className="text-xs text-text-muted mt-0.5">
|
||||||
|
Tap teeth to multi-select (FDI). Selection applies to the active treatment record until you save.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<p className="text-xs text-text-secondary tabular-nums">
|
||||||
|
Selected: {selected.size === 0 ? '—' : [...selected].sort().join(', ')}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-6">
|
||||||
|
<div>
|
||||||
|
<p className="text-[11px] uppercase tracking-wide text-text-muted mb-2 text-center">Upper arch</p>
|
||||||
|
<Row teeth={FDI_UPPER_LEFT_TO_RIGHT} />
|
||||||
|
</div>
|
||||||
|
<div className="border-t border-border/60 pt-4">
|
||||||
|
<p className="text-[11px] uppercase tracking-wide text-text-muted mb-2 text-center">Lower arch</p>
|
||||||
|
<Row teeth={FDI_LOWER_LEFT_TO_RIGHT} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
77
frontend/src/components/treatment/PastTreatmentsPanel.tsx
Normal file
77
frontend/src/components/treatment/PastTreatmentsPanel.tsx
Normal file
@@ -0,0 +1,77 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { FileText } from 'lucide-react';
|
||||||
|
import type { PastTreatment } from '@/types/treatment';
|
||||||
|
|
||||||
|
interface PastTreatmentsPanelProps {
|
||||||
|
items: PastTreatment[];
|
||||||
|
loading?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function PastTreatmentsPanel({ items, loading }: PastTreatmentsPanelProps) {
|
||||||
|
return (
|
||||||
|
<div className="surface-card p-4 space-y-3">
|
||||||
|
<div>
|
||||||
|
<h3 className="text-sm font-semibold text-text-primary">Previous treatments</h3>
|
||||||
|
<p className="text-xs text-text-muted mt-0.5">
|
||||||
|
Document preview is not implemented yet; file names are listed for context.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{loading && <p className="text-sm text-text-muted">Loading history...</p>}
|
||||||
|
|
||||||
|
{!loading && items.length === 0 && (
|
||||||
|
<p className="text-sm text-text-muted">No prior treatments for this patient.</p>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="space-y-3 max-h-[min(420px,55vh)] overflow-y-auto pr-1">
|
||||||
|
{items.map((t) => (
|
||||||
|
<article
|
||||||
|
key={t.id}
|
||||||
|
className="border border-border/70 rounded-[var(--radius-md)] p-3 bg-background-secondary/40"
|
||||||
|
>
|
||||||
|
<div className="flex items-start justify-between gap-2">
|
||||||
|
<p className="text-sm font-medium text-text-primary">{t.title}</p>
|
||||||
|
<time className="text-xs text-text-muted tabular-nums shrink-0" dateTime={t.treatmentAt}>
|
||||||
|
{new Date(t.treatmentAt).toLocaleDateString()}
|
||||||
|
</time>
|
||||||
|
</div>
|
||||||
|
<p className="text-xs text-text-secondary mt-1">Status: {t.status}</p>
|
||||||
|
|
||||||
|
{t.records.length > 0 && (
|
||||||
|
<ul className="mt-2 space-y-1.5 text-xs text-text-secondary">
|
||||||
|
{t.records.map((r) => (
|
||||||
|
<li key={r.id}>
|
||||||
|
<span className="text-text-primary font-medium">Record: </span>
|
||||||
|
{r.teeth.length > 0 ? `Teeth ${[...r.teeth].sort().join(', ')}` : 'No teeth tagged'}
|
||||||
|
{r.notes ? ` — ${r.notes}` : ''}
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{t.documents.length > 0 && (
|
||||||
|
<div className="mt-3 pt-2 border-t border-border/50">
|
||||||
|
<p className="text-[11px] uppercase tracking-wide text-text-muted mb-1.5">Attachments</p>
|
||||||
|
<ul className="space-y-1">
|
||||||
|
{t.documents.map((doc) => (
|
||||||
|
<li
|
||||||
|
key={doc.id}
|
||||||
|
className="flex items-center gap-2 text-xs text-text-secondary"
|
||||||
|
>
|
||||||
|
<FileText className="w-3.5 h-3.5 shrink-0 icon-flat" aria-hidden />
|
||||||
|
<span className="truncate">{doc.fileName}</span>
|
||||||
|
<span className="text-text-muted tabular-nums shrink-0">
|
||||||
|
{(doc.sizeBytes / 1024).toFixed(1)} KB
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</article>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
140
frontend/src/components/treatment/ToothGlyph.tsx
Normal file
140
frontend/src/components/treatment/ToothGlyph.tsx
Normal file
@@ -0,0 +1,140 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { memo } from 'react';
|
||||||
|
import type { ToothShapeKind } from '@/components/treatment/fdiToothMeta';
|
||||||
|
|
||||||
|
interface ToothGlyphProps {
|
||||||
|
kind: ToothShapeKind;
|
||||||
|
gradientId: string;
|
||||||
|
selected: boolean;
|
||||||
|
mirrored?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Stylized single tooth for FDI chart (outline + radial fill). Crown above, root(s) below. */
|
||||||
|
export const ToothGlyph = memo(function ToothGlyph({
|
||||||
|
kind,
|
||||||
|
gradientId,
|
||||||
|
selected,
|
||||||
|
mirrored,
|
||||||
|
}: ToothGlyphProps) {
|
||||||
|
const stroke = selected ? 'var(--color-primary)' : '#1e293b';
|
||||||
|
const strokeW = selected ? 2.4 : 1.35;
|
||||||
|
const filter = selected ? 'drop-shadow(0 0 6px rgba(9, 169, 188, 0.65))' : undefined;
|
||||||
|
|
||||||
|
const inner = () => {
|
||||||
|
switch (kind) {
|
||||||
|
case 'incisor':
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<path
|
||||||
|
d="M10 7h16q3 0 3 3v22q0 3-3 3h-16q-3 0-3-3v-22q0-3 3-3z"
|
||||||
|
fill={`url(#${gradientId})`}
|
||||||
|
stroke={stroke}
|
||||||
|
strokeWidth={strokeW}
|
||||||
|
strokeLinejoin="round"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M14 35v26q4 10 8 0v-26"
|
||||||
|
fill={`url(#${gradientId})`}
|
||||||
|
stroke={stroke}
|
||||||
|
strokeWidth={strokeW}
|
||||||
|
strokeLinejoin="round"
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
case 'canine':
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<path
|
||||||
|
d="M18 6 L26 14 L24 35 H12 L10 14 Z"
|
||||||
|
fill={`url(#${gradientId})`}
|
||||||
|
stroke={stroke}
|
||||||
|
strokeWidth={strokeW}
|
||||||
|
strokeLinejoin="round"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M14 35 L12 62 Q18 74 24 62 L22 35 Z"
|
||||||
|
fill={`url(#${gradientId})`}
|
||||||
|
stroke={stroke}
|
||||||
|
strokeWidth={strokeW}
|
||||||
|
strokeLinejoin="round"
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
case 'premolar':
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<path
|
||||||
|
d="M8 12 Q18 6 28 12 L30 22 Q31 28 26 34 H10 Q5 28 6 22 Z"
|
||||||
|
fill={`url(#${gradientId})`}
|
||||||
|
stroke={stroke}
|
||||||
|
strokeWidth={strokeW}
|
||||||
|
strokeLinejoin="round"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M11 34 L10 58 Q18 68 26 58 L25 34 Q18 30 11 34 Z"
|
||||||
|
fill={`url(#${gradientId})`}
|
||||||
|
stroke={stroke}
|
||||||
|
strokeWidth={strokeW}
|
||||||
|
strokeLinejoin="round"
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
case 'molar':
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<path
|
||||||
|
d="M6 14 Q10 8 14 10 Q18 7 22 10 Q26 8 30 14 L31 26 Q32 32 27 36 H9 Q4 32 5 26 Z"
|
||||||
|
fill={`url(#${gradientId})`}
|
||||||
|
stroke={stroke}
|
||||||
|
strokeWidth={strokeW}
|
||||||
|
strokeLinejoin="round"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M10 36 L8 56 Q14 66 18 58 Q22 66 28 56 L26 36 Q18 32 10 36 Z"
|
||||||
|
fill={`url(#${gradientId})`}
|
||||||
|
stroke={stroke}
|
||||||
|
strokeWidth={strokeW}
|
||||||
|
strokeLinejoin="round"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M12 58 Q18 72 24 58"
|
||||||
|
fill="none"
|
||||||
|
stroke={stroke}
|
||||||
|
strokeWidth={strokeW * 0.85}
|
||||||
|
strokeLinecap="round"
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
default:
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<svg
|
||||||
|
viewBox="0 0 36 78"
|
||||||
|
className="w-8 h-[4.85rem] shrink-0"
|
||||||
|
style={{ filter }}
|
||||||
|
aria-hidden
|
||||||
|
>
|
||||||
|
<defs>
|
||||||
|
<radialGradient id={gradientId} cx="45%" cy="35%" r="65%">
|
||||||
|
<stop
|
||||||
|
offset="0%"
|
||||||
|
stopColor={selected ? '#cffafe' : '#ffffff'}
|
||||||
|
/>
|
||||||
|
<stop
|
||||||
|
offset="55%"
|
||||||
|
stopColor={selected ? '#5eead4' : '#e0f2fe'}
|
||||||
|
/>
|
||||||
|
<stop
|
||||||
|
offset="100%"
|
||||||
|
stopColor={selected ? '#0e7490' : '#93c5fd'}
|
||||||
|
/>
|
||||||
|
</radialGradient>
|
||||||
|
</defs>
|
||||||
|
<g transform={mirrored ? 'translate(36 0) scale(-1 1)' : undefined}>{inner()}</g>
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
});
|
||||||
494
frontend/src/components/treatment/TreatmentWorkspace.tsx
Normal file
494
frontend/src/components/treatment/TreatmentWorkspace.tsx
Normal file
@@ -0,0 +1,494 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
||||||
|
import { AppointmentsStrip } from '@/components/treatment/AppointmentsStrip';
|
||||||
|
import { FdiToothChart } from '@/components/treatment/FdiToothChart';
|
||||||
|
import { PastTreatmentsPanel } from '@/components/treatment/PastTreatmentsPanel';
|
||||||
|
import { Checkbox } from '@/components/ui/common/Checkbox';
|
||||||
|
import { Button } from '@/components/ui/common/Button';
|
||||||
|
import { isSameLocalCalendarDay, startOfLocalDay } from '@/lib/appointmentTime';
|
||||||
|
import {
|
||||||
|
fetchLinkedOrganizations,
|
||||||
|
fetchMyAppointmentsForDay,
|
||||||
|
fetchPastTreatments,
|
||||||
|
saveTreatmentDraft,
|
||||||
|
sendTreatmentRecord,
|
||||||
|
} from '@/lib/mocks/treatmentMockApi';
|
||||||
|
import { pickAutoAppointment } from '@/lib/treatmentSelection';
|
||||||
|
import { canEditTreatment } from '@/shared/permissions';
|
||||||
|
import type { Organization } from '@/types/organization';
|
||||||
|
import type {
|
||||||
|
FdiToothId,
|
||||||
|
LinkedOrganizationOption,
|
||||||
|
PastTreatment,
|
||||||
|
TreatmentAppointment,
|
||||||
|
TreatmentAttachmentMeta,
|
||||||
|
TreatmentRecordDraft,
|
||||||
|
} from '@/types/treatment';
|
||||||
|
|
||||||
|
function newRecord(): TreatmentRecordDraft {
|
||||||
|
return {
|
||||||
|
clientId:
|
||||||
|
typeof crypto !== 'undefined' && 'randomUUID' in crypto
|
||||||
|
? crypto.randomUUID()
|
||||||
|
: `rec-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`,
|
||||||
|
teeth: [],
|
||||||
|
comment: '',
|
||||||
|
attachmentMetas: [],
|
||||||
|
sendToOrganizationIds: [],
|
||||||
|
sentAt: null,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
interface TreatmentWorkspaceProps {
|
||||||
|
userId: string;
|
||||||
|
currentOrganization: Organization | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function TreatmentWorkspace({ userId, currentOrganization }: TreatmentWorkspaceProps) {
|
||||||
|
const canEdit = canEditTreatment(currentOrganization);
|
||||||
|
|
||||||
|
const [stripHidden, setStripHidden] = useState(false);
|
||||||
|
|
||||||
|
const scheduleMinDate = useMemo(() => startOfLocalDay(new Date()), []);
|
||||||
|
|
||||||
|
const [selectedDay, setSelectedDay] = useState(() => startOfLocalDay(new Date()));
|
||||||
|
const [appointments, setAppointments] = useState<TreatmentAppointment[]>([]);
|
||||||
|
const [apptsLoading, setApptsLoading] = useState(false);
|
||||||
|
const [selectionLocked, setSelectionLocked] = useState(false);
|
||||||
|
const [selectedAppointmentId, setSelectedAppointmentId] = useState<string | null>(null);
|
||||||
|
|
||||||
|
const [history, setHistory] = useState<PastTreatment[]>([]);
|
||||||
|
const [historyLoading, setHistoryLoading] = useState(false);
|
||||||
|
|
||||||
|
const [orgs, setOrgs] = useState<LinkedOrganizationOption[]>([]);
|
||||||
|
|
||||||
|
const [records, setRecords] = useState<TreatmentRecordDraft[]>(() => [newRecord()]);
|
||||||
|
const [activeRecordId, setActiveRecordId] = useState<string>(() => records[0].clientId);
|
||||||
|
|
||||||
|
const selectionLockedRef = useRef(selectionLocked);
|
||||||
|
selectionLockedRef.current = selectionLocked;
|
||||||
|
|
||||||
|
const attachmentInputRef = useRef<HTMLInputElement>(null);
|
||||||
|
|
||||||
|
const [saveBusy, setSaveBusy] = useState(false);
|
||||||
|
const [sendBusyId, setSendBusyId] = useState<string | null>(null);
|
||||||
|
const [banner, setBanner] = useState<string | null>(null);
|
||||||
|
|
||||||
|
const selectedAppointment = useMemo(
|
||||||
|
() => appointments.find((a) => a.id === selectedAppointmentId) ?? null,
|
||||||
|
[appointments, selectedAppointmentId],
|
||||||
|
);
|
||||||
|
|
||||||
|
const activeRecord = useMemo(
|
||||||
|
() => records.find((r) => r.clientId === activeRecordId) ?? records[0],
|
||||||
|
[records, activeRecordId],
|
||||||
|
);
|
||||||
|
|
||||||
|
const selectedTeethSet = useMemo(() => new Set(activeRecord.teeth), [activeRecord.teeth]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setSelectionLocked(false);
|
||||||
|
}, [selectedDay]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
let cancelled = false;
|
||||||
|
setApptsLoading(true);
|
||||||
|
void (async () => {
|
||||||
|
try {
|
||||||
|
const list = await fetchMyAppointmentsForDay(userId, selectedDay);
|
||||||
|
if (cancelled) return;
|
||||||
|
setAppointments(list);
|
||||||
|
if (!selectionLockedRef.current) {
|
||||||
|
setSelectedAppointmentId(pickAutoAppointment(list, selectedDay));
|
||||||
|
}
|
||||||
|
} finally {
|
||||||
|
if (!cancelled) setApptsLoading(false);
|
||||||
|
}
|
||||||
|
})();
|
||||||
|
return () => {
|
||||||
|
cancelled = true;
|
||||||
|
};
|
||||||
|
}, [userId, selectedDay]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const today = startOfLocalDay(new Date());
|
||||||
|
if (!isSameLocalCalendarDay(selectedDay, today) || selectionLocked) return;
|
||||||
|
|
||||||
|
const id = window.setInterval(() => {
|
||||||
|
setSelectedAppointmentId((prev) => {
|
||||||
|
const next = pickAutoAppointment(appointments, selectedDay);
|
||||||
|
return next ?? prev;
|
||||||
|
});
|
||||||
|
}, 60_000);
|
||||||
|
|
||||||
|
return () => window.clearInterval(id);
|
||||||
|
}, [selectedDay, appointments, selectionLocked]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
let cancelled = false;
|
||||||
|
void (async () => {
|
||||||
|
const list = await fetchLinkedOrganizations();
|
||||||
|
if (!cancelled) setOrgs(list);
|
||||||
|
})();
|
||||||
|
return () => {
|
||||||
|
cancelled = true;
|
||||||
|
};
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!selectedAppointment) {
|
||||||
|
setHistory([]);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
let cancelled = false;
|
||||||
|
setHistoryLoading(true);
|
||||||
|
void (async () => {
|
||||||
|
const items = await fetchPastTreatments(selectedAppointment.patientId);
|
||||||
|
if (!cancelled) {
|
||||||
|
setHistory(items);
|
||||||
|
setHistoryLoading(false);
|
||||||
|
}
|
||||||
|
})();
|
||||||
|
return () => {
|
||||||
|
cancelled = true;
|
||||||
|
};
|
||||||
|
}, [selectedAppointment?.patientId]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const first = newRecord();
|
||||||
|
setRecords([first]);
|
||||||
|
setActiveRecordId(first.clientId);
|
||||||
|
}, [selectedAppointment?.id]);
|
||||||
|
|
||||||
|
const fixActiveAfterRecordsChange = useCallback((next: TreatmentRecordDraft[]) => {
|
||||||
|
setRecords(next);
|
||||||
|
setActiveRecordId((id) => (next.some((r) => r.clientId === id) ? id : next[0].clientId));
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const toggleTooth = useCallback(
|
||||||
|
(fdi: FdiToothId) => {
|
||||||
|
if (!canEdit) return;
|
||||||
|
setRecords((prev) =>
|
||||||
|
prev.map((r) => {
|
||||||
|
if (r.clientId !== activeRecordId) return r;
|
||||||
|
const set = new Set(r.teeth);
|
||||||
|
if (set.has(fdi)) set.delete(fdi);
|
||||||
|
else set.add(fdi);
|
||||||
|
return { ...r, teeth: [...set].sort() as FdiToothId[] };
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
},
|
||||||
|
[activeRecordId, canEdit],
|
||||||
|
);
|
||||||
|
|
||||||
|
const onPickAppointment = useCallback((id: string) => {
|
||||||
|
setSelectionLocked(true);
|
||||||
|
setSelectedAppointmentId(id);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const addAttachments = useCallback(
|
||||||
|
(files: FileList | null) => {
|
||||||
|
if (!files?.length || !canEdit) return;
|
||||||
|
setRecords((prev) =>
|
||||||
|
prev.map((r) => {
|
||||||
|
if (r.clientId !== activeRecordId) return r;
|
||||||
|
const added: TreatmentAttachmentMeta[] = [...r.attachmentMetas];
|
||||||
|
for (let i = 0; i < files.length; i++) {
|
||||||
|
const f = files[i];
|
||||||
|
added.push({
|
||||||
|
id: `local-${Date.now()}-${i}-${Math.random().toString(36).slice(2, 7)}`,
|
||||||
|
fileName: f.name,
|
||||||
|
mimeType: f.type || 'application/octet-stream',
|
||||||
|
sizeBytes: f.size,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
return { ...r, attachmentMetas: added };
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
},
|
||||||
|
[activeRecordId, canEdit],
|
||||||
|
);
|
||||||
|
|
||||||
|
const handleSaveAll = useCallback(async () => {
|
||||||
|
if (!canEdit || !selectedAppointment) return;
|
||||||
|
setSaveBusy(true);
|
||||||
|
setBanner(null);
|
||||||
|
try {
|
||||||
|
await saveTreatmentDraft({
|
||||||
|
appointmentId: selectedAppointment.id,
|
||||||
|
patientId: selectedAppointment.patientId,
|
||||||
|
records: records.map(({ clientId: _c, sentAt: _s, ...rest }) => rest),
|
||||||
|
});
|
||||||
|
setBanner('Treatment draft saved (mock). You can send records later.');
|
||||||
|
} finally {
|
||||||
|
setSaveBusy(false);
|
||||||
|
}
|
||||||
|
}, [canEdit, selectedAppointment, records]);
|
||||||
|
|
||||||
|
const handleSendRecord = useCallback(
|
||||||
|
async (record: TreatmentRecordDraft) => {
|
||||||
|
if (!canEdit || !selectedAppointment) return;
|
||||||
|
const targets = record.sendToOrganizationIds.filter((id) =>
|
||||||
|
orgs.some((o) => o.id === id && o.active),
|
||||||
|
);
|
||||||
|
if (targets.length === 0) {
|
||||||
|
setBanner('Choose at least one active organization to send this record.');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
setSendBusyId(record.clientId);
|
||||||
|
setBanner(null);
|
||||||
|
try {
|
||||||
|
await sendTreatmentRecord({
|
||||||
|
appointmentId: selectedAppointment.id,
|
||||||
|
patientId: selectedAppointment.patientId,
|
||||||
|
recordClientId: record.clientId,
|
||||||
|
organizationIds: targets,
|
||||||
|
});
|
||||||
|
setRecords((prev) =>
|
||||||
|
prev.map((r) =>
|
||||||
|
r.clientId === record.clientId ? { ...r, sentAt: new Date().toISOString() } : r,
|
||||||
|
),
|
||||||
|
);
|
||||||
|
setBanner('Record sent to selected organizations (mock).');
|
||||||
|
} finally {
|
||||||
|
setSendBusyId(null);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
[canEdit, selectedAppointment, orgs],
|
||||||
|
);
|
||||||
|
|
||||||
|
if (!canEdit) {
|
||||||
|
return (
|
||||||
|
<div className="surface-card p-6 max-w-xl">
|
||||||
|
<h2 className="text-lg font-semibold text-text-primary">Treatment workspace</h2>
|
||||||
|
<p className="text-sm text-text-secondary mt-2">
|
||||||
|
Your role can view the Treatment tab, but editing clinical workflows requires{' '}
|
||||||
|
<span className="text-text-primary font-medium">Treatment edit</span> permission.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-6">
|
||||||
|
<header className="space-y-1">
|
||||||
|
<h1 className="text-2xl font-semibold text-text-primary">Treatment</h1>
|
||||||
|
<p className="text-sm text-text-secondary">
|
||||||
|
Mocked data — appointments, history, save, and send are simulated until backend endpoints exist.
|
||||||
|
</p>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<AppointmentsStrip
|
||||||
|
stripHidden={stripHidden}
|
||||||
|
onToggleStripHidden={() => setStripHidden((s) => !s)}
|
||||||
|
selectedDay={selectedDay}
|
||||||
|
onSelectDay={setSelectedDay}
|
||||||
|
minScheduleDate={scheduleMinDate}
|
||||||
|
appointments={appointments}
|
||||||
|
selectedAppointmentId={selectedAppointmentId}
|
||||||
|
onSelectAppointment={onPickAppointment}
|
||||||
|
loading={apptsLoading}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{banner && (
|
||||||
|
<div className="rounded-[var(--radius-md)] border border-primary/40 bg-primary-soft px-4 py-2 text-sm text-text-primary">
|
||||||
|
{banner}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 xl:grid-cols-[minmax(280px,380px)_minmax(0,1fr)] gap-6 items-start">
|
||||||
|
<div className="space-y-4">
|
||||||
|
{selectedAppointment ? (
|
||||||
|
<div className="surface-card p-4 space-y-1">
|
||||||
|
<p className="text-xs uppercase tracking-wide text-text-muted">Selected patient</p>
|
||||||
|
<p className="text-lg font-semibold text-text-primary">
|
||||||
|
{selectedAppointment.patientFirstName} {selectedAppointment.patientLastName}
|
||||||
|
</p>
|
||||||
|
<p className="text-xs text-text-secondary">
|
||||||
|
Appointment purpose:{' '}
|
||||||
|
<span className="capitalize text-text-primary">{selectedAppointment.purpose}</span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="surface-card p-4 text-sm text-text-muted">
|
||||||
|
{apptsLoading ? 'Loading appointments…' : 'Select a day with at least one appointment.'}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<PastTreatmentsPanel items={history} loading={historyLoading} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-4 min-w-0">
|
||||||
|
<FdiToothChart
|
||||||
|
selected={selectedTeethSet}
|
||||||
|
onToggle={toggleTooth}
|
||||||
|
disabled={!selectedAppointment}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div className="surface-card p-4 space-y-4">
|
||||||
|
<div className="flex flex-wrap items-center justify-between gap-3">
|
||||||
|
<div>
|
||||||
|
<h3 className="text-sm font-semibold text-text-primary">Treatment records</h3>
|
||||||
|
<p className="text-xs text-text-muted mt-0.5">
|
||||||
|
Each record has its own teeth, notes, attachments, and destinations for send.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="primary"
|
||||||
|
disabled={!selectedAppointment}
|
||||||
|
onClick={() => {
|
||||||
|
const nr = newRecord();
|
||||||
|
fixActiveAfterRecordsChange([...records, nr]);
|
||||||
|
setActiveRecordId(nr.clientId);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Add record
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex flex-wrap gap-2">
|
||||||
|
{records.map((r, idx) => (
|
||||||
|
<button
|
||||||
|
key={r.clientId}
|
||||||
|
type="button"
|
||||||
|
onClick={() => setActiveRecordId(r.clientId)}
|
||||||
|
className={`
|
||||||
|
rounded-[var(--radius-md)] border px-3 py-1.5 text-sm transition-colors
|
||||||
|
focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/45
|
||||||
|
${
|
||||||
|
r.clientId === activeRecordId
|
||||||
|
? 'border-primary bg-primary-soft font-medium text-text-primary'
|
||||||
|
: 'border-border/70 text-text-secondary hover:border-border hover:bg-background-card/50'
|
||||||
|
}
|
||||||
|
`}
|
||||||
|
>
|
||||||
|
Record {idx + 1}
|
||||||
|
{r.sentAt ? ' · sent' : ''}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{activeRecord && (
|
||||||
|
<div className="space-y-4 border border-border/60 rounded-[var(--radius-md)] p-4 bg-background-secondary/30">
|
||||||
|
<label className="block text-xs font-medium text-text-secondary">
|
||||||
|
Comments
|
||||||
|
<textarea
|
||||||
|
value={activeRecord.comment}
|
||||||
|
onChange={(e) => {
|
||||||
|
const v = e.target.value;
|
||||||
|
setRecords((prev) =>
|
||||||
|
prev.map((r) =>
|
||||||
|
r.clientId === activeRecordId ? { ...r, comment: v } : r,
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
placeholder="Write clinical notes for this record…"
|
||||||
|
rows={5}
|
||||||
|
disabled={!selectedAppointment}
|
||||||
|
className="mt-1.5 w-full rounded-[var(--radius-md)] border border-border bg-background-secondary/90 text-text-primary text-sm px-3 py-2 placeholder:text-text-muted focus:outline-none focus:ring-2 focus:ring-primary/35 resize-y min-h-[120px]"
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<p className="text-xs font-medium text-text-secondary mb-2">Attachments (mock)</p>
|
||||||
|
<input
|
||||||
|
ref={attachmentInputRef}
|
||||||
|
id="treatment-record-attachments"
|
||||||
|
type="file"
|
||||||
|
multiple
|
||||||
|
disabled={!selectedAppointment}
|
||||||
|
onChange={(e) => {
|
||||||
|
addAttachments(e.target.files);
|
||||||
|
e.target.value = '';
|
||||||
|
}}
|
||||||
|
className="sr-only"
|
||||||
|
aria-label="Attach files for this treatment record"
|
||||||
|
/>
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="primary"
|
||||||
|
disabled={!selectedAppointment}
|
||||||
|
onClick={() => attachmentInputRef.current?.click()}
|
||||||
|
aria-controls="treatment-record-attachments"
|
||||||
|
>
|
||||||
|
Choose files
|
||||||
|
</Button>
|
||||||
|
{activeRecord.attachmentMetas.length > 0 && (
|
||||||
|
<ul className="mt-2 space-y-1 text-xs text-text-muted">
|
||||||
|
{activeRecord.attachmentMetas.map((f) => (
|
||||||
|
<li key={f.id} className="truncate">
|
||||||
|
{f.fileName} ({(f.sizeBytes / 1024).toFixed(1)} KB)
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<p className="text-xs font-medium text-text-secondary mb-2">
|
||||||
|
Send this record to linked organizations
|
||||||
|
</p>
|
||||||
|
<div className="flex flex-col gap-2">
|
||||||
|
{orgs.map((o) => (
|
||||||
|
<Checkbox
|
||||||
|
key={o.id}
|
||||||
|
checked={activeRecord.sendToOrganizationIds.includes(o.id)}
|
||||||
|
disabled={!o.active || !selectedAppointment || Boolean(activeRecord.sentAt)}
|
||||||
|
onChange={(checked) => {
|
||||||
|
setRecords((prev) =>
|
||||||
|
prev.map((r) => {
|
||||||
|
if (r.clientId !== activeRecordId) return r;
|
||||||
|
const next = new Set(r.sendToOrganizationIds);
|
||||||
|
if (checked) next.add(o.id);
|
||||||
|
else next.delete(o.id);
|
||||||
|
return { ...r, sendToOrganizationIds: [...next] };
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
label={`${o.name}${o.active ? '' : ' (inactive)'}`}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex flex-wrap items-center gap-3 pt-1">
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="primary"
|
||||||
|
disabled={!selectedAppointment || Boolean(activeRecord.sentAt) || sendBusyId === activeRecord.clientId}
|
||||||
|
isLoading={sendBusyId === activeRecord.clientId}
|
||||||
|
onClick={() => void handleSendRecord(activeRecord)}
|
||||||
|
>
|
||||||
|
Send this record
|
||||||
|
</Button>
|
||||||
|
{activeRecord.sentAt && (
|
||||||
|
<span className="text-xs text-text-muted">
|
||||||
|
Sent at {new Date(activeRecord.sentAt).toLocaleString()}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="flex flex-wrap gap-3 pt-2 border-t border-border/60">
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="primary"
|
||||||
|
disabled={!selectedAppointment || saveBusy}
|
||||||
|
isLoading={saveBusy}
|
||||||
|
onClick={() => void handleSaveAll()}
|
||||||
|
>
|
||||||
|
Save treatment draft
|
||||||
|
</Button>
|
||||||
|
<p className="text-xs text-text-muted self-center">
|
||||||
|
Saving stores all records locally (mock). Sending is per record and can happen after save.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
24
frontend/src/components/treatment/fdiToothMeta.ts
Normal file
24
frontend/src/components/treatment/fdiToothMeta.ts
Normal file
@@ -0,0 +1,24 @@
|
|||||||
|
import type { FdiToothId } from '@/types/treatment';
|
||||||
|
|
||||||
|
/** Upper arch: distal → mesial on each side (full occlusal layout left → right) */
|
||||||
|
export const FDI_UPPER_LEFT_TO_RIGHT: FdiToothId[] = [
|
||||||
|
'18', '17', '16', '15', '14', '13', '12', '11',
|
||||||
|
'21', '22', '23', '24', '25', '26', '27', '28',
|
||||||
|
];
|
||||||
|
|
||||||
|
/** Lower arch */
|
||||||
|
export const FDI_LOWER_LEFT_TO_RIGHT: FdiToothId[] = [
|
||||||
|
'48', '47', '46', '45', '44', '43', '42', '41',
|
||||||
|
'31', '32', '33', '34', '35', '36', '37', '38',
|
||||||
|
];
|
||||||
|
|
||||||
|
export type ToothShapeKind = 'incisor' | 'canine' | 'premolar' | 'molar';
|
||||||
|
|
||||||
|
/** Infer cartoon shape from FDI (last digit encodes tooth type within quadrant). */
|
||||||
|
export function getToothShapeKind(fdi: FdiToothId): ToothShapeKind {
|
||||||
|
const n = Number(fdi.slice(1));
|
||||||
|
if (n <= 2) return 'incisor';
|
||||||
|
if (n === 3) return 'canine';
|
||||||
|
if (n <= 5) return 'premolar';
|
||||||
|
return 'molar';
|
||||||
|
}
|
||||||
198
frontend/src/lib/mocks/treatmentMockApi.ts
Normal file
198
frontend/src/lib/mocks/treatmentMockApi.ts
Normal file
@@ -0,0 +1,198 @@
|
|||||||
|
import {
|
||||||
|
addCalendarDays,
|
||||||
|
isSameLocalCalendarDay,
|
||||||
|
startOfLocalDay,
|
||||||
|
} from '@/lib/appointmentTime';
|
||||||
|
import type {
|
||||||
|
FdiToothId,
|
||||||
|
LinkedOrganizationOption,
|
||||||
|
PastTreatment,
|
||||||
|
SaveTreatmentPayload,
|
||||||
|
SendTreatmentRecordPayload,
|
||||||
|
TreatmentAppointment,
|
||||||
|
} from '@/types/treatment';
|
||||||
|
|
||||||
|
const MOCK_DELAY_MS = 280;
|
||||||
|
|
||||||
|
function sleep(ms = MOCK_DELAY_MS) {
|
||||||
|
return new Promise<void>((resolve) => setTimeout(resolve, ms));
|
||||||
|
}
|
||||||
|
|
||||||
|
function pad2(n: number) {
|
||||||
|
return String(n).padStart(2, '0');
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Builds deterministic ids so React keys stay stable across hot reloads */
|
||||||
|
function mockApptId(dayKey: string, slotIndex: number | string) {
|
||||||
|
return `mock-appt-${dayKey}-${slotIndex}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function buildSlotsForDay(day: Date, userId: string): TreatmentAppointment[] {
|
||||||
|
const dayStart = startOfLocalDay(day);
|
||||||
|
const y = dayStart.getFullYear();
|
||||||
|
const m = dayStart.getMonth();
|
||||||
|
const d = dayStart.getDate();
|
||||||
|
const dayKey = `${y}-${pad2(m + 1)}-${pad2(d)}`;
|
||||||
|
|
||||||
|
const base: Omit<TreatmentAppointment, 'id' | 'startAt' | 'endAt'>[] = [
|
||||||
|
{
|
||||||
|
patientId: 'pat-alice',
|
||||||
|
patientFirstName: 'Alice',
|
||||||
|
patientLastName: 'Moradi',
|
||||||
|
providerUserId: userId,
|
||||||
|
purpose: 'consultation',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
patientId: 'pat-babak',
|
||||||
|
patientFirstName: 'Babak',
|
||||||
|
patientLastName: 'Karimi',
|
||||||
|
providerUserId: userId,
|
||||||
|
purpose: 'filling',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
patientId: 'pat-sara',
|
||||||
|
patientFirstName: 'Sara',
|
||||||
|
patientLastName: 'Hosseini',
|
||||||
|
providerUserId: userId,
|
||||||
|
purpose: 'endo',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const slots: TreatmentAppointment[] = [];
|
||||||
|
const times = [
|
||||||
|
[9, 0, 9, 45],
|
||||||
|
[11, 15, 12, 0],
|
||||||
|
[14, 30, 15, 30],
|
||||||
|
];
|
||||||
|
|
||||||
|
times.forEach(([h1, m1, h2, m2], i) => {
|
||||||
|
const baseSlot = base[i % base.length];
|
||||||
|
const startAt = new Date(y, m, d, h1, m1, 0, 0).toISOString();
|
||||||
|
const endAt = new Date(y, m, d, h2, m2, 0, 0).toISOString();
|
||||||
|
slots.push({
|
||||||
|
id: mockApptId(dayKey, i),
|
||||||
|
...baseSlot,
|
||||||
|
startAt,
|
||||||
|
endAt,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
const today = new Date();
|
||||||
|
if (isSameLocalCalendarDay(day, today)) {
|
||||||
|
const now = today.getTime();
|
||||||
|
const start = new Date(now - 12 * 60 * 1000);
|
||||||
|
const end = new Date(now + 48 * 60 * 1000);
|
||||||
|
slots.unshift({
|
||||||
|
id: mockApptId(dayKey, 'now'),
|
||||||
|
patientId: 'pat-hesam',
|
||||||
|
patientFirstName: 'Hesam',
|
||||||
|
patientLastName: 'Aghaie',
|
||||||
|
providerUserId: userId,
|
||||||
|
startAt: start.toISOString(),
|
||||||
|
endAt: end.toISOString(),
|
||||||
|
purpose: 'visit',
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
return slots.sort((a, b) => new Date(a.startAt).getTime() - new Date(b.startAt).getTime());
|
||||||
|
}
|
||||||
|
|
||||||
|
const MOCK_HISTORY: Record<string, PastTreatment[]> = {
|
||||||
|
'pat-hesam': [
|
||||||
|
{
|
||||||
|
id: 'pt-h-1',
|
||||||
|
patientId: 'pat-hesam',
|
||||||
|
title: 'Root canal 45',
|
||||||
|
treatmentAt: new Date(2026, 8, 12).toISOString(),
|
||||||
|
status: 'completed',
|
||||||
|
records: [
|
||||||
|
{
|
||||||
|
id: 'ptr-1',
|
||||||
|
teeth: ['45'] as FdiToothId[],
|
||||||
|
notes: 'Instrumented and temporized.',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
documents: [
|
||||||
|
{
|
||||||
|
id: 'doc-1',
|
||||||
|
fileName: 'periapical-45.png',
|
||||||
|
mimeType: 'image/png',
|
||||||
|
sizeBytes: 842_120,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'doc-2',
|
||||||
|
fileName: 'consent-signed.pdf',
|
||||||
|
mimeType: 'application/pdf',
|
||||||
|
sizeBytes: 312_000,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'pt-h-2',
|
||||||
|
patientId: 'pat-hesam',
|
||||||
|
title: 'Filling 14, 15',
|
||||||
|
treatmentAt: new Date(2025, 9, 10).toISOString(),
|
||||||
|
status: 'completed',
|
||||||
|
records: [
|
||||||
|
{
|
||||||
|
id: 'ptr-2',
|
||||||
|
teeth: ['14', '15'] as FdiToothId[],
|
||||||
|
notes: 'Composite restoration.',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
documents: [
|
||||||
|
{
|
||||||
|
id: 'doc-3',
|
||||||
|
fileName: 'notes.txt',
|
||||||
|
mimeType: 'text/plain',
|
||||||
|
sizeBytes: 420,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
'pat-alice': [
|
||||||
|
{
|
||||||
|
id: 'pt-a-1',
|
||||||
|
patientId: 'pat-alice',
|
||||||
|
title: 'Hygiene visit',
|
||||||
|
treatmentAt: addCalendarDays(new Date(), -21).toISOString(),
|
||||||
|
status: 'completed',
|
||||||
|
records: [{ id: 'ptr-a', teeth: [], notes: 'Scale & polish.' }],
|
||||||
|
documents: [],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
||||||
|
const MOCK_ORGS: LinkedOrganizationOption[] = [
|
||||||
|
{ id: 'org-lab-north', name: 'North Dental Lab', active: true },
|
||||||
|
{ id: 'org-lab-smile', name: 'Smile Ceramics', active: true },
|
||||||
|
{ id: 'org-lab-old', name: 'Legacy Lab (inactive)', active: false },
|
||||||
|
];
|
||||||
|
|
||||||
|
export async function fetchMyAppointmentsForDay(
|
||||||
|
userId: string,
|
||||||
|
day: Date,
|
||||||
|
): Promise<TreatmentAppointment[]> {
|
||||||
|
await sleep();
|
||||||
|
return buildSlotsForDay(day, userId);
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function fetchPastTreatments(patientId: string): Promise<PastTreatment[]> {
|
||||||
|
await sleep();
|
||||||
|
return MOCK_HISTORY[patientId] ?? [];
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function fetchLinkedOrganizations(): Promise<LinkedOrganizationOption[]> {
|
||||||
|
await sleep(180);
|
||||||
|
return MOCK_ORGS;
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function saveTreatmentDraft(_payload: SaveTreatmentPayload): Promise<{ ok: true }> {
|
||||||
|
await sleep();
|
||||||
|
return { ok: true };
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function sendTreatmentRecord(_payload: SendTreatmentRecordPayload): Promise<{ ok: true }> {
|
||||||
|
await sleep();
|
||||||
|
return { ok: true };
|
||||||
|
}
|
||||||
25
frontend/src/lib/treatmentSelection.ts
Normal file
25
frontend/src/lib/treatmentSelection.ts
Normal file
@@ -0,0 +1,25 @@
|
|||||||
|
import { isSameLocalCalendarDay } from '@/lib/appointmentTime';
|
||||||
|
import type { TreatmentAppointment } from '@/types/treatment';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* For the selected calendar day: if it is today, pick the appointment whose time range contains now;
|
||||||
|
* otherwise pick the first appointment of that day. Returns null when there are no appointments.
|
||||||
|
*/
|
||||||
|
export function pickAutoAppointment(
|
||||||
|
appointments: TreatmentAppointment[],
|
||||||
|
selectedDay: Date,
|
||||||
|
): string | null {
|
||||||
|
if (appointments.length === 0) return null;
|
||||||
|
|
||||||
|
const now = new Date();
|
||||||
|
if (isSameLocalCalendarDay(selectedDay, now)) {
|
||||||
|
const t = now.getTime();
|
||||||
|
for (const a of appointments) {
|
||||||
|
const s = new Date(a.startAt).getTime();
|
||||||
|
const e = new Date(a.endAt).getTime();
|
||||||
|
if (t >= s && t <= e) return a.id;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return appointments[0].id;
|
||||||
|
}
|
||||||
@@ -80,3 +80,10 @@ export function canAccessAppointmentsSection(org: Organization | null): boolean
|
|||||||
hasPermission(org, 'TAB_TREATMENT_EDIT')
|
hasPermission(org, 'TAB_TREATMENT_EDIT')
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/** Treatment composer, scheduling columns, and saving clinical workflows */
|
||||||
|
export function canEditTreatment(org: Organization | null): boolean {
|
||||||
|
if (!org) return false;
|
||||||
|
if (org.isOwner) return true;
|
||||||
|
return hasPermission(org, 'TAB_TREATMENT_EDIT');
|
||||||
|
}
|
||||||
|
|||||||
100
frontend/src/types/treatment.ts
Normal file
100
frontend/src/types/treatment.ts
Normal file
@@ -0,0 +1,100 @@
|
|||||||
|
/** Permanent dentition FDI ids (11–48), stored as two-digit strings */
|
||||||
|
export type FdiToothId =
|
||||||
|
| '11'
|
||||||
|
| '12'
|
||||||
|
| '13'
|
||||||
|
| '14'
|
||||||
|
| '15'
|
||||||
|
| '16'
|
||||||
|
| '17'
|
||||||
|
| '18'
|
||||||
|
| '21'
|
||||||
|
| '22'
|
||||||
|
| '23'
|
||||||
|
| '24'
|
||||||
|
| '25'
|
||||||
|
| '26'
|
||||||
|
| '27'
|
||||||
|
| '28'
|
||||||
|
| '31'
|
||||||
|
| '32'
|
||||||
|
| '33'
|
||||||
|
| '34'
|
||||||
|
| '35'
|
||||||
|
| '36'
|
||||||
|
| '37'
|
||||||
|
| '38'
|
||||||
|
| '41'
|
||||||
|
| '42'
|
||||||
|
| '43'
|
||||||
|
| '44'
|
||||||
|
| '45'
|
||||||
|
| '46'
|
||||||
|
| '47'
|
||||||
|
| '48';
|
||||||
|
|
||||||
|
export interface TreatmentAppointment {
|
||||||
|
id: string;
|
||||||
|
patientId: string;
|
||||||
|
patientFirstName: string;
|
||||||
|
patientLastName: string;
|
||||||
|
providerUserId: string;
|
||||||
|
startAt: string;
|
||||||
|
endAt: string;
|
||||||
|
purpose: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface TreatmentAttachmentMeta {
|
||||||
|
id: string;
|
||||||
|
fileName: string;
|
||||||
|
mimeType: string;
|
||||||
|
sizeBytes: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface PastTreatmentRecord {
|
||||||
|
id: string;
|
||||||
|
teeth: FdiToothId[];
|
||||||
|
notes?: string | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface PastTreatment {
|
||||||
|
id: string;
|
||||||
|
patientId: string;
|
||||||
|
title: string;
|
||||||
|
treatmentAt: string;
|
||||||
|
status: string;
|
||||||
|
records: PastTreatmentRecord[];
|
||||||
|
documents: TreatmentAttachmentMeta[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface LinkedOrganizationOption {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
active: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface TreatmentRecordDraft {
|
||||||
|
clientId: string;
|
||||||
|
teeth: FdiToothId[];
|
||||||
|
comment: string;
|
||||||
|
attachmentMetas: TreatmentAttachmentMeta[];
|
||||||
|
/** Organizations selected for sending this record (mock only until API exists) */
|
||||||
|
sendToOrganizationIds: string[];
|
||||||
|
sentAt?: string | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Payload for persisting a draft (mock API); omits ephemeral client-only fields */
|
||||||
|
export type SavedTreatmentRecordPayload = Omit<TreatmentRecordDraft, 'clientId' | 'sentAt'>;
|
||||||
|
|
||||||
|
export interface SaveTreatmentPayload {
|
||||||
|
appointmentId: string;
|
||||||
|
patientId: string;
|
||||||
|
records: SavedTreatmentRecordPayload[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface SendTreatmentRecordPayload {
|
||||||
|
appointmentId: string;
|
||||||
|
patientId: string;
|
||||||
|
recordClientId: string;
|
||||||
|
organizationIds: string[];
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user