Readded directories with uppercase

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>
+  );
+}

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>
+  );
+}

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>
+  );
+}

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>
+  );
+}

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>
+  );
+}

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>
+  );
+}

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>
+  );
+}

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>
+  );
+}

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>
+  );
+}

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>
+  );
+}

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>
+  );
+}

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>
+  );
+}

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>
+  );
+}

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>
+  );
+}

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>
+    );
+  }
+}

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>
+  );
+}

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>
+    );
+  }
+}

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>
+  );
+}

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>
+  );
+}

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>
+  );
+}

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>
+  );
+}