feat: add date-fns dependency and update HomePage component
- Added `date-fns` as a dependency in `package.json` and `package-lock.json`. - Refactored `Home` component to `HomePage`, implementing server-side rendering for tasks and stats retrieval. - Integrated `Header` and `KanbanBoard` components for improved UI structure. - Marked Kanban components as completed in `TODO.md`.
This commit is contained in:
Julien Froidefond
71
components/kanban/Board.tsx
Normal file
71
components/kanban/Board.tsx
Normal file
@@ -0,0 +1,71 @@
|
||||
'use client';
|
||||
|
||||
import { Task, TaskStatus } from '@/lib/types';
|
||||
import { KanbanColumn } from './Column';
|
||||
import { useMemo } from 'react';
|
||||
|
||||
interface KanbanBoardProps {
|
||||
tasks: Task[];
|
||||
}
|
||||
|
||||
export function KanbanBoard({ tasks }: KanbanBoardProps) {
|
||||
// Organiser les tâches par statut
|
||||
const tasksByStatus = useMemo(() => {
|
||||
const grouped = tasks.reduce((acc, task) => {
|
||||
if (!acc[task.status]) {
|
||||
acc[task.status] = [];
|
||||
}
|
||||
acc[task.status].push(task);
|
||||
return acc;
|
||||
}, {} as Record<TaskStatus, Task[]>);
|
||||
|
||||
return grouped;
|
||||
}, [tasks]);
|
||||
|
||||
// Configuration des colonnes
|
||||
const columns: Array<{
|
||||
id: TaskStatus;
|
||||
title: string;
|
||||
color: string;
|
||||
tasks: Task[];
|
||||
}> = [
|
||||
{
|
||||
id: 'todo',
|
||||
title: 'À faire',
|
||||
color: 'gray',
|
||||
tasks: tasksByStatus.todo || []
|
||||
},
|
||||
{
|
||||
id: 'in_progress',
|
||||
title: 'En cours',
|
||||
color: 'blue',
|
||||
tasks: tasksByStatus.in_progress || []
|
||||
},
|
||||
{
|
||||
id: 'done',
|
||||
title: 'Terminé',
|
||||
color: 'green',
|
||||
tasks: tasksByStatus.done || []
|
||||
},
|
||||
{
|
||||
id: 'cancelled',
|
||||
title: 'Annulé',
|
||||
color: 'red',
|
||||
tasks: tasksByStatus.cancelled || []
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="flex gap-6 overflow-x-auto pb-6">
|
||||
{columns.map((column) => (
|
||||
<KanbanColumn
|
||||
key={column.id}
|
||||
id={column.id}
|
||||
title={column.title}
|
||||
color={column.color}
|
||||
tasks={column.tasks}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
57
components/kanban/Column.tsx
Normal file
57
components/kanban/Column.tsx
Normal file
@@ -0,0 +1,57 @@
|
||||
import { Task, TaskStatus } from '@/lib/types';
|
||||
import { TaskCard } from './TaskCard';
|
||||
|
||||
interface KanbanColumnProps {
|
||||
id: TaskStatus;
|
||||
title: string;
|
||||
color: string;
|
||||
tasks: Task[];
|
||||
}
|
||||
|
||||
export function KanbanColumn({ id, title, color, tasks }: KanbanColumnProps) {
|
||||
const colorClasses = {
|
||||
gray: 'border-gray-300 bg-gray-50 dark:border-gray-600 dark:bg-gray-800',
|
||||
blue: 'border-blue-300 bg-blue-50 dark:border-blue-600 dark:bg-blue-900/20',
|
||||
green: 'border-green-300 bg-green-50 dark:border-green-600 dark:bg-green-900/20',
|
||||
red: 'border-red-300 bg-red-50 dark:border-red-600 dark:bg-red-900/20'
|
||||
};
|
||||
|
||||
const headerColorClasses = {
|
||||
gray: 'text-gray-700 dark:text-gray-300',
|
||||
blue: 'text-blue-700 dark:text-blue-300',
|
||||
green: 'text-green-700 dark:text-green-300',
|
||||
red: 'text-red-700 dark:text-red-300'
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex-shrink-0 w-80">
|
||||
{/* En-tête de colonne */}
|
||||
<div className={`rounded-t-lg border-2 border-b-0 p-4 ${colorClasses[color as keyof typeof colorClasses]}`}>
|
||||
<div className="flex items-center justify-between">
|
||||
<h3 className={`font-semibold text-lg ${headerColorClasses[color as keyof typeof headerColorClasses]}`}>
|
||||
{title}
|
||||
</h3>
|
||||
<span className={`px-2 py-1 rounded-full text-xs font-medium ${headerColorClasses[color as keyof typeof headerColorClasses]} bg-white/50 dark:bg-black/20`}>
|
||||
{tasks.length}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Zone de contenu */}
|
||||
<div className={`border-2 border-t-0 rounded-b-lg min-h-96 p-4 ${colorClasses[color as keyof typeof colorClasses]}`}>
|
||||
<div className="space-y-3">
|
||||
{tasks.length === 0 ? (
|
||||
<div className="text-center py-8 text-gray-500 dark:text-gray-400">
|
||||
<div className="text-4xl mb-2">📝</div>
|
||||
<p className="text-sm">Aucune tâche</p>
|
||||
</div>
|
||||
) : (
|
||||
tasks.map((task) => (
|
||||
<TaskCard key={task.id} task={task} />
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
112
components/kanban/TaskCard.tsx
Normal file
112
components/kanban/TaskCard.tsx
Normal file
@@ -0,0 +1,112 @@
|
||||
import { Task } from '@/lib/types';
|
||||
import { formatDistanceToNow } from 'date-fns';
|
||||
import { fr } from 'date-fns/locale';
|
||||
|
||||
interface TaskCardProps {
|
||||
task: Task;
|
||||
}
|
||||
|
||||
export function TaskCard({ task }: TaskCardProps) {
|
||||
// Extraire les emojis du titre pour les afficher comme tags visuels
|
||||
const emojiRegex = /[\u{1F600}-\u{1F64F}]|[\u{1F300}-\u{1F5FF}]|[\u{1F680}-\u{1F6FF}]|[\u{1F1E0}-\u{1F1FF}]|[\u{2600}-\u{26FF}]|[\u{2700}-\u{27BF}]/gu;
|
||||
const emojis = task.title.match(emojiRegex) || [];
|
||||
const titleWithoutEmojis = task.title.replace(emojiRegex, '').trim();
|
||||
|
||||
// Couleur de priorité
|
||||
const priorityColors = {
|
||||
low: 'bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-300',
|
||||
medium: 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-300',
|
||||
high: 'bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-300',
|
||||
urgent: 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300'
|
||||
};
|
||||
|
||||
// Couleur de source
|
||||
const sourceColors = {
|
||||
reminders: 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300',
|
||||
jira: 'bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-300'
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="bg-white dark:bg-gray-700 rounded-lg shadow-sm border border-gray-200 dark:border-gray-600 p-4 hover:shadow-md transition-shadow cursor-pointer">
|
||||
{/* En-tête avec emojis */}
|
||||
{emojis.length > 0 && (
|
||||
<div className="flex gap-1 mb-2">
|
||||
{emojis.map((emoji, index) => (
|
||||
<span key={index} className="text-lg">
|
||||
{emoji}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Titre */}
|
||||
<h4 className="font-medium text-gray-900 dark:text-white mb-2 line-clamp-2">
|
||||
{titleWithoutEmojis}
|
||||
</h4>
|
||||
|
||||
{/* Description si présente */}
|
||||
{task.description && (
|
||||
<p className="text-sm text-gray-600 dark:text-gray-300 mb-3 line-clamp-2">
|
||||
{task.description}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{/* Tags */}
|
||||
<div className="flex flex-wrap gap-1 mb-3">
|
||||
{/* Priorité */}
|
||||
<span className={`px-2 py-1 rounded-full text-xs font-medium ${priorityColors[task.priority]}`}>
|
||||
{task.priority}
|
||||
</span>
|
||||
|
||||
{/* Source */}
|
||||
<span className={`px-2 py-1 rounded-full text-xs font-medium ${sourceColors[task.source as keyof typeof sourceColors]}`}>
|
||||
{task.source}
|
||||
</span>
|
||||
|
||||
{/* Tags personnalisés */}
|
||||
{task.tags && task.tags.length > 0 && (
|
||||
task.tags.slice(0, 2).map((tag, index) => (
|
||||
<span
|
||||
key={index}
|
||||
className="px-2 py-1 rounded-full text-xs font-medium bg-indigo-100 text-indigo-700 dark:bg-indigo-900/30 dark:text-indigo-300"
|
||||
>
|
||||
#{tag}
|
||||
</span>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Footer avec dates */}
|
||||
<div className="flex items-center justify-between text-xs text-gray-500 dark:text-gray-400">
|
||||
<div>
|
||||
{task.dueDate && (
|
||||
<span className="flex items-center gap-1">
|
||||
📅 {formatDistanceToNow(new Date(task.dueDate), {
|
||||
addSuffix: true,
|
||||
locale: fr
|
||||
})}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
{task.completedAt ? (
|
||||
<span className="flex items-center gap-1 text-green-600 dark:text-green-400">
|
||||
✅ {formatDistanceToNow(new Date(task.completedAt), {
|
||||
addSuffix: true,
|
||||
locale: fr
|
||||
})}
|
||||
</span>
|
||||
) : (
|
||||
<span>
|
||||
Créé {formatDistanceToNow(new Date(task.createdAt), {
|
||||
addSuffix: true,
|
||||
locale: fr
|
||||
})}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
87
components/ui/Header.tsx
Normal file
87
components/ui/Header.tsx
Normal file
@@ -0,0 +1,87 @@
|
||||
interface HeaderProps {
|
||||
title: string;
|
||||
subtitle: string;
|
||||
stats: {
|
||||
total: number;
|
||||
completed: number;
|
||||
inProgress: number;
|
||||
todo: number;
|
||||
completionRate: number;
|
||||
};
|
||||
}
|
||||
|
||||
export function Header({ title, subtitle, stats }: HeaderProps) {
|
||||
return (
|
||||
<header className="bg-white dark:bg-gray-800 shadow-sm border-b border-gray-200 dark:border-gray-700">
|
||||
<div className="container mx-auto px-4 py-6">
|
||||
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
|
||||
{/* Titre et sous-titre */}
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold text-gray-900 dark:text-white">
|
||||
{title}
|
||||
</h1>
|
||||
<p className="text-gray-600 dark:text-gray-400 mt-1">
|
||||
{subtitle}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Statistiques */}
|
||||
<div className="flex flex-wrap gap-4">
|
||||
<StatCard
|
||||
label="Total"
|
||||
value={stats.total}
|
||||
color="blue"
|
||||
/>
|
||||
<StatCard
|
||||
label="Terminées"
|
||||
value={stats.completed}
|
||||
color="green"
|
||||
/>
|
||||
<StatCard
|
||||
label="En cours"
|
||||
value={stats.inProgress}
|
||||
color="yellow"
|
||||
/>
|
||||
<StatCard
|
||||
label="À faire"
|
||||
value={stats.todo}
|
||||
color="gray"
|
||||
/>
|
||||
<StatCard
|
||||
label="Taux"
|
||||
value={`${stats.completionRate}%`}
|
||||
color="purple"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
|
||||
interface StatCardProps {
|
||||
label: string;
|
||||
value: number | string;
|
||||
color: 'blue' | 'green' | 'yellow' | 'gray' | 'purple';
|
||||
}
|
||||
|
||||
function StatCard({ label, value, color }: StatCardProps) {
|
||||
const colorClasses = {
|
||||
blue: 'bg-blue-50 text-blue-700 border-blue-200 dark:bg-blue-900/20 dark:text-blue-300 dark:border-blue-800',
|
||||
green: 'bg-green-50 text-green-700 border-green-200 dark:bg-green-900/20 dark:text-green-300 dark:border-green-800',
|
||||
yellow: 'bg-yellow-50 text-yellow-700 border-yellow-200 dark:bg-yellow-900/20 dark:text-yellow-300 dark:border-yellow-800',
|
||||
gray: 'bg-gray-50 text-gray-700 border-gray-200 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-700',
|
||||
purple: 'bg-purple-50 text-purple-700 border-purple-200 dark:bg-purple-900/20 dark:text-purple-300 dark:border-purple-800'
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={`px-3 py-2 rounded-lg border text-sm font-medium ${colorClasses[color]}`}>
|
||||
<div className="text-xs opacity-75 uppercase tracking-wide">
|
||||
{label}
|
||||
</div>
|
||||
<div className="text-lg font-bold">
|
||||
{value}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user