From 5e937fa2a9dfaf1a03fddb7f066257dc1161d07b Mon Sep 17 00:00:00 2001
From: Adrien Delmastro <adri.delmastro@gmail.com>
Date: Thu, 12 Feb 2026 21:53:07 +0100
Subject: [PATCH 1/2] [WIP] - work in progress

---
 pwa/app/components/molecules/Header.tsx  | 35 ++++++-----
 pwa/app/components/molecules/Sidebar.tsx | 79 ++++++++++++++++++++++--
 pwa/app/components/tabs/temporal.tsx     | 10 +++
 pwa/app/globals.css                      |  4 +-
 4 files changed, 105 insertions(+), 23 deletions(-)

diff --git a/pwa/app/components/molecules/Header.tsx b/pwa/app/components/molecules/Header.tsx
index ef26b7b..5ae00d1 100644
--- a/pwa/app/components/molecules/Header.tsx
+++ b/pwa/app/components/molecules/Header.tsx
@@ -7,20 +7,27 @@ interface HeaderProps {
 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 className="flex items-center gap-4 w-5/6">
+                <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-5/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>
+            <div className='w-1/6 flex justify-end'>
+                <div className="h-10 w-10 rounded-full bg-[#8884d8] flex items-center justify-center text-white text-xs font-bold">
+                    ACJJ
+                </div>
             </div>
         </div>
     )
diff --git a/pwa/app/components/molecules/Sidebar.tsx b/pwa/app/components/molecules/Sidebar.tsx
index 5571035..ff41ad2 100644
--- a/pwa/app/components/molecules/Sidebar.tsx
+++ b/pwa/app/components/molecules/Sidebar.tsx
@@ -1,7 +1,9 @@
+import { TrendingUp, ScatterChart, PieChart, BookOpen, FileText, ExternalLink, FileCode } from 'lucide-react'
+
 const tabs = [
-    { key: 'temporal', label: 'Temporal' },
-    { key: 'points', label: 'Points' },
-    { key: 'diagram', label: 'Diagram' },
+    { key: 'temporal', label: 'Séries temporelles', icon: TrendingUp },
+    { key: 'points', label: 'Nuage de points', icon: ScatterChart },
+    { key: 'diagram', label: 'Diagramme circulaire', icon: PieChart },
 ] as const
 
 export type TabKey = (typeof tabs)[number]['key']
@@ -19,8 +21,8 @@ export default function Sidebar({ activeTab, onTabChange, open }: SidebarProps)
                 <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 className="bar h-3.5 w-1 rounded-full bg-white" style={{ animationDelay: '0.3s' }}></div>
+                        <div className="bar h-4.5 w-1 rounded-full bg-white" style={{ animationDelay: '0.6s' }}></div>
                     </div>
                     <h1>FullStack Lab</h1>
                 </div>
@@ -34,16 +36,81 @@ export default function Sidebar({ activeTab, onTabChange, open }: SidebarProps)
                         <button
                             key={tab.key}
                             onClick={() => onTabChange(tab.key)}
-                            className={`text-left text-sm px-3 py-2 rounded transition-colors ${
+                            className={`flex items-center gap-2 text-left text-sm px-3 py-2 rounded transition-colors cursor-pointer ${
                                 activeTab === tab.key
                                     ? 'bg-[#181C1F] text-white'
                                     : 'text-[#b0afaf] hover:text-white'
                             }`}
                         >
+                            <tab.icon size={16} />
                             {tab.label}
                         </button>
                     ))}
                 </nav>
+
+                <div className="flex gap-2 items-center text-[#b0afaf] mb-4 mt-8">
+                    <p className="uppercase text-xs">Infos</p>
+                </div>
+
+                <nav className="flex flex-col gap-1">
+                    <a
+                        href="https://pigne.org/teaching/webdev2/lecture/dynamic-graphical-data"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="flex items-center gap-2 text-left text-sm px-3 py-2 rounded text-[#b0afaf] hover:text-white transition-colors"
+                    >
+                        <BookOpen size={16} />
+                        Cours
+                    </a>
+                    <a
+                        href="https://pigne.org/teaching/webdev2/lab/FullStackLab"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="flex items-center gap-2 text-left text-sm px-3 py-2 rounded text-[#b0afaf] hover:text-white transition-colors"
+                    >
+                        <FileText size={16} />
+                        Sujet TP
+                    </a>
+                </nav>
+                <div className="flex gap-2 items-center text-[#b0afaf] mb-4 mt-8">
+                    <p className="uppercase text-xs">Librairies</p>
+                </div>
+
+                <nav className="flex flex-col gap-1">
+                    <a
+                        href="https://recharts.org"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="flex items-center gap-2 text-left text-sm px-3 py-2 rounded text-[#b0afaf] hover:text-white transition-colors"
+                    >
+                        <ExternalLink size={16} />
+                        Recharts
+                    </a>
+                    <a
+                        href="https://www.chartjs.org"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="flex items-center gap-2 text-left text-sm px-3 py-2 rounded text-[#b0afaf] hover:text-white transition-colors"
+                    >
+                        <ExternalLink size={16} />
+                        Chart.js
+                    </a>
+                </nav>
+                <div className="flex gap-2 items-center text-[#b0afaf] mb-4 mt-8">
+                    <p className="uppercase text-xs">API</p>
+                </div>
+
+                <nav className="flex flex-col gap-1">
+                    <a
+                        href="/api"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="flex items-center gap-2 text-left text-sm px-3 py-2 rounded text-[#b0afaf] hover:text-white transition-colors"
+                    >
+                        <FileCode size={16} />
+                        Swagger
+                    </a>
+                </nav>
             </div>
         </div>
     )
diff --git a/pwa/app/components/tabs/temporal.tsx b/pwa/app/components/tabs/temporal.tsx
index 60befb8..5dea77c 100644
--- a/pwa/app/components/tabs/temporal.tsx
+++ b/pwa/app/components/tabs/temporal.tsx
@@ -194,6 +194,16 @@ export default function Temporal({ regions }: TemporalProps) {
                             wrapperStyle={{
                                 paddingTop: '20px',
                             }}
+                            content={({ payload }) => (
+                                <div className="hidden lg:flex flex-wrap justify-center gap-x-4 gap-y-1 pt-5">
+                                    {payload?.map(entry => (
+                                        <span key={entry.value} className="flex items-center gap-1 text-xs text-[#b0afaf]">
+                                            <span className="inline-block w-3 h-3 rounded-sm" style={{ backgroundColor: entry.color }} />
+                                            {entry.value}
+                                        </span>
+                                    ))}
+                                </div>
+                            )}
                         />
                         {visibleRegions.map(region => (
                             <Line
diff --git a/pwa/app/globals.css b/pwa/app/globals.css
index 90cc7d3..73b7785 100644
--- a/pwa/app/globals.css
+++ b/pwa/app/globals.css
@@ -17,9 +17,7 @@ h1 {
 
 .bar {
     transform-origin: bottom;
-    animation: grow 0.4s ease-out forwards;
-    opacity: 0;
-    transform: scaleY(0);
+    animation: grow 1.2s ease-in-out infinite alternate;
 }
 
 .tooltip-scroll::-webkit-scrollbar {
-- 
GitLab


From 986d9aff542a7c50b15b874e7eaea84d026ad39c Mon Sep 17 00:00:00 2001
From: Adrien Delmastro <adri.delmastro@gmail.com>
Date: Thu, 12 Feb 2026 22:49:41 +0100
Subject: [PATCH 2/2] [FEAT] - restrain date order

---
 pwa/app/components/tabs/temporal.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/pwa/app/components/tabs/temporal.tsx b/pwa/app/components/tabs/temporal.tsx
index 5dea77c..beca4bf 100644
--- a/pwa/app/components/tabs/temporal.tsx
+++ b/pwa/app/components/tabs/temporal.tsx
@@ -114,13 +114,17 @@ export default function Temporal({ regions }: TemporalProps) {
 
                 <button
                     onClick={handleSubmit}
-                    disabled={loading}
+                    disabled={loading || startYear >= endYear}
                     className="bg-[#8884d8] hover:bg-[#7773c7] disabled:opacity-50 text-white text-sm px-4 py-1.5 rounded transition-colors"
                 >
                     {loading ? 'Chargement...' : 'Afficher'}
                 </button>
             </div>
 
+            {startYear >= endYear && (
+                <p className="text-xs text-red-400">La date de début doit être antérieure à la date de fin.</p>
+            )}
+
             {regions.length > 0 && (
                 <div className="flex flex-col gap-2">
                     <label className="text-xs text-[#b0afaf] uppercase">Régions {selectedRegions.length > 0 && `(${selectedRegions.length})`}</label>
-- 
GitLab