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

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

export default function TechnicianWidgets() {
  const todayStartOfDay = moment().startOf("day").format("MM-DD-YYYY hh:mm A");
  const todayEndOfDay = moment().endOf("day").format("MM-DD-YYYY hh:mm A");
  const thisMonthStart = moment().startOf("month").format("MM-DD-YYYY hh:mm A");
  const thisMonthEnd = moment().endOf("month").format("MM-DD-YYYY hh:mm A");
  const queries = useQueries({
    queries: [
      {
        queryKey: ["equipments"],
        queryFn: EquipmentsAPI,
      },
      {
        queryKey: ["equipment_instances"],
        queryFn: EquipmentInstancesAPI,
      },
      {
        queryKey: ["user"],
        queryFn: UserAPI,
      },
      {
        queryKey: ["transactions"],
        queryFn: TransactionsAPI,
      },
    ],
  });
  const isLoading = queries.some((result) => result.isLoading);
  if (isLoading) {
    return (
      <>
        <CircularProgress style={{ height: "128px", width: "128px" }} />
        <p
          style={{
            ...styles.text_dark,
            ...styles.text_L,
          }}
        >
          Loading
        </p>
      </>
    );
  }
  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" },
            }}
          >
            Pending Equipments
          </p>

          <p
            style={{
              ...styles.text_dark,
              ...styles.text_L,
            }}
          >
            {queries[1].data?.filter(
              (equipment) => equipment.status == "Pending"
            ).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" },
            }}
          >
            Equipments in Inventory
          </p>

          <p
            style={{
              ...styles.text_dark,
              ...styles.text_L,
            }}
          >
            {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" },
            }}
          >
            Available Equipments
          </p>

          <p
            style={{
              ...styles.text_dark,
              ...styles.text_L,
            }}
          >
            {queries[1].data?.filter(
              (equipment) => equipment.status == "Available"
            ).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 Equipments
          </p>

          <p
            style={{
              ...styles.text_dark,
              ...styles.text_L,
            }}
          >
            {queries[1].data?.filter(
              (equipment) => equipment.status == "Broken"
            ).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" },
            }}
          >
            Total Transactions Today
          </p>

          <p
            style={{
              ...styles.text_dark,
              ...styles.text_L,
            }}
          >
            {queries[3].data?.filter((transaction) =>
              moment(transaction.timestamp, "MM-DD-YYYY hh:mm A").isBetween(
                todayStartOfDay,
                todayEndOfDay
              )
            ).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" },
            }}
          >
            Total Transactions this Month
          </p>

          <p
            style={{
              ...styles.text_dark,
              ...styles.text_L,
            }}
          >
            {queries[3].data?.filter((transaction) =>
              moment(transaction.timestamp, "MM-DD-YYYY hh:mm A").isBetween(
                thisMonthStart,
                thisMonthEnd
              )
            ).length || 0}
          </p>
        </div>
      </div>
    </div>
  );
}