Added add equipment modal

src/App.tsx

@@ -12,8 +12,6 @@ import Revalidator from "./Components/Revalidator/Revalidator";
 import ActivationPage from "./Pages/ActivationPage/ActivationPage";
 import ResetPasswordPage from "./Pages/ResetPasswordPage/ResetPasswordPage";
 import EquipmentInstancesListPage from "./Pages/EquipmentInstancesListPage/EquipmentInstancesListPage";
-import AddEquipmentInstancePage from "./Pages/AddEquipmentInstancePage/AddEquipmentInstancePage";
-import AddEquipmentPage from "./Pages/AddEquipmentPage/AddEquipmentPage";
 
 const queryClient = new QueryClient();
 const router = createHashRouter([
@@ -47,26 +45,6 @@ const router = createHashRouter([
     ),
     errorElement: <ErrorPage />,
   },
-  {
-    path: "/add/equipment_instance",
-    element: (
-      <>
-        <Revalidator />
-        <AddEquipmentInstancePage />
-      </>
-    ),
-    errorElement: <ErrorPage />,
-  },
-  {
-    path: "/add/equipment",
-    element: (
-      <>
-        <Revalidator />
-        <AddEquipmentPage />
-      </>
-    ),
-    errorElement: <ErrorPage />,
-  },
   {
     path: "/activation/:uid/:token",
     element: (

src/Components/API/API.tsx

@@ -7,6 +7,8 @@ import {
   RegisterType,
   ResetPasswordConfirmType,
   EquipmentInstanceListType,
+  EquipmentType,
+  AddEquipmentType,
 } from "../Types/Types";
 
 const instance = axios.create({
@@ -171,6 +173,19 @@ export async function EquipmentsAPI() {
     });
 }
 
+export async function EquipmentCreateAPI(equipment: AddEquipmentType) {
+  const config = await GetConfig();
+  return instance
+    .post("api/v1/equipments/equipments/", equipment, config)
+    .then((response) => {
+      return [true, response.data as EquipmentType];
+    })
+    .catch((error) => {
+      console.log("Error creating equipment");
+      return [false, ParseError(error)];
+    });
+}
+
 export async function EquipmentInstancesAPI() {
   const config = await GetConfig();
   return instance

src/Components/AddSKUModal/AddSKUModal.tsx

@@ -0,0 +1,166 @@
+import { useState } from "react";
+import styles from "../../styles";
+import { colors } from "../../styles";
+import TextField from "@mui/material/TextField";
+import NoteAddIcon from "@mui/icons-material/NoteAdd";
+import Button from "../Button/Button";
+import { toast } from "react-toastify";
+import { EquipmentCreateAPI } from "../API/API";
+import RadioGroup from "@mui/material/RadioGroup";
+import FormControlLabel from "@mui/material/FormControlLabel";
+import FormControl from "@mui/material/FormControl";
+import FormLabel from "@mui/material/FormLabel";
+import Radio from "@mui/material/Radio";
+import { useQueryClient } from "@tanstack/react-query";
+
+export default function AddSKUModal() {
+  const queryClient = useQueryClient();
+  const [sku, setSKU] = useState({
+    name: "",
+    description: "",
+    category: "",
+  });
+  const [error, setError] = useState("");
+
+  return (
+    <>
+      <div
+        style={{
+          ...styles.flex_row,
+          ...{
+            alignItems: "center",
+            justifyContent: "center",
+            overflowY: "scroll",
+          },
+        }}
+      >
+        <NoteAddIcon
+          style={{
+            height: 64,
+            width: 64,
+            fill: colors.font_dark,
+          }}
+        />
+        <p style={{ ...styles.text_dark, ...styles.text_L }}>Add SKU</p>
+      </div>
+
+      <div style={styles.flex_column}>
+        <TextField
+          id="outlined-helperText"
+          label="SKU Name"
+          style={styles.input_form}
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+            setSKU({ ...sku, name: e.target.value });
+            setError("");
+          }}
+          value={sku.name}
+          placeholder={"Enter SKU name"}
+        />
+        <TextField
+          id="outlined-helperText"
+          label="Description"
+          multiline
+          style={styles.input_form}
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+            setSKU({ ...sku, description: e.target.value })
+          }
+          value={sku.description}
+          placeholder={"Give a brief description of the SKU"}
+        />
+        <FormControl style={{ marginTop: "8px" }}>
+          <FormLabel
+            style={styles.text_dark}
+            id="demo-radio-buttons-group-label"
+          >
+            Category
+          </FormLabel>
+          <RadioGroup
+            aria-labelledby="demo-radio-buttons-group-label"
+            defaultValue="female"
+            name="radio-buttons-group"
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+              setSKU({ ...sku, category: e.target.value });
+            }}
+          >
+            <div style={styles.flex_row}>
+              <div style={styles.flex_column}>
+                <FormControlLabel
+                  value="PC"
+                  control={<Radio />}
+                  label="Workstation"
+                  style={styles.text_dark}
+                />
+                <FormControlLabel
+                  value="NETWORKING"
+                  control={<Radio />}
+                  label="Networking"
+                  style={styles.text_dark}
+                />
+                <FormControlLabel
+                  value="CCTV"
+                  control={<Radio />}
+                  label="CCTV"
+                  style={styles.text_dark}
+                />
+              </div>
+              <div style={styles.flex_column}>
+                <FormControlLabel
+                  value="FURNITURE"
+                  control={<Radio />}
+                  label="Furniture"
+                  style={styles.text_dark}
+                />
+                <FormControlLabel
+                  value="PERIPHERALS"
+                  control={<Radio />}
+                  label="Peripherals"
+                  style={styles.text_dark}
+                />
+                <FormControlLabel
+                  value="MISC"
+                  control={<Radio />}
+                  label="Miscellaneous"
+                  style={styles.text_dark}
+                />
+              </div>
+            </div>
+          </RadioGroup>
+        </FormControl>
+      </div>
+      <p style={{ ...styles.text_dark, ...styles.text_M }}>{error}</p>
+      <div
+        style={{
+          backgroundColor: colors.button_border,
+          marginTop: "16px",
+          width: "100%",
+          height: "2px",
+          marginBottom: 8,
+        }}
+      />
+      <Button
+        type={"dark"}
+        label={"Add SKU"}
+        onClick={async () => {
+          const data = await EquipmentCreateAPI(sku);
+          if (data[0]) {
+            setError("Added successfully");
+            toast("New SKU added successfuly", {
+              position: "top-right",
+              autoClose: 2000,
+              hideProgressBar: false,
+              closeOnClick: true,
+              pauseOnHover: true,
+              draggable: true,
+              progress: undefined,
+              theme: "light",
+            });
+            queryClient.invalidateQueries({ queryKey: ["equipments"] });
+            setSKU({ name: "", description: "", category: "" });
+          } else {
+            setError(JSON.stringify(data));
+          }
+        }}
+      />
+    </>
+  );
+}

src/Components/Types/Types.tsx

@@ -24,7 +24,8 @@ export type ResetPasswordConfirmType = {
 
 export type AddEquipmentType = {
   name: string;
-  remarks: string;
+  description: string;
+  category?: string;
 };
 
 export type EquipmentType = {

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