@optifye/dashboard-core 6.11.8 → 6.11.9

package/dist/index.css

@@ -5545,6 +5545,9 @@ input[type=range]:active::-moz-range-thumb {
   --tw-bg-opacity: 1;
   background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
 }
+.hover\:bg-transparent:hover {
+  background-color: transparent;
+}
 .hover\:bg-white:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
@@ -5981,6 +5984,9 @@ input[type=range]:active::-moz-range-thumb {
   --tw-bg-opacity: 1;
   background-color: rgb(96 165 250 / var(--tw-bg-opacity, 1));
 }
+.disabled\:opacity-40:disabled {
+  opacity: 0.4;
+}
 .disabled\:opacity-50:disabled {
   opacity: 0.5;
 }

package/dist/index.js

@@ -74667,33 +74667,51 @@ var OverviewImprovementsSkeleton = () => /* @__PURE__ */ jsxRuntime.jsx("div", {
 var OperationsOverviewHeader = React141__namespace.default.memo(({
   dateRange,
   trendMode,
+  lineOptions,
+  selectedLineIds,
   appTimezone,
   mobileMenuContext,
   onDateRangeChange,
-  onTrendModeChange
+  onTrendModeChange,
+  onSelectedLineIdsChange
 }) => {
   bumpRenderCounter();
   const [isFilterOpen, setIsFilterOpen] = React141__namespace.default.useState(false);
+  const [isLinesDropdownOpen, setIsLinesDropdownOpen] = React141__namespace.default.useState(false);
   const filterRef = React141__namespace.default.useRef(null);
   const filterButtonRef = React141__namespace.default.useRef(null);
   const mobileFilterButtonRef = React141__namespace.default.useRef(null);
-  const currentWeekRange = React141__namespace.default.useMemo(
-    () => getCurrentWeekToDateRange(appTimezone),
-    [appTimezone]
-  );
-  const isCurrentWeekToDateRange = dateRange.startKey === currentWeekRange.startKey && dateRange.endKey === currentWeekRange.endKey;
+  const linesDropdownRef = React141__namespace.default.useRef(null);
   const mobileSubtitle = React141__namespace.default.useMemo(() => {
-    if (isCurrentWeekToDateRange) {
-      return `Week of ${dateFns.format(parseDateKeyToDate(dateRange.startKey), "do MMM")}`;
+    if (dateRange.startKey === dateRange.endKey) {
+      return dateFns.format(parseDateKeyToDate(dateRange.startKey), "do MMM, yyyy");
     }
     return `${dateFns.format(parseDateKeyToDate(dateRange.startKey), "do MMM")} - ${dateFns.format(parseDateKeyToDate(dateRange.endKey), "do MMM, yyyy")}`;
-  }, [dateRange.endKey, dateRange.startKey, isCurrentWeekToDateRange]);
+  }, [dateRange.endKey, dateRange.startKey]);
   const desktopSubtitle = React141__namespace.default.useMemo(() => {
-    if (isCurrentWeekToDateRange) {
-      return `Week of ${dateFns.format(parseDateKeyToDate(dateRange.startKey), "do MMMM, yyyy")}`;
+    if (dateRange.startKey === dateRange.endKey) {
+      return dateFns.format(parseDateKeyToDate(dateRange.startKey), "do MMMM, yyyy");
     }
     return `${dateFns.format(parseDateKeyToDate(dateRange.startKey), "do MMMM, yyyy")} - ${dateFns.format(parseDateKeyToDate(dateRange.endKey), "do MMMM, yyyy")}`;
-  }, [dateRange.endKey, dateRange.startKey, isCurrentWeekToDateRange]);
+  }, [dateRange.endKey, dateRange.startKey]);
+  const availableLineIds = React141__namespace.default.useMemo(
+    () => lineOptions.map((line) => line.id),
+    [lineOptions]
+  );
+  const selectedLineIdSet = React141__namespace.default.useMemo(
+    () => new Set(selectedLineIds),
+    [selectedLineIds]
+  );
+  const isAllLinesSelected = React141__namespace.default.useMemo(() => {
+    if (availableLineIds.length === 0) return true;
+    return availableLineIds.every((lineId) => selectedLineIdSet.has(lineId));
+  }, [availableLineIds, selectedLineIdSet]);
+  const activeFilterCount = React141__namespace.default.useMemo(() => {
+    let count = 0;
+    if (trendMode !== "all") count += 1;
+    if (!isAllLinesSelected) count += 1;
+    return count;
+  }, [isAllLinesSelected, trendMode]);
   const handleFilterToggle = React141__namespace.default.useCallback(() => {
     trackCoreEvent("Operations Overview Filter Toggled", {
       action: !isFilterOpen ? "open" : "close"
@@ -74707,10 +74725,43 @@ var OperationsOverviewHeader = React141__namespace.default.memo(({
     });
     onTrendModeChange(nextMode);
   }, [onTrendModeChange]);
+  const handleAllLinesToggle = React141__namespace.default.useCallback(() => {
+    trackCoreEvent("Operations Overview Line Filter Changed", {
+      selected_line_ids: availableLineIds,
+      selected_line_count: availableLineIds.length,
+      mode: "all"
+    });
+    onSelectedLineIdsChange(availableLineIds);
+  }, [availableLineIds, onSelectedLineIdsChange]);
+  const handleLineToggle = React141__namespace.default.useCallback((lineId) => {
+    const current = new Set(selectedLineIds);
+    if (current.has(lineId)) {
+      if (current.size <= 1) return;
+      current.delete(lineId);
+    } else {
+      current.add(lineId);
+    }
+    const next = availableLineIds.filter((id3) => current.has(id3));
+    trackCoreEvent("Operations Overview Line Filter Changed", {
+      selected_line_ids: next,
+      selected_line_count: next.length,
+      mode: "custom"
+    });
+    onSelectedLineIdsChange(next);
+  }, [availableLineIds, onSelectedLineIdsChange, selectedLineIds]);
+  const handleClearAllFilters = React141__namespace.default.useCallback(() => {
+    onTrendModeChange("all");
+    onSelectedLineIdsChange(availableLineIds);
+    setIsFilterOpen(false);
+  }, [availableLineIds, onSelectedLineIdsChange, onTrendModeChange]);
   React141__namespace.default.useEffect(() => {
     const handleClickOutside = (event) => {
-      if (filterRef.current && !filterRef.current.contains(event.target) && filterButtonRef.current && !filterButtonRef.current.contains(event.target) && mobileFilterButtonRef.current && !mobileFilterButtonRef.current.contains(event.target)) {
+      const target = event.target;
+      if (filterRef.current && !filterRef.current.contains(target) && filterButtonRef.current && !filterButtonRef.current.contains(target) && mobileFilterButtonRef.current && !mobileFilterButtonRef.current.contains(target)) {
         setIsFilterOpen(false);
+        setIsLinesDropdownOpen(false);
+      } else if (linesDropdownRef.current && !linesDropdownRef.current.contains(target)) {
+        setIsLinesDropdownOpen(false);
       }
     };
     document.addEventListener("mousedown", handleClickOutside);
@@ -74749,11 +74800,11 @@ var OperationsOverviewHeader = React141__namespace.default.memo(({
           {
             ref: mobileFilterButtonRef,
             onClick: handleFilterToggle,
-            className: `p-2 rounded-full transition-colors relative ${isFilterOpen || trendMode !== "all" ? "bg-blue-50" : "active:bg-gray-100"}`,
+            className: `p-2 rounded-full transition-colors relative ${isFilterOpen || activeFilterCount > 0 ? "bg-blue-50" : "active:bg-gray-100"}`,
             "aria-label": "Open filters",
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Filter, { className: `w-5 h-5 ${trendMode !== "all" ? "text-blue-600" : "text-gray-700"}` }),
-              trendMode !== "all" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute -top-1 -right-1 flex items-center justify-center w-4 h-4 bg-blue-600 text-white text-[10px] rounded-full font-bold", children: "1" }) : null
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Filter, { className: `w-5 h-5 ${activeFilterCount > 0 ? "text-blue-600" : "text-gray-700"}` }),
+              activeFilterCount > 0 ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute -top-1 -right-1 flex items-center justify-center w-4 h-4 bg-blue-600 text-white text-[10px] rounded-full font-bold", children: activeFilterCount }) : null
             ]
           }
         )
@@ -74781,10 +74832,10 @@ var OperationsOverviewHeader = React141__namespace.default.memo(({
           {
             ref: filterButtonRef,
             onClick: handleFilterToggle,
-            className: `flex items-center gap-2 px-3 py-1.5 rounded-lg border text-sm font-medium transition-all shadow-sm ${isFilterOpen || trendMode !== "all" ? "border-blue-500 bg-blue-50 text-blue-700 ring-1 ring-blue-500" : "border-slate-200 bg-white text-slate-700 hover:bg-slate-50"}`,
+            className: `flex items-center gap-2 px-3 py-1.5 rounded-lg border text-sm font-medium transition-all shadow-sm ${isFilterOpen || activeFilterCount > 0 ? "border-blue-500 bg-blue-50 text-blue-700 ring-1 ring-blue-500" : "border-slate-200 bg-white text-slate-700 hover:bg-slate-50"}`,
             "aria-label": "Open filters",
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Filter, { className: `w-[18px] h-[18px] ${trendMode !== "all" ? "text-blue-600" : "text-slate-500"}` }),
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Filter, { className: `w-[18px] h-[18px] ${activeFilterCount > 0 ? "text-blue-600" : "text-slate-500"}` }),
               "Filters",
               /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: `w-4 h-4 ml-0.5 transition-transform duration-200 ${isFilterOpen ? "rotate-180" : ""}` })
             ]
@@ -74795,40 +74846,94 @@ var OperationsOverviewHeader = React141__namespace.default.memo(({
     isFilterOpen ? /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: filterRef, className: "absolute right-3 sm:right-4 md:right-5 lg:right-6 top-full mt-2 w-72 bg-white rounded-xl shadow-xl border border-gray-100 p-4 z-50", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-3", children: [
         /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-sm font-semibold text-gray-900", children: "Filter View" }),
-        trendMode !== "all" ? /* @__PURE__ */ jsxRuntime.jsx(
+        activeFilterCount > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
           "button",
           {
-            onClick: () => {
-              onTrendModeChange("all");
-              setIsFilterOpen(false);
-            },
+            onClick: handleClearAllFilters,
             className: "text-xs text-red-600 hover:text-red-700 font-medium",
             children: "Clear all"
           }
         ) : null
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-3", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-xs font-medium text-gray-500 uppercase tracking-wide ml-1", children: "Shift" }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: /* @__PURE__ */ jsxRuntime.jsxs(
-          "select",
-          {
-            value: trendMode,
-            onChange: handleTrendModeChange,
-            className: "w-full appearance-none pl-3 pr-8 py-2 text-sm bg-gray-50 border border-gray-200 hover:border-gray-300 rounded-lg text-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:bg-white transition-all cursor-pointer",
-            style: {
-              backgroundImage: `url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e")`,
-              backgroundPosition: "right 0.75rem center",
-              backgroundRepeat: "no-repeat",
-              backgroundSize: "1.2em 1.2em"
-            },
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx("option", { value: "all", children: "All Shifts" }),
-              /* @__PURE__ */ jsxRuntime.jsx("option", { value: "day", children: "Day Shift" }),
-              /* @__PURE__ */ jsxRuntime.jsx("option", { value: "night", children: "Night Shift" })
-            ]
-          }
-        ) })
-      ] }) })
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-xs font-medium text-gray-500 uppercase tracking-wide ml-1", children: "Shift" }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: /* @__PURE__ */ jsxRuntime.jsxs(
+            "select",
+            {
+              value: trendMode,
+              onChange: handleTrendModeChange,
+              className: "w-full appearance-none pl-3 pr-8 py-2 text-sm bg-gray-50 border border-gray-200 hover:border-gray-300 rounded-lg text-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:bg-white transition-all cursor-pointer",
+              style: {
+                backgroundImage: `url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e")`,
+                backgroundPosition: "right 0.75rem center",
+                backgroundRepeat: "no-repeat",
+                backgroundSize: "1.2em 1.2em"
+              },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("option", { value: "all", children: "All Shifts" }),
+                /* @__PURE__ */ jsxRuntime.jsx("option", { value: "day", children: "Day Shift" }),
+                /* @__PURE__ */ jsxRuntime.jsx("option", { value: "night", children: "Night Shift" })
+              ]
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", ref: linesDropdownRef, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-xs font-medium text-gray-500 uppercase tracking-wide ml-1", children: "Lines" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: () => setIsLinesDropdownOpen((prev) => !prev),
+                className: "w-full flex items-center justify-between pl-3 pr-3 py-2 text-sm bg-gray-50 border border-gray-200 hover:border-gray-300 rounded-lg text-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:bg-white transition-all cursor-pointer text-left",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate pr-2", children: isAllLinesSelected ? "All Lines" : selectedLineIds.length === 1 ? lineOptions.find((l) => l.id === selectedLineIds[0])?.name || "1 Line Selected" : `${selectedLineIds.length} Lines Selected` }),
+                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: `w-4 h-4 text-gray-500 flex-shrink-0 transition-transform ${isLinesDropdownOpen ? "rotate-180" : ""}` })
+                ]
+              }
+            ),
+            isLinesDropdownOpen ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute top-full left-0 right-0 mt-1 max-h-48 overflow-y-auto rounded-lg border border-gray-200 bg-white shadow-lg p-1.5 space-y-0.5 z-[60]", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "flex items-center gap-2.5 rounded-md px-2 py-1.5 text-sm text-gray-900 hover:bg-gray-50 cursor-pointer", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "input",
+                  {
+                    type: "checkbox",
+                    className: "h-4 w-4 rounded border-slate-300 text-blue-600 focus:ring-blue-500",
+                    checked: isAllLinesSelected,
+                    onChange: handleAllLinesToggle
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: "All Lines" })
+              ] }),
+              lineOptions.map((line) => {
+                const isChecked = selectedLineIdSet.has(line.id);
+                const disableUncheck = isChecked && selectedLineIds.length <= 1;
+                return /* @__PURE__ */ jsxRuntime.jsxs(
+                  "label",
+                  {
+                    className: `flex items-center gap-2.5 rounded-md px-2 py-1.5 text-sm cursor-pointer transition-colors ${disableUncheck ? "text-gray-400 hover:bg-transparent" : "text-gray-800 hover:bg-gray-50"}`,
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "input",
+                        {
+                          type: "checkbox",
+                          className: "h-4 w-4 rounded border-slate-300 text-blue-600 focus:ring-blue-500 disabled:opacity-40",
+                          checked: isChecked,
+                          disabled: disableUncheck,
+                          onChange: () => handleLineToggle(line.id)
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: line.name })
+                    ]
+                  },
+                  line.id
+                );
+              })
+            ] }) : null
+          ] })
+        ] })
+      ] })
     ] }) : null
   ] }) });
 });
@@ -75727,6 +75832,7 @@ var PlantHeadView = () => {
   const [dateRange, setDateRange] = React141__namespace.default.useState(() => getCurrentWeekToDateRange(appTimezone));
   const [usesThisWeekComparison, setUsesThisWeekComparison] = React141__namespace.default.useState(true);
   const [trendMode, setTrendMode] = React141__namespace.default.useState("all");
+  const [selectedLineIds, setSelectedLineIds] = React141__namespace.default.useState([]);
   React141__namespace.default.useEffect(() => {
     trackCorePageView("Operations Overview", {
       dashboard_surface: "operations_overview"
@@ -75745,9 +75851,27 @@ var PlantHeadView = () => {
     () => normalizedLineIds.join(","),
     [normalizedLineIds]
   );
+  const lineOptions = React141__namespace.default.useMemo(
+    () => normalizedLineIds.map((lineId) => ({
+      id: lineId,
+      name: getLineDisplayName(entityConfig, lineId)
+    })),
+    [entityConfig, normalizedLineIds]
+  );
+  React141__namespace.default.useEffect(() => {
+    setSelectedLineIds((previous) => {
+      if (normalizedLineIds.length === 0) return [];
+      const previousSet = new Set(previous);
+      const next = normalizedLineIds.filter((lineId) => previousSet.has(lineId));
+      if (next.length === 0) {
+        return normalizedLineIds;
+      }
+      return next;
+    });
+  }, [lineIdsKey, normalizedLineIds]);
   const scopedLineIds = React141__namespace.default.useMemo(
-    () => lineIdsKey ? lineIdsKey.split(",") : [],
-    [lineIdsKey]
+    () => selectedLineIds.length > 0 ? selectedLineIds : normalizedLineIds,
+    [normalizedLineIds, selectedLineIds]
   );
   const initializedTimezoneRef = React141__namespace.default.useRef(appTimezone);
   React141__namespace.default.useEffect(() => {
@@ -75775,6 +75899,16 @@ var PlantHeadView = () => {
   const handleTrendModeChange = React141__namespace.default.useCallback((mode) => {
     setTrendMode(mode);
   }, []);
+  const handleSelectedLineIdsChange = React141__namespace.default.useCallback((lineIds) => {
+    if (normalizedLineIds.length === 0) {
+      setSelectedLineIds([]);
+      return;
+    }
+    const uniqueSelected = Array.from(new Set(lineIds));
+    const selectedSet = new Set(uniqueSelected);
+    const next = normalizedLineIds.filter((lineId) => selectedSet.has(lineId));
+    setSelectedLineIds(next.length > 0 ? next : normalizedLineIds);
+  }, [normalizedLineIds]);
   const buildLineMonthlyHistoryUrl = React141__namespace.default.useCallback((lineId) => {
     const rangeStartDate = parseDateKeyToDate(dateRange.startKey);
     const params = new URLSearchParams();
@@ -75841,10 +75975,13 @@ var PlantHeadView = () => {
       {
         dateRange,
         trendMode,
+        lineOptions,
+        selectedLineIds: scopedLineIds,
         appTimezone,
         mobileMenuContext,
         onDateRangeChange: handleDateRangeChange,
-        onTrendModeChange: handleTrendModeChange
+        onTrendModeChange: handleTrendModeChange,
+        onSelectedLineIdsChange: handleSelectedLineIdsChange
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-4 sm:p-6 pb-6 max-w-[1800px] mx-auto w-full flex-1 min-h-0 overflow-y-auto flex flex-col gap-5", children: [

package/dist/index.mjs

@@ -74638,33 +74638,51 @@ var OverviewImprovementsSkeleton = () => /* @__PURE__ */ jsx("div", { className:
 var OperationsOverviewHeader = React141__default.memo(({
   dateRange,
   trendMode,
+  lineOptions,
+  selectedLineIds,
   appTimezone,
   mobileMenuContext,
   onDateRangeChange,
-  onTrendModeChange
+  onTrendModeChange,
+  onSelectedLineIdsChange
 }) => {
   bumpRenderCounter();
   const [isFilterOpen, setIsFilterOpen] = React141__default.useState(false);
+  const [isLinesDropdownOpen, setIsLinesDropdownOpen] = React141__default.useState(false);
   const filterRef = React141__default.useRef(null);
   const filterButtonRef = React141__default.useRef(null);
   const mobileFilterButtonRef = React141__default.useRef(null);
-  const currentWeekRange = React141__default.useMemo(
-    () => getCurrentWeekToDateRange(appTimezone),
-    [appTimezone]
-  );
-  const isCurrentWeekToDateRange = dateRange.startKey === currentWeekRange.startKey && dateRange.endKey === currentWeekRange.endKey;
+  const linesDropdownRef = React141__default.useRef(null);
   const mobileSubtitle = React141__default.useMemo(() => {
-    if (isCurrentWeekToDateRange) {
-      return `Week of ${format(parseDateKeyToDate(dateRange.startKey), "do MMM")}`;
+    if (dateRange.startKey === dateRange.endKey) {
+      return format(parseDateKeyToDate(dateRange.startKey), "do MMM, yyyy");
     }
     return `${format(parseDateKeyToDate(dateRange.startKey), "do MMM")} - ${format(parseDateKeyToDate(dateRange.endKey), "do MMM, yyyy")}`;
-  }, [dateRange.endKey, dateRange.startKey, isCurrentWeekToDateRange]);
+  }, [dateRange.endKey, dateRange.startKey]);
   const desktopSubtitle = React141__default.useMemo(() => {
-    if (isCurrentWeekToDateRange) {
-      return `Week of ${format(parseDateKeyToDate(dateRange.startKey), "do MMMM, yyyy")}`;
+    if (dateRange.startKey === dateRange.endKey) {
+      return format(parseDateKeyToDate(dateRange.startKey), "do MMMM, yyyy");
     }
     return `${format(parseDateKeyToDate(dateRange.startKey), "do MMMM, yyyy")} - ${format(parseDateKeyToDate(dateRange.endKey), "do MMMM, yyyy")}`;
-  }, [dateRange.endKey, dateRange.startKey, isCurrentWeekToDateRange]);
+  }, [dateRange.endKey, dateRange.startKey]);
+  const availableLineIds = React141__default.useMemo(
+    () => lineOptions.map((line) => line.id),
+    [lineOptions]
+  );
+  const selectedLineIdSet = React141__default.useMemo(
+    () => new Set(selectedLineIds),
+    [selectedLineIds]
+  );
+  const isAllLinesSelected = React141__default.useMemo(() => {
+    if (availableLineIds.length === 0) return true;
+    return availableLineIds.every((lineId) => selectedLineIdSet.has(lineId));
+  }, [availableLineIds, selectedLineIdSet]);
+  const activeFilterCount = React141__default.useMemo(() => {
+    let count = 0;
+    if (trendMode !== "all") count += 1;
+    if (!isAllLinesSelected) count += 1;
+    return count;
+  }, [isAllLinesSelected, trendMode]);
   const handleFilterToggle = React141__default.useCallback(() => {
     trackCoreEvent("Operations Overview Filter Toggled", {
       action: !isFilterOpen ? "open" : "close"
@@ -74678,10 +74696,43 @@ var OperationsOverviewHeader = React141__default.memo(({
     });
     onTrendModeChange(nextMode);
   }, [onTrendModeChange]);
+  const handleAllLinesToggle = React141__default.useCallback(() => {
+    trackCoreEvent("Operations Overview Line Filter Changed", {
+      selected_line_ids: availableLineIds,
+      selected_line_count: availableLineIds.length,
+      mode: "all"
+    });
+    onSelectedLineIdsChange(availableLineIds);
+  }, [availableLineIds, onSelectedLineIdsChange]);
+  const handleLineToggle = React141__default.useCallback((lineId) => {
+    const current = new Set(selectedLineIds);
+    if (current.has(lineId)) {
+      if (current.size <= 1) return;
+      current.delete(lineId);
+    } else {
+      current.add(lineId);
+    }
+    const next = availableLineIds.filter((id3) => current.has(id3));
+    trackCoreEvent("Operations Overview Line Filter Changed", {
+      selected_line_ids: next,
+      selected_line_count: next.length,
+      mode: "custom"
+    });
+    onSelectedLineIdsChange(next);
+  }, [availableLineIds, onSelectedLineIdsChange, selectedLineIds]);
+  const handleClearAllFilters = React141__default.useCallback(() => {
+    onTrendModeChange("all");
+    onSelectedLineIdsChange(availableLineIds);
+    setIsFilterOpen(false);
+  }, [availableLineIds, onSelectedLineIdsChange, onTrendModeChange]);
   React141__default.useEffect(() => {
     const handleClickOutside = (event) => {
-      if (filterRef.current && !filterRef.current.contains(event.target) && filterButtonRef.current && !filterButtonRef.current.contains(event.target) && mobileFilterButtonRef.current && !mobileFilterButtonRef.current.contains(event.target)) {
+      const target = event.target;
+      if (filterRef.current && !filterRef.current.contains(target) && filterButtonRef.current && !filterButtonRef.current.contains(target) && mobileFilterButtonRef.current && !mobileFilterButtonRef.current.contains(target)) {
         setIsFilterOpen(false);
+        setIsLinesDropdownOpen(false);
+      } else if (linesDropdownRef.current && !linesDropdownRef.current.contains(target)) {
+        setIsLinesDropdownOpen(false);
       }
     };
     document.addEventListener("mousedown", handleClickOutside);
@@ -74720,11 +74771,11 @@ var OperationsOverviewHeader = React141__default.memo(({
           {
             ref: mobileFilterButtonRef,
             onClick: handleFilterToggle,
-            className: `p-2 rounded-full transition-colors relative ${isFilterOpen || trendMode !== "all" ? "bg-blue-50" : "active:bg-gray-100"}`,
+            className: `p-2 rounded-full transition-colors relative ${isFilterOpen || activeFilterCount > 0 ? "bg-blue-50" : "active:bg-gray-100"}`,
             "aria-label": "Open filters",
             children: [
-              /* @__PURE__ */ jsx(Filter, { className: `w-5 h-5 ${trendMode !== "all" ? "text-blue-600" : "text-gray-700"}` }),
-              trendMode !== "all" ? /* @__PURE__ */ jsx("span", { className: "absolute -top-1 -right-1 flex items-center justify-center w-4 h-4 bg-blue-600 text-white text-[10px] rounded-full font-bold", children: "1" }) : null
+              /* @__PURE__ */ jsx(Filter, { className: `w-5 h-5 ${activeFilterCount > 0 ? "text-blue-600" : "text-gray-700"}` }),
+              activeFilterCount > 0 ? /* @__PURE__ */ jsx("span", { className: "absolute -top-1 -right-1 flex items-center justify-center w-4 h-4 bg-blue-600 text-white text-[10px] rounded-full font-bold", children: activeFilterCount }) : null
             ]
           }
         )
@@ -74752,10 +74803,10 @@ var OperationsOverviewHeader = React141__default.memo(({
           {
             ref: filterButtonRef,
             onClick: handleFilterToggle,
-            className: `flex items-center gap-2 px-3 py-1.5 rounded-lg border text-sm font-medium transition-all shadow-sm ${isFilterOpen || trendMode !== "all" ? "border-blue-500 bg-blue-50 text-blue-700 ring-1 ring-blue-500" : "border-slate-200 bg-white text-slate-700 hover:bg-slate-50"}`,
+            className: `flex items-center gap-2 px-3 py-1.5 rounded-lg border text-sm font-medium transition-all shadow-sm ${isFilterOpen || activeFilterCount > 0 ? "border-blue-500 bg-blue-50 text-blue-700 ring-1 ring-blue-500" : "border-slate-200 bg-white text-slate-700 hover:bg-slate-50"}`,
             "aria-label": "Open filters",
             children: [
-              /* @__PURE__ */ jsx(Filter, { className: `w-[18px] h-[18px] ${trendMode !== "all" ? "text-blue-600" : "text-slate-500"}` }),
+              /* @__PURE__ */ jsx(Filter, { className: `w-[18px] h-[18px] ${activeFilterCount > 0 ? "text-blue-600" : "text-slate-500"}` }),
               "Filters",
               /* @__PURE__ */ jsx(ChevronDown, { className: `w-4 h-4 ml-0.5 transition-transform duration-200 ${isFilterOpen ? "rotate-180" : ""}` })
             ]
@@ -74766,40 +74817,94 @@ var OperationsOverviewHeader = React141__default.memo(({
     isFilterOpen ? /* @__PURE__ */ jsxs("div", { ref: filterRef, className: "absolute right-3 sm:right-4 md:right-5 lg:right-6 top-full mt-2 w-72 bg-white rounded-xl shadow-xl border border-gray-100 p-4 z-50", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-3", children: [
         /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-gray-900", children: "Filter View" }),
-        trendMode !== "all" ? /* @__PURE__ */ jsx(
+        activeFilterCount > 0 ? /* @__PURE__ */ jsx(
           "button",
           {
-            onClick: () => {
-              onTrendModeChange("all");
-              setIsFilterOpen(false);
-            },
+            onClick: handleClearAllFilters,
             className: "text-xs text-red-600 hover:text-red-700 font-medium",
             children: "Clear all"
           }
         ) : null
       ] }),
-      /* @__PURE__ */ jsx("div", { className: "space-y-3", children: /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
-        /* @__PURE__ */ jsx("label", { className: "text-xs font-medium text-gray-500 uppercase tracking-wide ml-1", children: "Shift" }),
-        /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsxs(
-          "select",
-          {
-            value: trendMode,
-            onChange: handleTrendModeChange,
-            className: "w-full appearance-none pl-3 pr-8 py-2 text-sm bg-gray-50 border border-gray-200 hover:border-gray-300 rounded-lg text-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:bg-white transition-all cursor-pointer",
-            style: {
-              backgroundImage: `url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e")`,
-              backgroundPosition: "right 0.75rem center",
-              backgroundRepeat: "no-repeat",
-              backgroundSize: "1.2em 1.2em"
-            },
-            children: [
-              /* @__PURE__ */ jsx("option", { value: "all", children: "All Shifts" }),
-              /* @__PURE__ */ jsx("option", { value: "day", children: "Day Shift" }),
-              /* @__PURE__ */ jsx("option", { value: "night", children: "Night Shift" })
-            ]
-          }
-        ) })
-      ] }) })
+      /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+        /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ jsx("label", { className: "text-xs font-medium text-gray-500 uppercase tracking-wide ml-1", children: "Shift" }),
+          /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsxs(
+            "select",
+            {
+              value: trendMode,
+              onChange: handleTrendModeChange,
+              className: "w-full appearance-none pl-3 pr-8 py-2 text-sm bg-gray-50 border border-gray-200 hover:border-gray-300 rounded-lg text-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:bg-white transition-all cursor-pointer",
+              style: {
+                backgroundImage: `url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e")`,
+                backgroundPosition: "right 0.75rem center",
+                backgroundRepeat: "no-repeat",
+                backgroundSize: "1.2em 1.2em"
+              },
+              children: [
+                /* @__PURE__ */ jsx("option", { value: "all", children: "All Shifts" }),
+                /* @__PURE__ */ jsx("option", { value: "day", children: "Day Shift" }),
+                /* @__PURE__ */ jsx("option", { value: "night", children: "Night Shift" })
+              ]
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-1", ref: linesDropdownRef, children: [
+          /* @__PURE__ */ jsx("label", { className: "text-xs font-medium text-gray-500 uppercase tracking-wide ml-1", children: "Lines" }),
+          /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: () => setIsLinesDropdownOpen((prev) => !prev),
+                className: "w-full flex items-center justify-between pl-3 pr-3 py-2 text-sm bg-gray-50 border border-gray-200 hover:border-gray-300 rounded-lg text-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:bg-white transition-all cursor-pointer text-left",
+                children: [
+                  /* @__PURE__ */ jsx("span", { className: "truncate pr-2", children: isAllLinesSelected ? "All Lines" : selectedLineIds.length === 1 ? lineOptions.find((l) => l.id === selectedLineIds[0])?.name || "1 Line Selected" : `${selectedLineIds.length} Lines Selected` }),
+                  /* @__PURE__ */ jsx(ChevronDown, { className: `w-4 h-4 text-gray-500 flex-shrink-0 transition-transform ${isLinesDropdownOpen ? "rotate-180" : ""}` })
+                ]
+              }
+            ),
+            isLinesDropdownOpen ? /* @__PURE__ */ jsxs("div", { className: "absolute top-full left-0 right-0 mt-1 max-h-48 overflow-y-auto rounded-lg border border-gray-200 bg-white shadow-lg p-1.5 space-y-0.5 z-[60]", children: [
+              /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-2.5 rounded-md px-2 py-1.5 text-sm text-gray-900 hover:bg-gray-50 cursor-pointer", children: [
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    type: "checkbox",
+                    className: "h-4 w-4 rounded border-slate-300 text-blue-600 focus:ring-blue-500",
+                    checked: isAllLinesSelected,
+                    onChange: handleAllLinesToggle
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { className: "font-medium", children: "All Lines" })
+              ] }),
+              lineOptions.map((line) => {
+                const isChecked = selectedLineIdSet.has(line.id);
+                const disableUncheck = isChecked && selectedLineIds.length <= 1;
+                return /* @__PURE__ */ jsxs(
+                  "label",
+                  {
+                    className: `flex items-center gap-2.5 rounded-md px-2 py-1.5 text-sm cursor-pointer transition-colors ${disableUncheck ? "text-gray-400 hover:bg-transparent" : "text-gray-800 hover:bg-gray-50"}`,
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        "input",
+                        {
+                          type: "checkbox",
+                          className: "h-4 w-4 rounded border-slate-300 text-blue-600 focus:ring-blue-500 disabled:opacity-40",
+                          checked: isChecked,
+                          disabled: disableUncheck,
+                          onChange: () => handleLineToggle(line.id)
+                        }
+                      ),
+                      /* @__PURE__ */ jsx("span", { className: "truncate", children: line.name })
+                    ]
+                  },
+                  line.id
+                );
+              })
+            ] }) : null
+          ] })
+        ] })
+      ] })
     ] }) : null
   ] }) });
 });
@@ -75698,6 +75803,7 @@ var PlantHeadView = () => {
   const [dateRange, setDateRange] = React141__default.useState(() => getCurrentWeekToDateRange(appTimezone));
   const [usesThisWeekComparison, setUsesThisWeekComparison] = React141__default.useState(true);
   const [trendMode, setTrendMode] = React141__default.useState("all");
+  const [selectedLineIds, setSelectedLineIds] = React141__default.useState([]);
   React141__default.useEffect(() => {
     trackCorePageView("Operations Overview", {
       dashboard_surface: "operations_overview"
@@ -75716,9 +75822,27 @@ var PlantHeadView = () => {
     () => normalizedLineIds.join(","),
     [normalizedLineIds]
   );
+  const lineOptions = React141__default.useMemo(
+    () => normalizedLineIds.map((lineId) => ({
+      id: lineId,
+      name: getLineDisplayName(entityConfig, lineId)
+    })),
+    [entityConfig, normalizedLineIds]
+  );
+  React141__default.useEffect(() => {
+    setSelectedLineIds((previous) => {
+      if (normalizedLineIds.length === 0) return [];
+      const previousSet = new Set(previous);
+      const next = normalizedLineIds.filter((lineId) => previousSet.has(lineId));
+      if (next.length === 0) {
+        return normalizedLineIds;
+      }
+      return next;
+    });
+  }, [lineIdsKey, normalizedLineIds]);
   const scopedLineIds = React141__default.useMemo(
-    () => lineIdsKey ? lineIdsKey.split(",") : [],
-    [lineIdsKey]
+    () => selectedLineIds.length > 0 ? selectedLineIds : normalizedLineIds,
+    [normalizedLineIds, selectedLineIds]
   );
   const initializedTimezoneRef = React141__default.useRef(appTimezone);
   React141__default.useEffect(() => {
@@ -75746,6 +75870,16 @@ var PlantHeadView = () => {
   const handleTrendModeChange = React141__default.useCallback((mode) => {
     setTrendMode(mode);
   }, []);
+  const handleSelectedLineIdsChange = React141__default.useCallback((lineIds) => {
+    if (normalizedLineIds.length === 0) {
+      setSelectedLineIds([]);
+      return;
+    }
+    const uniqueSelected = Array.from(new Set(lineIds));
+    const selectedSet = new Set(uniqueSelected);
+    const next = normalizedLineIds.filter((lineId) => selectedSet.has(lineId));
+    setSelectedLineIds(next.length > 0 ? next : normalizedLineIds);
+  }, [normalizedLineIds]);
   const buildLineMonthlyHistoryUrl = React141__default.useCallback((lineId) => {
     const rangeStartDate = parseDateKeyToDate(dateRange.startKey);
     const params = new URLSearchParams();
@@ -75812,10 +75946,13 @@ var PlantHeadView = () => {
       {
         dateRange,
         trendMode,
+        lineOptions,
+        selectedLineIds: scopedLineIds,
         appTimezone,
         mobileMenuContext,
         onDateRangeChange: handleDateRangeChange,
-        onTrendModeChange: handleTrendModeChange
+        onTrendModeChange: handleTrendModeChange,
+        onSelectedLineIdsChange: handleSelectedLineIdsChange
       }
     ),
     /* @__PURE__ */ jsxs("div", { className: "p-4 sm:p-6 pb-6 max-w-[1800px] mx-auto w-full flex-1 min-h-0 overflow-y-auto flex flex-col gap-5", children: [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@optifye/dashboard-core",
-  "version": "6.11.8",
+  "version": "6.11.9",
   "description": "Reusable UI & logic for Optifye dashboard",
   "main": "dist/index.js",
   "module": "dist/index.mjs",