Rework consumption kwh #82

m4dm4rtig4n · 2025-12-07T01:12:03Z

No description provided.

Removes dead code that was causing TypeScript error TS6133 in CI build. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <[email protected]>

…ling and functionality - Updated AnnualProductionCurve component to use consistent graph colors and improved button styles. - Enhanced YearlyProduction component with updated background gradients and tooltip colors. - Refined YearlyProductionCards to include year-over-year change indicators and improved card styling. - Improved Production index page with new demo auto-fetch logic and cache handling. - Updated Simulator component to support demo auto-fetch and improved cache detection. - Enhanced documentation for consumption and dashboard features, including visual design guidelines and API details.

…ent provider updates

Copilot

Pull request overview

This PR implements a comprehensive visual redesign and functional enhancement for the consumption and production pages, focusing on improved user experience through consistent color schemes, auto-fetch functionality for demo accounts, and a new offer comparison feature.

Key Changes:

Unified visual design system with consistent color-coded section icons across all energy pages
Demo account auto-fetch implementation across Simulator, Production, Consumption, Balance, and ConsumptionEuro pages
New offer comparison feature in ConsumptionEuro allowing users to compare different tariff offers
Standardized PDL query caching strategy (30 seconds staleTime) for consistency

Reviewed changes

Copilot reviewed 23 out of 23 changed files in this pull request and generated 6 comments.

Show a summary per file

File	Description
docs/pages/dashboard.md	Added comprehensive documentation for the new tariff offer selection feature including UI design, API endpoints, and usage instructions
docs/pages/consumption.md	Added detailed visual design documentation covering section colors, stat card gradients, tab selectors, and chart styling
apps/web/src/pages/Simulator.tsx	Added demo auto-fetch logic and unified data fetch integration; standardized PDL query staleTime to 30 seconds
apps/web/src/pages/Production/index.tsx	Updated section icons to color-coded system (Zap/amber, BarChart3/emerald, LineChart/indigo); implemented demo auto-fetch with improved cache detection
apps/web/src/pages/Production/hooks/useProductionData.ts	Standardized PDL query staleTime to 30 seconds for consistency with Dashboard
apps/web/src/pages/Production/components/YearlyProductionCards.tsx	Redesigned cards with colored borders, icons, and year-over-year comparison indicators
apps/web/src/pages/Production/components/YearlyProduction.tsx	Updated graph container styling with gradient backgrounds and adjusted color palette
apps/web/src/pages/Production/components/AnnualProductionCurve.tsx	Replaced ModernButton tabs with custom colored buttons matching graph line colors
apps/web/src/pages/ConsumptionKwh/index.tsx	Major refactoring: removed ConfirmModal, renamed state variables for clarity, integrated demo auto-fetch, updated section icons to match design system
apps/web/src/pages/ConsumptionKwh/hooks/useConsumptionFetch.ts	Removed unused clearCache state management, renamed parameters for consistency
apps/web/src/pages/ConsumptionKwh/hooks/useConsumptionData.ts	Standardized PDL query staleTime to 30 seconds
apps/web/src/pages/ConsumptionKwh/components/YearlyStatCards.tsx	Redesigned with colored borders, year-over-year comparisons, and improved dark mode support
apps/web/src/pages/ConsumptionKwh/components/YearlyConsumption.tsx	Updated container with gradient background styling
apps/web/src/pages/ConsumptionKwh/components/PowerPeaks.tsx	Replaced ModernButton with custom colored tabs matching graph colors
apps/web/src/pages/ConsumptionKwh/components/MonthlyHcHp.tsx	Updated tabs with colored styling matching HC/HP theme
apps/web/src/pages/ConsumptionKwh/components/HcHpDistribution.tsx	Enhanced pie chart display with Moon/Sun icons and improved color coding
apps/web/src/pages/ConsumptionKwh/components/AnnualCurve.tsx	Implemented custom colored year selector tabs
apps/web/src/pages/ConsumptionEuro/index.tsx	Added offer comparison feature, integrated OfferSelector component, implemented demo auto-fetch, standardized PDL query staleTime
apps/web/src/pages/ConsumptionEuro/components/OfferPricingCard.tsx	Major enhancement: added comparison mode with dropdown selector, reset functionality, and visual distinction between main and comparison offers
apps/web/src/pages/ConsumptionEuro/components/EuroCostCards.tsx	Redesigned stat cards with consistent border styling and improved year-over-year indicators
apps/web/src/pages/Balance/index.tsx	Integrated demo auto-fetch functionality
apps/web/src/components/PageHeader.tsx	Implemented auto-select logic for PDL switching when current PDL is incompatible with page; removed empty option placeholder
apps/web/src/components/OfferSelector.tsx	Removed unused getMainPrice utility function (code cleanup)

Comments suppressed due to low confidence (2)

apps/web/src/components/PageHeader.tsx:216

The <option value="">Sélectionner un PDL</option> has been removed, but the auto-select logic may not handle the case where displayedPdls is empty. This could lead to a blank select dropdown with no placeholder. Consider keeping a disabled placeholder option or adding a check to display a message when no PDLs are available.

                    {displayedPdls.map((pdl: PDL) => (
                      <option key={pdl.usage_point_id} value={pdl.usage_point_id}>
                        {pdl.name || pdl.usage_point_id}
                      </option>
                    ))}
                  </select>

apps/web/src/pages/ConsumptionKwh/hooks/useConsumptionFetch.ts:427

The variable setIsClearingCache is removed from parameters but the corresponding state setter is also used in the clearCache function (line 394 removed). However, the hook still returns clearCache in its return value (line 426), which might be unused. Consider checking if clearCache is still needed in the return value or if it should be removed entirely.

  return {
    fetchConsumptionData,
    clearCache

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2025-12-07T01:16:11Z

apps/web/src/pages/ConsumptionKwh/index.tsx

 // Import components
 import { InfoBlock } from './components/InfoBlock'
-import { ConfirmModal } from './components/ConfirmModal'
 import { YearlyConsumption } from './components/YearlyConsumption'


The ConfirmModal import has been removed but the component was previously used. Verify that the confirmation modal functionality is no longer needed or has been replaced elsewhere in the codebase.

Copilot · 2025-12-07T01:16:12Z

apps/web/src/pages/Simulator.tsx

+  // Auto-fetch data for demo account
+  useEffect(() => {
+    if (isDemo && selectedPdl && selectedPDLDetails && !demoAutoFetchDone.current && !hasDataInCache && !isInitializing) {
+      logger.log('[DEMO] Auto-fetching data for demo account on Simulator')
+      demoAutoFetchDone.current = true
+      setTimeout(async () => {
+        setIsLoading(true)
+        try {
+          await fetchAllData()
+        } finally {
+          setIsLoading(false)
+        }
+      }, 300)
+    }
+  }, [isDemo, selectedPdl, selectedPDLDetails, hasDataInCache, isInitializing, setIsLoading, fetchAllData])


[nitpick] Missing demoAutoFetchDone in the dependency array. The effect references demoAutoFetchDone.current so it won't re-run when the PDL changes unless selectedPdl changes. However, since you're using useRef, this is intentional to persist across renders. Consider adding a comment explaining this intentional omission to prevent future confusion.

Copilot · 2025-12-07T01:16:12Z

apps/web/src/pages/ConsumptionEuro/index.tsx

+          <div className="mt-6 relative z-20">
+            <OfferPricingCard
+              selectedOffer={displayOffer}
+              isComparison={!!comparisonOfferId}
+              originalOffer={selectedOfferWithProvider}
+              compatibleOffers={compatibleOffers}
+              providers={providers}
+              onComparisonChange={setComparisonOfferId}
+              comparisonOfferId={comparisonOfferId}
+            />
+          </div>
+        </AnimatedSection>
+      )}
+
      {/* Charts Section */}
      <AnimatedSection isVisible={hasDataInCache && hasOffer && hasCostData} delay={100}>
-        <div className="mt-6 rounded-xl shadow-md border bg-white dark:bg-gray-800 border-gray-300 dark:border-gray-700 transition-colors duration-200">
+        <div className="mt-6 rounded-xl shadow-md border bg-white dark:bg-gray-800 border-gray-300 dark:border-gray-700 transition-colors duration-200 relative z-10">


[nitpick] The z-index classes (relative z-20 and relative z-10) are being used to control stacking order between the OfferPricingCard and Charts Section. This can lead to unexpected behavior with dropdowns or modals. Consider using a more semantic approach or documenting why this specific z-index hierarchy is needed.

Copilot · 2025-12-07T01:16:12Z

apps/web/src/pages/Simulator.tsx

+    if (!selectedPdl) return false
+    const cachedData = queryClient.getQueryData(['consumptionDetail', selectedPdl]) as any
+    return cachedData?.data?.meter_reading?.interval_reading?.length > 0
+  }, [selectedPdl, queryClient, cachedConsumptionData])


The dependency array includes cachedConsumptionData which is not defined in the visible code scope. This will cause a ReferenceError at runtime. Either remove it from the dependency array or ensure the variable is properly defined.

Suggested change

}, [selectedPdl, queryClient, cachedConsumptionData])

}, [selectedPdl, queryClient])

Copilot · 2025-12-07T01:16:12Z

apps/web/src/pages/ConsumptionKwh/components/YearlyStatCards.tsx

+                      {yoyChange > 0 ? (
+                        <TrendingUp size={14} className="text-red-500" />
+                      ) : (
+                        <TrendingDown size={14} className="text-emerald-500" />
+                      )}
+                      <span className={`font-medium ${
+                        yoyChange > 0
+                          ? 'text-red-600 dark:text-red-400'
+                          : 'text-emerald-600 dark:text-emerald-400'
+                      }`}>
+                        {yoyChange > 0 ? '+' : ''}{yoyChange.toFixed(1)}%
+                      </span>
+                      <span className="text-gray-500 dark:text-gray-400">
+                        vs année précédente
+                      </span>
+                    </div>
+                  )}


[nitpick] The comparison logic for color icons is inconsistent. For consumption (line 184), increased consumption uses TrendingUp with red color (negative), but for production (line 196), increased production uses TrendingUp with green color (positive). While this makes semantic sense (more consumption = bad, more production = good), the visual indicators should clearly distinguish the context to avoid user confusion.

Copilot · 2025-12-07T01:16:13Z

apps/web/src/components/PageHeader.tsx

+          toast(`PDL changé automatiquement vers "${newPdl.name || newPdl.usage_point_id}"`, {
+            icon: '🔄',
+            duration: 4000,
+          })


The toast message uses template literals but doesn't handle potential undefined values gracefully. If newPdl.name is undefined, it will display "undefined" in the message. Consider using: toast(\PDL changé automatiquement vers "${newPdl.name || newPdl.usage_point_id}"`, ...)` for consistency with how it's displayed in the select option.

Clément VALENTIN and others added 3 commits December 7, 2025 00:07

fix(OfferSelector): remove unused getMainPrice function

1b8e5bc

Removes dead code that was causing TypeScript error TS6133 in CI build. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <[email protected]>

fix: Update PDL fetching logic to include short staleTime for consist…

e8d9fad

…ent provider updates

Copilot AI review requested due to automatic review settings December 7, 2025 01:12

Copilot started reviewing on behalf of m4dm4rtig4n December 7, 2025 01:12 View session

Copilot AI reviewed Dec 7, 2025

View reviewed changes

m4dm4rtig4n merged commit 1dbbfb1 into main Dec 7, 2025
11 checks passed

m4dm4rtig4n deleted the rework-consumption-kwh branch December 18, 2025 07:59

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Rework consumption kwh #82

Rework consumption kwh #82

Uh oh!

m4dm4rtig4n commented Dec 7, 2025

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Dec 7, 2025

Uh oh!

Copilot AI Dec 7, 2025

Uh oh!

Copilot AI Dec 7, 2025

Uh oh!

Copilot AI Dec 7, 2025

Uh oh!

Copilot AI Dec 7, 2025

Uh oh!

Copilot AI Dec 7, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

	}, [selectedPdl, queryClient, cachedConsumptionData])
	}, [selectedPdl, queryClient])

Rework consumption kwh #82

Rework consumption kwh #82

Uh oh!

Conversation

m4dm4rtig4n commented Dec 7, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Dec 7, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 7, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 7, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 7, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 7, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 7, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants