From 2412f268096db845a761221746ad5554a47cc257 Mon Sep 17 00:00:00 2001
From: "Pongot, Jophiel" <jophiel.telen@gmail.com>
Date: Wed, 10 Jan 2024 06:48:38 +0800
Subject: [PATCH] gibalhin ra nako

---
 .../EquipmentTallyPage/EquipmentTallyPage.tsx | 167 ++++++++++--------
 1 file changed, 94 insertions(+), 73 deletions(-)

diff --git a/src/Pages/EquipmentTallyPage/EquipmentTallyPage.tsx b/src/Pages/EquipmentTallyPage/EquipmentTallyPage.tsx
index f901683..14d2092 100644
--- a/src/Pages/EquipmentTallyPage/EquipmentTallyPage.tsx
+++ b/src/Pages/EquipmentTallyPage/EquipmentTallyPage.tsx
@@ -65,86 +65,95 @@ export default function EquipmentTallyPage() {
           width: "100%",
           minHeight: "100%",
           minWidth: "100%",
-          marginTop: "6rem"
+          marginTop: "6rem",
         }}
       >
-        <div
-          style={{ display: "flex", flexDirection: "row", alignSelf: "flex-start", marginLeft: " 5rem"}}
-        >
-          <div style={{
-            ...styles.flex_row,
-            ...{ alignItems: "center", justifySelf: "flex-start" },
-          }}>
-          <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>
-            )}
-          />
-          </div>
-          <div>
-          <p
-            style={{
-              ...styles.text_M,
-              ...styles.text_dark,
-              ...{ marginLeft: "4px" },
-            }}
-          >
-            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>
+        
         <div style={{ alignSelf: "flex-start", paddingLeft: "32px" }}></div>
         <TableContainer
           style={{ width: "90%", overflowY: "scroll", marginTop: "2rem" }}
           component={Paper}
         >
+          <div
+          style={{
+            display: "flex",
+            flexDirection: "row",
+          }}
+        >
+          <div
+            style={{
+              ...styles.flex_row,
+              ...{ alignItems: "center", justifySelf: "flex-start" },
+            }}
+          >
+            <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>
+              )}
+            />
+          </div>
+          <div>
+            <p
+              style={{
+                ...styles.text_M,
+                ...styles.text_dark,
+                ...{ marginLeft: "4px" },
+              }}
+            >
+              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>
           <Table sx={{ minWidth: "32rem" }} size="medium">
             <TableHead>
+              <TableRow></TableRow>
               <TableRow style={{ backgroundColor: colors.header_color }}>
                 <TableCell align="center" style={styles.text_light}>
                   ID
@@ -229,7 +238,13 @@ export default function EquipmentTallyPage() {
                               ).length
                             }
                           </p>
-                          <p style={{ ...styles.text_dark, ...styles.text_S, color: colors.red }}>
+                          <p
+                            style={{
+                              ...styles.text_dark,
+                              ...styles.text_S,
+                              color: colors.red,
+                            }}
+                          >
                             Broken: {"\n"}
                             {
                               equipment_instances.data?.filter(
@@ -240,7 +255,13 @@ export default function EquipmentTallyPage() {
                               ).length
                             }
                           </p>
-                          <div style={{ borderTop: "1px solid #000", minWidth: "40%", alignSelf: "center" }}>
+                          <div
+                            style={{
+                              borderTop: "1px solid #000",
+                              minWidth: "40%",
+                              alignSelf: "center",
+                            }}
+                          >
                             <p
                               style={{ ...styles.text_dark, ...styles.text_s }}
                             >