@optifye/dashboard-core 6.10.36 → 6.10.37

package/dist/index.d.mts

@@ -4070,11 +4070,22 @@ type UseOperationalShiftKeyResult = {
 };
 declare const useOperationalShiftKey: ({ enabled, timezone, shiftConfig, pollIntervalMs, }: UseOperationalShiftKeyParams) => UseOperationalShiftKeyResult;
 
-interface UseKpiTrendsOptions {
+interface KpiTrendGroup {
     lineIds: string[];
     date: string;
     shiftId: number;
+}
+interface UseKpiTrendsOptions {
+    groups: KpiTrendGroup[];
     companyId?: string;
+    /**
+     * Optional refresh token to force re-fetch (e.g., on realtime updates).
+     */
+    refreshKey?: number;
+    /**
+     * Optional flag to bypass backend cache.
+     */
+    forceRefresh?: boolean;
 }
 interface UseKpiTrendsResult {
     trend: KpiTrend | null;

package/dist/index.d.ts

@@ -4070,11 +4070,22 @@ type UseOperationalShiftKeyResult = {
 };
 declare const useOperationalShiftKey: ({ enabled, timezone, shiftConfig, pollIntervalMs, }: UseOperationalShiftKeyParams) => UseOperationalShiftKeyResult;
 
-interface UseKpiTrendsOptions {
+interface KpiTrendGroup {
     lineIds: string[];
     date: string;
     shiftId: number;
+}
+interface UseKpiTrendsOptions {
+    groups: KpiTrendGroup[];
     companyId?: string;
+    /**
+     * Optional refresh token to force re-fetch (e.g., on realtime updates).
+     */
+    refreshKey?: number;
+    /**
+     * Optional flag to bypass backend cache.
+     */
+    forceRefresh?: boolean;
 }
 interface UseKpiTrendsResult {
     trend: KpiTrend | null;

package/dist/index.js

@@ -15007,53 +15007,110 @@ var useKpiTrends = (options) => {
   const [trend, setTrend] = React26.useState(null);
   const [isLoading, setIsLoading] = React26.useState(false);
   const [error, setError] = React26.useState(null);
+  const activeRequestIdRef = React26.useRef(0);
+  const lastParamsKeyRef = React26.useRef(null);
   const params = React26.useMemo(() => {
     const resolvedCompanyId = options?.companyId || entityConfig?.companyId;
     if (!options || !resolvedCompanyId) return null;
-    const line_ids = options.lineIds.filter(Boolean);
-    if (!line_ids.length) return null;
+    const normalizedGroups = (options.groups || []).map((group) => ({
+      lineIds: (group.lineIds || []).filter(Boolean).slice().sort(),
+      date: group.date,
+      shiftId: group.shiftId
+    })).filter((group) => group.lineIds.length > 0 && Boolean(group.date) && group.shiftId !== void 0 && group.shiftId !== null);
+    if (!normalizedGroups.length) return null;
+    const groupsKey = normalizedGroups.map((group) => `${group.date}|${group.shiftId}|${group.lineIds.join(",")}`).sort().join("||");
     return {
-      lineIds: line_ids,
       companyId: resolvedCompanyId,
-      date: options.date,
-      shiftId: options.shiftId
+      groups: normalizedGroups,
+      key: groupsKey
     };
   }, [options, entityConfig?.companyId]);
   React26.useEffect(() => {
     let isMounted = true;
-    if (!params || !supabase) {
+    const refreshKey = options?.refreshKey ?? 0;
+    const paramsKey = params ? `${params.companyId}|${params.key}|${refreshKey}` : null;
+    if (!params || !supabase || !paramsKey) {
       setTrend(null);
+      lastParamsKeyRef.current = null;
+      return;
+    }
+    if (lastParamsKeyRef.current === paramsKey) {
       return;
     }
+    lastParamsKeyRef.current = paramsKey;
+    const requestId = ++activeRequestIdRef.current;
+    const averageNumber = (values) => {
+      const nums = values.filter((value) => typeof value === "number" && Number.isFinite(value));
+      if (!nums.length) return null;
+      return nums.reduce((sum, value) => sum + value, 0) / nums.length;
+    };
+    const aggregateTrends = (trends) => ({
+      efficiency: {
+        delta_pp: averageNumber(trends.map((item) => item.efficiency?.delta_pp)),
+        current: averageNumber(trends.map((item) => item.efficiency?.current)),
+        previous: averageNumber(trends.map((item) => item.efficiency?.previous))
+      },
+      outputProgress: {
+        delta_pp: averageNumber(trends.map((item) => item.outputProgress?.delta_pp)),
+        current: averageNumber(trends.map((item) => item.outputProgress?.current)),
+        previous: averageNumber(trends.map((item) => item.outputProgress?.previous))
+      },
+      underperformingWorkers: {
+        delta_count: averageNumber(trends.map((item) => item.underperformingWorkers?.delta_count)),
+        current: averageNumber(trends.map((item) => item.underperformingWorkers?.current)),
+        previous: averageNumber(trends.map((item) => item.underperformingWorkers?.previous))
+      },
+      avgCycleTime: {
+        delta_seconds: averageNumber(trends.map((item) => item.avgCycleTime?.delta_seconds)),
+        current: averageNumber(trends.map((item) => item.avgCycleTime?.current)),
+        previous: averageNumber(trends.map((item) => item.avgCycleTime?.previous))
+      }
+    });
     const fetchTrend = async () => {
       setIsLoading(true);
       setError(null);
       try {
-        const searchParams = new URLSearchParams();
-        if (params.lineIds.length === 1) {
-          searchParams.append("line_id", params.lineIds[0]);
+        const forceRefresh = options?.forceRefresh;
+        const groupResults = await Promise.all(
+          params.groups.map(async (group) => {
+            const searchParams = new URLSearchParams();
+            if (group.lineIds.length === 1) {
+              searchParams.append("line_id", group.lineIds[0]);
+            } else {
+              searchParams.append("line_ids", group.lineIds.join(","));
+            }
+            searchParams.append("date", group.date);
+            searchParams.append("shift_id", group.shiftId.toString());
+            searchParams.append("company_id", params.companyId);
+            if (forceRefresh) {
+              searchParams.append("force_refresh", "true");
+            }
+            const response = await fetchBackendJson(supabase, `/api/dashboard/line-kpis?${searchParams.toString()}`);
+            return response?.kpis?.trend || null;
+          })
+        );
+        if (!isMounted || requestId !== activeRequestIdRef.current) return;
+        const trends = groupResults.filter((item) => Boolean(item));
+        if (!trends.length) {
+          setTrend(null);
+        } else if (trends.length === 1) {
+          setTrend(trends[0]);
         } else {
-          searchParams.append("line_ids", params.lineIds.join(","));
+          setTrend(aggregateTrends(trends));
         }
-        searchParams.append("date", params.date);
-        searchParams.append("shift_id", params.shiftId.toString());
-        searchParams.append("company_id", params.companyId);
-        const response = await fetchBackendJson(supabase, `/api/dashboard/line-kpis?${searchParams.toString()}`);
-        if (!isMounted) return;
-        setTrend(response?.kpis?.trend || null);
       } catch (err) {
-        if (!isMounted) return;
+        if (!isMounted || requestId !== activeRequestIdRef.current) return;
         setError(err);
         setTrend(null);
       } finally {
-        if (isMounted) setIsLoading(false);
+        if (isMounted && requestId === activeRequestIdRef.current) setIsLoading(false);
       }
     };
     fetchTrend();
     return () => {
       isMounted = false;
     };
-  }, [params, supabase]);
+  }, [params, supabase, options?.refreshKey, options?.forceRefresh]);
   return { trend, isLoading, error };
 };
 var useMonthlyTrend = (params) => {
@@ -17020,12 +17077,16 @@ var aggregateKPIsFromLineMetricsRows = (rows) => {
     (sum, row) => sum + (toNumber(row.ideal_output) || toNumber(row.line_threshold)),
     0
   );
-  const totalWorkspacesAll = rows.reduce((sum, row) => sum + toNumber(row.total_workspaces), 0);
-  const weightedEfficiencySum = rows.reduce(
-    (sum, row) => sum + toNumber(row.avg_efficiency) * toNumber(row.total_workspaces),
-    0
-  );
-  const avgEfficiency = totalWorkspacesAll > 0 ? weightedEfficiencySum / totalWorkspacesAll : 0;
+  const efficiencyValues = rows.map((row) => {
+    const value = row?.avg_efficiency;
+    if (typeof value === "number" && Number.isFinite(value)) return value;
+    if (typeof value === "string" && value.trim() !== "") {
+      const parsed = Number(value);
+      return Number.isFinite(parsed) ? parsed : null;
+    }
+    return null;
+  }).filter((value) => value !== null);
+  const avgEfficiency = efficiencyValues.length > 0 ? efficiencyValues.reduce((sum, value) => sum + value, 0) / efficiencyValues.length : 0;
   const numLines = rows.length;
   const avgCycleTime = numLines > 0 ? rows.reduce((sum, row) => sum + toNumber(row.avg_cycle_time), 0) / numLines : 0;
   const totalUnderperforming = rows.reduce((sum, row) => sum + toNumber(row.underperforming_workspaces), 0);
@@ -45786,7 +45847,7 @@ var KPICard = ({
               style.compact ? "text-base" : "text-lg"
             ), children: suffix })
           ] }),
-          !isLoading && trendInfo.shouldShowTrend && trendInfo.trendValue !== "neutral" && title !== "Output" && (trendMode === "pill" ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: clsx(
+          !isLoading && trendInfo.shouldShowTrend && title !== "Output" && ((trendInfo.trendValue !== "neutral" || change === 0 && showZeroChange) && (trendMode === "pill" ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: clsx(
             "flex items-center gap-1 px-2 py-0.5 rounded-full ml-2",
             trendInfo.bgClass,
             trendInfo.colorClass
@@ -45823,7 +45884,7 @@ var KPICard = ({
               formattedChange,
               "%"
             ] })
-          ] })),
+          ] }))),
           status?.indicator && !isLoading && /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
@@ -45981,7 +46042,7 @@ var KPISection = React26.memo(({
   const outputIsOnTarget = outputDifference >= 0;
   if (useSrcLayout) {
     const effChange = showSkeleton ? 0 : kpis.efficiency.change ?? 0;
-    const effTrend = effChange >= 0 ? "up" : "down";
+    const effTrend = effChange > 0 ? "up" : effChange < 0 ? "down" : "neutral";
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
@@ -46079,8 +46140,11 @@ var KPISection = React26.memo(({
   if (!prevKpis || !nextKpis) return false;
   if (prevKpis === nextKpis) return true;
   if (Math.abs(prevKpis.efficiency.value - nextKpis.efficiency.value) >= 0.5) return false;
+  if (prevKpis.efficiency.change !== nextKpis.efficiency.change) return false;
   if (prevKpis.underperformingWorkers.current !== nextKpis.underperformingWorkers.current || prevKpis.underperformingWorkers.total !== nextKpis.underperformingWorkers.total) return false;
+  if (prevKpis.underperformingWorkers.change !== nextKpis.underperformingWorkers.change) return false;
   if (prevKpis.outputProgress.current !== nextKpis.outputProgress.current || prevKpis.outputProgress.target !== nextKpis.outputProgress.target) return false;
+  if (prevKpis.outputProgress.change !== nextKpis.outputProgress.change) return false;
   if (prevProps.layout !== nextProps.layout || prevProps.cardVariant !== nextProps.cardVariant || prevProps.compactCards !== nextProps.compactCards || prevProps.useSrcLayout !== nextProps.useSrcLayout || prevProps.className !== nextProps.className) return false;
   return true;
 });
@@ -53666,6 +53730,8 @@ function HomeView({
   const [hasInitialDataLoaded, setHasInitialDataLoaded] = React26.useState(false);
   const [showDataLoading, setShowDataLoading] = React26.useState(false);
   const loadingStartRef = React26.useRef(null);
+  const [trendRefreshKey, setTrendRefreshKey] = React26.useState(0);
+  const trendRefreshTimerRef = React26.useRef(null);
   const dashboardConfig = useDashboardConfig();
   const entityConfig = useEntityConfig();
   const supabaseClient = useSupabaseClient();
@@ -53816,6 +53882,20 @@ function HomeView({
     loading: displayNamesLoading,
     error: displayNamesError
   } = useWorkspaceDisplayNames(displayNameLineId, void 0);
+  const handleLineMetricsUpdate = React26.useCallback(() => {
+    if (trendRefreshTimerRef.current) {
+      window.clearTimeout(trendRefreshTimerRef.current);
+    }
+    trendRefreshTimerRef.current = window.setTimeout(() => {
+      setTrendRefreshKey((prev) => prev + 1);
+      trendRefreshTimerRef.current = null;
+    }, 2e3);
+  }, []);
+  React26.useEffect(() => () => {
+    if (trendRefreshTimerRef.current) {
+      window.clearTimeout(trendRefreshTimerRef.current);
+    }
+  }, []);
   const {
     workspaceMetrics,
     lineMetrics,
@@ -53826,32 +53906,59 @@ function HomeView({
     refetch: refetchMetrics
   } = useDashboardMetrics({
     lineId: selectedLineId,
+    onLineMetricsUpdate: handleLineMetricsUpdate,
     userAccessibleLineIds: visibleLineIds
     // Pass user's accessible lines for supervisor filtering
   });
-  const appTimezone = timezone;
-  const defaultTimezone = appTimezone || dashboardConfig?.dateTimeConfig?.defaultTimezone || "UTC";
-  const { shiftId: fallbackShiftId, date: fallbackDate } = React26.useMemo(
-    () => getCurrentShift(defaultTimezone, dashboardConfig?.shiftConfig),
-    [defaultTimezone, dashboardConfig?.shiftConfig]
-  );
-  const trendQuery = React26.useMemo(() => {
+  const trendGroups = React26.useMemo(() => {
     const lineMetricsRows = lineMetrics || [];
-    const referenceRow = selectedLineId === factoryViewId ? lineMetricsRows[0] : lineMetricsRows.find((r2) => r2?.line_id === selectedLineId);
-    const lineIdsForTrend = selectedLineId === factoryViewId ? visibleLineIds.filter((id3) => id3 !== factoryViewId) : [selectedLineId];
-    const dateForTrend = referenceRow?.date || fallbackDate;
-    const shiftIdForTrend = referenceRow?.shift_id ?? fallbackShiftId;
-    if (!lineIdsForTrend.length || !dateForTrend || shiftIdForTrend === void 0 || shiftIdForTrend === null) {
+    if (!lineMetricsRows.length) return null;
+    if (selectedLineId === factoryViewId) {
+      const candidateLineIds = visibleLineIds.filter((id3) => id3 && id3 !== factoryViewId);
+      if (!candidateLineIds.length) return null;
+      const rowsForLines = lineMetricsRows.filter((row2) => candidateLineIds.includes(row2?.line_id));
+      if (!rowsForLines.length) return null;
+      const groupsMap = /* @__PURE__ */ new Map();
+      rowsForLines.forEach((row2) => {
+        const lineId = row2?.line_id;
+        const date = row2?.date;
+        const shiftId = row2?.shift_id;
+        if (!lineId || !date || shiftId === void 0 || shiftId === null) return;
+        const key = `${date}|${shiftId}`;
+        let group = groupsMap.get(key);
+        if (!group) {
+          group = { date, shiftId, lineIds: /* @__PURE__ */ new Set() };
+          groupsMap.set(key, group);
+        }
+        group.lineIds.add(lineId);
+      });
+      if (!groupsMap.size) return null;
+      return Array.from(groupsMap.values()).map((group) => ({
+        lineIds: Array.from(group.lineIds),
+        date: group.date,
+        shiftId: group.shiftId
+      }));
+    }
+    const row = lineMetricsRows.find((r2) => r2?.line_id === selectedLineId);
+    if (!row?.date || row?.shift_id === void 0 || row?.shift_id === null) {
       return null;
     }
+    return [{
+      lineIds: [selectedLineId],
+      date: row.date,
+      shiftId: row.shift_id
+    }];
+  }, [selectedLineId, factoryViewId, visibleLineIds, lineMetrics]);
+  const trendOptions = React26.useMemo(() => {
+    if (!trendGroups || !userCompanyId) return null;
     return {
-      lineIds: lineIdsForTrend,
-      date: dateForTrend,
-      shiftId: shiftIdForTrend,
-      companyId: userCompanyId
+      groups: trendGroups,
+      companyId: userCompanyId,
+      refreshKey: trendRefreshKey,
+      forceRefresh: trendRefreshKey > 0
     };
-  }, [selectedLineId, factoryViewId, visibleLineIds, lineMetrics, fallbackDate, fallbackShiftId, userCompanyId]);
-  const { trend: kpiTrend } = useKpiTrends(trendQuery);
+  }, [trendGroups, userCompanyId, trendRefreshKey]);
+  const { trend: kpiTrend } = useKpiTrends(trendOptions);
   const hasFlowBuffers = Boolean(metricsMetadata?.hasFlowBuffers);
   React26.useEffect(() => {
     const sample = workspaceMetrics.slice(0, 3).map((workspace) => ({

package/dist/index.mjs

@@ -14978,53 +14978,110 @@ var useKpiTrends = (options) => {
   const [trend, setTrend] = useState(null);
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState(null);
+  const activeRequestIdRef = useRef(0);
+  const lastParamsKeyRef = useRef(null);
   const params = useMemo(() => {
     const resolvedCompanyId = options?.companyId || entityConfig?.companyId;
     if (!options || !resolvedCompanyId) return null;
-    const line_ids = options.lineIds.filter(Boolean);
-    if (!line_ids.length) return null;
+    const normalizedGroups = (options.groups || []).map((group) => ({
+      lineIds: (group.lineIds || []).filter(Boolean).slice().sort(),
+      date: group.date,
+      shiftId: group.shiftId
+    })).filter((group) => group.lineIds.length > 0 && Boolean(group.date) && group.shiftId !== void 0 && group.shiftId !== null);
+    if (!normalizedGroups.length) return null;
+    const groupsKey = normalizedGroups.map((group) => `${group.date}|${group.shiftId}|${group.lineIds.join(",")}`).sort().join("||");
     return {
-      lineIds: line_ids,
       companyId: resolvedCompanyId,
-      date: options.date,
-      shiftId: options.shiftId
+      groups: normalizedGroups,
+      key: groupsKey
     };
   }, [options, entityConfig?.companyId]);
   useEffect(() => {
     let isMounted = true;
-    if (!params || !supabase) {
+    const refreshKey = options?.refreshKey ?? 0;
+    const paramsKey = params ? `${params.companyId}|${params.key}|${refreshKey}` : null;
+    if (!params || !supabase || !paramsKey) {
       setTrend(null);
+      lastParamsKeyRef.current = null;
+      return;
+    }
+    if (lastParamsKeyRef.current === paramsKey) {
       return;
     }
+    lastParamsKeyRef.current = paramsKey;
+    const requestId = ++activeRequestIdRef.current;
+    const averageNumber = (values) => {
+      const nums = values.filter((value) => typeof value === "number" && Number.isFinite(value));
+      if (!nums.length) return null;
+      return nums.reduce((sum, value) => sum + value, 0) / nums.length;
+    };
+    const aggregateTrends = (trends) => ({
+      efficiency: {
+        delta_pp: averageNumber(trends.map((item) => item.efficiency?.delta_pp)),
+        current: averageNumber(trends.map((item) => item.efficiency?.current)),
+        previous: averageNumber(trends.map((item) => item.efficiency?.previous))
+      },
+      outputProgress: {
+        delta_pp: averageNumber(trends.map((item) => item.outputProgress?.delta_pp)),
+        current: averageNumber(trends.map((item) => item.outputProgress?.current)),
+        previous: averageNumber(trends.map((item) => item.outputProgress?.previous))
+      },
+      underperformingWorkers: {
+        delta_count: averageNumber(trends.map((item) => item.underperformingWorkers?.delta_count)),
+        current: averageNumber(trends.map((item) => item.underperformingWorkers?.current)),
+        previous: averageNumber(trends.map((item) => item.underperformingWorkers?.previous))
+      },
+      avgCycleTime: {
+        delta_seconds: averageNumber(trends.map((item) => item.avgCycleTime?.delta_seconds)),
+        current: averageNumber(trends.map((item) => item.avgCycleTime?.current)),
+        previous: averageNumber(trends.map((item) => item.avgCycleTime?.previous))
+      }
+    });
     const fetchTrend = async () => {
       setIsLoading(true);
       setError(null);
       try {
-        const searchParams = new URLSearchParams();
-        if (params.lineIds.length === 1) {
-          searchParams.append("line_id", params.lineIds[0]);
+        const forceRefresh = options?.forceRefresh;
+        const groupResults = await Promise.all(
+          params.groups.map(async (group) => {
+            const searchParams = new URLSearchParams();
+            if (group.lineIds.length === 1) {
+              searchParams.append("line_id", group.lineIds[0]);
+            } else {
+              searchParams.append("line_ids", group.lineIds.join(","));
+            }
+            searchParams.append("date", group.date);
+            searchParams.append("shift_id", group.shiftId.toString());
+            searchParams.append("company_id", params.companyId);
+            if (forceRefresh) {
+              searchParams.append("force_refresh", "true");
+            }
+            const response = await fetchBackendJson(supabase, `/api/dashboard/line-kpis?${searchParams.toString()}`);
+            return response?.kpis?.trend || null;
+          })
+        );
+        if (!isMounted || requestId !== activeRequestIdRef.current) return;
+        const trends = groupResults.filter((item) => Boolean(item));
+        if (!trends.length) {
+          setTrend(null);
+        } else if (trends.length === 1) {
+          setTrend(trends[0]);
         } else {
-          searchParams.append("line_ids", params.lineIds.join(","));
+          setTrend(aggregateTrends(trends));
         }
-        searchParams.append("date", params.date);
-        searchParams.append("shift_id", params.shiftId.toString());
-        searchParams.append("company_id", params.companyId);
-        const response = await fetchBackendJson(supabase, `/api/dashboard/line-kpis?${searchParams.toString()}`);
-        if (!isMounted) return;
-        setTrend(response?.kpis?.trend || null);
       } catch (err) {
-        if (!isMounted) return;
+        if (!isMounted || requestId !== activeRequestIdRef.current) return;
         setError(err);
         setTrend(null);
       } finally {
-        if (isMounted) setIsLoading(false);
+        if (isMounted && requestId === activeRequestIdRef.current) setIsLoading(false);
       }
     };
     fetchTrend();
     return () => {
       isMounted = false;
     };
-  }, [params, supabase]);
+  }, [params, supabase, options?.refreshKey, options?.forceRefresh]);
   return { trend, isLoading, error };
 };
 var useMonthlyTrend = (params) => {
@@ -16991,12 +17048,16 @@ var aggregateKPIsFromLineMetricsRows = (rows) => {
     (sum, row) => sum + (toNumber(row.ideal_output) || toNumber(row.line_threshold)),
     0
   );
-  const totalWorkspacesAll = rows.reduce((sum, row) => sum + toNumber(row.total_workspaces), 0);
-  const weightedEfficiencySum = rows.reduce(
-    (sum, row) => sum + toNumber(row.avg_efficiency) * toNumber(row.total_workspaces),
-    0
-  );
-  const avgEfficiency = totalWorkspacesAll > 0 ? weightedEfficiencySum / totalWorkspacesAll : 0;
+  const efficiencyValues = rows.map((row) => {
+    const value = row?.avg_efficiency;
+    if (typeof value === "number" && Number.isFinite(value)) return value;
+    if (typeof value === "string" && value.trim() !== "") {
+      const parsed = Number(value);
+      return Number.isFinite(parsed) ? parsed : null;
+    }
+    return null;
+  }).filter((value) => value !== null);
+  const avgEfficiency = efficiencyValues.length > 0 ? efficiencyValues.reduce((sum, value) => sum + value, 0) / efficiencyValues.length : 0;
   const numLines = rows.length;
   const avgCycleTime = numLines > 0 ? rows.reduce((sum, row) => sum + toNumber(row.avg_cycle_time), 0) / numLines : 0;
   const totalUnderperforming = rows.reduce((sum, row) => sum + toNumber(row.underperforming_workspaces), 0);
@@ -45757,7 +45818,7 @@ var KPICard = ({
               style.compact ? "text-base" : "text-lg"
             ), children: suffix })
           ] }),
-          !isLoading && trendInfo.shouldShowTrend && trendInfo.trendValue !== "neutral" && title !== "Output" && (trendMode === "pill" ? /* @__PURE__ */ jsxs("span", { className: clsx(
+          !isLoading && trendInfo.shouldShowTrend && title !== "Output" && ((trendInfo.trendValue !== "neutral" || change === 0 && showZeroChange) && (trendMode === "pill" ? /* @__PURE__ */ jsxs("span", { className: clsx(
             "flex items-center gap-1 px-2 py-0.5 rounded-full ml-2",
             trendInfo.bgClass,
             trendInfo.colorClass
@@ -45794,7 +45855,7 @@ var KPICard = ({
               formattedChange,
               "%"
             ] })
-          ] })),
+          ] }))),
           status?.indicator && !isLoading && /* @__PURE__ */ jsx(
             "div",
             {
@@ -45952,7 +46013,7 @@ var KPISection = memo$1(({
   const outputIsOnTarget = outputDifference >= 0;
   if (useSrcLayout) {
     const effChange = showSkeleton ? 0 : kpis.efficiency.change ?? 0;
-    const effTrend = effChange >= 0 ? "up" : "down";
+    const effTrend = effChange > 0 ? "up" : effChange < 0 ? "down" : "neutral";
     return /* @__PURE__ */ jsxs(
       "div",
       {
@@ -46050,8 +46111,11 @@ var KPISection = memo$1(({
   if (!prevKpis || !nextKpis) return false;
   if (prevKpis === nextKpis) return true;
   if (Math.abs(prevKpis.efficiency.value - nextKpis.efficiency.value) >= 0.5) return false;
+  if (prevKpis.efficiency.change !== nextKpis.efficiency.change) return false;
   if (prevKpis.underperformingWorkers.current !== nextKpis.underperformingWorkers.current || prevKpis.underperformingWorkers.total !== nextKpis.underperformingWorkers.total) return false;
+  if (prevKpis.underperformingWorkers.change !== nextKpis.underperformingWorkers.change) return false;
   if (prevKpis.outputProgress.current !== nextKpis.outputProgress.current || prevKpis.outputProgress.target !== nextKpis.outputProgress.target) return false;
+  if (prevKpis.outputProgress.change !== nextKpis.outputProgress.change) return false;
   if (prevProps.layout !== nextProps.layout || prevProps.cardVariant !== nextProps.cardVariant || prevProps.compactCards !== nextProps.compactCards || prevProps.useSrcLayout !== nextProps.useSrcLayout || prevProps.className !== nextProps.className) return false;
   return true;
 });
@@ -53637,6 +53701,8 @@ function HomeView({
   const [hasInitialDataLoaded, setHasInitialDataLoaded] = useState(false);
   const [showDataLoading, setShowDataLoading] = useState(false);
   const loadingStartRef = useRef(null);
+  const [trendRefreshKey, setTrendRefreshKey] = useState(0);
+  const trendRefreshTimerRef = useRef(null);
   const dashboardConfig = useDashboardConfig();
   const entityConfig = useEntityConfig();
   const supabaseClient = useSupabaseClient();
@@ -53787,6 +53853,20 @@ function HomeView({
     loading: displayNamesLoading,
     error: displayNamesError
   } = useWorkspaceDisplayNames(displayNameLineId, void 0);
+  const handleLineMetricsUpdate = useCallback(() => {
+    if (trendRefreshTimerRef.current) {
+      window.clearTimeout(trendRefreshTimerRef.current);
+    }
+    trendRefreshTimerRef.current = window.setTimeout(() => {
+      setTrendRefreshKey((prev) => prev + 1);
+      trendRefreshTimerRef.current = null;
+    }, 2e3);
+  }, []);
+  useEffect(() => () => {
+    if (trendRefreshTimerRef.current) {
+      window.clearTimeout(trendRefreshTimerRef.current);
+    }
+  }, []);
   const {
     workspaceMetrics,
     lineMetrics,
@@ -53797,32 +53877,59 @@ function HomeView({
     refetch: refetchMetrics
   } = useDashboardMetrics({
     lineId: selectedLineId,
+    onLineMetricsUpdate: handleLineMetricsUpdate,
     userAccessibleLineIds: visibleLineIds
     // Pass user's accessible lines for supervisor filtering
   });
-  const appTimezone = timezone;
-  const defaultTimezone = appTimezone || dashboardConfig?.dateTimeConfig?.defaultTimezone || "UTC";
-  const { shiftId: fallbackShiftId, date: fallbackDate } = useMemo(
-    () => getCurrentShift(defaultTimezone, dashboardConfig?.shiftConfig),
-    [defaultTimezone, dashboardConfig?.shiftConfig]
-  );
-  const trendQuery = useMemo(() => {
+  const trendGroups = useMemo(() => {
     const lineMetricsRows = lineMetrics || [];
-    const referenceRow = selectedLineId === factoryViewId ? lineMetricsRows[0] : lineMetricsRows.find((r2) => r2?.line_id === selectedLineId);
-    const lineIdsForTrend = selectedLineId === factoryViewId ? visibleLineIds.filter((id3) => id3 !== factoryViewId) : [selectedLineId];
-    const dateForTrend = referenceRow?.date || fallbackDate;
-    const shiftIdForTrend = referenceRow?.shift_id ?? fallbackShiftId;
-    if (!lineIdsForTrend.length || !dateForTrend || shiftIdForTrend === void 0 || shiftIdForTrend === null) {
+    if (!lineMetricsRows.length) return null;
+    if (selectedLineId === factoryViewId) {
+      const candidateLineIds = visibleLineIds.filter((id3) => id3 && id3 !== factoryViewId);
+      if (!candidateLineIds.length) return null;
+      const rowsForLines = lineMetricsRows.filter((row2) => candidateLineIds.includes(row2?.line_id));
+      if (!rowsForLines.length) return null;
+      const groupsMap = /* @__PURE__ */ new Map();
+      rowsForLines.forEach((row2) => {
+        const lineId = row2?.line_id;
+        const date = row2?.date;
+        const shiftId = row2?.shift_id;
+        if (!lineId || !date || shiftId === void 0 || shiftId === null) return;
+        const key = `${date}|${shiftId}`;
+        let group = groupsMap.get(key);
+        if (!group) {
+          group = { date, shiftId, lineIds: /* @__PURE__ */ new Set() };
+          groupsMap.set(key, group);
+        }
+        group.lineIds.add(lineId);
+      });
+      if (!groupsMap.size) return null;
+      return Array.from(groupsMap.values()).map((group) => ({
+        lineIds: Array.from(group.lineIds),
+        date: group.date,
+        shiftId: group.shiftId
+      }));
+    }
+    const row = lineMetricsRows.find((r2) => r2?.line_id === selectedLineId);
+    if (!row?.date || row?.shift_id === void 0 || row?.shift_id === null) {
       return null;
     }
+    return [{
+      lineIds: [selectedLineId],
+      date: row.date,
+      shiftId: row.shift_id
+    }];
+  }, [selectedLineId, factoryViewId, visibleLineIds, lineMetrics]);
+  const trendOptions = useMemo(() => {
+    if (!trendGroups || !userCompanyId) return null;
     return {
-      lineIds: lineIdsForTrend,
-      date: dateForTrend,
-      shiftId: shiftIdForTrend,
-      companyId: userCompanyId
+      groups: trendGroups,
+      companyId: userCompanyId,
+      refreshKey: trendRefreshKey,
+      forceRefresh: trendRefreshKey > 0
     };
-  }, [selectedLineId, factoryViewId, visibleLineIds, lineMetrics, fallbackDate, fallbackShiftId, userCompanyId]);
-  const { trend: kpiTrend } = useKpiTrends(trendQuery);
+  }, [trendGroups, userCompanyId, trendRefreshKey]);
+  const { trend: kpiTrend } = useKpiTrends(trendOptions);
   const hasFlowBuffers = Boolean(metricsMetadata?.hasFlowBuffers);
   useEffect(() => {
     const sample = workspaceMetrics.slice(0, 3).map((workspace) => ({

package/package.json

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