customer search

src/pages/customer/List.tsx

@@ -6,7 +6,6 @@ import Button from "../../components/Button";
 import Input from "../../components/Input";
 import PageLoading from "../../components/PageLoading";
 import Pagination from "../../components/Pagination";
-import Select from "../../components/Select";
 import Td from "../../components/Td";
 import { Pages } from "../../config/Pages";
 import { useGetCustomers } from "./hooks/useCustomerData";
@@ -16,7 +15,13 @@ const CustomerList: FC = () => {
   const { t } = useTranslation("global");
   const [page, setPage] = useState(1);
   const [limit, setLimit] = useState(10);
-  const getCustomers = useGetCustomers(page, limit);
+  const [search, setSearch] = useState("");
+  const getCustomers = useGetCustomers(page, limit, false, search);
+
+  const handleSearch = (value: string) => {
+    setPage(1);
+    setSearch(value);
+  };
 
   return (
     <div className="mt-4">
@@ -35,32 +40,13 @@ const CustomerList: FC = () => {
         </Link>
       </div>
 
-      <div className="flex justify-between items-center mt-12">
-        <div className="flex gap-4">
-          <Select
-            className="w-36"
-            items={[
-              { label: "All", value: "all" },
-              { label: "Active", value: "active" },
-              { label: "Inactive", value: "inactive" },
-            ]}
-            placeholder={t("service.category")}
-          />
-          <Select
-            className="w-36"
-            items={[
-              { label: "All", value: "all" },
-              { label: "Active", value: "active" },
-              { label: "Inactive", value: "inactive" },
-            ]}
-            placeholder={t("service.status")}
-          />
-        </div>
+      <div className="flex justify-end items-center mt-12">
         <div>
           <Input
             variant="search"
-            placeholder={t("service.search")}
+            placeholder={t("search")}
             className="bg-white border border-border"
+            onChangeSearchFinal={handleSearch}
           />
         </div>
       </div>

src/pages/customer/hooks/useCustomerData.ts

@@ -2,10 +2,10 @@ import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import * as api from "../service/CustomerService";
 import { CreateCustomerType } from "../types/CustomerTypes";
 
-export const useGetCustomers = (page: number, limit: number, withoutPaginate?: boolean) => {
+export const useGetCustomers = (page: number, limit: number, withoutPaginate?: boolean, search?: string) => {
   return useQuery({
-    queryKey: ["customers", page, limit],
-    queryFn: () => api.getCustomers(page, limit, withoutPaginate),
+    queryKey: ["customers", page, limit, withoutPaginate, search],
+    queryFn: () => api.getCustomers(page, limit, withoutPaginate, search),
   });
 };
 

src/pages/customer/service/CustomerService.ts

@@ -1,8 +1,10 @@
 import axios from "../../../config/axios";
 import { CreateCustomerType } from "../types/CustomerTypes";
 
-export const getCustomers = async (page: number, limit: number, withoutPaginate?: boolean) => {
-  const { data } = await axios.get(`/users/customers?page=${page}&limit=${limit}&paginate=${withoutPaginate ? "0" : "1"}`);
+export const getCustomers = async (page: number, limit: number, withoutPaginate?: boolean, search?: string) => {
+  const { data } = await axios.get(
+    `/users/customers?page=${page}&limit=${limit}&paginate=${withoutPaginate ? "0" : "1"}&q=${encodeURIComponent(search ?? "")}`,
+  );
   return data;
 };