ui-soxo-bootstrap-core 2.6.14 → 2.6.16

package/core/components/landing-api/landing-api.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useContext } from 'react';
+import React, { useState, useEffect, useContext, useRef } from 'react';
 
 import { Route, Switch } from 'react-router-dom';
 
@@ -18,13 +18,33 @@ import PropTypes from 'prop-types';
 
 import { MenusAPI, CoreScripts } from '../../models';
 
+const motivatingMessages = [
+  'Setting things up for a great start...',
+  'Good things are loading. Stay with us.',
+  'Almost there. Preparing your workspace.',
+  'You are one moment away from your dashboard.',
+  'Getting everything ready for you.',
+  'Great care takes a second. Loading now.',
+];
+
+function getRandomMessage(previousMessage = '') {
+  const options = motivatingMessages.filter((message) => message !== previousMessage);
+
+  if (!options.length) {
+    return motivatingMessages[0];
+  }
+
+  const randomIndex = Math.floor(Math.random() * options.length);
+  return options[randomIndex];
+}
+
 /**
  * Landing API
  *
  * @param {*} param0
  * @returns
  */
-export default function LandingApi({ history, CustomComponents, CustomModels, appSettings, ...props }) {
+export default function LandingApi({ history, CustomComponents, CustomModels, appSettings, transitionPending = false, onHomeReady, ...props }) {
   const [loader, setLoader] = useState(false);
 
   // const [modules, setModules] = useState([]);
@@ -34,8 +54,11 @@ export default function LandingApi({ history, CustomComponents, CustomModels, ap
   const { dispatch, user = {} } = useContext(GlobalContext);
 
   const [allModules, setAllModules] = useState();
+  const homeReadyNotifiedRef = useRef(false);
+  const messageIntervalRef = useRef(null);
 
   const [meta, setMeta] = useState({});
+  const [loadingMessage, setLoadingMessage] = useState('');
 
   // const [reports, setReports] = useState([]);
 
@@ -70,6 +93,46 @@ export default function LandingApi({ history, CustomComponents, CustomModels, ap
     initializeUserMenus();
   }, []);
 
+  useEffect(() => {
+    if (!transitionPending) {
+      homeReadyNotifiedRef.current = false;
+      return;
+    }
+
+    if (!loader && allModules && !homeReadyNotifiedRef.current) {
+      homeReadyNotifiedRef.current = true;
+      if (typeof onHomeReady === 'function') {
+        onHomeReady();
+      }
+    }
+  }, [transitionPending, loader, allModules, onHomeReady]);
+
+  useEffect(() => {
+    if (!loader) {
+      setLoadingMessage('');
+
+      if (messageIntervalRef.current) {
+        clearInterval(messageIntervalRef.current);
+        messageIntervalRef.current = null;
+      }
+
+      return;
+    }
+
+    setLoadingMessage((previousMessage) => getRandomMessage(previousMessage));
+
+    messageIntervalRef.current = setInterval(() => {
+      setLoadingMessage((previousMessage) => getRandomMessage(previousMessage));
+    }, 2200);
+
+    return () => {
+      if (messageIntervalRef.current) {
+        clearInterval(messageIntervalRef.current);
+        messageIntervalRef.current = null;
+      }
+    };
+  }, [loader]);
+
   /**
    * Initialize the user menus
    */
@@ -245,6 +308,7 @@ export default function LandingApi({ history, CustomComponents, CustomModels, ap
           <Card className="skeleton-card">
             <div className="skeleton-wrapper">
               <Skeleton paragraph={{ rows: 4 }} />
+              <p className="motivating-text">{loadingMessage}</p>
             </div>
           </Card>
         ) : (

package/core/components/landing-api/landing-api.scss

@@ -11,9 +11,31 @@
     }
 
     .skeleton-wrapper {
+        .motivating-text {
+            margin-top: 14px;
+            margin-bottom: 4px;
+            font-size: 14px;
+            line-height: 20px;
+            text-align: center;
+            color: #5e6d86;
+            font-weight: 500;
+            animation: skeletonTextFade 0.4s ease-in-out;
+        }
     }
 
     .wrapper-loader {
         margin: 20px;
     }
 }
+
+@keyframes skeletonTextFade {
+    from {
+        opacity: 0;
+        transform: translateY(2px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}

package/core/lib/elements/basic/country-phone-input/country-phone-input.js

@@ -16,7 +16,7 @@ import PropTypes from "prop-types";
 import './phone-input.scss';
 
 
-export default function CountryPhoneInput({ value, onChange, disabled, disableCountryCode, required, defaultCountryCode, onBlur }) {
+export default function CountryPhoneInput({ value, onChange, disabled, disableCountryCode, required, defaultCountryCode, onBlur, onKeyDown }) {
 
   let inputRef = useRef();
 
@@ -85,7 +85,7 @@ export default function CountryPhoneInput({ value, onChange, disabled, disableCo
         // country={disableCountryCode ? false : 'in'}
         value={phone}
         onChange={handleInput}
-        inputProps={{ required: required }}
+        inputProps={{ required: required, onKeyDown: onKeyDown }}
         disabled={disabled}
         onBlur={onBlur}
       />

package/core/lib/elements/basic/dragabble-wrapper/draggable-wrapper.js

@@ -102,7 +102,7 @@ export default function DraggableWrapper({ id, index, movePanel, item, dragEnabl
         >
           <div style={{ flex: 1 }}>
             {dragEnabled && <span style={{ marginRight: 8 }}>⋮⋮</span>}
-            <span>{item.name}</span>
+            <span>{item.caption}</span>
             {dragEnabled ? (
               <span style={{ marginLeft: 8, fontSize: 11, color: '#999' }}>(Level {level})</span>
             ) : (

package/core/lib/elements/basic/menu-tree/menu-tree.js

@@ -79,7 +79,7 @@ export const MenuTree = ({ menus, selectedMenus = [], toggleMenu, parentId = nul
             {/* Left Side */}
             <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
               {showCheckbox && <Checkbox checked={selectedMenus.includes(menu.id)} onChange={(e) => onParentChange(e.target.checked)} />}
-              <span>{menu.title || menu.caption}</span>
+              <span>{menu.caption}</span>
             </div>
             <Tag color={menu.is_visible === true ? 'green' : 'blue'}>{menu.is_visible === true ? 'VISIBLE' : 'HIDDEN'}</Tag>{' '}
           </div>
@@ -110,7 +110,7 @@ export const MenuTree = ({ menus, selectedMenus = [], toggleMenu, parentId = nul
                       onChange={(e) => onParentChange(e.target.checked)}
                     />
                   )}
-                  <span>{menu.title || menu.caption}</span>
+                  <span>{menu.caption}</span>
                 </div>
                 <Tag color={menu.is_visible === true ? 'green' : 'blue'}>{menu.is_visible === true ? 'VISIBLE' : 'HIDDEN'}</Tag>{' '}
               </div>

package/core/lib/utils/common/common.utils.js

@@ -4,6 +4,7 @@ Implements utility functions to be used across project
 
 /*eslint no-useless-escape:"off",eqeqeq: "off"*/
 import moment from 'moment';
+import { parsePhoneNumberFromString, isValidPhoneNumber } from 'libphonenumber-js';
 
 export function IsObjectHaveKeys(obj) {
   return obj && typeof obj == 'object' && Object.keys(obj).length;
@@ -221,3 +222,51 @@ export function safeJSON(value) {
     return null;
   }
 }
+
+/**
+ * Convert +countrycode phone into form compatible structure
+ * @param {string} phone
+ * @returns {object|null}
+ */
+export const formatPhoneForForm = (phone) => {
+  if (!phone) return null;
+
+  const parsed = parsePhoneNumberFromString(phone);
+
+  if (!parsed) return null;
+
+  return {
+    value: parsed.nationalNumber,
+    code: {
+      dialCode: parsed.countryCallingCode,
+      countryCode: parsed.country?.toLowerCase(),
+    },
+    valid: true,
+  };
+};
+
+/**
+ * Validates a phone number from CountryPhoneInput.
+ * Builds full number using country dial code and checks validity.
+ *
+ * @param {Object} _ - Ant Design rule parameter (unused)
+ * @param {Object} val - Phone value object from form
+ * @returns {Promise<void>}
+ */
+export const phoneValidator = (_, val) => {
+  if (!val || !val.value || !val?.code?.dialCode) {
+    return Promise.resolve();
+  }
+
+  const fullPhone = `+${val.code.dialCode}${val.value}`;
+
+  return isValidPhoneNumber(fullPhone) ? Promise.resolve() : Promise.reject('Invalid mobile number');
+};
+
+// Returns phone number with country code (e.g., +919876543210)
+export const formatPhoneWithCountryCode = (phone) => {
+  if (phone && typeof phone === 'object' && phone.code) {
+    return `+${phone.code.dialCode}${phone.value}`;
+  }
+  return phone;
+};

package/core/lib/utils/index.js

@@ -14,7 +14,7 @@ import { GetData, PostData, PutData, DeleteData } from './http/http.utils';
 
 import { getExportData } from './generic/generic.utils';
 
-import { ConvertBytesToArray, safeJSON } from './common/common.utils';
+import { ConvertBytesToArray, safeJSON, formatPhoneForForm, phoneValidator, formatPhoneWithCountryCode } from './common/common.utils';
 
 import SettingsUtil from './setting.utils';
 
@@ -37,4 +37,7 @@ export {
   SettingsUtil,
   FormUtils,
   safeJSON,
+  formatPhoneForForm,
+  phoneValidator,
+  formatPhoneWithCountryCode,
 };

package/core/models/roles/components/role-add/role-add.js

@@ -301,7 +301,7 @@ const MenuTree = ({ menus, selectedMenus, toggleMenu, parentId = null }) => {
                     }
                   }}
                 />
-                <span>{menu.title || menu.caption}</span>
+                <span>{menu.caption}</span>
               </div>
               <Tag color={menu.is_visible === true ? 'green' : 'blue'}>{menu.is_visible === true ? 'VISIBLE' : 'HIDDEN'}</Tag>{' '}
             </div>
@@ -327,7 +327,7 @@ const MenuTree = ({ menus, selectedMenus, toggleMenu, parentId = null }) => {
                     onClick={(e) => e.stopPropagation()}
                   >
                     <Checkbox checked={parentChecked} indeterminate={parentIndeterminate} onChange={(e) => onParentChange(e.target.checked)} />
-                    <span>{menu.title || menu.caption}</span>
+                    <span>{menu.caption}</span>
                   </div>
                   <Tag color={menu.is_visible === true ? 'green' : 'blue'}>{menu.is_visible === true ? 'VISIBLE' : 'HIDDEN'}</Tag>{' '}
                 </div>

package/core/models/staff/components/staff-add/staff-add.js

@@ -1,8 +1,9 @@
 import React, { useState, useEffect, useRef } from 'react';
 
 import { Modal, Tabs, Input, Form, Row, Col, message, Checkbox, Select } from 'antd';
-import { useTranslation, Button } from './../../../../lib/';
+import { useTranslation, Button, CountryPhoneInput, phoneValidator as libPhoneValidator, formatPhoneForForm } from './../../../../lib/';
 import { UsersAPI } from '../../..';
+import { formatPhoneWithCountryCode } from '../../../../lib/utils/common/common.utils';
 
 const StaffAdd = ({ visible, onCancel, staffId, staffData, onSuccess }) => {
   const [form] = Form.useForm();
@@ -61,18 +62,6 @@ const StaffAdd = ({ visible, onCancel, staffId, staffData, onSuccess }) => {
     }
   }, [visible]);
 
-  const phoneValidator = (_, value) => {
-    if (!value) {
-      return Promise.resolve(); // not required
-    }
-
-    if (!/^\d{10}$/.test(value)) {
-      return Promise.reject('Phone number must be 10 digits');
-    }
-
-    return Promise.resolve();
-  };
-
   /** -------------------------------
    *  API CALL – Designations
    * ------------------------------- */
@@ -201,8 +190,8 @@ const StaffAdd = ({ visible, onCancel, staffId, staffData, onSuccess }) => {
       shortName: data.shortName,
       description: data.description,
       designation: data.designationPtr,
-      phone1: data.phone || data.mobile,
-      phone2: data.alternateMobile,
+      phone1: formatPhoneForForm(data.phone || data.mobile),
+      phone2: formatPhoneForForm(data.alternateMobile),
       email1: data.email,
       email2: data.alternateEmail,
       slno: data.slNo,
@@ -223,14 +212,17 @@ const StaffAdd = ({ visible, onCancel, staffId, staffData, onSuccess }) => {
   const handleFinish = async (values) => {
     setLoading(true);
 
+    let phone1Value = formatPhoneWithCountryCode(values.phone1);
+    let phone2Value = formatPhoneWithCountryCode(values.phone2);
+
     const payload = {
       id: values.id,
       shortName: values.shortName,
       description: values.description,
       designationPtr: values.designation ?? existing.designationPtr ?? null,
-      phone: values.phone1 ?? existing.phone ?? null,
-      mobile: values.phone1 ?? existing.mobile ?? null,
-      alternateMobile: values.phone2 ?? existing.alternateMobile ?? null,
+      phone: phone1Value ?? existing.phone ?? null,
+      mobile: phone1Value ?? existing.mobile ?? null,
+      alternateMobile: phone2Value ?? existing.alternateMobile ?? null,
       email: values.email1 ?? existing.email ?? null,
       alternateEmail: values.email2 ?? existing.alternateEmail ?? null,
       remarks: values.remarks ?? existing.remarks ?? null,
@@ -331,26 +323,22 @@ const StaffAdd = ({ visible, onCancel, staffId, staffData, onSuccess }) => {
                 </Form.Item>
               </Col> */}
               <Col span={6}>
-                <Form.Item label="Phone Number" name="phone1" rules={[{ validator: phoneValidator }]}>
-                  <Input
-                    maxLength={10}
-                    autoComplete="off"
-                    placeholder="Enter Phone Number"
-                    inputMode="numeric"
-                    onChange={(e) => (e.target.value = e.target.value.replace(/\D/g, ''))}
+                <Form.Item label="Phone Number" name="phone1" validateTrigger="onBlur" rules={[{ validator: libPhoneValidator }]}>
+                  <CountryPhoneInput
+                    defaultCountryCode={process.env.REACT_APP_COUNTRYCODE}
+                    enableSearch
+                    inputStyle={{ width: '100%' }}
                     onKeyDown={handleEnterKey}
                   />
                 </Form.Item>
               </Col>
 
               <Col span={6}>
-                <Form.Item label="Alternate Phone Number" name="phone2" rules={[{ validator: phoneValidator }]}>
-                  <Input
-                    maxLength={10}
-                    placeholder="Enter Phone Number"
-                    autoComplete="off"
-                    inputMode="numeric"
-                    onChange={(e) => (e.target.value = e.target.value.replace(/\D/g, ''))}
+                <Form.Item label="Alternate Phone Number" name="phone2" validateTrigger="onBlur" rules={[{ validator: libPhoneValidator }]}>
+                  <CountryPhoneInput
+                    defaultCountryCode={process.env.REACT_APP_COUNTRYCODE}
+                    enableSearch
+                    inputStyle={{ width: '100%' }}
                     onKeyDown={handleEnterKey}
                   />
                 </Form.Item>

package/core/models/users/components/user-add/user-add.js

@@ -6,7 +6,7 @@ import { Skeleton, Typography, message, Switch, Form, Input, Select, Checkbox, R
 
 import AsyncSelect from 'react-select/async';
 
-import { Table, Card, Button, JSONInput, GlobalContext, safeJSON } from './../../../../lib/';
+import { Table, Card, Button, JSONInput, GlobalContext, safeJSON, CountryPhoneInput, phoneValidator } from './../../../../lib/';
 
 import { ModelsAPI, PagesAPI, RolesAPI } from '../../..';
 
@@ -357,6 +357,10 @@ const UserAdd = ({ model, callback, edit, history, formContent, match, additiona
    * Submit values
    */
   const onSubmit = (values) => {
+    const mobileData = values.mobile;
+
+    const mobileWithCountryCode = `+${mobileData.code.dialCode}${mobileData.value}`;
+
     values.defaultBranch = String(values.defaultBranch);
 
     /**If PanelOpen is open and edit mode then password will be existing password else new password*/
@@ -378,6 +382,7 @@ const UserAdd = ({ model, callback, edit, history, formContent, match, additiona
     values = {
       ...values,
       auth_type: 'LDAP',
+      mobile: mobileWithCountryCode,
       FA: authentication,
     };
 
@@ -597,23 +602,10 @@ const UserAdd = ({ model, callback, edit, history, formContent, match, additiona
               <Form.Item
                 name="mobile"
                 label="Mobile"
-                rules={[
-                  { required: true, message: 'Please enter your mobile number' },
-                  {
-                    pattern: /^[0-9]{10}$/,
-                    message: 'Mobile number must be exactly 10 digits',
-                  },
-                ]}
+                validateTrigger="onBlur"
+                rules={[{ required: true, message: 'Mobile number required' }, { validator: phoneValidator }]}
               >
-                <Input
-                  placeholder="Enter Mobile"
-                  maxLength={10}
-                  onKeyPress={(e) => {
-                    if (!/[0-9]/.test(e.key)) {
-                      e.preventDefault();
-                    }
-                  }}
-                />
+                <CountryPhoneInput defaultCountryCode={process.env.REACT_APP_COUNTRYCODE} enableSearch inputStyle={{ width: '100%' }} />
               </Form.Item>
             </Col>
             <Col span={8}>

package/core/models/users/components/user-add/user-edit.js

@@ -3,6 +3,7 @@ import { Modal, Button, Skeleton } from 'antd';
 import { EditOutlined } from '@ant-design/icons';
 import UserAdd from '../../../../models/users/components/user-add/user-add';
 import { UsersAPI } from '../../..';
+import { formatPhoneForForm } from '../../../../lib';
 
 export default function UserEdit(record) {
   const [visible, setVisible] = useState(false);
@@ -44,13 +45,15 @@ export default function UserEdit(record) {
           // extract dbPtr (branch code)
           const defaultBranchCode = defaultBranchObj?.branch_id ? Number(defaultBranchObj.branch_id) : undefined;
 
+          const formattedMobile = formatPhoneForForm(apiData.mobile);
+
           // Construct mapped data object
           const mappedData = {
             id: apiData.id,
             user_type: otherDetails.user_type || apiData.user_type,
             name: apiData.name,
             email: apiData.email,
-            mobile: apiData.mobile,
+            mobile: formattedMobile,
             designation: apiData.designation_code,
             department: Number(apiData.department_id),
             // Handle selected branches and default branch
@@ -63,7 +66,7 @@ export default function UserEdit(record) {
             // Handle doctor codes
             default_code: apiData.doctor_code,
             doctor_code: apiData.doctor_code,
-            staff_code:apiData.staff_id,
+            staff_code: apiData.staff_id,
             auth_type: apiData.auth_type,
             FA: apiData.FA,
             active: apiData.active ? true : false,

package/core/modules/steps/action-buttons.js

@@ -13,6 +13,8 @@ export default function ActionButtons({
   steps,
   activeStep,
   isStepCompleted,
+  isFullscreen,
+  onToggleFullscreen,
   renderDynamicComponent,
   handlePrevious,
   handleNext,
@@ -35,6 +37,10 @@ export default function ActionButtons({
           Back
         </Button>
 
+        <Button type="default" onClick={onToggleFullscreen}>
+          {isFullscreen ? 'Exit Full Screen' : 'Switch to Full Screen'}
+        </Button>
+
         {/* Skip button */}
         {steps.length > 0 && steps[activeStep]?.allow_skip === 'Y' && (
           <Button type="default" onClick={handleSkip} disabled={activeStep === steps.length - 1}>

package/core/modules/steps/action-buttons.scss

@@ -11,6 +11,7 @@
   overflow-y: auto;
   overflow-x: hidden;
   overscroll-behavior: contain;
+
   padding-bottom: 8px;
 }
 
@@ -27,7 +28,6 @@
   border-top: 1px solid #f0f0f0;
   box-shadow: 0 -2px 10px rgba(15, 23, 42, 0.04);
 
-
   width: 61%;
   padding: 10px;
   position: fixed;
@@ -37,9 +37,15 @@
   display: flex;
   border-radius: 4px;
   box-shadow: -1px -4px 10px 2px #f7f7f76e;
-
+  flex-wrap: wrap;
 
   .ant-btn {
     border-radius: 4px;
   }
-}
+}
+
+.process-steps-page.is-fullscreen .action-buttons-container {
+  width: calc(100% - 24px);
+  left: 12px;
+  right: 12px;
+}

package/core/modules/steps/steps.js

@@ -8,7 +8,7 @@
  * - Handles process submission and optional chaining to the next process.
  * - Provides a collapsible timeline view and action controls.
  */
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { Row, Col, Empty } from 'antd';
 import { Card } from './../../lib';
 import * as genericComponents from './../../lib';
@@ -36,8 +36,11 @@ export default function ProcessStepsPage({ match, CustomComponents = {}, ...prop
   const [timelineCollapsed, setTimelineCollapsed] = useState(false);
   const [showExternalWindow, setShowExternalWindow] = useState(false);
   const [externalWin, setExternalWin] = useState(null);
+  const [isFullscreen, setIsFullscreen] = useState(false);
+  const processStepsRef = useRef(null);
 
   const urlParams = Location.search();
+  const isConsultationMode = String(urlParams?.consultation).toLowerCase() === 'true';
   let processId = urlParams.processId;
   const [currentProcessId, setCurrentProcessId] = useState(processId);
   // Load process details based on the current process ID
@@ -271,13 +274,49 @@ export default function ProcessStepsPage({ match, CustomComponents = {}, ...prop
     };
   }, [activeStep, steps, externalWin]);
 
+  useEffect(() => {
+    const syncFullscreenState = () => {
+      setIsFullscreen(document.fullscreenElement === processStepsRef.current);
+    };
+
+    document.addEventListener('fullscreenchange', syncFullscreenState);
+    syncFullscreenState();
+
+    return () => {
+      document.removeEventListener('fullscreenchange', syncFullscreenState);
+    };
+  }, []);
+
+  const handleToggleFullscreen = async () => {
+    const element = processStepsRef.current;
+    if (!element) return;
+
+    try {
+      if (document.fullscreenElement === element) {
+        if (document.exitFullscreen) {
+          await document.exitFullscreen();
+        }
+        return;
+      }
+
+      if (element.requestFullscreen) {
+        await element.requestFullscreen();
+      }
+    } catch (error) {
+      console.error('Unable to toggle full screen for steps page:', error);
+    }
+  };
+
   /**
    * Renders the main process UI including timeline, step details,
    * and action buttons. This content is reused in both normal view
    * and external window view.
    */
-  const renderContent = () => (
-    <div className="process-steps-page">
+  const renderContent = (attachRef = true) => (
+    <div
+      ref={attachRef ? processStepsRef : null}
+      className={`process-steps-page ${isConsultationMode ? 'consultation-mode' : ''} ${isFullscreen ? 'is-fullscreen' : ''}`}
+    >
       <Card className="process-steps-card">
         <Row gutter={20} className="process-steps-row" align="stretch">
           <Col xs={24} sm={24} lg={timelineCollapsed ? 2 : 6} className="process-steps-timeline-col">
@@ -302,6 +341,8 @@ export default function ProcessStepsPage({ match, CustomComponents = {}, ...prop
               steps={steps}
               activeStep={activeStep}
               isStepCompleted={isStepCompleted}
+              isFullscreen={isFullscreen}
+              onToggleFullscreen={handleToggleFullscreen}
               renderDynamicComponent={DynamicComponent}
               handlePrevious={handlePrevious}
               handleNext={handleNext}
@@ -335,9 +376,9 @@ export default function ProcessStepsPage({ match, CustomComponents = {}, ...prop
           width={props.ExternalWindowWidth || 1000}
           height={props.ExternalWindowHeight || 1000}
         >
-          {renderContent()}
+          {renderContent(false)}
         </ExternalWindow>
-        {renderContent()}
+        {renderContent(true)}
       </>
     );
   }

package/core/modules/steps/steps.scss

@@ -3,6 +3,25 @@
   display: flex;
   flex-direction: column;
   overflow: hidden;
+
+  &.consultation-mode {
+    background: linear-gradient(180deg, #c8d2d6 0%, #d5d7d1 21%, #d9d8c6 40%, #c6cebe 58%, #a8c0c0 71%, #6e9fbb 84%, #367495 93%, #0a4d6e 100%);
+    padding: 12px;
+  }
+
+  &.is-fullscreen {
+    padding: 12px;
+  }
+}
+
+.process-steps-page.consultation-mode .process-steps-card {
+  border: none;
+  background: transparent;
+  box-shadow: none;
+}
+
+.process-steps-page.consultation-mode .process-steps-card > .ant-card-body {
+  padding: 10px;
 }
 
 .process-steps-card {
@@ -49,11 +68,11 @@
   flex: 1;
   max-height: 100%;
   overflow: hidden;
-  background: #fff;
-  border: 1px solid #e5ebf3;
-  border-radius: 14px;
-  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
-  padding: 14px 16px;
+  // background: #fff;
+  // border: 1px solid #e5ebf3;
+  // border-radius: 14px;
+  // box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
+  // padding: 14px 16px;
   position: relative;
   z-index: 2;
 }
@@ -84,8 +103,18 @@
   height: 100%;
   border: none !important;
   border-radius: 12px;
-  background: linear-gradient(180deg, #f4f7fc 0%, #edf2f9 100%);
-  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.8), inset 0 8px 16px rgba(15, 23, 42, 0.08), inset 0 -2px 8px rgba(15, 23, 42, 0.04);
+  background: linear-gradient(135deg, color-mix(in srgb, var(--accent-color) 15%, var(--surface-color)), var(--surface-color));
+
+  border: 1px solid color-mix(in srgb, var(--accent-color) 30%, transparent);
+
+  box-shadow: 0 8px 20px color-mix(in srgb, var(--accent-color) 20%, transparent);
+
+  transition: all 0.3s ease;
+  // background: linear-gradient(180deg, #f4f7fc 0%, #edf2f9 100%);
+  // box-shadow:
+  // inset 0 1px 2px rgba(255, 255, 255, 0.8),
+  // inset 0 8px 16px rgba(15, 23, 42, 0.08),
+  // inset 0 -2px 8px rgba(15, 23, 42, 0.04);
 }
 
 .timeline-card .ant-card-body {
@@ -108,6 +137,35 @@
   transition: all 0.3s ease;
   height: 100%;
   overflow-y: auto;
+
+  scrollbar-width: thin; /* Firefox */
+  scrollbar-color: rgba(0, 0, 0, 0.25) transparent;
+
+  &::-webkit-scrollbar-thumb {
+    background: rgba(0, 0, 0, 0);
+  }
+
+  &:hover::-webkit-scrollbar-thumb {
+    background: rgba(0, 0, 0, 0.25);
+  }
+
+  &::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: rgba(0, 0, 0, 0.25);
+    border-radius: 10px;
+  }
+
+  &::-webkit-scrollbar-thumb:hover {
+    background: rgba(0, 0, 0, 0.4);
+  }
   padding-right: 4px;
 }
 
@@ -119,7 +177,10 @@
   border-radius: 10px;
   background: #fff;
   padding: 10px 12px;
-  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
+  transition:
+    border-color 0.2s ease,
+    box-shadow 0.2s ease,
+    transform 0.2s ease;
 }
 
 .timeline-step:hover {
@@ -233,7 +294,11 @@
   color: #1f3f74;
   box-shadow: 0 6px 14px rgba(15, 23, 42, 0.2);
   z-index: 40;
-  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
+  transition:
+    background-color 0.2s ease,
+    border-color 0.2s ease,
+    box-shadow 0.2s ease,
+    transform 0.2s ease;
 
   &:hover {
     background: #f0f6ff;
@@ -265,9 +330,8 @@
    MOBILE & TABLET VIEW FIXES
    ============================ */
 
-   
-
-@media (max-width: 992px) {   // iPad & tablets
+@media (max-width: 992px) {
+  // iPad & tablets
   .process-steps-page,
   .process-steps-row {
     min-height: auto;
@@ -275,6 +339,10 @@
     overflow: visible;
   }
 
+  .process-steps-page.consultation-mode {
+    padding: 8px;
+  }
+
   .process-steps-card,
   .process-steps-card .ant-card-body,
   .process-steps-content-col {
@@ -327,7 +395,8 @@
   }
 }
 
-@media (max-width: 768px) {   // mobile screens
+@media (max-width: 768px) {
+  // mobile screens
   .timeline-sidebar {
     gap: 8px;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ui-soxo-bootstrap-core",
-  "version": "2.6.14",
+  "version": "2.6.16",
   "description": "All the Core Components for you to start",
   "keywords": [
     "all in one"
@@ -48,6 +48,7 @@
     "i18next": "^22.4.15",
     "i18next-browser-languagedetector": "^7.0.1",
     "jquery": "^3.6.0",
+    "libphonenumber-js": "^1.12.39",
     "lint-staged": "^12.3.2",
     "moment-timezone": "^0.5.34",
     "otp-input-react": "^0.3.0",