Updated subadmin add / ediit function

src/Pages/SubAdmin/SubAdmin.tsx

@@ -1,7 +1,7 @@
-import { Box, HStack, Image, Input, Text } from "@chakra-ui/react"
+import { Box, HStack, Image, Text } from "@chakra-ui/react"
 import MainFrame from "../../components/MainFrame"
-import { InputGroup } from "../../components/ui/input-group"
-import { LuSearch } from "react-icons/lu"
+// import { InputGroup } from "../../components/ui/input-group"
+// import { LuSearch } from "react-icons/lu"
 import DataTable from "../../components/DataTable"
 import AlertDailog from "../../components/AlertDailog";
 // import { RiDeleteBin5Line } from "react-icons/ri";
@@ -12,6 +12,8 @@ import Delete from "../../components/ActionIcons/Delete"
 import { PermissionResponse, useDeleteSubAdminPostMutation, useGetPermissionQuery, useGetSubAdminQuery } from "../../Redux/Service/manage.subadmin.service"
 import { useEffect, useState } from "react"
 import { toaster } from "../../components/ui/toaster"
+import { useDebounce } from "../../components/Hooks/useDebounce"
+import SearchComponent from "../../components/SearchComponent"
 
 
 // table data
@@ -55,12 +57,17 @@ const tableHeadRow = [
 // ];
 
 const SubAdmin = () => {
-  const { data, refetch } = useGetSubAdminQuery()
+  const [currentPage, setCurrentPage] = useState(1);
+  // const { data, refetch } = useGetSubAdminQuery()
   const { data: permissions } = useGetPermissionQuery()
   const [localData, setLocalData] = useState<any[]>([]);
   const [allPermissions, setAllPermissions] = useState<PermissionResponse>();
   const [deleteModal, setDeleteModal] = useState(false)
   const [deleteSubAdminPost] = useDeleteSubAdminPostMutation()
+    const [searchTerm, setSearchTerm] = useState("");
+    const debouncedSearchTerm = useDebounce(searchTerm, 500);
+    const queryArgs = debouncedSearchTerm ? { page: currentPage, search: debouncedSearchTerm } : { page: currentPage };
+  const { data, refetch, isError, isFetching } = useGetSubAdminQuery(queryArgs);
 
   useEffect(() => {
     if (data?.data.data) {
@@ -72,6 +79,15 @@ const SubAdmin = () => {
   console.log("============================", allPermissions);
   console.log('localData', localData);
 
+  const handlePageChange = (page: number) => {
+    setCurrentPage(page);
+  };
+
+  const handleSearchChange = (value: string) => {
+    setSearchTerm(value);
+    setCurrentPage(1);
+  };
+
  const handleDeleteAdmin = async (faqId: number) => {
     try {
       const response = await deleteSubAdminPost(faqId).unwrap();
@@ -103,7 +119,15 @@ const SubAdmin = () => {
     });
   };
 
-  const managepost = localData?.map((agency: any, index: number) => ({
+  const filteredData = localData?.filter((agency) => {
+    const searchLower = searchTerm.toLowerCase();
+    const userName = agency.user_name?.toLowerCase().includes(searchLower);
+    const firstName = agency.first_name?.toLowerCase().includes(searchLower);
+    const lastName = agency.last_name?.toLowerCase().includes(searchLower);
+    return userName || firstName || lastName;
+  });
+
+  const managepost = filteredData?.map((agency: any, index: number) => ({
     'id': agency.id,
     "Sr. No": index + 1,
     "Id": agency.unique_id,
@@ -151,26 +175,10 @@ const SubAdmin = () => {
           </Text>
 
           <HStack>
-            <InputGroup
-              startElement={
-                <LuSearch fontSize={"xs"} style={{ position: 'relative', left: '10px' }} />
-              }
-              color={"#000"}
-            >
-              <Input
-                p={3}
-                w={300}
-                bg={"#fff"}
-                colorPalette={"cyan"}
-                _focus={{ border: "1px solid #02A0A0" }}
-                rounded={"md"}
-                size={"xs"}
-                fontSize={"sm"}
-                placeholder="Search..."
-                bgColor={'#EEEEEE'}
-                ps={8}
+            <SearchComponent
+                         value={searchTerm}
+                         onChange={handleSearchChange}
                        />
-            </InputGroup>
             {/* <Button bgColor={'#EEEEEE'} pl={3} pr={3}><IoMdAdd /> <Text>Add</Text></Button> */}
             {allPermissions && <AddModel refetch={refetch} allPermissions={allPermissions}/>}
           </HStack>
@@ -179,8 +187,15 @@ const SubAdmin = () => {
           sortableColumns={["Name", "Registration Date "]}
           tableHeadRow={tableHeadRow}
           data={managepost}
-        // paginationData={data?.data}
-        // refetch={refetch}
+          paginationData={{
+            current_page: data?.data.current_page || 1,
+            last_page: data?.data.last_page || 1,
+            per_page: data?.data.per_page || 10,
+            total: data?.data.total || 0
+          }}
+          onPageChange={handlePageChange}
+          isLoading={isFetching}
+          isError={isError}
         />
       </Box>    </MainFrame>
   )

src/Redux/Service/manage.subadmin.service.ts

@@ -134,8 +134,13 @@ export const manageSubAdmin = createApi({
       }),
     }),
 
-    getSubAdmin: builder.query<ApiResponse, void>({
-      query: () => `/sub-admin`,
+    getSubAdmin: builder.query<ApiResponse, { page?: number; search?: string }>({
+      query: ({ page, search }) => {
+        const params = new URLSearchParams();
+        if (page) params.append("page", page.toString());
+        if (search) params.append("search", search);
+        return `/sub-admin?${params.toString()}`
+      }
     }),
 
     getPermission: builder.query<PermissionResponse, void>({