Create Analytics Section in Admin Dashboard #224
Description
Description
Add an Analytics section to the HackKit Admin Dashboard inspired by Google Analytics. Instead of Excel-like tables as the primary UI, implement a structured analytics experience with an overview page and structured subsections containing stats and graphs.
All charts and stats must support exporting (image + CSV). Some views may include sorting and filtering where appropriate.
Scope / Steps
1. Define all required metrics and graphs
- Create a complete list of all stats and graphs needed.
- For each stat/graph define:
- metric name + definition
- data source
- supported date range
- filters/sorting (if applicable)
- export requirements
2. Group metrics into subsections
- Organize all defined metrics into logical subsections.
- Clearly define which stats and graphs belong to each subsection.
- Do not finalize navigation approach yet — structure will be refined in a meeting.
3. Design overview (home analytics) page
- Define which key metrics appear on the main analytics page.
- Include high-level KPI cards and summary graphs.
- Ensure clean layout and scalable structure.
4. Design desktop layouts
- Define layout structure for each subsection.
- Handle loading, empty, and error states.
- Ensure consistency with existing Admin UI.
5. Design mobile-first analytics
- Create a dedicated mobile layout (not just responsive shrink).
- Reduce density.
- Reorganize or collapse less critical data.
- Ensure filters and export controls work properly on mobile.
6. Export functionality
- Every graph/stat must support:
- Export as image
- Export as CSV
- Export must respect active filters and date range.
7. Sorting & filtering
- Add sorting and filtering only where it provides value.
- Ensure consistent behavior across sections.
8. Library evaluation
- Use existing UI and chart components where possible.
- If current tools are insufficient, evaluate and introduce alternatives.
Below are some reference images: