AdminCantFindApt

AdminCantFindApt Component

Description

The AdminCantFindApt component displays apartment submission details from users who couldn't find their apartment in the system. It renders a Material-UI Card containing details about an apartment that a user reported as missing, including name, address, submission date, and photos with carousel viewer functionality.

Usage

Use this component in administrative interfaces to review and manage user-submitted apartment reports. The component handles photo display and status management for these submissions.

Props Interface

type Props = {
  /** The ID of the pending building report */
  readonly pending_building_id: string;
  /** 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[];
  /** Function to trigger the photo carousel */
  readonly triggerPhotoCarousel: (photos: readonly string[], startIndex: number) => void;
  /** Function to toggle the display */
  readonly setToggle: React.Dispatch<React.SetStateAction<boolean>>;
};

Example Usage

function AdminPage() {
  return (
    <AdminCantFindApt
      pending_building_id="123"
      date={new Date()}
      apartmentName="College Town Terrace"
      apartmentAddress="123 College Ave"
      photos={['url1.jpg', 'url2.jpg']}
      triggerPhotoCarousel={(photos, index) => handlePhotoDisplay(photos, index)}
      setToggle={setToggleState}
    />
  );
}

Features

• Displays apartment name and address
• Shows formatted submission date and time
• Renders interactive photo gallery with carousel support
• Provides administrative action buttons (Delete and Done)
• Supports status management with authentication

Expected Behavior

Data Display

• Formats date to locale string with date and time
• Renders photos in a horizontally scrollable container
• Shows all photos with hover effects and click interaction

User Interaction

• Photos are clickable to open in carousel view
• Administrative buttons trigger status changes
• Status changes refresh parent component via setToggle

Status Management

• Supports status changes to DELETED or COMPLETED
• Requires authenticated user for status changes
• Updates trigger parent component refresh

Edge Cases

• Handles missing photos array gracefully
• Manages authentication failures during status updates
• Processes invalid dates appropriately
• Handles long apartment names and addresses

Implementation Details

The component uses Material-UI for styling and layout, with custom styling applied through makeStyles.

Runtime Analysis

• Component initialization: O(1)
• Photo rendering: O(n) where n is number of photos
• Status updates: O(1)
• Date formatting: O(1)