@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.js CHANGED
@@ -3581,6 +3581,20 @@ function parseS3Uri(s3Uri, sopCategories) {
3581
3581
  severity = "low";
3582
3582
  description = "Cycle Completion";
3583
3583
  break;
3584
+ case "running_cycle":
3585
+ case "active_cycle":
3586
+ case "production_cycle":
3587
+ type = "running_cycle";
3588
+ severity = "low";
3589
+ description = "Active Production Cycle";
3590
+ break;
3591
+ case "setup_state":
3592
+ case "machine_setup":
3593
+ case "line_setup":
3594
+ type = "setup_state";
3595
+ severity = "medium";
3596
+ description = "Machine Setup Activity";
3597
+ break;
3584
3598
  case "medium_bottleneck":
3585
3599
  severity = "medium";
3586
3600
  description = "Medium Bottleneck Identified";
@@ -3611,6 +3625,14 @@ function parseS3Uri(s3Uri, sopCategories) {
3611
3625
  type = "cycle_completion";
3612
3626
  severity = "low";
3613
3627
  description = "Cycle Completion";
3628
+ } else if (normalizedViolationType.includes("running") && normalizedViolationType.includes("cycle")) {
3629
+ type = "running_cycle";
3630
+ severity = "low";
3631
+ description = "Active Production Cycle";
3632
+ } else if (normalizedViolationType.includes("setup") || normalizedViolationType.includes("machine") && normalizedViolationType.includes("setup")) {
3633
+ type = "setup_state";
3634
+ severity = "medium";
3635
+ description = "Machine Setup Activity";
3614
3636
  } else {
3615
3637
  description = `Clip type: ${violationType.replace(/_/g, " ")}`;
3616
3638
  console.log(`Detected unknown violation type: ${violationType} in URI: ${s3Uri}`);
@@ -21803,11 +21825,13 @@ var VideoCard = React19__namespace.default.memo(({
21803
21825
  return /* @__PURE__ */ jsxRuntime.jsxs(
21804
21826
  "div",
21805
21827
  {
21806
- 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}`,
21828
+ 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}`,
21807
21829
  style: { width: "100%", height: "100%" },
21808
21830
  onClick: handleClick,
21809
21831
  onMouseEnter,
21810
21832
  onMouseLeave,
21833
+ onTouchStart: (e) => e.currentTarget.classList.add("touch-active"),
21834
+ onTouchEnd: (e) => e.currentTarget.classList.remove("touch-active"),
21811
21835
  title: displayName,
21812
21836
  tabIndex: 0,
21813
21837
  "aria-label": `Open workspace ${displayName}`,
@@ -22902,9 +22926,11 @@ var BreakNotificationPopup = ({
22902
22926
  "button",
22903
22927
  {
22904
22928
  onClick: handleDismiss,
22905
- className: "ml-2 text-gray-400 hover:text-gray-600 transition-colors p-1 rounded-full hover:bg-gray-100",
22929
+ onTouchStart: () => {
22930
+ },
22931
+ 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",
22906
22932
  "aria-label": "Dismiss notification",
22907
- children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "w-3 h-3" })
22933
+ children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "w-4 h-4 sm:w-3 sm:h-3" })
22908
22934
  }
22909
22935
  )
22910
22936
  ] })
@@ -26159,7 +26185,7 @@ var SelectTrigger = React19__namespace.forwardRef(({ className, children, ...pro
26159
26185
  {
26160
26186
  ref,
26161
26187
  className: cn(
26162
- "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",
26188
+ "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",
26163
26189
  className
26164
26190
  ),
26165
26191
  ...props,
@@ -27748,6 +27774,10 @@ var BottlenecksContent = ({
27748
27774
  return "Worst Cycle Time";
27749
27775
  case "cycle_completion":
27750
27776
  return "Cycle Completion";
27777
+ case "running_cycle":
27778
+ return "Running Cycle";
27779
+ case "setup_state":
27780
+ return "Setup State";
27751
27781
  case "bottleneck":
27752
27782
  default:
27753
27783
  return "";
@@ -27762,6 +27792,8 @@ var BottlenecksContent = ({
27762
27792
  blue: { text: "text-blue-600", bg: "bg-blue-600", dot: "bg-blue-600" },
27763
27793
  orange: { text: "text-orange-600", bg: "bg-orange-600", dot: "bg-orange-600" },
27764
27794
  yellow: { text: "text-yellow-600", bg: "bg-yellow-600", dot: "bg-yellow-600" },
27795
+ teal: { text: "text-teal-600", bg: "bg-teal-600", dot: "bg-teal-600" },
27796
+ amber: { text: "text-amber-600", bg: "bg-amber-600", dot: "bg-amber-600" },
27765
27797
  gray: { text: "text-gray-600", bg: "bg-gray-600", dot: "bg-gray-600" }
27766
27798
  };
27767
27799
  return colorMap[color2] || colorMap.gray;
@@ -28282,7 +28314,7 @@ var WorkspaceGridItem = React19__namespace.default.memo(({
28282
28314
  "button",
28283
28315
  {
28284
28316
  onClick: handleClick,
28285
- className: `${styles2} ${colorClass} ${isBottleneck ? "ring-2 ring-red-500/70" : ""} ${isVeryLowEfficiency ? "ring-2 ring-red-500/50" : ""} ${isInactive ? "bg-gray-200" : ""} shadow-lg`,
28317
+ 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`,
28286
28318
  "aria-label": isInactive ? `Inactive workspace ${workspaceNumber}` : `View details for workspace ${workspaceNumber}`,
28287
28319
  title: isInactive ? `Inactive: ${getWorkspaceDisplayName(data.workspace_name, data.line_id)}` : getWorkspaceDisplayName(data.workspace_name, data.line_id),
28288
28320
  children: /* @__PURE__ */ jsxRuntime.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 })
@@ -28552,8 +28584,8 @@ var KPICard = ({
28552
28584
  },
28553
28585
  // Width for src matching - better mobile width, flexible on small screens
28554
28586
  !className?.includes("w-") && "w-[110px] sm:w-[180px] md:w-[220px]",
28555
- // Interactive styling if onClick is provided
28556
- onClick && "cursor-pointer hover:scale-[1.01] active:scale-[0.99]",
28587
+ // Interactive styling if onClick is provided - better touch targets
28588
+ onClick && "cursor-pointer hover:scale-[1.01] active:scale-[0.99] touch-manipulation min-h-[44px] min-w-[44px]",
28557
28589
  // Loading state
28558
28590
  isLoading && "animate-pulse",
28559
28591
  // User-provided classes
@@ -28564,6 +28596,8 @@ var KPICard = ({
28564
28596
  {
28565
28597
  className: cardClasses,
28566
28598
  onClick,
28599
+ onTouchStart: onClick ? () => {
28600
+ } : void 0,
28567
28601
  role: onClick ? "button" : void 0,
28568
28602
  tabIndex: onClick ? 0 : void 0,
28569
28603
  onKeyDown: onClick ? (e) => e.key === "Enter" && onClick() : void 0,
@@ -28982,10 +29016,7 @@ var WorkspaceHealthCard = ({
28982
29016
  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Activity, { className: "h-3.5 w-3.5 text-gray-400" }),
28983
29017
  /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm text-gray-600 dark:text-gray-400 whitespace-nowrap", children: [
28984
29018
  "Uptime today: ",
28985
- /* @__PURE__ */ jsxRuntime.jsxs("span", { className: clsx(
28986
- "font-medium",
28987
- 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"
28988
- ), children: [
29019
+ /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-medium", children: [
28989
29020
  workspace.uptimePercentage.toFixed(1),
28990
29021
  "%"
28991
29022
  ] })
@@ -29067,10 +29098,7 @@ var CompactWorkspaceHealthCard = ({
29067
29098
  ] }),
29068
29099
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
29069
29100
  workspace.uptimePercentage !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
29070
- /* @__PURE__ */ jsxRuntime.jsxs("p", { className: clsx(
29071
- "text-xs font-medium",
29072
- 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"
29073
- ), children: [
29101
+ /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-xs font-medium text-gray-600 dark:text-gray-400", children: [
29074
29102
  workspace.uptimePercentage.toFixed(1),
29075
29103
  "%"
29076
29104
  ] }),
@@ -29301,27 +29329,27 @@ var DashboardHeader = React19.memo(({ lineTitle, className = "", headerControls
29301
29329
  return /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntime.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" }) });
29302
29330
  }
29303
29331
  };
29304
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex flex-row items-center justify-between w-full ${className}`, children: [
29332
+ return /* @__PURE__ */ jsxRuntime.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: [
29305
29333
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
29306
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 sm:gap-2 md:gap-3", children: [
29307
- /* @__PURE__ */ jsxRuntime.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 }),
29308
- /* @__PURE__ */ jsxRuntime.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" })
29334
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5 sm:gap-2 md:gap-3", children: [
29335
+ /* @__PURE__ */ jsxRuntime.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 }),
29336
+ /* @__PURE__ */ jsxRuntime.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" })
29309
29337
  ] }),
29310
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-2 inline-flex items-center gap-2 sm:gap-3", children: [
29311
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-xs sm:text-sm font-medium text-gray-600", children: [
29338
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-1 sm:mt-2 inline-flex flex-wrap items-center gap-2 sm:gap-3", children: [
29339
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-[10px] sm:text-xs md:text-sm font-medium text-gray-600 whitespace-nowrap", children: [
29312
29340
  /* @__PURE__ */ jsxRuntime.jsx(ISTTimer2, {}),
29313
29341
  " IST"
29314
29342
  ] }),
29315
29343
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "inline-flex items-center gap-1", children: [
29316
29344
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-gray-600", children: getShiftIcon() }),
29317
- /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs sm:text-sm font-medium text-gray-600", children: [
29345
+ /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[10px] sm:text-xs md:text-sm font-medium text-gray-600 whitespace-nowrap", children: [
29318
29346
  getShiftName(),
29319
29347
  " Shift"
29320
29348
  ] })
29321
29349
  ] })
29322
29350
  ] })
29323
29351
  ] }),
29324
- headerControls && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-4", children: headerControls })
29352
+ headerControls && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2 sm:gap-3 md:gap-4 w-full sm:w-auto justify-end", children: headerControls })
29325
29353
  ] });
29326
29354
  });
29327
29355
  DashboardHeader.displayName = "DashboardHeader";
@@ -29633,27 +29661,27 @@ var PageHeader = ({
29633
29661
  className
29634
29662
  ),
29635
29663
  children: [
29636
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "h-16 mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between", children: [
29637
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 min-w-0", children: [
29664
+ /* @__PURE__ */ jsxRuntime.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: [
29665
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 sm:gap-3 min-w-0 flex-1", children: [
29638
29666
  onMobileMenuOpen && /* @__PURE__ */ jsxRuntime.jsx(HamburgerButton, { onClick: onMobileMenuOpen }),
29639
- headerLogo && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0 mr-2 md:hidden", children: headerLogo }),
29667
+ headerLogo && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0 mr-1 sm:mr-2 md:hidden", children: headerLogo }),
29640
29668
  " ",
29641
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col min-w-0", children: [
29669
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col min-w-0 flex-1", children: [
29642
29670
  breadcrumbs && breadcrumbs.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(Breadcrumbs, { items: breadcrumbs }),
29643
- /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-lg md:text-xl font-semibold text-gray-900 dark:text-white truncate", title, children: title })
29671
+ /* @__PURE__ */ jsxRuntime.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 })
29644
29672
  ] })
29645
29673
  ] }),
29646
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 md:gap-4", children: [
29647
- actions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden md:flex items-center gap-2", children: actions }),
29648
- /* @__PURE__ */ jsxRuntime.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: [
29649
- darkMode ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Sun, { className: "h-5 w-5" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Moon, { className: "h-5 w-5" }),
29674
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 sm:gap-3 md:gap-4 flex-shrink-0", children: [
29675
+ actions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden sm:flex items-center gap-2", children: actions }),
29676
+ /* @__PURE__ */ jsxRuntime.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: [
29677
+ darkMode ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Sun, { className: "h-4 w-4 sm:h-5 sm:w-5" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Moon, { className: "h-4 w-4 sm:h-5 sm:w-5" }),
29650
29678
  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Toggle dark mode" })
29651
29679
  ] }),
29652
- showDateTime && /* @__PURE__ */ jsxRuntime.jsx(DateTimeDisplay, { className: "hidden lg:flex" }),
29680
+ showDateTime && /* @__PURE__ */ jsxRuntime.jsx(DateTimeDisplay, { className: "hidden sm:flex text-xs sm:text-sm" }),
29653
29681
  userProfileConfig && /* @__PURE__ */ jsxRuntime.jsx(UserProfileDropdown, { config: userProfileConfig })
29654
29682
  ] })
29655
29683
  ] }),
29656
- actions && /* @__PURE__ */ jsxRuntime.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 })
29684
+ actions && /* @__PURE__ */ jsxRuntime.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 })
29657
29685
  ]
29658
29686
  }
29659
29687
  );
@@ -29677,9 +29705,9 @@ var SideNavBar = React19.memo(({
29677
29705
  const pathname = propPathname || router$1.pathname;
29678
29706
  const getButtonClasses = React19.useCallback((path) => {
29679
29707
  const isActive = pathname === path || pathname.startsWith(path + "/");
29680
- return `w-full flex flex-col items-center justify-center py-3 px-1 rounded-lg relative group
29681
- ${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"}
29682
- transition-all duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2`;
29708
+ 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
29709
+ ${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"}
29710
+ 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]`;
29683
29711
  }, [pathname]);
29684
29712
  const handleHomeClick = React19.useCallback(() => {
29685
29713
  navigate("/", {
@@ -29843,7 +29871,7 @@ var SideNavBar = React19.memo(({
29843
29871
  "aria-selected": pathname === "/" || pathname.startsWith("//"),
29844
29872
  children: [
29845
29873
  /* @__PURE__ */ jsxRuntime.jsx(outline.HomeIcon, { className: "w-5 h-5 mb-1" }),
29846
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-medium leading-tight", children: "Home" })
29874
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs sm:text-[10px] font-medium leading-tight", children: "Home" })
29847
29875
  ]
29848
29876
  }
29849
29877
  ) }),
@@ -29859,7 +29887,7 @@ var SideNavBar = React19.memo(({
29859
29887
  "aria-selected": pathname === "/leaderboard" || pathname.startsWith("/leaderboard/"),
29860
29888
  children: [
29861
29889
  /* @__PURE__ */ jsxRuntime.jsx(outline.TrophyIcon, { className: "w-5 h-5 mb-1" }),
29862
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-medium leading-tight", children: "Leaders" })
29890
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs sm:text-[10px] font-medium leading-tight", children: "Leaders" })
29863
29891
  ]
29864
29892
  }
29865
29893
  ),
@@ -29874,7 +29902,7 @@ var SideNavBar = React19.memo(({
29874
29902
  "aria-selected": pathname === "/kpis" || pathname.startsWith("/kpis/"),
29875
29903
  children: [
29876
29904
  /* @__PURE__ */ jsxRuntime.jsx(outline.ChartBarIcon, { className: "w-5 h-5 mb-1" }),
29877
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-medium leading-tight", children: "Lines" })
29905
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs sm:text-[10px] font-medium leading-tight", children: "Lines" })
29878
29906
  ]
29879
29907
  }
29880
29908
  ),
@@ -29889,7 +29917,7 @@ var SideNavBar = React19.memo(({
29889
29917
  "aria-selected": pathname === "/targets" || pathname.startsWith("/targets/"),
29890
29918
  children: [
29891
29919
  /* @__PURE__ */ jsxRuntime.jsx(outline.AdjustmentsHorizontalIcon, { className: "w-5 h-5 mb-1" }),
29892
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-medium leading-tight", children: "Targets" })
29920
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs sm:text-[10px] font-medium leading-tight", children: "Targets" })
29893
29921
  ]
29894
29922
  }
29895
29923
  ),
@@ -29904,7 +29932,7 @@ var SideNavBar = React19.memo(({
29904
29932
  "aria-selected": pathname === "/shifts" || pathname.startsWith("/shifts/"),
29905
29933
  children: [
29906
29934
  /* @__PURE__ */ jsxRuntime.jsx(outline.ClockIcon, { className: "w-5 h-5 mb-1" }),
29907
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-medium leading-tight", children: "Shifts" })
29935
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs sm:text-[10px] font-medium leading-tight", children: "Shifts" })
29908
29936
  ]
29909
29937
  }
29910
29938
  ),
@@ -29919,7 +29947,7 @@ var SideNavBar = React19.memo(({
29919
29947
  "aria-selected": pathname === "/skus" || pathname.startsWith("/skus/"),
29920
29948
  children: [
29921
29949
  /* @__PURE__ */ jsxRuntime.jsx(outline.CubeIcon, { className: "w-5 h-5 mb-1" }),
29922
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-medium leading-tight", children: "SKUs" })
29950
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs sm:text-[10px] font-medium leading-tight", children: "SKUs" })
29923
29951
  ]
29924
29952
  }
29925
29953
  ),
@@ -29934,7 +29962,7 @@ var SideNavBar = React19.memo(({
29934
29962
  "aria-selected": pathname === "/ai-agent" || pathname.startsWith("/ai-agent/"),
29935
29963
  children: [
29936
29964
  /* @__PURE__ */ jsxRuntime.jsx(outline.SparklesIcon, { className: "w-5 h-5 mb-1" }),
29937
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-medium leading-tight", children: "Axel" })
29965
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs sm:text-[10px] font-medium leading-tight", children: "Axel" })
29938
29966
  ]
29939
29967
  }
29940
29968
  ),
@@ -29949,7 +29977,7 @@ var SideNavBar = React19.memo(({
29949
29977
  "aria-selected": pathname === "/help" || pathname.startsWith("/help/"),
29950
29978
  children: [
29951
29979
  /* @__PURE__ */ jsxRuntime.jsx(outline.QuestionMarkCircleIcon, { className: "w-5 h-5 mb-1" }),
29952
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-medium leading-tight", children: "Help" })
29980
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs sm:text-[10px] font-medium leading-tight", children: "Help" })
29953
29981
  ]
29954
29982
  }
29955
29983
  ),
@@ -29964,7 +29992,7 @@ var SideNavBar = React19.memo(({
29964
29992
  "aria-selected": pathname === "/health" || pathname.startsWith("/health/"),
29965
29993
  children: [
29966
29994
  /* @__PURE__ */ jsxRuntime.jsx(outline.HeartIcon, { className: "w-5 h-5 mb-1" }),
29967
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-medium leading-tight", children: "Health" })
29995
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs sm:text-[10px] font-medium leading-tight", children: "Health" })
29968
29996
  ]
29969
29997
  }
29970
29998
  )
@@ -29981,7 +30009,7 @@ var SideNavBar = React19.memo(({
29981
30009
  "aria-selected": pathname === "/profile" || pathname.startsWith("/profile/"),
29982
30010
  children: [
29983
30011
  /* @__PURE__ */ jsxRuntime.jsx(outline.UserCircleIcon, { className: "w-5 h-5 mb-1" }),
29984
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-medium leading-tight", children: "Profile" })
30012
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs sm:text-[10px] font-medium leading-tight", children: "Profile" })
29985
30013
  ]
29986
30014
  }
29987
30015
  ) })
@@ -30311,29 +30339,32 @@ var Header = ({
30311
30339
  const handleLogout = async () => {
30312
30340
  await signOut();
30313
30341
  };
30314
- return /* @__PURE__ */ jsxRuntime.jsx("header", { className: `fixed top-0 left-0 right-0 h-16 bg-white border-b border-gray-200 z-50 ${className}`, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "h-full max-w-[1920px] mx-auto px-6 flex items-center justify-between", children: [
30315
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-6", children: /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-xl font-semibold text-gray-900", children: getPageTitle() }) }),
30316
- user && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
30342
+ return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "h-full max-w-[1920px] mx-auto px-3 sm:px-4 md:px-6 flex items-center justify-between", children: [
30343
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2 sm:gap-4 md:gap-6 min-w-0", children: /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-sm sm:text-base md:text-lg lg:text-xl font-semibold text-gray-900 truncate", children: getPageTitle() }) }),
30344
+ user && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex-shrink-0", children: [
30317
30345
  /* @__PURE__ */ jsxRuntime.jsxs(
30318
30346
  "button",
30319
30347
  {
30320
30348
  onClick: () => setShowDropdown(!showDropdown),
30321
- className: "flex items-center gap-2 px-3 py-2 rounded-md hover:bg-gray-100 transition-colors",
30349
+ 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",
30322
30350
  children: [
30323
- /* @__PURE__ */ jsxRuntime.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" }),
30324
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-gray-700", children: user.email }),
30325
- /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-4 h-4 text-gray-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) })
30351
+ /* @__PURE__ */ jsxRuntime.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" }),
30352
+ /* @__PURE__ */ jsxRuntime.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 }),
30353
+ /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) })
30326
30354
  ]
30327
30355
  }
30328
30356
  ),
30329
- showDropdown && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-50", children: /* @__PURE__ */ jsxRuntime.jsx(
30330
- "button",
30331
- {
30332
- onClick: handleLogout,
30333
- className: "block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100",
30334
- children: "Sign out"
30335
- }
30336
- ) })
30357
+ showDropdown && /* @__PURE__ */ jsxRuntime.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: [
30358
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "block sm:hidden px-4 py-2 text-xs text-gray-500 border-b border-gray-100", children: user.email }),
30359
+ /* @__PURE__ */ jsxRuntime.jsx(
30360
+ "button",
30361
+ {
30362
+ onClick: handleLogout,
30363
+ className: "block w-full text-left px-4 py-2 text-xs sm:text-sm text-gray-700 hover:bg-gray-100",
30364
+ children: "Sign out"
30365
+ }
30366
+ )
30367
+ ] })
30337
30368
  ] })
30338
30369
  ] }) });
30339
30370
  };
@@ -30684,7 +30715,7 @@ var ThreadSidebar = ({
30684
30715
  ] });
30685
30716
  };
30686
30717
  var axelProfilePng = "/axel-profile.png";
30687
- var ProfilePicture = React19__namespace.default.memo(({ alt = "Axel", className = "w-12 h-12" }) => {
30718
+ var ProfilePicture = React19__namespace.default.memo(({ alt = "Axel", className = "w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12" }) => {
30688
30719
  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${className} rounded-xl overflow-hidden shadow-sm`, children: /* @__PURE__ */ jsxRuntime.jsx(
30689
30720
  "img",
30690
30721
  {
@@ -32290,54 +32321,105 @@ var AIAgentView = () => {
32290
32321
  }
32291
32322
  `
32292
32323
  } }),
32293
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex-1 flex flex-col h-screen transition-all duration-300 ${isSidebarOpen ? "mr-80" : "mr-0"}`, children: [
32294
- /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between relative", children: [
32295
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-0", children: /* @__PURE__ */ jsxRuntime.jsx(
32296
- BackButtonMinimal,
32297
- {
32298
- onClick: () => navigate("/"),
32299
- text: "Back",
32300
- size: "default",
32301
- "aria-label": "Navigate back to dashboard"
32302
- }
32303
- ) }),
32304
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 text-center mx-auto", children: [
32305
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-3 mb-1", children: [
32306
- /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-3xl font-semibold text-gray-900", children: "Chat with Axel" }),
32307
- /* @__PURE__ */ jsxRuntime.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" })
32324
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex-1 flex flex-col h-screen transition-all duration-300 ${isSidebarOpen ? "lg:mr-80 mr-0" : "mr-0"}`, children: [
32325
+ /* @__PURE__ */ jsxRuntime.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: [
32326
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sm:hidden", children: [
32327
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-2", children: [
32328
+ /* @__PURE__ */ jsxRuntime.jsx(
32329
+ BackButtonMinimal,
32330
+ {
32331
+ onClick: () => navigate("/"),
32332
+ text: "Back",
32333
+ size: "sm",
32334
+ "aria-label": "Navigate back to dashboard"
32335
+ }
32336
+ ),
32337
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
32338
+ /* @__PURE__ */ jsxRuntime.jsxs(
32339
+ "button",
32340
+ {
32341
+ onClick: handleNewThread,
32342
+ 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",
32343
+ children: [
32344
+ /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RefreshCw, { className: "w-3.5 h-3.5" }),
32345
+ /* @__PURE__ */ jsxRuntime.jsx("span", { children: "New" })
32346
+ ]
32347
+ }
32348
+ ),
32349
+ /* @__PURE__ */ jsxRuntime.jsx(
32350
+ "button",
32351
+ {
32352
+ onClick: () => setIsSidebarOpen(!isSidebarOpen),
32353
+ 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",
32354
+ "aria-label": "Toggle chat history",
32355
+ children: isSidebarOpen ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
32356
+ /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "w-3.5 h-3.5" }),
32357
+ /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Hide" })
32358
+ ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
32359
+ /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Menu, { className: "w-3.5 h-3.5" }),
32360
+ /* @__PURE__ */ jsxRuntime.jsx("span", { children: "History" }),
32361
+ newChatCount > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-1 bg-red-500 text-white text-xs rounded-full px-1.5 py-0.5 font-medium", children: newChatCount })
32362
+ ] })
32363
+ }
32364
+ )
32365
+ ] })
32308
32366
  ] }),
32309
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-gray-500", children: /* @__PURE__ */ jsxRuntime.jsx(ISTTimer_default, {}) }) })
32367
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
32368
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-2 mb-0.5", children: [
32369
+ /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-base font-semibold text-gray-900", children: "Chat with Axel" }),
32370
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-1 w-1 rounded-full bg-green-500 animate-pulse ring-1 ring-green-500/30 ring-offset-1" })
32371
+ ] }),
32372
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-gray-500", children: /* @__PURE__ */ jsxRuntime.jsx(ISTTimer_default, {}) }) })
32373
+ ] })
32310
32374
  ] }),
32311
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute right-0 flex items-center gap-2", children: [
32312
- /* @__PURE__ */ jsxRuntime.jsxs(
32313
- "button",
32314
- {
32315
- onClick: handleNewThread,
32316
- 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",
32317
- children: [
32318
- /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RefreshCw, { className: "w-4 h-4" }),
32319
- "New Chat"
32320
- ]
32321
- }
32322
- ),
32323
- /* @__PURE__ */ jsxRuntime.jsx(
32324
- "button",
32375
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "hidden sm:flex items-center justify-between relative", children: [
32376
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-0", children: /* @__PURE__ */ jsxRuntime.jsx(
32377
+ BackButtonMinimal,
32325
32378
  {
32326
- onClick: () => setIsSidebarOpen(!isSidebarOpen),
32327
- 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",
32328
- "aria-label": "Toggle chat history",
32329
- children: isSidebarOpen ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
32330
- /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "w-4 h-4" }),
32331
- /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Hide History" })
32332
- ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
32333
- /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Menu, { className: "w-4 h-4" }),
32334
- /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Chat History" }),
32335
- newChatCount > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-1 bg-red-500 text-white text-xs rounded-full px-2 py-0.5 font-medium", children: newChatCount })
32336
- ] })
32379
+ onClick: () => navigate("/"),
32380
+ text: "Back",
32381
+ size: "default",
32382
+ "aria-label": "Navigate back to dashboard"
32337
32383
  }
32338
- )
32384
+ ) }),
32385
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 text-center mx-auto", children: [
32386
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-3 mb-1", children: [
32387
+ /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-xl md:text-2xl lg:text-3xl font-semibold text-gray-900", children: "Chat with Axel" }),
32388
+ /* @__PURE__ */ jsxRuntime.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" })
32389
+ ] }),
32390
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-gray-500", children: /* @__PURE__ */ jsxRuntime.jsx(ISTTimer_default, {}) }) })
32391
+ ] }),
32392
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute right-0 flex items-center gap-2", children: [
32393
+ /* @__PURE__ */ jsxRuntime.jsxs(
32394
+ "button",
32395
+ {
32396
+ onClick: handleNewThread,
32397
+ 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",
32398
+ children: [
32399
+ /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RefreshCw, { className: "w-4 h-4" }),
32400
+ /* @__PURE__ */ jsxRuntime.jsx("span", { children: "New Chat" })
32401
+ ]
32402
+ }
32403
+ ),
32404
+ /* @__PURE__ */ jsxRuntime.jsx(
32405
+ "button",
32406
+ {
32407
+ onClick: () => setIsSidebarOpen(!isSidebarOpen),
32408
+ 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",
32409
+ "aria-label": "Toggle chat history",
32410
+ children: isSidebarOpen ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
32411
+ /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "w-4 h-4" }),
32412
+ /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Hide History" })
32413
+ ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
32414
+ /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Menu, { className: "w-4 h-4" }),
32415
+ /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Chat History" }),
32416
+ newChatCount > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-1 bg-red-500 text-white text-xs rounded-full px-2 py-0.5 font-medium", children: newChatCount })
32417
+ ] })
32418
+ }
32419
+ )
32420
+ ] })
32339
32421
  ] })
32340
- ] }) }),
32422
+ ] }),
32341
32423
  /* @__PURE__ */ jsxRuntime.jsx(
32342
32424
  "main",
32343
32425
  {
@@ -32345,16 +32427,16 @@ var AIAgentView = () => {
32345
32427
  className: `flex-1 bg-gray-50/50 min-h-0 ${displayMessages.length === 0 && !isTransitioning ? "flex items-center justify-center" : "overflow-y-auto"}`,
32346
32428
  children: !activeThreadId && displayMessages.length === 0 && !isTransitioning ? (
32347
32429
  /* Centered welcome and input for new chat */
32348
- /* @__PURE__ */ jsxRuntime.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: [
32430
+ /* @__PURE__ */ jsxRuntime.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: [
32349
32431
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
32350
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center mb-8", children: /* @__PURE__ */ jsxRuntime.jsx(ProfilePicture, { alt: "Axel - AI Manufacturing Expert", className: "w-24 h-24" }) }),
32351
- /* @__PURE__ */ jsxRuntime.jsxs("h2", { className: "text-3xl font-semibold text-gray-900", children: [
32432
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center mb-4 sm:mb-6 md:mb-8", children: /* @__PURE__ */ jsxRuntime.jsx(ProfilePicture, { alt: "Axel - AI Manufacturing Expert", className: "w-16 h-16 sm:w-20 sm:h-20 md:w-24 md:h-24" }) }),
32433
+ /* @__PURE__ */ jsxRuntime.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: [
32352
32434
  typedText,
32353
32435
  typedText.length < "Hi, I'm Axel - Your AI Supervisor".length && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "animate-pulse", children: "|" })
32354
32436
  ] })
32355
32437
  ] }),
32356
32438
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full max-w-2xl", children: /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: handleSubmit, children: [
32357
- /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "flex items-end gap-2 p-3", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 relative", children: [
32439
+ /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "flex items-end gap-2 p-3 sm:p-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 relative", children: [
32358
32440
  /* @__PURE__ */ jsxRuntime.jsx(
32359
32441
  "textarea",
32360
32442
  {
@@ -32385,24 +32467,24 @@ var AIAgentView = () => {
32385
32467
  });
32386
32468
  },
32387
32469
  placeholder: "Ask me anything about your shop-floor",
32388
- 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",
32470
+ 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",
32389
32471
  rows: 1,
32390
- style: { minHeight: "24px", maxHeight: "120px" }
32472
+ style: { minHeight: "40px", maxHeight: "120px" }
32391
32473
  }
32392
32474
  ),
32393
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute right-2 bottom-2 flex items-center gap-2", children: /* @__PURE__ */ jsxRuntime.jsx(
32475
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute right-2 sm:right-3 bottom-2 sm:bottom-2 flex items-center gap-2", children: /* @__PURE__ */ jsxRuntime.jsx(
32394
32476
  "button",
32395
32477
  {
32396
32478
  type: "submit",
32397
32479
  disabled: !inputValue.trim() || isCurrentThreadLoading,
32398
- 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",
32480
+ 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",
32399
32481
  children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Send, { className: "w-4 h-4" })
32400
32482
  }
32401
32483
  ) })
32402
32484
  ] }) }) }),
32403
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center mt-2 text-xs text-gray-400", children: [
32404
- /* @__PURE__ */ jsxRuntime.jsx("span", { children: isCurrentThreadLoading ? "You can type your next message while Axel responds" : "Press Enter to send \u2022 Shift+Enter for new line" }),
32405
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 ml-4", children: [
32485
+ /* @__PURE__ */ jsxRuntime.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: [
32486
+ /* @__PURE__ */ jsxRuntime.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" }),
32487
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
32406
32488
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: `w-1.5 h-1.5 rounded-full ${isCurrentThreadLoading ? "bg-orange-500" : "bg-green-500"}` }),
32407
32489
  /* @__PURE__ */ jsxRuntime.jsx("span", { children: isCurrentThreadLoading ? "Responding..." : "Connected" })
32408
32490
  ] })
@@ -32411,17 +32493,17 @@ var AIAgentView = () => {
32411
32493
  ] })
32412
32494
  ) : isTransitioning ? (
32413
32495
  /* Transition state - show user message first, then thinking */
32414
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-4xl mx-auto px-4 sm:px-6 py-6 pb-32", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6", children: [
32496
+ /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "space-y-4 sm:space-y-6", children: [
32415
32497
  displayMessages.map((message, index) => /* @__PURE__ */ jsxRuntime.jsxs(
32416
32498
  "div",
32417
32499
  {
32418
- className: `flex gap-4 ${message.role === "user" ? "justify-end" : "justify-start"}`,
32500
+ className: `flex gap-2 sm:gap-3 md:gap-4 ${message.role === "user" ? "justify-end" : "justify-start"}`,
32419
32501
  children: [
32420
32502
  message.role === "assistant" && /* @__PURE__ */ jsxRuntime.jsx(ProfilePicture, {}),
32421
32503
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: `max-w-none w-full group ${message.role === "user" ? "order-1" : ""}`, children: /* @__PURE__ */ jsxRuntime.jsx(
32422
32504
  "div",
32423
32505
  {
32424
- 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"}`,
32506
+ 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"}`,
32425
32507
  children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${message.role === "user" ? "text-white" : "text-gray-800"}`, children: [
32426
32508
  message.role === "assistant" ? message.id === -1 ? /* @__PURE__ */ jsxRuntime.jsx(
32427
32509
  "div",
@@ -32445,18 +32527,18 @@ var AIAgentView = () => {
32445
32527
  ] }) })
32446
32528
  ) : (
32447
32529
  /* Regular chat view with messages */
32448
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-4xl mx-auto px-4 sm:px-6 py-6 pb-32", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6", children: [
32530
+ /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "space-y-4 sm:space-y-6", children: [
32449
32531
  displayMessages.map((message, index) => /* @__PURE__ */ jsxRuntime.jsxs(
32450
32532
  "div",
32451
32533
  {
32452
- className: `flex gap-4 ${message.role === "user" ? "justify-end" : "justify-start"}`,
32534
+ className: `flex gap-2 sm:gap-3 md:gap-4 ${message.role === "user" ? "justify-end" : "justify-start"}`,
32453
32535
  children: [
32454
32536
  message.role === "assistant" && /* @__PURE__ */ jsxRuntime.jsx(ProfilePicture, {}),
32455
32537
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `max-w-none w-full group ${message.role === "user" ? "order-1" : ""}`, children: [
32456
32538
  /* @__PURE__ */ jsxRuntime.jsxs(
32457
32539
  "div",
32458
32540
  {
32459
- 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"}`,
32541
+ 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"}`,
32460
32542
  children: [
32461
32543
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${message.role === "user" ? "text-white" : "text-gray-800"}`, children: [
32462
32544
  message.role === "assistant" ? message.id === -1 ? /* @__PURE__ */ jsxRuntime.jsx(
@@ -32472,9 +32554,9 @@ var AIAgentView = () => {
32472
32554
  "button",
32473
32555
  {
32474
32556
  onClick: () => copyToClipboard(message.content, message.id.toString()),
32475
- 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",
32557
+ 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",
32476
32558
  title: "Copy message",
32477
- children: copiedMessageId === message.id.toString() ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "w-4 h-4 text-green-600" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Copy, { className: "w-4 h-4 text-gray-500" })
32559
+ children: copiedMessageId === message.id.toString() ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "w-3.5 h-3.5 sm:w-4 sm:h-4 text-green-600" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Copy, { className: "w-3.5 h-3.5 sm:w-4 sm:h-4 text-gray-500" })
32478
32560
  }
32479
32561
  ),
32480
32562
  message.reasoning && /* @__PURE__ */ jsxRuntime.jsxs("details", { className: "mt-3 pt-3 border-t border-gray-200", children: [
@@ -32484,7 +32566,7 @@ var AIAgentView = () => {
32484
32566
  ]
32485
32567
  }
32486
32568
  ),
32487
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `mt-2 flex items-center gap-2 text-xs text-gray-400 ${message.role === "user" ? "justify-end" : "justify-start"}`, children: [
32569
+ /* @__PURE__ */ jsxRuntime.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: [
32488
32570
  /* @__PURE__ */ jsxRuntime.jsx("span", { children: formatTime3(message.created_at) }),
32489
32571
  message.role === "assistant" && message.id !== -1 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
32490
32572
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-1 h-1 bg-gray-300 rounded-full" }),
@@ -32519,15 +32601,15 @@ var AIAgentView = () => {
32519
32601
  )
32520
32602
  }
32521
32603
  ),
32522
- (displayMessages.length > 0 || isTransitioning) && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "max-w-4xl mx-auto p-4 sm:p-6 pointer-events-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: handleSubmit, children: [
32604
+ (displayMessages.length > 0 || isTransitioning) && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "max-w-4xl mx-auto p-3 sm:p-4 md:p-6 pointer-events-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: handleSubmit, children: [
32523
32605
  /* @__PURE__ */ jsxRuntime.jsx(
32524
32606
  "div",
32525
32607
  {
32526
- 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" : ""}`,
32608
+ 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" : ""}`,
32527
32609
  style: isTransitioning ? {
32528
32610
  animation: "slideDown 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards"
32529
32611
  } : {},
32530
- children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-end gap-2 p-3", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 relative", children: [
32612
+ children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-end gap-2 p-3 sm:p-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 relative", children: [
32531
32613
  /* @__PURE__ */ jsxRuntime.jsx(
32532
32614
  "textarea",
32533
32615
  {
@@ -32558,33 +32640,33 @@ var AIAgentView = () => {
32558
32640
  });
32559
32641
  },
32560
32642
  placeholder: "Ask me anything about your shop-floor",
32561
- 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",
32643
+ 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",
32562
32644
  rows: 1,
32563
- style: { minHeight: "24px", maxHeight: "120px" }
32645
+ style: { minHeight: "40px", maxHeight: "120px" }
32564
32646
  }
32565
32647
  ),
32566
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute right-2 bottom-2 flex items-center gap-2", children: /* @__PURE__ */ jsxRuntime.jsx(
32648
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute right-2 sm:right-3 bottom-2 sm:bottom-2 flex items-center gap-2", children: /* @__PURE__ */ jsxRuntime.jsx(
32567
32649
  "button",
32568
32650
  {
32569
32651
  type: "submit",
32570
32652
  disabled: !inputValue.trim() || isCurrentThreadLoading,
32571
- 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",
32653
+ 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",
32572
32654
  children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Send, { className: "w-4 h-4" })
32573
32655
  }
32574
32656
  ) })
32575
32657
  ] }) })
32576
32658
  }
32577
32659
  ),
32578
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center mt-2 text-xs text-gray-400", children: [
32579
- /* @__PURE__ */ jsxRuntime.jsx("span", { children: isCurrentThreadLoading ? "You can type your next message while Axel responds" : "Press Enter to send \u2022 Shift+Enter for new line" }),
32580
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 ml-4", children: [
32660
+ /* @__PURE__ */ jsxRuntime.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: [
32661
+ /* @__PURE__ */ jsxRuntime.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" }),
32662
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
32581
32663
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: `w-1.5 h-1.5 rounded-full ${isCurrentThreadLoading ? "bg-orange-500" : "bg-green-500"}` }),
32582
32664
  /* @__PURE__ */ jsxRuntime.jsx("span", { children: isCurrentThreadLoading ? "Responding..." : "Connected" })
32583
32665
  ] })
32584
32666
  ] })
32585
32667
  ] }) }) })
32586
32668
  ] }),
32587
- /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "w-80 h-full bg-white border-l border-gray-200 shadow-lg", children: /* @__PURE__ */ jsxRuntime.jsx(
32669
+ /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "w-full sm:w-96 lg:w-80 h-full bg-white border-l border-gray-200 shadow-lg", children: /* @__PURE__ */ jsxRuntime.jsx(
32588
32670
  ThreadSidebar,
32589
32671
  {
32590
32672
  activeThreadId,
@@ -32966,8 +33048,8 @@ var HelpView = ({
32966
33048
  animate: { opacity: 1 },
32967
33049
  transition: { duration: 0.3 },
32968
33050
  children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
32969
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-white px-8 py-6 shadow-sm border-b border-gray-200/80", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between relative", children: [
32970
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-0", children: /* @__PURE__ */ jsxRuntime.jsx(
33051
+ /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3 sm:gap-4 relative", children: [
33052
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sm:absolute sm:left-0", children: /* @__PURE__ */ jsxRuntime.jsx(
32971
33053
  BackButtonMinimal,
32972
33054
  {
32973
33055
  onClick: handleBackClick,
@@ -32976,9 +33058,9 @@ var HelpView = ({
32976
33058
  "aria-label": "Navigate back to dashboard"
32977
33059
  }
32978
33060
  ) }),
32979
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 text-center mx-auto", children: [
32980
- /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-3xl font-semibold text-gray-900", children: "Help & Support" }),
32981
- /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-sm text-gray-500", children: "Get immediate assistance from our engineering team. Submit a detailed support request below." })
33061
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 text-center mx-auto mt-2 sm:mt-0", children: [
33062
+ /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-lg sm:text-xl md:text-2xl lg:text-3xl font-semibold text-gray-900", children: "Help & Support" }),
33063
+ /* @__PURE__ */ jsxRuntime.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." })
32982
33064
  ] })
32983
33065
  ] }) }),
32984
33066
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
@@ -33555,11 +33637,11 @@ var MetricCards = React19.memo(({ lineInfo }) => {
33555
33637
  variants: containerVariants,
33556
33638
  initial: "initial",
33557
33639
  animate: "animate",
33558
- className: "grid grid-cols-1 md:grid-cols-3 gap-4 mb-2 md:h-[35vh] h-auto",
33640
+ 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",
33559
33641
  children: [
33560
- /* @__PURE__ */ jsxRuntime.jsxs(motion.div, { variants: itemVariants, className: "bg-white rounded-xl shadow-sm p-4 overflow-hidden h-[280px] md:h-auto", children: [
33561
- /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-base font-semibold text-gray-700 mb-2 text-center", children: "Line Output" }),
33562
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[calc(100%-2.5rem)]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-full", children: /* @__PURE__ */ jsxRuntime.jsx(
33642
+ /* @__PURE__ */ jsxRuntime.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: [
33643
+ /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-sm sm:text-base font-semibold text-gray-700 mb-2 text-center", children: "Line Output" }),
33644
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-[calc(100%-2rem)] sm:h-[calc(100%-2.5rem)]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-full", children: /* @__PURE__ */ jsxRuntime.jsx(
33563
33645
  OutputProgressChart,
33564
33646
  {
33565
33647
  currentOutput: lineInfo?.metrics.current_output || 0,
@@ -33567,19 +33649,19 @@ var MetricCards = React19.memo(({ lineInfo }) => {
33567
33649
  }
33568
33650
  ) }) })
33569
33651
  ] }),
33570
- /* @__PURE__ */ jsxRuntime.jsxs(motion.div, { variants: itemVariants, className: "bg-white rounded-xl shadow-sm p-4 overflow-hidden h-[160px] md:h-auto", children: [
33571
- /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-base font-semibold text-gray-700 text-center mb-2", children: "Underperforming Workspaces" }),
33572
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center h-[calc(100%-2.5rem)]", children: [
33573
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-6xl md:text-7xl font-bold text-red-600", children: lineInfo?.metrics.underperforming_workspaces }),
33574
- /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-2xl md:text-3xl text-gray-500 ml-2", children: [
33652
+ /* @__PURE__ */ jsxRuntime.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: [
33653
+ /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-sm sm:text-base font-semibold text-gray-700 text-center mb-2", children: "Underperforming Workspaces" }),
33654
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center h-[calc(100%-2rem)] sm:h-[calc(100%-2.5rem)]", children: [
33655
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold text-red-600", children: lineInfo?.metrics.underperforming_workspaces }),
33656
+ /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xl sm:text-2xl md:text-2xl lg:text-3xl text-gray-500 ml-1 sm:ml-2", children: [
33575
33657
  "/ ",
33576
33658
  lineInfo?.metrics.total_workspaces
33577
33659
  ] })
33578
33660
  ] })
33579
33661
  ] }),
33580
- /* @__PURE__ */ jsxRuntime.jsxs(motion.div, { variants: itemVariants, className: "bg-white rounded-xl shadow-sm p-4 overflow-hidden h-[160px] md:h-auto", children: [
33581
- /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-base font-semibold text-gray-700 text-center mb-2", children: "Average Efficiency" }),
33582
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center h-[calc(100%-2.5rem)]", children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-6xl md:text-7xl font-bold text-gray-900", children: [
33662
+ /* @__PURE__ */ jsxRuntime.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: [
33663
+ /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-sm sm:text-base font-semibold text-gray-700 text-center mb-2", children: "Average Efficiency" }),
33664
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center h-[calc(100%-2rem)] sm:h-[calc(100%-2.5rem)]", children: /* @__PURE__ */ jsxRuntime.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: [
33583
33665
  lineInfo?.metrics.avg_efficiency.toFixed(1),
33584
33666
  "%"
33585
33667
  ] }) })
@@ -33624,27 +33706,27 @@ var BottomSection = React19.memo(({
33624
33706
  variants: containerVariants,
33625
33707
  initial: "initial",
33626
33708
  animate: "animate",
33627
- className: "grid grid-cols-1 md:grid-cols-5 gap-4 md:h-[calc(57vh-4rem)] h-auto md:mt-0 mt-4",
33709
+ 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",
33628
33710
  children: [
33629
- /* @__PURE__ */ jsxRuntime.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: [
33711
+ /* @__PURE__ */ jsxRuntime.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: [
33630
33712
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between items-center mb-2", children: [
33631
- /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg font-semibold text-gray-700 text-center flex-1", children: "Poorest Performing Workspaces" }),
33713
+ /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-base sm:text-lg font-semibold text-gray-700 text-center flex-1", children: "Poorest Performing Workspaces" }),
33632
33714
  /* @__PURE__ */ jsxRuntime.jsx(
33633
33715
  "div",
33634
33716
  {
33635
33717
  className: "p-1.5 hover:bg-gray-100 rounded-lg transition-colors cursor-pointer",
33636
33718
  onClick: () => handleNavigate && handleNavigate(`/leaderboard`),
33637
- children: /* @__PURE__ */ jsxRuntime.jsx(outline.ArrowRightIcon, { className: "w-5 h-5 text-gray-500" })
33719
+ children: /* @__PURE__ */ jsxRuntime.jsx(outline.ArrowRightIcon, { className: "w-4 h-4 sm:w-5 sm:h-5 text-gray-500" })
33638
33720
  }
33639
33721
  )
33640
33722
  ] }),
33641
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "divide-y overflow-auto flex-1 pr-2", children: [
33723
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "divide-y overflow-auto flex-1 pr-1 sm:pr-2", children: [
33642
33724
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between pb-2", children: [
33643
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 md:gap-6", children: [
33644
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-medium text-gray-500 min-w-[100px] md:min-w-[120px] text-sm md:text-base", children: "Workspace" }),
33725
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 sm:gap-3 md:gap-6", children: [
33726
+ /* @__PURE__ */ jsxRuntime.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" }),
33645
33727
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs md:text-sm font-medium text-gray-500", children: "Current/Ideal" })
33646
33728
  ] }),
33647
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs md:text-sm font-medium text-gray-500 pr-2", children: "Efficiency" })
33729
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs md:text-sm font-medium text-gray-500 pr-1 sm:pr-2", children: "Efficiency" })
33648
33730
  ] }),
33649
33731
  lineInfo.metrics.poorest_performing_workspaces && lineInfo.metrics.poorest_performing_workspaces.length > 0 ? lineInfo.metrics.poorest_performing_workspaces.map((ws, index) => {
33650
33732
  const wsMetrics = workspaceData.find((w) => w.workspace_name === ws.workspace_name);
@@ -33666,10 +33748,10 @@ var BottomSection = React19.memo(({
33666
33748
  clickHandler();
33667
33749
  handleNavigate && handleNavigate(fullUrl);
33668
33750
  },
33669
- className: "block py-3 hover:bg-gray-50 transition-colors rounded-lg cursor-pointer",
33751
+ className: "block py-2 sm:py-3 hover:bg-gray-50 transition-colors rounded-lg cursor-pointer",
33670
33752
  children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
33671
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 md:gap-6", children: [
33672
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-[100px] md:min-w-[120px]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-medium text-gray-900 text-sm md:text-base", children: displayName }) }),
33753
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 sm:gap-3 md:gap-6", children: [
33754
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-[80px] sm:min-w-[100px] md:min-w-[120px]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-medium text-gray-900 text-xs sm:text-sm md:text-base truncate", children: displayName }) }),
33673
33755
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-xs md:text-sm font-medium text-gray-900", children: [
33674
33756
  ws.action_count || 0,
33675
33757
  " / ",
@@ -33700,10 +33782,10 @@ var BottomSection = React19.memo(({
33700
33782
  clickHandler();
33701
33783
  handleNavigate && handleNavigate(fullUrl);
33702
33784
  },
33703
- className: "block py-3 hover:bg-gray-50 transition-colors rounded-lg cursor-pointer",
33785
+ className: "block py-2 sm:py-3 hover:bg-gray-50 transition-colors rounded-lg cursor-pointer",
33704
33786
  children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
33705
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 md:gap-6", children: [
33706
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-[100px] md:min-w-[120px]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-medium text-gray-900 text-sm md:text-base", children: displayName }) }),
33787
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 sm:gap-3 md:gap-6", children: [
33788
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-[80px] sm:min-w-[100px] md:min-w-[120px]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-medium text-gray-900 text-xs sm:text-sm md:text-base truncate", children: displayName }) }),
33707
33789
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-xs md:text-sm font-medium text-gray-900", children: [
33708
33790
  ws.action_count || 0,
33709
33791
  " / ",
@@ -33722,9 +33804,9 @@ var BottomSection = React19.memo(({
33722
33804
  )
33723
33805
  ] })
33724
33806
  ] }),
33725
- /* @__PURE__ */ jsxRuntime.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: [
33726
- /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg font-semibold text-gray-700 mb-2 text-center", children: "Hourly Line Output" }),
33727
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-h-[300px] md:min-h-[400px] pb-8 md:pb-16", children: lineInfo && /* @__PURE__ */ jsxRuntime.jsx(
33807
+ /* @__PURE__ */ jsxRuntime.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: [
33808
+ /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-base sm:text-lg font-semibold text-gray-700 mb-2 text-center", children: "Hourly Line Output" }),
33809
+ /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
33728
33810
  HourlyOutputChart2,
33729
33811
  {
33730
33812
  data: hourlyOutputData,
@@ -34095,9 +34177,9 @@ var KPIDetailView = ({
34095
34177
  return /* @__PURE__ */ jsxRuntime.jsx(LoadingPage, { message: "Processing line data..." });
34096
34178
  }
34097
34179
  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-h-screen bg-gray-50 flex flex-col", children: [
34098
- /* @__PURE__ */ jsxRuntime.jsx("header", { className: "sticky top-0 z-10 bg-white border-b flex-shrink-0", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-4 py-3", children: [
34180
+ /* @__PURE__ */ jsxRuntime.jsx("header", { className: "sticky top-0 z-10 bg-white border-b flex-shrink-0", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-3 sm:px-4 md:px-6 py-2 sm:py-3", children: [
34099
34181
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center relative", children: [
34100
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-0", children: /* @__PURE__ */ jsxRuntime.jsx(
34182
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sm:absolute sm:left-0", children: /* @__PURE__ */ jsxRuntime.jsx(
34101
34183
  BackButtonMinimal,
34102
34184
  {
34103
34185
  onClick: handleBackClick,
@@ -34106,37 +34188,37 @@ var KPIDetailView = ({
34106
34188
  "aria-label": "Navigate back to previous page"
34107
34189
  }
34108
34190
  ) }),
34109
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 flex justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
34110
- /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-3xl font-semibold text-gray-900", children: lineInfo?.line_name || "Line" }),
34111
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-2 w-2 rounded-full bg-green-500 animate-pulse ring-2 ring-green-500/30 ring-offset-1" })
34191
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 flex justify-center mt-2 sm:mt-0", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 sm:gap-3", children: [
34192
+ /* @__PURE__ */ jsxRuntime.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" }),
34193
+ /* @__PURE__ */ jsxRuntime.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" })
34112
34194
  ] }) })
34113
34195
  ] }),
34114
- (activeTab !== "monthly_history" || urlDate || urlShift) && metrics2 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-3 bg-blue-50 px-3 py-2 rounded-lg", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-4", children: [
34196
+ (activeTab !== "monthly_history" || urlDate || urlShift) && metrics2 && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center justify-center gap-2 sm:gap-3 md:gap-4", children: [
34115
34197
  !urlDate && !urlShift && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
34116
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-lg font-medium text-blue-600", children: /* @__PURE__ */ jsxRuntime.jsx(ISTTimer_default, {}) }),
34117
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-px h-4 bg-blue-300" })
34198
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm sm:text-base md:text-lg font-medium text-blue-600", children: /* @__PURE__ */ jsxRuntime.jsx(ISTTimer_default, {}) }),
34199
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden sm:block w-px h-4 bg-blue-300" })
34118
34200
  ] }),
34119
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-base font-medium text-blue-600", children: metrics2 && formatLocalDate(new Date(metrics2.date)) }),
34120
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-px h-4 bg-blue-300" }),
34201
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs sm:text-sm md:text-base font-medium text-blue-600", children: metrics2 && formatLocalDate(new Date(metrics2.date)) }),
34202
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden sm:block w-px h-4 bg-blue-300" }),
34121
34203
  urlDate && metrics2.date && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
34122
34204
  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "px-2 py-1 text-xs font-medium bg-blue-200 text-blue-800 rounded-md", children: getDaysDifference2(metrics2.date) }),
34123
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-px h-4 bg-blue-300" })
34205
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden sm:block w-px h-4 bg-blue-300" })
34124
34206
  ] }),
34125
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
34207
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 sm:gap-2", children: [
34126
34208
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-blue-600", children: getShiftIcon(metrics2.shift_id ?? 0) }),
34127
- /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-base font-medium text-blue-600", children: [
34209
+ /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs sm:text-sm md:text-base font-medium text-blue-600", children: [
34128
34210
  getShiftName(metrics2.shift_id ?? 0),
34129
34211
  " Shift"
34130
34212
  ] })
34131
34213
  ] })
34132
34214
  ] }) }),
34133
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-2 flex items-center justify-between", children: [
34134
- !urlDate && !urlShift && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2", children: [
34215
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-2 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-2 sm:gap-0", children: [
34216
+ !urlDate && !urlShift && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-1 sm:gap-2 w-full sm:w-auto", children: [
34135
34217
  /* @__PURE__ */ jsxRuntime.jsx(
34136
34218
  "button",
34137
34219
  {
34138
34220
  onClick: handleOverviewClick,
34139
- 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"}`,
34221
+ 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"}`,
34140
34222
  children: "Efficiency Overview"
34141
34223
  }
34142
34224
  ),
@@ -34144,12 +34226,12 @@ var KPIDetailView = ({
34144
34226
  "button",
34145
34227
  {
34146
34228
  onClick: handleMonthlyHistoryClick,
34147
- 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"}`,
34229
+ 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"}`,
34148
34230
  children: "Monthly History"
34149
34231
  }
34150
34232
  )
34151
34233
  ] }),
34152
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-3 ml-auto", children: [
34234
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-2 sm:space-x-3 w-full sm:w-auto justify-end sm:ml-auto", children: [
34153
34235
  lineInfo && activeTab === "overview" && /* @__PURE__ */ jsxRuntime.jsx(LinePdfGenerator, { lineInfo, workspaceData: workspaces || [] }),
34154
34236
  activeTab === "monthly_history" && /* @__PURE__ */ jsxRuntime.jsx(
34155
34237
  LineMonthlyPdfGenerator,
@@ -34314,11 +34396,11 @@ var LineCard = ({ line, onClick }) => {
34314
34396
  animate: { opacity: 1, y: 0 },
34315
34397
  transition: { duration: 0.3 },
34316
34398
  onClick,
34317
- 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",
34399
+ 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",
34318
34400
  children: [
34319
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 mb-6", children: [
34320
- /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-xl font-semibold text-gray-900", children: line.line_name }),
34321
- kpis && isOnTrack !== null && /* @__PURE__ */ jsxRuntime.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: [
34401
+ /* @__PURE__ */ jsxRuntime.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: [
34402
+ /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg sm:text-xl font-semibold text-gray-900 truncate", children: line.line_name }),
34403
+ kpis && isOnTrack !== null && /* @__PURE__ */ jsxRuntime.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: [
34322
34404
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: `w-2 h-2 rounded-full ${isOnTrack ? "bg-emerald-500" : "bg-red-500"} animate-pulse` }),
34323
34405
  /* @__PURE__ */ jsxRuntime.jsx("span", { children: isOnTrack ? "On Track" : "Behind" })
34324
34406
  ] })
@@ -34338,15 +34420,15 @@ var LineCard = ({ line, onClick }) => {
34338
34420
  ] })
34339
34421
  ] }),
34340
34422
  error && !kpis && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-center py-8", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-500", children: "Unable to load metrics" }) }),
34341
- kpis && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-5", children: [
34423
+ kpis && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4 sm:space-y-5", children: [
34342
34424
  /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
34343
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs font-medium text-gray-500 uppercase tracking-wider mb-2", children: "Efficiency" }),
34425
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs font-medium text-gray-500 uppercase tracking-wider mb-1.5 sm:mb-2", children: "Efficiency" }),
34344
34426
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-baseline justify-between", children: [
34345
- /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-3xl font-semibold text-gray-900", children: [
34427
+ /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-2xl sm:text-3xl font-semibold text-gray-900", children: [
34346
34428
  kpis.efficiency.value.toFixed(1),
34347
34429
  "%"
34348
34430
  ] }),
34349
- kpis.efficiency.change !== 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: `text-sm font-medium ${kpis.efficiency.change > 0 ? "text-emerald-600" : "text-red-600"}`, children: [
34431
+ kpis.efficiency.change !== 0 && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: `text-xs sm:text-sm font-medium ${kpis.efficiency.change > 0 ? "text-emerald-600" : "text-red-600"}`, children: [
34350
34432
  kpis.efficiency.change > 0 ? "+" : "",
34351
34433
  kpis.efficiency.change.toFixed(1),
34352
34434
  "%"
@@ -34354,19 +34436,19 @@ var LineCard = ({ line, onClick }) => {
34354
34436
  ] })
34355
34437
  ] }),
34356
34438
  /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
34357
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs font-medium text-gray-500 uppercase tracking-wider mb-2", children: "Output Progress" }),
34358
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-baseline justify-between mb-3", children: [
34359
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-2xl font-semibold text-gray-900", children: kpis.outputProgress.current }),
34360
- /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm text-gray-500 font-medium", children: [
34439
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs font-medium text-gray-500 uppercase tracking-wider mb-1.5 sm:mb-2", children: "Output Progress" }),
34440
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-baseline justify-between mb-2 sm:mb-3", children: [
34441
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xl sm:text-2xl font-semibold text-gray-900", children: kpis.outputProgress.current }),
34442
+ /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs sm:text-sm text-gray-500 font-medium", children: [
34361
34443
  "/ ",
34362
34444
  kpis.outputProgress.target,
34363
34445
  " units"
34364
34446
  ] })
34365
34447
  ] }),
34366
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full bg-gray-200 rounded-full h-2.5", children: /* @__PURE__ */ jsxRuntime.jsx(
34448
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full bg-gray-200 rounded-full h-2 sm:h-2.5", children: /* @__PURE__ */ jsxRuntime.jsx(
34367
34449
  "div",
34368
34450
  {
34369
- className: "bg-blue-600 h-2.5 rounded-full transition-all duration-500 ease-out",
34451
+ className: "bg-blue-600 h-2 sm:h-2.5 rounded-full transition-all duration-500 ease-out",
34370
34452
  style: {
34371
34453
  width: `${Math.min(
34372
34454
  kpis.outputProgress.current / kpis.outputProgress.target * 100,
@@ -34377,17 +34459,17 @@ var LineCard = ({ line, onClick }) => {
34377
34459
  ) })
34378
34460
  ] }),
34379
34461
  /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
34380
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs font-medium text-gray-500 uppercase tracking-wider mb-2", children: "Underperforming Workspaces" }),
34462
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs font-medium text-gray-500 uppercase tracking-wider mb-1.5 sm:mb-2", children: "Underperforming Workspaces" }),
34381
34463
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-baseline gap-2", children: [
34382
- /* @__PURE__ */ jsxRuntime.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 }),
34383
- /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm text-gray-500 font-medium", children: [
34464
+ /* @__PURE__ */ jsxRuntime.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 }),
34465
+ /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs sm:text-sm text-gray-500 font-medium", children: [
34384
34466
  "of ",
34385
34467
  kpis.underperformingWorkers.total
34386
34468
  ] })
34387
34469
  ] })
34388
34470
  ] })
34389
34471
  ] }),
34390
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute bottom-4 right-4", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-2.5 rounded-full bg-gray-50 group-hover:bg-blue-50 transition-colors shadow-sm", children: /* @__PURE__ */ jsxRuntime.jsx(outline.ArrowRightIcon, { className: "w-5 h-5 text-gray-400 group-hover:text-blue-600 transition-colors" }) }) })
34472
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute bottom-3 right-3 sm:bottom-4 sm:right-4", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(outline.ArrowRightIcon, { className: "w-4 h-4 sm:w-5 sm:h-5 text-gray-400 group-hover:text-blue-600 transition-colors" }) }) })
34391
34473
  ]
34392
34474
  }
34393
34475
  );
@@ -34466,8 +34548,8 @@ var KPIsOverviewView = ({
34466
34548
  }
34467
34549
  if (error) {
34468
34550
  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-h-screen bg-gray-50 flex flex-col", children: [
34469
- /* @__PURE__ */ jsxRuntime.jsx("header", { className: "sticky top-0 z-10 bg-white border-b flex-shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 py-3", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center relative", children: [
34470
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-0", children: /* @__PURE__ */ jsxRuntime.jsx(
34551
+ /* @__PURE__ */ jsxRuntime.jsx("header", { className: "sticky top-0 z-10 bg-white border-b flex-shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 sm:px-4 md:px-6 py-2 sm:py-3", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center relative", children: [
34552
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sm:absolute sm:left-0", children: /* @__PURE__ */ jsxRuntime.jsx(
34471
34553
  BackButtonMinimal,
34472
34554
  {
34473
34555
  onClick: handleBackClick,
@@ -34476,9 +34558,9 @@ var KPIsOverviewView = ({
34476
34558
  "aria-label": "Navigate back to previous page"
34477
34559
  }
34478
34560
  ) }),
34479
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 flex justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
34480
- /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-3xl font-semibold text-gray-900", children: "Shop-floor overview" }),
34481
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-2 w-2 rounded-full bg-green-500 animate-pulse ring-2 ring-green-500/30 ring-offset-1" })
34561
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 flex justify-center mt-2 sm:mt-0", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 sm:gap-3", children: [
34562
+ /* @__PURE__ */ jsxRuntime.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" }),
34563
+ /* @__PURE__ */ jsxRuntime.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" })
34482
34564
  ] }) })
34483
34565
  ] }) }) }),
34484
34566
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-center", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-gray-500", children: error }) }) })
@@ -34486,8 +34568,8 @@ var KPIsOverviewView = ({
34486
34568
  }
34487
34569
  if (lines.length === 0) {
34488
34570
  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-h-screen bg-gray-50 flex flex-col", children: [
34489
- /* @__PURE__ */ jsxRuntime.jsx("header", { className: "sticky top-0 z-10 bg-white border-b flex-shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 py-3", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center relative", children: [
34490
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-0", children: /* @__PURE__ */ jsxRuntime.jsx(
34571
+ /* @__PURE__ */ jsxRuntime.jsx("header", { className: "sticky top-0 z-10 bg-white border-b flex-shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 sm:px-4 md:px-6 py-2 sm:py-3", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center relative", children: [
34572
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sm:absolute sm:left-0", children: /* @__PURE__ */ jsxRuntime.jsx(
34491
34573
  BackButtonMinimal,
34492
34574
  {
34493
34575
  onClick: handleBackClick,
@@ -34496,9 +34578,9 @@ var KPIsOverviewView = ({
34496
34578
  "aria-label": "Navigate back to previous page"
34497
34579
  }
34498
34580
  ) }),
34499
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 flex justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
34500
- /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-3xl font-semibold text-gray-900", children: "Shop-floor overview" }),
34501
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-2 w-2 rounded-full bg-green-500 animate-pulse ring-2 ring-green-500/30 ring-offset-1" })
34581
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 flex justify-center mt-2 sm:mt-0", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 sm:gap-3", children: [
34582
+ /* @__PURE__ */ jsxRuntime.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" }),
34583
+ /* @__PURE__ */ jsxRuntime.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" })
34502
34584
  ] }) })
34503
34585
  ] }) }) }),
34504
34586
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
@@ -34508,9 +34590,9 @@ var KPIsOverviewView = ({
34508
34590
  ] });
34509
34591
  }
34510
34592
  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-h-screen bg-gray-50 flex flex-col", children: [
34511
- /* @__PURE__ */ jsxRuntime.jsx("header", { className: "sticky top-0 z-10 bg-white border-b flex-shrink-0", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-4 py-3", children: [
34593
+ /* @__PURE__ */ jsxRuntime.jsx("header", { className: "sticky top-0 z-10 bg-white border-b flex-shrink-0", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-3 sm:px-4 md:px-6 py-2 sm:py-3", children: [
34512
34594
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center relative", children: [
34513
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-0", children: /* @__PURE__ */ jsxRuntime.jsx(
34595
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sm:absolute sm:left-0", children: /* @__PURE__ */ jsxRuntime.jsx(
34514
34596
  BackButtonMinimal,
34515
34597
  {
34516
34598
  onClick: handleBackClick,
@@ -34519,27 +34601,27 @@ var KPIsOverviewView = ({
34519
34601
  "aria-label": "Navigate back to previous page"
34520
34602
  }
34521
34603
  ) }),
34522
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 flex justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
34523
- /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-3xl font-semibold text-gray-900", children: "Shop-floor overview" }),
34524
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-2 w-2 rounded-full bg-green-500 animate-pulse ring-2 ring-green-500/30 ring-offset-1" })
34604
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 flex justify-center mt-2 sm:mt-0", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 sm:gap-3", children: [
34605
+ /* @__PURE__ */ jsxRuntime.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" }),
34606
+ /* @__PURE__ */ jsxRuntime.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" })
34525
34607
  ] }) })
34526
34608
  ] }),
34527
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-3 bg-blue-50 px-3 py-2 rounded-lg", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-4", children: [
34528
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-lg font-medium text-blue-600", children: /* @__PURE__ */ jsxRuntime.jsx(ISTTimer_default, {}) }),
34529
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-px h-4 bg-blue-300" }),
34530
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-base font-medium text-blue-600", children: formatLocalDate2(/* @__PURE__ */ new Date()) }),
34531
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-px h-4 bg-blue-300" }),
34532
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
34609
+ /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center justify-center gap-2 sm:gap-3 md:gap-4", children: [
34610
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm sm:text-base md:text-lg font-medium text-blue-600", children: /* @__PURE__ */ jsxRuntime.jsx(ISTTimer_default, {}) }),
34611
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden sm:block w-px h-4 bg-blue-300" }),
34612
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs sm:text-sm md:text-base font-medium text-blue-600", children: formatLocalDate2(/* @__PURE__ */ new Date()) }),
34613
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden sm:block w-px h-4 bg-blue-300" }),
34614
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 sm:gap-2", children: [
34533
34615
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-blue-600", children: getShiftIcon(currentShiftDetails.shiftId) }),
34534
- /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-base font-medium text-blue-600", children: [
34616
+ /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs sm:text-sm md:text-base font-medium text-blue-600", children: [
34535
34617
  shiftName,
34536
34618
  " Shift"
34537
34619
  ] })
34538
34620
  ] })
34539
34621
  ] }) }),
34540
- /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-gray-600 text-center mt-3", children: "Click on any line to view detailed performance metrics" })
34622
+ /* @__PURE__ */ jsxRuntime.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" })
34541
34623
  ] }) }),
34542
- /* @__PURE__ */ jsxRuntime.jsx("main", { className: "flex-1 p-6 overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
34624
+ /* @__PURE__ */ jsxRuntime.jsx("main", { className: "flex-1 p-3 sm:p-4 md:p-6 overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
34543
34625
  LineCard,
34544
34626
  {
34545
34627
  line,
@@ -34559,14 +34641,14 @@ var HeaderRibbon = React19.memo(({
34559
34641
  shiftId,
34560
34642
  getShiftIcon,
34561
34643
  getShiftName
34562
- }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-3 bg-blue-50 px-3 py-2 rounded-lg", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-4", children: [
34563
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-lg font-medium text-blue-600", children: /* @__PURE__ */ jsxRuntime.jsx(IsolatedTimer, {}) }),
34564
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-px h-4 bg-blue-300" }),
34565
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-base font-medium text-blue-600", children: currentDate }),
34566
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-px h-4 bg-blue-300" }),
34567
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
34644
+ }) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center justify-center gap-2 sm:gap-4", children: [
34645
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm sm:text-base md:text-lg font-medium text-blue-600", children: /* @__PURE__ */ jsxRuntime.jsx(IsolatedTimer, {}) }),
34646
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden sm:block w-px h-4 bg-blue-300" }),
34647
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs sm:text-sm md:text-base font-medium text-blue-600", children: currentDate }),
34648
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden sm:block w-px h-4 bg-blue-300" }),
34649
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 sm:gap-2", children: [
34568
34650
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-blue-600", children: getShiftIcon(shiftId) }),
34569
- /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-base font-medium text-blue-600", children: [
34651
+ /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs sm:text-sm md:text-base font-medium text-blue-600", children: [
34570
34652
  getShiftName(shiftId),
34571
34653
  " Shift"
34572
34654
  ] })
@@ -34800,9 +34882,50 @@ var LeaderboardDetailView = React19.memo(({
34800
34882
  ] }) });
34801
34883
  }
34802
34884
  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `min-h-screen bg-slate-50 flex flex-col ${className}`, children: [
34803
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sticky top-0 z-20 bg-white shadow-sm border-b border-gray-200/80", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-3 sm:px-8 py-2 sm:py-2.5", children: [
34804
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
34805
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-auto sm:w-32", children: /* @__PURE__ */ jsxRuntime.jsx(
34885
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sticky top-0 z-20 bg-white shadow-sm border-b border-gray-200/80", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-3 sm:px-6 md:px-8 py-2 sm:py-2.5", children: [
34886
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sm:hidden", children: [
34887
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-2", children: [
34888
+ /* @__PURE__ */ jsxRuntime.jsx(
34889
+ BackButtonMinimal,
34890
+ {
34891
+ onClick: handleBackClick,
34892
+ text: "Back",
34893
+ size: "sm",
34894
+ "aria-label": "Navigate back to previous page"
34895
+ }
34896
+ ),
34897
+ /* @__PURE__ */ jsxRuntime.jsxs(
34898
+ "button",
34899
+ {
34900
+ onClick: handleSortToggle,
34901
+ 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",
34902
+ children: [
34903
+ /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Sort" }),
34904
+ /* @__PURE__ */ jsxRuntime.jsx(
34905
+ "svg",
34906
+ {
34907
+ className: "w-3.5 h-3.5 text-gray-600",
34908
+ xmlns: "http://www.w3.org/2000/svg",
34909
+ viewBox: "0 0 24 24",
34910
+ fill: "none",
34911
+ stroke: "currentColor",
34912
+ strokeWidth: "2",
34913
+ strokeLinecap: "round",
34914
+ strokeLinejoin: "round",
34915
+ children: sortAscending ? /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 15l7-7 7 7" }) : /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M19 9l-7 7-7-7" })
34916
+ }
34917
+ )
34918
+ ]
34919
+ }
34920
+ )
34921
+ ] }),
34922
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-2", children: [
34923
+ /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-base font-semibold text-gray-900", children: "Leaderboard" }),
34924
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-1 w-1 rounded-full bg-green-500 animate-pulse ring-1 ring-green-500/30 ring-offset-1" })
34925
+ ] }) })
34926
+ ] }),
34927
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "hidden sm:flex items-center justify-between", children: [
34928
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-32", children: /* @__PURE__ */ jsxRuntime.jsx(
34806
34929
  BackButtonMinimal,
34807
34930
  {
34808
34931
  onClick: handleBackClick,
@@ -34811,17 +34934,17 @@ var LeaderboardDetailView = React19.memo(({
34811
34934
  "aria-label": "Navigate back to previous page"
34812
34935
  }
34813
34936
  ) }),
34814
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 sm:gap-3", children: [
34815
- /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-3xl font-semibold text-gray-900", children: "Leaderboard" }),
34816
- /* @__PURE__ */ jsxRuntime.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" })
34937
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
34938
+ /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-xl md:text-2xl lg:text-3xl font-semibold text-gray-900", children: "Leaderboard" }),
34939
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-2 w-2 rounded-full bg-green-500 animate-pulse ring-2 ring-green-500/30 ring-offset-1" })
34817
34940
  ] }),
34818
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-auto sm:w-32 flex justify-end", children: /* @__PURE__ */ jsxRuntime.jsxs(
34941
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-32 flex justify-end", children: /* @__PURE__ */ jsxRuntime.jsxs(
34819
34942
  "button",
34820
34943
  {
34821
34944
  onClick: handleSortToggle,
34822
- 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",
34945
+ 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",
34823
34946
  children: [
34824
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "hidden sm:inline", children: "Sort by Efficiency" }),
34947
+ /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Sort by Efficiency" }),
34825
34948
  /* @__PURE__ */ jsxRuntime.jsx(
34826
34949
  "svg",
34827
34950
  {
@@ -35330,48 +35453,113 @@ var BreakRow = React19.memo(({
35330
35453
  onRemove,
35331
35454
  index
35332
35455
  }) => {
35333
- return /* @__PURE__ */ jsxRuntime.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: [
35334
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-3", children: /* @__PURE__ */ jsxRuntime.jsx(
35335
- TimePickerDropdown,
35336
- {
35337
- value: breakItem.startTime,
35338
- onChange: (value) => onUpdate(index, "startTime", value),
35339
- placeholder: "Start time",
35340
- className: "w-full"
35341
- }
35342
- ) }),
35343
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-3", children: /* @__PURE__ */ jsxRuntime.jsx(
35344
- TimePickerDropdown,
35345
- {
35346
- value: breakItem.endTime,
35347
- onChange: (value) => onUpdate(index, "endTime", value),
35348
- placeholder: "End time",
35349
- className: "w-full"
35350
- }
35351
- ) }),
35352
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-2", children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm font-medium text-gray-700", children: [
35353
- breakItem.duration,
35354
- " min"
35355
- ] }) }),
35356
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-3", children: /* @__PURE__ */ jsxRuntime.jsx(
35357
- "input",
35358
- {
35359
- type: "text",
35360
- value: breakItem.remarks || "",
35361
- onChange: (e) => onUpdate(index, "remarks", e.target.value),
35362
- placeholder: "Break remarks",
35363
- 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"
35364
- }
35365
- ) }),
35366
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-1 flex justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
35367
- "button",
35368
- {
35369
- onClick: () => onRemove(index),
35370
- className: "text-gray-400 hover:text-red-500 focus:outline-none transition-colors",
35371
- "aria-label": "Remove break",
35372
- children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "w-4 h-4" })
35373
- }
35374
- ) })
35456
+ return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
35457
+ /* @__PURE__ */ jsxRuntime.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: [
35458
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-3", children: /* @__PURE__ */ jsxRuntime.jsx(
35459
+ TimePickerDropdown,
35460
+ {
35461
+ value: breakItem.startTime,
35462
+ onChange: (value) => onUpdate(index, "startTime", value),
35463
+ placeholder: "Start time",
35464
+ className: "w-full"
35465
+ }
35466
+ ) }),
35467
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-3", children: /* @__PURE__ */ jsxRuntime.jsx(
35468
+ TimePickerDropdown,
35469
+ {
35470
+ value: breakItem.endTime,
35471
+ onChange: (value) => onUpdate(index, "endTime", value),
35472
+ placeholder: "End time",
35473
+ className: "w-full"
35474
+ }
35475
+ ) }),
35476
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-2", children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm font-medium text-gray-700", children: [
35477
+ breakItem.duration,
35478
+ " min"
35479
+ ] }) }),
35480
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-3", children: /* @__PURE__ */ jsxRuntime.jsx(
35481
+ "input",
35482
+ {
35483
+ type: "text",
35484
+ value: breakItem.remarks || "",
35485
+ onChange: (e) => onUpdate(index, "remarks", e.target.value),
35486
+ placeholder: "Break remarks",
35487
+ 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"
35488
+ }
35489
+ ) }),
35490
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-1 flex justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
35491
+ "button",
35492
+ {
35493
+ onClick: () => onRemove(index),
35494
+ className: "text-gray-400 hover:text-red-500 focus:outline-none transition-colors",
35495
+ "aria-label": "Remove break",
35496
+ children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "w-4 h-4" })
35497
+ }
35498
+ ) })
35499
+ ] }),
35500
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sm:hidden bg-white border border-gray-200 rounded-lg p-3 mb-3 space-y-3", children: [
35501
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-2", children: [
35502
+ /* @__PURE__ */ jsxRuntime.jsxs("h5", { className: "text-sm font-medium text-gray-700", children: [
35503
+ "Break ",
35504
+ index + 1
35505
+ ] }),
35506
+ /* @__PURE__ */ jsxRuntime.jsx(
35507
+ "button",
35508
+ {
35509
+ onClick: () => onRemove(index),
35510
+ className: "text-gray-400 hover:text-red-500 focus:outline-none transition-colors p-1",
35511
+ "aria-label": "Remove break",
35512
+ children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "w-4 h-4" })
35513
+ }
35514
+ )
35515
+ ] }),
35516
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-3", children: [
35517
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
35518
+ /* @__PURE__ */ jsxRuntime.jsx("label", { className: "block text-xs font-medium text-gray-600 mb-1", children: "Start Time" }),
35519
+ /* @__PURE__ */ jsxRuntime.jsx(
35520
+ TimePickerDropdown,
35521
+ {
35522
+ value: breakItem.startTime,
35523
+ onChange: (value) => onUpdate(index, "startTime", value),
35524
+ placeholder: "Start time",
35525
+ className: "w-full"
35526
+ }
35527
+ )
35528
+ ] }),
35529
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
35530
+ /* @__PURE__ */ jsxRuntime.jsx("label", { className: "block text-xs font-medium text-gray-600 mb-1", children: "End Time" }),
35531
+ /* @__PURE__ */ jsxRuntime.jsx(
35532
+ TimePickerDropdown,
35533
+ {
35534
+ value: breakItem.endTime,
35535
+ onChange: (value) => onUpdate(index, "endTime", value),
35536
+ placeholder: "End time",
35537
+ className: "w-full"
35538
+ }
35539
+ )
35540
+ ] })
35541
+ ] }),
35542
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
35543
+ /* @__PURE__ */ jsxRuntime.jsx("label", { className: "block text-xs font-medium text-gray-600 mb-1", children: "Duration" }),
35544
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-sm text-gray-700 font-medium px-3 py-2 bg-gray-100 rounded-md text-center", children: [
35545
+ breakItem.duration,
35546
+ " minutes"
35547
+ ] })
35548
+ ] }),
35549
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
35550
+ /* @__PURE__ */ jsxRuntime.jsx("label", { className: "block text-xs font-medium text-gray-600 mb-1", children: "Remarks (Optional)" }),
35551
+ /* @__PURE__ */ jsxRuntime.jsx(
35552
+ "input",
35553
+ {
35554
+ type: "text",
35555
+ value: breakItem.remarks || "",
35556
+ onChange: (e) => onUpdate(index, "remarks", e.target.value),
35557
+ placeholder: "Add optional remarks...",
35558
+ 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"
35559
+ }
35560
+ )
35561
+ ] })
35562
+ ] })
35375
35563
  ] });
35376
35564
  });
35377
35565
  BreakRow.displayName = "BreakRow";
@@ -35404,35 +35592,35 @@ var ShiftPanel = React19.memo(({
35404
35592
  console.error("Error saving panel state to localStorage:", error);
35405
35593
  }
35406
35594
  };
35407
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-white rounded-lg shadow-sm mb-6 transition-all duration-300 w-full border border-gray-200", children: [
35595
+ return /* @__PURE__ */ jsxRuntime.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: [
35408
35596
  /* @__PURE__ */ jsxRuntime.jsx(
35409
35597
  "div",
35410
35598
  {
35411
- className: "p-4 w-full cursor-pointer hover:bg-gray-50/50 transition-all duration-200",
35599
+ className: "p-3 sm:p-4 w-full cursor-pointer hover:bg-gray-50/50 transition-all duration-200",
35412
35600
  onClick: toggleMinimize,
35413
- children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between w-full", children: [
35601
+ children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col sm:flex-row sm:items-center justify-between w-full gap-2 sm:gap-0", children: [
35414
35602
  /* @__PURE__ */ jsxRuntime.jsxs(
35415
35603
  "button",
35416
35604
  {
35417
35605
  onClick: toggleMinimize,
35418
- 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",
35606
+ 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",
35419
35607
  "aria-expanded": !isMinimized,
35420
35608
  "aria-controls": panelId,
35421
35609
  children: [
35422
35610
  /* @__PURE__ */ jsxRuntime.jsx(
35423
35611
  lucideReact.ChevronDown,
35424
35612
  {
35425
- className: `w-5 h-5 text-blue-500 transform transition-transform duration-200 ${isMinimized ? "" : "rotate-180"}`
35613
+ className: `w-4 h-4 sm:w-5 sm:h-5 text-blue-500 transform transition-transform duration-200 ${isMinimized ? "" : "rotate-180"}`
35426
35614
  }
35427
35615
  ),
35428
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
35429
- icon,
35430
- /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold text-gray-900 group-hover:text-blue-600", children: title })
35616
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5 sm:gap-2", children: [
35617
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-4 h-4 sm:w-5 sm:h-5", children: icon }),
35618
+ /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-base sm:text-lg font-semibold text-gray-900 group-hover:text-blue-600", children: title })
35431
35619
  ] })
35432
35620
  ]
35433
35621
  }
35434
35622
  ),
35435
- /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm font-medium text-gray-600 mr-2", children: [
35623
+ /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs sm:text-sm font-medium text-gray-600 text-center sm:text-right sm:mr-2", children: [
35436
35624
  "Total Shift Hours: ",
35437
35625
  shiftHours,
35438
35626
  " hours"
@@ -35440,10 +35628,10 @@ var ShiftPanel = React19.memo(({
35440
35628
  ] })
35441
35629
  }
35442
35630
  ),
35443
- !isMinimized && /* @__PURE__ */ jsxRuntime.jsxs("div", { id: panelId, className: "p-4 sm:p-6 border-t border-gray-200 w-full bg-white", children: [
35444
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6 mb-6 w-full", children: [
35631
+ !isMinimized && /* @__PURE__ */ jsxRuntime.jsxs("div", { id: panelId, className: "p-3 sm:p-4 md:p-6 border-t border-gray-200 w-full bg-white", children: [
35632
+ /* @__PURE__ */ jsxRuntime.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: [
35445
35633
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full", children: [
35446
- /* @__PURE__ */ jsxRuntime.jsx("label", { className: "block text-sm font-medium text-gray-700 mb-1", children: "Shift Start Time" }),
35634
+ /* @__PURE__ */ jsxRuntime.jsx("label", { className: "block text-xs sm:text-sm font-medium text-gray-700 mb-1", children: "Shift Start Time" }),
35447
35635
  /* @__PURE__ */ jsxRuntime.jsx(
35448
35636
  TimePickerDropdown,
35449
35637
  {
@@ -35455,7 +35643,7 @@ var ShiftPanel = React19.memo(({
35455
35643
  )
35456
35644
  ] }),
35457
35645
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full", children: [
35458
- /* @__PURE__ */ jsxRuntime.jsx("label", { className: "block text-sm font-medium text-gray-700 mb-1", children: "Shift End Time" }),
35646
+ /* @__PURE__ */ jsxRuntime.jsx("label", { className: "block text-xs sm:text-sm font-medium text-gray-700 mb-1", children: "Shift End Time" }),
35459
35647
  /* @__PURE__ */ jsxRuntime.jsx(
35460
35648
  TimePickerDropdown,
35461
35649
  {
@@ -35468,12 +35656,12 @@ var ShiftPanel = React19.memo(({
35468
35656
  ] })
35469
35657
  ] }),
35470
35658
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-4 w-full", children: [
35471
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col sm:flex-row sm:items-center justify-between mb-3 w-full", children: /* @__PURE__ */ jsxRuntime.jsxs("h4", { className: "text-md font-medium text-gray-700 flex items-center gap-2 mb-2 sm:mb-0", children: [
35472
- /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Coffee, { className: "w-4 h-4" }),
35659
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col sm:flex-row sm:items-center justify-between mb-3 w-full", children: /* @__PURE__ */ jsxRuntime.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: [
35660
+ /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Coffee, { className: "w-3.5 h-3.5 sm:w-4 sm:h-4" }),
35473
35661
  "Breaks"
35474
35662
  ] }) }),
35475
35663
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-2 mb-4 w-full", children: breaks.length > 0 ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
35476
- /* @__PURE__ */ jsxRuntime.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: [
35664
+ /* @__PURE__ */ jsxRuntime.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: [
35477
35665
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-3", children: "Break Start" }),
35478
35666
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-3", children: "Break End" }),
35479
35667
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-2", children: "Duration" }),
@@ -35490,7 +35678,7 @@ var ShiftPanel = React19.memo(({
35490
35678
  },
35491
35679
  index
35492
35680
  )) })
35493
- ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-gray-500 py-3 text-center bg-gray-50 rounded-md", children: "No breaks added yet" }) }),
35681
+ ] }) : /* @__PURE__ */ jsxRuntime.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" }) }),
35494
35682
  /* @__PURE__ */ jsxRuntime.jsxs(
35495
35683
  "button",
35496
35684
  {
@@ -35498,9 +35686,9 @@ var ShiftPanel = React19.memo(({
35498
35686
  e.stopPropagation();
35499
35687
  onBreakAdd();
35500
35688
  },
35501
- 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",
35689
+ 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",
35502
35690
  children: [
35503
- /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "w-4 h-4" }),
35691
+ /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "w-3.5 h-3.5 sm:w-4 sm:h-4" }),
35504
35692
  "Add Break"
35505
35693
  ]
35506
35694
  }
@@ -35868,8 +36056,8 @@ var ShiftsView = ({
35868
36056
  }
35869
36057
  }, [lineConfigs, supabase, showToast]);
35870
36058
  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `min-h-screen bg-slate-50 ${className}`, children: [
35871
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sticky top-0 z-10 bg-white border-b border-gray-200/80 shadow-sm", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 sm:px-8 py-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center relative", children: [
35872
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-0", children: /* @__PURE__ */ jsxRuntime.jsx(
36059
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sticky top-0 z-10 bg-white border-b border-gray-200/80 shadow-sm", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 sm:px-4 md:px-6 lg:px-8 py-3 sm:py-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center relative", children: [
36060
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sm:absolute sm:left-0", children: /* @__PURE__ */ jsxRuntime.jsx(
35873
36061
  BackButtonMinimal,
35874
36062
  {
35875
36063
  onClick: () => onBackClick ? onBackClick() : window.history.back(),
@@ -35878,14 +36066,14 @@ var ShiftsView = ({
35878
36066
  "aria-label": "Navigate back to previous page"
35879
36067
  }
35880
36068
  ) }),
35881
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 flex flex-col items-center", children: [
35882
- /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-3xl font-semibold text-gray-900", children: "Shift Management" }),
35883
- /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-500 mt-1", children: "Configure day and night shift timings and breaks for each production line" })
36069
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 flex flex-col items-center mt-2 sm:mt-0", children: [
36070
+ /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-lg sm:text-xl md:text-2xl lg:text-3xl font-semibold text-gray-900 text-center", children: "Shift Management" }),
36071
+ /* @__PURE__ */ jsxRuntime.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" })
35884
36072
  ] }),
35885
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute right-0 w-24" })
36073
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden sm:block absolute right-0 w-24" })
35886
36074
  ] }) }) }),
35887
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-4 sm:p-6 md:p-8", children: [
35888
- /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("p", { className: "text-xs sm:text-sm text-blue-700 font-medium", children: "Changes will affect production targets and output calculations." }) }),
36075
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-3 sm:p-4 md:p-6 lg:p-8", children: [
36076
+ /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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." }) }),
35889
36077
  loading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-white rounded-xl p-8 shadow text-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "animate-pulse flex flex-col items-center", children: [
35890
36078
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-8 w-8 rounded-full bg-blue-200 mb-4" }),
35891
36079
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-4 w-48 bg-gray-200 rounded mb-2" }),
@@ -35894,17 +36082,19 @@ var ShiftsView = ({
35894
36082
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-red-500 mb-2", children: "Error loading shift configurations" }),
35895
36083
  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-500", children: error })
35896
36084
  ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-4 sm:space-y-6", children: lineConfigs.map((config) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-white rounded-xl border border-gray-200 shadow-sm hover:shadow-md transition-all duration-200 w-full", children: [
35897
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-6 py-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col sm:flex-row sm:items-center justify-between gap-3 sm:gap-0", children: [
35898
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
35899
- /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Calendar, { className: "w-5 h-5 text-gray-600" }),
35900
- /* @__PURE__ */ jsxRuntime.jsxs("h2", { className: "text-lg font-semibold text-gray-800", children: [
36085
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 sm:px-5 md:px-6 py-3 sm:py-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col sm:flex-row sm:items-center justify-between gap-3 sm:gap-0", children: [
36086
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 sm:gap-3", children: [
36087
+ /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Calendar, { className: "w-4 h-4 sm:w-5 sm:h-5 text-gray-600" }),
36088
+ /* @__PURE__ */ jsxRuntime.jsxs("h2", { className: "text-base sm:text-lg font-semibold text-gray-800", children: [
35901
36089
  config.name,
35902
36090
  " Shifts"
35903
36091
  ] })
35904
36092
  ] }),
35905
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 sm:gap-4", children: [
35906
- config.isSaving && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium text-blue-600", children: "Saving..." }),
35907
- config.saveSuccess && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium text-green-600", children: "Saved!" }),
36093
+ /* @__PURE__ */ jsxRuntime.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: [
36094
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
36095
+ config.isSaving && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs sm:text-sm font-medium text-blue-600", children: "Saving..." }),
36096
+ config.saveSuccess && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs sm:text-sm font-medium text-green-600", children: "Saved!" })
36097
+ ] }),
35908
36098
  /* @__PURE__ */ jsxRuntime.jsxs(
35909
36099
  "button",
35910
36100
  {
@@ -35914,7 +36104,7 @@ var ShiftsView = ({
35914
36104
  e.stopPropagation();
35915
36105
  handleSaveShifts(config.id);
35916
36106
  },
35917
- 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",
36107
+ 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",
35918
36108
  disabled: config.isSaving,
35919
36109
  "aria-label": "Save shift configuration",
35920
36110
  children: [
@@ -35925,7 +36115,7 @@ var ShiftsView = ({
35925
36115
  )
35926
36116
  ] })
35927
36117
  ] }) }),
35928
- /* @__PURE__ */ jsxRuntime.jsxs("div", { id: `shift-panel-${config.id}`, className: "p-3 sm:p-6 border-t border-gray-200 w-full", children: [
36118
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { id: `shift-panel-${config.id}`, className: "p-3 sm:p-4 md:p-6 border-t border-gray-200 w-full", children: [
35929
36119
  /* @__PURE__ */ jsxRuntime.jsx(
35930
36120
  ShiftPanel,
35931
36121
  {
@@ -36706,54 +36896,105 @@ var SKUList = ({
36706
36896
  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-sm text-gray-500", children: "Get started by creating a new SKU for production planning." })
36707
36897
  ] }) });
36708
36898
  }
36709
- return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "min-w-full divide-y divide-gray-200", children: [
36710
- /* @__PURE__ */ jsxRuntime.jsx("thead", { className: "bg-gray-50", children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
36711
- /* @__PURE__ */ jsxRuntime.jsx("th", { scope: "col", className: "px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider", children: "SKU ID" }),
36712
- /* @__PURE__ */ jsxRuntime.jsx("th", { scope: "col", className: "px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider", children: "Production Target" }),
36713
- /* @__PURE__ */ jsxRuntime.jsx("th", { scope: "col", className: "px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider", children: "Attributes" }),
36714
- /* @__PURE__ */ jsxRuntime.jsx("th", { scope: "col", className: "px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider", children: "Status" }),
36715
- /* @__PURE__ */ jsxRuntime.jsx("th", { scope: "col", className: "px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider", children: "Created" }),
36716
- /* @__PURE__ */ jsxRuntime.jsx("th", { scope: "col", className: "relative px-6 py-3", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Actions" }) })
36717
- ] }) }),
36718
- /* @__PURE__ */ jsxRuntime.jsx("tbody", { className: "bg-white divide-y divide-gray-200", children: skus.map((sku) => /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: "hover:bg-gray-50 transition-colors duration-150", children: [
36719
- /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-6 py-4 whitespace-nowrap", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-semibold text-gray-900", children: sku.sku_id }) }),
36720
- /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-6 py-4 whitespace-nowrap", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-sm font-medium text-gray-700", children: [
36721
- sku.production_target.toLocaleString(),
36722
- " units/day"
36899
+ return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
36900
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden lg:block bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "min-w-full divide-y divide-gray-200", children: [
36901
+ /* @__PURE__ */ jsxRuntime.jsx("thead", { className: "bg-gray-50", children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
36902
+ /* @__PURE__ */ jsxRuntime.jsx("th", { scope: "col", className: "px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider", children: "SKU ID" }),
36903
+ /* @__PURE__ */ jsxRuntime.jsx("th", { scope: "col", className: "px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider", children: "Production Target" }),
36904
+ /* @__PURE__ */ jsxRuntime.jsx("th", { scope: "col", className: "px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider", children: "Attributes" }),
36905
+ /* @__PURE__ */ jsxRuntime.jsx("th", { scope: "col", className: "px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider", children: "Status" }),
36906
+ /* @__PURE__ */ jsxRuntime.jsx("th", { scope: "col", className: "px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider", children: "Created" }),
36907
+ /* @__PURE__ */ jsxRuntime.jsx("th", { scope: "col", className: "relative px-6 py-3", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Actions" }) })
36723
36908
  ] }) }),
36724
- /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-6 py-4", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-gray-500", children: Object.keys(sku.attributes || {}).length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-400", children: "No attributes" }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-xs truncate", children: Object.entries(sku.attributes).map(([key, value], index) => /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
36725
- index > 0 && ", ",
36726
- /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-medium", children: [
36727
- key,
36728
- ":"
36909
+ /* @__PURE__ */ jsxRuntime.jsx("tbody", { className: "bg-white divide-y divide-gray-200", children: skus.map((sku) => /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: "hover:bg-gray-50 transition-colors duration-150", children: [
36910
+ /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-6 py-4 whitespace-nowrap", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-semibold text-gray-900", children: sku.sku_id }) }),
36911
+ /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-6 py-4 whitespace-nowrap", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-sm font-medium text-gray-700", children: [
36912
+ sku.production_target.toLocaleString(),
36913
+ " units/day"
36914
+ ] }) }),
36915
+ /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-6 py-4", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-gray-500", children: Object.keys(sku.attributes || {}).length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-400", children: "No attributes" }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-xs truncate", children: Object.entries(sku.attributes).map(([key, value], index) => /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
36916
+ index > 0 && ", ",
36917
+ /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-medium", children: [
36918
+ key,
36919
+ ":"
36920
+ ] }),
36921
+ " ",
36922
+ String(value)
36923
+ ] }, key)) }) }) }),
36924
+ /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-6 py-4 whitespace-nowrap", children: /* @__PURE__ */ jsxRuntime.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" }) }),
36925
+ /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-6 py-4 whitespace-nowrap text-sm text-gray-500", children: new Date(sku.created_at).toLocaleDateString() }),
36926
+ /* @__PURE__ */ jsxRuntime.jsxs("td", { className: "px-6 py-4 whitespace-nowrap text-right text-sm font-medium", children: [
36927
+ /* @__PURE__ */ jsxRuntime.jsx(
36928
+ "button",
36929
+ {
36930
+ onClick: () => onEdit(sku),
36931
+ className: "text-blue-600 hover:text-blue-800 mr-3 transition-colors duration-150 p-1 hover:bg-blue-50 rounded",
36932
+ title: "Edit SKU",
36933
+ children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Edit2, { className: "w-4 h-4" })
36934
+ }
36935
+ ),
36936
+ /* @__PURE__ */ jsxRuntime.jsx(
36937
+ "button",
36938
+ {
36939
+ onClick: () => onDelete(sku),
36940
+ className: "text-red-600 hover:text-red-800 transition-colors duration-150 p-1 hover:bg-red-50 rounded",
36941
+ title: "Delete SKU",
36942
+ children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { className: "w-4 h-4" })
36943
+ }
36944
+ )
36945
+ ] })
36946
+ ] }, sku.id)) })
36947
+ ] }) }) }),
36948
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lg:hidden space-y-3 sm:space-y-4", children: skus.map((sku) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-white rounded-xl shadow-sm border border-gray-200 p-4 hover:shadow-md transition-all duration-200", children: [
36949
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between mb-3", children: [
36950
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
36951
+ /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-base sm:text-lg font-semibold text-gray-900 truncate", children: sku.sku_id }),
36952
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1", children: /* @__PURE__ */ jsxRuntime.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" }) })
36729
36953
  ] }),
36730
- " ",
36731
- String(value)
36732
- ] }, key)) }) }) }),
36733
- /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-6 py-4 whitespace-nowrap", children: /* @__PURE__ */ jsxRuntime.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" }) }),
36734
- /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-6 py-4 whitespace-nowrap text-sm text-gray-500", children: new Date(sku.created_at).toLocaleDateString() }),
36735
- /* @__PURE__ */ jsxRuntime.jsxs("td", { className: "px-6 py-4 whitespace-nowrap text-right text-sm font-medium", children: [
36736
- /* @__PURE__ */ jsxRuntime.jsx(
36737
- "button",
36738
- {
36739
- onClick: () => onEdit(sku),
36740
- className: "text-blue-600 hover:text-blue-800 mr-3 transition-colors duration-150 p-1 hover:bg-blue-50 rounded",
36741
- title: "Edit SKU",
36742
- children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Edit2, { className: "w-4 h-4" })
36743
- }
36744
- ),
36745
- /* @__PURE__ */ jsxRuntime.jsx(
36746
- "button",
36747
- {
36748
- onClick: () => onDelete(sku),
36749
- className: "text-red-600 hover:text-red-800 transition-colors duration-150 p-1 hover:bg-red-50 rounded",
36750
- title: "Delete SKU",
36751
- children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { className: "w-4 h-4" })
36752
- }
36753
- )
36954
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 ml-3", children: [
36955
+ /* @__PURE__ */ jsxRuntime.jsx(
36956
+ "button",
36957
+ {
36958
+ onClick: () => onEdit(sku),
36959
+ className: "text-blue-600 hover:text-blue-800 transition-colors duration-150 p-2 hover:bg-blue-50 rounded-lg",
36960
+ title: "Edit SKU",
36961
+ children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Edit2, { className: "w-4 h-4" })
36962
+ }
36963
+ ),
36964
+ /* @__PURE__ */ jsxRuntime.jsx(
36965
+ "button",
36966
+ {
36967
+ onClick: () => onDelete(sku),
36968
+ className: "text-red-600 hover:text-red-800 transition-colors duration-150 p-2 hover:bg-red-50 rounded-lg",
36969
+ title: "Delete SKU",
36970
+ children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { className: "w-4 h-4" })
36971
+ }
36972
+ )
36973
+ ] })
36974
+ ] }),
36975
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-3", children: [
36976
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs font-medium text-gray-500 uppercase tracking-wider mb-1", children: "Production Target" }),
36977
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-sm sm:text-base font-medium text-gray-700", children: [
36978
+ sku.production_target.toLocaleString(),
36979
+ " units/day"
36980
+ ] })
36981
+ ] }),
36982
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-3", children: [
36983
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs font-medium text-gray-500 uppercase tracking-wider mb-1", children: "Attributes" }),
36984
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-gray-500", children: Object.keys(sku.attributes || {}).length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-400 italic", children: "No attributes" }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-1", children: Object.entries(sku.attributes).map(([key, value]) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between", children: [
36985
+ /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-medium text-gray-600", children: [
36986
+ key,
36987
+ ":"
36988
+ ] }),
36989
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-900", children: String(value) })
36990
+ ] }, key)) }) })
36991
+ ] }),
36992
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-xs text-gray-500", children: [
36993
+ "Created: ",
36994
+ new Date(sku.created_at).toLocaleDateString()
36754
36995
  ] })
36755
36996
  ] }, sku.id)) })
36756
- ] }) }) });
36997
+ ] });
36757
36998
  };
36758
36999
  var TargetsViewUI = ({
36759
37000
  isLoading,
@@ -36786,8 +37027,8 @@ var TargetsViewUI = ({
36786
37027
  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-screen bg-gray-50", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(OptifyeLogoLoader_default, { size: "lg", message: "Loading targets..." }) }) });
36787
37028
  }
36788
37029
  return /* @__PURE__ */ jsxRuntime.jsxs("main", { className: "min-h-screen flex-1 bg-gray-50", children: [
36789
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-white px-8 py-6 shadow-sm border-b border-gray-200/80", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between relative", children: [
36790
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-0", children: /* @__PURE__ */ jsxRuntime.jsx(
37030
+ /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3 sm:gap-4 relative", children: [
37031
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sm:absolute sm:left-0", children: /* @__PURE__ */ jsxRuntime.jsx(
36791
37032
  BackButtonMinimal,
36792
37033
  {
36793
37034
  onClick: onBack,
@@ -36796,30 +37037,30 @@ var TargetsViewUI = ({
36796
37037
  "aria-label": "Navigate back to previous page"
36797
37038
  }
36798
37039
  ) }),
36799
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute right-0", children: /* @__PURE__ */ jsxRuntime.jsxs(
37040
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sm:absolute sm:right-0 w-full sm:w-auto", children: /* @__PURE__ */ jsxRuntime.jsxs(
36800
37041
  "button",
36801
37042
  {
36802
- 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",
37043
+ 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",
36803
37044
  onClick: onToggleBulkConfigure,
36804
37045
  children: [
36805
- /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Settings2, { className: "w-4 h-4 mr-2 inline-block" }),
37046
+ /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Settings2, { className: "w-3 h-3 sm:w-4 sm:h-4 mr-1.5 sm:mr-2 inline-block" }),
36806
37047
  "Bulk Configure"
36807
37048
  ]
36808
37049
  }
36809
37050
  ) }),
36810
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 text-center mx-auto", children: [
36811
- /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-3xl font-semibold text-gray-900", children: "Production Targets" }),
36812
- /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-sm text-gray-500", children: "Configure production targets and metrics for each line and workspace" })
37051
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 text-center mx-auto mt-2 sm:mt-0", children: [
37052
+ /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-lg sm:text-xl md:text-2xl lg:text-3xl font-semibold text-gray-900", children: "Production Targets" }),
37053
+ /* @__PURE__ */ jsxRuntime.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" })
36813
37054
  ] })
36814
37055
  ] }) }),
36815
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-8 py-6", children: [
36816
- /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("p", { className: "text-sm text-blue-700 font-medium", children: "Click on a line to expand and configure individual workspace targets." }) }),
36817
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-6 flex justify-center relative", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "inline-flex bg-gray-100 p-1 rounded-lg", children: [
37056
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-4 sm:px-6 md:px-8 py-4 sm:py-5 md:py-6", children: [
37057
+ /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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." }) }),
37058
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4 sm:mb-6 flex justify-center relative", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "inline-flex bg-gray-100 p-1 rounded-lg w-full max-w-xs sm:w-auto", children: [
36818
37059
  /* @__PURE__ */ jsxRuntime.jsx(
36819
37060
  "button",
36820
37061
  {
36821
37062
  onClick: () => onShiftChange(0),
36822
- 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"}`,
37063
+ 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"}`,
36823
37064
  children: "Day Shift"
36824
37065
  }
36825
37066
  ),
@@ -36827,7 +37068,7 @@ var TargetsViewUI = ({
36827
37068
  "button",
36828
37069
  {
36829
37070
  onClick: () => onShiftChange(1),
36830
- 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"}`,
37071
+ 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"}`,
36831
37072
  children: "Night Shift"
36832
37073
  }
36833
37074
  )
@@ -36837,35 +37078,37 @@ var TargetsViewUI = ({
36837
37078
  {
36838
37079
  className: "bg-white rounded-xl border border-gray-200 shadow-sm hover:shadow-md transition-all duration-200",
36839
37080
  children: [
36840
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-6 py-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
36841
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-6", children: [
37081
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 sm:px-4 md:px-6 py-3 sm:py-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col lg:flex-row lg:items-center justify-between gap-3 lg:gap-4", children: [
37082
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col sm:flex-row sm:items-center gap-3 sm:gap-4 lg:gap-6", children: [
36842
37083
  /* @__PURE__ */ jsxRuntime.jsxs(
36843
37084
  "button",
36844
37085
  {
36845
37086
  onClick: () => onToggleLineDropdown(lineId),
36846
- 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",
37087
+ 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",
36847
37088
  "aria-expanded": dropdownStates[lineId],
36848
37089
  "aria-controls": `line-${lineId}-content`,
36849
37090
  children: [
36850
37091
  /* @__PURE__ */ jsxRuntime.jsx(
36851
37092
  lucideReact.ChevronDown,
36852
37093
  {
36853
- className: `w-5 h-5 text-blue-500 transform transition-transform duration-200 ${dropdownStates[lineId] ? "rotate-180" : ""}`
37094
+ className: `w-4 h-4 sm:w-5 sm:h-5 text-blue-500 transform transition-transform duration-200 ${dropdownStates[lineId] ? "rotate-180" : ""}`
36854
37095
  }
36855
37096
  ),
36856
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2.5", children: [
36857
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-lg text-gray-900 group-hover:text-blue-600", children: lineNames[lineId] || lineId }),
36858
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-normal text-gray-400", children: "\u2022" }),
36859
- /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm font-medium text-gray-500", children: [
36860
- line.workspaces.length,
36861
- " workspaces"
37097
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col sm:flex-row sm:items-center gap-1 sm:gap-2.5", children: [
37098
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-base sm:text-lg text-gray-900 group-hover:text-blue-600", children: lineNames[lineId] || lineId }),
37099
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
37100
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "hidden sm:inline text-sm font-normal text-gray-400", children: "\u2022" }),
37101
+ /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs sm:text-sm font-medium text-gray-500", children: [
37102
+ line.workspaces.length,
37103
+ " workspaces"
37104
+ ] })
36862
37105
  ] })
36863
37106
  ] })
36864
37107
  ]
36865
37108
  }
36866
37109
  ),
36867
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-8 w-px bg-gray-200/80" }),
36868
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-3", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ml-4 text-sm font-medium text-gray-600", children: [
37110
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden lg:block h-8 w-px bg-gray-200/80" }),
37111
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-3 ml-0 sm:ml-2 lg:ml-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-xs sm:text-sm font-medium text-gray-600", children: [
36869
37112
  line.shiftStartTime,
36870
37113
  " \u2013 ",
36871
37114
  line.shiftEndTime,
@@ -36874,9 +37117,9 @@ var TargetsViewUI = ({
36874
37117
  " hours"
36875
37118
  ] }) })
36876
37119
  ] }),
36877
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [
36878
- saveSuccess[lineId] && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm text-green-600 font-medium flex items-center gap-1.5", children: [
36879
- /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckCircle2, { className: "w-4 h-4" }),
37120
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col sm:flex-row items-start sm:items-center gap-2 sm:gap-4", children: [
37121
+ saveSuccess[lineId] && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs sm:text-sm text-green-600 font-medium flex items-center gap-1.5", children: [
37122
+ /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckCircle2, { className: "w-3 h-3 sm:w-4 sm:h-4" }),
36880
37123
  "Saved successfully"
36881
37124
  ] }),
36882
37125
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -36884,13 +37127,13 @@ var TargetsViewUI = ({
36884
37127
  {
36885
37128
  onClick: () => onSaveLine(lineId),
36886
37129
  disabled: savingLines[lineId],
36887
- className: `ml-6 inline-flex items-center px-4 py-2 text-sm font-medium rounded-lg transition-all duration-200
37130
+ 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
36888
37131
  ${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"}`,
36889
37132
  children: savingLines[lineId] ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
36890
- /* @__PURE__ */ jsxRuntime.jsx(OptifyeLogoLoader_default, { size: "sm", className: "mr-2" }),
37133
+ /* @__PURE__ */ jsxRuntime.jsx(OptifyeLogoLoader_default, { size: "sm", className: "mr-1.5 sm:mr-2" }),
36891
37134
  "Saving..."
36892
37135
  ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
36893
- /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Save, { className: "w-4 h-4 mr-2" }),
37136
+ /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Save, { className: "w-3 h-3 sm:w-4 sm:h-4 mr-1.5 sm:mr-2" }),
36894
37137
  "Save Changes"
36895
37138
  ] })
36896
37139
  }
@@ -36898,9 +37141,9 @@ var TargetsViewUI = ({
36898
37141
  ] })
36899
37142
  ] }) }),
36900
37143
  dropdownStates[lineId] && /* @__PURE__ */ jsxRuntime.jsxs("div", { id: `line-${lineId}-content`, className: "border-t border-gray-200", children: [
36901
- skuEnabled && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-6 py-4 border-b border-gray-200 bg-gray-50/50", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [
36902
- /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: `sku-${lineId}`, className: "text-sm font-medium text-gray-700", children: "Select SKU:" }),
36903
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 max-w-md", children: /* @__PURE__ */ jsxRuntime.jsx(
37144
+ skuEnabled && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex flex-col sm:flex-row sm:items-center gap-3 sm:gap-4", children: [
37145
+ /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: `sku-${lineId}`, className: "text-sm font-medium text-gray-700 flex-shrink-0", children: "Select SKU:" }),
37146
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 max-w-full sm:max-w-md", children: /* @__PURE__ */ jsxRuntime.jsx(
36904
37147
  SKUSelector,
36905
37148
  {
36906
37149
  onSelect: (sku) => onUpdateSelectedSKU?.(lineId, sku),
@@ -36911,14 +37154,14 @@ var TargetsViewUI = ({
36911
37154
  className: "w-full"
36912
37155
  }
36913
37156
  ) }),
36914
- line.selectedSKU && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-sm text-gray-600", children: [
37157
+ line.selectedSKU && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-xs sm:text-sm text-gray-600 mt-2 sm:mt-0", children: [
36915
37158
  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: "Production Target:" }),
36916
37159
  " ",
36917
37160
  line.selectedSKU.production_target.toLocaleString(),
36918
37161
  " units/day"
36919
37162
  ] })
36920
37163
  ] }) }),
36921
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-6 py-3 bg-gray-50 border-b border-gray-200", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-12 gap-6 text-sm font-medium text-gray-600", children: [
37164
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden lg:block px-6 py-3 bg-gray-50 border-b border-gray-200", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-12 gap-6 text-sm font-medium text-gray-600", children: [
36922
37165
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-2", children: "Workspace" }),
36923
37166
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-2", children: "Action Type" }),
36924
37167
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "col-span-3", children: [
@@ -36936,76 +37179,170 @@ var TargetsViewUI = ({
36936
37179
  ] }) }),
36937
37180
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "divide-y divide-gray-100", children: line.workspaces.map((workspace) => {
36938
37181
  const formattedName = formatWorkspaceName(workspace.name, lineId);
36939
- return /* @__PURE__ */ jsxRuntime.jsx(
37182
+ return /* @__PURE__ */ jsxRuntime.jsxs(
36940
37183
  "div",
36941
37184
  {
36942
- className: "px-6 py-4 hover:bg-gray-50 transition-all duration-200",
36943
- children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-12 gap-6 items-center", children: [
36944
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-2", children: onUpdateWorkspaceDisplayName ? /* @__PURE__ */ jsxRuntime.jsx(
36945
- InlineEditableText,
36946
- {
36947
- value: formattedName,
36948
- onSave: async (newName) => {
36949
- await onUpdateWorkspaceDisplayName(workspace.id, newName);
36950
- },
36951
- placeholder: "Workspace name",
36952
- className: "font-medium text-gray-900",
36953
- inputClassName: "min-w-[120px]"
36954
- }
36955
- ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-gray-900", children: formattedName }) }),
36956
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-2", children: /* @__PURE__ */ jsxRuntime.jsxs(
36957
- "select",
36958
- {
36959
- value: workspace.actionType,
36960
- onChange: (e) => {
36961
- const newActionType = e.target.value;
36962
- onActionTypeChange(lineId, workspace.id, newActionType);
36963
- },
36964
- className: "w-full p-2 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm",
36965
- "aria-label": `Action type for ${formattedName}`,
36966
- children: [
36967
- /* @__PURE__ */ jsxRuntime.jsx("option", { value: "assembly", className: "py-2", children: "Assembly" }),
36968
- /* @__PURE__ */ jsxRuntime.jsx("option", { value: "packaging", className: "py-2", children: "Packaging" })
36969
- ]
36970
- }
36971
- ) }),
36972
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-3", children: /* @__PURE__ */ jsxRuntime.jsx(
36973
- "input",
36974
- {
36975
- type: "number",
36976
- value: workspace.targetCycleTime === 0 ? "" : workspace.targetCycleTime,
36977
- onChange: (e) => onUpdateWorkspaceTarget(lineId, workspace.id, "targetCycleTime", Number(e.target.value) || ""),
36978
- 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",
36979
- min: "0",
36980
- step: "0.01",
36981
- placeholder: "Enter cycle time"
36982
- }
36983
- ) }),
36984
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-3", children: /* @__PURE__ */ jsxRuntime.jsx(
36985
- "input",
36986
- {
36987
- type: "number",
36988
- value: workspace.targetPPH === 0 ? "" : workspace.targetPPH,
36989
- onChange: (e) => onUpdateWorkspaceTarget(lineId, workspace.id, "targetPPH", Number(e.target.value) || ""),
36990
- 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",
36991
- min: "0",
36992
- step: "0.1",
36993
- placeholder: "Enter PPH"
36994
- }
36995
- ) }),
36996
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-2", children: /* @__PURE__ */ jsxRuntime.jsx(
36997
- "input",
36998
- {
36999
- type: "number",
37000
- value: workspace.targetDayOutput === 0 ? "" : workspace.targetDayOutput,
37001
- onChange: (e) => onUpdateWorkspaceTarget(lineId, workspace.id, "targetDayOutput", Number(e.target.value) || ""),
37002
- 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",
37003
- min: "0",
37004
- step: "1",
37005
- placeholder: "Enter day output"
37006
- }
37007
- ) })
37008
- ] })
37185
+ className: "px-3 sm:px-4 lg:px-6 py-3 sm:py-4 hover:bg-gray-50 transition-all duration-200",
37186
+ children: [
37187
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "hidden lg:grid lg:grid-cols-12 lg:gap-6 lg:items-center", children: [
37188
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-2", children: onUpdateWorkspaceDisplayName ? /* @__PURE__ */ jsxRuntime.jsx(
37189
+ InlineEditableText,
37190
+ {
37191
+ value: formattedName,
37192
+ onSave: async (newName) => {
37193
+ await onUpdateWorkspaceDisplayName(workspace.id, newName);
37194
+ },
37195
+ placeholder: "Workspace name",
37196
+ className: "font-medium text-gray-900",
37197
+ inputClassName: "min-w-[120px]"
37198
+ }
37199
+ ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-gray-900", children: formattedName }) }),
37200
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-2", children: /* @__PURE__ */ jsxRuntime.jsxs(
37201
+ "select",
37202
+ {
37203
+ value: workspace.actionType,
37204
+ onChange: (e) => {
37205
+ const newActionType = e.target.value;
37206
+ onActionTypeChange(lineId, workspace.id, newActionType);
37207
+ },
37208
+ className: "w-full p-2 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm",
37209
+ "aria-label": `Action type for ${formattedName}`,
37210
+ children: [
37211
+ /* @__PURE__ */ jsxRuntime.jsx("option", { value: "assembly", className: "py-2", children: "Assembly" }),
37212
+ /* @__PURE__ */ jsxRuntime.jsx("option", { value: "packaging", className: "py-2", children: "Packaging" })
37213
+ ]
37214
+ }
37215
+ ) }),
37216
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-3", children: /* @__PURE__ */ jsxRuntime.jsx(
37217
+ "input",
37218
+ {
37219
+ type: "number",
37220
+ value: workspace.targetCycleTime === 0 ? "" : workspace.targetCycleTime,
37221
+ onChange: (e) => onUpdateWorkspaceTarget(lineId, workspace.id, "targetCycleTime", Number(e.target.value) || ""),
37222
+ 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",
37223
+ min: "0",
37224
+ step: "0.01",
37225
+ placeholder: "Enter cycle time"
37226
+ }
37227
+ ) }),
37228
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-3", children: /* @__PURE__ */ jsxRuntime.jsx(
37229
+ "input",
37230
+ {
37231
+ type: "number",
37232
+ value: workspace.targetPPH === 0 ? "" : workspace.targetPPH,
37233
+ onChange: (e) => onUpdateWorkspaceTarget(lineId, workspace.id, "targetPPH", Number(e.target.value) || ""),
37234
+ 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",
37235
+ min: "0",
37236
+ step: "0.1",
37237
+ placeholder: "Enter PPH"
37238
+ }
37239
+ ) }),
37240
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-2", children: /* @__PURE__ */ jsxRuntime.jsx(
37241
+ "input",
37242
+ {
37243
+ type: "number",
37244
+ value: workspace.targetDayOutput === 0 ? "" : workspace.targetDayOutput,
37245
+ onChange: (e) => onUpdateWorkspaceTarget(lineId, workspace.id, "targetDayOutput", Number(e.target.value) || ""),
37246
+ 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",
37247
+ min: "0",
37248
+ step: "1",
37249
+ placeholder: "Enter day output"
37250
+ }
37251
+ ) })
37252
+ ] }),
37253
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lg:hidden space-y-4", children: [
37254
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
37255
+ /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-sm font-medium text-gray-700", children: "Workspace" }),
37256
+ onUpdateWorkspaceDisplayName ? /* @__PURE__ */ jsxRuntime.jsx(
37257
+ InlineEditableText,
37258
+ {
37259
+ value: formattedName,
37260
+ onSave: async (newName) => {
37261
+ await onUpdateWorkspaceDisplayName(workspace.id, newName);
37262
+ },
37263
+ placeholder: "Workspace name",
37264
+ className: "font-medium text-gray-900 text-base",
37265
+ inputClassName: "min-w-full"
37266
+ }
37267
+ ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-gray-900 text-base", children: formattedName })
37268
+ ] }),
37269
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
37270
+ /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-sm font-medium text-gray-700", children: "Action Type" }),
37271
+ /* @__PURE__ */ jsxRuntime.jsxs(
37272
+ "select",
37273
+ {
37274
+ value: workspace.actionType,
37275
+ onChange: (e) => {
37276
+ const newActionType = e.target.value;
37277
+ onActionTypeChange(lineId, workspace.id, newActionType);
37278
+ },
37279
+ className: "w-full p-3 border border-gray-300 rounded-lg shadow-sm focus:ring-blue-500 focus:border-blue-500 text-sm",
37280
+ "aria-label": `Action type for ${formattedName}`,
37281
+ children: [
37282
+ /* @__PURE__ */ jsxRuntime.jsx("option", { value: "assembly", children: "Assembly" }),
37283
+ /* @__PURE__ */ jsxRuntime.jsx("option", { value: "packaging", children: "Packaging" })
37284
+ ]
37285
+ }
37286
+ )
37287
+ ] }),
37288
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-4", children: [
37289
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
37290
+ /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "text-sm font-medium text-gray-700", children: [
37291
+ "Target Cycle Time",
37292
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block text-xs text-gray-400", children: "seconds per piece" })
37293
+ ] }),
37294
+ /* @__PURE__ */ jsxRuntime.jsx(
37295
+ "input",
37296
+ {
37297
+ type: "number",
37298
+ value: workspace.targetCycleTime === 0 ? "" : workspace.targetCycleTime,
37299
+ onChange: (e) => onUpdateWorkspaceTarget(lineId, workspace.id, "targetCycleTime", Number(e.target.value) || ""),
37300
+ 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",
37301
+ min: "0",
37302
+ step: "0.01",
37303
+ placeholder: "Enter cycle time"
37304
+ }
37305
+ )
37306
+ ] }),
37307
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
37308
+ /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "text-sm font-medium text-gray-700", children: [
37309
+ "Target PPH",
37310
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block text-xs text-gray-400", children: "pieces per hour" })
37311
+ ] }),
37312
+ /* @__PURE__ */ jsxRuntime.jsx(
37313
+ "input",
37314
+ {
37315
+ type: "number",
37316
+ value: workspace.targetPPH === 0 ? "" : workspace.targetPPH,
37317
+ onChange: (e) => onUpdateWorkspaceTarget(lineId, workspace.id, "targetPPH", Number(e.target.value) || ""),
37318
+ 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",
37319
+ min: "0",
37320
+ step: "0.1",
37321
+ placeholder: "Enter PPH"
37322
+ }
37323
+ )
37324
+ ] })
37325
+ ] }),
37326
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
37327
+ /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "text-sm font-medium text-gray-700", children: [
37328
+ "Total Day Output",
37329
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block text-xs text-gray-400", children: "pieces per day" })
37330
+ ] }),
37331
+ /* @__PURE__ */ jsxRuntime.jsx(
37332
+ "input",
37333
+ {
37334
+ type: "number",
37335
+ value: workspace.targetDayOutput === 0 ? "" : workspace.targetDayOutput,
37336
+ onChange: (e) => onUpdateWorkspaceTarget(lineId, workspace.id, "targetDayOutput", Number(e.target.value) || ""),
37337
+ 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",
37338
+ min: "0",
37339
+ step: "1",
37340
+ placeholder: "Enter day output"
37341
+ }
37342
+ )
37343
+ ] })
37344
+ ] })
37345
+ ]
37009
37346
  },
37010
37347
  workspace.id
37011
37348
  );
@@ -38111,9 +38448,9 @@ var WorkspaceDetailView = ({
38111
38448
  animate: { opacity: 1 },
38112
38449
  transition: { duration: 0.3 },
38113
38450
  children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-h-screen w-full flex flex-col bg-slate-50", children: [
38114
- /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "relative flex items-center", children: [
38115
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-0 animate-pulse", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-8 w-20 bg-gray-200 rounded" }) }),
38116
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-1/2 transform -translate-x-1/2 animate-pulse", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-6 w-40 bg-gray-200 rounded" }) }),
38451
+ /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "relative flex items-center", children: [
38452
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-0 animate-pulse", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-6 sm:h-7 md:h-8 w-16 sm:w-20 bg-gray-200 rounded" }) }),
38453
+ /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "h-5 sm:h-6 md:h-7 w-28 sm:w-36 md:w-40 bg-gray-200 rounded" }) }),
38117
38454
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-8" })
38118
38455
  ] }) }),
38119
38456
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 p-4 sm:p-6 lg:p-8", children: [
@@ -38174,8 +38511,35 @@ var WorkspaceDetailView = ({
38174
38511
  animate: { opacity: 1 },
38175
38512
  children: [
38176
38513
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-h-screen w-full flex flex-col bg-slate-50", children: [
38177
- /* @__PURE__ */ jsxRuntime.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: [
38178
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex items-center", children: [
38514
+ /* @__PURE__ */ jsxRuntime.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: [
38515
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sm:hidden", children: [
38516
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-2", children: [
38517
+ /* @__PURE__ */ jsxRuntime.jsx(
38518
+ BackButtonMinimal,
38519
+ {
38520
+ onClick: handleBackNavigation,
38521
+ 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",
38522
+ size: "sm",
38523
+ "aria-label": "Navigate back to previous page"
38524
+ }
38525
+ ),
38526
+ workspaceHealth && activeTab !== "monthly_history" && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-gray-500", children: workspaceHealth.timeSinceLastUpdate })
38527
+ ] }),
38528
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-2", children: [
38529
+ /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-base font-semibold text-gray-900 truncate max-w-[250px]", children: formattedWorkspaceName }),
38530
+ workspaceHealth && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex h-2 w-2", children: [
38531
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: clsx(
38532
+ "animate-ping absolute inline-flex h-full w-full rounded-full opacity-75",
38533
+ workspaceHealth.status === "healthy" ? "bg-green-400" : "bg-red-400"
38534
+ ) }),
38535
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: clsx(
38536
+ "relative inline-flex rounded-full h-2 w-2",
38537
+ workspaceHealth.status === "healthy" ? "bg-green-500" : "bg-red-500"
38538
+ ) })
38539
+ ] })
38540
+ ] }) })
38541
+ ] }),
38542
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden sm:block", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex items-center", children: [
38179
38543
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-0 z-10", children: /* @__PURE__ */ jsxRuntime.jsx(
38180
38544
  BackButtonMinimal,
38181
38545
  {
@@ -38185,8 +38549,8 @@ var WorkspaceDetailView = ({
38185
38549
  "aria-label": "Navigate back to previous page"
38186
38550
  }
38187
38551
  ) }),
38188
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-1/2 transform -translate-x-1/2", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
38189
- /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-3xl font-semibold text-gray-900", children: formattedWorkspaceName }),
38552
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-1/2 transform -translate-x-1/2 max-w-[calc(100%-200px)]", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
38553
+ /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-lg md:text-xl lg:text-2xl xl:text-3xl font-semibold text-gray-900 truncate", children: formattedWorkspaceName }),
38190
38554
  workspaceHealth && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex h-2.5 w-2.5", children: [
38191
38555
  /* @__PURE__ */ jsxRuntime.jsx("span", { className: clsx(
38192
38556
  "animate-ping absolute inline-flex h-full w-full rounded-full opacity-75",
@@ -38203,17 +38567,17 @@ var WorkspaceDetailView = ({
38203
38567
  workspaceHealth.timeSinceLastUpdate
38204
38568
  ] }) }),
38205
38569
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-8" })
38206
- ] }),
38207
- activeTab !== "monthly_history" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-3 bg-blue-50 px-3 py-2 rounded-lg", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-4", children: [
38570
+ ] }) }),
38571
+ activeTab !== "monthly_history" && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center justify-center gap-2 sm:gap-3 md:gap-4", children: [
38208
38572
  !date && !shift && !usingFallbackData && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
38209
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-lg font-medium text-blue-600", children: /* @__PURE__ */ jsxRuntime.jsx(LiveTimer, {}) }),
38210
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-px h-4 bg-blue-300" })
38573
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm sm:text-base md:text-lg font-medium text-blue-600", children: /* @__PURE__ */ jsxRuntime.jsx(LiveTimer, {}) }),
38574
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden sm:block w-px h-4 bg-blue-300" })
38211
38575
  ] }),
38212
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-base font-medium text-blue-600", children: formatISTDate2(new Date(workspace.date)) }),
38213
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-px h-4 bg-blue-300" }),
38576
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs sm:text-sm md:text-base font-medium text-blue-600", children: formatISTDate2(new Date(workspace.date)) }),
38577
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden sm:block w-px h-4 bg-blue-300" }),
38214
38578
  date && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
38215
38579
  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "px-2 py-1 text-xs font-medium bg-blue-200 text-blue-800 rounded-md", children: getDaysDifference(workspace.date) }),
38216
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-px h-4 bg-blue-300" })
38580
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden sm:block w-px h-4 bg-blue-300" })
38217
38581
  ] }),
38218
38582
  !date && !shift && usingFallbackData && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
38219
38583
  /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "px-2 py-1 text-xs font-medium bg-amber-100 text-amber-700 rounded-md", children: [
@@ -38221,11 +38585,11 @@ var WorkspaceDetailView = ({
38221
38585
  getDaysDifference(workspace.date),
38222
38586
  ")"
38223
38587
  ] }),
38224
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-px h-4 bg-blue-300" })
38588
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden sm:block w-px h-4 bg-blue-300" })
38225
38589
  ] }),
38226
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
38590
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 sm:gap-2", children: [
38227
38591
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-blue-600", children: getShiftIcon(workspace.shift_type) }),
38228
- /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-base font-medium text-blue-600", children: [
38592
+ /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs sm:text-sm md:text-base font-medium text-blue-600", children: [
38229
38593
  workspace.shift_type,
38230
38594
  " Shift"
38231
38595
  ] })
@@ -38704,8 +39068,8 @@ var SKUManagementView = () => {
38704
39068
  ] }) });
38705
39069
  }
38706
39070
  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-h-screen bg-slate-50", children: [
38707
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sticky top-0 z-10 bg-white border-b border-gray-200/80 shadow-sm", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 sm:px-8 py-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center relative", children: [
38708
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-0", children: /* @__PURE__ */ jsxRuntime.jsx(
39071
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sticky top-0 z-10 bg-white border-b border-gray-200/80 shadow-sm", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 sm:px-4 md:px-6 lg:px-8 py-3 sm:py-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3 sm:gap-4 relative", children: [
39072
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sm:absolute sm:left-0", children: /* @__PURE__ */ jsxRuntime.jsx(
38709
39073
  BackButtonMinimal,
38710
39074
  {
38711
39075
  onClick: handleBack,
@@ -38714,24 +39078,24 @@ var SKUManagementView = () => {
38714
39078
  "aria-label": "Navigate back to previous page"
38715
39079
  }
38716
39080
  ) }),
38717
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 text-center mx-auto", children: [
38718
- /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-3xl font-semibold text-gray-900", children: "SKU Management" }),
38719
- /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-sm text-gray-500", children: "Manage Stock Keeping Units (SKUs) for production planning" })
39081
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 text-center mx-auto mt-2 sm:mt-0", children: [
39082
+ /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-lg sm:text-xl md:text-2xl lg:text-3xl font-semibold text-gray-900", children: "SKU Management" }),
39083
+ /* @__PURE__ */ jsxRuntime.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" })
38720
39084
  ] }),
38721
39085
  /* @__PURE__ */ jsxRuntime.jsxs(
38722
39086
  "button",
38723
39087
  {
38724
39088
  onClick: handleAddNew,
38725
- 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",
39089
+ 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",
38726
39090
  children: [
38727
- /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "w-4 h-4 mr-2" }),
39091
+ /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "w-3 h-3 sm:w-4 sm:h-4 mr-1.5 sm:mr-2" }),
38728
39092
  "Add SKU"
38729
39093
  ]
38730
39094
  }
38731
39095
  )
38732
39096
  ] }) }) }),
38733
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-4 sm:px-8 py-6", children: [
38734
- /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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." }) }),
39097
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-3 sm:px-4 md:px-6 lg:px-8 py-4 sm:py-6", children: [
39098
+ /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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." }) }),
38735
39099
  error ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-red-50 border border-red-200 text-red-700 p-4 rounded-lg", children: [
38736
39100
  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium", children: "Error loading SKUs" }),
38737
39101
  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm mt-1", children: error.message })
@@ -38871,8 +39235,50 @@ var WorkspaceHealthView = ({
38871
39235
  ] }) }) }) });
38872
39236
  }
38873
39237
  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx("min-h-screen bg-slate-50", className), children: [
38874
- /* @__PURE__ */ jsxRuntime.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: [
38875
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex items-center", children: [
39238
+ /* @__PURE__ */ jsxRuntime.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: [
39239
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sm:hidden", children: [
39240
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-2", children: [
39241
+ /* @__PURE__ */ jsxRuntime.jsx(
39242
+ BackButtonMinimal,
39243
+ {
39244
+ onClick: () => router$1.push("/"),
39245
+ text: "Back",
39246
+ size: "sm",
39247
+ "aria-label": "Navigate back to dashboard"
39248
+ }
39249
+ ),
39250
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2", children: [
39251
+ /* @__PURE__ */ jsxRuntime.jsx(
39252
+ "button",
39253
+ {
39254
+ onClick: () => {
39255
+ refetch();
39256
+ },
39257
+ className: "p-1.5 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors",
39258
+ "aria-label": "Refresh",
39259
+ children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RefreshCw, { className: "h-4 w-4" })
39260
+ }
39261
+ ),
39262
+ /* @__PURE__ */ jsxRuntime.jsx(
39263
+ "button",
39264
+ {
39265
+ onClick: handleExport,
39266
+ className: "p-1.5 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors",
39267
+ "aria-label": "Export CSV",
39268
+ children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Download, { className: "h-4 w-4" })
39269
+ }
39270
+ )
39271
+ ] })
39272
+ ] }),
39273
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-2", children: [
39274
+ /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-base font-semibold text-gray-900", children: "System Health" }),
39275
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex h-2 w-2", children: [
39276
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75" }),
39277
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "relative inline-flex rounded-full h-2 w-2 bg-emerald-500" })
39278
+ ] })
39279
+ ] }) })
39280
+ ] }),
39281
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden sm:block", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex items-center", children: [
38876
39282
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-0 z-10", children: /* @__PURE__ */ jsxRuntime.jsx(
38877
39283
  BackButtonMinimal,
38878
39284
  {
@@ -38882,8 +39288,8 @@ var WorkspaceHealthView = ({
38882
39288
  "aria-label": "Navigate back to dashboard"
38883
39289
  }
38884
39290
  ) }),
38885
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-1/2 transform -translate-x-1/2", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
38886
- /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-3xl font-semibold text-gray-900", children: "System Health" }),
39291
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-1/2 transform -translate-x-1/2 max-w-[calc(100%-200px)]", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
39292
+ /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-lg md:text-xl lg:text-2xl xl:text-3xl font-semibold text-gray-900 truncate", children: "System Health" }),
38887
39293
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex h-2.5 w-2.5", children: [
38888
39294
  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75" }),
38889
39295
  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "relative inline-flex rounded-full h-2.5 w-2.5 bg-emerald-500" })
@@ -38912,15 +39318,15 @@ var WorkspaceHealthView = ({
38912
39318
  )
38913
39319
  ] }),
38914
39320
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-8" })
38915
- ] }),
38916
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-3 bg-blue-50 px-3 py-2 rounded-lg", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-4", children: [
38917
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-lg font-medium text-blue-600", children: /* @__PURE__ */ jsxRuntime.jsx(LiveTimer, {}) }),
38918
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-px h-4 bg-blue-300" }),
38919
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-base font-medium text-blue-600", children: formatDate(operationalDate) }),
38920
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-px h-4 bg-blue-300" }),
38921
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
39321
+ ] }) }),
39322
+ /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center justify-center gap-2 sm:gap-4", children: [
39323
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm sm:text-base md:text-lg font-medium text-blue-600", children: /* @__PURE__ */ jsxRuntime.jsx(LiveTimer, {}) }),
39324
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden sm:block w-px h-4 bg-blue-300" }),
39325
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs sm:text-sm md:text-base font-medium text-blue-600", children: formatDate(operationalDate) }),
39326
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden sm:block w-px h-4 bg-blue-300" }),
39327
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 sm:gap-2", children: [
38922
39328
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-blue-600", children: getShiftIcon(shiftType) }),
38923
- /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-base font-medium text-blue-600", children: [
39329
+ /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs sm:text-sm md:text-base font-medium text-blue-600", children: [
38924
39330
  shiftType,
38925
39331
  " Shift"
38926
39332
  ] })
@@ -38937,7 +39343,7 @@ var WorkspaceHealthView = ({
38937
39343
  className: "grid grid-cols-2 sm:grid-cols-2 md:grid-cols-5 gap-2 sm:gap-3 lg:gap-4",
38938
39344
  children: [
38939
39345
  /* @__PURE__ */ jsxRuntime.jsxs(Card2, { className: "col-span-2 sm:col-span-2 md:col-span-2 bg-white", children: [
38940
- /* @__PURE__ */ jsxRuntime.jsx(CardHeader2, { className: "pb-3", children: /* @__PURE__ */ jsxRuntime.jsx(CardTitle2, { className: "text-sm font-medium text-gray-500 dark:text-gray-400", children: "Overall System Uptime Today" }) }),
39346
+ /* @__PURE__ */ jsxRuntime.jsx(CardHeader2, { className: "pb-3", children: /* @__PURE__ */ jsxRuntime.jsx(CardTitle2, { className: "text-sm font-medium text-gray-500 dark:text-gray-400", children: "System Availability" }) }),
38941
39347
  /* @__PURE__ */ jsxRuntime.jsxs(CardContent2, { children: [
38942
39348
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-baseline gap-2", children: [
38943
39349
  /* @__PURE__ */ jsxRuntime.jsxs("span", { className: clsx("text-3xl font-bold", getUptimeColor(summary.uptimePercentage)), children: [
@@ -38946,13 +39352,7 @@ var WorkspaceHealthView = ({
38946
39352
  ] }),
38947
39353
  summary.uptimePercentage >= 97 ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.TrendingUp, { className: "h-5 w-5 text-green-500" }) : summary.uptimePercentage >= 90 ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Activity, { className: "h-5 w-5 text-yellow-500" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.TrendingDown, { className: "h-5 w-5 text-red-500" })
38948
39354
  ] }),
38949
- /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400 mt-1", children: "Average uptime across all workspaces" }),
38950
- /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: [
38951
- summary.healthyWorkspaces,
38952
- " of ",
38953
- summary.totalWorkspaces,
38954
- " workspaces online"
38955
- ] })
39355
+ /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400 mt-1", children: "Overall system uptime today" })
38956
39356
  ] })
38957
39357
  ] }),
38958
39358
  /* @__PURE__ */ jsxRuntime.jsxs(Card2, { className: "bg-white", children: [