@optifye/dashboard-core 6.5.3 → 6.5.5

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 +396 -59
  2. package/dist/index.js +919 -519
  3. package/dist/index.mjs +919 -519
  4. package/package.json +1 -1
package/dist/index.mjs CHANGED
@@ -3551,6 +3551,20 @@ function parseS3Uri(s3Uri, sopCategories) {
3551
3551
  severity = "low";
3552
3552
  description = "Cycle Completion";
3553
3553
  break;
3554
+ case "running_cycle":
3555
+ case "active_cycle":
3556
+ case "production_cycle":
3557
+ type = "running_cycle";
3558
+ severity = "low";
3559
+ description = "Active Production Cycle";
3560
+ break;
3561
+ case "setup_state":
3562
+ case "machine_setup":
3563
+ case "line_setup":
3564
+ type = "setup_state";
3565
+ severity = "medium";
3566
+ description = "Machine Setup Activity";
3567
+ break;
3554
3568
  case "medium_bottleneck":
3555
3569
  severity = "medium";
3556
3570
  description = "Medium Bottleneck Identified";
@@ -3581,6 +3595,14 @@ function parseS3Uri(s3Uri, sopCategories) {
3581
3595
  type = "cycle_completion";
3582
3596
  severity = "low";
3583
3597
  description = "Cycle Completion";
3598
+ } else if (normalizedViolationType.includes("running") && normalizedViolationType.includes("cycle")) {
3599
+ type = "running_cycle";
3600
+ severity = "low";
3601
+ description = "Active Production Cycle";
3602
+ } else if (normalizedViolationType.includes("setup") || normalizedViolationType.includes("machine") && normalizedViolationType.includes("setup")) {
3603
+ type = "setup_state";
3604
+ severity = "medium";
3605
+ description = "Machine Setup Activity";
3584
3606
  } else {
3585
3607
  description = `Clip type: ${violationType.replace(/_/g, " ")}`;
3586
3608
  console.log(`Detected unknown violation type: ${violationType} in URI: ${s3Uri}`);
@@ -21773,11 +21795,13 @@ var VideoCard = React19__default.memo(({
21773
21795
  return /* @__PURE__ */ jsxs(
21774
21796
  "div",
21775
21797
  {
21776
- className: `workspace-card relative bg-gray-950 rounded-md overflow-hidden cursor-pointer transform hover:scale-[1.005] transition-transform duration-200 shadow-sm ${className}`,
21798
+ className: `workspace-card relative bg-gray-950 rounded-md overflow-hidden cursor-pointer transform hover:scale-[1.005] active:scale-[0.995] transition-transform duration-200 shadow-sm touch-manipulation ${className}`,
21777
21799
  style: { width: "100%", height: "100%" },
21778
21800
  onClick: handleClick,
21779
21801
  onMouseEnter,
21780
21802
  onMouseLeave,
21803
+ onTouchStart: (e) => e.currentTarget.classList.add("touch-active"),
21804
+ onTouchEnd: (e) => e.currentTarget.classList.remove("touch-active"),
21781
21805
  title: displayName,
21782
21806
  tabIndex: 0,
21783
21807
  "aria-label": `Open workspace ${displayName}`,
@@ -22872,9 +22896,11 @@ var BreakNotificationPopup = ({
22872
22896
  "button",
22873
22897
  {
22874
22898
  onClick: handleDismiss,
22875
- className: "ml-2 text-gray-400 hover:text-gray-600 transition-colors p-1 rounded-full hover:bg-gray-100",
22899
+ onTouchStart: () => {
22900
+ },
22901
+ className: "ml-2 text-gray-400 hover:text-gray-600 transition-colors p-2 sm:p-1 rounded-full hover:bg-gray-100 active:bg-gray-200 touch-manipulation min-h-[44px] min-w-[44px] sm:min-h-0 sm:min-w-0 flex items-center justify-center",
22876
22902
  "aria-label": "Dismiss notification",
22877
- children: /* @__PURE__ */ jsx(X, { className: "w-3 h-3" })
22903
+ children: /* @__PURE__ */ jsx(X, { className: "w-4 h-4 sm:w-3 sm:h-3" })
22878
22904
  }
22879
22905
  )
22880
22906
  ] })
@@ -26129,7 +26155,7 @@ var SelectTrigger = React19.forwardRef(({ className, children, ...props }, ref)
26129
26155
  {
26130
26156
  ref,
26131
26157
  className: cn(
26132
- "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
26158
+ "flex h-11 sm:h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 touch-manipulation",
26133
26159
  className
26134
26160
  ),
26135
26161
  ...props,
@@ -27718,6 +27744,10 @@ var BottlenecksContent = ({
27718
27744
  return "Worst Cycle Time";
27719
27745
  case "cycle_completion":
27720
27746
  return "Cycle Completion";
27747
+ case "running_cycle":
27748
+ return "Running Cycle";
27749
+ case "setup_state":
27750
+ return "Setup State";
27721
27751
  case "bottleneck":
27722
27752
  default:
27723
27753
  return "";
@@ -27732,6 +27762,8 @@ var BottlenecksContent = ({
27732
27762
  blue: { text: "text-blue-600", bg: "bg-blue-600", dot: "bg-blue-600" },
27733
27763
  orange: { text: "text-orange-600", bg: "bg-orange-600", dot: "bg-orange-600" },
27734
27764
  yellow: { text: "text-yellow-600", bg: "bg-yellow-600", dot: "bg-yellow-600" },
27765
+ teal: { text: "text-teal-600", bg: "bg-teal-600", dot: "bg-teal-600" },
27766
+ amber: { text: "text-amber-600", bg: "bg-amber-600", dot: "bg-amber-600" },
27735
27767
  gray: { text: "text-gray-600", bg: "bg-gray-600", dot: "bg-gray-600" }
27736
27768
  };
27737
27769
  return colorMap[color2] || colorMap.gray;
@@ -28252,7 +28284,7 @@ var WorkspaceGridItem = React19__default.memo(({
28252
28284
  "button",
28253
28285
  {
28254
28286
  onClick: handleClick,
28255
- className: `${styles2} ${colorClass} ${isBottleneck ? "ring-2 ring-red-500/70" : ""} ${isVeryLowEfficiency ? "ring-2 ring-red-500/50" : ""} ${isInactive ? "bg-gray-200" : ""} shadow-lg`,
28287
+ className: `${styles2} ${colorClass} ${isBottleneck ? "ring-2 ring-red-500/70" : ""} ${isVeryLowEfficiency ? "ring-2 ring-red-500/50" : ""} ${isInactive ? "bg-gray-200" : ""} shadow-lg touch-manipulation active:scale-[0.98] transition-transform`,
28256
28288
  "aria-label": isInactive ? `Inactive workspace ${workspaceNumber}` : `View details for workspace ${workspaceNumber}`,
28257
28289
  title: isInactive ? `Inactive: ${getWorkspaceDisplayName(data.workspace_name, data.line_id)}` : getWorkspaceDisplayName(data.workspace_name, data.line_id),
28258
28290
  children: /* @__PURE__ */ jsx("div", { className: `font-semibold tracking-wide text-lg sm:text-xl md:text-[min(4vw,2rem)] uppercase ${isInactive ? "text-gray-400" : "text-white"} drop-shadow-sm`, children: workspaceNumber })
@@ -28522,8 +28554,8 @@ var KPICard = ({
28522
28554
  },
28523
28555
  // Width for src matching - better mobile width, flexible on small screens
28524
28556
  !className?.includes("w-") && "w-[110px] sm:w-[180px] md:w-[220px]",
28525
- // Interactive styling if onClick is provided
28526
- onClick && "cursor-pointer hover:scale-[1.01] active:scale-[0.99]",
28557
+ // Interactive styling if onClick is provided - better touch targets
28558
+ onClick && "cursor-pointer hover:scale-[1.01] active:scale-[0.99] touch-manipulation min-h-[44px] min-w-[44px]",
28527
28559
  // Loading state
28528
28560
  isLoading && "animate-pulse",
28529
28561
  // User-provided classes
@@ -28534,6 +28566,8 @@ var KPICard = ({
28534
28566
  {
28535
28567
  className: cardClasses,
28536
28568
  onClick,
28569
+ onTouchStart: onClick ? () => {
28570
+ } : void 0,
28537
28571
  role: onClick ? "button" : void 0,
28538
28572
  tabIndex: onClick ? 0 : void 0,
28539
28573
  onKeyDown: onClick ? (e) => e.key === "Enter" && onClick() : void 0,
@@ -28952,10 +28986,7 @@ var WorkspaceHealthCard = ({
28952
28986
  /* @__PURE__ */ jsx(Activity, { className: "h-3.5 w-3.5 text-gray-400" }),
28953
28987
  /* @__PURE__ */ jsxs("span", { className: "text-sm text-gray-600 dark:text-gray-400 whitespace-nowrap", children: [
28954
28988
  "Uptime today: ",
28955
- /* @__PURE__ */ jsxs("span", { className: clsx(
28956
- "font-medium",
28957
- workspace.uptimePercentage >= 97 ? "text-green-600 dark:text-green-400" : workspace.uptimePercentage >= 90 ? "text-yellow-600 dark:text-yellow-400" : "text-red-600 dark:text-red-400"
28958
- ), children: [
28989
+ /* @__PURE__ */ jsxs("span", { className: "font-medium", children: [
28959
28990
  workspace.uptimePercentage.toFixed(1),
28960
28991
  "%"
28961
28992
  ] })
@@ -29037,10 +29068,7 @@ var CompactWorkspaceHealthCard = ({
29037
29068
  ] }),
29038
29069
  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
29039
29070
  workspace.uptimePercentage !== void 0 && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
29040
- /* @__PURE__ */ jsxs("p", { className: clsx(
29041
- "text-xs font-medium",
29042
- workspace.uptimePercentage >= 97 ? "text-green-600 dark:text-green-400" : workspace.uptimePercentage >= 90 ? "text-yellow-600 dark:text-yellow-400" : "text-red-600 dark:text-red-400"
29043
- ), children: [
29071
+ /* @__PURE__ */ jsxs("p", { className: "text-xs font-medium text-gray-600 dark:text-gray-400", children: [
29044
29072
  workspace.uptimePercentage.toFixed(1),
29045
29073
  "%"
29046
29074
  ] }),
@@ -29271,27 +29299,27 @@ var DashboardHeader = memo(({ lineTitle, className = "", headerControls }) => {
29271
29299
  return /* @__PURE__ */ jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" }) });
29272
29300
  }
29273
29301
  };
29274
- return /* @__PURE__ */ jsxs("div", { className: `flex flex-row items-center justify-between w-full ${className}`, children: [
29302
+ return /* @__PURE__ */ jsxs("div", { className: `flex flex-col sm:flex-row items-start sm:items-center justify-between w-full gap-3 sm:gap-4 ${className}`, children: [
29275
29303
  /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
29276
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 sm:gap-2 md:gap-3", children: [
29277
- /* @__PURE__ */ jsx("h1", { className: "text-lg sm:text-xl md:text-2xl lg:text-3xl font-bold text-gray-800 tracking-tight leading-none", children: lineTitle }),
29278
- /* @__PURE__ */ jsx("div", { className: "h-1.5 w-1.5 sm:h-1.5 sm:w-1.5 md:h-2 md:w-2 rounded-full bg-green-500 animate-pulse ring-2 sm:ring-2 ring-green-500/30 ring-offset-1" })
29304
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 sm:gap-2 md:gap-3", children: [
29305
+ /* @__PURE__ */ jsx("h1", { className: "text-base sm:text-lg md:text-xl lg:text-2xl xl:text-3xl font-bold text-gray-800 tracking-tight leading-none truncate max-w-[200px] sm:max-w-[250px] md:max-w-[350px] lg:max-w-none", children: lineTitle }),
29306
+ /* @__PURE__ */ jsx("div", { className: "h-1.5 w-1.5 sm:h-1.5 sm:w-1.5 md:h-2 md:w-2 rounded-full bg-green-500 animate-pulse ring-2 sm:ring-2 ring-green-500/30 ring-offset-1 flex-shrink-0" })
29279
29307
  ] }),
29280
- /* @__PURE__ */ jsxs("div", { className: "mt-2 inline-flex items-center gap-2 sm:gap-3", children: [
29281
- /* @__PURE__ */ jsxs("div", { className: "text-xs sm:text-sm font-medium text-gray-600", children: [
29308
+ /* @__PURE__ */ jsxs("div", { className: "mt-1 sm:mt-2 inline-flex flex-wrap items-center gap-2 sm:gap-3", children: [
29309
+ /* @__PURE__ */ jsxs("div", { className: "text-[10px] sm:text-xs md:text-sm font-medium text-gray-600 whitespace-nowrap", children: [
29282
29310
  /* @__PURE__ */ jsx(ISTTimer2, {}),
29283
29311
  " IST"
29284
29312
  ] }),
29285
29313
  /* @__PURE__ */ jsxs("div", { className: "inline-flex items-center gap-1", children: [
29286
29314
  /* @__PURE__ */ jsx("div", { className: "text-gray-600", children: getShiftIcon() }),
29287
- /* @__PURE__ */ jsxs("span", { className: "text-xs sm:text-sm font-medium text-gray-600", children: [
29315
+ /* @__PURE__ */ jsxs("span", { className: "text-[10px] sm:text-xs md:text-sm font-medium text-gray-600 whitespace-nowrap", children: [
29288
29316
  getShiftName(),
29289
29317
  " Shift"
29290
29318
  ] })
29291
29319
  ] })
29292
29320
  ] })
29293
29321
  ] }),
29294
- headerControls && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-4", children: headerControls })
29322
+ headerControls && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2 sm:gap-3 md:gap-4 w-full sm:w-auto justify-end", children: headerControls })
29295
29323
  ] });
29296
29324
  });
29297
29325
  DashboardHeader.displayName = "DashboardHeader";
@@ -29603,27 +29631,27 @@ var PageHeader = ({
29603
29631
  className
29604
29632
  ),
29605
29633
  children: [
29606
- /* @__PURE__ */ jsxs("div", { className: "h-16 mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between", children: [
29607
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 min-w-0", children: [
29634
+ /* @__PURE__ */ jsxs("div", { className: "h-14 sm:h-16 mx-auto px-3 sm:px-4 md:px-6 lg:px-8 flex items-center justify-between", children: [
29635
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 sm:gap-3 min-w-0 flex-1", children: [
29608
29636
  onMobileMenuOpen && /* @__PURE__ */ jsx(HamburgerButton, { onClick: onMobileMenuOpen }),
29609
- headerLogo && /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 mr-2 md:hidden", children: headerLogo }),
29637
+ headerLogo && /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 mr-1 sm:mr-2 md:hidden", children: headerLogo }),
29610
29638
  " ",
29611
- /* @__PURE__ */ jsxs("div", { className: "flex flex-col min-w-0", children: [
29639
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col min-w-0 flex-1", children: [
29612
29640
  breadcrumbs && breadcrumbs.length > 0 && /* @__PURE__ */ jsx(Breadcrumbs, { items: breadcrumbs }),
29613
- /* @__PURE__ */ jsx("h1", { className: "text-lg md:text-xl font-semibold text-gray-900 dark:text-white truncate", title, children: title })
29641
+ /* @__PURE__ */ jsx("h1", { className: "text-sm sm:text-base md:text-lg lg:text-xl font-semibold text-gray-900 dark:text-white truncate", title, children: title })
29614
29642
  ] })
29615
29643
  ] }),
29616
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 md:gap-4", children: [
29617
- actions && /* @__PURE__ */ jsx("div", { className: "hidden md:flex items-center gap-2", children: actions }),
29618
- /* @__PURE__ */ jsxs("button", { onClick: toggleDarkMode, className: "p-1.5 rounded-md text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-indigo-500", children: [
29619
- darkMode ? /* @__PURE__ */ jsx(Sun, { className: "h-5 w-5" }) : /* @__PURE__ */ jsx(Moon, { className: "h-5 w-5" }),
29644
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 sm:gap-3 md:gap-4 flex-shrink-0", children: [
29645
+ actions && /* @__PURE__ */ jsx("div", { className: "hidden sm:flex items-center gap-2", children: actions }),
29646
+ /* @__PURE__ */ jsxs("button", { onClick: toggleDarkMode, className: "p-1 sm:p-1.5 rounded-md text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-indigo-500", children: [
29647
+ darkMode ? /* @__PURE__ */ jsx(Sun, { className: "h-4 w-4 sm:h-5 sm:w-5" }) : /* @__PURE__ */ jsx(Moon, { className: "h-4 w-4 sm:h-5 sm:w-5" }),
29620
29648
  /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Toggle dark mode" })
29621
29649
  ] }),
29622
- showDateTime && /* @__PURE__ */ jsx(DateTimeDisplay, { className: "hidden lg:flex" }),
29650
+ showDateTime && /* @__PURE__ */ jsx(DateTimeDisplay, { className: "hidden sm:flex text-xs sm:text-sm" }),
29623
29651
  userProfileConfig && /* @__PURE__ */ jsx(UserProfileDropdown, { config: userProfileConfig })
29624
29652
  ] })
29625
29653
  ] }),
29626
- actions && /* @__PURE__ */ jsx("div", { className: "md:hidden px-4 pb-2 border-t border-gray-200 dark:border-gray-700 flex items-center justify-end gap-2", children: actions })
29654
+ actions && /* @__PURE__ */ jsx("div", { className: "sm:hidden px-3 py-2 border-t border-gray-200 dark:border-gray-700 flex items-center justify-end gap-2", children: actions })
29627
29655
  ]
29628
29656
  }
29629
29657
  );
@@ -29647,9 +29675,9 @@ var SideNavBar = memo(({
29647
29675
  const pathname = propPathname || router.pathname;
29648
29676
  const getButtonClasses = useCallback((path) => {
29649
29677
  const isActive = pathname === path || pathname.startsWith(path + "/");
29650
- return `w-full flex flex-col items-center justify-center py-3 px-1 rounded-lg relative group
29651
- ${isActive ? "bg-blue-100 text-blue-700 shadow-md border border-blue-200 font-semibold" : "hover:bg-gray-50 text-gray-500 hover:text-gray-700 font-medium"}
29652
- transition-all duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2`;
29678
+ return `w-full flex flex-col items-center justify-center py-4 sm:py-3 px-2 sm:px-1 rounded-lg relative group min-h-[44px] sm:min-h-0
29679
+ ${isActive ? "bg-blue-100 text-blue-700 shadow-md border border-blue-200 font-semibold" : "hover:bg-gray-50 text-gray-500 hover:text-gray-700 font-medium active:bg-gray-100"}
29680
+ transition-all duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 active:scale-[0.98]`;
29653
29681
  }, [pathname]);
29654
29682
  const handleHomeClick = useCallback(() => {
29655
29683
  navigate("/", {
@@ -29813,7 +29841,7 @@ var SideNavBar = memo(({
29813
29841
  "aria-selected": pathname === "/" || pathname.startsWith("//"),
29814
29842
  children: [
29815
29843
  /* @__PURE__ */ jsx(HomeIcon, { className: "w-5 h-5 mb-1" }),
29816
- /* @__PURE__ */ jsx("span", { className: "text-[10px] font-medium leading-tight", children: "Home" })
29844
+ /* @__PURE__ */ jsx("span", { className: "text-xs sm:text-[10px] font-medium leading-tight", children: "Home" })
29817
29845
  ]
29818
29846
  }
29819
29847
  ) }),
@@ -29829,7 +29857,7 @@ var SideNavBar = memo(({
29829
29857
  "aria-selected": pathname === "/leaderboard" || pathname.startsWith("/leaderboard/"),
29830
29858
  children: [
29831
29859
  /* @__PURE__ */ jsx(TrophyIcon, { className: "w-5 h-5 mb-1" }),
29832
- /* @__PURE__ */ jsx("span", { className: "text-[10px] font-medium leading-tight", children: "Leaders" })
29860
+ /* @__PURE__ */ jsx("span", { className: "text-xs sm:text-[10px] font-medium leading-tight", children: "Leaders" })
29833
29861
  ]
29834
29862
  }
29835
29863
  ),
@@ -29844,7 +29872,7 @@ var SideNavBar = memo(({
29844
29872
  "aria-selected": pathname === "/kpis" || pathname.startsWith("/kpis/"),
29845
29873
  children: [
29846
29874
  /* @__PURE__ */ jsx(ChartBarIcon, { className: "w-5 h-5 mb-1" }),
29847
- /* @__PURE__ */ jsx("span", { className: "text-[10px] font-medium leading-tight", children: "Lines" })
29875
+ /* @__PURE__ */ jsx("span", { className: "text-xs sm:text-[10px] font-medium leading-tight", children: "Lines" })
29848
29876
  ]
29849
29877
  }
29850
29878
  ),
@@ -29859,7 +29887,7 @@ var SideNavBar = memo(({
29859
29887
  "aria-selected": pathname === "/targets" || pathname.startsWith("/targets/"),
29860
29888
  children: [
29861
29889
  /* @__PURE__ */ jsx(AdjustmentsHorizontalIcon, { className: "w-5 h-5 mb-1" }),
29862
- /* @__PURE__ */ jsx("span", { className: "text-[10px] font-medium leading-tight", children: "Targets" })
29890
+ /* @__PURE__ */ jsx("span", { className: "text-xs sm:text-[10px] font-medium leading-tight", children: "Targets" })
29863
29891
  ]
29864
29892
  }
29865
29893
  ),
@@ -29874,7 +29902,7 @@ var SideNavBar = memo(({
29874
29902
  "aria-selected": pathname === "/shifts" || pathname.startsWith("/shifts/"),
29875
29903
  children: [
29876
29904
  /* @__PURE__ */ jsx(ClockIcon, { className: "w-5 h-5 mb-1" }),
29877
- /* @__PURE__ */ jsx("span", { className: "text-[10px] font-medium leading-tight", children: "Shifts" })
29905
+ /* @__PURE__ */ jsx("span", { className: "text-xs sm:text-[10px] font-medium leading-tight", children: "Shifts" })
29878
29906
  ]
29879
29907
  }
29880
29908
  ),
@@ -29889,7 +29917,7 @@ var SideNavBar = memo(({
29889
29917
  "aria-selected": pathname === "/skus" || pathname.startsWith("/skus/"),
29890
29918
  children: [
29891
29919
  /* @__PURE__ */ jsx(CubeIcon, { className: "w-5 h-5 mb-1" }),
29892
- /* @__PURE__ */ jsx("span", { className: "text-[10px] font-medium leading-tight", children: "SKUs" })
29920
+ /* @__PURE__ */ jsx("span", { className: "text-xs sm:text-[10px] font-medium leading-tight", children: "SKUs" })
29893
29921
  ]
29894
29922
  }
29895
29923
  ),
@@ -29904,7 +29932,7 @@ var SideNavBar = memo(({
29904
29932
  "aria-selected": pathname === "/ai-agent" || pathname.startsWith("/ai-agent/"),
29905
29933
  children: [
29906
29934
  /* @__PURE__ */ jsx(SparklesIcon, { className: "w-5 h-5 mb-1" }),
29907
- /* @__PURE__ */ jsx("span", { className: "text-[10px] font-medium leading-tight", children: "Axel" })
29935
+ /* @__PURE__ */ jsx("span", { className: "text-xs sm:text-[10px] font-medium leading-tight", children: "Axel" })
29908
29936
  ]
29909
29937
  }
29910
29938
  ),
@@ -29919,7 +29947,7 @@ var SideNavBar = memo(({
29919
29947
  "aria-selected": pathname === "/help" || pathname.startsWith("/help/"),
29920
29948
  children: [
29921
29949
  /* @__PURE__ */ jsx(QuestionMarkCircleIcon, { className: "w-5 h-5 mb-1" }),
29922
- /* @__PURE__ */ jsx("span", { className: "text-[10px] font-medium leading-tight", children: "Help" })
29950
+ /* @__PURE__ */ jsx("span", { className: "text-xs sm:text-[10px] font-medium leading-tight", children: "Help" })
29923
29951
  ]
29924
29952
  }
29925
29953
  ),
@@ -29934,7 +29962,7 @@ var SideNavBar = memo(({
29934
29962
  "aria-selected": pathname === "/health" || pathname.startsWith("/health/"),
29935
29963
  children: [
29936
29964
  /* @__PURE__ */ jsx(HeartIcon, { className: "w-5 h-5 mb-1" }),
29937
- /* @__PURE__ */ jsx("span", { className: "text-[10px] font-medium leading-tight", children: "Health" })
29965
+ /* @__PURE__ */ jsx("span", { className: "text-xs sm:text-[10px] font-medium leading-tight", children: "Health" })
29938
29966
  ]
29939
29967
  }
29940
29968
  )
@@ -29951,7 +29979,7 @@ var SideNavBar = memo(({
29951
29979
  "aria-selected": pathname === "/profile" || pathname.startsWith("/profile/"),
29952
29980
  children: [
29953
29981
  /* @__PURE__ */ jsx(UserCircleIcon, { className: "w-5 h-5 mb-1" }),
29954
- /* @__PURE__ */ jsx("span", { className: "text-[10px] font-medium leading-tight", children: "Profile" })
29982
+ /* @__PURE__ */ jsx("span", { className: "text-xs sm:text-[10px] font-medium leading-tight", children: "Profile" })
29955
29983
  ]
29956
29984
  }
29957
29985
  ) })
@@ -30281,29 +30309,32 @@ var Header = ({
30281
30309
  const handleLogout = async () => {
30282
30310
  await signOut();
30283
30311
  };
30284
- return /* @__PURE__ */ jsx("header", { className: `fixed top-0 left-0 right-0 h-16 bg-white border-b border-gray-200 z-50 ${className}`, children: /* @__PURE__ */ jsxs("div", { className: "h-full max-w-[1920px] mx-auto px-6 flex items-center justify-between", children: [
30285
- /* @__PURE__ */ jsx("div", { className: "flex items-center gap-6", children: /* @__PURE__ */ jsx("h1", { className: "text-xl font-semibold text-gray-900", children: getPageTitle() }) }),
30286
- user && /* @__PURE__ */ jsxs("div", { className: "relative", children: [
30312
+ return /* @__PURE__ */ jsx("header", { className: `fixed top-0 left-0 right-0 h-14 sm:h-16 bg-white border-b border-gray-200 z-50 ${className}`, children: /* @__PURE__ */ jsxs("div", { className: "h-full max-w-[1920px] mx-auto px-3 sm:px-4 md:px-6 flex items-center justify-between", children: [
30313
+ /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2 sm:gap-4 md:gap-6 min-w-0", children: /* @__PURE__ */ jsx("h1", { className: "text-sm sm:text-base md:text-lg lg:text-xl font-semibold text-gray-900 truncate", children: getPageTitle() }) }),
30314
+ user && /* @__PURE__ */ jsxs("div", { className: "relative flex-shrink-0", children: [
30287
30315
  /* @__PURE__ */ jsxs(
30288
30316
  "button",
30289
30317
  {
30290
30318
  onClick: () => setShowDropdown(!showDropdown),
30291
- className: "flex items-center gap-2 px-3 py-2 rounded-md hover:bg-gray-100 transition-colors",
30319
+ className: "flex items-center gap-1 sm:gap-2 px-2 sm:px-3 py-1 sm:py-2 rounded-md hover:bg-gray-100 transition-colors",
30292
30320
  children: [
30293
- /* @__PURE__ */ jsx("div", { className: "w-8 h-8 bg-indigo-600 rounded-full flex items-center justify-center text-white text-sm font-medium", children: user.email?.[0]?.toUpperCase() || "U" }),
30294
- /* @__PURE__ */ jsx("span", { className: "text-sm text-gray-700", children: user.email }),
30295
- /* @__PURE__ */ jsx("svg", { className: "w-4 h-4 text-gray-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) })
30321
+ /* @__PURE__ */ jsx("div", { className: "w-6 h-6 sm:w-7 sm:h-7 md:w-8 md:h-8 bg-indigo-600 rounded-full flex items-center justify-center text-white text-xs sm:text-sm font-medium flex-shrink-0", children: user.email?.[0]?.toUpperCase() || "U" }),
30322
+ /* @__PURE__ */ jsx("span", { className: "text-xs sm:text-sm text-gray-700 truncate max-w-[100px] sm:max-w-[150px] md:max-w-[200px] lg:max-w-none hidden sm:block", children: user.email }),
30323
+ /* @__PURE__ */ jsx("svg", { className: "w-3 h-3 sm:w-4 sm:h-4 text-gray-400 flex-shrink-0", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) })
30296
30324
  ]
30297
30325
  }
30298
30326
  ),
30299
- showDropdown && /* @__PURE__ */ jsx("div", { className: "absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-50", children: /* @__PURE__ */ jsx(
30300
- "button",
30301
- {
30302
- onClick: handleLogout,
30303
- className: "block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100",
30304
- children: "Sign out"
30305
- }
30306
- ) })
30327
+ showDropdown && /* @__PURE__ */ jsxs("div", { className: "absolute right-0 mt-1 sm:mt-2 w-40 sm:w-48 bg-white rounded-md shadow-lg py-1 z-50", children: [
30328
+ /* @__PURE__ */ jsx("div", { className: "block sm:hidden px-4 py-2 text-xs text-gray-500 border-b border-gray-100", children: user.email }),
30329
+ /* @__PURE__ */ jsx(
30330
+ "button",
30331
+ {
30332
+ onClick: handleLogout,
30333
+ className: "block w-full text-left px-4 py-2 text-xs sm:text-sm text-gray-700 hover:bg-gray-100",
30334
+ children: "Sign out"
30335
+ }
30336
+ )
30337
+ ] })
30307
30338
  ] })
30308
30339
  ] }) });
30309
30340
  };
@@ -30654,7 +30685,7 @@ var ThreadSidebar = ({
30654
30685
  ] });
30655
30686
  };
30656
30687
  var axelProfilePng = "/axel-profile.png";
30657
- var ProfilePicture = React19__default.memo(({ alt = "Axel", className = "w-12 h-12" }) => {
30688
+ var ProfilePicture = React19__default.memo(({ alt = "Axel", className = "w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12" }) => {
30658
30689
  return /* @__PURE__ */ jsx("div", { className: "flex-shrink-0", children: /* @__PURE__ */ jsx("div", { className: `${className} rounded-xl overflow-hidden shadow-sm`, children: /* @__PURE__ */ jsx(
30659
30690
  "img",
30660
30691
  {
@@ -32260,54 +32291,105 @@ var AIAgentView = () => {
32260
32291
  }
32261
32292
  `
32262
32293
  } }),
32263
- /* @__PURE__ */ jsxs("div", { className: `flex-1 flex flex-col h-screen transition-all duration-300 ${isSidebarOpen ? "mr-80" : "mr-0"}`, children: [
32264
- /* @__PURE__ */ jsx("header", { className: "flex-shrink-0 bg-white px-8 py-6 shadow-sm border-b border-gray-200/80 sticky top-0 z-10", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between relative", children: [
32265
- /* @__PURE__ */ jsx("div", { className: "absolute left-0", children: /* @__PURE__ */ jsx(
32266
- BackButtonMinimal,
32267
- {
32268
- onClick: () => navigate("/"),
32269
- text: "Back",
32270
- size: "default",
32271
- "aria-label": "Navigate back to dashboard"
32272
- }
32273
- ) }),
32274
- /* @__PURE__ */ jsxs("div", { className: "flex-1 text-center mx-auto", children: [
32275
- /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-3 mb-1", children: [
32276
- /* @__PURE__ */ jsx("h1", { className: "text-3xl font-semibold text-gray-900", children: "Chat with Axel" }),
32277
- /* @__PURE__ */ jsx("div", { className: "h-1 w-1 sm:h-1.5 sm:w-1.5 md:h-2 md:w-2 rounded-full bg-green-500 animate-pulse ring-1 sm:ring-2 ring-green-500/30 ring-offset-1" })
32294
+ /* @__PURE__ */ jsxs("div", { className: `flex-1 flex flex-col h-screen transition-all duration-300 ${isSidebarOpen ? "lg:mr-80 mr-0" : "mr-0"}`, children: [
32295
+ /* @__PURE__ */ jsxs("header", { className: "flex-shrink-0 bg-white px-3 sm:px-6 md:px-8 py-3 sm:py-5 md:py-6 shadow-sm border-b border-gray-200/80 sticky top-0 z-10", children: [
32296
+ /* @__PURE__ */ jsxs("div", { className: "sm:hidden", children: [
32297
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-2", children: [
32298
+ /* @__PURE__ */ jsx(
32299
+ BackButtonMinimal,
32300
+ {
32301
+ onClick: () => navigate("/"),
32302
+ text: "Back",
32303
+ size: "sm",
32304
+ "aria-label": "Navigate back to dashboard"
32305
+ }
32306
+ ),
32307
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
32308
+ /* @__PURE__ */ jsxs(
32309
+ "button",
32310
+ {
32311
+ onClick: handleNewThread,
32312
+ className: "flex items-center gap-1 px-2.5 py-1.5 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors text-xs font-medium",
32313
+ children: [
32314
+ /* @__PURE__ */ jsx(RefreshCw, { className: "w-3.5 h-3.5" }),
32315
+ /* @__PURE__ */ jsx("span", { children: "New" })
32316
+ ]
32317
+ }
32318
+ ),
32319
+ /* @__PURE__ */ jsx(
32320
+ "button",
32321
+ {
32322
+ onClick: () => setIsSidebarOpen(!isSidebarOpen),
32323
+ className: "relative flex items-center gap-1 px-2.5 py-1.5 text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 transition-colors text-xs font-medium",
32324
+ "aria-label": "Toggle chat history",
32325
+ children: isSidebarOpen ? /* @__PURE__ */ jsxs(Fragment, { children: [
32326
+ /* @__PURE__ */ jsx(X, { className: "w-3.5 h-3.5" }),
32327
+ /* @__PURE__ */ jsx("span", { children: "Hide" })
32328
+ ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
32329
+ /* @__PURE__ */ jsx(Menu, { className: "w-3.5 h-3.5" }),
32330
+ /* @__PURE__ */ jsx("span", { children: "History" }),
32331
+ newChatCount > 0 && /* @__PURE__ */ jsx("span", { className: "ml-1 bg-red-500 text-white text-xs rounded-full px-1.5 py-0.5 font-medium", children: newChatCount })
32332
+ ] })
32333
+ }
32334
+ )
32335
+ ] })
32278
32336
  ] }),
32279
- /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "text-sm text-gray-500", children: /* @__PURE__ */ jsx(ISTTimer_default, {}) }) })
32337
+ /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
32338
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-2 mb-0.5", children: [
32339
+ /* @__PURE__ */ jsx("h1", { className: "text-base font-semibold text-gray-900", children: "Chat with Axel" }),
32340
+ /* @__PURE__ */ jsx("div", { className: "h-1 w-1 rounded-full bg-green-500 animate-pulse ring-1 ring-green-500/30 ring-offset-1" })
32341
+ ] }),
32342
+ /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "text-xs text-gray-500", children: /* @__PURE__ */ jsx(ISTTimer_default, {}) }) })
32343
+ ] })
32280
32344
  ] }),
32281
- /* @__PURE__ */ jsxs("div", { className: "absolute right-0 flex items-center gap-2", children: [
32282
- /* @__PURE__ */ jsxs(
32283
- "button",
32284
- {
32285
- onClick: handleNewThread,
32286
- className: "flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors text-sm font-medium",
32287
- children: [
32288
- /* @__PURE__ */ jsx(RefreshCw, { className: "w-4 h-4" }),
32289
- "New Chat"
32290
- ]
32291
- }
32292
- ),
32293
- /* @__PURE__ */ jsx(
32294
- "button",
32345
+ /* @__PURE__ */ jsxs("div", { className: "hidden sm:flex items-center justify-between relative", children: [
32346
+ /* @__PURE__ */ jsx("div", { className: "absolute left-0", children: /* @__PURE__ */ jsx(
32347
+ BackButtonMinimal,
32295
32348
  {
32296
- onClick: () => setIsSidebarOpen(!isSidebarOpen),
32297
- className: "relative flex items-center gap-2 px-4 py-2 text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 transition-colors text-sm font-medium",
32298
- "aria-label": "Toggle chat history",
32299
- children: isSidebarOpen ? /* @__PURE__ */ jsxs(Fragment, { children: [
32300
- /* @__PURE__ */ jsx(X, { className: "w-4 h-4" }),
32301
- /* @__PURE__ */ jsx("span", { children: "Hide History" })
32302
- ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
32303
- /* @__PURE__ */ jsx(Menu, { className: "w-4 h-4" }),
32304
- /* @__PURE__ */ jsx("span", { children: "Chat History" }),
32305
- newChatCount > 0 && /* @__PURE__ */ jsx("span", { className: "ml-1 bg-red-500 text-white text-xs rounded-full px-2 py-0.5 font-medium", children: newChatCount })
32306
- ] })
32349
+ onClick: () => navigate("/"),
32350
+ text: "Back",
32351
+ size: "default",
32352
+ "aria-label": "Navigate back to dashboard"
32307
32353
  }
32308
- )
32354
+ ) }),
32355
+ /* @__PURE__ */ jsxs("div", { className: "flex-1 text-center mx-auto", children: [
32356
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-3 mb-1", children: [
32357
+ /* @__PURE__ */ jsx("h1", { className: "text-xl md:text-2xl lg:text-3xl font-semibold text-gray-900", children: "Chat with Axel" }),
32358
+ /* @__PURE__ */ jsx("div", { className: "h-1.5 w-1.5 md:h-2 md:w-2 rounded-full bg-green-500 animate-pulse ring-2 ring-green-500/30 ring-offset-1" })
32359
+ ] }),
32360
+ /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "text-sm text-gray-500", children: /* @__PURE__ */ jsx(ISTTimer_default, {}) }) })
32361
+ ] }),
32362
+ /* @__PURE__ */ jsxs("div", { className: "absolute right-0 flex items-center gap-2", children: [
32363
+ /* @__PURE__ */ jsxs(
32364
+ "button",
32365
+ {
32366
+ onClick: handleNewThread,
32367
+ className: "flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors text-sm font-medium",
32368
+ children: [
32369
+ /* @__PURE__ */ jsx(RefreshCw, { className: "w-4 h-4" }),
32370
+ /* @__PURE__ */ jsx("span", { children: "New Chat" })
32371
+ ]
32372
+ }
32373
+ ),
32374
+ /* @__PURE__ */ jsx(
32375
+ "button",
32376
+ {
32377
+ onClick: () => setIsSidebarOpen(!isSidebarOpen),
32378
+ className: "relative flex items-center gap-2 px-4 py-2 text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 transition-colors text-sm font-medium",
32379
+ "aria-label": "Toggle chat history",
32380
+ children: isSidebarOpen ? /* @__PURE__ */ jsxs(Fragment, { children: [
32381
+ /* @__PURE__ */ jsx(X, { className: "w-4 h-4" }),
32382
+ /* @__PURE__ */ jsx("span", { children: "Hide History" })
32383
+ ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
32384
+ /* @__PURE__ */ jsx(Menu, { className: "w-4 h-4" }),
32385
+ /* @__PURE__ */ jsx("span", { children: "Chat History" }),
32386
+ newChatCount > 0 && /* @__PURE__ */ jsx("span", { className: "ml-1 bg-red-500 text-white text-xs rounded-full px-2 py-0.5 font-medium", children: newChatCount })
32387
+ ] })
32388
+ }
32389
+ )
32390
+ ] })
32309
32391
  ] })
32310
- ] }) }),
32392
+ ] }),
32311
32393
  /* @__PURE__ */ jsx(
32312
32394
  "main",
32313
32395
  {
@@ -32315,16 +32397,16 @@ var AIAgentView = () => {
32315
32397
  className: `flex-1 bg-gray-50/50 min-h-0 ${displayMessages.length === 0 && !isTransitioning ? "flex items-center justify-center" : "overflow-y-auto"}`,
32316
32398
  children: !activeThreadId && displayMessages.length === 0 && !isTransitioning ? (
32317
32399
  /* Centered welcome and input for new chat */
32318
- /* @__PURE__ */ jsxs("div", { className: "w-full max-w-3xl mx-auto px-4 sm:px-6 flex flex-col items-center justify-center space-y-12 -mt-16", children: [
32400
+ /* @__PURE__ */ jsxs("div", { className: "w-full max-w-3xl mx-auto px-3 sm:px-4 md:px-6 flex flex-col items-center justify-center space-y-8 sm:space-y-12 -mt-8 sm:-mt-16", children: [
32319
32401
  /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
32320
- /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center mb-8", children: /* @__PURE__ */ jsx(ProfilePicture, { alt: "Axel - AI Manufacturing Expert", className: "w-24 h-24" }) }),
32321
- /* @__PURE__ */ jsxs("h2", { className: "text-3xl font-semibold text-gray-900", children: [
32402
+ /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center mb-4 sm:mb-6 md:mb-8", children: /* @__PURE__ */ jsx(ProfilePicture, { alt: "Axel - AI Manufacturing Expert", className: "w-16 h-16 sm:w-20 sm:h-20 md:w-24 md:h-24" }) }),
32403
+ /* @__PURE__ */ jsxs("h2", { className: "text-lg sm:text-xl md:text-2xl lg:text-3xl font-semibold text-gray-900 px-2 sm:px-4", children: [
32322
32404
  typedText,
32323
32405
  typedText.length < "Hi, I'm Axel - Your AI Supervisor".length && /* @__PURE__ */ jsx("span", { className: "animate-pulse", children: "|" })
32324
32406
  ] })
32325
32407
  ] }),
32326
32408
  /* @__PURE__ */ jsx("div", { className: "w-full max-w-2xl", children: /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, children: [
32327
- /* @__PURE__ */ jsx("div", { className: "relative bg-white rounded-3xl shadow-lg border border-gray-200 focus-within:border-gray-300 transition-all duration-200", children: /* @__PURE__ */ jsx("div", { className: "flex items-end gap-2 p-3", children: /* @__PURE__ */ jsxs("div", { className: "flex-1 relative", children: [
32409
+ /* @__PURE__ */ jsx("div", { className: "relative bg-white rounded-2xl sm:rounded-3xl shadow-lg border border-gray-200 focus-within:border-gray-300 transition-all duration-200", children: /* @__PURE__ */ jsx("div", { className: "flex items-end gap-2 p-3 sm:p-4", children: /* @__PURE__ */ jsxs("div", { className: "flex-1 relative", children: [
32328
32410
  /* @__PURE__ */ jsx(
32329
32411
  "textarea",
32330
32412
  {
@@ -32355,24 +32437,24 @@ var AIAgentView = () => {
32355
32437
  });
32356
32438
  },
32357
32439
  placeholder: "Ask me anything about your shop-floor",
32358
- className: "w-full resize-none bg-transparent px-2 py-2 pr-12 focus:outline-none placeholder-gray-500 text-gray-900 text-sm leading-relaxed",
32440
+ className: "w-full resize-none bg-transparent px-3 sm:px-4 py-3 sm:py-2 pr-12 sm:pr-14 focus:outline-none placeholder-gray-500 text-gray-900 text-sm sm:text-base leading-relaxed",
32359
32441
  rows: 1,
32360
- style: { minHeight: "24px", maxHeight: "120px" }
32442
+ style: { minHeight: "40px", maxHeight: "120px" }
32361
32443
  }
32362
32444
  ),
32363
- /* @__PURE__ */ jsx("div", { className: "absolute right-2 bottom-2 flex items-center gap-2", children: /* @__PURE__ */ jsx(
32445
+ /* @__PURE__ */ jsx("div", { className: "absolute right-2 sm:right-3 bottom-2 sm:bottom-2 flex items-center gap-2", children: /* @__PURE__ */ jsx(
32364
32446
  "button",
32365
32447
  {
32366
32448
  type: "submit",
32367
32449
  disabled: !inputValue.trim() || isCurrentThreadLoading,
32368
- className: "inline-flex items-center justify-center w-8 h-8 bg-gray-900 text-white rounded-full hover:bg-gray-800 transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed focus:outline-none focus:ring-2 focus:ring-gray-500/20",
32450
+ className: "inline-flex items-center justify-center w-8 h-8 sm:w-9 sm:h-9 bg-gray-900 text-white rounded-full hover:bg-gray-800 transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed focus:outline-none focus:ring-2 focus:ring-gray-500/20",
32369
32451
  children: /* @__PURE__ */ jsx(Send, { className: "w-4 h-4" })
32370
32452
  }
32371
32453
  ) })
32372
32454
  ] }) }) }),
32373
- /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center mt-2 text-xs text-gray-400", children: [
32374
- /* @__PURE__ */ jsx("span", { children: isCurrentThreadLoading ? "You can type your next message while Axel responds" : "Press Enter to send \u2022 Shift+Enter for new line" }),
32375
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 ml-4", children: [
32455
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col sm:flex-row items-center justify-center gap-2 sm:gap-4 mt-2 text-xs text-gray-400", children: [
32456
+ /* @__PURE__ */ jsx("span", { className: "text-center", children: isCurrentThreadLoading ? "You can type your next message while Axel responds" : "Press Enter to send \u2022 Shift+Enter for new line" }),
32457
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
32376
32458
  /* @__PURE__ */ jsx("div", { className: `w-1.5 h-1.5 rounded-full ${isCurrentThreadLoading ? "bg-orange-500" : "bg-green-500"}` }),
32377
32459
  /* @__PURE__ */ jsx("span", { children: isCurrentThreadLoading ? "Responding..." : "Connected" })
32378
32460
  ] })
@@ -32381,17 +32463,17 @@ var AIAgentView = () => {
32381
32463
  ] })
32382
32464
  ) : isTransitioning ? (
32383
32465
  /* Transition state - show user message first, then thinking */
32384
- /* @__PURE__ */ jsx("div", { className: "max-w-4xl mx-auto px-4 sm:px-6 py-6 pb-32", children: /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
32466
+ /* @__PURE__ */ jsx("div", { className: "max-w-4xl mx-auto px-3 sm:px-4 md:px-6 py-4 sm:py-6 pb-24 sm:pb-32", children: /* @__PURE__ */ jsxs("div", { className: "space-y-4 sm:space-y-6", children: [
32385
32467
  displayMessages.map((message, index) => /* @__PURE__ */ jsxs(
32386
32468
  "div",
32387
32469
  {
32388
- className: `flex gap-4 ${message.role === "user" ? "justify-end" : "justify-start"}`,
32470
+ className: `flex gap-2 sm:gap-3 md:gap-4 ${message.role === "user" ? "justify-end" : "justify-start"}`,
32389
32471
  children: [
32390
32472
  message.role === "assistant" && /* @__PURE__ */ jsx(ProfilePicture, {}),
32391
32473
  /* @__PURE__ */ jsx("div", { className: `max-w-none w-full group ${message.role === "user" ? "order-1" : ""}`, children: /* @__PURE__ */ jsx(
32392
32474
  "div",
32393
32475
  {
32394
- className: `relative px-5 py-4 rounded-2xl shadow-sm ${message.role === "user" ? "bg-blue-600 text-white max-w-[85%] ml-auto" : "bg-white border border-gray-200/80 max-w-full"}`,
32476
+ className: `relative px-3 sm:px-4 md:px-5 py-3 sm:py-4 rounded-xl sm:rounded-2xl shadow-sm ${message.role === "user" ? "bg-blue-600 text-white max-w-[90%] sm:max-w-[85%] ml-auto" : "bg-white border border-gray-200/80 max-w-full"}`,
32395
32477
  children: /* @__PURE__ */ jsxs("div", { className: `${message.role === "user" ? "text-white" : "text-gray-800"}`, children: [
32396
32478
  message.role === "assistant" ? message.id === -1 ? /* @__PURE__ */ jsx(
32397
32479
  "div",
@@ -32415,18 +32497,18 @@ var AIAgentView = () => {
32415
32497
  ] }) })
32416
32498
  ) : (
32417
32499
  /* Regular chat view with messages */
32418
- /* @__PURE__ */ jsx("div", { className: "max-w-4xl mx-auto px-4 sm:px-6 py-6 pb-32", children: /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
32500
+ /* @__PURE__ */ jsx("div", { className: "max-w-4xl mx-auto px-3 sm:px-4 md:px-6 py-4 sm:py-6 pb-24 sm:pb-32", children: /* @__PURE__ */ jsxs("div", { className: "space-y-4 sm:space-y-6", children: [
32419
32501
  displayMessages.map((message, index) => /* @__PURE__ */ jsxs(
32420
32502
  "div",
32421
32503
  {
32422
- className: `flex gap-4 ${message.role === "user" ? "justify-end" : "justify-start"}`,
32504
+ className: `flex gap-2 sm:gap-3 md:gap-4 ${message.role === "user" ? "justify-end" : "justify-start"}`,
32423
32505
  children: [
32424
32506
  message.role === "assistant" && /* @__PURE__ */ jsx(ProfilePicture, {}),
32425
32507
  /* @__PURE__ */ jsxs("div", { className: `max-w-none w-full group ${message.role === "user" ? "order-1" : ""}`, children: [
32426
32508
  /* @__PURE__ */ jsxs(
32427
32509
  "div",
32428
32510
  {
32429
- className: `relative px-5 py-4 rounded-2xl shadow-sm ${message.role === "user" ? "bg-blue-600 text-white max-w-[85%] ml-auto" : "bg-white border border-gray-200/80 max-w-full"}`,
32511
+ className: `relative px-3 sm:px-4 md:px-5 py-3 sm:py-4 rounded-xl sm:rounded-2xl shadow-sm ${message.role === "user" ? "bg-blue-600 text-white max-w-[90%] sm:max-w-[85%] ml-auto" : "bg-white border border-gray-200/80 max-w-full"}`,
32430
32512
  children: [
32431
32513
  /* @__PURE__ */ jsxs("div", { className: `${message.role === "user" ? "text-white" : "text-gray-800"}`, children: [
32432
32514
  message.role === "assistant" ? message.id === -1 ? /* @__PURE__ */ jsx(
@@ -32442,9 +32524,9 @@ var AIAgentView = () => {
32442
32524
  "button",
32443
32525
  {
32444
32526
  onClick: () => copyToClipboard(message.content, message.id.toString()),
32445
- className: "absolute top-3 right-3 opacity-0 group-hover:opacity-100 transition-opacity duration-200 p-1.5 hover:bg-gray-100 rounded-lg",
32527
+ className: "absolute top-2 sm:top-3 right-2 sm:right-3 opacity-100 sm:opacity-0 group-hover:opacity-100 transition-opacity duration-200 p-1 sm:p-1.5 hover:bg-gray-100 rounded-lg",
32446
32528
  title: "Copy message",
32447
- children: copiedMessageId === message.id.toString() ? /* @__PURE__ */ jsx(Check, { className: "w-4 h-4 text-green-600" }) : /* @__PURE__ */ jsx(Copy, { className: "w-4 h-4 text-gray-500" })
32529
+ children: copiedMessageId === message.id.toString() ? /* @__PURE__ */ jsx(Check, { className: "w-3.5 h-3.5 sm:w-4 sm:h-4 text-green-600" }) : /* @__PURE__ */ jsx(Copy, { className: "w-3.5 h-3.5 sm:w-4 sm:h-4 text-gray-500" })
32448
32530
  }
32449
32531
  ),
32450
32532
  message.reasoning && /* @__PURE__ */ jsxs("details", { className: "mt-3 pt-3 border-t border-gray-200", children: [
@@ -32454,7 +32536,7 @@ var AIAgentView = () => {
32454
32536
  ]
32455
32537
  }
32456
32538
  ),
32457
- /* @__PURE__ */ jsxs("div", { className: `mt-2 flex items-center gap-2 text-xs text-gray-400 ${message.role === "user" ? "justify-end" : "justify-start"}`, children: [
32539
+ /* @__PURE__ */ jsxs("div", { className: `mt-1.5 sm:mt-2 flex items-center gap-2 text-xs text-gray-400 ${message.role === "user" ? "justify-end" : "justify-start"}`, children: [
32458
32540
  /* @__PURE__ */ jsx("span", { children: formatTime3(message.created_at) }),
32459
32541
  message.role === "assistant" && message.id !== -1 && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
32460
32542
  /* @__PURE__ */ jsx("div", { className: "w-1 h-1 bg-gray-300 rounded-full" }),
@@ -32489,15 +32571,15 @@ var AIAgentView = () => {
32489
32571
  )
32490
32572
  }
32491
32573
  ),
32492
- (displayMessages.length > 0 || isTransitioning) && /* @__PURE__ */ jsx("footer", { className: "fixed bottom-0 left-0 right-0 bg-gradient-to-t from-gray-50/50 to-transparent pointer-events-none", children: /* @__PURE__ */ jsx("div", { className: "max-w-4xl mx-auto p-4 sm:p-6 pointer-events-auto", children: /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, children: [
32574
+ (displayMessages.length > 0 || isTransitioning) && /* @__PURE__ */ jsx("footer", { className: `fixed bottom-0 left-0 right-0 bg-gradient-to-t from-gray-50/50 to-transparent pointer-events-none ${isSidebarOpen ? "lg:right-80" : "right-0"}`, children: /* @__PURE__ */ jsx("div", { className: "max-w-4xl mx-auto p-3 sm:p-4 md:p-6 pointer-events-auto", children: /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, children: [
32493
32575
  /* @__PURE__ */ jsx(
32494
32576
  "div",
32495
32577
  {
32496
- className: `relative bg-white rounded-3xl shadow-lg border border-gray-200 focus-within:border-gray-300 transition-all duration-200 ${isTransitioning ? "animate-slide-down" : ""}`,
32578
+ className: `relative bg-white rounded-2xl sm:rounded-3xl shadow-lg border border-gray-200 focus-within:border-gray-300 transition-all duration-200 ${isTransitioning ? "animate-slide-down" : ""}`,
32497
32579
  style: isTransitioning ? {
32498
32580
  animation: "slideDown 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards"
32499
32581
  } : {},
32500
- children: /* @__PURE__ */ jsx("div", { className: "flex items-end gap-2 p-3", children: /* @__PURE__ */ jsxs("div", { className: "flex-1 relative", children: [
32582
+ children: /* @__PURE__ */ jsx("div", { className: "flex items-end gap-2 p-3 sm:p-4", children: /* @__PURE__ */ jsxs("div", { className: "flex-1 relative", children: [
32501
32583
  /* @__PURE__ */ jsx(
32502
32584
  "textarea",
32503
32585
  {
@@ -32528,33 +32610,33 @@ var AIAgentView = () => {
32528
32610
  });
32529
32611
  },
32530
32612
  placeholder: "Ask me anything about your shop-floor",
32531
- className: "w-full resize-none bg-transparent px-2 py-2 pr-12 focus:outline-none placeholder-gray-500 text-gray-900 text-sm leading-relaxed",
32613
+ className: "w-full resize-none bg-transparent px-3 sm:px-4 py-3 sm:py-2 pr-12 sm:pr-14 focus:outline-none placeholder-gray-500 text-gray-900 text-sm sm:text-base leading-relaxed",
32532
32614
  rows: 1,
32533
- style: { minHeight: "24px", maxHeight: "120px" }
32615
+ style: { minHeight: "40px", maxHeight: "120px" }
32534
32616
  }
32535
32617
  ),
32536
- /* @__PURE__ */ jsx("div", { className: "absolute right-2 bottom-2 flex items-center gap-2", children: /* @__PURE__ */ jsx(
32618
+ /* @__PURE__ */ jsx("div", { className: "absolute right-2 sm:right-3 bottom-2 sm:bottom-2 flex items-center gap-2", children: /* @__PURE__ */ jsx(
32537
32619
  "button",
32538
32620
  {
32539
32621
  type: "submit",
32540
32622
  disabled: !inputValue.trim() || isCurrentThreadLoading,
32541
- className: "inline-flex items-center justify-center w-8 h-8 bg-gray-900 text-white rounded-full hover:bg-gray-800 transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed focus:outline-none focus:ring-2 focus:ring-gray-500/20",
32623
+ className: "inline-flex items-center justify-center w-8 h-8 sm:w-9 sm:h-9 bg-gray-900 text-white rounded-full hover:bg-gray-800 transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed focus:outline-none focus:ring-2 focus:ring-gray-500/20",
32542
32624
  children: /* @__PURE__ */ jsx(Send, { className: "w-4 h-4" })
32543
32625
  }
32544
32626
  ) })
32545
32627
  ] }) })
32546
32628
  }
32547
32629
  ),
32548
- /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center mt-2 text-xs text-gray-400", children: [
32549
- /* @__PURE__ */ jsx("span", { children: isCurrentThreadLoading ? "You can type your next message while Axel responds" : "Press Enter to send \u2022 Shift+Enter for new line" }),
32550
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 ml-4", children: [
32630
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col sm:flex-row items-center justify-center gap-2 sm:gap-4 mt-2 text-xs text-gray-400", children: [
32631
+ /* @__PURE__ */ jsx("span", { className: "text-center", children: isCurrentThreadLoading ? "You can type your next message while Axel responds" : "Press Enter to send \u2022 Shift+Enter for new line" }),
32632
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
32551
32633
  /* @__PURE__ */ jsx("div", { className: `w-1.5 h-1.5 rounded-full ${isCurrentThreadLoading ? "bg-orange-500" : "bg-green-500"}` }),
32552
32634
  /* @__PURE__ */ jsx("span", { children: isCurrentThreadLoading ? "Responding..." : "Connected" })
32553
32635
  ] })
32554
32636
  ] })
32555
32637
  ] }) }) })
32556
32638
  ] }),
32557
- /* @__PURE__ */ jsx("div", { className: `fixed right-0 top-0 z-20 h-screen transition-transform duration-300 ease-in-out ${isSidebarOpen ? "translate-x-0" : "translate-x-full"}`, children: /* @__PURE__ */ jsx("div", { className: "w-80 h-full bg-white border-l border-gray-200 shadow-lg", children: /* @__PURE__ */ jsx(
32639
+ /* @__PURE__ */ jsx("div", { className: `fixed right-0 top-0 z-20 h-screen transition-transform duration-300 ease-in-out ${isSidebarOpen ? "translate-x-0" : "translate-x-full"}`, children: /* @__PURE__ */ jsx("div", { className: "w-full sm:w-96 lg:w-80 h-full bg-white border-l border-gray-200 shadow-lg", children: /* @__PURE__ */ jsx(
32558
32640
  ThreadSidebar,
32559
32641
  {
32560
32642
  activeThreadId,
@@ -32936,8 +33018,8 @@ var HelpView = ({
32936
33018
  animate: { opacity: 1 },
32937
33019
  transition: { duration: 0.3 },
32938
33020
  children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
32939
- /* @__PURE__ */ jsx("div", { className: "bg-white px-8 py-6 shadow-sm border-b border-gray-200/80", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between relative", children: [
32940
- /* @__PURE__ */ jsx("div", { className: "absolute left-0", children: /* @__PURE__ */ jsx(
33021
+ /* @__PURE__ */ jsx("div", { className: "bg-white px-4 sm:px-6 md:px-8 py-4 sm:py-5 md:py-6 shadow-sm border-b border-gray-200/80", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3 sm:gap-4 relative", children: [
33022
+ /* @__PURE__ */ jsx("div", { className: "sm:absolute sm:left-0", children: /* @__PURE__ */ jsx(
32941
33023
  BackButtonMinimal,
32942
33024
  {
32943
33025
  onClick: handleBackClick,
@@ -32946,9 +33028,9 @@ var HelpView = ({
32946
33028
  "aria-label": "Navigate back to dashboard"
32947
33029
  }
32948
33030
  ) }),
32949
- /* @__PURE__ */ jsxs("div", { className: "flex-1 text-center mx-auto", children: [
32950
- /* @__PURE__ */ jsx("h1", { className: "text-3xl font-semibold text-gray-900", children: "Help & Support" }),
32951
- /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-gray-500", children: "Get immediate assistance from our engineering team. Submit a detailed support request below." })
33031
+ /* @__PURE__ */ jsxs("div", { className: "flex-1 text-center mx-auto mt-2 sm:mt-0", children: [
33032
+ /* @__PURE__ */ jsx("h1", { className: "text-lg sm:text-xl md:text-2xl lg:text-3xl font-semibold text-gray-900", children: "Help & Support" }),
33033
+ /* @__PURE__ */ jsx("p", { className: "mt-0.5 sm:mt-1 text-xs sm:text-sm text-gray-500 px-2 sm:px-0", children: "Get immediate assistance from our engineering team. Submit a detailed support request below." })
32952
33034
  ] })
32953
33035
  ] }) }),
32954
33036
  /* @__PURE__ */ jsxs("div", { className: "relative", children: [
@@ -33525,11 +33607,11 @@ var MetricCards = memo(({ lineInfo }) => {
33525
33607
  variants: containerVariants,
33526
33608
  initial: "initial",
33527
33609
  animate: "animate",
33528
- className: "grid grid-cols-1 md:grid-cols-3 gap-4 mb-2 md:h-[35vh] h-auto",
33610
+ className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 sm:gap-4 mb-2 md:h-[35vh] h-auto",
33529
33611
  children: [
33530
- /* @__PURE__ */ jsxs(motion.div, { variants: itemVariants, className: "bg-white rounded-xl shadow-sm p-4 overflow-hidden h-[280px] md:h-auto", children: [
33531
- /* @__PURE__ */ jsx("h2", { className: "text-base font-semibold text-gray-700 mb-2 text-center", children: "Line Output" }),
33532
- /* @__PURE__ */ jsx("div", { className: "h-[calc(100%-2.5rem)]", children: /* @__PURE__ */ jsx("div", { className: "w-full h-full", children: /* @__PURE__ */ jsx(
33612
+ /* @__PURE__ */ jsxs(motion.div, { variants: itemVariants, className: "bg-white rounded-xl shadow-sm p-3 sm:p-4 overflow-hidden h-[240px] sm:h-[280px] md:h-auto lg:col-span-1 sm:col-span-2 lg:col-span-1", children: [
33613
+ /* @__PURE__ */ jsx("h2", { className: "text-sm sm:text-base font-semibold text-gray-700 mb-2 text-center", children: "Line Output" }),
33614
+ /* @__PURE__ */ jsx("div", { className: "h-[calc(100%-2rem)] sm:h-[calc(100%-2.5rem)]", children: /* @__PURE__ */ jsx("div", { className: "w-full h-full", children: /* @__PURE__ */ jsx(
33533
33615
  OutputProgressChart,
33534
33616
  {
33535
33617
  currentOutput: lineInfo?.metrics.current_output || 0,
@@ -33537,19 +33619,19 @@ var MetricCards = memo(({ lineInfo }) => {
33537
33619
  }
33538
33620
  ) }) })
33539
33621
  ] }),
33540
- /* @__PURE__ */ jsxs(motion.div, { variants: itemVariants, className: "bg-white rounded-xl shadow-sm p-4 overflow-hidden h-[160px] md:h-auto", children: [
33541
- /* @__PURE__ */ jsx("h2", { className: "text-base font-semibold text-gray-700 text-center mb-2", children: "Underperforming Workspaces" }),
33542
- /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center h-[calc(100%-2.5rem)]", children: [
33543
- /* @__PURE__ */ jsx("span", { className: "text-6xl md:text-7xl font-bold text-red-600", children: lineInfo?.metrics.underperforming_workspaces }),
33544
- /* @__PURE__ */ jsxs("span", { className: "text-2xl md:text-3xl text-gray-500 ml-2", children: [
33622
+ /* @__PURE__ */ jsxs(motion.div, { variants: itemVariants, className: "bg-white rounded-xl shadow-sm p-3 sm:p-4 overflow-hidden h-[140px] sm:h-[160px] md:h-auto", children: [
33623
+ /* @__PURE__ */ jsx("h2", { className: "text-sm sm:text-base font-semibold text-gray-700 text-center mb-2", children: "Underperforming Workspaces" }),
33624
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center h-[calc(100%-2rem)] sm:h-[calc(100%-2.5rem)]", children: [
33625
+ /* @__PURE__ */ jsx("span", { className: "text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold text-red-600", children: lineInfo?.metrics.underperforming_workspaces }),
33626
+ /* @__PURE__ */ jsxs("span", { className: "text-xl sm:text-2xl md:text-2xl lg:text-3xl text-gray-500 ml-1 sm:ml-2", children: [
33545
33627
  "/ ",
33546
33628
  lineInfo?.metrics.total_workspaces
33547
33629
  ] })
33548
33630
  ] })
33549
33631
  ] }),
33550
- /* @__PURE__ */ jsxs(motion.div, { variants: itemVariants, className: "bg-white rounded-xl shadow-sm p-4 overflow-hidden h-[160px] md:h-auto", children: [
33551
- /* @__PURE__ */ jsx("h2", { className: "text-base font-semibold text-gray-700 text-center mb-2", children: "Average Efficiency" }),
33552
- /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-[calc(100%-2.5rem)]", children: /* @__PURE__ */ jsxs("span", { className: "text-6xl md:text-7xl font-bold text-gray-900", children: [
33632
+ /* @__PURE__ */ jsxs(motion.div, { variants: itemVariants, className: "bg-white rounded-xl shadow-sm p-3 sm:p-4 overflow-hidden h-[140px] sm:h-[160px] md:h-auto", children: [
33633
+ /* @__PURE__ */ jsx("h2", { className: "text-sm sm:text-base font-semibold text-gray-700 text-center mb-2", children: "Average Efficiency" }),
33634
+ /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-[calc(100%-2rem)] sm:h-[calc(100%-2.5rem)]", children: /* @__PURE__ */ jsxs("span", { className: `text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold ${(lineInfo?.metrics.avg_efficiency || 0) >= 90 ? "text-green-600" : (lineInfo?.metrics.avg_efficiency || 0) >= 70 ? "text-yellow-600" : "text-red-600"}`, children: [
33553
33635
  lineInfo?.metrics.avg_efficiency.toFixed(1),
33554
33636
  "%"
33555
33637
  ] }) })
@@ -33594,27 +33676,27 @@ var BottomSection = memo(({
33594
33676
  variants: containerVariants,
33595
33677
  initial: "initial",
33596
33678
  animate: "animate",
33597
- className: "grid grid-cols-1 md:grid-cols-5 gap-4 md:h-[calc(57vh-4rem)] h-auto md:mt-0 mt-4",
33679
+ className: "grid grid-cols-1 lg:grid-cols-5 gap-3 sm:gap-4 md:h-[calc(57vh-4rem)] h-auto md:mt-0 mt-4",
33598
33680
  children: [
33599
- /* @__PURE__ */ jsxs(motion.div, { variants: itemVariants, className: "md:col-span-2 bg-white rounded-xl shadow-sm p-4 flex flex-col overflow-hidden h-[400px] md:h-auto", children: [
33681
+ /* @__PURE__ */ jsxs(motion.div, { variants: itemVariants, className: "lg:col-span-2 bg-white rounded-xl shadow-sm p-3 sm:p-4 flex flex-col overflow-hidden h-[350px] sm:h-[400px] md:h-auto", children: [
33600
33682
  /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center mb-2", children: [
33601
- /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold text-gray-700 text-center flex-1", children: "Poorest Performing Workspaces" }),
33683
+ /* @__PURE__ */ jsx("h2", { className: "text-base sm:text-lg font-semibold text-gray-700 text-center flex-1", children: "Poorest Performing Workspaces" }),
33602
33684
  /* @__PURE__ */ jsx(
33603
33685
  "div",
33604
33686
  {
33605
33687
  className: "p-1.5 hover:bg-gray-100 rounded-lg transition-colors cursor-pointer",
33606
33688
  onClick: () => handleNavigate && handleNavigate(`/leaderboard`),
33607
- children: /* @__PURE__ */ jsx(ArrowRightIcon, { className: "w-5 h-5 text-gray-500" })
33689
+ children: /* @__PURE__ */ jsx(ArrowRightIcon, { className: "w-4 h-4 sm:w-5 sm:h-5 text-gray-500" })
33608
33690
  }
33609
33691
  )
33610
33692
  ] }),
33611
- /* @__PURE__ */ jsxs("div", { className: "divide-y overflow-auto flex-1 pr-2", children: [
33693
+ /* @__PURE__ */ jsxs("div", { className: "divide-y overflow-auto flex-1 pr-1 sm:pr-2", children: [
33612
33694
  /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between pb-2", children: [
33613
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 md:gap-6", children: [
33614
- /* @__PURE__ */ jsx("div", { className: "font-medium text-gray-500 min-w-[100px] md:min-w-[120px] text-sm md:text-base", children: "Workspace" }),
33695
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 sm:gap-3 md:gap-6", children: [
33696
+ /* @__PURE__ */ jsx("div", { className: "font-medium text-gray-500 min-w-[80px] sm:min-w-[100px] md:min-w-[120px] text-xs sm:text-sm md:text-base", children: "Workspace" }),
33615
33697
  /* @__PURE__ */ jsx("div", { className: "text-xs md:text-sm font-medium text-gray-500", children: "Current/Ideal" })
33616
33698
  ] }),
33617
- /* @__PURE__ */ jsx("div", { className: "text-xs md:text-sm font-medium text-gray-500 pr-2", children: "Efficiency" })
33699
+ /* @__PURE__ */ jsx("div", { className: "text-xs md:text-sm font-medium text-gray-500 pr-1 sm:pr-2", children: "Efficiency" })
33618
33700
  ] }),
33619
33701
  lineInfo.metrics.poorest_performing_workspaces && lineInfo.metrics.poorest_performing_workspaces.length > 0 ? lineInfo.metrics.poorest_performing_workspaces.map((ws, index) => {
33620
33702
  const wsMetrics = workspaceData.find((w) => w.workspace_name === ws.workspace_name);
@@ -33636,10 +33718,10 @@ var BottomSection = memo(({
33636
33718
  clickHandler();
33637
33719
  handleNavigate && handleNavigate(fullUrl);
33638
33720
  },
33639
- className: "block py-3 hover:bg-gray-50 transition-colors rounded-lg cursor-pointer",
33721
+ className: "block py-2 sm:py-3 hover:bg-gray-50 transition-colors rounded-lg cursor-pointer",
33640
33722
  children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
33641
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 md:gap-6", children: [
33642
- /* @__PURE__ */ jsx("div", { className: "min-w-[100px] md:min-w-[120px]", children: /* @__PURE__ */ jsx("div", { className: "font-medium text-gray-900 text-sm md:text-base", children: displayName }) }),
33723
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 sm:gap-3 md:gap-6", children: [
33724
+ /* @__PURE__ */ jsx("div", { className: "min-w-[80px] sm:min-w-[100px] md:min-w-[120px]", children: /* @__PURE__ */ jsx("div", { className: "font-medium text-gray-900 text-xs sm:text-sm md:text-base truncate", children: displayName }) }),
33643
33725
  /* @__PURE__ */ jsxs("div", { className: "text-xs md:text-sm font-medium text-gray-900", children: [
33644
33726
  ws.action_count || 0,
33645
33727
  " / ",
@@ -33670,10 +33752,10 @@ var BottomSection = memo(({
33670
33752
  clickHandler();
33671
33753
  handleNavigate && handleNavigate(fullUrl);
33672
33754
  },
33673
- className: "block py-3 hover:bg-gray-50 transition-colors rounded-lg cursor-pointer",
33755
+ className: "block py-2 sm:py-3 hover:bg-gray-50 transition-colors rounded-lg cursor-pointer",
33674
33756
  children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
33675
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 md:gap-6", children: [
33676
- /* @__PURE__ */ jsx("div", { className: "min-w-[100px] md:min-w-[120px]", children: /* @__PURE__ */ jsx("div", { className: "font-medium text-gray-900 text-sm md:text-base", children: displayName }) }),
33757
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 sm:gap-3 md:gap-6", children: [
33758
+ /* @__PURE__ */ jsx("div", { className: "min-w-[80px] sm:min-w-[100px] md:min-w-[120px]", children: /* @__PURE__ */ jsx("div", { className: "font-medium text-gray-900 text-xs sm:text-sm md:text-base truncate", children: displayName }) }),
33677
33759
  /* @__PURE__ */ jsxs("div", { className: "text-xs md:text-sm font-medium text-gray-900", children: [
33678
33760
  ws.action_count || 0,
33679
33761
  " / ",
@@ -33692,9 +33774,9 @@ var BottomSection = memo(({
33692
33774
  )
33693
33775
  ] })
33694
33776
  ] }),
33695
- /* @__PURE__ */ jsxs(motion.div, { variants: itemVariants, className: "md:col-span-3 bg-white rounded-xl shadow-sm p-4 flex flex-col overflow-hidden h-[400px] md:h-auto", children: [
33696
- /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold text-gray-700 mb-2 text-center", children: "Hourly Line Output" }),
33697
- /* @__PURE__ */ jsx("div", { className: "flex-1 min-h-[300px] md:min-h-[400px] pb-8 md:pb-16", children: lineInfo && /* @__PURE__ */ jsx(
33777
+ /* @__PURE__ */ jsxs(motion.div, { variants: itemVariants, className: "lg:col-span-3 bg-white rounded-xl shadow-sm p-3 sm:p-4 flex flex-col overflow-hidden h-[350px] sm:h-[400px] md:h-auto", children: [
33778
+ /* @__PURE__ */ jsx("h2", { className: "text-base sm:text-lg font-semibold text-gray-700 mb-2 text-center", children: "Hourly Line Output" }),
33779
+ /* @__PURE__ */ jsx("div", { className: "flex-1 min-h-[280px] sm:min-h-[300px] md:min-h-[400px] pb-6 sm:pb-8 md:pb-16", children: lineInfo && /* @__PURE__ */ jsx(
33698
33780
  HourlyOutputChart2,
33699
33781
  {
33700
33782
  data: hourlyOutputData,
@@ -34065,9 +34147,9 @@ var KPIDetailView = ({
34065
34147
  return /* @__PURE__ */ jsx(LoadingPage, { message: "Processing line data..." });
34066
34148
  }
34067
34149
  return /* @__PURE__ */ jsxs("div", { className: "min-h-screen bg-gray-50 flex flex-col", children: [
34068
- /* @__PURE__ */ jsx("header", { className: "sticky top-0 z-10 bg-white border-b flex-shrink-0", children: /* @__PURE__ */ jsxs("div", { className: "px-4 py-3", children: [
34150
+ /* @__PURE__ */ jsx("header", { className: "sticky top-0 z-10 bg-white border-b flex-shrink-0", children: /* @__PURE__ */ jsxs("div", { className: "px-3 sm:px-4 md:px-6 py-2 sm:py-3", children: [
34069
34151
  /* @__PURE__ */ jsxs("div", { className: "flex items-center relative", children: [
34070
- /* @__PURE__ */ jsx("div", { className: "absolute left-0", children: /* @__PURE__ */ jsx(
34152
+ /* @__PURE__ */ jsx("div", { className: "sm:absolute sm:left-0", children: /* @__PURE__ */ jsx(
34071
34153
  BackButtonMinimal,
34072
34154
  {
34073
34155
  onClick: handleBackClick,
@@ -34076,37 +34158,37 @@ var KPIDetailView = ({
34076
34158
  "aria-label": "Navigate back to previous page"
34077
34159
  }
34078
34160
  ) }),
34079
- /* @__PURE__ */ jsx("div", { className: "flex-1 flex justify-center", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
34080
- /* @__PURE__ */ jsx("h1", { className: "text-3xl font-semibold text-gray-900", children: lineInfo?.line_name || "Line" }),
34081
- /* @__PURE__ */ jsx("div", { className: "h-2 w-2 rounded-full bg-green-500 animate-pulse ring-2 ring-green-500/30 ring-offset-1" })
34161
+ /* @__PURE__ */ jsx("div", { className: "flex-1 flex justify-center mt-2 sm:mt-0", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 sm:gap-3", children: [
34162
+ /* @__PURE__ */ jsx("h1", { className: "text-lg sm:text-xl md:text-2xl lg:text-3xl font-semibold text-gray-900 text-center truncate", children: lineInfo?.line_name || "Line" }),
34163
+ /* @__PURE__ */ jsx("div", { className: "h-1.5 w-1.5 sm:h-2 sm:w-2 rounded-full bg-green-500 animate-pulse ring-1 sm:ring-2 ring-green-500/30 ring-offset-1 flex-shrink-0" })
34082
34164
  ] }) })
34083
34165
  ] }),
34084
- (activeTab !== "monthly_history" || urlDate || urlShift) && metrics2 && /* @__PURE__ */ jsx("div", { className: "mt-3 bg-blue-50 px-3 py-2 rounded-lg", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-4", children: [
34166
+ (activeTab !== "monthly_history" || urlDate || urlShift) && metrics2 && /* @__PURE__ */ jsx("div", { className: "mt-2 sm:mt-3 bg-blue-50 px-2 sm:px-3 py-1.5 sm:py-2 rounded-lg", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-center gap-2 sm:gap-3 md:gap-4", children: [
34085
34167
  !urlDate && !urlShift && /* @__PURE__ */ jsxs(Fragment, { children: [
34086
- /* @__PURE__ */ jsx("div", { className: "text-lg font-medium text-blue-600", children: /* @__PURE__ */ jsx(ISTTimer_default, {}) }),
34087
- /* @__PURE__ */ jsx("div", { className: "w-px h-4 bg-blue-300" })
34168
+ /* @__PURE__ */ jsx("div", { className: "text-sm sm:text-base md:text-lg font-medium text-blue-600", children: /* @__PURE__ */ jsx(ISTTimer_default, {}) }),
34169
+ /* @__PURE__ */ jsx("div", { className: "hidden sm:block w-px h-4 bg-blue-300" })
34088
34170
  ] }),
34089
- /* @__PURE__ */ jsx("span", { className: "text-base font-medium text-blue-600", children: metrics2 && formatLocalDate(new Date(metrics2.date)) }),
34090
- /* @__PURE__ */ jsx("div", { className: "w-px h-4 bg-blue-300" }),
34171
+ /* @__PURE__ */ jsx("span", { className: "text-xs sm:text-sm md:text-base font-medium text-blue-600", children: metrics2 && formatLocalDate(new Date(metrics2.date)) }),
34172
+ /* @__PURE__ */ jsx("div", { className: "hidden sm:block w-px h-4 bg-blue-300" }),
34091
34173
  urlDate && metrics2.date && /* @__PURE__ */ jsxs(Fragment, { children: [
34092
34174
  /* @__PURE__ */ jsx("span", { className: "px-2 py-1 text-xs font-medium bg-blue-200 text-blue-800 rounded-md", children: getDaysDifference2(metrics2.date) }),
34093
- /* @__PURE__ */ jsx("div", { className: "w-px h-4 bg-blue-300" })
34175
+ /* @__PURE__ */ jsx("div", { className: "hidden sm:block w-px h-4 bg-blue-300" })
34094
34176
  ] }),
34095
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
34177
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 sm:gap-2", children: [
34096
34178
  /* @__PURE__ */ jsx("div", { className: "text-blue-600", children: getShiftIcon(metrics2.shift_id ?? 0) }),
34097
- /* @__PURE__ */ jsxs("span", { className: "text-base font-medium text-blue-600", children: [
34179
+ /* @__PURE__ */ jsxs("span", { className: "text-xs sm:text-sm md:text-base font-medium text-blue-600", children: [
34098
34180
  getShiftName(metrics2.shift_id ?? 0),
34099
34181
  " Shift"
34100
34182
  ] })
34101
34183
  ] })
34102
34184
  ] }) }),
34103
- /* @__PURE__ */ jsxs("div", { className: "mt-2 flex items-center justify-between", children: [
34104
- !urlDate && !urlShift && /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
34185
+ /* @__PURE__ */ jsxs("div", { className: "mt-2 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-2 sm:gap-0", children: [
34186
+ !urlDate && !urlShift && /* @__PURE__ */ jsxs("div", { className: "flex gap-1 sm:gap-2 w-full sm:w-auto", children: [
34105
34187
  /* @__PURE__ */ jsx(
34106
34188
  "button",
34107
34189
  {
34108
34190
  onClick: handleOverviewClick,
34109
- className: `px-3 py-1.5 font-medium rounded-lg transition-colors whitespace-nowrap ${activeTab === "overview" ? "bg-blue-50 text-blue-600" : "text-gray-600 hover:bg-gray-50"}`,
34191
+ className: `flex-1 sm:flex-none px-2 sm:px-3 py-1.5 text-xs sm:text-sm font-medium rounded-lg transition-colors whitespace-nowrap ${activeTab === "overview" ? "bg-blue-50 text-blue-600" : "text-gray-600 hover:bg-gray-50"}`,
34110
34192
  children: "Efficiency Overview"
34111
34193
  }
34112
34194
  ),
@@ -34114,12 +34196,12 @@ var KPIDetailView = ({
34114
34196
  "button",
34115
34197
  {
34116
34198
  onClick: handleMonthlyHistoryClick,
34117
- className: `px-3 py-1.5 font-medium rounded-lg transition-colors whitespace-nowrap ${activeTab === "monthly_history" ? "bg-blue-50 text-blue-600" : "text-gray-600 hover:bg-gray-50"}`,
34199
+ className: `flex-1 sm:flex-none px-2 sm:px-3 py-1.5 text-xs sm:text-sm font-medium rounded-lg transition-colors whitespace-nowrap ${activeTab === "monthly_history" ? "bg-blue-50 text-blue-600" : "text-gray-600 hover:bg-gray-50"}`,
34118
34200
  children: "Monthly History"
34119
34201
  }
34120
34202
  )
34121
34203
  ] }),
34122
- /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-3 ml-auto", children: [
34204
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2 sm:space-x-3 w-full sm:w-auto justify-end sm:ml-auto", children: [
34123
34205
  lineInfo && activeTab === "overview" && /* @__PURE__ */ jsx(LinePdfGenerator, { lineInfo, workspaceData: workspaces || [] }),
34124
34206
  activeTab === "monthly_history" && /* @__PURE__ */ jsx(
34125
34207
  LineMonthlyPdfGenerator,
@@ -34284,11 +34366,11 @@ var LineCard = ({ line, onClick }) => {
34284
34366
  animate: { opacity: 1, y: 0 },
34285
34367
  transition: { duration: 0.3 },
34286
34368
  onClick,
34287
- className: "relative bg-white border border-gray-200/80 shadow-sm hover:shadow-lg \n rounded-xl p-6 transition-all duration-200 cursor-pointer \n hover:scale-[1.01] active:scale-[0.99] group",
34369
+ className: "relative bg-white border border-gray-200/80 shadow-sm hover:shadow-lg \n rounded-xl p-4 sm:p-5 md:p-6 transition-all duration-200 cursor-pointer \n hover:scale-[1.01] active:scale-[0.99] group",
34288
34370
  children: [
34289
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 mb-6", children: [
34290
- /* @__PURE__ */ jsx("h3", { className: "text-xl font-semibold text-gray-900", children: line.line_name }),
34291
- kpis && isOnTrack !== null && /* @__PURE__ */ jsxs("div", { className: `flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-medium ${isOnTrack ? "bg-emerald-100 text-emerald-700 border border-emerald-200" : "bg-red-100 text-red-700 border border-red-200"}`, children: [
34371
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-3 mb-4 sm:mb-5 md:mb-6", children: [
34372
+ /* @__PURE__ */ jsx("h3", { className: "text-lg sm:text-xl font-semibold text-gray-900 truncate", children: line.line_name }),
34373
+ kpis && isOnTrack !== null && /* @__PURE__ */ jsxs("div", { className: `flex items-center gap-1.5 px-2.5 sm:px-3 py-1 sm:py-1.5 rounded-full text-xs font-medium self-start sm:self-auto ${isOnTrack ? "bg-emerald-100 text-emerald-700 border border-emerald-200" : "bg-red-100 text-red-700 border border-red-200"}`, children: [
34292
34374
  /* @__PURE__ */ jsx("div", { className: `w-2 h-2 rounded-full ${isOnTrack ? "bg-emerald-500" : "bg-red-500"} animate-pulse` }),
34293
34375
  /* @__PURE__ */ jsx("span", { children: isOnTrack ? "On Track" : "Behind" })
34294
34376
  ] })
@@ -34308,15 +34390,15 @@ var LineCard = ({ line, onClick }) => {
34308
34390
  ] })
34309
34391
  ] }),
34310
34392
  error && !kpis && /* @__PURE__ */ jsx("div", { className: "text-center py-8", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500", children: "Unable to load metrics" }) }),
34311
- kpis && /* @__PURE__ */ jsxs("div", { className: "space-y-5", children: [
34393
+ kpis && /* @__PURE__ */ jsxs("div", { className: "space-y-4 sm:space-y-5", children: [
34312
34394
  /* @__PURE__ */ jsxs("div", { children: [
34313
- /* @__PURE__ */ jsx("div", { className: "text-xs font-medium text-gray-500 uppercase tracking-wider mb-2", children: "Efficiency" }),
34395
+ /* @__PURE__ */ jsx("div", { className: "text-xs font-medium text-gray-500 uppercase tracking-wider mb-1.5 sm:mb-2", children: "Efficiency" }),
34314
34396
  /* @__PURE__ */ jsxs("div", { className: "flex items-baseline justify-between", children: [
34315
- /* @__PURE__ */ jsxs("span", { className: "text-3xl font-semibold text-gray-900", children: [
34397
+ /* @__PURE__ */ jsxs("span", { className: "text-2xl sm:text-3xl font-semibold text-gray-900", children: [
34316
34398
  kpis.efficiency.value.toFixed(1),
34317
34399
  "%"
34318
34400
  ] }),
34319
- kpis.efficiency.change !== 0 && /* @__PURE__ */ jsxs("span", { className: `text-sm font-medium ${kpis.efficiency.change > 0 ? "text-emerald-600" : "text-red-600"}`, children: [
34401
+ kpis.efficiency.change !== 0 && /* @__PURE__ */ jsxs("span", { className: `text-xs sm:text-sm font-medium ${kpis.efficiency.change > 0 ? "text-emerald-600" : "text-red-600"}`, children: [
34320
34402
  kpis.efficiency.change > 0 ? "+" : "",
34321
34403
  kpis.efficiency.change.toFixed(1),
34322
34404
  "%"
@@ -34324,19 +34406,19 @@ var LineCard = ({ line, onClick }) => {
34324
34406
  ] })
34325
34407
  ] }),
34326
34408
  /* @__PURE__ */ jsxs("div", { children: [
34327
- /* @__PURE__ */ jsx("div", { className: "text-xs font-medium text-gray-500 uppercase tracking-wider mb-2", children: "Output Progress" }),
34328
- /* @__PURE__ */ jsxs("div", { className: "flex items-baseline justify-between mb-3", children: [
34329
- /* @__PURE__ */ jsx("span", { className: "text-2xl font-semibold text-gray-900", children: kpis.outputProgress.current }),
34330
- /* @__PURE__ */ jsxs("span", { className: "text-sm text-gray-500 font-medium", children: [
34409
+ /* @__PURE__ */ jsx("div", { className: "text-xs font-medium text-gray-500 uppercase tracking-wider mb-1.5 sm:mb-2", children: "Output Progress" }),
34410
+ /* @__PURE__ */ jsxs("div", { className: "flex items-baseline justify-between mb-2 sm:mb-3", children: [
34411
+ /* @__PURE__ */ jsx("span", { className: "text-xl sm:text-2xl font-semibold text-gray-900", children: kpis.outputProgress.current }),
34412
+ /* @__PURE__ */ jsxs("span", { className: "text-xs sm:text-sm text-gray-500 font-medium", children: [
34331
34413
  "/ ",
34332
34414
  kpis.outputProgress.target,
34333
34415
  " units"
34334
34416
  ] })
34335
34417
  ] }),
34336
- /* @__PURE__ */ jsx("div", { className: "w-full bg-gray-200 rounded-full h-2.5", children: /* @__PURE__ */ jsx(
34418
+ /* @__PURE__ */ jsx("div", { className: "w-full bg-gray-200 rounded-full h-2 sm:h-2.5", children: /* @__PURE__ */ jsx(
34337
34419
  "div",
34338
34420
  {
34339
- className: "bg-blue-600 h-2.5 rounded-full transition-all duration-500 ease-out",
34421
+ className: "bg-blue-600 h-2 sm:h-2.5 rounded-full transition-all duration-500 ease-out",
34340
34422
  style: {
34341
34423
  width: `${Math.min(
34342
34424
  kpis.outputProgress.current / kpis.outputProgress.target * 100,
@@ -34347,17 +34429,17 @@ var LineCard = ({ line, onClick }) => {
34347
34429
  ) })
34348
34430
  ] }),
34349
34431
  /* @__PURE__ */ jsxs("div", { children: [
34350
- /* @__PURE__ */ jsx("div", { className: "text-xs font-medium text-gray-500 uppercase tracking-wider mb-2", children: "Underperforming Workspaces" }),
34432
+ /* @__PURE__ */ jsx("div", { className: "text-xs font-medium text-gray-500 uppercase tracking-wider mb-1.5 sm:mb-2", children: "Underperforming Workspaces" }),
34351
34433
  /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-2", children: [
34352
- /* @__PURE__ */ jsx("span", { className: `text-2xl font-semibold ${kpis.underperformingWorkers.current === 0 ? "text-emerald-600" : kpis.underperformingWorkers.current <= 2 ? "text-yellow-600" : "text-red-600"}`, children: kpis.underperformingWorkers.current }),
34353
- /* @__PURE__ */ jsxs("span", { className: "text-sm text-gray-500 font-medium", children: [
34434
+ /* @__PURE__ */ jsx("span", { className: `text-xl sm:text-2xl font-semibold ${kpis.underperformingWorkers.current === 0 ? "text-emerald-600" : kpis.underperformingWorkers.current <= 2 ? "text-yellow-600" : "text-red-600"}`, children: kpis.underperformingWorkers.current }),
34435
+ /* @__PURE__ */ jsxs("span", { className: "text-xs sm:text-sm text-gray-500 font-medium", children: [
34354
34436
  "of ",
34355
34437
  kpis.underperformingWorkers.total
34356
34438
  ] })
34357
34439
  ] })
34358
34440
  ] })
34359
34441
  ] }),
34360
- /* @__PURE__ */ jsx("div", { className: "absolute bottom-4 right-4", children: /* @__PURE__ */ jsx("div", { className: "p-2.5 rounded-full bg-gray-50 group-hover:bg-blue-50 transition-colors shadow-sm", children: /* @__PURE__ */ jsx(ArrowRightIcon, { className: "w-5 h-5 text-gray-400 group-hover:text-blue-600 transition-colors" }) }) })
34442
+ /* @__PURE__ */ jsx("div", { className: "absolute bottom-3 right-3 sm:bottom-4 sm:right-4", children: /* @__PURE__ */ jsx("div", { className: "p-2 sm:p-2.5 rounded-full bg-gray-50 group-hover:bg-blue-50 transition-colors shadow-sm", children: /* @__PURE__ */ jsx(ArrowRightIcon, { className: "w-4 h-4 sm:w-5 sm:h-5 text-gray-400 group-hover:text-blue-600 transition-colors" }) }) })
34361
34443
  ]
34362
34444
  }
34363
34445
  );
@@ -34436,8 +34518,8 @@ var KPIsOverviewView = ({
34436
34518
  }
34437
34519
  if (error) {
34438
34520
  return /* @__PURE__ */ jsxs("div", { className: "min-h-screen bg-gray-50 flex flex-col", children: [
34439
- /* @__PURE__ */ jsx("header", { className: "sticky top-0 z-10 bg-white border-b flex-shrink-0", children: /* @__PURE__ */ jsx("div", { className: "px-4 py-3", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center relative", children: [
34440
- /* @__PURE__ */ jsx("div", { className: "absolute left-0", children: /* @__PURE__ */ jsx(
34521
+ /* @__PURE__ */ jsx("header", { className: "sticky top-0 z-10 bg-white border-b flex-shrink-0", children: /* @__PURE__ */ jsx("div", { className: "px-3 sm:px-4 md:px-6 py-2 sm:py-3", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center relative", children: [
34522
+ /* @__PURE__ */ jsx("div", { className: "sm:absolute sm:left-0", children: /* @__PURE__ */ jsx(
34441
34523
  BackButtonMinimal,
34442
34524
  {
34443
34525
  onClick: handleBackClick,
@@ -34446,9 +34528,9 @@ var KPIsOverviewView = ({
34446
34528
  "aria-label": "Navigate back to previous page"
34447
34529
  }
34448
34530
  ) }),
34449
- /* @__PURE__ */ jsx("div", { className: "flex-1 flex justify-center", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
34450
- /* @__PURE__ */ jsx("h1", { className: "text-3xl font-semibold text-gray-900", children: "Shop-floor overview" }),
34451
- /* @__PURE__ */ jsx("div", { className: "h-2 w-2 rounded-full bg-green-500 animate-pulse ring-2 ring-green-500/30 ring-offset-1" })
34531
+ /* @__PURE__ */ jsx("div", { className: "flex-1 flex justify-center mt-2 sm:mt-0", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 sm:gap-3", children: [
34532
+ /* @__PURE__ */ jsx("h1", { className: "text-lg sm:text-xl md:text-2xl lg:text-3xl font-semibold text-gray-900 text-center", children: "Shop-floor overview" }),
34533
+ /* @__PURE__ */ jsx("div", { className: "h-1.5 w-1.5 sm:h-2 sm:w-2 rounded-full bg-green-500 animate-pulse ring-1 sm:ring-2 ring-green-500/30 ring-offset-1 flex-shrink-0" })
34452
34534
  ] }) })
34453
34535
  ] }) }) }),
34454
34536
  /* @__PURE__ */ jsx("div", { className: "flex-1 flex items-center justify-center", children: /* @__PURE__ */ jsx("div", { className: "text-center", children: /* @__PURE__ */ jsx("p", { className: "text-gray-500", children: error }) }) })
@@ -34456,8 +34538,8 @@ var KPIsOverviewView = ({
34456
34538
  }
34457
34539
  if (lines.length === 0) {
34458
34540
  return /* @__PURE__ */ jsxs("div", { className: "min-h-screen bg-gray-50 flex flex-col", children: [
34459
- /* @__PURE__ */ jsx("header", { className: "sticky top-0 z-10 bg-white border-b flex-shrink-0", children: /* @__PURE__ */ jsx("div", { className: "px-4 py-3", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center relative", children: [
34460
- /* @__PURE__ */ jsx("div", { className: "absolute left-0", children: /* @__PURE__ */ jsx(
34541
+ /* @__PURE__ */ jsx("header", { className: "sticky top-0 z-10 bg-white border-b flex-shrink-0", children: /* @__PURE__ */ jsx("div", { className: "px-3 sm:px-4 md:px-6 py-2 sm:py-3", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center relative", children: [
34542
+ /* @__PURE__ */ jsx("div", { className: "sm:absolute sm:left-0", children: /* @__PURE__ */ jsx(
34461
34543
  BackButtonMinimal,
34462
34544
  {
34463
34545
  onClick: handleBackClick,
@@ -34466,9 +34548,9 @@ var KPIsOverviewView = ({
34466
34548
  "aria-label": "Navigate back to previous page"
34467
34549
  }
34468
34550
  ) }),
34469
- /* @__PURE__ */ jsx("div", { className: "flex-1 flex justify-center", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
34470
- /* @__PURE__ */ jsx("h1", { className: "text-3xl font-semibold text-gray-900", children: "Shop-floor overview" }),
34471
- /* @__PURE__ */ jsx("div", { className: "h-2 w-2 rounded-full bg-green-500 animate-pulse ring-2 ring-green-500/30 ring-offset-1" })
34551
+ /* @__PURE__ */ jsx("div", { className: "flex-1 flex justify-center mt-2 sm:mt-0", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 sm:gap-3", children: [
34552
+ /* @__PURE__ */ jsx("h1", { className: "text-lg sm:text-xl md:text-2xl lg:text-3xl font-semibold text-gray-900 text-center", children: "Shop-floor overview" }),
34553
+ /* @__PURE__ */ jsx("div", { className: "h-1.5 w-1.5 sm:h-2 sm:w-2 rounded-full bg-green-500 animate-pulse ring-1 sm:ring-2 ring-green-500/30 ring-offset-1 flex-shrink-0" })
34472
34554
  ] }) })
34473
34555
  ] }) }) }),
34474
34556
  /* @__PURE__ */ jsx("div", { className: "flex-1 flex items-center justify-center", children: /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
@@ -34478,9 +34560,9 @@ var KPIsOverviewView = ({
34478
34560
  ] });
34479
34561
  }
34480
34562
  return /* @__PURE__ */ jsxs("div", { className: "min-h-screen bg-gray-50 flex flex-col", children: [
34481
- /* @__PURE__ */ jsx("header", { className: "sticky top-0 z-10 bg-white border-b flex-shrink-0", children: /* @__PURE__ */ jsxs("div", { className: "px-4 py-3", children: [
34563
+ /* @__PURE__ */ jsx("header", { className: "sticky top-0 z-10 bg-white border-b flex-shrink-0", children: /* @__PURE__ */ jsxs("div", { className: "px-3 sm:px-4 md:px-6 py-2 sm:py-3", children: [
34482
34564
  /* @__PURE__ */ jsxs("div", { className: "flex items-center relative", children: [
34483
- /* @__PURE__ */ jsx("div", { className: "absolute left-0", children: /* @__PURE__ */ jsx(
34565
+ /* @__PURE__ */ jsx("div", { className: "sm:absolute sm:left-0", children: /* @__PURE__ */ jsx(
34484
34566
  BackButtonMinimal,
34485
34567
  {
34486
34568
  onClick: handleBackClick,
@@ -34489,27 +34571,27 @@ var KPIsOverviewView = ({
34489
34571
  "aria-label": "Navigate back to previous page"
34490
34572
  }
34491
34573
  ) }),
34492
- /* @__PURE__ */ jsx("div", { className: "flex-1 flex justify-center", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
34493
- /* @__PURE__ */ jsx("h1", { className: "text-3xl font-semibold text-gray-900", children: "Shop-floor overview" }),
34494
- /* @__PURE__ */ jsx("div", { className: "h-2 w-2 rounded-full bg-green-500 animate-pulse ring-2 ring-green-500/30 ring-offset-1" })
34574
+ /* @__PURE__ */ jsx("div", { className: "flex-1 flex justify-center mt-2 sm:mt-0", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 sm:gap-3", children: [
34575
+ /* @__PURE__ */ jsx("h1", { className: "text-lg sm:text-xl md:text-2xl lg:text-3xl font-semibold text-gray-900 text-center", children: "Shop-floor overview" }),
34576
+ /* @__PURE__ */ jsx("div", { className: "h-1.5 w-1.5 sm:h-2 sm:w-2 rounded-full bg-green-500 animate-pulse ring-1 sm:ring-2 ring-green-500/30 ring-offset-1 flex-shrink-0" })
34495
34577
  ] }) })
34496
34578
  ] }),
34497
- /* @__PURE__ */ jsx("div", { className: "mt-3 bg-blue-50 px-3 py-2 rounded-lg", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-4", children: [
34498
- /* @__PURE__ */ jsx("div", { className: "text-lg font-medium text-blue-600", children: /* @__PURE__ */ jsx(ISTTimer_default, {}) }),
34499
- /* @__PURE__ */ jsx("div", { className: "w-px h-4 bg-blue-300" }),
34500
- /* @__PURE__ */ jsx("span", { className: "text-base font-medium text-blue-600", children: formatLocalDate2(/* @__PURE__ */ new Date()) }),
34501
- /* @__PURE__ */ jsx("div", { className: "w-px h-4 bg-blue-300" }),
34502
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
34579
+ /* @__PURE__ */ jsx("div", { className: "mt-2 sm:mt-3 bg-blue-50 px-2 sm:px-3 py-1.5 sm:py-2 rounded-lg", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-center gap-2 sm:gap-3 md:gap-4", children: [
34580
+ /* @__PURE__ */ jsx("div", { className: "text-sm sm:text-base md:text-lg font-medium text-blue-600", children: /* @__PURE__ */ jsx(ISTTimer_default, {}) }),
34581
+ /* @__PURE__ */ jsx("div", { className: "hidden sm:block w-px h-4 bg-blue-300" }),
34582
+ /* @__PURE__ */ jsx("span", { className: "text-xs sm:text-sm md:text-base font-medium text-blue-600", children: formatLocalDate2(/* @__PURE__ */ new Date()) }),
34583
+ /* @__PURE__ */ jsx("div", { className: "hidden sm:block w-px h-4 bg-blue-300" }),
34584
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 sm:gap-2", children: [
34503
34585
  /* @__PURE__ */ jsx("div", { className: "text-blue-600", children: getShiftIcon(currentShiftDetails.shiftId) }),
34504
- /* @__PURE__ */ jsxs("span", { className: "text-base font-medium text-blue-600", children: [
34586
+ /* @__PURE__ */ jsxs("span", { className: "text-xs sm:text-sm md:text-base font-medium text-blue-600", children: [
34505
34587
  shiftName,
34506
34588
  " Shift"
34507
34589
  ] })
34508
34590
  ] })
34509
34591
  ] }) }),
34510
- /* @__PURE__ */ jsx("p", { className: "text-gray-600 text-center mt-3", children: "Click on any line to view detailed performance metrics" })
34592
+ /* @__PURE__ */ jsx("p", { className: "text-xs sm:text-sm text-gray-600 text-center mt-2 sm:mt-3 px-2 sm:px-0", children: "Click on any line to view detailed performance metrics" })
34511
34593
  ] }) }),
34512
- /* @__PURE__ */ jsx("main", { className: "flex-1 p-6 overflow-y-auto", children: /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6", children: lines.map((line) => /* @__PURE__ */ jsx(
34594
+ /* @__PURE__ */ jsx("main", { className: "flex-1 p-3 sm:p-4 md:p-6 overflow-y-auto", children: /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3 sm:gap-4 md:gap-6", children: lines.map((line) => /* @__PURE__ */ jsx(
34513
34595
  LineCard,
34514
34596
  {
34515
34597
  line,
@@ -34529,14 +34611,14 @@ var HeaderRibbon = memo(({
34529
34611
  shiftId,
34530
34612
  getShiftIcon,
34531
34613
  getShiftName
34532
- }) => /* @__PURE__ */ jsx("div", { className: "mt-3 bg-blue-50 px-3 py-2 rounded-lg", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-4", children: [
34533
- /* @__PURE__ */ jsx("div", { className: "text-lg font-medium text-blue-600", children: /* @__PURE__ */ jsx(IsolatedTimer, {}) }),
34534
- /* @__PURE__ */ jsx("div", { className: "w-px h-4 bg-blue-300" }),
34535
- /* @__PURE__ */ jsx("span", { className: "text-base font-medium text-blue-600", children: currentDate }),
34536
- /* @__PURE__ */ jsx("div", { className: "w-px h-4 bg-blue-300" }),
34537
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
34614
+ }) => /* @__PURE__ */ jsx("div", { className: "mt-2 sm:mt-3 bg-blue-50 px-2 sm:px-3 py-1.5 sm:py-2 rounded-lg", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-center gap-2 sm:gap-4", children: [
34615
+ /* @__PURE__ */ jsx("div", { className: "text-sm sm:text-base md:text-lg font-medium text-blue-600", children: /* @__PURE__ */ jsx(IsolatedTimer, {}) }),
34616
+ /* @__PURE__ */ jsx("div", { className: "hidden sm:block w-px h-4 bg-blue-300" }),
34617
+ /* @__PURE__ */ jsx("span", { className: "text-xs sm:text-sm md:text-base font-medium text-blue-600", children: currentDate }),
34618
+ /* @__PURE__ */ jsx("div", { className: "hidden sm:block w-px h-4 bg-blue-300" }),
34619
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 sm:gap-2", children: [
34538
34620
  /* @__PURE__ */ jsx("div", { className: "text-blue-600", children: getShiftIcon(shiftId) }),
34539
- /* @__PURE__ */ jsxs("span", { className: "text-base font-medium text-blue-600", children: [
34621
+ /* @__PURE__ */ jsxs("span", { className: "text-xs sm:text-sm md:text-base font-medium text-blue-600", children: [
34540
34622
  getShiftName(shiftId),
34541
34623
  " Shift"
34542
34624
  ] })
@@ -34770,9 +34852,50 @@ var LeaderboardDetailView = memo(({
34770
34852
  ] }) });
34771
34853
  }
34772
34854
  return /* @__PURE__ */ jsxs("div", { className: `min-h-screen bg-slate-50 flex flex-col ${className}`, children: [
34773
- /* @__PURE__ */ jsx("div", { className: "sticky top-0 z-20 bg-white shadow-sm border-b border-gray-200/80", children: /* @__PURE__ */ jsxs("div", { className: "px-3 sm:px-8 py-2 sm:py-2.5", children: [
34774
- /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
34775
- /* @__PURE__ */ jsx("div", { className: "w-auto sm:w-32", children: /* @__PURE__ */ jsx(
34855
+ /* @__PURE__ */ jsx("div", { className: "sticky top-0 z-20 bg-white shadow-sm border-b border-gray-200/80", children: /* @__PURE__ */ jsxs("div", { className: "px-3 sm:px-6 md:px-8 py-2 sm:py-2.5", children: [
34856
+ /* @__PURE__ */ jsxs("div", { className: "sm:hidden", children: [
34857
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-2", children: [
34858
+ /* @__PURE__ */ jsx(
34859
+ BackButtonMinimal,
34860
+ {
34861
+ onClick: handleBackClick,
34862
+ text: "Back",
34863
+ size: "sm",
34864
+ "aria-label": "Navigate back to previous page"
34865
+ }
34866
+ ),
34867
+ /* @__PURE__ */ jsxs(
34868
+ "button",
34869
+ {
34870
+ onClick: handleSortToggle,
34871
+ className: "flex items-center gap-1 px-2.5 py-1.5 bg-white rounded-lg border border-gray-200 shadow-sm hover:bg-gray-50 text-xs transition-colors",
34872
+ children: [
34873
+ /* @__PURE__ */ jsx("span", { children: "Sort" }),
34874
+ /* @__PURE__ */ jsx(
34875
+ "svg",
34876
+ {
34877
+ className: "w-3.5 h-3.5 text-gray-600",
34878
+ xmlns: "http://www.w3.org/2000/svg",
34879
+ viewBox: "0 0 24 24",
34880
+ fill: "none",
34881
+ stroke: "currentColor",
34882
+ strokeWidth: "2",
34883
+ strokeLinecap: "round",
34884
+ strokeLinejoin: "round",
34885
+ children: sortAscending ? /* @__PURE__ */ jsx("path", { d: "M5 15l7-7 7 7" }) : /* @__PURE__ */ jsx("path", { d: "M19 9l-7 7-7-7" })
34886
+ }
34887
+ )
34888
+ ]
34889
+ }
34890
+ )
34891
+ ] }),
34892
+ /* @__PURE__ */ jsx("div", { className: "text-center", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-2", children: [
34893
+ /* @__PURE__ */ jsx("h1", { className: "text-base font-semibold text-gray-900", children: "Leaderboard" }),
34894
+ /* @__PURE__ */ jsx("div", { className: "h-1 w-1 rounded-full bg-green-500 animate-pulse ring-1 ring-green-500/30 ring-offset-1" })
34895
+ ] }) })
34896
+ ] }),
34897
+ /* @__PURE__ */ jsxs("div", { className: "hidden sm:flex items-center justify-between", children: [
34898
+ /* @__PURE__ */ jsx("div", { className: "w-32", children: /* @__PURE__ */ jsx(
34776
34899
  BackButtonMinimal,
34777
34900
  {
34778
34901
  onClick: handleBackClick,
@@ -34781,17 +34904,17 @@ var LeaderboardDetailView = memo(({
34781
34904
  "aria-label": "Navigate back to previous page"
34782
34905
  }
34783
34906
  ) }),
34784
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 sm:gap-3", children: [
34785
- /* @__PURE__ */ jsx("h1", { className: "text-3xl font-semibold text-gray-900", children: "Leaderboard" }),
34786
- /* @__PURE__ */ jsx("div", { className: "h-1.5 w-1.5 sm:h-2 sm:w-2 rounded-full bg-green-500 animate-pulse ring-1 sm:ring-2 ring-green-500/30 ring-offset-1" })
34907
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
34908
+ /* @__PURE__ */ jsx("h1", { className: "text-xl md:text-2xl lg:text-3xl font-semibold text-gray-900", children: "Leaderboard" }),
34909
+ /* @__PURE__ */ jsx("div", { className: "h-2 w-2 rounded-full bg-green-500 animate-pulse ring-2 ring-green-500/30 ring-offset-1" })
34787
34910
  ] }),
34788
- /* @__PURE__ */ jsx("div", { className: "w-auto sm:w-32 flex justify-end", children: /* @__PURE__ */ jsxs(
34911
+ /* @__PURE__ */ jsx("div", { className: "w-32 flex justify-end", children: /* @__PURE__ */ jsxs(
34789
34912
  "button",
34790
34913
  {
34791
34914
  onClick: handleSortToggle,
34792
- className: "flex items-center gap-1 sm:gap-2 px-2 sm:px-4 py-1.5 sm:py-2 bg-white rounded-lg border border-gray-200 shadow-sm hover:bg-gray-50 text-xs sm:text-sm transition-colors",
34915
+ className: "flex items-center gap-2 px-4 py-2 bg-white rounded-lg border border-gray-200 shadow-sm hover:bg-gray-50 text-sm transition-colors",
34793
34916
  children: [
34794
- /* @__PURE__ */ jsx("span", { className: "hidden sm:inline", children: "Sort by Efficiency" }),
34917
+ /* @__PURE__ */ jsx("span", { children: "Sort by Efficiency" }),
34795
34918
  /* @__PURE__ */ jsx(
34796
34919
  "svg",
34797
34920
  {
@@ -35300,48 +35423,113 @@ var BreakRow = memo(({
35300
35423
  onRemove,
35301
35424
  index
35302
35425
  }) => {
35303
- return /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-12 gap-2 sm:gap-4 items-center w-full bg-white hover:bg-gray-50 rounded-md transition-all duration-200 p-2", children: [
35304
- /* @__PURE__ */ jsx("div", { className: "col-span-3", children: /* @__PURE__ */ jsx(
35305
- TimePickerDropdown,
35306
- {
35307
- value: breakItem.startTime,
35308
- onChange: (value) => onUpdate(index, "startTime", value),
35309
- placeholder: "Start time",
35310
- className: "w-full"
35311
- }
35312
- ) }),
35313
- /* @__PURE__ */ jsx("div", { className: "col-span-3", children: /* @__PURE__ */ jsx(
35314
- TimePickerDropdown,
35315
- {
35316
- value: breakItem.endTime,
35317
- onChange: (value) => onUpdate(index, "endTime", value),
35318
- placeholder: "End time",
35319
- className: "w-full"
35320
- }
35321
- ) }),
35322
- /* @__PURE__ */ jsx("div", { className: "col-span-2", children: /* @__PURE__ */ jsxs("span", { className: "text-sm font-medium text-gray-700", children: [
35323
- breakItem.duration,
35324
- " min"
35325
- ] }) }),
35326
- /* @__PURE__ */ jsx("div", { className: "col-span-3", children: /* @__PURE__ */ jsx(
35327
- "input",
35328
- {
35329
- type: "text",
35330
- value: breakItem.remarks || "",
35331
- onChange: (e) => onUpdate(index, "remarks", e.target.value),
35332
- placeholder: "Break remarks",
35333
- className: "w-full px-2 sm:px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
35334
- }
35335
- ) }),
35336
- /* @__PURE__ */ jsx("div", { className: "col-span-1 flex justify-center", children: /* @__PURE__ */ jsx(
35337
- "button",
35338
- {
35339
- onClick: () => onRemove(index),
35340
- className: "text-gray-400 hover:text-red-500 focus:outline-none transition-colors",
35341
- "aria-label": "Remove break",
35342
- children: /* @__PURE__ */ jsx(X, { className: "w-4 h-4" })
35343
- }
35344
- ) })
35426
+ return /* @__PURE__ */ jsxs(Fragment, { children: [
35427
+ /* @__PURE__ */ jsxs("div", { className: "hidden sm:grid grid-cols-12 gap-2 md:gap-4 items-center w-full bg-white hover:bg-gray-50 rounded-md transition-all duration-200 p-2", children: [
35428
+ /* @__PURE__ */ jsx("div", { className: "col-span-3", children: /* @__PURE__ */ jsx(
35429
+ TimePickerDropdown,
35430
+ {
35431
+ value: breakItem.startTime,
35432
+ onChange: (value) => onUpdate(index, "startTime", value),
35433
+ placeholder: "Start time",
35434
+ className: "w-full"
35435
+ }
35436
+ ) }),
35437
+ /* @__PURE__ */ jsx("div", { className: "col-span-3", children: /* @__PURE__ */ jsx(
35438
+ TimePickerDropdown,
35439
+ {
35440
+ value: breakItem.endTime,
35441
+ onChange: (value) => onUpdate(index, "endTime", value),
35442
+ placeholder: "End time",
35443
+ className: "w-full"
35444
+ }
35445
+ ) }),
35446
+ /* @__PURE__ */ jsx("div", { className: "col-span-2", children: /* @__PURE__ */ jsxs("span", { className: "text-sm font-medium text-gray-700", children: [
35447
+ breakItem.duration,
35448
+ " min"
35449
+ ] }) }),
35450
+ /* @__PURE__ */ jsx("div", { className: "col-span-3", children: /* @__PURE__ */ jsx(
35451
+ "input",
35452
+ {
35453
+ type: "text",
35454
+ value: breakItem.remarks || "",
35455
+ onChange: (e) => onUpdate(index, "remarks", e.target.value),
35456
+ placeholder: "Break remarks",
35457
+ className: "w-full px-2 sm:px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
35458
+ }
35459
+ ) }),
35460
+ /* @__PURE__ */ jsx("div", { className: "col-span-1 flex justify-center", children: /* @__PURE__ */ jsx(
35461
+ "button",
35462
+ {
35463
+ onClick: () => onRemove(index),
35464
+ className: "text-gray-400 hover:text-red-500 focus:outline-none transition-colors",
35465
+ "aria-label": "Remove break",
35466
+ children: /* @__PURE__ */ jsx(X, { className: "w-4 h-4" })
35467
+ }
35468
+ ) })
35469
+ ] }),
35470
+ /* @__PURE__ */ jsxs("div", { className: "sm:hidden bg-white border border-gray-200 rounded-lg p-3 mb-3 space-y-3", children: [
35471
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-2", children: [
35472
+ /* @__PURE__ */ jsxs("h5", { className: "text-sm font-medium text-gray-700", children: [
35473
+ "Break ",
35474
+ index + 1
35475
+ ] }),
35476
+ /* @__PURE__ */ jsx(
35477
+ "button",
35478
+ {
35479
+ onClick: () => onRemove(index),
35480
+ className: "text-gray-400 hover:text-red-500 focus:outline-none transition-colors p-1",
35481
+ "aria-label": "Remove break",
35482
+ children: /* @__PURE__ */ jsx(X, { className: "w-4 h-4" })
35483
+ }
35484
+ )
35485
+ ] }),
35486
+ /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-3", children: [
35487
+ /* @__PURE__ */ jsxs("div", { children: [
35488
+ /* @__PURE__ */ jsx("label", { className: "block text-xs font-medium text-gray-600 mb-1", children: "Start Time" }),
35489
+ /* @__PURE__ */ jsx(
35490
+ TimePickerDropdown,
35491
+ {
35492
+ value: breakItem.startTime,
35493
+ onChange: (value) => onUpdate(index, "startTime", value),
35494
+ placeholder: "Start time",
35495
+ className: "w-full"
35496
+ }
35497
+ )
35498
+ ] }),
35499
+ /* @__PURE__ */ jsxs("div", { children: [
35500
+ /* @__PURE__ */ jsx("label", { className: "block text-xs font-medium text-gray-600 mb-1", children: "End Time" }),
35501
+ /* @__PURE__ */ jsx(
35502
+ TimePickerDropdown,
35503
+ {
35504
+ value: breakItem.endTime,
35505
+ onChange: (value) => onUpdate(index, "endTime", value),
35506
+ placeholder: "End time",
35507
+ className: "w-full"
35508
+ }
35509
+ )
35510
+ ] })
35511
+ ] }),
35512
+ /* @__PURE__ */ jsxs("div", { children: [
35513
+ /* @__PURE__ */ jsx("label", { className: "block text-xs font-medium text-gray-600 mb-1", children: "Duration" }),
35514
+ /* @__PURE__ */ jsxs("div", { className: "text-sm text-gray-700 font-medium px-3 py-2 bg-gray-100 rounded-md text-center", children: [
35515
+ breakItem.duration,
35516
+ " minutes"
35517
+ ] })
35518
+ ] }),
35519
+ /* @__PURE__ */ jsxs("div", { children: [
35520
+ /* @__PURE__ */ jsx("label", { className: "block text-xs font-medium text-gray-600 mb-1", children: "Remarks (Optional)" }),
35521
+ /* @__PURE__ */ jsx(
35522
+ "input",
35523
+ {
35524
+ type: "text",
35525
+ value: breakItem.remarks || "",
35526
+ onChange: (e) => onUpdate(index, "remarks", e.target.value),
35527
+ placeholder: "Add optional remarks...",
35528
+ className: "w-full px-3 py-2 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
35529
+ }
35530
+ )
35531
+ ] })
35532
+ ] })
35345
35533
  ] });
35346
35534
  });
35347
35535
  BreakRow.displayName = "BreakRow";
@@ -35374,35 +35562,35 @@ var ShiftPanel = memo(({
35374
35562
  console.error("Error saving panel state to localStorage:", error);
35375
35563
  }
35376
35564
  };
35377
- return /* @__PURE__ */ jsxs("div", { className: "bg-white rounded-lg shadow-sm mb-6 transition-all duration-300 w-full border border-gray-200", children: [
35565
+ return /* @__PURE__ */ jsxs("div", { className: "bg-white rounded-lg shadow-sm mb-4 sm:mb-6 transition-all duration-300 w-full border border-gray-200", children: [
35378
35566
  /* @__PURE__ */ jsx(
35379
35567
  "div",
35380
35568
  {
35381
- className: "p-4 w-full cursor-pointer hover:bg-gray-50/50 transition-all duration-200",
35569
+ className: "p-3 sm:p-4 w-full cursor-pointer hover:bg-gray-50/50 transition-all duration-200",
35382
35570
  onClick: toggleMinimize,
35383
- children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between w-full", children: [
35571
+ children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col sm:flex-row sm:items-center justify-between w-full gap-2 sm:gap-0", children: [
35384
35572
  /* @__PURE__ */ jsxs(
35385
35573
  "button",
35386
35574
  {
35387
35575
  onClick: toggleMinimize,
35388
- className: "flex items-center gap-3 text-lg font-medium transition-colors duration-200 \n focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 rounded-lg \n hover:bg-blue-50 px-3 py-2 group",
35576
+ className: "flex items-center gap-2 sm:gap-3 text-base sm:text-lg font-medium transition-colors duration-200 \n focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 rounded-lg \n hover:bg-blue-50 px-2 sm:px-3 py-1.5 sm:py-2 group w-full sm:w-auto justify-start",
35389
35577
  "aria-expanded": !isMinimized,
35390
35578
  "aria-controls": panelId,
35391
35579
  children: [
35392
35580
  /* @__PURE__ */ jsx(
35393
35581
  ChevronDown,
35394
35582
  {
35395
- className: `w-5 h-5 text-blue-500 transform transition-transform duration-200 ${isMinimized ? "" : "rotate-180"}`
35583
+ className: `w-4 h-4 sm:w-5 sm:h-5 text-blue-500 transform transition-transform duration-200 ${isMinimized ? "" : "rotate-180"}`
35396
35584
  }
35397
35585
  ),
35398
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
35399
- icon,
35400
- /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold text-gray-900 group-hover:text-blue-600", children: title })
35586
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 sm:gap-2", children: [
35587
+ /* @__PURE__ */ jsx("div", { className: "w-4 h-4 sm:w-5 sm:h-5", children: icon }),
35588
+ /* @__PURE__ */ jsx("h3", { className: "text-base sm:text-lg font-semibold text-gray-900 group-hover:text-blue-600", children: title })
35401
35589
  ] })
35402
35590
  ]
35403
35591
  }
35404
35592
  ),
35405
- /* @__PURE__ */ jsxs("span", { className: "text-sm font-medium text-gray-600 mr-2", children: [
35593
+ /* @__PURE__ */ jsxs("span", { className: "text-xs sm:text-sm font-medium text-gray-600 text-center sm:text-right sm:mr-2", children: [
35406
35594
  "Total Shift Hours: ",
35407
35595
  shiftHours,
35408
35596
  " hours"
@@ -35410,10 +35598,10 @@ var ShiftPanel = memo(({
35410
35598
  ] })
35411
35599
  }
35412
35600
  ),
35413
- !isMinimized && /* @__PURE__ */ jsxs("div", { id: panelId, className: "p-4 sm:p-6 border-t border-gray-200 w-full bg-white", children: [
35414
- /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6 mb-6 w-full", children: [
35601
+ !isMinimized && /* @__PURE__ */ jsxs("div", { id: panelId, className: "p-3 sm:p-4 md:p-6 border-t border-gray-200 w-full bg-white", children: [
35602
+ /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4 md:gap-6 mb-4 sm:mb-6 w-full", children: [
35415
35603
  /* @__PURE__ */ jsxs("div", { className: "w-full", children: [
35416
- /* @__PURE__ */ jsx("label", { className: "block text-sm font-medium text-gray-700 mb-1", children: "Shift Start Time" }),
35604
+ /* @__PURE__ */ jsx("label", { className: "block text-xs sm:text-sm font-medium text-gray-700 mb-1", children: "Shift Start Time" }),
35417
35605
  /* @__PURE__ */ jsx(
35418
35606
  TimePickerDropdown,
35419
35607
  {
@@ -35425,7 +35613,7 @@ var ShiftPanel = memo(({
35425
35613
  )
35426
35614
  ] }),
35427
35615
  /* @__PURE__ */ jsxs("div", { className: "w-full", children: [
35428
- /* @__PURE__ */ jsx("label", { className: "block text-sm font-medium text-gray-700 mb-1", children: "Shift End Time" }),
35616
+ /* @__PURE__ */ jsx("label", { className: "block text-xs sm:text-sm font-medium text-gray-700 mb-1", children: "Shift End Time" }),
35429
35617
  /* @__PURE__ */ jsx(
35430
35618
  TimePickerDropdown,
35431
35619
  {
@@ -35438,12 +35626,12 @@ var ShiftPanel = memo(({
35438
35626
  ] })
35439
35627
  ] }),
35440
35628
  /* @__PURE__ */ jsxs("div", { className: "mb-4 w-full", children: [
35441
- /* @__PURE__ */ jsx("div", { className: "flex flex-col sm:flex-row sm:items-center justify-between mb-3 w-full", children: /* @__PURE__ */ jsxs("h4", { className: "text-md font-medium text-gray-700 flex items-center gap-2 mb-2 sm:mb-0", children: [
35442
- /* @__PURE__ */ jsx(Coffee, { className: "w-4 h-4" }),
35629
+ /* @__PURE__ */ jsx("div", { className: "flex flex-col sm:flex-row sm:items-center justify-between mb-3 w-full", children: /* @__PURE__ */ jsxs("h4", { className: "text-sm sm:text-base font-medium text-gray-700 flex items-center gap-1.5 sm:gap-2 mb-2 sm:mb-0", children: [
35630
+ /* @__PURE__ */ jsx(Coffee, { className: "w-3.5 h-3.5 sm:w-4 sm:h-4" }),
35443
35631
  "Breaks"
35444
35632
  ] }) }),
35445
35633
  /* @__PURE__ */ jsx("div", { className: "space-y-2 mb-4 w-full", children: breaks.length > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
35446
- /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-12 gap-2 sm:gap-4 text-xs font-medium text-gray-500 mb-1 w-full px-2", children: [
35634
+ /* @__PURE__ */ jsxs("div", { className: "hidden sm:grid grid-cols-12 gap-2 md:gap-4 text-xs font-medium text-gray-500 mb-1 w-full px-2", children: [
35447
35635
  /* @__PURE__ */ jsx("div", { className: "col-span-3", children: "Break Start" }),
35448
35636
  /* @__PURE__ */ jsx("div", { className: "col-span-3", children: "Break End" }),
35449
35637
  /* @__PURE__ */ jsx("div", { className: "col-span-2", children: "Duration" }),
@@ -35460,7 +35648,7 @@ var ShiftPanel = memo(({
35460
35648
  },
35461
35649
  index
35462
35650
  )) })
35463
- ] }) : /* @__PURE__ */ jsx("div", { className: "text-sm text-gray-500 py-3 text-center bg-gray-50 rounded-md", children: "No breaks added yet" }) }),
35651
+ ] }) : /* @__PURE__ */ jsx("div", { className: "text-xs sm:text-sm text-gray-500 py-3 text-center bg-gray-50 rounded-md", children: "No breaks added yet" }) }),
35464
35652
  /* @__PURE__ */ jsxs(
35465
35653
  "button",
35466
35654
  {
@@ -35468,9 +35656,9 @@ var ShiftPanel = memo(({
35468
35656
  e.stopPropagation();
35469
35657
  onBreakAdd();
35470
35658
  },
35471
- className: "inline-flex items-center gap-1 text-sm font-medium text-blue-600 hover:text-blue-800 px-3 py-1.5 bg-blue-50 hover:bg-blue-100 rounded-md transition-colors",
35659
+ className: "w-full sm:w-auto inline-flex items-center justify-center gap-1 text-xs sm:text-sm font-medium text-blue-600 hover:text-blue-800 px-3 py-1.5 bg-blue-50 hover:bg-blue-100 rounded-md transition-colors",
35472
35660
  children: [
35473
- /* @__PURE__ */ jsx(Plus, { className: "w-4 h-4" }),
35661
+ /* @__PURE__ */ jsx(Plus, { className: "w-3.5 h-3.5 sm:w-4 sm:h-4" }),
35474
35662
  "Add Break"
35475
35663
  ]
35476
35664
  }
@@ -35838,8 +36026,8 @@ var ShiftsView = ({
35838
36026
  }
35839
36027
  }, [lineConfigs, supabase, showToast]);
35840
36028
  return /* @__PURE__ */ jsxs("div", { className: `min-h-screen bg-slate-50 ${className}`, children: [
35841
- /* @__PURE__ */ jsx("div", { className: "sticky top-0 z-10 bg-white border-b border-gray-200/80 shadow-sm", children: /* @__PURE__ */ jsx("div", { className: "px-4 sm:px-8 py-4", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center relative", children: [
35842
- /* @__PURE__ */ jsx("div", { className: "absolute left-0", children: /* @__PURE__ */ jsx(
36029
+ /* @__PURE__ */ jsx("div", { className: "sticky top-0 z-10 bg-white border-b border-gray-200/80 shadow-sm", children: /* @__PURE__ */ jsx("div", { className: "px-3 sm:px-4 md:px-6 lg:px-8 py-3 sm:py-4", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center relative", children: [
36030
+ /* @__PURE__ */ jsx("div", { className: "sm:absolute sm:left-0", children: /* @__PURE__ */ jsx(
35843
36031
  BackButtonMinimal,
35844
36032
  {
35845
36033
  onClick: () => onBackClick ? onBackClick() : window.history.back(),
@@ -35848,14 +36036,14 @@ var ShiftsView = ({
35848
36036
  "aria-label": "Navigate back to previous page"
35849
36037
  }
35850
36038
  ) }),
35851
- /* @__PURE__ */ jsxs("div", { className: "flex-1 flex flex-col items-center", children: [
35852
- /* @__PURE__ */ jsx("h1", { className: "text-3xl font-semibold text-gray-900", children: "Shift Management" }),
35853
- /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500 mt-1", children: "Configure day and night shift timings and breaks for each production line" })
36039
+ /* @__PURE__ */ jsxs("div", { className: "flex-1 flex flex-col items-center mt-2 sm:mt-0", children: [
36040
+ /* @__PURE__ */ jsx("h1", { className: "text-lg sm:text-xl md:text-2xl lg:text-3xl font-semibold text-gray-900 text-center", children: "Shift Management" }),
36041
+ /* @__PURE__ */ jsx("p", { className: "text-xs sm:text-sm text-gray-500 mt-0.5 sm:mt-1 text-center px-2 sm:px-0", children: "Configure day and night shift timings and breaks for each production line" })
35854
36042
  ] }),
35855
- /* @__PURE__ */ jsx("div", { className: "absolute right-0 w-24" })
36043
+ /* @__PURE__ */ jsx("div", { className: "hidden sm:block absolute right-0 w-24" })
35856
36044
  ] }) }) }),
35857
- /* @__PURE__ */ jsxs("div", { className: "p-4 sm:p-6 md:p-8", children: [
35858
- /* @__PURE__ */ jsx("div", { className: "mb-6 bg-gradient-to-r from-blue-50 to-blue-50/50 p-3 sm:p-4 rounded-xl border border-blue-100", children: /* @__PURE__ */ jsx("p", { className: "text-xs sm:text-sm text-blue-700 font-medium", children: "Changes will affect production targets and output calculations." }) }),
36045
+ /* @__PURE__ */ jsxs("div", { className: "p-3 sm:p-4 md:p-6 lg:p-8", children: [
36046
+ /* @__PURE__ */ jsx("div", { className: "mb-4 sm:mb-6 bg-gradient-to-r from-blue-50 to-blue-50/50 p-3 sm:p-4 rounded-xl border border-blue-100", children: /* @__PURE__ */ jsx("p", { className: "text-xs sm:text-sm text-blue-700 font-medium text-center sm:text-left", children: "Changes will affect production targets and output calculations." }) }),
35859
36047
  loading ? /* @__PURE__ */ jsx("div", { className: "bg-white rounded-xl p-8 shadow text-center", children: /* @__PURE__ */ jsxs("div", { className: "animate-pulse flex flex-col items-center", children: [
35860
36048
  /* @__PURE__ */ jsx("div", { className: "h-8 w-8 rounded-full bg-blue-200 mb-4" }),
35861
36049
  /* @__PURE__ */ jsx("div", { className: "h-4 w-48 bg-gray-200 rounded mb-2" }),
@@ -35864,17 +36052,19 @@ var ShiftsView = ({
35864
36052
  /* @__PURE__ */ jsx("div", { className: "text-red-500 mb-2", children: "Error loading shift configurations" }),
35865
36053
  /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500", children: error })
35866
36054
  ] }) : /* @__PURE__ */ jsx("div", { className: "space-y-4 sm:space-y-6", children: lineConfigs.map((config) => /* @__PURE__ */ jsxs("div", { className: "bg-white rounded-xl border border-gray-200 shadow-sm hover:shadow-md transition-all duration-200 w-full", children: [
35867
- /* @__PURE__ */ jsx("div", { className: "px-6 py-4", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col sm:flex-row sm:items-center justify-between gap-3 sm:gap-0", children: [
35868
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
35869
- /* @__PURE__ */ jsx(Calendar, { className: "w-5 h-5 text-gray-600" }),
35870
- /* @__PURE__ */ jsxs("h2", { className: "text-lg font-semibold text-gray-800", children: [
36055
+ /* @__PURE__ */ jsx("div", { className: "px-4 sm:px-5 md:px-6 py-3 sm:py-4", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col sm:flex-row sm:items-center justify-between gap-3 sm:gap-0", children: [
36056
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 sm:gap-3", children: [
36057
+ /* @__PURE__ */ jsx(Calendar, { className: "w-4 h-4 sm:w-5 sm:h-5 text-gray-600" }),
36058
+ /* @__PURE__ */ jsxs("h2", { className: "text-base sm:text-lg font-semibold text-gray-800", children: [
35871
36059
  config.name,
35872
36060
  " Shifts"
35873
36061
  ] })
35874
36062
  ] }),
35875
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 sm:gap-4", children: [
35876
- config.isSaving && /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-blue-600", children: "Saving..." }),
35877
- config.saveSuccess && /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-green-600", children: "Saved!" }),
36063
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col sm:flex-row items-start sm:items-center gap-2 sm:gap-4 w-full sm:w-auto", children: [
36064
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
36065
+ config.isSaving && /* @__PURE__ */ jsx("span", { className: "text-xs sm:text-sm font-medium text-blue-600", children: "Saving..." }),
36066
+ config.saveSuccess && /* @__PURE__ */ jsx("span", { className: "text-xs sm:text-sm font-medium text-green-600", children: "Saved!" })
36067
+ ] }),
35878
36068
  /* @__PURE__ */ jsxs(
35879
36069
  "button",
35880
36070
  {
@@ -35884,7 +36074,7 @@ var ShiftsView = ({
35884
36074
  e.stopPropagation();
35885
36075
  handleSaveShifts(config.id);
35886
36076
  },
35887
- className: "inline-flex items-center gap-1 sm:gap-2 py-1.5 sm:py-2 px-3 sm:px-4 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors duration-200 text-xs sm:text-sm font-medium shadow-sm cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 z-10",
36077
+ className: "w-full sm:w-auto inline-flex items-center justify-center gap-1 sm:gap-2 py-1.5 sm:py-2 px-3 sm:px-4 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors duration-200 text-xs sm:text-sm font-medium shadow-sm cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 z-10",
35888
36078
  disabled: config.isSaving,
35889
36079
  "aria-label": "Save shift configuration",
35890
36080
  children: [
@@ -35895,7 +36085,7 @@ var ShiftsView = ({
35895
36085
  )
35896
36086
  ] })
35897
36087
  ] }) }),
35898
- /* @__PURE__ */ jsxs("div", { id: `shift-panel-${config.id}`, className: "p-3 sm:p-6 border-t border-gray-200 w-full", children: [
36088
+ /* @__PURE__ */ jsxs("div", { id: `shift-panel-${config.id}`, className: "p-3 sm:p-4 md:p-6 border-t border-gray-200 w-full", children: [
35899
36089
  /* @__PURE__ */ jsx(
35900
36090
  ShiftPanel,
35901
36091
  {
@@ -36676,54 +36866,105 @@ var SKUList = ({
36676
36866
  /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-gray-500", children: "Get started by creating a new SKU for production planning." })
36677
36867
  ] }) });
36678
36868
  }
36679
- return /* @__PURE__ */ jsx("div", { className: "bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsxs("table", { className: "min-w-full divide-y divide-gray-200", children: [
36680
- /* @__PURE__ */ jsx("thead", { className: "bg-gray-50", children: /* @__PURE__ */ jsxs("tr", { children: [
36681
- /* @__PURE__ */ jsx("th", { scope: "col", className: "px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider", children: "SKU ID" }),
36682
- /* @__PURE__ */ jsx("th", { scope: "col", className: "px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider", children: "Production Target" }),
36683
- /* @__PURE__ */ jsx("th", { scope: "col", className: "px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider", children: "Attributes" }),
36684
- /* @__PURE__ */ jsx("th", { scope: "col", className: "px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider", children: "Status" }),
36685
- /* @__PURE__ */ jsx("th", { scope: "col", className: "px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider", children: "Created" }),
36686
- /* @__PURE__ */ jsx("th", { scope: "col", className: "relative px-6 py-3", children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Actions" }) })
36687
- ] }) }),
36688
- /* @__PURE__ */ jsx("tbody", { className: "bg-white divide-y divide-gray-200", children: skus.map((sku) => /* @__PURE__ */ jsxs("tr", { className: "hover:bg-gray-50 transition-colors duration-150", children: [
36689
- /* @__PURE__ */ jsx("td", { className: "px-6 py-4 whitespace-nowrap", children: /* @__PURE__ */ jsx("div", { className: "text-sm font-semibold text-gray-900", children: sku.sku_id }) }),
36690
- /* @__PURE__ */ jsx("td", { className: "px-6 py-4 whitespace-nowrap", children: /* @__PURE__ */ jsxs("div", { className: "text-sm font-medium text-gray-700", children: [
36691
- sku.production_target.toLocaleString(),
36692
- " units/day"
36869
+ return /* @__PURE__ */ jsxs(Fragment, { children: [
36870
+ /* @__PURE__ */ jsx("div", { className: "hidden lg:block bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsxs("table", { className: "min-w-full divide-y divide-gray-200", children: [
36871
+ /* @__PURE__ */ jsx("thead", { className: "bg-gray-50", children: /* @__PURE__ */ jsxs("tr", { children: [
36872
+ /* @__PURE__ */ jsx("th", { scope: "col", className: "px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider", children: "SKU ID" }),
36873
+ /* @__PURE__ */ jsx("th", { scope: "col", className: "px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider", children: "Production Target" }),
36874
+ /* @__PURE__ */ jsx("th", { scope: "col", className: "px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider", children: "Attributes" }),
36875
+ /* @__PURE__ */ jsx("th", { scope: "col", className: "px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider", children: "Status" }),
36876
+ /* @__PURE__ */ jsx("th", { scope: "col", className: "px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider", children: "Created" }),
36877
+ /* @__PURE__ */ jsx("th", { scope: "col", className: "relative px-6 py-3", children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Actions" }) })
36693
36878
  ] }) }),
36694
- /* @__PURE__ */ jsx("td", { className: "px-6 py-4", children: /* @__PURE__ */ jsx("div", { className: "text-sm text-gray-500", children: Object.keys(sku.attributes || {}).length === 0 ? /* @__PURE__ */ jsx("span", { className: "text-gray-400", children: "No attributes" }) : /* @__PURE__ */ jsx("div", { className: "max-w-xs truncate", children: Object.entries(sku.attributes).map(([key, value], index) => /* @__PURE__ */ jsxs("span", { children: [
36695
- index > 0 && ", ",
36696
- /* @__PURE__ */ jsxs("span", { className: "font-medium", children: [
36697
- key,
36698
- ":"
36879
+ /* @__PURE__ */ jsx("tbody", { className: "bg-white divide-y divide-gray-200", children: skus.map((sku) => /* @__PURE__ */ jsxs("tr", { className: "hover:bg-gray-50 transition-colors duration-150", children: [
36880
+ /* @__PURE__ */ jsx("td", { className: "px-6 py-4 whitespace-nowrap", children: /* @__PURE__ */ jsx("div", { className: "text-sm font-semibold text-gray-900", children: sku.sku_id }) }),
36881
+ /* @__PURE__ */ jsx("td", { className: "px-6 py-4 whitespace-nowrap", children: /* @__PURE__ */ jsxs("div", { className: "text-sm font-medium text-gray-700", children: [
36882
+ sku.production_target.toLocaleString(),
36883
+ " units/day"
36884
+ ] }) }),
36885
+ /* @__PURE__ */ jsx("td", { className: "px-6 py-4", children: /* @__PURE__ */ jsx("div", { className: "text-sm text-gray-500", children: Object.keys(sku.attributes || {}).length === 0 ? /* @__PURE__ */ jsx("span", { className: "text-gray-400", children: "No attributes" }) : /* @__PURE__ */ jsx("div", { className: "max-w-xs truncate", children: Object.entries(sku.attributes).map(([key, value], index) => /* @__PURE__ */ jsxs("span", { children: [
36886
+ index > 0 && ", ",
36887
+ /* @__PURE__ */ jsxs("span", { className: "font-medium", children: [
36888
+ key,
36889
+ ":"
36890
+ ] }),
36891
+ " ",
36892
+ String(value)
36893
+ ] }, key)) }) }) }),
36894
+ /* @__PURE__ */ jsx("td", { className: "px-6 py-4 whitespace-nowrap", children: /* @__PURE__ */ jsx("span", { className: `inline-flex px-2 py-1 text-xs font-semibold rounded-full ${sku.is_active ? "bg-green-100 text-green-800" : "bg-gray-100 text-gray-800"}`, children: sku.is_active ? "Active" : "Inactive" }) }),
36895
+ /* @__PURE__ */ jsx("td", { className: "px-6 py-4 whitespace-nowrap text-sm text-gray-500", children: new Date(sku.created_at).toLocaleDateString() }),
36896
+ /* @__PURE__ */ jsxs("td", { className: "px-6 py-4 whitespace-nowrap text-right text-sm font-medium", children: [
36897
+ /* @__PURE__ */ jsx(
36898
+ "button",
36899
+ {
36900
+ onClick: () => onEdit(sku),
36901
+ className: "text-blue-600 hover:text-blue-800 mr-3 transition-colors duration-150 p-1 hover:bg-blue-50 rounded",
36902
+ title: "Edit SKU",
36903
+ children: /* @__PURE__ */ jsx(Edit2, { className: "w-4 h-4" })
36904
+ }
36905
+ ),
36906
+ /* @__PURE__ */ jsx(
36907
+ "button",
36908
+ {
36909
+ onClick: () => onDelete(sku),
36910
+ className: "text-red-600 hover:text-red-800 transition-colors duration-150 p-1 hover:bg-red-50 rounded",
36911
+ title: "Delete SKU",
36912
+ children: /* @__PURE__ */ jsx(Trash2, { className: "w-4 h-4" })
36913
+ }
36914
+ )
36915
+ ] })
36916
+ ] }, sku.id)) })
36917
+ ] }) }) }),
36918
+ /* @__PURE__ */ jsx("div", { className: "lg:hidden space-y-3 sm:space-y-4", children: skus.map((sku) => /* @__PURE__ */ jsxs("div", { className: "bg-white rounded-xl shadow-sm border border-gray-200 p-4 hover:shadow-md transition-all duration-200", children: [
36919
+ /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between mb-3", children: [
36920
+ /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
36921
+ /* @__PURE__ */ jsx("h3", { className: "text-base sm:text-lg font-semibold text-gray-900 truncate", children: sku.sku_id }),
36922
+ /* @__PURE__ */ jsx("div", { className: "mt-1", children: /* @__PURE__ */ jsx("span", { className: `inline-flex px-2 py-1 text-xs font-semibold rounded-full ${sku.is_active ? "bg-green-100 text-green-800" : "bg-gray-100 text-gray-800"}`, children: sku.is_active ? "Active" : "Inactive" }) })
36699
36923
  ] }),
36700
- " ",
36701
- String(value)
36702
- ] }, key)) }) }) }),
36703
- /* @__PURE__ */ jsx("td", { className: "px-6 py-4 whitespace-nowrap", children: /* @__PURE__ */ jsx("span", { className: `inline-flex px-2 py-1 text-xs font-semibold rounded-full ${sku.is_active ? "bg-green-100 text-green-800" : "bg-gray-100 text-gray-800"}`, children: sku.is_active ? "Active" : "Inactive" }) }),
36704
- /* @__PURE__ */ jsx("td", { className: "px-6 py-4 whitespace-nowrap text-sm text-gray-500", children: new Date(sku.created_at).toLocaleDateString() }),
36705
- /* @__PURE__ */ jsxs("td", { className: "px-6 py-4 whitespace-nowrap text-right text-sm font-medium", children: [
36706
- /* @__PURE__ */ jsx(
36707
- "button",
36708
- {
36709
- onClick: () => onEdit(sku),
36710
- className: "text-blue-600 hover:text-blue-800 mr-3 transition-colors duration-150 p-1 hover:bg-blue-50 rounded",
36711
- title: "Edit SKU",
36712
- children: /* @__PURE__ */ jsx(Edit2, { className: "w-4 h-4" })
36713
- }
36714
- ),
36715
- /* @__PURE__ */ jsx(
36716
- "button",
36717
- {
36718
- onClick: () => onDelete(sku),
36719
- className: "text-red-600 hover:text-red-800 transition-colors duration-150 p-1 hover:bg-red-50 rounded",
36720
- title: "Delete SKU",
36721
- children: /* @__PURE__ */ jsx(Trash2, { className: "w-4 h-4" })
36722
- }
36723
- )
36924
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 ml-3", children: [
36925
+ /* @__PURE__ */ jsx(
36926
+ "button",
36927
+ {
36928
+ onClick: () => onEdit(sku),
36929
+ className: "text-blue-600 hover:text-blue-800 transition-colors duration-150 p-2 hover:bg-blue-50 rounded-lg",
36930
+ title: "Edit SKU",
36931
+ children: /* @__PURE__ */ jsx(Edit2, { className: "w-4 h-4" })
36932
+ }
36933
+ ),
36934
+ /* @__PURE__ */ jsx(
36935
+ "button",
36936
+ {
36937
+ onClick: () => onDelete(sku),
36938
+ className: "text-red-600 hover:text-red-800 transition-colors duration-150 p-2 hover:bg-red-50 rounded-lg",
36939
+ title: "Delete SKU",
36940
+ children: /* @__PURE__ */ jsx(Trash2, { className: "w-4 h-4" })
36941
+ }
36942
+ )
36943
+ ] })
36944
+ ] }),
36945
+ /* @__PURE__ */ jsxs("div", { className: "mb-3", children: [
36946
+ /* @__PURE__ */ jsx("div", { className: "text-xs font-medium text-gray-500 uppercase tracking-wider mb-1", children: "Production Target" }),
36947
+ /* @__PURE__ */ jsxs("div", { className: "text-sm sm:text-base font-medium text-gray-700", children: [
36948
+ sku.production_target.toLocaleString(),
36949
+ " units/day"
36950
+ ] })
36951
+ ] }),
36952
+ /* @__PURE__ */ jsxs("div", { className: "mb-3", children: [
36953
+ /* @__PURE__ */ jsx("div", { className: "text-xs font-medium text-gray-500 uppercase tracking-wider mb-1", children: "Attributes" }),
36954
+ /* @__PURE__ */ jsx("div", { className: "text-sm text-gray-500", children: Object.keys(sku.attributes || {}).length === 0 ? /* @__PURE__ */ jsx("span", { className: "text-gray-400 italic", children: "No attributes" }) : /* @__PURE__ */ jsx("div", { className: "space-y-1", children: Object.entries(sku.attributes).map(([key, value]) => /* @__PURE__ */ jsxs("div", { className: "flex justify-between", children: [
36955
+ /* @__PURE__ */ jsxs("span", { className: "font-medium text-gray-600", children: [
36956
+ key,
36957
+ ":"
36958
+ ] }),
36959
+ /* @__PURE__ */ jsx("span", { className: "text-gray-900", children: String(value) })
36960
+ ] }, key)) }) })
36961
+ ] }),
36962
+ /* @__PURE__ */ jsxs("div", { className: "text-xs text-gray-500", children: [
36963
+ "Created: ",
36964
+ new Date(sku.created_at).toLocaleDateString()
36724
36965
  ] })
36725
36966
  ] }, sku.id)) })
36726
- ] }) }) });
36967
+ ] });
36727
36968
  };
36728
36969
  var TargetsViewUI = ({
36729
36970
  isLoading,
@@ -36756,8 +36997,8 @@ var TargetsViewUI = ({
36756
36997
  return /* @__PURE__ */ jsx("div", { className: "flex h-screen bg-gray-50", children: /* @__PURE__ */ jsx("div", { className: "flex-1 flex items-center justify-center", children: /* @__PURE__ */ jsx(OptifyeLogoLoader_default, { size: "lg", message: "Loading targets..." }) }) });
36757
36998
  }
36758
36999
  return /* @__PURE__ */ jsxs("main", { className: "min-h-screen flex-1 bg-gray-50", children: [
36759
- /* @__PURE__ */ jsx("div", { className: "bg-white px-8 py-6 shadow-sm border-b border-gray-200/80", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between relative", children: [
36760
- /* @__PURE__ */ jsx("div", { className: "absolute left-0", children: /* @__PURE__ */ jsx(
37000
+ /* @__PURE__ */ jsx("div", { className: "bg-white px-4 sm:px-6 md:px-8 py-4 sm:py-5 md:py-6 shadow-sm border-b border-gray-200/80", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3 sm:gap-4 relative", children: [
37001
+ /* @__PURE__ */ jsx("div", { className: "sm:absolute sm:left-0", children: /* @__PURE__ */ jsx(
36761
37002
  BackButtonMinimal,
36762
37003
  {
36763
37004
  onClick: onBack,
@@ -36766,30 +37007,30 @@ var TargetsViewUI = ({
36766
37007
  "aria-label": "Navigate back to previous page"
36767
37008
  }
36768
37009
  ) }),
36769
- /* @__PURE__ */ jsx("div", { className: "absolute right-0", children: /* @__PURE__ */ jsxs(
37010
+ /* @__PURE__ */ jsx("div", { className: "sm:absolute sm:right-0 w-full sm:w-auto", children: /* @__PURE__ */ jsxs(
36770
37011
  "button",
36771
37012
  {
36772
- className: "px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-all duration-200",
37013
+ className: "w-full sm:w-auto px-3 sm:px-4 py-1.5 sm:py-2 text-xs sm:text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-all duration-200",
36773
37014
  onClick: onToggleBulkConfigure,
36774
37015
  children: [
36775
- /* @__PURE__ */ jsx(Settings2, { className: "w-4 h-4 mr-2 inline-block" }),
37016
+ /* @__PURE__ */ jsx(Settings2, { className: "w-3 h-3 sm:w-4 sm:h-4 mr-1.5 sm:mr-2 inline-block" }),
36776
37017
  "Bulk Configure"
36777
37018
  ]
36778
37019
  }
36779
37020
  ) }),
36780
- /* @__PURE__ */ jsxs("div", { className: "flex-1 text-center mx-auto", children: [
36781
- /* @__PURE__ */ jsx("h1", { className: "text-3xl font-semibold text-gray-900", children: "Production Targets" }),
36782
- /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-gray-500", children: "Configure production targets and metrics for each line and workspace" })
37021
+ /* @__PURE__ */ jsxs("div", { className: "flex-1 text-center mx-auto mt-2 sm:mt-0", children: [
37022
+ /* @__PURE__ */ jsx("h1", { className: "text-lg sm:text-xl md:text-2xl lg:text-3xl font-semibold text-gray-900", children: "Production Targets" }),
37023
+ /* @__PURE__ */ jsx("p", { className: "mt-0.5 sm:mt-1 text-xs sm:text-sm text-gray-500", children: "Configure production targets and metrics for each line and workspace" })
36783
37024
  ] })
36784
37025
  ] }) }),
36785
- /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-auto", children: /* @__PURE__ */ jsxs("div", { className: "px-8 py-6", children: [
36786
- /* @__PURE__ */ jsx("div", { className: "mb-6 bg-gradient-to-r from-blue-50 to-blue-50/50 p-4 rounded-xl border border-blue-100", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-blue-700 font-medium", children: "Click on a line to expand and configure individual workspace targets." }) }),
36787
- /* @__PURE__ */ jsx("div", { className: "mb-6 flex justify-center relative", children: /* @__PURE__ */ jsxs("div", { className: "inline-flex bg-gray-100 p-1 rounded-lg", children: [
37026
+ /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-auto", children: /* @__PURE__ */ jsxs("div", { className: "px-4 sm:px-6 md:px-8 py-4 sm:py-5 md:py-6", children: [
37027
+ /* @__PURE__ */ jsx("div", { className: "mb-4 sm:mb-6 bg-gradient-to-r from-blue-50 to-blue-50/50 p-3 sm:p-4 rounded-xl border border-blue-100", children: /* @__PURE__ */ jsx("p", { className: "text-xs sm:text-sm text-blue-700 font-medium text-center sm:text-left", children: "Click on a line to expand and configure individual workspace targets." }) }),
37028
+ /* @__PURE__ */ jsx("div", { className: "mb-4 sm:mb-6 flex justify-center relative", children: /* @__PURE__ */ jsxs("div", { className: "inline-flex bg-gray-100 p-1 rounded-lg w-full max-w-xs sm:w-auto", children: [
36788
37029
  /* @__PURE__ */ jsx(
36789
37030
  "button",
36790
37031
  {
36791
37032
  onClick: () => onShiftChange(0),
36792
- className: `px-4 py-2 text-sm font-medium rounded-md transition-all ${selectedShift === 0 ? "bg-white text-blue-600 shadow-sm" : "text-gray-600 hover:text-gray-900"}`,
37033
+ className: `flex-1 sm:flex-none px-3 sm:px-4 py-2 text-xs sm:text-sm font-medium rounded-md transition-all ${selectedShift === 0 ? "bg-white text-blue-600 shadow-sm" : "text-gray-600 hover:text-gray-900"}`,
36793
37034
  children: "Day Shift"
36794
37035
  }
36795
37036
  ),
@@ -36797,7 +37038,7 @@ var TargetsViewUI = ({
36797
37038
  "button",
36798
37039
  {
36799
37040
  onClick: () => onShiftChange(1),
36800
- className: `px-4 py-2 text-sm font-medium rounded-md transition-all ${selectedShift === 1 ? "bg-white text-blue-600 shadow-sm" : "text-gray-600 hover:text-gray-900"}`,
37041
+ className: `flex-1 sm:flex-none px-3 sm:px-4 py-2 text-xs sm:text-sm font-medium rounded-md transition-all ${selectedShift === 1 ? "bg-white text-blue-600 shadow-sm" : "text-gray-600 hover:text-gray-900"}`,
36801
37042
  children: "Night Shift"
36802
37043
  }
36803
37044
  )
@@ -36807,35 +37048,37 @@ var TargetsViewUI = ({
36807
37048
  {
36808
37049
  className: "bg-white rounded-xl border border-gray-200 shadow-sm hover:shadow-md transition-all duration-200",
36809
37050
  children: [
36810
- /* @__PURE__ */ jsx("div", { className: "px-6 py-4", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
36811
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-6", children: [
37051
+ /* @__PURE__ */ jsx("div", { className: "px-3 sm:px-4 md:px-6 py-3 sm:py-4", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col lg:flex-row lg:items-center justify-between gap-3 lg:gap-4", children: [
37052
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col sm:flex-row sm:items-center gap-3 sm:gap-4 lg:gap-6", children: [
36812
37053
  /* @__PURE__ */ jsxs(
36813
37054
  "button",
36814
37055
  {
36815
37056
  onClick: () => onToggleLineDropdown(lineId),
36816
- className: "flex items-center gap-3 text-lg font-medium transition-colors duration-200 \n focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 rounded-lg \n hover:bg-blue-50 px-3 py-2 group",
37057
+ className: "flex items-center gap-2 sm:gap-3 text-base sm:text-lg font-medium transition-colors duration-200 \n focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 rounded-lg \n hover:bg-blue-50 px-2 sm:px-3 py-2 group self-start",
36817
37058
  "aria-expanded": dropdownStates[lineId],
36818
37059
  "aria-controls": `line-${lineId}-content`,
36819
37060
  children: [
36820
37061
  /* @__PURE__ */ jsx(
36821
37062
  ChevronDown,
36822
37063
  {
36823
- className: `w-5 h-5 text-blue-500 transform transition-transform duration-200 ${dropdownStates[lineId] ? "rotate-180" : ""}`
37064
+ className: `w-4 h-4 sm:w-5 sm:h-5 text-blue-500 transform transition-transform duration-200 ${dropdownStates[lineId] ? "rotate-180" : ""}`
36824
37065
  }
36825
37066
  ),
36826
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5", children: [
36827
- /* @__PURE__ */ jsx("span", { className: "text-lg text-gray-900 group-hover:text-blue-600", children: lineNames[lineId] || lineId }),
36828
- /* @__PURE__ */ jsx("span", { className: "text-sm font-normal text-gray-400", children: "\u2022" }),
36829
- /* @__PURE__ */ jsxs("span", { className: "text-sm font-medium text-gray-500", children: [
36830
- line.workspaces.length,
36831
- " workspaces"
37067
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col sm:flex-row sm:items-center gap-1 sm:gap-2.5", children: [
37068
+ /* @__PURE__ */ jsx("span", { className: "text-base sm:text-lg text-gray-900 group-hover:text-blue-600", children: lineNames[lineId] || lineId }),
37069
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
37070
+ /* @__PURE__ */ jsx("span", { className: "hidden sm:inline text-sm font-normal text-gray-400", children: "\u2022" }),
37071
+ /* @__PURE__ */ jsxs("span", { className: "text-xs sm:text-sm font-medium text-gray-500", children: [
37072
+ line.workspaces.length,
37073
+ " workspaces"
37074
+ ] })
36832
37075
  ] })
36833
37076
  ] })
36834
37077
  ]
36835
37078
  }
36836
37079
  ),
36837
- /* @__PURE__ */ jsx("div", { className: "h-8 w-px bg-gray-200/80" }),
36838
- /* @__PURE__ */ jsx("div", { className: "flex items-center gap-3", children: /* @__PURE__ */ jsxs("div", { className: "ml-4 text-sm font-medium text-gray-600", children: [
37080
+ /* @__PURE__ */ jsx("div", { className: "hidden lg:block h-8 w-px bg-gray-200/80" }),
37081
+ /* @__PURE__ */ jsx("div", { className: "flex items-center gap-3 ml-0 sm:ml-2 lg:ml-4", children: /* @__PURE__ */ jsxs("div", { className: "text-xs sm:text-sm font-medium text-gray-600", children: [
36839
37082
  line.shiftStartTime,
36840
37083
  " \u2013 ",
36841
37084
  line.shiftEndTime,
@@ -36844,9 +37087,9 @@ var TargetsViewUI = ({
36844
37087
  " hours"
36845
37088
  ] }) })
36846
37089
  ] }),
36847
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
36848
- saveSuccess[lineId] && /* @__PURE__ */ jsxs("span", { className: "text-sm text-green-600 font-medium flex items-center gap-1.5", children: [
36849
- /* @__PURE__ */ jsx(CheckCircle2, { className: "w-4 h-4" }),
37090
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col sm:flex-row items-start sm:items-center gap-2 sm:gap-4", children: [
37091
+ saveSuccess[lineId] && /* @__PURE__ */ jsxs("span", { className: "text-xs sm:text-sm text-green-600 font-medium flex items-center gap-1.5", children: [
37092
+ /* @__PURE__ */ jsx(CheckCircle2, { className: "w-3 h-3 sm:w-4 sm:h-4" }),
36850
37093
  "Saved successfully"
36851
37094
  ] }),
36852
37095
  /* @__PURE__ */ jsx(
@@ -36854,13 +37097,13 @@ var TargetsViewUI = ({
36854
37097
  {
36855
37098
  onClick: () => onSaveLine(lineId),
36856
37099
  disabled: savingLines[lineId],
36857
- className: `ml-6 inline-flex items-center px-4 py-2 text-sm font-medium rounded-lg transition-all duration-200
37100
+ className: `inline-flex items-center px-3 sm:px-4 py-1.5 sm:py-2 text-xs sm:text-sm font-medium rounded-lg transition-all duration-200
36858
37101
  ${savingLines[lineId] ? "bg-gray-100 text-gray-400 cursor-not-allowed" : "bg-blue-600 text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"}`,
36859
37102
  children: savingLines[lineId] ? /* @__PURE__ */ jsxs(Fragment, { children: [
36860
- /* @__PURE__ */ jsx(OptifyeLogoLoader_default, { size: "sm", className: "mr-2" }),
37103
+ /* @__PURE__ */ jsx(OptifyeLogoLoader_default, { size: "sm", className: "mr-1.5 sm:mr-2" }),
36861
37104
  "Saving..."
36862
37105
  ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
36863
- /* @__PURE__ */ jsx(Save, { className: "w-4 h-4 mr-2" }),
37106
+ /* @__PURE__ */ jsx(Save, { className: "w-3 h-3 sm:w-4 sm:h-4 mr-1.5 sm:mr-2" }),
36864
37107
  "Save Changes"
36865
37108
  ] })
36866
37109
  }
@@ -36868,9 +37111,9 @@ var TargetsViewUI = ({
36868
37111
  ] })
36869
37112
  ] }) }),
36870
37113
  dropdownStates[lineId] && /* @__PURE__ */ jsxs("div", { id: `line-${lineId}-content`, className: "border-t border-gray-200", children: [
36871
- skuEnabled && /* @__PURE__ */ jsx("div", { className: "px-6 py-4 border-b border-gray-200 bg-gray-50/50", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
36872
- /* @__PURE__ */ jsx("label", { htmlFor: `sku-${lineId}`, className: "text-sm font-medium text-gray-700", children: "Select SKU:" }),
36873
- /* @__PURE__ */ jsx("div", { className: "flex-1 max-w-md", children: /* @__PURE__ */ jsx(
37114
+ skuEnabled && /* @__PURE__ */ jsx("div", { className: "px-3 sm:px-4 lg:px-6 py-3 sm:py-4 border-b border-gray-200 bg-gray-50/50", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col sm:flex-row sm:items-center gap-3 sm:gap-4", children: [
37115
+ /* @__PURE__ */ jsx("label", { htmlFor: `sku-${lineId}`, className: "text-sm font-medium text-gray-700 flex-shrink-0", children: "Select SKU:" }),
37116
+ /* @__PURE__ */ jsx("div", { className: "flex-1 max-w-full sm:max-w-md", children: /* @__PURE__ */ jsx(
36874
37117
  SKUSelector,
36875
37118
  {
36876
37119
  onSelect: (sku) => onUpdateSelectedSKU?.(lineId, sku),
@@ -36881,14 +37124,14 @@ var TargetsViewUI = ({
36881
37124
  className: "w-full"
36882
37125
  }
36883
37126
  ) }),
36884
- line.selectedSKU && /* @__PURE__ */ jsxs("div", { className: "text-sm text-gray-600", children: [
37127
+ line.selectedSKU && /* @__PURE__ */ jsxs("div", { className: "text-xs sm:text-sm text-gray-600 mt-2 sm:mt-0", children: [
36885
37128
  /* @__PURE__ */ jsx("span", { className: "font-medium", children: "Production Target:" }),
36886
37129
  " ",
36887
37130
  line.selectedSKU.production_target.toLocaleString(),
36888
37131
  " units/day"
36889
37132
  ] })
36890
37133
  ] }) }),
36891
- /* @__PURE__ */ jsx("div", { className: "px-6 py-3 bg-gray-50 border-b border-gray-200", children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-12 gap-6 text-sm font-medium text-gray-600", children: [
37134
+ /* @__PURE__ */ jsx("div", { className: "hidden lg:block px-6 py-3 bg-gray-50 border-b border-gray-200", children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-12 gap-6 text-sm font-medium text-gray-600", children: [
36892
37135
  /* @__PURE__ */ jsx("div", { className: "col-span-2", children: "Workspace" }),
36893
37136
  /* @__PURE__ */ jsx("div", { className: "col-span-2", children: "Action Type" }),
36894
37137
  /* @__PURE__ */ jsxs("div", { className: "col-span-3", children: [
@@ -36906,76 +37149,170 @@ var TargetsViewUI = ({
36906
37149
  ] }) }),
36907
37150
  /* @__PURE__ */ jsx("div", { className: "divide-y divide-gray-100", children: line.workspaces.map((workspace) => {
36908
37151
  const formattedName = formatWorkspaceName(workspace.name, lineId);
36909
- return /* @__PURE__ */ jsx(
37152
+ return /* @__PURE__ */ jsxs(
36910
37153
  "div",
36911
37154
  {
36912
- className: "px-6 py-4 hover:bg-gray-50 transition-all duration-200",
36913
- children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-12 gap-6 items-center", children: [
36914
- /* @__PURE__ */ jsx("div", { className: "col-span-2", children: onUpdateWorkspaceDisplayName ? /* @__PURE__ */ jsx(
36915
- InlineEditableText,
36916
- {
36917
- value: formattedName,
36918
- onSave: async (newName) => {
36919
- await onUpdateWorkspaceDisplayName(workspace.id, newName);
36920
- },
36921
- placeholder: "Workspace name",
36922
- className: "font-medium text-gray-900",
36923
- inputClassName: "min-w-[120px]"
36924
- }
36925
- ) : /* @__PURE__ */ jsx("span", { className: "font-medium text-gray-900", children: formattedName }) }),
36926
- /* @__PURE__ */ jsx("div", { className: "col-span-2", children: /* @__PURE__ */ jsxs(
36927
- "select",
36928
- {
36929
- value: workspace.actionType,
36930
- onChange: (e) => {
36931
- const newActionType = e.target.value;
36932
- onActionTypeChange(lineId, workspace.id, newActionType);
36933
- },
36934
- className: "w-full p-2 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm",
36935
- "aria-label": `Action type for ${formattedName}`,
36936
- children: [
36937
- /* @__PURE__ */ jsx("option", { value: "assembly", className: "py-2", children: "Assembly" }),
36938
- /* @__PURE__ */ jsx("option", { value: "packaging", className: "py-2", children: "Packaging" })
36939
- ]
36940
- }
36941
- ) }),
36942
- /* @__PURE__ */ jsx("div", { className: "col-span-3", children: /* @__PURE__ */ jsx(
36943
- "input",
36944
- {
36945
- type: "number",
36946
- value: workspace.targetCycleTime === 0 ? "" : workspace.targetCycleTime,
36947
- onChange: (e) => onUpdateWorkspaceTarget(lineId, workspace.id, "targetCycleTime", Number(e.target.value) || ""),
36948
- className: "block w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm\n shadow-sm focus:border-blue-500 focus:ring-blue-500 \n transition-all duration-200 hover:border-gray-400",
36949
- min: "0",
36950
- step: "0.01",
36951
- placeholder: "Enter cycle time"
36952
- }
36953
- ) }),
36954
- /* @__PURE__ */ jsx("div", { className: "col-span-3", children: /* @__PURE__ */ jsx(
36955
- "input",
36956
- {
36957
- type: "number",
36958
- value: workspace.targetPPH === 0 ? "" : workspace.targetPPH,
36959
- onChange: (e) => onUpdateWorkspaceTarget(lineId, workspace.id, "targetPPH", Number(e.target.value) || ""),
36960
- className: "block w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm\n shadow-sm focus:border-blue-500 focus:ring-blue-500 \n transition-all duration-200 hover:border-gray-400 \n placeholder:text-gray-400",
36961
- min: "0",
36962
- step: "0.1",
36963
- placeholder: "Enter PPH"
36964
- }
36965
- ) }),
36966
- /* @__PURE__ */ jsx("div", { className: "col-span-2", children: /* @__PURE__ */ jsx(
36967
- "input",
36968
- {
36969
- type: "number",
36970
- value: workspace.targetDayOutput === 0 ? "" : workspace.targetDayOutput,
36971
- onChange: (e) => onUpdateWorkspaceTarget(lineId, workspace.id, "targetDayOutput", Number(e.target.value) || ""),
36972
- className: "block w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm\n shadow-sm focus:border-blue-500 focus:ring-blue-500 \n transition-all duration-200 hover:border-gray-400 \n placeholder:text-gray-400",
36973
- min: "0",
36974
- step: "1",
36975
- placeholder: "Enter day output"
36976
- }
36977
- ) })
36978
- ] })
37155
+ className: "px-3 sm:px-4 lg:px-6 py-3 sm:py-4 hover:bg-gray-50 transition-all duration-200",
37156
+ children: [
37157
+ /* @__PURE__ */ jsxs("div", { className: "hidden lg:grid lg:grid-cols-12 lg:gap-6 lg:items-center", children: [
37158
+ /* @__PURE__ */ jsx("div", { className: "col-span-2", children: onUpdateWorkspaceDisplayName ? /* @__PURE__ */ jsx(
37159
+ InlineEditableText,
37160
+ {
37161
+ value: formattedName,
37162
+ onSave: async (newName) => {
37163
+ await onUpdateWorkspaceDisplayName(workspace.id, newName);
37164
+ },
37165
+ placeholder: "Workspace name",
37166
+ className: "font-medium text-gray-900",
37167
+ inputClassName: "min-w-[120px]"
37168
+ }
37169
+ ) : /* @__PURE__ */ jsx("span", { className: "font-medium text-gray-900", children: formattedName }) }),
37170
+ /* @__PURE__ */ jsx("div", { className: "col-span-2", children: /* @__PURE__ */ jsxs(
37171
+ "select",
37172
+ {
37173
+ value: workspace.actionType,
37174
+ onChange: (e) => {
37175
+ const newActionType = e.target.value;
37176
+ onActionTypeChange(lineId, workspace.id, newActionType);
37177
+ },
37178
+ className: "w-full p-2 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm",
37179
+ "aria-label": `Action type for ${formattedName}`,
37180
+ children: [
37181
+ /* @__PURE__ */ jsx("option", { value: "assembly", className: "py-2", children: "Assembly" }),
37182
+ /* @__PURE__ */ jsx("option", { value: "packaging", className: "py-2", children: "Packaging" })
37183
+ ]
37184
+ }
37185
+ ) }),
37186
+ /* @__PURE__ */ jsx("div", { className: "col-span-3", children: /* @__PURE__ */ jsx(
37187
+ "input",
37188
+ {
37189
+ type: "number",
37190
+ value: workspace.targetCycleTime === 0 ? "" : workspace.targetCycleTime,
37191
+ onChange: (e) => onUpdateWorkspaceTarget(lineId, workspace.id, "targetCycleTime", Number(e.target.value) || ""),
37192
+ className: "block w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm\n shadow-sm focus:border-blue-500 focus:ring-blue-500 \n transition-all duration-200 hover:border-gray-400",
37193
+ min: "0",
37194
+ step: "0.01",
37195
+ placeholder: "Enter cycle time"
37196
+ }
37197
+ ) }),
37198
+ /* @__PURE__ */ jsx("div", { className: "col-span-3", children: /* @__PURE__ */ jsx(
37199
+ "input",
37200
+ {
37201
+ type: "number",
37202
+ value: workspace.targetPPH === 0 ? "" : workspace.targetPPH,
37203
+ onChange: (e) => onUpdateWorkspaceTarget(lineId, workspace.id, "targetPPH", Number(e.target.value) || ""),
37204
+ className: "block w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm\n shadow-sm focus:border-blue-500 focus:ring-blue-500 \n transition-all duration-200 hover:border-gray-400 \n placeholder:text-gray-400",
37205
+ min: "0",
37206
+ step: "0.1",
37207
+ placeholder: "Enter PPH"
37208
+ }
37209
+ ) }),
37210
+ /* @__PURE__ */ jsx("div", { className: "col-span-2", children: /* @__PURE__ */ jsx(
37211
+ "input",
37212
+ {
37213
+ type: "number",
37214
+ value: workspace.targetDayOutput === 0 ? "" : workspace.targetDayOutput,
37215
+ onChange: (e) => onUpdateWorkspaceTarget(lineId, workspace.id, "targetDayOutput", Number(e.target.value) || ""),
37216
+ className: "block w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm\n shadow-sm focus:border-blue-500 focus:ring-blue-500 \n transition-all duration-200 hover:border-gray-400 \n placeholder:text-gray-400",
37217
+ min: "0",
37218
+ step: "1",
37219
+ placeholder: "Enter day output"
37220
+ }
37221
+ ) })
37222
+ ] }),
37223
+ /* @__PURE__ */ jsxs("div", { className: "lg:hidden space-y-4", children: [
37224
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
37225
+ /* @__PURE__ */ jsx("label", { className: "text-sm font-medium text-gray-700", children: "Workspace" }),
37226
+ onUpdateWorkspaceDisplayName ? /* @__PURE__ */ jsx(
37227
+ InlineEditableText,
37228
+ {
37229
+ value: formattedName,
37230
+ onSave: async (newName) => {
37231
+ await onUpdateWorkspaceDisplayName(workspace.id, newName);
37232
+ },
37233
+ placeholder: "Workspace name",
37234
+ className: "font-medium text-gray-900 text-base",
37235
+ inputClassName: "min-w-full"
37236
+ }
37237
+ ) : /* @__PURE__ */ jsx("span", { className: "font-medium text-gray-900 text-base", children: formattedName })
37238
+ ] }),
37239
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
37240
+ /* @__PURE__ */ jsx("label", { className: "text-sm font-medium text-gray-700", children: "Action Type" }),
37241
+ /* @__PURE__ */ jsxs(
37242
+ "select",
37243
+ {
37244
+ value: workspace.actionType,
37245
+ onChange: (e) => {
37246
+ const newActionType = e.target.value;
37247
+ onActionTypeChange(lineId, workspace.id, newActionType);
37248
+ },
37249
+ className: "w-full p-3 border border-gray-300 rounded-lg shadow-sm focus:ring-blue-500 focus:border-blue-500 text-sm",
37250
+ "aria-label": `Action type for ${formattedName}`,
37251
+ children: [
37252
+ /* @__PURE__ */ jsx("option", { value: "assembly", children: "Assembly" }),
37253
+ /* @__PURE__ */ jsx("option", { value: "packaging", children: "Packaging" })
37254
+ ]
37255
+ }
37256
+ )
37257
+ ] }),
37258
+ /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-4", children: [
37259
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
37260
+ /* @__PURE__ */ jsxs("label", { className: "text-sm font-medium text-gray-700", children: [
37261
+ "Target Cycle Time",
37262
+ /* @__PURE__ */ jsx("span", { className: "block text-xs text-gray-400", children: "seconds per piece" })
37263
+ ] }),
37264
+ /* @__PURE__ */ jsx(
37265
+ "input",
37266
+ {
37267
+ type: "number",
37268
+ value: workspace.targetCycleTime === 0 ? "" : workspace.targetCycleTime,
37269
+ onChange: (e) => onUpdateWorkspaceTarget(lineId, workspace.id, "targetCycleTime", Number(e.target.value) || ""),
37270
+ className: "block w-full rounded-lg border border-gray-300 bg-white px-3 py-3 text-sm\n shadow-sm focus:border-blue-500 focus:ring-blue-500 \n transition-all duration-200 hover:border-gray-400",
37271
+ min: "0",
37272
+ step: "0.01",
37273
+ placeholder: "Enter cycle time"
37274
+ }
37275
+ )
37276
+ ] }),
37277
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
37278
+ /* @__PURE__ */ jsxs("label", { className: "text-sm font-medium text-gray-700", children: [
37279
+ "Target PPH",
37280
+ /* @__PURE__ */ jsx("span", { className: "block text-xs text-gray-400", children: "pieces per hour" })
37281
+ ] }),
37282
+ /* @__PURE__ */ jsx(
37283
+ "input",
37284
+ {
37285
+ type: "number",
37286
+ value: workspace.targetPPH === 0 ? "" : workspace.targetPPH,
37287
+ onChange: (e) => onUpdateWorkspaceTarget(lineId, workspace.id, "targetPPH", Number(e.target.value) || ""),
37288
+ className: "block w-full rounded-lg border border-gray-300 bg-white px-3 py-3 text-sm\n shadow-sm focus:border-blue-500 focus:ring-blue-500 \n transition-all duration-200 hover:border-gray-400 \n placeholder:text-gray-400",
37289
+ min: "0",
37290
+ step: "0.1",
37291
+ placeholder: "Enter PPH"
37292
+ }
37293
+ )
37294
+ ] })
37295
+ ] }),
37296
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
37297
+ /* @__PURE__ */ jsxs("label", { className: "text-sm font-medium text-gray-700", children: [
37298
+ "Total Day Output",
37299
+ /* @__PURE__ */ jsx("span", { className: "block text-xs text-gray-400", children: "pieces per day" })
37300
+ ] }),
37301
+ /* @__PURE__ */ jsx(
37302
+ "input",
37303
+ {
37304
+ type: "number",
37305
+ value: workspace.targetDayOutput === 0 ? "" : workspace.targetDayOutput,
37306
+ onChange: (e) => onUpdateWorkspaceTarget(lineId, workspace.id, "targetDayOutput", Number(e.target.value) || ""),
37307
+ className: "block w-full rounded-lg border border-gray-300 bg-white px-3 py-3 text-sm\n shadow-sm focus:border-blue-500 focus:ring-blue-500 \n transition-all duration-200 hover:border-gray-400 \n placeholder:text-gray-400",
37308
+ min: "0",
37309
+ step: "1",
37310
+ placeholder: "Enter day output"
37311
+ }
37312
+ )
37313
+ ] })
37314
+ ] })
37315
+ ]
36979
37316
  },
36980
37317
  workspace.id
36981
37318
  );
@@ -38081,9 +38418,9 @@ var WorkspaceDetailView = ({
38081
38418
  animate: { opacity: 1 },
38082
38419
  transition: { duration: 0.3 },
38083
38420
  children: /* @__PURE__ */ jsxs("div", { className: "min-h-screen w-full flex flex-col bg-slate-50", children: [
38084
- /* @__PURE__ */ jsx("header", { className: "sticky top-0 z-10 px-2 sm:px-2.5 lg:px-3 py-1.5 sm:py-2 lg:py-3 flex flex-col shadow-sm bg-white", children: /* @__PURE__ */ jsxs("div", { className: "relative flex items-center", children: [
38085
- /* @__PURE__ */ jsx("div", { className: "absolute left-0 animate-pulse", children: /* @__PURE__ */ jsx("div", { className: "h-8 w-20 bg-gray-200 rounded" }) }),
38086
- /* @__PURE__ */ jsx("div", { className: "absolute left-1/2 transform -translate-x-1/2 animate-pulse", children: /* @__PURE__ */ jsx("div", { className: "h-6 w-40 bg-gray-200 rounded" }) }),
38421
+ /* @__PURE__ */ jsx("header", { className: "sticky top-0 z-10 px-3 sm:px-4 md:px-5 lg:px-6 py-2 sm:py-2.5 lg:py-3 flex flex-col shadow-sm bg-white", children: /* @__PURE__ */ jsxs("div", { className: "relative flex items-center", children: [
38422
+ /* @__PURE__ */ jsx("div", { className: "absolute left-0 animate-pulse", children: /* @__PURE__ */ jsx("div", { className: "h-6 sm:h-7 md:h-8 w-16 sm:w-20 bg-gray-200 rounded" }) }),
38423
+ /* @__PURE__ */ jsx("div", { className: "absolute left-1/2 transform -translate-x-1/2 animate-pulse max-w-[calc(100%-160px)] sm:max-w-[calc(100%-200px)]", children: /* @__PURE__ */ jsx("div", { className: "h-5 sm:h-6 md:h-7 w-28 sm:w-36 md:w-40 bg-gray-200 rounded" }) }),
38087
38424
  /* @__PURE__ */ jsx("div", { className: "w-full h-8" })
38088
38425
  ] }) }),
38089
38426
  /* @__PURE__ */ jsxs("div", { className: "flex-1 p-4 sm:p-6 lg:p-8", children: [
@@ -38144,8 +38481,35 @@ var WorkspaceDetailView = ({
38144
38481
  animate: { opacity: 1 },
38145
38482
  children: [
38146
38483
  /* @__PURE__ */ jsxs("div", { className: "min-h-screen w-full flex flex-col bg-slate-50", children: [
38147
- /* @__PURE__ */ jsxs("header", { className: "sticky top-0 z-10 px-2 sm:px-2.5 lg:px-3 py-1.5 sm:py-2 lg:py-3 flex flex-col shadow-sm bg-white", children: [
38148
- /* @__PURE__ */ jsxs("div", { className: "relative flex items-center", children: [
38484
+ /* @__PURE__ */ jsxs("header", { className: "sticky top-0 z-10 px-3 sm:px-4 md:px-5 lg:px-6 py-2 sm:py-2.5 lg:py-3 flex flex-col shadow-sm bg-white", children: [
38485
+ /* @__PURE__ */ jsxs("div", { className: "sm:hidden", children: [
38486
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-2", children: [
38487
+ /* @__PURE__ */ jsx(
38488
+ BackButtonMinimal,
38489
+ {
38490
+ onClick: handleBackNavigation,
38491
+ text: previousView === "line_monthly_history" ? "Back to Line History" : returnUrl && returnUrl.includes("monthly_history") ? "Back to Line History" : returnUrl && returnUrl.includes("/kpis/") ? "Back to KPIs" : returnUrl && returnUrl.includes("/leaderboard/") ? "Back to Leaderboard" : date || shift ? "Back to Monthly History" : "Back",
38492
+ size: "sm",
38493
+ "aria-label": "Navigate back to previous page"
38494
+ }
38495
+ ),
38496
+ workspaceHealth && activeTab !== "monthly_history" && /* @__PURE__ */ jsx("span", { className: "text-xs text-gray-500", children: workspaceHealth.timeSinceLastUpdate })
38497
+ ] }),
38498
+ /* @__PURE__ */ jsx("div", { className: "text-center", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-2", children: [
38499
+ /* @__PURE__ */ jsx("h1", { className: "text-base font-semibold text-gray-900 truncate max-w-[250px]", children: formattedWorkspaceName }),
38500
+ workspaceHealth && /* @__PURE__ */ jsxs("div", { className: "relative flex h-2 w-2", children: [
38501
+ /* @__PURE__ */ jsx("span", { className: clsx(
38502
+ "animate-ping absolute inline-flex h-full w-full rounded-full opacity-75",
38503
+ workspaceHealth.status === "healthy" ? "bg-green-400" : "bg-red-400"
38504
+ ) }),
38505
+ /* @__PURE__ */ jsx("span", { className: clsx(
38506
+ "relative inline-flex rounded-full h-2 w-2",
38507
+ workspaceHealth.status === "healthy" ? "bg-green-500" : "bg-red-500"
38508
+ ) })
38509
+ ] })
38510
+ ] }) })
38511
+ ] }),
38512
+ /* @__PURE__ */ jsx("div", { className: "hidden sm:block", children: /* @__PURE__ */ jsxs("div", { className: "relative flex items-center", children: [
38149
38513
  /* @__PURE__ */ jsx("div", { className: "absolute left-0 z-10", children: /* @__PURE__ */ jsx(
38150
38514
  BackButtonMinimal,
38151
38515
  {
@@ -38155,8 +38519,8 @@ var WorkspaceDetailView = ({
38155
38519
  "aria-label": "Navigate back to previous page"
38156
38520
  }
38157
38521
  ) }),
38158
- /* @__PURE__ */ jsx("div", { className: "absolute left-1/2 transform -translate-x-1/2", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
38159
- /* @__PURE__ */ jsx("h1", { className: "text-3xl font-semibold text-gray-900", children: formattedWorkspaceName }),
38522
+ /* @__PURE__ */ jsx("div", { className: "absolute left-1/2 transform -translate-x-1/2 max-w-[calc(100%-200px)]", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
38523
+ /* @__PURE__ */ jsx("h1", { className: "text-lg md:text-xl lg:text-2xl xl:text-3xl font-semibold text-gray-900 truncate", children: formattedWorkspaceName }),
38160
38524
  workspaceHealth && /* @__PURE__ */ jsxs("div", { className: "relative flex h-2.5 w-2.5", children: [
38161
38525
  /* @__PURE__ */ jsx("span", { className: clsx(
38162
38526
  "animate-ping absolute inline-flex h-full w-full rounded-full opacity-75",
@@ -38173,17 +38537,17 @@ var WorkspaceDetailView = ({
38173
38537
  workspaceHealth.timeSinceLastUpdate
38174
38538
  ] }) }),
38175
38539
  /* @__PURE__ */ jsx("div", { className: "w-full h-8" })
38176
- ] }),
38177
- activeTab !== "monthly_history" && /* @__PURE__ */ jsx("div", { className: "mt-3 bg-blue-50 px-3 py-2 rounded-lg", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-4", children: [
38540
+ ] }) }),
38541
+ activeTab !== "monthly_history" && /* @__PURE__ */ jsx("div", { className: "mt-2 sm:mt-3 bg-blue-50 px-2 sm:px-3 py-1.5 sm:py-2 rounded-lg", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-center gap-2 sm:gap-3 md:gap-4", children: [
38178
38542
  !date && !shift && !usingFallbackData && /* @__PURE__ */ jsxs(Fragment, { children: [
38179
- /* @__PURE__ */ jsx("div", { className: "text-lg font-medium text-blue-600", children: /* @__PURE__ */ jsx(LiveTimer, {}) }),
38180
- /* @__PURE__ */ jsx("div", { className: "w-px h-4 bg-blue-300" })
38543
+ /* @__PURE__ */ jsx("div", { className: "text-sm sm:text-base md:text-lg font-medium text-blue-600", children: /* @__PURE__ */ jsx(LiveTimer, {}) }),
38544
+ /* @__PURE__ */ jsx("div", { className: "hidden sm:block w-px h-4 bg-blue-300" })
38181
38545
  ] }),
38182
- /* @__PURE__ */ jsx("span", { className: "text-base font-medium text-blue-600", children: formatISTDate2(new Date(workspace.date)) }),
38183
- /* @__PURE__ */ jsx("div", { className: "w-px h-4 bg-blue-300" }),
38546
+ /* @__PURE__ */ jsx("span", { className: "text-xs sm:text-sm md:text-base font-medium text-blue-600", children: formatISTDate2(new Date(workspace.date)) }),
38547
+ /* @__PURE__ */ jsx("div", { className: "hidden sm:block w-px h-4 bg-blue-300" }),
38184
38548
  date && /* @__PURE__ */ jsxs(Fragment, { children: [
38185
38549
  /* @__PURE__ */ jsx("span", { className: "px-2 py-1 text-xs font-medium bg-blue-200 text-blue-800 rounded-md", children: getDaysDifference(workspace.date) }),
38186
- /* @__PURE__ */ jsx("div", { className: "w-px h-4 bg-blue-300" })
38550
+ /* @__PURE__ */ jsx("div", { className: "hidden sm:block w-px h-4 bg-blue-300" })
38187
38551
  ] }),
38188
38552
  !date && !shift && usingFallbackData && /* @__PURE__ */ jsxs(Fragment, { children: [
38189
38553
  /* @__PURE__ */ jsxs("span", { className: "px-2 py-1 text-xs font-medium bg-amber-100 text-amber-700 rounded-md", children: [
@@ -38191,11 +38555,11 @@ var WorkspaceDetailView = ({
38191
38555
  getDaysDifference(workspace.date),
38192
38556
  ")"
38193
38557
  ] }),
38194
- /* @__PURE__ */ jsx("div", { className: "w-px h-4 bg-blue-300" })
38558
+ /* @__PURE__ */ jsx("div", { className: "hidden sm:block w-px h-4 bg-blue-300" })
38195
38559
  ] }),
38196
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
38560
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 sm:gap-2", children: [
38197
38561
  /* @__PURE__ */ jsx("div", { className: "text-blue-600", children: getShiftIcon(workspace.shift_type) }),
38198
- /* @__PURE__ */ jsxs("span", { className: "text-base font-medium text-blue-600", children: [
38562
+ /* @__PURE__ */ jsxs("span", { className: "text-xs sm:text-sm md:text-base font-medium text-blue-600", children: [
38199
38563
  workspace.shift_type,
38200
38564
  " Shift"
38201
38565
  ] })
@@ -38674,8 +39038,8 @@ var SKUManagementView = () => {
38674
39038
  ] }) });
38675
39039
  }
38676
39040
  return /* @__PURE__ */ jsxs("div", { className: "min-h-screen bg-slate-50", children: [
38677
- /* @__PURE__ */ jsx("div", { className: "sticky top-0 z-10 bg-white border-b border-gray-200/80 shadow-sm", children: /* @__PURE__ */ jsx("div", { className: "px-4 sm:px-8 py-4", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center relative", children: [
38678
- /* @__PURE__ */ jsx("div", { className: "absolute left-0", children: /* @__PURE__ */ jsx(
39041
+ /* @__PURE__ */ jsx("div", { className: "sticky top-0 z-10 bg-white border-b border-gray-200/80 shadow-sm", children: /* @__PURE__ */ jsx("div", { className: "px-3 sm:px-4 md:px-6 lg:px-8 py-3 sm:py-4", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3 sm:gap-4 relative", children: [
39042
+ /* @__PURE__ */ jsx("div", { className: "sm:absolute sm:left-0", children: /* @__PURE__ */ jsx(
38679
39043
  BackButtonMinimal,
38680
39044
  {
38681
39045
  onClick: handleBack,
@@ -38684,24 +39048,24 @@ var SKUManagementView = () => {
38684
39048
  "aria-label": "Navigate back to previous page"
38685
39049
  }
38686
39050
  ) }),
38687
- /* @__PURE__ */ jsxs("div", { className: "flex-1 text-center mx-auto", children: [
38688
- /* @__PURE__ */ jsx("h1", { className: "text-3xl font-semibold text-gray-900", children: "SKU Management" }),
38689
- /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-gray-500", children: "Manage Stock Keeping Units (SKUs) for production planning" })
39051
+ /* @__PURE__ */ jsxs("div", { className: "flex-1 text-center mx-auto mt-2 sm:mt-0", children: [
39052
+ /* @__PURE__ */ jsx("h1", { className: "text-lg sm:text-xl md:text-2xl lg:text-3xl font-semibold text-gray-900", children: "SKU Management" }),
39053
+ /* @__PURE__ */ jsx("p", { className: "mt-0.5 sm:mt-1 text-xs sm:text-sm text-gray-500 px-2 sm:px-0", children: "Manage Stock Keeping Units (SKUs) for production planning" })
38690
39054
  ] }),
38691
39055
  /* @__PURE__ */ jsxs(
38692
39056
  "button",
38693
39057
  {
38694
39058
  onClick: handleAddNew,
38695
- className: "absolute right-0 inline-flex items-center px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-all duration-200 shadow-sm",
39059
+ className: "sm:absolute sm:right-0 w-full sm:w-auto inline-flex items-center justify-center px-3 sm:px-4 py-2 bg-blue-600 text-white text-xs sm:text-sm font-medium rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-all duration-200 shadow-sm",
38696
39060
  children: [
38697
- /* @__PURE__ */ jsx(Plus, { className: "w-4 h-4 mr-2" }),
39061
+ /* @__PURE__ */ jsx(Plus, { className: "w-3 h-3 sm:w-4 sm:h-4 mr-1.5 sm:mr-2" }),
38698
39062
  "Add SKU"
38699
39063
  ]
38700
39064
  }
38701
39065
  )
38702
39066
  ] }) }) }),
38703
- /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-auto", children: /* @__PURE__ */ jsxs("div", { className: "px-4 sm:px-8 py-6", children: [
38704
- /* @__PURE__ */ jsx("div", { className: "mb-6 bg-gradient-to-r from-blue-50 to-blue-50/50 p-4 rounded-xl border border-blue-100", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-blue-700 font-medium", children: "Create and manage SKUs with production targets. These will be available for selection in the production targets page." }) }),
39067
+ /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-auto", children: /* @__PURE__ */ jsxs("div", { className: "px-3 sm:px-4 md:px-6 lg:px-8 py-4 sm:py-6", children: [
39068
+ /* @__PURE__ */ jsx("div", { className: "mb-4 sm:mb-6 bg-gradient-to-r from-blue-50 to-blue-50/50 p-3 sm:p-4 rounded-xl border border-blue-100", children: /* @__PURE__ */ jsx("p", { className: "text-xs sm:text-sm text-blue-700 font-medium text-center sm:text-left", children: "Create and manage SKUs with production targets. These will be available for selection in the production targets page." }) }),
38705
39069
  error ? /* @__PURE__ */ jsxs("div", { className: "bg-red-50 border border-red-200 text-red-700 p-4 rounded-lg", children: [
38706
39070
  /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: "Error loading SKUs" }),
38707
39071
  /* @__PURE__ */ jsx("p", { className: "text-sm mt-1", children: error.message })
@@ -38841,8 +39205,50 @@ var WorkspaceHealthView = ({
38841
39205
  ] }) }) }) });
38842
39206
  }
38843
39207
  return /* @__PURE__ */ jsxs("div", { className: clsx("min-h-screen bg-slate-50", className), children: [
38844
- /* @__PURE__ */ jsxs("header", { className: "sticky top-0 z-10 px-2 sm:px-2.5 lg:px-3 py-1.5 sm:py-2 lg:py-3 flex flex-col shadow-sm bg-white", children: [
38845
- /* @__PURE__ */ jsxs("div", { className: "relative flex items-center", children: [
39208
+ /* @__PURE__ */ jsxs("header", { className: "sticky top-0 z-10 px-3 sm:px-4 md:px-5 lg:px-6 py-2 sm:py-2.5 lg:py-3 flex flex-col shadow-sm bg-white", children: [
39209
+ /* @__PURE__ */ jsxs("div", { className: "sm:hidden", children: [
39210
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-2", children: [
39211
+ /* @__PURE__ */ jsx(
39212
+ BackButtonMinimal,
39213
+ {
39214
+ onClick: () => router.push("/"),
39215
+ text: "Back",
39216
+ size: "sm",
39217
+ "aria-label": "Navigate back to dashboard"
39218
+ }
39219
+ ),
39220
+ /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
39221
+ /* @__PURE__ */ jsx(
39222
+ "button",
39223
+ {
39224
+ onClick: () => {
39225
+ refetch();
39226
+ },
39227
+ className: "p-1.5 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors",
39228
+ "aria-label": "Refresh",
39229
+ children: /* @__PURE__ */ jsx(RefreshCw, { className: "h-4 w-4" })
39230
+ }
39231
+ ),
39232
+ /* @__PURE__ */ jsx(
39233
+ "button",
39234
+ {
39235
+ onClick: handleExport,
39236
+ className: "p-1.5 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors",
39237
+ "aria-label": "Export CSV",
39238
+ children: /* @__PURE__ */ jsx(Download, { className: "h-4 w-4" })
39239
+ }
39240
+ )
39241
+ ] })
39242
+ ] }),
39243
+ /* @__PURE__ */ jsx("div", { className: "text-center", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-2", children: [
39244
+ /* @__PURE__ */ jsx("h1", { className: "text-base font-semibold text-gray-900", children: "System Health" }),
39245
+ /* @__PURE__ */ jsxs("div", { className: "relative flex h-2 w-2", children: [
39246
+ /* @__PURE__ */ jsx("span", { className: "animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75" }),
39247
+ /* @__PURE__ */ jsx("span", { className: "relative inline-flex rounded-full h-2 w-2 bg-emerald-500" })
39248
+ ] })
39249
+ ] }) })
39250
+ ] }),
39251
+ /* @__PURE__ */ jsx("div", { className: "hidden sm:block", children: /* @__PURE__ */ jsxs("div", { className: "relative flex items-center", children: [
38846
39252
  /* @__PURE__ */ jsx("div", { className: "absolute left-0 z-10", children: /* @__PURE__ */ jsx(
38847
39253
  BackButtonMinimal,
38848
39254
  {
@@ -38852,8 +39258,8 @@ var WorkspaceHealthView = ({
38852
39258
  "aria-label": "Navigate back to dashboard"
38853
39259
  }
38854
39260
  ) }),
38855
- /* @__PURE__ */ jsx("div", { className: "absolute left-1/2 transform -translate-x-1/2", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
38856
- /* @__PURE__ */ jsx("h1", { className: "text-3xl font-semibold text-gray-900", children: "System Health" }),
39261
+ /* @__PURE__ */ jsx("div", { className: "absolute left-1/2 transform -translate-x-1/2 max-w-[calc(100%-200px)]", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
39262
+ /* @__PURE__ */ jsx("h1", { className: "text-lg md:text-xl lg:text-2xl xl:text-3xl font-semibold text-gray-900 truncate", children: "System Health" }),
38857
39263
  /* @__PURE__ */ jsxs("div", { className: "relative flex h-2.5 w-2.5", children: [
38858
39264
  /* @__PURE__ */ jsx("span", { className: "animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75" }),
38859
39265
  /* @__PURE__ */ jsx("span", { className: "relative inline-flex rounded-full h-2.5 w-2.5 bg-emerald-500" })
@@ -38882,15 +39288,15 @@ var WorkspaceHealthView = ({
38882
39288
  )
38883
39289
  ] }),
38884
39290
  /* @__PURE__ */ jsx("div", { className: "w-full h-8" })
38885
- ] }),
38886
- /* @__PURE__ */ jsx("div", { className: "mt-3 bg-blue-50 px-3 py-2 rounded-lg", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-4", children: [
38887
- /* @__PURE__ */ jsx("div", { className: "text-lg font-medium text-blue-600", children: /* @__PURE__ */ jsx(LiveTimer, {}) }),
38888
- /* @__PURE__ */ jsx("div", { className: "w-px h-4 bg-blue-300" }),
38889
- /* @__PURE__ */ jsx("span", { className: "text-base font-medium text-blue-600", children: formatDate(operationalDate) }),
38890
- /* @__PURE__ */ jsx("div", { className: "w-px h-4 bg-blue-300" }),
38891
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
39291
+ ] }) }),
39292
+ /* @__PURE__ */ jsx("div", { className: "mt-2 sm:mt-3 bg-blue-50 px-2 sm:px-3 py-1.5 sm:py-2 rounded-lg", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-center gap-2 sm:gap-4", children: [
39293
+ /* @__PURE__ */ jsx("div", { className: "text-sm sm:text-base md:text-lg font-medium text-blue-600", children: /* @__PURE__ */ jsx(LiveTimer, {}) }),
39294
+ /* @__PURE__ */ jsx("div", { className: "hidden sm:block w-px h-4 bg-blue-300" }),
39295
+ /* @__PURE__ */ jsx("span", { className: "text-xs sm:text-sm md:text-base font-medium text-blue-600", children: formatDate(operationalDate) }),
39296
+ /* @__PURE__ */ jsx("div", { className: "hidden sm:block w-px h-4 bg-blue-300" }),
39297
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 sm:gap-2", children: [
38892
39298
  /* @__PURE__ */ jsx("div", { className: "text-blue-600", children: getShiftIcon(shiftType) }),
38893
- /* @__PURE__ */ jsxs("span", { className: "text-base font-medium text-blue-600", children: [
39299
+ /* @__PURE__ */ jsxs("span", { className: "text-xs sm:text-sm md:text-base font-medium text-blue-600", children: [
38894
39300
  shiftType,
38895
39301
  " Shift"
38896
39302
  ] })
@@ -38907,7 +39313,7 @@ var WorkspaceHealthView = ({
38907
39313
  className: "grid grid-cols-2 sm:grid-cols-2 md:grid-cols-5 gap-2 sm:gap-3 lg:gap-4",
38908
39314
  children: [
38909
39315
  /* @__PURE__ */ jsxs(Card2, { className: "col-span-2 sm:col-span-2 md:col-span-2 bg-white", children: [
38910
- /* @__PURE__ */ jsx(CardHeader2, { className: "pb-3", children: /* @__PURE__ */ jsx(CardTitle2, { className: "text-sm font-medium text-gray-500 dark:text-gray-400", children: "Overall System Uptime Today" }) }),
39316
+ /* @__PURE__ */ jsx(CardHeader2, { className: "pb-3", children: /* @__PURE__ */ jsx(CardTitle2, { className: "text-sm font-medium text-gray-500 dark:text-gray-400", children: "System Availability" }) }),
38911
39317
  /* @__PURE__ */ jsxs(CardContent2, { children: [
38912
39318
  /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-2", children: [
38913
39319
  /* @__PURE__ */ jsxs("span", { className: clsx("text-3xl font-bold", getUptimeColor(summary.uptimePercentage)), children: [
@@ -38916,13 +39322,7 @@ var WorkspaceHealthView = ({
38916
39322
  ] }),
38917
39323
  summary.uptimePercentage >= 97 ? /* @__PURE__ */ jsx(TrendingUp, { className: "h-5 w-5 text-green-500" }) : summary.uptimePercentage >= 90 ? /* @__PURE__ */ jsx(Activity, { className: "h-5 w-5 text-yellow-500" }) : /* @__PURE__ */ jsx(TrendingDown, { className: "h-5 w-5 text-red-500" })
38918
39324
  ] }),
38919
- /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400 mt-1", children: "Average uptime across all workspaces" }),
38920
- /* @__PURE__ */ jsxs("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: [
38921
- summary.healthyWorkspaces,
38922
- " of ",
38923
- summary.totalWorkspaces,
38924
- " workspaces online"
38925
- ] })
39325
+ /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400 mt-1", children: "Overall system uptime today" })
38926
39326
  ] })
38927
39327
  ] }),
38928
39328
  /* @__PURE__ */ jsxs(Card2, { className: "bg-white", children: [