design invoice

2026-02-21 11:38:39 +03:30
parent 7d702c41f8
commit 8a0a62b6d7
10 changed files with 427 additions and 5 deletions
@@ -0,0 +1,125 @@
+import { type FC, type ChangeEvent } from "react";
+import Input from "@/components/Input";
+import ProductsSelect from "@/pages/order/components/ProductsSelect";
+import type { CreatePreInvoiceItemType } from "../types/Types";
+import { Add, Trash } from "iconsax-react";
+type Props = {
+  item: CreatePreInvoiceItemType;
+  index: number;
+  onChange: (index: number, field: keyof CreatePreInvoiceItemType, value: string | number) => void;
+  onAdd: () => void;
+  onRemove: () => void;
+  canRemove: boolean;
+  error?: Partial<Record<keyof CreatePreInvoiceItemType, string>>;
+};
+
+const InvoiceItemRow: FC<Props> = ({
+  item,
+  index,
+  onChange,
+  onAdd,
+  onRemove,
+  canRemove,
+  error,
+}) => {
+  const total = (item.quantity || 0) * (item.unitPrice || 0) - (item.discount || 0);
+
+  const handleProductChange = (e: ChangeEvent<HTMLSelectElement>) => {
+    onChange(index, "productId", e.target.value);
+  };
+
+  return (
+    <div className="flex flex-wrap items-end gap-4 mt-6">
+      <div className="min-w-[140px] flex-1">
+        <ProductsSelect
+          value={item.productId}
+          onChange={handleProductChange}
+          error_text={error?.productId}
+        />
+      </div>
+
+      <div className="min-w-[140px] flex-1">
+        <Input
+          label="توضیحات"
+          value={item.description}
+          onChange={(e) => onChange(index, "description", e.target.value)}
+          error_text={error?.description}
+        />
+      </div>
+
+      <div className="w-[100px]">
+        <Input
+          label="تعداد"
+          type="number"
+          min={1}
+          value={item.quantity || ""}
+          onChange={(e) =>
+            onChange(index, "quantity", e.target.value ? Number(e.target.value) : 0)
+          }
+          error_text={error?.quantity}
+        />
+      </div>
+
+      <div className="w-[120px]">
+        <Input
+          label="مبلغ واحد"
+          type="text"
+          inputMode="numeric"
+          value={item.unitPrice ? String(item.unitPrice) : ""}
+          seprator
+          onChange={(e) => {
+            const raw = String(e.target.value).replace(/,/g, "");
+            onChange(index, "unitPrice", raw ? Number(raw) : 0);
+          }}
+          error_text={error?.unitPrice}
+        />
+      </div>
+
+      <div className="w-[120px]">
+        <Input
+          label="تخفیف"
+          type="text"
+          inputMode="numeric"
+          value={item.discount ? String(item.discount) : ""}
+          seprator
+          onChange={(e) => {
+            const raw = String(e.target.value).replace(/,/g, "");
+            onChange(index, "discount", raw ? Number(raw) : 0);
+          }}
+        />
+      </div>
+
+      <div className="w-[120px]">
+        <Input
+          label="مبلغ کل"
+          readOnly
+          value={total >= 0 ? total.toLocaleString("fa-IR") : "۰"}
+          unit="ریال"
+        />
+      </div>
+
+      <div className="flex gap-2 items-end h-10">
+        <button
+          type="button"
+          onClick={onAdd}
+          className="w-10 h-10 rounded-full bg-primary flex items-center justify-center flex-shrink-0 hover:opacity-90 transition-opacity"
+          aria-label="افزودن آیتم"
+        >
+          <Add size={20} color="black" />
+        </button>
+        {canRemove && (
+          <button
+            type="button"
+            onClick={onRemove}
+            className="w-10 h-10 rounded-full border border-border flex items-center justify-center flex-shrink-0 hover:bg-red-50 hover:border-red-200 transition-colors"
+            aria-label="حذف آیتم"
+          >
+            <Trash size={18} color="#dc2626" />
+          </button>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default InvoiceItemRow;