Audit Technique Complet - Plateforme MJY Holding

Date : 7 juillet 2026 Périmètre : src/, server.js, netlify/functions/, seed-db.js, configuration, documentation, historique Git Version auditée : commit f00ce48 (branche main)

1. Résumé exécutif

Le projet a réussi sa migration d'un monolithe index.html (~4 200 lignes) vers une architecture React 18 + Vite modulaire, avec persistance Supabase (PostgreSQL + Realtime + RLS) et authentification par PIN signée en JWT côté serveur. La séparation en pages / components / services / utils est globalement saine et lisible.

Cependant l'audit relève :

Note globale de structure : conforme aux conventions React à ~70 %. Les fondations sont bonnes, mais la logique métier (auth, CRUD, synchro) n'a jamais été extraite dans hooks/ / context/ comme prévu par audit_refactoring.md - elle reste dispersée dans les pages et dans un singleton module (storage._cache).

2. Conformité à la structure d'un projet React

2.1 Arborescence observée

src/
├── App.jsx                 # Racine + routage par rôle + cycle d'hydratation
├── main.jsx                # Point d'entrée ReactDOM
├── index.css
├── assets/                 # Logos + .gitkeep
├── components/
│   ├── common/             # Button, Modal, Tag, BackupButtons, SyncMenu
│   ├── tasks/              # TaskCard, TaskDetail, TaskForm, StatsBar,
│   │                       #   GroupedListView, PhaseGroupView, VocalCreator
│   ├── projects/           # ProjectModal, PhasesManager
│   ├── members/            # MemberModal
│   └── import/             # ImportModal
├── pages/                  # Auth, AdminDashboard, SuperManagerDashboard, EmployeeDashboard
├── services/               # supabaseClient.js, storage.js
├── utils/                  # taskHelpers.js
├── hooks/                  # ⚠️ VIDE (.gitkeep seulement)
├── context/                # ⚠️ ABSENT (jamais créé)
└── __tests__/              # App.test.jsx

2.2 Verdict par convention

2.3 Y a-t-il des éléments « au mauvais endroit » ?

Oui, quelques-uns :

1. Logique métier dans les pages plutôt que dans hooks/. AdminDashboard.jsx (622 lignes) et SuperManagerDashboard.jsx (433 lignes) contiennent chacun la logique complète de CRUD tâches/projets/membres, la synchro et les filtres. saveMember, deleteProject, handleImportCreate, changeRole… devraient être des hooks réutilisables (useMembers, useProjects). Le code de saveMember/deleteMember/saveProject/deleteProject est quasi dupliqué à l'identique entre AdminDashboard et SuperManagerDashboard.

2. Re-export parasite dans un composant. components/common/SyncMenu.jsx:151 re-exporte forcePullFromCloud, forcePushToCloud, wipeCloud. Un composant UI ne doit pas ré-exporter des fonctions de service : c'est le rôle de services/storage.js.

3. window.__forceAppRerender (App.jsx:16) : mécanisme de rafraîchissement global via window. C'est un contournement de l'absence de state manager/Context - à remplacer par un Context ou un store.

4. Constantes de sécurité dans utils/. ADMIN_PIN, EMPLOYEE_PIN, SUPER_MANAGER_PIN, SUPER_ADMIN_EMAILS sont dans utils/taskHelpers.js - donc livrés dans le bundle client. Ces valeurs sensibles n'ont rien à faire côté front (voir §4).

3. Vérification demandée : imports en début de fichier

✅ Tous les import statiques sont bien placés en tête de fichier. Aucun import statique indenté / au milieu d'un fichier détecté (grep sur src/, netlify/, server.js, seed-db.js).

⚠️ Réserve - imports dynamiques redondants. App.jsx et Auth.jsx utilisent import('./services/...') à l'intérieur de fonctions, sur des modules déjà chargés statiquement ailleurs :

Ces import() n'apportent aucun code-splitting utile (le module est déjà dans le graphe). Ils compliquent la lecture et pourraient masquer des erreurs. Recommandation : remplacer par des imports statiques en tête de fichier (ex. App.jsx:7 → ajouter subscribeToRealtimeChanges, pullFromSupabase).

4. Problèmes 🔴 CRITIQUES

C1 - setState pendant le rendu (source de l'« Error #310 » récurrente)

Fichier : src/App.jsx

Plusieurs mutations d'état sont déclenchées pendant le rendu de App, ce qui est interdit par React et provoque exactement l'erreur que les 4 derniers commits tentent de corriger :

• App.jsx:166 → setEmployeeMode(false) appelé dans le corps de rendu (branche admin).
• App.jsx:181 → if (!ws) { onLogout(); return null; } : onLogout() appelle setSession(null) pendant le rendu.

Impact : re-rendus en boucle possibles, avertissements React, comportement instable au changement de rôle. Ces corrections doivent passer par un useEffect (déplacer la logique de garde hors du rendu).

C2 - Champ de date des notes incohérent (ts vs date) → « Invalid Date »

Fichiers : src/components/tasks/TaskDetail.jsx, src/services/storage.js, docs/supabase_schema.sql

• TaskDetail.jsx:78 crée une note avec le champ ts : { id, text, author, role, ts }.
• TaskDetail.jsx:249 affiche n.ts.
• Mais storage.js (lecture :173, écriture :246) et la table task_notes (schéma :77) utilisent la colonne date.

Conséquence : une note s'affiche correctement juste après sa création (objet en mémoire avec ts), puis après un aller-retour cloud / rafraîchissement Realtime, n.ts devient undefined → « Invalid Date ». Le champ ts n'est jamais persisté. Correctif : uniformiser sur date (créer la note avec date:, afficher n.date).

C3 - Codes PIN et e-mails admin en clair côté client

Fichier : src/utils/taskHelpers.js (lignes 1–4)

export const ADMIN_PIN = "1052";
export const EMPLOYEE_PIN = "4011";
export const SUPER_MANAGER_PIN = "9999";
export const SUPER_ADMIN_EMAILS = [
  "j.gros1052@gmail.com",
  "sanceymarco@hotmail.com",
];

Ces valeurs sont compilées dans le bundle JS public et même affichées à l'écran dans Auth.jsx:156 et :161 (« Code manager partagé (1052) », « (4011) »). De plus, la colonne members.pin est stockée en clair dans PostgreSQL (supabase_schema.sql:46), alors que audit_refactoring.md prévoyait un pin_hash. Impact : n'importe quel visiteur peut se connecter en tant que manager/collaborateur. La sécurité repose entièrement sur des secrets publics. Correctif : ne jamais exposer de PIN côté client ; hacher les PIN en base (bcrypt) ; supprimer les PIN partagés par défaut.

C4 - Secret JWT par défaut 'secret'

Fichiers : server.js:17, netlify/functions/auth.js:6

const jwtSecret = process.env.SUPABASE_JWT_SECRET || "secret";

Si SUPABASE_JWT_SECRET n'est pas défini en production, tous les JWT sont signés avec 'secret' → n'importe qui peut forger un token super_manager et contourner le RLS Supabase. Correctif : faire échouer le démarrage si le secret est absent (pas de fallback silencieux).

5. Problèmes 🟠 MAJEURS

M1 - Backend dupliqué : server.js (Express) ↔ netlify/functions/*

Les trois endpoints (/api/auth, /api/public_data, /api/import) sont implémentés deux fois : dans server.js (hébergement Node/Hostinger) et dans netlify/functions/{auth,public_data,import}.js (serverless). Toute correction doit être répliquée manuellement. La dérive a déjà commencé (voir M2). Recommandation : extraire la logique commune (signJWT, requêtes membres) dans un module partagé importé par les deux cibles.

M2 - Listes d'administrateurs incohérentes entre client et serveur

• Client (taskHelpers.js:4) : super-admins = j.gros1052@gmail.com, sanceymarco@hotmail.com.
• Serveur (server.js:105 et netlify/functions/auth.js:130) : admins globaux = marco@myj.com, julien@myj.com.

Ces domaines ne correspondent pas. Selon le point d'entrée, un utilisateur peut être admin côté UI mais pas côté token (ou l'inverse). Source de bugs de permissions.

M3 - Dossiers hooks/ et context/ vides malgré le plan d'architecture

audit_refactoring.md (§3) planifie useAuth, useTasks, useRealtime et une couche services étoffée. Rien n'a été extrait : hooks/ ne contient qu'un .gitkeep, context/ n'existe pas. La logique reste couplée aux composants (voir §2.3). Dette d'architecture : réutilisation et testabilité fortement limitées.

M4 - Workflow de développement npm run dev cassé pour l'API

vite.config.js ne définit aucun proxy pour /api/*. En dev pur (vite), les appels fetch("/api/public_data") (Auth.jsx:13) et fetch("/api/auth") (Auth.jsx:64) échouent (pas de backend). Le routage /api/* n'existe que via netlify.toml (prod Netlify) ou server.js (qui sert le dist déjà buildé). Impact : impossible de tester l'auth en npm run dev sans lancer netlify dev ou builder + node server.js. À documenter et/ou ajouter un server.proxy dans vite.config.js.

M5 - Requêtes Supabase N+1 et pull global systématique

Fichier : src/services/storage.js

• writeToSupabase upsert une ligne à la fois dans des boucles for (tâches :225, notes :248, phases :274, membres :298). Pour un projet de 50 tâches → 50+ requêtes réseau par sauvegarde.
• subscribeToRealtimeChanges (:339) déclenche un pullFromSupabase() complet (toutes les tables, tous les projets) à chaque changement Realtime.

Recommandation : utiliser des upserts batch (upsert([...])) et un pull ciblé par table/projet.

M6 - Dérive documentaire (docs ≠ code réel)

• audit_refactoring.md (§4) décrit un schéma avec title, position, pin_hash, table de liaison project_members (M2M). Le schéma réel (supabase_schema.sql) utilise label, order, pin (clair), et un project_id en FK directe (1-N).
• README.md mentionne un projet « KOBIKE » inexistant dans INIT_WS, et une synchro « toutes les ~4 secondes » alors que le code est passé au Realtime WebSocket.
• SyncMenu.jsx (:44, :110) parle encore de la « Netlify Function storage » et du polling 4 s - vestiges de l'ancienne architecture Blobs.

6. Problèmes 🟡 MINEURS / dette technique

• MI1 - cloudClient fantôme. storage.js:434 : cloudClient.delete() est un no-op (return { success: true }) mais est appelé lors des suppressions de projet (AdminDashboard.jsx:209, SuperManagerDashboard.jsx:128) en laissant croire à un nettoyage cloud. La suppression réelle repose sur la logique de diff de writeToSupabase. À supprimer ou implémenter.
• MI2 - Aucun outil de qualité. Pas d'ESLint, Prettier ni .editorconfig. Le .gitignore référence pourtant .eslintcache. Aucun garde-fou sur les hooks React (aurait détecté C1).
• MI3 - Couverture de tests minimale. Un seul fichier (App.test.jsx, 3 assertions de montage). Le fetch de Auth.jsx n'est pas mocké → la suite crache un TypeError: Invalid URL /api/public_data bruyant (test passe quand même). Aucune couverture des services, du workflow de validation, ni des permissions.
• MI4 - Styles inline massifs. 100 % du style est en style={{…}} inline (aucun CSS module / classe). Rendu correct mais duplication énorme (dizaines de répétitions de fontFamily:"inherit", palettes hex copiées-collées) et pas de thème centralisé.
• MI5 - Binaire versionné. BIREF PLATEFORME MJY.pdf (68 Ko) est suivi par Git. Les documents binaires alourdissent le dépôt ; à externaliser ou déplacer hors du versionnement source.
• MI6 - console.* résiduels (10 occurrences dans src/) laissés en production (storage.js, App.jsx).
• MI7 - VITE_ANTHROPIC_API_KEY (.env.example) : le préfixe VITE_ est exposé au bundle client par Vite. La clé n'est utilisée que côté serveur (server.js:215) - la renommer ANTHROPIC_API_KEY pour éviter toute fuite accidentelle si elle était lue côté front.
• MI8 - pollCloud mort. storage.js:355 : fonction vidée « conservée pour compatibilité », toujours importée dans App.jsx:7. Import inutile.

7. Inventaire documenté du code (fichier par fichier, fonction par fonction)

Objectif : documenter le rôle de chaque module et de chaque fonction/action de l'application (demande explicite « documentes tout le code et chaque action et fonction »).

7.1 Racine & configuration

7.2 server.js (backend Express - hébergement Node)

7.3 netlify/functions/ (équivalents serverless - dupliquent 7.2)

7.4 src/App.jsx - racine applicative

7.5 src/services/

7.6 src/utils/taskHelpers.js

Constantes de sécurité (⚠️ C3), isSuperAdmin, validateMemberPin, daysLeft, fmtDate, dueBadge, PRIORITY_CFG, getPriority, getStatus, getPhaseProgress, uid, seeds PILLARS_DEFAULT / INIT_WS / INIT_MEMBERS.

7.7 src/pages/

7.8 src/components/

8. Plan d'action priorisé

Priorité 1 - Corriger sans attendre (critiques)

1. C1 : sortir setEmployeeMode(false) / onLogout() du rendu de App.jsx (les placer dans un useEffect).
2. C2 : uniformiser le champ de note sur date (créer et afficher date, supprimer ts).
3. C3/C4 : retirer les PIN du client et de l'UI, hacher les PIN en base, imposer SUPABASE_JWT_SECRET (échec si absent).

Priorité 2 - Consolider (majeurs)

4. M2 : unifier une seule source de vérité pour les admins (idéalement en base, pas en dur).
5. M1 : factoriser la logique backend commune entre server.js et netlify/functions.
6. M4 : ajouter un proxy /api dans vite.config.js (ou documenter netlify dev).
7. M3 : extraire useAuth, useTasks, useProjects/useMembers et un AppContext ; dédupliquer Admin ↔ SuperManager.
8. M5 : upserts batch + pull ciblé.

Priorité 3 - Hygiène (mineurs)

9. Ajouter ESLint (eslint-plugin-react-hooks - aurait détecté C1) + Prettier.
10. Mettre à jour README.md, audit_refactoring.md, SyncMenu (retirer KOBIKE, polling 4 s, Netlify Blobs).
11. Nettoyer cloudClient, pollCloud, console.*, renommer VITE_ANTHROPIC_API_KEY.
12. Étoffer les tests (services, workflow de validation, permissions) et mocker fetch dans les tests.

Fin du rapport - audit réalisé le 7 juillet 2026.