Grievance Details - Copy this React, Tailwind Component to your project
Design a simple, clean grievance details page for a hostel grievance management system. The page should display detailed information about a single grievance without a navbar, sidebar, or footer. The design should focus on the following fields: Grievance ID (_id): Displayed in a subtle manner. Grievance List (complaint): A bulleted list displaying multiple grievances/issues. Status (status): Clearly shown, with color coding to indicate the status (e.g., red for "Not Processed", green for "Resolved"). User ID (user): Shown as the complainant identifier, but not in a prominent way. Date Created (createdAt): Display the creation date in a readable format. Last Updated (updatedAt): Display the last updated date, shown beneath the creation date for consistency. The layout should be minimalistic, easy to read, and mobile friendly. Consider the following structure: Header Section: Show "Grievance Details" as the page title, centered at the top with a bold font style. Grievance Information Section: Below the header, a clean card or box containing: A light gray box displaying the Grievance ID with smaller font. The grievances list (complaint) in bullet points or check marks, placed centrally in the card with adequate spacing between each item. The status highlighted below the complaint list in bold with a status indicator (e.g., red label for "Not Processed"). User and Date Section: At the bottom of the card, align the user ID and dates: User ID on the left side, less prominent. Creation Date and Last Updated Date on the right side, formatted clearly (e.g., "October 7, 2024"). Design Style: Use soft colors (e.g., light background with a slightly darker text), and add rounded corners to cards or boxes for a smooth, modern feel. Ensure ample spacing between elements to avoid clutter and improve readability. Ensure the page is responsive and the content resizes smoothly on both mobile and desktop views. Keep the color palette neutral (whites, grays) with some accent colors for status labels.
