50 lines
1.6 KiB
TypeScript
50 lines
1.6 KiB
TypeScript
import type { Milestone } from "../lib/types";
|
||
import { JalaliDatePicker } from "./JalaliDatePicker";
|
||
import { NumberInput } from "./NumberInput";
|
||
|
||
export interface MilestoneRowProps {
|
||
milestone: Milestone;
|
||
onChange: (m: Milestone) => void;
|
||
onRemove: () => void;
|
||
disabled?: boolean;
|
||
}
|
||
|
||
// یک ردیف مرحلهی پرداخت: تاریخ + مبلغ + دکمهی حذف
|
||
export function MilestoneRow({ milestone, onChange, onRemove, disabled = false }: MilestoneRowProps) {
|
||
return (
|
||
<div className="flex items-start gap-2 w-full my-2">
|
||
{/* کادر انتخاب تاریخ — جمعوجور و دقیقاً متناسب با فرمت تاریخ */}
|
||
<div className="w-28 shrink-0">
|
||
<JalaliDatePicker
|
||
value={milestone.when_iso}
|
||
onChange={(iso) => onChange({ ...milestone, when_iso: iso })}
|
||
placeholder="تاریخ"
|
||
disabled={disabled}
|
||
/>
|
||
</div>
|
||
|
||
{/* کادر ورود مبلغ — کشیده و پرکننده حداکثری عرض صفحه */}
|
||
<div className="flex-1 min-w-0">
|
||
<NumberInput
|
||
value={milestone.amount}
|
||
onChange={(amount) => onChange({ ...milestone, amount })}
|
||
placeholder="مبلغ (تومان)"
|
||
showWords
|
||
disabled={disabled}
|
||
/>
|
||
</div>
|
||
|
||
{/* دکمه حذف */}
|
||
{!disabled && (
|
||
<button
|
||
type="button"
|
||
className="mt-2 text-red-500 hover:text-red-700 text-lg font-bold shrink-0 px-1 transition-colors"
|
||
title="حذف"
|
||
onClick={onRemove}
|
||
>
|
||
×
|
||
</button>
|
||
)}
|
||
</div>
|
||
);
|
||
} |