Borrowing-TrackerFrontend/src/Pages/EquipmentListPage/EquipmentListPage.tsx

import { useQuery } from "@tanstack/react-query";
import Header from "../../Components/Header/Header";
import styles from "../../styles";
import { EquipmentsAPI } from "../../Components/API/API";
import { CircularProgress } from "@mui/material";
import Table from "@mui/material/Table";
import TableBody from "@mui/material/TableBody";
import TableCell from "@mui/material/TableCell";
import TableContainer from "@mui/material/TableContainer";
import TableHead from "@mui/material/TableHead";
import TableRow from "@mui/material/TableRow";
import Paper from "@mui/material/Paper";
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,
  });
  if (equipments.isLoading) {
    return (
      <div style={styles.background}>
        <Header label={"Dashboard"} />
        <div
          style={{
            ...styles.flex_column,
            ...{
              alignItems: "center",
              justifyContent: "center",
              paddingTop: "64px",
            },
          }}
        >
          <CircularProgress style={{ height: "128px", width: "128px" }} />
          <p
            style={{
              ...styles.text_dark,
              ...styles.text_L,
            }}
          >
            Loading
          </p>
        </div>
      </div>
    );
  }
  return (
    <div style={styles.background}>
      <Header label={"SKU List"} />
      <div
        style={{
          ...styles.flex_column,
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          height: "80%",
          width: "100%",
          minHeight: "80%",
          minWidth: "100%",
        }}>

        <div style={{width: "90%", marginTop: "3rem"}}>
          <Button
              style={{
                ...styles.flex_column,
                ...{
                  alignSelf: "flex-start",
                  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>
          </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>

        <TableContainer
          style={{ width: "90%", overflowY: "scroll", marginTop: "2rem" }}
          component={Paper}
        >
          <Table sx={{ minWidth: "32rem" }} size="medium">
            <TableHead>
              <TableRow style={{ backgroundColor: colors.header_color }}>
                <TableCell align="center" style={styles.text_light}>
                  ID
                </TableCell>
                <TableCell align="center" style={styles.text_light}>
                  Name
                </TableCell>
                <TableCell align="center" style={styles.text_light}>
                  Description
                </TableCell>
                <TableCell align="center" style={styles.text_light}>
                  Category
                </TableCell>
                <TableCell align="center" style={styles.text_light}>
                  Last Modified
                </TableCell>
              </TableRow>
            </TableHead>
            <TableBody>
              {equipments.data ? (
                equipments.data.map((equipment) => (
                  <TableRow
                    key={equipment.id}
                    sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
                    onClick={() => {
                      SetSelectedItem(equipment.id);
                      SetEditModalOpen(true);
                    }}
                  >
                    <TableCell align="center" component="th" scope="row">
                      {equipment.id}
                    </TableCell>
                    <TableCell align="center" component="th" scope="row">
                      {equipment.name}
                    </TableCell>

                    <TableCell align="center" component="th" scope="row">
                      {equipment.description}
                    </TableCell>
                    <TableCell align="center" component="th" scope="row">
                      {equipment.category}
                    </TableCell>
                    <TableCell align="right">
                      <div
                        style={{
                          ...styles.flex_column,
                          ...{ alignItems: "center" },
                        }}
                      >
                        <div>{equipment.last_updated}</div>
                        <div>
                          {equipment.last_updated_by
                            ? "by " + equipment.last_updated_by
                            : ""}
                        </div>
                      </div>
                    </TableCell>
                  </TableRow>
                ))
              ) : (
                <></>
              )}
            </TableBody>
          </Table>
        </TableContainer>
      </div>
      <Popup
        open={editmodalOpen}
        onClose={() => SetEditModalOpen(false)}
        modal
        position={"top center"}
        contentStyle={styles.popup_center}
      >
        <EditSKUModal id={selectedItem} setOpen={SetEditModalOpen} />
      </Popup>
    </div>
  );
}