Fe/be improve appointments

client/src/components/appointmentCard/AppointmentCard.tsx

@@ -57,6 +57,7 @@ export const AppointmentCard = ({
           lesson={appointment.lesson}
           teacherName={appointment.teacherName}
           price={appointment.price}
+          description={appointment.description}
           weeklySchedule={appointment.weeklySchedule}
           isRegularTeacher={isRegularTeacher}
         />

client/src/components/appointmentCard/AppointmentInfo.tsx

@@ -4,6 +4,7 @@ export type AppointmentInfoProps = {
   lesson?: string;
   teacherName?: string;
   price: string;
+  description?: string;
   weeklySchedule?: WeeklyScheduleSlot[];
   isRegularTeacher?: boolean;
 };
@@ -33,6 +34,7 @@ export const AppointmentInfo = ({
   lesson,
   teacherName,
   price,
+  description,
   weeklySchedule,
   isRegularTeacher = false,
 }: AppointmentInfoProps) => {
@@ -50,6 +52,12 @@ export const AppointmentInfo = ({
         {teacherName || "Teacher"}
       </h3>
 
+      {description && (
+        <div className="text-[12px] md:text-[14px] text-gray-300 mt-1 max-w-full">
+          {description}
+        </div>
+      )}
+
       <div className="text-[14px] md:text-[16px] text-white">
         {price} euro /hour
       </div>

client/src/components/bookingConfirmation/BookingConfirmation.tsx

@@ -28,6 +28,7 @@ export const BookingConfirmation = ({
     selectedSubject,
     selectedLevel,
     selectedPrice,
+    description,
     onSuccess: onSuccessCallback,
   } = payload;
 
@@ -52,6 +53,7 @@ export const BookingConfirmation = ({
         "General Lesson",
       price: selectedPrice?.toString() || teacher.priceFrom?.toString() || "0",
       level: selectedLevel || "",
+      description: description || "",
     };
 
     createAppointment(appointmentData, {
@@ -93,6 +95,11 @@ export const BookingConfirmation = ({
         <p>
           <strong>Price:</strong> €{selectedPrice || teacher?.priceFrom}
         </p>
+        {description && (
+          <p>
+            <strong>Description:</strong> {description}
+          </p>
+        )}
         <p className="text-sm text-gray-600 mt-4">
           The lesson request will be sent to the teacher.
         </p>

client/src/components/regularStudentScheduleModal/RegularStudentScheduleModal.tsx

@@ -3,6 +3,7 @@ import { Button } from "../ui/button/Button";
 import Cross from "../icons/Cross";
 import { SelectComponent } from "../ui/select/Select";
 import { WeeklyScheduleSlot } from "../../types/appointments.types";
+import { useModalStore } from "../../store/modals.store";
 
 interface RegularStudentScheduleModalProps {
   isOpen: boolean;
@@ -40,6 +41,7 @@ const ModalContent = ({
     useState<WeeklyScheduleSlot[]>(initialSavedSlots);
   const [currentDay, setCurrentDay] = useState<string>("Monday");
   const [currentHour, setCurrentHour] = useState<number>(7);
+  const { open: openModal } = useModalStore();
 
   const isDuplicate = savedSlots.some(
     (slot) => slot.day === currentDay && slot.hour === currentHour,
@@ -78,6 +80,15 @@ const ModalContent = ({
   };
 
   const handleSave = () => {
+    if (!hasScheduleChanged) {
+      openModal("alert", {
+        title: "No Changes Made",
+        message:
+          "Please click on 'Add to Schedule' button to add lessons before saving.",
+      });
+      return;
+    }
+
     onSave(savedSlots);
     onClose();
   };
@@ -86,6 +97,27 @@ const ModalContent = ({
     onClose();
   };
 
+  const hasScheduleChanged = (() => {
+    if (savedSlots.length !== initialSavedSlots.length) {
+      return true;
+    }
+
+    const sortSlots = (slots: WeeklyScheduleSlot[]) =>
+      [...slots].sort((a, b) => {
+        if (a.day !== b.day) return a.day.localeCompare(b.day);
+        return a.hour - b.hour;
+      });
+
+    const sortedSaved = sortSlots(savedSlots);
+    const sortedInitial = sortSlots(initialSavedSlots);
+
+    return !sortedSaved.every(
+      (slot, index) =>
+        slot.day === sortedInitial[index]?.day &&
+        slot.hour === sortedInitial[index]?.hour,
+    );
+  })();
+
   return (
     <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
       <div className="bg-[#2A2433] rounded-2xl p-10 w-full max-w-5xl max-h-[85vh] flex flex-col">

client/src/components/teacherAppointmentCard/TeacherAppointmentCard.tsx

@@ -59,6 +59,7 @@ export const TeacherAppointmentCard = ({
           lesson={appointment.lesson}
           studentName={appointment.studentName}
           price={appointment.price}
+          description={appointment.description}
           weeklySchedule={appointment.weeklySchedule}
           isRegularTab={isRegularTab}
         />

client/src/components/teacherAppointmentCard/TeacherAppointmentInfo.tsx

@@ -4,6 +4,7 @@ export type TeacherAppointmentInfoProps = {
   lesson?: string;
   studentName?: string;
   price: string;
+  description?: string;
   weeklySchedule?: WeeklyScheduleSlot[];
   isRegularTab?: boolean;
 };
@@ -33,6 +34,7 @@ export const TeacherAppointmentInfo = ({
   lesson,
   studentName,
   price,
+  description,
   weeklySchedule,
   isRegularTab = false,
 }: TeacherAppointmentInfoProps) => {
@@ -54,6 +56,12 @@ export const TeacherAppointmentInfo = ({
         {price} euro /hour
       </div>
 
+      {description && (
+        <div className="text-[12px] md:text-[14px] text-gray-300 mt-1 max-w-full">
+          {description}
+        </div>
+      )}
+
       {isRegularTab && weeklySchedule && weeklySchedule.length > 0 && (
         <div className="text-[11px] md:text-[13px] text-gray-400 mt-1 max-w-full">
           {formatSchedule(weeklySchedule)}