hamed/clinicpro
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add tests and implementation for ServiceDetailPage and PriceInput components

Browse Source 
- 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
2026-07-18 12:10:49 +03:30
parent f1d58e1604
commit 42d9ad26c5
27 changed files with 1758 additions and 284 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/admin/pages/ClinicServicesPage.tsx
+28 -257
View File
@@ -1,4 +1,5 @@
import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import {
PlusIcon, PencilIcon, TrashIcon, WrenchScrewdriverIcon, BanknotesIcon,
@@ -12,29 +13,17 @@ 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, formatNumber, rialToToman, tomanToRial } from '../lib/utils';
import type { ServiceSection, ServiceItem } from '../types';
import { formatRial, formatNumber } from '../lib/utils';
import Modal from '../components/ui/Modal';
import PriceInput from '../components/ui/PriceInput';
import ConfirmDialog from '../components/ui/ConfirmDialog';
import ServiceTariffModal from '../components/ServiceTariffModal';
import ServiceInsuranceModal from '../components/ServiceInsuranceModal';
import SearchableSelect from '../components/ui/SearchableSelect';
import ServiceItemFormModal from '../components/ServiceItemFormModal';
import FeatureGate from '../components/ui/FeatureGate';
import { numericField } from '../lib/forms';
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_uuids: z.array(z.string()).optional(),
insurance_covered: z.boolean().optional(),
insurance_price_rials: z.coerce.number().min(0).optional(),
duration_minutes: z.coerce.number().min(0).optional(),
bookable: z.boolean().optional(),
});
type SectionForm = z.infer<typeof sectionSchema>;
type ItemForm = z.infer<typeof itemSchema>;
const EMPTY_SECTIONS: ServiceSection[] = [];
const EMPTY_ITEMS: ServiceItem[] = [];
@@ -52,26 +41,9 @@ function Avatar({ name }: { name: string }) {
);
}
function SrvRow({ label, value, strong, danger }: { label: string; value: string; strong?: boolean; danger?: boolean }) {
return (
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: 8, padding: '3px 0' }}>
<span style={{ fontSize: 12, color: 'var(--text-3)', flexShrink: 0 }}>{label}:</span>
<span
style={{
fontSize: 14,
fontWeight: strong ? 800 : 500,
color: danger ? 'var(--danger)' : strong ? 'var(--primary)' : 'var(--text-2)',
textAlign: 'left',
}}
>
{value}
</span>
</div>
);
}
function ClinicServicesPageInner() {
const qc = useQueryClient();
const navigate = useNavigate();
const [selectedSection, setSelectedSection] = useState<ServiceSection | null>(null);
const [sectionModal, setSectionModal] = useState<'create' | ServiceSection | null>(null);
@@ -95,33 +67,10 @@ function ClinicServicesPageInner() {
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 sectionForm = useForm<SectionForm>({ resolver: zodResolver(sectionSchema) });
const itemForm = useForm<ItemForm>({ resolver: zodResolver(itemSchema) });
const selectedStaffUuids = itemForm.watch('staff_uuids') ?? [];
const editingMembers = itemModal && typeof itemModal === 'object'
? (itemModal.staff_members ?? (itemModal.staff ? [itemModal.staff] : []))
: [];
const staffOptions = allStaff
.filter((s) => s.active || editingMembers.some((m) => m.uuid === s.uuid))
.filter((s) => !selectedStaffUuids.includes(s.uuid))
.map((s) => ({
value: s.uuid,
label: s.active ? s.full_name : `${s.full_name} (غیرفعال)`,
}));
const staffNameOf = (uuid: string) =>
allStaff.find((s) => s.uuid === uuid)?.full_name
?? editingMembers.find((m) => m.uuid === uuid)?.full_name
?? uuid;
const items = allItems.filter((it) => {
if (!showInactive && !it.active) return false;
@@ -164,27 +113,6 @@ function ClinicServicesPageInner() {
onError: (e: any) => toast.error(e.message),
});
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 }),
@@ -201,23 +129,7 @@ function ClinicServicesPageInner() {
setSectionModal(s);
};
const openEditItem = (item: ServiceItem) => {
itemForm.reset({
name: item.name,
price_rials: rialToToman(item.price_rials),
staff_uuids: (item.staff_members ?? (item.staff ? [item.staff] : [])).map((s) => s.uuid),
insurance_covered: item.insurance_covered ?? false,
insurance_price_rials: rialToToman(item.insurance_price_rials ?? 0),
duration_minutes: item.duration_minutes ?? undefined,
bookable: item.bookable ?? false,
});
setItemModal(item);
};
const openCreateItem = () => {
itemForm.reset({ name: '', price_rials: 0, staff_uuids: [], insurance_covered: false, insurance_price_rials: 0, duration_minutes: undefined, bookable: false });
setItemModal('create');
};
const openCreateItem = () => setItemModal('create');
return (
<>
@@ -337,16 +249,20 @@ function ClinicServicesPageInner() {
return (
<div
key={item.uuid}
role="link"
tabIndex={0}
onClick={() => navigate(`/admin/clinic-services/${item.uuid}`)}
onKeyDown={(e) => { if (e.key === 'Enter') navigate(`/admin/clinic-services/${item.uuid}`); }}
style={{
position: 'relative', background: 'var(--surface)', borderRadius: 8,
boxShadow: '0 1px 24.8px rgba(204,204,204,0.18)',
border: '1px solid var(--border)', padding: 14,
border: '1px solid var(--border)', padding: 14, cursor: 'pointer',
opacity: item.active ? 1 : 0.7,
}}
>
{/* نوار بالا: ⋮ (چپ) + وضعیت و نام (راست) */}
<div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 8, marginBottom: 14 }}>
<button className="btn sm ghost" style={{ padding: 4 }} onClick={() => setMenuOpen(menuOpen === item.uuid ? null : item.uuid)} title="عملیات">
<button className="btn sm ghost" style={{ padding: 4 }} onClick={(e) => { e.stopPropagation(); setMenuOpen(menuOpen === item.uuid ? null : item.uuid); }} title="عملیات">
<EllipsisHorizontalIcon style={{ width: 20 }} />
</button>
<div style={{ display: 'flex', alignItems: 'center', gap: 8, minWidth: 0 }}>
@@ -358,9 +274,9 @@ function ClinicServicesPageInner() {
</div>
{menuOpen === item.uuid && (
<>
<div style={{ position: 'fixed', inset: 0, zIndex: 40 }} onClick={() => setMenuOpen(null)} />
<div style={{ position: 'absolute', top: 40, insetInlineStart: 8, zIndex: 41, background: 'var(--surface)', border: '1px solid var(--border)', borderRadius: 'var(--r-sm)', boxShadow: 'var(--shadow)', padding: 6, minWidth: 176, display: 'flex', flexDirection: 'column', gap: 2 }}>
<button style={menuItemStyle} onClick={() => { setMenuOpen(null); openEditItem(item); }}><PencilIcon style={{ width: 15 }} /> ویرایش</button>
<div style={{ position: 'fixed', inset: 0, zIndex: 40 }} onClick={(e) => { e.stopPropagation(); setMenuOpen(null); }} />
<div onClick={(e) => e.stopPropagation()} style={{ position: 'absolute', top: 40, insetInlineStart: 8, zIndex: 41, background: 'var(--surface)', border: '1px solid var(--border)', borderRadius: 'var(--r-sm)', boxShadow: 'var(--shadow)', padding: 6, minWidth: 176, display: 'flex', flexDirection: 'column', gap: 2 }}>
<button style={menuItemStyle} onClick={() => { setMenuOpen(null); setItemModal(item); }}><PencilIcon style={{ width: 15 }} /> ویرایش</button>
<button style={menuItemStyle} onClick={() => { setMenuOpen(null); setTariffItem(item); }}><BanknotesIcon style={{ width: 15 }} /> تعرفه‌های سالانه</button>
<button style={menuItemStyle} onClick={() => { setMenuOpen(null); setInsuranceItem(item); }}><ShieldCheckIcon style={{ width: 15 }} /> پوشش بیمه</button>
<button style={menuItemStyle} onClick={() => { setMenuOpen(null); setToggleItem(item); }}>{item.active ? <EyeSlashIcon style={{ width: 15 }} /> : <EyeIcon style={{ width: 15 }} />}{item.active ? ' غیرفعال‌کردن' : ' فعال‌کردن'}</button>
@@ -387,9 +303,14 @@ function ClinicServicesPageInner() {
</span>
</div>
{item.insurance_covered && item.insurance_price_rials != null && (
<SrvRow label="سهم بیمار (بیمه)" value={formatRial(item.insurance_price_rials)} />
)}
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 8, padding: '3px 0' }}>
<span style={{ fontSize: 12, color: 'var(--text-3)', display: 'inline-flex', alignItems: 'center', gap: 5 }}>
<ShieldCheckIcon style={{ width: 14, color: 'var(--text-3)' }} /> بیمه:
</span>
{item.insurance_covered
? <span className="badge green" style={{ fontSize: 11 }}>تحت پوشش</span>
: <span style={{ fontSize: 12, color: 'var(--text-3)' }}>—</span>}
</div>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 8, padding: '3px 0' }}>
<span style={{ fontSize: 12, color: 'var(--text-3)', flexShrink: 0, display: 'inline-flex', alignItems: 'center', gap: 5 }}>
@@ -436,162 +357,12 @@ function ClinicServicesPageInner() {
</Modal>
{/* ───────── Modal سرویس ───────── */}
<Modal
open={itemModal !== null}
<ServiceItemFormModal
item={itemModal}
sectionUuid={selectedSection?.uuid ?? 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={''}
onChange={(v) => {
if (v != null) itemForm.setValue('staff_uuids', [...selectedStaffUuids, String(v)]);
}}
placeholder="افزودن پرسنل (اختیاری)"
noOptionsMessage="پرسنلی باقی نمانده"
height={42}
/>
{selectedStaffUuids.length > 0 && (
<div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, marginTop: 8 }}>
{selectedStaffUuids.map((uuid) => (
<span key={uuid} style={{
display: 'inline-flex', alignItems: 'center', gap: 6,
fontSize: 12.5, color: 'var(--text-2)', background: 'var(--surface-2)',
border: '1px solid var(--border)', borderRadius: 999, padding: '4px 6px 4px 10px',
}}>
{staffNameOf(uuid)}
<button
type="button" aria-label={`حذف ${staffNameOf(uuid)}`}
onClick={() => itemForm.setValue('staff_uuids', selectedStaffUuids.filter((u) => u !== uuid))}
style={{ display: 'grid', placeItems: 'center', width: 16, height: 16, border: 'none', cursor: 'pointer', borderRadius: '50%', background: 'var(--surface-3)', color: 'var(--text-3)' }}
>
<XMarkIcon style={{ width: 11 }} />
</button>
</span>
))}
</div>
)}
</div>
</div>
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, alignItems: 'end' }}>
<div>
<label className="field-label">زمان متوسط (دقیقه)</label>
<div className="field">
<input {...numericField(itemForm.register('duration_minutes'))} placeholder="مثلاً: 50" />
</div>
</div>
<label style={{ display: 'flex', alignItems: 'center', gap: 10, cursor: 'pointer', padding: '9px 0' }}>
<span className="switch">
<input
type="checkbox"
checked={itemForm.watch('bookable') ?? false}
onChange={(e) => itemForm.setValue('bookable', e.target.checked)}
/>
<span className="switch-track"><span className="switch-thumb" /></span>
</span>
<span style={{ fontSize: 13 }}>نمایش در نوبت‌دهی</span>
</label>
</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>
onManageInsurance={setInsuranceItem}
/>
<ServiceTariffModal item={tariffItem} onClose={() => setTariffItem(null)} />
<ServiceInsuranceModal item={insuranceItem} onClose={() => setInsuranceItem(null)} />