cognitive-load: organize secondary info in tabs on dashboard

- Added Tabs component to organize Activity Feed content
- Chart and Activity List now in separate tabs (Graphique, Activité)
- Reduces cognitive load by showing one view at a time
- Default tab is 'Graphique' (Chart)
- Tabs are inside the collapsible Activity Feed section
- Action 10.1.1.3 complete

EXHAUSTIVE_TODO_LIST.md

@@ -3467,12 +3467,19 @@ Critical path dependencies:
     - **Status**: Component is fully functional and ready to use
   - **Rollback**: Delete component
 
-- [ ] **Action 10.1.1.3**: Use tabs or accordions for secondary info
+- [x] **Action 10.1.1.3**: Use tabs or accordions for secondary info
   - **Scope**: `apps/web/src/pages/DashboardPage.tsx` - Group secondary info in tabs
-  - **Dependencies**: Action 10.1.1.2 complete
+  - **Dependencies**: Action 10.1.1.2 complete ✅
   - **Risk**: MEDIUM (layout change)
-  - **Validation**: Secondary info in tabs
+  - **Validation**: ✅ Secondary info organized in tabs:
-  - **Rollback**: Restore single view
+    - **Tabs component**: Added Tabs, TabsList, TabsTrigger, TabsContent imports
+    - **Tab structure**: Two tabs ("Graphique" and "Activité") organize Activity Feed content
+    - **Chart tab**: Contains the activity chart with time period buttons (7J, 30J, MAX)
+    - **Activity tab**: Contains the recent activity list with activity items
+    - **Default tab**: "Graphique" is the default active tab
+    - **Layout**: Tabs are inside the Collapsible Activity Feed section
+    - **Result**: Secondary information (chart and activity list) is now organized in tabs, reducing cognitive load by showing one view at a time
+  - **Rollback**: Remove Tabs wrapper, restore space-y-6 div with both Cards visible
 
 - [x] **Action 10.1.1.4**: Create Accordion component (if doesn't exist)
   - **Scope**: `apps/web/src/components/ui/accordion.tsx` (create) - Reusable accordion component ✅

apps/web/src/pages/DashboardPage.tsx

@@ -24,6 +24,7 @@ import { formatDistanceToNow } from 'date-fns';
 import { fr } from 'date-fns/locale';
 import { KodoEmptyState } from '@/components/ui/KodoEmptyState';
 import { Collapsible } from '@/components/ui/collapsible';
+import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs';
 import { FAB } from '@/components/ui/FAB';
 import { cn } from '@/lib/utils';
 
@@ -256,8 +257,13 @@ export function DashboardPage() {
                 triggerClassName="p-0 hover:bg-transparent"
                 contentClassName="pt-0"
               >
-                <div className="space-y-6">
+                {/* Action 10.1.1.3: Use tabs to organize secondary info */}
-                  {/* Chart Card */}
+                <Tabs defaultValue="chart" className="mt-6">
+                  <TabsList className="grid w-full grid-cols-2">
+                    <TabsTrigger value="chart">Graphique</TabsTrigger>
+                    <TabsTrigger value="activity">Activité</TabsTrigger>
+                  </TabsList>
+                  <TabsContent value="chart" className="mt-4">
                     <Card>
                       <CardHeader>
                         <div className="flex items-center justify-between">
@@ -296,8 +302,8 @@ export function DashboardPage() {
                         </div>
                       </CardContent>
                     </Card>
-
+                  </TabsContent>
-                  {/* Recent Activity List */}
+                  <TabsContent value="activity" className="mt-4">
                     <Card>
                       <CardHeader>
                         <CardTitle className="flex items-center gap-2">
@@ -350,7 +356,8 @@ export function DashboardPage() {
                         </div>
                       </CardContent>
                     </Card>
-                </div>
+                  </TabsContent>
+                </Tabs>
               </Collapsible>
             </CardHeader>
           </Card>