add payment

src/pages/orders/Details.tsx

@@ -4,6 +4,7 @@ import {
     useVerifyPayment,
     useChangeOrderStatus,
     useRefundPayment,
+    useAddPayment,
     useUpdateOrderFees,
     useAddOrderItem,
     useUpdateOrderItemQuantity,
@@ -23,6 +24,7 @@ import OrderActions from './components/OrderActions'
 import UpdateOrderFeesModal from './components/UpdateOrderFeesModal'
 import AddOrderItemModal from './components/AddOrderItemModal'
 import RefundPaymentModal from './components/RefundPaymentModal'
+import AddPaymentModal from './components/AddPaymentModal'
 import { toast } from 'react-toastify'
 import { extractErrorMessage } from '@/config/func'
 import { printOrderReceipt } from './print/orderReceiptPrint'
@@ -34,6 +36,7 @@ const OrderDetails: FC = () => {
     const { mutate: verifyPayment, isPending: isVerifyingPayment } = useVerifyPayment()
     const { mutate: changeOrderStatus, isPending: isChangingStatus } = useChangeOrderStatus()
     const { mutate: refundPayment, isPending: isRefunding } = useRefundPayment()
+    const { mutate: addPayment, isPending: isAddingPayment } = useAddPayment()
     const { mutate: updateOrderFees, isPending: isUpdatingFees } = useUpdateOrderFees()
     const { mutate: addOrderItem, isPending: isAddingItem } = useAddOrderItem()
     const { mutate: updateOrderItemQuantity, isPending: isUpdatingItemQuantity } = useUpdateOrderItemQuantity()
@@ -41,6 +44,7 @@ const OrderDetails: FC = () => {
 
     const [showCancelModal, setShowCancelModal] = useState(false)
     const [refundModal, setRefundModal] = useState<{ defaultAmount: number; maxAmount: number } | null>(null)
+    const [showAddPaymentModal, setShowAddPaymentModal] = useState(false)
     const [showEditFeesModal, setShowEditFeesModal] = useState(false)
     const [showAddItemModal, setShowAddItemModal] = useState(false)
     const [itemIdToRemove, setItemIdToRemove] = useState<string | null>(null)
@@ -87,6 +91,7 @@ const OrderDetails: FC = () => {
     const isPendingPayment = order.status === OrderStatus.NEW
     const canEditFees = !isCanceled && !isCompleted
     const canEditItems = !isCanceled && !isCompleted
+    const canAddPayment = !isCanceled && Number(order.balance ?? 0) > 0
     const isUpdatingItem = isAddingItem || isUpdatingItemQuantity || isRemovingItem
     const canCompleteOrder = [
         OrderStatus.DELIVERED_TO_WAITER,
@@ -219,6 +224,27 @@ const OrderDetails: FC = () => {
         )
     }
 
+    const handleAddPayment = (amount: number, description: string) => {
+        addPayment(
+            {
+                orderId: order.id,
+                params: {
+                    amount,
+                    ...(description ? { description } : {}),
+                },
+            },
+            {
+                onSuccess: () => {
+                    toast.success('پرداخت با موفقیت ثبت شد')
+                    setShowAddPaymentModal(false)
+                },
+                onError: (error) => {
+                    toast.error(extractErrorMessage(error))
+                },
+            }
+        )
+    }
+
     const handlePrintOrder = () => {
         printOrderReceipt(order)
     }
@@ -281,15 +307,15 @@ const OrderDetails: FC = () => {
     }
 
     return (
-        <div className='mt-5'>
+        <div className='mt-5 pb-8'>
             <div className='flex justify-between items-center'>
                 <h1 className='text-lg font-light'>
                     سفارش {formatFaNumber(order.orderNumber)}
                 </h1>
             </div>
 
-            <div className='flex gap-7 mt-9'>
-                <div className='flex-1 space-y-8'>
+            <div className='flex flex-col lg:flex-row gap-5 lg:gap-7 mt-6 sm:mt-9'>
+                <div className='flex-1 min-w-0 space-y-5 sm:space-y-8 order-2 lg:order-1'>
                     <CustomerInfo order={order} />
                     <OrderItemsDetails
                         order={order}
@@ -305,10 +331,12 @@ const OrderDetails: FC = () => {
                         isVerifyingPayment={isVerifyingPayment}
                         verifyingPaymentId={verifyingPaymentId}
                         onVerifyPayment={handleVerifyPayment}
+                        canAddPayment={canAddPayment}
+                        onAddPayment={() => setShowAddPaymentModal(true)}
                     />
                 </div>
 
-                <div>
+                <div className='w-full lg:w-[330px] shrink-0 order-1 lg:order-2'>
                     <PaymentInfo
                         order={order}
                         canEditFees={canEditFees}
@@ -373,6 +401,14 @@ const OrderDetails: FC = () => {
                 onSubmit={handleRefund}
             />
 
+            <AddPaymentModal
+                isOpen={showAddPaymentModal}
+                onClose={() => setShowAddPaymentModal(false)}
+                defaultAmount={Number(order.balance ?? 0)}
+                isLoading={isAddingPayment}
+                onSubmit={handleAddPayment}
+            />
+
             <ModalConfrim
                 isOpen={!!itemIdToRemove}
                 close={() => setItemIdToRemove(null)}

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

src/pages/orders/components/CustomerInfo.tsx

@@ -14,7 +14,7 @@ const CustomerInfo: FC<CustomerInfoProps> = ({ order }) => {
         : '-'
 
     return (
-        <div className='w-full bg-white rounded-4xl p-8'>
+        <div className='w-full bg-white rounded-4xl p-4 sm:p-6 lg:p-8'>
             <div className='flex justify-between items-center'>
                 <div className='text-lg font-light flex items-center gap-2'>
                     <User color='#000' size={20} />
@@ -22,7 +22,7 @@ const CustomerInfo: FC<CustomerInfoProps> = ({ order }) => {
                 </div>
             </div>
 
-            <div className='mt-8 flex flex-wrap gap-y-7 gap-20 text-[13px] font-light border-b border-dashed border-border pb-8'>
+            <div className='mt-6 sm:mt-8 flex flex-wrap gap-x-8 gap-y-4 sm:gap-x-12 sm:gap-y-7 text-[13px] font-light border-b border-dashed border-border pb-6 sm:pb-8'>
                 <div className='flex gap-2'>
                     <div className='text-description'>
                         شماره سفارش:
@@ -54,45 +54,6 @@ const CustomerInfo: FC<CustomerInfoProps> = ({ order }) => {
                     </div>
                 </div>
  
-                {order.user?.birthDate && (
-                    <div className='flex gap-2'>
-                        <div className='text-description'>تاریخ تولد:</div>
-                        <div className='flex items-center gap-1'>
-                            <Cake size={14} />
-                            {formatOptionalDate(order.user.birthDate, {
-                                year: 'numeric',
-                                month: '2-digit',
-                                day: '2-digit'
-                            })}
-                        </div>
-                    </div>
-                )}
-
-                {order.user?.marriageDate && (
-                    <div className='flex gap-2'>
-                        <div className='text-description'>تاریخ ازدواج:</div>
-                        <div className='flex items-center gap-1'>
-                            <Heart size={14} />
-                            {formatOptionalDate(order.user.marriageDate, {
-                                year: 'numeric',
-                                month: '2-digit',
-                                day: '2-digit'
-                            })}
-                        </div>
-                    </div>
-                )}
-
-                <div className='flex gap-2'>
-                    <div className='text-description'>جنسیت:</div>
-                    <div>{order.user?.gender ? 'مرد' : 'زن'}</div>
-                </div>
-
-                <div className='flex gap-2'>
-                    <div className='text-description'>وضعیت:</div>
-                    <div className='px-2 py-1 rounded text-xs'>
-                        {order.user?.isActive ? 'فعال' : 'غیرفعال'}
-                    </div>
-                </div>
 
                 {order.user?.referrer && (
                     <div className='flex gap-2'>
@@ -103,13 +64,13 @@ const CustomerInfo: FC<CustomerInfoProps> = ({ order }) => {
             </div>
 
             {order.userAddress && (
-                <div className='mt-8 space-y-4 text-[13px] font-light'>
-                    <div className='flex gap-2 items-start'>
-                        <div className='text-description flex items-center gap-1'>
+                <div className='mt-6 sm:mt-8 space-y-4 text-[13px] font-light'>
+                    <div className='flex flex-col sm:flex-row gap-1 sm:gap-2 items-start'>
+                        <div className='text-description flex items-center gap-1 shrink-0'>
                             <Location size={14} />
                             آدرس کامل:
                         </div>
-                        <div className='flex-1'>{fullAddress}</div>
+                        <div className='flex-1 min-w-0 break-words'>{fullAddress}</div>
                     </div>
 
                     {order.userAddress.fullName && (

src/pages/orders/components/OrderActions.tsx

@@ -77,7 +77,7 @@ const OrderActions: FC<OrderActionsProps> = ({
     }
 
     return (
-        <div className='mt-6 flex flex-col gap-3'>
+        <div className='mt-5 sm:mt-6 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-1 gap-3'>
             <Button
                 label='چاپ'
                 onClick={onPrint}
@@ -134,7 +134,7 @@ const OrderActions: FC<OrderActionsProps> = ({
                     label='لغو سفارش'
                     onClick={handleCancelOrder}
                     isloading={isChangingStatus && loadingAction === 'cancelOrder'}
-                    className='bg-transparent border border-red-500 text-red-500 hover:bg-red-50'
+                    className='bg-transparent border border-red-500 text-red-500 hover:bg-red-50 sm:col-span-2 lg:col-span-1'
                 />
             )}
         </div>

src/pages/orders/components/OrderItemsDetails.tsx

@@ -157,8 +157,8 @@ const OrderItemsDetails: FC<OrderItemsDetailsProps> = ({
     }
 
     return (
-        <div className='w-full bg-white rounded-4xl p-8'>
-            <div className='mb-6 flex items-center justify-between gap-3'>
+        <div className='w-full bg-white rounded-4xl p-4 sm:p-6 lg:p-8'>
+            <div className='mb-5 sm:mb-6 flex flex-wrap items-center justify-between gap-3'>
                 <div className='text-lg font-light flex items-center gap-2'>
                     <ShoppingCart color='#000' size={20} />
                     جزییات سفارش
@@ -167,13 +167,13 @@ const OrderItemsDetails: FC<OrderItemsDetailsProps> = ({
                     <Button
                         label='افزودن آیتم'
                         onClick={onAddItem}
-                        className='w-fit px-4 h-9 text-xs'
+                        className='w-full sm:w-fit px-4 h-9 text-xs'
                         disabled={isUpdatingItem}
                     />
                 )}
             </div>
 
-            <div className='mb-6 flex flex-wrap gap-4 text-[13px] font-light'>
+            <div className='mb-5 sm:mb-6 flex flex-wrap gap-x-6 gap-y-3 sm:gap-4 text-[13px] font-light'>
                 <div className='flex gap-2'>
                     <div className='text-description'>زمان سفارش:</div>
                     <div className='flex items-center gap-1'>
@@ -276,15 +276,15 @@ const OrderItemsDetails: FC<OrderItemsDetailsProps> = ({
                     </div>
                     <div className='space-y-3'>
                         {order.history.map((historyItem, index) => (
-                            <div key={index} className='flex justify-between items-center text-[13px] bg-gray-50 p-3 rounded-lg'>
-                                <div className='flex items-center gap-2'>
+                            <div key={index} className='flex flex-col sm:flex-row sm:justify-between sm:items-center gap-1 sm:gap-3 text-[13px] bg-gray-50 p-3 rounded-lg'>
+                                <div className='flex items-center gap-2 min-w-0'>
                                     <div
-                                        className='size-2 rounded-full'
+                                        className='size-2 rounded-full shrink-0'
                                         style={{ backgroundColor: getStatusColor(historyItem.status) }}
                                     ></div>
-                                    <span>{t(`order_status.${historyItem.status}`) || historyItem.status}</span>
+                                    <span className='truncate'>{t(`order_status.${historyItem.status}`) || historyItem.status}</span>
                                 </div>
-                                <div className='text-description'>
+                                <div className='text-description shrink-0 pr-4 sm:pr-0'>
                                     {formatOptionalDate(historyItem.changedAt, {
                                         year: 'numeric',
                                         month: '2-digit',

src/pages/orders/components/PaymentInfo.tsx

@@ -64,15 +64,15 @@ const PaymentInfo: FC<PaymentInfoProps> = ({
     ) : null;
 
   return (
-    <div className="w-[330px] h-fit bg-white rounded-4xl p-8">
+    <div className="w-full h-fit bg-white rounded-4xl p-4 sm:p-6 lg:p-8">
       <div className="flex justify-between items-center">
         <div className="font-light">خلاصه </div>
       </div>
 
       <div className="mt-5">
-        <div className="flex mt-4 text-[13px] font-light justify-between items-center border-b border-border border-dashed pb-4">
-          <div className="text-description">روش پرداخت</div>
-          <div>{order.paymentMethod ? getPaymentMethodText(order.paymentMethod.method) : "-"}</div>
+        <div className="flex mt-4 text-[13px] font-light justify-between items-center border-b border-border border-dashed pb-4 gap-3">
+          <div className="text-description shrink-0">روش پرداخت</div>
+          <div className="min-w-0 break-words">{order.paymentMethod ? getPaymentMethodText(order.paymentMethod.method) : "-"}</div>
         </div>
 
         {order.paymentMethod?.gateway && (

src/pages/orders/components/PaymentsList.tsx

@@ -27,6 +27,8 @@ interface PaymentsListProps {
     isVerifyingPayment: boolean
     verifyingPaymentId?: string | null
     onVerifyPayment: (paymentId: string) => void
+    canAddPayment?: boolean
+    onAddPayment?: () => void
 }
 
 const getPaymentMethodText = (method: string): string => {
@@ -73,6 +75,8 @@ const PaymentsList: FC<PaymentsListProps> = ({
     isVerifyingPayment,
     verifyingPaymentId,
     onVerifyPayment,
+    canAddPayment = false,
+    onAddPayment,
 }) => {
     const isCanceled = order.status === 'canceled'
     const payments = order.payments ?? []
@@ -175,11 +179,20 @@ const PaymentsList: FC<PaymentsListProps> = ({
     )
 
     return (
-        <div className='w-full bg-white rounded-4xl p-8'>
-            <div className='text-lg font-light mb-6 flex items-center gap-2'>
+        <div className='w-full bg-white rounded-4xl p-4 sm:p-6 lg:p-8'>
+            <div className='mb-5 sm:mb-6 flex flex-wrap items-center justify-between gap-3'>
+                <div className='text-lg font-light flex items-center gap-2'>
                     <Moneys color='#000' size={20} />
                     لیست پرداخت‌ها
                 </div>
+                {canAddPayment && onAddPayment && (
+                    <Button
+                        label='افزودن پرداخت'
+                        onClick={onAddPayment}
+                        className='w-full sm:w-fit px-4 h-9 text-xs'
+                    />
+                )}
+            </div>
 
             {rows.length === 0 ? (
                 <div className='text-[13px] text-description font-light py-8 text-center'>

src/pages/orders/hooks/useOrderData.ts

@@ -1,6 +1,6 @@
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import * as api from "../service/OrderService";
-import type { GetOrdersParams, ChangeOrderStatusParams, RefundPaymentParams } from "../service/OrderService";
+import type { GetOrdersParams, ChangeOrderStatusParams, RefundPaymentParams, AddPaymentParams } from "../service/OrderService";
 import type { UpdateOrderFeesType, AddOrderItemType, UpdateOrderItemQuantityType } from "../types/Types";
 
 export const useCreateOrder = () => {
@@ -74,6 +74,18 @@ export const useRefundPayment = () => {
   });
 };
 
+export const useAddPayment = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: ({ orderId, params }: { orderId: string; params: AddPaymentParams }) =>
+      api.addPayment(orderId, params),
+    onSuccess: (_, { orderId }) => {
+      queryClient.invalidateQueries({ queryKey: ["order", orderId] });
+      queryClient.invalidateQueries({ queryKey: ["orders"] });
+    },
+  });
+};
+
 export const useUpdateOrderFees = () => {
   const queryClient = useQueryClient();
   return useMutation({

src/pages/orders/service/OrderService.ts

@@ -28,6 +28,11 @@ export interface RefundPaymentParams {
   description: string;
 }
 
+export interface AddPaymentParams {
+  amount: number;
+  description?: string;
+}
+
 export const createOrder = async (
   params: CreateOrderType
 ): Promise<CreateOrderResponse> => {
@@ -104,6 +109,13 @@ export const refundPayment = async (
   await axios.post(`/admin/orders/${orderId}/refund`, params);
 };
 
+export const addPayment = async (
+  orderId: string,
+  params: AddPaymentParams
+): Promise<void> => {
+  await axios.post(`/admin/orders/${orderId}/payments`, params);
+};
+
 export const updateOrderFees = async (
   orderId: string,
   params: UpdateOrderFeesType