returns list

2025-10-30 11:35:14 +03:30
parent d57d6be271
commit 9d18c8c612
8 changed files with 296 additions and 0 deletions
@@ -187,6 +187,7 @@ export const Pages = {
    returnCategories: "/orders/return-categories",
    detailUser: "/orders/detail-user/",
    detailSeller: "/orders/detail-seller/",
+    return: "/orders/returns",
  },
  shipment: {
    list: "/shipment/list",
@@ -0,0 +1,125 @@
+import PageTitle from '@/components/PageTitle'
+import { type FC, useState } from 'react'
+import { useGetOrderReturns } from './hooks/useOrderData'
+import PageLoading from '@/components/PageLoading'
+import Error from '@/components/Error'
+import PaginationUi from '@/components/PaginationUi'
+import Td from '@/components/Td'
+import StatusWithText from '@/components/StatusWithText'
+import { formatDateShort, formatPrice } from '@/helpers/func'
+import { type ReturnOrderType } from '@/pages/orders/types/ReturnTypes'
+import { Eye } from 'iconsax-react'
+import ReturnItemsModal from '@/pages/orders/components/ReturnItemsModal'
+
+const Returns: FC = () => {
+    const [currentPage, setCurrentPage] = useState(1)
+    const [isModalOpen, setIsModalOpen] = useState(false)
+    const [selectedReturn, setSelectedReturn] = useState<ReturnOrderType | null>(null)
+    const { data, isLoading, error } = useGetOrderReturns(currentPage)
+
+    if (isLoading) {
+        return (
+            <div className="flex justify-center items-center min-h-[400px]">
+                <PageLoading />
+            </div>
+        )
+    }
+
+    if (error) {
+        return (
+            <div className="flex justify-center items-center min-h-[400px]">
+                <Error errorText="خطا در بارگذاری مرجوعی‌ها" />
+            </div>
+        )
+    }
+
+    const returnsOrders = data?.results?.returnsOrders || []
+    const pager = data?.results?.pager
+
+    const getStatusVariant = (status: string) => {
+        switch (status) {
+            case 'Approved': return 'success'
+            case 'Rejected': return 'error'
+            case 'Pending':
+            default: return 'warning'
+        }
+    }
+
+    const getStatusText = (status: string) => {
+        switch (status) {
+            case 'Approved': return 'تایید شده'
+            case 'Rejected': return 'رد شده'
+            case 'Pending': return 'در انتظار'
+            default: return status
+        }
+    }
+
+    return (
+        <div>
+            <PageTitle title1='مرجوعی ها' />
+
+            <div className='relative overflow-x-auto rounded-3xl mt-5 w-full'>
+                <table className='w-full text-sm'>
+                    <thead className='thead'>
+                        <tr>
+                            <Td text={'شماره سفارش'} />
+                            <Td text={'فروشگاه'} />
+                            <Td text={'وضعیت'} />
+                            <Td text={'مبلغ کل'} />
+                            <Td text={'تاریخ ثبت'} />
+                            <Td text={'تعداد اقلام'} />
+                            <Td text={'جزئیات'} />
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {returnsOrders.length === 0 ? (
+                            <tr className='tr'>
+                                <td colSpan={6} className='text-center py-8 text-muted-foreground'>
+                                    مرجوعی یافت نشد
+                                </td>
+                            </tr>
+                        ) : (
+                            returnsOrders.map((ret: ReturnOrderType) => (
+                                <tr key={ret._id} className='tr'>
+                                    <Td text={`#${ret?.order?._id ?? '-'}`} />
+                                    <Td text={ret?.shopName ?? '-'} />
+                                    <Td text=''>
+                                        <StatusWithText
+                                            variant={getStatusVariant(ret?.status)}
+                                            text={getStatusText(ret?.status)}
+                                        />
+                                    </Td>
+                                    <Td text={`${formatPrice(Number(ret?.total_price || 0))} تومان`} />
+                                    <Td text={formatDateShort(ret?.createdAt)} />
+                                    <Td text={String(ret?.returnOrderItems?.quantity ?? 0)} />
+                                    <Td text="">
+                                        <button
+                                            className='h-8 w-8 inline-flex items-center justify-center rounded-lg border border-border hover:bg-accent transition-colors'
+                                            onClick={() => { setSelectedReturn(ret); setIsModalOpen(true); }}
+                                            aria-label='نمایش جزئیات'
+                                        >
+                                            <Eye size={16} color="#4B5563" />
+                                        </button>
+                                    </Td>
+                                </tr>
+                            ))
+                        )}
+                    </tbody>
+                </table>
+            </div>
+
+            <PaginationUi
+                pager={pager}
+                onPageChange={(page) => setCurrentPage(page)}
+            />
+
+            <ReturnItemsModal
+                open={isModalOpen}
+                close={() => { setIsModalOpen(false); setSelectedReturn(null); }}
+                data={selectedReturn}
+            />
+        </div>
+    )
+}
+
+export default Returns
@@ -0,0 +1,104 @@
+import { type FC, Fragment } from 'react'
+import DefaulModal from '@/components/DefaulModal'
+import StatusWithText from '@/components/StatusWithText'
+import Td from '@/components/Td'
+import { formatDateShort, formatPrice } from '@/helpers/func'
+import { type ReturnOrderItemType, type ReturnOrderType } from '@/pages/orders/types/ReturnTypes'
+
+type Props = {
+    open: boolean
+    close: () => void
+    data: ReturnOrderType | null
+}
+
+const getStatusVariant = (status: string) => {
+    switch (status) {
+        case 'Approved': return 'success'
+        case 'Rejected': return 'error'
+        case 'Pending':
+        default: return 'warning'
+    }
+}
+
+const getStatusText = (status: string) => {
+    switch (status) {
+        case 'Approved': return 'تایید شده'
+        case 'Rejected': return 'رد شده'
+        case 'Pending': return 'در انتظار'
+        default: return status
+    }
+}
+
+const ReturnItemsModal: FC<Props> = ({ open, close, data }) => {
+    const items = Array.isArray((data as any)?.returnOrderItems)
+        ? (data as any).returnOrderItems as ReturnOrderItemType[]
+        : (data?.returnOrderItems ? [data.returnOrderItems as ReturnOrderItemType] : [])
+
+    return (
+        <DefaulModal open={open} close={close} isHeader title_header='جزئیات مرجوعی' width={720}>
+            {!data ? (
+                <div className='py-6 text-center text-muted-foreground'>داده‌ای برای نمایش وجود ندارد</div>
+            ) : (
+                <Fragment>
+                    <div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3 mt-3'>
+                        <div className='p-2 rounded-lg border border-border'>
+                            <div className='text-[11px] text-muted-foreground'>شماره سفارش</div>
+                            <div className='mt-0.5 text-sm font-medium'>#{data.order?._id ?? '-'}</div>
+                        </div>
+                        <div className='p-2 rounded-lg border border-border'>
+                            <div className='text-[11px] text-muted-foreground'>فروشگاه</div>
+                            <div className='mt-0.5 text-sm font-medium'>{data.shopName ?? '-'}</div>
+                        </div>
+                        <div className='p-2 rounded-lg border border-border'>
+                            <div className='text-[11px] text-muted-foreground'>وضعیت</div>
+                            <div className='mt-0.5'>
+                                <StatusWithText variant={getStatusVariant(data.status)} text={getStatusText(data.status)} />
+                            </div>
+                        </div>
+                        <div className='p-2 rounded-lg border border-border'>
+                            <div className='text-[11px] text-muted-foreground'>مبلغ کل</div>
+                            <div className='mt-0.5 text-sm font-medium'>{formatPrice(Number(data.total_price || 0))} تومان</div>
+                        </div>
+                        <div className='p-2 rounded-lg border border-border'>
+                            <div className='text-[11px] text-muted-foreground'>تاریخ ثبت</div>
+                            <div className='mt-0.5 text-sm font-medium'>{formatDateShort(data.createdAt)}</div>
+                        </div>
+                    </div>
+
+                    <div className='relative overflow-x-auto rounded-3xl mt-6 w-full'>
+                        <table className='w-full text-sm'>
+                            <thead className='thead'>
+                                <tr>
+                                    <Td text={'دلیل'} />
+                                    <Td text={'تعداد'} />
+                                    <Td text={'توضیحات'} />
+                                    <Td text={'مبلغ آیتم'} />
+                                </tr>
+                            </thead>
+                            <tbody>
+                                {items.length === 0 ? (
+                                    <tr className='tr'>
+                                        <td colSpan={4} className='text-center py-8 text-muted-foreground'>آیتمی ثبت نشده است</td>
+                                    </tr>
+                                ) : (
+                                    items.map((it, idx) => (
+                                        <tr key={it._id ?? idx} className='tr'>
+                                            <Td text={it.reason ?? '-'} />
+                                            <Td text={String(it.quantity ?? 0)} />
+                                            <Td text={it.comment ?? '-'} />
+                                            <Td text={`${formatPrice(Number(it.orderItem?.totalSellingPrice || 0))} تومان`} />
+                                        </tr>
+                                    ))
+                                )}
+                            </tbody>
+                        </table>
+                    </div>
+                </Fragment>
+            )}
+        </DefaulModal>
+    )
+}
+
+export default ReturnItemsModal
+
+
@@ -71,3 +71,10 @@ export const useDeleteReturnReason = () => {
    mutationFn: api.deleteReturnReason,
  });
 };
+
+export const useGetOrderReturns = (page: number = 1) => {
+  return useQuery({
+    queryKey: ["order-returns", page],
+    queryFn: () => api.getOrderReturns(page),
+  });
+};
@@ -70,3 +70,10 @@ export const deleteReturnReason = async (id: string) => {
  const { data } = await axios.delete(`/admin/orders/returns/reasons/${id}`);
  return data;
 };
+
+export const getOrderReturns = async (page: number = 1) => {
+  const { data } = await axios.get(`/admin/orders/returns`, {
+    params: { page },
+  });
+  return data;
+};
@@ -0,0 +1,43 @@
+import type { PagerType, ShipmentAddressType } from "@/pages/orders/types/Types";
+
+export type ReturnOrderItemType = {
+  quantity: number;
+  comment: string;
+  reason: string;
+  _id: string;
+  orderItem: {
+    _id: string;
+    totalSellingPrice: number;
+  };
+};
+
+export type ReturnOrderEmbeddedOrderType = {
+  _id: number;
+  user: string;
+  payment: string;
+  shipmentAddress: ShipmentAddressType;
+  orderStatus: string;
+  createdAt: string;
+  updatedAt: string;
+  __v: number;
+};
+
+export type ReturnOrderType = {
+  _id: string;
+  order: ReturnOrderEmbeddedOrderType;
+  status: "Pending" | "Approved" | "Rejected" | string;
+  total_price: number;
+  createdAt: string;
+  updatedAt: string;
+  returnOrderItems: ReturnOrderItemType;
+  shopName: string;
+};
+
+export type ReturnOrdersResponseType = {
+  status: number;
+  success: boolean;
+  results: {
+    pager: PagerType;
+    returnsOrders: ReturnOrderType[];
+  };
+};
@@ -80,6 +80,7 @@ import UpdateCategory from '@/pages/ticket/Update'
 import TicketMessages from '@/pages/ticket/TicketMessages'
 import Reviews from '@/pages/products/Reviews'
 import Questions from '@/pages/products/Questions'
+import Returns from '@/pages/orders/Returns'
 const MainRouter: FC = () => {

    const { hasSubMenu } = useSharedStore()
@@ -196,6 +197,8 @@ const MainRouter: FC = () => {
                            <Route path={Pages.products.questions.list} element={<Questions />} />

                            <Route path={Pages.blog.category} element={<BlogCategory />} />
+
+                            <Route path={Pages.orders.return} element={<Returns />} />
                        </Routes>
                    </div>
                </div>
@@ -52,6 +52,12 @@ const OrdersSubMenu: FC = () => {
                    isActive={isActive('return-categories')}
                    link={Pages.orders.returnCategories}
                />
+
+                <SubMenuItem
+                    title={'مرجوعی ها'}
+                    isActive={isActive('return')}
+                    link={Pages.orders.return}
+                />
            </div>
        </div>
    )