feat(client): added temporary dashboard

client/src/features/pages/dashboard/MainDashboard.tsx

@@ -0,0 +1,230 @@
+import { useState } from "react";
+import {
+  MdAddTask,
+  MdAttachMoney,
+  MdBarChart,
+  MdFileCopy,
+  MdRefresh,
+} from "react-icons/md";
+import {
+  Avatar,
+  Box,
+  Button,
+  Flex,
+  FormLabel,
+  Heading,
+  Icon,
+  Select,
+  SimpleGrid,
+  Text,
+  useColorModeValue,
+} from "@chakra-ui/react";
+
+import { MiniStatistics } from "~shared/components/card";
+import { IconBox } from "~shared/components/icons/IconBox";
+
+import Chn from "~assets/img/dashboards/chn.png";
+import Eur from "~assets/img/dashboards/eur.png";
+import Usa from "~assets/img/dashboards/usa.png";
+
+import { useAuth } from "~features/auth";
+
+export default function MainDashboard() {
+  const { user } = useAuth();
+  const brandColor = useColorModeValue("cyan.400", "white");
+  const boxBg = useColorModeValue("secondaryGray.300", "white");
+  const [selectedCurrency, setSelectedCurrency] = useState("usd");
+  const [avatarSrc, setAvatarSrc] = useState(Usa);
+
+  const handleCurrencyChange = (event: any) => {
+    const newCurrency = event.target.value;
+    setSelectedCurrency(newCurrency);
+
+    switch (newCurrency) {
+      case "usd":
+        setAvatarSrc(Usa);
+        break;
+      case "eur":
+        setAvatarSrc(Eur);
+        break;
+      case "chn":
+        setAvatarSrc(Chn);
+        break;
+      default:
+        setAvatarSrc(Usa);
+    }
+  };
+
+  return (
+    <Box>
+      <Box mb="20">
+        <Heading h="1">Main Dashboard</Heading>
+      </Box>
+      <Flex justifyContent="space-between" alignItems="center">
+        <Box>
+          <Flex alignItems="center">
+            <Box>
+              <Text
+                display="inline"
+                flexShrink="0"
+                fontWeight="bold"
+                fontSize="lg"
+              >
+                Welcome back,{" "}
+                <Text fontWeight="bold" as="span" color="cyan.400">
+                  {user?.username || "HelloTech69"}
+                </Text>
+              </Text>
+            </Box>
+          </Flex>
+        </Box>
+        <Box>
+          <Button
+            leftIcon={<Icon as={MdRefresh} />}
+            variant="outline"
+            colorScheme="gray"
+            size="md"
+            mr="10px"
+          >
+            Refresh
+          </Button>
+          <Button
+            leftIcon={<Icon as={MdAddTask} />}
+            colorScheme="grey"
+            size="md"
+          >
+            Add Task
+          </Button>
+        </Box>
+      </Flex>
+      <Box pt={{ base: "130px", md: "80px", xl: "40px" }}>
+        <SimpleGrid
+          columns={{ base: 1, md: 2, lg: 3, "2xl": 6 }}
+          gap="20px"
+          mb="20px"
+        >
+          <MiniStatistics
+            startContent={
+              <IconBox
+                w="56px"
+                h="56px"
+                bg={boxBg}
+                icon={
+                  <Icon w="32px" h="32px" as={MdBarChart} color={brandColor} />
+                }
+              />
+            }
+            name="Earnings"
+            value="$350.4"
+          />
+          <MiniStatistics
+            startContent={
+              <IconBox
+                w="56px"
+                h="56px"
+                bg={boxBg}
+                icon={
+                  <Icon
+                    w="32px"
+                    h="32px"
+                    as={MdAttachMoney}
+                    color={brandColor}
+                  />
+                }
+              />
+            }
+            name="Spend this month"
+            value="$642.39"
+          />
+          <MiniStatistics growth="+23%" name="Sales" value="$574.34" />
+          <MiniStatistics
+            endContent={
+              <Flex me="-16px" mt="10px">
+                <FormLabel htmlFor="balance">
+                  <Avatar src={avatarSrc} />
+                </FormLabel>
+                <Box position="relative" width="30px">
+                  <Select
+                    id="balance"
+                    variant="mini"
+                    mt="5px"
+                    me="0px"
+                    onChange={handleCurrencyChange}
+                    value={selectedCurrency}
+                    opacity={0}
+                    position="absolute"
+                    width="full"
+                  >
+                    <option value="usd">USD</option>
+                    <option value="eur">EUR</option>
+                    <option value="chn">CHN</option>
+                  </Select>
+                  <Box
+                    position="absolute"
+                    right="0"
+                    top="5px"
+                    pointerEvents="none"
+                  >
+                    <Box as="span" opacity={0}>
+                      {selectedCurrency}
+                    </Box>
+                  </Box>
+                </Box>
+              </Flex>
+            }
+            name="Your balance"
+            value="$1,000"
+          />
+          <MiniStatistics
+            startContent={
+              <IconBox
+                w="56px"
+                h="56px"
+                bg="linear-gradient(90deg, #4481EB 0%, #04BEFE 100%)"
+                icon={<Icon w="28px" h="28px" as={MdAddTask} color="white" />}
+              />
+            }
+            name="New Tasks"
+            value="154"
+          />
+          <MiniStatistics
+            startContent={
+              <IconBox
+                w="56px"
+                h="56px"
+                bg={boxBg}
+                icon={
+                  <Icon w="32px" h="32px" as={MdFileCopy} color={brandColor} />
+                }
+              />
+            }
+            name="Total Projects"
+            value="2935"
+          />
+        </SimpleGrid>
+
+        {/* <SimpleGrid columns={{ base: 1, md: 2, xl: 2 }} gap='20px' mb='20px'>
+            <TotalSpent />
+            <WeeklyRevenue />
+          </SimpleGrid>
+          <SimpleGrid columns={{ base: 1, md: 1, xl: 2 }} gap='20px' mb='20px'>
+            <CheckTable columnsData={columnsDataCheck} tableData={tableDataCheck} />
+            <SimpleGrid columns={{ base: 1, md: 2, xl: 2 }} gap='20px'>
+              <DailyTraffic />
+              <PieCard />
+            </SimpleGrid>
+          </SimpleGrid>
+          <SimpleGrid columns={{ base: 1, md: 1, xl: 2 }} gap='20px' mb='20px'>
+            <ComplexTable
+              columnsData={columnsDataComplex}
+              tableData={tableDataComplex}
+            />
+            <SimpleGrid columns={{ base: 1, md: 2, xl: 2 }} gap='20px'>
+              <Tasks />
+              <MiniCalendar h='100%' minW='100%' selectRange={false} />
+            </SimpleGrid>
+          </SimpleGrid> */}
+      </Box>
+    </Box>
+  );
+}

client/src/shared/components/card/Card.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { Box, BoxProps, useColorModeValue as mode } from "@chakra-ui/react";
+
+interface CardProps extends BoxProps {
+  children: React.ReactNode;
+}
+
+export const Card: React.FC<CardProps> = ({ children, ...rest }) => {
+  return (
+    <Box
+      p="20px"
+      display="flex"
+      flexDirection="column"
+      width="100%"
+      position="relative"
+      borderRadius="20px"
+      minWidth="0px"
+      wordWrap="break-word"
+      bg={mode("#ffffff", "navy.800")}
+      backgroundClip="border-box"
+      {...rest}
+    >
+      {children}
+    </Box>
+  );
+};

client/src/shared/components/card/FeatureCard.tsx

@@ -0,0 +1,64 @@
+import { ReactElement } from "react";
+import {
+  Box,
+  Button,
+  Flex,
+  Heading,
+  Stack,
+  Text,
+  useColorModeValue as mode,
+} from "@chakra-ui/react";
+
+interface CardProps {
+  heading: string;
+  description: string;
+  icon: ReactElement;
+  href: string;
+}
+
+export const FeatureCard = ({
+  heading,
+  description,
+  icon,
+  href,
+}: CardProps) => {
+  return (
+    <Box
+      maxW={{ base: "full", md: "275px" }}
+      w={"full"}
+      borderWidth="1px"
+      borderRadius="lg"
+      overflow="hidden"
+      p={5}
+    >
+      <Stack align={"start"} spacing={2}>
+        <Flex
+          w={16}
+          h={16}
+          align={"center"}
+          justify={"center"}
+          color={"white"}
+          rounded={"full"}
+          bg={mode("gray.100", "gray.700")}
+        >
+          {icon}
+        </Flex>
+        <Box mt={2}>
+          <Heading size="md">{heading}</Heading>
+          <Text mt={1} fontSize={"sm"}>
+            {description}
+          </Text>
+        </Box>
+        <Button
+          variant={"link"}
+          colorScheme={"blue"}
+          size={"sm"}
+          as="a"
+          href={href}
+        >
+          Learn more
+        </Button>
+      </Stack>
+    </Box>
+  );
+};

client/src/shared/components/card/MiniStatistics.tsx

@@ -0,0 +1,71 @@
+import React from "react";
+import {
+  Flex,
+  Stat,
+  StatLabel,
+  StatNumber,
+  Text,
+  useColorModeValue as mode,
+} from "@chakra-ui/react";
+
+import { Card } from "./Card";
+
+interface MiniStatisticsProps {
+  startContent?: React.ReactNode;
+  endContent?: React.ReactNode;
+  name: string;
+  growth?: string;
+  value: string;
+}
+
+export const MiniStatistics: React.FC<MiniStatisticsProps> = (props) => {
+  const { startContent, endContent, name, growth, value } = props;
+  const textColor = mode("secondaryGray.900", "white");
+  const textColorSecondary = "secondaryGray.600";
+
+  return (
+    <Card py="15px">
+      <Flex
+        my="auto"
+        h="100%"
+        align={{ base: "center", xl: "start" }}
+        justify={{ base: "center", xl: "center" }}
+      >
+        {startContent}
+
+        <Stat my="auto" ms={startContent ? "18px" : "0px"}>
+          <StatLabel
+            lineHeight="100%"
+            color={textColorSecondary}
+            fontSize={{
+              base: "sm",
+            }}
+          >
+            {name}
+          </StatLabel>
+          <StatNumber
+            color={textColor}
+            fontSize={{
+              base: "2xl",
+            }}
+          >
+            {value}
+          </StatNumber>
+          {growth ? (
+            <Flex align="center">
+              <Text color="green.500" fontSize="xs" fontWeight="700" me="5px">
+                {growth}
+              </Text>
+              <Text color="secondaryGray.600" fontSize="xs" fontWeight="400">
+                since last month
+              </Text>
+            </Flex>
+          ) : null}
+        </Stat>
+        <Flex ms="auto" w="max-content">
+          {endContent}
+        </Flex>
+      </Flex>
+    </Card>
+  );
+};

client/src/shared/components/card/index.ts

@@ -0,0 +1,2 @@
+export * from "./Card";
+export * from "./MiniStatistics";