feat: revamp HomePageClient and dashboard layout

- Updated HomePageClient to replace Kanban board with a modern dashboard layout.
- Integrated DashboardStats, QuickActions, and RecentTasks components for enhanced user experience.
- Marked several tasks as complete in TODO.md, including the creation of a new dashboard and quick action features.
- Added navigation link for the new dashboard in the Header component.
This commit is contained in:
Julien Froidefond
2025-09-18 11:52:10 +02:00
parent e7a4091f94
commit d38053b4dc
8 changed files with 615 additions and 152 deletions

View File

@@ -1,16 +1,13 @@
'use client';
import { useState } from 'react';
import { KanbanBoardContainer } from '@/components/kanban/BoardContainer';
import { Header } from '@/components/ui/Header';
import { TasksProvider, useTasksContext } from '@/contexts/TasksContext';
import { UserPreferencesProvider, useUserPreferences } from '@/contexts/UserPreferencesContext';
import { UserPreferencesProvider } from '@/contexts/UserPreferencesContext';
import { Task, Tag, TaskStats, UserPreferences } from '@/lib/types';
import { CreateTaskData } from '@/clients/tasks-client';
import { CreateTaskForm } from '@/components/forms/CreateTaskForm';
import { Button } from '@/components/ui/Button';
import { JiraQuickFilter } from '@/components/kanban/JiraQuickFilter';
import { FontSizeToggle } from '@/components/ui/FontSizeToggle';
import { DashboardStats } from '@/components/dashboard/DashboardStats';
import { QuickActions } from '@/components/dashboard/QuickActions';
import { RecentTasks } from '@/components/dashboard/RecentTasks';
interface HomePageClientProps {
initialTasks: Task[];
@@ -21,163 +18,32 @@ interface HomePageClientProps {
function HomePageContent() {
const { stats, syncing, createTask, activeFiltersCount, kanbanFilters, setKanbanFilters } = useTasksContext();
const { preferences, updateViewPreferences } = useUserPreferences();
const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
const { stats, syncing, createTask, tasks } = useTasksContext();
// Extraire les préférences du context
const showFilters = preferences.viewPreferences.showFilters;
const showObjectives = preferences.viewPreferences.showObjectives;
const compactView = preferences.viewPreferences.compactView;
const swimlanesByTags = preferences.viewPreferences.swimlanesByTags;
// Handlers pour les toggles (sauvegarde automatique via le context)
const handleToggleFilters = () => {
updateViewPreferences({ showFilters: !showFilters });
};
const handleToggleObjectives = () => {
updateViewPreferences({ showObjectives: !showObjectives });
};
const handleToggleCompactView = () => {
updateViewPreferences({ compactView: !compactView });
};
const handleToggleSwimlanes = () => {
updateViewPreferences({ swimlanesByTags: !swimlanesByTags });
};
// Handler pour la création de tâche depuis la barre de contrôles
// Handler pour la création de tâche
const handleCreateTask = async (data: CreateTaskData) => {
await createTask(data);
setIsCreateModalOpen(false);
};
return (
<div className="min-h-screen bg-[var(--background)]">
<Header
title="TowerControl"
subtitle="Gestionnaire de tâches moderne"
subtitle="Dashboard - Vue d'ensemble"
stats={stats}
syncing={syncing}
/>
{/* Barre de contrôles de visibilité */}
<div className="bg-[var(--card)]/30 border-b border-[var(--border)]/30">
<div className="container mx-auto px-6 py-2">
<div className="flex items-center justify-between w-full">
<div className="flex items-center gap-4">
<div className="flex items-center gap-2">
<button
onClick={handleToggleFilters}
className={`flex items-center gap-2 px-3 py-1.5 rounded-md text-sm font-mono transition-all ${
showFilters
? 'bg-[var(--primary)]/20 text-[var(--primary)] border border-[var(--primary)]/30'
: 'bg-[var(--card)] text-[var(--muted-foreground)] border border-[var(--border)] hover:border-[var(--primary)]/50'
}`}
>
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 100 4m0-4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 100 4m0-4v2m0-6V4" />
</svg>
Filtres{activeFiltersCount > 0 && ` (${activeFiltersCount})`}
</button>
<button
onClick={handleToggleObjectives}
className={`flex items-center gap-2 px-3 py-1.5 rounded-md text-sm font-mono transition-all ${
showObjectives
? 'bg-[var(--accent)]/20 text-[var(--accent)] border border-[var(--accent)]/30'
: 'bg-[var(--card)] text-[var(--muted-foreground)] border border-[var(--border)] hover:border-[var(--accent)]/50'
}`}
>
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z" />
</svg>
Objectifs
</button>
</div>
<div className="flex items-center gap-2 border-l border-[var(--border)] pl-4">
{/* Raccourcis Jira */}
<JiraQuickFilter
filters={kanbanFilters}
onFiltersChange={setKanbanFilters}
/>
<button
onClick={handleToggleCompactView}
className={`flex items-center gap-2 px-3 py-1.5 rounded-md text-sm font-mono transition-all ${
compactView
? 'bg-[var(--secondary)]/20 text-[var(--secondary)] border border-[var(--secondary)]/30'
: 'bg-[var(--card)] text-[var(--muted-foreground)] border border-[var(--border)] hover:border-[var(--secondary)]/50'
}`}
title={compactView ? "Vue détaillée" : "Vue compacte"}
>
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
{compactView ? (
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 10h16M4 14h16M4 18h16" />
) : (
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
)}
</svg>
{compactView ? 'Détaillée' : 'Compacte'}
</button>
<button
onClick={handleToggleSwimlanes}
className={`flex items-center gap-2 px-3 py-1.5 rounded-md text-sm font-mono transition-all ${
swimlanesByTags
? 'bg-[var(--warning)]/20 text-[var(--warning)] border border-[var(--warning)]/30'
: 'bg-[var(--card)] text-[var(--muted-foreground)] border border-[var(--border)] hover:border-[var(--warning)]/50'
}`}
title={swimlanesByTags ? "Vue standard" : "Vue swimlanes"}
>
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
{swimlanesByTags ? (
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z" />
) : (
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 11H5m14-7H5m14 14H5" />
)}
</svg>
{swimlanesByTags ? 'Standard' : 'Swimlanes'}
</button>
{/* Font Size Toggle */}
<FontSizeToggle />
</div>
</div>
{/* Bouton d'ajout de tâche */}
<Button
variant="primary"
onClick={() => setIsCreateModalOpen(true)}
className="flex items-center gap-2"
>
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
</svg>
Nouvelle tâche
</Button>
</div>
</div>
</div>
<main className="h-[calc(100vh-160px)]">
<KanbanBoardContainer
showFilters={showFilters}
showObjectives={showObjectives}
/>
<main className="container mx-auto px-6 py-8">
{/* Statistiques */}
<DashboardStats stats={stats} />
{/* Actions rapides */}
<QuickActions onCreateTask={handleCreateTask} />
{/* Tâches récentes */}
<RecentTasks tasks={tasks} />
</main>
{/* Modal de création de tâche */}
<CreateTaskForm
isOpen={isCreateModalOpen}
onClose={() => setIsCreateModalOpen(false)}
onSubmit={handleCreateTask}
loading={false}
/>
</div>
);
}

View File

@@ -0,0 +1,127 @@
'use client';
import { TaskStats } from '@/lib/types';
import { Card } from '@/components/ui/Card';
interface DashboardStatsProps {
stats: TaskStats;
}
export function DashboardStats({ stats }: DashboardStatsProps) {
const totalTasks = stats.total;
const completionRate = totalTasks > 0 ? Math.round((stats.completed / totalTasks) * 100) : 0;
const inProgressRate = totalTasks > 0 ? Math.round((stats.inProgress / totalTasks) * 100) : 0;
const statCards = [
{
title: 'Total Tâches',
value: stats.total,
icon: '📋',
color: 'bg-blue-500',
textColor: 'text-blue-600'
},
{
title: 'À Faire',
value: stats.todo,
icon: '⏳',
color: 'bg-gray-500',
textColor: 'text-gray-600'
},
{
title: 'En Cours',
value: stats.inProgress,
icon: '🔄',
color: 'bg-orange-500',
textColor: 'text-orange-600'
},
{
title: 'Terminées',
value: stats.completed,
icon: '✅',
color: 'bg-green-500',
textColor: 'text-green-600'
}
];
return (
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
{statCards.map((stat, index) => (
<Card key={index} className="p-6 hover:shadow-lg transition-shadow">
<div className="flex items-center justify-between">
<div>
<p className="text-sm font-medium text-[var(--muted-foreground)] mb-1">
{stat.title}
</p>
<p className={`text-3xl font-bold ${stat.textColor}`}>
{stat.value}
</p>
</div>
<div className="text-3xl">
{stat.icon}
</div>
</div>
</Card>
))}
{/* Cartes de pourcentage */}
<Card className="p-6 hover:shadow-lg transition-shadow md:col-span-2 lg:col-span-2">
<h3 className="text-lg font-semibold mb-4">Taux de Completion</h3>
<div className="space-y-4">
<div className="flex items-center justify-between">
<span className="text-sm font-medium">Terminées</span>
<span className="text-green-600 font-bold">{completionRate}%</span>
</div>
<div className="w-full bg-gray-200 rounded-full h-2">
<div
className="bg-green-500 h-2 rounded-full transition-all duration-300"
style={{ width: `${completionRate}%` }}
/>
</div>
<div className="flex items-center justify-between">
<span className="text-sm font-medium">En Cours</span>
<span className="text-orange-600 font-bold">{inProgressRate}%</span>
</div>
<div className="w-full bg-gray-200 rounded-full h-2">
<div
className="bg-orange-500 h-2 rounded-full transition-all duration-300"
style={{ width: `${inProgressRate}%` }}
/>
</div>
</div>
</Card>
{/* Insights rapides */}
<Card className="p-6 hover:shadow-lg transition-shadow md:col-span-2 lg:col-span-2">
<h3 className="text-lg font-semibold mb-4">Aperçu Rapide</h3>
<div className="space-y-3">
<div className="flex items-center gap-2">
<span className="w-2 h-2 bg-green-500 rounded-full"></span>
<span className="text-sm">
{stats.completed} tâches terminées sur {totalTasks}
</span>
</div>
<div className="flex items-center gap-2">
<span className="w-2 h-2 bg-orange-500 rounded-full"></span>
<span className="text-sm">
{stats.inProgress} tâches en cours de traitement
</span>
</div>
<div className="flex items-center gap-2">
<span className="w-2 h-2 bg-gray-500 rounded-full"></span>
<span className="text-sm">
{stats.todo} tâches en attente
</span>
</div>
{totalTasks > 0 && (
<div className="pt-2 border-t border-[var(--border)]">
<span className="text-sm font-medium text-[var(--muted-foreground)]">
Productivité: {completionRate}% de completion
</span>
</div>
)}
</div>
</Card>
</div>
);
}

View File

@@ -0,0 +1,93 @@
'use client';
import { useState } from 'react';
import { Button } from '@/components/ui/Button';
import { CreateTaskForm } from '@/components/forms/CreateTaskForm';
import { CreateTaskData } from '@/clients/tasks-client';
import Link from 'next/link';
interface QuickActionsProps {
onCreateTask: (data: CreateTaskData) => Promise<void>;
}
export function QuickActions({ onCreateTask }: QuickActionsProps) {
const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
const handleCreateTask = async (data: CreateTaskData) => {
await onCreateTask(data);
setIsCreateModalOpen(false);
};
return (
<>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
<Button
variant="primary"
onClick={() => setIsCreateModalOpen(true)}
className="flex items-center gap-2 p-6 h-auto"
>
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
</svg>
<div className="text-left">
<div className="font-semibold">Nouvelle Tâche</div>
<div className="text-sm opacity-80">Créer une nouvelle tâche</div>
</div>
</Button>
<Link href="/kanban">
<Button
variant="secondary"
className="flex items-center gap-2 p-6 h-auto w-full"
>
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 0V5a2 2 0 012-2h2a2 2 0 002-2" />
</svg>
<div className="text-left">
<div className="font-semibold">Kanban Board</div>
<div className="text-sm opacity-80">Gérer les tâches</div>
</div>
</Button>
</Link>
<Link href="/daily">
<Button
variant="secondary"
className="flex items-center gap-2 p-6 h-auto w-full"
>
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
</svg>
<div className="text-left">
<div className="font-semibold">Daily</div>
<div className="text-sm opacity-80">Checkboxes quotidiennes</div>
</div>
</Button>
</Link>
<Link href="/settings">
<Button
variant="secondary"
className="flex items-center gap-2 p-6 h-auto w-full"
>
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
<div className="text-left">
<div className="font-semibold">Paramètres</div>
<div className="text-sm opacity-80">Configuration</div>
</div>
</Button>
</Link>
</div>
<CreateTaskForm
isOpen={isCreateModalOpen}
onClose={() => setIsCreateModalOpen(false)}
onSubmit={handleCreateTask}
loading={false}
/>
</>
);
}

View File

@@ -0,0 +1,146 @@
'use client';
import { Task } from '@/lib/types';
import { Card } from '@/components/ui/Card';
import { TagDisplay } from '@/components/ui/TagDisplay';
import { Badge } from '@/components/ui/Badge';
import { useTasksContext } from '@/contexts/TasksContext';
import { getPriorityConfig, getPriorityColorHex } from '@/lib/status-config';
import Link from 'next/link';
interface RecentTasksProps {
tasks: Task[];
}
export function RecentTasks({ tasks }: RecentTasksProps) {
const { tags: availableTags } = useTasksContext();
// Prendre les 5 tâches les plus récentes (créées ou modifiées)
const recentTasks = tasks
.sort((a, b) => new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime())
.slice(0, 5);
const getStatusColor = (status: string) => {
switch (status) {
case 'todo': return 'bg-gray-100 text-gray-800';
case 'inProgress': return 'bg-orange-100 text-orange-800';
case 'done': return 'bg-green-100 text-green-800';
default: return 'bg-gray-100 text-gray-800';
}
};
const getStatusText = (status: string) => {
switch (status) {
case 'todo': return 'À faire';
case 'inProgress': return 'En cours';
case 'done': return 'Terminé';
default: return status;
}
};
const getPriorityStyle = (priority: string) => {
try {
const config = getPriorityConfig(priority as any);
const hexColor = getPriorityColorHex(config.color);
return { color: hexColor };
} catch {
return { color: '#6b7280' }; // gray-500 par défaut
}
};
return (
<Card className="p-6">
<div className="flex items-center justify-between mb-4">
<h3 className="text-lg font-semibold">Tâches Récentes</h3>
<Link href="/kanban">
<button className="text-sm text-[var(--primary)] hover:underline">
Voir toutes
</button>
</Link>
</div>
{recentTasks.length === 0 ? (
<div className="text-center py-8 text-[var(--muted-foreground)]">
<svg className="w-12 h-12 mx-auto mb-3 opacity-50" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
</svg>
<p>Aucune tâche disponible</p>
<p className="text-sm">Créez votre première tâche pour commencer</p>
</div>
) : (
<div className="space-y-3">
{recentTasks.map((task) => (
<div
key={task.id}
className="p-3 border border-[var(--border)] rounded-lg hover:bg-[var(--card)]/50 transition-colors"
>
<div className="flex items-start justify-between gap-3">
<div className="flex-1 min-w-0">
<div className="flex items-center gap-2 mb-1">
<h4 className="font-medium text-sm truncate">{task.title}</h4>
{task.source === 'jira' && (
<Badge variant="outline" className="text-xs">
Jira
</Badge>
)}
</div>
{task.description && (
<p className="text-xs text-[var(--muted-foreground)] mb-2 line-clamp-1">
{task.description}
</p>
)}
<div className="flex items-center gap-2 flex-wrap">
<Badge className={`text-xs ${getStatusColor(task.status)}`}>
{getStatusText(task.status)}
</Badge>
{task.priority && (
<span
className="text-xs font-medium"
style={getPriorityStyle(task.priority)}
>
{(() => {
try {
return getPriorityConfig(task.priority as any).label;
} catch {
return task.priority;
}
})()}
</span>
)}
{task.tags && task.tags.length > 0 && (
<div className="flex gap-1">
<TagDisplay
tags={task.tags.slice(0, 2)}
availableTags={availableTags}
size="sm"
maxTags={2}
showColors={true}
/>
{task.tags.length > 2 && (
<span className="text-xs text-[var(--muted-foreground)]">
+{task.tags.length - 2}
</span>
)}
</div>
)}
</div>
</div>
<div className="text-xs text-[var(--muted-foreground)] whitespace-nowrap">
{new Date(task.updatedAt).toLocaleDateString('fr-FR', {
day: 'numeric',
month: 'short'
})}
</div>
</div>
</div>
))}
</div>
)}
</Card>
);
}

View File

@@ -40,6 +40,12 @@ export function Header({ title = "TowerControl", subtitle = "Task Management", s
<Link
href="/"
className="text-[var(--muted-foreground)] hover:text-[var(--primary)] transition-colors font-mono text-sm uppercase tracking-wider"
>
Dashboard
</Link>
<Link
href="/kanban"
className="text-[var(--muted-foreground)] hover:text-[var(--primary)] transition-colors font-mono text-sm uppercase tracking-wider"
>
Kanban
</Link>