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>