@optifye/dashboard-core 6.10.5 → 6.10.6

package/dist/index.mjs

@@ -28969,6 +28969,33 @@ var VideoControls = ({
     }
   );
 };
+
+// src/lib/utils/r2Detection.ts
+function isR2WorkerUrl(url, r2WorkerDomain) {
+  if (!url || !r2WorkerDomain) return false;
+  try {
+    const workerDomain = new URL(r2WorkerDomain).hostname;
+    return url.includes(workerDomain);
+  } catch {
+    return url.includes(r2WorkerDomain.replace(/https?:\/\//, ""));
+  }
+}
+
+// src/lib/services/hlsAuthService.ts
+async function getAuthTokenForHls(supabase) {
+  try {
+    const { data: { session } } = await supabase.auth.getSession();
+    if (!session?.access_token) {
+      console.warn("[HLS Auth] No active session, R2 streaming may fail");
+      return null;
+    }
+    console.log("[HLS Auth] Retrieved token for HLS.js requests");
+    return session.access_token;
+  } catch (error) {
+    console.error("[HLS Auth] Error getting auth token:", error);
+    return null;
+  }
+}
 var ERROR_MAPPING = {
   "networkError": {
     code: 2,
@@ -29091,6 +29118,7 @@ var HlsVideoPlayer = forwardRef(({
   onSeeked,
   onClick
 }, ref) => {
+  const supabase = useSupabase();
   const videoContainerRef = useRef(null);
   const videoRef = useRef(null);
   const hlsRef = useRef(null);
@@ -29218,14 +29246,49 @@ var HlsVideoPlayer = forwardRef(({
       dispose: () => dispose()
     };
   }, [dispose]);
-  const initializePlayer = useCallback(() => {
+  const initializePlayer = useCallback(async () => {
     if (!videoRef.current || !src) return;
     const video = videoRef.current;
     const player = playerLikeObject();
+    let authToken = null;
+    try {
+      authToken = await getAuthTokenForHls(supabase);
+      if (authToken) {
+        console.log("[HLS Auth] Retrieved token for R2 streaming");
+      } else {
+        console.warn("[HLS Auth] No active session - R2 streaming may fail");
+      }
+    } catch (error) {
+      console.error("[HLS Auth] Error retrieving token:", error);
+    }
+    const r2WorkerDomain = "https://r2-stream-proxy.optifye-r2.workers.dev";
     const mergedHlsConfig = {
       ...BASE_HLS_CONFIG,
       ...stableHlsConfigRef.current || {},
-      ...stableOptionsRef.current || {}
+      ...stableOptionsRef.current || {},
+      // Modern HLS.js uses Fetch API - override fetch to add Authorization header
+      fetchSetup: function(context, initParams) {
+        const url = context.url;
+        console.log("[HLS fetchSetup] Request URL:", url);
+        console.log("[HLS fetchSetup] R2 Worker domain:", r2WorkerDomain);
+        console.log("[HLS fetchSetup] Token available:", !!authToken);
+        const isR2 = isR2WorkerUrl(url, r2WorkerDomain);
+        console.log("[HLS fetchSetup] Is R2 Worker URL:", isR2);
+        if (isR2) {
+          if (authToken) {
+            initParams.headers = {
+              ...initParams.headers,
+              "Authorization": `Bearer ${authToken}`
+            };
+            console.log("[HLS Auth] \u2705 Injected JWT for R2 request:", url);
+          } else {
+            console.warn("[HLS Auth] \u26A0\uFE0F No token available for R2 request:", url);
+          }
+        } else {
+          console.log("[HLS Auth] CloudFront URL - no auth needed:", url);
+        }
+        return new Request(url, initParams);
+      }
     };
     cleanupBlobUrl();
     const isHLS = src.endsWith(".m3u8") || src.startsWith("#EXTM3U");
@@ -29264,9 +29327,20 @@ var HlsVideoPlayer = forwardRef(({
               let errorInfo;
               switch (data.type) {
                 case ErrorTypes.NETWORK_ERROR:
-                  errorInfo = ERROR_MAPPING.networkError;
-                  console.log("[HlsVideoPlayer] Attempting to recover from network error");
-                  hls.startLoad();
+                  if (data.response?.code === 401) {
+                    errorInfo = {
+                      code: 401,
+                      type: "recoverable",
+                      message: "Authentication expired. Please refresh the page.",
+                      canRetry: true,
+                      details: "JWT_EXPIRED"
+                    };
+                    console.error("[HLS Auth] 401 Unauthorized - token may be expired");
+                  } else {
+                    errorInfo = ERROR_MAPPING.networkError;
+                    console.log("[HlsVideoPlayer] Attempting to recover from network error");
+                    hls.startLoad();
+                  }
                   break;
                 case ErrorTypes.MEDIA_ERROR:
                   errorInfo = ERROR_MAPPING.mediaError;
@@ -29311,8 +29385,19 @@ var HlsVideoPlayer = forwardRef(({
               let errorInfo;
               switch (data.type) {
                 case ErrorTypes.NETWORK_ERROR:
-                  errorInfo = ERROR_MAPPING.networkError;
-                  hls.startLoad();
+                  if (data.response?.code === 401) {
+                    errorInfo = {
+                      code: 401,
+                      type: "recoverable",
+                      message: "Authentication expired. Please refresh the page.",
+                      canRetry: true,
+                      details: "JWT_EXPIRED"
+                    };
+                    console.error("[HLS Auth] 401 Unauthorized - token may be expired");
+                  } else {
+                    errorInfo = ERROR_MAPPING.networkError;
+                    hls.startLoad();
+                  }
                   break;
                 case ErrorTypes.MEDIA_ERROR:
                   errorInfo = ERROR_MAPPING.mediaError;
@@ -29463,7 +29548,10 @@ var HlsVideoPlayer = forwardRef(({
     configVersion
   ]);
   useEffect(() => {
-    const cleanup = initializePlayer();
+    let cleanup;
+    initializePlayer().then((cleanupFn) => {
+      cleanup = cleanupFn;
+    });
     return () => {
       cleanup?.();
       if (hlsRef.current) {
@@ -31670,6 +31758,30 @@ var FileManagerFilters = ({
     if (node.type === "category" || node.type === "percentile-category") {
       toggleExpanded(node.id);
       onFilterChange(node.id);
+      if (node.id === "fast-cycles") {
+        trackCoreEvent("Fast Clips Clicked", {
+          workspaceId,
+          date,
+          shift,
+          count: node.count || 0,
+          percentile: filterState.percentile
+        });
+      } else if (node.id === "slow-cycles") {
+        trackCoreEvent("Slow Clips Clicked", {
+          workspaceId,
+          date,
+          shift,
+          count: node.count || 0,
+          percentile: filterState.percentile
+        });
+      } else if (node.id === "cycle_completion") {
+        trackCoreEvent("Cycle Completions Clicked", {
+          workspaceId,
+          date,
+          shift,
+          count: node.count || 0
+        });
+      }
       if (node.id !== "idle_time" && idleLabelFilter) {
         setIdleLabelFilter(null);
       }
@@ -37184,11 +37296,6 @@ var LinePdfGenerator = ({
       doc.setLineWidth(0.8);
       doc.line(20, 118, 190, 118);
       const hourlyOverviewStartY = 123;
-      doc.setFontSize(18);
-      doc.setFont("helvetica", "bold");
-      doc.setTextColor(40, 40, 40);
-      doc.text("Hourly Output Overview", 20, 133);
-      doc.setTextColor(0, 0, 0);
       const getHourlyTimeRanges = (startTimeStr, endTimeStr) => {
         const [hours, minutes] = startTimeStr.split(":");
         const startHour = parseInt(hours);
@@ -37379,23 +37486,43 @@ var LinePdfGenerator = ({
           return Math.round(lineInfo.metrics.current_output / shiftDuration);
         });
       }
-      const tableHeaderY = 143;
-      const tableStartY = 151;
+      const tableHeaderY = 146;
+      const tableStartY = 153;
       const rowSpacing = 8;
       const bottomPadding = 8;
       const hourlyTableHeight = hourlyTimeRanges.length * rowSpacing;
       const backgroundHeight = tableStartY - hourlyOverviewStartY + hourlyTableHeight + bottomPadding;
       doc.setFillColor(245, 245, 245);
       doc.roundedRect(15, hourlyOverviewStartY, 180, backgroundHeight, 3, 3, "F");
+      doc.setFontSize(18);
+      doc.setFont("helvetica", "bold");
+      doc.setTextColor(40, 40, 40);
+      doc.text("Hourly Performance", 20, 133);
+      doc.setTextColor(0, 0, 0);
+      const gridTopY = 139;
+      const headerBottomY = 148;
+      const colBoundaries = [20, 70, 100, 130, 155, 190];
+      const totalRows = hourlyTimeRanges.length;
+      const gridBottomY = headerBottomY + totalRows * rowSpacing;
+      const tableHeight = gridBottomY - gridTopY;
+      doc.setFillColor(255, 255, 255);
+      doc.roundedRect(20, gridTopY, 170, tableHeight, 2, 2, "F");
+      doc.setDrawColor(230, 230, 230);
+      doc.setLineWidth(0.2);
+      doc.roundedRect(20, gridTopY, 170, tableHeight, 2, 2, "S");
+      doc.setDrawColor(200, 200, 200);
+      doc.setLineWidth(0.3);
+      doc.line(20, headerBottomY, 190, headerBottomY);
+      colBoundaries.slice(1, -1).forEach((x) => {
+        doc.line(x, gridTopY, x, gridBottomY);
+      });
       doc.setFontSize(11);
       doc.setFont("helvetica", "bold");
       doc.text("Time Range", 25, tableHeaderY);
-      doc.text("Output", 80, tableHeaderY);
-      doc.text("Target", 125, tableHeaderY);
-      doc.text("Status", 170, tableHeaderY);
-      doc.setLineWidth(0.3);
-      doc.setDrawColor(200, 200, 200);
-      doc.line(20, 146, 190, 146);
+      doc.text("Output", 75, tableHeaderY);
+      doc.text("Target", 105, tableHeaderY);
+      doc.text("Status", 135, tableHeaderY);
+      doc.text("Remarks", 160, tableHeaderY);
       doc.setFont("helvetica", "normal");
       let yPos = tableStartY;
       const lineDateForTable = new Date(lineInfo.date);
@@ -37417,20 +37544,25 @@ var LinePdfGenerator = ({
         const dataCollected = !isTodayForTable || hourNumber < currentHour;
         const outputStr = dataCollected ? actualOutput.toString() : "TBD";
         const targetStr = targetOutputPerHour.toString();
+        if (index < totalRows - 1) {
+          const rowBottomY = headerBottomY + (index + 1) * rowSpacing;
+          doc.setDrawColor(200, 200, 200);
+          doc.line(20, rowBottomY, 190, rowBottomY);
+        }
         doc.text(timeRange, 25, yPos);
-        doc.text(outputStr, 80, yPos);
-        doc.text(targetStr, 125, yPos);
+        doc.text(outputStr, 75, yPos);
+        doc.text(targetStr, 105, yPos);
         if (!dataCollected) {
           doc.setTextColor(100, 100, 100);
-          doc.text("-", 170, yPos);
+          doc.text("-", 135, yPos);
         } else if (actualOutput >= targetOutputPerHour) {
           doc.setTextColor(0, 171, 69);
           doc.setFont("ZapfDingbats", "normal");
-          doc.text("4", 170, yPos);
+          doc.text("4", 135, yPos);
           doc.setFont("helvetica", "normal");
         } else {
           doc.setTextColor(227, 67, 41);
-          doc.text("\xD7", 170, yPos);
+          doc.text("\xD7", 135, yPos);
         }
         doc.setTextColor(0, 0, 0);
         yPos += rowSpacing;
@@ -37438,7 +37570,7 @@ var LinePdfGenerator = ({
       doc.addPage();
       yPos = addHeaderPage2();
       const workspaceSectionStartY = yPos;
-      const sortedWorkspaces = [...workspaceData].sort((a, b) => (a.efficiency || 0) - (b.efficiency || 0)).slice(0, 10);
+      const sortedWorkspaces = [...workspaceData].sort((a, b) => (a.efficiency || 0) - (b.efficiency || 0)).slice(0, 3);
       const wsRowCount = sortedWorkspaces.length > 0 ? sortedWorkspaces.length : 1;
       const wsTableHeight = 10 + 8 + 7 + wsRowCount * 8 + 8;
       doc.setFillColor(245, 245, 245);
@@ -37446,28 +37578,45 @@ var LinePdfGenerator = ({
       doc.setFontSize(18);
       doc.setFont("helvetica", "bold");
       doc.setTextColor(40, 40, 40);
-      doc.text("Poorest Performing Workspaces", 20, yPos);
+      doc.text("Poorest Performing Workspaces", 20, yPos + 10);
       doc.setTextColor(0, 0, 0);
-      yPos += 10;
+      yPos += 20;
+      const wsGridTopY = yPos - 5;
+      const wsHeaderBottomY = wsGridTopY + 8;
+      const wsColBoundaries = [20, 80, 140, 190];
+      const wsGridBottomY = wsHeaderBottomY + wsRowCount * 8;
+      const wsTableTotalHeight = wsGridBottomY - wsGridTopY;
+      doc.setFillColor(255, 255, 255);
+      doc.roundedRect(20, wsGridTopY, 170, wsTableTotalHeight, 2, 2, "F");
+      doc.setDrawColor(230, 230, 230);
+      doc.setLineWidth(0.2);
+      doc.roundedRect(20, wsGridTopY, 170, wsTableTotalHeight, 2, 2, "S");
+      doc.setDrawColor(200, 200, 200);
+      doc.setLineWidth(0.3);
+      doc.line(20, wsHeaderBottomY, 190, wsHeaderBottomY);
+      wsColBoundaries.slice(1, -1).forEach((x) => {
+        doc.line(x, wsGridTopY, x, wsGridBottomY);
+      });
       doc.setFontSize(11);
       doc.setFont("helvetica", "bold");
-      yPos += 5;
+      yPos = wsGridTopY + 5.5;
       doc.text("Workspace", 25, yPos);
       doc.text("Current/Target", 85, yPos);
       doc.text("Efficiency", 145, yPos);
-      yPos += 3;
-      doc.setLineWidth(0.3);
-      doc.setDrawColor(200, 200, 200);
-      doc.line(20, yPos, 190, yPos);
       doc.setFont("helvetica", "normal");
-      yPos += 7;
+      yPos = wsHeaderBottomY + 5.5;
       if (sortedWorkspaces.length === 0) {
         doc.text("No workspace data available", 25, yPos);
-        yPos += 10;
+        yPos += 8;
       } else {
         sortedWorkspaces.forEach((ws, index) => {
           const workspaceName = getWorkspaceDisplayName(ws.workspace_name, lineInfo.line_id);
           const truncatedName = workspaceName.length > 25 ? workspaceName.substring(0, 22) + "..." : workspaceName;
+          if (index < wsRowCount - 1) {
+            const rowBottomY = wsHeaderBottomY + (index + 1) * 8;
+            doc.setDrawColor(200, 200, 200);
+            doc.line(20, rowBottomY, 190, rowBottomY);
+          }
           doc.text(truncatedName, 25, yPos);
           doc.text(`${ws.action_count || 0} / ${ws.action_threshold || 0}`, 85, yPos);
           doc.text(`${(ws.efficiency || 0).toFixed(1)}%`, 145, yPos);
@@ -38810,18 +38959,27 @@ var WorkspacePdfGenerator = ({ workspace, className, idleTimeReasons }) => {
       const hourlyTitleY = hasIdleTimeReason ? 198 : 188;
       doc.text("Hourly Performance", 20, hourlyTitleY);
       doc.setTextColor(0, 0, 0);
-      doc.setFontSize(headerFontSize);
-      doc.setFont("helvetica", "bold");
       const baseHeaderY = hasIdleTimeReason ? 208 : 198;
       const headerY = titleFontSize === 16 ? hasIdleTimeReason ? 206 : 196 : baseHeaderY;
-      doc.text("Time Range", 25, headerY);
-      doc.text("Output", 95, headerY);
-      doc.text("Target", 135, headerY);
-      doc.text("Status", 170, headerY);
-      doc.setLineWidth(0.3);
+      const gridTopY = headerY - 5;
+      const headerBottomY = gridTopY + 8;
+      const colBoundaries = [20, 70, 100, 130, 155, 190];
+      const totalRows = hourlyData.length;
+      const gridBottomY = headerBottomY + totalRows * rowHeight;
       doc.setDrawColor(200, 200, 200);
-      const separatorY = headerY + 3;
-      doc.line(20, separatorY, 190, separatorY);
+      doc.setLineWidth(0.3);
+      doc.line(20, gridTopY, 190, gridTopY);
+      doc.line(20, headerBottomY, 190, headerBottomY);
+      colBoundaries.forEach((x) => {
+        doc.line(x, gridTopY, x, gridBottomY);
+      });
+      doc.setFontSize(headerFontSize);
+      doc.setFont("helvetica", "bold");
+      doc.text("Time Range", 25, headerY);
+      doc.text("Output", 75, headerY);
+      doc.text("Target", 105, headerY);
+      doc.text("Status", 135, headerY);
+      doc.text("Remarks", 160, headerY);
       doc.setFontSize(contentFontSize);
       doc.setFont("helvetica", "normal");
       let yPos = tableStartY;
@@ -38852,20 +39010,23 @@ var WorkspacePdfGenerator = ({ workspace, className, idleTimeReasons }) => {
         const dataCollected = !isToday2 || hourNumber < currentHour;
         const outputStr = dataCollected ? output.toString() : "TBD";
         const targetStr = hourlyTarget.toString();
+        const rowBottomY = headerBottomY + (index + 1) * rowHeight;
+        doc.setDrawColor(200, 200, 200);
+        doc.line(20, rowBottomY, 190, rowBottomY);
         doc.text(timeRange, 25, yPos);
-        doc.text(outputStr, 95, yPos);
-        doc.text(targetStr, 135, yPos);
+        doc.text(outputStr, 75, yPos);
+        doc.text(targetStr, 105, yPos);
         if (!dataCollected) {
           doc.setTextColor(100, 100, 100);
-          doc.text("-", 170, yPos);
+          doc.text("-", 135, yPos);
         } else if (output >= hourlyTarget) {
           doc.setTextColor(0, 171, 69);
           doc.setFont("ZapfDingbats", "normal");
-          doc.text("4", 170, yPos);
+          doc.text("4", 135, yPos);
           doc.setFont("helvetica", "normal");
         } else {
           doc.setTextColor(227, 67, 41);
-          doc.text("\xD7", 170, yPos);
+          doc.text("\xD7", 135, yPos);
         }
         doc.setTextColor(0, 0, 0);
         yPos += rowHeight;
@@ -39671,14 +39832,16 @@ var KPICard = ({
           "uppercase tracking-wide sm:tracking-wider"
         ), children: title }),
         /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-0.5 sm:gap-2 flex-wrap", children: [
-          /* @__PURE__ */ jsx("span", { className: clsx(
-            "font-bold text-gray-900 dark:text-gray-50",
-            "text-base sm:text-xl md:text-2xl"
-          ), children: isLoading ? "\u2014" : formattedValue }),
-          suffix && !isLoading && /* @__PURE__ */ jsx("span", { className: clsx(
-            "font-medium text-gray-600 dark:text-gray-300",
-            style.compact ? "text-base" : "text-lg"
-          ), children: suffix }),
+          isLoading ? /* @__PURE__ */ jsx("div", { className: "h-5 sm:h-6 md:h-7 w-12 sm:w-16 md:w-20 bg-gray-200 dark:bg-gray-700 rounded animate-pulse" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("span", { className: clsx(
+              "font-bold text-gray-900 dark:text-gray-50",
+              "text-base sm:text-xl md:text-2xl"
+            ), children: formattedValue }),
+            suffix && /* @__PURE__ */ jsx("span", { className: clsx(
+              "font-medium text-gray-600 dark:text-gray-300",
+              style.compact ? "text-base" : "text-lg"
+            ), children: suffix })
+          ] }),
           !isLoading && trendInfo.shouldShowTrend && trendInfo.trendValue !== "neutral" && title !== "Output" && /* @__PURE__ */ jsx("span", { className: trendInfo.colorClass, children: /* @__PURE__ */ jsx(
             trendInfo.Icon,
             {
@@ -39837,6 +40000,7 @@ var KPIHeader = ({
 };
 var KPISection = memo(({
   kpis,
+  isLoading = false,
   className,
   layout: layout2 = "row",
   gridColumns,
@@ -39845,7 +40009,8 @@ var KPISection = memo(({
   compactCards = false,
   useSrcLayout = false
 }) => {
-  const outputDifference = kpis.outputProgress.current - kpis.outputProgress.idealOutput;
+  const showSkeleton = isLoading || !kpis;
+  const outputDifference = kpis ? kpis.outputProgress.current - kpis.outputProgress.idealOutput : 0;
   const outputIsOnTarget = outputDifference >= 0;
   if (useSrcLayout) {
     return /* @__PURE__ */ jsxs(
@@ -39862,27 +40027,30 @@ var KPISection = memo(({
             KPICard,
             {
               title: "Underperforming",
-              value: "2/3",
-              change: 0
+              value: showSkeleton ? "" : "2/3",
+              change: 0,
+              isLoading: showSkeleton
             }
           ) }),
           /* @__PURE__ */ jsx("div", { className: "flex-shrink-0", children: /* @__PURE__ */ jsx(
             KPICard,
             {
               title: "Efficiency",
-              value: kpis.efficiency.value,
-              change: kpis.efficiency.change,
-              suffix: "%"
+              value: showSkeleton ? "" : kpis.efficiency.value,
+              change: showSkeleton ? 0 : kpis.efficiency.change,
+              suffix: "%",
+              isLoading: showSkeleton
             }
           ) }),
           /* @__PURE__ */ jsx("div", { className: "flex-shrink-0", children: /* @__PURE__ */ jsx(
             KPICard,
             {
               title: "Output Progress",
-              value: `${kpis.outputProgress.current}/${kpis.outputProgress.target}`,
-              change: kpis.outputProgress.change,
+              value: showSkeleton ? "" : `${kpis.outputProgress.current}/${kpis.outputProgress.target}`,
+              change: showSkeleton ? 0 : kpis.outputProgress.change,
               outputDifference,
-              showOutputDetails: true
+              showOutputDetails: !showSkeleton,
+              isLoading: showSkeleton
             }
           ) })
         ]
@@ -39893,34 +40061,30 @@ var KPISection = memo(({
     {
       key: "underperforming",
       title: "Underperforming",
-      value: `${kpis.underperformingWorkers.current}/${kpis.underperformingWorkers.total}`,
-      change: kpis.underperformingWorkers.change
+      value: showSkeleton ? "" : `${kpis.underperformingWorkers.current}/${kpis.underperformingWorkers.total}`,
+      change: showSkeleton ? 0 : kpis.underperformingWorkers.change,
+      suffix: void 0,
+      status: void 0
     },
     {
       key: "efficiency",
       title: "Efficiency",
-      value: kpis.efficiency.value,
-      change: kpis.efficiency.change,
-      suffix: "%"
+      value: showSkeleton ? "" : kpis.efficiency.value,
+      change: showSkeleton ? 0 : kpis.efficiency.change,
+      suffix: "%",
+      status: void 0
     },
     {
       key: "outputProgress",
       title: "Output Progress",
-      value: `${kpis.outputProgress.current}/${kpis.outputProgress.target}`,
-      change: kpis.outputProgress.change,
-      status: {
+      value: showSkeleton ? "" : `${kpis.outputProgress.current}/${kpis.outputProgress.target}`,
+      change: showSkeleton ? 0 : kpis.outputProgress.change,
+      suffix: void 0,
+      status: showSkeleton ? void 0 : {
         tooltipText: outputIsOnTarget ? "On Target" : "Off Target",
         positive: outputIsOnTarget
       }
     }
-    // Only include these additional KPIs if not using the src layout
-    // ...(kpis.qualityCompliance ? [{
-    //   key: 'qualityCompliance',
-    //   title: 'Quality Compliance',
-    //   value: kpis.qualityCompliance.value,
-    //   change: kpis.qualityCompliance.change,
-    //   suffix: '%',
-    // }] : []),
   ];
   return /* @__PURE__ */ jsx(
     KPIGrid,
@@ -39937,7 +40101,8 @@ var KPISection = memo(({
           change: kpi.change,
           suffix: kpi.suffix,
           status: kpi.status,
-          style: { variant: cardVariant, compact: compactCards }
+          style: { variant: cardVariant, compact: compactCards },
+          isLoading: showSkeleton
         },
         kpi.key
       ))
@@ -39946,6 +40111,9 @@ var KPISection = memo(({
 }, (prevProps, nextProps) => {
   const prevKpis = prevProps.kpis;
   const nextKpis = nextProps.kpis;
+  if (prevProps.isLoading !== nextProps.isLoading) return false;
+  if (!prevKpis && !nextKpis) return true;
+  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.underperformingWorkers.current !== nextKpis.underperformingWorkers.current || prevKpis.underperformingWorkers.total !== nextKpis.underperformingWorkers.total) return false;
@@ -45698,7 +45866,8 @@ var TeamUsagePdfGenerator = ({
   usageData,
   daysInRange = 1,
   title = "Team Usage Report",
-  className
+  className,
+  iconOnly = false
 }) => {
   const [isGenerating, setIsGenerating] = useState(false);
   const generatePDF = async () => {
@@ -45878,10 +46047,11 @@ var TeamUsagePdfGenerator = ({
     {
       onClick: generatePDF,
       disabled: isGenerating || !usageData,
-      className: `inline-flex items-center gap-2 rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-200 disabled:opacity-50 disabled:cursor-not-allowed ${className || ""}`,
+      className: `inline-flex items-center gap-2 rounded-lg bg-gray-100 ${iconOnly ? "p-2" : "px-4 py-2"} text-sm font-medium text-gray-700 hover:bg-gray-200 active:bg-gray-300 transition-colors disabled:opacity-50 disabled:cursor-not-allowed ${className || ""}`,
+      "aria-label": iconOnly ? isGenerating ? "Generating PDF..." : "Export PDF" : void 0,
       children: [
-        /* @__PURE__ */ jsx(Download, { className: "h-4 w-4" }),
-        isGenerating ? "Generating..." : "Export PDF"
+        /* @__PURE__ */ jsx(Download, { className: iconOnly ? "h-5 w-5" : "h-4 w-4" }),
+        !iconOnly && (isGenerating ? "Generating..." : "Export PDF")
       ]
     }
   );
@@ -48650,10 +48820,19 @@ function HomeView({
   const [errorMessage, setErrorMessage] = useState(null);
   const [displayNamesInitialized, setDisplayNamesInitialized] = useState(false);
   const [hasInitialDataLoaded, setHasInitialDataLoaded] = useState(false);
+  const KPI_CACHE_KEY = "optifye_kpi_cache";
   const dashboardConfig = useDashboardConfig();
   const entityConfig = useEntityConfig();
   const supabaseClient = useSupabaseClient();
   const { user } = useAuth();
+  const { lines: dbLines } = useLines();
+  const mergedLineNames = useMemo(() => {
+    const merged = { ...lineNames };
+    dbLines.forEach((line) => {
+      merged[line.id] = line.line_name;
+    });
+    return merged;
+  }, [lineNames, dbLines]);
   const isSupervisor = user?.role_level === "supervisor";
   const hasMultipleLines = allLineIds.length > 1;
   const availableLineIds = useMemo(() => {
@@ -48760,6 +48939,42 @@ function HomeView({
     }
     return buildKPIsFromLineMetricsRow(row);
   }, [selectedLineId, factoryViewId, lineMetrics, metricsLoading]);
+  const [cachedKpis, setCachedKpis] = useState(() => {
+    if (typeof window === "undefined") return null;
+    try {
+      const cached = localStorage.getItem(KPI_CACHE_KEY);
+      if (cached) {
+        const parsed = JSON.parse(cached);
+        return parsed[selectedLineId] || parsed[factoryViewId] || null;
+      }
+    } catch (e) {
+    }
+    return null;
+  });
+  useEffect(() => {
+    if (kpis && typeof window !== "undefined") {
+      try {
+        const existing = localStorage.getItem(KPI_CACHE_KEY);
+        const cache = existing ? JSON.parse(existing) : {};
+        cache[selectedLineId] = kpis;
+        localStorage.setItem(KPI_CACHE_KEY, JSON.stringify(cache));
+        setCachedKpis(kpis);
+      } catch (e) {
+      }
+    }
+  }, [kpis, selectedLineId, KPI_CACHE_KEY]);
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    try {
+      const cached = localStorage.getItem(KPI_CACHE_KEY);
+      if (cached) {
+        const parsed = JSON.parse(cached);
+        setCachedKpis(parsed[selectedLineId] || null);
+      }
+    } catch (e) {
+    }
+  }, [selectedLineId, KPI_CACHE_KEY]);
+  const displayKpis = kpis || cachedKpis;
   const {
     activeBreaks: allActiveBreaks,
     isLoading: breaksLoading,
@@ -49061,16 +49276,16 @@ function HomeView({
     // Use stable string representation instead of spreading array
     JSON.stringify(workspaceMetrics.map((w) => `${w.workspace_uuid}-${Math.round(w.efficiency)}-${w.trend}`))
   ]);
-  const memoizedKPIs = useMemo(() => kpis, [
+  const memoizedKPIs = useMemo(() => displayKpis, [
     // Only update reference when values change by at least 1%
-    kpis?.efficiency?.value ? Math.round(kpis.efficiency.value) : null,
-    kpis?.underperformingWorkers?.current,
-    kpis?.underperformingWorkers?.total,
-    kpis?.outputProgress?.current,
-    kpis?.outputProgress?.target,
-    kpis?.avgCycleTime?.value ? Math.round(kpis.avgCycleTime.value * 10) / 10 : null,
+    displayKpis?.efficiency?.value ? Math.round(displayKpis.efficiency.value) : null,
+    displayKpis?.underperformingWorkers?.current,
+    displayKpis?.underperformingWorkers?.total,
+    displayKpis?.outputProgress?.current,
+    displayKpis?.outputProgress?.target,
+    displayKpis?.avgCycleTime?.value ? Math.round(displayKpis.avgCycleTime.value * 10) / 10 : null,
     // Round to 1 decimal
-    kpis?.qualityCompliance?.value ? Math.round(kpis.qualityCompliance.value) : null
+    displayKpis?.qualityCompliance?.value ? Math.round(displayKpis.qualityCompliance.value) : null
   ]);
   useEffect(() => {
     setIsHydrated(true);
@@ -49088,7 +49303,7 @@ function HomeView({
     trackCoreEvent("Home Line Filter Changed", {
       previous_line_id: selectedLineId,
       new_line_id: value,
-      line_name: lineNames[value] || (value === factoryViewId ? "All Lines" : `Line ${value.substring(0, 4)}`)
+      line_name: mergedLineNames[value] || (value === factoryViewId ? "All Lines" : `Line ${value.substring(0, 4)}`)
     });
     try {
       sessionStorage.setItem(LINE_FILTER_STORAGE_KEY, value);
@@ -49122,9 +49337,9 @@ function HomeView({
     }
     return /* @__PURE__ */ jsxs(Select, { onValueChange: handleLineChange, defaultValue: selectedLineId, children: [
       /* @__PURE__ */ jsx(SelectTrigger, { className: "w-full sm:w-[200px] bg-white border border-gray-200 shadow-sm rounded-md h-9 sm:h-9 text-xs sm:text-sm px-2 sm:px-3", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Select a line" }) }),
-      /* @__PURE__ */ jsx(SelectContent, { className: "z-50 bg-white shadow-lg border border-gray-200 rounded-md text-xs sm:text-sm", children: availableLineIds.map((id3) => /* @__PURE__ */ jsx(SelectItem, { value: id3, children: lineNames[id3] || (id3 === factoryViewId ? "All Lines" : `Line ${id3.substring(0, 4)}`) }, id3)) })
+      /* @__PURE__ */ jsx(SelectContent, { className: "z-50 bg-white shadow-lg border border-gray-200 rounded-md text-xs sm:text-sm", children: availableLineIds.map((id3) => /* @__PURE__ */ jsx(SelectItem, { value: id3, children: mergedLineNames[id3] || (id3 === factoryViewId ? "All Lines" : `Line ${id3.substring(0, 4)}`) }, id3)) })
     ] });
-  }, [availableLineIds, handleLineChange, selectedLineId, lineNames, factoryViewId, allLineIds.length]);
+  }, [availableLineIds, handleLineChange, selectedLineId, mergedLineNames, factoryViewId, allLineIds.length]);
   const isInitialLoading = !isHydrated || displayNamesLoading || !displayNamesInitialized;
   const isDataLoading = metricsLoading;
   if (isInitialLoading) {
@@ -49153,7 +49368,7 @@ function HomeView({
               lineTitle,
               lineId: selectedLineId === factoryViewId ? allLineIds[0] : selectedLineId,
               className: "w-full",
-              headerControls: memoizedKPIs ? /* @__PURE__ */ jsx(KPISection2, { kpis: memoizedKPIs, className: "w-full sm:w-auto" }) : null
+              headerControls: /* @__PURE__ */ jsx(KPISection2, { kpis: memoizedKPIs, isLoading: !memoizedKPIs, className: "w-full sm:w-auto" })
             }
           ) }) }),
           /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto sm:overflow-hidden relative", children: [
@@ -56442,35 +56657,62 @@ var TeamManagementView = ({
     ) }) });
   }
   return /* @__PURE__ */ jsxs("div", { className: cn("min-h-screen bg-slate-50", className), children: [
-    /* @__PURE__ */ jsx("div", { className: "sticky top-0 z-10 bg-white border-b border-gray-200 shadow-sm", children: /* @__PURE__ */ jsx("div", { className: "px-4 sm:px-6 lg:px-8 py-4", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-      /* @__PURE__ */ jsx("div", { className: "flex items-center gap-4", children: /* @__PURE__ */ jsx(BackButtonMinimal, { onClick: handleBack, text: "Back" }) }),
-      /* @__PURE__ */ jsxs("div", { className: "flex-1 flex flex-col items-center", children: [
-        /* @__PURE__ */ jsx("h1", { className: "text-2xl lg:text-3xl font-semibold text-gray-900 text-center", children: pageTitle }),
-        /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500 mt-1 text-center px-4", children: pageDescription })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-        canViewUsageStats && /* @__PURE__ */ jsx(
-          TeamUsagePdfGenerator,
-          {
-            users,
-            usageData,
-            daysInRange: usageDateRange.daysElapsed,
-            title: "Team Usage Report"
-          }
-        ),
-        canAddUsers && /* @__PURE__ */ jsxs(
-          "button",
-          {
-            onClick: () => setIsAddUserDialogOpen(true),
-            className: "inline-flex items-center gap-2 px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700 shadow-sm transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500",
-            children: [
-              /* @__PURE__ */ jsx(UserPlus, { className: "w-4 h-4" }),
-              /* @__PURE__ */ jsx("span", { children: "Add User" })
-            ]
-          }
-        )
+    /* @__PURE__ */ jsx("div", { className: "sticky top-0 z-10 bg-white border-b border-gray-200 shadow-sm", children: /* @__PURE__ */ jsxs("div", { className: "px-3 sm:px-6 lg:px-8 py-3 sm:py-4", children: [
+      /* @__PURE__ */ jsx("div", { className: "sm:hidden", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsx(BackButtonMinimal, { onClick: handleBack, text: "Back" }),
+        /* @__PURE__ */ jsx("div", { className: "flex-1 flex justify-center", children: /* @__PURE__ */ jsx("h1", { className: "text-base font-semibold text-gray-900 truncate px-2", children: pageTitle }) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          canViewUsageStats && /* @__PURE__ */ jsx(
+            TeamUsagePdfGenerator,
+            {
+              users,
+              usageData,
+              daysInRange: usageDateRange.daysElapsed,
+              title: "Team Usage Report",
+              iconOnly: true
+            }
+          ),
+          canAddUsers && /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: () => setIsAddUserDialogOpen(true),
+              className: "p-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 active:bg-blue-800 transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500",
+              "aria-label": "Add User",
+              children: /* @__PURE__ */ jsx(UserPlus, { className: "w-5 h-5" })
+            }
+          )
+        ] })
+      ] }) }),
+      /* @__PURE__ */ jsxs("div", { className: "hidden sm:flex items-center justify-between", children: [
+        /* @__PURE__ */ jsx("div", { className: "flex items-center gap-4", children: /* @__PURE__ */ jsx(BackButtonMinimal, { onClick: handleBack, text: "Back" }) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex-1 flex flex-col items-center", children: [
+          /* @__PURE__ */ jsx("h1", { className: "text-2xl lg:text-3xl font-semibold text-gray-900 text-center", children: pageTitle }),
+          /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500 mt-1 text-center px-4", children: pageDescription })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+          canViewUsageStats && /* @__PURE__ */ jsx(
+            TeamUsagePdfGenerator,
+            {
+              users,
+              usageData,
+              daysInRange: usageDateRange.daysElapsed,
+              title: "Team Usage Report"
+            }
+          ),
+          canAddUsers && /* @__PURE__ */ jsxs(
+            "button",
+            {
+              onClick: () => setIsAddUserDialogOpen(true),
+              className: "inline-flex items-center gap-2 px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700 shadow-sm transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500",
+              children: [
+                /* @__PURE__ */ jsx(UserPlus, { className: "w-4 h-4" }),
+                /* @__PURE__ */ jsx("span", { children: "Add User" })
+              ]
+            }
+          )
+        ] })
       ] })
-    ] }) }) }),
+    ] }) }),
     /* @__PURE__ */ jsx("main", { className: "px-4 sm:px-6 lg:px-8 py-6", children: /* @__PURE__ */ jsx(
       UserManagementTable,
       {