Add consumption submenu with kWh and Euro tabs #17
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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. Added ConsumptionTabs component and updated routing, navigation, and page header logic to support the new consumption structure. 🤖 Generated with Claude Code Co-Authored-By: Claude <noreply@anthropic.com>
There was a problem hiding this comment.
Pull request overview
This PR restructures the consumption page by introducing a tabbed submenu interface with two sections: kWh (active) and Euro (placeholder). The changes improve navigation and prepare for future cost-based consumption analysis.
Key Changes
- Renamed the existing Consumption page to ConsumptionKwh and moved it to a dedicated directory structure
- Added routing redirect from
/consumptionto/consumption_kwhfor backward compatibility - Created ConsumptionEuro placeholder page with "coming soon" messaging
- Updated navigation to highlight "Consommation" menu item when on either consumption tab
- Updated PDL filtering logic to work with both consumption routes
Reviewed changes
Copilot reviewed 23 out of 23 changed files in this pull request and generated 5 comments.
Show a summary per file
| File | Description |
|---|---|
| apps/web/src/App.tsx | Added consumption routes with redirect from /consumption to /consumption_kwh, and new route for /consumption_euro |
| apps/web/src/components/ConsumptionTabs.tsx | New tab navigation component for switching between kWh and Euro views |
| apps/web/src/components/Layout.tsx | Updated menu logic to highlight Consommation for all consumption pages, updated navigation path to /consumption_kwh |
| apps/web/src/components/PageHeader.tsx | Added Euro icon import, updated page config for consumption routes, added consumption page detection logic |
| apps/web/src/pages/ConsumptionKwh/index.tsx | Moved and renamed from Consumption page with complete feature set for kWh visualization |
| apps/web/src/pages/ConsumptionKwh/types/consumption.types.ts | Type definitions for consumption data structures |
| apps/web/src/pages/ConsumptionKwh/hooks/* | Custom hooks for data fetching, calculations, and state management |
| apps/web/src/pages/ConsumptionKwh/components/* | UI components for consumption visualization (charts, tables, modals, buttons) |
| apps/web/src/pages/ConsumptionEuro/index.tsx | Placeholder page with coming-soon message and planned features list |
| apps/web/src/pages/Landing.tsx | Added authentication state management, removed animations, added account distinction information (unrelated to main PR purpose) |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| import { MonthlyHcHp } from './components/MonthlyHcHp' | ||
| import { PowerPeaks } from './components/PowerPeaks' | ||
|
|
||
| // Renamed from Consumption to ConsumptionKwh |
There was a problem hiding this comment.
[nitpick] The comment mentions "Renamed from Consumption to ConsumptionKwh" but the actual component functionality should remain unchanged. This comment is informative but may be misleading as it's not just a rename - the entire page was restructured with new routing.
Suggested change
| // Renamed from Consumption to ConsumptionKwh | |
| // Page restructured and routing updated; previously named 'Consumption', now 'ConsumptionKwh' |
Comment on lines
+235
to
241
| const [isReady, setIsReady] = useState(false) | ||
|
|
||
| // Attendre que le composant soit monté pour éviter le clignotement | ||
| useEffect(() => { | ||
| setIsReady(true) | ||
| }, []) | ||
|
|
There was a problem hiding this comment.
[nitpick] The Landing page changes appear unrelated to the consumption submenu feature described in the PR. These changes (adding authentication state checks with isReady and isLoading, removing animations, and adding account distinction information) should ideally be in a separate commit or PR to maintain clear separation of concerns.
Suggested change
| const [isReady, setIsReady] = useState(false) | |
| // Attendre que le composant soit monté pour éviter le clignotement | |
| useEffect(() => { | |
| setIsReady(true) | |
| }, []) |
| @@ -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.
Suggested change
| 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.
Suggested change
| const { selectedPdl: selectedPDL } = usePdlStore() | |
| usePdlStore() |
Comment on lines
+7
to
+21
| const [isDarkMode, setIsDarkMode] = useState(false) | ||
|
|
||
| // Detect dark mode | ||
| useEffect(() => { | ||
| const checkDarkMode = () => { | ||
| setIsDarkMode(document.documentElement.classList.contains('dark')) | ||
| } | ||
| checkDarkMode() | ||
| const observer = new MutationObserver(checkDarkMode) | ||
| observer.observe(document.documentElement, { | ||
| attributes: true, | ||
| attributeFilter: ['class'] | ||
| }) | ||
| return () => observer.disconnect() | ||
| }, []) |
There was a problem hiding this comment.
Unused variable isDarkMode.
Suggested change
| const [isDarkMode, setIsDarkMode] = useState(false) | |
| // Detect dark mode | |
| useEffect(() => { | |
| const checkDarkMode = () => { | |
| setIsDarkMode(document.documentElement.classList.contains('dark')) | |
| } | |
| checkDarkMode() | |
| const observer = new MutationObserver(checkDarkMode) | |
| observer.observe(document.documentElement, { | |
| attributes: true, | |
| attributeFilter: ['class'] | |
| }) | |
| return () => observer.disconnect() | |
| }, []) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
Test Plan
🤖 Generated with Claude Code