From d54e6be430ecc0603dcb30fce1631118df64fa4a Mon Sep 17 00:00:00 2001
From: keannu125 <noehbernasol0@gmail.com>
Date: Fri, 24 Feb 2023 17:20:52 +0800
Subject: [PATCH 1/2] Removed lowercase directories

---
 src/components/ColoredCube/ColoredCube.tsx    |  20 ----
 src/components/Container/Container.tsx        |  20 ----
 src/components/Header/Header.tsx              |  18 ---
 src/components/Icons/AppLogo/AppLogo.tsx      |  31 ------
 src/components/Icons/HomeIcon/HomeIcon.tsx    |  29 -----
 .../Icons/InventoryIcon/InventoryIcon.tsx     |  31 ------
 .../Icons/LogoutIcon/LogoutIcon.tsx           |  28 -----
 src/components/Icons/LogsIcon/LogsIcon.tsx    |  32 ------
 .../Icons/LowStockIcon/LowStockIcon.tsx       |  30 -----
 .../Icons/NotFoundIcon/NotFoundIcon.tsx       |  31 ------
 .../Icons/ProductsIcon/ProductsIcon.tsx       |  31 ------
 .../RecentlyAddedIcon/RecentlyAddedIcon.tsx   |  30 -----
 src/components/Icons/StatsIcon/StatsIcon.tsx  |  30 -----
 .../TotalProductsIcon/TotalProductsIcon.tsx   |  35 ------
 src/components/Login/Login.tsx                |  43 --------
 src/components/Logout/Logout.tsx              |  38 -------
 src/components/Sidebar/Sidebar.tsx            | 102 -----------------
 .../SidebarButton/SidebarButton.tsx           |  27 -----
 src/routes/Dashboard/Dashboard.tsx            | 104 ------------------
 src/routes/Error/Error.tsx                    |  14 ---
 src/routes/Products/Products.tsx              |  13 ---
 21 files changed, 737 deletions(-)
 delete mode 100644 src/components/ColoredCube/ColoredCube.tsx
 delete mode 100644 src/components/Container/Container.tsx
 delete mode 100644 src/components/Header/Header.tsx
 delete mode 100644 src/components/Icons/AppLogo/AppLogo.tsx
 delete mode 100644 src/components/Icons/HomeIcon/HomeIcon.tsx
 delete mode 100644 src/components/Icons/InventoryIcon/InventoryIcon.tsx
 delete mode 100644 src/components/Icons/LogoutIcon/LogoutIcon.tsx
 delete mode 100644 src/components/Icons/LogsIcon/LogsIcon.tsx
 delete mode 100644 src/components/Icons/LowStockIcon/LowStockIcon.tsx
 delete mode 100644 src/components/Icons/NotFoundIcon/NotFoundIcon.tsx
 delete mode 100644 src/components/Icons/ProductsIcon/ProductsIcon.tsx
 delete mode 100644 src/components/Icons/RecentlyAddedIcon/RecentlyAddedIcon.tsx
 delete mode 100644 src/components/Icons/StatsIcon/StatsIcon.tsx
 delete mode 100644 src/components/Icons/TotalProductsIcon/TotalProductsIcon.tsx
 delete mode 100644 src/components/Login/Login.tsx
 delete mode 100644 src/components/Logout/Logout.tsx
 delete mode 100644 src/components/Sidebar/Sidebar.tsx
 delete mode 100644 src/components/SidebarButton/SidebarButton.tsx
 delete mode 100644 src/routes/Dashboard/Dashboard.tsx
 delete mode 100644 src/routes/Error/Error.tsx
 delete mode 100644 src/routes/Products/Products.tsx

diff --git a/src/components/ColoredCube/ColoredCube.tsx b/src/components/ColoredCube/ColoredCube.tsx
deleted file mode 100644
index 6e34a1f..0000000
--- a/src/components/ColoredCube/ColoredCube.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-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 + "vh",
-          height: props.size + "vh",
-        }}
-      />
-    </div>
-  );
-}
diff --git a/src/components/Container/Container.tsx b/src/components/Container/Container.tsx
deleted file mode 100644
index 89d6a63..0000000
--- a/src/components/Container/Container.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import React from "react";
-import Sidebar from "../Sidebar/Sidebar";
-import Header from "../Header/Header";
-import styles from "../../styles";
-
-export interface props {
-  children: React.ReactNode;
-}
-
-export default function Container(props: props) {
-  return (
-    <div>
-      <Header />
-      <div style={{ width: "15%", position: "fixed" }}>
-        <Sidebar />
-      </div>
-      <div style={styles.route_wrapper}>{props.children}</div>
-    </div>
-  );
-}
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
deleted file mode 100644
index 7c3e850..0000000
--- a/src/components/Header/Header.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import React from "react";
-import AppLogo from "../Icons/AppLogo/AppLogo";
-import Login from "../Login/Login";
-import styles from "../../styles";
-
-export default function Header() {
-  return (
-    <div style={styles.header_wrapper}>
-      <div style={styles.header_left}>
-        <AppLogo size={8} color="#80b38b" />
-        <p style={styles.logo_title}>Ivy</p>
-      </div>
-      <div style={styles.header_right}>
-        <Login />
-      </div>
-    </div>
-  );
-}
diff --git a/src/components/Icons/AppLogo/AppLogo.tsx b/src/components/Icons/AppLogo/AppLogo.tsx
deleted file mode 100644
index 4926766..0000000
--- a/src/components/Icons/AppLogo/AppLogo.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import React from "react";
-
-export interface props {
-  size: number;
-  color: string;
-}
-export default function AppLogo(props: props) {
-  return (
-    <div>
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        className="icon icon-tabler icon-tabler-plant-2"
-        width={props.size + "vh"}
-        height={props.size + "vh"}
-        viewBox="0 0 24 24"
-        stroke-width="2"
-        stroke={props.color}
-        fill="none"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-      >
-        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-        <path d="M2 9a10 10 0 1 0 20 0"></path>
-        <path d="M12 19a10 10 0 0 1 10 -10"></path>
-        <path d="M2 9a10 10 0 0 1 10 10"></path>
-        <path d="M12 4a9.7 9.7 0 0 1 2.99 7.5"></path>
-        <path d="M9.01 11.5a9.7 9.7 0 0 1 2.99 -7.5"></path>
-      </svg>
-    </div>
-  );
-}
diff --git a/src/components/Icons/HomeIcon/HomeIcon.tsx b/src/components/Icons/HomeIcon/HomeIcon.tsx
deleted file mode 100644
index 2f9bf42..0000000
--- a/src/components/Icons/HomeIcon/HomeIcon.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import React from "react";
-
-export interface props {
-  size: number;
-  color: string;
-}
-export default function HomeIcon(props: props) {
-  return (
-    <div>
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        className="icon icon-tabler icon-tabler-home-2"
-        width={props.size + "vh"}
-        height={props.size + "vh"}
-        viewBox="0 0 24 24"
-        stroke-width="2"
-        stroke={props.color}
-        fill="none"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-      >
-        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-        <path d="M5 12l-2 0l9 -9l9 9l-2 0"></path>
-        <path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7"></path>
-        <path d="M10 12h4v4h-4z"></path>
-      </svg>
-    </div>
-  );
-}
diff --git a/src/components/Icons/InventoryIcon/InventoryIcon.tsx b/src/components/Icons/InventoryIcon/InventoryIcon.tsx
deleted file mode 100644
index 669ca09..0000000
--- a/src/components/Icons/InventoryIcon/InventoryIcon.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import React from "react";
-
-export interface props {
-  size: number;
-  color: string;
-}
-export default function InventoryIcon(props: props) {
-  return (
-    <div>
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        className="icon icon-tabler icon-tabler-box-seam"
-        width={props.size + "vh"}
-        height={props.size + "vh"}
-        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="M12 3l8 4.5v9l-8 4.5l-8 -4.5v-9l8 -4.5"></path>
-        <path d="M12 12l8 -4.5"></path>
-        <path d="M8.2 9.8l7.6 -4.6"></path>
-        <path d="M12 12v9"></path>
-        <path d="M12 12l-8 -4.5"></path>
-      </svg>
-    </div>
-  );
-}
diff --git a/src/components/Icons/LogoutIcon/LogoutIcon.tsx b/src/components/Icons/LogoutIcon/LogoutIcon.tsx
deleted file mode 100644
index e986e10..0000000
--- a/src/components/Icons/LogoutIcon/LogoutIcon.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import React from "react";
-
-export interface props {
-  size: number;
-  color: string;
-}
-export default function LogoutIcon(props: props) {
-  return (
-    <div>
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        className="icon icon-tabler icon-tabler-logout"
-        width={props.size + "vh"}
-        height={props.size + "vh"}
-        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="M14 8v-2a2 2 0 0 0 -2 -2h-7a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h7a2 2 0 0 0 2 -2v-2"></path>
-        <path d="M7 12h14l-3 -3m0 6l3 -3"></path>
-      </svg>
-    </div>
-  );
-}
diff --git a/src/components/Icons/LogsIcon/LogsIcon.tsx b/src/components/Icons/LogsIcon/LogsIcon.tsx
deleted file mode 100644
index d125858..0000000
--- a/src/components/Icons/LogsIcon/LogsIcon.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import React from "react";
-
-export interface props {
-  size: number;
-  color: string;
-}
-export default function LogsIcon(props: props) {
-  return (
-    <div>
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        className="icon icon-tabler icon-tabler-clipboard-data"
-        width={props.size + "vh"}
-        height={props.size + "vh"}
-        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="M9 5h-2a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-12a2 2 0 0 0 -2 -2h-2"></path>
-        <path d="M9 3m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z"></path>
-        <path d="M9 17v-4"></path>
-        <path d="M12 17v-1"></path>
-        <path d="M15 17v-2"></path>
-        <path d="M12 17v-1"></path>
-      </svg>
-    </div>
-  );
-}
diff --git a/src/components/Icons/LowStockIcon/LowStockIcon.tsx b/src/components/Icons/LowStockIcon/LowStockIcon.tsx
deleted file mode 100644
index f60ff6f..0000000
--- a/src/components/Icons/LowStockIcon/LowStockIcon.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import React from "react";
-
-export interface props {
-  size: number;
-  color: string;
-}
-export default function LowStockIcon(props: props) {
-  return (
-    <div>
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        className="icon icon-tabler icon-tabler-zoom-exclamation"
-        width={props.size + "vh"}
-        height={props.size + "vh"}
-        viewBox="0 0 24 24"
-        stroke-width="2"
-        stroke={props.color}
-        fill="none"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-      >
-        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-        <path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path>
-        <path d="M21 21l-6 -6"></path>
-        <path d="M10 13v.01"></path>
-        <path d="M10 7v3"></path>
-      </svg>
-    </div>
-  );
-}
diff --git a/src/components/Icons/NotFoundIcon/NotFoundIcon.tsx b/src/components/Icons/NotFoundIcon/NotFoundIcon.tsx
deleted file mode 100644
index 6a395b6..0000000
--- a/src/components/Icons/NotFoundIcon/NotFoundIcon.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import React from "react";
-
-export interface props {
-  size: number;
-  color: string;
-}
-export default function NotFoundIcon(props: props) {
-  return (
-    <div>
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        className="icon icon-tabler icon-tabler-error-404"
-        width={props.size + "vh"}
-        height={props.size + "vh"}
-        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="M3 7v4a1 1 0 0 0 1 1h3"></path>
-        <path d="M7 7v10"></path>
-        <path d="M10 8v8a1 1 0 0 0 1 1h2a1 1 0 0 0 1 -1v-8a1 1 0 0 0 -1 -1h-2a1 1 0 0 0 -1 1z"></path>
-        <path d="M17 7v4a1 1 0 0 0 1 1h3"></path>
-        <path d="M21 7v10"></path>
-      </svg>
-    </div>
-  );
-}
diff --git a/src/components/Icons/ProductsIcon/ProductsIcon.tsx b/src/components/Icons/ProductsIcon/ProductsIcon.tsx
deleted file mode 100644
index 74d8832..0000000
--- a/src/components/Icons/ProductsIcon/ProductsIcon.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import React from "react";
-
-export interface props {
-  size: number;
-  color: string;
-}
-export default function ProductsIcon(props: props) {
-  return (
-    <div>
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        className="icon icon-tabler icon-tabler-list-numbers"
-        width={props.size + "vh"}
-        height={props.size + "vh"}
-        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="M11 6h9"></path>
-        <path d="M11 12h9"></path>
-        <path d="M12 18h8"></path>
-        <path d="M4 16a2 2 0 1 1 4 0c0 .591 -.5 1 -1 1.5l-3 2.5h4"></path>
-        <path d="M6 10v-6l-2 2"></path>
-      </svg>
-    </div>
-  );
-}
diff --git a/src/components/Icons/RecentlyAddedIcon/RecentlyAddedIcon.tsx b/src/components/Icons/RecentlyAddedIcon/RecentlyAddedIcon.tsx
deleted file mode 100644
index a5f4493..0000000
--- a/src/components/Icons/RecentlyAddedIcon/RecentlyAddedIcon.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import React from "react";
-
-export interface props {
-  size: number;
-  color: string;
-}
-export default function RecentlyAddedIcon(props: props) {
-  return (
-    <div>
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        className="icon icon-tabler icon-tabler-book-upload"
-        width={props.size + "vh"}
-        height={props.size + "vh"}
-        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="M14 20h-8a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h12v5"></path>
-        <path d="M11 16h-5a2 2 0 0 0 -2 2"></path>
-        <path d="M15 16l3 -3l3 3"></path>
-        <path d="M18 13v9"></path>
-      </svg>
-    </div>
-  );
-}
diff --git a/src/components/Icons/StatsIcon/StatsIcon.tsx b/src/components/Icons/StatsIcon/StatsIcon.tsx
deleted file mode 100644
index 02f600d..0000000
--- a/src/components/Icons/StatsIcon/StatsIcon.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-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 + "vh"}
-        height={props.size + "vh"}
-        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
deleted file mode 100644
index f799772..0000000
--- a/src/components/Icons/TotalProductsIcon/TotalProductsIcon.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-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 + "vh"}
-        height={props.size + "vh"}
-        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/components/Login/Login.tsx b/src/components/Login/Login.tsx
deleted file mode 100644
index 213121e..0000000
--- a/src/components/Login/Login.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import React, { useState } from "react";
-import { useSelector, useDispatch } from "react-redux";
-import { toggle } from "../../Features/Login/LoginSlice";
-import { Button } from "@mui/material";
-import styles from "../../styles";
-
-export interface state {
-  logged_in: {
-    value: boolean;
-  };
-}
-export default function Login() {
-  const logged_in = useSelector((state: state) => state.logged_in.value);
-  const [status, setStatus] = useState("Not logged in");
-  const dispatch = useDispatch();
-
-  async function login() {
-    await dispatch(toggle());
-    if (logged_in) {
-      setStatus("Logged in");
-    } else {
-      setStatus("Not logged in");
-    }
-    await console.log("test " + logged_in);
-  }
-
-  if (logged_in) {
-    return <p style={styles.text}>Welcome Jophiel</p>;
-  } else {
-    return (
-      <div>
-        <Button
-          onClick={login}
-          value="Login"
-          variant="contained"
-          style={styles.login_button}
-        >
-          <p style={styles.text}>Login</p>
-        </Button>
-      </div>
-    );
-  }
-}
diff --git a/src/components/Logout/Logout.tsx b/src/components/Logout/Logout.tsx
deleted file mode 100644
index 1fcfef1..0000000
--- a/src/components/Logout/Logout.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import React from "react";
-import { useSelector, useDispatch } from "react-redux";
-import { toggle } from "../../Features/Login/LoginSlice";
-import { Button } from "@mui/material";
-import styles from "../../styles";
-
-export interface state {
-  logged_in: {
-    value: boolean;
-  };
-}
-export interface props {
-  children: React.ReactNode;
-}
-
-export default function Logout(props: props) {
-  const logged_in = useSelector((state: state) => state.logged_in.value);
-  const dispatch = useDispatch();
-
-  async function login() {
-    await dispatch(toggle());
-    await console.log("test " + logged_in);
-  }
-
-  return (
-    <div style={{ paddingTop: "40vh" }}>
-      <Button
-        onClick={login}
-        value="Log out"
-        variant="contained"
-        style={styles.logout_button}
-      >
-        {props.children}
-        <p style={styles.text}>Log Out</p>
-      </Button>
-    </div>
-  );
-}
diff --git a/src/components/Sidebar/Sidebar.tsx b/src/components/Sidebar/Sidebar.tsx
deleted file mode 100644
index cfbc502..0000000
--- a/src/components/Sidebar/Sidebar.tsx
+++ /dev/null
@@ -1,102 +0,0 @@
-import React from "react";
-import styles from "../../styles";
-import { useNavigate } from "react-router-dom";
-import { useSelector } from "react-redux";
-import SidebarButton from "../SidebarButton/SidebarButton";
-import HomeIcon from "../Icons/HomeIcon/HomeIcon";
-import ProductsIcon from "../Icons/ProductsIcon/ProductsIcon";
-import Logout from "../Logout/Logout";
-import InventoryIcon from "../Icons/InventoryIcon/InventoryIcon";
-import LogsIcon from "../Icons/LogsIcon/LogsIcon";
-import LogoutIcon from "../Icons/LogoutIcon/LogoutIcon";
-
-export interface state {
-  logged_in: {
-    value: boolean;
-  };
-}
-export default function Sidebar() {
-  const navigate = useNavigate();
-  const logged_in = useSelector((state: state) => state.logged_in.value);
-  if (!logged_in) {
-    return (
-      <div style={styles.sidebar_container}>
-        <div
-          style={{
-            display: "flex",
-            flexDirection: "row",
-            justifyContent: "flex-end",
-          }}
-        >
-          <div
-            style={{
-              position: "relative",
-              display: "flex",
-              flexDirection: "column",
-              justifyContent: "flex-start",
-            }}
-          >
-            <SidebarButton onClick={() => navigate("/")} name="Dashboard">
-              <HomeIcon size={4} color="white" />
-            </SidebarButton>
-            <SidebarButton
-              onClick={() => navigate("/Products")}
-              name="Products"
-            >
-              <ProductsIcon size={4} color="white" />
-            </SidebarButton>
-            <SidebarButton
-              onClick={() => navigate("/Inventory")}
-              name="Inventory"
-            >
-              <InventoryIcon size={4} color="white" />
-            </SidebarButton>
-          </div>
-        </div>
-      </div>
-    );
-  } else {
-    return (
-      <div style={styles.sidebar_container}>
-        <div
-          style={{
-            display: "flex",
-            flexDirection: "row",
-            justifyContent: "flex-end",
-          }}
-        >
-          <div
-            style={{
-              position: "relative",
-              display: "flex",
-              flexDirection: "column",
-              justifyContent: "flex-start",
-            }}
-          >
-            <SidebarButton onClick={() => navigate("/")} name="Dashboard">
-              <HomeIcon size={4} color="white" />
-            </SidebarButton>
-            <SidebarButton
-              onClick={() => navigate("/Products")}
-              name="Products"
-            >
-              <ProductsIcon size={4} color="white" />
-            </SidebarButton>
-            <SidebarButton
-              onClick={() => navigate("/Inventory")}
-              name="Inventory"
-            >
-              <InventoryIcon size={4} color="white" />
-            </SidebarButton>
-            <SidebarButton onClick={() => navigate("/Logs")} name="Logs">
-              <LogsIcon size={4} color="white" />
-            </SidebarButton>
-            <Logout>
-              <LogoutIcon size={4} color="white" />
-            </Logout>
-          </div>
-        </div>
-      </div>
-    );
-  }
-}
diff --git a/src/components/SidebarButton/SidebarButton.tsx b/src/components/SidebarButton/SidebarButton.tsx
deleted file mode 100644
index f8534c6..0000000
--- a/src/components/SidebarButton/SidebarButton.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import React from "react";
-import { Button } from "@mui/material";
-import styles from "../../styles";
-
-export interface props {
-  name: string;
-  onClick: any;
-  children: React.ReactNode;
-}
-export default function SidebarButton(props: props) {
-  return (
-    <div
-      style={{
-        paddingBottom: 16,
-      }}
-    >
-      <Button
-        onClick={props.onClick}
-        variant="contained"
-        style={styles.sidebar_button}
-      >
-        {props.children}
-        <p style={styles.text}>{props.name}</p>
-      </Button>
-    </div>
-  );
-}
diff --git a/src/routes/Dashboard/Dashboard.tsx b/src/routes/Dashboard/Dashboard.tsx
deleted file mode 100644
index 55f11f1..0000000
--- a/src/routes/Dashboard/Dashboard.tsx
+++ /dev/null
@@ -1,104 +0,0 @@
-import React from "react";
-import TotalProductsIcon from "../../Components/Icons/TotalProductsIcon/TotalProductsIcon";
-import LowStockIcon from "../../Components/Icons/LowStockIcon/LowStockIcon";
-import StatsIcon from "../../Components/Icons/StatsIcon/StatsIcon";
-import LogsIcon from "../../Components/Icons/LogsIcon/LogsIcon";
-import "../../index.css";
-import styles from "../../styles";
-import HomeIcon from "../../Components/Icons/HomeIcon/HomeIcon";
-import ColoredCube from "../../Components/ColoredCube/ColoredCube";
-import RecentlyAddedIcon from "../../Components/Icons/RecentlyAddedIcon/RecentlyAddedIcon";
-
-export default function Dashboard() {
-  return (
-    <div style={{ margin: 32, height: "100%" }}>
-      <div style={styles.flex_row}>
-        <HomeIcon size={8} color="white" />
-        <h1 style={styles.text_large}>Dashboard</h1>
-      </div>
-      <div style={{ display: "flex", flexDirection: "row" }}>
-        <div style={{ flex: 7 }}>
-          <div style={styles.flex_column}>
-            <div style={{ ...styles.widget, ...{ flex: 5 } }}>
-              <div style={styles.content_row}>
-                <TotalProductsIcon size={8} color="white" />
-                <h1 style={styles.text_extra_large}>Total Products</h1>
-              </div>
-              <h1 style={styles.text_large}>2546 Unique Items</h1>
-              <h1 style={styles.text_large}>In inventory</h1>
-            </div>
-            <div style={styles.flex_row}>
-              <div style={{ ...styles.widget, ...{ flex: 6 } }}>
-                <div style={styles.content_row}>
-                  <StatsIcon size={8} color="white" />
-                  <h1 style={styles.text_large}>Current Session</h1>
-                </div>
-                <div style={styles.content_row}>
-                  <ColoredCube size={3} color="#a48e41" />
-                  <h1 style={styles.text_large}>Added</h1>
-                </div>
-                <h1 style={styles.text_large}>254</h1>
-                <div style={styles.content_row}>
-                  <ColoredCube size={3} color="#a44141" />
-                  <h1 style={styles.text_large}>Removed</h1>{" "}
-                </div>
-              </div>
-              <div style={{ ...styles.flex_column, ...{ flex: 4 } }}>
-                <div style={{ ...styles.widget, ...{ flex: 1 } }}>
-                  <div style={styles.content_row}>
-                    <LowStockIcon size={8} color="white" />
-                    <h1 style={styles.text_medium}>Low Stock</h1>
-                  </div>
-                  <h1 style={styles.text_medium}>Canned Pagmamahal</h1>
-                  <h1 style={styles.text_tiny}>In Stock: 3</h1>
-                </div>
-                <div style={{ ...styles.widget, ...{ flex: 1 } }}>
-                  <div style={styles.content_row}>
-                    <RecentlyAddedIcon size={8} color="white" />
-                    <h1 style={styles.text_medium}>Recently Added</h1>
-                  </div>
-                  <h1 style={styles.text_medium}>Zidane's Water</h1>
-                  <h1 style={styles.text_tiny}>Added 02/17/2023</h1>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div style={{ flex: 3 }}>
-          <div style={styles.widget}>
-            <div style={styles.content_row}>
-              <LogsIcon size={8} color="white" />
-              <div style={styles.wrapper_column}>
-                <h1 style={styles.text_medium}>Recent</h1>
-                <h1 style={styles.text_medium}>Transactions</h1>
-              </div>
-            </div>
-            <div style={{ marginBottom: "2vh" }} />
-            <h1 style={styles.text}>Kopiko Blanca</h1>
-            <h1 style={styles.text_small}>Added: 96</h1>
-            <h1 style={styles.text_small}>Removed: 105</h1>
-            <h1 style={styles.text_tiny}>02/17/2023</h1>
-            <div style={{ marginBottom: "2vh" }} />
-            <h1 style={styles.text}>Zidane's Water</h1>
-            <h1 style={styles.text_small}>Added: 49</h1>
-            <h1 style={styles.text_small}>Removed: 24</h1>
-            <h1 style={styles.text_tiny}>02/17/2023</h1>
-            <div style={{ marginBottom: "2vh" }} />
-            <h1 style={styles.text}>Dan's Beefed Corn</h1>
-            <h1 style={styles.text_small}>Added: 32</h1>
-            <h1 style={styles.text_small}>Removed: 64</h1>
-            <h1 style={styles.text_tiny}>02/17/2023</h1>
-            <div style={{ marginBottom: "2vh" }} />
-            <div style={styles.content_column}>
-              <h1 style={styles.text}>Canned</h1>
-              <h1 style={styles.text}>Pagmamahal</h1>
-            </div>
-            <h1 style={styles.text_small}>Added: 0</h1>
-            <h1 style={styles.text_small}>Removed: 60</h1>
-            <h1 style={styles.text_tiny}>02/17/2023</h1>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/src/routes/Error/Error.tsx b/src/routes/Error/Error.tsx
deleted file mode 100644
index cc094c3..0000000
--- a/src/routes/Error/Error.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from "react";
-import styles from "../../styles";
-import NotFoundIcon from "../../Components/Icons/NotFoundIcon/NotFoundIcon";
-
-export default function Error() {
-  return (
-    <div style={styles.content_center}>
-      <div style={styles.content_column}>
-        <NotFoundIcon size={64} color="#a44141" />
-        <p style={styles.text}>Could not find the requested page</p>
-      </div>
-    </div>
-  );
-}
diff --git a/src/routes/Products/Products.tsx b/src/routes/Products/Products.tsx
deleted file mode 100644
index 2d0326e..0000000
--- a/src/routes/Products/Products.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import React from "react";
-import styles from "../../styles";
-import ProductsIcon from "../../Components/Icons/ProductsIcon/ProductsIcon";
-export default function Products() {
-  return (
-    <div style={{ margin: 32, height: "100%" }}>
-      <div style={styles.content_row}>
-        <ProductsIcon size={8} color="white" />
-        <h1 style={styles.text_large}>Products</h1>
-      </div>
-    </div>
-  );
-}

From 101a8e8ae61d8759305700adcb8a7543c3484fdc Mon Sep 17 00:00:00 2001
From: keannu125 <noehbernasol0@gmail.com>
Date: Fri, 24 Feb 2023 17:22:12 +0800
Subject: [PATCH 2/2] Readded directories with uppercase

---
 src/Components/ColoredCube/ColoredCube.tsx    |  20 ++++
 src/Components/Container/Container.tsx        |  20 ++++
 src/Components/Header/Header.tsx              |  18 +++
 src/Components/Icons/AppLogo/AppLogo.tsx      |  31 ++++++
 src/Components/Icons/HomeIcon/HomeIcon.tsx    |  29 +++++
 .../Icons/InventoryIcon/InventoryIcon.tsx     |  31 ++++++
 .../Icons/LogoutIcon/LogoutIcon.tsx           |  28 +++++
 src/Components/Icons/LogsIcon/LogsIcon.tsx    |  32 ++++++
 .../Icons/LowStockIcon/LowStockIcon.tsx       |  30 +++++
 .../Icons/NotFoundIcon/NotFoundIcon.tsx       |  31 ++++++
 .../Icons/ProductsIcon/ProductsIcon.tsx       |  31 ++++++
 .../RecentlyAddedIcon/RecentlyAddedIcon.tsx   |  30 +++++
 src/Components/Icons/StatsIcon/StatsIcon.tsx  |  30 +++++
 .../TotalProductsIcon/TotalProductsIcon.tsx   |  35 ++++++
 src/Components/Login/Login.tsx                |  43 ++++++++
 src/Components/Logout/Logout.tsx              |  38 +++++++
 src/Components/Sidebar/Sidebar.tsx            | 102 +++++++++++++++++
 .../SidebarButton/SidebarButton.tsx           |  27 +++++
 src/Routes/Dashboard/Dashboard.tsx            | 104 ++++++++++++++++++
 src/Routes/Error/Error.tsx                    |  14 +++
 src/Routes/Products/Products.tsx              |  13 +++
 21 files changed, 737 insertions(+)
 create mode 100644 src/Components/ColoredCube/ColoredCube.tsx
 create mode 100644 src/Components/Container/Container.tsx
 create mode 100644 src/Components/Header/Header.tsx
 create mode 100644 src/Components/Icons/AppLogo/AppLogo.tsx
 create mode 100644 src/Components/Icons/HomeIcon/HomeIcon.tsx
 create mode 100644 src/Components/Icons/InventoryIcon/InventoryIcon.tsx
 create mode 100644 src/Components/Icons/LogoutIcon/LogoutIcon.tsx
 create mode 100644 src/Components/Icons/LogsIcon/LogsIcon.tsx
 create mode 100644 src/Components/Icons/LowStockIcon/LowStockIcon.tsx
 create mode 100644 src/Components/Icons/NotFoundIcon/NotFoundIcon.tsx
 create mode 100644 src/Components/Icons/ProductsIcon/ProductsIcon.tsx
 create mode 100644 src/Components/Icons/RecentlyAddedIcon/RecentlyAddedIcon.tsx
 create mode 100644 src/Components/Icons/StatsIcon/StatsIcon.tsx
 create mode 100644 src/Components/Icons/TotalProductsIcon/TotalProductsIcon.tsx
 create mode 100644 src/Components/Login/Login.tsx
 create mode 100644 src/Components/Logout/Logout.tsx
 create mode 100644 src/Components/Sidebar/Sidebar.tsx
 create mode 100644 src/Components/SidebarButton/SidebarButton.tsx
 create mode 100644 src/Routes/Dashboard/Dashboard.tsx
 create mode 100644 src/Routes/Error/Error.tsx
 create mode 100644 src/Routes/Products/Products.tsx

diff --git a/src/Components/ColoredCube/ColoredCube.tsx b/src/Components/ColoredCube/ColoredCube.tsx
new file mode 100644
index 0000000..6e34a1f
--- /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 + "vh",
+          height: props.size + "vh",
+        }}
+      />
+    </div>
+  );
+}
diff --git a/src/Components/Container/Container.tsx b/src/Components/Container/Container.tsx
new file mode 100644
index 0000000..89d6a63
--- /dev/null
+++ b/src/Components/Container/Container.tsx
@@ -0,0 +1,20 @@
+import React from "react";
+import Sidebar from "../Sidebar/Sidebar";
+import Header from "../Header/Header";
+import styles from "../../styles";
+
+export interface props {
+  children: React.ReactNode;
+}
+
+export default function Container(props: props) {
+  return (
+    <div>
+      <Header />
+      <div style={{ width: "15%", position: "fixed" }}>
+        <Sidebar />
+      </div>
+      <div style={styles.route_wrapper}>{props.children}</div>
+    </div>
+  );
+}
diff --git a/src/Components/Header/Header.tsx b/src/Components/Header/Header.tsx
new file mode 100644
index 0000000..7c3e850
--- /dev/null
+++ b/src/Components/Header/Header.tsx
@@ -0,0 +1,18 @@
+import React from "react";
+import AppLogo from "../Icons/AppLogo/AppLogo";
+import Login from "../Login/Login";
+import styles from "../../styles";
+
+export default function Header() {
+  return (
+    <div style={styles.header_wrapper}>
+      <div style={styles.header_left}>
+        <AppLogo size={8} color="#80b38b" />
+        <p style={styles.logo_title}>Ivy</p>
+      </div>
+      <div style={styles.header_right}>
+        <Login />
+      </div>
+    </div>
+  );
+}
diff --git a/src/Components/Icons/AppLogo/AppLogo.tsx b/src/Components/Icons/AppLogo/AppLogo.tsx
new file mode 100644
index 0000000..4926766
--- /dev/null
+++ b/src/Components/Icons/AppLogo/AppLogo.tsx
@@ -0,0 +1,31 @@
+import React from "react";
+
+export interface props {
+  size: number;
+  color: string;
+}
+export default function AppLogo(props: props) {
+  return (
+    <div>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        className="icon icon-tabler icon-tabler-plant-2"
+        width={props.size + "vh"}
+        height={props.size + "vh"}
+        viewBox="0 0 24 24"
+        stroke-width="2"
+        stroke={props.color}
+        fill="none"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+        <path d="M2 9a10 10 0 1 0 20 0"></path>
+        <path d="M12 19a10 10 0 0 1 10 -10"></path>
+        <path d="M2 9a10 10 0 0 1 10 10"></path>
+        <path d="M12 4a9.7 9.7 0 0 1 2.99 7.5"></path>
+        <path d="M9.01 11.5a9.7 9.7 0 0 1 2.99 -7.5"></path>
+      </svg>
+    </div>
+  );
+}
diff --git a/src/Components/Icons/HomeIcon/HomeIcon.tsx b/src/Components/Icons/HomeIcon/HomeIcon.tsx
new file mode 100644
index 0000000..2f9bf42
--- /dev/null
+++ b/src/Components/Icons/HomeIcon/HomeIcon.tsx
@@ -0,0 +1,29 @@
+import React from "react";
+
+export interface props {
+  size: number;
+  color: string;
+}
+export default function HomeIcon(props: props) {
+  return (
+    <div>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        className="icon icon-tabler icon-tabler-home-2"
+        width={props.size + "vh"}
+        height={props.size + "vh"}
+        viewBox="0 0 24 24"
+        stroke-width="2"
+        stroke={props.color}
+        fill="none"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+        <path d="M5 12l-2 0l9 -9l9 9l-2 0"></path>
+        <path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7"></path>
+        <path d="M10 12h4v4h-4z"></path>
+      </svg>
+    </div>
+  );
+}
diff --git a/src/Components/Icons/InventoryIcon/InventoryIcon.tsx b/src/Components/Icons/InventoryIcon/InventoryIcon.tsx
new file mode 100644
index 0000000..669ca09
--- /dev/null
+++ b/src/Components/Icons/InventoryIcon/InventoryIcon.tsx
@@ -0,0 +1,31 @@
+import React from "react";
+
+export interface props {
+  size: number;
+  color: string;
+}
+export default function InventoryIcon(props: props) {
+  return (
+    <div>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        className="icon icon-tabler icon-tabler-box-seam"
+        width={props.size + "vh"}
+        height={props.size + "vh"}
+        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="M12 3l8 4.5v9l-8 4.5l-8 -4.5v-9l8 -4.5"></path>
+        <path d="M12 12l8 -4.5"></path>
+        <path d="M8.2 9.8l7.6 -4.6"></path>
+        <path d="M12 12v9"></path>
+        <path d="M12 12l-8 -4.5"></path>
+      </svg>
+    </div>
+  );
+}
diff --git a/src/Components/Icons/LogoutIcon/LogoutIcon.tsx b/src/Components/Icons/LogoutIcon/LogoutIcon.tsx
new file mode 100644
index 0000000..e986e10
--- /dev/null
+++ b/src/Components/Icons/LogoutIcon/LogoutIcon.tsx
@@ -0,0 +1,28 @@
+import React from "react";
+
+export interface props {
+  size: number;
+  color: string;
+}
+export default function LogoutIcon(props: props) {
+  return (
+    <div>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        className="icon icon-tabler icon-tabler-logout"
+        width={props.size + "vh"}
+        height={props.size + "vh"}
+        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="M14 8v-2a2 2 0 0 0 -2 -2h-7a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h7a2 2 0 0 0 2 -2v-2"></path>
+        <path d="M7 12h14l-3 -3m0 6l3 -3"></path>
+      </svg>
+    </div>
+  );
+}
diff --git a/src/Components/Icons/LogsIcon/LogsIcon.tsx b/src/Components/Icons/LogsIcon/LogsIcon.tsx
new file mode 100644
index 0000000..d125858
--- /dev/null
+++ b/src/Components/Icons/LogsIcon/LogsIcon.tsx
@@ -0,0 +1,32 @@
+import React from "react";
+
+export interface props {
+  size: number;
+  color: string;
+}
+export default function LogsIcon(props: props) {
+  return (
+    <div>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        className="icon icon-tabler icon-tabler-clipboard-data"
+        width={props.size + "vh"}
+        height={props.size + "vh"}
+        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="M9 5h-2a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-12a2 2 0 0 0 -2 -2h-2"></path>
+        <path d="M9 3m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z"></path>
+        <path d="M9 17v-4"></path>
+        <path d="M12 17v-1"></path>
+        <path d="M15 17v-2"></path>
+        <path d="M12 17v-1"></path>
+      </svg>
+    </div>
+  );
+}
diff --git a/src/Components/Icons/LowStockIcon/LowStockIcon.tsx b/src/Components/Icons/LowStockIcon/LowStockIcon.tsx
new file mode 100644
index 0000000..f60ff6f
--- /dev/null
+++ b/src/Components/Icons/LowStockIcon/LowStockIcon.tsx
@@ -0,0 +1,30 @@
+import React from "react";
+
+export interface props {
+  size: number;
+  color: string;
+}
+export default function LowStockIcon(props: props) {
+  return (
+    <div>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        className="icon icon-tabler icon-tabler-zoom-exclamation"
+        width={props.size + "vh"}
+        height={props.size + "vh"}
+        viewBox="0 0 24 24"
+        stroke-width="2"
+        stroke={props.color}
+        fill="none"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+        <path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path>
+        <path d="M21 21l-6 -6"></path>
+        <path d="M10 13v.01"></path>
+        <path d="M10 7v3"></path>
+      </svg>
+    </div>
+  );
+}
diff --git a/src/Components/Icons/NotFoundIcon/NotFoundIcon.tsx b/src/Components/Icons/NotFoundIcon/NotFoundIcon.tsx
new file mode 100644
index 0000000..6a395b6
--- /dev/null
+++ b/src/Components/Icons/NotFoundIcon/NotFoundIcon.tsx
@@ -0,0 +1,31 @@
+import React from "react";
+
+export interface props {
+  size: number;
+  color: string;
+}
+export default function NotFoundIcon(props: props) {
+  return (
+    <div>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        className="icon icon-tabler icon-tabler-error-404"
+        width={props.size + "vh"}
+        height={props.size + "vh"}
+        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="M3 7v4a1 1 0 0 0 1 1h3"></path>
+        <path d="M7 7v10"></path>
+        <path d="M10 8v8a1 1 0 0 0 1 1h2a1 1 0 0 0 1 -1v-8a1 1 0 0 0 -1 -1h-2a1 1 0 0 0 -1 1z"></path>
+        <path d="M17 7v4a1 1 0 0 0 1 1h3"></path>
+        <path d="M21 7v10"></path>
+      </svg>
+    </div>
+  );
+}
diff --git a/src/Components/Icons/ProductsIcon/ProductsIcon.tsx b/src/Components/Icons/ProductsIcon/ProductsIcon.tsx
new file mode 100644
index 0000000..74d8832
--- /dev/null
+++ b/src/Components/Icons/ProductsIcon/ProductsIcon.tsx
@@ -0,0 +1,31 @@
+import React from "react";
+
+export interface props {
+  size: number;
+  color: string;
+}
+export default function ProductsIcon(props: props) {
+  return (
+    <div>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        className="icon icon-tabler icon-tabler-list-numbers"
+        width={props.size + "vh"}
+        height={props.size + "vh"}
+        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="M11 6h9"></path>
+        <path d="M11 12h9"></path>
+        <path d="M12 18h8"></path>
+        <path d="M4 16a2 2 0 1 1 4 0c0 .591 -.5 1 -1 1.5l-3 2.5h4"></path>
+        <path d="M6 10v-6l-2 2"></path>
+      </svg>
+    </div>
+  );
+}
diff --git a/src/Components/Icons/RecentlyAddedIcon/RecentlyAddedIcon.tsx b/src/Components/Icons/RecentlyAddedIcon/RecentlyAddedIcon.tsx
new file mode 100644
index 0000000..a5f4493
--- /dev/null
+++ b/src/Components/Icons/RecentlyAddedIcon/RecentlyAddedIcon.tsx
@@ -0,0 +1,30 @@
+import React from "react";
+
+export interface props {
+  size: number;
+  color: string;
+}
+export default function RecentlyAddedIcon(props: props) {
+  return (
+    <div>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        className="icon icon-tabler icon-tabler-book-upload"
+        width={props.size + "vh"}
+        height={props.size + "vh"}
+        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="M14 20h-8a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h12v5"></path>
+        <path d="M11 16h-5a2 2 0 0 0 -2 2"></path>
+        <path d="M15 16l3 -3l3 3"></path>
+        <path d="M18 13v9"></path>
+      </svg>
+    </div>
+  );
+}
diff --git a/src/Components/Icons/StatsIcon/StatsIcon.tsx b/src/Components/Icons/StatsIcon/StatsIcon.tsx
new file mode 100644
index 0000000..02f600d
--- /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 + "vh"}
+        height={props.size + "vh"}
+        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..f799772
--- /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 + "vh"}
+        height={props.size + "vh"}
+        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/Components/Login/Login.tsx b/src/Components/Login/Login.tsx
new file mode 100644
index 0000000..213121e
--- /dev/null
+++ b/src/Components/Login/Login.tsx
@@ -0,0 +1,43 @@
+import React, { useState } from "react";
+import { useSelector, useDispatch } from "react-redux";
+import { toggle } from "../../Features/Login/LoginSlice";
+import { Button } from "@mui/material";
+import styles from "../../styles";
+
+export interface state {
+  logged_in: {
+    value: boolean;
+  };
+}
+export default function Login() {
+  const logged_in = useSelector((state: state) => state.logged_in.value);
+  const [status, setStatus] = useState("Not logged in");
+  const dispatch = useDispatch();
+
+  async function login() {
+    await dispatch(toggle());
+    if (logged_in) {
+      setStatus("Logged in");
+    } else {
+      setStatus("Not logged in");
+    }
+    await console.log("test " + logged_in);
+  }
+
+  if (logged_in) {
+    return <p style={styles.text}>Welcome Jophiel</p>;
+  } else {
+    return (
+      <div>
+        <Button
+          onClick={login}
+          value="Login"
+          variant="contained"
+          style={styles.login_button}
+        >
+          <p style={styles.text}>Login</p>
+        </Button>
+      </div>
+    );
+  }
+}
diff --git a/src/Components/Logout/Logout.tsx b/src/Components/Logout/Logout.tsx
new file mode 100644
index 0000000..1fcfef1
--- /dev/null
+++ b/src/Components/Logout/Logout.tsx
@@ -0,0 +1,38 @@
+import React from "react";
+import { useSelector, useDispatch } from "react-redux";
+import { toggle } from "../../Features/Login/LoginSlice";
+import { Button } from "@mui/material";
+import styles from "../../styles";
+
+export interface state {
+  logged_in: {
+    value: boolean;
+  };
+}
+export interface props {
+  children: React.ReactNode;
+}
+
+export default function Logout(props: props) {
+  const logged_in = useSelector((state: state) => state.logged_in.value);
+  const dispatch = useDispatch();
+
+  async function login() {
+    await dispatch(toggle());
+    await console.log("test " + logged_in);
+  }
+
+  return (
+    <div style={{ paddingTop: "40vh" }}>
+      <Button
+        onClick={login}
+        value="Log out"
+        variant="contained"
+        style={styles.logout_button}
+      >
+        {props.children}
+        <p style={styles.text}>Log Out</p>
+      </Button>
+    </div>
+  );
+}
diff --git a/src/Components/Sidebar/Sidebar.tsx b/src/Components/Sidebar/Sidebar.tsx
new file mode 100644
index 0000000..cfbc502
--- /dev/null
+++ b/src/Components/Sidebar/Sidebar.tsx
@@ -0,0 +1,102 @@
+import React from "react";
+import styles from "../../styles";
+import { useNavigate } from "react-router-dom";
+import { useSelector } from "react-redux";
+import SidebarButton from "../SidebarButton/SidebarButton";
+import HomeIcon from "../Icons/HomeIcon/HomeIcon";
+import ProductsIcon from "../Icons/ProductsIcon/ProductsIcon";
+import Logout from "../Logout/Logout";
+import InventoryIcon from "../Icons/InventoryIcon/InventoryIcon";
+import LogsIcon from "../Icons/LogsIcon/LogsIcon";
+import LogoutIcon from "../Icons/LogoutIcon/LogoutIcon";
+
+export interface state {
+  logged_in: {
+    value: boolean;
+  };
+}
+export default function Sidebar() {
+  const navigate = useNavigate();
+  const logged_in = useSelector((state: state) => state.logged_in.value);
+  if (!logged_in) {
+    return (
+      <div style={styles.sidebar_container}>
+        <div
+          style={{
+            display: "flex",
+            flexDirection: "row",
+            justifyContent: "flex-end",
+          }}
+        >
+          <div
+            style={{
+              position: "relative",
+              display: "flex",
+              flexDirection: "column",
+              justifyContent: "flex-start",
+            }}
+          >
+            <SidebarButton onClick={() => navigate("/")} name="Dashboard">
+              <HomeIcon size={4} color="white" />
+            </SidebarButton>
+            <SidebarButton
+              onClick={() => navigate("/Products")}
+              name="Products"
+            >
+              <ProductsIcon size={4} color="white" />
+            </SidebarButton>
+            <SidebarButton
+              onClick={() => navigate("/Inventory")}
+              name="Inventory"
+            >
+              <InventoryIcon size={4} color="white" />
+            </SidebarButton>
+          </div>
+        </div>
+      </div>
+    );
+  } else {
+    return (
+      <div style={styles.sidebar_container}>
+        <div
+          style={{
+            display: "flex",
+            flexDirection: "row",
+            justifyContent: "flex-end",
+          }}
+        >
+          <div
+            style={{
+              position: "relative",
+              display: "flex",
+              flexDirection: "column",
+              justifyContent: "flex-start",
+            }}
+          >
+            <SidebarButton onClick={() => navigate("/")} name="Dashboard">
+              <HomeIcon size={4} color="white" />
+            </SidebarButton>
+            <SidebarButton
+              onClick={() => navigate("/Products")}
+              name="Products"
+            >
+              <ProductsIcon size={4} color="white" />
+            </SidebarButton>
+            <SidebarButton
+              onClick={() => navigate("/Inventory")}
+              name="Inventory"
+            >
+              <InventoryIcon size={4} color="white" />
+            </SidebarButton>
+            <SidebarButton onClick={() => navigate("/Logs")} name="Logs">
+              <LogsIcon size={4} color="white" />
+            </SidebarButton>
+            <Logout>
+              <LogoutIcon size={4} color="white" />
+            </Logout>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
diff --git a/src/Components/SidebarButton/SidebarButton.tsx b/src/Components/SidebarButton/SidebarButton.tsx
new file mode 100644
index 0000000..f8534c6
--- /dev/null
+++ b/src/Components/SidebarButton/SidebarButton.tsx
@@ -0,0 +1,27 @@
+import React from "react";
+import { Button } from "@mui/material";
+import styles from "../../styles";
+
+export interface props {
+  name: string;
+  onClick: any;
+  children: React.ReactNode;
+}
+export default function SidebarButton(props: props) {
+  return (
+    <div
+      style={{
+        paddingBottom: 16,
+      }}
+    >
+      <Button
+        onClick={props.onClick}
+        variant="contained"
+        style={styles.sidebar_button}
+      >
+        {props.children}
+        <p style={styles.text}>{props.name}</p>
+      </Button>
+    </div>
+  );
+}
diff --git a/src/Routes/Dashboard/Dashboard.tsx b/src/Routes/Dashboard/Dashboard.tsx
new file mode 100644
index 0000000..55f11f1
--- /dev/null
+++ b/src/Routes/Dashboard/Dashboard.tsx
@@ -0,0 +1,104 @@
+import React from "react";
+import TotalProductsIcon from "../../Components/Icons/TotalProductsIcon/TotalProductsIcon";
+import LowStockIcon from "../../Components/Icons/LowStockIcon/LowStockIcon";
+import StatsIcon from "../../Components/Icons/StatsIcon/StatsIcon";
+import LogsIcon from "../../Components/Icons/LogsIcon/LogsIcon";
+import "../../index.css";
+import styles from "../../styles";
+import HomeIcon from "../../Components/Icons/HomeIcon/HomeIcon";
+import ColoredCube from "../../Components/ColoredCube/ColoredCube";
+import RecentlyAddedIcon from "../../Components/Icons/RecentlyAddedIcon/RecentlyAddedIcon";
+
+export default function Dashboard() {
+  return (
+    <div style={{ margin: 32, height: "100%" }}>
+      <div style={styles.flex_row}>
+        <HomeIcon size={8} color="white" />
+        <h1 style={styles.text_large}>Dashboard</h1>
+      </div>
+      <div style={{ display: "flex", flexDirection: "row" }}>
+        <div style={{ flex: 7 }}>
+          <div style={styles.flex_column}>
+            <div style={{ ...styles.widget, ...{ flex: 5 } }}>
+              <div style={styles.content_row}>
+                <TotalProductsIcon size={8} color="white" />
+                <h1 style={styles.text_extra_large}>Total Products</h1>
+              </div>
+              <h1 style={styles.text_large}>2546 Unique Items</h1>
+              <h1 style={styles.text_large}>In inventory</h1>
+            </div>
+            <div style={styles.flex_row}>
+              <div style={{ ...styles.widget, ...{ flex: 6 } }}>
+                <div style={styles.content_row}>
+                  <StatsIcon size={8} color="white" />
+                  <h1 style={styles.text_large}>Current Session</h1>
+                </div>
+                <div style={styles.content_row}>
+                  <ColoredCube size={3} color="#a48e41" />
+                  <h1 style={styles.text_large}>Added</h1>
+                </div>
+                <h1 style={styles.text_large}>254</h1>
+                <div style={styles.content_row}>
+                  <ColoredCube size={3} color="#a44141" />
+                  <h1 style={styles.text_large}>Removed</h1>{" "}
+                </div>
+              </div>
+              <div style={{ ...styles.flex_column, ...{ flex: 4 } }}>
+                <div style={{ ...styles.widget, ...{ flex: 1 } }}>
+                  <div style={styles.content_row}>
+                    <LowStockIcon size={8} color="white" />
+                    <h1 style={styles.text_medium}>Low Stock</h1>
+                  </div>
+                  <h1 style={styles.text_medium}>Canned Pagmamahal</h1>
+                  <h1 style={styles.text_tiny}>In Stock: 3</h1>
+                </div>
+                <div style={{ ...styles.widget, ...{ flex: 1 } }}>
+                  <div style={styles.content_row}>
+                    <RecentlyAddedIcon size={8} color="white" />
+                    <h1 style={styles.text_medium}>Recently Added</h1>
+                  </div>
+                  <h1 style={styles.text_medium}>Zidane's Water</h1>
+                  <h1 style={styles.text_tiny}>Added 02/17/2023</h1>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div style={{ flex: 3 }}>
+          <div style={styles.widget}>
+            <div style={styles.content_row}>
+              <LogsIcon size={8} color="white" />
+              <div style={styles.wrapper_column}>
+                <h1 style={styles.text_medium}>Recent</h1>
+                <h1 style={styles.text_medium}>Transactions</h1>
+              </div>
+            </div>
+            <div style={{ marginBottom: "2vh" }} />
+            <h1 style={styles.text}>Kopiko Blanca</h1>
+            <h1 style={styles.text_small}>Added: 96</h1>
+            <h1 style={styles.text_small}>Removed: 105</h1>
+            <h1 style={styles.text_tiny}>02/17/2023</h1>
+            <div style={{ marginBottom: "2vh" }} />
+            <h1 style={styles.text}>Zidane's Water</h1>
+            <h1 style={styles.text_small}>Added: 49</h1>
+            <h1 style={styles.text_small}>Removed: 24</h1>
+            <h1 style={styles.text_tiny}>02/17/2023</h1>
+            <div style={{ marginBottom: "2vh" }} />
+            <h1 style={styles.text}>Dan's Beefed Corn</h1>
+            <h1 style={styles.text_small}>Added: 32</h1>
+            <h1 style={styles.text_small}>Removed: 64</h1>
+            <h1 style={styles.text_tiny}>02/17/2023</h1>
+            <div style={{ marginBottom: "2vh" }} />
+            <div style={styles.content_column}>
+              <h1 style={styles.text}>Canned</h1>
+              <h1 style={styles.text}>Pagmamahal</h1>
+            </div>
+            <h1 style={styles.text_small}>Added: 0</h1>
+            <h1 style={styles.text_small}>Removed: 60</h1>
+            <h1 style={styles.text_tiny}>02/17/2023</h1>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/Routes/Error/Error.tsx b/src/Routes/Error/Error.tsx
new file mode 100644
index 0000000..cc094c3
--- /dev/null
+++ b/src/Routes/Error/Error.tsx
@@ -0,0 +1,14 @@
+import React from "react";
+import styles from "../../styles";
+import NotFoundIcon from "../../Components/Icons/NotFoundIcon/NotFoundIcon";
+
+export default function Error() {
+  return (
+    <div style={styles.content_center}>
+      <div style={styles.content_column}>
+        <NotFoundIcon size={64} color="#a44141" />
+        <p style={styles.text}>Could not find the requested page</p>
+      </div>
+    </div>
+  );
+}
diff --git a/src/Routes/Products/Products.tsx b/src/Routes/Products/Products.tsx
new file mode 100644
index 0000000..2d0326e
--- /dev/null
+++ b/src/Routes/Products/Products.tsx
@@ -0,0 +1,13 @@
+import React from "react";
+import styles from "../../styles";
+import ProductsIcon from "../../Components/Icons/ProductsIcon/ProductsIcon";
+export default function Products() {
+  return (
+    <div style={{ margin: 32, height: "100%" }}>
+      <div style={styles.content_row}>
+        <ProductsIcon size={8} color="white" />
+        <h1 style={styles.text_large}>Products</h1>
+      </div>
+    </div>
+  );
+}