Fixed table rendering being broken when there are too many records and added logs pages

src/App.tsx

@@ -13,6 +13,8 @@ import ActivationPage from "./Pages/ActivationPage/ActivationPage";
 import ResetPasswordPage from "./Pages/ResetPasswordPage/ResetPasswordPage";
 import EquipmentInstancesListPage from "./Pages/EquipmentInstancesListPage/EquipmentInstancesListPage";
 import EquipmentListPage from "./Pages/EquipmentListPage/EquipmentListPage";
+import EquipmentLogsPage from "./Pages/EquipmentLogsPage/EquipmentLogsPage";
+import EquipmentInstanceLogsPage from "./Pages/EquipmentInstanceLogsPage/EquipmentInstanceLogsPage";
 
 const queryClient = new QueryClient();
 const router = createHashRouter([
@@ -46,6 +48,16 @@ const router = createHashRouter([
     ),
     errorElement: <ErrorPage />,
   },
+  {
+    path: "/view/equipment_instances/logs",
+    element: (
+      <>
+        <Revalidator />
+        <EquipmentInstanceLogsPage />
+      </>
+    ),
+    errorElement: <ErrorPage />,
+  },
   {
     path: "/view/equipments",
     element: (
@@ -56,6 +68,16 @@ const router = createHashRouter([
     ),
     errorElement: <ErrorPage />,
   },
+  {
+    path: "/view/equipments/logs",
+    element: (
+      <>
+        <Revalidator />
+        <EquipmentLogsPage />
+      </>
+    ),
+    errorElement: <ErrorPage />,
+  },
   {
     path: "/activation/:uid/:token",
     element: (

src/Components/API/API.tsx

@@ -13,6 +13,8 @@ import {
   EquipmentInstanceType,
   PatchEquipmentInstanceType,
   PatchEquipmentType,
+  EquipmentLogListType,
+  EquipmentInstanceLogListType,
 } from "../Types/Types";
 
 const debug = false;
@@ -246,8 +248,31 @@ export async function EquipmentCreateAPI(equipment: AddEquipmentType) {
     });
 }
 
+export async function EquipmentLogsAPI() {
+  const config = await GetConfig();
+  return instance
+    .get("api/v1/equipments/equipments/logs", config)
+    .then((response) => {
+      return response.data as EquipmentLogListType;
+    })
+    .catch(() => {
+      console.log("Error retrieving equipment logs");
+    });
+}
+
 // Equipment Instances APIs
 
+export async function EquipmentInstanceLogsAPI() {
+  const config = await GetConfig();
+  return instance
+    .get("api/v1/equipments/equipment_instances/logs", config)
+    .then((response) => {
+      return response.data as EquipmentInstanceLogListType;
+    })
+    .catch(() => {
+      console.log("Error retrieving equipment logs");
+    });
+}
 export async function EquipmentInstanceAPI(id: number) {
   const config = await GetConfig();
   return instance

src/Components/Types/Types.tsx

@@ -46,6 +46,18 @@ export type EquipmentType = {
 
 export type EquipmentListType = Array<EquipmentType>;
 
+export type EquipmentLogType = {
+  history_id: number;
+  id: number;
+  name: string;
+  category: string;
+  description: string;
+  history_date: string;
+  history_user: string;
+};
+
+export type EquipmentLogListType = Array<EquipmentLogType>;
+
 export type AddEquipmentInstanceType = {
   equipment: number;
   status: string;
@@ -70,3 +82,17 @@ export type EquipmentInstanceType = {
 };
 
 export type EquipmentInstanceListType = Array<EquipmentInstanceType>;
+
+export type EquipmentInstanceLogType = {
+  history_id: number;
+  id: number;
+  equipment: number;
+  equipment_name: string;
+  category: string;
+  status: string;
+  remarks: string;
+  history_date: string;
+  history_user: string;
+};
+
+export type EquipmentInstanceLogListType = Array<EquipmentInstanceLogType>;

src/Pages/DashboardPage/DashboardPage.tsx

@@ -11,6 +11,7 @@ import FormatListBulletedIcon from "@mui/icons-material/FormatListBulleted";
 import AddToQueueIcon from "@mui/icons-material/AddToQueue";
 import NoteAddIcon from "@mui/icons-material/NoteAdd";
 import NoteIcon from "@mui/icons-material/Note";
+import ManageSearchIcon from "@mui/icons-material/ManageSearch";
 import { colors } from "../../styles";
 import { useNavigate } from "react-router-dom";
 import { useState } from "react";
@@ -491,6 +492,87 @@ export default function Dashboard() {
           </p>
         </Button>
       </div>
+      <p
+        style={{
+          ...styles.text_dark,
+          ...styles.text_L,
+        }}
+      >
+        Logs
+      </p>
+      <div
+        style={{
+          ...styles.flex_row,
+          ...{
+            alignSelf: "center",
+            justifyContent: "center",
+            flexWrap: "wrap",
+          },
+        }}
+      >
+        <Button
+          style={{
+            ...styles.flex_column,
+            ...{
+              alignSelf: "center",
+              justifyContent: "center",
+              flexWrap: "wrap",
+            },
+          }}
+          onClick={() => {
+            navigate("/view/equipments/logs");
+          }}
+        >
+          <ManageSearchIcon
+            style={{
+              height: 64,
+              width: 64,
+              fill: colors.font_dark,
+              marginLeft: "1rem",
+              marginRight: "1rem",
+            }}
+          />
+          <p
+            style={{
+              ...styles.text_dark,
+              ...styles.text_M,
+            }}
+          >
+            SKU Logs
+          </p>
+        </Button>
+        <Button
+          style={{
+            ...styles.flex_column,
+            ...{
+              alignSelf: "center",
+              justifyContent: "center",
+              flexWrap: "wrap",
+            },
+          }}
+          onClick={() => {
+            navigate("/view/equipment_instances/logs");
+          }}
+        >
+          <ManageSearchIcon
+            style={{
+              height: 64,
+              width: 64,
+              fill: colors.font_dark,
+              marginLeft: "1rem",
+              marginRight: "1rem",
+            }}
+          />
+          <p
+            style={{
+              ...styles.text_dark,
+              ...styles.text_M,
+            }}
+          >
+            Item Logs
+          </p>
+        </Button>
+      </div>
       <Popup
         open={addSKUmodalOpen}
         onClose={() => SetAddSKUModalOpen(false)}

src/Pages/EquipmentInstanceLogsPage/EquipmentInstanceLogsPage.tsx

@@ -0,0 +1,140 @@
+import { useQuery } from "@tanstack/react-query";
+import Header from "../../Components/Header/Header";
+import styles from "../../styles";
+import { EquipmentInstanceLogsAPI } 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";
+
+export default function EquipmentInstanceLogsPage() {
+  const equipment_instance_logs = useQuery({
+    queryKey: ["equipment_instance_logs"],
+    queryFn: EquipmentInstanceLogsAPI,
+  });
+  if (equipment_instance_logs.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={"Item History"} />
+      <div
+        style={{
+          ...styles.flex_column,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          height: "100%",
+          width: "100%",
+          minHeight: "100%",
+          minWidth: "100%",
+          flexWrap: "wrap",
+        }}
+      >
+        <div style={{ width: "90%", overflowY: "scroll", marginTop: "2rem" }}>
+          <TableContainer component={Paper}>
+            <Table sx={{ minWidth: "32rem" }} size="medium">
+              <TableHead>
+                <TableRow style={{ backgroundColor: colors.header_color }}>
+                  <TableCell align="center" style={styles.text_light}>
+                    Transaction ID
+                  </TableCell>
+                  <TableCell align="center" style={styles.text_light}>
+                    Item ID
+                  </TableCell>
+                  <TableCell align="center" style={styles.text_light}>
+                    SKU
+                  </TableCell>
+                  <TableCell align="center" style={styles.text_light}>
+                    Remarks
+                  </TableCell>
+                  <TableCell align="center" style={styles.text_light}>
+                    Status
+                  </TableCell>
+                  <TableCell align="center" style={styles.text_light}>
+                    Date Modified
+                  </TableCell>
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {equipment_instance_logs.data ? (
+                  equipment_instance_logs.data.map((equipment_instance_log) => (
+                    <TableRow
+                      key={equipment_instance_log.history_id}
+                      sx={{
+                        "&:last-child td, &:last-child th": { border: 0 },
+                      }}
+                    >
+                      <TableCell align="center" component="th" scope="row">
+                        {equipment_instance_log.history_id}
+                      </TableCell>
+                      <TableCell align="center" component="th" scope="row">
+                        {equipment_instance_log.id}
+                      </TableCell>
+                      <TableCell align="center" component="th" scope="row">
+                        {`SKU #${equipment_instance_log.equipment} - ${equipment_instance_log.equipment_name}`}
+                      </TableCell>
+
+                      <TableCell align="center" component="th" scope="row">
+                        {equipment_instance_log.remarks}
+                      </TableCell>
+                      <TableCell align="center" component="th" scope="row">
+                        {equipment_instance_log.status}
+                      </TableCell>
+                      <TableCell align="right">
+                        <div
+                          style={{
+                            ...styles.flex_column,
+                            ...{ alignItems: "center" },
+                          }}
+                        >
+                          <div>{equipment_instance_log.history_date}</div>
+                          <div>
+                            {equipment_instance_log.history_user
+                              ? "by " + equipment_instance_log.history_user
+                              : ""}
+                          </div>
+                        </div>
+                      </TableCell>
+                    </TableRow>
+                  ))
+                ) : (
+                  <></>
+                )}
+              </TableBody>
+            </Table>
+          </TableContainer>
+        </div>
+      </div>
+    </div>
+  );
+}

src/Pages/EquipmentInstancesListPage/EquipmentInstancesListPage.tsx

@@ -63,10 +63,9 @@ export default function EquipmentInstancesListPage() {
           minHeight: "100%",
           minWidth: "100%",
           flexWrap: "wrap",
-          overflowY: "scroll",
         }}
       >
-        <div style={{ width: "90%" }}>
+        <div style={{ width: "90%", overflowY: "scroll", marginTop: "2rem" }}>
           <TableContainer component={Paper}>
             <Table sx={{ minWidth: "32rem" }} size="medium">
               <TableHead>

src/Pages/EquipmentListPage/EquipmentListPage.tsx

@@ -63,10 +63,9 @@ export default function EquipmentListPage() {
           minHeight: "100%",
           minWidth: "100%",
           flexWrap: "wrap",
-          overflowY: "scroll",
         }}
       >
-        <div style={{ width: "90%" }}>
+        <div style={{ width: "90%", overflowY: "scroll", marginTop: "2rem" }}>
           <TableContainer component={Paper}>
             <Table sx={{ minWidth: "32rem" }} size="medium">
               <TableHead>

src/Pages/EquipmentLogsPage/EquipmentLogsPage.tsx

@@ -0,0 +1,138 @@
+import { useQuery } from "@tanstack/react-query";
+import Header from "../../Components/Header/Header";
+import styles from "../../styles";
+import { EquipmentLogsAPI } 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";
+
+export default function EquipmentLogsPage() {
+  const equipment_logs = useQuery({
+    queryKey: ["equipment_logs"],
+    queryFn: EquipmentLogsAPI,
+  });
+  if (equipment_logs.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={"SKU History"} />
+      <div
+        style={{
+          ...styles.flex_column,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          height: "100%",
+          width: "100%",
+          minHeight: "100%",
+          minWidth: "100%",
+          flexWrap: "wrap",
+        }}
+      >
+        <div style={{ width: "90%", overflowY: "scroll", marginTop: "2rem" }}>
+          <TableContainer component={Paper}>
+            <Table sx={{ minWidth: "32rem" }} size="medium">
+              <TableHead>
+                <TableRow style={{ backgroundColor: colors.header_color }}>
+                  <TableCell align="center" style={styles.text_light}>
+                    Transaction ID
+                  </TableCell>
+                  <TableCell align="center" style={styles.text_light}>
+                    SKU ID
+                  </TableCell>
+                  <TableCell align="center" style={styles.text_light}>
+                    Name
+                  </TableCell>
+                  <TableCell align="center" style={styles.text_light}>
+                    Description
+                  </TableCell>
+                  <TableCell align="center" style={styles.text_light}>
+                    Category
+                  </TableCell>
+                  <TableCell align="center" style={styles.text_light}>
+                    Date Modified
+                  </TableCell>
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {equipment_logs.data ? (
+                  equipment_logs.data.map((equipment_log) => (
+                    <TableRow
+                      key={equipment_log.history_id}
+                      sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
+                    >
+                      <TableCell align="center" component="th" scope="row">
+                        {equipment_log.history_id}
+                      </TableCell>
+                      <TableCell align="center" component="th" scope="row">
+                        {equipment_log.id}
+                      </TableCell>
+                      <TableCell align="center" component="th" scope="row">
+                        {equipment_log.name}
+                      </TableCell>
+
+                      <TableCell align="center" component="th" scope="row">
+                        {equipment_log.description}
+                      </TableCell>
+                      <TableCell align="center" component="th" scope="row">
+                        {equipment_log.category}
+                      </TableCell>
+                      <TableCell align="right">
+                        <div
+                          style={{
+                            ...styles.flex_column,
+                            ...{ alignItems: "center" },
+                          }}
+                        >
+                          <div>{equipment_log.history_date}</div>
+                          <div>
+                            {equipment_log.history_user
+                              ? "by " + equipment_log.history_user
+                              : ""}
+                          </div>
+                        </div>
+                      </TableCell>
+                    </TableRow>
+                  ))
+                ) : (
+                  <></>
+                )}
+              </TableBody>
+            </Table>
+          </TableContainer>
+        </div>
+      </div>
+    </div>
+  );
+}