Frontend Overview

The OptimaAi frontend is a Next.js application styled with Tailwind CSS. It provides a role-aware dashboard that visualises ML predictions, KPI trends, AI recommendations, and dataset management in real time.

Tech Stack

Technology	Purpose
Next.js 14	React framework, routing, SSR
Tailwind CSS	Utility-first styling
Recharts / Chart.js	Data visualisation
Axios / fetch	REST API calls to FastAPI backend

Setup

git clone https://github.com/your-org/optimaai-frontend.git
cd optimaai-frontend
 
npm install

Create a .env.local file:

NEXT_PUBLIC_API_URL=http://localhost:8000

Run the development server:

npm run dev

The app is available at http://localhost:3000.

User Roles

The frontend adapts its dashboard view based on the selected role. Three primary roles are supported:

Role	Focus
Sales Manager	Churn risk table, revenue forecast, order-level predictions
Finance Controller	KPI metrics, forecast accuracy, model performance
Executive	High-level trends, AI recommendation summary, BMC

ℹ️ Note: Role selection is a UI state — it controls which recommendation is fetched from /api/v1/recommend and which KPI cards are highlighted.