chore: prettier everywhere
This commit is contained in:
Julien Froidefond
@@ -18,13 +18,19 @@ interface ManagerWeeklySummaryProps {
|
||||
initialSummary: ManagerSummary;
|
||||
}
|
||||
|
||||
export default function ManagerWeeklySummary({ initialSummary }: ManagerWeeklySummaryProps) {
|
||||
export default function ManagerWeeklySummary({
|
||||
initialSummary,
|
||||
}: ManagerWeeklySummaryProps) {
|
||||
const [summary] = useState<ManagerSummary>(initialSummary);
|
||||
const [activeView, setActiveView] = useState<'narrative' | 'accomplishments' | 'challenges' | 'metrics'>('narrative');
|
||||
const [activeView, setActiveView] = useState<
|
||||
'narrative' | 'accomplishments' | 'challenges' | 'metrics'
|
||||
>('narrative');
|
||||
const { tags: availableTags } = useTasksContext();
|
||||
|
||||
const handleTabChange = (tabId: string) => {
|
||||
setActiveView(tabId as 'narrative' | 'accomplishments' | 'challenges' | 'metrics');
|
||||
setActiveView(
|
||||
tabId as 'narrative' | 'accomplishments' | 'challenges' | 'metrics'
|
||||
);
|
||||
};
|
||||
|
||||
const handleRefresh = () => {
|
||||
@@ -32,7 +38,6 @@ export default function ManagerWeeklySummary({ initialSummary }: ManagerWeeklySu
|
||||
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 })})`;
|
||||
};
|
||||
@@ -40,33 +45,41 @@ export default function ManagerWeeklySummary({ initialSummary }: ManagerWeeklySu
|
||||
// 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: '📊' }
|
||||
{
|
||||
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>
|
||||
<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 onClick={handleRefresh} variant="secondary" size="sm">
|
||||
<Emoji emoji="🔄" />
|
||||
Actualiser
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Navigation des vues */}
|
||||
<Tabs
|
||||
<Tabs
|
||||
items={tabItems}
|
||||
activeTab={activeView}
|
||||
onTabChange={handleTabChange}
|
||||
@@ -86,18 +99,30 @@ export default function ManagerWeeklySummary({ initialSummary }: ManagerWeeklySu
|
||||
</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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
@@ -105,32 +130,67 @@ export default function ManagerWeeklySummary({ initialSummary }: ManagerWeeklySu
|
||||
{/* Métriques rapides */}
|
||||
<Card variant="elevated">
|
||||
<CardHeader>
|
||||
<h2 className="text-lg font-semibold"><Emoji emoji="📈" /> Métriques en bref</h2>
|
||||
<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 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 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 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 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>
|
||||
@@ -139,11 +199,18 @@ export default function ManagerWeeklySummary({ initialSummary }: ManagerWeeklySu
|
||||
|
||||
{/* 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)' }}>
|
||||
<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>
|
||||
@@ -151,20 +218,29 @@ export default function ManagerWeeklySummary({ initialSummary }: ManagerWeeklySu
|
||||
<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>
|
||||
<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}
|
||||
/>
|
||||
))
|
||||
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>
|
||||
@@ -172,11 +248,18 @@ export default function ManagerWeeklySummary({ initialSummary }: ManagerWeeklySu
|
||||
|
||||
{/* 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)' }}>
|
||||
<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>
|
||||
@@ -185,19 +268,26 @@ export default function ManagerWeeklySummary({ initialSummary }: ManagerWeeklySu
|
||||
{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>
|
||||
<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}
|
||||
/>
|
||||
))
|
||||
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>
|
||||
@@ -209,21 +299,36 @@ export default function ManagerWeeklySummary({ initialSummary }: ManagerWeeklySu
|
||||
{activeView === 'accomplishments' && (
|
||||
<Card variant="elevated">
|
||||
<CardHeader>
|
||||
<h2 className="text-lg font-semibold"><Emoji emoji="✅" /> Accomplissements des 7 derniers jours</h2>
|
||||
<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
|
||||
{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
|
||||
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">
|
||||
@@ -247,21 +352,42 @@ export default function ManagerWeeklySummary({ initialSummary }: ManagerWeeklySu
|
||||
{activeView === 'challenges' && (
|
||||
<Card variant="elevated">
|
||||
<CardHeader>
|
||||
<h2 className="text-lg font-semibold"><Emoji emoji="🎯" /> Enjeux et défis à venir</h2>
|
||||
<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
|
||||
{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>
|
||||
<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>
|
||||
<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">
|
||||
@@ -282,9 +408,7 @@ export default function ManagerWeeklySummary({ initialSummary }: ManagerWeeklySu
|
||||
)}
|
||||
|
||||
{/* Vue Métriques */}
|
||||
{activeView === 'metrics' && (
|
||||
<MetricsTab />
|
||||
)}
|
||||
{activeView === 'metrics' && <MetricsTab />}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user