Admin Dashboard Overview (without chart)

[thaninbew]

Implement the dashboard overview section as depicted in the Figma Hi-Fi (double check, as design in image may have changed). This section includes donation statistics (Total, YTD, Monthly) and a personalized welcome message. IGNORE STATS CHART AND DONATION GOAL FOR NOW!

Backend

1. Enhance Donation Statistics Endpoint

Modify the existing GET /donations/stats endpoint or implement a more comprehensive one to return:

• Total Donations: Cumulative sum of all successful donations.
• YTD (Year to Date): Sum of successful donations from January 1st of the current year to now.
• This Month: Sum of successful donations from the 1st of the current month to now.

Files to Modify:

• apps/backend/src/donations/donations.service.ts
• apps/backend/src/donations/donations.controller.ts

2. User Identity

Verify and ensure GET /auth/me returns the display name or username for the welcome message.

Frontend

1. Dashboard Header Component

• Implement the "Welcome, [Username]" greeting using data fetched from the auth context/endpoint.

2. Donation Stats Cards

• Create a reusable card component for the "Donations Raised" section.
• Implement cards for Total, Year-to-date, and This Month. For icons, use lucide-react. No need to be exact.
• Fetch and display data from the updated backend stats endpoint.

Acceptance Criteria

• Ensure components handle loading and error states gracefully while fetching data.
• Maintain consistency with the existing Tailwind/shadcn UI.
• Match fonts and colors with Figma.