ui-soxo-bootstrap-core 2.6.1-dev.1 → 2.6.1-dev.11

package/core/models/users/components/assign-role/assign-role.scss

@@ -1,25 +1,82 @@
 .assign-role {
   display: flex;
-  gap: 6px;
+  gap: 8px;
 
+  /* Checkbox Color Override */
+  .ant-checkbox-checked .ant-checkbox-inner {
+    background-color: rgb(68, 106, 169);
+    border-color: rgb(68, 106, 169);
+  }
+
+  .ant-checkbox:hover .ant-checkbox-inner,
+  .ant-checkbox-wrapper:hover .ant-checkbox-inner {
+    border-color: rgb(68, 106, 169);
+  }
+
+  .ant-checkbox-checked::after {
+    border-color: rgb(68, 106, 169);
+  }
+
+  /* TAKE FULL SCREEN HEIGHT */
+  height: calc(100vh - 80px);
+  min-height: 0;
+
+  .ant-card {
+    border-radius: 6px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+    border: none;
+  }
+
+  /* LEFT PANEL */
   .left-panel {
-    width: 340px;
+    width: 360px;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    min-height: 0;
 
+    /* User Card */
     .user-card {
-      margin-bottom: 12px;
-      background: #fafafa;
-      border: none;
       display: flex;
       align-items: center;
       gap: 12px;
-      padding: 8px;
+      padding: 14px;
+
+      background: #ffffff;
+      border-radius: 10px;
+
+      border: 1px solid #f0f0f0;
+
+      box-shadow:
+        0 2px 6px rgba(0, 0, 0, 0.06),
+        0 6px 16px rgba(0, 0, 0, 0.04);
+
+      margin-bottom: 16px;
+
+      transition: all 0.2s ease;
+
+      &:hover {
+        box-shadow:
+          0 4px 10px rgba(0, 0, 0, 0.08),
+          0 10px 22px rgba(0, 0, 0, 0.06);
+        transform: translateY(-1px);
+      }
 
       .user-info {
-        font-weight: 500;
+        display: flex;
+        flex-direction: column;
+        line-height: 1.2;
+
+        .name {
+          font-weight: 600;
+          font-size: 14px;
+          color: #1f1f1f;
+        }
 
         .user-id {
           font-size: 12px;
-          color: rgba(0, 0, 0, 0.45);
+          color: #8c8c8c;
+          margin-top: 2px;
         }
       }
     }
@@ -27,23 +84,86 @@
     .role-list-header {
       display: flex;
       justify-content: space-between;
-      margin-bottom: 12px;
-      strong {
-        font-weight: 600;
+      align-items: center;
+      margin-bottom: 10px;
+
+      .count {
+        font-size: 12px;
+        color: #888;
       }
     }
 
+    .view-all-btn {
+      cursor: pointer;
+      color: #1677ff;
+      font-weight: 500;
+    }
+
     .role-search {
-      margin: 12px 0;
+      margin-bottom: 10px;
+    }
+
+    .selected-summary {
+      font-size: 12px;
+      color: rgb(68, 106, 169);
+      margin-bottom: 10px;
+      font-weight: 500;
+    }
+
+    /* SCROLL AREA */
+    .role-list-wrapper {
+      flex: 1;
+      overflow-y: auto;
+      min-height: 0;
+      padding-right: 4px;
+    }
+
+    /* Scrollbar */
+    .role-list-wrapper,
+    .menus-content {
+      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);
+      }
     }
 
     .role-item {
       cursor: pointer;
       border-radius: 6px;
-      padding: 8px 12px;
+      padding: 10px 12px;
+      transition: 0.2s;
+
+      &:hover {
+        background: #f5f7fa;
+      }
 
       &.active {
-        background: #e6f7ff;
+        background: #e6f4ff;
+        // border-left: 3px solid rgb(68, 106, 169);
       }
 
       .ant-list-item-meta-title {
@@ -52,66 +172,110 @@
 
       .ant-list-item-meta-description {
         font-size: 12px;
-        color: rgba(0, 0, 0, 0.45);
+        color: #777;
+      }
+    }
+
+    /* Skeleton Loader */
+    .role-skeleton {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+      padding: 2px;
+
+      .role-skeleton-item {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        padding: 10px 12px;
+        border-radius: 6px;
+
+        background: #fff;
+        border: 1px solid #f0f0f0;
+
+        .meta {
+          display: flex;
+          flex-direction: column;
+          gap: 6px;
+          flex: 1;
+        }
       }
     }
   }
 
+  /* RIGHT PANEL */
   .right-panel {
     flex: 1;
     display: flex;
     flex-direction: column;
-    justify-content: space-between;
-    padding: 16px;
+    height: 100%;
+    min-height: 0;
 
     .menus-header {
-      font-weight: 500;
-      margin-bottom: 4px;
-      color: #000;
+      margin-bottom: 12px;
+
+      .title {
+        font-size: 16px;
+        font-weight: 600;
+      }
 
       .sub-text {
         font-size: 12px;
         color: #888;
-        margin-top: 4px;
       }
     }
 
     .menus-content {
-      margin-top: 16px;
+      flex: 1;
+      overflow-y: auto;
+      min-height: 0;
+      padding: 8px 4px;
+      scrollbar-width: thin; /* Firefox */
+      scrollbar-color: rgba(0, 0, 0, 0.25) transparent;
+
+      &::-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);
+      }
+    }
+
+    .empty-state {
+      height: 300px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
     }
 
     .footer-actions {
-      margin-top: 16px;
       display: flex;
       justify-content: flex-end;
-      gap: 8px;
+      padding-top: 12px;
+      border-top: 1px solid #f0f0f0;
     }
   }
 
-  /* ===============================
-   📱 iPad Mini (481px – 768px)
-   =============================== */
+  /* TABLET / MOBILE */
   @media (max-width: 768px) {
-    .assign-role {
-      flex-direction: column;
-      gap: 12px;
-    }
-
-    .assign-role .left-panel {
-      width: 100%;
-    }
+    flex-direction: column;
+    height: auto;
 
-    .assign-role .right-panel {
+    .left-panel,
+    .right-panel {
       width: 100%;
-    }
-
-    /* Better spacing for tablets */
-    .assign-role .right-panel {
-      padding: 14px;
-    }
-
-    .assign-role .footer-actions {
-      justify-content: flex-end;
+      height: auto;
     }
   }
 }

package/core/models/users/components/assign-role/avatar-props.js

@@ -0,0 +1,45 @@
+const avatarColors = [
+  '#5B8FF9',
+  '#61DDAA',
+  '#65789B',
+  '#a0d911',
+  '#F6BD16',
+  '#7262FD',
+  '#faad14',
+  '#78D3F8',
+  '#9661BC',
+  '#F6903D',
+  '#008685',
+  '#F08BB4',
+  '#722ed1',
+  '#eb2f96',
+  '#13c2c2',
+  '#eb2f96',
+  '#fa8c16',
+  '#52c41a',
+];
+
+export const getAvatarProps = (name) => {
+  const safeName = (name ?? '').toString().trim();
+
+  // Find first alphabetic character
+  const match = safeName.match(/[A-Za-z]/);
+  const letter = match ? match[0].toUpperCase() : '-';
+
+  // deterministic color based on string
+  let hash = 0;
+  for (let i = 0; i < safeName.length; i++) {
+    hash = safeName.charCodeAt(i) + ((hash << 5) - hash);
+  }
+
+  const color = avatarColors[Math.abs(hash) % avatarColors.length] || '#999';
+
+  return {
+    letter,
+    style: {
+      backgroundColor: color,
+      color: '#fff',
+      fontWeight: 600,
+    },
+  };
+};

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 '../../..';
 
@@ -30,7 +30,7 @@ const UserAdd = ({ model, callback, edit, history, formContent, match, additiona
   const [selectedBranches, setSelectedBranches] = useState([]);
 
   // for default branch
-  const [defaultBranch, setDefaultBranch] = useState(null);
+  // const [defaultBranch, setDefaultBranch] = useState(null);
   //Need to check this condition
   const [authentication, setAuthentication] = useState(false);
 
@@ -95,7 +95,10 @@ const UserAdd = ({ model, callback, edit, history, formContent, match, additiona
   const [body, setBody] = useState(formContent);
 
   const [isPasswordVisible, setIsPasswordVisible] = useState(false);
-  const [visible, setVisible] = useState(false);
+
+  // state for doctor and staff visibility
+  const [doctorVisible, setDoctorVisible] = useState(false);
+  const [staffVisible, setStaffVisible] = useState(false);
 
   const formData = {
     ...body,
@@ -270,8 +273,6 @@ const UserAdd = ({ model, callback, edit, history, formContent, match, additiona
   const getStaff = () => {
     UsersAPI.getAllStaff()
       .then((res) => {
-        console.log('Staff List Response:', res);
-
         if (Array.isArray(res)) {
           const list = res.map((staff) => ({
             label: `${staff.shortName || 'No Name'} (${staff.id})`,
@@ -325,20 +326,25 @@ const UserAdd = ({ model, callback, edit, history, formContent, match, additiona
     }
     if (!formContent) return;
 
-    // normalize branch ids to NUMBER
     const org =
       typeof formContent.organization_details === 'string' ? JSON.parse(formContent.organization_details) : formContent.organization_details;
 
+    // normalize branch ids to NUMBER
     const branchIds = (org?.branch_ids || []).map(Number);
-    const defaultBr = formContent.defaultBranch ? Number(formContent.defaultBranch) : null;
+
+    // find default branch pointer
+    const defaultBranchObj = org?.branch?.find((br) => br.defaultBranch);
+
+    // extract dbPtr (branch code)
+    const defaultBranchCode = defaultBranchObj?.branch_id ? Number(defaultBranchObj.branch_id) : undefined;
 
     // state (for filtering)
     setSelectedBranches(branchIds);
 
-    // form (source of truth)
+    // form values
     form.setFieldsValue({
       selectedBranches: branchIds,
-      defaultBranch: defaultBr,
+      defaultBranch: defaultBranchCode,
     });
   }, [formContent, form]);
   // Generate branch options for Select component
@@ -351,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*/
@@ -372,6 +382,7 @@ const UserAdd = ({ model, callback, edit, history, formContent, match, additiona
     values = {
       ...values,
       auth_type: 'LDAP',
+      mobile: mobileWithCountryCode,
       FA: authentication,
     };
 
@@ -538,31 +549,17 @@ const UserAdd = ({ model, callback, edit, history, formContent, match, additiona
                             borderTop: '1px solid #f0f0f0',
                             color: '#1890ff',
                           }}
-                          onClick={() => setVisible(true)}
+                          onClick={() => setDoctorVisible(true)}
                         >
                           + Add New Doctor
                         </div>
                       </>
                     )}
                   />
-                  {/* Render DoctorAdd OUTSIDE the Select */}
-                  <DoctorAdd
-                    visible={visible}
-                    onCancel={() => setVisible(false)}
-                    attributes={attributes}
-                    doctorData={selectedDoctor}
-                    doctorId={doctorID}
-                    onSuccess={getDoctors}
-                  />
                 </Form.Item>
               )}
               {userType === 'STAFF' && (
-                <Form.Item
-                  name="staff_code"
-                  preserve={false} //  THIS FIXES IT
-                  label="Staff Code"
-                  rules={[{ required: true, message: 'Please select a staff code' }]}
-                >
+                <Form.Item name="staff_code" label="Staff Code" rules={[{ required: true, message: 'Please select a staff code' }]}>
                   <Select
                     placeholder="Select Code"
                     options={staffList}
@@ -581,18 +578,13 @@ const UserAdd = ({ model, callback, edit, history, formContent, match, additiona
                             borderTop: '1px solid #f0f0f0',
                             color: '#1890ff',
                           }}
-                          onClick={() => setVisible(true)}
+                          onClick={() => setStaffVisible(true)}
                         >
                           + Add New Staff
                         </div>
                       </>
                     )}
                   />
-                  {/* Render DoctorAdd OUTSIDE the Select */}
-
-                  <StaffAdd visible={visible} onCancel={() => setVisible(false)} staffData={selectedStaff} staffId={staffID} onSuccess={getStaff} />
-
-                  <></>
                 </Form.Item>
               )}
             </Col>
@@ -610,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}>
@@ -669,7 +648,7 @@ const UserAdd = ({ model, callback, edit, history, formContent, match, additiona
             <Col span={8}>
               {/* Default Branch */}
               <Form.Item label="Default Branch" name="defaultBranch" rules={[{ required: true, message: 'Please select default branch' }]}>
-                <Select placeholder="Select Default Branch" onChange={setDefaultBranch}>
+                <Select placeholder="Select Default Branch">
                   {branchOptions
                     .filter((opt) => selectedBranches.includes(Number(opt.value)))
                     .map((opt) => (
@@ -682,15 +661,20 @@ const UserAdd = ({ model, callback, edit, history, formContent, match, additiona
             </Col>
           </Row>
           <Row gutter={16}>
+            <Col span={8}>
+              <Form.Item name="user_group" label="User Group" rules={[{ required: true, message: 'Please enter your user group' }]}>
+                <Input placeholder="Enter User Group" />
+              </Form.Item>
+            </Col>
             <Col span={8}>
               {formContent?.id ? (
                 <>
-                  <Form.Item>
+                  {/* <Form.Item>
                     <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                       <Checkbox onChange={handleCheackChange} />
                       <span>Select the option if you want to change the password</span>
                     </div>
-                  </Form.Item>
+                  </Form.Item> */}
 
                   {isPasswordVisible && (
                     <Form.Item
@@ -743,11 +727,7 @@ const UserAdd = ({ model, callback, edit, history, formContent, match, additiona
             {/* Path Ends */}
 
             {/* Path */}
-            <Col span={8}>
-              <Form.Item name="user_group" label="User Group" rules={[{ required: true, message: 'Please enter your user group' }]}>
-                <Input placeholder="Enter User Group" />
-              </Form.Item>
-            </Col>
+
             {/* <Col span={8}>
               <Form.Item name="role_id" label="Role" rules={[{ required: true, message: 'Please select a Role' }]}>
                 <Select placeholder="Select Role">
@@ -846,6 +826,17 @@ const UserAdd = ({ model, callback, edit, history, formContent, match, additiona
           </Form.Item>
         </Form>
       )}
+      {/* Render DoctorAdd OUTSIDE the Select */}
+      <DoctorAdd
+        visible={doctorVisible}
+        onCancel={() => setDoctorVisible(false)}
+        // attributes={attributes}
+        doctorData={selectedDoctor}
+        doctorId={doctorID}
+        onSuccess={getDoctors}
+      />
+
+      <StaffAdd visible={staffVisible} onCancel={() => setStaffVisible(false)} staffData={selectedStaff} staffId={staffID} onSuccess={getStaff} />
     </section>
   );
 };

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);
@@ -37,25 +38,35 @@ export default function UserEdit(record) {
           } catch (e) {
             orgDetails = {};
           }
+
+          // find default branch pointer
+          const defaultBranchObj = orgDetails?.branch?.find((br) => br.defaultBranch);
+
+          // 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: apiData.department_id,
+            department: Number(apiData.department_id),
             // Handle selected branches and default branch
             organization_details: orgDetails,
             selectedBranches: orgDetails.branch_ids || [],
-            defaultBranch: apiData.branch_id || null,
+            defaultBranch: defaultBranchCode || null,
             role_id: apiData.role_id,
             password: apiData.password,
             user_group: apiData.user_group,
             // Handle doctor codes
             default_code: apiData.doctor_code,
             doctor_code: apiData.doctor_code,
+            staff_code: apiData.staff_id,
             auth_type: apiData.auth_type,
             FA: apiData.FA,
             active: apiData.active ? true : false,
@@ -81,7 +92,17 @@ export default function UserEdit(record) {
             <Skeleton active />
           </div>
         ) : (
-          <UserAdd mode="Edit" formContent={userData} callback={() => setVisible(false)} edit={true} />
+          <UserAdd
+            mode="Edit"
+            formContent={userData}
+            callback={() => {
+              setVisible(false);
+              if (record.callback) {
+                record.callback();
+              }
+            }}
+            edit={true}
+          />
         )}
       </Modal>
     </div>

package/core/models/users/users.js

@@ -292,7 +292,12 @@ class Users extends Base {
   information from the API. */
 
   getUser = ({ id }) => {
-    return ApiUtils.get({ url: `users/${id}` });
+    return ApiUtils.get({
+      url: `users/${id}`,
+      headers: {
+        db_ptr: 'nuraho',
+      },
+    });
   };
   /* The `getUserRole` method is a function that takes an object with an `id` property as a parameter.
   It then uses the `ApiUtils.get` function to make a GET request to the endpoint `core-user-roles`
@@ -359,6 +364,16 @@ class Users extends Base {
       url: 'staff/get-all-staff',
     });
   };
+
+  createForgotePassword = (formBody) => {
+    return ApiUtils.post({
+      url: `bookings/trigger-reset-password-link`,
+      formBody,
+      headers: {
+        db_ptr: 'nuraho',
+      },
+    });
+  };
 }
 
 export default Users;