Added some design for the dashboard

src/components/ColoredCube/ColoredCube.tsx

@@ -0,0 +1,20 @@
+import { PropaneSharp } from "@mui/icons-material";
+import React from "react";
+
+export interface props {
+  color: string;
+  size: number;
+}
+export default function ColoredCube(props: props) {
+  return (
+    <div style={{ paddingRight: 8 }}>
+      <div
+        style={{
+          backgroundColor: props.color,
+          width: props.size,
+          height: props.size,
+        }}
+      />
+    </div>
+  );
+}

src/components/DashboardContainer/DashboardContainer.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+
+export interface props {
+  children: React.ReactNode;
+  width: string;
+  height: string;
+}
+
+export default function DashboardContainer(props: props) {
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        alignSelf: "flex-start",
+        justifyContent: "left",
+        backgroundColor: "#1d3b33",
+        borderRadius: 16,
+        padding: 8,
+        paddingLeft: 48,
+        width: props.width,
+        height: props.height,
+        lineHeight: 0.4,
+      }}
+    >
+      {props.children}
+    </div>
+  );
+}

src/components/Icons/StatsIcon/StatsIcon.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+
+export interface props {
+  size: number;
+  color: string;
+}
+export default function StatsIcon(props: props) {
+  return (
+    <div>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        className="icon icon-tabler icon-tabler-align-box-bottom-center"
+        width={props.size}
+        height={props.size}
+        viewBox="0 0 24 24"
+        stroke-width="1"
+        stroke={props.color}
+        fill="none"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+        <path d="M4 4m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z"></path>
+        <path d="M9 15v2"></path>
+        <path d="M12 11v6"></path>
+        <path d="M15 13v4"></path>
+      </svg>
+    </div>
+  );
+}

src/components/Icons/TotalProductsIcon/TotalProductsIcon.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+
+export interface props {
+  size: number;
+  color: string;
+}
+export default function TotalProductsIcon(props: props) {
+  return (
+    <div>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        className="icon icon-tabler icon-tabler-packages"
+        width={props.size}
+        height={props.size}
+        viewBox="0 0 24 24"
+        stroke-width="1"
+        stroke={props.color}
+        fill="none"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+        <path d="M7 16.5l-5 -3l5 -3l5 3v5.5l-5 3z"></path>
+        <path d="M2 13.5v5.5l5 3"></path>
+        <path d="M7 16.545l5 -3.03"></path>
+        <path d="M17 16.5l-5 -3l5 -3l5 3v5.5l-5 3z"></path>
+        <path d="M12 19l5 3"></path>
+        <path d="M17 16.5l5 -3"></path>
+        <path d="M12 13.5v-5.5l-5 -3l5 -3l5 3v5.5"></path>
+        <path d="M7 5.03v5.455"></path>
+        <path d="M12 8l5 -3"></path>
+      </svg>
+    </div>
+  );
+}