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

import { useQueries } from "@tanstack/react-query";
import styles from "../../styles";
import { EquipmentsAPI, EquipmentInstancesAPI, UserAPI } from "../API/API";

export default function TechnicianWidgets() {
  const queries = useQueries({
    queries: [
      {
        queryKey: ["equipments"],
        queryFn: EquipmentsAPI,
      },
      {
        queryKey: ["equipment_instances"],
        queryFn: EquipmentInstancesAPI,
      },
      {
        queryKey: ["user"],
        queryFn: UserAPI,
      },
    ],
  });
  return (
    <div style={styles.flex_column}>
      <div
        style={{
          ...styles.flex_row,
          ...{
            alignSelf: "center",
            justifyContent: "center",
            flexWrap: "wrap",
          },
        }}
      >
        <div
          style={{
            paddingLeft: "16px",
            paddingRight: "16px",
            margin: "16px",
            borderRadius: 16,
            backgroundColor: "#a6a6a6",
            alignSelf: "center",
            justifyContent: "center",
            width: "16rem",
          }}
        >
          <p
            style={{
              ...styles.text_dark,
              ...styles.text_M,
              ...{ float: "left", position: "absolute" },
            }}
          >
            SKUs in Database
          </p>

          <p
            style={{
              ...styles.text_dark,
              ...styles.text_L,
            }}
          >
            {queries[0].data ? queries[0].data.length : 0}
          </p>
        </div>
        <div
          style={{
            paddingLeft: "16px",
            paddingRight: "16px",
            margin: "16px",
            borderRadius: 16,
            backgroundColor: "#a6a6a6",
            alignSelf: "center",
            justifyContent: "center",
            width: "16rem",
          }}
        >
          <p
            style={{
              ...styles.text_dark,
              ...styles.text_M,
              ...{ float: "left", position: "absolute" },
            }}
          >
            Items in Database
          </p>

          <p
            style={{
              ...styles.text_dark,
              ...styles.text_L,
            }}
          >
            {queries[1].data ? queries[1].data.length : 0}
          </p>
        </div>
      </div>
      <div
        style={{
          ...styles.flex_row,
          ...{
            alignSelf: "center",
            justifyContent: "center",
            flexWrap: "wrap",
          },
        }}
      >
        <div
          style={{
            paddingLeft: "16px",
            paddingRight: "16px",
            margin: "16px",
            borderRadius: 16,
            backgroundColor: "#a6a6a6",
            alignSelf: "center",
            justifyContent: "center",
            width: "16rem",
          }}
        >
          <p
            style={{
              ...styles.text_dark,
              ...styles.text_M,
              ...{ float: "left", position: "absolute" },
            }}
          >
            Functional Items
          </p>

          <p
            style={{
              ...styles.text_dark,
              ...styles.text_L,
            }}
          >
            {queries[1].data
              ? queries[1].data.filter(
                  (equipment) => equipment.status == "WORKING"
                ).length
              : 0}
          </p>
        </div>
        <div
          style={{
            paddingLeft: "16px",
            paddingRight: "16px",
            margin: "16px",
            borderRadius: 16,
            backgroundColor: "#a6a6a6",
            alignSelf: "center",
            justifyContent: "center",
            width: "16rem",
          }}
        >
          <p
            style={{
              ...styles.text_dark,
              ...styles.text_M,
              ...{ float: "left", position: "absolute" },
            }}
          >
            Broken Items
          </p>

          <p
            style={{
              ...styles.text_dark,
              ...styles.text_L,
            }}
          >
            {queries[1].data
              ? queries[1].data.filter(
                  (equipment) => equipment.status == "BROKEN"
                ).length
              : 0}
          </p>
        </div>
      </div>
    </div>
  );
}