Analytics Dashboard

Analytics Dashboard

The Analytics Dashboard is your central hub for all reporting and data analysis. It combines a date range selector, category navigation, report template browsing, and a custom report builder into a single, streamlined page.

Page header

The top of the page displays the title Analytics & Reports with the subtitle “50+ pre-built reports with custom report builder”. Two action buttons sit in the top-right corner:

• Recent — Opens your recently generated reports so you can quickly revisit previous analyses without searching the library
• Custom Report — Launches the Custom Report Builder view where you can create reports from scratch

Date range selector

Directly below the header is the date range card. It contains:

• Start date and End date input fields — Standard date pickers that let you define a precise reporting window
• Quick-select button group — Five buttons aligned to the right of the card: Today, Week, Month, Quarter, and Year

Clicking a quick-select button automatically sets the start and end dates. For example, clicking Month sets the start date to one month ago and the end date to today. The selected date range applies to all reports you generate during the session.

Your organisation’s default date range is configured under Configuration > Analytics Settings > General > Default Date Range. Options include This Week, This Month, This Quarter, This Year, Last 30 Days, and Last 90 Days.

Three primary views

The Analytics page operates in three views. Only one view is visible at a time, and you navigate between them using the interface controls:

1. Library — The default view. Browse and run pre-built report templates organised by category. Displayed as a sidebar with category list on the left and a three-column report card grid on the right.
2. Report Viewer — Opens when you run a report. Displays the report header, summary statistics, chart visualisation, and paginated data table. A back arrow returns you to the Library.
3. Custom Builder — Opens when you click Custom Report. A two-panel layout (8-column configuration panel and 4-column options panel) for building reports from scratch. A back arrow returns you to the Library.

Category sidebar

In the Library view, the left column (3 columns wide on desktop) displays a card with a compact list of report categories. Each category row shows:

• A colour-coded icon representing the category (e.g. tools icon for Equipment, clipboard for Projects, currency icon for Financial)
• The category name
• A count chip showing how many report templates are in that category

Clicking a category filters the report template grid to show only reports in that category. Clicking the same category again deselects it and shows all reports.

Report template grid

The right column (9 columns wide on desktop) displays report templates in a responsive grid — three cards per row on desktop, two on tablet, and one on mobile. Each report card contains:

• Icon and name — The report’s icon and title displayed in the card header
• Description — A brief explanation of what the report analyses, shown as a subtitle
• Featured chip — A blue “Featured” chip appears on the most commonly used report templates
• Play button — A small play icon in the card actions area that runs the report immediately

Clicking anywhere on a report card (or the play button) generates that report using the currently selected date range and switches to the Report Viewer.

Loading and error states

When a report is generating, the Report Viewer shows a centred circular progress indicator with the message “Generating report...”. If report generation fails, an error card appears with a red alert icon, the error message, and a Back to Reports button to return to the Library.

Real-time connection status

The useTenantAnalytics composable manages real-time data delivery. It connects via WebSocket and falls back to 30-second polling if the WebSocket connection is unavailable. The connection status is exposed as:

• statusLabel — A human-readable label (e.g. “Connected”, “Polling”, “Disconnected”)
• statusColor — A colour value for the indicator (green for connected, amber for polling, red for error)
• isDataStale — Becomes true if no metrics update has been received for more than 2 minutes
• timeSinceUpdate — Shows “Just now”, “3 mins ago”, or a timestamp depending on elapsed time

If data becomes stale, you can click Force Refresh to manually trigger a metrics fetch.

Auto-refresh behaviour

The dashboard automatically fetches initial metrics via the /api/dashboard/metrics endpoint on page load. After the initial fetch, real-time updates arrive through the WebSocket channel. If the WebSocket disconnects, polling takes over at 30-second intervals until the connection is restored.

Next steps

Continue to the next article to explore the full Report Library, including all 50+ pre-built report templates across the seven categories.