filter receip

src/pages/receipts/List.tsx

@@ -7,12 +7,21 @@ import { useGetInvoices } from './hooks/useReceiptData'
 import PageLoading from '../../components/PageLoading'
 import { ReceiptItemType } from './types/ReceiptTypes'
 import { NumberFormat } from '../../config/func'
+import Select from '../../components/Select'
+import { useGetCustomers } from '../customer/hooks/useCustomerData'
+import Input from '../../components/Input'
+import { CustomerItemType } from '../customer/types/CustomerTypes'
+import DatePickerComponent from '../../components/DatePicker'
 
 const ReceiptsList: FC = () => {
 
     const { t } = useTranslation('global')
     const [activeTab, setActiveTab] = useState<"PENDING" | "PAID" | "CANCELED" | "EXPIRED">('PENDING')
-    const getInvoices = useGetInvoices(activeTab)
+    const [customerId, setCustomerId] = useState<string>('')
+    const [search, setSearch] = useState<string>('')
+    const [date, setDate] = useState<string>('')
+    const getInvoices = useGetInvoices(activeTab, customerId, search, date)
+    const getCustomers = useGetCustomers()
 
     return (
         <div className='mt-4'>
@@ -20,6 +29,39 @@ const ReceiptsList: FC = () => {
                 {t('receip.receip_list')}
             </div>
 
+            <div className='flex justify-between items-center mt-12'>
+                <div className='flex gap-4'>
+                    <Select
+                        label={t('receip.customer')}
+                        placeholder={t('select')}
+                        items={getCustomers.data?.data?.customers?.map((item: CustomerItemType) => {
+                            return {
+                                label: item.firstName + ' ' + item.lastName,
+                                value: item.id
+                            }
+                        })}
+                        onChange={(e) => setCustomerId(e.target.value)}
+                        className='min-w-40'
+                    />
+
+                    <DatePickerComponent
+                        onChange={(date) => setDate(date)}
+                        label={t('receip.since')}
+                        className='min-w-40'
+                        placeholder={t('select')}
+                    />
+
+                </div>
+                <div>
+                    <Input
+                        variant='search'
+                        placeholder={t('service.search')}
+                        className='bg-white border border-border'
+                        onChangeSearchFinal={(value) => setSearch(value)}
+                    />
+                </div>
+            </div>
+
             <div className='mt-14'>
                 <Tabs
                     active={activeTab}

src/pages/receipts/hooks/useReceiptData.ts

@@ -2,10 +2,15 @@ import { useMutation, useQuery } from "@tanstack/react-query";
 import * as api from "../service/ReceiptService";
 import { CreateReceiptType } from "../types/ReceiptTypes";
 
-export const useGetInvoices = (status: string) => {
+export const useGetInvoices = (
+  status: string,
+  customerId: string,
+  search: string,
+  date: string
+) => {
   return useQuery({
-    queryKey: ["invoices", status],
-    queryFn: () => api.getInvoces(status),
+    queryKey: ["invoices", status, customerId, search, date],
+    queryFn: () => api.getInvoces(status, customerId, search, date),
   });
 };
 

src/pages/receipts/service/ReceiptService.ts

@@ -1,8 +1,17 @@
 import axios from "../../../config/axios";
 import { CreateReceiptType } from "../types/ReceiptTypes";
 
-export const getInvoces = async (status: string) => {
-  const { data } = await axios.get(`/invoices?status=${status}`);
+export const getInvoces = async (
+  status: string,
+  customerId: string,
+  search: string,
+  date: string
+) => {
+  let query = `status=${status}`;
+  if (customerId) query += `&userId=${customerId}`;
+  if (search) query += `&q=${search}`;
+  if (date) query += `&date=${date}`;
+  const { data } = await axios.get(`/invoices?${query}`);
   return data;
 };