EcoIQ Platform Module

EcoIQ Frontend Implementation Roadmap

Plan Django, Next.js, Microsoft and Google Stitch frontend delivery.

EcoIQ Frontend Implementation Roadmap defines how EcoIQ should evolve from the current Django template interface into a polished enterprise SaaS product. It explains which pages should stay in Django, which should later move to Next.js/React, how Google Stitch mockups become production UI, and how Microsoft ecosystem interfaces such as Teams, Power BI, SharePoint and Fluent UI should fit into the product.

Core purpose: Turn EcoIQ visual design into an executable frontend delivery plan.

Open Frontend Roadmap View Phase 1 Django Plan View Next.js SaaS Plan View Microsoft UI Plan View Google Stitch Workflow View Library Matrix Open Command Centre UI Plan Open Mobile PWA Plan Export Frontend Roadmap

Connected EcoIQ Modules

Frontend Experience & Google Stitch Design System

Supplies the visual style, library stack and Stitch prompt library this roadmap sequences.

Visual Dashboard UI Upgrade

Supplies the current /platform/ hero, module directory and trust badge components.

Microsoft Ecosystem Core Stack

Supplies the Microsoft-ready building blocks Phase 4 sequences into the product.

API & Integration Layer

Supplies the API surface the Next.js frontend in Phase 3 would consume.

Command Centre

First Priority 2 target for interactive dashboards and later a Next.js app.

Asset Passport

First Priority 2 target for a dedicated Next.js workspace.

Country Transition Atlas

Target for map filters in Phase 2 and a full map explorer in Phase 3.

Knowledge Graph & Relationship Map

Target for a Cytoscape.js teaser in Phase 2 and a React Flow explorer in Phase 3.

Mobile / iPad Inspection Mode

Target for a Next.js PWA in Phase 3.

Public Trust & Impact Portal

Stays in Django first — public, low-interactivity, high-trust surface.

Product Analytics & KPI Engine

Target for ECharts dashboards in Phase 2.

Security, Privacy & Compliance Centre

Governs permission checks for every phase, including Microsoft login.

Certification & Trust Badge Engine

Supplies the trust badge components reused across every phase.

Roadmap Phases

Phase 1 — Strengthen Django Frontend

Goal: Improve current EcoIQ quickly without a full rewrite.

Use

Django templatesTailwind CSSHTMXAlpine.jsApache EChartsLeaflet / MapLibreCytoscape.jsPDF.js

Best for

Platform pages
Module overview pages
Public Trust Portal
Basic dashboards
Static investor/government demos
Rapid iteration

Deliverables

Improved /platform/Reusable module cardsTrust badge componentsEvidence cardsDashboard heroMap teaserGraph teaserMobile responsive templates

Phase 2 — Interactive Django Dashboards

Goal: Add real interactivity without switching frontend stack yet.

Use

HTMX partial updatesAlpine.js filtersECharts dashboardsMapLibre mapsCytoscape graph viewsSortableJS KanbanPDF.js evidence viewer

Best for

Command Centre
Data Room
Knowledge Graph
Country Atlas
Product Analytics
AI Agent Operations Console

Deliverables

Filterable module directoryProject pipeline KanbanEvidence viewerGraph relationship explorerCountry map filtersDashboard charts

Phase 3 — Next.js SaaS Frontend

Goal: Build premium SaaS frontend when platform logic is mature.

Use

Next.jsReactTypeScriptTailwind CSSshadcn/uiFramer MotionReact FlowTanStack TableTanStack QueryApache EChartsMapLibre GLdeck.glpdf.jsCytoscape.js / Sigma.js

Best for

Logged-in application
Enterprise dashboards
Heavy graph/map interaction
Real-time agent console
Advanced table filtering
Multi-role UI
API-driven frontend

Deliverables

Next.js app shellRole-based navigationReact Flow Knowledge GraphInteractive Country AtlasCommand Centre appMobile Inspection PWAAPI client layerAuthentication integration

Phase 4 — Microsoft Enterprise Frontend

Goal: Make EcoIQ familiar and useful for Microsoft ecosystem partners and enterprise customers.

Use

Fluent UI ReactMicrosoft Teams ToolkitAdaptive CardsPower BI EmbeddedMSAL ReactMicrosoft Graph SDKSharePoint integrationDynamics 365 integration conceptMicrosoft Fabric dashboard concept

Best for

Teams approval workflows
Power BI executive dashboards
SharePoint evidence packs
Dynamics sales/customer pipeline
Enterprise login
Microsoft partner demos

Deliverables

Teams approval card templatesPower BI dashboard embedsSharePoint Data Room pack conceptDynamics CRM sync conceptMicrosoft login roadmapFluent UI component pack

Phase 5 — Google Stitch to Production Workflow

Goal: Use Google Stitch for fast UI concepts, then convert designs into tested code.

Workflow

Generate mockup in Google Stitch.
Review for EcoIQ design rules.
Convert layout to Django template or Next.js component.
Add real data fields.
Add tests.
Verify route.
Check no unsupported claims.
Ship via PR.

Google Stitch is for design prototyping, not production guarantee.

Page-by-Page Frontend Decision Table

Pages to keep in Django first

//platform/Module overview pagesPublic Trust PortalRevenue/Pricing pagesExecutive Briefing pagesFrontend Design System pages

Pages to make interactive in Django first

Command CentreCountry AtlasKnowledge GraphData RoomProduct AnalyticsAI Agent Operations Console

Pages to move to Next.js later

Logged-in Command Centre appAsset Passport workspaceMobile Inspection PWAKnowledge Graph explorerCountry Atlas explorerData Room file managerAgent Operations ConsoleCustomer Success dashboard

Pages to integrate with Microsoft later

Teams approval queuePower BI dashboardsSharePoint evidence packsDynamics CRM pipelineFabric analytics workspace

Frontend Library Decision Matrix

The frontend library decision matrix below shows use case, phase, priority, risk and why it matters for every library under consideration.

Library	Use case	Phase	Priority	Risk	Why it matters
Tailwind CSS	Utility-first styling for every Django page	Phase 1	High	Low	Fast, consistent styling without a build pipeline change.
HTMX	Partial page updates without full reloads	Phase 2	High	Low	Adds interactivity while keeping Django as the source of truth.
Alpine.js	Lightweight client-side filters and toggles	Phase 2	Medium	Low	Small footprint, no build step, pairs naturally with HTMX.
Apache ECharts	Dashboard charts and KPI visualisations	Phase 2	High	Low	Mature, free, works in both Django and Next.js.
MapLibre	Country Atlas interactive maps	Phase 2	High	Medium	Open-source map rendering without a vendor lock-in.
Leaflet	Lightweight asset/project map markers	Phase 1	Medium	Low	Simple, well-documented, good fallback to MapLibre.
Cytoscape.js	Knowledge Graph relationship rendering	Phase 2	High	Medium	Purpose-built for node-link graph interaction.
Sigma.js	Large-scale graph rendering alternative	Phase 3	Low	Medium	Better performance at very high node counts, if ever needed.
PDF.js	In-browser evidence document viewer	Phase 1	Medium	Low	Lets reviewers preview evidence without downloading files.
SortableJS	Drag-and-drop Kanban pipeline stages	Phase 2	Medium	Low	Small library that unlocks a familiar Kanban interaction.
Next.js	Premium SaaS application shell	Phase 3	High	Medium	Industry-standard React framework with routing and SSR built in.
React	Component model for the SaaS frontend	Phase 3	High	Medium	Required foundation for Next.js and the wider component ecosystem.
TypeScript	Type-safe frontend code across the SaaS app	Phase 3	High	Low	Reduces runtime errors as the frontend team and codebase grow.
shadcn/ui	Accessible, themeable component primitives	Phase 3	Medium	Low	Fast to theme into the dark institutional style without lock-in.
React Flow	Interactive Knowledge Graph explorer	Phase 3	High	Medium	Purpose-built React library for node-link diagrams.
TanStack Table	Advanced filtering/sorting for large tables	Phase 3	Medium	Low	Handles investor memo and data room tables at scale.
TanStack Query	Data fetching and caching against the API layer	Phase 3	High	Low	Keeps the SaaS frontend in sync with the API & Integration Layer.
Framer Motion	Subtle motion for cards and transitions	Phase 3	Low	Low	Adds polish without becoming a distracting animation layer.
Fluent UI React	Microsoft-style enterprise components	Phase 4	Medium	Medium	Makes EcoIQ feel native to Microsoft enterprise reviewers.
Power BI Embedded	Executive dashboard embeds	Phase 4	Medium	High	High business value but requires a licensing/embedding decision.
Microsoft Teams Toolkit	Teams approval card workflows	Phase 4	Medium	Medium	Lets approvals happen inside a tool reviewers already use daily.
MSAL React	Microsoft enterprise login integration	Phase 4	Low	High	Only needed once real Microsoft enterprise customers require SSO.
Microsoft Graph SDK	Document and permission access via Microsoft 365	Phase 4	Low	High	High integration value, but depends on confirmed partner access.

Design-to-Code Rules

Do not copy mockups blindly.
Convert every visual component into tested template/component code.
Every route must return 200.
Every route must avoid raw Django template tags.
Every module link must point to a real route.
Every badge must have clear meaning.
Every impact claim must distinguish estimated vs verified.
Every Microsoft reference must avoid unsupported certification/partner claims.
Every Maqasid/Mizan reference must remain ethical decision-support, not fatwa.
Public views must hide sensitive data.

UI Implementation Priorities

Priority 1

Platform dashboardTrust badge componentsModule directoryNavigationCTA consistency

Priority 2

Command Centre dashboardAsset Passport UICountry Atlas mapKnowledge Graph teaserPublic Trust Portal

Priority 3

Mobile InspectionAI Agent Operations ConsoleData Room Evidence ViewerProduct Analytics dashboard

Priority 4

Next.js PWATeams approvalsPower BI embedded dashboardsSharePoint evidence packs

Example Implementation Plan

30 days

Complete Django visual upgrade
Trust badges
Platform grouping
Google Stitch prompt library
Map/graph visual teasers

60 days

Interactive dashboards with HTMX/Alpine/ECharts
Map filters
Graph filters
Evidence viewer
Kanban pipeline

90 days

Decide Next.js app structure
Build API-first frontend prototype
Create Microsoft Teams approval demo
Create Power BI dashboard demo

Microsoft Partner Demo Flow

EcoIQ Microsoft-ready Industrial Intelligence Demo

Open Command Centre.
Show Country Atlas.
Click Asset Passport.
Open evidence panel.
Show Knowledge Graph trace.
Show Finance Ready badge.
Send approval to Teams.
Show Power BI dashboard concept.
Export evidence pack to SharePoint.
Show Public Trust summary.

Use wording: "designed to integrate with Microsoft ecosystem" — not "Microsoft certified" or "official partner".

Google Stitch Prompt Management

Prompt categories

Dashboard promptsAsset page promptsMap promptsGraph promptsMobile promptsPublic portal promptsMicrosoft partner UI prompts

Each prompt should store

Screen nameTarget userLayoutVisual styleRequired componentsForbidden styleProduction conversion notes

Safety and Governance

Frontend roadmap is an implementation plan, not a guarantee that all integrations are already live.
Microsoft ecosystem-ready does not mean Microsoft certified or Microsoft partner.
Google Stitch is used for prototyping and visual direction, not production deployment.
Public interfaces must protect sensitive data.
Trust badges are readiness/status labels unless formal certification is separately obtained.
Maqasid/Mizan remains ethical decision-support, not a fatwa.
Verified impact must remain separate from estimated impact.