feature/IO-3255-simplified-parts-management - Beef Up Change Request Parser, add Change Request documentation data

client/src/components/job-at-change/schedule-event.component.jsx

@@ -424,6 +424,9 @@ export function ScheduleEventComponent({
 
   // Adjust event color for dark mode if needed
   const getEventBackground = () => {
+    if (event?.block) {
+      return "var(--event-block-bg)"; // Use a specific color for dark mode
+    }
     const baseColor = event.color && event.color.hex ? event.color.hex : event.color || "var(--event-bg-fallback)";
     // Optionally adjust color for dark mode (e.g., lighten if too dark)
     return baseColor;

client/src/components/schedule-calendar-wrapper/schedule-calendar-header.component.jsx

@@ -212,6 +212,10 @@ export function ScheduleCalendarHeaderComponent({ bodyshop, label, refetch, date
     return bodyshop.workingdays[day];
   };
 
+  const blocked = isDayBlocked.length > 0;
+  const headerStyle = blocked ? { color: "#fff" } : { color: isShopOpen(date) ? "" : "tomato" };
+  const headerClass = `imex-calendar-header-card ${blocked ? "imex-calendar-header-card--blocked" : ""}`.trim();
+
   return (
     <div className="imex-calendar-load">
       <ScheduleBlockDay alreadyBlocked={isDayBlocked.length > 0} date={date} refetch={refetch}>

client/src/components/schedule-calendar-wrapper/schedule-calendar.styles.scss

@@ -26,6 +26,37 @@
   background-color: var(--event-block-bg);
 }
 
+/* Ensure readable text when fallback background is used */
+.imex-event-fallback,
+.imex-event-fallback .rbc-event-content,
+.imex-event-fallback .rbc-event-label,
+.imex-event-fallback a {
+  color: var(--card-text-fallback) !important;
+}
+
+/* Optional subtle border to distinguish on white backgrounds */
+.imex-event-fallback {
+  border: 1px solid var(--bar-border-color);
+}
+
+/* Header day card styling */
+.imex-calendar-header-card {
+  display: inline-block;
+  padding: 0.15rem 0.35rem;
+  border-radius: 0.25rem;
+}
+
+.imex-calendar-header-card--blocked {
+  background-color: var(--event-block-bg);
+  color: #ffffff;
+}
+
+.imex-calendar-header-card--blocked a,
+.imex-calendar-header-card--blocked span,
+.imex-calendar-header-card--blocked .ant-typography {
+  color: #ffffff;
+}
+
 .rbc-month-view {
   // height: 125rem;
 }

client/src/components/schedule-calendar-wrapper/scheduler-calendar-wrapper.component.jsx

@@ -37,17 +37,39 @@ export function ScheduleCalendarWrapperComponent({
   const history = useNavigate();
   const { t } = useTranslation();
 
+  // Determine current view to compute styles consistently
+  const currentView = search.view || defaultView || "week";
+
   const handleEventPropStyles = (event, start, end, isSelected) => {
+    const hasColor = Boolean(event?.color?.hex || event?.color);
+    const useBg = currentView !== "agenda";
+
+    // Prioritize explicit blocked-day background to ensure red in all themes
+    let bg;
+    if (useBg) {
+      if (event?.block) {
+        bg = "var(--event-block-bg)";
+      } else if (hasColor) {
+        bg = event?.color?.hex ?? event?.color;
+      } else {
+        bg = "var(--event-bg-fallback)";
+      }
+    }
+
+    const usedFallback = !hasColor && !event?.block; // only mark as fallback when not blocked
+
+    const classes = [
+      "imex-event",
+      event.arrived && "imex-event-arrived",
+      event.block && "imex-event-block",
+      usedFallback && "imex-event-fallback"
+    ]
+      .filter(Boolean)
+      .join(" ");
+
     return {
-      ...(event.color && !((search.view || defaultView) === "agenda")
-        ? {
-            style: {
-              backgroundColor:
-                event.color && event.color.hex ? event.color.hex : event.color || "var(--event-bg-fallback)"
-            }
-          }
-        : {}),
-      className: `${event.arrived ? "imex-event-arrived" : ""} ${event.block ? "imex-event-block" : ""}`
+      ...(bg ? { style: { backgroundColor: bg } } : {}),
+      className: classes
     };
   };