hamedandClaude Opus 5
4fe0c4f9bf
Price lists, annual tariffs and per-branch price overrides each answered
"what does this service cost?" differently, so a single date could carry
several answers and nobody could say which one was right. Price now lives
only on ServiceItem.price_rials, edited from the services page.
- drop PriceList/PriceListItem, their repositories and the seven
/api/v1/price-list(s) endpoints; PricingController keeps only quote and
the appointment price snapshot
- drop Tariff, TariffRepository, TariffService and the two
/service-items/{uuid}/tariffs endpoints; creating or repricing a service
no longer upserts a current-year tariff
- drop price_rials from ServiceBranchOverride; the entity stays for its
duration columns, which DurationCalculator and ServiceSelectionValidator
still read
- InvoiceService reads the item price directly
- PricingEngine collapses to a single source; breakdown.sources always
reports service_item, keeping the response contract intact
- remove the price-lists admin page, its route and settings-menu entry, the
tariff modal and the service detail tariffs tab; useAppointmentInvoice
moves to its own hook file
Migration drops price_lists, price_list_items, service_tariffs and the
override price column.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
520 lines
23 KiB
TypeScript
520 lines
23 KiB
TypeScript
import { useState } from 'react';
|
|
import { useParams, useNavigate, Link } 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 type { InventoryPackage } from '../hooks/useInventory';
|
|
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 { usePermissions } from '../hooks/usePermissions';
|
|
import { useUrlState } from '../hooks/useUrlState';
|
|
import ServiceInsuranceModal from '../components/ServiceInsuranceModal';
|
|
import ServiceItemFormModal from '../components/ServiceItemFormModal';
|
|
import ServiceCategoryTab from '../components/ServiceCategoryTab';
|
|
|
|
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_percent: number | null;
|
|
ceiling_rials: number | null;
|
|
}
|
|
|
|
const TABS = [
|
|
{ id: 'info', label: 'اطلاعات سرویس' },
|
|
{ id: 'insurance', label: 'بیمهها' },
|
|
{ id: 'categories',label: 'دستهبندیها' },
|
|
{ id: 'goods', label: 'کالاهای مرتبط' },
|
|
{ id: 'history', label: 'لاگ تغییرات' },
|
|
] as const;
|
|
type TabId = typeof TABS[number]['id'];
|
|
|
|
interface AuditLog {
|
|
uuid: string;
|
|
field: string;
|
|
operation: 'create' | 'update';
|
|
old_value: string | null;
|
|
new_value: string | null;
|
|
actor_name: string | null;
|
|
created_at: number;
|
|
}
|
|
|
|
/** برچسب فارسی فیلدهای لاگ — باید با ServiceItemAuditService::TRACKED همتراز بماند. */
|
|
const FIELD_LABELS: Record<string, string> = {
|
|
name: 'نام سرویس',
|
|
price_rials: 'قیمت پایه',
|
|
active: 'وضعیت',
|
|
duration_minutes: 'زمان متوسط',
|
|
bookable: 'نمایش در نوبتدهی',
|
|
insurance_covered: 'پوشش بیمه',
|
|
inventory_package: 'پکیج کالا',
|
|
};
|
|
|
|
/** مقدار خام لاگ را برای نمایش قابلفهم میکند (بولین، مبلغ، خالی). */
|
|
function auditValue(field: string, raw: string | null): string {
|
|
if (raw === null || raw === '') return '—';
|
|
if (['active', 'bookable', 'insurance_covered'].includes(field)) return raw === '1' ? 'بله' : 'خیر';
|
|
if (field === 'price_rials') return formatRial(Number(raw));
|
|
if (field === 'duration_minutes') return `${formatNumber(Number(raw))} دقیقه`;
|
|
if (field === 'inventory_package') return 'پکیج متصل';
|
|
return raw;
|
|
}
|
|
|
|
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 InsuranceTab({ item, onManage, canUpdate }: { item: ServiceItem; onManage: () => void; canUpdate: boolean }) {
|
|
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>
|
|
{canUpdate && <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_percent ? <span>فرانشیز {formatNumber(row.franchise_percent)}٪</span> : null}
|
|
{row?.ceiling_rials ? <span>سقف {formatRial(row.ceiling_rials)}</span> : null}
|
|
{!row && <span className="muted">(ارث از قرارداد)</span>}
|
|
</span>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function GoodsTab({ item, onEdit, canUpdate }: { item: ServiceItem; onEdit: () => void; canUpdate: boolean }) {
|
|
const { data, isLoading } = useQuery<ApiResponse<InventoryPackage[]>>({
|
|
queryKey: ['inventory-packages'],
|
|
queryFn: () => api.get('/api/v1/inventory-packages'),
|
|
});
|
|
|
|
const linked = (data?.data ?? []).find((p) => p.uuid === item.inventory_package_uuid);
|
|
const consumables = item.consumables ?? [];
|
|
const nothingLinked = !item.inventory_package_uuid && consumables.length === 0;
|
|
|
|
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>
|
|
{canUpdate && <button className="btn primary sm" onClick={onEdit}>ویرایش کالاها</button>}
|
|
</div>
|
|
|
|
{isLoading ? (
|
|
<div className="muted" style={{ fontSize: 13, padding: '12px 0' }}>در حال بارگذاری...</div>
|
|
) : nothingLinked ? (
|
|
<div className="empty" style={{ padding: '28px 0' }}>
|
|
<CubeIcon style={{ width: 30, height: 30 }} />
|
|
<p className="muted">کالایی به این سرویس متصل نیست</p>
|
|
<Link className="btn sm" to="/admin/inventory">مدیریت انبار</Link>
|
|
</div>
|
|
) : (
|
|
<div style={{ marginTop: 12, display: 'flex', flexDirection: 'column', gap: 16 }}>
|
|
{item.inventory_package_uuid && (
|
|
<div>
|
|
<div className="muted" style={{ fontSize: 12, marginBottom: 8 }}>پکیج</div>
|
|
{!linked ? (
|
|
<div className="muted" style={{ fontSize: 13 }}>
|
|
{item.inventory_package_title ?? 'پکیج متصل'} — جزئیات در دسترس نیست
|
|
</div>
|
|
) : (
|
|
<>
|
|
<div style={{
|
|
display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10,
|
|
padding: '10px 12px', borderRadius: 'var(--r-sm)', background: 'var(--primary-soft)', marginBottom: 8,
|
|
}}>
|
|
<span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontSize: 13 }}>
|
|
<CubeIcon style={{ width: 15, color: 'var(--primary)' }} />
|
|
<b>{linked.title}</b>
|
|
{!linked.available && <span className="badge gray" style={{ fontSize: 10 }}>موجودی ناکافی</span>}
|
|
</span>
|
|
<b style={{ fontSize: 13.5, color: 'var(--primary)' }}>{formatRial(linked.total)}</b>
|
|
</div>
|
|
|
|
<div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
|
|
{linked.items.map((line) => (
|
|
<div key={line.itemUuid} style={{
|
|
display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10,
|
|
padding: '9px 12px', borderRadius: 'var(--r-sm)', border: '1px solid var(--border)',
|
|
}}>
|
|
<span style={{ fontSize: 13 }}>{line.name}</span>
|
|
<span style={{ fontSize: 12.5, color: 'var(--text-3)', display: 'inline-flex', gap: 10 }}>
|
|
<span>{formatNumber(line.amount)} {line.unit}</span>
|
|
<span>{formatRial(line.price * line.amount)}</span>
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{consumables.length > 0 && (
|
|
<div>
|
|
<div className="muted" style={{ fontSize: 12, marginBottom: 8 }}>کالاهای تکی</div>
|
|
<div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
|
|
{consumables.map((line) => (
|
|
<div key={line.item_uuid} style={{
|
|
display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10,
|
|
padding: '9px 12px', borderRadius: 'var(--r-sm)', border: '1px solid var(--border)',
|
|
}}>
|
|
<span style={{ fontSize: 13, display: 'inline-flex', alignItems: 'center', gap: 8 }}>
|
|
{line.name}
|
|
{line.stock < line.amount && <span className="badge gray" style={{ fontSize: 10 }}>موجودی ناکافی</span>}
|
|
</span>
|
|
<span style={{ fontSize: 12.5, color: 'var(--text-3)', display: 'inline-flex', gap: 10 }}>
|
|
<span>{formatNumber(line.amount)} {line.unit}</span>
|
|
<span>{formatRial(line.price * line.amount)}</span>
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function HistoryTab({ item }: { item: ServiceItem }) {
|
|
const { data, isLoading } = useQuery<ApiResponse<AuditLog[]>>({
|
|
queryKey: ['service-item-audit', item.uuid],
|
|
queryFn: () => api.get(`/api/v1/service-item/${item.uuid}/audit-logs`),
|
|
});
|
|
|
|
const logs = data?.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>
|
|
</div>
|
|
|
|
{isLoading ? (
|
|
<div className="muted" style={{ fontSize: 13, padding: '12px 0' }}>در حال بارگذاری...</div>
|
|
) : logs.length === 0 ? (
|
|
<div className="empty" style={{ padding: '28px 0' }}>
|
|
<ClockIcon style={{ width: 30, height: 30 }} />
|
|
<p className="muted">تغییری ثبت نشده است</p>
|
|
</div>
|
|
) : (
|
|
<div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginTop: 12 }}>
|
|
{logs.map((log) => (
|
|
<div key={log.uuid} style={{
|
|
padding: '10px 12px', borderRadius: 'var(--r-sm)', border: '1px solid var(--border)',
|
|
}}>
|
|
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10, marginBottom: 6 }}>
|
|
<span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontSize: 13 }}>
|
|
<b>{FIELD_LABELS[log.field] ?? log.field}</b>
|
|
{log.operation === 'create' && <span className="badge green" style={{ fontSize: 10 }}>ایجاد</span>}
|
|
</span>
|
|
<span style={{ fontSize: 11.5, color: 'var(--text-3)' }}>{formatDateTime(log.created_at)}</span>
|
|
</div>
|
|
{log.operation === 'update' && (
|
|
<div style={{ fontSize: 12.5, color: 'var(--text-2)', display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
|
|
<span style={{ color: 'var(--text-3)', textDecoration: 'line-through' }}>{auditValue(log.field, log.old_value)}</span>
|
|
<span style={{ color: 'var(--text-3)' }}>←</span>
|
|
<span style={{ fontWeight: 600 }}>{auditValue(log.field, log.new_value)}</span>
|
|
</div>
|
|
)}
|
|
{log.actor_name && (
|
|
<div style={{ fontSize: 11.5, color: 'var(--text-3)', marginTop: 4 }}>توسط {log.actor_name}</div>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function ServiceDetailPageInner() {
|
|
const { uuid } = useParams<{ uuid: string }>();
|
|
const navigate = useNavigate();
|
|
const qc = useQueryClient();
|
|
// مجوز منشی؛ برای owner/پزشک همیشه true (usePermissions بدون context آزاد است).
|
|
const { can } = usePermissions();
|
|
const canUpdate = can('services', 'update');
|
|
|
|
const [urlState, setUrlState] = useUrlState({ tab: 'info' });
|
|
// تبِ ناشناخته (لینک قدیمی به گروهها/بخشها) به اطلاعات برمیگردد، نه صفحهٔ خالی.
|
|
const tab = (TABS.some((t) => t.id === urlState.tab) ? urlState.tab : 'info') as TabId;
|
|
const setTab = (id: TabId) => setUrlState({ tab: id });
|
|
const [editOpen, setEditOpen] = 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
|
|
backTo="/admin/clinic-services"
|
|
title={item.name}
|
|
breadcrumbs={[
|
|
{ label: 'سرویسها', to: '/admin/clinic-services' },
|
|
...(item.section_name ? [{ label: item.section_name }] : []),
|
|
{ label: item.name },
|
|
]}
|
|
action={
|
|
canUpdate ? (
|
|
<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>
|
|
) : undefined
|
|
}
|
|
/>
|
|
|
|
<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 === 'insurance' && <InsuranceTab item={item} onManage={() => setInsuranceOpen(true)} canUpdate={canUpdate} />}
|
|
{tab === 'categories' && (
|
|
<ServiceCategoryTab
|
|
serviceUuid={item.uuid}
|
|
categoryUuid={item.catalog_category_uuid ?? null}
|
|
canEdit={canUpdate}
|
|
/>
|
|
)}
|
|
{tab === 'goods' && <GoodsTab item={item} onEdit={() => setEditOpen(true)} canUpdate={canUpdate} />}
|
|
{tab === 'history' && <HistoryTab item={item} />}
|
|
|
|
<ServiceItemFormModal
|
|
item={editOpen ? item : null}
|
|
sectionUuid={item.section_uuid ?? null}
|
|
onClose={() => setEditOpen(false)}
|
|
onManageInsurance={() => setInsuranceOpen(true)}
|
|
/>
|
|
<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>
|
|
);
|
|
}
|