first commit

src/userComponents/DashboardCard.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { Box, Text } from "@chakra-ui/react";
+
+const DashboardCard = ({ title, value }) => {
+  return (
+    <Box
+      bg="white"
+      p={6}
+      borderRadius="lg"
+      shadow="md"
+      textAlign="center"
+      _hover={{ shadow: "lg" }}
+    >
+      <Text fontSize="lg" fontWeight="bold" mb={2}>
+        {title}
+      </Text>
+      <Text fontSize="2xl" fontWeight="bold" color="blue.500">
+        {value}
+      </Text>
+    </Box>
+  );
+};
+
+export default DashboardCard;

src/userComponents/Navbar.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import { Box, Flex, Text } from "@chakra-ui/react";
+
+const Navbar = () => {
+  return (
+    <Box bg="blue.600" color="white" w="100%" p={4}>
+      <Flex justify="space-between" align="center">
+        <Text fontSize="xl" fontWeight="bold">
+          Dashboard
+        </Text>
+        <Text>Welcome, User!</Text>
+      </Flex>
+    </Box>
+  );
+};
+
+export default Navbar;

src/userComponents/Sidebar.tsx

@@ -0,0 +1,173 @@
+import React, { useState } from "react";
+import { Box, VStack, Link, Stack, Text, Image, Flex } from "@chakra-ui/react";
+import { Link as RouterLink } from "react-router-dom";
+import { MdDashboard } from "react-icons/md";
+import logo from "../../public/images/logo/logo.png";
+import { FaChevronUp } from "react-icons/fa";
+import { FaChevronDown } from "react-icons/fa";
+import { IoDocumentTextOutline } from "react-icons/io5";
+import { FiEdit } from "react-icons/fi";
+import { FaRegUser } from "react-icons/fa";
+import { IoBag } from "react-icons/io5";
+import { MdGroups } from "react-icons/md";
+import { BiSupport } from "react-icons/bi";
+import { GiDatabase } from "react-icons/gi";
+
+const Sidebar = () => {
+  const [activeSection, setActiveSection] = useState("dashboard");
+
+  const toggleSection = (section) => {
+    setActiveSection(activeSection === section ? null : section);
+  };
+
+  return (
+    <VStack
+      w="294px"
+      bg="#F6F6F6"
+      color="black"
+      h="100vh"
+      //   overflowY="scroll"
+      p={4}
+      position="fixed"
+    >
+      <Image src={logo} height="20px" width="auto" mb={8} />
+      <VStack justifyContent="flex-start" align="stretch" spacing={4}>
+        {sidebarItems.map((item) => (
+          <Box key={item.value}>
+            <Flex
+              boxShadow=" 0px 4px 20px 0px #00000014"
+              align="center"
+              justify="space-between"
+              p={3}
+              bg={activeSection === item.value ? "#02A0A0" : "transparent"}
+              borderRadius="md"
+              cursor="pointer"
+              onClick={() => toggleSection(item.value)}
+              w="254px"
+            >
+              <Link
+                as={RouterLink}
+                to={item.route}
+                color={activeSection === item.value ? "#FFFFFF" : "#000000"}
+              >
+                <Flex
+                  justifyContent="space-between"
+                  width="100%"
+                  align="center"
+                  gap={3}
+                >
+                  {/* <MdDashboard
+                    color={activeSection === item.value ? "#FFFFFF" : "#000000"}
+                    size="20px"
+                  /> */}
+
+                  {item.icon}
+                  <Text width="100%" fontSize="sm" fontWeight="medium">
+                    {item.title}
+                  </Text>
+                </Flex>
+              </Link>
+              {item.links && (
+                <Box ml="auto">
+                  {activeSection === item.value ? (
+                    <FaChevronUp color="#FFFFFF" />
+                  ) : (
+                    <FaChevronDown color="#000000" />
+                  )}
+                </Box>
+              )}
+            </Flex>
+            {/* Sub-links */}
+            {item.links && activeSection === item.value && (
+              <VStack align="start" pl={8} spacing={2} mt={2}>
+                {item.links.map((link) => (
+                  <Link
+                    as={RouterLink}
+                    to={link.path}
+                    key={link.path}
+                    color="gray.600"
+                    _hover={{ color: "black" }}
+                  >
+                    {link.label}
+                  </Link>
+                ))}
+              </VStack>
+            )}
+          </Box>
+        ))}
+      </VStack>
+    </VStack>
+  );
+};
+
+const sidebarItems = [
+  {
+    value: "dashboard",
+    title: "Dashboard",
+    route: "/",
+    icon: <MdDashboard />,
+  },
+  {
+    value: "manageuser",
+    title: "Manage User",
+    links: [
+      { label: "Register Users", path: "/manage-users/register-users" },
+      { label: "Deactivated Accounts", path: "/manage-users/deactivated-accs" },
+    ],
+    icon: <IoDocumentTextOutline />,
+  },
+  {
+    value: "managePost",
+    title: "Manage Post",
+    icon: <FiEdit />,
+  },
+  {
+    value: "manageSubAdmin",
+    title: "Manage Sub-Admin",
+    icon: <FaRegUser />,
+  },
+  {
+    value: "manageJobs",
+    title: "Manage Jobs",
+    icon: <IoBag />,
+  },
+  {
+    value: "manageGroups",
+    title: "Manage Groups",
+    icon: <MdGroups color="gray" />,
+  },
+  {
+    value: "manageContactUs",
+    title: "Manage Contact Us",
+    icon: <BiSupport />,
+  },
+  {
+    value: "manageCms",
+    title: "Manage CMS",
+    links: [
+      { label: "Profile", path: "/settings/profile" },
+      { label: "Preferences", path: "/settings/preferences" },
+    ],
+    icon: <IoDocumentTextOutline />,
+  },
+  {
+    value: "myprofle",
+    title: "My Profile",
+    links: [
+      { label: "Settings", path: "/master/settings" },
+      { label: "Modules", path: "/master/modules" },
+    ],
+    icon: <FaRegUser />,
+  },
+  {
+    value: "masterModule",
+    title: "Master Module",
+    links: [
+      { label: "Settings", path: "/master/settings" },
+      { label: "Modules", path: "/master/modules" },
+    ],
+    icon: <GiDatabase />,
+  },
+];
+
+export default Sidebar;