Skip to content

[FE-03] Build Booking Trends Line Chart for admin analytics dashboard #982

@devwums

Description

@devwums

Problem

The admin analytics dashboard has no booking trend visualisation. Admins cannot spot weekly or monthly usage patterns at a glance.

Proposed Solution

Create frontend/cntr/charts/BookingTrendsChart.tsx using the installed recharts library. Renders a LineChart with two lines: "New Bookings" (blue) and "Cancellations" (red) over a time axis. Props: data: { date: string, bookings: number, cancellations: number }[], period: 'week' | 'month'. Shows a skeleton when data is empty. All implementation must live inside frontend/cntr/.

Acceptance Criteria

  • File at frontend/cntr/charts/BookingTrendsChart.tsx
  • Uses recharts LineChart, Line, XAxis, YAxis, Tooltip, Legend, ResponsiveContainer
  • Two distinct coloured lines as specified
  • Responsive — uses ResponsiveContainer with 100% width
  • Shows a loading placeholder when data.length === 0
  • Test in frontend/cntr/charts/BookingTrendsChart.test.tsx

Metadata

Metadata

Assignees

Labels

Stellar WaveIssues in the Stellar wave program

Type

No type
No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions