Borrowing-TrackerFrontend/src/Components/DashboardPage/TechnicianButtons.tsx

import { useQueries } from "@tanstack/react-query";
import styles from "../../styles";
import { EquipmentsAPI, EquipmentInstancesAPI, UserAPI } from "../API/API";
import { useNavigate } from "react-router-dom";
import { Button } from "@mui/material";
import FormatListBulletedIcon from "@mui/icons-material/FormatListBulleted";
import AddToQueueIcon from "@mui/icons-material/AddToQueue";
import NoteAddIcon from "@mui/icons-material/NoteAdd";
import NoteIcon from "@mui/icons-material/Note";
import { colors } from "../../styles";
import ScienceIcon from "@mui/icons-material/Science";
import ColorizeIcon from "@mui/icons-material/Colorize";
import Popup from "reactjs-popup";
import AddItemModal from "../AddItemModal/AddItemModal";
import AddSKUModal from "../AddSKUModal/AddSKUModal";
import { useState } from "react";
export default function TechnicianButtons() {
  const [addSKUmodalOpen, SetAddSKUModalOpen] = useState(false);
  const [additemmodalOpen, SetAddItemModalOpen] = useState(false);
  const navigate = useNavigate();
  const queries = useQueries({
    queries: [
      {
        queryKey: ["equipments"],
        queryFn: EquipmentsAPI,
      },
      {
        queryKey: ["equipment_instances"],
        queryFn: EquipmentInstancesAPI,
      },
      {
        queryKey: ["user"],
        queryFn: UserAPI,
      },
    ],
  });
  return (
    <>
      <p
        style={{
          ...styles.text_dark,
          ...styles.text_L,
        }}
      >
        Equipments
      </p>
      <div
        style={{
          ...styles.flex_row,
          ...{
            alignSelf: "center",
            justifyContent: "center",
            flexWrap: "wrap",
          },
        }}
      >
        <Button
          style={{
            ...styles.flex_column,
            ...{
              alignSelf: "center",
              justifyContent: "center",
              flexWrap: "wrap",
              display:
                queries[2].data && queries[2].data.is_technician
                  ? "initial"
                  : "none",
            },
          }}
          onClick={() => {
            navigate("/view/equipment_instances");
          }}
        >
          <FormatListBulletedIcon
            style={{
              height: 64,
              width: 64,
              fill: colors.font_dark,
              marginLeft: "1rem",
              marginRight: "1rem",
            }}
          />
          <p
            style={{
              ...styles.text_dark,
              ...styles.text_M,
            }}
          >
            View All
          </p>
        </Button>
        <Button
          style={{
            ...styles.flex_column,
            ...{
              alignSelf: "center",
              justifyContent: "center",
              flexWrap: "wrap",
            },
          }}
          onClick={() => {
            SetAddItemModalOpen(true);
          }}
        >
          <AddToQueueIcon
            style={{
              height: 64,
              width: 64,
              fill: colors.font_dark,
              marginLeft: "1rem",
              marginRight: "1rem",
            }}
          />
          <p
            style={{
              ...styles.text_dark,
              ...styles.text_M,
            }}
          >
            Add Item
          </p>
        </Button>
        <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>
        <Button
          style={{
            ...styles.flex_column,
            ...{
              alignSelf: "center",
              justifyContent: "center",
              flexWrap: "wrap",
            },
          }}
          onClick={() => {
            navigate("/view/equipments");
          }}
        >
          <NoteIcon
            style={{
              height: 64,
              width: 64,
              fill: colors.font_dark,
              marginLeft: "1rem",
              marginRight: "1rem",
            }}
          />
          <p
            style={{
              ...styles.text_dark,
              ...styles.text_M,
            }}
          >
            View SKUs
          </p>
        </Button>
      </div>
      <div
        style={{
          ...styles.flex_row,
          ...{
            alignSelf: "center",
            justifyContent: "center",
            flexWrap: "wrap",
          },
        }}
      >
        <Button
          style={{
            ...styles.flex_column,
            ...{
              alignSelf: "center",
              justifyContent: "center",
              flexWrap: "wrap",
            },
          }}
        >
          <ScienceIcon
            style={{
              height: 64,
              width: 64,
              fill: colors.font_dark,
              marginLeft: "1rem",
              marginRight: "1rem",
            }}
            onClick={() => {
              navigate("/view/equipment_instances/filter/Glassware");
            }}
          />
          <p
            style={{
              ...styles.text_dark,
              ...styles.text_M,
            }}
          >
            Glassware
          </p>
        </Button>
        <Button
          style={{
            ...styles.flex_column,
            ...{
              alignSelf: "center",
              justifyContent: "center",
              flexWrap: "wrap",
            },
          }}
        >
          <ColorizeIcon
            style={{
              height: 64,
              width: 64,
              fill: colors.font_dark,
              marginLeft: "1rem",
              marginRight: "1rem",
            }}
            onClick={() => {
              navigate("/view/equipment_instances/filter/Miscellaneous");
            }}
          />
          <p
            style={{
              ...styles.text_dark,
              ...styles.text_M,
            }}
          >
            Miscellaneous
          </p>
        </Button>
      </div>
      <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>
      <Popup
        open={additemmodalOpen}
        onClose={() => SetAddItemModalOpen(false)}
        modal
        position={"top center"}
        contentStyle={{
          width: "32rem",
          borderRadius: 16,
          borderColor: "grey",
          borderStyle: "solid",
          borderWidth: 1,
          padding: 16,
          alignContent: "center",
          justifyContent: "center",
          textAlign: "center",
        }}
      >
        <AddItemModal />
      </Popup>
    </>
  );
}