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

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/dragabble-wrapper/draggable-wrapper.js

@@ -1,61 +1,138 @@
-import React, { useRef } from "react";
-import { useDrag, useDrop } from "react-dnd";
+import React, { useRef } from 'react';
+import { useDrag, useDrop } from 'react-dnd';
 
-const ItemTypes = { PANEL: "panel" };
+export default function DraggableWrapper({ id, index, movePanel, item, dragEnabled, level, parentId, onCrossLevelMove, canAcceptChildren }) {
 
-export default function DraggableWrapper({ id, index, movePanel, title, dragEnabled = true }) {
-  const ref = useRef(null);
+  const autoScrollWindow = (monitor) => {
+  const offset = monitor.getClientOffset();
+  if (!offset) return;
 
-  const [, drop] = useDrop({
-    accept: ItemTypes.PANEL,
-    hover(item, monitor) {
-      if (!dragEnabled) return; // ignore hover if dragging is disabled
-      if (!ref.current) return;
+  const EDGE = 80;
+  const SPEED = 20;
 
-      const dragIndex = item.index;
-      const hoverIndex = index;
+  const viewportHeight = window.innerHeight;
 
-      if (dragIndex === hoverIndex) return;
+  // 🔼 scroll UP
+  if (offset.y < EDGE) {
+    window.scrollBy(0, -SPEED);
+  }
 
-      const hoverBoundingRect = ref.current.getBoundingClientRect();
-      const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
-      const clientOffset = monitor.getClientOffset();
-      const hoverClientY = clientOffset.y - hoverBoundingRect.top;
+  // 🔽 scroll DOWN
+  if (offset.y > viewportHeight - EDGE) {
+    window.scrollBy(0, SPEED);
+  }
+};
 
-      if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY) return;
-      if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY) return;
+  const [{ isDragging }, drag] = useDrag({
+    type: 'PANEL',
+    item: { id, index, level, parentId },
+    canDrag: dragEnabled,
+    collect: (monitor) => ({
+      isDragging: monitor.isDragging(),
+    }),
+  });
 
-      movePanel(dragIndex, hoverIndex);
-      item.index = hoverIndex;
-    },
+  const [{ isOver, canDrop }, drop] = useDrop({
+    accept: 'PANEL',
+     hover: (dragItem, monitor) => {
+    //  THIS FIXES BOTTOM → TOP
+    autoScrollWindow(monitor); 
+
+    if (dragItem.index === index) return;
+
+    if (
+      dragItem.level === level &&
+      dragItem.parentId === parentId
+    ) {
+      movePanel(dragItem.index, index);
+      dragItem.index = index; //  keep in sync
+    }
+  },
+
+    canDrop: (item) => dragEnabled,
+     drop: (dragItem, monitor) => {
+    if (monitor.didDrop()) return;
+
+    if (
+      dragItem.level !== level ||
+      dragItem.parentId !== parentId
+    ) {
+      onCrossLevelMove?.(dragItem, {
+        targetLevel: level,
+        targetParentId: parentId,
+        targetIndex: index,
+      });
+    }
+  },
+    collect: (monitor) => ({
+      isOver: monitor.isOver({ shallow: true }),
+      canDrop: monitor.canDrop(),
+    }),
   });
 
-  const [{ isDragging }, drag] = useDrag({
-    type: ItemTypes.PANEL,
-    item: { id, index },
-    canDrag: dragEnabled, // only allow dragging if dragEnabled
+  // Drop zone for making items children of this item
+  const [{ isOverChild, canDropChild }, dropChild] = useDrop({
+    accept: 'PANEL',
+    canDrop: (item) => dragEnabled && item.id !== id && canAcceptChildren,
+    drop: (item, monitor) => {
+      if (monitor.didDrop()) return;
+
+      if (onCrossLevelMove && item.id !== id) {
+        // Drop as child of this item
+        onCrossLevelMove(item, { targetLevel: level + 1, targetParentId: id, targetIndex: 0 });
+      }
+    },
     collect: (monitor) => ({
-      isDragging: monitor.isDragging(),
+      isOverChild: monitor.isOver({ shallow: true }),
+      canDropChild: monitor.canDrop(),
     }),
   });
 
-  drag(drop(ref));
+  const backgroundColor = isOver && canDrop ? '#bae7ff' : isDragging ? '#e6f7ff' : 'transparent';
+  const childZoneBackgroundColor = isOverChild && canDropChild ? '#d4f4dd' : 'transparent';
 
   return (
-    <div
-      ref={ref}
-      style={{
-        display: "flex",
-        width: "100%",
-        cursor: dragEnabled ? "grab" : "default", // show cursor only if draggable
-        opacity: isDragging ? 0.6 : 1,
-        transition: "transform 0.2s ease, opacity 0.2s ease",
-        transform: isDragging ? "scale(1.05)" : "scale(1)",
-        boxShadow: isDragging ? "0px 5px 10px rgba(0,0,0,0.15)" : "none",
-        padding: "5px 0",
-      }}
-    >
-      {title}
+    <div ref={drop} style={{ width: '100%' }}>
+      <div
+        ref={drag}
+        style={{
+          opacity: isDragging ? 0.5 : 1,
+          cursor: dragEnabled ? 'move' : 'default',
+          // padding: '8px',
+          backgroundColor,
+          transition: 'all 0.2s ease',
+          border: isOver && canDrop ? '2px dashed #1890ff' : '2px solid transparent',
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+        }}
+      >
+        <div style={{ flex: 1 }}>
+          {dragEnabled && <span style={{ marginRight: 8, color: '#999' }}>⋮⋮</span>}
+          <strong>{item.name}</strong>
+          {dragEnabled ?( <span style={{ marginLeft: 8, fontSize: 11, color: '#999' }}>(Level {level})</span>):(<span style={{ marginLeft: 8, fontSize: 11, color: '#999' }}>{item.path}</span>)}
+        </div>
+
+        {canAcceptChildren && dragEnabled && (
+          <div
+            ref={dropChild}
+            onClick={(e) => e.stopPropagation()}
+            style={{
+              padding: '4px 12px',
+              marginLeft: 8,
+              backgroundColor: childZoneBackgroundColor,
+              border: isOverChild && canDropChild ? '2px solid #52c41a' : '1px dashed #d9d9d9',
+              borderRadius: 4,
+              fontSize: 11,
+              color: isOverChild && canDropChild ? '#52c41a' : '#999',
+              cursor: 'default',
+              transition: 'all 0.2s ease',
+            }}
+          >
+            {isOverChild && canDropChild ? '✓ Drop as child' : '↳ Drop here'}
+          </div>
+        )}
+      </div>
     </div>
   );
 }

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,
+      }}
+    />
   );
 }
 
@@ -55,4 +65,4 @@ Switch.propTypes = {
   className: PropTypes.string,
   /** A custom style object for the switch component. */
   style: PropTypes.object,
-};
+};

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