@optifye/dashboard-core 6.12.9 → 6.12.11

package/dist/index.css

@@ -899,9 +899,6 @@ body {
 .mt-2 {
   margin-top: 0.5rem;
 }
-.mt-2\.5 {
-  margin-top: 0.625rem;
-}
 .mt-3 {
   margin-top: 0.75rem;
 }
@@ -1265,6 +1262,9 @@ body {
 .min-h-\[80px\] {
   min-height: 80px;
 }
+.min-h-\[92px\] {
+  min-height: 92px;
+}
 .min-h-\[calc\(100dvh-12rem\)\] {
   min-height: calc(100dvh - 12rem);
 }
@@ -1406,9 +1406,6 @@ body {
 .w-\[22vw\] {
   width: 22vw;
 }
-.w-\[260px\] {
-  width: 260px;
-}
 .w-\[27vw\] {
   width: 27vw;
 }
@@ -1737,10 +1734,6 @@ body {
   --tw-rotate: 180deg;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
-.rotate-45 {
-  --tw-rotate: 45deg;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
 .scale-0 {
   --tw-scale-x: 0;
   --tw-scale-y: 0;
@@ -1902,6 +1895,9 @@ body {
 .flex-nowrap {
   flex-wrap: nowrap;
 }
+.content-start {
+  align-content: flex-start;
+}
 .items-start {
   align-items: flex-start;
 }
@@ -2256,9 +2252,6 @@ body {
 .border-b-\[6px\] {
   border-bottom-width: 6px;
 }
-.border-l {
-  border-left-width: 1px;
-}
 .border-l-2 {
   border-left-width: 2px;
 }
@@ -7567,10 +7560,6 @@ input[type=range]:active::-moz-range-thumb {
     font-size: 1.875rem;
     line-height: 2.25rem;
   }
-  .xl\:text-4xl {
-    font-size: 2.25rem;
-    line-height: 2.5rem;
-  }
   .xl\:text-5xl {
     font-size: 3rem;
     line-height: 1;
@@ -7604,10 +7593,6 @@ input[type=range]:active::-moz-range-thumb {
     font-size: 1.875rem;
     line-height: 2.25rem;
   }
-  .\32xl\:text-5xl {
-    font-size: 3rem;
-    line-height: 1;
-  }
   .\32xl\:text-6xl {
     font-size: 3.75rem;
     line-height: 1;

package/dist/index.js

@@ -37759,6 +37759,8 @@ var VideoCard = React144__namespace.default.memo(({
 VideoCard.displayName = "VideoCard";
 var DEFAULT_HLS_URL = "https://192.168.5.9:8443/cam1.m3u8";
 var DEBUG_DASHBOARD_LOGS2 = process.env.NEXT_PUBLIC_DEBUG_DASHBOARD === "true";
+var MOBILE_SCROLL_THRESHOLD = 15;
+var MOBILE_BREAKPOINT_PX = 640;
 var logDebug2 = (...args) => {
   if (!DEBUG_DASHBOARD_LOGS2) return;
   console.log(...args);
@@ -37780,6 +37782,7 @@ var VideoGridView = React144__namespace.default.memo(({
   const observerRef = React144.useRef(null);
   const [gridCols, setGridCols] = React144.useState(4);
   const [gridRows, setGridRows] = React144.useState(1);
+  const [isMobileScrollableGrid, setIsMobileScrollableGrid] = React144.useState(false);
   const [visibleWorkspaces, setVisibleWorkspaces] = React144.useState(/* @__PURE__ */ new Set());
   const [failedStreams, setFailedStreams] = React144.useState(/* @__PURE__ */ new Set());
   const [r2FallbackWorkspaces, setR2FallbackWorkspaces] = React144.useState(/* @__PURE__ */ new Set());
@@ -37893,13 +37896,17 @@ var VideoGridView = React144__namespace.default.memo(({
   const calculateOptimalGrid = React144.useCallback(() => {
     if (!containerRef.current) return;
     const containerPadding = 16;
-    const containerWidth = containerRef.current.clientWidth - containerPadding;
+    const rawContainerWidth = containerRef.current.clientWidth;
+    const containerWidth = rawContainerWidth - containerPadding;
     const containerHeight = containerRef.current.clientHeight - containerPadding;
     const count = filteredWorkspaces.length;
     if (count === 0) {
       setGridCols(1);
+      setGridRows(1);
+      setIsMobileScrollableGrid(false);
       return;
     }
+    const shouldUseMobileScroll = rawContainerWidth < MOBILE_BREAKPOINT_PX && count >= MOBILE_SCROLL_THRESHOLD;
     const optimalLayouts = {
       1: 1,
       2: 2,
@@ -37937,11 +37944,12 @@ var VideoGridView = React144__namespace.default.memo(({
     const availableWidth = containerWidth - gap * (bestCols - 1);
     const cellWidth = availableWidth / bestCols;
     if (cellWidth < minCellWidth && bestCols > 1) {
-      bestCols = Math.floor((containerWidth + gap) / (minCellWidth + gap));
+      bestCols = Math.max(1, Math.floor((containerWidth + gap) / (minCellWidth + gap)));
     }
     const rows = Math.ceil(count / bestCols);
     setGridCols(bestCols);
     setGridRows(rows);
+    setIsMobileScrollableGrid(shouldUseMobileScroll);
   }, [filteredWorkspaces.length, selectedLine]);
   React144.useEffect(() => {
     calculateOptimalGrid();
@@ -38155,21 +38163,27 @@ var VideoGridView = React144__namespace.default.memo(({
     resolveWorkspaceDisplayName,
     selectedLine
   ]);
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `relative overflow-hidden h-full w-full bg-slate-50/30 ${className}`, children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `relative h-full min-h-0 w-full overflow-hidden bg-slate-50/30 ${className}`, children: /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
       ref: containerRef,
-      className: "h-full w-full px-1 sm:px-2 py-1 sm:py-2 overflow-y-auto",
+      "data-testid": "video-grid-scroll-container",
+      "data-mobile-scrollable": isMobileScrollableGrid ? "true" : "false",
+      className: `absolute inset-0 w-full px-1 py-1 sm:px-2 sm:py-2 ${isMobileScrollableGrid ? "overflow-y-auto" : "overflow-hidden"}`,
       children: /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
-          className: "grid h-full w-full gap-1.5 sm:gap-2",
+          "data-testid": "video-grid-layout",
+          className: `grid w-full gap-1.5 sm:gap-2 ${isMobileScrollableGrid ? "content-start" : "h-full"}`,
           style: {
             gridTemplateColumns: `repeat(${gridCols}, 1fr)`,
-            gridTemplateRows: `repeat(${gridRows}, 1fr)`,
+            gridTemplateRows: isMobileScrollableGrid ? void 0 : `repeat(${gridRows}, 1fr)`,
             gridAutoFlow: "row"
           },
-          children: workspaceCards.map((card) => renderWorkspaceCard(card, "workspace-card relative w-full h-full"))
+          children: workspaceCards.map((card) => renderWorkspaceCard(
+            card,
+            isMobileScrollableGrid ? "workspace-card relative w-full aspect-video min-h-[92px]" : "workspace-card relative w-full h-full"
+          ))
         }
       )
     }
@@ -50348,7 +50362,7 @@ var LineMonthlyHistory = ({
       { name: "Idle", value: idlePercent }
     ];
   }, [analysisMonthlyData, selectedShiftId, isUptimeMode]);
-  if (isLoading) {
+  if (isLoading && analysisMonthlyData.length === 0) {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center h-[calc(100vh-10rem)]", children: /* @__PURE__ */ jsxRuntime.jsx(
       OptifyeLogoLoader_default,
       {
@@ -51379,19 +51393,12 @@ var fitTextWithEllipsis = (doc, text, maxWidth) => {
 var LinePdfGenerator = ({
   lineInfo,
   workspaceData,
-  issueResolutionSummary,
   shiftName,
   className,
   shiftBreaks = [],
   reportTimezone = "Asia/Kolkata"
 }) => {
   const [isGenerating, setIsGenerating] = React144.useState(false);
-  const formatResolutionDuration2 = (seconds) => {
-    if (seconds === null || seconds === void 0 || seconds <= 0) {
-      return "-";
-    }
-    return formatIdleTime(Math.max(0, Math.floor(seconds)));
-  };
   const generatePDF = async () => {
     setIsGenerating(true);
     try {
@@ -51714,7 +51721,7 @@ var LinePdfGenerator = ({
       doc.line(20, 53, 190, 53);
       const perfOverviewStartY = 58;
       doc.setFillColor(245, 245, 245);
-      doc.roundedRect(15, perfOverviewStartY, 180, 50, 3, 3, "F");
+      doc.roundedRect(15, perfOverviewStartY, 180, 40, 3, 3, "F");
       doc.setFontSize(18);
       doc.setFont("helvetica", "bold");
       doc.setTextColor(40, 40, 40);
@@ -51730,20 +51737,13 @@ var LinePdfGenerator = ({
       doc.text(`${lineInfo.metrics.current_output} / ${lineInfo.metrics.line_threshold}`, 120, kpiStartY);
       createKPIBox(kpiStartY + kpiSpacing);
       doc.setFont("helvetica", "normal");
-      doc.text("Issue Resolution Time:", 25, kpiStartY + kpiSpacing);
-      doc.setFont("helvetica", "bold");
-      const resolutionSeconds = issueResolutionSummary ? issueResolutionSummary.mean_resolution_seconds ?? issueResolutionSummary.median_resolution_seconds : null;
-      const displayValue = resolutionSeconds !== null ? formatResolutionDuration2(resolutionSeconds) : "-";
-      doc.text(displayValue, 120, kpiStartY + kpiSpacing);
-      createKPIBox(kpiStartY + kpiSpacing * 2);
-      doc.setFont("helvetica", "normal");
-      doc.text("Average Efficiency:", 25, kpiStartY + kpiSpacing * 2);
+      doc.text("Average Efficiency:", 25, kpiStartY + kpiSpacing);
       doc.setFont("helvetica", "bold");
-      doc.text(`${lineInfo.metrics.avg_efficiency.toFixed(1)}%`, 120, kpiStartY + kpiSpacing * 2);
+      doc.text(`${lineInfo.metrics.avg_efficiency.toFixed(1)}%`, 120, kpiStartY + kpiSpacing);
       doc.setDrawColor(180, 180, 180);
       doc.setLineWidth(0.8);
-      doc.line(20, 123, 190, 123);
-      const hourlyOverviewStartY = 128;
+      doc.line(20, 113, 190, 113);
+      const hourlyOverviewStartY = 118;
       const formatMinutesLabel = (totalMinutes) => {
         const normalized = (totalMinutes % (24 * 60) + 24 * 60) % (24 * 60);
         const hour = Math.floor(normalized / 60);
@@ -51933,8 +51933,8 @@ var LinePdfGenerator = ({
           return Math.round(lineInfo.metrics.current_output / shiftDuration);
         });
       }
-      const tableHeaderY = 151;
-      const tableStartY = 158;
+      const tableHeaderY = 141;
+      const tableStartY = 148;
       const rowSpacing = 8;
       const bottomPadding = 8;
       const hourlyTableHeight = hourlyTimeRanges.length * rowSpacing;
@@ -51944,10 +51944,10 @@ var LinePdfGenerator = ({
       doc.setFontSize(18);
       doc.setFont("helvetica", "bold");
       doc.setTextColor(40, 40, 40);
-      doc.text("Hourly Performance", 20, 138);
+      doc.text("Hourly Performance", 20, 128);
       doc.setTextColor(0, 0, 0);
-      const gridTopY = 144;
-      const headerBottomY = 153;
+      const gridTopY = 134;
+      const headerBottomY = 143;
       const colBoundaries = [20, 70, 100, 130, 155, 190];
       const totalRows = hourlyTimeRanges.length;
       const gridBottomY = headerBottomY + totalRows * rowSpacing;
@@ -66422,25 +66422,8 @@ var formatLocalDate = (date) => {
   };
   return date.toLocaleDateString("en-US", options);
 };
-var formatResolutionDuration = (seconds) => {
-  if (seconds === null || seconds === void 0 || seconds <= 0) {
-    return "-";
-  }
-  return formatIdleTime(Math.max(0, Math.floor(seconds)));
-};
-var getIssueResolutionSecondaryText = (summary) => {
-  if (!summary) {
-    return "No issue data";
-  }
-  const parts = [`${summary.resolved_issue_count} resolved`];
-  if ((summary.open_issue_count || 0) > 0) {
-    parts.push(`oldest open ${formatResolutionDuration(summary.oldest_open_issue_age_seconds)}`);
-  }
-  return parts.join(" \u2022 ");
-};
 var MetricCards = React144.memo(({
   lineInfo,
-  issueResolutionSummary,
   idleTimeData,
   showIdleTime,
   efficiencyLegend,
@@ -66452,13 +66435,7 @@ var MetricCards = React144.memo(({
 }) => {
   const efficiency = lineInfo?.metrics.avg_efficiency || 0;
   const efficiencyColorClass = getEfficiencyTextColorClasses(efficiency, efficiencyLegend);
-  const showIssueResolutionCard = Boolean(issueResolutionSummary);
-  const largeGridColumns = showIdleTime ? showIssueResolutionCard ? "lg:grid-cols-5" : "lg:grid-cols-4" : showIssueResolutionCard ? "lg:grid-cols-4" : "lg:grid-cols-3";
-  const shouldMaskIssueResolution = efficiency < 5;
-  const issueResolutionValue = shouldMaskIssueResolution ? "-" : formatResolutionDuration(
-    issueResolutionSummary?.mean_resolution_seconds ?? issueResolutionSummary?.median_resolution_seconds
-  );
-  getIssueResolutionSecondaryText(issueResolutionSummary);
+  const largeGridColumns = showIdleTime ? "lg:grid-cols-4" : "lg:grid-cols-3";
   const outputTarget = lineInfo?.metrics.output_target_recalculated ?? lineInfo?.metrics.line_threshold ?? 0;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     motion.div,
@@ -66499,28 +66476,6 @@ var MetricCards = React144.memo(({
             "%"
           ] }) })
         ] }),
-        showIssueResolutionCard && /* @__PURE__ */ jsxRuntime.jsxs(
-          motion.div,
-          {
-            variants: itemVariants,
-            className: "bg-white rounded-xl shadow-sm p-3 sm:p-4 flex flex-col overflow-hidden h-[240px] sm:h-[260px] md:h-auto",
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "h-10 sm:h-12 flex items-start justify-center gap-1.5 mb-2 mt-1 relative group z-10", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-sm sm:text-base font-bold text-gray-700 text-center", children: "Issue Resolution Time" }),
-                /* @__PURE__ */ jsxRuntime.jsx(outline.InformationCircleIcon, { className: "w-4 h-4 text-gray-400 cursor-help flex-shrink-0" }),
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute top-full left-1/2 transform -translate-x-1/2 mt-2.5 w-[260px] p-3 bg-white rounded-lg shadow-xl border border-gray-200 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 pointer-events-none z-50", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-center text-xs text-gray-600 leading-relaxed mb-2.5 px-1", children: "The average time a supervisor takes to resolve a workstation in red." }),
-                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-gray-50 rounded-md py-1.5 border border-gray-100/80", children: /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-center font-medium text-[11px] text-gray-500", children: [
-                    ((issueResolutionSummary?.resolved_issue_count || 0) + (issueResolutionSummary?.open_issue_count || 0)).toLocaleString(),
-                    " recorded issues"
-                  ] }) }),
-                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -top-1.5 left-1/2 transform -translate-x-1/2 w-3 h-3 bg-white border-l border-t border-gray-200 rotate-45" })
-                ] })
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center flex-1 min-h-0", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: `whitespace-nowrap tracking-tight text-3xl sm:text-4xl md:text-4xl lg:text-3xl xl:text-4xl 2xl:text-5xl font-bold ${shouldMaskIssueResolution ? "text-gray-400" : "text-gray-900"}`, children: issueResolutionValue }) })
-            ]
-          }
-        ),
         showIdleTime && /* @__PURE__ */ jsxRuntime.jsxs(motion.div, { variants: itemVariants, className: "bg-white rounded-xl shadow-sm p-3 sm:p-4 flex flex-col overflow-hidden h-[240px] sm:h-[260px] md:h-auto", children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-10 sm:h-12 flex items-start justify-center mb-2 mt-1", children: /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-sm sm:text-base font-bold text-gray-700 text-center", children: "Idle Time Breakdown" }) }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-h-0", children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -66577,8 +66532,6 @@ var MetricCards = React144.memo(({
   if (prevSkuSignature !== nextSkuSignature) return false;
   const prevMetrics = prevProps.lineInfo.metrics;
   const nextMetrics = nextProps.lineInfo.metrics;
-  const prevIssueSummary = prevProps.issueResolutionSummary;
-  const nextIssueSummary = nextProps.issueResolutionSummary;
   const prevIdleChartSignature = JSON.stringify(
     (prevProps.idleTimeData?.chartData || []).map((entry) => ({
       name: entry.name,
@@ -66597,9 +66550,6 @@ var MetricCards = React144.memo(({
   );
   const idleTimeChanged = prevProps.idleTimeData?.isLoading !== nextProps.idleTimeData?.isLoading || prevProps.idleTimeData?.error !== nextProps.idleTimeData?.error || prevIdleChartSignature !== nextIdleChartSignature || prevProps.idleTimeData?.data?.total_idle_time_seconds !== nextProps.idleTimeData?.data?.total_idle_time_seconds || prevProps.idleTimeData?.data?.scope_work_seconds !== nextProps.idleTimeData?.data?.scope_work_seconds;
   if (idleTimeChanged) return false;
-  if (prevIssueSummary?.mean_resolution_seconds !== nextIssueSummary?.mean_resolution_seconds || prevIssueSummary?.median_resolution_seconds !== nextIssueSummary?.median_resolution_seconds || prevIssueSummary?.resolved_issue_count !== nextIssueSummary?.resolved_issue_count || prevIssueSummary?.open_issue_count !== nextIssueSummary?.open_issue_count || prevIssueSummary?.oldest_open_issue_age_seconds !== nextIssueSummary?.oldest_open_issue_age_seconds || prevIssueSummary?.total_issue_seconds !== nextIssueSummary?.total_issue_seconds) {
-    return false;
-  }
   return prevMetrics.current_output === nextMetrics.current_output && prevMetrics.line_threshold === nextMetrics.line_threshold && prevMetrics.output_target_recalculated === nextMetrics.output_target_recalculated && prevMetrics.underperforming_workspaces === nextMetrics.underperforming_workspaces && prevMetrics.total_workspaces === nextMetrics.total_workspaces && prevMetrics.avg_efficiency === nextMetrics.avg_efficiency;
 });
 MetricCards.displayName = "MetricCards";
@@ -68410,7 +68360,6 @@ var KPIDetailView = ({
               MetricCards,
               {
                 lineInfo: displayLineInfo ?? resolvedLineInfo,
-                issueResolutionSummary,
                 idleTimeData,
                 showIdleTime: idleTimeVlmEnabled,
                 efficiencyLegend,
@@ -68525,7 +68474,6 @@ var KPIDetailView = ({
               MetricCards,
               {
                 lineInfo: displayLineInfo ?? resolvedLineInfo,
-                issueResolutionSummary,
                 idleTimeData,
                 showIdleTime: idleTimeVlmEnabled,
                 efficiencyLegend,

package/dist/index.mjs

@@ -16,7 +16,7 @@ import { BarChart as BarChart$1, CartesianGrid, XAxis, YAxis, ReferenceLine, Too
 import { Slot } from '@radix-ui/react-slot';
 import * as SelectPrimitive from '@radix-ui/react-select';
 import { DayPicker, useNavigation as useNavigation$1 } from 'react-day-picker';
-import { AdjustmentsHorizontalIcon, ClockIcon, UsersIcon, UserCircleIcon, TicketIcon, CurrencyDollarIcon, QuestionMarkCircleIcon, XMarkIcon, InformationCircleIcon, ArrowRightIcon, Bars3Icon, HomeIcon, VideoCameraIcon, TrophyIcon, ChartBarIcon, LightBulbIcon, CubeIcon, HeartIcon, Cog6ToothIcon, ChevronRightIcon, ArrowRightStartOnRectangleIcon, ExclamationCircleIcon, ExclamationTriangleIcon, CalendarIcon, ChevronDownIcon, ChevronLeftIcon, EnvelopeIcon, DocumentTextIcon, ChevronUpIcon, ArrowDownTrayIcon, CheckCircleIcon, ChatBubbleLeftRightIcon, XCircleIcon, FunnelIcon, EyeIcon, ArrowLeftIcon, PlayCircleIcon } from '@heroicons/react/24/outline';
+import { AdjustmentsHorizontalIcon, ClockIcon, UsersIcon, UserCircleIcon, TicketIcon, CurrencyDollarIcon, QuestionMarkCircleIcon, XMarkIcon, ArrowRightIcon, Bars3Icon, HomeIcon, VideoCameraIcon, TrophyIcon, ChartBarIcon, LightBulbIcon, CubeIcon, HeartIcon, Cog6ToothIcon, ChevronRightIcon, ArrowRightStartOnRectangleIcon, ExclamationCircleIcon, ExclamationTriangleIcon, CalendarIcon, ChevronDownIcon, ChevronLeftIcon, EnvelopeIcon, DocumentTextIcon, ChevronUpIcon, ArrowDownTrayIcon, CheckCircleIcon, ChatBubbleLeftRightIcon, XCircleIcon, FunnelIcon, EyeIcon, InformationCircleIcon, ArrowLeftIcon, PlayCircleIcon } from '@heroicons/react/24/outline';
 import { CheckIcon } from '@heroicons/react/24/solid';
 import html2canvas from 'html2canvas';
 import jsPDF, { jsPDF as jsPDF$1 } from 'jspdf';
@@ -37730,6 +37730,8 @@ var VideoCard = React144__default.memo(({
 VideoCard.displayName = "VideoCard";
 var DEFAULT_HLS_URL = "https://192.168.5.9:8443/cam1.m3u8";
 var DEBUG_DASHBOARD_LOGS2 = process.env.NEXT_PUBLIC_DEBUG_DASHBOARD === "true";
+var MOBILE_SCROLL_THRESHOLD = 15;
+var MOBILE_BREAKPOINT_PX = 640;
 var logDebug2 = (...args) => {
   if (!DEBUG_DASHBOARD_LOGS2) return;
   console.log(...args);
@@ -37751,6 +37753,7 @@ var VideoGridView = React144__default.memo(({
   const observerRef = useRef(null);
   const [gridCols, setGridCols] = useState(4);
   const [gridRows, setGridRows] = useState(1);
+  const [isMobileScrollableGrid, setIsMobileScrollableGrid] = useState(false);
   const [visibleWorkspaces, setVisibleWorkspaces] = useState(/* @__PURE__ */ new Set());
   const [failedStreams, setFailedStreams] = useState(/* @__PURE__ */ new Set());
   const [r2FallbackWorkspaces, setR2FallbackWorkspaces] = useState(/* @__PURE__ */ new Set());
@@ -37864,13 +37867,17 @@ var VideoGridView = React144__default.memo(({
   const calculateOptimalGrid = useCallback(() => {
     if (!containerRef.current) return;
     const containerPadding = 16;
-    const containerWidth = containerRef.current.clientWidth - containerPadding;
+    const rawContainerWidth = containerRef.current.clientWidth;
+    const containerWidth = rawContainerWidth - containerPadding;
     const containerHeight = containerRef.current.clientHeight - containerPadding;
     const count = filteredWorkspaces.length;
     if (count === 0) {
       setGridCols(1);
+      setGridRows(1);
+      setIsMobileScrollableGrid(false);
       return;
     }
+    const shouldUseMobileScroll = rawContainerWidth < MOBILE_BREAKPOINT_PX && count >= MOBILE_SCROLL_THRESHOLD;
     const optimalLayouts = {
       1: 1,
       2: 2,
@@ -37908,11 +37915,12 @@ var VideoGridView = React144__default.memo(({
     const availableWidth = containerWidth - gap * (bestCols - 1);
     const cellWidth = availableWidth / bestCols;
     if (cellWidth < minCellWidth && bestCols > 1) {
-      bestCols = Math.floor((containerWidth + gap) / (minCellWidth + gap));
+      bestCols = Math.max(1, Math.floor((containerWidth + gap) / (minCellWidth + gap)));
     }
     const rows = Math.ceil(count / bestCols);
     setGridCols(bestCols);
     setGridRows(rows);
+    setIsMobileScrollableGrid(shouldUseMobileScroll);
   }, [filteredWorkspaces.length, selectedLine]);
   useEffect(() => {
     calculateOptimalGrid();
@@ -38126,21 +38134,27 @@ var VideoGridView = React144__default.memo(({
     resolveWorkspaceDisplayName,
     selectedLine
   ]);
-  return /* @__PURE__ */ jsx("div", { className: `relative overflow-hidden h-full w-full bg-slate-50/30 ${className}`, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx("div", { className: `relative h-full min-h-0 w-full overflow-hidden bg-slate-50/30 ${className}`, children: /* @__PURE__ */ jsx(
     "div",
     {
       ref: containerRef,
-      className: "h-full w-full px-1 sm:px-2 py-1 sm:py-2 overflow-y-auto",
+      "data-testid": "video-grid-scroll-container",
+      "data-mobile-scrollable": isMobileScrollableGrid ? "true" : "false",
+      className: `absolute inset-0 w-full px-1 py-1 sm:px-2 sm:py-2 ${isMobileScrollableGrid ? "overflow-y-auto" : "overflow-hidden"}`,
       children: /* @__PURE__ */ jsx(
         "div",
         {
-          className: "grid h-full w-full gap-1.5 sm:gap-2",
+          "data-testid": "video-grid-layout",
+          className: `grid w-full gap-1.5 sm:gap-2 ${isMobileScrollableGrid ? "content-start" : "h-full"}`,
           style: {
             gridTemplateColumns: `repeat(${gridCols}, 1fr)`,
-            gridTemplateRows: `repeat(${gridRows}, 1fr)`,
+            gridTemplateRows: isMobileScrollableGrid ? void 0 : `repeat(${gridRows}, 1fr)`,
             gridAutoFlow: "row"
           },
-          children: workspaceCards.map((card) => renderWorkspaceCard(card, "workspace-card relative w-full h-full"))
+          children: workspaceCards.map((card) => renderWorkspaceCard(
+            card,
+            isMobileScrollableGrid ? "workspace-card relative w-full aspect-video min-h-[92px]" : "workspace-card relative w-full h-full"
+          ))
         }
       )
     }
@@ -50319,7 +50333,7 @@ var LineMonthlyHistory = ({
       { name: "Idle", value: idlePercent }
     ];
   }, [analysisMonthlyData, selectedShiftId, isUptimeMode]);
-  if (isLoading) {
+  if (isLoading && analysisMonthlyData.length === 0) {
     return /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-[calc(100vh-10rem)]", children: /* @__PURE__ */ jsx(
       OptifyeLogoLoader_default,
       {
@@ -51350,19 +51364,12 @@ var fitTextWithEllipsis = (doc, text, maxWidth) => {
 var LinePdfGenerator = ({
   lineInfo,
   workspaceData,
-  issueResolutionSummary,
   shiftName,
   className,
   shiftBreaks = [],
   reportTimezone = "Asia/Kolkata"
 }) => {
   const [isGenerating, setIsGenerating] = useState(false);
-  const formatResolutionDuration2 = (seconds) => {
-    if (seconds === null || seconds === void 0 || seconds <= 0) {
-      return "-";
-    }
-    return formatIdleTime(Math.max(0, Math.floor(seconds)));
-  };
   const generatePDF = async () => {
     setIsGenerating(true);
     try {
@@ -51685,7 +51692,7 @@ var LinePdfGenerator = ({
       doc.line(20, 53, 190, 53);
       const perfOverviewStartY = 58;
       doc.setFillColor(245, 245, 245);
-      doc.roundedRect(15, perfOverviewStartY, 180, 50, 3, 3, "F");
+      doc.roundedRect(15, perfOverviewStartY, 180, 40, 3, 3, "F");
       doc.setFontSize(18);
       doc.setFont("helvetica", "bold");
       doc.setTextColor(40, 40, 40);
@@ -51701,20 +51708,13 @@ var LinePdfGenerator = ({
       doc.text(`${lineInfo.metrics.current_output} / ${lineInfo.metrics.line_threshold}`, 120, kpiStartY);
       createKPIBox(kpiStartY + kpiSpacing);
       doc.setFont("helvetica", "normal");
-      doc.text("Issue Resolution Time:", 25, kpiStartY + kpiSpacing);
-      doc.setFont("helvetica", "bold");
-      const resolutionSeconds = issueResolutionSummary ? issueResolutionSummary.mean_resolution_seconds ?? issueResolutionSummary.median_resolution_seconds : null;
-      const displayValue = resolutionSeconds !== null ? formatResolutionDuration2(resolutionSeconds) : "-";
-      doc.text(displayValue, 120, kpiStartY + kpiSpacing);
-      createKPIBox(kpiStartY + kpiSpacing * 2);
-      doc.setFont("helvetica", "normal");
-      doc.text("Average Efficiency:", 25, kpiStartY + kpiSpacing * 2);
+      doc.text("Average Efficiency:", 25, kpiStartY + kpiSpacing);
       doc.setFont("helvetica", "bold");
-      doc.text(`${lineInfo.metrics.avg_efficiency.toFixed(1)}%`, 120, kpiStartY + kpiSpacing * 2);
+      doc.text(`${lineInfo.metrics.avg_efficiency.toFixed(1)}%`, 120, kpiStartY + kpiSpacing);
       doc.setDrawColor(180, 180, 180);
       doc.setLineWidth(0.8);
-      doc.line(20, 123, 190, 123);
-      const hourlyOverviewStartY = 128;
+      doc.line(20, 113, 190, 113);
+      const hourlyOverviewStartY = 118;
       const formatMinutesLabel = (totalMinutes) => {
         const normalized = (totalMinutes % (24 * 60) + 24 * 60) % (24 * 60);
         const hour = Math.floor(normalized / 60);
@@ -51904,8 +51904,8 @@ var LinePdfGenerator = ({
           return Math.round(lineInfo.metrics.current_output / shiftDuration);
         });
       }
-      const tableHeaderY = 151;
-      const tableStartY = 158;
+      const tableHeaderY = 141;
+      const tableStartY = 148;
       const rowSpacing = 8;
       const bottomPadding = 8;
       const hourlyTableHeight = hourlyTimeRanges.length * rowSpacing;
@@ -51915,10 +51915,10 @@ var LinePdfGenerator = ({
       doc.setFontSize(18);
       doc.setFont("helvetica", "bold");
       doc.setTextColor(40, 40, 40);
-      doc.text("Hourly Performance", 20, 138);
+      doc.text("Hourly Performance", 20, 128);
       doc.setTextColor(0, 0, 0);
-      const gridTopY = 144;
-      const headerBottomY = 153;
+      const gridTopY = 134;
+      const headerBottomY = 143;
       const colBoundaries = [20, 70, 100, 130, 155, 190];
       const totalRows = hourlyTimeRanges.length;
       const gridBottomY = headerBottomY + totalRows * rowSpacing;
@@ -66393,25 +66393,8 @@ var formatLocalDate = (date) => {
   };
   return date.toLocaleDateString("en-US", options);
 };
-var formatResolutionDuration = (seconds) => {
-  if (seconds === null || seconds === void 0 || seconds <= 0) {
-    return "-";
-  }
-  return formatIdleTime(Math.max(0, Math.floor(seconds)));
-};
-var getIssueResolutionSecondaryText = (summary) => {
-  if (!summary) {
-    return "No issue data";
-  }
-  const parts = [`${summary.resolved_issue_count} resolved`];
-  if ((summary.open_issue_count || 0) > 0) {
-    parts.push(`oldest open ${formatResolutionDuration(summary.oldest_open_issue_age_seconds)}`);
-  }
-  return parts.join(" \u2022 ");
-};
 var MetricCards = memo$1(({
   lineInfo,
-  issueResolutionSummary,
   idleTimeData,
   showIdleTime,
   efficiencyLegend,
@@ -66423,13 +66406,7 @@ var MetricCards = memo$1(({
 }) => {
   const efficiency = lineInfo?.metrics.avg_efficiency || 0;
   const efficiencyColorClass = getEfficiencyTextColorClasses(efficiency, efficiencyLegend);
-  const showIssueResolutionCard = Boolean(issueResolutionSummary);
-  const largeGridColumns = showIdleTime ? showIssueResolutionCard ? "lg:grid-cols-5" : "lg:grid-cols-4" : showIssueResolutionCard ? "lg:grid-cols-4" : "lg:grid-cols-3";
-  const shouldMaskIssueResolution = efficiency < 5;
-  const issueResolutionValue = shouldMaskIssueResolution ? "-" : formatResolutionDuration(
-    issueResolutionSummary?.mean_resolution_seconds ?? issueResolutionSummary?.median_resolution_seconds
-  );
-  getIssueResolutionSecondaryText(issueResolutionSummary);
+  const largeGridColumns = showIdleTime ? "lg:grid-cols-4" : "lg:grid-cols-3";
   const outputTarget = lineInfo?.metrics.output_target_recalculated ?? lineInfo?.metrics.line_threshold ?? 0;
   return /* @__PURE__ */ jsxs(
     motion.div,
@@ -66470,28 +66447,6 @@ var MetricCards = memo$1(({
             "%"
           ] }) })
         ] }),
-        showIssueResolutionCard && /* @__PURE__ */ jsxs(
-          motion.div,
-          {
-            variants: itemVariants,
-            className: "bg-white rounded-xl shadow-sm p-3 sm:p-4 flex flex-col overflow-hidden h-[240px] sm:h-[260px] md:h-auto",
-            children: [
-              /* @__PURE__ */ jsxs("div", { className: "h-10 sm:h-12 flex items-start justify-center gap-1.5 mb-2 mt-1 relative group z-10", children: [
-                /* @__PURE__ */ jsx("h2", { className: "text-sm sm:text-base font-bold text-gray-700 text-center", children: "Issue Resolution Time" }),
-                /* @__PURE__ */ jsx(InformationCircleIcon, { className: "w-4 h-4 text-gray-400 cursor-help flex-shrink-0" }),
-                /* @__PURE__ */ jsxs("div", { className: "absolute top-full left-1/2 transform -translate-x-1/2 mt-2.5 w-[260px] p-3 bg-white rounded-lg shadow-xl border border-gray-200 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 pointer-events-none z-50", children: [
-                  /* @__PURE__ */ jsx("p", { className: "text-center text-xs text-gray-600 leading-relaxed mb-2.5 px-1", children: "The average time a supervisor takes to resolve a workstation in red." }),
-                  /* @__PURE__ */ jsx("div", { className: "bg-gray-50 rounded-md py-1.5 border border-gray-100/80", children: /* @__PURE__ */ jsxs("p", { className: "text-center font-medium text-[11px] text-gray-500", children: [
-                    ((issueResolutionSummary?.resolved_issue_count || 0) + (issueResolutionSummary?.open_issue_count || 0)).toLocaleString(),
-                    " recorded issues"
-                  ] }) }),
-                  /* @__PURE__ */ jsx("div", { className: "absolute -top-1.5 left-1/2 transform -translate-x-1/2 w-3 h-3 bg-white border-l border-t border-gray-200 rotate-45" })
-                ] })
-              ] }),
-              /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center flex-1 min-h-0", children: /* @__PURE__ */ jsx("span", { className: `whitespace-nowrap tracking-tight text-3xl sm:text-4xl md:text-4xl lg:text-3xl xl:text-4xl 2xl:text-5xl font-bold ${shouldMaskIssueResolution ? "text-gray-400" : "text-gray-900"}`, children: issueResolutionValue }) })
-            ]
-          }
-        ),
         showIdleTime && /* @__PURE__ */ jsxs(motion.div, { variants: itemVariants, className: "bg-white rounded-xl shadow-sm p-3 sm:p-4 flex flex-col overflow-hidden h-[240px] sm:h-[260px] md:h-auto", children: [
           /* @__PURE__ */ jsx("div", { className: "h-10 sm:h-12 flex items-start justify-center mb-2 mt-1", children: /* @__PURE__ */ jsx("h2", { className: "text-sm sm:text-base font-bold text-gray-700 text-center", children: "Idle Time Breakdown" }) }),
           /* @__PURE__ */ jsx("div", { className: "flex-1 min-h-0", children: /* @__PURE__ */ jsx(
@@ -66548,8 +66503,6 @@ var MetricCards = memo$1(({
   if (prevSkuSignature !== nextSkuSignature) return false;
   const prevMetrics = prevProps.lineInfo.metrics;
   const nextMetrics = nextProps.lineInfo.metrics;
-  const prevIssueSummary = prevProps.issueResolutionSummary;
-  const nextIssueSummary = nextProps.issueResolutionSummary;
   const prevIdleChartSignature = JSON.stringify(
     (prevProps.idleTimeData?.chartData || []).map((entry) => ({
       name: entry.name,
@@ -66568,9 +66521,6 @@ var MetricCards = memo$1(({
   );
   const idleTimeChanged = prevProps.idleTimeData?.isLoading !== nextProps.idleTimeData?.isLoading || prevProps.idleTimeData?.error !== nextProps.idleTimeData?.error || prevIdleChartSignature !== nextIdleChartSignature || prevProps.idleTimeData?.data?.total_idle_time_seconds !== nextProps.idleTimeData?.data?.total_idle_time_seconds || prevProps.idleTimeData?.data?.scope_work_seconds !== nextProps.idleTimeData?.data?.scope_work_seconds;
   if (idleTimeChanged) return false;
-  if (prevIssueSummary?.mean_resolution_seconds !== nextIssueSummary?.mean_resolution_seconds || prevIssueSummary?.median_resolution_seconds !== nextIssueSummary?.median_resolution_seconds || prevIssueSummary?.resolved_issue_count !== nextIssueSummary?.resolved_issue_count || prevIssueSummary?.open_issue_count !== nextIssueSummary?.open_issue_count || prevIssueSummary?.oldest_open_issue_age_seconds !== nextIssueSummary?.oldest_open_issue_age_seconds || prevIssueSummary?.total_issue_seconds !== nextIssueSummary?.total_issue_seconds) {
-    return false;
-  }
   return prevMetrics.current_output === nextMetrics.current_output && prevMetrics.line_threshold === nextMetrics.line_threshold && prevMetrics.output_target_recalculated === nextMetrics.output_target_recalculated && prevMetrics.underperforming_workspaces === nextMetrics.underperforming_workspaces && prevMetrics.total_workspaces === nextMetrics.total_workspaces && prevMetrics.avg_efficiency === nextMetrics.avg_efficiency;
 });
 MetricCards.displayName = "MetricCards";
@@ -68381,7 +68331,6 @@ var KPIDetailView = ({
               MetricCards,
               {
                 lineInfo: displayLineInfo ?? resolvedLineInfo,
-                issueResolutionSummary,
                 idleTimeData,
                 showIdleTime: idleTimeVlmEnabled,
                 efficiencyLegend,
@@ -68496,7 +68445,6 @@ var KPIDetailView = ({
               MetricCards,
               {
                 lineInfo: displayLineInfo ?? resolvedLineInfo,
-                issueResolutionSummary,
                 idleTimeData,
                 showIdleTime: idleTimeVlmEnabled,
                 efficiencyLegend,

package/package.json

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