Separated all the widgets in the dashboard into their own components

src/Routes/Dashboard/Dashboard.tsx

@@ -15,8 +15,16 @@ import {
   GetLowestStockedProduct,
   GetProducts,
 } from "../../Components/Api/Api";
-import { ProductLog, SessionTransactions } from "../../Interfaces/Interfaces";
+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";
 
 export default function Dashboard() {
   const logs = useQuery("logs", GetLogs, { retry: 0 });
@@ -28,13 +36,15 @@ export default function Dashboard() {
       retry: 0,
     }
   );
-  const session_added = useSelector(
-    (state: SessionTransactions) => state.session_transactions.added
+  const old_session_checked = useSelector(
+    (state: OldSessionState) => state.old_session_checked.value
   );
-  const session_removed = useSelector(
-    (state: SessionTransactions) => state.session_transactions.removed
-  );
-  if (logs.isLoading || products.isLoading || lowest_stock_product.isLoading) {
+  if (
+    logs.isLoading ||
+    products.isLoading ||
+    lowest_stock_product.isLoading ||
+    !old_session_checked
+  ) {
     return (
       <div>
         <LoginChecker />
@@ -79,108 +89,20 @@ export default function Dashboard() {
       >
         <div style={{ flex: 7 }}>
           <div style={styles.flex_column}>
-            <div
-              style={{
-                ...styles.widget,
-                ...{ flex: 5 },
-              }}
-            >
-              <div style={styles.content_row}>
-                <TotalProductsIcon size={64} color="white" />
-                <p style={{ ...styles.text_white, ...styles.text_XL }}>
-                  Total Products
-                </p>
-              </div>
-              <p style={{ ...styles.text_white, ...styles.text_L }}>
-                {products.data.length} Unique Item/s
-              </p>
-              <p style={{ ...styles.text_white, ...styles.text_L }}>
-                In inventory
-              </p>
-            </div>
+            <TotalProductsWidget Products={products.data} />
             <div style={styles.flex_row}>
-              <div
-                style={{
-                  ...styles.widget,
-                  ...{ flex: 5 },
-                }}
-              >
-                <div style={styles.content_row}>
-                  <StatsIcon size={64} color="white" />
-                  <p style={{ ...styles.text_white, ...styles.text_XL }}>
-                    Current Session
-                  </p>
-                </div>
-                <div style={styles.content_row}>
-                  <ColoredCube size={32} color="#a48e41" />
-                  <p style={{ ...styles.text_white, ...styles.text_L }}>
-                    Added
-                  </p>
-                </div>
-                <p style={{ ...styles.text_white, ...styles.text_L }}>
-                  {session_added}
-                </p>
-                <div style={styles.content_row}>
-                  <ColoredCube size={32} color="#a44141" />
-                  <p style={{ ...styles.text_white, ...styles.text_L }}>
-                    Removed
-                  </p>
-                </div>
-                <p style={{ ...styles.text_white, ...styles.text_XL }}>
-                  {session_removed}
-                </p>
-              </div>
+              <SessionStatsWidget />
               <div
                 style={{
                   ...styles.flex_column,
                   ...{
                     flex: 5,
+                    alignSelf: "stretch",
                   },
                 }}
               >
-                <div
-                  style={{
-                    ...styles.widget,
-                    ...{ flex: 1 },
-                  }}
-                >
-                  <div style={styles.content_row}>
-                    <LowStockIcon size={64} color="white" />
-                    <p style={{ ...styles.text_white, ...styles.text_L }}>
-                      Lowest Stock
-                    </p>
-                  </div>
-                  <p style={{ ...styles.text_white, ...styles.text_S }}>
-                    {lowest_stock_product.data[0].name}
-                  </p>
-                  <p style={{ ...styles.text_white, ...styles.text_S }}>
-                    In Stock: {lowest_stock_product.data[0].quantity}
-                  </p>
-                </div>
-                <div
-                  style={{
-                    ...styles.widget,
-                    ...{ flex: 1 },
-                  }}
-                >
-                  <div style={styles.content_row}>
-                    <RecentlyAddedIcon size={64} color="white" />
-                    <p
-                      style={{
-                        ...styles.text_white,
-                        ...styles.text_L,
-                      }}
-                    >
-                      Recently Added
-                    </p>
-                  </div>
-                  <p style={{ ...styles.text_white, ...styles.text_M }}>
-                    {products.data[0].name}
-                  </p>
-                  <p style={{ ...styles.text_white, ...styles.text_S }}>
-                    {products.data[0].date_added}
-                  </p>
-                </div>
+                <LowestStockWidget Products={lowest_stock_product.data} />
+                <RecentlyAddedWidget Products={products.data} />
               </div>
             </div>
           </div>

src/Routes/Logs/Logs.tsx

@@ -11,8 +11,49 @@ import {
 } from "@mui/material";
 import { SampleLogData } from "../../Components/SampleData/SampleData";
 import LoginChecker from "../../Components/LoginChecker/LoginChecker";
+import { useQuery } from "react-query";
+import { GetLogs, UserInfo } from "../../Components/Api/Api";
+import { OldSessionState, ProductLog } from "../../Interfaces/Interfaces";
+import { useState } from "react";
+import RowRenderer from "../../Components/LogsPage/RowRenderer/RowRenderer";
+import { useSelector } from "react-redux";
 
 export default function Logs() {
+  const logs = useQuery("logs", GetLogs, { retry: 0 });
+  const old_session_checked = useSelector(
+    (state: OldSessionState) => state.old_session_checked.value
+  );
+  if (logs.isLoading || !old_session_checked) {
+    return (
+      <div>
+        <LoginChecker />
+        <div style={styles.flex_row}>
+          <LogsIcon size={64} color="white" />
+          <p style={{ ...styles.text_white, ...styles.text_XL }}>Logs</p>
+        </div>
+        <div style={{ ...styles.content_column, ...{ alignItems: "center" } }}>
+          <p style={{ ...styles.text_white, ...styles.text_L }}>
+            Loading logs...
+          </p>
+        </div>
+      </div>
+    );
+  } else if (logs.error) {
+    return (
+      <div>
+        <LoginChecker />
+        <div style={styles.flex_row}>
+          <LogsIcon size={64} color="white" />
+          <p style={{ ...styles.text_white, ...styles.text_XL }}>Logs</p>
+        </div>
+        <div style={{ ...styles.content_column, ...{ alignItems: "center" } }}>
+          <p style={{ ...styles.text_red, ...styles.text_L }}>
+            Error loading logs
+          </p>
+        </div>
+      </div>
+    );
+  }
   return (
     <div>
       <LoginChecker />
@@ -39,7 +80,10 @@ export default function Logs() {
                 Product
               </TableCell>
               <TableCell style={{ ...styles.text_white, ...styles.text_M }}>
-                Amount Change
+                Quantity
+              </TableCell>
+              <TableCell style={{ ...styles.text_white, ...styles.text_M }}>
+                User
               </TableCell>
               <TableCell style={{ ...styles.text_white, ...styles.text_M }}>
                 Timestamp
@@ -47,34 +91,8 @@ export default function Logs() {
             </TableRow>
           </TableHead>
           <TableBody>
-            {SampleLogData.map((row) => (
-              <TableRow
-                key={row.id}
-                sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
-              >
-                <TableCell style={{ ...styles.text_white, ...styles.text_S }}>
-                  {row.id}
-                </TableCell>
-                <TableCell style={{ ...styles.text_white, ...styles.text_S }}>
-                  {row.p_id}
-                </TableCell>
-                <TableCell style={{ ...styles.text_white, ...styles.text_S }}>
-                  {row.p_name}
-                </TableCell>
-                <TableCell
-                  style={{
-                    ...{
-                      color: row.amount_changed < 0 ? "#a44141" : "#80b28a",
-                    },
-                    ...styles.text_S,
-                  }}
-                >
-                  {row.amount_changed}
-                </TableCell>
-                <TableCell style={{ ...styles.text_white, ...styles.text_S }}>
-                  {row.timestamp}
-                </TableCell>
-              </TableRow>
+            {logs.data.map((row: ProductLog, index: number) => (
+              <RowRenderer key={index} Product={row} />
             ))}
           </TableBody>
         </Table>

src/Routes/Product/Product.tsx

@@ -6,6 +6,8 @@ import LoginChecker from "../../Components/LoginChecker/LoginChecker";
 import { DeleteProduct, GetProduct } from "../../Components/Api/Api";
 import { useMutation, useQuery, useQueryClient } from "react-query";
 import ProductIcon from "../../Components/Icons/ProductIcon/ProductIcon";
+import { useSelector } from "react-redux";
+import { OldSessionState } from "../../Interfaces/Interfaces";
 
 export default function Product() {
   const navigate = useNavigate();
@@ -25,7 +27,10 @@ export default function Product() {
       queryClient.invalidateQueries("products");
     },
   });
-  if (isLoading) {
+  const old_session_checked = useSelector(
+    (state: OldSessionState) => state.old_session_checked.value
+  );
+  if (isLoading || !old_session_checked) {
     return (
       <div>
         <LoginChecker />

src/Routes/Products/Products.tsx

@@ -9,6 +9,8 @@ import ViewManager from "../../Components/ProductsPage/ViewManager";
 import { useQuery } from "react-query";
 import { GetProducts } from "../../Components/Api/Api";
 import LoginChecker from "../../Components/LoginChecker/LoginChecker";
+import { useSelector } from "react-redux";
+import { OldSessionState } from "../../Interfaces/Interfaces";
 
 export default function Products() {
   const navigate = useNavigate();
@@ -17,7 +19,10 @@ export default function Products() {
     isLoading,
     error,
   } = useQuery("products", GetProducts, { retry: 0 });
-  if (isLoading) {
+  const old_session_checked = useSelector(
+    (state: OldSessionState) => state.old_session_checked.value
+  );
+  if (isLoading || !old_session_checked) {
     return (
       <div>
         <LoginChecker />