@optifye/dashboard-core 6.10.43 → 6.10.45

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 +172 -78
  3. package/dist/index.mjs +172 -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,39 @@ 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, labelMode: "full" };
30332
+ }
30333
+ if (containerWidth >= 760) {
30334
+ return { interval: 0, angle: -35, height: 76, tickFont: 9, tickMargin: 8, labelMode: "compact" };
30335
+ }
30336
+ return { interval: 0, angle: -30, height: 64, tickFont: 9, tickMargin: 6, labelMode: "start" };
30337
+ }, [containerWidth]);
30338
+ const formatXAxisTick = React26__namespace.default.useCallback((raw) => {
30339
+ const label = typeof raw === "string" ? raw : String(raw);
30340
+ if (xAxisConfig.labelMode === "full") return label;
30341
+ const parts = label.split("-");
30342
+ if (parts.length !== 2) return label;
30343
+ const parsePart = (part) => {
30344
+ const match = part.match(/^(\d{1,2})(?::(\d{2}))?(AM|PM)$/);
30345
+ if (!match) return null;
30346
+ const [, hh, mm, meridiem] = match;
30347
+ const time2 = mm ? `${hh}:${mm}` : hh;
30348
+ const merShort = meridiem === "AM" ? "A" : "P";
30349
+ return { time: time2, meridiem, merShort };
30350
+ };
30351
+ const start = parsePart(parts[0]);
30352
+ const end = parsePart(parts[1]);
30353
+ if (!start || !end) return label;
30354
+ if (xAxisConfig.labelMode === "start") {
30355
+ return `${start.time}${start.merShort}`;
30356
+ }
30357
+ if (start.meridiem === end.meridiem) {
30358
+ return `${start.time}-${end.time}${end.merShort}`;
30359
+ }
30360
+ return `${start.time}${start.merShort}-${end.time}${end.merShort}`;
30361
+ }, [xAxisConfig.labelMode]);
30324
30362
  const formatHour = React26__namespace.default.useCallback((hourIndex) => {
30325
30363
  const isLastHour = hourIndex === SHIFT_DURATION - 1;
30326
30364
  const startDecimalHour = shiftStartTime.decimalHour + hourIndex;
@@ -30518,8 +30556,8 @@ var HourlyOutputChartComponent = ({
30518
30556
  "div",
30519
30557
  {
30520
30558
  ref: containerRef,
30521
- className: `w-full h-full flex flex-col ${className}`,
30522
- style: { minHeight: "200px", minWidth: "300px" },
30559
+ className: `w-full h-full min-w-0 flex flex-col ${className}`,
30560
+ style: { minHeight: "200px", minWidth: 0 },
30523
30561
  children: [
30524
30562
  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
30563
  recharts.BarChart,
@@ -30539,12 +30577,13 @@ var HourlyOutputChartComponent = ({
30539
30577
  recharts.XAxis,
30540
30578
  {
30541
30579
  dataKey: "hour",
30542
- tick: { fontSize: 10 },
30543
- interval: 0,
30544
- angle: -45,
30580
+ tick: { fontSize: xAxisConfig.tickFont },
30581
+ interval: xAxisConfig.interval,
30582
+ angle: xAxisConfig.angle,
30545
30583
  textAnchor: "end",
30546
- tickMargin: 12,
30547
- height: 100
30584
+ tickMargin: xAxisConfig.tickMargin,
30585
+ height: xAxisConfig.height,
30586
+ tickFormatter: formatXAxisTick
30548
30587
  }
30549
30588
  ),
30550
30589
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -32408,6 +32447,7 @@ var HourlyUptimeChartComponent = ({
32408
32447
  }) => {
32409
32448
  const containerRef = React26__namespace.default.useRef(null);
32410
32449
  const [containerReady, setContainerReady] = React26__namespace.default.useState(false);
32450
+ const [containerWidth, setContainerWidth] = React26__namespace.default.useState(0);
32411
32451
  const uptimeSeries = React26__namespace.default.useMemo(() => buildUptimeSeries({
32412
32452
  idleTimeHourly,
32413
32453
  shiftStart,
@@ -32528,6 +32568,10 @@ var HourlyUptimeChartComponent = ({
32528
32568
  const checkContainerDimensions = () => {
32529
32569
  if (containerRef.current) {
32530
32570
  const rect = containerRef.current.getBoundingClientRect();
32571
+ const nextWidth = Math.round(rect.width);
32572
+ if (nextWidth > 0) {
32573
+ setContainerWidth((prev) => prev === nextWidth ? prev : nextWidth);
32574
+ }
32531
32575
  if (rect.width > 0 && rect.height > 0) {
32532
32576
  setContainerReady(true);
32533
32577
  }
@@ -32546,6 +32590,39 @@ var HourlyUptimeChartComponent = ({
32546
32590
  clearTimeout(fallbackTimeout);
32547
32591
  };
32548
32592
  }, []);
32593
+ const xAxisConfig = React26__namespace.default.useMemo(() => {
32594
+ if (containerWidth >= 960) {
32595
+ return { interval: 0, angle: -45, height: 92, tickFont: 10, tickMargin: 12, labelMode: "full" };
32596
+ }
32597
+ if (containerWidth >= 760) {
32598
+ return { interval: 0, angle: -35, height: 76, tickFont: 9, tickMargin: 8, labelMode: "compact" };
32599
+ }
32600
+ return { interval: 0, angle: -30, height: 64, tickFont: 9, tickMargin: 6, labelMode: "start" };
32601
+ }, [containerWidth]);
32602
+ const formatXAxisTick = React26__namespace.default.useCallback((raw) => {
32603
+ const label = typeof raw === "string" ? raw : String(raw);
32604
+ if (xAxisConfig.labelMode === "full") return label;
32605
+ const parts = label.split("-");
32606
+ if (parts.length !== 2) return label;
32607
+ const parsePart = (part) => {
32608
+ const match = part.match(/^(\d{1,2})(?::(\d{2}))?(AM|PM)$/);
32609
+ if (!match) return null;
32610
+ const [, hh, mm, meridiem] = match;
32611
+ const time2 = mm ? `${hh}:${mm}` : hh;
32612
+ const merShort = meridiem === "AM" ? "A" : "P";
32613
+ return { time: time2, meridiem, merShort };
32614
+ };
32615
+ const start = parsePart(parts[0]);
32616
+ const end = parsePart(parts[1]);
32617
+ if (!start || !end) return label;
32618
+ if (xAxisConfig.labelMode === "start") {
32619
+ return `${start.time}${start.merShort}`;
32620
+ }
32621
+ if (start.meridiem === end.meridiem) {
32622
+ return `${start.time}-${end.time}${end.merShort}`;
32623
+ }
32624
+ return `${start.time}${start.merShort}-${end.time}${end.merShort}`;
32625
+ }, [xAxisConfig.labelMode]);
32549
32626
  if (!hasAggregateData && !uptimeSeries.hasData) {
32550
32627
  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
32628
  }
@@ -32563,8 +32640,8 @@ var HourlyUptimeChartComponent = ({
32563
32640
  "div",
32564
32641
  {
32565
32642
  ref: containerRef,
32566
- className: `w-full h-full flex flex-col ${className}`,
32567
- style: { minHeight: "200px", minWidth: "300px" },
32643
+ className: `w-full h-full min-w-0 flex flex-col ${className}`,
32644
+ style: { minHeight: "200px", minWidth: 0 },
32568
32645
  children: [
32569
32646
  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
32647
  recharts.BarChart,
@@ -32578,12 +32655,13 @@ var HourlyUptimeChartComponent = ({
32578
32655
  recharts.XAxis,
32579
32656
  {
32580
32657
  dataKey: "hour",
32581
- tick: { fontSize: 10 },
32582
- interval: 0,
32583
- angle: -45,
32658
+ tick: { fontSize: xAxisConfig.tickFont },
32659
+ interval: xAxisConfig.interval,
32660
+ angle: xAxisConfig.angle,
32584
32661
  textAnchor: "end",
32585
- tickMargin: 12,
32586
- height: 100
32662
+ tickMargin: xAxisConfig.tickMargin,
32663
+ height: xAxisConfig.height,
32664
+ tickFormatter: formatXAxisTick
32587
32665
  }
32588
32666
  ),
32589
32667
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -63244,6 +63322,25 @@ var getInitialTab = (sourceType, defaultTab, fromMonthly, urlDate) => {
63244
63322
  return "overview";
63245
63323
  };
63246
63324
  var DEBUG_DASHBOARD2 = process.env.NEXT_PUBLIC_DEBUG_DASHBOARD === "true";
63325
+ var SHORT_DESKTOP_QUERY = "(min-width: 1024px) and (max-height: 850px)";
63326
+ var useMediaQuery = (query) => {
63327
+ const [matches, setMatches] = React26.useState(false);
63328
+ React26.useEffect(() => {
63329
+ if (typeof window === "undefined" || !window.matchMedia) {
63330
+ return;
63331
+ }
63332
+ const mediaQueryList = window.matchMedia(query);
63333
+ const onChange = () => setMatches(mediaQueryList.matches);
63334
+ onChange();
63335
+ if (typeof mediaQueryList.addEventListener === "function") {
63336
+ mediaQueryList.addEventListener("change", onChange);
63337
+ return () => mediaQueryList.removeEventListener("change", onChange);
63338
+ }
63339
+ mediaQueryList.addListener(onChange);
63340
+ return () => mediaQueryList.removeListener(onChange);
63341
+ }, [query]);
63342
+ return matches;
63343
+ };
63247
63344
  var chartCardVariants = {
63248
63345
  initial: { opacity: 0, y: 10 },
63249
63346
  animate: {
@@ -63321,6 +63418,9 @@ var WorkspaceDetailView = ({
63321
63418
  const [usingFallbackData, setUsingFallbackData] = React26.useState(false);
63322
63419
  const { isIdleTimeVlmEnabled } = useIdleTimeVlmConfig();
63323
63420
  const [showChartIdleTime, setShowChartIdleTime] = React26.useState(false);
63421
+ const isShortDesktop = useMediaQuery(SHORT_DESKTOP_QUERY);
63422
+ const desktopTopSectionClass = isShortDesktop ? "flex-none min-h-[340px]" : "flex-[3] min-h-0";
63423
+ const desktopBottomSectionClass = isShortDesktop ? "flex-none min-h-[300px]" : "flex-[2] min-h-0";
63324
63424
  const dashboardConfig = useDashboardConfig();
63325
63425
  const { legend: efficiencyLegend } = useEfficiencyLegend();
63326
63426
  const prewarmedClipsRef = React26.useRef(/* @__PURE__ */ new Set());
@@ -64297,7 +64397,7 @@ var WorkspaceDetailView = ({
64297
64397
  ] })
64298
64398
  ] }),
64299
64399
  /* @__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: [
64400
+ 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
64401
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "block lg:hidden space-y-6 pb-6", children: [
64302
64402
  !shouldShowCycleTimeChart && !isUptimeMode && /* @__PURE__ */ jsxRuntime.jsxs(
64303
64403
  motion.div,
@@ -64346,8 +64446,7 @@ var WorkspaceDetailView = ({
64346
64446
  /* @__PURE__ */ jsxRuntime.jsx(
64347
64447
  "div",
64348
64448
  {
64349
- className: "h-[300px]",
64350
- style: { minHeight: "200px", minWidth: "300px" },
64449
+ className: "h-[300px] min-h-[220px] min-w-0",
64351
64450
  children: isUptimeMode ? /* @__PURE__ */ jsxRuntime.jsx(
64352
64451
  HourlyUptimeChart,
64353
64452
  {
@@ -64443,18 +64542,18 @@ var WorkspaceDetailView = ({
64443
64542
  ] })
64444
64543
  ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(WorkspaceMetricCards, { workspace, legend: efficiencyLegend, className: "flex-1" }) })
64445
64544
  ] }),
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: [
64545
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "hidden lg:flex lg:flex-col lg:h-full lg:min-h-0 gap-3", children: [
64546
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx("grid grid-cols-1 lg:grid-cols-10 gap-3 min-h-0", desktopTopSectionClass), children: [
64448
64547
  !shouldShowCycleTimeChart && !isUptimeMode && /* @__PURE__ */ jsxRuntime.jsxs(
64449
64548
  motion.div,
64450
64549
  {
64451
- 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",
64452
64551
  variants: chartCardVariants,
64453
64552
  initial: "initial",
64454
64553
  animate: "animate",
64455
64554
  children: [
64456
64555
  /* @__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(
64556
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-h-[220px] min-w-0", children: /* @__PURE__ */ jsxRuntime.jsx(
64458
64557
  OutputProgressChart,
64459
64558
  {
64460
64559
  currentOutput: workspace.total_actions || 0,
@@ -64467,78 +64566,73 @@ var WorkspaceDetailView = ({
64467
64566
  /* @__PURE__ */ jsxRuntime.jsxs(
64468
64567
  motion.div,
64469
64568
  {
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"}`,
64569
+ 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
64570
  variants: chartCardVariants,
64472
64571
  initial: "initial",
64473
64572
  animate: "animate",
64474
64573
  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",
64574
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-3 mb-4 flex-none", children: [
64575
+ /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold text-gray-700", children: isUptimeMode ? "Machine Utilization" : shouldShowCycleTimeChart ? "Cycle Time (last 60 minutes)" : "Hourly Output" }),
64576
+ !isUptimeMode && /* @__PURE__ */ jsxRuntime.jsx(
64577
+ "button",
64578
+ {
64579
+ onClick: () => setShowChartIdleTime(!showChartIdleTime),
64580
+ 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"}`,
64581
+ children: showChartIdleTime ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
64582
+ /* @__PURE__ */ jsxRuntime.jsx(lucideReact.EyeOff, { className: "w-4 h-4 mr-1.5" }),
64583
+ "Hide Idle Time"
64584
+ ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
64585
+ /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Eye, { className: "w-4 h-4 mr-1.5" }),
64586
+ "Show Idle Time"
64587
+ ] })
64588
+ }
64589
+ )
64590
+ ] }),
64591
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-h-[220px] min-w-0", children: isUptimeMode ? /* @__PURE__ */ jsxRuntime.jsx(
64592
+ HourlyUptimeChart,
64478
64593
  {
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
- ] })
64594
+ idleTimeHourly: workspace.idle_time_hourly,
64595
+ shiftStart: workspace.shift_start,
64596
+ shiftEnd: workspace.shift_end,
64597
+ shiftDate: idleClipDate,
64598
+ timezone,
64599
+ elapsedMinutes: elapsedShiftMinutes
64488
64600
  }
64489
- ) }),
64490
- /* @__PURE__ */ jsxRuntime.jsx(
64491
- "div",
64601
+ ) : shouldShowCycleTimeChart ? /* @__PURE__ */ jsxRuntime.jsx(
64602
+ CycleTimeOverTimeChart,
64492
64603
  {
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
- )
64604
+ data: workspace.hourly_action_counts || [],
64605
+ idealCycleTime: workspace.ideal_cycle_time || 0,
64606
+ shiftStart: workspace.shift_start || ""
64527
64607
  }
64528
- )
64608
+ ) : /* @__PURE__ */ jsxRuntime.jsx(
64609
+ HourlyOutputChart2,
64610
+ {
64611
+ data: workspace.hourly_action_counts || [],
64612
+ pphThreshold: workspace.pph_threshold || 0,
64613
+ shiftStart: workspace.shift_start || "06:00",
64614
+ shiftEnd: workspace.shift_end,
64615
+ showIdleTime: showChartIdleTime,
64616
+ idleTimeHourly: workspace.idle_time_hourly,
64617
+ idleTimeClips,
64618
+ idleTimeClipClassifications,
64619
+ shiftDate: idleClipDate,
64620
+ timezone
64621
+ }
64622
+ ) })
64529
64623
  ]
64530
64624
  }
64531
64625
  ),
64532
64626
  !shouldShowCycleTimeChart && idleTimeVlmEnabled && /* @__PURE__ */ jsxRuntime.jsxs(
64533
64627
  motion.div,
64534
64628
  {
64535
- className: "bg-white rounded-lg shadow-sm p-4 lg:col-span-2",
64629
+ className: "bg-white rounded-lg shadow-sm p-4 lg:col-span-2 flex flex-col min-h-0",
64536
64630
  variants: chartCardVariants,
64537
64631
  initial: "initial",
64538
64632
  animate: "animate",
64539
64633
  children: [
64540
64634
  /* @__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(
64635
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-h-[220px] min-w-0", children: /* @__PURE__ */ jsxRuntime.jsx(
64542
64636
  IdleTimeReasonChart,
64543
64637
  {
64544
64638
  data: idleTimeData.chartData,
@@ -64550,7 +64644,7 @@ var WorkspaceDetailView = ({
64550
64644
  }
64551
64645
  )
64552
64646
  ] }),
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: [
64647
+ 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
64648
  /* @__PURE__ */ jsxRuntime.jsxs(Card2, { children: [
64555
64649
  /* @__PURE__ */ jsxRuntime.jsx(CardHeader2, { className: "pb-2 flex-none", children: /* @__PURE__ */ jsxRuntime.jsx(CardTitle2, { className: "text-lg text-center", children: "Efficiency" }) }),
64556
64650
  /* @__PURE__ */ jsxRuntime.jsx(CardContent2, { className: "flex-1 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
@@ -64586,7 +64680,7 @@ var WorkspaceDetailView = ({
64586
64680
  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-500 mt-2", children: "Total idle time" })
64587
64681
  ] }) })
64588
64682
  ] })
64589
- ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[50%] flex", children: /* @__PURE__ */ jsxRuntime.jsx(WorkspaceMetricCards, { workspace, legend: efficiencyLegend, className: "flex-1" }) })
64683
+ ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx("flex min-h-0", desktopBottomSectionClass), children: /* @__PURE__ */ jsxRuntime.jsx(WorkspaceMetricCards, { workspace, legend: efficiencyLegend, className: "flex-1" }) })
64590
64684
  ] })
64591
64685
  ] }),
64592
64686
  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,39 @@ 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, labelMode: "full" };
30303
+ }
30304
+ if (containerWidth >= 760) {
30305
+ return { interval: 0, angle: -35, height: 76, tickFont: 9, tickMargin: 8, labelMode: "compact" };
30306
+ }
30307
+ return { interval: 0, angle: -30, height: 64, tickFont: 9, tickMargin: 6, labelMode: "start" };
30308
+ }, [containerWidth]);
30309
+ const formatXAxisTick = React26__default.useCallback((raw) => {
30310
+ const label = typeof raw === "string" ? raw : String(raw);
30311
+ if (xAxisConfig.labelMode === "full") return label;
30312
+ const parts = label.split("-");
30313
+ if (parts.length !== 2) return label;
30314
+ const parsePart = (part) => {
30315
+ const match = part.match(/^(\d{1,2})(?::(\d{2}))?(AM|PM)$/);
30316
+ if (!match) return null;
30317
+ const [, hh, mm, meridiem] = match;
30318
+ const time2 = mm ? `${hh}:${mm}` : hh;
30319
+ const merShort = meridiem === "AM" ? "A" : "P";
30320
+ return { time: time2, meridiem, merShort };
30321
+ };
30322
+ const start = parsePart(parts[0]);
30323
+ const end = parsePart(parts[1]);
30324
+ if (!start || !end) return label;
30325
+ if (xAxisConfig.labelMode === "start") {
30326
+ return `${start.time}${start.merShort}`;
30327
+ }
30328
+ if (start.meridiem === end.meridiem) {
30329
+ return `${start.time}-${end.time}${end.merShort}`;
30330
+ }
30331
+ return `${start.time}${start.merShort}-${end.time}${end.merShort}`;
30332
+ }, [xAxisConfig.labelMode]);
30295
30333
  const formatHour = React26__default.useCallback((hourIndex) => {
30296
30334
  const isLastHour = hourIndex === SHIFT_DURATION - 1;
30297
30335
  const startDecimalHour = shiftStartTime.decimalHour + hourIndex;
@@ -30489,8 +30527,8 @@ var HourlyOutputChartComponent = ({
30489
30527
  "div",
30490
30528
  {
30491
30529
  ref: containerRef,
30492
- className: `w-full h-full flex flex-col ${className}`,
30493
- style: { minHeight: "200px", minWidth: "300px" },
30530
+ className: `w-full h-full min-w-0 flex flex-col ${className}`,
30531
+ style: { minHeight: "200px", minWidth: 0 },
30494
30532
  children: [
30495
30533
  containerReady ? /* @__PURE__ */ jsx("div", { className: "flex-1 min-h-0", children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(
30496
30534
  BarChart$1,
@@ -30510,12 +30548,13 @@ var HourlyOutputChartComponent = ({
30510
30548
  XAxis,
30511
30549
  {
30512
30550
  dataKey: "hour",
30513
- tick: { fontSize: 10 },
30514
- interval: 0,
30515
- angle: -45,
30551
+ tick: { fontSize: xAxisConfig.tickFont },
30552
+ interval: xAxisConfig.interval,
30553
+ angle: xAxisConfig.angle,
30516
30554
  textAnchor: "end",
30517
- tickMargin: 12,
30518
- height: 100
30555
+ tickMargin: xAxisConfig.tickMargin,
30556
+ height: xAxisConfig.height,
30557
+ tickFormatter: formatXAxisTick
30519
30558
  }
30520
30559
  ),
30521
30560
  /* @__PURE__ */ jsx(
@@ -32379,6 +32418,7 @@ var HourlyUptimeChartComponent = ({
32379
32418
  }) => {
32380
32419
  const containerRef = React26__default.useRef(null);
32381
32420
  const [containerReady, setContainerReady] = React26__default.useState(false);
32421
+ const [containerWidth, setContainerWidth] = React26__default.useState(0);
32382
32422
  const uptimeSeries = React26__default.useMemo(() => buildUptimeSeries({
32383
32423
  idleTimeHourly,
32384
32424
  shiftStart,
@@ -32499,6 +32539,10 @@ var HourlyUptimeChartComponent = ({
32499
32539
  const checkContainerDimensions = () => {
32500
32540
  if (containerRef.current) {
32501
32541
  const rect = containerRef.current.getBoundingClientRect();
32542
+ const nextWidth = Math.round(rect.width);
32543
+ if (nextWidth > 0) {
32544
+ setContainerWidth((prev) => prev === nextWidth ? prev : nextWidth);
32545
+ }
32502
32546
  if (rect.width > 0 && rect.height > 0) {
32503
32547
  setContainerReady(true);
32504
32548
  }
@@ -32517,6 +32561,39 @@ var HourlyUptimeChartComponent = ({
32517
32561
  clearTimeout(fallbackTimeout);
32518
32562
  };
32519
32563
  }, []);
32564
+ const xAxisConfig = React26__default.useMemo(() => {
32565
+ if (containerWidth >= 960) {
32566
+ return { interval: 0, angle: -45, height: 92, tickFont: 10, tickMargin: 12, labelMode: "full" };
32567
+ }
32568
+ if (containerWidth >= 760) {
32569
+ return { interval: 0, angle: -35, height: 76, tickFont: 9, tickMargin: 8, labelMode: "compact" };
32570
+ }
32571
+ return { interval: 0, angle: -30, height: 64, tickFont: 9, tickMargin: 6, labelMode: "start" };
32572
+ }, [containerWidth]);
32573
+ const formatXAxisTick = React26__default.useCallback((raw) => {
32574
+ const label = typeof raw === "string" ? raw : String(raw);
32575
+ if (xAxisConfig.labelMode === "full") return label;
32576
+ const parts = label.split("-");
32577
+ if (parts.length !== 2) return label;
32578
+ const parsePart = (part) => {
32579
+ const match = part.match(/^(\d{1,2})(?::(\d{2}))?(AM|PM)$/);
32580
+ if (!match) return null;
32581
+ const [, hh, mm, meridiem] = match;
32582
+ const time2 = mm ? `${hh}:${mm}` : hh;
32583
+ const merShort = meridiem === "AM" ? "A" : "P";
32584
+ return { time: time2, meridiem, merShort };
32585
+ };
32586
+ const start = parsePart(parts[0]);
32587
+ const end = parsePart(parts[1]);
32588
+ if (!start || !end) return label;
32589
+ if (xAxisConfig.labelMode === "start") {
32590
+ return `${start.time}${start.merShort}`;
32591
+ }
32592
+ if (start.meridiem === end.meridiem) {
32593
+ return `${start.time}-${end.time}${end.merShort}`;
32594
+ }
32595
+ return `${start.time}${start.merShort}-${end.time}${end.merShort}`;
32596
+ }, [xAxisConfig.labelMode]);
32520
32597
  if (!hasAggregateData && !uptimeSeries.hasData) {
32521
32598
  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
32599
  }
@@ -32534,8 +32611,8 @@ var HourlyUptimeChartComponent = ({
32534
32611
  "div",
32535
32612
  {
32536
32613
  ref: containerRef,
32537
- className: `w-full h-full flex flex-col ${className}`,
32538
- style: { minHeight: "200px", minWidth: "300px" },
32614
+ className: `w-full h-full min-w-0 flex flex-col ${className}`,
32615
+ style: { minHeight: "200px", minWidth: 0 },
32539
32616
  children: [
32540
32617
  containerReady ? /* @__PURE__ */ jsx("div", { className: "flex-1 min-h-0", children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(
32541
32618
  BarChart$1,
@@ -32549,12 +32626,13 @@ var HourlyUptimeChartComponent = ({
32549
32626
  XAxis,
32550
32627
  {
32551
32628
  dataKey: "hour",
32552
- tick: { fontSize: 10 },
32553
- interval: 0,
32554
- angle: -45,
32629
+ tick: { fontSize: xAxisConfig.tickFont },
32630
+ interval: xAxisConfig.interval,
32631
+ angle: xAxisConfig.angle,
32555
32632
  textAnchor: "end",
32556
- tickMargin: 12,
32557
- height: 100
32633
+ tickMargin: xAxisConfig.tickMargin,
32634
+ height: xAxisConfig.height,
32635
+ tickFormatter: formatXAxisTick
32558
32636
  }
32559
32637
  ),
32560
32638
  /* @__PURE__ */ jsx(
@@ -63215,6 +63293,25 @@ var getInitialTab = (sourceType, defaultTab, fromMonthly, urlDate) => {
63215
63293
  return "overview";
63216
63294
  };
63217
63295
  var DEBUG_DASHBOARD2 = process.env.NEXT_PUBLIC_DEBUG_DASHBOARD === "true";
63296
+ var SHORT_DESKTOP_QUERY = "(min-width: 1024px) and (max-height: 850px)";
63297
+ var useMediaQuery = (query) => {
63298
+ const [matches, setMatches] = useState(false);
63299
+ useEffect(() => {
63300
+ if (typeof window === "undefined" || !window.matchMedia) {
63301
+ return;
63302
+ }
63303
+ const mediaQueryList = window.matchMedia(query);
63304
+ const onChange = () => setMatches(mediaQueryList.matches);
63305
+ onChange();
63306
+ if (typeof mediaQueryList.addEventListener === "function") {
63307
+ mediaQueryList.addEventListener("change", onChange);
63308
+ return () => mediaQueryList.removeEventListener("change", onChange);
63309
+ }
63310
+ mediaQueryList.addListener(onChange);
63311
+ return () => mediaQueryList.removeListener(onChange);
63312
+ }, [query]);
63313
+ return matches;
63314
+ };
63218
63315
  var chartCardVariants = {
63219
63316
  initial: { opacity: 0, y: 10 },
63220
63317
  animate: {
@@ -63292,6 +63389,9 @@ var WorkspaceDetailView = ({
63292
63389
  const [usingFallbackData, setUsingFallbackData] = useState(false);
63293
63390
  const { isIdleTimeVlmEnabled } = useIdleTimeVlmConfig();
63294
63391
  const [showChartIdleTime, setShowChartIdleTime] = useState(false);
63392
+ const isShortDesktop = useMediaQuery(SHORT_DESKTOP_QUERY);
63393
+ const desktopTopSectionClass = isShortDesktop ? "flex-none min-h-[340px]" : "flex-[3] min-h-0";
63394
+ const desktopBottomSectionClass = isShortDesktop ? "flex-none min-h-[300px]" : "flex-[2] min-h-0";
63295
63395
  const dashboardConfig = useDashboardConfig();
63296
63396
  const { legend: efficiencyLegend } = useEfficiencyLegend();
63297
63397
  const prewarmedClipsRef = useRef(/* @__PURE__ */ new Set());
@@ -64268,7 +64368,7 @@ var WorkspaceDetailView = ({
64268
64368
  ] })
64269
64369
  ] }),
64270
64370
  /* @__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: [
64371
+ 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
64372
  /* @__PURE__ */ jsxs("div", { className: "block lg:hidden space-y-6 pb-6", children: [
64273
64373
  !shouldShowCycleTimeChart && !isUptimeMode && /* @__PURE__ */ jsxs(
64274
64374
  motion.div,
@@ -64317,8 +64417,7 @@ var WorkspaceDetailView = ({
64317
64417
  /* @__PURE__ */ jsx(
64318
64418
  "div",
64319
64419
  {
64320
- className: "h-[300px]",
64321
- style: { minHeight: "200px", minWidth: "300px" },
64420
+ className: "h-[300px] min-h-[220px] min-w-0",
64322
64421
  children: isUptimeMode ? /* @__PURE__ */ jsx(
64323
64422
  HourlyUptimeChart,
64324
64423
  {
@@ -64414,18 +64513,18 @@ var WorkspaceDetailView = ({
64414
64513
  ] })
64415
64514
  ] }) : /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(WorkspaceMetricCards, { workspace, legend: efficiencyLegend, className: "flex-1" }) })
64416
64515
  ] }),
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: [
64516
+ /* @__PURE__ */ jsxs("div", { className: "hidden lg:flex lg:flex-col lg:h-full lg:min-h-0 gap-3", children: [
64517
+ /* @__PURE__ */ jsxs("div", { className: clsx("grid grid-cols-1 lg:grid-cols-10 gap-3 min-h-0", desktopTopSectionClass), children: [
64419
64518
  !shouldShowCycleTimeChart && !isUptimeMode && /* @__PURE__ */ jsxs(
64420
64519
  motion.div,
64421
64520
  {
64422
- className: "bg-white rounded-lg shadow-sm p-4 lg:col-span-2",
64521
+ className: "bg-white rounded-lg shadow-sm p-4 lg:col-span-2 flex flex-col min-h-0",
64423
64522
  variants: chartCardVariants,
64424
64523
  initial: "initial",
64425
64524
  animate: "animate",
64426
64525
  children: [
64427
64526
  /* @__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(
64527
+ /* @__PURE__ */ jsx("div", { className: "flex-1 min-h-[220px] min-w-0", children: /* @__PURE__ */ jsx(
64429
64528
  OutputProgressChart,
64430
64529
  {
64431
64530
  currentOutput: workspace.total_actions || 0,
@@ -64438,78 +64537,73 @@ var WorkspaceDetailView = ({
64438
64537
  /* @__PURE__ */ jsxs(
64439
64538
  motion.div,
64440
64539
  {
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"}`,
64540
+ 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
64541
  variants: chartCardVariants,
64443
64542
  initial: "initial",
64444
64543
  animate: "animate",
64445
64544
  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",
64545
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 mb-4 flex-none", children: [
64546
+ /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold text-gray-700", children: isUptimeMode ? "Machine Utilization" : shouldShowCycleTimeChart ? "Cycle Time (last 60 minutes)" : "Hourly Output" }),
64547
+ !isUptimeMode && /* @__PURE__ */ jsx(
64548
+ "button",
64549
+ {
64550
+ onClick: () => setShowChartIdleTime(!showChartIdleTime),
64551
+ 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"}`,
64552
+ children: showChartIdleTime ? /* @__PURE__ */ jsxs(Fragment, { children: [
64553
+ /* @__PURE__ */ jsx(EyeOff, { className: "w-4 h-4 mr-1.5" }),
64554
+ "Hide Idle Time"
64555
+ ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
64556
+ /* @__PURE__ */ jsx(Eye, { className: "w-4 h-4 mr-1.5" }),
64557
+ "Show Idle Time"
64558
+ ] })
64559
+ }
64560
+ )
64561
+ ] }),
64562
+ /* @__PURE__ */ jsx("div", { className: "flex-1 min-h-[220px] min-w-0", children: isUptimeMode ? /* @__PURE__ */ jsx(
64563
+ HourlyUptimeChart,
64449
64564
  {
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
- ] })
64565
+ idleTimeHourly: workspace.idle_time_hourly,
64566
+ shiftStart: workspace.shift_start,
64567
+ shiftEnd: workspace.shift_end,
64568
+ shiftDate: idleClipDate,
64569
+ timezone,
64570
+ elapsedMinutes: elapsedShiftMinutes
64459
64571
  }
64460
- ) }),
64461
- /* @__PURE__ */ jsx(
64462
- "div",
64572
+ ) : shouldShowCycleTimeChart ? /* @__PURE__ */ jsx(
64573
+ CycleTimeOverTimeChart,
64463
64574
  {
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
- )
64575
+ data: workspace.hourly_action_counts || [],
64576
+ idealCycleTime: workspace.ideal_cycle_time || 0,
64577
+ shiftStart: workspace.shift_start || ""
64498
64578
  }
64499
- )
64579
+ ) : /* @__PURE__ */ jsx(
64580
+ HourlyOutputChart2,
64581
+ {
64582
+ data: workspace.hourly_action_counts || [],
64583
+ pphThreshold: workspace.pph_threshold || 0,
64584
+ shiftStart: workspace.shift_start || "06:00",
64585
+ shiftEnd: workspace.shift_end,
64586
+ showIdleTime: showChartIdleTime,
64587
+ idleTimeHourly: workspace.idle_time_hourly,
64588
+ idleTimeClips,
64589
+ idleTimeClipClassifications,
64590
+ shiftDate: idleClipDate,
64591
+ timezone
64592
+ }
64593
+ ) })
64500
64594
  ]
64501
64595
  }
64502
64596
  ),
64503
64597
  !shouldShowCycleTimeChart && idleTimeVlmEnabled && /* @__PURE__ */ jsxs(
64504
64598
  motion.div,
64505
64599
  {
64506
- className: "bg-white rounded-lg shadow-sm p-4 lg:col-span-2",
64600
+ className: "bg-white rounded-lg shadow-sm p-4 lg:col-span-2 flex flex-col min-h-0",
64507
64601
  variants: chartCardVariants,
64508
64602
  initial: "initial",
64509
64603
  animate: "animate",
64510
64604
  children: [
64511
64605
  /* @__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(
64606
+ /* @__PURE__ */ jsx("div", { className: "flex-1 min-h-[220px] min-w-0", children: /* @__PURE__ */ jsx(
64513
64607
  IdleTimeReasonChart,
64514
64608
  {
64515
64609
  data: idleTimeData.chartData,
@@ -64521,7 +64615,7 @@ var WorkspaceDetailView = ({
64521
64615
  }
64522
64616
  )
64523
64617
  ] }),
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: [
64618
+ 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
64619
  /* @__PURE__ */ jsxs(Card2, { children: [
64526
64620
  /* @__PURE__ */ jsx(CardHeader2, { className: "pb-2 flex-none", children: /* @__PURE__ */ jsx(CardTitle2, { className: "text-lg text-center", children: "Efficiency" }) }),
64527
64621
  /* @__PURE__ */ jsx(CardContent2, { className: "flex-1 flex items-center justify-center", children: /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
@@ -64557,7 +64651,7 @@ var WorkspaceDetailView = ({
64557
64651
  /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500 mt-2", children: "Total idle time" })
64558
64652
  ] }) })
64559
64653
  ] })
64560
- ] }) : /* @__PURE__ */ jsx("div", { className: "h-[50%] flex", children: /* @__PURE__ */ jsx(WorkspaceMetricCards, { workspace, legend: efficiencyLegend, className: "flex-1" }) })
64654
+ ] }) : /* @__PURE__ */ jsx("div", { className: clsx("flex min-h-0", desktopBottomSectionClass), children: /* @__PURE__ */ jsx(WorkspaceMetricCards, { workspace, legend: efficiencyLegend, className: "flex-1" }) })
64561
64655
  ] })
64562
64656
  ] }),
64563
64657
  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.45",
4
4
  "description": "Reusable UI & logic for Optifye dashboard",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",