From a0a05e2df36db0a93ea17a09744665abeff93af8 Mon Sep 17 00:00:00 2001
From: keannu125 <noehbernasol0@gmail.com>
Date: Sun, 12 Mar 2023 00:09:32 +0800
Subject: [PATCH] Separated recent transactions on dashboard into its own
 widget. Also added initial daily view page

---
 .../RecentTransactionsWidget.tsx              | 42 +++++++++++++++++++
 src/Components/GetToday/GetToday.tsx          | 11 +++++
 src/Routes/Dashboard/Dashboard.tsx            | 34 +--------------
 3 files changed, 55 insertions(+), 32 deletions(-)
 create mode 100644 src/Components/DashboardPage/RecentTransactionsWidget/RecentTransactionsWidget.tsx
 create mode 100644 src/Components/GetToday/GetToday.tsx

diff --git a/src/Components/DashboardPage/RecentTransactionsWidget/RecentTransactionsWidget.tsx b/src/Components/DashboardPage/RecentTransactionsWidget/RecentTransactionsWidget.tsx
new file mode 100644
index 0000000..1465f57
--- /dev/null
+++ b/src/Components/DashboardPage/RecentTransactionsWidget/RecentTransactionsWidget.tsx
@@ -0,0 +1,42 @@
+import * as React from "react";
+import { ProductLog, ProductLogList } from "../../../Interfaces/Interfaces";
+import styles from "../../../styles";
+import LogsIcon from "../../Icons/LogsIcon/LogsIcon";
+import Moment from "react-moment";
+
+export default function RecentTransactionsWidget(props: ProductLogList) {
+  return (
+    <div style={{ flex: 3 }}>
+      <div style={styles.widget}>
+        <div style={styles.content_row}>
+          <LogsIcon size={64} color="white" />
+          <div style={styles.wrapper_column}>
+            <p style={{ ...styles.text_white, ...styles.text_L }}>Recent</p>
+            <p style={{ ...styles.text_white, ...styles.text_L }}>
+              Transactions
+            </p>
+          </div>
+        </div>
+        {props.ProductLogs.slice(0, 5).map((log: ProductLog, index: number) => {
+          return (
+            <div key={index}>
+              <div style={{ marginBottom: "8px" }} />
+              <p style={{ ...styles.text_white, ...styles.text_M }}>
+                {log.name}
+              </p>
+              <p style={{ ...styles.text_white, ...styles.text_S }}>
+                Quantity: {log.quantity}
+              </p>
+              <p style={{ ...styles.text_white, ...styles.text_S }}>
+                {log.history_date}
+              </p>
+              <p style={{ ...styles.text_white, ...styles.text_XS }}>
+                Transaction ID: {log.history_id}
+              </p>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
diff --git a/src/Components/GetToday/GetToday.tsx b/src/Components/GetToday/GetToday.tsx
new file mode 100644
index 0000000..be17d04
--- /dev/null
+++ b/src/Components/GetToday/GetToday.tsx
@@ -0,0 +1,11 @@
+export default function GetToday() {
+  const current = new Date();
+  const date =
+    ("0" + (current.getMonth() + 1)).slice(-2) +
+    "-" +
+    ("0" + current.getDate()).slice(-2) +
+    "-" +
+    current.getFullYear();
+  console.log("Today is " + date);
+  return date;
+}
diff --git a/src/Routes/Dashboard/Dashboard.tsx b/src/Routes/Dashboard/Dashboard.tsx
index 11e5df2..fdf1d57 100644
--- a/src/Routes/Dashboard/Dashboard.tsx
+++ b/src/Routes/Dashboard/Dashboard.tsx
@@ -25,6 +25,7 @@ import LowestStockWidget from "../../Components/DashboardPage/LowestStockWidget/
 import RecentlyAddedWidget from "../../Components/DashboardPage/RecentlyAddedWidget/RecentlyAddedWidget";
 import TotalProductsWidget from "../../Components/DashboardPage/TotalProductsWidget/TotalProductsWidget";
 import SessionStatsWidget from "../../Components/DashboardPage/SessionStatsWidget/SessionStatsWidget";
+import RecentTransactionsWidget from "../../Components/DashboardPage/RecentTransactionsWidget/RecentTransactionsWidget";
 
 export default function Dashboard() {
   const logs = useQuery("logs", GetLogs, { retry: 0 });
@@ -107,38 +108,7 @@ export default function Dashboard() {
             </div>
           </div>
         </div>
-        <div style={{ flex: 3 }}>
-          <div style={styles.widget}>
-            <div style={styles.content_row}>
-              <LogsIcon size={64} color="white" />
-              <div style={styles.wrapper_column}>
-                <p style={{ ...styles.text_white, ...styles.text_L }}>Recent</p>
-                <p style={{ ...styles.text_white, ...styles.text_L }}>
-                  Transactions
-                </p>
-              </div>
-            </div>
-            {logs.data.slice(0, 5).map((log: ProductLog, index: number) => {
-              return (
-                <div key={index}>
-                  <div style={{ marginBottom: "8px" }} />
-                  <p style={{ ...styles.text_white, ...styles.text_M }}>
-                    {log.name}
-                  </p>
-                  <p style={{ ...styles.text_white, ...styles.text_S }}>
-                    Quantity: {log.quantity}
-                  </p>
-                  <p style={{ ...styles.text_white, ...styles.text_S }}>
-                    Date: {log.history_date}
-                  </p>
-                  <p style={{ ...styles.text_white, ...styles.text_XS }}>
-                    Transaction ID: {log.history_id}
-                  </p>
-                </div>
-              );
-            })}
-          </div>
-        </div>
+        <RecentTransactionsWidget ProductLogs={logs.data} />
       </div>
     </div>
   );