@optifye/dashboard-core 6.12.48 → 6.12.50

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.
@@ -2093,8 +2093,8 @@ var VideoCard = React__default.default.memo(({
2093
2093
  const efficiencyOverlayClass = videoGridColorState === "green" ? "bg-[#00D654]/25" : videoGridColorState === "blue" ? "bg-[#0EA5E9]/30" : videoGridColorState === "yellow" ? "bg-[#FFD700]/30" : videoGridColorState === "red" ? "bg-[#FF2D0A]/30" : "bg-transparent";
2094
2094
  const efficiencyBarClass = videoGridColorState === "green" ? "bg-[#00AB45]" : videoGridColorState === "blue" ? "bg-[#0EA5E9]" : videoGridColorState === "yellow" ? "bg-[#FFB020]" : videoGridColorState === "red" ? "bg-[#E34329]" : "bg-gray-500/70";
2095
2095
  const efficiencyStatus = videoGridColorState === "green" ? "High" : videoGridColorState === "blue" ? "Best" : videoGridColorState === "yellow" ? "Medium" : videoGridColorState === "red" ? "Low" : "Neutral";
2096
- const worstMarkerClassName = compact ? "left-1.5 top-1.5 gap-1.5 px-2 py-1 text-[11px]" : "left-2 top-2 gap-2 px-3 py-1.5 text-xs";
2097
- const statusBadgesPositionClass = isWorstPerformance ? compact ? "top-8 left-1.5 gap-1" : "top-10 left-2 gap-1.5" : compact ? "top-1.5 left-1.5 gap-1" : "top-2 left-2 gap-1.5";
2096
+ const worstMarkerClassName = compact ? "left-1 top-1 sm:left-1.5 sm:top-1.5 gap-1 sm:gap-1.5 p-1 sm:px-2 sm:py-1 text-[10px] sm:text-[11px]" : "left-1.5 top-1.5 sm:left-2 sm:top-2 gap-1 sm:gap-2 px-1.5 sm:px-3 py-0.5 sm:py-1.5 text-[10px] sm:text-xs";
2097
+ const statusBadgesPositionClass = isWorstPerformance ? compact ? "top-6 sm:top-8 left-1 sm:left-1.5 gap-1" : "top-7 sm:top-10 left-1.5 sm:left-2 gap-1 sm:gap-1.5" : compact ? "top-1 sm:top-1.5 left-1 sm:left-1.5 gap-1" : "top-1.5 sm:top-2 left-1.5 sm:left-2 gap-1 sm:gap-1.5";
2098
2098
  const trendInfo = workspace.trend !== void 0 ? getTrendArrowAndColor(workspace.trend) : null;
2099
2099
  const handleClick = React.useCallback(() => {
2100
2100
  trackCoreEvent("Workspace Card Clicked", {
@@ -2130,8 +2130,8 @@ var VideoCard = React__default.default.memo(({
2130
2130
  children: [
2131
2131
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-full h-full overflow-hidden bg-black", children: [
2132
2132
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-black z-0", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "animate-pulse flex flex-col items-center", children: [
2133
- /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Camera, { className: `w-5 h-5 sm:${compact ? "w-4 h-4" : "w-6 h-6"} text-gray-500` }),
2134
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: `text-[11px] sm:${compact ? "text-[10px]" : "text-xs"} text-gray-500 mt-1`, children: "Loading..." })
2133
+ /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Camera, { className: `w-5 h-5 ${compact ? "sm:w-4 sm:h-4" : "sm:w-6 sm:h-6"} text-gray-500` }),
2134
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: `text-[11px] ${compact ? "sm:text-[10px]" : "sm:text-xs"} text-gray-500 mt-1`, children: "Loading..." })
2135
2135
  ] }) }),
2136
2136
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute inset-0 z-10", children: [
2137
2137
  /* @__PURE__ */ jsxRuntime.jsx(
@@ -2193,7 +2193,7 @@ var VideoCard = React__default.default.memo(({
2193
2193
  "data-testid": `video-card-status-badge-${badge.kind}`,
2194
2194
  "aria-label": tooltipText,
2195
2195
  "aria-describedby": tooltipId,
2196
- className: `group relative inline-flex shrink-0 items-center justify-center rounded-full bg-slate-950/70 border-2 shadow-[0_3px_10px_rgba(0,0,0,0.34),inset_0_0_0_1px_rgba(255,255,255,0.18)] ${compact ? "h-10 w-10" : "h-11 w-11"}`,
2196
+ className: `group relative inline-flex shrink-0 items-center justify-center rounded-full bg-slate-950/70 border-2 shadow-[0_3px_10px_rgba(0,0,0,0.34),inset_0_0_0_1px_rgba(255,255,255,0.18)] ${compact ? "h-7 w-7 sm:h-10 sm:w-10" : "h-8 w-8 sm:h-11 sm:w-11"}`,
2197
2197
  style: {
2198
2198
  borderColor: presentation.hex
2199
2199
  },
@@ -2202,7 +2202,7 @@ var VideoCard = React__default.default.memo(({
2202
2202
  Icon,
2203
2203
  {
2204
2204
  "aria-hidden": "true",
2205
- className: `${compact ? "h-5 w-5" : "h-6 w-6"} text-white`,
2205
+ className: `${compact ? "h-4 w-4 sm:h-5 sm:w-5" : "h-4 w-4 sm:h-6 sm:w-6"} text-white`,
2206
2206
  strokeWidth: 2.4
2207
2207
  }
2208
2208
  ),
@@ -2230,10 +2230,10 @@ var VideoCard = React__default.default.memo(({
2230
2230
  "div",
2231
2231
  {
2232
2232
  "data-testid": "video-card-worst-performance-marker",
2233
- className: `pointer-events-none absolute z-[65] inline-flex items-center rounded-md bg-[#1A0B09]/95 border border-[#E34329]/60 font-semibold tracking-wide text-white shadow-xl ${worstMarkerClassName}`,
2233
+ className: `pointer-events-none absolute z-[65] inline-flex items-center rounded-sm sm:rounded-md bg-[#1A0B09]/95 border border-[#E34329]/60 font-semibold tracking-wide text-white shadow-xl max-w-[calc(100%-8px)] sm:max-w-[calc(100%-16px)] ${worstMarkerClassName}`,
2234
2234
  children: [
2235
- /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertTriangle, { className: `${compact ? "h-3.5 w-3.5" : "h-4 w-4"} text-[#E34329]`, "aria-hidden": "true" }),
2236
- /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Overall Underperformer" })
2235
+ /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertTriangle, { className: `${compact ? "h-3 w-3 sm:h-3.5 sm:w-3.5" : "h-3.5 w-3.5 sm:h-4 sm:w-4"} shrink-0 text-[#E34329]`, "aria-hidden": "true" }),
2236
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: `truncate leading-tight min-w-0 ${compact ? "hidden sm:block" : ""}`, children: "Overall Underperformer" })
2237
2237
  ]
2238
2238
  }
2239
2239
  ),
@@ -2246,10 +2246,10 @@ var VideoCard = React__default.default.memo(({
2246
2246
  }
2247
2247
  ) })
2248
2248
  ] }),
2249
- /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `absolute bottom-0 left-0 right-0 bg-black bg-opacity-60 p-1.5 sm:${compact ? "p-1" : "p-1.5"} flex min-w-0 justify-between items-center gap-1 z-10`, children: [
2249
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `absolute bottom-0 left-0 right-0 bg-black bg-opacity-60 p-1.5 ${compact ? "sm:p-1" : "sm:p-1.5"} flex min-w-0 justify-between items-center gap-1 z-10`, children: [
2250
2250
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 items-center gap-1.5", children: [
2251
2251
  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Camera, { size: compact ? 10 : 12, className: "shrink-0 text-white" }),
2252
- /* @__PURE__ */ jsxRuntime.jsx("p", { className: `min-w-0 truncate text-white text-[11px] sm:${compact ? "text-[10px]" : "text-xs"} font-medium tracking-wide`, children: workspaceDisplayName })
2252
+ /* @__PURE__ */ jsxRuntime.jsx("p", { className: `min-w-0 truncate text-white text-[11px] ${compact ? "sm:text-[10px]" : "sm:text-xs"} font-medium tracking-wide`, children: workspaceDisplayName })
2253
2253
  ] }),
2254
2254
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex shrink-0 items-center ${compact ? "gap-1" : "gap-1.5"}`, children: [
2255
2255
  trendInfo && /* @__PURE__ */ jsxRuntime.jsx(
@@ -2266,7 +2266,7 @@ var VideoCard = React__default.default.memo(({
2266
2266
  className: `${compact ? "w-1 h-1" : "w-1.5 h-1.5"} rounded-full ${showOffline ? "bg-red-500" : "bg-green-500"}`
2267
2267
  }
2268
2268
  ),
2269
- /* @__PURE__ */ jsxRuntime.jsx("span", { className: `text-white text-[11px] sm:${compact ? "text-[10px]" : "text-xs"}`, children: showOffline ? "Offline" : "Live" })
2269
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: `text-white text-[11px] ${compact ? "sm:text-[10px]" : "sm:text-xs"}`, children: showOffline ? "Offline" : "Live" })
2270
2270
  ] })
2271
2271
  ] })
2272
2272
  ]
@@ -2086,8 +2086,8 @@ var VideoCard = React.memo(({
2086
2086
  const efficiencyOverlayClass = videoGridColorState === "green" ? "bg-[#00D654]/25" : videoGridColorState === "blue" ? "bg-[#0EA5E9]/30" : videoGridColorState === "yellow" ? "bg-[#FFD700]/30" : videoGridColorState === "red" ? "bg-[#FF2D0A]/30" : "bg-transparent";
2087
2087
  const efficiencyBarClass = videoGridColorState === "green" ? "bg-[#00AB45]" : videoGridColorState === "blue" ? "bg-[#0EA5E9]" : videoGridColorState === "yellow" ? "bg-[#FFB020]" : videoGridColorState === "red" ? "bg-[#E34329]" : "bg-gray-500/70";
2088
2088
  const efficiencyStatus = videoGridColorState === "green" ? "High" : videoGridColorState === "blue" ? "Best" : videoGridColorState === "yellow" ? "Medium" : videoGridColorState === "red" ? "Low" : "Neutral";
2089
- const worstMarkerClassName = compact ? "left-1.5 top-1.5 gap-1.5 px-2 py-1 text-[11px]" : "left-2 top-2 gap-2 px-3 py-1.5 text-xs";
2090
- const statusBadgesPositionClass = isWorstPerformance ? compact ? "top-8 left-1.5 gap-1" : "top-10 left-2 gap-1.5" : compact ? "top-1.5 left-1.5 gap-1" : "top-2 left-2 gap-1.5";
2089
+ const worstMarkerClassName = compact ? "left-1 top-1 sm:left-1.5 sm:top-1.5 gap-1 sm:gap-1.5 p-1 sm:px-2 sm:py-1 text-[10px] sm:text-[11px]" : "left-1.5 top-1.5 sm:left-2 sm:top-2 gap-1 sm:gap-2 px-1.5 sm:px-3 py-0.5 sm:py-1.5 text-[10px] sm:text-xs";
2090
+ const statusBadgesPositionClass = isWorstPerformance ? compact ? "top-6 sm:top-8 left-1 sm:left-1.5 gap-1" : "top-7 sm:top-10 left-1.5 sm:left-2 gap-1 sm:gap-1.5" : compact ? "top-1 sm:top-1.5 left-1 sm:left-1.5 gap-1" : "top-1.5 sm:top-2 left-1.5 sm:left-2 gap-1 sm:gap-1.5";
2091
2091
  const trendInfo = workspace.trend !== void 0 ? getTrendArrowAndColor(workspace.trend) : null;
2092
2092
  const handleClick = useCallback(() => {
2093
2093
  trackCoreEvent("Workspace Card Clicked", {
@@ -2123,8 +2123,8 @@ var VideoCard = React.memo(({
2123
2123
  children: [
2124
2124
  /* @__PURE__ */ jsxs("div", { className: "relative w-full h-full overflow-hidden bg-black", children: [
2125
2125
  /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-black z-0", children: /* @__PURE__ */ jsxs("div", { className: "animate-pulse flex flex-col items-center", children: [
2126
- /* @__PURE__ */ jsx(Camera, { className: `w-5 h-5 sm:${compact ? "w-4 h-4" : "w-6 h-6"} text-gray-500` }),
2127
- /* @__PURE__ */ jsx("span", { className: `text-[11px] sm:${compact ? "text-[10px]" : "text-xs"} text-gray-500 mt-1`, children: "Loading..." })
2126
+ /* @__PURE__ */ jsx(Camera, { className: `w-5 h-5 ${compact ? "sm:w-4 sm:h-4" : "sm:w-6 sm:h-6"} text-gray-500` }),
2127
+ /* @__PURE__ */ jsx("span", { className: `text-[11px] ${compact ? "sm:text-[10px]" : "sm:text-xs"} text-gray-500 mt-1`, children: "Loading..." })
2128
2128
  ] }) }),
2129
2129
  /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 z-10", children: [
2130
2130
  /* @__PURE__ */ jsx(
@@ -2186,7 +2186,7 @@ var VideoCard = React.memo(({
2186
2186
  "data-testid": `video-card-status-badge-${badge.kind}`,
2187
2187
  "aria-label": tooltipText,
2188
2188
  "aria-describedby": tooltipId,
2189
- className: `group relative inline-flex shrink-0 items-center justify-center rounded-full bg-slate-950/70 border-2 shadow-[0_3px_10px_rgba(0,0,0,0.34),inset_0_0_0_1px_rgba(255,255,255,0.18)] ${compact ? "h-10 w-10" : "h-11 w-11"}`,
2189
+ className: `group relative inline-flex shrink-0 items-center justify-center rounded-full bg-slate-950/70 border-2 shadow-[0_3px_10px_rgba(0,0,0,0.34),inset_0_0_0_1px_rgba(255,255,255,0.18)] ${compact ? "h-7 w-7 sm:h-10 sm:w-10" : "h-8 w-8 sm:h-11 sm:w-11"}`,
2190
2190
  style: {
2191
2191
  borderColor: presentation.hex
2192
2192
  },
@@ -2195,7 +2195,7 @@ var VideoCard = React.memo(({
2195
2195
  Icon,
2196
2196
  {
2197
2197
  "aria-hidden": "true",
2198
- className: `${compact ? "h-5 w-5" : "h-6 w-6"} text-white`,
2198
+ className: `${compact ? "h-4 w-4 sm:h-5 sm:w-5" : "h-4 w-4 sm:h-6 sm:w-6"} text-white`,
2199
2199
  strokeWidth: 2.4
2200
2200
  }
2201
2201
  ),
@@ -2223,10 +2223,10 @@ var VideoCard = React.memo(({
2223
2223
  "div",
2224
2224
  {
2225
2225
  "data-testid": "video-card-worst-performance-marker",
2226
- className: `pointer-events-none absolute z-[65] inline-flex items-center rounded-md bg-[#1A0B09]/95 border border-[#E34329]/60 font-semibold tracking-wide text-white shadow-xl ${worstMarkerClassName}`,
2226
+ className: `pointer-events-none absolute z-[65] inline-flex items-center rounded-sm sm:rounded-md bg-[#1A0B09]/95 border border-[#E34329]/60 font-semibold tracking-wide text-white shadow-xl max-w-[calc(100%-8px)] sm:max-w-[calc(100%-16px)] ${worstMarkerClassName}`,
2227
2227
  children: [
2228
- /* @__PURE__ */ jsx(AlertTriangle, { className: `${compact ? "h-3.5 w-3.5" : "h-4 w-4"} text-[#E34329]`, "aria-hidden": "true" }),
2229
- /* @__PURE__ */ jsx("span", { children: "Overall Underperformer" })
2228
+ /* @__PURE__ */ jsx(AlertTriangle, { className: `${compact ? "h-3 w-3 sm:h-3.5 sm:w-3.5" : "h-3.5 w-3.5 sm:h-4 sm:w-4"} shrink-0 text-[#E34329]`, "aria-hidden": "true" }),
2229
+ /* @__PURE__ */ jsx("span", { className: `truncate leading-tight min-w-0 ${compact ? "hidden sm:block" : ""}`, children: "Overall Underperformer" })
2230
2230
  ]
2231
2231
  }
2232
2232
  ),
@@ -2239,10 +2239,10 @@ var VideoCard = React.memo(({
2239
2239
  }
2240
2240
  ) })
2241
2241
  ] }),
2242
- /* @__PURE__ */ jsxs("div", { className: `absolute bottom-0 left-0 right-0 bg-black bg-opacity-60 p-1.5 sm:${compact ? "p-1" : "p-1.5"} flex min-w-0 justify-between items-center gap-1 z-10`, children: [
2242
+ /* @__PURE__ */ jsxs("div", { className: `absolute bottom-0 left-0 right-0 bg-black bg-opacity-60 p-1.5 ${compact ? "sm:p-1" : "sm:p-1.5"} flex min-w-0 justify-between items-center gap-1 z-10`, children: [
2243
2243
  /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-1.5", children: [
2244
2244
  /* @__PURE__ */ jsx(Camera, { size: compact ? 10 : 12, className: "shrink-0 text-white" }),
2245
- /* @__PURE__ */ jsx("p", { className: `min-w-0 truncate text-white text-[11px] sm:${compact ? "text-[10px]" : "text-xs"} font-medium tracking-wide`, children: workspaceDisplayName })
2245
+ /* @__PURE__ */ jsx("p", { className: `min-w-0 truncate text-white text-[11px] ${compact ? "sm:text-[10px]" : "sm:text-xs"} font-medium tracking-wide`, children: workspaceDisplayName })
2246
2246
  ] }),
2247
2247
  /* @__PURE__ */ jsxs("div", { className: `flex shrink-0 items-center ${compact ? "gap-1" : "gap-1.5"}`, children: [
2248
2248
  trendInfo && /* @__PURE__ */ jsx(
@@ -2259,7 +2259,7 @@ var VideoCard = React.memo(({
2259
2259
  className: `${compact ? "w-1 h-1" : "w-1.5 h-1.5"} rounded-full ${showOffline ? "bg-red-500" : "bg-green-500"}`
2260
2260
  }
2261
2261
  ),
2262
- /* @__PURE__ */ jsx("span", { className: `text-white text-[11px] sm:${compact ? "text-[10px]" : "text-xs"}`, children: showOffline ? "Offline" : "Live" })
2262
+ /* @__PURE__ */ jsx("span", { className: `text-white text-[11px] ${compact ? "sm:text-[10px]" : "sm:text-xs"}`, children: showOffline ? "Offline" : "Live" })
2263
2263
  ] })
2264
2264
  ] })
2265
2265
  ]