add payment

src/pages/orders/components/AddPaymentModal.tsx

@@ -0,0 +1,102 @@
+import { type FC, useEffect, useState } from 'react'
+import DefaulModal from '@/components/DefaulModal'
+import Button from '@/components/Button'
+import Input from '@/components/Input'
+import Textarea from '@/components/Textarea'
+import Select from '@/components/Select'
+import { PaymentMethodEnum } from '@/pages/paymentMethods/enum/Enum'
+
+interface AddPaymentModalProps {
+    isOpen: boolean
+    onClose: () => void
+    defaultAmount: number
+    isLoading?: boolean
+    onSubmit: (amount: number, description: string) => void
+}
+
+const AddPaymentModal: FC<AddPaymentModalProps> = ({
+    isOpen,
+    onClose,
+    defaultAmount,
+    isLoading,
+    onSubmit,
+}) => {
+    const [amount, setAmount] = useState(String(defaultAmount))
+    const [description, setDescription] = useState('')
+    const [error, setError] = useState('')
+
+    useEffect(() => {
+        if (!isOpen) return
+        setAmount(String(Math.max(0, defaultAmount)))
+        setDescription('')
+        setError('')
+    }, [isOpen, defaultAmount])
+
+    const handleSubmit = () => {
+        const parsed = Number(amount)
+        if (!parsed || parsed <= 0) {
+            setError('مبلغ پرداخت باید بیشتر از صفر باشد')
+            return
+        }
+        onSubmit(parsed, description.trim())
+    }
+
+    return (
+        <DefaulModal
+            open={isOpen}
+            close={onClose}
+            isHeader
+            title_header='افزودن پرداخت'
+            width={420}
+        >
+            <div className='mt-6 space-y-4'>
+                <Select
+                    label='روش پرداخت'
+                    value={PaymentMethodEnum.Cash}
+                    items={[{ value: PaymentMethodEnum.Cash, label: 'نقدی' }]}
+                    disabled
+                />
+
+                <Input
+                    label='مبلغ پرداخت (تومان)'
+                    type='number'
+                    inputMode='numeric'
+                    min={1}
+                    seprator
+                    value={amount}
+                    onChange={(e) => {
+                        setAmount(e.target.value)
+                        setError('')
+                    }}
+                />
+
+                <Textarea
+                    placeholder='توضیحات (اختیاری)'
+                    value={description}
+                    onChange={(e) => {
+                        setDescription(e.target.value)
+                        setError('')
+                    }}
+                    className='bg-transparent border border-gray-500 rounded-xl w-full p-2 min-h-[80px]'
+                />
+
+                {error && <p className='text-xs text-red-500 text-center'>{error}</p>}
+
+                <div className='flex gap-4 justify-center pt-4'>
+                    <Button
+                        label='تایید'
+                        onClick={handleSubmit}
+                        isloading={isLoading}
+                    />
+                    <Button
+                        label='انصراف'
+                        className='bg-transparent text-black border border-primary'
+                        onClick={onClose}
+                    />
+                </div>
+            </div>
+        </DefaulModal>
+    )
+}
+
+export default AddPaymentModal