ui-soxo-bootstrap-core 2.4.24 → 2.4.25-dev.6

package/core/lib/components/sidemenu/sidemenu.scss

@@ -43,8 +43,8 @@
     width: 17%;
     background: #fff;
     // border-bottom: 1.5px solid #24aeb8;
-    &.close{
-      width:6% !important
+    &.close {
+      width: 6% !important;
     }
 
     .logo-wrapper {
@@ -70,7 +70,7 @@
 
         @media only screen and (max-width: 500px) {
           margin-right: 0px;
-// margin: 10px;
+          // margin: 10px;
           width: 150px;
         }
 
@@ -160,7 +160,7 @@
 
     /* Pseudo-element  (as before) */
     .menu-collapsed::after {
-      content: "";
+      content: '';
       position: absolute;
       top: -100%;
       left: 0;
@@ -175,26 +175,26 @@
       // background-color: #E0EBFF;
       // transform: scale(0.95); /* Apply scale effect on hover */
     }
-/* Style selected item */
-.ant-menu{
-  background-color: transparent !important;
-}
-// .ant-menu-inline .ant-menu-item::after{
-//   border-right: none;
-// }
-// .ant-menu-item-selected {
-//   background-color: var(--selected-bg-color) !important;
-//   color: var(--selected-text-color) !important;
-//    border-radius: 12px;
-//   // font-weight: 600;
-//   // margin: 4px 8px;
-// }
-
-// /* Optional: remove hover effects */
-// .ant-menu-item:hover {
-//   background-color: transparent !important;
-//   color: transparent !important;
-// }
+    /* Style selected item */
+    .ant-menu {
+      background-color: transparent !important;
+    }
+    // .ant-menu-inline .ant-menu-item::after{
+    //   border-right: none;
+    // }
+    // .ant-menu-item-selected {
+    //   background-color: var(--selected-bg-color) !important;
+    //   color: var(--selected-text-color) !important;
+    //    border-radius: 12px;
+    //   // font-weight: 600;
+    //   // margin: 4px 8px;
+    // }
+
+    // /* Optional: remove hover effects */
+    // .ant-menu-item:hover {
+    //   background-color: transparent !important;
+    //   color: transparent !important;
+    // }
 
     /* River flow effect */
     .menu-collapsed:hover::after {
@@ -248,9 +248,7 @@
       padding: 0px;
       // width: 100% !important;
       // padding: 10px 16px;
-    
     }
-   
 
     .menu-item {
       width: 100% !important;
@@ -262,3 +260,18 @@
     }
   }
 }
+
+.ant-menu-item:hover {
+  background-color: #e6f7ff !important;
+  color: #1677ff !important;
+}
+
+/* Tooltip styling if needed */
+.ant-tooltip-inner {
+  max-width: 200px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  background-color: #ffffff !important;
+  color: #000000 !important;
+}

package/core/lib/hooks/index.js

@@ -1,19 +1,9 @@
-
-
-
 import useDeviceDetect from './device-detect';
 
 import useWindowSize from './use-window-size';
 
 import useFormUtils from './../utils/form/form.utils';
 import useLocation from './use-location';
+import { useOtpTimer } from './use-otp-timer';
 
-
-export {
-    useDeviceDetect,
-    useWindowSize,
-
-
-    useFormUtils,
-    useLocation
-}
+export { useDeviceDetect, useWindowSize, useOtpTimer, useFormUtils, useLocation };

package/core/lib/hooks/use-otp-timer.js

@@ -0,0 +1,99 @@
+import { useState, useEffect, useRef } from 'react';
+
+/**
+ * Custom hook to manage an OTP (One-Time Password) countdown timer.
+ *
+ * Features:
+ * - Can start a timer directly with seconds.
+ * - Can start a timer using an expiry timestamp (from backend).
+ * - Provides formatted remaining time (MM:SS).
+ * - Tracks whether the timer has expired.
+ *
+ * @returns {Object} API
+ * @returns {number} API.remaining - Remaining seconds.
+ * @returns {boolean} API.expired - Whether the timer has expired.
+ * @returns {string} API.formatted - Formatted remaining time (MM:SS).
+ * @returns {(seconds: number) => void} API.start - Start timer with seconds.
+ * @returns {(expirytime: string) => void} API.startFromExpiry - Start timer using expiry string (e.g. "2025-09-04T12:13:09.000Z").
+ *
+ * @example
+ * const { remaining, expired, formatted, start, startFromExpiry } = useOtpTimer();
+ *
+ * // Start with 30 seconds
+ * useEffect(() => {
+ *   start(30);
+ * }, []);
+ *
+ * // OR start from backend expiry timestamp
+ * useEffect(() => {
+ *   startFromExpiry("2025-09-04T12:13:09.000Z");
+ * }, []);
+ *
+ * return (
+ *   <div>
+ *     <p>Time left: {formatted}</p>
+ *     {expired && <p>OTP expired!</p>}
+ *   </div>
+ * );
+ */
+
+// helper to format time
+const formatTime = (seconds) => {
+  const minutes = Math.floor((seconds % 3600) / 60);
+  const secs = seconds % 60;
+  return `${String(minutes).padStart(2, '0')}:${String(secs).padStart(2, '0')}`;
+};
+
+export const useOtpTimer = () => {
+  const [remaining, setRemaining] = useState(0);
+  const [expired, setExpired] = useState(false);
+  const intervalRef = useRef(null);
+
+  // Start timer by passing expiry string from backend
+  const startFromExpiry = (expirytime) => {
+    if (!expirytime) {
+      setRemaining(0);
+      setExpired(true);
+      return;
+    }
+
+    // Handle backend expiry string
+    const expiryTime = new Date(expirytime).getTime();
+    const now = Date.now();
+    const seconds = Math.max(0, Math.floor((expiryTime - now) / 1000));
+
+    start(seconds);
+  };
+
+  // Generic start (seconds)
+  const start = (seconds) => {
+    clearInterval(intervalRef.current);
+
+    if (!seconds || seconds <= 0) {
+      setRemaining(0);
+      setExpired(true);
+      return;
+    }
+
+    setRemaining(seconds);
+    setExpired(false);
+
+    intervalRef.current = setInterval(() => {
+      setRemaining((prev) => {
+        if (prev <= 1) {
+          clearInterval(intervalRef.current);
+          setExpired(true);
+          return 0;
+        }
+        return prev - 1;
+      });
+    }, 1000);
+  };
+
+  // Cleanup on unmount
+  useEffect(() => {
+    return () => clearInterval(intervalRef.current);
+  }, []);
+
+  return { remaining, expired, formatted: formatTime(remaining), start, startFromExpiry };
+};