Polished empty inventory page

src/Components/InventoryPage/RowRenderer/RowRenderer.tsx

@@ -5,21 +5,6 @@ import { TableBody, TableRow, TableCell } from "@mui/material";
 import StockRenderer from "../StockRenderer/StockRenderer";
 
 export default function RowRenderer(props: ProductList) {
-  if (props.Products.length === 0) {
-    return (
-      <div
-        style={{
-          alignItems: "center",
-          justifyContent: "center",
-          marginLeft: 12,
-        }}
-      >
-        <p style={{ ...styles.text_white, ...styles.text_L }}>
-          No products yet. Add one!
-        </p>
-      </div>
-    );
-  }
   return (
     <TableBody>
       {props.Products.map((row) => (

src/routes/Inventory/Inventory.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import styles from "../../styles";
 import InventoryIcon from "../../Components/Icons/InventoryIcon/InventoryIcon";
 import {
+  Button,
   Table,
   TableBody,
   TableCell,
@@ -15,6 +16,8 @@ import LoginChecker from "../../Components/LoginChecker/LoginChecker";
 import { GetProducts, UpdateProduct } from "../../Components/Api/Api";
 import { useMutation, useQuery, useQueryClient } from "react-query";
 import RowRenderer from "../../Components/InventoryPage/RowRenderer/RowRenderer";
+import AddIcon from "../../Components/Icons/AddIcon/AddIcon";
+import { useNavigate } from "react-router-dom";
 
 export default function Inventory() {
   const {
@@ -22,6 +25,7 @@ export default function Inventory() {
     isLoading,
     error,
   } = useQuery("products", GetProducts, { retry: 0 });
+  const navigate = useNavigate();
 
   if (isLoading) {
     return (
@@ -64,6 +68,36 @@ export default function Inventory() {
         </div>
       </div>
     );
+  } else if (products.length === 0) {
+    return (
+      <div style={{ height: "100%" }}>
+        <LoginChecker />
+        <div style={styles.content_row}>
+          <InventoryIcon size={64} color="white" />
+          <p style={{ ...styles.text_white, ...styles.text_XL }}>Inventory</p>
+        </div>
+        <div style={{ ...styles.content_column, ...{ alignItems: "center" } }}>
+          <p
+            style={{
+              ...styles.text_white,
+              ...styles.text_L,
+              ...{ marginLeft: 16 },
+            }}
+          >
+            No products yet. Add one!
+          </p>
+          <Button
+            onClick={() => navigate("/NewProduct")}
+            style={styles.button_add_product}
+          >
+            <AddIcon size={32} color="white" />
+            <p style={{ ...styles.text_white, ...styles.text_M }}>
+              Add Product
+            </p>
+          </Button>
+        </div>
+      </div>
+    );
   }
   return (
     <div style={{ height: "100%" }}>