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

dev-dist/sw.js

@@ -82,7 +82,7 @@ define(['./workbox-54d0af47'], (function (workbox) { 'use strict';
     "revision": "3ca0b8505b4bec776b69afdba2768812"
   }, {
     "url": "index.html",
-    "revision": "0.4goaulr6o2o"
+    "revision": "0.57smkc9q598"
   }], {});
   workbox.cleanupOutdatedCaches();
   workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), {

package.json

@@ -13,9 +13,11 @@
     "@chakra-ui/react": "^3.2.3",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
+    "chart.js": "^4.4.7",
     "framer-motion": "^11.18.0",
     "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",

src/App.tsx

@@ -1,44 +1,24 @@
-import { useContext } from "react";
+import { useContext } from 'react';
 import { Route, BrowserRouter as Router, Routes } from "react-router-dom";
-import GlobalStateContext from "./Contexts/GlobalStateContext";
-import DefaultLayout from "./Layouts/DefaultLayout";
-import Login from "./Pages/Login";
-import { RouteLink } from "./Routes/Routes";
-import LoginOtp from "./Pages/OnBoarding/LoginOtp";
-import CreatePass from "./Pages/OnBoarding/CreatePass";
+import GlobalStateContext from './Contexts/GlobalStateContext';
+import DefaultLayout from './Layouts/DefaultLayout';
+import Login from './Pages/Login';
+import { RouteLink } from './Routes/Routes';
 
-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 } = 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>
-  );
-}
+  return ( 
+    <Router> 
+      <Routes> 
+        <Route path="/login" element={<Login />} /> 
+        <Route path="/*" element={isAuthenticate === true ? (<DefaultLayout><Routes>{RouteLink.map(({ path, Component }, index) => (<Route key={index} path={path} element={<Component />} />))}</Routes></DefaultLayout>) : (<Login />)} /> 
+        <Route path="*" element={<Login />} /> 
+      </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/Layouts/DefaultLayout.tsx

@@ -3,199 +3,44 @@ import React, { FC } 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";
 
 const DefaultLayout: FC<{ children: React.ReactNode }> = ({ children }) => {
-  const navigate = useNavigate();
-  const location = useLocation();
-  const headerTitle = getTitle(location?.pathname);
-  console.log(location);
+  const navigate = useNavigate()
+  const location = useLocation()
+
+
+
 
   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"}>
+    <HStack position={'relative'} bg="#F2F2F2" backgroundPosition="center" backgroundRepeat="repeat" backgroundSize="cover" gap={0} w="100%" h="100vh" p={0}>
+    
+      <VStack  zIndex={1} gap={0} rounded={'lg'} h="100%" w="16%" overflow={'scroll'} >
+        <HStack w={'100%'} p={3} h={'8%'} 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={4} pt={0}>
+          {nav?.map(({ title, path, Icon, type, children }, index) => type === 'single' ?
+            <NavLink className="link" key={index} to={path} style={{ cursor: 'pointer', borderRadius: '8px', padding: '6px', width: '100%', display: 'flex', alignItems: 'center', gap: 6, border: '1px solid #ffffff', backgroundColor:'#fff', color:'#000', boxShadow:'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px'}} ><Icon style={{ fontSize: '20px' }} /> <Text fontSize={'xs'} w={'100%'}>{title}</Text></NavLink> :
+            <AccordionRoot bg={'#fff'} rounded={'lg'} collapsible>
+              <AccordionItem boxShadow={'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px'} borderBottom={'none'} p={0} key={index} value={title}>
+                <AccordionItemTrigger 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>
-      <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={'8%'} 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}

src/Pages/CMS/CMS.tsx

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

src/Pages/Dashboard/AgencyName.tsx

@@ -1,103 +0,0 @@
-import { Box, HStack, Image, Input, Stack, Text } from "@chakra-ui/react";
-import React, { useState, useEffect } from "react";
-import { Button } from "../../components/ui/button";
-import { IoAddSharp } from "react-icons/io5";
-import delateIcon from "../../assets/deleteIcon.png";
-import { FaClockRotateLeft } from "react-icons/fa6";
-
-interface Todo {
-  id: number;
-  text: string;
-  completed: boolean;
-  timestamp: string;
-}
-
-const AgencyName: React.FC = () => {
-  const [todos, setTodos] = useState<Todo[]>([]);
-  const [input, setInput] = useState<string>("");
-
-  
-  const getCurrentTime = () => {
-    const now = new Date();
-    return now.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
-  };
-
-
-  const addTodo = () => {
-    if (input.trim() === "") return;
-    setTodos([...todos, { id: Date.now(), text: input, completed: false, timestamp: getCurrentTime() }]);
-    setInput(""); 
-  };
-
-  // Delete a task
-  const deleteTodo = (id: number) => {
-    setTodos(todos.filter((todo) => todo.id !== id));
-  };
-
-  useEffect(() => {
-    const savedTodos = localStorage.getItem("todos");
-    if (savedTodos) {
-      setTodos(JSON.parse(savedTodos));
-    }
-  }, []); // Runs only on mount
-
-  // 🔹 Save todos to localStorage whenever they change
-  useEffect(() => {
-    if (todos.length > 0) {
-      localStorage.setItem("todos", JSON.stringify(todos));
-    }
-  }, [todos]); // Runs when `todos` changes
-
-
-  return (
-    <Box p={"10px"}>
-      <HStack justifyContent={"space-between"} mb={5}>
-        <Text fontSize={"xs"} fontWeight={500}>
-          Add Agency Name
-        </Text>
-        <Button
-          bg={"#fff"}
-          color={"#222222CC"}
-          px={3}
-          fontSize={"12px"}
-          h={"28px"}
-          onClick={addTodo}
-        >
-          <IoAddSharp /> Add
-        </Button>
-      </HStack>
-      <Input
-        type="text"
-        value={input}
-        onChange={(e) => setInput(e.target.value)}
-        placeholder="Add a task..."
-        backgroundColor={"#fff"}
-        size={"sm"}
-        w={"100%"}
-        p={2}
-        mb={4}
-      />
-      {todos.map((todo) => (
-        <HStack key={todo.id} backgroundColor={"#fff"} rounded={5} mb={3} p={4} justifyContent={'space-between'} alignItems={'inherit'}>
-          <Text fontSize={'sm'} color={'#222222bd'} fontWeight={400}>{todo.text}</Text>
-          <Stack display={'flex'} alignItems={'end'} w={'130px'}>
-            <Box display={'flex'} alignItems={'center'} gap={2}>
-                <FaClockRotateLeft fontSize={'10px'} style={{fontSize:'13px',color:'#222222bd'}} /> 
-                <Text fontSize={"xs"} color={"#222222bd"}>{todo.timestamp}</Text>
-            </Box>
-            <Box
-              onClick={() => deleteTodo(todo.id)}
-              bg={"none"}
-              color={"#22222299"}
-              cursor={'pointer'}
-            >
-              <Image w={"16px"} src={delateIcon} />
-            </Box>
-          </Stack>
-        </HStack>
-      ))}
-    </Box>
-  );
-};
-
-export default AgencyName;

src/Pages/Dashboard/Dashboard.tsx

@@ -1,11 +1,105 @@
-import MainFrame from "../../components/MainFrame"
+import {
+  Box,
+  createListCollection,
+  Heading,
+  HStack,
+  Stack,
+  Status,
+  Tabs,
+  Text,
+} from "@chakra-ui/react";
+import MainFrame from "../../components/MainFrame";
+import BarChart from "../../components/Charts/BarChart";
+import {
+  SelectContent,
+  SelectItem,
+  SelectLabel,
+  SelectRoot,
+  SelectTrigger,
+  SelectValueText,
+} from "../../components/ui/select";
+import SemiDoughnutChart from "../../components/Charts/SemiDoughnutChart";
 
 const Dashboard = () => {
+  const frameworks = createListCollection({
+    items: [
+      { label: "React.js", value: "react" },
+      { label: "Vue.js", value: "vue" },
+      { label: "Angular", value: "angular" },
+      { label: "Svelte", value: "svelte" },
+    ],
+  });
+
   return (
     <MainFrame>
-      
-    </MainFrame>
-  )
-}
+      <Box display={"flex"} p={"20px"} gap={5}>
+        <Box 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 value="tab-1">Tab 1</Tabs.Trigger>
+              <Tabs.Trigger value="tab-2">Tab 2</Tabs.Trigger>
+              <Tabs.Trigger value="tab-3">Tab 3</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%"}
+          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"}
+        ></Box>
+      </Box>
+      <Box p={"20px"} display={"flex"} gap={5}>
+        <Box w={"50%"} bg={"#f2f2f2"} h={400}></Box>
+        <Box w={"50%"} bg={"#f2f2f2"} h={400}></Box>
+      </Box>
+    </MainFrame>
+  );
+};
+
+export default Dashboard;

src/Pages/Login.tsx

@@ -1,127 +1,96 @@
-import { Center, HStack, Image, Input, Text, VStack } from "@chakra-ui/react";
-import { useContext, useState } from "react";
-import { useForm } from "react-hook-form";
-import GlobalStateContext from "../Contexts/GlobalStateContext";
-import logo from "../assets/logo.svg";
-import { Button } from "../components/ui/button";
-import { Field } from "../components/ui/field";
-import { Toaster, toaster } from "../components/ui/toaster";
-import { LuUser } from "react-icons/lu";
+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 {
-  mobileNumber: number;
+  mobileNumber: number
 }
 
 const Login = () => {
-  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((data) => {
-    setIsLoading(true);
+    setIsLoading(true)
     if (data?.mobileNumber === 1234567890) {
       setTimeout(() => {
         setIsAuthenticate(true);
-        setIsLoading(false);
+        setIsLoading(false)
       }, 3000); // 3-second delay
+
     } else {
       toaster.create({
         title: `Invalid Credentials`,
         type: "error",
-      });
-      setIsLoading(false);
+      })
+      setIsLoading(false)
     }
   });
 
+
   return (
-    <VStack w={"100%"} h={"100vh"} bg={"#ffffff"}>
-      <HStack
-        boxShadow={"rgba(99, 99, 99, 0.2) 0px 2px 8px 0px"}
-        w={"100%"}
-        ps={8}
-        h={"7%"}
-        justifyContent={"flex-start"}
-      >
-        <Image w={50} src={logo} />
+
+
+    <VStack
+      w={'100%'} h={'100vh'} bg={'#ffffff'}  >
+
+      <HStack boxShadow={'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px'} w={'100%'} ps={8}  h={'7%'} justifyContent={'flex-start'}>
+      <Image w={50} src={logo} />
+
       </HStack>
 
-      <HStack w={"100%"} h={"93%"} p={8} gap={8}>
-        <Center
-          display={{ base: "none", md: "flex" }}
-          bg={"#02A0A033"}
-          w={"50%"}
-          h={"100%"}
-          rounded={"3xl"}
-        >
+
+      <HStack
+        w={'100%'} h={'93%'} p={8} gap={8}>
+
+
+
+
+        <Center display={{ base: 'none', md: 'flex' }} bg={'#02A0A033'} w={'50%'} h={'100%'} rounded={'3xl'}>
           <Image w={250} src={logo} />
         </Center>
 
-        <Center
-          as={"form"}
-          onSubmit={onSubmit}
-          p={{ base: 4, md: 16 }}
-          w={{ base: "100%", md: "50%" }}
-          h={"100%"}
-        >
-          <VStack gap={2} w={"100%"} alignItems={"flex-start"}>
-            <Text
-              w={"100%"}
-              textAlign={"center"}
-              fontSize={"24px"}
-              fontWeight={"normal"}
-              color={"#313039"}
-            >
-              LOGIN
-            </Text>
-
-            <VStack mt={6} gap={4} w={"full"}>
-              <Field
-                color={"#313039"}
-                label={"Enter Mobile Number"}
-                w={"100%"}
-                invalid={!!errors.mobileNumber}
-                errorText={errors.mobileNumber?.message}
-              >
-                <Input
-                  ps={3}
-                  {...register("mobileNumber", {
-                    required: "Mobile Number address is required",
-                  })}
-                  placeholder="Mobile Number Address"
-                />
 
 
-                <Text cursor="pointer" as={'span'} w={'100%'} fontSize={'xs'} fontWeight={'normal'} color={'#686677'}>Forget password</Text>
+
+
+        <Center as={'form'} onSubmit={onSubmit} p={{ base: 4, md: 16 }} w={{ base: '100%', md: '50%' }} h={'100%'}>
+          <VStack gap={2} w={'100%'} alignItems={'flex-start'}>
+            <Text w={'100%'} textAlign={'center'} fontSize={'24px'} fontWeight={'normal'} color={'#313039'}>LOGIN</Text>
+
+            <VStack mt={6} gap={4} w={'full'}>
+              <Field color={'#313039'} label={'Enter Mobile Number'} w={'100%'} invalid={!!errors.mobileNumber} errorText={errors.mobileNumber?.message} >
+                <Input ps={3} {...register("mobileNumber", { required: "Mobile Number address is required" })} placeholder="Mobile Number Address" />
+                {/* <Text as={'span'} w={'100%'} fontSize={'xs'} fontWeight={'normal'} color={'#686677'}>Forget password</Text> */}
               </Field>
-              <Button
-                loading={isLoading}
-                mt={4}
-                size={"sm"}
-                bg={"#02A0A0"}
-                rounded={"md"}
-                w={"100%"}
-                color={"#ffffff"}
-                type="submit"
-              >
-                Send OTP
-              </Button>
+              <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 Login;
+export default Login

src/Pages/ManageCMS/AboutUs/AboutUs.tsx

@@ -1,11 +1,38 @@
-import MainFrame from '../../../components/MainFrame'
+import { Box, HStack, Text } from "@chakra-ui/react";
+import MainFrame from "../../../components/MainFrame"
+import { p } from "framer-motion/client";
+import AboutUsAddModel from "../../../components/AboutUsAddModel";
+
 
 const AboutUs = () => {
   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 mr={5}>
+            
+            <AboutUsAddModel />
+          </HStack>
+        </HStack>
+        <Text as={p} fontSize={"sm"} fontWeight={400} color={"#1D1D1D"} px={3} w={"85%"} mb={"15px"} >
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam soluta doloremque quibusdam facilis quas, unde hic eaque doloribus sed perferendis atque, eos dolores eius consectetur iure sint adipisci itaque tempora fugit quidem culpa provident possimus. Ullam, vitae in voluptatum dignissimos, quos blanditiis sequi aut repellat error eaque veritatis unde quam temporibus adipisci consectetur neque vero exercitationem dolor cum numquam maiores alias, totam minima quas. Possimus, ratione harum. Alias laboriosam nesciunt esse fugit deserunt pariatur corporis tempora quia veniam laborum aliquid enim voluptatibus asperiores minima tempore repudiandae vero quo porro, doloribus explicabo sit beatae et hic natus. Non earum nisi reiciendis? 
+        </Text>
+        <Text as={p}  fontSize={"sm"} fontWeight={400} color={"#1D1D1D"} px={3} w={"85%"} >
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam soluta doloremque quibusdam facilis quas, unde hic eaque doloribus sed perferendis atque, eos dolores eius consectetur iure sint adipisci itaque tempora fugit quidem culpa provident possimus. Ullam, vitae in voluptatum dignissimos, quos blanditiis sequi aut repellat error eaque veritatis unde quam temporibus adipisci consectetur neque vero exercitationem dolor cum numquam maiores alias, totam minima quas. Possimus, ratione harum. Alias laboriosam nesciunt esse fugit deserunt pariatur corporis tempora quia veniam laborum aliquid enim voluptatibus asperiores minima tempore repudiandae vero quo porro, doloribus explicabo sit beatae et hic natus. Non earum nisi reiciendis? 
+        </Text>
+     </Box>
     </MainFrame>
   )
 }
-
 export default AboutUs

src/Pages/ManageCMS/FAQ/FAQ.tsx

@@ -1,13 +1,13 @@
 import { Box, Button, HStack, Image, Input, Text } from "@chakra-ui/react";
 import MainFrame from "../../../components/MainFrame"
-import EditDetails from "./EditDetails";
+import EditDetails from "../../../components/EditDetails";
 import { InputGroup } from "../../../components/ui/input-group";
 import { LuSearch } from "react-icons/lu";
 import DataTable from "../../../components/DataTable";
 import AlertDailog from "../../../components/AlertDailog";
 import { RiDeleteBin5Line } from "react-icons/ri";
 import { Switch } from "../../../components/ui/switch";
-import FaqAddModel from "./FaqAddModel";
+import FaqAddModel from "../../../components/FaqAddModel";
 
 
 // table data
@@ -60,8 +60,8 @@ const FAQ = () => {
            FAQs
           </Text>
 
-          <HStack >
-            <InputGroup 
+          <HStack mr={5}>
+            <InputGroup marginRight={"1rem"}
               startElement={
                 <LuSearch fontSize={"xs"} style={{ position: 'relative', left: '10px' }} />
               }

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,38 @@
-import MainFrame from '../../../components/MainFrame'
+import { Box, HStack, Text } from "@chakra-ui/react";
+import MainFrame from "../../../components/MainFrame"
+import { p } from "framer-motion/client";
+import PrivacyPolicyAddModel from "../../../components/PrivacyPolicyAddModel";
+
 
 const PrivacyPolicy = () => {
   return (
+
     <MainFrame>
-        
+      <Box>
+        <HStack
+          w={"100%"}
+          justifyContent={"space-between"}
+          mb={4}
+          py={0}
+          px={3}
+        >
+          <Text as={"span"} fontSize={"sm"} fontWeight={500} color={"#000"}>
+          Privacy Policy
+          </Text>
+
+          <HStack mr={5}>
+            
+            <PrivacyPolicyAddModel />
+          </HStack>
+        </HStack>
+        <Text as={p} fontSize={"sm"} fontWeight={400} color={"#1D1D1D"} px={3} w={"85%"} mb={"15px"} >
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam soluta doloremque quibusdam facilis quas, unde hic eaque doloribus sed perferendis atque, eos dolores eius consectetur iure sint adipisci itaque tempora fugit quidem culpa provident possimus. Ullam, vitae in voluptatum dignissimos, quos blanditiis sequi aut repellat error eaque veritatis unde quam temporibus adipisci consectetur neque vero exercitationem dolor cum numquam maiores alias, totam minima quas. Possimus, ratione harum. Alias laboriosam nesciunt esse fugit deserunt pariatur corporis tempora quia veniam laborum aliquid enim voluptatibus asperiores minima tempore repudiandae vero quo porro, doloribus explicabo sit beatae et hic natus. Non earum nisi reiciendis? 
+        </Text>
+        <Text as={p}  fontSize={"sm"} fontWeight={400} color={"#1D1D1D"} px={3} w={"85%"} >
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam soluta doloremque quibusdam facilis quas, unde hic eaque doloribus sed perferendis atque, eos dolores eius consectetur iure sint adipisci itaque tempora fugit quidem culpa provident possimus. Ullam, vitae in voluptatum dignissimos, quos blanditiis sequi aut repellat error eaque veritatis unde quam temporibus adipisci consectetur neque vero exercitationem dolor cum numquam maiores alias, totam minima quas. Possimus, ratione harum. Alias laboriosam nesciunt esse fugit deserunt pariatur corporis tempora quia veniam laborum aliquid enim voluptatibus asperiores minima tempore repudiandae vero quo porro, doloribus explicabo sit beatae et hic natus. Non earum nisi reiciendis? 
+        </Text>
+     </Box>
     </MainFrame>
   )
 }
-
 export default PrivacyPolicy

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

@@ -1,7 +1,7 @@
 import { Box, HStack, Text } from "@chakra-ui/react";
 import MainFrame from "../../../components/MainFrame"
 import { p } from "framer-motion/client";
-import TermsAndConditionsAddModel from "./TermsAndConditionsAddModel";
+import TermsAndConditionsAddModel from "../../../components/TermsAndConditionsAddModel";
 
 
 const TermsAndConditions = () => {

src/Pages/ManageContact/ManageContact.tsx

@@ -1,6 +1,6 @@
 import { Box, HStack, Image, Input, Text } from "@chakra-ui/react";
 import MainFrame from "../../components/MainFrame"
-import PendingRequests from "../../Pages/ManageContact/PendingRequests"
+import PendingRequests from "../../components/PendingRequests";
 import { InputGroup } from "../../components/ui/input-group";
 import { LuSearch } from "react-icons/lu";
 import DataTable from "../../components/DataTable";

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

@@ -8,7 +8,7 @@ function AddGroup() {
 
         <DialogRoot placement="center" >
             <DialogTrigger asChild>
-                <Button px={5} size={"xs"} bg={"#02A0A0"}><IoMdAdd /> <Text>Add</Text></Button>
+                <Button bgColor={'#EEEEEE'} pl={3} pr={3} size={'xs'} color={'#000'}><IoMdAdd /> <Text>Add</Text></Button>
 
             </DialogTrigger>
 
@@ -16,17 +16,19 @@ function AddGroup() {
                 bg={"#fff"}
                 // w={{ lg: "60%", md: "230px" }}
                 w={{ base: '90%', md: '400px' }}
-                height={"auto"}
-                // overflow={'scroll'}
-                p={3} // Reduced padding
+
+
+                // height={'80vh'}
+                overflow={'scroll'}
+                p={2} // Reduced padding
                 bgSize={'md'}
             >
-                <DialogHeader bg="white">
+                <DialogHeader bg="white" pt={1} pb={2}>
                     <DialogTitle alignSelf="center" color="black" fontSize="14px">Add</DialogTitle>
                 </DialogHeader>
 
                 <DialogBody bg="white">
-                    <Stack py={3} >
+                    <Stack p={2} >
 
                         <Field.Root>
                             <Field.Label color="black" pt={1} fontSize="xs">Group Name</Field.Label>
@@ -39,11 +41,18 @@ function AddGroup() {
                         <Button w="30%" size={'xs'} bg="#02A0A0" mt={3} color={"#fff"}>
                             Add Member
                         </Button>
+
+
+
+
+
+
+
                         <Heading color="black" pt={1} fontSize="12px">public/Private</Heading>
                         <Switch />
                     </Stack>
                 </DialogBody>
-                <DialogFooter display="flex" justifyContent="center" pt={"2"}>
+                <DialogFooter display="flex" justifyContent="center">
                     <Button w="100%" bg="#02A0A0" color={"#fff"}>
                         Save
                     </Button>

src/Pages/ManageGroups/EditDetailGroup.tsx

@@ -10,7 +10,7 @@ function EditDetailGroups() {
         <DialogRoot placement="center" >
             <DialogTrigger asChild>
                 <Button bg={"transparent"} size="sm">
-                    <FaRegEdit style={{ cursor: "pointer", }}  color="#000"/>
+                    <FaRegEdit style={{ cursor: "pointer", }} />
                 </Button>
                 {/* <Button><FaRegEdit /></Button> */}
 
@@ -19,15 +19,15 @@ function EditDetailGroups() {
             <DialogContent
                 bg={"#fff"}
                 w={{ base: '90%', md: '400px' }}
-                height={"auto"}
-                p={3} // Reduced padding
+                overflow={'scroll'}
+                p={2} // Reduced padding
             >
-                <DialogHeader bg="white">
+                <DialogHeader bg="white" pt={1} pb={2}>
                     <DialogTitle alignSelf="center" color="black" fontSize="14px">Edit details</DialogTitle>
                 </DialogHeader>
 
                 <DialogBody bg="white">
-                    <Stack py={3} >
+                    <Stack p={2} >
 
                         <Field.Root>
                             <Field.Label color="black" pt={1} fontSize="12px">Group Name</Field.Label>
@@ -71,7 +71,7 @@ function EditDetailGroups() {
                         <Switch />
                     </Stack>
                 </DialogBody>
-                <DialogFooter display="flex" justifyContent="center" pt={"2"}>
+                <DialogFooter display="flex" justifyContent="center">
                     <Button size={'xs'} w="100%" bg="#02A0A0" color={"#fff"}>
                         Save
                     </Button>

src/Pages/ManageGroups/ManageGroups.tsx

@@ -5,6 +5,8 @@ import { LuSearch } from "react-icons/lu"
 import DataTable from "../../components/DataTable"
 import AlertDailog from "../../components/AlertDailog"
 import { RiDeleteBin5Line } from "react-icons/ri";
+import AddModel from "../SubAdmin/AddModel"
+import EditSubAdmin from "../../components/EditSubAdmin"
 import ViewManageGroup from "./ViewManageGroup"
 import EditDetailGroups from "./EditDetailGroup"
 import AddGroup from "./AddGroup"
@@ -68,7 +70,7 @@ const ManageGroups = () => {
             Manage Groups
           </Text>
 
-          <HStack >
+          <HStack gap={4}>
             <InputGroup
               startElement={
                 <LuSearch fontSize={"xs"} style={{ position: 'relative', left: '10px' }} />

src/Pages/ManageGroups/ViewManageGroup.tsx

@@ -11,7 +11,7 @@ function ViewManageGroup() {
         <DialogRoot placement="center" >
             <DialogTrigger asChild>
                 <Button bg={"transparent"} size="sm">
-                    <MdOutlineRemoveRedEye style={{ cursor: "pointer", }}  color="#000"/>
+                    <MdOutlineRemoveRedEye style={{ cursor: "pointer", }} />
                 </Button>
                 {/* <Button><FaRegEdit /></Button> */}
 
@@ -21,16 +21,19 @@ function ViewManageGroup() {
                 bg={"#fff"}
                 // w={{ lg: "60%", md: "230px" }}
                 w={{ base: '90%', md: '400px' }}
-                height={"auto"}
-                p={3} // Reduced padding
+
+
+                // height={'80vh'}
+                overflow={'scroll'}
+                p={2} // Reduced padding
                 bgSize={'md'}
             >
-                <DialogHeader bg="white" >
+                <DialogHeader bg="white" pt={1} pb={2}>
                     <DialogTitle alignSelf="center" color="black" fontSize="14px">View details</DialogTitle>
                 </DialogHeader>
 
                 <DialogBody bg="white">
-                    <Stack py={3} >
+                    <Stack p={2} >
 
                         <Field.Root>
                             <Field.Label color="black" pt={1} fontSize="12px">Group Name</Field.Label>
@@ -70,6 +73,10 @@ function ViewManageGroup() {
                                 </AvatarGroup>
                             </Box>
 
+
+
+
+
                         </Field.Root>
                         <Heading color="black" pt={1} fontSize="12px">public/Private</Heading>
                         <Switch />

src/Pages/ManageJobs/ManageJobs.tsx

@@ -1,11 +1,109 @@
+import { Box, createListCollection, 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 ManageJobsAdd from "./ManageJobsAdd";
+import { SelectContent, SelectItem, SelectLabel, SelectRoot, SelectTrigger, SelectValueText } from "../../components/ui/select";
+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 mr={5}>
+            <InputGroup marginRight={"1rem"}
+              startElement={
+                <LuSearch fontSize={"xs"} style={{ position: 'relative', left: '10px' }} />
+              }
+              color={"#000"}
+            >
+              <Input
+                p={3}
+                w={300}
+                bg={"#fff"}
+                colorPalette={"blue"}
+                _focus={{ border: "1px solid #02A0A0" }}
+                rounded={"md"}
+                size={"2xs"}
+                fontSize={"2sm"}
+                placeholder="Search..."
+                bgColor={'#EEEEEE'}
+                ps={8}
+              />
+            </InputGroup>
+            {/* <Button bgColor={'#EEEEEE'} pl={3} pr={3}><IoMdAdd /> <Text>Add</Text></Button> */}
+          </HStack>
+        </HStack>
+        <DataTable
+          sortableColumns={["Name", "Registration Date "]}
+          tableHeadRow={tableHeadRow}
+          data={managepost}
+        />
+      </Box>       
     </MainFrame>
   )
 }
-
 export default ManageJobs

src/Pages/ManageJobs/ManageJobsAdd.tsx

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

src/Pages/ManageJobs/ViewManageJob.tsx

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

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 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>
+        <Switch 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={"2xs"}
+                fontSize={"2sm"}
+                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

@@ -9,7 +9,7 @@ function ViewDailog() {
         <DialogRoot placement="center">
             <DialogTrigger asChild>
                 <Button bg={"transparent"} size="sm">
-                    <MdOutlineRemoveRedEye style={{ cursor: "pointer", fontSize: "16px" }} color="#000" />
+                    <MdOutlineRemoveRedEye style={{ cursor: "pointer", fontSize: "16px" }} />
                 </Button>
             </DialogTrigger>
 
@@ -17,14 +17,14 @@ function ViewDailog() {
                 w={{ base: '90%', md: '400px' }}
                 bg={"#fff"}
                 h="auto"
-                p={3} // Reduced padding
+                p={2} // Reduced padding
             >
-                <DialogHeader bg="white" >
+                <DialogHeader bg="white" p={2}>
                     <DialogTitle alignSelf="center" color="black" fontSize="14px">View Details</DialogTitle>
                 </DialogHeader>
 
                 <DialogBody bg="white">
-                    <Stack py={3} >
+                    <Stack p={2} >
                         <Field.Root>
                             <Field.Label color="black" pt={1} fontSize="12px">Title</Field.Label>
                             <Input placeholder="Enter the Title" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" readOnly />

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/RegisterUsers/AddRegisterUsers.tsx

@@ -17,76 +17,104 @@ function AddRegisterUsers() {
   return (
     <DialogRoot placement="center">
       <DialogTrigger asChild>
-        <Button px={4} size={"xs"} bg={"#02A0A0"}>
+        <Button px={5} size={"xs"} bg={"#02A0A0"}>
           <IoMdAdd /> Add
         </Button>
       </DialogTrigger>
 
       <DialogContent
-         bg={"#fff"}
-         w={{ base: '90%', md: '400px' }}
-         height={'80vh'}
-         overflow={'scroll'}
-         overflowX="hidden" 
-         p={3} // Reduced padding
-         bgSize={'md'}
+        bg={"#fff"}
+        w={{ base: "90%", md: "400px" }}
+        maxW="90vw"
+        h="auto"
+        p={4}
       >
-        <DialogHeader bg="white" >
-          <DialogTitle alignSelf="center" color="black" fontSize="14px">
+        <DialogHeader bg="white" p={0}>
+          <DialogTitle fontSize={"sm"} alignSelf="center" color="black">
             Add User Accounts
           </DialogTitle>
         </DialogHeader>
 
         <DialogBody bg="white">
-          <Stack py={3}>
+          <Stack pt={3} pb={3}>
             <Field.Root>
-              <Field.Label color="black" pt={1} fontSize="12px">
+              <Field.Label color="black" pt={2} fontSize={"xs"}>
                 First Name
               </Field.Label>
               <Input
-               bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px"
+                name="Priyanka"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={2}
+                size={"xs"}
               />
 
-              <Field.Label color="black" pt={1} fontSize="12px">
+              <Field.Label color="black" pt={2} fontSize={"xs"}>
                 Last Name
               </Field.Label>
               <Input
-               bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px"
+                name="Joshi"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={2}
+                size={"xs"}
               />
 
-              <Field.Label color="black" pt={1} fontSize="12px">
+              <Field.Label pt={2} color="black" fontSize={"xs"}>
                 Gender
               </Field.Label>
               <Input
-                bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px"
+                name="Female"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={2}
+                size={"xs"}
               />
 
-              <Field.Label color="black" pt={1} fontSize="12px">
+              <Field.Label pt={2} color="black" fontSize={"xs"}>
                 DOB
               </Field.Label>
               <Input
-               bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px"
+                name="11/02/1989"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={2}
+                size={"xs"}
               />
 
-              <Field.Label color="black" pt={1} fontSize="12px">
+              <Field.Label pt={2} color="black" fontSize={"xs"}>
                 OTP Verified
               </Field.Label>
               <Input
-               bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px"
+                name="Yes"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={2}
+                size={"xs"}
               />
 
-              <Field.Label color="black" pt={1} fontSize="12px">
+              <Field.Label pt={2} color="black" fontSize={"xs"}>
                 Language
               </Field.Label>
               <Input
-               bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px"
+                name="English, Hindi, Marathi"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={2}
+                size={"xs"}
               />
             </Field.Root>
           </Stack>
         </DialogBody>
-        <DialogFooter mt={2}>
+        <DialogFooter mt={5}>
           <DialogActionTrigger asChild>
-            <Button w="100%" bg="#02A0A0" color={"#fff"}>
+            <Button rounded={"md"} w={"100%"} size={"sm"} bg={"#02A0A0"}>
               Save
             </Button>
           </DialogActionTrigger>

src/Pages/ManageUsers/RegisterUsers/EditRegisterUsers.tsx

@@ -23,62 +23,90 @@ function EditRegisterUsers() {
 
       <DialogContent
         bg={"#fff"}
-        w={{ base: '90%', md: '400px' }}
-        height={'80vh'}
-        overflow={'scroll'}
-        overflowX="hidden" 
-        p={3} // Reduced padding
-        bgSize={'md'}
+        w={{ base: "90%", md: "400px" }}
+        maxW="90vw"
+        h="auto"
+        p={4}
       >
         <DialogHeader bg="white" p={0}>
-          <DialogTitle alignSelf="center" color="black" fontSize="14px">
+          <DialogTitle fontSize={"sm"} alignSelf="center" color="black">
             Edit user Accounts
           </DialogTitle>
         </DialogHeader>
 
         <DialogBody bg="white">
-          <Stack py={3}>
+          <Stack pt={3} pb={3}>
             <Field.Root>
-              <Field.Label color="black" pt={1} fontSize="12px">
+              <Field.Label color="black" pt={2} fontSize={"xs"}>
                 First Name
               </Field.Label>
               <Input
-                 bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px"
+                name="Priyanka"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={2}
+                size={"xs"}
               />
 
-              <Field.Label color="black" pt={1} fontSize="12px">
+              <Field.Label color="black" pt={2} fontSize={"xs"}>
                 Last Name
               </Field.Label>
               <Input
-                 bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px"
+                name="Joshi"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={2}
+                size={"xs"}
               />
 
-              <Field.Label color="black" pt={1} fontSize="12px">
+              <Field.Label pt={2} color="black" fontSize={"xs"}>
                 Gender
               </Field.Label>
               <Input
-                 bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px"
+                name="Female"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={2}
+                size={"xs"}
               />
 
-              <Field.Label color="black" pt={1} fontSize="12px">
+              <Field.Label pt={2} color="black" fontSize={"xs"}>
                 DOB
               </Field.Label>
               <Input
-                 bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px"
+                name="11/02/1989"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={2}
+                size={"xs"}
               />
 
-              <Field.Label color="black" pt={1} fontSize="12px">
+              <Field.Label pt={2} color="black" fontSize={"xs"}>
                 OTP Verified
               </Field.Label>
               <Input
-                 bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px"
+                name="Yes"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={2}
+                size={"xs"}
               />
 
-              <Field.Label color="black" pt={1} fontSize="12px">
+              <Field.Label pt={2} color="black" fontSize={"xs"}>
                 Language
               </Field.Label>
               <Input
-                 bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px"
+                name="English, Hindi, Marathi"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={2}
+                size={"xs"}
               />
             </Field.Root>
           </Stack>

src/Pages/ManageUsers/RegisterUsers/ViewRegisterUsers.tsx

@@ -21,63 +21,97 @@ function ViewRegisterUsers() {
       </DialogTrigger>
 
       <DialogContent
-         bg={"#fff"}
-         w={{ base: '90%', md: '400px' }}
-         height={'80vh'}
-         overflow={'scroll'}
-         overflowX="hidden" 
-         p={3} // Reduced padding
-         bgSize={'md'}
+        bg={"#fff"}
+        w={{ base: "90%", md: "400px" }}
+        maxW="90vw"
+        h="auto"
+        p={4}
       >
-        <DialogHeader bg="white">
-          <DialogTitle alignSelf="center" color="black" fontSize="14px">
+        <DialogHeader bg="white" p={0}>
+          <DialogTitle fontSize={"sm"} alignSelf="center" color="black">
             View Details
           </DialogTitle>
         </DialogHeader>
 
         <DialogBody bg="white">
-          <Stack py={3}>
+          <Stack pt={3} pb={3}>
             <Field.Root>
-              <Field.Label color="black" pt={1} fontSize="12px">
+              <Field.Label color="black" pt={2} fontSize={"xs"}>
                 First Name
               </Field.Label>
               <Input
-                bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px"
+                value="Priyanka"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={2}
+                readOnly
+                size={"xs"}
               />
 
-              <Field.Label color="black" pt={1} fontSize="12px">
+              <Field.Label color="black" pt={2} fontSize={"xs"}>
                 Last Name
               </Field.Label>
               <Input
-                bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px"
+                value="Joshi"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={2}
+                readOnly
+                size={"xs"}
               />
 
-              <Field.Label color="black" pt={1} fontSize="12px">
+              <Field.Label pt={2} color="black" fontSize={"xs"}>
                 Gender
               </Field.Label>
               <Input
-                bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px"
+                value="Female"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={2}
+                readOnly
+                size={"xs"}
               />
 
-              <Field.Label color="black" pt={1} fontSize="12px">
+              <Field.Label pt={2} color="black" fontSize={"xs"}>
                 DOB
               </Field.Label>
               <Input
-                bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px"
+                value="11/02/1989"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={2}
+                readOnly
+                size={"xs"}
               />
 
-              <Field.Label color="black" pt={1} fontSize="12px">
+              <Field.Label pt={2} color="black" fontSize={"xs"}>
                 OTP Verified
               </Field.Label>
               <Input
-                bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px"
+                value="Yes"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={2}
+                readOnly
+                size={"xs"}
               />
 
-              <Field.Label color="black" pt={1} fontSize="12px">
+              <Field.Label pt={2} color="black" fontSize={"xs"}>
                 Language
               </Field.Label>
               <Input
-                bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px"
+                value="English, Hindi, Marathi"
+                bgColor="#EEEEEE"
+                color="black"
+                border="none"
+                pl={2}
+                readOnly
+                size={"xs"}
               />
             </Field.Root>
           </Stack>

src/Pages/MasterModule/AgencyMaster/AgencyMaster.tsx

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

src/Pages/MasterModule/AgencyMaster/EditAgencyMaster.tsx

@@ -1,75 +0,0 @@
-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"
-
-
-function EditAgencyMaster() {
-    return (
-
-
-        <DialogRoot placement="center">
-            <DialogTrigger asChild>
-                <Button bg={"transparent"} size="sm">
-                    <FaRegEdit style={{ cursor: "pointer", fontSize: "14px" }}  color="#000"/>
-                </Button>
-            </DialogTrigger>
-
-            <DialogContent
-                bg={"#fff"}
-                // w={{ lg: "60%", md: "230px" }}
-                w={{ base: '90%', md: '400px' }}
-
-                height={'80vh'}
-                overflow={'scroll'}
-                overflowX="hidden" 
-                p={3} // Reduced padding
-                bgSize={'md'}
-            >
-                <DialogHeader bg="white">
-                    <DialogTitle alignSelf="center" color="black" fontSize="14px">Edit</DialogTitle>
-                </DialogHeader>
-
-                <DialogBody bg="white">
-                    <Stack py={3}>
-                    <Field.Root>
-                            <Field.Label color="black" pt={1} fontSize="12px">Agency name</Field.Label>
-                            <Input value="Lorem Ipsum" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-
-                            <Field.Label color="black" pt={1} fontSize="12px">RC No.</Field.Label>
-                            <Input value="Lorem Ipsum" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-
-                            <Field.Label color="black" pt={1} fontSize="12px">State</Field.Label>
-                            <Input value="Lorem Ipsum" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-
-                            <Field.Label color="black" pt={1} fontSize="12px">Registered Office Address</Field.Label>
-                            <Input value="Active" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-                            
-                            <Field.Label color="black" pt={1} fontSize="12px">Website/Domain</Field.Label>
-                            <Input value="Lorem Ipsum" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-
-                            <Field.Label color="black" pt={1} fontSize="12px">GST no.</Field.Label>
-                            <Input value="Lorem Ipsum" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-                            
-                            <Field.Label color="black" pt={1} fontSize="12px">Action</Field.Label>
-                            <Input value="Lorem Ipsum" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-
-
-                        </Field.Root>
-                    </Stack>
-                </DialogBody>
-                <DialogFooter display="flex" justifyContent="center" pt={"2"}>
-                    <Button w="100%" bg="#02A0A0" color={"#fff"} fontSize="12px" height="30px">
-                        Save
-                    </Button>
-                </DialogFooter>
-
-                <DialogCloseTrigger color="black" />
-            </DialogContent>
-        </DialogRoot>
-
-
-    )
-}
-
-export default EditAgencyMaster

src/Pages/MasterModule/AgencyMaster/ViewAgencyAddModel.tsx

@@ -1,76 +0,0 @@
-import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../../components/ui/dialog"
-import { Field, Input, Stack, Text, Textarea } from "@chakra-ui/react"
-import { IoMdAdd } from "react-icons/io"
-import { Button } from "../../../components/ui/button"
-
-function ViewAgencyAddModel() {
-    return (
-
-        <DialogRoot placement="center">
-            <DialogTrigger asChild>
-                {/* <Button bg={"transparent"} size="sm">
-                    <MdOutlineRemoveRedEye style={{ cursor: "pointer", fontSize: "16px" }} />
-                </Button> */}
-                <Button  px={5} size={"xs"} bg={"#02A0A0"}>
-                    <IoMdAdd   /> <Text >Add</Text>
-                </Button>
-
-            </DialogTrigger>
-
-            <DialogContent
-                 bg={"#fff"}
-                 // w={{ lg: "60%", md: "230px" }}
-                 w={{ base: '90%', md: '400px' }}
-                  height={'80vh'}
-                 overflow={'scroll'}
-                 overflowX="hidden" 
-                 p={3} // Reduced padding
-                 bgSize={'md'}
-            >
-                <DialogHeader bg="white" >
-                    <DialogTitle alignSelf="center" color="black" fontSize="14px">Add</DialogTitle>
-                </DialogHeader>
-
-                <DialogBody bg="white">
-                    <Stack py={3}>
-
-                        <Field.Root>
-                            <Field.Label color="black" pt={1} fontSize="12px">Agency Name</Field.Label>
-                            <Input placeholder="" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-
-                            <Field.Label color="black" pt={1} fontSize="12px">RC No.</Field.Label>
-                            <Input placeholder="" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-
-                            <Field.Label color="black" pt={1} fontSize="12px">State</Field.Label>
-                            <Input placeholder="" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-
-                            <Field.Label color="black" pt={1} fontSize="12px">Registered Office Address</Field.Label>
-                            <Input placeholder="" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-                            
-                            <Field.Label color="black" pt={1} fontSize="12px">Website/Domain</Field.Label>
-                            <Input placeholder="" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-
-                            <Field.Label color="black" pt={1} fontSize="12px">GST no.</Field.Label>
-                            <Input placeholder="" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-                            
-                            <Field.Label color="black" pt={1} fontSize="12px">Action</Field.Label>
-                            <Input placeholder="" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-
-
-                        </Field.Root>
-                    </Stack>
-                </DialogBody>
-                <DialogFooter display="flex" justifyContent="center" pt={"2"}>
-                    <Button w="100%" bg="#02A0A0" color={"#fff"}>
-                        Save
-                    </Button>
-                </DialogFooter>
-
-                <DialogCloseTrigger color="black" />
-            </DialogContent>
-        </DialogRoot >
-
-    )
-}
-
-export default ViewAgencyAddModel

src/Pages/MasterModule/AgencyMaster/ViewAgencyMaster.tsx

@@ -1,75 +0,0 @@
-import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../../components/ui/dialog"
-import { Field, Input, Stack, } from "@chakra-ui/react"
-import { MdOutlineRemoveRedEye } from "react-icons/md"
-import { Button } from "../../../components/ui/button"
-
-
-function ViewAgencyMaster() {
-    return (
-
-
-        <DialogRoot placement="center">
-            <DialogTrigger asChild>
-                <Button bg={"transparent"} size="sm">
-                    <MdOutlineRemoveRedEye style={{ cursor: "pointer", fontSize: "14px" }}  color="#000"/>
-                </Button>
-            </DialogTrigger>
-
-            <DialogContent
-                bg={"#fff"}
-                // w={{ lg: "60%", md: "230px" }}
-                w={{ base: '90%', md: '400px' }}
-
-                height={'80vh'}
-                overflow={'scroll'}
-                overflowX="hidden" 
-                p={3} // Reduced padding
-                bgSize={'md'}
-            >
-                <DialogHeader bg="white">
-                    <DialogTitle alignSelf="center" color="black" fontSize="14px">Add</DialogTitle>
-                </DialogHeader>
-
-                <DialogBody bg="white">
-                    <Stack py={3}>
-                    <Field.Root>
-                            <Field.Label color="black" pt={1} fontSize="12px">Agency name</Field.Label>
-                            <Input value="Lorem Ipsum" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-
-                            <Field.Label color="black" pt={1} fontSize="12px">RC No.</Field.Label>
-                            <Input value="Lorem Ipsum" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-
-                            <Field.Label color="black" pt={1} fontSize="12px">State</Field.Label>
-                            <Input value="Lorem Ipsum" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-
-                            <Field.Label color="black" pt={1} fontSize="12px">Registered Office Address</Field.Label>
-                            <Input value="Active" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-                            
-                            <Field.Label color="black" pt={1} fontSize="12px">Website/Domain</Field.Label>
-                            <Input value="Lorem Ipsum" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-
-                            <Field.Label color="black" pt={1} fontSize="12px">GST no.</Field.Label>
-                            <Input value="Lorem Ipsum" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-                            
-                            <Field.Label color="black" pt={1} fontSize="12px">Action</Field.Label>
-                            <Input value="Lorem Ipsum" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-
-
-                        </Field.Root>
-                    </Stack>
-                </DialogBody>
-                <DialogFooter display="flex" justifyContent="center" pt={"2"}>
-                    <Button w="100%" bg="#02A0A0" color={"#fff"} fontSize="12px" height="30px">
-                        Save
-                    </Button>
-                </DialogFooter>
-
-                <DialogCloseTrigger color="black" />
-            </DialogContent>
-        </DialogRoot>
-
-
-    )
-}
-
-export default ViewAgencyMaster

src/Pages/MasterModule/Country/Country.tsx

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

src/Pages/MasterModule/Country/CountryAddModel.tsx

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

src/Pages/MasterModule/Country/EditCountryModel.tsx

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

src/Pages/MasterModule/JobStatus/EditJobStatusModel.tsx

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

src/Pages/MasterModule/JobStatus/JobStatus.tsx

@@ -1,86 +1,12 @@
-import { Box, HStack, Image, Input, Text } from "@chakra-ui/react";
 import MainFrame from "../../../components/MainFrame"
-import { InputGroup } from "../../../components/ui/input-group";
-import { LuSearch } from "react-icons/lu";
-import DataTable from "../../../components/DataTable";
-import { Switch } from "../../../components/ui/switch";
-import JobStatusAddModel from "./JobStatusAddModel";
-import EditJobStatusModel from "./EditJobStatusModel";
 
 
-
-// table data
-
-const tableHeadRow = [
-  "Sr. No",
-  "Title",
-  "Action"
-  
-];
-
-const managepost: any[] = [
-  ...Array.from({ length: 12 }, (_, i) => ({
-    "Sr. No": i + 1,
-    "Title": "Lorem Ipsum",
-    "Action": (
-      <HStack justifyContent="center">
-        <EditJobStatusModel />
-        <Box>
-          <Switch colorPalette={'teal'} size={"xs"}/>
-        </Box>
-      </HStack>
-    ),
-  })),
-];
-
 const JobStatus = () => {
-  return (
-
-    <MainFrame>
-      <Box>
-        <HStack
-          w={"100%"}
-          justifyContent={"space-between"}
-          mb={4}
-          py={0}
-          px={3}
-        >
-          <Text as={"span"} fontSize={"sm"} fontWeight={500} color={"#000"}>
-          Job Status
-          </Text>
-
-          <HStack mr={5}>
-            <InputGroup marginRight={"1rem"}
-              startElement={
-                <LuSearch fontSize={"xs"} style={{ position: 'relative', left: '10px' }} />
-              }
-              color={"#000"}
-            >
-              <Input
-                p={3}
-                w={300}
-                bg={"#fff"}
-                colorPalette={"blue"}
-                _focus={{ border: "1px solid #02A0A0" }}
-                rounded={"md"}
-                size={"2xs"}
-                fontSize={"2sm"}
-                placeholder="Search..."
-                bgColor={'#EEEEEE'}
-                ps={8}
-              />
-            </InputGroup>
-            {/* <Button bgColor={'#EEEEEE'} pl={3} pr={3}><IoMdAdd /> <Text>Add</Text></Button> */}
-            <JobStatusAddModel />
-          </HStack>
-        </HStack>
-        <DataTable
-          sortableColumns={["Name", "Registration Date "]}
-          tableHeadRow={tableHeadRow}
-          data={managepost}
-        />
-      </Box>       
-    </MainFrame>
-  )
-}
-export default JobStatus
+    return (
+      
+      <MainFrame>
+         JobStatus
+      </MainFrame>
+    )
+  }
+  export default JobStatus

src/Pages/MasterModule/JobStatus/JobStatusAddModel.tsx

@@ -1,58 +0,0 @@
-import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../../components/ui/dialog"
-import { Box, Field, IconButton, Input, Stack, Text, Textarea } from "@chakra-ui/react"
-import { IoMdAdd } from "react-icons/io"
-import { Button } from "../../../components/ui/button"
-
-function JobStatusAddModel() {
-   
-    return (
-
-        <DialogRoot placement="center">
-            <DialogTrigger asChild>
-                {/* <Button bg={"transparent"} size="sm">
-                    <MdOutlineRemoveRedEye style={{ cursor: "pointer", fontSize: "16px" }} />
-                </Button> */}
-                <Button  px={5} size={"xs"} bg={"#02A0A0"}>
-                    <IoMdAdd /> <Text>Add</Text>
-                </Button>
-
-            </DialogTrigger>
-
-            <DialogContent
-                 bg={"#fff"}
-                 // w={{ lg: "60%", md: "230px" }}
-                 w={{ base: '90%', md: '400px' }}
-                height={'auto'}
-                 
-                 overflowX="hidden" 
-                 p={3} // Reduced padding
-                 bgSize={'md'}
-            >
-                <DialogHeader bg="white" >
-                    <DialogTitle alignSelf="center" color="black" fontSize="14px">Add</DialogTitle>
-                </DialogHeader>
-
-                <DialogBody bg="white">
-                    <Stack py={3}>
-
-                        <Field.Root>
-                            <Field.Label color="black" pt={1} fontSize="12px">Job Status</Field.Label>
-                            <Input placeholder="" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-                        </Field.Root>
-                    </Stack>
-
-                </DialogBody>
-                <DialogFooter display="flex" justifyContent="center" pt={"2"}>
-                    <Button w="100%" bg="#02A0A0" color={"#fff"}>
-                        Save
-                    </Button>
-                </DialogFooter>
-
-                <DialogCloseTrigger color="black" />
-            </DialogContent>
-        </DialogRoot >
-
-    )
-}
-
-export default JobStatusAddModel

src/Pages/MasterModule/JobType/EditJobModel.tsx

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

src/Pages/MasterModule/JobType/JobAddModel.tsx

@@ -1,58 +0,0 @@
-import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../../components/ui/dialog"
-import { Box, Field, IconButton, Input, Stack, Text, Textarea } from "@chakra-ui/react"
-import { IoMdAdd } from "react-icons/io"
-import { Button } from "../../../components/ui/button"
-
-function JobAddModel() {
-   
-    return (
-
-        <DialogRoot placement="center">
-            <DialogTrigger asChild>
-                {/* <Button bg={"transparent"} size="sm">
-                    <MdOutlineRemoveRedEye style={{ cursor: "pointer", fontSize: "16px" }} />
-                </Button> */}
-                <Button  px={5} size={"xs"} bg={"#02A0A0"}>
-                    <IoMdAdd /> <Text>Add</Text>
-                </Button>
-
-            </DialogTrigger>
-
-            <DialogContent
-                 bg={"#fff"}
-                 // w={{ lg: "60%", md: "230px" }}
-                 w={{ base: '90%', md: '400px' }}
-                height={'auto'}
-                 
-                 overflowX="hidden" 
-                 p={3} // Reduced padding
-                 bgSize={'md'}
-            >
-                <DialogHeader bg="white" >
-                    <DialogTitle alignSelf="center" color="black" fontSize="14px">Add</DialogTitle>
-                </DialogHeader>
-
-                <DialogBody bg="white">
-                    <Stack py={3}>
-
-                        <Field.Root>
-                            <Field.Label color="black" pt={1} fontSize="12px">Job Type</Field.Label>
-                            <Input placeholder="" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-                        </Field.Root>
-                    </Stack>
-
-                </DialogBody>
-                <DialogFooter display="flex" justifyContent="center" pt={"2"}>
-                    <Button w="100%" bg="#02A0A0" color={"#fff"}>
-                        Save
-                    </Button>
-                </DialogFooter>
-
-                <DialogCloseTrigger color="black" />
-            </DialogContent>
-        </DialogRoot >
-
-    )
-}
-
-export default JobAddModel

src/Pages/MasterModule/JobType/JobType.tsx

@@ -1,86 +1,12 @@
-import { Box, HStack, Image, Input, Text } from "@chakra-ui/react";
 import MainFrame from "../../../components/MainFrame"
-import { InputGroup } from "../../../components/ui/input-group";
-import { LuSearch } from "react-icons/lu";
-import DataTable from "../../../components/DataTable";
-import { Switch } from "../../../components/ui/switch";
-import JobAddModel from "./JobAddModel";
-import EditJobeModel from "./EditJobModel";
 
 
-
-// table data
-
-const tableHeadRow = [
-  "Sr. No",
-  "Title",
-  "Action"
-  
-];
-
-const managepost: any[] = [
-  ...Array.from({ length: 12 }, (_, i) => ({
-    "Sr. No": i + 1,
-    "Title": "Lorem Ipsum",
-    "Action": (
-      <HStack justifyContent="center">
-        <EditJobeModel />
-        <Box>
-          <Switch colorPalette={'teal'} size={"xs"}/>
-        </Box>
-      </HStack>
-    ),
-  })),
-];
-
 const JobType = () => {
-  return (
-
-    <MainFrame>
-      <Box>
-        <HStack
-          w={"100%"}
-          justifyContent={"space-between"}
-          mb={4}
-          py={0}
-          px={3}
-        >
-          <Text as={"span"} fontSize={"sm"} fontWeight={500} color={"#000"}>
-          Job Type
-          </Text>
-
-          <HStack mr={5}>
-            <InputGroup marginRight={"1rem"}
-              startElement={
-                <LuSearch fontSize={"xs"} style={{ position: 'relative', left: '10px' }} />
-              }
-              color={"#000"}
-            >
-              <Input
-                p={3}
-                w={300}
-                bg={"#fff"}
-                colorPalette={"blue"}
-                _focus={{ border: "1px solid #02A0A0" }}
-                rounded={"md"}
-                size={"2xs"}
-                fontSize={"2sm"}
-                placeholder="Search..."
-                bgColor={'#EEEEEE'}
-                ps={8}
-              />
-            </InputGroup>
-            {/* <Button bgColor={'#EEEEEE'} pl={3} pr={3}><IoMdAdd /> <Text>Add</Text></Button> */}
-            <JobAddModel />
-          </HStack>
-        </HStack>
-        <DataTable
-          sortableColumns={["Name", "Registration Date "]}
-          tableHeadRow={tableHeadRow}
-          data={managepost}
-        />
-      </Box>       
-    </MainFrame>
-  )
-}
-export default JobType
+    return (
+      
+      <MainFrame>
+         JobType
+      </MainFrame>
+    )
+  }
+  export default JobType

src/Pages/MasterModule/TemplateMaster/EditTemplateModel.tsx

@@ -1,100 +0,0 @@
-import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../../components/ui/dialog"
-import { Box, Field, IconButton, Input, Stack, Text, Textarea } from "@chakra-ui/react"
-import { Button } from "../../../components/ui/button"
-import { FiUpload } from "react-icons/fi";
-import { useState } from "react";
-import { FaRegEdit } from "react-icons/fa";
-
-
-function EditTemplateModel() {
-
-    const [images, setImages] = useState<string[]>([]);
-
-    const handleImageChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-      if (event.target.files) {
-        const selectedFiles = Array.from(event.target.files);
-  
-        const newImages = selectedFiles.map((file) => {
-          return URL.createObjectURL(file); // Convert to preview URL
-        });
-  
-        setImages((prevImages) => [...prevImages, ...newImages]); // Append new images
-      }
-    };
-
-   
-    return (
-
-        <DialogRoot placement="center">
-            <DialogTrigger asChild>
-                {/* <Button bg={"transparent"} size="sm">
-                    <MdOutlineRemoveRedEye style={{ cursor: "pointer", fontSize: "16px" }} />
-                </Button> */}
-                <Button bg={"transparent"} size="sm">
-                 <FaRegEdit style={{ cursor: "pointer", fontSize: "14px" }}  color="#000"/>
-                </Button>
-
-            </DialogTrigger>
-
-            <DialogContent
-                 bg={"#fff"}
-                 // w={{ lg: "60%", md: "230px" }}
-                 w={{ base: '90%', md: '400px' }}
-                height={'auto'}
-                 
-                 overflowX="hidden" 
-                 p={3} // Reduced padding
-                 bgSize={'md'}
-            >
-                <DialogHeader bg="white" >
-                    <DialogTitle alignSelf="center" color="black" fontSize="14px">Add</DialogTitle>
-                </DialogHeader>
-
-                <DialogBody bg="white">
-                    <Stack py={3}>
-
-                        <Field.Root>
-                            <Field.Label color="black" pt={1} fontSize="12px">Template Name</Field.Label>
-                            <Input placeholder="" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-
-                            
-                            <Field.Label color="black" pt={1} fontSize="12px">Images</Field.Label>
-                            <Box display="flex" alignItems="center" justifyContent="space-between" px={3} bgColor="#EEEEEE" border="none" width="100%"  height="50px" cursor="pointer"  position="relative">
-                            <Input type="file" accept="image/*" opacity={0} position="absolute" bgColor="#EEEEEE" border="none" pl={1} width="100%" height="100%"  cursor="pointer" onChange={handleImageChange}/>
-                            <Box display="flex" gap={2} overflow="hidden">
-                                {images.length > 0 ? (
-                                images.map((img, index) => (
-                                    <img
-                                    key={index}
-                                    src={img}
-                                    alt={`Uploaded ${index}`}
-                                    style={{ maxHeight: "40px", maxWidth: "70px", objectFit: "contain" }}
-                                    />
-                                ))
-                                ) : (
-                                <Box width="70px" height="40px" /> // Placeholder to maintain layout
-                                )}
-                            </Box>
-                              <FiUpload color="#000" />
-                            </Box>
-                           
-                            {/* <Input placeholder="" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" /> */}
-
-                        </Field.Root>
-                    </Stack>
-
-                </DialogBody>
-                <DialogFooter display="flex" justifyContent="center" pt={"2"}>
-                    <Button w="100%" bg="#02A0A0" color={"#fff"}>
-                        Save
-                    </Button>
-                </DialogFooter>
-
-                <DialogCloseTrigger color="black" />
-            </DialogContent>
-        </DialogRoot >
-
-    )
-}
-
-export default EditTemplateModel

src/Pages/MasterModule/TemplateMaster/TemplateAddModel.tsx

@@ -1,100 +0,0 @@
-import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../../components/ui/dialog"
-import { Box, Field, IconButton, Input, Stack, Text, Textarea } from "@chakra-ui/react"
-import { IoMdAdd } from "react-icons/io"
-import { Button } from "../../../components/ui/button"
-import { FiUpload } from "react-icons/fi";
-import { useState } from "react";
-
-
-function TemplateAddModel() {
-
-    const [images, setImages] = useState<string[]>([]);
-
-    const handleImageChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-      if (event.target.files) {
-        const selectedFiles = Array.from(event.target.files);
-  
-        const newImages = selectedFiles.map((file) => {
-          return URL.createObjectURL(file); // Convert to preview URL
-        });
-  
-        setImages((prevImages) => [...prevImages, ...newImages]); // Append new images
-      }
-    };
-
-   
-    return (
-
-        <DialogRoot placement="center">
-            <DialogTrigger asChild>
-                {/* <Button bg={"transparent"} size="sm">
-                    <MdOutlineRemoveRedEye style={{ cursor: "pointer", fontSize: "16px" }} />
-                </Button> */}
-                <Button  px={5} size={"xs"} bg={"#02A0A0"}>
-                    <IoMdAdd /> <Text>Add</Text>
-                </Button>
-
-            </DialogTrigger>
-
-            <DialogContent
-                 bg={"#fff"}
-                 // w={{ lg: "60%", md: "230px" }}
-                 w={{ base: '90%', md: '400px' }}
-                height={'auto'}
-                 
-                 overflowX="hidden" 
-                 p={3} // Reduced padding
-                 bgSize={'md'}
-            >
-                <DialogHeader bg="white" >
-                    <DialogTitle alignSelf="center" color="black" fontSize="14px">Add</DialogTitle>
-                </DialogHeader>
-
-                <DialogBody bg="white">
-                    <Stack py={3}>
-
-                        <Field.Root>
-                            <Field.Label color="black" pt={1} fontSize="12px">Template Name</Field.Label>
-                            <Input placeholder="" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
-
-                            
-                            <Field.Label color="black" pt={1} fontSize="12px">Images</Field.Label>
-                            <Box display="flex" alignItems="center" justifyContent="space-between" px={3} bgColor="#EEEEEE" border="none" width="100%"  height="50px" cursor="pointer"  position="relative">
-                            <Input type="file" accept="image/*" opacity={0} position="absolute" bgColor="#EEEEEE" border="none" pl={1} width="100%" height="100%"  cursor="pointer" onChange={handleImageChange}/>
-                            <Box display="flex" gap={2} overflow="hidden">
-                                {images.length > 0 ? (
-                                images.map((img, index) => (
-                                    <img
-                                    key={index}
-                                    src={img}
-                                    alt={`Uploaded ${index}`}
-                                    style={{ maxHeight: "40px", maxWidth: "70px", objectFit: "contain" }}
-                                    />
-                                ))
-                                ) : (
-                                <Box width="70px" height="40px" /> // Placeholder to maintain layout
-                                )}
-                            </Box>
-                              <FiUpload color="#000" />
-                            </Box>
-                           
-                            {/* <Input placeholder="" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" /> */}
-
-                        </Field.Root>
-                    </Stack>
-
-                </DialogBody>
-                <DialogFooter display="flex" justifyContent="center" pt={"2"}>
-                    <Button w="100%" bg="#02A0A0" color={"#fff"}>
-                        Save
-                    </Button>
-                </DialogFooter>
-
-                <DialogCloseTrigger color="black" />
-            </DialogContent>
-        </DialogRoot >
-
-    )
-}
-
-export default TemplateAddModel

src/Pages/MasterModule/TemplateMaster/TemplateMaster.tsx

@@ -1,99 +1,12 @@
-import { Box, HStack, Image, Input, Text } from "@chakra-ui/react";
 import MainFrame from "../../../components/MainFrame"
-import { InputGroup } from "../../../components/ui/input-group";
-import { LuSearch } from "react-icons/lu";
-import DataTable from "../../../components/DataTable";
-import { Switch } from "../../../components/ui/switch";
-import img from "../../../assets/waterfall.jpg"
-import Templateimg from "../../../assets/Template_img.png"
-import TemplateAddModel from "./TemplateAddModel";
-import EditTemplateModel from "./EditTemplateModel";
 
 
-
-// table data
-
-const tableHeadRow = [
-  "Sr. No",
-  "Title",
-  "Images",
-  "Action"
-  
-];
-
-const managepost: any[] = [
-  ...Array.from({ length: 12 }, (_, i) => ({
-    "Sr. No": i + 1,
-    "Title": "Lorem Ipsum",
-    "Images": (
-      // <Image w={50} src={img} />
-      <HStack >
-      <Image w={100} h={50} src={img} />
-      <Image w={100} h={50} src={Templateimg} />
-      </HStack>
-
-
-    ),
-    
-    "Action": (
-      <HStack justifyContent="center">
-        <EditTemplateModel />
-        <Box>
-          <Switch colorPalette={'teal'} size={"xs"}/>
-        </Box>
-      </HStack>
-    ),
-  })),
-];
-
 const TemplateMaster = () => {
-  return (
-
-    <MainFrame>
-      <Box>
-        <HStack
-          w={"100%"}
-          justifyContent={"space-between"}
-          mb={4}
-          py={0}
-          px={3}
-        >
-          <Text as={"span"} fontSize={"sm"} fontWeight={500} color={"#000"}>
-          Template Master
-          </Text>
-
-          <HStack mr={5}>
-            <InputGroup marginRight={"1rem"}
-              startElement={
-                <LuSearch fontSize={"xs"} style={{ position: 'relative', left: '10px' }} />
-              }
-              color={"#000"}
-            >
-              <Input
-                p={3}
-                w={300}
-                bg={"#fff"}
-                colorPalette={"blue"}
-                _focus={{ border: "1px solid #02A0A0" }}
-                rounded={"md"}
-                size={"2xs"}
-                fontSize={"2sm"}
-                placeholder="Search..."
-                bgColor={'#EEEEEE'}
-                ps={8}
-              />
-            </InputGroup>
-            {/* <Button bgColor={'#EEEEEE'} pl={3} pr={3}><IoMdAdd /> <Text>Add</Text></Button> */}
-            <TemplateAddModel />
-          </HStack>
-        </HStack>
-        <DataTable
-          sortableColumns={["Name", "Registration Date "]}
-          tableHeadRow={tableHeadRow}
-          data={managepost}
-        />
-      </Box>       
-    </MainFrame>
-  )
-}
-export default TemplateMaster
+    return (
+      
+      <MainFrame>
+         TemplateMaster
+      </MainFrame>
+    )
+  }
+  export default TemplateMaster

src/Pages/MasterModule/WorkspaceMode/EditWorkModel.tsx

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

src/Pages/MasterModule/WorkspaceMode/WorkAddModel.tsx

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

src/Pages/MasterModule/WorkspaceMode/WorkspaceMode.tsx

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

src/Pages/MyProfile/MyProfile.tsx

@@ -2,9 +2,9 @@ import MainFrame from "../../components/MainFrame"
 
 const MyProfile = () => {
   return (
-
+    
     <MainFrame >
-      MyProfile
+        MyProfile
     </MainFrame>
   )
 }

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

@@ -1,58 +0,0 @@
-
-import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../components/ui/dialog"
-import { Field, Grid, Heading, Input, Stack, Text } from "@chakra-ui/react"
-import { FaRegEdit } from "react-icons/fa";
-import { Button } from "../../components/ui/button";
-import EnterPassword from "./EnterPassword";
-function Changepassword() {
-    return (
-
-        <DialogRoot placement="center">
-            <DialogTrigger asChild>
-                <Button bg="#02A0A0" color={"#fff"} p={4} fontSize={"12px"} mt={2}>
-                    Change Password
-                </Button>
-
-            </DialogTrigger>
-
-            <DialogContent
-                bg={"#fff"}
-                // w={{ lg: "60%", md: "230px" }}
-                w={{ base: '90%', md: '400px' }}
-
-                // height={'80vh'}
-                // overflow={'scroll'}
-                p={2} // Reduced padding
-                bgSize={'md'}
-            >
-                <DialogHeader bg="white" pt={3} pb={2} >
-                    <DialogTitle alignSelf="center" color="black" fontSize="18px" textAlign={"center"}>CHANGE PASSWORD</DialogTitle>
-                </DialogHeader>
-
-                <DialogBody bg="white" pt={5}>
-                    <Stack p={2} >
-                        <Field.Root>
-                            <Field.Label color="black" pt={1} fontSize="12px">New password</Field.Label>
-                            <Input color="black" pl={1} fontSize="12px" height="30px" type="password" border="1px solid grey" /></Field.Root>
-                        <Field.Root>
-                            <Field.Label color="black" pt={1} fontSize="12px">Confirm password</Field.Label>
-                            <Input color="black" pl={1} fontSize="12px" height="30px" type="password" border="1px solid grey" /></Field.Root>
-
-                    </Stack>
-                </DialogBody>
-                <DialogFooter display="flex" justifyContent="center" mt={2} p={2}
-                >
-                    {/* <Button w="100%" bg="#02A0A0" color={"#fff"}>
-                        Save
-                    </Button> */}
-                    <EnterPassword />
-                </DialogFooter>
-
-                {/* <DialogCloseTrigger color="black" /> */}
-            </DialogContent>
-        </DialogRoot >
-
-    )
-}
-
-export default Changepassword

src/Pages/Profile/EnterOTP.tsx

@@ -1,109 +0,0 @@
-import { DialogBody, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../components/ui/dialog"
-import { Box, Input, Stack, Text } from "@chakra-ui/react"
-import { Button } from "../../components/ui/button";
-import { useState } from "react";
-import { BiSolidEdit } from "react-icons/bi";
-
-function EnterOTP() {
-    const [otp, setOtp] = useState<string[]>(["", "", "", ""]);
-
-    // Handle change for OTP inputs
-    const handleChange = (e: React.ChangeEvent<HTMLInputElement>, index: number): void => {
-        const value = e.target.value;
-
-        // Prevent non-numeric input
-        if (/[^0-9]/.test(value)) return;
-
-        // Update the OTP state with the new value
-        const newOtp = [...otp];
-        newOtp[index] = value;
-        setOtp(newOtp);
-
-        // Move focus to the next input automatically
-        if (value && index < otp.length - 1) {
-            const nextInput = document.getElementById(`otp-input-${index + 1}`) as HTMLInputElement;
-            if (nextInput) nextInput.focus();
-        }
-    };
-
-    return (
-
-        <DialogRoot placement="center">
-            <DialogTrigger asChild>
-                <Button w="100%" bg="#02A0A0" color={"#fff"}>
-                    Save
-                </Button>
-
-            </DialogTrigger>
-
-            <DialogContent
-                bg={"#fff"}
-                // w={{ lg: "60%", md: "230px" }}
-                w={{ base: '90%', md: '400px' }}
-
-                // height={'80vh'}
-                // overflow={'scroll'}
-                p={2} // Reduced padding
-                bgSize={'md'}
-            >
-                <DialogHeader bg="white" pt={3}>
-                    <DialogTitle alignSelf="center" color="black" fontSize="18px" textAlign={"center"}>ENTER OTP</DialogTitle>
-                </DialogHeader>
-
-                <DialogBody bg="white" pt={2}>
-                    <Text color={"black"} textAlign={"center"}>OTP has been send to your E-mail Address</Text>
-                    <Box display="flex" flexDirection="row" alignItems="center" justifyContent="center" p={3}>
-                        <BiSolidEdit color="black" />
-                        <Text color="black" textAlign="center" ml={2}>9619565889</Text>
-                    </Box>
-
-
-                    <Stack direction="row" justify="center" pt={2}>
-
-                        {/* 4 OTP Inputs */}
-                        {otp.map((digit, index) => (
-                            <Input
-                                key={index}
-                                id={`otp-input-${index}`}
-                                value={digit}
-                                maxW="50px"
-                                color={"black"}
-                                textAlign="center"
-                                fontSize="20px"
-                                placeholder="0"
-                                border="1px solid grey"
-                                onChange={(e) => handleChange(e, index)}
-                                maxLength={1} // Only allows 1 character per input
-                            />
-                        ))}
-                    </Stack>
-                    <Box textAlign="center">
-                        <Text
-                            color="#4746F4"
-                            textDecoration="underline"
-                            fontWeight="bold"
-                            mt={3}
-                            cursor="pointer"
-                            display="inline-block"
-                            px={2} // Adds padding for better appearance
-                        >
-                            Resend OTP
-                        </Text>
-                    </Box>
-
-                </DialogBody>
-                <DialogFooter display="flex" justifyContent="center" mt={2} p={2}
-                >
-                    <Button w="100%" bg="#02A0A0" color={"#fff"}>
-                        Save
-                    </Button>
-                </DialogFooter>
-
-                {/* <DialogCloseTrigger color="black" /> */}
-            </DialogContent>
-        </DialogRoot >
-
-    )
-}
-
-export default EnterOTP

src/Pages/Profile/EnterPassword.tsx

@@ -1,55 +0,0 @@
-
-import { DialogBody, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../components/ui/dialog"
-import { Field, Input, Stack } from "@chakra-ui/react"
-import { Button } from "../../components/ui/button";
-import EnterOTP from "./EnterOTP";
-function EnterPassword() {
-    return (
-
-        <DialogRoot placement="center">
-            <DialogTrigger asChild>
-                <Button w="100%" bg="#02A0A0" color={"#fff"}>
-                    Save
-                </Button>
-
-            </DialogTrigger>
-
-            <DialogContent
-                bg={"#fff"}
-                // w={{ lg: "60%", md: "230px" }}
-                w={{ base: '90%', md: '400px' }}
-
-                // height={'80vh'}
-                // overflow={'scroll'}
-                p={2} // Reduced padding
-                bgSize={'md'}
-            >
-                <DialogHeader bg="white" pt={3} pb={2} >
-                    <DialogTitle alignSelf="center" color="black" fontSize="18px" textAlign={"center"}>ENTER PASSWORD</DialogTitle>
-                </DialogHeader>
-
-                <DialogBody bg="white" pt={5}>
-                    <Stack p={2} >
-                        <Field.Root>
-                            <Field.Label color="black" pt={1} fontSize="12px">Password</Field.Label>
-                            <Input color="black" pl={1} fontSize="12px" height="30px" type="password" border="1px solid grey" /></Field.Root>
-
-
-                    </Stack>
-                </DialogBody>
-                <DialogFooter display="flex" justifyContent="center" mt={2} p={2}
-                >
-                    {/* <Button w="100%" bg="#02A0A0" color={"#fff"}>
-                        Save
-                    </Button> */}
-                    <EnterOTP />
-                </DialogFooter>
-
-                {/* <DialogCloseTrigger color="black" /> */}
-            </DialogContent>
-        </DialogRoot >
-
-    )
-}
-
-export default EnterPassword

src/Pages/Profile/Profile.tsx

@@ -3,7 +3,7 @@ import MainFrame from "../../components/MainFrame"
 const Profile = () => {
   return (
     <MainFrame >
-
+      Profile
     </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 bgColor={'#EEEEEE'} pl={3} pr={3}><IoMdAdd /> <Text>Add</Text></Button>
 
             </DialogTrigger>
 
@@ -20,19 +20,19 @@ function AddModel() {
                 bg={"#fff"}
                 // w={{ lg: "60%", md: "230px" }}
                 w={{ base: '90%', md: '400px' }}
+
                 height={'80vh'}
                 overflow={'scroll'}
-                overflowX="hidden" 
-                p={3} // Reduced padding
+                p={2} // Reduced padding
                 bgSize={'md'}
             >
-                <DialogHeader bg="white"  >
+                <DialogHeader bg="white" pt={1} pb={2}>
                     <DialogTitle alignSelf="center" color="black" fontSize="14px"
                     >Add Sub Admin Account</DialogTitle>
                 </DialogHeader>
 
                 <DialogBody bg="white">
-                    <Stack py={3} >
+                    <Stack p={2} >
 
                         <Field.Root>
                             <Field.Label color="black" pt={1} fontSize="12px">First Name</Field.Label>
@@ -64,7 +64,7 @@ function AddModel() {
                         </Grid>
                     </Stack>
                 </DialogBody>
-                <DialogFooter display="flex" justifyContent="center" pt={"2"}>
+                <DialogFooter display="flex" justifyContent="center">
                     <Button w="100%" bg="#02A0A0" color={"#fff"}>
                         Save
                     </Button>

src/Pages/SubAdmin/SubAdmin.tsx

@@ -70,8 +70,8 @@ const SubAdmin = () => {
             {/* Manage Post */}
           </Text>
 
-          <HStack>
-            <InputGroup 
+          <HStack mr={5}>
+            <InputGroup marginRight={"1rem"}
               startElement={
                 <LuSearch fontSize={"xs"} style={{ position: 'relative', left: '10px' }} />
               }

src/Pages/SubAdmin/ViewSubAdmin.tsx

@@ -9,7 +9,7 @@ function ViewSubAdmin() {
         <DialogRoot placement="center" >
             <DialogTrigger asChild>
                 <Button bg={"transparent"} size="sm">
-                    <MdOutlineRemoveRedEye style={{ cursor: "pointer", }} color="#000"/>
+                    <MdOutlineRemoveRedEye style={{ cursor: "pointer", }} />
                 </Button>
                 {/* <Button><FaRegEdit /></Button> */}
 
@@ -19,18 +19,20 @@ function ViewSubAdmin() {
                 bg={"#fff"}
                 // w={{ lg: "60%", md: "230px" }}
                 w={{ base: '90%', md: '400px' }}
+
+
+
                 height={'80vh'}
                 overflow={'scroll'}
-                overflowX="hidden" 
-                p={3} // Reduced padding
+                p={2} // Reduced padding
                 bgSize={'md'}
             >
-                <DialogHeader bg="white">
+                <DialogHeader bg="white" pt={1} pb={2}>
                     <DialogTitle alignSelf="center" color="black" fontSize="14px">View Sub Admin Account</DialogTitle>
                 </DialogHeader>
 
                 <DialogBody bg="white">
-                    <Stack py={3} >
+                    <Stack p={2} >
 
                         <Field.Root>
                             <Field.Label color="black" pt={1} fontSize="12px">First Name</Field.Label>
@@ -66,11 +68,11 @@ function ViewSubAdmin() {
                         </Grid>
                     </Stack>
                 </DialogBody>
-                <DialogFooter display="flex" justifyContent="center" pt={"2"} >
+                {/* <DialogFooter display="flex" justifyContent="center">
                     <Button w="100%" bg="#02A0A0" color={"#fff"}>
                         Save
                     </Button>
-                </DialogFooter>
+                </DialogFooter> */}
 
                 <DialogCloseTrigger color="black" />
             </DialogContent>

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: "",
+          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: "",
+          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: "",
+          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,49 @@
 
+
 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";
+
 export const RouteLink = [
     { path: "/", Component: Dashboard },
-    { path: "/manage-user/register-user", Component: RegisterUsers },
-    { path: "/manage-user/deactivate-accounts", Component: DeactivatedAccounts },
+    { 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},
 ]

src/components/AboutUsAddModel.tsx

@@ -1,7 +1,7 @@
 import { FaRegEdit } from "react-icons/fa"
-import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../../components/ui/dialog"
+import { Button } from "./ui/button"
+import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "./ui/dialog"
 import { Field, Stack, Text, Textarea } from "@chakra-ui/react"
-import { Button } from "../../../components/ui/button"
 
 function AboutUsAddModel() {
     return (
@@ -11,33 +11,31 @@ function AboutUsAddModel() {
                 {/* <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}> <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'}
+                w={{ base: "90%", md: "400px" }}
+                maxW="90vw"
+                h="auto"
+                p={4}
             >
-                <DialogHeader bg="white" >
-                    <DialogTitle alignSelf="center" color="black" fontSize="14px">Edit</DialogTitle>
+                <DialogHeader bg="white" py={3} >
+                    <DialogTitle alignSelf="center" color="black">Edit</DialogTitle>
                 </DialogHeader>
 
                 <DialogBody bg="white">
-                    <Stack py={3} >
+                    <Stack  >
 
                         <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={2}>AboutUs</Field.Label>
+                            <Textarea placeholder="" bgColor="#EEEEEE" color="black" border="none" pl={2} pt={2}/>
                         </Field.Root>
                     </Stack>
                 </DialogBody>
-                <DialogFooter display="flex" justifyContent="center" pt={"2"}>
+                <DialogFooter display="flex" justifyContent="center" pt={"5"}>
                     <Button w="100%" bg="#02A0A0" color={"#fff"}>
                         Save
                     </Button>

src/components/Charts/CircularProgress.tsx

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

src/components/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/EditDetails.tsx

@@ -1,5 +1,5 @@
-import { Button } from "../../../components/ui/button"
-import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../../components/ui/dialog"
+import { Button } from "./ui/button"
+import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "./ui/dialog"
 import { Field, Grid, Input, Stack, Text, Textarea } from "@chakra-ui/react"
 import { FaRegEdit } from "react-icons/fa";
 function EditDetails() {
@@ -16,31 +16,29 @@ function EditDetails() {
 
             <DialogContent
                 bg={"#fff"}
-                // w={{ lg: "60%", md: "230px" }}
-                w={{ base: '90%', md: '400px' }}
-                height={"auto"}
-
-                p={3} // Reduced padding
-                bgSize={'md'}
+                w={{ base: "90%", md: "400px" }}
+                maxW="90vw"
+                h="auto"
+                p={4}
             >
-                <DialogHeader bg="white" >
-                    <DialogTitle alignSelf="center" color="black" fontSize="14px">Edit Details</DialogTitle>
+                <DialogHeader bg="white" py={3}>
+                    <DialogTitle alignSelf="center" color="black">Edit Details</DialogTitle>
                 </DialogHeader>
 
                 <DialogBody bg="white">
-                    <Stack py={3} >
+                    <Stack  >
 
                         <Field.Root>
-                            <Field.Label color="black" pt={1} fontSize="12px">Questions</Field.Label>
-                            <Input placeholder="Questions" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
+                            <Field.Label color="black" pt={2}>Questions</Field.Label>
+                            <Input placeholder="Questions" bgColor="#EEEEEE" color="black" border="none" pl={2} />
 
-                            <Field.Label color="black" pt={1} fontSize="12px">Answer</Field.Label>
-                            <Textarea placeholder="Answer" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" pt={1.5} />
+                            <Field.Label color="black" pt={2}>Answer</Field.Label>
+                            <Textarea placeholder="Answer" bgColor="#EEEEEE" color="black" border="none" pl={2} pt={2} />
 
                         </Field.Root>
                     </Stack>
                 </DialogBody>
-                <DialogFooter display="flex" justifyContent="center" pt={"2"}>
+                <DialogFooter display="flex" justifyContent="center" pt={"5"}>
                     <Button w="100%" bg="#02A0A0" color={"#fff"}>
                         Save
                     </Button>

src/components/EditSubAdmin.tsx

@@ -9,7 +9,7 @@ function EditSubAdmin() {
         <DialogRoot placement="center">
             <DialogTrigger asChild>
                 <Button bg={"transparent"} size="sm">
-                    <FaRegEdit style={{ cursor: "pointer", }} color="#000" />
+                    <FaRegEdit style={{ cursor: "pointer", }} />
                 </Button>
                 {/* <Button><FaRegEdit /></Button> */}
 
@@ -17,25 +17,23 @@ function EditSubAdmin() {
 
             <DialogContent
                 bg={"#fff"}
-                w={{ base: '90%', md: '400px' }}
+                w={{ lg: "60%", md: "230px" }}
                 height={'80vh'}
                 overflow={'scroll'}
-                overflowX="hidden" 
-                p={3} // Reduced padding
+                p={2} // Reduced padding
                 bgSize={'md'}
             >
-                <DialogHeader bg="white">
+                <DialogHeader bg="white" pt={1} pb={2}>
                     <DialogTitle alignSelf="center" color="black" fontSize="14px">Edit Sub Admin Account</DialogTitle>
                 </DialogHeader>
 
                 <DialogBody bg="white">
-                    <Stack py={3} >
+                    <Stack p={2} >
 
                         <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" />
 
@@ -63,7 +61,7 @@ function EditSubAdmin() {
                         </Grid>
                     </Stack>
                 </DialogBody>
-                <DialogFooter display="flex" justifyContent="center" pt={"2"}>
+                <DialogFooter display="flex" justifyContent="center">
                     <Button w="100%" bg="#02A0A0" color={"#fff"}>
                         Save
                     </Button>

src/components/FaqAddModel.tsx

@@ -1,7 +1,7 @@
-import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../../components/ui/dialog"
-import { Field, Input, Stack, Text, Textarea } from "@chakra-ui/react"
+import { Button } from "./ui/button"
+import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "./ui/dialog"
+import { Field, Grid, Input, Stack, Text, Textarea } from "@chakra-ui/react"
 import { IoMdAdd } from "react-icons/io"
-import { Button } from "../../../components/ui/button"
 
 function FaqAddModel() {
     return (
@@ -11,37 +11,35 @@ function FaqAddModel() {
                 {/* <Button bg={"transparent"} size="sm">
                     <MdOutlineRemoveRedEye style={{ cursor: "pointer", fontSize: "16px" }} />
                 </Button> */}
-                <Button px={5} size={"xs"} bg={"#02A0A0"}><IoMdAdd /> <Text>Add</Text></Button>
+                <Button bgColor={'#EEEEEE'} pl={3} pr={3}><IoMdAdd color="#000"  /> <Text color={"#00000099"}>Add</Text></Button>
 
             </DialogTrigger>
 
             <DialogContent
                 bg={"#fff"}
-                // w={{ lg: "60%", md: "230px" }}
-                w={{ base: '90%', md: '400px' }}
-                height={"auto"}
-
-                p={3} // Reduced padding
-                bgSize={'md'}
+                w={{ base: "90%", md: "400px" }}
+                maxW="90vw"
+                h="auto"
+                p={4}
             >
-                <DialogHeader bg="white" >
-                    <DialogTitle alignSelf="center" color="black" fontSize="14px">Add</DialogTitle>
+                <DialogHeader bg="white" py={3}>
+                    <DialogTitle alignSelf="center" color="black">Add</DialogTitle>
                 </DialogHeader>
 
                 <DialogBody bg="white">
-                    <Stack py={3} >
+                    <Stack  >
 
                         <Field.Root>
-                            <Field.Label color="black" pt={1} fontSize="12px">Questions</Field.Label>
-                            <Input placeholder="Questions" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" />
+                            <Field.Label color="black" pt={2}>Questions</Field.Label>
+                            <Input placeholder="Questions" bgColor="#EEEEEE" color="black" border="none" pl={2} />
 
-                            <Field.Label color="black" pt={1} fontSize="12px">Answer</Field.Label>
-                            <Textarea placeholder="Answer" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" pt={1.5} />
+                            <Field.Label color="black" pt={2}>Answer</Field.Label>
+                            <Textarea placeholder="Answer" bgColor="#EEEEEE" color="black" border="none" pl={2} pt={2} />
 
                         </Field.Root>
                     </Stack>
                 </DialogBody>
-                <DialogFooter display="flex" justifyContent="center" pt={"2"}>
+                <DialogFooter display="flex" justifyContent="center" pt={"5"}>
                     <Button w="100%" bg="#02A0A0" color={"#fff"}>
                         Save
                     </Button>

src/components/MainFrame.tsx

@@ -1,4 +1,4 @@
-import { Box, VStack } from "@chakra-ui/react"
+import { Box, Text, VStack } from "@chakra-ui/react"
 import { motion } from "framer-motion"
 import React, { FC } from "react"
 import { OPACITY_ON_LOAD } from "../Layouts/animations"
@@ -11,15 +11,17 @@ interface MainFrameProps {
   title?: string
 }
 
-const MainFrame: FC<MainFrameProps> = ({ children }) => {
+const MainFrame: FC<MainFrameProps> = ({ children, title }) => {
   return (
-    <MotionVStack overflowY="scroll" {...OPACITY_ON_LOAD} w="100%" h="94.5%"  p={3} pe={0} ps={0} pt={3}   >
+    <MotionVStack {...OPACITY_ON_LOAD} w="100%" h="90%" p={0}  pb={0}>
       <Box
         w="100%"
         h="100%"
         bg="#ffffff"
-        rounded="md"
+        overflow={'scroll'}
+        // rounded="md"
         boxShadow={'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px'}
+        pt={3}
       >
         {children}
       </Box>

src/components/PendingRequests.tsx

@@ -1,6 +1,6 @@
-import { Button } from "../../components/ui/button"
-import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../components/ui/dialog"
-import { Field, HStack, Input, Stack, Textarea, } from "@chakra-ui/react"
+import { Button } from "./ui/button"
+import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "./ui/dialog"
+import { Field, HStack, Input, Stack, Textarea,  } from "@chakra-ui/react"
 function PendingRequests() {
     return (
 
@@ -16,33 +16,33 @@ function PendingRequests() {
 
             <DialogContent
                 bg={"#fff"}
-                w={{ base: '90%', md: '400px' }}
-                height={"auto"}
-                p={3} // Reduced padding
-                bgSize={'md'}
+                w={{ base: "90%", md: "400px" }}
+                maxW="90vw"
+                h="auto"
+                p={4}
             >
-                <DialogHeader bg="white">
-                    <DialogTitle alignSelf="center" color="black" fontSize="14px">Pending Requests</DialogTitle>
+                <DialogHeader bg="white" py={3}>
+                    <DialogTitle alignSelf="center" color="black">Pending Requests</DialogTitle>
                 </DialogHeader>
 
                 <DialogBody bg="white">
-                    <Stack py={3}>
+                    <Stack  >
+
                         <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={2}>Request Type</Field.Label>
+                            <Input placeholder="Message" bgColor="#EEEEEE" color="black" border="none" pl={2} />
 
-                            <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.Label color="black" pt={2}>Solution</Field.Label>
+                            <Textarea placeholder="" bgColor="#EEEEEE" height={"80px"} color="black" border="none" pl={2}  pt={2}/>
                         </Field.Root>
-
+                        
                     </Stack>
                 </DialogBody>
-                <DialogFooter display={{ base: 'block', md: 'flex' }} justifyContent="center" gap={1} pt={2}>
-
-                    <HStack mt={2} width={"100%"}
-                        justifyContent={"space-between"}>
+                <DialogFooter display={{base:'block', md:'flex'}} justifyContent="center" gap={1} pt={5}>
+                     
+                    <HStack mt={2} w={"100%"}>
                         <Button
-                            width={"48%"}
+                            width="50%"
                             color="black"
                             _hover={{ bgColor: "white" }}
                             variant="outline"
@@ -53,14 +53,14 @@ function PendingRequests() {
                             Unresolved
                         </Button>
                         <Button
-                            width={"48%"}
                             borderRadius="sm"
+                            width="50%"
                             // bgColor="#007F33"
                             bgColor={'#02A0A0'}
                             color="white"
                             // colorPalette="#007F33"
                             size={"xs"}
-                        >
+                            >
                             Resolved{" "}
                         </Button>
                     </HStack>

src/components/PrivacyPolicyAddModel.tsx

@@ -1,7 +1,7 @@
 import { FaRegEdit } from "react-icons/fa"
-import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../../components/ui/dialog"
+import { Button } from "./ui/button"
+import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "./ui/dialog"
 import { Field, Input, Stack, Text, Textarea } from "@chakra-ui/react"
-import { Button } from "../../../components/ui/button"
 
 function PrivacyPolicyAddModel() {
     return (
@@ -11,33 +11,31 @@ function PrivacyPolicyAddModel() {
                 {/* <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}> <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'}
+                w={{ base: "90%", md: "400px" }}
+                maxW="90vw"
+                h="auto"
+                p={4}
             >
-                <DialogHeader bg="white"  >
-                    <DialogTitle alignSelf="center" color="black" fontSize="14px">Edit</DialogTitle>
+                <DialogHeader bg="white" py={3} >
+                    <DialogTitle alignSelf="center" color="black">Edit</DialogTitle>
                 </DialogHeader>
 
                 <DialogBody bg="white">
-                    <Stack py={3} >
+                    <Stack  >
 
                         <Field.Root>
-                            <Field.Label color="black" pt={1} fontSize="12px">PrivacyPolicy</Field.Label>
-                            <Textarea placeholder="" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" pt={1.5} />
+                            <Field.Label color="black" pt={2}>PrivacyPolicy</Field.Label>
+                            <Textarea placeholder="" bgColor="#EEEEEE" color="black" border="none" pl={2} pt={2}/>
                         </Field.Root>
                     </Stack>
                 </DialogBody>
-                <DialogFooter display="flex" justifyContent="center" pt={"2"}>
+                <DialogFooter display="flex" justifyContent="center" pt={"5"}>
                     <Button w="100%" bg="#02A0A0" color={"#fff"}>
                         Save
                     </Button>

src/components/TermsAndConditionsAddModel.tsx

@@ -1,7 +1,7 @@
 import { FaRegEdit } from "react-icons/fa"
-import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "../../../components/ui/dialog"
+import { Button } from "./ui/button"
+import { DialogBody, DialogCloseTrigger, DialogContent, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "./ui/dialog"
 import { Field, Stack, Text, Textarea } from "@chakra-ui/react"
-import { Button } from "../../../components/ui/button"
 
 function TermsAndConditionsAddModel() {
     return (
@@ -11,33 +11,31 @@ function TermsAndConditionsAddModel() {
                 {/* <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}> <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'}
+                w={{ base: "90%", md: "400px" }}
+                maxW="90vw"
+                h="auto"
+                p={4}
             >
-                <DialogHeader bg="white">
-                    <DialogTitle alignSelf="center" color="black" fontSize="14px">Edit</DialogTitle>
+                <DialogHeader bg="white" py={3} >
+                    <DialogTitle alignSelf="center" color="black">Edit</DialogTitle>
                 </DialogHeader>
 
                 <DialogBody bg="white">
-                    <Stack py={3}>
+                    <Stack  >
 
                         <Field.Root>
-                            <Field.Label color="black" pt={1} fontSize="12px">TermsAndConditions</Field.Label>
-                            <Textarea placeholder="" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" pt={1.5} />
+                            <Field.Label color="black" pt={2}>TermsAndConditions</Field.Label>
+                            <Textarea placeholder="" bgColor="#EEEEEE" color="black" border="none" pl={2} pt={2}/>
                         </Field.Root>
                     </Stack>
                 </DialogBody>
-                <DialogFooter display="flex" justifyContent="center" pt={"2"}>
+                <DialogFooter display="flex" justifyContent="center" pt={"5"}>
                     <Button w="100%" bg="#02A0A0" color={"#fff"}>
                         Save
                     </Button>

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/index.css

@@ -1,10 +1,26 @@
-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;
+}
+
+.Oxygen {
+  font-family: "Oxygen", serif
+}
+
+
 .active {
   background-color: #02A0A0 !important;
   color: #fff !important;
@@ -21,19 +37,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 +52,7 @@ body{
   border-radius: 8px;
 }
 
-.link{
+.link {
   transition: all 0.5s;
 }
 
@@ -54,26 +65,107 @@ body{
 }
 
 
+/* 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%;
+}
+
+
 /* Style the scrollbar */
 ::-webkit-scrollbar {
-  width: 12px; /* Width of the vertical scrollbar */
-  height: 12px; /* Height of the horizontal 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; /* Light gray track */
+  background-color: #f1f1f1;
   border-radius: 10px;
 }
 
 /* Style the scrollbar thumb (the draggable part) */
 ::-webkit-scrollbar-thumb {
-  background-color: #02A0A0; /* Gray color for the thumb */
+  background-color: #c8c8c8cf;
+  /* Gray color for the thumb */
   border-radius: 10px;
-  border: 3px solid #f1f1f1; /* Border around the thumb */
+  border: 1px solid #f1f1f1;
+  /* Border around the thumb */
 }
 
 /* Style the scrollbar thumb on hover */
 ::-webkit-scrollbar-thumb:hover {
-  background-color: #555; /* Darker gray when hovered */
+  background-color: #555;
+  /* Darker gray when hovered */
 }
+
+input:focus-visible {
+  border: none !important;
+}
+
+.css-1ilznyv {
+  border: none;
+}