Implemented Admin Contact Page Frontend

- Implemented Can't Find Apartment card style display
- Implemented Contact Questions card style display

frontend/src/components/Admin/AdminCantFindApt.tsx

@@ -0,0 +1,69 @@
+import React, { ReactElement } from 'react';
+import { Card, CardContent, Grid, Typography } from '@material-ui/core';
+import { makeStyles } from '@material-ui/styles';
+import { createAuthHeaders, getUser } from '../../utils/firebase';
+
+const useStyles = makeStyles(() => ({
+  root: {
+    borderRadius: '10px',
+  },
+  cardContent: {
+    border: '1px solid #e0e0e0',
+    borderRadius: '10px',
+  },
+  image: {
+    maxWidth: '30%',
+    height: 'auto',
+  },
+}));
+
+/**
+ * Component Props for AdminCantFindApt.
+ */
+type Props = {
+  /** The date of the report. */
+  readonly date: Date;
+
+  /** The apartment name. */
+  readonly apartmentName: string;
+
+  /** The apartment address. */
+  readonly apartmentAddress: string;
+
+  /** The apartment photos. */
+  readonly photos?: readonly string[];
+};
+
+const AdminCantFindApt = ({
+  date,
+  apartmentName,
+  apartmentAddress,
+  photos = [],
+}: Props): ReactElement => {
+  const classes = useStyles();
+  const formattedDate = new Date(date).toLocaleString('en-US', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+    hour: 'numeric',
+    minute: 'numeric',
+  });
+  return (
+    <Card className={classes.root}>
+      <CardContent className={classes.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} />
+            </Grid>
+          ))}
+        </Grid>
+      </CardContent>
+    </Card>
+  );
+};
+
+export default AdminCantFindApt;

frontend/src/components/Admin/AdminContactQuestion.tsx

@@ -0,0 +1,57 @@
+import React, { ReactElement, useEffect, useState } from 'react';
+import { Card, CardContent, Typography } from '@material-ui/core';
+import { makeStyles } from '@material-ui/styles';
+import { createAuthHeaders, getUser } from '../../utils/firebase';
+
+const useStyles = makeStyles(() => ({
+  root: {
+    borderRadius: '10px',
+  },
+  cardContent: {
+    border: '1px solid #e0e0e0',
+    borderRadius: '10px',
+  },
+  image: {
+    maxWidth: '30%',
+    height: 'auto',
+  },
+}));
+
+/**
+ * Component Props for AdminCantFindApt.
+ */
+type Props = {
+  /** The date of the question. */
+  readonly date: Date;
+  /** The name of the user. */
+  readonly name: string;
+
+  /** The email of the user. */
+  readonly email: string;
+
+  /** The message of the user. */
+  readonly msg: string;
+};
+
+const AdminContactQuestion = ({ date, name, email, msg }: Props): ReactElement => {
+  const classes = useStyles();
+  const formattedDate = new Date(date).toLocaleString('en-US', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+    hour: 'numeric',
+    minute: 'numeric',
+  });
+  return (
+    <Card className={classes.root}>
+      <CardContent className={classes.cardContent}>
+        <Typography variant="body1">Date: {formattedDate}</Typography>
+        <Typography variant="h6">Name: {name}</Typography>
+        <Typography variant="body1">Email: {email}</Typography>
+        <Typography variant="body1">Msg: {msg}</Typography>
+      </CardContent>
+    </Card>
+  );
+};
+
+export default AdminContactQuestion;

frontend/src/pages/AdminPage.tsx

@@ -24,6 +24,8 @@ import clsx from 'clsx';
 import { colors } from '../colors';
 import PhotoCarousel from '../components/PhotoCarousel/PhotoCarousel';
 import usePhotoCarousel from '../components/PhotoCarousel/usePhotoCarousel';
+import AdminCantFindApt from '../components/Admin/AdminCantFindApt';
+import AdminContactQuestion from '../components/Admin/AdminContactQuestion';
 
 const useStyles = makeStyles((theme) => ({
   container: {
@@ -294,40 +296,40 @@ const AdminPage = (): ReactElement => {
   //  Contact tab
   const contact = (
     <Container className={container}>
-      <Grid container>
-        <Typography variant="h3" style={{ margin: '10px' }}>
-          <strong>Pending "Can't Find Your Apartment" Data ({pendingApartment.length})</strong>
-        </Typography>
-        {[...pendingApartment]
-          .sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime())
-          .map((apartment, index) => (
-            <ListItem key={index}>
-              <List>
-                <ListItemText>Date: {apartment.date}</ListItemText>
-                <ListItemText>Apartment name: {apartment.name}</ListItemText>
-                <ListItemText>Apartment Address: {apartment.address}</ListItemText>
-                <ListItemText>Photos: {apartment.photos}</ListItemText>
-              </List>
-            </ListItem>
-          ))}
-      </Grid>
+      <Grid container spacing={3}>
+        <Grid item xs={12}>
+          <Typography variant="h3" style={{ margin: '10px', marginBottom: '30px' }}>
+            <strong>Pending "Can't Find Your Apartment" Data ({pendingApartment.length})</strong>
+          </Typography>
+          {[...pendingApartment]
+            .sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime())
+            .map((apartment, index) => (
+              <Grid item xs={12} key={index} style={{ marginBottom: '20px' }}>
+                <AdminCantFindApt
+                  date={apartment.date}
+                  apartmentName={apartment.name}
+                  apartmentAddress={apartment.address}
+                  photos={apartment.photos}
+                />
+              </Grid>
+            ))}
+        </Grid>
 
-      <Grid container>
-        <Grid item xs={12} sm={12}>
-          <Typography variant="h3" style={{ margin: '10px' }}>
+        <Grid item xs={12}>
+          <Typography variant="h3" style={{ margin: '10px', marginBottom: '30px' }}>
             <strong>Contact Questions ({pendingContactQuestions.length})</strong>
           </Typography>
           {[...pendingContactQuestions]
             .sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime())
             .map((question, index) => (
-              <ListItem key={index}>
-                <List>
-                  <ListItemText>Date: {question.date}</ListItemText>
-                  <ListItemText>User name: {question.name}</ListItemText>
-                  <ListItemText>Cornell Email: {question.email}</ListItemText>
-                  <ListItemText>Msg: {question.msg}</ListItemText>
-                </List>
-              </ListItem>
+              <Grid item xs={12} key={index} style={{ marginBottom: '20px' }}>
+                <AdminContactQuestion
+                  date={question.date}
+                  name={question.name}
+                  email={question.email}
+                  msg={question.msg}
+                />
+              </Grid>
             ))}
         </Grid>
       </Grid>