Api integrated for WorkSpace and JobStatus

src/Pages/MasterModule/JobStatus/EditJobStatusModel.tsx

@@ -1,19 +1,58 @@
 import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../../components/ui/dialog"
-import { Field, Input, Span, Stack } from "@chakra-ui/react"
+import { Box, Field, Input, Stack } from "@chakra-ui/react"
 import { Button } from "../../../components/ui/button"
 // import { FaRegEdit } from "react-icons/fa";
 import Edit from "../../../components/ActionIcons/Edit";
+import { useState } from "react";
+import { useUpdateJobStatusMutation } from "../../../Redux/Service/job.status";
+import { Toaster, toaster } from "../../../components/ui/toaster";
 
 
-function EditJobStatusModel() {
+function EditJobStatusModel({ localData, refetch }: { localData: any, refetch: VoidFunction }) {
+    const [updateJobStatus] = useUpdateJobStatusMutation()
+    const [title, setTitle] = useState(localData.translation.title);
+    const [isOpen, setIsOpen] = useState(false);
 
+    console.log(localData);
+    
+    const handleOpenModal = () => {
+        if (localData) {
+            setIsOpen(true);
+        }
+    };
 
+    const handleSubmit = async () => {
+        if (!title.trim()) {
+            toaster.create({
+                title: "Error",
+                description: "Title field cannot be empty.",
+                type: "error",
+            });
+            return;
+        }
+
+        const payload = {
+            id: localData?.id,
+            title: title
+        };
+
+        try {
+            await updateJobStatus(payload).unwrap();
+            refetch()
+            setIsOpen(false);
+        } catch (error) {
+            console.error("Error updating template:", error);
+            alert("Failed to update template");
+        }
+    };
 
     return (
 
-        <DialogRoot placement="center">
+        <DialogRoot placement="center" open={isOpen} onOpenChange={({ open }) => setIsOpen(open)}>
             <DialogTrigger asChild>
-                <Span><Edit /></Span>
+                <Box bg={"transparent"} onClick={handleOpenModal}>
+                    <Edit />
+                </Box>
             </DialogTrigger>
 
             <DialogContent
@@ -35,21 +74,30 @@ function EditJobStatusModel() {
 
                         <Field.Root>
                             <Field.Label color="black" pt={1} fontSize="12px">Job Status</Field.Label>
-                            <Input value="Lorem Ipsum" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
+                            <Input
+                                value={title}
+                                bgColor="#EEEEEE"
+                                color="black"
+                                border="none"
+                                pl={1}
+                                fontSize="12px"
+                                height="30px"
+                                onChange={(e) => setTitle(e.target.value)}
+                            />
                         </Field.Root>
                     </Stack>
 
                 </DialogBody>
                 <DialogFooter display="flex" justifyContent="center" pt={"2"}>
-                    <Button w="100%" bg="#02A0A0" color={"#fff"}>
+                    <Button w="100%" bg="#02A0A0" color={"#fff"} onClick={handleSubmit}>
                         Save
                     </Button>
                 </DialogFooter>
 
                 <DialogCloseTrigger color="black" />
             </DialogContent>
+            <Toaster />
         </DialogRoot >
-
     )
 }
 

src/Pages/MasterModule/JobStatus/JobStatus.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 JobStatusAddModel from "./JobStatusAddModel";
 import EditJobStatusModel from "./EditJobStatusModel";
+import { useGetJobStatusQuery, useJobStatusToggleMutation } from "../../../Redux/Service/job.status";
+import { useEffect, useState } from "react";
+import SearchComponent from "../../../components/SearchComponent";
+import { toaster } from "../../../components/ui/toaster";
 
 
 
@@ -18,22 +20,93 @@ const tableHeadRow = [
 
 ];
 
-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">
+//         <EditJobStatusModel />
+//         <Box>
+//           <Switch colorPalette={'teal'} size={"xs"} />
+//         </Box>
+//       </HStack>
+//     ),
+//   })),
+// ];
+
+const JobStatus = () => {
+  const [currentPage, setCurrentPage] = useState(1);
+  const { data, refetch } = useGetJobStatusQuery(currentPage)
+  const [localData, setLocalData] = useState<any[]>([]);
+  const [searchTerm, setSearchTerm] = useState("");
+  const [jobStatusToggle] = useJobStatusToggleMutation()
+  console.log(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 jobStatusToggle({ id: agencyId, is_active: newStatus }).unwrap();
+      refetch()
+    } catch (error) {
+      console.error("Error updating:", 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) => {
+    return (agency.job_status_translation.map((item: any) => {
+      const searchLower = searchTerm.toLowerCase();
+      const title = item.title?.toLowerCase().includes(searchLower);
+      return title;
+    }))
+  });
+
+  const managepost = filteredData?.flatMap((agency: any, index: number) => (agency.job_status_translation.map((translation: any) => ({
+    'id': agency.id,
+    "Sr. No": (currentPage - 1) * (data?.data.per_page ?? 0) + index + 1,
+    "Title": translation.title,
+    "is_active": agency.is_active,
     "Action": (
       <HStack justifyContent="center">
-        <EditJobStatusModel />
+        {/* <ViewAgencyMaster agency={localData} id={agency.id} /> */}
+        <EditJobStatusModel localData={{ ...agency, translation }} 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 JobStatus = () => {
   return (
 
     <MainFrame>
@@ -50,34 +123,28 @@ const JobStatus = () => {
           </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> */}
-            <JobStatusAddModel />
+            <JobStatusAddModel 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>
     </MainFrame>

src/Pages/MasterModule/JobStatus/JobStatusAddModel.tsx

@@ -2,31 +2,66 @@ import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHead
 import { Field, Input, Stack, Text } from "@chakra-ui/react"
 import { IoMdAdd } from "react-icons/io"
 import { Button } from "../../../components/ui/button"
+import { useCreateJobStatusPostMutation } from "../../../Redux/Service/job.status"
+import { toaster } from "../../../components/ui/toaster"
+import { useState } from "react"
+
+function JobStatusAddModel({ refetch }: { refetch: VoidFunction }) {
+    const [title, setTitle] = useState('')
+    const [isOpen, setIsOpen] = useState(false);
+    const [createJobStatusPost] = useCreateJobStatusPostMutation()
+
+    const handleOpenModal = () => {
+        setIsOpen(true);
+    };
+
+    const handleSubmit = async () => {
+        if (!title.trim()) {
+            toaster.create({
+                title: "Error",
+                description: "Title field cannot be empty.",
+                type: "error",
+            });
+            return;
+        }
+
+        const payload = {
+            title: title,
+        };
+
+        try {
+            await createJobStatusPost(payload).unwrap();
+            refetch()
+            setIsOpen(false);
+            setTitle('')
+        } catch (error) {
+            console.error("Error updating template:", error);
+            alert("Failed to update template");
+        }
+    };
 
-function JobStatusAddModel() {
-   
     return (
 
-        <DialogRoot placement="center">
+        <DialogRoot placement="center" open={isOpen}>
             <DialogTrigger asChild>
                 {/* <Button bg={"transparent"} size="sm">
                     <MdOutlineRemoveRedEye style={{ cursor: "pointer", fontSize: "16px" }} />
                 </Button> */}
-                <Button  px={5} size={"xs"} bg={"#02A0A0"}>
+                <Button px={5} size={"xs"} bg={"#02A0A0"} onClick={handleOpenModal}>
                     <IoMdAdd /> <Text>Add</Text>
                 </Button>
 
             </DialogTrigger>
 
             <DialogContent
-                 bg={"#fff"}
-                 // w={{ lg: "60%", md: "230px" }}
-                 w={{ base: '90%', md: '400px' }}
+                bg={"#fff"}
+                // w={{ lg: "60%", md: "230px" }}
+                w={{ base: '90%', md: '400px' }}
                 height={'auto'}
-                 
-                 overflowX="hidden" 
-                 p={3} // Reduced padding
-                 bgSize={'md'}
+
+                overflowX="hidden"
+                p={3} // Reduced padding
+                bgSize={'md'}
             >
                 <DialogHeader bg="white" >
                     <DialogTitle alignSelf="center" color="black" fontSize="14px">Add</DialogTitle>
@@ -37,18 +72,28 @@ function JobStatusAddModel() {
 
                         <Field.Root>
                             <Field.Label color="black" pt={1} fontSize="12px">Job Status</Field.Label>
-                            <Input placeholder="" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
+                            <Input
+                                placeholder=""
+                                bgColor="#EEEEEE"
+                                color="black"
+                                border="none"
+                                pl={1}
+                                fontSize="12px"
+                                height="30px"
+                                value={title}
+                                onChange={(e) => setTitle(e.target.value)}
+                            />
                         </Field.Root>
                     </Stack>
 
                 </DialogBody>
                 <DialogFooter display="flex" justifyContent="center" pt={"2"}>
-                    <Button w="100%" bg="#02A0A0" color={"#fff"}>
+                    <Button w="100%" bg="#02A0A0" color={"#fff"} onClick={handleSubmit}>
                         Save
                     </Button>
                 </DialogFooter>
 
-                <DialogCloseTrigger color="black" />
+                <DialogCloseTrigger color="black" onClick={() => setIsOpen(false)} />
             </DialogContent>
         </DialogRoot >