673 lines
27 KiB
TypeScript
673 lines
27 KiB
TypeScript
'use client';
|
|
|
|
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
|
import { AppointmentsStrip } from '@/components/ui/treatment/AppointmentsStrip';
|
|
import { FdiToothChart } from '@/components/ui/treatment/FdiToothChart';
|
|
import { PastTreatmentsPanel } from '@/components/ui/treatment/PastTreatmentsPanel';
|
|
import { Checkbox } from '@/components/ui/shared/Checkbox';
|
|
import { Button } from '@/components/ui/shared/Button';
|
|
import { Dropdown } from '@/components/ui/shared/Dropdown';
|
|
import { SearchBar } from '@/components/ui/shared/SearchBar';
|
|
import { Toast } from '@/components/ui/shared/Toast';
|
|
import { compareLocalDayStart, isSameLocalCalendarDay, startOfLocalDay } from '@/components/appointments/appointmentTime';
|
|
import {
|
|
fetchLinkedOrganizations,
|
|
fetchMyAppointmentsForDay,
|
|
fetchPastTreatments,
|
|
saveTreatmentDraft,
|
|
sendTreatmentRecord,
|
|
} from '@/lib/mocks/treatmentMockApi';
|
|
import { pickAutoAppointment } from '@/components/shared/treatmentSelection';
|
|
import { canEditTreatment } from '@/components/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)}`,
|
|
treatmentType: 'consultation',
|
|
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 todayStart = 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 [organizationSearch, setOrganizationSearch] = useState('');
|
|
const [recentOrganizationIds, setRecentOrganizationIds] = useState<string[]>([]);
|
|
const [reviewTreatment, setReviewTreatment] = useState<PastTreatment | null>(null);
|
|
|
|
const selectedAppointment = useMemo(
|
|
() => appointments.find((a) => a.id === selectedAppointmentId) ?? null,
|
|
[appointments, selectedAppointmentId],
|
|
);
|
|
|
|
const isViewingPastDay = useMemo(
|
|
() => compareLocalDayStart(selectedDay, todayStart) < 0,
|
|
[selectedDay, todayStart],
|
|
);
|
|
|
|
const canEditTreatmentForDay = Boolean(selectedAppointment) && !isViewingPastDay;
|
|
|
|
const activeRecord = useMemo(
|
|
() => records.find((r) => r.clientId === activeRecordId) ?? records[0],
|
|
[records, activeRecordId],
|
|
);
|
|
|
|
const selectedTeethSet = useMemo(() => new Set(activeRecord.teeth), [activeRecord.teeth]);
|
|
const activeLinkedOrganizations = useMemo(() => orgs.filter((o) => o.active), [orgs]);
|
|
const filteredOrganizations = useMemo(() => {
|
|
const q = organizationSearch.trim().toLowerCase();
|
|
if (!q) return activeLinkedOrganizations;
|
|
return activeLinkedOrganizations.filter((o) => o.name.toLowerCase().includes(q));
|
|
}, [organizationSearch, activeLinkedOrganizations]);
|
|
const recentOrganizations = useMemo(() => {
|
|
if (recentOrganizationIds.length === 0) return [];
|
|
const recentSet = new Set(recentOrganizationIds);
|
|
return activeLinkedOrganizations
|
|
.filter((o) => recentSet.has(o.id))
|
|
.sort((a, b) => recentOrganizationIds.indexOf(a.id) - recentOrganizationIds.indexOf(b.id))
|
|
.slice(0, 3);
|
|
}, [recentOrganizationIds, activeLinkedOrganizations]);
|
|
const currentDraftPreview = useMemo<PastTreatment | null>(() => {
|
|
if (!selectedAppointment) return null;
|
|
return {
|
|
id: 'current-draft',
|
|
patientId: selectedAppointment.patientId,
|
|
title: `Current draft for ${selectedAppointment.patientFirstName} ${selectedAppointment.patientLastName}`,
|
|
treatmentAt: new Date().toISOString(),
|
|
status: 'draft',
|
|
records: records.map((r, idx) => ({
|
|
id: r.clientId || `draft-${idx + 1}`,
|
|
treatmentType: r.treatmentType,
|
|
teeth: r.teeth,
|
|
notes: r.comment || null,
|
|
})),
|
|
documents: records.flatMap((r) => r.attachmentMetas),
|
|
};
|
|
}, [records, selectedAppointment]);
|
|
|
|
const treatmentTypeTextColor = useMemo(() => {
|
|
const map: Record<TreatmentRecordDraft['treatmentType'], string> = {
|
|
consultation: '#ddd6fe',
|
|
filling: '#fed7aa',
|
|
endo: '#fecaca',
|
|
visit: '#bae6fd',
|
|
hygiene: '#d9f99d',
|
|
};
|
|
return map[activeRecord.treatmentType];
|
|
}, [activeRecord.treatmentType]);
|
|
|
|
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);
|
|
setOrganizationSearch('');
|
|
setReviewTreatment(null);
|
|
}, [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,
|
|
),
|
|
);
|
|
setRecentOrganizationIds((prev) => {
|
|
const next = [...record.sendToOrganizationIds.filter((id) => id && !prev.includes(id)), ...prev];
|
|
return next.slice(0, 10);
|
|
});
|
|
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="relative space-y-6 pb-24">
|
|
<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}
|
|
appointments={appointments}
|
|
selectedAppointmentId={selectedAppointmentId}
|
|
onSelectAppointment={onPickAppointment}
|
|
loading={apptsLoading}
|
|
/>
|
|
|
|
{isViewingPastDay && (
|
|
<p className="text-sm text-text-secondary rounded-[var(--radius-md)] border border-border/60 bg-background-secondary/50 px-3 py-2">
|
|
Past days are view-only. You can review appointments and history, but treatment records
|
|
cannot be added or changed.
|
|
</p>
|
|
)}
|
|
|
|
<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}
|
|
selectedTreatmentId={reviewTreatment?.id ?? null}
|
|
onSelectTreatment={setReviewTreatment}
|
|
/>
|
|
<div className="surface-card p-4 space-y-3">
|
|
<div className="flex items-center justify-between gap-2">
|
|
<h3 className="text-sm font-semibold text-text-primary">Treatment review</h3>
|
|
<Button
|
|
type="button"
|
|
variant="primary"
|
|
disabled={!selectedAppointment}
|
|
onClick={() => setReviewTreatment(currentDraftPreview)}
|
|
>
|
|
Preview current treatment
|
|
</Button>
|
|
</div>
|
|
{!reviewTreatment && (
|
|
<p className="text-sm text-text-muted">
|
|
Select a treatment from history, or preview the current draft.
|
|
</p>
|
|
)}
|
|
{reviewTreatment && (
|
|
<div className="border border-border/70 rounded-[var(--radius-md)] p-3 bg-background-secondary/40 space-y-2">
|
|
<div className="flex items-start justify-between gap-2">
|
|
<p className="text-sm font-medium text-text-primary">{reviewTreatment.title}</p>
|
|
<span className="text-xs text-text-muted tabular-nums">
|
|
{new Date(reviewTreatment.treatmentAt).toLocaleDateString()}
|
|
</span>
|
|
</div>
|
|
<p className="text-xs text-text-secondary capitalize">Status: {reviewTreatment.status}</p>
|
|
<div className="space-y-2">
|
|
{reviewTreatment.records.map((r, idx) => (
|
|
<div key={r.id} className="rounded-[var(--radius-sm)] border border-border/60 px-2.5 py-2">
|
|
<p className="text-xs text-text-primary font-medium">Record {idx + 1}</p>
|
|
<p className="text-xs text-text-secondary capitalize mt-1">
|
|
Type: {r.treatmentType}
|
|
</p>
|
|
<p className="text-xs text-text-secondary">
|
|
Teeth: {r.teeth.length ? [...r.teeth].sort().join(', ') : 'None selected'}
|
|
</p>
|
|
{r.notes && <p className="text-xs text-text-muted mt-1">Notes: {r.notes}</p>}
|
|
</div>
|
|
))}
|
|
</div>
|
|
<p className="text-xs text-text-muted">
|
|
Attachments: {reviewTreatment.documents.length}
|
|
</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-4 min-w-0">
|
|
<FdiToothChart
|
|
selected={selectedTeethSet}
|
|
onToggle={toggleTooth}
|
|
disabled={!canEditTreatmentForDay}
|
|
/>
|
|
|
|
<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={!canEditTreatmentForDay}
|
|
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={!canEditTreatmentForDay}
|
|
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>
|
|
<Dropdown
|
|
label="Treatment type"
|
|
value={activeRecord.treatmentType}
|
|
onChange={(e) => {
|
|
const nextType = e.target.value as TreatmentRecordDraft['treatmentType'];
|
|
setRecords((prev) =>
|
|
prev.map((r) =>
|
|
r.clientId === activeRecordId ? { ...r, treatmentType: nextType } : r,
|
|
),
|
|
);
|
|
}}
|
|
disabled={!canEditTreatmentForDay}
|
|
className="capitalize"
|
|
style={{ color: treatmentTypeTextColor }}
|
|
>
|
|
<option value="consultation" style={{ color: '#ddd6fe', backgroundColor: '#14253d' }} className="capitalize">consultation</option>
|
|
<option value="filling" style={{ color: '#fed7aa', backgroundColor: '#14253d' }} className="capitalize">filling</option>
|
|
<option value="endo" style={{ color: '#fecaca', backgroundColor: '#14253d' }} className="capitalize">endo</option>
|
|
<option value="visit" style={{ color: '#bae6fd', backgroundColor: '#14253d' }} className="capitalize">visit</option>
|
|
<option value="hygiene" style={{ color: '#d9f99d', backgroundColor: '#14253d' }} className="capitalize">hygiene</option>
|
|
</Dropdown>
|
|
</div>
|
|
|
|
<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={!canEditTreatmentForDay}
|
|
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={!canEditTreatmentForDay}
|
|
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="space-y-2 mb-2">
|
|
<SearchBar
|
|
value={organizationSearch}
|
|
onChange={setOrganizationSearch}
|
|
placeholder="Search active organizations..."
|
|
/>
|
|
{recentOrganizations.length > 0 && (
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
<span className="text-xs text-text-muted">Recent:</span>
|
|
{recentOrganizations.map((o) => (
|
|
<button
|
|
key={o.id}
|
|
type="button"
|
|
onClick={() => {
|
|
setRecords((prev) =>
|
|
prev.map((r) => {
|
|
if (r.clientId !== activeRecordId || r.sentAt) return r;
|
|
if (r.sendToOrganizationIds.includes(o.id)) return r;
|
|
return { ...r, sendToOrganizationIds: [...r.sendToOrganizationIds, o.id] };
|
|
}),
|
|
);
|
|
}}
|
|
className="text-xs rounded-[var(--radius-sm)] border border-border/70 px-2 py-1 text-text-secondary hover:text-text-primary hover:border-border focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/35"
|
|
>
|
|
{o.name}
|
|
</button>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className="flex flex-col gap-2">
|
|
{filteredOrganizations.map((o) => (
|
|
<Checkbox
|
|
key={o.id}
|
|
checked={activeRecord.sendToOrganizationIds.includes(o.id)}
|
|
disabled={!canEditTreatmentForDay || 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)'}`}
|
|
/>
|
|
))}
|
|
{filteredOrganizations.length === 0 && (
|
|
<p className="text-xs text-text-muted">No active organization matches your search.</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex flex-wrap items-center gap-3 pt-1">
|
|
<Button
|
|
type="button"
|
|
variant="primary"
|
|
disabled={!canEditTreatmentForDay || 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={!canEditTreatmentForDay || 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>
|
|
|
|
{banner && (
|
|
<div className="fixed bottom-4 left-0 right-0 z-[70] px-4 pointer-events-none">
|
|
<div className="pointer-events-auto w-full">
|
|
<Toast variant="success">{banner}</Toast>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|