hamedandClaude Opus 5
1f4f7e6927
The day-offset field was a bare input inside `.field`, and `.field` is itself the 40px bordered input box — so the number rendered as plain text with no border and nothing said it could be edited. It now uses the shared Input in numeric mode, which also normalises Persian digits on the way in. Turning the switch off deleted the protocol, its steps and its staff list on a single click with no confirmation. It now asks first, and says what will be lost and what will not: open treatment cases are untouched. A failed read left `protocol` null, which the tab rendered as a switch in the off position — telling the manager this service is single-session when in truth the request had simply failed. That state now shows an error with a retry. Both icon-only buttons were hand-padded down to 18px; the runtime probe flagged them in all four views. They use `.mini-btn`, which the design system already sizes to 32px and to 44px on touch. The probe now reports one short control on this page, and the same one on tabs this change never touched. The save button sat at the bottom of a long form, so saving on a phone meant scrolling past everything. `.save-bar` was already in the stylesheet for exactly this; it now also states what is about to be saved, and why the button is disabled when no staff are selected. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
406 lines
16 KiB
TypeScript
406 lines
16 KiB
TypeScript
import { useEffect, useState } from 'react';
|
|
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
|
import { toast } from 'sonner';
|
|
import { PlusIcon, TrashIcon, XMarkIcon, ExclamationTriangleIcon } from '@heroicons/react/24/outline';
|
|
import Switch from './ui/Switch';
|
|
import SearchableSelect from './ui/SearchableSelect';
|
|
import Input from './ui/Input';
|
|
import ConfirmDialog from './ui/ConfirmDialog';
|
|
import { api, ApiError, type ApiResponse } from '../lib/api';
|
|
|
|
interface ProtocolStep {
|
|
step_number: number;
|
|
offset_days: number;
|
|
}
|
|
|
|
interface ProtocolStaff {
|
|
uuid: string;
|
|
name: string;
|
|
}
|
|
|
|
interface TreatmentProtocol {
|
|
uuid: string;
|
|
/** آیا هیچ منبعی این سرویس را ارائه میدهد؛ نبودش رزرو را قفل نمیکند ولی باید دیده شود. */
|
|
service_has_resources?: boolean;
|
|
active: boolean;
|
|
total_sessions: number;
|
|
supervisor: { uuid: string; name: string } | null;
|
|
steps: ProtocolStep[];
|
|
staff: ProtocolStaff[];
|
|
}
|
|
|
|
interface StaffRow {
|
|
uuid: string;
|
|
full_name: string;
|
|
active?: boolean;
|
|
}
|
|
|
|
interface DoctorRow {
|
|
uuid: string;
|
|
name: string;
|
|
}
|
|
|
|
/** پیشفرضِ روشنکردن سوییچ: کوتاهترین دورهای که معنی دارد. */
|
|
const DEFAULT_STEPS: ProtocolStep[] = [
|
|
{ step_number: 1, offset_days: 0 },
|
|
{ step_number: 2, offset_days: 30 },
|
|
];
|
|
|
|
const MIN_STEPS = 2;
|
|
|
|
/** خط جداکنندهٔ بخشها — سه بخشِ مستقل نباید بههم چسبیده به نظر برسند. */
|
|
function Divider() {
|
|
return <hr style={{ border: 0, borderTop: '1px solid var(--border)', margin: 0 }} />;
|
|
}
|
|
|
|
/**
|
|
* «طول درمان» یک سرویس.
|
|
*
|
|
* وجودِ پروتکل خودش سوییچ است — سرویس بدون پروتکل تکجلسهای است — پس روشنکردن یعنی
|
|
* ساختن و خاموشکردن یعنی حذف. چون خاموشکردن برگشتناپذیر است و گامها و پرسنل را با
|
|
* خودش میبرد، با تأیید صریح انجام میشود نه با یک کلیک.
|
|
*
|
|
* فاصلهٔ هر گام از **جلسهٔ قبل** است، نه از شروع دوره، چون فاصلهٔ درمان به آخرین جلسه
|
|
* گره خورده نه به روز باز شدن پرونده.
|
|
*/
|
|
export default function TreatmentProtocolTab({ serviceUuid, canEdit }: {
|
|
serviceUuid: string;
|
|
canEdit: boolean;
|
|
}) {
|
|
const qc = useQueryClient();
|
|
|
|
const { data, isLoading, isError, refetch } = useQuery({
|
|
queryKey: ['treatment-protocol', serviceUuid],
|
|
queryFn: () => api.get<ApiResponse<TreatmentProtocol | null>>(
|
|
`/api/v1/service-item/${serviceUuid}/treatment-protocol`,
|
|
),
|
|
});
|
|
|
|
const { data: staffData } = useQuery({
|
|
queryKey: ['staff-list-for-protocol'],
|
|
queryFn: () => api.get<ApiResponse<StaffRow[]>>('/api/v1/staff'),
|
|
staleTime: 60_000,
|
|
});
|
|
|
|
const { data: doctorData } = useQuery({
|
|
queryKey: ['my-clinic-doctors'],
|
|
queryFn: () => api.get<ApiResponse<{ data: DoctorRow[] }>>('/api/v1/my/clinic-doctors'),
|
|
staleTime: 60_000,
|
|
});
|
|
|
|
const protocol = data?.data ?? null;
|
|
|
|
const [enabled, setEnabled] = useState(false);
|
|
const [steps, setSteps] = useState<ProtocolStep[]>(DEFAULT_STEPS);
|
|
const [staffUuids, setStaffUuids] = useState<string[]>([]);
|
|
const [supervisor, setSupervisor] = useState<string | null>(null);
|
|
const [confirmOff, setConfirmOff] = useState(false);
|
|
|
|
useEffect(() => {
|
|
setEnabled(protocol !== null);
|
|
setSteps(protocol?.steps?.length ? protocol.steps : DEFAULT_STEPS);
|
|
setStaffUuids(protocol?.staff?.map((s) => s.uuid) ?? []);
|
|
setSupervisor(protocol?.supervisor?.uuid ?? null);
|
|
}, [protocol]);
|
|
|
|
const staffOptions = (staffData?.data ?? [])
|
|
.filter((s) => s.active !== false)
|
|
.map((s) => ({ value: s.uuid, label: s.full_name }));
|
|
|
|
const doctorOptions = (doctorData?.data?.data ?? []).map((d) => ({ value: d.uuid, label: d.name }));
|
|
|
|
const save = useMutation({
|
|
mutationFn: () => api.put<ApiResponse<TreatmentProtocol>>(
|
|
`/api/v1/service-item/${serviceUuid}/treatment-protocol`,
|
|
{
|
|
steps: steps.map((s, i) => ({ step_number: i + 1, offset_days: s.offset_days })),
|
|
staff_uuids: staffUuids,
|
|
supervisor_doctor_uuid: supervisor,
|
|
},
|
|
),
|
|
onSuccess: () => {
|
|
toast.success('طول درمان ذخیره شد');
|
|
qc.invalidateQueries({ queryKey: ['treatment-protocol', serviceUuid] });
|
|
},
|
|
onError: (e) => toast.error(e instanceof ApiError ? e.message : 'ذخیرهٔ طول درمان ناموفق بود'),
|
|
});
|
|
|
|
const remove = useMutation({
|
|
mutationFn: () => api.delete<ApiResponse<null>>(`/api/v1/service-item/${serviceUuid}/treatment-protocol`),
|
|
onSuccess: () => {
|
|
toast.success('طول درمان خاموش شد');
|
|
setConfirmOff(false);
|
|
qc.invalidateQueries({ queryKey: ['treatment-protocol', serviceUuid] });
|
|
},
|
|
onError: (e) => toast.error(e instanceof ApiError ? e.message : 'خاموشکردن ناموفق بود'),
|
|
});
|
|
|
|
/**
|
|
* روشنکردن بیخطر است و فوری اعمال میشود؛ خاموشکردن پروتکل را با همهٔ گامها و
|
|
* پرسنلش پاک میکند، پس تأیید میخواهد.
|
|
*/
|
|
const toggle = (on: boolean) => {
|
|
if (on) {
|
|
setEnabled(true);
|
|
return;
|
|
}
|
|
|
|
if (protocol === null) {
|
|
setEnabled(false);
|
|
return;
|
|
}
|
|
|
|
setConfirmOff(true);
|
|
};
|
|
|
|
const setOffset = (index: number, value: number) => {
|
|
setSteps((prev) => prev.map((s, i) => (i === index ? { ...s, offset_days: value } : s)));
|
|
};
|
|
|
|
const addStep = () => {
|
|
setSteps((prev) => [
|
|
...prev,
|
|
{ step_number: prev.length + 1, offset_days: prev[prev.length - 1]?.offset_days || 30 },
|
|
]);
|
|
};
|
|
|
|
const removeStep = (index: number) => {
|
|
setSteps((prev) => (prev.length <= MIN_STEPS ? prev : prev.filter((_, i) => i !== index)));
|
|
};
|
|
|
|
const addStaff = (uuid: string | number | null) => {
|
|
const id = uuid === null ? '' : String(uuid);
|
|
if (id && !staffUuids.includes(id)) setStaffUuids((prev) => [...prev, id]);
|
|
};
|
|
|
|
if (isLoading) {
|
|
return <div className="card card-pad" style={{ fontSize: 13, color: 'var(--text-3)' }}>در حال بارگذاری...</div>;
|
|
}
|
|
|
|
/**
|
|
* بدون این، شکستِ کوئری `protocol = null` میداد و صفحه سوییچِ خاموش نشان میداد —
|
|
* یعنی به مدیر میگفت این سرویس تکجلسهای است، در حالی که فقط خواندن شکست خورده.
|
|
*/
|
|
if (isError) {
|
|
return (
|
|
<div className="card card-pad" style={{ display: 'grid', gap: 10, justifyItems: 'start' }}>
|
|
<strong style={{ fontSize: 13.5 }}>طول درمان این سرویس خوانده نشد</strong>
|
|
<span style={{ fontSize: 12.5, color: 'var(--text-3)' }}>
|
|
تا وقتی خطا برطرف نشده، وضعیت واقعی این سرویس معلوم نیست.
|
|
</span>
|
|
<button type="button" className="btn secondary sm" onClick={() => refetch()}>
|
|
تلاش دوباره
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const dirty = enabled && staffUuids.length > 0;
|
|
|
|
return (
|
|
<>
|
|
<div className="card card-pad" style={{ display: 'grid', gap: 18 }}>
|
|
<Switch
|
|
checked={enabled}
|
|
onChange={toggle}
|
|
disabled={!canEdit}
|
|
label="طول درمان"
|
|
hint="سرویسهایی که در چند جلسه انجام میشوند — لیزر، بوتاکس، مزوتراپی. خاموش یعنی تکجلسهای."
|
|
/>
|
|
|
|
{enabled && protocol?.service_has_resources === false && (
|
|
<div
|
|
style={{
|
|
display: 'flex', gap: 10, padding: '12px 14px',
|
|
background: 'var(--warning-bg)', borderRadius: 'var(--r-sm)',
|
|
}}
|
|
>
|
|
<ExclamationTriangleIcon style={{ width: 18, height: 18, color: 'var(--warning)', flexShrink: 0 }} />
|
|
<div style={{ display: 'grid', gap: 4 }}>
|
|
<strong style={{ fontSize: 13 }}>هیچ دستگاهی به این سرویس وصل نیست</strong>
|
|
<span style={{ fontSize: 12.5, color: 'var(--text-2)', lineHeight: 1.9 }}>
|
|
رزرو قفل نمیشود، ولی منشی میتواند این سرویس را روی هر منبعی ثبت کند و اپراتور فرم
|
|
دستگاه درست را نمیبیند. در «منابع» مشخص کنید کدام دستگاهها این سرویس را میدهند.
|
|
</span>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{enabled && (
|
|
<>
|
|
<Divider />
|
|
|
|
<section style={{ display: 'grid', gap: 12 }}>
|
|
<div>
|
|
<h3 className="section-title" style={{ margin: 0, fontSize: 15 }}>
|
|
جلسات دوره{' '}
|
|
<span style={{ color: 'var(--text-3)', fontWeight: 400, fontSize: 13 }}>
|
|
({steps.length} جلسه)
|
|
</span>
|
|
</h3>
|
|
<p style={{ margin: '6px 0 0', fontSize: 12.5, color: 'var(--text-3)', lineHeight: 1.9 }}>
|
|
فاصلهٔ هر جلسه از <b>جلسهٔ قبل</b> حساب میشود، نه از شروع دوره. اگر بیمار دیر بیاید،
|
|
بقیهٔ دوره هم جابهجا میشود.
|
|
</p>
|
|
</div>
|
|
|
|
{steps.map((step, index) => (
|
|
<div
|
|
key={index}
|
|
style={{
|
|
display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap',
|
|
paddingBottom: 10,
|
|
borderBottom: index < steps.length - 1 ? '1px dashed var(--border)' : 'none',
|
|
}}
|
|
>
|
|
<span style={{ minWidth: 68, fontSize: 13, fontWeight: 600 }}>جلسهٔ {index + 1}</span>
|
|
|
|
{index === 0 ? (
|
|
<span style={{ fontSize: 12.5, color: 'var(--text-3)', flex: 1, minWidth: 180 }}>
|
|
شروع دوره — همان روز اولین نوبت
|
|
</span>
|
|
) : (
|
|
<>
|
|
<Input
|
|
numeric
|
|
value={String(step.offset_days)}
|
|
disabled={!canEdit}
|
|
onChange={(e) => setOffset(index, Number(e.target.value || 0))}
|
|
aria-label={`فاصلهٔ جلسهٔ ${index + 1} از جلسهٔ قبل به روز`}
|
|
style={{ width: 96 }}
|
|
/>
|
|
<span style={{ fontSize: 12.5, color: 'var(--text-3)', flex: 1, minWidth: 140 }}>
|
|
روز بعد از جلسهٔ قبل
|
|
</span>
|
|
</>
|
|
)}
|
|
|
|
{canEdit && index > 0 && (
|
|
<button
|
|
type="button"
|
|
className="mini-btn danger"
|
|
onClick={() => removeStep(index)}
|
|
disabled={steps.length <= MIN_STEPS}
|
|
title={steps.length <= MIN_STEPS ? 'دوره حداقل دو جلسه دارد' : 'حذف این جلسه'}
|
|
aria-label={`حذف جلسهٔ ${index + 1}`}
|
|
>
|
|
<TrashIcon style={{ width: 16, height: 16 }} />
|
|
</button>
|
|
)}
|
|
</div>
|
|
))}
|
|
|
|
{canEdit && (
|
|
<button type="button" className="btn secondary sm" onClick={addStep} style={{ justifySelf: 'start' }}>
|
|
<PlusIcon style={{ width: 16, height: 16 }} /> افزودن جلسه
|
|
</button>
|
|
)}
|
|
</section>
|
|
|
|
<Divider />
|
|
|
|
<section style={{ display: 'grid', gap: 10 }}>
|
|
<div>
|
|
<h3 className="section-title" style={{ margin: 0, fontSize: 15 }}>پرسنل مجاز</h3>
|
|
<p style={{ margin: '6px 0 0', fontSize: 12.5, color: 'var(--text-3)' }}>
|
|
منشی هنگام رزرو فقط از میان همینها انتخاب میکند.
|
|
</p>
|
|
</div>
|
|
|
|
{canEdit && (
|
|
<SearchableSelect
|
|
options={staffOptions.filter((o) => !staffUuids.includes(String(o.value)))}
|
|
value={null}
|
|
onChange={addStaff}
|
|
placeholder="افزودن پرسنل..."
|
|
ariaLabel="افزودن پرسنل مجاز"
|
|
/>
|
|
)}
|
|
|
|
{staffUuids.length === 0 ? (
|
|
<span style={{ fontSize: 12.5, color: 'var(--danger)' }}>
|
|
حداقل یک پرسنل الزامی است — بدون آن ذخیره نمیشود.
|
|
</span>
|
|
) : (
|
|
<div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
|
|
{staffUuids.map((uuid) => (
|
|
<span
|
|
key={uuid}
|
|
className="badge"
|
|
style={{ display: 'inline-flex', alignItems: 'center', gap: 2, paddingInlineEnd: 2 }}
|
|
>
|
|
{staffOptions.find((o) => String(o.value) === uuid)?.label ?? uuid}
|
|
{canEdit && (
|
|
<button
|
|
type="button"
|
|
className="mini-btn danger"
|
|
onClick={() => setStaffUuids((prev) => prev.filter((u) => u !== uuid))}
|
|
aria-label="حذف این پرسنل"
|
|
>
|
|
<XMarkIcon style={{ width: 14, height: 14 }} />
|
|
</button>
|
|
)}
|
|
</span>
|
|
))}
|
|
</div>
|
|
)}
|
|
</section>
|
|
|
|
<Divider />
|
|
|
|
<section style={{ display: 'grid', gap: 10 }}>
|
|
<div>
|
|
<h3 className="section-title" style={{ margin: 0, fontSize: 15 }}>پزشک ناظر</h3>
|
|
<p style={{ margin: '6px 0 0', fontSize: 12.5, color: 'var(--text-3)' }}>
|
|
پاسخگوی بالینی دوره. لازم نیست خودش درمان را انجام دهد.
|
|
</p>
|
|
</div>
|
|
<SearchableSelect
|
|
options={doctorOptions}
|
|
value={supervisor}
|
|
onChange={(v) => setSupervisor(v === null ? null : String(v))}
|
|
placeholder="بدون پزشک ناظر"
|
|
isClearable
|
|
isDisabled={!canEdit}
|
|
ariaLabel="پزشک ناظر دوره"
|
|
/>
|
|
</section>
|
|
</>
|
|
)}
|
|
</div>
|
|
|
|
{/* نوار ذخیرهٔ چسبان: فرم بلند است و دکمهٔ ته صفحه یعنی اسکرول اجباری، بهویژه در موبایل. */}
|
|
{enabled && canEdit && (
|
|
<div className="save-bar">
|
|
<div className="sb-msg">
|
|
{staffUuids.length === 0
|
|
? 'برای ذخیره حداقل یک پرسنل مجاز انتخاب کنید'
|
|
: `${steps.length} جلسه · ${staffUuids.length} پرسنل مجاز`}
|
|
</div>
|
|
<div className="sb-actions">
|
|
<button
|
|
type="button"
|
|
className="btn primary"
|
|
onClick={() => save.mutate()}
|
|
disabled={save.isPending || !dirty}
|
|
>
|
|
{save.isPending ? 'در حال ذخیره...' : 'ذخیرهٔ طول درمان'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<ConfirmDialog
|
|
open={confirmOff}
|
|
title="خاموش کردن طول درمان"
|
|
message="با این کار پروتکل این سرویس همراه با گامها و فهرست پرسنل مجازش حذف میشود و سرویس دوباره تکجلسهای میگردد. پروندههای درمانِ باز دست نمیخورند."
|
|
confirmLabel="خاموش کن"
|
|
danger
|
|
loading={remove.isPending}
|
|
onConfirm={() => remove.mutate()}
|
|
onCancel={() => setConfirmOff(false)}
|
|
/>
|
|
</>
|
|
);
|
|
}
|