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
2026-10-15 19:27:53 +02:00 · 2025-11-27 19:43:26 +00:00
1 parent 1e9795e5d9
commit a3d8167a46
@@ -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>
+  );
+}
@@ -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>
+  );
+}