Merge branch 'CorrectionCalendarFormat' into 'main'

Correction de l'erreur sur la date de début du mois pour le calendrier,...

See merge request !11

src/components/Calendar.jsx

 import React, { useState } from 'react';
-import { format, addMonths, subMonths, startOfMonth, endOfMonth, eachDayOfInterval, isSameDay } from 'date-fns';
+import { format, addMonths, subMonths, startOfMonth, endOfMonth, eachDayOfInterval, getDay, isSameDay } from 'date-fns';
 import { enUS } from 'date-fns/locale';
 import { ChevronLeft, ChevronRight } from 'lucide-react';
 
@@ -15,6 +15,8 @@ const Calendar = () => {
     end: endOfMonth(currentDate),
   });
 
+  const startDay = getDay(startOfMonth(currentDate)); 
+
   return (
     <div className="space-y-6">
       <div className="bg-violet-100 rounded-2xl p-6">
@@ -33,7 +35,7 @@ const Calendar = () => {
         </div>
 
         <div className="grid grid-cols-7 gap-2 text-center mb-2">
-          {['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'].map(day => (
+          {['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'].map(day => (
             <div key={day} className="text-sm font-medium text-violet-800">
               {day}
             </div>
@@ -41,6 +43,10 @@ const Calendar = () => {
         </div>
 
         <div className="grid grid-cols-7 gap-2">
+          {[...Array(startDay)].map((_, index) => (
+            <div key={`empty-${index}`} className="p-2"></div>
+          ))}
+          
           {days.map(day => {
             const isSelected = isSameDay(day, selectedDate);