@optifye/dashboard-core 6.12.49 → 6.12.50

package/dist/index.mjs

@@ -13791,12 +13791,22 @@ var stripSeconds = (timeStr) => {
   if (!timeStr) return timeStr;
   return timeStr.substring(0, 5);
 };
+var normalizeOffDays = (value) => {
+  if (!value) return [];
+  if (Array.isArray(value)) {
+    return value.map((day) => String(day || "").trim().toLowerCase()).filter(Boolean);
+  }
+  if (Array.isArray(value.off_days)) return normalizeOffDays(value.off_days);
+  if (Array.isArray(value.offDays)) return normalizeOffDays(value.offDays);
+  return [];
+};
 var buildShiftConfigFromOperatingHoursRows = (rows, fallback) => {
   const mapped = (rows || []).map((row) => ({
     shiftId: row.shift_id,
     shiftName: row.shift_name || `Shift ${row.shift_id}`,
     startTime: stripSeconds(row.start_time),
     endTime: stripSeconds(row.end_time),
+    offDays: normalizeOffDays(row.off_days),
     breaks: (() => {
       const raw = Array.isArray(row.breaks) ? row.breaks : Array.isArray(row.breaks?.breaks) ? row.breaks.breaks : [];
       return raw.map((b) => ({
@@ -13856,7 +13866,7 @@ var fetchAndStoreShiftConfig = async (supabase, lineId, fallback) => {
   if (existing) return existing;
   const promise = (async () => {
     try {
-      const { data, error } = await supabase.from("line_operating_hours").select("line_id, shift_id, shift_name, start_time, end_time, breaks, timezone").eq("line_id", lineId);
+      const { data, error } = await supabase.from("line_operating_hours").select("line_id, shift_id, shift_name, start_time, end_time, breaks, timezone, off_days").eq("line_id", lineId);
       if (error) {
         throw new Error(`Failed to fetch shift config: ${error.message}`);
       }
@@ -14549,7 +14559,7 @@ var useMultiLineShiftConfigs = (lineIds, fallbackConfig) => {
           setError(null);
         }
         console.log(`[useMultiLineShiftConfigs] Fetching shift configs for ${missingLineIds.length} lines`);
-        const { data, error: fetchError } = await supabase.from("line_operating_hours").select("line_id, shift_id, shift_name, start_time, end_time, breaks, timezone").in("line_id", missingLineIds);
+        const { data, error: fetchError } = await supabase.from("line_operating_hours").select("line_id, shift_id, shift_name, start_time, end_time, breaks, timezone, off_days").in("line_id", missingLineIds);
         if (fetchError) {
           console.error("[useMultiLineShiftConfigs] Error fetching shift configs:", fetchError);
           throw new Error(`Failed to fetch shift configs: ${fetchError.message}`);
@@ -37779,7 +37789,12 @@ var HourlyOutputChartComponent = ({
   }, [idleBarState.visible, idleBarState.key, idleBarState.shouldAnimate]);
   const maxDataValue = Math.max(...data, 0);
   const numericChartTargets = chartData.map((d) => d.target).filter((target) => target !== null && Number.isFinite(target));
-  const maxTargetValue = Math.max(...numericChartTargets, pphThreshold, 0);
+  const hasAuthoritativeNumericTargets = hasHourlyTargetOutputProp && numericChartTargets.length > 0;
+  const maxTargetValue = Math.max(
+    ...numericChartTargets,
+    hasAuthoritativeNumericTargets ? 0 : pphThreshold,
+    0
+  );
   const maxYValue = Math.max(
     Math.ceil(maxTargetValue * 1.5),
     Math.ceil(maxDataValue * 1.15)
@@ -37934,14 +37949,9 @@ var HourlyOutputChartComponent = ({
     return /* @__PURE__ */ jsx("g", { children: lines });
   }, [hourlyTargetSegments, targetTimelineSegments, SHIFT_DURATION, pphThreshold, targetLineEndOffset, hasHourlyTargetOutputProp]);
   const renderLegend = () => {
-    const uniqueTargets = [...new Set(
-      chartData.map((d) => d.target).filter((target) => target !== null && Number.isFinite(target)).map((target) => Math.round(target))
-    )].sort((a, b) => a - b);
-    const unitLabel = hasHourlyTargetOutputProp ? "units" : "units/hr";
-    const targetText = uniqueTargets.length === 0 ? `Target` : uniqueTargets.length === 1 ? `Target: ${uniqueTargets[0]} ${unitLabel}` : `Target: ${uniqueTargets[0]} - ${uniqueTargets[uniqueTargets.length - 1]} ${unitLabel}`;
     return /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center text-sm text-gray-600 bg-white py-1", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 border border-gray-100 rounded-full px-3 py-1", children: [
       /* @__PURE__ */ jsx("div", { className: "w-8 flex items-center", children: /* @__PURE__ */ jsx("div", { className: "w-full border-t-2 border-[#E34329] border-dashed" }) }),
-      /* @__PURE__ */ jsx("span", { children: targetText })
+      /* @__PURE__ */ jsx("span", { children: "Target" })
     ] }) });
   };
   return /* @__PURE__ */ jsxs(
@@ -52459,6 +52469,106 @@ var getOrdinal = (n) => {
   const v = n % 100;
   return n + (suffix[(v - 20) % 10] || suffix[v] || suffix[0]);
 };
+var resolveDailyTargetOutput = (shiftData) => {
+  if (!shiftData || shiftData.hasData === false) return 0;
+  const target = Number(shiftData?.targetOutput || shiftData?.idealOutput || 0);
+  return Number.isFinite(target) && target > 0 ? target : 0;
+};
+var getUniqueRoundedTargets = (data) => Array.from(new Set(
+  data.map((entry) => Number(entry.targetOutput || 0)).filter((target) => Number.isFinite(target) && target > 0).map((target) => Math.round(target))
+)).sort((a, b) => a - b);
+var formatDailyTargetLegend = (targets) => {
+  if (targets.length === 0) return "";
+  if (targets.length === 1) return `Target: ${targets[0].toLocaleString()} units/day`;
+  return `Target: ${targets[0].toLocaleString()} - ${targets[targets.length - 1].toLocaleString()} units/day`;
+};
+var WEEKDAY_NAMES = ["sunday", "monday", "tuesday", "wednesday", "thursday", "friday", "saturday"];
+var getShiftOffDays = (shiftConfig, selectedShiftId) => {
+  const shift = shiftConfig?.shifts?.find((candidate) => candidate.shiftId === selectedShiftId);
+  const raw = shift?.offDays || shift?.off_days || [];
+  return Array.isArray(raw) ? raw.map((day) => String(day || "").trim().toLowerCase()).filter(Boolean) : [];
+};
+var isScheduledOffDay = (dateKey, shiftConfig, selectedShiftId) => {
+  const offDays = getShiftOffDays(shiftConfig, selectedShiftId);
+  if (offDays.length === 0) return false;
+  const date = parseDateKeyToDate(dateKey);
+  return offDays.includes(WEEKDAY_NAMES[date.getDay()]);
+};
+var renderDailyOutputCapsules = (props, data) => {
+  const { offset, yAxisMap } = props;
+  if (!offset || !yAxisMap || data.length === 0) return null;
+  const { left, width } = offset;
+  const yAxis = yAxisMap.default || yAxisMap[0];
+  if (!Number.isFinite(left) || !Number.isFinite(width) || width <= 0 || !yAxis?.scale) {
+    return null;
+  }
+  const slotWidth = width / data.length;
+  const capsuleWidth = Math.max(10, Math.min(28, slotWidth * 0.44));
+  const radius = capsuleWidth / 2;
+  const baseY = yAxis.scale(0);
+  const capsules = [];
+  data.forEach((entry, index) => {
+    const target = Number(entry.targetOutput || 0);
+    const output = Number(entry.output || 0);
+    if ((!Number.isFinite(target) || target <= 0) && (!Number.isFinite(output) || output <= 0)) return;
+    const x = left + index * slotWidth + (slotWidth - capsuleWidth) / 2;
+    const targetTop = target > 0 ? yAxis.scale(target) : yAxis.scale(output);
+    const capsuleTop = Math.min(targetTop, baseY - 4);
+    const capsuleHeight = Math.max(baseY - capsuleTop, 4);
+    const fillValue = target > 0 ? Math.min(Math.max(output, 0), target) : Math.max(output, 0);
+    const fillTop = fillValue > 0 ? Math.max(yAxis.scale(fillValue), capsuleTop) : baseY;
+    const fillHeight = Math.max(baseY - fillTop, 0);
+    const fillColor = target > 0 ? output >= target ? "#00AB45" : "#E34329" : entry.color || "#6b7280";
+    const trackFill = output >= target ? "#f0fdf4" : "#fff5f3";
+    const trackStroke = output >= target ? "#00AB45" : "#E34329";
+    const clipId = `line-daily-output-capsule-${index}`;
+    capsules.push(
+      /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", { id: clipId, children: /* @__PURE__ */ jsx(
+          "rect",
+          {
+            x,
+            y: capsuleTop,
+            width: capsuleWidth,
+            height: capsuleHeight,
+            rx: radius,
+            ry: radius
+          }
+        ) }) }),
+        target > 0 && /* @__PURE__ */ jsx(
+          "rect",
+          {
+            "data-testid": "daily-target-capsule-track",
+            x,
+            y: capsuleTop,
+            width: capsuleWidth,
+            height: capsuleHeight,
+            rx: radius,
+            ry: radius,
+            fill: trackFill,
+            stroke: trackStroke,
+            strokeWidth: 1.5
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "rect",
+          {
+            "data-testid": "daily-output-capsule-fill",
+            x,
+            y: fillTop,
+            width: capsuleWidth,
+            height: fillHeight,
+            rx: fillHeight >= capsuleHeight ? radius : 0,
+            ry: fillHeight >= capsuleHeight ? radius : 0,
+            fill: fillColor,
+            clipPath: target > 0 ? `url(#${clipId})` : void 0
+          }
+        )
+      ] }, `daily-output-capsule-${index}`)
+    );
+  });
+  return capsules.length > 0 ? /* @__PURE__ */ jsx("g", { children: capsules }) : null;
+};
 var CustomTooltip2 = ({ active, payload, label, isUptimeMode }) => {
   if (!active || !payload || payload.length === 0) return null;
   if (isUptimeMode) {
@@ -52542,6 +52652,7 @@ var LineMonthlyHistory = ({
   legend,
   monitoringMode,
   lineAssembly = false,
+  shiftConfig,
   underperformingWorkspaces = {},
   lineId,
   selectedShiftId = 0,
@@ -52559,6 +52670,13 @@ var LineMonthlyHistory = ({
   const { isIdleTimeVlmEnabled } = useIdleTimeVlmConfig();
   const idleTimeVlmEnabled = isIdleTimeVlmEnabled(lineId);
   const isUptimeMode = monitoringMode === "uptime";
+  const [isMobile, setIsMobile] = useState(false);
+  useEffect(() => {
+    const checkMobile = () => setIsMobile(window.innerWidth < 640);
+    checkMobile();
+    window.addEventListener("resize", checkMobile);
+    return () => window.removeEventListener("resize", checkMobile);
+  }, []);
   const chartKey = useMemo(() => `${lineId}-${month}-${year}-${selectedShiftId}-${rangeStart}-${rangeEnd}`, [lineId, month, year, selectedShiftId, rangeStart, rangeEnd]);
   const monthBounds = useMemo(() => getMonthKeyBounds(year, month), [year, month]);
   const normalizedRange = useMemo(() => {
@@ -52720,29 +52838,21 @@ var LineMonthlyHistory = ({
         });
       }
       const yAxisMax2 = maxHours > 0 ? 100 : 1;
-      return { data: dailyData2, maxOutput: 0, lastSetTarget: 0, yAxisMax: yAxisMax2 };
+      return { data: dailyData2, maxOutput: 0, targetValues: [], yAxisMax: yAxisMax2, targetLegend: "" };
     }
     const dailyData = [];
     let maxOutput = 0;
-    let lastSetTarget = 0;
-    for (let i = rangeDateKeys.length - 1; i >= 0; i--) {
-      const dayKey = rangeDateKeys[i];
-      const dayData = analysisMonthlyDataByKey.get(dayKey);
-      const shiftData = dayData ? getShiftData2(dayData, selectedShiftId) : null;
-      const idealOutput = shiftData ? shiftData.idealOutput || 0 : 0;
-      if (idealOutput > 0) {
-        lastSetTarget = idealOutput;
-        break;
-      }
-    }
+    let maxTarget = 0;
     for (const dayKey of rangeDateKeys) {
       const day = Number(dayKey.slice(-2));
       const dayData = analysisMonthlyDataByKey.get(dayKey);
+      const isOffDay = isScheduledOffDay(dayKey, shiftConfig, selectedShiftId);
       const shiftData = dayData ? getShiftData2(dayData, selectedShiftId) : null;
-      const output = shiftData && hasRealData(shiftData) ? shiftData.output || 0 : 0;
-      const idealOutput = shiftData ? shiftData.idealOutput || 0 : 0;
+      const output = !isOffDay && shiftData && hasRealData(shiftData) ? shiftData.output || 0 : 0;
+      const targetOutput = isOffDay ? 0 : resolveDailyTargetOutput(shiftData);
       if (output > maxOutput) maxOutput = output;
-      const color2 = output >= lastSetTarget ? "#00AB45" : "#E34329";
+      if (targetOutput > maxTarget) maxTarget = targetOutput;
+      const color2 = targetOutput > 0 && output >= targetOutput ? "#00AB45" : "#E34329";
       dailyData.push({
         hour: getOrdinal(day),
         // Using ordinal format (1st, 2nd, 3rd, etc.)
@@ -52750,17 +52860,25 @@ var LineMonthlyHistory = ({
         output,
         originalOutput: output,
         // For label display
-        idealOutput,
+        idealOutput: targetOutput,
+        targetOutput,
         color: color2
       });
     }
-    const calculatedMax = Math.max(maxOutput, lastSetTarget);
+    const calculatedMax = Math.max(maxOutput, maxTarget);
     const yAxisMax = calculatedMax > 0 ? calculatedMax * 1.1 : 100;
-    return { data: dailyData, maxOutput, lastSetTarget, yAxisMax };
-  }, [analysisMonthlyDataByKey, normalizedRange.endKey, normalizedRange.startKey, selectedShiftId, isUptimeMode, timezone]);
+    const targetValues = getUniqueRoundedTargets(dailyData);
+    return {
+      data: dailyData,
+      maxOutput,
+      targetValues,
+      yAxisMax,
+      targetLegend: formatDailyTargetLegend(targetValues)
+    };
+  }, [analysisMonthlyDataByKey, normalizedRange.endKey, normalizedRange.startKey, selectedShiftId, isUptimeMode, timezone, shiftConfig]);
   const yAxisTicks = useMemo(() => {
     const max = chartData.yAxisMax;
-    const target = chartData.lastSetTarget;
+    const targets = chartData.targetValues || [];
     if (!max || max <= 0) return void 0;
     const desiredIntervals = 4;
     const roughStep = max / desiredIntervals;
@@ -52774,11 +52892,18 @@ var LineMonthlyHistory = ({
     for (let v = 0; v <= max; v += step) {
       ticks.push(Math.round(v));
     }
-    if (target > 0) {
-      ticks.push(Math.round(target));
-    }
+    targets.forEach((target) => ticks.push(Math.round(target)));
     return Array.from(new Set(ticks)).filter((v) => v >= 0 && v <= max).sort((a, b) => a - b);
-  }, [chartData.yAxisMax, chartData.lastSetTarget]);
+  }, [chartData.yAxisMax, chartData.targetValues]);
+  const visibleYAxisTicks = useMemo(() => {
+    if (!isMobile || isUptimeMode || !yAxisTicks || yAxisTicks.length <= 3) return yAxisTicks;
+    const importantTicks = /* @__PURE__ */ new Set([
+      0,
+      Math.round(chartData.yAxisMax),
+      ...chartData.targetValues || []
+    ]);
+    return yAxisTicks.filter((tick) => importantTicks.has(Math.round(tick))).sort((a, b) => a - b).slice(-3);
+  }, [chartData.targetValues, chartData.yAxisMax, isMobile, isUptimeMode, yAxisTicks]);
   const pieChartData = useMemo(() => {
     if (!isUptimeMode) return [];
     const validShifts = (analysisMonthlyData || []).map((day) => getShiftData2(day, selectedShiftId)).filter(
@@ -53097,36 +53222,35 @@ var LineMonthlyHistory = ({
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "bg-white rounded-lg sm:rounded-xl shadow-sm border border-gray-100 p-2 sm:p-3 lg:p-4", children: [
           /* @__PURE__ */ jsx("h3", { className: "text-xs sm:text-sm font-bold text-gray-700 mb-1 sm:mb-2 text-left", children: isUptimeMode ? "Daily Utilization" : "Daily Output" }),
-          /* @__PURE__ */ jsx("div", { className: "h-[160px] sm:h-[180px] lg:h-[220px]", children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(
+          /* @__PURE__ */ jsx("div", { className: "h-[140px] sm:h-[180px] lg:h-[220px]", children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(
             BarChart$1,
             {
               data: chartData.data,
-              margin: { top: 20, right: 10, bottom: 40, left: 10 },
+              margin: isMobile ? { top: 8, right: 4, bottom: 28, left: 0 } : { top: 20, right: 10, bottom: 40, left: 10 },
               children: [
                 /* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray: "3 3", vertical: false, stroke: "#f3f4f6" }),
                 /* @__PURE__ */ jsx(
                   XAxis,
                   {
                     dataKey: "hour",
-                    tick: { fontSize: 10, fill: "#6b7280" },
-                    interval: 0,
+                    tick: { fontSize: isMobile ? 9 : 10, fill: "#6b7280" },
+                    interval: isMobile ? 3 : 0,
                     angle: -45,
                     textAnchor: "end",
-                    height: 60
+                    height: isMobile ? 42 : 60
                   }
                 ),
                 /* @__PURE__ */ jsx(
                   YAxis,
                   {
                     domain: [0, chartData.yAxisMax],
-                    width: 40,
-                    ticks: isUptimeMode ? [0, 25, 50, 75, 100] : yAxisTicks,
+                    width: isMobile ? 34 : 40,
+                    ticks: isUptimeMode ? [0, 25, 50, 75, 100] : visibleYAxisTicks,
                     tickFormatter: isUptimeMode ? (value) => `${value}%` : void 0,
                     tick: isUptimeMode ? void 0 : (props) => {
                       const { x, y, payload } = props;
                       const value = Math.round(payload.value);
-                      const targetValue = Math.round(chartData.lastSetTarget);
-                      const isTarget = value === targetValue && targetValue > 0;
+                      const isTarget = (chartData.targetValues || []).includes(value);
                       return /* @__PURE__ */ jsx(
                         "text",
                         {
@@ -53149,15 +53273,7 @@ var LineMonthlyHistory = ({
                     content: (props) => /* @__PURE__ */ jsx(CustomTooltip2, { ...props, isUptimeMode })
                   }
                 ),
-                !isUptimeMode && chartData.lastSetTarget > 0 && /* @__PURE__ */ jsx(
-                  ReferenceLine,
-                  {
-                    y: chartData.lastSetTarget,
-                    stroke: "#E34329",
-                    strokeDasharray: "5 5",
-                    strokeWidth: 2
-                  }
-                ),
+                !isUptimeMode && /* @__PURE__ */ jsx(Customized, { component: (props) => renderDailyOutputCapsules(props, chartData.data) }),
                 isUptimeMode ? /* @__PURE__ */ jsxs(Fragment, { children: [
                   /* @__PURE__ */ jsx(
                     Bar,
@@ -53190,6 +53306,8 @@ var LineMonthlyHistory = ({
                   {
                     dataKey: "output",
                     radius: [4, 4, 0, 0],
+                    fill: "transparent",
+                    opacity: 0,
                     isAnimationActive: true,
                     animationBegin: 0,
                     animationDuration: 1e3,
@@ -53208,13 +53326,9 @@ var LineMonthlyHistory = ({
             },
             chartKey
           ) }) }),
-          !isUptimeMode && chartData.lastSetTarget > 0 && /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center text-sm text-gray-600 bg-white py-1 pt-2", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 border border-gray-100 rounded-full px-3 py-1", children: [
-            /* @__PURE__ */ jsx("div", { className: "w-8 flex items-center", children: /* @__PURE__ */ jsx("div", { className: "w-full border-t-2 border-[#E34329] border-dashed" }) }),
-            /* @__PURE__ */ jsxs("span", { children: [
-              "Target: ",
-              Math.round(chartData.lastSetTarget),
-              " units/day"
-            ] })
+          !isUptimeMode && chartData.targetValues.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center text-sm text-gray-600 bg-white py-1 pt-2", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 border border-gray-100 rounded-full px-3 py-1", children: [
+            /* @__PURE__ */ jsx("div", { className: "relative h-5 w-3 rounded-full border border-[#E34329] bg-[#fff5f3] overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "absolute inset-x-0 bottom-0 h-1/2 bg-[#E34329]" }) }),
+            /* @__PURE__ */ jsx("span", { children: chartData.targetLegend })
           ] }) })
         ] })
       ] })
@@ -55137,6 +55251,106 @@ var formatCycleSeconds = (value) => {
   if (!Number.isFinite(value)) return "0.0s";
   return `${value.toFixed(1)}s`;
 };
+var resolveDailyTargetOutput2 = (shiftData) => {
+  if (!shiftData || shiftData.hasData === false) return 0;
+  const target = Number(shiftData?.targetOutput || shiftData?.idealOutput || 0);
+  return Number.isFinite(target) && target > 0 ? target : 0;
+};
+var getUniqueRoundedTargets2 = (data) => Array.from(new Set(
+  data.map((entry) => Number(entry.targetOutput || 0)).filter((target) => Number.isFinite(target) && target > 0).map((target) => Math.round(target))
+)).sort((a, b) => a - b);
+var formatDailyTargetLegend2 = (targets) => {
+  if (targets.length === 0) return "";
+  if (targets.length === 1) return `Target: ${targets[0].toLocaleString()} units/day`;
+  return `Target: ${targets[0].toLocaleString()} - ${targets[targets.length - 1].toLocaleString()} units/day`;
+};
+var WEEKDAY_NAMES2 = ["sunday", "monday", "tuesday", "wednesday", "thursday", "friday", "saturday"];
+var getShiftOffDays2 = (shiftConfig, selectedShiftId) => {
+  const shift = shiftConfig?.shifts?.find((candidate) => candidate.shiftId === selectedShiftId);
+  const raw = shift?.offDays || shift?.off_days || [];
+  return Array.isArray(raw) ? raw.map((day) => String(day || "").trim().toLowerCase()).filter(Boolean) : [];
+};
+var isScheduledOffDay2 = (dateKey, shiftConfig, selectedShiftId) => {
+  const offDays = getShiftOffDays2(shiftConfig, selectedShiftId);
+  if (offDays.length === 0) return false;
+  const date = parseDateKeyToDate(dateKey);
+  return offDays.includes(WEEKDAY_NAMES2[date.getDay()]);
+};
+var renderDailyOutputCapsules2 = (props, data) => {
+  const { offset, yAxisMap } = props;
+  if (!offset || !yAxisMap || data.length === 0) return null;
+  const { left, width } = offset;
+  const yAxis = yAxisMap.default || yAxisMap[0];
+  if (!Number.isFinite(left) || !Number.isFinite(width) || width <= 0 || !yAxis?.scale) {
+    return null;
+  }
+  const slotWidth = width / data.length;
+  const capsuleWidth = Math.max(10, Math.min(28, slotWidth * 0.44));
+  const radius = capsuleWidth / 2;
+  const baseY = yAxis.scale(0);
+  const capsules = [];
+  data.forEach((entry, index) => {
+    const target = Number(entry.targetOutput || 0);
+    const output = Number(entry.output || 0);
+    if ((!Number.isFinite(target) || target <= 0) && (!Number.isFinite(output) || output <= 0)) return;
+    const x = left + index * slotWidth + (slotWidth - capsuleWidth) / 2;
+    const targetTop = target > 0 ? yAxis.scale(target) : yAxis.scale(output);
+    const capsuleTop = Math.min(targetTop, baseY - 4);
+    const capsuleHeight = Math.max(baseY - capsuleTop, 4);
+    const fillValue = target > 0 ? Math.min(Math.max(output, 0), target) : Math.max(output, 0);
+    const fillTop = fillValue > 0 ? Math.max(yAxis.scale(fillValue), capsuleTop) : baseY;
+    const fillHeight = Math.max(baseY - fillTop, 0);
+    const fillColor = target > 0 ? output >= target ? "#00AB45" : "#E34329" : entry.color || "#6b7280";
+    const trackFill = output >= target ? "#f0fdf4" : "#fff5f3";
+    const trackStroke = output >= target ? "#00AB45" : "#E34329";
+    const clipId = `workspace-daily-output-capsule-${index}`;
+    capsules.push(
+      /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", { id: clipId, children: /* @__PURE__ */ jsx(
+          "rect",
+          {
+            x,
+            y: capsuleTop,
+            width: capsuleWidth,
+            height: capsuleHeight,
+            rx: radius,
+            ry: radius
+          }
+        ) }) }),
+        target > 0 && /* @__PURE__ */ jsx(
+          "rect",
+          {
+            "data-testid": "daily-target-capsule-track",
+            x,
+            y: capsuleTop,
+            width: capsuleWidth,
+            height: capsuleHeight,
+            rx: radius,
+            ry: radius,
+            fill: trackFill,
+            stroke: trackStroke,
+            strokeWidth: 1.5
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "rect",
+          {
+            "data-testid": "daily-output-capsule-fill",
+            x,
+            y: fillTop,
+            width: capsuleWidth,
+            height: fillHeight,
+            rx: fillHeight >= capsuleHeight ? radius : 0,
+            ry: fillHeight >= capsuleHeight ? radius : 0,
+            fill: fillColor,
+            clipPath: target > 0 ? `url(#${clipId})` : void 0
+          }
+        )
+      ] }, `daily-output-capsule-${index}`)
+    );
+  });
+  return capsules.length > 0 ? /* @__PURE__ */ jsx("g", { children: capsules }) : null;
+};
 var CustomTooltip3 = ({ active, payload, label, isUptimeMode }) => {
   if (!active || !payload || payload.length === 0) return null;
   if (isUptimeMode) {
@@ -55316,28 +55530,20 @@ var WorkspaceMonthlyHistory = ({
         });
       }
       const yAxisMax2 = maxHours > 0 ? maxHours * 1.1 : 1;
-      return { data: dailyData, yAxisMax: yAxisMax2, lastSetTarget: 0 };
+      return { data: dailyData, yAxisMax: yAxisMax2, targetValues: [], targetLegend: "" };
     }
     let maxOutput = 0;
-    let lastSetTarget = 0;
-    for (let i = rangeDateKeys.length - 1; i >= 0; i--) {
-      const dateKey = rangeDateKeys[i];
-      const dayData = analysisMonthlyDataByKey.get(dateKey);
-      const shiftData = dayData ? getShiftData(dayData, selectedShiftId) : null;
-      const idealOutput = shiftData ? shiftData.idealOutput : 0;
-      if (idealOutput > 0) {
-        lastSetTarget = idealOutput;
-        break;
-      }
-    }
+    let maxTarget = 0;
     for (const dateKey of rangeDateKeys) {
       const dayData = analysisMonthlyDataByKey.get(dateKey);
       const dayNumber = Number(dateKey.slice(-2));
+      const isOffDay = isScheduledOffDay2(dateKey, shiftConfig, selectedShiftId);
       const shiftData = dayData ? getShiftData(dayData, selectedShiftId) : null;
-      const output = shiftData && hasRealData(shiftData) ? shiftData.output : 0;
-      const idealOutput = shiftData ? shiftData.idealOutput : 0;
+      const output = !isOffDay && shiftData && hasRealData(shiftData) ? shiftData.output : 0;
+      const targetOutput = isOffDay ? 0 : resolveDailyTargetOutput2(shiftData);
       if (output > maxOutput) maxOutput = output;
-      const color2 = output >= lastSetTarget ? "#00AB45" : "#E34329";
+      if (targetOutput > maxTarget) maxTarget = targetOutput;
+      const color2 = targetOutput > 0 && output >= targetOutput ? "#00AB45" : "#E34329";
       dailyData.push({
         hour: getOrdinal2(dayNumber),
         // Using ordinal format (1st, 2nd, 3rd, etc.)
@@ -55345,21 +55551,29 @@ var WorkspaceMonthlyHistory = ({
         output,
         originalOutput: output,
         // For label display
-        idealOutput,
+        idealOutput: targetOutput,
+        targetOutput,
         efficiency: shiftData && hasRealData(shiftData) ? shiftData.efficiency : 0,
         color: color2,
         idleMinutes: 0
         // Not used but keeps structure consistent
       });
     }
-    const calculatedMax = Math.max(maxOutput, lastSetTarget);
+    const calculatedMax = Math.max(maxOutput, maxTarget);
     const yAxisMax = calculatedMax > 0 ? calculatedMax * 1.1 : 100;
-    return { data: dailyData, maxOutput, lastSetTarget, yAxisMax };
-  }, [analysisMonthlyDataByKey, rangeDateKeys, selectedShiftId, isUptimeMode, shiftWorkSeconds]);
+    const targetValues = getUniqueRoundedTargets2(dailyData);
+    return {
+      data: dailyData,
+      maxOutput,
+      targetValues,
+      yAxisMax,
+      targetLegend: formatDailyTargetLegend2(targetValues)
+    };
+  }, [analysisMonthlyDataByKey, rangeDateKeys, selectedShiftId, isUptimeMode, shiftConfig, shiftWorkSeconds]);
   const yAxisTicks = useMemo(() => {
     if (isUptimeMode) return void 0;
     const max = chartData.yAxisMax;
-    const target = chartData.lastSetTarget;
+    const targets = chartData.targetValues || [];
     if (!max || max <= 0) return void 0;
     const desiredIntervals = 4;
     const roughStep = max / desiredIntervals;
@@ -55373,7 +55587,7 @@ var WorkspaceMonthlyHistory = ({
     for (let v = 0; v <= max; v += step) {
       ticks.push(Math.round(v));
     }
-    if (target > 0) {
+    targets.forEach((target) => {
       const roundedTarget = Math.round(target);
       if (!ticks.includes(roundedTarget)) {
         let nearestIndex = -1;
@@ -55392,9 +55606,18 @@ var WorkspaceMonthlyHistory = ({
           ticks.push(roundedTarget);
         }
       }
-    }
+    });
     return ticks.filter((v) => v >= 0 && v <= max * 1.05).sort((a, b) => a - b);
-  }, [chartData.yAxisMax, chartData.lastSetTarget, isUptimeMode]);
+  }, [chartData.yAxisMax, chartData.targetValues, isUptimeMode]);
+  const visibleYAxisTicks = useMemo(() => {
+    if (!isMobile || isUptimeMode || !yAxisTicks || yAxisTicks.length <= 3) return yAxisTicks;
+    const importantTicks = /* @__PURE__ */ new Set([
+      0,
+      Math.round(chartData.yAxisMax),
+      ...chartData.targetValues || []
+    ]);
+    return yAxisTicks.filter((tick) => importantTicks.has(Math.round(tick))).sort((a, b) => a - b).slice(-3);
+  }, [chartData.targetValues, chartData.yAxisMax, isMobile, isUptimeMode, yAxisTicks]);
   const pieChartData = useMemo(() => {
     const aggregateMode = isUptimeMode ? "uptime" : "output";
     const validShifts = analysisMonthlyData.map((d) => getShiftData(d, selectedShiftId)).filter(
@@ -55784,22 +56007,22 @@ var WorkspaceMonthlyHistory = ({
         ] }),
         (!isAssemblyWorkspace || isUptimeMode) && /* @__PURE__ */ jsxs("div", { className: "bg-white rounded-lg shadow-sm border border-gray-100 p-4 flex-1", children: [
           /* @__PURE__ */ jsx("h3", { className: "text-lg font-bold text-gray-700 mb-3 text-left", children: isUptimeMode ? "Daily Utilization" : "Daily Output" }),
-          /* @__PURE__ */ jsx("div", { style: { height: "220px" }, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(
+          /* @__PURE__ */ jsx("div", { style: { height: isMobile ? "150px" : "220px" }, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(
             BarChart$1,
             {
               data: chartData.data,
-              margin: { top: 20, right: 10, bottom: 40, left: 10 },
+              margin: isMobile ? { top: 8, right: 4, bottom: 28, left: 0 } : { top: 20, right: 10, bottom: 40, left: 10 },
               children: [
                 /* @__PURE__ */ jsx(CartesianGrid, { strokeDasharray: "3 3", vertical: false, stroke: "#f3f4f6" }),
                 /* @__PURE__ */ jsx(
                   XAxis,
                   {
                     dataKey: "hour",
-                    tick: { fontSize: 10, fill: "#6b7280" },
-                    interval: isMobile ? "preserveStartEnd" : 0,
+                    tick: { fontSize: isMobile ? 9 : 10, fill: "#6b7280" },
+                    interval: isMobile ? 3 : 0,
                     angle: -45,
                     textAnchor: "end",
-                    height: 60
+                    height: isMobile ? 42 : 60
                   }
                 ),
                 isUptimeMode ? /* @__PURE__ */ jsx(
@@ -55814,13 +56037,12 @@ var WorkspaceMonthlyHistory = ({
                   YAxis,
                   {
                     domain: [0, chartData.yAxisMax],
-                    width: 40,
-                    ticks: yAxisTicks,
+                    width: isMobile ? 34 : 40,
+                    ticks: visibleYAxisTicks,
                     tick: (props) => {
                       const { x, y, payload } = props;
                       const value = Math.round(payload.value);
-                      const targetValue = Math.round(chartData.lastSetTarget);
-                      const isTarget = value === targetValue && targetValue > 0;
+                      const isTarget = (chartData.targetValues || []).includes(value);
                       return /* @__PURE__ */ jsx(
                         "text",
                         {
@@ -55843,15 +56065,7 @@ var WorkspaceMonthlyHistory = ({
                     content: (props) => /* @__PURE__ */ jsx(CustomTooltip3, { ...props, isUptimeMode })
                   }
                 ),
-                !isUptimeMode && chartData.lastSetTarget > 0 && /* @__PURE__ */ jsx(
-                  ReferenceLine,
-                  {
-                    y: chartData.lastSetTarget,
-                    stroke: "#E34329",
-                    strokeDasharray: "5 5",
-                    strokeWidth: 2
-                  }
-                ),
+                !isUptimeMode && /* @__PURE__ */ jsx(Customized, { component: (props) => renderDailyOutputCapsules2(props, chartData.data) }),
                 isUptimeMode ? /* @__PURE__ */ jsxs(Fragment, { children: [
                   /* @__PURE__ */ jsx(
                     Bar,
@@ -55884,6 +56098,8 @@ var WorkspaceMonthlyHistory = ({
                   {
                     dataKey: "output",
                     radius: [4, 4, 0, 0],
+                    fill: "transparent",
+                    opacity: 0,
                     isAnimationActive: true,
                     animationBegin: 0,
                     animationDuration: 1e3,
@@ -55927,13 +56143,9 @@ var WorkspaceMonthlyHistory = ({
               /* @__PURE__ */ jsx("span", { className: "w-2.5 h-2.5 rounded-full", style: { backgroundColor: "#e5e7eb" } }),
               /* @__PURE__ */ jsx("span", { className: "text-xs text-gray-600", children: "Idle" })
             ] })
-          ] }) : chartData.lastSetTarget > 0 && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsx("div", { className: "w-12 h-0.5 border-t-2 border-dashed", style: { borderColor: "#E34329" } }),
-            /* @__PURE__ */ jsxs("span", { className: "text-xs text-gray-600", children: [
-              "Target: ",
-              Math.round(chartData.lastSetTarget),
-              " units/day"
-            ] })
+          ] }) : chartData.targetValues.length > 0 && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx("div", { className: "relative h-5 w-3 rounded-full border border-[#E34329] bg-[#fff5f3] overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "absolute inset-x-0 bottom-0 h-1/2 bg-[#E34329]" }) }),
+            /* @__PURE__ */ jsx("span", { className: "text-xs text-gray-600", children: chartData.targetLegend })
           ] }) })
         ] })
       ] })
@@ -67563,6 +67775,17 @@ var setSessionSeenValue = (key) => {
 };
 var buildAllGreenCelebrationSeenKey = (identity) => `${ALL_GREEN_CELEBRATION_SEEN_PREFIX}${identity}`;
 var buildAllGreenMilestoneSeenKey = (identity, milestoneSeconds) => `${ALL_GREEN_MILESTONE_SEEN_PREFIX}${identity}:${milestoneSeconds}`;
+var LINE_SELECTOR_INDICATOR_VERSION = "incident_exclamation_v1";
+var LineSelectorIncidentIcon = ({ lineId }) => /* @__PURE__ */ jsx(
+  "span",
+  {
+    "data-testid": `line-selector-incident-icon-${lineId}`,
+    "aria-label": "Line needs attention",
+    role: "img",
+    className: "inline-flex h-5 w-5 flex-shrink-0 items-center justify-center rounded-full border border-rose-200 bg-white text-[13px] font-semibold leading-none text-rose-600 shadow-[0_1px_2px_rgba(15,23,42,0.06)]",
+    children: /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "-mt-px", children: "!" })
+  }
+);
 var LoadingPageCmp = LoadingPage_default;
 var LoadingOverlayCmp = LoadingOverlay_default;
 function HomeView({
@@ -67902,25 +68125,49 @@ function HomeView({
   const currentIsCurrentScopeResolved = isBootstrapMonitorMode ? bootstrapMonitor.isCurrentScopeResolved : legacyIsCurrentScopeResolved;
   const currentMetricsError = isBootstrapMonitorMode ? bootstrapMonitor.error : legacyMetricsError;
   const currentRefetchMetrics = isBootstrapMonitorMode ? bootstrapMonitor.refetch : refetchLegacyMetrics;
-  const lineSelectorSignalStatusByLine = useMemo(() => {
-    const statusByLine = /* @__PURE__ */ new Map();
+  const lineSelectorIndicatorByLine = useMemo(() => {
+    const indicatorByLine = /* @__PURE__ */ new Map();
     const legend = currentEfficiencyLegend || DEFAULT_EFFICIENCY_LEGEND;
     const addRows = (rows) => {
       (rows || []).forEach((row) => {
         const lineId = typeof row?.line_id === "string" ? row.line_id : "";
-        if (!lineId || statusByLine.has(lineId)) {
+        if (!lineId) {
+          return;
+        }
+        if (row?.red_flow_incident?.active === true) {
+          indicatorByLine.set(lineId, "incident");
+          return;
+        }
+        if (indicatorByLine.get(lineId) === "incident") {
           return;
         }
         const status = getKpiSignalStatus(row?.line_signal, legend);
-        if (status) {
-          statusByLine.set(lineId, status);
+        if (status === "attention") {
+          indicatorByLine.set(lineId, "red");
         }
       });
     };
     addRows(currentSelectorLineMetrics);
     addRows(currentLineMetrics);
-    return statusByLine;
+    return indicatorByLine;
   }, [currentEfficiencyLegend, currentLineMetrics, currentSelectorLineMetrics]);
+  const lineSelectorIndicatorStats = useMemo(() => {
+    let incidentLineCount = 0;
+    let redFlowLineCount = 0;
+    visibleLineIds.forEach((lineId) => {
+      const indicator = lineSelectorIndicatorByLine.get(lineId);
+      if (indicator === "incident") {
+        incidentLineCount += 1;
+      } else if (indicator === "red") {
+        redFlowLineCount += 1;
+      }
+    });
+    return {
+      incidentLineCount,
+      redFlowLineCount,
+      hasAnyIncident: incidentLineCount > 0
+    };
+  }, [lineSelectorIndicatorByLine, visibleLineIds]);
   const metricsDisplayNames = useMemo(() => {
     const nextDisplayNames = {};
     currentWorkspaceMetrics.forEach((workspace) => {
@@ -68777,9 +69024,12 @@ function HomeView({
       new_line_ids: normalizedLineIds,
       selected_line_count: normalizedLineIds.length,
       selection_mode: isAllLinesSelection(normalizedLineIds) ? "all" : normalizedLineIds.length === 1 ? "single" : "custom",
+      incident_line_count: lineSelectorIndicatorStats.incidentLineCount,
+      red_flow_line_count: lineSelectorIndicatorStats.redFlowLineCount,
+      selector_indicator_version: LINE_SELECTOR_INDICATOR_VERSION,
       line_name: getLineSelectionLabel(normalizedLineIds)
     });
-  }, [factoryViewId, getLineSelectionLabel, getTrackedLineScope, selectedLineIds, selectedLineIdsKey, visibleLineIds]);
+  }, [factoryViewId, getLineSelectionLabel, getTrackedLineScope, lineSelectorIndicatorStats, selectedLineIds, selectedLineIdsKey, visibleLineIds]);
   useCallback(() => {
     updateSelectedLineIds(visibleLineIds);
   }, [updateSelectedLineIds, visibleLineIds]);
@@ -68837,7 +69087,10 @@ function HomeView({
                 current_display_mode_label: getHomeDisplayModeLabel(displayMode),
                 selected_line_ids: selectedLineIds,
                 selected_line_count: selectedLineIds.length,
-                is_all_lines: isAllLinesSelection(selectedLineIds)
+                is_all_lines: isAllLinesSelection(selectedLineIds),
+                incident_line_count: lineSelectorIndicatorStats.incidentLineCount,
+                red_flow_line_count: lineSelectorIndicatorStats.redFlowLineCount,
+                selector_indicator_version: LINE_SELECTOR_INDICATOR_VERSION
               });
             }
           },
@@ -68878,8 +69131,8 @@ function HomeView({
         ] }),
         /* @__PURE__ */ jsx("div", { className: "max-h-56 space-y-0.5 overflow-y-auto pr-1", children: visibleLineIds.map((lineId) => {
           const isChecked = pendingSelectedLineIds.includes(lineId);
-          const signalStatus = lineSelectorSignalStatusByLine.get(lineId);
-          const signalDotClass = signalStatus === "stable" ? "bg-green-500" : signalStatus === "warning" ? "bg-yellow-400" : signalStatus === "attention" ? "bg-red-500" : "";
+          const selectorIndicator = lineSelectorIndicatorByLine.get(lineId);
+          const lineLabel = mergedLineNames[lineId] || `Line ${lineId.substring(0, 4)}`;
           return /* @__PURE__ */ jsxs(
             "label",
             {
@@ -68889,6 +69142,7 @@ function HomeView({
                   "input",
                   {
                     type: "checkbox",
+                    "aria-label": lineLabel,
                     className: "h-4 w-4 rounded border-slate-300 text-blue-600 focus:ring-blue-500",
                     checked: isChecked,
                     onChange: () => {
@@ -68904,12 +69158,12 @@ function HomeView({
                     }
                   }
                 ),
-                /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children: mergedLineNames[lineId] || `Line ${lineId.substring(0, 4)}` }),
-                /* @__PURE__ */ jsx("span", { className: "flex h-2.5 w-2.5 flex-shrink-0 items-center justify-center", children: signalStatus ? /* @__PURE__ */ jsx(
+                /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children: lineLabel }),
+                /* @__PURE__ */ jsx("span", { className: "flex h-5 w-5 flex-shrink-0 items-center justify-center", children: selectorIndicator === "incident" ? /* @__PURE__ */ jsx(LineSelectorIncidentIcon, { lineId }) : selectorIndicator === "red" && !lineSelectorIndicatorStats.hasAnyIncident ? /* @__PURE__ */ jsx(
                   "span",
                   {
                     "data-testid": `line-selector-signal-dot-${lineId}`,
-                    className: `h-2 w-2 rounded-full ${signalDotClass}`,
+                    className: "h-2 w-2 rounded-full bg-red-500",
                     "aria-hidden": "true"
                   }
                 ) : null })
@@ -68941,7 +69195,8 @@ function HomeView({
     mergedLineNames,
     selectedLineIds,
     pendingSelectedLineIds,
-    lineSelectorSignalStatusByLine,
+    lineSelectorIndicatorByLine,
+    lineSelectorIndicatorStats,
     displayMode,
     slideshowActiveLineId,
     visibleLineIds,