Single Grievance View - Copy this React, Tailwind Component to your project
Create a single grievance view page for an admin user to manage hosteller complaints within a Next.js application. The page should display grievance details, allow the admin to change the status, and add remarks based on static data. Structure & Layout: Page Title: Display "Grievance Detail" prominently at the top. Complaint Details Section: Complaint ID: Display the grievance ID (e.g., Complaint ID: 670ad811d6d1aca20e9d235d). Complaint Description: List the complaints in a styled format (e.g., bullet points) under a heading "Complaints". Example complaints: Unclean Water Unsafe Status: Display the current status of the grievance (e.g., Status: Not Processed) with an option to change it (e.g., dropdown for options like "Processed", "Resolved", "In Progress"). User Information Section: User Details: Show user information in a card or section: Username: UCS23M1009 Room Number: 110 Hostel ID: A4 Action Log Section: Action History: Display a list of actions taken on this grievance, including: Action Type: "Processed" (e.g., "Resolved", "In Progress"). Action Taken By: Admin username (e.g., Admin1). Action Date: Date when the action was taken (e.g., 2024 10 12). Remarks: Additional comments regarding the action (optional). Admin Action Section: Status Update: Dropdown menu to update the status of the grievance. Remarks Field: Text area for entering remarks related to the action. Submit Button: Button to submit the action taken by the admin.Design Elements: Color Scheme: Use a professional color palette (e.g., blues, whites, and greys). Font Styles: Clear, readable fonts for titles and body text, with larger font sizes for headings. Spacing & Alignment: Ensure sufficient padding and margins between sections for a clean layout. Responsive Design: The page should adapt well to different screen sizes, especially for mobile access. Functional Requirements: Dropdown for Status: On change, update the grievance status in real time (static for this design). Form Submission: Clicking the submit button should validate the remarks and update the action log with the new entry. Action History: Display a static list of past actions taken on the grievance. Accessibility: Ensure all fields are labeled properly for screen readers. Use sufficient contrast for text and background for better visibility.
