Delete Report Button

src/services/lostAndFound.ts

@@ -45,10 +45,15 @@ const createMissingItemReport = async (
   return response;
 };
 
+const updateReportStatus = async (id: number, status: string): Promise<void> => {
+  await http.put<void>(`lostandfound/missingitem/${id}/${status}`);
+};
+
 const lostAndFoundService = {
   getMissingItemReports,
   createMissingItemReport,
   getMissingItemReport,
+  updateReportStatus,
 };
 
 export default lostAndFoundService;

src/views/CampusSafety/views/LostAndFound/components/DeleteConfirmation/DeleteConfirmation.module.scss

@@ -0,0 +1,57 @@
+// Root container styles for the dialog
+.title {
+  background-color: var(--mui-palette-primary-main); // GordonBlue
+  color: var(--mui-palette-primary-contrastText); // White
+  text-align: center;
+  font-size: 1.25rem;
+  font-weight: bold;
+}
+
+.notice {
+  margin-top: 1rem;
+  text-align: center;
+  font-weight: 500;
+  font-size: 1rem;
+  color: var(--mui-palette-info-light); // SnowDay
+
+  @media (max-width: 600px) {
+    font-size: 0.9rem; // Adjust for smaller screens
+  }
+}
+
+.subtext {
+  text-align: center;
+  margin-top: 0.5rem;
+  color: var(--mui-palette-neutral-500); // Light Gray
+  font-size: 0.9rem;
+
+  @media (max-width: 600px) {
+    font-size: 0.8rem; // Adjust for smaller screens
+  }
+}
+
+.actions {
+  display: flex;
+  justify-content: space-between;
+  padding: 1rem;
+}
+
+.cancelButton {
+  background-color: var(--mui-palette-error-light); // NauticalRed
+  color: var(--mui-palette-primary-contrastText); // White
+  font-weight: bold;
+
+  &:hover {
+    background-color: var(--mui-palette-error-main); // ChristmasRed
+  }
+}
+
+.submitButton {
+  background-color: var(--mui-palette-secondary-main); // ScottieCyan
+  color: var(--mui-palette-primary-contrastText); // White
+  font-weight: bold;
+
+  &:hover {
+    background-color: var(--mui-palette-secondary-dark); // ScottieCyan_opacity75
+  }
+}

src/views/CampusSafety/views/LostAndFound/components/DeleteConfirmation/index.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  Typography,
+} from '@mui/material';
+import styles from './DeleteConfirmation.module.scss';
+
+type DeleteConfirmationModalProps = {
+  open: boolean;
+  onClose: () => void;
+  onSubmit: () => void;
+};
+
+const DeleteConfirmationModal: React.FC<DeleteConfirmationModalProps> = ({
+  open,
+  onClose,
+  onSubmit,
+}) => {
+  return (
+    <Dialog open={open} onClose={onClose} fullWidth maxWidth="sm">
+      <DialogTitle className={styles.title}>Delete Missing Item Report?</DialogTitle>
+      <DialogContent>
+        <Typography variant="body1" align="center" className={styles.notice}>
+          Please delete if you would no longer like Gordon Police to search for this item.
+        </Typography>
+        <Typography variant="body2" align="center" className={styles.subtext}>
+          (i.e. item found, replaced, etc.)
+        </Typography>
+      </DialogContent>
+      <DialogActions className={styles.actions}>
+        <Button onClick={onClose} className={styles.cancelButton}>
+          Cancel
+        </Button>
+        <Button onClick={onSubmit} className={styles.submitButton}>
+          Delete Report
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+export default DeleteConfirmationModal;

src/views/CampusSafety/views/LostAndFound/index.tsx

@@ -13,22 +13,27 @@ import { useTheme } from '@mui/material/styles'; // Access theme if needed
 import lostAndFoundService from 'services/lostAndFound';
 //import lostAndFoundService from '../../services/lostAndFoundService'; // Assuming this is your service
 import { MissingItemReport } from 'services/lostAndFound'; // Import the type from the service
+import DeleteConfirmationModal from './components/DeleteConfirmation';
 import { DateTime } from 'luxon';
 import { useWindowSize } from 'hooks';
+import { string } from 'prop-types';
 
 const formatDate = (date: string) => {
   return DateTime.fromISO(date).toFormat('MM-dd-yyyy'); // Adjust format as needed
 };
 const LostAndFound = () => {
   const [activeReports, setActiveReports] = useState<MissingItemReport[]>([]);
   const [pastReports, setPastReports] = useState<MissingItemReport[]>([]);
+  const [isDeleteModalOpen, setDeleteModalOpen] = useState(false);
+  const [reportToDelete, setReportToDelete] = useState<string | null>(null);
   const [loading, setLoading] = useState(true);
   const theme = useTheme(); // Access theme if needed
   const [width] = useWindowSize();
   const [expanded, setExpanded] = useState<{ [key: string]: boolean }>({});
   const [expandedFields, setExpandedFields] = useState<{
     [id: string]: { [field: string]: boolean };
   }>({});
+  const [pageUpdates, setPageUpdates] = useState(0);
   const navigate = useNavigate();
 
   useEffect(() => {
@@ -96,14 +101,37 @@ const LostAndFound = () => {
     };
 
     fetchMissingItems();
-  }, []);
+  }, [pageUpdates]);
+
+  const handleChange = () => {
+    setDeleteModalOpen(true);
+  };
 
   const handleEdit = (reportId: string) => {
     console.log(`Editing report: ${reportId}`);
   };
 
-  const handleDelete = (reportId: string) => {
-    console.log(`Deleting report: ${reportId}`);
+  const handleDeleteClick = (reportId: string) => {
+    setReportToDelete(reportId);
+    setDeleteModalOpen(true);
+  };
+
+  const handleModalClose = () => {
+    setDeleteModalOpen(false);
+    setReportToDelete(null);
+  };
+
+  const handleModalSubmit = async () => {
+    try {
+      //const reportIdNum = parseInt(handleDeleteClick(reportToDelete));
+
+      await lostAndFoundService.updateReportStatus(parseInt(reportToDelete || ''), 'deleted');
+      setPageUpdates(pageUpdates + 1);
+      setDeleteModalOpen(false);
+      setReportToDelete(null);
+    } catch (error) {
+      console.error('Error updating item:', error);
+    }
   };
 
   const toggleExpand = (id: string) => {
@@ -264,7 +292,7 @@ const LostAndFound = () => {
                               <EditIcon fontSize="small" />
                             </IconButton>
                             <IconButton
-                              onClick={() => handleDelete(report.recordID?.toString() || '')}
+                              onClick={() => handleDeleteClick(report.recordID?.toString() || '')}
                               size="small"
                             >
                               <DeleteIcon fontSize="small" />
@@ -295,7 +323,7 @@ const LostAndFound = () => {
                           </Grid>
                           <Grid item xs={0.5}>
                             <IconButton
-                              onClick={() => handleDelete(report.recordID?.toString() || '')}
+                              onClick={() => handleDeleteClick(report.recordID?.toString() || '')}
                               size="small"
                             >
                               <DeleteIcon fontSize="small" />
@@ -331,6 +359,11 @@ const LostAndFound = () => {
           </Card>
         </Grid>
       </Grid>
+      <DeleteConfirmationModal
+        open={isDeleteModalOpen}
+        onClose={handleModalClose}
+        onSubmit={handleModalSubmit}
+      />
       {/* Past Missing Item Reports */}
       <Grid container justifyContent="center" spacing={3} marginTop={3}>
         <Grid item xs={12} sm={10}>