Api integration for Department master completed

src/Pages/MasterModule/DepartmentMaster/AddDepartmentMaster.tsx

@@ -0,0 +1,155 @@
+import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../../components/ui/dialog"
+import { Field, Input, Stack, Text } from "@chakra-ui/react"
+import { IoMdAdd } from "react-icons/io"
+import { Button } from "../../../components/ui/button"
+import { useState } from "react";
+import { toaster } from "../../../components/ui/toaster";
+import { useCreateDepartmentPostMutation, useGetDepartmentMasterDropDownQuery } from "../../../Redux/Service/department.master";
+
+function AddDepartmentMaster({ refetch }: { refetch: VoidFunction }) {
+    const [jobType, setJobType] = useState("");
+    const [isOpen, setIsOpen] = useState(false);
+    const [createDepartmentPost] = useCreateDepartmentPostMutation()
+    const { data } = useGetDepartmentMasterDropDownQuery()
+    const [selectdDep, setSelectdDep] = useState<any>({
+        id: '',
+        en_name: '',
+    });
+
+
+    const handleOpenModal = () => {
+        setIsOpen(true);  // Open modal when clicking "Add"
+    };
+
+    const handleSubmit = async () => {
+        if (!jobType.trim() || !selectdDep.id) {
+            toaster.create({
+                title: "Error",
+                description: "Title and Subtitle cannot be empty.",
+                type: "error",
+            });
+            return;
+        }
+
+        const payload = {
+            en_name: jobType,
+            industry_masters_xid: selectdDep.id,
+        };
+
+        try {
+            await createDepartmentPost(payload);
+            refetch()
+            setIsOpen(false);
+            setJobType("");
+            setSelectdDep({
+                id: '',
+                en_name: '',
+            })
+        } catch (error) {
+            console.error("Error updating template:", error);
+            alert("Failed to update template");
+        }
+    };
+
+    console.log("Selected Department", selectdDep);
+
+
+    return (
+
+        <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"} onClick={handleOpenModal}>
+                    <IoMdAdd /> <Text>Add</Text>
+                </Button>
+
+            </DialogTrigger>
+
+            <DialogContent
+                bg={"#fff"}
+                // w={{ lg: "60%", md: "230px" }}
+                w={{ base: '90%', md: '400px' }}
+                height={'auto'}
+
+                overflowX="hidden"
+                p={3} // Reduced padding
+                bgSize={'md'}
+            >
+                <DialogHeader bg="white" >
+                    <DialogTitle alignSelf="center" color="black" fontSize="14px">Add</DialogTitle>
+                </DialogHeader>
+
+                <DialogBody bg="white">
+                    <Stack py={3}>
+
+                        <Field.Root>
+                            <Field.Label color="black" pt={1} fontSize="12px">
+                                Select Industry
+                            </Field.Label>
+                            <select
+                                value={selectdDep.id}
+                                onChange={(e) => {
+                                    const selectedId = e.target.value;
+                                    const selectedIndustry = data?.data.find((item: any) => item.id.toString() === selectedId);
+                                    if (selectedIndustry) {
+                                        setSelectdDep({
+                                            id: selectedIndustry.id,
+                                            en_name: selectedIndustry.en_name,
+                                        });
+                                    }
+                                }}
+                                style={{
+                                    backgroundColor: "#EEEEEE",
+                                    color: "black",
+                                    border: "none",
+                                    height: "30px",
+                                    fontSize: "12px",
+                                    padding: "4px",
+                                    borderRadius: "4px",
+                                    width: "100%",
+                                }}
+                            >
+                                <option value="" disabled>
+                                    Select department
+                                </option>
+                                {data?.data.map((item: any) => (
+                                    <option value={item.id} key={item.id}>
+                                        {item.en_name}
+                                    </option>
+                                ))}
+                            </select>
+                        </Field.Root>
+
+                        <Field.Root>
+                            <Field.Label color="black" pt={1} fontSize="12px">Department</Field.Label>
+                            <Input
+                                placeholder=""
+                                bgColor="#EEEEEE"
+                                color="black"
+                                border="none"
+                                pl={1}
+                                fontSize="12px"
+                                height="30px"
+                                value={jobType}
+                                onChange={(e) => setJobType(e.target.value)}
+                            />
+                        </Field.Root>
+                    </Stack>
+
+                </DialogBody>
+                <DialogFooter display="flex" justifyContent="center" pt={"2"}>
+                    <Button w="100%" bg="#02A0A0" color={"#fff"} onClick={handleSubmit}>
+                        Save
+                    </Button>
+                </DialogFooter>
+
+                <DialogCloseTrigger color="black" onClick={() => setIsOpen(false)} />
+            </DialogContent>
+        </DialogRoot >
+
+    )
+}
+
+export default AddDepartmentMaster

src/Pages/MasterModule/DepartmentMaster/DepartmentMasterList.tsx

@@ -0,0 +1,141 @@
+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 { useEffect, useState } from "react";
+import SearchComponent from "../../../components/SearchComponent";
+import { useDepartmentToggleMutation, useGetDepartmentMasterQuery } from "../../../Redux/Service/department.master";
+import AddDepartmentMaster from "./AddDepartmentMaster";
+import EditDepartmentMaster from "./EditDepartmentMaster";
+
+
+// table data
+
+const tableHeadRow = [
+    "Sr. No",
+    "Title",
+    "Action"
+
+];
+
+
+
+const DepartmentMasterList = () => {
+    const [currentPage, setCurrentPage] = useState(1);
+    const { data, refetch } = useGetDepartmentMasterQuery(currentPage)
+    const [departmentToggle] = useDepartmentToggleMutation()
+    const [localData, setLocalData] = useState<any[]>([]);
+     const [searchTerm, setSearchTerm] = useState("");
+
+     console.log("Department 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 departmentToggle({ id: agencyId, is_active: newStatus }).unwrap();
+            refetch()
+        } catch (error) {
+            console.error("Error updating privacy policy:", 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">
+                {/* <ViewAgencyMaster agency={localData} id={agency.id} /> */}
+                <EditDepartmentMaster localData={agency} refetch={refetch} />
+                <Box>
+                    <Switch
+                        colorPalette={"teal"}
+                        size={"xs"}
+                        onChange={() => handleToggle(agency.id, Number(agency.is_active))}
+                        checked={Boolean(Number(agency.is_active))}
+                    />
+                </Box>
+            </HStack>
+        ),
+    }));
+
+    // useEffect(() => {
+    //     console.log("Fetched data:", data);
+    //     console.log("Local data:", localData);
+    //     console.log("Managepost data:", managepost);
+    // }, [data, localData, managepost]);
+
+    return (
+
+        <MainFrame>
+            <Box>
+                <HStack
+                    w={"100%"}
+                    justifyContent={"space-between"}
+                    mb={4}
+                    py={0}
+                    px={3}
+                >
+                    <Text as={"span"} fontSize={"sm"} fontWeight={500} color={"#000"}>
+                        Department Master
+                    </Text>
+
+                    <HStack >
+                        <SearchComponent
+                            value={searchTerm}
+                            onChange={(value) => {
+                                setSearchTerm(value);
+                                setCurrentPage(1);
+                            }}
+                        />
+                        {/* <Button bgColor={'#EEEEEE'} pl={3} pr={3}><IoMdAdd /> <Text>Add</Text></Button> */}
+                        {/* <ViewAgencyAddModel /> */}
+                        <AddDepartmentMaster refetch={refetch} />
+                    </HStack>
+                </HStack>
+                <DataTable
+                    sortableColumns={["Name"]}
+                    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>
+    )
+}
+export default DepartmentMasterList

src/Pages/MasterModule/DepartmentMaster/EditDepartmentMaster.tsx

@@ -0,0 +1,159 @@
+import {
+    DialogBody,
+    DialogCloseTrigger,
+    DialogContent,
+    DialogFooter,
+    DialogHeader,
+    DialogRoot,
+    DialogTitle,
+    DialogTrigger,
+} from "../../../components/ui/dialog";
+import { Box, Field, Input, Stack } from "@chakra-ui/react";
+import { Button } from "../../../components/ui/button";
+import Edit from "../../../components/ActionIcons/Edit";
+import { useState } from "react";
+import { toaster } from "../../../components/ui/toaster";
+import { useGetDepartmentMasterDropDownQuery, useUpdateDepartmentMutation } from "../../../Redux/Service/department.master";
+
+function EditDepartmentMaster({ localData, refetch }: { localData: any, refetch: VoidFunction }) {
+    const [jobtype, setJobType] = useState("");
+    const [updateDepartment] = useUpdateDepartmentMutation()
+    const { data } = useGetDepartmentMasterDropDownQuery()
+    const [isOpen, setIsOpen] = useState(false);
+    const [selectdDep, setSelectdDep] = useState<any>({
+        id: localData.industry_master.id,
+        en_name: localData.industry_master.en_name,
+    });
+
+    const handleOpenModal = () => {
+        // const template = localData?.find((item: any) => item.id === id);
+        if (localData) {
+            setJobType(localData.en_name);
+            setSelectdDep({
+                id: localData.industry_master.id,
+                en_name: localData.industry_master.en_name,
+            })
+            setIsOpen(true);
+        }
+    };
+
+
+    const handleSubmit = async () => {
+        if (!jobtype.trim()) {
+            toaster.create({
+                title: "Error",
+                description: "Title and Subtitle cannot be empty.",
+                type: "error",
+            });
+            return;
+        }
+
+        const payload = {
+            id: localData.id,
+            industry_masters_xid: selectdDep.id != null ? selectdDep.id : localData.industry_master.id,
+            en_name: jobtype
+        };
+
+        try {
+            await updateDepartment(payload).unwrap();
+            refetch()
+            setIsOpen(false);
+        } catch (error) {
+            console.error("Error updating template:", error);
+            alert("Failed to update template");
+        }
+    };
+
+    console.log("Dropdown Data", selectdDep);
+    console.log("Dep Data", localData)
+
+
+    return (
+        <DialogRoot placement="center" open={isOpen} onOpenChange={({ open }) => setIsOpen(open)}>
+            <DialogTrigger asChild>
+                <Box bg={"transparent"} onClick={handleOpenModal}>
+                    <Edit />
+                </Box>
+            </DialogTrigger>
+
+            <DialogContent
+                bg={"#fff"}
+                // w={{ lg: "60%", md: "230px" }}
+                w={{ base: "90%", md: "400px" }}
+                height={"auto"}
+                overflowX="hidden"
+                p={3} // Reduced padding
+                bgSize={"md"}
+            >
+                <DialogHeader bg="white">
+                    <DialogTitle alignSelf="center" color="black" fontSize="14px">
+                        Edit Title
+                    </DialogTitle>
+                </DialogHeader>
+
+                <DialogBody bg="white">
+                    <Stack py={3}>
+                        <Field.Root>
+                            <Field.Label color="black" pt={1} fontSize="12px">
+                                Select Industry
+                            </Field.Label>
+                            <select
+                                value={selectdDep.id}
+                                onChange={(e) => {
+                                    const selected = data?.data.find((item: any) => item.id === Number(e.target.value));
+                                    if (selected) {
+                                        setSelectdDep({ id: selected.id, en_name: selected.en_name });
+                                    }
+                                }}
+                                style={{
+                                    backgroundColor: "#EEEEEE",
+                                    color: "black",
+                                    border: "none",
+                                    height: "30px",
+                                    fontSize: "12px",
+                                    padding: "4px",
+                                    borderRadius: "4px",
+                                    width: "100%",
+                                }}
+                            >
+                                <option value="" disabled>
+                                    Select department
+                                </option>
+                                {data?.data.map((item: any) => (
+                                    <option value={item.id} key={item.id}>
+                                        {item.en_name}
+                                    </option>
+                                ))}
+                            </select>
+                        </Field.Root>
+
+                        <Field.Root>
+                            <Field.Label color="black" pt={1} fontSize="12px">
+                                Department
+                            </Field.Label>
+                            <Input
+                                value={jobtype}
+                                bgColor="#EEEEEE"
+                                color="black"
+                                border="none"
+                                pl={1}
+                                fontSize="12px"
+                                height="30px"
+                                onChange={(e) => setJobType(e.target.value)}
+                            />
+                        </Field.Root>
+                    </Stack>
+                </DialogBody>
+                <DialogFooter display="flex" justifyContent="center" pt={"2"}>
+                    <Button w="100%" bg="#02A0A0" color={"#fff"} onClick={handleSubmit}>
+                        Save
+                    </Button>
+                </DialogFooter>
+
+                <DialogCloseTrigger color="black" onClick={() => setIsOpen(false)} />
+            </DialogContent>
+        </DialogRoot>
+    );
+}
+
+export default EditDepartmentMaster;

src/Redux/Service/department.master.ts

@@ -0,0 +1,109 @@
+import { createApi } from "@reduxjs/toolkit/query/react";
+import { baseQueryWithReauth } from "./apiSlice";
+
+export interface DepartmentData {
+    id: number;
+    industry_masters_xid: number;
+    en_name: string;
+    hi_name: string;
+    mr_name: string;
+    te_name: string;
+    ta_name: string;
+    bn_name: string;
+    or_name: string;
+    is_active: string;
+}
+
+interface ApiResponse {
+    status: string;
+    status_code: number;
+    message: string;
+    data: {
+        current_page: number,
+        last_page: number,
+        total: number,
+        from: number,
+        per_page: number,
+        to: number,
+        data: DepartmentData[];
+    };
+}
+
+export interface CountryEdit {
+    status: string;
+    status_code: number;
+    message: string;
+    data: DepartmentData[];
+}
+
+export interface DropDown{
+    status: string;
+    status_code: number;
+    message: string;
+    data: {
+        id: number;
+        en_name: string;
+    }[]
+}
+
+export type PostDepartment = {
+    en_name: string;
+    industry_masters_xid: number;
+};
+
+
+export const departmentMaster = createApi({
+    reducerPath: "departmentMaster",
+    baseQuery: baseQueryWithReauth, // Use enhanced baseQuery with error handling
+    endpoints: (builder) => ({
+        createDepartmentPost: builder.mutation<PostDepartment, Partial<PostDepartment>>({
+            query: (data) => ({
+                url: "/department-master-store",
+                method: "POST",
+                body: data,
+            }),
+        }),
+        // 🔹 GET: Fetch all posts
+        getDepartmentMaster: builder.query<ApiResponse, number>({
+            query: (page = 1) => `/department-master-list?page=${page}`,
+        }),
+
+        getDepartmentMasterDropDown: builder.query<DropDown, void>({
+            query: () => `/industry-master-get-category`,
+        }),
+
+        updateDepartment: builder.mutation({
+            query: (updatedData) => ({
+                url: "/department-master-update",
+                method: "POST",
+                body: updatedData,
+            }),
+        }),
+
+        departmentToggle: builder.mutation({
+            query: ({ id, is_active }) => ({
+                url: `/department-master-status`,
+                method: "POST",
+                body: { id, is_active },
+            }),
+        }),
+
+        // deleteFaqPost: builder.mutation<{ status: string; message: string }, { id: number }>({
+        //     query: ({ id }) => ({
+        //         url: `/faq-delete`,
+        //         method: "POST",
+        //         body: { id },
+        //     }),
+        // }),
+
+    }),
+});
+
+export const {
+    useGetDepartmentMasterQuery,
+    useGetDepartmentMasterDropDownQuery,
+    useCreateDepartmentPostMutation,
+    useUpdateDepartmentMutation,
+    useDepartmentToggleMutation,
+    // useDeleteFaqPostMutation
+} = departmentMaster;

src/Redux/Service/job.status.ts

@@ -0,0 +1,110 @@
+import { createApi } from "@reduxjs/toolkit/query/react";
+import { baseQueryWithReauth } from "./apiSlice";
+
+export interface CountryData {
+    id: number;
+    en_name: string;
+    hi_name: string;
+    mr_name: string;
+    te_name: string;
+    ta_name: string;
+    bn_name: string;
+    or_name: string;
+    country_code: string;
+    phonecode: string;
+    capital: string;
+    currency: string;
+    currency_name: string;
+    currency_symbol: string;
+    is_active: string;
+}
+
+interface ApiResponse {
+    status: string;
+    status_code: number;
+    message: string;
+    data: {
+        current_page: number,
+        last_page: number,
+        total: number,
+        from: number,
+        per_page: number,
+        to: number,
+        data: CountryData[];
+    };
+}
+
+export interface CountryEdit {
+    status: string;
+    status_code: number;
+    message: string;
+    data: CountryData[];
+}
+
+
+export type PostCountry = {
+    en_name: string;
+    country_code: string;
+    phonecode: string;
+    capital: string;
+    currency: string;
+    currency_name: string;
+    currency_symbol: string;
+};
+
+
+export const countryMaster = createApi({
+    reducerPath: "countryMaster",
+    baseQuery: baseQueryWithReauth, // Use enhanced baseQuery with error handling
+    endpoints: (builder) => ({
+        createCountryPost: builder.mutation<PostCountry, Partial<PostCountry>>({
+            query: (data) => ({
+                url: "/country-add",
+                method: "POST",
+                body: data,
+            }),
+        }),
+        // 🔹 GET: Fetch all posts
+        getCountryMaster: builder.query<ApiResponse, number>({
+            query: (page = 1) => `/country-list?page=${page}`,
+        }),
+
+        getCountryMasterEdit: builder.query<CountryEdit, number>({
+            query: (id) => `/country-edit/${id}`,
+        }),
+
+        updateCountry: builder.mutation({
+            query: (updatedData) => ({
+                url: "/country-update",
+                method: "POST",
+                body: updatedData,
+            }),
+        }),
+
+        countryToggle: builder.mutation({
+            query: ({ id, is_active }) => ({
+                url: `/country-status`,
+                method: "POST",
+                body: { id, is_active },
+            }),
+        }),
+
+        // deleteFaqPost: builder.mutation<{ status: string; message: string }, { id: number }>({
+        //     query: ({ id }) => ({
+        //         url: `/faq-delete`,
+        //         method: "POST",
+        //         body: { id },
+        //     }),
+        // }),
+
+    }),
+});
+
+export const {
+    useGetCountryMasterQuery,
+    useGetCountryMasterEditQuery,
+    useCreateCountryPostMutation,
+    useUpdateCountryMutation,
+    useCountryToggleMutation,
+    // useDeleteFaqPostMutation
+} = countryMaster;

src/Redux/Store.tsx

@@ -20,6 +20,7 @@ import { jobType } from "./Service/job.type.service";
 import { industryMaster } from "./Service/industry.master.service";
 import { profile } from "./Service/profile.password";
 import { countryMaster } from "./Service/country.master";
+import { departmentMaster } from "./Service/department.master";
 
 export const store = configureStore({
   reducer: {
@@ -43,6 +44,7 @@ export const store = configureStore({
     [industryMaster.reducerPath]: industryMaster.reducer,
     [profile.reducerPath]: profile.reducer,
     [countryMaster.reducerPath]: countryMaster.reducer,
+    [departmentMaster.reducerPath]: departmentMaster.reducer,
     auth: authReducer,
   },
   middleware: (getDefaultMiddleware) =>
@@ -66,6 +68,7 @@ export const store = configureStore({
       industryMaster.middleware,
       profile.middleware,
       countryMaster.middleware,
+      departmentMaster.middleware,
       ),
 });
 

src/Routes/Nav.ts

@@ -143,6 +143,11 @@ export const nav = [
               path: "/master-module/industry-master",
               Icon: GoDotFill,
             },
+            {
+              title: "Department Master",
+              path: "/master-module/department-master",
+              Icon: GoDotFill,
+            },
           ],
         },
   ];

src/Routes/Routes.ts

@@ -24,6 +24,7 @@ import RegisterUsers from "../Pages/ManageUsers/RegisterUsers/RegisterUsers";
 import DeactivatedAccounts from "../Pages/ManageUsers/DeactivatedAccounts/DeactivatedAccounts";
 import { Spinner } from "../components/Sipnner/Spinner";
 import IndustryMasterList from "../Pages/MasterModule/IndustryMaster/IndustryMasterList";
+import DepartmentMasterList from "../Pages/MasterModule/DepartmentMaster/DepartmentMasterList";
 
 export const RouteLink = [
     { path: "/", Component: Dashboard },
@@ -63,6 +64,7 @@ export const RouteLink = [
     { path: "/master-module/country", Component: Country},
     { path: "/master-module/job-status", Component: JobStatus},
     { path: "/master-module/industry-master", Component: IndustryMasterList},
+    { path: "/master-module/department-master", Component: DepartmentMasterList},
     // { path: "/job-status", Component: Spinner},
 
 ]