feat: add weekly summary features and components

- Introduced `CategoryBreakdown`, `JiraWeeklyMetrics`, `PeriodSelector`, and `VelocityMetrics` components to enhance the weekly summary dashboard.
- Updated `WeeklySummaryClient` to manage period selection and PDF export functionality.
- Enhanced `WeeklySummaryService` to support period comparisons and activity categorization.
- Added new API route for fetching weekly summary data based on selected period.
- Updated `package.json` and `package-lock.json` to include `jspdf` and related types for PDF generation.
- Marked several tasks as complete in `TODO.md` to reflect progress on summary features.

components/dashboard/CategoryBreakdown.tsx

@@ -0,0 +1,146 @@
+'use client';
+
+import { Card, CardHeader, CardContent } from '@/components/ui/Card';
+import { Badge } from '@/components/ui/Badge';
+
+interface CategoryData {
+  count: number;
+  percentage: number;
+  color: string;
+  icon: string;
+}
+
+interface CategoryBreakdownProps {
+  categoryData: { [categoryName: string]: CategoryData };
+  totalActivities: number;
+}
+
+export function CategoryBreakdown({ categoryData, totalActivities }: CategoryBreakdownProps) {
+  const categories = Object.entries(categoryData)
+    .filter(([, data]) => data.count > 0)
+    .sort((a, b) => b[1].count - a[1].count);
+
+  if (categories.length === 0) {
+    return (
+      <Card>
+        <CardHeader>
+          <h3 className="text-lg font-semibold">📊 Répartition par catégorie</h3>
+        </CardHeader>
+        <CardContent>
+          <p className="text-center text-[var(--muted-foreground)]">
+            Aucune activité à catégoriser
+          </p>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <h3 className="text-lg font-semibold">📊 Répartition par catégorie</h3>
+        <p className="text-sm text-[var(--muted-foreground)]">
+          Analyse automatique de vos {totalActivities} activités
+        </p>
+      </CardHeader>
+
+      <CardContent className="space-y-6">
+        {/* Légende des catégories */}
+        <div className="flex flex-wrap gap-3 justify-center">
+          {categories.map(([categoryName, data]) => (
+            <div 
+              key={categoryName}
+              className="flex items-center gap-2 bg-[var(--card)] border border-[var(--border)] rounded-lg px-3 py-2 hover:border-[var(--primary)]/50 transition-colors"
+            >
+              <div 
+                className="w-3 h-3 rounded-full"
+                style={{ backgroundColor: data.color }}
+              />
+              <span className="text-sm font-medium text-[var(--foreground)]">
+                {data.icon} {categoryName}
+              </span>
+              <Badge className="bg-[var(--primary)]/10 text-[var(--primary)] text-xs">
+                {data.count}
+              </Badge>
+            </div>
+          ))}
+        </div>
+
+        {/* Barres de progression */}
+        <div className="space-y-3">
+          {categories.map(([categoryName, data]) => (
+            <div key={categoryName} className="space-y-1">
+              <div className="flex items-center justify-between text-sm">
+                <span className="flex items-center gap-2">
+                  <span>{data.icon}</span>
+                  <span className="font-medium">{categoryName}</span>
+                </span>
+                <span className="text-[var(--muted-foreground)]">
+                  {data.count} ({data.percentage.toFixed(1)}%)
+                </span>
+              </div>
+              
+              <div className="w-full bg-[var(--border)] rounded-full h-2">
+                <div 
+                  className="h-2 rounded-full transition-all duration-500"
+                  style={{ 
+                    backgroundColor: data.color,
+                    width: `${data.percentage}%`
+                  }}
+                />
+              </div>
+            </div>
+          ))}
+        </div>
+
+        {/* Insights */}
+        <div className="bg-[var(--card)] p-4 rounded-lg border border-[var(--border)]">
+          <h4 className="font-medium mb-2">💡 Insights</h4>
+          <div className="text-sm text-[var(--muted-foreground)] space-y-1">
+            {categories.length > 0 && (
+              <>
+                <p>
+                  🏆 <strong>{categories[0][0]}</strong> est votre activité principale 
+                  ({categories[0][1].percentage.toFixed(1)}% de votre temps).
+                </p>
+                
+                {categories.length > 1 && (
+                  <p>
+                    📈 Vous avez une bonne diversité avec {categories.length} catégories d&apos;activités.
+                  </p>
+                )}
+
+                {/* Suggestions basées sur la répartition */}
+                {categories.some(([, data]) => data.percentage > 70) && (
+                  <p>
+                    ⚠️ Forte concentration sur une seule catégorie. 
+                    Pensez à diversifier vos activités pour un meilleur équilibre.
+                  </p>
+                )}
+
+                {(() => {
+                  const learningCategory = categories.find(([name]) => name === 'Learning');
+                  return learningCategory && learningCategory[1].percentage > 0 && (
+                    <p>
+                      🎓 Excellent ! Vous consacrez du temps à l&apos;apprentissage 
+                      ({learningCategory[1].percentage.toFixed(1)}%).
+                    </p>
+                  );
+                })()}
+
+                {(() => {
+                  const devCategory = categories.find(([name]) => name === 'Dev');
+                  return devCategory && devCategory[1].percentage > 50 && (
+                    <p>
+                      💻 Focus développement intense. N&apos;oubliez pas les pauses et la collaboration !
+                    </p>
+                  );
+                })()}
+              </>
+            )}
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

components/dashboard/JiraWeeklyMetrics.tsx

@@ -0,0 +1,193 @@
+'use client';
+
+import type { JiraWeeklyMetrics } from '@/services/jira-summary';
+import { Card, CardHeader, CardContent } from '@/components/ui/Card';
+import { Badge } from '@/components/ui/Badge';
+import { JiraSummaryService } from '@/services/jira-summary';
+
+interface JiraWeeklyMetricsProps {
+  jiraMetrics: JiraWeeklyMetrics | null;
+}
+
+export function JiraWeeklyMetrics({ jiraMetrics }: JiraWeeklyMetricsProps) {
+  if (!jiraMetrics) {
+    return (
+      <Card>
+        <CardHeader>
+          <h3 className="text-lg font-semibold">🔗 Contexte business Jira</h3>
+        </CardHeader>
+        <CardContent>
+          <p className="text-center text-[var(--muted-foreground)]">
+            Configuration Jira non disponible
+          </p>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  if (jiraMetrics.totalJiraTasks === 0) {
+    return (
+      <Card>
+        <CardHeader>
+          <h3 className="text-lg font-semibold">🔗 Contexte business Jira</h3>
+        </CardHeader>
+        <CardContent>
+          <p className="text-center text-[var(--muted-foreground)]">
+            Aucune tâche Jira cette semaine
+          </p>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  const completionRate = (jiraMetrics.completedJiraTasks / jiraMetrics.totalJiraTasks) * 100;
+  const insights = JiraSummaryService.generateBusinessInsights(jiraMetrics);
+
+  return (
+    <Card>
+      <CardHeader>
+        <h3 className="text-lg font-semibold">🔗 Contexte business Jira</h3>
+        <p className="text-sm text-[var(--muted-foreground)]">
+          Impact business et métriques projet
+        </p>
+      </CardHeader>
+
+      <CardContent className="space-y-6">
+        {/* Métriques principales */}
+        <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
+          <div className="bg-[var(--card)] p-4 rounded-lg border border-[var(--border)] hover:border-[var(--primary)]/50 transition-colors text-center">
+            <div className="text-2xl font-bold text-[var(--primary)]">
+              {jiraMetrics.totalJiraTasks}
+            </div>
+            <div className="text-sm text-[var(--muted-foreground)]">Tickets Jira</div>
+          </div>
+
+          <div className="bg-[var(--card)] p-4 rounded-lg border border-[var(--border)] hover:border-[var(--success)]/50 transition-colors text-center">
+            <div className="text-2xl font-bold text-[var(--success)]">
+              {completionRate.toFixed(0)}%
+            </div>
+            <div className="text-sm text-[var(--muted-foreground)]">Taux completion</div>
+          </div>
+
+          <div className="bg-[var(--card)] p-4 rounded-lg border border-[var(--border)] hover:border-[var(--accent)]/50 transition-colors text-center">
+            <div className="text-2xl font-bold text-[var(--accent)]">
+              {jiraMetrics.totalStoryPoints}
+            </div>
+            <div className="text-sm text-[var(--muted-foreground)]">Story Points*</div>
+          </div>
+
+          <div className="bg-[var(--card)] p-4 rounded-lg border border-[var(--border)] hover:border-[var(--warning)]/50 transition-colors text-center">
+            <div className="text-2xl font-bold text-[var(--warning)]">
+              {jiraMetrics.projectsContributed.length}
+            </div>
+            <div className="text-sm text-[var(--muted-foreground)]">Projet(s)</div>
+          </div>
+        </div>
+
+        {/* Projets contributés */}
+        {jiraMetrics.projectsContributed.length > 0 && (
+          <div>
+            <h4 className="font-medium mb-2">📂 Projets contributés</h4>
+            <div className="flex flex-wrap gap-2">
+              {jiraMetrics.projectsContributed.map(project => (
+                <Badge key={project} className="bg-[var(--primary)]/10 text-[var(--primary)]">
+                  {project}
+                </Badge>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {/* Types de tickets */}
+        <div>
+          <h4 className="font-medium mb-3">🎯 Types de tickets</h4>
+          <div className="space-y-2">
+            {Object.entries(jiraMetrics.ticketTypes)
+              .sort(([,a], [,b]) => b - a)
+              .map(([type, count]) => {
+                const percentage = (count / jiraMetrics.totalJiraTasks) * 100;
+                return (
+                  <div key={type} className="flex items-center justify-between">
+                    <span className="text-sm text-[var(--foreground)]">{type}</span>
+                    <div className="flex items-center gap-2">
+                      <div className="w-20 bg-[var(--border)] rounded-full h-2">
+                        <div 
+                          className="h-2 bg-[var(--primary)] rounded-full transition-all"
+                          style={{ width: `${percentage}%` }}
+                        />
+                      </div>
+                      <span className="text-sm text-[var(--muted-foreground)] w-8">
+                        {count}
+                      </span>
+                    </div>
+                  </div>
+                );
+              })}
+          </div>
+        </div>
+
+        {/* Liens vers les tickets */}
+        <div>
+          <h4 className="font-medium mb-3">🎫 Tickets traités</h4>
+          <div className="space-y-2 max-h-40 overflow-y-auto">
+            {jiraMetrics.jiraLinks.map((link) => (
+              <div 
+                key={link.key}
+                className="flex items-center justify-between p-2 rounded border hover:bg-[var(--muted)] transition-colors"
+              >
+                <div className="flex-1 min-w-0">
+                  <div className="flex items-center gap-2 mb-1">
+                    <a 
+                      href={link.url}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="text-[var(--primary)] hover:underline font-medium text-sm"
+                    >
+                      {link.key}
+                    </a>
+                    <Badge 
+                      className={`text-xs ${
+                        link.status === 'done' 
+                          ? 'bg-[var(--success)]/10 text-[var(--success)]' 
+                          : 'bg-[var(--muted)]/50 text-[var(--muted-foreground)]'
+                      }`}
+                    >
+                      {link.status}
+                    </Badge>
+                  </div>
+                  <p className="text-xs text-[var(--muted-foreground)] truncate">
+                    {link.title}
+                  </p>
+                </div>
+                <div className="flex items-center gap-2 text-xs text-[var(--muted-foreground)]">
+                  <span>{link.type}</span>
+                  <span>{link.estimatedPoints}pts</span>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* Insights business */}
+        {insights.length > 0 && (
+          <div className="bg-[var(--card)] p-4 rounded-lg border border-[var(--border)]">
+            <h4 className="font-medium mb-2">💡 Insights business</h4>
+            <div className="text-sm text-[var(--muted-foreground)] space-y-1">
+              {insights.map((insight, index) => (
+                <p key={index}>{insight}</p>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {/* Note sur les story points */}
+        <div className="text-xs text-[var(--muted-foreground)] bg-[var(--card)] border border-[var(--border)] p-2 rounded">
+          <p>
+            * Story Points estimés automatiquement basés sur le type de ticket
+            (Epic: 8pts, Story: 3pts, Task: 2pts, Bug: 1pt)
+          </p>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

components/dashboard/PeriodSelector.tsx

@@ -0,0 +1,155 @@
+'use client';
+
+import { PERIOD_OPTIONS, PeriodOption, PeriodComparison } from '@/services/weekly-summary';
+import { Card, CardHeader, CardContent } from '@/components/ui/Card';
+import { Button } from '@/components/ui/Button';
+
+interface PeriodSelectorProps {
+  currentPeriod: PeriodOption;
+  onPeriodChange: (period: PeriodOption) => void;
+  comparison: PeriodComparison | null;
+  isLoading?: boolean;
+}
+
+export function PeriodSelector({ 
+  currentPeriod, 
+  onPeriodChange, 
+  comparison, 
+  isLoading = false 
+}: PeriodSelectorProps) {
+  
+  const formatChange = (change: number): string => {
+    const sign = change > 0 ? '+' : '';
+    return `${sign}${change.toFixed(1)}%`;
+  };
+
+  const getChangeColor = (change: number): string => {
+    if (change > 10) return 'text-[var(--success)]';
+    if (change < -10) return 'text-[var(--destructive)]';
+    return 'text-[var(--muted-foreground)]';
+  };
+
+  const getChangeIcon = (change: number): string => {
+    if (change > 10) return '📈';
+    if (change < -10) return '📉';
+    return '➡️';
+  };
+
+  return (
+    <Card>
+      <CardHeader>
+        <div className="flex items-center justify-between">
+          <h3 className="text-lg font-semibold">📊 Sélection de période</h3>
+          <div className="flex gap-2">
+            {PERIOD_OPTIONS.map((option) => (
+              <Button
+                key={option.key}
+                onClick={() => onPeriodChange(option)}
+                variant={currentPeriod.key === option.key ? "primary" : "secondary"}
+                size="sm"
+                disabled={isLoading}
+              >
+                {option.label}
+              </Button>
+            ))}
+          </div>
+        </div>
+      </CardHeader>
+
+      {comparison && (
+        <CardContent>
+          <div className="space-y-4">
+            {/* Titre de comparaison */}
+            <h4 className="font-medium">
+              Comparaison avec la période précédente
+            </h4>
+
+            {/* Métriques de comparaison */}
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+              {/* Tâches */}
+              <div className="bg-[var(--card)] p-4 rounded-lg border border-[var(--border)] hover:border-[var(--primary)]/50 transition-colors">
+                <div className="flex items-center justify-between mb-2">
+                  <span className="text-sm font-medium text-[var(--primary)]">Tâches complétées</span>
+                  <span className={`text-sm font-medium ${getChangeColor(comparison.changes.tasks)}`}>
+                    {getChangeIcon(comparison.changes.tasks)} {formatChange(comparison.changes.tasks)}
+                  </span>
+                </div>
+                <div className="flex items-center justify-between text-sm">
+                  <span className="text-[var(--foreground)] font-medium">
+                    Actuelle: {comparison.currentPeriod.tasks}
+                  </span>
+                  <span className="text-[var(--muted-foreground)]">
+                    Précédente: {comparison.previousPeriod.tasks}
+                  </span>
+                </div>
+              </div>
+
+              {/* Daily items */}
+              <div className="bg-[var(--card)] p-4 rounded-lg border border-[var(--border)] hover:border-[var(--success)]/50 transition-colors">
+                <div className="flex items-center justify-between mb-2">
+                  <span className="text-sm font-medium text-[var(--success)]">Daily items</span>
+                  <span className={`text-sm font-medium ${getChangeColor(comparison.changes.checkboxes)}`}>
+                    {getChangeIcon(comparison.changes.checkboxes)} {formatChange(comparison.changes.checkboxes)}
+                  </span>
+                </div>
+                <div className="flex items-center justify-between text-sm">
+                  <span className="text-[var(--foreground)] font-medium">
+                    Actuelle: {comparison.currentPeriod.checkboxes}
+                  </span>
+                  <span className="text-[var(--muted-foreground)]">
+                    Précédente: {comparison.previousPeriod.checkboxes}
+                  </span>
+                </div>
+              </div>
+
+              {/* Total */}
+              <div className="bg-[var(--card)] p-4 rounded-lg border border-[var(--border)] hover:border-[var(--accent)]/50 transition-colors">
+                <div className="flex items-center justify-between mb-2">
+                  <span className="text-sm font-medium text-[var(--accent)]">Total activités</span>
+                  <span className={`text-sm font-medium ${getChangeColor(comparison.changes.total)}`}>
+                    {getChangeIcon(comparison.changes.total)} {formatChange(comparison.changes.total)}
+                  </span>
+                </div>
+                <div className="flex items-center justify-between text-sm">
+                  <span className="text-[var(--foreground)] font-medium">
+                    Actuelle: {comparison.currentPeriod.total}
+                  </span>
+                  <span className="text-[var(--muted-foreground)]">
+                    Précédente: {comparison.previousPeriod.total}
+                  </span>
+                </div>
+              </div>
+            </div>
+
+            {/* Insights sur la comparaison */}
+            <div className="bg-[var(--card)] p-4 rounded-lg border border-[var(--border)]">
+              <h5 className="font-medium mb-2">💡 Insights comparatifs</h5>
+              <div className="text-sm text-[var(--muted-foreground)] space-y-1">
+                {comparison.changes.total > 15 && (
+                  <p>🚀 Excellente progression ! Productivité en hausse de {formatChange(comparison.changes.total)}.</p>
+                )}
+                {comparison.changes.total < -15 && (
+                  <p>📉 Baisse d&apos;activité de {formatChange(Math.abs(comparison.changes.total))}. Période moins chargée ?</p>
+                )}
+                {Math.abs(comparison.changes.total) <= 15 && (
+                  <p>✅ Rythme stable maintenu entre les deux périodes.</p>
+                )}
+                
+                {comparison.changes.tasks > comparison.changes.checkboxes + 10 && (
+                  <p>🎯 Focus accru sur les tâches importantes cette période.</p>
+                )}
+                {comparison.changes.checkboxes > comparison.changes.tasks + 10 && (
+                  <p>📝 Activité quotidienne plus intense cette période.</p>
+                )}
+
+                <p>
+                  📊 Évolution globale: {comparison.currentPeriod.total} activités vs {comparison.previousPeriod.total} la période précédente.
+                </p>
+              </div>
+            </div>
+          </div>
+        </CardContent>
+      )}
+    </Card>
+  );
+}

components/dashboard/VelocityMetrics.tsx

@@ -0,0 +1,168 @@
+'use client';
+
+import type { VelocityMetrics } from '@/services/weekly-summary';
+import { Card, CardHeader, CardContent } from '@/components/ui/Card';
+import { Badge } from '@/components/ui/Badge';
+
+interface VelocityMetricsProps {
+  velocity: VelocityMetrics;
+}
+
+export function VelocityMetrics({ velocity }: VelocityMetricsProps) {
+  const getTrendIcon = (trend: number) => {
+    if (trend > 10) return '📈';
+    if (trend < -10) return '📉';
+    return '➡️';
+  };
+
+  const getTrendColor = (trend: number) => {
+    if (trend > 10) return 'text-[var(--success)]';
+    if (trend < -10) return 'text-[var(--destructive)]';
+    return 'text-[var(--muted-foreground)]';
+  };
+
+  const formatTrend = (trend: number) => {
+    const sign = trend > 0 ? '+' : '';
+    return `${sign}${trend.toFixed(1)}%`;
+  };
+
+  const maxActivities = Math.max(...velocity.weeklyData.map(w => w.totalActivities));
+  
+  return (
+    <Card>
+      <CardHeader>
+        <h3 className="text-lg font-semibold">⚡ Métriques de vélocité</h3>
+        <p className="text-sm text-[var(--muted-foreground)]">
+          Performance sur les 4 dernières semaines
+        </p>
+      </CardHeader>
+
+      <CardContent className="space-y-6">
+        {/* Métriques principales */}
+        <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
+          <div className="bg-[var(--card)] p-4 rounded-lg border border-[var(--border)] hover:border-[var(--primary)]/50 transition-colors text-center">
+            <div className="text-2xl font-bold text-[var(--primary)]">
+              {velocity.currentWeekTasks}
+            </div>
+            <div className="text-sm text-[var(--muted-foreground)]">Tâches cette semaine</div>
+          </div>
+
+          <div className="bg-[var(--card)] p-4 rounded-lg border border-[var(--border)] hover:border-[var(--muted-foreground)]/50 transition-colors text-center">
+            <div className="text-2xl font-bold text-[var(--muted-foreground)]">
+              {velocity.previousWeekTasks}
+            </div>
+            <div className="text-sm text-[var(--muted-foreground)]">Semaine précédente</div>
+          </div>
+
+          <div className="bg-[var(--card)] p-4 rounded-lg border border-[var(--border)] hover:border-[var(--accent)]/50 transition-colors text-center">
+            <div className="text-2xl font-bold text-[var(--accent)]">
+              {velocity.fourWeekAverage.toFixed(1)}
+            </div>
+            <div className="text-sm text-[var(--muted-foreground)]">Moyenne 4 semaines</div>
+          </div>
+
+          <div className="bg-[var(--card)] p-4 rounded-lg border border-[var(--border)] hover:border-[var(--success)]/50 transition-colors text-center">
+            <div className={`text-2xl font-bold ${getTrendColor(velocity.weeklyTrend)}`}>
+              {getTrendIcon(velocity.weeklyTrend)} {formatTrend(velocity.weeklyTrend)}
+            </div>
+            <div className="text-sm text-[var(--muted-foreground)]">Tendance</div>
+          </div>
+        </div>
+
+        {/* Graphique de tendance simple */}
+        <div>
+          <h4 className="font-medium mb-3">📊 Tendance sur 4 semaines</h4>
+          <div className="grid grid-cols-4 gap-2">
+            {velocity.weeklyData.map((week, index) => {
+              const height = maxActivities > 0 ? (week.totalActivities / maxActivities) * 100 : 0;
+              const weekLabel = `S${index + 1}`;
+              
+              return (
+                <div key={index} className="text-center">
+                  <div className="h-24 flex items-end justify-center mb-2">
+                    <div 
+                      className="bg-[var(--primary)] w-8 rounded-t transition-all hover:bg-[var(--primary)]/80"
+                      style={{ height: `${Math.max(height, 5)}%` }}
+                      title={`${week.totalActivities} activités complétées`}
+                    />
+                  </div>
+                  <div className="text-xs font-medium">{weekLabel}</div>
+                  <div className="text-xs text-[var(--muted-foreground)]">
+                    {week.totalActivities}
+                  </div>
+                  <div className="text-xs text-[var(--muted-foreground)]">
+                    {week.weekStart.toLocaleDateString('fr-FR', { 
+                      day: 'numeric',
+                      month: 'short' 
+                    })}
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+
+        {/* Détails par semaine */}
+        <div>
+          <h4 className="font-medium mb-3">📈 Détails par semaine</h4>
+          <div className="space-y-2">
+            {velocity.weeklyData.map((week, index) => {
+              const isCurrentWeek = index === velocity.weeklyData.length - 1;
+              return (
+                <div 
+                  key={index}
+                  className={`flex items-center justify-between p-3 rounded-lg border transition-colors ${
+                    isCurrentWeek ? 'bg-[var(--primary)]/10 border-[var(--primary)]/30' : 'bg-[var(--card)] border-[var(--border)] hover:border-[var(--border)]/80'
+                  }`}
+                >
+                  <div className="flex items-center gap-3">
+                    <span className="text-sm font-medium">
+                      Semaine du {week.weekStart.toLocaleDateString('fr-FR', { 
+                        day: 'numeric',
+                        month: 'short' 
+                      })}
+                    </span>
+                    {isCurrentWeek && (
+                      <Badge className="bg-[var(--primary)]/20 text-[var(--primary)]">Actuelle</Badge>
+                    )}
+                  </div>
+                  <div className="flex items-center gap-4 text-sm">
+                    <span className="text-[var(--success)]">
+                      {week.completedTasks} tâches
+                    </span>
+                    <span className="text-[var(--primary)]">
+                      {week.completedCheckboxes} daily
+                    </span>
+                    <span className="font-medium text-[var(--foreground)]">
+                      Total: {week.totalActivities}
+                    </span>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+
+        {/* Insights */}
+        <div className="bg-[var(--card)] p-4 rounded-lg border border-[var(--border)]">
+          <h4 className="font-medium mb-2">💡 Insights</h4>
+          <div className="text-sm text-[var(--muted-foreground)] space-y-1">
+            {velocity.weeklyTrend > 10 && (
+              <p>🚀 Excellente progression ! Vous êtes {velocity.weeklyTrend.toFixed(1)}% plus productif cette semaine.</p>
+            )}
+            {velocity.weeklyTrend < -10 && (
+              <p>⚠️ Baisse d&apos;activité de {Math.abs(velocity.weeklyTrend).toFixed(1)}%. Peut-être temps de revoir votre planning ?</p>
+            )}
+            {Math.abs(velocity.weeklyTrend) <= 10 && (
+              <p>✅ Rythme stable. Vous maintenez une productivité constante.</p>
+            )}
+            <p>
+              📊 Votre moyenne sur 4 semaines est de {velocity.fourWeekAverage.toFixed(1)} activités par semaine.
+            </p>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+

components/dashboard/WeeklySummaryClient.tsx

@@ -1,19 +1,46 @@
 'use client';
 
 import { useState } from 'react';
-import { WeeklySummary, WeeklyActivity } from '@/services/weekly-summary';
+import { WeeklySummary, WeeklyActivity, PERIOD_OPTIONS, PeriodOption } from '@/services/weekly-summary';
 import { Card, CardHeader, CardContent } from '@/components/ui/Card';
 import { Button } from '@/components/ui/Button';
 import { Badge } from '@/components/ui/Badge';
+import { VelocityMetrics } from './VelocityMetrics';
+import { CategoryBreakdown } from './CategoryBreakdown';
+import { PeriodSelector } from './PeriodSelector';
+import { PDFExportService } from '@/services/pdf-export';
 
 interface WeeklySummaryClientProps {
   initialSummary: WeeklySummary;
 }
 
 export default function WeeklySummaryClient({ initialSummary }: WeeklySummaryClientProps) {
-  const [summary] = useState<WeeklySummary>(initialSummary);
+  const [summary, setSummary] = useState<WeeklySummary>(initialSummary);
   const [selectedDay, setSelectedDay] = useState<string | null>(null);
   const [isRefreshing, setIsRefreshing] = useState(false);
+  const [isExportingPDF, setIsExportingPDF] = useState(false);
+  const [currentPeriod, setCurrentPeriod] = useState<PeriodOption>(PERIOD_OPTIONS[0]);
+  const [activeTab, setActiveTab] = useState<string>('all');
+
+  const handlePeriodChange = async (newPeriod: PeriodOption) => {
+    setCurrentPeriod(newPeriod);
+    setIsRefreshing(true);
+    
+    try {
+      // Appel API pour récupérer les données de la nouvelle période
+      const response = await fetch(`/api/weekly-summary?period=${newPeriod.days}`);
+      if (response.ok) {
+        const newSummary = await response.json();
+        setSummary(newSummary);
+      } else {
+        console.error('Erreur lors du changement de période');
+      }
+    } catch (error) {
+      console.error('Erreur lors du changement de période:', error);
+    } finally {
+      setIsRefreshing(false);
+    }
+  };
 
   const handleRefresh = async () => {
     setIsRefreshing(true);
@@ -21,6 +48,18 @@ export default function WeeklySummaryClient({ initialSummary }: WeeklySummaryCli
     window.location.reload();
   };
 
+  const handleExportPDF = async () => {
+    setIsExportingPDF(true);
+    try {
+      await PDFExportService.exportWeeklySummary(summary);
+    } catch (error) {
+      console.error('Erreur lors de l\'export PDF:', error);
+      alert('Erreur lors de la génération du PDF');
+    } finally {
+      setIsExportingPDF(false);
+    }
+  };
+
   const formatDate = (date: Date) => {
     return new Date(date).toLocaleDateString('fr-FR', { 
       weekday: 'long', 
@@ -40,101 +79,309 @@ export default function WeeklySummaryClient({ initialSummary }: WeeklySummaryCli
     return type === 'checkbox' ? 'Daily' : 'Tâche';
   };
 
-  const filteredActivities = selectedDay 
+  // Obtenir les catégories disponibles
+  const availableCategories = Object.keys(summary.categoryBreakdown).filter(
+    categoryName => summary.categoryBreakdown[categoryName].count > 0
+  );
+
+  // Fonction pour catégoriser une activité
+  const getActivityCategory = (activity: WeeklyActivity): string => {
+    // Logique simple pour associer une activité à une catégorie
+    // En production, cette logique devrait être dans un service
+    const title = activity.title.toLowerCase();
+    
+    if (title.includes('meeting') || title.includes('réunion') || title.includes('call') || title.includes('standup')) {
+      return 'Meeting';
+    }
+    if (title.includes('dev') || title.includes('code') || title.includes('bug') || title.includes('fix') || title.includes('feature')) {
+      return 'Dev';
+    }
+    if (title.includes('admin') || title.includes('email') || title.includes('report') || title.includes('planning')) {
+      return 'Admin';
+    }
+    if (title.includes('learn') || title.includes('study') || title.includes('formation') || title.includes('tutorial')) {
+      return 'Learning';
+    }
+    return 'Other';
+  };
+
+  // Filtrer les activités
+  let filteredActivities = selectedDay 
     ? summary.activities.filter(a => a.dayName === selectedDay)
     : summary.activities;
 
+  // Filtrer par catégorie si ce n'est pas "all"
+  if (activeTab !== 'all') {
+    filteredActivities = filteredActivities.filter(activity => 
+      getActivityCategory(activity) === activeTab
+    );
+  }
+
   return (
-    <Card>
-      <CardHeader>
-        <div className="flex items-center justify-between">
-          <div>
-            <h2 className="text-lg font-semibold">📅 Résumé de la semaine</h2>
-            <p className="text-sm text-[var(--muted-foreground)]">
-              Du {formatDate(summary.period.start)} au {formatDate(summary.period.end)}
-            </p>
-          </div>
-          <Button 
-            onClick={handleRefresh} 
-            variant="secondary" 
-            size="sm"
-            disabled={isRefreshing}
+    <div className="space-y-6">
+      {/* Sélecteur de période */}
+      <PeriodSelector 
+        currentPeriod={currentPeriod}
+        onPeriodChange={handlePeriodChange}
+        comparison={summary.periodComparison}
+        isLoading={isRefreshing}
+      />
+
+      {/* Métriques de vélocité */}
+      <VelocityMetrics velocity={summary.velocity} />
+
+      {/* Onglets par catégorie */}
+      <div className="border-b border-[var(--border)]">
+        <nav className="flex space-x-8 overflow-x-auto">
+          <button
+            onClick={() => setActiveTab('all')}
+            className={`py-3 px-1 border-b-2 font-medium text-sm transition-colors whitespace-nowrap ${
+              activeTab === 'all'
+                ? 'border-[var(--primary)] text-[var(--primary)]'
+                : 'border-transparent text-[var(--muted-foreground)] hover:text-[var(--foreground)] hover:border-[var(--border)]'
+            }`}
           >
-            {isRefreshing ? '🔄' : '🔄'} {isRefreshing ? 'Actualisation...' : 'Actualiser'}
-          </Button>
-        </div>
-      </CardHeader>
+            📊 Vue d&apos;ensemble
+          </button>
+          {availableCategories.map(categoryName => {
+            const categoryData = summary.categoryBreakdown[categoryName];
+            return (
+              <button
+                key={categoryName}
+                onClick={() => setActiveTab(categoryName)}
+                className={`py-3 px-1 border-b-2 font-medium text-sm transition-colors whitespace-nowrap flex items-center gap-2 ${
+                  activeTab === categoryName
+                    ? 'border-[var(--primary)] text-[var(--primary)]'
+                    : 'border-transparent text-[var(--muted-foreground)] hover:text-[var(--foreground)] hover:border-[var(--border)]'
+                }`}
+              >
+                <span>{categoryData.icon}</span>
+                <span>{categoryName}</span>
+                <Badge className="bg-[var(--primary)]/10 text-[var(--primary)] text-xs">
+                  {categoryData.count}
+                </Badge>
+              </button>
+            );
+          })}
+        </nav>
+      </div>
+
+      {/* Contenu de l'onglet sélectionné */}
+      {activeTab === 'all' && (
+        <>
+          {/* Répartition par catégorie */}
+          <CategoryBreakdown 
+            categoryData={summary.categoryBreakdown}
+            totalActivities={summary.stats.totalTasks + summary.stats.totalCheckboxes}
+          />
+        </>
+      )}
+
+      {/* Vue spécifique par catégorie */}
+      {activeTab !== 'all' && (
+        <Card>
+          <CardHeader>
+            <div className="flex items-center gap-3">
+              <span className="text-2xl">{summary.categoryBreakdown[activeTab]?.icon}</span>
+              <div>
+                <h2 className="text-lg font-semibold">{activeTab}</h2>
+                <p className="text-sm text-[var(--muted-foreground)]">
+                  {summary.categoryBreakdown[activeTab]?.count} activités 
+                  ({summary.categoryBreakdown[activeTab]?.percentage.toFixed(1)}% de votre temps)
+                </p>
+              </div>
+            </div>
+          </CardHeader>
+          <CardContent>
+            {/* Métriques spécifiques à la catégorie */}
+            <div className="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
+              <div className="bg-[var(--card)] p-4 rounded-lg border border-[var(--border)] text-center">
+                <div className="text-2xl font-bold text-[var(--primary)]">
+                  {filteredActivities.length}
+                </div>
+                <div className="text-sm text-[var(--muted-foreground)]">Total activités</div>
+              </div>
+              
+              <div className="bg-[var(--card)] p-4 rounded-lg border border-[var(--border)] text-center">
+                <div className="text-2xl font-bold text-[var(--success)]">
+                  {filteredActivities.filter(a => a.completed).length}
+                </div>
+                <div className="text-sm text-[var(--muted-foreground)]">Complétées</div>
+              </div>
+              
+              <div className="bg-[var(--card)] p-4 rounded-lg border border-[var(--border)] text-center">
+                <div className="text-2xl font-bold text-[var(--accent)]">
+                  {filteredActivities.length > 0 
+                    ? Math.round((filteredActivities.filter(a => a.completed).length / filteredActivities.length) * 100)
+                    : 0}%
+                </div>
+                <div className="text-sm text-[var(--muted-foreground)]">Taux completion</div>
+              </div>
+              
+              <div className="bg-[var(--card)] p-4 rounded-lg border border-[var(--border)] text-center">
+                <div className="text-2xl font-bold" style={{ color: summary.categoryBreakdown[activeTab]?.color }}>
+                  {summary.categoryBreakdown[activeTab]?.percentage.toFixed(1)}%
+                </div>
+                <div className="text-sm text-[var(--muted-foreground)]">Du temps total</div>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      )}
+
+      {/* Contenu commun à tous les onglets */}
+      <Card>
+        <CardHeader>
+          <div className="flex items-center justify-between">
+            <div>
+              <h2 className="text-lg font-semibold">
+                {activeTab === 'all' ? '📅 Résumé de la semaine' : `${summary.categoryBreakdown[activeTab]?.icon} Activités ${activeTab}`}
+              </h2>
+              <p className="text-sm text-[var(--muted-foreground)]">
+                Du {formatDate(summary.period.start)} au {formatDate(summary.period.end)}
+                {activeTab !== 'all' && ` • ${filteredActivities.length} activités`}
+              </p>
+            </div>
+            <div className="flex gap-2">
+              <Button 
+                onClick={handleExportPDF} 
+                variant="secondary" 
+                size="sm"
+                disabled={isExportingPDF}
+              >
+                {isExportingPDF ? '📄' : '📄'} {isExportingPDF ? 'Génération...' : 'Export PDF'}
+              </Button>
+              <Button 
+                onClick={handleRefresh} 
+                variant="secondary" 
+                size="sm"
+                disabled={isRefreshing}
+              >
+                {isRefreshing ? '🔄' : '🔄'} {isRefreshing ? 'Actualisation...' : 'Actualiser'}
+              </Button>
+            </div>
+          </div>
+        </CardHeader>
 
       <CardContent className="space-y-6">
-        {/* Statistiques globales */}
-        <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
-          <div className="bg-blue-50 rounded-lg p-4 text-center">
-            <div className="text-2xl font-bold text-blue-600">
-              {summary.stats.completedCheckboxes}
+        {/* Statistiques globales ou spécifiques à la catégorie */}
+        {activeTab === 'all' ? (
+          <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
+            <div className="bg-blue-50 rounded-lg p-4 text-center">
+              <div className="text-2xl font-bold text-blue-600">
+                {summary.stats.completedCheckboxes}
+              </div>
+              <div className="text-sm text-blue-600">Daily items</div>
+              <div className="text-xs text-[var(--muted-foreground)]">
+                sur {summary.stats.totalCheckboxes} ({summary.stats.checkboxCompletionRate.toFixed(0)}%)
+              </div>
             </div>
-            <div className="text-sm text-blue-600">Daily items</div>
-            <div className="text-xs text-[var(--muted-foreground)]">
-              sur {summary.stats.totalCheckboxes} ({summary.stats.checkboxCompletionRate.toFixed(0)}%)
-            </div>
-          </div>
 
-          <div className="bg-green-50 rounded-lg p-4 text-center">
-            <div className="text-2xl font-bold text-green-600">
-              {summary.stats.completedTasks}
+            <div className="bg-green-50 rounded-lg p-4 text-center">
+              <div className="text-2xl font-bold text-green-600">
+                {summary.stats.completedTasks}
+              </div>
+              <div className="text-sm text-green-600">Tâches</div>
+              <div className="text-xs text-[var(--muted-foreground)]">
+                sur {summary.stats.totalTasks} ({summary.stats.taskCompletionRate.toFixed(0)}%)
+              </div>
             </div>
-            <div className="text-sm text-green-600">Tâches</div>
-            <div className="text-xs text-[var(--muted-foreground)]">
-              sur {summary.stats.totalTasks} ({summary.stats.taskCompletionRate.toFixed(0)}%)
-            </div>
-          </div>
 
-          <div className="bg-purple-50 rounded-lg p-4 text-center">
-            <div className="text-2xl font-bold text-purple-600">
-              {summary.stats.completedCheckboxes + summary.stats.completedTasks}
+            <div className="bg-purple-50 rounded-lg p-4 text-center">
+              <div className="text-2xl font-bold text-purple-600">
+                {summary.stats.completedCheckboxes + summary.stats.completedTasks}
+              </div>
+              <div className="text-sm text-purple-600">Total complété</div>
+              <div className="text-xs text-[var(--muted-foreground)]">
+                sur {summary.stats.totalCheckboxes + summary.stats.totalTasks}
+              </div>
             </div>
-            <div className="text-sm text-purple-600">Total complété</div>
-            <div className="text-xs text-[var(--muted-foreground)]">
-              sur {summary.stats.totalCheckboxes + summary.stats.totalTasks}
-            </div>
-          </div>
 
-          <div className="bg-orange-50 rounded-lg p-4 text-center">
-            <div className="text-lg font-bold text-orange-600">
-              {summary.stats.mostProductiveDay}
+            <div className="bg-orange-50 rounded-lg p-4 text-center">
+              <div className="text-lg font-bold text-orange-600">
+                {summary.stats.mostProductiveDay}
+              </div>
+              <div className="text-sm text-orange-600">Jour le plus productif</div>
             </div>
-            <div className="text-sm text-orange-600">Jour le plus productif</div>
           </div>
-        </div>
+        ) : (
+          <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
+            <div className="bg-blue-50 rounded-lg p-4 text-center">
+              <div className="text-2xl font-bold text-blue-600">
+                {filteredActivities.length}
+              </div>
+              <div className="text-sm text-blue-600">Activités {activeTab}</div>
+            </div>
+
+            <div className="bg-green-50 rounded-lg p-4 text-center">
+              <div className="text-2xl font-bold text-green-600">
+                {filteredActivities.filter(a => a.completed).length}
+              </div>
+              <div className="text-sm text-green-600">Complétées</div>
+            </div>
+
+            <div className="bg-purple-50 rounded-lg p-4 text-center">
+              <div className="text-2xl font-bold text-purple-600">
+                {filteredActivities.length > 0 
+                  ? Math.round((filteredActivities.filter(a => a.completed).length / filteredActivities.length) * 100)
+                  : 0}%
+              </div>
+              <div className="text-sm text-purple-600">Taux de réussite</div>
+            </div>
+
+            <div className="bg-orange-50 rounded-lg p-4 text-center">
+              <div className="text-2xl font-bold text-orange-600">
+                {summary.categoryBreakdown[activeTab]?.percentage.toFixed(1)}%
+              </div>
+              <div className="text-sm text-orange-600">Du temps total</div>
+            </div>
+          </div>
+        )}
 
         {/* Breakdown par jour */}
         <div>
-          <h3 className="font-medium mb-3">📊 Répartition par jour</h3>
+          <h3 className="font-medium mb-3">
+            📊 Répartition par jour
+            {activeTab !== 'all' && <span className="text-sm font-normal text-[var(--muted-foreground)]"> - {activeTab}</span>}
+          </h3>
           <div className="grid grid-cols-7 gap-2 mb-4">
-            {summary.stats.dailyBreakdown.map((day) => (
-              <button
-                key={day.date}
-                onClick={() => setSelectedDay(selectedDay === day.dayName ? null : day.dayName)}
-                className={`p-2 rounded-lg text-center transition-colors ${
-                  selectedDay === day.dayName
-                    ? 'bg-blue-100 border-2 border-blue-300'
-                    : 'bg-[var(--muted)] hover:bg-[var(--muted)]/80'
-                }`}
-              >
-                <div className="text-xs font-medium">
-                  {day.dayName.slice(0, 3)}
-                </div>
-                <div className="text-sm font-bold">
-                  {day.completedCheckboxes + day.completedTasks}
-                </div>
-                <div className="text-xs text-[var(--muted-foreground)]">
-                  /{day.checkboxes + day.tasks}
-                </div>
-              </button>
-            ))}
+            {summary.stats.dailyBreakdown.map((day) => {
+              // Pour chaque jour, calculer les activités de la catégorie sélectionnée
+              const dayActivitiesAll = summary.activities.filter(a => a.dayName === day.dayName);
+              const dayActivitiesFiltered = activeTab === 'all' 
+                ? dayActivitiesAll 
+                : dayActivitiesAll.filter(activity => getActivityCategory(activity) === activeTab);
+              
+              const completedCount = dayActivitiesFiltered.filter(a => a.completed).length;
+              const totalCount = dayActivitiesFiltered.length;
+
+              return (
+                <button
+                  key={day.date}
+                  onClick={() => setSelectedDay(selectedDay === day.dayName ? null : day.dayName)}
+                  className={`p-2 rounded-lg text-center transition-colors ${
+                    selectedDay === day.dayName
+                      ? 'bg-blue-100 border-2 border-blue-300'
+                      : 'bg-[var(--muted)] hover:bg-[var(--muted)]/80'
+                  }`}
+                >
+                  <div className="text-xs font-medium">
+                    {day.dayName.slice(0, 3)}
+                  </div>
+                  <div className="text-sm font-bold">
+                    {activeTab === 'all' ? (day.completedCheckboxes + day.completedTasks) : completedCount}
+                  </div>
+                  <div className="text-xs text-[var(--muted-foreground)]">
+                    /{activeTab === 'all' ? (day.checkboxes + day.tasks) : totalCount}
+                  </div>
+                </button>
+              );
+            })}
           </div>
           {selectedDay && (
             <div className="text-sm text-[var(--muted-foreground)] mb-4">
               📍 Filtré sur: <strong>{selectedDay}</strong>
+              {activeTab !== 'all' && <span> • Catégorie: <strong>{activeTab}</strong></span>}
               <button 
                 onClick={() => setSelectedDay(null)}
                 className="ml-2 text-blue-600 hover:underline"
@@ -148,9 +395,9 @@ export default function WeeklySummaryClient({ initialSummary }: WeeklySummaryCli
         {/* Timeline des activités */}
         <div>
           <h3 className="font-medium mb-3">
-            🕒 Timeline des activités 
+            🕒 Timeline des activités {activeTab !== 'all' && `- ${activeTab}`}
             <span className="text-sm font-normal text-[var(--muted-foreground)]">
-              ({filteredActivities.length} items)
+              ({filteredActivities.length} items{activeTab !== 'all' && ` de la catégorie ${activeTab}`})
             </span>
           </h3>
           
@@ -196,5 +443,6 @@ export default function WeeklySummaryClient({ initialSummary }: WeeklySummaryCli
         </div>
       </CardContent>
     </Card>
+    </div>
   );
 }