feat: add related todos functionality in task editing

- Implemented `RelatedTodos` component in `EditTaskForm` to display and manage related todos for a task.
- Updated `TasksClient` to fetch daily checkboxes related to a task.
- Enhanced `TasksService` with a method to retrieve related daily checkboxes from the database.
- Added functionality to create new todos linked to tasks in the daily actions.
- Marked the task for displaying related todos in the task editing interface as complete in TODO.md.

TODO.md

@@ -148,7 +148,7 @@
 - [x] Refactorer les couleurs des priorités dans un seul endroit
 - [x] Settings synchro Jira : ajouter une liste de projet à ignorer, doit etre pris en compte par le service bien sur
 - [x] Faire des pages à part entière pour les sous-pages de la page config + SSR
-- [ ] Afficher dans l'édition de task les todo reliés. Pouvoir en ajouter directement avec une date ou sans.
+- [x] Afficher dans l'édition de task les todo reliés. Pouvoir en ajouter directement avec une date ou sans.
 - [ ] Dans les titres de colonnes des swimlanes, je n'ai pas les couleurs des statuts
 - [ ] Système de sauvegarde automatique base de données
   - [ ] Sauvegarde automatique toutes les 6 heures (configurable)

clients/tasks-client.ts

@@ -1,5 +1,5 @@
 import { httpClient } from './base/http-client';
-import { Task, TaskStatus, TaskPriority, TaskStats } from '@/lib/types';
+import { Task, TaskStatus, TaskPriority, TaskStats, DailyCheckbox } from '@/lib/types';
 
 export interface TaskFilters {
   status?: TaskStatus[];
@@ -65,6 +65,14 @@ export class TasksClient {
     return httpClient.get<TasksResponse>('/tasks', params);
   }
 
+  /**
+   * Récupère les daily checkboxes liées à une tâche
+   */
+  async getTaskCheckboxes(taskId: string): Promise<DailyCheckbox[]> {
+    const response = await httpClient.get<{ data: DailyCheckbox[] }>(`/tasks/${taskId}/checkboxes`);
+    return response.data;
+  }
+
   // Note: Les méthodes createTask, updateTask et deleteTask ont été migrées vers Server Actions
   // Voir /src/actions/tasks.ts pour createTask, updateTask, updateTaskTitle, updateTaskStatus, deleteTask
 }

components/forms/EditTaskForm.tsx

@@ -5,6 +5,7 @@ import { Modal } from '@/components/ui/Modal';
 import { Button } from '@/components/ui/Button';
 import { Input } from '@/components/ui/Input';
 import { TagInput } from '@/components/ui/TagInput';
+import { RelatedTodos } from '@/components/forms/RelatedTodos';
 import { Task, TaskPriority, TaskStatus } from '@/lib/types';
 // UpdateTaskData removed - using Server Actions directly
 import { getAllStatuses, getAllPriorities } from '@/lib/status-config';
@@ -95,7 +96,7 @@ export function EditTaskForm({ isOpen, onClose, onSubmit, task, loading = false
 
   return (
     <Modal isOpen={isOpen} onClose={handleClose} title="Modifier la tâche" size="lg">
-      <form onSubmit={handleSubmit} className="space-y-6">
+      <form onSubmit={handleSubmit} className="space-y-4 max-h-[80vh] overflow-y-auto pr-2">
         {/* Titre */}
         <Input
           label="Titre *"
@@ -192,6 +193,9 @@ export function EditTaskForm({ isOpen, onClose, onSubmit, task, loading = false
           />
         </div>
 
+        {/* Todos reliés */}
+        <RelatedTodos taskId={task.id} />
+
         {/* Actions */}
         <div className="flex justify-end gap-3 pt-4 border-t border-[var(--border)]/50">
           <Button

components/forms/RelatedTodos.tsx

@@ -0,0 +1,222 @@
+'use client';
+
+import { useState, useEffect, useCallback, useTransition } from 'react';
+import { DailyCheckbox } from '@/lib/types';
+import { tasksClient } from '@/clients/tasks-client';
+import { Button } from '@/components/ui/Button';
+import { Input } from '@/components/ui/Input';
+import { addTodoToTask, toggleCheckbox } from '@/actions/daily';
+
+interface RelatedTodosProps {
+  taskId: string;
+}
+
+export function RelatedTodos({ taskId }: RelatedTodosProps) {
+  const [checkboxes, setCheckboxes] = useState<DailyCheckbox[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [newTodoText, setNewTodoText] = useState('');
+  const [newTodoDate, setNewTodoDate] = useState('');
+  const [showAddForm, setShowAddForm] = useState(false);
+  const [isPending, startTransition] = useTransition();
+
+  const loadCheckboxes = useCallback(async () => {
+    try {
+      setLoading(true);
+      const data = await tasksClient.getTaskCheckboxes(taskId);
+      setCheckboxes(data);
+    } catch (error) {
+      console.error('Erreur lors du chargement des todos:', error);
+    } finally {
+      setLoading(false);
+    }
+  }, [taskId]);
+
+  useEffect(() => {
+    loadCheckboxes();
+  }, [loadCheckboxes]);
+
+  const handleAddTodo = () => {
+    if (!newTodoText.trim()) return;
+
+    startTransition(async () => {
+      try {
+        // Si une date est spécifiée, l'utiliser, sinon undefined (aujourd'hui par défaut)
+        const targetDate = newTodoDate ? new Date(newTodoDate) : undefined;
+
+        const result = await addTodoToTask(taskId, newTodoText, targetDate);
+
+        if (result.success) {
+          // Recharger les checkboxes
+          await loadCheckboxes();
+          setNewTodoText('');
+          setNewTodoDate('');
+          setShowAddForm(false);
+        } else {
+          console.error('Erreur lors de l\'ajout du todo:', result.error);
+        }
+      } catch (error) {
+        console.error('Erreur lors de l\'ajout du todo:', error);
+      }
+    });
+  };
+
+  const handleToggleCheckbox = (checkboxId: string) => {
+    startTransition(async () => {
+      try {
+        const result = await toggleCheckbox(checkboxId);
+        if (result.success) {
+          // Recharger les checkboxes
+          await loadCheckboxes();
+        } else {
+          console.error('Erreur lors du toggle:', result.error);
+        }
+      } catch (error) {
+        console.error('Erreur lors du toggle:', error);
+      }
+    });
+  };
+
+  const formatDate = (date: Date | string) => {
+    try {
+      const dateObj = typeof date === 'string' ? new Date(date) : date;
+      if (isNaN(dateObj.getTime())) {
+        return 'Date invalide';
+      }
+      return new Intl.DateTimeFormat('fr-FR', {
+        day: 'numeric',
+        month: 'short',
+        year: 'numeric'
+      }).format(dateObj);
+    } catch (error) {
+      console.error('Erreur formatage date:', error, date);
+      return 'Date invalide';
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="space-y-3">
+        <label className="block text-sm font-mono font-medium text-[var(--muted-foreground)] uppercase tracking-wider">
+          Todos reliés
+        </label>
+        <div className="text-sm text-[var(--muted-foreground)] font-mono">
+          Chargement...
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center justify-between">
+        <label className="block text-sm font-mono font-medium text-[var(--muted-foreground)] uppercase tracking-wider">
+          Todos reliés ({checkboxes.length})
+        </label>
+      </div>
+
+      {/* Liste des todos existants */}
+      {checkboxes.length > 0 ? (
+        <div className="space-y-2 max-h-32 overflow-y-auto pr-2">
+          {checkboxes.map((checkbox) => (
+            <div
+              key={checkbox.id}
+              className={`flex items-start gap-3 p-3 bg-[var(--card)] rounded-lg border border-[var(--border)] transition-all hover:bg-[var(--muted)]/20 ${isPending ? 'opacity-60' : ''}`}
+            >
+              <input
+                type="checkbox"
+                checked={checkbox.isChecked}
+                onChange={() => handleToggleCheckbox(checkbox.id)}
+                disabled={isPending}
+                className="w-4 h-4 mt-0.5 rounded border-[var(--border)] bg-[var(--input)] text-[var(--primary)] cursor-pointer disabled:cursor-not-allowed disabled:opacity-50"
+              />
+              <div className="flex-1 min-w-0">
+                <div className={`text-sm font-mono ${checkbox.isChecked ? 'line-through text-[var(--muted-foreground)]' : 'text-[var(--foreground)]'}`}>
+                  {checkbox.text}
+                </div>
+                <div className="text-xs text-[var(--muted-foreground)] font-mono mt-1 flex items-center gap-1">
+                  <span>📅</span>
+                  {formatDate(checkbox.date)}
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      ) : (
+        <div className="text-sm text-[var(--muted-foreground)] font-mono italic p-3 bg-[var(--muted)]/20 rounded-lg border border-dashed border-[var(--border)]">
+          Aucun todo relié à cette tâche
+        </div>
+      )}
+
+      {/* Section d'ajout */}
+      <div className="pt-2 border-t border-[var(--border)]/50">
+        {!showAddForm ? (
+          <Button
+            type="button"
+            variant="ghost"
+            size="sm"
+            onClick={() => setShowAddForm(true)}
+            className="w-full justify-center text-[var(--muted-foreground)] hover:text-[var(--foreground)]"
+          >
+            <span className="mr-2">+</span>
+            Ajouter un todo
+          </Button>
+        ) : (
+          <div className="space-y-3">
+            <div className="flex items-center justify-between">
+              <div className="text-sm font-mono font-medium text-[var(--muted-foreground)]">
+                Nouveau todo
+              </div>
+              <Button
+                type="button"
+                variant="ghost"
+                size="sm"
+                onClick={() => {
+                  setShowAddForm(false);
+                  setNewTodoText('');
+                  setNewTodoDate('');
+                }}
+                className="text-[var(--muted-foreground)] hover:text-[var(--foreground)] px-2"
+              >
+                ✕
+              </Button>
+            </div>
+            
+            <Input
+              placeholder="Texte du todo..."
+              value={newTodoText}
+              onChange={(e) => setNewTodoText(e.target.value)}
+              disabled={isPending}
+              autoFocus
+            />
+
+            <div className="flex gap-2">
+              <Input
+                type="date"
+                value={newTodoDate}
+                onChange={(e) => setNewTodoDate(e.target.value)}
+                disabled={isPending}
+                placeholder="Date (optionnel)"
+                className="flex-1"
+              />
+              <Button
+                type="button"
+                variant="primary"
+                size="sm"
+                onClick={handleAddTodo}
+                disabled={!newTodoText.trim() || isPending}
+              >
+                {isPending ? 'Ajout...' : 'Ajouter'}
+              </Button>
+            </div>
+
+            {!newTodoDate && (
+              <div className="text-xs text-[var(--muted-foreground)] font-mono">
+                💡 Sans date, le todo sera ajouté à aujourd&apos;hui
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

services/tasks.ts

@@ -1,5 +1,5 @@
 import { prisma } from './database';
-import { Task, TaskStatus, TaskPriority, TaskSource, BusinessError } from '@/lib/types';
+import { Task, TaskStatus, TaskPriority, TaskSource, BusinessError, DailyCheckbox, DailyCheckboxType } from '@/lib/types';
 import { Prisma } from '@prisma/client';
 
 /**
@@ -185,6 +185,50 @@ export class TasksService {
     return this.updateTask(taskId, { status: newStatus });
   }
 
+  /**
+   * Récupère les daily checkboxes liées à une tâche
+   */
+  async getTaskRelatedCheckboxes(taskId: string): Promise<DailyCheckbox[]> {
+    const checkboxes = await prisma.dailyCheckbox.findMany({
+      where: { taskId: taskId },
+      include: { task: true },
+      orderBy: [
+        { date: 'desc' },
+        { order: 'asc' }
+      ]
+    });
+
+    return checkboxes.map(checkbox => ({
+      id: checkbox.id,
+      date: checkbox.date,
+      text: checkbox.text,
+      isChecked: checkbox.isChecked,
+      type: checkbox.type as DailyCheckboxType,
+      order: checkbox.order,
+      taskId: checkbox.taskId ?? undefined,
+      task: checkbox.task ? {
+        id: checkbox.task.id,
+        title: checkbox.task.title,
+        description: checkbox.task.description ?? undefined,
+        status: checkbox.task.status as TaskStatus,
+        priority: checkbox.task.priority as TaskPriority,
+        source: checkbox.task.source as TaskSource,
+        sourceId: checkbox.task.sourceId ?? undefined,
+        tags: [], // Les tags ne sont pas nécessaires dans ce contexte
+        dueDate: checkbox.task.dueDate ?? undefined,
+        completedAt: checkbox.task.completedAt ?? undefined,
+        createdAt: checkbox.task.createdAt,
+        updatedAt: checkbox.task.updatedAt,
+        jiraProject: checkbox.task.jiraProject ?? undefined,
+        jiraKey: checkbox.task.jiraKey ?? undefined,
+        jiraType: checkbox.task.jiraType ?? undefined,
+        assignee: checkbox.task.assignee ?? undefined
+      } : undefined,
+      createdAt: checkbox.createdAt,
+      updatedAt: checkbox.updatedAt
+    }));
+  }
+
   /**
    * Récupère les statistiques des tâches
    */

src/actions/daily.ts

@@ -1,7 +1,7 @@
 'use server';
 
 import { dailyService } from '@/services/daily';
-import { UpdateDailyCheckboxData, DailyCheckbox } from '@/lib/types';
+import { UpdateDailyCheckboxData, DailyCheckbox, CreateDailyCheckboxData } from '@/lib/types';
 import { revalidatePath } from 'next/cache';
 
 /**
@@ -198,6 +198,40 @@ export async function deleteCheckbox(checkboxId: string): Promise<{
   }
 }
 
+/**
+ * Ajoute un todo lié à une tâche
+ */
+export async function addTodoToTask(taskId: string, text: string, date?: Date): Promise<{
+  success: boolean;
+  data?: DailyCheckbox;
+  error?: string;
+}> {
+  try {
+    const targetDate = date || new Date();
+    targetDate.setHours(0, 0, 0, 0);
+
+    const checkboxData: CreateDailyCheckboxData = {
+      date: targetDate,
+      text: text.trim(),
+      type: 'task',
+      taskId: taskId,
+      isChecked: false
+    };
+
+    const checkbox = await dailyService.addCheckbox(checkboxData);
+    
+    revalidatePath('/daily');
+    revalidatePath('/kanban');
+    return { success: true, data: checkbox };
+  } catch (error) {
+    console.error('Erreur addTodoToTask:', error);
+    return {
+      success: false,
+      error: error instanceof Error ? error.message : 'Erreur inconnue'
+    };
+  }
+}
+
 /**
  * Réorganise les checkboxes d'une date
  */

src/app/api/tasks/[id]/checkboxes/route.ts

@@ -0,0 +1,28 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { tasksService } from '@/services/tasks';
+
+export async function GET(
+    request: NextRequest,
+    { params }: { params: Promise<{ id: string }> }
+) {
+  try {
+    const { id } = await params;
+    
+    if (!id) {
+      return NextResponse.json(
+        { error: 'ID de tâche requis' },
+        { status: 400 }
+      );
+    }
+
+    const checkboxes = await tasksService.getTaskRelatedCheckboxes(id);
+
+    return NextResponse.json({ data: checkboxes });
+  } catch (error) {
+    console.error('Erreur lors de la récupération des checkboxes:', error);
+    return NextResponse.json(
+      { error: 'Erreur lors de la récupération des checkboxes' },
+      { status: 500 }
+    );
+  }
+}