return list

src/app/profile/orders/components/OrderTabs.tsx

@@ -2,14 +2,14 @@
 import React from 'react'
 
 interface Tab {
-    key: 'Processing' | 'Delivered' | 'Cancelled'
+    key: 'Processing' | 'Delivered' | 'Cancelled' | 'Returned'
     label: string
     count: number
 }
 
 interface OrderTabsProps {
-    activeTab: 'Processing' | 'Delivered' | 'Cancelled'
-    setActiveTab: (tab: 'Processing' | 'Delivered' | 'Cancelled') => void
+    activeTab: 'Processing' | 'Delivered' | 'Cancelled' | 'Returned'
+    setActiveTab: (tab: 'Processing' | 'Delivered' | 'Cancelled' | 'Returned') => void
     tabCounts: {
         current: number
         delivered: number
@@ -22,7 +22,7 @@ const OrderTabs: React.FC<OrderTabsProps> = ({ activeTab, setActiveTab, tabCount
     const tabs: Tab[] = [
         { key: 'Processing', label: 'جاری', count: tabCounts.current },
         { key: 'Delivered', label: 'تحویل شده', count: tabCounts.delivered },
-        // { key: 'Returned', label: 'مرجوع شده', count: tabCounts.returned },
+        { key: 'Returned', label: 'مرجوع شده', count: tabCounts.returned },
         { key: 'Cancelled', label: 'لغو شده', count: tabCounts.cancelled }
     ]
 

src/app/profile/orders/components/ReturnOrderItem.tsx

@@ -0,0 +1,80 @@
+'use client'
+import React from 'react'
+import { ReturnOrder } from '../types/Types'
+import moment from 'moment-jalaali'
+import { Button } from '@/components/ui/button'
+import { useRouter } from 'next/navigation'
+import { TruckFast } from 'iconsax-react'
+import { PRIMARY_COLOR } from '@/config/const'
+
+interface ReturnOrderItemProps {
+    order: ReturnOrder
+}
+
+const ReturnOrderItem: React.FC<ReturnOrderItemProps> = ({ order }) => {
+    const router = useRouter();
+
+    const getStatusText = (status: string) => {
+        const statusMap: { [key: string]: string } = {
+            'pending': 'در انتظار بررسی',
+            'approved': 'تایید شده',
+            'rejected': 'رد شده',
+            'processing': 'در حال پردازش',
+            'completed': 'تکمیل شده'
+        };
+        return statusMap[status.toLowerCase()] || status;
+    };
+
+    return (
+        <div className='bg-white border border-[#E0E0E0] rounded-[8px] p-3 sm:p-4 md:p-5'>
+            <div className='flex flex-col lg:flex-row gap-4 sm:gap-6'>
+                <div className='lg:max-w-[234px] w-full'>
+                    <div className=''>
+                        <div className='text-xs sm:text-sm text-[#7F7F7F] mb-1'>
+                            شماره سفارش: <span className='text-black'> {order.order}</span>
+                        </div>
+                        <div className='text-xs sm:text-sm text-[#7F7F7F] mt-3 sm:mt-4'>
+                            مبلغ: <span className='text-black'> {order.total_price.toLocaleString('fa-IR')} تومان</span>
+                        </div>
+                    </div>
+
+                    <div className='mb-4 sm:mb-6 mt-3 sm:mt-4'>
+                        <div className='text-xs sm:text-sm text-[#7F7F7F]'>
+                            وضعیت مرجوعی: <span className='text-black'>{getStatusText(order.status)}</span>
+                        </div>
+                        <div className='text-xs dltr text-right sm:text-sm text-[#7F7F7F] mt-3 sm:mt-4'>
+                            تاریخ ثبت مرجوعی: <span className='text-black'> {moment(order.createdAt).format('jYYYY-jMM-jDD')}</span>
+                        </div>
+                    </div>
+
+                    <div className='flex flex-col sm:flex-row gap-2 sm:gap-3'>
+                        <Button
+                            variant="outline"
+                            className='px-4 sm:px-6 py-2 h-8 sm:h-9 border-[#E0E0E0] text-[#666666] hover:bg-gray-50 text-xs sm:text-sm'
+                            onClick={() => router.push(`/profile/orders/${order.order}`)}
+                        >
+                            جزئیات سفارش
+                        </Button>
+                    </div>
+                </div>
+
+                <div className='flex-1 flex items-center justify-center lg:border-r lg:border-border lg:pr-5 min-h-[200px] sm:min-h-[225px]'>
+                    <div className='flex flex-col items-center gap-4 text-center'>
+                        <div className='w-16 h-16 sm:w-20 sm:h-20 bg-orange-50 rounded-full flex items-center justify-center'>
+                            <TruckFast color={PRIMARY_COLOR} size={32} className='text-orange-500' variant='Bold' />
+                        </div>
+                        <div className='text-sm sm:text-base text-[#666666]'>
+                            درخواست مرجوع کالا ثبت شده است
+                        </div>
+                        <div className='text-xs sm:text-sm text-[#999999]'>
+                            شماره مرجوعی: {order._id}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default ReturnOrderItem
+

src/app/profile/orders/hooks/useOrdersData.ts

@@ -43,3 +43,10 @@ export const useReturnOrder = () => {
     mutationFn: api.returnOrder,
   });
 };
+
+export const useGetReturnOrder = () => {
+  return useQuery({
+    queryKey: ["returnOrder"],
+    queryFn: api.getReturnOrder,
+  });
+};

src/app/profile/orders/page.tsx

@@ -3,17 +3,18 @@ import Layout from '@/hoc/Layout'
 import { NextPage } from 'next'
 import React, { useState, useMemo } from 'react'
 import Menu from '../components/Menu'
-import { useGetOrders } from './hooks/useOrdersData'
-import { Order } from './types/Types'
+import { useGetOrders, useGetReturnOrder } from './hooks/useOrdersData'
+import { Order, ReturnOrder } from './types/Types'
 import OrderTabs from './components/OrderTabs'
 import OrderItem from './components/OrderItem'
+import ReturnOrderItem from './components/ReturnOrderItem'
 
 
 const Orders: NextPage = () => {
 
-    const [activeTab, setActiveTab] = useState<'Processing' | 'Delivered' | 'Cancelled'>('Processing')
+    const [activeTab, setActiveTab] = useState<'Processing' | 'Delivered' | 'Cancelled' | 'Returned'>('Processing')
     const { data: ordersData } = useGetOrders(activeTab);
-
+    const { data: returnOrderData } = useGetReturnOrder();
 
     // محاسبه تعداد سفارشات در هر تب از داده‌های اصلی
     const tabCounts = useMemo(() => {
@@ -61,13 +62,24 @@ const Orders: NextPage = () => {
 
             {/* Orders List */}
             <div className='mt-4 sm:mt-6 space-y-3 sm:space-y-4'>
-                {ordersData?.results?.orders.map((order) => (
-                    <OrderItem
-                        key={order._id.toString()}
-                        order={order}
-                        getStatusText={getStatusText}
-                    />
-                ))}
+                {activeTab === 'Returned' ? (
+                    // نمایش سفارشات مرجوعی
+                    returnOrderData?.results?.returnOrders?.map((order: ReturnOrder) => (
+                        <ReturnOrderItem
+                            key={order._id}
+                            order={order}
+                        />
+                    ))
+                ) : (
+                    // نمایش سفارشات عادی
+                    ordersData?.results?.orders?.map((order: Order) => (
+                        <OrderItem
+                            key={order._id.toString()}
+                            order={order}
+                            getStatusText={getStatusText}
+                        />
+                    ))
+                )}
             </div>
         </div>
     )

src/app/profile/orders/service/Service.ts

@@ -6,6 +6,7 @@ import {
   CancelReasonsResponse,
   ReturnOrderType,
   ReturnReasonsResponse,
+  ReturnOrdersResponse,
 } from "../types/Types";
 
 export const getOrders = async (activeTab: string): Promise<OrdersResponse> => {
@@ -46,3 +47,8 @@ export const returnOrder = async (params: ReturnOrderType) => {
   const { data } = await axios.post(`/returns/user`, params);
   return data;
 };
+
+export const getReturnOrder = async (): Promise<ReturnOrdersResponse> => {
+  const { data } = await axios.get(`/returns/user`);
+  return data;
+};

src/app/profile/orders/types/Types.ts

@@ -341,3 +341,21 @@ export interface ReturnOrderType {
   orderId: number;
   items: ReturnOrderItem[];
 }
+
+export interface ReturnOrder {
+  _id: string;
+  order: number;
+  user: string;
+  status: string;
+  total_price: number;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface ReturnOrdersResponse {
+  status: number;
+  success: boolean;
+  results: {
+    returnOrders: ReturnOrder[];
+  };
+}