Added initial add product page and redirect login page to dashboard if already logged in

src/App.tsx

@@ -11,6 +11,7 @@ import Inventory from "./Routes/Inventory/Inventory";
 import Login from "./Routes/Login/Login";
 import Product from "./Routes/Product/Product";
 import Activation from "./Routes/Activation/Activation";
+import AddProduct from "./Routes/AddProduct/AddProduct";
 
 const router = createBrowserRouter([
   {
@@ -74,6 +75,14 @@ const router = createBrowserRouter([
       </Container>
     ),
   },
+  {
+    path: "/AddProduct",
+    element: (
+      <Container>
+        <AddProduct />
+      </Container>
+    ),
+  },
 ]);
 
 export default function App() {

src/Routes/AddProduct/AddProduct.tsx

@@ -0,0 +1,44 @@
+import React, { useEffect } from "react";
+import styles from "../../styles";
+import { useNavigate } from "react-router-dom";
+import ProductsIcon from "../../Components/Icons/ProductsIcon/ProductsIcon";
+import AddIcon from "../../Components/Icons/AddIcon/AddIcon";
+import { Button } from "@mui/material";
+import { Navigate } from "react-router-dom";
+import { LoginState } from "../../Interfaces/Interfaces";
+import { useSelector } from "react-redux";
+
+export default function AddProduct() {
+  const navigate = useNavigate();
+  const logged_in = useSelector((state: LoginState) => state.logged_in.value);
+  if (!logged_in) {
+    return <Navigate to="/Login" replace />;
+  }
+  return (
+    <div>
+      <div style={styles.conter_center}>
+        <div style={{ ...styles.content_row, ...{ flex: 1 } }}>
+          <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
+            <AddIcon size={64} color="white" />
+            <h1 style={{ ...styles.text_white, ...styles.text_XL }}>
+              Add Product
+            </h1>
+          </div>
+          <div
+            style={{
+              ...styles.content_row,
+              ...{ justifyContent: "flex-end", flex: 1 },
+            }}
+          ></div>
+        </div>
+      </div>
+      <Button
+        onClick={() => navigate("/Products/AddProduct")}
+        style={styles.button_add_product}
+      >
+        <AddIcon size={32} color="white" />
+        <p style={{ ...styles.text_white, ...styles.text_M }}>Add Product</p>
+      </Button>
+    </div>
+  );
+}

src/Routes/Login/Login.tsx

@@ -5,6 +5,9 @@ import { Button } from "@mui/material";
 import { useDispatch } from "react-redux";
 import { useNavigate } from "react-router-dom";
 import { useState } from "react";
+import { Navigate } from "react-router-dom";
+import { LoginState } from "../../Interfaces/Interfaces";
+import { useSelector } from "react-redux";
 
 import { UserInfo, UserLogin } from "../../Components/Api/Api";
 import { toggle_login } from "../../Features/Redux/Slices/Login/LoginSlice";
@@ -18,6 +21,10 @@ export default function Login() {
     password: "",
   });
   const [error, setError] = useState("");
+  const logged_in = useSelector((state: LoginState) => state.logged_in.value);
+  if (logged_in) {
+    return <Navigate to="/" replace />;
+  }
   return (
     <div>
       <div

src/Routes/Products/Products.tsx

@@ -33,7 +33,7 @@ export default function Products() {
             }}
           >
             <Button
-              onClick={() => navigate("/Products/AddProduct")}
+              onClick={() => navigate("/AddProduct")}
               style={styles.button_add_product}
             >
               <AddIcon size={32} color="white" />