diff --git a/pwa/app/components/molecules/Header.tsx b/pwa/app/components/molecules/Header.tsx index 5ae00d1d79a756bd78369dd1289ed06003c4dd0e..10391dad69591acbcaef71c817da4113665291a1 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) {
diff --git a/pwa/app/components/molecules/Sidebar.tsx b/pwa/app/components/molecules/Sidebar.tsx index ff41ad28f1ea71a9c0a3a5204b831315524d4fef..20e58ddd1d311c829697bcf2021e6449ed78ae9d 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 6bf2c1ef0a0cab241588b31c3bad72a58813f1c7..0000000000000000000000000000000000000000 --- 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 0000000000000000000000000000000000000000..7b66587d9023f5efc1cb995cf730fdd62817a635 --- /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 7485ff3d9d05243aa4cfe9ccd9458319d096902e..8a7324d7a6dbed582c1213f5068db713eb7bafaf 100644 --- a/pwa/app/components/tabs/diagram.tsx +++ b/pwa/app/components/tabs/diagram.tsx @@ -4,14 +4,13 @@ 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' +import Loader from '../molecules/Loader' -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([]) @@ -202,12 +201,7 @@ export default function Diagram({ regions }: DiagramProps) { {error && } - {loading && !error && ( -
-
-

Chargement des données...

-
- )} + {loading && !error && } {!error && !loading && data.length > 0 && (
diff --git a/pwa/app/components/tabs/temporal.tsx b/pwa/app/components/tabs/temporal.tsx index 7787da12856793de32836e0de39e90363c15376b..09fea7f2774207dcaa0e84a7545baa534a22d87b 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 0000000000000000000000000000000000000000..948b2576197c2d80933401ff7eb573d0759f807c --- /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 0000000000000000000000000000000000000000..c824f6dbfdc6fd74b975261be778b82361c4394c --- /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 ec732fb7460633e6c7441894aa7cbee28206408e..d3b398dcf7cd74a30126caa285e902e919f0365c 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 8e0945508e4479173098e0e94c40398e1ea1eab0..92b134348d2ca976aba3a68c3b9dc5ab0b83defb 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 0000000000000000000000000000000000000000..511a6f52f4940c0139f1e60d20023b2b398f8062 --- /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 0000000000000000000000000000000000000000..65fd0f10ecbc6ae7c538c94c698652a3a80f4612 --- /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 b6ff8e28ccec47d1bdbf7b6241a39b11895a37bf..227440e20cc085872609a9b79287ad5791a2bb04 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 0000000000000000000000000000000000000000..e669f6d638ad39ba71c4fe6f39a76c0b3eb4c3da --- /dev/null +++ b/pwa/app/temporal/page.tsx @@ -0,0 +1,5 @@ +import Temporal from '../components/tabs/temporal' + +export default function TemporalPage() { + return +}