[ update ]

src/Pages/Dashboard/AgencyName.tsx

@@ -0,0 +1,103 @@
+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

@@ -19,17 +19,55 @@ import {
   SelectValueText,
 } from "../../components/ui/select";
 import SemiDoughnutChart from "../../components/Charts/SemiDoughnutChart";
+import { Button } from "../../components/ui/button";
+import {
+  AccordionItem,
+  AccordionItemContent,
+  AccordionItemTrigger,
+  AccordionRoot,
+} from "../../components/ui/accordion";
+import AgencyName from "./AgencyName";
+import CircularProgress from "../../components/Charts/CircularProgress";
+import CircularApp from "../../components/Charts/CircularProgress";
 
 const Dashboard = () => {
   const frameworks = createListCollection({
     items: [
-      { label: "React.js", value: "react" },
-      { label: "Vue.js", value: "vue" },
-      { label: "Angular", value: "angular" },
-      { label: "Svelte", value: "svelte" },
+      { label: "Today", value: "Today" },
+      { label: "Week", value: "Week" },
+      { label: "Month", value: "Month" },
+      { label: "Year", value: "Year" },
     ],
   });
 
+  const accItems = [
+    {
+      value: "1",
+      title: "How to create new account?",
+      text: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since. Lorem Ipsum has been the industry's standard dummy text ever since.",
+    },
+    {
+      value: "2",
+      title: "How to create new account?",
+      text: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since. Lorem Ipsum has been the industry's standard dummy text ever since.",
+    },
+    {
+      value: "3",
+      title: "How to create new account?",
+      text: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since. Lorem Ipsum has been the industry's standard dummy text ever since.",
+    },
+    {
+      value: "4",
+      title: "How to create new account?",
+      text: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since. Lorem Ipsum has been the industry's standard dummy text ever since.",
+    },
+    {
+      value: "5",
+      title: "How to create new account?",
+      text: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since. Lorem Ipsum has been the industry's standard dummy text ever since.",
+    },
+  ];
+
   return (
     <MainFrame>
       <Box display={"flex"} p={"20px"} gap={5}>
@@ -47,16 +85,28 @@ const Dashboard = () => {
             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.Trigger fontSize={"xs"} value="tab-1">
+                Past 24 hrs
+              </Tabs.Trigger>
+              <Tabs.Trigger fontSize={"xs"} value="tab-2">
+                Total Users
+              </Tabs.Trigger>
+              <Tabs.Trigger fontSize={"xs"} value="tab-3">
+                New Signups
+              </Tabs.Trigger>
             </Tabs.List>
           </Tabs.Root>
           <Box>
             <SemiDoughnutChart />
           </Box>
 
-          <Box w={'80%'} m={'auto'} display={'flex'} justifyContent={'space-between'} mt={8}>
+          <Box
+            w={"80%"}
+            m={"auto"}
+            display={"flex"}
+            justifyContent={"space-between"}
+            mt={8}
+          >
             <Status.Root colorPalette="blue">
               <Status.Indicator />
               Recruiter <Text fontWeight={500}>2554</Text>
@@ -92,11 +142,50 @@ const Dashboard = () => {
         <Box
           w={"20%"}
           boxShadow={"rgba(99, 99, 99, 0.2) 0px 2px 8px 0px"}
-        ></Box>
+          p={'10px'}
+        >
+          <Text fontSize={"sm"} fontWeight={500} pt={3}>Number Of Groups created</Text>
+          <CircularApp />
+        </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 w={"50%"} bg={"#f2f2f2"} h={400} p={"10px"} overflow={'scroll'}>
+          <HStack justifyContent={"space-between"} mb={5}>
+            <Text fontSize={"xs"} fontWeight={500}>Faqs</Text>
+            <Button
+              bg={"#fff"}
+              color={"#222222CC"}
+              px={3}
+              fontSize={"12px"}
+              h={"28px"}
+            >
+              View ALL
+            </Button>
+          </HStack>
+          <AccordionRoot collapsible defaultValue={["b"]}>
+            {accItems.map((item, index) => (
+              <AccordionItem
+                key={index}
+                value={item.value}
+                bg={"#fff"}
+                mb={2}
+                p={"12px"}
+                rounded={5}
+                borderBottom={0}
+              >
+                <AccordionItemTrigger fontSize={"sm"} >
+                  {item.title}
+                </AccordionItemTrigger>
+                <AccordionItemContent fontSize={"xs"} color={'#222222CC'} pt={2}>
+                  {item.text}
+                </AccordionItemContent>
+              </AccordionItem>
+            ))}
+          </AccordionRoot>
+        </Box>
+        <Box w={"50%"} bg={"#f2f2f2"} h={400} overflow={'scroll'}>
+          <AgencyName />
+        </Box>
       </Box>
     </MainFrame>
   );

src/components/Charts/CircularProgress.tsx

@@ -0,0 +1,51 @@
+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;