worked on the about

.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,7 @@ define(['./workbox-54d0af47'], (function (workbox) { 'use strict';
     "revision": "3ca0b8505b4bec776b69afdba2768812"
   }, {
     "url": "index.html",
-    "revision": "0.4goaulr6o2o"
+    "revision": "0.ch9snbb3598"
   }], {});
   workbox.cleanupOutdatedCaches();
   workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), {

package.json

@@ -13,18 +13,26 @@
     "@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-quill": "^2.0.0",
+    "react-redux": "^9.2.0",
     "react-router-dom": "^7.1.1",
     "vite-plugin-pwa": "^0.21.1"
   },
   "devDependencies": {
     "@chakra-ui/cli": "^3.2.3",
     "@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,44 +1,50 @@
-import { useContext } from "react";
-import { Route, BrowserRouter as Router, Routes } from "react-router-dom";
+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";
-import LoginOtp from "./Pages/OnBoarding/LoginOtp";
-import CreatePass from "./Pages/OnBoarding/CreatePass";
 
-function App() {
-  const context = useContext(GlobalStateContext);
-  if (!context)
-    throw new Error("App must be used within a GlobalStateProvider");
-  const { isAuthenticate } = context;
+function App() {   
+  const context = useContext(GlobalStateContext); 
+  if (!context) throw new Error("App must be used within a GlobalStateProvider"); 
+  
+  const { isAuthenticate, setIsAuthenticate } = context; 
 
-  return (
-    <Router>
-      <Routes>
-        <Route path="/login" element={<Login />} />
-        <Route path="/login/login-otp" element={<LoginOtp />} />
-        <Route path="/login/create-password" element={<CreatePass/>}/>
-        <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 />} />
-      </Routes>
-    </Router>
-  );
-}
+  useEffect(() => {
+    const token = localStorage.getItem("token");
+    setIsAuthenticate(!!token); // Converts token to boolean
+  }, [setIsAuthenticate]);
+
+  console.log("Auth Status:", isAuthenticate);
+
+  return ( 
+    <Router> 
+      <Routes> 
+        {/* 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> 
+  ); 
+} 
 
 export default App;

src/Constants/Constants.tsx

@@ -1,19 +0,0 @@
-export const getTitle = (location: string): string => {
-    const titles: { [key: string]: string } = {
-      '/': 'Dashboard',
-      '/manage-user/register-user': 'Manage User',
-      '/manage-user/active-user': 'Manage User',
-      '/manage-post': 'Manage Post',
-      '/manage-sub-admin': 'Manage Sub Admin',
-      '/manage-jobs': 'Manage Jobs',
-      '/manage-contact-us': 'Manage Contact Us',
-      '/manage-cms/faq': 'Manage CMS',
-      '/manage-cms/about-us': 'Manage CMS',
-      '/manage-cms/privacy-policy': 'Manage CMS',
-      '/manage-cms/terms-and-condition': 'Manage CMS',
-      '/profile': 'My Profile',
-    };
-  
-    return titles[location] || 'Page Not Found';
-  };
-  

src/Contexts/GlobalStateContext.tsx

@@ -2,11 +2,12 @@
 import { createContext, Dispatch, SetStateAction } from 'react';
 
 // Define the shape of your context value
-type GlobalStateContextType = {
+export interface GlobalStateContextType {
   isAuthenticate: boolean;
   setIsAuthenticate: Dispatch<SetStateAction<boolean>>;
-};
-
+  isBarLoading: boolean;
+  setIsBarLoading: Dispatch<SetStateAction<boolean>>;
+}
 // Create the context with a default value of `undefined`
 const GlobalStateContext = createContext<GlobalStateContextType | undefined>(undefined);
 

src/Contexts/GlobalStateProvider.tsx

@@ -1,14 +1,21 @@
-import  { ReactNode, useState } from 'react';
-import GlobalStateContext from './GlobalStateContext';
+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);
+  const [isBarLoading, setIsBarLoading] = useState<boolean>(false); // ✅ Fixed typo
+
+ 
 
   return (
-    <GlobalStateContext.Provider value={{ isAuthenticate, setIsAuthenticate }}>
+    <GlobalStateContext.Provider value={{
+      isAuthenticate,
+      setIsAuthenticate,
+      isBarLoading,
+      setIsBarLoading, // ✅ Fixed typo
+    }}>
       {children}
     </GlobalStateContext.Provider>
   );

src/Layouts/DefaultLayout.tsx

@@ -1,206 +1,91 @@
 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 logo from '../assets/logo.svg';
+import { AccordionItem, AccordionItemContent, AccordionItemTrigger, AccordionRoot } from "../components/ui/accordion";
 import { Avatar } from "../components/ui/avatar";
-import { getTitle } from "../Constants/Constants";
+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 navigate = useNavigate();
-  const location = useLocation();
-  const headerTitle = getTitle(location?.pathname);
-  console.log(location);
+
+  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, isBarLoading } = 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}
-      pt={2}
-      w="100%"
-      h="100vh"
-    >
-      <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={isBarLoading}  />
+    <HStack overflow={'hidden'} position={'relative'} bg="#F2F2F2" backgroundPosition="center" backgroundRepeat="repeat" backgroundSize="cover" gap={0} w="100%" h="calc(100% - 4px)"  p={0}>
+      
+      <VStack pt={0} zIndex={1} gap={0} rounded={'lg'} h="100%" w="15%" overflow={'auto'} >
+        <HStack w={'100%'} p={3} h={'7%'} justifyContent={'center'}>
           <Image w={55} src={logo} />
         </HStack>
-        <VStack  w={"100%"} p={3}>
-          {nav?.map(({ title, path, Icon, type, children, initPath }, index) =>
-            type === "single" ? (
-              <NavLink
-                className="link"
-                key={index}
-                to={path}
-                style={{
-                  cursor: "pointer",
-                  borderRadius: "8px",
-                  padding: "6px",
-                  width: "100%",
-                  display: "flex",
-                  alignItems: "center",
-                  gap: 6,
-                  border: "1px solid #ffffff",
-                  backgroundColor: "#fff",
-                  color: "#000",
-                  boxShadow: "rgba(99, 99, 99, 0.2) 0px 2px 8px 0px",
-                }}
-              >
-                <Icon
-                  style={{
-                    fontSize: "20px",
-                    backgroundColor: "#fff",
-                    width: 28,
-                    color: location?.pathname === path ? "#02A0A0" : "#000",
-                    padding: 2,
-                    borderRadius: "50%",
-                  }}
-                />{" "}
-                <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"}
-                  rounded={"lg"}
-                  borderBottom={"none"}
-                  p={0}
-                  key={index}
-                  value={title}
-                >
-                  <AccordionItemTrigger
-                    className={`link  ${location?.pathname.startsWith(initPath ?? "") && "active"}`}
-                    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",
-                      fontWeight: "normal",
-                    }}
-                  >
-                    {" "}
-                    <Text
-                      fontSize={"xs"}
-                      gap={1}
-                      display={"flex"}
-                      alignItems={"center"}
-                    >
-                      <Icon
-                        style={{
-                          fontSize: "20px",
-                          backgroundColor: "#fff",
-                          width: 23,
-                          color: location?.pathname.startsWith(initPath ?? "")
-                            ? "#02A0A0"
-                            : "#000",
-                          padding: 2,
-                          borderRadius: "50%",
-                        }}
-                      />
-                      {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: "16px" }} />{" "}
-                      <Text fontSize={"xs"} w={"100%"}>
-                        {title}
-                      </Text>
-                    </AccordionItemContent>
-                  ))}
-                </AccordionItem>
-              </AccordionRoot>
-            )
-          )}
+        <VStack  w={'100%'} p={2} pt={0}>
+          {nav?.map(({ title, path, Icon, type, children, initPath }, index) => type === 'single' ?
+            <NavLink  className="link" key={index} to={path} style={{ cursor: 'pointer', borderRadius: '8px', padding: '6px', width: '100%', display: 'flex', alignItems: 'center', gap: 6, border: '1px solid #ffffff', backgroundColor:'#fff', color:'#000', boxShadow:'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px'}} ><Icon style={{ fontSize: '20px' }} /> <Text fontSize={'xs'} w={'100%'}>{title}</Text></NavLink> :
+            <AccordionRoot border={location?.pathname.startsWith(initPath ?? path) ? "1px solid #02A0A0" : '1px' } key={index} bg={'#fff'} rounded={'lg'} collapsible>
+              <AccordionItem rounded={'lg'} bg={'#fff'} boxShadow={'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px'} borderBottom={'none'} p={0} key={index} value={title}>
+                <AccordionItemTrigger className="Oxygen" color={'#fff'}   onClick={() => navigate(path)} gap={0} style={{ cursor: 'pointer', borderRadius: '8px', padding: '5px', width: '100%', display: 'flex', alignItems: 'center', border: '1px solid #ffffff', backgroundColor:'#fff',color:'#000',  fontSize: '14px',  }}> <Text fontSize={'xs'} gap={1} display={'flex'} alignItems={'center'} ><Icon style={{ fontSize: '20px' }} />{title}</Text></AccordionItemTrigger>
+                {children?.map(({ title, path, Icon }, index) => <AccordionItemContent className={`linkChild Oxygen ${location?.pathname === path && 'activeChild'}`} key={index} onClick={()=>navigate(path)} style={{ marginTop: 6, cursor: 'pointer', borderRadius: '8px', padding: '6px', width: '100%', display: 'flex', alignItems: 'center', gap: 6, border: '1px solid #ffffff', backgroundColor:'#fff',color:'#919198' }} ><Icon style={{ fontSize: '20px' }} /> <Text fontSize={'xs'} w={'100%'}>{title}</Text></AccordionItemContent>)}
+              </AccordionItem>
+            </AccordionRoot>)}
+        </VStack>
+        <VStack w={'100%'} p={3} pt={0}>
+        <HStack onClick={handleLogout} className="link"  style={{ cursor: 'pointer', borderRadius: '8px', padding: '6px', width: '100%', display: 'flex', alignItems: 'center', gap: 6, border: '1px solid #ffffff', backgroundColor:'#fff', color:'#000', boxShadow:'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px'}} ><LuLogOut style={{ fontSize: '20px' }} /> <Text fontSize={'xs'} w={'100%'}>Logout</Text></HStack>
         </VStack>
       </VStack>
-      <VStack overflowY="hidden" gap={0} h="100%" w="85%">
-        <HStack
-          h={"6.5%"}
-          w={"100%"}
-          justifyContent={"space-between"}
-          alignItems={"flex-end"}
-          pe={3}
-          gap={6}
-          p={4}
-        >
-          <Text
-            mb={1}
-            fontSize={"sm"}
-            ms={1}
-            fontWeight={600}
-            color={"#013e3e"}
-          >
-            {headerTitle}
-          </Text>
-          <HStack
-            // bg={"#fff"}
-            h={"100%"}
-            justifyContent={"center"}
-            p={2}
-            rounded={"md"}
-            // boxShadow={"rgba(99, 99, 99, 0.2) 0px 2px 8px 0px"}
-          >
-            <RiNotificationLine
-              color="#013e3e"
-              cursor={"pointer"}
-              style={{ fontSize: "22px" }}
-            />
-            <HStack cursor={"pointer"} onClick={() => navigate("/profile")}>
-              <Avatar
-                size={"sm"}
-                src="https://i.pinimg.com/736x/d6/cd/0f/d6cd0ffd4634b0763d3958a7325ce26e.jpg"
-              />
-              <VStack color={"#013e3e"} gap={0} alignItems={"flex-start"}>
-                <Text fontSize={"sm"} fontWeight={"bold"}>
-                  Ritesh Pandey
-                </Text>
-                <Text fontSize={"xs"}>ritesh.pandey@wdimails.com</Text>
-              </VStack>
-            </HStack>
+      <VStack  gap={0} h="100%" w="85%" >
+     
+        <HStack h={'11%'} w={'100%'} justifyContent={'flex-end'} pe={3} gap={6}>
+        
+          <NavLink to={'/manage-notification'}><RiNotificationLine color="#013e3e" cursor={'pointer'} style={{ fontSize: '22px' }} /></NavLink>
+          <HStack cursor={'pointer'} onClick={() => navigate('/profile')} >
+            <Avatar size={'sm'} src="https://i.pinimg.com/736x/d6/cd/0f/d6cd0ffd4634b0763d3958a7325ce26e.jpg" />
+            <VStack color={'#013e3e'} gap={0} alignItems={'flex-start'}>
+              <Text fontSize={'sm'} fontWeight={'bold'}>Ritesh Pandey</Text>
+              <Text fontSize={'xs'} >ritesh.pandey@wdimails.com</Text>
+            </VStack>
           </HStack>
         </HStack>
         {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/Dashboard.tsx

@@ -1,11 +1,195 @@
-import MainFrame from "../../components/MainFrame"
+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 = () => {
+  const frameworks = createListCollection({
+    items: [
+      { label: "Today", value: "Today" },
+      { label: "Week", value: "Week" },
+      { label: "Month", value: "Month" },
+      { label: "Year", value: "Year" },
+    ],
+  });
+
+  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>
-      
-    </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>
 
-export default Dashboard
+          <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,18 +1,35 @@
-import { Center, HStack, Image, Input, Text, VStack } from "@chakra-ui/react";
+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 { LuUser } from "react-icons/lu";
+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;
+  password: string;
 }
 
 const Login = () => {
+  const navigate = useNavigate();
+  const dispatch = useDispatch();
   const [isLoading, setIsLoading] = useState<boolean>(false);
   const context = useContext(GlobalStateContext);
   if (!context) {
@@ -25,24 +42,60 @@ const Login = () => {
     formState: { errors },
   } = useForm<FormValues>();
 
-  const onSubmit = handleSubmit((data) => {
+  const onSubmit = handleSubmit(async (data) => {
     setIsLoading(true);
-    if (data?.mobileNumber === 1234567890) {
-      setTimeout(() => {
+    // 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
+
+    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);
+        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);
-      }, 3000); // 3-second delay
-    } else {
-      toaster.create({
-        title: `Invalid Credentials`,
-        type: "error",
-      });
-      setIsLoading(false);
+      }
     }
   });
 
   return (
-    <VStack w={"100%"} h={"100vh"} bg={"#ffffff"}>
+
+    <VStack appearance={'light'} w={"100%"} h={"100vh"} bg={"#ffffff"}>
       <HStack
         boxShadow={"rgba(99, 99, 99, 0.2) 0px 2px 8px 0px"}
         w={"100%"}
@@ -64,14 +117,14 @@ const Login = () => {
           <Image w={250} src={logo} />
         </Center>
 
-        <Center
+        <Box
           as={"form"}
           onSubmit={onSubmit}
           p={{ base: 4, md: 16 }}
           w={{ base: "100%", md: "50%" }}
           h={"100%"}
         >
-          <VStack gap={2} w={"100%"} alignItems={"flex-start"}>
+          <VStack gap={2} w={"100%"}>
             <Text
               w={"100%"}
               textAlign={"center"}
@@ -82,24 +135,39 @@ const Login = () => {
               LOGIN
             </Text>
 
-            <VStack mt={6} gap={4} w={"full"}>
+            <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 cursor="pointer" as={'span'} w={'100%'} fontSize={'xs'} fontWeight={'normal'} color={'#686677'}>Forget password</Text>
+                {/* <Text as={'span'} w={'100%'} fontSize={'xs'} fontWeight={'normal'} color={'#686677'}>Forget password</Text>  */}
+              </Field>
+              <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}
@@ -111,13 +179,13 @@ const Login = () => {
                 color={"#ffffff"}
                 type="submit"
               >
-                Send OTP
+                Login
               </Button>
 
-              <Text>Forgot password</Text>
-            </VStack>
+              <ForgetPassword />
+            </Box>
           </VStack>
-        </Center>
+        </Box>
         <Toaster />
       </HStack>
     </VStack>

src/Pages/ManageCMS/AboutUs/AboutUs.tsx

@@ -1,11 +1,132 @@
-import MainFrame from '../../../components/MainFrame'
+// import { Badge, HStack, Text, VStack } from "@chakra-ui/react";
+// import MainFrame from "../../../components/MainFrame"
+// import { useGetAboutUsQuery } from "../../../Redux/Service/manage.aboutus.service";
+// import { Spinner } from "../../../components/Sipnner/Spinner";
+// import GlobalStateContext from "../../../Contexts/GlobalStateContext";
+// import { useContext, useEffect } from "react";
+// import AboutUsAddModel from "./AboutUsAddModel";
+
+
+
+// const AboutUs = () => {
+
+//   const { data, isLoading, isFetching } = useGetAboutUsQuery();
+
+//   // const content = data?.data
+//   console.log('====================================');
+//   console.log(data);
+//   console.log('====================================');
+
+//   const context = useContext(GlobalStateContext);
+//   if (!context) throw new Error('App must be used within a GlobalStateProvider');
+
+//   const { setIsBarLoading } = context;
+//   useEffect(() => {
+//     setIsBarLoading(isFetching)
+//   }, [data])
+
+//   return (
+//     <MainFrame transperant={true}>
+//       <VStack gap={4} pb={4} pt={0}>
+//         {isLoading || isFetching ?
+//           <Spinner /> : data?.data?.map(({ id, content, about_language }) => <VStack bg={'#fff'}
+//             boxShadow={'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px'} rounded={'lg'} p={3} key={id}>
+//             <HStack
+//               w={"100%"}
+//               justifyContent={"space-between"}
+
+//               py={0}
+//               px={0}
+//             >
+//               <Text as={"span"} fontSize={"sm"} fontWeight={500} color={"#000"}>
+//                 About Us <Badge variant={'surface'} colorPalette="cyan" ms={2} size={'sm'} fontSize={'xs'} px={2}>🎓 {about_language?.language_name}</Badge>
+//               </Text>
+
+//               {/* <AboutUsAddModel /> */}
+//               <AboutUsAddModel/>
+//             </HStack>
+//             <Text
+//               as="p"
+//               fontSize="sm"
+//               fontWeight={400}
+//               color="#1D1D1D"
+//             >
+//               {content}
+//             </Text>
+
+//           </VStack>)}
+//       </VStack>
+//     </MainFrame>
+//   )
+// }
+// export default AboutUs
+
+import { Badge, HStack, Stack, Text, VStack } from "@chakra-ui/react";
+import MainFrame from "../../../components/MainFrame";
+import { useGetAboutUsQuery } from "../../../Redux/Service/manage.aboutus.service";
+import { Spinner } from "../../../components/Sipnner/Spinner";
+import GlobalStateContext from "../../../Contexts/GlobalStateContext";
+import { useContext, useEffect } from "react";
+import AboutUsAddModel from "./AboutUsAddModel";
 
 const AboutUs = () => {
-  return (
-    <MainFrame>
-        
-    </MainFrame>
-  )
-}
+  const { data, isLoading, isFetching } = useGetAboutUsQuery();
 
-export default AboutUs
+  console.log("Fetched About Us Data:", data);
+
+  const context = useContext(GlobalStateContext);
+  if (!context) throw new Error("App must be used within a GlobalStateProvider");
+
+  const { setIsBarLoading } = context;
+  useEffect(() => {
+    setIsBarLoading(isFetching);
+  }, [isFetching, setIsBarLoading]);
+
+  return (
+    <MainFrame transperant={true}>
+      <VStack gap={4} pb={4} pt={0}>
+        <Stack bg={"#fff"} w={"100%"} mt={2} p={4} borderRadius={4}><Text color={"black"} textAlign={"left"} fontWeight={"600"} >             About Us
+        </Text></Stack>
+
+        {isLoading || isFetching ? (
+          <Spinner />
+        ) : (
+          data?.data?.map(({ id, content, about_language }) => (
+            <VStack
+              bg={"#fff"}
+              boxShadow={"rgba(99, 99, 99, 0.2) 0px 2px 8px 0px"}
+              rounded={"lg"}
+              p={3}
+              key={id}
+            >
+
+              <HStack w={"100%"} justifyContent={"space-between"} py={0} px={0}>
+                <Text as={"span"} fontSize={"sm"} fontWeight={500} color={"#000"}>
+                  <Badge
+                    variant={"surface"}
+                    colorPalette="cyan"
+                    ms={2}
+                    size={"sm"}
+                    fontSize={"xs"}
+                    px={2}
+                  >
+                    🎓 {about_language?.language_name}
+                  </Badge>
+                </Text>
+
+                {/* Pass Data to AboutUsAddModel */}
+                <AboutUsAddModel aboutUsData={{ id, content, about_language }} />
+              </HStack>
+              <Text as="p" fontSize="sm" fontWeight={400} color="#1D1D1D">
+                {/* {content} */}
+                <div dangerouslySetInnerHTML={{ __html: content }} />
+              </Text>
+            </VStack>
+          ))
+        )}
+      </VStack>
+    </MainFrame>
+  );
+};
+
+export default AboutUs;

src/Pages/ManageCMS/AboutUs/AboutUsAddModel.tsx

@@ -1,53 +1,142 @@
-import { FaRegEdit } from "react-icons/fa"
-import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../../components/ui/dialog"
-import { Field, Stack, Text, Textarea } from "@chakra-ui/react"
-import { Button } from "../../../components/ui/button"
+import { FaRegEdit } from "react-icons/fa";
+import {
+    DialogBody,
+    DialogCloseTrigger,
+    DialogContent,
+    DialogFooter,
+    DialogHeader,
+    DialogRoot,
+    DialogTitle,
+    DialogTrigger,
+} from "../../../components/ui/dialog";
+import { Field, Stack, Text } from "@chakra-ui/react";
+import { Button } from "../../../components/ui/button";
+import ReactQuill from "react-quill";
+import "react-quill/dist/quill.snow.css"; // Import the styles
+import { useState } from "react";
+import { useUpdateAboutUsMutation } from "../../../Redux/Service/manage.aboutus.service";
+import { useForm, Controller } from "react-hook-form"; // Import React Hook Form
+
+function AboutUsAddModel({ aboutUsData }: { aboutUsData: any }) {
+    const [isOpen, setIsOpen] = useState(false);
+
+    // RTK Query Mutation Hook
+    const [updateAboutUs, { isLoading }] = useUpdateAboutUsMutation();
+
+    // React Hook Form
+    const {
+        control,
+        handleSubmit,
+        reset,
+        setValue,
+    } = useForm({
+        defaultValues: {
+            content: "",
+            languageCode: "",
+        },
+    });
+
+    // Function to handle edit click (pre-fill the editor)
+    const handleEditClick = (data: any) => {
+        setValue("content", data.content); // Pre-fill the content field
+        setValue("languageCode", data.about_language.language_code); // Pre-fill the language code
+        setIsOpen(true); // Open dialog
+    };
+
+    // Function to handle update submission
+    const onSubmit = async (formData: any) => {
+        if (!formData.content.trim()) return; // Prevent empty updates
+
+        try {
+            await updateAboutUs({
+                id: aboutUsData.id,
+                content: formData.content,
+                language_code: formData.languageCode,
+            }).unwrap();
+            setIsOpen(false); // Close dialog on success
+            reset(); // Reset the form
+        } catch (error) {
+            console.error("Update failed:", error);
+        }
+    };
 
-function AboutUsAddModel() {
     return (
-
-        <DialogRoot placement="center">
+        <DialogRoot placement="center" open={isOpen}>
             <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>
-
+                <Button
+                    bgColor="#EEEEEE"
+                    pl={3}
+                    pr={3}
+                    size="xs"
+                    color="#000"
+                    onClick={() => handleEditClick(aboutUsData)} // Set content before opening modal
+                >
+                    <FaRegEdit color="#000" style={{ height: "14px", width: "14px" }} />
+                    <Text color="#000" mt={1}>Edit</Text>
+                </Button>
             </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>
+            <DialogContent bg="#fff" w={{ base: "90%", md: "1200px" }} height="auto" p={3}>
+                <DialogHeader bg="white">
+                    <DialogTitle alignSelf="center" color="black" fontSize="14px">
+                        Edit About Us
+                    </DialogTitle>
                 </DialogHeader>
 
                 <DialogBody bg="white">
-                    <Stack py={3} >
-
+                    <Stack py={3} mb={8}>
                         <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.Label color="black" pt={1} fontSize="12px">
+                                About Us Content
+                            </Field.Label>
+                            {/* Use Controller to integrate ReactQuill with React Hook Form */}
+                            <Controller
+                                name="content"
+                                control={control}
+                                render={({ field }) => (
+                                    <ReactQuill
+                                        value={field.value}
+                                        onChange={field.onChange}
+                                        placeholder="Enter About Us content"
+                                        modules={{
+                                            toolbar: [
+                                                [{ 'header': [1, 2, false] }],
+                                                ['bold', 'italic', 'underline', 'strike'],
+                                                ['link', 'image'],
+                                                [{ 'list': 'ordered' }, { 'list': 'bullet' }],
+                                                ['clean']
+                                            ],
+                                        }}
+                                        formats={[
+                                            'header',
+                                            'bold', 'italic', 'underline', 'strike',
+                                            'list', 'bullet',
+                                            'link', 'image'
+                                        ]}
+                                        style={{ color: "black", border: "none", fontSize: "12px", height: "170px", width: "100%" }}
+                                    />
+                                )}
+                            />
                         </Field.Root>
                     </Stack>
                 </DialogBody>
-                <DialogFooter display="flex" justifyContent="center" pt={"2"}>
-                    <Button w="100%" bg="#02A0A0" color={"#fff"}>
+
+                <DialogFooter display="flex" justifyContent="center" pt="2">
+                    <Button
+                        w="100%"
+                        bg="#02A0A0"
+                        color="#fff"
+                        // isLoading={isLoading}
+                        onClick={handleSubmit(onSubmit)} // Use handleSubmit to trigger form submission
+                    >
                         Save
                     </Button>
                 </DialogFooter>
 
-                <DialogCloseTrigger color="black" />
+                <DialogCloseTrigger color="black" onClick={() => setIsOpen(false)} />
             </DialogContent>
-        </DialogRoot >
-
-    )
+        </DialogRoot>
+    );
 }
 
-export default AboutUsAddModel
+export default AboutUsAddModel;

src/Pages/ManageCMS/FAQ/EditDetails.tsx

@@ -1,56 +1,167 @@
-import { Button } from "../../../components/ui/button"
-import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../../components/ui/dialog"
-import { Field, Grid, Input, Stack, Text, Textarea } from "@chakra-ui/react"
-import { FaRegEdit } from "react-icons/fa";
-function EditDetails() {
-    return (
+// import { Button } from "../../../components/ui/button";
+// import {
+//   DialogBody,
+//   DialogCloseTrigger,
+//   DialogContent,
+//   DialogFooter,
+//   DialogHeader,
+//   DialogRoot,
+//   DialogTitle,
+//   DialogTrigger,
+// } from "../../../components/ui/dialog";
+// import { Field, Input, Stack, Textarea } from "@chakra-ui/react";
+// import Edit from "../../../components/ActionIcons/Edit";
+// function EditDetails() {
+//   return (
+//     <DialogRoot placement="center">
+//       <DialogTrigger asChild>
+//         {/*  */}
+//         <Button bg={"#fff"} color={"black"}><Edit /></Button>
 
-        <DialogRoot placement="center">
-            <DialogTrigger asChild>
-                <Button bg={"transparent"} size="sm">
-                    <FaRegEdit style={{ cursor: "pointer", }} color="#000" />
-                </Button>
-                {/* <Button><FaRegEdit /></Button> */}
+//       </DialogTrigger>
 
-            </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>
 
-            <DialogContent
-                bg={"#fff"}
-                // w={{ lg: "60%", md: "230px" }}
-                w={{ base: '90%', md: '400px' }}
-                height={"auto"}
+//         <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"
+//               />
 
-                p={3} // Reduced padding
-                bgSize={'md'}
-            >
-                <DialogHeader bg="white" >
-                    <DialogTitle alignSelf="center" color="black" fontSize="14px">Edit Details</DialogTitle>
-                </DialogHeader>
+//               <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>
 
-                <DialogBody bg="white">
-                    <Stack py={3} >
+//         <DialogCloseTrigger color="black" />
+//       </DialogContent>
+//     </DialogRoot>
+//   );
+// }
 
-                        <Field.Root>
-                            <Field.Label color="black" pt={1} fontSize="12px">Questions</Field.Label>
-                            <Input placeholder="Questions" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
+// export default EditDetails;
 
-                            <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} />
+import { Button } from "../../../components/ui/button";
+import {
+  DialogBody,
+  DialogCloseTrigger,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogRoot,
+  DialogTitle,
+  DialogTrigger,
+} from "../../../components/ui/dialog";
+import { Field, Input, Stack, Textarea } from "@chakra-ui/react";
+import Edit from "../../../components/ActionIcons/Edit";
 
-                        </Field.Root>
-                    </Stack>
-                </DialogBody>
-                <DialogFooter display="flex" justifyContent="center" pt={"2"}>
-                    <Button w="100%" bg="#02A0A0" color={"#fff"}>
-                        Save
-                    </Button>
-                </DialogFooter>
+function EditDetails(rowData: any) {
 
-                <DialogCloseTrigger color="black" />
-            </DialogContent>
-        </DialogRoot >
+  return (
+    <DialogRoot placement="center">
+      <DialogTrigger asChild>
 
-    )
+
+
+        <Button bg="transparent" color={"black"} h={"18px"}>    <Edit /></Button>
+      </DialogTrigger>
+
+      <DialogContent
+        bg={"#fff"}
+        w={{ base: "90%", md: "400px" }}
+        height={"auto"}
+        p={3}
+      >
+        <DialogHeader bg="white">
+          <DialogTitle alignSelf="center" color="black" fontSize="14px">
+            Edit Details (ID: {rowData?.id})
+          </DialogTitle>
+        </DialogHeader>
+
+        <DialogBody bg="white">
+          <Stack py={3}>
+            <Field.Root>
+              <Field.Label color="black" pt={1} fontSize="12px">
+                Question
+              </Field.Label>
+              <Input
+                placeholder="Question"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+                defaultValue={rowData?.question} // Pre-fill question
+              />
+
+              <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}
+                defaultValue={rowData?.answer} // Pre-fill answer
+              />
+            </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
+export default EditDetails;

src/Pages/ManageCMS/FAQ/FAQ.tsx

@@ -1,13 +1,13 @@
-import { Box, Button, HStack, Image, Input, Text } from "@chakra-ui/react";
+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";
+import Delete from "../../../components/ActionIcons/Delete";
 
 
 // table data
@@ -27,11 +27,13 @@ const managepost: any[] = [
     "Action": (
       <HStack justifyContent="center">
         <Box>
-          <Switch colorPalette={'teal'} size={"xs"}/>
+          <Switch colorPalette={'teal'} size={"xs"} />
         </Box>
+        {/* <EditDetails /> */}
         <EditDetails />
+
         <AlertDailog
-          AltertTiggerIcon={RiDeleteBin5Line}
+          AltertTiggerIcon={() => <Delete />}
           alertText="Delete Users"
           alertIcon={<Image src={"DeleteIcon"} h={"39px"} />}
           alertCaption="are you sure you want to delete ?"
@@ -57,11 +59,11 @@ const FAQ = () => {
           px={3}
         >
           <Text as={"span"} fontSize={"sm"} fontWeight={500} color={"#000"}>
-           FAQs
+            FAQs
           </Text>
 
           <HStack >
-            <InputGroup 
+            <InputGroup
               startElement={
                 <LuSearch fontSize={"xs"} style={{ position: 'relative', left: '10px' }} />
               }
@@ -74,7 +76,7 @@ const FAQ = () => {
                 colorPalette={"blue"}
                 _focus={{ border: "1px solid #02A0A0" }}
                 rounded={"md"}
-                size={"2xs"}
+                size={"xs"}
                 fontSize={"2sm"}
                 placeholder="Search..."
                 bgColor={'#EEEEEE'}
@@ -90,7 +92,7 @@ const FAQ = () => {
           tableHeadRow={tableHeadRow}
           data={managepost}
         />
-      </Box>       
+      </Box>
     </MainFrame>
   )
 }

src/Pages/ManageCMS/FAQ/FaqAddModel.tsx

@@ -1,57 +1,84 @@
-import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../../components/ui/dialog"
-import { Field, Input, Stack, Text, Textarea } from "@chakra-ui/react"
-import { IoMdAdd } from "react-icons/io"
-import { Button } from "../../../components/ui/button"
+import {
+  DialogBody,
+  DialogCloseTrigger,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogRoot,
+  DialogTitle,
+  DialogTrigger,
+} from "../../../components/ui/dialog";
+import { Field, Input, Stack, Text, Textarea } from "@chakra-ui/react";
+import { IoMdAdd } from "react-icons/io";
+import { Button } from "../../../components/ui/button";
 
 function FaqAddModel() {
-    return (
+  return (
+    <DialogRoot placement="center">
+      <DialogTrigger asChild>
+        <Button px={5} size={"xs"} bg={"#02A0A0"}>
+          <IoMdAdd /> <Text>Add</Text>
+        </Button>
+      </DialogTrigger>
 
-        <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>
+      <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>
 
-            </DialogTrigger>
+        <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"
+                _focusVisible={{outline:'none'}}
+                size={'sm'}
+              />
 
-            <DialogContent
-                bg={"#fff"}
-                // w={{ lg: "60%", md: "230px" }}
-                w={{ base: '90%', md: '400px' }}
-                height={"auto"}
+              <Field.Label color="black" pt={1} fontSize="12px">
+                Answer
+              </Field.Label>
+              <Textarea
+                placeholder="Answer"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                p={2}
+                fontSize="12px"
+                height="120px"
+                resize={'none'}
+                _focusVisible={{outline:'none'}}
+              />
+            </Field.Root>
+          </Stack>
+        </DialogBody>
+        <DialogFooter display="flex" justifyContent="center" pt={"2"}>
+          <Button w="100%" bg="#02A0A0" color={"#fff"}>
+            Save
+          </Button>
+        </DialogFooter>
 
-                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 >
-
-    )
+        <DialogCloseTrigger color="black" />
+      </DialogContent>
+    </DialogRoot>
+  );
 }
 
-export default FaqAddModel
+export default FaqAddModel;

src/Pages/ManageCMS/FAQ/FreqAskQuestion.tsx

@@ -1,12 +0,0 @@
-import { Text } from '@chakra-ui/react'
-import MainFrame from '../../../components/MainFrame'
-
-const FreqAskQuestion = () => {
-  return (
-    <MainFrame>
-        <Text>hello</Text>
-    </MainFrame>
-  )
-}
-
-export default FreqAskQuestion

src/Pages/ManageCMS/PrivacyPolicy/PrivacyPolicy.tsx

@@ -1,11 +1,55 @@
-import MainFrame from '../../../components/MainFrame'
+import { Badge, HStack, Text, VStack } from "@chakra-ui/react";
+import { useGetPrivacyPolicyQuery } from "../../../Redux/Service/privacy.policy.service";
+import MainFrame from "../../../components/MainFrame";
+import { Spinner } from "../../../components/Sipnner/Spinner";
+import PrivacyPolicyAddModel from "./PrivacyPolicyAddModel";
+import GlobalStateContext from "../../../Contexts/GlobalStateContext";
+import { useContext, useEffect } from "react";
+
 
 const PrivacyPolicy = () => {
-  return (
-    <MainFrame>
-        
-    </MainFrame>
-  )
-}
+  const { data, isLoading, isFetching } = useGetPrivacyPolicyQuery();
 
-export default PrivacyPolicy
+  const context = useContext(GlobalStateContext);
+  if (!context) throw new Error('App must be used within a GlobalStateProvider');
+
+  const { setIsBarLoading } = context;
+  useEffect(() => {
+    setIsBarLoading(isFetching)
+  }, [data])
+
+  return (
+    <MainFrame transperant={true}>
+      <VStack gap={4} pb={4} pt={0}>
+        {isLoading || isFetching ?
+          <Spinner /> : data?.data?.map(({ id, content, privacy_language }) => <VStack bg={'#fff'}
+            boxShadow={'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px'} rounded={'lg'} p={3} key={id}>
+            <HStack
+              w={"100%"}
+              justifyContent={"space-between"}
+
+              py={0}
+              px={0}
+            >
+              <Text as={"span"} fontSize={"sm"} fontWeight={500} color={"#000"}>
+                Privacy Policy <Badge variant={'surface'} colorPalette="cyan" ms={2} size={'sm'} fontSize={'xs'} px={2}>🎓 {privacy_language?.language_name}</Badge>
+              </Text>
+
+              <PrivacyPolicyAddModel />
+            </HStack>
+            <Text
+              as="p"
+              fontSize="sm"
+              fontWeight={400}
+              color="#1D1D1D"
+            >
+              {content}
+            </Text>
+
+          </VStack>)}
+      </VStack>
+    </MainFrame>
+  );
+};
+
+export default PrivacyPolicy;

src/Pages/ManageCMS/PrivacyPolicy/PrivacyPolicyAddModel.tsx

@@ -1,53 +1,80 @@
-import { FaRegEdit } from "react-icons/fa"
-import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../../components/ui/dialog"
-import { Field, Input, Stack, Text, Textarea } from "@chakra-ui/react"
-import { Button } from "../../../components/ui/button"
+import { FaRegEdit } from "react-icons/fa";
+import {
+  DialogBody,
+  DialogCloseTrigger,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogRoot,
+  DialogTitle,
+  DialogTrigger,
+} from "../../../components/ui/dialog";
+import { Field, 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">
+  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>
+        <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>
 
-            </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>
 
-            <DialogContent
-                bg={"#fff"}
-                // w={{ lg: "60%", md: "230px" }}
-                w={{ base: '90%', md: '400px' }}
-                height={"auto"}
+        <DialogBody bg="white">
+          <Stack py={3}>
+            <Field.Root>
+              <Field.Label color="black" pt={1} fontSize="12px">
+                PrivacyPolicy
+              </Field.Label>
+              <Textarea
+                placeholder=""
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                p={2}
+                fontSize="12px"
+                height={'140px'}
+                _focusVisible={{outline:'none'}}
+                resize={'none'}
+              />
+            </Field.Root>
+          </Stack>
+        </DialogBody>
+        <DialogFooter display="flex" justifyContent="center" pt={"2"}>
+          <Button w="100%" bg="#02A0A0" color={"#fff"}>
+            Save
+          </Button>
+        </DialogFooter>
 
-                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 >
-
-    )
+        <DialogCloseTrigger color="black" />
+      </DialogContent>
+    </DialogRoot>
+  );
 }
 
-export default PrivacyPolicyAddModel
+export default PrivacyPolicyAddModel;

src/Pages/ManageCMS/PrivacyPolicy/PrivacyPolicySkeleton.tsx

@@ -0,0 +1,15 @@
+import { Box, Skeleton } from '@chakra-ui/react'
+
+const PrivacyPolicySkeleton = () => {
+  return (
+    <Box px={3} pb={3} w="90%">
+      <Skeleton height="20px" mb="10px" width="90%" />
+      <Skeleton height="20px" mb="15px" width="90%" />
+      <Skeleton height="20px" mb="10px" width="90%" />
+      <Skeleton height="20px" mb="10px" width="80%" />
+      <Skeleton height="20px" width="60%" />
+    </Box>
+  )
+}
+
+export default PrivacyPolicySkeleton

src/Pages/ManageCMS/TermsAndCondition/TermsAndCondition.tsx

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

src/Pages/ManageCMS/TermsAndConditions/TermsAndConditions.tsx

@@ -20,7 +20,7 @@ const TermsAndConditions = () => {
            Terms And Conditions
           </Text>
 
-          <HStack mr={5}>
+          <HStack >
             
             <TermsAndConditionsAddModel />
           </HStack>

src/Pages/ManageCMS/TermsAndConditions/TermsAndConditionsAddModel.tsx

@@ -1,53 +1,77 @@
-import { FaRegEdit } from "react-icons/fa"
-import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../../components/ui/dialog"
-import { Field, Stack, Text, Textarea } from "@chakra-ui/react"
-import { Button } from "../../../components/ui/button"
+import { FaRegEdit } from "react-icons/fa";
+import {
+  DialogBody,
+  DialogCloseTrigger,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogRoot,
+  DialogTitle,
+  DialogTrigger,
+} from "../../../components/ui/dialog";
+import { Field, Stack, Text, Textarea } from "@chakra-ui/react";
+import { Button } from "../../../components/ui/button";
 
 function TermsAndConditionsAddModel() {
-    return (
+  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>
 
-        <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>
+      <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>
 
-            </DialogTrigger>
+        <DialogBody bg="white">
+          <Stack py={3}>
+            <Field.Root>
+              <Field.Label color="black" pt={1} fontSize="12px">
+                TermsAndConditions
+              </Field.Label>
+              <Textarea
+                placeholder=""
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                p={2}
+                fontSize="12px"
+                height={'140px'}
+                _focusVisible={{outline:'none'}}
+                resize={'none'}
+              />
+            </Field.Root>
+          </Stack>
+        </DialogBody>
+        <DialogFooter display="flex" justifyContent="center" pt={"2"}>
+          <Button w="100%" bg="#02A0A0" color={"#fff"}>
+            Save
+          </Button>
+        </DialogFooter>
 
-            <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 >
-
-    )
+        <DialogCloseTrigger color="black" />
+      </DialogContent>
+    </DialogRoot>
+  );
 }
 
-export default TermsAndConditionsAddModel
+export default TermsAndConditionsAddModel;

src/Pages/ManageContact/ManageContact.tsx

@@ -1,4 +1,4 @@
-import { Box, HStack, Image, Input, Text } from "@chakra-ui/react";
+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";
@@ -25,7 +25,6 @@ const managepost: any[] = [
     "Action": (
       <HStack justifyContent="center">
         <PendingRequests />
-       
       </HStack>
     ),
   })),
@@ -47,8 +46,8 @@ const ManageContact = () => {
           Contact Requests
           </Text>
 
-          <HStack mr={5}>
-            <InputGroup marginRight={"1rem"}
+          <HStack >
+            <InputGroup 
               startElement={
                 <LuSearch fontSize={"xs"} style={{ position: 'relative', left: '10px' }} />
               }
@@ -61,8 +60,8 @@ const ManageContact = () => {
                 colorPalette={"blue"}
                 _focus={{ border: "1px solid #02A0A0" }}
                 rounded={"md"}
-                size={"2xs"}
-                fontSize={"2sm"}
+                size={"xs"}
+                fontSize={"sm"}
                 placeholder="Search..."
                 bgColor={'#EEEEEE'}
                 ps={8}

src/Pages/ManageContact/PendingRequests.tsx

@@ -1,77 +1,105 @@
-import { Button } from "../../components/ui/button"
-import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../components/ui/dialog"
-import { Field, HStack, Input, Stack, Textarea, } from "@chakra-ui/react"
+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 (
+  return (
+    <DialogRoot placement="center">
+      <DialogTrigger asChild>
+        <Badge fontSize={"xs"} px={2} bg={'#02a0a01f'}>
+          Answer request
+        </Badge>
+      </DialogTrigger>
 
-        <DialogRoot placement="center">
-            <DialogTrigger asChild>
-                <Button bg={"transparent"} fontSize={"xs"} color="#000000CC" fontWeight="700" textDecoration="underline">
-                    {/* <MdOutlineRemoveRedEye style={{ cursor: "pointer", }} /> */}
-                    Answer request
-                </Button>
-                {/* <Button><FaRegEdit /></Button> */}
+      <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>
 
-            </DialogTrigger>
+        <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"
+              />
 
-            <DialogContent
-                bg={"#fff"}
-                w={{ base: '90%', md: '400px' }}
-                height={"auto"}
-                p={3} // Reduced padding
-                bgSize={'md'}
+              <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"}
             >
-                <DialogHeader bg="white">
-                    <DialogTitle alignSelf="center" color="black" fontSize="14px">Pending Requests</DialogTitle>
-                </DialogHeader>
+              Unresolved
+            </Button>
+            <Button
+              width={"48%"}
+              borderRadius="sm"
+              // bgColor="#007F33"
+              bgColor={"#02A0A0"}
+              color="white"
+              // colorPalette="#007F33"
+              size={"xs"}
+            >
+              Resolved
+            </Button>
+          </HStack>
+        </DialogFooter>
 
-                <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} width={"100%"}
-                        justifyContent={"space-between"}>
-                        <Button
-                            width={"48%"}
-                            color="black"
-                            _hover={{ bgColor: "white" }}
-                            variant="outline"
-                            borderRadius="sm"
-                            border="1px solid black"
-                            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 >
-
-    )
+        <DialogCloseTrigger color="black" />
+      </DialogContent>
+    </DialogRoot>
+  );
 }
 
-export default PendingRequests
+export default PendingRequests;

src/Pages/ManageContactUs/ManageContactUs.tsx

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

src/Pages/ManageGroups/EditDetailGroup.tsx

@@ -1,85 +1,119 @@
-import { Button } from "../../components/ui/button"
-import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../components/ui/dialog"
-import { Avatar, Box, Field, Heading, Input, Stack, Text } from "@chakra-ui/react"
+import { Button } from "../../components/ui/button";
+import {
+  DialogBody,
+  DialogCloseTrigger,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogRoot,
+  DialogTitle,
+  DialogTrigger,
+} from "../../components/ui/dialog";
+import { Avatar, Box, Field, Heading, Input, Stack } from "@chakra-ui/react";
 import { Switch } from "../../components/ui/switch";
-import { FaRegEdit } from "react-icons/fa";
 import { AvatarGroup } from "../../components/ui/avatar";
+import Edit from "../../components/ActionIcons/Edit";
 function EditDetailGroups() {
-    return (
+  return (
+    <DialogRoot placement="center">
+      <DialogTrigger asChild>
+        <Edit />
+      </DialogTrigger>
 
-        <DialogRoot placement="center" >
-            <DialogTrigger asChild>
-                <Button bg={"transparent"} size="sm">
-                    <FaRegEdit style={{ cursor: "pointer", }}  color="#000"/>
-                </Button>
-                {/* <Button><FaRegEdit /></Button> */}
+      <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
+              />
 
-            </DialogTrigger>
+              <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
+              />
 
-            <DialogContent
-                bg={"#fff"}
-                w={{ base: '90%', md: '400px' }}
-                height={"auto"}
-                p={3} // Reduced padding
-            >
-                <DialogHeader bg="white">
-                    <DialogTitle alignSelf="center" color="black" fontSize="14px">Edit details</DialogTitle>
-                </DialogHeader>
+              <Field.Label color="black" pt={1} fontSize="12px">
+                Members
+              </Field.Label>
 
-                <DialogBody bg="white">
-                    <Stack py={3} >
+              <Box
+                bgColor="#EEEEEE"
+                border="none"
+                w="100%"
+                display="flex"
+                p={1}
+                rounded={4}
+              >
+                <AvatarGroup gap="0" spaceX="-3" size={"xs"}>
+                  <Avatar.Root border={"none"}>
+                    <Avatar.Fallback />
+                    <Avatar.Image src="https://cdn.myanimelist.net/r/84x124/images/characters/9/131317.webp?s=d4b03c7291407bde303bc0758047f6bd" />
+                  </Avatar.Root>
 
-                        <Field.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 />
+                  <Avatar.Root border={"none"}>
+                    <Avatar.Fallback />
+                    <Avatar.Image src="https://cdn.myanimelist.net/r/84x124/images/characters/7/284129.webp?s=a8998bf668767de58b33740886ca571c" />
+                  </Avatar.Root>
 
-                            <Field.Label color="black" pt={1} fontSize="12px">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 >
-
-    )
+                  <Avatar.Root border={"none"}>
+                    <Avatar.Fallback />
+                    <Avatar.Image src="https://cdn.myanimelist.net/r/84x124/images/characters/9/105421.webp?s=269ff1b2bb9abe3ac1bc443d3a76e863" />
+                  </Avatar.Root>
+                  <Avatar.Root
+                    variant="solid"
+                    border={"none"}
+                    backgroundColor={"transparent"}
+                  >
+                    <Avatar.Fallback ml={5}>+3</Avatar.Fallback>
+                  </Avatar.Root>
+                </AvatarGroup>
+              </Box>
+            </Field.Root>
+            <Heading color="black" pt={1} fontSize="12px">
+              public/Private
+            </Heading>
+            <Switch />
+          </Stack>
+        </DialogBody>
+        <DialogFooter display="flex" justifyContent="center" pt={"2"}>
+          <Button size={"xs"} w="100%" bg="#02A0A0" color={"#fff"}>
+            Save
+          </Button>
+        </DialogFooter>{" "}
+        <DialogCloseTrigger color="black" />
+      </DialogContent>
+    </DialogRoot>
+  );
 }
 
-export default EditDetailGroups
+export default EditDetailGroups;

src/Pages/ManageGroups/ManageGroups.tsx

@@ -1,16 +1,16 @@
-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 { 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 ViewManageGroup from "./ViewManageGroup";
+import EditDetailGroups from "./EditDetailGroup";
+import AddGroup from "./AddGroup";
+import Delete from "../../components/ActionIcons/Delete";
 // import ViewSubAdmin from "./ViewSubAdmin"
 
-
 // table data
 
 const tableHeadRow = [
@@ -26,21 +26,15 @@ const managepost: any[] = [
   ...Array.from({ length: 12 }, (_, i) => ({
     "Sr. No": i + 1,
     "Group Name": "ABC",
-    "Description": "Lorem ipsum",
-    "Date": "12/01/1987",
+    Description: "Lorem ipsum",
+    Date: "12/01/1987",
     "Group type": "Private",
-    "Action": (
+    Action: (
       <HStack justifyContent="center">
-
-        {/* <MdOutlineRemoveRedEye
-            style={{ cursor: "pointer", fontSize: "16px" }}
-          /> */}
         <ViewManageGroup />
         <EditDetailGroups />
-
-        {/* <RiDeleteBin5Line style={{ cursor: "pointer" }} /> */}
         <AlertDailog
-          AltertTiggerIcon={RiDeleteBin5Line}
+          AltertTiggerIcon={() => <Delete />} 
           alertText="Delete Users"
           alertIcon={<Image src={"DeleteIcon"} h={"39px"} />}
           alertCaption="are you sure you want to delete ?"
@@ -54,8 +48,7 @@ const managepost: any[] = [
 ];
 const ManageGroups = () => {
   return (
-
-    <MainFrame >
+    <MainFrame>
       <Box>
         <HStack
           w={"100%"}
@@ -68,10 +61,13 @@ const ManageGroups = () => {
             Manage Groups
           </Text>
 
-          <HStack >
+          <HStack>
             <InputGroup
               startElement={
-                <LuSearch fontSize={"xs"} style={{ position: 'relative', left: '10px' }} />
+                <LuSearch
+                  fontSize={"xs"}
+                  style={{ position: "relative", left: "10px" }}
+                />
               }
               color={"#000"}
             >
@@ -82,12 +78,12 @@ const ManageGroups = () => {
                 colorPalette={"blue"}
                 _focus={{ border: "1px solid #02A0A0" }}
                 rounded={"md"}
-                size={"2xs"}
-                fontSize={"2sm"}
+                size={"xs"}
+                fontSize={"sm"}
                 placeholder="Search..."
-                bgColor={'#EEEEEE'}
+                bgColor={"#EEEEEE"}
                 ps={8}
-                border={'none'}
+                border={"none"}
               />
             </InputGroup>
             {/* <Button bgColor={'#EEEEEE'} pl={3} pr={3}><IoMdAdd /> <Text>Add</Text></Button> */}
@@ -99,7 +95,8 @@ const ManageGroups = () => {
           tableHeadRow={tableHeadRow}
           data={managepost}
         />
-      </Box>    </MainFrame>
-  )
-}
-export default ManageGroups
+      </Box>{" "}
+    </MainFrame>
+  );
+};
+export default ManageGroups;

src/Pages/ManageGroups/ViewManageGroup.tsx

@@ -1,86 +1,116 @@
-import { Button } from "../../components/ui/button"
-import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../components/ui/dialog"
-import { Avatar, Box, Field, Grid, Heading, Input, Stack, Text } from "@chakra-ui/react"
-import { Checkbox } from "../../components/ui/checkbox"
-import { MdOutlineRemoveRedEye } from "react-icons/md";
+import {
+  DialogBody,
+  DialogCloseTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogRoot,
+  DialogTitle,
+  DialogTrigger,
+} from "../../components/ui/dialog";
+import { Avatar, Box, Field, Heading, Input, Stack } from "@chakra-ui/react";
 import { Switch } from "../../components/ui/switch";
 import { AvatarGroup } from "../../components/ui/avatar";
+import View from "../../components/ActionIcons/View";
 function ViewManageGroup() {
-    return (
+  return (
+    <DialogRoot placement="center">
+      <DialogTrigger asChild>
+        <View />
+      </DialogTrigger>
 
-        <DialogRoot placement="center" >
-            <DialogTrigger asChild>
-                <Button bg={"transparent"} size="sm">
-                    <MdOutlineRemoveRedEye style={{ cursor: "pointer", }}  color="#000"/>
-                </Button>
-                {/* <Button><FaRegEdit /></Button> */}
+      <DialogContent
+        bg={"#fff"}
+        // w={{ lg: "60%", md: "230px" }}
+        w={{ base: "90%", md: "400px" }}
+        height={"auto"}
+        p={3} // Reduced padding
+        bgSize={"md"}
+      >
+        <DialogHeader bg="white">
+          <DialogTitle alignSelf="center" color="black" fontSize="14px">
+            View details
+          </DialogTitle>
+        </DialogHeader>
 
-            </DialogTrigger>
+        <DialogBody bg="white">
+          <Stack py={3}>
+            <Field.Root>
+              <Field.Label color="black" pt={1} fontSize="12px">
+                Group Name
+              </Field.Label>
+              <Input
+                value="Priyanka"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+                readOnly
+              />
 
-            <DialogContent
-                bg={"#fff"}
-                // w={{ lg: "60%", md: "230px" }}
-                w={{ base: '90%', md: '400px' }}
-                height={"auto"}
-                p={3} // Reduced padding
-                bgSize={'md'}
-            >
-                <DialogHeader bg="white" >
-                    <DialogTitle alignSelf="center" color="black" fontSize="14px">View details</DialogTitle>
-                </DialogHeader>
+              <Field.Label color="black" pt={1} fontSize="12px">
+                Description
+              </Field.Label>
+              <Input
+                value="Joshi"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+                readOnly
+              />
 
-                <DialogBody bg="white">
-                    <Stack py={3} >
+              <Field.Label color="black" pt={1} fontSize="12px">
+                Members
+              </Field.Label>
 
-                        <Field.Root>
-                            <Field.Label color="black" pt={1} fontSize="12px">Group Name</Field.Label>
-                            <Input value="Priyanka" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" readOnly />
+              <Box
+                bgColor="#EEEEEE"
+                border="none"
+                w="100%"
+                display="flex"
+                p={1}
+                rounded={4}
+              >
+                <AvatarGroup gap="0" spaceX="-3" size={"xs"}>
+                  <Avatar.Root border={"none"}>
+                    <Avatar.Fallback />
+                    <Avatar.Image src="https://cdn.myanimelist.net/r/84x124/images/characters/9/131317.webp?s=d4b03c7291407bde303bc0758047f6bd" />
+                  </Avatar.Root>
 
-                            <Field.Label color="black" pt={1} fontSize="12px">Description</Field.Label>
-                            <Input value="Joshi" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" readOnly />
+                  <Avatar.Root border={"none"}>
+                    <Avatar.Fallback />
+                    <Avatar.Image src="https://cdn.myanimelist.net/r/84x124/images/characters/7/284129.webp?s=a8998bf668767de58b33740886ca571c" />
+                  </Avatar.Root>
 
-                            <Field.Label color="black" pt={1} fontSize="12px">Members</Field.Label>
+                  <Avatar.Root border={"none"}>
+                    <Avatar.Fallback />
+                    <Avatar.Image src="https://cdn.myanimelist.net/r/84x124/images/characters/9/105421.webp?s=269ff1b2bb9abe3ac1bc443d3a76e863" />
+                  </Avatar.Root>
+                  <Avatar.Root
+                    variant="solid"
+                    border={"none"}
+                    backgroundColor={"transparent"}
+                  >
+                    <Avatar.Fallback ml={5}>+3</Avatar.Fallback>
+                  </Avatar.Root>
+                </AvatarGroup>
+              </Box>
+            </Field.Root>
+            <Heading color="black" pt={1} fontSize="12px">
+              public/Private
+            </Heading>
+            <Switch />
+          </Stack>
+        </DialogBody>
 
-                            <Box
-                                bgColor="#EEEEEE"
-                                border="none"
-                                w="100%"
-                                display="flex"
-                                p={1}
-                                rounded={4}
-                            >
-                                <AvatarGroup gap="0" spaceX="-3" size={"xs"} >
-                                    <Avatar.Root border={'none'}>
-                                        <Avatar.Fallback />
-                                        <Avatar.Image src="https://cdn.myanimelist.net/r/84x124/images/characters/9/131317.webp?s=d4b03c7291407bde303bc0758047f6bd" />
-                                    </Avatar.Root>
-
-                                    <Avatar.Root border={'none'}>
-                                        <Avatar.Fallback />
-                                        <Avatar.Image src="https://cdn.myanimelist.net/r/84x124/images/characters/7/284129.webp?s=a8998bf668767de58b33740886ca571c" />
-                                    </Avatar.Root>
-
-                                    <Avatar.Root border={'none'}>
-                                        <Avatar.Fallback />
-                                        <Avatar.Image src="https://cdn.myanimelist.net/r/84x124/images/characters/9/105421.webp?s=269ff1b2bb9abe3ac1bc443d3a76e863" />
-                                    </Avatar.Root>
-                                    <Avatar.Root variant="solid" border={'none'} backgroundColor={'transparent'} >
-                                        <Avatar.Fallback ml={5}>+3</Avatar.Fallback>
-                                    </Avatar.Root>
-                                </AvatarGroup>
-                            </Box>
-
-                        </Field.Root>
-                        <Heading color="black" pt={1} fontSize="12px">public/Private</Heading>
-                        <Switch />
-                    </Stack>
-                </DialogBody>
-
-                <DialogCloseTrigger color="black" />
-            </DialogContent>
-        </DialogRoot >
-
-    )
+        <DialogCloseTrigger color="black" />
+      </DialogContent>
+    </DialogRoot>
+  );
 }
 
-export default ViewManageGroup
+export default ViewManageGroup;

src/Pages/ManageJobs/ManageJobs.tsx

@@ -1,11 +1,101 @@
-import MainFrame from "../../components/MainFrame"
+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";
+import Delete from "../../components/ActionIcons/Delete";
+
+// 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">
+        <ViewManageJob />
+        <ManageJobsAdd />
+        <AlertDailog
+          AltertTiggerIcon={() => <Delete />}
+          alertText="Delete Users"
+          alertIcon={<Image src={"DeleteIcon"} h={"39px"} />}
+          alertCaption="are you sure you want to delete ?"
+          onConfirm={() => {
+            console.log("User deleted:", i + 1);
+          }}
+        />
+      </HStack>
+    ),
+  })),
+];
 
 const ManageJobs = () => {
   return (
     <MainFrame>
-        
-    </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>
 
-export default ManageJobs
+          <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

@@ -1,118 +1,261 @@
-import { Button } from "../../components/ui/button"
-import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../components/ui/dialog"
-import { createListCollection, Field, Input, SelectValueText, Stack } from "@chakra-ui/react"
+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 { FaRegEdit } from "react-icons/fa"
-import { SelectContent, SelectItem, SelectLabel, SelectRoot, SelectTrigger } from "../../components/ui/select"
+import { TbEdit } from "react-icons/tb";
+import {
+  SelectContent,
+  SelectItem,
+  SelectLabel,
+  SelectRoot,
+  SelectTrigger,
+} from "../../components/ui/select";
+import Edit from "../../components/ActionIcons/Edit";
 
 const frameworks = createListCollection({
-    items: [
-        { label: "React.js", value: "react" },
-        { label: "Vue.js", value: "vue" },
-        { label: "Angular", value: "angular" },
-        { label: "Svelte", value: "svelte" },
-    ],
-})
+  items: [
+    { label: "React.js", value: "react" },
+    { label: "Vue.js", value: "vue" },
+    { label: "Angular", value: "angular" },
+    { label: "Svelte", value: "svelte" },
+  ],
+});
 function ManageJobsAdd() {
-    return (
+  return (
+    <DialogRoot placement="center">
+      <DialogTrigger asChild>
+        <Edit />
+      </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>
 
-        <DialogRoot placement="center">
-            <DialogTrigger asChild>
-                <Button bg={"transparent"} size="sm">
-                    <FaRegEdit style={{ cursor: "pointer", fontSize: "14px" }} color="#000" />
-                </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 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>
+        <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>
+            <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>
 
-                            <Field.Label pt={1} color="black" fontSize="12px">Job type</Field.Label>
-                            <Input placeholder="Enter the Job Type" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-                        </Field.Root>
-                        <Field.Root>
-                            <Field.Label pt={1} color="black" fontSize="12px">Skills required</Field.Label>
-                            <Input placeholder="Enter the Skills Required" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-                        </Field.Root>
-                        <Field.Root>
-                            <Field.Label pt={1} color="black" fontSize="12px">Job Description*</Field.Label>
-                            <Input placeholder="Enter the Job Description" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-                        </Field.Root>
-                    </Stack>
-                </DialogBody>
-                <DialogFooter display="flex" justifyContent="center" pt={"2"}>
-                    <Button w="100%" bg="#02A0A0" color={"#fff"} fontSize="12px" height="30px">
-                        Save
-                    </Button>
-                </DialogFooter>
-
-                <DialogCloseTrigger color="black" />
-            </DialogContent>
-        </DialogRoot>
-
-
-    )
+        <DialogCloseTrigger color="black" />
+      </DialogContent>
+    </DialogRoot>
+  );
 }
 
-export default ManageJobsAdd
+export default ManageJobsAdd;

src/Pages/ManageJobs/ViewManageJob.tsx

@@ -1,113 +1,276 @@
-import { Button } from "../../components/ui/button"
-import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../components/ui/dialog"
-import { createListCollection, Field, Input, SelectValueText, Stack, } from "@chakra-ui/react"
+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 { FaRegEdit } from "react-icons/fa"
-import { SelectContent, SelectItem, SelectLabel, SelectRoot, SelectTrigger } from "../../components/ui/select"
-import { MdOutlineRemoveRedEye } from "react-icons/md"
+import { MdOutlineRemoveRedEye } from "react-icons/md";
+import {
+  SelectContent,
+  SelectItem,
+  SelectLabel,
+  SelectRoot,
+  SelectTrigger,
+} from "../../components/ui/select";
+import View from "../../components/ActionIcons/View";
 
 const frameworks = createListCollection({
-    items: [
-        { label: "React.js", value: "react" },
-        { label: "Vue.js", value: "vue" },
-        { label: "Angular", value: "angular" },
-        { label: "Svelte", value: "svelte" },
-    ],
-})
+  items: [
+    { label: "React.js", value: "react" },
+    { label: "Vue.js", value: "vue" },
+    { label: "Angular", value: "angular" },
+    { label: "Svelte", value: "svelte" },
+  ],
+});
 function ViewManageJob() {
-    return (
+  return (
+    <DialogRoot placement="center">
+      <DialogTrigger asChild>
+        <View />
+      </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>
 
-        <DialogRoot placement="center">
-            <DialogTrigger asChild>
-                <Button bg={"transparent"} size="sm">
-                    <MdOutlineRemoveRedEye style={{ cursor: "pointer", fontSize: "14px" }}  color="#000"/>
-                </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 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>
+        <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>
+            <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>
+            <Field.Root>
+              <Field.Label pt={1} color="black" fontSize="12px">
+                Job type
+              </Field.Label>
+              <Input
+                placeholder="Enter the Job Type"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+              />
+            </Field.Root>
+            <Field.Root>
+              <Field.Label pt={1} color="black" fontSize="12px">
+                Skills required
+              </Field.Label>
+              <Input
+                placeholder="Enter the Skills Required"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+              />
+            </Field.Root>
+            <Field.Root>
+              <Field.Label pt={1} color="black" fontSize="12px">
+                Job Description*
+              </Field.Label>
+              <Input
+                placeholder="Enter the Job Description"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+              />
+            </Field.Root>
+            <Field.Root>
+              <Field.Label pt={1} color="black" fontSize="12px">
+                Upload Image
+              </Field.Label>
+              <Input
+                placeholder="Upload Image"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+              />
+            </Field.Root>
+          </Stack>
+        </DialogBody>
+        <DialogFooter display="flex" justifyContent="center" pt={"2"}>
+          <Button
+            w="100%"
+            bg="#02A0A0"
+            color={"#fff"}
+            fontSize="12px"
+            height="30px"
+          >
+            Save
+          </Button>
+        </DialogFooter>
 
-                <DialogCloseTrigger color="black" />
-            </DialogContent>
-        </DialogRoot>
-
-
-    )
+        <DialogCloseTrigger color="black" />
+      </DialogContent>
+    </DialogRoot>
+  );
 }
 
-export default ViewManageJob
+export default ViewManageJob;

src/Pages/ManagePost/ManagePost.tsx

@@ -1,11 +1,113 @@
-import MainFrame from "../../components/MainFrame"
+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 Delete from "../../components/ActionIcons/Delete";
+// 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">
+        <ViewDailog />
+        <AlertDailog
+          AltertTiggerIcon={() => <Delete />} 
+          alertText="Delete Users"
+          alertIcon={<Image src={"DeleteIcon"} h={"39px"} />}
+          alertCaption="are you sure you want to delete ?"
+          onConfirm={() => {
+            console.log("User deleted:", i + 1);
+          }}
+        />
+      </HStack>
+    ),
+  })),
+];
 const ManagePost = () => {
   return (
     <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>
 
-export default ManagePost
+          <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

@@ -1,16 +1,15 @@
-import { MdOutlineRemoveRedEye } from "react-icons/md"
-import { Button } from "../../components/ui/button"
-import { DialogBody, DialogCloseTrigger, DialogContent, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../components/ui/dialog"
-import { Field, Image, Input, Stack } from "@chakra-ui/react"
+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"
+import Edit from "../../components/ActionIcons/Edit"
+
 function ViewDailog() {
     return (
 
         <DialogRoot placement="center">
             <DialogTrigger asChild>
-                <Button bg={"transparent"} size="sm">
-                    <MdOutlineRemoveRedEye style={{ cursor: "pointer", fontSize: "16px" }} color="#000" />
-                </Button>
+                <Edit />
             </DialogTrigger>
 
             <DialogContent

src/Pages/ManageSubAdmin/ManageSubAdmin.tsx

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

src/Pages/ManageUser/DeactivatedAccounts/DeactivatedAccounts.tsx

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

src/Pages/ManageUser/RegisterUsers/RegisterUsers.tsx

@@ -1,233 +0,0 @@
-import { Box, HStack, Input, Stack, Table, 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";
-
-// Table setup
-const tableHeadRow = [
-  "Sr. No",
-  "First Name",
-  "Mobile number",
-  "Gender",
-  "DOB",
-  "Type of User",
-  "Language",
-  "Status",
-  "Action",
-];
-
-const usersData: any[] = [
-  {
-    "Sr. No": 1,
-    "First Name": "Ritesh",
-    "Mobile number": "9876543210",
-    Gender: "Male",
-    DOB: "15-01-1990",
-    "Type of User": "Admin",
-    Language: "English",
-    Status: "Active",
-    Action: "Edit/Delete",
-  },
-  {
-    "Sr. No": 2,
-    "First Name": "Anjali",
-    "Mobile number": "9123456789",
-    Gender: "Female",
-    DOB: "21-06-1995",
-    "Type of User": "Customer",
-    Language: "Hindi",
-    Status: "Inactive",
-    Action: "Edit/Delete",
-  },
-  {
-    "Sr. No": 3,
-    "First Name": "Rajesh",
-    "Mobile number": "9871234560",
-    Gender: "Male",
-    DOB: "12-12-1985",
-    "Type of User": "Vendor",
-    Language: "English",
-    Status: "Active",
-    Action: "Edit/Delete",
-  },
-  {
-    "Sr. No": 4,
-    "First Name": "Priya",
-    "Mobile number": "9988776655",
-    Gender: "Female",
-    DOB: "05-05-1998",
-    "Type of User": "Customer",
-    Language: "Tamil",
-    Status: "Active",
-    Action: "Edit/Delete",
-  },
-  {
-    "Sr. No": 5,
-    "First Name": "Amit",
-    "Mobile number": "8899665544",
-    Gender: "Male",
-    DOB: "03-03-1992",
-    "Type of User": "Admin",
-    Language: "Gujarati",
-    Status: "Inactive",
-    Action: "Edit/Delete",
-  },
-  {
-    "Sr. No": 6,
-    "First Name": "Amit",
-    "Mobile number": "8899665544",
-    Gender: "Male",
-    DOB: "03-03-1992",
-    "Type of User": "Admin",
-    Language: "Gujarati",
-    Status: "Inactive",
-    Action: "Edit/Delete",
-  },
-  {
-    "Sr. No": 7,
-    "First Name": "Amit",
-    "Mobile number": "8899665544",
-    Gender: "Male",
-    DOB: "03-03-1992",
-    "Type of User": "Admin",
-    Language: "Gujarati",
-    Status: "Inactive",
-    Action: "Edit/Delete",
-  },
-  {
-    "Sr. No": 5,
-    "First Name": "Amit",
-    "Mobile number": "8899665544",
-    Gender: "Male",
-    DOB: "03-03-1992",
-    "Type of User": "Admin",
-    Language: "Gujarati",
-    Status: "Inactive",
-    Action: "Edit/Delete",
-  },
-  {
-    "Sr. No": 6,
-    "First Name": "Amit",
-    "Mobile number": "8899665544",
-    Gender: "Male",
-    DOB: "03-03-1992",
-    "Type of User": "Admin",
-    Language: "Gujarati",
-    Status: "Inactive",
-    Action: "Edit/Delete",
-  },
-  {
-    "Sr. No": 7,
-    "First Name": "Amit",
-    "Mobile number": "8899665544",
-    Gender: "Male",
-    DOB: "03-03-1992",
-    "Type of User": "Admin",
-    Language: "Gujarati",
-    Status: "Inactive",
-    Action: "Edit/Delete",
-  },
-  {
-    "Sr. No": 8,
-    "First Name": "Amit",
-    "Mobile number": "8899665544",
-    Gender: "Male",
-    DOB: "03-03-1992",
-    "Type of User": "Admin",
-    Language: "Gujarati",
-    Status: "Inactive",
-    Action: "Edit/Delete",
-  },
-  {
-    "Sr. No": 9,
-    "First Name": "Amit",
-    "Mobile number": "8899665544",
-    Gender: "Male",
-    DOB: "03-03-1992",
-    "Type of User": "Admin",
-    Language: "Gujarati",
-    Status: "Inactive",
-    Action: "Edit/Delete",
-  },
-  {
-    "Sr. No": 10,
-    "First Name": "Amit",
-    "Mobile number": "8899665544",
-    Gender: "Male",
-    DOB: "03-03-1992",
-    "Type of User": "Admin",
-    Language: "Gujarati",
-    Status: "Inactive",
-    Action: "Edit/Delete",
-  },
-  {
-    "Sr. No": 11,
-    "First Name": "Amit",
-    "Mobile number": "8899665544",
-    Gender: "Male",
-    DOB: "03-03-1992",
-    "Type of User": "Admin",
-    Language: "Gujarati",
-    Status: "Inactive",
-    Action: "Edit/Delete",
-  },
-  {
-    "Sr. No": 12,
-    "First Name": "Amit",
-    "Mobile number": "8899665544",
-    Gender: "Male",
-    DOB: "03-03-1992",
-    "Type of User": "Admin",
-    Language: "Gujarati",
-    Status: "Inactive",
-    Action: "Edit/Delete",
-  },
-  {
-    "Sr. No": 13,
-    "First Name": "Amit",
-    "Mobile number": "8899665544",
-    Gender: "Male",
-    DOB: "03-03-1992",
-    "Type of User": "Admin",
-    Language: "Gujarati",
-    Status: "Inactive",
-    Action: "Edit/Delete",
-  },
-];
-
-const RegisterUsers = () => {
-  return (
-    <MainFrame>
-      <HStack   w={"100%"} justifyContent={"space-between"} p={3}>
-        <Text as={"span"} fontSize={"sm"} fontWeight={"bolder"} color={"#000"}>
-          Register User
-        </Text>
-
-        <Box w={"30%"}>
-          <InputGroup
-            bgSize={"xs"}
-            flex="1"
-            startElement={<LuSearch />}
-            w={"100%"}
-            color={"#000"}
-          >
-            <Input
-              w={"100%"}
-              bg={"#EEEEEE"}
-              _focus={{ border: "1px #02A0A0 solid" }}
-              border={"1px #EEEEEE solid"}
-              rounded={"full"}
-              size={"sm"}
-              placeholder="Search..."
-            />
-          </InputGroup>
-        </Box>
-      </HStack>
-
-      <DataTable tableHeadRow={tableHeadRow} data={usersData} />
-    </MainFrame>
-  );
-};
-
-export default RegisterUsers;

src/Pages/ManageUsers/DeactivatedAccounts/DeactivatedAccounts.tsx

@@ -21,7 +21,7 @@ const manageUser: any[] = [
     "Company name": "9876543210",
     "Activate/Deactivate": (
       <Box display={'flex'} justifyContent={'center'}>
-        <Switch colorPalette={'teal'} />
+        <Switch size={'sm'} colorPalette={'teal'} />
       </Box>
     ),
   })),
@@ -57,7 +57,7 @@ const DeactivatedAccounts = () => {
                 _focus={{ border: "1px solid #02A0A0" }}
                 rounded={"md"}
                 size={"2xs"}
-                fontSize={"2sm"}
+                fontSize={"sm"}
                 placeholder="Search..."
                 bgColor={'#EEEEEE'}
                 ps={8}

src/Pages/ManageUsers/RegisterUsers/EditRegisterUsers.tsx

@@ -1,5 +1,5 @@
 import { MdOutlineRemoveRedEye } from "react-icons/md";
-import { Field, Input, Stack } from "@chakra-ui/react";
+import { Field, Icon, Input, Stack } from "@chakra-ui/react";
 import {
   DialogActionTrigger,
   DialogBody,
@@ -13,12 +13,14 @@ import {
 } 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>
-        <BiEdit style={{ cursor: "pointer", fontSize: "16px" }} />
+            <Edit/>
       </DialogTrigger>
 
       <DialogContent

src/Pages/ManageUsers/RegisterUsers/RegisterUsers.tsx

@@ -1,18 +1,15 @@
 import { Box, HStack, Image, Input, Text } from "@chakra-ui/react";
 import MainFrame from "../../../components/MainFrame";
 import AlertDailog from "../../../components/AlertDailog";
-import { NavLink } from "react-router-dom";
 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 { BiEdit } from "react-icons/bi";
 import ViewRegisterUsers from "./ViewRegisterUsers";
 import EditRegisterUsers from "./EditRegisterUsers";
-import { Button } from "../../../components/ui/button";
-import { IoMdAdd } from "react-icons/io";
 import AddRegisterUsers from "./AddRegisterUsers";
+import Delete from "../../../components/ActionIcons/Delete";
 
 const tableHeadRow = [
   "Sr. No",
@@ -37,16 +34,16 @@ const registerUser: any[] = [
     "Language": "Mumbai",
     "Activate/Deactivate": (
       <Box>
-        <Switch colorPalette={'teal'} />
+        <Switch size={'sm'} colorPalette={'teal'} />
       </Box>
     ),
     "Action": (
-      <HStack justifyContent="center">  
+      <HStack justifyContent="center">
         <ViewRegisterUsers />
         <EditRegisterUsers />
         {/* <RiDeleteBin5Line style={{ cursor: "pointer" }} /> */}
         <AlertDailog
-          AltertTiggerIcon={RiDeleteBin5Line}
+          AltertTiggerIcon={() => <Delete />} // Pass as function
           alertText="Delete Users"
           alertIcon={<Image src={"DeleteIcon"} h={"39px"} />}
           alertCaption="Are You Sure You Want To Delete This User ?"
@@ -74,7 +71,7 @@ const RegisterUsers = () => {
             Register Users
           </Text>
 
-          <HStack>
+          <HStack> 
             <InputGroup
               startElement={
                 <LuSearch fontSize={"xs"} style={{ position: 'relative', left: '10px' }} />
@@ -88,8 +85,8 @@ const RegisterUsers = () => {
                 colorPalette={"blue"}
                 _focus={{ border: "1px solid #02A0A0" }}
                 rounded={"md"}
-                size={"2xs"}
-                fontSize={"2sm"}
+                size={"xs"}
+                fontSize={"sm"}
                 placeholder="Search..."
                 bgColor={'#EEEEEE'}
                 ps={8}

src/Pages/ManageUsers/RegisterUsers/ViewRegisterUsers.tsx

@@ -1,5 +1,5 @@
 import { MdOutlineRemoveRedEye } from "react-icons/md";
-import { Field, Input, Stack } from "@chakra-ui/react";
+import { Field, Icon, Input, Stack } from "@chakra-ui/react";
 import {
   DialogBody,
   DialogCloseTrigger,
@@ -9,25 +9,23 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "../../../components/ui/dialog";
+import View from "../../../components/ActionIcons/View";
 
 function ViewRegisterUsers() {
   return (
     <DialogRoot placement="center">
       <DialogTrigger asChild>
-        <MdOutlineRemoveRedEye
-          color="#000"
-          style={{ cursor: "pointer", fontSize: "16px" }}
-        />
+        <View />
       </DialogTrigger>
 
       <DialogContent
-         bg={"#fff"}
-         w={{ base: '90%', md: '400px' }}
-         height={'80vh'}
-         overflow={'scroll'}
-         overflowX="hidden" 
-         p={3} // Reduced padding
-         bgSize={'md'}
+        bg={"#fff"}
+        w={{ base: "90%", md: "400px" }}
+        height={"80vh"}
+        overflow={"scroll"}
+        overflowX="hidden"
+        p={3} // Reduced padding
+        bgSize={"md"}
       >
         <DialogHeader bg="white">
           <DialogTitle alignSelf="center" color="black" fontSize="14px">
@@ -42,42 +40,72 @@ function ViewRegisterUsers() {
                 First Name
               </Field.Label>
               <Input
-                bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
               />
 
               <Field.Label color="black" pt={1} fontSize="12px">
                 Last Name
               </Field.Label>
               <Input
-                bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
               />
 
               <Field.Label color="black" pt={1} fontSize="12px">
                 Gender
               </Field.Label>
               <Input
-                bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
               />
 
               <Field.Label color="black" pt={1} fontSize="12px">
                 DOB
               </Field.Label>
               <Input
-                bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
               />
 
               <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"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
               />
 
               <Field.Label color="black" pt={1} fontSize="12px">
                 Language
               </Field.Label>
               <Input
-                bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
               />
             </Field.Root>
           </Stack>

src/Pages/MasterModule/AgencyMaster/AgencyMaster.tsx

@@ -1,4 +1,4 @@
-import { Box, HStack, Image, Input, Text } from "@chakra-ui/react";
+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";
@@ -62,8 +62,8 @@ const AgencyMaster = () => {
           Agency Master
           </Text>
 
-          <HStack mr={5}>
-            <InputGroup marginRight={"1rem"}
+          <HStack >
+            <InputGroup 
               startElement={
                 <LuSearch fontSize={"xs"} style={{ position: 'relative', left: '10px' }} />
               }
@@ -76,8 +76,8 @@ const AgencyMaster = () => {
                 colorPalette={"blue"}
                 _focus={{ border: "1px solid #02A0A0" }}
                 rounded={"md"}
-                size={"2xs"}
-                fontSize={"2sm"}
+                size={"xs"}
+                fontSize={"sm"}
                 placeholder="Search..."
                 bgColor={'#EEEEEE'}
                 ps={8}

src/Pages/MasterModule/AgencyMaster/EditAgencyMaster.tsx

@@ -1,75 +1,152 @@
-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, Input, Stack, } from "@chakra-ui/react"
-
+import { Button } from "../../../components/ui/button";
+import {
+  DialogBody,
+  DialogCloseTrigger,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogRoot,
+  DialogTitle,
+  DialogTrigger,
+} from "../../../components/ui/dialog";
+import { Field, Icon, Input, Stack } from "@chakra-ui/react";
+import Edit from "../../../components/ActionIcons/Edit";
 
 function EditAgencyMaster() {
-    return (
+  return (
+    <DialogRoot placement="center">
+      <DialogTrigger asChild>
+        <Edit />
+      </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>
 
-        <DialogRoot placement="center">
-            <DialogTrigger asChild>
-                <Button bg={"transparent"} size="sm">
-                    <FaRegEdit style={{ cursor: "pointer", fontSize: "14px" }}  color="#000"/>
-                </Button>
-            </DialogTrigger>
+        <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"
+              />
 
-            <DialogContent
-                bg={"#fff"}
-                // w={{ lg: "60%", md: "230px" }}
-                w={{ base: '90%', md: '400px' }}
+              <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"
+              />
 
-                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>
+              <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"
+              />
 
-                <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">
+                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">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">
+                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">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">
+                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">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">
+                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>
 
-                            <Field.Label color="black" pt={1} fontSize="12px">GST no.</Field.Label>
-                            <Input value="Lorem Ipsum" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-                            
-                            <Field.Label color="black" pt={1} fontSize="12px">Action</Field.Label>
-                            <Input value="Lorem Ipsum" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-
-
-                        </Field.Root>
-                    </Stack>
-                </DialogBody>
-                <DialogFooter display="flex" justifyContent="center" pt={"2"}>
-                    <Button w="100%" bg="#02A0A0" color={"#fff"} fontSize="12px" height="30px">
-                        Save
-                    </Button>
-                </DialogFooter>
-
-                <DialogCloseTrigger color="black" />
-            </DialogContent>
-        </DialogRoot>
-
-
-    )
+        <DialogCloseTrigger color="black" />
+      </DialogContent>
+    </DialogRoot>
+  );
 }
 
-export default EditAgencyMaster
+export default EditAgencyMaster;

src/Pages/MasterModule/AgencyMaster/ViewAgencyAddModel.tsx

@@ -1,5 +1,5 @@
 import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../../components/ui/dialog"
-import { Field, Input, Stack, Text, Textarea } from "@chakra-ui/react"
+import { Field, Input, Stack, Text } from "@chakra-ui/react"
 import { IoMdAdd } from "react-icons/io"
 import { Button } from "../../../components/ui/button"
 

src/Pages/MasterModule/AgencyMaster/ViewAgencyMaster.tsx

@@ -1,75 +1,153 @@
-import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../../components/ui/dialog"
-import { Field, Input, Stack, } from "@chakra-ui/react"
-import { MdOutlineRemoveRedEye } from "react-icons/md"
-import { Button } from "../../../components/ui/button"
-
+import {
+  DialogBody,
+  DialogCloseTrigger,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogRoot,
+  DialogTitle,
+  DialogTrigger,
+} from "../../../components/ui/dialog";
+import { Field, Icon, Input, Stack } from "@chakra-ui/react";
+import { MdOutlineRemoveRedEye } from "react-icons/md";
+import { Button } from "../../../components/ui/button";
+import View from "../../../components/ActionIcons/View";
 
 function ViewAgencyMaster() {
-    return (
+  return (
+    <DialogRoot placement="center">
+      <DialogTrigger asChild>
+        <View />
+      </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>
 
-        <DialogRoot placement="center">
-            <DialogTrigger asChild>
-                <Button bg={"transparent"} size="sm">
-                    <MdOutlineRemoveRedEye style={{ cursor: "pointer", fontSize: "14px" }}  color="#000"/>
-                </Button>
-            </DialogTrigger>
+        <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"
+              />
 
-            <DialogContent
-                bg={"#fff"}
-                // w={{ lg: "60%", md: "230px" }}
-                w={{ base: '90%', md: '400px' }}
+              <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"
+              />
 
-                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>
+              <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"
+              />
 
-                <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">
+                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">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">
+                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">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">
+                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">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">
+                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>
 
-                            <Field.Label color="black" pt={1} fontSize="12px">GST no.</Field.Label>
-                            <Input value="Lorem Ipsum" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-                            
-                            <Field.Label color="black" pt={1} fontSize="12px">Action</Field.Label>
-                            <Input value="Lorem Ipsum" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-
-
-                        </Field.Root>
-                    </Stack>
-                </DialogBody>
-                <DialogFooter display="flex" justifyContent="center" pt={"2"}>
-                    <Button w="100%" bg="#02A0A0" color={"#fff"} fontSize="12px" height="30px">
-                        Save
-                    </Button>
-                </DialogFooter>
-
-                <DialogCloseTrigger color="black" />
-            </DialogContent>
-        </DialogRoot>
-
-
-    )
+        <DialogCloseTrigger color="black" />
+      </DialogContent>
+    </DialogRoot>
+  );
 }
 
-export default ViewAgencyMaster
+export default ViewAgencyMaster;

src/Pages/MasterModule/Country/Country.tsx

@@ -1,4 +1,4 @@
-import { Box, HStack, Image, Input, Text } from "@chakra-ui/react";
+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";
@@ -49,8 +49,8 @@ const Country = () => {
           Country
           </Text>
 
-          <HStack mr={5}>
-            <InputGroup marginRight={"1rem"}
+          <HStack >
+            <InputGroup 
               startElement={
                 <LuSearch fontSize={"xs"} style={{ position: 'relative', left: '10px' }} />
               }
@@ -63,8 +63,8 @@ const Country = () => {
                 colorPalette={"blue"}
                 _focus={{ border: "1px solid #02A0A0" }}
                 rounded={"md"}
-                size={"2xs"}
-                fontSize={"2sm"}
+                size={"xs"}
+                fontSize={"sm"}
                 placeholder="Search..."
                 bgColor={'#EEEEEE'}
                 ps={8}

src/Pages/MasterModule/Country/EditCountryModel.tsx

@@ -1,61 +1,67 @@
-import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../../components/ui/dialog"
-import { Box, Field, IconButton, Input, Stack, Text, Textarea } from "@chakra-ui/react"
-import { Button } from "../../../components/ui/button"
-import { FaRegEdit } from "react-icons/fa";
-
+import {
+  DialogBody,
+  DialogCloseTrigger,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogRoot,
+  DialogTitle,
+  DialogTrigger,
+} from "../../../components/ui/dialog";
+import { Field, Input, Stack } from "@chakra-ui/react";
+import { Button } from "../../../components/ui/button";
+import Edit from "../../../components/ActionIcons/Edit";
 
 function EditCountryModel() {
+  return (
+    <DialogRoot placement="center">
+      <DialogTrigger asChild>
+        <Edit />
+      </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>
 
-   
-    return (
+        <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>
 
-        <DialogRoot placement="center">
-            <DialogTrigger asChild>
-                {/* <Button bg={"transparent"} size="sm">
-                    <MdOutlineRemoveRedEye style={{ cursor: "pointer", fontSize: "16px" }} />
-                </Button> */}
-                <Button bg={"transparent"} size="sm">
-                 <FaRegEdit style={{ cursor: "pointer", fontSize: "14px" }}  color="#000"/>
-                </Button>
-
-            </DialogTrigger>
-
-            <DialogContent
-                 bg={"#fff"}
-                 // w={{ lg: "60%", md: "230px" }}
-                 w={{ base: '90%', md: '400px' }}
-                height={'auto'}
-                 
-                 overflowX="hidden" 
-                 p={3} // Reduced padding
-                 bgSize={'md'}
-            >
-                <DialogHeader bg="white" >
-                    <DialogTitle alignSelf="center" color="black" fontSize="14px">Edit</DialogTitle>
-                </DialogHeader>
-
-                <DialogBody bg="white">
-                    <Stack py={3}>
-
-                        <Field.Root>
-                            <Field.Label color="black" pt={1} fontSize="12px">Country</Field.Label>
-                            <Input value="Lorem Ipsum" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-                        </Field.Root>
-                    </Stack>
-
-                </DialogBody>
-                <DialogFooter display="flex" justifyContent="center" pt={"2"}>
-                    <Button w="100%" bg="#02A0A0" color={"#fff"}>
-                        Save
-                    </Button>
-                </DialogFooter>
-
-                <DialogCloseTrigger color="black" />
-            </DialogContent>
-        </DialogRoot >
-
-    )
+        <DialogCloseTrigger color="black" />
+      </DialogContent>
+    </DialogRoot>
+  );
 }
 
-export default EditCountryModel
+export default EditCountryModel;

src/Pages/MasterModule/JobStatus/EditJobStatusModel.tsx

@@ -2,6 +2,7 @@ import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHead
 import { Box, Field, IconButton, Input, Stack, Text, Textarea } from "@chakra-ui/react"
 import { Button } from "../../../components/ui/button"
 import { FaRegEdit } from "react-icons/fa";
+import Edit from "../../../components/ActionIcons/Edit";
 
 
 function EditJobStatusModel() {
@@ -12,13 +13,7 @@ function EditJobStatusModel() {
 
         <DialogRoot placement="center">
             <DialogTrigger asChild>
-                {/* <Button bg={"transparent"} size="sm">
-                    <MdOutlineRemoveRedEye style={{ cursor: "pointer", fontSize: "16px" }} />
-                </Button> */}
-                <Button bg={"transparent"} size="sm">
-                 <FaRegEdit style={{ cursor: "pointer", fontSize: "14px" }}  color="#000"/>
-                </Button>
-
+               <Edit />
             </DialogTrigger>
 
             <DialogContent

src/Pages/MasterModule/JobStatus/JobStatus.tsx

@@ -49,8 +49,8 @@ const JobStatus = () => {
           Job Status
           </Text>
 
-          <HStack mr={5}>
-            <InputGroup marginRight={"1rem"}
+          <HStack >
+            <InputGroup 
               startElement={
                 <LuSearch fontSize={"xs"} style={{ position: 'relative', left: '10px' }} />
               }
@@ -63,8 +63,8 @@ const JobStatus = () => {
                 colorPalette={"blue"}
                 _focus={{ border: "1px solid #02A0A0" }}
                 rounded={"md"}
-                size={"2xs"}
-                fontSize={"2sm"}
+                size={"xs"}
+                fontSize={"sm"}
                 placeholder="Search..."
                 bgColor={'#EEEEEE'}
                 ps={8}

src/Pages/MasterModule/JobType/EditJobModel.tsx

@@ -1,62 +1,67 @@
-import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../../components/ui/dialog"
-import { Box, Field, IconButton, Input, Stack, Text, Textarea } from "@chakra-ui/react"
-import { Button } from "../../../components/ui/button"
-import { FiUpload } from "react-icons/fi";
-import { FaRegEdit } from "react-icons/fa";
-
+import {
+  DialogBody,
+  DialogCloseTrigger,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogRoot,
+  DialogTitle,
+  DialogTrigger,
+} from "../../../components/ui/dialog";
+import { Field, Input, Stack } from "@chakra-ui/react";
+import { Button } from "../../../components/ui/button";
+import Edit from "../../../components/ActionIcons/Edit";
 
 function EditJobeModel() {
+  return (
+    <DialogRoot placement="center">
+      <DialogTrigger asChild>
+        <Edit />
+      </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>
 
-   
-    return (
+        <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>
 
-        <DialogRoot placement="center">
-            <DialogTrigger asChild>
-                {/* <Button bg={"transparent"} size="sm">
-                    <MdOutlineRemoveRedEye style={{ cursor: "pointer", fontSize: "16px" }} />
-                </Button> */}
-                <Button bg={"transparent"} size="sm">
-                 <FaRegEdit style={{ cursor: "pointer", fontSize: "14px" }}  color="#000"/>
-                </Button>
-
-            </DialogTrigger>
-
-            <DialogContent
-                 bg={"#fff"}
-                 // w={{ lg: "60%", md: "230px" }}
-                 w={{ base: '90%', md: '400px' }}
-                height={'auto'}
-                 
-                 overflowX="hidden" 
-                 p={3} // Reduced padding
-                 bgSize={'md'}
-            >
-                <DialogHeader bg="white" >
-                    <DialogTitle alignSelf="center" color="black" fontSize="14px">Edit</DialogTitle>
-                </DialogHeader>
-
-                <DialogBody bg="white">
-                    <Stack py={3}>
-
-                        <Field.Root>
-                            <Field.Label color="black" pt={1} fontSize="12px">Job Type</Field.Label>
-                            <Input value="Lorem Ipsum" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-                        </Field.Root>
-                    </Stack>
-
-                </DialogBody>
-                <DialogFooter display="flex" justifyContent="center" pt={"2"}>
-                    <Button w="100%" bg="#02A0A0" color={"#fff"}>
-                        Save
-                    </Button>
-                </DialogFooter>
-
-                <DialogCloseTrigger color="black" />
-            </DialogContent>
-        </DialogRoot >
-
-    )
+        <DialogCloseTrigger color="black" />
+      </DialogContent>
+    </DialogRoot>
+  );
 }
 
-export default EditJobeModel
+export default EditJobeModel;

src/Pages/MasterModule/JobType/JobType.tsx

@@ -49,8 +49,8 @@ const JobType = () => {
           Job Type
           </Text>
 
-          <HStack mr={5}>
-            <InputGroup marginRight={"1rem"}
+          <HStack >
+            <InputGroup 
               startElement={
                 <LuSearch fontSize={"xs"} style={{ position: 'relative', left: '10px' }} />
               }
@@ -63,8 +63,8 @@ const JobType = () => {
                 colorPalette={"blue"}
                 _focus={{ border: "1px solid #02A0A0" }}
                 rounded={"md"}
-                size={"2xs"}
-                fontSize={"2sm"}
+                size={"xs"}
+                fontSize={"sm"}
                 placeholder="Search..."
                 bgColor={'#EEEEEE'}
                 ps={8}

src/Pages/MasterModule/TemplateMaster/EditTemplateModel.tsx

@@ -1,100 +1,143 @@
-import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../../components/ui/dialog"
-import { Box, Field, IconButton, Input, Stack, Text, Textarea } from "@chakra-ui/react"
-import { Button } from "../../../components/ui/button"
+import {
+  DialogBody,
+  DialogCloseTrigger,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogRoot,
+  DialogTitle,
+  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";
-
+import Edit from "../../../components/ActionIcons/Edit";
 
 function EditTemplateModel() {
+  const [images, setImages] = useState<string[]>([]);
 
-    const [images, setImages] = useState<string[]>([]);
+  const handleImageChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    if (event.target.files) {
+      const selectedFiles = Array.from(event.target.files);
 
-    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
-      }
-    };
+      const newImages = selectedFiles.map((file) => {
+        return URL.createObjectURL(file); // Convert to preview URL
+      });
 
-   
-    return (
+      setImages((prevImages) => [...prevImages, ...newImages]); // Append new images
+    }
+  };
 
-        <DialogRoot placement="center">
-            <DialogTrigger asChild>
-                {/* <Button bg={"transparent"} size="sm">
-                    <MdOutlineRemoveRedEye style={{ cursor: "pointer", fontSize: "16px" }} />
-                </Button> */}
-                <Button bg={"transparent"} size="sm">
-                 <FaRegEdit style={{ cursor: "pointer", fontSize: "14px" }}  color="#000"/>
-                </Button>
+  return (
+    <DialogRoot placement="center">
+      <DialogTrigger asChild>
+        <Edit />
+      </DialogTrigger>
 
-            </DialogTrigger>
+      <DialogContent
+        bg={"#fff"}
+        // w={{ lg: "60%", md: "230px" }}
+        w={{ base: "90%", md: "400px" }}
+        height={"auto"}
+        overflowX="hidden"
+        p={3} // Reduced padding
+        bgSize={"md"}
+      >
+        <DialogHeader bg="white">
+          <DialogTitle alignSelf="center" color="black" fontSize="14px">
+            Add
+          </DialogTitle>
+        </DialogHeader>
 
-            <DialogContent
-                 bg={"#fff"}
-                 // w={{ lg: "60%", md: "230px" }}
-                 w={{ base: '90%', md: '400px' }}
-                height={'auto'}
-                 
-                 overflowX="hidden" 
-                 p={3} // Reduced padding
-                 bgSize={'md'}
-            >
-                <DialogHeader bg="white" >
-                    <DialogTitle alignSelf="center" color="black" fontSize="14px">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"
+              />
 
-                <DialogBody bg="white">
-                    <Stack py={3}>
+              <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>
 
-                        <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" />
+              {/* <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>
 
-                            
-                            <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 >
-
-    )
+        <DialogCloseTrigger color="black" />
+      </DialogContent>
+    </DialogRoot>
+  );
 }
 
-export default EditTemplateModel
+export default EditTemplateModel;

src/Pages/MasterModule/TemplateMaster/TemplateMaster.tsx

@@ -28,8 +28,8 @@ const managepost: any[] = [
     "Images": (
       // <Image w={50} src={img} />
       <HStack >
-      <Image w={100} h={50} src={img} />
-      <Image w={100} h={50} src={Templateimg} />
+      <Image rounded={'lg'} w={100} h={50} src={img} />
+      <Image rounded={'lg'} w={100} h={50} src={Templateimg} />
       </HStack>
 
 
@@ -62,8 +62,8 @@ const TemplateMaster = () => {
           Template Master
           </Text>
 
-          <HStack mr={5}>
-            <InputGroup marginRight={"1rem"}
+          <HStack >
+            <InputGroup 
               startElement={
                 <LuSearch fontSize={"xs"} style={{ position: 'relative', left: '10px' }} />
               }
@@ -76,8 +76,8 @@ const TemplateMaster = () => {
                 colorPalette={"blue"}
                 _focus={{ border: "1px solid #02A0A0" }}
                 rounded={"md"}
-                size={"2xs"}
-                fontSize={"2sm"}
+                size={"xs"}
+                fontSize={"sm"}
                 placeholder="Search..."
                 bgColor={'#EEEEEE'}
                 ps={8}

src/Pages/MasterModule/WorkspaceMode/EditWorkModel.tsx

@@ -1,61 +1,76 @@
-import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../../components/ui/dialog"
-import { Box, Field, IconButton, Input, Stack, Text, Textarea } from "@chakra-ui/react"
-import { Button } from "../../../components/ui/button"
+import {
+  DialogBody,
+  DialogCloseTrigger,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogRoot,
+  DialogTitle,
+  DialogTrigger,
+} from "../../../components/ui/dialog";
+import {
+  Box,
+  Field,
+  IconButton,
+  Input,
+  Stack,
+  Text,
+  Textarea,
+} from "@chakra-ui/react";
+import { Button } from "../../../components/ui/button";
 import { FaRegEdit } from "react-icons/fa";
-
+import Edit from "../../../components/ActionIcons/Edit";
 
 function EditWorkModel() {
+  return (
+    <DialogRoot placement="center">
+      <DialogTrigger asChild>
+        <Edit />
+      </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>
 
-   
-    return (
+        <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>
 
-        <DialogRoot placement="center">
-            <DialogTrigger asChild>
-                {/* <Button bg={"transparent"} size="sm">
-                    <MdOutlineRemoveRedEye style={{ cursor: "pointer", fontSize: "16px" }} />
-                </Button> */}
-                <Button bg={"transparent"} size="sm">
-                 <FaRegEdit style={{ cursor: "pointer", fontSize: "14px" }}  color="#000"/>
-                </Button>
-
-            </DialogTrigger>
-
-            <DialogContent
-                 bg={"#fff"}
-                 // w={{ lg: "60%", md: "230px" }}
-                 w={{ base: '90%', md: '400px' }}
-                height={'auto'}
-                 
-                 overflowX="hidden" 
-                 p={3} // Reduced padding
-                 bgSize={'md'}
-            >
-                <DialogHeader bg="white" >
-                    <DialogTitle alignSelf="center" color="black" fontSize="14px">Edit</DialogTitle>
-                </DialogHeader>
-
-                <DialogBody bg="white">
-                    <Stack py={3}>
-
-                        <Field.Root>
-                            <Field.Label color="black" pt={1} fontSize="12px">Workspace Mode</Field.Label>
-                            <Input value="Lorem Ipsum" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-                        </Field.Root>
-                    </Stack>
-
-                </DialogBody>
-                <DialogFooter display="flex" justifyContent="center" pt={"2"}>
-                    <Button w="100%" bg="#02A0A0" color={"#fff"}>
-                        Save
-                    </Button>
-                </DialogFooter>
-
-                <DialogCloseTrigger color="black" />
-            </DialogContent>
-        </DialogRoot >
-
-    )
+        <DialogCloseTrigger color="black" />
+      </DialogContent>
+    </DialogRoot>
+  );
 }
 
-export default EditWorkModel
+export default EditWorkModel;

src/Pages/MasterModule/WorkspaceMode/WorkspaceMode.tsx

@@ -49,8 +49,8 @@ const WorkspaceMode = () => {
           Workspace Mode
           </Text>
 
-          <HStack mr={5}>
-            <InputGroup marginRight={"1rem"}
+          <HStack >
+            <InputGroup 
               startElement={
                 <LuSearch fontSize={"xs"} style={{ position: 'relative', left: '10px' }} />
               }
@@ -63,8 +63,8 @@ const WorkspaceMode = () => {
                 colorPalette={"blue"}
                 _focus={{ border: "1px solid #02A0A0" }}
                 rounded={"md"}
-                size={"2xs"}
-                fontSize={"2sm"}
+                size={"xs"}
+                fontSize={"sm"}
                 placeholder="Search..."
                 bgColor={'#EEEEEE'}
                 ps={8}

src/Pages/OnBoarding/CreatePass.tsx

@@ -1,149 +0,0 @@
-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";
-
-interface FormValues {
-  password: string;
-  confirmPassword: string;
-}
-
-const CreatePass = () => {
-  const [isLoading, setIsLoading] = useState<boolean>(false);
-  const context = useContext(GlobalStateContext);
-  if (!context) {
-    throw new Error("App must be used within a GlobalStateProvider");
-  }
-  const { setIsAuthenticate } = context;
-  const {
-    register,
-    handleSubmit,
-    formState: { errors },
-  } = useForm<FormValues>();
-
-  const onSubmit = handleSubmit((data) => {
-    setIsLoading(true);
-    if (data?.password === "password123") { 
-      setTimeout(() => {
-        setIsAuthenticate(true);
-        setIsLoading(false);
-      }, 3000); 
-    } else {
-      toaster.create({
-        title: `Invalid Credentials`,
-        type: "error",
-      });
-      setIsLoading(false);
-    }
-  });
-
-  return (
-    <VStack w={"100%"} h={"100vh"} bg={"#ffffff"}>
-      <HStack
-        boxShadow={"rgba(99, 99, 99, 0.2) 0px 2px 8px 0px"}
-        w={"100%"}
-        ps={8}
-        h={"7%"}
-        justifyContent={"flex-start"}
-      >
-        <Image w={50} src={logo} />
-      </HStack>
-
-      <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>
-
-        <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"}
-              textTransform={"uppercase"}
-            >
-              create a password
-            </Text>
-
-            <VStack mt={6} gap={4} w={"full"}>
-              <Field
-                color={"#313039"}
-                label={"Enter password"}
-                w={"100%"}
-                invalid={!!errors.password}
-                errorText={errors.password?.message}
-              >
-                <Input
-                  ps={3}
-                  type="password"
-                  {...register("password", {
-                    required: "Password is required",
-                    minLength: {
-                      value: 6,
-                      message: "Password must be at least 6 characters long",
-                    },
-                  })}
-                  placeholder="Enter your password"
-                />
-              </Field>
-              <Field
-                color={"#313039"}
-                label={"Confirm password"}
-                w={"100%"}
-                invalid={!!errors.confirmPassword}
-                errorText={errors.confirmPassword?.message}
-              >
-                <Input
-                  ps={3}
-                  type="password"
-                  {...register("confirmPassword", {
-                    required: "Please confirm your password",
-                    validate: (value) => 
-                      value === getValues("password") || "Passwords do not match",
-                  })}
-                  placeholder="Confirm your password"
-                />
-              </Field>
-              <Button
-                loading={isLoading}
-                mt={4}
-                size={"sm"}
-                bg={"#02A0A0"}
-                rounded={"md"}
-                w={"100%"}
-                color={"#ffffff"}
-                type="submit"
-                textTransform="capitalize"
-              >
-                Confirm Password
-              </Button>
-
-              <Text>Forgot password</Text>
-            </VStack>
-          </VStack>
-        </Center>
-        <Toaster />
-      </HStack>
-    </VStack>
-  );
-};
-
-export default CreatePass;

src/Pages/OnBoarding/LoginOtp.tsx

@@ -1,142 +0,0 @@
-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 uiEdit from "../../assets/icons/edit.png";
-import { Button } from "../../components/ui/button";
-import { Field } from "../../components/ui/field";
-import { Toaster, toaster } from "../../components/ui/toaster";
-import { PinInput } from "../../components/ui/pin-input";
-
-interface FormValues {
-  mobileNumber: number;
-}
-
-const LoginOtp = () => {
-  const [isLoading, setIsLoading] = useState<boolean>(false);
-  const context = useContext(GlobalStateContext);
-  if (!context) {
-    throw new Error("App must be used within a GlobalStateProvider");
-  }
-  const { setIsAuthenticate } = context;
-  const {
-    register,
-    handleSubmit,
-    formState: { errors },
-  } = useForm<FormValues>();
-
-  const onSubmit = handleSubmit((data) => {
-    setIsLoading(true);
-    if (data?.mobileNumber === 1234567890) {
-      setTimeout(() => {
-        setIsAuthenticate(true);
-        setIsLoading(false);
-      }, 3000); // 3-second delay
-    } else {
-      toaster.create({
-        title: `Invalid Credentials`,
-        type: "error",
-      });
-      setIsLoading(false);
-    }
-  });
-
-  return (
-    <VStack w={"100%"} h={"100vh"} bg={"#ffffff"}>
-      <HStack
-        boxShadow={"rgba(99, 99, 99, 0.2) 0px 2px 8px 0px"}
-        w={"100%"}
-        ps={8}
-        h={"7%"}
-        justifyContent={"flex-start"}
-      >
-        <Image w={50} src={logo} />
-      </HStack>
-
-      <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>
-
-        <Center
-          as={"form"}
-          onSubmit={onSubmit}
-          p={{ base: 4, md: 16 }}
-          w={{ base: "100%", md: "50%" }}
-          h={"100%"}
-        >
-          <VStack gap={2} w={"100%"} alignItems={"center"}>
-            <Text
-              w={"100%"}
-              textAlign={"center"}
-              fontSize={"24px"}
-              fontWeight={"normal"}
-              color={"#313039"}
-            >
-              Enter otp
-            </Text>
-            <Text
-              w={"100%"}
-              textAlign={"center"}
-              fontSize={"sm"}
-              fontWeight={"normal"}
-              color={"#49475A"}
-            >
-              OTP has been send to your E-mail Address
-            </Text>
-            <HStack>
-              <Image src={uiEdit} h="24px" w="24px" />
-              <Text
-                w={"100%"}
-                textAlign={"center"}
-                fontSize={"sm"}
-                fontWeight={"normal"}
-                color={"#49475A"}
-              >
-                9619565889
-              </Text>
-            </HStack>
-
-            <VStack mt={6} gap={4} w={"full"}>
-              <PinInput />
-              <Text
-                w={"100%"}
-                textAlign={"center"}
-                fontSize={"sm"}
-                fontWeight={"600"}
-                color={"#4746F4"}
-                textDecoration="underline"
-              >
-                Resend OTP
-              </Text>
-              <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>
-          </VStack>
-        </Center>
-        <Toaster />
-      </HStack>
-    </VStack>
-  );
-};
-
-export default LoginOtp;

src/Pages/Profile/Profile.tsx

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

src/Pages/SubAdmin/AddModel.tsx

@@ -12,7 +12,7 @@ function AddModel() {
                 {/* <Button bg={"transparent"} size="sm">
                     <MdOutlineRemoveRedEye style={{ cursor: "pointer", fontSize: "16px" }} />
                 </Button> */}
-                <Button px={4} size={"xs"} bg={"#02A0A0"}><IoMdAdd /> <Text>Add</Text></Button>
+                <Button rounded={'md'} px={4} py={2} size={"xs"} bg={"#02A0A0"}><IoMdAdd /> Add</Button>
 
             </DialogTrigger>
 
@@ -65,7 +65,7 @@ function AddModel() {
                     </Stack>
                 </DialogBody>
                 <DialogFooter display="flex" justifyContent="center" pt={"2"}>
-                    <Button w="100%" bg="#02A0A0" color={"#fff"}>
+                    <Button size={'xs'} w="100%" bg="#02A0A0" color={"#fff"}>
                         Save
                     </Button>
                 </DialogFooter>

src/Pages/SubAdmin/SubAdmin.tsx

@@ -8,6 +8,7 @@ import { RiDeleteBin5Line } from "react-icons/ri";
 import AddModel from "./AddModel"
 import EditSubAdmin from "../../components/EditSubAdmin"
 import ViewSubAdmin from "./ViewSubAdmin"
+import Delete from "../../components/ActionIcons/Delete"
 
 
 // table data
@@ -33,16 +34,11 @@ const managepost: any[] = [
     "Action": (
       <HStack justifyContent="center">
 
-        {/* <MdOutlineRemoveRedEye
-            style={{ cursor: "pointer", fontSize: "16px" }}
-          /> */}
-        {/* <ViewDailog /> */}
         <ViewSubAdmin />
         <EditSubAdmin />
 
-        {/* <RiDeleteBin5Line style={{ cursor: "pointer" }} /> */}
         <AlertDailog
-          AltertTiggerIcon={RiDeleteBin5Line}
+          AltertTiggerIcon={() => <Delete />} 
           alertText="Delete Users"
           alertIcon={<Image src={"DeleteIcon"} h={"39px"} />}
           alertCaption="are you sure you want to delete ?"
@@ -81,11 +77,11 @@ const SubAdmin = () => {
                 p={3}
                 w={300}
                 bg={"#fff"}
-                colorPalette={"blue"}
+                colorPalette={"cyan"}
                 _focus={{ border: "1px solid #02A0A0" }}
                 rounded={"md"}
-                size={"2xs"}
-                fontSize={"2sm"}
+                size={"xs"}
+                fontSize={"sm"}
                 placeholder="Search..."
                 bgColor={'#EEEEEE'}
                 ps={8}

src/Pages/SubAdmin/ViewSubAdmin.tsx

@@ -1,82 +1,183 @@
-import { Button } from "../../components/ui/button"
-import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../components/ui/dialog"
-import { Field, Grid, Heading, Input, Stack, Text } from "@chakra-ui/react"
-import { Checkbox } from "../../components/ui/checkbox"
+import { 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";
+import View from "../../components/ActionIcons/View";
 function ViewSubAdmin() {
-    return (
+  return (
+    <DialogRoot placement="center">
+      <DialogTrigger asChild>
+        <View />
+      </DialogTrigger>
 
-        <DialogRoot placement="center" >
-            <DialogTrigger asChild>
-                <Button bg={"transparent"} size="sm">
-                    <MdOutlineRemoveRedEye style={{ cursor: "pointer", }} color="#000"/>
-                </Button>
-                {/* <Button><FaRegEdit /></Button> */}
+      <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>
 
-            </DialogTrigger>
+        <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
+              />
 
-            <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>
+              <Field.Label color="black" pt={1} fontSize="12px">
+                Last Name
+              </Field.Label>
+              <Input
+                value="Joshi"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={1}
+                fontSize="12px"
+                height="30px"
+                readOnly
+              />
 
-                <DialogBody bg="white">
-                    <Stack py={3} >
+              <Field.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.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">
+                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">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"}>
+              <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>
+                    </Button> */}
+        </DialogFooter>
 
-                <DialogCloseTrigger color="black" />
-            </DialogContent>
-        </DialogRoot >
-
-    )
+        <DialogCloseTrigger color="black" />
+      </DialogContent>
+    </DialogRoot>
+  );
 }
 
-export default ViewSubAdmin
+export default ViewSubAdmin;

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,102 @@
+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,
+    //   }),
+    // }),
+       // 🔹 PUT: Update an About Us entry
+       updateAboutUs: builder.mutation({
+        query: (updatedData) => ({
+          url: "/about-us/update", // ✅ Updated URL
+          method: "POST",
+          body: updatedData,
+        }),
+      }),
+    // 🔹 DELETE: Remove a post by ID
+    deletePost: builder.mutation<{ success: boolean }, number>({
+      query: (id) => ({
+        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,language_code:string
+}
+
+
+export type UpdateAboutUsResponse={
+  id: number; updatedData: string,language_code:string
+}
+
+
+export type AboutUs = {
+  id: number;
+  language_master_xid: number;
+  content: string;
+  is_active: boolean;
+};
+

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,35 +1,34 @@
-import { CgWorkAlt } from "react-icons/cg";
+import { LuBriefcaseBusiness} from "react-icons/lu";
+import { MdHeadsetMic, MdOutlineDashboard} from "react-icons/md";
 import { GoDotFill } from "react-icons/go";
-import { PiHeadphonesBold } from "react-icons/pi";
-import { RiUserSettingsLine } from "react-icons/ri";
-import { TbEdit, TbLayoutDashboard } from "react-icons/tb";
-import { TiDocumentText, TiUserAddOutline, TiUserOutline } from "react-icons/ti";
-
-
+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/register-user",
-          initPath:'/manage-user',
-          Icon: TiUserOutline,
+          initPath: "/manage-users",
+          Icon: BiUserPin,
           type:'multiple',
           children: [
             {
               title: "Register Users",
-              path: "/manage-user/register-user",
+              path: "/manage-users/register-users",
               Icon: GoDotFill,
             },
             {
               title: "Deactivated Accounts",
-              path: "/manage-user/deactivate-accounts",
+              path: "/manage-users/deactivated-accounts",
               Icon: GoDotFill,
             },
           ],
@@ -37,37 +36,41 @@ export const nav = [
         {
           title: "Manage Post",
           path: "/manage-post",
-          Icon: TbEdit,
+          Icon: HiOutlinePencilSquare,
           type:'single'
         },
         {
           title: "Manage Sub-Admin",
-          path: "/manage-sub-admin",
-          Icon: TiUserAddOutline,
+          path: "/sub-admin",
+          Icon: BiUser,
           type:'single'
         },
         {
           title: "Manage Jobs",
           path: "/manage-jobs",
-          Icon: CgWorkAlt,
+          Icon: LuBriefcaseBusiness,
+          type:'single'
+        },
+        {
+          title: "Manage Groups",
+          path: "/manage-groups",
+          Icon: PiUsersThree,
           type:'single'
         },
         {
           title: "Manage Contact Us",
-          path: "/manage-contact-us",
-          Icon: PiHeadphonesBold,
+          path: "/manage-contact",
+          Icon: MdHeadsetMic  ,
           type:'single'
         },
-        
         {
           title: "Manage CMS",
-          initPath:'/manage-cms',
-          path: "/manage-cms/faq",
-          Icon: TiDocumentText,
+          initPath: "/manage-cms",
+          Icon: AiOutlineFileText,
           type:'multiple',
           children: [
             {
-              title: "FAQ",
+              title: "FAQs",
               path: "/manage-cms/faq",
               Icon: GoDotFill,
             },
@@ -83,7 +86,12 @@ export const nav = [
             },
             {
               title: "Terms And Conditions",
-              path: "/manage-cms/terms-and-condition",
+              path: "/manage-cms/terms-conditions",
+              Icon: GoDotFill,
+            },
+            {
+              title: "Privacy",
+              path: "/manage-cms/privacy",
               Icon: GoDotFill,
             },
           ],
@@ -91,8 +99,45 @@ export const nav = [
         {
           title: "My Profile",
           path: "/profile",
-          Icon: RiUserSettingsLine,
+          Icon: BsPersonBadge,
           type:'single'
         },
-        
+        {
+          title: "Master Module",
+          initPath: "/master-module",
+          Icon: BsBoxes,
+          type:'multiple',
+          children: [
+            {
+              title: "Agency Master",
+              path: "/master-module/agency-master",
+              Icon: GoDotFill,
+            },
+            {
+              title: "Template Master",
+              path: "/master-module/template-master",
+              Icon: GoDotFill,
+            },
+            {
+              title: "Job Type",
+              path: "/master-module/job-type",
+              Icon: GoDotFill,
+            },
+            {
+              title: "Workspace Mode",
+              path: "/master-module/workspace-mode",
+              Icon: GoDotFill,
+            },
+            {
+              title: "Country",
+              path: "/master-module/country",
+              Icon: GoDotFill,
+            },
+            {
+              title: "Job Status",
+              path: "/master-module/job-status",
+              Icon: GoDotFill,
+            },
+          ],
+        },
   ];

src/Routes/Routes.ts

@@ -1,55 +1,66 @@
 
+
 import Dashboard from "../Pages/Dashboard/Dashboard";
-import AboutUs from "../Pages/ManageCMS/AboutUs/AboutUs";
-import FreqAskQuestion from "../Pages/ManageCMS/FAQ/FreqAskQuestion";
-import PrivacyPolicy from "../Pages/ManageCMS/PrivacyPolicy/PrivacyPolicy";
-import ManageContactUs from "../Pages/ManageContactUs/ManageContactUs";
+import ManageGroups from "../Pages/ManageGroups/ManageGroups";
 import ManageJobs from "../Pages/ManageJobs/ManageJobs";
 import ManagePost from "../Pages/ManagePost/ManagePost";
-import ManageSubAdmin from "../Pages/ManageSubAdmin/ManageSubAdmin";
-import DeactivatedAccounts from "../Pages/ManageUser/DeactivatedAccounts/DeactivatedAccounts";
-import RegisterUsers from "../Pages/ManageUser/RegisterUsers/RegisterUsers";
 import Profile from "../Pages/Profile/Profile";
+import SubAdmin from "../Pages/SubAdmin/SubAdmin";
+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/register-user", Component: RegisterUsers },
-    { path: "/manage-user/deactivate-accounts", Component: DeactivatedAccounts },
+    { path: "/dashboard", Component: Dashboard },
+    { path: "/manage-users/register-users", Component: RegisterUsers },
+    { path: "/manage-users/deactivated-accounts", Component: DeactivatedAccounts },
     { path: "/manage-post", Component: ManagePost },
-    { path: "/manage-sub-admin", Component: ManageSubAdmin },
-    { path: "/manage-jobs", Component: ManageJobs },
-    { path: "/manage-contact-us", Component: ManageContactUs },
-    { path: "/manage-cms/faq", Component: FreqAskQuestion },
-
-
-
-    { path: "/manage-cms/about-us", Component: AboutUs },
-
-
-
-    { path: "/manage-cms/privacy-policy", Component: PrivacyPolicy },
-
-
-    { path: "/manage-cms/terms-and-condition", Component: PrivacyPolicy },
-
-
-
-
-    
-
-
-
-
-
+    { path: "/sub-admin", Component: SubAdmin},
+    { path: "/manage-jobs", Component: ManageJobs},
+    { path: "/manage-groups", Component: ManageGroups },
+    { path: "/manage-contact", Component: ManageContact},
 
 
 
+    { path: "/manage-cms/faq", Component: FAQ},
+    { path: "/manage-cms/about-us", Component: AboutUs},
+    { path: "/manage-cms/privacy-policy", Component: PrivacyPolicy},
+    { path: "/manage-cms/terms-conditions", Component: TermsAndConditions},
+    { path: "/manage-cms/privacy", Component: Spinner},
 
 
 
+    { path: "/my-profile", Component: MyProfile},
+    { path: "/manage-notification", Component: Notification},
 
 
 
 
 
     { path: "/profile", Component: Profile},
+
+
+    { path: "/master-module/agency-master", Component: AgencyMaster},
+    { path: "/master-module/template-master", Component: TemplateMaster},
+    { path: "/master-module/job-type", Component: JobType},
+    { path: "/master-module/workspace-mode", Component: WorkspaceMode},
+    { path: "/master-module/country", Component: Country},
+    { path: "/master-module/job-status", Component: JobStatus},
+    // { path: "/job-status", Component: Spinner},
+
 ]

src/Types/aboutUsType.tsx

@@ -0,0 +1,27 @@
+// 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;
+    about_language: {
+        id: number;
+        language_code: string;
+        language_name: string;
+    }
+}
+
+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,18 @@
+export interface PrivacyPolicyContent {
+  id: number;
+  language_master_xid: number;
+  content: string;
+  is_active: boolean;
+  privacy_language:{
+    id:number;
+    language_code:string;
+    language_name:string;
+  }
+}
+
+export interface PrivacyPolicyResponse {
+  status: "success" | "error"; // Assuming it can be "success" or "error"
+  status_code: number;
+  message: string;
+  data: PrivacyPolicyContent[];
+}

src/components/ActionIcons/Delete.tsx

@@ -0,0 +1,34 @@
+import { Icon, Image } from "@chakra-ui/react";
+import { Tooltip } from "../ui/tooltip";
+import { RiDeleteBin5Line } from "react-icons/ri";
+
+const Delete = () => {
+  return (
+    <Tooltip
+      content="Delete"
+      openDelay={100}
+      contentProps={{
+        css: {
+          "--tooltip-bg": "#fed7d7",
+          color: "#822727",
+          padding: "1px 8px",
+        },
+      }}
+    >
+      <Icon
+        cursor={"pointer"}
+        p={1}
+        _hover={{ bg: "#00000015" }}
+        rounded={"xs"}
+        boxSize={5}
+        h={"24px"}
+        w={"24px"}
+        // color={iconColor && iconColor}
+      >
+        <RiDeleteBin5Line />
+      </Icon>
+    </Tooltip>
+  );
+};
+
+export default Delete;

src/components/ActionIcons/Edit.tsx

@@ -0,0 +1,33 @@
+import { Icon } from "@chakra-ui/react";
+import { TbEdit } from "react-icons/tb";
+import { Tooltip } from "../ui/tooltip";
+
+const Edit = () => {
+  return (
+    <Tooltip
+      content="Edit"
+      openDelay={100}
+      contentProps={{
+        css: {
+          "--tooltip-bg": "#c6f6d5",
+          color: "#22543d",
+          padding: "1px 8px",
+        },
+      }}
+    >
+      <Icon
+        cursor={"pointer"}
+        p={1}
+        _hover={{ bg: "#00000015" }}
+        rounded={"xs"}
+        boxSize={5}
+        h={"24px"}
+        w={"24px"}
+      >
+        <TbEdit />
+      </Icon>
+    </Tooltip>
+  );
+};
+
+export default Edit;

src/components/ActionIcons/View.tsx

@@ -0,0 +1,34 @@
+import { Icon } from "@chakra-ui/react";
+import { Tooltip } from "../ui/tooltip";
+import { MdOutlineRemoveRedEye } from "react-icons/md";
+
+const View = () => {
+  return (
+    <Tooltip
+      content="View"
+      openDelay={100}
+      contentProps={{
+        css: {
+          "--tooltip-bg": "#ccecec",
+          color: "#055757",
+          padding: "1px 8px",
+        },
+      }}
+    >
+      <Icon
+        cursor={"pointer"}
+        p={1}
+        _hover={{ bg: "#00000015" }}
+        rounded={"xs"}
+        boxSize={5}
+        h={"24px"}
+        w={"24px"}
+        // color={iconColor && iconColor}
+      >
+        <MdOutlineRemoveRedEye />
+      </Icon>
+    </Tooltip>
+  );
+};
+
+export default View;

src/components/AlertDailog.tsx

@@ -25,7 +25,6 @@ const AlertDailog: React.FC<DeleteConfirmationDialogProps> = ({
   onConfirm,
   alertText,
   alertCaption,
-  alertIcon,
   AltertTiggerIcon,
   button,
   iconColor,

src/components/DataTable.tsx

@@ -1,35 +1,130 @@
-import { Stack, Table } from "@chakra-ui/react"
-
+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 });
+  };
 
-const DataTable: React.FC<TableProps> = ({ tableHeadRow, data }) => {
   return (
-     <Stack mt={4} color={'#000000CC'} gap="10">
-          <Table.Root  key={'line'} size="sm" variant={'line'}>
-            <Table.Header >
-              <Table.Row bg={'#02A0A0'} >
-                {tableHeadRow.map((item, index)=><Table.ColumnHeader fontSize={'xs'} fontWeight={700} key={index} border={'none'}>{item}</Table.ColumnHeader>)}
-                
+    <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.Header>
-            <Table.Body>
-              {data.map((item:any, index) => (
-                <Table.Row 
-                      bg={index % 2 === 0 ? "#fff" : "#02A0A020"}  >
-                  {tableHeadRow.map((heading)=><Table.Cell key={index} fontSize={'xs'} fontWeight={500}  border={'none'}>{item[heading]}</Table.Cell>  )}
-                  
-                </Table.Row>))}
-            
-            </Table.Body>
-          </Table.Root>
-        </Stack>
-  )
-}
+            ))}
+          </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
+export default DataTable;

src/components/EditSubAdmin.tsx

@@ -1,79 +1,161 @@
-import { Button } from "./ui/button"
-import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "./ui/dialog"
-import { Field, Grid, Heading, Input, Stack, Text } from "@chakra-ui/react"
-import { Checkbox } from "./ui/checkbox"
-import { FaRegEdit } from "react-icons/fa";
+import { Field, Grid, Heading, Icon, Input, Stack, Text } from "@chakra-ui/react";
+import { TbEdit } from "react-icons/tb";
+import { Button } from "./ui/button";
+import { Checkbox } from "./ui/checkbox";
+import {
+  DialogBody,
+  DialogCloseTrigger,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogRoot,
+  DialogTitle,
+  DialogTrigger,
+} from "./ui/dialog";
+import Edit from "./ActionIcons/Edit";
 function EditSubAdmin() {
-    return (
+  return (
+    <DialogRoot placement="center">
+      <DialogTrigger asChild>
+          {/* <FaRegEdit style={{ cursor: "pointer" }} color="#000" /> */}
 
-        <DialogRoot placement="center">
-            <DialogTrigger asChild>
-                <Button bg={"transparent"} size="sm">
-                    <FaRegEdit style={{ cursor: "pointer", }} color="#000" />
-                </Button>
-                {/* <Button><FaRegEdit /></Button> */}
+          <Edit />
+        {/* <Button><FaRegEdit /></Button> */}
+      </DialogTrigger>
 
-            </DialogTrigger>
+      <DialogContent
+        bg={"#fff"}
+        w={{ base: "90%", md: "400px" }}
+        height={"80vh"}
+        overflow={"scroll"}
+        overflowX="hidden"
+        p={3} // Reduced padding
+        bgSize={"md"}
+      >
+        <DialogHeader bg="white">
+          <DialogTitle alignSelf="center" color="black" fontSize="14px">
+            Edit Sub Admin Account
+          </DialogTitle>
+        </DialogHeader>
 
-            <DialogContent
-                bg={"#fff"}
-                w={{ base: '90%', md: '400px' }}
-                height={'80vh'}
-                overflow={'scroll'}
-                overflowX="hidden" 
-                p={3} // Reduced padding
-                bgSize={'md'}
-            >
-                <DialogHeader bg="white">
-                    <DialogTitle alignSelf="center" color="black" fontSize="14px">Edit Sub Admin Account</DialogTitle>
-                </DialogHeader>
+        <DialogBody bg="white">
+          <Stack py={3}>
+            <Field.Root>
+              <Field.Label color="black" pt={1} fontSize="12px">
+                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">
+                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"
+              />
 
-                <DialogBody bg="white">
-                    <Stack py={3} >
+              <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.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">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 w="100%" bg="#02A0A0" color={"#fff"}>
-                        Save
-                    </Button>
-                </DialogFooter>
-
-                <DialogCloseTrigger color="black" />
-            </DialogContent>
-        </DialogRoot >
-
-    )
+              <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 EditSubAdmin
+export default EditSubAdmin;

src/components/MainFrame.tsx

@@ -9,17 +9,21 @@ const MotionVStack = motion(VStack)
 interface MainFrameProps {
   children: React.ReactNode
   title?: string
+  transperant?:boolean
 }
 
-const MainFrame: FC<MainFrameProps> = ({ children }) => {
+const MainFrame: FC<MainFrameProps> = ({ children, transperant }) => {
   return (
-    <MotionVStack overflowY="scroll" {...OPACITY_ON_LOAD} w="100%" h="94.5%"  p={3} pe={0} ps={0} pt={3}   >
+    <MotionVStack overflow={'auto'}   {...OPACITY_ON_LOAD} w="100%" minH="93%"   pe={2} ps={1.5} pt={1}  pb={2}>
       <Box
         w="100%"
-        h="100%"
-        bg="#ffffff"
-        rounded="md"
-        boxShadow={'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px'}
+        // minH="100%"
+        bg={transperant?'transperant':"#ffffff"}
+        // overflow={'scroll'}
+        rounded="lg"
+        boxShadow={transperant?'none':'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px'}
+        pt={transperant?0:3}
+        
       >
         {children}
       </Box>

src/components/ProgressBar/ProgessBar.css

@@ -0,0 +1,20 @@
+/* HTML: <div class="progressbar"></div> */
+.progressbar {
+    height: 4px;
+    width: 100%;
+    --c: no-repeat linear-gradient(#02A0A0 0 0);
+    background: var(--c), var(--c), #B8F8F8;
+    background-size: 60% 100%;
+    animation: l16 3s infinite;
+}
+
+@keyframes l16 {
+    0%   {background-position: -150% 0, -150% 0}
+    66%  {background-position: 250% 0, -150% 0}
+    100% {background-position: 250% 0, 250% 0}
+}
+
+.progressbarInactive{
+    height: 4px;
+    width: 100%;
+}

src/components/ProgressBar/ProgressBar.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import './ProgessBar.css';
+
+interface ProgressBarProps {
+  isLoading: boolean;
+}
+
+const ProgressBar: React.FC<ProgressBarProps> = ({ isLoading }) => {
+  return <span className={isLoading ? "progressbar" : "progressbarInactive"} />;
+};
+
+export default ProgressBar;

src/components/Sipnner/Spinner.css

@@ -0,0 +1,28 @@
+/* HTML: <div class="loader"></div> */
+.loader {
+    width: 25px;
+    aspect-ratio: 1;
+    display: grid;
+    border-radius: 50%;
+    background:
+    linear-gradient(0deg, rgba(2, 160, 160, 0.5) 30%, transparent 0 70%, rgba(2, 160, 160, 1) 0) 50% / 8% 100%,
+    linear-gradient(90deg, rgba(2, 160, 160, 0.25) 30%, transparent 0 70%, rgba(2, 160, 160, 0.75) 0) 50% / 100% 8%;
+    background-repeat: no-repeat;
+    animation: l23 1s infinite steps(12);
+  }
+  .loader::before,
+  .loader::after {
+     content: "";
+     grid-area: 1/1;
+     border-radius: 50%;
+     background: inherit;
+     opacity: 0.915;
+     transform: rotate(30deg);
+  }
+  .loader::after {
+     opacity: 0.83;
+     transform: rotate(60deg);
+  }
+  @keyframes l23 {
+    100% {transform: rotate(1turn)}
+  }

src/components/Sipnner/Spinner.tsx

@@ -0,0 +1,8 @@
+import { Center } from '@chakra-ui/react'
+import './Spinner.css'
+import MainFrame from '../MainFrame'
+export const Spinner = () =><Center boxShadow={'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px'} rounded={'lg'} w={'100%'} h={'89vh'} bg={'#fff'} > <div className='loader'/></Center>
+
+
+
+

src/components/ui/password-input.tsx

@@ -86,7 +86,7 @@ const VisibilityTrigger = React.forwardRef<HTMLButtonElement, ButtonProps>(
       <IconButton
         tabIndex={-1}
         ref={ref}
-        me="-2"
+        me="2"
         aspectRatio="square"
         size="sm"
         variant="ghost"

src/components/ui/pin-input.tsx

@@ -1,27 +0,0 @@
-import { PinInput as ChakraPinInput, Group } from "@chakra-ui/react"
-import * as React from "react"
-
-export interface PinInputProps extends ChakraPinInput.RootProps {
-  rootRef?: React.Ref<HTMLDivElement>
-  count?: number
-  inputProps?: React.InputHTMLAttributes<HTMLInputElement>
-  attached?: boolean
-}
-
-export const PinInput = React.forwardRef<HTMLInputElement, PinInputProps>(
-  function PinInput(props, ref) {
-    const { count = 4, inputProps, rootRef, attached, ...rest } = props
-    return (
-      <ChakraPinInput.Root ref={rootRef} {...rest}>
-        <ChakraPinInput.HiddenInput ref={ref} {...inputProps} />
-        <ChakraPinInput.Control>
-          <Group attached={attached}>
-            {Array.from({ length: count }).map((_, index) => (
-              <ChakraPinInput.Input color="black" key={index} index={index} />
-            ))}
-          </Group>
-        </ChakraPinInput.Control>
-      </ChakraPinInput.Root>
-    )
-  },
-)

src/components/ui/toaster.tsx

@@ -17,17 +17,17 @@ export const toaster = createToaster({
 
 export const Toaster = () => {
   return (
-    <Portal>
+    <Portal >
       <ChakraToaster toaster={toaster} insetInline={{ mdDown: "4" }}>
         {(toast) => (
-          <Toast.Root width={{ md: "sm" }}>
+          <Toast.Root  width={{ md: "sm" }}>
             {toast.type === "loading" ? (
               <Spinner size="sm" color="blue.solid" />
             ) : (
               <Toast.Indicator />
             )}
-            <Stack rounded={'full'} gap="1" flex="1" maxWidth="100%">
-              {toast.title && <Toast.Title>{toast.title}</Toast.Title>}
+            <Stack appearance={'light'} rounded={'full'} gap="1" flex="1" maxWidth="100%">
+              {toast.title && <Toast.Title p={2} color="#02A0A0">{toast.title}</Toast.Title>}
               {toast.description && (
                 <Toast.Description>{toast.description}</Toast.Description>
               )}