update

dev-dist/sw.js

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

src/App.tsx

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

src/Layouts/DefaultLayout.tsx

@@ -1,5 +1,5 @@
 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";
@@ -7,43 +7,72 @@ import logo from '../assets/logo.svg';
 import { AccordionItem, AccordionItemContent, AccordionItemTrigger, AccordionRoot } from "../components/ui/accordion";
 import { Avatar } from "../components/ui/avatar";
 import { LuLogOut } from "react-icons/lu";
-import { logout, setToken } from "../Redux/Service/authSlice";
+import { logout } from "../Redux/Service/authSlice";
 import { useDispatch } from "react-redux";
+import GlobalStateContext from "../Contexts/GlobalStateContext";
+import { useLogOutMutation } from "../Redux/Service/apiSlice";
+import ProgressBar from "../components/ProgressBar/ProgressBar";
 
 const DefaultLayout: FC<{ children: React.ReactNode }> = ({ children }) => {
+
   const dispatch = useDispatch()
   const navigate = useNavigate()
   const location = useLocation()
 
 
+  const context = useContext(GlobalStateContext);
+  if (!context) {
+    throw new Error('App must be used within a GlobalStateProvider');
+  }
+  const { setIsAuthenticate } = context;
+  const [ logOutAdmin ] = useLogOutMutation()
 
 
+  // Logout function
+  const handleLogout = async () => {
+    try {
+      // ✅ Call mutation and wait for the response
+      const res = await logOutAdmin().unwrap(); 
+      console.log("Logout Success:", res);
+  
+      // ✅ Clear local storage & update authentication state
+      dispatch(logout());
+      localStorage.removeItem("token"); 
+      setIsAuthenticate(false); 
+      // ✅ Redirect to login page
+      navigate("/login");
+    } catch (error) {
+      console.error("Logout Failed:", error);
+    }
+  };
+
   return (
-    <HStack overflow={'hidden'} position={'relative'} bg="#F2F2F2" backgroundPosition="center" backgroundRepeat="repeat" backgroundSize="cover" gap={0} w="100%" h="100vh" p={0}>
+    <VStack gap={0} w="100%" h="100vh" bg="#F2F2F2">
-    
+    <ProgressBar isLoading={false}  />
-      <VStack  zIndex={1} gap={0} rounded={'lg'} h="100%" w="16%" overflow={'auto'} >
+    <HStack overflow={'hidden'} position={'relative'} bg="#F2F2F2" backgroundPosition="center" backgroundRepeat="repeat" backgroundSize="cover" gap={0} w="100%" h="calc(100% - 4px)"  p={0}>
-        <HStack w={'100%'} p={3} h={'8%'} justifyContent={'center'}>
+      
+      <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={4} pt={0}>
+        <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> :
+            <NavLink  className="link" key={index} to={path} style={{ cursor: 'pointer', borderRadius: '8px', padding: '6px', width: '100%', display: 'flex', alignItems: 'center', gap: 6, border: '1px solid #ffffff', backgroundColor:'#fff', color:'#000', boxShadow:'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px'}} ><Icon style={{ fontSize: '20px' }} /> <Text fontSize={'xs'} w={'100%'}>{title}</Text></NavLink> :
-            <AccordionRoot bg={'#fff'} rounded={'lg'} collapsible>
+            <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={()=>{dispatch(logout()), navigate('/login')}} 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>
+        <HStack onClick={handleLogout} className="link"  style={{ cursor: 'pointer', borderRadius: '8px', padding: '6px', width: '100%', display: 'flex', alignItems: 'center', gap: 6, border: '1px solid #ffffff', backgroundColor:'#fff', color:'#000', boxShadow:'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px'}} ><LuLogOut style={{ fontSize: '20px' }} /> <Text fontSize={'xs'} w={'100%'}>Logout</Text></HStack>
         </VStack>
       </VStack>
-
-
       <VStack  gap={0} h="100%" w="85%" >
-        <HStack h={'12%'} w={'100%'} justifyContent={'flex-end'} pe={3} gap={6}>
+     
+        <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" />
@@ -56,6 +85,7 @@ const DefaultLayout: FC<{ children: React.ReactNode }> = ({ children }) => {
         {children}
       </VStack>
     </HStack>
+    </VStack>
   );
 };
 

src/Pages/Dashboard/Dashboard.tsx

@@ -26,6 +26,7 @@ import {
   SelectValueText
 } from "../../components/ui/select";
 import AgencyName from "./AgencyName";
+import { Spinner } from "../../components/Sipnner/Spinner";
 
 const Dashboard = () => {
   const frameworks = createListCollection({
@@ -186,6 +187,7 @@ const Dashboard = () => {
           <AgencyName />
         </Box>
       </Box>
+     
     </MainFrame>
   );
 };

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,45 +1,54 @@
-import { Center, HStack, Image, Input, Text, VStack } from "@chakra-ui/react"
+import {
-import axios from "axios"
+  Box,
-import { useContext, useState } from "react"
+  Center,
-import { useForm } from "react-hook-form"
+  HStack,
-import { useDispatch } from "react-redux"
+  Image,
-import GlobalStateContext from "../Contexts/GlobalStateContext"
+  Input,
-import { setToken } from "../Redux/Service/authSlice"
+  Text,
-import logo from '../assets/logo.svg'
+  Theme,
-import { Button } from "../components/ui/button"
+  VStack,
-import { Field } from "../components/ui/field"
+} from "@chakra-ui/react";
-import { Toaster } from "../components/ui/toaster"
+import axios from "axios";
-import { PasswordInput } from "../components/ui/password-input"
+import { useContext, useState } from "react";
-import { useNavigate } from "react-router-dom"
+import { useForm } from "react-hook-form";
+import { useDispatch } from "react-redux";
+import GlobalStateContext from "../Contexts/GlobalStateContext";
+import { setToken } from "../Redux/Service/authSlice";
+import logo from "../assets/logo.svg";
+import { Button } from "../components/ui/button";
+import { Field } from "../components/ui/field";
+import { toaster, Toaster } from "../components/ui/toaster";
+import { PasswordInput } from "../components/ui/password-input";
+import { useNavigate } from "react-router-dom";
+import ForgetPassword from "./ForgetPassword";
 
 interface FormValues {
-  mobileNumber: number
+  mobileNumber: number;
-  password: string
+  password: string;
 }
 
 const Login = () => {
-  const navigate = useNavigate()
+  const navigate = useNavigate();
-  const dispatch = useDispatch()
+  const dispatch = useDispatch();
-  const [isLoading, setIsLoading] = useState<boolean>(false)
+  const [isLoading, setIsLoading] = useState<boolean>(false);
   const context = useContext(GlobalStateContext);
   if (!context) {
-    throw new Error('App must be used within a GlobalStateProvider');
+    throw new Error("App must be used within a GlobalStateProvider");
   }
   const { setIsAuthenticate } = context;
   const {
     register,
     handleSubmit,
     formState: { errors },
-  } = useForm<FormValues>()
+  } = useForm<FormValues>();
 
   const onSubmit = handleSubmit(async (data) => {
     setIsLoading(true);
-
     // Encode Basic Auth Credentials
-    const username = import.meta.env.VITE_USER_NAME||''; // Replace with actual username
+    const username = import.meta.env.VITE_USER_NAME || ""; // Replace with actual username
-    const password = import.meta.env.VITE_PASSWORD||''; // Replace with actual password
+    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`,
@@ -52,89 +61,135 @@ const Login = () => {
             Authorization: `Basic ${basicAuth}`,
             "Content-Type": "application/json",
           },
-        
         }
       );
+      console.log("============",res);
+      
 
       if (res.data) {
-        setIsAuthenticate(true)
+        setIsAuthenticate(true);
-        console.log('====================================');
+        console.log("====================================");
         console.log(res.data?.data);
-        console.log('====================================');
+        console.log("====================================");
-        navigate('/dashboard')
+        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({
-        console.error("Login failed", error);
+          // title: error?.response?.data?.message,
-        setIsLoading(false)
+          title: "Something Went Wrong",
-
+          type: "info",
+        })
+        // console.log("Login failed", error?.response?.data?.message);
+        setIsLoading(false);
       }
     }
   });
 
-
-
-
   return (
 
-
+    <VStack appearance={'light'} w={"100%"} h={"100vh"} bg={"#ffffff"}>
-    <VStack
+      <HStack
-      w={'100%'} h={'100vh'} bg={'#ffffff'}  >
+        boxShadow={"rgba(99, 99, 99, 0.2) 0px 2px 8px 0px"}
-
+        w={"100%"}
-      <HStack boxShadow={'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px'} w={'100%'} ps={8} h={'7%'} justifyContent={'flex-start'}>
+        ps={8}
+        h={"7%"}
+        justifyContent={"flex-start"}
+      >
         <Image w={50} src={logo} />
-
       </HStack>
 
-
+      <HStack w={"100%"} h={"93%"} p={8} gap={8}>
-      <HStack
+        <Center
-        w={'100%'} h={'93%'} p={8} gap={8}>
+          display={{ base: "none", md: "flex" }}
-
+          bg={"#02A0A033"}
-
+          w={"50%"}
-
+          h={"100%"}
-
+          rounded={"3xl"}
-        <Center display={{ base: 'none', md: 'flex' }} bg={'#02A0A033'} w={'50%'} h={'100%'} rounded={'3xl'}>
+        >
           <Image w={250} src={logo} />
         </Center>
 
+        <Box
+          as={"form"}
+          onSubmit={onSubmit}
+          p={{ base: 4, md: 16 }}
+          w={{ base: "100%", md: "50%" }}
+          h={"100%"}
+        >
+          <VStack gap={2} w={"100%"}>
+            <Text
+              w={"100%"}
+              textAlign={"center"}
+              fontSize={"24px"}
+              fontWeight={"normal"}
+              color={"#313039"}
+            >
+              LOGIN
+            </Text>
 
-
+            <Box mt={6} gap={4} w={"full"}>
-
+              <Field
-
+                color={"#313039"}
-        <Center as={'form'} onSubmit={onSubmit} p={{ base: 4, md: 16 }} w={{ base: '100%', md: '50%' }} h={'100%'}>
+                label={"Enter Mobile Number"}
-          <VStack gap={2} w={'100%'} alignItems={'flex-start'}>
+                w={"100%"}
-            <Text w={'100%'} textAlign={'center'} fontSize={'24px'} fontWeight={'normal'} color={'#313039'}>LOGIN</Text>
+                invalid={!!errors.mobileNumber}
-
+                errorText={errors.mobileNumber?.message}
-            <VStack mt={6} gap={4} w={'full'}>
+                mb={4}
-              <Field color={'#313039'} label={'Enter Mobile Number'} w={'100%'} invalid={!!errors.mobileNumber} errorText={errors.mobileNumber?.message} >
+              >
-                <Input type="number" ps={3} {...register("mobileNumber", { required: "Mobile Number address is required" })} placeholder="Mobile Number Address" />
+                <Input
-                 {/* <Text as={'span'} w={'100%'} fontSize={'xs'} fontWeight={'normal'} color={'#686677'}>Forget password</Text>  */}
+                  type="number"
+                  ps={3}
+                  {...register("mobileNumber", {
+                    required: "Mobile Number address is required",
+                  })}
+                  placeholder="Mobile Number Address"
+                />
+                {/* <Text as={'span'} w={'100%'} fontSize={'xs'} fontWeight={'normal'} color={'#686677'}>Forget password</Text>  */}
               </Field>
-              <Field  color={'#313039'} label={'Enter Mobile Number'} w={'100%'} invalid={!!errors.password} errorText={errors.password?.message} >
+              <Field
-                <PasswordInput  ps={3} {...register("password", { required: "Pasword is required" })}  placeholder="Enter password" />
+                color={"#313039"}
-                 {/* <Text as={'span'} w={'100%'} fontSize={'xs'} fontWeight={'normal'} color={'#686677'}>Forget password</Text>  */}
+                label={"Enter password."}
+                w={"100%"}
+                invalid={!!errors.password}
+                errorText={errors.password?.message}
+                mb={2}
+              >
+                <PasswordInput
+                  ps={3}
+                  {...register("password", { required: "Pasword is required" })}
+                  placeholder="Enter password"
+                />
+                {/* <Text as={'span'} w={'100%'} fontSize={'xs'} fontWeight={'normal'} color={'#686677'}>Forget password</Text>  */}
               </Field>
-              <Button loading={isLoading} mt={4} size={'sm'} bg={'#02A0A0'} rounded={'md'} w={'100%'} color={'#ffffff'} type="submit">Login</Button>
+              <Button
-
+                loading={isLoading}
-              <Text>Forgot password</Text>
+                mt={4}
-            </VStack>
+                size={"sm"}
-
+                bg={"#02A0A0"}
+                rounded={"md"}
+                w={"100%"}
+                color={"#ffffff"}
+                type="submit"
+              >
+                Login
+              </Button>
 
+              <ForgetPassword />
+            </Box>
           </VStack>
-        </Center>
+        </Box>
         <Toaster />
       </HStack>
     </VStack>
-  )
+  );
-}
+};
 
-export default Login
+export default Login;

src/Pages/ManageCMS/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>
-               
+            <Icon
-                    <FaRegEdit style={{ cursor: "pointer", fontSize:'16px' }} color="#000" />
+            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

@@ -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/ManageContact/ManageContact.tsx

@@ -60,8 +60,8 @@ const ManageContact = () => {
                 colorPalette={"blue"}
                 _focus={{ border: "1px solid #02A0A0" }}
                 rounded={"md"}
-                size={"2xs"}
+                size={"xs"}
-                fontSize={"2sm"}
+                fontSize={"sm"}
                 placeholder="Search..."
                 bgColor={'#EEEEEE'}
                 ps={8}

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>
                 
-                    <FaRegEdit style={{ cursor: "pointer", fontSize:'16px'}}  color="#000"/>
+            <Icon
-                
+            cursor={"pointer"}
-                {/* <Button><FaRegEdit /></Button> */}
+            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"}
+                size={"xs"}
-                fontSize={"2sm"}
+                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>
                 
-                    <MdOutlineRemoveRedEye style={{ cursor: "pointer", fontSize:'16px'}}  color="#000"/>
+            <Icon
-               
+            cursor={"pointer"}
-                {/* <Button><FaRegEdit /></Button> */}
+            p={0.5}
+            _hover={{ bg: "#00000015" }}
+            rounded={"md"}
+            boxSize={5}
+            // color={iconColor && iconColor}
+          >
+            <MdOutlineRemoveRedEye />
+          </Icon>
 
             </DialogTrigger>
 

src/Pages/ManageJobs/ManageJobs.tsx

@@ -1,15 +1,11 @@
-import { Box, createListCollection, HStack, Image, Input, Text } from "@chakra-ui/react";
+import { Box, HStack, Image, Input, Text } from "@chakra-ui/react";
-import MainFrame from "../../components/MainFrame"
-import ViewSubAdmin from "../SubAdmin/ViewSubAdmin";
-import EditSubAdmin from "../../components/EditSubAdmin";
-import AlertDailog from "../../components/AlertDailog";
-import { InputGroup } from "../../components/ui/input-group";
 import { LuSearch } from "react-icons/lu";
-import AddModel from "../SubAdmin/AddModel";
-import DataTable from "../../components/DataTable";
 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 { SelectContent, SelectItem, SelectLabel, SelectRoot, SelectTrigger, SelectValueText } from "../../components/ui/select";
 import ViewManageJob from "./ViewManageJob";
 
 
@@ -87,8 +83,8 @@ const ManageJobs = () => {
                 colorPalette={"blue"}
                 _focus={{ border: "1px solid #02A0A0" }}
                 rounded={"md"}
-                size={"2xs"}
+                size={"xs"}
-                fontSize={"2sm"}
+                fontSize={"sm"}
                 placeholder="Search..."
                 bgColor={'#EEEEEE'}
                 ps={8}

src/Pages/ManageJobs/ManageJobsAdd.tsx

@@ -1,9 +1,9 @@
-import { Button } from "../../components/ui/button"
+import { Field, Icon, Input, SelectValueText, Stack, createListCollection } from "@chakra-ui/react";
-import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../components/ui/dialog"
+import { Button } from "../../components/ui/button";
-import { createListCollection, Field, Input, SelectValueText, Stack } from "@chakra-ui/react"
+import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../components/ui/dialog";
 
-import { FaRegEdit } from "react-icons/fa"
+import { TbEdit } from "react-icons/tb";
-import { SelectContent, SelectItem, SelectLabel, SelectRoot, SelectTrigger } from "../../components/ui/select"
+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>
-                
+            <Icon
-                    <FaRegEdit style={{ cursor: "pointer", fontSize: "16px" }} color="#000" />
+            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>
-               
+            <Icon
-                    <MdOutlineRemoveRedEye style={{ cursor: "pointer", fontSize: "16px" }}  color="#000"/>
+            cursor={"pointer"}
-               
+            p={0.5}
+            _hover={{ bg: "#00000015" }}
+            rounded={"md"}
+            boxSize={5}
+            // color={iconColor && iconColor}
+          >
+            <MdOutlineRemoveRedEye />
+          </Icon>
             </DialogTrigger>
 
             <DialogContent

src/Pages/ManagePost/ManagePost.tsx

@@ -27,7 +27,7 @@ const managepost: any[] = [
     "Sr. No": i + 1,
     "Images": (
       // <Image w={50} src={img} />
-      <Image w={100} h={50} src={img} />
+      <Image rounded={'lg'} w={100} h={50} src={img} />
 
 
     ),
@@ -36,8 +36,8 @@ const managepost: any[] = [
     </Text>),
     "Publish Data": "12/01/2025",
     "Activate/Deactivate": (
-      <Box>
+      <Box w={'100%'} >
-        <Switch colorPalette={'teal'} />
+        <Switch size={'sm'} colorPalette={'teal'} />
       </Box>
     ),
     "Action": (
@@ -90,8 +90,8 @@ const ManagePost = () => {
                 colorPalette={"blue"}
                 _focus={{ border: "1px solid #02A0A0" }}
                 rounded={"md"}
-                size={"2xs"}
+                size={"xs"}
-                fontSize={"2sm"}
+                fontSize={"sm"}
                 placeholder="Search..."
                 bgColor={'#EEEEEE'}
                 ps={8}

src/Pages/ManagePost/ViewDailog.tsx

@@ -1,16 +1,23 @@
-import { MdOutlineRemoveRedEye } from "react-icons/md"
+import { Field, Icon, Image, Input, Stack } from "@chakra-ui/react"
-import { Button } from "../../components/ui/button"
+import { TbEdit } from "react-icons/tb"
-import { DialogBody, DialogCloseTrigger, DialogContent, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../components/ui/dialog"
-import { Field, Image, Input, Stack } from "@chakra-ui/react"
 import img from "../../assets/waterfall.jpg"
+import { DialogBody, DialogCloseTrigger, DialogContent, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../components/ui/dialog"
+
 function ViewDailog() {
     return (
 
         <DialogRoot placement="center">
             <DialogTrigger asChild>
-                
+            <Icon
-                    <MdOutlineRemoveRedEye style={{ cursor: "pointer", fontSize: "16px" }} color="#000" />
+            cursor={"pointer"}
-                
+            p={0.5}
+            _hover={{ bg: "#00000015" }}
+            rounded={"md"}
+            boxSize={5}
+            // color={iconColor && iconColor}
+          >
+            <TbEdit />
+          </Icon>
             </DialogTrigger>
 
             <DialogContent

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

@@ -33,7 +33,7 @@ const registerUser: any[] = [
     "Language": "Mumbai",
     "Activate/Deactivate": (
       <Box>
-        <Switch colorPalette={'teal'} />
+        <Switch size={'sm'} colorPalette={'teal'} />
       </Box>
     ),
     "Action": (
@@ -84,8 +84,8 @@ const RegisterUsers = () => {
                 colorPalette={"blue"}
                 _focus={{ border: "1px solid #02A0A0" }}
                 rounded={"md"}
-                size={"2xs"}
+                size={"xs"}
-                fontSize={"2sm"}
+                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
+      <Icon
-          color="#000"
+            cursor={"pointer"}
-          style={{ cursor: "pointer", fontSize: "16px" }}
+            p={0.5}
-        />
+            _hover={{ bg: "#00000015" }}
+            rounded={"md"}
+            boxSize={5}
+            // color={iconColor && iconColor}
+          >
+            <MdOutlineRemoveRedEye />
+          </Icon>
       </DialogTrigger>
 
       <DialogContent

src/Pages/MasterModule/AgencyMaster/AgencyMaster.tsx

@@ -76,8 +76,8 @@ const AgencyMaster = () => {
                 colorPalette={"blue"}
                 _focus={{ border: "1px solid #02A0A0" }}
                 rounded={"md"}
-                size={"2xs"}
+                size={"xs"}
-                fontSize={"2sm"}
+                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>
-                
+            <Icon
-                    <FaRegEdit style={{ cursor: "pointer", fontSize: "16px" }}  color="#000"/>
+            cursor={"pointer"}
-               
+            p={0.5}
+            _hover={{ bg: "#00000015" }}
+            rounded={"md"}
+            boxSize={5}
+            // color={iconColor && iconColor}
+          >
+            <TbEdit />
+          </Icon>
             </DialogTrigger>
 
             <DialogContent

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"
 
@@ -11,8 +11,16 @@ function ViewAgencyMaster() {
         <DialogRoot placement="center">
             <DialogTrigger asChild>
                 
-                    <MdOutlineRemoveRedEye style={{ cursor: "pointer", fontSize: "16px" }}  color="#000"/>
+            <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

@@ -63,8 +63,8 @@ const Country = () => {
                 colorPalette={"blue"}
                 _focus={{ border: "1px solid #02A0A0" }}
                 rounded={"md"}
-                size={"2xs"}
+                size={"xs"}
-                fontSize={"2sm"}
+                fontSize={"sm"}
                 placeholder="Search..."
                 bgColor={'#EEEEEE'}
                 ps={8}

src/Pages/MasterModule/JobStatus/JobStatus.tsx

@@ -63,8 +63,8 @@ const JobStatus = () => {
                 colorPalette={"blue"}
                 _focus={{ border: "1px solid #02A0A0" }}
                 rounded={"md"}
-                size={"2xs"}
+                size={"xs"}
-                fontSize={"2sm"}
+                fontSize={"sm"}
                 placeholder="Search..."
                 bgColor={'#EEEEEE'}
                 ps={8}

src/Pages/MasterModule/JobType/JobType.tsx

@@ -63,8 +63,8 @@ const JobType = () => {
                 colorPalette={"blue"}
                 _focus={{ border: "1px solid #02A0A0" }}
                 rounded={"md"}
-                size={"2xs"}
+                size={"xs"}
-                fontSize={"2sm"}
+                fontSize={"sm"}
                 placeholder="Search..."
                 bgColor={'#EEEEEE'}
                 ps={8}

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 rounded={'lg'} w={100} h={50} src={img} />
-      <Image w={100} h={50} src={Templateimg} />
+      <Image rounded={'lg'} w={100} h={50} src={Templateimg} />
       </HStack>
 
 
@@ -76,8 +76,8 @@ const TemplateMaster = () => {
                 colorPalette={"blue"}
                 _focus={{ border: "1px solid #02A0A0" }}
                 rounded={"md"}
-                size={"2xs"}
+                size={"xs"}
-                fontSize={"2sm"}
+                fontSize={"sm"}
                 placeholder="Search..."
                 bgColor={'#EEEEEE'}
                 ps={8}

src/Pages/MasterModule/WorkspaceMode/WorkspaceMode.tsx

@@ -63,8 +63,8 @@ const WorkspaceMode = () => {
                 colorPalette={"blue"}
                 _focus={{ border: "1px solid #02A0A0" }}
                 rounded={"md"}
-                size={"2xs"}
+                size={"xs"}
-                fontSize={"2sm"}
+                fontSize={"sm"}
                 placeholder="Search..."
                 bgColor={'#EEEEEE'}
                 ps={8}

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 /> Add</Button>
+                <Button rounded={'md'} px={4} py={2} size={"xs"} bg={"#02A0A0"}><IoMdAdd /> Add</Button>
 
             </DialogTrigger>
 

src/Pages/SubAdmin/SubAdmin.tsx

@@ -76,11 +76,11 @@ const SubAdmin = () => {
                 p={3}
                 w={300}
                 bg={"#fff"}
-                colorPalette={"blue"}
+                colorPalette={"cyan"}
                 _focus={{ border: "1px solid #02A0A0" }}
                 rounded={"md"}
-                size={"2xs"}
+                size={"xs"}
-                fontSize={"2sm"}
+                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>
+            <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"/>
+                    {/* <MdOutlineRemoveRedEye style={{ cursor: "pointer", fontSize:'16px'}} color="#000"/> */}
                
-                {/* <Button><FaRegEdit /></Button> */}
+                {/* <Button><MdOutlineRemoveRedEye /></Button> */}
 
             </DialogTrigger>
 

src/Redux/Service/apiSlice.tsx

@@ -51,6 +51,14 @@ export const dashboard = createApi({
 
     getPosts: builder.query<Post[], void>({ query: () => "/posts" }),
 
+    
+    // 🔹 POST: Create a new post
+    logOut: builder.mutation<void, void>({
+      query: () => ({
+        url: "/logout",
+        method: "POST",
+      }),
+    }),
 
 
 
@@ -58,7 +66,7 @@ export const dashboard = createApi({
   }),
 });
 
-export const { useGetPostsQuery } = dashboard;
+export const { useGetPostsQuery, useLogOutMutation } = dashboard;
 
 export type Post = {
   id: number;

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/Routes/Nav.ts

@@ -17,7 +17,7 @@ export const nav = [
         },
         {
           title: "Manage Users",
-          path: "",
+          path: "/register-users",
           Icon: BiUserPin,
           type:'multiple',
           children: [
@@ -65,7 +65,7 @@ export const nav = [
         },
         {
           title: "Manage CMS",
-          path: "",
+          path: "/faq",
           Icon: AiOutlineFileText,
           type:'multiple',
           children: [
@@ -104,7 +104,7 @@ export const nav = [
         },
         {
           title: "Master Module",
-          path: "",
+          path: "/agency-master",
           Icon: BsBoxes,
           type:'multiple',
           children: [

src/Routes/Routes.ts

@@ -22,6 +22,7 @@ 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 },
@@ -47,4 +48,6 @@ export const RouteLink = [
     { path: "/workspace-mode", Component: WorkspaceMode},
     { path: "/country", Component: Country},
     { path: "/job-status", Component: JobStatus},
+    // { path: "/job-status", Component: Spinner},
+
 ]

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/EditSubAdmin.tsx

@@ -1,4 +1,7 @@
+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,
@@ -9,16 +12,22 @@ import {
   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";
 function EditSubAdmin() {
   return (
     <DialogRoot placement="center">
       <DialogTrigger asChild>
-        <Button bg={"transparent"} size="sm">
+          {/* <FaRegEdit style={{ cursor: "pointer" }} color="#000" /> */}
-          <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/components/MainFrame.tsx

@@ -13,7 +13,7 @@ interface MainFrameProps {
 
 const MainFrame: FC<MainFrameProps> = ({ children }) => {
   return (
-    <MotionVStack  rounded="lg" overflowY={'auto'} overflowX={'hidden'} {...OPACITY_ON_LOAD} w="100%" minH="93%" p={0}  pb={2}>
+    <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%"
@@ -22,6 +22,7 @@ const MainFrame: FC<MainFrameProps> = ({ children }) => {
         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/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%">
+            <Stack appearance={'light'} rounded={'full'} gap="1" flex="1" maxWidth="100%">
-              {toast.title && <Toast.Title>{toast.title}</Toast.Title>}
+              {toast.title && <Toast.Title p={2} color="#02A0A0">{toast.title}</Toast.Title>}
               {toast.description && (
                 <Toast.Description>{toast.description}</Toast.Description>
               )}

src/index.css

@@ -14,12 +14,26 @@ 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;
@@ -133,32 +147,10 @@ body {
 }
 
 
-/* Style the scrollbar */
-::-webkit-scrollbar {
-  width: 6px;
-  /* Width of the vertical scrollbar */
-  height: 12px;
-  /* Height of the horizontal scrollbar */
-}
-
-/* Style the scrollbar track (the background area) */
-::-webkit-scrollbar-track {
-  background-color: #f1f1f1;
-  border-radius: 10px;
-}
-
-/* Style the scrollbar thumb (the draggable part) */
-::-webkit-scrollbar-thumb {
-  background-color: #c8c8c8cf;
-  /* Gray color for the thumb */
-  border-radius: 10px;
-  border: 1px solid #f1f1f1;
-  /* Border around the thumb */
-}
 
 /* Scrollbar width */
 ::-webkit-scrollbar {
-  width: 8px;
+  width: 6px;
   height: 8px;
   cursor: pointer;
 }
@@ -170,14 +162,15 @@ body {
 
 /* Scrollbar thumb (the draggable part) */
 ::-webkit-scrollbar-thumb {
-  background: rgba(0, 0, 0, 0.3); /* Light black (30% opacity) */
+  background: rgba(0, 0, 0, 0.2); /* Light black (30% opacity) */
   border-radius: 10px; /* Rounded edges */
   transition: background 0.3s;
 }
 
 /* On hover, make it darker */
 ::-webkit-scrollbar-thumb:hover {
-  background: rgba(0, 0, 0, 0.5);
+  background: rgba(0, 0, 0, 0.411);
+  cursor: pointer;
 }