Aller au contenu
login
arrow_backRetour aux issues
Harsh-vardhan09/AthLead #111

FEAT: Create admin dashboard UI in frontend based on backend routes created

ecoDébutant enhancement help wanted good first issue Frontend Design Intermediate Open-to-All Priority:HIGH

descriptionDescription

## Description The backend event routes and controllers are now available. Build the frontend admin panel for managing events using the existing event APIs. The admin panel must be accessible **only to authenticated admin users** and should follow the application's existing UI patterns to keep the experience simple and consistent. ## Requirements ### Admin access * [ ] Create an admin-only events management section/page. * [ ] Protect the frontend route so non-admin users cannot access it. * [ ] Reuse the existing authentication/user role information and UI patterns. * [ ] Handle unauthorized/forbidden access appropriately. ### View all events * [ ] Create an **All Events** admin page. * [ ] Fetch and display all events using the existing `GET /events` endpoint. * [ ] Keep the layout simple, clean, and consistent with the existing frontend. * [ ] Display the relevant event information clearly. * [ ] Add an **Update** button for each event. * [ ] Add a **Delete** button for each event. * [ ] Add appropriate loading, empty, and error states. * [ ] Confirm before deleting an event. * [ ] Refresh/update the event list after successful mutations. ### Create new event * [ ] Create a **New Event** page/form. * [ ] Use the existing `POST /events` backend endpoint. * [ ] Add appropriate form validation. * [ ] Show useful validation/API errors. * [ ] Show a success state after creating an event. * [ ] Redirect back to the events list after successful creation where appropriate. ### Update event * [ ] Create the edit/update flow for an existing event. * [ ] Populate the form with the selected event's current data. * [ ] Use the existing `PATCH /events/:eventId` endpoint. * [ ] Show loading, success, and error states. ### Delete event * [ ] Use the existing `DELETE /events/:eventId` endpoint. * [ ] Require confirmation before deletion. * [ ] Handle API errors gracefully. * [ ] Remove the deleted event from the UI after success. ## API routes The frontend should integrate with these existing backend routes: * `GET /events` — fetch all events * `POST /events` — create an event * `PATCH /events/:eventId` — update an event * `DELETE /events/:eventId` — delete an event Admin mutations require JWT authentication and the admin role. ## UI/UX * [ ] Keep the UI minimal and consistent with the existing application. * [ ] Reuse existing components, buttons, forms, spacing, typography, and notification patterns where possible. * [ ] Avoid introducing unnecessary UI complexity. * [ ] Make destructive actions visually clear. * [ ] Ensure the pages work well on common desktop/tablet screen sizes. ## Quality checks Before marking the issue complete: * [ ] Run lint. * [ ] Run formatter. * [ ] Run the project's test suite. * [ ] Fix any lint, formatting, or test failures. * [ ] Verify admin authorization and event CRUD flows manually. * [ ] Ensure no existing frontend functionality is broken. ## Acceptance Criteria An authenticated admin can: 1. Open the admin event management page. 2. View all existing events. 3. Create a new event. 4. Edit an existing event. 5. Delete an existing event after confirmation. A non-admin user cannot access the admin event management UI or perform admin event operations. All linting, formatting, and tests pass successfully.
codeOuvre sur GitHub