From 24de0160a3fe50d0ae8f639cb46f5cc253c92fa8 Mon Sep 17 00:00:00 2001
From: Adrien Delmastro <adri.delmastro@gmail.com>
Date: Thu, 12 Feb 2026 15:06:16 +0100
Subject: [PATCH] [FEAT] front done

---
 pwa/app/components/molecules/Header.tsx       | 27 ++++++++
 pwa/app/components/molecules/Sidebar.tsx      | 50 ++++++++++++++
 pwa/app/components/tabs/points.tsx            |  1 +
 pwa/app/page.tsx                              | 68 ++++---------------
 ...agram.services.tsx => diagram.services.ts} |  0
 ...points.services.tsx => points.services.ts} |  0
 ...oral.services.tsx => temporal.services.ts} |  2 +-
 7 files changed, 91 insertions(+), 57 deletions(-)
 create mode 100644 pwa/app/components/molecules/Header.tsx
 create mode 100644 pwa/app/components/molecules/Sidebar.tsx
 rename pwa/app/services/{diagram.services.tsx => diagram.services.ts} (100%)
 rename pwa/app/services/{points.services.tsx => points.services.ts} (100%)
 rename pwa/app/services/{temporal.services.tsx => temporal.services.ts} (99%)

diff --git a/pwa/app/components/molecules/Header.tsx b/pwa/app/components/molecules/Header.tsx
new file mode 100644
index 0000000..ef26b7b
--- /dev/null
+++ b/pwa/app/components/molecules/Header.tsx
@@ -0,0 +1,27 @@
+import { Search } from 'lucide-react'
+
+interface HeaderProps {
+    onToggleSidebar: () => void
+}
+
+export default function Header({ onToggleSidebar }: HeaderProps) {
+    return (
+        <div className="bg-[#212529] w-full h-22 flex items-center gap-4 px-6 relative z-20">
+            <button
+                onClick={onToggleSidebar}
+                className="md:hidden flex flex-col gap-1 hover:cursor-pointer"
+            >
+                <div className="w-6 h-0.5 rounded-full bg-[#3a3f44]"></div>
+                <div className="w-6 h-0.5 rounded-full bg-[#3a3f44]"></div>
+                <div className="w-6 h-0.5 rounded-full bg-[#3a3f44]"></div>
+            </button>
+            <div className="relative w-2/6">
+                <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-[#b0afaf]" size={16} />
+                <input
+                    className="rounded-full border-[#3a3f44] border-2 w-full pl-9 pr-3 py-1.5 bg-transparent text-white placeholder-[#b0afaf]"
+                    placeholder="Search"
+                />
+            </div>
+        </div>
+    )
+}
diff --git a/pwa/app/components/molecules/Sidebar.tsx b/pwa/app/components/molecules/Sidebar.tsx
new file mode 100644
index 0000000..5571035
--- /dev/null
+++ b/pwa/app/components/molecules/Sidebar.tsx
@@ -0,0 +1,50 @@
+const tabs = [
+    { key: 'temporal', label: 'Temporal' },
+    { key: 'points', label: 'Points' },
+    { key: 'diagram', label: 'Diagram' },
+] 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) {
+    return (
+        <div className={`bg-[#212529] w-fit shrink-0 px-8 py-6 text-white border-r border-[#3a3f44] ${open ? 'block' : 'hidden'} md:block absolute md:relative z-20 h-full md:h-auto`}>
+            <div className="w-fit">
+                <div className="flex gap-2 items-center mb-8 w-fit">
+                    <div className="flex gap-1 items-end justify-center rounded">
+                        <div className="bar h-5 w-1 rounded-full bg-white" style={{ animationDelay: '0s' }}></div>
+                        <div className="bar h-3.5 w-1 rounded-full bg-white" style={{ animationDelay: '0.4s' }}></div>
+                        <div className="bar h-4.5 w-1 rounded-full bg-white" style={{ animationDelay: '0.8s' }}></div>
+                    </div>
+                    <h1>FullStack Lab</h1>
+                </div>
+
+                <div className="flex gap-2 items-center text-[#b0afaf] mb-4">
+                    <p className="uppercase text-xs">Visualisation</p>
+                </div>
+
+                <nav className="flex flex-col gap-1">
+                    {tabs.map((tab) => (
+                        <button
+                            key={tab.key}
+                            onClick={() => onTabChange(tab.key)}
+                            className={`text-left text-sm px-3 py-2 rounded transition-colors ${
+                                activeTab === tab.key
+                                    ? 'bg-[#181C1F] text-white'
+                                    : 'text-[#b0afaf] hover:text-white'
+                            }`}
+                        >
+                            {tab.label}
+                        </button>
+                    ))}
+                </nav>
+            </div>
+        </div>
+    )
+}
diff --git a/pwa/app/components/tabs/points.tsx b/pwa/app/components/tabs/points.tsx
index 3a005c6..29acdb3 100644
--- a/pwa/app/components/tabs/points.tsx
+++ b/pwa/app/components/tabs/points.tsx
@@ -100,6 +100,7 @@ export default function Points() {
         },
         plugins: {
             legend: { display: false },
+            datalabels: { display: false },
             tooltip: {
                 backgroundColor: '#212529',
                 borderColor: '#3a3f44',
diff --git a/pwa/app/page.tsx b/pwa/app/page.tsx
index 4726df0..183998e 100644
--- a/pwa/app/page.tsx
+++ b/pwa/app/page.tsx
@@ -1,19 +1,12 @@
 'use client'
 
 import { useState } from 'react'
-import { Search } from 'lucide-react'
+import Sidebar, { type TabKey } from './components/molecules/Sidebar'
+import Header from './components/molecules/Header'
 import Temporal from './components/tabs/temporal'
 import Points from './components/tabs/points'
 import Diagram from './components/tabs/diagram'
 
-const tabs = [
-    { key: 'temporal', label: 'Temporal' },
-    { key: 'points', label: 'Points' },
-    { key: 'diagram', label: 'Diagram' },
-] as const
-
-type TabKey = (typeof tabs)[number]['key']
-
 const tabComponents: Record<TabKey, React.ComponentType> = {
     temporal: Temporal,
     points: Points,
@@ -22,58 +15,21 @@ const tabComponents: Record<TabKey, React.ComponentType> = {
 
 export default function Home() {
     const [activeTab, setActiveTab] = useState<TabKey>('temporal')
+    const [sidebarOpen, setSidebarOpen] = useState(false)
     const ActiveComponent = tabComponents[activeTab]
 
     return (
-        <main className="flex h-screen">
-            <div className="bg-[#212529] w-fit shrink-0 px-8 py-6 text-white border-r border-[#3a3f44]">
-                <div className="w-fit">
-                    <div className="flex gap-2 items-center mb-8 w-fit">
-                        <div className="flex gap-1 items-end justify-center rounded">
-                            <div className="bar h-5 w-1 rounded-full bg-white" style={{ animationDelay: '0s' }}></div>
-                            <div className="bar h-3.5 w-1 rounded-full bg-white" style={{ animationDelay: '0.4s' }}></div>
-                            <div className="bar h-4.5 w-1 rounded-full bg-white" style={{ animationDelay: '0.8s' }}></div>
-                        </div>
-                        <h1>FullStack Lab</h1>
-                    </div>
-
-                    <div className="flex gap-2 items-center text-[#b0afaf] mb-4">
-                        <p className="uppercase text-xs">Visualisation</p>
-                    </div>
-
-                    <nav className="flex flex-col gap-1">
-                        {tabs.map((tab) => (
-                            <button
-                                key={tab.key}
-                                onClick={() => setActiveTab(tab.key)}
-                                className={`text-left text-sm px-3 py-2 rounded transition-colors ${
-                                    activeTab === tab.key
-                                        ? 'bg-[#181C1F] text-white'
-                                        : 'text-[#b0afaf] hover:text-white'
-                                }`}
-                            >
-                                {tab.label}
-                            </button>
-                        ))}
-                    </nav>
-                </div>
-            </div>
+        <main className="flex h-screen relative">
+            <Sidebar activeTab={activeTab} onTabChange={setActiveTab} open={sidebarOpen} />
+            {sidebarOpen && (
+                <div
+                    className="fixed inset-0 bg-black/50 z-10 md:hidden"
+                    onClick={() => setSidebarOpen(false)}
+                />
+            )}
 
             <div className="w-full flex flex-col min-w-0">
-                <div className="bg-[#212529] w-full h-22 flex items-center gap-4 px-6">
-                    <div className="flex flex-col gap-1 hover:cursor-pointer">
-                        <div className="w-6 h-0.5 rounded-full bg-[#3a3f44]"></div>
-                        <div className="w-6 h-0.5 rounded-full bg-[#3a3f44]"></div>
-                        <div className="w-6 h-0.5 rounded-full bg-[#3a3f44]"></div>
-                    </div>
-                    <div className="relative w-2/6">
-                        <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-[#b0afaf]" size={16} />
-                        <input
-                            className="rounded-full border-[#3a3f44] border-2 w-full pl-9 pr-3 py-1.5 bg-transparent text-white placeholder-[#b0afaf]"
-                            placeholder="Search"
-                        />
-                    </div>
-                </div>
+                <Header onToggleSidebar={() => setSidebarOpen(prev => !prev)} />
                 <div className="w-full flex-1 bg-[#181C1F] overflow-auto">
                     <ActiveComponent />
                 </div>
diff --git a/pwa/app/services/diagram.services.tsx b/pwa/app/services/diagram.services.ts
similarity index 100%
rename from pwa/app/services/diagram.services.tsx
rename to pwa/app/services/diagram.services.ts
diff --git a/pwa/app/services/points.services.tsx b/pwa/app/services/points.services.ts
similarity index 100%
rename from pwa/app/services/points.services.tsx
rename to pwa/app/services/points.services.ts
diff --git a/pwa/app/services/temporal.services.tsx b/pwa/app/services/temporal.services.ts
similarity index 99%
rename from pwa/app/services/temporal.services.tsx
rename to pwa/app/services/temporal.services.ts
index 526e4a7..b6ff8e2 100644
--- a/pwa/app/services/temporal.services.tsx
+++ b/pwa/app/services/temporal.services.ts
@@ -14,7 +14,7 @@ export type TimeSeriesData = Record<string, TimeSeriesEntry[]>
 
 export async function getTimeSeries(regions: string[], taxType: string, startYear?: number, endYear?: number): Promise<TimeSeriesData> {
     const params = new URLSearchParams({ tax_type: taxType })
-    if (regions.length > 0) params.set('region', regions.join(','))
+    if (regions.length > 0) params.set('region', regions.join(',')) 
     if (startYear) params.set('start_year', String(startYear))
     if (endYear) params.set('end_year', String(endYear))
     const res = await fetch(`/api/taxes/timeseries?${params}`)
-- 
GitLab