Add consumption submenu with kWh and Euro tabs #18
Conversation
Implemented a new submenu structure for the consumption page with two tabs: kWh and Euro. The /consumption route now redirects to /consumption_kwh. ConsumptionEuro is a placeholder for future implementation. Removed "Wh" display from yearly consumption cards and fixed spacing inconsistencies between tabs and content. 🤖 Generated with Claude Code Co-Authored-By: Claude <noreply@anthropic.com>
There was a problem hiding this comment.
Pull request overview
This PR adds a consumption submenu to organize the consumption page into kWh and Euro views. The implementation includes route restructuring, a new tab navigation component, and proper menu highlighting when on any consumption page.
Key changes:
- Restructured routes:
/consumptionnow redirects to/consumption_kwh - Added
ConsumptionTabscomponent for kWh/Euro navigation - Created
ConsumptionEuroas a coming-soon placeholder page - Updated layout and header components to detect consumption pages
Reviewed changes
Copilot reviewed 22 out of 22 changed files in this pull request and generated 6 comments.
Show a summary per file
| File | Description |
|---|---|
apps/web/src/App.tsx |
Added route redirect and split consumption into kWh and Euro routes |
apps/web/src/components/ConsumptionTabs.tsx |
New tab navigation component for consumption submenu |
apps/web/src/components/Layout.tsx |
Updated to highlight "Consommation" menu item on any consumption page |
apps/web/src/components/PageHeader.tsx |
Updated PDL filtering logic for consumption pages |
apps/web/src/pages/ConsumptionKwh/index.tsx |
Renamed from Consumption with full functionality preserved |
apps/web/src/pages/ConsumptionEuro/index.tsx |
New placeholder page for future Euro functionality |
| Various component files | Supporting components for the ConsumptionKwh page |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| {monthlyHcHpByYear.map((yearData, _idx) => { | ||
| const isSelected = selectedYears.has(_idx) | ||
| return ( | ||
| <ModernButton | ||
| key={yearData.year} | ||
| variant="tab" | ||
| size="md" | ||
| isActive={isSelected} | ||
| onClick={() => toggleYearSelection(_idx)} |
There was a problem hiding this comment.
The _idx parameter in the map function is prefixed with underscore but is actually used in the component (line 272). According to TypeScript conventions, underscore-prefixed parameters indicate intentionally unused variables.
Either remove the underscore prefix since the variable is used, or use a more descriptive name like yearIndex.
| {monthlyHcHpByYear.map((yearData, _idx) => { | |
| const isSelected = selectedYears.has(_idx) | |
| return ( | |
| <ModernButton | |
| key={yearData.year} | |
| variant="tab" | |
| size="md" | |
| isActive={isSelected} | |
| onClick={() => toggleYearSelection(_idx)} | |
| {monthlyHcHpByYear.map((yearData, yearIndex) => { | |
| const isSelected = selectedYears.has(yearIndex) | |
| return ( | |
| <ModernButton | |
| key={yearData.year} | |
| variant="tab" | |
| size="md" | |
| isActive={isSelected} | |
| onClick={() => toggleYearSelection(yearIndex)} |
| /> | ||
| <Legend /> | ||
| {/* Dynamically create bars for each selected year */} | ||
| {selectedYearsData.map((yearData, _yearIndex) => { |
There was a problem hiding this comment.
The _yearIndex parameter in the map function is prefixed with underscore but is actually used on lines 272 and 277. According to TypeScript conventions, underscore-prefixed parameters indicate intentionally unused variables.
Either remove the underscore prefix since the variable is used, or use a more descriptive name like yearIndex.
| <div key={year.year} className="p-3 bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-lg"> | ||
| <p className="text-sm text-amber-800 dark:text-amber-200"> | ||
| <strong>⚠️ {year.year} - Données partielles :</strong> {year.dataAvailable} jours de données disponibles sur 365 jours pour cette période glissante. | ||
| {year.dataAvailable! < 100 && ' Les valeurs affichées peuvent être significativement incomplètes.'} |
There was a problem hiding this comment.
The condition year.dataAvailable! < 100 uses a non-null assertion operator on a potentially undefined value. This could cause a runtime error if dataAvailable is undefined.
Consider using optional chaining instead:
{year.dataAvailable && year.dataAvailable < 100 && ' Les valeurs affichées peuvent être significativement incomplètes.'}| {year.dataAvailable! < 100 && ' Les valeurs affichées peuvent être significativement incomplètes.'} | |
| {year.dataAvailable < 100 && ' Les valeurs affichées peuvent être significativement incomplètes.'} |
| @@ -0,0 +1,67 @@ | |||
| import { useState, useEffect } from 'react' | |||
| import { Euro, Database, ArrowRight, AlertCircle } from 'lucide-react' | |||
There was a problem hiding this comment.
Unused import Database.
| import { Euro, Database, ArrowRight, AlertCircle } from 'lucide-react' | |
| import { Euro, ArrowRight, AlertCircle } from 'lucide-react' |
| import { usePdlStore } from '@/stores/pdlStore' | ||
|
|
||
| export default function ConsumptionEuro() { | ||
| const { selectedPdl: selectedPDL } = usePdlStore() |
There was a problem hiding this comment.
Unused variable selectedPDL.
| const { selectedPdl: selectedPDL } = usePdlStore() |
|
|
||
| export default function ConsumptionEuro() { | ||
| const { selectedPdl: selectedPDL } = usePdlStore() | ||
| const [isDarkMode, setIsDarkMode] = useState(false) |
There was a problem hiding this comment.
Unused variable isDarkMode.
| const [isDarkMode, setIsDarkMode] = useState(false) | |
| const [, setIsDarkMode] = useState(false) |
Summary
Test Plan
🤖 Generated with Claude Code