filter orders

src/pages/order/List.tsx

@@ -1,4 +1,4 @@
-import Filters from '@/components/Filters'
+import Filters, { type FilterValues } from '@/components/Filters'
 import { type FC, useState } from 'react'
 import Table from '@/components/Table'
 import { AddSquare, Edit2, Eye, Printer, Receipt21 } from 'iconsax-react'
@@ -10,10 +10,16 @@ import type { OrderListItemType } from './types/Types'
 import Button from '@/components/Button'
 import UserSearch from '../user/UserSearch'
 import DesignerSearch from '../designer/DesignerSearch'
+import CategoriesSelect from '../product/components/CategoriesSelect'
 
 const OrdersList: FC = () => {
+
     const [designId, setDesignId] = useState<string | undefined>()
-    const { data } = useGetOrders({ designId })
+    const [categoryId, setCategoryId] = useState<string | undefined>()
+    const [userId, setUserId] = useState<string | undefined>()
+    const [filters, setFilters] = useState<FilterValues>({})
+
+    const { data } = useGetOrders({ designId, categoryId, userId, ...filters })
 
     return (
         <div className='mt-5'>
@@ -38,26 +44,37 @@ const OrdersList: FC = () => {
                             placeholder: 'جستجو',
                         },
                         {
-                            name: 'status',
-                            type: 'select',
-                            placeholder: 'وضعیت',
-                            options: [
-                                { label: 'درحال انتظار', value: 'pending' },
-                            ],
+                            name: 'from',
+                            type: 'date',
+                            placeholder: 'از تاریخ',
                         },
                         {
-                            name: 'date',
+                            name: 'to',
                             type: 'date',
-                            placeholder: 'تاریخ',
+                            placeholder: 'تا تریخ',
                         },
                     ]}
-                    onChange={() => { }} />
-                <UserSearch className='w-[220px]' />
+                    onChange={setFilters} />
+            </div>
+
+            <div className='flex mt-6 gap-4'>
+                <UserSearch
+                    placeholder='جستجوی کاربر'
+                    className='w-[220px]'
+                    onChange={(id) => setUserId(id || undefined)}
+                />
                 <DesignerSearch
                     className='w-[220px]'
                     placeholder='جستجوی طراح'
                     onChange={(id) => setDesignId(id || undefined)}
                 />
+                <div className='w-[220px]'>
+                    <CategoriesSelect
+                        isDisableShowLable
+                        placeholder='جستجوی نوع'
+                        onChange={(e) => setCategoryId(e.target.value || undefined)}
+                    />
+                </div>
             </div>
 
             <div className='mt-8'>

src/pages/order/hooks/useOrderData.ts

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

src/pages/order/service/OrderService.ts

@@ -15,9 +15,28 @@ import type {
   ProductResponeType,
 } from "@/pages/product/types/Types";
 
-export const getOrders = async (params?: { designId?: string }) => {
+export type GetOrdersParams = {
+  designId?: string;
+  categoryId?: string;
+  userId?: string;
+  search?: string | null;
+  from?: string | null;
+  to?: string | null;
+};
+
+const cleanParams = (params?: GetOrdersParams) => {
+  if (!params) return undefined;
+  return Object.fromEntries(
+    Object.entries(params).filter(
+      ([_, v]) => v != null && v !== '',
+    ) as [string, string][],
+  );
+};
+
+export const getOrders = async (params?: GetOrdersParams) => {
+  const query = cleanParams(params);
   const { data } = await axios.get<OrderListResponseType>(`/admin/orders`, {
-    params: params?.designId ? { designId: params.designId } : undefined,
+    params: query,
   });
   return data;
 };

src/pages/product/components/CategoriesSelect.tsx

@@ -4,6 +4,8 @@ import Select from '@/components/Select'
 
 type Props = {
     error_text?: string,
+    isDisableShowLable?: boolean,
+    placeholder?: string,
 
 } & SelectHTMLAttributes<HTMLSelectElement>
 
@@ -13,8 +15,8 @@ const CategoriesSelect: FC<Props> = (props) => {
 
     return (
         <Select
-            label='دسته'
-            placeholder='انتخاب'
+            label={props.isDisableShowLable ? undefined : 'دسته'}
+            placeholder={props.placeholder || 'انتخاب'}
             items={categories?.data?.map((item) => {
                 return {
                     label: item.title,