From e589588d8ce016b36b5956b2af0d77a6a1e96c2e Mon Sep 17 00:00:00 2001
From: Keannu Bernasol <noehbernasol0@gmail.com>
Date: Sun, 7 Jan 2024 12:28:06 +0800
Subject: [PATCH] Fix equipment tally page

---
 .../Technician/TechnicianWidgets.tsx          |   6 +-
 .../EquipmentTallyPage/EquipmentTallyPage.tsx | 130 +++++++++---------
 2 files changed, 67 insertions(+), 69 deletions(-)

diff --git a/src/Components/DashboardPage/Technician/TechnicianWidgets.tsx b/src/Components/DashboardPage/Technician/TechnicianWidgets.tsx
index 188ea7d..65726b0 100644
--- a/src/Components/DashboardPage/Technician/TechnicianWidgets.tsx
+++ b/src/Components/DashboardPage/Technician/TechnicianWidgets.tsx
@@ -38,14 +38,16 @@ export default function TechnicianWidgets() {
   if (isLoading) {
     return (
       <>
-        <CircularProgress style={{ height: "128px", width: "128px" }} />
+        <CircularProgress
+          style={{ marginTop: "8px", height: "128px", width: "128px" }}
+        />
         <p
           style={{
             ...styles.text_dark,
             ...styles.text_L,
           }}
         >
-          Loading
+          Loading widgets...
         </p>
       </>
     );
diff --git a/src/Pages/EquipmentTallyPage/EquipmentTallyPage.tsx b/src/Pages/EquipmentTallyPage/EquipmentTallyPage.tsx
index 6e703ab..51101bc 100644
--- a/src/Pages/EquipmentTallyPage/EquipmentTallyPage.tsx
+++ b/src/Pages/EquipmentTallyPage/EquipmentTallyPage.tsx
@@ -65,79 +65,75 @@ export default function EquipmentTallyPage() {
           width: "100%",
           minHeight: "100%",
           minWidth: "100%",
-          flexWrap: "wrap",
         }}
       >
-        <div style={{ alignSelf: "flex-start", paddingLeft: "32px" }}>
-          <div
+        <div
+          style={{
+            ...styles.flex_row,
+            ...{ alignItems: "center", justifySelf: "flex-start" },
+          }}
+        >
+          <SearchIcon
             style={{
-              ...styles.flex_row,
-              ...{ alignItems: "center", justifySelf: "flex-start" },
+              height: 32,
+              width: 32,
+              fill: colors.font_dark,
+              marginLeft: "1rem",
+              marginRight: "1rem",
+            }}
+          />
+          <Autocomplete
+            sx={{
+              display: "inline-block",
+              "& input": {
+                width: "256x",
+                bgcolor: "background.paper",
+                color: (theme) =>
+                  theme.palette.getContrastText(theme.palette.background.paper),
+              },
+            }}
+            value={filter}
+            onChange={(_event, newValue) => {
+              setFilter(newValue);
+            }}
+            freeSolo
+            id="custom-input-demo"
+            options={["Glassware", "Miscellaneous"]}
+            renderInput={(params) => (
+              <div ref={params.InputProps.ref}>
+                <input type="text" {...params.inputProps} />
+              </div>
+            )}
+          />
+          <p
+            style={{
+              ...styles.text_M,
+              ...styles.text_dark,
+              ...{ marginLeft: "4px" },
             }}
           >
-            <SearchIcon
-              style={{
-                height: 32,
-                width: 32,
-                fill: colors.font_dark,
-                marginLeft: "1rem",
-                marginRight: "1rem",
-              }}
-            />
-            <Autocomplete
-              sx={{
-                display: "inline-block",
-                "& input": {
-                  width: "256x",
-                  bgcolor: "background.paper",
-                  color: (theme) =>
-                    theme.palette.getContrastText(
-                      theme.palette.background.paper
-                    ),
-                },
-              }}
-              value={filter}
-              onChange={(_event, newValue) => {
-                setFilter(newValue);
-              }}
-              freeSolo
-              id="custom-input-demo"
-              options={["Glassware", "Miscellaneous"]}
-              renderInput={(params) => (
-                <div ref={params.InputProps.ref}>
-                  <input type="text" {...params.inputProps} />
-                </div>
-              )}
-            />
-            <p
-              style={{
-                ...styles.text_M,
-                ...styles.text_dark,
-                ...{ marginLeft: "4px" },
-              }}
-            >
-              Results Found:{" "}
-              {
-                equipments?.data?.filter((equipment) =>
-                  filter !== null
-                    ? // If filter is not null, we filter if it matches any criteria
-                      equipment.name
-                        .toLowerCase()
-                        .includes(filter.toLowerCase()) ||
-                      equipment.category
-                        .toLowerCase()
-                        .includes(filter.toLowerCase()) ||
-                      equipment.last_updated
-                        .toLowerCase()
-                        .includes(filter?.toLowerCase()) ||
-                      equipment.category.toLowerCase() == filter.toLowerCase()
-                    : // If filter keyword is null then we just pass through everything as if we did not filter at all
-                      true
-                ).length
-              }
-            </p>
-          </div>
+            Results Found:{" "}
+            {
+              equipment_instances?.data?.filter((equipment) =>
+                filter !== null
+                  ? // If filter is not null, we filter if it matches any criteria
+                    equipment.equipment_name
+                      .toLowerCase()
+                      .includes(filter.toLowerCase()) ||
+                    equipment.category
+                      .toLowerCase()
+                      .includes(filter.toLowerCase()) ||
+                    equipment.last_updated
+                      .toLowerCase()
+                      .includes(filter?.toLowerCase()) ||
+                    equipment.status.toLowerCase() == filter.toLowerCase()
+                  : // If filter keyword is null then we just pass through everything as if we did not filter at all
+                    true
+              ).length
+            }
+          </p>
         </div>
+        <div style={{ alignSelf: "flex-start", paddingLeft: "32px" }}></div>
         <TableContainer
           style={{ width: "90%", overflowY: "scroll", marginTop: "2rem" }}
           component={Paper}