conect the dashboard with API

src/pages/Dashboard/components/BarGraph/index.tsx

@@ -0,0 +1,38 @@
+import { Center, HStack, Text, VStack } from '@chakra-ui/react';
+import { Chart as ChartJS, CategoryScale, LinearScale, BarElement } from 'chart.js';
+import { Bar, Doughnut } from 'react-chartjs-2';
+
+ChartJS.register(CategoryScale, LinearScale, BarElement);
+
+type Props = {
+  values: number[];
+  labels?: string[];
+};
+
+export const BarGraph: React.FC<Props> = ({ values, labels }) => {
+  return (
+    <VStack
+      justifyContent="center"
+      flex={2}
+      minH={300}
+      alignItems="center"
+      p="16px"
+      bg="#F2F4F7"
+      borderRadius="16px"
+      gap="0px"
+    >
+      <Bar
+        options={{ responsive: true }}
+        data={{
+          labels,
+          datasets: [
+            {
+              data: values,
+              backgroundColor: ['#C2E0FF', '#47A3FF', '#70B8FF', '#99CCFF', '#4B83D2'],
+            },
+          ],
+        }}
+      />
+    </VStack>
+  );
+};

src/pages/Dashboard/components/CardValue/index.tsx

@@ -0,0 +1,19 @@
+import { Text, VStack } from '@chakra-ui/react';
+
+type Props = {
+  value: number | string;
+  label: string;
+};
+
+export const CardValue: React.FC<Props> = ({ label, value }) => {
+  return (
+    <VStack flex={1} alignItems="center" p="16px" bg="#F2F4F7" borderRadius="16px" gap="0px">
+      <Text mb="4px" fontSize="40px" fontWeight={600}>
+        {value}
+      </Text>
+      <Text mt={0} textAlign="center" color="#111417" fontSize="14px">
+        {label}
+      </Text>
+    </VStack>
+  );
+};

src/pages/Dashboard/components/DoughnutGraph/index.tsx

@@ -0,0 +1,60 @@
+import { Center, Text, VStack } from '@chakra-ui/react';
+import { Chart as ChartJS, ChartData, ArcElement, Tooltip } from 'chart.js';
+import { Doughnut } from 'react-chartjs-2';
+
+ChartJS.register(ArcElement, Tooltip);
+
+type Props = {
+  title?: string;
+  subTitle?: string;
+  label?: string;
+  values: number[];
+  labels?: string[];
+};
+
+export const DoughnutGraph: React.FC<Props> = ({ values, label, subTitle, title, labels }) => {
+  const teachersThatCompletedTheSecondCoachSession: ChartData<'doughnut', number[], string> = {
+    labels,
+    datasets: [
+      {
+        data: values,
+        backgroundColor: ['#3373CC', '#66CCCC', '#297A7A', '#264673', '#D1F0F0', '#C2E0FF'],
+        borderWidth: 0,
+      },
+    ],
+  };
+
+  return (
+    <VStack flex={1} justifyContent="center" alignItems="stretch" p="16px" bg="#F2F4F7" borderRadius="16px">
+      <Center position="relative">
+        <Doughnut
+          data={teachersThatCompletedTheSecondCoachSession}
+          options={{ radius: 100, cutout: '80%' }}
+          height="200px"
+          width="200px"
+        />
+        {title && (
+          <VStack
+            top="35px"
+            position="absolute"
+            borderRadius="50%"
+            w="100%"
+            h="calc(100% - 80px)"
+            justifyContent="center"
+            gap={0}
+          >
+            <Text fontSize="42px" fontWeight={600} color="#111417">
+              {title}
+            </Text>
+            <Text fontSize={16} color="#576375">
+              {subTitle}
+            </Text>
+          </VStack>
+        )}
+      </Center>
+      <Text mt="16px" textAlign="center" color="#111417">
+        {label}
+      </Text>
+    </VStack>
+  );
+};

src/pages/Dashboard/components/SpeedometerGraph/index.tsx

@@ -0,0 +1,55 @@
+import { Center, Text, VStack } from '@chakra-ui/react';
+import { ChartData } from 'chart.js';
+import { Doughnut } from 'react-chartjs-2';
+
+type Props = {
+  label: string;
+  value: number;
+  maxValue: number;
+};
+
+export const SpeedometerGraph: React.FC<Props> = ({ maxValue, value, label }) => {
+  const coachingSessionPerTeacher: ChartData<'doughnut', number[], string> = {
+    datasets: [
+      {
+        data: [4.3, 0.7],
+        backgroundColor: ['#3373CC', '#C7CBD1'],
+        borderWidth: 0,
+        circumference: 270,
+        rotation: 225,
+      },
+    ],
+  };
+
+  return (
+    <VStack flex={1} justifyContent="center" alignItems="stretch" p="16px" bg="#F2F4F7" borderRadius="16px">
+      <Center position="relative">
+        <Doughnut
+          data={coachingSessionPerTeacher}
+          options={{ radius: 100, cutout: '80%' }}
+          height="200px"
+          width="200px"
+        />
+        <VStack
+          top="55px"
+          position="absolute"
+          borderRadius="50%"
+          w="100%"
+          h="calc(100% - 90px)"
+          justifyContent="center"
+          gap={0}
+        >
+          <Text fontSize="42px" fontWeight={600} color="#111417">
+            {value}
+          </Text>
+          <Text fontSize={16} color="#576375">
+            Goal: {maxValue}
+          </Text>
+        </VStack>
+      </Center>
+      <Text mt="16px" textAlign="center" color="#111417">
+        {label}
+      </Text>
+    </VStack>
+  );
+};