ui-soxo-bootstrap-core 2.6.1-dev.3 → 2.6.1-dev.31

package/core/lib/pages/change-password/change-password.scss

@@ -1,63 +1,51 @@
-.change-password {
-  margin: 15px;
-  min-height: 90vh;
-  display: flex;
-  // margin: 10px 3%;
-  // align-items: center;
-
-  @media only screen and (min-width: 768px) {
-    justify-content: left;
-    align-items: left;
+.change-password.card {
+  margin: -6px 8px;
+  .ant-card-body {
+    padding: 16px;
   }
 
-  .homescreen{
-    width: 100%;
-    margin: 10px 0px;
-    border-radius: 4px;
-    background-color: aliceblue;
-    padding:10px;
-    height: 40px;
-  }
   .auth-form-wrapper {
-    padding: 0px;
-    width: 100%;
-    box-sizing: border-box;
-    @media only screen and (max-width: 768px) {
-      padding: 0;
-      // min-width: 275px;
+    display: flex;
+    flex-direction: column;
+    gap: 18px;
+  }
+
+  .form-title {
+    h4 {
+      margin-bottom: 6px;
+      font-weight: 600;
+      color: #111827;
     }
 
-    .form-title {
-      h3 {
-        color: #071822;
-        font-weight: 600;
-        size: 18px;
+    p {
+      margin: 0;
+      font-size: 14px;
+      line-height: 1.6;
+      color: #6b7280;
+    }
+  }
 
-        margin: 20px 0px;
-        font-size: 32px;
-      }
+  .ant-form-item {
+    margin-bottom: 18px;
+
+    .ant-form-item-label > label {
+      font-weight: 500;
+      font-size: 14px;
+      color: #374151;
     }
 
-    .ant-form {
-      // height: 100%;
-      .ant-form-item {
-        margin: 30px 0px;
-        .ant-form-item-label {
-          margin: 0 0 8px 0;
-          line-height: 020px;
-          padding: 0px;
-        }
-      }
-      .ant-btn-primary {
-        margin-top: 0px;
-      }
+    .ant-input-password {
+      border-radius: 6px;
+      padding: 10px 12px;
+      transition: border 0.2s ease, box-shadow 0.2s ease;
+
     }
 
-    .ant-form-explain {
-      position: absolute;
+    .ant-form-item-explain-error {
       font-size: 12px;
-      margin-left: 2px;
+      margin-top: 4px;
     }
+  }
 
     .ant-btn-primary {
       width: 110px;
@@ -70,6 +58,15 @@
     .ant-btn-secondary {
       width: 100px;
     }
+
+  @media (max-width: 768px) {
+    margin: 0px ;
+    .ant-card-body {
+      padding: 24px;
+    }
+  }
+  @media only screen and (max-width: 1024px) {
+    margin: 60px 8px;
   }
 
 }

package/core/lib/pages/login/commnication-mode-selection.js

@@ -31,11 +31,11 @@ function CommunicationModeSelection({ communicationMode, setCommunicationMode, m
           </Radio>
 
           {/* SMS Option */}
-          <Radio checked={communicationMode === 'mobile'} onChange={() => setCommunicationMode('mobile')}>
+          <Radio checked={communicationMode === 'mobile'} disabled onChange={() => setCommunicationMode('mobile')}>
             SMS <MessageOutlined className="otp-icon" style={{ marginLeft: 6 }} />
           </Radio>
         </div>
-        
+
         {/* Validation Error */}
         {modeError && <p className="otp-mode-error">Please select a communication mode.</p>}
       </div>

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

@@ -30,7 +30,7 @@ import { getAccessToken, getRefreshToken } from '../../utils/http/auth.helper';
 
 import { Location } from '../../utils';
 
-import { checkLicenseStatus, formatMobile, safeJSON ,checkExpiryStatus} from '../../utils/common/common.utils';
+import { checkLicenseStatus, formatMobile, safeJSON } from '../../utils/common/common.utils';
 
 import { MailOutlined, MessageOutlined, WhatsAppOutlined } from '@ant-design/icons';
 
@@ -50,11 +50,10 @@ const tailLayout = {
 
 const LICENSE_EXPIRY = '2026-12-12';
 
+
 const headers = {
   db_ptr: 'nuraho',
 };
-//password valdity expire
-const PASSWORD_VALIDITY_DAYS = 90;
 
 /**
  *
@@ -114,46 +113,32 @@ function LoginPhone({ history, appSettings }) {
    *
    * - Parses `last_password_change` from user.other_details.
    * - Calculates expiry using PASSWORD_VALIDITY_DAYS.
-   * - Uses `checkExpiryStatus()` to determine status.
    * - Shows Ant Design warning message if expired or within warning period.
    * - Warning message includes navigation to `/change-password`.
    *
    * Requires:
    * - PASSWORD_VALIDITY_DAYS constant
-   * - checkExpiryStatus utility
    * - React Router history
    * - antd message component
    */
-  const handlePasswordExpiryCheck = (user) => {
-    const otherDetails = user?.other_details ? JSON.parse(user.other_details) : null;
-
-    const lastPasswordChange = otherDetails?.last_password_change;
-
-    if (lastPasswordChange) {
-      const passwordExpiryDate = new Date(lastPasswordChange);
-      passwordExpiryDate.setDate(passwordExpiryDate.getDate() + PASSWORD_VALIDITY_DAYS);
-
-      const passwordStatus = checkExpiryStatus({
-        expiryDate: passwordExpiryDate,
-        warningDays: 2,
-        expiredMessage: 'Your password has expired. Please reset it.',
-        warningMessage: (d) => (
-          <span>
-            Your password will expire in {d} day(s).{' '}
-            <a
-              onClick={() => {
-                history.push('/change-password');
-              }}
-            >
-              Click here to update.
-            </a>
-          </span>
-        ),
-      });
+  const handlePasswordExpiryCheck = (expiryDays) => {
+    if (expiryDays == null) return;
 
-      if (passwordStatus.message) {
-        message.warning(passwordStatus.message);
-      }
+    if (expiryDays <= 0) {
+      message.error('Your password has expired. Please reset it.');
+
+      setExpiredPassword(true);
+      setShowResetpassword(true);
+
+      return;
+    }
+
+    if (expiryDays <= 2) {
+      message.warning(
+        <span>
+          Your password will expire in {expiryDays} day(s). <a onClick={() => history.push('/change-password')}>Click here to update.</a>
+        </span>
+      );
     }
   };
 
@@ -194,7 +179,7 @@ function LoginPhone({ history, appSettings }) {
           if (insider_token) localStorage.insider_token = insider_token;
 
           if (result.success) {
-            handlePasswordExpiryCheck(user);
+            handlePasswordExpiryCheck(result.expiry_in_days);
 
             //two_factor_authentication variable is present then proceed Two factor authentication
             if (result.data && result.data.two_factor_authentication) {
@@ -321,6 +306,8 @@ function LoginPhone({ history, appSettings }) {
    *
    */
   const sendAuthenticationOtp = () => {
+    if (loading) return;
+
     //  Reset previous error
     setModeError(false);
 
@@ -349,10 +336,10 @@ function LoginPhone({ history, appSettings }) {
       if (result.success) {
         //  for expiry_time
         startFromExpiry(result?.expiry_time);
-        // if the api is sucess then go for otpverification step
-        setotpVerification(true);
         // set  button loading false
         setLoading(false);
+        // if the api is sucess then go for otpverification step
+        setotpVerification(true);
       } else {
         setLoading(false);
         message.error(result.message);
@@ -409,7 +396,7 @@ function LoginPhone({ history, appSettings }) {
           if (result?.user?.organization_details) {
             const data = safeJSON(result?.user?.organization_details);
 
-            const defaultBranch = data.branch.find((b) => b.defaultBranch === 'true');
+            const defaultBranch = data.branch.find((b) => b.defaultBranch === true);
             const defaultDbptr = defaultBranch?.dbPtr;
 
             localStorage.setItem('db_ptr', defaultDbptr);
@@ -419,7 +406,7 @@ function LoginPhone({ history, appSettings }) {
           // set user info into local storage
           localStorage.setItem('userInfo', JSON.stringify(userInfo));
 
-          handlePasswordExpiryCheck(result.user);
+          handlePasswordExpiryCheck(result.expiry_in_days);
 
           setTimeout(() => history.push('/'), 500);
         } else {
@@ -460,6 +447,8 @@ function LoginPhone({ history, appSettings }) {
    * Otp resend Logic
    */
   const handleResendOTP = () => {
+    if (loading) return;
+
     setOtpValue('');
     setModeError(false);
     setOtpError(false);
@@ -622,28 +611,28 @@ function LoginPhone({ history, appSettings }) {
     return user.username;
   };
 
-  const { globalCustomerHeader = () => {} } = appSettings;
+  const { globalCustomerHeader = () => { } } = appSettings;
 
   const themeName = process.env.REACT_APP_THEME; // e.g., 'purple'
   const isPurple = themeName === 'purple';
 
   const sectionStyle = isPurple
     ? {
-        width: '100%',
-        height: '100vh',
-        backgroundImage: `${state.theme.colors.loginPageBackground}`,
-        backgroundPosition: 'center bottom, center',
-        backgroundRepeat: 'no-repeat, no-repeat',
-        backgroundSize: 'cover, cover',
-      }
+      width: '100%',
+      height: '100vh',
+      backgroundImage: `${state.theme.colors.loginPageBackground}`,
+      backgroundPosition: 'center bottom, center',
+      backgroundRepeat: 'no-repeat, no-repeat',
+      backgroundSize: 'cover, cover',
+    }
     : {
-        width: '100%',
-        height: '100vh',
-        background: 'linear-gradient(to bottom, #F7F6E3 0%, #EEF1DE 20%, #D5E4DA 45%, #9DBFC8 75%, #4F89A6 100%)',
-        backgroundPosition: 'center bottom, center',
-        backgroundRepeat: 'no-repeat, no-repeat',
-        backgroundSize: 'cover, cover',
-      };
+      width: '100%',
+      height: '100vh',
+      background: 'linear-gradient(to bottom, #F7F6E3 0%, #EEF1DE 20%, #D5E4DA 45%, #9DBFC8 75%, #4F89A6 100%)',
+      backgroundPosition: 'center bottom, center',
+      backgroundRepeat: 'no-repeat, no-repeat',
+      backgroundSize: 'cover, cover',
+    };
 
   return (
     <section className="full-page" style={sectionStyle}>
@@ -729,7 +718,7 @@ function LoginPhone({ history, appSettings }) {
 
                   {!otpVerification ? (
                     <div className="otp-container">
-                      <Button type="primary" onClick={sendAuthenticationOtp} style={{ marginTop: '6px' }}>
+                      <Button loading={loading} type="primary" onClick={sendAuthenticationOtp} style={{ marginTop: '6px' }}>
                         Send OTP
                       </Button>
                     </div>
@@ -775,7 +764,7 @@ function LoginPhone({ history, appSettings }) {
                         </div>
                       </div>
                       {!otpSuccess && (
-                        <Button type="primary" disabled={otpExpired} onClick={verifyOtp} style={{ marginTop: 16 }}>
+                        <Button loading={loading} type="primary" disabled={otpExpired} onClick={verifyOtp} style={{ marginTop: 16 }}>
                           Verify OTP
                         </Button>
                       )}
@@ -811,7 +800,7 @@ function LoginPhone({ history, appSettings }) {
                     <Button loading={loading} type="primary" htmlType="submit" className="SubmitBtn">
                       &nbsp;&nbsp; Submit
                     </Button>
-                    <div className="forgot-password" style={{ marginTop: '8px', textAlign: 'center' }}>
+                    <div className="forgot-password">
                       <Link onClick={() => setShowResetpassword(true)}>Forgot Password?</Link>
                     </div>
                   </Form.Item>
@@ -827,13 +816,13 @@ function LoginPhone({ history, appSettings }) {
                     setShowResetpassword(false);
                     setExpiredPassword(false);
                   }}
-                  title={expiredPassword ? 'Password Expired' : 'Forgot Password'}
-                  subtitle={
-                    expiredPassword
-                      ? 'Enter your username and choose your preferred OTP method to receive a reset link.'
-                      : 'Enter your username to reset your password and select your preferred OTP method.'
-                  }
-                  buttonText={expiredPassword ? 'Send Reset Link' : 'Reset Password'}
+                  title={expiredPassword ? 'Password Expired!' : 'Forgot Password?'}
+                  // subtitle={
+                  //   expiredPassword
+                  //     ? 'Your password has expired. Select a preferred communication method to receive the One-Time Password (OTP) to continue.'
+                  //     : 'Enter your username and Select a preferred communication method to receive the One-Time Password (OTP) to continue..'
+                  // }
+                  buttonText={expiredPassword ? 'Send Reset Link' : 'Send Reset Link'}
                 />
               )}
             </div>

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

@@ -228,6 +228,15 @@ body {
             text-transform: capitalize;
           }
         }
+
+        .forgot-password {
+          margin-top: 8px;
+          text-align: center;
+
+          a {
+            color: #204b7e;
+          }
+        }
       }
     }
 

package/core/lib/pages/login/reset-password.js

@@ -17,7 +17,7 @@
  * @param {boolean} disabledUserName - Disable username field
  */
 
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import { Divider, Form, Input, message } from 'antd';
 import { Button } from '../../elements';
 import CommunicationModeSelection from './commnication-mode-selection';
@@ -36,6 +36,9 @@ function ResetPassword({ onBack, title, subtitle, buttonText, defaultUsername, d
 
   const [form] = Form.useForm();
 
+  // Ref to username input auto focus
+  const inputRef = useRef(null);
+
   // Pre-fills username if provided and disabled.
   useEffect(() => {
     if (disabledUserName && defaultUsername) {
@@ -43,6 +46,10 @@ function ResetPassword({ onBack, title, subtitle, buttonText, defaultUsername, d
     }
   }, [disabledUserName, defaultUsername]);
 
+  useEffect(() => {
+    inputRef.current?.focus();
+  }, []);
+
   /**
    * Sends forgot password request to backend.
    * Payload: { mode, username, user_type: 'staff' }
@@ -83,26 +90,20 @@ function ResetPassword({ onBack, title, subtitle, buttonText, defaultUsername, d
   return (
     <motion.div
       className="forgot-password-container"
-      initial={{ opacity: 0, y: 70 }}
+      initial={{ opacity: 0, y: 30 }}
       animate={{ opacity: 1, y: 0 }}
-      exit={{ opacity: 0, y: -50 }}
+      exit={{ opacity: 0, y: -20 }}
       transition={{
-        y: {
-          duration: 1,
-          ease: [0.22, 0.08, 0.26, 1],
-        },
-        opacity: {
-          duration: 0.45,
-          ease: 'easeOut',
-        },
+        duration: 0.30,
+        ease: 'easeOut',
       }}
     >
       <h3 className="password-title">{title}</h3>
-      <p className="password-subtitle">{subtitle}</p>
-      <Divider />
+      {/* <p className="password-subtitle">{subtitle}</p>
+      <Divider /> */}
       <Form layout="vertical" form={form} onFinish={handleSendForgetPassword}>
         <Form.Item label="Username" name="username" rules={[{ required: true, message: 'Please input your username' }]}>
-          <Input placeholder="Enter your username" disabled={disabledUserName} />
+          <Input placeholder="Enter your username" disabled={disabledUserName} ref={inputRef}/>
         </Form.Item>
 
         <CommunicationModeSelection communicationMode={communicationMode} setCommunicationMode={setCommunicationMode} modeError={modeError} />
@@ -110,9 +111,8 @@ function ResetPassword({ onBack, title, subtitle, buttonText, defaultUsername, d
         <Button type="primary" htmlType="submit" loading={loading}>
           {buttonText}
         </Button>
-
-        <div style={{ marginTop: '10px', textAlign: 'center' }}>
-          <a style={{ cursor: 'pointer' }} onClick={handleBackToLogin}>
+        <div className="back-to-login">
+          <a onClick={handleBackToLogin}>
             Back to Login
           </a>
         </div>

package/core/lib/pages/login/reset-password.scss

@@ -18,5 +18,14 @@
     margin: 0;
     border-top: 1px solid #e5e7eb;
   }
-}
 
+  .back-to-login {
+    margin-top: 10px;
+    text-align: center;
+
+    a {
+      cursor: pointer;
+      color: #204b7e;
+    }
+  }
+}

package/core/lib/pages/profile/themes.json

@@ -88,10 +88,10 @@
       "loginPageBackground": "linear-gradient(#D5F1FB, #24AEB8)",
       "bodyBackground": "#F0F6FF",
       "progressBar": "#24AEB8",
-      "primaryButtonBg": "#446AA9",
+      "primaryButtonBg": "#204b7e",
       "primaryButtonHoverBg": "#2E4873",
       "primaryButtonText": "#FFFFFF",
-      "primaryButtonActiveBg": "#446AA9",
+      "primaryButtonActiveBg": "#204b7e",
       "primaryButtonDisabledBg": "#C4C6CC",
       "primaryButtonDisabledText": "#6B7280",
 
@@ -104,14 +104,14 @@
 
       "dashedButtonBg": "#FFFFFF",
       "dashedButtonHoverBg": "#D1E3FF",
-      "dashedButtonText": "#446AA9",
+      "dashedButtonText": "#204b7e",
       "dashedButtonActiveBg": "#B8C7FF",
       "dashedButtonDisabledBg": "#F0F6FF",
       "dashedButtonDisabledText": "#A9BCC6",
 
       "linkButtonBg": "transparent",
       "linkButtonHoverBg": "#F5F5F5",
-      "linkButtonText": "#446AA9",
+      "linkButtonText": "#204b7e",
       "linkButtonActiveBg": "#D1E3FF",
       "linkButtonDisabledText": "#A9BCC6",
 

package/core/lib/utils/api/api.utils.js

@@ -1,4 +1,4 @@
-import { PostData, GetData, PutData, PatchData, DeleteData } from './../http/http.utils';
+import { PostData, GetData, PutData, PatchData, DeleteData,UploadData } from './../http/http.utils';
 
 let headers = {};
 
@@ -24,15 +24,15 @@ export default class ApiUtils {
   };
 
   static get = async ({ url, config = { queries: [], order: {} }, headers: customHeaders = {}, ...props }) => {
-    const { headers: defaultHeaders } = settings;
+    const dbPtr = localStorage.getItem('db_ptr');
 
     try {
       return await GetData({
         url: createUrlParams(url, config),
         settings,
         headers: {
-          ...defaultHeaders,
-          // override here
+          ...(settings.headers || {}),
+          ...(dbPtr ? { db_ptr: dbPtr } : {}),
           ...customHeaders,
         },
         ...props,
@@ -43,15 +43,15 @@ export default class ApiUtils {
   };
 
   static getRecordDetail = async ({ url, config = { queries: [] }, headers: customHeaders = {}, ...props }) => {
-    const { headers: defaultHeaders } = settings;
+    const dbPtr = localStorage.getItem('db_ptr');
 
     try {
       return await GetData({
         url: createUrlParams(url, config),
         settings,
         headers: {
-          ...defaultHeaders,
-          // override here
+          ...(settings.headers || {}),
+          ...(dbPtr ? { db_ptr: dbPtr } : {}),
           ...customHeaders,
         },
         ...props,
@@ -62,83 +62,91 @@ export default class ApiUtils {
   };
 
   static post = ({ url, formBody, headers: customHeaders = {}, ...props }) => {
-    const { headers: defaultHeaders } = settings;
+    const dbPtr = localStorage.getItem('db_ptr');
 
     return PostData({
       url,
       formBody,
       settings,
       headers: {
-        ...defaultHeaders,
-        // override here
+        ...(settings.headers || {}),
+        ...(dbPtr ? { db_ptr: dbPtr } : {}),
         ...customHeaders,
       },
       ...props,
     });
   };
 
-  static put = ({ url, formBody, ...props }) => {
-    const { headers } = settings;
+  static put = ({ url, formBody, headers: customHeaders = {}, ...props }) => {
+    const dbPtr = localStorage.getItem('db_ptr');
 
     return PutData({
       url,
       settings,
       formBody,
-      headers,
+      headers: {
+        ...(settings.headers || {}),
+        ...(dbPtr ? { db_ptr: dbPtr } : {}),
+        ...customHeaders,
+      },
       ...props,
     });
   };
 
-  static patch = ({ url, formBody, ...props }) => {
-    const { headers } = settings;
+  static patch = ({ url, formBody, headers: customHeaders = {}, ...props }) => {
+    const dbPtr = localStorage.getItem('db_ptr');
 
     return PatchData({
       url,
       settings,
       formBody,
-      headers,
+      headers: {
+        ...(settings.headers || {}),
+        ...(dbPtr ? { db_ptr: dbPtr } : {}),
+        ...customHeaders,
+      },
       ...props,
     });
   };
 
-  static delete = ({ url, formBody, ...props }) => {
-    const { headers } = settings;
+  static delete = ({ url, formBody, headers: customHeaders = {}, ...props }) => {
+    const dbPtr = localStorage.getItem('db_ptr');
 
     return DeleteData({
       url,
       settings,
-      headers,
+      headers: {
+        ...(settings.headers || {}),
+        ...(dbPtr ? { db_ptr: dbPtr } : {}),
+        ...customHeaders,
+      },
       ...props,
     });
   };
 
-  static upload = ({ url, data }) => {
-    return fetch(process.env.REACT_APP_endpoint + url, {
-      // Your POST endpoint
-      method: 'POST',
-      headers: {
-        //   'App-Type': 313,
-        //   'App-Version': '1.0.1',
-        Authorization: 'Bearer ' + localStorage.access_token,
-        // type:'multipart/formData'
-      },
-      //   credentials: 'include',
-      body: data,
-    }).then(
-      (result) => {
-        return result.json();
-      },
-      (error) => {
-        console.log(error);
-        return error;
-      },
-      (progress) => {
-        console.log(progress);
-        return progress;
-      }
-    );
+  // upload document
+  static upload = async ({ url, data, headers: customHeaders = {}, ...props }) => {
+    const dbPtr = localStorage.getItem('db_ptr');
+    
+    // Ensure settings object exists to avoid undefined errors in ApiCall
+    const settings = { 
+        headers: {},
+        getToken: () => localStorage.getItem('access_token') 
+    }; 
+
+    return UploadData({
+        url,
+        formBody: data, 
+        // Your FormData goes here
+        isUpload: true, // Indicate that this is an upload request
+        settings,
+        headers: {
+            ...(dbPtr ? { db_ptr: dbPtr } : {}),
+            ...customHeaders,
+        },
+        ...props,
+    });
   };
-
   /**
    * Get Auth Status
    *