Analyse et Améliorations Frontend - Optralis Dashboard¶

Date: 2 janvier 2026 Version: 1.0.0 Stack: Next.js 14 App Router + TypeScript + Tailwind CSS

Résumé Exécutif¶

Une analyse complète du frontend Optralis a été réalisée, couvrant : - Structure et architecture - Sécurité - Qualité du code - Performance

Verdict : ✅ BON avec améliorations structurelles apportées

1. Améliorations de Sécurité¶

1.1 Security Headers (Implémenté)¶

Ajout des headers de sécurité dans dashboard/next.config.js :

async headers() {
  return [{
    source: '/:path*',
    headers: [
      { key: 'X-Frame-Options', value: 'DENY' },
      { key: 'X-Content-Type-Options', value: 'nosniff' },
      { key: 'Referrer-Policy', value: 'strict-origin-when-cross-origin' },
      { key: 'Permissions-Policy', value: 'camera=(), microphone=(), geolocation=()' },
      { key: 'X-XSS-Protection', value: '1; mode=block' },
      { key: 'Strict-Transport-Security', value: 'max-age=31536000; includeSubDomains' },
    ],
  }];
}

Protection apportée : - X-Frame-Options: DENY - Empêche le clickjacking - X-Content-Type-Options: nosniff - Empêche le MIME sniffing - Referrer-Policy - Limite les informations dans le header Referer - Permissions-Policy - Désactive les APIs sensibles - X-XSS-Protection - Active la protection XSS du navigateur - HSTS - Force HTTPS

1.2 Audit npm¶

npm audit
# Résultat: 0 vulnerabilities

1.3 Points Forts Existants¶

✅ Tokens en HttpOnly cookies (pas de localStorage)
✅ Protection CSRF sur toutes les mutations
✅ Sanitization XSS avec DOMPurify
✅ Validation des mots de passe (12+ caractères)
✅ Encodage URL des paramètres dynamiques

2. Améliorations de la Qualité du Code¶

2.1 Error Handling Standardisé¶

Correction des patterns catch (error: any) vers catch (error: unknown) :

Fichiers corrigés : - components/AgentVersionList.tsx - components/ClientList.tsx - components/LicenseOverview.tsx - components/LicenseTypeList.tsx - app/dashboard/machines/[hostname]/page.tsx

Pattern recommandé :

try {
  await apiCall();
} catch (error: unknown) {
  const message = error instanceof Error ? error.message : 'Unknown error';
  // ou pour ApiError
  if (error instanceof ApiError && error.status === 429) {
    // Handle rate limit
  }
}

3. Architecture Modulaire¶

3.1 Structure API (`lib/api/`)¶

Une nouvelle structure modulaire a été créée pour le fichier lib/api.ts (2,793 lignes) :

lib/api/
├── index.ts              # Re-exports (backward compatible)
├── types.ts              # Interfaces et types
├── helpers.ts            # Fonctions utilitaires
├── constants.ts          # Constantes (COLLECTOR_TYPES, etc.)
├── client.ts             # Token management, ApiError
└── endpoints/
    ├── auth.ts           # login, logout, MFA
    ├── machines.ts       # CRUD machines
    ├── admin.ts          # Fonctions admin
    ├── notifications.ts  # Canaux de notification
    ├── alerts.ts         # Règles d'alertes
    ├── groups.ts         # Groupes et labels
    ├── settings.ts       # Paramètres et users
    ├── licenses.ts       # Gestion licences
    ├── ai.ts             # Configuration IA
    ├── public.ts         # Endpoints publics
    ├── docker.ts         # Gestion Docker
    └── fleet.ts          # Vue d'ensemble flotte

Usage (backward compatible) :

// Ancien import (continue de fonctionner)
import { getMachines, User } from '@/lib/api';

// Nouveau import modulaire (recommandé)
import { getMachines } from '@/lib/api/endpoints/machines';
import type { User } from '@/lib/api/types';

3.2 Structure i18n (`lib/i18n/`)¶

Structure préparée pour le découpage des traductions :

lib/i18n/
├── index.tsx             # Re-exports
├── README.md             # Documentation
└── translations/         # Futur: fichiers par domaine
    ├── landing.ts
    ├── dashboard.ts
    ├── admin.ts
    └── common.ts

Domaines de traduction identifiés : | Domaine | Clés | |---------|------| | landing | ~171 | | faq | ~115 | | admin | ~96 | | overview | ~86 | | machine | ~48 | | settings | ~37 | | common | ~32 |

3.3 Organisation des Composants¶

Nouvelle structure de dossiers créée :

components/
├── shared/          # Composants réutilisables (Modal, Skeleton, etc.)
├── dashboard/       # Composants dashboard
├── admin/           # Composants admin
├── charts/          # Graphiques (MetricsChart, etc.)
├── modals/          # Tous les modals
├── settings/        # Composants paramètres
├── landing/         # (existant) Landing page
├── overview/        # (existant) Fleet overview
├── icons/           # (existant) Icônes
└── README.md        # Guide de migration

4. Custom Hooks¶

4.1 useMachineDetails¶

Nouveau hook créé pour extraire la logique de app/dashboard/machines/[hostname]/page.tsx :

Fichier : hooks/useMachineDetails.ts

Usage :

const {
  details,
  inventory,
  isLoading,
  timeRange,
  setTimeRange,
  refreshData,
  handleDelete,
  handleForceCollect,
  handleSetMaintenance,
  handleClearMaintenance,
  handleExport,
  handleRevokeCert,
  handleRenewCert,
} = useMachineDetails({ hostname: 'machine-01' });

Fonctionnalités : - Gestion des données machine - Auto-refresh avec countdown - Actions CRUD - Gestion de la maintenance - Gestion des certificats

5. Métriques de Qualité¶

Avant vs Après¶

Métrique	Avant	Après
Security headers	1/6	6/6 ✅
npm vulnerabilities	0	0 ✅
`error: any` instances	8	0 ✅
Structure modulaire API	❌	✅
Structure modulaire i18n	❌	✅
Organisation composants	Partielle	Structure créée ✅
Custom hooks	2	3 ✅

6. Recommandations Futures¶

Priorité Haute¶

Migration progressive API
Déplacer le code de lib/api.ts vers les modules
Mettre à jour les imports au fur et à mesure
Split i18n
Séparer les traductions par domaine
Considérer next-intl pour le lazy loading
Token d'impersonation
Remplacer le passage par URL par POST + cookie
Fichier concerné : lib/auth.tsx lignes 70-88

Priorité Moyenne¶

CAPTCHA server-side
Remplacer le CAPTCHA client-side par reCAPTCHA v3
Fichier : components/landing/ContactForm.tsx
Refactoring pages volumineuses
machines/[hostname]/page.tsx (1,583 lignes)
settings/notifications/page.tsx (1,011 lignes)
Utiliser le pattern du hook useMachineDetails
Migration composants
Déplacer progressivement les composants vers les nouveaux dossiers
Mettre à jour les imports

7. Fichiers Clés¶

Modifiés¶

Fichier	Modification
`next.config.js`	Security headers
`components/AgentVersionList.tsx`	Error handling
`components/ClientList.tsx`	Error handling
`components/LicenseOverview.tsx`	Error handling
`components/LicenseTypeList.tsx`	Error handling
`app/dashboard/machines/[hostname]/page.tsx`	Error handling + ApiError import

Créés¶

Fichier	Description
`lib/api/index.ts`	Entry point module API
`lib/api/types.ts`	Types exportés
`lib/api/helpers.ts`	Fonctions utilitaires
`lib/api/constants.ts`	Constantes
`lib/api/client.ts`	Client HTTP
`lib/api/endpoints/*.ts`	11 fichiers endpoint
`lib/i18n/index.tsx`	Entry point module i18n
`lib/i18n/README.md`	Documentation i18n
`components/README.md`	Guide organisation
`hooks/useMachineDetails.ts`	Hook données machine

8. Tests Recommandés¶

Après déploiement, vérifier :

# Build sans erreurs
npm run build

# Pas de vulnérabilités
npm audit

# Fonctionnalités critiques
✓ Login/Logout
✓ Dashboard machines
✓ Page détail machine
✓ Admin panel
✓ Notifications
✓ Impersonation

Annexe : Commandes Utiles¶

# Vérifier les erreurs TypeScript
npm run build

# Audit de sécurité
npm audit

# Lister les composants
find dashboard/components -name "*.tsx" | wc -l

# Chercher les patterns à corriger
grep -r "error: any" dashboard/
grep -r "catch {}" dashboard/