From 94fa62f231207b6da521f54bde51173e50615bce Mon Sep 17 00:00:00 2001
From: keannu125 <noehbernasol0@gmail.com>
Date: Fri, 24 Feb 2023 17:50:39 +0800
Subject: [PATCH 1/2] Created initial logs page and fixed flex_row vertical
 alignment

---
 src/App.tsx              |  9 +++++++++
 src/Routes/Logs/Logs.tsx | 14 ++++++++++++++
 src/styles.tsx           |  2 +-
 3 files changed, 24 insertions(+), 1 deletion(-)
 create mode 100644 src/Routes/Logs/Logs.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 1e70851..efe8b76 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -2,6 +2,7 @@ import React from "react";
 import Dashboard from "./Routes/Dashboard/Dashboard";
 import Error from "./Routes/Error/Error";
 import Products from "./Routes/Products/Products";
+import Logs from "./Routes/Logs/Logs";
 import Container from "./Components/Container/Container";
 import { createBrowserRouter, RouterProvider } from "react-router-dom";
 import Store from "./Plugins/Redux/Store/Store";
@@ -29,6 +30,14 @@ const router = createBrowserRouter([
       </Container>
     ),
   },
+  {
+    path: "/Logs",
+    element: (
+      <Container>
+        <Logs />
+      </Container>
+    ),
+  },
 ]);
 
 export default function App() {
diff --git a/src/Routes/Logs/Logs.tsx b/src/Routes/Logs/Logs.tsx
new file mode 100644
index 0000000..51d73fc
--- /dev/null
+++ b/src/Routes/Logs/Logs.tsx
@@ -0,0 +1,14 @@
+import * as React from "react";
+import LogsIcon from "../../Components/Icons/LogsIcon/LogsIcon";
+import styles from "../../styles";
+
+export default function Logs() {
+  return (
+    <div style={{ margin: 32, height: "100%" }}>
+      <div style={styles.flex_row}>
+        <LogsIcon size={8} color="white" />
+        <h1 style={styles.text_large}>Logs</h1>
+      </div>
+    </div>
+  );
+}
diff --git a/src/styles.tsx b/src/styles.tsx
index f266346..55978d1 100644
--- a/src/styles.tsx
+++ b/src/styles.tsx
@@ -129,7 +129,7 @@ const styles: { [key: string]: React.CSSProperties } = {
   flex_row: {
     display: "flex",
     flexDirection: "row",
-    alignItems: "stretch",
+    alignItems: "center",
   },
   flex_column: {
     display: "flex",

From 8dcbe60652ae2eb4b1ce6f12c62c0cf01713bd9d Mon Sep 17 00:00:00 2001
From: keannu125 <noehbernasol0@gmail.com>
Date: Fri, 24 Feb 2023 18:39:08 +0800
Subject: [PATCH 2/2] Added design for logs page and added placeholder sample
 data

---
 src/Routes/Logs/Logs.tsx | 64 ++++++++++++++++++++++++++++++++++++++++
 src/styles.tsx           | 10 +++++++
 2 files changed, 74 insertions(+)

diff --git a/src/Routes/Logs/Logs.tsx b/src/Routes/Logs/Logs.tsx
index 51d73fc..72df12a 100644
--- a/src/Routes/Logs/Logs.tsx
+++ b/src/Routes/Logs/Logs.tsx
@@ -1,14 +1,78 @@
 import * as React from "react";
 import LogsIcon from "../../Components/Icons/LogsIcon/LogsIcon";
 import styles from "../../styles";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+} from "@mui/material";
+
+function createData(
+  id: number,
+  p_id: number,
+  p_name: string,
+  amount_changed: number,
+  timestamp: string
+) {
+  return { id, p_id, p_name, amount_changed, timestamp };
+}
+
+const sample_data = [
+  createData(1, 1, "Zidanes Water", -5, "2/24/2023 10:05AM"),
+  createData(2, 1, "Zidanes Water", +10, "2/24/2023 1:05PM"),
+  createData(3, 2, "Dans Beefed Corn", +25, "2/25/2023 4:05PM"),
+  createData(4, 2, "Dans Beefed Corn", -15, "2/26/2023 3:35PM"),
+];
 
 export default function Logs() {
+  function change_color(amount: number) {
+    if (amount > 0) {
+      return <TableCell style={styles.text_green}>{amount}</TableCell>;
+    } else {
+      return <TableCell style={styles.text_red}>{amount}</TableCell>;
+    }
+  }
   return (
     <div style={{ margin: 32, height: "100%" }}>
       <div style={styles.flex_row}>
         <LogsIcon size={8} color="white" />
         <h1 style={styles.text_large}>Logs</h1>
       </div>
+      <TableContainer
+        style={{
+          backgroundColor: "#1d3b33",
+          borderRadius: 8,
+        }}
+      >
+        <Table sx={{ minWidth: 650 }} aria-label="simple table">
+          <TableHead>
+            <TableRow>
+              <TableCell style={styles.text}>Log ID</TableCell>
+              <TableCell style={styles.text}>Product ID</TableCell>
+              <TableCell style={styles.text}>Product</TableCell>
+              <TableCell style={styles.text}>Amount Change</TableCell>
+              <TableCell style={styles.text}>Timestamp</TableCell>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {sample_data.map((row) => (
+              <TableRow
+                key={row.id}
+                sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
+              >
+                <TableCell style={styles.text}>{row.id}</TableCell>
+                <TableCell style={styles.text}>{row.p_id}</TableCell>
+                <TableCell style={styles.text}>{row.p_name}</TableCell>
+                {change_color(row.amount_changed)}
+                <TableCell style={styles.text}>{row.timestamp}</TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </TableContainer>
     </div>
   );
 }
diff --git a/src/styles.tsx b/src/styles.tsx
index 55978d1..2702ab8 100644
--- a/src/styles.tsx
+++ b/src/styles.tsx
@@ -37,6 +37,16 @@ const styles: { [key: string]: React.CSSProperties } = {
     color: "white",
     fontWeight: "bold",
   },
+  text_red: {
+    fontSize: "1.3vw",
+    color: "#a44141",
+    fontWeight: "bold",
+  },
+  text_green: {
+    fontSize: "1.3vw",
+    color: "#80b28a",
+    fontWeight: "bold",
+  },
   logo_title: {
     color: "#80b38b",
     fontSize: 26,