Enhanced Photo Display and Added Documentation

- Matched the photo display style of Can't Find Apartment Data to match admin reviews
- Matched the photo carousel display view
- Added documentation for AdminCantFindApt component
- Added documentation for AdminContactQuestion component

frontend/src/components/Admin/AdminCantFindApt.tsx

@@ -1,5 +1,5 @@
 import React, { ReactElement } from 'react';
-import { Card, CardContent, Grid, Typography } from '@material-ui/core';
+import { Card, CardContent, CardMedia, Grid, Typography } from '@material-ui/core';
 import { makeStyles } from '@material-ui/styles';
 import { createAuthHeaders, getUser } from '../../utils/firebase';
 
@@ -15,6 +15,29 @@ const useStyles = makeStyles(() => ({
     maxWidth: '30%',
     height: 'auto',
   },
+  photoStyle: {
+    borderRadius: '4px',
+    height: '15em',
+    width: '15em',
+    cursor: 'pointer',
+    transition: '0.3s ease-in-out',
+    '&:hover': {
+      filter: 'brightness(0.85)',
+      boxShadow: '0 4px 4px rgba(0, 0, 0, 0.1)',
+      transform: 'scale(1.02)',
+    },
+  },
+  photoRowStyle: {
+    overflowX: 'auto',
+    overflowY: 'hidden',
+    display: 'flex',
+    flexDirection: 'row',
+    gap: '1vw',
+    paddingTop: '2%',
+    paddingLeft: '0.6%',
+    paddingRight: '0.6%',
+    paddingBottom: '2%',
+  },
 }));
 
 /**
@@ -32,15 +55,35 @@ type Props = {
 
   /** The apartment photos. */
   readonly photos?: readonly string[];
+
+  /** Function to trigger the photo carousel. */
+  readonly triggerPhotoCarousel: (photos: readonly string[], startIndex: number) => void;
 };
 
+/**
+ * AdminCantFindApt - Displays apartment submission details from users who couldn't find their apartment in the system.
+ *
+ * @remarks
+ * Renders a Material-UI Card containing details about an apartment that a user reported as missing from the system.
+ * Includes the apartment name, address, submission date and any photos provided. Photos can be clicked to open in
+ * a carousel viewer.
+ *
+ * @param {Date} props.date - The submission date/time of the apartment report
+ * @param {string} props.apartmentName - The name of the apartment building/complex that was reported
+ * @param {string} props.apartmentAddress - The street address of the reported apartment
+ * @param {readonly string[]} props.photos - Optional array of photo URLs submitted with the report
+ * @param {Function} props.triggerPhotoCarousel - Callback function to open the photo carousel viewer
+ *
+ * @returns {ReactElement} A Material-UI Card component displaying the apartment submission details
+ */
 const AdminCantFindApt = ({
   date,
   apartmentName,
   apartmentAddress,
   photos = [],
+  triggerPhotoCarousel,
 }: Props): ReactElement => {
-  const classes = useStyles();
+  const { root, cardContent, image, photoStyle, photoRowStyle } = useStyles();
   const formattedDate = new Date(date).toLocaleString('en-US', {
     year: 'numeric',
     month: 'long',
@@ -49,18 +92,30 @@ const AdminCantFindApt = ({
     minute: 'numeric',
   });
   return (
-    <Card className={classes.root}>
-      <CardContent className={classes.cardContent}>
+    <Card className={root}>
+      <CardContent className={cardContent}>
         <Typography variant="h6">Apartment Name: {apartmentName}</Typography>
         <Typography variant="body1">Address: {apartmentAddress}</Typography>
         <Typography variant="body1">Filed Date: {formattedDate}</Typography>
-        <Grid container spacing={2}>
-          {photos.map((photo) => (
-            <Grid item xs={6} key={photo}>
-              <img src={photo} alt="Apartment" className={classes.image} />
+        {photos.length > 0 && (
+          <Grid container>
+            <Grid item className={photoRowStyle}>
+              {photos.map((photo, i) => {
+                return (
+                  <CardMedia
+                    component="img"
+                    alt="Apt image"
+                    image={photo}
+                    title="Apt image"
+                    className={photoStyle}
+                    onClick={() => triggerPhotoCarousel(photos, i)}
+                    loading="lazy"
+                  />
+                );
+              })}
             </Grid>
-          ))}
-        </Grid>
+          </Grid>
+        )}
       </CardContent>
     </Card>
   );

frontend/src/components/Admin/AdminContactQuestion.tsx

@@ -33,6 +33,21 @@ type Props = {
   readonly msg: string;
 };
 
+/**
+ * AdminContactQuestion - Displays contact form submissions from users in the admin interface.
+ *
+ * @remarks
+ * Renders a Material-UI Card containing the details of a contact form submission, including
+ * the date, name, email and message from the user. Used in the admin dashboard to review
+ * user questions and contact requests.
+ *
+ * @param {Date} props.date - The submission date/time of the contact form
+ * @param {string} props.name - The name of the user who submitted the form
+ * @param {string} props.email - The email address provided by the user
+ * @param {string} props.msg - The message/question text submitted by the user
+ *
+ * @returns {ReactElement} - A Material-UI Card component displaying the contact form details
+ */
 const AdminContactQuestion = ({ date, name, email, msg }: Props): ReactElement => {
   const classes = useStyles();
   const formattedDate = new Date(date).toLocaleString('en-US', {

frontend/src/pages/AdminPage.tsx

@@ -310,6 +310,7 @@ const AdminPage = (): ReactElement => {
                   apartmentName={apartment.name}
                   apartmentAddress={apartment.address}
                   photos={apartment.photos}
+                  triggerPhotoCarousel={showPhotoCarousel}
                 />
               </Grid>
             ))}