fix: stop tracking .env file

updated env testing
env updated
2025-10-01 19:23:26 +05:30 · 2025-09-19 18:21:20 +05:30 · 2025-09-19 18:18:06 +05:30 · 2025-09-19 18:12:42 +05:30 · 2025-09-17 14:04:21 +05:30 · 2025-09-17 14:01:16 +05:30
135 changed files with 15342 additions and 5595 deletions
--- a/.env
+++ b/.env
@@ -1,5 +0,0 @@
-VITE_API_URL='https://ssa.betadelivery.com/apia/v1'
-# VITE_API_URL='http://192.16.50.44/seo-backend/apia/v1'
-VITE_USER_NAME="Admin"
-VITE_PASSWORD="71%@L%es^bUX94`J9XT*@bh,._WWM{$%^^&&"
-VITE_APP_NAME=MyViteApp
--- a/.env.testing
+++ b/.env.testing
@@ -0,0 +1,7 @@
+VITE_API_URL='https://ssa.betadelivery.com/testing/apia/v1'
+VITE_USER_NAME="Admin"
+VITE_PASSWORD="71%@L%es^bUX94`J9XT*@bh,._WWM{$%^^&&"
+VITE_APP_NAME=MyViteApp
+VITE_IMG_TEMPLATES='https://ssa.betadelivery.com/storage/app/public/uploads/post_templates/'
+VITE_MAIN_URL='https://ssa.betadelivery.com/testing'
+VITE_POST_IMG=`${VITE_MAIN_URL}/storage/app/public/uploads/post/`
--- a/.gitignore
+++ b/.gitignore
@@ -22,3 +22,4 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+*.env
--- a/dev-dist/sw.js
+++ b/dev-dist/sw.js
@@ -82,7 +82,7 @@ define(['./workbox-54d0af47'], (function (workbox) { 'use strict';
    "revision": "3ca0b8505b4bec776b69afdba2768812"
  }, {
    "url": "index.html",
-    "revision": "0.3bv9k3911i8"
+    "revision": "0.73grfmd27h8"
  }], {});
  workbox.cleanupOutdatedCaches();
  workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), {
--- a/index.html
+++ b/index.html
@@ -1,13 +1,17 @@
 <!doctype html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/src/assets/favicon.png" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>SEO Admin</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
-</html>
+
+<head>
+  <meta charset="UTF-8" name="referrer" content="strict-origin-when-cross-origin" />
+  <!-- <link rel="icon" type="image/png+xml" href="/src/assets/favicon.png" /> -->
+   <link rel="icon" type="image/png" href="/favicon.png" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>SEO Admin</title>
+</head>
+
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/main.tsx"></script>
+</body>
+
+</html>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -24,12 +24,13 @@
    "react-dom": "^18.3.1",
    "react-hook-form": "^7.54.2",
    "react-icons": "^5.4.0",
+    "react-quill": "^2.0.0",
    "react-redux": "^9.2.0",
    "react-router-dom": "^7.1.1",
    "vite-plugin-pwa": "^0.21.1"
  },
  "devDependencies": {
-    "@chakra-ui/cli": "^3.2.3",
+    "@chakra-ui/cli": "^2.4.1",
    "@eslint/js": "^9.17.0",
    "@types/js-cookie": "^3.0.6",
    "@types/react": "^18.3.18",
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -4,12 +4,15 @@ import GlobalStateContext from "./Contexts/GlobalStateContext";
 import DefaultLayout from "./Layouts/DefaultLayout";
 import Login from "./Pages/Login";
 import { RouteLink } from "./Routes/Routes";
+import ForgotPassword from "./Pages/ForgotPassword";
+import VerifyEnterOTP from "./Pages/VerifyEnterOTP";
+import SetNewPassword from "./Pages/SetNewPassword";

-function App() {   
-  const context = useContext(GlobalStateContext); 
-  if (!context) throw new Error("App must be used within a GlobalStateProvider"); 
-  
-  const { isAuthenticate, setIsAuthenticate } = context; 
+function App() {
+  const context = useContext(GlobalStateContext);
+  if (!context) throw new Error("App must be used within a GlobalStateProvider");
+
+  const { isAuthenticate, setIsAuthenticate } = context;

  useEffect(() => {
    const token = localStorage.getItem("token");
@@ -18,16 +21,19 @@ function App() {

  console.log("Auth Status:", isAuthenticate);

-  return ( 
-    <Router> 
-      <Routes> 
+  return (
+    <Router>
+      <Routes>
        {/* Redirect logged-in users away from login */}
-        <Route path="/login" element={isAuthenticate && localStorage.getItem("token") ? <Navigate to="/" /> : <Login />} /> 
+        <Route path="/login" element={isAuthenticate && localStorage.getItem("token") ? <Navigate to="/" /> : <Login />} />
+        <Route path="/forgot-password" element={<ForgotPassword />} />
+        <Route path="/forgot-password/verify-otp" element={<VerifyEnterOTP />} />
+        <Route path="/forgot-password/reset-password" element={<SetNewPassword />} />

        {/* Protected Routes */}
-        <Route 
-          path="/*" 
-          element={isAuthenticate && localStorage.getItem("token")  ? (
+        <Route
+          path="/*"
+          element={isAuthenticate && localStorage.getItem("token") ? (
            <DefaultLayout>
              <Routes>
                {RouteLink.map(({ path, Component }, index) => (
@@ -36,15 +42,24 @@ function App() {
              </Routes>
            </DefaultLayout>
          ) : (
-            <Navigate to="/login" />
-          )} 
-        /> 
+            <Routes>
+              {/* Allow only forgot password flows */}
+              <Route path="/forgot-password" element={<ForgotPassword />} />
+              <Route path="/forgot-password/verify" element={<VerifyEnterOTP />} />  {/* ✅ Add this line */}
+              <Route path="/forgot-password/verify-otp" element={<VerifyEnterOTP />} />
+              <Route path="/forgot-password/reset-password" element={<SetNewPassword />} />
+
+              {/* Default to login */}
+              <Route path="*" element={<Navigate to="/login" />} />
+            </Routes>
+          )}
+        />

        {/* Catch-all route to prevent unauthorized access */}
-        <Route path="*" element={<Navigate to="/login" />} /> 
-      </Routes> 
-    </Router> 
-  ); 
-} 
+        <Route path="*" element={<Navigate to="/login" />} />
+      </Routes>
+    </Router>
+  );
+}

 export default App;
--- a/src/Contexts/GlobalStateContext.tsx
+++ b/src/Contexts/GlobalStateContext.tsx
@@ -2,11 +2,14 @@
 import { createContext, Dispatch, SetStateAction } from 'react';

 // Define the shape of your context value
-type GlobalStateContextType = {
+export interface GlobalStateContextType {
  isAuthenticate: boolean;
  setIsAuthenticate: Dispatch<SetStateAction<boolean>>;
-};
-
+  isBarLoading: boolean;
+  setIsBarLoading: Dispatch<SetStateAction<boolean>>;
+  userAccess: string[];
+  setUserAccess: Dispatch<SetStateAction<string[]>>;
+}
 // Create the context with a default value of `undefined`
 const GlobalStateContext = createContext<GlobalStateContextType | undefined>(undefined);

--- a/src/Contexts/GlobalStateProvider.tsx
+++ b/src/Contexts/GlobalStateProvider.tsx
@@ -1,14 +1,27 @@
-import { ReactNode, useState } from 'react';
-import GlobalStateContext from './GlobalStateContext';
-
+import { ReactNode, useState } from "react";
+import GlobalStateContext from "./GlobalStateContext";



 const GlobalStateProvider = ({ children }: { children: ReactNode }) => {
  const [isAuthenticate, setIsAuthenticate] = useState<boolean>(true);
+  const [isBarLoading, setIsBarLoading] = useState<boolean>(false); // ✅ Fixed typo
+  const [userAccess, setUserAccess] = useState<string[]>(() => {
+    const stored = sessionStorage.getItem('userAccess');
+    return stored ? JSON.parse(stored) : [];
+  });
+
+ 

  return (
-    <GlobalStateContext.Provider value={{ isAuthenticate, setIsAuthenticate }}>
+    <GlobalStateContext.Provider value={{
+      isAuthenticate,
+      setIsAuthenticate,
+      isBarLoading,
+      setIsBarLoading, // ✅ Fixed typo
+      userAccess,
+      setUserAccess
+    }}>
      {children}
    </GlobalStateContext.Provider>
  );
--- a/src/Layouts/DefaultLayout.tsx
+++ b/src/Layouts/DefaultLayout.tsx
@@ -1,6 +1,6 @@
 import { HStack, Image, Text, VStack } from "@chakra-ui/react";
 import React, { FC, useContext } from "react";
-import { RiNotificationLine } from "react-icons/ri";
+// import { RiNotificationLine } from "react-icons/ri";
 import { NavLink, useLocation, useNavigate } from "react-router-dom";
 import { nav } from "../Routes/Nav";
 import logo from '../assets/logo.svg';
@@ -11,9 +11,13 @@ import { logout } from "../Redux/Service/authSlice";
 import { useDispatch } from "react-redux";
 import GlobalStateContext from "../Contexts/GlobalStateContext";
 import { useLogOutMutation } from "../Redux/Service/apiSlice";
+import ProgressBar from "../components/ProgressBar/ProgressBar";
+import { useGetProfileQuery } from "../Redux/Service/profile.password";
+
+const PROFILEIMGURL = import.meta.env.VITE_IMG_PROFILE

 const DefaultLayout: FC<{ children: React.ReactNode }> = ({ children }) => {
-
+  const { data } = useGetProfileQuery()
  const dispatch = useDispatch()
  const navigate = useNavigate()
  const location = useLocation()
@@ -23,21 +27,25 @@ const DefaultLayout: FC<{ children: React.ReactNode }> = ({ children }) => {
  if (!context) {
    throw new Error('App must be used within a GlobalStateProvider');
  }
-  const { setIsAuthenticate } = context;
-  const [ logOutAdmin ] = useLogOutMutation()
+  const { setIsAuthenticate, isBarLoading, userAccess } = context;
+  const [logOutAdmin] = useLogOutMutation()
+
+  const filteredNav = nav.filter(item =>
+    userAccess.includes('*') || !item.resourceTitle || userAccess.includes(item.resourceTitle)
+  );


  // Logout function
  const handleLogout = async () => {
    try {
      // ✅ Call mutation and wait for the response
-      const res = await logOutAdmin().unwrap(); 
+      const res = await logOutAdmin().unwrap();
      console.log("Logout Success:", res);
-  
+
      // ✅ Clear local storage & update authentication state
      dispatch(logout());
-      localStorage.removeItem("token"); 
-      setIsAuthenticate(false); 
+      localStorage.removeItem("token");
+      setIsAuthenticate(false);
      // ✅ Redirect to login page
      navigate("/login");
    } catch (error) {
@@ -46,39 +54,45 @@ const DefaultLayout: FC<{ children: React.ReactNode }> = ({ children }) => {
  };

  return (
-    <HStack overflow={'hidden'} position={'relative'} bg="#F2F2F2" backgroundPosition="center" backgroundRepeat="repeat" backgroundSize="cover" gap={0} w="100%" h="100vh" p={0}>
-      <VStack  zIndex={1} gap={0} rounded={'lg'} h="100%" w="16%" overflow={'auto'} >
-        <HStack w={'100%'} p={3} h={'8%'} justifyContent={'center'}>
-          <Image w={55} src={logo} />
-        </HStack>
-        <VStack  w={'100%'} p={4} pt={0}>
-          {nav?.map(({ title, path, Icon, type, children }, index) => type === 'single' ?
-            <NavLink  className="link" key={index} to={path} style={{ cursor: 'pointer', borderRadius: '8px', padding: '6px', width: '100%', display: 'flex', alignItems: 'center', gap: 6, border: '1px solid #ffffff', backgroundColor:'#fff', color:'#000', boxShadow:'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px'}} ><Icon style={{ fontSize: '20px' }} /> <Text fontSize={'xs'} w={'100%'}>{title}</Text></NavLink> :
-            <AccordionRoot key={index} bg={'#fff'} rounded={'lg'} collapsible>
-              <AccordionItem rounded={'lg'} bg={'#fff'} boxShadow={'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px'} borderBottom={'none'} p={0} key={index} value={title}>
-                <AccordionItemTrigger className="Oxygen" color={'#fff'}   onClick={() => navigate(path)} gap={0} style={{ cursor: 'pointer', borderRadius: '8px', padding: '5px', width: '100%', display: 'flex', alignItems: 'center', border: '1px solid #ffffff', backgroundColor:'#fff',color:'#000',  fontSize: '14px',  }}> <Text fontSize={'xs'} gap={1} display={'flex'} alignItems={'center'} ><Icon style={{ fontSize: '20px' }} />{title}</Text></AccordionItemTrigger>
-                {children?.map(({ title, path, Icon }, index) => <AccordionItemContent className={`linkChild Oxygen ${location?.pathname === path && 'activeChild'}`} key={index} onClick={()=>navigate(path)} style={{ marginTop: 6, cursor: 'pointer', borderRadius: '8px', padding: '6px', width: '100%', display: 'flex', alignItems: 'center', gap: 6, border: '1px solid #ffffff', backgroundColor:'#fff',color:'#919198' }} ><Icon style={{ fontSize: '20px' }} /> <Text fontSize={'xs'} w={'100%'}>{title}</Text></AccordionItemContent>)}
-              </AccordionItem>
-            </AccordionRoot>)}
-        </VStack>
-        <VStack w={'100%'} p={3} pt={0}>
-        <HStack onClick={handleLogout} className="link"  style={{ cursor: 'pointer', borderRadius: '8px', padding: '6px', width: '100%', display: 'flex', alignItems: 'center', gap: 6, border: '1px solid #ffffff', backgroundColor:'#fff', color:'#000', boxShadow:'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px'}} ><LuLogOut style={{ fontSize: '20px' }} /> <Text fontSize={'xs'} w={'100%'}>Logout</Text></HStack>
-        </VStack>
-      </VStack>
-      <VStack  gap={0} h="100%" w="85%" >
-        <HStack h={'11%'} w={'100%'} justifyContent={'flex-end'} pe={3} gap={6}>
-          <NavLink to={'/manage-notification'}><RiNotificationLine color="#013e3e" cursor={'pointer'} style={{ fontSize: '22px' }} /></NavLink>
-          <HStack cursor={'pointer'} onClick={() => navigate('/profile')} >
-            <Avatar size={'sm'} src="https://i.pinimg.com/736x/d6/cd/0f/d6cd0ffd4634b0763d3958a7325ce26e.jpg" />
-            <VStack color={'#013e3e'} gap={0} alignItems={'flex-start'}>
-              <Text fontSize={'sm'} fontWeight={'bold'}>Ritesh Pandey</Text>
-              <Text fontSize={'xs'} >ritesh.pandey@wdimails.com</Text>
-            </VStack>
+    <VStack gap={0} w="100%" h="100vh" bg="#F2F2F2">
+      <ProgressBar isLoading={isBarLoading} />
+      <HStack overflow={'hidden'} position={'relative'} bg="#F2F2F2" backgroundPosition="center" backgroundRepeat="repeat" backgroundSize="cover" gap={0} w="100%" h="calc(100% - 4px)" p={0}>
+
+        <VStack pt={0} zIndex={1} gap={0} rounded={'lg'} h="100%" w="15%" overflow={'auto'} >
+          <HStack w={'100%'} p={3} h={'7%'} justifyContent={'center'}>
+            <Image w={55} src={logo} />
          </HStack>
-        </HStack>
-        {children}
-      </VStack>
-    </HStack>
+          <VStack w={'100%'} p={2} pt={0}>
+            {filteredNav?.map(({ title, path, Icon, type, children, initPath }, index) => type === 'single' ?
+              <NavLink className="link" key={index} to={path || ''} style={{ cursor: 'pointer', borderRadius: '8px', padding: '6px', width: '100%', display: 'flex', alignItems: 'center', gap: 6, border: '1px solid #ffffff', backgroundColor: '#fff', color: '#000', boxShadow: 'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px' }} ><Icon style={{ fontSize: '20px' }} /> <Text fontSize={'xs'} w={'100%'}>{title}</Text></NavLink> :
+              <AccordionRoot border={location?.pathname.startsWith(initPath ?? path) ? "1px solid #02A0A0" : '1px'} key={index} bg={'#fff'} rounded={'lg'} collapsible>
+                <AccordionItem rounded={'lg'} bg={'#fff'} boxShadow={'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px'} borderBottom={'none'} p={0} key={index} value={title}>
+                  <AccordionItemTrigger className="Oxygen" color={'#fff'} onClick={() => navigate(path || '')} gap={0} style={{ cursor: 'pointer', borderRadius: '8px', padding: '5px', width: '100%', display: 'flex', alignItems: 'center', border: '1px solid #ffffff', backgroundColor: '#fff', color: '#000', fontSize: '14px', }}> <Text fontSize={'xs'} gap={1} display={'flex'} alignItems={'center'} ><Icon style={{ fontSize: '20px' }} />{title}</Text></AccordionItemTrigger>
+                  {children?.map(({ title, path, Icon }, index) => <AccordionItemContent className={`linkChild Oxygen ${location?.pathname === path && 'activeChild'}`} key={index} onClick={() => navigate(path)} style={{ marginTop: 6, cursor: 'pointer', borderRadius: '8px', padding: '6px', width: '100%', display: 'flex', alignItems: 'center', gap: 6, border: '1px solid #ffffff', backgroundColor: '#fff', color: '#919198' }} ><Icon style={{ fontSize: '20px' }} /> <Text fontSize={'xs'} w={'100%'}>{title}</Text></AccordionItemContent>)}
+                </AccordionItem>
+              </AccordionRoot>)}
+          </VStack>
+          <VStack w={'100%'} p={3} pt={0}>
+            <HStack onClick={handleLogout} className="link" style={{ cursor: 'pointer', borderRadius: '8px', padding: '6px', width: '100%', display: 'flex', alignItems: 'center', gap: 6, border: '1px solid #ffffff', backgroundColor: '#fff', color: '#000', boxShadow: 'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px' }} ><LuLogOut style={{ fontSize: '20px' }} /> <Text fontSize={'xs'} w={'100%'}>Logout</Text></HStack>
+          </VStack>
+        </VStack>
+        <VStack gap={0} h="100%" w="85%" >
+
+          <HStack h={'11%'} w={'100%'} justifyContent={'flex-end'} pe={3} gap={6}>
+
+            {/* <NavLink to={'/manage-notification'}><RiNotificationLine color="#013e3e" cursor={'pointer'} style={{ fontSize: '22px' }} /></NavLink> */}
+            <HStack cursor={'pointer'} onClick={() => navigate('/profile')} >
+              <Avatar size={'sm'} src={`${PROFILEIMGURL}${data?.data.profile_photo}`} />
+              <VStack color={'#013e3e'} gap={0} alignItems={'flex-start'}>
+                <Text fontSize={'sm'} fontWeight={'bold'}>{data?.data?.first_name ? `${data?.data?.first_name.charAt(0).toUpperCase()}${data?.data.first_name.slice(1)}` : ''}</Text>
+                <Text fontSize={'xs'} >{data?.data?.phone_number ? data?.data?.phone_number : ''}</Text>
+              </VStack>
+            </HStack>
+          </HStack>
+          {children}
+        </VStack>
+      </HStack>
+    </VStack>
  );
 };

--- a/src/Pages/Dashboard/AgencyName.tsx
+++ b/src/Pages/Dashboard/AgencyName.tsx
@@ -1,61 +1,68 @@
-import { Box, HStack, Image, Input, Stack, Text } from "@chakra-ui/react";
-import React, { useState, useEffect } from "react";
+import {
+  Box,
+  HStack,
+  // Image, Input, Stack, 
+  Text
+} from "@chakra-ui/react";
+// import React, { useState, useEffect } from "react";
 import { Button } from "../../components/ui/button";
-import { IoAddSharp } from "react-icons/io5";
-import delateIcon from "../../assets/deleteIcon.png";
-import { FaClockRotateLeft } from "react-icons/fa6";
+// import { IoAddSharp } from "react-icons/io5";
+// import delateIcon from "../../assets/deleteIcon.png";
+// import { FaClockRotateLeft } from "react-icons/fa6";
+import { Link } from "react-router-dom";
+import { AgencyList } from "../../Redux/Service/dashBoard";

-interface Todo {
-  id: number;
-  text: string;
-  completed: boolean;
-  timestamp: string;
-}
+// interface Todo {
+//   id: number;
+//   text: string;
+//   completed: boolean;
+//   timestamp: string;
+// }

-const AgencyName: React.FC = () => {
-  const [todos, setTodos] = useState<Todo[]>([]);
-  const [input, setInput] = useState<string>("");
-
-  
-  const getCurrentTime = () => {
-    const now = new Date();
-    return now.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
-  };
+const AgencyName = ({ agencyList }: { agencyList: AgencyList }) => {
+  // const [todos, setTodos] = useState<Todo[]>([]);
+  // const [input, setInput] = useState<string>("");


-  const addTodo = () => {
-    if (input.trim() === "") return;
-    setTodos([...todos, { id: Date.now(), text: input, completed: false, timestamp: getCurrentTime() }]);
-    setInput(""); 
-  };
+  // const getCurrentTime = () => {
+  //   const now = new Date();
+  //   return now.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
+  // };
+
+
+  // const addTodo = () => {
+  //   if (input.trim() === "") return;
+  //   setTodos([...todos, { id: Date.now(), text: input, completed: false, timestamp: getCurrentTime() }]);
+  //   setInput("");
+  // };

  // Delete a task
-  const deleteTodo = (id: number) => {
-    setTodos(todos.filter((todo) => todo.id !== id));
-  };
+  // const deleteTodo = (id: number) => {
+  //   setTodos(todos.filter((todo) => todo.id !== id));
+  // };

-  useEffect(() => {
-    const savedTodos = localStorage.getItem("todos");
-    if (savedTodos) {
-      setTodos(JSON.parse(savedTodos));
-    }
-  }, []); // Runs only on mount
+  // useEffect(() => {
+  //   const savedTodos = localStorage.getItem("todos");
+  //   if (savedTodos) {
+  //     setTodos(JSON.parse(savedTodos));
+  //   }
+  // }, []); // Runs only on mount

-  // 🔹 Save todos to localStorage whenever they change
-  useEffect(() => {
-    if (todos.length > 0) {
-      localStorage.setItem("todos", JSON.stringify(todos));
-    }
-  }, [todos]); // Runs when `todos` changes
+  // // 🔹 Save todos to localStorage whenever they change
+  // useEffect(() => {
+  //   if (todos.length > 0) {
+  //     localStorage.setItem("todos", JSON.stringify(todos));
+  //   }
+  // }, [todos]); // Runs when `todos` changes


  return (
    <Box p={"10px"}>
      <HStack justifyContent={"space-between"} mb={5}>
        <Text fontSize={"xs"} fontWeight={500}>
-          Add Agency Name
+          Agency List
        </Text>
-        <Button
+        {/* <Button
          bg={"#fff"}
          color={"#222222CC"}
          px={3}
@@ -64,9 +71,18 @@ const AgencyName: React.FC = () => {
          onClick={addTodo}
        >
          <IoAddSharp /> Add
+        </Button> */}
+        <Button
+          bg={"#fff"}
+          color={"#222222CC"}
+          px={3}
+          fontSize={"12px"}
+          h={"28px"}
+        >
+          <Link to="/master-module/agency-master">View ALL</Link>
        </Button>
      </HStack>
-      <Input
+      {/* <Input
        type="text"
        value={input}
        onChange={(e) => setInput(e.target.value)}
@@ -76,14 +92,14 @@ const AgencyName: React.FC = () => {
        w={"100%"}
        p={2}
        mb={4}
-      />
-      {todos.map((todo) => (
+      /> */}
+      {agencyList?.data.map((todo) => (
        <HStack key={todo.id} backgroundColor={"#fff"} rounded={5} mb={3} p={4} justifyContent={'space-between'} alignItems={'inherit'}>
-          <Text fontSize={'sm'} color={'#222222bd'} fontWeight={400}>{todo.text}</Text>
-          <Stack display={'flex'} alignItems={'end'} w={'130px'}>
+          <Text fontSize={'sm'} color={'#222222bd'} fontWeight={400}>{todo.name}</Text>
+          {/* <Stack display={'flex'} alignItems={'end'} w={'130px'}>
            <Box display={'flex'} alignItems={'center'} gap={2}>
-                <FaClockRotateLeft fontSize={'10px'} style={{fontSize:'13px',color:'#222222bd'}} /> 
-                <Text fontSize={"xs"} color={"#222222bd"}>{todo.timestamp}</Text>
+              <FaClockRotateLeft fontSize={'10px'} style={{ fontSize: '13px', color: '#222222bd' }} />
+              <Text fontSize={"xs"} color={"#222222bd"}>{todo.timestamp}</Text>
            </Box>
            <Box
              onClick={() => deleteTodo(todo.id)}
@@ -93,7 +109,7 @@ const AgencyName: React.FC = () => {
            >
              <Image w={"16px"} src={delateIcon} />
            </Box>
-          </Stack>
+          </Stack> */}
        </HStack>
      ))}
    </Box>
--- a/src/Pages/Dashboard/Dashboard.tsx
+++ b/src/Pages/Dashboard/Dashboard.tsx
@@ -26,8 +26,31 @@ import {
  SelectValueText
 } from "../../components/ui/select";
 import AgencyName from "./AgencyName";
+import { useGetAgencyListQuery, useGetFaqListQuery, useGetNewUserQuery, useGetPastUserQuery, useGetTotalUserQuery } from "../../Redux/Service/dashBoard";
+import { useEffect, useState } from "react";
+import { Link } from "react-router-dom";

 const Dashboard = () => {
+  const { data: totalUsers } = useGetTotalUserQuery()
+  const { data: pastUsers } = useGetPastUserQuery()
+  const { data: newUsers } = useGetNewUserQuery()
+  const {data: agencyList} = useGetAgencyListQuery()
+  const { data: faqList } = useGetFaqListQuery()
+  const [activeTab, setActiveTab] = useState("tab-1");
+  const [totalUser, setTotalUser] = useState<any>(null);
+
+  console.log("data", totalUser)
+
+  useEffect(() => {
+    if (activeTab === "tab-1") {
+      setTotalUser( pastUsers?.data)
+    } else if (activeTab === "tab-2") {
+      setTotalUser(totalUsers?.data)
+    } else if (activeTab === "tab-3") {
+      setTotalUser(newUsers?.data)
+    }
+  }, [totalUsers?.data, pastUsers?.data, newUsers?.data, activeTab]);
+
  const frameworks = createListCollection({
    items: [
      { label: "Today", value: "Today" },
@@ -37,40 +60,35 @@ const Dashboard = () => {
    ],
  });

-  const accItems = [
-    {
-      value: "1",
-      title: "How to create new account?",
-      text: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since. Lorem Ipsum has been the industry's standard dummy text ever since.",
-    },
-    {
-      value: "2",
-      title: "How to create new account?",
-      text: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since. Lorem Ipsum has been the industry's standard dummy text ever since.",
-    },
-    {
-      value: "3",
-      title: "How to create new account?",
-      text: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since. Lorem Ipsum has been the industry's standard dummy text ever since.",
-    },
-    {
-      value: "4",
-      title: "How to create new account?",
-      text: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since. Lorem Ipsum has been the industry's standard dummy text ever since.",
-    },
-    {
-      value: "5",
-      title: "How to create new account?",
-      text: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since. Lorem Ipsum has been the industry's standard dummy text ever since.",
-    },
-  ];
+  // const accItems = [
+  //   {
+  //     value: "1",
+  //     title: "How to create new account?",
+  //     text: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since. Lorem Ipsum has been the industry's standard dummy text ever since.",
+  //   },
+  //   {
+  //     value: "2",
+  //     title: "How to create new account?",
+  //     text: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since. Lorem Ipsum has been the industry's standard dummy text ever since.",
+  //   },
+  //   {
+  //     value: "3",
+  //     title: "How to create new account?",
+  //     text: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since. Lorem Ipsum has been the industry's standard dummy text ever since.",
+  //   },
+  //   {
+  //     value: "4",
+  //     title: "How to create new account?",
+  //     text: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since. Lorem Ipsum has been the industry's standard dummy text ever since.",
+  //   },
+  // ];

  return (
    <MainFrame>
-      <Box display={"flex"} p={"20px"} pt={'8px'} gap={5}>
+      <Box display={"flex"} p={"20px"} pe={'20px'} gap={5}>
        <Box rounded={'lg'} w={"30%"} boxShadow={"rgba(99, 99, 99, 0.2) 0px 2px 8px 0px"}>
          <Heading fontSize={"sm"} p={2}>
-            Total Users
+            Total Users : {totalUsers?.data?.totalUserCount ?? 0}
          </Heading>
          <Tabs.Root
            size={"sm"}
@@ -79,6 +97,8 @@ const Dashboard = () => {
            variant="enclosed"
            fitted
            defaultValue={"tab-1"}
+            value={activeTab}
+            onValueChange={(details) => setActiveTab(details.value)}
            mb={6}
          >
            <Tabs.List>
@@ -94,7 +114,7 @@ const Dashboard = () => {
            </Tabs.List>
          </Tabs.Root>
          <Box>
-            <SemiDoughnutChart />
+            {totalUser && <SemiDoughnutChart totalUser={totalUser} />}
          </Box>

          <Box
@@ -106,17 +126,17 @@ const Dashboard = () => {
          >
            <Status.Root colorPalette="blue">
              <Status.Indicator />
-              Recruiter <Text fontWeight={500}>2554</Text>
+              Recruiter <Text fontWeight={500}>{totalUser?.past24hourRecruiterCount ?? totalUser?.totalRecruiterCount ?? totalUser?.newRecuiterCount }</Text>
            </Status.Root>
            <Status.Root colorPalette="blue">
              <Status.Indicator />
-              Customer <Text fontWeight={500}>1224</Text>
+              Customer <Text fontWeight={500}>{totalUser?.past24hourCustomercount ?? totalUser?.totalCustomerCount ?? totalUser?.newCustomerCount}</Text>
            </Status.Root>
          </Box>
        </Box>
        <Box
          p={"20px"}
-          w={"50%"}
+          w={"49%"}
          rounded={'lg'}
          boxShadow={"rgba(99, 99, 99, 0.2) 0px 2px 8px 0px"}
        >
@@ -148,7 +168,7 @@ const Dashboard = () => {
        </Box>
      </Box>
      <Box p={"20px"} pt={0} display={"flex"} gap={5}>
-        <Box  w={"50%"} rounded={'lg'} bg={"#f2f2f2"} h={400} p={"10px"} overflow={'auto'}>
+        <Box w={"50%"} rounded={'lg'} bg={"#f2f2f2"} h={'100%'} p={"10px"} overflowY={'scroll'} height={'292px'}>
          <HStack justifyContent={"space-between"} mb={5}>
            <Text fontSize={"xs"} fontWeight={500}>Faqs</Text>
            <Button
@@ -158,14 +178,15 @@ const Dashboard = () => {
              fontSize={"12px"}
              h={"28px"}
            >
-              View ALL
+              <Link to="/manage-cms/faq">View ALL</Link>
            </Button>
          </HStack>
          <AccordionRoot collapsible defaultValue={["b"]}>
-            {accItems.map((item, index) => (
+            {faqList?.data.map((item) => (
              <AccordionItem
-                key={index}
-                value={item.value}
+                boxShadow={'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px'}
+                key={item.id}
+                value={item.faqs_xid.toString()}
                bg={"#fff"}
                mb={2}
                p={"12px"}
@@ -173,17 +194,17 @@ const Dashboard = () => {
                borderBottom={0}
              >
                <AccordionItemTrigger fontSize={"sm"} >
-                  {item.title}
+                  {item.question}
                </AccordionItemTrigger>
                <AccordionItemContent fontSize={"xs"} color={'#222222CC'} pt={2}>
-                  {item.text}
+                  {item.answer}
                </AccordionItemContent>
              </AccordionItem>
            ))}
          </AccordionRoot>
        </Box>
-        <Box w={"50%"} rounded={'lg'} bg={"#f2f2f2"} h={400} overflow={'auto'}>
-          <AgencyName />
+        <Box w={"50%"} rounded={'lg'} bg={"#f2f2f2"} alignItems={'flex-start'} overflowY={'scroll'} height={'292px'}>
+          {agencyList && <AgencyName agencyList={agencyList}/>}
        </Box>
      </Box>
    </MainFrame>
--- a/src/Pages/ForgotPassword.tsx
+++ b/src/Pages/ForgotPassword.tsx
@@ -0,0 +1,171 @@
+import {
+    Box,
+    Center,
+    HStack,
+    Image,
+    Input,
+    Text,
+    VStack,
+} from "@chakra-ui/react";
+import axios from "axios";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+// import { useDispatch } from "react-redux";
+import logo from "../assets/logo.svg";
+import { Button } from "../components/ui/button";
+import { Field } from "../components/ui/field";
+import { toaster, Toaster } from "../components/ui/toaster";
+import { useNavigate } from "react-router-dom";
+
+interface FormValues {
+    mobileNumber: number;
+}
+
+const ForgotPassword = () => {
+    const navigate = useNavigate();
+    const [isLoading, setIsLoading] = useState<boolean>(false);
+    const {
+        register,
+        handleSubmit,
+        formState: { errors },
+    } = useForm<FormValues>();
+
+    const onSubmit = handleSubmit(async (data) => {
+        const username = import.meta.env.VITE_USER_NAME || ""; // Replace with actual username
+        const password = import.meta.env.VITE_PASSWORD || ""; // Replace with actual password
+        const basicAuth = `${username}:${password}`; // Encode to Base64
+        
+        setIsLoading(true);
+        try {
+            const res = await axios.post(
+                `${import.meta.env.VITE_API_URL}/send-otp`,
+                {
+                    mobile_number: Number(data.mobileNumber),
+                },
+                {
+                    headers: {
+                        Authorization: `Basic ${basicAuth}`,
+                        "Content-Type": "application/json",
+                    },
+                }
+            );
+
+            if (res.status === 200) {
+                navigate(`/forgot-password/verify?phone=${data.mobileNumber}`)
+            } else {
+                // alert(res.data.message || "Something went wrong");
+                toaster.create({
+                    // title: error?.response?.data?.message,
+                    title: res.data.message || "Something went wrong",
+                    type: "error",
+                })
+                setIsLoading(false);
+            }
+            console.log("============", res);
+
+        } catch (error) {
+            console.log('error', error);
+
+            if (error) {
+                toaster.create({
+                    // title: error?.response?.data?.message,
+                    title: "Something Went Wrong",
+                    type: "info",
+                })
+                // console.log("Login failed", error?.response?.data?.message);
+                setIsLoading(false);
+            }
+        }
+    });
+
+    return (
+
+        <VStack appearance={'light'} w={"100%"} h={"100vh"} bg={"#ffffff"}>
+            <HStack
+                boxShadow={"rgba(99, 99, 99, 0.2) 0px 2px 8px 0px"}
+                w={"100%"}
+                ps={8}
+                h={"7%"}
+                justifyContent={"flex-start"}
+            >
+                <Image w={50} src={logo} />
+            </HStack>
+
+            <HStack w={"100%"} h={"93%"} p={8} gap={8}>
+                <Center
+                    display={{ base: "none", md: "flex" }}
+                    bg={"#02A0A033"}
+                    w={"50%"}
+                    h={"100%"}
+                    rounded={"3xl"}
+                >
+                    <Image w={250} src={logo} />
+                </Center>
+
+                <Box
+                    as={"form"}
+                    onSubmit={onSubmit}
+                    p={{ base: 4, md: 16 }}
+                    w={{ base: "100%", md: "50%" }}
+                    h={"100%"}
+                >
+                    <VStack gap={2} w={"100%"}>
+                        <Text
+                            w={"100%"}
+                            textAlign={"center"}
+                            fontSize={"24px"}
+                            fontWeight={"normal"}
+                            color={"#313039"}
+                        >
+                            Forgot Password
+                        </Text>
+
+                        <Box mt={6} gap={4} w={"full"}>
+                            <Field
+                                color={"#313039"}
+                                label={"Enter Mobile Number"}
+                                w={"100%"}
+                                invalid={!!errors.mobileNumber}
+                                errorText={errors.mobileNumber?.message}
+                                mb={4}
+                            >
+                                <Input
+                                    type="number"
+                                    ps={3}
+                                    maxLength={10}
+                                    {...register("mobileNumber", {
+                                        required: "Please enter a 10 digit mobile number",
+                                        pattern: {
+                                            value: /^[0-9]{10}$/,
+                                            message: "Mobile number must be exactly 10 digits"
+                                        }
+                                    })}
+                                    placeholder="Enter Mobile Number"
+                                    onInput={(e) => {
+                                        const target = e.target as HTMLInputElement;
+                                        target.value = target.value.replace(/\D/g, "").slice(0, 10);
+                                    }}
+                                />
+                            </Field>
+                            <Button
+                                loading={isLoading}
+                                mt={4}
+                                size={"sm"}
+                                bg={"#02A0A0"}
+                                rounded={"md"}
+                                w={"100%"}
+                                color={"#ffffff"}
+                                type="submit"
+                            >
+                                Send OTP
+                            </Button>
+                        </Box>
+                    </VStack>
+                </Box>
+                <Toaster />
+            </HStack>
+        </VStack>
+    );
+};
+
+export default ForgotPassword;
--- a/src/Pages/Login.tsx
+++ b/src/Pages/Login.tsx
@@ -18,8 +18,8 @@ import { Button } from "../components/ui/button";
 import { Field } from "../components/ui/field";
 import { toaster, Toaster } from "../components/ui/toaster";
 import { PasswordInput } from "../components/ui/password-input";
-import { useNavigate } from "react-router-dom";
-import ForgetPassword from "./ForgetPassword";
+import { Link, useNavigate } from "react-router-dom";
+// import ForgetPassword from "./ForgetPassword";

 interface FormValues {
  mobileNumber: number;
@@ -34,7 +34,7 @@ const Login = () => {
  if (!context) {
    throw new Error("App must be used within a GlobalStateProvider");
  }
-  const { setIsAuthenticate } = context;
+  const { setIsAuthenticate, setUserAccess } = context;
  const {
    register,
    handleSubmit,
@@ -43,10 +43,10 @@ const Login = () => {

  const onSubmit = handleSubmit(async (data) => {
    setIsLoading(true);
-    // Encode Basic Auth Credentials
-    const username = import.meta.env.VITE_USER_NAME || ""; // Replace with actual username
-    const password = import.meta.env.VITE_PASSWORD || ""; // Replace with actual password
-    const basicAuth = `${username} : ${password}`; // Encode to Base64
+
+    const username = import.meta.env.VITE_USER_NAME || "";
+    const password = import.meta.env.VITE_PASSWORD || "";
+    const basicAuth = `${username}:${password}`;

    try {
      const res = await axios.post(
@@ -62,36 +62,40 @@ const Login = () => {
          },
        }
      );
-      console.log("============",res);
-      

-      if (res.data) {
-        setIsAuthenticate(true);
-        console.log("====================================");
-        console.log(res.data?.data);
-        console.log("====================================");
-        navigate("/dashboard");
-        dispatch(setToken(String(res.data?.data["access-token"])));
-      } else {
-        console.log("====================================");
-        console.log(res);
-        console.log("====================================");
-      }
-    } catch (error) {
-      if (error) {
-        toaster.create({
-          // title: error?.response?.data?.message,
-          title: "Something Went Wrong",
-          type: "info",
-        })
-        // console.log("Login failed", error?.response?.data?.message);
-        setIsLoading(false);
-      }
+      const loginData = res.data?.data;
+      const { principal_type_xid, role_permission } = loginData;
+
+      const isAdmin = principal_type_xid === 1;
+
+      const allowedTitles = isAdmin
+        ? ['*']
+        : role_permission?.get_resource_action_link
+          ?.filter((link: unknown) => (link as any).is_active)
+          .map((link: unknown) => (link as any).app_resource.app_resource_title) ?? [];
+
+      setIsAuthenticate(true);
+      setUserAccess(allowedTitles);
+      dispatch(setToken(String(loginData["access-token"])));
+      sessionStorage.setItem('userAccess', JSON.stringify(allowedTitles));
+      navigate("/dashboard");
+      setIsLoading(false);
+
+    } catch (error: any) {
+      console.log('error', error?.response?.data?.message);
+      toaster.create({
+        title: "Error",
+        description: error?.response?.data?.message || "Login failed",
+        type: "error",
+      });
+      setIsLoading(false);
    }
  });
+  // console.log("User Access in Context:", userAccess);

  return (
-    <VStack w={"100%"} h={"100vh"} bg={"#ffffff"}>
+
+    <VStack appearance={'light'} w={"100%"} h={"100vh"} bg={"#ffffff"}>
      <HStack
        boxShadow={"rgba(99, 99, 99, 0.2) 0px 2px 8px 0px"}
        w={"100%"}
@@ -178,7 +182,15 @@ const Login = () => {
                Login
              </Button>

-              <ForgetPassword />
+              {/* <ForgetPassword /> */}
+              <Box textAlign={"center"} mt={4}>
+                <Link
+                  to={'/forgot-password'}
+                  style={{ color: "black", fontSize: "16px" }}
+                >
+                  Forgot Password
+                </Link>
+              </Box>
            </Box>
          </VStack>
        </Box>
--- a/src/Pages/ManageCMS/AboutUs/AboutUs.tsx
+++ b/src/Pages/ManageCMS/AboutUs/AboutUs.tsx
@@ -1,59 +1,132 @@
-import { Box, HStack, Text } from "@chakra-ui/react";
-import MainFrame from "../../../components/MainFrame"
-import { p } from "framer-motion/client";
-import AboutUsAddModel from "../../ManageCMS/AboutUs/AboutUsAddModel";
+// import { Badge, HStack, Text, VStack } from "@chakra-ui/react";
+// import MainFrame from "../../../components/MainFrame"
+// import { useGetAboutUsQuery } from "../../../Redux/Service/manage.aboutus.service";
+// import { Spinner } from "../../../components/Sipnner/Spinner";
+// import GlobalStateContext from "../../../Contexts/GlobalStateContext";
+// import { useContext, useEffect } from "react";
+// import AboutUsAddModel from "./AboutUsAddModel";
+
+
+
+// const AboutUs = () => {
+
+//   const { data, isLoading, isFetching } = useGetAboutUsQuery();
+
+//   // const content = data?.data
+//   console.log('====================================');
+//   console.log(data);
+//   console.log('====================================');
+
+//   const context = useContext(GlobalStateContext);
+//   if (!context) throw new Error('App must be used within a GlobalStateProvider');
+
+//   const { setIsBarLoading } = context;
+//   useEffect(() => {
+//     setIsBarLoading(isFetching)
+//   }, [data])
+
+//   return (
+//     <MainFrame transperant={true}>
+//       <VStack gap={4} pb={4} pt={0}>
+//         {isLoading || isFetching ?
+//           <Spinner /> : data?.data?.map(({ id, content, about_language }) => <VStack bg={'#fff'}
+//             boxShadow={'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px'} rounded={'lg'} p={3} key={id}>
+//             <HStack
+//               w={"100%"}
+//               justifyContent={"space-between"}
+
+//               py={0}
+//               px={0}
+//             >
+//               <Text as={"span"} fontSize={"sm"} fontWeight={500} color={"#000"}>
+//                 About Us <Badge variant={'surface'} colorPalette="cyan" ms={2} size={'sm'} fontSize={'xs'} px={2}>🎓 {about_language?.language_name}</Badge>
+//               </Text>
+
+//               {/* <AboutUsAddModel /> */}
+//               <AboutUsAddModel/>
+//             </HStack>
+//             <Text
+//               as="p"
+//               fontSize="sm"
+//               fontWeight={400}
+//               color="#1D1D1D"
+//             >
+//               {content}
+//             </Text>
+
+//           </VStack>)}
+//       </VStack>
+//     </MainFrame>
+//   )
+// }
+// export default AboutUs
+
+import { Badge, HStack, Stack, Text, VStack } from "@chakra-ui/react";
+import MainFrame from "../../../components/MainFrame";
 import { useGetAboutUsQuery } from "../../../Redux/Service/manage.aboutus.service";
-
-
-interface AboutUsContent {
-  content: string;
-}
-
-interface ApiResponse {
-  data: AboutUsContent[];
-}
-
+import { Spinner } from "../../../components/Sipnner/Spinner";
+import GlobalStateContext from "../../../Contexts/GlobalStateContext";
+import { useContext, useEffect } from "react";
+import AboutUsAddModel from "./AboutUsAddModel";

 const AboutUs = () => {
+  const { data, isLoading, isFetching } = useGetAboutUsQuery();

-  // const {
-  //   data: data
-  // } = useGetAboutUsQuery()
-  const { data: response } = useGetAboutUsQuery<{ data: ApiResponse }>();
-  console.log('====================================');
-  console.log(response);
-  console.log('====================================');
+  console.log("Fetched About Us Data:", data);

-  const content = response?.data?.[0]?.content || "No content available";
+  const context = useContext(GlobalStateContext);
+  if (!context) throw new Error("App must be used within a GlobalStateProvider");
+
+  const { setIsBarLoading } = context;
+  useEffect(() => {
+    setIsBarLoading(isFetching);
+  }, [isFetching, setIsBarLoading]);

  return (
+    <MainFrame transperant={true}>
+      <VStack gap={4} pb={4} pt={0}>
+        <Stack bg={"#fff"} w={"100%"} mt={2} p={4} borderRadius={4}><Text color={"black"} textAlign={"left"} fontWeight={"600"} >             About Us
+        </Text></Stack>

-    <MainFrame>
-      <Box>
-        <HStack
-          w={"100%"}
-          justifyContent={"space-between"}
-          mb={4}
-          py={0}
-          px={3}
-        >
-          <Text as={"span"} fontSize={"sm"} fontWeight={500} color={"#000"}>
-            AboutUs
-          </Text>
+        {isLoading || isFetching ? (
+          <Spinner />
+        ) : (
+          data?.data?.map(({ id, content, about_language }) => (
+            <VStack
+              bg={"#fff"}
+              boxShadow={"rgba(99, 99, 99, 0.2) 0px 2px 8px 0px"}
+              rounded={"lg"}
+              p={3}
+              key={id}
+            >

-          <HStack>
+              <HStack w={"100%"} justifyContent={"space-between"} py={0} px={0}>
+                <Text as={"span"} fontSize={"sm"} fontWeight={500} color={"#000"}>
+                  <Badge
+                    variant={"surface"}
+                    colorPalette="cyan"
+                    ms={2}
+                    size={"sm"}
+                    fontSize={"xs"}
+                    px={2}
+                  >
+                    🎓 {about_language?.language_name}
+                  </Badge>
+                </Text>

-            <AboutUsAddModel />
-          </HStack>
-        </HStack>
-        <Text as={p} fontSize={"sm"} fontWeight={400} color={"#1D1D1D"} px={3} w={"85%"} mb={"15px"} >
-          {content}
-        </Text>
-        {/* <Text as={p}  fontSize={"sm"} fontWeight={400} color={"#1D1D1D"} px={3} w={"85%"} >
-          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam soluta doloremque quibusdam facilis quas, unde hic eaque doloribus sed perferendis atque, eos dolores eius consectetur iure sint adipisci itaque tempora fugit quidem culpa provident possimus. Ullam, vitae in voluptatum dignissimos, quos blanditiis sequi aut repellat error eaque veritatis unde quam temporibus adipisci consectetur neque vero exercitationem dolor cum numquam maiores alias, totam minima quas. Possimus, ratione harum. Alias laboriosam nesciunt esse fugit deserunt pariatur corporis tempora quia veniam laborum aliquid enim voluptatibus asperiores minima tempore repudiandae vero quo porro, doloribus explicabo sit beatae et hic natus. Non earum nisi reiciendis? 
-        </Text> */}
-      </Box>
+                {/* Pass Data to AboutUsAddModel */}
+                <AboutUsAddModel aboutUsData={{ id, content, about_language }} />
+              </HStack>
+              <Text as="p" fontSize="sm" fontWeight={400} color="#1D1D1D">
+                {/* {content} */}
+                <div dangerouslySetInnerHTML={{ __html: content }} />
+              </Text>
+            </VStack>
+          ))
+        )}
+      </VStack>
    </MainFrame>
-  )
-}
-export default AboutUs
+  );
+};
+
+export default AboutUs;
--- a/src/Pages/ManageCMS/AboutUs/AboutUsAddModel.tsx
+++ b/src/Pages/ManageCMS/AboutUs/AboutUsAddModel.tsx
@@ -1,53 +1,152 @@
-import { FaRegEdit } from "react-icons/fa"
-import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../../components/ui/dialog"
-import { Field, Stack, Text, Textarea } from "@chakra-ui/react"
-import { Button } from "../../../components/ui/button"
+import { FaRegEdit } from "react-icons/fa";
+import {
+    DialogBody,
+    DialogCloseTrigger,
+    DialogContent,
+    DialogFooter,
+    DialogHeader,
+    DialogRoot,
+    DialogTitle,
+    DialogTrigger,
+} from "../../../components/ui/dialog";
+import { Field, Stack, Text } from "@chakra-ui/react";
+import { Button } from "../../../components/ui/button";
+import ReactQuill from "react-quill";
+import "react-quill/dist/quill.snow.css"; // Import the styles
+import { useState } from "react";
+import { useUpdateAboutUsMutation } from "../../../Redux/Service/manage.aboutus.service";
+import { useForm, Controller } from "react-hook-form"; // Import React Hook Form
+import { toaster, Toaster } from "../../../components/ui/toaster";
+
+function AboutUsAddModel({ aboutUsData }: { aboutUsData: any }) {
+    const [isOpen, setIsOpen] = useState(false);
+
+    // RTK Query Mutation Hook
+    const [updateAboutUs, { isLoading }] = useUpdateAboutUsMutation();
+
+    // React Hook Form
+    const {
+        control,
+        handleSubmit,
+        reset,
+        setValue,
+    } = useForm({
+        defaultValues: {
+            content: "",
+            languageCode: "",
+        },
+    });
+
+    // Function to handle edit click (pre-fill the editor)
+    const handleEditClick = (data: any) => {
+        setValue("content", data.content); // Pre-fill the content field
+        setValue("languageCode", data.about_language.language_code); // Pre-fill the language code
+        setIsOpen(true); // Open dialog
+    };
+
+    // Function to handle update submission
+    const onSubmit = async (formData: any) => {
+        if (!formData.content.trim()) return; // Prevent empty updates
+
+        try {
+            await updateAboutUs({
+                id: aboutUsData.id,
+                content: formData.content,
+                language_code: formData.languageCode,
+            }).unwrap();
+            setIsOpen(false); // Close dialog on success
+            reset(); // Reset the form
+        } catch (error: any) {
+            console.error("Update failed:", error);
+            toaster.create({
+                title: "Error",
+                description: `${error.data.message || "Failed to update"}`,
+                type: "error",
+            });
+        }
+    };

-function AboutUsAddModel() {
    return (
-
-        <DialogRoot placement="center">
-            <DialogTrigger asChild>
-                {/* <Button bg={"transparent"} size="sm">
-                    <MdOutlineRemoveRedEye style={{ cursor: "pointer", fontSize: "16px" }} />
-                </Button> */}
-                <Button bgColor={'#EEEEEE'} pl={3} pr={3} size={'xs'} color={'#000'}> <FaRegEdit color="#000" style={{ height: '14px', width: '14px' }} /> <Text color={"#000"} mt={1}>Edit</Text></Button>
-
-            </DialogTrigger>
-
-            <DialogContent
-                bg={"#fff"}
-                // w={{ lg: "60%", md: "230px" }}
-                w={{ base: '90%', md: '400px' }}
-                height={"auto"}
-
-                p={3} // Reduced padding
-                bgSize={'md'}
-            >
-                <DialogHeader bg="white" >
-                    <DialogTitle alignSelf="center" color="black" fontSize="14px">Edit</DialogTitle>
-                </DialogHeader>
-
-                <DialogBody bg="white">
-                    <Stack py={3} >
-
-                        <Field.Root>
-                            <Field.Label color="black" pt={1} fontSize="12px">AboutUs</Field.Label>
-                            <Textarea placeholder="" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" pt={1.5} />
-                        </Field.Root>
-                    </Stack>
-                </DialogBody>
-                <DialogFooter display="flex" justifyContent="center" pt={"2"}>
-                    <Button w="100%" bg="#02A0A0" color={"#fff"}>
-                        Save
+        <>
+            <DialogRoot placement="center" open={isOpen}>
+                <DialogTrigger asChild>
+                    <Button
+                        bgColor="#EEEEEE"
+                        pl={3}
+                        pr={3}
+                        size="xs"
+                        color="#000"
+                        onClick={() => handleEditClick(aboutUsData)} // Set content before opening modal
+                    >
+                        <FaRegEdit color="#000" style={{ height: "14px", width: "14px" }} />
+                        <Text color="#000" mt={1}>Edit</Text>
                    </Button>
-                </DialogFooter>
+                </DialogTrigger>

-                <DialogCloseTrigger color="black" />
-            </DialogContent>
-        </DialogRoot >
+                <DialogContent bg="#fff" w={{ base: "90%", md: "1200px" }} height="auto" p={3}>
+                    <DialogHeader bg="white">
+                        <DialogTitle alignSelf="center" color="black" fontSize="14px">
+                            Edit About Us
+                        </DialogTitle>
+                    </DialogHeader>

-    )
+                    <DialogBody bg="white">
+                        <Stack py={3} mb={8}>
+                            <Field.Root>
+                                <Field.Label color="black" pt={1} fontSize="12px">
+                                    About Us Content
+                                </Field.Label>
+                                {/* Use Controller to integrate ReactQuill with React Hook Form */}
+                                <Controller
+                                    name="content"
+                                    control={control}
+                                    render={({ field }) => (
+                                        <ReactQuill
+                                            value={field.value}
+                                            onChange={field.onChange}
+                                            placeholder="Enter About Us content"
+                                            modules={{
+                                                toolbar: [
+                                                    [{ 'header': [1, 2, false] }],
+                                                    ['bold', 'italic', 'underline', 'strike'],
+                                                    ['link', 'image'],
+                                                    [{ 'list': 'ordered' }, { 'list': 'bullet' }],
+                                                    ['clean']
+                                                ],
+                                            }}
+                                            formats={[
+                                                'header',
+                                                'bold', 'italic', 'underline', 'strike',
+                                                'list', 'bullet',
+                                                'link', 'image'
+                                            ]}
+                                            style={{ color: "black", border: "none", fontSize: "12px", height: "170px", width: "100%" }}
+                                        />
+                                    )}
+                                />
+                            </Field.Root>
+                        </Stack>
+                    </DialogBody>
+
+                    <DialogFooter display="flex" justifyContent="center" pt="2">
+                        <Button
+                            w="100%"
+                            bg="#02A0A0"
+                            color="#fff"
+                            // isLoading={isLoading}
+                            disabled={isLoading}
+                            onClick={handleSubmit(onSubmit)} // Use handleSubmit to trigger form submission
+                        >
+                            Save
+                        </Button>
+                    </DialogFooter>
+
+                    <DialogCloseTrigger color="black" onClick={() => setIsOpen(false)} />
+                </DialogContent>
+            </DialogRoot>
+            <Toaster />
+        </>
+    );
 }

-export default AboutUsAddModel
+export default AboutUsAddModel;
--- a/src/Pages/ManageCMS/FAQ/EditDetails.tsx
+++ b/src/Pages/ManageCMS/FAQ/EditDetails.tsx
@@ -1,64 +1,161 @@
-import { TbEdit } from "react-icons/tb";
-import { Button } from "../../../components/ui/button"
-import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../../components/ui/dialog"
-import { Field, Grid, Icon, Input, Stack, Text, Textarea } from "@chakra-ui/react"
-import { FaRegEdit } from "react-icons/fa";
-function EditDetails() {
-    return (
+import { Button } from "../../../components/ui/button";
+import {
+  DialogBody,
+  DialogCloseTrigger,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogRoot,
+  DialogTitle,
+  DialogTrigger,
+} from "../../../components/ui/dialog";
+import { Field, Input, Stack, Textarea } from "@chakra-ui/react";
+import Edit from "../../../components/ActionIcons/Edit";
+import { useUpdateFaqMutation } from "../../../Redux/Service/faqs.service";
+import { useEffect, useState } from "react";
+import { Toaster, toaster } from "../../../components/ui/toaster";

-        <DialogRoot placement="center">
-            <DialogTrigger asChild>
-            <Icon
-            cursor={"pointer"}
-            p={0.5}
-            _hover={{ bg: "#00000015" }}
-            rounded={"md"}
-            boxSize={5}
-            // color={iconColor && iconColor}
-          >
-            <TbEdit />
-          </Icon>
-                {/* <Button><FaRegEdit /></Button> */}
-
-            </DialogTrigger>
-
-            <DialogContent
-                bg={"#fff"}
-                // w={{ lg: "60%", md: "230px" }}
-                w={{ base: '90%', md: '400px' }}
-                height={"auto"}
-
-                p={3} // Reduced padding
-                bgSize={'md'}
-            >
-                <DialogHeader bg="white" >
-                    <DialogTitle alignSelf="center" color="black" fontSize="14px">Edit Details</DialogTitle>
-                </DialogHeader>
-
-                <DialogBody bg="white">
-                    <Stack py={3} >
-
-                        <Field.Root>
-                            <Field.Label color="black" pt={1} fontSize="12px">Questions</Field.Label>
-                            <Input placeholder="Questions" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-
-                            <Field.Label color="black" pt={1} fontSize="12px">Answer</Field.Label>
-                            <Textarea placeholder="Answer" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" pt={1.5} />
-
-                        </Field.Root>
-                    </Stack>
-                </DialogBody>
-                <DialogFooter display="flex" justifyContent="center" pt={"2"}>
-                    <Button w="100%" bg="#02A0A0" color={"#fff"}>
-                        Save
-                    </Button>
-                </DialogFooter>
-
-                <DialogCloseTrigger color="black" />
-            </DialogContent>
-        </DialogRoot >
-
-    )
+interface RowData {
+  id: number;
+  principal_type_xid: number;
+  question: string;
+  answer: string;
 }

-export default EditDetails
+function EditDetails({ rowData, refetch }: {rowData: RowData, refetch: VoidFunction}) {
+  const [faqQuestion, setFaqQuestion] = useState(rowData?.question);
+  const [faqAnswer, setFaqAnswer] = useState(rowData?.answer);
+  const [isOpen, setIsOpen] = useState(false);
+  const [updateFaq, { isLoading }] = useUpdateFaqMutation()
+
+  // console.log('ROWDATA', rowData);
+  
+
+  useEffect(() => {
+    if (rowData) {
+      setFaqQuestion(rowData.question);
+      setFaqAnswer(rowData.answer);
+    }
+  }, [rowData]);
+
+
+  const handleOpenModal = () => {
+    setIsOpen(true);
+  };
+
+
+  const handleSubmit = async () => {
+    if (!faqQuestion.trim() || !faqAnswer.trim()) {
+      toaster.create({
+        title: "Error",
+        description: "Input fields cannot be empty",
+        type: "error",
+      });
+      return;
+    }
+
+    const payload = {
+      id: rowData?.id,
+      question: faqQuestion,
+      answer: faqAnswer,
+      principal_type_xid: rowData?.principal_type_xid,
+    };
+
+    try {
+      const response = await updateFaq(payload).unwrap();
+      if (response?.status === "success") {
+        toaster.create({
+          title: "Success",
+          description: "FAQ updated successfully",
+          type: "success",
+        });
+        refetch()
+        setIsOpen(false);
+      } else {
+        toaster.create({
+          title: "Error",
+          description: "Failed to update FAQ",
+          type: "error",
+        });
+      }
+    } catch (error) {
+      console.error("Error updating template:", error);
+      // alert("Failed to update template");
+      toaster.create({
+        title: "Error",
+        description: "Something went wrong",
+        type: "error",
+      });
+    }
+  };
+
+  return (
+    <DialogRoot placement="center" open={isOpen} onOpenChange={({ open }) => setIsOpen(open)}>
+      <DialogTrigger asChild>
+
+        <Button bg="transparent" color={"black"} h={"18px"} onClick={handleOpenModal}><Edit /></Button>
+      </DialogTrigger>
+
+      <DialogContent
+        bg={"#fff"}
+        w={{ base: "90%", md: "400px" }}
+        height={"auto"}
+        p={3}
+      >
+        <DialogHeader bg="white">
+          <DialogTitle alignSelf="center" color="black" fontSize="14px">
+            Edit Details (ID: {rowData?.id})
+          </DialogTitle>
+        </DialogHeader>
+
+        <DialogBody bg="white">
+          <Stack py={3}>
+            <Field.Root>
+              <Field.Label color="black" pt={1} fontSize="12px">
+                Question
+              </Field.Label>
+              <Input
+                placeholder="Question"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+                value={faqQuestion}
+                onChange={(e) => setFaqQuestion(e.target.value)}
+              />
+
+              <Field.Label color="black" pt={1} fontSize="12px">
+                Answer
+              </Field.Label>
+              <Textarea
+                placeholder="Answer"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                p={2}
+                fontSize="12px"
+                height="auto"
+                pt={1.5}
+                value={faqAnswer}
+                onChange={(e) => setFaqAnswer(e.target.value)}
+              />
+            </Field.Root>
+          </Stack>
+        </DialogBody>
+
+        <DialogFooter display="flex" justifyContent="center" pt={"2"}>
+          <Button w="100%" bg="#02A0A0" color={"#fff"} onClick={handleSubmit} disabled={isLoading}>
+            Save
+          </Button>
+        </DialogFooter>
+
+        <DialogCloseTrigger color="black" onClick={() => setIsOpen(false)} />
+      </DialogContent>
+      <Toaster />
+    </DialogRoot>
+  );
+}
+
+export default EditDetails;
--- a/src/Pages/ManageCMS/FAQ/FAQ.tsx
+++ b/src/Pages/ManageCMS/FAQ/FAQ.tsx
@@ -1,52 +1,206 @@
-import { Box, HStack, Image, Input, Text } from "@chakra-ui/react";
+import { Box, HStack, Image, Spinner, Text } from "@chakra-ui/react";
 import MainFrame from "../../../components/MainFrame"
 import EditDetails from "./EditDetails";
-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";
 import { Switch } from "../../../components/ui/switch";
 import FaqAddModel from "./FaqAddModel";
+import Delete from "../../../components/ActionIcons/Delete";
+import { useEffect, useState } from "react";
+import { FaqData, useDeleteFaqPostMutation, useFaqToggleMutation, useGetFaqQuery } from "../../../Redux/Service/faqs.service";
+import SearchComponent from "../../../components/SearchComponent";
+import NoData from "../../../components/NoData";
+import { Toaster, toaster } from "../../../components/ui/toaster";


 // table data

 const tableHeadRow = [
  "Sr. No",
+  'Category',
  "Question",
  "Answer",
  "Action",
 ];

-const managepost: any[] = [
-  ...Array.from({ length: 12 }, (_, i) => ({
-    "Sr. No": i + 1,
-    "Question": "Lorem Ipsum",
-    "Answer": "Lorem Ipsum",
-    "Action": (
-      <HStack justifyContent="center">
-        <Box>
-          <Switch colorPalette={'teal'} size={"xs"}/>
-        </Box>
-        <EditDetails />
-        <AlertDailog
-          AltertTiggerIcon={RiDeleteBin5Line}
-          alertText="Delete Users"
-          alertIcon={<Image src={"DeleteIcon"} h={"39px"} />}
-          alertCaption="are you sure you want to delete ?"
-          onConfirm={() => {
-            console.log("User deleted:", i + 1);
-          }}
-        />
-      </HStack>
-    ),
-  })),
-];
+// const managepost: any[] = [
+//   ...Array.from({ length: 12 }, (_, i) => ({
+//     "Sr. No": i + 1,
+//     "Question": "Lorem Ipsum",
+//     "Answer": "Lorem Ipsum",
+//     "Action": (
+//       <HStack justifyContent="center">
+//         <Box>
+//           <Switch colorPalette={'teal'} size={"xs"} />
+//         </Box>
+//         {/* <EditDetails /> */}
+//         <EditDetails id={(i + 1).toString()} question="Lorem Ipsum" answer="Lorem Ipsum" />
+
+//         <AlertDailog
+//           AltertTiggerIcon={() => <Delete />}
+//           alertText="Delete Users"
+//           alertIcon={<Image src={"DeleteIcon"} h={"39px"} />}
+//           alertCaption="are you sure you want to delete ?"
+//           onConfirm={() => {
+//             console.log("User deleted:", i + 1);
+//           }}
+//         />
+//       </HStack>
+//     ),
+//   })),
+// ];

 const FAQ = () => {
-  return (
+  const [currentPage, setCurrentPage] = useState(1);
+  const { data, refetch, isLoading, isFetching, isError } = useGetFaqQuery(currentPage)
+  const [localData, setLocalData] = useState<any[]>([]);
+  const [faqToggle] = useFaqToggleMutation()
+  const [deleteFaqPost] = useDeleteFaqPostMutation()
+  const [searchTerm, setSearchTerm] = useState("");
+  const [deleteModal, setDeleteModal] = useState(false)
+  const [selectedFaqId, setSelectedFaqId] = useState<number | null>(null);

+  console.log('DATA', data?.data.data);
+
+  useEffect(() => {
+    if (data) {
+      setLocalData(data?.data.data);
+    }
+  }, [data]);
+
+  const handlePageChange = (page: number) => {
+    setCurrentPage(page);
+  };
+
+
+  const handleToggle = async (agencyId: number, currentStatus: string) => {
+    const newStatus = currentStatus === '1' ? '0' : '1';
+    setLocalData((prevData) =>
+      prevData.map((agency) =>
+        agency.id === agencyId ? { ...agency, is_active: newStatus } : agency
+      )
+    );
+
+    try {
+      await faqToggle({ id: agencyId, is_active: newStatus }).unwrap();
+      toaster.create({
+        title: "Success",
+        description: "Status updated successfully",
+        type: "success",
+      });
+      setTimeout(() => {
+        refetch();
+      }, 500);
+    } 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 handleDeleteFaq = async (faqId: number) => {
+    try {
+      const response = await deleteFaqPost({ id: faqId }).unwrap();
+      if (response?.status === "success") {
+        toaster.create({
+          title: "Success",
+          description: "FAQ deleted successfully",
+          type: "success",
+        });
+        refetch()
+        console.log("FAQ deleted successfully:", response);
+      }
+      // Optionally, refetch data or update state after deletion
+    } catch (error) {
+      console.error("Error deleting FAQ:", error);
+      toaster.create({
+        title: "Error",
+        description: "Something went wrong",
+        type: "error",
+      });
+    }
+  };
+
+  const filteredData = localData?.filter((agency) =>
+    agency.translations.some((translation: any) => {
+      const searchLower = searchTerm.toLowerCase();
+      const questionMatch = translation.question?.toLowerCase().includes(searchLower);
+      const answerMatch = translation.answer?.toLowerCase().includes(searchLower);
+      return questionMatch || answerMatch;
+    })
+  );
+
+  console.log("filteredData", filteredData);
+
+
+  const managepost = filteredData?.flatMap((agency: FaqData, index: number) =>
+    agency.translations.map((translation: any) => ({
+      'id': translation.id,
+      "Sr. No": (currentPage - 1) * (data?.data.per_page ?? 0) + index + 1,
+      "Question": translation.question,
+      "Answer": translation.answer,
+      'Category': agency.principal_type_xid === 2 ? "Recruiter" : "Job Seeker",
+
+      "Action": (
+        <HStack justifyContent="center">
+          <EditDetails rowData={{ id: agency.id, question: translation.question, answer: translation.answer, principal_type_xid: agency.principal_type_xid }} refetch={refetch} />
+
+          <AlertDailog
+            isOpen={deleteModal}
+            AltertTiggerIcon={() => <Delete onClick={() => {
+              setSelectedFaqId(agency.id);
+              setDeleteModal(true)
+            }} />}
+            alertText="Delete FAQ"
+            alertIcon={<Image src={"DeleteIcon"} h={"39px"} />}
+            alertCaption="are you sure you want to delete ?"
+            onClose={() => setDeleteModal(false)}
+            onConfirm={() => {
+              // console.log("Deleting FAQ with ID:", selectedFaqId); // Correct ID
+              if (selectedFaqId) {
+                setDeleteModal(false);
+                handleDeleteFaq(selectedFaqId);
+              }
+            }}
+          />
+          <Box>
+            <Switch
+              colorPalette={'teal'}
+              size={"xs"}
+              onChange={() => handleToggle(Number(agency.id), agency.is_active.toString())}
+              checked={Boolean(Number(agency.is_active))}
+              key={`switch-${agency.id}`}
+            />
+          </Box>
+        </HStack>
+      ),
+    })))
+
+  if (isFetching) {
+    return (
+      <HStack
+        w={"100%"}
+        justifyContent={"center"}
+        mb={4}
+        py={0}
+        px={3}
+      >
+        <Spinner color={'teal'} />
+      </HStack>
+    )
+  }
+
+  return (
    <MainFrame>
      <Box>
        <HStack
@@ -57,40 +211,37 @@ const FAQ = () => {
          px={3}
        >
          <Text as={"span"} fontSize={"sm"} fontWeight={500} color={"#000"}>
-           FAQs
+            FAQs
          </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={"2xs"}
-                fontSize={"2sm"}
-                placeholder="Search..."
-                bgColor={'#EEEEEE'}
-                ps={8}
-              />
-            </InputGroup>
+            <SearchComponent
+              value={searchTerm}
+              onChange={setSearchTerm}
+            />
            {/* <Button bgColor={'#EEEEEE'} pl={3} pr={3}><IoMdAdd /> <Text>Add</Text></Button> */}
-            <FaqAddModel />
+            <FaqAddModel refetch={refetch} />
          </HStack>
        </HStack>
-        <DataTable
-          sortableColumns={["Name", "Registration Date "]}
+        {isFetching && <Spinner />}
+        {!isLoading && !data?.data ? (
+          <NoData message={'No data found'} text={'Please add new data'} />
+        ) : (<DataTable
+          sortableColumns={["Name"]}
          tableHeadRow={tableHeadRow}
          data={managepost}
-        />
-      </Box>       
+          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>
+      <Toaster />
    </MainFrame>
  )
 }
--- a/src/Pages/ManageCMS/FAQ/FaqAddModel.tsx
+++ b/src/Pages/ManageCMS/FAQ/FaqAddModel.tsx
@@ -1,57 +1,174 @@
-import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../../components/ui/dialog"
-import { Field, Input, Stack, Text, Textarea } from "@chakra-ui/react"
-import { IoMdAdd } from "react-icons/io"
-import { Button } from "../../../components/ui/button"
+import {
+  DialogBody,
+  DialogCloseTrigger,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogRoot,
+  DialogTitle,
+  DialogTrigger,
+} from "../../../components/ui/dialog";
+import { Box, Field, Input, Stack, Text, Textarea } from "@chakra-ui/react";
+import { IoMdAdd } from "react-icons/io";
+import { Button } from "../../../components/ui/button";
+import { useState } from "react";
+import { Toaster, toaster } from "../../../components/ui/toaster";
+import { useCreateFaqPostMutation } from "../../../Redux/Service/faqs.service";

-function FaqAddModel() {
-    return (
+function FaqAddModel({ refetch }: { refetch: VoidFunction }) {
+  const [faqQuestion, setFaqQuestion] = useState('');
+  const [faqAnswer, setFaqAnswer] = useState('');
+  const [userType, setUserType] = useState("");
+  const [isOpen, setIsOpen] = useState(false);
+  const [createFaqPost, { isLoading }] = useCreateFaqPostMutation()

-        <DialogRoot placement="center">
-            <DialogTrigger asChild>
-                {/* <Button bg={"transparent"} size="sm">
-                    <MdOutlineRemoveRedEye style={{ cursor: "pointer", fontSize: "16px" }} />
-                </Button> */}
-                <Button px={5} size={"xs"} bg={"#02A0A0"}><IoMdAdd /> <Text>Add</Text></Button>
+  const handleOpenModal = () => {
+    setIsOpen(true);  // Open modal when clicking "Add"
+  };

-            </DialogTrigger>
+  const handleSubmit = async () => {
+    if (userType === "" || isNaN(Number(userType))) {
+      toaster.create({
+        title: "Error",
+        description: "Please select a valid user type.",
+        type: "error",
+      });
+      return;
+    }

-            <DialogContent
-                bg={"#fff"}
-                // w={{ lg: "60%", md: "230px" }}
-                w={{ base: '90%', md: '400px' }}
-                height={"auto"}
+    if (!faqQuestion.trim() || !faqAnswer.trim()) {
+      toaster.create({
+        title: "Error",
+        description: "Please fill in all required fields",
+        type: "error",
+      });
+      return;
+    }

-                p={3} // Reduced padding
-                bgSize={'md'}
-            >
-                <DialogHeader bg="white" >
-                    <DialogTitle alignSelf="center" color="black" fontSize="14px">Add</DialogTitle>
-                </DialogHeader>
+    const payload = {
+      principal_type_xid: Number(userType),
+      language_code: 'en',
+      question: faqQuestion,
+      answer: faqAnswer
+    };

-                <DialogBody bg="white">
-                    <Stack py={3} >
+    try {
+      const response = await createFaqPost(payload).unwrap();
+      if (response) {
+        toaster.create({
+          title: "Success",
+          description: "FAQ updated successfully",
+          type: "success",
+        });
+        refetch()
+        setIsOpen(false);
+      } else {
+        toaster.create({
+          title: "Error",
+          description: "Failed to update FAQ",
+          type: "error",
+        });
+      }
+    } catch (error) {
+      console.error("Error updating template:", error);
+      // alert("Failed to update template");
+    }
+  };

-                        <Field.Root>
-                            <Field.Label color="black" pt={1} fontSize="12px">Questions</Field.Label>
-                            <Input placeholder="Questions" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
+  return (
+    <DialogRoot placement="center" open={isOpen} onOpenChange={({ open }) => setIsOpen(open)}>
+      <DialogTrigger asChild>
+        <Button px={5} size={"xs"} bg={"#02A0A0"} onClick={handleOpenModal}>
+          <IoMdAdd /> <Text>Add</Text>
+        </Button>
+      </DialogTrigger>

-                            <Field.Label color="black" pt={1} fontSize="12px">Answer</Field.Label>
-                            <Textarea placeholder="Answer" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" pt={1.5} />
+      <DialogContent
+        bg={"#fff"}
+        // w={{ lg: "60%", md: "230px" }}
+        w={{ base: "90%", md: "400px" }}
+        height={"auto"}
+        p={3} // Reduced padding
+        bgSize={"md"}
+      >
+        <DialogHeader bg="white">
+          <DialogTitle alignSelf="center" color="black" fontSize="14px">
+            Add
+          </DialogTitle>
+        </DialogHeader> 

-                        </Field.Root>
-                    </Stack>
-                </DialogBody>
-                <DialogFooter display="flex" justifyContent="center" pt={"2"}>
-                    <Button w="100%" bg="#02A0A0" color={"#fff"}>
-                        Save
-                    </Button>
-                </DialogFooter>
+        <DialogBody bg="white">
+          <Stack py={3}>
+            <Field.Root>
+              <Field.Label color="black" pt={1} fontSize="12px">Select User Type</Field.Label>
+              <Box bgColor="#EEEEEE" borderRadius="md" p={1} w={'100%'}>
+                <select
+                  style={{
+                    width: "100%",
+                    background: "transparent",
+                    color: "black",
+                    border: "none",
+                    fontSize: "12px",
+                    height: "30px",
+                    outline: "none",
+                  }}
+                  value={userType}
+                  onChange={(e) => setUserType(e.target.value)}
+                >
+                  <option value="" disabled>Select User Type</option>
+                  <option value="2">Recruiter</option>
+                  <option value="3">Jobseeker</option>
+                </select>
+              </Box>
+            </Field.Root>

-                <DialogCloseTrigger color="black" />
-            </DialogContent>
-        </DialogRoot >
+            <Field.Root>
+              <Field.Label color="black" pt={1} fontSize="12px">
+                Questions
+              </Field.Label>
+              <Input
+                placeholder="Questions"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                _focusVisible={{ outline: 'none' }}
+                size={'sm'}
+                value={faqQuestion}
+                onChange={(e) => setFaqQuestion(e.target.value)}
+              />

-    )
+              <Field.Label color="black" pt={1} fontSize="12px">
+                Answer
+              </Field.Label>
+              <Textarea
+                placeholder="Answer"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                p={2}
+                fontSize="12px"
+                height="120px"
+                resize={'none'}
+                _focusVisible={{ outline: 'none' }}
+                value={faqAnswer}
+                onChange={(e) => setFaqAnswer(e.target.value)}
+              />
+            </Field.Root>
+          </Stack>
+        </DialogBody>
+        <DialogFooter display="flex" justifyContent="center" pt={"2"}>
+          <Button w="100%" bg="#02A0A0" color={"#fff"} onClick={handleSubmit} disabled={isLoading}>
+            Save
+          </Button>
+        </DialogFooter>
+
+        <DialogCloseTrigger color="black" onClick={() => setIsOpen(false)} />
+      </DialogContent>
+      <Toaster />
+    </DialogRoot>
+  );
 }

-export default FaqAddModel
+export default FaqAddModel;
--- a/src/Pages/ManageCMS/PrivacyPolicy/PrivacyPolicy.tsx
+++ b/src/Pages/ManageCMS/PrivacyPolicy/PrivacyPolicy.tsx
@@ -1,38 +1,82 @@
-import { Box, HStack, Text } from "@chakra-ui/react";
-import MainFrame from "../../../components/MainFrame"
-import { p } from "framer-motion/client";
+import { Badge, HStack, Stack, Text, VStack } from "@chakra-ui/react";
+import { useGetPrivacyPolicyQuery } from "../../../Redux/Service/privacy.policy.service";
+import MainFrame from "../../../components/MainFrame";
+import { Spinner } from "../../../components/Sipnner/Spinner";
 import PrivacyPolicyAddModel from "./PrivacyPolicyAddModel";
-
+import GlobalStateContext from "../../../Contexts/GlobalStateContext";
+import { useContext, useEffect } from "react";

 const PrivacyPolicy = () => {
+  const { data, isLoading, isFetching, refetch } = useGetPrivacyPolicyQuery();
+
+  console.log("PRIVACY", data?.data);
+
+  const context = useContext(GlobalStateContext);
+  if (!context)
+    throw new Error("App must be used within a GlobalStateProvider");
+
+  const { setIsBarLoading } = context;
+  useEffect(() => {
+    setIsBarLoading(isFetching);
+  }, [data]);
+
+  console.log("Privacy Policy Data:", data?.data);
+
  return (
-
-    <MainFrame>
-      <Box>
-        <HStack
-          w={"100%"}
-          justifyContent={"space-between"}
-          mb={4}
-          py={0}
-          px={3}
-        >
-          <Text as={"span"} fontSize={"sm"} fontWeight={500} color={"#000"}>
+    <MainFrame transperant={true}>
+      <Stack bg={"#fff"} w={"100%"} p={4} borderRadius={4} mb={4}>
+        <Text color={"black"} textAlign={"left"} fontWeight={"600"}>
          Privacy Policy
-          </Text>
+        </Text>
+      </Stack>
+      <VStack gap={4} pb={4} pt={0}> 
+        {isLoading || isFetching ? (
+          <Spinner />
+        ) : (
+          data?.data?.map(({ id, content, privacy_language }) => (
+            <VStack
+              bg={"#fff"}
+              boxShadow={"rgba(99, 99, 99, 0.2) 0px 2px 8px 0px"}
+              rounded={"lg"}
+              p={3}
+              key={id}
+            >
+              <HStack w={"100%"} justifyContent={"space-between"} py={0} px={0}>
+                <Text
+                  as={"span"}
+                  fontSize={"sm"}
+                  fontWeight={500}
+                  color={"#000"}
+                >
+                  <Badge
+                    variant={"surface"}
+                    colorPalette="cyan"
+                    size={"sm"}
+                    fontSize={"xs"}
+                    px={2}
+                  >
+                    🎓 {privacy_language?.language_name}
+                  </Badge>
+                </Text>

-          <HStack >
-            
-            <PrivacyPolicyAddModel />
-          </HStack>
-        </HStack>
-        <Text as={p} fontSize={"sm"} fontWeight={400} color={"#1D1D1D"} px={3} w={"85%"} mb={"15px"} >
-          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam soluta doloremque quibusdam facilis quas, unde hic eaque doloribus sed perferendis atque, eos dolores eius consectetur iure sint adipisci itaque tempora fugit quidem culpa provident possimus. Ullam, vitae in voluptatum dignissimos, quos blanditiis sequi aut repellat error eaque veritatis unde quam temporibus adipisci consectetur neque vero exercitationem dolor cum numquam maiores alias, totam minima quas. Possimus, ratione harum. Alias laboriosam nesciunt esse fugit deserunt pariatur corporis tempora quia veniam laborum aliquid enim voluptatibus asperiores minima tempore repudiandae vero quo porro, doloribus explicabo sit beatae et hic natus. Non earum nisi reiciendis? 
-        </Text>
-        <Text as={p}  fontSize={"sm"} fontWeight={400} color={"#1D1D1D"} px={3} w={"85%"} >
-          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam soluta doloremque quibusdam facilis quas, unde hic eaque doloribus sed perferendis atque, eos dolores eius consectetur iure sint adipisci itaque tempora fugit quidem culpa provident possimus. Ullam, vitae in voluptatum dignissimos, quos blanditiis sequi aut repellat error eaque veritatis unde quam temporibus adipisci consectetur neque vero exercitationem dolor cum numquam maiores alias, totam minima quas. Possimus, ratione harum. Alias laboriosam nesciunt esse fugit deserunt pariatur corporis tempora quia veniam laborum aliquid enim voluptatibus asperiores minima tempore repudiandae vero quo porro, doloribus explicabo sit beatae et hic natus. Non earum nisi reiciendis? 
-        </Text>
-     </Box>
+                <PrivacyPolicyAddModel
+                  policyData={{ id, content, privacy_language }}
+                  refetch={refetch}
+                />
+              </HStack>
+              <Text
+                as="p"
+                fontSize="sm"
+                fontWeight={400}
+                color="#1D1D1D"
+                dangerouslySetInnerHTML={{ __html: content }}
+              />
+            </VStack>
+          ))
+        )}
+      </VStack>
    </MainFrame>
-  )
-}
-export default PrivacyPolicy
+  );
+};
+
+export default PrivacyPolicy;
--- a/src/Pages/ManageCMS/PrivacyPolicy/PrivacyPolicyAddModel.tsx
+++ b/src/Pages/ManageCMS/PrivacyPolicy/PrivacyPolicyAddModel.tsx
@@ -1,53 +1,153 @@
-import { FaRegEdit } from "react-icons/fa"
-import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../../components/ui/dialog"
-import { Field, Stack, Text, Textarea } from "@chakra-ui/react"
-import { Button } from "../../../components/ui/button"
+import { FaRegEdit } from "react-icons/fa";
+import {
+  DialogBody,
+  DialogCloseTrigger,
+  DialogContent,
+  DialogFooter,
+  DialogRoot,
+  DialogTrigger,
+} from "../../../components/ui/dialog";
+import { Box, Field, Stack, Text } from "@chakra-ui/react";
+import { Button } from "../../../components/ui/button";
+import { useUpdatePrivacyPolicyMutation } from "../../../Redux/Service/privacy.policy.service";
+import { Controller, useForm } from "react-hook-form";
+import { useState } from "react";
+import ReactQuill from "react-quill";

-function PrivacyPolicyAddModel() {
-    return (
+function PrivacyPolicyAddModel({ policyData, refetch }: { policyData: any, refetch: VoidFunction }) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [updatePrivacyPolicy, { isLoading }] = useUpdatePrivacyPolicyMutation()
+  const {
+    control,
+    handleSubmit,
+    reset,
+    setValue,
+  } = useForm({
+    defaultValues: {
+      content: "",
+      languageCode: "",
+    },
+  });

-        <DialogRoot placement="center">
-            <DialogTrigger asChild>
-                {/* <Button bg={"transparent"} size="sm">
-                    <MdOutlineRemoveRedEye style={{ cursor: "pointer", fontSize: "16px" }} />
-                </Button> */}
-                <Button bgColor={'#EEEEEE'} pl={3} pr={3} size={'xs'} color={'#000'}> <FaRegEdit color="#000" style={{ height: '14px', width: '14px' }} /> <Text color={"#000"} mt={1}>Edit</Text></Button>
+  console.log('POLICY', policyData);

-            </DialogTrigger>
+  const handleEditClick = (data: any) => {
+    setValue("content", data.content); // Pre-fill the content field
+    setValue("languageCode", data.privacy_language.language_code); // Pre-fill the language code
+    setIsOpen(true); // Open dialog
+  };

-            <DialogContent
-                bg={"#fff"}
-                // w={{ lg: "60%", md: "230px" }}
-                w={{ base: '90%', md: '400px' }}
-                height={"auto"}
+  const onSubmit = async (formData: any) => {
+    if (!formData.content.trim()) return; // Prevent empty updates

-                p={3} // Reduced padding
-                bgSize={'md'}
-            >
-                <DialogHeader bg="white"  >
-                    <DialogTitle alignSelf="center" color="black" fontSize="14px">Edit</DialogTitle>
-                </DialogHeader>
+    try {
+      await updatePrivacyPolicy({
+        id: policyData.id,
+        content: formData.content,
+        language_code: formData.languageCode,
+      }).unwrap();
+      setIsOpen(false); // Close dialog on success
+      reset(); // Reset the form
+      refetch()
+    } catch (error) {
+      console.error("Update failed:", error);
+    }
+  };

-                <DialogBody bg="white">
-                    <Stack py={3} >
+  return (
+    <DialogRoot placement="center" open={isOpen}>
+      <Box key={policyData.id}>
+        <DialogTrigger asChild>
+          <Button
+            bgColor={"#EEEEEE"}
+            pl={3} pr={3}
+            size={"xs"}
+            color={"#000"}
+            onClick={() => handleEditClick(policyData)}
+          >
+            {" "}
+            <FaRegEdit
+              color="#000"
+              style={{ height: "14px", width: "14px" }}
+            />{" "}
+            <Text color={"#000"} mt={1}>
+              Edit
+            </Text>
+          </Button>
+        </DialogTrigger>
+      </Box>

-                        <Field.Root>
-                            <Field.Label color="black" pt={1} fontSize="12px">PrivacyPolicy</Field.Label>
-                            <Textarea placeholder="" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" pt={1.5} />
-                        </Field.Root>
-                    </Stack>
-                </DialogBody>
-                <DialogFooter display="flex" justifyContent="center" pt={"2"}>
-                    <Button w="100%" bg="#02A0A0" color={"#fff"}>
-                        Save
-                    </Button>
-                </DialogFooter>
+      <DialogContent
+        bg={"#fff"}
+        minW={'600px'}
+        // w={{ base: "90%", md: "400px" }}
+        height={"auto"}
+        p={3} // Reduced padding
+        bgSize={"md"}
+      >
+        {/* <DialogHeader bg="white">
+          <DialogTitle alignSelf="center" color="black" fontSize="14px">
+            Edit
+          </DialogTitle>
+        </DialogHeader> */}

-                <DialogCloseTrigger color="black" />
-            </DialogContent>
-        </DialogRoot >
+        <DialogBody bg="white">
+          <Stack py={3}>
+            <Field.Root>
+              <Field.Label color="black" pt={1} fontSize="12px">
+                PrivacyPolicy
+              </Field.Label>
+              {/* <Textarea
+                placeholder=""
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                p={2}
+                fontSize="12px"
+                height={'140px'}
+                _focusVisible={{ outline: 'none' }}
+                resize={'none'}
+              /> */}
+              <Controller
+                name="content"
+                control={control}
+                render={({ field }) => (
+                  <ReactQuill
+                    value={field.value}
+                    onChange={field.onChange}
+                    placeholder="Enter About Us content"
+                    modules={{
+                      toolbar: [
+                        [{ 'header': [1, 2, false] }],
+                        ['bold', 'italic', 'underline', 'strike'],
+                        ['link', 'image'],
+                        [{ 'list': 'ordered' }, { 'list': 'bullet' }],
+                        ['clean']
+                      ],
+                    }}
+                    formats={[
+                      'header',
+                      'bold', 'italic', 'underline', 'strike',
+                      'list', 'bullet',
+                      'link', 'image'
+                    ]}
+                    style={{ color: "black", border: "none", fontSize: "12px", height: "220px", width: "100%",marginBottom:'20px' }}
+                  />
+                )}
+              />
+            </Field.Root>
+          </Stack>
+        </DialogBody>
+        <DialogFooter display="flex" justifyContent="center" pt={"2"}>
+          <Button w="100%" bg="#02A0A0" color={"#fff"} mt={'4'} onClick={handleSubmit(onSubmit)} disabled={isLoading}>
+            Save
+          </Button>
+        </DialogFooter>

-    )
+        <DialogCloseTrigger color="black" onClick={() => setIsOpen(false)} />
+      </DialogContent>
+    </DialogRoot>
+  );
 }

-export default PrivacyPolicyAddModel
+export default PrivacyPolicyAddModel;
--- a/src/Pages/ManageCMS/PrivacyPolicy/PrivacyPolicySkeleton.tsx
+++ b/src/Pages/ManageCMS/PrivacyPolicy/PrivacyPolicySkeleton.tsx
@@ -0,0 +1,15 @@
+import { Box, Skeleton } from '@chakra-ui/react'
+
+const PrivacyPolicySkeleton = () => {
+  return (
+    <Box px={3} pb={3} w="90%">
+      <Skeleton height="20px" mb="10px" width="90%" />
+      <Skeleton height="20px" mb="15px" width="90%" />
+      <Skeleton height="20px" mb="10px" width="90%" />
+      <Skeleton height="20px" mb="10px" width="80%" />
+      <Skeleton height="20px" width="60%" />
+    </Box>
+  )
+}
+
+export default PrivacyPolicySkeleton
--- a/src/Pages/ManageCMS/TermsAndConditions/TermsAndConditions.tsx
+++ b/src/Pages/ManageCMS/TermsAndConditions/TermsAndConditions.tsx
@@ -1,38 +1,67 @@
-import { Box, HStack, Text } from "@chakra-ui/react";
-import MainFrame from "../../../components/MainFrame"
-import { p } from "framer-motion/client";
+import { Badge, HStack, Spinner, Stack, Text, VStack } from "@chakra-ui/react";
+import MainFrame from "../../../components/MainFrame";
 import TermsAndConditionsAddModel from "./TermsAndConditionsAddModel";
-
+import { useGetTermsQuery } from "../../../Redux/Service/terms.and.condition.service";

 const TermsAndConditions = () => {
+  const { data, refetch, isLoading, isFetching } = useGetTermsQuery();
+
+  console.log(data);
+
  return (
-
-    <MainFrame>
-      <Box>
-        <HStack
-          w={"100%"}
-          justifyContent={"space-between"}
-          mb={4}
-          py={0}
-          px={3}
-        >
-          <Text as={"span"} fontSize={"sm"} fontWeight={500} color={"#000"}>
-           Terms And Conditions
+    <MainFrame transperant={true}>
+      <VStack gap={4} pb={4} pt={0}>
+        <Stack bg={"#fff"} w={"100%"} mt={2} p={4} borderRadius={4}>
+          <Text color={"black"} textAlign={"left"} fontWeight={"600"}>
+            Terms and Conditions
          </Text>
+        </Stack>

-          <HStack >
-            
-            <TermsAndConditionsAddModel />
-          </HStack>
-        </HStack>
-        <Text as={p} fontSize={"sm"} fontWeight={400} color={"#1D1D1D"} px={3} w={"85%"} mb={"15px"} >
-          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam soluta doloremque quibusdam facilis quas, unde hic eaque doloribus sed perferendis atque, eos dolores eius consectetur iure sint adipisci itaque tempora fugit quidem culpa provident possimus. Ullam, vitae in voluptatum dignissimos, quos blanditiis sequi aut repellat error eaque veritatis unde quam temporibus adipisci consectetur neque vero exercitationem dolor cum numquam maiores alias, totam minima quas. Possimus, ratione harum. Alias laboriosam nesciunt esse fugit deserunt pariatur corporis tempora quia veniam laborum aliquid enim voluptatibus asperiores minima tempore repudiandae vero quo porro, doloribus explicabo sit beatae et hic natus. Non earum nisi reiciendis? 
-        </Text>
-        <Text as={p}  fontSize={"sm"} fontWeight={400} color={"#1D1D1D"} px={3} w={"85%"} >
-          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam soluta doloremque quibusdam facilis quas, unde hic eaque doloribus sed perferendis atque, eos dolores eius consectetur iure sint adipisci itaque tempora fugit quidem culpa provident possimus. Ullam, vitae in voluptatum dignissimos, quos blanditiis sequi aut repellat error eaque veritatis unde quam temporibus adipisci consectetur neque vero exercitationem dolor cum numquam maiores alias, totam minima quas. Possimus, ratione harum. Alias laboriosam nesciunt esse fugit deserunt pariatur corporis tempora quia veniam laborum aliquid enim voluptatibus asperiores minima tempore repudiandae vero quo porro, doloribus explicabo sit beatae et hic natus. Non earum nisi reiciendis? 
-        </Text>
-     </Box>
+        {isLoading || isFetching ? (
+          <Spinner />
+        ) : (
+          data?.data?.map(({ id, content, terms_cond_language }) => (
+            <VStack
+              bg={"#fff"}
+              boxShadow={"rgba(99, 99, 99, 0.2) 0px 2px 8px 0px"}
+              rounded={"lg"}
+              p={3}
+              key={id}
+            >
+              <HStack w={"100%"} justifyContent={"space-between"} py={0} px={0}>
+                <Text
+                  as={"span"}
+                  fontSize={"sm"}
+                  fontWeight={500}
+                  color={"#000"}
+                >
+                  <Badge
+                    variant={"surface"}
+                    colorPalette="cyan"
+                    ms={2}
+                    size={"sm"}
+                    fontSize={"xs"}
+                    px={2}
+                  >
+                    🎓 {terms_cond_language?.language_name}
+                  </Badge>
+                </Text>
+
+                {/* Pass Data to AboutUsAddModel */}
+                <TermsAndConditionsAddModel
+                  termsData={{ id, content, terms_cond_language }}
+                  refetch={refetch}
+                />
+              </HStack>
+              <Text as="p" fontSize="sm" fontWeight={400} color="#1D1D1D">
+                {/* {content} */}
+                <div dangerouslySetInnerHTML={{ __html: content }} />
+              </Text>
+            </VStack>
+          ))
+        )}
+      </VStack>
    </MainFrame>
-  )
-}
-export default TermsAndConditions
+  );
+};
+export default TermsAndConditions;
--- a/src/Pages/ManageCMS/TermsAndConditions/TermsAndConditionsAddModel.tsx
+++ b/src/Pages/ManageCMS/TermsAndConditions/TermsAndConditionsAddModel.tsx
@@ -1,53 +1,150 @@
-import { FaRegEdit } from "react-icons/fa"
-import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../../components/ui/dialog"
-import { Field, Stack, Text, Textarea } from "@chakra-ui/react"
-import { Button } from "../../../components/ui/button"
+import { FaRegEdit } from "react-icons/fa";
+import {
+  DialogBody,
+  DialogCloseTrigger,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogRoot,
+  DialogTitle,
+  DialogTrigger,
+} from "../../../components/ui/dialog";
+import { Field, Stack, Text } from "@chakra-ui/react";
+import { Button } from "../../../components/ui/button";
+import { Controller, useForm } from "react-hook-form";
+import ReactQuill from "react-quill";
+import { useState } from "react";
+import { useUpdateTermsMutation } from "../../../Redux/Service/terms.and.condition.service";

-function TermsAndConditionsAddModel() {
-    return (
+function TermsAndConditionsAddModel({ termsData, refetch }: { termsData: any, refetch: VoidFunction }) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [updateTerms, { isLoading }] = useUpdateTermsMutation()
+  const {
+    control,
+    handleSubmit,
+    reset,
+    setValue,
+  } = useForm({
+    defaultValues: {
+      content: "",
+      languageCode: "",
+    },
+  });

-        <DialogRoot placement="center">
-            <DialogTrigger asChild>
-                {/* <Button bg={"transparent"} size="sm">
-                    <MdOutlineRemoveRedEye style={{ cursor: "pointer", fontSize: "16px" }} />
-                </Button> */}
-                <Button bgColor={'#EEEEEE'} pl={3} pr={3} size={'xs'} color={'#000'}> <FaRegEdit color="#000" style={{ height: '14px', width: '14px' }} /> <Text color={"#000"} mt={1}>Edit</Text></Button>
+  const handleEditClick = (data: any) => {
+    setValue("content", data.content); // Pre-fill the content field
+    setValue("languageCode", data.terms_cond_language.language_code); // Pre-fill the language code
+    setIsOpen(true); // Open dialog
+  };

-            </DialogTrigger>
+  const onSubmit = async (formData: any) => {
+    if (!formData.content.trim()) return; // Prevent empty updates

-            <DialogContent
-                bg={"#fff"}
-                // w={{ lg: "60%", md: "230px" }}
-                w={{ base: '90%', md: '400px' }}
-                height={"auto"}
+    try {
+      await updateTerms({
+        id: termsData.id,
+        content: formData.content,
+        language_code: formData.languageCode,
+      }).unwrap();
+      setIsOpen(false); // Close dialog on success
+      reset(); // Reset the form
+      refetch()
+    } catch (error) {
+      console.error("Update failed:", error);
+    }
+  };

-                p={3} // Reduced padding
-                bgSize={'md'}
-            >
-                <DialogHeader bg="white">
-                    <DialogTitle alignSelf="center" color="black" fontSize="14px">Edit</DialogTitle>
-                </DialogHeader>
+  return (
+    <DialogRoot placement="center" open={isOpen}>
+      <DialogTrigger asChild>
+        <Button
+          bgColor={"#EEEEEE"}
+          pl={3} pr={3}
+          size={"xs"}
+          color={"#000"}
+          onClick={() => handleEditClick(termsData)}
+        >
+          {" "}
+          <FaRegEdit
+            color="#000"
+            style={{ height: "14px", width: "14px" }}
+          />{" "}
+          <Text color={"#000"} mt={1}>
+            Edit
+          </Text>
+        </Button>
+      </DialogTrigger>
+      <DialogContent
+        bg={"#fff"}
+        maxW={'600px'}
+        // w={{ base: "90%", md: "600px" }}
+        height={"auto"}
+        p={3} // Reduced padding
+        bgSize={"md"}
+      >
+        <DialogHeader bg="white">
+          <DialogTitle alignSelf="center" color="black" fontSize="14px">
+            Edit
+          </DialogTitle>
+        </DialogHeader>

-                <DialogBody bg="white">
-                    <Stack py={3}>
+        <DialogBody bg="white">
+          <Stack py={3}>
+            <Field.Root>
+              <Field.Label color="black" pt={1} fontSize="12px">
+                TermsAndConditions
+              </Field.Label>
+              {/* <Textarea
+                placeholder=""
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                p={2}
+                fontSize="12px"
+                height={'140px'}
+                _focusVisible={{outline:'none'}}
+                resize={'none'}
+              /> */}
+              <Controller
+                name="content"
+                control={control}
+                render={({ field }) => (
+                  <ReactQuill
+                    value={field.value}
+                    onChange={field.onChange}
+                    placeholder="Enter About Us content"
+                    modules={{
+                      toolbar: [
+                        [{ 'header': [1, 2, false] }],
+                        ['bold', 'italic', 'underline', 'strike'],
+                        ['link', 'image'],
+                        [{ 'list': 'ordered' }, { 'list': 'bullet' }],
+                        ['clean']
+                      ],
+                    }}
+                    formats={[
+                      'header',
+                      'bold', 'italic', 'underline', 'strike',
+                      'list', 'bullet',
+                      'link', 'image'
+                    ]}
+                    style={{ color: "black", border: "none", fontSize: "12px", height: "220px", width: "100%",marginBottom:'20px'  }}
+                  />
+                )}
+              />
+            </Field.Root>
+          </Stack>
+        </DialogBody>
+        <DialogFooter display="flex" justifyContent="center"  pt={"2"}>
+          <Button w="100%" bg="#02A0A0" color={"#fff"}  mt={'4'} onClick={handleSubmit(onSubmit)} disabled={isLoading}>
+            Save
+          </Button>
+        </DialogFooter>

-                        <Field.Root>
-                            <Field.Label color="black" pt={1} fontSize="12px">TermsAndConditions</Field.Label>
-                            <Textarea placeholder="" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" pt={1.5} />
-                        </Field.Root>
-                    </Stack>
-                </DialogBody>
-                <DialogFooter display="flex" justifyContent="center" pt={"2"}>
-                    <Button w="100%" bg="#02A0A0" color={"#fff"}>
-                        Save
-                    </Button>
-                </DialogFooter>
-
-                <DialogCloseTrigger color="black" />
-            </DialogContent>
-        </DialogRoot >
-
-    )
+        <DialogCloseTrigger color="black" onClick={() => setIsOpen(false)} />
+      </DialogContent>
+    </DialogRoot>
+  );
 }

-export default TermsAndConditionsAddModel
+export default TermsAndConditionsAddModel;
--- a/src/Pages/ManageContact/ManageContact.tsx
+++ b/src/Pages/ManageContact/ManageContact.tsx
@@ -1,38 +1,99 @@
-import { Box, HStack, Input, Text } from "@chakra-ui/react";
-import MainFrame from "../../components/MainFrame"
-import PendingRequests from "../../Pages/ManageContact/PendingRequests"
-import { InputGroup } from "../../components/ui/input-group";
-import { LuSearch } from "react-icons/lu";
+import { Box, HStack, Text } from "@chakra-ui/react";
+import MainFrame from "../../components/MainFrame";
+import PendingRequests from "../../Pages/ManageContact/PendingRequests";
+// import { InputGroup } from "../../components/ui/input-group";
+// import { LuSearch } from "react-icons/lu";
 import DataTable from "../../components/DataTable";
-
+import { useGetContactQuery } from "../../Redux/Service/manage.contactus.service";
+import { useEffect, useState } from "react";
+import { Spinner } from "../../components/Sipnner/Spinner";
+import { useDebounce } from "../../components/Hooks/useDebounce";
+import SearchComponent from "../../components/SearchComponent";

 // table data
-
-const tableHeadRow = [
-  "Sr. No",
-  "Email id",
-  "Name",
-  "Date",
-  "Action",
-];
-
-const managepost: any[] = [
-  ...Array.from({ length: 12 }, (_, i) => ({
-    "Sr. No": i + 1,
-    "Email id": "ABC@gmail.com",
-    "Name": "Pooja",
-    "Date": "11/02/1989",
-    "Action": (
-      <HStack justifyContent="center">
-        <PendingRequests />
-      </HStack>
-    ),
-  })),
-];
+const tableHeadRow = ["Sr. No", "Email id", "Name", "Date", "Action"];

 const ManageContact = () => {
-  return (
+  const [currentPage, setCurrentPage] = useState(1);
+  const [localData, setLocalData] = useState<any[]>([]);
+  const [searchTerm, setSearchTerm] = useState("");
+  const debouncedSearchTerm = useDebounce(searchTerm, 500);
+  const queryArgs = debouncedSearchTerm ? { page: currentPage, search: debouncedSearchTerm } : { page: currentPage };
+  const { data, isLoading, isError, refetch, isFetching } = useGetContactQuery(queryArgs);

+
+  useEffect(() => {
+    if (data) {
+      setLocalData((data as any)?.data?.data || []);
+    }
+  }, [data]);
+
+  const handlePageChange = (page: number) => {
+    setCurrentPage(page);
+  };
+
+  const handleSearchChange = (value: string) => {
+    setSearchTerm(value);
+    setCurrentPage(1);
+  };
+
+  const filteredData = localData?.filter((agency) =>
+    agency?.first_name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+    agency?.email.toLowerCase().includes(searchTerm.toLowerCase())
+  );
+
+  const formatDateOfBirth = (dob: string): string => {
+    return new Date(dob).toLocaleDateString("en-GB", {
+      day: "2-digit",
+      month: "2-digit",
+      year: "numeric",
+    });
+  };
+
+  const managepost = filteredData?.map((agency: any, index: number) => ({
+    "Sr. No": index + 1, // Typically Sr. No starts from 1, not using id which might not be sequential
+    "Email id": agency?.email || "-",
+    Name: agency?.first_name || "-",
+    Date: formatDateOfBirth(agency?.created_at) || "-",
+    Action: (
+      <HStack justifyContent="center" cursor={agency.response_status === 0 ? 'pointer' : 'default'}>
+        {agency.response_status === 0 ? <PendingRequests data={agency} refetch={refetch} /> : 'Resolved'}
+        {/* <PendingRequests data={agency} refetch={refetch} /> */}
+      </HStack>
+    ),
+  }));
+
+  if (isLoading) {
+    return (
+      <MainFrame>
+        <Box
+          display="flex"
+          justifyContent="center"
+          alignItems="center"
+          height="100%"
+        >
+          <Spinner />
+        </Box>
+      </MainFrame>
+    );
+  }
+
+  if (isError) {
+    return (
+      <MainFrame>
+        <Box
+          display="flex"
+          justifyContent="center"
+          alignItems="center"
+          height="100%"
+        >
+          <Text>Error loading data</Text>
+        </Box>
+      </MainFrame>
+    );
+  }
+
+  return (
    <MainFrame>
      <Box>
        <HStack
@@ -43,40 +104,33 @@ const ManageContact = () => {
          px={3}
        >
          <Text as={"span"} fontSize={"sm"} fontWeight={500} color={"#000"}>
-          Contact Requests
+            Contact Requests
          </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={"2xs"}
-                fontSize={"2sm"}
-                placeholder="Search..."
-                bgColor={'#EEEEEE'}
-                ps={8}
-              />
-            </InputGroup>
-            {/* <Button bgColor={'#EEEEEE'} pl={3} pr={3}><IoMdAdd /> <Text>Add</Text></Button> */}
+          <HStack>
+            <SearchComponent
+              value={searchTerm}
+              onChange={handleSearchChange}
+            />
          </HStack>
        </HStack>
        <DataTable
          sortableColumns={["Name", "Registration Date "]}
          tableHeadRow={tableHeadRow}
-          data={managepost}
+          data={managepost || []} // Ensure an empty array is passed if managepost is undefined
+          paginationData={{
+            current_page: (data?.data as any)?.current_page || 1,
+            last_page: (data?.data as any)?.last_page || 1,
+            per_page: (data?.data as any)?.per_page || 10,
+            total: (data?.data as any)?.total || 0
+          }}
+          onPageChange={handlePageChange}
+          isLoading={isFetching}
+          isError={isError}
        />
-      </Box>       
+      </Box>
    </MainFrame>
-  )
-}
-export default ManageContact
+  );
+};
+
+export default ManageContact;
--- a/src/Pages/ManageContact/PendingRequests.tsx
+++ b/src/Pages/ManageContact/PendingRequests.tsx
@@ -10,95 +10,160 @@ import {
  DialogTrigger,
 } from "../../components/ui/dialog";
 import { Badge, Field, HStack, Input, Stack, Textarea } from "@chakra-ui/react";
-function PendingRequests() {
+import { usePendingRequestMutation } from "../../Redux/Service/manage.contactus.service";
+import { useState } from "react";
+import { Toaster, toaster } from "../../components/ui/toaster";
+
+function PendingRequests({ data, refetch }: { data: any, refetch: VoidFunction }) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [res, setRes] = useState({
+    contact_us_xid: data.id,
+    message: data.message,
+    solution: '',
+  })
+  const [pendingRequest, { isLoading }] = usePendingRequestMutation()
+
+  const handleOpenModal = () => {
+    setIsOpen(true);
+  };
+
+
+  const handleSubmit = async (status: string) => {
+    const payload = { ...res, response_status: status };
+
+    if(res.solution === ''){
+      toaster.create({
+        title: "Error",
+        description: "All fields are required",
+        type: "error",
+      });
+      return;
+    }
+    try {
+      const response = await pendingRequest(payload).unwrap()
+      if (response?.status === "success") {
+        toaster.create({
+          title: "Success",
+          description: "Country updated successfully",
+          type: "success",
+        });
+        setIsOpen(false);
+        refetch()
+      } else {
+        toaster.create({
+          title: "Error",
+          description: "Failed to update Country",
+          type: "error",
+        });
+      }
+    } catch (error: any) {
+      toaster.create({
+        title: "Error",
+        description: error?.data?.message || "Something went wrong",
+        type: "error",
+      });
+    }
+  }
+
  return (
-    <DialogRoot placement="center">
-      <DialogTrigger asChild>
-        <Badge fontSize={"xs"} px={2} bg={'#02a0a01f'}>
-          Answer request
-        </Badge>
-      </DialogTrigger>
+    <>
+      <DialogRoot placement="center" key={data.id} open={isOpen} onOpenChange={({ open }) => setIsOpen(open)}>
+        <DialogTrigger asChild>
+          <Badge fontSize={"xs"} px={2} bg={'#02a0a01f'} onClick={handleOpenModal}>
+            Answer request
+          </Badge>
+        </DialogTrigger>

-      <DialogContent
-        bg={"#fff"}
-        w={{ base: "90%", md: "400px" }}
-        height={"auto"}
-        p={3} // Reduced padding
-        bgSize={"md"}
-      >
-        <DialogHeader bg="white">
-          <DialogTitle alignSelf="center" color="black" fontSize="14px">
-            Pending Requests
-          </DialogTitle>
-        </DialogHeader>
-
-        <DialogBody bg="white">
-          <Stack py={3}>
-            <Field.Root>
-              <Field.Label color="black" pt={1} fontSize="12px">
-                Request Type
-              </Field.Label>
-              <Input
-                placeholder="Message"
-                bgColor="#EEEEEE"
-                color="black"
-                border="none"
-                pl={1}
-                fontSize="12px"
-                height="30px"
-              />
-
-              <Field.Label color="black" pt={1} fontSize="12px">
-                Solution
-              </Field.Label>
-              <Textarea
-                placeholder=""
-                bgColor="#EEEEEE"
-                color="black"
-                border="none"
-                pl={1}
-                fontSize="12px"
-                height="80px"
-                pt={1.5}
-              />
-            </Field.Root>
-          </Stack>
-        </DialogBody>
-        <DialogFooter
-          display={{ base: "block", md: "flex" }}
-          justifyContent="center"
-          gap={1}
-          pt={2}
+        <DialogContent
+          bg={"#fff"}
+          w={{ base: "90%", md: "400px" }}
+          height={"auto"}
+          p={3} // Reduced padding
+          bgSize={"md"}
        >
-          <HStack mt={2} mb={3} width={"100%"} justifyContent={"space-between"}>
-            <Button
-              width={"48%"}
-              color="black"
-              _hover={{ bgColor: "white" }}
-              variant="outline"
-              borderRadius="sm"
-              border="1px solid #02A0A0"
-              size={"xs"}
-            >
-              Unresolved
-            </Button>
-            <Button
-              width={"48%"}
-              borderRadius="sm"
-              // bgColor="#007F33"
-              bgColor={"#02A0A0"}
-              color="white"
-              // colorPalette="#007F33"
-              size={"xs"}
-            >
-              Resolved
-            </Button>
-          </HStack>
-        </DialogFooter>
+          <DialogHeader bg="white">
+            <DialogTitle alignSelf="center" color="black" fontSize="14px">
+              Pending Requests
+            </DialogTitle>
+          </DialogHeader>

-        <DialogCloseTrigger color="black" />
-      </DialogContent>
-    </DialogRoot>
+          <DialogBody bg="white">
+            <Stack py={3}>
+              <Field.Root>
+                <Field.Label color="black" pt={1} fontSize="12px">
+                  Request Type
+                </Field.Label>
+                <Input
+                  placeholder="Message"
+                  bgColor="#EEEEEE"
+                  color="black"
+                  border="none"
+                  pl={1}
+                  fontSize="12px"
+                  height="30px"
+                  value={res.message}
+                  disabled
+                  // onChange={(e) => setRes({ ...res, message: e.target.value })}
+                />
+
+                <Field.Label color="black" pt={1} fontSize="12px">
+                  Solution
+                </Field.Label>
+                <Textarea
+                  placeholder=""
+                  bgColor="#EEEEEE"
+                  color="black"
+                  border="none"
+                  pl={1}
+                  fontSize="12px"
+                  height="80px"
+                  pt={1.5}
+                  onChange={(e) => setRes({ ...res, solution: e.target.value })}
+                />
+              </Field.Root>
+            </Stack>
+          </DialogBody>
+          <DialogFooter
+            display={{ base: "block", md: "flex" }}
+            justifyContent="center"
+            gap={1}
+            pt={2}
+          >
+            <HStack mt={2} mb={3} width={"100%"} justifyContent={"space-between"}>
+              <Button
+                width={"48%"}
+                color="black"
+                _hover={{ bgColor: "white" }}
+                variant="outline"
+                borderRadius="sm"
+                border="1px solid #02A0A0"
+                size={"xs"}
+                onClick={() => handleSubmit('1')}
+                disabled={isLoading}
+              >
+                Unresolved
+              </Button>
+              <Button
+                width={"48%"}
+                borderRadius="sm"
+                // bgColor="#007F33"
+                bgColor={"#02A0A0"}
+                color="white"
+                // colorPalette="#007F33"
+                size={"xs"}
+                onClick={() => handleSubmit('0')}
+                disabled={isLoading}
+              >
+                Resolved
+              </Button>
+            </HStack>
+          </DialogFooter>
+
+          <DialogCloseTrigger color="black" />
+        </DialogContent>
+      </DialogRoot>
+      <Toaster />
+    </>
  );
 }

--- a/src/Pages/ManageGroups/AddGroup.tsx
+++ b/src/Pages/ManageGroups/AddGroup.tsx
@@ -1,6 +1,6 @@
 import { Button } from "../../components/ui/button"
 import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../components/ui/dialog"
-import { Avatar, Box, Field, Heading, Input, Stack, Text } from "@chakra-ui/react"
+import { Field, Heading, Input, Stack, Text } from "@chakra-ui/react"
 import { Switch } from "../../components/ui/switch";
 import { IoMdAdd } from "react-icons/io";
 function AddGroup() {
--- a/src/Pages/ManageGroups/EditDetailGroup.tsx
+++ b/src/Pages/ManageGroups/EditDetailGroup.tsx
@@ -1,92 +1,119 @@
-import { Button } from "../../components/ui/button"
-import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../components/ui/dialog"
-import { Avatar, Box, Field, Heading, Icon, Input, Stack, Text } from "@chakra-ui/react"
+import { Button } from "../../components/ui/button";
+import {
+  DialogBody,
+  DialogCloseTrigger,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogRoot,
+  DialogTitle,
+  DialogTrigger,
+} from "../../components/ui/dialog";
+import { Avatar, Box, Field, Heading, Input, Span, Stack } from "@chakra-ui/react";
 import { Switch } from "../../components/ui/switch";
-import { FaRegEdit } from "react-icons/fa";
 import { AvatarGroup } from "../../components/ui/avatar";
-import { TbEdit } from "react-icons/tb";
+import Edit from "../../components/ActionIcons/Edit";
 function EditDetailGroups() {
-    return (
+  return (
+    <DialogRoot placement="center">
+      <DialogTrigger asChild>
+        <Span><Edit /></Span>
+      </DialogTrigger>

-        <DialogRoot placement="center" >
-            <DialogTrigger asChild>
-                
-            <Icon
-            cursor={"pointer"}
-            p={0.5}
-            _hover={{ bg: "#00000015" }}
-            rounded={"md"}
-            boxSize={5}
-            // color={iconColor && iconColor}
-          >
-            <TbEdit />
-          </Icon>
-            </DialogTrigger>
+      <DialogContent
+        bg={"#fff"}
+        w={{ base: "90%", md: "400px" }}
+        height={"auto"}
+        p={3} // Reduced padding
+      >
+        <DialogHeader bg="white">
+          <DialogTitle alignSelf="center" color="black" fontSize="14px">
+            Edit details
+          </DialogTitle>
+        </DialogHeader>
+        <DialogBody bg="white">
+          <Stack py={3}>
+            <Field.Root>
+              <Field.Label color="black" pt={1} fontSize="12px">
+                Group Name
+              </Field.Label>
+              <Input
+                value="Priyanka"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+                readOnly
+              />

-            <DialogContent
-                bg={"#fff"}
-                w={{ base: '90%', md: '400px' }}
-                height={"auto"}
-                p={3} // Reduced padding
-            >
-                <DialogHeader bg="white">
-                    <DialogTitle alignSelf="center" color="black" fontSize="14px">Edit details</DialogTitle>
-                </DialogHeader>
+              <Field.Label color="black" pt={1} fontSize="12px">
+                Description
+              </Field.Label>
+              <Input
+                value="Joshi"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+                readOnly
+              />

-                <DialogBody bg="white">
-                    <Stack py={3} >
+              <Field.Label color="black" pt={1} fontSize="12px">
+                Members
+              </Field.Label>

-                        <Field.Root>
-                            <Field.Label color="black" pt={1} fontSize="12px">Group Name</Field.Label>
-                            <Input value="Priyanka" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" readOnly />
+              <Box
+                bgColor="#EEEEEE"
+                border="none"
+                w="100%"
+                display="flex"
+                p={1}
+                rounded={4}
+              >
+                <AvatarGroup gap="0" spaceX="-3" size={"xs"}>
+                  <Avatar.Root border={"none"}>
+                    <Avatar.Fallback />
+                    <Avatar.Image src="https://cdn.myanimelist.net/r/84x124/images/characters/9/131317.webp?s=d4b03c7291407bde303bc0758047f6bd" />
+                  </Avatar.Root>

-                            <Field.Label color="black" pt={1} fontSize="12px">Description</Field.Label>
-                            <Input value="Joshi" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" readOnly />
+                  <Avatar.Root border={"none"}>
+                    <Avatar.Fallback />
+                    <Avatar.Image src="https://cdn.myanimelist.net/r/84x124/images/characters/7/284129.webp?s=a8998bf668767de58b33740886ca571c" />
+                  </Avatar.Root>

-                            <Field.Label color="black" pt={1} fontSize="12px">Members</Field.Label>
-
-                            <Box
-                                bgColor="#EEEEEE"
-                                border="none"
-                                w="100%"
-                                display="flex"
-                                p={1}
-                                rounded={4}
-                            >
-                                <AvatarGroup gap="0" spaceX="-3" size={"xs"} >
-                                    <Avatar.Root border={'none'}>
-                                        <Avatar.Fallback />
-                                        <Avatar.Image src="https://cdn.myanimelist.net/r/84x124/images/characters/9/131317.webp?s=d4b03c7291407bde303bc0758047f6bd" />
-                                    </Avatar.Root>
-
-                                    <Avatar.Root border={'none'}>
-                                        <Avatar.Fallback />
-                                        <Avatar.Image src="https://cdn.myanimelist.net/r/84x124/images/characters/7/284129.webp?s=a8998bf668767de58b33740886ca571c" />
-                                    </Avatar.Root>
-
-                                    <Avatar.Root border={'none'}>
-                                        <Avatar.Fallback />
-                                        <Avatar.Image src="https://cdn.myanimelist.net/r/84x124/images/characters/9/105421.webp?s=269ff1b2bb9abe3ac1bc443d3a76e863" />
-                                    </Avatar.Root>
-                                    <Avatar.Root variant="solid" border={'none'} backgroundColor={'transparent'} >
-                                        <Avatar.Fallback ml={5}>+3</Avatar.Fallback>
-                                    </Avatar.Root>
-                                </AvatarGroup>
-                            </Box>
-                        </Field.Root>
-                        <Heading color="black" pt={1} fontSize="12px">public/Private</Heading>
-                        <Switch />
-                    </Stack>
-                </DialogBody>
-                <DialogFooter display="flex" justifyContent="center" pt={"2"}>
-                    <Button size={'xs'} w="100%" bg="#02A0A0" color={"#fff"}>
-                        Save
-                    </Button>
-                </DialogFooter>   <DialogCloseTrigger color="black" />
-            </DialogContent>
-        </DialogRoot >
-
-    )
+                  <Avatar.Root border={"none"}>
+                    <Avatar.Fallback />
+                    <Avatar.Image src="https://cdn.myanimelist.net/r/84x124/images/characters/9/105421.webp?s=269ff1b2bb9abe3ac1bc443d3a76e863" />
+                  </Avatar.Root>
+                  <Avatar.Root
+                    variant="solid"
+                    border={"none"}
+                    backgroundColor={"transparent"}
+                  >
+                    <Avatar.Fallback ml={5}>+3</Avatar.Fallback>
+                  </Avatar.Root>
+                </AvatarGroup>
+              </Box>
+            </Field.Root>
+            <Heading color="black" pt={1} fontSize="12px">
+              public/Private
+            </Heading>
+            <Switch />
+          </Stack>
+        </DialogBody>
+        <DialogFooter display="flex" justifyContent="center" pt={"2"}>
+          <Button size={"xs"} w="100%" bg="#02A0A0" color={"#fff"}>
+            Save
+          </Button>
+        </DialogFooter>{" "}
+        <DialogCloseTrigger color="black" />
+      </DialogContent>
+    </DialogRoot>
+  );
 }

-export default EditDetailGroups
+export default EditDetailGroups;
--- a/src/Pages/ManageGroups/ManageGroups.tsx
+++ b/src/Pages/ManageGroups/ManageGroups.tsx
@@ -1,16 +1,18 @@
-import { Box, HStack, Image, Input, 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 AlertDailog from "../../components/AlertDailog"
-import { RiDeleteBin5Line } from "react-icons/ri";
-import ViewManageGroup from "./ViewManageGroup"
-import EditDetailGroups from "./EditDetailGroup"
-import AddGroup from "./AddGroup"
+import { Box, HStack, 
+  // Image, 
+  Input, 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 AlertDailog from "../../components/AlertDailog";
+// import { RiDeleteBin5Line } from "react-icons/ri";
+import ViewManageGroup from "./ViewManageGroup";
+import EditDetailGroups from "./EditDetailGroup";
+import AddGroup from "./AddGroup";
+// import Delete from "../../components/ActionIcons/Delete";
 // import ViewSubAdmin from "./ViewSubAdmin"

-
 // table data

 const tableHeadRow = [
@@ -26,36 +28,32 @@ const managepost: any[] = [
  ...Array.from({ length: 12 }, (_, i) => ({
    "Sr. No": i + 1,
    "Group Name": "ABC",
-    "Description": "Lorem ipsum",
-    "Date": "12/01/1987",
+    Description: "Lorem ipsum",
+    Date: "12/01/1987",
    "Group type": "Private",
-    "Action": (
+    Action: (
      <HStack justifyContent="center">
-
-        {/* <MdOutlineRemoveRedEye
-            style={{ cursor: "pointer", fontSize: "16px" }}
-          /> */}
        <ViewManageGroup />
        <EditDetailGroups />
-
-        {/* <RiDeleteBin5Line style={{ cursor: "pointer" }} /> */}
-        <AlertDailog
-          AltertTiggerIcon={RiDeleteBin5Line}
+        {/* <AlertDailog
+          AltertTiggerIcon={() => <Delete />} 
          alertText="Delete Users"
          alertIcon={<Image src={"DeleteIcon"} h={"39px"} />}
          alertCaption="are you sure you want to delete ?"
          onConfirm={() => {
            console.log("User deleted:", i + 1);
          }}
-        />
+        /> */}
      </HStack>
    ),
  })),
 ];
+
+
+
 const ManageGroups = () => {
  return (
-
-    <MainFrame >
+    <MainFrame>
      <Box>
        <HStack
          w={"100%"}
@@ -68,10 +66,13 @@ const ManageGroups = () => {
            Manage Groups
          </Text>

-          <HStack >
+          <HStack>
            <InputGroup
              startElement={
-                <LuSearch fontSize={"xs"} style={{ position: 'relative', left: '10px' }} />
+                <LuSearch
+                  fontSize={"xs"}
+                  style={{ position: "relative", left: "10px" }}
+                />
              }
              color={"#000"}
            >
@@ -82,12 +83,12 @@ const ManageGroups = () => {
                colorPalette={"blue"}
                _focus={{ border: "1px solid #02A0A0" }}
                rounded={"md"}
-                size={"2xs"}
-                fontSize={"2sm"}
+                size={"xs"}
+                fontSize={"sm"}
                placeholder="Search..."
-                bgColor={'#EEEEEE'}
+                bgColor={"#EEEEEE"}
                ps={8}
-                border={'none'}
+                border={"none"}
              />
            </InputGroup>
            {/* <Button bgColor={'#EEEEEE'} pl={3} pr={3}><IoMdAdd /> <Text>Add</Text></Button> */}
@@ -99,7 +100,8 @@ const ManageGroups = () => {
          tableHeadRow={tableHeadRow}
          data={managepost}
        />
-      </Box>    </MainFrame>
-  )
-}
-export default ManageGroups
+      </Box>{" "}
+    </MainFrame>
+  );
+};
+export default ManageGroups;
--- a/src/Pages/ManageGroups/ViewManageGroup.tsx
+++ b/src/Pages/ManageGroups/ViewManageGroup.tsx
@@ -1,94 +1,116 @@
-import { Button } from "../../components/ui/button"
-import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../components/ui/dialog"
-import { Avatar, Box, Field, Grid, Heading, Icon, Input, Stack, Text } from "@chakra-ui/react"
-import { Checkbox } from "../../components/ui/checkbox"
-import { MdOutlineRemoveRedEye } from "react-icons/md";
+import {
+  DialogBody,
+  DialogCloseTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogRoot,
+  DialogTitle,
+  DialogTrigger,
+} from "../../components/ui/dialog";
+import { Avatar, Box, Field, Heading, Input, Span, Stack } from "@chakra-ui/react";
 import { Switch } from "../../components/ui/switch";
 import { AvatarGroup } from "../../components/ui/avatar";
-import { TbEdit } from "react-icons/tb";
+import View from "../../components/ActionIcons/View";
 function ViewManageGroup() {
-    return (
+  return (
+    <DialogRoot placement="center">
+      <DialogTrigger asChild>
+        <Span><View /></Span>
+      </DialogTrigger>

-        <DialogRoot placement="center" >
-            <DialogTrigger asChild>
-                
-            <Icon
-            cursor={"pointer"}
-            p={0.5}
-            _hover={{ bg: "#00000015" }}
-            rounded={"md"}
-            boxSize={5}
-            // color={iconColor && iconColor}
-          >
-            <MdOutlineRemoveRedEye />
-          </Icon>
+      <DialogContent
+        bg={"#fff"}
+        // w={{ lg: "60%", md: "230px" }}
+        w={{ base: "90%", md: "400px" }}
+        height={"auto"}
+        p={3} // Reduced padding
+        bgSize={"md"}
+      >
+        <DialogHeader bg="white">
+          <DialogTitle alignSelf="center" color="black" fontSize="14px">
+            View details
+          </DialogTitle>
+        </DialogHeader>

-            </DialogTrigger>
+        <DialogBody bg="white">
+          <Stack py={3}>
+            <Field.Root>
+              <Field.Label color="black" pt={1} fontSize="12px">
+                Group Name
+              </Field.Label>
+              <Input
+                value="Priyanka"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+                readOnly
+              />

-            <DialogContent
-                bg={"#fff"}
-                // w={{ lg: "60%", md: "230px" }}
-                w={{ base: '90%', md: '400px' }}
-                height={"auto"}
-                p={3} // Reduced padding
-                bgSize={'md'}
-            >
-                <DialogHeader bg="white" >
-                    <DialogTitle alignSelf="center" color="black" fontSize="14px">View details</DialogTitle>
-                </DialogHeader>
+              <Field.Label color="black" pt={1} fontSize="12px">
+                Description
+              </Field.Label>
+              <Input
+                value="Joshi"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+                readOnly
+              />

-                <DialogBody bg="white">
-                    <Stack py={3} >
+              <Field.Label color="black" pt={1} fontSize="12px">
+                Members
+              </Field.Label>

-                        <Field.Root>
-                            <Field.Label color="black" pt={1} fontSize="12px">Group Name</Field.Label>
-                            <Input value="Priyanka" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" readOnly />
+              <Box
+                bgColor="#EEEEEE"
+                border="none"
+                w="100%"
+                display="flex"
+                p={1}
+                rounded={4}
+              >
+                <AvatarGroup gap="0" spaceX="-3" size={"xs"}>
+                  <Avatar.Root border={"none"}>
+                    <Avatar.Fallback />
+                    <Avatar.Image src="https://cdn.myanimelist.net/r/84x124/images/characters/9/131317.webp?s=d4b03c7291407bde303bc0758047f6bd" />
+                  </Avatar.Root>

-                            <Field.Label color="black" pt={1} fontSize="12px">Description</Field.Label>
-                            <Input value="Joshi" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" readOnly />
+                  <Avatar.Root border={"none"}>
+                    <Avatar.Fallback />
+                    <Avatar.Image src="https://cdn.myanimelist.net/r/84x124/images/characters/7/284129.webp?s=a8998bf668767de58b33740886ca571c" />
+                  </Avatar.Root>

-                            <Field.Label color="black" pt={1} fontSize="12px">Members</Field.Label>
+                  <Avatar.Root border={"none"}>
+                    <Avatar.Fallback />
+                    <Avatar.Image src="https://cdn.myanimelist.net/r/84x124/images/characters/9/105421.webp?s=269ff1b2bb9abe3ac1bc443d3a76e863" />
+                  </Avatar.Root>
+                  <Avatar.Root
+                    variant="solid"
+                    border={"none"}
+                    backgroundColor={"transparent"}
+                  >
+                    <Avatar.Fallback ml={5}>+3</Avatar.Fallback>
+                  </Avatar.Root>
+                </AvatarGroup>
+              </Box>
+            </Field.Root>
+            <Heading color="black" pt={1} fontSize="12px">
+              public/Private
+            </Heading>
+            <Switch />
+          </Stack>
+        </DialogBody>

-                            <Box
-                                bgColor="#EEEEEE"
-                                border="none"
-                                w="100%"
-                                display="flex"
-                                p={1}
-                                rounded={4}
-                            >
-                                <AvatarGroup gap="0" spaceX="-3" size={"xs"} >
-                                    <Avatar.Root border={'none'}>
-                                        <Avatar.Fallback />
-                                        <Avatar.Image src="https://cdn.myanimelist.net/r/84x124/images/characters/9/131317.webp?s=d4b03c7291407bde303bc0758047f6bd" />
-                                    </Avatar.Root>
-
-                                    <Avatar.Root border={'none'}>
-                                        <Avatar.Fallback />
-                                        <Avatar.Image src="https://cdn.myanimelist.net/r/84x124/images/characters/7/284129.webp?s=a8998bf668767de58b33740886ca571c" />
-                                    </Avatar.Root>
-
-                                    <Avatar.Root border={'none'}>
-                                        <Avatar.Fallback />
-                                        <Avatar.Image src="https://cdn.myanimelist.net/r/84x124/images/characters/9/105421.webp?s=269ff1b2bb9abe3ac1bc443d3a76e863" />
-                                    </Avatar.Root>
-                                    <Avatar.Root variant="solid" border={'none'} backgroundColor={'transparent'} >
-                                        <Avatar.Fallback ml={5}>+3</Avatar.Fallback>
-                                    </Avatar.Root>
-                                </AvatarGroup>
-                            </Box>
-
-                        </Field.Root>
-                        <Heading color="black" pt={1} fontSize="12px">public/Private</Heading>
-                        <Switch />
-                    </Stack>
-                </DialogBody>
-
-                <DialogCloseTrigger color="black" />
-            </DialogContent>
-        </DialogRoot >
-
-    )
+        <DialogCloseTrigger color="black" />
+      </DialogContent>
+    </DialogRoot>
+  );
 }

-export default ViewManageGroup
+export default ViewManageGroup;
--- a/src/Pages/ManageJobs/ManageJobs.tsx
+++ b/src/Pages/ManageJobs/ManageJobs.tsx
@@ -1,13 +1,32 @@
-import { Box, HStack, Image, Input, Text } from "@chakra-ui/react";
-import { LuSearch } from "react-icons/lu";
-import { RiDeleteBin5Line } from "react-icons/ri";
-import AlertDailog from "../../components/AlertDailog";
+import {
+  Box,
+  HStack,
+  Image,
+  //  Image,
+  Text,
+} from "@chakra-ui/react";
+// import { LuSearch } from "react-icons/lu";
+// import { RiDeleteBin5Line } from "react-icons/ri";
+// import AlertDailog from "../../components/AlertDailog";
 import DataTable from "../../components/DataTable";
 import MainFrame from "../../components/MainFrame";
-import { InputGroup } from "../../components/ui/input-group";
+// import { InputGroup } from "../../components/ui/input-group";
 import ManageJobsAdd from "./ManageJobsAdd";
 import ViewManageJob from "./ViewManageJob";
-
+import {
+  useDeleteJobsPostMutation,
+  useGetManageJobsQuery,
+} from "../../Redux/Service/manage.jobs.service";
+import { useEffect, useState } from "react";
+import { Spinner } from "../../components/Sipnner/Spinner";
+import Delete from "../../components/ActionIcons/Delete";
+import { Toaster, toaster } from "../../components/ui/toaster";
+import AlertDailog from "../../components/AlertDailog";
+import { useDebounce } from "../../components/Hooks/useDebounce";
+import SearchComponent from "../../components/SearchComponent";
+// import { useState } from "react";
+// import { useGetManageJobsQuery } from "../../Redux/Service/manage.jobs.service";
+// import Delete from "../../components/ActionIcons/Delete";

 // table data

@@ -21,41 +40,107 @@ const tableHeadRow = [
  "Action",
 ];

-const managepost: any[] = [
-  ...Array.from({ length: 12 }, (_, i) => ({
-    "Sr. No": i + 1,
-    "Job Title": "Freelance content writer",
-    "Workspace mode": "Onsite",
-    "Category": "IT",
-    "Sub-category": "Flutter dev",
-    "Salary": "3.5 LPA",
-    "Action": (
-      <HStack justifyContent="center">
+const ManageJobs = () => {
+  const [currentPage, setCurrentPage] = useState(1);
+  const [localData, setLocalData] = useState([]);
+  const [searchTerm, setSearchTerm] = useState("");
+  const debouncedSearchTerm = useDebounce(searchTerm, 500);
+  const queryArgs = debouncedSearchTerm ? { page: currentPage, search: debouncedSearchTerm } : { page: currentPage };
+  const { data, refetch, isLoading, isError, isFetching } = useGetManageJobsQuery(queryArgs);
+  const [deleteJobsPost] = useDeleteJobsPostMutation();
+  const [deleteModal, setDeleteModal] = useState(false);
+  const [selectedJobsId, setSelectedJobsId] = useState<number | null>(null);

-        {/* <MdOutlineRemoveRedEye
-            style={{ cursor: "pointer", fontSize: "16px" }}
-          /> */}
-        {/* <ViewDailog /> */}
-        <ViewManageJob />
-        <ManageJobsAdd />
-        {/* <RiDeleteBin5Line style={{ cursor: "pointer" }} /> */}
+  useEffect(() => {
+    if (data) {
+      setLocalData((data as any)?.data?.data || []);
+    }
+  }, [data]);
+  // console.log(data?.data.data);
+
+  const handleSearchChange = (value: string) => {
+    setSearchTerm(value);
+    setCurrentPage(1);
+  };
+
+  const handlePageChange = (page: number) => {
+    setCurrentPage(page);
+  };
+
+  const handleDeleteJobs = async (jobsId: number) => {
+    try {
+      const response = await deleteJobsPost({ id: jobsId }).unwrap();
+      if (response?.status === "success") {
+        toaster.create({
+          title: "Success",
+          description: "Jobs deleted successfully",
+          type: "Success",
+        });
+        refetch();
+      }
+    } catch (error) {
+      console.error("Error deleting FAQ:", error);
+      toaster.create({
+        title: "Error",
+        description: "Something went wrong",
+        type: "error",
+      });
+    }
+  };
+
+  const managepost = localData?.map((agency: any, index: number) => ({
+    "Sr. No": index + 1,
+    "Job Title": agency?.job_title,
+    "Workspace mode": agency?.workspace?.en_name,
+    Category: agency?.industry?.en_name,
+    "Sub-category": agency?.department?.en_name,
+    Salary: agency?.ctc_amount,
+    Action: (
+      <HStack justifyContent="center">
+        <ViewManageJob data={agency} />
+        <ManageJobsAdd data={agency} refetch={refetch}/>
        <AlertDailog
-          AltertTiggerIcon={RiDeleteBin5Line}
-          alertText="Delete Users"
+          isOpen={deleteModal}
+          AltertTiggerIcon={() => (
+            <Delete
+              onClick={() => {
+                setSelectedJobsId(agency.id);
+                setDeleteModal(true);
+              }}
+            />
+          )}
+          alertText="Delete FAQ"
          alertIcon={<Image src={"DeleteIcon"} h={"39px"} />}
          alertCaption="are you sure you want to delete ?"
+          onClose={() => setDeleteModal(false)}
          onConfirm={() => {
-            console.log("User deleted:", i + 1);
+            // console.log("Deleting FAQ with ID:", selectedFaqId); // Correct ID
+            if (selectedJobsId) {
+              setDeleteModal(false);
+              handleDeleteJobs(selectedJobsId);
+            }
          }}
        />
      </HStack>
    ),
-  })),
-];
+  }));
+
+  if (isLoading) {
+    return (
+      <MainFrame>
+        <Box
+          display="flex"
+          justifyContent="center"
+          alignItems="center"
+          height="100%"
+        >
+          <Spinner />
+        </Box>
+      </MainFrame>
+    );
+  }

-const ManageJobs = () => {
  return (
-
    <MainFrame>
      <Box>
        <HStack
@@ -69,27 +154,11 @@ const ManageJobs = () => {
            View job Posting
          </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={"2xs"}
-                fontSize={"2sm"}
-                placeholder="Search..."
-                bgColor={'#EEEEEE'}
-                ps={8}
-              />
-            </InputGroup>
+          <HStack>
+            <SearchComponent
+              value={searchTerm}
+              onChange={handleSearchChange}
+            />
            {/* <Button bgColor={'#EEEEEE'} pl={3} pr={3}><IoMdAdd /> <Text>Add</Text></Button> */}
          </HStack>
        </HStack>
@@ -97,9 +166,19 @@ const ManageJobs = () => {
          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}
+          isLoading={isFetching}
+          isError={isError}
        />
-      </Box>       
+      </Box>
+      <Toaster />
    </MainFrame>
-  )
-}
-export default ManageJobs
+  );
+};
+export default ManageJobs;
--- a/src/Pages/ManageJobs/ManageJobsAdd.tsx
+++ b/src/Pages/ManageJobs/ManageJobsAdd.tsx
@@ -1,125 +1,505 @@
-import { Field, Icon, Input, SelectValueText, Stack, createListCollection } from "@chakra-ui/react";
+import {
+  Field,
+  Input,
+  Span,
+  Stack,
+} from "@chakra-ui/react";
 import { Button } from "../../components/ui/button";
-import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../components/ui/dialog";
+import {
+  DialogBody,
+  DialogCloseTrigger,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogRoot,
+  DialogTitle,
+  DialogTrigger,
+} from "../../components/ui/dialog";

-import { TbEdit } from "react-icons/tb";
-import { SelectContent, SelectItem, SelectLabel, SelectRoot, SelectTrigger } from "../../components/ui/select";
+// import { TbEdit } from "react-icons/tb";
+import Edit from "../../components/ActionIcons/Edit";
+import { JobStatusData, useGetCountryQuery, useGetDepartmentQuery, useGetIndustryQuery, useGetManageJobTypeQuery, useGetWorkspaceModesQuery, useUpdateJobsMutation, WorkSpace } from "../../Redux/Service/manage.jobs.service";
+import { useReducer, useRef } from "react";
+import { Toaster, toaster } from "../../components/ui/toaster";

-const frameworks = createListCollection({
-    items: [
-        { label: "React.js", value: "react" },
-        { label: "Vue.js", value: "vue" },
-        { label: "Angular", value: "angular" },
-        { label: "Svelte", value: "svelte" },
-    ],
-})
-function ManageJobsAdd() {
-    return (
+const reducerFunction = (state: any, action: any) => {
+  switch (action.type) {
+    case "SET_JOB_TITLE":
+      return { ...state, jobTitle: action.payload };
+    case "SET_WORKSPACE_MODE":
+      return { ...state, workspaceMode: action.payload };
+    case "SET_CATEGORY":
+      return { ...state, category: action.payload };
+    case "SET_SUB_CATEGORY":
+      return { ...state, subCategory: action.payload };
+    case "SET_SALARY":
+      return { ...state, salary: action.payload };
+    case "SET_EXPERIENCE":
+      return { ...state, experience: action.payload };
+    case "SET_JOB_LOCATION":
+      return { ...state, jobLocation: action.payload };
+    case "SET_COUNTRY_SELECTION":
+      return { ...state, countrySelection: action.payload };
+    case "SET_JOB_TYPE":
+      return { ...state, jobType: action.payload };
+    case "SET_SKILLS_REQUIRED":
+      return { ...state, skillsRequired: action.payload };
+    case "SET_JOB_DESCRIPTION":
+      return { ...state, jobDescription: action.payload };
+    default:
+      return state;
+  }
+};

+function ManageJobsAdd({ data, refetch }: { data: JobStatusData, refetch: () => void }) {
+  const { data: workspaceModes } = useGetWorkspaceModesQuery({});
+  const { data: industryData } = useGetIndustryQuery({});
+  const { data: departmentData } = useGetDepartmentQuery({});
+  const { data: countryData } = useGetCountryQuery({});
+  const { data: jobTypeData } = useGetManageJobTypeQuery({});
+  const [updateJobs, { isLoading}] = useUpdateJobsMutation();
+  // console.log('Modes:', jobTypeData?.data.data);

-        <DialogRoot placement="center">
-            <DialogTrigger asChild>
-            <Icon
-            cursor={"pointer"}
-            p={0.5}
-            _hover={{ bg: "#00000015" }}
-            rounded={"md"}
-            boxSize={5}
-            // color={iconColor && iconColor}
+  const initialState = {
+    jobTitle: data?.job_title || "",
+    workspaceMode: data?.workspace_mode_xid || "",
+    category: data?.industry_xid || "",
+    subCategory: data?.department_xid || "",
+    salary: data?.ctc_amount || "",
+    experience: data?.experience || "",
+    jobLocation: data?.job_location || "",
+    countrySelection: data?.country_xid || "",
+    jobType: data?.job_type_xid || "",
+    skillsDescription: data?.skill_description || "",
+    jobDescription: data?.job_description || "",
+  };
+
+  const [state, dispatch] = useReducer(reducerFunction, initialState);
+  const closeRef = useRef<HTMLButtonElement>(null);
+
+  const getDisplayName = (name: string, maxLength = 30) =>
+    name.length > maxLength ? name.slice(0, maxLength) + "..." : name;
+
+    const handleSubmit = async () => {
+      const {
+        jobTitle,
+        workspaceMode,
+        category,
+        subCategory,
+        salary,
+        experience,
+        jobLocation,
+        countrySelection,
+        jobType,
+        skillsDescription,
+        jobDescription,
+      } = state;
+
+      if (
+        !jobTitle ||
+        !workspaceMode ||
+        !category ||
+        !subCategory ||
+        !salary ||
+        !experience ||
+        !jobLocation ||
+        !countrySelection ||
+        !jobType ||
+        !skillsDescription ||
+        !jobDescription
+      ) {
+        toaster.create({
+          title: "Missing Fields",
+          description: "Please fill in all required fields before submitting.",
+          type: "error",
+        });
+        return;
+      }
+  
+      // Only en_name is editable, so we only need to send that in the payload.
+      const payload = {
+        id: data?.id,
+        job_title: state.jobTitle,
+        workspace_mode_xid: state.workspaceMode,
+        industry_xid: state.category,
+        department_xid: state.subCategory,
+        ctc_amount: state.salary,
+        experience: state.experience,
+        job_location: state.jobLocation,
+        country_xid: state.countrySelection,
+        job_type_xid: state.jobType,
+        skill_description: state.skillsDescription,
+        job_description: state.jobDescription,
+      };
+  
+      // console.log('payload', payload)
+  
+      try {
+        const response = await updateJobs(payload).unwrap();
+        if (response?.status === "success") {
+          toaster.create({
+            title: "Success",
+            description: "Country updated successfully",
+            type: "success",
+          });
+          closeRef.current?.click();
+          refetch()
+        } else {
+          toaster.create({
+            title: "Error",
+            description: "Failed to update Country",
+            type: "error",
+          });
+        }
+      } catch (error) {
+        console.error("Error updating template:", error);
+        // alert("Failed to update template");
+        toaster.create({
+          title: "Error",
+          description: "Something went wrong",
+          type: "error",
+        });
+      }
+    };
+
+  return (
+    <DialogRoot placement="center">
+      <DialogTrigger asChild>
+        <Span><Edit /></Span>
+      </DialogTrigger>
+
+      <DialogContent
+        bg={"#fff"}
+        // w={{ lg: "60%", md: "230px" }}
+        w={{ base: "90%", md: "400px" }}
+        height={"80vh"}
+        overflow={"scroll"}
+        overflowX="hidden"
+        p={3} // Reduced padding
+        bgSize={"md"}
+      >
+        <DialogHeader bg="white">
+          <DialogTitle alignSelf="center" color="black" fontSize="14px">
+            Add Details
+          </DialogTitle>
+        </DialogHeader>
+
+        <DialogBody bg="white">
+          <Stack py={3}>
+            <Field.Root>
+              <Field.Label color="black" pt={1} fontSize="12px">
+                Job title
+              </Field.Label>
+              <Input
+                placeholder="Enter the Job Title"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+                value={state.jobTitle}
+                onChange={(e) =>
+                  dispatch({
+                    type: "SET_JOB_TITLE",
+                    payload: e.target.value,
+                  })
+                }
+              />
+            </Field.Root>
+            <Field.Root>
+              <Field.Label color="black" pt={1} fontSize="12px">
+                Workspace mode
+              </Field.Label>
+              <select
+                style={{
+                  backgroundColor: "#EEEEEE",
+                  color: "black",
+                  border: "none",
+                  height: "30px",
+                  fontSize: "12px",
+                  padding: "4px",
+                  borderRadius: "4px",
+                  width: "100%",
+                }}
+                value={state.workspace_mode_xid}
+                onChange={(e) =>
+                  dispatch({
+                    type: "SET_WORKSPACE_MODE",
+                    payload: Number(e.target.value),
+                  })
+                }
+              >
+                <option value="" disabled>
+                  Select country
+                </option>
+                {workspaceModes && workspaceModes?.data.map((mode: WorkSpace) => (
+                  <option key={mode.id} value={mode.id}>
+                    {getDisplayName(mode.en_name)}
+                  </option>
+                ))}
+              </select>
+            </Field.Root>
+            <Field.Root>
+              <Field.Label pt={1} color="black" fontSize="12px">
+                Category
+              </Field.Label>
+              <select
+                style={{
+                  backgroundColor: "#EEEEEE",
+                  color: "black",
+                  border: "none",
+                  height: "30px",
+                  fontSize: "12px",
+                  padding: "4px",
+                  borderRadius: "4px",
+                  width: "100%",
+                }}
+                value={state.industry_xid}
+                onChange={(e) =>
+                  dispatch({
+                    type: "SET_INDUSTRY",
+                    payload: Number(e.target.value),
+                  })
+                }
+              >
+                <option value="" disabled>
+                  Select department
+                </option>
+                {industryData && industryData?.data.map((mode: WorkSpace) => (
+                  <option key={mode.id} value={mode.id}>
+                    {getDisplayName(mode.en_name)}
+                  </option>
+                ))}
+              </select>
+            </Field.Root>
+            <Field.Root>
+              <Field.Label pt={1} color="black" fontSize="12px">
+                Sub-Category
+              </Field.Label>
+              <select
+                style={{
+                  backgroundColor: "#EEEEEE",
+                  color: "black",
+                  border: "none",
+                  height: "30px",
+                  fontSize: "12px",
+                  padding: "4px",
+                  borderRadius: "4px",
+                  width: "100%",
+                }}
+                value={state.department_xid}
+                onChange={(e) =>
+                  dispatch({
+                    type: "SET_DEPARTMENT",
+                    payload: Number(e.target.value),
+                  })
+                }
+              >
+                <option value="" disabled>
+                  Select department
+                </option>
+                {departmentData && departmentData?.data.map((mode: WorkSpace) => (
+                  <option key={mode.id} value={mode.id}>
+                    {getDisplayName(mode.en_name)}
+                  </option>
+                ))}
+              </select>
+            </Field.Root>
+
+            <Field.Root>
+              <Field.Label pt={1} color="black" fontSize="12px">
+                Country
+              </Field.Label>
+              <select
+                style={{
+                  backgroundColor: "#EEEEEE",
+                  color: "black",
+                  border: "none",
+                  height: "30px",
+                  fontSize: "12px",
+                  padding: "4px",
+                  borderRadius: "4px",
+                  width: "100%",
+                }}
+                value={state.country_xid}
+                onChange={(e) =>
+                  dispatch({
+                    type: "SET_COUNTRY",
+                    payload: Number(e.target.value),
+                  })
+                }
+              >
+                <option value="" disabled>
+                  Select country
+                </option>
+                {countryData && countryData?.data.map((mode: WorkSpace) => (
+                  <option key={mode.id} value={mode.id}>
+                    {getDisplayName(mode.en_name)}
+                  </option>
+                ))}
+              </select>
+            </Field.Root>
+            <Field.Root>
+              <Field.Label pt={1} color="black" fontSize="12px">
+                Job type
+              </Field.Label>
+              <select
+                style={{
+                  backgroundColor: "#EEEEEE",
+                  color: "black",
+                  border: "none",
+                  height: "30px",
+                  fontSize: "12px",
+                  padding: "4px",
+                  borderRadius: "4px",
+                  width: "100%",
+                }}
+                value={state.job_type_xid}
+                onChange={(e) =>
+                  dispatch({
+                    type: "SET_JOB_TYPE",
+                    payload: Number(e.target.value),
+                  })
+                }
+              >
+                <option value="" disabled>
+                  Select Job Type
+                </option>
+                {jobTypeData && jobTypeData?.data.data.map((mode: WorkSpace) => (
+                  <option key={mode.id} value={mode.id}>
+                    {getDisplayName(mode.en_name)}
+                  </option>
+                ))}
+              </select>
+            </Field.Root>
+
+            <Field.Root>
+              <Field.Label pt={1} color="black" fontSize="12px">
+                Salary
+              </Field.Label>
+              <Input
+                placeholder="Enter the Salary"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+                value={state.salary}
+                onChange={(e) =>
+                  dispatch({
+                    type: "SET_SALARY",
+                    payload: e.target.value,
+                  })
+                }
+              />
+            </Field.Root>
+            <Field.Root>
+              <Field.Label pt={1} color="black" fontSize="12px">
+                Experience
+              </Field.Label>
+              <Input
+                placeholder="Enter the Experience in years"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+                value={state.experience}
+                onChange={(e) =>
+                  dispatch({
+                    type: "SET_EXPERIENCE",
+                    payload: e.target.value,
+                  })
+                }
+              />
+            </Field.Root>
+            <Field.Root>
+              <Field.Label pt={1} color="black" fontSize="12px">
+                Job Location
+              </Field.Label>
+              <Input
+                placeholder="Enter the Job Location"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+                value={state.jobLocation}
+                onChange={(e) =>
+                  dispatch({
+                    type: "SET_JOB_LOCATION",
+                    payload: e.target.value,
+                  })
+                }
+              />
+            </Field.Root>
+            <Field.Root>
+              <Field.Label pt={1} color="black" fontSize="12px">
+                Skills description
+              </Field.Label>
+              <Input
+                placeholder="Enter the Skills description"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+                value={state.skillsDescription}
+                onChange={(e) =>
+                  dispatch({
+                    type: "SET_SKILLS_DESCRIPTION",
+                    payload: e.target.value,
+                  })
+                }
+              />
+            </Field.Root>
+            <Field.Root>
+              <Field.Label pt={1} color="black" fontSize="12px">
+                Job Description*
+              </Field.Label>
+              <Input
+                placeholder="Enter the Job Description"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+                value={state.jobDescription}
+                onChange={(e) =>
+                  dispatch({
+                    type: "SET_JOB_DESCRIPTION",
+                    payload: e.target.value,
+                  })
+                }
+              />
+            </Field.Root>
+          </Stack>
+        </DialogBody>
+        <DialogFooter display="flex" justifyContent="center" pt={"2"}>
+          <Button
+            w="100%"
+            bg="#02A0A0"
+            color={"#fff"}
+            fontSize="12px"
+            height="30px"
+            onClick={handleSubmit}
+            disabled={isLoading}
          >
-            <TbEdit />
-          </Icon>
-            </DialogTrigger>
+            Save
+          </Button>
+        </DialogFooter>

-            <DialogContent
-                bg={"#fff"}
-                // w={{ lg: "60%", md: "230px" }}
-                w={{ base: '90%', md: '400px' }}
-                height={'80vh'}
-                overflow={'scroll'}
-                overflowX="hidden" 
-                p={3} // Reduced padding
-                bgSize={'md'}
-            >
-                <DialogHeader bg="white">
-                    <DialogTitle alignSelf="center" color="black" fontSize="14px">Add Details</DialogTitle>
-                </DialogHeader>
-
-                <DialogBody bg="white">
-                    <Stack py={3}>
-                        <Field.Root>
-                            <Field.Label color="black" pt={1} fontSize="12px">Job title</Field.Label>
-                            <Input placeholder="Enter the Job Title" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-                        </Field.Root>
-                        <Field.Root>
-
-                            <Field.Label color="black" pt={1} fontSize="12px">Workspace mode</Field.Label>
-                            <Input placeholder="Enter the Workspace Mode" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-                        </Field.Root>
-                        <Field.Root>
-                            <Field.Label pt={1} color="black" fontSize="12px">Category</Field.Label>
-                            <Input placeholder="Enter the Category" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-                        </Field.Root>
-                        <Field.Root>
-                            <Field.Label pt={1} color="black" fontSize="12px">Sub-Category</Field.Label>
-                            <Input placeholder="Enter the Sub-Category" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-                        </Field.Root>
-                        <Field.Root>
-                            <Field.Label pt={1} color="black" fontSize="12px">Salary</Field.Label>
-                            <Input placeholder="Enter the Salary" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-                        </Field.Root>
-                        <Field.Root>
-                            <Field.Label pt={1} color="black" fontSize="12px">Experience</Field.Label>
-                            <Input placeholder="Enter the Experience" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-                        </Field.Root>
-                        <Field.Root>
-                            <Field.Label pt={1} color="black" fontSize="12px">Job Location</Field.Label>
-                            <Input placeholder="Enter the Job Location" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-                        </Field.Root>
-                        {/* <Field.Label pt={1} color="black" fontSize="12px">Country Selection</Field.Label>
-                            <Input placeholder="Enter the Country Selection"   /> */}
-                        <SelectRoot collection={frameworks} size="sm" w={'100%'}>
-                            <SelectLabel pt={1} color="black" fontSize="12px">Country Selection</SelectLabel>
-                            <SelectTrigger bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px"
-                                borderRadius={"5px"}>
-                                <SelectValueText placeholder="Enter the Country Selection" pb={"6px"} fontSize={"12px"} />
-                            </SelectTrigger>
-                            <SelectContent position={'relative'} zIndex={'9999'} bg={"#fff"}>
-                                {frameworks.items.map((movie) => (
-                                    <SelectItem item={movie} key={movie.value} color={"black"} pl={2} p={1} _hover={{ bg: "#F0F0F0" }} // Light grey background on hover
-                                        fontSize="12px" >
-                                        {movie.label}
-                                    </SelectItem>
-                                ))}
-                            </SelectContent>
-                        </SelectRoot>
-                        <Field.Root>
-
-                            <Field.Label pt={1} color="black" fontSize="12px">Job type</Field.Label>
-                            <Input placeholder="Enter the Job Type" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-                        </Field.Root>
-                        <Field.Root>
-                            <Field.Label pt={1} color="black" fontSize="12px">Skills required</Field.Label>
-                            <Input placeholder="Enter the Skills Required" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-                        </Field.Root>
-                        <Field.Root>
-                            <Field.Label pt={1} color="black" fontSize="12px">Job Description*</Field.Label>
-                            <Input placeholder="Enter the Job Description" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-                        </Field.Root>
-                    </Stack>
-                </DialogBody>
-                <DialogFooter display="flex" justifyContent="center" pt={"2"}>
-                    <Button w="100%" bg="#02A0A0" color={"#fff"} fontSize="12px" height="30px">
-                        Save
-                    </Button>
-                </DialogFooter>
-
-                <DialogCloseTrigger color="black" />
-            </DialogContent>
-        </DialogRoot>
-
-
-    )
+        <DialogCloseTrigger color="black" ref={closeRef} />
+      </DialogContent>
+      <Toaster />
+    </DialogRoot>
+  );
 }

-export default ManageJobsAdd
+export default ManageJobsAdd;
--- a/src/Pages/ManageJobs/ViewManageJob.tsx
+++ b/src/Pages/ManageJobs/ViewManageJob.tsx
@@ -1,119 +1,307 @@
-import { Field, Icon, Input, SelectValueText, Stack, createListCollection, } from "@chakra-ui/react"
-import { Button } from "../../components/ui/button"
-import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../components/ui/dialog"
+import {
+  Field,
+  Input,
+  Stack,
+} from "@chakra-ui/react";
+import { Button } from "../../components/ui/button";
+import {
+  DialogBody,
+  DialogCloseTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogRoot,
+  DialogTitle,
+  DialogTrigger,
+} from "../../components/ui/dialog";

-import { MdOutlineRemoveRedEye } from "react-icons/md"
-import { SelectContent, SelectItem, SelectLabel, SelectRoot, SelectTrigger } from "../../components/ui/select"
+// import { MdOutlineRemoveRedEye } from "react-icons/md";
+import View from "../../components/ActionIcons/View";
+import { JobStatusData, useLazyViewJobsQuery } from "../../Redux/Service/manage.jobs.service";

-const frameworks = createListCollection({
-    items: [
-        { label: "React.js", value: "react" },
-        { label: "Vue.js", value: "vue" },
-        { label: "Angular", value: "angular" },
-        { label: "Svelte", value: "svelte" },
-    ],
-})
-function ViewManageJob() {
-    return (
+function ViewManageJob({ data }: { data: JobStatusData }) {
+  const [trigger] = useLazyViewJobsQuery();

+  console.log(data);

-        <DialogRoot placement="center">
-            <DialogTrigger asChild>
-            <Icon
-            cursor={"pointer"}
-            p={0.5}
-            _hover={{ bg: "#00000015" }}
-            rounded={"md"}
-            boxSize={5}
-            // color={iconColor && iconColor}
-          >
-            <MdOutlineRemoveRedEye />
-          </Icon>
-            </DialogTrigger>
+  const handleView = () => {
+    trigger(data.id);
+  };

-            <DialogContent
+  // const viewJobs = data;
+
+  console.log();
+
+  return (
+    <DialogRoot placement="center">
+      <DialogTrigger asChild>
+        <Button
+          onClick={handleView}
+          bg={'transparent'}
+          color={"black"}
+        >
+          <View />
+        </Button>
+      </DialogTrigger>
+
+      {/* {viewJobs?.map((data: any) => ( */}
+      <DialogContent
+        bg={"#fff"}
+        // w={{ lg: "60%", md: "230px" }}
+        w={{ base: "90%", md: "400px" }}
+        height={"80vh"}
+        overflow={"scroll"}
+        overflowX="hidden"
+        p={3} // Reduced padding
+        bgSize={"md"}
+      >
+        <DialogHeader bg="white">
+          <DialogTitle alignSelf="center" color="black" fontSize="14px">
+            Add Details
+          </DialogTitle>
+        </DialogHeader>
+
+        <DialogBody bg="white">
+          <Stack py={3}>
+            <Field.Root>
+              <Field.Label color="black" pt={1} fontSize="12px">
+                Job title
+              </Field.Label>
+              <Input
+                placeholder="Enter the Job Title"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+                value={data?.job_title}
+              />
+            </Field.Root>
+            <Field.Root>
+              <Field.Label color="black" pt={1} fontSize="12px">
+                Workspace mode
+              </Field.Label>
+              <Input
+                placeholder="Enter the Workspace Mode"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+                value={data?.workspace?.en_name}
+              />
+            </Field.Root>
+            <Field.Root>
+              <Field.Label pt={1} color="black" fontSize="12px">
+                Category
+              </Field.Label>
+              <Input
+                placeholder="Enter the Category"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+                value={data?.industry?.en_name}
+              />
+            </Field.Root>
+            <Field.Root>
+              <Field.Label pt={1} color="black" fontSize="12px">
+                Sub-Category
+              </Field.Label>
+              <Input
+                placeholder="Enter the Sub-Category"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+                value={data?.department?.en_name}
+              />
+            </Field.Root>
+            <Field.Root>
+              <Field.Label pt={1} color="black" fontSize="12px">
+                Salary
+              </Field.Label>
+              <Input
+                placeholder="Enter the Salary"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+                value={data?.ctc_amount}
+              />
+            </Field.Root>
+            <Field.Root>
+              <Field.Label pt={1} color="black" fontSize="12px">
+                Experience
+              </Field.Label>
+              <Input
+                placeholder="Enter the Experience"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+                value={data?.experience}
+              />
+            </Field.Root>
+            <Field.Root>
+              <Field.Label pt={1} color="black" fontSize="12px">
+                Job Location
+              </Field.Label>
+              <Input
+                placeholder="Enter the Job Location"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+                value={data?.job_location}
+              />
+            </Field.Root>
+
+            <Field.Root>
+              <Field.Label pt={1} color="black" fontSize="12px">
+                Country
+              </Field.Label>
+              <Input
+                placeholder="Enter the Country"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+                value={data?.country.en_name}
+              />
+            </Field.Root>
+
+            {/* <SelectRoot collection={frameworks} size="sm" w={"100%"}>
+              <SelectLabel pt={1} color="black" fontSize="12px">
+                Country Selection
+              </SelectLabel>
+              <SelectTrigger
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+                borderRadius={"5px"}
+              >
+                <SelectValueText
+                  placeholder="Enter the Country Selection"
+                  pb={"6px"}
+                  fontSize={"12px"}
+                />
+              </SelectTrigger>
+              <SelectContent
+                position={"relative"}
+                zIndex={"9999"}
                bg={"#fff"}
-                // w={{ lg: "60%", md: "230px" }}
-                w={{ base: '90%', md: '400px' }}
-                height={'80vh'}
-                overflow={'scroll'}
-                overflowX="hidden" 
-                p={3} // Reduced padding
-                bgSize={'md'}
-            >
-                <DialogHeader bg="white" >
-                    <DialogTitle alignSelf="center" color="black" fontSize="14px">Add Details</DialogTitle>
-                </DialogHeader>
+              >
+                {frameworks.items.map((movie) => (
+                  <SelectItem
+                    item={movie}
+                    key={movie.value}
+                    color={"black"}
+                    pl={2}
+                    p={1}
+                    _hover={{ bg: "#F0F0F0" }} // Light grey background on hover
+                    fontSize="12px"
+                  >
+                    {movie.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </SelectRoot> */}

-                <DialogBody bg="white">
-                    <Stack py={3}>
-                        <Field.Root>
-                            <Field.Label color="black" pt={1} fontSize="12px">Job title</Field.Label>
-                            <Input placeholder="Enter the Job Title" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-                        </Field.Root><Field.Root>
-                            <Field.Label color="black" pt={1} fontSize="12px">Workspace mode</Field.Label>
-                            <Input placeholder="Enter the Workspace Mode" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-                        </Field.Root><Field.Root>
-                            <Field.Label pt={1} color="black" fontSize="12px">Category</Field.Label>
-                            <Input placeholder="Enter the Category" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-                        </Field.Root><Field.Root>
-                            <Field.Label pt={1} color="black" fontSize="12px">Sub-Category</Field.Label>
-                            <Input placeholder="Enter the Sub-Category" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-                        </Field.Root><Field.Root>
-                            <Field.Label pt={1} color="black" fontSize="12px">Salary</Field.Label>
-                            <Input placeholder="Enter the Salary" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-                        </Field.Root><Field.Root>
-                            <Field.Label pt={1} color="black" fontSize="12px">Experience</Field.Label>
-                            <Input placeholder="Enter the Experience" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-                        </Field.Root><Field.Root>
-                            <Field.Label pt={1} color="black" fontSize="12px">Job Location</Field.Label>
-                            <Input placeholder="Enter the Job Location" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-                        </Field.Root>
-                        {/* <Field.Label pt={1} color="black" fontSize="12px">Country Selection</Field.Label>
-                            <Input placeholder="Enter the Country Selection"   /> */}
-                        <SelectRoot collection={frameworks} size="sm" w={'100%'}>
-                            <SelectLabel pt={1} color="black" fontSize="12px">Country Selection</SelectLabel>
-                            <SelectTrigger bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px"
-                                borderRadius={"5px"}>
-                                <SelectValueText placeholder="Enter the Country Selection" pb={"6px"} fontSize={"12px"} />
-                            </SelectTrigger>
-                            <SelectContent position={'relative'} zIndex={'9999'} bg={"#fff"}>
-                                {frameworks.items.map((movie) => (
-                                    <SelectItem item={movie} key={movie.value} color={"black"} pl={2} p={1} _hover={{ bg: "#F0F0F0" }} // Light grey background on hover
-                                        fontSize="12px" >
-                                        {movie.label}
-                                    </SelectItem>
-                                ))}
-                            </SelectContent>
-                        </SelectRoot>
+            <Field.Root>
+              <Field.Label pt={1} color="black" fontSize="12px">
+                Job type
+              </Field.Label>
+              <Input
+                placeholder="Enter the Job Type"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+                value={data?.job_type?.en_name}
+              />
+            </Field.Root>
+            <Field.Root>
+              <Field.Label pt={1} color="black" fontSize="12px">
+                Skills required
+              </Field.Label>
+              <Input
+                placeholder="Enter the Skills Required"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+                value={data?.skill_description}
+              />
+            </Field.Root>
+            <Field.Root>
+              <Field.Label pt={1} color="black" fontSize="12px">
+                Job Description*
+              </Field.Label>
+              <Input
+                placeholder="Enter the Job Description"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+                value={data?.job_description}
+              />
+            </Field.Root>
+            {/* <Field.Root>
+              <Field.Label pt={1} color="black" fontSize="12px">
+                Upload Image
+              </Field.Label>
+              <Input
+                placeholder="Upload Image"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+              />
+            </Field.Root> */}
+          </Stack>
+        </DialogBody>
+        {/* <DialogFooter display="flex" justifyContent="center" pt={"2"}>
+          <Button
+            w="100%"
+            bg="#02A0A0"
+            color={"#fff"}
+            fontSize="12px"
+            height="30px"
+          >
+            Save
+          </Button>
+        </DialogFooter> */}

-                        <Field.Root>
-                            <Field.Label pt={1} color="black" fontSize="12px">Job type</Field.Label>
-                            <Input placeholder="Enter the Job Type" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-                        </Field.Root><Field.Root>
-                            <Field.Label pt={1} color="black" fontSize="12px">Skills required</Field.Label>
-                            <Input placeholder="Enter the Skills Required" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-                        </Field.Root><Field.Root>
-                            <Field.Label pt={1} color="black" fontSize="12px">Job Description*</Field.Label>
-                            <Input placeholder="Enter the Job Description" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-                        </Field.Root><Field.Root>
-                            <Field.Label pt={1} color="black" fontSize="12px">Upload Image</Field.Label>
-                            <Input placeholder="Upload Image" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-                        </Field.Root>
-                    </Stack>
-                </DialogBody>
-                <DialogFooter display="flex" justifyContent="center" pt={"2"}>
-                    <Button w="100%" bg="#02A0A0" color={"#fff"} fontSize="12px" height="30px">
-                        Save
-                    </Button>
-                </DialogFooter>
-
-                <DialogCloseTrigger color="black" />
-            </DialogContent>
-        </DialogRoot>
-
-
-    )
+        <DialogCloseTrigger color="black" />
+      </DialogContent>
+      {/* ))} */}
+    </DialogRoot>
+  );
 }

-export default ViewManageJob
+export default ViewManageJob;
--- a/src/Pages/ManagePost/ManagePost.tsx
+++ b/src/Pages/ManagePost/ManagePost.tsx
@@ -1,67 +1,211 @@
-
-import { Box, HStack, Image, Input, 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 AlertDailog from '../../components/AlertDailog'
-import { Switch } from '../../components/ui/switch'
-import img from "../../assets/waterfall.jpg"
-import { RiDeleteBin5Line } from "react-icons/ri";
-import ViewDailog from './ViewDailog'
+import {
+  Box, HStack, Icon, Image,
+  // Span, 
+  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 AlertDailog from "../../components/AlertDailog";
+import { Switch } from "../../components/ui/switch";
+// import img from "../../assets/waterfall.jpg";
+// import { RiDeleteBin5Line } from "react-icons/ri";
+import ViewDailog from "./ViewDailog";
+import { useGetManagePostsQuery, usePostStatusToggleMutation } from "../../Redux/Service/manage.post.service";
+import { useEffect, useState } from "react";
+import { Toaster, toaster } from "../../components/ui/toaster";
+import { FaVideo } from "react-icons/fa";
+import SearchComponent from "../../components/SearchComponent";
+import { delay } from "../../components/Utils";
+// import Delete from "../../components/ActionIcons/Delete";
 // import ViewDailog from './ViewDailog'

-// table data
+const APIURL = import.meta.env.VITE_POST_IMG

 const tableHeadRow = [
  "Sr. No",
  "Images",
  "Description",
  "Publish Data",
-  "Activate/Deactivate",
+  // "Activate/Deactivate",
  "Action",
 ];

-const managepost: any[] = [
-  ...Array.from({ length: 12 }, (_, i) => ({
-    "Sr. No": i + 1,
-    "Images": (
-      // <Image w={50} src={img} />
-      <Image rounded={'lg'} w={100} h={50} src={img} />
+// const managepost: any[] = [
+//   ...Array.from({ length: 12 }, (_, i) => ({
+//     "Sr. No": i + 1,
+//     Images: (
+//       // <Image w={50} src={img} />
+//       <Image rounded={"lg"} w={100} h={50} src={img} />
+//     ),
+//     Description: (
+//       <Text>
+//         {`Lorem ipsum dolor, sit amet consectetur adipisicing elit.}`.slice(
+//           0,
+//           30
+//         ) + "..."}
+//       </Text>
+//     ),
+//     "Publish Data": "12/01/2025",
+//     "Activate/Deactivate": (
+//       <Box w={"100%"}>
+//         <Switch size={"sm"} colorPalette={"teal"} />
+//       </Box>
+//     ),
+//     Action: (
+//       <HStack justifyContent="center">
+//         <ViewDailog />
+//         {/* <AlertDailog
+//           AltertTiggerIcon={() => <Span><Delete /> </Span>} 
+//           alertText="Delete Users"
+//           alertIcon={<Image src={"DeleteIcon"} h={"39px"} />}
+//           alertCaption="are you sure you want to delete ?"
+//           onConfirm={() => {
+//             console.log("User deleted:", i + 1);
+//           }}
+//         /> */}
+//       </HStack>
+//     ),
+//   })),
+// ];
+
+const ManagePost = () => {
+  const [currentPage, setCurrentPage] = useState(1);
+  const { data, refetch, isFetching, isError } = useGetManagePostsQuery(currentPage)
+  const [localData, setLocalData] = useState<any[]>([]);
+  const [searchTerm, setSearchTerm] = useState("");
+  const [postStatusToggle] = usePostStatusToggleMutation()
+  console.log('POSTS', 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 postStatusToggle({ id: agencyId, is_active: newStatus }).unwrap();
+      toaster.create({
+        title: "Success",
+        description: "Status updated successfully",
+        type: "success",
+      });
+      await delay(500);
+      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
+        )
+      );
+    }
+  };


+  function formatAPIDate(apiDateString: any) {
+    const date = new Date(apiDateString);
+
+    // Get month, day, and year
+    const month = date.getMonth() + 1; // Months are 0-indexed
+    const day = date.getDate();
+    const year = date.getFullYear();
+
+    // Pad with leading zeros if needed
+    const formattedMonth = month.toString().padStart(2, '0');
+    const formattedDay = day.toString().padStart(2, '0');
+
+    return `${formattedMonth}/${formattedDay}/${year}`;
+  }
+
+  const filteredData = localData?.filter((agency) => {
+    return (agency.post_content_translation.some((item: any) => {
+      const searchLower = searchTerm.toLowerCase();
+      const title = item.content?.toLowerCase().includes(searchLower);
+      return title;
+    }))
+  });
+
+  const managepost = filteredData?.flatMap((agency: any, index: number) => (agency.post_content_translation.map((translation: any) => ({
+    'id': agency.id,
+    "Sr. No": (currentPage - 1) * (data?.data.per_page ?? 0) + index + 1,
+    Images: (
+      agency.images.length > 0 ?
+        agency.images[0].type === "image" ? (
+          <HStack>
+            <Image
+              rounded={"lg"}
+              w={100}
+              h={50}
+              src={`${APIURL}${agency.images[0].image_name}`}
+            />
+            <Text fontSize="xs" color={'lightgray'}>
+              {`${Number(agency.images.length) > 1 ? '+' + (Number(agency.images.length) - 1) : ''}`}
+            </Text>
+          </HStack>
+        ) : (
+          <HStack>
+            <Box
+              rounded={"lg"}
+              w={100}
+              h={50}
+              bg="gray.200"
+              display="flex"
+              alignItems="center"
+              justifyContent="center"
+            >
+              <Icon as={FaVideo} color="gray.500" />
+            </Box>
+            <Text fontSize="xs" color={'lightgray'}>
+              {`${Number(agency.images.length) > 1 ? '+' + (Number(agency.images.length) - 1) : ''}`}
+            </Text>
+          </HStack>
+        ) : ''
+      // <Image rounded={"lg"} w={100} h={50} src={img} />
    ),
-    "Description": (<Text>
-      {`Lorem ipsum dolor, sit amet consectetur adipisicing elit.}`.slice(0, 30) + '...'}
-    </Text>),
-    "Publish Data": "12/01/2025",
-    "Activate/Deactivate": (
-      <Box w={'100%'} >
-        <Switch size={'sm'} colorPalette={'teal'} />
-      </Box>
+    Description: (
+      <Text>
+        {translation?.content?.length > 30
+          ? `${translation.content.slice(0, 30)}...`
+          : translation?.content}
+      </Text>
    ),
+    "Publish Data": formatAPIDate(agency.created_at),
+    "is_active": agency.is_active,
    "Action": (
      <HStack justifyContent="center">
-
-        {/* <MdOutlineRemoveRedEye
-            style={{ cursor: "pointer", fontSize: "16px" }}
-          /> */}
-        <ViewDailog />
-        {/* <RiDeleteBin5Line style={{ cursor: "pointer" }} /> */}
-        <AlertDailog
-          AltertTiggerIcon={RiDeleteBin5Line}
-          alertText="Delete Users"
-          alertIcon={<Image src={"DeleteIcon"} h={"39px"} />}
-          alertCaption="are you sure you want to delete ?"
-          onConfirm={() => {
-            console.log("User deleted:", i + 1);
-          }}
-        />
+        {/* <ViewAgencyMaster agency={localData} id={agency.id} /> */}
+        <ViewDailog localData={{ ...agency, translation }} refetch={refetch} />
+        <Box>
+          <Switch
+            colorPalette={"teal"}
+            size={"xs"}
+            onChange={() => handleToggle(agency.id, Number(agency.is_active))}
+            checked={Boolean(Number(agency.is_active))}
+          />
+        </Box>
      </HStack>
    ),
-  })),
-];
-const ManagePost = () => {
+  }))));
+
+
  return (
    <MainFrame>
      <Box>
@@ -77,36 +221,34 @@ const ManagePost = () => {
          </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={"2xs"}
-                fontSize={"2sm"}
-                placeholder="Search..."
-                bgColor={'#EEEEEE'}
-                ps={8}
-              />
-            </InputGroup>
+            <SearchComponent
+              value={searchTerm}
+              onChange={(value) => {
+                setSearchTerm(value);
+                // setCurrentPage(1);
+                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}
+          isLoading={isFetching}
+          isError={isError}
        />
      </Box>
+      <Toaster />
    </MainFrame>
-  )
-}
+  );
+};

-export default ManagePost
+export default ManagePost;
--- a/src/Pages/ManagePost/ViewDailog.tsx
+++ b/src/Pages/ManagePost/ViewDailog.tsx
@@ -1,23 +1,18 @@
-import { Field, Icon, Image, Input, Stack } from "@chakra-ui/react"
-import { TbEdit } from "react-icons/tb"
-import img from "../../assets/waterfall.jpg"
+import { Field, HStack, Image, Input, Stack } from "@chakra-ui/react"
+// import { TbEdit } from "react-icons/tb"
+// import img from "../../assets/waterfall.jpg"
 import { DialogBody, DialogCloseTrigger, DialogContent, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../components/ui/dialog"
+// import Edit from "../../components/ActionIcons/Edit"
+import { LuEye } from "react-icons/lu"

-function ViewDailog() {
+const APIURL = import.meta.env.VITE_POST_IMG
+
+function ViewDailog({ localData }: { localData: any, refetch: VoidFunction }) {
    return (
-
        <DialogRoot placement="center">
            <DialogTrigger asChild>
-            <Icon
-            cursor={"pointer"}
-            p={0.5}
-            _hover={{ bg: "#00000015" }}
-            rounded={"md"}
-            boxSize={5}
-            // color={iconColor && iconColor}
-          >
-            <TbEdit />
-          </Icon>
+                {/* <Span><Edit /></Span> */}
+                <LuEye fontSize={"xm"} cursor={'pointer'} />
            </DialogTrigger>

            <DialogContent
@@ -33,17 +28,49 @@ function ViewDailog() {
                <DialogBody bg="white">
                    <Stack py={3} >
                        <Field.Root>
-                            <Field.Label color="black" pt={1} fontSize="12px">Title</Field.Label>
-                            <Input placeholder="Enter the Title" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" readOnly />
-
-                            <Field.Label color="black" pt={1} fontSize="12px">Subtitle</Field.Label>
-                            <Input placeholder="Enter the Subtitle" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" readOnly />
-
                            <Field.Label color="black" pt={1} fontSize="12px">Description</Field.Label>
-                            <Input placeholder="Enter the Description" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" readOnly />
+                            <Input
+                                // placeholder="Enter the Title"
+                                value={localData.translation.content}
+                                bgColor="#EEEEEE"
+                                color="black"
+                                border="none"
+                                pl={1}
+                                fontSize="12px"
+                                height="30px"
+                                readOnly
+                            />

+                            {/* <Field.Label color="black" pt={1} fontSize="12px">Subtitle</Field.Label>
+                            <Input placeholder="Enter the Subtitle" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" readOnly /> */}
+
+                            {/* <Field.Label color="black" pt={1} fontSize="12px">Description</Field.Label>
+                            <Input placeholder="Enter the Description" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" readOnly /> */}
                            <Field.Label color="black" pt={1} fontSize="12px">Image</Field.Label>
-                            <Image src={img} w="100%" maxH="150px" objectFit="contain" />
+                            <HStack w="fit-content" flexWrap={'wrap'}>
+                                {localData.images.map((img: any) => (
+                                    img.type === 'image' ? (
+                                        <Image
+                                            key={img.id}
+                                            src={`${APIURL}${img.image_name}`}
+                                            w="30%"
+                                            maxH="150px"
+                                            objectFit="contain"
+                                        />
+                                    ) : (
+                                        <video
+                                            key={img.id}
+                                            width="45%"
+                                            height="50"
+                                            controls
+                                        >
+                                            <source src={`${APIURL}${img.image_name}`} type="video/mp4" />
+                                        </video>
+                                    )
+                                ))}
+                            </HStack>
+
+                            {/* <Image src={img} w="100%" maxH="150px" objectFit="contain" /> */}
                        </Field.Root>
                    </Stack>
                </DialogBody>
--- a/src/Pages/ManageUsers/DeactivatedAccounts/DeactivatedAccounts.tsx
+++ b/src/Pages/ManageUsers/DeactivatedAccounts/DeactivatedAccounts.tsx
@@ -1,37 +1,129 @@
-import { Box, HStack, Input, Text } from "@chakra-ui/react";
+import { Box, HStack, Text } from "@chakra-ui/react";
 import MainFrame from "../../../components/MainFrame";
 import DataTable from "../../../components/DataTable";
 import { Switch } from "../../../components/ui/switch";
-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 { useGetContactQuery } from "../../../Redux/Service/deactivated.account.service";
+import { useEffect, useState } from "react";
+import { Spinner } from "../../../components/Sipnner/Spinner";
+import { useGetDeactivateUserQuery, useUserDeactivateToggleMutation } from "../../../Redux/Service/manage.user";
+import SearchComponent from "../../../components/SearchComponent";
+import { Toaster, toaster } from "../../../components/ui/toaster";
+import { delay } from "../../../components/Utils";

 const tableHeadRow = [
  "Sr. No",
  "First Name",
  "Last Name",
-  "Company name",
+  "User Type",
  "Activate/Deactivate",
 ];

-const manageUser: any[] = [
-  ...Array.from({ length: 12 }, (_, i) => ({
-    "Sr. No": i + 1,
-    "First Name": "Ritesh",
-    "Last Name": "akanksha@gmail.com",
-    "Company name": "9876543210",
+const DeactivatedAccounts = () => {
+  const [currentPage, setCurrentPage] = useState(1);
+  const { data, isLoading, refetch, isError, isFetching } = useGetDeactivateUserQuery(currentPage);
+  const [localData, setLocalData] = useState<any[]>([]);
+  const [searchTerm, setSearchTerm] = useState("");
+  const [userDeactivateToggle] = useUserDeactivateToggleMutation()
+
+  useEffect(() => {
+    if (data) {
+      setLocalData((data as any)?.data?.data || []);
+    }
+  }, [data]);
+
+  const handlePageChange = (page: number) => {
+    setCurrentPage(page);
+  }
+
+  const filteredData = localData?.filter((agency) => {
+    const searchLower = searchTerm.toLowerCase();
+    const firstName = agency.first_name?.toLowerCase().includes(searchLower);
+    const lastName = agency.last_name?.toLowerCase().includes(searchLower);
+    // const email = agency.capital?.toLowerCase().includes(searchLower);
+    return firstName || lastName;
+  });
+
+  const handleToggle = async (agencyId: number, currentStatus: string) => {
+    const newStatus = currentStatus === '1' ? '0' : '1';
+
+    setLocalData((prevData) =>
+      prevData.map((agency) =>
+        agency.id === agencyId ? { ...agency, is_active: newStatus } : agency
+      )
+    );
+
+    try {
+      await userDeactivateToggle({ id: agencyId, is_active: newStatus }).unwrap();
+      toaster.create({
+        title: "Success",
+        description: "Status updated successfully",
+        type: "success",
+      });
+      await delay(500);
+      refetch()
+    } catch (error) {
+      console.error("Error updating privacy policy:", error);
+      setLocalData((prevData) =>
+        prevData.map((agency) =>
+          agency.id === agencyId ? { ...agency, is_active: currentStatus } : agency
+        )
+      );
+    }
+  }
+
+  const manageUser = filteredData?.map((agency: any, index: number) => ({
+    "Sr. No": index + 1,
+    "First Name": agency?.first_name,
+    "Last Name": agency?.last_name,
+    "User Type": agency?.principal_type_xid === 3 ? "JobSeeker" : "Recruiter",
    "Activate/Deactivate": (
-      <Box display={'flex'} justifyContent={'center'}>
-        <Switch size={'sm'} colorPalette={'teal'} />
+      <Box display={"flex"} justifyContent={"center"}>
+        <Switch
+          size={"sm"}
+          colorPalette={"teal"}
+          checked={agency.is_active === true}
+          onChange={() => handleToggle(agency.id, agency.is_active ? "1" : "0")}
+        />
      </Box>
    ),
-  })),
-];
+  }));
+
+  if (isLoading) {
+    return (
+      <MainFrame>
+        <Box
+          display="flex"
+          justifyContent="center"
+          alignItems="center"
+          height="100%"
+        >
+          <Spinner />
+        </Box>
+      </MainFrame>
+    );
+  }
+
+  // if (isError) {
+  //   return (
+  //     <MainFrame>
+  //       <Box
+  //         display="flex"
+  //         justifyContent="center"
+  //         alignItems="center"
+  //         height="100%"
+  //       >
+  //         <Text>Error loading data</Text>
+  //       </Box>
+  //     </MainFrame>
+  //   );
+  // }

-const DeactivatedAccounts = () => {
  return (
    <MainFrame>
      <Box>
-      <HStack
+        <HStack
          w={"100%"}
          justifyContent={"space-between"}
          mb={4}
@@ -39,38 +131,36 @@ const DeactivatedAccounts = () => {
          px={3}
        >
          <Text as={"span"} fontSize={"sm"} fontWeight={500} color={"#000"}>
-             Deactivated User Accounts
+            Deactivated User Accounts
          </Text>

          <HStack>
-            <InputGroup
-              startElement={
-                <LuSearch fontSize={"xs"}  style={{position:'relative',left:'10px'}} />
-              }
-              color={"#000"}
-            >
-              <Input
-                p={4}
-                w={300}
-                bg={"#fff"}
-                colorPalette={"blue"}
-                _focus={{ border: "1px solid #02A0A0" }}
-                rounded={"md"}
-                size={"2xs"}
-                fontSize={"2sm"}
-                placeholder="Search..."
-                bgColor={'#EEEEEE'}
-                ps={8}
-              />
-            </InputGroup>
+            <SearchComponent
+              value={searchTerm}
+              onChange={(value) => {
+                setSearchTerm(value);
+                // setCurrentPage(1);
+                refetch()
+              }}
+            />
          </HStack>
        </HStack>
        <DataTable
          sortableColumns={["Name", "Registration Date "]}
          tableHeadRow={tableHeadRow}
          data={manageUser}
+          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>
+      <Toaster />
    </MainFrame>
  );
 };
--- a/src/Pages/ManageUsers/RegisterUsers/AddRegisterUsers.tsx
+++ b/src/Pages/ManageUsers/RegisterUsers/AddRegisterUsers.tsx
@@ -1,4 +1,4 @@
-import { Field, Input, Stack } from "@chakra-ui/react";
+import { Box, Field, Input, Stack } from "@chakra-ui/react";
 import {
  DialogActionTrigger,
  DialogBody,
@@ -12,8 +12,32 @@ import {
 } from "../../../components/ui/dialog";
 import { Button } from "../../../components/ui/button";
 import { IoMdAdd } from "react-icons/io";
+import { useState } from "react";
+// import { useCreateUserMutation } from "../../../Redux/Service/manage.user";
+// import { useState } from "react";

 function AddRegisterUsers() {
+  // const [createUser] = useCreateUserMutation();
+  const [userType, setUserType] = useState<number | "">("");
+
+  const [user, setUser] = useState<{
+    principal_type_xid: number;
+    principal_source_xid: number | "";
+    first_name: string;
+    last_name: string;
+    gender: string;
+    date_of_birth: string;
+    language_name: string[];
+  }>({
+    principal_type_xid: 1,
+    principal_source_xid: userType,
+    first_name: '',
+    last_name: '',
+    gender: '',
+    date_of_birth: '',
+    language_name: [],
+  });
+
  return (
    <DialogRoot placement="center">
      <DialogTrigger asChild>
@@ -23,13 +47,13 @@ function AddRegisterUsers() {
      </DialogTrigger>

      <DialogContent
-         bg={"#fff"}
-         w={{ base: '90%', md: '400px' }}
-         height={'80vh'}
-         overflow={'scroll'}
-         overflowX="hidden" 
-         p={3} // Reduced padding
-         bgSize={'md'}
+        bg={"#fff"}
+        w={{ base: '90%', md: '400px' }}
+        height={'80vh'}
+        overflow={'scroll'}
+        overflowX="hidden"
+        p={3} // Reduced padding
+        bgSize={'md'}
      >
        <DialogHeader bg="white" >
          <DialogTitle alignSelf="center" color="black" fontSize="14px">
@@ -44,42 +68,110 @@ function AddRegisterUsers() {
                First Name
              </Field.Label>
              <Input
-               bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px"
+                bgColor="#EEEEEE" 
+                color="black" 
+                border="none" 
+                pl={1} 
+                fontSize="12px" 
+                height="30px"
+                value={user.first_name}
+                onChange={(e) => setUser({ ...user, first_name: e.target.value })}
              />

              <Field.Label color="black" pt={1} fontSize="12px">
                Last Name
              </Field.Label>
              <Input
-               bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px"
+                bgColor="#EEEEEE" 
+                color="black" 
+                border="none" 
+                pl={1} 
+                fontSize="12px" 
+                height="30px"
+                value={user.last_name}
+                onChange={(e) => setUser({ ...user, last_name: e.target.value })}
              />

              <Field.Label color="black" pt={1} fontSize="12px">
                Gender
              </Field.Label>
              <Input
-                bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px"
+                bgColor="#EEEEEE" 
+                color="black" 
+                border="none" 
+                pl={1} 
+                fontSize="12px" 
+                height="30px"
+                value={user.gender}
+                onChange={(e) => setUser({ ...user, gender: e.target.value })}
              />

              <Field.Label color="black" pt={1} fontSize="12px">
                DOB
              </Field.Label>
              <Input
-               bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px"
+                bgColor="#EEEEEE" 
+                color="black" 
+                border="none" 
+                pl={1} 
+                fontSize="12px" 
+                height="30px" 
+                type="date"
+                value={user.date_of_birth}
+                onChange={(e) => setUser({ ...user, date_of_birth: e.target.value })}
              />

-              <Field.Label color="black" pt={1} fontSize="12px">
+              <Field.Root>
+                <Field.Label color="black" pt={1} fontSize="12px">Select User Type</Field.Label>
+                <Box bgColor="#EEEEEE" borderRadius="md" p={1}>
+                  <select
+                    style={{
+                      width: "100%",
+                      background: "transparent",
+                      color: "black",
+                      border: "none",
+                      fontSize: "12px",
+                      height: "30px",
+                      outline: "none",
+                    }}
+                    value={userType}
+                    onChange={(e) => setUserType(Number(e.target.value))}
+                  >
+                    <option value="">Select User Type</option>
+                    <option value="2">Recruiter</option>
+                    <option value="3">Jobseeker</option>
+                  </select>
+                </Box>
+              </Field.Root>
+
+              {/* <Field.Label color="black" pt={1} fontSize="12px">
                OTP Verified
              </Field.Label>
              <Input
               bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px"
-              />
+              /> */}

              <Field.Label color="black" pt={1} fontSize="12px">
                Language
              </Field.Label>
              <Input
-               bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px"
+                bgColor="#EEEEEE" 
+                color="black" 
+                border="none" 
+                pl={1} 
+                fontSize="12px" 
+                height="30px"
+                value={user.language_name.join(", ")} // display as comma-separated string
+                onChange={(e) =>
+                  setUser({
+                    ...user,
+                    language_name: e.target.value
+                      .split(",")
+                      .map(lang => lang.trim())
+                      .filter(Boolean), // remove empty strings
+                  })
+                }
+
              />
            </Field.Root>
          </Stack>
--- a/src/Pages/ManageUsers/RegisterUsers/EditRegisterUsers.tsx
+++ b/src/Pages/ManageUsers/RegisterUsers/EditRegisterUsers.tsx
@@ -1,7 +1,6 @@
-import { MdOutlineRemoveRedEye } from "react-icons/md";
-import { Field, Icon, Input, Stack } from "@chakra-ui/react";
+// import { MdOutlineRemoveRedEye } from "react-icons/md";
+import { Box, Field, HStack, Input, Stack } from "@chakra-ui/react";
 import {
-  DialogActionTrigger,
  DialogBody,
  DialogCloseTrigger,
  DialogContent,
@@ -11,96 +10,336 @@ import {
  DialogTitle,
  DialogTrigger,
 } from "../../../components/ui/dialog";
-import { BiEdit } from "react-icons/bi";
+// import { BiEdit } from "react-icons/bi";
 import { Button } from "../../../components/ui/button";
-import { TbEdit } from "react-icons/tb";
+// import { TbEdit } from "react-icons/tb";
+import Edit from "../../../components/ActionIcons/Edit";
+import { UserData, useUpdateUserMutation } from "../../../Redux/Service/manage.user";
+import { useState } from "react";
+import { Toaster, toaster } from "../../../components/ui/toaster";
+
+interface UserPayload {
+  id: number;
+  principal_type_xid: number;
+  principal_source_xid: number;
+  first_name: string;
+  last_name: string;
+  gender: string;
+  date_of_birth: string | null;
+  language_xid: number; // ✅ Always an array
+}
+
+export interface UserFormData {
+  id: number;
+  principal_type_xid: number;
+  first_name: string;
+  last_name: string;
+  phone_number: string;
+  gender: string;
+  date_of_birth: string;
+  is_active: boolean;
+  principal_type: {
+    id: number;
+    principal_type_title: string;
+  };
+  principle_language_linkss: {
+    id?: number;
+    iam_principal_xid?: number;
+    language_xid: number;
+  };
+}
+
+function EditRegisterUsers({ data, refetch }: { data: UserData, refetch: () => void }) {
+  const [isOpen, setIsOpen] = useState(false);
+  const transformToFormData = (data: UserData): UserFormData => ({
+    ...data,
+    principle_language_linkss: {
+      ...data.principle_language_linkss,
+      language_xid: data.principle_language_linkss.language_xid, // wrap in array
+    },
+  });
+  const [formData, setFormData] = useState<UserFormData>(transformToFormData(data));
+  // const [formData, setFormData] = useState<UserData>({
+  //   id: data?.id,
+  //   first_name: data?.first_name || '',
+  //   last_name: data?.last_name || '',
+  //   principal_type_xid: data?.principal_type_xid,
+  //   phone_number: data?.phone_number || '',
+  //   gender: data?.gender || '',
+  //   date_of_birth: data?.date_of_birth || '',
+  //   principal_type: data?.principal_type,
+  //   is_active: data?.is_active ?? true,
+  //   principle_language_linkss: {
+  //     ...data?.principle_language_linkss,
+  //     language_xid: Array.isArray(data?.principle_language_linkss?.language_xid)
+  //       ? data.principle_language_linkss.language_xid
+  //       : [data?.principle_language_linkss?.language_xid].filter(Boolean),
+  //   },
+  //   // principle_language_linkss: data?.principle_language_linkss ?? [],
+  // });
+  const [updateUser, { isLoading }] = useUpdateUserMutation();
+
+  const handleOpenModal = () => {
+    setIsOpen(true);
+  };
+
+  const handleSubmit = async (event: React.FormEvent) => {
+    event.preventDefault();
+    if (formData.first_name === '' || formData.last_name === '' || formData.phone_number === '' || formData.gender === '' || formData.date_of_birth === '') {
+      toaster.create({
+        title: "Error",
+        description: "Input fields cannot be empty",
+        type: "error",
+      });
+      return;
+    }
+
+    // const languageData = formData?.principle_language_linkss?.language_xid;
+
+    const payload: UserPayload = {
+      id: formData?.id,
+      principal_type_xid: formData?.principal_type_xid,
+      principal_source_xid: formData?.id,
+      first_name: formData?.first_name,
+      last_name: formData?.last_name,
+      gender: formData?.gender,
+      date_of_birth: formData?.date_of_birth,
+      // language_xid: languageData,
+      language_xid: formData.principle_language_linkss?.language_xid
+        ? formData.principle_language_linkss.language_xid
+        : formData.principle_language_linkss?.language_xid,
+
+    };
+
+    // console.log('payload', payload)
+
+    try {
+      const response = await updateUser(payload).unwrap();
+      if (response?.status === "success") {
+        toaster.create({
+          title: "Success",
+          description: "Country updated successfully",
+          type: "success",
+        });
+        setIsOpen(false);
+        refetch()
+      } else {
+        toaster.create({
+          title: "Error",
+          description: "Failed to update Country",
+          type: "error",
+        });
+      }
+    } catch (error: any) {
+      console.error("Error updating template:", error);
+      // alert("Failed to update template");
+      toaster.create({
+        title: "Error",
+        description: error ? `${error?.data.message}` : "Something went wrong",
+        type: "error",
+      });
+    }
+  };

-function EditRegisterUsers() {
  return (
-    <DialogRoot placement="center">
-      <DialogTrigger asChild>
-            <Icon
-            cursor={"pointer"}
-            p={0.5}
-            _hover={{ bg: "#00000015" }}
-            rounded={"md"}
-            boxSize={5}
-            // color={iconColor && iconColor}
-          >
-            <TbEdit />
-          </Icon>
-      </DialogTrigger>
+    <>
+      <DialogRoot placement="center" key={formData.id} open={isOpen} onOpenChange={({ open }) => setIsOpen(open)}>
+        <DialogTrigger asChild>
+          {/* <Span>
+          <Edit />
+        </Span> */}
+          <Button bg="transparent" color={"black"} h={"18px"} onClick={handleOpenModal}><Edit /></Button>
+        </DialogTrigger>

-      <DialogContent
-        bg={"#fff"}
-        w={{ base: '90%', md: '400px' }}
-        height={'80vh'}
-        overflow={'scroll'}
-        overflowX="hidden" 
-        p={3} // Reduced padding
-        bgSize={'md'}
-      >
-        <DialogHeader bg="white" p={0}>
-          <DialogTitle alignSelf="center" color="black" fontSize="14px">
-            Edit user Accounts
-          </DialogTitle>
-        </DialogHeader>
+        <DialogContent
+          bg={"#fff"}
+          w={{ base: "90%", md: "400px" }}
+          height={"80vh"}
+          overflow={"scroll"}
+          overflowX="hidden"
+          p={3} // Reduced padding
+          bgSize={"md"}
+        >
+          <DialogHeader bg="white" p={0}>
+            <DialogTitle alignSelf="center" color="black" fontSize="14px">
+              Edit user Accounts
+            </DialogTitle>
+          </DialogHeader>

-        <DialogBody bg="white">
-          <Stack py={3}>
-            <Field.Root>
-              <Field.Label color="black" pt={1} fontSize="12px">
-                First Name
-              </Field.Label>
-              <Input
-                 bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px"
-              />
+          <DialogBody bg="white">
+            <Stack py={3}>
+              <Field.Root>
+                <Field.Label color="black" pt={1} fontSize="12px">
+                  First Name
+                </Field.Label>
+                <Input
+                  bgColor="#EEEEEE"
+                  color="black"
+                  border="none"
+                  pl={1}
+                  fontSize="12px"
+                  height="30px"
+                  value={formData.first_name}
+                  onChange={(e) => setFormData({ ...formData, first_name: e.target.value })}
+                />

-              <Field.Label color="black" pt={1} fontSize="12px">
-                Last Name
-              </Field.Label>
-              <Input
-                 bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px"
-              />
+                <Field.Label color="black" pt={1} fontSize="12px">
+                  Last Name
+                </Field.Label>
+                <Input
+                  bgColor="#EEEEEE"
+                  color="black"
+                  border="none"
+                  pl={1}
+                  fontSize="12px"
+                  height="30px"
+                  value={formData.last_name}
+                  onChange={(e) => setFormData({ ...formData, last_name: e.target.value })}
+                />

-              <Field.Label color="black" pt={1} fontSize="12px">
-                Gender
-              </Field.Label>
-              <Input
-                 bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px"
-              />
+                <Field.Label color="black" pt={1} fontSize="12px">
+                  Gender
+                </Field.Label>
+                <Input
+                  bgColor="#EEEEEE"
+                  color="black"
+                  border="none"
+                  pl={1}
+                  fontSize="12px"
+                  height="30px"
+                  value={formData.gender}
+                  onChange={(e) => setFormData({ ...formData, gender: e.target.value })}
+                />

-              <Field.Label color="black" pt={1} fontSize="12px">
-                DOB
-              </Field.Label>
-              <Input
-                 bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px"
-              />
+                <Field.Label color="black" pt={1} fontSize="12px">
+                  DOB
+                </Field.Label>
+                <Input
+                  bgColor="#EEEEEE"
+                  color="black"
+                  border="none"
+                  pl={1}
+                  fontSize="12px"
+                  height="30px"
+                  value={formData.date_of_birth ? new Date(formData.date_of_birth).toLocaleDateString('en-GB').replace(/\//g, '-') : 'N/A'}
+                  onChange={(e) => setFormData({ ...formData, date_of_birth: e.target.value })}
+                  disabled={formData.principal_type_xid === 2 ? true : false}
+                />

-              <Field.Label color="black" pt={1} fontSize="12px">
-                OTP Verified
-              </Field.Label>
-              <Input
-                 bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px"
-              />
+                <Field.Label color="black" pt={1} fontSize="12px">
+                  Mobile Number
+                </Field.Label>
+                <Input
+                  bgColor="#EEEEEE"
+                  color="black"
+                  border="none"
+                  pl={1}
+                  fontSize="12px"
+                  height="30px"
+                  value={formData.phone_number || ''}
+                  onChange={(e) => setFormData({ ...formData, phone_number: e.target.value })}
+                />

-              <Field.Label color="black" pt={1} fontSize="12px">
-                Language
-              </Field.Label>
-              <Input
-                 bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px"
-              />
-            </Field.Root>
-          </Stack>
-        </DialogBody>
-        <DialogFooter mt={5}>
-          <DialogActionTrigger asChild>
-            <Button rounded={'md'} w={"100%"} size={'sm'} bg={'#02A0A0'}>Save</Button>
-          </DialogActionTrigger>
-        </DialogFooter>
-        <DialogCloseTrigger color="black" />
-      </DialogContent>
-    </DialogRoot>
+                <Field.Label color="black" pt={1} fontSize="12px">
+                  Type Of User
+                </Field.Label>
+                {/* <Input
+                  bgColor="#EEEEEE"
+                  color="black"
+                  border="none"
+                  pl={1}
+                  fontSize="12px"
+                  height="30px"
+                  value={formData.principal_type?.principal_type_title || 'N/A'}
+                  onChange={(e) => setFormData({ ...formData, principal_type: { ...formData.principal_type, principal_type_title: e.target.value } })}
+                /> */}
+
+                <Box>
+                  <select
+                    style={{
+                      width: "100%",
+                      background: "transparent",
+                      color: "black",
+                      border: "none",
+                      fontSize: "12px",
+                      height: "30px",
+                      outline: "none",
+                    }}
+                    value={formData.principal_type_xid?.toString() || 'N/A'}
+                    onChange={(e) => setFormData({ ...formData, principal_type_xid: Number(e.target.value) })}
+                  >
+                    {/* <option value="">Select User Type</option> */}
+                    <option value="2">Recruiter</option>
+                    <option value="3">Jobseeker</option>
+                  </select>
+                </Box>
+
+                <Field.Label color="black" pt={1} fontSize="12px">
+                  Default Language
+                </Field.Label>
+                {/* <Input
+                  bgColor="#EEEEEE"
+                  color="black"
+                  border="none"
+                  pl={1}
+                  fontSize="12px"
+                  height="30px"
+                  value={formData?.principle_language_linkss?.language_xid || 'N/A'}
+                  onChange={(e) => setFormData({
+                    ...formData, principle_language_linkss: {
+                      ...formData?.principle_language_linkss, language_xid: e.target.value
+                        .split(",")
+                        .map(lang => lang.trim())
+                        .filter(Boolean)
+                    }
+                  })}
+                /> */}
+
+                <HStack>
+                  <select
+                    style={{
+                      width: "100%",
+                      background: "transparent",
+                      color: "black",
+                      border: "none",
+                      fontSize: "12px",
+                      height: "30px",
+                      outline: "none",
+                    }}
+                    value={formData?.principle_language_linkss?.language_xid || ""}
+                    onChange={(e) => {
+                      const value = Number(e.target.value);
+                      setFormData({
+                        ...formData,
+                        principle_language_linkss: {
+                          ...formData?.principle_language_linkss,
+                          language_xid: value,
+                        },
+                      });
+                    }}
+                  >
+                    <option value="1">English</option>
+                    <option value="2">Hindi</option>
+                    <option value="3">Marathi</option>
+                    <option value="4">Telgu</option>
+                    <option value="5">Tamil</option>
+                    <option value="6">Bengali</option>
+                    <option value="7">Odia</option>
+                  </select>
+                </HStack>
+              </Field.Root>
+            </Stack>
+          </DialogBody>
+          <DialogFooter mt={5}>
+            <Button rounded={"md"} w={"100%"} size={"sm"} bg={"#02A0A0"} onClick={handleSubmit} disabled={isLoading}>
+              Save
+            </Button>
+          </DialogFooter>
+          <DialogCloseTrigger color="black" />
+        </DialogContent>
+      </DialogRoot >
+      <Toaster />
+    </>
  );
 }

--- a/src/Pages/ManageUsers/RegisterUsers/RegisterUsers.tsx
+++ b/src/Pages/ManageUsers/RegisterUsers/RegisterUsers.tsx
@@ -1,61 +1,204 @@
-import { Box, HStack, Image, Input, Text } from "@chakra-ui/react";
+import {
+  Box, HStack,
+  Image,
+  // Image, 
+  Text,
+} from "@chakra-ui/react";
 import MainFrame from "../../../components/MainFrame";
-import AlertDailog from "../../../components/AlertDailog";
-import { RiDeleteBin5Line } from "react-icons/ri";
+// import AlertDailog from "../../../components/AlertDailog";
+// import { RiDeleteBin5Line } from "react-icons/ri";
 import DataTable from "../../../components/DataTable";
 import { Switch } from "../../../components/ui/switch";
-import { InputGroup } from "../../../components/ui/input-group";
-import { LuSearch } from "react-icons/lu";
 import ViewRegisterUsers from "./ViewRegisterUsers";
 import EditRegisterUsers from "./EditRegisterUsers";
-import AddRegisterUsers from "./AddRegisterUsers";
+// import AddRegisterUsers from "./AddRegisterUsers";
+import { useEffect, useState } from "react";
+import { useDeleteUserMutation, useGetManageUserQuery, UserData, useUserToggleMutation } from "../../../Redux/Service/manage.user";
+import SearchComponent from "../../../components/SearchComponent";
+import AlertDailog from "../../../components/AlertDailog";
+import { toaster } from "../../../components/ui/toaster";
+import Delete from "../../../components/ActionIcons/Delete";
+import { delay } from "../../../components/Utils";
+// import Delete from "../../../components/ActionIcons/Delete";

 const tableHeadRow = [
  "Sr. No",
  "First Name",
+  "Last Name",
  "Mobile Number",
  "Gender",
  "DOB",
  "Type Of User",
-  "Language",
-  "Activate/Deactivate",
+  "Default Language",
+  "Active/Deactive",
  "Action",
 ];

-const registerUser: any[] = [
-  ...Array.from({ length: 12 }, (_, i) => ({
-    "Sr. No": i + 1,
-    "First Name": "Ritesh",
-    "Mobile Number": "akanksha@gmail.com",
-    "Gender": "9876543210",
-    "DOB": "Female",
-    "Type Of User": "15-01-1990",
-    "Language": "Mumbai",
-    "Activate/Deactivate": (
-      <Box>
-        <Switch size={'sm'} colorPalette={'teal'} />
-      </Box>
-    ),
+// const registerUser: any[] = [
+//   ...Array.from({ length: 12 }, (_, i) => ({
+//     "Sr. No": i + 1,
+//     "First Name": "Ritesh",
+//     "Mobile Number": "akanksha@gmail.com",
+//     "Gender": "9876543210",
+//     "DOB": "Female",
+//     "Type Of User": "15-01-1990",
+//     "Language": "Mumbai",
+//     "Activate/Deactivate": (
+//       <Box>
+//         <Switch size={'sm'} colorPalette={'teal'} />
+//       </Box>
+//     ),
+//     "Action": (
+//       <HStack justifyContent="center">
+//         <ViewRegisterUsers />
+//         <EditRegisterUsers />
+//         {/* <RiDeleteBin5Line style={{ cursor: "pointer" }} /> */}
+//         {/* <AlertDailog
+//           AltertTiggerIcon={() =><Delete /> } // Pass as function
+//           alertText="Delete Users"
+//           alertIcon={<Image src={"DeleteIcon"} h={"39px"} />}
+//           alertCaption="Are You Sure You Want To Delete This User ?"
+//           onConfirm={() => {
+//             console.log("User deleted:", i + 1);
+//           }}
+//         /> */}
+//       </HStack>
+//     ),
+//   })),
+// ];
+
+const RegisterUsers = () => {
+  const [currentPage, setCurrentPage] = useState(1);
+  const { data, refetch, isFetching, isError } = useGetManageUserQuery(currentPage)
+  const [localData, setLocalData] = useState<any[]>([]);
+  const [searchTerm, setSearchTerm] = useState("");
+  const [userToggle] = useUserToggleMutation()
+  const [deleteFaqPost] = useDeleteUserMutation()
+  const [deleteModal, setDeleteModal] = useState(false)
+  const [selectedFaqId, setSelectedFaqId] = useState<number | null>(null);
+
+  console.log("Register Users Data", data?.data.data);
+
+  useEffect(() => {
+    if (data) {
+      setLocalData(data?.data.data);
+    }
+  }, [data]);
+
+  const handlePageChange = (page: number) => {
+    setCurrentPage(page);
+  }
+
+  const filteredData = localData?.filter((agency) => {
+    const searchLower = searchTerm.toLowerCase();
+    const firstName = agency.first_name?.toLowerCase().includes(searchLower);
+    // const email = agency.capital?.toLowerCase().includes(searchLower);
+    return firstName;
+  });
+
+  const handleToggle = async (agencyId: number, currentStatus: string) => {
+    const newStatus = currentStatus === '1' ? '0' : '1';
+
+    setLocalData((prevData) =>
+      prevData.map((agency) =>
+        agency.id === agencyId ? { ...agency, is_active: newStatus } : agency
+      )
+    );
+
+    try {
+      await userToggle({ id: agencyId, is_active: newStatus }).unwrap();
+      toaster.create({
+        title: "Success",
+        description: "Status updated successfully",
+        type: "success",
+      });
+      await delay(500);
+      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 handleDeleteFaq = async (faqId: number) => {
+    try {
+      const response = await deleteFaqPost({ id: faqId }).unwrap();
+      if (response?.status === "success") {
+        toaster.create({
+          title: "Success",
+          description: "User deleted successfully",
+          type: "success",
+        });
+        refetch()
+        console.log("User deleted successfully:", response);
+      }
+      // Optionally, refetch data or update state after deletion
+    } catch (error) {
+      console.error("Error deleting User:", error);
+      toaster.create({
+        title: "Error",
+        description: "Something went wrong",
+        type: "error",
+      });
+    }
+  };
+
+  const managepost = filteredData?.flatMap((agency: UserData, index: number) => ({
+    "Sr. No": (currentPage - 1) * (data?.data.per_page ?? 0) + index + 1,
+    "First Name": agency.first_name,
+    "Last Name": agency.last_name,
+    "Mobile Number": agency.phone_number,
+    "Gender": agency.gender,
+    "DOB": agency.date_of_birth ? new Date(agency.date_of_birth).toLocaleDateString('en-GB').replace(/\//g, '-') : 'N/A',
+    "Type Of User": agency.principal_type?.principal_type_title || 'N/A',
+    "Default Language": agency?.principle_language_linkss?.language?.language_name,
+    "Active/Deactive": agency.is_active === true ? 'Active' : 'Inactive',
    "Action": (
      <HStack justifyContent="center">
-        <ViewRegisterUsers />
-        <EditRegisterUsers />
-        {/* <RiDeleteBin5Line style={{ cursor: "pointer" }} /> */}
+        <EditRegisterUsers
+          data={agency}
+          refetch={refetch}
+        />
+        <ViewRegisterUsers data={agency} />
+        <Box>
+          <Switch
+            colorPalette={'teal'}
+            size={"xs"}
+            checked={agency.is_active === true}
+            onChange={() => handleToggle(agency.id, agency.is_active ? '1' : '0')}
+          />
+        </Box>
        <AlertDailog
-          AltertTiggerIcon={RiDeleteBin5Line}
-          alertText="Delete Users"
+          isOpen={deleteModal}
+          AltertTiggerIcon={() => <Delete onClick={() => {
+            setSelectedFaqId(agency.id);
+            setDeleteModal(true)
+          }} />}
+          alertText="Do you want to delete user?"
          alertIcon={<Image src={"DeleteIcon"} h={"39px"} />}
-          alertCaption="Are You Sure You Want To Delete This User ?"
+          alertCaption="are you sure you want to delete ?"
+          onClose={() => setDeleteModal(false)}
          onConfirm={() => {
-            console.log("User deleted:", i + 1);
+            // console.log("Deleting FAQ with ID:", selectedFaqId); // Correct ID
+            if (selectedFaqId) {
+              setDeleteModal(false);
+              handleDeleteFaq(selectedFaqId);
+            }
          }}
        />
      </HStack>
    ),
-  })),
-];
+  }))

-const RegisterUsers = () => {
  return (
    <MainFrame>
      <Box>
@@ -70,34 +213,31 @@ const RegisterUsers = () => {
            Register Users
          </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={"2xs"}
-                fontSize={"2sm"}
-                placeholder="Search..."
-                bgColor={'#EEEEEE'}
-                ps={8}
-              />
-            </InputGroup>
-            <AddRegisterUsers />
+          <HStack>
+            <SearchComponent
+              value={searchTerm}
+              onChange={(value) => {
+                setSearchTerm(value);
+                // setCurrentPage(1);
+                refetch()
+              }}
+            />
+            {/* <AddRegisterUsers /> */}
          </HStack>
        </HStack>
        <DataTable
          sortableColumns={["Name", "Registration Date "]}
          tableHeadRow={tableHeadRow}
-          data={registerUser}
+          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}
+          isLoading={isFetching}
+          isError={isError}
        />
      </Box>
    </MainFrame>
--- a/src/Pages/ManageUsers/RegisterUsers/ViewRegisterUsers.tsx
+++ b/src/Pages/ManageUsers/RegisterUsers/ViewRegisterUsers.tsx
@@ -1,5 +1,5 @@
-import { MdOutlineRemoveRedEye } from "react-icons/md";
-import { Field, Icon, Input, Stack } from "@chakra-ui/react";
+import { Field, Input, Span, Stack } from "@chakra-ui/react";
+import View from "../../../components/ActionIcons/View";
 import {
  DialogBody,
  DialogCloseTrigger,
@@ -9,31 +9,23 @@ import {
  DialogTitle,
  DialogTrigger,
 } from "../../../components/ui/dialog";
+import { UserData } from "../../../Redux/Service/manage.user";

-function ViewRegisterUsers() {
+function ViewRegisterUsers({ data }: { data: UserData }) {
  return (
    <DialogRoot placement="center">
      <DialogTrigger asChild>
-      <Icon
-            cursor={"pointer"}
-            p={0.5}
-            _hover={{ bg: "#00000015" }}
-            rounded={"md"}
-            boxSize={5}
-            // color={iconColor && iconColor}
-          >
-            <MdOutlineRemoveRedEye />
-          </Icon>
+        <Span><View /></Span>
      </DialogTrigger>

      <DialogContent
-         bg={"#fff"}
-         w={{ base: '90%', md: '400px' }}
-         height={'80vh'}
-         overflow={'scroll'}
-         overflowX="hidden" 
-         p={3} // Reduced padding
-         bgSize={'md'}
+        bg={"#fff"}
+        w={{ base: '90%', md: '400px' }}
+        height={'80vh'}
+        overflow={'scroll'}
+        overflowX="hidden"
+        p={3} // Reduced padding
+        bgSize={'md'}
      >
        <DialogHeader bg="white">
          <DialogTitle alignSelf="center" color="black" fontSize="14px">
@@ -48,14 +40,24 @@ function ViewRegisterUsers() {
                First Name
              </Field.Label>
              <Input
-                bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+                value={data?.first_name || ''}
              />

              <Field.Label color="black" pt={1} fontSize="12px">
                Last Name
              </Field.Label>
              <Input
-                bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none" pl={1}
+                fontSize="12px" height="30px"
+                value={data?.last_name || ''}
              />

              <Field.Label color="black" pt={1} fontSize="12px">
@@ -63,6 +65,7 @@ function ViewRegisterUsers() {
              </Field.Label>
              <Input
                bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px"
+                value={data?.gender || ''}
              />

              <Field.Label color="black" pt={1} fontSize="12px">
@@ -70,20 +73,41 @@ function ViewRegisterUsers() {
              </Field.Label>
              <Input
                bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px"
+                value={data?.date_of_birth ? new Date(data.date_of_birth).toLocaleDateString('en-GB').replace(/\//g, '-') : 'N/A'}
              />

              <Field.Label color="black" pt={1} fontSize="12px">
-                OTP Verified
+                Mobile Number
              </Field.Label>
              <Input
-                bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+                value={data?.phone_number || ''}
              />

              <Field.Label color="black" pt={1} fontSize="12px">
-                Language
+                Type Of User
+              </Field.Label>
+              <Input
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+                value={data?.principal_type?.principal_type_title || 'N/A'}
+              />
+
+              <Field.Label color="black" pt={1} fontSize="12px">
+                Default Language
              </Field.Label>
              <Input
                bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px"
+                value={data?.principle_language_linkss?.language?.language_name || 'N/A'}
              />
            </Field.Root>
          </Stack>
--- a/src/Pages/MasterModule/AgencyMaster/AgencyMaster.tsx
+++ b/src/Pages/MasterModule/AgencyMaster/AgencyMaster.tsx
@@ -1,13 +1,16 @@
-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 EditAgencyMaster from "./EditAgencyMaster";
-import ViewAgencyAddModel from "./ViewAgencyAddModel";
+// import ViewAgencyAddModel from "./ViewAgencyAddModel";
 import ViewAgencyMaster from "./ViewAgencyMaster";
-
+import { useAgencyMasterToggleMutation, useGetAgencyMasterQuery } from "../../../Redux/Service/agency.master.module.service";
+import { useEffect, useState } from "react";
+import SearchComponent from "../../../components/SearchComponent";
+import { useDebounce } from "../../../components/Hooks/useDebounce";
+import { toaster, Toaster } from "../../../components/ui/toaster";
+import { delay } from "../../../components/Utils";

 // table data

@@ -20,33 +23,139 @@ const tableHeadRow = [
  "Registered Office Address",
  "Website/Domain",
  "GST no.",
+  "Agency Status",
  "Action"
-  
+
 ];

-const managepost: any[] = [
-  ...Array.from({ length: 12 }, (_, i) => ({
-    "Sr. No": i + 1,
-    "Agency Name": "Lorem Ipsum",
-    "RC no.": "Lorem Ipsum",
-    "State": "Lorem Ipsum",
-    "RC Status": "Active",
-    "Registered Office Address": "Lorem Ipsum",
-    "Website/Domain": "Lorem Ipsum",
-    "GST no.": "Lorem Ipsum",
-    "Action": (
-      <HStack justifyContent="center">
-        <ViewAgencyMaster/>
-        <EditAgencyMaster />
-        <Box>
-          <Switch colorPalette={'teal'} size={"xs"}/>
-        </Box>
-      </HStack>
-    ),
-  })),
-];
+// const managepost: any[] = [
+//   ...Array.from({ length: 12 }, (_, i) => ({
+//     "Sr. No": i + 1,
+//     "Agency Name": "Lorem Ipsum",
+//     "RC no.": "Lorem Ipsum",
+//     "State": "Lorem Ipsum",
+//     "RC Status": "Active",
+//     "Registered Office Address": "Lorem Ipsum",
+//     "Website/Domain": "Lorem Ipsum",
+//     "GST no.": "Lorem Ipsum",
+//     "Action": (
+//       <HStack justifyContent="center">
+//         <ViewAgencyMaster/>
+//         <EditAgencyMaster />
+//         <Box>
+//           <Switch colorPalette={'teal'} size={"xs"}/>
+//         </Box>
+//       </HStack>
+//     ),
+//   })),
+// ];

 const AgencyMaster = () => {
+  const [currentPage, setCurrentPage] = useState(1);
+  const [agencyMasterToggle] = useAgencyMasterToggleMutation()
+  const [localData, setLocalData] = useState<any[]>([]);
+  const [searchTerm, setSearchTerm] = useState("");
+  const debouncedSearchTerm = useDebounce(searchTerm, 500);
+  const queryArgs = debouncedSearchTerm ? { page: currentPage, search: debouncedSearchTerm } : { page: currentPage };
+  const { data, refetch, isError, isFetching } = useGetAgencyMasterQuery(queryArgs)
+
+  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 agencyMasterToggle({ id: agencyId, is_active: newStatus }).unwrap();
+      toaster.create({
+        title: "Success",
+        description: "Status updated successfully",
+        type: "success",
+      });
+      await delay(500);
+      refetch()
+    } catch (error) {
+      console.error("Error updating privacy policy:", error);
+      setLocalData((prevData) =>
+        prevData.map((agency) =>
+          agency.id === agencyId ? { ...agency, is_active: currentStatus } : agency
+        )
+      );
+      toaster.create({
+        title: "Error",
+        description: "Please try again later",
+        type: "error",
+      });
+    }
+  };
+
+  const handlePageChange = (page: number) => {
+    setCurrentPage(page);
+  };
+
+  const handleSearchChange = (value: string) => {
+    setSearchTerm(value);
+    setCurrentPage(1);
+  };
+
+  const filteredData = localData?.filter((agency) =>
+    agency?.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+    agency?.rc_number.toLowerCase().includes(searchTerm.toLowerCase()) ||
+    agency?.state.toLowerCase().includes(searchTerm.toLowerCase()) ||
+    agency?.registered_office.toLowerCase().includes(searchTerm.toLowerCase()) ||
+    agency?.domain_name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+    agency?.gst_number.toLowerCase().includes(searchTerm.toLowerCase())
+  );
+
+  // const activeCount = filteredData?.filter((a: any) => a.is_active === 1).length ?? 0;
+
+  const managepost = filteredData?.map((agency: any, index: number) => {
+    // const isOnlyActive = activeCount === 1 && agency.is_active === 1;
+
+    return {
+      id: agency.id,
+      "Sr. No": (currentPage - 1) * (data?.data.per_page ?? 0) + index + 1,
+      "Agency Name": agency.name,
+      "RC no.": agency.rc_number,
+      "State": agency.state,
+      "RC Status": agency.rc_status,
+      "Registered Office Address": agency.registered_office,
+      "Website/Domain": agency.domain_name,
+      "GST no.": agency.gst_number,
+      "Agency Status": agency.is_domain_verified ? "Verified" : "Unverified",
+      "is_active": agency.is_active,
+      Action: (
+        <HStack justifyContent="center">
+          <ViewAgencyMaster agency={localData} id={agency.id} />
+          <EditAgencyMaster editData={agency} refetch={refetch} />
+          <Box>
+            <Switch
+              colorPalette={"teal"}
+              size={"xs"}
+              onChange={() => handleToggle(agency.id.toString(), Number(agency.is_active))}
+              checked={Boolean(Number(agency.is_active))}
+            // disabled={isOnlyActive}
+            />
+          </Box>
+        </HStack>
+      ),
+    };
+  });
+
+
+  useEffect(() => {
+    if (data?.data?.data) {
+      setLocalData(data?.data?.data);
+    }
+  }, [data, localData, managepost]);
+
+  // useEffect(() => {
+  //   console.log("Fetched data:", data);
+  //   console.log("Local data:", localData);
+  //   console.log("Managepost data:", managepost);
+  // }, [data, localData, managepost]);
+
  return (

    <MainFrame>
@@ -59,11 +168,11 @@ const AgencyMaster = () => {
          px={3}
        >
          <Text as={"span"} fontSize={"sm"} fontWeight={500} color={"#000"}>
-          Agency Master
+            Agency Master
          </Text>

          <HStack >
-            <InputGroup 
+            {/* <InputGroup
              startElement={
                <LuSearch fontSize={"xs"} style={{ position: 'relative', left: '10px' }} />
              }
@@ -76,23 +185,36 @@ const AgencyMaster = () => {
                colorPalette={"blue"}
                _focus={{ border: "1px solid #02A0A0" }}
                rounded={"md"}
-                size={"2xs"}
-                fontSize={"2sm"}
+                size={"xs"}
+                fontSize={"sm"}
                placeholder="Search..."
                bgColor={'#EEEEEE'}
                ps={8}
              />
-            </InputGroup>
-            {/* <Button bgColor={'#EEEEEE'} pl={3} pr={3}><IoMdAdd /> <Text>Add</Text></Button> */}
-            <ViewAgencyAddModel />
+            </InputGroup> */}
+            <SearchComponent
+              value={searchTerm}
+              onChange={handleSearchChange}
+            />
+            {/* <ViewAgencyAddModel refetch={refetch} /> */}
          </HStack>
        </HStack>
        <DataTable
          sortableColumns={["Name", "Registration Date "]}
          tableHeadRow={tableHeadRow}
-          data={managepost}
+          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}
+          isLoading={isFetching}
+          isError={isError}
        />
-      </Box>       
+      </Box>
+      <Toaster />
    </MainFrame>
  )
 }
--- a/src/Pages/MasterModule/AgencyMaster/EditAgencyMaster.tsx
+++ b/src/Pages/MasterModule/AgencyMaster/EditAgencyMaster.tsx
@@ -1,83 +1,283 @@
-import { FaRegEdit } from "react-icons/fa"
-import { Button } from "../../../components/ui/button"
-import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../../components/ui/dialog"
-import { Field, Icon, Input, Stack, } from "@chakra-ui/react"
-import { TbEdit } from "react-icons/tb"
+import { Button } from "../../../components/ui/button";
+import {
+  DialogBody,
+  DialogCloseTrigger,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogRoot,
+  DialogTitle,
+  DialogTrigger,
+} from "../../../components/ui/dialog";
+import { Field, Input, Stack } from "@chakra-ui/react";
+import Edit from "../../../components/ActionIcons/Edit";
+import { useEffect, useState } from "react";
+import { useUpdateAgencyMasterMutation } from "../../../Redux/Service/agency.master.module.service";
+import { Toaster, toaster } from "../../../components/ui/toaster";
+
+// interface Organization {
+//   id: number;
+//   raid?: string;
+//   name: string;
+//   auth_signatory?: string;
+//   state: string;
+//   district?: string;
+//   rc_number: number;
+//   contact_details?: string;
+//   registered_office: string;
+//   branch_office?: string;
+//   registered_email?: string;
+//   other_email?: string;
+//   registered_contact?: string;
+//   website?: string;
+//   domain_name: string;
+//   staff_domain_name?: string;
+//   gst_number: string;
+//   rc_status?: "Active" | "Inactive"; // Assuming it's a status with limited values
+// }
+
+type AgencyFormData = {
+  id: string;
+  name: string;
+  state: string;
+  rc_number: string;
+  registered_office: string;
+  domain_name: string;
+  gst_number: string;
+};


-function EditAgencyMaster() {
-    return (

+function EditAgencyMaster<T extends AgencyFormData>({ editData, refetch }: { editData: T, refetch: VoidFunction }) {

-        <DialogRoot placement="center">
-            <DialogTrigger asChild>
-            <Icon
-            cursor={"pointer"}
-            p={0.5}
-            _hover={{ bg: "#00000015" }}
-            rounded={"md"}
-            boxSize={5}
-            // color={iconColor && iconColor}
+  const [formData, setFormData] = useState(editData);
+  const [isOpen, setIsOpen] = useState(false);
+  const [updateAgencyMaster, { isLoading }] = useUpdateAgencyMasterMutation()
+
+  console.log("Edit Data", editData);
+  
+  useEffect(() => {
+    setFormData(editData);
+  }, [editData]);
+
+  const handleOpenModal = () => {
+    setIsOpen(true);
+  };
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = e.target;
+    setFormData((prev: any) => ({
+      ...prev,
+      [name]: value,
+    }));
+  }
+
+  const handleSubmit = async () => {
+    // console.log("Updated Data:", formData);
+    if (!formData.name.trim() ||
+      !formData.rc_number ||
+      !formData.state.trim() ||
+      !formData.registered_office.trim() ||
+      !formData.domain_name.trim() ||
+      !formData.gst_number.trim()) {
+      // console.log("Validation failed: Some fields are empty.");
+      toaster.create({
+        title: "Error",
+        description: "Input fields cannot be empty",
+        type: "error",
+      });
+      return;
+    }
+    setIsOpen(false);
+    // Handle API call or further processing here
+    const payload = {
+      id: formData?.id,
+      name: formData?.name,
+      state: formData?.state,
+      rc_number: formData?.rc_number,
+      registered_office: formData?.registered_office,
+      domain_name: formData?.domain_name,
+      gst_number:formData?.gst_number,
+    };
+
+    try {
+      const response = await updateAgencyMaster(payload).unwrap();
+      if (response?.status === "success") {
+        toaster.create({
+          title: "Success",
+          description: "Data updated successfully",
+          type: "success",
+        });
+        refetch()
+        setIsOpen(false);
+      } else {
+        toaster.create({
+          title: "Error",
+          description: "Failed to update",
+          type: "error",
+        });
+      }
+    } catch (error: any) {
+      console.error("Error updating template:", error);
+      toaster.create({
+        title: "Error",
+        description: `${error.data.message || "Failed to update"}`,
+        type: "error",
+      });
+      // alert("Failed to update template");
+    }
+  };
+
+  return (
+    <DialogRoot placement="center" open={isOpen} onOpenChange={({ open }) => setIsOpen(open)}>
+      <DialogTrigger asChild>
+        <Button bg="transparent" color={"black"} h={"18px"} onClick={handleOpenModal}><Edit /></Button>
+      </DialogTrigger>
+
+      <DialogContent
+        bg={"#fff"}
+        // w={{ lg: "60%", md: "230px" }}
+        w={{ base: "90%", md: "400px" }}
+        height={"80vh"}
+        overflow={"scroll"}
+        overflowX="hidden"
+        p={3} // Reduced padding
+        bgSize={"md"}
+      >
+        <DialogHeader bg="white">
+          <DialogTitle alignSelf="center" color="black" fontSize="14px">
+            Edit
+          </DialogTitle>
+        </DialogHeader>
+
+        <DialogBody bg="white">
+          <Stack py={3}>
+            <Field.Root>
+              <Field.Label color="black" pt={1} fontSize="12px">
+                Agency name
+              </Field.Label>
+              <Input
+                name="name"
+                value={formData?.name}
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+                onChange={handleChange}
+              />
+
+              <Field.Label color="black" pt={1} fontSize="12px">
+                RC No.
+              </Field.Label>
+              <Input
+                name='rc_number'
+                value={formData.rc_number}
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+                onChange={handleChange}
+              />
+
+              <Field.Label color="black" pt={1} fontSize="12px">
+                State
+              </Field.Label>
+              <Input
+                name="state"
+                value={formData.state}
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+                onChange={handleChange}
+              />
+
+              <Field.Label color="black" pt={1} fontSize="12px">
+                Registered Office Address
+              </Field.Label>
+              <Input
+                name="registered_office"
+                value={formData.registered_office}
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+                onChange={handleChange}
+              />
+
+              <Field.Label color="black" pt={1} fontSize="12px">
+                Website/Domain
+              </Field.Label>
+              <Input
+                name="domain_name"
+                value={formData.domain_name}
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+                onChange={handleChange}
+              />
+
+              <Field.Label color="black" pt={1} fontSize="12px">
+                GST no.
+              </Field.Label>
+              <Input
+                name="gst_number"
+                value={formData.gst_number}
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+                onChange={handleChange}
+              />
+
+              {/* <Field.Label color="black" pt={1} fontSize="12px">
+                RC Status
+              </Field.Label>
+              <Input
+                value={formData.rc_status}
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+                onChange={handleChange}
+              /> */}
+            </Field.Root>
+          </Stack>
+        </DialogBody>
+        <DialogFooter display="flex" justifyContent="center" pt={"2"}>
+          <Button
+            w="100%"
+            bg="#02A0A0"
+            color={"#fff"}
+            fontSize="12px"
+            height="30px"
+            onClick={handleSubmit}
+            disabled={isLoading}
          >
-            <TbEdit />
-          </Icon>
-            </DialogTrigger>
+            Save
+          </Button>
+        </DialogFooter>

-            <DialogContent
-                bg={"#fff"}
-                // w={{ lg: "60%", md: "230px" }}
-                w={{ base: '90%', md: '400px' }}
-
-                height={'80vh'}
-                overflow={'scroll'}
-                overflowX="hidden" 
-                p={3} // Reduced padding
-                bgSize={'md'}
-            >
-                <DialogHeader bg="white">
-                    <DialogTitle alignSelf="center" color="black" fontSize="14px">Edit</DialogTitle>
-                </DialogHeader>
-
-                <DialogBody bg="white">
-                    <Stack py={3}>
-                    <Field.Root>
-                            <Field.Label color="black" pt={1} fontSize="12px">Agency name</Field.Label>
-                            <Input value="Lorem Ipsum" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-
-                            <Field.Label color="black" pt={1} fontSize="12px">RC No.</Field.Label>
-                            <Input value="Lorem Ipsum" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-
-                            <Field.Label color="black" pt={1} fontSize="12px">State</Field.Label>
-                            <Input value="Lorem Ipsum" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-
-                            <Field.Label color="black" pt={1} fontSize="12px">Registered Office Address</Field.Label>
-                            <Input value="Active" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-                            
-                            <Field.Label color="black" pt={1} fontSize="12px">Website/Domain</Field.Label>
-                            <Input value="Lorem Ipsum" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-
-                            <Field.Label color="black" pt={1} fontSize="12px">GST no.</Field.Label>
-                            <Input value="Lorem Ipsum" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-                            
-                            <Field.Label color="black" pt={1} fontSize="12px">Action</Field.Label>
-                            <Input value="Lorem Ipsum" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-
-
-                        </Field.Root>
-                    </Stack>
-                </DialogBody>
-                <DialogFooter display="flex" justifyContent="center" pt={"2"}>
-                    <Button w="100%" bg="#02A0A0" color={"#fff"} fontSize="12px" height="30px">
-                        Save
-                    </Button>
-                </DialogFooter>
-
-                <DialogCloseTrigger color="black" />
-            </DialogContent>
-        </DialogRoot>
-
-
-    )
+        <DialogCloseTrigger color="black" onClick={() => setIsOpen(false)} />
+      </DialogContent>
+      <Toaster />
+    </DialogRoot>
+  );
 }

-export default EditAgencyMaster
+export default EditAgencyMaster;
--- a/src/Pages/MasterModule/AgencyMaster/ViewAgencyAddModel.tsx
+++ b/src/Pages/MasterModule/AgencyMaster/ViewAgencyAddModel.tsx
@@ -2,30 +2,99 @@ 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 { AgencyPost, useCreateAgencyMasterPostMutation } from "../../../Redux/Service/agency.master.module.service"
+import { useState } from "react"
+import { Toaster, toaster } from "../../../components/ui/toaster"
+
+function ViewAgencyAddModel({ refetch }: { refetch: VoidFunction }) {
+    const [formData, setFormData] = useState<AgencyPost>({
+        name: "",
+        rc_number: "",
+        state: "",
+        registered_office: "",
+        domain_name: "",
+        gst_number: "",
+    });
+    const [isOpen, setIsOpen] = useState(false);
+    const [createAgencyMasterPost] = useCreateAgencyMasterPostMutation()
+
+    const handleOpenModal = () => {
+        setIsOpen(true);  // Open modal when clicking "Add"
+    };
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const { name, value } = e.target;
+        setFormData((prev: any) => ({
+            ...prev,
+            [name]: value,
+        }));
+    }             
+
+    const handleSubmit = async () => {
+        console.log("New Data:", formData);
+        const requiredFields: (keyof AgencyPost)[] = ["name", "rc_number", "state", "registered_office", "domain_name", "gst_number"];
+        const isEmptyField = requiredFields.some(field => !formData[field]?.trim());
+
+        if (isEmptyField) {
+            console.log("Validation failed: Some fields are empty.");
+            toaster.create({
+                title: "Error",
+                description: "All required fields must be filled.",
+                type: "error",
+            });
+            return;
+        }
+
+        const payload = {
+            name: formData.name
+        };
+
+        try {
+            const response = await createAgencyMasterPost(payload).unwrap();
+            if (response) {
+                toaster.create({
+                    title: "Success",
+                    description: "Added successfully",
+                    type: "success",
+                });
+                refetch()
+                setIsOpen(false);
+            } else {
+                toaster.create({
+                    title: "Error",
+                    description: "Failed to add data.",
+                    type: "error",
+                });
+            }
+        } catch (error) {
+            console.error("Error updating template:", error);
+            toaster.create({
+                title: "Error",
+                description: "Please try again later",
+                type: "error",
+            });
+
+        }
+    };

-function ViewAgencyAddModel() {
    return (

-        <DialogRoot placement="center">
+        <DialogRoot placement="center" open={isOpen} onOpenChange={({ open }) => setIsOpen(open)}>
            <DialogTrigger asChild>
-                {/* <Button bg={"transparent"} size="sm">
-                    <MdOutlineRemoveRedEye style={{ cursor: "pointer", fontSize: "16px" }} />
-                </Button> */}
-                <Button  px={5} size={"xs"} bg={"#02A0A0"}>
-                    <IoMdAdd   /> <Text >Add</Text>
+                <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={'80vh'}
-                 overflow={'scroll'}
-                 overflowX="hidden" 
-                 p={3} // Reduced padding
-                 bgSize={'md'}
+                bg={"#fff"}
+                // w={{ lg: "60%", md: "230px" }}
+                w={{ base: '90%', md: '400px' }}
+                height={'80vh'}
+                overflow={'scroll'}
+                overflowX="hidden"
+                p={3} // Reduced padding
+                bgSize={'md'}
            >
                <DialogHeader bg="white" >
                    <DialogTitle alignSelf="center" color="black" fontSize="14px">Add</DialogTitle>
@@ -36,38 +105,97 @@ function ViewAgencyAddModel() {

                        <Field.Root>
                            <Field.Label color="black" pt={1} fontSize="12px">Agency Name</Field.Label>
-                            <Input placeholder="" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
+                            <Input
+                                name="name"
+                                value={formData.name}
+                                bgColor="#EEEEEE"
+                                color="black"
+                                border="none"
+                                pl={1}
+                                fontSize="12px"
+                                height="30px"
+                                onChange={handleChange}
+                            />

                            <Field.Label color="black" pt={1} fontSize="12px">RC No.</Field.Label>
-                            <Input placeholder="" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
+                            <Input
+                                name='rc_number'
+                                value={formData.rc_number}
+                                bgColor="#EEEEEE"
+                                color="black"
+                                border="none"
+                                pl={1}
+                                fontSize="12px"
+                                height="30px"
+                                onChange={handleChange}
+                            />

                            <Field.Label color="black" pt={1} fontSize="12px">State</Field.Label>
-                            <Input placeholder="" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
+                            <Input
+                                name="state"
+                                value={formData.state}
+                                bgColor="#EEEEEE"
+                                color="black"
+                                border="none"
+                                pl={1}
+                                fontSize="12px"
+                                height="30px"
+                                onChange={handleChange}
+                            />

                            <Field.Label color="black" pt={1} fontSize="12px">Registered Office Address</Field.Label>
-                            <Input placeholder="" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-                            
+                            <Input
+                                name="registered_office"
+                                value={formData.registered_office}
+                                bgColor="#EEEEEE"
+                                color="black"
+                                border="none"
+                                pl={1}
+                                fontSize="12px"
+                                height="30px"
+                                onChange={handleChange}
+                            />
+
                            <Field.Label color="black" pt={1} fontSize="12px">Website/Domain</Field.Label>
-                            <Input placeholder="" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
+                            <Input
+                                name="domain_name"
+                                value={formData.domain_name}
+                                bgColor="#EEEEEE"
+                                color="black"
+                                border="none"
+                                pl={1}
+                                fontSize="12px"
+                                height="30px"
+                                onChange={handleChange}
+                            />

                            <Field.Label color="black" pt={1} fontSize="12px">GST no.</Field.Label>
-                            <Input placeholder="" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-                            
-                            <Field.Label color="black" pt={1} fontSize="12px">Action</Field.Label>
-                            <Input placeholder="" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-
+                            <Input
+                                name="gst_number"
+                                value={formData.gst_number}
+                                bgColor="#EEEEEE"
+                                color="black"
+                                border="none"
+                                pl={1}
+                                fontSize="12px"
+                                height="30px"
+                                onChange={handleChange}
+                            />

+                            {/* <Field.Label color="black" pt={1} fontSize="12px">Action</Field.Label>
+                            <Input placeholder="" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" /> */}
                        </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>
+            <Toaster />
        </DialogRoot >

    )
--- a/src/Pages/MasterModule/AgencyMaster/ViewAgencyMaster.tsx
+++ b/src/Pages/MasterModule/AgencyMaster/ViewAgencyMaster.tsx
@@ -1,83 +1,178 @@
-import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../../components/ui/dialog"
-import { Field, Icon, Input, Stack, } from "@chakra-ui/react"
-import { MdOutlineRemoveRedEye } from "react-icons/md"
-import { Button } from "../../../components/ui/button"
+import {
+  DialogBody,
+  DialogCloseTrigger,
+  DialogContent,
+  // DialogFooter,
+  DialogHeader,
+  DialogRoot,
+  DialogTitle,
+  DialogTrigger,
+} from "../../../components/ui/dialog";
+import { Field, Input, Span, Stack } from "@chakra-ui/react";
+// import { MdOutlineRemoveRedEye } from "react-icons/md";
+// import { Button } from "../../../components/ui/button";
+import View from "../../../components/ActionIcons/View";
+import { Agency } from "../../../Redux/Service/agency.master.module.service";

+function ViewAgencyMaster({ agency, id }: { agency: Agency[], id:number }) {

-function ViewAgencyMaster() {
-    return (
+  return (
+    <DialogRoot placement="center">
+      <DialogTrigger asChild>
+        <Span><View /></Span>
+      </DialogTrigger>

+      <DialogContent
+        bg={"#fff"}
+        // w={{ lg: "60%", md: "230px" }}
+        w={{ base: "90%", md: "400px" }}
+        height={"80vh"}
+        overflow={"scroll"}
+        overflowX="hidden"
+        p={3} // Reduced padding
+        bgSize={"md"}
+      >
+        <DialogHeader bg="white">
+          <DialogTitle alignSelf="center" color="black" fontSize="14px">
+            View
+          </DialogTitle>
+        </DialogHeader>
+        {agency.map((data) => (
+          <DialogBody bg="white">
+            {data.id === id && <Stack py={3}>
+              <Field.Root>
+                <Field.Label color="black" pt={1} fontSize="12px">
+                  Agency name
+                </Field.Label>
+                <Input
+                  value={data.name}
+                  bgColor="#EEEEEE"
+                  color="black"
+                  border="none"
+                  pl={1}
+                  fontSize="12px"
+                  height="30px"
+                  disabled
+                />

-        <DialogRoot placement="center">
-            <DialogTrigger asChild>
-                
-            <Icon
-            cursor={"pointer"}
-            p={0.5}
-            _hover={{ bg: "#00000015" }}
-            rounded={"md"}
-            boxSize={5}
-            // color={iconColor && iconColor}
+                <Field.Label color="black" pt={1} fontSize="12px">
+                  RC No.
+                </Field.Label>
+                <Input
+                  value={data.rc_number}
+                  bgColor="#EEEEEE"
+                  color="black"
+                  border="none"
+                  pl={1}
+                  fontSize="12px"
+                  height="30px"
+                  disabled
+                />
+
+                <Field.Label color="black" pt={1} fontSize="12px">
+                  State
+                </Field.Label>
+                <Input
+                  value={data.state}
+                  bgColor="#EEEEEE"
+                  color="black"
+                  border="none"
+                  pl={1}
+                  fontSize="12px"
+                  height="30px"
+                  disabled
+                />
+
+                <Field.Label color="black" pt={1} fontSize="12px">
+                  RC Status
+                </Field.Label>
+                <Input
+                  value={data.rc_status}
+                  bgColor="#EEEEEE"
+                  color="black"
+                  border="none"
+                  pl={1}
+                  fontSize="12px"
+                  height="30px"
+                  disabled
+                />
+
+                <Field.Label color="black" pt={1} fontSize="12px">
+                  Registered Office Address
+                </Field.Label>
+                <Input
+                  value={data.registered_office}
+                  bgColor="#EEEEEE"
+                  color="black"
+                  border="none"
+                  pl={1}
+                  fontSize="12px"
+                  height="30px"
+                  disabled
+                />
+
+                <Field.Label color="black" pt={1} fontSize="12px">
+                  Website/Domain
+                </Field.Label>
+                <Input
+                  value={data.domain_name}
+                  bgColor="#EEEEEE"
+                  color="black"
+                  border="none"
+                  pl={1}
+                  fontSize="12px"
+                  height="30px"
+                  disabled
+                />
+
+                <Field.Label color="black" pt={1} fontSize="12px">
+                  GST no.
+                </Field.Label>
+                <Input
+                  value={data.gst_number}
+                  bgColor="#EEEEEE"
+                  color="black"
+                  border="none"
+                  pl={1}
+                  fontSize="12px"
+                  height="30px"
+                  disabled
+                />
+
+                {/* <Field.Label color="black" pt={1} fontSize="12px">
+                  Action
+                </Field.Label>
+                <Input
+                  value={data}
+                  bgColor="#EEEEEE"
+                  color="black"
+                  border="none"
+                  pl={1}
+                  fontSize="12px"
+                  height="30px"
+                  disabled
+                /> */}
+              </Field.Root>
+            </Stack>}
+          </DialogBody>
+        ))}
+
+        {/* <DialogFooter display="flex" justifyContent="center" pt={"2"}>
+          <Button
+            w="100%"
+            bg="#02A0A0"
+            color={"#fff"}
+            fontSize="12px"
+            height="30px"
          >
-            <MdOutlineRemoveRedEye />
-          </Icon>
-            </DialogTrigger>
+            Save
+          </Button>
+        </DialogFooter> */}

-            <DialogContent
-                bg={"#fff"}
-                // w={{ lg: "60%", md: "230px" }}
-                w={{ base: '90%', md: '400px' }}
-
-                height={'80vh'}
-                overflow={'scroll'}
-                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">Agency name</Field.Label>
-                            <Input value="Lorem Ipsum" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-
-                            <Field.Label color="black" pt={1} fontSize="12px">RC No.</Field.Label>
-                            <Input value="Lorem Ipsum" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-
-                            <Field.Label color="black" pt={1} fontSize="12px">State</Field.Label>
-                            <Input value="Lorem Ipsum" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-
-                            <Field.Label color="black" pt={1} fontSize="12px">Registered Office Address</Field.Label>
-                            <Input value="Active" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-                            
-                            <Field.Label color="black" pt={1} fontSize="12px">Website/Domain</Field.Label>
-                            <Input value="Lorem Ipsum" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-
-                            <Field.Label color="black" pt={1} fontSize="12px">GST no.</Field.Label>
-                            <Input value="Lorem Ipsum" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-                            
-                            <Field.Label color="black" pt={1} fontSize="12px">Action</Field.Label>
-                            <Input value="Lorem Ipsum" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-
-
-                        </Field.Root>
-                    </Stack>
-                </DialogBody>
-                <DialogFooter display="flex" justifyContent="center" pt={"2"}>
-                    <Button w="100%" bg="#02A0A0" color={"#fff"} fontSize="12px" height="30px">
-                        Save
-                    </Button>
-                </DialogFooter>
-
-                <DialogCloseTrigger color="black" />
-            </DialogContent>
-        </DialogRoot>
-
-
-    )
+        <DialogCloseTrigger color="black" />
+      </DialogContent>
+    </DialogRoot>
+  );
 }

-export default ViewAgencyMaster
+export default ViewAgencyMaster;
--- a/src/Pages/MasterModule/Country/Country.tsx
+++ b/src/Pages/MasterModule/Country/Country.tsx
@@ -1,11 +1,15 @@
-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 CountryAddModel from "./CountryAddModel";
 import EditCountryModel from "./EditCountryModel";
+import { CountryData, useCountryToggleMutation, useGetCountryMasterQuery } from "../../../Redux/Service/country.master";
+import { useEffect, useState } from "react";
+import SearchComponent from "../../../components/SearchComponent";
+import { useDebounce } from "../../../components/Hooks/useDebounce";
+import { toaster, Toaster } from "../../../components/ui/toaster";
+import { delay } from "../../../components/Utils";



@@ -15,25 +19,109 @@ 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">
+//         <EditCountryModel />
+//         <Box>
+//           <Switch colorPalette={'teal'} size={"xs"} />
+//         </Box>
+//       </HStack>
+//     ),
+//   })),
+// ];
+
+const Country = () => {
+  const [currentPage, setCurrentPage] = useState(1);
+  // const { data, refetch } = useGetCountryMasterQuery(currentPage)
+  const [countryToggle] = useCountryToggleMutation()
+  const [localData, setLocalData] = useState<any[]>([]);
+  const [searchTerm, setSearchTerm] = useState("");
+  const debouncedSearchTerm = useDebounce(searchTerm, 500);
+  const queryArgs = debouncedSearchTerm ? { page: currentPage, search: debouncedSearchTerm } : { page: currentPage };
+  const { data, refetch, isError, isFetching } = useGetCountryMasterQuery(queryArgs);
+  console.log("Country Data", data?.data.data)
+
+  useEffect(() => {
+    if (data) {
+      setLocalData(data?.data.data);
+    }
+  }, [data]);
+
+  const handlePageChange = (page: number) => {
+    setCurrentPage(page);
+  };
+
+  const handleSearchChange = (value: string) => {
+    setSearchTerm(value);
+    setCurrentPage(1);
+  };
+
+  const filteredData = localData?.filter((agency) => {
+    const searchLower = searchTerm.toLowerCase();
+    const countryName = agency.en_name?.toLowerCase().includes(searchLower);
+    const capitalName = agency.capital?.toLowerCase().includes(searchLower);
+    return countryName || capitalName;
+  });
+
+  const handleToggle = async (agencyId: number, currentStatus: string) => {
+    const newStatus = currentStatus === '1' ? '0' : '1';
+
+    setLocalData((prevData) =>
+      prevData.map((agency) =>
+        agency.id === agencyId ? { ...agency, is_active: newStatus } : agency
+      )
+    );
+
+    try {
+      await countryToggle({ id: agencyId, is_active: newStatus }).unwrap();
+      toaster.create({
+        title: "Success",
+        description: "Status updated successfully",
+        type: "success",
+      });
+      await delay(500);
+      refetch()
+    } catch (error) {
+      console.error("Error updating privacy policy:", error);
+      toaster.create({
+        title: "Error",
+        description: "Please try again later.",
+        type: "error",
+      });
+      setLocalData((prevData) =>
+        prevData.map((agency) =>
+          agency.id === agencyId ? { ...agency, is_active: currentStatus } : agency
+        )
+      );
+    }
+  }
+
+  const managepost = filteredData?.flatMap((agency: CountryData, index: number) => ({
+    "Sr. No": (currentPage - 1) * (data?.data.per_page ?? 0) + index + 1,
+    "Title": agency.en_name,
    "Action": (
      <HStack justifyContent="center">
-        <EditCountryModel />
+        <EditCountryModel rowData={{ id: agency.id, en_name: agency.en_name, country_code: agency.country_code, phonecode: agency.phonecode, capital: agency.capital, currency: agency.currency, currency_name: agency.currency_name, currency_symbol: agency.currency_symbol }} refetch={refetch} />
        <Box>
-          <Switch colorPalette={'teal'} size={"xs"}/>
+          <Switch
+            colorPalette={'teal'}
+            size={"xs"}
+            checked={agency.is_active === '1'}
+            onChange={() => handleToggle(agency.id, agency.is_active)}
+          />
        </Box>
      </HStack>
    ),
-  })),
-];
+  }))
+

-const Country = () => {
  return (

    <MainFrame>
@@ -46,11 +134,11 @@ const Country = () => {
          px={3}
        >
          <Text as={"span"} fontSize={"sm"} fontWeight={500} color={"#000"}>
-          Country
+            Country
          </Text>

          <HStack >
-            <InputGroup 
+            {/* <InputGroup
              startElement={
                <LuSearch fontSize={"xs"} style={{ position: 'relative', left: '10px' }} />
              }
@@ -63,23 +151,42 @@ const Country = () => {
                colorPalette={"blue"}
                _focus={{ border: "1px solid #02A0A0" }}
                rounded={"md"}
-                size={"2xs"}
-                fontSize={"2sm"}
+                size={"xs"}
+                fontSize={"sm"}
                placeholder="Search..."
                bgColor={'#EEEEEE'}
                ps={8}
              />
-            </InputGroup>
+            </InputGroup> */}
+            <SearchComponent
+              value={searchTerm}
+              // onChange={(value) => {
+              //   setSearchTerm(value);
+              //   // setCurrentPage(1);
+              //   refetch()
+              // }}
+              onChange={handleSearchChange}
+            />
            {/* <Button bgColor={'#EEEEEE'} pl={3} pr={3}><IoMdAdd /> <Text>Add</Text></Button> */}
-            <CountryAddModel />
+            <CountryAddModel 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}
+          isLoading={isFetching}
+          isError={isError}
        />
-      </Box>       
+      </Box>
+      <Toaster />
    </MainFrame>
  )
 }
--- a/src/Pages/MasterModule/Country/CountryAddModel.tsx
+++ b/src/Pages/MasterModule/Country/CountryAddModel.tsx
@@ -1,56 +1,217 @@
 import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../../components/ui/dialog"
-import { Box, Field, IconButton, Input, Stack, Text, Textarea } from "@chakra-ui/react"
+import { Field, Input, Stack, Text } from "@chakra-ui/react"
 import { IoMdAdd } from "react-icons/io"
 import { Button } from "../../../components/ui/button"
+import { useEffect, useState } from "react";
+import { PostCountry, useCreateCountryPostMutation } from "../../../Redux/Service/country.master";
+import { Toaster, toaster } from "../../../components/ui/toaster";
+
+function CountryAddModel({refetch}: { refetch: VoidFunction }) {
+    const [createCountryPost, { isLoading }] = useCreateCountryPostMutation()
+    const [isOpen, setIsOpen] = useState(false);
+    const [countryName, setCountryName] = useState<PostCountry>({
+        en_name: '',
+        country_code: '',
+        phonecode: '',
+        capital: '',
+        currency: '',
+        currency_name: '',
+        currency_symbol: '',
+    });
+
+     useEffect(() => {
+            if (!isOpen) {
+                setCountryName({
+                    en_name: '',
+                    country_code: '',
+                    phonecode: '',
+                    capital: '',
+                    currency: '',
+                    currency_name: '',
+                    currency_symbol: '',
+                });
+            }
+        }, [isOpen]);
+
+    const handleOpenModal = () => {
+        setIsOpen(true);  // Open modal when clicking "Add"
+    };
+
+    const handleSubmit = async () => {
+        if (countryName.en_name === "" || countryName.country_code === "" || countryName.phonecode === "" || countryName.capital === "" || countryName.currency === "" || countryName.currency_name === "" || countryName.currency_symbol === "") {
+            toaster.create({
+                title: "Error",
+                description: "Input fields cannot be empty",
+                type: "error",
+            });
+            return;
+        }
+
+        const payload: PostCountry = {
+            en_name: countryName.en_name,
+            country_code: countryName.country_code,
+            phonecode: countryName.phonecode,
+            capital: countryName.capital,
+            currency: countryName.currency,
+            currency_name: countryName.currency_name,
+            currency_symbol: countryName.currency_symbol,
+        };
+
+        try {
+            const response = await createCountryPost(payload).unwrap();
+            if (response) {
+                toaster.create({
+                    title: "Success",
+                    description: "Country added successfully",
+                    type: "success",
+                });
+                setIsOpen(false);
+                refetch();
+            } else {
+                toaster.create({
+                    title: "Error",
+                    description: "Failed to add Country",
+                    type: "error",
+                });
+            }
+        } catch (error) {
+            console.error("Error updating template:", error);
+            // alert("Failed to update template");
+        }
+    };

-function CountryAddModel() {
-   
    return (
-
-        <DialogRoot placement="center">
-            <DialogTrigger asChild>
-                {/* <Button bg={"transparent"} size="sm">
+        <>
+            <DialogRoot placement="center" open={isOpen} onOpenChange={({ open }) => setIsOpen(open)}>
+                <DialogTrigger asChild>
+                    {/* <Button bg={"transparent"} size="sm">
                    <MdOutlineRemoveRedEye style={{ cursor: "pointer", fontSize: "16px" }} />
                </Button> */}
-                <Button  px={5} size={"xs"} bg={"#02A0A0"}>
-                    <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">Country</Field.Label>
-                            <Input placeholder="" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-                        </Field.Root>
-                    </Stack>
-
-                </DialogBody>
-                <DialogFooter display="flex" justifyContent="center" pt={"2"}>
-                    <Button w="100%" bg="#02A0A0" color={"#fff"}>
-                        Save
+                    <Button px={5} size={"xs"} bg={"#02A0A0"} onClick={handleOpenModal}>
+                        <IoMdAdd /> <Text>Add</Text>
                    </Button>
-                </DialogFooter>

-                <DialogCloseTrigger color="black" />
-            </DialogContent>
-        </DialogRoot >
+                </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">Country</Field.Label>
+                                <Input
+                                    placeholder="Enter Country Name"
+                                    bgColor="#EEEEEE"
+                                    color="black"
+                                    border="none"
+                                    pl={1}
+                                    fontSize="12px"
+                                    height="30px"
+                                    value={countryName.en_name}
+                                    onChange={(e) => setCountryName({ ...countryName, en_name: e.target.value })}
+                                />
+
+                                <Field.Label color="black" pt={1} fontSize="12px">Country Code</Field.Label>
+                                <Input
+                                    placeholder="Please enter country code ex: IN, US"
+                                    bgColor="#EEEEEE"
+                                    color="black"
+                                    border="none"
+                                    pl={1}
+                                    fontSize="12px"
+                                    height="30px"
+                                    value={countryName.country_code}
+                                    onChange={(e) => setCountryName({ ...countryName, country_code: e.target.value })}
+                                />
+
+                                <Field.Label color="black" pt={1} fontSize="12px">Phone Code</Field.Label>
+                                <Input
+                                    placeholder="Please enter phone code ex: +91, +1"
+                                    bgColor="#EEEEEE"
+                                    color="black"
+                                    border="none"
+                                    pl={1}
+                                    fontSize="12px"
+                                    height="30px"
+                                    value={countryName.phonecode}
+                                    onChange={(e) => setCountryName({ ...countryName, phonecode: e.target.value })}
+                                />
+                                <Field.Label color="black" pt={1} fontSize="12px">Capital</Field.Label>
+                                <Input
+                                    placeholder="Enter Capital City"
+                                    bgColor="#EEEEEE"
+                                    color="black"
+                                    border="none"
+                                    pl={1}
+                                    fontSize="12px"
+                                    height="30px"
+                                    value={countryName.capital}
+                                    onChange={(e) => setCountryName({ ...countryName, capital: e.target.value })}
+                                />
+                                <Field.Label color="black" pt={1} fontSize="12px">Currency</Field.Label>
+                                <Input
+                                    placeholder="Enter Currency"
+                                    bgColor="#EEEEEE"
+                                    color="black"
+                                    border="none"
+                                    pl={1}
+                                    fontSize="12px"
+                                    height="30px"
+                                    value={countryName.currency}
+                                    onChange={(e) => setCountryName({ ...countryName, currency: e.target.value })}
+                                />
+                                <Field.Label color="black" pt={1} fontSize="12px">Currency name</Field.Label>
+                                <Input
+                                    placeholder="Enter Currency Name"
+                                    bgColor="#EEEEEE"
+                                    color="black"
+                                    border="none"
+                                    pl={1}
+                                    fontSize="12px"
+                                    height="30px"
+                                    value={countryName.currency_name}
+                                    onChange={(e) => setCountryName({ ...countryName, currency_name: e.target.value })}
+                                />
+                                <Field.Label color="black" pt={1} fontSize="12px">Currency Symbol</Field.Label>
+                                <Input
+                                    placeholder="Enter Currency Symbol"
+                                    bgColor="#EEEEEE"
+                                    color="black"
+                                    border="none"
+                                    pl={1}
+                                    fontSize="12px"
+                                    height="30px"
+                                    value={countryName.currency_symbol}
+                                    onChange={(e) => setCountryName({ ...countryName, currency_symbol: e.target.value })}
+                                />
+                            </Field.Root>
+                        </Stack>
+
+                    </DialogBody>
+                    <DialogFooter display="flex" justifyContent="center" pt={"2"}>
+                        <Button w="100%" bg="#02A0A0" color={"#fff"} onClick={handleSubmit} disabled={isLoading}>
+                            Save
+                        </Button>
+                    </DialogFooter>
+
+                    <DialogCloseTrigger color="black" />
+                </DialogContent>
+            </DialogRoot >
+            <Toaster />
+        </>

    )
 }
--- a/src/Pages/MasterModule/Country/EditCountryModel.tsx
+++ b/src/Pages/MasterModule/Country/EditCountryModel.tsx
@@ -1,61 +1,161 @@
-import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../../components/ui/dialog"
-import { Box, Field, IconButton, Input, Stack, Text, Textarea } from "@chakra-ui/react"
-import { Button } from "../../../components/ui/button"
-import { FaRegEdit } from "react-icons/fa";
+import {
+  DialogBody,
+  DialogCloseTrigger,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogRoot,
+  DialogTitle,
+  DialogTrigger,
+} from "../../../components/ui/dialog";
+import { Field, Input, Stack } from "@chakra-ui/react";
+import { Button } from "../../../components/ui/button";
+import Edit from "../../../components/ActionIcons/Edit";
+import { useUpdateCountryMutation } from "../../../Redux/Service/country.master";
+import { Toaster, toaster } from "../../../components/ui/toaster";
+import { useEffect, useState } from "react";

-
-function EditCountryModel() {
-
-
-   
-    return (
-
-        <DialogRoot placement="center">
-            <DialogTrigger asChild>
-                {/* <Button bg={"transparent"} size="sm">
-                    <MdOutlineRemoveRedEye style={{ cursor: "pointer", fontSize: "16px" }} />
-                </Button> */}
-                
-                 <FaRegEdit style={{ cursor: "pointer", fontSize: "16px" }}  color="#000"/>
-                
-
-            </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</DialogTitle>
-                </DialogHeader>
-
-                <DialogBody bg="white">
-                    <Stack py={3}>
-
-                        <Field.Root>
-                            <Field.Label color="black" pt={1} fontSize="12px">Country</Field.Label>
-                            <Input value="Lorem Ipsum" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-                        </Field.Root>
-                    </Stack>
-
-                </DialogBody>
-                <DialogFooter display="flex" justifyContent="center" pt={"2"}>
-                    <Button w="100%" bg="#02A0A0" color={"#fff"}>
-                        Save
-                    </Button>
-                </DialogFooter>
-
-                <DialogCloseTrigger color="black" />
-            </DialogContent>
-        </DialogRoot >
-
-    )
+export interface EditCountryModelProps {
+  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;
 }

-export default EditCountryModel
+
+
+
+function EditCountryModel({ rowData, refetch }: { rowData: EditCountryModelProps, refetch: VoidFunction }) {
+  const [updateCountry, { isLoading }] = useUpdateCountryMutation()
+  const [editData, setEditData] = useState(rowData)
+   const [isOpen, setIsOpen] = useState(false);
+
+   useEffect(() => {
+   if(rowData){
+     setEditData(rowData)
+   }
+   }, [rowData])
+   
+
+  const handleOpenModal = () => {
+    setIsOpen(true);
+  };
+
+  const handleSubmit = async () => {
+    if (editData?.en_name === '') {
+      toaster.create({
+        title: "Error",
+        description: "Input fields cannot be empty",
+        type: "error",
+      });
+      return;
+    }
+
+    // Only en_name is editable, so we only need to send that in the payload.
+    const payload = {
+      id: rowData?.id,
+      en_name: editData?.en_name,
+      country_code: rowData?.country_code,
+      phonecode: rowData?.phonecode,
+      capital: rowData?.capital,
+      currency: rowData?.currency,
+      currency_name: rowData?.currency_name,
+      currency_symbol: rowData?.currency_symbol,
+    };
+
+    // console.log('payload', payload)
+
+    try {
+      const response = await updateCountry(payload).unwrap();
+      if (response?.status === "success") {
+        toaster.create({
+          title: "Success",
+          description: "Country updated successfully",
+          type: "success",
+        });
+        setIsOpen(false);
+        refetch()
+      } else {
+        toaster.create({
+          title: "Error",
+          description: "Failed to update Country",
+          type: "error",
+        });
+      }
+    } catch (error) {
+      console.error("Error updating template:", error);
+      // alert("Failed to update template");
+      toaster.create({
+        title: "Error",
+        description: "Something went wrong",
+        type: "error",
+      });
+    }
+  };
+
+
+  return (
+    <>
+      <DialogRoot placement="center" key={editData.id} open={isOpen} onOpenChange={({ open }) => setIsOpen(open)}>
+        <DialogTrigger asChild>
+          <Button bg="transparent" color={"black"} h={"18px"} onClick={handleOpenModal}><Edit /></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">
+              Edit
+            </DialogTitle>
+          </DialogHeader>
+          <DialogBody bg="white">
+            <Stack py={3}>
+              <Field.Root>
+                <Field.Label color="black" pt={1} fontSize="12px">
+                  Country
+                </Field.Label>
+                <Input
+                  value={editData.en_name}
+                  onChange={(e) => setEditData({ ...editData, en_name: e.target.value })}
+                  bgColor="#EEEEEE"
+                  color="black"
+                  border="none"
+                  pl={1}
+                  fontSize="12px"
+                  height="30px"
+                />
+              </Field.Root>
+            </Stack>
+          </DialogBody>
+          <DialogFooter display="flex" justifyContent="center" pt={"2"}>
+            <Button w="100%" bg="#02A0A0" color={"#fff"} onClick={handleSubmit} disabled={isLoading}>
+              Save
+            </Button>
+          </DialogFooter>
+
+          <DialogCloseTrigger color="black" />
+        </DialogContent>
+      </DialogRoot>
+      <Toaster />
+    </>
+  );
+}
+
+export default EditCountryModel;
--- a/src/Pages/MasterModule/DepartmentMaster/AddDepartmentMaster.tsx
+++ b/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, { isLoading }] = 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} disabled={isLoading}>
+                        Save
+                    </Button>
+                </DialogFooter>
+
+                <DialogCloseTrigger color="black" onClick={() => setIsOpen(false)} />
+            </DialogContent>
+        </DialogRoot >
+
+    )
+}
+
+export default AddDepartmentMaster
--- a/src/Pages/MasterModule/DepartmentMaster/DepartmentMasterList.tsx
+++ b/src/Pages/MasterModule/DepartmentMaster/DepartmentMasterList.tsx
@@ -0,0 +1,162 @@
+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";
+import { useDebounce } from "../../../components/Hooks/useDebounce";
+import { Toaster, toaster } from "../../../components/ui/toaster";
+import { delay } from "../../../components/Utils";
+
+
+// table data
+
+const tableHeadRow = [
+    "Sr. No",
+    "Title",
+    "Action"
+
+];
+
+
+
+const DepartmentMasterList = () => {
+    const [currentPage, setCurrentPage] = useState(1);
+    const [departmentToggle] = useDepartmentToggleMutation()
+    const [localData, setLocalData] = useState<any[]>([]);
+    const [searchTerm, setSearchTerm] = useState("");
+    const debouncedSearchTerm = useDebounce(searchTerm, 500);
+    const queryArgs = debouncedSearchTerm ? { page: currentPage, search: debouncedSearchTerm } : { page: currentPage };
+    const { data, refetch, isError, isFetching } = useGetDepartmentMasterQuery(queryArgs)
+
+    console.log("Department Data", data?.data.data)
+
+    useEffect(() => {
+        if (data?.data?.data) {
+            setLocalData(data?.data.data);
+        }
+    }, [data]);
+
+    const handleSearchChange = (value: string) => {
+        setSearchTerm(value);
+        setCurrentPage(1);
+    };
+
+    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();
+            toaster.create({
+                title: "Success",
+                description: "Status updated successfully",
+                type: "success",
+            });
+            await delay(500);
+            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">
+                {/* <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={handleSearchChange}
+                        />
+                        {/* <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}
+                    isLoading={isFetching}
+                    isError={isError}
+                />
+            </Box>
+            <Toaster />
+        </MainFrame>
+    )
+}
+export default DepartmentMasterList
--- a/src/Pages/MasterModule/DepartmentMaster/EditDepartmentMaster.tsx
+++ b/src/Pages/MasterModule/DepartmentMaster/EditDepartmentMaster.tsx
@@ -0,0 +1,160 @@
+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, 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, { isLoading }] = 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} disabled={isLoading}>
+                        Save
+                    </Button>
+                </DialogFooter>
+
+                <DialogCloseTrigger color="black" onClick={() => setIsOpen(false)} />
+            </DialogContent>
+            <Toaster />
+        </DialogRoot>
+    );
+}
+
+export default EditDepartmentMaster;
--- a/src/Pages/MasterModule/IndustryMaster/AddIndustryMaster.tsx
+++ b/src/Pages/MasterModule/IndustryMaster/AddIndustryMaster.tsx
@@ -0,0 +1,103 @@
+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 { useCreateIndustryMasterPostMutation } from "../../../Redux/Service/industry.master.service";
+
+function AddIndustryMaster({ refetch }: { refetch: VoidFunction }) {
+    const [jobType, setJobType] = useState("");
+    const [isOpen, setIsOpen] = useState(false);
+    const [createIndustryMasterPost, { isLoading }] = useCreateIndustryMasterPostMutation()
+
+    const handleOpenModal = () => {
+        setIsOpen(true);  // Open modal when clicking "Add"
+    };
+
+    const handleSubmit = async () => {
+        if (!jobType.trim()) {
+            toaster.create({
+                title: "Error",
+                description: "Title and Subtitle cannot be empty.",
+                type: "error",
+            });
+            return;
+        }
+
+        const payload = {
+            en_name: jobType,
+            categories_masters_xid:4
+        };
+
+        try {
+            await createIndustryMasterPost(payload);
+            refetch()
+            setIsOpen(false);
+        } catch (error) {
+            console.error("Error updating template:", error);
+            alert("Failed to update template");
+        }
+    };
+
+    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">Job Type</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} disabled={isLoading}>
+                        Save
+                    </Button>
+                </DialogFooter>
+
+                <DialogCloseTrigger color="black" onClick={() => setIsOpen(false)} />
+            </DialogContent>
+        </DialogRoot >
+
+    )
+}
+
+export default AddIndustryMaster
--- a/src/Pages/MasterModule/IndustryMaster/EditIndustryMaster.tsx
+++ b/src/Pages/MasterModule/IndustryMaster/EditIndustryMaster.tsx
@@ -0,0 +1,112 @@
+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 { useUpdateIndustryMasterMutation } from "../../../Redux/Service/industry.master.service";
+
+function EditIndustryMaster({ id, localData, refetch, categories }: { id: number, localData: any, refetch: VoidFunction, categories: any }) {
+    const [jobtype, setJobType] = useState("");
+    const [updateIndustryMaster, { isLoading }] = useUpdateIndustryMasterMutation()
+    const [isOpen, setIsOpen] = useState(false);
+
+    const handleOpenModal = () => {
+        const template = localData?.find((item: any) => item.id === id);
+        if (template) {
+            setJobType(template.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: id,
+            en_name: jobtype,
+            categories_masters_xid: categories
+        };
+
+        try {
+            await updateIndustryMaster(payload);
+            refetch()
+            setIsOpen(false);
+        } catch (error) {
+            console.error("Error updating template:", error);
+            alert("Failed to update template");
+        }
+    };
+
+    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
+                    </DialogTitle>
+                </DialogHeader>
+
+                <DialogBody bg="white">
+                    <Stack py={3}>
+                        <Field.Root>
+                            <Field.Label color="black" pt={1} fontSize="12px">
+                                Job Type
+                            </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} disabled={isLoading}>
+                        Save
+                    </Button>
+                </DialogFooter>
+
+                <DialogCloseTrigger color="black" onClick={() => setIsOpen(false)} />
+            </DialogContent>
+        </DialogRoot>
+    );
+}
+
+export default EditIndustryMaster;
--- a/src/Pages/MasterModule/IndustryMaster/IndustryMasterList.tsx
+++ b/src/Pages/MasterModule/IndustryMaster/IndustryMasterList.tsx
@@ -0,0 +1,180 @@
+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 { useGetIndustryMasterQuery, useIndustryMasterToggleMutation } from "../../../Redux/Service/industry.master.service";
+import EditIndustryMaster from "./EditIndustryMaster";
+import AddIndustryMaster from "./AddIndustryMaster";
+import SearchComponent from "../../../components/SearchComponent";
+import { useDebounce } from "../../../components/Hooks/useDebounce";
+import { Toaster, toaster } from "../../../components/ui/toaster";
+import { delay } from "../../../components/Utils";
+
+
+// table data
+
+const tableHeadRow = [
+    "Sr. No",
+    "Title",
+    "Action"
+
+];
+
+// const managepost: any[] = [
+//   ...Array.from({ length: 12 }, (_, i) => ({
+//     "Sr. No": i + 1,
+//     "Agency Name": "Lorem Ipsum",
+//     "RC no.": "Lorem Ipsum",
+//     "State": "Lorem Ipsum",
+//     "RC Status": "Active",
+//     "Registered Office Address": "Lorem Ipsum",
+//     "Website/Domain": "Lorem Ipsum",
+//     "GST no.": "Lorem Ipsum",
+//     "Action": (
+//       <HStack justifyContent="center">
+//         <ViewAgencyMaster/>
+//         <EditAgencyMaster />
+//         <Box>
+//           <Switch colorPalette={'teal'} size={"xs"}/>
+//         </Box>
+//       </HStack>
+//     ),
+//   })),
+// ];
+
+const IndustryMasterList = () => {
+    const [currentPage, setCurrentPage] = useState(1);
+    const [industryMasterToggle] = useIndustryMasterToggleMutation()
+    const [localData, setLocalData] = useState<any[]>([]);
+    const [searchTerm, setSearchTerm] = useState("");
+    const debouncedSearchTerm = useDebounce(searchTerm, 500);
+    const queryArgs = debouncedSearchTerm ? { page: currentPage, search: debouncedSearchTerm } : { page: currentPage };
+    const { data, refetch, isError, isFetching } = useGetIndustryMasterQuery(queryArgs)
+
+    useEffect(() => {
+        if (data?.data?.data) {
+            setLocalData(data?.data.data);
+        }
+    }, [data]);
+
+    const handleSearchChange = (value: string) => {
+        setSearchTerm(value);
+        setCurrentPage(1);
+    };
+
+    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 industryMasterToggle({ id: agencyId, is_active: newStatus }).unwrap();
+            toaster.create({
+                title: "Success",
+                description: "Status updated successfully",
+                type: "success",
+            });
+            await delay(500);
+            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">
+                {/* <ViewAgencyMaster agency={localData} id={agency.id} /> */}
+                <EditIndustryMaster id={agency.id} localData={localData} refetch={refetch} categories={agency.categories_masters_xid} />
+                <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"}>
+                        Industry Master
+                    </Text>
+
+                    <HStack >
+                        <SearchComponent
+                            value={searchTerm}
+                            onChange={handleSearchChange}
+                        />
+                        {/* <Button bgColor={'#EEEEEE'} pl={3} pr={3}><IoMdAdd /> <Text>Add</Text></Button> */}
+                        {/* <ViewAgencyAddModel /> */}
+                        <AddIndustryMaster 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}
+                    isLoading={isFetching}
+                    isError={isError}
+                />
+            </Box>
+            <Toaster />
+        </MainFrame>
+    )
+}
+export default IndustryMasterList
--- a/src/Pages/MasterModule/JobStatus/EditJobStatusModel.tsx
+++ b/src/Pages/MasterModule/JobStatus/EditJobStatusModel.tsx
@@ -1,35 +1,69 @@
 import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../../components/ui/dialog"
-import { Box, Field, IconButton, Input, Stack, Text, Textarea } 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 { 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, { isLoading }] = 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>
-                {/* <Button bg={"transparent"} size="sm">
-                    <MdOutlineRemoveRedEye style={{ cursor: "pointer", fontSize: "16px" }} />
-                </Button> */}
-                
-                 <FaRegEdit style={{ cursor: "pointer", fontSize: "16px" }}  color="#000"/>
-                
-
+                <Box bg={"transparent"} onClick={handleOpenModal}>
+                    <Edit />
+                </Box>
            </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">Edit</DialogTitle>
@@ -40,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} disabled={isLoading}>
                        Save
                    </Button>
                </DialogFooter>

                <DialogCloseTrigger color="black" />
            </DialogContent>
+            <Toaster />
        </DialogRoot >
-
    )
 }

--- a/src/Pages/MasterModule/JobStatus/JobStatus.tsx
+++ b/src/Pages/MasterModule/JobStatus/JobStatus.tsx
@@ -1,11 +1,15 @@
-import { Box, HStack, Image, 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, Toaster } from "../../../components/ui/toaster";
+import { useDebounce } from "../../../components/Hooks/useDebounce";
+import { delay } from "../../../components/Utils";



@@ -15,25 +19,109 @@ 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">
+//         <EditJobStatusModel />
+//         <Box>
+//           <Switch colorPalette={'teal'} size={"xs"} />
+//         </Box>
+//       </HStack>
+//     ),
+//   })),
+// ];
+
+const JobStatus = () => {
+  const [currentPage, setCurrentPage] = useState(1);
+  const [searchTerm, setSearchTerm] = useState("");
+  const debouncedSearchTerm = useDebounce(searchTerm, 500);
+  const queryArgs = debouncedSearchTerm ? { page: currentPage, search: debouncedSearchTerm } : { page: currentPage };
+  const { data, refetch, isError, isFetching } = useGetJobStatusQuery(queryArgs)
+  const [localData, setLocalData] = useState<any[]>([]);
+  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 handleSearchChange = (value: string) => {
+    setSearchTerm(value);
+    setCurrentPage(1);
+  };
+
+  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();
+      toaster.create({
+        title: "Success",
+        description: "Status updated successfully",
+        type: "success",
+      });
+      await delay(500);
+      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>
@@ -46,40 +134,34 @@ const JobStatus = () => {
          px={3}
        >
          <Text as={"span"} fontSize={"sm"} fontWeight={500} color={"#000"}>
-          Job Status
+            Job Status
          </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={"2xs"}
-                fontSize={"2sm"}
-                placeholder="Search..."
-                bgColor={'#EEEEEE'}
-                ps={8}
-              />
-            </InputGroup>
+            <SearchComponent
+              value={searchTerm}
+              onChange={handleSearchChange}
+            />
            {/* <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}
+          isLoading={isFetching}
+          isError={isError}
        />
-      </Box>       
+      </Box>
+      <Toaster />
    </MainFrame>
  )
 }
--- a/src/Pages/MasterModule/JobStatus/JobStatusAddModel.tsx
+++ b/src/Pages/MasterModule/JobStatus/JobStatusAddModel.tsx
@@ -1,32 +1,67 @@
 import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../../components/ui/dialog"
-import { Box, Field, IconButton, Input, Stack, Text, Textarea } from "@chakra-ui/react"
+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, { isLoading }] = 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} disabled={isLoading}>
                        Save
                    </Button>
                </DialogFooter>

-                <DialogCloseTrigger color="black" />
+                <DialogCloseTrigger color="black" onClick={() => setIsOpen(false)} />
            </DialogContent>
        </DialogRoot >

--- a/src/Pages/MasterModule/JobType/EditJobModel.tsx
+++ b/src/Pages/MasterModule/JobType/EditJobModel.tsx
@@ -1,62 +1,111 @@
-import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../../components/ui/dialog"
-import { Box, Field, IconButton, Input, Stack, Text, Textarea } from "@chakra-ui/react"
-import { Button } from "../../../components/ui/button"
-import { FiUpload } from "react-icons/fi";
-import { FaRegEdit } from "react-icons/fa";
+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 { useUpdateJobTypeMutation } from "../../../Redux/Service/job.type.service";
+import { toaster } from "../../../components/ui/toaster";
+
+function EditJobeModel({ id, localData, refetch }: { id: number, localData: any, refetch: VoidFunction }) {
+  const [jobtype, setJobType] = useState("");
+  const [updateJobType, { isLoading }] = useUpdateJobTypeMutation()
+  const [isOpen, setIsOpen] = useState(false);
+
+  const handleOpenModal = () => {
+    const template = localData?.find((item: any) => item.id === id);
+    if (template) {
+      setJobType(template.en_name);
+      setIsOpen(true);
+    }
+  };


-function EditJobeModel() {
+  const handleSubmit = async () => {
+    if (!jobtype.trim()) {
+      toaster.create({
+        title: "Error",
+        description: "Title and Subtitle cannot be empty.",
+        type: "error",
+      });
+      return;
+    }

+    const payload = {
+      id: id,
+      en_name: jobtype,
+    };

-   
-    return (
+    try {
+      await updateJobType(payload);
+      refetch()
+      setIsOpen(false);
+    } catch (error) {
+      console.error("Error updating template:", error);
+      alert("Failed to update template");
+    }
+  };

-        <DialogRoot placement="center">
-            <DialogTrigger asChild>
-                {/* <Button bg={"transparent"} size="sm">
-                    <MdOutlineRemoveRedEye style={{ cursor: "pointer", fontSize: "16px" }} />
-                </Button> */}
-                
-                 <FaRegEdit style={{ cursor: "pointer", fontSize: "16px" }}  color="#000"/>
-                
+  return (
+    <DialogRoot placement="center" open={isOpen} onOpenChange={({ open }) => setIsOpen(open)}>
+      <DialogTrigger asChild>
+        <Box bg={"transparent"} onClick={handleOpenModal}>
+          <Edit />
+        </Box>
+      </DialogTrigger>

-            </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
+          </DialogTitle>
+        </DialogHeader>

-            <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</DialogTitle>
-                </DialogHeader>
+        <DialogBody bg="white">
+          <Stack py={3}>
+            <Field.Root>
+              <Field.Label color="black" pt={1} fontSize="12px">
+                Job Type
+              </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} disabled={isLoading}>
+            Save
+          </Button>
+        </DialogFooter>

-                <DialogBody bg="white">
-                    <Stack py={3}>
-
-                        <Field.Root>
-                            <Field.Label color="black" pt={1} fontSize="12px">Job Type</Field.Label>
-                            <Input value="Lorem Ipsum" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-                        </Field.Root>
-                    </Stack>
-
-                </DialogBody>
-                <DialogFooter display="flex" justifyContent="center" pt={"2"}>
-                    <Button w="100%" bg="#02A0A0" color={"#fff"}>
-                        Save
-                    </Button>
-                </DialogFooter>
-
-                <DialogCloseTrigger color="black" />
-            </DialogContent>
-        </DialogRoot >
-
-    )
+        <DialogCloseTrigger color="black" onClick={() => setIsOpen(false)} />
+      </DialogContent>
+    </DialogRoot>
+  );
 }

-export default EditJobeModel
+export default EditJobeModel;
--- a/src/Pages/MasterModule/JobType/JobAddModel.tsx
+++ b/src/Pages/MasterModule/JobType/JobAddModel.tsx
@@ -1,32 +1,66 @@
 import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../../components/ui/dialog"
-import { Box, Field, IconButton, Input, Stack, Text, Textarea } from "@chakra-ui/react"
+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 { useCreateJobTypePostMutation } from "../../../Redux/Service/job.type.service";
+import { toaster } from "../../../components/ui/toaster";
+
+function JobAddModel({ refetch }: { refetch: VoidFunction }) {
+    const [jobType, setJobType] = useState("");
+    const [isOpen, setIsOpen] = useState(false);
+    const [createJobTypePost, { isLoading }] = useCreateJobTypePostMutation()
+
+    const handleOpenModal = () => {
+        setIsOpen(true);  // Open modal when clicking "Add"
+    };
+
+    const handleSubmit = async () => {
+        if (!jobType.trim()) {
+            toaster.create({
+                title: "Error",
+                description: "Title and Subtitle cannot be empty.",
+                type: "error",
+            });
+            return;
+        }
+
+        const payload = {
+            en_name: jobType,
+        };
+
+        try {
+            await createJobTypePost(payload);
+            refetch()
+            setIsOpen(false);
+        } catch (error) {
+            console.error("Error updating template:", error);
+            alert("Failed to update template");
+        }
+    };

-function JobAddModel() {
-   
    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 +71,28 @@ function JobAddModel() {

                        <Field.Root>
                            <Field.Label color="black" pt={1} fontSize="12px">Job Type</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={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"}>
+                    <Button w="100%" bg="#02A0A0" color={"#fff"} onClick={handleSubmit} disabled={isLoading}>
                        Save
                    </Button>
                </DialogFooter>

-                <DialogCloseTrigger color="black" />
+                <DialogCloseTrigger color="black" onClick={() => setIsOpen(false)} />
            </DialogContent>
        </DialogRoot >

--- a/src/Pages/MasterModule/JobType/JobType.tsx
+++ b/src/Pages/MasterModule/JobType/JobType.tsx
@@ -1,11 +1,16 @@
-import { Box, HStack, Image, 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 JobAddModel from "./JobAddModel";
 import EditJobeModel from "./EditJobModel";
+import { JobTypeData, useGetJobTypeQuery, useJobTypeToggleMutation } from "../../../Redux/Service/job.type.service";
+import { useEffect, useState } from "react";
+import SearchComponent from "../../../components/SearchComponent";
+import { toaster, Toaster } from "../../../components/ui/toaster";
+import { delay } from "../../../components/Utils";



@@ -15,25 +20,102 @@ 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">
+//         <EditJobeModel />
+//         <Box>
+//           <Switch colorPalette={'teal'} size={"xs"} />
+//         </Box>
+//       </HStack>
+//     ),
+//   })),
+// ];
+
+const JobType = () => {
+  const [currentPage, setCurrentPage] = useState(1);
+  const { data, refetch, isFetching, isError } = useGetJobTypeQuery(currentPage)
+  const [localData, setLocalData] = useState<any[]>([]);
+  const [searchTerm, setSearchTerm] = useState("");
+  const [jobTypeToggle] = useJobTypeToggleMutation()
+  console.log('DATA', data?.data.data);
+
+
+  useEffect(() => {
+    if (data?.data?.data) {
+      setLocalData(data?.data.data);
+    }
+  }, [data]);
+
+  const handlePageChange = (page: number) => {
+    setCurrentPage(page);
+  };
+
+  const filteredData = localData?.filter((agency) => {
+    const searchLower = searchTerm.toLowerCase();
+    const title = agency.en_name?.toLowerCase().includes(searchLower);
+    return title;
+  });
+
+  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 jobTypeToggle({ id: agencyId, is_active: newStatus }).unwrap();
+      toaster.create({
+        title: "Success",
+        description: "Status updated successfully",
+        type: "success",
+      });
+      await delay(500);
+      refetch()
+    } catch (error) {
+      console.error("Error updating privacy policy:", error);
+      setLocalData((prevData) =>
+        prevData.map((agency) =>
+          agency.id === agencyId ? { ...agency, is_active: currentStatus } : agency
+        )
+      );
+      toaster.create({
+        title: "Error",
+        description: "Please try again later",
+        type: "error",
+      });
+    }
+  };
+
+
+  const managepost = filteredData?.map((agency: JobTypeData, index: number) => ({
+    'id': (currentPage - 1) * (data?.data.per_page ?? 0) + index + 1,
+    "Sr. No": index + 1,
+    "Title": agency.en_name,
+
    "Action": (
      <HStack justifyContent="center">
-        <EditJobeModel />
+        <EditJobeModel id={agency.id} localData={localData} refetch={refetch} />
        <Box>
-          <Switch colorPalette={'teal'} size={"xs"}/>
+          <Switch
+            colorPalette={'teal'}
+            size={"xs"}
+            onChange={() => handleToggle(agency.id.toString(), Number(agency.is_active))}
+            checked={Boolean(Number(agency.is_active))}
+          />
        </Box>
      </HStack>
    ),
-  })),
-];
+  }));
+

-const JobType = () => {
  return (

    <MainFrame>
@@ -46,40 +128,38 @@ const JobType = () => {
          px={3}
        >
          <Text as={"span"} fontSize={"sm"} fontWeight={500} color={"#000"}>
-          Job Type
+            Job Type
          </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={"2xs"}
-                fontSize={"2sm"}
-                placeholder="Search..."
-                bgColor={'#EEEEEE'}
-                ps={8}
-              />
-            </InputGroup>
+            <SearchComponent
+              value={searchTerm}
+              onChange={(value) => {
+                setSearchTerm(value);
+                // setCurrentPage(1);
+                refetch()
+              }}
+            />
            {/* <Button bgColor={'#EEEEEE'} pl={3} pr={3}><IoMdAdd /> <Text>Add</Text></Button> */}
-            <JobAddModel />
+            <JobAddModel 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}
+          isLoading={isFetching}
+          isError={isError}
        />
-      </Box>       
+      </Box>
+      <Toaster />
    </MainFrame>
  )
 }
--- a/src/Pages/MasterModule/TemplateMaster/EditTemplateModel.tsx
+++ b/src/Pages/MasterModule/TemplateMaster/EditTemplateModel.tsx
@@ -1,100 +1,319 @@
-import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../../components/ui/dialog"
-import { Box, Field, IconButton, Input, Stack, Text, Textarea } from "@chakra-ui/react"
-import { Button } from "../../../components/ui/button"
+import {
+  DialogBody,
+  DialogCloseTrigger,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogRoot,
+  DialogTitle,
+} from "../../../components/ui/dialog";
+import {
+  Box,
+  Field,
+  Input,
+  Stack,
+} from "@chakra-ui/react";
+import { Button } from "../../../components/ui/button";
 import { FiUpload } from "react-icons/fi";
 import { useState } from "react";
-import { FaRegEdit } from "react-icons/fa";
+// import { FaRegEdit } from "react-icons/fa";
+import Edit from "../../../components/ActionIcons/Edit";
+import { Toaster, toaster } from "../../../components/ui/toaster";
+// import { Template } from "../../../Redux/Service/template.master.service";
+import axios from "axios";

+const IMGURL = import.meta.env.VITE_IMG_TEMPLATES
+const APIURL = import.meta.env.VITE_API_URL

-function EditTemplateModel() {
+function EditTemplateModel({ id, localData, refetch }: { id: number, localData: any, refetch: VoidFunction }) {
+  const [title, setTitle] = useState("");
+  const [subTitle, setSubTitle] = useState("");
+  const [userType, setUserType] = useState<number | "">("");
+  const [images, setImages] = useState<(File | string)[]>([]);
+  const [loading, setLoading] = useState(false);
+  // const [objectURLs, setObjectURLs] = useState<string[]>([]); // Store object URLs separately
+  // const [updateTemplateMaster] = useUpdateTemplateMasterMutation()
+  const [isOpen, setIsOpen] = useState(false);
+  // const [selectedTemplate, setSelectedTemplate] = useState<Template | null>(null);
+  const token = localStorage.getItem("token");

-    const [images, setImages] = useState<string[]>([]);
+  console.log(images);

-    const handleImageChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-      if (event.target.files) {
-        const selectedFiles = Array.from(event.target.files);
-  
-        const newImages = selectedFiles.map((file) => {
-          return URL.createObjectURL(file); // Convert to preview URL
+  const handleImageChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
+    if (event.target.files) {
+      const file = event.target.files[0];
+      if (!["image/jpeg", "image/jpg", "image/png"].includes(file.type)) {
+        toaster.create({
+          title: "Error",
+          description: "Only JPEG, JPG, and PNG files are allowed.",
+          type: "error",
        });
-  
-        setImages((prevImages) => [...prevImages, ...newImages]); // Append new images
+        return;
      }
-    };

-   
-    return (
+      // setImages((prevImages) => [...prevImages, file]);
+      if (file) {
+        setImages([file])
+      }
+    }
+  };

-        <DialogRoot placement="center">
-            <DialogTrigger asChild>
-                {/* <Button bg={"transparent"} size="sm">
-                    <MdOutlineRemoveRedEye style={{ cursor: "pointer", fontSize: "16px" }} />
-                </Button> */}
-                
-                 <FaRegEdit style={{ cursor: "pointer", fontSize: "16px" }}  color="#000"/>
-               
+  const handleOpenModal = () => {
+    const template = localData?.find((item: any) => item.id === id);
+    if (template) {
+      // setSelectedTemplate(template);
+      setTitle(template.post_template_translate.length > 0 ? template.post_template_translate[0].title : "");
+      setSubTitle(template.post_template_translate.length > 0 ? template.post_template_translate[0].sub_title : "");
+      setUserType(template.principle_type_xid?.toString() || "");

-            </DialogTrigger>
+      // Convert image URLs to File objects if needed
+      const templateImages = template.post_template_image.map((img: any) => `${IMGURL}${img.image_name}`);
+      setImages(templateImages);

-            <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>
+      setIsOpen(true);
+    }
+  };

-                <DialogBody bg="white">
-                    <Stack py={3}>

-                        <Field.Root>
-                            <Field.Label color="black" pt={1} fontSize="12px">Template Name</Field.Label>
-                            <Input placeholder="" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
+  const handleSubmit = async () => {
+    if (!title.trim() || !subTitle.trim()) {
+      toaster.create({
+        title: "Error",
+        description: "Title and Subtitle cannot be empty.",
+        type: "error",
+      });
+      return;
+    }

-                            
-                            <Field.Label color="black" pt={1} fontSize="12px">Images</Field.Label>
-                            <Box display="flex" alignItems="center" justifyContent="space-between" px={3} bgColor="#EEEEEE" border="none" width="100%"  height="50px" cursor="pointer"  position="relative">
-                            <Input type="file" accept="image/*" opacity={0} position="absolute" bgColor="#EEEEEE" border="none" pl={1} width="100%" height="100%"  cursor="pointer" onChange={handleImageChange}/>
-                            <Box display="flex" gap={2} overflow="hidden">
-                                {images.length > 0 ? (
-                                images.map((img, index) => (
-                                    <img
-                                    key={index}
-                                    src={img}
-                                    alt={`Uploaded ${index}`}
-                                    style={{ maxHeight: "40px", maxWidth: "70px", objectFit: "contain" }}
-                                    />
-                                ))
-                                ) : (
-                                <Box width="70px" height="40px" /> // Placeholder to maintain layout
-                                )}
-                            </Box>
-                              <FiUpload color="#000" />
-                            </Box>
-                           
-                            {/* <Input placeholder="" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" /> */}
+    if (userType === "" || isNaN(Number(userType))) {
+      toaster.create({
+        title: "Error",
+        description: "Please select a valid user type.",
+        type: "error",
+      });
+      return;
+    }

-                        </Field.Root>
-                    </Stack>
+    // const newImages = images.filter((image) => image instanceof File);

-                </DialogBody>
-                <DialogFooter display="flex" justifyContent="center" pt={"2"}>
-                    <Button w="100%" bg="#02A0A0" color={"#fff"}>
-                        Save
-                    </Button>
-                </DialogFooter>
+    if (images.length === 0) {
+      toaster.create({
+        title: "Error",
+        description: "Please upload at least one image.",
+        type: "error",
+      });
+      return;
+    }

-                <DialogCloseTrigger color="black" />
-            </DialogContent>
-        </DialogRoot >
+    setLoading(true);

-    )
+    const formData = new FormData();
+    formData.append("id", `${id}`);
+    formData.append("principle_type_xid", `${userType}`);
+    formData.append("title", title);
+    formData.append("sub_title", subTitle);
+
+    images.forEach((image, index) => {
+      if (image instanceof File) {
+        formData.append(`image_name[${index}]`, image, image.name);
+      }
+    });
+
+    try {
+      // await updateTemplateMaster(formData);
+      if (token) {
+        await axios.post(`${APIURL}/template-update`, formData, {
+          headers: {
+            'Content-Type': 'multipart/form-data',
+            'access-token': `${token}`,
+          },
+          // withCredentials: true,
+        });
+      }
+      setIsOpen(false);
+      setLoading(false);
+      refetch()
+    } catch (error: any) {
+      console.error("Error updating template:", error);
+      setLoading(false);
+      toaster.create({
+        title: "Error",
+        description: `${error.response?.data?.message || "Please try again later."}`,
+        type: "error",
+      });
+    }
+  };
+
+
+  // const handleSubmit = async () => {
+  //   if (!title.trim() || !subTitle.trim()) {
+  //     toaster.create({
+  //       title: "Error",
+  //       description: "Title and Subtitle cannot be empty.",
+  //       type: "error",
+  //     });
+  //     return;
+  //   }
+
+  //   if (userType === "" || isNaN(Number(userType))) {
+  //     toaster.create({
+  //       title: "Error",
+  //       description: "Please select a valid user type.",
+  //       type: "error",
+  //     });
+  //     return;
+  //   }
+
+  //   if (images.length === 0) {
+  //     toaster.create({
+  //       title: "Error",
+  //       description: "Please upload at least one image.",
+  //       type: "error",
+  //     });
+  //     return;
+  //   }
+
+  //   const existingImageUrls = images.filter((img) => typeof img === "string") as string[];
+  //   const newBase64Images = images.filter((img) => typeof img === "string" && img.startsWith("data:image")) as string[];
+
+  //   const payload = {
+  //     id: id,
+  //     principle_type_xid: userType,
+  //     title,
+  //     sub_title: subTitle,
+  //     image_name: [...existingImageUrls, ...newBase64Images], // Send only Base64 strings
+  //   };
+
+  //   try {
+  //     await updateTemplateMaster(payload)
+  //     setIsOpen(false)
+  //   } catch (error) {
+  //     console.error("Error creating template:", error);
+  //     alert("Failed to create template");
+  //   }
+  // };
+
+  return (
+    <DialogRoot placement="center" open={isOpen} onOpenChange={({ open }) => setIsOpen(open)}>
+      {/* <Button bg={"transparent"} size="sm">
+                        <MdOutlineRemoveRedEye style={{ cursor: "pointer", fontSize: "16px" }} />
+                    </Button> */}
+      <Box bg={"transparent"} onClick={handleOpenModal}>
+        <Edit />
+      </Box>
+
+
+      <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</DialogTitle>
+        </DialogHeader>
+
+        <DialogBody bg="white">
+          <Stack py={3}>
+
+            <Field.Root>
+              <Field.Label color="black" pt={1} fontSize="12px">Title</Field.Label>
+              <Input
+                placeholder="Enter Title"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+                value={title}
+                onChange={(e) => setTitle(e.target.value)}
+              />
+            </Field.Root>
+
+            <Field.Root>
+              <Field.Label color="black" pt={1} fontSize="12px">Subtitle</Field.Label>
+              <Input
+                placeholder="Enter subtitle"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+                value={subTitle}
+                onChange={(e) => setSubTitle(e.target.value)}
+              />
+            </Field.Root>
+
+            <Field.Root>
+              <Field.Label color="black" pt={1} fontSize="12px">Select User Type</Field.Label>
+              <Box bgColor="#EEEEEE" borderRadius="md" p={1}>
+                <select
+                  style={{
+                    width: "100%",
+                    background: "transparent",
+                    color: "black",
+                    border: "none",
+                    fontSize: "12px",
+                    height: "30px",
+                    outline: "none",
+                  }}
+                  value={userType}
+                  onChange={(e) => setUserType(Number(e.target.value))}
+                >
+                  <option value="">Select User Type</option>
+                  <option value="2">Recruiter</option>
+                  <option value="3">Jobseeker</option>
+                </select>
+              </Box>
+            </Field.Root>
+
+            <Field.Root>
+              <Field.Label color="black" pt={1} fontSize="12px">Images</Field.Label>
+              <Box display="flex" alignItems="center" justifyContent="space-between" px={3} bgColor="#EEEEEE" border="none" width="100%" height="50px" cursor="pointer" position="relative">
+                <Input type="file" accept="image/*" opacity={0} position="absolute" bgColor="#EEEEEE" border="none" pl={1} width="100%" height="100%" cursor="pointer" onChange={handleImageChange} />
+                <Box display="flex" gap={2} overflow="hidden">
+                  {images.length > 0 ? (
+                    images.map((img, index) => (
+                      <img
+                        key={index}
+                        src={img instanceof File ? URL.createObjectURL(img) : img}
+                        alt={`Uploaded ${index}`}
+                        style={{ maxHeight: "40px", maxWidth: "70px", objectFit: "contain" }}
+                      />
+                    ))
+                  ) : (
+                    <Box width="70px" height="40px" /> // Placeholder to maintain layout
+                  )}
+                </Box>
+                <FiUpload color="#000" />
+              </Box>
+              <Box>
+
+              </Box>
+
+              {/* <Input placeholder="" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" /> */}
+
+            </Field.Root>
+          </Stack>
+
+        </DialogBody>
+        <DialogFooter display="flex" justifyContent="center" pt={"2"}>
+          <Button w="100%" bg="#02A0A0" color={"#fff"} onClick={handleSubmit} disabled={loading}>
+            Save
+          </Button>
+        </DialogFooter>
+
+        <DialogCloseTrigger color="black" onClick={() => setIsOpen(false)} />
+      </DialogContent>
+      <Toaster />
+    </DialogRoot >
+  );
 }

-export default EditTemplateModel
+export default EditTemplateModel;
--- a/src/Pages/MasterModule/TemplateMaster/TemplateAddModel.tsx
+++ b/src/Pages/MasterModule/TemplateMaster/TemplateAddModel.tsx
@@ -1,50 +1,163 @@
 import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../../components/ui/dialog"
-import { Box, Field, IconButton, Input, Stack, Text, Textarea } from "@chakra-ui/react"
+import { Box, Field, Input, Stack, Text } from "@chakra-ui/react"
 import { IoMdAdd } from "react-icons/io"
 import { Button } from "../../../components/ui/button"
 import { FiUpload } from "react-icons/fi";
-import { useState } from "react";
+import { useEffect, useState } from "react";
+// import { useCreateTemplatePostMutation } from "../../../Redux/Service/template.master.service";
+import { Toaster, toaster } from "../../../components/ui/toaster"
+import axios from "axios";

+const APIURL = import.meta.env.VITE_API_URL

-function TemplateAddModel() {
+function TemplateAddModel({ refetch }: { refetch: VoidFunction }) {
+    const [title, setTitle] = useState("");
+    const [subTitle, setSubTitle] = useState("");
+    const [userType, setUserType] = useState<number | "">("");
+    const [images, setImages] = useState<(File | string)[]>([]);
+    // const [createTemplatePost] = useCreateTemplatePostMutation()
+    const [isOpen, setIsOpen] = useState(false);
+    const [isLoading, setIsLoading] = useState(false);
+    const token = localStorage.getItem("token");

-    const [images, setImages] = useState<string[]>([]);
+    useEffect(() => {
+        if (!isOpen) {
+            setTitle("");
+            setSubTitle("");
+            setUserType("");
+            setImages([]);
+        }
+    }, [isOpen]);

-    const handleImageChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-      if (event.target.files) {
-        const selectedFiles = Array.from(event.target.files);
-  
-        const newImages = selectedFiles.map((file) => {
-          return URL.createObjectURL(file); // Convert to preview URL
-        });
-  
-        setImages((prevImages) => [...prevImages, ...newImages]); // Append new images
-      }
+    if (!token) {
+        console.error("No token found in localStorage!");
+        return null;
+    }
+    
+    const handleOpenModal = () => {
+        setIsOpen(true);  // Open modal when clicking "Add"
    };

-   
+
+    const handleImageChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
+        if (event.target.files) {
+            const file = event.target.files[0];
+            if (!["image/jpeg", "image/jpg", "image/png"].includes(file.type)) {
+                toaster.create({
+                    title: "Error",
+                    description: "Only JPEG, JPG, and PNG files are allowed.",
+                    type: "error",
+                });
+                return;
+            }
+
+            // setImages((prevImages) => [...prevImages, file]);
+            if(file){
+                setImages([file])
+            }
+        }
+    };
+
+
+    const handleSubmit = async () => {
+        if (!title || !subTitle || images.length === 0) {
+            toaster.create({
+                title: "Error",
+                description: "Please fill in all required fields and upload at least one image.",
+                type: "error",
+            });
+            return;
+        }
+
+        if (userType === "" || isNaN(Number(userType))) {
+            toaster.create({
+                title: "Error",
+                description: "Please select a valid user type.",
+                type: "error",
+            });
+            return;
+        }
+
+        // const payload = {
+        //     id: id,
+        //     principle_type_xid: userType,
+        //     title,
+        //     sub_title: subTitle,
+        //     image_name: images.filter((img) => typeof img === "string"), // Send only Base64 strings
+        // };
+
+        setIsLoading(true);
+
+        const formData = new FormData();
+        formData.append("principle_type_xid", `${userType}`);
+        formData.append("title", title);
+        formData.append("sub_title", subTitle);
+
+        images.forEach((image, index) => {
+            if (image instanceof File) {
+                formData.append(`image_name[${index}]`, image, image.name);  // Ensure indexed naming
+            }
+        });
+
+        if (token) {
+            const payload = JSON.parse(atob(token.split(".")[1]));
+            console.log("Token Payload:", payload);
+        }
+
+        try {
+            // await createTemplatePost(formData)
+            if (token) {
+                await axios.post(`${APIURL}/template-store`, formData, {
+                    headers: {
+                        'Content-Type': 'multipart/form-data',
+                        'access-token': `${token}`,
+                    },
+                    // withCredentials: true,
+                });
+            }
+            refetch();
+            setTitle("");
+            setSubTitle("");
+            setUserType("");
+            setImages([]);
+            setIsOpen(false)
+            setIsLoading(false);
+        } catch (error: any) {
+            console.error("Error creating template:", error);
+            // alert("Failed to create template");
+            toaster.create({
+                title: "Error",
+                description: `${error.response?.data?.message || "Please try again later."}`,
+                type: "error",
+            });
+        }
+    };
+
+    // console.log("Token stored:", window.localStorage.getItem("token"))      
+
+
    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>
@@ -54,30 +167,79 @@ function TemplateAddModel() {
                    <Stack py={3}>

                        <Field.Root>
-                            <Field.Label color="black" pt={1} fontSize="12px">Template Name</Field.Label>
-                            <Input placeholder="" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
+                            <Field.Label color="black" pt={1} fontSize="12px">Title</Field.Label>
+                            <Input
+                                placeholder="Enter Title"
+                                bgColor="#EEEEEE"
+                                color="black"
+                                border="none"
+                                pl={1}
+                                fontSize="12px"
+                                height="30px"
+                                value={title}
+                                onChange={(e) => setTitle(e.target.value)}
+                            />
+                        </Field.Root>

-                            
+                        <Field.Root>
+                            <Field.Label color="black" pt={1} fontSize="12px">Subtitle</Field.Label>
+                            <Input
+                                placeholder="Enter subtitle"
+                                bgColor="#EEEEEE"
+                                color="black"
+                                border="none"
+                                pl={1}
+                                fontSize="12px"
+                                height="30px"
+                                value={subTitle}
+                                onChange={(e) => setSubTitle(e.target.value)}
+                            />
+                        </Field.Root>
+
+                        <Field.Root>
+                            <Field.Label color="black" pt={1} fontSize="12px">Select User Type</Field.Label>
+                            <Box bgColor="#EEEEEE" borderRadius="md" p={1}>
+                                <select
+                                    style={{
+                                        width: "100%",
+                                        background: "transparent",
+                                        color: "black",
+                                        border: "none",
+                                        fontSize: "12px",
+                                        height: "30px",
+                                        outline: "none",
+                                    }}
+                                    value={userType}
+                                    onChange={(e) => setUserType(Number(e.target.value))}
+                                >
+                                    <option value="">Select User Type</option>
+                                    <option value="2">Recruiter</option>
+                                    <option value="3">Jobseeker</option>
+                                </select>
+                            </Box>
+                        </Field.Root>
+
+                        <Field.Root>
                            <Field.Label color="black" pt={1} fontSize="12px">Images</Field.Label>
-                            <Box display="flex" alignItems="center" justifyContent="space-between" px={3} bgColor="#EEEEEE" border="none" width="100%"  height="50px" cursor="pointer"  position="relative">
-                            <Input type="file" accept="image/*" opacity={0} position="absolute" bgColor="#EEEEEE" border="none" pl={1} width="100%" height="100%"  cursor="pointer" onChange={handleImageChange}/>
-                            <Box display="flex" gap={2} overflow="hidden">
-                                {images.length > 0 ? (
-                                images.map((img, index) => (
-                                    <img
-                                    key={index}
-                                    src={img}
-                                    alt={`Uploaded ${index}`}
-                                    style={{ maxHeight: "40px", maxWidth: "70px", objectFit: "contain" }}
-                                    />
-                                ))
-                                ) : (
-                                <Box width="70px" height="40px" /> // Placeholder to maintain layout
-                                )}
+                            <Box display="flex" alignItems="center" justifyContent="space-between" px={3} bgColor="#EEEEEE" border="none" width="100%" height="50px" cursor="pointer" position="relative">
+                                <Input type="file" accept="image/*" opacity={0} position="absolute" bgColor="#EEEEEE" border="none" pl={1} width="100%" height="100%" cursor="pointer" onChange={handleImageChange} />
+                                <Box display="flex" gap={2} overflow="hidden">
+                                    {images.length > 0 ? (
+                                        images.map((img, index) => (
+                                            <img
+                                                key={index}
+                                                src={img instanceof File ? URL.createObjectURL(img) : img}
+                                                alt={`Uploaded ${index}`}
+                                                style={{ maxHeight: "40px", maxWidth: "70px", objectFit: "contain" }}
+                                            />
+                                        ))
+                                    ) : (
+                                        <Box width="70px" height="40px" /> // Placeholder to maintain layout
+                                    )}
+                                </Box>
+                                <FiUpload color="#000" />
                            </Box>
-                              <FiUpload color="#000" />
-                            </Box>
-                           
+
                            {/* <Input placeholder="" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" /> */}

                        </Field.Root>
@@ -85,13 +247,14 @@ function TemplateAddModel() {

                </DialogBody>
                <DialogFooter display="flex" justifyContent="center" pt={"2"}>
-                    <Button w="100%" bg="#02A0A0" color={"#fff"}>
+                    <Button w="100%" bg="#02A0A0" color={"#fff"} onClick={handleSubmit} disabled={isLoading}>
                        Save
                    </Button>
                </DialogFooter>

-                <DialogCloseTrigger color="black" />
+                <DialogCloseTrigger color="black" onClick={() => setIsOpen(false)} />
            </DialogContent>
+            <Toaster />
        </DialogRoot >

    )
--- a/src/Pages/MasterModule/TemplateMaster/TemplateMaster.tsx
+++ b/src/Pages/MasterModule/TemplateMaster/TemplateMaster.tsx
@@ -1,52 +1,145 @@
-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 DataTable from "../../../components/DataTable";
 import { Switch } from "../../../components/ui/switch";
-import img from "../../../assets/waterfall.jpg"
-import Templateimg from "../../../assets/Template_img.png"
+// import img from "../../../assets/waterfall.jpg"
+// import Templateimg from "../../../assets/Template_img.png"
 import TemplateAddModel from "./TemplateAddModel";
 import EditTemplateModel from "./EditTemplateModel";
+import { Template, useGetTemplateMasterQuery, useTemplateMasterToggleMutation } from "../../../Redux/Service/template.master.service";
+import { useEffect, useState } from "react";
+import SearchComponent from "../../../components/SearchComponent";
+import { toaster, Toaster } from "../../../components/ui/toaster";
+import { delay } from "../../../components/Utils";

-
+const APIURL = import.meta.env.VITE_IMG_TEMPLATES

 // table data

 const tableHeadRow = [
  "Sr. No",
  "Title",
+  "User Type",
  "Images",
  "Action"
-  
 ];

-const managepost: any[] = [
-  ...Array.from({ length: 12 }, (_, i) => ({
-    "Sr. No": i + 1,
-    "Title": "Lorem Ipsum",
-    "Images": (
-      // <Image w={50} src={img} />
-      <HStack >
-      <Image w={100} h={50} src={img} />
-      <Image w={100} h={50} src={Templateimg} />
-      </HStack>
+// const managepost: any[] = [
+//   ...Array.from({ length: 12 }, (_, i) => ({
+//     "Sr. No": i + 1,
+//     "Title": "Lorem Ipsum",
+//     "Images": (
+//       // <Image w={50} src={img} />
+//       <HStack >
+//         <Image rounded={'lg'} w={100} h={50} src={img} />
+//         <Image rounded={'lg'} w={100} h={50} src={Templateimg} />
+//       </HStack>
+//     ),

-
-    ),
-    
-    "Action": (
-      <HStack justifyContent="center">
-        <EditTemplateModel />
-        <Box>
-          <Switch colorPalette={'teal'} size={"xs"}/>
-        </Box>
-      </HStack>
-    ),
-  })),
-];
+//     "Action": (
+//       <HStack justifyContent="center">
+//         <EditTemplateModel />
+//         <Box>
+//           <Switch colorPalette={'teal'} size={"xs"} />
+//         </Box>
+//       </HStack>
+//     ),
+//   })),
+// ];

 const TemplateMaster = () => {
+  const [currentPage, setCurrentPage] = useState(1);
+  const { data, refetch, isFetching, isError } = useGetTemplateMasterQuery(currentPage)
+  const [localData, setLocalData] = useState<any[]>([]);
+  const [templateMasterToggle] = useTemplateMasterToggleMutation();
+  const [searchTerm, setSearchTerm] = useState("");
+  console.log('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 templateMasterToggle({ id: agencyId, is_active: newStatus }).unwrap();
+      toaster.create({
+        title: "Success",
+        description: "Status updated successfully",
+        type: "success",
+      });
+      await delay(500);
+      refetch()
+    } catch (error) {
+      console.error("Error updating privacy policy:", error);
+      setLocalData((prevData) =>
+        prevData.map((agency) =>
+          agency.id === agencyId ? { ...agency, is_active: currentStatus } : agency
+        )
+      );
+      toaster.create({
+        title: "Error",
+        description: "Please try again later",
+        type: "error",
+      });
+    }
+  };
+
+  const filteredData = localData?.filter((agency) =>
+    agency.post_template_translate[0].title.toLowerCase().includes(searchTerm.toLowerCase())
+  );
+
+  const activeCount = filteredData?.filter((a: any) => a.is_active === 1).length ?? 0;
+
+  const managepost = filteredData?.map((agency: Template, index: number) => {
+    const isOnlyActive = activeCount === 1 && Number(agency.is_active) === 1;
+
+    return {
+      'id': agency.id,
+      "Sr. No": (currentPage - 1) * (data?.data.per_page ?? 0) + index + 1,
+      "Title": agency.post_template_translate.length > 0
+        ? agency.post_template_translate[0].title
+        : "N/A",
+      "User Type": agency.principle_type_xid === 2 ? 'Recruiter' : 'Job Seeker',
+      "Images": (
+        // <Image w={50} src={img} />
+        <HStack>
+          {agency.post_template_image.map((img) => (
+            <Image key={img.id} rounded={'lg'} w={100} h={50} src={`${APIURL}${img.image_name}`} />
+          ))}
+
+          {/* <Image rounded={'lg'} w={100} h={50} src={Templateimg} /> */}
+        </HStack>
+      ),
+
+      "Action": (
+        <HStack justifyContent="center">
+          <EditTemplateModel id={agency.id} localData={localData} refetch={refetch} />
+          <Box>
+            <Switch
+              colorPalette={'teal'}
+              size={"xs"}
+              onChange={() => handleToggle(agency.id.toString(), Number(agency.is_active ?? 0))}
+              checked={Boolean(Number(agency.is_active))}
+              disabled={isOnlyActive}
+            />
+          </Box>
+        </HStack>
+      )
+    }
+  });
+
  return (

    <MainFrame>
@@ -59,11 +152,11 @@ const TemplateMaster = () => {
          px={3}
        >
          <Text as={"span"} fontSize={"sm"} fontWeight={500} color={"#000"}>
-          Template Master
+            Template Master
          </Text>

          <HStack >
-            <InputGroup 
+            {/* <InputGroup
              startElement={
                <LuSearch fontSize={"xs"} style={{ position: 'relative', left: '10px' }} />
              }
@@ -76,23 +169,36 @@ const TemplateMaster = () => {
                colorPalette={"blue"}
                _focus={{ border: "1px solid #02A0A0" }}
                rounded={"md"}
-                size={"2xs"}
-                fontSize={"2sm"}
+                size={"xs"}
+                fontSize={"sm"}
                placeholder="Search..."
                bgColor={'#EEEEEE'}
                ps={8}
              />
-            </InputGroup>
-            {/* <Button bgColor={'#EEEEEE'} pl={3} pr={3}><IoMdAdd /> <Text>Add</Text></Button> */}
-            <TemplateAddModel />
+            </InputGroup> */}
+            <SearchComponent
+              value={searchTerm}
+              onChange={setSearchTerm}
+            />
+            <TemplateAddModel 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}
+          isLoading={isFetching}
+          isError={isError}
        />
-      </Box>       
+      </Box>
+      <Toaster />
    </MainFrame>
  )
 }
--- a/src/Pages/MasterModule/WorkspaceMode/EditWorkModel.tsx
+++ b/src/Pages/MasterModule/WorkspaceMode/EditWorkModel.tsx
@@ -1,61 +1,118 @@
-import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../../components/ui/dialog"
-import { Box, Field, IconButton, Input, Stack, Text, Textarea } from "@chakra-ui/react"
-import { Button } from "../../../components/ui/button"
-import { FaRegEdit } from "react-icons/fa";
+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 { FaRegEdit } from "react-icons/fa";
+import Edit from "../../../components/ActionIcons/Edit";
+import { useState } from "react";
+import { toaster } from "../../../components/ui/toaster";
+import { useUpdateWorkSpaceMutation } from "../../../Redux/Service/workspace.mode";
+
+function EditWorkModel({ localData, refetch }: {localData: any, refetch: VoidFunction}) {
+  const [title, setTitle] = useState(localData?.en_name);
+  const [isOpen, setIsOpen] = useState(false);
+  const [updateWorkSpace, { isLoading }] = useUpdateWorkSpaceMutation()
+  console.log("localData", localData)
+
+  const handleOpenModal = () => {
+    // const template = localData?.find((item: any) => item.id === id);
+    if (localData) {
+      setIsOpen(true);
+      // setTitle(localData?.localData.en_name);
+    }
+  };


-function EditWorkModel() {
+  const handleSubmit = async () => {
+    if (!title.trim()) {
+      toaster.create({
+        title: "Error",
+        description: "Title field cannot be empty.",
+        type: "error",
+      });
+      return;
+    }

+    const payload = {
+      id: localData?.id,
+      en_name: title
+    };

-   
-    return (
+    try {
+      await updateWorkSpace(payload).unwrap();
+      refetch()
+      setIsOpen(false);
+    } catch (error) {
+      console.error("Error updating template:", error);
+      alert("Failed to update template");
+    }
+  };

-        <DialogRoot placement="center">
-            <DialogTrigger asChild>
-                {/* <Button bg={"transparent"} size="sm">
-                    <MdOutlineRemoveRedEye style={{ cursor: "pointer", fontSize: "16px" }} />
-                </Button> */}
-                
-                 <FaRegEdit style={{ cursor: "pointer", fontSize: "16px" }}  color="#000"/>
-                
+  return (
+    <DialogRoot placement="center" open={isOpen} onOpenChange={({ open }) => setIsOpen(open)}>
+      <DialogTrigger asChild>
+        <Box bg={"transparent"} onClick={handleOpenModal}>
+          <Edit />
+        </Box>
+      </DialogTrigger>

-            </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
+          </DialogTitle>
+        </DialogHeader>

-            <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</DialogTitle>
-                </DialogHeader>
+        <DialogBody bg="white">
+          <Stack py={3}>
+            <Field.Root>
+              <Field.Label color="black" pt={1} fontSize="12px">
+                Workspace Mode
+              </Field.Label>
+              <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"} onClick={handleSubmit} disabled={isLoading}>
+            Save
+          </Button>
+        </DialogFooter>

-                <DialogBody bg="white">
-                    <Stack py={3}>
-
-                        <Field.Root>
-                            <Field.Label color="black" pt={1} fontSize="12px">Workspace Mode</Field.Label>
-                            <Input value="Lorem Ipsum" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-                        </Field.Root>
-                    </Stack>
-
-                </DialogBody>
-                <DialogFooter display="flex" justifyContent="center" pt={"2"}>
-                    <Button w="100%" bg="#02A0A0" color={"#fff"}>
-                        Save
-                    </Button>
-                </DialogFooter>
-
-                <DialogCloseTrigger color="black" />
-            </DialogContent>
-        </DialogRoot >
-
-    )
+        <DialogCloseTrigger color="black" />
+      </DialogContent>
+    </DialogRoot>
+  );
 }

-export default EditWorkModel
+export default EditWorkModel;
--- a/src/Pages/MasterModule/WorkspaceMode/WorkAddModel.tsx
+++ b/src/Pages/MasterModule/WorkspaceMode/WorkAddModel.tsx
@@ -1,32 +1,73 @@
 import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../../components/ui/dialog"
-import { Box, Field, IconButton, Input, Stack, Text, Textarea } from "@chakra-ui/react"
+import { Field, Input, Stack, Text } from "@chakra-ui/react"
 import { IoMdAdd } from "react-icons/io"
 import { Button } from "../../../components/ui/button"
+import { useEffect, useState } from "react";
+import { useCreateWorkspacePostMutation } from "../../../Redux/Service/workspace.mode";
+import { Toaster, toaster } from "../../../components/ui/toaster";
+
+function WorkAddModel({ refetch }: { refetch: VoidFunction }) {
+    const [title, setTitle] = useState('')
+    const [isOpen, setIsOpen] = useState(false);
+    const [createWorkspacePost, { isLoading }] = useCreateWorkspacePostMutation()
+
+    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 = {
+            en_name: title,
+        };
+
+        try {
+            await createWorkspacePost(payload);
+            refetch()
+            setIsOpen(false);
+            setTitle('')
+        } catch (error) {
+            console.error("Error updating template:", error);
+            alert("Failed to update template");
+        }
+    };
+
+    useEffect(() => {
+        if (!isOpen) {
+            setTitle("");
+        }
+    }, [isOpen]);

-function WorkAddModel() {
-   
    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,19 +78,30 @@ function WorkAddModel() {

                        <Field.Root>
                            <Field.Label color="black" pt={1} fontSize="12px">Workspace Mode</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} disabled={isLoading}>
                        Save
                    </Button>
                </DialogFooter>

-                <DialogCloseTrigger color="black" />
+                <DialogCloseTrigger color="black" onClick={() => setIsOpen(false)} />
            </DialogContent>
+            <Toaster />
        </DialogRoot >

    )
--- a/src/Pages/MasterModule/WorkspaceMode/WorkspaceMode.tsx
+++ b/src/Pages/MasterModule/WorkspaceMode/WorkspaceMode.tsx
@@ -1,11 +1,13 @@
-import { Box, HStack, Image, 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,102 @@ 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, isError, isFetching } = 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();
+      toaster.create({
+        title: "Success",
+        description: "Status updated successfully",
+        type: "success",
+      });
+      refetch()
+    } catch (error) {
+      console.error("Error updating privacy policy:", error);
+      toaster.create({
+        title: "Error",
+        description: "Please try again later.",
+        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.length > 12
+      ? agency.en_name.slice(0, 12) + '...'
+      : 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 +125,38 @@ 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={"2xs"}
-                fontSize={"2sm"}
-                placeholder="Search..."
-                bgColor={'#EEEEEE'}
-                ps={8}
-              />
-            </InputGroup>
+            <SearchComponent
+              value={searchTerm}
+              onChange={(value) => {
+                setSearchTerm(value);
+                // setCurrentPage(1);
+                refetch()
+              }}
+            />
            {/* <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}
+          isLoading={isFetching}
+          isError={isError}
        />
-      </Box>       
+      </Box>
+      <Toaster />
    </MainFrame>
  )
 }
--- a/src/Pages/Profile/ChangePassword.tsx
+++ b/src/Pages/Profile/ChangePassword.tsx
@@ -1,57 +1,247 @@

-import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../components/ui/dialog"
-import { Field, Grid, Heading, Input, Stack, Text } from "@chakra-ui/react"
-import { FaRegEdit } from "react-icons/fa";
+import { DialogCloseTrigger, Field, IconButton, Input, Stack, Text } from "@chakra-ui/react";
 import { Button } from "../../components/ui/button";
-import EnterPassword from "./EnterPassword";
-function Changepassword() {
+import { DialogBody, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle } from "../../components/ui/dialog";
+// import EnterPassword from "./EnterPassword";
+import { useForm } from "react-hook-form";
+import { useEffect, useState } from "react";
+import { toaster, Toaster } from "../../components/ui/toaster";
+import { useNewPasswordSetMutation } from "../../Redux/Service/profile.password";
+import { LuEye, LuEyeOff } from "react-icons/lu";
+import { InputGroup } from "../../components/ui/input-group";
+
+type EnterPasswordProps = {
+    onClose: () => void;
+    isOpen: boolean;
+};
+
+type FormData = {
+    new_password: string;
+    confirm_password: string;
+};
+
+function Changepassword({ onClose, isOpen }: EnterPasswordProps) {
+    const [showOldPassword, setShowOldPassword] = useState(false);
+    const [showNewPassword, setShowNewPassword] = useState(false);
+    const [newPasswordSet] = useNewPasswordSetMutation()
+    const [isLoading, setIsLoading] = useState(false);
+    const {
+        register,
+        handleSubmit,
+        formState: { errors },
+        setError,
+        clearErrors,
+        watch,
+        reset,
+    } = useForm<FormData>({
+        defaultValues: {
+            new_password: '',
+            confirm_password: ''
+        }
+    });
+
+    const newPassword = watch("new_password");
+    const confirmPassword = watch("confirm_password");
+
+    useEffect(() => {
+        if (newPassword && confirmPassword && newPassword !== confirmPassword) {
+            setError("confirm_password", {
+                type: "manual",
+                message: "Passwords do not match"
+            });
+        } else if (confirmPassword) {
+            clearErrors("confirm_password");
+        }
+    }, [newPassword, confirmPassword, setError, clearErrors]);
+
+
+    const onSubmit = async (data: FormData) => {
+
+        if (data.new_password === '' || data.confirm_password === '') {
+            return
+        }
+
+        if (data.new_password !== data.confirm_password) {
+            setError("confirm_password", {
+                type: "manual",
+                message: "Passwords do not match"
+            });
+            return;
+        }
+
+        console.log('ERROR', errors)
+        console.log('Change submitted:', data);
+
+        clearErrors("confirm_password");
+
+        setIsLoading(true);
+        const payload = {
+            new_password: data.new_password,
+            confirm_password: data.confirm_password
+        }
+
+        try {
+            const res = await newPasswordSet(payload).unwrap()
+
+            if (res.status === 'success') {
+                toaster.create({
+                    title: "Password changed Successfully",
+                    type: "success",
+                });
+                onClose()
+            } else {
+                toaster.create({
+                    title: res.data.message || "Invalid password",
+                    type: "error",
+                });
+
+            }
+            reset()
+        } catch (error: any) {
+            toaster.create({
+                title: error.data.message || "Something went wrong",
+                type: "error",
+            });
+        } finally {
+            setIsLoading(false);
+        }
+    };
    return (
-
-        <DialogRoot placement="center">
-            <DialogTrigger asChild>
-                <Button bg="#02A0A0" color={"#fff"} p={4} fontSize={"12px"} mt={2}>
-                    Change Password
-                </Button>
-
-            </DialogTrigger>
-
-            <DialogContent
-                bg={"#fff"}
-                // w={{ lg: "60%", md: "230px" }}
-                w={{ base: '90%', md: '400px' }}
-
-                // height={'80vh'}
-                // overflow={'scroll'}
-                p={2} // Reduced padding
-                bgSize={'md'}
+        <>
+            <DialogRoot
+                placement="center"
+                open={isOpen}
+                onOpenChange={(open) => !open && onClose()}
            >
-                <DialogHeader bg="white" pt={3} pb={2} >
-                    <DialogTitle alignSelf="center" color="black" fontSize="18px" textAlign={"center"}>CHANGE PASSWORD</DialogTitle>
-                </DialogHeader>

-                <DialogBody bg="white" pt={5}>
-                    <Stack p={2} >
-                        <Field.Root>
-                            <Field.Label color="black" pt={1} fontSize="12px">New password</Field.Label>
-                            <Input color="black" pl={1} fontSize="12px" height="30px" type="password" border="1px solid grey" /></Field.Root>
-                        <Field.Root>
-                            <Field.Label color="black" pt={1} fontSize="12px">Confirm password</Field.Label>
-                            <Input color="black" pl={1} fontSize="12px" height="30px" type="password" border="1px solid grey" /></Field.Root>
+                {/* <DialogTrigger asChild>
+                    <Button bg="#02A0A0" size={'2xs'} color={"#fff"} px={2}  >
+                        Change Password
+                    </Button>
+                </DialogTrigger> */}

-                    </Stack>
-                </DialogBody>
-                <DialogFooter display="flex" justifyContent="center" mt={2} p={2}
+                <DialogContent
+                    bg={"#fff"}
+                    w={{ base: '90%', md: '400px' }}
+                    p={2}
+                    bgSize={'md'}
                >
-                    {/* <Button w="100%" bg="#02A0A0" color={"#fff"}>
-                        Save
-                    </Button> */}
-                    <EnterPassword />
-                </DialogFooter>
+                    <DialogHeader bg="white" pt={3} pb={2} >
+                        <DialogTitle alignSelf="center" color="black" fontSize="18px" textAlign={"center"}>CHANGE PASSWORD</DialogTitle>
+                    </DialogHeader>
+                    <form onSubmit={handleSubmit(onSubmit)}>
+                        <DialogBody bg="white" pt={5}>
+                            <Stack p={2} >
+                                <Field.Root>
+                                    <Field.Label color="black" pt={1} fontSize="12px">New password</Field.Label>
+                                    <InputGroup
+                                        width={'100%'}
+                                        endElement={
+                                            <IconButton
+                                                aria-label={showOldPassword ? "Hide password" : "Show password"}
+                                                size="sm"
+                                                // variant="outline"
+                                                onClick={() => setShowOldPassword(!showOldPassword)}
+                                                _hover={{ bg: "transparent" }}
+                                                height={'fit-content'}
+                                                mr={2}
+                                            >
+                                                {showOldPassword ? <LuEye /> : <LuEyeOff />}
+                                            </IconButton>
+                                        }>
+                                        <Input
+                                            color="black"
+                                            pl={1}
+                                            fontSize="12px"
+                                            height="30px"
+                                            type={showOldPassword ? "text" : "password"}
+                                            border={errors.new_password ? "1px solid red" : "1px solid grey"}
+                                            {...register("new_password", {
+                                                required: "Password is required",
+                                                minLength: {
+                                                    value: 8,
+                                                    message: "Password must be at least 8 characters",
+                                                },
+                                            })}
+                                        />
+                                    </InputGroup>
+                                    {/* <IconButton
+                                        aria-label={showPassword ? "Hide password" : "Show password"}
+                                        size="sm"
+                                        variant="ghost"
+                                        onClick={() => setShowPassword(!showPassword)}
+                                    >
+                                        {showPassword ? <LuEye /> : <LuEyeOff />}
+                                    </IconButton> */}

-                {/* <DialogCloseTrigger color="black" /> */}
-            </DialogContent>
-        </DialogRoot >
+                                    {errors.new_password && (
+                                        <Text color="red.500" fontSize="xs" mt={1}>
+                                            {errors.new_password.message}
+                                        </Text>
+                                    )}

+                                </Field.Root>
+                                <Field.Root>
+                                    <Field.Label color="black" pt={1} fontSize="12px">Confirm password</Field.Label>
+                                    <InputGroup
+                                        width={'100%'}
+                                        endElement={
+                                            <IconButton
+                                                aria-label={showNewPassword ? "Hide password" : "Show password"}
+                                                size="sm"
+                                                // variant="outline"
+                                                onClick={() => setShowNewPassword(!showNewPassword)}
+                                                _hover={{ bg: "transparent" }}
+                                                height={'fit-content'}
+                                                mr={2}
+                                            >
+                                                {showNewPassword ? <LuEye /> : <LuEyeOff />}
+                                            </IconButton>
+                                        }>
+                                        <Input
+                                            color="black"
+                                            pl={1}
+                                            fontSize="12px"
+                                            height="30px"
+                                            type={showNewPassword ? "text" : "password"}
+                                            border={errors.confirm_password ? "1px solid red" : "1px solid grey"}
+                                            {...register("confirm_password", {
+                                                required: "Please confirm your password",
+                                                validate: (value) =>
+                                                    value === newPassword || "Passwords do not match",
+                                            })}
+                                        />
+                                    </InputGroup>
+
+                                    {errors.confirm_password && (
+                                        <Text color="red.500" fontSize="xs" mt={1}>
+                                            {errors.confirm_password.message}
+                                        </Text>
+                                    )}
+                                </Field.Root>
+
+                            </Stack>
+                        </DialogBody>
+                        <DialogFooter display="flex" justifyContent="center" mt={2} p={2}
+                        >
+                            {/* <EnterPassword /> */}
+                            <Button
+                                loading={isLoading}
+                                mt={6}
+                                w="100%"
+                                bg="#02A0A0"
+                                color="white"
+                                type="submit"
+                            >
+                                Submit
+                            </Button>
+                        </DialogFooter>
+                    </form>
+                    <DialogCloseTrigger color="black" />
+                </DialogContent>
+            </DialogRoot >
+            <Toaster />
+        </>
    )
 }

--- a/src/Pages/Profile/EnterOTP.tsx
+++ b/src/Pages/Profile/EnterOTP.tsx
@@ -1,11 +1,87 @@
-import { DialogBody, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../components/ui/dialog"
+import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle } from "../../components/ui/dialog"
 import { Box, Input, Stack, Text } from "@chakra-ui/react"
 import { Button } from "../../components/ui/button";
-import { useState } from "react";
-import { BiSolidEdit } from "react-icons/bi";
+import { useEffect, useState } from "react";
+// import { BiSolidEdit } from "react-icons/bi";
+import { Toaster, toaster } from "../../components/ui/toaster";
+import { useGetProfileQuery, useResendOtpMutation, useVerifyOTPMutation } from "../../Redux/Service/profile.password";
+import { useForm } from "react-hook-form";
+import Changepassword from "./ChangePassword";

-function EnterOTP() {
-    const [otp, setOtp] = useState<string[]>(["", "", "", ""]);
+type EnterOTPProps = {
+    onClose: () => void;
+    isOpen: boolean;
+};
+
+type FormData = {
+    otp: string[];
+};
+
+
+function EnterOTP({ onClose, isOpen }: EnterOTPProps) {
+    const [isLoading, setIsLoading] = useState(false);
+    const [timer, setTimer] = useState(60);
+    const [isResendDisabled, setIsResendDisabled] = useState(true);
+    const [verifyOTP] = useVerifyOTPMutation()
+    const [otpSuccess, setOtpSuccess] = useState(false);
+    const [resendOtp] = useResendOtpMutation()
+    const { data } = useGetProfileQuery()
+    const id = data?.data.id
+
+
+    const {
+        register,
+        handleSubmit,
+        formState: { errors },
+        reset,
+    } = useForm<FormData>({
+        defaultValues: {
+            otp: ["", "", "", ""] // Initialize with empty strings for each digit
+        }
+    });
+
+    useEffect(() => {
+        let interval: NodeJS.Timeout;
+
+        if (timer > 0 && isResendDisabled) {
+            interval = setInterval(() => {
+                setTimer((prevTimer) => prevTimer - 1);
+            }, 1000);
+        } else if (timer === 0) {
+            setIsResendDisabled(false);
+        }
+
+        return () => clearInterval(interval);
+    }, [timer, isResendDisabled]);
+
+    const handleResendOTP = async () => {
+        setIsResendDisabled(true);
+        setTimer(60); // Reset timer to 1 minute
+
+        try {
+
+            const res = await resendOtp({ mobile_number: Number(id) }).unwrap()
+
+            if (res.status === 200) {
+                toaster.create({
+                    title: "OTP resent successfully",
+                    type: "success",
+                });
+            } else {
+                toaster.create({
+                    title: res.data.message || "Failed to resend OTP",
+                    type: "error",
+                });
+                setIsResendDisabled(false); // Enable button if failed
+            }
+        } catch (error: any) {
+            toaster.create({
+                title: error.response?.data?.message || "Failed to resend OTP",
+                type: "error",
+            });
+            setIsResendDisabled(false); // Enable button if error
+        }
+    };

    // Handle change for OTP inputs
    const handleChange = (e: React.ChangeEvent<HTMLInputElement>, index: number): void => {
@@ -15,94 +91,174 @@ function EnterOTP() {
        if (/[^0-9]/.test(value)) return;

        // Update the OTP state with the new value
-        const newOtp = [...otp];
-        newOtp[index] = value;
-        setOtp(newOtp);
+        // const newOtp = [...otp];
+        // newOtp[index] = value;
+        // setOtp(newOtp);

-        // Move focus to the next input automatically
-        if (value && index < otp.length - 1) {
+        if (value && index < 3) {
            const nextInput = document.getElementById(`otp-input-${index + 1}`) as HTMLInputElement;
            if (nextInput) nextInput.focus();
        }
+
+        // Move focus to the next input automatically
+        // if (value && index < otp.length - 1) {
+        //     const nextInput = document.getElementById(`otp-input-${index + 1}`) as HTMLInputElement;
+        //     if (nextInput) nextInput.focus();
+        // }
+
+        if (value === "" && index > 0) {
+            const prevInput = document.getElementById(`otp-input-${index - 1}`) as HTMLInputElement;
+            if (prevInput) prevInput.focus();
+        }
+    };
+
+
+    const onSubmit = async (data: FormData) => {
+        console.log('ERROR', errors)
+        if (data.otp.length !== 4) {
+            toaster.create({
+                title: "OTP must be 4 digits",
+                type: "error",
+            });
+            return;
+        }
+
+        const fullOtp = data.otp.join('');
+        console.log('OTP submitted:', fullOtp);
+
+        setIsLoading(true);
+        try {
+            const res = await verifyOTP({ otp: fullOtp }).unwrap()
+
+            if (res.status === 'success') {
+                toaster.create({
+                    title: "OTP Verified Successfully",
+                    type: "success",
+                });
+                setOtpSuccess(true);
+                reset();
+            } else {
+                toaster.create({
+                    title: res.data.message || "Invalid OTP",
+                    type: "error",
+                });
+            }
+            reset()
+        } catch (error: any) {
+            toaster.create({
+                title: error.data?.message || "Something went wrong",
+                type: "error",
+            });
+            setOtpSuccess(false);
+        } finally {
+            setIsLoading(false);
+        }
    };

    return (
-
-        <DialogRoot placement="center">
-            <DialogTrigger asChild>
-                <Button w="100%" bg="#02A0A0" color={"#fff"}>
-                    Save
-                </Button>
-
-            </DialogTrigger>
-
-            <DialogContent
-                bg={"#fff"}
-                // w={{ lg: "60%", md: "230px" }}
-                w={{ base: '90%', md: '400px' }}
-
-                // height={'80vh'}
-                // overflow={'scroll'}
-                p={2} // Reduced padding
-                bgSize={'md'}
-            >
-                <DialogHeader bg="white" pt={3}>
-                    <DialogTitle alignSelf="center" color="black" fontSize="18px" textAlign={"center"}>ENTER OTP</DialogTitle>
-                </DialogHeader>
-
-                <DialogBody bg="white" pt={2}>
-                    <Text color={"black"} textAlign={"center"}>OTP has been send to your E-mail Address</Text>
-                    <Box display="flex" flexDirection="row" alignItems="center" justifyContent="center" p={3}>
-                        <BiSolidEdit color="black" />
-                        <Text color="black" textAlign="center" ml={2}>9619565889</Text>
-                    </Box>
-
-
-                    <Stack direction="row" justify="center" pt={2}>
-
-                        {/* 4 OTP Inputs */}
-                        {otp.map((digit, index) => (
-                            <Input
-                                key={index}
-                                id={`otp-input-${index}`}
-                                value={digit}
-                                maxW="50px"
-                                color={"black"}
-                                textAlign="center"
-                                fontSize="20px"
-                                placeholder="0"
-                                border="1px solid grey"
-                                onChange={(e) => handleChange(e, index)}
-                                maxLength={1} // Only allows 1 character per input
-                            />
-                        ))}
-                    </Stack>
-                    <Box textAlign="center">
-                        <Text
-                            color="#4746F4"
-                            textDecoration="underline"
-                            fontWeight="bold"
-                            mt={3}
-                            cursor="pointer"
-                            display="inline-block"
-                            px={2} // Adds padding for better appearance
-                        >
-                            Resend OTP
-                        </Text>
-                    </Box>
-
-                </DialogBody>
-                <DialogFooter display="flex" justifyContent="center" mt={2} p={2}
-                >
+        <>
+            <DialogRoot placement="center"
+                open={isOpen}
+                onOpenChange={(open) => !open && onClose()}>
+                {/* <DialogTrigger asChild>
                    <Button w="100%" bg="#02A0A0" color={"#fff"}>
-                        Save
+                        Submit
                    </Button>
-                </DialogFooter>

-                {/* <DialogCloseTrigger color="black" /> */}
-            </DialogContent>
-        </DialogRoot >
+                </DialogTrigger> */}

+                <DialogContent
+                    bg={"#fff"}
+                    // w={{ lg: "60%", md: "230px" }}
+                    w={{ base: '90%', md: '400px' }}
+
+                    // height={'80vh'}
+                    // overflow={'scroll'}
+                    p={2} // Reduced padding
+                    bgSize={'md'}
+                >
+                    <DialogHeader bg="white" pt={3} alignSelf="center">
+                        <DialogTitle alignSelf="center" color="black" fontSize="18px" textAlign={"center"}>ENTER OTP</DialogTitle>
+                    </DialogHeader>
+                    <form onSubmit={handleSubmit(onSubmit)}>
+                        <DialogBody bg="white" pt={2}>
+                            <Text color={"black"} textAlign={"center"}>OTP has been sent successfully</Text>
+                            {/* <Box display="flex" flexDirection="row" alignItems="center" justifyContent="center" p={3}>
+                            <BiSolidEdit color="black" />
+                            <Text color="black" textAlign="center" ml={2}>9619565889</Text>
+                        </Box> */}
+
+
+                            <Stack direction="row" justify="center" pt={2}>
+
+                                {/* 4 OTP Inputs */}
+                                {Array.from({ length: 4 }).map((_, index) => (
+                                    <Input
+                                        key={index}
+                                        id={`otp-input-${index}`}
+                                        maxW="50px"
+                                        color="black"
+                                        textAlign="center"
+                                        fontSize="20px"
+                                        placeholder="0"
+                                        border={errors.otp?.[index] ? "1px solid red" : "1px solid grey"}
+                                        maxLength={1}
+                                        {...register(`otp.${index}`, {
+                                            required: "Digit required",
+                                            pattern: {
+                                                value: /^[0-9]$/,
+                                                message: "Must be a single digit"
+                                            },
+                                            onChange: (e) => handleChange(e, index)
+                                        })}
+                                    />
+                                ))}
+                            </Stack>
+                            <Box textAlign="center" mt={4}>
+                                {isResendDisabled ? (
+                                    <Text color="gray.500">
+                                        Resend OTP in {timer} seconds
+                                    </Text>
+                                ) : (
+                                    <Text
+                                        color="#4746F4"
+                                        textDecoration="underline"
+                                        fontWeight="bold"
+                                        cursor="pointer"
+                                        onClick={handleResendOTP}
+                                    >
+                                        Resend OTP
+                                    </Text>
+                                )}
+                            </Box>
+
+                        </DialogBody>
+                        <DialogFooter display="flex" justifyContent="center" mt={2} p={2}
+                        >
+                            <Button
+                                loading={isLoading}
+                                mt={6}
+                                w="100%"
+                                bg="#02A0A0"
+                                color="white"
+                                type="submit"
+                            >
+                                Verify OTP
+                            </Button>
+                        </DialogFooter>
+                    </form>
+                    <DialogCloseTrigger color="black" />
+                </DialogContent>
+            </DialogRoot >
+            {otpSuccess && (<Changepassword
+                onClose={() => {
+                    setOtpSuccess(false);
+                    onClose()
+                }}
+                isOpen={otpSuccess}
+            />)}
+            <Toaster />
+        </>
    )
 }

--- a/src/Pages/Profile/EnterPassword.tsx
+++ b/src/Pages/Profile/EnterPassword.tsx
@@ -1,53 +1,127 @@

-import { DialogBody, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../components/ui/dialog"
-import { Field, Input, Stack } from "@chakra-ui/react"
+import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../components/ui/dialog"
+import { Field, Input, Stack, Text } from "@chakra-ui/react"
+import { useForm } from "react-hook-form";
 import { Button } from "../../components/ui/button";
 import EnterOTP from "./EnterOTP";
+import { useProfilePasswordMutation } from "../../Redux/Service/profile.password";
+import { useState } from "react";
+import { Toaster, toaster } from "../../components/ui/toaster";
+
+type FormData = {
+    password: string;
+};
+
 function EnterPassword() {
+    const [profilePassword] = useProfilePasswordMutation();
+    const [isSuccess, setIsSuccess] = useState(false);
+    const [isDialogOpen, setIsDialogOpen] = useState(false);
+
+    const {
+        register,
+        handleSubmit,
+        formState: { errors },
+        reset,
+    } = useForm<FormData>();
+
+    const onSubmit = async (data: FormData) => {
+        if (!data.password) {
+            return
+        }
+        try {
+            await profilePassword({ password: data.password }).unwrap();
+            setIsSuccess(true);
+            reset();
+            setIsDialogOpen(false);
+            // Handle success (e.g., show a success message or redirect)
+        } catch (error: any) {
+            // Handle error (e.g., show an error message)
+            toaster.create({
+                title: error?.data.message || "Invalid password",
+                type: "error",
+            });
+            console.error("Password change failed:", error.data.message);
+            setIsSuccess(false);
+        }
+    };
    return (
+        <>

-        <DialogRoot placement="center">
-            <DialogTrigger asChild>
-                <Button w="100%" bg="#02A0A0" color={"#fff"}>
-                    Save
-                </Button>
-
-            </DialogTrigger>
-
-            <DialogContent
-                bg={"#fff"}
-                // w={{ lg: "60%", md: "230px" }}
-                w={{ base: '90%', md: '400px' }}
-
-                // height={'80vh'}
-                // overflow={'scroll'}
-                p={2} // Reduced padding
-                bgSize={'md'}
+            <DialogRoot placement="center"
+                open={isDialogOpen}
+                onOpenChange={(details) => setIsDialogOpen(details.open)}
            >
-                <DialogHeader bg="white" pt={3} pb={2} >
-                    <DialogTitle alignSelf="center" color="black" fontSize="18px" textAlign={"center"}>ENTER PASSWORD</DialogTitle>
-                </DialogHeader>
+                <DialogTrigger asChild>
+                    <Button bg="#02A0A0" size={'2xs'} color={"#fff"} px={2} >
+                        Change Password
+                    </Button>

-                <DialogBody bg="white" pt={5}>
-                    <Stack p={2} >
-                        <Field.Root>
-                            <Field.Label color="black" pt={1} fontSize="12px">Password</Field.Label>
-                            <Input color="black" pl={1} fontSize="12px" height="30px" type="password" border="1px solid grey" /></Field.Root>
+                </DialogTrigger>
+                <DialogContent
+                    bg={"#fff"}
+                    // w={{ lg: "60%", md: "230px" }}
+                    w={{ base: '90%', md: '400px' }}

-
-                    </Stack>
-                </DialogBody>
-                <DialogFooter display="flex" justifyContent="center" mt={2} p={2}
+                    // height={'80vh'}
+                    // overflow={'scroll'}
+                    p={2} // Reduced padding
+                    bgSize={'md'}
                >
-                    {/* <Button w="100%" bg="#02A0A0" color={"#fff"}>
+                    <DialogHeader bg="white" pt={3} pb={2} >
+                        <DialogTitle alignSelf="center" color="black" fontSize="18px" textAlign={"center"}>ENTER PASSWORD</DialogTitle>
+                    </DialogHeader>
+                    <form onSubmit={handleSubmit(onSubmit)}>
+                        <DialogBody bg="white" pt={5}>
+                            <Stack p={2} >
+                                <Field.Root>
+                                    <Field.Label color="black" pt={1} fontSize="12px">Password</Field.Label>
+                                    <Input
+                                        color="black"
+                                        pl={1}
+                                        fontSize="12px"
+                                        height="30px"
+                                        type="password"
+                                        border={errors.password ? "1px solid red" : "1px solid grey"}
+                                        {...register("password", {
+                                            required: "Password is required",
+                                            minLength: {
+                                                value: 8,
+                                                message: "Password must be at least 8 characters",
+                                            },
+                                        })}
+                                    />
+                                    {errors.password && (
+                                        <Text color="red.500" fontSize="xs" mt={1}>
+                                            {errors.password.message}
+                                        </Text>
+                                    )}
+                                </Field.Root>
+                            </Stack>
+                        </DialogBody>
+                        <DialogFooter display="flex" justifyContent="center" mt={2} p={2}
+                        >
+                            {/* <Button w="100%" bg="#02A0A0" color={"#fff"}>
                        Save
                    </Button> */}
-                    <EnterOTP />
-                </DialogFooter>
+                            <Button type="submit" w="100%" bg="#02A0A0" color={"#fff"}>
+                                Submit
+                            </Button>
+                        </DialogFooter>

-                {/* <DialogCloseTrigger color="black" /> */}
-            </DialogContent>
-        </DialogRoot >
+                        <DialogCloseTrigger color="black" />
+                    </form>
+                </DialogContent>
+            </DialogRoot >
+            {isSuccess && (<EnterOTP
+                onClose={() => {
+                    setIsSuccess(false);
+                    setIsDialogOpen(false);
+                }}
+                isOpen={isSuccess}
+            />)
+            }
+            <Toaster />
+        </>

    )
 }
--- a/src/Pages/Profile/Profile.tsx
+++ b/src/Pages/Profile/Profile.tsx
@@ -1,59 +1,146 @@
-import { Avatar, Box, Field, Input, SimpleGrid, Stack, Text } from "@chakra-ui/react"
-import MainFrame from "../../components/MainFrame"
+import { Avatar, Box, HStack, Text, VStack } from "@chakra-ui/react";
 import { FaCamera } from "react-icons/fa";
-import { Button } from "../../components/ui/button";
-import Changepassword from "./ChangePassword";
+import EditableInput from "../../components/EditableInput";
+import MainFrame from "../../components/MainFrame";
+import { Field } from "../../components/ui/field";
+// import Changepassword from "./ChangePassword";
+import EnterPassword from "./EnterPassword";
+import { useGetProfileQuery } from "../../Redux/Service/profile.password";
+// import { useUpdateImageMutation } from "../../Redux/Service/myprofie.service";
+import { useEffect, useRef, useState } from "react";
+import { Toaster, toaster } from "../../components/ui/toaster";
+import axios from "axios";
+
+const APIURL = import.meta.env.VITE_API_URL
+const PROFILEIMGURL = import.meta.env.VITE_IMG_PROFILE

 const Profile = () => {
+  const { data, refetch } = useGetProfileQuery()
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const [avatarSrc, setAvatarSrc] = useState<string>("");
+  // const [updateImage] = useUpdateImageMutation();
+
+  useEffect(() => {
+    if (data?.data.profile_photo) {
+      setAvatarSrc(data.data.profile_photo);
+    }
+  }, [data?.data.profile_photo]);
+
+
+  const handleClick = () => {
+    fileInputRef.current?.click();
+  };
+
+  const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+
+    if (file.size > 2 * 1024 * 1024) {
+      alert("File size exceeds 2MB limit.");
+      return;
+    }
+
+    // Preview the image
+    const previewUrl = URL.createObjectURL(file);
+    setAvatarSrc(previewUrl);
+
+    // Prepare FormData
+    const formData = new FormData();
+    formData.append("profile_photo", file, file.name);
+
+    const token = localStorage.getItem("token");
+
+    try {
+      if (token) {
+        await axios.post(`${APIURL}/profile-image-edit`, formData, {
+          headers: {
+            'Content-Type': 'multipart/form-data',
+            'access-token': `${token}`,
+          },
+          // withCredentials: true,
+        });
+
+        toaster.create({
+          title: "Success",
+          description: "Updated successfully",
+          type: "success",
+        });
+        refetch();
+      }
+    } catch (error) {
+      console.error("Error updating image:", error);
+      toaster.create({
+        title: "Error",
+        description: "Something went wrong",
+        type: "error",
+      });
+    }
+  };
+
+
+  console.log('PROFILE DATA:', data?.data);
+
  return (
    <MainFrame >
-      <Stack p={5}>
-        <Box position="relative" width="fit-content"
-          display="inline-block"
+      <HStack alignItems={'flex-start'} justifyContent={'center'} pt={0} h={'89vh'} w={'100%'} >

-          cursor="pointer" onClick={() => alert("Avatar clicked!")}>
-          <Avatar.Root size={"2xl"} style={{ display: "inline-block", width: "auto" }}>
-            <Avatar.Fallback />
-            <Avatar.Image src="https://bit.ly/sage-adebayo" />
-          </Avatar.Root>
+        <VStack w={'50%'} p={3} rounded={'lg'} mb={3}>

-          <Box
-            position="absolute"
-            bottom="-2px"
-            left={"39px"}
-            p="2px"
-          >
-            <FaCamera color="black" size={16} />
-          </Box>
-        </Box>
-        <Text color={"black"} fontWeight={"bold"}>{`Jackson Da`.slice(0, 10) + '...'}</Text>
-        {/* <Text color={"black"} fontSize={"10px"}>Employee ID: <Text color={"black"} fontSize={"10px"}>#1245679</Text> </Text> */}
-        <Text color="black" fontSize="12px">
-          Employee ID: <span>#1245679</span>
-        </Text>
-        <Box w={"70%"} mt={5}>
-          <SimpleGrid columns={{ base: 1, md: 2 }} columnGap={9} rowGap={4}>
-            <Field.Root>
-              <Field.Label color="black" pt={1} fontSize="12px">First Name</Field.Label>
-              <Input placeholder="Enter the First Name" color="black" border="1px solid grey" pl={1} fontSize="12px" height="30px" /></Field.Root>
-            <Field.Root>
-              <Field.Label color="black" pt={1} fontSize="12px">last Name</Field.Label>
-              <Input placeholder="Enter the last Name" color="black" border="1px solid grey" pl={1} fontSize="12px" height="30px" /></Field.Root>
-            <Field.Root>
-              <Field.Label color="black" pt={1} fontSize="12px" >Phone Number</Field.Label>
-              <Input placeholder="Enter the Phone Number" color="black" border="1px solid grey" pl={1} fontSize="12px" height="30px" /></Field.Root>
+          <HStack shadow={'md'} rounded={'lg'} justifyContent={'space-between'} alignItems={'flex-end'} w={'100%'} px={3} py={3} >
+            <VStack w={'100%'} alignItems={'flex-start'} gap={0}>
+              <Box mb={2} position="relative" width="fit-content"
+                cursor="pointer" onClick={handleClick}>
+                <Avatar.Root size={"2xl"} style={{ display: "flex", width: "50px", height: '50px', justifyContent: 'center' }}>
+                  <Avatar.Fallback />
+                  {/* <Avatar.Image src="https://i.pinimg.com/736x/d6/cd/0f/d6cd0ffd4634b0763d3958a7325ce26e.jpg" /> */}
+                  {avatarSrc && <Avatar.Image src={`${PROFILEIMGURL}${avatarSrc}`} />}
+                </Avatar.Root>
+                <Box
+                  position="absolute"
+                  bottom="-2px"
+                  left={"39px"}
+                  p="2px"
+                >
+                  <FaCamera color="#ccc" size={16} />
+                </Box>
+                <input
+                  type="file"
+                  accept="image/*"
+                  ref={fileInputRef}
+                  style={{ display: "none" }}
+                  onChange={handleFileChange}
+                />
+              </Box>
+              <Text color={"black"} as={'span'} fontSize={'sm'} fontWeight={"bold"}>{`${data?.data?.first_name.charAt(0).toUpperCase()}${data?.data.first_name.slice(1)}`}
+              </Text>
+              {/* <Text color="black" as={'span'} fontSize={'xs'}>
+                Employee ID: <span>#1245679</span>
+              </Text> */}
+            </VStack>

-          </SimpleGrid>
-          <Text color={"black"} fontWeight={"bold"} fontSize={"14px"} mt={5}>Update password</Text>
-          {/* <Button bg="#02A0A0" color={"#fff"} p={4} fontSize={"12px"} mt={2}>
-            Change Password
-          </Button> */}
-          <Changepassword />
+            <EnterPassword />
+            {/* <Changepassword /> */}
+          </HStack>

-        </Box>

-      </Stack>
+          <VStack w={"100%"} >
+            <Field mt={4} label="First Name" fontSize="xs" required>
+              <EditableInput value={`${data?.data.first_name}`} placeholder="Enter first name" isDisabled />
+            </Field>

+            <Field mt={4} label="Last Name" fontSize="xs" required>
+              <EditableInput value={`${data?.data.last_name}`} placeholder="Enter last name" isDisabled />
+            </Field>
+
+            <Field mt={4} label="Mobile Number" fontSize="xs" required>
+              <EditableInput value={`${data?.data.phone_number}`} placeholder="Mobile Number" type='number' isDisabled />
+            </Field>
+
+          </VStack>
+        </VStack>
+
+      </HStack>
+      <Toaster />
    </MainFrame >
  )
 }
--- a/src/Pages/SetNewPassword.tsx
+++ b/src/Pages/SetNewPassword.tsx
@@ -0,0 +1,197 @@
+import {
+  Box,
+  Center,
+  HStack,
+  IconButton,
+  Image,
+  Input,
+  Stack,
+  Text,
+  VStack,
+} from "@chakra-ui/react";
+import axios from "axios";
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import logo from "../assets/logo.svg";
+import { Button } from "../components/ui/button";
+import { toaster, Toaster } from "../components/ui/toaster";
+import { InputGroup } from "../components/ui/input-group";
+import { LuEye, LuEyeOff } from "react-icons/lu";
+
+const SetNewPassword = () => {
+  const [password, setPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+  const navigate = useNavigate();
+  const queryParams = new URLSearchParams(window.location.search);
+  const id = queryParams.get("id");
+  const [showOldPassword, setShowOldPassword] = useState(false);
+  const [showNewPassword, setShowNewPassword] = useState(false);
+
+  const handlePasswordSubmit = async () => {
+    // Validation
+    if (password.length < 8) {
+      toaster.create({
+        title: "Password must be at least 8 characters long",
+        type: "error",
+      });
+      return;
+    }
+
+    if (password !== confirmPassword) {
+      toaster.create({
+        title: "Passwords do not match",
+        type: "error",
+      });
+      return;
+    }
+
+    setIsLoading(true);
+
+    try {
+      const res = await axios.post(
+        `${import.meta.env.VITE_API_URL}/update-password`,
+        {
+          password: password,
+          confirm_password: confirmPassword,
+          id: Number(id),
+        }
+      );
+
+      if (res.data.status === "success") {
+        toaster.create({
+          title: "Password updated successfully",
+          type: "success",
+        });
+        navigate("/login"); // Redirect to login page
+      } else {
+        toaster.create({
+          title: res.data.message || "Failed to update password",
+          type: "error",
+        });
+      }
+    } catch (error: any) {
+      toaster.create({
+        title: error.response?.data?.message || "Something went wrong",
+        type: "error",
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <VStack w="100%" h="100vh" bg="#ffffff">
+      <HStack
+        boxShadow="rgba(99, 99, 99, 0.2) 0px 2px 8px 0px"
+        w="100%"
+        ps={8}
+        h="7%"
+        justifyContent="flex-start"
+      >
+        <Image w={50} src={logo} />
+      </HStack>
+
+      <Center w="100%" h="93%" p={8}>
+        <Box p={8} borderWidth={1} borderRadius="lg" boxShadow="lg" w={"400px"}>
+          <Text
+            fontSize="20px"
+            fontWeight="bold"  
+            color="#313039"
+            marginBottom={"20px"}
+          >
+            Create a Password
+          </Text>
+
+          <Stack>
+            <Box mb={3}>
+              <Text color="black" fontSize="12px" mb={2}>
+                New password
+              </Text>
+              <InputGroup
+                width={"100%"}
+                endElement={
+                  <IconButton
+                    aria-label={
+                      showOldPassword ? "Hide password" : "Show password"
+                    }
+                    size="sm"
+                    onClick={() => setShowOldPassword(!showOldPassword)}
+                    //   _hover={{ bg: "transparent" }}
+                    bg={"transparent"}
+                    color={"#000"}
+                    height={"fit-content"}
+                    mr={2}
+                  >
+                    {showOldPassword ? <LuEyeOff /> : <LuEye />}
+                  </IconButton>
+                }
+              >
+                <Input
+                  color="black"
+                  pl={1}
+                  fontSize="12px"
+                  type={showOldPassword ? "password" : "text"}
+                  border="1px solid grey"
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                  size={"sm"}
+                />
+              </InputGroup>
+            </Box>
+
+            <Box>
+              <Text color="black" mb={2} fontSize="12px">
+                Confirm password
+              </Text>
+              <InputGroup
+                width={"100%"}
+                endElement={
+                  <IconButton
+                    aria-label={
+                      showNewPassword ? "Hide password" : "Show password"
+                    }
+                    size="sm"
+                    // variant="outline"
+                    onClick={() => setShowNewPassword(!showNewPassword)}
+                    bg={"transparent"}
+                    color={"#000"}
+                    mr={2}
+                  >
+                    {showNewPassword ? <LuEyeOff /> : <LuEye />}
+                  </IconButton>
+                }
+              >
+                <Input
+                  color="black"
+                  pl={1}
+                  fontSize="12px"
+                  type={showNewPassword ? "password" : "text"}
+                  border="1px solid grey"
+                  value={confirmPassword}
+                  onChange={(e) => setConfirmPassword(e.target.value)}
+                  size={"sm"}
+                />
+              </InputGroup>
+            </Box>
+          </Stack>
+
+          <Button
+            loading={isLoading}
+            mt={6}
+            w="100%"
+            bg="#02A0A0"
+            color="white"
+            onClick={handlePasswordSubmit}
+          >
+            Confirm Password
+          </Button>
+        </Box>
+      </Center>
+
+      <Toaster />
+    </VStack>
+  );
+};
+
+export default SetNewPassword;
--- a/src/Pages/SubAdmin/AddModel.tsx
+++ b/src/Pages/SubAdmin/AddModel.tsx
@@ -1,80 +1,319 @@
-import { Button } from "../../components/ui/button"
-import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../components/ui/dialog"
-import { Field, Grid, Heading, Input, Stack, Text } from "@chakra-ui/react"
-import { IoMdAdd } from "react-icons/io"
-import { Checkbox } from "../../components/ui/checkbox"
+import { Button } from "../../components/ui/button";
+import {
+  DialogBody,
+  DialogCloseTrigger,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogRoot,
+  DialogTitle,
+  DialogTrigger,
+} from "../../components/ui/dialog";
+import { Field, Grid, Heading, Input, Stack, Text } from "@chakra-ui/react";
+import { IoMdAdd } from "react-icons/io";
+import { Checkbox } from "../../components/ui/checkbox";
+import { PermissionResponse, useCreateSubAdminPostMutation } from "../../Redux/Service/manage.subadmin.service";
+import { toaster, Toaster } from "../../components/ui/toaster";
+import { useEffect, useState } from "react";

-function AddModel() {
-    return (
+function AddModel({ refetch, allPermissions }: { refetch: VoidFunction, allPermissions?: PermissionResponse }) {
+  const [createSubAdminPost, { isLoading }] = useCreateSubAdminPostMutation();

-        <DialogRoot placement="center">
-            <DialogTrigger asChild>
-                {/* <Button bg={"transparent"} size="sm">
-                    <MdOutlineRemoveRedEye style={{ cursor: "pointer", fontSize: "16px" }} />
-                </Button> */}
-                <Button rounded={'md'} px={4} py={2} size={"xs"} bg={"#02A0A0"}><IoMdAdd /> Add</Button>
+  // State fields
+  const [firstName, setFirstName] = useState("");
+  const [lastName, setLastName] = useState("");
+  // const [userName, setUserName] = useState("");
+  const [dateOfBirth, setDateOfBirth] = useState("");
+  const [gender, setGender] = useState("");
+  const [email, setEmail] = useState("");
+  const [phonenumber, setPhonenumber] = useState("");
+  const [permissions, setPermission] = useState<number[]>([]);
+  const [isOpen, setIsOpen] = useState(false);
+  // const [ setIsOpen] = useState(false);

-            </DialogTrigger>
+  const handleOpenModal = () => {
+    setIsOpen(true);
+  };

-            <DialogContent
-                bg={"#fff"}
-                // w={{ lg: "60%", md: "230px" }}
-                w={{ base: '90%', md: '400px' }}
-                height={'80vh'}
-                overflow={'scroll'}
-                overflowX="hidden" 
-                p={3} // Reduced padding
-                bgSize={'md'}
-            >
-                <DialogHeader bg="white"  >
-                    <DialogTitle alignSelf="center" color="black" fontSize="14px"
-                    >Add Sub Admin Account</DialogTitle>
-                </DialogHeader>
+  const handleCheckboxToggle = (permissionId: number) => {
+    setPermission((prevData) =>
+      prevData.includes(permissionId)
+        ? prevData.filter((id) => id !== permissionId)
+        : [...prevData, permissionId]
+    );
+  };

-                <DialogBody bg="white">
-                    <Stack py={3} >
+useEffect(() => {
+        if (!isOpen) {
+          setFirstName("");
+          setLastName("");
+          // setUserName("");
+          setDateOfBirth("");
+          setGender("");
+          setEmail("");
+          setPhonenumber("");
+          setPermission([]);
+        }
+    }, [isOpen]);

-                        <Field.Root>
-                            <Field.Label color="black" pt={1} fontSize="12px">First Name</Field.Label>
-                            <Input placeholder="Enter the First Name" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
+  const handleSubmit = async () => {
+    if (
+      !firstName.trim() ||
+      !lastName.trim() ||
+      !dateOfBirth.trim() ||
+      !gender.trim()
+    ) {
+      toaster.create({
+        title: "Error",
+        description: "Please fill in all required fields",
+        type: "error",
+      });
+      return;
+    }

-                            <Field.Label color="black" pt={1} fontSize="12px">Last Name</Field.Label>
-                            <Input placeholder="Enter the Last Name" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    if (!emailRegex.test(email)) {
+      toaster.create({
+        title: "Invalid Email",
+        description: "Please enter a valid email address",
+        type: "error",
+      });
+      return;
+    }

-                            <Field.Label color="black" pt={1} fontSize="12px">DOB</Field.Label>
-                            <Input placeholder="Enter the DOB" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
+    if (phonenumber.length !== 10) {
+      toaster.create({
+        title: "Invalid Phone Number",
+        description: "Phone number must be exactly 10 digits",
+        type: "error",
+      });
+      return;
+    }

-                            <Field.Label color="black" pt={1} fontSize="12px">Gender</Field.Label>
-                            <Input placeholder="Enter the Gender" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-                            <Heading mt={5} color={'#000'} fontSize={'sm'}>Permissions</Heading>
-                        </Field.Root>
-                        <Grid templateColumns="repeat(2, 1fr)" gap={4}>
-                            <Checkbox size={'sm'} color={"black"} ><Text fontSize={12}>Dashboard</Text></Checkbox>
-                            <Checkbox size={'sm'} color={"black"} ><Text fontSize={12}>Manage contact us</Text></Checkbox>
-                            <Checkbox size={'sm'} color={"black"} ><Text fontSize={12}>manage User</Text></Checkbox>
-                            <Checkbox size={'sm'} color={"black"} ><Text fontSize={12}>Manage CMS</Text></Checkbox>
-                            <Checkbox size={'sm'} color={"black"} ><Text fontSize={12}>Manage Post</Text></Checkbox>
-                            <Checkbox size={'sm'} color={"black"} ><Text fontSize={12}>Manage Reports</Text></Checkbox>
-                            <Checkbox size={'sm'} color={"black"} ><Text fontSize={12}>manage Sub-Admin</Text></Checkbox>
-                            <Checkbox size={'sm'} color={"black"} ><Text fontSize={12}>My profile</Text></Checkbox>
-                            <Checkbox size={'sm'} color={"black"} ><Text fontSize={12}>Manage Jobs</Text> </Checkbox>
-                            <Checkbox size={'sm'} color={"black"} ><Text fontSize={12}> manage feedbacks</Text></Checkbox>
-                            <Checkbox size={'sm'} color={"black"} ><Text fontSize={12}>Manage community</Text> </Checkbox>
-                            <Checkbox size={'sm'} color={"black"} ><Text fontSize={12}> Notification</Text></Checkbox>
-                        </Grid>
-                    </Stack>
-                </DialogBody>
-                <DialogFooter display="flex" justifyContent="center" pt={"2"}>
-                    <Button size={'xs'} w="100%" bg="#02A0A0" color={"#fff"}>
-                        Save
-                    </Button>
-                </DialogFooter>
+    const payload = {
+      // user_name: userName,
+      first_name: firstName,
+      last_name: lastName,
+      date_of_birth: dateOfBirth,
+      gender: gender,
+      email_address: email,
+      phone_number: phonenumber,
+      permission: permissions.filter((id) => typeof id === "number"),
+      // created_by: 1,
+    };

-                <DialogCloseTrigger color="black" />
-            </DialogContent>
-        </DialogRoot >
+    try {
+      const response = await createSubAdminPost(payload).unwrap();
+      if (response) {
+        toaster.create({
+          title: "Success",
+          description: "Sub-admin created successfully",
+          type: "success",
+        });
+        refetch();
+        setFirstName("");
+        setLastName("");
+        // setUserName("");
+        setDateOfBirth("");
+        setGender("");
+        setIsOpen(false);
+      }
+    } catch (error:any) {
+      console.error("Error creating sub-admin:", error);
+      toaster.create({
+        title: "Error",
+        description: error ? error.data.message : "Failed to create sub-admin",
+        type: "error",
+      });
+    }
+  };

-    )
+  return (
+    <DialogRoot placement="center" open={isOpen} onOpenChange={({ open }) => setIsOpen(open)}>
+      <DialogTrigger asChild>
+
+        <Button
+          rounded={"md"}
+          px={4} py={2}
+          size={"xs"}
+          bg={"#02A0A0"}
+          onClick={handleOpenModal}>
+          <IoMdAdd /> Add
+        </Button>
+      </DialogTrigger>
+
+      <DialogContent
+        bg={"#fff"}
+        w={{ base: "90%", md: "400px" }}
+        height={"80vh"}
+        overflow={"scroll"}
+        overflowX="hidden"
+        p={3}
+        bgSize={"md"}
+      >
+        <DialogHeader bg="white">
+          <DialogTitle alignSelf="center" color="black" fontSize="14px">
+            Add Sub Admin Account
+          </DialogTitle>
+        </DialogHeader>
+
+        <DialogBody bg="white">
+          <Stack py={3}>
+            <Field.Root>
+              <Field.Label color="black" pt={1} fontSize="12px">
+                First Name
+              </Field.Label>
+              <Input
+                placeholder="Enter the First Name"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+                value={firstName}
+                onChange={(e) => setFirstName(e.target.value)}
+              />
+
+              <Field.Label color="black" pt={1} fontSize="12px">
+                Last Name
+              </Field.Label>
+              <Input
+                placeholder="Enter the Last Name"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+                value={lastName}
+                onChange={(e) => setLastName(e.target.value)}
+              />
+
+              {/* <Field.Label color="black" pt={1} fontSize="12px">
+                Username
+              </Field.Label>
+              <Input
+                placeholder="Enter the Username"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+                value={userName}
+                onChange={(e) => setUserName(e.target.value)}
+              /> */}
+
+              <Field.Label color="black" pt={1} fontSize="12px">
+                DOB
+              </Field.Label>
+              <Input
+                placeholder="Enter the DOB"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+                type="date"
+                value={dateOfBirth}
+                onChange={(e) => setDateOfBirth(e.target.value)}
+              />
+
+              <Field.Label color="black" pt={1} fontSize="12px">
+                Gender
+              </Field.Label>
+              <Input
+                placeholder="Enter the Gender"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+                value={gender}
+                onChange={(e) => setGender(e.target.value)}
+              />
+
+              <Field.Label color="black" pt={1} fontSize="12px">
+                Email Address
+              </Field.Label>
+              <Input
+                placeholder="Enter Email address"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                type="email"
+                fontSize="12px"
+                height="30px"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+              />
+
+              <Field.Label color="black" pt={1} fontSize="12px">
+                Phone Number
+              </Field.Label>
+              <Input
+                placeholder="Enter phone number"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                type="tel"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+                value={phonenumber}
+                onChange={(e) => {
+                  const value = e.target.value;
+                  if (/^\d*$/.test(value)) { // Only allow digits
+                    setPhonenumber(value);
+                  }
+                }}
+              />
+
+              <Heading mt={5} color={"#000"} fontSize={"sm"}>
+                Permissions
+              </Heading>
+            </Field.Root>
+
+            <Grid templateColumns="repeat(2, 1fr)" gap={4}>
+              {Array.isArray(allPermissions?.data?.permission)
+                ? allPermissions.data.permission.map((permission: any) => (
+                  <Checkbox
+                    size="sm"
+                    color="black"
+                    key={permission.id}
+                    checked={permissions.includes(permission.id)}
+                    onChange={() => handleCheckboxToggle(permission.id)}
+                  >
+                    <Text fontSize={12}>{permission.app_resource_title}</Text>
+                  </Checkbox>
+                ))
+                : <Text fontSize={12} color="gray.500">Loading permissions...</Text>
+              }
+            </Grid>
+          </Stack>
+        </DialogBody>
+
+        <DialogFooter display="flex" justifyContent="center" pt={"2"}>
+          <Button
+            size={"xs"}
+            w="100%"
+            bg="#02A0A0"
+            color={"#fff"}
+            onClick={handleSubmit}
+            disabled={isLoading}
+          >
+            Save
+          </Button>
+        </DialogFooter>
+        <DialogCloseTrigger color="black" onClick={() => setIsOpen(false)} />
+      </DialogContent>
+      <Toaster />
+    </DialogRoot>
+  );
 }

-export default AddModel
+export default AddModel;
--- a/src/Pages/SubAdmin/EditSubAdmin.tsx
+++ b/src/Pages/SubAdmin/EditSubAdmin.tsx
@@ -0,0 +1,301 @@
+import { Field, Grid, Heading, Input, Stack, Text } from "@chakra-ui/react";
+// import { TbEdit } from "react-icons/tb";
+import { Button } from "../../components/ui/button";
+import { Checkbox } from "../../components/ui/checkbox";
+import {
+  DialogBody,
+  DialogCloseTrigger,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogRoot,
+  DialogTitle,
+  DialogTrigger,
+} from "../../components/ui/dialog";
+import Edit from "../../components/ActionIcons/Edit";
+import { PermissionResponse, useLazyViewSubAdminQuery, useUpdateSubAdminMutation } from "../../Redux/Service/manage.subadmin.service";
+import { useEffect, useState } from "react";
+import { Toaster, toaster } from "../../components/ui/toaster";
+
+const resourceIdToLabel: { [key: number]: string } = {
+  1: 'Dashboard',
+  2: 'Manage User',
+  3: 'Manage Post',
+  4: 'Manage Subadmin',
+  5: 'Manage Jobs',
+  6: 'Manage Groups',
+  7: 'Manage Contact Us',
+  8: 'Manage CMS',
+  9: 'My Profile',
+  10: 'Master Module',
+};
+
+
+interface ResourceActionLink {
+  id: number;
+  app_resource_xid: number;
+  is_active: boolean;
+  app_resource: {
+    id: number,
+    app_resource_title: string
+  }
+}
+
+function EditSubAdmin({ id, refetch, allPermissions }: { id: number, refetch: VoidFunction, allPermissions?: PermissionResponse }) {
+  const [trigger, { data }] = useLazyViewSubAdminQuery();
+  const [updateSubAdmin, {isLoading}] = useUpdateSubAdminMutation()
+  const [isOpen, setIsOpen] = useState(false);
+  const [editData, setEditData] = useState<{
+    id: string;
+    unique_id?: string,
+    first_name: string;
+    last_name: string;
+    date_of_birth: string;
+    gender?: string,
+    permission: ResourceActionLink[];
+  }>({
+    id: '',
+    unique_id: '',
+    first_name: '',
+    last_name: '',
+    date_of_birth: '',
+    gender: '',
+    permission: [],
+  })
+
+  useEffect(() => {
+    if (data?.data?.length && allPermissions?.data?.permission?.length) {
+      const subAdmin = data.data[0];
+
+      const activePermissionIds = subAdmin.get_resource_action_link
+        .filter((perm: any) => perm.is_active)
+        .map((perm: any) => perm.app_resource_xid);
+
+      const mergedPermissions: ResourceActionLink[] = allPermissions.data.permission.map((perm) => ({
+        id: perm.id,
+        app_resource_xid: perm.id,
+        is_active: activePermissionIds.includes(perm.id),
+        app_resource: {
+          id: perm.id,
+          app_resource_title: perm.app_resource_title,
+        },
+      }));
+
+
+      // Map the API response to editData
+      setEditData({
+        id: subAdmin.id.toString(),
+        unique_id: subAdmin.unique_id,
+        first_name: subAdmin.first_name,
+        last_name: subAdmin.last_name,
+        date_of_birth: formatDateOfBirth(subAdmin.date_of_birth),
+        gender: subAdmin.gender,
+        permission: mergedPermissions,
+      });
+    }
+  }, [data, allPermissions]);
+
+  const formatDateOfBirth = (dob: string): string => {
+    // Convert the date to the desired format with slashes
+    const formattedDate = new Date(dob).toLocaleDateString("en-GB", {
+      day: "2-digit",
+      month: "2-digit",
+      year: "numeric",
+    });
+
+    // Replace slashes with hyphens
+    return formattedDate.replace(/\//g, '-');
+  };
+
+  const handleOpenModal = () => {
+    trigger(id)
+    setIsOpen(true);
+  };
+
+  const handleCheckboxToggle = (permissionId: number) => {
+    setEditData((prevData) => ({
+      ...prevData,
+      permission: prevData.permission.map((permission) =>
+        permission.app_resource_xid === permissionId
+          ? { ...permission, is_active: !permission.is_active }
+          : permission
+      ),
+    }));
+  };
+
+
+  const handleSubmit = async () => {
+    console.log('Updated Data:', editData);
+    // Call your API here with the updated editData
+
+    const payload = {
+      id: Number(editData.id),
+      // unique_id: editData.unique_id,
+      first_name: editData.first_name,
+      last_name: editData.last_name,
+      date_of_birth: editData.date_of_birth,
+      gender: editData.gender,
+      permission: editData.permission
+        .filter((p) => p.is_active)
+        .map((p) => p.app_resource_xid),
+    };
+
+    try {
+      const response = await updateSubAdmin(payload).unwrap();
+      if (response?.status === "success") {
+        toaster.create({
+          title: "Success",
+          description: "FAQ updated successfully",
+          type: "success",
+        });
+        refetch()
+        setIsOpen(false);
+      } else {
+        toaster.create({
+          title: "Error",
+          description: "Failed to update FAQ",
+          type: "error",
+        });
+      }
+    } catch (error) {
+      console.error("Error updating template:", error);
+      // alert("Failed to update template");
+    }
+  };
+
+  return (
+    <DialogRoot placement="center" open={isOpen} onOpenChange={({ open }) => setIsOpen(open)}>
+      <DialogTrigger asChild>
+        {/* <FaRegEdit style={{ cursor: "pointer" }} color="#000" /> */}
+
+        <Button bg="transparent" color={"black"} h={"18px"} onClick={handleOpenModal}><Edit /></Button>
+        {/* <Button><FaRegEdit /></Button> */}
+      </DialogTrigger>
+
+      <DialogContent
+        bg={"#fff"}
+        w={{ base: "90%", md: "400px" }}
+        height={"80vh"}
+        overflow={"scroll"}
+        overflowX="hidden"
+        p={3} // Reduced padding
+        bgSize={"md"}
+      >
+        <DialogHeader bg="white">
+          <DialogTitle alignSelf="center" color="black" fontSize="14px">
+            Edit Sub Admin Account
+          </DialogTitle>
+        </DialogHeader>
+
+        <DialogBody bg="white">
+          <Stack py={3}>
+            <Field.Root>
+              {/* <Field.Label color="black" pt={1} fontSize="12px">
+                ID
+              </Field.Label>
+              <Input
+                placeholder="Enter the First Name"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+                value={editData.unique_id}
+                onChange={(e) => setEditData({ ...editData, unique_id: e.target.value })}
+              /> */}
+
+              <Field.Label color="black" pt={1} fontSize="12px">
+                First Name
+              </Field.Label>
+              <Input
+                placeholder="Enter the First Name"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+                value={editData.first_name}
+                onChange={(e) => setEditData({ ...editData, first_name: e.target.value })}
+              />
+              <Field.Label color="black" pt={1} fontSize="12px">
+                Last Name
+              </Field.Label>
+              <Input
+                placeholder="Enter the Last Name"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+                value={editData.last_name}
+                onChange={(e) => setEditData({ ...editData, last_name: e.target.value })}
+              />
+
+              <Field.Label color="black" pt={1} fontSize="12px">
+                DOB
+              </Field.Label>
+              <Input
+                placeholder="Enter the DOB"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+                value={editData.date_of_birth}
+                onChange={(e) => setEditData({ ...editData, date_of_birth: e.target.value })}
+              />
+
+              <Field.Label color="black" pt={1} fontSize="12px">
+                Gender
+              </Field.Label>
+              <Input
+                placeholder="Enter the Gender"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+                value={editData.gender}
+                onChange={(e) => setEditData({ ...editData, gender: e.target.value })}
+              />
+              <Heading mt={5} color={"#000"} fontSize={"sm"}>
+                Permissions
+              </Heading>
+            </Field.Root>
+            <Grid templateColumns="repeat(2, 1fr)" gap={4}>
+              {editData.permission.map((permission) => {
+                const label = resourceIdToLabel[permission.app_resource_xid];
+                return (
+                  <Checkbox
+                    key={permission.id}
+                    size="sm"
+                    color="black"
+                    checked={permission.is_active}
+                    onChange={() => handleCheckboxToggle(permission.app_resource_xid)}
+                    cursor={'pointer'}
+                  >
+                    <Text fontSize={12}>{label}</Text>
+                  </Checkbox>
+                );
+              })}
+            </Grid>
+          </Stack>
+        </DialogBody>
+        <DialogFooter display="flex" justifyContent="center" pt={"2"}>
+          <Button size={"xs"} w="100%" bg="#02A0A0" color={"#fff"} onClick={handleSubmit} disabled={isLoading}>
+            Save
+          </Button>
+        </DialogFooter>
+        <DialogCloseTrigger color="black" onClick={() => setIsOpen(false)} />
+      </DialogContent>
+      <Toaster />
+    </DialogRoot>
+  );
+}
+
+export default EditSubAdmin;
--- a/src/Pages/SubAdmin/SubAdmin.tsx
+++ b/src/Pages/SubAdmin/SubAdmin.tsx
@@ -1,20 +1,26 @@
-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";
+import AlertDailog from "../../components/AlertDailog";
+// import { RiDeleteBin5Line } from "react-icons/ri";
 import AddModel from "./AddModel"
-import EditSubAdmin from "../../components/EditSubAdmin"
+import EditSubAdmin from "./EditSubAdmin"
 import ViewSubAdmin from "./ViewSubAdmin"
+import Delete from "../../components/ActionIcons/Delete"
+import { PermissionResponse, useDeleteSubAdminPostMutation, useGetPermissionQuery, useGetSubAdminQuery } from "../../Redux/Service/manage.subadmin.service"
+import { useEffect, useState } from "react"
+import { Toaster, toaster } from "../../components/ui/toaster"
+import { useDebounce } from "../../components/Hooks/useDebounce"
+import SearchComponent from "../../components/SearchComponent"


 // table data

 const tableHeadRow = [
  "Sr. No",
-  "Id",
+  "Emp ID",
  "First Name",
  "last Name",
  "DOB",
@@ -22,34 +28,137 @@ const tableHeadRow = [
  "Action",
 ];

-const managepost: any[] = [
-  ...Array.from({ length: 12 }, (_, i) => ({
-    "Sr. No": i + 1,
-    "Id": 12565,
-    "First Name": "Kamlesh",
-    "last Name": "Pandey",
-    "DOB": "12/01/1987",
-    "Gender": "Male",
+// const managepost: any[] = [
+//   ...Array.from({ length: 12 }, (_, i) => ({
+//     "Sr. No": i + 1,
+//     "Id": 12565,
+//     "First Name": "Kamlesh",
+//     "last Name": "Pandey",
+//     "DOB": "12/01/1987",
+//     "Gender": "Male",
+//     "Action": (
+//       <HStack justifyContent="center">
+
+//         <ViewSubAdmin />
+//         <EditSubAdmin />
+
+//         <AlertDailog
+//           AltertTiggerIcon={() => <Delete />}
+//           alertText="Delete Users"
+//           alertIcon={<Image src={"DeleteIcon"} h={"39px"} />}
+//           alertCaption="are you sure you want to delete ?"
+//           onConfirm={() => {
+//             console.log("User deleted:", i + 1);
+//           }}
+//         />
+//       </HStack>
+//     ),
+//   })),
+// ];
+
+const SubAdmin = () => {
+  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) {
+      setLocalData(data?.data.data);
+      setAllPermissions(permissions);
+    }
+  }, [data, permissions]);
+
+  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();
+      if (response.success) {
+        toaster.create({
+          title: "Success",
+          description: "Sub Admin deleted successfully",
+          type: "success",
+        });
+        refetch()
+        console.log("Sub Admin deleted successfully:", response);
+      }
+      // Optionally, refetch data or update state after deletion
+    } catch (error) {
+      console.error("Error deleting Sub Admin:", error);
+      toaster.create({
+        title: "Error",
+        description: "Something went wrong",
+        type: "error",
+      });
+    }
+  };
+
+  const formatDateOfBirth = (dob: string): string => {
+    return new Date(dob).toLocaleDateString("en-GB", {
+      day: "2-digit",
+      month: "2-digit",
+      year: "numeric",
+    });
+  };
+
+  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,
+    "Emp ID": agency.unique_id,
+    "First Name": agency.first_name,
+    "last Name": agency.last_name,
+    "DOB": formatDateOfBirth(agency.date_of_birth),
+    "Gender": agency.gender,
+
    "Action": (
      <HStack justifyContent="center">
-
-        <ViewSubAdmin />
-        <EditSubAdmin />
+        {/* <EditDetails rowData={{ id: agency.id, question: agency.question, answer: agency.answer }} refetch={refetch} /> */}
+        <ViewSubAdmin id={agency.id} />
+        <EditSubAdmin id={agency.id} refetch={refetch} allPermissions={permissions} />

        <AlertDailog
-          AltertTiggerIcon={RiDeleteBin5Line}
-          alertText="Delete Users"
+          isOpen={deleteModal}
+          AltertTiggerIcon={() => <Delete onClick={() => setDeleteModal(prev => !prev)} />}
+          alertText="Delete sub admin"
          alertIcon={<Image src={"DeleteIcon"} h={"39px"} />}
          alertCaption="are you sure you want to delete ?"
+          onClose={() => setDeleteModal(false)}
          onConfirm={() => {
-            console.log("User deleted:", i + 1);
+            // console.log("User deleted:", index + 1);
+            setDeleteModal(false);
+            handleDeleteAdmin(agency.id)
          }}
        />
      </HStack>
    ),
-  })),
-];
-const SubAdmin = () => {
+  }));
+
  return (

    <MainFrame >
@@ -66,36 +175,31 @@ 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={"2sm"}
-                placeholder="Search..."
-                bgColor={'#EEEEEE'}
-                ps={8}
-              />
-            </InputGroup>
+            <SearchComponent
+              value={searchTerm}
+              onChange={handleSearchChange}
+            />
            {/* <Button bgColor={'#EEEEEE'} pl={3} pr={3}><IoMdAdd /> <Text>Add</Text></Button> */}
-            <AddModel />
+            <AddModel refetch={refetch} allPermissions={permissions} />
          </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}
+          isLoading={isFetching}
+          isError={isError}
        />
-      </Box>    </MainFrame>
+      </Box>
+      <Toaster />
+    </MainFrame>
  )
 }
 export default SubAdmin
--- a/src/Pages/SubAdmin/ViewSubAdmin.tsx
+++ b/src/Pages/SubAdmin/ViewSubAdmin.tsx
@@ -1,93 +1,218 @@
-import { Button } from "../../components/ui/button"
-import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../components/ui/dialog"
-import { Field, Grid, Heading, Icon, Input, Stack, Text } from "@chakra-ui/react"
-import { Checkbox } from "../../components/ui/checkbox"
-import { MdOutlineRemoveRedEye } from "react-icons/md";
-import { FaRegEdit } from "react-icons/fa";
-function ViewSubAdmin() {
-    return (
+// import { Button } from "../../components/ui/button";
+import {
+  DialogBody,
+  DialogCloseTrigger,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogRoot,
+  DialogTitle,
+  DialogTrigger,
+} from "../../components/ui/dialog";
+import {
+  Field,
+  Grid,
+  Heading,
+  Input,
+  Stack,
+  Text,
+} from "@chakra-ui/react";
+import { Checkbox } from "../../components/ui/checkbox";
+// import { MdOutlineRemoveRedEye } from "react-icons/md";
+// import { FaRegEdit } from "react-icons/fa";
+import View from "../../components/ActionIcons/View";
+import { Button } from "../../components/ui/button";
+import {useLazyViewSubAdminQuery } from "../../Redux/Service/manage.subadmin.service";

-        <DialogRoot placement="center" >
-            <DialogTrigger asChild>
-            <Icon
-            cursor={"pointer"}
-            p={0.5}
-            _hover={{ bg: "#00000015" }}
-            rounded={"md"}
-            boxSize={5}
-            // color={iconColor && iconColor}
-          >
-            <MdOutlineRemoveRedEye />
-          </Icon>
-               
-                    {/* <MdOutlineRemoveRedEye style={{ cursor: "pointer", fontSize:'16px'}} color="#000"/> */}
-               
-                {/* <Button><MdOutlineRemoveRedEye /></Button> */}
+function ViewSubAdmin({ id, }: { id: number}) {
+  const [trigger, { data }] = useLazyViewSubAdminQuery();

-            </DialogTrigger>
+  const handleView = () => {
+    trigger(id)
+  }
+ 
+  const viewSubAdmin = data?.data

-            <DialogContent
-                bg={"#fff"}
-                // w={{ lg: "60%", md: "230px" }}
-                w={{ base: '90%', md: '400px' }}
-                height={'80vh'}
-                overflow={'scroll'}
-                overflowX="hidden" 
-                p={3} // Reduced padding
-                bgSize={'md'}
-            >
-                <DialogHeader bg="white">
-                    <DialogTitle alignSelf="center" color="black" fontSize="14px">View Sub Admin Account</DialogTitle>
-                </DialogHeader>
+  const formatDateOfBirth = (dob: string): string => {
+    return new Date(dob).toLocaleDateString("en-GB", {
+      day: "2-digit",
+      month: "2-digit",
+      year: "numeric",
+    });
+  };

-                <DialogBody bg="white">
-                    <Stack py={3} >
+  console.log('data', data?.data);
+  return (
+    <DialogRoot placement="center">
+      <DialogTrigger asChild>
+        <Button
+          onClick={handleView}
+          bg={'transparent'}
+          color={"black"}
+        >
+          <View />
+        </Button>
+      </DialogTrigger>

-                        <Field.Root>
-                            <Field.Label color="black" pt={1} fontSize="12px">First Name</Field.Label>
-                            <Input value="Priyanka" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" readOnly />
+      {viewSubAdmin?.map((data: any) => (
+        <DialogContent
+          bg={"#fff"}
+          // w={{ lg: "60%", md: "230px" }}
+          w={{ base: "90%", md: "400px" }}
+          height={"80vh"}
+          overflow={"scroll"}
+          overflowX="hidden"
+          p={3} // Reduced padding
+          bgSize={"md"}
+          key={data.id}
+        >
+          <DialogHeader bg="white">
+            <DialogTitle alignSelf="center" color="black" fontSize="14px">
+              View Sub Admin Account
+            </DialogTitle>
+          </DialogHeader>

-                            <Field.Label color="black" pt={1} fontSize="12px">Last Name</Field.Label>
-                            <Input value="Joshi" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" readOnly />
+          <DialogBody bg="white">
+            <Stack py={3}>
+              <Field.Root>
+                <Field.Label color="black" pt={1} fontSize="12px">
+                  First Name
+                </Field.Label>
+                <Input
+                  value={data.first_name}
+                  bgColor="#EEEEEE"
+                  color="black"
+                  border="none"
+                  pl={1}
+                  fontSize="12px"
+                  height="30px"
+                  readOnly
+                />

-                            <Field.Label color="black" pt={1} fontSize="12px">ID</Field.Label>
-                            <Input value="ID" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" readOnly />
+                <Field.Label color="black" pt={1} fontSize="12px">
+                  Last Name
+                </Field.Label>
+                <Input
+                  value={data.last_name}
+                  bgColor="#EEEEEE"
+                  color="black"
+                  border="none"
+                  pl={1}
+                  fontSize="12px"
+                  height="30px"
+                  readOnly
+                />

-                            <Field.Label color="black" pt={1} fontSize="12px">DOB</Field.Label>
-                            <Input value="11/02/1989" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" readOnly />
+                <Field.Label color="black" pt={1} fontSize="12px">
+                  ID
+                </Field.Label>
+                <Input
+                  value={data.unique_id}
+                  bgColor="#EEEEEE"
+                  color="black"
+                  border="none"
+                  pl={1}
+                  fontSize="12px"
+                  height="30px"
+                  readOnly
+                />

-                            <Field.Label color="black" pt={1} fontSize="12px">Gender</Field.Label>
-                            <Input value="Male" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" readOnly
-                            />
-                            <Heading mt={5} color={'#000'} fontSize={'sm'}>Permissions</Heading>
-                        </Field.Root>
-                        <Grid templateColumns="repeat(2, 1fr)" gap={4}>
-                            <Checkbox size={'sm'} color={"black"} ><Text fontSize={12}>Dashboard</Text></Checkbox>
-                            <Checkbox size={'sm'} color={"black"}> <Text fontSize={12}>Manage contact us</Text></Checkbox>
-                            <Checkbox size={'sm'} color={"black"}> <Text fontSize={12}>manage User</Text></Checkbox>
-                            <Checkbox size={'sm'} color={"black"}> <Text fontSize={12}>Manage CMS</Text></Checkbox>
-                            <Checkbox size={'sm'} color={"black"}> <Text fontSize={12}>Manage Post</Text></Checkbox>
-                            <Checkbox size={'sm'} color={"black"}> <Text fontSize={12}>Manage Reports</Text></Checkbox>
-                            <Checkbox size={'sm'} color={"black"}> <Text fontSize={12}>manage Sub-Admin</Text></Checkbox>
-                            <Checkbox size={'sm'} color={"black"}> <Text fontSize={12}>My profile</Text></Checkbox>
-                            <Checkbox size={'sm'} color={"black"}><Text fontSize={12}>Manage Jobs</Text> </Checkbox>
-                            <Checkbox size={'sm'} color={"black"}><Text fontSize={12}> manage feedbacks</Text></Checkbox>
-                            <Checkbox size={'sm'} color={"black"}><Text fontSize={12}>Manage community</Text> </Checkbox>
-                            <Checkbox size={'sm'} color={"black"}><Text fontSize={12}> Notification</Text></Checkbox>
-                        </Grid>
-                    </Stack>
-                </DialogBody>
-                <DialogFooter display="flex" justifyContent="center" pt={"2"} >
-                    {/* <Button w="100%" bg="#02A0A0" color={"#fff"}>
+                <Field.Label color="black" pt={1} fontSize="12px">
+                  DOB
+                </Field.Label>
+                <Input
+                  value={formatDateOfBirth(data.date_of_birth)}
+                  bgColor="#EEEEEE"
+                  color="black"
+                  border="none"
+                  pl={1}
+                  fontSize="12px"
+                  height="30px"
+                  readOnly
+                />
+
+                <Field.Label color="black" pt={1} fontSize="12px">
+                  Gender
+                </Field.Label>
+                <Input
+                  value={data.gender}
+                  bgColor="#EEEEEE"
+                  color="black"
+                  border="none"
+                  pl={1}
+                  fontSize="12px"
+                  height="30px"
+                  readOnly
+                />
+                <Heading mt={5} color={"#000"} fontSize={"sm"}>
+                  Permissions
+                </Heading>
+              </Field.Root>
+              <Grid templateColumns="repeat(2, 1fr)" gap={4}>
+                {data.get_resource_action_link.map((check: any) => (
+                  <Checkbox size={"sm"} color={"black"} checked={check.is_active} key={check.id}>
+                    <Text fontSize={12}>{check?.app_resource.app_resource_title}</Text>
+                  </Checkbox>
+                  // <>
+                  //   <Checkbox size={"sm"} color={"black"}>
+                  //     <Text fontSize={12}>Dashboard</Text>
+                  //   </Checkbox>
+                  //   <Checkbox size={"sm"} color={"black"}>
+                  //     {" "}
+                  //     <Text fontSize={12}>Manage contact us</Text>
+                  //   </Checkbox>
+                  //   <Checkbox size={"sm"} color={"black"}>
+                  //     {" "}
+                  //     <Text fontSize={12}>manage User</Text>
+                  //   </Checkbox>
+                  //   <Checkbox size={"sm"} color={"black"}>
+                  //     {" "}
+                  //     <Text fontSize={12}>Manage CMS</Text>
+                  //   </Checkbox>
+                  //   <Checkbox size={"sm"} color={"black"}>
+                  //     {" "}
+                  //     <Text fontSize={12}>Manage Post</Text>
+                  //   </Checkbox>
+                  //   <Checkbox size={"sm"} color={"black"}>
+                  //     {" "}
+                  //     <Text fontSize={12}>Manage Reports</Text>
+                  //   </Checkbox>
+                  //   <Checkbox size={"sm"} color={"black"}>
+                  //     {" "}
+                  //     <Text fontSize={12}>manage Sub-Admin</Text>
+                  //   </Checkbox>
+                  //   <Checkbox size={"sm"} color={"black"}>
+                  //     {" "}
+                  //     <Text fontSize={12}>My profile</Text>
+                  //   </Checkbox>
+                  //   <Checkbox size={"sm"} color={"black"}>
+                  //     <Text fontSize={12}>Manage Jobs</Text>{" "}
+                  //   </Checkbox>
+                  //   <Checkbox size={"sm"} color={"black"}>
+                  //     <Text fontSize={12}> manage feedbacks</Text>
+                  //   </Checkbox>
+                  //   <Checkbox size={"sm"} color={"black"}>
+                  //     <Text fontSize={12}>Manage community</Text>{" "}
+                  //   </Checkbox>
+                  //   <Checkbox size={"sm"} color={"black"}>
+                  //     <Text fontSize={12}> Notification</Text>
+                  //   </Checkbox>
+                  // </>
+                ))}
+              </Grid>
+            </Stack>
+          </DialogBody>
+          <DialogFooter display="flex" justifyContent="center" pt={"2"}>
+            {/* <Button w="100%" bg="#02A0A0" color={"#fff"}>
                        Save
                    </Button> */}
-                </DialogFooter>
+          </DialogFooter>

-                <DialogCloseTrigger color="black" />
-            </DialogContent>
-        </DialogRoot >
-
-    )
+          <DialogCloseTrigger color="black" />
+        </DialogContent>
+      ))}
+    </DialogRoot>
+  );
 }

-export default ViewSubAdmin
+export default ViewSubAdmin;
--- a/src/Pages/VerifyEnterOTP.tsx
+++ b/src/Pages/VerifyEnterOTP.tsx
@@ -0,0 +1,219 @@
+import {
+    Box,
+    Center,
+    HStack,
+    Image,
+    Input,
+    Text,
+    VStack,
+} from "@chakra-ui/react";
+import axios from "axios";
+import { useEffect, useState } from "react";
+import { useNavigate, useLocation } from "react-router-dom";
+import logo from "../assets/logo.svg";
+import { Button } from "../components/ui/button";
+import { toaster, Toaster } from "../components/ui/toaster";
+
+const VerifyOTP = () => {
+    const [otp, setOtp] = useState<string[]>(["", "", "", ""]);
+    const [isLoading, setIsLoading] = useState(false);
+    const [timer, setTimer] = useState(60);
+    const [isResendDisabled, setIsResendDisabled] = useState(true);
+    const navigate = useNavigate();
+    const location = useLocation();
+    const queryParams = new URLSearchParams(location.search);
+    const phoneNumber = queryParams.get("phone");
+
+    useEffect(() => {
+        let interval: NodeJS.Timeout;
+
+        if (timer > 0 && isResendDisabled) {
+            interval = setInterval(() => {
+                setTimer((prevTimer) => prevTimer - 1);
+            }, 1000);
+        } else if (timer === 0) {
+            setIsResendDisabled(false);
+        }
+
+        return () => clearInterval(interval);
+    }, [timer, isResendDisabled]);
+
+
+    const handleResendOTP = async () => {
+        setIsResendDisabled(true);
+        setTimer(60); // Reset timer to 1 minute
+
+        try {
+            const res = await axios.post(`${import.meta.env.VITE_API_URL}/send-otp`, {
+                mobile_number: phoneNumber,
+            });
+
+            if (res.status === 200) {
+                toaster.create({
+                    title: "OTP resent successfully",
+                    type: "success",
+                });
+            } else {
+                toaster.create({
+                    title: res.data.message || "Failed to resend OTP",
+                    type: "error",
+                });
+                setIsResendDisabled(false); // Enable button if failed
+            }
+        } catch (error: any) {
+            toaster.create({
+                title: error.response?.data?.message || "Failed to resend OTP",
+                type: "error",
+            });
+            setIsResendDisabled(false); // Enable button if error
+        }
+    };
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>, index: number): void => {
+        const value = e.target.value;
+
+        // Prevent non-numeric input
+        if (/[^0-9]/.test(value)) return;
+
+        // Update the OTP state with the new value
+        const newOtp = [...otp];
+        newOtp[index] = value;
+        setOtp(newOtp);
+
+        // Move focus to the next input automatically
+        if (value && index < otp.length - 1) {
+            const nextInput = document.getElementById(`otp-input-${index + 1}`) as HTMLInputElement;
+            if (nextInput) nextInput.focus();
+        }
+    };
+
+    const handleOtpSubmit = async () => {
+        if (otp.length !== 4) {
+            toaster.create({
+                title: "OTP must be 4 digits",
+                type: "error",
+            });
+            return;
+        }
+
+        const fullOtp = otp.join('');
+
+        setIsLoading(true);
+        try {
+            const res = await axios.post(`${import.meta.env.VITE_API_URL}/verify-otp`, {
+                mobile_number: phoneNumber,
+                otp: fullOtp,
+            });
+
+            if (res.status === 200) {
+                toaster.create({
+                    title: "OTP Verified Successfully",
+                    type: "success",
+                });
+                const userid = res.data.data.id;
+                navigate(`/forgot-password/reset-password?id=${userid}`);
+            } else {
+                toaster.create({
+                    title: res.data.message || "Invalid OTP",
+                    type: "error",
+                });
+            }
+        } catch (error: any) {
+            toaster.create({
+                title: error.response?.data?.message || "Something went wrong",
+                type: "error",
+            });
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    return (
+        <VStack w="100%" h="100vh" bg="#ffffff">
+            <HStack
+                boxShadow="rgba(99, 99, 99, 0.2) 0px 2px 8px 0px"
+                w="100%"
+                ps={8}
+                h="7%"
+                justifyContent="flex-start"
+            >
+                <Image w={50} src={logo} />
+            </HStack>
+
+            <Center w="100%" h="93%" p={8}>
+                <Box p={8} borderWidth={1} borderRadius="lg" boxShadow="lg">
+                    <Text fontSize="24px" fontWeight="bold" color="#313039" textAlign="center">
+                        Enter OTP
+                    </Text>
+
+                    <Text fontSize="14px" color="gray.600" textAlign="center" mt={2}>
+                        OTP sent to {phoneNumber}
+                    </Text>
+
+                    <HStack gap={4} mt={6} justify="center">
+                        {otp.map((digit, index) => (
+                            <Input
+                                key={index}
+                                id={`otp-input-${index}`}
+                                value={digit}
+                                maxW="50px"
+                                color={"black"}
+                                textAlign="center"
+                                fontSize="20px"
+                                placeholder="0"
+                                border="1px solid grey"
+                                onChange={(e) => handleChange(e, index)}
+                                maxLength={1} // Only allows 1 character per input
+                            />
+                        ))}
+                    </HStack>
+                    {/* <Box textAlign="center">
+                        <Text
+                            color="#4746F4"
+                            textDecoration="underline"
+                            fontWeight="bold"
+                            mt={3}
+                            cursor="pointer"
+                            display="inline-block"
+                            px={2}
+                        >
+                            Resend OTP
+                        </Text>
+                    </Box> */}
+                    <Box textAlign="center" mt={4}>
+                        {isResendDisabled ? (
+                            <Text color="gray.500">
+                                Resend OTP in {timer} seconds
+                            </Text>
+                        ) : (
+                            <Text
+                                color="#4746F4"
+                                textDecoration="underline"
+                                fontWeight="bold"
+                                cursor="pointer"
+                                onClick={handleResendOTP}
+                            >
+                                Resend OTP
+                            </Text>
+                        )}
+                    </Box>
+
+                    <Button
+                        loading={isLoading}
+                        mt={6}
+                        w="100%"
+                        bg="#02A0A0"
+                        color="white"
+                        onClick={handleOtpSubmit}
+                    >
+                        Verify OTP
+                    </Button>
+                </Box>
+            </Center>
+
+            <Toaster />
+        </VStack>
+    );
+};
+
+export default VerifyOTP;
--- a/src/Redux/Service/agency.master.module.service.ts
+++ b/src/Redux/Service/agency.master.module.service.ts
@@ -0,0 +1,112 @@
+import { createApi } from "@reduxjs/toolkit/query/react";
+import { baseQueryWithReauth } from "./apiSlice";
+
+export interface Agency {
+  id: number;
+  name: string;
+  state: string;
+  rc_status: string;
+  rc_number: string;
+  domain_name: string;
+  gst_number: string;
+  is_active: boolean,
+  registered_office: string,
+}
+
+export interface AgencyData {
+  current_page: number;
+  data: Agency[];
+  first_page_url: string;
+  from: number;
+  last_page: number;
+  last_page_url: string;
+  per_page: number;
+  total: number;
+}
+
+export interface AgencyResponse {
+  status: "success" | "error";
+  status_code: number;
+  message: string;
+  data: AgencyData;
+}
+
+export interface UpdatePrivacyPolicyPayload {
+  id: number,
+  is_active: boolean,
+}
+
+export interface AgencyPost {
+  raid?: string;
+  name: string;
+  auth_signatory?: string;
+  state: string;
+  district?: string;
+  rc_number: string;
+  contact_details?: string;
+  registered_office: string;
+  branch_office?: string;
+  registered_email?: string;
+  other_email?: string;
+  registered_contact?: string;
+  website?: string;
+  domain_name: string;
+  staff_domain_name?: string;
+  gst_number: string;
+  rc_status?: "Active" | "Inactive"; // Assuming it's a status with limited values
+}
+
+
+export const agencyMasterModule = createApi({
+  reducerPath: "agencyMasterModule",
+  baseQuery: baseQueryWithReauth, // Use enhanced baseQuery with error handling
+  endpoints: (builder) => ({
+
+    createAgencyMasterPost: builder.mutation<AgencyPost, Partial<AgencyPost>>({
+      query: (data) => ({
+        url: "/agency-store",
+        method: "POST",
+        body: data,
+      }),
+    }),
+
+    // getAgencyMaster: builder.query<AgencyResponse, number>({
+    //   query: (page = 1) => `/agency-master?page=${page}`
+    // }),
+
+    getAgencyMaster: builder.query<AgencyResponse, { 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 `/agency-master?${params.toString()}`;
+      },
+    }),
+
+    agencyMasterToggle: builder.mutation({
+      query: ({ id, is_active }) => ({
+        url: `/agency-status`,
+        method: "POST",
+        body: { id, is_active },
+      }),
+    }),
+
+    updateAgencyMaster: builder.mutation({
+      query: (updatedData) => ({
+        url: "/agency-update",
+        method: "POST",
+        body: updatedData,
+      }),
+    }),
+
+  }),
+});
+
+export const {
+  useCreateAgencyMasterPostMutation,
+  useGetAgencyMasterQuery,
+  useAgencyMasterToggleMutation,
+  useUpdateAgencyMasterMutation,
+} = agencyMasterModule;
+                                                                                                                                                                     
--- a/src/Redux/Service/country.master.ts
+++ b/src/Redux/Service/country.master.ts
@@ -0,0 +1,120 @@
+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}`,
+        // }),
+
+        getCountryMaster: 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 `/country-list?${params.toString()}`;
+            },
+        }),
+
+        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;
--- a/src/Redux/Service/dashBoard.ts
+++ b/src/Redux/Service/dashBoard.ts
@@ -0,0 +1,77 @@
+import { createApi } from "@reduxjs/toolkit/query/react";
+import { baseQueryWithReauth } from "./apiSlice";
+
+export type TotalUser = {
+    data: {
+        totalRecruiterCount: number;
+        totalCustomerCount: string;
+        totalUserCount: string;
+        recruitersByMonth: Record<string, number>;
+        customersByMonth: Record<string, number>;
+    };
+};
+
+export type PastUser = {
+    data: {
+        past24hourRecruiterCount: number;
+        past24hourCustomercount: number;
+    };
+};
+
+export type NewUser = {
+    data: {
+        newRecuiterCount: number;
+        newCustomerCount: number;
+        newTotalUserCount: number;
+    };
+};
+
+export type AgencyList = {
+    data: [
+        {
+            id: number;
+            name: string;
+            created_at: string;
+            is_active: boolean
+        }
+    ];
+};
+
+export type FaqList = {
+    data: [
+        {
+            id: number;
+            faqs_xid: number;
+            language_master_xid: number;
+            question: string;
+            answer: string;
+            is_active: boolean
+        }
+    ];
+};
+
+
+export const dashBoard = createApi({
+    reducerPath: "dashBoard",
+    baseQuery: baseQueryWithReauth, // Use enhanced baseQuery with error handling
+    endpoints: (builder) => ({
+
+        getTotalUser: builder.query<TotalUser, void>({ query: () => "/dashboard-total-user" }),
+        getPastUser: builder.query<PastUser, void>({ query: () => "/dashboard-past-user" }),
+        getNewUser: builder.query<NewUser, void>({ query: () => "/dashboard-new-user" }),
+        getAgencyList: builder.query<AgencyList, void>({ query: () => "/dashboard-agency-list" }),
+        getFaqList: builder.query<FaqList, void>({ query: () => "/dashboard-faq-list" }),
+
+
+
+
+    }),
+});
+
+export const {
+    useGetTotalUserQuery,
+    useGetPastUserQuery,
+    useGetNewUserQuery,
+    useGetAgencyListQuery,
+    useGetFaqListQuery,
+} = dashBoard;
--- a/src/Redux/Service/deactivated.account.service.ts
+++ b/src/Redux/Service/deactivated.account.service.ts
@@ -1,26 +1,30 @@
-import { createApi } from "@reduxjs/toolkit/query";
+import { createApi } from "@reduxjs/toolkit/query/react"; // add /react for auto-generated hooks
 import { baseQueryWithReauth } from "./apiSlice";

+interface DeactivatedData {
+  id: number;
+  email: string;
+  first_name: string;
+  created_at: string;
+}
+
+interface ApiResponse {
+  data: {
+    data: DeactivatedData[];
+  };
+}
+
 export const deactivatedAccounts = createApi({
-    reducerPath: "deactivatedAccounts",
-    baseQuery: baseQueryWithReauth, // Use enhanced baseQuery with error handling
-    endpoints: (builder) => ({
-  
-  
-  
-      getPosts: builder.query<Post[], void>({ query: () => "/posts" }),
-  
-  
-  
-  
-  
+  reducerPath: "deactivatedAccounts",
+  baseQuery: baseQueryWithReauth,
+  tagTypes: ["Deactivated"],
+  endpoints: (builder) => ({
+    getContact: builder.query<ApiResponse, void>({
+      query: () => "/manage-user-deactivate-list",
+      providesTags: ["Deactivated"],
    }),
-  });
-  
-  export const {  } = deactivatedAccounts;
-  
-  export type Post = {
-    id: number;
-    title: string;
-    body: string;
-  };
+  }),
+});
+
+// ✅ Export the auto-generated hook
+export const { useGetContactQuery } = deactivatedAccounts;
--- a/src/Redux/Service/department.master.ts
+++ b/src/Redux/Service/department.master.ts
@@ -0,0 +1,119 @@
+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}`,
+        // }),
+
+        getDepartmentMaster: 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 `/department-master-list?${params.toString()}`;
+            },
+        }),
+
+        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;
--- a/src/Redux/Service/faqs.service.ts
+++ b/src/Redux/Service/faqs.service.ts
@@ -1,26 +1,91 @@
-import { createApi } from "@reduxjs/toolkit/query";
+import { createApi } from "@reduxjs/toolkit/query/react";
 import { baseQueryWithReauth } from "./apiSlice";

+export interface FaqData {
+  id: number;
+  principal_type_xid: number;
+  is_active: number;
+  translations:{
+    id: string,
+    faqs_xid: number,
+    language_master_xid: number,
+    question: string,
+    answer: 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: FaqData[];
+  };
+}
+
+
+export type Post = {
+  principal_type_xid: number;
+  language_code: string;
+  question: string;
+  answer: string;
+};
+
+
 export const faqs = createApi({
-    reducerPath: "faqs",
-    baseQuery: baseQueryWithReauth, // Use enhanced baseQuery with error handling
-    endpoints: (builder) => ({
-  
-  
-  
-      getPosts: builder.query<Post[], void>({ query: () => "/posts" }),
-  
-  
-  
-  
-  
+  reducerPath: "faqs",
+  baseQuery: baseQueryWithReauth, // Use enhanced baseQuery with error handling
+  endpoints: (builder) => ({
+    createFaqPost: builder.mutation<Post, Partial<Post>>({
+      query: (data) => ({
+        url: "/faq-store",
+        method: "POST",
+        body: data,
+      }),
    }),
-  });
-  
-  export const {  } = faqs;
-  
-  export type Post = {
-    id: number;
-    title: string;
-    body: string;
-  };
+    // 🔹 GET: Fetch all posts
+    getFaq: builder.query<ApiResponse, number>({
+      query: (page = 1) => `/faq-list?page=${page}`,
+    }),
+
+    updateFaq: builder.mutation({
+      query: (updatedData) => ({
+        url: "/faq-update",
+        method: "POST",
+        body: updatedData,
+      }),
+    }),
+
+    faqToggle: builder.mutation({
+      query: ({ id, is_active }) => ({
+        url: `/faq-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 {
+  useGetFaqQuery,
+  useCreateFaqPostMutation,
+  useUpdateFaqMutation,
+  useFaqToggleMutation,
+  useDeleteFaqPostMutation
+} = faqs;
--- a/src/Redux/Service/forget.password.service.ts
+++ b/src/Redux/Service/forget.password.service.ts
@@ -1,36 +0,0 @@
-import { createApi } from "@reduxjs/toolkit/query/react";
-import { baseQueryWithReauth } from "./apiSlice";
-
-export const forgetPassword = createApi({
-  reducerPath: "aboutUs",
-  baseQuery: baseQueryWithReauth, // Use enhanced baseQuery with error handling
-  endpoints: (builder) => ({
-
-
-
-    // 🔹 GET: Fetch all posts
-    getAboutUs: builder.query<AboutUs[], void>({
-      query: () => "/send-otp",
-    }),
-
-  }),
-});
-
-export const { 
-  useGetAboutUsQuery,  
-} = forgetPassword;
-
-// Define Post type
-export type Post = {
-  id: number;
-  title: string;
-  body: string;
-};
-
-
-export type AboutUs = {
-  id: number;
-  language_master_xid: number;
-  content: string;
-  is_active: boolean;
-};
--- a/src/Redux/Service/industry.master.service.ts
+++ b/src/Redux/Service/industry.master.service.ts
@@ -0,0 +1,102 @@
+import { createApi } from "@reduxjs/toolkit/query/react";
+import { baseQueryWithReauth } from "./apiSlice";
+
+interface IndustryMasterResponse {
+    status: string;
+    status_code: number;
+    message: string;
+    data: PaginationData;
+}
+
+interface PaginationData {
+    current_page: number;
+    data: IndustryMaster[];
+    first_page_url: string;
+    from: number;
+    last_page: number;
+    last_page_url: string;
+    links: PaginationLink[];
+    next_page_url: string | null;
+    path: string;
+    per_page: number;
+    prev_page_url: string | null;
+    to: number;
+    total: number;
+}
+
+export interface IndustryMaster {
+    id: number;
+    categories_masters_xid: number,
+    is_active: boolean;
+    en_name: string;
+    hi_name: string;
+    mr_name: string,
+    te_name: string,
+    ta_name: string,
+    bn_name: string,
+    or_name: string,
+}
+
+
+interface PaginationLink {
+    url: string | null;
+    label: string;
+    active: boolean;
+}
+
+export interface Post {
+    en_name: string,
+    categories_masters_xid: number
+}
+
+export const industryMaster = createApi({
+    reducerPath: "industryMaster",
+    baseQuery: baseQueryWithReauth, // Use enhanced baseQuery with error handling
+    endpoints: (builder) => ({
+        createIndustryMasterPost: builder.mutation<Post, Partial<Post>>({
+            query: (data) => ({
+                url: "/industry-master-store",
+                method: "POST",
+                body: data,
+            }),
+        }),
+        // 🔹 GET: Fetch all posts
+        // getIndustryMaster: builder.query<IndustryMasterResponse, number>({
+        //     query: (page = 1) => `/industry-master-list?page=${page}`,
+        // }),
+
+        getIndustryMaster: builder.query<IndustryMasterResponse, { 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 `/industry-master-list?${params.toString()}`;
+            },
+        }),
+
+        updateIndustryMaster: builder.mutation({
+            query: (updatedData) => ({
+                url: "industry-master-update",
+                method: "POST",
+                body: updatedData,
+            }),
+        }),
+
+        industryMasterToggle: builder.mutation({
+            query: ({ id, is_active }) => ({
+                url: `/industry-master-status`,
+                method: "POST",
+                body: { id, is_active },
+            }),
+        }),
+
+    }),
+});
+
+export const {
+    useGetIndustryMasterQuery,
+    useCreateIndustryMasterPostMutation,
+    useUpdateIndustryMasterMutation,
+    useIndustryMasterToggleMutation,
+} = industryMaster;
--- a/src/Redux/Service/job.status.ts
+++ b/src/Redux/Service/job.status.ts
@@ -0,0 +1,101 @@
+import { createApi } from "@reduxjs/toolkit/query/react";
+import { baseQueryWithReauth } from "./apiSlice";
+
+export interface JobStatusData {
+    id: number;
+    is_active: string;
+    job_status_translation:{
+        job_status_xid: number,
+        title:string,
+        language_xid:number
+    }[],
+}
+
+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: JobStatusData[];
+    };
+}
+
+export interface CountryEdit {
+    status: string;
+    status_code: number;
+    message: string;
+    data: JobStatusData[];
+}
+
+
+export type PostJobStatus = {
+ title: string
+};
+
+
+export const jobStatus = createApi({
+    reducerPath: "jobStatus",
+    baseQuery: baseQueryWithReauth, // Use enhanced baseQuery with error handling
+    endpoints: (builder) => ({
+        createJobStatusPost: builder.mutation<PostJobStatus, Partial<PostJobStatus>>({
+            query: (data) => ({
+                url: "/job-status-store",
+                method: "POST",
+                body: data,
+            }),
+        }),
+        // 🔹 GET: Fetch all posts
+        // getJobStatus: builder.query<ApiResponse, number>({
+        //     query: (page = 1) => `/job-status-list?page=${page}`,
+        // }),
+
+        getJobStatus: 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 `/job-status-list?${params.toString()}`;
+            },
+        }),
+
+        updateJobStatus: builder.mutation({
+            query: (updatedData) => ({
+                url: "/job-status-update",
+                method: "POST",
+                body: updatedData,
+            }),
+        }),
+
+        jobStatusToggle: builder.mutation({
+            query: ({ id, is_active }) => ({
+                url: `/job-status-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 {
+    useGetJobStatusQuery,
+    useCreateJobStatusPostMutation,
+    useUpdateJobStatusMutation,
+    useJobStatusToggleMutation,
+    // useDeleteFaqPostMutation
+} = jobStatus;
--- a/src/Redux/Service/job.type.service.ts
+++ b/src/Redux/Service/job.type.service.ts
@@ -0,0 +1,90 @@
+import { createApi } from "@reduxjs/toolkit/query/react";
+import { baseQueryWithReauth } from "./apiSlice";
+
+interface JobTypeResponse {
+    status: string;
+    status_code: number;
+    message: string;
+    data: PaginationData;
+}
+
+interface PaginationData {
+    current_page: number;
+    data: JobTypeData[];
+    first_page_url: string;
+    from: number;
+    last_page: number;
+    last_page_url: string;
+    links: PaginationLink[];
+    next_page_url: string | null;
+    path: string;
+    per_page: number;
+    prev_page_url: string | null;
+    to: number;
+    total: number;
+}
+
+export interface JobTypeData {
+    id: number;
+    is_active: boolean;
+    en_name: string;
+    hi_name: string;
+    mr_name:string,
+    te_name:string,
+    ta_name:string,
+    bn_name:string,
+    or_name:string,
+}
+
+
+interface PaginationLink {
+    url: string | null;
+    label: string;
+    active: boolean;
+}
+
+export interface Post {
+    en_name: string
+}
+
+export const jobType = createApi({
+    reducerPath: "jobType",
+    baseQuery: baseQueryWithReauth, // Use enhanced baseQuery with error handling
+    endpoints: (builder) => ({
+        createJobTypePost: builder.mutation<Post, Partial<Post>>({
+            query: (data) => ({
+                url: "/job-type-add",
+                method: "POST",
+                body: data,
+            }),
+        }),
+        // 🔹 GET: Fetch all posts
+        getJobType: builder.query<JobTypeResponse, number>({
+            query: (page = 1) => `/job-type?page=${page}`,
+        }),
+
+        updateJobType: builder.mutation({
+            query: (updatedData) => ({
+                url: "job-type-update",
+                method: "POST",
+                body: updatedData,
+            }),
+        }),
+
+        jobTypeToggle: builder.mutation({
+            query: ({ id, is_active }) => ({
+                url: `/job-type-status`,
+                method: "POST",
+                body: { id, is_active },
+            }),
+        }),
+
+    }),
+});
+
+export const {
+    useGetJobTypeQuery,
+    useCreateJobTypePostMutation,
+    useUpdateJobTypeMutation,
+    useJobTypeToggleMutation,
+} = jobType;
--- a/src/Redux/Service/manage.aboutus.service.ts
+++ b/src/Redux/Service/manage.aboutus.service.ts
@@ -1,6 +1,6 @@
 import { createApi } from "@reduxjs/toolkit/query/react";
 import { baseQueryWithReauth } from "./apiSlice";
-
+import { AboutUsResponse } from "../../Types/aboutUsType";
 export const aboutUs = createApi({
  reducerPath: "aboutUs",
  baseQuery: baseQueryWithReauth, // Use enhanced baseQuery with error handling
@@ -9,14 +9,11 @@ export const aboutUs = createApi({


    // 🔹 GET: Fetch all posts
-    getAboutUs: builder.query<AboutUs[], void>({
+    getAboutUs: builder.query<AboutUsResponse, void>({
      query: () => "/about-us",
    }),


-
-
-
    // 🔹 GET: Fetch a single post by ID
    getPostById: builder.query<Post, number>({
      query: (id) => `/posts/${id}`,
@@ -24,22 +21,28 @@ export const aboutUs = createApi({

    // 🔹 POST: Create a new post
    createPost: builder.mutation<Post, Partial<Post>>({
-      query: (newPost) => ({
+      query: (data) => ({
        url: "/posts",
        method: "POST",
-        body: newPost,
+        body: data,
      }),
    }),
-
    // 🔹 PUT: Update an existing post
-    updatePost: builder.mutation<Post, { id: number; updatedData: Partial<Post> }>({
-      query: ({ id, updatedData }) => ({
-        url: `/posts/${id}`,
-        method: "PUT",
-        body: updatedData,
+    // updateAboutUs: builder.mutation<UpdateAboutUsResponse, UpdateAboutUsRequest>({
+    //   query: ({ id, updatedData }) => ({
+    //     url: `/posts/${id}`,
+    //     method: "POST",
+    //     body: updatedData,
+    //   }),
+    // }),
+       // 🔹 PUT: Update an About Us entry
+       updateAboutUs: builder.mutation({
+        query: (updatedData) => ({
+          url: "/about-us/update", // ✅ Updated URL
+          method: "POST",
+          body: updatedData,
+        }),
      }),
-    }),
-
    // 🔹 DELETE: Remove a post by ID
    deletePost: builder.mutation<{ success: boolean }, number>({
      query: (id) => ({
@@ -52,20 +55,9 @@ export const aboutUs = createApi({

 export const { 
  useGetAboutUsQuery, 
-
-
-
-
-
-
-
-
-
-
-  
+  useUpdateAboutUsMutation,
  useGetPostByIdQuery, 
-  useCreatePostMutation, 
-  useUpdatePostMutation, 
+  useCreatePostMutation,  
  useDeletePostMutation 
 } = aboutUs;

@@ -77,9 +69,20 @@ export type Post = {
 };


+export type UpdateAboutUsRequest={
+  id: number; updatedData: string,language_code:string
+}
+
+
+export type UpdateAboutUsResponse={
+  id: number; updatedData: string,language_code:string
+}
+
+
 export type AboutUs = {
  id: number;
  language_master_xid: number;
  content: string;
  is_active: boolean;
 };
+
--- a/src/Redux/Service/manage.contactus.service.ts
+++ b/src/Redux/Service/manage.contactus.service.ts
@@ -1,26 +1,45 @@
-import { createApi } from "@reduxjs/toolkit/query";
+import { createApi } from "@reduxjs/toolkit/query/react";
 import { baseQueryWithReauth } from "./apiSlice";

+interface ContactData {
+  id: number;
+  email: string;
+  first_name: string;
+  created_at: string;
+}
+
+interface ApiResponse {
+  data: {
+    data: ContactData[];
+  };
+}
+
 export const manageContactUs = createApi({
-    reducerPath: "manageContactUs",
-    baseQuery: baseQueryWithReauth, // Use enhanced baseQuery with error handling
-    endpoints: (builder) => ({
-  
-  
-  
-      getPosts: builder.query<Post[], void>({ query: () => "/posts" }),
-  
-  
-  
-  
-  
+  reducerPath: "manageContactUs",
+  baseQuery: baseQueryWithReauth, // Use enhanced baseQuery with error handling
+  tagTypes: ["Contact"],
+  endpoints: (builder) => ({
+
+
+    getContact: 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 `/contact-us?${params.toString()}`;
+      },
+      providesTags: ["Contact"],
    }),
-  });
-  
-  export const {  } = manageContactUs;
-  
-  export type Post = {
-    id: number;
-    title: string;
-    body: string;
-  };
+
+    pendingRequest: builder.mutation({
+      query: (body) => ({
+        url: `/contact-us-response`,
+        method: "POST",
+        body,
+      }),
+      invalidatesTags: ["Contact"],
+    }),
+  }),
+});
+
+export const { useGetContactQuery, usePendingRequestMutation } = manageContactUs;
--- a/src/Redux/Service/manage.jobs.service.ts
+++ b/src/Redux/Service/manage.jobs.service.ts
@@ -1,26 +1,147 @@
-import { createApi } from "@reduxjs/toolkit/query";
+import { createApi } from "@reduxjs/toolkit/query/react";
 import { baseQueryWithReauth } from "./apiSlice";

-export const manageJobs = createApi({
-    reducerPath: "manageJobs",
-    baseQuery: baseQueryWithReauth, // Use enhanced baseQuery with error handling
-    endpoints: (builder) => ({
-  
-  
-  
-      getPosts: builder.query<Post[], void>({ query: () => "/posts" }),
-  
-  
-  
-  
-  
-    }),
-  });
-  
-  export const {  } = manageJobs;
-  
-  export type Post = {
+export interface JobStatusData {
+  id: number;
+  job_title: string;
+  workspace_mode_xid: number;
+  industry_xid: number;
+  department_xid: number;
+  company_name: string;
+  ctc_currency_symbol: string;
+  ctc_amount: string;
+  experience: string;
+  job_location: string;
+  country_xid: number;
+  job_type_xid: number;
+  skill_description: string;
+  job_description: string;
+  job_image: string | null;
+  industry: {
    id: number;
-    title: string;
-    body: string;
-  };
+    en_name: string;
+  };
+  department: {
+    id: number;
+    en_name: string;
+  };
+  workspace: {
+    id: number;
+    en_name: string;
+  };
+  country: {
+    id: number;
+    en_name: string;
+  };
+  job_type: {
+    id: number;
+    en_name: 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: JobStatusData[];
+  };
+}
+
+export interface CountryEdit {
+  status: string;
+  status_code: number;
+  message: string;
+  data: JobStatusData[];
+}
+
+
+export type PostJobStatus = { 
+  title: string
+};
+
+export type WorkSpace = {
+  id: number;
+  en_name: string;
+};
+
+export const manageJobs = createApi({
+  reducerPath: "manageJobs",
+  baseQuery: baseQueryWithReauth, // Use enhanced baseQuery with error handling
+  endpoints: (builder) => ({
+
+    // getManageJobs: builder.query<ApiResponse, number>({
+    //   query: (page = 1) => `/manage-jobs-list?page=${page}`,
+    // }),
+
+    getManageJobs: 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 `/manage-jobs-list?${params.toString()}`;
+      },
+    }),
+
+    updateJobs: builder.mutation({
+      query: (updatedData) => ({
+        url: "/manage-jobs-update",
+        method: "POST",
+        body: updatedData,
+      }),
+    }),
+
+    viewJobs: builder.query<ApiResponse, number>({
+      query: () => `/manage-jobs-list`,
+    }),
+
+    deleteJobsPost: builder.mutation<{ status: string; message: string }, { id: number }>({
+      query: ({ id }) => ({
+        url: `/manage-jobs-delete`,
+        method: "POST",
+        body: { id },
+      }),
+    }),
+
+    // Modes
+    getWorkspaceModes: builder.query({
+      query: () => `/manage-jobs-get-workspace`,
+    }),
+
+    getIndustry: builder.query({
+      query: () => `/manage-jobs-get-industry`,
+    }),
+
+    getDepartment: builder.query({
+      query: () => `/manage-jobs-get-department`,
+    }),
+
+    getCountry: builder.query({
+      query: () => `/manage-jobs-get-country`,
+    }),
+
+    getManageJobType: builder.query({
+      query: () => `/job-type`,
+    }),
+
+  }),
+});
+
+export const { 
+  useGetManageJobsQuery,
+  useLazyViewJobsQuery,
+  useDeleteJobsPostMutation,
+  useUpdateJobsMutation,
+  useGetWorkspaceModesQuery,
+  useGetIndustryQuery,
+  useGetDepartmentQuery,
+  useGetCountryQuery,
+  useGetManageJobTypeQuery
+} = manageJobs;
--- a/src/Redux/Service/manage.post.service.ts
+++ b/src/Redux/Service/manage.post.service.ts
@@ -0,0 +1,82 @@
+import { createApi } from "@reduxjs/toolkit/query/react";
+import { baseQueryWithReauth } from "./apiSlice";
+
+export interface JobStatusData {
+    id: number;
+    is_active: string;
+    created_at:string,
+    job_status_translation:{
+        job_status_xid: number,
+        title:string,
+        language_xid:number
+    }[],
+}
+
+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: JobStatusData[];
+    };
+}
+
+export interface CountryEdit {
+    status: string;
+    status_code: number;
+    message: string;
+    data: JobStatusData[];
+}
+
+
+export type PostJobStatus = {
+ title: string
+};
+
+
+export const managePosts = createApi({
+    reducerPath: "managePosts",
+    baseQuery: baseQueryWithReauth, // Use enhanced baseQuery with error handling
+    endpoints: (builder) => ({
+        // createJobStatusPost: builder.mutation<PostJobStatus, Partial<PostJobStatus>>({
+        //     query: (data) => ({
+        //         url: "/job-status-store",
+        //         method: "POST",
+        //         body: data,
+        //     }),
+        // }),
+        // 🔹 GET: Fetch all posts
+        getManagePosts: builder.query<ApiResponse, number>({
+            query: (page = 1) => `/manage-post-list?page=${page}`,
+        }),
+
+        postStatusToggle: builder.mutation({
+            query: ({ id, is_active }) => ({
+                url: `/manage-post-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 {
+    useGetManagePostsQuery,
+    usePostStatusToggleMutation,
+    // useDeleteFaqPostMutation
+} = managePosts;
--- a/src/Redux/Service/manage.posts.service.ts
+++ b/src/Redux/Service/manage.posts.service.ts
@@ -1,26 +0,0 @@
-import { createApi } from "@reduxjs/toolkit/query";
-import { baseQueryWithReauth } from "./apiSlice";
-
-export const managePosts = createApi({
-    reducerPath: "managePosts",
-    baseQuery: baseQueryWithReauth, // Use enhanced baseQuery with error handling
-    endpoints: (builder) => ({
-  
-  
-  
-      getPosts: builder.query<Post[], void>({ query: () => "/posts" }),
-  
-  
-  
-  
-  
-    }),
-  });
-  
-  export const {  } = managePosts;
-  
-  export type Post = {
-    id: number;
-    title: string;
-    body: string;
-  };
--- a/src/Redux/Service/manage.subadmin.service.ts
+++ b/src/Redux/Service/manage.subadmin.service.ts
@@ -1,26 +1,205 @@
-import { createApi } from "@reduxjs/toolkit/query";
+import { createApi } from "@reduxjs/toolkit/query/react";
 import { baseQueryWithReauth } from "./apiSlice";

-export const manageSubAdmin = createApi({
-    reducerPath: "manageSubAdmin",
-    baseQuery: baseQueryWithReauth, // Use enhanced baseQuery with error handling
-    endpoints: (builder) => ({
-  
-  
-  
-      getPosts: builder.query<Post[], void>({ query: () => "/posts" }),
-  
-  
-  
-  
-  
-    }),
-  });
-  
-  export const {  } = manageSubAdmin;
-  
-  export type Post = {
+interface PaginationLink {
+  url: string | null;
+  label: string;
+  active: boolean;
+}
+
+interface UserData {
+  id: number;
+  unique_id: string;
+  user_name: string;
+  first_name: string;
+  last_name: string;
+  date_of_birth: string;
+  gender: string;
+}
+
+interface PaginatedData {
+  current_page: number;
+  data: UserData[];
+  first_page_url: string;
+  from: number;
+  last_page: number;
+  last_page_url: string;
+  links: PaginationLink[];
+  next_page_url: string | null;
+  path: string;
+  per_page: number;
+  prev_page_url: string | null;
+  to: number;
+  total: number;
+}
+
+interface ApiResponse {
+  status: string;
+  status_code: number;
+  message: string;
+  data: PaginatedData;
+}
+
+export type Permission = {
+  id: number;
+  app_resource_title: string;
+  is_active: boolean;
+  created_by: string | null;
+  modified_by: string | null;
+  deleted_at: string | null;
+  created_at: string;
+  updated_at: string;
+};
+
+export type PermissionResponse = {
+  status: string;
+  status_code: number;
+  message: string;
+  data: {
+    permission: Permission[];
+  };
+};
+// export type SubAdminPost = {
+//   id: number;
+//   first_name: string,
+//   last_name: string,
+//   unique_id: string,
+//   date_of_birth: string,
+//   gender: string,
+// }
+
+interface ResourceActionLink {
+  id: number;
+  principal_xid: number;
+  role_xid: number;
+  app_resource_xid: number;
+  is_active: boolean;
+  created_by: number | null;
+  modified_by: number | null;
+  deleted_at: string | null;
+  created_at: string;
+  updated_at: string;
+  app_resource: {
    id: number;
-    title: string;
-    body: string;
-  };
+    app_resource_title: string
+  }
+}
+
+interface SubAdmin {
+  id: number;
+  first_name: string;
+  last_name: string;
+  unique_id: string;
+  date_of_birth: string;
+  gender: string;
+  get_resource_action_link: ResourceActionLink[];
+}
+
+interface SubAdminView {
+  status: string;
+  status_code: number;
+  message: string;
+  data: SubAdmin[];
+}
+
+interface CreateSubAdminPayload {
+  // user_name: string;
+  first_name: string;
+  last_name: string;
+  date_of_birth: string;
+  gender: string;
+  email_address: string;
+  phone_number: string;
+  // created_by: number;
+}
+
+interface CreateSubAdminResponse {
+  status: string;
+  status_code: number;
+  message: string;
+  data: UserData;
+}
+
+export const manageSubAdmin = createApi({
+  reducerPath: "manageSubAdmin",
+  baseQuery: baseQueryWithReauth, // Use enhanced baseQuery with error handling
+  tagTypes: ["SubAdmin"],
+  endpoints: (builder) => ({
+
+    createFaqPost: builder.mutation<Post, Partial<Post>>({
+      query: (data) => ({
+        url: "/faq-store",
+        method: "POST",
+        body: data,
+      }),
+    }),
+
+    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>({
+      query: () => `/resources`,
+    }),
+
+    viewSubAdmin: builder.query<SubAdminView, number>({
+      query: (id) => `/sub-admin-view/${id}`,
+    }),
+
+    updateSubAdmin: builder.mutation({
+      query: (updatedData) => ({
+        url: "/sub-admin-update",
+        method: "POST",
+        body: updatedData,
+      }),
+    }),
+
+    createSubAdminPost: builder.mutation<
+      CreateSubAdminResponse,
+      CreateSubAdminPayload
+    >({
+      query: (data) => ({
+        url: "/sub-admin-create",
+        method: "POST",
+        body: data,
+      }),
+      invalidatesTags: ["SubAdmin"], // Add this to invalidate cache
+    }),
+
+    faqToggle: builder.mutation({
+      query: ({ id, is_active }) => ({
+        url: `/faq-status`,
+        method: "POST",
+        body: { id, is_active },
+      }),
+    }),
+
+    deleteSubAdminPost: builder.mutation<{ success: boolean }, number>({
+      query: (id) => ({
+        url: `/sub-admin-delete`,
+        method: "POST",
+        body: { id },
+      }),
+    }),
+  }),
+});
+
+export const {
+  useGetSubAdminQuery,
+  useGetPermissionQuery,
+  useLazyViewSubAdminQuery,
+  useUpdateSubAdminMutation,
+  useDeleteSubAdminPostMutation,
+  useCreateSubAdminPostMutation,
+} = manageSubAdmin;
+
+export type Post = {
+  id: number;
+  title: string;
+  body: string;
+};
--- a/src/Redux/Service/manage.user.ts
+++ b/src/Redux/Service/manage.user.ts
@@ -0,0 +1,125 @@
+import { createApi } from "@reduxjs/toolkit/query/react";
+import { baseQueryWithReauth } from "./apiSlice";
+
+export interface UserData {
+    id: number;
+    principal_type_xid: number
+    first_name: string;
+    last_name: string;
+    phone_number: string;
+    gender: string;
+    date_of_birth: string;
+    is_active: boolean;
+    principal_type: {
+        id: number;
+        principal_type_title: string;
+    },
+    principle_language_linkss: {
+        id: number;
+        language_xid: number;
+        iam_principal_xid: number;
+        language: {
+            id: number,
+            language_name: 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: UserData[];
+    };
+}
+
+export interface CountryEdit {
+    status: string;
+    status_code: number;
+    message: string;
+    data: UserData[];
+}
+
+
+export type PostCountry = {
+    en_name: string;
+    country_code: string;
+    phonecode: string;
+    capital: string;
+    currency: string;
+    currency_name: string;
+    currency_symbol: string;
+};
+
+
+export const registerUser = createApi({
+    reducerPath: "registerUser",
+    baseQuery: baseQueryWithReauth, // Use enhanced baseQuery with error handling
+    endpoints: (builder) => ({
+        createUser: builder.mutation<PostCountry, Partial<PostCountry>>({
+            query: (data) => ({
+                url: "/manage-user-store",
+                method: "POST",
+                body: data,
+            }),
+        }),
+        // 🔹 GET: Fetch all posts
+        getManageUser: builder.query<ApiResponse, number>({
+            query: (page = 1) => `/manage-user-list?page=${page}`,
+        }),
+
+        getDeactivateUser: builder.query<ApiResponse, number>({
+            query: (page = 1) => `/manage-user-deactivate-list?page=${page}`,
+        }),
+
+        updateUser: builder.mutation({
+            query: (updatedData) => ({
+                url: "/manage-user-update",
+                method: "POST",
+                body: updatedData,
+            }),
+        }),
+
+        userToggle: builder.mutation({
+            query: ({ id, is_active }) => ({
+                url: `/manage-user-status`,
+                method: "POST",
+                body: { id, is_active },
+            }),
+        }),
+
+        userDeactivateToggle: builder.mutation({
+            query: ({ id, is_active }) => ({
+                url: `/manage-user-deactivate-status`,
+                method: "POST",
+                body: { id, is_active },
+            }),
+        }),
+
+        deleteUser: builder.mutation({
+            query: ({ id }) => ({
+                url: `/manage-user-delete`,
+                method: "POST",
+                body: { id },
+            }),
+        }),
+
+    }),
+});
+
+export const {
+    useGetManageUserQuery,
+    useCreateUserMutation,
+    useUpdateUserMutation,
+    useUserToggleMutation,
+    useGetDeactivateUserQuery,
+    useUserDeactivateToggleMutation,
+    useDeleteUserMutation
+} = registerUser;
--- a/src/Redux/Service/master.module.service.ts
+++ b/src/Redux/Service/master.module.service.ts
@@ -1,26 +0,0 @@
-import { createApi } from "@reduxjs/toolkit/query";
-import { baseQueryWithReauth } from "./apiSlice";
-
-export const masterModule = createApi({
-    reducerPath: "masterModule",
-    baseQuery: baseQueryWithReauth, // Use enhanced baseQuery with error handling
-    endpoints: (builder) => ({
-  
-  
-  
-      getPosts: builder.query<Post[], void>({ query: () => "/posts" }),
-  
-  
-  
-  
-  
-    }),
-  });
-  
-  export const {  } = masterModule;
-  
-  export type Post = {
-    id: number;
-    title: string;
-    body: string;
-  };
--- a/src/Redux/Service/myprofie.service.ts
+++ b/src/Redux/Service/myprofie.service.ts
@@ -1,26 +1,37 @@
-import { createApi } from "@reduxjs/toolkit/query";
+import { createApi } from "@reduxjs/toolkit/query/react";
 import { baseQueryWithReauth } from "./apiSlice";

 export const myProfile = createApi({
-    reducerPath: "myProfile",
-    baseQuery: baseQueryWithReauth, // Use enhanced baseQuery with error handling
-    endpoints: (builder) => ({
-  
-  
-  
-      getPosts: builder.query<Post[], void>({ query: () => "/posts" }),
-  
-  
-  
-  
-  
-    }),
-  });
-  
-  export const {  } = myProfile;
-  
-  export type Post = {
-    id: number;
-    title: string;
-    body: string;
-  };
+  reducerPath: "myProfile",
+  baseQuery: baseQueryWithReauth, // Use enhanced baseQuery with error handling
+  endpoints: (builder) => ({
+
+
+
+    // getPosts: builder.query<Post[], void>({ query: () => "/profile-image-edit" }),
+
+updateImage: builder.mutation({
+  query: (formData: FormData) => {
+    const token = localStorage.getItem("token");
+
+    return {
+      url: "/profile-image-edit",
+      method: "POST",
+      body: formData,
+      headers: {
+        "access-token": `${token}`,
+      },
+    };
+  },
+}),
+
+
+
+
+
+  }),
+});
+
+export const {
+  useUpdateImageMutation,
+} = myProfile;
--- a/src/Redux/Service/privacy.policy.service.ts
+++ b/src/Redux/Service/privacy.policy.service.ts
@@ -1,26 +1,24 @@
-import { createApi } from "@reduxjs/toolkit/query";
-import { baseQueryWithReauth } from "./apiSlice";
+import { createApi } from "@reduxjs/toolkit/query/react";
+import { baseQueryWithReauth } from "./apiSlice"; // Ensure this is correctly configured
+import { PrivacyPolicyResponse } from "../../Types/privacyPolicyTypes";

 export const privacyPolicy = createApi({
-    reducerPath: "privacyPolicy",
-    baseQuery: baseQueryWithReauth, // Use enhanced baseQuery with error handling
-    endpoints: (builder) => ({
-  
-  
-  
-      getPosts: builder.query<Post[], void>({ query: () => "/posts" }),
-  
-  
-  
-  
-  
+  reducerPath: "privacyPolicy",
+  baseQuery: baseQueryWithReauth, // Ensure this returns a valid `BaseQueryFn`
+  endpoints: (builder) => ({
+    getPrivacyPolicy: builder.query<PrivacyPolicyResponse, void>({ // Fix types here
+      query: () => "/privacy-policy",
    }),
-  });
-  
-  export const {  } = privacyPolicy;
-  
-  export type Post = {
-    id: number;
-    title: string;
-    body: string;
-  };
+
+    updatePrivacyPolicy: builder.mutation({
+      query: (updatedData) => ({
+        url: "/privacy-policy/update", // ✅ Updated URL
+        method: "POST",
+        body: updatedData,
+      }),
+    }),
+  }),
+});
+
+// Export hook
+export const { useGetPrivacyPolicyQuery, useUpdatePrivacyPolicyMutation } = privacyPolicy;
--- a/src/Redux/Service/profile.password.ts
+++ b/src/Redux/Service/profile.password.ts
@@ -0,0 +1,69 @@
+import { createApi } from "@reduxjs/toolkit/query/react";
+import { baseQueryWithReauth } from "./apiSlice";
+
+interface profileGet {
+    data: {
+        id: number,
+        first_name: string,
+        last_name: string,
+        phone_number: string,
+        profile_photo: string,
+    }
+}
+
+
+export type ProfilePass = {
+    password: string;
+};
+
+
+export const profile = createApi({
+    reducerPath: "profile",
+    baseQuery: baseQueryWithReauth, // Use enhanced baseQuery with error handling
+    endpoints: (builder) => ({
+        profilePassword: builder.mutation<ProfilePass, Partial<ProfilePass>>({
+            query: (data) => ({
+                url: "/profile-password",
+                method: "POST",
+                body: data,
+            }),
+        }),
+        // 🔹 GET: Fetch all posts
+        getProfile: builder.query<profileGet, void>({
+            query: () => "/profile-view",
+        }),
+
+        verifyOTP: builder.mutation({
+            query: (updatedData) => ({
+                url: "/profile-otp",
+                method: "POST",
+                body: updatedData,
+            }),
+        }),
+
+        newPasswordSet: builder.mutation({
+            query: (updatedData) => ({
+                url: "/profile-change-password",
+                method: "POST",
+                body: updatedData,
+            }),
+        }),
+
+        resendOtp: builder.mutation({
+            query: ({ data }) => ({
+                url: `/profile-resend-otp`,
+                method: "POST",
+                body: data,
+            }),
+        }),
+
+    }),
+});
+
+export const {
+    useGetProfileQuery,
+    useProfilePasswordMutation,
+    useVerifyOTPMutation,
+    useNewPasswordSetMutation,
+    useResendOtpMutation
+} = profile;
--- a/src/Redux/Service/register.user.service.ts
+++ b/src/Redux/Service/register.user.service.ts
@@ -1,26 +0,0 @@
-import { createApi } from "@reduxjs/toolkit/query";
-import { baseQueryWithReauth } from "./apiSlice";
-
-export const registerUser = createApi({
-    reducerPath: "registerUser",
-    baseQuery: baseQueryWithReauth, // Use enhanced baseQuery with error handling
-    endpoints: (builder) => ({
-  
-  
-  
-      getPosts: builder.query<Post[], void>({ query: () => "/posts" }),
-  
-  
-  
-  
-  
-    }),
-  });
-  
-  export const {  } = registerUser;
-  
-  export type Post = {
-    id: number;
-    title: string;
-    body: string;
-  };
--- a/src/Redux/Service/template.master.service.ts
+++ b/src/Redux/Service/template.master.service.ts
@@ -0,0 +1,111 @@
+import { createApi } from "@reduxjs/toolkit/query/react";
+import { baseQueryWithReauth } from "./apiSlice";
+
+interface TemplateResponse {
+  status: string;
+  status_code: number;
+  message: string;
+  data: PaginationData;
+}
+
+interface PaginationData {
+  current_page: number;
+  data: Template[];
+  first_page_url: string;
+  from: number;
+  last_page: number;
+  last_page_url: string;
+  links: PaginationLink[];
+  next_page_url: string | null;
+  path: string;
+  per_page: number;
+  prev_page_url: string | null;
+  to: number;
+  total: number;
+}
+
+export interface Template {
+  id: number;
+  is_active: boolean;
+  principle_type_xid: number;
+  post_template_translate: PostTemplateTranslate[];
+  post_template_image: PostTemplateImage[];
+}
+
+export interface PostTemplateTranslate {
+  id: number;
+  title: string;
+  sub_title: string;
+  post_template_xid: number;
+}
+
+interface PostTemplateImage {
+  id: number;
+  post_template_xid: number;
+  image_name: string;
+}
+
+interface PaginationLink {
+  url: string | null;
+  label: string;
+  active: boolean;
+}
+
+export interface Post {
+  id: number,
+  principle_type_xid: number,
+  title: string,
+  sub_title: string,
+  image_name: string[]
+}
+
+export const templateMaster = createApi({
+  reducerPath: "templateMaster",
+  baseQuery: baseQueryWithReauth, // Use enhanced baseQuery with error handling
+  endpoints: (builder) => ({
+    createTemplatePost: builder.mutation<Post, FormData>({
+      query: (data) => ({
+        url: "/template-store",
+        method: "POST",
+        body: data,
+        headers: {
+          Authorization: `Bearer ${localStorage.getItem("token")}`,
+        },
+      }),
+    }),
+    // 🔹 GET: Fetch all posts
+    getTemplateMaster: builder.query<TemplateResponse, number>({
+      query: (page = 1) => `/template-master?page=${page}`,
+    }),
+
+    updateTemplateMaster: builder.mutation<Post, FormData>({
+      query: (updatedData) => {
+        const token = localStorage.getItem("token");
+        return {
+          url: "/template-update",
+          method: "POST",
+          body: updatedData,
+          headers: {
+            'access-token': `${token}`,
+          },
+        };
+      },
+    }),
+
+    templateMasterToggle: builder.mutation({
+      query: ({ id, is_active }) => ({
+        url: `/template-status`,
+        method: "POST",
+        body: { id, is_active },
+      }),
+    }),
+
+  }),
+});
+
+export const {
+  useGetTemplateMasterQuery,
+  useCreateTemplatePostMutation,
+  useUpdateTemplateMasterMutation,
+  useTemplateMasterToggleMutation,
+} = templateMaster;
--- a/src/Redux/Service/terms.and.condition.service.ts
+++ b/src/Redux/Service/terms.and.condition.service.ts
@@ -1,26 +1,40 @@
-import { createApi } from "@reduxjs/toolkit/query";
+import { createApi } from "@reduxjs/toolkit/query/react";
 import { baseQueryWithReauth } from "./apiSlice";

+
+export interface Terms {
+  id: number,
+  language_master_xid: number,
+  content: string,
+  is_active: boolean,
+  terms_cond_language: {
+    id: number,
+    language_name: string,
+    language_code: string,
+  }
+}
+
 export const termsAndCondition = createApi({
-    reducerPath: "api",
-    baseQuery: baseQueryWithReauth, // Use enhanced baseQuery with error handling
-    endpoints: (builder) => ({
-  
-  
-  
-      getPosts: builder.query<Post[], void>({ query: () => "/posts" }),
-  
-  
-  
-  
-  
+  reducerPath: "termsAndCondition",
+  baseQuery: baseQueryWithReauth, // Use enhanced baseQuery with error handling
+  endpoints: (builder) => ({
+    getTerms: builder.query<{ data: Terms[] }, void>({ query: () => "/term-and-condition" }),
+
+    updateTerms: builder.mutation({
+      query: (updatedData) => ({
+        url: "/term-and-condition/update", // ✅ Updated URL
+        method: "POST",
+        body: updatedData,
+      }),
    }),
-  });
-  
-  export const {  } = termsAndCondition;
-  
-  export type Post = {
-    id: number;
-    title: string;
-    body: string;
-  };
+
+
+
+
+  }),
+});
+
+export const {
+  useGetTermsQuery,
+  useUpdateTermsMutation,
+} = termsAndCondition;
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
rockyeverlast	da9fc08a24	fix: stop tracking .env file	2025-10-01 19:23:26 +05:30
rockyeverlast	e2c17a3d4a	updated env testing	2025-09-19 18:21:20 +05:30
rockyeverlast	0ecc030f20	env updated	2025-09-19 18:18:06 +05:30
rockyeverlast	5b37c9da1e	Profile Image editiing api	2025-09-19 18:12:42 +05:30
rockyeverlast	9bfbf5ddb8	dob disabled for recruiter xid2	2025-09-17 14:04:21 +05:30
rockyeverlast	2e8f8d5a77	Fixed language update for user	2025-09-17 14:01:16 +05:30
rockyeverlast	248980d24b	Added default language in user edit	2025-09-17 12:23:55 +05:30
rockyeverlast	8966295260	Bugs fixes and updates	2025-09-15 20:47:26 +05:30
rockyeverlast	df62dcda64	Cell title changed to EMP ID	2025-09-12 21:11:15 +05:30
rockyeverlast	44f34490a0	Added Agency status and fixed ResourceTitle for Manage User	2025-09-12 21:09:00 +05:30
rockyeverlast	8efb309fa9	Merge branch 'dev-rohit' of http://git.wdipl.com/Siddhesh.More/SSA-Admin-Panel into testing	2025-09-12 18:15:04 +05:30
rockyeverlast	171a92a3dc	Toast updated successfully	2025-09-12 18:14:26 +05:30
rockyeverlast	ec021ee33c	Merge branch 'dev-rohit' of http://git.wdipl.com/Siddhesh.More/SSA-Admin-Panel into testing	2025-09-12 17:59:15 +05:30
rockyeverlast	3aa9ebf619	Last name added to user table	2025-09-12 17:50:43 +05:30
rockyeverlast	8f19a41c57	Admin / Subadmin nav access and bugs fixing	2025-09-12 17:49:14 +05:30
rockyeverlast	638a68ff03	Merge branch 'dev-rohit' of http://git.wdipl.com/Siddhesh.More/SSA-Admin-Panel into testing	2025-09-11 20:21:13 +05:30
rockyeverlast	e5361a5d77	Bug fixes and updates	2025-09-11 20:16:37 +05:30
rockyeverlast	71c23a2125	Merge branch 'dev-rohit' of http://git.wdipl.com/Siddhesh.More/SSA-Admin-Panel into testing	2025-09-10 20:44:01 +05:30
rockyeverlast	abaae9603e	env added to git ignore	2025-09-10 20:43:42 +05:30
rockyeverlast	7a3e76aa35	env added to git ignore	2025-09-10 20:42:58 +05:30
rockyeverlast	eaf8e77b79	env file updated	2025-09-10 20:42:08 +05:30
rockyeverlast	2488ab98c0	Merge branch 'dev-rohit' of http://git.wdipl.com/Siddhesh.More/SSA-Admin-Panel into dev-rohit	2025-09-10 20:37:36 +05:30
rockyeverlast	6648cd3bf3	fixed newCustomerCount / Recruiter count in dash	2025-09-10 20:36:15 +05:30
Rohit Chamedath	d1cc504397	Updated env with beta dev url	2025-09-10 14:53:43 +00:00
rockyeverlast	1e7b7347e4	Dashboard API integration	2025-09-10 20:18:07 +05:30
rockyeverlast	32ccea4917	commented out disable feature on toggle in agency master	2025-09-09 17:52:55 +05:30
rockyeverlast	1fafdfe54d	Edit agency master updated	2025-09-09 17:44:39 +05:30
rockyeverlast	20a92a60ab	optional chaining done for language in register user	2025-09-09 17:37:45 +05:30
rockyeverlast	284b5f3099	Bug fixes and updates	2025-09-09 17:30:26 +05:30
rockyeverlast	901dfb93a6	Updated subadmin add / ediit function	2025-09-05 16:56:41 +05:30
rockyeverlast	2805528ba3	Search implemented	2025-07-11 12:51:22 +05:30
rockyeverlast	a8a0e2ffef	fixed Country uodated	2025-07-10 18:53:44 +05:30
rockyeverlast	897572c1f1	Merge branch 'dev-rohit' of http://git.wdipl.com/Siddhesh.More/SSA-Admin-Panel into testing	2025-07-10 18:25:27 +05:30
rockyeverlast	03ab1dcd6f	Bugs fixes	2025-07-10 18:24:27 +05:30
rockyeverlast	9d8278900d	Merge branch 'dev-rohit' of http://git.wdipl.com/Siddhesh.More/SSA-Admin-Panel into testing	2025-07-09 16:56:39 +05:30
rockyeverlast	f65b5f9b2d	Bug fixes and API integration sub admin	2025-07-09 16:56:06 +05:30
rockyeverlast	ffda4cf04b	Merge branch 'dev-rohit' of http://git.wdipl.com/Siddhesh.More/SSA-Admin-Panel into testing	2025-07-03 16:14:55 +05:30
rockyeverlast	f2d101ef16	Bug fixes	2025-07-03 16:08:52 +05:30
rockyeverlast	b91c97c6c2	Edit and view user API integrated	2025-06-23 18:57:56 +05:30
rockyeverlast	2a0517d8dc	Remove .env from repo	2025-06-20 12:07:48 +05:30
rockyeverlast	0c6238c843	Merge branch 'yasin' of http://git.wdipl.com/Siddhesh.More/SSA-Admin-Panel into dev-rohit	2025-06-19 13:10:29 +05:30
YasinShaikh123	0531684c73	[ update changes ]	2025-06-18 15:34:32 +05:30
rockyeverlast	49e8e5531f	updated env file	2025-06-09 11:47:33 +05:30
rockyeverlast	15c9cc1d94	updated env file	2025-06-09 11:36:15 +05:30
rockyeverlast	cb7bdcdeb3	updated env file	2025-06-09 11:28:32 +05:30
rockyeverlast	8106d505a0	changes to env testing files	2025-06-09 11:23:27 +05:30
YasinShaikh123	021eb6e4db	[ update ]	2025-06-06 20:10:40 +05:30
YasinShaikh123	98f0e9dd29	update fav icon	2025-06-05 16:15:45 +05:30
YasinShaikh123	e8f28df886	[ update bugs ]	2025-06-05 15:18:16 +05:30
YasinShaikh123	1fc5756af0	Merge branch 'dev-rohit' of http://git.wdipl.com/Siddhesh.More/SSA-Admin-Panel into yasin	2025-06-03 13:41:24 +05:30
rockyeverlast	4a1a958475	API integration for register user list	2025-05-31 23:53:54 +05:30
rockyeverlast	f1772a7e07	Uploads img url updated	2025-05-05 18:13:33 +05:30
rockyeverlast	57509b2de8	Merge branch 'dev-rohit' of http://git.wdipl.com/Siddhesh.More/SSA-Admin-Panel into testing	2025-05-05 18:07:56 +05:30
rockyeverlast	e6e8f59afa	APi call from Manage post completed	2025-05-05 18:04:31 +05:30
rockyeverlast	29f30f9f98	Api integrated for WorkSpace and JobStatus	2025-04-15 20:43:48 +05:30
rockyeverlast	963b85b15f	Api integration for Department master completed	2025-04-14 19:34:59 +05:30
rockyeverlast	58e49c0f87	Merge branch 'dev-rohit' of http://git.wdipl.com/Siddhesh.More/SSA-Admin-Panel into testing	2025-04-10 20:14:11 +05:30
rockyeverlast	a1781ade46	Fixed pagination and Master module country updated	2025-04-10 20:13:14 +05:30
rockyeverlast	6856b4b610	Fixed env for testing	2025-04-09 16:47:24 +05:30
YasinShaikh123	7c3b0a52c5	Merge branch 'dev-rohit' of http://git.wdipl.com/Siddhesh.More/SSA-Admin-Panel into yasin	2025-04-09 16:34:27 +05:30
rockyeverlast	3a847d874c	Merge branch 'dev-rohit' of http://git.wdipl.com/Siddhesh.More/SSA-Admin-Panel into testing	2025-04-09 16:24:53 +05:30
rockyeverlast	8acc9430b3	Profiule API integrated	2025-04-09 16:23:36 +05:30
rockyeverlast	c9bbae35f9	Bugs fixes for Manage CMS module	2025-04-07 12:16:59 +05:30
YasinShaikh123	0997b16add	Merge branch 'dev-rohit' of http://git.wdipl.com/Siddhesh.More/SSA-Admin-Panel into yasin	2025-04-03 15:11:20 +05:30
YasinShaikh123	8b69f2df6a	[ env files ]	2025-04-03 15:11:17 +05:30
rockyeverlast	7e8c9c92d0	Faq data fetch fixed	2025-04-03 15:10:28 +05:30
rockyeverlast	f08fdc682b	basic auth encoded in base64	2025-04-03 14:58:15 +05:30
rockyeverlast	ab029438fb	updated testing .env file	2025-04-03 14:45:48 +05:30
rockyeverlast	ae9df75508	updated EditSubAdmin	2025-03-19 17:59:02 +05:30
rockyeverlast	0192d4be37	update API url in env	2025-03-19 17:50:35 +05:30
rockyeverlast	628ab225ff	updated env for Testing	2025-03-19 17:46:16 +05:30
rockyeverlast	3549035672	Initial commit to testing	2025-03-19 17:39:29 +05:30
rockyeverlast	982513c86e	Fixed delete modal / PassWord hide show	2025-03-19 12:30:45 +05:30
rockyeverlast	9180076edb	updated routes for ForgotPassword	2025-03-18 20:33:16 +05:30
rockyeverlast	2d15461f86	Working on subadmin update and add post	2025-03-17 20:31:52 +05:30
rockyeverlast	940c2a11d0	Added env.testing / Completed Agency master	2025-03-12 20:05:33 +05:30
rockyeverlast	9fb5e230b7	Added search input functionality in FAQ	2025-03-10 20:36:58 +05:30
rockyeverlast	44a6f60868	Faq / JobType / IndustryMaster/TemplateMaster/Pagination data enabled	2025-03-07 20:13:25 +05:30
rockyeverlast	c0b0a5f431	Updated JobType	2025-03-06 14:55:09 +05:30
rockyeverlast	22e5421d95	Fixed Template modal IMage upload	2025-03-06 14:52:14 +05:30
rockyeverlast	ff651461a1	Fixed Template modal button	2025-03-06 13:50:35 +05:30
rockyeverlast	346af173b2	API implementation for CMS and Master module	2025-03-06 13:16:38 +05:30
rockyeverlast	a673ea69d4	Merge branch 'parth' of http://git.wdipl.com/Siddhesh.More/SSA-Admin-Panel into dev-rohit	2025-02-25 14:02:21 +05:30
parth.ramani	9b97228ec8	worked on the about	2025-02-25 13:58:13 +05:30
parth.ramani	2cb6173b81	worked on the aboutus component edit functionlity	2025-02-14 15:00:43 +05:30
Siddhesh.More	dc1aa2250f	Merge branch 'yasin' of http://git.wdipl.com/Siddhesh.More/SSA-Admin-Panel	2025-02-12 20:05:52 +05:30
Siddhesh.More	a554803603	update	2025-02-12 20:04:40 +05:30
YasinShaikh123	0f11dd0019	[ update action ]	2025-02-12 20:03:47 +05:30
Siddhesh.More	83a180354d	update	2025-02-12 20:03:19 +05:30
Siddhesh.More	bf938178a4	update	2025-02-12 19:48:05 +05:30
Siddhesh.More	421926a6ff	update	2025-02-12 19:47:44 +05:30
parth.ramani	097d8bad99	worked on the module of the aboutus and services	2025-02-12 19:00:47 +05:30
parth.ramani	e24d48b917	worked on aboutus	2025-02-12 16:38:28 +05:30
Siddhesh.More	cd586ddf1b	update	2025-02-12 16:27:49 +05:30
Siddhesh.More	001d346426	update	2025-02-12 15:35:38 +05:30
Siddhesh.More	2ad88f91d4	update	2025-02-12 13:51:41 +05:30
Siddhesh.More	b56710d363	Merge branch 'yasin' of http://git.wdipl.com/Siddhesh.More/SSA-Admin-Panel	2025-02-12 13:51:37 +05:30
Siddhesh.More	22d07519ff	update	2025-02-12 13:30:02 +05:30
YasinShaikh123	68fc0bfdf5	[ Update action iocn 😉 ]	2025-02-12 13:25:22 +05:30
parth.ramani	1b27fa32ce	worked on the aboutus	2025-02-12 13:19:36 +05:30
Siddhesh.More	9579771f98	update	2025-02-12 13:18:18 +05:30
YasinShaikh123	c7de34fda2	Merge branch 'main' of http://git.wdipl.com/Siddhesh.More/SSA-Admin-Panel into yasin	2025-02-12 12:51:28 +05:30
YasinShaikh123	599f320598	[ working Icon ]	2025-02-12 12:50:47 +05:30
parth.ramani	6f25a6a234	worked privacypolicy	2025-02-12 12:47:44 +05:30
Siddhesh.More	5db4c3a236	Merge branch 'parth' of http://git.wdipl.com/Siddhesh.More/SSA-Admin-Panel	2025-02-12 12:45:00 +05:30
parth.ramani	dc3c861471	worked on the aboutus	2025-02-12 12:35:49 +05:30
Siddhesh.More	066238b334	updsate	2025-02-12 12:34:31 +05:30
Siddhesh.More	0bd8cc6434	update types folder	2025-02-12 12:27:53 +05:30
parth.ramani	84a64c9ae6	worked on the aboutus	2025-02-12 12:04:00 +05:30
parth.ramani	c5c3ebfedd	worked on the aboutus	2025-02-12 12:02:54 +05:30
AnsariTufail	4ab8daaaf8	update	2025-02-12 12:01:08 +05:30
AnsariTufail	dbde49fffa	Worked on the manage cms	2025-02-12 11:58:17 +05:30
Siddhesh.More	688f674062	update	2025-02-12 11:54:21 +05:30
Siddhesh.More	b960b116dc	Merge branch 'yasin' of http://git.wdipl.com/Siddhesh.More/SSA-Admin-Panel	2025-02-11 20:14:39 +05:30
Siddhesh.More	795643eead	updaate	2025-02-11 20:14:29 +05:30
YasinShaikh123	59df59a9d6	Merge branch 'main' of http://git.wdipl.com/Siddhesh.More/SSA-Admin-Panel into yasin	2025-02-11 19:59:54 +05:30
Siddhesh.More	895516977a	update	2025-02-11 19:59:38 +05:30
AnsariTufail	38e5185d22	update	2025-02-11 17:23:11 +05:30
AnsariTufail	663cdfc297	update	2025-02-11 17:20:36 +05:30