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`.
2025-09-13 13:55:33 +02:00
parent e173c09119
commit 54f105fe62
8 changed files with 365 additions and 101 deletions
--- a/TODO.md
+++ b/TODO.md
@@ -33,10 +33,10 @@
 ## Phase 2: Interface utilisateur Kanban (Priorité 2)

 ### 2.1 Composants de base
- [ ] `components/kanban/Board.tsx` - Tableau Kanban principal
- [ ] `components/kanban/Column.tsx` - Colonnes du Kanban
- [ ] `components/kanban/TaskCard.tsx` - Cartes de tâches
- [ ] `components/ui/` - Composants UI réutilisables
+- [x] `components/kanban/Board.tsx` - Tableau Kanban principal
+- [x] `components/kanban/Column.tsx` - Colonnes du Kanban
+- [x] `components/kanban/TaskCard.tsx` - Cartes de tâches
+- [x] `components/ui/Header.tsx` - Header avec statistiques

 ### 2.2 Clients HTTP
 - [ ] `clients/tasks-client.ts` - Client pour les tâches
--- a/components/kanban/Board.tsx
+++ b/components/kanban/Board.tsx
@@ -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>
+  );
+}
--- a/components/kanban/Column.tsx
+++ b/components/kanban/Column.tsx
@@ -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>
+  );
+}
--- a/components/kanban/TaskCard.tsx
+++ b/components/kanban/TaskCard.tsx
@@ -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>
+  );
+}
--- a/components/ui/Header.tsx
+++ b/components/ui/Header.tsx
@@ -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>
+  );
+}
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
      "version": "0.1.0",
      "dependencies": {
        "@prisma/client": "^6.16.1",
+        "date-fns": "^4.1.0",
        "next": "15.5.3",
        "prisma": "^6.16.1",
        "react": "19.1.0",
@@ -2883,6 +2884,16 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/date-fns": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.1.0.tgz",
+      "integrity": "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/kossnocorp"
+      }
+    },
    "node_modules/debug": {
      "version": "4.4.1",
      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.1.tgz",
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
  },
  "dependencies": {
    "@prisma/client": "^6.16.1",
+    "date-fns": "^4.1.0",
    "next": "15.5.3",
    "prisma": "^6.16.1",
    "react": "19.1.0",
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,103 +1,28 @@
-import Image from "next/image";
+import { taskProcessorService } from '@/services/task-processor';
+import { getTargetRemindersList } from '@/lib/config';
+import { KanbanBoard } from '../../components/kanban/Board';
+import { Header } from '../../components/ui/Header';
+
+export default async function HomePage() {
+  // SSR - Récupération des données côté serveur
+  const [tasks, stats] = await Promise.all([
+    taskProcessorService.getTasks({ limit: 100 }),
+    taskProcessorService.getTaskStats()
+  ]);
+
+  const targetList = getTargetRemindersList();

-export default function Home() {
  return (
-    <div className="font-sans grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20">
-      <main className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start">
-        <Image
-          className="dark:invert"
-          src="/next.svg"
-          alt="Next.js logo"
-          width={180}
-          height={38}
-          priority
+    <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
+      <Header 
+        title="TowerControl" 
+        subtitle={`Tâches synchronisées depuis "${targetList}"`}
+        stats={stats}
      />
-        <ol className="font-mono list-inside list-decimal text-sm/6 text-center sm:text-left">
-          <li className="mb-2 tracking-[-.01em]">
-            Get started by editing{" "}
-            <code className="bg-black/[.05] dark:bg-white/[.06] font-mono font-semibold px-1 py-0.5 rounded">
-              src/app/page.tsx
-            </code>
-            .
-          </li>
-          <li className="tracking-[-.01em]">
-            Save and see your changes instantly.
-          </li>
-        </ol>
      
-        <div className="flex gap-4 items-center flex-col sm:flex-row">
-          <a
-            className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:w-auto"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              className="dark:invert"
-              src="/vercel.svg"
-              alt="Vercel logomark"
-              width={20}
-              height={20}
-            />
-            Deploy now
-          </a>
-          <a
-            className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 w-full sm:w-auto md:w-[158px]"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Read our docs
-          </a>
-        </div>
+      <main className="container mx-auto px-4 py-6">
+        <KanbanBoard tasks={tasks} />
      </main>
-      <footer className="row-start-3 flex gap-[24px] flex-wrap items-center justify-center">
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/file.svg"
-            alt="File icon"
-            width={16}
-            height={16}
-          />
-          Learn
-        </a>
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/window.svg"
-            alt="Window icon"
-            width={16}
-            height={16}
-          />
-          Examples
-        </a>
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/globe.svg"
-            alt="Globe icon"
-            width={16}
-            height={16}
-          />
-          Go to nextjs.org →
-        </a>
-      </footer>
    </div>
  );
 }