561 lines
27 KiB
TypeScript
561 lines
27 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
|
import {
|
|
PlusIcon, PencilIcon, TrashIcon, WrenchScrewdriverIcon, BanknotesIcon,
|
|
ShieldCheckIcon, MagnifyingGlassIcon, EyeIcon, EyeSlashIcon,
|
|
} 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, rialToToman, tomanToRial } from '../lib/utils';
|
|
import Modal from '../components/ui/Modal';
|
|
import PriceInput from '../components/ui/PriceInput';
|
|
import ConfirmDialog from '../components/ui/ConfirmDialog';
|
|
import PageHeader from '../components/ui/PageHeader';
|
|
import ServiceTariffModal from '../components/ServiceTariffModal';
|
|
import ServiceInsuranceModal from '../components/ServiceInsuranceModal';
|
|
import SearchableSelect from '../components/ui/SearchableSelect';
|
|
import FeatureGate from '../components/ui/FeatureGate';
|
|
|
|
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(),
|
|
insurance_covered: z.boolean().optional(),
|
|
insurance_price_rials: z.coerce.number().min(0).optional(),
|
|
});
|
|
type SectionForm = z.infer<typeof sectionSchema>;
|
|
type ItemForm = z.infer<typeof itemSchema>;
|
|
|
|
const EMPTY_SECTIONS: ServiceSection[] = [];
|
|
const EMPTY_ITEMS: ServiceItem[] = [];
|
|
|
|
function Avatar({ name }: { name: string }) {
|
|
return (
|
|
<div style={{
|
|
width: 26, height: 26, borderRadius: '50%',
|
|
background: 'linear-gradient(145deg, oklch(0.62 0.15 162), oklch(0.48 0.16 162))',
|
|
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
|
fontSize: 11, fontWeight: 700, color: '#fff', flexShrink: 0,
|
|
}}>
|
|
{name.charAt(0)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function ClinicServicesPageInner() {
|
|
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 [toggleItem, setToggleItem] = useState<ServiceItem | null>(null);
|
|
const [tariffItem, setTariffItem] = useState<ServiceItem | null>(null);
|
|
const [insuranceItem, setInsuranceItem] = useState<ServiceItem | null>(null);
|
|
const [search, setSearch] = useState('');
|
|
const [showInactive, setShowInactive] = useState(true);
|
|
|
|
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 allItems = itemsData?.data ?? EMPTY_ITEMS;
|
|
const allStaff = staffData?.data ?? [];
|
|
|
|
const editingStaff = itemModal && typeof itemModal === 'object' ? itemModal.staff : null;
|
|
const staffOptions = allStaff
|
|
.filter((s) => s.active || s.uuid === editingStaff?.uuid)
|
|
.map((s) => ({
|
|
value: s.uuid,
|
|
label: s.active ? s.full_name : `${s.full_name} (غیرفعال)`,
|
|
}));
|
|
|
|
const items = allItems.filter((it) => {
|
|
if (!showInactive && !it.active) return false;
|
|
if (search.trim() && !it.name.includes(search.trim())) return false;
|
|
return true;
|
|
});
|
|
const activeCount = allItems.filter((i) => i.active).length;
|
|
|
|
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,
|
|
price_rials: tomanToRial(body.price_rials),
|
|
insurance_price_rials: tomanToRial(body.insurance_price_rials ?? 0),
|
|
}),
|
|
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,
|
|
price_rials: tomanToRial(body.price_rials),
|
|
insurance_price_rials: tomanToRial(body.insurance_price_rials ?? 0),
|
|
}),
|
|
onSuccess: () => { qc.invalidateQueries({ queryKey: ['service-items', selectedSection?.uuid] }); setItemModal(null); toast.success('سرویس ویرایش شد'); },
|
|
onError: (e: any) => toast.error(e.message),
|
|
});
|
|
|
|
const toggleActive = useMutation({
|
|
mutationFn: ({ uuid, active }: { uuid: string; active: boolean }) =>
|
|
api.patch(`/api/v1/service-item/${uuid}`, { active }),
|
|
onSuccess: (_d, v) => {
|
|
qc.invalidateQueries({ queryKey: ['service-items', selectedSection?.uuid] });
|
|
setToggleItem(null);
|
|
toast.success(v.active ? 'سرویس فعال شد' : 'سرویس غیرفعال شد');
|
|
},
|
|
onError: (e: any) => { toast.error(e.message); setToggleItem(null); },
|
|
});
|
|
|
|
const openEditSection = (s: ServiceSection) => {
|
|
sectionForm.reset({ name: s.name });
|
|
setSectionModal(s);
|
|
};
|
|
|
|
const openEditItem = (item: ServiceItem) => {
|
|
itemForm.reset({
|
|
name: item.name,
|
|
price_rials: rialToToman(item.price_rials),
|
|
staff_uuid: item.staff?.uuid ?? '',
|
|
insurance_covered: item.insurance_covered ?? false,
|
|
insurance_price_rials: rialToToman(item.insurance_price_rials ?? 0),
|
|
});
|
|
setItemModal(item);
|
|
};
|
|
|
|
const openCreateItem = () => {
|
|
itemForm.reset({ name: '', price_rials: 0, staff_uuid: '', insurance_covered: false, insurance_price_rials: 0 });
|
|
setItemModal('create');
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<PageHeader title="سرویسهای کلینیک" description="بخشها، سرویسها، تعرفه و پوشش بیمه را مدیریت کنید" />
|
|
|
|
<div style={{ display: 'grid', gridTemplateColumns: '288px 1fr', gap: 18, alignItems: 'start' }}>
|
|
{/* ───────── ستون بخشها ───────── */}
|
|
<div className="card" style={{ overflow: 'hidden' }}>
|
|
<div style={{
|
|
display: 'flex', alignItems: 'center', justifyContent: 'space-between',
|
|
padding: '14px 16px', borderBottom: '1px solid var(--border)',
|
|
}}>
|
|
<b style={{ fontSize: 14 }}>بخشها</b>
|
|
<button
|
|
className="btn primary sm"
|
|
style={{ display: 'flex', alignItems: 'center', gap: 4 }}
|
|
onClick={() => { sectionForm.reset({ name: '' }); setSectionModal('create'); }}
|
|
>
|
|
<PlusIcon style={{ width: 14 }} /> جدید
|
|
</button>
|
|
</div>
|
|
|
|
<div style={{ padding: 8, display: 'flex', flexDirection: 'column', gap: 4 }}>
|
|
{sectionsLoading ? (
|
|
<div style={{ color: 'var(--text-3)', fontSize: 13, padding: '12px 8px' }}>در حال بارگذاری...</div>
|
|
) : sections.length === 0 ? (
|
|
<div style={{ padding: '32px 16px', textAlign: 'center', color: 'var(--text-3)' }}>
|
|
<WrenchScrewdriverIcon style={{ width: 30, margin: '0 auto 10px', display: 'block', opacity: 0.4 }} />
|
|
<div style={{ fontSize: 13 }}>بخشی ثبت نشده است</div>
|
|
</div>
|
|
) : (
|
|
sections.map((s) => {
|
|
const isActive = selectedSection?.uuid === s.uuid;
|
|
return (
|
|
<div
|
|
key={s.uuid}
|
|
className="srv-section-row"
|
|
style={{
|
|
display: 'flex', alignItems: 'center', justifyContent: 'space-between',
|
|
padding: '9px 10px', cursor: 'pointer', borderRadius: 9,
|
|
background: isActive ? 'var(--primary-subtle)' : 'transparent',
|
|
transition: 'background 0.15s',
|
|
}}
|
|
onClick={() => setSelectedSection(s)}
|
|
>
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: 9, minWidth: 0 }}>
|
|
<WrenchScrewdriverIcon style={{
|
|
width: 16, flexShrink: 0,
|
|
color: isActive ? 'var(--primary)' : 'var(--text-3)',
|
|
}} />
|
|
<span style={{
|
|
fontSize: 13.5, fontWeight: isActive ? 600 : 500,
|
|
color: isActive ? 'var(--primary)' : 'var(--text-1)',
|
|
whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
|
|
}}>
|
|
{s.name}
|
|
</span>
|
|
</div>
|
|
<div className="srv-section-actions" style={{ display: 'flex', gap: 2, flexShrink: 0 }} onClick={(e) => e.stopPropagation()}>
|
|
<button className="btn sm ghost" onClick={() => openEditSection(s)} title="ویرایش">
|
|
<PencilIcon style={{ width: 13 }} />
|
|
</button>
|
|
<button className="btn sm ghost" onClick={() => setDeleteSection(s)} title="حذف">
|
|
<TrashIcon style={{ width: 13 }} />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
})
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* ───────── ستون سرویسها ───────── */}
|
|
<div className="card" style={{ overflow: 'hidden' }}>
|
|
{!selectedSection ? (
|
|
<div style={{
|
|
border: '2px dashed var(--border)', borderRadius: 12,
|
|
margin: 18, padding: '64px 0', textAlign: 'center', color: 'var(--text-3)',
|
|
}}>
|
|
<WrenchScrewdriverIcon style={{ width: 42, margin: '0 auto 14px', display: 'block', opacity: 0.35 }} />
|
|
<div style={{ fontSize: 14, fontWeight: 600, color: 'var(--text-2)' }}>یک بخش انتخاب کنید</div>
|
|
<div style={{ fontSize: 13, marginTop: 4 }}>تا سرویسهای آن را مشاهده و مدیریت کنید</div>
|
|
</div>
|
|
) : (
|
|
<>
|
|
<div style={{
|
|
display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12,
|
|
padding: '14px 16px', borderBottom: '1px solid var(--border)', flexWrap: 'wrap',
|
|
}}>
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
|
|
<b style={{ fontSize: 14 }}>{selectedSection.name}</b>
|
|
{!itemsLoading && (
|
|
<span className="badge gray" style={{ fontSize: 11 }}>
|
|
{activeCount} فعال{allItems.length > activeCount ? ` / ${allItems.length}` : ''}
|
|
</span>
|
|
)}
|
|
</div>
|
|
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
|
|
<div style={{ position: 'relative' }}>
|
|
<MagnifyingGlassIcon style={{ width: 15, position: 'absolute', insetInlineStart: 9, top: '50%', transform: 'translateY(-50%)', color: 'var(--text-3)', pointerEvents: 'none' }} />
|
|
<input
|
|
className="input"
|
|
placeholder="جستجوی سرویس"
|
|
value={search}
|
|
onChange={(e) => setSearch(e.target.value)}
|
|
style={{ width: 180, paddingInlineStart: 30, height: 34 }}
|
|
/>
|
|
</div>
|
|
<button
|
|
className="btn sm ghost"
|
|
onClick={() => setShowInactive((v) => !v)}
|
|
title={showInactive ? 'پنهانکردن غیرفعالها' : 'نمایش غیرفعالها'}
|
|
>
|
|
{showInactive ? <EyeIcon style={{ width: 15 }} /> : <EyeSlashIcon style={{ width: 15 }} />}
|
|
</button>
|
|
<button className="btn primary sm" style={{ display: 'flex', alignItems: 'center', gap: 4 }} onClick={openCreateItem}>
|
|
<PlusIcon style={{ width: 14 }} /> سرویس جدید
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{itemsLoading ? (
|
|
<div style={{ color: 'var(--text-3)', fontSize: 13, padding: 16 }}>در حال بارگذاری...</div>
|
|
) : items.length === 0 ? (
|
|
<div style={{ padding: '52px 0', textAlign: 'center', color: 'var(--text-3)' }}>
|
|
<PlusIcon style={{ width: 32, margin: '0 auto 12px', display: 'block', opacity: 0.35 }} />
|
|
<div style={{ fontWeight: 600, color: 'var(--text-2)', marginBottom: 4 }}>
|
|
{allItems.length === 0 ? 'سرویسی در این بخش وجود ندارد' : 'سرویسی با این فیلتر یافت نشد'}
|
|
</div>
|
|
{allItems.length === 0 && (
|
|
<button className="btn primary sm" style={{ marginTop: 12 }} onClick={openCreateItem}>
|
|
افزودن سرویس
|
|
</button>
|
|
)}
|
|
</div>
|
|
) : (
|
|
<div style={{ padding: 12, display: 'flex', flexDirection: 'column', gap: 8 }}>
|
|
{items.map((item) => (
|
|
<div
|
|
key={item.uuid}
|
|
style={{
|
|
display: 'flex', alignItems: 'center', gap: 14,
|
|
padding: '12px 14px', borderRadius: 11,
|
|
border: '1px solid var(--border)',
|
|
background: item.active ? 'var(--bg)' : 'oklch(0.97 0.005 256)',
|
|
opacity: item.active ? 1 : 0.7,
|
|
transition: 'box-shadow 0.15s',
|
|
}}
|
|
>
|
|
<div style={{ minWidth: 0, flex: 1 }}>
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 4 }}>
|
|
<span style={{ fontWeight: 600, fontSize: 13.5 }}>{item.name}</span>
|
|
{!item.active && <span className="badge gray" style={{ fontSize: 10 }}>غیرفعال</span>}
|
|
{item.insurance_covered && (
|
|
<span className="badge green" style={{ fontSize: 10 }}><span className="bdot" />بیمه</span>
|
|
)}
|
|
</div>
|
|
<div style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 12, color: 'var(--text-3)' }}>
|
|
{item.staff ? (
|
|
<>
|
|
<Avatar name={item.staff.full_name} />
|
|
<span>{item.staff.full_name}</span>
|
|
</>
|
|
) : (
|
|
<span>بدون پرسنل مسئول</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div style={{ textAlign: 'end', flexShrink: 0 }}>
|
|
<div style={{ color: 'var(--primary)', fontWeight: 700, fontSize: 14 }}>{formatRial(item.price_rials)}</div>
|
|
</div>
|
|
|
|
<div style={{ display: 'flex', gap: 4, flexShrink: 0 }}>
|
|
<button className="btn sm ghost" onClick={() => openEditItem(item)} title="ویرایش">
|
|
<PencilIcon style={{ width: 14 }} />
|
|
</button>
|
|
<button className="btn sm ghost" onClick={() => setTariffItem(item)} title="تعرفههای سالانه">
|
|
<BanknotesIcon style={{ width: 14 }} />
|
|
</button>
|
|
<button className="btn sm ghost" onClick={() => setInsuranceItem(item)} title="پوشش بیمه">
|
|
<ShieldCheckIcon style={{ width: 14 }} />
|
|
</button>
|
|
<button
|
|
className="btn sm ghost"
|
|
onClick={() => setToggleItem(item)}
|
|
title={item.active ? 'غیرفعالکردن' : 'فعالکردن'}
|
|
style={{ color: item.active ? 'var(--text-3)' : 'var(--primary)' }}
|
|
>
|
|
{item.active ? <EyeSlashIcon style={{ width: 14 }} /> : <EyeIcon style={{ width: 14 }} />}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</>
|
|
)}
|
|
</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="مثلاً: تزریقات" autoFocus />
|
|
{sectionForm.formState.errors.name && (
|
|
<span className="field-error">{sectionForm.formState.errors.name.message}</span>
|
|
)}
|
|
</div>
|
|
<div style={{ display: 'flex', gap: 8, marginTop: 18 }}>
|
|
<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' ? 'سرویس جدید' : 'ویرایش سرویس'}
|
|
size="md"
|
|
footer={
|
|
<>
|
|
<button type="button" className="btn" onClick={() => setItemModal(null)}>انصراف</button>
|
|
<button type="submit" form="service-item-form" className="btn primary" disabled={createItem.isPending || editItem.isPending}>
|
|
{createItem.isPending || editItem.isPending ? 'در حال ذخیره...' : 'ذخیره سرویس'}
|
|
</button>
|
|
</>
|
|
}
|
|
>
|
|
<form
|
|
id="service-item-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 });
|
|
}
|
|
})}
|
|
style={{ display: 'flex', flexDirection: 'column', gap: 20 }}
|
|
>
|
|
{/* اطلاعات پایه */}
|
|
<div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
|
|
<div>
|
|
<label className="field-label">نام سرویس *</label>
|
|
<div className="field" style={itemForm.formState.errors.name ? { borderColor: 'var(--danger)' } : undefined}>
|
|
<input {...itemForm.register('name')} placeholder="مثلاً: سرم ۵۰۰cc" autoFocus />
|
|
</div>
|
|
{itemForm.formState.errors.name && (
|
|
<span className="field-error">{itemForm.formState.errors.name.message}</span>
|
|
)}
|
|
</div>
|
|
|
|
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
|
|
<div>
|
|
<label className="field-label">قیمت پایه (تومان) *</label>
|
|
<div className="field">
|
|
<PriceInput
|
|
value={itemForm.watch('price_rials') ?? 0}
|
|
onChange={(v) => itemForm.setValue('price_rials', v)}
|
|
placeholder="۸۵,۰۰۰"
|
|
min={0}
|
|
/>
|
|
</div>
|
|
{itemForm.formState.errors.price_rials && (
|
|
<span className="field-error">{itemForm.formState.errors.price_rials.message}</span>
|
|
)}
|
|
</div>
|
|
<div>
|
|
<label className="field-label">پرسنل مسئول</label>
|
|
<SearchableSelect
|
|
options={staffOptions}
|
|
value={itemForm.watch('staff_uuid') ?? ''}
|
|
onChange={(v) => itemForm.setValue('staff_uuid', v != null ? String(v) : '')}
|
|
placeholder="انتخاب (اختیاری)"
|
|
noOptionsMessage="پرسنلی ثبت نشده"
|
|
height={42}
|
|
isClearable
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* بیمه */}
|
|
<div style={{
|
|
border: '1px solid var(--border)', borderRadius: 'var(--r)',
|
|
background: 'var(--surface-2)', overflow: 'hidden',
|
|
}}>
|
|
<label style={{
|
|
display: 'flex', alignItems: 'center', gap: 11, cursor: 'pointer',
|
|
padding: '13px 16px',
|
|
}}>
|
|
<ShieldCheckIcon style={{ width: 18, color: 'var(--primary)', flexShrink: 0 }} />
|
|
<div style={{ flex: 1, minWidth: 0 }}>
|
|
<div style={{ fontSize: 13.5, fontWeight: 600 }}>این خدمت شامل بیمه میشود</div>
|
|
<div style={{ fontSize: 11.5, color: 'var(--text-3)', marginTop: 2 }}>نشانهی سریع برای فهرست سرویسها</div>
|
|
</div>
|
|
<span className="switch">
|
|
<input
|
|
type="checkbox"
|
|
checked={itemForm.watch('insurance_covered') ?? false}
|
|
onChange={(e) => itemForm.setValue('insurance_covered', e.target.checked)}
|
|
/>
|
|
<span className="switch-track"><span className="switch-thumb" /></span>
|
|
</span>
|
|
</label>
|
|
|
|
{itemForm.watch('insurance_covered') && (
|
|
<div style={{ padding: '0 16px 16px', borderTop: '1px solid var(--border)', paddingTop: 14 }}>
|
|
<label className="field-label">قیمت تقریبی با بیمه (تومان)</label>
|
|
<div className="field" style={{ background: 'var(--surface)' }}>
|
|
<PriceInput
|
|
value={itemForm.watch('insurance_price_rials') ?? 0}
|
|
onChange={(v) => itemForm.setValue('insurance_price_rials', v)}
|
|
placeholder="سهم تقریبی بیمار"
|
|
min={0}
|
|
/>
|
|
</div>
|
|
<div style={{
|
|
fontSize: 11.5, color: 'var(--text-3)', lineHeight: 1.75, marginTop: 10,
|
|
display: 'flex', gap: 6,
|
|
}}>
|
|
<ShieldCheckIcon style={{ width: 14, flexShrink: 0, marginTop: 2, color: 'var(--text-3)' }} />
|
|
<span>برای محاسبهی دقیق سهم بیمار و ساخت مطالبات، پوشش هر بیمهگر را از دکمهی «پوشش بیمه» در فهرست سرویسها تنظیم کنید.</span>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</form>
|
|
</Modal>
|
|
|
|
<ServiceTariffModal item={tariffItem} onClose={() => setTariffItem(null)} />
|
|
|
|
<ServiceInsuranceModal item={insuranceItem} onClose={() => setInsuranceItem(null)} />
|
|
|
|
{/* Confirm حذف بخش */}
|
|
<ConfirmDialog
|
|
open={!!deleteSection}
|
|
title="حذف بخش"
|
|
message={`آیا مطمئن هستید که میخواهید بخش «${deleteSection?.name}» و همهی سرویسهای آن را حذف کنید؟`}
|
|
confirmLabel="حذف"
|
|
onConfirm={() => deleteSection && delSection.mutate(deleteSection.uuid)}
|
|
onCancel={() => setDeleteSection(null)}
|
|
loading={delSection.isPending}
|
|
/>
|
|
|
|
{/* Confirm فعال/غیرفعال سرویس */}
|
|
<ConfirmDialog
|
|
open={!!toggleItem}
|
|
title={toggleItem?.active ? 'غیرفعالکردن سرویس' : 'فعالکردن سرویس'}
|
|
message={
|
|
toggleItem?.active
|
|
? `سرویس «${toggleItem?.name}» غیرفعال میشود و در پذیرش جدید نمایش داده نمیشود. سوابق قبلی حفظ میمانند.`
|
|
: `سرویس «${toggleItem?.name}» دوباره فعال و قابل انتخاب میشود.`
|
|
}
|
|
confirmLabel={toggleItem?.active ? 'غیرفعال کن' : 'فعال کن'}
|
|
onConfirm={() => toggleItem && toggleActive.mutate({ uuid: toggleItem.uuid, active: !toggleItem.active })}
|
|
onCancel={() => setToggleItem(null)}
|
|
loading={toggleActive.isPending}
|
|
/>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default function ClinicServicesPage() {
|
|
return (
|
|
<FeatureGate feature="services">
|
|
<ClinicServicesPageInner />
|
|
</FeatureGate>
|
|
);
|
|
}
|