@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.
- package/dist/index.css +15 -9
- package/dist/index.js +122 -78
- package/dist/index.mjs +122 -78
- 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:
|
|
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:
|
|
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:
|
|
30543
|
-
interval:
|
|
30544
|
-
angle:
|
|
30556
|
+
tick: { fontSize: xAxisConfig.tickFont },
|
|
30557
|
+
interval: xAxisConfig.interval,
|
|
30558
|
+
angle: xAxisConfig.angle,
|
|
30545
30559
|
textAnchor: "end",
|
|
30546
|
-
tickMargin:
|
|
30547
|
-
height:
|
|
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:
|
|
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:
|
|
32582
|
-
interval:
|
|
32583
|
-
angle:
|
|
32609
|
+
tick: { fontSize: xAxisConfig.tickFont },
|
|
32610
|
+
interval: xAxisConfig.interval,
|
|
32611
|
+
angle: xAxisConfig.angle,
|
|
32584
32612
|
textAnchor: "end",
|
|
32585
|
-
tickMargin:
|
|
32586
|
-
height:
|
|
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:
|
|
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: "
|
|
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-[
|
|
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
|
|
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.
|
|
64476
|
-
|
|
64477
|
-
|
|
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
|
-
|
|
64480
|
-
|
|
64481
|
-
|
|
64482
|
-
|
|
64483
|
-
|
|
64484
|
-
|
|
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
|
-
|
|
64491
|
-
"div",
|
|
64551
|
+
) : shouldShowCycleTimeChart ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
64552
|
+
CycleTimeOverTimeChart,
|
|
64492
64553
|
{
|
|
64493
|
-
|
|
64494
|
-
|
|
64495
|
-
|
|
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-[
|
|
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-
|
|
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-
|
|
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:
|
|
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:
|
|
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:
|
|
30514
|
-
interval:
|
|
30515
|
-
angle:
|
|
30527
|
+
tick: { fontSize: xAxisConfig.tickFont },
|
|
30528
|
+
interval: xAxisConfig.interval,
|
|
30529
|
+
angle: xAxisConfig.angle,
|
|
30516
30530
|
textAnchor: "end",
|
|
30517
|
-
tickMargin:
|
|
30518
|
-
height:
|
|
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:
|
|
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:
|
|
32553
|
-
interval:
|
|
32554
|
-
angle:
|
|
32580
|
+
tick: { fontSize: xAxisConfig.tickFont },
|
|
32581
|
+
interval: xAxisConfig.interval,
|
|
32582
|
+
angle: xAxisConfig.angle,
|
|
32555
32583
|
textAnchor: "end",
|
|
32556
|
-
tickMargin:
|
|
32557
|
-
height:
|
|
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:
|
|
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: "
|
|
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-[
|
|
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
|
|
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__ */
|
|
64447
|
-
|
|
64448
|
-
|
|
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
|
-
|
|
64451
|
-
|
|
64452
|
-
|
|
64453
|
-
|
|
64454
|
-
|
|
64455
|
-
|
|
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
|
-
|
|
64462
|
-
"div",
|
|
64522
|
+
) : shouldShowCycleTimeChart ? /* @__PURE__ */ jsx(
|
|
64523
|
+
CycleTimeOverTimeChart,
|
|
64463
64524
|
{
|
|
64464
|
-
|
|
64465
|
-
|
|
64466
|
-
|
|
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-[
|
|
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-
|
|
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-
|
|
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: [
|