+ {/* Appointment Information Card */}
+
+
+
+
+ Appointment Information
+
+
+
+
+
+
+ Full Name
+
+
+ {appointment.first_name} {appointment.last_name}
+
+
+
+
+
+ Email Address
+
+
+
+ {appointment.email}
+
+
+
+
+ {appointment.phone && (
+
+
+
+ Phone Number
+
+
+
+ {appointment.phone}
+
+
+
+
+ )}
+
+
+
+
+ {/* Scheduled Appointment Details */}
+ {appointment.scheduled_datetime && (
+
+
+
+
+ Scheduled Appointment
+
+
+
+
+
+
+
+
+
+ {formatDate(appointment.scheduled_datetime)}
+
+
+
+
+
+ {formatTime(appointment.scheduled_datetime)}
+
+
+ {appointment.scheduled_duration && (
+
+
•
+
+ {appointment.meeting_duration_display || `${appointment.scheduled_duration} minutes`}
+
+
+ )}
+
+
+
+
+
+ )}
+
+ {/* Preferred Dates & Times */}
+ {((appointment.preferred_dates && (Array.isArray(appointment.preferred_dates) ? appointment.preferred_dates.length > 0 : appointment.preferred_dates)) ||
+ (appointment.preferred_time_slots && (Array.isArray(appointment.preferred_time_slots) ? appointment.preferred_time_slots.length > 0 : appointment.preferred_time_slots))) && (
+
+
+
+ Preferred Availability
+
+
+
+ {appointment.preferred_dates && (
+
+
+ Preferred Dates
+
+
+ {Array.isArray(appointment.preferred_dates) ? (
+ (appointment.preferred_dates as string[]).map((date, idx) => (
+
+ {formatShortDate(date)}
+
+ ))
+ ) : (
+
+ {appointment.preferred_dates_display || appointment.preferred_dates || 'N/A'}
+
+ )}
+
+
+ )}
+ {appointment.preferred_time_slots && (
+
+
+ Preferred Time Slots
+
+
+ {Array.isArray(appointment.preferred_time_slots) ? (
+ (appointment.preferred_time_slots as string[]).map((slot, idx) => {
+ const timeSlotLabels: Record = {
+ morning: "Morning",
+ afternoon: "Lunchtime",
+ evening: "Evening",
+ };
+ const normalizedSlot = String(slot).toLowerCase().trim();
+ return (
+
+ {timeSlotLabels[normalizedSlot] || slot}
+
+ );
+ })
+ ) : (
+
+ {appointment.preferred_time_slots_display || appointment.preferred_time_slots || 'N/A'}
+
+ )}
+
+
+ )}
+
+
+ )}
+
+ {/* Matching Availability */}
+ {appointment.matching_availability && Array.isArray(appointment.matching_availability) && appointment.matching_availability.length > 0 && (
+
+
+
+
+ Matching Availability
+ {appointment.are_preferences_available !== undefined && (
+
+ {appointment.are_preferences_available ? "Available" : "Partially Available"}
+
+ )}
+
+
+
+
+ {appointment.matching_availability.map((match: any, idx: number) => (
+
+
+
+
+ {match.day_name || "Unknown Day"}
+
+
+ {formatShortDate(match.date || match.date_obj || "")}
+
+
+
+ {match.available_slots && Array.isArray(match.available_slots) && match.available_slots.length > 0 && (
+
+ {match.available_slots.map((slot: string, slotIdx: number) => {
+ const timeSlotLabels: Record = {
+ morning: "Morning",
+ afternoon: "Lunchtime",
+ evening: "Evening",
+ };
+ const normalizedSlot = String(slot).toLowerCase().trim();
+ return (
+
+ {timeSlotLabels[normalizedSlot] || slot}
+
+ );
+ })}
+
+ )}
+
+ ))}
+
+
+
+ )}
+
+ {/* Reason */}
+ {appointment.reason && (
+
+
+
+
+ Reason for Appointment
+
+
+
+
+ {appointment.reason}
+
+
+
+ )}
+
+ {/* Rejection Reason */}
+ {appointment.rejection_reason && (
+
+
+
+ Rejection Reason
+
+
+
+
+ {appointment.rejection_reason}
+
+
+
+ )}
+
+ {/* Meeting Information */}
+ {appointment.jitsi_meet_url && (
+
+
+
+
+ Video Meeting
+
+
+
+ {appointment.jitsi_room_id && (
+
+
+ Meeting Room ID
+
+
+
+ {appointment.jitsi_room_id}
+
+
+
+
+ )}
+
+ {appointment.can_join_meeting !== undefined && (
+
+
+
+ {appointment.can_join_meeting ? "Meeting is active - You can join now" : "Meeting is not available yet"}
+
+
+ )}
+
+
+ )}
+