From 1baf1ab5d241104dc52d106113e2650bf4f689c6 Mon Sep 17 00:00:00 2001
From: keannu125 <noehbernasol0@gmail.com>
Date: Sat, 11 Mar 2023 20:22:18 +0800
Subject: [PATCH] Polished logout sidebar button and added dailyview page

---
 src/App.tsx                                  |   9 ++
 src/Components/Icons/TodayIcon/TodayIcon.tsx |  27 ++++
 src/Components/Sidebar/Sidebar.tsx           | 137 ++++++++-----------
 src/Routes/DailyView/DailyView.tsx           |  90 ++++++++++++
 4 files changed, 180 insertions(+), 83 deletions(-)
 create mode 100644 src/Components/Icons/TodayIcon/TodayIcon.tsx
 create mode 100644 src/Routes/DailyView/DailyView.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 1f8b4a5..567eb03 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -22,6 +22,7 @@ import Activation from "./Routes/Activation/Activation";
 import { QueryClient, QueryClientProvider } from "react-query";
 import NewProduct from "./Routes/NewProduct/NewProduct";
 import Register from "./Routes/Register/Register";
+import DailyView from "./Routes/DailyView/DailyView";
 
 const queryClient = new QueryClient();
 
@@ -103,6 +104,14 @@ const router = createHashRouter([
       </Container>
     ),
   },
+  {
+    path: "/ActivityToday",
+    element: (
+      <Container>
+        <DailyView />
+      </Container>
+    ),
+  },
 ]);
 
 export default function App() {
diff --git a/src/Components/Icons/TodayIcon/TodayIcon.tsx b/src/Components/Icons/TodayIcon/TodayIcon.tsx
new file mode 100644
index 0000000..e6fe11f
--- /dev/null
+++ b/src/Components/Icons/TodayIcon/TodayIcon.tsx
@@ -0,0 +1,27 @@
+import React from "react";
+
+export interface props {
+  size: number;
+  color: string;
+}
+export default function TodayIcon(props: props) {
+  return (
+    <svg
+      width={props.size}
+      height={props.size}
+      viewBox="0 0 24 24"
+      strokeWidth="2"
+      stroke={props.color}
+      fill="none"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+      <path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"></path>
+      <path d="M4 13a8.094 8.094 0 0 0 3 5.24"></path>
+      <path d="M11 15h2a1 1 0 0 1 1 1v1a1 1 0 0 1 -1 1h-1a1 1 0 0 0 -1 1v1a1 1 0 0 0 1 1h2"></path>
+      <path d="M17 15v2a1 1 0 0 0 1 1h1"></path>
+      <path d="M20 15v6"></path>
+    </svg>
+  );
+}
diff --git a/src/Components/Sidebar/Sidebar.tsx b/src/Components/Sidebar/Sidebar.tsx
index f95da1f..971a402 100644
--- a/src/Components/Sidebar/Sidebar.tsx
+++ b/src/Components/Sidebar/Sidebar.tsx
@@ -9,6 +9,7 @@ import Logout from "../Logout/Logout";
 import InventoryIcon from "../Icons/InventoryIcon/InventoryIcon";
 import LogsIcon from "../Icons/LogsIcon/LogsIcon";
 import LogoutIcon from "../Icons/LogoutIcon/LogoutIcon";
+import TodayIcon from "../Icons/TodayIcon/TodayIcon";
 
 export interface state {
   logged_in: {
@@ -18,88 +19,58 @@ export interface state {
 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={48} color="white" />
-            </SidebarButton>
-            <SidebarButton
-              onClick={() => navigate("/Products")}
-              name="Products"
-            >
-              <ProductsIcon size={48} color="white" />
-            </SidebarButton>
-            <SidebarButton
-              onClick={() => navigate("/Inventory")}
-              name="Inventory"
-            >
-              <InventoryIcon size={48} color="white" />
-            </SidebarButton>
-            <SidebarButton onClick={() => navigate("/Logs")} name="Logs">
-              <LogsIcon size={48} 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={48} color="white" />
-            </SidebarButton>
-            <SidebarButton
-              onClick={() => navigate("/Products")}
-              name="Products"
-            >
-              <ProductsIcon size={48} color="white" />
-            </SidebarButton>
-            <SidebarButton
-              onClick={() => navigate("/Inventory")}
-              name="Inventory"
-            >
-              <InventoryIcon size={48} color="white" />
-            </SidebarButton>
-            <SidebarButton onClick={() => navigate("/Logs")} name="Logs">
-              <LogsIcon size={48} color="white" />
-            </SidebarButton>
-            <Logout>
-              <LogoutIcon size={48} color="white" />
-            </Logout>
-          </div>
-        </div>
-      </div>
-    );
+  function LogoutButton() {
+    if (!logged_in) {
+      return <div />;
+    } else {
+      return (
+        <Logout>
+          <LogoutIcon size={48} color="white" />
+        </Logout>
+      );
+    }
   }
+  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={48} color="white" />
+          </SidebarButton>
+          <SidebarButton onClick={() => navigate("/Products")} name="Products">
+            <ProductsIcon size={48} color="white" />
+          </SidebarButton>
+          <SidebarButton
+            onClick={() => navigate("/Inventory")}
+            name="Inventory"
+          >
+            <InventoryIcon size={48} color="white" />
+          </SidebarButton>
+          <SidebarButton
+            onClick={() => navigate("/ActivityToday")}
+            name="Daily View"
+          >
+            <TodayIcon size={48} color="white" />
+          </SidebarButton>
+          <SidebarButton onClick={() => navigate("/Logs")} name="Logs">
+            <LogsIcon size={48} color="white" />
+          </SidebarButton>
+          <LogoutButton />
+        </div>
+      </div>
+    </div>
+  );
 }
diff --git a/src/Routes/DailyView/DailyView.tsx b/src/Routes/DailyView/DailyView.tsx
new file mode 100644
index 0000000..d26f460
--- /dev/null
+++ b/src/Routes/DailyView/DailyView.tsx
@@ -0,0 +1,90 @@
+import React, { useState } 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";
+import LoginChecker from "../../Components/LoginChecker/LoginChecker";
+import { useQuery } from "react-query";
+import {
+  GetLogs,
+  GetLowestStockedProduct,
+  GetProducts,
+} from "../../Components/Api/Api";
+import {
+  OldSessionState,
+  ProductLog,
+  SessionTransactions,
+} from "../../Interfaces/Interfaces";
+import { useSelector } from "react-redux";
+import LowestStockWidget from "../../Components/DashboardPage/LowestStockWidget/LowestStockWidget";
+import RecentlyAddedWidget from "../../Components/DashboardPage/RecentlyAddedWidget/RecentlyAddedWidget";
+import TotalProductsWidget from "../../Components/DashboardPage/TotalProductsWidget/TotalProductsWidget";
+import SessionStatsWidget from "../../Components/DashboardPage/SessionStatsWidget/SessionStatsWidget";
+import TodayIcon from "../../Components/Icons/TodayIcon/TodayIcon";
+
+export default function DailyView() {
+  const logs = useQuery("logs", GetLogs, { retry: 0 });
+  const products = useQuery("products", GetProducts, { retry: 0 });
+  const lowest_stock_product = useQuery(
+    "lowest_stock_product",
+    GetLowestStockedProduct,
+    {
+      retry: 0,
+    }
+  );
+  const old_session_checked = useSelector(
+    (state: OldSessionState) => state.old_session_checked.value
+  );
+  if (
+    logs.isLoading ||
+    products.isLoading ||
+    lowest_stock_product.isLoading ||
+    !old_session_checked
+  ) {
+    return (
+      <div>
+        <LoginChecker />
+        <div style={styles.flex_row}>
+          <TodayIcon size={64} color="white" />
+          <p style={{ ...styles.text_white, ...styles.text_XL }}>Daily View</p>
+        </div>
+        <div style={{ ...styles.content_column, ...{ alignItems: "center" } }}>
+          <p style={{ ...styles.text_white, ...styles.text_L }}>
+            Loading today's summary...
+          </p>
+        </div>
+      </div>
+    );
+  }
+  if (logs.error || products.error || lowest_stock_product.isError) {
+    <div>
+      <LoginChecker />
+      <div style={styles.flex_row}>
+        <TodayIcon size={64} color="white" />
+        <p style={{ ...styles.text_white, ...styles.text_XL }}>Daily View</p>
+      </div>
+      <div style={{ ...styles.content_column, ...{ alignItems: "center" } }}>
+        <p style={{ ...styles.text_red, ...styles.text_L }}>
+          Error loading today's summary
+        </p>
+      </div>
+    </div>;
+  }
+  return (
+    <div>
+      <LoginChecker />
+      <div style={styles.flex_row}>
+        <TodayIcon size={64} color="white" />
+        <p style={{ ...styles.text_white, ...styles.text_XL }}>Daily View</p>
+      </div>
+      <div style={styles.content_row}>
+        <p style={{ ...styles.text_white, ...styles.text_XL }}>Heh</p>
+      </div>
+    </div>
+  );
+}