@optifye/dashboard-core 6.11.7 → 6.11.8

package/dist/index.css

@@ -565,9 +565,6 @@ body {
 .right-1\/2 {
   right: 50%;
 }
-.right-16 {
-  right: 4rem;
-}
 .right-2 {
   right: 0.5rem;
 }
@@ -1110,18 +1107,12 @@ body {
 .h-\[calc\(100\%-3rem\)\] {
   height: calc(100% - 3rem);
 }
-.h-\[calc\(100\%-8rem\)\] {
-  height: calc(100% - 8rem);
-}
 .h-\[calc\(100vh-100px\)\] {
   height: calc(100vh - 100px);
 }
 .h-\[calc\(100vh-10rem\)\] {
   height: calc(100vh - 10rem);
 }
-.h-\[calc\(100vh-12rem\)\] {
-  height: calc(100vh - 12rem);
-}
 .h-\[calc\(100vh-64px\)\] {
   height: calc(100vh - 64px);
 }
@@ -1230,6 +1221,9 @@ body {
 .min-h-\[300px\] {
   min-height: 300px;
 }
+.min-h-\[320px\] {
+  min-height: 320px;
+}
 .min-h-\[400px\] {
   min-height: 400px;
 }
@@ -1245,6 +1239,9 @@ body {
 .min-h-\[80px\] {
   min-height: 80px;
 }
+.min-h-\[calc\(100dvh-12rem\)\] {
+  min-height: calc(100dvh - 12rem);
+}
 .min-h-\[calc\(100vh-100px\)\] {
   min-height: calc(100vh - 100px);
 }
@@ -1380,15 +1377,9 @@ body {
 .w-\[22vw\] {
   width: 22vw;
 }
-.w-\[240px\] {
-  width: 240px;
-}
 .w-\[27vw\] {
   width: 27vw;
 }
-.w-\[280px\] {
-  width: 280px;
-}
 .w-\[340px\] {
   width: 340px;
 }
@@ -1404,6 +1395,12 @@ body {
 .w-\[520px\] {
   width: 520px;
 }
+.w-\[min\(88vw\,240px\)\] {
+  width: min(88vw, 240px);
+}
+.w-\[min\(92vw\,280px\)\] {
+  width: min(92vw, 280px);
+}
 .w-auto {
   width: auto;
 }
@@ -6152,6 +6149,9 @@ input[type=range]:active::-moz-range-thumb {
   .sm\:right-0 {
     right: 0px;
   }
+  .sm\:right-16 {
+    right: 4rem;
+  }
   .sm\:right-3 {
     right: 0.75rem;
   }
@@ -6309,6 +6309,9 @@ input[type=range]:active::-moz-range-thumb {
   .sm\:min-h-\[300px\] {
     min-height: 300px;
   }
+  .sm\:min-h-\[320px\] {
+    min-height: 320px;
+  }
   .sm\:w-12 {
     width: 3rem;
   }
@@ -7025,6 +7028,9 @@ input[type=range]:active::-moz-range-thumb {
   .lg\:hidden {
     display: none;
   }
+  .lg\:aspect-auto {
+    aspect-ratio: auto;
+  }
   .lg\:h-14 {
     height: 3.5rem;
   }
@@ -7046,6 +7052,9 @@ input[type=range]:active::-moz-range-thumb {
   .lg\:h-\[220px\] {
     height: 220px;
   }
+  .lg\:h-\[calc\(100dvh-12rem\)\] {
+    height: calc(100dvh - 12rem);
+  }
   .lg\:h-\[calc\(100vh-12rem\)\] {
     height: calc(100vh - 12rem);
   }
@@ -7100,6 +7109,9 @@ input[type=range]:active::-moz-range-thumb {
   .lg\:flex-\[3\] {
     flex: 3;
   }
+  .lg\:flex-shrink-0 {
+    flex-shrink: 0;
+  }
   .lg\:grid-cols-1 {
     grid-template-columns: repeat(1, minmax(0, 1fr));
   }

package/dist/index.d.mts

@@ -1305,6 +1305,7 @@ interface BottleneckVideoData {
     description: string;
     type: VideoType;
     originalUri: string;
+    capture_fps?: number;
     cycle_time_seconds?: number;
     creation_timestamp?: string;
     percentile?: number;
@@ -1339,6 +1340,10 @@ interface VideoMetadata {
     camera_id?: string;
     workspace_id?: string;
     cycle_time?: number;
+    playlist?: {
+        fps?: number | string;
+        [key: string]: any;
+    };
     sop_name?: string;
     violation_start_frame?: number;
     violation_end_frame?: number;

package/dist/index.d.ts

@@ -1305,6 +1305,7 @@ interface BottleneckVideoData {
     description: string;
     type: VideoType;
     originalUri: string;
+    capture_fps?: number;
     cycle_time_seconds?: number;
     creation_timestamp?: string;
     percentile?: number;
@@ -1339,6 +1340,10 @@ interface VideoMetadata {
     camera_id?: string;
     workspace_id?: string;
     cycle_time?: number;
+    playlist?: {
+        fps?: number | string;
+        [key: string]: any;
+    };
     sop_name?: string;
     violation_start_frame?: number;
     violation_end_frame?: number;

package/dist/index.js

@@ -7438,6 +7438,16 @@ var getClipCycleTimeFrames = (metadata) => {
   }
   return parseFiniteNumber(metadata?.request?.metadata?.cycle_time);
 };
+var getClipCaptureFps = (clip) => {
+  return parseFiniteNumber(clip?.capture_fps) ?? parseFiniteNumber(clip?.metadata?.playlist?.fps) ?? 20;
+};
+var getClipCycleTimeSeconds = (clip) => {
+  const cycleTimeFrames = getClipCycleTimeFrames(clip?.metadata);
+  if (cycleTimeFrames === void 0) {
+    return void 0;
+  }
+  return cycleTimeFrames / getClipCaptureFps(clip);
+};
 var getSupabaseClient = () => {
   const existing = _getSupabaseInstanceOptional();
   if (existing) {
@@ -7950,10 +7960,10 @@ var S3ClipsSupabaseService = class {
       const transformedClips = (response.clips || []).map((clip) => {
         const clipId = clip.id ?? clip.clip_id;
         const clipType = clip.type ?? clip.clip_type_name;
-        const cycleTimeSeconds = parseFiniteNumber(clip.cycle_time_seconds) ?? (() => {
-          const cycleTimeFrames = getClipCycleTimeFrames(clip.metadata);
-          return cycleTimeFrames !== void 0 ? cycleTimeFrames / (clip.metadata?.playlist?.fps || 20) : void 0;
-        })();
+        const cycleTimeSeconds = parseFiniteNumber(clip.cycle_time_seconds) ?? getClipCycleTimeSeconds({
+          capture_fps: clip.capture_fps,
+          metadata: clip.metadata
+        });
         return {
           id: clipId,
           src: clip.src ?? clip.playlist,
@@ -39503,7 +39513,7 @@ var FileManagerFilters = ({
       ] }) })
     ] }, node.id);
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `relative bg-white rounded-2xl shadow-lg border border-gray-100 h-full hover:shadow-xl transition-all duration-300 ease-out backdrop-blur-sm ${className}`, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `relative flex h-full min-h-[320px] flex-col bg-white rounded-2xl shadow-lg border border-gray-100 hover:shadow-xl transition-all duration-300 ease-out backdrop-blur-sm ${className}`, children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-4 border-b border-gray-50 bg-gradient-to-br from-slate-50/80 via-white to-blue-50/30", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center", children: [
@@ -39585,7 +39595,7 @@ var FileManagerFilters = ({
       /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
         {
-          className: "absolute top-14 right-16 z-50 bg-white rounded-xl shadow-xl border border-slate-200 w-[240px] animate-in slide-in-from-top-2 duration-200",
+          className: "absolute top-14 right-2 z-50 bg-white rounded-xl shadow-xl border border-slate-200 w-[min(88vw,240px)] sm:right-16 animate-in slide-in-from-top-2 duration-200",
           onClick: (e) => e.stopPropagation(),
           children: [
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-4 py-3 flex items-center justify-between border-b border-slate-200", children: [
@@ -39642,7 +39652,7 @@ var FileManagerFilters = ({
       /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
         {
-          className: "absolute top-14 right-4 z-50 bg-white rounded-xl shadow-xl border border-slate-200 w-[280px] animate-in slide-in-from-top-2 duration-200",
+          className: "absolute top-14 right-2 z-50 bg-white rounded-xl shadow-xl border border-slate-200 w-[min(92vw,280px)] sm:right-4 animate-in slide-in-from-top-2 duration-200",
           onClick: (e) => e.stopPropagation(),
           children: [
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-4 py-3 flex items-center justify-between border-b border-slate-200", children: [
@@ -39759,7 +39769,7 @@ var FileManagerFilters = ({
         }
       )
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-4 py-3 h-[calc(100%-8rem)] overflow-y-auto scrollbar-thin", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-4 py-3 flex-1 min-h-0 overflow-y-auto scrollbar-thin", children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-2", children: filterTree.map((node) => renderNode(node)) }),
       filterTree.length === 0 && isTimeFilterActive && (startTime || endTime) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center py-12", children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-slate-300 mb-4", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Clock, { className: "h-12 w-12 mx-auto" }) }),
@@ -41870,17 +41880,17 @@ var BottlenecksContent = ({
     }
   }, [workspaceTargetCycleTime]);
   if (!dashboardConfig?.s3Config) {
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-grow p-4 flex flex-col items-center justify-center h-[calc(100vh-12rem)] text-center", children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-grow p-4 flex flex-col items-center justify-center min-h-[calc(100dvh-12rem)] text-center", children: [
       /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XCircle, { className: "w-12 h-12 text-red-400 mb-3" }),
       /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold text-red-700 mb-1", children: "S3 Configuration Missing" }),
       /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-gray-600 max-w-md", children: "S3 configuration is required to load video clips. Please check your dashboard configuration." })
     ] });
   }
   if (clipTypesLoading && allVideos.length === 0 && Object.keys(mergedCounts).length === 0) {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-grow p-4 flex items-center justify-center h-[calc(100vh-12rem)]", children: /* @__PURE__ */ jsxRuntime.jsx(OptifyeLogoLoader_default, { size: "lg", message: "Loading clips..." }) });
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-grow p-4 flex items-center justify-center min-h-[calc(100dvh-12rem)]", children: /* @__PURE__ */ jsxRuntime.jsx(OptifyeLogoLoader_default, { size: "lg", message: "Loading clips..." }) });
   }
   if (error && error.type === "fatal" && !hasInitialLoad || clipTypesError) {
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-grow p-4 flex flex-col items-center justify-center h-[calc(100vh-12rem)] text-center", children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-grow p-4 flex flex-col items-center justify-center min-h-[calc(100dvh-12rem)] text-center", children: [
       /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XCircle, { className: "w-12 h-12 text-red-400 mb-3" }),
       /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold text-red-700 mb-1", children: "Error Loading Clips" }),
       /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-gray-600 max-w-md", children: error?.message || clipTypesError })
@@ -41895,7 +41905,7 @@ var BottlenecksContent = ({
     clipTypesError,
     mergedCounts
   });
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-grow p-1.5 sm:p-2 lg:p-4 h-[calc(100vh-12rem)] relative", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-grow p-1.5 sm:p-2 lg:p-4 min-h-[calc(100dvh-12rem)] lg:h-[calc(100dvh-12rem)] relative", children: [
     hasNewClips && newClipsNotification && /* @__PURE__ */ jsxRuntime.jsx(
       NewClipsNotification,
       {
@@ -41904,8 +41914,8 @@ var BottlenecksContent = ({
         onDismiss: clearNotification
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col lg:flex-row gap-4 h-full", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-w-0 lg:flex-[3]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-white rounded-lg shadow-sm overflow-hidden h-full", children: filteredVideos.length > 0 && currentVideo && !isFullscreen ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4 h-full", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative h-full group", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-full h-full overflow-hidden rounded-md shadow-inner bg-gray-900", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 lg:flex-row lg:h-full", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0 w-full lg:flex-[3] lg:h-full", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-white rounded-lg shadow-sm overflow-hidden lg:h-full", children: filteredVideos.length > 0 && currentVideo && !isFullscreen ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4 lg:h-full", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative group lg:h-full", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-full aspect-video lg:aspect-auto lg:h-full overflow-hidden rounded-md shadow-inner bg-gray-900", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
@@ -42055,23 +42065,23 @@ var BottlenecksContent = ({
         )
       ] }) }) }) : (
         /* Priority 5: Show "no clips found" only if we have counts and there are truly no clips for workspace */
-        hasInitialLoad && Object.keys(mergedCounts).length > 0 && Object.values(mergedCounts).every((count) => count === 0) ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center h-full", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center p-8", children: [
+        hasInitialLoad && Object.keys(mergedCounts).length > 0 && Object.values(mergedCounts).every((count) => count === 0) ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center min-h-[220px] sm:min-h-[320px] lg:h-full", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center p-8", children: [
           /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-16 h-16 text-gray-300 mx-auto mb-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" }) }),
           /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-xl font-medium text-gray-700 mb-2", children: "No Clips Found" }),
           /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-gray-500", children: "There were no video clips found for this workspace today." })
         ] }) }) : (
           /* Priority 6: Show "no matching clips" only if we have data loaded and specifically no clips for this filter */
-          hasInitialLoad && (mergedCounts[activeFilter] || 0) === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center h-full", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center p-8", children: [
+          hasInitialLoad && (mergedCounts[activeFilter] || 0) === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center min-h-[220px] sm:min-h-[320px] lg:h-full", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center p-8", children: [
             /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-16 h-16 text-gray-300 mx-auto mb-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" }) }),
             /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-xl font-medium text-gray-700 mb-2", children: "No Matching Clips" }),
             /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-gray-500", children: "There are no clips matching the selected filter." })
           ] }) }) : (
             /* Priority 7: Default loading state for any other case */
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4 h-full", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative h-full", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative w-full h-full overflow-hidden rounded-md shadow-inner bg-gray-900 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(OptifyeLogoLoader_default, { size: "md", message: "Loading..." }) }) }) })
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4 lg:h-full", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative lg:h-full", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative w-full min-h-[220px] sm:min-h-[320px] lg:min-h-0 lg:h-full overflow-hidden rounded-md shadow-inner bg-gray-900 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(OptifyeLogoLoader_default, { size: "md", message: "Loading..." }) }) }) })
           )
         )
       ) }) }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0 lg:flex-[1] lg:min-w-[280px] lg:max-w-[320px]", children: triageMode ? (
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full lg:flex-shrink-0 lg:flex-[1] lg:min-w-[280px] lg:max-w-[320px] lg:h-full", children: triageMode ? (
         /* Triage Mode - Direct tile view for cycle completions and idle time */
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-white rounded-lg shadow-sm h-full overflow-hidden flex flex-col", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-4 py-3 border-b border-gray-100", children: [
@@ -74713,7 +74723,8 @@ var OperationsOverviewHeader = React141__namespace.default.memo(({
       mobileMenuContext ? /* @__PURE__ */ jsxRuntime.jsx(
         HamburgerButton,
         {
-          onClick: mobileMenuContext.onMobileMenuOpen,
+          onClick: mobileMenuContext.onMobileMenuOpen || (() => {
+          }),
           className: "flex-shrink-0 -ml-1"
         }
       ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-8 flex-shrink-0" }),
@@ -75175,7 +75186,7 @@ var IdleBreakdownCard = React141__namespace.default.memo(({
   }, [idle.scope.idle_time_vlm_enabled_line_count, scopedLineCount, showInitialSkeleton]);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-white rounded-xl shadow-sm border border-slate-100 flex flex-col overflow-hidden text-left", children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-5 py-4 flex-none flex justify-between items-center border-b border-slate-50/50 relative", children: /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg font-semibold text-gray-700", children: "Idle Time Breakdown" }) }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-h-0 p-4 pt-2 relative", children: showInitialSkeleton ? /* @__PURE__ */ jsxRuntime.jsx(OverviewIdleBreakdownSkeleton, {}) : showIdleModuleNotEnabledState ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full flex items-center justify-center rounded-xl border border-dashed border-slate-200 bg-slate-50/80 px-6 text-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-h-[250px] p-4 pt-2 relative", children: showInitialSkeleton ? /* @__PURE__ */ jsxRuntime.jsx(OverviewIdleBreakdownSkeleton, {}) : showIdleModuleNotEnabledState ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full flex items-center justify-center rounded-xl border border-dashed border-slate-200 bg-slate-50/80 px-6 text-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
       /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-semibold text-slate-700", children: "Module not enabled" }),
       /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-xs text-slate-500", children: "Enable idle-time classification on at least one line to view this breakdown." })
     ] }) }) : /* @__PURE__ */ jsxRuntime.jsx(
@@ -75249,7 +75260,7 @@ var EfficiencyTrendCard = React141__namespace.default.memo(({
   }, []);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-white rounded-xl shadow-[0_2px_10px_-3px_rgba(6,81,237,0.1)] border border-slate-100 flex flex-col overflow-hidden text-left", children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-6 py-5 flex-none flex justify-between items-center border-b border-slate-50/50", children: /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg font-semibold text-gray-700", children: "Efficiency Trend" }) }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-h-0 w-full p-4 pt-4 relative", children: showInitialSkeleton ? /* @__PURE__ */ jsxRuntime.jsx(OverviewChartSkeleton, {}) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 pb-2 pr-4 pl-1", children: /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-h-[250px] w-full p-4 pt-4 relative", children: showInitialSkeleton ? /* @__PURE__ */ jsxRuntime.jsx(OverviewChartSkeleton, {}) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 pb-2 pr-4 pl-1", children: /* @__PURE__ */ jsxRuntime.jsx(
       LineChart,
       {
         data: trendData,

package/dist/index.mjs

@@ -7409,6 +7409,16 @@ var getClipCycleTimeFrames = (metadata) => {
   }
   return parseFiniteNumber(metadata?.request?.metadata?.cycle_time);
 };
+var getClipCaptureFps = (clip) => {
+  return parseFiniteNumber(clip?.capture_fps) ?? parseFiniteNumber(clip?.metadata?.playlist?.fps) ?? 20;
+};
+var getClipCycleTimeSeconds = (clip) => {
+  const cycleTimeFrames = getClipCycleTimeFrames(clip?.metadata);
+  if (cycleTimeFrames === void 0) {
+    return void 0;
+  }
+  return cycleTimeFrames / getClipCaptureFps(clip);
+};
 var getSupabaseClient = () => {
   const existing = _getSupabaseInstanceOptional();
   if (existing) {
@@ -7921,10 +7931,10 @@ var S3ClipsSupabaseService = class {
       const transformedClips = (response.clips || []).map((clip) => {
         const clipId = clip.id ?? clip.clip_id;
         const clipType = clip.type ?? clip.clip_type_name;
-        const cycleTimeSeconds = parseFiniteNumber(clip.cycle_time_seconds) ?? (() => {
-          const cycleTimeFrames = getClipCycleTimeFrames(clip.metadata);
-          return cycleTimeFrames !== void 0 ? cycleTimeFrames / (clip.metadata?.playlist?.fps || 20) : void 0;
-        })();
+        const cycleTimeSeconds = parseFiniteNumber(clip.cycle_time_seconds) ?? getClipCycleTimeSeconds({
+          capture_fps: clip.capture_fps,
+          metadata: clip.metadata
+        });
         return {
           id: clipId,
           src: clip.src ?? clip.playlist,
@@ -39474,7 +39484,7 @@ var FileManagerFilters = ({
       ] }) })
     ] }, node.id);
   };
-  return /* @__PURE__ */ jsxs("div", { className: `relative bg-white rounded-2xl shadow-lg border border-gray-100 h-full hover:shadow-xl transition-all duration-300 ease-out backdrop-blur-sm ${className}`, children: [
+  return /* @__PURE__ */ jsxs("div", { className: `relative flex h-full min-h-[320px] flex-col bg-white rounded-2xl shadow-lg border border-gray-100 hover:shadow-xl transition-all duration-300 ease-out backdrop-blur-sm ${className}`, children: [
     /* @__PURE__ */ jsxs("div", { className: "p-4 border-b border-gray-50 bg-gradient-to-br from-slate-50/80 via-white to-blue-50/30", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
         /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
@@ -39556,7 +39566,7 @@ var FileManagerFilters = ({
       /* @__PURE__ */ jsxs(
         "div",
         {
-          className: "absolute top-14 right-16 z-50 bg-white rounded-xl shadow-xl border border-slate-200 w-[240px] animate-in slide-in-from-top-2 duration-200",
+          className: "absolute top-14 right-2 z-50 bg-white rounded-xl shadow-xl border border-slate-200 w-[min(88vw,240px)] sm:right-16 animate-in slide-in-from-top-2 duration-200",
           onClick: (e) => e.stopPropagation(),
           children: [
             /* @__PURE__ */ jsxs("div", { className: "px-4 py-3 flex items-center justify-between border-b border-slate-200", children: [
@@ -39613,7 +39623,7 @@ var FileManagerFilters = ({
       /* @__PURE__ */ jsxs(
         "div",
         {
-          className: "absolute top-14 right-4 z-50 bg-white rounded-xl shadow-xl border border-slate-200 w-[280px] animate-in slide-in-from-top-2 duration-200",
+          className: "absolute top-14 right-2 z-50 bg-white rounded-xl shadow-xl border border-slate-200 w-[min(92vw,280px)] sm:right-4 animate-in slide-in-from-top-2 duration-200",
           onClick: (e) => e.stopPropagation(),
           children: [
             /* @__PURE__ */ jsxs("div", { className: "px-4 py-3 flex items-center justify-between border-b border-slate-200", children: [
@@ -39730,7 +39740,7 @@ var FileManagerFilters = ({
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: "px-4 py-3 h-[calc(100%-8rem)] overflow-y-auto scrollbar-thin", children: [
+    /* @__PURE__ */ jsxs("div", { className: "px-4 py-3 flex-1 min-h-0 overflow-y-auto scrollbar-thin", children: [
       /* @__PURE__ */ jsx("div", { className: "space-y-2", children: filterTree.map((node) => renderNode(node)) }),
       filterTree.length === 0 && isTimeFilterActive && (startTime || endTime) && /* @__PURE__ */ jsxs("div", { className: "text-center py-12", children: [
         /* @__PURE__ */ jsx("div", { className: "text-slate-300 mb-4", children: /* @__PURE__ */ jsx(Clock, { className: "h-12 w-12 mx-auto" }) }),
@@ -41841,17 +41851,17 @@ var BottlenecksContent = ({
     }
   }, [workspaceTargetCycleTime]);
   if (!dashboardConfig?.s3Config) {
-    return /* @__PURE__ */ jsxs("div", { className: "flex-grow p-4 flex flex-col items-center justify-center h-[calc(100vh-12rem)] text-center", children: [
+    return /* @__PURE__ */ jsxs("div", { className: "flex-grow p-4 flex flex-col items-center justify-center min-h-[calc(100dvh-12rem)] text-center", children: [
       /* @__PURE__ */ jsx(XCircle, { className: "w-12 h-12 text-red-400 mb-3" }),
       /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold text-red-700 mb-1", children: "S3 Configuration Missing" }),
       /* @__PURE__ */ jsx("p", { className: "text-gray-600 max-w-md", children: "S3 configuration is required to load video clips. Please check your dashboard configuration." })
     ] });
   }
   if (clipTypesLoading && allVideos.length === 0 && Object.keys(mergedCounts).length === 0) {
-    return /* @__PURE__ */ jsx("div", { className: "flex-grow p-4 flex items-center justify-center h-[calc(100vh-12rem)]", children: /* @__PURE__ */ jsx(OptifyeLogoLoader_default, { size: "lg", message: "Loading clips..." }) });
+    return /* @__PURE__ */ jsx("div", { className: "flex-grow p-4 flex items-center justify-center min-h-[calc(100dvh-12rem)]", children: /* @__PURE__ */ jsx(OptifyeLogoLoader_default, { size: "lg", message: "Loading clips..." }) });
   }
   if (error && error.type === "fatal" && !hasInitialLoad || clipTypesError) {
-    return /* @__PURE__ */ jsxs("div", { className: "flex-grow p-4 flex flex-col items-center justify-center h-[calc(100vh-12rem)] text-center", children: [
+    return /* @__PURE__ */ jsxs("div", { className: "flex-grow p-4 flex flex-col items-center justify-center min-h-[calc(100dvh-12rem)] text-center", children: [
       /* @__PURE__ */ jsx(XCircle, { className: "w-12 h-12 text-red-400 mb-3" }),
       /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold text-red-700 mb-1", children: "Error Loading Clips" }),
       /* @__PURE__ */ jsx("p", { className: "text-gray-600 max-w-md", children: error?.message || clipTypesError })
@@ -41866,7 +41876,7 @@ var BottlenecksContent = ({
     clipTypesError,
     mergedCounts
   });
-  return /* @__PURE__ */ jsxs("div", { className: "flex-grow p-1.5 sm:p-2 lg:p-4 h-[calc(100vh-12rem)] relative", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "flex-grow p-1.5 sm:p-2 lg:p-4 min-h-[calc(100dvh-12rem)] lg:h-[calc(100dvh-12rem)] relative", children: [
     hasNewClips && newClipsNotification && /* @__PURE__ */ jsx(
       NewClipsNotification,
       {
@@ -41875,8 +41885,8 @@ var BottlenecksContent = ({
         onDismiss: clearNotification
       }
     ),
-    /* @__PURE__ */ jsxs("div", { className: "flex flex-col lg:flex-row gap-4 h-full", children: [
-      /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0 lg:flex-[3]", children: /* @__PURE__ */ jsx("div", { className: "bg-white rounded-lg shadow-sm overflow-hidden h-full", children: filteredVideos.length > 0 && currentVideo && !isFullscreen ? /* @__PURE__ */ jsx("div", { className: "p-4 h-full", children: /* @__PURE__ */ jsx("div", { className: "relative h-full group", children: /* @__PURE__ */ jsxs("div", { className: "relative w-full h-full overflow-hidden rounded-md shadow-inner bg-gray-900", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 lg:flex-row lg:h-full", children: [
+      /* @__PURE__ */ jsx("div", { className: "min-w-0 w-full lg:flex-[3] lg:h-full", children: /* @__PURE__ */ jsx("div", { className: "bg-white rounded-lg shadow-sm overflow-hidden lg:h-full", children: filteredVideos.length > 0 && currentVideo && !isFullscreen ? /* @__PURE__ */ jsx("div", { className: "p-4 lg:h-full", children: /* @__PURE__ */ jsx("div", { className: "relative group lg:h-full", children: /* @__PURE__ */ jsxs("div", { className: "relative w-full aspect-video lg:aspect-auto lg:h-full overflow-hidden rounded-md shadow-inner bg-gray-900", children: [
         /* @__PURE__ */ jsx(
           "div",
           {
@@ -42026,23 +42036,23 @@ var BottlenecksContent = ({
         )
       ] }) }) }) : (
         /* Priority 5: Show "no clips found" only if we have counts and there are truly no clips for workspace */
-        hasInitialLoad && Object.keys(mergedCounts).length > 0 && Object.values(mergedCounts).every((count) => count === 0) ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-full", children: /* @__PURE__ */ jsxs("div", { className: "text-center p-8", children: [
+        hasInitialLoad && Object.keys(mergedCounts).length > 0 && Object.values(mergedCounts).every((count) => count === 0) ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center min-h-[220px] sm:min-h-[320px] lg:h-full", children: /* @__PURE__ */ jsxs("div", { className: "text-center p-8", children: [
           /* @__PURE__ */ jsx("svg", { className: "w-16 h-16 text-gray-300 mx-auto mb-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" }) }),
           /* @__PURE__ */ jsx("h3", { className: "text-xl font-medium text-gray-700 mb-2", children: "No Clips Found" }),
           /* @__PURE__ */ jsx("p", { className: "text-gray-500", children: "There were no video clips found for this workspace today." })
         ] }) }) : (
           /* Priority 6: Show "no matching clips" only if we have data loaded and specifically no clips for this filter */
-          hasInitialLoad && (mergedCounts[activeFilter] || 0) === 0 ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-full", children: /* @__PURE__ */ jsxs("div", { className: "text-center p-8", children: [
+          hasInitialLoad && (mergedCounts[activeFilter] || 0) === 0 ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center min-h-[220px] sm:min-h-[320px] lg:h-full", children: /* @__PURE__ */ jsxs("div", { className: "text-center p-8", children: [
             /* @__PURE__ */ jsx("svg", { className: "w-16 h-16 text-gray-300 mx-auto mb-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" }) }),
             /* @__PURE__ */ jsx("h3", { className: "text-xl font-medium text-gray-700 mb-2", children: "No Matching Clips" }),
             /* @__PURE__ */ jsx("p", { className: "text-gray-500", children: "There are no clips matching the selected filter." })
           ] }) }) : (
             /* Priority 7: Default loading state for any other case */
-            /* @__PURE__ */ jsx("div", { className: "p-4 h-full", children: /* @__PURE__ */ jsx("div", { className: "relative h-full", children: /* @__PURE__ */ jsx("div", { className: "relative w-full h-full overflow-hidden rounded-md shadow-inner bg-gray-900 flex items-center justify-center", children: /* @__PURE__ */ jsx(OptifyeLogoLoader_default, { size: "md", message: "Loading..." }) }) }) })
+            /* @__PURE__ */ jsx("div", { className: "p-4 lg:h-full", children: /* @__PURE__ */ jsx("div", { className: "relative lg:h-full", children: /* @__PURE__ */ jsx("div", { className: "relative w-full min-h-[220px] sm:min-h-[320px] lg:min-h-0 lg:h-full overflow-hidden rounded-md shadow-inner bg-gray-900 flex items-center justify-center", children: /* @__PURE__ */ jsx(OptifyeLogoLoader_default, { size: "md", message: "Loading..." }) }) }) })
           )
         )
       ) }) }),
-      /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 lg:flex-[1] lg:min-w-[280px] lg:max-w-[320px]", children: triageMode ? (
+      /* @__PURE__ */ jsx("div", { className: "w-full lg:flex-shrink-0 lg:flex-[1] lg:min-w-[280px] lg:max-w-[320px] lg:h-full", children: triageMode ? (
         /* Triage Mode - Direct tile view for cycle completions and idle time */
         /* @__PURE__ */ jsxs("div", { className: "bg-white rounded-lg shadow-sm h-full overflow-hidden flex flex-col", children: [
           /* @__PURE__ */ jsxs("div", { className: "px-4 py-3 border-b border-gray-100", children: [
@@ -74684,7 +74694,8 @@ var OperationsOverviewHeader = React141__default.memo(({
       mobileMenuContext ? /* @__PURE__ */ jsx(
         HamburgerButton,
         {
-          onClick: mobileMenuContext.onMobileMenuOpen,
+          onClick: mobileMenuContext.onMobileMenuOpen || (() => {
+          }),
           className: "flex-shrink-0 -ml-1"
         }
       ) : /* @__PURE__ */ jsx("div", { className: "w-8 flex-shrink-0" }),
@@ -75146,7 +75157,7 @@ var IdleBreakdownCard = React141__default.memo(({
   }, [idle.scope.idle_time_vlm_enabled_line_count, scopedLineCount, showInitialSkeleton]);
   return /* @__PURE__ */ jsxs("div", { className: "bg-white rounded-xl shadow-sm border border-slate-100 flex flex-col overflow-hidden text-left", children: [
     /* @__PURE__ */ jsx("div", { className: "px-5 py-4 flex-none flex justify-between items-center border-b border-slate-50/50 relative", children: /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold text-gray-700", children: "Idle Time Breakdown" }) }),
-    /* @__PURE__ */ jsx("div", { className: "flex-1 min-h-0 p-4 pt-2 relative", children: showInitialSkeleton ? /* @__PURE__ */ jsx(OverviewIdleBreakdownSkeleton, {}) : showIdleModuleNotEnabledState ? /* @__PURE__ */ jsx("div", { className: "h-full flex items-center justify-center rounded-xl border border-dashed border-slate-200 bg-slate-50/80 px-6 text-center", children: /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx("div", { className: "flex-1 min-h-[250px] p-4 pt-2 relative", children: showInitialSkeleton ? /* @__PURE__ */ jsx(OverviewIdleBreakdownSkeleton, {}) : showIdleModuleNotEnabledState ? /* @__PURE__ */ jsx("div", { className: "h-full flex items-center justify-center rounded-xl border border-dashed border-slate-200 bg-slate-50/80 px-6 text-center", children: /* @__PURE__ */ jsxs("div", { children: [
       /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold text-slate-700", children: "Module not enabled" }),
       /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-slate-500", children: "Enable idle-time classification on at least one line to view this breakdown." })
     ] }) }) : /* @__PURE__ */ jsx(
@@ -75220,7 +75231,7 @@ var EfficiencyTrendCard = React141__default.memo(({
   }, []);
   return /* @__PURE__ */ jsxs("div", { className: "bg-white rounded-xl shadow-[0_2px_10px_-3px_rgba(6,81,237,0.1)] border border-slate-100 flex flex-col overflow-hidden text-left", children: [
     /* @__PURE__ */ jsx("div", { className: "px-6 py-5 flex-none flex justify-between items-center border-b border-slate-50/50", children: /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold text-gray-700", children: "Efficiency Trend" }) }),
-    /* @__PURE__ */ jsx("div", { className: "flex-1 min-h-0 w-full p-4 pt-4 relative", children: showInitialSkeleton ? /* @__PURE__ */ jsx(OverviewChartSkeleton, {}) : /* @__PURE__ */ jsx("div", { className: "absolute inset-0 pb-2 pr-4 pl-1", children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("div", { className: "flex-1 min-h-[250px] w-full p-4 pt-4 relative", children: showInitialSkeleton ? /* @__PURE__ */ jsx(OverviewChartSkeleton, {}) : /* @__PURE__ */ jsx("div", { className: "absolute inset-0 pb-2 pr-4 pl-1", children: /* @__PURE__ */ jsx(
       LineChart,
       {
         data: trendData,

package/package.json

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