Add tests and implementation for ServiceDetailPage and PriceInput components
- Implement PriceInput component tests to validate Persian and Arabic numeral handling, input formatting, and controlled behavior. - Create ServiceDetailPage component with detailed service information, including pricing, insurance coverage, and editing capabilities. - Add API tests for service item detail retrieval and coverage synchronization with insurance contracts. - Ensure proper error handling and user feedback for service item retrieval and coverage management.
This commit is contained in:
hamed
@@ -0,0 +1,375 @@
|
||||
import { useState } from 'react';
|
||||
import { useParams, useNavigate } from 'react-router-dom';
|
||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import {
|
||||
BanknotesIcon, ShieldCheckIcon, ClockIcon, UsersIcon, PencilIcon,
|
||||
CalendarDaysIcon, WrenchScrewdriverIcon, CubeIcon,
|
||||
} from '@heroicons/react/24/outline';
|
||||
import { toast } from 'sonner';
|
||||
import { api } from '../lib/api';
|
||||
import type { ApiResponse } from '../lib/api';
|
||||
import type { ServiceItem } from '../types';
|
||||
import { formatRial, formatNumber, formatYear, formatDateTime } from '../lib/utils';
|
||||
import PageHeader from '../components/ui/PageHeader';
|
||||
import FeatureGate from '../components/ui/FeatureGate';
|
||||
import ConfirmDialog from '../components/ui/ConfirmDialog';
|
||||
import ServiceTariffModal from '../components/ServiceTariffModal';
|
||||
import ServiceInsuranceModal from '../components/ServiceInsuranceModal';
|
||||
import ServiceItemFormModal from '../components/ServiceItemFormModal';
|
||||
|
||||
interface Tariff {
|
||||
uuid: string;
|
||||
year: number;
|
||||
price_rials: number;
|
||||
is_active: boolean;
|
||||
}
|
||||
|
||||
interface TariffList {
|
||||
current_year: number;
|
||||
default_price_rials: number;
|
||||
data: Tariff[];
|
||||
}
|
||||
|
||||
interface TenantInsurance {
|
||||
uuid: string;
|
||||
insurance_name: string | null;
|
||||
insurance_kind: 'basic' | 'supplementary' | null;
|
||||
coverage_percent: number;
|
||||
}
|
||||
|
||||
interface CoverageRow {
|
||||
service_item_uuid: string | null;
|
||||
covered: boolean;
|
||||
coverage_percent: number | null;
|
||||
franchise_rials: number | null;
|
||||
ceiling_rials: number | null;
|
||||
}
|
||||
|
||||
const TABS = [
|
||||
{ id: 'info', label: 'اطلاعات سرویس' },
|
||||
{ id: 'tariffs', label: 'تعرفهها' },
|
||||
{ id: 'insurance', label: 'بیمهها' },
|
||||
] as const;
|
||||
type TabId = typeof TABS[number]['id'];
|
||||
|
||||
const KIND = {
|
||||
basic: { label: 'پایه', cls: 'blue' },
|
||||
supplementary: { label: 'تکمیلی', cls: 'violet' },
|
||||
} as const;
|
||||
|
||||
function Row({ icon, label, children }: { icon: React.ReactNode; label: string; children: React.ReactNode }) {
|
||||
return (
|
||||
<div style={{
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'space-between',
|
||||
gap: 12, padding: '11px 0', borderBottom: '1px solid var(--border)',
|
||||
}}>
|
||||
<span style={{ fontSize: 12.5, color: 'var(--text-3)', display: 'inline-flex', alignItems: 'center', gap: 6 }}>
|
||||
{icon} {label}
|
||||
</span>
|
||||
<span style={{ fontSize: 13.5, color: 'var(--text-2)', textAlign: 'left', minWidth: 0 }}>{children}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function InfoTab({ item }: { item: ServiceItem }) {
|
||||
const members = item.staff_members ?? (item.staff ? [item.staff] : []);
|
||||
|
||||
return (
|
||||
<div className="card card-pad">
|
||||
<Row icon={<BanknotesIcon style={{ width: 15 }} />} label="قیمت پایه">
|
||||
<b style={{ color: 'var(--primary)', fontSize: 14 }}>{formatRial(item.price_rials)}</b>
|
||||
</Row>
|
||||
<Row icon={<WrenchScrewdriverIcon style={{ width: 15 }} />} label="بخش">
|
||||
{item.section_name ?? '—'}
|
||||
</Row>
|
||||
<Row icon={<ClockIcon style={{ width: 15 }} />} label="زمان متوسط">
|
||||
{item.duration_minutes
|
||||
? <span className="badge blue" style={{ fontSize: 11 }}>{formatNumber(Number(item.duration_minutes))} دقیقه</span>
|
||||
: '—'}
|
||||
</Row>
|
||||
<Row icon={<CalendarDaysIcon style={{ width: 15 }} />} label="نمایش در نوبتدهی">
|
||||
{item.bookable
|
||||
? <span className="badge green" style={{ fontSize: 11 }}>فعال</span>
|
||||
: <span className="badge gray" style={{ fontSize: 11 }}>غیرفعال</span>}
|
||||
</Row>
|
||||
<Row icon={<ShieldCheckIcon style={{ width: 15 }} />} label="پوشش بیمه">
|
||||
{item.insurance_covered
|
||||
? <span className="badge green" style={{ fontSize: 11 }}>تحت پوشش</span>
|
||||
: '—'}
|
||||
</Row>
|
||||
<Row icon={<UsersIcon style={{ width: 15 }} />} label="پرسنل مسئول">
|
||||
{members.length > 0 ? (
|
||||
<span style={{ display: 'flex', flexWrap: 'wrap', gap: 4, justifyContent: 'flex-end' }}>
|
||||
{members.map((m) => (
|
||||
<span key={m.uuid} style={{
|
||||
fontSize: 12, color: 'var(--text-2)', background: 'var(--surface-2)',
|
||||
border: '1px solid var(--border)', borderRadius: 999, padding: '3px 10px', whiteSpace: 'nowrap',
|
||||
}}>{m.full_name}</span>
|
||||
))}
|
||||
</span>
|
||||
) : '—'}
|
||||
</Row>
|
||||
<Row icon={<CalendarDaysIcon style={{ width: 15 }} />} label="تاریخ ایجاد">
|
||||
{item.created_at ? formatDateTime(item.created_at) : '—'}
|
||||
</Row>
|
||||
<div style={{
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, padding: '11px 0',
|
||||
}}>
|
||||
<span style={{ fontSize: 12.5, color: 'var(--text-3)', display: 'inline-flex', alignItems: 'center', gap: 6 }}>
|
||||
<CalendarDaysIcon style={{ width: 15 }} /> آخرین ویرایش
|
||||
</span>
|
||||
<span style={{ fontSize: 13.5, color: 'var(--text-2)' }}>
|
||||
{item.updated_at ? formatDateTime(item.updated_at) : '—'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function TariffsTab({ item, onManage }: { item: ServiceItem; onManage: () => void }) {
|
||||
const { data, isLoading } = useQuery<ApiResponse<TariffList>>({
|
||||
queryKey: ['service-tariffs', item.uuid],
|
||||
queryFn: () => api.get(`/api/v1/service-items/${item.uuid}/tariffs`),
|
||||
});
|
||||
|
||||
const list = data?.data;
|
||||
const tariffs = list?.data ?? [];
|
||||
|
||||
return (
|
||||
<div className="card card-pad">
|
||||
<div className="card-title-row">
|
||||
<div>
|
||||
<b style={{ fontSize: 14 }}>تعرفههای سالانه</b>
|
||||
<div className="muted" style={{ fontSize: 12 }}>
|
||||
قیمت هر سال شمسی؛ قیمت سال جاری مبنای صورتحساب است.
|
||||
</div>
|
||||
</div>
|
||||
<button className="btn primary sm" onClick={onManage}>مدیریت تعرفهها</button>
|
||||
</div>
|
||||
|
||||
{isLoading ? (
|
||||
<div className="muted" style={{ fontSize: 13, padding: '12px 0' }}>در حال بارگذاری...</div>
|
||||
) : tariffs.length === 0 ? (
|
||||
<div className="empty" style={{ padding: '28px 0' }}>
|
||||
<BanknotesIcon style={{ width: 30, height: 30 }} />
|
||||
<p className="muted">تعرفهای ثبت نشده است</p>
|
||||
</div>
|
||||
) : (
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginTop: 12 }}>
|
||||
{tariffs.map((t) => (
|
||||
<div key={t.uuid} style={{
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10,
|
||||
padding: '10px 12px', borderRadius: 'var(--r-sm)',
|
||||
border: '1px solid var(--border)',
|
||||
background: t.year === list?.current_year ? 'var(--primary-soft)' : 'var(--surface)',
|
||||
}}>
|
||||
<span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontSize: 13 }}>
|
||||
<b>{formatYear(t.year)}</b>
|
||||
{t.year === list?.current_year && <span className="badge green" style={{ fontSize: 10 }}>سال جاری</span>}
|
||||
{!t.is_active && <span className="badge gray" style={{ fontSize: 10 }}>غیرفعال</span>}
|
||||
</span>
|
||||
<b style={{ fontSize: 13.5, color: 'var(--primary)' }}>{formatRial(t.price_rials)}</b>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function InsuranceTab({ item, onManage }: { item: ServiceItem; onManage: () => void }) {
|
||||
const { data: contractsData, isLoading } = useQuery<{ data: { data: TenantInsurance[] } }>({
|
||||
queryKey: ['tenant-insurances'],
|
||||
queryFn: () => api.get('/api/v1/billing/tenant-insurances'),
|
||||
});
|
||||
|
||||
const contracts = (contractsData as any)?.data?.data as TenantInsurance[] | undefined ?? [];
|
||||
|
||||
return (
|
||||
<div className="card card-pad">
|
||||
<div className="card-title-row">
|
||||
<div>
|
||||
<b style={{ fontSize: 14 }}>بیمههای مرتبط</b>
|
||||
<div className="muted" style={{ fontSize: 12 }}>
|
||||
درصد پوشش، فرانشیز و سقف هر بیمهگر برای این خدمت.
|
||||
</div>
|
||||
</div>
|
||||
<button className="btn primary sm" onClick={onManage}>مدیریت پوشش</button>
|
||||
</div>
|
||||
|
||||
{isLoading ? (
|
||||
<div className="muted" style={{ fontSize: 13, padding: '12px 0' }}>در حال بارگذاری...</div>
|
||||
) : contracts.length === 0 ? (
|
||||
<div className="empty" style={{ padding: '28px 0' }}>
|
||||
<ShieldCheckIcon style={{ width: 30, height: 30 }} />
|
||||
<p className="muted">قرارداد بیمهی فعالی ندارید</p>
|
||||
</div>
|
||||
) : (
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginTop: 12 }}>
|
||||
{contracts.map((c) => (
|
||||
<ContractCoverageRow key={c.uuid} contract={c} itemUuid={item.uuid} />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ContractCoverageRow({ contract, itemUuid }: { contract: TenantInsurance; itemUuid: string }) {
|
||||
const { data } = useQuery<{ data: { data: CoverageRow[] } }>({
|
||||
queryKey: ['service-coverage', contract.uuid],
|
||||
queryFn: () => api.get(`/api/v1/billing/tenant-insurances/${contract.uuid}/service-coverage`),
|
||||
});
|
||||
|
||||
const row = ((data as any)?.data?.data as CoverageRow[] | undefined)
|
||||
?.find((r) => r.service_item_uuid === itemUuid);
|
||||
const kind = contract.insurance_kind ? KIND[contract.insurance_kind] : null;
|
||||
const percent = row?.coverage_percent ?? contract.coverage_percent;
|
||||
|
||||
return (
|
||||
<div style={{
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10,
|
||||
padding: '10px 12px', borderRadius: 'var(--r-sm)', border: '1px solid var(--border)',
|
||||
}}>
|
||||
<span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontSize: 13, minWidth: 0 }}>
|
||||
<ShieldCheckIcon style={{ width: 15, color: 'var(--primary)', flexShrink: 0 }} />
|
||||
<b style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
|
||||
{contract.insurance_name ?? 'بیمه'}
|
||||
</b>
|
||||
{kind && <span className={`badge ${kind.cls}`} style={{ fontSize: 10 }}>{kind.label}</span>}
|
||||
</span>
|
||||
{row && !row.covered ? (
|
||||
<span style={{ fontSize: 12, color: 'var(--text-3)' }}>بدون پوشش</span>
|
||||
) : (
|
||||
<span style={{ fontSize: 12.5, color: 'var(--text-2)', display: 'inline-flex', gap: 10, whiteSpace: 'nowrap' }}>
|
||||
<span>پوشش {formatNumber(percent)}٪</span>
|
||||
{row?.franchise_rials ? <span>فرانشیز {formatRial(row.franchise_rials)}</span> : null}
|
||||
{row?.ceiling_rials ? <span>سقف {formatRial(row.ceiling_rials)}</span> : null}
|
||||
{!row && <span className="muted">(ارث از قرارداد)</span>}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ServiceDetailPageInner() {
|
||||
const { uuid } = useParams<{ uuid: string }>();
|
||||
const navigate = useNavigate();
|
||||
const qc = useQueryClient();
|
||||
|
||||
const [tab, setTab] = useState<TabId>('info');
|
||||
const [editOpen, setEditOpen] = useState(false);
|
||||
const [tariffOpen, setTariffOpen] = useState(false);
|
||||
const [insuranceOpen, setInsuranceOpen] = useState(false);
|
||||
const [toggleOpen, setToggleOpen] = useState(false);
|
||||
|
||||
const { data, isLoading, isError } = useQuery<ApiResponse<ServiceItem>>({
|
||||
queryKey: ['service-item', uuid],
|
||||
queryFn: () => api.get(`/api/v1/service-item/${uuid}`),
|
||||
enabled: !!uuid,
|
||||
});
|
||||
|
||||
const item = data?.data;
|
||||
|
||||
const toggleActive = useMutation({
|
||||
mutationFn: () => api.patch(`/api/v1/service-item/${uuid}`, { active: !item!.active }),
|
||||
onSuccess: () => {
|
||||
qc.invalidateQueries({ queryKey: ['service-item', uuid] });
|
||||
qc.invalidateQueries({ queryKey: ['service-items'] });
|
||||
setToggleOpen(false);
|
||||
toast.success(item!.active ? 'سرویس غیرفعال شد' : 'سرویس فعال شد');
|
||||
},
|
||||
onError: (e: Error) => { toast.error(e.message); setToggleOpen(false); },
|
||||
});
|
||||
|
||||
if (isLoading) {
|
||||
return <div style={{ color: 'var(--text-3)', fontSize: 13, padding: 16 }}>در حال بارگذاری...</div>;
|
||||
}
|
||||
|
||||
if (isError || !item) {
|
||||
return (
|
||||
<div className="card" style={{ padding: '52px 0', textAlign: 'center' }}>
|
||||
<CubeIcon style={{ width: 34, margin: '0 auto 12px', display: 'block', opacity: 0.35 }} />
|
||||
<div style={{ fontWeight: 600, color: 'var(--text-2)', marginBottom: 12 }}>سرویس یافت نشد</div>
|
||||
<button className="btn primary sm" onClick={() => navigate('/admin/clinic-services')}>بازگشت به سرویسها</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="fade-in">
|
||||
<PageHeader
|
||||
title={item.name}
|
||||
breadcrumbs={[
|
||||
{ label: 'سرویسها', to: '/admin/clinic-services' },
|
||||
...(item.section_name ? [{ label: item.section_name }] : []),
|
||||
{ label: item.name },
|
||||
]}
|
||||
action={
|
||||
<div style={{ display: 'flex', gap: 8 }}>
|
||||
<button className="btn sm" onClick={() => setToggleOpen(true)}>
|
||||
{item.active ? 'غیرفعالکردن' : 'فعالکردن'}
|
||||
</button>
|
||||
<button className="btn primary sm" onClick={() => setEditOpen(true)}>
|
||||
<PencilIcon style={{ width: 15 }} /> ویرایش
|
||||
</button>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 'var(--gap)' }}>
|
||||
<span className={`badge ${item.active ? 'green' : 'gray'}`} style={{ fontSize: 11 }}>
|
||||
<span className="bdot" />{item.active ? 'فعال' : 'غیرفعال'}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="seg" style={{ marginBottom: 'var(--gap)', overflowX: 'auto', flexWrap: 'nowrap' }}>
|
||||
{TABS.map((t) => (
|
||||
<button
|
||||
key={t.id}
|
||||
className={tab === t.id ? 'active' : ''}
|
||||
style={{ whiteSpace: 'nowrap' }}
|
||||
onClick={() => setTab(t.id)}
|
||||
>
|
||||
{t.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{tab === 'info' && <InfoTab item={item} />}
|
||||
{tab === 'tariffs' && <TariffsTab item={item} onManage={() => setTariffOpen(true)} />}
|
||||
{tab === 'insurance' && <InsuranceTab item={item} onManage={() => setInsuranceOpen(true)} />}
|
||||
|
||||
<ServiceItemFormModal
|
||||
item={editOpen ? item : null}
|
||||
sectionUuid={item.section_uuid ?? null}
|
||||
onClose={() => setEditOpen(false)}
|
||||
onManageInsurance={() => setInsuranceOpen(true)}
|
||||
/>
|
||||
<ServiceTariffModal item={tariffOpen ? item : null} onClose={() => setTariffOpen(false)} />
|
||||
<ServiceInsuranceModal item={insuranceOpen ? item : null} onClose={() => setInsuranceOpen(false)} />
|
||||
|
||||
<ConfirmDialog
|
||||
open={toggleOpen}
|
||||
title={item.active ? 'غیرفعالکردن سرویس' : 'فعالکردن سرویس'}
|
||||
message={
|
||||
item.active
|
||||
? `سرویس «${item.name}» غیرفعال میشود و در پذیرش جدید نمایش داده نمیشود. سوابق قبلی حفظ میمانند.`
|
||||
: `سرویس «${item.name}» دوباره فعال و قابل انتخاب میشود.`
|
||||
}
|
||||
confirmLabel={item.active ? 'غیرفعال کن' : 'فعال کن'}
|
||||
onConfirm={() => toggleActive.mutate()}
|
||||
onCancel={() => setToggleOpen(false)}
|
||||
loading={toggleActive.isPending}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function ServiceDetailPage() {
|
||||
return (
|
||||
<FeatureGate feature="services">
|
||||
<ServiceDetailPageInner />
|
||||
</FeatureGate>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user