timeslots API

apps/web/components/DateSelector.tsx

@@ -1,34 +1,46 @@
 import React from 'react';
 import { Calendar } from 'lucide-react';
+import { useTranslations } from 'next-intl';
 
 interface CalendarDay {
   date: string;
   day: number;
   month: string;
   dayName: string;
+  available: boolean;
 }
 
 interface DateSelectorProps {
   selectedDate: string;
+  availableDates: string[];
   onDateChange: (date: string) => void;
+  loading?: boolean;
 }
 
 const DateSelector: React.FC<DateSelectorProps> = ({
   selectedDate,
+  availableDates,
   onDateChange,
+  loading = false,
 }) => {
+  const t = useTranslations('bookingForm');
+
   const generateCalendarDays = (): CalendarDay[] => {
     const today = new Date();
-    const days = [];
+    const days: CalendarDay[] = [];
     
-    for (let i = 0; i < 14; i++) {
+    // Show 30 days instead of 14 for better selection
+    for (let i = 0; i < 30; i++) {
       const date = new Date(today);
       date.setDate(today.getDate() + i);
+      const dateString = date.toISOString().split('T')[0] || '';
+      
       days.push({
-        date: date.toISOString().split('T')[0],
+        date: dateString,
         day: date.getDate(),
         month: date.toLocaleDateString('en', { month: 'short' }),
-        dayName: date.toLocaleDateString('en', { weekday: 'short' })
+        dayName: date.toLocaleDateString('en', { weekday: 'short' }),
+        available: availableDates.includes(dateString)
       });
     }
     return days;
@@ -40,26 +52,37 @@ const DateSelector: React.FC<DateSelectorProps> = ({
     <div className="bg-white rounded-xl p-6 shadow-sm">
       <h2 className="text-xl font-semibold text-gray-900 mb-4 flex items-center gap-2">
         <Calendar className="w-5 h-5" />
-        Choose Date
+        {t('chooseDate')}
       </h2>
-      <div className="grid grid-cols-7 gap-2 md:gap-3">
-        {calendarDays.map((day) => (
-          <button
-            key={day.date}
-            type="button"
-            onClick={() => onDateChange(day.date)}
-            className={`p-3 rounded-lg text-center transition-all ${
-              selectedDate === day.date
-                ? 'bg-blue-500 text-white'
-                : 'bg-gray-100 hover:bg-gray-200 text-gray-700'
-            }`}
-          >
-            <div className="text-xs font-medium">{day.dayName}</div>
-            <div className="text-sm font-semibold">{day.day}</div>
-            <div className="text-xs">{day.month}</div>
-          </button>
-        ))}
-      </div>
+      
+      {loading ? (
+        <div className="flex justify-center items-center py-8">
+          <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-blue-600"></div>
+          <span className="ml-2 text-gray-600">Loading available dates...</span>
+        </div>
+      ) : (
+        <div className="grid grid-cols-7 gap-2 md:gap-3">
+          {calendarDays.map((day) => (
+            <button
+              key={day.date}
+              type="button"
+              onClick={() => day.available && onDateChange(day.date)}
+              disabled={!day.available}
+              className={`p-3 rounded-lg text-center transition-all ${
+                !day.available
+                  ? 'bg-gray-50 text-gray-300 cursor-not-allowed'
+                  : selectedDate === day.date
+                  ? 'bg-blue-500 text-white'
+                  : 'bg-gray-100 hover:bg-gray-200 text-gray-700'
+              }`}
+            >
+              <div className="text-xs font-medium">{day.dayName}</div>
+              <div className="text-sm font-semibold">{day.day}</div>
+              <div className="text-xs">{day.month}</div>
+            </button>
+          ))}
+        </div>
+      )}
     </div>
   );
 };