313 lines
15 KiB
TypeScript
313 lines
15 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
|
import { PlusIcon, PencilIcon, TrashIcon } from '@heroicons/react/24/outline';
|
|
import { useForm } from 'react-hook-form';
|
|
import { zodResolver } from '@hookform/resolvers/zod';
|
|
import { z } from 'zod';
|
|
import { toast } from 'sonner';
|
|
import { api } from '../lib/api';
|
|
import type { ApiResponse } from '../lib/api';
|
|
import type { ServiceSection, ServiceItem, ClinicStaff } from '../types';
|
|
import { formatRial } from '../lib/utils';
|
|
import Modal from '../components/ui/Modal';
|
|
import ConfirmDialog from '../components/ui/ConfirmDialog';
|
|
import PageHeader from '../components/ui/PageHeader';
|
|
import SearchableSelect from '../components/ui/SearchableSelect';
|
|
|
|
const sectionSchema = z.object({ name: z.string().min(1, 'نام بخش الزامی است') });
|
|
const itemSchema = z.object({
|
|
name: z.string().min(1, 'نام سرویس الزامی است'),
|
|
price_rials: z.coerce.number().min(0, 'مبلغ نمیتواند منفی باشد'),
|
|
staff_uuid: z.string().optional(),
|
|
});
|
|
type SectionForm = z.infer<typeof sectionSchema>;
|
|
type ItemForm = z.infer<typeof itemSchema>;
|
|
|
|
const EMPTY_SECTIONS: ServiceSection[] = [];
|
|
const EMPTY_ITEMS: ServiceItem[] = [];
|
|
|
|
export default function ClinicServicesPage() {
|
|
const qc = useQueryClient();
|
|
|
|
const [selectedSection, setSelectedSection] = useState<ServiceSection | null>(null);
|
|
const [sectionModal, setSectionModal] = useState<'create' | ServiceSection | null>(null);
|
|
const [deleteSection, setDeleteSection] = useState<ServiceSection | null>(null);
|
|
const [itemModal, setItemModal] = useState<'create' | ServiceItem | null>(null);
|
|
const [deleteItem, setDeleteItem] = useState<ServiceItem | null>(null);
|
|
|
|
const { data: sectionsData, isLoading: sectionsLoading } = useQuery<ApiResponse<ServiceSection[]>>({
|
|
queryKey: ['service-sections'],
|
|
queryFn: () => api.get('/api/v1/service-sections'),
|
|
});
|
|
|
|
const { data: itemsData, isLoading: itemsLoading } = useQuery<ApiResponse<ServiceItem[]>>({
|
|
queryKey: ['service-items', selectedSection?.uuid],
|
|
queryFn: () => api.get(`/api/v1/service-items/${selectedSection!.uuid}`),
|
|
enabled: !!selectedSection,
|
|
});
|
|
|
|
const { data: staffData } = useQuery<ApiResponse<ClinicStaff[]>>({
|
|
queryKey: ['staff'],
|
|
queryFn: () => api.get('/api/v1/staff'),
|
|
});
|
|
|
|
const sections = sectionsData?.data ?? EMPTY_SECTIONS;
|
|
const items = itemsData?.data ?? EMPTY_ITEMS;
|
|
const staffOptions = (staffData?.data ?? []).filter((s) => s.active).map((s) => ({
|
|
value: s.uuid,
|
|
label: s.full_name,
|
|
}));
|
|
|
|
const sectionForm = useForm<SectionForm>({ resolver: zodResolver(sectionSchema) });
|
|
const itemForm = useForm<ItemForm>({ resolver: zodResolver(itemSchema) });
|
|
|
|
const createSection = useMutation({
|
|
mutationFn: (body: SectionForm) => api.post('/api/v1/service-section', body),
|
|
onSuccess: () => { qc.invalidateQueries({ queryKey: ['service-sections'] }); setSectionModal(null); sectionForm.reset(); toast.success('بخش ایجاد شد'); },
|
|
onError: (e: any) => toast.error(e.message),
|
|
});
|
|
|
|
const editSection = useMutation({
|
|
mutationFn: ({ uuid, body }: { uuid: string; body: SectionForm }) =>
|
|
api.patch(`/api/v1/service-section/${uuid}`, body),
|
|
onSuccess: () => { qc.invalidateQueries({ queryKey: ['service-sections'] }); setSectionModal(null); toast.success('بخش ویرایش شد'); },
|
|
onError: (e: any) => toast.error(e.message),
|
|
});
|
|
|
|
const delSection = useMutation({
|
|
mutationFn: (uuid: string) => api.delete(`/api/v1/service-section/${uuid}`),
|
|
onSuccess: () => {
|
|
qc.invalidateQueries({ queryKey: ['service-sections'] });
|
|
if (selectedSection?.uuid === deleteSection?.uuid) setSelectedSection(null);
|
|
setDeleteSection(null);
|
|
toast.success('بخش حذف شد');
|
|
},
|
|
onError: (e: any) => { toast.error(e.message); setDeleteSection(null); },
|
|
});
|
|
|
|
const createItem = useMutation({
|
|
mutationFn: (body: ItemForm & { section_uuid: string }) => api.post('/api/v1/service-item', body),
|
|
onSuccess: () => { qc.invalidateQueries({ queryKey: ['service-items', selectedSection?.uuid] }); setItemModal(null); itemForm.reset(); toast.success('سرویس ایجاد شد'); },
|
|
onError: (e: any) => toast.error(e.message),
|
|
});
|
|
|
|
const editItem = useMutation({
|
|
mutationFn: ({ uuid, body }: { uuid: string; body: ItemForm }) =>
|
|
api.patch(`/api/v1/service-item/${uuid}`, body),
|
|
onSuccess: () => { qc.invalidateQueries({ queryKey: ['service-items', selectedSection?.uuid] }); setItemModal(null); toast.success('سرویس ویرایش شد'); },
|
|
onError: (e: any) => toast.error(e.message),
|
|
});
|
|
|
|
const delItem = useMutation({
|
|
mutationFn: (uuid: string) => api.delete(`/api/v1/service-item/${uuid}`),
|
|
onSuccess: () => { qc.invalidateQueries({ queryKey: ['service-items', selectedSection?.uuid] }); setDeleteItem(null); toast.success('سرویس حذف شد'); },
|
|
onError: (e: any) => {
|
|
if (e.code === 'ERR_SERVICE_ITEM_IN_USE') {
|
|
toast.error('این سرویس در پرونده بیمار استفاده شده و قابل حذف نیست');
|
|
} else {
|
|
toast.error(e.message);
|
|
}
|
|
setDeleteItem(null);
|
|
},
|
|
});
|
|
|
|
const openEditSection = (s: ServiceSection) => {
|
|
sectionForm.reset({ name: s.name });
|
|
setSectionModal(s);
|
|
};
|
|
|
|
const openEditItem = (item: ServiceItem) => {
|
|
itemForm.reset({
|
|
name: item.name,
|
|
price_rials: item.price_rials,
|
|
staff_uuid: item.staff?.uuid ?? '',
|
|
});
|
|
setItemModal(item);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<PageHeader title="سرویسهای کلینیک" description="مدیریت بخشها و سرویسهای کلینیک" />
|
|
|
|
<div style={{ display: 'grid', gridTemplateColumns: '280px 1fr', gap: 16, alignItems: 'start' }}>
|
|
{/* ستون بخشها */}
|
|
<div className="card">
|
|
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12 }}>
|
|
<b style={{ fontSize: 14 }}>بخشها</b>
|
|
<button className="btn primary sm" onClick={() => { sectionForm.reset(); setSectionModal('create'); }}>
|
|
<PlusIcon style={{ width: 14 }} />
|
|
</button>
|
|
</div>
|
|
{sectionsLoading ? (
|
|
<div style={{ color: 'var(--text-3)', fontSize: 13 }}>در حال بارگذاری...</div>
|
|
) : sections.length === 0 ? (
|
|
<div style={{ color: 'var(--text-3)', fontSize: 13 }}>بخشی ثبت نشده است</div>
|
|
) : (
|
|
<div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
|
|
{sections.map((s) => (
|
|
<div
|
|
key={s.uuid}
|
|
style={{
|
|
display: 'flex', alignItems: 'center', justifyContent: 'space-between',
|
|
padding: '8px 10px', borderRadius: 6, cursor: 'pointer',
|
|
background: selectedSection?.uuid === s.uuid ? 'var(--primary-subtle)' : 'transparent',
|
|
border: selectedSection?.uuid === s.uuid ? '1px solid var(--primary)' : '1px solid transparent',
|
|
}}
|
|
onClick={() => setSelectedSection(s)}
|
|
>
|
|
<span style={{ fontSize: 13 }}>{s.name}</span>
|
|
<div style={{ display: 'flex', gap: 4 }} onClick={(e) => e.stopPropagation()}>
|
|
<button className="btn sm" onClick={() => openEditSection(s)}><PencilIcon style={{ width: 13 }} /></button>
|
|
<button className="btn sm" onClick={() => setDeleteSection(s)}><TrashIcon style={{ width: 13 }} /></button>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* ستون آیتمها */}
|
|
<div className="card">
|
|
{!selectedSection ? (
|
|
<div style={{ padding: '40px 0', textAlign: 'center', color: 'var(--text-3)' }}>
|
|
یک بخش را از سمت راست انتخاب کنید
|
|
</div>
|
|
) : (
|
|
<>
|
|
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12 }}>
|
|
<b style={{ fontSize: 14 }}>سرویسهای «{selectedSection.name}»</b>
|
|
<button
|
|
className="btn primary sm"
|
|
onClick={() => { itemForm.reset({ price_rials: 0, staff_uuid: '' }); setItemModal('create'); }}
|
|
>
|
|
<PlusIcon style={{ width: 14 }} /> سرویس جدید
|
|
</button>
|
|
</div>
|
|
{itemsLoading ? (
|
|
<div style={{ color: 'var(--text-3)', fontSize: 13 }}>در حال بارگذاری...</div>
|
|
) : items.length === 0 ? (
|
|
<div style={{ color: 'var(--text-3)', fontSize: 13 }}>سرویسی ثبت نشده است</div>
|
|
) : (
|
|
<table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 13 }}>
|
|
<thead>
|
|
<tr style={{ borderBottom: '1px solid var(--border)' }}>
|
|
<th style={{ textAlign: 'right', padding: '8px 4px' }}>نام سرویس</th>
|
|
<th style={{ textAlign: 'right', padding: '8px 4px' }}>قیمت</th>
|
|
<th style={{ textAlign: 'right', padding: '8px 4px' }}>پرسنل مسئول</th>
|
|
<th style={{ textAlign: 'right', padding: '8px 4px' }}>عملیات</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{items.map((item) => (
|
|
<tr key={item.uuid} style={{ borderBottom: '1px solid var(--border)' }}>
|
|
<td style={{ padding: '8px 4px' }}>{item.name}</td>
|
|
<td style={{ padding: '8px 4px' }}>{formatRial(item.price_rials)}</td>
|
|
<td style={{ padding: '8px 4px' }}>{item.staff?.full_name ?? '—'}</td>
|
|
<td style={{ padding: '8px 4px' }}>
|
|
<div style={{ display: 'flex', gap: 4 }}>
|
|
<button className="btn sm" onClick={() => openEditItem(item)}><PencilIcon style={{ width: 13 }} /></button>
|
|
<button className="btn sm" onClick={() => setDeleteItem(item)}><TrashIcon style={{ width: 13 }} /></button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
)}
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Modal بخش */}
|
|
<Modal
|
|
open={sectionModal !== null}
|
|
onClose={() => setSectionModal(null)}
|
|
title={sectionModal === 'create' ? 'بخش جدید' : 'ویرایش بخش'}
|
|
>
|
|
<form onSubmit={sectionForm.handleSubmit((d) => {
|
|
if (sectionModal === 'create') createSection.mutate(d);
|
|
else if (sectionModal !== null && typeof sectionModal === 'object') editSection.mutate({ uuid: sectionModal.uuid, body: d });
|
|
})}>
|
|
<div className="field">
|
|
<label>نام بخش *</label>
|
|
<input {...sectionForm.register('name')} placeholder="مثلاً: تزریقات" />
|
|
{sectionForm.formState.errors.name && (
|
|
<span className="field-error">{sectionForm.formState.errors.name.message}</span>
|
|
)}
|
|
</div>
|
|
<div style={{ display: 'flex', gap: 8, marginTop: 16 }}>
|
|
<button type="submit" className="btn primary" disabled={createSection.isPending || editSection.isPending}>ذخیره</button>
|
|
<button type="button" className="btn" onClick={() => setSectionModal(null)}>انصراف</button>
|
|
</div>
|
|
</form>
|
|
</Modal>
|
|
|
|
{/* Modal آیتم */}
|
|
<Modal
|
|
open={itemModal !== null}
|
|
onClose={() => setItemModal(null)}
|
|
title={itemModal === 'create' ? 'سرویس جدید' : 'ویرایش سرویس'}
|
|
>
|
|
<form onSubmit={itemForm.handleSubmit((d) => {
|
|
if (itemModal === 'create' && selectedSection) {
|
|
createItem.mutate({ ...d, section_uuid: selectedSection.uuid });
|
|
} else if (itemModal !== null && typeof itemModal === 'object') {
|
|
editItem.mutate({ uuid: itemModal.uuid, body: d });
|
|
}
|
|
})}>
|
|
<div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
|
|
<div className="field">
|
|
<label>نام سرویس *</label>
|
|
<input {...itemForm.register('name')} placeholder="مثلاً: سرم ۵۰۰cc" />
|
|
{itemForm.formState.errors.name && (
|
|
<span className="field-error">{itemForm.formState.errors.name.message}</span>
|
|
)}
|
|
</div>
|
|
<div className="field">
|
|
<label>قیمت (ریال) *</label>
|
|
<input {...itemForm.register('price_rials')} type="number" min={0} placeholder="85000" dir="ltr" />
|
|
</div>
|
|
<div className="field">
|
|
<label>پرسنل مسئول</label>
|
|
<SearchableSelect
|
|
options={staffOptions}
|
|
value={itemForm.watch('staff_uuid') ?? ''}
|
|
onChange={(v) => itemForm.setValue('staff_uuid', v != null ? String(v) : undefined)}
|
|
placeholder="انتخاب پرسنل (اختیاری)"
|
|
isClearable
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div style={{ display: 'flex', gap: 8, marginTop: 16 }}>
|
|
<button type="submit" className="btn primary" disabled={createItem.isPending || editItem.isPending}>ذخیره</button>
|
|
<button type="button" className="btn" onClick={() => setItemModal(null)}>انصراف</button>
|
|
</div>
|
|
</form>
|
|
</Modal>
|
|
|
|
{/* Confirm حذف بخش */}
|
|
<ConfirmDialog
|
|
open={!!deleteSection}
|
|
title="حذف بخش"
|
|
message={`آیا مطمئن هستید که میخواهید بخش «${deleteSection?.name}» را حذف کنید؟`}
|
|
confirmLabel="حذف"
|
|
onConfirm={() => deleteSection && delSection.mutate(deleteSection.uuid)}
|
|
onCancel={() => setDeleteSection(null)}
|
|
loading={delSection.isPending}
|
|
/>
|
|
|
|
{/* Confirm حذف آیتم */}
|
|
<ConfirmDialog
|
|
open={!!deleteItem}
|
|
title="حذف سرویس"
|
|
message={`آیا مطمئن هستید که میخواهید سرویس «${deleteItem?.name}» را حذف کنید؟`}
|
|
confirmLabel="حذف"
|
|
onConfirm={() => deleteItem && delItem.mutate(deleteItem.uuid)}
|
|
onCancel={() => setDeleteItem(null)}
|
|
loading={delItem.isPending}
|
|
/>
|
|
</>
|
|
);
|
|
}
|