Separated recent transactions on dashboard into its own widget. Also added initial daily view page

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

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

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 }}>
+        <RecentTransactionsWidget ProductLogs={logs.data} />
-          <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>
       </div>
     </div>
   );