Fixed pagination and Master module country updated

src/Pages/MasterModule/IndustryMaster/IndustryMasterList.tsx

@@ -1,13 +1,14 @@
-import { Box, HStack, Input, Text } from "@chakra-ui/react";
+import { Box, HStack, 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 { Switch } from "../../../components/ui/switch";
 import { useEffect, useState } from "react";
 import { useGetIndustryMasterQuery, useIndustryMasterToggleMutation } from "../../../Redux/Service/industry.master.service";
 import EditIndustryMaster from "./EditIndustryMaster";
 import AddIndustryMaster from "./AddIndustryMaster";
+import SearchComponent from "../../../components/SearchComponent";
 
 
 // table data
@@ -42,9 +43,11 @@ const tableHeadRow = [
 // ];
 
 const IndustryMasterList = () => {
-    const { data, refetch } = useGetIndustryMasterQuery()
+    const [currentPage, setCurrentPage] = useState(1);
+    const { data, refetch } = useGetIndustryMasterQuery(currentPage)
     const [industryMasterToggle] = useIndustryMasterToggleMutation()
     const [localData, setLocalData] = useState<any[]>([]);
+     const [searchTerm, setSearchTerm] = useState("");
 
     useEffect(() => {
         if (data?.data?.data) {
@@ -52,6 +55,10 @@ const IndustryMasterList = () => {
         }
     }, [data]);
 
+    const handlePageChange = (page: number) => {
+        setCurrentPage(page);
+    };
+
     const handleToggle = async (agencyId: string, currentStatus: number) => {
         const newStatus = currentStatus ? 0 : 1;
         setLocalData((prevData) =>
@@ -72,9 +79,15 @@ const IndustryMasterList = () => {
         }
     };
 
-    const managepost = localData?.map((agency: any, index: number) => ({
+    const filteredData = localData?.filter((agency) => {
+        const searchLower = searchTerm.toLowerCase();
+        const title = agency.en_name?.toLowerCase().includes(searchLower);
+        return title;
+    });
+
+    const managepost = filteredData?.map((agency: any, index: number) => ({
         'id': agency.id,
-        "Sr. No": index + 1,
+        "Sr. No": (currentPage - 1) * (data?.data.per_page ?? 0) + index + 1,
         "Title": agency.en_name,
         "is_active": agency.is_active,
         "Action": (
@@ -93,11 +106,11 @@ const IndustryMasterList = () => {
         ),
     }));
 
-    useEffect(() => {
-        console.log("Fetched data:", data);
-        console.log("Local data:", localData);
-        console.log("Managepost data:", managepost);
-    }, [data, localData, managepost]);
+    // useEffect(() => {
+    //     console.log("Fetched data:", data);
+    //     console.log("Local data:", localData);
+    //     console.log("Managepost data:", managepost);
+    // }, [data, localData, managepost]);
 
     return (
 
@@ -115,37 +128,29 @@ const IndustryMasterList = () => {
                     </Text>
 
                     <HStack >
-                        <InputGroup
-                            startElement={
-                                <LuSearch fontSize={"xs"} style={{ position: 'relative', left: '10px' }} />
-                            }
-                            color={"#000"}
-                        >
-                            <Input
-                                p={3}
-                                w={300}
-                                bg={"#fff"}
-                                colorPalette={"blue"}
-                                _focus={{ border: "1px solid #02A0A0" }}
-                                rounded={"md"}
-                                size={"xs"}
-                                fontSize={"sm"}
-                                placeholder="Search..."
-                                bgColor={'#EEEEEE'}
-                                ps={8}
-                            />
-                        </InputGroup>
+                        <SearchComponent
+                            value={searchTerm}
+                            onChange={(value) => {
+                                setSearchTerm(value);
+                                setCurrentPage(1);
+                            }}
+                        />
                         {/* <Button bgColor={'#EEEEEE'} pl={3} pr={3}><IoMdAdd /> <Text>Add</Text></Button> */}
                         {/* <ViewAgencyAddModel /> */}
-                        <AddIndustryMaster refetch={refetch}/>
+                        <AddIndustryMaster refetch={refetch} />
                     </HStack>
                 </HStack>
                 <DataTable
                     sortableColumns={["Name"]}
                     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}
                 />
             </Box>
         </MainFrame>