@optifye/dashboard-core 6.10.43 → 6.10.44

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/index.css +15 -9
  2. package/dist/index.js +122 -78
  3. package/dist/index.mjs +122 -78
  4. package/package.json +1 -1
package/dist/index.css CHANGED
@@ -1080,18 +1080,12 @@ body {
1080
1080
  .h-\[350px\] {
1081
1081
  height: 350px;
1082
1082
  }
1083
- .h-\[40\%\] {
1084
- height: 40%;
1085
- }
1086
1083
  .h-\[42\%\] {
1087
1084
  height: 42%;
1088
1085
  }
1089
1086
  .h-\[42vh\] {
1090
1087
  height: 42vh;
1091
1088
  }
1092
- .h-\[50\%\] {
1093
- height: 50%;
1094
- }
1095
1089
  .h-\[60px\] {
1096
1090
  height: 60px;
1097
1091
  }
@@ -1212,6 +1206,9 @@ body {
1212
1206
  .min-h-\[160px\] {
1213
1207
  min-height: 160px;
1214
1208
  }
1209
+ .min-h-\[220px\] {
1210
+ min-height: 220px;
1211
+ }
1215
1212
  .min-h-\[250px\] {
1216
1213
  min-height: 250px;
1217
1214
  }
@@ -1221,6 +1218,9 @@ body {
1221
1218
  .min-h-\[300px\] {
1222
1219
  min-height: 300px;
1223
1220
  }
1221
+ .min-h-\[340px\] {
1222
+ min-height: 340px;
1223
+ }
1224
1224
  .min-h-\[400px\] {
1225
1225
  min-height: 400px;
1226
1226
  }
@@ -1551,6 +1551,12 @@ body {
1551
1551
  .flex-1 {
1552
1552
  flex: 1 1 0%;
1553
1553
  }
1554
+ .flex-\[2\] {
1555
+ flex: 2;
1556
+ }
1557
+ .flex-\[3\] {
1558
+ flex: 3;
1559
+ }
1554
1560
  .flex-none {
1555
1561
  flex: none;
1556
1562
  }
@@ -6871,6 +6877,9 @@ input[type=range]:active::-moz-range-thumb {
6871
6877
  .lg\:h-full {
6872
6878
  height: 100%;
6873
6879
  }
6880
+ .lg\:min-h-0 {
6881
+ min-height: 0px;
6882
+ }
6874
6883
  .lg\:min-h-\[220px\] {
6875
6884
  min-height: 220px;
6876
6885
  }
@@ -6952,9 +6961,6 @@ input[type=range]:active::-moz-range-thumb {
6952
6961
  .lg\:gap-8 {
6953
6962
  gap: 2rem;
6954
6963
  }
6955
- .lg\:overflow-hidden {
6956
- overflow: hidden;
6957
- }
6958
6964
  .lg\:p-2 {
6959
6965
  padding: 0.5rem;
6960
6966
  }
package/dist/index.js CHANGED
@@ -29818,8 +29818,8 @@ var CycleTimeOverTimeChart = ({
29818
29818
  "div",
29819
29819
  {
29820
29820
  ref: containerRef,
29821
- className: `w-full h-full relative pb-8 ${className}`,
29822
- style: { minHeight: "200px", minWidth: "300px" },
29821
+ className: `w-full h-full min-w-0 relative pb-8 ${className}`,
29822
+ style: { minHeight: "200px", minWidth: 0 },
29823
29823
  children: [
29824
29824
  containerReady ? /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(
29825
29825
  recharts.LineChart,
@@ -30138,6 +30138,7 @@ var HourlyOutputChartComponent = ({
30138
30138
  }) => {
30139
30139
  const containerRef = React26__namespace.default.useRef(null);
30140
30140
  const [containerReady, setContainerReady] = React26__namespace.default.useState(false);
30141
+ const [containerWidth, setContainerWidth] = React26__namespace.default.useState(0);
30141
30142
  const getTimeFromTimeString2 = (timeStr) => {
30142
30143
  const [hours, minutes] = timeStr.split(":");
30143
30144
  const hour = parseInt(hours);
@@ -30303,6 +30304,10 @@ var HourlyOutputChartComponent = ({
30303
30304
  const checkContainerDimensions = () => {
30304
30305
  if (containerRef.current) {
30305
30306
  const rect = containerRef.current.getBoundingClientRect();
30307
+ const nextWidth = Math.round(rect.width);
30308
+ if (nextWidth > 0) {
30309
+ setContainerWidth((prev) => prev === nextWidth ? prev : nextWidth);
30310
+ }
30306
30311
  if (rect.width > 0 && rect.height > 0) {
30307
30312
  setContainerReady(true);
30308
30313
  }
@@ -30321,6 +30326,15 @@ var HourlyOutputChartComponent = ({
30321
30326
  clearTimeout(fallbackTimeout);
30322
30327
  };
30323
30328
  }, []);
30329
+ const xAxisConfig = React26__namespace.default.useMemo(() => {
30330
+ if (containerWidth >= 960) {
30331
+ return { interval: 0, angle: -45, height: 92, tickFont: 10, tickMargin: 12 };
30332
+ }
30333
+ if (containerWidth >= 760) {
30334
+ return { interval: 1, angle: -35, height: 76, tickFont: 9, tickMargin: 8 };
30335
+ }
30336
+ return { interval: 2, angle: -30, height: 64, tickFont: 9, tickMargin: 6 };
30337
+ }, [containerWidth]);
30324
30338
  const formatHour = React26__namespace.default.useCallback((hourIndex) => {
30325
30339
  const isLastHour = hourIndex === SHIFT_DURATION - 1;
30326
30340
  const startDecimalHour = shiftStartTime.decimalHour + hourIndex;
@@ -30518,8 +30532,8 @@ var HourlyOutputChartComponent = ({
30518
30532
  "div",
30519
30533
  {
30520
30534
  ref: containerRef,
30521
- className: `w-full h-full flex flex-col ${className}`,
30522
- style: { minHeight: "200px", minWidth: "300px" },
30535
+ className: `w-full h-full min-w-0 flex flex-col ${className}`,
30536
+ style: { minHeight: "200px", minWidth: 0 },
30523
30537
  children: [
30524
30538
  containerReady ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-h-0", children: /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(
30525
30539
  recharts.BarChart,
@@ -30539,12 +30553,12 @@ var HourlyOutputChartComponent = ({
30539
30553
  recharts.XAxis,
30540
30554
  {
30541
30555
  dataKey: "hour",
30542
- tick: { fontSize: 10 },
30543
- interval: 0,
30544
- angle: -45,
30556
+ tick: { fontSize: xAxisConfig.tickFont },
30557
+ interval: xAxisConfig.interval,
30558
+ angle: xAxisConfig.angle,
30545
30559
  textAnchor: "end",
30546
- tickMargin: 12,
30547
- height: 100
30560
+ tickMargin: xAxisConfig.tickMargin,
30561
+ height: xAxisConfig.height
30548
30562
  }
30549
30563
  ),
30550
30564
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -32408,6 +32422,7 @@ var HourlyUptimeChartComponent = ({
32408
32422
  }) => {
32409
32423
  const containerRef = React26__namespace.default.useRef(null);
32410
32424
  const [containerReady, setContainerReady] = React26__namespace.default.useState(false);
32425
+ const [containerWidth, setContainerWidth] = React26__namespace.default.useState(0);
32411
32426
  const uptimeSeries = React26__namespace.default.useMemo(() => buildUptimeSeries({
32412
32427
  idleTimeHourly,
32413
32428
  shiftStart,
@@ -32528,6 +32543,10 @@ var HourlyUptimeChartComponent = ({
32528
32543
  const checkContainerDimensions = () => {
32529
32544
  if (containerRef.current) {
32530
32545
  const rect = containerRef.current.getBoundingClientRect();
32546
+ const nextWidth = Math.round(rect.width);
32547
+ if (nextWidth > 0) {
32548
+ setContainerWidth((prev) => prev === nextWidth ? prev : nextWidth);
32549
+ }
32531
32550
  if (rect.width > 0 && rect.height > 0) {
32532
32551
  setContainerReady(true);
32533
32552
  }
@@ -32546,6 +32565,15 @@ var HourlyUptimeChartComponent = ({
32546
32565
  clearTimeout(fallbackTimeout);
32547
32566
  };
32548
32567
  }, []);
32568
+ const xAxisConfig = React26__namespace.default.useMemo(() => {
32569
+ if (containerWidth >= 960) {
32570
+ return { interval: 0, angle: -45, height: 92, tickFont: 10, tickMargin: 12 };
32571
+ }
32572
+ if (containerWidth >= 760) {
32573
+ return { interval: 1, angle: -35, height: 76, tickFont: 9, tickMargin: 8 };
32574
+ }
32575
+ return { interval: 2, angle: -30, height: 64, tickFont: 9, tickMargin: 6 };
32576
+ }, [containerWidth]);
32549
32577
  if (!hasAggregateData && !uptimeSeries.hasData) {
32550
32578
  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `w-full h-full flex items-center justify-center text-sm text-gray-500 ${className}`, children: "No uptime data available." });
32551
32579
  }
@@ -32563,8 +32591,8 @@ var HourlyUptimeChartComponent = ({
32563
32591
  "div",
32564
32592
  {
32565
32593
  ref: containerRef,
32566
- className: `w-full h-full flex flex-col ${className}`,
32567
- style: { minHeight: "200px", minWidth: "300px" },
32594
+ className: `w-full h-full min-w-0 flex flex-col ${className}`,
32595
+ style: { minHeight: "200px", minWidth: 0 },
32568
32596
  children: [
32569
32597
  containerReady ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-h-0", children: /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(
32570
32598
  recharts.BarChart,
@@ -32578,12 +32606,12 @@ var HourlyUptimeChartComponent = ({
32578
32606
  recharts.XAxis,
32579
32607
  {
32580
32608
  dataKey: "hour",
32581
- tick: { fontSize: 10 },
32582
- interval: 0,
32583
- angle: -45,
32609
+ tick: { fontSize: xAxisConfig.tickFont },
32610
+ interval: xAxisConfig.interval,
32611
+ angle: xAxisConfig.angle,
32584
32612
  textAnchor: "end",
32585
- tickMargin: 12,
32586
- height: 100
32613
+ tickMargin: xAxisConfig.tickMargin,
32614
+ height: xAxisConfig.height
32587
32615
  }
32588
32616
  ),
32589
32617
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -63244,6 +63272,25 @@ var getInitialTab = (sourceType, defaultTab, fromMonthly, urlDate) => {
63244
63272
  return "overview";
63245
63273
  };
63246
63274
  var DEBUG_DASHBOARD2 = process.env.NEXT_PUBLIC_DEBUG_DASHBOARD === "true";
63275
+ var SHORT_DESKTOP_QUERY = "(min-width: 1024px) and (max-height: 850px)";
63276
+ var useMediaQuery = (query) => {
63277
+ const [matches, setMatches] = React26.useState(false);
63278
+ React26.useEffect(() => {
63279
+ if (typeof window === "undefined" || !window.matchMedia) {
63280
+ return;
63281
+ }
63282
+ const mediaQueryList = window.matchMedia(query);
63283
+ const onChange = () => setMatches(mediaQueryList.matches);
63284
+ onChange();
63285
+ if (typeof mediaQueryList.addEventListener === "function") {
63286
+ mediaQueryList.addEventListener("change", onChange);
63287
+ return () => mediaQueryList.removeEventListener("change", onChange);
63288
+ }
63289
+ mediaQueryList.addListener(onChange);
63290
+ return () => mediaQueryList.removeListener(onChange);
63291
+ }, [query]);
63292
+ return matches;
63293
+ };
63247
63294
  var chartCardVariants = {
63248
63295
  initial: { opacity: 0, y: 10 },
63249
63296
  animate: {
@@ -63321,6 +63368,9 @@ var WorkspaceDetailView = ({
63321
63368
  const [usingFallbackData, setUsingFallbackData] = React26.useState(false);
63322
63369
  const { isIdleTimeVlmEnabled } = useIdleTimeVlmConfig();
63323
63370
  const [showChartIdleTime, setShowChartIdleTime] = React26.useState(false);
63371
+ const isShortDesktop = useMediaQuery(SHORT_DESKTOP_QUERY);
63372
+ const desktopTopSectionClass = isShortDesktop ? "flex-none min-h-[340px]" : "flex-[3] min-h-0";
63373
+ const desktopBottomSectionClass = isShortDesktop ? "flex-none min-h-[300px]" : "flex-[2] min-h-0";
63324
63374
  const dashboardConfig = useDashboardConfig();
63325
63375
  const { legend: efficiencyLegend } = useEfficiencyLegend();
63326
63376
  const prewarmedClipsRef = React26.useRef(/* @__PURE__ */ new Set());
@@ -64297,7 +64347,7 @@ var WorkspaceDetailView = ({
64297
64347
  ] })
64298
64348
  ] }),
64299
64349
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-grow p-1.5 sm:p-2 lg:p-4", children: [
64300
- activeTab === "overview" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col h-full lg:h-[calc(100vh-10rem)] overflow-y-auto lg:overflow-hidden", children: [
64350
+ activeTab === "overview" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col h-full lg:h-[calc(100vh-10rem)] overflow-y-auto lg:min-h-0", children: [
64301
64351
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "block lg:hidden space-y-6 pb-6", children: [
64302
64352
  !shouldShowCycleTimeChart && !isUptimeMode && /* @__PURE__ */ jsxRuntime.jsxs(
64303
64353
  motion.div,
@@ -64346,8 +64396,7 @@ var WorkspaceDetailView = ({
64346
64396
  /* @__PURE__ */ jsxRuntime.jsx(
64347
64397
  "div",
64348
64398
  {
64349
- className: "h-[300px]",
64350
- style: { minHeight: "200px", minWidth: "300px" },
64399
+ className: "h-[300px] min-h-[220px] min-w-0",
64351
64400
  children: isUptimeMode ? /* @__PURE__ */ jsxRuntime.jsx(
64352
64401
  HourlyUptimeChart,
64353
64402
  {
@@ -64443,18 +64492,18 @@ var WorkspaceDetailView = ({
64443
64492
  ] })
64444
64493
  ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(WorkspaceMetricCards, { workspace, legend: efficiencyLegend, className: "flex-1" }) })
64445
64494
  ] }),
64446
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "hidden lg:flex lg:flex-col lg:h-full", children: [
64447
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "h-[50%] grid grid-cols-1 lg:grid-cols-10 gap-3 mb-3", children: [
64495
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "hidden lg:flex lg:flex-col lg:h-full lg:min-h-0 gap-3", children: [
64496
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx("grid grid-cols-1 lg:grid-cols-10 gap-3 min-h-0", desktopTopSectionClass), children: [
64448
64497
  !shouldShowCycleTimeChart && !isUptimeMode && /* @__PURE__ */ jsxRuntime.jsxs(
64449
64498
  motion.div,
64450
64499
  {
64451
- className: "bg-white rounded-lg shadow-sm p-4 lg:col-span-2",
64500
+ className: "bg-white rounded-lg shadow-sm p-4 lg:col-span-2 flex flex-col min-h-0",
64452
64501
  variants: chartCardVariants,
64453
64502
  initial: "initial",
64454
64503
  animate: "animate",
64455
64504
  children: [
64456
64505
  /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold text-gray-700 mb-4 text-center", children: "Today's Output" }),
64457
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[calc(100%-3rem)]", children: /* @__PURE__ */ jsxRuntime.jsx(
64506
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-h-[220px] min-w-0", children: /* @__PURE__ */ jsxRuntime.jsx(
64458
64507
  OutputProgressChart,
64459
64508
  {
64460
64509
  currentOutput: workspace.total_actions || 0,
@@ -64467,78 +64516,73 @@ var WorkspaceDetailView = ({
64467
64516
  /* @__PURE__ */ jsxRuntime.jsxs(
64468
64517
  motion.div,
64469
64518
  {
64470
- className: `bg-white rounded-lg shadow-sm p-4 relative ${shouldShowCycleTimeChart || isUptimeMode ? "lg:col-span-10" : idleTimeVlmEnabled ? "lg:col-span-6" : "lg:col-span-8"}`,
64519
+ className: `bg-white rounded-lg shadow-sm p-4 flex flex-col min-h-0 ${shouldShowCycleTimeChart || isUptimeMode ? "lg:col-span-10" : idleTimeVlmEnabled ? "lg:col-span-6" : "lg:col-span-8"}`,
64471
64520
  variants: chartCardVariants,
64472
64521
  initial: "initial",
64473
64522
  animate: "animate",
64474
64523
  children: [
64475
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-between items-center mb-4", children: /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold text-gray-700", children: isUptimeMode ? "Machine Utilization" : shouldShowCycleTimeChart ? "Cycle Time (last 60 minutes)" : "Hourly Output" }) }),
64476
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-4 right-4", children: !isUptimeMode && /* @__PURE__ */ jsxRuntime.jsx(
64477
- "button",
64524
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-3 mb-4 flex-none", children: [
64525
+ /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold text-gray-700", children: isUptimeMode ? "Machine Utilization" : shouldShowCycleTimeChart ? "Cycle Time (last 60 minutes)" : "Hourly Output" }),
64526
+ !isUptimeMode && /* @__PURE__ */ jsxRuntime.jsx(
64527
+ "button",
64528
+ {
64529
+ onClick: () => setShowChartIdleTime(!showChartIdleTime),
64530
+ className: `inline-flex items-center px-3 py-1.5 text-sm font-medium rounded-md transition-colors ${showChartIdleTime ? "bg-blue-50 text-blue-700 border border-blue-200" : "bg-white text-gray-700 border border-gray-300 hover:bg-gray-50"}`,
64531
+ children: showChartIdleTime ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
64532
+ /* @__PURE__ */ jsxRuntime.jsx(lucideReact.EyeOff, { className: "w-4 h-4 mr-1.5" }),
64533
+ "Hide Idle Time"
64534
+ ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
64535
+ /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Eye, { className: "w-4 h-4 mr-1.5" }),
64536
+ "Show Idle Time"
64537
+ ] })
64538
+ }
64539
+ )
64540
+ ] }),
64541
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-h-[220px] min-w-0", children: isUptimeMode ? /* @__PURE__ */ jsxRuntime.jsx(
64542
+ HourlyUptimeChart,
64478
64543
  {
64479
- onClick: () => setShowChartIdleTime(!showChartIdleTime),
64480
- className: `inline-flex items-center px-3 py-1.5 text-sm font-medium rounded-md transition-colors ${showChartIdleTime ? "bg-blue-50 text-blue-700 border border-blue-200" : "bg-white text-gray-700 border border-gray-300 hover:bg-gray-50"}`,
64481
- children: showChartIdleTime ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
64482
- /* @__PURE__ */ jsxRuntime.jsx(lucideReact.EyeOff, { className: "w-4 h-4 mr-1.5" }),
64483
- "Hide Idle Time"
64484
- ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
64485
- /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Eye, { className: "w-4 h-4 mr-1.5" }),
64486
- "Show Idle Time"
64487
- ] })
64544
+ idleTimeHourly: workspace.idle_time_hourly,
64545
+ shiftStart: workspace.shift_start,
64546
+ shiftEnd: workspace.shift_end,
64547
+ shiftDate: idleClipDate,
64548
+ timezone,
64549
+ elapsedMinutes: elapsedShiftMinutes
64488
64550
  }
64489
- ) }),
64490
- /* @__PURE__ */ jsxRuntime.jsx(
64491
- "div",
64551
+ ) : shouldShowCycleTimeChart ? /* @__PURE__ */ jsxRuntime.jsx(
64552
+ CycleTimeOverTimeChart,
64492
64553
  {
64493
- className: "h-[calc(100%-3rem)]",
64494
- style: { minHeight: "200px", minWidth: "300px" },
64495
- children: isUptimeMode ? /* @__PURE__ */ jsxRuntime.jsx(
64496
- HourlyUptimeChart,
64497
- {
64498
- idleTimeHourly: workspace.idle_time_hourly,
64499
- shiftStart: workspace.shift_start,
64500
- shiftEnd: workspace.shift_end,
64501
- shiftDate: idleClipDate,
64502
- timezone,
64503
- elapsedMinutes: elapsedShiftMinutes
64504
- }
64505
- ) : shouldShowCycleTimeChart ? /* @__PURE__ */ jsxRuntime.jsx(
64506
- CycleTimeOverTimeChart,
64507
- {
64508
- data: workspace.hourly_action_counts || [],
64509
- idealCycleTime: workspace.ideal_cycle_time || 0,
64510
- shiftStart: workspace.shift_start || ""
64511
- }
64512
- ) : /* @__PURE__ */ jsxRuntime.jsx(
64513
- HourlyOutputChart2,
64514
- {
64515
- data: workspace.hourly_action_counts || [],
64516
- pphThreshold: workspace.pph_threshold || 0,
64517
- shiftStart: workspace.shift_start || "06:00",
64518
- shiftEnd: workspace.shift_end,
64519
- showIdleTime: showChartIdleTime,
64520
- idleTimeHourly: workspace.idle_time_hourly,
64521
- idleTimeClips,
64522
- idleTimeClipClassifications,
64523
- shiftDate: idleClipDate,
64524
- timezone
64525
- }
64526
- )
64554
+ data: workspace.hourly_action_counts || [],
64555
+ idealCycleTime: workspace.ideal_cycle_time || 0,
64556
+ shiftStart: workspace.shift_start || ""
64527
64557
  }
64528
- )
64558
+ ) : /* @__PURE__ */ jsxRuntime.jsx(
64559
+ HourlyOutputChart2,
64560
+ {
64561
+ data: workspace.hourly_action_counts || [],
64562
+ pphThreshold: workspace.pph_threshold || 0,
64563
+ shiftStart: workspace.shift_start || "06:00",
64564
+ shiftEnd: workspace.shift_end,
64565
+ showIdleTime: showChartIdleTime,
64566
+ idleTimeHourly: workspace.idle_time_hourly,
64567
+ idleTimeClips,
64568
+ idleTimeClipClassifications,
64569
+ shiftDate: idleClipDate,
64570
+ timezone
64571
+ }
64572
+ ) })
64529
64573
  ]
64530
64574
  }
64531
64575
  ),
64532
64576
  !shouldShowCycleTimeChart && idleTimeVlmEnabled && /* @__PURE__ */ jsxRuntime.jsxs(
64533
64577
  motion.div,
64534
64578
  {
64535
- className: "bg-white rounded-lg shadow-sm p-4 lg:col-span-2",
64579
+ className: "bg-white rounded-lg shadow-sm p-4 lg:col-span-2 flex flex-col min-h-0",
64536
64580
  variants: chartCardVariants,
64537
64581
  initial: "initial",
64538
64582
  animate: "animate",
64539
64583
  children: [
64540
64584
  /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold text-gray-700 mb-4 text-center", children: "Idle Time Breakdown" }),
64541
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[calc(100%-3rem)]", children: /* @__PURE__ */ jsxRuntime.jsx(
64585
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-h-[220px] min-w-0", children: /* @__PURE__ */ jsxRuntime.jsx(
64542
64586
  IdleTimeReasonChart,
64543
64587
  {
64544
64588
  data: idleTimeData.chartData,
@@ -64550,7 +64594,7 @@ var WorkspaceDetailView = ({
64550
64594
  }
64551
64595
  )
64552
64596
  ] }),
64553
- isUptimeMode ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[40%] flex", children: /* @__PURE__ */ jsxRuntime.jsx(UptimeMetricCards, { workspace, uptimePieData, className: "flex-1" }) }) : shouldShowCycleTimeChart ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "h-[40%] grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3", children: [
64597
+ isUptimeMode ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx("flex min-h-0", desktopBottomSectionClass), children: /* @__PURE__ */ jsxRuntime.jsx(UptimeMetricCards, { workspace, uptimePieData, className: "flex-1" }) }) : shouldShowCycleTimeChart ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx("grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 min-h-0", desktopBottomSectionClass), children: [
64554
64598
  /* @__PURE__ */ jsxRuntime.jsxs(Card2, { children: [
64555
64599
  /* @__PURE__ */ jsxRuntime.jsx(CardHeader2, { className: "pb-2 flex-none", children: /* @__PURE__ */ jsxRuntime.jsx(CardTitle2, { className: "text-lg text-center", children: "Efficiency" }) }),
64556
64600
  /* @__PURE__ */ jsxRuntime.jsx(CardContent2, { className: "flex-1 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
@@ -64586,7 +64630,7 @@ var WorkspaceDetailView = ({
64586
64630
  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-500 mt-2", children: "Total idle time" })
64587
64631
  ] }) })
64588
64632
  ] })
64589
- ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[50%] flex", children: /* @__PURE__ */ jsxRuntime.jsx(WorkspaceMetricCards, { workspace, legend: efficiencyLegend, className: "flex-1" }) })
64633
+ ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx("flex min-h-0", desktopBottomSectionClass), children: /* @__PURE__ */ jsxRuntime.jsx(WorkspaceMetricCards, { workspace, legend: efficiencyLegend, className: "flex-1" }) })
64590
64634
  ] })
64591
64635
  ] }),
64592
64636
  activeTab === "monthly_history" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "h-[calc(100vh-10rem)] overflow-y-auto px-2 sm:px-4 lg:px-0", children: [
package/dist/index.mjs CHANGED
@@ -29789,8 +29789,8 @@ var CycleTimeOverTimeChart = ({
29789
29789
  "div",
29790
29790
  {
29791
29791
  ref: containerRef,
29792
- className: `w-full h-full relative pb-8 ${className}`,
29793
- style: { minHeight: "200px", minWidth: "300px" },
29792
+ className: `w-full h-full min-w-0 relative pb-8 ${className}`,
29793
+ style: { minHeight: "200px", minWidth: 0 },
29794
29794
  children: [
29795
29795
  containerReady ? /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(
29796
29796
  LineChart$1,
@@ -30109,6 +30109,7 @@ var HourlyOutputChartComponent = ({
30109
30109
  }) => {
30110
30110
  const containerRef = React26__default.useRef(null);
30111
30111
  const [containerReady, setContainerReady] = React26__default.useState(false);
30112
+ const [containerWidth, setContainerWidth] = React26__default.useState(0);
30112
30113
  const getTimeFromTimeString2 = (timeStr) => {
30113
30114
  const [hours, minutes] = timeStr.split(":");
30114
30115
  const hour = parseInt(hours);
@@ -30274,6 +30275,10 @@ var HourlyOutputChartComponent = ({
30274
30275
  const checkContainerDimensions = () => {
30275
30276
  if (containerRef.current) {
30276
30277
  const rect = containerRef.current.getBoundingClientRect();
30278
+ const nextWidth = Math.round(rect.width);
30279
+ if (nextWidth > 0) {
30280
+ setContainerWidth((prev) => prev === nextWidth ? prev : nextWidth);
30281
+ }
30277
30282
  if (rect.width > 0 && rect.height > 0) {
30278
30283
  setContainerReady(true);
30279
30284
  }
@@ -30292,6 +30297,15 @@ var HourlyOutputChartComponent = ({
30292
30297
  clearTimeout(fallbackTimeout);
30293
30298
  };
30294
30299
  }, []);
30300
+ const xAxisConfig = React26__default.useMemo(() => {
30301
+ if (containerWidth >= 960) {
30302
+ return { interval: 0, angle: -45, height: 92, tickFont: 10, tickMargin: 12 };
30303
+ }
30304
+ if (containerWidth >= 760) {
30305
+ return { interval: 1, angle: -35, height: 76, tickFont: 9, tickMargin: 8 };
30306
+ }
30307
+ return { interval: 2, angle: -30, height: 64, tickFont: 9, tickMargin: 6 };
30308
+ }, [containerWidth]);
30295
30309
  const formatHour = React26__default.useCallback((hourIndex) => {
30296
30310
  const isLastHour = hourIndex === SHIFT_DURATION - 1;
30297
30311
  const startDecimalHour = shiftStartTime.decimalHour + hourIndex;
@@ -30489,8 +30503,8 @@ var HourlyOutputChartComponent = ({
30489
30503
  "div",
30490
30504
  {
30491
30505
  ref: containerRef,
30492
- className: `w-full h-full flex flex-col ${className}`,
30493
- style: { minHeight: "200px", minWidth: "300px" },
30506
+ className: `w-full h-full min-w-0 flex flex-col ${className}`,
30507
+ style: { minHeight: "200px", minWidth: 0 },
30494
30508
  children: [
30495
30509
  containerReady ? /* @__PURE__ */ jsx("div", { className: "flex-1 min-h-0", children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(
30496
30510
  BarChart$1,
@@ -30510,12 +30524,12 @@ var HourlyOutputChartComponent = ({
30510
30524
  XAxis,
30511
30525
  {
30512
30526
  dataKey: "hour",
30513
- tick: { fontSize: 10 },
30514
- interval: 0,
30515
- angle: -45,
30527
+ tick: { fontSize: xAxisConfig.tickFont },
30528
+ interval: xAxisConfig.interval,
30529
+ angle: xAxisConfig.angle,
30516
30530
  textAnchor: "end",
30517
- tickMargin: 12,
30518
- height: 100
30531
+ tickMargin: xAxisConfig.tickMargin,
30532
+ height: xAxisConfig.height
30519
30533
  }
30520
30534
  ),
30521
30535
  /* @__PURE__ */ jsx(
@@ -32379,6 +32393,7 @@ var HourlyUptimeChartComponent = ({
32379
32393
  }) => {
32380
32394
  const containerRef = React26__default.useRef(null);
32381
32395
  const [containerReady, setContainerReady] = React26__default.useState(false);
32396
+ const [containerWidth, setContainerWidth] = React26__default.useState(0);
32382
32397
  const uptimeSeries = React26__default.useMemo(() => buildUptimeSeries({
32383
32398
  idleTimeHourly,
32384
32399
  shiftStart,
@@ -32499,6 +32514,10 @@ var HourlyUptimeChartComponent = ({
32499
32514
  const checkContainerDimensions = () => {
32500
32515
  if (containerRef.current) {
32501
32516
  const rect = containerRef.current.getBoundingClientRect();
32517
+ const nextWidth = Math.round(rect.width);
32518
+ if (nextWidth > 0) {
32519
+ setContainerWidth((prev) => prev === nextWidth ? prev : nextWidth);
32520
+ }
32502
32521
  if (rect.width > 0 && rect.height > 0) {
32503
32522
  setContainerReady(true);
32504
32523
  }
@@ -32517,6 +32536,15 @@ var HourlyUptimeChartComponent = ({
32517
32536
  clearTimeout(fallbackTimeout);
32518
32537
  };
32519
32538
  }, []);
32539
+ const xAxisConfig = React26__default.useMemo(() => {
32540
+ if (containerWidth >= 960) {
32541
+ return { interval: 0, angle: -45, height: 92, tickFont: 10, tickMargin: 12 };
32542
+ }
32543
+ if (containerWidth >= 760) {
32544
+ return { interval: 1, angle: -35, height: 76, tickFont: 9, tickMargin: 8 };
32545
+ }
32546
+ return { interval: 2, angle: -30, height: 64, tickFont: 9, tickMargin: 6 };
32547
+ }, [containerWidth]);
32520
32548
  if (!hasAggregateData && !uptimeSeries.hasData) {
32521
32549
  return /* @__PURE__ */ jsx("div", { className: `w-full h-full flex items-center justify-center text-sm text-gray-500 ${className}`, children: "No uptime data available." });
32522
32550
  }
@@ -32534,8 +32562,8 @@ var HourlyUptimeChartComponent = ({
32534
32562
  "div",
32535
32563
  {
32536
32564
  ref: containerRef,
32537
- className: `w-full h-full flex flex-col ${className}`,
32538
- style: { minHeight: "200px", minWidth: "300px" },
32565
+ className: `w-full h-full min-w-0 flex flex-col ${className}`,
32566
+ style: { minHeight: "200px", minWidth: 0 },
32539
32567
  children: [
32540
32568
  containerReady ? /* @__PURE__ */ jsx("div", { className: "flex-1 min-h-0", children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(
32541
32569
  BarChart$1,
@@ -32549,12 +32577,12 @@ var HourlyUptimeChartComponent = ({
32549
32577
  XAxis,
32550
32578
  {
32551
32579
  dataKey: "hour",
32552
- tick: { fontSize: 10 },
32553
- interval: 0,
32554
- angle: -45,
32580
+ tick: { fontSize: xAxisConfig.tickFont },
32581
+ interval: xAxisConfig.interval,
32582
+ angle: xAxisConfig.angle,
32555
32583
  textAnchor: "end",
32556
- tickMargin: 12,
32557
- height: 100
32584
+ tickMargin: xAxisConfig.tickMargin,
32585
+ height: xAxisConfig.height
32558
32586
  }
32559
32587
  ),
32560
32588
  /* @__PURE__ */ jsx(
@@ -63215,6 +63243,25 @@ var getInitialTab = (sourceType, defaultTab, fromMonthly, urlDate) => {
63215
63243
  return "overview";
63216
63244
  };
63217
63245
  var DEBUG_DASHBOARD2 = process.env.NEXT_PUBLIC_DEBUG_DASHBOARD === "true";
63246
+ var SHORT_DESKTOP_QUERY = "(min-width: 1024px) and (max-height: 850px)";
63247
+ var useMediaQuery = (query) => {
63248
+ const [matches, setMatches] = useState(false);
63249
+ useEffect(() => {
63250
+ if (typeof window === "undefined" || !window.matchMedia) {
63251
+ return;
63252
+ }
63253
+ const mediaQueryList = window.matchMedia(query);
63254
+ const onChange = () => setMatches(mediaQueryList.matches);
63255
+ onChange();
63256
+ if (typeof mediaQueryList.addEventListener === "function") {
63257
+ mediaQueryList.addEventListener("change", onChange);
63258
+ return () => mediaQueryList.removeEventListener("change", onChange);
63259
+ }
63260
+ mediaQueryList.addListener(onChange);
63261
+ return () => mediaQueryList.removeListener(onChange);
63262
+ }, [query]);
63263
+ return matches;
63264
+ };
63218
63265
  var chartCardVariants = {
63219
63266
  initial: { opacity: 0, y: 10 },
63220
63267
  animate: {
@@ -63292,6 +63339,9 @@ var WorkspaceDetailView = ({
63292
63339
  const [usingFallbackData, setUsingFallbackData] = useState(false);
63293
63340
  const { isIdleTimeVlmEnabled } = useIdleTimeVlmConfig();
63294
63341
  const [showChartIdleTime, setShowChartIdleTime] = useState(false);
63342
+ const isShortDesktop = useMediaQuery(SHORT_DESKTOP_QUERY);
63343
+ const desktopTopSectionClass = isShortDesktop ? "flex-none min-h-[340px]" : "flex-[3] min-h-0";
63344
+ const desktopBottomSectionClass = isShortDesktop ? "flex-none min-h-[300px]" : "flex-[2] min-h-0";
63295
63345
  const dashboardConfig = useDashboardConfig();
63296
63346
  const { legend: efficiencyLegend } = useEfficiencyLegend();
63297
63347
  const prewarmedClipsRef = useRef(/* @__PURE__ */ new Set());
@@ -64268,7 +64318,7 @@ var WorkspaceDetailView = ({
64268
64318
  ] })
64269
64319
  ] }),
64270
64320
  /* @__PURE__ */ jsxs("div", { className: "flex-grow p-1.5 sm:p-2 lg:p-4", children: [
64271
- activeTab === "overview" && /* @__PURE__ */ jsxs("div", { className: "flex flex-col h-full lg:h-[calc(100vh-10rem)] overflow-y-auto lg:overflow-hidden", children: [
64321
+ activeTab === "overview" && /* @__PURE__ */ jsxs("div", { className: "flex flex-col h-full lg:h-[calc(100vh-10rem)] overflow-y-auto lg:min-h-0", children: [
64272
64322
  /* @__PURE__ */ jsxs("div", { className: "block lg:hidden space-y-6 pb-6", children: [
64273
64323
  !shouldShowCycleTimeChart && !isUptimeMode && /* @__PURE__ */ jsxs(
64274
64324
  motion.div,
@@ -64317,8 +64367,7 @@ var WorkspaceDetailView = ({
64317
64367
  /* @__PURE__ */ jsx(
64318
64368
  "div",
64319
64369
  {
64320
- className: "h-[300px]",
64321
- style: { minHeight: "200px", minWidth: "300px" },
64370
+ className: "h-[300px] min-h-[220px] min-w-0",
64322
64371
  children: isUptimeMode ? /* @__PURE__ */ jsx(
64323
64372
  HourlyUptimeChart,
64324
64373
  {
@@ -64414,18 +64463,18 @@ var WorkspaceDetailView = ({
64414
64463
  ] })
64415
64464
  ] }) : /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(WorkspaceMetricCards, { workspace, legend: efficiencyLegend, className: "flex-1" }) })
64416
64465
  ] }),
64417
- /* @__PURE__ */ jsxs("div", { className: "hidden lg:flex lg:flex-col lg:h-full", children: [
64418
- /* @__PURE__ */ jsxs("div", { className: "h-[50%] grid grid-cols-1 lg:grid-cols-10 gap-3 mb-3", children: [
64466
+ /* @__PURE__ */ jsxs("div", { className: "hidden lg:flex lg:flex-col lg:h-full lg:min-h-0 gap-3", children: [
64467
+ /* @__PURE__ */ jsxs("div", { className: clsx("grid grid-cols-1 lg:grid-cols-10 gap-3 min-h-0", desktopTopSectionClass), children: [
64419
64468
  !shouldShowCycleTimeChart && !isUptimeMode && /* @__PURE__ */ jsxs(
64420
64469
  motion.div,
64421
64470
  {
64422
- className: "bg-white rounded-lg shadow-sm p-4 lg:col-span-2",
64471
+ className: "bg-white rounded-lg shadow-sm p-4 lg:col-span-2 flex flex-col min-h-0",
64423
64472
  variants: chartCardVariants,
64424
64473
  initial: "initial",
64425
64474
  animate: "animate",
64426
64475
  children: [
64427
64476
  /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold text-gray-700 mb-4 text-center", children: "Today's Output" }),
64428
- /* @__PURE__ */ jsx("div", { className: "h-[calc(100%-3rem)]", children: /* @__PURE__ */ jsx(
64477
+ /* @__PURE__ */ jsx("div", { className: "flex-1 min-h-[220px] min-w-0", children: /* @__PURE__ */ jsx(
64429
64478
  OutputProgressChart,
64430
64479
  {
64431
64480
  currentOutput: workspace.total_actions || 0,
@@ -64438,78 +64487,73 @@ var WorkspaceDetailView = ({
64438
64487
  /* @__PURE__ */ jsxs(
64439
64488
  motion.div,
64440
64489
  {
64441
- className: `bg-white rounded-lg shadow-sm p-4 relative ${shouldShowCycleTimeChart || isUptimeMode ? "lg:col-span-10" : idleTimeVlmEnabled ? "lg:col-span-6" : "lg:col-span-8"}`,
64490
+ className: `bg-white rounded-lg shadow-sm p-4 flex flex-col min-h-0 ${shouldShowCycleTimeChart || isUptimeMode ? "lg:col-span-10" : idleTimeVlmEnabled ? "lg:col-span-6" : "lg:col-span-8"}`,
64442
64491
  variants: chartCardVariants,
64443
64492
  initial: "initial",
64444
64493
  animate: "animate",
64445
64494
  children: [
64446
- /* @__PURE__ */ jsx("div", { className: "flex justify-between items-center mb-4", children: /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold text-gray-700", children: isUptimeMode ? "Machine Utilization" : shouldShowCycleTimeChart ? "Cycle Time (last 60 minutes)" : "Hourly Output" }) }),
64447
- /* @__PURE__ */ jsx("div", { className: "absolute top-4 right-4", children: !isUptimeMode && /* @__PURE__ */ jsx(
64448
- "button",
64495
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 mb-4 flex-none", children: [
64496
+ /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold text-gray-700", children: isUptimeMode ? "Machine Utilization" : shouldShowCycleTimeChart ? "Cycle Time (last 60 minutes)" : "Hourly Output" }),
64497
+ !isUptimeMode && /* @__PURE__ */ jsx(
64498
+ "button",
64499
+ {
64500
+ onClick: () => setShowChartIdleTime(!showChartIdleTime),
64501
+ className: `inline-flex items-center px-3 py-1.5 text-sm font-medium rounded-md transition-colors ${showChartIdleTime ? "bg-blue-50 text-blue-700 border border-blue-200" : "bg-white text-gray-700 border border-gray-300 hover:bg-gray-50"}`,
64502
+ children: showChartIdleTime ? /* @__PURE__ */ jsxs(Fragment, { children: [
64503
+ /* @__PURE__ */ jsx(EyeOff, { className: "w-4 h-4 mr-1.5" }),
64504
+ "Hide Idle Time"
64505
+ ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
64506
+ /* @__PURE__ */ jsx(Eye, { className: "w-4 h-4 mr-1.5" }),
64507
+ "Show Idle Time"
64508
+ ] })
64509
+ }
64510
+ )
64511
+ ] }),
64512
+ /* @__PURE__ */ jsx("div", { className: "flex-1 min-h-[220px] min-w-0", children: isUptimeMode ? /* @__PURE__ */ jsx(
64513
+ HourlyUptimeChart,
64449
64514
  {
64450
- onClick: () => setShowChartIdleTime(!showChartIdleTime),
64451
- className: `inline-flex items-center px-3 py-1.5 text-sm font-medium rounded-md transition-colors ${showChartIdleTime ? "bg-blue-50 text-blue-700 border border-blue-200" : "bg-white text-gray-700 border border-gray-300 hover:bg-gray-50"}`,
64452
- children: showChartIdleTime ? /* @__PURE__ */ jsxs(Fragment, { children: [
64453
- /* @__PURE__ */ jsx(EyeOff, { className: "w-4 h-4 mr-1.5" }),
64454
- "Hide Idle Time"
64455
- ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
64456
- /* @__PURE__ */ jsx(Eye, { className: "w-4 h-4 mr-1.5" }),
64457
- "Show Idle Time"
64458
- ] })
64515
+ idleTimeHourly: workspace.idle_time_hourly,
64516
+ shiftStart: workspace.shift_start,
64517
+ shiftEnd: workspace.shift_end,
64518
+ shiftDate: idleClipDate,
64519
+ timezone,
64520
+ elapsedMinutes: elapsedShiftMinutes
64459
64521
  }
64460
- ) }),
64461
- /* @__PURE__ */ jsx(
64462
- "div",
64522
+ ) : shouldShowCycleTimeChart ? /* @__PURE__ */ jsx(
64523
+ CycleTimeOverTimeChart,
64463
64524
  {
64464
- className: "h-[calc(100%-3rem)]",
64465
- style: { minHeight: "200px", minWidth: "300px" },
64466
- children: isUptimeMode ? /* @__PURE__ */ jsx(
64467
- HourlyUptimeChart,
64468
- {
64469
- idleTimeHourly: workspace.idle_time_hourly,
64470
- shiftStart: workspace.shift_start,
64471
- shiftEnd: workspace.shift_end,
64472
- shiftDate: idleClipDate,
64473
- timezone,
64474
- elapsedMinutes: elapsedShiftMinutes
64475
- }
64476
- ) : shouldShowCycleTimeChart ? /* @__PURE__ */ jsx(
64477
- CycleTimeOverTimeChart,
64478
- {
64479
- data: workspace.hourly_action_counts || [],
64480
- idealCycleTime: workspace.ideal_cycle_time || 0,
64481
- shiftStart: workspace.shift_start || ""
64482
- }
64483
- ) : /* @__PURE__ */ jsx(
64484
- HourlyOutputChart2,
64485
- {
64486
- data: workspace.hourly_action_counts || [],
64487
- pphThreshold: workspace.pph_threshold || 0,
64488
- shiftStart: workspace.shift_start || "06:00",
64489
- shiftEnd: workspace.shift_end,
64490
- showIdleTime: showChartIdleTime,
64491
- idleTimeHourly: workspace.idle_time_hourly,
64492
- idleTimeClips,
64493
- idleTimeClipClassifications,
64494
- shiftDate: idleClipDate,
64495
- timezone
64496
- }
64497
- )
64525
+ data: workspace.hourly_action_counts || [],
64526
+ idealCycleTime: workspace.ideal_cycle_time || 0,
64527
+ shiftStart: workspace.shift_start || ""
64498
64528
  }
64499
- )
64529
+ ) : /* @__PURE__ */ jsx(
64530
+ HourlyOutputChart2,
64531
+ {
64532
+ data: workspace.hourly_action_counts || [],
64533
+ pphThreshold: workspace.pph_threshold || 0,
64534
+ shiftStart: workspace.shift_start || "06:00",
64535
+ shiftEnd: workspace.shift_end,
64536
+ showIdleTime: showChartIdleTime,
64537
+ idleTimeHourly: workspace.idle_time_hourly,
64538
+ idleTimeClips,
64539
+ idleTimeClipClassifications,
64540
+ shiftDate: idleClipDate,
64541
+ timezone
64542
+ }
64543
+ ) })
64500
64544
  ]
64501
64545
  }
64502
64546
  ),
64503
64547
  !shouldShowCycleTimeChart && idleTimeVlmEnabled && /* @__PURE__ */ jsxs(
64504
64548
  motion.div,
64505
64549
  {
64506
- className: "bg-white rounded-lg shadow-sm p-4 lg:col-span-2",
64550
+ className: "bg-white rounded-lg shadow-sm p-4 lg:col-span-2 flex flex-col min-h-0",
64507
64551
  variants: chartCardVariants,
64508
64552
  initial: "initial",
64509
64553
  animate: "animate",
64510
64554
  children: [
64511
64555
  /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold text-gray-700 mb-4 text-center", children: "Idle Time Breakdown" }),
64512
- /* @__PURE__ */ jsx("div", { className: "h-[calc(100%-3rem)]", children: /* @__PURE__ */ jsx(
64556
+ /* @__PURE__ */ jsx("div", { className: "flex-1 min-h-[220px] min-w-0", children: /* @__PURE__ */ jsx(
64513
64557
  IdleTimeReasonChart,
64514
64558
  {
64515
64559
  data: idleTimeData.chartData,
@@ -64521,7 +64565,7 @@ var WorkspaceDetailView = ({
64521
64565
  }
64522
64566
  )
64523
64567
  ] }),
64524
- isUptimeMode ? /* @__PURE__ */ jsx("div", { className: "h-[40%] flex", children: /* @__PURE__ */ jsx(UptimeMetricCards, { workspace, uptimePieData, className: "flex-1" }) }) : shouldShowCycleTimeChart ? /* @__PURE__ */ jsxs("div", { className: "h-[40%] grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3", children: [
64568
+ isUptimeMode ? /* @__PURE__ */ jsx("div", { className: clsx("flex min-h-0", desktopBottomSectionClass), children: /* @__PURE__ */ jsx(UptimeMetricCards, { workspace, uptimePieData, className: "flex-1" }) }) : shouldShowCycleTimeChart ? /* @__PURE__ */ jsxs("div", { className: clsx("grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 min-h-0", desktopBottomSectionClass), children: [
64525
64569
  /* @__PURE__ */ jsxs(Card2, { children: [
64526
64570
  /* @__PURE__ */ jsx(CardHeader2, { className: "pb-2 flex-none", children: /* @__PURE__ */ jsx(CardTitle2, { className: "text-lg text-center", children: "Efficiency" }) }),
64527
64571
  /* @__PURE__ */ jsx(CardContent2, { className: "flex-1 flex items-center justify-center", children: /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
@@ -64557,7 +64601,7 @@ var WorkspaceDetailView = ({
64557
64601
  /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500 mt-2", children: "Total idle time" })
64558
64602
  ] }) })
64559
64603
  ] })
64560
- ] }) : /* @__PURE__ */ jsx("div", { className: "h-[50%] flex", children: /* @__PURE__ */ jsx(WorkspaceMetricCards, { workspace, legend: efficiencyLegend, className: "flex-1" }) })
64604
+ ] }) : /* @__PURE__ */ jsx("div", { className: clsx("flex min-h-0", desktopBottomSectionClass), children: /* @__PURE__ */ jsx(WorkspaceMetricCards, { workspace, legend: efficiencyLegend, className: "flex-1" }) })
64561
64605
  ] })
64562
64606
  ] }),
64563
64607
  activeTab === "monthly_history" && /* @__PURE__ */ jsxs("div", { className: "h-[calc(100vh-10rem)] overflow-y-auto px-2 sm:px-4 lg:px-0", children: [
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@optifye/dashboard-core",
3
- "version": "6.10.43",
3
+ "version": "6.10.44",
4
4
  "description": "Reusable UI & logic for Optifye dashboard",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",