Add date-aware time slot picker for rescheduling

Enhanced TimeSlotPickerModal with:
- Date selection via date input and navigation arrows
- Passed time slots filtered out (only show future slots for today)
- Complete schedule picker (date + time in one modal)
- Dynamic slot availability based on selected date
- Better UX with date/time sections clearly separated

Updated AdminConsulting to:
- Use editSessionDate when opening time slot picker
- Pass selected date back from modal to parent
- Handle date changes during rescheduling

Fixes the issue where admins could only select time slots for the original
session date, not the new rescheduled date.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
dwindown
2025-12-31 18:01:52 +07:00
parent ad7b6130b1
commit c6b45378f3
2 changed files with 202 additions and 81 deletions

View File

@@ -132,11 +132,12 @@ export default function AdminConsulting() {
setDialogOpen(true);
};
const handleTimeSlotSelect = (startTime: string, endTime: string, totalBlocks: number, totalDuration: number) => {
const handleTimeSlotSelect = (startTime: string, endTime: string, totalBlocks: number, totalDuration: number, selectedDate: string) => {
setEditStartTime(startTime);
setEditEndTime(endTime);
setEditTotalBlocks(totalBlocks);
setEditTotalDuration(totalDuration);
setEditSessionDate(selectedDate);
setTimeSlotPickerOpen(false);
};
@@ -1089,7 +1090,7 @@ export default function AdminConsulting() {
<TimeSlotPickerModal
open={timeSlotPickerOpen}
onClose={() => setTimeSlotPickerOpen(false)}
selectedDate={parseISO(selectedSession.session_date)}
selectedDate={parseISO(editSessionDate || selectedSession.session_date)}
initialStartTime={editStartTime}
initialEndTime={editEndTime}
onSave={handleTimeSlotSelect}