feat: add super admin creation, enhance date handling, and improve UI components

app/admin/page.tsx

@@ -268,6 +268,7 @@ export default function AdminPage() {
                   type="number"
                   value={hoursInput}
                   onChange={(e) => setHoursInput(e.target.value)}
+                  min="0"
                   required
                 />
               </div>
@@ -278,6 +279,8 @@ export default function AdminPage() {
                   type="number"
                   value={minutesInput}
                   onChange={(e) => setMinutesInput(e.target.value)}
+                  min="0"
+                  max="59"
                   required
                 />
               </div>
@@ -359,7 +362,7 @@ export default function AdminPage() {
             </div>
           )}
           <div className="mt-4">
-            <h2 className="text-lg font-bold">Totaux par utilisateur</h2>
+            <h5 className="text-lg font-bold">Totaux par utilisateur</h5>
             <Table>
               <TableHeader>
                 <TableRow>
@@ -449,7 +452,7 @@ export default function AdminPage() {
                   id="newRole"
                   value={newRole}
                   onChange={(e) => setNewRole(e.target.value)}
-                  className="w-full p-2 border rounded"
+                  className="w-full p-2 border rounded bg-white text-black dark:bg-stone-800 dark:text-white dark:border-stone-600"
                 >
                   <option value="MEMBER">Membre</option>
                   <option value="ADMIN">Admin</option>

app/dashboard/page.tsx

@@ -20,6 +20,8 @@ import {
   CardHeader,
   CardTitle,
 } from '../../components/ui/card';
+import { DatePicker } from '../../components/ui/date-picker';
+import { format } from 'date-fns';
 
 interface Hour {
   id: number;
@@ -34,7 +36,7 @@ export default function DashboardPage() {
   const { data: session, status } = useSession();
   const router = useRouter();
   const [hours, setHours] = useState<Hour[]>([]);
-  const [date, setDate] = useState('');
+  const [date, setDate] = useState<Date>();
   const [duration, setDuration] = useState('');
   const [reason, setReason] = useState('');
   const [hoursInput, setHoursInput] = useState('');
@@ -66,13 +68,14 @@ export default function DashboardPage() {
   const handleAddHour = async (e: React.FormEvent) => {
     e.preventDefault();
     const totalMinutes = parseInt(hoursInput) * 60 + parseInt(minutesInput);
+    const dateString = date ? format(date, 'yyyy-MM-dd') : '';
     const res = await fetch('/api/hours', {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ date, duration: totalMinutes, reason }),
+      body: JSON.stringify({ date: dateString, duration: totalMinutes, reason }),
     });
     if (res.ok) {
-      setDate('');
+      setDate(undefined);
       setHoursInput('');
       setMinutesInput('');
       setReason('');
@@ -123,13 +126,7 @@ export default function DashboardPage() {
             <form onSubmit={handleAddHour} className="space-y-4">
               <div>
                 <Label htmlFor="date">Date</Label>
-                <Input
-                  id="date"
-                  type="date"
-                  value={date}
-                  onChange={(e) => setDate(e.target.value)}
-                  required
-                />
+                <DatePicker date={date} setDate={setDate} />
               </div>
               <div className="flex space-x-2">
                 <div>
@@ -139,6 +136,7 @@ export default function DashboardPage() {
                     type="number"
                     value={hoursInput}
                     onChange={(e) => setHoursInput(e.target.value)}
+                    min="0"
                     required
                   />
                 </div>
@@ -149,6 +147,8 @@ export default function DashboardPage() {
                     type="number"
                     value={minutesInput}
                     onChange={(e) => setMinutesInput(e.target.value)}
+                    min="0"
+                    max="59"
                     required
                   />
                 </div>

components/Header.tsx

@@ -2,6 +2,7 @@
 
 import { useEffect, useState } from 'react';
 import { useSession, signOut } from 'next-auth/react';
+import { Button } from './ui/button';
 
 interface Settings {
   name: string;
@@ -40,12 +41,12 @@ export default function Header() {
             <span className="text-gray-900 dark:text-white">
               {session.user.email} ({session.user.role})
             </span>
-            <button
-              onClick={() => signOut()}
-              className="bg-red-500 text-white px-3 py-1 rounded"
+            <Button
+                onClick={() => signOut()}
+                variant="destructive"
             >
               Déconnexion
-            </button>
+            </Button>
           </div>
         )}
       </div>

docker-compose.yml

@@ -7,3 +7,4 @@ services:
       - ./data:/app/prisma/data
     environment:
       - NEXTAUTH_SECRET=your_secret_key
+      - NEXTAUTH_URL=http://localhost:3000

scripts/create-super-admin.js

@@ -11,6 +11,8 @@ async function main() {
     update: {},
     create: {
       email: 'test@test.fr',
+      firstName: 'Super',
+      lastName: 'Admin',
       password: hashedPassword,
       role: 'SUPER_ADMIN',
       id: uuidv4(), // Ajout d'un identifiant unique