order status update modal

src/pages/order/components/OrderDetailSidebar.tsx

@@ -1,6 +1,6 @@
-import { type FC } from 'react'
+import { type FC, useState } from 'react'
 import { Link } from 'react-router-dom'
-import { Call, Edit2, Location, Paperclip2, Profile2User, User } from 'iconsax-react'
+import { Call, Edit2, Location, Paperclip2, Profile2User, Receipt21, User } from 'iconsax-react'
 import { clx } from '@/helpers/utils'
 import { getFileNameAndExtensionFromUrl } from '@/config/func'
 import { Paths } from '@/config/Paths'
@@ -14,10 +14,14 @@ import {
     getOrderStatusBadgeClass,
     getOrderStatusLabel,
 } from '../constants/orderStatus'
+import { OrderStatusEnum } from '../enum/OrderEnum'
 import type { OrderDetailDataType } from '../types/Types'
+import OrderStatusModal from './OrderStatusModal'
 
 type Props = {
     order?: OrderDetailDataType
+    onUpdateStatus?: (status: OrderStatusEnum) => void
+    isUpdatingStatus?: boolean
 }
 
 type InfoRowProps = {
@@ -72,10 +76,24 @@ const PersonCard: FC<{
     </div>
 )
 
-const OrderDetailSidebar: FC<Props> = ({ order }) => {
+const OrderDetailSidebar: FC<Props> = ({
+    order,
+    onUpdateStatus,
+    isUpdatingStatus,
+}) => {
     const attachments = (order?.attachments ?? [])
         .map(getAttachmentUrl)
         .filter((url): url is string => Boolean(url))
+    const [isStatusModalOpen, setIsStatusModalOpen] = useState(false)
+    const [selectedStatus, setSelectedStatus] = useState<OrderStatusEnum>(
+        (order?.status as OrderStatusEnum) ?? OrderStatusEnum.CREATED,
+    )
+
+    const handleOpenStatusModal = () => {
+        if (!order?.status) return
+        setSelectedStatus(order.status as OrderStatusEnum)
+        setIsStatusModalOpen(true)
+    }
 
     return (
         <div className="space-y-4">
@@ -98,14 +116,24 @@ const OrderDetailSidebar: FC<Props> = ({ order }) => {
                             </Link>
                         )}
                         {order?.status && (
-                            <span
-                                className={clx(
-                                    'inline-flex h-7 items-center rounded-full px-3 text-xs font-medium',
-                                    getOrderStatusBadgeClass(order.status),
-                                )}
-                            >
-                                {getOrderStatusLabel(order.status)}
-                            </span>
+                            <>
+                                <button
+                                    type="button"
+                                    title="تغییر وضعیت سفارش"
+                                    onClick={handleOpenStatusModal}
+                                    className="inline-flex size-8 items-center justify-center rounded-lg border border-blue-200 text-[#0037FF] hover:bg-blue-50 transition-colors"
+                                >
+                                    <Receipt21 size={16} color="#0037FF" />
+                                </button>
+                                <span
+                                    className={clx(
+                                        'inline-flex h-7 items-center rounded-full px-3 text-xs font-medium',
+                                        getOrderStatusBadgeClass(order.status),
+                                    )}
+                                >
+                                    {getOrderStatusLabel(order.status)}
+                                </span>
+                            </>
                         )}
                     </div>
                 </div>
@@ -191,6 +219,18 @@ const OrderDetailSidebar: FC<Props> = ({ order }) => {
                     </div>
                 </section>
             )}
+
+            <OrderStatusModal
+                open={isStatusModalOpen}
+                close={() => setIsStatusModalOpen(false)}
+                initialStatus={selectedStatus}
+                inputName={`order-detail-status-${order?.id ?? 'unknown'}`}
+                isLoading={isUpdatingStatus}
+                onSubmit={(status) => {
+                    setSelectedStatus(status)
+                    onUpdateStatus?.(status)
+                }}
+            />
         </div>
     )
 }