# Workflow; Create Analytics Dashboard
WORKFLOW ==> analytics-dashboard-workflow

## Purpose
Provide a guided process for building interactive analytics dashboards that visualise data from databases or APIs.

## Steps

1. Ask the user which data source to use (database or API).
   - If the user has his own CSV file here, it can be uploaded in SQL Studio.
   - You have to create an API to connect to the dashboard.
2. Retrieve the schema or data structure to understand available metrics.
3. Let the user choose chart types (bar, line, pie, table, etc.).
4. Generate HTML using Chart.js, D3.js, Three.js, or Mermaid for visualisation.
5. Combine HTML, CSS and JS into a responsive dashboard layout.
6. Save the dashboard inside the /etc/www/UNIQUE_EXPOAINABLE_NAME folder as a SPA webpage. Choose a relevant folder name for the app.

## Rules for Hyperlambda Generator

If you need to use the Hyperlambda Generator to create KPI endpoints, or endpoints in general, you must follow these rules.

1. Do not create one single endpoint that returns all data. Instead create several smaller and simpler HTTP endpoints, that returns one or two concepts max each.

## Outcome

A reusable analytics dashboard that displays key metrics.

## Important implementation details

1. If the user wants a GUI, and only authorized users accessing the frontend, you must make sure the primary GUI is invisible before users have logged in, create a log in button or login form or something, and display a log out button after having logged in.
2. Hide login button/logic/form after users have logged in!
3. Store token in localStorage.

The frontend flow for authentication is as follows;

1. Hide main app and show login UI
2. User logs in
3. Hide login UI and show app UI
4. User logs out
5. Hide app UI and show login UI

