QR code from the staff equipment page, made tcket modal a little nicer on mobile, added the button on the user info page to report an issue if that user ls staff

cowsed · cowsed · commit 75b2ad121860 · 2026-07-29T13:22:33.000-04:00
diff --git a/client/src/pages/makerspace_page/equipment_pages/EquipmentUserInfo.tsx b/client/src/pages/makerspace_page/equipment_pages/EquipmentUserInfo.tsx
@@ -1,7 +1,7 @@
 import PersonIcon from '@mui/icons-material/Person';
 import { useParams } from "react-router-dom";
 import { GET_EQUIPMENT_BY_ID } from "../../../queries/equipmentQueries";
-import { Alert, Button, CardActionArea, LinearProgress, Typography } from "@mui/material";
+import { Alert, Button, CardActionArea, LinearProgress, Link, Typography } from "@mui/material";
 import { useQuery } from "@apollo/client/react";
 import { Equipment } from "./ManageEquipmentPage";
 import { Stack } from "@mui/system";
@@ -11,20 +11,24 @@ import { FullMakerspace, GET_MAKERSPACE_BY_ID } from "../../../queries/makerspac
 import { GET_ROOM } from "../../../queries/roomQueries";
 import RequestWrapper from "../../../common/RequestWrapper";
 import Room from "../../../types/Room";
-import { ReactNode } from "react";
+import { ReactNode, useState } from "react";
 import { IS_USER_WELCOMED } from "../../../queries/userQueries";
 import ModuleStatusRow from "../../../common/ModuleStatusRow";
 import RadioButtonUncheckedIcon from "@mui/icons-material/RadioButtonUnchecked";
 import CloseIcon from "@mui/icons-material/Close";
 import CheckIcon from '@mui/icons-material/Check';
-import { Link } from "react-router-dom";
+import WarningIcon from '@mui/icons-material/Warning';
+import NewTicketModal from '../maintenance_pages/NewTicketModal';
+import { isStaffFor } from '../../../common/PrivilegeUtils';
+
 
 export default function EquipmentUserInfo() {
     const user = useCurrentUser();
     const isVisitor = user.visitor;
 
 
     const { makerspaceID, equipmentID } = useParams<{ makerspaceID: string, equipmentID: string }>();
+    const isStaffForHere = isStaffFor(user, Number(makerspaceID));
     const getEquipmentByIDResult = useQuery(GET_EQUIPMENT_BY_ID, {
         variables: {
             id: equipmentID,
@@ -48,6 +52,12 @@ export default function EquipmentUserInfo() {
         }
     });
 
+    const getMakerspace = useQuery(GET_MAKERSPACE_BY_ID, { variables: { id: makerspaceID } });
+
+
+    const [newTicketModal, setNewTicketModal] = useState(false);
+
+
     function unfinishedTrainingWarning(): ReactNode {
         return <Alert severity="warning" title="Unfinished Training">
             <Stack>
@@ -209,12 +219,26 @@ export default function EquipmentUserInfo() {
                         : null
                 }
             </Stack>
-            <Button
-                color="info"
-                variant="contained"
-                onClick={() => window.open(equipment.sopUrl, "_blank")}
+            <Stack direction="row" spacing="10px">
+                <Button
+                    color="info"
+                    variant="contained"
+                    onClick={() => window.open(equipment.sopUrl, "_blank")}
+                >
+                    Equipment Information
+                </Button>
+
+                {isStaffForHere ? <Button
+                    color="primary"
+                    variant="contained"
+                    onClick={() => setNewTicketModal(true)}
+                    startIcon={<WarningIcon />}
+                >
+                    Report Issue
+                </Button> : undefined}
+            </Stack>
+
 
-            >Equipment Information</Button>
         </Stack>
     }
 
@@ -233,6 +257,8 @@ export default function EquipmentUserInfo() {
             >
                 LOGIN
             </Button>
+
+
         </Stack>
 
     }
@@ -244,5 +270,7 @@ export default function EquipmentUserInfo() {
                 ? renderVisitor(getEquipmentByIDResult?.data?.equipment as Equipment)
                 : renderPage(isWelcomedResult?.data?.isUserWelcomed ? isWelcomedResult?.data?.isUserWelcomed : false, getEquipmentByIDResult?.data?.equipment as Equipment, getRoomResult.data?.room as Room, getMakerspaceResult.data?.makerspaceByID as FullMakerspace)
         }
+        {getMakerspace?.data?.makerspaceByID ? <NewTicketModal open={newTicketModal} onClose={() => setNewTicketModal(false)} makerspace={getMakerspace?.data?.makerspaceByID} /> : undefined}
+
     </RequestWrapper>
 }
diff --git a/client/src/pages/makerspace_page/equipment_pages/ManageEquipmentPage.tsx b/client/src/pages/makerspace_page/equipment_pages/ManageEquipmentPage.tsx
@@ -1,13 +1,13 @@
 import { useMutation, useQuery } from "@apollo/client/react";
-import { Button, Stack, TextField, Typography } from "@mui/material";
+import { Button, Link, Stack, TextField, Typography } from "@mui/material";
 import { GET_EQUIPMENT_BY_ID } from "../../../queries/equipmentQueries";
 import { useNavigate, useParams } from "react-router-dom";
 import RequestWrapper2 from "../../../common/RequestWrapper2";
 import EquipmentInformation from "./EquipmentInformation";
 import PrettyModal from "../../../common/PrettyModal";
 import InstanceGrid from "./InstanceGrid";
 import { useIsMobile } from "../../../common/IsMobileProvider";
-import { useState } from "react";
+import { useRef, useState } from "react";
 import AddIcon from '@mui/icons-material/Add';
 import { CREATE_EQUIPMENT_INSTANCE } from "../../../queries/equipmentInstanceQueries";
 import HistoryIcon from '@mui/icons-material/History';
@@ -18,6 +18,8 @@ import MaintenanceTicketGrid from "../maintenance_pages/MaintenanceTicketGrid";
 import WarningIcon from '@mui/icons-material/Warning';
 import NewTicketModal from "../maintenance_pages/NewTicketModal";
 import { useMakeTheme } from "../../../common/MakeThemeProvider";
+import QrCodeIcon from '@mui/icons-material/QrCode';
+import { QRCode } from "react-qr-code";
 
 export interface Equipment {
   id: number;
@@ -51,13 +53,57 @@ export interface Equipment {
 
 }
 
+
+
+
+
 export default function ManageEquipmentPage() {
   const { makerspaceID, equipmentID } = useParams<{ makerspaceID: string, equipmentID: string }>();
   const isMobile = useIsMobile();
   const navigate = useNavigate();
   const user = useCurrentUser();
   const makeTheme = useMakeTheme();
 
+  const qrRef = useRef(null);
+
+  function copyQRCode() {
+    try {
+      const svg = qrRef.current;
+      if (svg === null) { return; }
+      const svgData = new XMLSerializer().serializeToString(svg);
+      const canvas = document.createElement("canvas");
+      const ctx = canvas.getContext("2d");
+      const img = new Image();
+      console.log("qrRef", qrRef.current)
+
+      const svgBlob = new Blob([svgData], { type: "image/svg+xml;charset=utf-8" });
+      const url = URL.createObjectURL(svgBlob);
+
+      img.onload = () => {
+        // Set canvas dimensions to match SVG
+        canvas.width = img.width;
+        canvas.height = img.height;
+        if (ctx === null) { return; }
+        ctx.drawImage(img, 0, 0);
+
+        // Copy to clipboard as a PNG
+        canvas.toBlob((blob) => {
+          if (blob === null) { return; }
+          const item = new ClipboardItem({ "image/png": blob });
+          navigator.clipboard.write([item]);
+        });
+
+        URL.revokeObjectURL(url);
+      };
+
+      img.src = url;
+    } catch (err) {
+      console.error("Failed to copy qr code", err)
+    }
+  }
+
+
+
   const getEquipmentByIDResult = useQuery(GET_EQUIPMENT_BY_ID, {
     variables: {
       id: equipmentID,
@@ -70,6 +116,7 @@ export default function ManageEquipmentPage() {
 
   const [newInstanceName, setNewInstanceName] = useState("");
   const [newInstanceModal, setNewInstanceModal] = useState(false);
+  const [showQrCode, setShowQrCode] = useState<boolean>(false);
 
   const [editEquipmentModal, setEditEquipmentModal] = useState(false);
 
@@ -104,6 +151,19 @@ export default function ManageEquipmentPage() {
             >
               <Typography variant={isMobile ? "h5" : "h3"}>{`Manage ${equipment.name}`}</Typography>
               <Stack direction={"row"} spacing={1}>
+
+                <Button
+                  color="info"
+                  variant="contained"
+                  startIcon={<QrCodeIcon />}
+                  onClick={() => setShowQrCode(true)}
+                  sx={{
+                    justifySelf: "flex-end"
+                  }}
+                >
+                  User QR Code
+                </Button>
+
                 <Button
                   color="secondary"
                   variant="contained"
@@ -174,7 +234,28 @@ export default function ManageEquipmentPage() {
               </Button>
             </Stack>
             <MaintenanceTicketGrid equipmentID={equipment.id} />
+
+
+            {/* Equipment User Info QR Code Modal */}
+            <PrettyModal open={showQrCode} onClose={() => setShowQrCode(false)} elevation={7}>
+              <Stack alignItems={"center"} spacing="10px">
+                <Link
+                  href={`${import.meta.env.VITE_ORIGIN}/app/makerspace/${makerspaceID}/equipmentUserInfo/${equipmentID}`}
+                  target={"_blank"}
+                >User Info Page</Link>
+                <QRCode ref={qrRef} value={`${import.meta.env.VITE_ORIGIN}/app/makerspace/${makerspaceID}/equipmentUserInfo/${equipmentID}`} />
+                <Button variant="contained" color="info" onClick={copyQRCode} >Copy</Button>
+              </Stack>
+            </PrettyModal>
+
+
+
           </Stack>
+
+
+
+
+
           {/* Equipment Information Modal */}
           <PrettyModal open={editEquipmentModal} onClose={() => setEditEquipmentModal(false)} width={"90%"} elevation={8}>
             <EquipmentInformation equipment={equipment} />
diff --git a/client/src/pages/makerspace_page/maintenance_pages/NewTicketModal.tsx b/client/src/pages/makerspace_page/maintenance_pages/NewTicketModal.tsx
@@ -13,6 +13,7 @@ import { toast } from "react-toastify";
 import FileUploadButton from "../../../common/FileUploadButton";
 import styled from "styled-components";
 import { makeCDNLink } from "../../../common/ImageFinder";
+import { useIsMobile } from "../../../common/IsMobileProvider";
 
 const StyledImg = styled.img`
   padding: 5px
@@ -27,6 +28,7 @@ interface NewTicketModalProps {
 
 export default function NewTicketModal(props: NewTicketModalProps) {
   const user = useCurrentUser();
+  const isMobile = useIsMobile();
 
   const [equipment, setEquipment] = useState(props.equipment);
   const [instance, setInstance] = useState<EquipmentInstance>();
@@ -93,7 +95,7 @@ export default function NewTicketModal(props: NewTicketModalProps) {
   }
 
   return (
-    <PrettyModal open={props.open} onClose={handleClose} width={"620px"}>
+    <PrettyModal open={props.open} onClose={handleClose} width={isMobile ? "90%" : "620px"}>
       <Stack spacing={2} padding={"10px"}>
         <Stack direction={"row"} justifyContent={"space-between"}>
           <Typography variant="h6">Create a Maintenance Ticket</Typography>
@@ -186,7 +188,7 @@ export default function NewTicketModal(props: NewTicketModalProps) {
             ? <StyledImg src={makeCDNLink(imageUrl, "user-uploads/")} />
             : null
         }
-        <Stack direction={"row"} justifyContent={"space-between"}>
+        <Stack direction={isMobile ? "column" : "row"} spacing="2px" justifyContent={"space-between"}>
           <Button
             color="error"
             variant="contained"
