307 lines
11 KiB
TypeScript
307 lines
11 KiB
TypeScript
"use client";
|
|
|
|
import React, { useState, useEffect } from 'react';
|
|
import { Button } from "@/components/ui/button";
|
|
import { Calendar, Clock, CheckCircle, X } from "lucide-react";
|
|
import { colors } from '@/lib/colors';
|
|
import { supabase } from '@/lib/supabaseClient';
|
|
|
|
interface AppointmentSlot {
|
|
date: Date;
|
|
time: string;
|
|
available: boolean;
|
|
booked: boolean;
|
|
}
|
|
|
|
interface AppointmentCalendarProps {
|
|
onSlotSelect: (date: Date, time: string) => void;
|
|
selectedSlot?: { date: Date; time: string } | null;
|
|
}
|
|
|
|
export default function AppointmentCalendar({ onSlotSelect, selectedSlot }: AppointmentCalendarProps) {
|
|
const [availableSlots, setAvailableSlots] = useState<AppointmentSlot[]>([]);
|
|
const [loading, setLoading] = useState(false);
|
|
|
|
// Generate available time slots (2-hour slots, Mo-Fr 9-17 Uhr)
|
|
const generateTimeSlots = () => {
|
|
const slots = [];
|
|
for (let hour = 9; hour <= 15; hour += 2) {
|
|
slots.push(`${hour.toString().padStart(2, '0')}:00`);
|
|
}
|
|
return slots;
|
|
};
|
|
|
|
// Generate available dates for the next 4 weeks
|
|
const generateAvailableDates = () => {
|
|
const dates = [];
|
|
const today = new Date();
|
|
let currentDate = new Date(today);
|
|
|
|
// Start from next Monday if today is weekend
|
|
const dayOfWeek = currentDate.getDay();
|
|
if (dayOfWeek === 0) { // Sunday
|
|
currentDate.setDate(currentDate.getDate() + 1);
|
|
} else if (dayOfWeek === 6) { // Saturday
|
|
currentDate.setDate(currentDate.getDate() + 2);
|
|
}
|
|
|
|
for (let i = 0; i < 28; i++) {
|
|
const date = new Date(currentDate);
|
|
date.setDate(date.getDate() + i);
|
|
|
|
// Only include weekdays (Monday = 1, Friday = 5)
|
|
if (date.getDay() >= 1 && date.getDay() <= 5) {
|
|
dates.push(date);
|
|
}
|
|
}
|
|
return dates;
|
|
};
|
|
|
|
// Generate available slots (with Supabase integration)
|
|
const generateAvailableSlots = async () => {
|
|
const dates = generateAvailableDates();
|
|
const timeSlots = generateTimeSlots();
|
|
const slots: AppointmentSlot[] = [];
|
|
|
|
try {
|
|
// Get booked appointments from Supabase - look for termin_datum column
|
|
const { data: bookedAppointments, error } = await supabase
|
|
.from('kunden_projekte')
|
|
.select('termin_datum')
|
|
.not('termin_datum', 'is', null);
|
|
|
|
if (error) {
|
|
console.error('Error fetching booked appointments:', error);
|
|
console.log('Falling back to all available slots');
|
|
// Fallback to all available
|
|
dates.forEach(date => {
|
|
timeSlots.forEach(time => {
|
|
slots.push({
|
|
date: new Date(date),
|
|
time,
|
|
available: true,
|
|
booked: false
|
|
});
|
|
});
|
|
});
|
|
} else {
|
|
console.log('Found booked appointments:', bookedAppointments);
|
|
console.log('Number of booked appointments:', bookedAppointments?.length || 0);
|
|
|
|
// Create a set of booked times for quick lookup
|
|
const bookedTimes = new Set();
|
|
bookedAppointments?.forEach(appointment => {
|
|
if (appointment.termin_datum) {
|
|
const appointmentDate = new Date(appointment.termin_datum);
|
|
console.log('Processing booked appointment:', appointment.termin_datum);
|
|
console.log('Appointment date object:', appointmentDate);
|
|
console.log('Appointment hours:', appointmentDate.getHours());
|
|
console.log('Appointment local time:', appointmentDate.toLocaleString('de-DE'));
|
|
|
|
// Use local time consistently - don't convert to UTC
|
|
const year = appointmentDate.getFullYear();
|
|
const month = appointmentDate.getMonth();
|
|
const day = appointmentDate.getDate();
|
|
const hours = appointmentDate.getHours();
|
|
|
|
// Create time string using local time components
|
|
const dateString = `${year}-${(month + 1).toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`;
|
|
const hourString = hours.toString().padStart(2, '0') + ':00';
|
|
const timeString = `${dateString}T${hourString}:00:00`;
|
|
bookedTimes.add(timeString);
|
|
console.log('Booked appointment found (local time):', timeString);
|
|
}
|
|
});
|
|
|
|
console.log('All booked time strings:', Array.from(bookedTimes));
|
|
|
|
// Generate slots with availability check
|
|
dates.forEach(date => {
|
|
timeSlots.forEach(time => {
|
|
const [hours] = time.split(':').map(Number);
|
|
// Create slot datetime in local time
|
|
const slotDateTime = new Date(date.getFullYear(), date.getMonth(), date.getDate(), hours, 0, 0, 0);
|
|
|
|
// Create time string using local time components (same as booked appointments)
|
|
const year = slotDateTime.getFullYear();
|
|
const month = slotDateTime.getMonth();
|
|
const day = slotDateTime.getDate();
|
|
const slotHours = slotDateTime.getHours();
|
|
|
|
const dateString = `${year}-${(month + 1).toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`;
|
|
const hourString = slotHours.toString().padStart(2, '0') + ':00';
|
|
const timeString = `${dateString}T${hourString}:00:00`;
|
|
|
|
const isBooked = bookedTimes.has(timeString);
|
|
|
|
console.log(`Slot ${dateString} ${time}:`, {
|
|
slotDateTime: slotDateTime.toISOString(),
|
|
timeString,
|
|
isBooked,
|
|
bookedTimes: Array.from(bookedTimes)
|
|
});
|
|
|
|
if (isBooked) {
|
|
console.log('Slot is booked:', timeString);
|
|
}
|
|
|
|
slots.push({
|
|
date: new Date(date),
|
|
time,
|
|
available: !isBooked,
|
|
booked: isBooked
|
|
});
|
|
});
|
|
});
|
|
}
|
|
} catch (err) {
|
|
console.error('Error checking availability:', err);
|
|
// Fallback to all available
|
|
dates.forEach(date => {
|
|
timeSlots.forEach(time => {
|
|
slots.push({
|
|
date: new Date(date),
|
|
time,
|
|
available: true,
|
|
booked: false
|
|
});
|
|
});
|
|
});
|
|
}
|
|
|
|
setAvailableSlots(slots);
|
|
};
|
|
|
|
useEffect(() => {
|
|
setLoading(true);
|
|
// Simulate loading time
|
|
setTimeout(() => {
|
|
generateAvailableSlots();
|
|
setLoading(false);
|
|
}, 500);
|
|
}, []);
|
|
|
|
// Group slots by date
|
|
const groupedSlots = availableSlots.reduce((groups, slot) => {
|
|
const dateKey = slot.date.toISOString().split('T')[0];
|
|
if (!groups[dateKey]) {
|
|
groups[dateKey] = [];
|
|
}
|
|
groups[dateKey].push(slot);
|
|
return groups;
|
|
}, {} as Record<string, AppointmentSlot[]>);
|
|
|
|
const formatDate = (date: Date) => {
|
|
return new Intl.DateTimeFormat('de-DE', {
|
|
weekday: 'short',
|
|
day: '2-digit',
|
|
month: '2-digit'
|
|
}).format(date);
|
|
};
|
|
|
|
const isSlotSelected = (slot: AppointmentSlot) => {
|
|
if (!selectedSlot) return false;
|
|
return selectedSlot.date.toISOString().split('T')[0] === slot.date.toISOString().split('T')[0] &&
|
|
selectedSlot.time === slot.time;
|
|
};
|
|
|
|
return (
|
|
<div className="w-full max-w-md mx-auto">
|
|
<div
|
|
className="p-6 rounded-2xl shadow-lg backdrop-blur-sm"
|
|
style={{ backgroundColor: `${colors.background}F0` }}
|
|
>
|
|
<div className="flex items-center space-x-3 mb-6">
|
|
<Calendar className="w-6 h-6" style={{ color: colors.primary }} />
|
|
<h3 className="text-xl font-bold" style={{ color: colors.primary }}>
|
|
Termin auswählen
|
|
</h3>
|
|
</div>
|
|
|
|
{loading ? (
|
|
<div className="text-center py-8">
|
|
<div className="animate-spin rounded-full h-8 w-8 border-b-2 mx-auto mb-4"
|
|
style={{ borderColor: colors.primary }}></div>
|
|
<p style={{ color: colors.secondary }}>Lade verfügbare Termine...</p>
|
|
</div>
|
|
) : (
|
|
<div className="space-y-4">
|
|
{Object.entries(groupedSlots).slice(0, 3).map(([dateKey, slots]) => {
|
|
const date = new Date(dateKey);
|
|
// Show all slots, not just available ones
|
|
const allSlotsForDate = slots;
|
|
|
|
if (allSlotsForDate.length === 0) return null;
|
|
|
|
return (
|
|
<div key={dateKey} className="border rounded-xl p-4"
|
|
style={{ borderColor: colors.tertiary }}>
|
|
<h4 className="font-semibold mb-3" style={{ color: colors.primary }}>
|
|
{formatDate(date)}
|
|
</h4>
|
|
<div className="grid grid-cols-2 gap-2">
|
|
{allSlotsForDate.map((slot, index) => (
|
|
<Button
|
|
key={index}
|
|
variant={isSlotSelected(slot) ? "default" : "outline"}
|
|
size="sm"
|
|
className="flex items-center space-x-2"
|
|
onClick={() => onSlotSelect(slot.date, slot.time)}
|
|
disabled={slot.booked || !slot.available}
|
|
style={{
|
|
backgroundColor: isSlotSelected(slot) ? colors.primary :
|
|
slot.booked ? '#f3f4f6' : 'transparent',
|
|
color: isSlotSelected(slot) ? colors.background :
|
|
slot.booked ? '#9ca3af' : colors.primary,
|
|
borderColor: slot.booked ? '#d1d5db' : colors.tertiary
|
|
}}
|
|
>
|
|
<Clock className="w-4 h-4" />
|
|
<span>{slot.time}</span>
|
|
{isSlotSelected(slot) && <CheckCircle className="w-4 h-4" />}
|
|
{slot.booked && <span className="text-xs">(Gebucht)</span>}
|
|
</Button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
|
|
{selectedSlot && (
|
|
<div className="mt-6 p-4 rounded-xl border-2"
|
|
style={{
|
|
backgroundColor: `${colors.primary}20`,
|
|
borderColor: colors.primary
|
|
}}>
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<p className="font-semibold" style={{ color: colors.primary }}>
|
|
Ausgewählter Termin:
|
|
</p>
|
|
<p className="text-sm" style={{ color: colors.secondary }}>
|
|
{formatDate(selectedSlot.date)} um {selectedSlot.time} Uhr
|
|
</p>
|
|
</div>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => onSlotSelect(new Date(), '')}
|
|
style={{ color: colors.primary }}
|
|
>
|
|
<X className="w-4 h-4" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<div className="mt-4 text-xs text-center" style={{ color: colors.secondary }}>
|
|
<p>• Termine sind 1 Stunden lang</p>
|
|
<p>• Mo-Fr 9:00-17:00 Uhr</p>
|
|
<p>• Nur verfügbare Termine werden angezeigt</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|