update costs

src/pages/orders/components/OrderActions.tsx

@@ -5,6 +5,7 @@ interface OrderActionsProps {
     onPrint: () => void
     showSendToKitchenButton: boolean
     showCancelButton: boolean
+    showEditFeesButton?: boolean
     isPreparing: boolean
     isCourierDelivery: boolean
     isDineInOrCarDelivery: boolean
@@ -18,12 +19,14 @@ interface OrderActionsProps {
     onDeliverToReceptionist: () => void
     onCompleteOrder: () => void
     onCancelOrder: () => void
+    onEditFees?: () => void
 }
 
 const OrderActions: FC<OrderActionsProps> = ({
     onPrint,
     showSendToKitchenButton,
     showCancelButton,
+    showEditFeesButton = false,
     isPreparing,
     isCourierDelivery,
     isDineInOrCarDelivery,
@@ -36,7 +39,8 @@ const OrderActions: FC<OrderActionsProps> = ({
     onDeliverToWaiter,
     onDeliverToReceptionist,
     onCompleteOrder,
-    onCancelOrder
+    onCancelOrder,
+    onEditFees,
 }) => {
     const [loadingAction, setLoadingAction] = useState<string | null>(null)
 
@@ -84,6 +88,14 @@ const OrderActions: FC<OrderActionsProps> = ({
                 className='bg-slate-700 hover:bg-slate-800'
             />
 
+            {showEditFeesButton && onEditFees && (
+                <Button
+                    label='ویرایش هزینه‌ها'
+                    onClick={onEditFees}
+                    className='bg-transparent border border-slate-700 text-slate-700 hover:bg-slate-50'
+                />
+            )}
+
             {!isCanceled && showSendToKitchenButton && (
                 <Button
                     label='ارسال به آشپزخانه'

src/pages/orders/components/PaymentInfo.tsx

@@ -115,6 +115,20 @@ const PaymentInfo: FC<PaymentInfoProps> = ({ order, getPaymentStatusColor, getPa
           <div>{formatPrice(order.deliveryFee)}</div>
         </div>
 
+        {(order.packingFee ?? 0) > 0 && (
+          <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>{formatPrice(order.packingFee)}</div>
+          </div>
+        )}
+
+        {order.prepareTime != null && order.prepareTime > 0 && (
+          <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>{formatFaNumber(order.prepareTime)} دقیقه</div>
+          </div>
+        )}
+
         {order.tax > 0 && (
           <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>

src/pages/orders/components/UpdateOrderFeesModal.tsx

@@ -0,0 +1,97 @@
+import { type FC, useEffect, useState } from 'react'
+import DefaulModal from '@/components/DefaulModal'
+import Button from '@/components/Button'
+import Input from '@/components/Input'
+import type { Order, UpdateOrderFeesType } from '../types/Types'
+
+interface UpdateOrderFeesModalProps {
+    isOpen: boolean
+    onClose: () => void
+    order: Order
+    isLoading?: boolean
+    onSubmit: (params: UpdateOrderFeesType) => void
+}
+
+const UpdateOrderFeesModal: FC<UpdateOrderFeesModalProps> = ({
+    isOpen,
+    onClose,
+    order,
+    isLoading,
+    onSubmit,
+}) => {
+    const [deliveryFee, setDeliveryFee] = useState(String(order.deliveryFee ?? 0))
+    const [packingFee, setPackingFee] = useState(String(order.packingFee ?? 0))
+    const [prepareTime, setPrepareTime] = useState(
+        order.prepareTime != null ? String(order.prepareTime) : ''
+    )
+
+    useEffect(() => {
+        if (!isOpen) return
+        setDeliveryFee(String(order.deliveryFee ?? 0))
+        setPackingFee(String(order.packingFee ?? 0))
+        setPrepareTime(order.prepareTime != null ? String(order.prepareTime) : '')
+    }, [isOpen, order.deliveryFee, order.packingFee, order.prepareTime])
+
+    const handleSubmit = () => {
+        onSubmit({
+            deliveryFee: Math.max(Number(deliveryFee) || 0, 0),
+            packingFee: Math.max(Number(packingFee) || 0, 0),
+            prepareTime: Math.max(Number(prepareTime) || 0, 0),
+        })
+    }
+
+    return (
+        <DefaulModal
+            open={isOpen}
+            close={onClose}
+            isHeader
+            title_header='ویرایش هزینه‌ها'
+            width={420}
+        >
+            <div className='mt-6 space-y-4'>
+                <Input
+                    label='هزینه ارسال (تومان)'
+                    type='number'
+                    inputMode='numeric'
+                    min={0}
+                    seprator
+                    value={deliveryFee}
+                    onChange={(e) => setDeliveryFee(e.target.value)}
+                />
+                <Input
+                    label='هزینه بسته‌بندی (تومان)'
+                    type='number'
+                    inputMode='numeric'
+                    min={0}
+                    seprator
+                    value={packingFee}
+                    onChange={(e) => setPackingFee(e.target.value)}
+                />
+                <Input
+                    label='زمان آماده‌سازی (دقیقه)'
+                    type='number'
+                    inputMode='numeric'
+                    min={0}
+                    value={prepareTime}
+                    onChange={(e) => setPrepareTime(e.target.value)}
+                    placeholder='مثلاً ۳۰'
+                />
+
+                <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 UpdateOrderFeesModal