Frontend Release to Main [4.68]

src/actions/userManagement.js

@@ -263,9 +263,7 @@ export const updateUserFinalDayStatusIsSet = (user, status, finalDayDate, isSet)
       // Prepare patch data
       const patchData = {
         status,
-        endDate: finalDayDate
-          ? moment.utc(finalDayDate).format('YYYY-MM-DD')
-          : undefined,
+        endDate: finalDayDate ? new Date(finalDayDate) : undefined,
         isSet,
       };
 
@@ -286,6 +284,29 @@ export const updateUserFinalDayStatusIsSet = (user, status, finalDayDate, isSet)
   };
 };
 
+export const updateUserFinalDay = (user, finalDayDate, isSet) => {
+  return async dispatch => {
+    try {
+      const patchData = {
+        endDate: finalDayDate ? new Date(finalDayDate) : undefined,
+        isSet,
+      };
+      const response = await axios.patch(ENDPOINTS.UPDATE_USER_FINAL_DAY(user._id), patchData);
+
+      const updatedUserProfile = {
+        ...user,
+        ...response.data,
+      };
+
+      dispatch(userProfileUpdateAction(updatedUserProfile));
+    } catch (error) {
+      toast.error('Error updating user profile:', error);
+      throw new Error('Failed to update user profile.');
+    }
+  };
+};
+
+
 /**
  * fetching all user profiles basic info
  */

src/components/CommunityPortal/Calendar/CalendarActivitySection.jsx

@@ -16,21 +16,23 @@ function CalendarActivitySection() {
         darkMode ? styles.calendarActivitySectionDarkMode : ''
       }`}
     >
-      <h2 className={`activity-header ${darkMode ? 'activity-header-dark-mode' : ''}`}>
+      <h2 className={`${styles.activityHeader} ${darkMode ? styles.activityHeaderDark : ''}`}>
         Latest News
       </h2>
       <ul className={styles.calendarActivityList}>
         {calendarActivities.map(activity => (
           <li
             key={activity.id}
             className={`${styles.calendarActivityItem} ${
-              darkMode ? styles.calendarActivityItemDarkMode : ''
+              darkMode ? styles.calendarActivityItemDark : ''
             }`}
           >
-            <p className={`activity-message ${darkMode ? styles.activityMessageDarkMode : ''}`}>
+            <p
+              className={`${styles.activityMessage} ${darkMode ? styles.activityMessageDark : ''}`}
+            >
               <strong>{activity.author}</strong>: {activity.message}
             </p>
-            <small className={`activity-time ${darkMode ? styles.activityTimeDarkMode : ''}`}>
+            <small className={`${styles.activityTime} ${darkMode ? styles.activityTimeDark : ''}`}>
               {activity.time}
             </small>
           </li>

src/components/CommunityPortal/Calendar/CommunityCalendar.jsx

@@ -12,6 +12,7 @@ const TIMES = ['10:00 AM', '1:00 PM', '3:00 PM', '5:00 PM'];
 
 function CommunityCalendar() {
   const [filter, setFilter] = useState({ type: 'all', location: 'all', status: 'all' });
+  const [selectedDate, setSelectedDate] = useState(new Date());
   const [selectedEvent, setSelectedEvent] = useState(null);
   const [showEventModal, setShowEventModal] = useState(false);
   const [overflowDate, setOverflowDate] = useState(null);
@@ -74,6 +75,40 @@ function CommunityCalendar() {
     eventCache,
   ]);
 
+  const selectedDateEvents = useMemo(() => {
+    const dateKey = selectedDate?.toDateString();
+    if (!dateKey) {
+      return [];
+    }
+    return filteredEvents.filter(event => event.date.toDateString() === dateKey);
+  }, [filteredEvents, selectedDate]);
+
+  const formattedSelectedDate = useMemo(() => {
+    if (!selectedDate) {
+      return '';
+    }
+    return selectedDate.toLocaleDateString(undefined, {
+      weekday: 'long',
+      month: 'long',
+      day: 'numeric',
+      year: 'numeric',
+    });
+  }, [selectedDate]);
+
+  const handleDateSelect = useCallback(
+    date => {
+      setSelectedDate(date);
+      const eventsForDate = getEventsForDate(date);
+      if (eventsForDate.length > 0) {
+        setSelectedEvent(eventsForDate[0]);
+      } else {
+        setSelectedEvent(null);
+      }
+      setShowEventModal(false);
+    },
+    [getEventsForDate],
+  );
+
   const handleEventClick = useCallback(event => {
     setSelectedEvent(event);
     setShowEventModal(true);
@@ -107,6 +142,27 @@ function CommunityCalendar() {
     return () => document.removeEventListener('mousedown', handleClickOutside);
   }, []);
 
+  useEffect(() => {
+    const eventsForDate = getEventsForDate(selectedDate);
+    if (eventsForDate.length === 0) {
+      if (selectedEvent !== null) {
+        setSelectedEvent(null);
+      }
+      if (showEventModal) {
+        setShowEventModal(false);
+      }
+      return;
+    }
+
+    const hasSelectedEvent = eventsForDate.some(event => event.id === selectedEvent?.id);
+    if (!hasSelectedEvent) {
+      setSelectedEvent(eventsForDate[0]);
+      if (showEventModal) {
+        setShowEventModal(false);
+      }
+    }
+  }, [getEventsForDate, selectedDate, selectedEvent, showEventModal]);
+
   const statusMap = {
     New: 'statusNew',
     'Needs Attendees': 'statusNeedsAttendees',
@@ -158,9 +214,17 @@ function CommunityCalendar() {
   );
 
   const tileClassName = useCallback(
-    ({ date, view }) =>
-      view === 'month' && eventCountByDate.has(date.toDateString()) ? styles.hasEvents : null,
-    [eventCountByDate],
+    ({ date, view }) => {
+      const classNames = [];
+      if (view === 'month' && eventCountByDate.has(date.toDateString())) {
+        classNames.push(styles.hasEvents);
+      }
+      if (view === 'month' && selectedDate && date.toDateString() === selectedDate.toDateString()) {
+        classNames.push(styles.selectedDate);
+      }
+      return classNames.join(' ') || null;
+    },
+    [eventCountByDate, selectedDate],
   );
 
   const handleFilterChange = field => e =>
@@ -199,6 +263,57 @@ function CommunityCalendar() {
 
   return (
     <div className={calendarClasses.container}>
+      {/* Inline styles to ensure selected date number is visible in dark mode - force dark background */}
+      {darkMode && (
+        <style>
+          {`
+            /* CRITICAL: Force dark background on selected date in dark mode - override ALL react-calendar defaults */
+            .react-calendar__tile.selectedDate,
+            .react-calendar__tile.selectedDate.react-calendar__tile--active,
+            .react-calendar__tile.react-calendar__tile--active.selectedDate {
+              background-color: #1a2332 !important;
+              background: #1a2332 !important;
+              color: #ffffff !important;
+            }
+            .react-calendar__tile.selectedDate:hover,
+            .react-calendar__tile.selectedDate.react-calendar__tile--active:hover,
+            .react-calendar__tile.react-calendar__tile--active.selectedDate:hover {
+              background-color: #1a2332 !important;
+              background: #1a2332 !important;
+              color: #ffffff !important;
+            }
+            /* Force white text on dark background */
+            .react-calendar__tile.selectedDate abbr,
+            .react-calendar__tile.selectedDate abbr[title],
+            .react-calendar__tile.selectedDate > abbr,
+            .react-calendar__tile.selectedDate.react-calendar__tile--active abbr,
+            .react-calendar__tile.react-calendar__tile--active.selectedDate abbr {
+              color: #ffffff !important;
+              font-weight: 900 !important;
+              font-size: 1.2em !important;
+              text-shadow: 
+                0 0 8px rgba(255, 255, 255, 1),
+                0 0 10px rgba(255, 255, 255, 0.9),
+                0 2px 4px rgba(0, 0, 0, 1),
+                0 4px 8px rgba(0, 0, 0, 0.9) !important;
+              -webkit-text-stroke: 0.6px rgba(255, 255, 255, 1) !important;
+              filter: brightness(1.8) contrast(1.5) !important;
+              opacity: 1 !important;
+            }
+            .react-calendar__tile.selectedDate:hover abbr,
+            .react-calendar__tile.selectedDate:hover abbr[title],
+            .react-calendar__tile.selectedDate.react-calendar__tile--active:hover abbr {
+              color: #ffffff !important;
+              filter: brightness(1.8) contrast(1.5) !important;
+              opacity: 1 !important;
+            }
+            /* But preserve event item colors */
+            .react-calendar__tile.selectedDate .eventItem {
+              color: inherit !important;
+            }
+          `}
+        </style>
+      )}
       <header className={calendarClasses.header}>
         <h1>Community Calendar</h1>
         <div className={calendarClasses.filters}>
@@ -235,14 +350,81 @@ function CommunityCalendar() {
               className={calendarClasses.reactCalendar}
               tileContent={tileContent}
               tileClassName={tileClassName}
+              onClickDay={handleDateSelect}
+              value={selectedDate}
             />
+            <section
+              className={`${styles.selectedDatePanel} ${
+                darkMode ? styles.selectedDatePanelDarkMode : ''
+              }`}
+              aria-live="polite"
+            >
+              <div className={styles.selectedDateHeader}>
+                <div>
+                  <h2>{formattedSelectedDate || 'Select a date'}</h2>
+                  <p className={styles.selectedDateSummary}>
+                    {(() => {
+                      if (selectedDateEvents.length === 0) {
+                        return 'No events scheduled for this date';
+                      }
+                      const eventText = selectedDateEvents.length === 1 ? 'event' : 'events';
+                      return `${selectedDateEvents.length} ${eventText} scheduled`;
+                    })()}
+                  </p>
+                </div>
+              </div>
+
+              {selectedDateEvents.length > 0 ? (
+                <ul className={styles.selectedEventList}>
+                  {selectedDateEvents.map(event => {
+                    const isActive = selectedEvent?.id === event.id;
+                    return (
+                      <li key={event.id}>
+                        <article
+                          className={`${styles.selectedEventCard} ${
+                            darkMode ? styles.selectedEventCardDarkMode : ''
+                          } ${isActive ? styles.selectedEventCardActive : ''}`}
+                        >
+                          <header className={styles.selectedEventHeader}>
+                            <div>
+                              <h3>{event.title}</h3>
+                              <div className={styles.selectedEventMeta}>
+                                <span>{event.time}</span>
+                                <span>{event.location}</span>
+                                <span>{event.type}</span>
+                                <span>{event.status}</span>
+                              </div>
+                            </div>
+                            <button
+                              type="button"
+                              className={styles.eventDetailButton}
+                              onClick={() => handleEventClick(event)}
+                            >
+                              View full details
+                            </button>
+                          </header>
+                          <p className={styles.selectedEventDescription}>{event.description}</p>
+                        </article>
+                      </li>
+                    );
+                  })}
+                </ul>
+              ) : (
+                <div className={styles.noEventsMessage}>
+                  <p>Select a different date or adjust the filters to see scheduled events.</p>
+                </div>
+              )}
+            </section>
           </div>
         </div>
       </main>
 
       {/* Overflow popup */}
       {overflowDate && (
-        <div ref={popupRef} className={styles.overflowPopup}>
+        <div
+          ref={popupRef}
+          className={`${styles.overflowPopup} ${darkMode ? styles.overflowPopupDark : ''}`}
+        >
           <div className={styles.overflowPopupInner}>
             <h4>{overflowDate.toDateString()}</h4>
             {getEventsForDate(overflowDate).map(e => (