feat: replace Input with DateTimeInput component in forms and modals

- Updated CreateTaskForm, TaskBasicFields, and EditCheckboxModal to use DateTimeInput for date selection, enhancing consistency and user experience.
- Improved UI by integrating lucide-react Calendar icon in DateTimeInput for better visual feedback.
- Marked EditModal task color issue as complete in TODO.md.

TODO.md

@@ -18,7 +18,7 @@
 - [x] **Icônes agenda et filtres** - Améliorer les icônes de l'agenda et des filtres dans desktop controls (utiliser une lib) <!-- Clock pour échéance, Settings pour filtres, Search visuelle -->
 - [x] **Réunion/tâche design** - Revoir le design des bouton dans dailySectrion : les toggles avoir un compposant ui
 - [x] **Légende calendrier et padding** - Corriger l'espacement et la légende du calendrier dans daily
-- [ ] **EditModal task couleur calendrier** - Problème de couleur en ajout de taches dans tous les icones calendriers; colmler au thème
+- [x] **EditModal task couleur calendrier** - Problème de couleur en ajout de taches dans tous les icones calendriers; colmler au thème
 - [ ] **Weekly deux boutons actualiser** - Corriger la duplication des boutons d'actualisation
 - [ ] **Settings : tag icônes actions** - Icônes trop petites dans les actions des tags
 - [ ] **Settings intégration : icônes** - Problème avec les icônes "Arrêté" et "Actif" : doivent etre les memes

src/components/daily/EditCheckboxModal.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { useState, useEffect } from 'react';
+import { CheckSquare2, Calendar } from 'lucide-react';
 import { DailyCheckbox, DailyCheckboxType, Task } from '@/lib/types';
 import { Button } from '@/components/ui/Button';
 import { Input } from '@/components/ui/Input';
@@ -9,8 +10,9 @@ import { TagDisplay } from '@/components/ui/TagDisplay';
 import { Card } from '@/components/ui/Card';
 import { SearchInput } from '@/components/ui/SearchInput';
 import { StatusBadge } from '@/components/ui/StatusBadge';
+import { ToggleButton } from '@/components/ui/ToggleButton';
+import { DateTimeInput } from '@/components/ui/DateTimeInput';
 import { tasksClient } from '@/clients/tasks-client';
-import { formatDateForDateTimeInput, parseDateTimeInput } from '@/lib/date-utils';
 
 interface EditCheckboxModalProps {
   checkbox: DailyCheckbox;
@@ -135,43 +137,38 @@ export function EditCheckboxModal({
             Type
           </label>
           <div className="flex gap-2">
-            <Button
+            <ToggleButton
-              type="button"
-              onClick={() => setType('task')}
-              variant="ghost"
-              size="sm"
-              className={`flex items-center gap-2 border-l-4 ${
-                type === 'task' 
-                  ? 'border-l-green-500 bg-green-500/30 text-white font-medium' 
-                  : 'border-l-green-300 hover:border-l-green-400 opacity-70 hover:opacity-90'
-              }`}
-            >
-              ✅ Tâche
-            </Button>
-            <Button
-              type="button"
               onClick={() => setType('meeting')}
-              variant="ghost"
+              variant="primary"
               size="sm"
-              className={`flex items-center gap-2 border-l-4 ${
+              isActive={type === 'meeting'}
-                type === 'meeting' 
+              icon={<Calendar size={14} />}
-                  ? 'border-l-blue-500 bg-blue-500/30 text-white font-medium' 
-                  : 'border-l-blue-300 hover:border-l-blue-400 opacity-70 hover:opacity-90'
-              }`}
             >
-              🗓️ Réunion
+              <span className="text-sm">Réunion</span>
-            </Button>
+            </ToggleButton>
+            <ToggleButton
+              onClick={() => setType('task')}
+              variant="primary"
+              size="sm"
+              isActive={type === 'task'}
+              icon={<CheckSquare2 size={14} />}
+            >
+              <span className="text-sm">Tâche</span>
+            </ToggleButton>
           </div>
         </div>
 
         {/* Date/Heure */}
-        <Input
+        <div>
-          label="Date/Heure"
+          <label className="block text-sm font-medium text-[var(--foreground)] mb-2">
-          type="datetime-local"
+            Date/Heure
-          value={formatDateForDateTimeInput(date)}
+          </label>
-          onChange={(e) => setDate(parseDateTimeInput(e.target.value))}
+          <DateTimeInput
+            value={date}
+            onChange={(newDate) => newDate && setDate(newDate)}
             disabled={saving}
           />
+        </div>
 
         {/* Liaison tâche (pour tous les types) */}
         <div>

src/components/forms/CreateTaskForm.tsx

@@ -5,10 +5,10 @@ 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 { DateTimeInput } from '@/components/ui/DateTimeInput';
 import { TaskPriority, TaskStatus } from '@/lib/types';
 import { CreateTaskData } from '@/clients/tasks-client';
 import { getAllStatuses, getAllPriorities } from '@/lib/status-config';
-import { formatDateForDateTimeInput, parseDateTimeInput } from '@/lib/date-utils';
 
 interface CreateTaskFormProps {
   isOpen: boolean;
@@ -149,16 +149,20 @@ export function CreateTaskForm({ isOpen, onClose, onSubmit, loading = false }: C
         </div>
 
         {/* Date d'échéance */}
-        <Input
+        <div>
-          label="Date d'échéance"
+          <label className="block text-sm font-medium text-[var(--foreground)] mb-2">
-          type="datetime-local"
+            Date d&apos;échéance
-          value={formData.dueDate ? formatDateForDateTimeInput(formData.dueDate) : ''}
+          </label>
-          onChange={(e) => setFormData((prev: CreateTaskData) => ({ 
+          <DateTimeInput
+            value={formData.dueDate}
+            onChange={(newDate) => setFormData((prev: CreateTaskData) => ({ 
               ...prev, 
-            dueDate: e.target.value ? parseDateTimeInput(e.target.value) : undefined 
+              dueDate: newDate
             }))}
             disabled={loading}
+            placeholder="Sélectionner une date d'échéance..."
           />
+        </div>
 
         {/* Tags */}
         <div className="space-y-3">

src/components/forms/task/TaskBasicFields.tsx

@@ -1,9 +1,10 @@
 'use client';
 
 import { Input } from '@/components/ui/Input';
+import { DateTimeInput } from '@/components/ui/DateTimeInput';
 import { TaskPriority, TaskStatus } from '@/lib/types';
 import { getAllStatuses, getAllPriorities } from '@/lib/status-config';
-import { ensureDate, formatDateForDateTimeInput } from '@/lib/date-utils';
+import { ensureDate } from '@/lib/date-utils';
 
 interface TaskBasicFieldsProps {
   title: string;
@@ -107,16 +108,17 @@ export function TaskBasicFields({
       </div>
 
       {/* Date d'échéance */}
-      <Input
+      <div>
-        label="Date d'échéance"
+        <label className="block text-sm font-medium text-[var(--foreground)] mb-2">
-        type="datetime-local"
+          Date d&apos;échéance
-        value={(() => {
+        </label>
-          const date = ensureDate(dueDate);
+        <DateTimeInput
-          return date ? formatDateForDateTimeInput(date) : '';
+          value={ensureDate(dueDate) ?? undefined}
-        })()}
+          onChange={(newDate) => onDueDateChange(newDate)}
-        onChange={(e) => onDueDateChange(e.target.value ? new Date(e.target.value) : undefined)}
           disabled={loading}
+          placeholder="Sélectionner une date d'échéance..."
         />
+      </div>
     </>
   );
 }

src/components/ui/DateTimeInput.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { Calendar } from 'lucide-react';
 import { formatDateForDateTimeInput, parseDateTimeInput } from '@/lib/date-utils';
 
 interface DateTimeInputProps {
@@ -25,6 +26,11 @@ export function DateTimeInput({
   };
 
   return (
+    <div className={`relative flex items-center ${className}`}>
+      <Calendar 
+        size={16} 
+        className="absolute left-3 text-[var(--muted-foreground)] pointer-events-none z-10" 
+      />
       <input
         type="datetime-local"
         value={value ? formatDateForDateTimeInput(value) : ''}
@@ -32,7 +38,13 @@ export function DateTimeInput({
         onFocus={onFocus}
         disabled={disabled}
         placeholder={placeholder}
-      className={`bg-transparent border-none outline-none text-[var(--muted-foreground)] font-mono text-xs flex-shrink min-w-0 ${className}`}
+        className="w-full pl-10 pr-3 py-2 border border-[var(--border)] rounded-md bg-[var(--input)] text-[var(--foreground)] placeholder-[var(--muted-foreground)] focus:outline-none focus:ring-2 focus:ring-[var(--primary)] focus:border-[var(--primary)] disabled:opacity-50 disabled:cursor-not-allowed font-mono text-sm [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-datetime-edit-ampm-field]:hidden [&::-webkit-inner-spin-button]:hidden [&::-webkit-outer-spin-button]:hidden"
+        style={{
+          colorScheme: 'light',
+          WebkitAppearance: 'none',
+          MozAppearance: 'textfield'
+        }}
       />
+    </div>
   );
 }