Merge branch 'parth' of http://git.wdipl.com/Siddhesh.More/SSA-Admin-Panel

.env

@@ -0,0 +1,5 @@
+VITE_API_URL='https://ssa.betadelivery.com/apia/v1'
+# VITE_API_URL='http://192.16.50.44/seo-backend/apia/v1'
+VITE_USER_NAME="Admin"
+VITE_PASSWORD="71%@L%es^bUX94`J9XT*@bh,._WWM{$%^^&&"
+VITE_APP_NAME=MyViteApp

dev-dist/sw.js

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

package.json

@@ -13,18 +13,25 @@
     "@chakra-ui/react": "^3.2.3",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
+    "@reduxjs/toolkit": "^2.5.1",
+    "axios": "^1.7.9",
+    "chart.js": "^4.4.7",
     "framer-motion": "^11.18.0",
+    "js-cookie": "^3.0.5",
     "next-themes": "^0.4.4",
     "react": "^18.3.1",
+    "react-chartjs-2": "^5.3.0",
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.54.2",
     "react-icons": "^5.4.0",
+    "react-redux": "^9.2.0",
     "react-router-dom": "^7.1.1",
     "vite-plugin-pwa": "^0.21.1"
   },
   "devDependencies": {
     "@chakra-ui/cli": "^3.2.3",
     "@eslint/js": "^9.17.0",
+    "@types/js-cookie": "^3.0.6",
     "@types/react": "^18.3.18",
     "@types/react-dom": "^18.3.5",
     "@vitejs/plugin-react": "^4.3.4",

src/App.tsx

@@ -1,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/GlobalStateProvider.tsx

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

src/Layouts/DefaultLayout.tsx

@@ -1,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 } = 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={false}  />
+    <HStack overflow={'hidden'} position={'relative'} bg="#F2F2F2" backgroundPosition="center" backgroundRepeat="repeat" backgroundSize="cover" gap={0} w="100%" h="calc(100% - 4px)"  p={0}>
+      
+      <VStack pt={0} zIndex={1} gap={0} rounded={'lg'} h="100%" w="15%" overflow={'auto'} >
+        <HStack w={'100%'} p={3} h={'7%'} justifyContent={'center'}>
           <Image w={55} src={logo} />
         </HStack>
-        <VStack  w={"100%"} p={3}>
-          {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 }, index) => type === 'single' ?
+            <NavLink  className="link" key={index} to={path} style={{ cursor: 'pointer', borderRadius: '8px', padding: '6px', width: '100%', display: 'flex', alignItems: 'center', gap: 6, border: '1px solid #ffffff', backgroundColor:'#fff', color:'#000', boxShadow:'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px'}} ><Icon style={{ fontSize: '20px' }} /> <Text fontSize={'xs'} w={'100%'}>{title}</Text></NavLink> :
+            <AccordionRoot key={index} bg={'#fff'} rounded={'lg'} collapsible>
+              <AccordionItem rounded={'lg'} bg={'#fff'} boxShadow={'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px'} borderBottom={'none'} p={0} key={index} value={title}>
+                <AccordionItemTrigger className="Oxygen" color={'#fff'}   onClick={() => navigate(path)} gap={0} style={{ cursor: 'pointer', borderRadius: '8px', padding: '5px', width: '100%', display: 'flex', alignItems: 'center', border: '1px solid #ffffff', backgroundColor:'#fff',color:'#000',  fontSize: '14px',  }}> <Text fontSize={'xs'} gap={1} display={'flex'} alignItems={'center'} ><Icon style={{ fontSize: '20px' }} />{title}</Text></AccordionItemTrigger>
+                {children?.map(({ title, path, Icon }, index) => <AccordionItemContent className={`linkChild Oxygen ${location?.pathname === path && 'activeChild'}`} key={index} onClick={()=>navigate(path)} style={{ marginTop: 6, cursor: 'pointer', borderRadius: '8px', padding: '6px', width: '100%', display: 'flex', alignItems: 'center', gap: 6, border: '1px solid #ffffff', backgroundColor:'#fff',color:'#919198' }} ><Icon style={{ fontSize: '20px' }} /> <Text fontSize={'xs'} w={'100%'}>{title}</Text></AccordionItemContent>)}
+              </AccordionItem>
+            </AccordionRoot>)}
+        </VStack>
+        <VStack w={'100%'} p={3} pt={0}>
+        <HStack onClick={handleLogout} className="link"  style={{ cursor: 'pointer', borderRadius: '8px', padding: '6px', width: '100%', display: 'flex', alignItems: 'center', gap: 6, border: '1px solid #ffffff', backgroundColor:'#fff', color:'#000', boxShadow:'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px'}} ><LuLogOut style={{ fontSize: '20px' }} /> <Text fontSize={'xs'} w={'100%'}>Logout</Text></HStack>
         </VStack>
       </VStack>
-      <VStack 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,74 @@
-import MainFrame from '../../../components/MainFrame'
+import { Box, HStack, Skeleton, Text } from "@chakra-ui/react";
+import MainFrame from "../../../components/MainFrame"
+import AboutUsAddModel from "../../ManageCMS/AboutUs/AboutUsAddModel";
+import { useGetAboutUsQuery } from "../../../Redux/Service/manage.aboutus.service";
+
+
 
 const AboutUs = () => {
+
+  const { data, isLoading } = useGetAboutUsQuery();
+
+  const content = data?.data?.[0]?.content
+  console.log('====================================');
+  // console.log(response);
+  console.log('====================================');
+
+
   return (
+
     <MainFrame>
-        
+      <Box>
+        <HStack
+          w={"100%"}
+          justifyContent={"space-between"}
+          mb={4}
+          py={0}
+          px={3}
+        >
+          <Text as={"span"} fontSize={"sm"} fontWeight={500} color={"#000"}>
+            AboutUs
+          </Text>
+
+          <HStack>
+
+            <AboutUsAddModel />
+          </HStack>
+        </HStack>
+        {/* Show Skeleton until content is available */}
+        {isLoading || !content ? (
+          <Box px={3} w="85%">
+            <Skeleton height="20px" mb="10px" />
+            <Skeleton height="20px" mb="10px" />
+            <Skeleton height="20px" mb="10px" />
+            <Skeleton height="20px" mb="10px" width="75%" />
+            <Skeleton height="20px" mb="15px" width="90%" />
+            <Skeleton height="20px" mb="10px" />
+            <Skeleton height="20px" mb="10px" width="85%" />
+            <Skeleton height="20px" mb="10px" />
+            <Skeleton height="20px" width="70%" />
+          </Box>
+        ) : (
+          <Text
+            as="p"
+            fontSize="sm"
+            fontWeight={400}
+            color="#1D1D1D"
+            px={3}
+            w="85%"
+            mb="15px"
+          >
+            {content}
+          </Text>
+        )}
+        {/* <Text as={p} fontSize={"sm"} fontWeight={400} color={"#1D1D1D"} px={3} w={"85%"} mb={"15px"} >
+          {content}
+        </Text> */}
+        {/* <Text as={p}  fontSize={"sm"} fontWeight={400} color={"#1D1D1D"} px={3} w={"85%"} >
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam soluta doloremque quibusdam facilis quas, unde hic eaque doloribus sed perferendis atque, eos dolores eius consectetur iure sint adipisci itaque tempora fugit quidem culpa provident possimus. Ullam, vitae in voluptatum dignissimos, quos blanditiis sequi aut repellat error eaque veritatis unde quam temporibus adipisci consectetur neque vero exercitationem dolor cum numquam maiores alias, totam minima quas. Possimus, ratione harum. Alias laboriosam nesciunt esse fugit deserunt pariatur corporis tempora quia veniam laborum aliquid enim voluptatibus asperiores minima tempore repudiandae vero quo porro, doloribus explicabo sit beatae et hic natus. Non earum nisi reiciendis? 
+        </Text> */}
+      </Box>
     </MainFrame>
   )
 }
-
 export default AboutUs

src/Pages/ManageCMS/AboutUs/AboutUsAddModel.tsx

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

src/Pages/ManageCMS/FAQ/EditDetails.tsx

@@ -1,15 +1,23 @@
+import { TbEdit } from "react-icons/tb";
 import { Button } from "../../../components/ui/button"
 import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../../components/ui/dialog"
-import { Field, Grid, Input, Stack, Text, Textarea } from "@chakra-ui/react"
+import { Field, Grid, Icon, Input, Stack, Text, Textarea } from "@chakra-ui/react"
 import { FaRegEdit } from "react-icons/fa";
 function EditDetails() {
     return (
 
         <DialogRoot placement="center">
             <DialogTrigger asChild>
-                <Button bg={"transparent"} size="sm">
-                    <FaRegEdit style={{ cursor: "pointer", }} color="#000" />
-                </Button>
+            <Icon
+            cursor={"pointer"}
+            p={0.5}
+            _hover={{ bg: "#00000015" }}
+            rounded={"md"}
+            boxSize={5}
+            // color={iconColor && iconColor}
+          >
+            <TbEdit />
+          </Icon>
                 {/* <Button><FaRegEdit /></Button> */}
 
             </DialogTrigger>

src/Pages/ManageCMS/FAQ/FAQ.tsx

@@ -1,4 +1,4 @@
-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";
@@ -74,7 +74,7 @@ const FAQ = () => {
                 colorPalette={"blue"}
                 _focus={{ border: "1px solid #02A0A0" }}
                 rounded={"md"}
-                size={"2xs"}
+                size={"xs"}
                 fontSize={"2sm"}
                 placeholder="Search..."
                 bgColor={'#EEEEEE'}

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

src/Pages/ManageCMS/PrivacyPolicy/PrivacyPolicyAddModel.tsx

@@ -1,6 +1,6 @@
 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 { Field, Stack, Text, Textarea } from "@chakra-ui/react"
 import { Button } from "../../../components/ui/button"
 
 function PrivacyPolicyAddModel() {

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/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,19 +1,26 @@
 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 { Avatar, Box, Field, Heading, Icon, Input, Stack, Text } from "@chakra-ui/react"
 import { Switch } from "../../components/ui/switch";
 import { FaRegEdit } from "react-icons/fa";
 import { AvatarGroup } from "../../components/ui/avatar";
+import { TbEdit } from "react-icons/tb";
 function EditDetailGroups() {
     return (
 
         <DialogRoot placement="center" >
             <DialogTrigger asChild>
-                <Button bg={"transparent"} size="sm">
-                    <FaRegEdit style={{ cursor: "pointer", }}  color="#000"/>
-                </Button>
-                {/* <Button><FaRegEdit /></Button> */}
-
+                
+            <Icon
+            cursor={"pointer"}
+            p={0.5}
+            _hover={{ bg: "#00000015" }}
+            rounded={"md"}
+            boxSize={5}
+            // color={iconColor && iconColor}
+          >
+            <TbEdit />
+          </Icon>
             </DialogTrigger>
 
             <DialogContent

src/Pages/ManageGroups/ManageGroups.tsx

@@ -82,8 +82,8 @@ const ManageGroups = () => {
                 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/ManageGroups/ViewManageGroup.tsx

@@ -1,19 +1,27 @@
 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 { Avatar, Box, Field, Grid, Heading, Icon, Input, Stack, Text } from "@chakra-ui/react"
 import { Checkbox } from "../../components/ui/checkbox"
 import { MdOutlineRemoveRedEye } from "react-icons/md";
 import { Switch } from "../../components/ui/switch";
 import { AvatarGroup } from "../../components/ui/avatar";
+import { TbEdit } from "react-icons/tb";
 function ViewManageGroup() {
     return (
 
         <DialogRoot placement="center" >
             <DialogTrigger asChild>
-                <Button bg={"transparent"} size="sm">
-                    <MdOutlineRemoveRedEye style={{ cursor: "pointer", }}  color="#000"/>
-                </Button>
-                {/* <Button><FaRegEdit /></Button> */}
+                
+            <Icon
+            cursor={"pointer"}
+            p={0.5}
+            _hover={{ bg: "#00000015" }}
+            rounded={"md"}
+            boxSize={5}
+            // color={iconColor && iconColor}
+          >
+            <MdOutlineRemoveRedEye />
+          </Icon>
 
             </DialogTrigger>
 

src/Pages/ManageJobs/ManageJobs.tsx

@@ -1,11 +1,105 @@
-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";
+
+
+// table data
+
+const tableHeadRow = [
+  "Sr. No",
+  "Job Title",
+  "Workspace mode",
+  "Category",
+  "Sub-category",
+  "Salary",
+  "Action",
+];
+
+const managepost: any[] = [
+  ...Array.from({ length: 12 }, (_, i) => ({
+    "Sr. No": i + 1,
+    "Job Title": "Freelance content writer",
+    "Workspace mode": "Onsite",
+    "Category": "IT",
+    "Sub-category": "Flutter dev",
+    "Salary": "3.5 LPA",
+    "Action": (
+      <HStack justifyContent="center">
+
+        {/* <MdOutlineRemoveRedEye
+            style={{ cursor: "pointer", fontSize: "16px" }}
+          /> */}
+        {/* <ViewDailog /> */}
+        <ViewManageJob />
+        <ManageJobsAdd />
+        {/* <RiDeleteBin5Line style={{ cursor: "pointer" }} /> */}
+        <AlertDailog
+          AltertTiggerIcon={RiDeleteBin5Line}
+          alertText="Delete Users"
+          alertIcon={<Image src={"DeleteIcon"} h={"39px"} />}
+          alertCaption="are you sure you want to delete ?"
+          onConfirm={() => {
+            console.log("User deleted:", i + 1);
+          }}
+        />
+      </HStack>
+    ),
+  })),
+];
 
 const ManageJobs = () => {
   return (
+
     <MainFrame>
-        
+      <Box>
+        <HStack
+          w={"100%"}
+          justifyContent={"space-between"}
+          mb={4}
+          py={0}
+          px={3}
+        >
+          <Text as={"span"} fontSize={"sm"} fontWeight={500} color={"#000"}>
+            View job Posting
+          </Text>
+
+          <HStack >
+            <InputGroup 
+              startElement={
+                <LuSearch fontSize={"xs"} style={{ position: 'relative', left: '10px' }} />
+              }
+              color={"#000"}
+            >
+              <Input
+                p={3}
+                w={300}
+                bg={"#fff"}
+                colorPalette={"blue"}
+                _focus={{ border: "1px solid #02A0A0" }}
+                rounded={"md"}
+                size={"xs"}
+                fontSize={"sm"}
+                placeholder="Search..."
+                bgColor={'#EEEEEE'}
+                ps={8}
+              />
+            </InputGroup>
+            {/* <Button bgColor={'#EEEEEE'} pl={3} pr={3}><IoMdAdd /> <Text>Add</Text></Button> */}
+          </HStack>
+        </HStack>
+        <DataTable
+          sortableColumns={["Name", "Registration Date "]}
+          tableHeadRow={tableHeadRow}
+          data={managepost}
+        />
+      </Box>       
     </MainFrame>
   )
 }
-
 export default ManageJobs

src/Pages/ManageJobs/ManageJobsAdd.tsx

@@ -1,9 +1,9 @@
-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";
 
 const frameworks = createListCollection({
     items: [
@@ -19,9 +19,16 @@ function ManageJobsAdd() {
 
         <DialogRoot placement="center">
             <DialogTrigger asChild>
-                <Button bg={"transparent"} size="sm">
-                    <FaRegEdit style={{ cursor: "pointer", fontSize: "14px" }} color="#000" />
-                </Button>
+            <Icon
+            cursor={"pointer"}
+            p={0.5}
+            _hover={{ bg: "#00000015" }}
+            rounded={"md"}
+            boxSize={5}
+            // color={iconColor && iconColor}
+          >
+            <TbEdit />
+          </Icon>
             </DialogTrigger>
 
             <DialogContent

src/Pages/ManageJobs/ViewManageJob.tsx

@@ -1,10 +1,9 @@
+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 { createListCollection, Field, Input, SelectValueText, Stack, } from "@chakra-ui/react"
 
-import { FaRegEdit } from "react-icons/fa"
-import { SelectContent, SelectItem, SelectLabel, SelectRoot, SelectTrigger } from "../../components/ui/select"
 import { MdOutlineRemoveRedEye } from "react-icons/md"
+import { SelectContent, SelectItem, SelectLabel, SelectRoot, SelectTrigger } from "../../components/ui/select"
 
 const frameworks = createListCollection({
     items: [
@@ -20,9 +19,16 @@ function ViewManageJob() {
 
         <DialogRoot placement="center">
             <DialogTrigger asChild>
-                <Button bg={"transparent"} size="sm">
-                    <MdOutlineRemoveRedEye style={{ cursor: "pointer", fontSize: "14px" }}  color="#000"/>
-                </Button>
+            <Icon
+            cursor={"pointer"}
+            p={0.5}
+            _hover={{ bg: "#00000015" }}
+            rounded={"md"}
+            boxSize={5}
+            // color={iconColor && iconColor}
+          >
+            <MdOutlineRemoveRedEye />
+          </Icon>
             </DialogTrigger>
 
             <DialogContent

src/Pages/ManagePost/ManagePost.tsx

@@ -1,11 +1,112 @@
-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 ViewDailog from './ViewDailog'
+
+// table data
+
+const tableHeadRow = [
+  "Sr. No",
+  "Images",
+  "Description",
+  "Publish Data",
+  "Activate/Deactivate",
+  "Action",
+];
+
+const managepost: any[] = [
+  ...Array.from({ length: 12 }, (_, i) => ({
+    "Sr. No": i + 1,
+    "Images": (
+      // <Image w={50} src={img} />
+      <Image rounded={'lg'} w={100} h={50} src={img} />
+
+
+    ),
+    "Description": (<Text>
+      {`Lorem ipsum dolor, sit amet consectetur adipisicing elit.}`.slice(0, 30) + '...'}
+    </Text>),
+    "Publish Data": "12/01/2025",
+    "Activate/Deactivate": (
+      <Box w={'100%'} >
+        <Switch size={'sm'} colorPalette={'teal'} />
+      </Box>
+    ),
+    "Action": (
+      <HStack justifyContent="center">
+
+        {/* <MdOutlineRemoveRedEye
+            style={{ cursor: "pointer", fontSize: "16px" }}
+          /> */}
+        <ViewDailog />
+        {/* <RiDeleteBin5Line style={{ cursor: "pointer" }} /> */}
+        <AlertDailog
+          AltertTiggerIcon={RiDeleteBin5Line}
+          alertText="Delete Users"
+          alertIcon={<Image src={"DeleteIcon"} h={"39px"} />}
+          alertCaption="are you sure you want to delete ?"
+          onConfirm={() => {
+            console.log("User deleted:", i + 1);
+          }}
+        />
+      </HStack>
+    ),
+  })),
+];
 const ManagePost = () => {
   return (
     <MainFrame>
-      
+      <Box>
+        <HStack
+          w={"100%"}
+          justifyContent={"space-between"}
+          mb={4}
+          py={0}
+          px={3}
+        >
+          <Text as={"span"} fontSize={"sm"} fontWeight={500} color={"#000"}>
+            {/* Manage Post */}
+          </Text>
+
+          <HStack>
+            <InputGroup
+              startElement={
+                <LuSearch fontSize={"xs"} style={{ position: 'relative', left: '10px' }} />
+              }
+              color={"#000"}
+            >
+              <Input
+                p={3}
+                w={300}
+                bg={"#fff"}
+                colorPalette={"blue"}
+                _focus={{ border: "1px solid #02A0A0" }}
+                rounded={"md"}
+                size={"xs"}
+                fontSize={"sm"}
+                placeholder="Search..."
+                bgColor={'#EEEEEE'}
+                ps={8}
+              />
+            </InputGroup>
+          </HStack>
+        </HStack>
+        <DataTable
+          sortableColumns={["Name", "Registration Date "]}
+          tableHeadRow={tableHeadRow}
+          data={managepost}
+        />
+      </Box>
     </MainFrame>
   )
 }
 
-export default ManagePost
+export default ManagePost

src/Pages/ManagePost/ViewDailog.tsx

@@ -1,16 +1,23 @@
-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"
+
 function ViewDailog() {
     return (
 
         <DialogRoot placement="center">
             <DialogTrigger asChild>
-                <Button bg={"transparent"} size="sm">
-                    <MdOutlineRemoveRedEye style={{ cursor: "pointer", fontSize: "16px" }} color="#000" />
-                </Button>
+            <Icon
+            cursor={"pointer"}
+            p={0.5}
+            _hover={{ bg: "#00000015" }}
+            rounded={"md"}
+            boxSize={5}
+            // color={iconColor && iconColor}
+          >
+            <TbEdit />
+          </Icon>
             </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,17 +1,13 @@
 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";
 
 const tableHeadRow = [
@@ -37,11 +33,11 @@ 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" }} /> */}
@@ -74,7 +70,7 @@ const RegisterUsers = () => {
             Register Users
           </Text>
 
-          <HStack>
+          <HStack> 
             <InputGroup
               startElement={
                 <LuSearch fontSize={"xs"} style={{ position: 'relative', left: '10px' }} />
@@ -88,8 +84,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,
@@ -14,10 +14,16 @@ function ViewRegisterUsers() {
   return (
     <DialogRoot placement="center">
       <DialogTrigger asChild>
-        <MdOutlineRemoveRedEye
-          color="#000"
-          style={{ cursor: "pointer", fontSize: "16px" }}
-        />
+      <Icon
+            cursor={"pointer"}
+            p={0.5}
+            _hover={{ bg: "#00000015" }}
+            rounded={"md"}
+            boxSize={5}
+            // color={iconColor && iconColor}
+          >
+            <MdOutlineRemoveRedEye />
+          </Icon>
       </DialogTrigger>
 
       <DialogContent

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,7 +1,8 @@
 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 { Field, Icon, Input, Stack, } from "@chakra-ui/react"
+import { TbEdit } from "react-icons/tb"
 
 
 function EditAgencyMaster() {
@@ -10,9 +11,16 @@ function EditAgencyMaster() {
 
         <DialogRoot placement="center">
             <DialogTrigger asChild>
-                <Button bg={"transparent"} size="sm">
-                    <FaRegEdit style={{ cursor: "pointer", fontSize: "14px" }}  color="#000"/>
-                </Button>
+            <Icon
+            cursor={"pointer"}
+            p={0.5}
+            _hover={{ bg: "#00000015" }}
+            rounded={"md"}
+            boxSize={5}
+            // color={iconColor && iconColor}
+          >
+            <TbEdit />
+          </Icon>
             </DialogTrigger>
 
             <DialogContent

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,5 +1,5 @@
 import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../../components/ui/dialog"
-import { Field, Input, Stack, } from "@chakra-ui/react"
+import { Field, Icon, Input, Stack, } from "@chakra-ui/react"
 import { MdOutlineRemoveRedEye } from "react-icons/md"
 import { Button } from "../../../components/ui/button"
 
@@ -10,9 +10,17 @@ function ViewAgencyMaster() {
 
         <DialogRoot placement="center">
             <DialogTrigger asChild>
-                <Button bg={"transparent"} size="sm">
-                    <MdOutlineRemoveRedEye style={{ cursor: "pointer", fontSize: "14px" }}  color="#000"/>
-                </Button>
+                
+            <Icon
+            cursor={"pointer"}
+            p={0.5}
+            _hover={{ bg: "#00000015" }}
+            rounded={"md"}
+            boxSize={5}
+            // color={iconColor && iconColor}
+          >
+            <MdOutlineRemoveRedEye />
+          </Icon>
             </DialogTrigger>
 
             <DialogContent

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

@@ -15,9 +15,9 @@ function EditCountryModel() {
                 {/* <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>
+                
+                 <FaRegEdit style={{ cursor: "pointer", fontSize: "16px" }}  color="#000"/>
+                
 
             </DialogTrigger>
 

src/Pages/MasterModule/JobStatus/EditJobStatusModel.tsx

@@ -15,9 +15,9 @@ function EditJobStatusModel() {
                 {/* <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>
+                
+                 <FaRegEdit style={{ cursor: "pointer", fontSize: "16px" }}  color="#000"/>
+                
 
             </DialogTrigger>
 

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

@@ -16,9 +16,9 @@ function EditJobeModel() {
                 {/* <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>
+                
+                 <FaRegEdit style={{ cursor: "pointer", fontSize: "16px" }}  color="#000"/>
+                
 
             </DialogTrigger>
 

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

@@ -30,9 +30,9 @@ function EditTemplateModel() {
                 {/* <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>
+                
+                 <FaRegEdit style={{ cursor: "pointer", fontSize: "16px" }}  color="#000"/>
+               
 
             </DialogTrigger>
 

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

@@ -15,9 +15,9 @@ function EditWorkModel() {
                 {/* <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>
+                
+                 <FaRegEdit style={{ cursor: "pointer", fontSize: "16px" }}  color="#000"/>
+                
 
             </DialogTrigger>
 

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,60 @@
+import { Avatar, Box, Field, Input, SimpleGrid, Stack, Text } from "@chakra-ui/react"
 import MainFrame from "../../components/MainFrame"
+import { FaCamera } from "react-icons/fa";
+import { Button } from "../../components/ui/button";
+import Changepassword from "./ChangePassword";
 
 const Profile = () => {
   return (
     <MainFrame >
+      <Stack p={5}>
+        <Box position="relative" width="fit-content"
+          display="inline-block"
 
-    </MainFrame>
+          cursor="pointer" onClick={() => alert("Avatar clicked!")}>
+          <Avatar.Root size={"2xl"} style={{ display: "inline-block", width: "auto" }}>
+            <Avatar.Fallback />
+            <Avatar.Image src="https://bit.ly/sage-adebayo" />
+          </Avatar.Root>
+
+          <Box
+            position="absolute"
+            bottom="-2px"
+            left={"39px"}
+            p="2px"
+          >
+            <FaCamera color="black" size={16} />
+          </Box>
+        </Box>
+        <Text color={"black"} fontWeight={"bold"}>{`Jackson Da`.slice(0, 10) + '...'}</Text>
+        {/* <Text color={"black"} fontSize={"10px"}>Employee ID: <Text color={"black"} fontSize={"10px"}>#1245679</Text> </Text> */}
+        <Text color="black" fontSize="12px">
+          Employee ID: <span>#1245679</span>
+        </Text>
+        <Box w={"70%"} mt={5}>
+          <SimpleGrid columns={{ base: 1, md: 2 }} columnGap={9} rowGap={4}>
+            <Field.Root>
+              <Field.Label color="black" pt={1} fontSize="12px">First Name</Field.Label>
+              <Input placeholder="Enter the First Name" color="black" border="1px solid grey" pl={1} fontSize="12px" height="30px" /></Field.Root>
+            <Field.Root>
+              <Field.Label color="black" pt={1} fontSize="12px">last Name</Field.Label>
+              <Input placeholder="Enter the last Name" color="black" border="1px solid grey" pl={1} fontSize="12px" height="30px" /></Field.Root>
+            <Field.Root>
+              <Field.Label color="black" pt={1} fontSize="12px" >Phone Number</Field.Label>
+              <Input placeholder="Enter the Phone Number" color="black" border="1px solid grey" pl={1} fontSize="12px" height="30px" /></Field.Root>
+
+          </SimpleGrid>
+          <Text color={"black"} fontWeight={"bold"} fontSize={"14px"} mt={5}>Update password</Text>
+          {/* <Button bg="#02A0A0" color={"#fff"} p={4} fontSize={"12px"} mt={2}>
+            Change Password
+          </Button> */}
+          <Changepassword />
+
+        </Box>
+
+      </Stack>
+
+    </MainFrame >
   )
 }
 

src/Pages/SubAdmin/AddModel.tsx

@@ -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

@@ -33,14 +33,9 @@ const managepost: any[] = [
     "Action": (
       <HStack justifyContent="center">
 
-        {/* <MdOutlineRemoveRedEye
-            style={{ cursor: "pointer", fontSize: "16px" }}
-          /> */}
-        {/* <ViewDailog /> */}
         <ViewSubAdmin />
         <EditSubAdmin />
 
-        {/* <RiDeleteBin5Line style={{ cursor: "pointer" }} /> */}
         <AlertDailog
           AltertTiggerIcon={RiDeleteBin5Line}
           alertText="Delete Users"
@@ -81,11 +76,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,17 +1,28 @@
 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 { Field, Grid, Heading, Icon, Input, Stack, Text } from "@chakra-ui/react"
 import { Checkbox } from "../../components/ui/checkbox"
 import { MdOutlineRemoveRedEye } from "react-icons/md";
+import { FaRegEdit } from "react-icons/fa";
 function ViewSubAdmin() {
     return (
 
         <DialogRoot placement="center" >
             <DialogTrigger asChild>
-                <Button bg={"transparent"} size="sm">
-                    <MdOutlineRemoveRedEye style={{ cursor: "pointer", }} color="#000"/>
-                </Button>
-                {/* <Button><FaRegEdit /></Button> */}
+            <Icon
+            cursor={"pointer"}
+            p={0.5}
+            _hover={{ bg: "#00000015" }}
+            rounded={"md"}
+            boxSize={5}
+            // color={iconColor && iconColor}
+          >
+            <MdOutlineRemoveRedEye />
+          </Icon>
+               
+                    {/* <MdOutlineRemoveRedEye style={{ cursor: "pointer", fontSize:'16px'}} color="#000"/> */}
+               
+                {/* <Button><MdOutlineRemoveRedEye /></Button> */}
 
             </DialogTrigger>
 
@@ -67,9 +78,9 @@ function ViewSubAdmin() {
                     </Stack>
                 </DialogBody>
                 <DialogFooter display="flex" justifyContent="center" pt={"2"} >
-                    <Button w="100%" bg="#02A0A0" color={"#fff"}>
+                    {/* <Button w="100%" bg="#02A0A0" color={"#fff"}>
                         Save
-                    </Button>
+                    </Button> */}
                 </DialogFooter>
 
                 <DialogCloseTrigger color="black" />

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,103 @@
+import { createApi } from "@reduxjs/toolkit/query/react";
+import { baseQueryWithReauth } from "./apiSlice";
+
+export const aboutUs = createApi({
+  reducerPath: "aboutUs",
+  baseQuery: baseQueryWithReauth, // Use enhanced baseQuery with error handling
+  endpoints: (builder) => ({
+
+
+
+    // 🔹 GET: Fetch all posts
+    getAboutUs: builder.query<AboutUsResponse, void>({
+      query: () => "/about-us",
+    }),
+
+
+
+
+
+    // 🔹 GET: Fetch a single post by ID
+    getPostById: builder.query<Post, number>({
+      query: (id) => `/posts/${id}`,
+    }),
+
+    // 🔹 POST: Create a new post
+    createPost: builder.mutation<Post, Partial<Post>>({
+      query: (data) => ({
+        url: "/posts",
+        method: "POST",
+        body: data,
+      }),
+    }),
+
+    // 🔹 PUT: Update an existing post
+    updateAboutUs: builder.mutation<UpdateAboutUsResponse, UpdateAboutUsRequest>({
+      query: ({ id, updatedData }) => ({
+        url: `/posts/${id}`,
+        method: "POST",
+        body: updatedData,
+      }),
+    }),
+
+    // 🔹 DELETE: Remove a post by ID
+    deletePost: builder.mutation<{ success: boolean }, number>({
+      query: (id) => ({
+        url: `/posts/${id}`,
+        method: "DELETE",
+      }),
+    }),
+  }),
+});
+
+export const { 
+  useGetAboutUsQuery, 
+  useUpdateAboutUsMutation,
+
+
+
+
+
+
+
+
+
+
+  
+  useGetPostByIdQuery, 
+  useCreatePostMutation,  
+  useDeletePostMutation 
+} = aboutUs;
+
+// Define Post type
+export type Post = {
+  id: number;
+  title: string;
+  body: string;
+};
+
+
+export type UpdateAboutUsRequest={
+  id: number; updatedData: string
+}
+
+
+export type UpdateAboutUsResponse={
+  id: number; updatedData: string
+}
+
+
+export type AboutUs = {
+  id: number;
+  language_master_xid: number;
+  content: string;
+  is_active: boolean;
+};
+
+// First define your interface
+interface AboutUsResponse {
+  data: {
+    content: string;
+    // other fields...
+  }[];
+}

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,
+          path: "/register-users",
+          Icon: BiUserPin,
           type:'multiple',
           children: [
             {
               title: "Register Users",
-              path: "/manage-user/register-user",
+              path: "/register-users",
               Icon: GoDotFill,
             },
             {
               title: "Deactivated Accounts",
-              path: "/manage-user/deactivate-accounts",
+              path: "/deactivated-accounts",
               Icon: GoDotFill,
             },
           ],
@@ -37,53 +36,62 @@ 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,
+          path: "/faq",
+          Icon: AiOutlineFileText,
           type:'multiple',
           children: [
             {
-              title: "FAQ",
-              path: "/manage-cms/faq",
+              title: "FAQs",
+              path: "/faq",
               Icon: GoDotFill,
             },
             {
               title: "About Us",
-              path: "/manage-cms/about-us",
+              path: "/about-us",
               Icon: GoDotFill,
             },
             {
               title: "Privacy Policy",
-              path: "/manage-cms/privacy-policy",
+              path: "/privacy-policy",
               Icon: GoDotFill,
             },
             {
               title: "Terms And Conditions",
-              path: "/manage-cms/terms-and-condition",
+              path: "/terms-conditions",
+              Icon: GoDotFill,
+            },
+            {
+              title: "Privacy",
+              path: "/privacy",
               Icon: GoDotFill,
             },
           ],
@@ -91,8 +99,45 @@ export const nav = [
         {
           title: "My Profile",
           path: "/profile",
-          Icon: RiUserSettingsLine,
+          Icon: BsPersonBadge,
           type:'single'
         },
-        
+        {
+          title: "Master Module",
+          path: "/agency-master",
+          Icon: BsBoxes,
+          type:'multiple',
+          children: [
+            {
+              title: "Agency Master",
+              path: "/agency-master",
+              Icon: GoDotFill,
+            },
+            {
+              title: "Template Master",
+              path: "/template-master",
+              Icon: GoDotFill,
+            },
+            {
+              title: "Job Type",
+              path: "/job-type",
+              Icon: GoDotFill,
+            },
+            {
+              title: "Workspace Mode",
+              path: "/workspace-mode",
+              Icon: GoDotFill,
+            },
+            {
+              title: "Country",
+              path: "/country",
+              Icon: GoDotFill,
+            },
+            {
+              title: "Job Status",
+              path: "/job-status",
+              Icon: GoDotFill,
+            },
+          ],
+        },
   ];

src/Routes/Routes.ts

@@ -1,55 +1,53 @@
 
+
 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: "/register-users", Component: RegisterUsers },
+    { path: "/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: "/faq", Component: FAQ},
+    { path: "/about-us", Component: AboutUs},
+    { path: "/privacy-policy", Component: PrivacyPolicy},
+    { path: "/terms-conditions", Component: TermsAndConditions},
+    { path: "/privacy", Component: Privacy},
+    { path: "/my-profile", Component: MyProfile},
+    { path: "/manage-notification", Component: Notification},
     { path: "/profile", Component: Profile},
+    { path: "/agency-master", Component: AgencyMaster},
+    { path: "/template-master", Component: TemplateMaster},
+    { path: "/job-type", Component: JobType},
+    { path: "/workspace-mode", Component: WorkspaceMode},
+    { path: "/country", Component: Country},
+    { path: "/job-status", Component: JobStatus},
+    // { path: "/job-status", Component: Spinner},
+
 ]

src/Types/privacyPolicyTypes.tsx

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

src/components/ActionIcons/Edit.tsx

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

src/components/AlertDailog.tsx

@@ -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,169 @@
-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";
 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> */}
+          <Icon
+            cursor={"pointer"}
+            p={0.5}
+            _hover={{ bg: "#00000015" }}
+            rounded={"md"}
+            boxSize={5}
+            // color={iconColor && iconColor}
+          >
+            <TbEdit />
+          </Icon>
+        {/* <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

@@ -13,13 +13,16 @@ interface MainFrameProps {
 
 const MainFrame: FC<MainFrameProps> = ({ children }) => {
   return (
-    <MotionVStack overflowY="scroll" {...OPACITY_ON_LOAD} w="100%" h="94.5%"  p={3} pe={0} ps={0} pt={3}   >
+    <MotionVStack  rounded="lg" overflowY={'auto'} overflowX={'hidden'} {...OPACITY_ON_LOAD} w="100%" minH="93%"  p={0} pe={2} ps={1.5}  pb={2}>
       <Box
         w="100%"
-        h="100%"
+        // h="100%"
         bg="#ffffff"
-        rounded="md"
+        // overflow={'scroll'}
+        rounded="lg"
         boxShadow={'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px'}
+        pt={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,7 @@
+import { Center } from '@chakra-ui/react'
+import './Spinner.css'
+export const Spinner = () => <Center w={'100%'} h={'100%'}> <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>
               )}

src/index.css

@@ -1,10 +1,40 @@
-body{
+@import url('https://fonts.googleapis.com/css2?family=Oxygen:wght@300;400;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
+
+
+
+* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
 }
 
 
+body {
+  margin: 0;
+  padding: 0;
+  font-family: "Roboto", serif;
+  background-color: #fff;
+}
+
+.Oxygen {
+  font-family: "Oxygen", serif
+}
+
+/* Change text selection color */
+::selection {
+  background-color: #02A0A0; /* Yellow */
+  color: #fff; /* Black */
+}
+
+/* For Firefox */
+::-moz-selection {
+  background-color: #02A0A0;
+  color: #fff;
+}
+
+
+
 .active {
   background-color: #02A0A0 !important;
   color: #fff !important;
@@ -21,19 +51,14 @@ body{
   /* background-color: #e2e8f01c !important; */
 }
 
-.active>.css-1ic543h {
-  -webkit-transition: rotate 0.2s;
-  transition: rotate 0.2s;
-  transform-origin: center;
-  color: #fff;
-}
 
-.linkChild:hover{
+
+.linkChild:hover {
   color: #02A0A0 !important;
   transition: all 0.5s;
 }
 
-.activeChild{
+.activeChild {
 
   color: #02A0A0 !important;
   /* border: 1px solid #02A0A0 !important; */
@@ -41,7 +66,7 @@ body{
   border-radius: 8px;
 }
 
-.link{
+.link {
   transition: all 0.5s;
 }
 
@@ -54,26 +79,105 @@ body{
 }
 
 
-/* Style the scrollbar */
+/* Sphere.css */
+
+/* ✅ Red Spheres */
+.red-sphere-1,
+.red-sphere-2,
+.red-sphere-3 {
+  position: absolute;
+  border-radius: 50%;
+  background-color: #D90B2E46;
+  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
+  filter: blur(100px);
+}
+
+/* ✅ Blue Spheres */
+.blue-sphere-1,
+.blue-sphere-2,
+.blue-sphere-3 {
+  position: absolute;
+  border-radius: 50%;
+  background-color: #009DAB46;
+  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
+  filter: blur(100px);
+}
+
+/* 🔧 Positioning for Spheres */
+.red-sphere-1 {
+  width: 250px;
+  height: 250px;
+  top: 10%;
+  left: 5%;
+}
+
+.blue-sphere-1 {
+  width: 320px;
+  height: 320px;
+  top: 30%;
+  right: 0%;
+}
+
+.red-sphere-2 {
+  width: 180px;
+  height: 180px;
+  bottom: 15%;
+  left: 20%;
+}
+
+.blue-sphere-2 {
+  width: 140px;
+  height: 140px;
+  bottom: 5%;
+  right: 25%;
+}
+
+.red-sphere-3 {
+  width: 480px;
+  height: 480px;
+  bottom: 55%;
+  left: 40%;
+}
+
+.blue-sphere-3 {
+  width: 300px;
+  height: 300px;
+  bottom: 10%;
+  right: 40%;
+}
+
+
+
+/* Scrollbar width */
 ::-webkit-scrollbar {
-  width: 12px; /* Width of the vertical scrollbar */
-  height: 12px; /* Height of the horizontal scrollbar */
+  width: 6px;
+  height: 8px;
+  cursor: pointer;
 }
 
-/* Style the scrollbar track (the background area) */
+/* Scrollbar track */
 ::-webkit-scrollbar-track {
-  background-color: #f1f1f1; /* Light gray track */
-  border-radius: 10px;
+  background: transparent; /* No visible track */
 }
 
-/* Style the scrollbar thumb (the draggable part) */
+/* Scrollbar thumb (the draggable part) */
 ::-webkit-scrollbar-thumb {
-  background-color: #02A0A0; /* Gray color for the thumb */
-  border-radius: 10px;
-  border: 3px solid #f1f1f1; /* Border around the thumb */
+  background: rgba(0, 0, 0, 0.2); /* Light black (30% opacity) */
+  border-radius: 10px; /* Rounded edges */
+  transition: background 0.3s;
 }
 
-/* Style the scrollbar thumb on hover */
+/* On hover, make it darker */
 ::-webkit-scrollbar-thumb:hover {
-  background-color: #555; /* Darker gray when hovered */
+  background: rgba(0, 0, 0, 0.411);
+  cursor: pointer;
 }
+
+
+input:focus-visible {
+  border: none !important;
+}
+
+.css-1ilznyv {
+  border: none;
+}

src/main.tsx

@@ -1,17 +1,27 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import App from './App'
-import { Provider } from './components/ui/provider'
-import GlobalStateProvider from './Contexts/GlobalStateProvider'
-import './index.css'
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App";
+import { Provider as ReduxProvider } from "react-redux";
+import { Provider } from "./components/ui/provider";
+import GlobalStateProvider from "./Contexts/GlobalStateProvider";
+import "./index.css";
+import { Theme } from "@chakra-ui/react";
+import { store } from "./Redux/Store";
 
-ReactDOM.createRoot(document.getElementById('root')!).render(
+ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
-
-<GlobalStateProvider>
-    <Provider>
-      <App />
-    </Provider>
-    </GlobalStateProvider>
-  </React.StrictMode>,
-)
+    <ReduxProvider store={store}>
+      {" "}
+      {/* ✅ Wrap with Redux Provider */}
+      <GlobalStateProvider>
+        <Provider>
+          {" "}
+          {/* ✅ Wrap with Provider */}
+          <Theme appearance="light">
+            <App />
+          </Theme>
+        </Provider>
+      </GlobalStateProvider>
+    </ReduxProvider>
+  </React.StrictMode>
+);

vite.config.ts

@@ -6,7 +6,7 @@ import { VitePWA } from "vite-plugin-pwa";
 export default defineConfig({
   server: {
     host: "0.0.0.0",
-    port: 3001, // You can use any port
+    port: 3000, // You can use any port
   },
   plugins: [
     react(),