# kougang/kafin-izilens architecture

> Architecture diagram of the GitHub repository kougang/kafin-izilens, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-28). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/kougang/kafin-izilens
- Repository: https://github.com/kougang/kafin-izilens

## Overview

This is a French-language React administration dashboard for an extraction service. Staff sign in, view service metrics, manage companies, API keys, plans, invoices, alerts and extraction activity; enterprise users see their quota, key, extraction history and invoices. The application routes by role, while pages call a shared data-access layer that uses mock data unless a backend URL is configured. Several page implementations are not sampled, so their links reflect the routes and API capabilities visible in the supplied source, not unverified internal behavior.

Main entry points: [`dashboard/src/App.jsx`](https://github.com/kougang/kafin-izilens/blob/main/dashboard/src/App.jsx) (Role-based routes), [`dashboard/src/services/api.js`](https://github.com/kougang/kafin-izilens/blob/main/dashboard/src/services/api.js) (Data API), [`dashboard/src/auth.jsx`](https://github.com/kougang/kafin-izilens/blob/main/dashboard/src/auth.jsx) (Auth provider), [`dashboard/src/main.jsx`](https://github.com/kougang/kafin-izilens/blob/main/dashboard/src/main.jsx) (App bootstrap)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_application["Application shell"]
  node_main["App bootstrap<br/>[main.jsx]"]
  node_routes["Role-based routes<br/>[App.jsx]"]
  node_layout["Authenticated layout<br/>[Layout.jsx]"]
end

subgraph group_access["Identity and access"]
  node_auth["Auth provider<br/>[auth.jsx]"]
  node_login["Login<br/>[Login.jsx]"]
end

subgraph group_operations["Operations dashboard"]
  node_overview["Service overview<br/>[Overview.jsx]"]
  node_companies["Company management<br/>[Companies.jsx]"]
  node_keys["API key management<br/>[ApiKeys.jsx]"]
  node_extractions["Extraction activity<br/>[Extractions.jsx]"]
  node_alerts["Alerts<br/>[Alerts.jsx]"]
  node_client["Enterprise space<br/>[ClientSpace.jsx]"]
end

subgraph group_commercial["Plans and billing"]
  node_plans["Plan management<br/>[Plans.jsx]"]
  node_billing["Invoice management<br/>[Billing.jsx]"]
end

subgraph group_data["Data access"]
  node_api["Data API<br/>[api.js]"]
  node_mock[("Mock data store<br/>[mock.js]")]
end

node_user(("Dashboard user"))
node_backend["Configured API backend"]

node_user -->|"opens dashboard"| node_main
node_main -->|"renders app"| node_routes
node_main -->|"provides auth"| node_auth
node_routes -->|"checks roles"| node_auth
node_routes -->|"renders routes"| node_layout
node_routes -->|"routes login"| node_login
node_routes -->|"routes overview"| node_overview
node_routes -->|"routes companies"| node_companies
node_routes -->|"routes keys"| node_keys
node_routes -->|"routes extractions"| node_extractions
node_routes -->|"routes alerts"| node_alerts
node_routes -->|"routes enterprise"| node_client
node_routes -->|"routes plans"| node_plans
node_routes -->|"routes billing"| node_billing
node_login -->|"submits credentials"| node_auth
node_auth -->|"logs in"| node_api
node_overview -->|"loads statistics"| node_api
node_companies -->|"loads and updates"| node_api
node_keys -->|"manages keys"| node_api
node_extractions -->|"loads extractions"| node_api
node_alerts -->|"loads and resolves"| node_api
node_client -->|"loads own space"| node_api
node_plans -->|"loads and saves"| node_api
node_billing -->|"loads and reminds"| node_api
node_api -->|"reads and mutates"| node_mock
node_api -.->|"fetches when configured"| node_backend

click node_main "https://github.com/kougang/kafin-izilens/blob/main/dashboard/src/main.jsx"
click node_routes "https://github.com/kougang/kafin-izilens/blob/main/dashboard/src/App.jsx"
click node_layout "https://github.com/kougang/kafin-izilens/blob/main/dashboard/src/Layout.jsx"
click node_auth "https://github.com/kougang/kafin-izilens/blob/main/dashboard/src/auth.jsx"
click node_login "https://github.com/kougang/kafin-izilens/blob/main/dashboard/src/pages/Login.jsx"
click node_overview "https://github.com/kougang/kafin-izilens/blob/main/dashboard/src/pages/Overview.jsx"
click node_companies "https://github.com/kougang/kafin-izilens/blob/main/dashboard/src/pages/Companies.jsx"
click node_keys "https://github.com/kougang/kafin-izilens/blob/main/dashboard/src/pages/ApiKeys.jsx"
click node_extractions "https://github.com/kougang/kafin-izilens/blob/main/dashboard/src/pages/Extractions.jsx"
click node_alerts "https://github.com/kougang/kafin-izilens/blob/main/dashboard/src/pages/Alerts.jsx"
click node_client "https://github.com/kougang/kafin-izilens/blob/main/dashboard/src/pages/ClientSpace.jsx"
click node_plans "https://github.com/kougang/kafin-izilens/blob/main/dashboard/src/pages/Plans.jsx"
click node_billing "https://github.com/kougang/kafin-izilens/blob/main/dashboard/src/pages/Billing.jsx"
click node_api "https://github.com/kougang/kafin-izilens/blob/main/dashboard/src/services/api.js"
click node_mock "https://github.com/kougang/kafin-izilens/blob/main/dashboard/src/services/mock.js"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_main,node_routes,node_layout,node_user toneBlue
class node_auth,node_login toneAmber
class node_overview,node_companies,node_keys,node_extractions,node_alerts,node_client,node_backend toneMint
class node_plans,node_billing toneRose
class node_api,node_mock toneIndigo
```

## Components

### Application shell

- [App bootstrap](https://github.com/kougang/kafin-izilens/blob/main/dashboard/src/main.jsx): `dashboard/src/main.jsx`
- [Role-based routes](https://github.com/kougang/kafin-izilens/blob/main/dashboard/src/App.jsx): `dashboard/src/App.jsx`
- [Authenticated layout](https://github.com/kougang/kafin-izilens/blob/main/dashboard/src/Layout.jsx): `dashboard/src/Layout.jsx`

### Identity and access

- [Auth provider](https://github.com/kougang/kafin-izilens/blob/main/dashboard/src/auth.jsx): `dashboard/src/auth.jsx`
- [Login](https://github.com/kougang/kafin-izilens/blob/main/dashboard/src/pages/Login.jsx): `dashboard/src/pages/Login.jsx`

### Operations dashboard

- [Service overview](https://github.com/kougang/kafin-izilens/blob/main/dashboard/src/pages/Overview.jsx): `dashboard/src/pages/Overview.jsx`
- [Company management](https://github.com/kougang/kafin-izilens/blob/main/dashboard/src/pages/Companies.jsx): `dashboard/src/pages/Companies.jsx`
- [API key management](https://github.com/kougang/kafin-izilens/blob/main/dashboard/src/pages/ApiKeys.jsx): `dashboard/src/pages/ApiKeys.jsx`
- [Extraction activity](https://github.com/kougang/kafin-izilens/blob/main/dashboard/src/pages/Extractions.jsx): `dashboard/src/pages/Extractions.jsx`
- [Alerts](https://github.com/kougang/kafin-izilens/blob/main/dashboard/src/pages/Alerts.jsx): `dashboard/src/pages/Alerts.jsx`
- [Enterprise space](https://github.com/kougang/kafin-izilens/blob/main/dashboard/src/pages/ClientSpace.jsx): `dashboard/src/pages/ClientSpace.jsx`

### Plans and billing

- [Plan management](https://github.com/kougang/kafin-izilens/blob/main/dashboard/src/pages/Plans.jsx): `dashboard/src/pages/Plans.jsx`
- [Invoice management](https://github.com/kougang/kafin-izilens/blob/main/dashboard/src/pages/Billing.jsx): `dashboard/src/pages/Billing.jsx`

### Data access

- [Data API](https://github.com/kougang/kafin-izilens/blob/main/dashboard/src/services/api.js): `dashboard/src/services/api.js`
- [Mock data store](https://github.com/kougang/kafin-izilens/blob/main/dashboard/src/services/mock.js): `dashboard/src/services/mock.js`

### Other components

- **Dashboard user**
- **Configured API backend**

## Connections

- Dashboard user → App bootstrap: opens dashboard
- App bootstrap → Role-based routes: renders app
- App bootstrap → Auth provider: provides auth
- Role-based routes → Auth provider: checks roles
- Role-based routes → Authenticated layout: renders routes
- Role-based routes → Login: routes login
- Role-based routes → Service overview: routes overview
- Role-based routes → Company management: routes companies
- Role-based routes → API key management: routes keys
- Role-based routes → Extraction activity: routes extractions
- Role-based routes → Alerts: routes alerts
- Role-based routes → Enterprise space: routes enterprise
- Role-based routes → Plan management: routes plans
- Role-based routes → Invoice management: routes billing
- Login → Auth provider: submits credentials
- Auth provider → Data API: logs in
- Service overview → Data API: loads statistics
- Company management → Data API: loads and updates
- API key management → Data API: manages keys
- Extraction activity → Data API: loads extractions
- Alerts → Data API: loads and resolves
- Enterprise space → Data API: loads own space
- Plan management → Data API: loads and saves
- Invoice management → Data API: loads and reminds
- Data API → Mock data store: reads and mutates
- Data API → Configured API backend: fetches when configured