From 6c69cd438a2ef0befdb9c4ca68c65df715ef2c5c Mon Sep 17 00:00:00 2001
From: Keannu Bernasol <noehbernasol0@gmail.com>
Date: Fri, 17 Feb 2023 19:20:39 +0800
Subject: [PATCH] Added some design for the dashboard

---
 src/components/ColoredCube/ColoredCube.tsx    | 20 ++++++++++
 .../DashboardContainer/DashboardContainer.tsx | 29 ++++++++++++++
 src/components/Icons/StatsIcon/StatsIcon.tsx  | 30 +++++++++++++++
 .../TotalProductsIcon/TotalProductsIcon.tsx   | 35 +++++++++++++++++
 src/routes/Dashboard/Dashboard.tsx            | 38 +++++++++++++++++--
 src/styles.tsx                                | 32 +++++++++++++++-
 6 files changed, 179 insertions(+), 5 deletions(-)
 create mode 100644 src/components/ColoredCube/ColoredCube.tsx
 create mode 100644 src/components/DashboardContainer/DashboardContainer.tsx
 create mode 100644 src/components/Icons/StatsIcon/StatsIcon.tsx
 create mode 100644 src/components/Icons/TotalProductsIcon/TotalProductsIcon.tsx

diff --git a/src/components/ColoredCube/ColoredCube.tsx b/src/components/ColoredCube/ColoredCube.tsx
new file mode 100644
index 0000000..4fe7715
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/src/components/DashboardContainer/DashboardContainer.tsx b/src/components/DashboardContainer/DashboardContainer.tsx
new file mode 100644
index 0000000..0dfe259
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/src/components/Icons/StatsIcon/StatsIcon.tsx b/src/components/Icons/StatsIcon/StatsIcon.tsx
new file mode 100644
index 0000000..a0b1e56
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/src/components/Icons/TotalProductsIcon/TotalProductsIcon.tsx b/src/components/Icons/TotalProductsIcon/TotalProductsIcon.tsx
new file mode 100644
index 0000000..3b2a802
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/src/routes/Dashboard/Dashboard.tsx b/src/routes/Dashboard/Dashboard.tsx
index 986e073..dd78185 100644
--- a/src/routes/Dashboard/Dashboard.tsx
+++ b/src/routes/Dashboard/Dashboard.tsx
@@ -1,14 +1,44 @@
 import React from "react";
-import AppLogo from "../../Components/Icons/AppLogo/AppLogo";
+import TotalProductsIcon from "../../Components/Icons/TotalProductsIcon/TotalProductsIcon";
+import DashboardContainer from "../../Components/DashboardContainer/DashboardContainer";
+import StatsIcon from "../../Components/Icons/StatsIcon/StatsIcon";
 import "../../index.css";
 import styles from "../../styles";
+import HomeIcon from "../../Components/Icons/HomeIcon/HomeIcon";
+import ColoredCube from "../../Components/ColoredCube/ColoredCube";
 
 export default function Dashboard() {
   return (
     <div style={styles.container}>
-      <AppLogo size={64} color="#6f9b78" />
-      <p style={styles.text}>Ivy - Inventory Manager</p>
-      <p style={styles.text}>Welcome to the Dashboard</p>
+      <div style={styles.wrapper_row}>
+        <HomeIcon size={64} color="white" />
+        <h1 style={styles.text_large}>Dashboard</h1>
+      </div>
+      <DashboardContainer width="70%" height="30%">
+        <div style={styles.wrapper_row}>
+          <TotalProductsIcon size={64} color="white" />
+          <h1 style={styles.text_dashboard_2}>Total Products</h1>
+        </div>
+        <h1 style={styles.text_dashboard_1}>2546 Unique Items</h1>
+        <h1 style={styles.text_dashboard_1}>In inventory</h1>
+      </DashboardContainer>
+      <div style={{ padding: 16 }} />
+      <DashboardContainer width="50%" height="40%">
+        <div style={styles.wrapper_row}>
+          <StatsIcon size={64} color="white" />
+          <h1 style={styles.text_dashboard_1}>Current Session</h1>
+        </div>
+        <div style={styles.wrapper_row}>
+          <ColoredCube size={32} color="#a48e41" />
+          <h1 style={styles.text_medium}>Added</h1>
+        </div>
+        <h1 style={styles.text_dashboard_1}>254</h1>
+        <div style={styles.wrapper_row}>
+          <ColoredCube size={32} color="#a44141" />
+          <h1 style={styles.text_medium}>Removed</h1>
+        </div>
+        <h1 style={styles.text_dashboard_1}>64</h1>
+      </DashboardContainer>
     </div>
   );
 }
diff --git a/src/styles.tsx b/src/styles.tsx
index 23c0bc0..c61cd05 100644
--- a/src/styles.tsx
+++ b/src/styles.tsx
@@ -13,13 +13,32 @@ const styles: { [key: string]: React.CSSProperties } = {
     flex: 1,
     height: "100%",
     alignItems: "center",
-    paddingTop: 32,
+    paddingTop: 0,
+    paddingLeft: 16,
   },
   text: {
     fontSize: 16,
     color: "white",
     fontWeight: "bold",
   },
+  text_medium: {
+    fontSize: 26,
+    color: "white",
+    fontWeight: "bold",
+  },
+  text_large: {
+    fontSize: 36,
+    color: "white",
+    fontWeight: "bold",
+  },
+  text_dashboard_1: {
+    fontSize: 46,
+    color: "white",
+  },
+  text_dashboard_2: {
+    fontSize: 56,
+    color: "white",
+  },
   logo_title: {
     color: "#6c9575",
     fontSize: 26,
@@ -90,6 +109,17 @@ const styles: { [key: string]: React.CSSProperties } = {
     backgroundColor: "#3d4848",
     alignItems: "flex-end",
   },
+  wrapper_row: {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+  },
+  wrapper_column: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    height: "50%",
+  },
 };
 
 export default styles;