timeslots API

apps/web/components/TimeSlotSelector.tsx

@@ -1,51 +1,98 @@
 import React from 'react';
 import { Clock } from 'lucide-react';
-
-interface TimeSlot {
-  id: string;
-  start_time: string;
-  end_time: string;
-  available: boolean;
-}
+import { useTranslations } from 'next-intl';
+import { TimeSlot } from '@/types/bookings';
 
 interface TimeSlotSelectorProps {
   timeSlots: TimeSlot[];
   selectedTimeSlot: string;
   onTimeSlotChange: (slotId: string) => void;
+  loading?: boolean;
+  error?: string | null;
 }
 
 const TimeSlotSelector: React.FC<TimeSlotSelectorProps> = ({
   timeSlots,
   selectedTimeSlot,
   onTimeSlotChange,
+  loading = false,
+  error = null,
 }) => {
+  const t = useTranslations('bookingForm');
+
   return (
     <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">
         <Clock className="w-5 h-5" />
-        Available Times
+        {t('availableTimes')}
       </h2>
-      <div className="grid grid-cols-2 md:grid-cols-3 gap-3">
-        {timeSlots.map((slot) => (
-          <button
-            key={slot.id}
-            type="button"
-            disabled={!slot.available}
-            onClick={() => onTimeSlotChange(slot.id)}
-            className={`p-3 rounded-lg text-center transition-all ${
-              !slot.available
-                ? 'bg-gray-100 text-gray-400 cursor-not-allowed'
-                : selectedTimeSlot === slot.id
-                ? 'bg-blue-500 text-white'
-                : 'bg-gray-100 hover:bg-gray-200 text-gray-700'
-            }`}
-          >
-            <div className="font-medium">
-              {slot.start_time} - {slot.end_time}
-            </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 times...</span>
+        </div>
+      ) : error ? (
+        <div className="text-center py-8">
+          <p className="text-gray-600">{error}</p>
+        </div>
+      ) : timeSlots.length === 0 ? (
+        <div className="text-center py-8">
+          <p className="text-gray-600">No available time slots for this date</p>
+        </div>
+      ) : (
+        <div className="grid grid-cols-2 md:grid-cols-3 gap-3">
+          {timeSlots
+            .sort((a, b) => a.start_time.localeCompare(b.start_time))
+            .map((slot) => {
+            const isAvailable = slot.is_active;
+            
+            // Format time to display as '11:30—12:30' in Tbilisi timezone (UTC+4)
+            const formatTime = (time: string) => {
+              // If it's already in HH:MM format, return as is
+              if (time.match(/^\d{2}:\d{2}$/)) {
+                return time;
+              }
+              // If it's ISO format or contains date, extract time portion in Tbilisi timezone
+              if (time.includes('T') || time.includes(' ') || time.includes('Z')) {
+                const date = new Date(time);
+                return date.toLocaleTimeString('en-US', { 
+                  timeZone: 'Asia/Tbilisi',
+                  hour12: false, 
+                  hour: '2-digit', 
+                  minute: '2-digit' 
+                });
+              }
+              return time;
+            };
+
+            const formattedTime = `${formatTime(slot.start_time)}—${formatTime(slot.end_time)}`;
+            
+            return (
+              <button
+                key={slot.id}
+                type="button"
+                disabled={!isAvailable}
+                onClick={() => isAvailable && onTimeSlotChange(slot.id)}
+                className={`p-3 rounded-lg text-center transition-all ${
+                  !isAvailable
+                    ? 'bg-gray-100 text-gray-400 cursor-not-allowed'
+                    : selectedTimeSlot === slot.id
+                    ? 'bg-blue-500 text-white'
+                    : 'bg-gray-100 hover:bg-gray-200 text-gray-700'
+                }`}
+              >
+                <div className="font-medium">
+                  {formattedTime}
+                </div>
+                {!isAvailable && (
+                  <div className="text-xs mt-1">Unavailable</div>
+                )}
+              </button>
+            );
+          })}
+        </div>
+      )}
     </div>
   );
 };