Sprint 2.2

client/src/AppRouter.tsx

@@ -25,8 +25,6 @@
 import AnnouncementsPage from "./pages/lab_management/announcements/AnnouncementsPage";
 import EditAnnouncement from "./pages/lab_management/announcements/EditAnnouncement";
 import NewAnnouncementPage from "./pages/lab_management/announcements/NewAnnouncementPage";
-import NewReaderPage from "./pages/newreaderpage/NewReaderPage";
-import SiteSettingsPage from "./pages/site-settings/SiteSettingsPage";
 import StaffBar from "./pages/makerspace_page/StaffBar";
 import UsersPage from "./pages/lab_management/users/UsersPage";
 import UserPage from "./pages/lab_management/users/UserPage";
@@ -51,8 +49,12 @@
 import QuickEditInventoryPage from "./pages/makerspace_page/inventory_pages/QuickEditInventoryPage";
 import DevicesPage from "./pages/makerspace_page/device_pages/DevicesPage";
 import NewDevicePage from "./pages/makerspace_page/device_pages/NewDevicePage";
+import AdminBar from "./pages/site-settings/AdminBar";
+import ManageMakerspacesAdminPage from "./pages/site-settings/ManageMakerspacesPage";
+import LinkManagementAdminPage from "./pages/site-settings/LinkManagementAdminPage";
+import AdminHistoryPage from "./pages/site-settings/AdminHistoryPage";
 
 function AppRoot() {
   return (
     <CurrentUserProvider>
       <Outlet />
@@ -61,7 +63,7 @@
 }
 
 // Authed Routes
 function AuthedRoute() {
   const user = useCurrentUser();
   if (user.visitor) {
     window.location.replace(import.meta.env.VITE_LOGIN_URL + "?redir=" + import.meta.env.VITE_ORIGIN + window.location.pathname);
@@ -71,7 +73,7 @@
   }
 }
 
 function TrainerRoute() {
   const { makerspaceID } = useParams<{ makerspaceID: string }>();
   const user = useCurrentUser();
   if (isOnlyTrainer(user) || isStaffFor(user, Number(makerspaceID))) {
@@ -81,7 +83,7 @@
   }
 }
 
 function StaffRoute() {
   const { makerspaceID } = useParams<{ makerspaceID: string }>();
   const user = useCurrentUser();
   if (isStaffFor(user, Number(makerspaceID))) {
@@ -91,7 +93,7 @@
   }
 }
 
 function ManagerRoute() {
   const { makerspaceID } = useParams<{ makerspaceID: string }>();
   const user = useCurrentUser();
   if (isManagerFor(user, Number(makerspaceID))) {
@@ -101,7 +103,7 @@
   }
 }
 
 function AdminRoute() {
   const user = useCurrentUser();
   if (isAdmin(user)) {
     return <Outlet />;
@@ -191,8 +193,6 @@
                             { path: "/makerspace/:makerspaceID/maintenance", element: <MaintenancePage /> },
                             { path: "/makerspace/:makerspaceID/reservations", element: <ManageReservationsPage /> },
 
-                            { path: "/makerspace/:makerspaceID/devices", element: <DevicesPage /> },
-
                             /* Routes for manager + higher */
                             {
                               element: <ManagerRoute />,
@@ -201,6 +201,7 @@
                                 { path: "/makerspace/:makerspaceID/edit/room/:roomID", element: <ManageRoomPage /> },
                                 { path: "/makerspace/:makerspaceID/currency", element: <CurrencyPage /> },
 
+                                { path: "/makerspace/:makerspaceID/devices", element: <DevicesPage /> },
                                 { path: "/makerspace/:makerspaceID/devices/new", element: <NewDevicePage /> },
                               ],
                             },
@@ -215,16 +216,20 @@
                 /* Routes for admins */
                 {
                   element: <AdminRoute />,
-                  children: [
-                    { path: "/admin/announcements", element: <AnnouncementsPage /> },
-                    { path: "/admin/announcements/:id", element: <EditAnnouncement /> },
-                    { path: "/admin/announcements/new", element: <NewAnnouncementPage /> },
+                  children: [{
+                    path: "/admin",
+                    element: <AdminBar />,
+                    children: [
+                      { path: "/admin/announcements", element: <AnnouncementsPage /> },
+                      { path: "/admin/announcements/:id", element: <EditAnnouncement /> },
+                      { path: "/admin/announcements/new", element: <NewAnnouncementPage /> },
 
-                    { path: "/admin/inventory", element: <AdminInventoryPage /> },
-
-                    { path: "/admin/newreader", element: <NewReaderPage /> },
-                    { path: "/admin/settings", element: <SiteSettingsPage /> },
-                  ],
+                      { path: "/admin/inventory", element: <AdminInventoryPage /> },
+                      { path: "/admin/makerspaces", element: <ManageMakerspacesAdminPage /> },
+                      { path: "/admin/links", element: <LinkManagementAdminPage /> },
+                      { path: "/admin/history", element: <AdminHistoryPage /> },
+                    ]
+                  }],
                 },
 
                 { path: "/maker/training", element: <TrainingPage /> },

client/src/common/EquipmentCard.tsx

@@ -1,12 +1,12 @@
-import { Box, Button, Card, CardContent, CardMedia, Link, Stack, Typography, useTheme } from "@mui/material";
+import { Box, Button, Card, CardContent, CardMedia, IconButton, Link, Stack, Typography, useTheme } from "@mui/material";
 import Equipment from "../types/Equipment";
 import { useCurrentUser } from "./CurrentUserProvider";
 import { moduleStatusMapper, TrainingModule } from "./TrainingModuleUtils";
 import CalendarMonthIcon from '@mui/icons-material/CalendarMonth';
 import { useNavigate, useParams } from "react-router-dom";
 import ConstructionIcon from "@mui/icons-material/Construction";
 import ThemedMarkdown from "./ThemedMarkdown";
-import { memo, useState } from "react";
+import { memo } from "react";
 import { makeCDNLink } from "./ImageFinder.js";
 import EquipmentTrainingModal from "./EquipmentTrainingModal";
 
@@ -45,8 +45,6 @@ const EquipmentCard = memo(function EquipmentCard(props: EquipmentCardProps) {
    */
   const hasNotTakenModule = moduleStatuses.some((ms: { status: string }) => ms.status === "Not taken");
 
-  const [trainingModal, setTrainingModal] = useState(false);
-
   return (
     <Card
       sx={{
@@ -60,12 +58,12 @@ const EquipmentCard = memo(function EquipmentCard(props: EquipmentCardProps) {
           <Stack direction="row" height={props.isMobile ? undefined : "200px"}>
             {props.isMobile ? null :
               <Stack alignItems="center">
-                <Box width="150px" height="200px">
+                <Box width="200px" height="200px">
                   <CardMedia
                     component="img"
                     image={makeCDNLink(props.equipment.imageUrl, "user-uploads/")}
                     alt={`Picture of ${props.equipment.name}`}
-                    sx={{ width: "150px", height: "200px", backgroundColor: "lightgray" }}
+                    sx={{ width: "200px", height: "200px", backgroundColor: "lightgray" }}
                   />
                 </Box>
               </Stack>
@@ -74,18 +72,22 @@ const EquipmentCard = memo(function EquipmentCard(props: EquipmentCardProps) {
             <Stack height="100%" width={"100%"}>
               {/* Title & Edit button */}
               <Stack direction="row" justifyContent="space-between" pl={"10px"}>
-                <Typography variant="h6">{props.equipment.archived ? `${props.equipment.name} (Hidden)` : props.equipment.name}</Typography>
+                <Stack>
+                  <Typography variant="h6">{props.equipment.archived ? `${props.equipment.name} (Hidden)` : props.equipment.name}</Typography>
+                  <Typography variant="subtitle1" fontStyle={"italic"} fontWeight={"regular"}>{props.equipment.subName}</Typography>
+                </Stack>
                 {
                   isPriviledged
-                    ? <Button
+                    ? <IconButton
                       onClick={() => { navigate(`/makerspace/${makerspaceID}/equipment/${props.equipment.id}`) }}
-                      aria-label="edit button"
-                      sx={{ width: "40px", height: "40px" }}
-                      variant="contained"
                       color="primary"
+                      sx={{
+                        width: "40px",
+                        height: "40px"
+                      }}
                     >
                       <ConstructionIcon />
-                    </Button>
+                    </IconButton>
                     : null
                 }
               </Stack>
@@ -105,6 +107,7 @@ const EquipmentCard = memo(function EquipmentCard(props: EquipmentCardProps) {
                       trainingModules: props.equipment.trainingModules,
                     }}
                     requiresInPerson={props.equipment.requiresInPerson}
+                    signOffUrl={props.equipment.signOffUrl}
                     preview={props.preview}
                   />
                 </Stack>

client/src/common/EquipmentTrainingModal.tsx

@@ -1,5 +1,5 @@
 import PrettyModal from "./PrettyModal";
-import { Button, Divider, IconButton, LinearProgress, Stack, Typography } from "@mui/material";
+import { Button, CardActionArea, Divider, IconButton, LinearProgress, Link, Stack, Typography } from "@mui/material";
 import { ModuleStatus, moduleStatusMapper, TrainingModule } from "./TrainingModuleUtils";
 import { useCurrentUser } from "./CurrentUserProvider";
 import CloseIcon from "@mui/icons-material/Close";
@@ -30,17 +30,13 @@ interface EquipmentTrainingModalProps {
     trainingModules: TrainingModule[];
   };
   requiresInPerson: boolean;
+  signOffUrl: string;
   preview?: boolean;
 }
 
 export default function EquipmentTrainingModal(props: EquipmentTrainingModalProps) {
   const user = useCurrentUser();
   const isMobile = useIsMobile();
-  console.log("isMobile: " + isMobile);
-
-  if (props.equipmentTrainings.trainingModules.length === 0 && !props.requiresInPerson) {
-    return;
-  }
 
   const hasApprovedAccessCheck: boolean = user.accessChecks.some((ac) => Number(ac.equipmentID) === Number(props.equipmentTrainings.id) && ac.approved)
 
@@ -63,6 +59,10 @@ export default function EquipmentTrainingModal(props: EquipmentTrainingModalProp
 
   const [open, setOpen] = useState(false);
 
+  if (props.equipmentTrainings.trainingModules.length === 0 && !props.requiresInPerson) {
+    return;
+  }
+
   return (
     <Stack width={"100%"} height={"100%"} justifyContent={"center"} alignItems={"center"}>
       <Stack width={"max-content"} alignItems={"center"} justifyContent={"center"} spacing={2}>
@@ -166,16 +166,32 @@ export default function EquipmentTrainingModal(props: EquipmentTrainingModalProp
                     }
                     {
                       props.requiresInPerson
-                        ? <Stack direction={"row"} spacing={1} alignItems="center" padding="7px">
-                          {user.visitor ? (
-                            <RadioButtonUncheckedIcon color="secondary" />
-                          ) : hasApprovedAccessCheck ? (
-                            <CheckIcon color="success" />
-                          ) : (
-                            <CloseIcon color="error" />
-                          )}
-                          <Typography variant="body2">Staff Sign-Off</Typography>
-                        </Stack>
+                        ? <CardActionArea
+                          onClick={props.signOffUrl ? () => window.open(props.signOffUrl, "_blank noopener noreferrer") : undefined}
+                          disableRipple={props.signOffUrl === ""}
+                        >
+                          <Stack direction={"row"} spacing={1} alignItems="center" padding="7px">
+                            {user.visitor ? (
+                              <RadioButtonUncheckedIcon color="secondary" />
+                            ) : hasApprovedAccessCheck ? (
+                              <CheckIcon color="success" />
+                            ) : (
+                              <CloseIcon color="error" />
+                            )}
+                            <Stack direction={"column"} width={"100%"}>
+                              {
+                                props.signOffUrl !== ""
+                                  ? <Link variant="body2">Staff Sign-Off</Link>
+                                  : <Typography variant="body2">Staff Sign-Off</Typography>
+                              }
+                              {
+                                !user.accessChecks.some((check) => Number(check.equipmentID) === props.equipmentTrainings.id && check.approved)
+                                  ? <Typography variant="body2">Complete all other requirments before attempting sign-off!</Typography>
+                                  : null
+                              }
+                            </Stack>
+                          </Stack>
+                        </CardActionArea>
                         : null
                     }
                   </Stack>

client/src/common/PrivilegeUtils.ts

@@ -54,7 +54,7 @@ export function isOnlyTrainer(user: CurrentUser) {
     return user.trainer.length > 0;
 }
 
-export function isManagerOrSelf(user: CurrentUser, targetId: Number) {
+export function isManagerOrSelf(user: CurrentUser, targetId: number) {
     if (isManager(user)) {
         return true;
     }
@@ -66,7 +66,7 @@ export function isManagerOrSelf(user: CurrentUser, targetId: Number) {
     return false;
 }
 
-export function isStaffOrSelf(user: CurrentUser, targetId: Number) {
+export function isStaffOrSelf(user: CurrentUser, targetId: number) {
     if (isStaff(user)) {
         return true;
     } else if (Number(user.id) === targetId) {

client/src/pages/both/homepage/AnnouncementCard.tsx

@@ -1,4 +1,4 @@
-import { Button, Card, CardActions, CardContent, Stack, Typography, useTheme } from "@mui/material";
+import { Button, Card, CardActions, CardContent, Typography, useTheme } from "@mui/material";
 import { Announcement } from "../../../queries/announcementsQueries";
 import ThemedMarkdown from "../../../common/ThemedMarkdown";
 import { useIsMobile } from "../../../common/IsMobileProvider";

client/src/pages/both/homepage/MakerspaceCard.tsx

@@ -1,5 +1,4 @@
 import { Button, Card, CardActionArea, CardContent, CardMedia, Stack, Typography } from "@mui/material";
-import { useState } from "react";
 import { useNavigate } from "react-router-dom";
 import ChevronRightIcon from "@mui/icons-material/ChevronRight";
 import MakerspaceHours from "../../../types/MakerspaceHours";

client/src/pages/lab_management/audit_logs/AuditLogEntity.tsx

@@ -1,10 +1,8 @@
-import React, { useEffect, useState } from "react";
+import { useState } from "react";
 import { Link } from "@mui/material";
 import { useNavigate, useParams } from "react-router-dom";
 import { useCurrentUser } from "../../../common/CurrentUserProvider";
 import { isManagerFor } from "../../../common/PrivilegeUtils";
-import { useQuery } from "@apollo/client";
-import { GET_ORG_BY_ID } from "../../../queries/organizationQueries";
 
 interface AuditLogEntityProps {
   entityCode: string;
@@ -32,6 +30,8 @@ function getEntityUrl(entityType: string, id: string, makerspaceID: string) {
       return `/makerspace/${id}`;
     case "organization":
       return `/makerspace/${makerspaceID}/organizations?q=${id}`;
+    case "device":
+      return `/makerspace/${makerspaceID}/devices?id=${id}`
     default:
       return `/makerspace/${makerspaceID}/history`;
   }
@@ -46,7 +46,7 @@ export default function AuditLogEntity({ entityCode }: AuditLogEntityProps) {
 
   const [entityType, id, label] = entityCode.split(":");
 
-  let url = getEntityUrl(entityType, id, makerspaceID ?? "0" );
+  let url = getEntityUrl(entityType, id, makerspaceID ?? "0");
 
   // If this would link to the readers page, but the current user is not a manager,
   // fall back to the makerspace history instead of exposing a non-accessible link.

client/src/pages/lab_management/edit_module/EditModulePage.tsx

@@ -40,7 +40,6 @@ export default function EditModulePage({
   moduleInitialValue,
   deleteModule,
   updateModule,
-  updateLoading,
 }: EditModulePageProps) {
   const { makerspaceID } = useParams<{ makerspaceID: string }>();
   const currentUser = useCurrentUser();

client/src/pages/lab_management/inventory/AdminInventoryPage.tsx

@@ -6,7 +6,6 @@ import { useQuery } from "@apollo/client";
 import RequestWrapper from "../../../common/RequestWrapper";
 import MaterialModal from "./MaterialModal";
 import { GET_INVENTORY_TAGS } from "../../../queries/inventoryQueries";
-import AdminPage from "../../AdminPage";
 import Ledger from "./Ledger";
 import InventoryTagsModal from "./InventoryTagsModal";
 import { GET_MAKERSPACES_WITH_ITEMS, MakerspaceWithItems } from "../../../queries/makerspaceQueries";
@@ -41,9 +40,8 @@ export default function AdminInventoryPage() {
 
   return (
     <RequestWrapper loading={makerspacesWithItemsResult.loading} error={makerspacesWithItemsResult.error}>
-      <AdminPage>
+      <Stack width={"auto"}>
         <title>Inventory | Make @ RIT</title>
-        <StaffBar />
         <Box margin="25px">
           <Stack direction="row" justifyContent="space-between" alignItems="baseline">
             <Typography variant="h4">Inventory</Typography>
@@ -94,7 +92,7 @@ export default function AdminInventoryPage() {
 
           <InventoryTagsModal tagModalOpen={tagsModalOpen} setTagModalOpen={setTagsModalOpen} />
         </Box>
-      </AdminPage>
+      </Stack>
     </RequestWrapper>
   );
 }

client/src/pages/lab_management/inventory/ToolItemTypeModal.tsx

@@ -76,7 +76,7 @@ export function ToolItemTypeModal({ type }: { type?: ToolItemType }) {
     if (newType.imageUrl !== type?.imageUrl && newType !== blankType.imageUrl) {
       handleEditSubmit();
     }
-  }, [newType]);
+  }, [newType, blankType.imageUrl, type?.imageUrl]);
 
   const isMobile = useIsMobile()
 

client/src/pages/lab_management/inventory/common/InventoryForMakerspace.tsx

@@ -1,7 +1,6 @@
 import { IconButton } from "@mui/material";
 import { Box } from "@mui/system";
 import { DataGrid, GridColDef } from "@mui/x-data-grid";
-import { useState, useEffect } from "react";
 import { isManager } from "../../../../common/PrivilegeUtils";
 import { StaffOnlyToggle } from "./StaffOnlyToggle";
 import { StorefrontVisibleToggle } from "./StorefrontVisibleToggle";
@@ -10,7 +9,6 @@ import { MakerspaceWithItems } from "../../../../queries/makerspaceQueries";
 import InventoryItem, { InventoryTag } from "../../../../types/InventoryItem";
 import { useCurrentUser } from "../../../../common/CurrentUserProvider";
 import ModeEditIcon from '@mui/icons-material/ModeEdit';
-import PageSectionHeader from "../../../../common/PageSectionHeader";
 
 function sortItemsByName(items: InventoryItem[]): InventoryItem[] {
   return [...items].sort((a, b) => (a.name > b.name ? 1 : -1)) ?? [];

client/src/pages/lab_management/inventory/common/LowInventory.tsx

@@ -1,4 +1,3 @@
-import { useState, useEffect } from "react";
 import { GET_INVENTORY_ITEMS } from "../../../../queries/inventoryQueries";
 import { Box } from "@mui/system";
 import PageSectionHeader from "../../../../common/PageSectionHeader";
@@ -28,7 +27,7 @@ export default function LowInventory(props: LowInventoryProps) {
 			headerName: "Makerspace",
 			minWidth: 200,
 			flex: 1,
-			valueGetter: (value, row) => row.makerspace.name,
+			valueGetter: (_value, row) => row.makerspace.name,
 		},
 		{
 			field: "name",

client/src/pages/lab_management/inventory/common/TagsCell.tsx

@@ -1,4 +1,4 @@
-import { IconButton, Select, MenuItem, Chip, Autocomplete, TextField } from "@mui/material";
+import { IconButton, Select, MenuItem, Chip } from "@mui/material";
 import { Stack } from "@mui/system";
 import InventoryItem, { InventoryTag } from "../../../../types/InventoryItem";
 import InventoryTagChip from "../InventoryTagChip";