Api integrated for WorkSpace and JobStatus

src/Pages/MasterModule/WorkspaceMode/WorkspaceMode.tsx

@@ -1,11 +1,13 @@
-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 DataTable from "../../../components/DataTable";
 import { Switch } from "../../../components/ui/switch";
 import WorkAddModel from "./WorkAddModel";
 import EditWorkModel from "./EditWorkModel";
+import { useEffect, useState } from "react";
+import { useGetWorkSpaceModeQuery, useWorkspaceToggleMutation } from "../../../Redux/Service/workspace.mode";
+import SearchComponent from "../../../components/SearchComponent";
+import { Toaster, toaster } from "../../../components/ui/toaster";
 
 
 
@@ -15,25 +17,95 @@ const tableHeadRow = [
   "Sr. No",
   "Title",
   "Action"
-  
+
 ];
 
-const managepost: any[] = [
-  ...Array.from({ length: 12 }, (_, i) => ({
-    "Sr. No": i + 1,
-    "Title": "Lorem Ipsum",
+// const managepost: any[] = [
+//   ...Array.from({ length: 12 }, (_, i) => ({
+//     "Sr. No": i + 1,
+//     "Title": "Lorem Ipsum",
+//     "Action": (
+//       <HStack justifyContent="center">
+//         <EditWorkModel />
+//         <Box>
+//           <Switch colorPalette={'teal'} size={"xs"} />
+//         </Box>
+//       </HStack>
+//     ),
+//   })),
+// ];
+
+const WorkspaceMode = () => {
+  const [currentPage, setCurrentPage] = useState(1);
+  const { data, refetch } = useGetWorkSpaceModeQuery(currentPage)
+  const [localData, setLocalData] = useState<any[]>([]);
+  const [searchTerm, setSearchTerm] = useState("");
+  const [workspaceToggle] = useWorkspaceToggleMutation()
+
+  console.log("Workspace Data", data?.data.data)
+
+  useEffect(() => {
+    if (data?.data?.data) {
+      setLocalData(data?.data.data);
+    }
+  }, [data]);
+
+  const handlePageChange = (page: number) => {
+    setCurrentPage(page);
+  };
+
+  const handleToggle = async (agencyId: string, currentStatus: number) => {
+    const newStatus = currentStatus ? 0 : 1;
+    setLocalData((prevData) =>
+      prevData.map((agency) =>
+        agency.id === agencyId ? { ...agency, is_active: newStatus } : agency
+      )
+    );
+    try {
+      await workspaceToggle({ id: agencyId, is_active: newStatus }).unwrap();
+      refetch()
+    } catch (error) {
+      console.error("Error updating privacy policy:", error);
+      toaster.create({
+        title: "Error",
+        description: "Someting went wrong.",
+        type: "error",
+      });
+      setLocalData((prevData) =>
+        prevData.map((agency) =>
+          agency.id === agencyId ? { ...agency, is_active: currentStatus } : agency
+        )
+      );
+    }
+  };
+
+  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": (currentPage - 1) * (data?.data.per_page ?? 0) + index + 1,
+    "Title": agency.en_name,
+    "is_active": agency.is_active,
     "Action": (
       <HStack justifyContent="center">
-        <EditWorkModel />
+        {/* <ViewAgencyMaster agency={localData} id={agency.id} /> */}
+        <EditWorkModel localData={agency} refetch={refetch} />
         <Box>
-          <Switch colorPalette={'teal'} size={"xs"}/>
+          <Switch
+            colorPalette={"teal"}
+            size={"xs"}
+            onChange={() => handleToggle(agency.id, Number(agency.is_active))}
+            checked={Boolean(Number(agency.is_active))}
+          />
         </Box>
       </HStack>
     ),
-  })),
-];
+  }));
 
-const WorkspaceMode = () => {
   return (
 
     <MainFrame>
@@ -46,40 +118,35 @@ const WorkspaceMode = () => {
           px={3}
         >
           <Text as={"span"} fontSize={"sm"} fontWeight={500} color={"#000"}>
-          Workspace Mode
+            Workspace Mode
           </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> */}
-            <WorkAddModel />
+            <WorkAddModel refetch={refetch}/>
           </HStack>
         </HStack>
         <DataTable
           sortableColumns={["Name", "Registration Date "]}
           tableHeadRow={tableHeadRow}
           data={managepost}
+          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>       
+      </Box>
+      <Toaster />
     </MainFrame>
   )
 }