fix(simulator): resolve React hooks violations (#61)

* fix(simulator): remove competing setFetchDataFunction calls

Remove useEffect hooks that were registering handleSimulation in the
global dataFetchStore, which conflicted with PageHeader's unified
fetch registration. This fixes React error #310 (infinite loop).

The Simulator page now uses its own local state and button for
triggering simulations instead of conflicting with the global store.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>

* fix(simulator): move hooks before early returns

Fix React error #310 and "rendered more hooks than before" by moving all
hooks (useEffect, useMemo) before conditional early returns. This ensures
hooks are called in the same order every render, respecting React's
rules of hooks.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>

* fix(web): regenerate package-lock.json for CI

Restore complete package-lock.json to fix npm ci sync error in CI.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>

---------

Co-authored-by: Clément VALENTIN <[email protected]>
Co-authored-by: Claude <[email protected]>

Author: 3 people

.claude/commands/sync.md

@@ -1,53 +1,41 @@
 ---
 description: Synchronise le worktree avec le projet root
-allowed-tools: Bash(git:*), Bash(rsync:*), Bash(ls:*), Bash(pwd:*)
+allowed-tools: Bash(rsync:*), Bash(ls:*), Bash(pwd:*)
 ---
 
 # Objectif
 
-Synchroniser le worktree Conductor en cours avec le projet root (`/Users/cvalentin/Git/myelectricaldata_new`) pour récupérer les dernières modifications.
+Copier les fichiers modifiés du worktree Conductor vers le projet root (`/Users/cvalentin/Git/myelectricaldata_new`) pour tester en live.
 
 ## Workflow de synchronisation
 
-### 1. Vérifier l'état du worktree actuel
+### 1. Copier les fichiers vers le projet root
 
-```bash
-git status
-```
-
-S'il y a des modifications locales non commitées, avertir l'utilisateur et demander s'il veut continuer (les modifications locales pourraient être écrasées).
-
-### 2. Récupérer les derniers changements depuis main
+Utiliser rsync pour copier les fichiers modifiés (en excluant les dossiers git, node_modules, etc.) :
 
 ```bash
-# Fetch depuis origin
-git fetch origin main
-
-# Rebase sur origin/main pour récupérer les dernières modifications
-git rebase origin/main
+rsync -av --progress \
+  --exclude='.git' \
+  --exclude='node_modules' \
+  --exclude='.conductor' \
+  --exclude='dist' \
+  --exclude='build' \
+  --exclude='.venv' \
+  --exclude='__pycache__' \
+  --exclude='.pytest_cache' \
+  --exclude='.mypy_cache' \
+  --exclude='*.pyc' \
+  /Users/cvalentin/Git/myelectricaldata_new/.conductor/santo/ \
+  /Users/cvalentin/Git/myelectricaldata_new/
 ```
 
-### 3. En cas de conflit
+### 2. Confirmer la synchronisation
 
-Si le rebase échoue à cause de conflits :
-1. Lister les fichiers en conflit avec `git status`
-2. Informer l'utilisateur des conflits
-3. Proposer soit de résoudre les conflits, soit d'abandonner avec `git rebase --abort`
-
-### 4. Vérification finale
-
-Après la synchronisation :
-```bash
-# Afficher les derniers commits pour confirmer la sync
-git log --oneline -5
-
-# Afficher l'état actuel
-git status
-```
+Afficher les fichiers copiés et informer l'utilisateur que la synchronisation est terminée.
 
 ## Notes importantes
 
-- Cette commande utilise `git rebase` pour garder un historique linéaire
-- Les modifications locales non commitées peuvent être écrasées
-- En cas d'erreur, utiliser `git rebase --abort` pour revenir à l'état précédent
-- Le worktree reste sur sa branche actuelle, seuls les commits de main sont intégrés
+- Cette commande copie les fichiers du worktree vers le projet root
+- Les dossiers `node_modules`, `.git`, `dist`, etc. sont exclus
+- Le projet root doit avoir ses services en cours d'exécution pour voir les changements (hot-reload)
+- Pour annuler, utiliser git dans le projet root : `git checkout -- .`

apps/web/src/pages/Simulator.tsx

@@ -13,7 +13,6 @@ import { logger } from '@/utils/logger'
 import { ModernButton } from './Simulator/components/ModernButton'
 import { useIsDemo } from '@/hooks/useIsDemo'
 import { usePdlStore } from '@/stores/pdlStore'
-import { useDataFetchStore } from '@/stores/dataFetchStore'
 
 // Helper function to check if a date is weekend (Saturday or Sunday)
 function isWeekend(dateString: string): boolean {
@@ -180,8 +179,9 @@ export default function Simulator() {
   const [isInitializing, setIsInitializing] = useState(true)
   // const [isClearingCache, setIsClearingCache] = useState(false) // Unused for now
 
-  // Register fetch function in store for PageHeader button
-  const { setFetchDataFunction, setIsLoading } = useDataFetchStore()
+  // Note: We DO NOT register handleSimulation in the global store
+  // because PageHeader already handles the unified fetch function.
+  // The Simulator uses its own button to trigger simulation.
 
   // Filters and sorting state
   const [filterType, setFilterType] = useState<string>('all')
@@ -361,17 +361,6 @@ export default function Simulator() {
     }
   }, [selectedPdl, pdlsData, offersData, providersData, queryClient])
 
-  // Register fetch function in store for PageHeader button
-  useEffect(() => {
-    setFetchDataFunction(handleSimulation)
-    return () => setFetchDataFunction(null)
-  }, [handleSimulation, setFetchDataFunction])
-
-  // Sync loading state with store
-  useEffect(() => {
-    setIsLoading(isSimulating)
-  }, [isSimulating, setIsLoading])
-
   const calculateSimulationsForAllOffers = (consumptionData: any[], offers: EnergyOffer[], providers: EnergyProvider[], tempoColors: TempoDay[], pdl?: PDL) => {
     // Create a map of date -> TEMPO color for fast lookup
     const tempoColorMap = new Map<string, 'BLUE' | 'WHITE' | 'RED'>()
@@ -773,6 +762,128 @@ export default function Simulator() {
     return results
   }
 
+  // Auto-launch simulation if cache data exists
+  // IMPORTANT: This hook must be before any early returns to respect React's rules of hooks
+  useEffect(() => {
+    logger.log('[Auto-launch] useEffect triggered', {
+      selectedPdl,
+      isSimulating,
+      hasSimulationResult: !!simulationResult,
+      hasAutoLaunched,
+      isDemo,
+      pdlsDataLoaded: !!pdlsData,
+      offersDataLoaded: !!offersData,
+      providersDataLoaded: !!providersData,
+    })
+
+    // Don't auto-launch if already launched, simulating, or have results
+    if (!selectedPdl || isSimulating || simulationResult || hasAutoLaunched) {
+      logger.log('[Auto-launch] Skipping auto-launch due to conditions')
+      return
+    }
+
+    // Don't auto-launch if PDL data, offers, or providers are not loaded yet
+    if (!pdlsData || !Array.isArray(offersData) || offersData.length === 0 || !providersData) {
+      logger.log('[Auto-launch] Skipping auto-launch - data not loaded yet', {
+        pdlsData: !!pdlsData,
+        offersData: Array.isArray(offersData) ? offersData.length : 'not array',
+        providersData: !!providersData
+      })
+      return
+    }
+
+    // Check if we have cached data for this PDL (uses new single cache key format)
+    const cachedData = queryClient.getQueryData(['consumptionDetail', selectedPdl]) as any
+
+    if (!cachedData?.data?.meter_reading?.interval_reading?.length) {
+      logger.log('[Auto-launch] ❌ No cached data found for PDL:', selectedPdl)
+      return
+    }
+
+    const readings = cachedData.data.meter_reading.interval_reading
+    const totalPoints = readings.length
+
+    // Check if we have enough data (at least 30 days worth = ~1440 points at 30min intervals)
+    const minRequiredPoints = 30 * 48 // 30 days * 48 half-hours
+    const hasEnoughData = totalPoints >= minRequiredPoints
+
+    logger.log(`[Auto-launch] Cache check: ${totalPoints} points (need ${minRequiredPoints} minimum)`)
+
+    if (hasEnoughData) {
+      logger.log(`✅ Auto-launching simulation with ${totalPoints} cached points`)
+      setHasAutoLaunched(true)
+      // Show loading overlay while preparing simulation
+      setIsInitialLoadingFromCache(true)
+
+      // Use setTimeout to avoid calling during render
+      setTimeout(() => {
+        handleSimulation()
+      }, 100)
+    } else {
+      logger.log(`❌ Not enough cached data (${totalPoints} points), skipping auto-launch`)
+    }
+  }, [selectedPdl, isSimulating, simulationResult, hasAutoLaunched, isDemo, pdlsData, offersData, providersData, queryClient, handleSimulation])
+
+  // Filter and sort simulation results
+  // IMPORTANT: This hook must be before any early returns to respect React's rules of hooks
+  const filteredAndSortedResults = useMemo(() => {
+    if (!simulationResult || !Array.isArray(simulationResult)) return []
+
+    let filtered = [...simulationResult]
+
+    // Filter by type
+    if (filterType !== 'all') {
+      filtered = filtered.filter((result) => result.offerType === filterType)
+    }
+
+    // Filter by provider
+    if (filterProvider !== 'all') {
+      filtered = filtered.filter((result) => result.providerName === filterProvider)
+    }
+
+    // Filter by recency (tariffs < 6 months old)
+    if (showOnlyRecent) {
+      filtered = filtered.filter((result) => !isOldTariff(result.validFrom))
+    }
+
+    // Sort by selected criteria
+    filtered.sort((a, b) => {
+      let comparison = 0
+      switch (sortBy) {
+        case 'subscription':
+          comparison = a.subscriptionCost - b.subscriptionCost
+          break
+        case 'energy':
+          comparison = a.energyCost - b.energyCost
+          break
+        case 'total':
+        default:
+          comparison = a.totalCost - b.totalCost
+          break
+      }
+      return sortOrder === 'asc' ? comparison : -comparison
+    })
+
+    return filtered
+  }, [simulationResult, filterType, filterProvider, showOnlyRecent, sortBy, sortOrder])
+
+  // Get unique providers and types for filter options
+  // IMPORTANT: These hooks must be before any early returns to respect React's rules of hooks
+  const availableProviders = useMemo(() => {
+    if (!simulationResult || !Array.isArray(simulationResult)) return []
+    const providers = new Set(simulationResult.map((r) => r.providerName))
+    return Array.from(providers).sort()
+  }, [simulationResult])
+
+  const availableTypes = useMemo(() => {
+    if (!simulationResult || !Array.isArray(simulationResult)) return []
+    const types = new Set(simulationResult.map((r) => r.offerType))
+    return Array.from(types).sort()
+  }, [simulationResult])
+
+  // ==================== EARLY RETURNS (after all hooks) ====================
+  // These must come AFTER all hooks to respect React's rules of hooks
+
   if (pdlsLoading) {
     return (
       <div className="flex items-center justify-center py-12">
@@ -814,6 +925,8 @@ export default function Simulator() {
     )
   }
 
+  // ==================== HELPER FUNCTIONS (after early returns) ====================
+
   const getTypeColor = (type: string) => {
     switch (type) {
       case 'BASE':
@@ -862,67 +975,6 @@ export default function Simulator() {
     }
   }
 
-  // Auto-launch simulation if cache data exists
-  useEffect(() => {
-    logger.log('[Auto-launch] useEffect triggered', {
-      selectedPdl,
-      isSimulating,
-      hasSimulationResult: !!simulationResult,
-      hasAutoLaunched,
-      isDemo,
-      pdlsDataLoaded: !!pdlsData,
-      offersDataLoaded: !!offersData,
-      providersDataLoaded: !!providersData,
-    })
-
-    // Don't auto-launch if already launched, simulating, or have results
-    if (!selectedPdl || isSimulating || simulationResult || hasAutoLaunched) {
-      logger.log('[Auto-launch] Skipping auto-launch due to conditions')
-      return
-    }
-
-    // Don't auto-launch if PDL data, offers, or providers are not loaded yet
-    if (!pdlsData || !Array.isArray(offersData) || offersData.length === 0 || !providersData) {
-      logger.log('[Auto-launch] Skipping auto-launch - data not loaded yet', {
-        pdlsData: !!pdlsData,
-        offersData: Array.isArray(offersData) ? offersData.length : 'not array',
-        providersData: !!providersData
-      })
-      return
-    }
-
-    // Check if we have cached data for this PDL (uses new single cache key format)
-    const cachedData = queryClient.getQueryData(['consumptionDetail', selectedPdl]) as any
-
-    if (!cachedData?.data?.meter_reading?.interval_reading?.length) {
-      logger.log('[Auto-launch] ❌ No cached data found for PDL:', selectedPdl)
-      return
-    }
-
-    const readings = cachedData.data.meter_reading.interval_reading
-    const totalPoints = readings.length
-
-    // Check if we have enough data (at least 30 days worth = ~1440 points at 30min intervals)
-    const minRequiredPoints = 30 * 48 // 30 days * 48 half-hours
-    const hasEnoughData = totalPoints >= minRequiredPoints
-
-    logger.log(`[Auto-launch] Cache check: ${totalPoints} points (need ${minRequiredPoints} minimum)`)
-
-    if (hasEnoughData) {
-      logger.log(`✅ Auto-launching simulation with ${totalPoints} cached points`)
-      setHasAutoLaunched(true)
-      // Show loading overlay while preparing simulation
-      setIsInitialLoadingFromCache(true)
-
-      // Use setTimeout to avoid calling during render
-      setTimeout(() => {
-        handleSimulation()
-      }, 100)
-    } else {
-      logger.log(`❌ Not enough cached data (${totalPoints} points), skipping auto-launch`)
-    }
-  }, [selectedPdl, isSimulating, simulationResult, hasAutoLaunched, isDemo, pdlsData, offersData, providersData, queryClient, handleSimulation])
-
   const toggleRowExpansion = (offerId: string) => {
     setExpandedRows((prev) => {
       const newSet = new Set(prev)
@@ -953,61 +1005,6 @@ export default function Simulator() {
     return sortOrder === 'asc' ? <ArrowUp size={14} /> : <ArrowDown size={14} />
   }
 
-  // Filter and sort simulation results
-  const filteredAndSortedResults = useMemo(() => {
-    if (!simulationResult || !Array.isArray(simulationResult)) return []
-
-    let filtered = [...simulationResult]
-
-    // Filter by type
-    if (filterType !== 'all') {
-      filtered = filtered.filter((result) => result.offerType === filterType)
-    }
-
-    // Filter by provider
-    if (filterProvider !== 'all') {
-      filtered = filtered.filter((result) => result.providerName === filterProvider)
-    }
-
-    // Filter by recency (tariffs < 6 months old)
-    if (showOnlyRecent) {
-      filtered = filtered.filter((result) => !isOldTariff(result.validFrom))
-    }
-
-    // Sort by selected criteria
-    filtered.sort((a, b) => {
-      let comparison = 0
-      switch (sortBy) {
-        case 'subscription':
-          comparison = a.subscriptionCost - b.subscriptionCost
-          break
-        case 'energy':
-          comparison = a.energyCost - b.energyCost
-          break
-        case 'total':
-        default:
-          comparison = a.totalCost - b.totalCost
-          break
-      }
-      return sortOrder === 'asc' ? comparison : -comparison
-    })
-
-    return filtered
-  }, [simulationResult, filterType, filterProvider, showOnlyRecent, sortBy, sortOrder])
-
-  // Get unique providers and types for filter options
-  const availableProviders = useMemo(() => {
-    if (!simulationResult || !Array.isArray(simulationResult)) return []
-    const providers = new Set(simulationResult.map((r) => r.providerName))
-    return Array.from(providers).sort()
-  }, [simulationResult])
-
-  const availableTypes = useMemo(() => {
-    if (!simulationResult || !Array.isArray(simulationResult)) return []
-    const types = new Set(simulationResult.map((r) => r.offerType))
-    return Array.from(types).sort()
-  }, [simulationResult])
-
   // Clear cache function (admin only) - Unused for now as cache clearing is in the sidebar
   /*
   const confirmClearCache = async () => {