From bc64fceeef399adc4f4c0b145c476ea8866eb4fb Mon Sep 17 00:00:00 2001
From: Yehia Rasheed <157399068+yehiarasheed@users.noreply.github.com>
Date: Wed, 14 Jan 2026 18:08:06 +0200
Subject: [PATCH 1/3] fix: disable edit button for bazaars that have started

- Add editDisabled prop to EventCard component
- Disable edit button if bazaar startDate and startTime have passed
- Restrict edit access to events_office role only
- Display startTime and endTime in 12-hour format in details dialog
---
 client/src/components/EventCard.tsx           |  3 +
 client/src/components/EventsDetailsDialog.tsx | 17 ++++-
 client/src/pages/EventsOfficeDashboard.tsx    | 70 ++++++++++++++++++-
 3 files changed, 86 insertions(+), 4 deletions(-)

diff --git a/client/src/components/EventCard.tsx b/client/src/components/EventCard.tsx
index 01cf5eb2..bc325694 100644
--- a/client/src/components/EventCard.tsx
+++ b/client/src/components/EventCard.tsx
@@ -160,6 +160,7 @@ export interface EventCardProps {
   onUnarchive?: () => void;
   isUnarchiving?: boolean;
   onEdit?: () => void;
+  editDisabled?: boolean;
   canDelete?: boolean;
   className?: string;
   allowCancellation?: boolean;
@@ -205,6 +206,7 @@ export default function EventCard({
   onUnarchive,
   isUnarchiving = false,
   onEdit,
+  editDisabled = false,
   canDelete = false,
   status,
   className,
@@ -1069,6 +1071,7 @@ export default function EventCard({
                       <Button
                         className="flex-1 order-2"
                         onClick={() => onEdit()}
+                        disabled={editDisabled}
                         data-testid={`button-edit-${id}`}
                       >
                         <Edit className="h-4 w-4 mr-1" />
diff --git a/client/src/components/EventsDetailsDialog.tsx b/client/src/components/EventsDetailsDialog.tsx
index 12def15f..97653b66 100644
--- a/client/src/components/EventsDetailsDialog.tsx
+++ b/client/src/components/EventsDetailsDialog.tsx
@@ -79,8 +79,21 @@ export default function EventDetailsDialog({
     });
   };
 
+  const formatStringTime = (timeStr?: string) => {
+    if (!timeStr) return null;
+    if (/^\d{1,2}:\d{2}$/.test(timeStr)) {
+      const [hoursStr, minutesStr] = timeStr.split(":");
+      let hours = parseInt(hoursStr, 10);
+      const suffix = hours >= 12 ? "PM" : "AM";
+      hours = hours % 12;
+      hours = hours ? hours : 12;
+      return `${hours}:${minutesStr} ${suffix}`;
+    }
+    return timeStr;
+  };
+
   const startTime =
-    event.startTime ||
+    formatStringTime(event.startTime) ||
     (event.startDate
       ? new Date(event.startDate).toLocaleTimeString("en-US", {
           hour: "2-digit",
@@ -88,7 +101,7 @@ export default function EventDetailsDialog({
         })
       : null);
   const endTime =
-    event.endTime ||
+    formatStringTime(event.endTime) ||
     (event.endDate
       ? new Date(event.endDate).toLocaleTimeString("en-US", {
           hour: "2-digit",
diff --git a/client/src/pages/EventsOfficeDashboard.tsx b/client/src/pages/EventsOfficeDashboard.tsx
index 3d9c3c54..604a75cc 100644
--- a/client/src/pages/EventsOfficeDashboard.tsx
+++ b/client/src/pages/EventsOfficeDashboard.tsx
@@ -1433,6 +1433,32 @@ export default function EventsOfficeDashboard() {
                             eventEndDate &&
                             eventEndDate.getTime() < now.getTime();
 
+                          // Check if event has started (for disabling edit)
+                          let isStarted = false;
+                          if (event.eventType === "trip" && event.startDate) {
+                            const tripStartDate = new Date(event.startDate);
+                            if (tripStartDate <= now) {
+                              isStarted = true;
+                            }
+                          } else if (
+                            event.eventType === "bazaar" &&
+                            event.startDate
+                          ) {
+                            const bazaarStart = new Date(event.startDate);
+                            if (
+                              event.startTime &&
+                              /^\d{1,2}:\d{2}$/.test(event.startTime)
+                            ) {
+                              const [h, m] = event.startTime
+                                .split(":")
+                                .map(Number);
+                              bazaarStart.setHours(h, m, 0, 0);
+                            }
+                            if (bazaarStart <= now) {
+                              isStarted = true;
+                            }
+                          }
+
                           return (
                             <div key={event._id || index} className="h-full">
                               <EventCard
@@ -1514,6 +1540,7 @@ export default function EventsOfficeDashboard() {
                                 onDelete={() => handleDeleteEvent(event._id)}
                                 hideRegisterButton={true}
                                 onViewDetails={() => handleCardClick(event._id)}
+                                editDisabled={isStarted}
                                 {...(isPastEvent
                                   ? {
                                       onArchive: () =>
@@ -1525,7 +1552,8 @@ export default function EventsOfficeDashboard() {
                                         "conference",
                                         "bazaar",
                                         "workshop",
-                                      ].includes(event.eventType)
+                                      ].includes(event.eventType) &&
+                                      userRole === "events_office"
                                     ? {
                                         onEdit: () => {
                                           if (event.eventType === "workshop") {
@@ -1554,13 +1582,51 @@ export default function EventsOfficeDashboard() {
                                             setLocation(
                                               `/events-office/events/trip/edit/${event._id}`
                                             );
+                                          } else if (
+                                            event.eventType === "bazaar"
+                                          ) {
+                                            if (event.startDate) {
+                                              const now = new Date();
+                                              const bazaarStart = new Date(
+                                                event.startDate
+                                              );
+
+                                              if (
+                                                event.startTime &&
+                                                /^\d{1,2}:\d{2}$/.test(
+                                                  event.startTime
+                                                )
+                                              ) {
+                                                const [h, m] = event.startTime
+                                                  .split(":")
+                                                  .map(Number);
+                                                bazaarStart.setHours(
+                                                  h,
+                                                  m,
+                                                  0,
+                                                  0
+                                                );
+                                              }
+
+                                              if (bazaarStart <= now) {
+                                                toast({
+                                                  title: "Cannot Edit Bazaar",
+                                                  description:
+                                                    "Cannot edit a bazaar that has already started.",
+                                                  variant: "destructive",
+                                                });
+                                                return;
+                                              }
+                                            }
+                                            setLocation(
+                                              `/create/bazaar?id=${event._id}`
+                                            );
                                           } else {
                                             const editRoutes: Record<
                                               string,
                                               string
                                             > = {
                                               conference: `/events-office/events/conference/edit/${event._id}`,
-                                              bazaar: `/create/bazaar?id=${event._id}`,
                                             };
                                             const route =
                                               editRoutes[event.eventType];

From 4fda06014f5b477a1ab582e85bd5a3711f9aa4df Mon Sep 17 00:00:00 2001
From: Yehia Rasheed <157399068+yehiarasheed@users.noreply.github.com>
Date: Wed, 14 Jan 2026 18:50:37 +0200
Subject: [PATCH 2/3] fix: format workshop start and end times to 12-hour
 format

---
 client/src/pages/WorkshopApprovals.tsx | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/client/src/pages/WorkshopApprovals.tsx b/client/src/pages/WorkshopApprovals.tsx
index 7df6800f..0af2f637 100644
--- a/client/src/pages/WorkshopApprovals.tsx
+++ b/client/src/pages/WorkshopApprovals.tsx
@@ -326,14 +326,27 @@ export default function WorkshopApprovals() {
   const endDateStr = selectedWorkshop
     ? formatWorkshopDate(selectedWorkshop.endDate)
     : "";
+  const formatStringTime = (timeStr?: string) => {
+    if (!timeStr) return null;
+    if (/^\d{1,2}:\d{2}$/.test(timeStr)) {
+      const [hoursStr, minutesStr] = timeStr.split(":");
+      let hours = parseInt(hoursStr, 10);
+      const suffix = hours >= 12 ? "PM" : "AM";
+      hours = hours % 12;
+      hours = hours ? hours : 12;
+      return `${hours}:${minutesStr} ${suffix}`;
+    }
+    return timeStr;
+  };
+
   const startTimeStr = selectedWorkshop
-    ? selectedWorkshop.startTime ||
+    ? formatStringTime(selectedWorkshop.startTime) ||
       (selectedWorkshop.startDate
         ? formatWorkshopTime(selectedWorkshop.startDate)
         : "")
     : "";
   const endTimeStr = selectedWorkshop
-    ? selectedWorkshop.endTime ||
+    ? formatStringTime(selectedWorkshop.endTime) ||
       (selectedWorkshop.endDate
         ? formatWorkshopTime(selectedWorkshop.endDate)
         : "")

From 868e22f44c8b9564e423e1632e1079cc7bfebe83 Mon Sep 17 00:00:00 2001
From: Yehia Rasheed <157399068+yehiarasheed@users.noreply.github.com>
Date: Wed, 14 Jan 2026 19:40:36 +0200
Subject: [PATCH 3/3] fix: improve cancel button styling in EventCard component

---
 client/src/components/EventCard.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/EventCard.tsx b/client/src/components/EventCard.tsx
index bc325694..8deee2a8 100644
--- a/client/src/components/EventCard.tsx
+++ b/client/src/components/EventCard.tsx
@@ -1900,7 +1900,7 @@ export default function EventCard({
                 e.preventDefault();
                 executeCancellation();
               }}
-              className="bg-red-600 hover:bg-red-700 text-white"
+              className="bg-red-600 hover:bg-red-700 text-white focus-visible:ring-0 border-0"
             >
               {isCanceling ? "Canceling..." : "Yes, Cancel"}
             </AlertDialogAction>