Issue #77 — Frontend: Admin Analytics Page

[yusuftomilola]

Location: frontend/app/admin/analytics/page.tsx

Description

Admins need a dedicated analytics page that presents platform-wide business intelligence in a clear, scannable layout. The page shows stat cards for revenue, bookings, and occupancy, a 6-month revenue bar chart, and leaderboard tables for top workspaces and top members. A date range filter at the top allows admins to scope all figures to a specific time window.

Acceptance Criteria

• The page lives at frontend/app/admin/analytics/page.tsx and is marked "use client"
• The page is wrapped in DashboardLayout
• Analytics data is fetched using useGetAdminAnalytics from Issue Device Tracker #76
• A date range filter (two date inputs: From and To) is shown at the top of the page with Apply and Clear buttons. Applying the filter re-fetches with the selected range; clearing resets to all-time data. A Refresh icon button manually re-triggers the query
• Revenue section — 4 stat cards: Total Revenue, This Month, Last Month, Invoices Paid (with "of N total" sub-label). All monetary values displayed in ₦
• Bookings section — 4 stat cards: Total, Pending, Confirmed, Completed. Totals are derived by summing the byStatus map from the response
• Occupancy section — 3 stat cards: Occupancy Rate (%), Occupied Seats (with "of N total seats" sub-label), Active Workspaces. A horizontal progress bar below the cards shows seat utilisation visually
• Revenue trend section — a simple bar chart built with plain div elements (no charting library required). Each bar represents one month from the 6-month trend array, proportionally scaled to the maximum month's value. Month labels shown below each bar
• Top Workspaces — a ranked list showing workspace name, booking count, and total revenue in ₦. Only shown when topWorkspaces.length > 0
• Top Members — a ranked list showing member full name and total spend in ₦. Only shown when topMembers.length > 0
• Loading skeleton shown while data fetches; empty state shown when no analytics data is available
• npx tsc --noEmit passes with no errors