Test Page

import React, { useState } from ‘react’;
import { Calendar, Clock, Users, Video, Phone, ChevronLeft, ChevronRight } from ‘lucide-react’;
import { Card, CardContent, CardHeader, CardTitle } from ‘@/components/ui/card’;

const families = [
{ id: 1, name: “The Lowry’s”, color: “#FF6B6B” },
{ id: 2, name: “The Zeagman’s”, color: “#4ECDC4” },
{ id: 3, name: “The Gowanlocks”, color: “#45B7D1” }
];

const availabilityTypes = [
{ id: 1, name: “Phone Call”, icon: Phone },
{ id: 2, name: “Video Chat”, icon: Video },
{ id: 3, name: “In Person”, icon: Users }
];

const FamilyAvailabilityDashboard = () => {
const [availabilities, setAvailabilities] = useState([]);
const [selectedFamily, setSelectedFamily] = useState(”);
const [selectedType, setSelectedType] = useState(”);
const [currentDate, setCurrentDate] = useState(new Date());
const [selectedTimeSlots, setSelectedTimeSlots] = useState([]);

const daysInMonth = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 0).getDate();
const firstDayOfMonth = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1).getDay();

const handlePrevMonth = () => {
setCurrentDate(new Date(currentDate.getFullYear(), currentDate.getMonth() – 1, 1));
};

const handleNextMonth = () => {
setCurrentDate(new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 1));
};

const handleDayClick = (day) => {
const dateString = `${currentDate.getFullYear()}-${String(currentDate.getMonth() + 1).padStart(2, ‘0’)}-${String(day).padStart(2, ‘0’)}`;
const existingSlot = selectedTimeSlots.find(slot => slot.date === dateString);
if (existingSlot) {
setSelectedTimeSlots(selectedTimeSlots.filter(slot => slot.date !== dateString));
} else {
setSelectedTimeSlots([…selectedTimeSlots, {
date: dateString,
startTime: 9,
startPeriod: ‘AM’,
endTime: 5,
endPeriod: ‘PM’,
selecting: ‘start’ // Add this to track which time we’re selecting
}]);
}
};

const handleTimeClick = (date, time) => {
setSelectedTimeSlots(prevSlots => {
return prevSlots.map(slot => {
if (slot.date === date) {
if (slot.selecting === ‘start’) {
return { …slot, startTime: time, selecting: ‘end’ };
} else {
return { …slot, endTime: time, selecting: ‘start’ };
}
}
return slot;
});
});
};

const handlePeriodChange = (date, period, isStart) => {
setSelectedTimeSlots(prevSlots => {
return prevSlots.map(slot => {
if (slot.date === date) {
if (isStart) {
return { …slot, startPeriod: period };
} else {
return { …slot, endPeriod: period };
}
}
return slot;
});
});
};

const handleSubmit = () => {
if (!selectedFamily || !selectedType || selectedTimeSlots.length === 0) {
alert(‘Please select a family, availability type, and at least one time slot.’);
return;
}
const newAvailabilities = selectedTimeSlots.map(slot => ({
family: selectedFamily,
type: selectedType,
date: slot.date,
startTime: `${slot.startTime}:00 ${slot.startPeriod}`,
endTime: `${slot.endTime}:00 ${slot.endPeriod}`
}));
setAvailabilities([…availabilities, …newAvailabilities]);
setSelectedFamily(”);
setSelectedType(”);
setSelectedTimeSlots([]);
};

const renderCalendar = () => {
const days = [];
for (let i = 0; i < firstDayOfMonth; i++) { days.push(

);
}
for (let day = 1; day <= daysInMonth; day++) { const dateString = `${currentDate.getFullYear()}-${String(currentDate.getMonth() + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`; const isSelected = selectedTimeSlots.some(slot => slot.date === dateString);
days.push(

);
}
return days;
};

const TimeSlider = ({ date, startTime, startPeriod, endTime, endPeriod, selecting }) => {
return (

);
};

return (

);
};

export default FamilyAvailabilityDashboard;