danak/dmenu-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

details order refactor

Browse Source
This commit is contained in:
hamid zarghami
2025-12-23 15:20:22 +03:30
parent 14bc394801
commit 508c50152a
5 changed files with 124 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/orders/Details.tsx
+56 -27
View File
@@ -15,6 +15,8 @@ import CustomerInfo from './components/CustomerInfo'
import OrderItemsDetails from './components/OrderItemsDetails'
import PaymentInfo from './components/PaymentInfo'
import OrderActions from './components/OrderActions'
import { toast } from 'react-toastify'
import { extractErrorMessage } from '@/config/func'
const OrderDetails: FC = () => {
const { id } = useParams()
@@ -32,7 +34,6 @@ const OrderDetails: FC = () => {
const colorMap: Record<string, string> = {
'pendingPayment': '#FFEECC',
'paid': '#E3F2FD',
'confirmed': '#E3F2FD',
'preparing': '#FFF3E0',
'ready': '#E3F2FD',
'shipped': '#E3F2FD',
@@ -89,51 +90,51 @@ const OrderDetails: FC = () => {
const isCashPayment = order.paymentMethod?.method === PaymentMethodEnum.Cash
const isPendingPayment = order.status === OrderStatus.PENDING_PAYMENT
const isOrderPaid = order.status === OrderStatus.PAID
const isConfirmed = order.status === OrderStatus.CONFIRMED
const isPreparing = order.status === OrderStatus.PREPARING
const isCanceled = order.status === OrderStatus.CANCELED
const isOnlineOrWalletPayment = order.paymentMethod?.method === PaymentMethodEnum.Online || order.paymentMethod?.method === PaymentMethodEnum.Wallet
// بررسی وضعیت پرداخت از payments array یا paymentStatus
// ابتدا از paymentStatus استفاده می‌کنیم، اگر نبود از اولین payment در payments array استفاده می‌کنیم
const paymentStatus = order.paymentStatus || order.payments?.[0]?.status
// بررسی وضعیت pending (هم enum و هم string literal)
const isPaymentPending = paymentStatus === PaymentStatusEnum.Pending || paymentStatus === 'pending'
const isCourierDelivery = order.deliveryMethod?.method === DeliveryMethodEnum.DeliveryCourier
const isDineInOrCarDelivery = order.deliveryMethod?.method === DeliveryMethodEnum.DineIn || order.deliveryMethod?.method === DeliveryMethodEnum.DeliveryCar
const isCustomerPickup = order.deliveryMethod?.method === DeliveryMethodEnum.CustomerPickup
// نمایش دکمه تایید پرداخت نقدی
const showVerifyCashPaymentButton = isCashPayment && isPendingPayment
// نمایش دکمه تایید سفارش (confirm)
// سفارشات پرداخت آنلاین و کیف پولی فقط در صورتی می‌توانند confirm شوند که status آنها paid باشد
// سفارشات پرداخت نقدی می‌توانند تایید شوند
const canConfirm = !isConfirmed && !isPreparing && !isCanceled && (
isCashPayment ||
(isOnlineOrWalletPayment && isOrderPaid)
)
// وقتی روش پرداخت نقدی است و وضعیت پرداخت Pending باشد
const showVerifyCashPaymentButton = isCashPayment && isPaymentPending
// نمایش دکمه ارسال به آشپزخانه
const showSendToKitchenButton = isConfirmed
// برای pendingPayment با پرداخت نقدی یا برای paid
const showSendToKitchenButton = (isPendingPayment && isCashPayment) || isOrderPaid
// نمایش دکمه کنسل (ادمین همیشه می‌تواند، مگر اینکه سفارش کنسل شده باشد)
// نمایش دکمه کنسل
// همیشه نمایش داده می‌شود مگر اینکه سفارش قبلاً کنسل شده باشد
const showCancelButton = !isCanceled
const handleVerifyCashPayment = () => {
const paymentId = order.paymentId || order.paymentMethod?.id
const paymentId = order.paymentId || order.payments?.[0]?.id
if (paymentId) {
verifyCashPayment(paymentId, {
onSuccess: () => {
// Success handled by query invalidation
},
onError: (error) => {
toast.error(extractErrorMessage(error))
}
})
}
}
const handleConfirmOrder = () => {
changeOrderStatus({
orderId: order.id,
status: OrderStatus.CONFIRMED
})
}
const handleSendToKitchen = () => {
changeOrderStatus({
orderId: order.id,
status: OrderStatus.PREPARING
}, {
onError: (error) => {
toast.error(extractErrorMessage(error))
}
})
}
@@ -141,13 +142,32 @@ const OrderDetails: FC = () => {
changeOrderStatus({
orderId: order.id,
status: OrderStatus.SHIPPED
}, {
onError: (error) => {
toast.error(extractErrorMessage(error))
}
})
}
const handleOrderReady = () => {
const handleDeliverToWaiter = () => {
changeOrderStatus({
orderId: order.id,
status: OrderStatus.READY
status: OrderStatus.DELIVERED_TO_WAITER
}, {
onError: (error) => {
toast.error(extractErrorMessage(error))
}
})
}
const handleDeliverToReceptionist = () => {
changeOrderStatus({
orderId: order.id,
status: OrderStatus.DELIVERED_TO_RECEPTIONIST
}, {
onError: (error) => {
toast.error(extractErrorMessage(error))
}
})
}
@@ -156,6 +176,10 @@ const OrderDetails: FC = () => {
orderId: order.id,
status: OrderStatus.CANCELED,
params: description ? { description } : undefined
}, {
onError: (error) => {
toast.error(extractErrorMessage(error))
}
})
setShowCancelModal(false)
}
@@ -165,6 +189,10 @@ const OrderDetails: FC = () => {
refundPayment({
orderId: order.id,
params: { description: text }
}, {
onError: (error) => {
toast.error(extractErrorMessage(error))
}
})
setShowRefundModal(false)
}
@@ -201,19 +229,20 @@ const OrderDetails: FC = () => {
/>
<OrderActions
showVerifyCashPaymentButton={showVerifyCashPaymentButton}
canConfirm={canConfirm}
showSendToKitchenButton={showSendToKitchenButton}
showCancelButton={showCancelButton}
isPreparing={isPreparing}
isCourierDelivery={isCourierDelivery}
isDineInOrCarDelivery={isDineInOrCarDelivery}
isCustomerPickup={isCustomerPickup}
isCanceled={isCanceled}
isVerifyingPayment={isVerifyingPayment}
isChangingStatus={isChangingStatus}
onVerifyCashPayment={handleVerifyCashPayment}
onConfirmOrder={handleConfirmOrder}
onSendToKitchen={handleSendToKitchen}
onDeliverToCourier={handleDeliverToCourier}
onOrderReady={handleOrderReady}
onDeliverToWaiter={handleDeliverToWaiter}
onDeliverToReceptionist={handleDeliverToReceptionist}
onCancelOrder={() => setShowCancelModal(true)}
/>
</div>
src/pages/orders/components/OrderActions.tsx
+62 -26
View File
@@ -1,41 +1,76 @@
import Button from '@/components/Button'
import type { FC } from 'react'
import { type FC, useState, useEffect } from 'react'
interface OrderActionsProps {
showVerifyCashPaymentButton: boolean
canConfirm: boolean
showSendToKitchenButton: boolean
showCancelButton: boolean
isPreparing: boolean
isCourierDelivery: boolean
isDineInOrCarDelivery: boolean
isCustomerPickup: boolean
isCanceled: boolean
isVerifyingPayment: boolean
isChangingStatus: boolean
onVerifyCashPayment: () => void
onConfirmOrder: () => void
onSendToKitchen: () => void
onDeliverToCourier: () => void
onOrderReady: () => void
onDeliverToWaiter: () => void
onDeliverToReceptionist: () => void
onCancelOrder: () => void
}
const OrderActions: FC<OrderActionsProps> = ({
showVerifyCashPaymentButton,
canConfirm,
showSendToKitchenButton,
showCancelButton,
isPreparing,
isCourierDelivery,
isDineInOrCarDelivery,
isCustomerPickup,
isCanceled,
isVerifyingPayment,
isChangingStatus,
onVerifyCashPayment,
onConfirmOrder,
onSendToKitchen,
onDeliverToCourier,
onOrderReady,
onDeliverToWaiter,
onDeliverToReceptionist,
onCancelOrder
}) => {
const [loadingAction, setLoadingAction] = useState<string | null>(null)
useEffect(() => {
if (!isChangingStatus && !isVerifyingPayment) {
setLoadingAction(null)
}
}, [isChangingStatus, isVerifyingPayment])
const handleSendToKitchen = () => {
setLoadingAction('sendToKitchen')
onSendToKitchen()
}
const handleDeliverToCourier = () => {
setLoadingAction('deliverToCourier')
onDeliverToCourier()
}
const handleDeliverToWaiter = () => {
setLoadingAction('deliverToWaiter')
onDeliverToWaiter()
}
const handleDeliverToReceptionist = () => {
setLoadingAction('deliverToReceptionist')
onDeliverToReceptionist()
}
const handleCancelOrder = () => {
setLoadingAction('cancelOrder')
onCancelOrder()
}
if (isCanceled) return null
return (
@@ -49,19 +84,11 @@ const OrderActions: FC<OrderActionsProps> = ({
/>
)}
{canConfirm && (
<Button
label='تایید سفارش'
onClick={onConfirmOrder}
isloading={isChangingStatus}
/>
)}
{showSendToKitchenButton && (
<Button
label='ارسال به آشپزخانه'
onClick={onSendToKitchen}
isloading={isChangingStatus}
onClick={handleSendToKitchen}
isloading={isChangingStatus && loadingAction === 'sendToKitchen'}
className='bg-orange-600 hover:bg-orange-700'
/>
)}
@@ -69,26 +96,35 @@ const OrderActions: FC<OrderActionsProps> = ({
{isPreparing && isCourierDelivery && (
<Button
label='تحویل به پیک'
onClick={onDeliverToCourier}
isloading={isChangingStatus}
onClick={handleDeliverToCourier}
isloading={isChangingStatus && loadingAction === 'deliverToCourier'}
className='bg-blue-600 hover:bg-blue-700'
/>
)}
{isPreparing && !isCourierDelivery && (
{isPreparing && isDineInOrCarDelivery && (
<Button
label='غذا آماده است'
onClick={onOrderReady}
isloading={isChangingStatus}
className='bg-green-600 hover:bg-green-700'
label='تحویل به گارسون'
onClick={handleDeliverToWaiter}
isloading={isChangingStatus && loadingAction === 'deliverToWaiter'}
className='bg-purple-600 hover:bg-purple-700'
/>
)}
{isPreparing && isCustomerPickup && (
<Button
label='تحویل به رسپشنیست'
onClick={handleDeliverToReceptionist}
isloading={isChangingStatus && loadingAction === 'deliverToReceptionist'}
className='bg-indigo-600 hover:bg-indigo-700'
/>
)}
{showCancelButton && (
<Button
label='لغو سفارش'
onClick={onCancelOrder}
isloading={isChangingStatus}
onClick={handleCancelOrder}
isloading={isChangingStatus && loadingAction === 'cancelOrder'}
className='bg-red-600 hover:bg-red-700'
/>
)}
src/pages/orders/components/OrderTableColumns.tsx
-1
View File
@@ -18,7 +18,6 @@ const getStatusVariant = (status: string): 'success' | 'error' | 'warning' | 'in
const variantMap: Record<string, 'success' | 'error' | 'warning' | 'info' | 'pending'> = {
'pendingPayment': 'pending',
'paid': 'info',
'confirmed': 'info',
'preparing': 'warning',
'ready': 'info',
'shipped': 'info',
src/pages/orders/enum/Enum.ts
+2 -1
View File
@@ -1,9 +1,10 @@
export enum OrderStatus {
PENDING_PAYMENT = "pendingPayment",
PAID = "paid",
CONFIRMED = "confirmed",
PREPARING = "preparing",
READY = "ready",
DELIVERED_TO_WAITER = "deliveredToWaiter",
DELIVERED_TO_RECEPTIONIST = "deliveredToReceptionist",
SHIPPED = "shipped",
COMPLETED = "completed",
CANCELED = "canceled",
src/pages/statistics/components/FoodSalesChart.tsx
+4
View File
@@ -1,11 +1,15 @@
import { type FC } from 'react'
import { Cell, LabelList, Pie, PieChart, ResponsiveContainer } from 'recharts'
import { useGetFoodSalesPieChart } from '../hooks/useStatsData';
interface FoodSalesChartProps {
data?: Array<{ name: string; value: number; color: string }>
}
const FoodSalesChart: FC<FoodSalesChartProps> = ({ data }) => {
useGetFoodSalesPieChart()
const defaultData = [
{ name: 'پیتزا', value: 50, color: '#6B7FED' },
{ name: 'برگر', value: 25, color: '#A78BFA' },