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.

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
-              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"
+            <ToggleButton
               onClick={() => setType('meeting')}
-              variant="ghost"
+              variant="primary"
               size="sm"
-              className={`flex items-center gap-2 border-l-4 ${
-                type === 'meeting' 
-                  ? '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'
-              }`}
+              isActive={type === 'meeting'}
+              icon={<Calendar size={14} />}
             >
-              🗓️ Réunion
-            </Button>
+              <span className="text-sm">Réunion</span>
+            </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
-          label="Date/Heure"
-          type="datetime-local"
-          value={formatDateForDateTimeInput(date)}
-          onChange={(e) => setDate(parseDateTimeInput(e.target.value))}
-          disabled={saving}
-        />
+        <div>
+          <label className="block text-sm font-medium text-[var(--foreground)] mb-2">
+            Date/Heure
+          </label>
+          <DateTimeInput
+            value={date}
+            onChange={(newDate) => newDate && setDate(newDate)}
+            disabled={saving}
+          />
+        </div>
 
         {/* Liaison tâche (pour tous les types) */}
         <div>