@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.mjs CHANGED
@@ -21773,11 +21773,13 @@ var VideoCard = React19__default.memo(({
21773
21773
  return /* @__PURE__ */ jsxs(
21774
21774
  "div",
21775
21775
  {
21776
- className: `workspace-card relative bg-gray-950 rounded-md overflow-hidden cursor-pointer transform hover:scale-[1.005] transition-transform duration-200 shadow-sm ${className}`,
21776
+ className: `workspace-card relative bg-gray-950 rounded-md overflow-hidden cursor-pointer transform hover:scale-[1.005] active:scale-[0.995] transition-transform duration-200 shadow-sm touch-manipulation ${className}`,
21777
21777
  style: { width: "100%", height: "100%" },
21778
21778
  onClick: handleClick,
21779
21779
  onMouseEnter,
21780
21780
  onMouseLeave,
21781
+ onTouchStart: (e) => e.currentTarget.classList.add("touch-active"),
21782
+ onTouchEnd: (e) => e.currentTarget.classList.remove("touch-active"),
21781
21783
  title: displayName,
21782
21784
  tabIndex: 0,
21783
21785
  "aria-label": `Open workspace ${displayName}`,
@@ -22872,9 +22874,11 @@ var BreakNotificationPopup = ({
22872
22874
  "button",
22873
22875
  {
22874
22876
  onClick: handleDismiss,
22875
- className: "ml-2 text-gray-400 hover:text-gray-600 transition-colors p-1 rounded-full hover:bg-gray-100",
22877
+ onTouchStart: () => {
22878
+ },
22879
+ className: "ml-2 text-gray-400 hover:text-gray-600 transition-colors p-2 sm:p-1 rounded-full hover:bg-gray-100 active:bg-gray-200 touch-manipulation min-h-[44px] min-w-[44px] sm:min-h-0 sm:min-w-0 flex items-center justify-center",
22876
22880
  "aria-label": "Dismiss notification",
22877
- children: /* @__PURE__ */ jsx(X, { className: "w-3 h-3" })
22881
+ children: /* @__PURE__ */ jsx(X, { className: "w-4 h-4 sm:w-3 sm:h-3" })
22878
22882
  }
22879
22883
  )
22880
22884
  ] })
@@ -26129,7 +26133,7 @@ var SelectTrigger = React19.forwardRef(({ className, children, ...props }, ref)
26129
26133
  {
26130
26134
  ref,
26131
26135
  className: cn(
26132
- "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
26136
+ "flex h-11 sm:h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 touch-manipulation",
26133
26137
  className
26134
26138
  ),
26135
26139
  ...props,
@@ -28252,7 +28256,7 @@ var WorkspaceGridItem = React19__default.memo(({
28252
28256
  "button",
28253
28257
  {
28254
28258
  onClick: handleClick,
28255
- className: `${styles2} ${colorClass} ${isBottleneck ? "ring-2 ring-red-500/70" : ""} ${isVeryLowEfficiency ? "ring-2 ring-red-500/50" : ""} ${isInactive ? "bg-gray-200" : ""} shadow-lg`,
28259
+ className: `${styles2} ${colorClass} ${isBottleneck ? "ring-2 ring-red-500/70" : ""} ${isVeryLowEfficiency ? "ring-2 ring-red-500/50" : ""} ${isInactive ? "bg-gray-200" : ""} shadow-lg touch-manipulation active:scale-[0.98] transition-transform`,
28256
28260
  "aria-label": isInactive ? `Inactive workspace ${workspaceNumber}` : `View details for workspace ${workspaceNumber}`,
28257
28261
  title: isInactive ? `Inactive: ${getWorkspaceDisplayName(data.workspace_name, data.line_id)}` : getWorkspaceDisplayName(data.workspace_name, data.line_id),
28258
28262
  children: /* @__PURE__ */ jsx("div", { className: `font-semibold tracking-wide text-lg sm:text-xl md:text-[min(4vw,2rem)] uppercase ${isInactive ? "text-gray-400" : "text-white"} drop-shadow-sm`, children: workspaceNumber })
@@ -28522,8 +28526,8 @@ var KPICard = ({
28522
28526
  },
28523
28527
  // Width for src matching - better mobile width, flexible on small screens
28524
28528
  !className?.includes("w-") && "w-[110px] sm:w-[180px] md:w-[220px]",
28525
- // Interactive styling if onClick is provided
28526
- onClick && "cursor-pointer hover:scale-[1.01] active:scale-[0.99]",
28529
+ // Interactive styling if onClick is provided - better touch targets
28530
+ onClick && "cursor-pointer hover:scale-[1.01] active:scale-[0.99] touch-manipulation min-h-[44px] min-w-[44px]",
28527
28531
  // Loading state
28528
28532
  isLoading && "animate-pulse",
28529
28533
  // User-provided classes
@@ -28534,6 +28538,8 @@ var KPICard = ({
28534
28538
  {
28535
28539
  className: cardClasses,
28536
28540
  onClick,
28541
+ onTouchStart: onClick ? () => {
28542
+ } : void 0,
28537
28543
  role: onClick ? "button" : void 0,
28538
28544
  tabIndex: onClick ? 0 : void 0,
28539
28545
  onKeyDown: onClick ? (e) => e.key === "Enter" && onClick() : void 0,
@@ -29271,27 +29277,27 @@ var DashboardHeader = memo(({ lineTitle, className = "", headerControls }) => {
29271
29277
  return /* @__PURE__ */ jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" }) });
29272
29278
  }
29273
29279
  };
29274
- return /* @__PURE__ */ jsxs("div", { className: `flex flex-row items-center justify-between w-full ${className}`, children: [
29280
+ return /* @__PURE__ */ jsxs("div", { className: `flex flex-col sm:flex-row items-start sm:items-center justify-between w-full gap-3 sm:gap-4 ${className}`, children: [
29275
29281
  /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
29276
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 sm:gap-2 md:gap-3", children: [
29277
- /* @__PURE__ */ jsx("h1", { className: "text-lg sm:text-xl md:text-2xl lg:text-3xl font-bold text-gray-800 tracking-tight leading-none", children: lineTitle }),
29278
- /* @__PURE__ */ jsx("div", { className: "h-1.5 w-1.5 sm:h-1.5 sm:w-1.5 md:h-2 md:w-2 rounded-full bg-green-500 animate-pulse ring-2 sm:ring-2 ring-green-500/30 ring-offset-1" })
29282
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 sm:gap-2 md:gap-3", children: [
29283
+ /* @__PURE__ */ jsx("h1", { className: "text-base sm:text-lg md:text-xl lg:text-2xl xl:text-3xl font-bold text-gray-800 tracking-tight leading-none truncate max-w-[200px] sm:max-w-[250px] md:max-w-[350px] lg:max-w-none", children: lineTitle }),
29284
+ /* @__PURE__ */ jsx("div", { className: "h-1.5 w-1.5 sm:h-1.5 sm:w-1.5 md:h-2 md:w-2 rounded-full bg-green-500 animate-pulse ring-2 sm:ring-2 ring-green-500/30 ring-offset-1 flex-shrink-0" })
29279
29285
  ] }),
29280
- /* @__PURE__ */ jsxs("div", { className: "mt-2 inline-flex items-center gap-2 sm:gap-3", children: [
29281
- /* @__PURE__ */ jsxs("div", { className: "text-xs sm:text-sm font-medium text-gray-600", children: [
29286
+ /* @__PURE__ */ jsxs("div", { className: "mt-1 sm:mt-2 inline-flex flex-wrap items-center gap-2 sm:gap-3", children: [
29287
+ /* @__PURE__ */ jsxs("div", { className: "text-[10px] sm:text-xs md:text-sm font-medium text-gray-600 whitespace-nowrap", children: [
29282
29288
  /* @__PURE__ */ jsx(ISTTimer2, {}),
29283
29289
  " IST"
29284
29290
  ] }),
29285
29291
  /* @__PURE__ */ jsxs("div", { className: "inline-flex items-center gap-1", children: [
29286
29292
  /* @__PURE__ */ jsx("div", { className: "text-gray-600", children: getShiftIcon() }),
29287
- /* @__PURE__ */ jsxs("span", { className: "text-xs sm:text-sm font-medium text-gray-600", children: [
29293
+ /* @__PURE__ */ jsxs("span", { className: "text-[10px] sm:text-xs md:text-sm font-medium text-gray-600 whitespace-nowrap", children: [
29288
29294
  getShiftName(),
29289
29295
  " Shift"
29290
29296
  ] })
29291
29297
  ] })
29292
29298
  ] })
29293
29299
  ] }),
29294
- headerControls && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-4", children: headerControls })
29300
+ headerControls && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2 sm:gap-3 md:gap-4 w-full sm:w-auto justify-end", children: headerControls })
29295
29301
  ] });
29296
29302
  });
29297
29303
  DashboardHeader.displayName = "DashboardHeader";
@@ -29603,27 +29609,27 @@ var PageHeader = ({
29603
29609
  className
29604
29610
  ),
29605
29611
  children: [
29606
- /* @__PURE__ */ jsxs("div", { className: "h-16 mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between", children: [
29607
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 min-w-0", children: [
29612
+ /* @__PURE__ */ jsxs("div", { className: "h-14 sm:h-16 mx-auto px-3 sm:px-4 md:px-6 lg:px-8 flex items-center justify-between", children: [
29613
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 sm:gap-3 min-w-0 flex-1", children: [
29608
29614
  onMobileMenuOpen && /* @__PURE__ */ jsx(HamburgerButton, { onClick: onMobileMenuOpen }),
29609
- headerLogo && /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 mr-2 md:hidden", children: headerLogo }),
29615
+ headerLogo && /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 mr-1 sm:mr-2 md:hidden", children: headerLogo }),
29610
29616
  " ",
29611
- /* @__PURE__ */ jsxs("div", { className: "flex flex-col min-w-0", children: [
29617
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col min-w-0 flex-1", children: [
29612
29618
  breadcrumbs && breadcrumbs.length > 0 && /* @__PURE__ */ jsx(Breadcrumbs, { items: breadcrumbs }),
29613
- /* @__PURE__ */ jsx("h1", { className: "text-lg md:text-xl font-semibold text-gray-900 dark:text-white truncate", title, children: title })
29619
+ /* @__PURE__ */ jsx("h1", { className: "text-sm sm:text-base md:text-lg lg:text-xl font-semibold text-gray-900 dark:text-white truncate", title, children: title })
29614
29620
  ] })
29615
29621
  ] }),
29616
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 md:gap-4", children: [
29617
- actions && /* @__PURE__ */ jsx("div", { className: "hidden md:flex items-center gap-2", children: actions }),
29618
- /* @__PURE__ */ jsxs("button", { onClick: toggleDarkMode, className: "p-1.5 rounded-md text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-indigo-500", children: [
29619
- darkMode ? /* @__PURE__ */ jsx(Sun, { className: "h-5 w-5" }) : /* @__PURE__ */ jsx(Moon, { className: "h-5 w-5" }),
29622
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 sm:gap-3 md:gap-4 flex-shrink-0", children: [
29623
+ actions && /* @__PURE__ */ jsx("div", { className: "hidden sm:flex items-center gap-2", children: actions }),
29624
+ /* @__PURE__ */ jsxs("button", { onClick: toggleDarkMode, className: "p-1 sm:p-1.5 rounded-md text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-indigo-500", children: [
29625
+ darkMode ? /* @__PURE__ */ jsx(Sun, { className: "h-4 w-4 sm:h-5 sm:w-5" }) : /* @__PURE__ */ jsx(Moon, { className: "h-4 w-4 sm:h-5 sm:w-5" }),
29620
29626
  /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Toggle dark mode" })
29621
29627
  ] }),
29622
- showDateTime && /* @__PURE__ */ jsx(DateTimeDisplay, { className: "hidden lg:flex" }),
29628
+ showDateTime && /* @__PURE__ */ jsx(DateTimeDisplay, { className: "hidden sm:flex text-xs sm:text-sm" }),
29623
29629
  userProfileConfig && /* @__PURE__ */ jsx(UserProfileDropdown, { config: userProfileConfig })
29624
29630
  ] })
29625
29631
  ] }),
29626
- actions && /* @__PURE__ */ jsx("div", { className: "md:hidden px-4 pb-2 border-t border-gray-200 dark:border-gray-700 flex items-center justify-end gap-2", children: actions })
29632
+ actions && /* @__PURE__ */ jsx("div", { className: "sm:hidden px-3 py-2 border-t border-gray-200 dark:border-gray-700 flex items-center justify-end gap-2", children: actions })
29627
29633
  ]
29628
29634
  }
29629
29635
  );
@@ -29647,9 +29653,9 @@ var SideNavBar = memo(({
29647
29653
  const pathname = propPathname || router.pathname;
29648
29654
  const getButtonClasses = useCallback((path) => {
29649
29655
  const isActive = pathname === path || pathname.startsWith(path + "/");
29650
- return `w-full flex flex-col items-center justify-center py-3 px-1 rounded-lg relative group
29651
- ${isActive ? "bg-blue-100 text-blue-700 shadow-md border border-blue-200 font-semibold" : "hover:bg-gray-50 text-gray-500 hover:text-gray-700 font-medium"}
29652
- transition-all duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2`;
29656
+ 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
29657
+ ${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"}
29658
+ transition-all duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 active:scale-[0.98]`;
29653
29659
  }, [pathname]);
29654
29660
  const handleHomeClick = useCallback(() => {
29655
29661
  navigate("/", {
@@ -29813,7 +29819,7 @@ var SideNavBar = memo(({
29813
29819
  "aria-selected": pathname === "/" || pathname.startsWith("//"),
29814
29820
  children: [
29815
29821
  /* @__PURE__ */ jsx(HomeIcon, { className: "w-5 h-5 mb-1" }),
29816
- /* @__PURE__ */ jsx("span", { className: "text-[10px] font-medium leading-tight", children: "Home" })
29822
+ /* @__PURE__ */ jsx("span", { className: "text-xs sm:text-[10px] font-medium leading-tight", children: "Home" })
29817
29823
  ]
29818
29824
  }
29819
29825
  ) }),
@@ -29829,7 +29835,7 @@ var SideNavBar = memo(({
29829
29835
  "aria-selected": pathname === "/leaderboard" || pathname.startsWith("/leaderboard/"),
29830
29836
  children: [
29831
29837
  /* @__PURE__ */ jsx(TrophyIcon, { className: "w-5 h-5 mb-1" }),
29832
- /* @__PURE__ */ jsx("span", { className: "text-[10px] font-medium leading-tight", children: "Leaders" })
29838
+ /* @__PURE__ */ jsx("span", { className: "text-xs sm:text-[10px] font-medium leading-tight", children: "Leaders" })
29833
29839
  ]
29834
29840
  }
29835
29841
  ),
@@ -29844,7 +29850,7 @@ var SideNavBar = memo(({
29844
29850
  "aria-selected": pathname === "/kpis" || pathname.startsWith("/kpis/"),
29845
29851
  children: [
29846
29852
  /* @__PURE__ */ jsx(ChartBarIcon, { className: "w-5 h-5 mb-1" }),
29847
- /* @__PURE__ */ jsx("span", { className: "text-[10px] font-medium leading-tight", children: "Lines" })
29853
+ /* @__PURE__ */ jsx("span", { className: "text-xs sm:text-[10px] font-medium leading-tight", children: "Lines" })
29848
29854
  ]
29849
29855
  }
29850
29856
  ),
@@ -29859,7 +29865,7 @@ var SideNavBar = memo(({
29859
29865
  "aria-selected": pathname === "/targets" || pathname.startsWith("/targets/"),
29860
29866
  children: [
29861
29867
  /* @__PURE__ */ jsx(AdjustmentsHorizontalIcon, { className: "w-5 h-5 mb-1" }),
29862
- /* @__PURE__ */ jsx("span", { className: "text-[10px] font-medium leading-tight", children: "Targets" })
29868
+ /* @__PURE__ */ jsx("span", { className: "text-xs sm:text-[10px] font-medium leading-tight", children: "Targets" })
29863
29869
  ]
29864
29870
  }
29865
29871
  ),
@@ -29874,7 +29880,7 @@ var SideNavBar = memo(({
29874
29880
  "aria-selected": pathname === "/shifts" || pathname.startsWith("/shifts/"),
29875
29881
  children: [
29876
29882
  /* @__PURE__ */ jsx(ClockIcon, { className: "w-5 h-5 mb-1" }),
29877
- /* @__PURE__ */ jsx("span", { className: "text-[10px] font-medium leading-tight", children: "Shifts" })
29883
+ /* @__PURE__ */ jsx("span", { className: "text-xs sm:text-[10px] font-medium leading-tight", children: "Shifts" })
29878
29884
  ]
29879
29885
  }
29880
29886
  ),
@@ -29889,7 +29895,7 @@ var SideNavBar = memo(({
29889
29895
  "aria-selected": pathname === "/skus" || pathname.startsWith("/skus/"),
29890
29896
  children: [
29891
29897
  /* @__PURE__ */ jsx(CubeIcon, { className: "w-5 h-5 mb-1" }),
29892
- /* @__PURE__ */ jsx("span", { className: "text-[10px] font-medium leading-tight", children: "SKUs" })
29898
+ /* @__PURE__ */ jsx("span", { className: "text-xs sm:text-[10px] font-medium leading-tight", children: "SKUs" })
29893
29899
  ]
29894
29900
  }
29895
29901
  ),
@@ -29904,7 +29910,7 @@ var SideNavBar = memo(({
29904
29910
  "aria-selected": pathname === "/ai-agent" || pathname.startsWith("/ai-agent/"),
29905
29911
  children: [
29906
29912
  /* @__PURE__ */ jsx(SparklesIcon, { className: "w-5 h-5 mb-1" }),
29907
- /* @__PURE__ */ jsx("span", { className: "text-[10px] font-medium leading-tight", children: "Axel" })
29913
+ /* @__PURE__ */ jsx("span", { className: "text-xs sm:text-[10px] font-medium leading-tight", children: "Axel" })
29908
29914
  ]
29909
29915
  }
29910
29916
  ),
@@ -29919,7 +29925,7 @@ var SideNavBar = memo(({
29919
29925
  "aria-selected": pathname === "/help" || pathname.startsWith("/help/"),
29920
29926
  children: [
29921
29927
  /* @__PURE__ */ jsx(QuestionMarkCircleIcon, { className: "w-5 h-5 mb-1" }),
29922
- /* @__PURE__ */ jsx("span", { className: "text-[10px] font-medium leading-tight", children: "Help" })
29928
+ /* @__PURE__ */ jsx("span", { className: "text-xs sm:text-[10px] font-medium leading-tight", children: "Help" })
29923
29929
  ]
29924
29930
  }
29925
29931
  ),
@@ -29934,7 +29940,7 @@ var SideNavBar = memo(({
29934
29940
  "aria-selected": pathname === "/health" || pathname.startsWith("/health/"),
29935
29941
  children: [
29936
29942
  /* @__PURE__ */ jsx(HeartIcon, { className: "w-5 h-5 mb-1" }),
29937
- /* @__PURE__ */ jsx("span", { className: "text-[10px] font-medium leading-tight", children: "Health" })
29943
+ /* @__PURE__ */ jsx("span", { className: "text-xs sm:text-[10px] font-medium leading-tight", children: "Health" })
29938
29944
  ]
29939
29945
  }
29940
29946
  )
@@ -29951,7 +29957,7 @@ var SideNavBar = memo(({
29951
29957
  "aria-selected": pathname === "/profile" || pathname.startsWith("/profile/"),
29952
29958
  children: [
29953
29959
  /* @__PURE__ */ jsx(UserCircleIcon, { className: "w-5 h-5 mb-1" }),
29954
- /* @__PURE__ */ jsx("span", { className: "text-[10px] font-medium leading-tight", children: "Profile" })
29960
+ /* @__PURE__ */ jsx("span", { className: "text-xs sm:text-[10px] font-medium leading-tight", children: "Profile" })
29955
29961
  ]
29956
29962
  }
29957
29963
  ) })
@@ -30281,29 +30287,32 @@ var Header = ({
30281
30287
  const handleLogout = async () => {
30282
30288
  await signOut();
30283
30289
  };
30284
- return /* @__PURE__ */ jsx("header", { className: `fixed top-0 left-0 right-0 h-16 bg-white border-b border-gray-200 z-50 ${className}`, children: /* @__PURE__ */ jsxs("div", { className: "h-full max-w-[1920px] mx-auto px-6 flex items-center justify-between", children: [
30285
- /* @__PURE__ */ jsx("div", { className: "flex items-center gap-6", children: /* @__PURE__ */ jsx("h1", { className: "text-xl font-semibold text-gray-900", children: getPageTitle() }) }),
30286
- user && /* @__PURE__ */ jsxs("div", { className: "relative", children: [
30290
+ return /* @__PURE__ */ jsx("header", { className: `fixed top-0 left-0 right-0 h-14 sm:h-16 bg-white border-b border-gray-200 z-50 ${className}`, children: /* @__PURE__ */ jsxs("div", { className: "h-full max-w-[1920px] mx-auto px-3 sm:px-4 md:px-6 flex items-center justify-between", children: [
30291
+ /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2 sm:gap-4 md:gap-6 min-w-0", children: /* @__PURE__ */ jsx("h1", { className: "text-sm sm:text-base md:text-lg lg:text-xl font-semibold text-gray-900 truncate", children: getPageTitle() }) }),
30292
+ user && /* @__PURE__ */ jsxs("div", { className: "relative flex-shrink-0", children: [
30287
30293
  /* @__PURE__ */ jsxs(
30288
30294
  "button",
30289
30295
  {
30290
30296
  onClick: () => setShowDropdown(!showDropdown),
30291
- className: "flex items-center gap-2 px-3 py-2 rounded-md hover:bg-gray-100 transition-colors",
30297
+ className: "flex items-center gap-1 sm:gap-2 px-2 sm:px-3 py-1 sm:py-2 rounded-md hover:bg-gray-100 transition-colors",
30292
30298
  children: [
30293
- /* @__PURE__ */ jsx("div", { className: "w-8 h-8 bg-indigo-600 rounded-full flex items-center justify-center text-white text-sm font-medium", children: user.email?.[0]?.toUpperCase() || "U" }),
30294
- /* @__PURE__ */ jsx("span", { className: "text-sm text-gray-700", children: user.email }),
30295
- /* @__PURE__ */ jsx("svg", { className: "w-4 h-4 text-gray-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) })
30299
+ /* @__PURE__ */ jsx("div", { className: "w-6 h-6 sm:w-7 sm:h-7 md:w-8 md:h-8 bg-indigo-600 rounded-full flex items-center justify-center text-white text-xs sm:text-sm font-medium flex-shrink-0", children: user.email?.[0]?.toUpperCase() || "U" }),
30300
+ /* @__PURE__ */ jsx("span", { className: "text-xs sm:text-sm text-gray-700 truncate max-w-[100px] sm:max-w-[150px] md:max-w-[200px] lg:max-w-none hidden sm:block", children: user.email }),
30301
+ /* @__PURE__ */ jsx("svg", { className: "w-3 h-3 sm:w-4 sm:h-4 text-gray-400 flex-shrink-0", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) })
30296
30302
  ]
30297
30303
  }
30298
30304
  ),
30299
- showDropdown && /* @__PURE__ */ jsx("div", { className: "absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-50", children: /* @__PURE__ */ jsx(
30300
- "button",
30301
- {
30302
- onClick: handleLogout,
30303
- className: "block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100",
30304
- children: "Sign out"
30305
- }
30306
- ) })
30305
+ showDropdown && /* @__PURE__ */ jsxs("div", { className: "absolute right-0 mt-1 sm:mt-2 w-40 sm:w-48 bg-white rounded-md shadow-lg py-1 z-50", children: [
30306
+ /* @__PURE__ */ jsx("div", { className: "block sm:hidden px-4 py-2 text-xs text-gray-500 border-b border-gray-100", children: user.email }),
30307
+ /* @__PURE__ */ jsx(
30308
+ "button",
30309
+ {
30310
+ onClick: handleLogout,
30311
+ className: "block w-full text-left px-4 py-2 text-xs sm:text-sm text-gray-700 hover:bg-gray-100",
30312
+ children: "Sign out"
30313
+ }
30314
+ )
30315
+ ] })
30307
30316
  ] })
30308
30317
  ] }) });
30309
30318
  };
@@ -30654,7 +30663,7 @@ var ThreadSidebar = ({
30654
30663
  ] });
30655
30664
  };
30656
30665
  var axelProfilePng = "/axel-profile.png";
30657
- var ProfilePicture = React19__default.memo(({ alt = "Axel", className = "w-12 h-12" }) => {
30666
+ var ProfilePicture = React19__default.memo(({ alt = "Axel", className = "w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12" }) => {
30658
30667
  return /* @__PURE__ */ jsx("div", { className: "flex-shrink-0", children: /* @__PURE__ */ jsx("div", { className: `${className} rounded-xl overflow-hidden shadow-sm`, children: /* @__PURE__ */ jsx(
30659
30668
  "img",
30660
30669
  {
@@ -32260,54 +32269,105 @@ var AIAgentView = () => {
32260
32269
  }
32261
32270
  `
32262
32271
  } }),
32263
- /* @__PURE__ */ jsxs("div", { className: `flex-1 flex flex-col h-screen transition-all duration-300 ${isSidebarOpen ? "mr-80" : "mr-0"}`, children: [
32264
- /* @__PURE__ */ jsx("header", { className: "flex-shrink-0 bg-white px-8 py-6 shadow-sm border-b border-gray-200/80 sticky top-0 z-10", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between relative", children: [
32265
- /* @__PURE__ */ jsx("div", { className: "absolute left-0", children: /* @__PURE__ */ jsx(
32266
- BackButtonMinimal,
32267
- {
32268
- onClick: () => navigate("/"),
32269
- text: "Back",
32270
- size: "default",
32271
- "aria-label": "Navigate back to dashboard"
32272
- }
32273
- ) }),
32274
- /* @__PURE__ */ jsxs("div", { className: "flex-1 text-center mx-auto", children: [
32275
- /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-3 mb-1", children: [
32276
- /* @__PURE__ */ jsx("h1", { className: "text-3xl font-semibold text-gray-900", children: "Chat with Axel" }),
32277
- /* @__PURE__ */ jsx("div", { className: "h-1 w-1 sm:h-1.5 sm:w-1.5 md:h-2 md:w-2 rounded-full bg-green-500 animate-pulse ring-1 sm:ring-2 ring-green-500/30 ring-offset-1" })
32272
+ /* @__PURE__ */ jsxs("div", { className: `flex-1 flex flex-col h-screen transition-all duration-300 ${isSidebarOpen ? "lg:mr-80 mr-0" : "mr-0"}`, children: [
32273
+ /* @__PURE__ */ jsxs("header", { className: "flex-shrink-0 bg-white px-3 sm:px-6 md:px-8 py-3 sm:py-5 md:py-6 shadow-sm border-b border-gray-200/80 sticky top-0 z-10", children: [
32274
+ /* @__PURE__ */ jsxs("div", { className: "sm:hidden", children: [
32275
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-2", children: [
32276
+ /* @__PURE__ */ jsx(
32277
+ BackButtonMinimal,
32278
+ {
32279
+ onClick: () => navigate("/"),
32280
+ text: "Back",
32281
+ size: "sm",
32282
+ "aria-label": "Navigate back to dashboard"
32283
+ }
32284
+ ),
32285
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
32286
+ /* @__PURE__ */ jsxs(
32287
+ "button",
32288
+ {
32289
+ onClick: handleNewThread,
32290
+ 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",
32291
+ children: [
32292
+ /* @__PURE__ */ jsx(RefreshCw, { className: "w-3.5 h-3.5" }),
32293
+ /* @__PURE__ */ jsx("span", { children: "New" })
32294
+ ]
32295
+ }
32296
+ ),
32297
+ /* @__PURE__ */ jsx(
32298
+ "button",
32299
+ {
32300
+ onClick: () => setIsSidebarOpen(!isSidebarOpen),
32301
+ 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",
32302
+ "aria-label": "Toggle chat history",
32303
+ children: isSidebarOpen ? /* @__PURE__ */ jsxs(Fragment, { children: [
32304
+ /* @__PURE__ */ jsx(X, { className: "w-3.5 h-3.5" }),
32305
+ /* @__PURE__ */ jsx("span", { children: "Hide" })
32306
+ ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
32307
+ /* @__PURE__ */ jsx(Menu, { className: "w-3.5 h-3.5" }),
32308
+ /* @__PURE__ */ jsx("span", { children: "History" }),
32309
+ newChatCount > 0 && /* @__PURE__ */ jsx("span", { className: "ml-1 bg-red-500 text-white text-xs rounded-full px-1.5 py-0.5 font-medium", children: newChatCount })
32310
+ ] })
32311
+ }
32312
+ )
32313
+ ] })
32278
32314
  ] }),
32279
- /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "text-sm text-gray-500", children: /* @__PURE__ */ jsx(ISTTimer_default, {}) }) })
32315
+ /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
32316
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-2 mb-0.5", children: [
32317
+ /* @__PURE__ */ jsx("h1", { className: "text-base font-semibold text-gray-900", children: "Chat with Axel" }),
32318
+ /* @__PURE__ */ jsx("div", { className: "h-1 w-1 rounded-full bg-green-500 animate-pulse ring-1 ring-green-500/30 ring-offset-1" })
32319
+ ] }),
32320
+ /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "text-xs text-gray-500", children: /* @__PURE__ */ jsx(ISTTimer_default, {}) }) })
32321
+ ] })
32280
32322
  ] }),
32281
- /* @__PURE__ */ jsxs("div", { className: "absolute right-0 flex items-center gap-2", children: [
32282
- /* @__PURE__ */ jsxs(
32283
- "button",
32284
- {
32285
- onClick: handleNewThread,
32286
- className: "flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors text-sm font-medium",
32287
- children: [
32288
- /* @__PURE__ */ jsx(RefreshCw, { className: "w-4 h-4" }),
32289
- "New Chat"
32290
- ]
32291
- }
32292
- ),
32293
- /* @__PURE__ */ jsx(
32294
- "button",
32323
+ /* @__PURE__ */ jsxs("div", { className: "hidden sm:flex items-center justify-between relative", children: [
32324
+ /* @__PURE__ */ jsx("div", { className: "absolute left-0", children: /* @__PURE__ */ jsx(
32325
+ BackButtonMinimal,
32295
32326
  {
32296
- onClick: () => setIsSidebarOpen(!isSidebarOpen),
32297
- className: "relative flex items-center gap-2 px-4 py-2 text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 transition-colors text-sm font-medium",
32298
- "aria-label": "Toggle chat history",
32299
- children: isSidebarOpen ? /* @__PURE__ */ jsxs(Fragment, { children: [
32300
- /* @__PURE__ */ jsx(X, { className: "w-4 h-4" }),
32301
- /* @__PURE__ */ jsx("span", { children: "Hide History" })
32302
- ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
32303
- /* @__PURE__ */ jsx(Menu, { className: "w-4 h-4" }),
32304
- /* @__PURE__ */ jsx("span", { children: "Chat History" }),
32305
- newChatCount > 0 && /* @__PURE__ */ jsx("span", { className: "ml-1 bg-red-500 text-white text-xs rounded-full px-2 py-0.5 font-medium", children: newChatCount })
32306
- ] })
32327
+ onClick: () => navigate("/"),
32328
+ text: "Back",
32329
+ size: "default",
32330
+ "aria-label": "Navigate back to dashboard"
32307
32331
  }
32308
- )
32332
+ ) }),
32333
+ /* @__PURE__ */ jsxs("div", { className: "flex-1 text-center mx-auto", children: [
32334
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-3 mb-1", children: [
32335
+ /* @__PURE__ */ jsx("h1", { className: "text-xl md:text-2xl lg:text-3xl font-semibold text-gray-900", children: "Chat with Axel" }),
32336
+ /* @__PURE__ */ jsx("div", { className: "h-1.5 w-1.5 md:h-2 md:w-2 rounded-full bg-green-500 animate-pulse ring-2 ring-green-500/30 ring-offset-1" })
32337
+ ] }),
32338
+ /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "text-sm text-gray-500", children: /* @__PURE__ */ jsx(ISTTimer_default, {}) }) })
32339
+ ] }),
32340
+ /* @__PURE__ */ jsxs("div", { className: "absolute right-0 flex items-center gap-2", children: [
32341
+ /* @__PURE__ */ jsxs(
32342
+ "button",
32343
+ {
32344
+ onClick: handleNewThread,
32345
+ 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",
32346
+ children: [
32347
+ /* @__PURE__ */ jsx(RefreshCw, { className: "w-4 h-4" }),
32348
+ /* @__PURE__ */ jsx("span", { children: "New Chat" })
32349
+ ]
32350
+ }
32351
+ ),
32352
+ /* @__PURE__ */ jsx(
32353
+ "button",
32354
+ {
32355
+ onClick: () => setIsSidebarOpen(!isSidebarOpen),
32356
+ 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",
32357
+ "aria-label": "Toggle chat history",
32358
+ children: isSidebarOpen ? /* @__PURE__ */ jsxs(Fragment, { children: [
32359
+ /* @__PURE__ */ jsx(X, { className: "w-4 h-4" }),
32360
+ /* @__PURE__ */ jsx("span", { children: "Hide History" })
32361
+ ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
32362
+ /* @__PURE__ */ jsx(Menu, { className: "w-4 h-4" }),
32363
+ /* @__PURE__ */ jsx("span", { children: "Chat History" }),
32364
+ newChatCount > 0 && /* @__PURE__ */ jsx("span", { className: "ml-1 bg-red-500 text-white text-xs rounded-full px-2 py-0.5 font-medium", children: newChatCount })
32365
+ ] })
32366
+ }
32367
+ )
32368
+ ] })
32309
32369
  ] })
32310
- ] }) }),
32370
+ ] }),
32311
32371
  /* @__PURE__ */ jsx(
32312
32372
  "main",
32313
32373
  {
@@ -32315,16 +32375,16 @@ var AIAgentView = () => {
32315
32375
  className: `flex-1 bg-gray-50/50 min-h-0 ${displayMessages.length === 0 && !isTransitioning ? "flex items-center justify-center" : "overflow-y-auto"}`,
32316
32376
  children: !activeThreadId && displayMessages.length === 0 && !isTransitioning ? (
32317
32377
  /* Centered welcome and input for new chat */
32318
- /* @__PURE__ */ jsxs("div", { className: "w-full max-w-3xl mx-auto px-4 sm:px-6 flex flex-col items-center justify-center space-y-12 -mt-16", children: [
32378
+ /* @__PURE__ */ jsxs("div", { className: "w-full max-w-3xl mx-auto px-3 sm:px-4 md:px-6 flex flex-col items-center justify-center space-y-8 sm:space-y-12 -mt-8 sm:-mt-16", children: [
32319
32379
  /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
32320
- /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center mb-8", children: /* @__PURE__ */ jsx(ProfilePicture, { alt: "Axel - AI Manufacturing Expert", className: "w-24 h-24" }) }),
32321
- /* @__PURE__ */ jsxs("h2", { className: "text-3xl font-semibold text-gray-900", children: [
32380
+ /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center mb-4 sm:mb-6 md:mb-8", children: /* @__PURE__ */ jsx(ProfilePicture, { alt: "Axel - AI Manufacturing Expert", className: "w-16 h-16 sm:w-20 sm:h-20 md:w-24 md:h-24" }) }),
32381
+ /* @__PURE__ */ jsxs("h2", { className: "text-lg sm:text-xl md:text-2xl lg:text-3xl font-semibold text-gray-900 px-2 sm:px-4", children: [
32322
32382
  typedText,
32323
32383
  typedText.length < "Hi, I'm Axel - Your AI Supervisor".length && /* @__PURE__ */ jsx("span", { className: "animate-pulse", children: "|" })
32324
32384
  ] })
32325
32385
  ] }),
32326
32386
  /* @__PURE__ */ jsx("div", { className: "w-full max-w-2xl", children: /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, children: [
32327
- /* @__PURE__ */ jsx("div", { className: "relative bg-white rounded-3xl shadow-lg border border-gray-200 focus-within:border-gray-300 transition-all duration-200", children: /* @__PURE__ */ jsx("div", { className: "flex items-end gap-2 p-3", children: /* @__PURE__ */ jsxs("div", { className: "flex-1 relative", children: [
32387
+ /* @__PURE__ */ jsx("div", { className: "relative bg-white rounded-2xl sm:rounded-3xl shadow-lg border border-gray-200 focus-within:border-gray-300 transition-all duration-200", children: /* @__PURE__ */ jsx("div", { className: "flex items-end gap-2 p-3 sm:p-4", children: /* @__PURE__ */ jsxs("div", { className: "flex-1 relative", children: [
32328
32388
  /* @__PURE__ */ jsx(
32329
32389
  "textarea",
32330
32390
  {
@@ -32355,24 +32415,24 @@ var AIAgentView = () => {
32355
32415
  });
32356
32416
  },
32357
32417
  placeholder: "Ask me anything about your shop-floor",
32358
- className: "w-full resize-none bg-transparent px-2 py-2 pr-12 focus:outline-none placeholder-gray-500 text-gray-900 text-sm leading-relaxed",
32418
+ className: "w-full resize-none bg-transparent px-3 sm:px-4 py-3 sm:py-2 pr-12 sm:pr-14 focus:outline-none placeholder-gray-500 text-gray-900 text-sm sm:text-base leading-relaxed",
32359
32419
  rows: 1,
32360
- style: { minHeight: "24px", maxHeight: "120px" }
32420
+ style: { minHeight: "40px", maxHeight: "120px" }
32361
32421
  }
32362
32422
  ),
32363
- /* @__PURE__ */ jsx("div", { className: "absolute right-2 bottom-2 flex items-center gap-2", children: /* @__PURE__ */ jsx(
32423
+ /* @__PURE__ */ jsx("div", { className: "absolute right-2 sm:right-3 bottom-2 sm:bottom-2 flex items-center gap-2", children: /* @__PURE__ */ jsx(
32364
32424
  "button",
32365
32425
  {
32366
32426
  type: "submit",
32367
32427
  disabled: !inputValue.trim() || isCurrentThreadLoading,
32368
- className: "inline-flex items-center justify-center w-8 h-8 bg-gray-900 text-white rounded-full hover:bg-gray-800 transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed focus:outline-none focus:ring-2 focus:ring-gray-500/20",
32428
+ className: "inline-flex items-center justify-center w-8 h-8 sm:w-9 sm:h-9 bg-gray-900 text-white rounded-full hover:bg-gray-800 transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed focus:outline-none focus:ring-2 focus:ring-gray-500/20",
32369
32429
  children: /* @__PURE__ */ jsx(Send, { className: "w-4 h-4" })
32370
32430
  }
32371
32431
  ) })
32372
32432
  ] }) }) }),
32373
- /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center mt-2 text-xs text-gray-400", children: [
32374
- /* @__PURE__ */ jsx("span", { children: isCurrentThreadLoading ? "You can type your next message while Axel responds" : "Press Enter to send \u2022 Shift+Enter for new line" }),
32375
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 ml-4", children: [
32433
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col sm:flex-row items-center justify-center gap-2 sm:gap-4 mt-2 text-xs text-gray-400", children: [
32434
+ /* @__PURE__ */ jsx("span", { className: "text-center", children: isCurrentThreadLoading ? "You can type your next message while Axel responds" : "Press Enter to send \u2022 Shift+Enter for new line" }),
32435
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
32376
32436
  /* @__PURE__ */ jsx("div", { className: `w-1.5 h-1.5 rounded-full ${isCurrentThreadLoading ? "bg-orange-500" : "bg-green-500"}` }),
32377
32437
  /* @__PURE__ */ jsx("span", { children: isCurrentThreadLoading ? "Responding..." : "Connected" })
32378
32438
  ] })
@@ -32381,17 +32441,17 @@ var AIAgentView = () => {
32381
32441
  ] })
32382
32442
  ) : isTransitioning ? (
32383
32443
  /* Transition state - show user message first, then thinking */
32384
- /* @__PURE__ */ jsx("div", { className: "max-w-4xl mx-auto px-4 sm:px-6 py-6 pb-32", children: /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
32444
+ /* @__PURE__ */ jsx("div", { className: "max-w-4xl mx-auto px-3 sm:px-4 md:px-6 py-4 sm:py-6 pb-24 sm:pb-32", children: /* @__PURE__ */ jsxs("div", { className: "space-y-4 sm:space-y-6", children: [
32385
32445
  displayMessages.map((message, index) => /* @__PURE__ */ jsxs(
32386
32446
  "div",
32387
32447
  {
32388
- className: `flex gap-4 ${message.role === "user" ? "justify-end" : "justify-start"}`,
32448
+ className: `flex gap-2 sm:gap-3 md:gap-4 ${message.role === "user" ? "justify-end" : "justify-start"}`,
32389
32449
  children: [
32390
32450
  message.role === "assistant" && /* @__PURE__ */ jsx(ProfilePicture, {}),
32391
32451
  /* @__PURE__ */ jsx("div", { className: `max-w-none w-full group ${message.role === "user" ? "order-1" : ""}`, children: /* @__PURE__ */ jsx(
32392
32452
  "div",
32393
32453
  {
32394
- className: `relative px-5 py-4 rounded-2xl shadow-sm ${message.role === "user" ? "bg-blue-600 text-white max-w-[85%] ml-auto" : "bg-white border border-gray-200/80 max-w-full"}`,
32454
+ className: `relative px-3 sm:px-4 md:px-5 py-3 sm:py-4 rounded-xl sm:rounded-2xl shadow-sm ${message.role === "user" ? "bg-blue-600 text-white max-w-[90%] sm:max-w-[85%] ml-auto" : "bg-white border border-gray-200/80 max-w-full"}`,
32395
32455
  children: /* @__PURE__ */ jsxs("div", { className: `${message.role === "user" ? "text-white" : "text-gray-800"}`, children: [
32396
32456
  message.role === "assistant" ? message.id === -1 ? /* @__PURE__ */ jsx(
32397
32457
  "div",
@@ -32415,18 +32475,18 @@ var AIAgentView = () => {
32415
32475
  ] }) })
32416
32476
  ) : (
32417
32477
  /* Regular chat view with messages */
32418
- /* @__PURE__ */ jsx("div", { className: "max-w-4xl mx-auto px-4 sm:px-6 py-6 pb-32", children: /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
32478
+ /* @__PURE__ */ jsx("div", { className: "max-w-4xl mx-auto px-3 sm:px-4 md:px-6 py-4 sm:py-6 pb-24 sm:pb-32", children: /* @__PURE__ */ jsxs("div", { className: "space-y-4 sm:space-y-6", children: [
32419
32479
  displayMessages.map((message, index) => /* @__PURE__ */ jsxs(
32420
32480
  "div",
32421
32481
  {
32422
- className: `flex gap-4 ${message.role === "user" ? "justify-end" : "justify-start"}`,
32482
+ className: `flex gap-2 sm:gap-3 md:gap-4 ${message.role === "user" ? "justify-end" : "justify-start"}`,
32423
32483
  children: [
32424
32484
  message.role === "assistant" && /* @__PURE__ */ jsx(ProfilePicture, {}),
32425
32485
  /* @__PURE__ */ jsxs("div", { className: `max-w-none w-full group ${message.role === "user" ? "order-1" : ""}`, children: [
32426
32486
  /* @__PURE__ */ jsxs(
32427
32487
  "div",
32428
32488
  {
32429
- className: `relative px-5 py-4 rounded-2xl shadow-sm ${message.role === "user" ? "bg-blue-600 text-white max-w-[85%] ml-auto" : "bg-white border border-gray-200/80 max-w-full"}`,
32489
+ className: `relative px-3 sm:px-4 md:px-5 py-3 sm:py-4 rounded-xl sm:rounded-2xl shadow-sm ${message.role === "user" ? "bg-blue-600 text-white max-w-[90%] sm:max-w-[85%] ml-auto" : "bg-white border border-gray-200/80 max-w-full"}`,
32430
32490
  children: [
32431
32491
  /* @__PURE__ */ jsxs("div", { className: `${message.role === "user" ? "text-white" : "text-gray-800"}`, children: [
32432
32492
  message.role === "assistant" ? message.id === -1 ? /* @__PURE__ */ jsx(
@@ -32442,9 +32502,9 @@ var AIAgentView = () => {
32442
32502
  "button",
32443
32503
  {
32444
32504
  onClick: () => copyToClipboard(message.content, message.id.toString()),
32445
- className: "absolute top-3 right-3 opacity-0 group-hover:opacity-100 transition-opacity duration-200 p-1.5 hover:bg-gray-100 rounded-lg",
32505
+ className: "absolute top-2 sm:top-3 right-2 sm:right-3 opacity-100 sm:opacity-0 group-hover:opacity-100 transition-opacity duration-200 p-1 sm:p-1.5 hover:bg-gray-100 rounded-lg",
32446
32506
  title: "Copy message",
32447
- children: copiedMessageId === message.id.toString() ? /* @__PURE__ */ jsx(Check, { className: "w-4 h-4 text-green-600" }) : /* @__PURE__ */ jsx(Copy, { className: "w-4 h-4 text-gray-500" })
32507
+ children: copiedMessageId === message.id.toString() ? /* @__PURE__ */ jsx(Check, { className: "w-3.5 h-3.5 sm:w-4 sm:h-4 text-green-600" }) : /* @__PURE__ */ jsx(Copy, { className: "w-3.5 h-3.5 sm:w-4 sm:h-4 text-gray-500" })
32448
32508
  }
32449
32509
  ),
32450
32510
  message.reasoning && /* @__PURE__ */ jsxs("details", { className: "mt-3 pt-3 border-t border-gray-200", children: [
@@ -32454,7 +32514,7 @@ var AIAgentView = () => {
32454
32514
  ]
32455
32515
  }
32456
32516
  ),
32457
- /* @__PURE__ */ jsxs("div", { className: `mt-2 flex items-center gap-2 text-xs text-gray-400 ${message.role === "user" ? "justify-end" : "justify-start"}`, children: [
32517
+ /* @__PURE__ */ jsxs("div", { className: `mt-1.5 sm:mt-2 flex items-center gap-2 text-xs text-gray-400 ${message.role === "user" ? "justify-end" : "justify-start"}`, children: [
32458
32518
  /* @__PURE__ */ jsx("span", { children: formatTime3(message.created_at) }),
32459
32519
  message.role === "assistant" && message.id !== -1 && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
32460
32520
  /* @__PURE__ */ jsx("div", { className: "w-1 h-1 bg-gray-300 rounded-full" }),
@@ -32489,15 +32549,15 @@ var AIAgentView = () => {
32489
32549
  )
32490
32550
  }
32491
32551
  ),
32492
- (displayMessages.length > 0 || isTransitioning) && /* @__PURE__ */ jsx("footer", { className: "fixed bottom-0 left-0 right-0 bg-gradient-to-t from-gray-50/50 to-transparent pointer-events-none", children: /* @__PURE__ */ jsx("div", { className: "max-w-4xl mx-auto p-4 sm:p-6 pointer-events-auto", children: /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, children: [
32552
+ (displayMessages.length > 0 || isTransitioning) && /* @__PURE__ */ jsx("footer", { className: `fixed bottom-0 left-0 right-0 bg-gradient-to-t from-gray-50/50 to-transparent pointer-events-none ${isSidebarOpen ? "lg:right-80" : "right-0"}`, children: /* @__PURE__ */ jsx("div", { className: "max-w-4xl mx-auto p-3 sm:p-4 md:p-6 pointer-events-auto", children: /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, children: [
32493
32553
  /* @__PURE__ */ jsx(
32494
32554
  "div",
32495
32555
  {
32496
- className: `relative bg-white rounded-3xl shadow-lg border border-gray-200 focus-within:border-gray-300 transition-all duration-200 ${isTransitioning ? "animate-slide-down" : ""}`,
32556
+ className: `relative bg-white rounded-2xl sm:rounded-3xl shadow-lg border border-gray-200 focus-within:border-gray-300 transition-all duration-200 ${isTransitioning ? "animate-slide-down" : ""}`,
32497
32557
  style: isTransitioning ? {
32498
32558
  animation: "slideDown 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards"
32499
32559
  } : {},
32500
- children: /* @__PURE__ */ jsx("div", { className: "flex items-end gap-2 p-3", children: /* @__PURE__ */ jsxs("div", { className: "flex-1 relative", children: [
32560
+ children: /* @__PURE__ */ jsx("div", { className: "flex items-end gap-2 p-3 sm:p-4", children: /* @__PURE__ */ jsxs("div", { className: "flex-1 relative", children: [
32501
32561
  /* @__PURE__ */ jsx(
32502
32562
  "textarea",
32503
32563
  {
@@ -32528,33 +32588,33 @@ var AIAgentView = () => {
32528
32588
  });
32529
32589
  },
32530
32590
  placeholder: "Ask me anything about your shop-floor",
32531
- className: "w-full resize-none bg-transparent px-2 py-2 pr-12 focus:outline-none placeholder-gray-500 text-gray-900 text-sm leading-relaxed",
32591
+ className: "w-full resize-none bg-transparent px-3 sm:px-4 py-3 sm:py-2 pr-12 sm:pr-14 focus:outline-none placeholder-gray-500 text-gray-900 text-sm sm:text-base leading-relaxed",
32532
32592
  rows: 1,
32533
- style: { minHeight: "24px", maxHeight: "120px" }
32593
+ style: { minHeight: "40px", maxHeight: "120px" }
32534
32594
  }
32535
32595
  ),
32536
- /* @__PURE__ */ jsx("div", { className: "absolute right-2 bottom-2 flex items-center gap-2", children: /* @__PURE__ */ jsx(
32596
+ /* @__PURE__ */ jsx("div", { className: "absolute right-2 sm:right-3 bottom-2 sm:bottom-2 flex items-center gap-2", children: /* @__PURE__ */ jsx(
32537
32597
  "button",
32538
32598
  {
32539
32599
  type: "submit",
32540
32600
  disabled: !inputValue.trim() || isCurrentThreadLoading,
32541
- className: "inline-flex items-center justify-center w-8 h-8 bg-gray-900 text-white rounded-full hover:bg-gray-800 transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed focus:outline-none focus:ring-2 focus:ring-gray-500/20",
32601
+ className: "inline-flex items-center justify-center w-8 h-8 sm:w-9 sm:h-9 bg-gray-900 text-white rounded-full hover:bg-gray-800 transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed focus:outline-none focus:ring-2 focus:ring-gray-500/20",
32542
32602
  children: /* @__PURE__ */ jsx(Send, { className: "w-4 h-4" })
32543
32603
  }
32544
32604
  ) })
32545
32605
  ] }) })
32546
32606
  }
32547
32607
  ),
32548
- /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center mt-2 text-xs text-gray-400", children: [
32549
- /* @__PURE__ */ jsx("span", { children: isCurrentThreadLoading ? "You can type your next message while Axel responds" : "Press Enter to send \u2022 Shift+Enter for new line" }),
32550
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 ml-4", children: [
32608
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col sm:flex-row items-center justify-center gap-2 sm:gap-4 mt-2 text-xs text-gray-400", children: [
32609
+ /* @__PURE__ */ jsx("span", { className: "text-center", children: isCurrentThreadLoading ? "You can type your next message while Axel responds" : "Press Enter to send \u2022 Shift+Enter for new line" }),
32610
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
32551
32611
  /* @__PURE__ */ jsx("div", { className: `w-1.5 h-1.5 rounded-full ${isCurrentThreadLoading ? "bg-orange-500" : "bg-green-500"}` }),
32552
32612
  /* @__PURE__ */ jsx("span", { children: isCurrentThreadLoading ? "Responding..." : "Connected" })
32553
32613
  ] })
32554
32614
  ] })
32555
32615
  ] }) }) })
32556
32616
  ] }),
32557
- /* @__PURE__ */ jsx("div", { className: `fixed right-0 top-0 z-20 h-screen transition-transform duration-300 ease-in-out ${isSidebarOpen ? "translate-x-0" : "translate-x-full"}`, children: /* @__PURE__ */ jsx("div", { className: "w-80 h-full bg-white border-l border-gray-200 shadow-lg", children: /* @__PURE__ */ jsx(
32617
+ /* @__PURE__ */ jsx("div", { className: `fixed right-0 top-0 z-20 h-screen transition-transform duration-300 ease-in-out ${isSidebarOpen ? "translate-x-0" : "translate-x-full"}`, children: /* @__PURE__ */ jsx("div", { className: "w-full sm:w-96 lg:w-80 h-full bg-white border-l border-gray-200 shadow-lg", children: /* @__PURE__ */ jsx(
32558
32618
  ThreadSidebar,
32559
32619
  {
32560
32620
  activeThreadId,
@@ -32936,8 +32996,8 @@ var HelpView = ({
32936
32996
  animate: { opacity: 1 },
32937
32997
  transition: { duration: 0.3 },
32938
32998
  children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
32939
- /* @__PURE__ */ jsx("div", { className: "bg-white px-8 py-6 shadow-sm border-b border-gray-200/80", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between relative", children: [
32940
- /* @__PURE__ */ jsx("div", { className: "absolute left-0", children: /* @__PURE__ */ jsx(
32999
+ /* @__PURE__ */ jsx("div", { className: "bg-white px-4 sm:px-6 md:px-8 py-4 sm:py-5 md:py-6 shadow-sm border-b border-gray-200/80", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3 sm:gap-4 relative", children: [
33000
+ /* @__PURE__ */ jsx("div", { className: "sm:absolute sm:left-0", children: /* @__PURE__ */ jsx(
32941
33001
  BackButtonMinimal,
32942
33002
  {
32943
33003
  onClick: handleBackClick,
@@ -32946,9 +33006,9 @@ var HelpView = ({
32946
33006
  "aria-label": "Navigate back to dashboard"
32947
33007
  }
32948
33008
  ) }),
32949
- /* @__PURE__ */ jsxs("div", { className: "flex-1 text-center mx-auto", children: [
32950
- /* @__PURE__ */ jsx("h1", { className: "text-3xl font-semibold text-gray-900", children: "Help & Support" }),
32951
- /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-gray-500", children: "Get immediate assistance from our engineering team. Submit a detailed support request below." })
33009
+ /* @__PURE__ */ jsxs("div", { className: "flex-1 text-center mx-auto mt-2 sm:mt-0", children: [
33010
+ /* @__PURE__ */ jsx("h1", { className: "text-lg sm:text-xl md:text-2xl lg:text-3xl font-semibold text-gray-900", children: "Help & Support" }),
33011
+ /* @__PURE__ */ jsx("p", { className: "mt-0.5 sm:mt-1 text-xs sm:text-sm text-gray-500 px-2 sm:px-0", children: "Get immediate assistance from our engineering team. Submit a detailed support request below." })
32952
33012
  ] })
32953
33013
  ] }) }),
32954
33014
  /* @__PURE__ */ jsxs("div", { className: "relative", children: [
@@ -33525,11 +33585,11 @@ var MetricCards = memo(({ lineInfo }) => {
33525
33585
  variants: containerVariants,
33526
33586
  initial: "initial",
33527
33587
  animate: "animate",
33528
- className: "grid grid-cols-1 md:grid-cols-3 gap-4 mb-2 md:h-[35vh] h-auto",
33588
+ className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 sm:gap-4 mb-2 md:h-[35vh] h-auto",
33529
33589
  children: [
33530
- /* @__PURE__ */ jsxs(motion.div, { variants: itemVariants, className: "bg-white rounded-xl shadow-sm p-4 overflow-hidden h-[280px] md:h-auto", children: [
33531
- /* @__PURE__ */ jsx("h2", { className: "text-base font-semibold text-gray-700 mb-2 text-center", children: "Line Output" }),
33532
- /* @__PURE__ */ jsx("div", { className: "h-[calc(100%-2.5rem)]", children: /* @__PURE__ */ jsx("div", { className: "w-full h-full", children: /* @__PURE__ */ jsx(
33590
+ /* @__PURE__ */ jsxs(motion.div, { variants: itemVariants, className: "bg-white rounded-xl shadow-sm p-3 sm:p-4 overflow-hidden h-[240px] sm:h-[280px] md:h-auto lg:col-span-1 sm:col-span-2 lg:col-span-1", children: [
33591
+ /* @__PURE__ */ jsx("h2", { className: "text-sm sm:text-base font-semibold text-gray-700 mb-2 text-center", children: "Line Output" }),
33592
+ /* @__PURE__ */ jsx("div", { className: "h-[calc(100%-2rem)] sm:h-[calc(100%-2.5rem)]", children: /* @__PURE__ */ jsx("div", { className: "w-full h-full", children: /* @__PURE__ */ jsx(
33533
33593
  OutputProgressChart,
33534
33594
  {
33535
33595
  currentOutput: lineInfo?.metrics.current_output || 0,
@@ -33537,19 +33597,19 @@ var MetricCards = memo(({ lineInfo }) => {
33537
33597
  }
33538
33598
  ) }) })
33539
33599
  ] }),
33540
- /* @__PURE__ */ jsxs(motion.div, { variants: itemVariants, className: "bg-white rounded-xl shadow-sm p-4 overflow-hidden h-[160px] md:h-auto", children: [
33541
- /* @__PURE__ */ jsx("h2", { className: "text-base font-semibold text-gray-700 text-center mb-2", children: "Underperforming Workspaces" }),
33542
- /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center h-[calc(100%-2.5rem)]", children: [
33543
- /* @__PURE__ */ jsx("span", { className: "text-6xl md:text-7xl font-bold text-red-600", children: lineInfo?.metrics.underperforming_workspaces }),
33544
- /* @__PURE__ */ jsxs("span", { className: "text-2xl md:text-3xl text-gray-500 ml-2", children: [
33600
+ /* @__PURE__ */ jsxs(motion.div, { variants: itemVariants, className: "bg-white rounded-xl shadow-sm p-3 sm:p-4 overflow-hidden h-[140px] sm:h-[160px] md:h-auto", children: [
33601
+ /* @__PURE__ */ jsx("h2", { className: "text-sm sm:text-base font-semibold text-gray-700 text-center mb-2", children: "Underperforming Workspaces" }),
33602
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center h-[calc(100%-2rem)] sm:h-[calc(100%-2.5rem)]", children: [
33603
+ /* @__PURE__ */ jsx("span", { className: "text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold text-red-600", children: lineInfo?.metrics.underperforming_workspaces }),
33604
+ /* @__PURE__ */ jsxs("span", { className: "text-xl sm:text-2xl md:text-2xl lg:text-3xl text-gray-500 ml-1 sm:ml-2", children: [
33545
33605
  "/ ",
33546
33606
  lineInfo?.metrics.total_workspaces
33547
33607
  ] })
33548
33608
  ] })
33549
33609
  ] }),
33550
- /* @__PURE__ */ jsxs(motion.div, { variants: itemVariants, className: "bg-white rounded-xl shadow-sm p-4 overflow-hidden h-[160px] md:h-auto", children: [
33551
- /* @__PURE__ */ jsx("h2", { className: "text-base font-semibold text-gray-700 text-center mb-2", children: "Average Efficiency" }),
33552
- /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-[calc(100%-2.5rem)]", children: /* @__PURE__ */ jsxs("span", { className: "text-6xl md:text-7xl font-bold text-gray-900", children: [
33610
+ /* @__PURE__ */ jsxs(motion.div, { variants: itemVariants, className: "bg-white rounded-xl shadow-sm p-3 sm:p-4 overflow-hidden h-[140px] sm:h-[160px] md:h-auto", children: [
33611
+ /* @__PURE__ */ jsx("h2", { className: "text-sm sm:text-base font-semibold text-gray-700 text-center mb-2", children: "Average Efficiency" }),
33612
+ /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-[calc(100%-2rem)] sm:h-[calc(100%-2.5rem)]", children: /* @__PURE__ */ jsxs("span", { className: `text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold ${(lineInfo?.metrics.avg_efficiency || 0) >= 90 ? "text-green-600" : (lineInfo?.metrics.avg_efficiency || 0) >= 70 ? "text-yellow-600" : "text-red-600"}`, children: [
33553
33613
  lineInfo?.metrics.avg_efficiency.toFixed(1),
33554
33614
  "%"
33555
33615
  ] }) })
@@ -33594,27 +33654,27 @@ var BottomSection = memo(({
33594
33654
  variants: containerVariants,
33595
33655
  initial: "initial",
33596
33656
  animate: "animate",
33597
- className: "grid grid-cols-1 md:grid-cols-5 gap-4 md:h-[calc(57vh-4rem)] h-auto md:mt-0 mt-4",
33657
+ className: "grid grid-cols-1 lg:grid-cols-5 gap-3 sm:gap-4 md:h-[calc(57vh-4rem)] h-auto md:mt-0 mt-4",
33598
33658
  children: [
33599
- /* @__PURE__ */ jsxs(motion.div, { variants: itemVariants, className: "md:col-span-2 bg-white rounded-xl shadow-sm p-4 flex flex-col overflow-hidden h-[400px] md:h-auto", children: [
33659
+ /* @__PURE__ */ jsxs(motion.div, { variants: itemVariants, className: "lg:col-span-2 bg-white rounded-xl shadow-sm p-3 sm:p-4 flex flex-col overflow-hidden h-[350px] sm:h-[400px] md:h-auto", children: [
33600
33660
  /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center mb-2", children: [
33601
- /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold text-gray-700 text-center flex-1", children: "Poorest Performing Workspaces" }),
33661
+ /* @__PURE__ */ jsx("h2", { className: "text-base sm:text-lg font-semibold text-gray-700 text-center flex-1", children: "Poorest Performing Workspaces" }),
33602
33662
  /* @__PURE__ */ jsx(
33603
33663
  "div",
33604
33664
  {
33605
33665
  className: "p-1.5 hover:bg-gray-100 rounded-lg transition-colors cursor-pointer",
33606
33666
  onClick: () => handleNavigate && handleNavigate(`/leaderboard`),
33607
- children: /* @__PURE__ */ jsx(ArrowRightIcon, { className: "w-5 h-5 text-gray-500" })
33667
+ children: /* @__PURE__ */ jsx(ArrowRightIcon, { className: "w-4 h-4 sm:w-5 sm:h-5 text-gray-500" })
33608
33668
  }
33609
33669
  )
33610
33670
  ] }),
33611
- /* @__PURE__ */ jsxs("div", { className: "divide-y overflow-auto flex-1 pr-2", children: [
33671
+ /* @__PURE__ */ jsxs("div", { className: "divide-y overflow-auto flex-1 pr-1 sm:pr-2", children: [
33612
33672
  /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between pb-2", children: [
33613
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 md:gap-6", children: [
33614
- /* @__PURE__ */ jsx("div", { className: "font-medium text-gray-500 min-w-[100px] md:min-w-[120px] text-sm md:text-base", children: "Workspace" }),
33673
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 sm:gap-3 md:gap-6", children: [
33674
+ /* @__PURE__ */ jsx("div", { className: "font-medium text-gray-500 min-w-[80px] sm:min-w-[100px] md:min-w-[120px] text-xs sm:text-sm md:text-base", children: "Workspace" }),
33615
33675
  /* @__PURE__ */ jsx("div", { className: "text-xs md:text-sm font-medium text-gray-500", children: "Current/Ideal" })
33616
33676
  ] }),
33617
- /* @__PURE__ */ jsx("div", { className: "text-xs md:text-sm font-medium text-gray-500 pr-2", children: "Efficiency" })
33677
+ /* @__PURE__ */ jsx("div", { className: "text-xs md:text-sm font-medium text-gray-500 pr-1 sm:pr-2", children: "Efficiency" })
33618
33678
  ] }),
33619
33679
  lineInfo.metrics.poorest_performing_workspaces && lineInfo.metrics.poorest_performing_workspaces.length > 0 ? lineInfo.metrics.poorest_performing_workspaces.map((ws, index) => {
33620
33680
  const wsMetrics = workspaceData.find((w) => w.workspace_name === ws.workspace_name);
@@ -33636,10 +33696,10 @@ var BottomSection = memo(({
33636
33696
  clickHandler();
33637
33697
  handleNavigate && handleNavigate(fullUrl);
33638
33698
  },
33639
- className: "block py-3 hover:bg-gray-50 transition-colors rounded-lg cursor-pointer",
33699
+ className: "block py-2 sm:py-3 hover:bg-gray-50 transition-colors rounded-lg cursor-pointer",
33640
33700
  children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
33641
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 md:gap-6", children: [
33642
- /* @__PURE__ */ jsx("div", { className: "min-w-[100px] md:min-w-[120px]", children: /* @__PURE__ */ jsx("div", { className: "font-medium text-gray-900 text-sm md:text-base", children: displayName }) }),
33701
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 sm:gap-3 md:gap-6", children: [
33702
+ /* @__PURE__ */ jsx("div", { className: "min-w-[80px] sm:min-w-[100px] md:min-w-[120px]", children: /* @__PURE__ */ jsx("div", { className: "font-medium text-gray-900 text-xs sm:text-sm md:text-base truncate", children: displayName }) }),
33643
33703
  /* @__PURE__ */ jsxs("div", { className: "text-xs md:text-sm font-medium text-gray-900", children: [
33644
33704
  ws.action_count || 0,
33645
33705
  " / ",
@@ -33670,10 +33730,10 @@ var BottomSection = memo(({
33670
33730
  clickHandler();
33671
33731
  handleNavigate && handleNavigate(fullUrl);
33672
33732
  },
33673
- className: "block py-3 hover:bg-gray-50 transition-colors rounded-lg cursor-pointer",
33733
+ className: "block py-2 sm:py-3 hover:bg-gray-50 transition-colors rounded-lg cursor-pointer",
33674
33734
  children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
33675
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 md:gap-6", children: [
33676
- /* @__PURE__ */ jsx("div", { className: "min-w-[100px] md:min-w-[120px]", children: /* @__PURE__ */ jsx("div", { className: "font-medium text-gray-900 text-sm md:text-base", children: displayName }) }),
33735
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 sm:gap-3 md:gap-6", children: [
33736
+ /* @__PURE__ */ jsx("div", { className: "min-w-[80px] sm:min-w-[100px] md:min-w-[120px]", children: /* @__PURE__ */ jsx("div", { className: "font-medium text-gray-900 text-xs sm:text-sm md:text-base truncate", children: displayName }) }),
33677
33737
  /* @__PURE__ */ jsxs("div", { className: "text-xs md:text-sm font-medium text-gray-900", children: [
33678
33738
  ws.action_count || 0,
33679
33739
  " / ",
@@ -33692,9 +33752,9 @@ var BottomSection = memo(({
33692
33752
  )
33693
33753
  ] })
33694
33754
  ] }),
33695
- /* @__PURE__ */ jsxs(motion.div, { variants: itemVariants, className: "md:col-span-3 bg-white rounded-xl shadow-sm p-4 flex flex-col overflow-hidden h-[400px] md:h-auto", children: [
33696
- /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold text-gray-700 mb-2 text-center", children: "Hourly Line Output" }),
33697
- /* @__PURE__ */ jsx("div", { className: "flex-1 min-h-[300px] md:min-h-[400px] pb-8 md:pb-16", children: lineInfo && /* @__PURE__ */ jsx(
33755
+ /* @__PURE__ */ jsxs(motion.div, { variants: itemVariants, className: "lg:col-span-3 bg-white rounded-xl shadow-sm p-3 sm:p-4 flex flex-col overflow-hidden h-[350px] sm:h-[400px] md:h-auto", children: [
33756
+ /* @__PURE__ */ jsx("h2", { className: "text-base sm:text-lg font-semibold text-gray-700 mb-2 text-center", children: "Hourly Line Output" }),
33757
+ /* @__PURE__ */ jsx("div", { className: "flex-1 min-h-[280px] sm:min-h-[300px] md:min-h-[400px] pb-6 sm:pb-8 md:pb-16", children: lineInfo && /* @__PURE__ */ jsx(
33698
33758
  HourlyOutputChart2,
33699
33759
  {
33700
33760
  data: hourlyOutputData,
@@ -34065,9 +34125,9 @@ var KPIDetailView = ({
34065
34125
  return /* @__PURE__ */ jsx(LoadingPage, { message: "Processing line data..." });
34066
34126
  }
34067
34127
  return /* @__PURE__ */ jsxs("div", { className: "min-h-screen bg-gray-50 flex flex-col", children: [
34068
- /* @__PURE__ */ jsx("header", { className: "sticky top-0 z-10 bg-white border-b flex-shrink-0", children: /* @__PURE__ */ jsxs("div", { className: "px-4 py-3", children: [
34128
+ /* @__PURE__ */ jsx("header", { className: "sticky top-0 z-10 bg-white border-b flex-shrink-0", children: /* @__PURE__ */ jsxs("div", { className: "px-3 sm:px-4 md:px-6 py-2 sm:py-3", children: [
34069
34129
  /* @__PURE__ */ jsxs("div", { className: "flex items-center relative", children: [
34070
- /* @__PURE__ */ jsx("div", { className: "absolute left-0", children: /* @__PURE__ */ jsx(
34130
+ /* @__PURE__ */ jsx("div", { className: "sm:absolute sm:left-0", children: /* @__PURE__ */ jsx(
34071
34131
  BackButtonMinimal,
34072
34132
  {
34073
34133
  onClick: handleBackClick,
@@ -34076,37 +34136,37 @@ var KPIDetailView = ({
34076
34136
  "aria-label": "Navigate back to previous page"
34077
34137
  }
34078
34138
  ) }),
34079
- /* @__PURE__ */ jsx("div", { className: "flex-1 flex justify-center", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
34080
- /* @__PURE__ */ jsx("h1", { className: "text-3xl font-semibold text-gray-900", children: lineInfo?.line_name || "Line" }),
34081
- /* @__PURE__ */ jsx("div", { className: "h-2 w-2 rounded-full bg-green-500 animate-pulse ring-2 ring-green-500/30 ring-offset-1" })
34139
+ /* @__PURE__ */ jsx("div", { className: "flex-1 flex justify-center mt-2 sm:mt-0", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 sm:gap-3", children: [
34140
+ /* @__PURE__ */ jsx("h1", { className: "text-lg sm:text-xl md:text-2xl lg:text-3xl font-semibold text-gray-900 text-center truncate", children: lineInfo?.line_name || "Line" }),
34141
+ /* @__PURE__ */ jsx("div", { className: "h-1.5 w-1.5 sm:h-2 sm:w-2 rounded-full bg-green-500 animate-pulse ring-1 sm:ring-2 ring-green-500/30 ring-offset-1 flex-shrink-0" })
34082
34142
  ] }) })
34083
34143
  ] }),
34084
- (activeTab !== "monthly_history" || urlDate || urlShift) && metrics2 && /* @__PURE__ */ jsx("div", { className: "mt-3 bg-blue-50 px-3 py-2 rounded-lg", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-4", children: [
34144
+ (activeTab !== "monthly_history" || urlDate || urlShift) && metrics2 && /* @__PURE__ */ jsx("div", { className: "mt-2 sm:mt-3 bg-blue-50 px-2 sm:px-3 py-1.5 sm:py-2 rounded-lg", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-center gap-2 sm:gap-3 md:gap-4", children: [
34085
34145
  !urlDate && !urlShift && /* @__PURE__ */ jsxs(Fragment, { children: [
34086
- /* @__PURE__ */ jsx("div", { className: "text-lg font-medium text-blue-600", children: /* @__PURE__ */ jsx(ISTTimer_default, {}) }),
34087
- /* @__PURE__ */ jsx("div", { className: "w-px h-4 bg-blue-300" })
34146
+ /* @__PURE__ */ jsx("div", { className: "text-sm sm:text-base md:text-lg font-medium text-blue-600", children: /* @__PURE__ */ jsx(ISTTimer_default, {}) }),
34147
+ /* @__PURE__ */ jsx("div", { className: "hidden sm:block w-px h-4 bg-blue-300" })
34088
34148
  ] }),
34089
- /* @__PURE__ */ jsx("span", { className: "text-base font-medium text-blue-600", children: metrics2 && formatLocalDate(new Date(metrics2.date)) }),
34090
- /* @__PURE__ */ jsx("div", { className: "w-px h-4 bg-blue-300" }),
34149
+ /* @__PURE__ */ jsx("span", { className: "text-xs sm:text-sm md:text-base font-medium text-blue-600", children: metrics2 && formatLocalDate(new Date(metrics2.date)) }),
34150
+ /* @__PURE__ */ jsx("div", { className: "hidden sm:block w-px h-4 bg-blue-300" }),
34091
34151
  urlDate && metrics2.date && /* @__PURE__ */ jsxs(Fragment, { children: [
34092
34152
  /* @__PURE__ */ jsx("span", { className: "px-2 py-1 text-xs font-medium bg-blue-200 text-blue-800 rounded-md", children: getDaysDifference2(metrics2.date) }),
34093
- /* @__PURE__ */ jsx("div", { className: "w-px h-4 bg-blue-300" })
34153
+ /* @__PURE__ */ jsx("div", { className: "hidden sm:block w-px h-4 bg-blue-300" })
34094
34154
  ] }),
34095
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
34155
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 sm:gap-2", children: [
34096
34156
  /* @__PURE__ */ jsx("div", { className: "text-blue-600", children: getShiftIcon(metrics2.shift_id ?? 0) }),
34097
- /* @__PURE__ */ jsxs("span", { className: "text-base font-medium text-blue-600", children: [
34157
+ /* @__PURE__ */ jsxs("span", { className: "text-xs sm:text-sm md:text-base font-medium text-blue-600", children: [
34098
34158
  getShiftName(metrics2.shift_id ?? 0),
34099
34159
  " Shift"
34100
34160
  ] })
34101
34161
  ] })
34102
34162
  ] }) }),
34103
- /* @__PURE__ */ jsxs("div", { className: "mt-2 flex items-center justify-between", children: [
34104
- !urlDate && !urlShift && /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
34163
+ /* @__PURE__ */ jsxs("div", { className: "mt-2 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-2 sm:gap-0", children: [
34164
+ !urlDate && !urlShift && /* @__PURE__ */ jsxs("div", { className: "flex gap-1 sm:gap-2 w-full sm:w-auto", children: [
34105
34165
  /* @__PURE__ */ jsx(
34106
34166
  "button",
34107
34167
  {
34108
34168
  onClick: handleOverviewClick,
34109
- className: `px-3 py-1.5 font-medium rounded-lg transition-colors whitespace-nowrap ${activeTab === "overview" ? "bg-blue-50 text-blue-600" : "text-gray-600 hover:bg-gray-50"}`,
34169
+ className: `flex-1 sm:flex-none px-2 sm:px-3 py-1.5 text-xs sm:text-sm font-medium rounded-lg transition-colors whitespace-nowrap ${activeTab === "overview" ? "bg-blue-50 text-blue-600" : "text-gray-600 hover:bg-gray-50"}`,
34110
34170
  children: "Efficiency Overview"
34111
34171
  }
34112
34172
  ),
@@ -34114,12 +34174,12 @@ var KPIDetailView = ({
34114
34174
  "button",
34115
34175
  {
34116
34176
  onClick: handleMonthlyHistoryClick,
34117
- className: `px-3 py-1.5 font-medium rounded-lg transition-colors whitespace-nowrap ${activeTab === "monthly_history" ? "bg-blue-50 text-blue-600" : "text-gray-600 hover:bg-gray-50"}`,
34177
+ className: `flex-1 sm:flex-none px-2 sm:px-3 py-1.5 text-xs sm:text-sm font-medium rounded-lg transition-colors whitespace-nowrap ${activeTab === "monthly_history" ? "bg-blue-50 text-blue-600" : "text-gray-600 hover:bg-gray-50"}`,
34118
34178
  children: "Monthly History"
34119
34179
  }
34120
34180
  )
34121
34181
  ] }),
34122
- /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-3 ml-auto", children: [
34182
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2 sm:space-x-3 w-full sm:w-auto justify-end sm:ml-auto", children: [
34123
34183
  lineInfo && activeTab === "overview" && /* @__PURE__ */ jsx(LinePdfGenerator, { lineInfo, workspaceData: workspaces || [] }),
34124
34184
  activeTab === "monthly_history" && /* @__PURE__ */ jsx(
34125
34185
  LineMonthlyPdfGenerator,
@@ -34284,11 +34344,11 @@ var LineCard = ({ line, onClick }) => {
34284
34344
  animate: { opacity: 1, y: 0 },
34285
34345
  transition: { duration: 0.3 },
34286
34346
  onClick,
34287
- className: "relative bg-white border border-gray-200/80 shadow-sm hover:shadow-lg \n rounded-xl p-6 transition-all duration-200 cursor-pointer \n hover:scale-[1.01] active:scale-[0.99] group",
34347
+ className: "relative bg-white border border-gray-200/80 shadow-sm hover:shadow-lg \n rounded-xl p-4 sm:p-5 md:p-6 transition-all duration-200 cursor-pointer \n hover:scale-[1.01] active:scale-[0.99] group",
34288
34348
  children: [
34289
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 mb-6", children: [
34290
- /* @__PURE__ */ jsx("h3", { className: "text-xl font-semibold text-gray-900", children: line.line_name }),
34291
- kpis && isOnTrack !== null && /* @__PURE__ */ jsxs("div", { className: `flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-medium ${isOnTrack ? "bg-emerald-100 text-emerald-700 border border-emerald-200" : "bg-red-100 text-red-700 border border-red-200"}`, children: [
34349
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-3 mb-4 sm:mb-5 md:mb-6", children: [
34350
+ /* @__PURE__ */ jsx("h3", { className: "text-lg sm:text-xl font-semibold text-gray-900 truncate", children: line.line_name }),
34351
+ kpis && isOnTrack !== null && /* @__PURE__ */ jsxs("div", { className: `flex items-center gap-1.5 px-2.5 sm:px-3 py-1 sm:py-1.5 rounded-full text-xs font-medium self-start sm:self-auto ${isOnTrack ? "bg-emerald-100 text-emerald-700 border border-emerald-200" : "bg-red-100 text-red-700 border border-red-200"}`, children: [
34292
34352
  /* @__PURE__ */ jsx("div", { className: `w-2 h-2 rounded-full ${isOnTrack ? "bg-emerald-500" : "bg-red-500"} animate-pulse` }),
34293
34353
  /* @__PURE__ */ jsx("span", { children: isOnTrack ? "On Track" : "Behind" })
34294
34354
  ] })
@@ -34308,15 +34368,15 @@ var LineCard = ({ line, onClick }) => {
34308
34368
  ] })
34309
34369
  ] }),
34310
34370
  error && !kpis && /* @__PURE__ */ jsx("div", { className: "text-center py-8", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500", children: "Unable to load metrics" }) }),
34311
- kpis && /* @__PURE__ */ jsxs("div", { className: "space-y-5", children: [
34371
+ kpis && /* @__PURE__ */ jsxs("div", { className: "space-y-4 sm:space-y-5", children: [
34312
34372
  /* @__PURE__ */ jsxs("div", { children: [
34313
- /* @__PURE__ */ jsx("div", { className: "text-xs font-medium text-gray-500 uppercase tracking-wider mb-2", children: "Efficiency" }),
34373
+ /* @__PURE__ */ jsx("div", { className: "text-xs font-medium text-gray-500 uppercase tracking-wider mb-1.5 sm:mb-2", children: "Efficiency" }),
34314
34374
  /* @__PURE__ */ jsxs("div", { className: "flex items-baseline justify-between", children: [
34315
- /* @__PURE__ */ jsxs("span", { className: "text-3xl font-semibold text-gray-900", children: [
34375
+ /* @__PURE__ */ jsxs("span", { className: "text-2xl sm:text-3xl font-semibold text-gray-900", children: [
34316
34376
  kpis.efficiency.value.toFixed(1),
34317
34377
  "%"
34318
34378
  ] }),
34319
- kpis.efficiency.change !== 0 && /* @__PURE__ */ jsxs("span", { className: `text-sm font-medium ${kpis.efficiency.change > 0 ? "text-emerald-600" : "text-red-600"}`, children: [
34379
+ kpis.efficiency.change !== 0 && /* @__PURE__ */ jsxs("span", { className: `text-xs sm:text-sm font-medium ${kpis.efficiency.change > 0 ? "text-emerald-600" : "text-red-600"}`, children: [
34320
34380
  kpis.efficiency.change > 0 ? "+" : "",
34321
34381
  kpis.efficiency.change.toFixed(1),
34322
34382
  "%"
@@ -34324,19 +34384,19 @@ var LineCard = ({ line, onClick }) => {
34324
34384
  ] })
34325
34385
  ] }),
34326
34386
  /* @__PURE__ */ jsxs("div", { children: [
34327
- /* @__PURE__ */ jsx("div", { className: "text-xs font-medium text-gray-500 uppercase tracking-wider mb-2", children: "Output Progress" }),
34328
- /* @__PURE__ */ jsxs("div", { className: "flex items-baseline justify-between mb-3", children: [
34329
- /* @__PURE__ */ jsx("span", { className: "text-2xl font-semibold text-gray-900", children: kpis.outputProgress.current }),
34330
- /* @__PURE__ */ jsxs("span", { className: "text-sm text-gray-500 font-medium", children: [
34387
+ /* @__PURE__ */ jsx("div", { className: "text-xs font-medium text-gray-500 uppercase tracking-wider mb-1.5 sm:mb-2", children: "Output Progress" }),
34388
+ /* @__PURE__ */ jsxs("div", { className: "flex items-baseline justify-between mb-2 sm:mb-3", children: [
34389
+ /* @__PURE__ */ jsx("span", { className: "text-xl sm:text-2xl font-semibold text-gray-900", children: kpis.outputProgress.current }),
34390
+ /* @__PURE__ */ jsxs("span", { className: "text-xs sm:text-sm text-gray-500 font-medium", children: [
34331
34391
  "/ ",
34332
34392
  kpis.outputProgress.target,
34333
34393
  " units"
34334
34394
  ] })
34335
34395
  ] }),
34336
- /* @__PURE__ */ jsx("div", { className: "w-full bg-gray-200 rounded-full h-2.5", children: /* @__PURE__ */ jsx(
34396
+ /* @__PURE__ */ jsx("div", { className: "w-full bg-gray-200 rounded-full h-2 sm:h-2.5", children: /* @__PURE__ */ jsx(
34337
34397
  "div",
34338
34398
  {
34339
- className: "bg-blue-600 h-2.5 rounded-full transition-all duration-500 ease-out",
34399
+ className: "bg-blue-600 h-2 sm:h-2.5 rounded-full transition-all duration-500 ease-out",
34340
34400
  style: {
34341
34401
  width: `${Math.min(
34342
34402
  kpis.outputProgress.current / kpis.outputProgress.target * 100,
@@ -34347,17 +34407,17 @@ var LineCard = ({ line, onClick }) => {
34347
34407
  ) })
34348
34408
  ] }),
34349
34409
  /* @__PURE__ */ jsxs("div", { children: [
34350
- /* @__PURE__ */ jsx("div", { className: "text-xs font-medium text-gray-500 uppercase tracking-wider mb-2", children: "Underperforming Workspaces" }),
34410
+ /* @__PURE__ */ jsx("div", { className: "text-xs font-medium text-gray-500 uppercase tracking-wider mb-1.5 sm:mb-2", children: "Underperforming Workspaces" }),
34351
34411
  /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-2", children: [
34352
- /* @__PURE__ */ jsx("span", { className: `text-2xl font-semibold ${kpis.underperformingWorkers.current === 0 ? "text-emerald-600" : kpis.underperformingWorkers.current <= 2 ? "text-yellow-600" : "text-red-600"}`, children: kpis.underperformingWorkers.current }),
34353
- /* @__PURE__ */ jsxs("span", { className: "text-sm text-gray-500 font-medium", children: [
34412
+ /* @__PURE__ */ jsx("span", { className: `text-xl sm:text-2xl font-semibold ${kpis.underperformingWorkers.current === 0 ? "text-emerald-600" : kpis.underperformingWorkers.current <= 2 ? "text-yellow-600" : "text-red-600"}`, children: kpis.underperformingWorkers.current }),
34413
+ /* @__PURE__ */ jsxs("span", { className: "text-xs sm:text-sm text-gray-500 font-medium", children: [
34354
34414
  "of ",
34355
34415
  kpis.underperformingWorkers.total
34356
34416
  ] })
34357
34417
  ] })
34358
34418
  ] })
34359
34419
  ] }),
34360
- /* @__PURE__ */ jsx("div", { className: "absolute bottom-4 right-4", children: /* @__PURE__ */ jsx("div", { className: "p-2.5 rounded-full bg-gray-50 group-hover:bg-blue-50 transition-colors shadow-sm", children: /* @__PURE__ */ jsx(ArrowRightIcon, { className: "w-5 h-5 text-gray-400 group-hover:text-blue-600 transition-colors" }) }) })
34420
+ /* @__PURE__ */ jsx("div", { className: "absolute bottom-3 right-3 sm:bottom-4 sm:right-4", children: /* @__PURE__ */ jsx("div", { className: "p-2 sm:p-2.5 rounded-full bg-gray-50 group-hover:bg-blue-50 transition-colors shadow-sm", children: /* @__PURE__ */ jsx(ArrowRightIcon, { className: "w-4 h-4 sm:w-5 sm:h-5 text-gray-400 group-hover:text-blue-600 transition-colors" }) }) })
34361
34421
  ]
34362
34422
  }
34363
34423
  );
@@ -34436,8 +34496,8 @@ var KPIsOverviewView = ({
34436
34496
  }
34437
34497
  if (error) {
34438
34498
  return /* @__PURE__ */ jsxs("div", { className: "min-h-screen bg-gray-50 flex flex-col", children: [
34439
- /* @__PURE__ */ jsx("header", { className: "sticky top-0 z-10 bg-white border-b flex-shrink-0", children: /* @__PURE__ */ jsx("div", { className: "px-4 py-3", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center relative", children: [
34440
- /* @__PURE__ */ jsx("div", { className: "absolute left-0", children: /* @__PURE__ */ jsx(
34499
+ /* @__PURE__ */ jsx("header", { className: "sticky top-0 z-10 bg-white border-b flex-shrink-0", children: /* @__PURE__ */ jsx("div", { className: "px-3 sm:px-4 md:px-6 py-2 sm:py-3", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center relative", children: [
34500
+ /* @__PURE__ */ jsx("div", { className: "sm:absolute sm:left-0", children: /* @__PURE__ */ jsx(
34441
34501
  BackButtonMinimal,
34442
34502
  {
34443
34503
  onClick: handleBackClick,
@@ -34446,9 +34506,9 @@ var KPIsOverviewView = ({
34446
34506
  "aria-label": "Navigate back to previous page"
34447
34507
  }
34448
34508
  ) }),
34449
- /* @__PURE__ */ jsx("div", { className: "flex-1 flex justify-center", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
34450
- /* @__PURE__ */ jsx("h1", { className: "text-3xl font-semibold text-gray-900", children: "Shop-floor overview" }),
34451
- /* @__PURE__ */ jsx("div", { className: "h-2 w-2 rounded-full bg-green-500 animate-pulse ring-2 ring-green-500/30 ring-offset-1" })
34509
+ /* @__PURE__ */ jsx("div", { className: "flex-1 flex justify-center mt-2 sm:mt-0", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 sm:gap-3", children: [
34510
+ /* @__PURE__ */ jsx("h1", { className: "text-lg sm:text-xl md:text-2xl lg:text-3xl font-semibold text-gray-900 text-center", children: "Shop-floor overview" }),
34511
+ /* @__PURE__ */ jsx("div", { className: "h-1.5 w-1.5 sm:h-2 sm:w-2 rounded-full bg-green-500 animate-pulse ring-1 sm:ring-2 ring-green-500/30 ring-offset-1 flex-shrink-0" })
34452
34512
  ] }) })
34453
34513
  ] }) }) }),
34454
34514
  /* @__PURE__ */ jsx("div", { className: "flex-1 flex items-center justify-center", children: /* @__PURE__ */ jsx("div", { className: "text-center", children: /* @__PURE__ */ jsx("p", { className: "text-gray-500", children: error }) }) })
@@ -34456,8 +34516,8 @@ var KPIsOverviewView = ({
34456
34516
  }
34457
34517
  if (lines.length === 0) {
34458
34518
  return /* @__PURE__ */ jsxs("div", { className: "min-h-screen bg-gray-50 flex flex-col", children: [
34459
- /* @__PURE__ */ jsx("header", { className: "sticky top-0 z-10 bg-white border-b flex-shrink-0", children: /* @__PURE__ */ jsx("div", { className: "px-4 py-3", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center relative", children: [
34460
- /* @__PURE__ */ jsx("div", { className: "absolute left-0", children: /* @__PURE__ */ jsx(
34519
+ /* @__PURE__ */ jsx("header", { className: "sticky top-0 z-10 bg-white border-b flex-shrink-0", children: /* @__PURE__ */ jsx("div", { className: "px-3 sm:px-4 md:px-6 py-2 sm:py-3", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center relative", children: [
34520
+ /* @__PURE__ */ jsx("div", { className: "sm:absolute sm:left-0", children: /* @__PURE__ */ jsx(
34461
34521
  BackButtonMinimal,
34462
34522
  {
34463
34523
  onClick: handleBackClick,
@@ -34466,9 +34526,9 @@ var KPIsOverviewView = ({
34466
34526
  "aria-label": "Navigate back to previous page"
34467
34527
  }
34468
34528
  ) }),
34469
- /* @__PURE__ */ jsx("div", { className: "flex-1 flex justify-center", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
34470
- /* @__PURE__ */ jsx("h1", { className: "text-3xl font-semibold text-gray-900", children: "Shop-floor overview" }),
34471
- /* @__PURE__ */ jsx("div", { className: "h-2 w-2 rounded-full bg-green-500 animate-pulse ring-2 ring-green-500/30 ring-offset-1" })
34529
+ /* @__PURE__ */ jsx("div", { className: "flex-1 flex justify-center mt-2 sm:mt-0", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 sm:gap-3", children: [
34530
+ /* @__PURE__ */ jsx("h1", { className: "text-lg sm:text-xl md:text-2xl lg:text-3xl font-semibold text-gray-900 text-center", children: "Shop-floor overview" }),
34531
+ /* @__PURE__ */ jsx("div", { className: "h-1.5 w-1.5 sm:h-2 sm:w-2 rounded-full bg-green-500 animate-pulse ring-1 sm:ring-2 ring-green-500/30 ring-offset-1 flex-shrink-0" })
34472
34532
  ] }) })
34473
34533
  ] }) }) }),
34474
34534
  /* @__PURE__ */ jsx("div", { className: "flex-1 flex items-center justify-center", children: /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
@@ -34478,9 +34538,9 @@ var KPIsOverviewView = ({
34478
34538
  ] });
34479
34539
  }
34480
34540
  return /* @__PURE__ */ jsxs("div", { className: "min-h-screen bg-gray-50 flex flex-col", children: [
34481
- /* @__PURE__ */ jsx("header", { className: "sticky top-0 z-10 bg-white border-b flex-shrink-0", children: /* @__PURE__ */ jsxs("div", { className: "px-4 py-3", children: [
34541
+ /* @__PURE__ */ jsx("header", { className: "sticky top-0 z-10 bg-white border-b flex-shrink-0", children: /* @__PURE__ */ jsxs("div", { className: "px-3 sm:px-4 md:px-6 py-2 sm:py-3", children: [
34482
34542
  /* @__PURE__ */ jsxs("div", { className: "flex items-center relative", children: [
34483
- /* @__PURE__ */ jsx("div", { className: "absolute left-0", children: /* @__PURE__ */ jsx(
34543
+ /* @__PURE__ */ jsx("div", { className: "sm:absolute sm:left-0", children: /* @__PURE__ */ jsx(
34484
34544
  BackButtonMinimal,
34485
34545
  {
34486
34546
  onClick: handleBackClick,
@@ -34489,27 +34549,27 @@ var KPIsOverviewView = ({
34489
34549
  "aria-label": "Navigate back to previous page"
34490
34550
  }
34491
34551
  ) }),
34492
- /* @__PURE__ */ jsx("div", { className: "flex-1 flex justify-center", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
34493
- /* @__PURE__ */ jsx("h1", { className: "text-3xl font-semibold text-gray-900", children: "Shop-floor overview" }),
34494
- /* @__PURE__ */ jsx("div", { className: "h-2 w-2 rounded-full bg-green-500 animate-pulse ring-2 ring-green-500/30 ring-offset-1" })
34552
+ /* @__PURE__ */ jsx("div", { className: "flex-1 flex justify-center mt-2 sm:mt-0", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 sm:gap-3", children: [
34553
+ /* @__PURE__ */ jsx("h1", { className: "text-lg sm:text-xl md:text-2xl lg:text-3xl font-semibold text-gray-900 text-center", children: "Shop-floor overview" }),
34554
+ /* @__PURE__ */ jsx("div", { className: "h-1.5 w-1.5 sm:h-2 sm:w-2 rounded-full bg-green-500 animate-pulse ring-1 sm:ring-2 ring-green-500/30 ring-offset-1 flex-shrink-0" })
34495
34555
  ] }) })
34496
34556
  ] }),
34497
- /* @__PURE__ */ jsx("div", { className: "mt-3 bg-blue-50 px-3 py-2 rounded-lg", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-4", children: [
34498
- /* @__PURE__ */ jsx("div", { className: "text-lg font-medium text-blue-600", children: /* @__PURE__ */ jsx(ISTTimer_default, {}) }),
34499
- /* @__PURE__ */ jsx("div", { className: "w-px h-4 bg-blue-300" }),
34500
- /* @__PURE__ */ jsx("span", { className: "text-base font-medium text-blue-600", children: formatLocalDate2(/* @__PURE__ */ new Date()) }),
34501
- /* @__PURE__ */ jsx("div", { className: "w-px h-4 bg-blue-300" }),
34502
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
34557
+ /* @__PURE__ */ jsx("div", { className: "mt-2 sm:mt-3 bg-blue-50 px-2 sm:px-3 py-1.5 sm:py-2 rounded-lg", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-center gap-2 sm:gap-3 md:gap-4", children: [
34558
+ /* @__PURE__ */ jsx("div", { className: "text-sm sm:text-base md:text-lg font-medium text-blue-600", children: /* @__PURE__ */ jsx(ISTTimer_default, {}) }),
34559
+ /* @__PURE__ */ jsx("div", { className: "hidden sm:block w-px h-4 bg-blue-300" }),
34560
+ /* @__PURE__ */ jsx("span", { className: "text-xs sm:text-sm md:text-base font-medium text-blue-600", children: formatLocalDate2(/* @__PURE__ */ new Date()) }),
34561
+ /* @__PURE__ */ jsx("div", { className: "hidden sm:block w-px h-4 bg-blue-300" }),
34562
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 sm:gap-2", children: [
34503
34563
  /* @__PURE__ */ jsx("div", { className: "text-blue-600", children: getShiftIcon(currentShiftDetails.shiftId) }),
34504
- /* @__PURE__ */ jsxs("span", { className: "text-base font-medium text-blue-600", children: [
34564
+ /* @__PURE__ */ jsxs("span", { className: "text-xs sm:text-sm md:text-base font-medium text-blue-600", children: [
34505
34565
  shiftName,
34506
34566
  " Shift"
34507
34567
  ] })
34508
34568
  ] })
34509
34569
  ] }) }),
34510
- /* @__PURE__ */ jsx("p", { className: "text-gray-600 text-center mt-3", children: "Click on any line to view detailed performance metrics" })
34570
+ /* @__PURE__ */ jsx("p", { className: "text-xs sm:text-sm text-gray-600 text-center mt-2 sm:mt-3 px-2 sm:px-0", children: "Click on any line to view detailed performance metrics" })
34511
34571
  ] }) }),
34512
- /* @__PURE__ */ jsx("main", { className: "flex-1 p-6 overflow-y-auto", children: /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6", children: lines.map((line) => /* @__PURE__ */ jsx(
34572
+ /* @__PURE__ */ jsx("main", { className: "flex-1 p-3 sm:p-4 md:p-6 overflow-y-auto", children: /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3 sm:gap-4 md:gap-6", children: lines.map((line) => /* @__PURE__ */ jsx(
34513
34573
  LineCard,
34514
34574
  {
34515
34575
  line,
@@ -34529,14 +34589,14 @@ var HeaderRibbon = memo(({
34529
34589
  shiftId,
34530
34590
  getShiftIcon,
34531
34591
  getShiftName
34532
- }) => /* @__PURE__ */ jsx("div", { className: "mt-3 bg-blue-50 px-3 py-2 rounded-lg", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-4", children: [
34533
- /* @__PURE__ */ jsx("div", { className: "text-lg font-medium text-blue-600", children: /* @__PURE__ */ jsx(IsolatedTimer, {}) }),
34534
- /* @__PURE__ */ jsx("div", { className: "w-px h-4 bg-blue-300" }),
34535
- /* @__PURE__ */ jsx("span", { className: "text-base font-medium text-blue-600", children: currentDate }),
34536
- /* @__PURE__ */ jsx("div", { className: "w-px h-4 bg-blue-300" }),
34537
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
34592
+ }) => /* @__PURE__ */ jsx("div", { className: "mt-2 sm:mt-3 bg-blue-50 px-2 sm:px-3 py-1.5 sm:py-2 rounded-lg", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-center gap-2 sm:gap-4", children: [
34593
+ /* @__PURE__ */ jsx("div", { className: "text-sm sm:text-base md:text-lg font-medium text-blue-600", children: /* @__PURE__ */ jsx(IsolatedTimer, {}) }),
34594
+ /* @__PURE__ */ jsx("div", { className: "hidden sm:block w-px h-4 bg-blue-300" }),
34595
+ /* @__PURE__ */ jsx("span", { className: "text-xs sm:text-sm md:text-base font-medium text-blue-600", children: currentDate }),
34596
+ /* @__PURE__ */ jsx("div", { className: "hidden sm:block w-px h-4 bg-blue-300" }),
34597
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 sm:gap-2", children: [
34538
34598
  /* @__PURE__ */ jsx("div", { className: "text-blue-600", children: getShiftIcon(shiftId) }),
34539
- /* @__PURE__ */ jsxs("span", { className: "text-base font-medium text-blue-600", children: [
34599
+ /* @__PURE__ */ jsxs("span", { className: "text-xs sm:text-sm md:text-base font-medium text-blue-600", children: [
34540
34600
  getShiftName(shiftId),
34541
34601
  " Shift"
34542
34602
  ] })
@@ -34770,9 +34830,50 @@ var LeaderboardDetailView = memo(({
34770
34830
  ] }) });
34771
34831
  }
34772
34832
  return /* @__PURE__ */ jsxs("div", { className: `min-h-screen bg-slate-50 flex flex-col ${className}`, children: [
34773
- /* @__PURE__ */ jsx("div", { className: "sticky top-0 z-20 bg-white shadow-sm border-b border-gray-200/80", children: /* @__PURE__ */ jsxs("div", { className: "px-3 sm:px-8 py-2 sm:py-2.5", children: [
34774
- /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
34775
- /* @__PURE__ */ jsx("div", { className: "w-auto sm:w-32", children: /* @__PURE__ */ jsx(
34833
+ /* @__PURE__ */ jsx("div", { className: "sticky top-0 z-20 bg-white shadow-sm border-b border-gray-200/80", children: /* @__PURE__ */ jsxs("div", { className: "px-3 sm:px-6 md:px-8 py-2 sm:py-2.5", children: [
34834
+ /* @__PURE__ */ jsxs("div", { className: "sm:hidden", children: [
34835
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-2", children: [
34836
+ /* @__PURE__ */ jsx(
34837
+ BackButtonMinimal,
34838
+ {
34839
+ onClick: handleBackClick,
34840
+ text: "Back",
34841
+ size: "sm",
34842
+ "aria-label": "Navigate back to previous page"
34843
+ }
34844
+ ),
34845
+ /* @__PURE__ */ jsxs(
34846
+ "button",
34847
+ {
34848
+ onClick: handleSortToggle,
34849
+ 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",
34850
+ children: [
34851
+ /* @__PURE__ */ jsx("span", { children: "Sort" }),
34852
+ /* @__PURE__ */ jsx(
34853
+ "svg",
34854
+ {
34855
+ className: "w-3.5 h-3.5 text-gray-600",
34856
+ xmlns: "http://www.w3.org/2000/svg",
34857
+ viewBox: "0 0 24 24",
34858
+ fill: "none",
34859
+ stroke: "currentColor",
34860
+ strokeWidth: "2",
34861
+ strokeLinecap: "round",
34862
+ strokeLinejoin: "round",
34863
+ children: sortAscending ? /* @__PURE__ */ jsx("path", { d: "M5 15l7-7 7 7" }) : /* @__PURE__ */ jsx("path", { d: "M19 9l-7 7-7-7" })
34864
+ }
34865
+ )
34866
+ ]
34867
+ }
34868
+ )
34869
+ ] }),
34870
+ /* @__PURE__ */ jsx("div", { className: "text-center", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-2", children: [
34871
+ /* @__PURE__ */ jsx("h1", { className: "text-base font-semibold text-gray-900", children: "Leaderboard" }),
34872
+ /* @__PURE__ */ jsx("div", { className: "h-1 w-1 rounded-full bg-green-500 animate-pulse ring-1 ring-green-500/30 ring-offset-1" })
34873
+ ] }) })
34874
+ ] }),
34875
+ /* @__PURE__ */ jsxs("div", { className: "hidden sm:flex items-center justify-between", children: [
34876
+ /* @__PURE__ */ jsx("div", { className: "w-32", children: /* @__PURE__ */ jsx(
34776
34877
  BackButtonMinimal,
34777
34878
  {
34778
34879
  onClick: handleBackClick,
@@ -34781,17 +34882,17 @@ var LeaderboardDetailView = memo(({
34781
34882
  "aria-label": "Navigate back to previous page"
34782
34883
  }
34783
34884
  ) }),
34784
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 sm:gap-3", children: [
34785
- /* @__PURE__ */ jsx("h1", { className: "text-3xl font-semibold text-gray-900", children: "Leaderboard" }),
34786
- /* @__PURE__ */ jsx("div", { className: "h-1.5 w-1.5 sm:h-2 sm:w-2 rounded-full bg-green-500 animate-pulse ring-1 sm:ring-2 ring-green-500/30 ring-offset-1" })
34885
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
34886
+ /* @__PURE__ */ jsx("h1", { className: "text-xl md:text-2xl lg:text-3xl font-semibold text-gray-900", children: "Leaderboard" }),
34887
+ /* @__PURE__ */ jsx("div", { className: "h-2 w-2 rounded-full bg-green-500 animate-pulse ring-2 ring-green-500/30 ring-offset-1" })
34787
34888
  ] }),
34788
- /* @__PURE__ */ jsx("div", { className: "w-auto sm:w-32 flex justify-end", children: /* @__PURE__ */ jsxs(
34889
+ /* @__PURE__ */ jsx("div", { className: "w-32 flex justify-end", children: /* @__PURE__ */ jsxs(
34789
34890
  "button",
34790
34891
  {
34791
34892
  onClick: handleSortToggle,
34792
- className: "flex items-center gap-1 sm:gap-2 px-2 sm:px-4 py-1.5 sm:py-2 bg-white rounded-lg border border-gray-200 shadow-sm hover:bg-gray-50 text-xs sm:text-sm transition-colors",
34893
+ className: "flex items-center gap-2 px-4 py-2 bg-white rounded-lg border border-gray-200 shadow-sm hover:bg-gray-50 text-sm transition-colors",
34793
34894
  children: [
34794
- /* @__PURE__ */ jsx("span", { className: "hidden sm:inline", children: "Sort by Efficiency" }),
34895
+ /* @__PURE__ */ jsx("span", { children: "Sort by Efficiency" }),
34795
34896
  /* @__PURE__ */ jsx(
34796
34897
  "svg",
34797
34898
  {
@@ -35300,48 +35401,113 @@ var BreakRow = memo(({
35300
35401
  onRemove,
35301
35402
  index
35302
35403
  }) => {
35303
- return /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-12 gap-2 sm:gap-4 items-center w-full bg-white hover:bg-gray-50 rounded-md transition-all duration-200 p-2", children: [
35304
- /* @__PURE__ */ jsx("div", { className: "col-span-3", children: /* @__PURE__ */ jsx(
35305
- TimePickerDropdown,
35306
- {
35307
- value: breakItem.startTime,
35308
- onChange: (value) => onUpdate(index, "startTime", value),
35309
- placeholder: "Start time",
35310
- className: "w-full"
35311
- }
35312
- ) }),
35313
- /* @__PURE__ */ jsx("div", { className: "col-span-3", children: /* @__PURE__ */ jsx(
35314
- TimePickerDropdown,
35315
- {
35316
- value: breakItem.endTime,
35317
- onChange: (value) => onUpdate(index, "endTime", value),
35318
- placeholder: "End time",
35319
- className: "w-full"
35320
- }
35321
- ) }),
35322
- /* @__PURE__ */ jsx("div", { className: "col-span-2", children: /* @__PURE__ */ jsxs("span", { className: "text-sm font-medium text-gray-700", children: [
35323
- breakItem.duration,
35324
- " min"
35325
- ] }) }),
35326
- /* @__PURE__ */ jsx("div", { className: "col-span-3", children: /* @__PURE__ */ jsx(
35327
- "input",
35328
- {
35329
- type: "text",
35330
- value: breakItem.remarks || "",
35331
- onChange: (e) => onUpdate(index, "remarks", e.target.value),
35332
- placeholder: "Break remarks",
35333
- className: "w-full px-2 sm:px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
35334
- }
35335
- ) }),
35336
- /* @__PURE__ */ jsx("div", { className: "col-span-1 flex justify-center", children: /* @__PURE__ */ jsx(
35337
- "button",
35338
- {
35339
- onClick: () => onRemove(index),
35340
- className: "text-gray-400 hover:text-red-500 focus:outline-none transition-colors",
35341
- "aria-label": "Remove break",
35342
- children: /* @__PURE__ */ jsx(X, { className: "w-4 h-4" })
35343
- }
35344
- ) })
35404
+ return /* @__PURE__ */ jsxs(Fragment, { children: [
35405
+ /* @__PURE__ */ jsxs("div", { className: "hidden sm:grid grid-cols-12 gap-2 md:gap-4 items-center w-full bg-white hover:bg-gray-50 rounded-md transition-all duration-200 p-2", children: [
35406
+ /* @__PURE__ */ jsx("div", { className: "col-span-3", children: /* @__PURE__ */ jsx(
35407
+ TimePickerDropdown,
35408
+ {
35409
+ value: breakItem.startTime,
35410
+ onChange: (value) => onUpdate(index, "startTime", value),
35411
+ placeholder: "Start time",
35412
+ className: "w-full"
35413
+ }
35414
+ ) }),
35415
+ /* @__PURE__ */ jsx("div", { className: "col-span-3", children: /* @__PURE__ */ jsx(
35416
+ TimePickerDropdown,
35417
+ {
35418
+ value: breakItem.endTime,
35419
+ onChange: (value) => onUpdate(index, "endTime", value),
35420
+ placeholder: "End time",
35421
+ className: "w-full"
35422
+ }
35423
+ ) }),
35424
+ /* @__PURE__ */ jsx("div", { className: "col-span-2", children: /* @__PURE__ */ jsxs("span", { className: "text-sm font-medium text-gray-700", children: [
35425
+ breakItem.duration,
35426
+ " min"
35427
+ ] }) }),
35428
+ /* @__PURE__ */ jsx("div", { className: "col-span-3", children: /* @__PURE__ */ jsx(
35429
+ "input",
35430
+ {
35431
+ type: "text",
35432
+ value: breakItem.remarks || "",
35433
+ onChange: (e) => onUpdate(index, "remarks", e.target.value),
35434
+ placeholder: "Break remarks",
35435
+ 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"
35436
+ }
35437
+ ) }),
35438
+ /* @__PURE__ */ jsx("div", { className: "col-span-1 flex justify-center", children: /* @__PURE__ */ jsx(
35439
+ "button",
35440
+ {
35441
+ onClick: () => onRemove(index),
35442
+ className: "text-gray-400 hover:text-red-500 focus:outline-none transition-colors",
35443
+ "aria-label": "Remove break",
35444
+ children: /* @__PURE__ */ jsx(X, { className: "w-4 h-4" })
35445
+ }
35446
+ ) })
35447
+ ] }),
35448
+ /* @__PURE__ */ jsxs("div", { className: "sm:hidden bg-white border border-gray-200 rounded-lg p-3 mb-3 space-y-3", children: [
35449
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-2", children: [
35450
+ /* @__PURE__ */ jsxs("h5", { className: "text-sm font-medium text-gray-700", children: [
35451
+ "Break ",
35452
+ index + 1
35453
+ ] }),
35454
+ /* @__PURE__ */ jsx(
35455
+ "button",
35456
+ {
35457
+ onClick: () => onRemove(index),
35458
+ className: "text-gray-400 hover:text-red-500 focus:outline-none transition-colors p-1",
35459
+ "aria-label": "Remove break",
35460
+ children: /* @__PURE__ */ jsx(X, { className: "w-4 h-4" })
35461
+ }
35462
+ )
35463
+ ] }),
35464
+ /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-3", children: [
35465
+ /* @__PURE__ */ jsxs("div", { children: [
35466
+ /* @__PURE__ */ jsx("label", { className: "block text-xs font-medium text-gray-600 mb-1", children: "Start Time" }),
35467
+ /* @__PURE__ */ jsx(
35468
+ TimePickerDropdown,
35469
+ {
35470
+ value: breakItem.startTime,
35471
+ onChange: (value) => onUpdate(index, "startTime", value),
35472
+ placeholder: "Start time",
35473
+ className: "w-full"
35474
+ }
35475
+ )
35476
+ ] }),
35477
+ /* @__PURE__ */ jsxs("div", { children: [
35478
+ /* @__PURE__ */ jsx("label", { className: "block text-xs font-medium text-gray-600 mb-1", children: "End Time" }),
35479
+ /* @__PURE__ */ jsx(
35480
+ TimePickerDropdown,
35481
+ {
35482
+ value: breakItem.endTime,
35483
+ onChange: (value) => onUpdate(index, "endTime", value),
35484
+ placeholder: "End time",
35485
+ className: "w-full"
35486
+ }
35487
+ )
35488
+ ] })
35489
+ ] }),
35490
+ /* @__PURE__ */ jsxs("div", { children: [
35491
+ /* @__PURE__ */ jsx("label", { className: "block text-xs font-medium text-gray-600 mb-1", children: "Duration" }),
35492
+ /* @__PURE__ */ jsxs("div", { className: "text-sm text-gray-700 font-medium px-3 py-2 bg-gray-100 rounded-md text-center", children: [
35493
+ breakItem.duration,
35494
+ " minutes"
35495
+ ] })
35496
+ ] }),
35497
+ /* @__PURE__ */ jsxs("div", { children: [
35498
+ /* @__PURE__ */ jsx("label", { className: "block text-xs font-medium text-gray-600 mb-1", children: "Remarks (Optional)" }),
35499
+ /* @__PURE__ */ jsx(
35500
+ "input",
35501
+ {
35502
+ type: "text",
35503
+ value: breakItem.remarks || "",
35504
+ onChange: (e) => onUpdate(index, "remarks", e.target.value),
35505
+ placeholder: "Add optional remarks...",
35506
+ 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"
35507
+ }
35508
+ )
35509
+ ] })
35510
+ ] })
35345
35511
  ] });
35346
35512
  });
35347
35513
  BreakRow.displayName = "BreakRow";
@@ -35374,35 +35540,35 @@ var ShiftPanel = memo(({
35374
35540
  console.error("Error saving panel state to localStorage:", error);
35375
35541
  }
35376
35542
  };
35377
- return /* @__PURE__ */ jsxs("div", { className: "bg-white rounded-lg shadow-sm mb-6 transition-all duration-300 w-full border border-gray-200", children: [
35543
+ return /* @__PURE__ */ jsxs("div", { className: "bg-white rounded-lg shadow-sm mb-4 sm:mb-6 transition-all duration-300 w-full border border-gray-200", children: [
35378
35544
  /* @__PURE__ */ jsx(
35379
35545
  "div",
35380
35546
  {
35381
- className: "p-4 w-full cursor-pointer hover:bg-gray-50/50 transition-all duration-200",
35547
+ className: "p-3 sm:p-4 w-full cursor-pointer hover:bg-gray-50/50 transition-all duration-200",
35382
35548
  onClick: toggleMinimize,
35383
- children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between w-full", children: [
35549
+ children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col sm:flex-row sm:items-center justify-between w-full gap-2 sm:gap-0", children: [
35384
35550
  /* @__PURE__ */ jsxs(
35385
35551
  "button",
35386
35552
  {
35387
35553
  onClick: toggleMinimize,
35388
- className: "flex items-center gap-3 text-lg font-medium transition-colors duration-200 \n focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 rounded-lg \n hover:bg-blue-50 px-3 py-2 group",
35554
+ className: "flex items-center gap-2 sm:gap-3 text-base sm:text-lg font-medium transition-colors duration-200 \n focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 rounded-lg \n hover:bg-blue-50 px-2 sm:px-3 py-1.5 sm:py-2 group w-full sm:w-auto justify-start",
35389
35555
  "aria-expanded": !isMinimized,
35390
35556
  "aria-controls": panelId,
35391
35557
  children: [
35392
35558
  /* @__PURE__ */ jsx(
35393
35559
  ChevronDown,
35394
35560
  {
35395
- className: `w-5 h-5 text-blue-500 transform transition-transform duration-200 ${isMinimized ? "" : "rotate-180"}`
35561
+ className: `w-4 h-4 sm:w-5 sm:h-5 text-blue-500 transform transition-transform duration-200 ${isMinimized ? "" : "rotate-180"}`
35396
35562
  }
35397
35563
  ),
35398
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
35399
- icon,
35400
- /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold text-gray-900 group-hover:text-blue-600", children: title })
35564
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 sm:gap-2", children: [
35565
+ /* @__PURE__ */ jsx("div", { className: "w-4 h-4 sm:w-5 sm:h-5", children: icon }),
35566
+ /* @__PURE__ */ jsx("h3", { className: "text-base sm:text-lg font-semibold text-gray-900 group-hover:text-blue-600", children: title })
35401
35567
  ] })
35402
35568
  ]
35403
35569
  }
35404
35570
  ),
35405
- /* @__PURE__ */ jsxs("span", { className: "text-sm font-medium text-gray-600 mr-2", children: [
35571
+ /* @__PURE__ */ jsxs("span", { className: "text-xs sm:text-sm font-medium text-gray-600 text-center sm:text-right sm:mr-2", children: [
35406
35572
  "Total Shift Hours: ",
35407
35573
  shiftHours,
35408
35574
  " hours"
@@ -35410,10 +35576,10 @@ var ShiftPanel = memo(({
35410
35576
  ] })
35411
35577
  }
35412
35578
  ),
35413
- !isMinimized && /* @__PURE__ */ jsxs("div", { id: panelId, className: "p-4 sm:p-6 border-t border-gray-200 w-full bg-white", children: [
35414
- /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6 mb-6 w-full", children: [
35579
+ !isMinimized && /* @__PURE__ */ jsxs("div", { id: panelId, className: "p-3 sm:p-4 md:p-6 border-t border-gray-200 w-full bg-white", children: [
35580
+ /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4 md:gap-6 mb-4 sm:mb-6 w-full", children: [
35415
35581
  /* @__PURE__ */ jsxs("div", { className: "w-full", children: [
35416
- /* @__PURE__ */ jsx("label", { className: "block text-sm font-medium text-gray-700 mb-1", children: "Shift Start Time" }),
35582
+ /* @__PURE__ */ jsx("label", { className: "block text-xs sm:text-sm font-medium text-gray-700 mb-1", children: "Shift Start Time" }),
35417
35583
  /* @__PURE__ */ jsx(
35418
35584
  TimePickerDropdown,
35419
35585
  {
@@ -35425,7 +35591,7 @@ var ShiftPanel = memo(({
35425
35591
  )
35426
35592
  ] }),
35427
35593
  /* @__PURE__ */ jsxs("div", { className: "w-full", children: [
35428
- /* @__PURE__ */ jsx("label", { className: "block text-sm font-medium text-gray-700 mb-1", children: "Shift End Time" }),
35594
+ /* @__PURE__ */ jsx("label", { className: "block text-xs sm:text-sm font-medium text-gray-700 mb-1", children: "Shift End Time" }),
35429
35595
  /* @__PURE__ */ jsx(
35430
35596
  TimePickerDropdown,
35431
35597
  {
@@ -35438,12 +35604,12 @@ var ShiftPanel = memo(({
35438
35604
  ] })
35439
35605
  ] }),
35440
35606
  /* @__PURE__ */ jsxs("div", { className: "mb-4 w-full", children: [
35441
- /* @__PURE__ */ jsx("div", { className: "flex flex-col sm:flex-row sm:items-center justify-between mb-3 w-full", children: /* @__PURE__ */ jsxs("h4", { className: "text-md font-medium text-gray-700 flex items-center gap-2 mb-2 sm:mb-0", children: [
35442
- /* @__PURE__ */ jsx(Coffee, { className: "w-4 h-4" }),
35607
+ /* @__PURE__ */ jsx("div", { className: "flex flex-col sm:flex-row sm:items-center justify-between mb-3 w-full", children: /* @__PURE__ */ jsxs("h4", { className: "text-sm sm:text-base font-medium text-gray-700 flex items-center gap-1.5 sm:gap-2 mb-2 sm:mb-0", children: [
35608
+ /* @__PURE__ */ jsx(Coffee, { className: "w-3.5 h-3.5 sm:w-4 sm:h-4" }),
35443
35609
  "Breaks"
35444
35610
  ] }) }),
35445
35611
  /* @__PURE__ */ jsx("div", { className: "space-y-2 mb-4 w-full", children: breaks.length > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
35446
- /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-12 gap-2 sm:gap-4 text-xs font-medium text-gray-500 mb-1 w-full px-2", children: [
35612
+ /* @__PURE__ */ jsxs("div", { className: "hidden sm:grid grid-cols-12 gap-2 md:gap-4 text-xs font-medium text-gray-500 mb-1 w-full px-2", children: [
35447
35613
  /* @__PURE__ */ jsx("div", { className: "col-span-3", children: "Break Start" }),
35448
35614
  /* @__PURE__ */ jsx("div", { className: "col-span-3", children: "Break End" }),
35449
35615
  /* @__PURE__ */ jsx("div", { className: "col-span-2", children: "Duration" }),
@@ -35460,7 +35626,7 @@ var ShiftPanel = memo(({
35460
35626
  },
35461
35627
  index
35462
35628
  )) })
35463
- ] }) : /* @__PURE__ */ jsx("div", { className: "text-sm text-gray-500 py-3 text-center bg-gray-50 rounded-md", children: "No breaks added yet" }) }),
35629
+ ] }) : /* @__PURE__ */ jsx("div", { className: "text-xs sm:text-sm text-gray-500 py-3 text-center bg-gray-50 rounded-md", children: "No breaks added yet" }) }),
35464
35630
  /* @__PURE__ */ jsxs(
35465
35631
  "button",
35466
35632
  {
@@ -35468,9 +35634,9 @@ var ShiftPanel = memo(({
35468
35634
  e.stopPropagation();
35469
35635
  onBreakAdd();
35470
35636
  },
35471
- className: "inline-flex items-center gap-1 text-sm font-medium text-blue-600 hover:text-blue-800 px-3 py-1.5 bg-blue-50 hover:bg-blue-100 rounded-md transition-colors",
35637
+ className: "w-full sm:w-auto inline-flex items-center justify-center gap-1 text-xs sm:text-sm font-medium text-blue-600 hover:text-blue-800 px-3 py-1.5 bg-blue-50 hover:bg-blue-100 rounded-md transition-colors",
35472
35638
  children: [
35473
- /* @__PURE__ */ jsx(Plus, { className: "w-4 h-4" }),
35639
+ /* @__PURE__ */ jsx(Plus, { className: "w-3.5 h-3.5 sm:w-4 sm:h-4" }),
35474
35640
  "Add Break"
35475
35641
  ]
35476
35642
  }
@@ -35838,8 +36004,8 @@ var ShiftsView = ({
35838
36004
  }
35839
36005
  }, [lineConfigs, supabase, showToast]);
35840
36006
  return /* @__PURE__ */ jsxs("div", { className: `min-h-screen bg-slate-50 ${className}`, children: [
35841
- /* @__PURE__ */ jsx("div", { className: "sticky top-0 z-10 bg-white border-b border-gray-200/80 shadow-sm", children: /* @__PURE__ */ jsx("div", { className: "px-4 sm:px-8 py-4", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center relative", children: [
35842
- /* @__PURE__ */ jsx("div", { className: "absolute left-0", children: /* @__PURE__ */ jsx(
36007
+ /* @__PURE__ */ jsx("div", { className: "sticky top-0 z-10 bg-white border-b border-gray-200/80 shadow-sm", children: /* @__PURE__ */ jsx("div", { className: "px-3 sm:px-4 md:px-6 lg:px-8 py-3 sm:py-4", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center relative", children: [
36008
+ /* @__PURE__ */ jsx("div", { className: "sm:absolute sm:left-0", children: /* @__PURE__ */ jsx(
35843
36009
  BackButtonMinimal,
35844
36010
  {
35845
36011
  onClick: () => onBackClick ? onBackClick() : window.history.back(),
@@ -35848,14 +36014,14 @@ var ShiftsView = ({
35848
36014
  "aria-label": "Navigate back to previous page"
35849
36015
  }
35850
36016
  ) }),
35851
- /* @__PURE__ */ jsxs("div", { className: "flex-1 flex flex-col items-center", children: [
35852
- /* @__PURE__ */ jsx("h1", { className: "text-3xl font-semibold text-gray-900", children: "Shift Management" }),
35853
- /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500 mt-1", children: "Configure day and night shift timings and breaks for each production line" })
36017
+ /* @__PURE__ */ jsxs("div", { className: "flex-1 flex flex-col items-center mt-2 sm:mt-0", children: [
36018
+ /* @__PURE__ */ jsx("h1", { className: "text-lg sm:text-xl md:text-2xl lg:text-3xl font-semibold text-gray-900 text-center", children: "Shift Management" }),
36019
+ /* @__PURE__ */ jsx("p", { className: "text-xs sm:text-sm text-gray-500 mt-0.5 sm:mt-1 text-center px-2 sm:px-0", children: "Configure day and night shift timings and breaks for each production line" })
35854
36020
  ] }),
35855
- /* @__PURE__ */ jsx("div", { className: "absolute right-0 w-24" })
36021
+ /* @__PURE__ */ jsx("div", { className: "hidden sm:block absolute right-0 w-24" })
35856
36022
  ] }) }) }),
35857
- /* @__PURE__ */ jsxs("div", { className: "p-4 sm:p-6 md:p-8", children: [
35858
- /* @__PURE__ */ jsx("div", { className: "mb-6 bg-gradient-to-r from-blue-50 to-blue-50/50 p-3 sm:p-4 rounded-xl border border-blue-100", children: /* @__PURE__ */ jsx("p", { className: "text-xs sm:text-sm text-blue-700 font-medium", children: "Changes will affect production targets and output calculations." }) }),
36023
+ /* @__PURE__ */ jsxs("div", { className: "p-3 sm:p-4 md:p-6 lg:p-8", children: [
36024
+ /* @__PURE__ */ jsx("div", { className: "mb-4 sm:mb-6 bg-gradient-to-r from-blue-50 to-blue-50/50 p-3 sm:p-4 rounded-xl border border-blue-100", children: /* @__PURE__ */ jsx("p", { className: "text-xs sm:text-sm text-blue-700 font-medium text-center sm:text-left", children: "Changes will affect production targets and output calculations." }) }),
35859
36025
  loading ? /* @__PURE__ */ jsx("div", { className: "bg-white rounded-xl p-8 shadow text-center", children: /* @__PURE__ */ jsxs("div", { className: "animate-pulse flex flex-col items-center", children: [
35860
36026
  /* @__PURE__ */ jsx("div", { className: "h-8 w-8 rounded-full bg-blue-200 mb-4" }),
35861
36027
  /* @__PURE__ */ jsx("div", { className: "h-4 w-48 bg-gray-200 rounded mb-2" }),
@@ -35864,17 +36030,19 @@ var ShiftsView = ({
35864
36030
  /* @__PURE__ */ jsx("div", { className: "text-red-500 mb-2", children: "Error loading shift configurations" }),
35865
36031
  /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500", children: error })
35866
36032
  ] }) : /* @__PURE__ */ jsx("div", { className: "space-y-4 sm:space-y-6", children: lineConfigs.map((config) => /* @__PURE__ */ jsxs("div", { className: "bg-white rounded-xl border border-gray-200 shadow-sm hover:shadow-md transition-all duration-200 w-full", children: [
35867
- /* @__PURE__ */ jsx("div", { className: "px-6 py-4", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col sm:flex-row sm:items-center justify-between gap-3 sm:gap-0", children: [
35868
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
35869
- /* @__PURE__ */ jsx(Calendar, { className: "w-5 h-5 text-gray-600" }),
35870
- /* @__PURE__ */ jsxs("h2", { className: "text-lg font-semibold text-gray-800", children: [
36033
+ /* @__PURE__ */ jsx("div", { className: "px-4 sm:px-5 md:px-6 py-3 sm:py-4", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col sm:flex-row sm:items-center justify-between gap-3 sm:gap-0", children: [
36034
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 sm:gap-3", children: [
36035
+ /* @__PURE__ */ jsx(Calendar, { className: "w-4 h-4 sm:w-5 sm:h-5 text-gray-600" }),
36036
+ /* @__PURE__ */ jsxs("h2", { className: "text-base sm:text-lg font-semibold text-gray-800", children: [
35871
36037
  config.name,
35872
36038
  " Shifts"
35873
36039
  ] })
35874
36040
  ] }),
35875
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 sm:gap-4", children: [
35876
- config.isSaving && /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-blue-600", children: "Saving..." }),
35877
- config.saveSuccess && /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-green-600", children: "Saved!" }),
36041
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col sm:flex-row items-start sm:items-center gap-2 sm:gap-4 w-full sm:w-auto", children: [
36042
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
36043
+ config.isSaving && /* @__PURE__ */ jsx("span", { className: "text-xs sm:text-sm font-medium text-blue-600", children: "Saving..." }),
36044
+ config.saveSuccess && /* @__PURE__ */ jsx("span", { className: "text-xs sm:text-sm font-medium text-green-600", children: "Saved!" })
36045
+ ] }),
35878
36046
  /* @__PURE__ */ jsxs(
35879
36047
  "button",
35880
36048
  {
@@ -35884,7 +36052,7 @@ var ShiftsView = ({
35884
36052
  e.stopPropagation();
35885
36053
  handleSaveShifts(config.id);
35886
36054
  },
35887
- className: "inline-flex items-center gap-1 sm:gap-2 py-1.5 sm:py-2 px-3 sm:px-4 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors duration-200 text-xs sm:text-sm font-medium shadow-sm cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 z-10",
36055
+ className: "w-full sm:w-auto inline-flex items-center justify-center gap-1 sm:gap-2 py-1.5 sm:py-2 px-3 sm:px-4 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors duration-200 text-xs sm:text-sm font-medium shadow-sm cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 z-10",
35888
36056
  disabled: config.isSaving,
35889
36057
  "aria-label": "Save shift configuration",
35890
36058
  children: [
@@ -35895,7 +36063,7 @@ var ShiftsView = ({
35895
36063
  )
35896
36064
  ] })
35897
36065
  ] }) }),
35898
- /* @__PURE__ */ jsxs("div", { id: `shift-panel-${config.id}`, className: "p-3 sm:p-6 border-t border-gray-200 w-full", children: [
36066
+ /* @__PURE__ */ jsxs("div", { id: `shift-panel-${config.id}`, className: "p-3 sm:p-4 md:p-6 border-t border-gray-200 w-full", children: [
35899
36067
  /* @__PURE__ */ jsx(
35900
36068
  ShiftPanel,
35901
36069
  {
@@ -36676,54 +36844,105 @@ var SKUList = ({
36676
36844
  /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-gray-500", children: "Get started by creating a new SKU for production planning." })
36677
36845
  ] }) });
36678
36846
  }
36679
- return /* @__PURE__ */ jsx("div", { className: "bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsxs("table", { className: "min-w-full divide-y divide-gray-200", children: [
36680
- /* @__PURE__ */ jsx("thead", { className: "bg-gray-50", children: /* @__PURE__ */ jsxs("tr", { children: [
36681
- /* @__PURE__ */ jsx("th", { scope: "col", className: "px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider", children: "SKU ID" }),
36682
- /* @__PURE__ */ jsx("th", { scope: "col", className: "px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider", children: "Production Target" }),
36683
- /* @__PURE__ */ jsx("th", { scope: "col", className: "px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider", children: "Attributes" }),
36684
- /* @__PURE__ */ jsx("th", { scope: "col", className: "px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider", children: "Status" }),
36685
- /* @__PURE__ */ jsx("th", { scope: "col", className: "px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider", children: "Created" }),
36686
- /* @__PURE__ */ jsx("th", { scope: "col", className: "relative px-6 py-3", children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Actions" }) })
36687
- ] }) }),
36688
- /* @__PURE__ */ jsx("tbody", { className: "bg-white divide-y divide-gray-200", children: skus.map((sku) => /* @__PURE__ */ jsxs("tr", { className: "hover:bg-gray-50 transition-colors duration-150", children: [
36689
- /* @__PURE__ */ jsx("td", { className: "px-6 py-4 whitespace-nowrap", children: /* @__PURE__ */ jsx("div", { className: "text-sm font-semibold text-gray-900", children: sku.sku_id }) }),
36690
- /* @__PURE__ */ jsx("td", { className: "px-6 py-4 whitespace-nowrap", children: /* @__PURE__ */ jsxs("div", { className: "text-sm font-medium text-gray-700", children: [
36691
- sku.production_target.toLocaleString(),
36692
- " units/day"
36847
+ return /* @__PURE__ */ jsxs(Fragment, { children: [
36848
+ /* @__PURE__ */ jsx("div", { className: "hidden lg:block bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsxs("table", { className: "min-w-full divide-y divide-gray-200", children: [
36849
+ /* @__PURE__ */ jsx("thead", { className: "bg-gray-50", children: /* @__PURE__ */ jsxs("tr", { children: [
36850
+ /* @__PURE__ */ jsx("th", { scope: "col", className: "px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider", children: "SKU ID" }),
36851
+ /* @__PURE__ */ jsx("th", { scope: "col", className: "px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider", children: "Production Target" }),
36852
+ /* @__PURE__ */ jsx("th", { scope: "col", className: "px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider", children: "Attributes" }),
36853
+ /* @__PURE__ */ jsx("th", { scope: "col", className: "px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider", children: "Status" }),
36854
+ /* @__PURE__ */ jsx("th", { scope: "col", className: "px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider", children: "Created" }),
36855
+ /* @__PURE__ */ jsx("th", { scope: "col", className: "relative px-6 py-3", children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Actions" }) })
36693
36856
  ] }) }),
36694
- /* @__PURE__ */ jsx("td", { className: "px-6 py-4", children: /* @__PURE__ */ jsx("div", { className: "text-sm text-gray-500", children: Object.keys(sku.attributes || {}).length === 0 ? /* @__PURE__ */ jsx("span", { className: "text-gray-400", children: "No attributes" }) : /* @__PURE__ */ jsx("div", { className: "max-w-xs truncate", children: Object.entries(sku.attributes).map(([key, value], index) => /* @__PURE__ */ jsxs("span", { children: [
36695
- index > 0 && ", ",
36696
- /* @__PURE__ */ jsxs("span", { className: "font-medium", children: [
36697
- key,
36698
- ":"
36857
+ /* @__PURE__ */ jsx("tbody", { className: "bg-white divide-y divide-gray-200", children: skus.map((sku) => /* @__PURE__ */ jsxs("tr", { className: "hover:bg-gray-50 transition-colors duration-150", children: [
36858
+ /* @__PURE__ */ jsx("td", { className: "px-6 py-4 whitespace-nowrap", children: /* @__PURE__ */ jsx("div", { className: "text-sm font-semibold text-gray-900", children: sku.sku_id }) }),
36859
+ /* @__PURE__ */ jsx("td", { className: "px-6 py-4 whitespace-nowrap", children: /* @__PURE__ */ jsxs("div", { className: "text-sm font-medium text-gray-700", children: [
36860
+ sku.production_target.toLocaleString(),
36861
+ " units/day"
36862
+ ] }) }),
36863
+ /* @__PURE__ */ jsx("td", { className: "px-6 py-4", children: /* @__PURE__ */ jsx("div", { className: "text-sm text-gray-500", children: Object.keys(sku.attributes || {}).length === 0 ? /* @__PURE__ */ jsx("span", { className: "text-gray-400", children: "No attributes" }) : /* @__PURE__ */ jsx("div", { className: "max-w-xs truncate", children: Object.entries(sku.attributes).map(([key, value], index) => /* @__PURE__ */ jsxs("span", { children: [
36864
+ index > 0 && ", ",
36865
+ /* @__PURE__ */ jsxs("span", { className: "font-medium", children: [
36866
+ key,
36867
+ ":"
36868
+ ] }),
36869
+ " ",
36870
+ String(value)
36871
+ ] }, key)) }) }) }),
36872
+ /* @__PURE__ */ jsx("td", { className: "px-6 py-4 whitespace-nowrap", children: /* @__PURE__ */ jsx("span", { className: `inline-flex px-2 py-1 text-xs font-semibold rounded-full ${sku.is_active ? "bg-green-100 text-green-800" : "bg-gray-100 text-gray-800"}`, children: sku.is_active ? "Active" : "Inactive" }) }),
36873
+ /* @__PURE__ */ jsx("td", { className: "px-6 py-4 whitespace-nowrap text-sm text-gray-500", children: new Date(sku.created_at).toLocaleDateString() }),
36874
+ /* @__PURE__ */ jsxs("td", { className: "px-6 py-4 whitespace-nowrap text-right text-sm font-medium", children: [
36875
+ /* @__PURE__ */ jsx(
36876
+ "button",
36877
+ {
36878
+ onClick: () => onEdit(sku),
36879
+ className: "text-blue-600 hover:text-blue-800 mr-3 transition-colors duration-150 p-1 hover:bg-blue-50 rounded",
36880
+ title: "Edit SKU",
36881
+ children: /* @__PURE__ */ jsx(Edit2, { className: "w-4 h-4" })
36882
+ }
36883
+ ),
36884
+ /* @__PURE__ */ jsx(
36885
+ "button",
36886
+ {
36887
+ onClick: () => onDelete(sku),
36888
+ className: "text-red-600 hover:text-red-800 transition-colors duration-150 p-1 hover:bg-red-50 rounded",
36889
+ title: "Delete SKU",
36890
+ children: /* @__PURE__ */ jsx(Trash2, { className: "w-4 h-4" })
36891
+ }
36892
+ )
36893
+ ] })
36894
+ ] }, sku.id)) })
36895
+ ] }) }) }),
36896
+ /* @__PURE__ */ jsx("div", { className: "lg:hidden space-y-3 sm:space-y-4", children: skus.map((sku) => /* @__PURE__ */ jsxs("div", { className: "bg-white rounded-xl shadow-sm border border-gray-200 p-4 hover:shadow-md transition-all duration-200", children: [
36897
+ /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between mb-3", children: [
36898
+ /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
36899
+ /* @__PURE__ */ jsx("h3", { className: "text-base sm:text-lg font-semibold text-gray-900 truncate", children: sku.sku_id }),
36900
+ /* @__PURE__ */ jsx("div", { className: "mt-1", children: /* @__PURE__ */ jsx("span", { className: `inline-flex px-2 py-1 text-xs font-semibold rounded-full ${sku.is_active ? "bg-green-100 text-green-800" : "bg-gray-100 text-gray-800"}`, children: sku.is_active ? "Active" : "Inactive" }) })
36699
36901
  ] }),
36700
- " ",
36701
- String(value)
36702
- ] }, key)) }) }) }),
36703
- /* @__PURE__ */ jsx("td", { className: "px-6 py-4 whitespace-nowrap", children: /* @__PURE__ */ jsx("span", { className: `inline-flex px-2 py-1 text-xs font-semibold rounded-full ${sku.is_active ? "bg-green-100 text-green-800" : "bg-gray-100 text-gray-800"}`, children: sku.is_active ? "Active" : "Inactive" }) }),
36704
- /* @__PURE__ */ jsx("td", { className: "px-6 py-4 whitespace-nowrap text-sm text-gray-500", children: new Date(sku.created_at).toLocaleDateString() }),
36705
- /* @__PURE__ */ jsxs("td", { className: "px-6 py-4 whitespace-nowrap text-right text-sm font-medium", children: [
36706
- /* @__PURE__ */ jsx(
36707
- "button",
36708
- {
36709
- onClick: () => onEdit(sku),
36710
- className: "text-blue-600 hover:text-blue-800 mr-3 transition-colors duration-150 p-1 hover:bg-blue-50 rounded",
36711
- title: "Edit SKU",
36712
- children: /* @__PURE__ */ jsx(Edit2, { className: "w-4 h-4" })
36713
- }
36714
- ),
36715
- /* @__PURE__ */ jsx(
36716
- "button",
36717
- {
36718
- onClick: () => onDelete(sku),
36719
- className: "text-red-600 hover:text-red-800 transition-colors duration-150 p-1 hover:bg-red-50 rounded",
36720
- title: "Delete SKU",
36721
- children: /* @__PURE__ */ jsx(Trash2, { className: "w-4 h-4" })
36722
- }
36723
- )
36902
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 ml-3", children: [
36903
+ /* @__PURE__ */ jsx(
36904
+ "button",
36905
+ {
36906
+ onClick: () => onEdit(sku),
36907
+ className: "text-blue-600 hover:text-blue-800 transition-colors duration-150 p-2 hover:bg-blue-50 rounded-lg",
36908
+ title: "Edit SKU",
36909
+ children: /* @__PURE__ */ jsx(Edit2, { className: "w-4 h-4" })
36910
+ }
36911
+ ),
36912
+ /* @__PURE__ */ jsx(
36913
+ "button",
36914
+ {
36915
+ onClick: () => onDelete(sku),
36916
+ className: "text-red-600 hover:text-red-800 transition-colors duration-150 p-2 hover:bg-red-50 rounded-lg",
36917
+ title: "Delete SKU",
36918
+ children: /* @__PURE__ */ jsx(Trash2, { className: "w-4 h-4" })
36919
+ }
36920
+ )
36921
+ ] })
36922
+ ] }),
36923
+ /* @__PURE__ */ jsxs("div", { className: "mb-3", children: [
36924
+ /* @__PURE__ */ jsx("div", { className: "text-xs font-medium text-gray-500 uppercase tracking-wider mb-1", children: "Production Target" }),
36925
+ /* @__PURE__ */ jsxs("div", { className: "text-sm sm:text-base font-medium text-gray-700", children: [
36926
+ sku.production_target.toLocaleString(),
36927
+ " units/day"
36928
+ ] })
36929
+ ] }),
36930
+ /* @__PURE__ */ jsxs("div", { className: "mb-3", children: [
36931
+ /* @__PURE__ */ jsx("div", { className: "text-xs font-medium text-gray-500 uppercase tracking-wider mb-1", children: "Attributes" }),
36932
+ /* @__PURE__ */ jsx("div", { className: "text-sm text-gray-500", children: Object.keys(sku.attributes || {}).length === 0 ? /* @__PURE__ */ jsx("span", { className: "text-gray-400 italic", children: "No attributes" }) : /* @__PURE__ */ jsx("div", { className: "space-y-1", children: Object.entries(sku.attributes).map(([key, value]) => /* @__PURE__ */ jsxs("div", { className: "flex justify-between", children: [
36933
+ /* @__PURE__ */ jsxs("span", { className: "font-medium text-gray-600", children: [
36934
+ key,
36935
+ ":"
36936
+ ] }),
36937
+ /* @__PURE__ */ jsx("span", { className: "text-gray-900", children: String(value) })
36938
+ ] }, key)) }) })
36939
+ ] }),
36940
+ /* @__PURE__ */ jsxs("div", { className: "text-xs text-gray-500", children: [
36941
+ "Created: ",
36942
+ new Date(sku.created_at).toLocaleDateString()
36724
36943
  ] })
36725
36944
  ] }, sku.id)) })
36726
- ] }) }) });
36945
+ ] });
36727
36946
  };
36728
36947
  var TargetsViewUI = ({
36729
36948
  isLoading,
@@ -36756,8 +36975,8 @@ var TargetsViewUI = ({
36756
36975
  return /* @__PURE__ */ jsx("div", { className: "flex h-screen bg-gray-50", children: /* @__PURE__ */ jsx("div", { className: "flex-1 flex items-center justify-center", children: /* @__PURE__ */ jsx(OptifyeLogoLoader_default, { size: "lg", message: "Loading targets..." }) }) });
36757
36976
  }
36758
36977
  return /* @__PURE__ */ jsxs("main", { className: "min-h-screen flex-1 bg-gray-50", children: [
36759
- /* @__PURE__ */ jsx("div", { className: "bg-white px-8 py-6 shadow-sm border-b border-gray-200/80", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between relative", children: [
36760
- /* @__PURE__ */ jsx("div", { className: "absolute left-0", children: /* @__PURE__ */ jsx(
36978
+ /* @__PURE__ */ jsx("div", { className: "bg-white px-4 sm:px-6 md:px-8 py-4 sm:py-5 md:py-6 shadow-sm border-b border-gray-200/80", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3 sm:gap-4 relative", children: [
36979
+ /* @__PURE__ */ jsx("div", { className: "sm:absolute sm:left-0", children: /* @__PURE__ */ jsx(
36761
36980
  BackButtonMinimal,
36762
36981
  {
36763
36982
  onClick: onBack,
@@ -36766,30 +36985,30 @@ var TargetsViewUI = ({
36766
36985
  "aria-label": "Navigate back to previous page"
36767
36986
  }
36768
36987
  ) }),
36769
- /* @__PURE__ */ jsx("div", { className: "absolute right-0", children: /* @__PURE__ */ jsxs(
36988
+ /* @__PURE__ */ jsx("div", { className: "sm:absolute sm:right-0 w-full sm:w-auto", children: /* @__PURE__ */ jsxs(
36770
36989
  "button",
36771
36990
  {
36772
- className: "px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-all duration-200",
36991
+ className: "w-full sm:w-auto px-3 sm:px-4 py-1.5 sm:py-2 text-xs sm:text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-all duration-200",
36773
36992
  onClick: onToggleBulkConfigure,
36774
36993
  children: [
36775
- /* @__PURE__ */ jsx(Settings2, { className: "w-4 h-4 mr-2 inline-block" }),
36994
+ /* @__PURE__ */ jsx(Settings2, { className: "w-3 h-3 sm:w-4 sm:h-4 mr-1.5 sm:mr-2 inline-block" }),
36776
36995
  "Bulk Configure"
36777
36996
  ]
36778
36997
  }
36779
36998
  ) }),
36780
- /* @__PURE__ */ jsxs("div", { className: "flex-1 text-center mx-auto", children: [
36781
- /* @__PURE__ */ jsx("h1", { className: "text-3xl font-semibold text-gray-900", children: "Production Targets" }),
36782
- /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-gray-500", children: "Configure production targets and metrics for each line and workspace" })
36999
+ /* @__PURE__ */ jsxs("div", { className: "flex-1 text-center mx-auto mt-2 sm:mt-0", children: [
37000
+ /* @__PURE__ */ jsx("h1", { className: "text-lg sm:text-xl md:text-2xl lg:text-3xl font-semibold text-gray-900", children: "Production Targets" }),
37001
+ /* @__PURE__ */ jsx("p", { className: "mt-0.5 sm:mt-1 text-xs sm:text-sm text-gray-500", children: "Configure production targets and metrics for each line and workspace" })
36783
37002
  ] })
36784
37003
  ] }) }),
36785
- /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-auto", children: /* @__PURE__ */ jsxs("div", { className: "px-8 py-6", children: [
36786
- /* @__PURE__ */ jsx("div", { className: "mb-6 bg-gradient-to-r from-blue-50 to-blue-50/50 p-4 rounded-xl border border-blue-100", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-blue-700 font-medium", children: "Click on a line to expand and configure individual workspace targets." }) }),
36787
- /* @__PURE__ */ jsx("div", { className: "mb-6 flex justify-center relative", children: /* @__PURE__ */ jsxs("div", { className: "inline-flex bg-gray-100 p-1 rounded-lg", children: [
37004
+ /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-auto", children: /* @__PURE__ */ jsxs("div", { className: "px-4 sm:px-6 md:px-8 py-4 sm:py-5 md:py-6", children: [
37005
+ /* @__PURE__ */ jsx("div", { className: "mb-4 sm:mb-6 bg-gradient-to-r from-blue-50 to-blue-50/50 p-3 sm:p-4 rounded-xl border border-blue-100", children: /* @__PURE__ */ jsx("p", { className: "text-xs sm:text-sm text-blue-700 font-medium text-center sm:text-left", children: "Click on a line to expand and configure individual workspace targets." }) }),
37006
+ /* @__PURE__ */ jsx("div", { className: "mb-4 sm:mb-6 flex justify-center relative", children: /* @__PURE__ */ jsxs("div", { className: "inline-flex bg-gray-100 p-1 rounded-lg w-full max-w-xs sm:w-auto", children: [
36788
37007
  /* @__PURE__ */ jsx(
36789
37008
  "button",
36790
37009
  {
36791
37010
  onClick: () => onShiftChange(0),
36792
- className: `px-4 py-2 text-sm font-medium rounded-md transition-all ${selectedShift === 0 ? "bg-white text-blue-600 shadow-sm" : "text-gray-600 hover:text-gray-900"}`,
37011
+ className: `flex-1 sm:flex-none px-3 sm:px-4 py-2 text-xs sm:text-sm font-medium rounded-md transition-all ${selectedShift === 0 ? "bg-white text-blue-600 shadow-sm" : "text-gray-600 hover:text-gray-900"}`,
36793
37012
  children: "Day Shift"
36794
37013
  }
36795
37014
  ),
@@ -36797,7 +37016,7 @@ var TargetsViewUI = ({
36797
37016
  "button",
36798
37017
  {
36799
37018
  onClick: () => onShiftChange(1),
36800
- className: `px-4 py-2 text-sm font-medium rounded-md transition-all ${selectedShift === 1 ? "bg-white text-blue-600 shadow-sm" : "text-gray-600 hover:text-gray-900"}`,
37019
+ className: `flex-1 sm:flex-none px-3 sm:px-4 py-2 text-xs sm:text-sm font-medium rounded-md transition-all ${selectedShift === 1 ? "bg-white text-blue-600 shadow-sm" : "text-gray-600 hover:text-gray-900"}`,
36801
37020
  children: "Night Shift"
36802
37021
  }
36803
37022
  )
@@ -36807,35 +37026,37 @@ var TargetsViewUI = ({
36807
37026
  {
36808
37027
  className: "bg-white rounded-xl border border-gray-200 shadow-sm hover:shadow-md transition-all duration-200",
36809
37028
  children: [
36810
- /* @__PURE__ */ jsx("div", { className: "px-6 py-4", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
36811
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-6", children: [
37029
+ /* @__PURE__ */ jsx("div", { className: "px-3 sm:px-4 md:px-6 py-3 sm:py-4", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col lg:flex-row lg:items-center justify-between gap-3 lg:gap-4", children: [
37030
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col sm:flex-row sm:items-center gap-3 sm:gap-4 lg:gap-6", children: [
36812
37031
  /* @__PURE__ */ jsxs(
36813
37032
  "button",
36814
37033
  {
36815
37034
  onClick: () => onToggleLineDropdown(lineId),
36816
- className: "flex items-center gap-3 text-lg font-medium transition-colors duration-200 \n focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 rounded-lg \n hover:bg-blue-50 px-3 py-2 group",
37035
+ className: "flex items-center gap-2 sm:gap-3 text-base sm:text-lg font-medium transition-colors duration-200 \n focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 rounded-lg \n hover:bg-blue-50 px-2 sm:px-3 py-2 group self-start",
36817
37036
  "aria-expanded": dropdownStates[lineId],
36818
37037
  "aria-controls": `line-${lineId}-content`,
36819
37038
  children: [
36820
37039
  /* @__PURE__ */ jsx(
36821
37040
  ChevronDown,
36822
37041
  {
36823
- className: `w-5 h-5 text-blue-500 transform transition-transform duration-200 ${dropdownStates[lineId] ? "rotate-180" : ""}`
37042
+ className: `w-4 h-4 sm:w-5 sm:h-5 text-blue-500 transform transition-transform duration-200 ${dropdownStates[lineId] ? "rotate-180" : ""}`
36824
37043
  }
36825
37044
  ),
36826
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5", children: [
36827
- /* @__PURE__ */ jsx("span", { className: "text-lg text-gray-900 group-hover:text-blue-600", children: lineNames[lineId] || lineId }),
36828
- /* @__PURE__ */ jsx("span", { className: "text-sm font-normal text-gray-400", children: "\u2022" }),
36829
- /* @__PURE__ */ jsxs("span", { className: "text-sm font-medium text-gray-500", children: [
36830
- line.workspaces.length,
36831
- " workspaces"
37045
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col sm:flex-row sm:items-center gap-1 sm:gap-2.5", children: [
37046
+ /* @__PURE__ */ jsx("span", { className: "text-base sm:text-lg text-gray-900 group-hover:text-blue-600", children: lineNames[lineId] || lineId }),
37047
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
37048
+ /* @__PURE__ */ jsx("span", { className: "hidden sm:inline text-sm font-normal text-gray-400", children: "\u2022" }),
37049
+ /* @__PURE__ */ jsxs("span", { className: "text-xs sm:text-sm font-medium text-gray-500", children: [
37050
+ line.workspaces.length,
37051
+ " workspaces"
37052
+ ] })
36832
37053
  ] })
36833
37054
  ] })
36834
37055
  ]
36835
37056
  }
36836
37057
  ),
36837
- /* @__PURE__ */ jsx("div", { className: "h-8 w-px bg-gray-200/80" }),
36838
- /* @__PURE__ */ jsx("div", { className: "flex items-center gap-3", children: /* @__PURE__ */ jsxs("div", { className: "ml-4 text-sm font-medium text-gray-600", children: [
37058
+ /* @__PURE__ */ jsx("div", { className: "hidden lg:block h-8 w-px bg-gray-200/80" }),
37059
+ /* @__PURE__ */ jsx("div", { className: "flex items-center gap-3 ml-0 sm:ml-2 lg:ml-4", children: /* @__PURE__ */ jsxs("div", { className: "text-xs sm:text-sm font-medium text-gray-600", children: [
36839
37060
  line.shiftStartTime,
36840
37061
  " \u2013 ",
36841
37062
  line.shiftEndTime,
@@ -36844,9 +37065,9 @@ var TargetsViewUI = ({
36844
37065
  " hours"
36845
37066
  ] }) })
36846
37067
  ] }),
36847
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
36848
- saveSuccess[lineId] && /* @__PURE__ */ jsxs("span", { className: "text-sm text-green-600 font-medium flex items-center gap-1.5", children: [
36849
- /* @__PURE__ */ jsx(CheckCircle2, { className: "w-4 h-4" }),
37068
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col sm:flex-row items-start sm:items-center gap-2 sm:gap-4", children: [
37069
+ saveSuccess[lineId] && /* @__PURE__ */ jsxs("span", { className: "text-xs sm:text-sm text-green-600 font-medium flex items-center gap-1.5", children: [
37070
+ /* @__PURE__ */ jsx(CheckCircle2, { className: "w-3 h-3 sm:w-4 sm:h-4" }),
36850
37071
  "Saved successfully"
36851
37072
  ] }),
36852
37073
  /* @__PURE__ */ jsx(
@@ -36854,13 +37075,13 @@ var TargetsViewUI = ({
36854
37075
  {
36855
37076
  onClick: () => onSaveLine(lineId),
36856
37077
  disabled: savingLines[lineId],
36857
- className: `ml-6 inline-flex items-center px-4 py-2 text-sm font-medium rounded-lg transition-all duration-200
37078
+ className: `inline-flex items-center px-3 sm:px-4 py-1.5 sm:py-2 text-xs sm:text-sm font-medium rounded-lg transition-all duration-200
36858
37079
  ${savingLines[lineId] ? "bg-gray-100 text-gray-400 cursor-not-allowed" : "bg-blue-600 text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"}`,
36859
37080
  children: savingLines[lineId] ? /* @__PURE__ */ jsxs(Fragment, { children: [
36860
- /* @__PURE__ */ jsx(OptifyeLogoLoader_default, { size: "sm", className: "mr-2" }),
37081
+ /* @__PURE__ */ jsx(OptifyeLogoLoader_default, { size: "sm", className: "mr-1.5 sm:mr-2" }),
36861
37082
  "Saving..."
36862
37083
  ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
36863
- /* @__PURE__ */ jsx(Save, { className: "w-4 h-4 mr-2" }),
37084
+ /* @__PURE__ */ jsx(Save, { className: "w-3 h-3 sm:w-4 sm:h-4 mr-1.5 sm:mr-2" }),
36864
37085
  "Save Changes"
36865
37086
  ] })
36866
37087
  }
@@ -36868,9 +37089,9 @@ var TargetsViewUI = ({
36868
37089
  ] })
36869
37090
  ] }) }),
36870
37091
  dropdownStates[lineId] && /* @__PURE__ */ jsxs("div", { id: `line-${lineId}-content`, className: "border-t border-gray-200", children: [
36871
- skuEnabled && /* @__PURE__ */ jsx("div", { className: "px-6 py-4 border-b border-gray-200 bg-gray-50/50", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
36872
- /* @__PURE__ */ jsx("label", { htmlFor: `sku-${lineId}`, className: "text-sm font-medium text-gray-700", children: "Select SKU:" }),
36873
- /* @__PURE__ */ jsx("div", { className: "flex-1 max-w-md", children: /* @__PURE__ */ jsx(
37092
+ skuEnabled && /* @__PURE__ */ jsx("div", { className: "px-3 sm:px-4 lg:px-6 py-3 sm:py-4 border-b border-gray-200 bg-gray-50/50", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col sm:flex-row sm:items-center gap-3 sm:gap-4", children: [
37093
+ /* @__PURE__ */ jsx("label", { htmlFor: `sku-${lineId}`, className: "text-sm font-medium text-gray-700 flex-shrink-0", children: "Select SKU:" }),
37094
+ /* @__PURE__ */ jsx("div", { className: "flex-1 max-w-full sm:max-w-md", children: /* @__PURE__ */ jsx(
36874
37095
  SKUSelector,
36875
37096
  {
36876
37097
  onSelect: (sku) => onUpdateSelectedSKU?.(lineId, sku),
@@ -36881,14 +37102,14 @@ var TargetsViewUI = ({
36881
37102
  className: "w-full"
36882
37103
  }
36883
37104
  ) }),
36884
- line.selectedSKU && /* @__PURE__ */ jsxs("div", { className: "text-sm text-gray-600", children: [
37105
+ line.selectedSKU && /* @__PURE__ */ jsxs("div", { className: "text-xs sm:text-sm text-gray-600 mt-2 sm:mt-0", children: [
36885
37106
  /* @__PURE__ */ jsx("span", { className: "font-medium", children: "Production Target:" }),
36886
37107
  " ",
36887
37108
  line.selectedSKU.production_target.toLocaleString(),
36888
37109
  " units/day"
36889
37110
  ] })
36890
37111
  ] }) }),
36891
- /* @__PURE__ */ jsx("div", { className: "px-6 py-3 bg-gray-50 border-b border-gray-200", children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-12 gap-6 text-sm font-medium text-gray-600", children: [
37112
+ /* @__PURE__ */ jsx("div", { className: "hidden lg:block px-6 py-3 bg-gray-50 border-b border-gray-200", children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-12 gap-6 text-sm font-medium text-gray-600", children: [
36892
37113
  /* @__PURE__ */ jsx("div", { className: "col-span-2", children: "Workspace" }),
36893
37114
  /* @__PURE__ */ jsx("div", { className: "col-span-2", children: "Action Type" }),
36894
37115
  /* @__PURE__ */ jsxs("div", { className: "col-span-3", children: [
@@ -36906,76 +37127,170 @@ var TargetsViewUI = ({
36906
37127
  ] }) }),
36907
37128
  /* @__PURE__ */ jsx("div", { className: "divide-y divide-gray-100", children: line.workspaces.map((workspace) => {
36908
37129
  const formattedName = formatWorkspaceName(workspace.name, lineId);
36909
- return /* @__PURE__ */ jsx(
37130
+ return /* @__PURE__ */ jsxs(
36910
37131
  "div",
36911
37132
  {
36912
- className: "px-6 py-4 hover:bg-gray-50 transition-all duration-200",
36913
- children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-12 gap-6 items-center", children: [
36914
- /* @__PURE__ */ jsx("div", { className: "col-span-2", children: onUpdateWorkspaceDisplayName ? /* @__PURE__ */ jsx(
36915
- InlineEditableText,
36916
- {
36917
- value: formattedName,
36918
- onSave: async (newName) => {
36919
- await onUpdateWorkspaceDisplayName(workspace.id, newName);
36920
- },
36921
- placeholder: "Workspace name",
36922
- className: "font-medium text-gray-900",
36923
- inputClassName: "min-w-[120px]"
36924
- }
36925
- ) : /* @__PURE__ */ jsx("span", { className: "font-medium text-gray-900", children: formattedName }) }),
36926
- /* @__PURE__ */ jsx("div", { className: "col-span-2", children: /* @__PURE__ */ jsxs(
36927
- "select",
36928
- {
36929
- value: workspace.actionType,
36930
- onChange: (e) => {
36931
- const newActionType = e.target.value;
36932
- onActionTypeChange(lineId, workspace.id, newActionType);
36933
- },
36934
- className: "w-full p-2 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm",
36935
- "aria-label": `Action type for ${formattedName}`,
36936
- children: [
36937
- /* @__PURE__ */ jsx("option", { value: "assembly", className: "py-2", children: "Assembly" }),
36938
- /* @__PURE__ */ jsx("option", { value: "packaging", className: "py-2", children: "Packaging" })
36939
- ]
36940
- }
36941
- ) }),
36942
- /* @__PURE__ */ jsx("div", { className: "col-span-3", children: /* @__PURE__ */ jsx(
36943
- "input",
36944
- {
36945
- type: "number",
36946
- value: workspace.targetCycleTime === 0 ? "" : workspace.targetCycleTime,
36947
- onChange: (e) => onUpdateWorkspaceTarget(lineId, workspace.id, "targetCycleTime", Number(e.target.value) || ""),
36948
- className: "block w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm\n shadow-sm focus:border-blue-500 focus:ring-blue-500 \n transition-all duration-200 hover:border-gray-400",
36949
- min: "0",
36950
- step: "0.01",
36951
- placeholder: "Enter cycle time"
36952
- }
36953
- ) }),
36954
- /* @__PURE__ */ jsx("div", { className: "col-span-3", children: /* @__PURE__ */ jsx(
36955
- "input",
36956
- {
36957
- type: "number",
36958
- value: workspace.targetPPH === 0 ? "" : workspace.targetPPH,
36959
- onChange: (e) => onUpdateWorkspaceTarget(lineId, workspace.id, "targetPPH", Number(e.target.value) || ""),
36960
- className: "block w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm\n shadow-sm focus:border-blue-500 focus:ring-blue-500 \n transition-all duration-200 hover:border-gray-400 \n placeholder:text-gray-400",
36961
- min: "0",
36962
- step: "0.1",
36963
- placeholder: "Enter PPH"
36964
- }
36965
- ) }),
36966
- /* @__PURE__ */ jsx("div", { className: "col-span-2", children: /* @__PURE__ */ jsx(
36967
- "input",
36968
- {
36969
- type: "number",
36970
- value: workspace.targetDayOutput === 0 ? "" : workspace.targetDayOutput,
36971
- onChange: (e) => onUpdateWorkspaceTarget(lineId, workspace.id, "targetDayOutput", Number(e.target.value) || ""),
36972
- className: "block w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm\n shadow-sm focus:border-blue-500 focus:ring-blue-500 \n transition-all duration-200 hover:border-gray-400 \n placeholder:text-gray-400",
36973
- min: "0",
36974
- step: "1",
36975
- placeholder: "Enter day output"
36976
- }
36977
- ) })
36978
- ] })
37133
+ className: "px-3 sm:px-4 lg:px-6 py-3 sm:py-4 hover:bg-gray-50 transition-all duration-200",
37134
+ children: [
37135
+ /* @__PURE__ */ jsxs("div", { className: "hidden lg:grid lg:grid-cols-12 lg:gap-6 lg:items-center", children: [
37136
+ /* @__PURE__ */ jsx("div", { className: "col-span-2", children: onUpdateWorkspaceDisplayName ? /* @__PURE__ */ jsx(
37137
+ InlineEditableText,
37138
+ {
37139
+ value: formattedName,
37140
+ onSave: async (newName) => {
37141
+ await onUpdateWorkspaceDisplayName(workspace.id, newName);
37142
+ },
37143
+ placeholder: "Workspace name",
37144
+ className: "font-medium text-gray-900",
37145
+ inputClassName: "min-w-[120px]"
37146
+ }
37147
+ ) : /* @__PURE__ */ jsx("span", { className: "font-medium text-gray-900", children: formattedName }) }),
37148
+ /* @__PURE__ */ jsx("div", { className: "col-span-2", children: /* @__PURE__ */ jsxs(
37149
+ "select",
37150
+ {
37151
+ value: workspace.actionType,
37152
+ onChange: (e) => {
37153
+ const newActionType = e.target.value;
37154
+ onActionTypeChange(lineId, workspace.id, newActionType);
37155
+ },
37156
+ className: "w-full p-2 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm",
37157
+ "aria-label": `Action type for ${formattedName}`,
37158
+ children: [
37159
+ /* @__PURE__ */ jsx("option", { value: "assembly", className: "py-2", children: "Assembly" }),
37160
+ /* @__PURE__ */ jsx("option", { value: "packaging", className: "py-2", children: "Packaging" })
37161
+ ]
37162
+ }
37163
+ ) }),
37164
+ /* @__PURE__ */ jsx("div", { className: "col-span-3", children: /* @__PURE__ */ jsx(
37165
+ "input",
37166
+ {
37167
+ type: "number",
37168
+ value: workspace.targetCycleTime === 0 ? "" : workspace.targetCycleTime,
37169
+ onChange: (e) => onUpdateWorkspaceTarget(lineId, workspace.id, "targetCycleTime", Number(e.target.value) || ""),
37170
+ 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",
37171
+ min: "0",
37172
+ step: "0.01",
37173
+ placeholder: "Enter cycle time"
37174
+ }
37175
+ ) }),
37176
+ /* @__PURE__ */ jsx("div", { className: "col-span-3", children: /* @__PURE__ */ jsx(
37177
+ "input",
37178
+ {
37179
+ type: "number",
37180
+ value: workspace.targetPPH === 0 ? "" : workspace.targetPPH,
37181
+ onChange: (e) => onUpdateWorkspaceTarget(lineId, workspace.id, "targetPPH", Number(e.target.value) || ""),
37182
+ 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",
37183
+ min: "0",
37184
+ step: "0.1",
37185
+ placeholder: "Enter PPH"
37186
+ }
37187
+ ) }),
37188
+ /* @__PURE__ */ jsx("div", { className: "col-span-2", children: /* @__PURE__ */ jsx(
37189
+ "input",
37190
+ {
37191
+ type: "number",
37192
+ value: workspace.targetDayOutput === 0 ? "" : workspace.targetDayOutput,
37193
+ onChange: (e) => onUpdateWorkspaceTarget(lineId, workspace.id, "targetDayOutput", Number(e.target.value) || ""),
37194
+ 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",
37195
+ min: "0",
37196
+ step: "1",
37197
+ placeholder: "Enter day output"
37198
+ }
37199
+ ) })
37200
+ ] }),
37201
+ /* @__PURE__ */ jsxs("div", { className: "lg:hidden space-y-4", children: [
37202
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
37203
+ /* @__PURE__ */ jsx("label", { className: "text-sm font-medium text-gray-700", children: "Workspace" }),
37204
+ onUpdateWorkspaceDisplayName ? /* @__PURE__ */ jsx(
37205
+ InlineEditableText,
37206
+ {
37207
+ value: formattedName,
37208
+ onSave: async (newName) => {
37209
+ await onUpdateWorkspaceDisplayName(workspace.id, newName);
37210
+ },
37211
+ placeholder: "Workspace name",
37212
+ className: "font-medium text-gray-900 text-base",
37213
+ inputClassName: "min-w-full"
37214
+ }
37215
+ ) : /* @__PURE__ */ jsx("span", { className: "font-medium text-gray-900 text-base", children: formattedName })
37216
+ ] }),
37217
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
37218
+ /* @__PURE__ */ jsx("label", { className: "text-sm font-medium text-gray-700", children: "Action Type" }),
37219
+ /* @__PURE__ */ jsxs(
37220
+ "select",
37221
+ {
37222
+ value: workspace.actionType,
37223
+ onChange: (e) => {
37224
+ const newActionType = e.target.value;
37225
+ onActionTypeChange(lineId, workspace.id, newActionType);
37226
+ },
37227
+ className: "w-full p-3 border border-gray-300 rounded-lg shadow-sm focus:ring-blue-500 focus:border-blue-500 text-sm",
37228
+ "aria-label": `Action type for ${formattedName}`,
37229
+ children: [
37230
+ /* @__PURE__ */ jsx("option", { value: "assembly", children: "Assembly" }),
37231
+ /* @__PURE__ */ jsx("option", { value: "packaging", children: "Packaging" })
37232
+ ]
37233
+ }
37234
+ )
37235
+ ] }),
37236
+ /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-4", children: [
37237
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
37238
+ /* @__PURE__ */ jsxs("label", { className: "text-sm font-medium text-gray-700", children: [
37239
+ "Target Cycle Time",
37240
+ /* @__PURE__ */ jsx("span", { className: "block text-xs text-gray-400", children: "seconds per piece" })
37241
+ ] }),
37242
+ /* @__PURE__ */ jsx(
37243
+ "input",
37244
+ {
37245
+ type: "number",
37246
+ value: workspace.targetCycleTime === 0 ? "" : workspace.targetCycleTime,
37247
+ onChange: (e) => onUpdateWorkspaceTarget(lineId, workspace.id, "targetCycleTime", Number(e.target.value) || ""),
37248
+ 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",
37249
+ min: "0",
37250
+ step: "0.01",
37251
+ placeholder: "Enter cycle time"
37252
+ }
37253
+ )
37254
+ ] }),
37255
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
37256
+ /* @__PURE__ */ jsxs("label", { className: "text-sm font-medium text-gray-700", children: [
37257
+ "Target PPH",
37258
+ /* @__PURE__ */ jsx("span", { className: "block text-xs text-gray-400", children: "pieces per hour" })
37259
+ ] }),
37260
+ /* @__PURE__ */ jsx(
37261
+ "input",
37262
+ {
37263
+ type: "number",
37264
+ value: workspace.targetPPH === 0 ? "" : workspace.targetPPH,
37265
+ onChange: (e) => onUpdateWorkspaceTarget(lineId, workspace.id, "targetPPH", Number(e.target.value) || ""),
37266
+ 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",
37267
+ min: "0",
37268
+ step: "0.1",
37269
+ placeholder: "Enter PPH"
37270
+ }
37271
+ )
37272
+ ] })
37273
+ ] }),
37274
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
37275
+ /* @__PURE__ */ jsxs("label", { className: "text-sm font-medium text-gray-700", children: [
37276
+ "Total Day Output",
37277
+ /* @__PURE__ */ jsx("span", { className: "block text-xs text-gray-400", children: "pieces per day" })
37278
+ ] }),
37279
+ /* @__PURE__ */ jsx(
37280
+ "input",
37281
+ {
37282
+ type: "number",
37283
+ value: workspace.targetDayOutput === 0 ? "" : workspace.targetDayOutput,
37284
+ onChange: (e) => onUpdateWorkspaceTarget(lineId, workspace.id, "targetDayOutput", Number(e.target.value) || ""),
37285
+ 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",
37286
+ min: "0",
37287
+ step: "1",
37288
+ placeholder: "Enter day output"
37289
+ }
37290
+ )
37291
+ ] })
37292
+ ] })
37293
+ ]
36979
37294
  },
36980
37295
  workspace.id
36981
37296
  );
@@ -38081,9 +38396,9 @@ var WorkspaceDetailView = ({
38081
38396
  animate: { opacity: 1 },
38082
38397
  transition: { duration: 0.3 },
38083
38398
  children: /* @__PURE__ */ jsxs("div", { className: "min-h-screen w-full flex flex-col bg-slate-50", children: [
38084
- /* @__PURE__ */ jsx("header", { className: "sticky top-0 z-10 px-2 sm:px-2.5 lg:px-3 py-1.5 sm:py-2 lg:py-3 flex flex-col shadow-sm bg-white", children: /* @__PURE__ */ jsxs("div", { className: "relative flex items-center", children: [
38085
- /* @__PURE__ */ jsx("div", { className: "absolute left-0 animate-pulse", children: /* @__PURE__ */ jsx("div", { className: "h-8 w-20 bg-gray-200 rounded" }) }),
38086
- /* @__PURE__ */ jsx("div", { className: "absolute left-1/2 transform -translate-x-1/2 animate-pulse", children: /* @__PURE__ */ jsx("div", { className: "h-6 w-40 bg-gray-200 rounded" }) }),
38399
+ /* @__PURE__ */ jsx("header", { className: "sticky top-0 z-10 px-3 sm:px-4 md:px-5 lg:px-6 py-2 sm:py-2.5 lg:py-3 flex flex-col shadow-sm bg-white", children: /* @__PURE__ */ jsxs("div", { className: "relative flex items-center", children: [
38400
+ /* @__PURE__ */ jsx("div", { className: "absolute left-0 animate-pulse", children: /* @__PURE__ */ jsx("div", { className: "h-6 sm:h-7 md:h-8 w-16 sm:w-20 bg-gray-200 rounded" }) }),
38401
+ /* @__PURE__ */ jsx("div", { className: "absolute left-1/2 transform -translate-x-1/2 animate-pulse max-w-[calc(100%-160px)] sm:max-w-[calc(100%-200px)]", children: /* @__PURE__ */ jsx("div", { className: "h-5 sm:h-6 md:h-7 w-28 sm:w-36 md:w-40 bg-gray-200 rounded" }) }),
38087
38402
  /* @__PURE__ */ jsx("div", { className: "w-full h-8" })
38088
38403
  ] }) }),
38089
38404
  /* @__PURE__ */ jsxs("div", { className: "flex-1 p-4 sm:p-6 lg:p-8", children: [
@@ -38144,7 +38459,7 @@ var WorkspaceDetailView = ({
38144
38459
  animate: { opacity: 1 },
38145
38460
  children: [
38146
38461
  /* @__PURE__ */ jsxs("div", { className: "min-h-screen w-full flex flex-col bg-slate-50", children: [
38147
- /* @__PURE__ */ jsxs("header", { className: "sticky top-0 z-10 px-2 sm:px-2.5 lg:px-3 py-1.5 sm:py-2 lg:py-3 flex flex-col shadow-sm bg-white", children: [
38462
+ /* @__PURE__ */ jsxs("header", { className: "sticky top-0 z-10 px-3 sm:px-4 md:px-5 lg:px-6 py-2 sm:py-2.5 lg:py-3 flex flex-col shadow-sm bg-white", children: [
38148
38463
  /* @__PURE__ */ jsxs("div", { className: "relative flex items-center", children: [
38149
38464
  /* @__PURE__ */ jsx("div", { className: "absolute left-0 z-10", children: /* @__PURE__ */ jsx(
38150
38465
  BackButtonMinimal,
@@ -38155,8 +38470,8 @@ var WorkspaceDetailView = ({
38155
38470
  "aria-label": "Navigate back to previous page"
38156
38471
  }
38157
38472
  ) }),
38158
- /* @__PURE__ */ jsx("div", { className: "absolute left-1/2 transform -translate-x-1/2", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
38159
- /* @__PURE__ */ jsx("h1", { className: "text-3xl font-semibold text-gray-900", children: formattedWorkspaceName }),
38473
+ /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex items-center gap-2 sm:gap-3", children: [
38474
+ /* @__PURE__ */ 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 }),
38160
38475
  workspaceHealth && /* @__PURE__ */ jsxs("div", { className: "relative flex h-2.5 w-2.5", children: [
38161
38476
  /* @__PURE__ */ jsx("span", { className: clsx(
38162
38477
  "animate-ping absolute inline-flex h-full w-full rounded-full opacity-75",
@@ -38168,18 +38483,18 @@ var WorkspaceDetailView = ({
38168
38483
  ) })
38169
38484
  ] })
38170
38485
  ] }) }),
38171
- workspaceHealth && activeTab !== "monthly_history" && /* @__PURE__ */ jsx("div", { className: "absolute right-0 top-0 flex items-center h-8", children: /* @__PURE__ */ jsxs("span", { className: "text-xs text-gray-500", children: [
38486
+ workspaceHealth && activeTab !== "monthly_history" && /* @__PURE__ */ jsx("div", { className: "absolute right-0 top-0 flex items-center h-8", children: /* @__PURE__ */ jsxs("span", { className: "text-[10px] sm:text-xs text-gray-500 hidden sm:block", children: [
38172
38487
  "Last update: ",
38173
38488
  workspaceHealth.timeSinceLastUpdate
38174
38489
  ] }) }),
38175
38490
  /* @__PURE__ */ jsx("div", { className: "w-full h-8" })
38176
38491
  ] }),
38177
- activeTab !== "monthly_history" && /* @__PURE__ */ jsx("div", { className: "mt-3 bg-blue-50 px-3 py-2 rounded-lg", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-4", children: [
38492
+ activeTab !== "monthly_history" && /* @__PURE__ */ jsx("div", { className: "mt-2 sm:mt-3 bg-blue-50 px-2 sm:px-3 py-1.5 sm:py-2 rounded-lg", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-center gap-2 sm:gap-3 md:gap-4", children: [
38178
38493
  !date && !shift && !usingFallbackData && /* @__PURE__ */ jsxs(Fragment, { children: [
38179
- /* @__PURE__ */ jsx("div", { className: "text-lg font-medium text-blue-600", children: /* @__PURE__ */ jsx(LiveTimer, {}) }),
38494
+ /* @__PURE__ */ jsx("div", { className: "text-sm sm:text-base md:text-lg font-medium text-blue-600", children: /* @__PURE__ */ jsx(LiveTimer, {}) }),
38180
38495
  /* @__PURE__ */ jsx("div", { className: "w-px h-4 bg-blue-300" })
38181
38496
  ] }),
38182
- /* @__PURE__ */ jsx("span", { className: "text-base font-medium text-blue-600", children: formatISTDate2(new Date(workspace.date)) }),
38497
+ /* @__PURE__ */ jsx("span", { className: "text-xs sm:text-sm md:text-base font-medium text-blue-600", children: formatISTDate2(new Date(workspace.date)) }),
38183
38498
  /* @__PURE__ */ jsx("div", { className: "w-px h-4 bg-blue-300" }),
38184
38499
  date && /* @__PURE__ */ jsxs(Fragment, { children: [
38185
38500
  /* @__PURE__ */ jsx("span", { className: "px-2 py-1 text-xs font-medium bg-blue-200 text-blue-800 rounded-md", children: getDaysDifference(workspace.date) }),
@@ -38674,8 +38989,8 @@ var SKUManagementView = () => {
38674
38989
  ] }) });
38675
38990
  }
38676
38991
  return /* @__PURE__ */ jsxs("div", { className: "min-h-screen bg-slate-50", children: [
38677
- /* @__PURE__ */ jsx("div", { className: "sticky top-0 z-10 bg-white border-b border-gray-200/80 shadow-sm", children: /* @__PURE__ */ jsx("div", { className: "px-4 sm:px-8 py-4", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center relative", children: [
38678
- /* @__PURE__ */ jsx("div", { className: "absolute left-0", children: /* @__PURE__ */ jsx(
38992
+ /* @__PURE__ */ jsx("div", { className: "sticky top-0 z-10 bg-white border-b border-gray-200/80 shadow-sm", children: /* @__PURE__ */ jsx("div", { className: "px-3 sm:px-4 md:px-6 lg:px-8 py-3 sm:py-4", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3 sm:gap-4 relative", children: [
38993
+ /* @__PURE__ */ jsx("div", { className: "sm:absolute sm:left-0", children: /* @__PURE__ */ jsx(
38679
38994
  BackButtonMinimal,
38680
38995
  {
38681
38996
  onClick: handleBack,
@@ -38684,24 +38999,24 @@ var SKUManagementView = () => {
38684
38999
  "aria-label": "Navigate back to previous page"
38685
39000
  }
38686
39001
  ) }),
38687
- /* @__PURE__ */ jsxs("div", { className: "flex-1 text-center mx-auto", children: [
38688
- /* @__PURE__ */ jsx("h1", { className: "text-3xl font-semibold text-gray-900", children: "SKU Management" }),
38689
- /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-gray-500", children: "Manage Stock Keeping Units (SKUs) for production planning" })
39002
+ /* @__PURE__ */ jsxs("div", { className: "flex-1 text-center mx-auto mt-2 sm:mt-0", children: [
39003
+ /* @__PURE__ */ jsx("h1", { className: "text-lg sm:text-xl md:text-2xl lg:text-3xl font-semibold text-gray-900", children: "SKU Management" }),
39004
+ /* @__PURE__ */ jsx("p", { className: "mt-0.5 sm:mt-1 text-xs sm:text-sm text-gray-500 px-2 sm:px-0", children: "Manage Stock Keeping Units (SKUs) for production planning" })
38690
39005
  ] }),
38691
39006
  /* @__PURE__ */ jsxs(
38692
39007
  "button",
38693
39008
  {
38694
39009
  onClick: handleAddNew,
38695
- className: "absolute right-0 inline-flex items-center px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-all duration-200 shadow-sm",
39010
+ className: "sm:absolute sm:right-0 w-full sm:w-auto inline-flex items-center justify-center px-3 sm:px-4 py-2 bg-blue-600 text-white text-xs sm:text-sm font-medium rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-all duration-200 shadow-sm",
38696
39011
  children: [
38697
- /* @__PURE__ */ jsx(Plus, { className: "w-4 h-4 mr-2" }),
39012
+ /* @__PURE__ */ jsx(Plus, { className: "w-3 h-3 sm:w-4 sm:h-4 mr-1.5 sm:mr-2" }),
38698
39013
  "Add SKU"
38699
39014
  ]
38700
39015
  }
38701
39016
  )
38702
39017
  ] }) }) }),
38703
- /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-auto", children: /* @__PURE__ */ jsxs("div", { className: "px-4 sm:px-8 py-6", children: [
38704
- /* @__PURE__ */ jsx("div", { className: "mb-6 bg-gradient-to-r from-blue-50 to-blue-50/50 p-4 rounded-xl border border-blue-100", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-blue-700 font-medium", children: "Create and manage SKUs with production targets. These will be available for selection in the production targets page." }) }),
39018
+ /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-auto", children: /* @__PURE__ */ jsxs("div", { className: "px-3 sm:px-4 md:px-6 lg:px-8 py-4 sm:py-6", children: [
39019
+ /* @__PURE__ */ jsx("div", { className: "mb-4 sm:mb-6 bg-gradient-to-r from-blue-50 to-blue-50/50 p-3 sm:p-4 rounded-xl border border-blue-100", children: /* @__PURE__ */ jsx("p", { className: "text-xs sm:text-sm text-blue-700 font-medium text-center sm:text-left", children: "Create and manage SKUs with production targets. These will be available for selection in the production targets page." }) }),
38705
39020
  error ? /* @__PURE__ */ jsxs("div", { className: "bg-red-50 border border-red-200 text-red-700 p-4 rounded-lg", children: [
38706
39021
  /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: "Error loading SKUs" }),
38707
39022
  /* @__PURE__ */ jsx("p", { className: "text-sm mt-1", children: error.message })
@@ -38841,8 +39156,50 @@ var WorkspaceHealthView = ({
38841
39156
  ] }) }) }) });
38842
39157
  }
38843
39158
  return /* @__PURE__ */ jsxs("div", { className: clsx("min-h-screen bg-slate-50", className), children: [
38844
- /* @__PURE__ */ jsxs("header", { className: "sticky top-0 z-10 px-2 sm:px-2.5 lg:px-3 py-1.5 sm:py-2 lg:py-3 flex flex-col shadow-sm bg-white", children: [
38845
- /* @__PURE__ */ jsxs("div", { className: "relative flex items-center", children: [
39159
+ /* @__PURE__ */ jsxs("header", { className: "sticky top-0 z-10 px-3 sm:px-4 md:px-5 lg:px-6 py-2 sm:py-2.5 lg:py-3 flex flex-col shadow-sm bg-white", children: [
39160
+ /* @__PURE__ */ jsxs("div", { className: "sm:hidden", children: [
39161
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-2", children: [
39162
+ /* @__PURE__ */ jsx(
39163
+ BackButtonMinimal,
39164
+ {
39165
+ onClick: () => router.push("/"),
39166
+ text: "Back",
39167
+ size: "sm",
39168
+ "aria-label": "Navigate back to dashboard"
39169
+ }
39170
+ ),
39171
+ /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
39172
+ /* @__PURE__ */ jsx(
39173
+ "button",
39174
+ {
39175
+ onClick: () => {
39176
+ refetch();
39177
+ },
39178
+ className: "p-1.5 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors",
39179
+ "aria-label": "Refresh",
39180
+ children: /* @__PURE__ */ jsx(RefreshCw, { className: "h-4 w-4" })
39181
+ }
39182
+ ),
39183
+ /* @__PURE__ */ jsx(
39184
+ "button",
39185
+ {
39186
+ onClick: handleExport,
39187
+ className: "p-1.5 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors",
39188
+ "aria-label": "Export CSV",
39189
+ children: /* @__PURE__ */ jsx(Download, { className: "h-4 w-4" })
39190
+ }
39191
+ )
39192
+ ] })
39193
+ ] }),
39194
+ /* @__PURE__ */ jsx("div", { className: "text-center", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-2", children: [
39195
+ /* @__PURE__ */ jsx("h1", { className: "text-base font-semibold text-gray-900", children: "System Health" }),
39196
+ /* @__PURE__ */ jsxs("div", { className: "relative flex h-2 w-2", children: [
39197
+ /* @__PURE__ */ jsx("span", { className: "animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75" }),
39198
+ /* @__PURE__ */ jsx("span", { className: "relative inline-flex rounded-full h-2 w-2 bg-emerald-500" })
39199
+ ] })
39200
+ ] }) })
39201
+ ] }),
39202
+ /* @__PURE__ */ jsx("div", { className: "hidden sm:block", children: /* @__PURE__ */ jsxs("div", { className: "relative flex items-center", children: [
38846
39203
  /* @__PURE__ */ jsx("div", { className: "absolute left-0 z-10", children: /* @__PURE__ */ jsx(
38847
39204
  BackButtonMinimal,
38848
39205
  {
@@ -38852,8 +39209,8 @@ var WorkspaceHealthView = ({
38852
39209
  "aria-label": "Navigate back to dashboard"
38853
39210
  }
38854
39211
  ) }),
38855
- /* @__PURE__ */ jsx("div", { className: "absolute left-1/2 transform -translate-x-1/2", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
38856
- /* @__PURE__ */ jsx("h1", { className: "text-3xl font-semibold text-gray-900", children: "System Health" }),
39212
+ /* @__PURE__ */ jsx("div", { className: "absolute left-1/2 transform -translate-x-1/2 max-w-[calc(100%-200px)]", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
39213
+ /* @__PURE__ */ jsx("h1", { className: "text-lg md:text-xl lg:text-2xl xl:text-3xl font-semibold text-gray-900 truncate", children: "System Health" }),
38857
39214
  /* @__PURE__ */ jsxs("div", { className: "relative flex h-2.5 w-2.5", children: [
38858
39215
  /* @__PURE__ */ jsx("span", { className: "animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75" }),
38859
39216
  /* @__PURE__ */ jsx("span", { className: "relative inline-flex rounded-full h-2.5 w-2.5 bg-emerald-500" })
@@ -38882,15 +39239,15 @@ var WorkspaceHealthView = ({
38882
39239
  )
38883
39240
  ] }),
38884
39241
  /* @__PURE__ */ jsx("div", { className: "w-full h-8" })
38885
- ] }),
38886
- /* @__PURE__ */ jsx("div", { className: "mt-3 bg-blue-50 px-3 py-2 rounded-lg", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-4", children: [
38887
- /* @__PURE__ */ jsx("div", { className: "text-lg font-medium text-blue-600", children: /* @__PURE__ */ jsx(LiveTimer, {}) }),
38888
- /* @__PURE__ */ jsx("div", { className: "w-px h-4 bg-blue-300" }),
38889
- /* @__PURE__ */ jsx("span", { className: "text-base font-medium text-blue-600", children: formatDate(operationalDate) }),
38890
- /* @__PURE__ */ jsx("div", { className: "w-px h-4 bg-blue-300" }),
38891
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
39242
+ ] }) }),
39243
+ /* @__PURE__ */ jsx("div", { className: "mt-2 sm:mt-3 bg-blue-50 px-2 sm:px-3 py-1.5 sm:py-2 rounded-lg", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-center gap-2 sm:gap-4", children: [
39244
+ /* @__PURE__ */ jsx("div", { className: "text-sm sm:text-base md:text-lg font-medium text-blue-600", children: /* @__PURE__ */ jsx(LiveTimer, {}) }),
39245
+ /* @__PURE__ */ jsx("div", { className: "hidden sm:block w-px h-4 bg-blue-300" }),
39246
+ /* @__PURE__ */ jsx("span", { className: "text-xs sm:text-sm md:text-base font-medium text-blue-600", children: formatDate(operationalDate) }),
39247
+ /* @__PURE__ */ jsx("div", { className: "hidden sm:block w-px h-4 bg-blue-300" }),
39248
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 sm:gap-2", children: [
38892
39249
  /* @__PURE__ */ jsx("div", { className: "text-blue-600", children: getShiftIcon(shiftType) }),
38893
- /* @__PURE__ */ jsxs("span", { className: "text-base font-medium text-blue-600", children: [
39250
+ /* @__PURE__ */ jsxs("span", { className: "text-xs sm:text-sm md:text-base font-medium text-blue-600", children: [
38894
39251
  shiftType,
38895
39252
  " Shift"
38896
39253
  ] })