Admin (admin-stageconnect)

Application Next.js pour l'administration de la plateforme. Permet de gérer les utilisateurs, entreprises, universités, analyser les données, gérer les incidents et configurer le système.

Stack Technique

Framework et langage :

• Next.js 16.1.6 (App Router)
• React 19.2.3
• TypeScript 5.9.3

Librairies principales :

Catégorie	Librairies
UI	Radix UI, Lucide React, Tailwind CSS
État	@tanstack/react-query v5.90.21
Theming	next-themes v0.4.6
Animations	framer-motion v12.34.2
Date	dayjs, flatpickr
Graphiques	apexcharts, react-apexcharts, jsvectormap
Utils	react-hot-toast, cmdk (command palette), react-media-recorder

Outils de build :

• Tailwind CSS 3.4.19
• PostCSS 8.5.6
• ESLint 9.39.2 + eslint-config-next

Prérequis et Installation

Prérequis

• Node.js 18+
• npm ou pnpm

Installation

# Cloner le repo
git clone https://github.com/stageconnect/admin-stageconnect.git
cd admin-stageconnect

# Installer les dépendances
npm install

# Variables d'environnement
cp .env.local.example .env.local
# Modifier NEXT_PUBLIC_API_URL si nécessaire

# Lancer en développement
npm run dev

Build production

npm run build
npm start

Structure du Projet

admin-stageconnect/
├── app/                          # Pages Next.js (App Router)
│   ├── (dashboard)/              # Route group dashboard
│   │   ├── analytics/
│   │   ├── bugs/
│   │   ├── dashboard/
│   │   ├── documents/
│   │   ├── incidents/
│   │   ├── logs/
│   │   ├── messages/
│   │   ├── offers/
│   │   ├── pricing/
│   │   ├── reports/
│   │   ├── roles/
│   │   ├── settings/
│   │   ├── users/
│   │   ├── validations/
│   │   └── layout.tsx
│   ├── login/                   # Page connexion
│   ├── layout.tsx
│   ├── providers.tsx
│   ├── middleware.ts
│   └── page.tsx
├── components/
│   ├── ui/                     # Composants UI base
│   │   ├── button.tsx
│   │   ├── card.tsx
│   │   ├── input.tsx
│   │   ├── table.tsx
│   │   └── ...
│   ├── admin/                   # Composants admin
│   │   ├── analytics/
│   │   ├── bugs/
│   │   ├── dashboard/
│   │   ├── users/
│   │   ├── companies/
│   │   └── ...
│   ├── auth/
│   ├── common/
│   │   └── Feedback/
│   ├── Forms/
│   └── Layouts/
├── contexts/
│   ├── AuthContext.tsx          # Authentification
│   └── CompanyContext.tsx       # Données entreprise
├── hooks/
│   ├── useAuth.ts
│   ├── useAuthActions.ts
│   ├── useFormValidation.ts
│   ├── useThemes.ts
│   ├── useMultiStepForm.ts
│   ├── useRateLimiting.ts
│   ├── useBugReport.ts
│   ├── useContactForm.ts
│   ├── useMobile.ts
│   └── useClickOutside.ts
├── services/
│   ├── api.config.ts
│   ├── token.service.ts
│   ├── auth.api.ts
│   ├── admin.service.ts
│   ├── admin/
│   │   ├── dashboard.service.ts
│   │   ├── users.service.ts
│   │   ├── companies.service.ts
│   │   ├── universities.service.ts
│   │   └── ...
│   ├── student.*.services.ts (15+)
│   ├── company.*.services.ts (10+)
│   ├── mentor.*.services.ts (8+)
│   └── university.*.services.ts (8+)
├── providers/
│   └── QueryProvider.tsx        # TanStack Query
├── lib/
├── utils/
├── types/
└── constants/

Architecture et Principes SOLID

SRP (Single Responsibility Principle)

Bien respecté.

Exemples :

• hooks/useFormValidation.ts — Validation uniquement
• services/token.service.ts — Tokens uniquement

Violation potentielle :

• components/admin/dashboard/AdminDashboardStatic.tsx — Affiche des messages de test ("100% FONCTIONNEL") — composant factice/non terminé
• Doublons lib/ et utils/ —两者 font la même chose

OCP (Open/Closed Principle)

Bien respecté via class-variance-authority.

Exemple :

// components/ui/button.tsx
const buttonVariants = cva(...);
// Extensible via props variant et size

LSP (Liskov Substitution Principle)

Non applicable — Pas d'héritage de classes.

ISP (Interface Segregation Principle)

Bien respecté.

Props des composants bien segmentées.

DIP (Dependency Inversion Principle)

Bien respecté.

Exemple :

// contexts/AuthContext.tsx
// Dépend d'abstractions (authApiService, tokenService)
// Injection via imports

Patterns Utilisés

Custom Hooks (15+ fichiers)

Hook	Fichier	Rôle
useAuth	hooks/useAuth.ts	Authentification
useAuthActions	hooks/useAuthActions.ts	Actions auth
useAuthForgotPassword	hooks/useAuthForgotPassword.ts	Mot de passe oublié
useAuthRegister	hooks/useAuthRegister.ts	Inscription
useFormValidation	hooks/useFormValidation.ts	Validation formulaires
useMultiStepForm	hooks/useMultiStepForm.ts	Formulaires multi-étapes
useRateLimiting	hooks/useRateLimiting.ts	Rate limiting
useBugReport	hooks/useBugReport.ts	Signalement bugs
useContactForm	hooks/useContactForm.ts	Formulaire contact
useThemes	hooks/useThemes.ts	Gestion themes
useUserAvatar	hooks/useUserAvatar.ts	Avatar utilisateur
useMobile	hooks/use-mobile.ts	Détection mobile
useClickOutside	hooks/use-click-outside.ts	Détection clic extérieur

Context Providers

Provider	Fichier	Rôle
AuthProvider	contexts/AuthContext.tsx	Authentification
CompanyProvider	contexts/CompanyContext.tsx	Données entreprise
QueryProvider	providers/QueryProvider.tsx	TanStack Query
SidebarProvider	components/Layouts/sidebar/sidebar-context.tsx	Gestion sidebar

Compound Components

Non détectés.

HOC

Non détectés.

Gestion de l'État

Outils utilisés :

• TanStack Query — Cache et requêtes API (staleTime 5min, gcTime 10min, retry 2)
• React Context — AuthContext, CompanyContext, SidebarContext
• useState/useEffect — État local

Pas de Redux, Zustand, ou autre librairie.

Appels API

Bibliothèque

Fetch API native (pas Axios).

Configuration

Fichier : services/api.config.ts

const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000/api/v1';

Token JWT

Fichier : services/token.service.ts

• Stockage : localStorage + cookies
• Méthodes : saveTokens, getAccessToken, isAccessTokenExpired, clearTokens, etc.
• Refresh automatique : toutes les 60s avec buffer de 5 min
• Durée refresh token : 7 jours

Erreurs

Chaque service gère ses propres erreurs. Pas de gestionnaire centralisé.

Variables d'Environnement

Variable	Description	Valeur par défaut
NEXT_PUBLIC_API_URL	URL du backend	https://api.stageconnect.app/api/v1
NEXT_PUBLIC_SITE_URL	URL du site	https://admin.stageconnect.app

Lacunes et Dette Technique

Lacune	Fichier concerné	Priorité	Suggestion
Doublons services	auth.services.ts et auth.api.ts	Faible	Fusionner ou supprimer
Duplication API_URL	Chaque service redefinit la constante	Haute	Importer depuis api.config.ts
Composant factice	AdminDashboardStatic.tsx	Haute	Implémenter ou supprimer
lib/ et utils/ redondants	Les deux contiennent des utilitaires	Faible	Consolider en un seul dossier
Pas de tests	Aucun dossier tests	Haute	Ajouter Jest + Testing Library
Pas de storybook	Pas de documentation composants	Moyenne	Ajouter Storybook
Pas de gestion erreurs centralisée	Chaque service gère ses erreurs	Moyenne	Créer error-handler global
Middleware incomplet	Vérifie présence token, pas le rôle admin	Moyenne	Ajouter vérification rôle
Versions Next.js 16 / React 19	Très récentes, peut être instable	Faible	Surveiller les mises à jour