hamedandClaude Opus 5
4bca659939
Task 08's pricing chain was reachable only through the API, so a clinic could not define a price list or see what a booked appointment was actually charged. Price lists - Draft / active / expired are shown as three states because they mean three different things operationally: a draft has no effect on today's price at all - Activation is a separate action rather than a checkbox in the form, matching the backend rule that creating a list must not change anything - "Copy" seeds a new list from an existing one starting the day the old one ends, since most lists are last quarter's with a few numbers moved - "All branches" is an explicit option, not an empty field Invoice card - Renders the recorded chain down to the final amount, hiding zero rows so the card stays readable - A missing invoice renders as a normal state, not an error: an appointment that was never confirmed has no invoice - Says outright that the numbers are from the appointment's own date and later tariff changes do not move them — otherwise someone who edited a price yesterday reads today's older number as a bug Also corrects task 08's checklist: its test section carried a copy-pasted "no UI was built" note against rows whose tests have existed since the task shipped. Replaced with the real test names and the two that genuinely are not covered. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
111 lines
4.2 KiB
TypeScript
111 lines
4.2 KiB
TypeScript
import React from 'react';
|
||
import { formatDate, formatRial } from '../lib/utils';
|
||
import { useAppointmentInvoice } from '../hooks/usePriceLists';
|
||
|
||
interface Props {
|
||
appointmentUuid: string;
|
||
}
|
||
|
||
/**
|
||
* فاکتور تفکیکشدهٔ نوبت.
|
||
*
|
||
* اعدادش snapshot لحظهٔ ثبتاند، نه محاسبهٔ امروز: تغییر تعرفه هرگز فاکتور صادرشده را
|
||
* عوض نمیکند (قانون پنجم مستند). همین جمله زیر کارت هم نوشته میشود، چون کاربری که
|
||
* قیمت را دیروز عوض کرده و امروز عدد قدیمی میبیند وگرنه فکر میکند سیستم خراب است.
|
||
*/
|
||
export default function AppointmentInvoiceCard({ appointmentUuid }: Props) {
|
||
const { invoice, loading, missing } = useAppointmentInvoice(appointmentUuid);
|
||
|
||
if (loading) {
|
||
return (
|
||
<div className="card" style={{ fontSize: 13, color: 'var(--text-3)' }}>
|
||
در حال بارگذاری فاکتور…
|
||
</div>
|
||
);
|
||
}
|
||
|
||
// نبودِ فاکتور خطا نیست: نوبتی که هنوز ثبت نهایی نشده، فاکتوری هم ندارد.
|
||
if (missing || !invoice) {
|
||
return (
|
||
<div className="card" style={{ fontSize: 13, color: 'var(--text-3)' }}>
|
||
برای این نوبت فاکتوری ثبت نشده است.
|
||
</div>
|
||
);
|
||
}
|
||
|
||
const rows: { label: string; value: number; muted?: boolean }[] = [
|
||
{ label: 'قیمت پایه', value: invoice.base_rials },
|
||
{ label: 'آیتمهای اضافه', value: invoice.items_rials },
|
||
{ label: 'تخفیف', value: -invoice.discount_rials },
|
||
{ label: 'سهم بیمهٔ پایه', value: -invoice.insurance_base_rials },
|
||
{ label: 'سهم بیمهٔ تکمیلی', value: -invoice.insurance_supplementary_rials },
|
||
{ label: 'مالیات', value: invoice.tax_rials },
|
||
];
|
||
|
||
return (
|
||
<div className="card" style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
|
||
<div style={{ display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap' }}>
|
||
<h3 style={{ fontSize: 15, margin: 0 }}>فاکتور</h3>
|
||
{invoice.created_at !== undefined && (
|
||
<span style={{ fontSize: 12, color: 'var(--text-3)' }}>
|
||
ثبتشده در {formatDate(invoice.created_at)}
|
||
</span>
|
||
)}
|
||
</div>
|
||
|
||
<div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
|
||
{rows
|
||
.filter((row) => row.value !== 0)
|
||
.map((row) => (
|
||
<div
|
||
key={row.label}
|
||
style={{ display: 'flex', justifyContent: 'space-between', fontSize: 13 }}
|
||
>
|
||
<span style={{ color: 'var(--text-2)' }}>{row.label}</span>
|
||
<span style={{ color: row.value < 0 ? 'var(--success)' : undefined }}>
|
||
{formatRial(Math.abs(row.value))}
|
||
{row.value < 0 ? ' −' : ''}
|
||
</span>
|
||
</div>
|
||
))}
|
||
|
||
{invoice.breakdown.discounts.map((line, index) => (
|
||
<div
|
||
key={index}
|
||
style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12, color: 'var(--text-3)' }}
|
||
>
|
||
<span>{line.label}</span>
|
||
<span>{formatRial(Math.abs(line.rials))}</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
<div
|
||
style={{
|
||
borderTop: '1px solid var(--border)',
|
||
paddingTop: 10,
|
||
display: 'flex',
|
||
justifyContent: 'space-between',
|
||
fontSize: 15,
|
||
fontWeight: 600,
|
||
}}
|
||
>
|
||
<span>مبلغ نهایی</span>
|
||
<span>{formatRial(invoice.final_rials)}</span>
|
||
</div>
|
||
|
||
{invoice.deposit_rials > 0 && (
|
||
<div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 13 }}>
|
||
<span style={{ color: 'var(--text-2)' }}>بیعانه</span>
|
||
<span>{formatRial(invoice.deposit_rials)}</span>
|
||
</div>
|
||
)}
|
||
|
||
<span style={{ fontSize: 12, color: 'var(--text-3)' }}>
|
||
قیمتها بر اساس تاریخ همین نوبت محاسبه و ثبت شدهاند؛ تغییر بعدی تعرفه این فاکتور
|
||
را عوض نمیکند.
|
||
</span>
|
||
</div>
|
||
);
|
||
}
|