DOC
Accueil/ Projets/ MJY Task Platform/ Rapport d'Audit Technique et Stratégie de Refactoring

Rapport d'Audit Technique et Stratégie de Refactoring

Projet : Plateforme MJY Holding
Auteur : Expert en Architecture Logicielle & Développeur Frontend Senior
Date : 6 juillet 2026

1. Analyse Logique du Code Monolithique Actuel

Le fichier unique index.html (4231 lignes) regroupe de manière monolithique des responsabilités qui violent le principe de responsabilité unique (SRP). Voici les principales couches logiques identifiées dans le fichier d'origine :

A. Couche Accès aux Données, Caching & Synchronisation (Lignes 35 - 551)

  • Client API Blobs : cloudClient qui effectue des requêtes HTTP vers l'API serverless Netlify (/.netlify/functions/storage).
  • Gestion de Cache local & Storage : loadS, saveS, _flush gérant la lecture/écriture synchrone dans un cache en mémoire (_cache) et asynchrone déboguée (setTimeout à 300ms) dans le cloud et dans le localStorage.
  • Résolution de verrous et courses critiques : withWriteLock et flushNow pour empêcher les réécritures concurrentes lors des imports ou écritures massives.
  • Script de Migration : migrateLegacyWsIds chargé de corriger le bug historique des IDs de projets doublement préfixés en ws_ws_.
  • Mécanisme de Polling : pollCloud effectuant un appel de synchronisation périodique toutes les 4 secondes pour récupérer l'état distant.

B. Couche Imports / Exports et Sauvegardes (Lignes 553 - 601)

  • Formatage JSON : exportData assemble les clés (hors données de session et clés API) sous forme de fichier JSON téléchargeable.
  • Restauration : importData lit un fichier JSON téléchargeable et écrase le localStorage local.

C. Constantes Métier et Utilitaires (Lignes 603 - 716)

  • Configuration de sécurité d'origine : Codes PIN partagés (ADMIN_PIN = "1052", EMPLOYEE_PIN = "4011", SUPER_MANAGER_PIN = "9999") et adresses e-mails des super-administrateurs.
  • Graines de données (Seeds) : Liste initiale des projets (INIT_WS) et des membres par défaut (INIT_MEMBERS).
  • Axe métiers (Pillars) : Configuration des axes et codes couleurs pour Miyan Noodles (miyan), ENGWE France (engwe) et les projets par défaut (default).
  • Calculs métiers : Calcul des jours restants (daysLeft), badges d'échéance (dueBadge), calcul d'avancement des phases (getPhaseProgress).

D. Composants d'Interface UI Atomes (Lignes 718 - 806)

  • Composants génériques inline : Modal, Btn (Boutons avec états primary, danger, ghost, success), Tag (Badges de statut, priorité ou échéance), BackupButtons (Boutons de sauvegarde/chargement de fichier).

E. Composants Applicatifs Métier (Lignes 808 - 2525)

  • VocalTaskCreator : Composant de reconnaissance vocale et de parsing de langage naturel pour créer une tâche.
  • Auth : Écran de connexion basé sur la sélection de compte et la saisie de code PIN.
  • TaskDetail : Boîte de dialogue détaillée de tâche, incluant le workflow de validation pour collaborateur et l'ajout de notes.
  • TaskForm : Formulaire de création et de modification de tâche.
  • TaskCard : Élément visuel de rendu d'une tâche.
  • StatsBar : Filtre et compteur global de statistiques opérationnelles.
  • ProjectModal : Formulaire de configuration des projets.
  • MemberModal : Formulaire de configuration des collaborateurs.
  • ImportProjectModal : Outil d'importation de texte libre ou PDF piloté par l'API d'importation IA (Anthropic).
  • PhasesManagerModal : Gestionnaire manuel des phases.
  • GroupedListView et PhaseGroupView : Composants de structuration et d'affichage des listes de tâches.

F. Vues Dashboards & Logique de Routage (Lignes 2527 - 4231)

  • AdminDashboard : Tableau de bord pour les managers du projet.
  • SuperManagerView : Vue d'ensemble globale de l'avancement inter-projets et de la gestion de l'équipe pour les administrateurs généraux.
  • EmployeeView : Vue simplifiée pour les collaborateurs (uniquement leurs tâches assignées et leurs soumissions en cours).
  • SyncMenu : Modale de résolution manuelle de synchronisation cloud.
  • App : Racine gérant le cycle de vie de l'hydratation initiale, le polling global et l'aiguillage selon le rôle de l'utilisateur connecté.

2. Plan de Découpage de l'Architecture Cible (Vite / React)

Pour assurer la modularité et respecter les normes de développement de pointe, le monolithe sera découpé en modules distincts répartis au sein du dossier src/ :

graph TD
    App[App.jsx / Root] --> Auth[pages/Auth.jsx]
    App --> AdminDash[pages/AdminDashboard.jsx]
    App --> SuperDash[pages/SuperManagerDashboard.jsx]
    App --> EmployeeDash[pages/EmployeeDashboard.jsx]

    AdminDash --> TaskList[components/tasks/TaskList.jsx]
    AdminDash --> StatsBar[components/tasks/StatsBar.jsx]

    TaskList --> TaskCard[components/tasks/TaskCard.jsx]
    TaskList --> TaskDetail[components/tasks/TaskDetail.jsx]

    TaskDetail --> Comments[components/tasks/CommentJournal.jsx]

    AdminDash --> ProjectMod[components/projects/ProjectModal.jsx]
    AdminDash --> PhaseMod[components/projects/PhasesManager.jsx]
    AdminDash --> MemberMod[components/members/MemberModal.jsx]
    AdminDash --> ImportMod[components/import/ImportModal.jsx]
    AdminDash --> VocalMod[components/tasks/VocalCreator.jsx]

    useTasks[hooks/useTasks.js] -.-> TaskList
    useAuth[hooks/useAuth.js] -.-> App
    supabase[services/supabaseClient.js] -.-> useTasks

A. Découpage en Composants React (src/components/)

📁 src/components/common/ (Composants Génériques)

  • Modal.jsx : Boîte de dialogue générique avec en-tête et bouton de fermeture.
  • Button.jsx : Bouton stylisé avec gestion des variantes (primary, danger, ghost, success) et de l'état disabled.
  • Tag.jsx : Badge coloré pour afficher les statuts, priorités et échéances.

📁 src/components/tasks/ (Gestion des Tâches)

  • TaskCard.jsx : Carte interactive affichant le titre de la tâche, les badges (priorité, échéance, axe, notes), le responsable et permettant le changement rapide de statut par cycle.
  • TaskDetail.jsx : Fenêtre modale affichant les détails complets d'une tâche (notes, journal, assignation, suppression, et boutons d'approbation/rejet pour le workflow de validation).
  • TaskForm.jsx : Formulaire de création et d'édition de tâche, adapté au mode classique ou "tâche personnelle" (selfMode).
  • StatsBar.jsx : Rangée de cartes cliquables affichant le décompte des tâches selon leur statut pour servir de filtre.
  • CommentJournal.jsx : Section interne à la modale de détails affichant le fil des commentaires collaboratifs et permettant d'en poster de nouveaux.
  • VocalCreator.jsx : Modale orchestrant la dictée de tâche (Speech API), le parsing local d'échéances et la relecture finale.

📁 src/components/projects/ (Gestion des Projets)

  • ProjectModal.jsx : Formulaire de création et d'édition de projet (choix d'emoji et de palette de couleur).
  • PhasesManager.jsx : Modale permettant d'ajouter, réordonner (haut/bas) et assigner des plages de jours relatifs (J1 → Jn) aux phases du projet.

📁 src/components/members/ (Gestion de l'Équipe)

  • MemberModal.jsx : Formulaire d'ajout et de modification des collaborateurs (attribution de l'email, rôle, PIN unique et projets associés).

📁 src/components/import/ (Assistant d'Import IA)

  • ImportModal.jsx : Interface modale d'importation de texte brut, gérant les phases d'analyse (appel à l'API), de complétion des emails des nouveaux membres détectés et de prévisualisation des tâches et phases générées.

B. Vues et Pages Principales (src/pages/)

  • Auth.jsx : Écran d'accueil de la plateforme permettant de sélectionner son rôle/compte et de s'authentifier par PIN.
  • AdminDashboard.jsx : Tableau de bord complet des managers d'entité avec filtres par projet, axe et sélecteur de vue (Liste vs Phases).
  • SuperManagerDashboard.jsx : Interface globale des dirigeants (Marco & Julien) affichant des statistiques cumulées, des taux d'avancement par manager, et les onglets de gestion de projets et de collaborateurs.
  • EmployeeDashboard.jsx : Tableau de bord simplifié centré uniquement sur les tâches assignées au collaborateur connecté, ses validations et sa création de tâches personnelles.

C. Fonctions Utilitaires (src/utils/)

  • dateHelpers.js : Regroupe les fonctions de date daysLeft et fmtDate.
  • uid.js : Générateur d'identifiants uniques pour les tâches ou commentaires locaux (uid).
  • taskHelpers.js : Contient la logique métier pure dueBadge, getPriority, getStatus, et getPhaseProgress.

3. Stratégie d'Extraction des Services et des Hooks Personnalisés

Afin d'implémenter l'Option B (migration Supabase) recommandée par le brief, la logique de persistance et de synchronisation clé-valeur historique sera remplacée par des hooks et services réactifs.

A. Services Externes (src/services/)

📄 src/services/supabaseClient.js (Nouveau Service Supabase)

Ce fichier initialise le client Supabase en utilisant les variables d'environnement du projet et expose les fonctions d'accès aux données. Il remplace le stockage clé-valeur JSON monolithique de localStorage par des requêtes de base relationnelle.

  • Projets : getProjects(), createProject(), updateProject(), deleteProject().
  • Phases : getPhases(projectId), savePhases(phases).
  • Tâches : getTasks(projectId), createTask(), updateTask(), deleteTask().
  • Notes : getNotes(taskId), addNote().
  • Membres : getMembers(), saveMember().

📄 src/services/aiService.js (Service d'Import IA)

  • Encapsule les requêtes vers la Netlify Function /api/import (appelant le modèle claude-haiku-4-5-20251001 d'Anthropic). Gère la structuration des projets en JSON et le mode "append" (ajout de tâches et phases).

📄 src/services/speechService.js (Service Vocal)

  • Initialise l'API de reconnaissance vocale du navigateur (SpeechRecognition) et fournit une API normalisée pour démarrer, arrêter et intercepter les transcriptions.

B. Hooks Personnalisés (src/hooks/)

📄 src/hooks/useAuth.js

Gère la session utilisateur, la vérification du code PIN en local ou via Supabase, et conserve les jetons d'authentification en stockage local et sécurisé.

  • Méthodes exposées : login(member, enteredPin), logout(), user, role, isAuthenticated.

📄 src/hooks/useTasks.js

Gère l'état local des tâches, l'appel aux services Supabase (CRUD) et applique les filtres complexes (par statut, priorité, axe, projet, ou assignation).

  • Méthodes exposées : tasks, loading, error, createTask(), updateTask(), deleteTask().

📄 src/hooks/useRealtime.js (Nouveau Hook Temps Réel)

Ce hook s'abonne aux canaux de modification de Supabase pour propager instantanément les changements sans nécessiter de rafraîchissement (polling) toutes les 4 secondes.

  • S'abonne à la table tasks pour le projet actif.
  • Lors d'un événement INSERT, UPDATE ou DELETE, il met à jour instantanément le cache local géré par useTasks.js.
  • S'abonne à la table task_notes pour mettre à jour instantanément le fil des commentaires de la tâche activement ouverte.

4. Schéma de la Base de Données Cible (Supabase)

Pour éliminer définitivement les risques d'écrasement de données concurrentes, les données seront structurées sous forme de tables PostgreSQL dans Supabase selon le modèle relationnel suivant :

-- 1. Table des Projets
CREATE TABLE projects (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    name VARCHAR(255) NOT NULL,
    emoji VARCHAR(10) DEFAULT '🏢',
    color VARCHAR(7) DEFAULT '#6366F1',
    created_at TIMESTAMP WITH TIME ZONE DEFAULT timezone('utc'::text, now()) NOT NULL
);

-- 2. Table des Phases de Projet
CREATE TABLE phases (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    project_id UUID REFERENCES projects(id) ON DELETE CASCADE,
    name VARCHAR(255) NOT NULL,
    day_start INTEGER,
    day_end INTEGER,
    position INTEGER NOT NULL, -- Remplace l'ordre
    created_at TIMESTAMP WITH TIME ZONE DEFAULT timezone('utc'::text, now()) NOT NULL
);

-- 3. Table des Collaborateurs et Rôles
CREATE TABLE members (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    name VARCHAR(255) NOT NULL,
    email VARCHAR(255) UNIQUE NOT NULL,
    role VARCHAR(50) CHECK (role IN ('super_manager', 'manager', 'employee')) DEFAULT 'employee',
    pin_hash VARCHAR(60), -- Hachage du code PIN pour la sécurité
    created_at TIMESTAMP WITH TIME ZONE DEFAULT timezone('utc'::text, now()) NOT NULL
);

-- Table de liaison Projet <=> Membres (relation Many-to-Many)
CREATE TABLE project_members (
    project_id UUID REFERENCES projects(id) ON DELETE CASCADE,
    member_id UUID REFERENCES members(id) ON DELETE CASCADE,
    PRIMARY KEY (project_id, member_id)
);

-- 4. Table des Tâches
CREATE TABLE tasks (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    project_id UUID REFERENCES projects(id) ON DELETE CASCADE,
    phase_id UUID REFERENCES phases(id) ON DELETE SET NULL,
    title VARCHAR(255) NOT NULL,
    note TEXT, -- Consignes de la tâche
    status VARCHAR(50) CHECK (status IN ('todo', 'in_progress', 'pending_validation', 'done')) DEFAULT 'todo',
    priority VARCHAR(50) CHECK (priority IN ('blocking', 'high', 'normal')) DEFAULT 'normal',
    owner VARCHAR(255), -- Nom du collaborateur responsable
    manager VARCHAR(255), -- Nom du manager de suivi
    created_by VARCHAR(255), -- Email du créateur
    created_by_name VARCHAR(255), -- Nom du créateur
    created_by_role VARCHAR(50),
    created_at TIMESTAMP WITH TIME ZONE DEFAULT timezone('utc'::text, now()) NOT NULL,
    updated_at TIMESTAMP WITH TIME ZONE DEFAULT timezone('utc'::text, now()) NOT NULL,
    started_at TIMESTAMP WITH TIME ZONE,
    submitted_at TIMESTAMP WITH TIME ZONE, -- Pour la validation
    done_at TIMESTAMP WITH TIME ZONE,
    validated_by VARCHAR(255),
    validated_at TIMESTAMP WITH TIME ZONE,
    rejected_by VARCHAR(255),
    rejected_at TIMESTAMP WITH TIME ZONE
);

-- 5. Table des Notes / Commentaires de Tâche
CREATE TABLE task_notes (
    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
    task_id UUID REFERENCES tasks(id) ON DELETE CASCADE,
    author VARCHAR(255) NOT NULL,
    author_role VARCHAR(50) NOT NULL,
    body TEXT NOT NULL,
    created_at TIMESTAMP WITH TIME ZONE DEFAULT timezone('utc'::text, now()) NOT NULL
);

5. Stratégie de Transition et Migration

Pour assurer la transition en douceur du monolithe vers cette nouvelle structure :

  1. Script de seed et migration : Développer un script javascript transitoire (ex: src/services/migration.js) capable de lire le format d'export JSON actuel ( localStorage de l'ancienne version) et de peupler les tables Supabase correspondantes via l'API.
  2. Double authentification temporaire : Conserver la validation par PIN local dans un premier temps pour ne pas perturber l'expérience utilisateur, tout en stockant de manière sécurisée les PINs hachés (ou cryptés) dans la table members.
  3. Mode dégradé (Local Fallback) : En cas d'indisponibilité du réseau ou de Supabase, prévoir un repli propre vers le cache mémoire local avec alerte visuelle (badge réseau rouge/orange).