ATTUNE-HEART-THERAPY/website
6
0
Fork 0
Code Issues 7 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Refactor appointment detail and booking components to implement time slot sorting by predefined order. Enhance the display of selected slots by grouping and sorting them by date and time, improving clarity and user experience across admin and user inte… #45

Merged
Hammond merged 1 commits from feat/booking-panel into master 2025-12-04 10:48:54 +00:00
Conversation 0 Commits 1 Files Changed 3 +123 -83
3 changed files with 123 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
app/(admin)/admin/booking/[id]/page.tsx
View File

@ -413,6 +413,13 @@ export default function AppointmentDetailPage() {
evening: "Evening",
};
// Time slot order: morning, afternoon (lunchtime), evening
const timeSlotOrder: Record<string, number> = {
morning: 0,
afternoon: 1,
evening: 2,
};
// Group slots by date
const slotsByDate: Record<string, typeof appointment.selected_slots> = {};
appointment.selected_slots.forEach((slot: any) => {
@ -423,9 +430,24 @@ export default function AppointmentDetailPage() {
slotsByDate[date].push(slot);
});
// Sort dates and slots within each date
const sortedDates = Object.keys(slotsByDate).sort((a, b) => {
return new Date(a).getTime() - new Date(b).getTime();
});
return (
<div className="space-y-4">
{Object.entries(slotsByDate).map(([date, slots]) => (
{sortedDates.map((date) => {
// Sort slots within this date by time slot order
const slots = slotsByDate[date].sort((a: any, b: any) => {
const aSlot = String(a.time_slot).toLowerCase().trim();
const bSlot = String(b.time_slot).toLowerCase().trim();
const aOrder = timeSlotOrder[aSlot] ?? 999;
const bOrder = timeSlotOrder[bSlot] ?? 999;
return aOrder - bOrder;
});
return (
<div key={date} className={`p-4 rounded-xl border ${isDark ? "bg-gray-700/50 border-gray-600" : "bg-gray-50 border-gray-200"}`}>
<div className="mb-3">
<p className={`text-base font-semibold ${isDark ? "text-white" : "text-gray-900"}`}>
@ -452,7 +474,8 @@ export default function AppointmentDetailPage() {
})}
</div>
</div>
))}
);
})}
</div>
);
})()}

56
app/(pages)/book-now/page.tsx
View File

@ -154,12 +154,23 @@ export default function BookNowPage() {
}
});
// Convert Map values to array and sort by day number
// Time slot order: morning, afternoon (lunchtime), evening
const timeSlotOrder: Record<string, number> = {
morning: 0,
afternoon: 1,
evening: 2,
};
// Convert Map values to array, sort slots, and sort by day number
return Array.from(dayMap.values())
.map(day => ({
day: day.day,
dayName: day.dayName,
availableSlots: Array.from(day.availableSlots),
availableSlots: Array.from(day.availableSlots).sort((a, b) => {
const aOrder = timeSlotOrder[a.toLowerCase().trim()] ?? 999;
const bOrder = timeSlotOrder[b.toLowerCase().trim()] ?? 999;
return aOrder - bOrder;
}),
}))
.sort((a, b) => a.day - b.day);
}
@ -172,6 +183,13 @@ export default function BookNowPage() {
: (weeklyAvailability as any)?.week;
if (weekArray && Array.isArray(weekArray)) {
// Time slot order: morning, afternoon (lunchtime), evening
const timeSlotOrder: Record<string, number> = {
morning: 0,
afternoon: 1,
evening: 2,
};
return weekArray
.filter(day => {
const dayNum = Number(day.day);
@ -186,7 +204,11 @@ export default function BookNowPage() {
.map(day => ({
day: Number(day.day),
dayName: day.day_name || 'Unknown',
availableSlots: day.available_slots || [],
availableSlots: (day.available_slots || []).sort((a: string, b: string) => {
const aOrder = timeSlotOrder[String(a).toLowerCase().trim()] ?? 999;
const bOrder = timeSlotOrder[String(b).toLowerCase().trim()] ?? 999;
return aOrder - bOrder;
}),
}))
.sort((a, b) => a.day - b.day);
}
@ -752,34 +774,6 @@ export default function BookNowPage() {
<p className={`text-xs ${isDark ? 'text-gray-400' : 'text-gray-500'} mb-3`}>
Select one or more day-time combinations that work for you. You can select multiple time slots for the same day (e.g., Monday Morning and Monday Evening).
</p>
{/* Selected Slots Summary */}
{formData.selectedSlots && formData.selectedSlots.length > 0 && (
<div className={`mb-4 p-3 rounded-lg border ${isDark ? 'bg-gray-800/50 border-gray-700' : 'bg-rose-50/50 border-rose-200'}`}>
<p className={`text-xs font-medium mb-2 ${isDark ? 'text-gray-300' : 'text-gray-700'}`}>
Selected: {formData.selectedSlots.length} time slot{formData.selectedSlots.length !== 1 ? 's' : ''}
</p>
<div className="flex flex-wrap gap-1.5">
{formData.selectedSlots.map((slot, idx) => {
const dayNames = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
const timeSlotLabels: Record<string, string> = {
morning: "Morning",
afternoon: "Lunchtime",
evening: "Evening",
};
const dayName = dayNames[slot.day] || `Day ${slot.day}`;
const timeLabel = timeSlotLabels[String(slot.time_slot).toLowerCase()] || slot.time_slot;
return (
<span
key={idx}
className={`px-2 py-1 rounded text-xs font-medium ${isDark ? 'bg-rose-600/30 text-rose-300 border border-rose-500/30' : 'bg-rose-100 text-rose-700 border border-rose-200'}`}
>
{dayName} {timeLabel}
</span>
);
})}
</div>
</div>
)}
<div className="space-y-4">
{availableDaysOfWeek.map((dayInfo, dayIndex) => {
// Ensure day is always a valid number (already validated in useMemo)

27
app/(user)/user/appointments/[id]/page.tsx
View File

@ -352,6 +352,13 @@ export default function UserAppointmentDetailPage() {
evening: "Evening",
};
// Time slot order: morning, afternoon (lunchtime), evening
const timeSlotOrder: Record<string, number> = {
morning: 0,
afternoon: 1,
evening: 2,
};
// Group slots by date
const slotsByDate: Record<string, typeof appointment.selected_slots> = {};
appointment.selected_slots.forEach((slot: any) => {
@ -362,9 +369,24 @@ export default function UserAppointmentDetailPage() {
slotsByDate[date].push(slot);
});
// Sort dates and slots within each date
const sortedDates = Object.keys(slotsByDate).sort((a, b) => {
return new Date(a).getTime() - new Date(b).getTime();
});
return (
<div className="space-y-4">
{Object.entries(slotsByDate).map(([date, slots]) => (
{sortedDates.map((date) => {
// Sort slots within this date by time slot order
const slots = slotsByDate[date].sort((a: any, b: any) => {
const aSlot = String(a.time_slot).toLowerCase().trim();
const bSlot = String(b.time_slot).toLowerCase().trim();
const aOrder = timeSlotOrder[aSlot] ?? 999;
const bOrder = timeSlotOrder[bSlot] ?? 999;
return aOrder - bOrder;
});
return (
<div key={date} className={`p-4 rounded-xl border ${isDark ? "bg-gray-700/50 border-gray-600" : "bg-gray-50 border-gray-200"}`}>
<div className="mb-3">
<p className={`text-base font-semibold ${isDark ? "text-white" : "text-gray-900"}`}>
@ -391,7 +413,8 @@ export default function UserAppointmentDetailPage() {
})}
</div>
</div>
))}
);
})}
</div>
);
})()}