worked on the aboutus

.env

@@ -0,0 +1,5 @@
+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

dev-dist/sw.js

@@ -82,7 +82,11 @@ define(['./workbox-54d0af47'], (function (workbox) { 'use strict';
     "revision": "3ca0b8505b4bec776b69afdba2768812"
   }, {
     "url": "index.html",
-    "revision": "0.jlpvaemfr1"
+<<<<<<< HEAD
+    "revision": "0.iv1sobg60j"
+=======
+    "revision": "0.3bv9k3911i8"
+>>>>>>> 688f6740627f6cdb421849d1fb012420be1d9d10
   }], {});
   workbox.cleanupOutdatedCaches();
   workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), {

package.json

@@ -13,18 +13,25 @@
     "@chakra-ui/react": "^3.2.3",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
+    "@reduxjs/toolkit": "^2.5.1",
+    "axios": "^1.7.9",
+    "chart.js": "^4.4.7",
     "framer-motion": "^11.18.0",
+    "js-cookie": "^3.0.5",
     "next-themes": "^0.4.4",
     "react": "^18.3.1",
+    "react-chartjs-2": "^5.3.0",
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.54.2",
     "react-icons": "^5.4.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",
     "@eslint/js": "^9.17.0",
+    "@types/js-cookie": "^3.0.6",
     "@types/react": "^18.3.18",
     "@types/react-dom": "^18.3.5",
     "@vitejs/plugin-react": "^4.3.4",

src/App.tsx

@@ -1,21 +1,47 @@
-import { useContext } from 'react';
-import { Route, BrowserRouter as Router, Routes } from "react-router-dom";
-import GlobalStateContext from './Contexts/GlobalStateContext';
-import DefaultLayout from './Layouts/DefaultLayout';
-import Login from './Pages/Login';
-import { RouteLink } from './Routes/Routes';
+import { useContext, useEffect } from "react";
+import { BrowserRouter as Router, Routes, Route, Navigate } from "react-router-dom";
+import GlobalStateContext from "./Contexts/GlobalStateContext";
+import DefaultLayout from "./Layouts/DefaultLayout";
+import Login from "./Pages/Login";
+import { RouteLink } from "./Routes/Routes";
 
-function App() { 
+function App() {   
   const context = useContext(GlobalStateContext); 
-  if (!context) throw new Error('App must be used within a GlobalStateProvider'); 
-  const { isAuthenticate } = context; 
+  if (!context) throw new Error("App must be used within a GlobalStateProvider"); 
+  
+  const { isAuthenticate, setIsAuthenticate } = context; 
+
+  useEffect(() => {
+    const token = localStorage.getItem("token");
+    setIsAuthenticate(!!token); // Converts token to boolean
+  }, [setIsAuthenticate]);
+
+  console.log("Auth Status:", isAuthenticate);
 
   return ( 
     <Router> 
       <Routes> 
-        <Route path="/login" element={<Login />} /> 
-        <Route path="/*" element={isAuthenticate === true ? (<DefaultLayout><Routes>{RouteLink.map(({ path, Component }, index) => (<Route key={index} path={path} element={<Component />} />))}</Routes></DefaultLayout>) : (<Login />)} /> 
-        <Route path="*" element={<Login />} /> 
+        {/* Redirect logged-in users away from login */}
+        <Route path="/login" element={isAuthenticate && localStorage.getItem("token") ? <Navigate to="/" /> : <Login />} /> 
+
+        {/* Protected Routes */}
+        <Route 
+          path="/*" 
+          element={isAuthenticate && localStorage.getItem("token")  ? (
+            <DefaultLayout>
+              <Routes>
+                {RouteLink.map(({ path, Component }, index) => (
+                  <Route key={index} path={path} element={<Component />} />
+                ))}
+              </Routes>
+            </DefaultLayout>
+          ) : (
+            <Navigate to="/login" />
+          )} 
+        /> 
+
+        {/* Catch-all route to prevent unauthorized access */}
+        <Route path="*" element={<Navigate to="/login" />} /> 
       </Routes> 
     </Router> 
   ); 

src/Contexts/GlobalStateProvider.tsx

@@ -1,10 +1,10 @@
-import  { ReactNode, useState } from 'react';
+import { ReactNode, useState } from 'react';
 import GlobalStateContext from './GlobalStateContext';
 
 
 
 
-const GlobalStateProvider = ({ children }:{children:ReactNode}) => {
+const GlobalStateProvider = ({ children }: { children: ReactNode }) => {
   const [isAuthenticate, setIsAuthenticate] = useState<boolean>(true);
 
   return (

src/Layouts/DefaultLayout.tsx

@@ -1,40 +1,79 @@
 import { HStack, Image, Text, VStack } from "@chakra-ui/react";
-import React, { FC } from "react";
+import React, { FC, useContext } from "react";
 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';
 import { AccordionItem, AccordionItemContent, AccordionItemTrigger, AccordionRoot } from "../components/ui/accordion";
 import { Avatar } from "../components/ui/avatar";
+import { LuLogOut } from "react-icons/lu";
+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";
 
 const DefaultLayout: FC<{ children: React.ReactNode }> = ({ children }) => {
+
+  const dispatch = useDispatch()
   const navigate = useNavigate()
   const location = useLocation()
 
 
+  const context = useContext(GlobalStateContext);
+  if (!context) {
+    throw new Error('App must be used within a GlobalStateProvider');
+  }
+  const { setIsAuthenticate } = context;
+  const [ logOutAdmin ] = useLogOutMutation()
 
 
+  // Logout function
+  const handleLogout = async () => {
+    try {
+      // ✅ Call mutation and wait for the response
+      const res = await logOutAdmin().unwrap(); 
+      console.log("Logout Success:", res);
+  
+      // ✅ Clear local storage & update authentication state
+      dispatch(logout());
+      localStorage.removeItem("token"); 
+      setIsAuthenticate(false); 
+      // ✅ Redirect to login page
+      navigate("/login");
+    } catch (error) {
+      console.error("Logout Failed:", error);
+    }
+  };
+
   return (
-    <HStack position={'relative'} bg="#F2F2F2" backgroundPosition="center" backgroundRepeat="repeat" backgroundSize="cover" gap={0} w="100%" h="100vh" p={2}>
-    
-      <VStack  zIndex={1} gap={0} rounded={'lg'} h="100%" w="15%"  >
-        <HStack w={'100%'} p={3} h={'6.5%'} justifyContent={'center'}>
+    <VStack gap={0} w="100%" h="100vh" bg="#F2F2F2">
+    <ProgressBar isLoading={false}  />
+    <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>
-        <VStack w={'100%'} p={3}>
+        <VStack  w={'100%'} p={2} 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 bg={'#fff'} rounded={'lg'} collapsible>
-              <AccordionItem boxShadow={'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px'} borderBottom={'none'} p={0} key={index} value={title}>
-                <AccordionItemTrigger 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  ${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:'#000' }} ><Icon style={{ fontSize: '20px' }} /> <Text fontSize={'xs'} w={'100%'}>{title}</Text></AccordionItemContent>)}
+            <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={'6%'} w={'100%'} justifyContent={'flex-end'} pe={3} gap={6}>
-          <RiNotificationLine color="#013e3e" cursor={'pointer'} style={{ fontSize: '22px' }} />
+      <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'}>
@@ -46,6 +85,7 @@ const DefaultLayout: FC<{ children: React.ReactNode }> = ({ children }) => {
         {children}
       </VStack>
     </HStack>
+    </VStack>
   );
 };
 

src/Pages/CMS/CMS.tsx

@@ -1,6 +0,0 @@
-const CMS = () => {
-  return (
-    <div>CMS</div>
-  )
-}
-export default CMS

src/Pages/Dashboard/AgencyName.tsx

@@ -0,0 +1,103 @@
+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";
+
+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 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));
+  };
+
+  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
+
+
+  return (
+    <Box p={"10px"}>
+      <HStack justifyContent={"space-between"} mb={5}>
+        <Text fontSize={"xs"} fontWeight={500}>
+          Add Agency Name
+        </Text>
+        <Button
+          bg={"#fff"}
+          color={"#222222CC"}
+          px={3}
+          fontSize={"12px"}
+          h={"28px"}
+          onClick={addTodo}
+        >
+          <IoAddSharp /> Add
+        </Button>
+      </HStack>
+      <Input
+        type="text"
+        value={input}
+        onChange={(e) => setInput(e.target.value)}
+        placeholder="Add a task..."
+        backgroundColor={"#fff"}
+        size={"sm"}
+        w={"100%"}
+        p={2}
+        mb={4}
+      />
+      {todos.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'}>
+            <Box display={'flex'} alignItems={'center'} gap={2}>
+                <FaClockRotateLeft fontSize={'10px'} style={{fontSize:'13px',color:'#222222bd'}} /> 
+                <Text fontSize={"xs"} color={"#222222bd"}>{todo.timestamp}</Text>
+            </Box>
+            <Box
+              onClick={() => deleteTodo(todo.id)}
+              bg={"none"}
+              color={"#22222299"}
+              cursor={'pointer'}
+            >
+              <Image w={"16px"} src={delateIcon} />
+            </Box>
+          </Stack>
+        </HStack>
+      ))}
+    </Box>
+  );
+};
+
+export default AgencyName;

src/Pages/Dashboard/Dashboard.tsx

@@ -1,8 +1,195 @@
+import {
+  Box,
+  createListCollection,
+  Heading,
+  HStack,
+  Status,
+  Tabs,
+  Text,
+} from "@chakra-ui/react";
+import BarChart from "../../components/Charts/BarChart";
+import CircularApp from "../../components/Charts/CircularProgress";
+import SemiDoughnutChart from "../../components/Charts/SemiDoughnutChart";
+import MainFrame from "../../components/MainFrame";
+import {
+  AccordionItem,
+  AccordionItemContent,
+  AccordionItemTrigger,
+  AccordionRoot,
+} from "../../components/ui/accordion";
+import { Button } from "../../components/ui/button";
+import {
+  SelectContent,
+  SelectItem,
+  SelectRoot,
+  SelectTrigger,
+  SelectValueText
+} from "../../components/ui/select";
+import AgencyName from "./AgencyName";
+import { Spinner } from "../../components/Sipnner/Spinner";
 
 const Dashboard = () => {
-  return (
-    <div>Dashboard</div>
-  )
-}
+  const frameworks = createListCollection({
+    items: [
+      { label: "Today", value: "Today" },
+      { label: "Week", value: "Week" },
+      { label: "Month", value: "Month" },
+      { label: "Year", value: "Year" },
+    ],
+  });
 
-export default 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.",
+    },
+  ];
+
+  return (
+    <MainFrame>
+      <Box display={"flex"} p={"20px"} pt={'8px'} 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
+          </Heading>
+          <Tabs.Root
+            size={"sm"}
+            w={"80%"}
+            m={"auto"}
+            variant="enclosed"
+            fitted
+            defaultValue={"tab-1"}
+            mb={6}
+          >
+            <Tabs.List>
+              <Tabs.Trigger fontSize={"xs"} value="tab-1">
+                Past 24 hrs
+              </Tabs.Trigger>
+              <Tabs.Trigger fontSize={"xs"} value="tab-2">
+                Total Users
+              </Tabs.Trigger>
+              <Tabs.Trigger fontSize={"xs"} value="tab-3">
+                New Signups
+              </Tabs.Trigger>
+            </Tabs.List>
+          </Tabs.Root>
+          <Box>
+            <SemiDoughnutChart />
+          </Box>
+
+          <Box
+            w={"80%"}
+            m={"auto"}
+            display={"flex"}
+            justifyContent={"space-between"}
+            mt={8}
+          >
+            <Status.Root colorPalette="blue">
+              <Status.Indicator />
+              Recruiter <Text fontWeight={500}>2554</Text>
+            </Status.Root>
+            <Status.Root colorPalette="blue">
+              <Status.Indicator />
+              Customer <Text fontWeight={500}>1224</Text>
+            </Status.Root>
+          </Box>
+        </Box>
+        <Box
+          p={"20px"}
+          w={"50%"}
+          rounded={'lg'}
+          boxShadow={"rgba(99, 99, 99, 0.2) 0px 2px 8px 0px"}
+        >
+          <HStack alignItems={"center"} mb={4}>
+            <Text fontSize={"sm"}>Item approvals in</Text>
+            <SelectRoot collection={frameworks} size="xs" width="200px">
+              <SelectTrigger>
+                <SelectValueText p={2} placeholder="Select movie" />
+              </SelectTrigger>
+              <SelectContent p={2}>
+                {frameworks.items.map((movie) => (
+                  <SelectItem item={movie} key={movie.value}>
+                    {movie.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </SelectRoot>
+          </HStack>
+          <BarChart />
+        </Box>
+        <Box
+          w={"20%"}
+          boxShadow={"rgba(99, 99, 99, 0.2) 0px 2px 8px 0px"}
+          p={'10px'}
+          rounded={'lg'}
+        >
+          <Text fontSize={"sm"} fontWeight={500} pt={3}>Number Of Groups created</Text>
+          <CircularApp />
+        </Box>
+      </Box>
+      <Box p={"20px"} pt={0} display={"flex"} gap={5}>
+        <Box  w={"50%"} rounded={'lg'} bg={"#f2f2f2"} h={400} p={"10px"} overflow={'auto'}>
+          <HStack justifyContent={"space-between"} mb={5}>
+            <Text fontSize={"xs"} fontWeight={500}>Faqs</Text>
+            <Button
+              bg={"#fff"}
+              color={"#222222CC"}
+              px={3}
+              fontSize={"12px"}
+              h={"28px"}
+            >
+              View ALL
+            </Button>
+          </HStack>
+          <AccordionRoot collapsible defaultValue={["b"]}>
+            {accItems.map((item, index) => (
+              <AccordionItem
+                key={index}
+                value={item.value}
+                bg={"#fff"}
+                mb={2}
+                p={"12px"}
+                rounded={5}
+                borderBottom={0}
+              >
+                <AccordionItemTrigger fontSize={"sm"} >
+                  {item.title}
+                </AccordionItemTrigger>
+                <AccordionItemContent fontSize={"xs"} color={'#222222CC'} pt={2}>
+                  {item.text}
+                </AccordionItemContent>
+              </AccordionItem>
+            ))}
+          </AccordionRoot>
+        </Box>
+        <Box w={"50%"} rounded={'lg'} bg={"#f2f2f2"} h={400} overflow={'auto'}>
+          <AgencyName />
+        </Box>
+      </Box>
+     
+    </MainFrame>
+  );
+};
+
+export default Dashboard;

src/Pages/ForgetPassword.tsx

@@ -0,0 +1,65 @@
+import { Field, Input, Stack, Text } from "@chakra-ui/react";
+import { Button } from "../components/ui/button";
+import {
+  DialogBody,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogRoot,
+  DialogTitle,
+  DialogTrigger,
+} from "../components/ui/dialog";
+function ForgetPassword() {
+  return (
+    <DialogRoot placement="center">
+      <DialogTrigger asChild>
+        <Text w={"100%"} textAlign={"end"} mt={2} cursor={"pointer"}>
+          Forgot password?
+        </Text>
+      </DialogTrigger>
+
+      <DialogContent
+        bg={"#fff"}
+        w={{ base: "90%", md: "400px" }}
+        p={2}
+        bgSize={"md"}
+      >
+        <DialogHeader bg="white" pt={3} pb={2}>
+          <DialogTitle
+            alignSelf="center"
+            color="black"
+            fontSize="18px"
+            textAlign={"center"}
+          >
+            Forgot Password
+          </DialogTitle>
+        </DialogHeader>
+
+        <DialogBody bg="white" pt={5}>
+          <Stack p={2}>
+            <Field.Root>
+              <Field.Label color="black" pt={1} fontSize="12px">
+                Please Enter Email Address
+              </Field.Label>
+              <Input
+                color="black"
+                p={2}
+                fontSize="sm"
+                type="text"
+                border="1px solid grey"
+                size={"sm"}
+              />
+            </Field.Root>
+          </Stack>
+        </DialogBody>
+        <DialogFooter display="flex" justifyContent="center" mt={2} p={2}>
+          <Button w="100%" bg="#02A0A0" color={"#fff"}>
+            Reset Password
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </DialogRoot>
+  );
+}
+
+export default ForgetPassword;

src/Pages/Login.tsx

@@ -1,96 +1,195 @@
-import { Center, HStack, Image, Input, Text, VStack } from "@chakra-ui/react"
-import { useContext, useState } from "react"
-import { useForm } from "react-hook-form"
-import GlobalStateContext from "../Contexts/GlobalStateContext"
-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 {
+  Box,
+  Center,
+  HStack,
+  Image,
+  Input,
+  Text,
+  Theme,
+  VStack,
+} from "@chakra-ui/react";
+import axios from "axios";
+import { useContext, useState } from "react";
+import { useForm } from "react-hook-form";
+import { useDispatch } from "react-redux";
+import GlobalStateContext from "../Contexts/GlobalStateContext";
+import { setToken } from "../Redux/Service/authSlice";
+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 { PasswordInput } from "../components/ui/password-input";
+import { useNavigate } from "react-router-dom";
+import ForgetPassword from "./ForgetPassword";
 
 interface FormValues {
-  mobileNumber: number
+  mobileNumber: number;
+  password: string;
 }
 
 const Login = () => {
-
-  const [isLoading, setIsLoading] = useState<boolean>(false)
+  const navigate = useNavigate();
+  const dispatch = useDispatch();
+  const [isLoading, setIsLoading] = useState<boolean>(false);
   const context = useContext(GlobalStateContext);
   if (!context) {
-    throw new Error('App must be used within a GlobalStateProvider');
+    throw new Error("App must be used within a GlobalStateProvider");
   }
   const { setIsAuthenticate } = context;
   const {
     register,
     handleSubmit,
     formState: { errors },
-  } = useForm<FormValues>()
+  } = useForm<FormValues>();
 
+  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 onSubmit = handleSubmit((data) => {
-    setIsLoading(true)
-    if (data?.mobileNumber === 1234567890) {
-      setTimeout(() => {
+    try {
+      const res = await axios.post(
+        `${import.meta.env.VITE_API_URL}/login`,
+        {
+          mobile_number: Number(data.mobileNumber),
+          password: data.password,
+        },
+        {
+          headers: {
+            Authorization: `Basic ${basicAuth}`,
+            "Content-Type": "application/json",
+          },
+        }
+      );
+      console.log("============",res);
+      
+
+      if (res.data) {
         setIsAuthenticate(true);
-        setIsLoading(false)
-      }, 3000); // 3-second delay
-
-    } else {
-      toaster.create({
-        title: `Invalid Credentials`,
-        type: "error",
-      })
-      setIsLoading(false)
+        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) {
+      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
-      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} />
-
+    <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'}>
+      <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"}
+            >
+              LOGIN
+            </Text>
 
-
-
-
-        <Center as={'form'} onSubmit={onSubmit} p={{ base: 4, md: 16 }} w={{ base: '100%', md: '50%' }} h={'100%'}>
-          <VStack gap={2} w={'100%'} alignItems={'flex-start'}>
-            <Text w={'100%'} textAlign={'center'} fontSize={'24px'} fontWeight={'normal'} color={'#313039'}>LOGIN</Text>
-
-            <VStack mt={6} gap={4} w={'full'}>
-              <Field color={'#313039'} label={'Enter Mobile Number'} w={'100%'} invalid={!!errors.mobileNumber} errorText={errors.mobileNumber?.message} >
-                <Input ps={3} {...register("mobileNumber", { required: "Mobile Number address is required" })} placeholder="Mobile Number Address" />
-                {/* <Text as={'span'} w={'100%'} fontSize={'xs'} fontWeight={'normal'} color={'#686677'}>Forget 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}
+                  {...register("mobileNumber", {
+                    required: "Mobile Number address is required",
+                  })}
+                  placeholder="Mobile Number Address"
+                />
+                {/* <Text as={'span'} w={'100%'} fontSize={'xs'} fontWeight={'normal'} color={'#686677'}>Forget password</Text>  */}
               </Field>
-              <Button loading={isLoading} mt={4} size={'sm'} bg={'#02A0A0'} rounded={'md'} w={'100%'} color={'#ffffff'} type="submit">Send OTP</Button>
-
-              <Text>Forgot password</Text>
-            </VStack>
-
+              <Field
+                color={"#313039"}
+                label={"Enter password."}
+                w={"100%"}
+                invalid={!!errors.password}
+                errorText={errors.password?.message}
+                mb={2}
+              >
+                <PasswordInput
+                  ps={3}
+                  {...register("password", { required: "Pasword is required" })}
+                  placeholder="Enter password"
+                />
+                {/* <Text as={'span'} w={'100%'} fontSize={'xs'} fontWeight={'normal'} color={'#686677'}>Forget password</Text>  */}
+              </Field>
+              <Button
+                loading={isLoading}
+                mt={4}
+                size={"sm"}
+                bg={"#02A0A0"}
+                rounded={"md"}
+                w={"100%"}
+                color={"#ffffff"}
+                type="submit"
+              >
+                Login
+              </Button>
 
+              <ForgetPassword />
+            </Box>
           </VStack>
-        </Center>
+        </Box>
         <Toaster />
       </HStack>
     </VStack>
-  )
-}
+  );
+};
 
-export default Login
+export default Login;

src/Pages/ManageCMS/AboutUs/AboutUs.tsx

@@ -0,0 +1,74 @@
+import { Box, HStack, Skeleton, Text } from "@chakra-ui/react";
+import MainFrame from "../../../components/MainFrame"
+import AboutUsAddModel from "../../ManageCMS/AboutUs/AboutUsAddModel";
+import { useGetAboutUsQuery } from "../../../Redux/Service/manage.aboutus.service";
+
+
+
+const AboutUs = () => {
+
+  const { data, isLoading } = useGetAboutUsQuery();
+
+  const content = data?.data?.[0]?.content
+  console.log('====================================');
+  console.log(data);
+  console.log('====================================');
+
+
+  return (
+
+    <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>
+
+          <HStack>
+
+            <AboutUsAddModel />
+          </HStack>
+        </HStack>
+        {/* Show Skeleton until content is available */}
+        {isLoading || !content ? (
+          <Box px={3} w="85%">
+            <Skeleton height="20px" mb="10px" />
+            <Skeleton height="20px" mb="10px" />
+            <Skeleton height="20px" mb="10px" />
+            <Skeleton height="20px" mb="10px" width="75%" />
+            <Skeleton height="20px" mb="15px" width="90%" />
+            <Skeleton height="20px" mb="10px" />
+            <Skeleton height="20px" mb="10px" width="85%" />
+            <Skeleton height="20px" mb="10px" />
+            <Skeleton height="20px" width="70%" />
+          </Box>
+        ) : (
+          <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%"} 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>
+    </MainFrame>
+  )
+}
+export default AboutUs

src/Pages/ManageCMS/AboutUs/AboutUsAddModel.tsx

@@ -0,0 +1,189 @@
+// 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 { useUpdateAboutUsMutation } from "../../../Redux/Service/manage.aboutus.service"
+
+// function AboutUsAddModel() {
+
+//     const [ updateAboutUs ] = useUpdateAboutUsMutation()
+
+
+//     try {
+//         const res = updateAboutUs({id:2, updatedData:''})
+//         console.log(res);
+
+
+//     } catch (error) {
+
+//     }
+
+
+
+
+//     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
+//                     </Button>
+//                 </DialogFooter>
+
+//                 <DialogCloseTrigger color="black" />
+//             </DialogContent>
+//         </DialogRoot >
+
+//     )
+// }
+
+// export default AboutUsAddModel
+
+
+import React, { useState } from "react";
+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 { useUpdateAboutUsMutation } from "../../../Redux/Service/manage.aboutus.service";
+
+function AboutUsAddModel() {
+    const [content, setContent] = useState(""); // State for the textarea input
+    const [updateAboutUs, { isLoading }] = useUpdateAboutUsMutation(); // Mutation for updating About Us
+    //   const toast = useToast(); // Toast for feedback
+
+    // Handle form submission
+    const handleSubmit = async (e: any) => {
+        e.preventDefault(); // Prevent default form submission
+
+        try {
+            // Call the updateAboutUs mutation
+            const res = await updateAboutUs({ id: 2, updatedData: content }).unwrap();
+            console.log(res);
+
+            // Show success toast
+            //   toast({
+            //     title: "Success",
+            //     description: "About Us content updated successfully",
+            //     status: "success",
+            //     duration: 5000,
+            //     isClosable: true,
+            //   });
+
+            // Clear the input field after successful submission
+            setContent("");
+        } catch (error) {
+            // Show error toast
+            //   toast({
+            //     title: "Error",
+            //     description: "Failed to update About Us content",
+            //     status: "error",
+            //     duration: 5000,
+            //     isClosable: true,
+            //   });
+        }
+    };
+
+    return (
+        <DialogRoot placement="center">
+            <DialogTrigger asChild>
+                <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={{ base: "90%", md: "400px" }}
+                height="auto"
+                p={3}
+            >
+                <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="Enter About Us content"
+                                bgColor="#EEEEEE"
+                                color="black"
+                                border="none"
+                                pl={1}
+                                fontSize="12px"
+                                height="100px" // Increased height for better usability
+                                pt={1.5}
+                                value={content} // Bind the state to the textarea
+                                onChange={(e) => setContent(e.target.value)} // Update state on change
+                            />
+                        </Field.Root>
+                    </Stack>
+                </DialogBody>
+
+                <DialogFooter display="flex" justifyContent="center" pt="2">
+                    <Button
+                        w="100%"
+                        bg="#02A0A0"
+                        color="#fff"
+                        onClick={handleSubmit} // Trigger handleSubmit on button click
+                    // isLoading={isLoading} // Show loading state while the mutation is in progress
+                    >
+                        Save
+                    </Button>
+                </DialogFooter>
+
+                <DialogCloseTrigger color="black" />
+            </DialogContent>
+        </DialogRoot>
+    );
+}
+
+export default AboutUsAddModel;

src/Pages/ManageCMS/FAQ/EditDetails.tsx

@@ -0,0 +1,64 @@
+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 (
+
+        <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 >
+
+    )
+}
+
+export default EditDetails

src/Pages/ManageCMS/FAQ/FAQ.tsx

@@ -0,0 +1,97 @@
+import { Box, HStack, Image, Input, 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 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";
+
+
+// table data
+
+const tableHeadRow = [
+  "Sr. No",
+  "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 FAQ = () => {
+  return (
+
+    <MainFrame>
+      <Box>
+        <HStack
+          w={"100%"}
+          justifyContent={"space-between"}
+          mb={4}
+          py={0}
+          px={3}
+        >
+          <Text as={"span"} fontSize={"sm"} fontWeight={500} color={"#000"}>
+           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={"xs"}
+                fontSize={"2sm"}
+                placeholder="Search..."
+                bgColor={'#EEEEEE'}
+                ps={8}
+              />
+            </InputGroup>
+            {/* <Button bgColor={'#EEEEEE'} pl={3} pr={3}><IoMdAdd /> <Text>Add</Text></Button> */}
+            <FaqAddModel />
+          </HStack>
+        </HStack>
+        <DataTable
+          sortableColumns={["Name", "Registration Date "]}
+          tableHeadRow={tableHeadRow}
+          data={managepost}
+        />
+      </Box>       
+    </MainFrame>
+  )
+}
+export default FAQ

src/Pages/ManageCMS/FAQ/FaqAddModel.tsx

@@ -0,0 +1,57 @@
+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"
+
+function FaqAddModel() {
+    return (
+
+        <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>
+
+            </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">Add</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 >
+
+    )
+}
+
+export default FaqAddModel

src/Pages/ManageCMS/Privacy/Privacy.tsx

@@ -0,0 +1,12 @@
+import MainFrame from "../../../components/MainFrame"
+
+
+const Privacy = () => {
+    return (
+      
+      <MainFrame >
+         Privacy
+      </MainFrame>
+    )
+  }
+  export default Privacy

src/Pages/ManageCMS/PrivacyPolicy/PrivacyPolicy.tsx

@@ -0,0 +1,68 @@
+import { Box, HStack, Text, Skeleton } from "@chakra-ui/react";
+import MainFrame from "../../../components/MainFrame";
+import PrivacyPolicyAddModel from "./PrivacyPolicyAddModel";
+import { useGetPrivacyPolicyQuery } from "../../../Redux/Service/privacy.policy.service";
+
+
+const PrivacyPolicy = () => {
+  // Fetch data using RTK Query with type annotations
+  const { data, isLoading } = useGetPrivacyPolicyQuery();
+
+  console.log(isLoading);
+
+
+  // Log the response for debugging
+  console.log("====================================");
+  console.log(data);
+  console.log("====================================");
+
+  // Extract content array from the response
+  const content = data?.data?.[0]?.content;
+
+  return (
+    <MainFrame>
+      <Box>
+        <HStack
+          w={"100%"}
+          justifyContent={"space-between"}
+          mb={4}
+          py={0}
+          px={3}
+        >
+          <Text as={"span"} fontSize={"sm"} fontWeight={500} color={"#000"}>
+            Privacy Policy
+          </Text>
+
+          <HStack>
+            <PrivacyPolicyAddModel />
+          </HStack>
+        </HStack>
+
+        {/* Render multiple skeletons or content based on loading state */}
+        {isLoading || !content ? (
+          <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>
+        ) : (
+          <Text
+            as="p"
+            fontSize="sm"
+            fontWeight={400}
+            color="#1D1D1D"
+            px={3}
+            w="85%"
+            mb="15px"
+          >
+            {content}
+          </Text>
+        )}
+      </Box>
+    </MainFrame>
+  );
+};
+
+export default PrivacyPolicy;

src/Pages/ManageCMS/PrivacyPolicy/PrivacyPolicyAddModel.tsx

@@ -0,0 +1,53 @@
+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"
+
+function PrivacyPolicyAddModel() {
+    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">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>
+
+                <DialogCloseTrigger color="black" />
+            </DialogContent>
+        </DialogRoot >
+
+    )
+}
+
+export default PrivacyPolicyAddModel

src/Pages/ManageCMS/TermsAndConditions/TermsAndConditions.tsx

@@ -0,0 +1,38 @@
+import { Box, HStack, Text } from "@chakra-ui/react";
+import MainFrame from "../../../components/MainFrame"
+import { p } from "framer-motion/client";
+import TermsAndConditionsAddModel from "./TermsAndConditionsAddModel";
+
+
+const TermsAndConditions = () => {
+  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
+          </Text>
+
+          <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>
+    </MainFrame>
+  )
+}
+export default TermsAndConditions

src/Pages/ManageCMS/TermsAndConditions/TermsAndConditionsAddModel.tsx

@@ -0,0 +1,53 @@
+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"
+
+function TermsAndConditionsAddModel() {
+    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">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 >
+
+    )
+}
+
+export default TermsAndConditionsAddModel

src/Pages/ManageCommunity/ManageCommunity.tsx

@@ -1,10 +0,0 @@
-import MainFrame from "../../components/MainFrame"
-
-const ManageCommunity = () => {
-  return (
-    <MainFrame >
-
-    </MainFrame>
-  )
-}
-export default ManageCommunity

src/Pages/ManageCommunity/ManagePost.tsx

@@ -1,11 +0,0 @@
-import MainFrame from "../../components/MainFrame"
-
-const ManagePost = () => {
-  return (
-    <MainFrame >
-
-    </MainFrame>
-  )
-}
-
-export default ManagePost

src/Pages/ManageContact/ManageContact.tsx

@@ -0,0 +1,82 @@
+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 DataTable from "../../components/DataTable";
+
+
+// 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 ManageContact = () => {
+  return (
+
+    <MainFrame>
+      <Box>
+        <HStack
+          w={"100%"}
+          justifyContent={"space-between"}
+          mb={4}
+          py={0}
+          px={3}
+        >
+          <Text as={"span"} fontSize={"sm"} fontWeight={500} color={"#000"}>
+          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={"xs"}
+                fontSize={"sm"}
+                placeholder="Search..."
+                bgColor={'#EEEEEE'}
+                ps={8}
+              />
+            </InputGroup>
+            {/* <Button bgColor={'#EEEEEE'} pl={3} pr={3}><IoMdAdd /> <Text>Add</Text></Button> */}
+          </HStack>
+        </HStack>
+        <DataTable
+          sortableColumns={["Name", "Registration Date "]}
+          tableHeadRow={tableHeadRow}
+          data={managepost}
+        />
+      </Box>       
+    </MainFrame>
+  )
+}
+export default ManageContact

src/Pages/ManageContact/PendingRequests.tsx

@@ -0,0 +1,105 @@
+import { Button } from "../../components/ui/button";
+import {
+  DialogBody,
+  DialogCloseTrigger,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogRoot,
+  DialogTitle,
+  DialogTrigger,
+} from "../../components/ui/dialog";
+import { Badge, Field, HStack, Input, Stack, Textarea } from "@chakra-ui/react";
+function PendingRequests() {
+  return (
+    <DialogRoot placement="center">
+      <DialogTrigger asChild>
+        <Badge fontSize={"xs"} px={2} bg={'#02a0a01f'}>
+          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}
+        >
+          <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>
+
+        <DialogCloseTrigger color="black" />
+      </DialogContent>
+    </DialogRoot>
+  );
+}
+
+export default PendingRequests;

src/Pages/ManageGroups/AddGroup.tsx

@@ -0,0 +1,58 @@
+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 { Switch } from "../../components/ui/switch";
+import { IoMdAdd } from "react-icons/io";
+function AddGroup() {
+    return (
+
+        <DialogRoot placement="center" >
+            <DialogTrigger asChild>
+                <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"}
+                // overflow={'scroll'}
+                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="xs">Group Name</Field.Label>
+                            <Input bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
+
+                            <Field.Label color="black" pt={1} fontSize="xs">Group Introduction</Field.Label>
+                            <Input bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
+                        </Field.Root>
+
+                        <Button w="30%" size={'xs'} bg="#02A0A0" mt={3} color={"#fff"}>
+                            Add Member
+                        </Button>
+                        <Heading color="black" pt={1} fontSize="12px">public/Private</Heading>
+                        <Switch />
+                    </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 default AddGroup

src/Pages/ManageGroups/EditDetailGroup.tsx

@@ -0,0 +1,92 @@
+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 { Switch } from "../../components/ui/switch";
+import { FaRegEdit } from "react-icons/fa";
+import { AvatarGroup } from "../../components/ui/avatar";
+import { TbEdit } from "react-icons/tb";
+function EditDetailGroups() {
+    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>
+
+            <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 />
+
+                            <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 />
+
+                            <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 >
+
+    )
+}
+
+export default EditDetailGroups

src/Pages/ManageGroups/ManageGroups.tsx

@@ -1,11 +1,105 @@
+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 ViewSubAdmin from "./ViewSubAdmin"
 
+
+// table data
+
+const tableHeadRow = [
+  "Sr. No",
+  "Group Name",
+  "Description",
+  "Date",
+  "Group type",
+  "Action",
+];
+
+const managepost: any[] = [
+  ...Array.from({ length: 12 }, (_, i) => ({
+    "Sr. No": i + 1,
+    "Group Name": "ABC",
+    "Description": "Lorem ipsum",
+    "Date": "12/01/1987",
+    "Group type": "Private",
+    "Action": (
+      <HStack justifyContent="center">
+
+        {/* <MdOutlineRemoveRedEye
+            style={{ cursor: "pointer", fontSize: "16px" }}
+          /> */}
+        <ViewManageGroup />
+        <EditDetailGroups />
+
+        {/* <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);
+          }}
+        />
+      </HStack>
+    ),
+  })),
+];
 const ManageGroups = () => {
   return (
-    <MainFrame >
 
-    </MainFrame>
+    <MainFrame >
+      <Box>
+        <HStack
+          w={"100%"}
+          justifyContent={"space-between"}
+          mb={4}
+          py={0}
+          px={3}
+        >
+          <Text as={"span"} fontSize={"sm"} fontWeight={500} color={"#000"}>
+            Manage Groups
+          </Text>
+
+          <HStack >
+            <InputGroup
+              startElement={
+                <LuSearch fontSize={"xs"} style={{ position: 'relative', left: '10px' }} />
+              }
+              color={"#000"}
+            >
+              <Input
+                p={3}
+                w={300}
+                bg={"#fff"}
+                colorPalette={"blue"}
+                _focus={{ border: "1px solid #02A0A0" }}
+                rounded={"md"}
+                size={"xs"}
+                fontSize={"sm"}
+                placeholder="Search..."
+                bgColor={'#EEEEEE'}
+                ps={8}
+                border={'none'}
+              />
+            </InputGroup>
+            {/* <Button bgColor={'#EEEEEE'} pl={3} pr={3}><IoMdAdd /> <Text>Add</Text></Button> */}
+            <AddGroup />
+          </HStack>
+        </HStack>
+        <DataTable
+          sortableColumns={["Name", "Registration Date "]}
+          tableHeadRow={tableHeadRow}
+          data={managepost}
+        />
+      </Box>    </MainFrame>
   )
 }
-
 export default ManageGroups

src/Pages/ManageGroups/ViewManageGroup.tsx

@@ -0,0 +1,94 @@
+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 { Switch } from "../../components/ui/switch";
+import { AvatarGroup } from "../../components/ui/avatar";
+import { TbEdit } from "react-icons/tb";
+function ViewManageGroup() {
+    return (
+
+        <DialogRoot placement="center" >
+            <DialogTrigger asChild>
+                
+            <Icon
+            cursor={"pointer"}
+            p={0.5}
+            _hover={{ bg: "#00000015" }}
+            rounded={"md"}
+            boxSize={5}
+            // color={iconColor && iconColor}
+          >
+            <MdOutlineRemoveRedEye />
+          </Icon>
+
+            </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">View 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 />
+
+                            <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 />
+
+                            <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>
+
+                <DialogCloseTrigger color="black" />
+            </DialogContent>
+        </DialogRoot >
+
+    )
+}
+
+export default ViewManageGroup

src/Pages/ManageJobs/ManageJobs.tsx

@@ -0,0 +1,105 @@
+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 DataTable from "../../components/DataTable";
+import MainFrame from "../../components/MainFrame";
+import { InputGroup } from "../../components/ui/input-group";
+import ManageJobsAdd from "./ManageJobsAdd";
+import ViewManageJob from "./ViewManageJob";
+
+
+// table data
+
+const tableHeadRow = [
+  "Sr. No",
+  "Job Title",
+  "Workspace mode",
+  "Category",
+  "Sub-category",
+  "Salary",
+  "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">
+
+        {/* <MdOutlineRemoveRedEye
+            style={{ cursor: "pointer", fontSize: "16px" }}
+          /> */}
+        {/* <ViewDailog /> */}
+        <ViewManageJob />
+        <ManageJobsAdd />
+        {/* <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);
+          }}
+        />
+      </HStack>
+    ),
+  })),
+];
+
+const ManageJobs = () => {
+  return (
+
+    <MainFrame>
+      <Box>
+        <HStack
+          w={"100%"}
+          justifyContent={"space-between"}
+          mb={4}
+          py={0}
+          px={3}
+        >
+          <Text as={"span"} fontSize={"sm"} fontWeight={500} color={"#000"}>
+            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={"xs"}
+                fontSize={"sm"}
+                placeholder="Search..."
+                bgColor={'#EEEEEE'}
+                ps={8}
+              />
+            </InputGroup>
+            {/* <Button bgColor={'#EEEEEE'} pl={3} pr={3}><IoMdAdd /> <Text>Add</Text></Button> */}
+          </HStack>
+        </HStack>
+        <DataTable
+          sortableColumns={["Name", "Registration Date "]}
+          tableHeadRow={tableHeadRow}
+          data={managepost}
+        />
+      </Box>       
+    </MainFrame>
+  )
+}
+export default ManageJobs

src/Pages/ManageJobs/ManageJobsAdd.tsx

@@ -0,0 +1,125 @@
+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 { TbEdit } from "react-icons/tb";
+import { SelectContent, SelectItem, SelectLabel, SelectRoot, SelectTrigger } from "../../components/ui/select";
+
+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 (
+
+
+        <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={{ 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>
+
+
+    )
+}
+
+export default ManageJobsAdd

src/Pages/ManageJobs/ViewManageJob.tsx

@@ -0,0 +1,119 @@
+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 { MdOutlineRemoveRedEye } from "react-icons/md"
+import { SelectContent, SelectItem, SelectLabel, SelectRoot, SelectTrigger } from "../../components/ui/select"
+
+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 (
+
+
+        <DialogRoot placement="center">
+            <DialogTrigger asChild>
+            <Icon
+            cursor={"pointer"}
+            p={0.5}
+            _hover={{ bg: "#00000015" }}
+            rounded={"md"}
+            boxSize={5}
+            // color={iconColor && iconColor}
+          >
+            <MdOutlineRemoveRedEye />
+          </Icon>
+            </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" />
+                        </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><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>
+
+
+    )
+}
+
+export default ViewManageJob

src/Pages/ManagePost/ManagePost.tsx

@@ -0,0 +1,112 @@
+
+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 ViewDailog from './ViewDailog'
+
+// table data
+
+const tableHeadRow = [
+  "Sr. No",
+  "Images",
+  "Description",
+  "Publish Data",
+  "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} />
+
+
+    ),
+    "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">
+
+        {/* <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);
+          }}
+        />
+      </HStack>
+    ),
+  })),
+];
+const 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"}>
+            {/* Manage Post */}
+          </Text>
+
+          <HStack>
+            <InputGroup
+              startElement={
+                <LuSearch fontSize={"xs"} style={{ position: 'relative', left: '10px' }} />
+              }
+              color={"#000"}
+            >
+              <Input
+                p={3}
+                w={300}
+                bg={"#fff"}
+                colorPalette={"blue"}
+                _focus={{ border: "1px solid #02A0A0" }}
+                rounded={"md"}
+                size={"xs"}
+                fontSize={"sm"}
+                placeholder="Search..."
+                bgColor={'#EEEEEE'}
+                ps={8}
+              />
+            </InputGroup>
+          </HStack>
+        </HStack>
+        <DataTable
+          sortableColumns={["Name", "Registration Date "]}
+          tableHeadRow={tableHeadRow}
+          data={managepost}
+        />
+      </Box>
+    </MainFrame>
+  )
+}
+
+export default ManagePost

src/Pages/ManagePost/ViewDailog.tsx

@@ -0,0 +1,58 @@
+import { Field, Icon, 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"
+
+function ViewDailog() {
+    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>
+
+            <DialogContent
+                w={{ base: '90%', md: '400px' }}
+                bg={"#fff"}
+                h="auto"
+                p={3} // Reduced padding
+            >
+                <DialogHeader bg="white" >
+                    <DialogTitle alignSelf="center" color="black" fontSize="14px">View Details</DialogTitle>
+                </DialogHeader>
+
+                <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 />
+
+                            <Field.Label color="black" pt={1} fontSize="12px">Image</Field.Label>
+                            <Image src={img} w="100%" maxH="150px" objectFit="contain" />
+                        </Field.Root>
+                    </Stack>
+                </DialogBody>
+
+                <DialogCloseTrigger color="black" />
+            </DialogContent>
+        </DialogRoot>
+
+    )
+}
+
+export default ViewDailog

src/Pages/ManageUsers/DeactivatedAccounts/DeactivatedAccounts.tsx

@@ -0,0 +1,78 @@
+import { Box, HStack, Input, 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";
+
+const tableHeadRow = [
+  "Sr. No",
+  "First Name",
+  "Last Name",
+  "Company name",
+  "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",
+    "Activate/Deactivate": (
+      <Box display={'flex'} justifyContent={'center'}>
+        <Switch size={'sm'} colorPalette={'teal'} />
+      </Box>
+    ),
+  })),
+];
+
+const DeactivatedAccounts = () => {
+  return (
+    <MainFrame>
+      <Box>
+      <HStack
+          w={"100%"}
+          justifyContent={"space-between"}
+          mb={4}
+          py={0}
+          px={3}
+        >
+          <Text as={"span"} fontSize={"sm"} fontWeight={500} color={"#000"}>
+             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={"sm"}
+                placeholder="Search..."
+                bgColor={'#EEEEEE'}
+                ps={8}
+              />
+            </InputGroup>
+          </HStack>
+        </HStack>
+        <DataTable
+          sortableColumns={["Name", "Registration Date "]}
+          tableHeadRow={tableHeadRow}
+          data={manageUser}
+        />
+      </Box>
+    </MainFrame>
+  );
+};
+
+export default DeactivatedAccounts;

src/Pages/ManageUsers/ManageUsers.tsx

@@ -1,11 +0,0 @@
-import MainFrame from "../../components/MainFrame"
-
-const ManageUsers = () => {
-  return (
-    <MainFrame >
-
-    </MainFrame>
-  )
-}
-
-export default ManageUsers

src/Pages/ManageUsers/RegisterUsers/AddRegisterUsers.tsx

@@ -0,0 +1,100 @@
+import { Field, Input, Stack } from "@chakra-ui/react";
+import {
+  DialogActionTrigger,
+  DialogBody,
+  DialogCloseTrigger,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogRoot,
+  DialogTitle,
+  DialogTrigger,
+} from "../../../components/ui/dialog";
+import { Button } from "../../../components/ui/button";
+import { IoMdAdd } from "react-icons/io";
+
+function AddRegisterUsers() {
+  return (
+    <DialogRoot placement="center">
+      <DialogTrigger asChild>
+        <Button px={4} size={"xs"} bg={"#02A0A0"}>
+          <IoMdAdd /> Add
+        </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">
+            Add 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"
+              />
+
+              <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">
+                Gender
+              </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"
+              />
+
+              <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"
+              />
+            </Field.Root>
+          </Stack>
+        </DialogBody>
+        <DialogFooter mt={2}>
+          <DialogActionTrigger asChild>
+            <Button w="100%" bg="#02A0A0" color={"#fff"}>
+              Save
+            </Button>
+          </DialogActionTrigger>
+        </DialogFooter>
+        <DialogCloseTrigger color="black" />
+      </DialogContent>
+    </DialogRoot>
+  );
+}
+
+export default AddRegisterUsers;

src/Pages/ManageUsers/RegisterUsers/EditRegisterUsers.tsx

@@ -0,0 +1,99 @@
+import { MdOutlineRemoveRedEye } from "react-icons/md";
+import { Field, Icon, Input, Stack } from "@chakra-ui/react";
+import {
+  DialogActionTrigger,
+  DialogBody,
+  DialogCloseTrigger,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogRoot,
+  DialogTitle,
+  DialogTrigger,
+} from "../../../components/ui/dialog";
+import { BiEdit } from "react-icons/bi";
+import { Button } from "../../../components/ui/button";
+import { TbEdit } from "react-icons/tb";
+import Edit from "../../../components/ActionIcons/Edit";
+
+function EditRegisterUsers() {
+  return (
+    <DialogRoot placement="center">
+      <DialogTrigger asChild>
+            <Edit/>
+      </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>
+
+        <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"
+              />
+
+              <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">
+                Gender
+              </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"
+              />
+
+              <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"
+              />
+            </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>
+  );
+}
+
+export default EditRegisterUsers;

src/Pages/ManageUsers/RegisterUsers/RegisterUsers.tsx

@@ -0,0 +1,107 @@
+import { Box, HStack, Image, Input, Text } from "@chakra-ui/react";
+import MainFrame from "../../../components/MainFrame";
+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";
+
+const tableHeadRow = [
+  "Sr. No",
+  "First Name",
+  "Mobile Number",
+  "Gender",
+  "DOB",
+  "Type Of User",
+  "Language",
+  "Activate/Deactivate",
+  "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>
+    ),
+    "Action": (
+      <HStack justifyContent="center">
+        <ViewRegisterUsers />
+        <EditRegisterUsers />
+        {/* <RiDeleteBin5Line style={{ cursor: "pointer" }} /> */}
+        <AlertDailog
+          AltertTiggerIcon={RiDeleteBin5Line}
+          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 = () => {
+  return (
+    <MainFrame>
+      <Box>
+        <HStack
+          w={"100%"}
+          justifyContent={"space-between"}
+          mb={4}
+          py={0}
+          px={3}
+        >
+          <Text as={"span"} fontSize={"sm"} fontWeight={500} color={"#000"}>
+            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={"xs"}
+                fontSize={"sm"}
+                placeholder="Search..."
+                bgColor={'#EEEEEE'}
+                ps={8}
+              />
+            </InputGroup>
+            <AddRegisterUsers />
+          </HStack>
+        </HStack>
+        <DataTable
+          sortableColumns={["Name", "Registration Date "]}
+          tableHeadRow={tableHeadRow}
+          data={registerUser}
+        />
+      </Box>
+    </MainFrame>
+  );
+};
+
+export default RegisterUsers;

src/Pages/ManageUsers/RegisterUsers/ViewRegisterUsers.tsx

@@ -0,0 +1,98 @@
+import { MdOutlineRemoveRedEye } from "react-icons/md";
+import { Field, Icon, Input, Stack } from "@chakra-ui/react";
+import {
+  DialogBody,
+  DialogCloseTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogRoot,
+  DialogTitle,
+  DialogTrigger,
+} from "../../../components/ui/dialog";
+
+function ViewRegisterUsers() {
+  return (
+    <DialogRoot placement="center">
+      <DialogTrigger asChild>
+      <Icon
+            cursor={"pointer"}
+            p={0.5}
+            _hover={{ bg: "#00000015" }}
+            rounded={"md"}
+            boxSize={5}
+            // color={iconColor && iconColor}
+          >
+            <MdOutlineRemoveRedEye />
+          </Icon>
+      </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">
+            View Details
+          </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"
+              />
+
+              <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">
+                Gender
+              </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"
+              />
+
+              <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"
+              />
+            </Field.Root>
+          </Stack>
+        </DialogBody>
+
+        <DialogCloseTrigger color="black" />
+      </DialogContent>
+    </DialogRoot>
+  );
+}
+
+export default ViewRegisterUsers;

src/Pages/MasterModule/AgencyMaster/AgencyMaster.tsx

@@ -0,0 +1,99 @@
+import { Box, HStack, 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 { Switch } from "../../../components/ui/switch";
+import EditAgencyMaster from "./EditAgencyMaster";
+import ViewAgencyAddModel from "./ViewAgencyAddModel";
+import ViewAgencyMaster from "./ViewAgencyMaster";
+
+
+// table data
+
+const tableHeadRow = [
+  "Sr. No",
+  "Agency Name",
+  "RC no.",
+  "State",
+  "RC Status",
+  "Registered Office Address",
+  "Website/Domain",
+  "GST no.",
+  "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 AgencyMaster = () => {
+  return (
+
+    <MainFrame>
+      <Box>
+        <HStack
+          w={"100%"}
+          justifyContent={"space-between"}
+          mb={4}
+          py={0}
+          px={3}
+        >
+          <Text as={"span"} fontSize={"sm"} fontWeight={500} color={"#000"}>
+          Agency Master
+          </Text>
+
+          <HStack >
+            <InputGroup 
+              startElement={
+                <LuSearch fontSize={"xs"} style={{ position: 'relative', left: '10px' }} />
+              }
+              color={"#000"}
+            >
+              <Input
+                p={3}
+                w={300}
+                bg={"#fff"}
+                colorPalette={"blue"}
+                _focus={{ border: "1px solid #02A0A0" }}
+                rounded={"md"}
+                size={"xs"}
+                fontSize={"sm"}
+                placeholder="Search..."
+                bgColor={'#EEEEEE'}
+                ps={8}
+              />
+            </InputGroup>
+            {/* <Button bgColor={'#EEEEEE'} pl={3} pr={3}><IoMdAdd /> <Text>Add</Text></Button> */}
+            <ViewAgencyAddModel />
+          </HStack>
+        </HStack>
+        <DataTable
+          sortableColumns={["Name", "Registration Date "]}
+          tableHeadRow={tableHeadRow}
+          data={managepost}
+        />
+      </Box>       
+    </MainFrame>
+  )
+}
+export default AgencyMaster

src/Pages/MasterModule/AgencyMaster/EditAgencyMaster.tsx

@@ -0,0 +1,83 @@
+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"
+
+
+function EditAgencyMaster() {
+    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>
+
+            <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>
+
+
+    )
+}
+
+export default EditAgencyMaster

src/Pages/MasterModule/AgencyMaster/ViewAgencyAddModel.tsx

@@ -0,0 +1,76 @@
+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"
+
+function ViewAgencyAddModel() {
+    return (
+
+        <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>
+
+            </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</DialogTitle>
+                </DialogHeader>
+
+                <DialogBody bg="white">
+                    <Stack py={3}>
+
+                        <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" />
+
+                            <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" />
+
+                            <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" />
+
+                            <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" />
+                            
+                            <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" />
+
+                            <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" />
+
+
+                        </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 default ViewAgencyAddModel

src/Pages/MasterModule/AgencyMaster/ViewAgencyMaster.tsx

@@ -0,0 +1,83 @@
+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"
+
+
+function ViewAgencyMaster() {
+    return (
+
+
+        <DialogRoot placement="center">
+            <DialogTrigger asChild>
+                
+            <Icon
+            cursor={"pointer"}
+            p={0.5}
+            _hover={{ bg: "#00000015" }}
+            rounded={"md"}
+            boxSize={5}
+            // color={iconColor && iconColor}
+          >
+            <MdOutlineRemoveRedEye />
+          </Icon>
+            </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</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>
+
+
+    )
+}
+
+export default ViewAgencyMaster

src/Pages/MasterModule/Country/Country.tsx

@@ -0,0 +1,86 @@
+import { Box, HStack, 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 { Switch } from "../../../components/ui/switch";
+import CountryAddModel from "./CountryAddModel";
+import EditCountryModel from "./EditCountryModel";
+
+
+
+// table data
+
+const tableHeadRow = [
+  "Sr. No",
+  "Title",
+  "Action"
+  
+];
+
+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 = () => {
+  return (
+
+    <MainFrame>
+      <Box>
+        <HStack
+          w={"100%"}
+          justifyContent={"space-between"}
+          mb={4}
+          py={0}
+          px={3}
+        >
+          <Text as={"span"} fontSize={"sm"} fontWeight={500} color={"#000"}>
+          Country
+          </Text>
+
+          <HStack >
+            <InputGroup 
+              startElement={
+                <LuSearch fontSize={"xs"} style={{ position: 'relative', left: '10px' }} />
+              }
+              color={"#000"}
+            >
+              <Input
+                p={3}
+                w={300}
+                bg={"#fff"}
+                colorPalette={"blue"}
+                _focus={{ border: "1px solid #02A0A0" }}
+                rounded={"md"}
+                size={"xs"}
+                fontSize={"sm"}
+                placeholder="Search..."
+                bgColor={'#EEEEEE'}
+                ps={8}
+              />
+            </InputGroup>
+            {/* <Button bgColor={'#EEEEEE'} pl={3} pr={3}><IoMdAdd /> <Text>Add</Text></Button> */}
+            <CountryAddModel />
+          </HStack>
+        </HStack>
+        <DataTable
+          sortableColumns={["Name", "Registration Date "]}
+          tableHeadRow={tableHeadRow}
+          data={managepost}
+        />
+      </Box>       
+    </MainFrame>
+  )
+}
+export default Country

src/Pages/MasterModule/Country/CountryAddModel.tsx

@@ -0,0 +1,58 @@
+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 { IoMdAdd } from "react-icons/io"
+import { Button } from "../../../components/ui/button"
+
+function CountryAddModel() {
+   
+    return (
+
+        <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>
+
+            </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>
+                </DialogFooter>
+
+                <DialogCloseTrigger color="black" />
+            </DialogContent>
+        </DialogRoot >
+
+    )
+}
+
+export default CountryAddModel

src/Pages/MasterModule/Country/EditCountryModel.tsx

@@ -0,0 +1,61 @@
+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";
+
+
+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 default EditCountryModel

src/Pages/MasterModule/JobStatus/EditJobStatusModel.tsx

@@ -0,0 +1,61 @@
+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";
+
+
+function EditJobStatusModel() {
+
+
+   
+    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">Job Status</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 default EditJobStatusModel

src/Pages/MasterModule/JobStatus/JobStatus.tsx

@@ -0,0 +1,86 @@
+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 { Switch } from "../../../components/ui/switch";
+import JobStatusAddModel from "./JobStatusAddModel";
+import EditJobStatusModel from "./EditJobStatusModel";
+
+
+
+// table data
+
+const tableHeadRow = [
+  "Sr. No",
+  "Title",
+  "Action"
+  
+];
+
+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 = () => {
+  return (
+
+    <MainFrame>
+      <Box>
+        <HStack
+          w={"100%"}
+          justifyContent={"space-between"}
+          mb={4}
+          py={0}
+          px={3}
+        >
+          <Text as={"span"} fontSize={"sm"} fontWeight={500} color={"#000"}>
+          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={"xs"}
+                fontSize={"sm"}
+                placeholder="Search..."
+                bgColor={'#EEEEEE'}
+                ps={8}
+              />
+            </InputGroup>
+            {/* <Button bgColor={'#EEEEEE'} pl={3} pr={3}><IoMdAdd /> <Text>Add</Text></Button> */}
+            <JobStatusAddModel />
+          </HStack>
+        </HStack>
+        <DataTable
+          sortableColumns={["Name", "Registration Date "]}
+          tableHeadRow={tableHeadRow}
+          data={managepost}
+        />
+      </Box>       
+    </MainFrame>
+  )
+}
+export default JobStatus

src/Pages/MasterModule/JobStatus/JobStatusAddModel.tsx

@@ -0,0 +1,58 @@
+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 { IoMdAdd } from "react-icons/io"
+import { Button } from "../../../components/ui/button"
+
+function JobStatusAddModel() {
+   
+    return (
+
+        <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>
+
+            </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 Status</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>
+                </DialogFooter>
+
+                <DialogCloseTrigger color="black" />
+            </DialogContent>
+        </DialogRoot >
+
+    )
+}
+
+export default JobStatusAddModel

src/Pages/MasterModule/JobType/EditJobModel.tsx

@@ -0,0 +1,62 @@
+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";
+
+
+function EditJobeModel() {
+
+
+   
+    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">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 >
+
+    )
+}
+
+export default EditJobeModel

src/Pages/MasterModule/JobType/JobAddModel.tsx

@@ -0,0 +1,58 @@
+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 { IoMdAdd } from "react-icons/io"
+import { Button } from "../../../components/ui/button"
+
+function JobAddModel() {
+   
+    return (
+
+        <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>
+
+            </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" />
+                        </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 default JobAddModel

src/Pages/MasterModule/JobType/JobType.tsx

@@ -0,0 +1,86 @@
+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 { Switch } from "../../../components/ui/switch";
+import JobAddModel from "./JobAddModel";
+import EditJobeModel from "./EditJobModel";
+
+
+
+// table data
+
+const tableHeadRow = [
+  "Sr. No",
+  "Title",
+  "Action"
+  
+];
+
+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 = () => {
+  return (
+
+    <MainFrame>
+      <Box>
+        <HStack
+          w={"100%"}
+          justifyContent={"space-between"}
+          mb={4}
+          py={0}
+          px={3}
+        >
+          <Text as={"span"} fontSize={"sm"} fontWeight={500} color={"#000"}>
+          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={"xs"}
+                fontSize={"sm"}
+                placeholder="Search..."
+                bgColor={'#EEEEEE'}
+                ps={8}
+              />
+            </InputGroup>
+            {/* <Button bgColor={'#EEEEEE'} pl={3} pr={3}><IoMdAdd /> <Text>Add</Text></Button> */}
+            <JobAddModel />
+          </HStack>
+        </HStack>
+        <DataTable
+          sortableColumns={["Name", "Registration Date "]}
+          tableHeadRow={tableHeadRow}
+          data={managepost}
+        />
+      </Box>       
+    </MainFrame>
+  )
+}
+export default JobType

src/Pages/MasterModule/TemplateMaster/EditTemplateModel.tsx

@@ -0,0 +1,100 @@
+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 { useState } from "react";
+import { FaRegEdit } from "react-icons/fa";
+
+
+function EditTemplateModel() {
+
+    const [images, setImages] = useState<string[]>([]);
+
+    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
+      }
+    };
+
+   
+    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">Add</DialogTitle>
+                </DialogHeader>
+
+                <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" />
+
+                            
+                            <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" /> */}
+
+                        </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 default EditTemplateModel

src/Pages/MasterModule/TemplateMaster/TemplateAddModel.tsx

@@ -0,0 +1,100 @@
+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 { IoMdAdd } from "react-icons/io"
+import { Button } from "../../../components/ui/button"
+import { FiUpload } from "react-icons/fi";
+import { useState } from "react";
+
+
+function TemplateAddModel() {
+
+    const [images, setImages] = useState<string[]>([]);
+
+    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
+      }
+    };
+
+   
+    return (
+
+        <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>
+
+            </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">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">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" /> */}
+
+                        </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 default TemplateAddModel

src/Pages/MasterModule/TemplateMaster/TemplateMaster.tsx

@@ -0,0 +1,99 @@
+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 { Switch } from "../../../components/ui/switch";
+import img from "../../../assets/waterfall.jpg"
+import Templateimg from "../../../assets/Template_img.png"
+import TemplateAddModel from "./TemplateAddModel";
+import EditTemplateModel from "./EditTemplateModel";
+
+
+
+// table data
+
+const tableHeadRow = [
+  "Sr. No",
+  "Title",
+  "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 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>
+    ),
+  })),
+];
+
+const TemplateMaster = () => {
+  return (
+
+    <MainFrame>
+      <Box>
+        <HStack
+          w={"100%"}
+          justifyContent={"space-between"}
+          mb={4}
+          py={0}
+          px={3}
+        >
+          <Text as={"span"} fontSize={"sm"} fontWeight={500} color={"#000"}>
+          Template Master
+          </Text>
+
+          <HStack >
+            <InputGroup 
+              startElement={
+                <LuSearch fontSize={"xs"} style={{ position: 'relative', left: '10px' }} />
+              }
+              color={"#000"}
+            >
+              <Input
+                p={3}
+                w={300}
+                bg={"#fff"}
+                colorPalette={"blue"}
+                _focus={{ border: "1px solid #02A0A0" }}
+                rounded={"md"}
+                size={"xs"}
+                fontSize={"sm"}
+                placeholder="Search..."
+                bgColor={'#EEEEEE'}
+                ps={8}
+              />
+            </InputGroup>
+            {/* <Button bgColor={'#EEEEEE'} pl={3} pr={3}><IoMdAdd /> <Text>Add</Text></Button> */}
+            <TemplateAddModel />
+          </HStack>
+        </HStack>
+        <DataTable
+          sortableColumns={["Name", "Registration Date "]}
+          tableHeadRow={tableHeadRow}
+          data={managepost}
+        />
+      </Box>       
+    </MainFrame>
+  )
+}
+export default TemplateMaster

src/Pages/MasterModule/WorkspaceMode/EditWorkModel.tsx

@@ -0,0 +1,61 @@
+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";
+
+
+function EditWorkModel() {
+
+
+   
+    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">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 >
+
+    )
+}
+
+export default EditWorkModel

src/Pages/MasterModule/WorkspaceMode/WorkAddModel.tsx

@@ -0,0 +1,58 @@
+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 { IoMdAdd } from "react-icons/io"
+import { Button } from "../../../components/ui/button"
+
+function WorkAddModel() {
+   
+    return (
+
+        <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>
+
+            </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">Workspace Mode</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>
+                </DialogFooter>
+
+                <DialogCloseTrigger color="black" />
+            </DialogContent>
+        </DialogRoot >
+
+    )
+}
+
+export default WorkAddModel

src/Pages/MasterModule/WorkspaceMode/WorkspaceMode.tsx

@@ -0,0 +1,86 @@
+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 { Switch } from "../../../components/ui/switch";
+import WorkAddModel from "./WorkAddModel";
+import EditWorkModel from "./EditWorkModel";
+
+
+
+// table data
+
+const tableHeadRow = [
+  "Sr. No",
+  "Title",
+  "Action"
+  
+];
+
+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 = () => {
+  return (
+
+    <MainFrame>
+      <Box>
+        <HStack
+          w={"100%"}
+          justifyContent={"space-between"}
+          mb={4}
+          py={0}
+          px={3}
+        >
+          <Text as={"span"} fontSize={"sm"} fontWeight={500} color={"#000"}>
+          Workspace Mode
+          </Text>
+
+          <HStack >
+            <InputGroup 
+              startElement={
+                <LuSearch fontSize={"xs"} style={{ position: 'relative', left: '10px' }} />
+              }
+              color={"#000"}
+            >
+              <Input
+                p={3}
+                w={300}
+                bg={"#fff"}
+                colorPalette={"blue"}
+                _focus={{ border: "1px solid #02A0A0" }}
+                rounded={"md"}
+                size={"xs"}
+                fontSize={"sm"}
+                placeholder="Search..."
+                bgColor={'#EEEEEE'}
+                ps={8}
+              />
+            </InputGroup>
+            {/* <Button bgColor={'#EEEEEE'} pl={3} pr={3}><IoMdAdd /> <Text>Add</Text></Button> */}
+            <WorkAddModel />
+          </HStack>
+        </HStack>
+        <DataTable
+          sortableColumns={["Name", "Registration Date "]}
+          tableHeadRow={tableHeadRow}
+          data={managepost}
+        />
+      </Box>       
+    </MainFrame>
+  )
+}
+export default WorkspaceMode

src/Pages/MyProfile/MyProfile.tsx

@@ -1,11 +1,11 @@
 import MainFrame from "../../components/MainFrame"
 
-const Reporting = () => {
+const MyProfile = () => {
   return (
-    
-    <MainFrame >
 
+    <MainFrame >
+      MyProfile
     </MainFrame>
   )
 }
-export default Reporting
+export default MyProfile

src/Pages/Profile/ChangePassword.tsx

@@ -0,0 +1,58 @@
+
+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 { Button } from "../../components/ui/button";
+import EnterPassword from "./EnterPassword";
+function Changepassword() {
+    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'}
+            >
+                <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>
+
+                    </Stack>
+                </DialogBody>
+                <DialogFooter display="flex" justifyContent="center" mt={2} p={2}
+                >
+                    {/* <Button w="100%" bg="#02A0A0" color={"#fff"}>
+                        Save
+                    </Button> */}
+                    <EnterPassword />
+                </DialogFooter>
+
+                {/* <DialogCloseTrigger color="black" /> */}
+            </DialogContent>
+        </DialogRoot >
+
+    )
+}
+
+export default Changepassword

src/Pages/Profile/EnterOTP.tsx

@@ -0,0 +1,109 @@
+import { DialogBody, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } 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";
+
+function EnterOTP() {
+    const [otp, setOtp] = useState<string[]>(["", "", "", ""]);
+
+    // Handle change for OTP inputs
+    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();
+        }
+    };
+
+    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}
+                >
+                    <Button w="100%" bg="#02A0A0" color={"#fff"}>
+                        Save
+                    </Button>
+                </DialogFooter>
+
+                {/* <DialogCloseTrigger color="black" /> */}
+            </DialogContent>
+        </DialogRoot >
+
+    )
+}
+
+export default EnterOTP

src/Pages/Profile/EnterPassword.tsx

@@ -0,0 +1,55 @@
+
+import { DialogBody, 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 EnterOTP from "./EnterOTP";
+function EnterPassword() {
+    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} pb={2} >
+                    <DialogTitle alignSelf="center" color="black" fontSize="18px" textAlign={"center"}>ENTER PASSWORD</DialogTitle>
+                </DialogHeader>
+
+                <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>
+
+
+                    </Stack>
+                </DialogBody>
+                <DialogFooter display="flex" justifyContent="center" mt={2} p={2}
+                >
+                    {/* <Button w="100%" bg="#02A0A0" color={"#fff"}>
+                        Save
+                    </Button> */}
+                    <EnterOTP />
+                </DialogFooter>
+
+                {/* <DialogCloseTrigger color="black" /> */}
+            </DialogContent>
+        </DialogRoot >
+
+    )
+}
+
+export default EnterPassword

src/Pages/Profile/Profile.tsx

@@ -1,10 +1,60 @@
+import { Avatar, Box, Field, Input, SimpleGrid, Stack, Text } from "@chakra-ui/react"
 import MainFrame from "../../components/MainFrame"
+import { FaCamera } from "react-icons/fa";
+import { Button } from "../../components/ui/button";
+import Changepassword from "./ChangePassword";
 
 const Profile = () => {
   return (
     <MainFrame >
+      <Stack p={5}>
+        <Box position="relative" width="fit-content"
+          display="inline-block"
 
-    </MainFrame>
+          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>
+
+          <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>
+
+          </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 />
+
+        </Box>
+
+      </Stack>
+
+    </MainFrame >
   )
 }
 

src/Pages/SubAdmin/AddModel.tsx

@@ -0,0 +1,80 @@
+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"
+
+function AddModel() {
+    return (
+
+        <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>
+
+            </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 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" />
+
+                            <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" />
+
+                            <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" />
+
+                            <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>
+
+                <DialogCloseTrigger color="black" />
+            </DialogContent>
+        </DialogRoot >
+
+    )
+}
+
+export default AddModel

src/Pages/SubAdmin/SubAdmin.tsx

@@ -1,11 +1,101 @@
+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 AddModel from "./AddModel"
+import EditSubAdmin from "../../components/EditSubAdmin"
+import ViewSubAdmin from "./ViewSubAdmin"
 
+
+// table data
+
+const tableHeadRow = [
+  "Sr. No",
+  "Id",
+  "First Name",
+  "last Name",
+  "DOB",
+  "Gender",
+  "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",
+    "Action": (
+      <HStack justifyContent="center">
+
+        <ViewSubAdmin />
+        <EditSubAdmin />
+
+        <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 SubAdmin = () => {
   return (
-    
-    <MainFrame >
 
-    </MainFrame>
+    <MainFrame >
+      <Box>
+        <HStack
+          w={"100%"}
+          justifyContent={"space-between"}
+          mb={4}
+          py={0}
+          px={3}
+        >
+          <Text as={"span"} fontSize={"sm"} fontWeight={500} color={"#000"}>
+            {/* Manage Post */}
+          </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={"sm"}
+                placeholder="Search..."
+                bgColor={'#EEEEEE'}
+                ps={8}
+              />
+            </InputGroup>
+            {/* <Button bgColor={'#EEEEEE'} pl={3} pr={3}><IoMdAdd /> <Text>Add</Text></Button> */}
+            <AddModel />
+          </HStack>
+        </HStack>
+        <DataTable
+          sortableColumns={["Name", "Registration Date "]}
+          tableHeadRow={tableHeadRow}
+          data={managepost}
+        />
+      </Box>    </MainFrame>
   )
 }
 export default SubAdmin

src/Pages/SubAdmin/ViewSubAdmin.tsx

@@ -0,0 +1,93 @@
+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 (
+
+        <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> */}
+
+            </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 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 value="Priyanka" 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="Joshi" 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">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">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"}>
+                        Save
+                    </Button> */}
+                </DialogFooter>
+
+                <DialogCloseTrigger color="black" />
+            </DialogContent>
+        </DialogRoot >
+
+    )
+}
+
+export default ViewSubAdmin

src/Pages/Support/Support.tsx

@@ -1,11 +0,0 @@
-import MainFrame from "../../components/MainFrame"
-
-const Support = () => {
-  return (
-    
-    <MainFrame >
-
-    </MainFrame>
-  )
-}
-export default Support

src/Redux/Service/apiSlice.tsx

@@ -0,0 +1,75 @@
+import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
+import { BaseQueryFn, FetchArgs, FetchBaseQueryError } from "@reduxjs/toolkit/query";
+import { logout } from "./authSlice"; // Import logout action from authSlice
+import { RootState } from "../Store";
+
+const baseQuery = fetchBaseQuery({
+  baseUrl: `${import.meta.env.VITE_API_URL}`,
+  prepareHeaders: (headers, { getState }) => {
+
+    const token = (getState() as RootState).auth.token; // Get token from Redux store
+    // 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
+
+    if (token) {
+      headers.set("Authorization", `Basic ${basicAuth}`);
+      headers.set("access-token", `${token}`);
+    
+    }
+    headers.set("Content-Type", "application/json");
+    return headers;
+  },
+});
+
+
+// ✅ Handle 401 Errors (Auto Logout)
+export const baseQueryWithReauth: BaseQueryFn<
+  string | FetchArgs,
+  unknown,
+  FetchBaseQueryError
+> = async (args, api, extraOptions) => {
+  const result = await baseQuery(args, api, extraOptions);
+
+  if (result.error && result.error.status === 401) {
+    api.dispatch(logout()); // Logout user on 401 error
+  }
+
+  return result;
+};
+
+
+
+
+export const dashboard = createApi({
+  reducerPath: "api",
+  baseQuery: baseQueryWithReauth, // Use enhanced baseQuery with error handling
+  endpoints: (builder) => ({
+
+
+
+    getPosts: builder.query<Post[], void>({ query: () => "/posts" }),
+
+    
+    // 🔹 POST: Create a new post
+    logOut: builder.mutation<void, void>({
+      query: () => ({
+        url: "/logout",
+        method: "POST",
+      }),
+    }),
+
+
+
+
+  }),
+});
+
+export const { useGetPostsQuery, useLogOutMutation } = dashboard;
+
+export type Post = {
+  id: number;
+  title: string;
+  body: string;
+};

src/Redux/Service/authSlice.tsx

@@ -0,0 +1,27 @@
+import { createSlice, PayloadAction } from "@reduxjs/toolkit";
+
+type AuthState = {
+  token: string | null;
+};
+
+const initialState: AuthState = {
+  token: localStorage.getItem("token"), // Load token from localStorage
+}; 
+
+const authSlice = createSlice({
+  name: "auth",
+  initialState,
+  reducers: {
+    setToken: (state, action: PayloadAction<string>) => {
+      state.token = action.payload;
+      localStorage.setItem("token", action.payload); // ✅ Store token in localStorage
+    },
+    logout: (state) => {
+      state.token = null;
+      localStorage.removeItem("token"); // ✅ Remove token from localStorage on logout
+    },
+  },
+});
+
+export const { setToken, logout } = authSlice.actions;
+export default authSlice.reducer;

src/Redux/Service/deactivated.account.service.ts

@@ -0,0 +1,26 @@
+import { createApi } from "@reduxjs/toolkit/query";
+import { baseQueryWithReauth } from "./apiSlice";
+
+export const deactivatedAccounts = createApi({
+    reducerPath: "deactivatedAccounts",
+    baseQuery: baseQueryWithReauth, // Use enhanced baseQuery with error handling
+    endpoints: (builder) => ({
+  
+  
+  
+      getPosts: builder.query<Post[], void>({ query: () => "/posts" }),
+  
+  
+  
+  
+  
+    }),
+  });
+  
+  export const {  } = deactivatedAccounts;
+  
+  export type Post = {
+    id: number;
+    title: string;
+    body: string;
+  };

src/Redux/Service/faqs.service.ts

@@ -0,0 +1,26 @@
+import { createApi } from "@reduxjs/toolkit/query";
+import { baseQueryWithReauth } from "./apiSlice";
+
+export const faqs = createApi({
+    reducerPath: "faqs",
+    baseQuery: baseQueryWithReauth, // Use enhanced baseQuery with error handling
+    endpoints: (builder) => ({
+  
+  
+  
+      getPosts: builder.query<Post[], void>({ query: () => "/posts" }),
+  
+  
+  
+  
+  
+    }),
+  });
+  
+  export const {  } = faqs;
+  
+  export type Post = {
+    id: number;
+    title: string;
+    body: string;
+  };

src/Redux/Service/forget.password.service.ts

@@ -0,0 +1,36 @@
+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;
+};

src/Redux/Service/manage.aboutus.service.ts

@@ -0,0 +1,96 @@
+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
+  endpoints: (builder) => ({
+
+
+
+    // 🔹 GET: Fetch all posts
+    getAboutUs: builder.query<AboutUsResponse, void>({
+      query: () => "/about-us",
+    }),
+
+
+
+
+
+    // 🔹 GET: Fetch a single post by ID
+    getPostById: builder.query<Post, number>({
+      query: (id) => `/posts/${id}`,
+    }),
+
+    // 🔹 POST: Create a new post
+    createPost: builder.mutation<Post, Partial<Post>>({
+      query: (data) => ({
+        url: "/posts",
+        method: "POST",
+        body: data,
+      }),
+    }),
+
+    // 🔹 PUT: Update an existing post
+    updateAboutUs: builder.mutation<UpdateAboutUsResponse, UpdateAboutUsRequest>({
+      query: ({ id, updatedData }) => ({
+        url: `/posts/${id}`,
+        method: "POST",
+        body: updatedData,
+      }),
+    }),
+
+    // 🔹 DELETE: Remove a post by ID
+    deletePost: builder.mutation<{ success: boolean }, number>({
+      query: (id) => ({
+        url: `/posts/${id}`,
+        method: "DELETE",
+      }),
+    }),
+  }),
+});
+
+export const { 
+  useGetAboutUsQuery, 
+  useUpdateAboutUsMutation,
+
+
+
+
+
+
+
+
+
+
+  
+  useGetPostByIdQuery, 
+  useCreatePostMutation,  
+  useDeletePostMutation 
+} = aboutUs;
+
+// Define Post type
+export type Post = {
+  id: number;
+  title: string;
+  body: string;
+};
+
+
+export type UpdateAboutUsRequest={
+  id: number; updatedData: string
+}
+
+
+export type UpdateAboutUsResponse={
+  id: number; updatedData: string
+}
+
+
+export type AboutUs = {
+  id: number;
+  language_master_xid: number;
+  content: string;
+  is_active: boolean;
+};
+

src/Redux/Service/manage.contactus.service.ts

@@ -0,0 +1,26 @@
+import { createApi } from "@reduxjs/toolkit/query";
+import { baseQueryWithReauth } from "./apiSlice";
+
+export const manageContactUs = createApi({
+    reducerPath: "manageContactUs",
+    baseQuery: baseQueryWithReauth, // Use enhanced baseQuery with error handling
+    endpoints: (builder) => ({
+  
+  
+  
+      getPosts: builder.query<Post[], void>({ query: () => "/posts" }),
+  
+  
+  
+  
+  
+    }),
+  });
+  
+  export const {  } = manageContactUs;
+  
+  export type Post = {
+    id: number;
+    title: string;
+    body: string;
+  };

src/Redux/Service/manage.groups.service.ts

@@ -0,0 +1,26 @@
+import { createApi } from "@reduxjs/toolkit/query";
+import { baseQueryWithReauth } from "./apiSlice";
+
+export const manageGroups = createApi({
+    reducerPath: "manageGroups",
+    baseQuery: baseQueryWithReauth, // Use enhanced baseQuery with error handling
+    endpoints: (builder) => ({
+  
+  
+  
+      getPosts: builder.query<Post[], void>({ query: () => "/posts" }),
+  
+  
+  
+  
+  
+    }),
+  });
+  
+  export const {  } = manageGroups;
+  
+  export type Post = {
+    id: number;
+    title: string;
+    body: string;
+  };

src/Redux/Service/manage.jobs.service.ts

@@ -0,0 +1,26 @@
+import { createApi } from "@reduxjs/toolkit/query";
+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 = {
+    id: number;
+    title: string;
+    body: string;
+  };

src/Redux/Service/manage.posts.service.ts

@@ -0,0 +1,26 @@
+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;
+  };

src/Redux/Service/manage.subadmin.service.ts

@@ -0,0 +1,26 @@
+import { createApi } from "@reduxjs/toolkit/query";
+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 = {
+    id: number;
+    title: string;
+    body: string;
+  };

src/Redux/Service/master.module.service.ts

@@ -0,0 +1,26 @@
+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;
+  };

src/Redux/Service/myprofie.service.ts

@@ -0,0 +1,26 @@
+import { createApi } from "@reduxjs/toolkit/query";
+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;
+  };

src/Redux/Service/privacy.policy.service.ts

@@ -0,0 +1,16 @@
+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, // Ensure this returns a valid `BaseQueryFn`
+  endpoints: (builder) => ({
+    getPrivacyPolicy: builder.query<PrivacyPolicyResponse, void>({ // Fix types here
+      query: () => "/privacy-policy",
+    }),
+  }),
+});
+
+// Export hook
+export const { useGetPrivacyPolicyQuery } = privacyPolicy;

src/Redux/Service/privacy.service.ts

@@ -0,0 +1,26 @@
+import { createApi } from "@reduxjs/toolkit/query";
+import { baseQueryWithReauth } from "./apiSlice";
+
+export const privacy = createApi({
+    reducerPath: "privacy",
+    baseQuery: baseQueryWithReauth, // Use enhanced baseQuery with error handling
+    endpoints: (builder) => ({
+  
+  
+  
+      getPosts: builder.query<Post[], void>({ query: () => "/posts" }),
+  
+  
+  
+  
+  
+    }),
+  });
+  
+  export const {  } = privacy;
+  
+  export type Post = {
+    id: number;
+    title: string;
+    body: string;
+  };

src/Redux/Service/register.user.service.ts

@@ -0,0 +1,26 @@
+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;
+  };

src/Redux/Service/terms.and.condition.service.ts

@@ -0,0 +1,26 @@
+import { createApi } from "@reduxjs/toolkit/query";
+import { baseQueryWithReauth } from "./apiSlice";
+
+export const termsAndCondition = createApi({
+    reducerPath: "api",
+    baseQuery: baseQueryWithReauth, // Use enhanced baseQuery with error handling
+    endpoints: (builder) => ({
+  
+  
+  
+      getPosts: builder.query<Post[], void>({ query: () => "/posts" }),
+  
+  
+  
+  
+  
+    }),
+  });
+  
+  export const {  } = termsAndCondition;
+  
+  export type Post = {
+    id: number;
+    title: string;
+    body: string;
+  };

src/Redux/Store.tsx

@@ -0,0 +1,55 @@
+import { configureStore } from "@reduxjs/toolkit";
+import { dashboard } from "./Service/apiSlice";
+import authReducer from "./Service/authSlice";
+import { registerUser } from "./Service/register.user.service";
+import { deactivatedAccounts } from "./Service/deactivated.account.service";
+import { faqs } from "./Service/faqs.service";
+import { managePosts } from "./Service/manage.posts.service";
+import { manageSubAdmin } from "./Service/manage.subadmin.service";
+import { manageJobs } from "./Service/manage.jobs.service";
+import { manageGroups } from "./Service/manage.groups.service";
+import { manageContactUs } from "./Service/manage.contactus.service";
+import { aboutUs } from "./Service/manage.aboutus.service";
+import { privacyPolicy } from "./Service/privacy.policy.service";
+import { privacy } from "./Service/privacy.service";
+import { myProfile } from "./Service/myprofie.service";
+import { masterModule } from "./Service/master.module.service";
+
+export const store = configureStore({
+  reducer: {
+    [dashboard.reducerPath]: dashboard.reducer,
+    [registerUser.reducerPath]: registerUser.reducer,
+    [deactivatedAccounts.reducerPath]: deactivatedAccounts.reducer,
+    [faqs.reducerPath]: faqs.reducer,
+    [managePosts.reducerPath]: managePosts.reducer,
+    [manageSubAdmin.reducerPath]: manageSubAdmin.reducer,
+    [manageJobs.reducerPath]: manageJobs.reducer,
+    [manageGroups.reducerPath]: manageGroups.reducer,
+    [manageContactUs.reducerPath]: manageContactUs.reducer,
+    [aboutUs.reducerPath]: aboutUs.reducer,
+    [privacyPolicy.reducerPath]: privacyPolicy.reducer,
+    [privacy.reducerPath]: privacy.reducer,
+    [myProfile.reducerPath]: myProfile.reducer,
+    [masterModule.reducerPath]: masterModule.reducer,
+    auth: authReducer,
+  },
+  middleware: (getDefaultMiddleware) =>
+    getDefaultMiddleware().concat(
+      dashboard.middleware, 
+      deactivatedAccounts.middleware,
+      managePosts.middleware,
+      faqs.middleware,
+      manageSubAdmin.middleware,
+      manageJobs.middleware,
+      manageGroups.middleware,
+      manageContactUs.middleware,
+      aboutUs.middleware,
+      privacyPolicy.middleware,
+      privacy.middleware,
+      myProfile.middleware,
+      masterModule.middleware,
+      ),
+});
+
+export type RootState = ReturnType<typeof store.getState>;
+export type AppDispatch = typeof store.dispatch;

src/Routes/Nav.ts

@@ -1,77 +1,143 @@
-import { LiaUsersSolid } from "react-icons/lia";
-import { LuBellDot } from "react-icons/lu";
-import { MdOutlineSupportAgent, MdPostAdd } from "react-icons/md";
+import { LuBriefcaseBusiness} from "react-icons/lu";
+import { MdHeadsetMic, MdOutlineDashboard} from "react-icons/md";
 import { GoDotFill } from "react-icons/go";
-
-import { TbFileSettings, TbLayoutDashboard, TbReport, TbUsers, TbUsersGroup } from "react-icons/tb";
-import { RiUserSettingsLine } from "react-icons/ri";
+import { HiOutlinePencilSquare } from "react-icons/hi2";
+import { BiUser, BiUserPin } from "react-icons/bi";
+import { PiUsersThree } from "react-icons/pi";
+import { BsBoxes, BsPersonBadge } from "react-icons/bs";
+import { AiOutlineFileText } from "react-icons/ai";
 
 export const nav = [
     
         {
           title: "Dashboard",
           path: "/",
-          Icon: TbLayoutDashboard,
+          Icon: MdOutlineDashboard,
           type:'single'
         },
         {
           title: "Manage Users",
-          path: "/manage-user",
-          Icon: TbUsers,
-          type:'single'
-        },
-        {
-          title: "Manage Groups",
-          path: "/manage-groups",
-          Icon: TbUsersGroup,
-          type:'single'
-        },
-        {
-          title: "Community",
-          path: "/manage-community",
-          Icon: LiaUsersSolid,
+          path: "/register-users",
+          Icon: BiUserPin,
           type:'multiple',
           children: [
             {
-              title: "Manage Community",
-              path: "/manage-community",
+              title: "Register Users",
+              path: "/register-users",
               Icon: GoDotFill,
             },
             {
-              title: "Manage Post",
-              path: "/manage-post",
+              title: "Deactivated Accounts",
+              path: "/deactivated-accounts",
               Icon: GoDotFill,
             },
           ],
         },
         {
-          title: "Support",
-          path: "/support",
-          Icon: MdOutlineSupportAgent,
+          title: "Manage Post",
+          path: "/manage-post",
+          Icon: HiOutlinePencilSquare,
           type:'single'
         },
         {
-          title: "Sub-Admin",
+          title: "Manage Sub-Admin",
           path: "/sub-admin",
-          Icon: RiUserSettingsLine,
+          Icon: BiUser,
           type:'single'
         },
         {
-          title: "Reporting",
-          path: "/reporting",
-          Icon: TbReport,
+          title: "Manage Jobs",
+          path: "/manage-jobs",
+          Icon: LuBriefcaseBusiness,
           type:'single'
         },
         {
-          title: "CMS",
-          path: "/cms",
-          Icon: TbFileSettings,
+          title: "Manage Groups",
+          path: "/manage-groups",
+          Icon: PiUsersThree,
           type:'single'
         },
         {
-          title: "Manage Notifications",
-          path: "/manage-notification",
-          Icon: LuBellDot,
+          title: "Manage Contact Us",
+          path: "/manage-contact",
+          Icon: MdHeadsetMic  ,
           type:'single'
-        }
+        },
+        {
+          title: "Manage CMS",
+          path: "/faq",
+          Icon: AiOutlineFileText,
+          type:'multiple',
+          children: [
+            {
+              title: "FAQs",
+              path: "/faq",
+              Icon: GoDotFill,
+            },
+            {
+              title: "About Us",
+              path: "/about-us",
+              Icon: GoDotFill,
+            },
+            {
+              title: "Privacy Policy",
+              path: "/privacy-policy",
+              Icon: GoDotFill,
+            },
+            {
+              title: "Terms And Conditions",
+              path: "/terms-conditions",
+              Icon: GoDotFill,
+            },
+            {
+              title: "Privacy",
+              path: "/privacy",
+              Icon: GoDotFill,
+            },
+          ],
+        },
+        {
+          title: "My Profile",
+          path: "/profile",
+          Icon: BsPersonBadge,
+          type:'single'
+        },
+        {
+          title: "Master Module",
+          path: "/agency-master",
+          Icon: BsBoxes,
+          type:'multiple',
+          children: [
+            {
+              title: "Agency Master",
+              path: "/agency-master",
+              Icon: GoDotFill,
+            },
+            {
+              title: "Template Master",
+              path: "/template-master",
+              Icon: GoDotFill,
+            },
+            {
+              title: "Job Type",
+              path: "/job-type",
+              Icon: GoDotFill,
+            },
+            {
+              title: "Workspace Mode",
+              path: "/workspace-mode",
+              Icon: GoDotFill,
+            },
+            {
+              title: "Country",
+              path: "/country",
+              Icon: GoDotFill,
+            },
+            {
+              title: "Job Status",
+              path: "/job-status",
+              Icon: GoDotFill,
+            },
+          ],
+        },
   ];

src/Routes/Routes.ts

@@ -1,24 +1,53 @@
 
-import CMS from "../Pages/CMS/CMS";
+
 import Dashboard from "../Pages/Dashboard/Dashboard";
-import ManageCommunity from "../Pages/ManageCommunity/ManageCommunity";
-import ManagePost from "../Pages/ManageCommunity/ManagePost";
 import ManageGroups from "../Pages/ManageGroups/ManageGroups";
-import ManageUsers from "../Pages/ManageUsers/ManageUsers";
+import ManageJobs from "../Pages/ManageJobs/ManageJobs";
+import ManagePost from "../Pages/ManagePost/ManagePost";
 import Profile from "../Pages/Profile/Profile";
-import Reporting from "../Pages/Reporting/Reporting";
 import SubAdmin from "../Pages/SubAdmin/SubAdmin";
-import Support from "../Pages/Support/Support";
+import ManageContact from "../Pages/ManageContact/ManageContact";
+import FAQ from "../Pages/ManageCMS/FAQ/FAQ";
+import AboutUs from "../Pages/ManageCMS/AboutUs/AboutUs";
+import PrivacyPolicy from "../Pages/ManageCMS/PrivacyPolicy/PrivacyPolicy";
+import TermsAndConditions from "../Pages/ManageCMS/TermsAndConditions/TermsAndConditions";
+import Privacy from "../Pages/ManageCMS/Privacy/Privacy";
+import MyProfile from "../Pages/MyProfile/MyProfile";
+import Notification from "../Pages/Notification/Notification";
+import AgencyMaster from "../Pages/MasterModule/AgencyMaster/AgencyMaster";
+import TemplateMaster from "../Pages/MasterModule/TemplateMaster/TemplateMaster";
+import JobType from "../Pages/MasterModule/JobType/JobType";
+import WorkspaceMode from "../Pages/MasterModule/WorkspaceMode/WorkspaceMode";
+import Country from "../Pages/MasterModule/Country/Country";
+import JobStatus from "../Pages/MasterModule/JobStatus/JobStatus";
+import RegisterUsers from "../Pages/ManageUsers/RegisterUsers/RegisterUsers";
+import DeactivatedAccounts from "../Pages/ManageUsers/DeactivatedAccounts/DeactivatedAccounts";
+import { Spinner } from "../components/Sipnner/Spinner";
+
 export const RouteLink = [
     { path: "/", Component: Dashboard },
-    { path: "/manage-user", Component: ManageUsers },
-    { path: "/manage-groups", Component: ManageGroups },
-    { path: "/manage-community", Component: ManageCommunity},
-    { path: "/manage-post", Component: ManagePost},
-    { path: "/support", Component: Support},
+    { path: "/dashboard", Component: Dashboard },
+    { path: "/register-users", Component: RegisterUsers },
+    { path: "/deactivated-accounts", Component: DeactivatedAccounts },
+    { path: "/manage-post", Component: ManagePost },
     { path: "/sub-admin", Component: SubAdmin},
-    { path: "/reporting", Component: Reporting},
-    { path: "/cms", Component: CMS},
-    { path: "/manage-notification", Component: CMS},
+    { path: "/manage-jobs", Component: ManageJobs},
+    { path: "/manage-groups", Component: ManageGroups },
+    { path: "/manage-contact", Component: ManageContact},
+    { path: "/faq", Component: FAQ},
+    { path: "/about-us", Component: AboutUs},
+    { path: "/privacy-policy", Component: PrivacyPolicy},
+    { path: "/terms-conditions", Component: TermsAndConditions},
+    { path: "/privacy", Component: Privacy},
+    { path: "/my-profile", Component: MyProfile},
+    { path: "/manage-notification", Component: Notification},
     { path: "/profile", Component: Profile},
+    { path: "/agency-master", Component: AgencyMaster},
+    { path: "/template-master", Component: TemplateMaster},
+    { path: "/job-type", Component: JobType},
+    { path: "/workspace-mode", Component: WorkspaceMode},
+    { path: "/country", Component: Country},
+    { path: "/job-status", Component: JobStatus},
+    // { path: "/job-status", Component: Spinner},
+
 ]

src/Types/aboutUsType.tsx

@@ -0,0 +1,22 @@
+// First define your interface
+// export interface AboutUsResponse {
+//     data: {
+//         content: string;
+//         // other fields...
+//     }[];
+// }
+
+
+export interface AboutUsContent {
+    id: number;
+    language_master_xid: number;
+    content: string;
+    is_active: boolean;
+}
+
+export interface AboutUsResponse {
+    status: "success" | "error"; // Assuming it can be "success" or "error"
+    status_code: number;
+    message: string;
+    data: AboutUsContent[];
+}

src/Types/privacyPolicyTypes.tsx

@@ -0,0 +1,13 @@
+export interface PrivacyPolicyContent {
+  id: number;
+  language_master_xid: number;
+  content: string;
+  is_active: boolean;
+}
+
+export interface PrivacyPolicyResponse {
+  status: "success" | "error"; // Assuming it can be "success" or "error"
+  status_code: number;
+  message: string;
+  data: PrivacyPolicyContent[];
+}

src/components/ActionIcons/Edit.tsx

@@ -0,0 +1,22 @@
+import { Icon } from '@chakra-ui/react'
+import { TbEdit } from 'react-icons/tb'
+import { Tooltip } from '../ui/tooltip'
+
+const Edit = () => {
+  return (
+    <Tooltip content='Edit' >
+    <Icon
+            cursor={"pointer"}
+            p={0.5}
+            _hover={{ bg: "#00000015" }}
+            rounded={"md"}
+            boxSize={5}
+            // color={iconColor && iconColor}
+          >
+            <TbEdit />
+          </Icon>
+        </Tooltip>
+  )
+}
+
+export default Edit

src/components/AlertDailog.tsx

@@ -0,0 +1,127 @@
+import React from "react";
+
+import { DialogBody, HStack, Icon, Image, Text } from "@chakra-ui/react";
+import { Button } from "./ui/button";
+import {
+  DialogActionTrigger,
+  DialogCloseTrigger,
+  DialogContent,
+  DialogRoot,
+  DialogTrigger,
+} from "./ui/dialog";
+import DeleteICN from '../assets/deleteIcon.png'
+
+interface DeleteConfirmationDialogProps {
+  onConfirm?: () => void;
+  alertText?: string;
+  alertCaption?: string;
+  alertIcon?: any;
+  AltertTiggerIcon?: any;
+  button?: any;
+  iconColor?: string;
+}
+
+const AlertDailog: React.FC<DeleteConfirmationDialogProps> = ({
+  onConfirm,
+  alertText,
+  alertCaption,
+  AltertTiggerIcon,
+  button,
+  iconColor,
+}) => {
+  return (
+    <DialogRoot
+      placement={"center"}
+      motionPreset="slide-in-bottom"
+      size={"xs"}
+      role="alertdialog"
+    >
+      <DialogTrigger asChild>
+        {button ? (
+          button
+        ) : (
+          <Icon
+            cursor={"pointer"}
+            p={0.5}
+            _hover={{ bg: "#00000015" }}
+            rounded={"md"}
+            boxSize={5}
+            color={iconColor && iconColor}
+          >
+            <AltertTiggerIcon />
+          </Icon>
+        )}
+      </DialogTrigger>
+      <DialogContent bgColor="#fff">
+        {/* <DialogHeader display="flex" justifyContent="center"> */}
+        {/* <Image src={alertIcon} h={"39px"} /> */}
+
+        {/* </DialogHeader> */}
+        <DialogBody
+          display="flex"
+          flexDirection="column"
+          alignItems="center"
+          color="black"
+          p={8}
+          gap={2}
+        >
+          {/* {alertIcon && alertIcon} */}
+          <Image  w={'40px'} src={DeleteICN} />
+          <Text
+            mt={3}
+            fontWeight={600}
+            fontSize="sm"
+            color="#000000"
+            textAlign="center"
+            as={"span"}
+          >
+            {alertText}
+          </Text>
+          <Text
+            as={"span"}
+            fontSize="sm"
+            style={{ textAlign: "center", color: "#000000CC", width: "100%" }}
+          >
+            {" "}
+            {alertCaption}
+          </Text>
+          <HStack mt={4} w={"100%"}>
+            <DialogActionTrigger asChild>
+              <Button
+                width="50%"
+                color="black"
+                _hover={{ bgColor: "white" }}
+                variant="outline"
+                borderRadius="sm"
+                border="1px solid black"
+                size={"xs"}
+              >
+                No
+              </Button>
+            </DialogActionTrigger>
+            <Button
+              borderRadius="sm"
+              width="50%"
+              // bgColor="#007F33"
+              bgColor={'#02A0A0'}
+              color="white"
+              // colorPalette="#007F33"
+              onClick={onConfirm}
+              size={"xs"}
+            >
+              Yes{" "}
+            </Button>
+          </HStack>
+        </DialogBody>
+
+        <DialogCloseTrigger
+          _hover={{ bg: "#00000010" }}
+          color={"#000"}
+          colorPalette={"bg"}
+        />
+      </DialogContent>
+    </DialogRoot>
+  );
+};
+
+export default AlertDailog;

src/components/Charts/BarChart.tsx

@@ -0,0 +1,49 @@
+import React from "react";
+import { Bar } from "react-chartjs-2";
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  BarElement,
+  Title,
+  Tooltip,
+  Legend,
+} from "chart.js";
+import { BiBorderRadius } from "react-icons/bi";
+
+// ✅ Register the required components
+ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend);
+
+const BarChart = () => {
+  // 📊 Chart Data
+  const data = {
+    labels: ["Jan", "Jan", "Jan", "Jan", "Jan","Jan", "Jan", "Jan"],
+    datasets: [
+      {
+        label: "Sales ($)",
+        data: [1, 2, 3, 5, 4,6,5,8],
+        backgroundColor: "#6976EB", // Light blue color
+        borderColor: "#6976EB",
+        borderWidth: 1,
+        borderRadius:4
+      },
+    ],
+  };
+
+  // ⚙️ Chart Options
+  const options = {
+    responsive: true,
+    plugins: {
+      legend: { display: false },
+      title: { display: false, text: "Monthly Sales Data" },
+    },
+  };
+
+  return (
+    <div>
+      <Bar data={data} options={options} />
+    </div>
+  );
+};
+
+export default BarChart;

src/components/Charts/CircularProgress.tsx

@@ -0,0 +1,51 @@
+import { Box, Text } from "@chakra-ui/react";
+import React, { useEffect, useState } from "react";
+
+const CircularProgress: React.FC<{ value: number; max: number }> = ({ value, max }) => {
+  const totalDots = 60; // Total number of dots in the circle
+  const filledDots = Math.round((value / max) * totalDots); // Number of filled dots
+
+  return (
+    <Box position={'relative'}>
+      <svg width="200" height="100%" viewBox="0 0 100 100">
+        {Array.from({ length: totalDots }).map((_, i) => {
+          const angle = (i / totalDots) * 360;
+          const x = 50 + 40 * Math.cos((angle * Math.PI) / 180);
+          const y = 50 + 40 * Math.sin((angle * Math.PI) / 180);
+
+          return (
+            <circle
+              key={i}
+              cx={x}
+              cy={y}
+              r="1"
+              fill={i < filledDots ? "#2563eb" : ""} // Blue for filled, Gray for empty
+              opacity={i < filledDots ? 1 : 0.1}
+            />
+          );
+        })}
+      </svg>
+      <Text position={'absolute'} left={'42%'} top={'44%'} fontSize={'md'} fontWeight={500}>{value}</Text>
+    </Box>
+  );
+};
+
+// Usage Example with Animation
+const CircularApp: React.FC = () => {
+  const [progress, setProgress] = useState(0);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setProgress((prev) => (prev < 350 ? prev + 20 : 350));
+    }, 300);
+    return () => clearInterval(interval);
+  }, []);
+
+  return (
+    <Box display={'flex'} justifyContent={'center'} alignItems={'center'} h={'90%'}>
+      <CircularProgress value={progress} max={450} />
+    </Box>
+  );
+};
+
+export default CircularApp;

src/components/Charts/SemiDoughnutChart.tsx

@@ -0,0 +1,64 @@
+import React from "react";
+import { Doughnut } from "react-chartjs-2";
+import {
+  Chart as ChartJS,
+  ArcElement,
+  Tooltip,
+  Legend,
+} from "chart.js";
+import { FaUser } from "react-icons/fa";
+
+// ✅ Register required components
+ChartJS.register(ArcElement, Tooltip, Legend);
+
+const SemiDoughnutChart = () => {
+  // 📊 Chart Data
+  const data = {
+    labels: ["Recruiter", "Customer"],
+    datasets: [
+      {
+        data: [2554, 2800], // Values
+        backgroundColor: ["#E0E0E0", "#3D5AFE"], // Grey and Blue
+        borderWidth: 0, // No border
+        cutout: "90%", // Makes it a doughnut shape
+        circumference: 270, // Semi-circle
+        rotation: 225, // Starts from the top
+        
+      },
+    ],
+  };
+
+  // ⚙️ Chart Options
+  const options = {
+    responsive: true,
+    maintainAspectRatio: false,
+    plugins: {
+      legend: { display: false }, // Hide legend
+      tooltip: { enabled: true },
+    },
+  };
+
+  return (
+    <div style={{ position: "relative" }}>
+      <Doughnut data={data} options={options} />
+      <div
+        style={{
+          position: "absolute",
+          top: "55%",
+          left: "50%",
+          transform: "translate(-50%, -50%)",
+          fontSize: "20px",
+          fontWeight: "bold",
+          color: "#3D5AFE",
+          backgroundColor:'#ECEAF8',
+          padding:'15px',
+          borderRadius:'50%'
+        }}
+      >
+        <FaUser />
+      </div>
+    </div>
+  );
+};
+
+export default SemiDoughnutChart;

src/components/DataTable.tsx

@@ -0,0 +1,130 @@
+import { useState } from "react";
+import { HStack, Stack, Table } from "@chakra-ui/react";
+import { PaginationItems, PaginationNextTrigger, PaginationPrevTrigger, PaginationRoot } from "./ui/pagination";
+// import {
+//   PaginationItems,
+//   PaginationNextTrigger,
+//   PaginationPrevTrigger,
+//   PaginationRoot,
+// } from "./ui/pagination";
+
+interface TableProps {
+  tableHeadRow: string[];
+  data: Record<string, any>[];
+  sortableColumns?: string[]; // Specify which columns are sortable
+}
+
+const DataTable: React.FC<TableProps> = ({
+  tableHeadRow,
+  data,
+  sortableColumns = [],
+}) => {
+  const [sortedData, setSortedData] = useState(data);
+  const [sortConfig, setSortConfig] = useState<{
+    key: string;
+    direction: "asc" | "desc";
+  } | null>(null);
+
+  const handleSort = (column: string) => {
+    if (!sortableColumns.includes(column)) return;
+
+    let direction: "asc" | "desc" = "asc";
+    if (
+      sortConfig &&
+      sortConfig.key === column &&
+      sortConfig.direction === "asc"
+    ) {
+      direction = "desc";
+    }
+
+    const sortedArray = [...sortedData].sort((a, b) => {
+      if (a[column] < b[column]) return direction === "asc" ? -1 : 1;
+      if (a[column] > b[column]) return direction === "asc" ? 1 : -1;
+      return 0;
+    });
+
+    setSortedData(sortedArray);
+    setSortConfig({ key: column, direction });
+  };
+
+  return (
+    <Stack mt={0} color={"#000000CC"}>
+      <Table.ScrollArea mb={3}>
+        <Table.Root size="sm" variant={"line"} stickyHeader>
+          <Table.Header>
+            <Table.Row bg={"#02A0A0"}>
+              {tableHeadRow.map((item, index) => (
+                <Table.ColumnHeader
+                  color="white"
+                  fontSize={"xs"}
+                  fontWeight={600}
+                  px={4}
+                  p={3}
+                  textAlign={
+                    index === tableHeadRow.length - 1 ? "center" : "left"
+                  }
+                  key={index}
+                  border={"none"}
+                  onClick={() => handleSort(item)}
+                  cursor={
+                    sortableColumns.includes(item) ? "pointer" : "default"
+                  }
+                  _hover={
+                    sortableColumns.includes(item)
+                      ? { textDecoration: "underline" }
+                      : {}
+                  }
+                >
+                  {item}
+                  {sortableColumns.includes(item) &&
+                    sortConfig?.key === item && (
+                      <span style={{ marginLeft: "4px" }}>
+                        {sortConfig.direction === "asc" ? "\u25B2" : "\u25BC"}
+                      </span>
+                    )}
+                </Table.ColumnHeader>
+              ))}
+            </Table.Row>
+          </Table.Header>
+          <Table.Body>
+            {sortedData.map((item: any, index) => (
+              <Table.Row
+                key={index}
+                bg={index % 2 === 0 ? "#fff" : "#007F3310"}
+              >
+                {tableHeadRow.map((heading, colIndex) => (
+                  <Table.Cell
+                    // className="oxygen"
+                    px={4}
+                    p={2}
+                    key={`${index}-${colIndex}`}
+                    fontSize={"xs"}
+                    fontWeight={500}
+                    border={"none"}
+                  >
+                    {item[heading]}
+                  </Table.Cell>
+                ))}
+              </Table.Row>
+            ))}
+          </Table.Body>
+        </Table.Root>
+      </Table.ScrollArea>
+      <PaginationRoot
+        size={"xs"}
+        count={20}
+        pageSize={2}
+        defaultPage={1}
+        mb={4}
+      >
+        <HStack justifyContent="flex-end">
+          <PaginationPrevTrigger />
+          <PaginationItems />
+          <PaginationNextTrigger />
+        </HStack>
+      </PaginationRoot>
+    </Stack>
+  );
+};
+
+export default DataTable;