Grievance View - Copy this React, Tailwind Component to your project
Design a detailed grievance view page for a hostel grievance management system that allows users to take actions on the grievance. The page should be minimalistic, focusing on the grievance details and providing clear action buttons. Layout Structure: Header Section: Title: “Grievance Details” at the top, centered, in a bold and larger font. Grievance Information Section: A card or box that contains: Grievance ID (_id): Displayed in a subtle manner at the top of the card. Grievance List (complaint): A bulleted list showcasing all grievances (e.g., "Mosquito issue", "Noisy environment", "Inappropriate conduct by hostel staff"), centered and clearly spaced. Status (status): Displayed prominently with color coding (e.g., red label for "Not Processed"). User and Date Section: At the bottom of the card, align user information and dates: User ID (user): Shown less prominently on the left. Creation Date (createdAt): Displayed on the right side in a clear format (e.g., "October 7, 2024"). Last Updated Date (updatedAt): Positioned directly below the creation date. Action Buttons Section: Below the grievance information, include a section with clear action buttons. Use a horizontal layout for the buttons with the following actions: Resolve Grievance: A primary button styled in a bold color (e.g., green) to indicate resolving the grievance. Escalate Grievance: A secondary button in a different color (e.g., orange) for escalating the grievance to higher authorities. Add Comment: A button that opens a modal or input field for adding comments or updates regarding the grievance. Delete Grievance: A danger button styled in red for deleting the grievance, with a confirmation prompt to prevent accidental deletions. Design Style: Use a light background with soft colors for the cards, ensuring they stand out. Implement rounded corners for a modern look. Space elements adequately to avoid clutter, and ensure buttons are prominent and easily clickable. Responsive Design: Ensure the layout is mobile friendly, with buttons stacking vertically on smaller screens for better accessibility. Use appropriate font sizes and padding to enhance readability on all devices.
