@optifye/dashboard-core 6.5.3 → 6.5.4

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 +384 -59
  2. package/dist/index.js +853 -496
  3. package/dist/index.mjs +853 -496
  4. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -21803,11 +21803,13 @@ var VideoCard = React19__namespace.default.memo(({
21803
21803
  return /* @__PURE__ */ jsxRuntime.jsxs(
21804
21804
  "div",
21805
21805
  {
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}`,
21806
+ 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
21807
  style: { width: "100%", height: "100%" },
21808
21808
  onClick: handleClick,
21809
21809
  onMouseEnter,
21810
21810
  onMouseLeave,
21811
+ onTouchStart: (e) => e.currentTarget.classList.add("touch-active"),
21812
+ onTouchEnd: (e) => e.currentTarget.classList.remove("touch-active"),
21811
21813
  title: displayName,
21812
21814
  tabIndex: 0,
21813
21815
  "aria-label": `Open workspace ${displayName}`,
@@ -22902,9 +22904,11 @@ var BreakNotificationPopup = ({
22902
22904
  "button",
22903
22905
  {
22904
22906
  onClick: handleDismiss,
22905
- className: "ml-2 text-gray-400 hover:text-gray-600 transition-colors p-1 rounded-full hover:bg-gray-100",
22907
+ onTouchStart: () => {
22908
+ },
22909
+ 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
22910
  "aria-label": "Dismiss notification",
22907
- children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "w-3 h-3" })
22911
+ children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "w-4 h-4 sm:w-3 sm:h-3" })
22908
22912
  }
22909
22913
  )
22910
22914
  ] })
@@ -26159,7 +26163,7 @@ var SelectTrigger = React19__namespace.forwardRef(({ className, children, ...pro
26159
26163
  {
26160
26164
  ref,
26161
26165
  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",
26166
+ "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
26167
  className
26164
26168
  ),
26165
26169
  ...props,
@@ -28282,7 +28286,7 @@ var WorkspaceGridItem = React19__namespace.default.memo(({
28282
28286
  "button",
28283
28287
  {
28284
28288
  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`,
28289
+ 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
28290
  "aria-label": isInactive ? `Inactive workspace ${workspaceNumber}` : `View details for workspace ${workspaceNumber}`,
28287
28291
  title: isInactive ? `Inactive: ${getWorkspaceDisplayName(data.workspace_name, data.line_id)}` : getWorkspaceDisplayName(data.workspace_name, data.line_id),
28288
28292
  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 +28556,8 @@ var KPICard = ({
28552
28556
  },
28553
28557
  // Width for src matching - better mobile width, flexible on small screens
28554
28558
  !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]",
28559
+ // Interactive styling if onClick is provided - better touch targets
28560
+ onClick && "cursor-pointer hover:scale-[1.01] active:scale-[0.99] touch-manipulation min-h-[44px] min-w-[44px]",
28557
28561
  // Loading state
28558
28562
  isLoading && "animate-pulse",
28559
28563
  // User-provided classes
@@ -28564,6 +28568,8 @@ var KPICard = ({
28564
28568
  {
28565
28569
  className: cardClasses,
28566
28570
  onClick,
28571
+ onTouchStart: onClick ? () => {
28572
+ } : void 0,
28567
28573
  role: onClick ? "button" : void 0,
28568
28574
  tabIndex: onClick ? 0 : void 0,
28569
28575
  onKeyDown: onClick ? (e) => e.key === "Enter" && onClick() : void 0,
@@ -29301,27 +29307,27 @@ var DashboardHeader = React19.memo(({ lineTitle, className = "", headerControls
29301
29307
  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
29308
  }
29303
29309
  };
29304
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex flex-row items-center justify-between w-full ${className}`, children: [
29310
+ 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
29311
  /* @__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" })
29312
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5 sm:gap-2 md:gap-3", children: [
29313
+ /* @__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 }),
29314
+ /* @__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
29315
  ] }),
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: [
29316
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-1 sm:mt-2 inline-flex flex-wrap items-center gap-2 sm:gap-3", children: [
29317
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-[10px] sm:text-xs md:text-sm font-medium text-gray-600 whitespace-nowrap", children: [
29312
29318
  /* @__PURE__ */ jsxRuntime.jsx(ISTTimer2, {}),
29313
29319
  " IST"
29314
29320
  ] }),
29315
29321
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "inline-flex items-center gap-1", children: [
29316
29322
  /* @__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: [
29323
+ /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[10px] sm:text-xs md:text-sm font-medium text-gray-600 whitespace-nowrap", children: [
29318
29324
  getShiftName(),
29319
29325
  " Shift"
29320
29326
  ] })
29321
29327
  ] })
29322
29328
  ] })
29323
29329
  ] }),
29324
- headerControls && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-4", children: headerControls })
29330
+ 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
29331
  ] });
29326
29332
  });
29327
29333
  DashboardHeader.displayName = "DashboardHeader";
@@ -29633,27 +29639,27 @@ var PageHeader = ({
29633
29639
  className
29634
29640
  ),
29635
29641
  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: [
29642
+ /* @__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: [
29643
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 sm:gap-3 min-w-0 flex-1", children: [
29638
29644
  onMobileMenuOpen && /* @__PURE__ */ jsxRuntime.jsx(HamburgerButton, { onClick: onMobileMenuOpen }),
29639
- headerLogo && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0 mr-2 md:hidden", children: headerLogo }),
29645
+ headerLogo && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0 mr-1 sm:mr-2 md:hidden", children: headerLogo }),
29640
29646
  " ",
29641
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col min-w-0", children: [
29647
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col min-w-0 flex-1", children: [
29642
29648
  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 })
29649
+ /* @__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
29650
  ] })
29645
29651
  ] }),
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" }),
29652
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 sm:gap-3 md:gap-4 flex-shrink-0", children: [
29653
+ actions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden sm:flex items-center gap-2", children: actions }),
29654
+ /* @__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: [
29655
+ 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
29656
  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Toggle dark mode" })
29651
29657
  ] }),
29652
- showDateTime && /* @__PURE__ */ jsxRuntime.jsx(DateTimeDisplay, { className: "hidden lg:flex" }),
29658
+ showDateTime && /* @__PURE__ */ jsxRuntime.jsx(DateTimeDisplay, { className: "hidden sm:flex text-xs sm:text-sm" }),
29653
29659
  userProfileConfig && /* @__PURE__ */ jsxRuntime.jsx(UserProfileDropdown, { config: userProfileConfig })
29654
29660
  ] })
29655
29661
  ] }),
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 })
29662
+ 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
29663
  ]
29658
29664
  }
29659
29665
  );
@@ -29677,9 +29683,9 @@ var SideNavBar = React19.memo(({
29677
29683
  const pathname = propPathname || router$1.pathname;
29678
29684
  const getButtonClasses = React19.useCallback((path) => {
29679
29685
  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`;
29686
+ 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
29687
+ ${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"}
29688
+ 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
29689
  }, [pathname]);
29684
29690
  const handleHomeClick = React19.useCallback(() => {
29685
29691
  navigate("/", {
@@ -29843,7 +29849,7 @@ var SideNavBar = React19.memo(({
29843
29849
  "aria-selected": pathname === "/" || pathname.startsWith("//"),
29844
29850
  children: [
29845
29851
  /* @__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" })
29852
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs sm:text-[10px] font-medium leading-tight", children: "Home" })
29847
29853
  ]
29848
29854
  }
29849
29855
  ) }),
@@ -29859,7 +29865,7 @@ var SideNavBar = React19.memo(({
29859
29865
  "aria-selected": pathname === "/leaderboard" || pathname.startsWith("/leaderboard/"),
29860
29866
  children: [
29861
29867
  /* @__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" })
29868
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs sm:text-[10px] font-medium leading-tight", children: "Leaders" })
29863
29869
  ]
29864
29870
  }
29865
29871
  ),
@@ -29874,7 +29880,7 @@ var SideNavBar = React19.memo(({
29874
29880
  "aria-selected": pathname === "/kpis" || pathname.startsWith("/kpis/"),
29875
29881
  children: [
29876
29882
  /* @__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" })
29883
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs sm:text-[10px] font-medium leading-tight", children: "Lines" })
29878
29884
  ]
29879
29885
  }
29880
29886
  ),
@@ -29889,7 +29895,7 @@ var SideNavBar = React19.memo(({
29889
29895
  "aria-selected": pathname === "/targets" || pathname.startsWith("/targets/"),
29890
29896
  children: [
29891
29897
  /* @__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" })
29898
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs sm:text-[10px] font-medium leading-tight", children: "Targets" })
29893
29899
  ]
29894
29900
  }
29895
29901
  ),
@@ -29904,7 +29910,7 @@ var SideNavBar = React19.memo(({
29904
29910
  "aria-selected": pathname === "/shifts" || pathname.startsWith("/shifts/"),
29905
29911
  children: [
29906
29912
  /* @__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" })
29913
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs sm:text-[10px] font-medium leading-tight", children: "Shifts" })
29908
29914
  ]
29909
29915
  }
29910
29916
  ),
@@ -29919,7 +29925,7 @@ var SideNavBar = React19.memo(({
29919
29925
  "aria-selected": pathname === "/skus" || pathname.startsWith("/skus/"),
29920
29926
  children: [
29921
29927
  /* @__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" })
29928
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs sm:text-[10px] font-medium leading-tight", children: "SKUs" })
29923
29929
  ]
29924
29930
  }
29925
29931
  ),
@@ -29934,7 +29940,7 @@ var SideNavBar = React19.memo(({
29934
29940
  "aria-selected": pathname === "/ai-agent" || pathname.startsWith("/ai-agent/"),
29935
29941
  children: [
29936
29942
  /* @__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" })
29943
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs sm:text-[10px] font-medium leading-tight", children: "Axel" })
29938
29944
  ]
29939
29945
  }
29940
29946
  ),
@@ -29949,7 +29955,7 @@ var SideNavBar = React19.memo(({
29949
29955
  "aria-selected": pathname === "/help" || pathname.startsWith("/help/"),
29950
29956
  children: [
29951
29957
  /* @__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" })
29958
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs sm:text-[10px] font-medium leading-tight", children: "Help" })
29953
29959
  ]
29954
29960
  }
29955
29961
  ),
@@ -29964,7 +29970,7 @@ var SideNavBar = React19.memo(({
29964
29970
  "aria-selected": pathname === "/health" || pathname.startsWith("/health/"),
29965
29971
  children: [
29966
29972
  /* @__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" })
29973
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs sm:text-[10px] font-medium leading-tight", children: "Health" })
29968
29974
  ]
29969
29975
  }
29970
29976
  )
@@ -29981,7 +29987,7 @@ var SideNavBar = React19.memo(({
29981
29987
  "aria-selected": pathname === "/profile" || pathname.startsWith("/profile/"),
29982
29988
  children: [
29983
29989
  /* @__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" })
29990
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs sm:text-[10px] font-medium leading-tight", children: "Profile" })
29985
29991
  ]
29986
29992
  }
29987
29993
  ) })
@@ -30311,29 +30317,32 @@ var Header = ({
30311
30317
  const handleLogout = async () => {
30312
30318
  await signOut();
30313
30319
  };
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: [
30320
+ 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: [
30321
+ /* @__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() }) }),
30322
+ user && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex-shrink-0", children: [
30317
30323
  /* @__PURE__ */ jsxRuntime.jsxs(
30318
30324
  "button",
30319
30325
  {
30320
30326
  onClick: () => setShowDropdown(!showDropdown),
30321
- className: "flex items-center gap-2 px-3 py-2 rounded-md hover:bg-gray-100 transition-colors",
30327
+ 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
30328
  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" }) })
30329
+ /* @__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" }),
30330
+ /* @__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 }),
30331
+ /* @__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
30332
  ]
30327
30333
  }
30328
30334
  ),
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
- ) })
30335
+ 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: [
30336
+ /* @__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 }),
30337
+ /* @__PURE__ */ jsxRuntime.jsx(
30338
+ "button",
30339
+ {
30340
+ onClick: handleLogout,
30341
+ className: "block w-full text-left px-4 py-2 text-xs sm:text-sm text-gray-700 hover:bg-gray-100",
30342
+ children: "Sign out"
30343
+ }
30344
+ )
30345
+ ] })
30337
30346
  ] })
30338
30347
  ] }) });
30339
30348
  };
@@ -30684,7 +30693,7 @@ var ThreadSidebar = ({
30684
30693
  ] });
30685
30694
  };
30686
30695
  var axelProfilePng = "/axel-profile.png";
30687
- var ProfilePicture = React19__namespace.default.memo(({ alt = "Axel", className = "w-12 h-12" }) => {
30696
+ 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
30697
  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
30698
  "img",
30690
30699
  {
@@ -32290,54 +32299,105 @@ var AIAgentView = () => {
32290
32299
  }
32291
32300
  `
32292
32301
  } }),
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" })
32302
+ /* @__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: [
32303
+ /* @__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: [
32304
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sm:hidden", children: [
32305
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-2", children: [
32306
+ /* @__PURE__ */ jsxRuntime.jsx(
32307
+ BackButtonMinimal,
32308
+ {
32309
+ onClick: () => navigate("/"),
32310
+ text: "Back",
32311
+ size: "sm",
32312
+ "aria-label": "Navigate back to dashboard"
32313
+ }
32314
+ ),
32315
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
32316
+ /* @__PURE__ */ jsxRuntime.jsxs(
32317
+ "button",
32318
+ {
32319
+ onClick: handleNewThread,
32320
+ 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",
32321
+ children: [
32322
+ /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RefreshCw, { className: "w-3.5 h-3.5" }),
32323
+ /* @__PURE__ */ jsxRuntime.jsx("span", { children: "New" })
32324
+ ]
32325
+ }
32326
+ ),
32327
+ /* @__PURE__ */ jsxRuntime.jsx(
32328
+ "button",
32329
+ {
32330
+ onClick: () => setIsSidebarOpen(!isSidebarOpen),
32331
+ 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",
32332
+ "aria-label": "Toggle chat history",
32333
+ children: isSidebarOpen ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
32334
+ /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "w-3.5 h-3.5" }),
32335
+ /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Hide" })
32336
+ ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
32337
+ /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Menu, { className: "w-3.5 h-3.5" }),
32338
+ /* @__PURE__ */ jsxRuntime.jsx("span", { children: "History" }),
32339
+ 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 })
32340
+ ] })
32341
+ }
32342
+ )
32343
+ ] })
32308
32344
  ] }),
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, {}) }) })
32345
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
32346
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-2 mb-0.5", children: [
32347
+ /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-base font-semibold text-gray-900", children: "Chat with Axel" }),
32348
+ /* @__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" })
32349
+ ] }),
32350
+ /* @__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, {}) }) })
32351
+ ] })
32310
32352
  ] }),
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",
32353
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "hidden sm:flex items-center justify-between relative", children: [
32354
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-0", children: /* @__PURE__ */ jsxRuntime.jsx(
32355
+ BackButtonMinimal,
32325
32356
  {
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
- ] })
32357
+ onClick: () => navigate("/"),
32358
+ text: "Back",
32359
+ size: "default",
32360
+ "aria-label": "Navigate back to dashboard"
32337
32361
  }
32338
- )
32362
+ ) }),
32363
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 text-center mx-auto", children: [
32364
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-3 mb-1", children: [
32365
+ /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-xl md:text-2xl lg:text-3xl font-semibold text-gray-900", children: "Chat with Axel" }),
32366
+ /* @__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" })
32367
+ ] }),
32368
+ /* @__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, {}) }) })
32369
+ ] }),
32370
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute right-0 flex items-center gap-2", children: [
32371
+ /* @__PURE__ */ jsxRuntime.jsxs(
32372
+ "button",
32373
+ {
32374
+ onClick: handleNewThread,
32375
+ 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",
32376
+ children: [
32377
+ /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RefreshCw, { className: "w-4 h-4" }),
32378
+ /* @__PURE__ */ jsxRuntime.jsx("span", { children: "New Chat" })
32379
+ ]
32380
+ }
32381
+ ),
32382
+ /* @__PURE__ */ jsxRuntime.jsx(
32383
+ "button",
32384
+ {
32385
+ onClick: () => setIsSidebarOpen(!isSidebarOpen),
32386
+ 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",
32387
+ "aria-label": "Toggle chat history",
32388
+ children: isSidebarOpen ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
32389
+ /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "w-4 h-4" }),
32390
+ /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Hide History" })
32391
+ ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
32392
+ /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Menu, { className: "w-4 h-4" }),
32393
+ /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Chat History" }),
32394
+ 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 })
32395
+ ] })
32396
+ }
32397
+ )
32398
+ ] })
32339
32399
  ] })
32340
- ] }) }),
32400
+ ] }),
32341
32401
  /* @__PURE__ */ jsxRuntime.jsx(
32342
32402
  "main",
32343
32403
  {
@@ -32345,16 +32405,16 @@ var AIAgentView = () => {
32345
32405
  className: `flex-1 bg-gray-50/50 min-h-0 ${displayMessages.length === 0 && !isTransitioning ? "flex items-center justify-center" : "overflow-y-auto"}`,
32346
32406
  children: !activeThreadId && displayMessages.length === 0 && !isTransitioning ? (
32347
32407
  /* 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: [
32408
+ /* @__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
32409
  /* @__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: [
32410
+ /* @__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" }) }),
32411
+ /* @__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
32412
  typedText,
32353
32413
  typedText.length < "Hi, I'm Axel - Your AI Supervisor".length && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "animate-pulse", children: "|" })
32354
32414
  ] })
32355
32415
  ] }),
32356
32416
  /* @__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: [
32417
+ /* @__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
32418
  /* @__PURE__ */ jsxRuntime.jsx(
32359
32419
  "textarea",
32360
32420
  {
@@ -32385,24 +32445,24 @@ var AIAgentView = () => {
32385
32445
  });
32386
32446
  },
32387
32447
  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",
32448
+ 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
32449
  rows: 1,
32390
- style: { minHeight: "24px", maxHeight: "120px" }
32450
+ style: { minHeight: "40px", maxHeight: "120px" }
32391
32451
  }
32392
32452
  ),
32393
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute right-2 bottom-2 flex items-center gap-2", children: /* @__PURE__ */ jsxRuntime.jsx(
32453
+ /* @__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
32454
  "button",
32395
32455
  {
32396
32456
  type: "submit",
32397
32457
  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",
32458
+ 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
32459
  children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Send, { className: "w-4 h-4" })
32400
32460
  }
32401
32461
  ) })
32402
32462
  ] }) }) }),
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: [
32463
+ /* @__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: [
32464
+ /* @__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" }),
32465
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
32406
32466
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: `w-1.5 h-1.5 rounded-full ${isCurrentThreadLoading ? "bg-orange-500" : "bg-green-500"}` }),
32407
32467
  /* @__PURE__ */ jsxRuntime.jsx("span", { children: isCurrentThreadLoading ? "Responding..." : "Connected" })
32408
32468
  ] })
@@ -32411,17 +32471,17 @@ var AIAgentView = () => {
32411
32471
  ] })
32412
32472
  ) : isTransitioning ? (
32413
32473
  /* 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: [
32474
+ /* @__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
32475
  displayMessages.map((message, index) => /* @__PURE__ */ jsxRuntime.jsxs(
32416
32476
  "div",
32417
32477
  {
32418
- className: `flex gap-4 ${message.role === "user" ? "justify-end" : "justify-start"}`,
32478
+ className: `flex gap-2 sm:gap-3 md:gap-4 ${message.role === "user" ? "justify-end" : "justify-start"}`,
32419
32479
  children: [
32420
32480
  message.role === "assistant" && /* @__PURE__ */ jsxRuntime.jsx(ProfilePicture, {}),
32421
32481
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: `max-w-none w-full group ${message.role === "user" ? "order-1" : ""}`, children: /* @__PURE__ */ jsxRuntime.jsx(
32422
32482
  "div",
32423
32483
  {
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"}`,
32484
+ 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
32485
  children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${message.role === "user" ? "text-white" : "text-gray-800"}`, children: [
32426
32486
  message.role === "assistant" ? message.id === -1 ? /* @__PURE__ */ jsxRuntime.jsx(
32427
32487
  "div",
@@ -32445,18 +32505,18 @@ var AIAgentView = () => {
32445
32505
  ] }) })
32446
32506
  ) : (
32447
32507
  /* 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: [
32508
+ /* @__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
32509
  displayMessages.map((message, index) => /* @__PURE__ */ jsxRuntime.jsxs(
32450
32510
  "div",
32451
32511
  {
32452
- className: `flex gap-4 ${message.role === "user" ? "justify-end" : "justify-start"}`,
32512
+ className: `flex gap-2 sm:gap-3 md:gap-4 ${message.role === "user" ? "justify-end" : "justify-start"}`,
32453
32513
  children: [
32454
32514
  message.role === "assistant" && /* @__PURE__ */ jsxRuntime.jsx(ProfilePicture, {}),
32455
32515
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `max-w-none w-full group ${message.role === "user" ? "order-1" : ""}`, children: [
32456
32516
  /* @__PURE__ */ jsxRuntime.jsxs(
32457
32517
  "div",
32458
32518
  {
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"}`,
32519
+ 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
32520
  children: [
32461
32521
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${message.role === "user" ? "text-white" : "text-gray-800"}`, children: [
32462
32522
  message.role === "assistant" ? message.id === -1 ? /* @__PURE__ */ jsxRuntime.jsx(
@@ -32472,9 +32532,9 @@ var AIAgentView = () => {
32472
32532
  "button",
32473
32533
  {
32474
32534
  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",
32535
+ 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
32536
  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" })
32537
+ 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
32538
  }
32479
32539
  ),
32480
32540
  message.reasoning && /* @__PURE__ */ jsxRuntime.jsxs("details", { className: "mt-3 pt-3 border-t border-gray-200", children: [
@@ -32484,7 +32544,7 @@ var AIAgentView = () => {
32484
32544
  ]
32485
32545
  }
32486
32546
  ),
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: [
32547
+ /* @__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
32548
  /* @__PURE__ */ jsxRuntime.jsx("span", { children: formatTime3(message.created_at) }),
32489
32549
  message.role === "assistant" && message.id !== -1 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
32490
32550
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-1 h-1 bg-gray-300 rounded-full" }),
@@ -32519,15 +32579,15 @@ var AIAgentView = () => {
32519
32579
  )
32520
32580
  }
32521
32581
  ),
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: [
32582
+ (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
32583
  /* @__PURE__ */ jsxRuntime.jsx(
32524
32584
  "div",
32525
32585
  {
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" : ""}`,
32586
+ 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
32587
  style: isTransitioning ? {
32528
32588
  animation: "slideDown 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards"
32529
32589
  } : {},
32530
- children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-end gap-2 p-3", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 relative", children: [
32590
+ 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
32591
  /* @__PURE__ */ jsxRuntime.jsx(
32532
32592
  "textarea",
32533
32593
  {
@@ -32558,33 +32618,33 @@ var AIAgentView = () => {
32558
32618
  });
32559
32619
  },
32560
32620
  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",
32621
+ 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
32622
  rows: 1,
32563
- style: { minHeight: "24px", maxHeight: "120px" }
32623
+ style: { minHeight: "40px", maxHeight: "120px" }
32564
32624
  }
32565
32625
  ),
32566
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute right-2 bottom-2 flex items-center gap-2", children: /* @__PURE__ */ jsxRuntime.jsx(
32626
+ /* @__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
32627
  "button",
32568
32628
  {
32569
32629
  type: "submit",
32570
32630
  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",
32631
+ 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
32632
  children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Send, { className: "w-4 h-4" })
32573
32633
  }
32574
32634
  ) })
32575
32635
  ] }) })
32576
32636
  }
32577
32637
  ),
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: [
32638
+ /* @__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: [
32639
+ /* @__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" }),
32640
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
32581
32641
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: `w-1.5 h-1.5 rounded-full ${isCurrentThreadLoading ? "bg-orange-500" : "bg-green-500"}` }),
32582
32642
  /* @__PURE__ */ jsxRuntime.jsx("span", { children: isCurrentThreadLoading ? "Responding..." : "Connected" })
32583
32643
  ] })
32584
32644
  ] })
32585
32645
  ] }) }) })
32586
32646
  ] }),
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(
32647
+ /* @__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
32648
  ThreadSidebar,
32589
32649
  {
32590
32650
  activeThreadId,
@@ -32966,8 +33026,8 @@ var HelpView = ({
32966
33026
  animate: { opacity: 1 },
32967
33027
  transition: { duration: 0.3 },
32968
33028
  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(
33029
+ /* @__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: [
33030
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sm:absolute sm:left-0", children: /* @__PURE__ */ jsxRuntime.jsx(
32971
33031
  BackButtonMinimal,
32972
33032
  {
32973
33033
  onClick: handleBackClick,
@@ -32976,9 +33036,9 @@ var HelpView = ({
32976
33036
  "aria-label": "Navigate back to dashboard"
32977
33037
  }
32978
33038
  ) }),
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." })
33039
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 text-center mx-auto mt-2 sm:mt-0", children: [
33040
+ /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-lg sm:text-xl md:text-2xl lg:text-3xl font-semibold text-gray-900", children: "Help & Support" }),
33041
+ /* @__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
33042
  ] })
32983
33043
  ] }) }),
32984
33044
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
@@ -33555,11 +33615,11 @@ var MetricCards = React19.memo(({ lineInfo }) => {
33555
33615
  variants: containerVariants,
33556
33616
  initial: "initial",
33557
33617
  animate: "animate",
33558
- className: "grid grid-cols-1 md:grid-cols-3 gap-4 mb-2 md:h-[35vh] h-auto",
33618
+ 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
33619
  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(
33620
+ /* @__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: [
33621
+ /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-sm sm:text-base font-semibold text-gray-700 mb-2 text-center", children: "Line Output" }),
33622
+ /* @__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
33623
  OutputProgressChart,
33564
33624
  {
33565
33625
  currentOutput: lineInfo?.metrics.current_output || 0,
@@ -33567,19 +33627,19 @@ var MetricCards = React19.memo(({ lineInfo }) => {
33567
33627
  }
33568
33628
  ) }) })
33569
33629
  ] }),
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: [
33630
+ /* @__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: [
33631
+ /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-sm sm:text-base font-semibold text-gray-700 text-center mb-2", children: "Underperforming Workspaces" }),
33632
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center h-[calc(100%-2rem)] sm:h-[calc(100%-2.5rem)]", children: [
33633
+ /* @__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 }),
33634
+ /* @__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
33635
  "/ ",
33576
33636
  lineInfo?.metrics.total_workspaces
33577
33637
  ] })
33578
33638
  ] })
33579
33639
  ] }),
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: [
33640
+ /* @__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: [
33641
+ /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-sm sm:text-base font-semibold text-gray-700 text-center mb-2", children: "Average Efficiency" }),
33642
+ /* @__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
33643
  lineInfo?.metrics.avg_efficiency.toFixed(1),
33584
33644
  "%"
33585
33645
  ] }) })
@@ -33624,27 +33684,27 @@ var BottomSection = React19.memo(({
33624
33684
  variants: containerVariants,
33625
33685
  initial: "initial",
33626
33686
  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",
33687
+ 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
33688
  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: [
33689
+ /* @__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
33690
  /* @__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" }),
33691
+ /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-base sm:text-lg font-semibold text-gray-700 text-center flex-1", children: "Poorest Performing Workspaces" }),
33632
33692
  /* @__PURE__ */ jsxRuntime.jsx(
33633
33693
  "div",
33634
33694
  {
33635
33695
  className: "p-1.5 hover:bg-gray-100 rounded-lg transition-colors cursor-pointer",
33636
33696
  onClick: () => handleNavigate && handleNavigate(`/leaderboard`),
33637
- children: /* @__PURE__ */ jsxRuntime.jsx(outline.ArrowRightIcon, { className: "w-5 h-5 text-gray-500" })
33697
+ children: /* @__PURE__ */ jsxRuntime.jsx(outline.ArrowRightIcon, { className: "w-4 h-4 sm:w-5 sm:h-5 text-gray-500" })
33638
33698
  }
33639
33699
  )
33640
33700
  ] }),
33641
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "divide-y overflow-auto flex-1 pr-2", children: [
33701
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "divide-y overflow-auto flex-1 pr-1 sm:pr-2", children: [
33642
33702
  /* @__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" }),
33703
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 sm:gap-3 md:gap-6", children: [
33704
+ /* @__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
33705
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs md:text-sm font-medium text-gray-500", children: "Current/Ideal" })
33646
33706
  ] }),
33647
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs md:text-sm font-medium text-gray-500 pr-2", children: "Efficiency" })
33707
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs md:text-sm font-medium text-gray-500 pr-1 sm:pr-2", children: "Efficiency" })
33648
33708
  ] }),
33649
33709
  lineInfo.metrics.poorest_performing_workspaces && lineInfo.metrics.poorest_performing_workspaces.length > 0 ? lineInfo.metrics.poorest_performing_workspaces.map((ws, index) => {
33650
33710
  const wsMetrics = workspaceData.find((w) => w.workspace_name === ws.workspace_name);
@@ -33666,10 +33726,10 @@ var BottomSection = React19.memo(({
33666
33726
  clickHandler();
33667
33727
  handleNavigate && handleNavigate(fullUrl);
33668
33728
  },
33669
- className: "block py-3 hover:bg-gray-50 transition-colors rounded-lg cursor-pointer",
33729
+ className: "block py-2 sm:py-3 hover:bg-gray-50 transition-colors rounded-lg cursor-pointer",
33670
33730
  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 }) }),
33731
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 sm:gap-3 md:gap-6", children: [
33732
+ /* @__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
33733
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-xs md:text-sm font-medium text-gray-900", children: [
33674
33734
  ws.action_count || 0,
33675
33735
  " / ",
@@ -33700,10 +33760,10 @@ var BottomSection = React19.memo(({
33700
33760
  clickHandler();
33701
33761
  handleNavigate && handleNavigate(fullUrl);
33702
33762
  },
33703
- className: "block py-3 hover:bg-gray-50 transition-colors rounded-lg cursor-pointer",
33763
+ className: "block py-2 sm:py-3 hover:bg-gray-50 transition-colors rounded-lg cursor-pointer",
33704
33764
  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 }) }),
33765
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 sm:gap-3 md:gap-6", children: [
33766
+ /* @__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
33767
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-xs md:text-sm font-medium text-gray-900", children: [
33708
33768
  ws.action_count || 0,
33709
33769
  " / ",
@@ -33722,9 +33782,9 @@ var BottomSection = React19.memo(({
33722
33782
  )
33723
33783
  ] })
33724
33784
  ] }),
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(
33785
+ /* @__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: [
33786
+ /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-base sm:text-lg font-semibold text-gray-700 mb-2 text-center", children: "Hourly Line Output" }),
33787
+ /* @__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
33788
  HourlyOutputChart2,
33729
33789
  {
33730
33790
  data: hourlyOutputData,
@@ -34095,9 +34155,9 @@ var KPIDetailView = ({
34095
34155
  return /* @__PURE__ */ jsxRuntime.jsx(LoadingPage, { message: "Processing line data..." });
34096
34156
  }
34097
34157
  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: [
34158
+ /* @__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
34159
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center relative", children: [
34100
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-0", children: /* @__PURE__ */ jsxRuntime.jsx(
34160
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sm:absolute sm:left-0", children: /* @__PURE__ */ jsxRuntime.jsx(
34101
34161
  BackButtonMinimal,
34102
34162
  {
34103
34163
  onClick: handleBackClick,
@@ -34106,37 +34166,37 @@ var KPIDetailView = ({
34106
34166
  "aria-label": "Navigate back to previous page"
34107
34167
  }
34108
34168
  ) }),
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" })
34169
+ /* @__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: [
34170
+ /* @__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" }),
34171
+ /* @__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
34172
  ] }) })
34113
34173
  ] }),
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: [
34174
+ (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
34175
  !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" })
34176
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm sm:text-base md:text-lg font-medium text-blue-600", children: /* @__PURE__ */ jsxRuntime.jsx(ISTTimer_default, {}) }),
34177
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden sm:block w-px h-4 bg-blue-300" })
34118
34178
  ] }),
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" }),
34179
+ /* @__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)) }),
34180
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden sm:block w-px h-4 bg-blue-300" }),
34121
34181
  urlDate && metrics2.date && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
34122
34182
  /* @__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" })
34183
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden sm:block w-px h-4 bg-blue-300" })
34124
34184
  ] }),
34125
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
34185
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 sm:gap-2", children: [
34126
34186
  /* @__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: [
34187
+ /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs sm:text-sm md:text-base font-medium text-blue-600", children: [
34128
34188
  getShiftName(metrics2.shift_id ?? 0),
34129
34189
  " Shift"
34130
34190
  ] })
34131
34191
  ] })
34132
34192
  ] }) }),
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: [
34193
+ /* @__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: [
34194
+ !urlDate && !urlShift && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-1 sm:gap-2 w-full sm:w-auto", children: [
34135
34195
  /* @__PURE__ */ jsxRuntime.jsx(
34136
34196
  "button",
34137
34197
  {
34138
34198
  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"}`,
34199
+ className: `flex-1 sm:flex-none px-2 sm:px-3 py-1.5 text-xs sm:text-sm font-medium rounded-lg transition-colors whitespace-nowrap ${activeTab === "overview" ? "bg-blue-50 text-blue-600" : "text-gray-600 hover:bg-gray-50"}`,
34140
34200
  children: "Efficiency Overview"
34141
34201
  }
34142
34202
  ),
@@ -34144,12 +34204,12 @@ var KPIDetailView = ({
34144
34204
  "button",
34145
34205
  {
34146
34206
  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"}`,
34207
+ 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
34208
  children: "Monthly History"
34149
34209
  }
34150
34210
  )
34151
34211
  ] }),
34152
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-3 ml-auto", children: [
34212
+ /* @__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
34213
  lineInfo && activeTab === "overview" && /* @__PURE__ */ jsxRuntime.jsx(LinePdfGenerator, { lineInfo, workspaceData: workspaces || [] }),
34154
34214
  activeTab === "monthly_history" && /* @__PURE__ */ jsxRuntime.jsx(
34155
34215
  LineMonthlyPdfGenerator,
@@ -34314,11 +34374,11 @@ var LineCard = ({ line, onClick }) => {
34314
34374
  animate: { opacity: 1, y: 0 },
34315
34375
  transition: { duration: 0.3 },
34316
34376
  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",
34377
+ 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
34378
  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: [
34379
+ /* @__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: [
34380
+ /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg sm:text-xl font-semibold text-gray-900 truncate", children: line.line_name }),
34381
+ 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
34382
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: `w-2 h-2 rounded-full ${isOnTrack ? "bg-emerald-500" : "bg-red-500"} animate-pulse` }),
34323
34383
  /* @__PURE__ */ jsxRuntime.jsx("span", { children: isOnTrack ? "On Track" : "Behind" })
34324
34384
  ] })
@@ -34338,15 +34398,15 @@ var LineCard = ({ line, onClick }) => {
34338
34398
  ] })
34339
34399
  ] }),
34340
34400
  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: [
34401
+ kpis && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4 sm:space-y-5", children: [
34342
34402
  /* @__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" }),
34403
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs font-medium text-gray-500 uppercase tracking-wider mb-1.5 sm:mb-2", children: "Efficiency" }),
34344
34404
  /* @__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: [
34405
+ /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-2xl sm:text-3xl font-semibold text-gray-900", children: [
34346
34406
  kpis.efficiency.value.toFixed(1),
34347
34407
  "%"
34348
34408
  ] }),
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: [
34409
+ 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
34410
  kpis.efficiency.change > 0 ? "+" : "",
34351
34411
  kpis.efficiency.change.toFixed(1),
34352
34412
  "%"
@@ -34354,19 +34414,19 @@ var LineCard = ({ line, onClick }) => {
34354
34414
  ] })
34355
34415
  ] }),
34356
34416
  /* @__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: [
34417
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs font-medium text-gray-500 uppercase tracking-wider mb-1.5 sm:mb-2", children: "Output Progress" }),
34418
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-baseline justify-between mb-2 sm:mb-3", children: [
34419
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xl sm:text-2xl font-semibold text-gray-900", children: kpis.outputProgress.current }),
34420
+ /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs sm:text-sm text-gray-500 font-medium", children: [
34361
34421
  "/ ",
34362
34422
  kpis.outputProgress.target,
34363
34423
  " units"
34364
34424
  ] })
34365
34425
  ] }),
34366
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full bg-gray-200 rounded-full h-2.5", children: /* @__PURE__ */ jsxRuntime.jsx(
34426
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full bg-gray-200 rounded-full h-2 sm:h-2.5", children: /* @__PURE__ */ jsxRuntime.jsx(
34367
34427
  "div",
34368
34428
  {
34369
- className: "bg-blue-600 h-2.5 rounded-full transition-all duration-500 ease-out",
34429
+ className: "bg-blue-600 h-2 sm:h-2.5 rounded-full transition-all duration-500 ease-out",
34370
34430
  style: {
34371
34431
  width: `${Math.min(
34372
34432
  kpis.outputProgress.current / kpis.outputProgress.target * 100,
@@ -34377,17 +34437,17 @@ var LineCard = ({ line, onClick }) => {
34377
34437
  ) })
34378
34438
  ] }),
34379
34439
  /* @__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" }),
34440
+ /* @__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
34441
  /* @__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: [
34442
+ /* @__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 }),
34443
+ /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs sm:text-sm text-gray-500 font-medium", children: [
34384
34444
  "of ",
34385
34445
  kpis.underperformingWorkers.total
34386
34446
  ] })
34387
34447
  ] })
34388
34448
  ] })
34389
34449
  ] }),
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" }) }) })
34450
+ /* @__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
34451
  ]
34392
34452
  }
34393
34453
  );
@@ -34466,8 +34526,8 @@ var KPIsOverviewView = ({
34466
34526
  }
34467
34527
  if (error) {
34468
34528
  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(
34529
+ /* @__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: [
34530
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sm:absolute sm:left-0", children: /* @__PURE__ */ jsxRuntime.jsx(
34471
34531
  BackButtonMinimal,
34472
34532
  {
34473
34533
  onClick: handleBackClick,
@@ -34476,9 +34536,9 @@ var KPIsOverviewView = ({
34476
34536
  "aria-label": "Navigate back to previous page"
34477
34537
  }
34478
34538
  ) }),
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" })
34539
+ /* @__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: [
34540
+ /* @__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" }),
34541
+ /* @__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
34542
  ] }) })
34483
34543
  ] }) }) }),
34484
34544
  /* @__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 +34546,8 @@ var KPIsOverviewView = ({
34486
34546
  }
34487
34547
  if (lines.length === 0) {
34488
34548
  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(
34549
+ /* @__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: [
34550
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sm:absolute sm:left-0", children: /* @__PURE__ */ jsxRuntime.jsx(
34491
34551
  BackButtonMinimal,
34492
34552
  {
34493
34553
  onClick: handleBackClick,
@@ -34496,9 +34556,9 @@ var KPIsOverviewView = ({
34496
34556
  "aria-label": "Navigate back to previous page"
34497
34557
  }
34498
34558
  ) }),
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" })
34559
+ /* @__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: [
34560
+ /* @__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" }),
34561
+ /* @__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
34562
  ] }) })
34503
34563
  ] }) }) }),
34504
34564
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
@@ -34508,9 +34568,9 @@ var KPIsOverviewView = ({
34508
34568
  ] });
34509
34569
  }
34510
34570
  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: [
34571
+ /* @__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
34572
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center relative", children: [
34513
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-0", children: /* @__PURE__ */ jsxRuntime.jsx(
34573
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sm:absolute sm:left-0", children: /* @__PURE__ */ jsxRuntime.jsx(
34514
34574
  BackButtonMinimal,
34515
34575
  {
34516
34576
  onClick: handleBackClick,
@@ -34519,27 +34579,27 @@ var KPIsOverviewView = ({
34519
34579
  "aria-label": "Navigate back to previous page"
34520
34580
  }
34521
34581
  ) }),
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" })
34582
+ /* @__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: [
34583
+ /* @__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" }),
34584
+ /* @__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
34585
  ] }) })
34526
34586
  ] }),
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: [
34587
+ /* @__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: [
34588
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm sm:text-base md:text-lg font-medium text-blue-600", children: /* @__PURE__ */ jsxRuntime.jsx(ISTTimer_default, {}) }),
34589
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden sm:block w-px h-4 bg-blue-300" }),
34590
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs sm:text-sm md:text-base font-medium text-blue-600", children: formatLocalDate2(/* @__PURE__ */ new Date()) }),
34591
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden sm:block w-px h-4 bg-blue-300" }),
34592
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 sm:gap-2", children: [
34533
34593
  /* @__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: [
34594
+ /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs sm:text-sm md:text-base font-medium text-blue-600", children: [
34535
34595
  shiftName,
34536
34596
  " Shift"
34537
34597
  ] })
34538
34598
  ] })
34539
34599
  ] }) }),
34540
- /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-gray-600 text-center mt-3", children: "Click on any line to view detailed performance metrics" })
34600
+ /* @__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
34601
  ] }) }),
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(
34602
+ /* @__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
34603
  LineCard,
34544
34604
  {
34545
34605
  line,
@@ -34559,14 +34619,14 @@ var HeaderRibbon = React19.memo(({
34559
34619
  shiftId,
34560
34620
  getShiftIcon,
34561
34621
  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: [
34622
+ }) => /* @__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: [
34623
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm sm:text-base md:text-lg font-medium text-blue-600", children: /* @__PURE__ */ jsxRuntime.jsx(IsolatedTimer, {}) }),
34624
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden sm:block w-px h-4 bg-blue-300" }),
34625
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs sm:text-sm md:text-base font-medium text-blue-600", children: currentDate }),
34626
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden sm:block w-px h-4 bg-blue-300" }),
34627
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 sm:gap-2", children: [
34568
34628
  /* @__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: [
34629
+ /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs sm:text-sm md:text-base font-medium text-blue-600", children: [
34570
34630
  getShiftName(shiftId),
34571
34631
  " Shift"
34572
34632
  ] })
@@ -34800,9 +34860,50 @@ var LeaderboardDetailView = React19.memo(({
34800
34860
  ] }) });
34801
34861
  }
34802
34862
  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(
34863
+ /* @__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: [
34864
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sm:hidden", children: [
34865
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-2", children: [
34866
+ /* @__PURE__ */ jsxRuntime.jsx(
34867
+ BackButtonMinimal,
34868
+ {
34869
+ onClick: handleBackClick,
34870
+ text: "Back",
34871
+ size: "sm",
34872
+ "aria-label": "Navigate back to previous page"
34873
+ }
34874
+ ),
34875
+ /* @__PURE__ */ jsxRuntime.jsxs(
34876
+ "button",
34877
+ {
34878
+ onClick: handleSortToggle,
34879
+ 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",
34880
+ children: [
34881
+ /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Sort" }),
34882
+ /* @__PURE__ */ jsxRuntime.jsx(
34883
+ "svg",
34884
+ {
34885
+ className: "w-3.5 h-3.5 text-gray-600",
34886
+ xmlns: "http://www.w3.org/2000/svg",
34887
+ viewBox: "0 0 24 24",
34888
+ fill: "none",
34889
+ stroke: "currentColor",
34890
+ strokeWidth: "2",
34891
+ strokeLinecap: "round",
34892
+ strokeLinejoin: "round",
34893
+ children: sortAscending ? /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 15l7-7 7 7" }) : /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M19 9l-7 7-7-7" })
34894
+ }
34895
+ )
34896
+ ]
34897
+ }
34898
+ )
34899
+ ] }),
34900
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-2", children: [
34901
+ /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-base font-semibold text-gray-900", children: "Leaderboard" }),
34902
+ /* @__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" })
34903
+ ] }) })
34904
+ ] }),
34905
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "hidden sm:flex items-center justify-between", children: [
34906
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-32", children: /* @__PURE__ */ jsxRuntime.jsx(
34806
34907
  BackButtonMinimal,
34807
34908
  {
34808
34909
  onClick: handleBackClick,
@@ -34811,17 +34912,17 @@ var LeaderboardDetailView = React19.memo(({
34811
34912
  "aria-label": "Navigate back to previous page"
34812
34913
  }
34813
34914
  ) }),
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" })
34915
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
34916
+ /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-xl md:text-2xl lg:text-3xl font-semibold text-gray-900", children: "Leaderboard" }),
34917
+ /* @__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
34918
  ] }),
34818
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-auto sm:w-32 flex justify-end", children: /* @__PURE__ */ jsxRuntime.jsxs(
34919
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-32 flex justify-end", children: /* @__PURE__ */ jsxRuntime.jsxs(
34819
34920
  "button",
34820
34921
  {
34821
34922
  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",
34923
+ 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
34924
  children: [
34824
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "hidden sm:inline", children: "Sort by Efficiency" }),
34925
+ /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Sort by Efficiency" }),
34825
34926
  /* @__PURE__ */ jsxRuntime.jsx(
34826
34927
  "svg",
34827
34928
  {
@@ -35330,48 +35431,113 @@ var BreakRow = React19.memo(({
35330
35431
  onRemove,
35331
35432
  index
35332
35433
  }) => {
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
- ) })
35434
+ return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
35435
+ /* @__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: [
35436
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-3", children: /* @__PURE__ */ jsxRuntime.jsx(
35437
+ TimePickerDropdown,
35438
+ {
35439
+ value: breakItem.startTime,
35440
+ onChange: (value) => onUpdate(index, "startTime", value),
35441
+ placeholder: "Start time",
35442
+ className: "w-full"
35443
+ }
35444
+ ) }),
35445
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-3", children: /* @__PURE__ */ jsxRuntime.jsx(
35446
+ TimePickerDropdown,
35447
+ {
35448
+ value: breakItem.endTime,
35449
+ onChange: (value) => onUpdate(index, "endTime", value),
35450
+ placeholder: "End time",
35451
+ className: "w-full"
35452
+ }
35453
+ ) }),
35454
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-2", children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm font-medium text-gray-700", children: [
35455
+ breakItem.duration,
35456
+ " min"
35457
+ ] }) }),
35458
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-3", children: /* @__PURE__ */ jsxRuntime.jsx(
35459
+ "input",
35460
+ {
35461
+ type: "text",
35462
+ value: breakItem.remarks || "",
35463
+ onChange: (e) => onUpdate(index, "remarks", e.target.value),
35464
+ placeholder: "Break remarks",
35465
+ 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"
35466
+ }
35467
+ ) }),
35468
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-1 flex justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
35469
+ "button",
35470
+ {
35471
+ onClick: () => onRemove(index),
35472
+ className: "text-gray-400 hover:text-red-500 focus:outline-none transition-colors",
35473
+ "aria-label": "Remove break",
35474
+ children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "w-4 h-4" })
35475
+ }
35476
+ ) })
35477
+ ] }),
35478
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sm:hidden bg-white border border-gray-200 rounded-lg p-3 mb-3 space-y-3", children: [
35479
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-2", children: [
35480
+ /* @__PURE__ */ jsxRuntime.jsxs("h5", { className: "text-sm font-medium text-gray-700", children: [
35481
+ "Break ",
35482
+ index + 1
35483
+ ] }),
35484
+ /* @__PURE__ */ jsxRuntime.jsx(
35485
+ "button",
35486
+ {
35487
+ onClick: () => onRemove(index),
35488
+ className: "text-gray-400 hover:text-red-500 focus:outline-none transition-colors p-1",
35489
+ "aria-label": "Remove break",
35490
+ children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "w-4 h-4" })
35491
+ }
35492
+ )
35493
+ ] }),
35494
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 gap-3", children: [
35495
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
35496
+ /* @__PURE__ */ jsxRuntime.jsx("label", { className: "block text-xs font-medium text-gray-600 mb-1", children: "Start Time" }),
35497
+ /* @__PURE__ */ jsxRuntime.jsx(
35498
+ TimePickerDropdown,
35499
+ {
35500
+ value: breakItem.startTime,
35501
+ onChange: (value) => onUpdate(index, "startTime", value),
35502
+ placeholder: "Start time",
35503
+ className: "w-full"
35504
+ }
35505
+ )
35506
+ ] }),
35507
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
35508
+ /* @__PURE__ */ jsxRuntime.jsx("label", { className: "block text-xs font-medium text-gray-600 mb-1", children: "End Time" }),
35509
+ /* @__PURE__ */ jsxRuntime.jsx(
35510
+ TimePickerDropdown,
35511
+ {
35512
+ value: breakItem.endTime,
35513
+ onChange: (value) => onUpdate(index, "endTime", value),
35514
+ placeholder: "End time",
35515
+ className: "w-full"
35516
+ }
35517
+ )
35518
+ ] })
35519
+ ] }),
35520
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
35521
+ /* @__PURE__ */ jsxRuntime.jsx("label", { className: "block text-xs font-medium text-gray-600 mb-1", children: "Duration" }),
35522
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-sm text-gray-700 font-medium px-3 py-2 bg-gray-100 rounded-md text-center", children: [
35523
+ breakItem.duration,
35524
+ " minutes"
35525
+ ] })
35526
+ ] }),
35527
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
35528
+ /* @__PURE__ */ jsxRuntime.jsx("label", { className: "block text-xs font-medium text-gray-600 mb-1", children: "Remarks (Optional)" }),
35529
+ /* @__PURE__ */ jsxRuntime.jsx(
35530
+ "input",
35531
+ {
35532
+ type: "text",
35533
+ value: breakItem.remarks || "",
35534
+ onChange: (e) => onUpdate(index, "remarks", e.target.value),
35535
+ placeholder: "Add optional remarks...",
35536
+ 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"
35537
+ }
35538
+ )
35539
+ ] })
35540
+ ] })
35375
35541
  ] });
35376
35542
  });
35377
35543
  BreakRow.displayName = "BreakRow";
@@ -35404,35 +35570,35 @@ var ShiftPanel = React19.memo(({
35404
35570
  console.error("Error saving panel state to localStorage:", error);
35405
35571
  }
35406
35572
  };
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: [
35573
+ 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
35574
  /* @__PURE__ */ jsxRuntime.jsx(
35409
35575
  "div",
35410
35576
  {
35411
- className: "p-4 w-full cursor-pointer hover:bg-gray-50/50 transition-all duration-200",
35577
+ className: "p-3 sm:p-4 w-full cursor-pointer hover:bg-gray-50/50 transition-all duration-200",
35412
35578
  onClick: toggleMinimize,
35413
- children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between w-full", children: [
35579
+ 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
35580
  /* @__PURE__ */ jsxRuntime.jsxs(
35415
35581
  "button",
35416
35582
  {
35417
35583
  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",
35584
+ 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
35585
  "aria-expanded": !isMinimized,
35420
35586
  "aria-controls": panelId,
35421
35587
  children: [
35422
35588
  /* @__PURE__ */ jsxRuntime.jsx(
35423
35589
  lucideReact.ChevronDown,
35424
35590
  {
35425
- className: `w-5 h-5 text-blue-500 transform transition-transform duration-200 ${isMinimized ? "" : "rotate-180"}`
35591
+ className: `w-4 h-4 sm:w-5 sm:h-5 text-blue-500 transform transition-transform duration-200 ${isMinimized ? "" : "rotate-180"}`
35426
35592
  }
35427
35593
  ),
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 })
35594
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5 sm:gap-2", children: [
35595
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-4 h-4 sm:w-5 sm:h-5", children: icon }),
35596
+ /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-base sm:text-lg font-semibold text-gray-900 group-hover:text-blue-600", children: title })
35431
35597
  ] })
35432
35598
  ]
35433
35599
  }
35434
35600
  ),
35435
- /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm font-medium text-gray-600 mr-2", children: [
35601
+ /* @__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
35602
  "Total Shift Hours: ",
35437
35603
  shiftHours,
35438
35604
  " hours"
@@ -35440,10 +35606,10 @@ var ShiftPanel = React19.memo(({
35440
35606
  ] })
35441
35607
  }
35442
35608
  ),
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: [
35609
+ !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: [
35610
+ /* @__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
35611
  /* @__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" }),
35612
+ /* @__PURE__ */ jsxRuntime.jsx("label", { className: "block text-xs sm:text-sm font-medium text-gray-700 mb-1", children: "Shift Start Time" }),
35447
35613
  /* @__PURE__ */ jsxRuntime.jsx(
35448
35614
  TimePickerDropdown,
35449
35615
  {
@@ -35455,7 +35621,7 @@ var ShiftPanel = React19.memo(({
35455
35621
  )
35456
35622
  ] }),
35457
35623
  /* @__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" }),
35624
+ /* @__PURE__ */ jsxRuntime.jsx("label", { className: "block text-xs sm:text-sm font-medium text-gray-700 mb-1", children: "Shift End Time" }),
35459
35625
  /* @__PURE__ */ jsxRuntime.jsx(
35460
35626
  TimePickerDropdown,
35461
35627
  {
@@ -35468,12 +35634,12 @@ var ShiftPanel = React19.memo(({
35468
35634
  ] })
35469
35635
  ] }),
35470
35636
  /* @__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" }),
35637
+ /* @__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: [
35638
+ /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Coffee, { className: "w-3.5 h-3.5 sm:w-4 sm:h-4" }),
35473
35639
  "Breaks"
35474
35640
  ] }) }),
35475
35641
  /* @__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: [
35642
+ /* @__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
35643
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-3", children: "Break Start" }),
35478
35644
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-3", children: "Break End" }),
35479
35645
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-2", children: "Duration" }),
@@ -35490,7 +35656,7 @@ var ShiftPanel = React19.memo(({
35490
35656
  },
35491
35657
  index
35492
35658
  )) })
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" }) }),
35659
+ ] }) : /* @__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
35660
  /* @__PURE__ */ jsxRuntime.jsxs(
35495
35661
  "button",
35496
35662
  {
@@ -35498,9 +35664,9 @@ var ShiftPanel = React19.memo(({
35498
35664
  e.stopPropagation();
35499
35665
  onBreakAdd();
35500
35666
  },
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",
35667
+ 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
35668
  children: [
35503
- /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "w-4 h-4" }),
35669
+ /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "w-3.5 h-3.5 sm:w-4 sm:h-4" }),
35504
35670
  "Add Break"
35505
35671
  ]
35506
35672
  }
@@ -35868,8 +36034,8 @@ var ShiftsView = ({
35868
36034
  }
35869
36035
  }, [lineConfigs, supabase, showToast]);
35870
36036
  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(
36037
+ /* @__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: [
36038
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sm:absolute sm:left-0", children: /* @__PURE__ */ jsxRuntime.jsx(
35873
36039
  BackButtonMinimal,
35874
36040
  {
35875
36041
  onClick: () => onBackClick ? onBackClick() : window.history.back(),
@@ -35878,14 +36044,14 @@ var ShiftsView = ({
35878
36044
  "aria-label": "Navigate back to previous page"
35879
36045
  }
35880
36046
  ) }),
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" })
36047
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 flex flex-col items-center mt-2 sm:mt-0", children: [
36048
+ /* @__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" }),
36049
+ /* @__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
36050
  ] }),
35885
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute right-0 w-24" })
36051
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden sm:block absolute right-0 w-24" })
35886
36052
  ] }) }) }),
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." }) }),
36053
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-3 sm:p-4 md:p-6 lg:p-8", children: [
36054
+ /* @__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
36055
  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
36056
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-8 w-8 rounded-full bg-blue-200 mb-4" }),
35891
36057
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-4 w-48 bg-gray-200 rounded mb-2" }),
@@ -35894,17 +36060,19 @@ var ShiftsView = ({
35894
36060
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-red-500 mb-2", children: "Error loading shift configurations" }),
35895
36061
  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-gray-500", children: error })
35896
36062
  ] }) : /* @__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: [
36063
+ /* @__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: [
36064
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 sm:gap-3", children: [
36065
+ /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Calendar, { className: "w-4 h-4 sm:w-5 sm:h-5 text-gray-600" }),
36066
+ /* @__PURE__ */ jsxRuntime.jsxs("h2", { className: "text-base sm:text-lg font-semibold text-gray-800", children: [
35901
36067
  config.name,
35902
36068
  " Shifts"
35903
36069
  ] })
35904
36070
  ] }),
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!" }),
36071
+ /* @__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: [
36072
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
36073
+ config.isSaving && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs sm:text-sm font-medium text-blue-600", children: "Saving..." }),
36074
+ config.saveSuccess && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs sm:text-sm font-medium text-green-600", children: "Saved!" })
36075
+ ] }),
35908
36076
  /* @__PURE__ */ jsxRuntime.jsxs(
35909
36077
  "button",
35910
36078
  {
@@ -35914,7 +36082,7 @@ var ShiftsView = ({
35914
36082
  e.stopPropagation();
35915
36083
  handleSaveShifts(config.id);
35916
36084
  },
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",
36085
+ 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
36086
  disabled: config.isSaving,
35919
36087
  "aria-label": "Save shift configuration",
35920
36088
  children: [
@@ -35925,7 +36093,7 @@ var ShiftsView = ({
35925
36093
  )
35926
36094
  ] })
35927
36095
  ] }) }),
35928
- /* @__PURE__ */ jsxRuntime.jsxs("div", { id: `shift-panel-${config.id}`, className: "p-3 sm:p-6 border-t border-gray-200 w-full", children: [
36096
+ /* @__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
36097
  /* @__PURE__ */ jsxRuntime.jsx(
35930
36098
  ShiftPanel,
35931
36099
  {
@@ -36706,54 +36874,105 @@ var SKUList = ({
36706
36874
  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-sm text-gray-500", children: "Get started by creating a new SKU for production planning." })
36707
36875
  ] }) });
36708
36876
  }
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"
36877
+ return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
36878
+ /* @__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: [
36879
+ /* @__PURE__ */ jsxRuntime.jsx("thead", { className: "bg-gray-50", children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
36880
+ /* @__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" }),
36881
+ /* @__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" }),
36882
+ /* @__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" }),
36883
+ /* @__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" }),
36884
+ /* @__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" }),
36885
+ /* @__PURE__ */ jsxRuntime.jsx("th", { scope: "col", className: "relative px-6 py-3", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Actions" }) })
36723
36886
  ] }) }),
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
- ":"
36887
+ /* @__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: [
36888
+ /* @__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 }) }),
36889
+ /* @__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: [
36890
+ sku.production_target.toLocaleString(),
36891
+ " units/day"
36892
+ ] }) }),
36893
+ /* @__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: [
36894
+ index > 0 && ", ",
36895
+ /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-medium", children: [
36896
+ key,
36897
+ ":"
36898
+ ] }),
36899
+ " ",
36900
+ String(value)
36901
+ ] }, key)) }) }) }),
36902
+ /* @__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" }) }),
36903
+ /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-6 py-4 whitespace-nowrap text-sm text-gray-500", children: new Date(sku.created_at).toLocaleDateString() }),
36904
+ /* @__PURE__ */ jsxRuntime.jsxs("td", { className: "px-6 py-4 whitespace-nowrap text-right text-sm font-medium", children: [
36905
+ /* @__PURE__ */ jsxRuntime.jsx(
36906
+ "button",
36907
+ {
36908
+ onClick: () => onEdit(sku),
36909
+ className: "text-blue-600 hover:text-blue-800 mr-3 transition-colors duration-150 p-1 hover:bg-blue-50 rounded",
36910
+ title: "Edit SKU",
36911
+ children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Edit2, { className: "w-4 h-4" })
36912
+ }
36913
+ ),
36914
+ /* @__PURE__ */ jsxRuntime.jsx(
36915
+ "button",
36916
+ {
36917
+ onClick: () => onDelete(sku),
36918
+ className: "text-red-600 hover:text-red-800 transition-colors duration-150 p-1 hover:bg-red-50 rounded",
36919
+ title: "Delete SKU",
36920
+ children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { className: "w-4 h-4" })
36921
+ }
36922
+ )
36923
+ ] })
36924
+ ] }, sku.id)) })
36925
+ ] }) }) }),
36926
+ /* @__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: [
36927
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between mb-3", children: [
36928
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
36929
+ /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-base sm:text-lg font-semibold text-gray-900 truncate", children: sku.sku_id }),
36930
+ /* @__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
36931
  ] }),
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
- )
36932
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 ml-3", children: [
36933
+ /* @__PURE__ */ jsxRuntime.jsx(
36934
+ "button",
36935
+ {
36936
+ onClick: () => onEdit(sku),
36937
+ className: "text-blue-600 hover:text-blue-800 transition-colors duration-150 p-2 hover:bg-blue-50 rounded-lg",
36938
+ title: "Edit SKU",
36939
+ children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Edit2, { className: "w-4 h-4" })
36940
+ }
36941
+ ),
36942
+ /* @__PURE__ */ jsxRuntime.jsx(
36943
+ "button",
36944
+ {
36945
+ onClick: () => onDelete(sku),
36946
+ className: "text-red-600 hover:text-red-800 transition-colors duration-150 p-2 hover:bg-red-50 rounded-lg",
36947
+ title: "Delete SKU",
36948
+ children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { className: "w-4 h-4" })
36949
+ }
36950
+ )
36951
+ ] })
36952
+ ] }),
36953
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-3", children: [
36954
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs font-medium text-gray-500 uppercase tracking-wider mb-1", children: "Production Target" }),
36955
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-sm sm:text-base font-medium text-gray-700", children: [
36956
+ sku.production_target.toLocaleString(),
36957
+ " units/day"
36958
+ ] })
36959
+ ] }),
36960
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-3", children: [
36961
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs font-medium text-gray-500 uppercase tracking-wider mb-1", children: "Attributes" }),
36962
+ /* @__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: [
36963
+ /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-medium text-gray-600", children: [
36964
+ key,
36965
+ ":"
36966
+ ] }),
36967
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-900", children: String(value) })
36968
+ ] }, key)) }) })
36969
+ ] }),
36970
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-xs text-gray-500", children: [
36971
+ "Created: ",
36972
+ new Date(sku.created_at).toLocaleDateString()
36754
36973
  ] })
36755
36974
  ] }, sku.id)) })
36756
- ] }) }) });
36975
+ ] });
36757
36976
  };
36758
36977
  var TargetsViewUI = ({
36759
36978
  isLoading,
@@ -36786,8 +37005,8 @@ var TargetsViewUI = ({
36786
37005
  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
37006
  }
36788
37007
  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(
37008
+ /* @__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: [
37009
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sm:absolute sm:left-0", children: /* @__PURE__ */ jsxRuntime.jsx(
36791
37010
  BackButtonMinimal,
36792
37011
  {
36793
37012
  onClick: onBack,
@@ -36796,30 +37015,30 @@ var TargetsViewUI = ({
36796
37015
  "aria-label": "Navigate back to previous page"
36797
37016
  }
36798
37017
  ) }),
36799
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute right-0", children: /* @__PURE__ */ jsxRuntime.jsxs(
37018
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sm:absolute sm:right-0 w-full sm:w-auto", children: /* @__PURE__ */ jsxRuntime.jsxs(
36800
37019
  "button",
36801
37020
  {
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",
37021
+ 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
37022
  onClick: onToggleBulkConfigure,
36804
37023
  children: [
36805
- /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Settings2, { className: "w-4 h-4 mr-2 inline-block" }),
37024
+ /* @__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
37025
  "Bulk Configure"
36807
37026
  ]
36808
37027
  }
36809
37028
  ) }),
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" })
37029
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 text-center mx-auto mt-2 sm:mt-0", children: [
37030
+ /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-lg sm:text-xl md:text-2xl lg:text-3xl font-semibold text-gray-900", children: "Production Targets" }),
37031
+ /* @__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
37032
  ] })
36814
37033
  ] }) }),
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: [
37034
+ /* @__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: [
37035
+ /* @__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." }) }),
37036
+ /* @__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
37037
  /* @__PURE__ */ jsxRuntime.jsx(
36819
37038
  "button",
36820
37039
  {
36821
37040
  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"}`,
37041
+ className: `flex-1 sm:flex-none px-3 sm:px-4 py-2 text-xs sm:text-sm font-medium rounded-md transition-all ${selectedShift === 0 ? "bg-white text-blue-600 shadow-sm" : "text-gray-600 hover:text-gray-900"}`,
36823
37042
  children: "Day Shift"
36824
37043
  }
36825
37044
  ),
@@ -36827,7 +37046,7 @@ var TargetsViewUI = ({
36827
37046
  "button",
36828
37047
  {
36829
37048
  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"}`,
37049
+ 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
37050
  children: "Night Shift"
36832
37051
  }
36833
37052
  )
@@ -36837,35 +37056,37 @@ var TargetsViewUI = ({
36837
37056
  {
36838
37057
  className: "bg-white rounded-xl border border-gray-200 shadow-sm hover:shadow-md transition-all duration-200",
36839
37058
  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: [
37059
+ /* @__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: [
37060
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col sm:flex-row sm:items-center gap-3 sm:gap-4 lg:gap-6", children: [
36842
37061
  /* @__PURE__ */ jsxRuntime.jsxs(
36843
37062
  "button",
36844
37063
  {
36845
37064
  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",
37065
+ 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
37066
  "aria-expanded": dropdownStates[lineId],
36848
37067
  "aria-controls": `line-${lineId}-content`,
36849
37068
  children: [
36850
37069
  /* @__PURE__ */ jsxRuntime.jsx(
36851
37070
  lucideReact.ChevronDown,
36852
37071
  {
36853
- className: `w-5 h-5 text-blue-500 transform transition-transform duration-200 ${dropdownStates[lineId] ? "rotate-180" : ""}`
37072
+ className: `w-4 h-4 sm:w-5 sm:h-5 text-blue-500 transform transition-transform duration-200 ${dropdownStates[lineId] ? "rotate-180" : ""}`
36854
37073
  }
36855
37074
  ),
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"
37075
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col sm:flex-row sm:items-center gap-1 sm:gap-2.5", children: [
37076
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-base sm:text-lg text-gray-900 group-hover:text-blue-600", children: lineNames[lineId] || lineId }),
37077
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
37078
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "hidden sm:inline text-sm font-normal text-gray-400", children: "\u2022" }),
37079
+ /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs sm:text-sm font-medium text-gray-500", children: [
37080
+ line.workspaces.length,
37081
+ " workspaces"
37082
+ ] })
36862
37083
  ] })
36863
37084
  ] })
36864
37085
  ]
36865
37086
  }
36866
37087
  ),
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: [
37088
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden lg:block h-8 w-px bg-gray-200/80" }),
37089
+ /* @__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
37090
  line.shiftStartTime,
36870
37091
  " \u2013 ",
36871
37092
  line.shiftEndTime,
@@ -36874,9 +37095,9 @@ var TargetsViewUI = ({
36874
37095
  " hours"
36875
37096
  ] }) })
36876
37097
  ] }),
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" }),
37098
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col sm:flex-row items-start sm:items-center gap-2 sm:gap-4", children: [
37099
+ saveSuccess[lineId] && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs sm:text-sm text-green-600 font-medium flex items-center gap-1.5", children: [
37100
+ /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckCircle2, { className: "w-3 h-3 sm:w-4 sm:h-4" }),
36880
37101
  "Saved successfully"
36881
37102
  ] }),
36882
37103
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -36884,13 +37105,13 @@ var TargetsViewUI = ({
36884
37105
  {
36885
37106
  onClick: () => onSaveLine(lineId),
36886
37107
  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
37108
+ 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
37109
  ${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
37110
  children: savingLines[lineId] ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
36890
- /* @__PURE__ */ jsxRuntime.jsx(OptifyeLogoLoader_default, { size: "sm", className: "mr-2" }),
37111
+ /* @__PURE__ */ jsxRuntime.jsx(OptifyeLogoLoader_default, { size: "sm", className: "mr-1.5 sm:mr-2" }),
36891
37112
  "Saving..."
36892
37113
  ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
36893
- /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Save, { className: "w-4 h-4 mr-2" }),
37114
+ /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Save, { className: "w-3 h-3 sm:w-4 sm:h-4 mr-1.5 sm:mr-2" }),
36894
37115
  "Save Changes"
36895
37116
  ] })
36896
37117
  }
@@ -36898,9 +37119,9 @@ var TargetsViewUI = ({
36898
37119
  ] })
36899
37120
  ] }) }),
36900
37121
  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(
37122
+ 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: [
37123
+ /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: `sku-${lineId}`, className: "text-sm font-medium text-gray-700 flex-shrink-0", children: "Select SKU:" }),
37124
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 max-w-full sm:max-w-md", children: /* @__PURE__ */ jsxRuntime.jsx(
36904
37125
  SKUSelector,
36905
37126
  {
36906
37127
  onSelect: (sku) => onUpdateSelectedSKU?.(lineId, sku),
@@ -36911,14 +37132,14 @@ var TargetsViewUI = ({
36911
37132
  className: "w-full"
36912
37133
  }
36913
37134
  ) }),
36914
- line.selectedSKU && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-sm text-gray-600", children: [
37135
+ line.selectedSKU && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-xs sm:text-sm text-gray-600 mt-2 sm:mt-0", children: [
36915
37136
  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: "Production Target:" }),
36916
37137
  " ",
36917
37138
  line.selectedSKU.production_target.toLocaleString(),
36918
37139
  " units/day"
36919
37140
  ] })
36920
37141
  ] }) }),
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: [
37142
+ /* @__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
37143
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-2", children: "Workspace" }),
36923
37144
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-2", children: "Action Type" }),
36924
37145
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "col-span-3", children: [
@@ -36936,76 +37157,170 @@ var TargetsViewUI = ({
36936
37157
  ] }) }),
36937
37158
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "divide-y divide-gray-100", children: line.workspaces.map((workspace) => {
36938
37159
  const formattedName = formatWorkspaceName(workspace.name, lineId);
36939
- return /* @__PURE__ */ jsxRuntime.jsx(
37160
+ return /* @__PURE__ */ jsxRuntime.jsxs(
36940
37161
  "div",
36941
37162
  {
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
- ] })
37163
+ className: "px-3 sm:px-4 lg:px-6 py-3 sm:py-4 hover:bg-gray-50 transition-all duration-200",
37164
+ children: [
37165
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "hidden lg:grid lg:grid-cols-12 lg:gap-6 lg:items-center", children: [
37166
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-2", children: onUpdateWorkspaceDisplayName ? /* @__PURE__ */ jsxRuntime.jsx(
37167
+ InlineEditableText,
37168
+ {
37169
+ value: formattedName,
37170
+ onSave: async (newName) => {
37171
+ await onUpdateWorkspaceDisplayName(workspace.id, newName);
37172
+ },
37173
+ placeholder: "Workspace name",
37174
+ className: "font-medium text-gray-900",
37175
+ inputClassName: "min-w-[120px]"
37176
+ }
37177
+ ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-gray-900", children: formattedName }) }),
37178
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-2", children: /* @__PURE__ */ jsxRuntime.jsxs(
37179
+ "select",
37180
+ {
37181
+ value: workspace.actionType,
37182
+ onChange: (e) => {
37183
+ const newActionType = e.target.value;
37184
+ onActionTypeChange(lineId, workspace.id, newActionType);
37185
+ },
37186
+ className: "w-full p-2 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm",
37187
+ "aria-label": `Action type for ${formattedName}`,
37188
+ children: [
37189
+ /* @__PURE__ */ jsxRuntime.jsx("option", { value: "assembly", className: "py-2", children: "Assembly" }),
37190
+ /* @__PURE__ */ jsxRuntime.jsx("option", { value: "packaging", className: "py-2", children: "Packaging" })
37191
+ ]
37192
+ }
37193
+ ) }),
37194
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-3", children: /* @__PURE__ */ jsxRuntime.jsx(
37195
+ "input",
37196
+ {
37197
+ type: "number",
37198
+ value: workspace.targetCycleTime === 0 ? "" : workspace.targetCycleTime,
37199
+ onChange: (e) => onUpdateWorkspaceTarget(lineId, workspace.id, "targetCycleTime", Number(e.target.value) || ""),
37200
+ 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",
37201
+ min: "0",
37202
+ step: "0.01",
37203
+ placeholder: "Enter cycle time"
37204
+ }
37205
+ ) }),
37206
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-3", children: /* @__PURE__ */ jsxRuntime.jsx(
37207
+ "input",
37208
+ {
37209
+ type: "number",
37210
+ value: workspace.targetPPH === 0 ? "" : workspace.targetPPH,
37211
+ onChange: (e) => onUpdateWorkspaceTarget(lineId, workspace.id, "targetPPH", Number(e.target.value) || ""),
37212
+ 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",
37213
+ min: "0",
37214
+ step: "0.1",
37215
+ placeholder: "Enter PPH"
37216
+ }
37217
+ ) }),
37218
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-2", children: /* @__PURE__ */ jsxRuntime.jsx(
37219
+ "input",
37220
+ {
37221
+ type: "number",
37222
+ value: workspace.targetDayOutput === 0 ? "" : workspace.targetDayOutput,
37223
+ onChange: (e) => onUpdateWorkspaceTarget(lineId, workspace.id, "targetDayOutput", Number(e.target.value) || ""),
37224
+ 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",
37225
+ min: "0",
37226
+ step: "1",
37227
+ placeholder: "Enter day output"
37228
+ }
37229
+ ) })
37230
+ ] }),
37231
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "lg:hidden space-y-4", children: [
37232
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
37233
+ /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-sm font-medium text-gray-700", children: "Workspace" }),
37234
+ onUpdateWorkspaceDisplayName ? /* @__PURE__ */ jsxRuntime.jsx(
37235
+ InlineEditableText,
37236
+ {
37237
+ value: formattedName,
37238
+ onSave: async (newName) => {
37239
+ await onUpdateWorkspaceDisplayName(workspace.id, newName);
37240
+ },
37241
+ placeholder: "Workspace name",
37242
+ className: "font-medium text-gray-900 text-base",
37243
+ inputClassName: "min-w-full"
37244
+ }
37245
+ ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-gray-900 text-base", children: formattedName })
37246
+ ] }),
37247
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
37248
+ /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-sm font-medium text-gray-700", children: "Action Type" }),
37249
+ /* @__PURE__ */ jsxRuntime.jsxs(
37250
+ "select",
37251
+ {
37252
+ value: workspace.actionType,
37253
+ onChange: (e) => {
37254
+ const newActionType = e.target.value;
37255
+ onActionTypeChange(lineId, workspace.id, newActionType);
37256
+ },
37257
+ className: "w-full p-3 border border-gray-300 rounded-lg shadow-sm focus:ring-blue-500 focus:border-blue-500 text-sm",
37258
+ "aria-label": `Action type for ${formattedName}`,
37259
+ children: [
37260
+ /* @__PURE__ */ jsxRuntime.jsx("option", { value: "assembly", children: "Assembly" }),
37261
+ /* @__PURE__ */ jsxRuntime.jsx("option", { value: "packaging", children: "Packaging" })
37262
+ ]
37263
+ }
37264
+ )
37265
+ ] }),
37266
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-4", children: [
37267
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
37268
+ /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "text-sm font-medium text-gray-700", children: [
37269
+ "Target Cycle Time",
37270
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block text-xs text-gray-400", children: "seconds per piece" })
37271
+ ] }),
37272
+ /* @__PURE__ */ jsxRuntime.jsx(
37273
+ "input",
37274
+ {
37275
+ type: "number",
37276
+ value: workspace.targetCycleTime === 0 ? "" : workspace.targetCycleTime,
37277
+ onChange: (e) => onUpdateWorkspaceTarget(lineId, workspace.id, "targetCycleTime", Number(e.target.value) || ""),
37278
+ 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",
37279
+ min: "0",
37280
+ step: "0.01",
37281
+ placeholder: "Enter cycle time"
37282
+ }
37283
+ )
37284
+ ] }),
37285
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
37286
+ /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "text-sm font-medium text-gray-700", children: [
37287
+ "Target PPH",
37288
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block text-xs text-gray-400", children: "pieces per hour" })
37289
+ ] }),
37290
+ /* @__PURE__ */ jsxRuntime.jsx(
37291
+ "input",
37292
+ {
37293
+ type: "number",
37294
+ value: workspace.targetPPH === 0 ? "" : workspace.targetPPH,
37295
+ onChange: (e) => onUpdateWorkspaceTarget(lineId, workspace.id, "targetPPH", Number(e.target.value) || ""),
37296
+ 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",
37297
+ min: "0",
37298
+ step: "0.1",
37299
+ placeholder: "Enter PPH"
37300
+ }
37301
+ )
37302
+ ] })
37303
+ ] }),
37304
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2", children: [
37305
+ /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "text-sm font-medium text-gray-700", children: [
37306
+ "Total Day Output",
37307
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block text-xs text-gray-400", children: "pieces per day" })
37308
+ ] }),
37309
+ /* @__PURE__ */ jsxRuntime.jsx(
37310
+ "input",
37311
+ {
37312
+ type: "number",
37313
+ value: workspace.targetDayOutput === 0 ? "" : workspace.targetDayOutput,
37314
+ onChange: (e) => onUpdateWorkspaceTarget(lineId, workspace.id, "targetDayOutput", Number(e.target.value) || ""),
37315
+ 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",
37316
+ min: "0",
37317
+ step: "1",
37318
+ placeholder: "Enter day output"
37319
+ }
37320
+ )
37321
+ ] })
37322
+ ] })
37323
+ ]
37009
37324
  },
37010
37325
  workspace.id
37011
37326
  );
@@ -38111,9 +38426,9 @@ var WorkspaceDetailView = ({
38111
38426
  animate: { opacity: 1 },
38112
38427
  transition: { duration: 0.3 },
38113
38428
  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" }) }),
38429
+ /* @__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: [
38430
+ /* @__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" }) }),
38431
+ /* @__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
38432
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-8" })
38118
38433
  ] }) }),
38119
38434
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 p-4 sm:p-6 lg:p-8", children: [
@@ -38174,7 +38489,7 @@ var WorkspaceDetailView = ({
38174
38489
  animate: { opacity: 1 },
38175
38490
  children: [
38176
38491
  /* @__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: [
38492
+ /* @__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: [
38178
38493
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex items-center", children: [
38179
38494
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-0 z-10", children: /* @__PURE__ */ jsxRuntime.jsx(
38180
38495
  BackButtonMinimal,
@@ -38185,8 +38500,8 @@ var WorkspaceDetailView = ({
38185
38500
  "aria-label": "Navigate back to previous page"
38186
38501
  }
38187
38502
  ) }),
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 }),
38503
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-1/2 transform -translate-x-1/2 max-w-[calc(100%-160px)] sm:max-w-[calc(100%-200px)]", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 sm:gap-3", children: [
38504
+ /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-base sm:text-lg md:text-xl lg:text-2xl xl:text-3xl font-semibold text-gray-900 truncate", children: formattedWorkspaceName }),
38190
38505
  workspaceHealth && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex h-2.5 w-2.5", children: [
38191
38506
  /* @__PURE__ */ jsxRuntime.jsx("span", { className: clsx(
38192
38507
  "animate-ping absolute inline-flex h-full w-full rounded-full opacity-75",
@@ -38198,18 +38513,18 @@ var WorkspaceDetailView = ({
38198
38513
  ) })
38199
38514
  ] })
38200
38515
  ] }) }),
38201
- workspaceHealth && activeTab !== "monthly_history" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute right-0 top-0 flex items-center h-8", children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs text-gray-500", children: [
38516
+ workspaceHealth && activeTab !== "monthly_history" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute right-0 top-0 flex items-center h-8", children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[10px] sm:text-xs text-gray-500 hidden sm:block", children: [
38202
38517
  "Last update: ",
38203
38518
  workspaceHealth.timeSinceLastUpdate
38204
38519
  ] }) }),
38205
38520
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-8" })
38206
38521
  ] }),
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: [
38522
+ 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
38523
  !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, {}) }),
38524
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm sm:text-base md:text-lg font-medium text-blue-600", children: /* @__PURE__ */ jsxRuntime.jsx(LiveTimer, {}) }),
38210
38525
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-px h-4 bg-blue-300" })
38211
38526
  ] }),
38212
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-base font-medium text-blue-600", children: formatISTDate2(new Date(workspace.date)) }),
38527
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs sm:text-sm md:text-base font-medium text-blue-600", children: formatISTDate2(new Date(workspace.date)) }),
38213
38528
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-px h-4 bg-blue-300" }),
38214
38529
  date && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
38215
38530
  /* @__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) }),
@@ -38704,8 +39019,8 @@ var SKUManagementView = () => {
38704
39019
  ] }) });
38705
39020
  }
38706
39021
  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(
39022
+ /* @__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: [
39023
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sm:absolute sm:left-0", children: /* @__PURE__ */ jsxRuntime.jsx(
38709
39024
  BackButtonMinimal,
38710
39025
  {
38711
39026
  onClick: handleBack,
@@ -38714,24 +39029,24 @@ var SKUManagementView = () => {
38714
39029
  "aria-label": "Navigate back to previous page"
38715
39030
  }
38716
39031
  ) }),
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" })
39032
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 text-center mx-auto mt-2 sm:mt-0", children: [
39033
+ /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-lg sm:text-xl md:text-2xl lg:text-3xl font-semibold text-gray-900", children: "SKU Management" }),
39034
+ /* @__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
39035
  ] }),
38721
39036
  /* @__PURE__ */ jsxRuntime.jsxs(
38722
39037
  "button",
38723
39038
  {
38724
39039
  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",
39040
+ 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
39041
  children: [
38727
- /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "w-4 h-4 mr-2" }),
39042
+ /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "w-3 h-3 sm:w-4 sm:h-4 mr-1.5 sm:mr-2" }),
38728
39043
  "Add SKU"
38729
39044
  ]
38730
39045
  }
38731
39046
  )
38732
39047
  ] }) }) }),
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." }) }),
39048
+ /* @__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: [
39049
+ /* @__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
39050
  error ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-red-50 border border-red-200 text-red-700 p-4 rounded-lg", children: [
38736
39051
  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium", children: "Error loading SKUs" }),
38737
39052
  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm mt-1", children: error.message })
@@ -38871,8 +39186,50 @@ var WorkspaceHealthView = ({
38871
39186
  ] }) }) }) });
38872
39187
  }
38873
39188
  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: [
39189
+ /* @__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: [
39190
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sm:hidden", children: [
39191
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-2", children: [
39192
+ /* @__PURE__ */ jsxRuntime.jsx(
39193
+ BackButtonMinimal,
39194
+ {
39195
+ onClick: () => router$1.push("/"),
39196
+ text: "Back",
39197
+ size: "sm",
39198
+ "aria-label": "Navigate back to dashboard"
39199
+ }
39200
+ ),
39201
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2", children: [
39202
+ /* @__PURE__ */ jsxRuntime.jsx(
39203
+ "button",
39204
+ {
39205
+ onClick: () => {
39206
+ refetch();
39207
+ },
39208
+ className: "p-1.5 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors",
39209
+ "aria-label": "Refresh",
39210
+ children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RefreshCw, { className: "h-4 w-4" })
39211
+ }
39212
+ ),
39213
+ /* @__PURE__ */ jsxRuntime.jsx(
39214
+ "button",
39215
+ {
39216
+ onClick: handleExport,
39217
+ className: "p-1.5 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors",
39218
+ "aria-label": "Export CSV",
39219
+ children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Download, { className: "h-4 w-4" })
39220
+ }
39221
+ )
39222
+ ] })
39223
+ ] }),
39224
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-center", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-2", children: [
39225
+ /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-base font-semibold text-gray-900", children: "System Health" }),
39226
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex h-2 w-2", children: [
39227
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75" }),
39228
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "relative inline-flex rounded-full h-2 w-2 bg-emerald-500" })
39229
+ ] })
39230
+ ] }) })
39231
+ ] }),
39232
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden sm:block", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex items-center", children: [
38876
39233
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-0 z-10", children: /* @__PURE__ */ jsxRuntime.jsx(
38877
39234
  BackButtonMinimal,
38878
39235
  {
@@ -38882,8 +39239,8 @@ var WorkspaceHealthView = ({
38882
39239
  "aria-label": "Navigate back to dashboard"
38883
39240
  }
38884
39241
  ) }),
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" }),
39242
+ /* @__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: [
39243
+ /* @__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
39244
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex h-2.5 w-2.5", children: [
38888
39245
  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75" }),
38889
39246
  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "relative inline-flex rounded-full h-2.5 w-2.5 bg-emerald-500" })
@@ -38912,15 +39269,15 @@ var WorkspaceHealthView = ({
38912
39269
  )
38913
39270
  ] }),
38914
39271
  /* @__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: [
39272
+ ] }) }),
39273
+ /* @__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: [
39274
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm sm:text-base md:text-lg font-medium text-blue-600", children: /* @__PURE__ */ jsxRuntime.jsx(LiveTimer, {}) }),
39275
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden sm:block w-px h-4 bg-blue-300" }),
39276
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs sm:text-sm md:text-base font-medium text-blue-600", children: formatDate(operationalDate) }),
39277
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden sm:block w-px h-4 bg-blue-300" }),
39278
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 sm:gap-2", children: [
38922
39279
  /* @__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: [
39280
+ /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs sm:text-sm md:text-base font-medium text-blue-600", children: [
38924
39281
  shiftType,
38925
39282
  " Shift"
38926
39283
  ] })