@optifye/dashboard-core 6.11.29 → 6.11.31

package/dist/index.css

@@ -447,10 +447,6 @@ body {
   left: -0.125rem;
   right: -0.125rem;
 }
-.inset-x-0 {
-  left: 0px;
-  right: 0px;
-}
 .inset-y-0 {
   top: 0px;
   bottom: 0px;
@@ -665,9 +661,6 @@ body {
 .z-\[100\] {
   z-index: 100;
 }
-.z-\[1\] {
-  z-index: 1;
-}
 .z-\[60\] {
   z-index: 60;
 }
@@ -1148,6 +1141,9 @@ body {
 .max-h-48 {
   max-height: 12rem;
 }
+.max-h-52 {
+  max-height: 13rem;
+}
 .max-h-56 {
   max-height: 14rem;
 }
@@ -1157,6 +1153,9 @@ body {
 .max-h-64 {
   max-height: 16rem;
 }
+.max-h-72 {
+  max-height: 18rem;
+}
 .max-h-\[--radix-select-content-available-height\] {
   max-height: var(--radix-select-content-available-height);
 }
@@ -1813,9 +1812,6 @@ body {
 .cursor-default {
   cursor: default;
 }
-.cursor-grab {
-  cursor: grab;
-}
 .cursor-help {
   cursor: help;
 }
@@ -4273,9 +4269,6 @@ body {
 .font-extrabold {
   font-weight: 800;
 }
-.font-light {
-  font-weight: 300;
-}
 .font-medium {
   font-weight: 500;
 }
@@ -4871,14 +4864,6 @@ body {
     var(--tw-ring-shadow, 0 0 #0000),
     var(--tw-shadow);
 }
-.shadow-\[0_8px_30px_rgba\(0\,0\,0\,0\.08\)\,0_2px_8px_rgba\(0\,0\,0\,0\.04\)\] {
-  --tw-shadow: 0 8px 30px rgba(0,0,0,0.08),0 2px 8px rgba(0,0,0,0.04);
-  --tw-shadow-colored: 0 8px 30px var(--tw-shadow-color), 0 2px 8px var(--tw-shadow-color);
-  box-shadow:
-    var(--tw-ring-offset-shadow, 0 0 #0000),
-    var(--tw-ring-shadow, 0 0 #0000),
-    var(--tw-shadow);
-}
 .shadow-inner {
   --tw-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
   --tw-shadow-colored: inset 0 2px 4px 0 var(--tw-shadow-color);
@@ -6101,9 +6086,6 @@ input[type=range]:active::-moz-range-thumb {
   --tw-scale-y: 0.99;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
-.active\:cursor-grabbing:active {
-  cursor: grabbing;
-}
 .active\:bg-blue-800:active {
   --tw-bg-opacity: 1;
   background-color: rgb(30 64 175 / var(--tw-bg-opacity, 1));
@@ -6311,9 +6293,6 @@ input[type=range]:active::-moz-range-thumb {
   .sm\:right-4 {
     right: 1rem;
   }
-  .sm\:right-auto {
-    right: auto;
-  }
   .sm\:top-0 {
     top: 0px;
   }
@@ -6507,9 +6486,6 @@ input[type=range]:active::-moz-range-thumb {
   .sm\:w-\[180px\] {
     width: 180px;
   }
-  .sm\:w-\[264px\] {
-    width: 264px;
-  }
   .sm\:w-\[320px\] {
     width: 320px;
   }

package/dist/index.js

@@ -39432,240 +39432,99 @@ var SegmentedTimeInput = ({
     }
   );
 };
-var SCROLLBAR_HIDE_ID = "tp-scrollbar-hide";
-var injectScrollbarHideCSS = () => {
-  if (typeof document === "undefined") return;
-  if (document.getElementById(SCROLLBAR_HIDE_ID)) return;
-  const style = document.createElement("style");
-  style.id = SCROLLBAR_HIDE_ID;
-  style.textContent = ".tp-scroll-hide::-webkit-scrollbar{display:none}";
-  document.head.appendChild(style);
-};
-var ITEM_H = 40;
-var VISIBLE = 5;
-var WHEEL_H = ITEM_H * VISIBLE;
-var PAD = Math.floor(VISIBLE / 2);
-var ScrollColumn = ({ items, selected, onSelect, width = 56 }) => {
-  const elRef = React142.useRef(null);
-  const suppressRef = React142.useRef(false);
-  const snapTimerRef = React142.useRef(null);
-  const mountedRef = React142.useRef(false);
-  const dragging = React142.useRef(false);
-  const dragStartY = React142.useRef(0);
-  const dragStartScroll = React142.useRef(0);
-  React142.useEffect(() => {
-    injectScrollbarHideCSS();
-  }, []);
-  React142.useEffect(() => {
-    const idx = items.findIndex((i) => i.value === selected);
-    if (idx < 0 || !elRef.current || suppressRef.current) return;
-    const target = idx * ITEM_H;
-    if (!mountedRef.current) {
-      suppressRef.current = true;
-      elRef.current.scrollTop = target;
-      setTimeout(() => {
-        if (elRef.current) elRef.current.scrollTop = target;
-        setTimeout(() => {
-          suppressRef.current = false;
-          mountedRef.current = true;
-        }, 200);
-      }, 30);
-    } else {
-      elRef.current.scrollTo({ top: target, behavior: "smooth" });
-    }
-  }, [selected, items]);
-  const scheduleSnap = React142.useCallback(() => {
-    if (snapTimerRef.current) clearTimeout(snapTimerRef.current);
-    snapTimerRef.current = setTimeout(() => {
-      if (!elRef.current || suppressRef.current) return;
-      const idx = Math.round(elRef.current.scrollTop / ITEM_H);
-      const clamped = Math.max(0, Math.min(items.length - 1, idx));
-      suppressRef.current = true;
-      elRef.current.scrollTo({ top: clamped * ITEM_H, behavior: "smooth" });
-      const item = items[clamped];
-      if (item && item.value !== selected) onSelect(item.value);
-      setTimeout(() => {
-        suppressRef.current = false;
-      }, 150);
-    }, 100);
-  }, [items, selected, onSelect]);
-  const onScroll = React142.useCallback(() => {
-    if (suppressRef.current) return;
-    scheduleSnap();
-  }, [scheduleSnap]);
-  const onMouseDown = React142.useCallback((e) => {
-    dragging.current = true;
-    dragStartY.current = e.clientY;
-    dragStartScroll.current = elRef.current?.scrollTop ?? 0;
-    e.preventDefault();
-    const onMove = (ev) => {
-      if (!dragging.current || !elRef.current) return;
-      const dy = dragStartY.current - ev.clientY;
-      elRef.current.scrollTop = dragStartScroll.current + dy;
-    };
-    const onUp = () => {
-      dragging.current = false;
-      scheduleSnap();
-      document.removeEventListener("mousemove", onMove);
-      document.removeEventListener("mouseup", onUp);
-    };
-    document.addEventListener("mousemove", onMove);
-    document.addEventListener("mouseup", onUp);
-  }, [scheduleSnap]);
-  const onTouchStart = React142.useCallback((e) => {
-    dragging.current = true;
-    dragStartY.current = e.touches[0].clientY;
-    dragStartScroll.current = elRef.current?.scrollTop ?? 0;
-  }, []);
-  const onTouchMove = React142.useCallback((e) => {
-    if (!dragging.current || !elRef.current) return;
-    const dy = dragStartY.current - e.touches[0].clientY;
-    elRef.current.scrollTop = dragStartScroll.current + dy;
-    e.preventDefault();
-  }, []);
-  const onTouchEnd = React142.useCallback(() => {
-    dragging.current = false;
-    scheduleSnap();
-  }, [scheduleSnap]);
-  const handleClick = React142.useCallback((value, idx) => {
-    onSelect(value);
-    if (elRef.current) {
-      suppressRef.current = true;
-      elRef.current.scrollTo({ top: idx * ITEM_H, behavior: "smooth" });
-      setTimeout(() => {
-        suppressRef.current = false;
-      }, 250);
+var generateTimeSlots = () => {
+  const slots = [];
+  for (let hour = 0; hour < 24; hour++) {
+    for (let minute = 0; minute < 60; minute += 5) {
+      const time24 = `${hour.toString().padStart(2, "0")}:${minute.toString().padStart(2, "0")}`;
+      const hour12 = hour === 0 ? 12 : hour > 12 ? hour - 12 : hour;
+      const ampm = hour < 12 ? "AM" : "PM";
+      const time12 = `${hour12}:${minute.toString().padStart(2, "0")} ${ampm}`;
+      slots.push({ value: time24, label: time12 });
     }
-  }, [onSelect]);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative select-none", style: { width, height: WHEEL_H }, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        className: "absolute left-1 right-1 rounded-lg bg-blue-50/80 border border-blue-200/60 pointer-events-none z-0",
-        style: { top: PAD * ITEM_H, height: ITEM_H }
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        className: "absolute inset-x-0 top-0 pointer-events-none z-10",
-        style: { height: ITEM_H * 1.8, background: "linear-gradient(to bottom, white 0%, rgba(255,255,255,0.85) 50%, transparent 100%)" }
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        className: "absolute inset-x-0 bottom-0 pointer-events-none z-10",
-        style: { height: ITEM_H * 1.8, background: "linear-gradient(to top, white 0%, rgba(255,255,255,0.85) 50%, transparent 100%)" }
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        ref: elRef,
-        onScroll,
-        onMouseDown,
-        onTouchStart,
-        onTouchMove,
-        onTouchEnd,
-        className: "h-full overflow-y-auto tp-scroll-hide relative z-[1] cursor-grab active:cursor-grabbing",
-        style: { scrollbarWidth: "none", msOverflowStyle: "none" },
-        role: "listbox",
-        children: [
-          Array.from({ length: PAD }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx("div", { style: { height: ITEM_H }, "aria-hidden": true }, `pt-${i}`)),
-          items.map((item, idx) => {
-            const isSel = item.value === selected;
-            return /* @__PURE__ */ jsxRuntime.jsx(
-              "div",
-              {
-                onClick: () => handleClick(item.value, idx),
-                className: `flex items-center justify-center transition-all duration-100 ${isSel ? "text-gray-900 font-semibold text-[15px]" : "text-gray-300 text-sm"}`,
-                style: { height: ITEM_H },
-                role: "option",
-                "aria-selected": isSel,
-                children: item.label
-              },
-              item.value
-            );
-          }),
-          Array.from({ length: PAD }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx("div", { style: { height: ITEM_H }, "aria-hidden": true }, `pb-${i}`))
-        ]
-      }
-    )
-  ] });
+  }
+  return slots;
 };
-var HOURS = Array.from({ length: 12 }, (_, i) => ({ value: i + 1, label: (i + 1).toString() }));
-var MINUTES = Array.from({ length: 60 }, (_, i) => ({ value: i, label: pad22(i) }));
+var TIME_SLOTS = generateTimeSlots();
 var TimePopover = ({
   hour,
   minute,
   period,
-  onHourChange,
-  onMinuteChange,
-  onPeriodChange,
-  onClose,
-  onNow
+  onTimeChange,
+  onClose
 }) => {
-  const bandCenter = PAD * ITEM_H + ITEM_H / 2;
+  const [searchTerm, setSearchTerm] = React142.useState("");
+  const inputRef = React142.useRef(null);
+  const listRef = React142.useRef(null);
+  const selectedValue = to24h(hour, minute, period);
+  React142.useEffect(() => {
+    setTimeout(() => inputRef.current?.focus(), 100);
+  }, []);
+  React142.useEffect(() => {
+    if (!listRef.current) return;
+    const selectedEl = listRef.current.querySelector('[data-selected="true"]');
+    if (selectedEl) {
+      selectedEl.scrollIntoView({ block: "center" });
+    }
+  }, []);
+  const filteredSlots = React142.useMemo(() => {
+    if (!searchTerm) return TIME_SLOTS;
+    const term = searchTerm.toLowerCase().trim();
+    return TIME_SLOTS.filter((slot) => {
+      const label = slot.label.toLowerCase();
+      return label.startsWith(term) || // Handle "05" matching "5:00" — strip leading zero from search
+      label.startsWith(term.replace(/^0+/, "")) || // Handle 24h input like "17" matching "17:00" via the value
+      slot.value.startsWith(term);
+    });
+  }, [searchTerm]);
+  const handleSelect = (timeValue) => {
+    onTimeChange(timeValue);
+    onClose();
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Escape") {
+      onClose();
+    } else if (e.key === "Enter") {
+      e.preventDefault();
+      if (filteredSlots.length > 0) {
+        handleSelect(filteredSlots[0].value);
+      }
+    }
+  };
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: "absolute z-50 left-0 right-0 sm:left-auto sm:right-auto sm:w-[264px] mt-1.5 bg-white border border-gray-200 rounded-2xl shadow-[0_8px_30px_rgba(0,0,0,0.08),0_2px_8px_rgba(0,0,0,0.04)] overflow-hidden",
+      className: "absolute z-50 w-full mt-1 bg-white border border-gray-200 rounded-lg shadow-lg max-h-72 overflow-hidden",
       role: "dialog",
       "aria-label": "Choose time",
       onClick: (e) => e.stopPropagation(),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-center px-4 pt-4 pb-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(ScrollColumn, { items: HOURS, selected: hour, onSelect: (v) => onHourChange(v), width: 52 }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              className: "text-gray-300 text-lg font-light flex-shrink-0 w-4 text-center select-none",
-              style: { marginTop: bandCenter - 12 },
-              children: ":"
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(ScrollColumn, { items: MINUTES, selected: minute, onSelect: (v) => onMinuteChange(v), width: 52 }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              className: "flex flex-col gap-1.5 ml-3 flex-shrink-0",
-              style: { marginTop: bandCenter - 38 },
-              children: ["AM", "PM"].map((p) => /* @__PURE__ */ jsxRuntime.jsx(
-                "button",
-                {
-                  type: "button",
-                  onClick: () => onPeriodChange(p),
-                  className: `w-12 h-8 rounded-lg text-[11px] font-bold tracking-widest transition-all duration-150 ${period === p ? "bg-blue-600 text-white shadow-sm" : "bg-gray-100 text-gray-400 hover:bg-gray-200 hover:text-gray-600"}`,
-                  "aria-pressed": period === p,
-                  children: p
-                },
-                p
-              ))
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-4 border-t border-gray-100" }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-4 py-2.5", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
-            {
-              type: "button",
-              onClick: onNow,
-              className: "text-[13px] font-medium text-blue-600 hover:text-blue-700 transition-colors px-2.5 py-1 rounded-md hover:bg-blue-50",
-              children: "Now"
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-2 border-b border-gray-100", children: /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            ref: inputRef,
+            type: "text",
+            placeholder: "Search time...",
+            value: searchTerm,
+            onChange: (e) => setSearchTerm(e.target.value),
+            onKeyDown: handleKeyDown,
+            className: "w-full px-3 py-2 text-sm border border-gray-200 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { ref: listRef, className: "overflow-y-auto max-h-52", children: filteredSlots.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 py-3 text-sm text-gray-400 text-center", children: "No matching times" }) : filteredSlots.map((slot) => {
+          const isSelected = slot.value === selectedValue;
+          return /* @__PURE__ */ jsxRuntime.jsx(
             "button",
             {
               type: "button",
-              onClick: onClose,
-              className: "text-[13px] font-medium text-white bg-blue-600 hover:bg-blue-700 px-4 py-1.5 rounded-lg transition-colors shadow-sm",
-              children: "Done"
-            }
-          )
-        ] })
+              "data-selected": isSelected,
+              onClick: () => handleSelect(slot.value),
+              className: `w-full px-3 py-2 text-left text-sm transition-colors duration-100 ${isSelected ? "bg-blue-50 text-blue-700 font-medium" : "text-gray-700 hover:bg-gray-50"}`,
+              children: slot.label
+            },
+            slot.value
+          );
+        }) })
       ]
     }
   );
@@ -39705,15 +39564,6 @@ var TimePickerDropdown = ({
   const handlePeriodChange = React142.useCallback((p) => {
     emitChange(hour, minute, p);
   }, [emitChange, hour, minute]);
-  const handleNow = React142.useCallback(() => {
-    const now4 = /* @__PURE__ */ new Date();
-    const h24 = now4.getHours();
-    const m = now4.getMinutes();
-    const p = h24 >= 12 ? "PM" : "AM";
-    let h12 = h24 % 12;
-    if (h12 === 0) h12 = 12;
-    emitChange(h12, m, p);
-  }, [emitChange]);
   const handleSegmentFocus = React142.useCallback((seg) => {
     setActiveSegment(seg);
     if (!hasValue) {
@@ -39819,11 +39669,8 @@ var TimePickerDropdown = ({
         hour,
         minute,
         period,
-        onHourChange: handleHourChange,
-        onMinuteChange: handleMinuteChange,
-        onPeriodChange: handlePeriodChange,
-        onClose: () => setIsPopoverOpen(false),
-        onNow: handleNow
+        onTimeChange: onChange,
+        onClose: () => setIsPopoverOpen(false)
       }
     )
   ] });
@@ -40682,7 +40529,18 @@ var FileManagerFilters = ({
   React142.useEffect(() => {
     clipMetadataRef.current = clipMetadata;
   }, [clipMetadata]);
-  const isExternallyManaged = prefetchedClipMetadata !== void 0 || activeCategoryLoading !== void 0;
+  const isCategoryExternallyManaged = React142.useCallback((categoryId) => {
+    if (!categoryId) {
+      return false;
+    }
+    if (prefetchedClipMetadata && Array.isArray(prefetchedClipMetadata[categoryId]) && prefetchedClipMetadata[categoryId].length > 0) {
+      return true;
+    }
+    if (activeCategoryLoading !== void 0 && categoryId === activeFilter) {
+      return true;
+    }
+    return false;
+  }, [prefetchedClipMetadata, activeCategoryLoading, activeFilter]);
   React142.useEffect(() => {
     if (!prefetchedClipMetadata) {
       return;
@@ -41215,11 +41073,11 @@ var FileManagerFilters = ({
         return newExpanded;
       });
       const category = categories.find((cat) => cat.id === activeFilter);
-      if (category && !isExternallyManaged && !clipMetadataRef.current[activeFilter]) {
+      if (category && !isCategoryExternallyManaged(activeFilter) && !clipMetadataRef.current[activeFilter]) {
         fetchClipMetadata(activeFilter, 1);
       }
     }
-  }, [activeFilter, isExternallyManaged]);
+  }, [activeFilter, isCategoryExternallyManaged]);
   React142.useEffect(() => {
     const handleEscape = (e) => {
       if (e.key === "Escape") {
@@ -41245,7 +41103,7 @@ var FileManagerFilters = ({
       document.body.style.overflow = "unset";
     };
   }, [showTimeFilterModal, showIdleLabelFilterModal]);
-  const generateTimeSlots = React142.useCallback(() => {
+  const generateTimeSlots2 = React142.useCallback(() => {
     const slots = [];
     for (let hour = 0; hour < 24; hour++) {
       for (let minute = 0; minute < 60; minute += 15) {
@@ -41258,7 +41116,7 @@ var FileManagerFilters = ({
     }
     return slots;
   }, []);
-  const timeSlots = React142.useMemo(() => generateTimeSlots(), [generateTimeSlots]);
+  const timeSlots = React142.useMemo(() => generateTimeSlots2(), [generateTimeSlots2]);
   const filteredStartSlots = React142.useMemo(
     () => timeSlots.filter(
       (slot) => slot.label.toLowerCase().includes(startSearchTerm.toLowerCase())
@@ -41490,14 +41348,14 @@ var FileManagerFilters = ({
     } else {
       newExpanded.add(nodeId);
       const category = categories.find((cat) => cat.id === nodeId);
-      if (category && !clipMetadata[nodeId] && !(isExternallyManaged && nodeId === activeFilter)) {
+      if (category && !clipMetadata[nodeId] && !isCategoryExternallyManaged(nodeId)) {
         console.log(`[FileManager] Fetching clips for expanded category: ${nodeId}`);
         fetchClipMetadata(nodeId, 1);
       }
-      if (!(isExternallyManaged && nodeId === activeFilter) && showPercentileCycleFilters && nodeId === "fast-cycles" && (percentileClips["fast-cycles"] || []).length === 0) {
+      if (!isCategoryExternallyManaged(nodeId) && showPercentileCycleFilters && nodeId === "fast-cycles" && (percentileClips["fast-cycles"] || []).length === 0) {
         fetchPercentileClips("fast-cycles");
       }
-      if (!(isExternallyManaged && nodeId === activeFilter) && showPercentileCycleFilters && nodeId === "slow-cycles" && (percentileClips["slow-cycles"] || []).length === 0) {
+      if (!isCategoryExternallyManaged(nodeId) && showPercentileCycleFilters && nodeId === "slow-cycles" && (percentileClips["slow-cycles"] || []).length === 0) {
         fetchPercentileClips("slow-cycles");
       }
     }
@@ -41511,14 +41369,14 @@ var FileManagerFilters = ({
       } else {
         newExpanded.add(node.id);
         const category = categories.find((cat) => cat.id === node.id);
-        if (category && !clipMetadata[node.id] && !isExternallyManaged) {
+        if (category && !clipMetadata[node.id] && !isCategoryExternallyManaged(node.id)) {
           console.log(`[FileManager] Fetching clips for expanded category: ${node.id}`);
           fetchClipMetadata(node.id, 1);
         }
-        if (!isExternallyManaged && showPercentileCycleFilters && node.id === "fast-cycles" && (percentileClips["fast-cycles"] || []).length === 0) {
+        if (!isCategoryExternallyManaged(node.id) && showPercentileCycleFilters && node.id === "fast-cycles" && (percentileClips["fast-cycles"] || []).length === 0) {
           fetchPercentileClips("fast-cycles");
         }
-        if (!isExternallyManaged && showPercentileCycleFilters && node.id === "slow-cycles" && (percentileClips["slow-cycles"] || []).length === 0) {
+        if (!isCategoryExternallyManaged(node.id) && showPercentileCycleFilters && node.id === "slow-cycles" && (percentileClips["slow-cycles"] || []).length === 0) {
           fetchPercentileClips("slow-cycles");
         }
       }
@@ -43148,7 +43006,7 @@ var BottlenecksContent = ({
           metadataClips = categoryData.clips.map((clip, index) => ({
             id: clip.id,
             clipId: clip.id,
-            clip_timestamp: clip.timestamp || clip.creation_timestamp,
+            clip_timestamp: clip.creation_timestamp || clip.timestamp,
             description: clip.description,
             severity: clip.severity,
             category: categoryId,

package/dist/index.mjs

@@ -39403,240 +39403,99 @@ var SegmentedTimeInput = ({
     }
   );
 };
-var SCROLLBAR_HIDE_ID = "tp-scrollbar-hide";
-var injectScrollbarHideCSS = () => {
-  if (typeof document === "undefined") return;
-  if (document.getElementById(SCROLLBAR_HIDE_ID)) return;
-  const style = document.createElement("style");
-  style.id = SCROLLBAR_HIDE_ID;
-  style.textContent = ".tp-scroll-hide::-webkit-scrollbar{display:none}";
-  document.head.appendChild(style);
-};
-var ITEM_H = 40;
-var VISIBLE = 5;
-var WHEEL_H = ITEM_H * VISIBLE;
-var PAD = Math.floor(VISIBLE / 2);
-var ScrollColumn = ({ items, selected, onSelect, width = 56 }) => {
-  const elRef = useRef(null);
-  const suppressRef = useRef(false);
-  const snapTimerRef = useRef(null);
-  const mountedRef = useRef(false);
-  const dragging = useRef(false);
-  const dragStartY = useRef(0);
-  const dragStartScroll = useRef(0);
-  useEffect(() => {
-    injectScrollbarHideCSS();
-  }, []);
-  useEffect(() => {
-    const idx = items.findIndex((i) => i.value === selected);
-    if (idx < 0 || !elRef.current || suppressRef.current) return;
-    const target = idx * ITEM_H;
-    if (!mountedRef.current) {
-      suppressRef.current = true;
-      elRef.current.scrollTop = target;
-      setTimeout(() => {
-        if (elRef.current) elRef.current.scrollTop = target;
-        setTimeout(() => {
-          suppressRef.current = false;
-          mountedRef.current = true;
-        }, 200);
-      }, 30);
-    } else {
-      elRef.current.scrollTo({ top: target, behavior: "smooth" });
-    }
-  }, [selected, items]);
-  const scheduleSnap = useCallback(() => {
-    if (snapTimerRef.current) clearTimeout(snapTimerRef.current);
-    snapTimerRef.current = setTimeout(() => {
-      if (!elRef.current || suppressRef.current) return;
-      const idx = Math.round(elRef.current.scrollTop / ITEM_H);
-      const clamped = Math.max(0, Math.min(items.length - 1, idx));
-      suppressRef.current = true;
-      elRef.current.scrollTo({ top: clamped * ITEM_H, behavior: "smooth" });
-      const item = items[clamped];
-      if (item && item.value !== selected) onSelect(item.value);
-      setTimeout(() => {
-        suppressRef.current = false;
-      }, 150);
-    }, 100);
-  }, [items, selected, onSelect]);
-  const onScroll = useCallback(() => {
-    if (suppressRef.current) return;
-    scheduleSnap();
-  }, [scheduleSnap]);
-  const onMouseDown = useCallback((e) => {
-    dragging.current = true;
-    dragStartY.current = e.clientY;
-    dragStartScroll.current = elRef.current?.scrollTop ?? 0;
-    e.preventDefault();
-    const onMove = (ev) => {
-      if (!dragging.current || !elRef.current) return;
-      const dy = dragStartY.current - ev.clientY;
-      elRef.current.scrollTop = dragStartScroll.current + dy;
-    };
-    const onUp = () => {
-      dragging.current = false;
-      scheduleSnap();
-      document.removeEventListener("mousemove", onMove);
-      document.removeEventListener("mouseup", onUp);
-    };
-    document.addEventListener("mousemove", onMove);
-    document.addEventListener("mouseup", onUp);
-  }, [scheduleSnap]);
-  const onTouchStart = useCallback((e) => {
-    dragging.current = true;
-    dragStartY.current = e.touches[0].clientY;
-    dragStartScroll.current = elRef.current?.scrollTop ?? 0;
-  }, []);
-  const onTouchMove = useCallback((e) => {
-    if (!dragging.current || !elRef.current) return;
-    const dy = dragStartY.current - e.touches[0].clientY;
-    elRef.current.scrollTop = dragStartScroll.current + dy;
-    e.preventDefault();
-  }, []);
-  const onTouchEnd = useCallback(() => {
-    dragging.current = false;
-    scheduleSnap();
-  }, [scheduleSnap]);
-  const handleClick = useCallback((value, idx) => {
-    onSelect(value);
-    if (elRef.current) {
-      suppressRef.current = true;
-      elRef.current.scrollTo({ top: idx * ITEM_H, behavior: "smooth" });
-      setTimeout(() => {
-        suppressRef.current = false;
-      }, 250);
+var generateTimeSlots = () => {
+  const slots = [];
+  for (let hour = 0; hour < 24; hour++) {
+    for (let minute = 0; minute < 60; minute += 5) {
+      const time24 = `${hour.toString().padStart(2, "0")}:${minute.toString().padStart(2, "0")}`;
+      const hour12 = hour === 0 ? 12 : hour > 12 ? hour - 12 : hour;
+      const ampm = hour < 12 ? "AM" : "PM";
+      const time12 = `${hour12}:${minute.toString().padStart(2, "0")} ${ampm}`;
+      slots.push({ value: time24, label: time12 });
     }
-  }, [onSelect]);
-  return /* @__PURE__ */ jsxs("div", { className: "relative select-none", style: { width, height: WHEEL_H }, children: [
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: "absolute left-1 right-1 rounded-lg bg-blue-50/80 border border-blue-200/60 pointer-events-none z-0",
-        style: { top: PAD * ITEM_H, height: ITEM_H }
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: "absolute inset-x-0 top-0 pointer-events-none z-10",
-        style: { height: ITEM_H * 1.8, background: "linear-gradient(to bottom, white 0%, rgba(255,255,255,0.85) 50%, transparent 100%)" }
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: "absolute inset-x-0 bottom-0 pointer-events-none z-10",
-        style: { height: ITEM_H * 1.8, background: "linear-gradient(to top, white 0%, rgba(255,255,255,0.85) 50%, transparent 100%)" }
-      }
-    ),
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        ref: elRef,
-        onScroll,
-        onMouseDown,
-        onTouchStart,
-        onTouchMove,
-        onTouchEnd,
-        className: "h-full overflow-y-auto tp-scroll-hide relative z-[1] cursor-grab active:cursor-grabbing",
-        style: { scrollbarWidth: "none", msOverflowStyle: "none" },
-        role: "listbox",
-        children: [
-          Array.from({ length: PAD }).map((_, i) => /* @__PURE__ */ jsx("div", { style: { height: ITEM_H }, "aria-hidden": true }, `pt-${i}`)),
-          items.map((item, idx) => {
-            const isSel = item.value === selected;
-            return /* @__PURE__ */ jsx(
-              "div",
-              {
-                onClick: () => handleClick(item.value, idx),
-                className: `flex items-center justify-center transition-all duration-100 ${isSel ? "text-gray-900 font-semibold text-[15px]" : "text-gray-300 text-sm"}`,
-                style: { height: ITEM_H },
-                role: "option",
-                "aria-selected": isSel,
-                children: item.label
-              },
-              item.value
-            );
-          }),
-          Array.from({ length: PAD }).map((_, i) => /* @__PURE__ */ jsx("div", { style: { height: ITEM_H }, "aria-hidden": true }, `pb-${i}`))
-        ]
-      }
-    )
-  ] });
+  }
+  return slots;
 };
-var HOURS = Array.from({ length: 12 }, (_, i) => ({ value: i + 1, label: (i + 1).toString() }));
-var MINUTES = Array.from({ length: 60 }, (_, i) => ({ value: i, label: pad22(i) }));
+var TIME_SLOTS = generateTimeSlots();
 var TimePopover = ({
   hour,
   minute,
   period,
-  onHourChange,
-  onMinuteChange,
-  onPeriodChange,
-  onClose,
-  onNow
+  onTimeChange,
+  onClose
 }) => {
-  const bandCenter = PAD * ITEM_H + ITEM_H / 2;
+  const [searchTerm, setSearchTerm] = useState("");
+  const inputRef = useRef(null);
+  const listRef = useRef(null);
+  const selectedValue = to24h(hour, minute, period);
+  useEffect(() => {
+    setTimeout(() => inputRef.current?.focus(), 100);
+  }, []);
+  useEffect(() => {
+    if (!listRef.current) return;
+    const selectedEl = listRef.current.querySelector('[data-selected="true"]');
+    if (selectedEl) {
+      selectedEl.scrollIntoView({ block: "center" });
+    }
+  }, []);
+  const filteredSlots = useMemo(() => {
+    if (!searchTerm) return TIME_SLOTS;
+    const term = searchTerm.toLowerCase().trim();
+    return TIME_SLOTS.filter((slot) => {
+      const label = slot.label.toLowerCase();
+      return label.startsWith(term) || // Handle "05" matching "5:00" — strip leading zero from search
+      label.startsWith(term.replace(/^0+/, "")) || // Handle 24h input like "17" matching "17:00" via the value
+      slot.value.startsWith(term);
+    });
+  }, [searchTerm]);
+  const handleSelect = (timeValue) => {
+    onTimeChange(timeValue);
+    onClose();
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Escape") {
+      onClose();
+    } else if (e.key === "Enter") {
+      e.preventDefault();
+      if (filteredSlots.length > 0) {
+        handleSelect(filteredSlots[0].value);
+      }
+    }
+  };
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: "absolute z-50 left-0 right-0 sm:left-auto sm:right-auto sm:w-[264px] mt-1.5 bg-white border border-gray-200 rounded-2xl shadow-[0_8px_30px_rgba(0,0,0,0.08),0_2px_8px_rgba(0,0,0,0.04)] overflow-hidden",
+      className: "absolute z-50 w-full mt-1 bg-white border border-gray-200 rounded-lg shadow-lg max-h-72 overflow-hidden",
       role: "dialog",
       "aria-label": "Choose time",
       onClick: (e) => e.stopPropagation(),
       children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-center px-4 pt-4 pb-2", children: [
-          /* @__PURE__ */ jsx(ScrollColumn, { items: HOURS, selected: hour, onSelect: (v) => onHourChange(v), width: 52 }),
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: "text-gray-300 text-lg font-light flex-shrink-0 w-4 text-center select-none",
-              style: { marginTop: bandCenter - 12 },
-              children: ":"
-            }
-          ),
-          /* @__PURE__ */ jsx(ScrollColumn, { items: MINUTES, selected: minute, onSelect: (v) => onMinuteChange(v), width: 52 }),
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: "flex flex-col gap-1.5 ml-3 flex-shrink-0",
-              style: { marginTop: bandCenter - 38 },
-              children: ["AM", "PM"].map((p) => /* @__PURE__ */ jsx(
-                "button",
-                {
-                  type: "button",
-                  onClick: () => onPeriodChange(p),
-                  className: `w-12 h-8 rounded-lg text-[11px] font-bold tracking-widest transition-all duration-150 ${period === p ? "bg-blue-600 text-white shadow-sm" : "bg-gray-100 text-gray-400 hover:bg-gray-200 hover:text-gray-600"}`,
-                  "aria-pressed": period === p,
-                  children: p
-                },
-                p
-              ))
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsx("div", { className: "mx-4 border-t border-gray-100" }),
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 py-2.5", children: [
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              onClick: onNow,
-              className: "text-[13px] font-medium text-blue-600 hover:text-blue-700 transition-colors px-2.5 py-1 rounded-md hover:bg-blue-50",
-              children: "Now"
-            }
-          ),
-          /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx("div", { className: "p-2 border-b border-gray-100", children: /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: inputRef,
+            type: "text",
+            placeholder: "Search time...",
+            value: searchTerm,
+            onChange: (e) => setSearchTerm(e.target.value),
+            onKeyDown: handleKeyDown,
+            className: "w-full px-3 py-2 text-sm border border-gray-200 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+          }
+        ) }),
+        /* @__PURE__ */ jsx("div", { ref: listRef, className: "overflow-y-auto max-h-52", children: filteredSlots.length === 0 ? /* @__PURE__ */ jsx("div", { className: "px-3 py-3 text-sm text-gray-400 text-center", children: "No matching times" }) : filteredSlots.map((slot) => {
+          const isSelected = slot.value === selectedValue;
+          return /* @__PURE__ */ jsx(
             "button",
             {
               type: "button",
-              onClick: onClose,
-              className: "text-[13px] font-medium text-white bg-blue-600 hover:bg-blue-700 px-4 py-1.5 rounded-lg transition-colors shadow-sm",
-              children: "Done"
-            }
-          )
-        ] })
+              "data-selected": isSelected,
+              onClick: () => handleSelect(slot.value),
+              className: `w-full px-3 py-2 text-left text-sm transition-colors duration-100 ${isSelected ? "bg-blue-50 text-blue-700 font-medium" : "text-gray-700 hover:bg-gray-50"}`,
+              children: slot.label
+            },
+            slot.value
+          );
+        }) })
       ]
     }
   );
@@ -39676,15 +39535,6 @@ var TimePickerDropdown = ({
   const handlePeriodChange = useCallback((p) => {
     emitChange(hour, minute, p);
   }, [emitChange, hour, minute]);
-  const handleNow = useCallback(() => {
-    const now4 = /* @__PURE__ */ new Date();
-    const h24 = now4.getHours();
-    const m = now4.getMinutes();
-    const p = h24 >= 12 ? "PM" : "AM";
-    let h12 = h24 % 12;
-    if (h12 === 0) h12 = 12;
-    emitChange(h12, m, p);
-  }, [emitChange]);
   const handleSegmentFocus = useCallback((seg) => {
     setActiveSegment(seg);
     if (!hasValue) {
@@ -39790,11 +39640,8 @@ var TimePickerDropdown = ({
         hour,
         minute,
         period,
-        onHourChange: handleHourChange,
-        onMinuteChange: handleMinuteChange,
-        onPeriodChange: handlePeriodChange,
-        onClose: () => setIsPopoverOpen(false),
-        onNow: handleNow
+        onTimeChange: onChange,
+        onClose: () => setIsPopoverOpen(false)
       }
     )
   ] });
@@ -40653,7 +40500,18 @@ var FileManagerFilters = ({
   useEffect(() => {
     clipMetadataRef.current = clipMetadata;
   }, [clipMetadata]);
-  const isExternallyManaged = prefetchedClipMetadata !== void 0 || activeCategoryLoading !== void 0;
+  const isCategoryExternallyManaged = useCallback((categoryId) => {
+    if (!categoryId) {
+      return false;
+    }
+    if (prefetchedClipMetadata && Array.isArray(prefetchedClipMetadata[categoryId]) && prefetchedClipMetadata[categoryId].length > 0) {
+      return true;
+    }
+    if (activeCategoryLoading !== void 0 && categoryId === activeFilter) {
+      return true;
+    }
+    return false;
+  }, [prefetchedClipMetadata, activeCategoryLoading, activeFilter]);
   useEffect(() => {
     if (!prefetchedClipMetadata) {
       return;
@@ -41186,11 +41044,11 @@ var FileManagerFilters = ({
         return newExpanded;
       });
       const category = categories.find((cat) => cat.id === activeFilter);
-      if (category && !isExternallyManaged && !clipMetadataRef.current[activeFilter]) {
+      if (category && !isCategoryExternallyManaged(activeFilter) && !clipMetadataRef.current[activeFilter]) {
         fetchClipMetadata(activeFilter, 1);
       }
     }
-  }, [activeFilter, isExternallyManaged]);
+  }, [activeFilter, isCategoryExternallyManaged]);
   useEffect(() => {
     const handleEscape = (e) => {
       if (e.key === "Escape") {
@@ -41216,7 +41074,7 @@ var FileManagerFilters = ({
       document.body.style.overflow = "unset";
     };
   }, [showTimeFilterModal, showIdleLabelFilterModal]);
-  const generateTimeSlots = useCallback(() => {
+  const generateTimeSlots2 = useCallback(() => {
     const slots = [];
     for (let hour = 0; hour < 24; hour++) {
       for (let minute = 0; minute < 60; minute += 15) {
@@ -41229,7 +41087,7 @@ var FileManagerFilters = ({
     }
     return slots;
   }, []);
-  const timeSlots = useMemo(() => generateTimeSlots(), [generateTimeSlots]);
+  const timeSlots = useMemo(() => generateTimeSlots2(), [generateTimeSlots2]);
   const filteredStartSlots = useMemo(
     () => timeSlots.filter(
       (slot) => slot.label.toLowerCase().includes(startSearchTerm.toLowerCase())
@@ -41461,14 +41319,14 @@ var FileManagerFilters = ({
     } else {
       newExpanded.add(nodeId);
       const category = categories.find((cat) => cat.id === nodeId);
-      if (category && !clipMetadata[nodeId] && !(isExternallyManaged && nodeId === activeFilter)) {
+      if (category && !clipMetadata[nodeId] && !isCategoryExternallyManaged(nodeId)) {
         console.log(`[FileManager] Fetching clips for expanded category: ${nodeId}`);
         fetchClipMetadata(nodeId, 1);
       }
-      if (!(isExternallyManaged && nodeId === activeFilter) && showPercentileCycleFilters && nodeId === "fast-cycles" && (percentileClips["fast-cycles"] || []).length === 0) {
+      if (!isCategoryExternallyManaged(nodeId) && showPercentileCycleFilters && nodeId === "fast-cycles" && (percentileClips["fast-cycles"] || []).length === 0) {
         fetchPercentileClips("fast-cycles");
       }
-      if (!(isExternallyManaged && nodeId === activeFilter) && showPercentileCycleFilters && nodeId === "slow-cycles" && (percentileClips["slow-cycles"] || []).length === 0) {
+      if (!isCategoryExternallyManaged(nodeId) && showPercentileCycleFilters && nodeId === "slow-cycles" && (percentileClips["slow-cycles"] || []).length === 0) {
         fetchPercentileClips("slow-cycles");
       }
     }
@@ -41482,14 +41340,14 @@ var FileManagerFilters = ({
       } else {
         newExpanded.add(node.id);
         const category = categories.find((cat) => cat.id === node.id);
-        if (category && !clipMetadata[node.id] && !isExternallyManaged) {
+        if (category && !clipMetadata[node.id] && !isCategoryExternallyManaged(node.id)) {
           console.log(`[FileManager] Fetching clips for expanded category: ${node.id}`);
           fetchClipMetadata(node.id, 1);
         }
-        if (!isExternallyManaged && showPercentileCycleFilters && node.id === "fast-cycles" && (percentileClips["fast-cycles"] || []).length === 0) {
+        if (!isCategoryExternallyManaged(node.id) && showPercentileCycleFilters && node.id === "fast-cycles" && (percentileClips["fast-cycles"] || []).length === 0) {
           fetchPercentileClips("fast-cycles");
         }
-        if (!isExternallyManaged && showPercentileCycleFilters && node.id === "slow-cycles" && (percentileClips["slow-cycles"] || []).length === 0) {
+        if (!isCategoryExternallyManaged(node.id) && showPercentileCycleFilters && node.id === "slow-cycles" && (percentileClips["slow-cycles"] || []).length === 0) {
           fetchPercentileClips("slow-cycles");
         }
       }
@@ -43119,7 +42977,7 @@ var BottlenecksContent = ({
           metadataClips = categoryData.clips.map((clip, index) => ({
             id: clip.id,
             clipId: clip.id,
-            clip_timestamp: clip.timestamp || clip.creation_timestamp,
+            clip_timestamp: clip.creation_timestamp || clip.timestamp,
             description: clip.description,
             severity: clip.severity,
             category: categoryId,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@optifye/dashboard-core",
-  "version": "6.11.29",
+  "version": "6.11.31",
   "description": "Reusable UI & logic for Optifye dashboard",
   "main": "dist/index.js",
   "module": "dist/index.mjs",