ui-soxo-bootstrap-core 2.4.25-dev.9 → 2.4.26

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,7 +248,9 @@
       padding: 0px;
       // width: 100% !important;
       // padding: 10px 16px;
+    
     }
+   
 
     .menu-item {
       width: 100% !important;
@@ -260,18 +262,3 @@
     }
   }
 }
-
-.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,135 +1,46 @@
-/**
- * @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 { DatePicker } 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({
-  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);
+export default function RangePickerComponent({ onChange, value, ranges }) {
+  // value is still: [moment, moment]
+  const startDate = value[0];
+  const endDate = value[1];
 
-  /**
-   * 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;
+  function handleChange(dates) {
+    if (!dates) {
+      onChange(null);
       return;
     }
 
-    // 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]);
+    // Convert dayjs → moment so your external code does NOT break
+    const converted = [moment(dates[0].toDate()), moment(dates[1].toDate())];
 
-  /**
-   * Cancels selection and closes picker
-   */
-  const handleCancel = useCallback(() => {
-    selectionJustHappened.current = false; // Clear the flag
-    setTempRange(null);
-    setIsOpen(false);
-  }, []);
+    onChange(converted);
+  }
 
-  // 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;
+  // Convert your old "ranges" object into AntD presets array
+  const presets = Object.entries(ranges).map(([label, range]) => ({
+    label,
+    value: range,
+  }));
 
   return (
-    <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>
-      )}
-    />
+    <div className="rangepicker">
+      <RangePicker
+        allowClear={false}
+        inputReadOnly
+        format="DD/MM/YYYY"
+        // moment → allowed
+        value={[startDate, endDate]}
+        onChange={handleChange}
+        presets={presets}
+        ranges={ranges}
+      />
+    </div>
   );
 }
 

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

@@ -16,25 +16,6 @@ import { useState, useEffect, useRef } from 'react';
  * @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

package/core/lib/pages/login/login.js

@@ -610,10 +610,10 @@ function LoginPhone({ history, appSettings }) {
                         <Text type="primary">Select Preferred OTP Verification Method</Text>
                         <div className="otp-method-group">
                           <Radio checked={communicationMode === 'email'} onChange={() => setCommunicationMode('email')}>
-                            Email <MailOutlined style={{ marginLeft: 6 }} />
+                            Email <MailOutlined className="otp-icon" style={{ marginLeft: 6 }} />
                           </Radio>
                           <Radio checked={communicationMode === 'mobile'} onChange={() => setCommunicationMode('mobile')}>
-                            SMS <MessageOutlined style={{ marginLeft: 6 }} />
+                            SMS <MessageOutlined  className="otp-icon" style={{ marginLeft: 6 }} />
                           </Radio>
                         </div>
                         {modeError && <p className="otp-mode-error">Please select a communication mode.</p>}

package/core/lib/pages/login/login.scss

@@ -352,10 +352,14 @@ body {
     gap: 30px;
     font-size: 12px;
   }
+  .otp-icon {
+  position: relative;
+  top: 2px;
+}
 
   .ant-radio-wrapper {
     display: flex;
-    align-items: center;
+    // align-items: center;
     gap: 6px;
 
     svg {

package/core/models/dashboard/dashboard.js

@@ -81,20 +81,6 @@ class Dashboard extends Base {
     ];
   }
 
-  loadProcess(id) {
-    return ApiUtils.get({
-      url: `process/${id}`,
-    });
-  }
-  
-  processLog(formBody) {
-    return ApiUtils.post({
-      url: `process/process-log`,
-      formBody,
-    });
-  }
-
-
   /**
    * Function to load dashboards based on user information
    * @param {*} user