From c6b9eebb3d42520e2462e9671dae09ceaaa0ced8 Mon Sep 17 00:00:00 2001 From: Adrien Delmastro Date: Thu, 12 Feb 2026 23:56:26 +0100 Subject: [PATCH 1/3] WIP - context + homepage --- pwa/app/components/molecules/Sidebar.tsx | 44 ++++++++++++++------- pwa/app/components/organisms/Dashboard.tsx | 33 ---------------- pwa/app/components/organisms/MainLayout.tsx | 27 +++++++++++++ pwa/app/components/tabs/diagram.tsx | 8 ++-- pwa/app/components/tabs/temporal.tsx | 8 ++-- pwa/app/contexts/RegionsContext.tsx | 13 ++++++ pwa/app/diagram/page.tsx | 5 +++ pwa/app/layout.tsx | 12 +++++- pwa/app/page.tsx | 20 +--------- pwa/app/points/page.tsx | 5 +++ pwa/app/services/regions.services.ts | 12 ++++++ pwa/app/services/temporal.services.ts | 7 ---- pwa/app/temporal/page.tsx | 5 +++ 13 files changed, 115 insertions(+), 84 deletions(-) delete mode 100644 pwa/app/components/organisms/Dashboard.tsx create mode 100644 pwa/app/components/organisms/MainLayout.tsx create mode 100644 pwa/app/contexts/RegionsContext.tsx create mode 100644 pwa/app/diagram/page.tsx create mode 100644 pwa/app/points/page.tsx create mode 100644 pwa/app/services/regions.services.ts create mode 100644 pwa/app/temporal/page.tsx diff --git a/pwa/app/components/molecules/Sidebar.tsx b/pwa/app/components/molecules/Sidebar.tsx index ff41ad2..20e58dd 100644 --- a/pwa/app/components/molecules/Sidebar.tsx +++ b/pwa/app/components/molecules/Sidebar.tsx @@ -1,20 +1,22 @@ -import { TrendingUp, ScatterChart, PieChart, BookOpen, FileText, ExternalLink, FileCode } from 'lucide-react' +'use client' + +import Link from 'next/link' +import { usePathname } from 'next/navigation' +import { House, TrendingUp, ScatterChart, PieChart, BookOpen, FileText, ExternalLink, FileCode } from 'lucide-react' const tabs = [ - { key: 'temporal', label: 'Séries temporelles', icon: TrendingUp }, - { key: 'points', label: 'Nuage de points', icon: ScatterChart }, - { key: 'diagram', label: 'Diagramme circulaire', icon: PieChart }, + { href: '/temporal', label: 'Séries temporelles', icon: TrendingUp }, + { href: '/points', label: 'Nuage de points', icon: ScatterChart }, + { href: '/diagram', label: 'Diagramme circulaire', icon: PieChart }, ] as const -export type TabKey = (typeof tabs)[number]['key'] - interface SidebarProps { - activeTab: TabKey - onTabChange: (tab: TabKey) => void open: boolean } -export default function Sidebar({ activeTab, onTabChange, open }: SidebarProps) { +export default function Sidebar({ open }: SidebarProps) { + const pathname = usePathname() + return (
@@ -27,24 +29,38 @@ export default function Sidebar({ activeTab, onTabChange, open }: SidebarProps)

FullStack Lab

+ +

Visualisation

diff --git a/pwa/app/components/organisms/Dashboard.tsx b/pwa/app/components/organisms/Dashboard.tsx deleted file mode 100644 index 6bf2c1e..0000000 --- a/pwa/app/components/organisms/Dashboard.tsx +++ /dev/null @@ -1,33 +0,0 @@ -'use client' - -import { useState } from 'react' -import Sidebar, { type TabKey } from '../molecules/Sidebar' -import Header from '../molecules/Header' -import Temporal from '../tabs/temporal' -import Points from '../tabs/points' -import Diagram from '../tabs/diagram' - -interface DashboardProps { - regions: string[] -} - -export default function Dashboard({ regions }: DashboardProps) { - const [activeTab, setActiveTab] = useState('temporal') - const [sidebarOpen, setSidebarOpen] = useState(false) - - return ( -
- - {sidebarOpen &&
setSidebarOpen(false)} />} - -
-
setSidebarOpen(prev => !prev)} /> -
- {activeTab === 'temporal' && } - {activeTab === 'points' && } - {activeTab === 'diagram' && } -
-
-
- ) -} diff --git a/pwa/app/components/organisms/MainLayout.tsx b/pwa/app/components/organisms/MainLayout.tsx new file mode 100644 index 0000000..7b66587 --- /dev/null +++ b/pwa/app/components/organisms/MainLayout.tsx @@ -0,0 +1,27 @@ +'use client' + +import { useState } from 'react' +import Sidebar from '../molecules/Sidebar' +import Header from '../molecules/Header' + +interface MainLayoutProps { + children: React.ReactNode +} + +export default function MainLayout({ children }: MainLayoutProps) { + const [sidebarOpen, setSidebarOpen] = useState(false) + + return ( +
+ + {sidebarOpen &&
setSidebarOpen(false)} />} + +
+
setSidebarOpen(prev => !prev)} /> +
+ {children} +
+
+
+ ) +} diff --git a/pwa/app/components/tabs/diagram.tsx b/pwa/app/components/tabs/diagram.tsx index 7485ff3..cce1699 100644 --- a/pwa/app/components/tabs/diagram.tsx +++ b/pwa/app/components/tabs/diagram.tsx @@ -4,14 +4,12 @@ import { useState, useEffect } from 'react' import { PieChart, Pie, Cell, ResponsiveContainer, Tooltip, Legend } from 'recharts' import { TAX_TYPES, YEARS, COLORS } from '../../constants' import { getRegionDistribution, RegionDistribution } from '../../services/diagram.services' +import { useRegions } from '../../contexts/RegionsContext' import ErrorDiv from '../molecules/ErrorDiv' import RegionSelector from '../molecules/RegionSelector' -interface DiagramProps { - regions: string[] -} - -export default function Diagram({ regions }: DiagramProps) { +export default function Diagram() { + const regions = useRegions() const [taxType, setTaxType] = useState('') const [year, setYear] = useState(null) const [data, setData] = useState([]) diff --git a/pwa/app/components/tabs/temporal.tsx b/pwa/app/components/tabs/temporal.tsx index 7787da1..09fea7f 100644 --- a/pwa/app/components/tabs/temporal.tsx +++ b/pwa/app/components/tabs/temporal.tsx @@ -4,15 +4,13 @@ import { useState } from 'react' import { LineChart, Line, XAxis, YAxis, Tooltip, Legend, ResponsiveContainer, CartesianGrid } from 'recharts' import { getTimeSeries, type TimeSeriesData } from '../../services/temporal.services' import { TAX_TYPES, YEARS, COLORS } from '../../constants' +import { useRegions } from '../../contexts/RegionsContext' import ErrorDiv from '../molecules/ErrorDiv' import RegionSelector from '../molecules/RegionSelector' import Loader from '../molecules/Loader' -interface TemporalProps { - regions: string[] -} - -export default function Temporal({ regions }: TemporalProps) { +export default function Temporal() { + const regions = useRegions() // Selected tax type filter (tfpb, tfpnb, th, cfe) const [taxType, setTaxType] = useState('tfpb') // Start year for the time range diff --git a/pwa/app/contexts/RegionsContext.tsx b/pwa/app/contexts/RegionsContext.tsx new file mode 100644 index 0000000..948b257 --- /dev/null +++ b/pwa/app/contexts/RegionsContext.tsx @@ -0,0 +1,13 @@ +'use client' + +import { createContext, useContext } from 'react' + +const RegionsContext = createContext([]) + +export function RegionsProvider({ regions, children }: { regions: string[]; children: React.ReactNode }) { + return {children} +} + +export function useRegions() { + return useContext(RegionsContext) +} diff --git a/pwa/app/diagram/page.tsx b/pwa/app/diagram/page.tsx new file mode 100644 index 0000000..c824f6d --- /dev/null +++ b/pwa/app/diagram/page.tsx @@ -0,0 +1,5 @@ +import Diagram from '../components/tabs/diagram' + +export default function DiagramPage() { + return +} diff --git a/pwa/app/layout.tsx b/pwa/app/layout.tsx index ec732fb..d3b398d 100644 --- a/pwa/app/layout.tsx +++ b/pwa/app/layout.tsx @@ -1,14 +1,22 @@ import './globals.css' +import MainLayout from './components/organisms/MainLayout' +import { RegionsProvider } from './contexts/RegionsContext' +import { getRegions } from './services/regions.services' export const metadata = { title: 'FullStack Lab - REI 2022', description: 'Analyse des taxes locales françaises', } -export default function RootLayout({ children }: { children: React.ReactNode }) { +export default async function RootLayout({ children }: { children: React.ReactNode }) { + const regions = await getRegions() return ( - {children} + + + {children} + + ) } diff --git a/pwa/app/page.tsx b/pwa/app/page.tsx index 8e09455..92b1343 100644 --- a/pwa/app/page.tsx +++ b/pwa/app/page.tsx @@ -1,19 +1,3 @@ -import Dashboard from './components/organisms/Dashboard' - -const API_URL = process.env.NEXT_PUBLIC_ENTRYPOINT || 'http://php' - -async function getRegions(): Promise { - try { - const res = await fetch(`${API_URL}/api/regions`) - if (!res.ok) return [] - const data = await res.json() - return data.member.map((r: { regionName: string }) => r.regionName) - } catch { - return [] - } -} - -export default async function Home() { - const regions = await getRegions() - return +export default function Home() { + return
} diff --git a/pwa/app/points/page.tsx b/pwa/app/points/page.tsx new file mode 100644 index 0000000..511a6f5 --- /dev/null +++ b/pwa/app/points/page.tsx @@ -0,0 +1,5 @@ +import Points from '../components/tabs/points' + +export default function PointsPage() { + return +} diff --git a/pwa/app/services/regions.services.ts b/pwa/app/services/regions.services.ts new file mode 100644 index 0000000..65fd0f1 --- /dev/null +++ b/pwa/app/services/regions.services.ts @@ -0,0 +1,12 @@ +const API_URL = process.env.NEXT_PUBLIC_ENTRYPOINT || 'http://php' + +export async function getRegions(): Promise { + try { + const res = await fetch(`${API_URL}/api/regions`) + if (!res.ok) return [] + const data = await res.json() + return data.member.map((r: { regionName: string }) => r.regionName) + } catch { + return [] + } +} diff --git a/pwa/app/services/temporal.services.ts b/pwa/app/services/temporal.services.ts index b6ff8e2..227440e 100644 --- a/pwa/app/services/temporal.services.ts +++ b/pwa/app/services/temporal.services.ts @@ -1,10 +1,3 @@ -export async function getRegions(): Promise { - const res = await fetch('/api/regions') - if (!res.ok) throw new Error('Erreur lors du chargement des régions') - const data = await res.json() - return data.member.map((r: { regionName: string }) => r.regionName) -} - export interface TimeSeriesEntry { year: number avg_rate: string diff --git a/pwa/app/temporal/page.tsx b/pwa/app/temporal/page.tsx new file mode 100644 index 0000000..e669f6d --- /dev/null +++ b/pwa/app/temporal/page.tsx @@ -0,0 +1,5 @@ +import Temporal from '../components/tabs/temporal' + +export default function TemporalPage() { + return +} -- GitLab From 58dabeec46d12a8887294476a03af58ef1460545 Mon Sep 17 00:00:00 2001 From: Adrien Delmastro Date: Fri, 13 Feb 2026 00:12:23 +0100 Subject: [PATCH 2/3] [REFACTO] - homepage + context --- pwa/app/components/molecules/Header.tsx | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/pwa/app/components/molecules/Header.tsx b/pwa/app/components/molecules/Header.tsx index 5ae00d1..10391da 100644 --- a/pwa/app/components/molecules/Header.tsx +++ b/pwa/app/components/molecules/Header.tsx @@ -1,4 +1,4 @@ -import { Search } from 'lucide-react' +import { Search, Menu } from 'lucide-react' interface HeaderProps { onToggleSidebar: () => void @@ -10,11 +10,9 @@ export default function Header({ onToggleSidebar }: HeaderProps) {
-- GitLab From a511a956787dee10ac5856880059f2c610e313d9 Mon Sep 17 00:00:00 2001 From: Adrien Delmastro Date: Fri, 13 Feb 2026 00:12:50 +0100 Subject: [PATCH 3/3] [FIX] - diagram same loader --- pwa/app/components/tabs/diagram.tsx | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/pwa/app/components/tabs/diagram.tsx b/pwa/app/components/tabs/diagram.tsx index cce1699..8a7324d 100644 --- a/pwa/app/components/tabs/diagram.tsx +++ b/pwa/app/components/tabs/diagram.tsx @@ -7,6 +7,7 @@ import { getRegionDistribution, RegionDistribution } from '../../services/diagra import { useRegions } from '../../contexts/RegionsContext' import ErrorDiv from '../molecules/ErrorDiv' import RegionSelector from '../molecules/RegionSelector' +import Loader from '../molecules/Loader' export default function Diagram() { const regions = useRegions() @@ -200,12 +201,7 @@ export default function Diagram() { {error && } - {loading && !error && ( -
-
-

Chargement des données...

-
- )} + {loading && !error && } {!error && !loading && data.length > 0 && (
-- GitLab