component designer search and user search

src/pages/order/List.tsx

@@ -1,5 +1,5 @@
 import Filters from '@/components/Filters'
-import { type FC } from 'react'
+import { type FC, useState } from 'react'
 import Table from '@/components/Table'
 import { AddSquare, Edit2, Eye, Printer, Receipt21 } from 'iconsax-react'
 import { useGetOrders } from './hooks/useOrderData'
@@ -8,10 +8,12 @@ import { Link } from 'react-router-dom'
 import { Paths } from '@/config/Paths'
 import type { OrderListItemType } from './types/Types'
 import Button from '@/components/Button'
+import UserSearch from '../user/UserSearch'
+import DesignerSearch from '../designer/DesignerSearch'
 
 const OrdersList: FC = () => {
-
-    const { data } = useGetOrders()
+    const [designId, setDesignId] = useState<string | undefined>()
+    const { data } = useGetOrders({ designId })
 
     return (
         <div className='mt-5'>
@@ -27,7 +29,7 @@ const OrdersList: FC = () => {
                 </Link>
             </div>
 
-            <div className='mt-8'>
+            <div className='mt-8 flex flex-wrap items-end gap-4'>
                 <Filters
                     fields={[
                         {
@@ -50,6 +52,12 @@ const OrdersList: FC = () => {
                         },
                     ]}
                     onChange={() => { }} />
+                <UserSearch className='w-[220px]' />
+                <DesignerSearch
+                    className='w-[220px]'
+                    placeholder='جستجوی طراح'
+                    onChange={(id) => setDesignId(id || undefined)}
+                />
             </div>
 
             <div className='mt-8'>

src/pages/order/hooks/useOrderData.ts

@@ -6,10 +6,10 @@ import type {
   OrderPrintFormType,
 } from "../types/Types";
 
-export const useGetOrders = () => {
+export const useGetOrders = (params?: { designId?: string }) => {
   return useQuery({
-    queryKey: ["orders"],
-    queryFn: api.getOrders,
+    queryKey: ["orders", params?.designId],
+    queryFn: () => api.getOrders(params),
   });
 };
 

src/pages/order/service/OrderService.ts

@@ -15,8 +15,10 @@ import type {
   ProductResponeType,
 } from "@/pages/product/types/Types";
 
-export const getOrders = async () => {
-  const { data } = await axios.get<OrderListResponseType>(`/admin/orders`);
+export const getOrders = async (params?: { designId?: string }) => {
+  const { data } = await axios.get<OrderListResponseType>(`/admin/orders`, {
+    params: params?.designId ? { designId: params.designId } : undefined,
+  });
   return data;
 };