refactor: remove deprecated weekly summary components and related services
- Deleted `WeeklySummaryClient`, `VelocityMetrics`, `PeriodSelector`, and associated services to streamline the codebase. - Removed the `weekly-summary` API route and related PDF export functionality, as these features are no longer in use. - Updated `TODO.md` to reflect the removal of these components and their functionalities.
This commit is contained in:
Julien Froidefond
@@ -1,155 +0,0 @@
|
||||
'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'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>
|
||||
);
|
||||
}
|
||||
@@ -1,168 +0,0 @@
|
||||
'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)]">
|
||||
{new Date(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 {new Date(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'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>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,448 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
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, 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);
|
||||
// Recharger la page pour refaire le fetch côté serveur
|
||||
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',
|
||||
day: 'numeric',
|
||||
month: 'long'
|
||||
});
|
||||
};
|
||||
|
||||
const getActivityIcon = (activity: WeeklyActivity) => {
|
||||
if (activity.type === 'checkbox') {
|
||||
return activity.completed ? '✅' : '☐';
|
||||
}
|
||||
return activity.completed ? '🎯' : '📝';
|
||||
};
|
||||
|
||||
const getActivityTypeLabel = (type: 'checkbox' | 'task') => {
|
||||
return type === 'checkbox' ? 'Daily' : 'Tâche';
|
||||
};
|
||||
|
||||
// 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 (
|
||||
<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)]'
|
||||
}`}
|
||||
>
|
||||
📊 Vue d'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 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="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="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="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>
|
||||
) : (
|
||||
<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
|
||||
{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) => {
|
||||
// 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"
|
||||
>
|
||||
(voir tout)
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Timeline des activités */}
|
||||
<div>
|
||||
<h3 className="font-medium mb-3">
|
||||
🕒 Timeline des activités {activeTab !== 'all' && `- ${activeTab}`}
|
||||
<span className="text-sm font-normal text-[var(--muted-foreground)]">
|
||||
({filteredActivities.length} items{activeTab !== 'all' && ` de la catégorie ${activeTab}`})
|
||||
</span>
|
||||
</h3>
|
||||
|
||||
{filteredActivities.length === 0 ? (
|
||||
<div className="text-center py-8 text-[var(--muted-foreground)]">
|
||||
{selectedDay ? 'Aucune activité ce jour-là' : 'Aucune activité cette semaine'}
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-2 max-h-96 overflow-y-auto">
|
||||
{filteredActivities.map((activity) => (
|
||||
<div
|
||||
key={activity.id}
|
||||
className={`flex items-center gap-3 p-3 rounded-lg border transition-colors ${
|
||||
activity.completed
|
||||
? 'bg-green-50 border-green-200'
|
||||
: 'bg-[var(--card)] border-[var(--border)]'
|
||||
}`}
|
||||
>
|
||||
<span className="text-lg flex-shrink-0">
|
||||
{getActivityIcon(activity)}
|
||||
</span>
|
||||
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<span className={`text-sm ${activity.completed ? 'line-through text-[var(--muted-foreground)]' : ''}`}>
|
||||
{activity.title}
|
||||
</span>
|
||||
<Badge className="text-xs bg-[var(--muted)] text-[var(--muted-foreground)]">
|
||||
{getActivityTypeLabel(activity.type)}
|
||||
</Badge>
|
||||
</div>
|
||||
<div className="text-xs text-[var(--muted-foreground)]">
|
||||
{activity.dayName} • {new Date(activity.createdAt).toLocaleDateString('fr-FR')}
|
||||
{activity.completedAt && (
|
||||
<span> • Complété le {new Date(activity.completedAt).toLocaleDateString('fr-FR')}</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -53,7 +53,6 @@ export function Header({ title = "TowerControl", subtitle = "Task Management", s
|
||||
{ href: '/', label: 'Dashboard' },
|
||||
{ href: '/kanban', label: 'Kanban' },
|
||||
{ href: '/daily', label: 'Daily' },
|
||||
{ href: '/weekly-summary', label: 'Hebdo' },
|
||||
{ href: '/weekly-manager', label: 'Manager' },
|
||||
...(isJiraConfigured ? [{ href: '/jira-dashboard', label: `Jira${jiraConfig?.projectKey ? ` (${jiraConfig.projectKey})` : ''}` }] : []),
|
||||
{ href: '/settings', label: 'Settings' }
|
||||
|
||||
Reference in New Issue
Block a user