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

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/elements/basic/rangepicker/rangepicker.js

@@ -1,46 +1,135 @@
-import { DatePicker } from 'antd';
+/**
+ * @file rangepicker.js
+ * @description A reusable, enhanced Ant Design RangePicker component.
+ *
+ * Features:
+ * - Manual selections require "Apply" button confirmation
+ * - Preset ranges apply immediately without confirmation
+ * - Optimized state management and event handling
+ */
+
+import { useCallback, useRef, useState } from 'react';
+import { DatePicker, Space } from 'antd';
 import moment from 'moment-timezone';
 import PropTypes from 'prop-types';
+import { useTranslation } from 'react-i18next';
+import Button from '../button/button';
 import './rangepicker.scss';
 
+/**
+ * Enhanced RangePicker with Apply/Cancel controls for manual selections.
+ * @param {object} props
+ * @param {moment.Moment[]} props.value - Current applied date range
+ * @param {function(moment.Moment[]): void} props.onChange - Callback when range is applied
+ * @param {string} [props.format='DD/MM/YYYY'] - Date display format
+ * @param {object} [props.ranges] - Preset date ranges
+ * @param {boolean} [props.allowClear=false] - Whether to show clear button
+ * @param {boolean} [props.inputReadOnly=true] - Whether input is read-only
+ */
+
 const { RangePicker } = DatePicker;
 
-export default function RangePickerComponent({ onChange, value, ranges }) {
-  // value is still: [moment, moment]
-  const startDate = value[0];
-  const endDate = value[1];
+export default function RangePickerComponent({
+  value,
+  onChange,
+  format = 'DD/MM/YYYY',
+  ranges,
+  allowClear = false,
+  inputReadOnly = true,
+  ...restProps
+}) {
+  const { t } = useTranslation();
+
+  // Temporary range during selection (before Apply is clicked)
+  const [tempRange, setTempRange] = useState(null);
+  const [isOpen, setIsOpen] = useState(false);
+
+  // Ref to track if a selection just happened, to prevent the picker from closing.
+  const selectionJustHappened = useRef(false);
 
-  function handleChange(dates) {
-    if (!dates) {
-      onChange(null);
+  /**
+   * Handles any completed date selection (both manual and preset).
+   * It updates the temporary range and sets a flag to keep the picker open.
+   */
+  const handleChange = useCallback((dates) => {
+    setTempRange(dates || []);
+    selectionJustHappened.current = true;
+  }, []);
+
+  /**
+   * Handles picker open/close events.
+   * Prevents closing after a selection, requiring user to click Apply/Cancel.
+   */
+  const handleOpenChange = useCallback((open) => {
+    // If the picker is trying to close, check if it was due to a selection.
+    if (!open && selectionJustHappened.current) {
+      // It was a selection, so ignore the close request and reset the flag.
+      selectionJustHappened.current = false;
       return;
     }
 
-    // Convert dayjs → moment so your external code does NOT break
-    const converted = [moment(dates[0].toDate()), moment(dates[1].toDate())];
+    // For all other cases (opening, or closing by clicking outside), proceed as normal.
+    if (open) {
+      // Reset temp range when opening for a fresh selection.
+      setTempRange(null);
+    }
+    setIsOpen(open);
+  }, []);
+
+  /**
+   * Applies the temporary range and closes picker
+   */
+  const handleApply = useCallback(() => {
+    if (tempRange?.length === 2 && onChange) {
+      onChange(tempRange);
+    }
+    selectionJustHappened.current = false; // Clear the flag
+    setIsOpen(false);
+  }, [tempRange, onChange]);
 
-    onChange(converted);
-  }
+  /**
+   * Cancels selection and closes picker
+   */
+  const handleCancel = useCallback(() => {
+    selectionJustHappened.current = false; // Clear the flag
+    setTempRange(null);
+    setIsOpen(false);
+  }, []);
 
-  // Convert your old "ranges" object into AntD presets array
-  const presets = Object.entries(ranges).map(([label, range]) => ({
-    label,
-    value: range,
-  }));
+  // Memoized preset ranges - use provided ranges or default set
+  const defaultRanges = useRef({
+    Today: [moment(), moment()],
+    Yesterday: [moment().subtract(1, 'days').startOf('day'), moment().subtract(1, 'days').endOf('day')],
+    'This Week': [moment().startOf('week'), moment().endOf('week')],
+    'Last Week': [moment().subtract(1, 'week').startOf('week'), moment().subtract(1, 'week').endOf('week')],
+    'This Month': [moment().startOf('month'), moment().endOf('month')],
+    'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
+  }).current;
 
   return (
-    <div className="rangepicker">
-      <RangePicker
-        allowClear={false}
-        inputReadOnly
-        format="DD/MM/YYYY"
-        // moment → allowed
-        value={[startDate, endDate]}
-        onChange={handleChange}
-        presets={presets}
-        ranges={ranges}
-      />
-    </div>
+    <RangePicker
+      allowClear={allowClear}
+      inputReadOnly={inputReadOnly}
+      format={format}
+      value={tempRange || value}
+      open={isOpen}
+      onOpenChange={handleOpenChange}
+      onChange={handleChange}
+      ranges={ranges !== undefined ? ranges : defaultRanges}
+      {...restProps}
+      renderExtraFooter={() => (
+        <div style={{ width: '100%', display: 'flex', justifyContent: 'flex-end', order: 1 }}>
+          <Space>
+            <Button size="small" onClick={handleCancel}>
+              {t('Cancel')}
+            </Button>
+            <Button type="primary" size="small" onClick={handleApply}>
+              {t('Apply')}
+            </Button>
+          </Space>
+        </div>
+      )}
+    />
   );
 }
 

package/core/lib/elements/basic/switch/switch.js

@@ -1,36 +1,46 @@
 /**
  * Component for antd switch
  */
-
-import React, { useState, useContext, useEffect } from 'react';
-import { GlobalContext } from '../../../Store';
-
+import React, { useContext } from 'react';
 import { Switch as AntdSwitch } from 'antd';
-
+import { GlobalContext } from '../../../Store';
 import PropTypes from 'prop-types';
 
-export default function Switch({ onChange, checked }) {
+export default function Switch({
+  checked,
+  defaultChecked,
+  onChange,
+  disabled,
+  id,
+  size,
+  checkedChildren,
+  unCheckedChildren,
+  className,
+  style,
+}) {
   const { state } = useContext(GlobalContext);
 
-  useEffect(() => {
-    // Reacting to theme changes
-  }, [state.theme.colors]);
-
   return (
-    <div>
-      <>
-        <AntdSwitch
-          checked={checked}
-          onChange={onChange}
-          // checked={ }
-          style={{
-            backgroundColor: checked ? state.theme.colors.primaryButtonBg : state.theme.colors.primaryButtonDisabledBg, // Use disabled color when unchecked
-            borderColor: checked ? state.theme.colors.primaryButtonBg : state.theme.colors.primaryButtonDisabledBg,
-          }}
-          listType="picture-card"
-        />
-      </>
-    </div>
+    <AntdSwitch
+      id={id}
+      checked={checked}
+      defaultChecked={defaultChecked}
+      onChange={onChange}
+      disabled={disabled}
+      size={size}
+      checkedChildren={checkedChildren}
+      unCheckedChildren={unCheckedChildren}
+      className={className}
+      style={{
+        backgroundColor: checked
+          ? state.theme.colors.primaryButtonBg
+          : state.theme.colors.primaryButtonDisabledBg,
+        borderColor: checked
+          ? state.theme.colors.primaryButtonBg
+          : state.theme.colors.primaryButtonDisabledBg,
+        ...style,
+      }}
+    />
   );
 }
 

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 };
+};