feat: add keyboard shortcuts and statistics dashboard

Keyboard Shortcuts:
- Create useKeyboardShortcuts hook with configurable shortcuts
- Support Ctrl/Cmd, Alt, Shift modifiers
- Add 7 global shortcuts (New note, Search, Quick capture, etc.)
- Create KeyboardShortcutsHelp modal with categorized shortcuts
- Show formatted shortcut keys (⌘ on Mac, Ctrl on Windows)
- Press ? to open shortcuts help

Statistics Dashboard:
- Create StatsDashboard component with productivity metrics
- Calculate productivity score (0-100) based on completion rate
- Show notes statistics (total, active, archived, priority)
- Display todos statistics with completion rate
- Track content stats (notes with todos/images/files, unique tags)
- Show recent activity (notes updated in last 7 days)
- Visual progress bar for productivity score
- Integrate dashboard in left column below calendar

src/components/KeyboardShortcutsHelp.tsx

@@ -0,0 +1,82 @@
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "@/components/ui/dialog";
+import { Badge } from "@/components/ui/badge";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Keyboard } from "lucide-react";
+import { type KeyboardShortcut, formatShortcut } from "@/hooks/useKeyboardShortcuts";
+
+interface KeyboardShortcutsHelpProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  shortcuts: KeyboardShortcut[];
+}
+
+export function KeyboardShortcutsHelp({ open, onOpenChange, shortcuts }: KeyboardShortcutsHelpProps) {
+  // Group shortcuts by category
+  const groupedShortcuts = shortcuts.reduce((acc, shortcut) => {
+    // Determine category based on description
+    let category = 'Général';
+
+    if (shortcut.description.toLowerCase().includes('note')) {
+      category = 'Notes';
+    } else if (shortcut.description.toLowerCase().includes('recherch')) {
+      category = 'Recherche';
+    } else if (shortcut.description.toLowerCase().includes('todo') || shortcut.description.toLowerCase().includes('tâche')) {
+      category = 'Tâches';
+    } else if (shortcut.description.toLowerCase().includes('navigation')) {
+      category = 'Navigation';
+    } else if (shortcut.description.toLowerCase().includes('édition') || shortcut.description.toLowerCase().includes('gras') || shortcut.description.toLowerCase().includes('italique')) {
+      category = 'Édition';
+    }
+
+    if (!acc[category]) {
+      acc[category] = [];
+    }
+    acc[category].push(shortcut);
+    return acc;
+  }, {} as Record<string, KeyboardShortcut[]>);
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-2xl">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <Keyboard className="h-5 w-5" />
+            Raccourcis clavier
+          </DialogTitle>
+          <DialogDescription>
+            Utilisez ces raccourcis pour naviguer plus rapidement
+          </DialogDescription>
+        </DialogHeader>
+
+        <ScrollArea className="h-[500px] pr-4">
+          <div className="space-y-6">
+            {Object.entries(groupedShortcuts).map(([category, categoryShortcuts]) => (
+              <div key={category}>
+                <h3 className="text-sm font-semibold text-muted-foreground uppercase tracking-wide mb-3">
+                  {category}
+                </h3>
+                <div className="space-y-2">
+                  {categoryShortcuts.map((shortcut, index) => (
+                    <div
+                      key={index}
+                      className="flex items-center justify-between py-2 px-3 rounded-lg hover:bg-accent transition-colors"
+                    >
+                      <span className="text-sm">{shortcut.description}</span>
+                      <Badge variant="secondary" className="font-mono text-xs">
+                        {formatShortcut(shortcut)}
+                      </Badge>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            ))}
+          </div>
+        </ScrollArea>
+
+        <div className="text-xs text-muted-foreground text-center pt-4 border-t">
+          Appuyez sur <Badge variant="outline" className="mx-1">?</Badge> pour afficher cette aide
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

src/components/StatsDashboard.tsx

@@ -0,0 +1,204 @@
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Progress } from "@/components/ui/progress";
+import {
+  FileText,
+  CheckSquare,
+  Tag as TagIcon,
+  TrendingUp,
+  Calendar as CalendarIcon,
+  Clock,
+  Target,
+  Zap
+} from "lucide-react";
+import { Note } from "@/services/NotesService";
+import { Todo } from "@/services/TodosService";
+
+interface StatsDashboardProps {
+  notes: Note[];
+  todos: Todo[];
+}
+
+export function StatsDashboard({ notes, todos }: StatsDashboardProps) {
+  // Calculate statistics
+  const totalNotes = notes.length;
+  const archivedNotes = notes.filter(n => n.archived).length;
+  const activeNotes = totalNotes - archivedNotes;
+  const priorityNotes = notes.filter(n => n.priority && !n.archived).length;
+
+  const totalTodos = todos.length;
+  const completedTodos = todos.filter(t => t.completed).length;
+  const activeTodos = totalTodos - completedTodos;
+  const completionRate = totalTodos > 0 ? (completedTodos / totalTodos) * 100 : 0;
+
+  // Notes with specific content
+  const notesWithTodos = notes.filter(n => n.todos && n.todos.length > 0 && !n.archived).length;
+  const notesWithImages = notes.filter(n => n.images && n.images.length > 0 && !n.archived).length;
+  const notesWithFiles = notes.filter(n => n.files && n.files.length > 0 && !n.archived).length;
+
+  // Get all unique tags
+  const allTags = new Set<string>();
+  notes.forEach(note => {
+    note.tags?.forEach(tag => allTags.add(tag.name));
+  });
+  const totalTags = allTags.size;
+
+  // Recent activity (notes updated in last 7 days)
+  const sevenDaysAgo = new Date();
+  sevenDaysAgo.setDate(sevenDaysAgo.getDate() - 7);
+  const recentlyUpdated = notes.filter(n =>
+    n.updated_at && new Date(n.updated_at) > sevenDaysAgo
+  ).length;
+
+  // Calculate productivity score (0-100)
+  const productivityScore = Math.round(
+    (completionRate * 0.4) +
+    ((activeNotes > 0 ? Math.min(priorityNotes / activeNotes, 1) : 0) * 20) +
+    ((recentlyUpdated / Math.max(activeNotes, 1)) * 40)
+  );
+
+  return (
+    <div className="space-y-4">
+      {/* Productivity Score */}
+      <Card>
+        <CardHeader className="pb-3">
+          <CardTitle className="text-sm font-medium flex items-center gap-2">
+            <Target className="h-4 w-4 text-primary" />
+            Score de Productivité
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="space-y-2">
+            <div className="flex items-center justify-between">
+              <span className="text-3xl font-bold">{productivityScore}</span>
+              <Badge variant={productivityScore >= 70 ? "default" : productivityScore >= 40 ? "secondary" : "outline"}>
+                {productivityScore >= 70 ? "Excellent" : productivityScore >= 40 ? "Bien" : "À améliorer"}
+              </Badge>
+            </div>
+            <Progress value={productivityScore} className="h-2" />
+            <p className="text-xs text-muted-foreground">
+              Basé sur le taux de complétion, notes prioritaires et activité récente
+            </p>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Notes Statistics */}
+      <div className="grid grid-cols-2 gap-4">
+        <Card>
+          <CardHeader className="pb-3">
+            <CardTitle className="text-sm font-medium flex items-center gap-2">
+              <FileText className="h-4 w-4" />
+              Notes
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-2">
+              <div className="flex items-center justify-between">
+                <span className="text-xs text-muted-foreground">Total</span>
+                <span className="text-2xl font-bold">{totalNotes}</span>
+              </div>
+              <div className="flex items-center justify-between text-xs">
+                <span className="text-muted-foreground">Actives</span>
+                <Badge variant="secondary">{activeNotes}</Badge>
+              </div>
+              <div className="flex items-center justify-between text-xs">
+                <span className="text-muted-foreground">Archivées</span>
+                <Badge variant="outline">{archivedNotes}</Badge>
+              </div>
+              <div className="flex items-center justify-between text-xs">
+                <span className="text-muted-foreground">Prioritaires</span>
+                <Badge variant="destructive">{priorityNotes}</Badge>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader className="pb-3">
+            <CardTitle className="text-sm font-medium flex items-center gap-2">
+              <CheckSquare className="h-4 w-4" />
+              Tâches
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-2">
+              <div className="flex items-center justify-between">
+                <span className="text-xs text-muted-foreground">Total</span>
+                <span className="text-2xl font-bold">{totalTodos}</span>
+              </div>
+              <div className="flex items-center justify-between text-xs">
+                <span className="text-muted-foreground">Complétées</span>
+                <Badge variant="secondary">{completedTodos}</Badge>
+              </div>
+              <div className="flex items-center justify-between text-xs">
+                <span className="text-muted-foreground">En cours</span>
+                <Badge variant="default">{activeTodos}</Badge>
+              </div>
+              <div className="flex items-center justify-between text-xs">
+                <span className="text-muted-foreground">Taux</span>
+                <Badge variant="outline">{completionRate.toFixed(0)}%</Badge>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Content Statistics */}
+      <Card>
+        <CardHeader className="pb-3">
+          <CardTitle className="text-sm font-medium flex items-center gap-2">
+            <Zap className="h-4 w-4" />
+            Contenu
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="grid grid-cols-2 gap-4">
+            <div className="space-y-1">
+              <div className="flex items-center justify-between text-xs">
+                <span className="text-muted-foreground">Avec tâches</span>
+                <Badge variant="secondary">{notesWithTodos}</Badge>
+              </div>
+              <div className="flex items-center justify-between text-xs">
+                <span className="text-muted-foreground">Avec images</span>
+                <Badge variant="secondary">{notesWithImages}</Badge>
+              </div>
+            </div>
+            <div className="space-y-1">
+              <div className="flex items-center justify-between text-xs">
+                <span className="text-muted-foreground">Avec fichiers</span>
+                <Badge variant="secondary">{notesWithFiles}</Badge>
+              </div>
+              <div className="flex items-center justify-between text-xs">
+                <span className="text-muted-foreground">Tags uniques</span>
+                <Badge variant="secondary">{totalTags}</Badge>
+              </div>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Recent Activity */}
+      <Card>
+        <CardHeader className="pb-3">
+          <CardTitle className="text-sm font-medium flex items-center gap-2">
+            <TrendingUp className="h-4 w-4" />
+            Activité Récente
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-2">
+              <Clock className="h-4 w-4 text-muted-foreground" />
+              <span className="text-sm text-muted-foreground">Derniers 7 jours</span>
+            </div>
+            <div className="flex items-center gap-2">
+              <span className="text-2xl font-bold">{recentlyUpdated}</span>
+              <span className="text-sm text-muted-foreground">notes modifiées</span>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

src/hooks/useKeyboardShortcuts.ts

@@ -0,0 +1,87 @@
+import { useEffect } from 'react';
+
+export interface KeyboardShortcut {
+  key: string;
+  ctrl?: boolean;
+  alt?: boolean;
+  shift?: boolean;
+  meta?: boolean;
+  description: string;
+  handler: () => void;
+  preventDefault?: boolean;
+}
+
+/**
+ * Custom hook for managing keyboard shortcuts
+ */
+export function useKeyboardShortcuts(
+  shortcuts: KeyboardShortcut[],
+  enabled = true
+) {
+  useEffect(() => {
+    if (!enabled) return;
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      for (const shortcut of shortcuts) {
+        const keyMatch = event.key.toLowerCase() === shortcut.key.toLowerCase();
+        const ctrlMatch = shortcut.ctrl ? (event.ctrlKey || event.metaKey) : !event.ctrlKey && !event.metaKey;
+        const altMatch = shortcut.alt ? event.altKey : !event.altKey;
+        const shiftMatch = shortcut.shift ? event.shiftKey : !event.shiftKey;
+        const metaMatch = shortcut.meta ? event.metaKey : !event.metaKey;
+
+        if (keyMatch && ctrlMatch && altMatch && shiftMatch && metaMatch) {
+          if (shortcut.preventDefault !== false) {
+            event.preventDefault();
+          }
+          shortcut.handler();
+          break;
+        }
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [shortcuts, enabled]);
+}
+
+/**
+ * Format keyboard shortcut for display
+ */
+export function formatShortcut(shortcut: KeyboardShortcut): string {
+  const parts: string[] = [];
+
+  if (shortcut.ctrl || shortcut.meta) {
+    parts.push(navigator.platform.includes('Mac') ? '⌘' : 'Ctrl');
+  }
+  if (shortcut.alt) {
+    parts.push(navigator.platform.includes('Mac') ? '⌥' : 'Alt');
+  }
+  if (shortcut.shift) {
+    parts.push(navigator.platform.includes('Mac') ? '⇧' : 'Shift');
+  }
+
+  parts.push(shortcut.key.toUpperCase());
+
+  return parts.join('+');
+}
+
+/**
+ * Common keyboard shortcuts used across the app
+ */
+export const COMMON_SHORTCUTS = {
+  NEW_NOTE: { key: 'n', ctrl: true, description: 'Nouvelle note' },
+  SEARCH: { key: 'k', ctrl: true, description: 'Rechercher' },
+  QUICK_CAPTURE: { key: 'q', ctrl: true, description: 'Capture rapide' },
+  TOGGLE_SIDEBAR: { key: 'b', ctrl: true, description: 'Basculer sidebar' },
+  SAVE: { key: 's', ctrl: true, description: 'Sauvegarder' },
+  CLOSE: { key: 'Escape', description: 'Fermer' },
+  HELP: { key: '?', shift: true, description: 'Aide raccourcis' },
+  ARCHIVE: { key: 'e', ctrl: true, description: 'Archiver note' },
+  DELETE: { key: 'Delete', ctrl: true, description: 'Supprimer' },
+  NEXT: { key: 'j', description: 'Suivant' },
+  PREVIOUS: { key: 'k', description: 'Précédent' },
+  TOGGLE_TODO: { key: 'Enter', ctrl: true, description: 'Toggle todo' },
+  BOLD: { key: 'b', ctrl: true, description: 'Gras' },
+  ITALIC: { key: 'i', ctrl: true, description: 'Italique' },
+  LINK: { key: 'k', ctrl: true, shift: true, description: 'Lien' },
+};

src/pages/Index.tsx

@@ -41,6 +41,9 @@ import { PomodoroTimer } from "@/components/PomodoroTimer";
 import { KanbanBoard } from "@/components/KanbanBoard";
 import { getSmartTagSuggestions } from "@/utils/smartTags";
 import { QuickCaptureWidget } from "@/components/QuickCaptureWidget";
+import { StatsDashboard } from "@/components/StatsDashboard";
+import { KeyboardShortcutsHelp } from "@/components/KeyboardShortcutsHelp";
+import { useKeyboardShortcuts, type KeyboardShortcut } from "@/hooks/useKeyboardShortcuts";
 
 // ===== FONCTIONS UTILITAIRES TIMEZONE EUROPE/PARIS =====
 
@@ -170,6 +173,8 @@ const Index = () => {
   const [selectedImage, setSelectedImage] = useState<string | null>(null);
   const [addEventModal, setAddEventModal] = useState(false);
   const [editEventModal, setEditEventModal] = useState<{ open: boolean, event?: CalendarEvent }>({ open: false });
+  const [showKeyboardHelp, setShowKeyboardHelp] = useState(false);
+  const [showStatsDashboard, setShowStatsDashboard] = useState(false);
 
   // Pagination states
   const [notesPage, setNotesPage] = useState(0);
@@ -934,6 +939,72 @@ const Index = () => {
     setCalendarPage(0);
   }, [calendarEvents.length]);
 
+  // Define keyboard shortcuts
+  const keyboardShortcuts: KeyboardShortcut[] = [
+    {
+      key: 'n',
+      ctrl: true,
+      description: 'Nouvelle note',
+      handler: () => !showAdmin && handleCreateNote()
+    },
+    {
+      key: 'k',
+      ctrl: true,
+      description: 'Rechercher',
+      handler: () => {
+        const searchInput = document.querySelector('input[type="search"]') as HTMLInputElement;
+        if (searchInput) searchInput.focus();
+      }
+    },
+    {
+      key: 'q',
+      ctrl: true,
+      description: 'Capture rapide',
+      handler: () => {
+        const captureButton = document.querySelector('[title="Capture rapide (Ctrl+Q)"]') as HTMLButtonElement;
+        if (captureButton) captureButton.click();
+      }
+    },
+    {
+      key: 'Escape',
+      description: 'Fermer note/modal',
+      handler: () => {
+        if (openNote) setOpenNote(null);
+        else if (showAdmin) setShowAdmin(false);
+        else if (showKeyboardHelp) setShowKeyboardHelp(false);
+      },
+      preventDefault: false
+    },
+    {
+      key: '?',
+      shift: true,
+      description: 'Aide raccourcis',
+      handler: () => setShowKeyboardHelp(true)
+    },
+    {
+      key: 'e',
+      ctrl: true,
+      description: 'Archiver note',
+      handler: async () => {
+        if (openNote?.id) {
+          await handleUpdateNote({ archived: !openNote.archived });
+        }
+      }
+    },
+    {
+      key: 's',
+      ctrl: true,
+      description: 'Sauvegarder (auto)',
+      handler: () => {
+        // Note: Auto-save is handled by the editor
+        showSuccess('Auto-save actif');
+      }
+    }
+  ];
+
+  // Register keyboard shortcuts
+  useKeyboardShortcuts(keyboardShortcuts, !showAdmin);
+
   // Pagination for todos
   const activeTodos = todos.filter(t => !t.completed);
   const completedTodos = todos.filter(t => t.completed);
@@ -1191,6 +1262,9 @@ const Index = () => {
                 )}
               </CardContent>
             </Card>
+
+            {/* Statistics Dashboard */}
+            <StatsDashboard notes={notes} todos={todos} />
           </div>
 
           {/* Middle Column: Notes or Open Note */}
@@ -3068,6 +3142,13 @@ const Index = () => {
         </div>
       )}
 
+      {/* Keyboard Shortcuts Help Modal */}
+      <KeyboardShortcutsHelp
+        open={showKeyboardHelp}
+        onOpenChange={setShowKeyboardHelp}
+        shortcuts={keyboardShortcuts}
+      />
+
       {/* Quick Capture Widget */}
       <QuickCaptureWidget onNoteCaptured={loadNotes} />
     </div>