From 675a1f0716fff2dba43e36b44ca766c8d120c67a Mon Sep 17 00:00:00 2001
From: psofia <psofiadara@gmail.com>
Date: Sat, 6 Jan 2024 15:40:12 +0800
Subject: [PATCH] transferred skus

---
 .../Technician/TechnicianEquipmentButtons.tsx |  8 +--
 .../EquipmentListPage/EquipmentListPage.tsx   | 62 +++++++++++++++++++
 2 files changed, 66 insertions(+), 4 deletions(-)

diff --git a/src/Components/DashboardPage/Technician/TechnicianEquipmentButtons.tsx b/src/Components/DashboardPage/Technician/TechnicianEquipmentButtons.tsx
index 27225da..c944e3a 100644
--- a/src/Components/DashboardPage/Technician/TechnicianEquipmentButtons.tsx
+++ b/src/Components/DashboardPage/Technician/TechnicianEquipmentButtons.tsx
@@ -99,7 +99,7 @@ export default function TechnicianEquipmentButtons() {
             Add Item
           </p>
         </Button> */}
-        <Button
+        {/* <Button
           style={{
             ...styles.flex_column,
             ...{
@@ -129,7 +129,7 @@ export default function TechnicianEquipmentButtons() {
           >
             Add SKU
           </p>
-        </Button>
+        </Button> */}
         <Button
           style={{
             ...styles.flex_column,
@@ -267,7 +267,7 @@ export default function TechnicianEquipmentButtons() {
           </p>
         </Button> */}
       </div>
-      <Popup
+      {/* <Popup
         open={addSKUmodalOpen}
         onClose={() => SetAddSKUModalOpen(false)}
         modal
@@ -285,7 +285,7 @@ export default function TechnicianEquipmentButtons() {
         }}
       >
         <AddSKUModal />
-      </Popup>
+      </Popup> */}
       {/* <Popup
         open={additemmodalOpen}
         onClose={() => SetAddItemModalOpen(false)}
diff --git a/src/Pages/EquipmentListPage/EquipmentListPage.tsx b/src/Pages/EquipmentListPage/EquipmentListPage.tsx
index 69054b8..332c297 100644
--- a/src/Pages/EquipmentListPage/EquipmentListPage.tsx
+++ b/src/Pages/EquipmentListPage/EquipmentListPage.tsx
@@ -14,10 +14,16 @@ import { colors } from "../../styles";
 import EditSKUModal from "../../Components/EditSKUModal/EditSKUModal";
 import Popup from "reactjs-popup";
 import { useState } from "react";
+import NoteAddIcon from "@mui/icons-material/NoteAdd";
+import { Button } from "@mui/material";
+import AddSKUModal from "../../Components/AddSKUModal/AddSKUModal";
+
 
 export default function EquipmentListPage() {
   const [editmodalOpen, SetEditModalOpen] = useState(false);
   const [selectedItem, SetSelectedItem] = useState(0);
+  const [addSKUmodalOpen, SetAddSKUModalOpen] = useState(false);
+
   const equipments = useQuery({
     queryKey: ["equipments"],
     queryFn: EquipmentsAPI,
@@ -64,7 +70,63 @@ export default function EquipmentListPage() {
           minWidth: "100%",
           flexWrap: "wrap",
         }}
+
+
       >
+
+      <Button
+          style={{
+            ...styles.flex_column,
+            ...{
+              alignSelf: "center",
+              justifyContent: "center",
+              flexWrap: "wrap",
+            },
+          }}
+          onClick={() => {
+            SetAddSKUModalOpen(true);
+          }}
+        >
+          <NoteAddIcon
+            style={{
+              height: 64,
+              width: 64,
+              fill: colors.font_dark,
+              marginLeft: "1rem",
+              marginRight: "1rem",
+            }}
+          />
+          <p
+            style={{
+              ...styles.text_dark,
+              ...styles.text_M,
+            }}
+          >
+            Add SKU
+          </p>
+        </Button>
+
+
+        <Popup
+        open={addSKUmodalOpen}
+        onClose={() => SetAddSKUModalOpen(false)}
+        modal
+        position={"top center"}
+        contentStyle={{
+          width: "32rem",
+          borderRadius: 16,
+          borderColor: "grey",
+          borderStyle: "solid",
+          borderWidth: 1,
+          padding: 16,
+          alignContent: "center",
+          justifyContent: "center",
+          textAlign: "center",
+        }}
+      >
+        <AddSKUModal />
+      </Popup>
+
         <TableContainer
           style={{ width: "90%", overflowY: "scroll", marginTop: "2rem" }}
           component={Paper}