order history filter with orders currents and before

src/app/[name]/(Main)/order/history/page.tsx

@@ -8,7 +8,7 @@ import { TabHeader } from '@/components/tab/TabHeader';
 import { Receipt2, ReceiptItem } from 'iconsax-react';
 import Image from 'next/image';
 import Link from 'next/link';
-import React, { useMemo } from 'react'
+import React, { useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next';
 import { useGetOrders } from './hooks/useHistoryData';
 import { HistoryOrderItem } from './types/Types';
@@ -41,33 +41,23 @@ const formatDate = (dateString: string): string => {
 function OrdersIndex() {
 
     const { t } = useTranslation('orders');
-    const { data: ordersData } = useGetOrders();
+    const [selectedTab, setSelectedTab] = useState(0);
+    const status = selectedTab === 0 ? 'current' : 'old';
+    const { data: ordersData } = useGetOrders(status);
 
     const orders = useMemo(() => ordersData?.data || [], [ordersData?.data]);
 
-    const activeOrders = useMemo(() => {
-        return orders.filter((order) => {
-            return order.status !== 'delivered' && order.status !== 'cancelled';
-        });
-    }, [orders]);
-
-    const previousOrders = useMemo(() => {
-        return orders.filter((order) => {
-            return order.status === 'delivered' || order.status === 'cancelled';
-        });
-    }, [orders]);
-
     const categories = [
         { id: 0, title: t('Tab.ActiveOrders'), icon: <ReceiptItem size={22} /> },
         { id: 1, title: t('Tab.PreviousOrders'), icon: <Receipt2 size={22} /> }
     ]
 
     const firstTab = () => {
-        if (activeOrders.length === 0) {
+        if (orders.length === 0) {
             return [<div key="empty" className='text-center text-sm text-disabled-text py-8'>سفارش فعالی وجود ندارد</div>];
         }
 
-        return activeOrders.map((order) => {
+        return orders.map((order) => {
             const address = order.address?.address || 'آدرس ثبت نشده';
             const formattedDate = formatDate(order.createdAt);
             const formattedPrice = order.total.toLocaleString('fa-IR');
@@ -138,11 +128,11 @@ function OrdersIndex() {
     }
 
     const secondTab = () => {
-        if (previousOrders.length === 0) {
+        if (orders.length === 0) {
             return [<div key="empty" className='text-center text-sm text-disabled-text py-8'>سفارش قبلی وجود ندارد</div>];
         }
 
-        return previousOrders.map((order) => {
+        return orders.map((order) => {
             const address = order.address?.address || 'آدرس ثبت نشده';
             const formattedDate = formatDate(order.createdAt);
             const formattedPrice = order.total.toLocaleString('fa-IR');
@@ -219,7 +209,7 @@ function OrdersIndex() {
 
     return (
         <div className='pt-8'>
-            <TabContainer>
+            <TabContainer selectedTab={selectedTab} onTabChange={setSelectedTab}>
                 <TabHeader
                     viewRenderer={<div className='pt-4'>{firstTab()}</div>}
                     title={categories[0].title}