From 0d32ce61cbfc3f00b7c4280d2af222f8cb3f7f05 Mon Sep 17 00:00:00 2001
From: Keannu Bernasol <noehbernasol0@gmail.com>
Date: Fri, 5 Jan 2024 19:27:42 +0800
Subject: [PATCH] Added item tally page for technician

---
 src/App.tsx                                   |  12 +
 .../Technician/TechnicianLogButtons.tsx       |  32 +++
 .../EquipmentTallyPage/EquipmentTallyPage.tsx | 216 ++++++++++++++++++
 3 files changed, 260 insertions(+)
 create mode 100644 src/Pages/EquipmentTallyPage/EquipmentTallyPage.tsx

diff --git a/src/App.tsx b/src/App.tsx
index bcb12a2..1c9d477 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -20,6 +20,7 @@ import RestrictedPage from "./Components/RestrictedPage/RestrictedPage";
 import TransactionsListPage from "./Pages/TransactionsListPage/TransactionsListPage";
 import AddTransactionPage from "./Pages/AddTransactionPage/AddTransactionPage";
 import TransactionPage from "./Pages/TransactionPage/TransactionPage";
+import EquipmentInstanceTallyPage from "./Pages/EquipmentTallyPage/EquipmentTallyPage";
 
 const queryClient = new QueryClient();
 const router = createHashRouter([
@@ -54,6 +55,17 @@ const router = createHashRouter([
     ),
     errorElement: <ErrorPage />,
   },
+  {
+    path: "/view/equipments/tally",
+    element: (
+      <>
+        <Revalidator />
+        <RestrictedPage allow_only="Technician" />
+        <EquipmentInstanceTallyPage />
+      </>
+    ),
+    errorElement: <ErrorPage />,
+  },
   {
     path: "/view/equipment_instances/filter/:filter_by",
     element: (
diff --git a/src/Components/DashboardPage/Technician/TechnicianLogButtons.tsx b/src/Components/DashboardPage/Technician/TechnicianLogButtons.tsx
index 2b7d4cf..fc52813 100644
--- a/src/Components/DashboardPage/Technician/TechnicianLogButtons.tsx
+++ b/src/Components/DashboardPage/Technician/TechnicianLogButtons.tsx
@@ -1,6 +1,7 @@
 import { Button } from "@mui/material";
 import { useNavigate } from "react-router-dom";
 import ManageSearchIcon from "@mui/icons-material/ManageSearch";
+import CountertopsIcon from "@mui/icons-material/Countertops";
 import styles from "../../../styles";
 import { colors } from "../../../styles";
 
@@ -57,6 +58,37 @@ export default function TechnicianLogButtons() {
             SKU Logs
           </p>
         </Button>
+        <Button
+          style={{
+            ...styles.flex_column,
+            ...{
+              alignSelf: "center",
+              justifyContent: "center",
+              flexWrap: "wrap",
+            },
+          }}
+          onClick={() => {
+            navigate("/view/equipments/tally");
+          }}
+        >
+          <CountertopsIcon
+            style={{
+              height: 64,
+              width: 64,
+              fill: colors.font_dark,
+              marginLeft: "1rem",
+              marginRight: "1rem",
+            }}
+          />
+          <p
+            style={{
+              ...styles.text_dark,
+              ...styles.text_M,
+            }}
+          >
+            Item Tally
+          </p>
+        </Button>
         <Button
           style={{
             ...styles.flex_column,
diff --git a/src/Pages/EquipmentTallyPage/EquipmentTallyPage.tsx b/src/Pages/EquipmentTallyPage/EquipmentTallyPage.tsx
new file mode 100644
index 0000000..91ce1ef
--- /dev/null
+++ b/src/Pages/EquipmentTallyPage/EquipmentTallyPage.tsx
@@ -0,0 +1,216 @@
+import { useQuery } from "@tanstack/react-query";
+import Header from "../../Components/Header/Header";
+import styles from "../../styles";
+import { EquipmentInstancesAPI, 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 { useState } from "react";
+import Autocomplete from "@mui/material/Autocomplete";
+import SearchIcon from "@mui/icons-material/Search";
+
+export default function EquipmentTallyPage() {
+  const equipment_instances = useQuery({
+    queryKey: ["equipment_instances"],
+    queryFn: EquipmentInstancesAPI,
+  });
+  const equipments = useQuery({
+    queryKey: ["equipments"],
+    queryFn: EquipmentsAPI,
+  });
+  const [filter, setFilter] = useState<string | null>(null);
+  if (equipment_instances.isLoading || 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={"Items Tally"} />
+      <div
+        style={{
+          ...styles.flex_column,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          height: "100%",
+          width: "100%",
+          minHeight: "100%",
+          minWidth: "100%",
+          flexWrap: "wrap",
+        }}
+      >
+        <div style={{ alignSelf: "flex-start", paddingLeft: "32px" }}>
+          <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>
+              )}
+            />
+            <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>
+        </div>
+        <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}>
+                  Category
+                </TableCell>
+                <TableCell align="center" style={styles.text_light}>
+                  Amount in Inventory
+                </TableCell>
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {equipments.data ? (
+                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())
+                      : // If filter keyword is null then we just pass through everything as if we did not filter at all
+                        true
+                  )
+                  .map((equipment) => (
+                    <TableRow
+                      key={equipment.id}
+                      sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
+                    >
+                      <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.category}
+                      </TableCell>
+                      <TableCell align="center" component="th" scope="row">
+                        {
+                          equipment_instances.data?.filter(
+                            (equipment_instance) =>
+                              equipment_instance.equipment_name ==
+                              equipment.name
+                          ).length
+                        }
+                      </TableCell>
+                    </TableRow>
+                  ))
+              ) : (
+                <></>
+              )}
+            </TableBody>
+          </Table>
+        </TableContainer>
+      </div>
+    </div>
+  );
+}