Added add equipment modal

src/Pages/AddEquipmentInstancePage/AddEquipmentInstancePage.tsx

@@ -1,3 +0,0 @@
-export default function AddEquipmentInstancePage() {
-  return <div>{"AddEquipmentInstancePage"}</div>;
-}

src/Pages/AddEquipmentPage/AddEquipmentPage.tsx

@@ -1,3 +0,0 @@
-export default function AddEquipmentPage() {
-  return <div>{"AddEquipmentPage"}</div>;
-}

src/Pages/DashboardPage/DashboardPage.tsx

@@ -13,6 +13,9 @@ import NoteAddIcon from "@mui/icons-material/NoteAdd";
 import NoteIcon from "@mui/icons-material/Note";
 import { colors } from "../../styles";
 import { useNavigate } from "react-router-dom";
+import { useState } from "react";
+import AddSKUModal from "../../Components/AddSKUModal/AddSKUModal";
+import Popup from "reactjs-popup";
 export default function Dashboard() {
   const navigate = useNavigate();
 
@@ -30,6 +33,9 @@ export default function Dashboard() {
   });
   const isLoading = queries.some((result) => result.isLoading);
 
+  const [addSKUmodalOpen, SetAddSKUModalOpen] = useState(false);
+  const [additemmodalOpen, SetAddItemModalOpen] = useState(false);
+
   if (isLoading) {
     return (
       <div style={styles.background}>
@@ -306,7 +312,7 @@ export default function Dashboard() {
             },
           }}
           onClick={() => {
-            navigate("/add/equipment");
+            SetAddSKUModalOpen(true);
           }}
         >
           <NoteAddIcon
@@ -484,6 +490,25 @@ export default function Dashboard() {
           </p>
         </Button>
       </div>
+      <Popup
+        open={addSKUmodalOpen}
+        onClose={() => SetAddSKUModalOpen(false)}
+        modal
+        position={"top center"}
+        contentStyle={{
+          width: "512px",
+          borderRadius: 16,
+          borderColor: "grey",
+          borderStyle: "solid",
+          borderWidth: 1,
+          padding: 16,
+          alignContent: "center",
+          justifyContent: "center",
+          textAlign: "center",
+        }}
+      >
+        <AddSKUModal />
+      </Popup>
     </div>
   );
 }

src/Pages/LandingPage/LandingPage.tsx

@@ -36,9 +36,12 @@ export default function LandingPage() {
           width: "100%",
           minHeight: "100%",
           minWidth: "100%",
+          flexWrap: "wrap",
         }}
       >
-        <div style={{ maxWidth: "50%", height: "auto", flex: 1 }}>
+        <div
+          style={{ maxWidth: "50%", height: "auto", flex: 1, flexWrap: "wrap" }}
+        >
           <img style={{ maxWidth: "50%", height: "auto" }} src={citc_logo} />
         </div>
         <div
@@ -46,6 +49,7 @@ export default function LandingPage() {
             maxWidth: "50%",
             height: "auto",
             flex: 1,
+            flexWrap: "wrap",
           }}
         >
           <div