415 lines
15 KiB
TypeScript
415 lines
15 KiB
TypeScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
import { ManagerSummary } from '@/services/analytics/manager-summary';
|
|
import { Card, CardHeader, CardContent } from '@/components/ui/Card';
|
|
import { Button } from '@/components/ui/Button';
|
|
import { Tabs, TabItem } from '@/components/ui/Tabs';
|
|
import { AchievementCard } from '@/components/ui/AchievementCard';
|
|
import { ChallengeCard } from '@/components/ui/ChallengeCard';
|
|
import { useTasksContext } from '@/contexts/TasksContext';
|
|
import { MetricsTab } from './MetricsTab';
|
|
import { format } from 'date-fns';
|
|
import { fr } from 'date-fns/locale';
|
|
import { Tag } from '@/lib/types';
|
|
import { Emoji } from '@/components/ui/Emoji';
|
|
|
|
interface ManagerWeeklySummaryProps {
|
|
initialSummary: ManagerSummary;
|
|
}
|
|
|
|
export default function ManagerWeeklySummary({
|
|
initialSummary,
|
|
}: ManagerWeeklySummaryProps) {
|
|
const [summary] = useState<ManagerSummary>(initialSummary);
|
|
const [activeView, setActiveView] = useState<
|
|
'narrative' | 'accomplishments' | 'challenges' | 'metrics'
|
|
>('narrative');
|
|
const { tags: availableTags } = useTasksContext();
|
|
|
|
const handleTabChange = (tabId: string) => {
|
|
setActiveView(
|
|
tabId as 'narrative' | 'accomplishments' | 'challenges' | 'metrics'
|
|
);
|
|
};
|
|
|
|
const handleRefresh = () => {
|
|
// SSR - refresh via page reload
|
|
window.location.reload();
|
|
};
|
|
|
|
const formatPeriod = () => {
|
|
return `7 derniers jours (${format(summary.period.start, 'dd MMM', { locale: fr })} - ${format(summary.period.end, 'dd MMM yyyy', { locale: fr })})`;
|
|
};
|
|
|
|
// Configuration des onglets
|
|
const tabItems: TabItem[] = [
|
|
{ id: 'narrative', label: 'Vue Executive', icon: '📝' },
|
|
{
|
|
id: 'accomplishments',
|
|
label: 'Accomplissements',
|
|
icon: '✅',
|
|
count: summary.keyAccomplishments.length,
|
|
},
|
|
{
|
|
id: 'challenges',
|
|
label: 'Enjeux à venir',
|
|
icon: '🎯',
|
|
count: summary.upcomingChallenges.length,
|
|
},
|
|
{ id: 'metrics', label: 'Métriques', icon: '📊' },
|
|
];
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
{/* Header avec navigation */}
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<h1 className="text-2xl font-bold text-[var(--foreground)]">
|
|
<Emoji emoji="👔" /> Weekly
|
|
</h1>
|
|
<p className="text-[var(--muted-foreground)]">{formatPeriod()}</p>
|
|
</div>
|
|
{activeView !== 'metrics' && (
|
|
<Button onClick={handleRefresh} variant="secondary" size="sm">
|
|
<Emoji emoji="🔄" />
|
|
Actualiser
|
|
</Button>
|
|
)}
|
|
</div>
|
|
|
|
{/* Navigation des vues */}
|
|
<Tabs
|
|
items={tabItems}
|
|
activeTab={activeView}
|
|
onTabChange={handleTabChange}
|
|
/>
|
|
|
|
{/* Vue Executive / Narrative */}
|
|
{activeView === 'narrative' && (
|
|
<div className="space-y-6">
|
|
{/* Section principale : Résumé + Métriques côte à côte */}
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
|
{/* Résumé narratif */}
|
|
<Card variant="elevated">
|
|
<CardHeader>
|
|
<h2 className="text-lg font-semibold flex items-center gap-2">
|
|
<Emoji emoji="📊" /> Résumé de la semaine
|
|
</h2>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
<div className="outline-card-blue p-4">
|
|
<h3 className="font-medium mb-2">
|
|
<Emoji emoji="🎯" /> Points clés accomplis
|
|
</h3>
|
|
<p className="text-sm text-[var(--muted-foreground)]">
|
|
{summary.narrative.weekHighlight}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="outline-card-orange p-4">
|
|
<h3 className="font-medium mb-2">
|
|
<Emoji emoji="⚡" /> Défis traités
|
|
</h3>
|
|
<p className="text-sm text-[var(--muted-foreground)]">
|
|
{summary.narrative.mainChallenges}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="outline-card-green p-4">
|
|
<h3 className="font-medium mb-2">
|
|
<Emoji emoji="🔮" /> Focus 7 prochains jours
|
|
</h3>
|
|
<p className="text-sm text-[var(--muted-foreground)]">
|
|
{summary.narrative.nextWeekFocus}
|
|
</p>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Métriques rapides */}
|
|
<Card variant="elevated">
|
|
<CardHeader>
|
|
<h2 className="text-lg font-semibold">
|
|
<Emoji emoji="📈" /> Métriques en bref
|
|
</h2>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div className="outline-metric-blue">
|
|
<div className="text-2xl font-bold mb-1">
|
|
{summary.metrics.totalTasksCompleted}
|
|
</div>
|
|
<div className="text-xs font-medium mb-1">
|
|
Tâches complétées
|
|
</div>
|
|
<div className="text-xs text-[var(--muted-foreground)]">
|
|
dont {summary.metrics.highPriorityTasksCompleted} priorité
|
|
haute
|
|
</div>
|
|
</div>
|
|
|
|
<div className="outline-metric-green">
|
|
<div className="text-2xl font-bold mb-1">
|
|
{summary.metrics.totalCheckboxesCompleted}
|
|
</div>
|
|
<div className="text-xs font-medium mb-1">
|
|
Todos complétés
|
|
</div>
|
|
<div className="text-xs text-[var(--muted-foreground)]">
|
|
dont {summary.metrics.meetingCheckboxesCompleted} meetings
|
|
</div>
|
|
</div>
|
|
|
|
<div className="outline-metric-orange">
|
|
<div className="text-2xl font-bold mb-1">
|
|
{
|
|
summary.keyAccomplishments.filter(
|
|
(a) => a.impact === 'high'
|
|
).length
|
|
}
|
|
</div>
|
|
<div className="text-xs font-medium mb-1">
|
|
Items à fort impact
|
|
</div>
|
|
<div className="text-xs text-[var(--muted-foreground)]">
|
|
/ {summary.keyAccomplishments.length} accomplissements
|
|
</div>
|
|
</div>
|
|
|
|
<div className="outline-metric-gray">
|
|
<div className="text-2xl font-bold mb-1">
|
|
{
|
|
summary.upcomingChallenges.filter(
|
|
(c) => c.priority === 'high'
|
|
).length
|
|
}
|
|
</div>
|
|
<div className="text-xs font-medium mb-1">
|
|
Priorités critiques
|
|
</div>
|
|
<div className="text-xs text-[var(--muted-foreground)]">
|
|
/ {summary.upcomingChallenges.length} enjeux
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
{/* Top accomplissements */}
|
|
<Card variant="elevated">
|
|
<CardHeader
|
|
className="pb-4"
|
|
style={{
|
|
borderBottom: '1px solid',
|
|
borderBottomColor:
|
|
'color-mix(in srgb, var(--success) 10%, var(--border))',
|
|
}}
|
|
>
|
|
<h2
|
|
className="text-lg font-semibold flex items-center gap-2"
|
|
style={{ color: 'var(--success)' }}
|
|
>
|
|
<Emoji emoji="🏆" /> Top accomplissements
|
|
</h2>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
{summary.keyAccomplishments.length === 0 ? (
|
|
<div className="col-span-3 text-center py-8 text-[var(--muted-foreground)]">
|
|
<p>
|
|
Aucun accomplissement significatif trouvé cette semaine.
|
|
</p>
|
|
<p className="text-sm mt-2">
|
|
Ajoutez des tâches avec priorité haute/medium ou des
|
|
meetings.
|
|
</p>
|
|
</div>
|
|
) : (
|
|
summary.keyAccomplishments
|
|
.slice(0, 6)
|
|
.map((accomplishment, index) => (
|
|
<AchievementCard
|
|
key={accomplishment.id}
|
|
achievement={accomplishment}
|
|
availableTags={
|
|
availableTags as (Tag & { usage: number })[]
|
|
}
|
|
index={index}
|
|
showDescription={true}
|
|
maxTags={2}
|
|
/>
|
|
))
|
|
)}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Top challenges */}
|
|
<Card variant="elevated">
|
|
<CardHeader
|
|
className="pb-4"
|
|
style={{
|
|
borderBottom: '1px solid',
|
|
borderBottomColor:
|
|
'color-mix(in srgb, var(--destructive) 10%, var(--border))',
|
|
}}
|
|
>
|
|
<h2
|
|
className="text-lg font-semibold flex items-center gap-2"
|
|
style={{ color: 'var(--destructive)' }}
|
|
>
|
|
<Emoji emoji="🎯" /> Top enjeux à venir
|
|
</h2>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
{summary.upcomingChallenges.length === 0 ? (
|
|
<div className="col-span-3 text-center py-8 text-[var(--muted-foreground)]">
|
|
<p>Aucun enjeu prioritaire trouvé.</p>
|
|
<p className="text-sm mt-2">
|
|
Ajoutez des tâches non complétées avec priorité
|
|
haute/medium.
|
|
</p>
|
|
</div>
|
|
) : (
|
|
summary.upcomingChallenges
|
|
.slice(0, 6)
|
|
.map((challenge, index) => (
|
|
<ChallengeCard
|
|
key={challenge.id}
|
|
challenge={challenge}
|
|
availableTags={
|
|
availableTags as (Tag & { usage: number })[]
|
|
}
|
|
index={index}
|
|
showDescription={true}
|
|
maxTags={2}
|
|
/>
|
|
))
|
|
)}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
)}
|
|
|
|
{/* Vue détaillée des accomplissements */}
|
|
{activeView === 'accomplishments' && (
|
|
<Card variant="elevated">
|
|
<CardHeader>
|
|
<h2 className="text-lg font-semibold">
|
|
<Emoji emoji="✅" /> Accomplissements des 7 derniers jours
|
|
</h2>
|
|
<p className="text-sm text-[var(--muted-foreground)]">
|
|
{summary.keyAccomplishments.length} accomplissements significatifs
|
|
• {summary.metrics.totalTasksCompleted} tâches •{' '}
|
|
{summary.metrics.totalCheckboxesCompleted} todos complétés
|
|
</p>
|
|
</CardHeader>
|
|
<CardContent className="space-y-6">
|
|
{summary.keyAccomplishments.length === 0 ? (
|
|
<div
|
|
className="p-8 text-center rounded-xl border-2"
|
|
style={{
|
|
backgroundColor:
|
|
'color-mix(in srgb, var(--muted) 15%, transparent)',
|
|
borderColor:
|
|
'color-mix(in srgb, var(--muted) 40%, var(--border))',
|
|
color: 'var(--muted-foreground)',
|
|
}}
|
|
>
|
|
<div className="text-4xl mb-4">
|
|
<Emoji emoji="📭" />
|
|
</div>
|
|
<p className="text-lg mb-2">
|
|
Aucun accomplissement significatif trouvé cette semaine.
|
|
</p>
|
|
<p className="text-sm">
|
|
Ajoutez des tâches avec priorité haute/medium ou des meetings.
|
|
</p>
|
|
</div>
|
|
) : (
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
{summary.keyAccomplishments.map((accomplishment, index) => (
|
|
<AchievementCard
|
|
key={accomplishment.id}
|
|
achievement={accomplishment}
|
|
availableTags={availableTags as (Tag & { usage: number })[]}
|
|
index={index}
|
|
showDescription={true}
|
|
maxTags={3}
|
|
/>
|
|
))}
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
|
|
{/* Vue détaillée des challenges */}
|
|
{activeView === 'challenges' && (
|
|
<Card variant="elevated">
|
|
<CardHeader>
|
|
<h2 className="text-lg font-semibold">
|
|
<Emoji emoji="🎯" /> Enjeux et défis à venir
|
|
</h2>
|
|
<p className="text-sm text-[var(--muted-foreground)]">
|
|
{summary.upcomingChallenges.length} défis identifiés •{' '}
|
|
{
|
|
summary.upcomingChallenges.filter((c) => c.priority === 'high')
|
|
.length
|
|
}{' '}
|
|
priorité haute •{' '}
|
|
{
|
|
summary.upcomingChallenges.filter((c) => c.blockers.length > 0)
|
|
.length
|
|
}{' '}
|
|
avec blockers
|
|
</p>
|
|
</CardHeader>
|
|
<CardContent className="space-y-6">
|
|
{summary.upcomingChallenges.length === 0 ? (
|
|
<div
|
|
className="p-8 text-center rounded-xl border-2"
|
|
style={{
|
|
backgroundColor:
|
|
'color-mix(in srgb, var(--muted) 15%, transparent)',
|
|
borderColor:
|
|
'color-mix(in srgb, var(--muted) 40%, var(--border))',
|
|
color: 'var(--muted-foreground)',
|
|
}}
|
|
>
|
|
<div className="text-4xl mb-4">
|
|
<Emoji emoji="🎯" />
|
|
</div>
|
|
<p className="text-lg mb-2">Aucun enjeu prioritaire trouvé.</p>
|
|
<p className="text-sm">
|
|
Ajoutez des tâches non complétées avec priorité haute/medium.
|
|
</p>
|
|
</div>
|
|
) : (
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
{summary.upcomingChallenges.map((challenge, index) => (
|
|
<ChallengeCard
|
|
key={challenge.id}
|
|
challenge={challenge}
|
|
availableTags={availableTags as (Tag & { usage: number })[]}
|
|
index={index}
|
|
showDescription={true}
|
|
maxTags={3}
|
|
/>
|
|
))}
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
|
|
{/* Vue Métriques */}
|
|
{activeView === 'metrics' && <MetricsTab />}
|
|
</div>
|
|
);
|
|
}
|