RejectedRequests Component

Overview

The RejectedRequests component is a React component responsible for displaying hostel transfer requests that have been rejected within the hostel administration system. It provides a read-only view of rejected requests with their associated details and rejection reasons.

Component Architecture

This component follows a simple, functional React component pattern. It receives an array of rejected requests as props and renders them as a list of cards with a visual design that clearly indicates their rejected status.

Technical Details

Props

Prop	Type	Description
requests	Array	List of rejected hostel transfer requests to display

Component Structure

RejectedRequests
├── Empty state message (when no rejected requests exist)
└── Request cards (for each rejected request)
    └── Request details (ID, roll number, hostels, rejection reason)

Workflow

1. Initialization:

2. Component receives rejected requests data via props

3. Rendering Logic:

4. If there are no rejected requests, displays a "No rejected requests" message

5. Otherwise, renders each rejected request as a card with a red background to visually indicate rejection

6. Information Display:

7. Each card shows the request details including:
   • Application ID
   • Student Roll Number
   • Current Hostel
   • Requested Hostel
   • Reason for Rejection

Code Explanation

Component Definition

const RejectedRequests = ({ requests }) => {
  // Component code
};

The component is defined as a functional React component that accepts a single prop requests, which is an array of rejected request objects.

Empty State Handling

if (requests.length === 0) {
  return (
    <div className="card bg-base-100 shadow border border-base-200 rounded-lg text-center text-gray-500 py-4">
      No rejected requests.
    </div>
  );
}

Before rendering the list of requests, the component checks if the array is empty. If there are no rejected requests, it returns a simple message indicating that no rejected requests exist. This provides clear feedback to administrators about the current state.

Main Rendering Structure

return (
  <div className='card bg-base-100 shadow border border-base200 p-6 rounded-lg'>
    {requests.map(request => (
      <div key={request.id} className="mb-4 p-4 shadow-sm border rounded bg-red-100">
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-1">
          {/* Information blocks */}
        </div>
      </div>
    ))}
  </div>
);

The main rendering structure: 1. Creates a container card for all rejected requests 2. Maps through each request in the array to create individual request cards 3. Each card has a red background (bg-red-100) to visually indicate rejection status 4. Uses CSS Grid with responsive breakpoints (1 column on small screens, 2 columns on larger screens)

Information Display Pattern

Each piece of information follows a consistent pattern:

<div class="flex items-center space-x-3 py-2">
  <div class="flex-shrink-0 w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center border border-indigo-200 shadow-sm">
    {/* Icon SVG */}
  </div>
  <div>
    <div class="text-xs font-medium text-gray-500 uppercase tracking-wider mb-0.5">Label</div>
    <div class="text-sm font-semibold text-gray-800">{value}</div>
  </div>
</div>

Each information block consists of: 1. A flex container for positioning 2. An icon wrapper with consistent styling 3. A label and value section with appropriate typography

Key Information Displayed

The component displays several key pieces of information for each rejected request:

1. Application ID: Unique identifier for the transfer request
2. Roll Number: Student identification number
3. Current Hostel: The hostel where the student currently resides
4. Requested Hostel: The hostel to which the student requested transfer
5. Reason of Rejection: The administrative reason provided for rejecting the request

Design Patterns

Conditional Rendering

The component uses conditional rendering to display either an empty state message or the list of rejected requests.

Consistent UI Elements

The component maintains consistent UI patterns for displaying information, making the interface intuitive and easy to scan.

Responsive Layout

The component uses CSS Grid with media queries to provide appropriate layouts for different screen sizes.

Visual Status Indication

The component uses background color (bg-red-100) to visually communicate the rejected status of the requests.