@optifye/dashboard-core 6.10.42 → 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 +131 -79
- package/dist/index.mjs +131 -79
- 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(
|
|
@@ -42894,7 +42922,15 @@ var LineMonthlyHistory = ({
|
|
|
42894
42922
|
]
|
|
42895
42923
|
},
|
|
42896
42924
|
chartKey
|
|
42897
|
-
) }) })
|
|
42925
|
+
) }) }),
|
|
42926
|
+
!isUptimeMode && chartData.lastSetTarget > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center text-sm text-gray-600 bg-white py-1 pt-2", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 border border-gray-100 rounded-full px-3 py-1", children: [
|
|
42927
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-8 flex items-center", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full border-t-2 border-[#E34329] border-dashed" }) }),
|
|
42928
|
+
/* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
|
|
42929
|
+
"Target: ",
|
|
42930
|
+
Math.round(chartData.lastSetTarget),
|
|
42931
|
+
" units/day"
|
|
42932
|
+
] })
|
|
42933
|
+
] }) })
|
|
42898
42934
|
] })
|
|
42899
42935
|
] })
|
|
42900
42936
|
] })
|
|
@@ -63236,6 +63272,25 @@ var getInitialTab = (sourceType, defaultTab, fromMonthly, urlDate) => {
|
|
|
63236
63272
|
return "overview";
|
|
63237
63273
|
};
|
|
63238
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
|
+
};
|
|
63239
63294
|
var chartCardVariants = {
|
|
63240
63295
|
initial: { opacity: 0, y: 10 },
|
|
63241
63296
|
animate: {
|
|
@@ -63313,6 +63368,9 @@ var WorkspaceDetailView = ({
|
|
|
63313
63368
|
const [usingFallbackData, setUsingFallbackData] = React26.useState(false);
|
|
63314
63369
|
const { isIdleTimeVlmEnabled } = useIdleTimeVlmConfig();
|
|
63315
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";
|
|
63316
63374
|
const dashboardConfig = useDashboardConfig();
|
|
63317
63375
|
const { legend: efficiencyLegend } = useEfficiencyLegend();
|
|
63318
63376
|
const prewarmedClipsRef = React26.useRef(/* @__PURE__ */ new Set());
|
|
@@ -64289,7 +64347,7 @@ var WorkspaceDetailView = ({
|
|
|
64289
64347
|
] })
|
|
64290
64348
|
] }),
|
|
64291
64349
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-grow p-1.5 sm:p-2 lg:p-4", children: [
|
|
64292
|
-
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: [
|
|
64293
64351
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "block lg:hidden space-y-6 pb-6", children: [
|
|
64294
64352
|
!shouldShowCycleTimeChart && !isUptimeMode && /* @__PURE__ */ jsxRuntime.jsxs(
|
|
64295
64353
|
motion.div,
|
|
@@ -64338,8 +64396,7 @@ var WorkspaceDetailView = ({
|
|
|
64338
64396
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
64339
64397
|
"div",
|
|
64340
64398
|
{
|
|
64341
|
-
className: "h-[300px]",
|
|
64342
|
-
style: { minHeight: "200px", minWidth: "300px" },
|
|
64399
|
+
className: "h-[300px] min-h-[220px] min-w-0",
|
|
64343
64400
|
children: isUptimeMode ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
64344
64401
|
HourlyUptimeChart,
|
|
64345
64402
|
{
|
|
@@ -64435,18 +64492,18 @@ var WorkspaceDetailView = ({
|
|
|
64435
64492
|
] })
|
|
64436
64493
|
] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(WorkspaceMetricCards, { workspace, legend: efficiencyLegend, className: "flex-1" }) })
|
|
64437
64494
|
] }),
|
|
64438
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "hidden lg:flex lg:flex-col lg:h-full", children: [
|
|
64439
|
-
/* @__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: [
|
|
64440
64497
|
!shouldShowCycleTimeChart && !isUptimeMode && /* @__PURE__ */ jsxRuntime.jsxs(
|
|
64441
64498
|
motion.div,
|
|
64442
64499
|
{
|
|
64443
|
-
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",
|
|
64444
64501
|
variants: chartCardVariants,
|
|
64445
64502
|
initial: "initial",
|
|
64446
64503
|
animate: "animate",
|
|
64447
64504
|
children: [
|
|
64448
64505
|
/* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold text-gray-700 mb-4 text-center", children: "Today's Output" }),
|
|
64449
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[
|
|
64506
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-h-[220px] min-w-0", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
64450
64507
|
OutputProgressChart,
|
|
64451
64508
|
{
|
|
64452
64509
|
currentOutput: workspace.total_actions || 0,
|
|
@@ -64459,78 +64516,73 @@ var WorkspaceDetailView = ({
|
|
|
64459
64516
|
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
64460
64517
|
motion.div,
|
|
64461
64518
|
{
|
|
64462
|
-
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"}`,
|
|
64463
64520
|
variants: chartCardVariants,
|
|
64464
64521
|
initial: "initial",
|
|
64465
64522
|
animate: "animate",
|
|
64466
64523
|
children: [
|
|
64467
|
-
/* @__PURE__ */ jsxRuntime.
|
|
64468
|
-
|
|
64469
|
-
|
|
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,
|
|
64470
64543
|
{
|
|
64471
|
-
|
|
64472
|
-
|
|
64473
|
-
|
|
64474
|
-
|
|
64475
|
-
|
|
64476
|
-
|
|
64477
|
-
/* @__PURE__ */ jsxRuntime.jsx(lucideReact.Eye, { className: "w-4 h-4 mr-1.5" }),
|
|
64478
|
-
"Show Idle Time"
|
|
64479
|
-
] })
|
|
64544
|
+
idleTimeHourly: workspace.idle_time_hourly,
|
|
64545
|
+
shiftStart: workspace.shift_start,
|
|
64546
|
+
shiftEnd: workspace.shift_end,
|
|
64547
|
+
shiftDate: idleClipDate,
|
|
64548
|
+
timezone,
|
|
64549
|
+
elapsedMinutes: elapsedShiftMinutes
|
|
64480
64550
|
}
|
|
64481
|
-
)
|
|
64482
|
-
|
|
64483
|
-
"div",
|
|
64551
|
+
) : shouldShowCycleTimeChart ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
64552
|
+
CycleTimeOverTimeChart,
|
|
64484
64553
|
{
|
|
64485
|
-
|
|
64486
|
-
|
|
64487
|
-
|
|
64488
|
-
HourlyUptimeChart,
|
|
64489
|
-
{
|
|
64490
|
-
idleTimeHourly: workspace.idle_time_hourly,
|
|
64491
|
-
shiftStart: workspace.shift_start,
|
|
64492
|
-
shiftEnd: workspace.shift_end,
|
|
64493
|
-
shiftDate: idleClipDate,
|
|
64494
|
-
timezone,
|
|
64495
|
-
elapsedMinutes: elapsedShiftMinutes
|
|
64496
|
-
}
|
|
64497
|
-
) : shouldShowCycleTimeChart ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
64498
|
-
CycleTimeOverTimeChart,
|
|
64499
|
-
{
|
|
64500
|
-
data: workspace.hourly_action_counts || [],
|
|
64501
|
-
idealCycleTime: workspace.ideal_cycle_time || 0,
|
|
64502
|
-
shiftStart: workspace.shift_start || ""
|
|
64503
|
-
}
|
|
64504
|
-
) : /* @__PURE__ */ jsxRuntime.jsx(
|
|
64505
|
-
HourlyOutputChart2,
|
|
64506
|
-
{
|
|
64507
|
-
data: workspace.hourly_action_counts || [],
|
|
64508
|
-
pphThreshold: workspace.pph_threshold || 0,
|
|
64509
|
-
shiftStart: workspace.shift_start || "06:00",
|
|
64510
|
-
shiftEnd: workspace.shift_end,
|
|
64511
|
-
showIdleTime: showChartIdleTime,
|
|
64512
|
-
idleTimeHourly: workspace.idle_time_hourly,
|
|
64513
|
-
idleTimeClips,
|
|
64514
|
-
idleTimeClipClassifications,
|
|
64515
|
-
shiftDate: idleClipDate,
|
|
64516
|
-
timezone
|
|
64517
|
-
}
|
|
64518
|
-
)
|
|
64554
|
+
data: workspace.hourly_action_counts || [],
|
|
64555
|
+
idealCycleTime: workspace.ideal_cycle_time || 0,
|
|
64556
|
+
shiftStart: workspace.shift_start || ""
|
|
64519
64557
|
}
|
|
64520
|
-
)
|
|
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
|
+
) })
|
|
64521
64573
|
]
|
|
64522
64574
|
}
|
|
64523
64575
|
),
|
|
64524
64576
|
!shouldShowCycleTimeChart && idleTimeVlmEnabled && /* @__PURE__ */ jsxRuntime.jsxs(
|
|
64525
64577
|
motion.div,
|
|
64526
64578
|
{
|
|
64527
|
-
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",
|
|
64528
64580
|
variants: chartCardVariants,
|
|
64529
64581
|
initial: "initial",
|
|
64530
64582
|
animate: "animate",
|
|
64531
64583
|
children: [
|
|
64532
64584
|
/* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold text-gray-700 mb-4 text-center", children: "Idle Time Breakdown" }),
|
|
64533
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[
|
|
64585
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-h-[220px] min-w-0", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
64534
64586
|
IdleTimeReasonChart,
|
|
64535
64587
|
{
|
|
64536
64588
|
data: idleTimeData.chartData,
|
|
@@ -64542,7 +64594,7 @@ var WorkspaceDetailView = ({
|
|
|
64542
64594
|
}
|
|
64543
64595
|
)
|
|
64544
64596
|
] }),
|
|
64545
|
-
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: [
|
|
64546
64598
|
/* @__PURE__ */ jsxRuntime.jsxs(Card2, { children: [
|
|
64547
64599
|
/* @__PURE__ */ jsxRuntime.jsx(CardHeader2, { className: "pb-2 flex-none", children: /* @__PURE__ */ jsxRuntime.jsx(CardTitle2, { className: "text-lg text-center", children: "Efficiency" }) }),
|
|
64548
64600
|
/* @__PURE__ */ jsxRuntime.jsx(CardContent2, { className: "flex-1 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
|
|
@@ -64578,7 +64630,7 @@ var WorkspaceDetailView = ({
|
|
|
64578
64630
|
/* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-500 mt-2", children: "Total idle time" })
|
|
64579
64631
|
] }) })
|
|
64580
64632
|
] })
|
|
64581
|
-
] }) : /* @__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" }) })
|
|
64582
64634
|
] })
|
|
64583
64635
|
] }),
|
|
64584
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(
|
|
@@ -42865,7 +42893,15 @@ var LineMonthlyHistory = ({
|
|
|
42865
42893
|
]
|
|
42866
42894
|
},
|
|
42867
42895
|
chartKey
|
|
42868
|
-
) }) })
|
|
42896
|
+
) }) }),
|
|
42897
|
+
!isUptimeMode && chartData.lastSetTarget > 0 && /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center text-sm text-gray-600 bg-white py-1 pt-2", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 border border-gray-100 rounded-full px-3 py-1", children: [
|
|
42898
|
+
/* @__PURE__ */ jsx("div", { className: "w-8 flex items-center", children: /* @__PURE__ */ jsx("div", { className: "w-full border-t-2 border-[#E34329] border-dashed" }) }),
|
|
42899
|
+
/* @__PURE__ */ jsxs("span", { children: [
|
|
42900
|
+
"Target: ",
|
|
42901
|
+
Math.round(chartData.lastSetTarget),
|
|
42902
|
+
" units/day"
|
|
42903
|
+
] })
|
|
42904
|
+
] }) })
|
|
42869
42905
|
] })
|
|
42870
42906
|
] })
|
|
42871
42907
|
] })
|
|
@@ -63207,6 +63243,25 @@ var getInitialTab = (sourceType, defaultTab, fromMonthly, urlDate) => {
|
|
|
63207
63243
|
return "overview";
|
|
63208
63244
|
};
|
|
63209
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
|
+
};
|
|
63210
63265
|
var chartCardVariants = {
|
|
63211
63266
|
initial: { opacity: 0, y: 10 },
|
|
63212
63267
|
animate: {
|
|
@@ -63284,6 +63339,9 @@ var WorkspaceDetailView = ({
|
|
|
63284
63339
|
const [usingFallbackData, setUsingFallbackData] = useState(false);
|
|
63285
63340
|
const { isIdleTimeVlmEnabled } = useIdleTimeVlmConfig();
|
|
63286
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";
|
|
63287
63345
|
const dashboardConfig = useDashboardConfig();
|
|
63288
63346
|
const { legend: efficiencyLegend } = useEfficiencyLegend();
|
|
63289
63347
|
const prewarmedClipsRef = useRef(/* @__PURE__ */ new Set());
|
|
@@ -64260,7 +64318,7 @@ var WorkspaceDetailView = ({
|
|
|
64260
64318
|
] })
|
|
64261
64319
|
] }),
|
|
64262
64320
|
/* @__PURE__ */ jsxs("div", { className: "flex-grow p-1.5 sm:p-2 lg:p-4", children: [
|
|
64263
|
-
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: [
|
|
64264
64322
|
/* @__PURE__ */ jsxs("div", { className: "block lg:hidden space-y-6 pb-6", children: [
|
|
64265
64323
|
!shouldShowCycleTimeChart && !isUptimeMode && /* @__PURE__ */ jsxs(
|
|
64266
64324
|
motion.div,
|
|
@@ -64309,8 +64367,7 @@ var WorkspaceDetailView = ({
|
|
|
64309
64367
|
/* @__PURE__ */ jsx(
|
|
64310
64368
|
"div",
|
|
64311
64369
|
{
|
|
64312
|
-
className: "h-[300px]",
|
|
64313
|
-
style: { minHeight: "200px", minWidth: "300px" },
|
|
64370
|
+
className: "h-[300px] min-h-[220px] min-w-0",
|
|
64314
64371
|
children: isUptimeMode ? /* @__PURE__ */ jsx(
|
|
64315
64372
|
HourlyUptimeChart,
|
|
64316
64373
|
{
|
|
@@ -64406,18 +64463,18 @@ var WorkspaceDetailView = ({
|
|
|
64406
64463
|
] })
|
|
64407
64464
|
] }) : /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(WorkspaceMetricCards, { workspace, legend: efficiencyLegend, className: "flex-1" }) })
|
|
64408
64465
|
] }),
|
|
64409
|
-
/* @__PURE__ */ jsxs("div", { className: "hidden lg:flex lg:flex-col lg:h-full", children: [
|
|
64410
|
-
/* @__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: [
|
|
64411
64468
|
!shouldShowCycleTimeChart && !isUptimeMode && /* @__PURE__ */ jsxs(
|
|
64412
64469
|
motion.div,
|
|
64413
64470
|
{
|
|
64414
|
-
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",
|
|
64415
64472
|
variants: chartCardVariants,
|
|
64416
64473
|
initial: "initial",
|
|
64417
64474
|
animate: "animate",
|
|
64418
64475
|
children: [
|
|
64419
64476
|
/* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold text-gray-700 mb-4 text-center", children: "Today's Output" }),
|
|
64420
|
-
/* @__PURE__ */ jsx("div", { className: "h-[
|
|
64477
|
+
/* @__PURE__ */ jsx("div", { className: "flex-1 min-h-[220px] min-w-0", children: /* @__PURE__ */ jsx(
|
|
64421
64478
|
OutputProgressChart,
|
|
64422
64479
|
{
|
|
64423
64480
|
currentOutput: workspace.total_actions || 0,
|
|
@@ -64430,78 +64487,73 @@ var WorkspaceDetailView = ({
|
|
|
64430
64487
|
/* @__PURE__ */ jsxs(
|
|
64431
64488
|
motion.div,
|
|
64432
64489
|
{
|
|
64433
|
-
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"}`,
|
|
64434
64491
|
variants: chartCardVariants,
|
|
64435
64492
|
initial: "initial",
|
|
64436
64493
|
animate: "animate",
|
|
64437
64494
|
children: [
|
|
64438
|
-
/* @__PURE__ */
|
|
64439
|
-
|
|
64440
|
-
|
|
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,
|
|
64441
64514
|
{
|
|
64442
|
-
|
|
64443
|
-
|
|
64444
|
-
|
|
64445
|
-
|
|
64446
|
-
|
|
64447
|
-
|
|
64448
|
-
/* @__PURE__ */ jsx(Eye, { className: "w-4 h-4 mr-1.5" }),
|
|
64449
|
-
"Show Idle Time"
|
|
64450
|
-
] })
|
|
64515
|
+
idleTimeHourly: workspace.idle_time_hourly,
|
|
64516
|
+
shiftStart: workspace.shift_start,
|
|
64517
|
+
shiftEnd: workspace.shift_end,
|
|
64518
|
+
shiftDate: idleClipDate,
|
|
64519
|
+
timezone,
|
|
64520
|
+
elapsedMinutes: elapsedShiftMinutes
|
|
64451
64521
|
}
|
|
64452
|
-
)
|
|
64453
|
-
|
|
64454
|
-
"div",
|
|
64522
|
+
) : shouldShowCycleTimeChart ? /* @__PURE__ */ jsx(
|
|
64523
|
+
CycleTimeOverTimeChart,
|
|
64455
64524
|
{
|
|
64456
|
-
|
|
64457
|
-
|
|
64458
|
-
|
|
64459
|
-
HourlyUptimeChart,
|
|
64460
|
-
{
|
|
64461
|
-
idleTimeHourly: workspace.idle_time_hourly,
|
|
64462
|
-
shiftStart: workspace.shift_start,
|
|
64463
|
-
shiftEnd: workspace.shift_end,
|
|
64464
|
-
shiftDate: idleClipDate,
|
|
64465
|
-
timezone,
|
|
64466
|
-
elapsedMinutes: elapsedShiftMinutes
|
|
64467
|
-
}
|
|
64468
|
-
) : shouldShowCycleTimeChart ? /* @__PURE__ */ jsx(
|
|
64469
|
-
CycleTimeOverTimeChart,
|
|
64470
|
-
{
|
|
64471
|
-
data: workspace.hourly_action_counts || [],
|
|
64472
|
-
idealCycleTime: workspace.ideal_cycle_time || 0,
|
|
64473
|
-
shiftStart: workspace.shift_start || ""
|
|
64474
|
-
}
|
|
64475
|
-
) : /* @__PURE__ */ jsx(
|
|
64476
|
-
HourlyOutputChart2,
|
|
64477
|
-
{
|
|
64478
|
-
data: workspace.hourly_action_counts || [],
|
|
64479
|
-
pphThreshold: workspace.pph_threshold || 0,
|
|
64480
|
-
shiftStart: workspace.shift_start || "06:00",
|
|
64481
|
-
shiftEnd: workspace.shift_end,
|
|
64482
|
-
showIdleTime: showChartIdleTime,
|
|
64483
|
-
idleTimeHourly: workspace.idle_time_hourly,
|
|
64484
|
-
idleTimeClips,
|
|
64485
|
-
idleTimeClipClassifications,
|
|
64486
|
-
shiftDate: idleClipDate,
|
|
64487
|
-
timezone
|
|
64488
|
-
}
|
|
64489
|
-
)
|
|
64525
|
+
data: workspace.hourly_action_counts || [],
|
|
64526
|
+
idealCycleTime: workspace.ideal_cycle_time || 0,
|
|
64527
|
+
shiftStart: workspace.shift_start || ""
|
|
64490
64528
|
}
|
|
64491
|
-
)
|
|
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
|
+
) })
|
|
64492
64544
|
]
|
|
64493
64545
|
}
|
|
64494
64546
|
),
|
|
64495
64547
|
!shouldShowCycleTimeChart && idleTimeVlmEnabled && /* @__PURE__ */ jsxs(
|
|
64496
64548
|
motion.div,
|
|
64497
64549
|
{
|
|
64498
|
-
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",
|
|
64499
64551
|
variants: chartCardVariants,
|
|
64500
64552
|
initial: "initial",
|
|
64501
64553
|
animate: "animate",
|
|
64502
64554
|
children: [
|
|
64503
64555
|
/* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold text-gray-700 mb-4 text-center", children: "Idle Time Breakdown" }),
|
|
64504
|
-
/* @__PURE__ */ jsx("div", { className: "h-[
|
|
64556
|
+
/* @__PURE__ */ jsx("div", { className: "flex-1 min-h-[220px] min-w-0", children: /* @__PURE__ */ jsx(
|
|
64505
64557
|
IdleTimeReasonChart,
|
|
64506
64558
|
{
|
|
64507
64559
|
data: idleTimeData.chartData,
|
|
@@ -64513,7 +64565,7 @@ var WorkspaceDetailView = ({
|
|
|
64513
64565
|
}
|
|
64514
64566
|
)
|
|
64515
64567
|
] }),
|
|
64516
|
-
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: [
|
|
64517
64569
|
/* @__PURE__ */ jsxs(Card2, { children: [
|
|
64518
64570
|
/* @__PURE__ */ jsx(CardHeader2, { className: "pb-2 flex-none", children: /* @__PURE__ */ jsx(CardTitle2, { className: "text-lg text-center", children: "Efficiency" }) }),
|
|
64519
64571
|
/* @__PURE__ */ jsx(CardContent2, { className: "flex-1 flex items-center justify-center", children: /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
|
|
@@ -64549,7 +64601,7 @@ var WorkspaceDetailView = ({
|
|
|
64549
64601
|
/* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500 mt-2", children: "Total idle time" })
|
|
64550
64602
|
] }) })
|
|
64551
64603
|
] })
|
|
64552
|
-
] }) : /* @__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" }) })
|
|
64553
64605
|
] })
|
|
64554
64606
|
] }),
|
|
64555
64607
|
activeTab === "monthly_history" && /* @__PURE__ */ jsxs("div", { className: "h-[calc(100vh-10rem)] overflow-y-auto px-2 sm:px-4 lg:px-0", children: [
|