ui-soxo-bootstrap-core 2.6.40-dev.1 → 2.6.40-dev.12

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

@@ -1,847 +1,847 @@
-import React, { useState, useEffect, useContext } from 'react';
-
-import { useLocation } from 'react-router-dom';
-
-import { Skeleton, Typography, message, Switch, Form, Input, Select, Checkbox, Row, Col } from 'antd';
-
-import AsyncSelect from 'react-select/async';
-
-import { Table, Card, Button, JSONInput, GlobalContext, safeJSON, CountryPhoneInput, phoneValidator } from './../../../../lib/';
-
-import { ModelsAPI, PagesAPI, RolesAPI } from '../../..';
-
-import { UsersAPI } from '../../..';
-import DoctorAdd from '../../../doctor/components/doctor-add/doctor-add';
-import StaffAdd from '../../../staff/components/staff-add/staff-add';
-
-const { Title } = Typography;
-
-const { Option } = Select;
-
-const UserAdd = ({ model, callback, edit, history, formContent, match, additional_queries, props, mode = 'Add', attributes }) => {
-  /**Getting user data */
-  const { user = {} } = useContext(GlobalContext);
-  // let mode = 'Add';
-
-  const [disabled, setDisabled] = useState(true);
-
-  const [selectedOption, setSelectedOption] = useState(null);
-  // for selected branches
-  const [selectedBranches, setSelectedBranches] = useState([]);
-
-  // for default branch
-  // const [defaultBranch, setDefaultBranch] = useState(null);
-  //Need to check this condition
-  const [authentication, setAuthentication] = useState(true);
-
-  /**To store user values */
-  const [users, setUsers] = useState([]);
-  const [doctorID, setDoctorID] = useState(false);
-  const [selectedDoctor, setSelectedDoctor] = useState(null);
-  const [staffID, setStaffID] = useState(false);
-  const [selectedStaff, setSelectedStaff] = useState(null);
-  const [staffList, setStaffList] = useState([]);
-  /**Converting to JSON */
-  const firmDetails = safeJSON(user?.firm?.f_otherdetails1) ?? {};
-
-  /**Variable for cheaking mandatory condition of mobile*/
-  let mobileRequired;
-
-  /**If mode is mobile and fa is 'MND' or 'USR' then  mobile is mandatory */
-  if (((firmDetails && firmDetails.FA === 'MND') || (firmDetails && firmDetails.FA === 'USR')) && firmDetails.mode === 'mobile') {
-    mobileRequired = true;
-  } else {
-    mobileRequired = false;
-  }
-
-  if (formContent?.id) {
-    mode = 'Edit';
-  } else if (formContent?.copy) {
-    mode = 'Copy';
-  }
-
-  if (formContent?.attributes) {
-    if (typeof formContent.attributes === 'string') {
-      if (formContent.attributes !== '') {
-        formContent.attributes = JSON.parse(formContent.attributes);
-      } else {
-        if (formContent) {
-          formContent.attributes = {};
-        }
-      }
-    }
-  } else {
-    if (formContent) {
-      formContent.attributes = {};
-    }
-  }
-
-  const [loading, setLoading] = useState(true);
-  // user type state
-  const [userType, setUserType] = useState('general');
-  // state for branches list
-  const [branches, setBranches] = useState([]);
-  // designation list state
-  const [designations, setDesignations] = useState([]);
-  // department list state
-  const [departments, setDepartments] = useState([]);
-  // doctor list state
-  const [doctorList, setDoctorList] = useState([]);
-  // for role list
-  const [roles, setRoles] = useState([]);
-
-  const [form] = Form.useForm();
-
-  const [body, setBody] = useState(formContent);
-
-  const [isPasswordVisible, setIsPasswordVisible] = useState(false);
-
-  // state for doctor and staff visibility
-  const [doctorVisible, setDoctorVisible] = useState(false);
-  const [staffVisible, setStaffVisible] = useState(false);
-
-  const formData = {
-    ...body,
-    /**If panel is open then takes password in body */
-    password: !isPasswordVisible ? '' : body.password,
-  };
-
-  let passwordRegex;
-  let passwordRegexMessage;
-
-  if (props && props?.passwordRegex && props?.passwordRegexMessage) {
-    passwordRegex = props.passwordRegex;
-    passwordRegexMessage = props.passwordRegexMessage;
-  } else if (process.env.REACT_APP_PASSWORD_REGEX && process.env.REACT_APP_PASSWORD_REGEX_MESSAGE) {
-    passwordRegex = process.env.REACT_APP_PASSWORD_REGEX;
-    passwordRegexMessage = process.env.REACT_APP_PASSWORD_REGEX_MESSAGE;
-  } else {
-    passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&*(),.?":{}|<>])[A-Za-z\d!@#$%^&*(),.?":{}|<>]{8,}$/;
-    passwordRegexMessage =
-      'Password must be at least 8 characters long and contain atleast one uppercase letter, one lowercase letter, one digit and one special character';
-  }
-
-  useEffect(() => {
-    if (!loading && formContent) {
-      form.resetFields(); // clear previous values
-      form.setFieldsValue(formContent);
-    }
-  }, [loading, formContent]);
-
-  useEffect(() => {
-    if (formContent?.auth_user) {
-      setSelectedOption({
-        value: formContent.auth_user,
-        label: formContent.auth_user, // Add a helper function to capitalize
-      });
-    }
-  }, [formContent?.auth_user]);
-
-  useEffect(() => {
-    loadUsers();
-
-    setLoading(false);
-
-    if (firmDetails) {
-      /**if firmmas.otherdetails - 2FA == MND, then, 2FA option will be enabled by default and read-only  */
-      if (firmDetails.FA == 'MND') {
-        setAuthentication(true);
-
-        setDisabled(true);
-
-        /**if firmmas.otherdetails - 2FA == OPT, then, 2FA option will be enabled by default and editable */
-      } else if (firmDetails.FA == 'USR') {
-        /** If user has FA set to false , then disable authentication */
-        if (formContent?.FA !== undefined) {
-          setAuthentication(formContent?.FA);
-        }
-        setDisabled(true);
-
-        /**if firmmas.otherdetails - 2FA == NAP, then, 2FA option will be disabled by default and read-only*/
-      } else if (firmDetails.FA == 'NAP') {
-        setAuthentication(false);
-
-        setDisabled(true);
-      }
-    }
-  }, []);
-
-  useEffect(() => {
-    if (!loading && formContent?.role_id && roles.length > 0) {
-      const roleId = Number(formContent.role_id);
-
-      if (!Number.isNaN(roleId)) {
-        form.setFieldsValue({ role_id: roleId });
-      }
-    }
-  }, [loading, formContent, roles]);
-
-  /**
-   *Define the options dynamically
-   */
-  const getUserTypeOptions = () => [
-    { label: 'General', value: 'GEN' },
-    { label: 'Doctor', value: 'RAD' },
-    { label: 'Radiographer', value: 'TECH' },
-    { label: 'Staff', value: 'STAFF' },
-  ];
-
-  /**
-   * Get Branch List
-   */
-  const getBranches = () => {
-    setLoading(true);
-    UsersAPI.getBranches().then(async (result) => {
-      const details = await result.result.map((ele) => {
-        return {
-          ...ele,
-          ...(ele.br_otherdet1 ? JSON.parse(ele.br_otherdet1) : {}),
-        };
-      });
-      setBranches(details);
-      setLoading(false);
-    });
-  };
-
-  /** Get Designation List */
-  const getDesignations = () => {
-    setLoading(true);
-    UsersAPI.getDesignations()
-      .then((result) => {
-        if (result?.success && Array.isArray(result.result)) {
-          const details = result.result.map((ele) => ({
-            label: ele.dg_desc?.trim() || '',
-            value: ele.dg_code,
-          }));
-          setDesignations(details);
-        } else {
-          setDesignations([]);
-        }
-      })
-      .catch((error) => {
-        setDesignations([]);
-      })
-      .finally(() => setLoading(false));
-  };
-
-  /**
-   * get role lists
-   */
-  function getRoles() {
-    RolesAPI.getRole()
-      .then((res) => {
-        const activeRoles = Array.isArray(res.result) ? res.result.filter((r) => r.active === 'Y') : [];
-        setRoles(activeRoles);
-      })
-      .catch(() => setRoles([]));
-  }
-
-  /** Get Department List */
-  const getDepartments = () => {
-    setLoading(true);
-    UsersAPI.getDepartments()
-      .then((result) => {
-        if (result?.success && Array.isArray(result.result)) {
-          const details = result.result.map((ele) => ({
-            label: ele.dp_desc?.trim() || '',
-            value: ele.dp_id,
-          }));
-          setDepartments(details);
-        } else {
-          setDepartments([]);
-        }
-      })
-      .catch((error) => {
-        setDepartments([]);
-      })
-      .finally(() => setLoading(false));
-  };
-
-  /** Get Doctor List */
-  const getDoctors = () => {
-    UsersAPI.getDoctors()
-      .then((res) => {
-        if (res?.success && Array.isArray(res.result)) {
-          const list = res.result.map((doc) => ({
-            label: `${doc.do_name} (${doc.do_code})`,
-            value: doc.do_code,
-          }));
-          setDoctorList(list);
-        }
-      })
-      .catch((err) => console.error('Doctor API Error:', err));
-  };
-  /** Get staff List */
-  const getStaff = () => {
-    UsersAPI.getAllStaff()
-      .then((res) => {
-        if (Array.isArray(res)) {
-          const list = res.map((staff) => ({
-            label: `${staff.shortName || 'No Name'} (${staff.id})`,
-            value: staff.id,
-          }));
-
-          setStaffList(list);
-        } else {
-          console.error('API did not return an array!');
-        }
-      })
-      .catch((err) => console.error('staff API Error:', err));
-  };
-
-  // Function to handle user type change
-  const handleUserTypeChange = (value) => {
-    setUserType(value);
-
-    if (value === 'RAD') {
-      getDoctors(); // load doctor list
-    } else {
-      form.setFieldsValue({ default_code: undefined });
-    }
-    if (value === 'STAFF') {
-      getStaff(); // load staff list
-    } else {
-      form.setFieldsValue({ staff_code: undefined });
-    }
-  };
-
-  useEffect(() => {
-    getBranches();
-    getDesignations();
-    getDepartments();
-    getRoles();
-    getDoctors(); // load doctor list
-    getStaff();
-  }, []);
-
-  useEffect(() => {
-    if (formContent && formContent.user_type) {
-      form.setFieldsValue({ user_type: formContent.user_type });
-      setUserType(formContent.user_type);
-
-      if (formContent.user_type === 'RAD' && formContent.doctor_code) {
-        form.setFieldsValue({ default_code: formContent.doctor_code });
-      }
-      if (formContent.user_type === 'STAFF' && formContent.staff_code) {
-        form.setFieldsValue({ staff_code: formContent.staff_code });
-      }
-    }
-    if (!formContent) return;
-
-    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);
-
-    // 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 values
-    form.setFieldsValue({
-      selectedBranches: branchIds,
-      defaultBranch: defaultBranchCode,
-    });
-  }, [formContent, form]);
-  // Generate branch options for Select component
-  const branchOptions = branches.map((branch) => ({
-    label: branch.br_desc,
-    value: branch.br_code,
-  }));
-
-  /**
-   * 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*/
-    if (!isPasswordVisible && mode === 'Edit') {
-      values.password = body.password;
-    }
-    values.user_type = values.user_type;
-
-    if (values.user_type === 'RAD') {
-      values.doctor_code = values.default_code;
-    } else {
-      values.doctor_code = null;
-    }
-    if (values.user_type === 'STAFF') {
-      values.staff_code = values.staff_code;
-    } else {
-      values.staff_code = null;
-    }
-    values = {
-      ...values,
-      auth_type: 'LDAP',
-      mobile: mobileWithCountryCode,
-      FA: formContent?.FA === false ? false : authentication,
-
-    };
-
-    setLoading(true);
-
-    let id = formContent?.id;
-    if (props?.ldap && selectedOption && selectedOption.value) {
-      values = {
-        ...values,
-
-        addAllBranches: props.ldap.addAllBranches,
-        auth_user: selectedOption.value,
-        auth_type: 'LDAP',
-        FA: formContent?.FA === false ? false : authentication,
-      };
-    }
-
-    if (values.attributes && typeof values === 'object') {
-      values = {
-        ...values,
-
-        auth_type: 'LDAP',
-
-        attributes: JSON.stringify(values.attributes),
-      };
-    }
-
-    if (id) {
-      // Update of model
-
-      UsersAPI.updateUser({ id, formBody: values }).then((result) => {
-        if (result.success) message.success(result.message);
-        else message.error(result.message);
-
-        setLoading(false);
-
-        callback();
-      });
-    } else {
-      // Append the additional queries to the object
-      // additional_queries.forEach(({ field, value }) => {
-      //   values[field] = value;
-      // });
-      if (Array.isArray(additional_queries)) {
-        additional_queries.forEach(({ field, value }) => {
-          values[field] = value;
-        });
-      }
-
-      // add new model
-      UsersAPI.create(values).then((result) => {
-        setLoading(false);
-
-        if (result.success) {
-          message.success(result.message);
-          // close modal
-          callback();
-        } else {
-          message.error(result.message);
-        }
-      });
-    }
-  };
-
-  /**
-   * Function on handle change
-   * @param {*} selected
-   */
-  const handleCheackChange = (e) => {
-    setIsPasswordVisible(e.target.checked);
-  };
-
-  function changeView(result) {
-    setAuthentication(result);
-  }
-
-  /**
-   * Function to add load userrs
-   */
-  function loadUsers() {
-    // UsersAPI.getLdapUsers().then((result) => {
-    //     setUsers(result.result);
-    // });
-  }
-
-  // Transform array into react-select options
-  let options = users.map((item) => ({
-    value: item.name,
-    label: item.name, // Capitalize the first letter
-  }));
-
-  /**
-   * Function on handle change
-   * @param {*} selected
-   */
-  const handleChange = (selected) => {
-    setSelectedOption(selected);
-  };
-  /**
-   *
-   * @param {*} inputValue
-   * @param {*} callback
-   */
-
-  const loadOptions = (inputValue, callback) => {
-    // Filter options based on input
-    const filteredOptions = options.filter((option) => option.label.toLowerCase().includes(inputValue.toLowerCase()));
-    callback(filteredOptions);
-  };
-
-  return (
-    <section className="collection-add">
-      <Title level={4}>{mode} User</Title>
-
-      {loading ? (
-        <Skeleton />
-      ) : (
-        <Form initialValues={formData} form={form} layout="vertical" onFinish={onSubmit}>
-          {/* user type */}
-          <Row gutter={16}>
-            <Col span={6}>
-              <Form.Item
-                name="user_type"
-                label="User Type"
-                allowClear
-                showSearch
-                initialValue="GEN"
-                rules={[{ required: true, message: 'Please select a user type' }]}
-              >
-                <Select options={getUserTypeOptions()} onChange={handleUserTypeChange} />
-              </Form.Item>
-            </Col>
-            <Col span={12}>
-              {/* username */}
-              <Form.Item name={'name'} label="Name" rules={[{ required: true, message: 'Please enter your user name' }]}>
-                <Input placeholder="Enter Name" autoFocus />
-              </Form.Item>
-            </Col>
-            <Col span={6}>
-              {' '}
-              {/* Show extra dropdown only if user type is Doctor */}
-              {userType === 'RAD' && (
-                <Form.Item
-                  name="default_code"
-                  preserve={false}
-                  label="Default Code"
-                  rules={[{ required: true, message: 'Please select a default code' }]}
-                >
-                  <Select
-                    placeholder="Select Code"
-                    options={doctorList}
-                    showSearch
-                    optionFilterProp="label"
-                    onChange={(value) => {
-                      form.setFieldsValue({ default_code: value });
-                    }}
-                    dropdownRender={(menu) => (
-                      <>
-                        {menu}
-                        <div
-                          style={{
-                            padding: '8px',
-                            cursor: 'pointer',
-                            borderTop: '1px solid #f0f0f0',
-                            color: '#1890ff',
-                          }}
-                          onClick={() => setDoctorVisible(true)}
-                        >
-                          + Add New Doctor
-                        </div>
-                      </>
-                    )}
-                  />
-                </Form.Item>
-              )}
-              {userType === 'STAFF' && (
-                <Form.Item name="staff_code" label="Staff Code" rules={[{ required: true, message: 'Please select a staff code' }]}>
-                  <Select
-                    placeholder="Select Code"
-                    options={staffList}
-                    showSearch
-                    optionFilterProp="label"
-                    onChange={(value) => {
-                      form.setFieldsValue({ staff_code: value });
-                    }}
-                    dropdownRender={(menu) => (
-                      <>
-                        {menu}
-                        <div
-                          style={{
-                            padding: '8px',
-                            cursor: 'pointer',
-                            borderTop: '1px solid #f0f0f0',
-                            color: '#1890ff',
-                          }}
-                          onClick={() => setStaffVisible(true)}
-                        >
-                          + Add New Staff
-                        </div>
-                      </>
-                    )}
-                  />
-                </Form.Item>
-              )}
-            </Col>
-          </Row>
-          <Row gutter={16}>
-            <Col span={8}>
-              {/* email */}
-              <Form.Item name={'email'} label="User Name / Email" rules={[{ required: true, message: 'Please enter your email' }]}>
-                <Input placeholder="Enter Email Address" />
-              </Form.Item>
-            </Col>
-
-            <Col span={8}>
-              {/* Mobile */}
-              <Form.Item
-                name="mobile"
-                label="Mobile"
-                validateTrigger="onBlur"
-                rules={[{ required: true, message: 'Mobile number required' }, { validator: phoneValidator }]}
-              >
-                <CountryPhoneInput defaultCountryCode={process.env.REACT_APP_COUNTRYCODE} enableSearch inputStyle={{ width: '100%' }} />
-              </Form.Item>
-            </Col>
-            <Col span={8}>
-              {/* Designation */}
-              <Form.Item name="designation" label="Designation">
-                <Select placeholder="Select Designation" options={designations} allowClear showSearch optionFilterProp="label" />
-              </Form.Item>
-            </Col>
-          </Row>
-          <Row gutter={16}>
-            {' '}
-            <Col span={8}>
-              {/* Department */}
-              <Form.Item name="department" label="Department">
-                <Select placeholder="Select Department" options={departments} allowClear showSearch optionFilterProp="label" />
-              </Form.Item>
-            </Col>
-            <Col span={8}>
-              {/* Branch */}
-              <Form.Item label="Branches" name="selectedBranches" rules={[{ required: true, message: 'Please select at least one branch' }]}>
-                <Select
-                  mode="multiple"
-                  placeholder="Select Branches"
-                  options={branchOptions}
-                  allowClear
-                  showSearch
-                  optionFilterProp="label"
-                  onChange={(value) => {
-                    const normalized = value.map(Number);
-                    setSelectedBranches(normalized);
-
-                    const currentDefault = form.getFieldValue('defaultBranch');
-                    if (currentDefault && !normalized.includes(currentDefault)) {
-                      form.setFieldsValue({ defaultBranch: undefined });
-                    }
-                  }}
-                />
-              </Form.Item>
-            </Col>
-            <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">
-                  {branchOptions
-                    .filter((opt) => selectedBranches.includes(Number(opt.value)))
-                    .map((opt) => (
-                      <Option key={opt.value} value={Number(opt.value)}>
-                        {opt.label}
-                      </Option>
-                    ))}
-                </Select>
-              </Form.Item>
-            </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>
-                    <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> */}
-
-                  {isPasswordVisible && (
-                    <Form.Item
-                      name="password"
-                      label="Password"
-                      rules={[
-                        { required: true, message: 'Please enter your password' },
-                        { pattern: passwordRegex, message: passwordRegexMessage },
-                      ]}
-                    >
-                      <Input.Password placeholder="Enter password" autoComplete="new-password" />
-                    </Form.Item>
-                  )}
-                </>
-              ) : (
-                <Form.Item
-                  name="password"
-                  label="Password"
-                  rules={[
-                    {
-                      required: true,
-                      message: 'Please enter your password',
-                    },
-                    {
-                      pattern: new RegExp(passwordRegex),
-                      message: passwordRegexMessage,
-                    },
-                  ]}
-                >
-                  <Input.Password visibilityToggle={false} placeholder="Enter password" autoComplete="new-password" />
-                </Form.Item>
-              )}
-            </Col>
-            {/* </Form.Item> */}
-
-            {/* Path */}
-            {/* <Form.Item name="password" label="Password"
-                        rules={[
-                            {
-                                required: true,
-                                message: 'Please enter your password',
-                            },
-                            {
-                                pattern: new RegExp(passwordRegex),
-                                message: passwordRegexMessage,
-                            },
-                        ]}>
-                        <Input.Password visibilityToggle={false} placeholder="Enter password" autoComplete='new-password' />
-                    </Form.Item> */}
-            {/* Path Ends */}
-
-            {/* Path */}
-
-            {/* <Col span={8}>
-              <Form.Item name="role_id" label="Role" rules={[{ required: true, message: 'Please select a Role' }]}>
-                <Select placeholder="Select Role">
-                  {roles.map((role) => (
-                    <Option key={role.id} value={role.id}>
-                      {role.name}
-                    </Option>
-                  ))}
-                </Select>
-              </Form.Item>
-            </Col> */}
-
-            {/* <Form.Item name="mobile" label="Mobile" required={mobileRequired}>
-            <Input placeholder="Enter Mobile" />
-          </Form.Item> */}
-
-            {props?.ldap && (
-              <>
-                <Form.Item name="auth_type" label="auth_type">
-                  <Input placeholder="Enter auth_type" value={'LDAP'} disabled />
-
-                  {/* <Select
-
-                            placeholder="Auth Type"
-                            defaultValue={'LDAP'}
-                            // value={formContent && formContent.auth_type?formContent.auth_type:'LDAP'}
-                            allowClear
-                        // style={{ width: '60%' }}
-                        >
-                            <Option value={props.user_type}>
-                                {props.user_type}
-                            </Option>
-                        </Select> */}
-
-                  {/* <div style={{ display: 'flex', justifyContent: 'space-between' }}>
-
-                            <div style={{ width: '40%' }}>
- 
-                            </div>
-
-                            
-
-                        </div> */}
-                </Form.Item>
-
-                {/* Path */}
-                <Form.Item name="auth_user" label="User Name" required>
-                  <Input placeholder="Enter User Name" />
-                </Form.Item>
-              </>
-            )}
-          </Row>
-          <Row gutter={16}>
-            <Col span={8}>
-              <Form.Item>
-                <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
-                  <Switch
-                    disabled={disabled}
-                    // defaultChecked={view}
-                    onChange={changeView}
-                    checked={authentication}
-                    // disabled={disabled}
-                    defaultChecked
-                    // checkedChildren={<OrderedListOutlined />}
-                    // unCheckedChildren={<PicCenterOutlined />}
-                  />
-                  <span>Enable Two Factor Authentication</span>
-                </div>
-              </Form.Item>
-            </Col>
-            <Col span={8}>
-              {/* <label>User Status</label> */}
-              <Form.Item
-                name="active"
-                valuePropName="checked"
-                getValueFromEvent={(e) => (e.target.checked ? true : false)}
-                getValueProps={(value) => ({ checked: value === true })}
-                style={{ marginBottom: 0 }}
-              >
-                <Checkbox>Active</Checkbox>
-              </Form.Item>
-            </Col>
-          </Row>
-          {/* Path Ends */}
-
-          {/* Path */}
-          {/* <Form.Item name="active" label="Active" required>
-                        <Switch />
-                    </Form.Item> */}
-          {/* Path Ends */}
-
-          <Form.Item>
-            <Button loading={loading} htmlType={'submit'} type="primary">
-              Submit
-            </Button>
-          </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>
-  );
-};
-
-export default UserAdd;
+import React, { useState, useEffect, useContext } from 'react';
+
+import { useLocation } from 'react-router-dom';
+
+import { Skeleton, Typography, message, Switch, Form, Input, Select, Checkbox, Row, Col } from 'antd';
+
+import AsyncSelect from 'react-select/async';
+
+import { Table, Card, Button, JSONInput, GlobalContext, safeJSON, CountryPhoneInput, phoneValidator } from './../../../../lib/';
+
+import { ModelsAPI, PagesAPI, RolesAPI } from '../../..';
+
+import { UsersAPI } from '../../..';
+import DoctorAdd from '../../../doctor/components/doctor-add/doctor-add';
+import StaffAdd from '../../../staff/components/staff-add/staff-add';
+
+const { Title } = Typography;
+
+const { Option } = Select;
+
+const UserAdd = ({ model, callback, edit, history, formContent, match, additional_queries, props, mode = 'Add', attributes }) => {
+  /**Getting user data */
+  const { user = {} } = useContext(GlobalContext);
+  // let mode = 'Add';
+
+  const [disabled, setDisabled] = useState(true);
+
+  const [selectedOption, setSelectedOption] = useState(null);
+  // for selected branches
+  const [selectedBranches, setSelectedBranches] = useState([]);
+
+  // for default branch
+  // const [defaultBranch, setDefaultBranch] = useState(null);
+  //Need to check this condition
+  const [authentication, setAuthentication] = useState(true);
+
+  /**To store user values */
+  const [users, setUsers] = useState([]);
+  const [doctorID, setDoctorID] = useState(false);
+  const [selectedDoctor, setSelectedDoctor] = useState(null);
+  const [staffID, setStaffID] = useState(false);
+  const [selectedStaff, setSelectedStaff] = useState(null);
+  const [staffList, setStaffList] = useState([]);
+  /**Converting to JSON */
+  const firmDetails = safeJSON(user?.firm?.f_otherdetails1) ?? {};
+
+  /**Variable for cheaking mandatory condition of mobile*/
+  let mobileRequired;
+
+  /**If mode is mobile and fa is 'MND' or 'USR' then  mobile is mandatory */
+  if (((firmDetails && firmDetails.FA === 'MND') || (firmDetails && firmDetails.FA === 'USR')) && firmDetails.mode === 'mobile') {
+    mobileRequired = true;
+  } else {
+    mobileRequired = false;
+  }
+
+  if (formContent?.id) {
+    mode = 'Edit';
+  } else if (formContent?.copy) {
+    mode = 'Copy';
+  }
+
+  if (formContent?.attributes) {
+    if (typeof formContent.attributes === 'string') {
+      if (formContent.attributes !== '') {
+        formContent.attributes = JSON.parse(formContent.attributes);
+      } else {
+        if (formContent) {
+          formContent.attributes = {};
+        }
+      }
+    }
+  } else {
+    if (formContent) {
+      formContent.attributes = {};
+    }
+  }
+
+  const [loading, setLoading] = useState(true);
+  // user type state
+  const [userType, setUserType] = useState('general');
+  // state for branches list
+  const [branches, setBranches] = useState([]);
+  // designation list state
+  const [designations, setDesignations] = useState([]);
+  // department list state
+  const [departments, setDepartments] = useState([]);
+  // doctor list state
+  const [doctorList, setDoctorList] = useState([]);
+  // for role list
+  const [roles, setRoles] = useState([]);
+
+  const [form] = Form.useForm();
+
+  const [body, setBody] = useState(formContent);
+
+  const [isPasswordVisible, setIsPasswordVisible] = useState(false);
+
+  // state for doctor and staff visibility
+  const [doctorVisible, setDoctorVisible] = useState(false);
+  const [staffVisible, setStaffVisible] = useState(false);
+
+  const formData = {
+    ...body,
+    /**If panel is open then takes password in body */
+    password: !isPasswordVisible ? '' : body.password,
+  };
+
+  let passwordRegex;
+  let passwordRegexMessage;
+
+  if (props && props?.passwordRegex && props?.passwordRegexMessage) {
+    passwordRegex = props.passwordRegex;
+    passwordRegexMessage = props.passwordRegexMessage;
+  } else if (process.env.REACT_APP_PASSWORD_REGEX && process.env.REACT_APP_PASSWORD_REGEX_MESSAGE) {
+    passwordRegex = process.env.REACT_APP_PASSWORD_REGEX;
+    passwordRegexMessage = process.env.REACT_APP_PASSWORD_REGEX_MESSAGE;
+  } else {
+    passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&*(),.?":{}|<>])[A-Za-z\d!@#$%^&*(),.?":{}|<>]{8,}$/;
+    passwordRegexMessage =
+      'Password must be at least 8 characters long and contain atleast one uppercase letter, one lowercase letter, one digit and one special character';
+  }
+
+  useEffect(() => {
+    if (!loading && formContent) {
+      form.resetFields(); // clear previous values
+      form.setFieldsValue(formContent);
+    }
+  }, [loading, formContent]);
+
+  useEffect(() => {
+    if (formContent?.auth_user) {
+      setSelectedOption({
+        value: formContent.auth_user,
+        label: formContent.auth_user, // Add a helper function to capitalize
+      });
+    }
+  }, [formContent?.auth_user]);
+
+  useEffect(() => {
+    loadUsers();
+
+    setLoading(false);
+
+    if (firmDetails) {
+      /**if firmmas.otherdetails - 2FA == MND, then, 2FA option will be enabled by default and read-only  */
+      if (firmDetails.FA == 'MND') {
+        setAuthentication(true);
+
+        setDisabled(true);
+
+        /**if firmmas.otherdetails - 2FA == OPT, then, 2FA option will be enabled by default and editable */
+      } else if (firmDetails.FA == 'USR') {
+        /** If user has FA set to false , then disable authentication */
+        if (formContent?.FA !== undefined) {
+          setAuthentication(formContent?.FA);
+        }
+        setDisabled(true);
+
+        /**if firmmas.otherdetails - 2FA == NAP, then, 2FA option will be disabled by default and read-only*/
+      } else if (firmDetails.FA == 'NAP') {
+        setAuthentication(false);
+
+        setDisabled(true);
+      }
+    }
+  }, []);
+
+  useEffect(() => {
+    if (!loading && formContent?.role_id && roles.length > 0) {
+      const roleId = Number(formContent.role_id);
+
+      if (!Number.isNaN(roleId)) {
+        form.setFieldsValue({ role_id: roleId });
+      }
+    }
+  }, [loading, formContent, roles]);
+
+  /**
+   *Define the options dynamically
+   */
+  const getUserTypeOptions = () => [
+    { label: 'General', value: 'GEN' },
+    { label: 'Doctor', value: 'RAD' },
+    { label: 'Radiographer', value: 'TECH' },
+    { label: 'Staff', value: 'STAFF' },
+  ];
+
+  /**
+   * Get Branch List
+   */
+  const getBranches = () => {
+    setLoading(true);
+    UsersAPI.getBranches().then(async (result) => {
+      const details = await result.result.map((ele) => {
+        return {
+          ...ele,
+          ...(ele.br_otherdet1 ? JSON.parse(ele.br_otherdet1) : {}),
+        };
+      });
+      setBranches(details);
+      setLoading(false);
+    });
+  };
+
+  /** Get Designation List */
+  const getDesignations = () => {
+    setLoading(true);
+    UsersAPI.getDesignations()
+      .then((result) => {
+        if (result?.success && Array.isArray(result.result)) {
+          const details = result.result.map((ele) => ({
+            label: ele.dg_desc?.trim() || '',
+            value: ele.dg_code,
+          }));
+          setDesignations(details);
+        } else {
+          setDesignations([]);
+        }
+      })
+      .catch((error) => {
+        setDesignations([]);
+      })
+      .finally(() => setLoading(false));
+  };
+
+  /**
+   * get role lists
+   */
+  function getRoles() {
+    RolesAPI.getRole()
+      .then((res) => {
+        const activeRoles = Array.isArray(res.result) ? res.result.filter((r) => r.active === 'Y') : [];
+        setRoles(activeRoles);
+      })
+      .catch(() => setRoles([]));
+  }
+
+  /** Get Department List */
+  const getDepartments = () => {
+    setLoading(true);
+    UsersAPI.getDepartments()
+      .then((result) => {
+        if (result?.success && Array.isArray(result.result)) {
+          const details = result.result.map((ele) => ({
+            label: ele.dp_desc?.trim() || '',
+            value: ele.dp_id,
+          }));
+          setDepartments(details);
+        } else {
+          setDepartments([]);
+        }
+      })
+      .catch((error) => {
+        setDepartments([]);
+      })
+      .finally(() => setLoading(false));
+  };
+
+  /** Get Doctor List */
+  const getDoctors = () => {
+    UsersAPI.getDoctors()
+      .then((res) => {
+        if (res?.success && Array.isArray(res.result)) {
+          const list = res.result.map((doc) => ({
+            label: `${doc.do_name} (${doc.do_code})`,
+            value: doc.do_code,
+          }));
+          setDoctorList(list);
+        }
+      })
+      .catch((err) => console.error('Doctor API Error:', err));
+  };
+  /** Get staff List */
+  const getStaff = () => {
+    UsersAPI.getAllStaff()
+      .then((res) => {
+        if (Array.isArray(res)) {
+          const list = res.map((staff) => ({
+            label: `${staff.shortName || 'No Name'} (${staff.id})`,
+            value: staff.id,
+          }));
+
+          setStaffList(list);
+        } else {
+          console.error('API did not return an array!');
+        }
+      })
+      .catch((err) => console.error('staff API Error:', err));
+  };
+
+  // Function to handle user type change
+  const handleUserTypeChange = (value) => {
+    setUserType(value);
+
+    if (value === 'RAD') {
+      getDoctors(); // load doctor list
+    } else {
+      form.setFieldsValue({ default_code: undefined });
+    }
+    if (value === 'STAFF') {
+      getStaff(); // load staff list
+    } else {
+      form.setFieldsValue({ staff_code: undefined });
+    }
+  };
+
+  useEffect(() => {
+    getBranches();
+    getDesignations();
+    getDepartments();
+    getRoles();
+    getDoctors(); // load doctor list
+    getStaff();
+  }, []);
+
+  useEffect(() => {
+    if (formContent && formContent.user_type) {
+      form.setFieldsValue({ user_type: formContent.user_type });
+      setUserType(formContent.user_type);
+
+      if (formContent.user_type === 'RAD' && formContent.doctor_code) {
+        form.setFieldsValue({ default_code: formContent.doctor_code });
+      }
+      if (formContent.user_type === 'STAFF' && formContent.staff_code) {
+        form.setFieldsValue({ staff_code: formContent.staff_code });
+      }
+    }
+    if (!formContent) return;
+
+    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);
+
+    // 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 values
+    form.setFieldsValue({
+      selectedBranches: branchIds,
+      defaultBranch: defaultBranchCode,
+    });
+  }, [formContent, form]);
+  // Generate branch options for Select component
+  const branchOptions = branches.map((branch) => ({
+    label: branch.br_desc,
+    value: branch.br_code,
+  }));
+
+  /**
+   * 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*/
+    if (!isPasswordVisible && mode === 'Edit') {
+      values.password = body.password;
+    }
+    values.user_type = values.user_type;
+
+    if (values.user_type === 'RAD') {
+      values.doctor_code = values.default_code;
+    } else {
+      values.doctor_code = null;
+    }
+    if (values.user_type === 'STAFF') {
+      values.staff_code = values.staff_code;
+    } else {
+      values.staff_code = null;
+    }
+    values = {
+      ...values,
+      auth_type: 'LDAP',
+      mobile: mobileWithCountryCode,
+      FA: formContent?.FA === false ? false : authentication,
+
+    };
+
+    setLoading(true);
+
+    let id = formContent?.id;
+    if (props?.ldap && selectedOption && selectedOption.value) {
+      values = {
+        ...values,
+
+        addAllBranches: props.ldap.addAllBranches,
+        auth_user: selectedOption.value,
+        auth_type: 'LDAP',
+        FA: formContent?.FA === false ? false : authentication,
+      };
+    }
+
+    if (values.attributes && typeof values === 'object') {
+      values = {
+        ...values,
+
+        auth_type: 'LDAP',
+
+        attributes: JSON.stringify(values.attributes),
+      };
+    }
+
+    if (id) {
+      // Update of model
+
+      UsersAPI.updateUser({ id, formBody: values }).then((result) => {
+        if (result.success) message.success(result.message);
+        else message.error(result.message);
+
+        setLoading(false);
+
+        callback();
+      });
+    } else {
+      // Append the additional queries to the object
+      // additional_queries.forEach(({ field, value }) => {
+      //   values[field] = value;
+      // });
+      if (Array.isArray(additional_queries)) {
+        additional_queries.forEach(({ field, value }) => {
+          values[field] = value;
+        });
+      }
+
+      // add new model
+      UsersAPI.create(values).then((result) => {
+        setLoading(false);
+
+        if (result.success) {
+          message.success(result.message);
+          // close modal
+          callback();
+        } else {
+          message.error(result.message);
+        }
+      });
+    }
+  };
+
+  /**
+   * Function on handle change
+   * @param {*} selected
+   */
+  const handleCheackChange = (e) => {
+    setIsPasswordVisible(e.target.checked);
+  };
+
+  function changeView(result) {
+    setAuthentication(result);
+  }
+
+  /**
+   * Function to add load userrs
+   */
+  function loadUsers() {
+    // UsersAPI.getLdapUsers().then((result) => {
+    //     setUsers(result.result);
+    // });
+  }
+
+  // Transform array into react-select options
+  let options = users.map((item) => ({
+    value: item.name,
+    label: item.name, // Capitalize the first letter
+  }));
+
+  /**
+   * Function on handle change
+   * @param {*} selected
+   */
+  const handleChange = (selected) => {
+    setSelectedOption(selected);
+  };
+  /**
+   *
+   * @param {*} inputValue
+   * @param {*} callback
+   */
+
+  const loadOptions = (inputValue, callback) => {
+    // Filter options based on input
+    const filteredOptions = options.filter((option) => option.label.toLowerCase().includes(inputValue.toLowerCase()));
+    callback(filteredOptions);
+  };
+
+  return (
+    <section className="collection-add">
+      <Title level={4}>{mode} User</Title>
+
+      {loading ? (
+        <Skeleton />
+      ) : (
+        <Form initialValues={formData} form={form} layout="vertical" onFinish={onSubmit}>
+          {/* user type */}
+          <Row gutter={16}>
+            <Col span={6}>
+              <Form.Item
+                name="user_type"
+                label="User Type"
+                allowClear
+                showSearch
+                initialValue="GEN"
+                rules={[{ required: true, message: 'Please select a user type' }]}
+              >
+                <Select options={getUserTypeOptions()} onChange={handleUserTypeChange} />
+              </Form.Item>
+            </Col>
+            <Col span={12}>
+              {/* username */}
+              <Form.Item name={'name'} label="Name" rules={[{ required: true, message: 'Please enter your user name' }]}>
+                <Input placeholder="Enter Name" autoFocus />
+              </Form.Item>
+            </Col>
+            <Col span={6}>
+              {' '}
+              {/* Show extra dropdown only if user type is Doctor */}
+              {userType === 'RAD' && (
+                <Form.Item
+                  name="default_code"
+                  preserve={false}
+                  label="Default Code"
+                  rules={[{ required: true, message: 'Please select a default code' }]}
+                >
+                  <Select
+                    placeholder="Select Code"
+                    options={doctorList}
+                    showSearch
+                    optionFilterProp="label"
+                    onChange={(value) => {
+                      form.setFieldsValue({ default_code: value });
+                    }}
+                    dropdownRender={(menu) => (
+                      <>
+                        {menu}
+                        <div
+                          style={{
+                            padding: '8px',
+                            cursor: 'pointer',
+                            borderTop: '1px solid #f0f0f0',
+                            color: '#1890ff',
+                          }}
+                          onClick={() => setDoctorVisible(true)}
+                        >
+                          + Add New Doctor
+                        </div>
+                      </>
+                    )}
+                  />
+                </Form.Item>
+              )}
+              {userType === 'STAFF' && (
+                <Form.Item name="staff_code" label="Staff Code" rules={[{ required: true, message: 'Please select a staff code' }]}>
+                  <Select
+                    placeholder="Select Code"
+                    options={staffList}
+                    showSearch
+                    optionFilterProp="label"
+                    onChange={(value) => {
+                      form.setFieldsValue({ staff_code: value });
+                    }}
+                    dropdownRender={(menu) => (
+                      <>
+                        {menu}
+                        <div
+                          style={{
+                            padding: '8px',
+                            cursor: 'pointer',
+                            borderTop: '1px solid #f0f0f0',
+                            color: '#1890ff',
+                          }}
+                          onClick={() => setStaffVisible(true)}
+                        >
+                          + Add New Staff
+                        </div>
+                      </>
+                    )}
+                  />
+                </Form.Item>
+              )}
+            </Col>
+          </Row>
+          <Row gutter={16}>
+            <Col span={8}>
+              {/* email */}
+              <Form.Item name={'email'} label="User Name / Email" rules={[{ required: true, message: 'Please enter your email' }]}>
+                <Input placeholder="Enter Email Address" />
+              </Form.Item>
+            </Col>
+
+            <Col span={8}>
+              {/* Mobile */}
+              <Form.Item
+                name="mobile"
+                label="Mobile"
+                validateTrigger="onBlur"
+                rules={[{ required: true, message: 'Mobile number required' }, { validator: phoneValidator }]}
+              >
+                <CountryPhoneInput defaultCountryCode={process.env.REACT_APP_COUNTRYCODE} enableSearch inputStyle={{ width: '100%' }} />
+              </Form.Item>
+            </Col>
+            <Col span={8}>
+              {/* Designation */}
+              <Form.Item name="designation" label="Designation">
+                <Select placeholder="Select Designation" options={designations} allowClear showSearch optionFilterProp="label" />
+              </Form.Item>
+            </Col>
+          </Row>
+          <Row gutter={16}>
+            {' '}
+            <Col span={8}>
+              {/* Department */}
+              <Form.Item name="department" label="Department">
+                <Select placeholder="Select Department" options={departments} allowClear showSearch optionFilterProp="label" />
+              </Form.Item>
+            </Col>
+            <Col span={8}>
+              {/* Branch */}
+              <Form.Item label="Branches" name="selectedBranches" rules={[{ required: true, message: 'Please select at least one branch' }]}>
+                <Select
+                  mode="multiple"
+                  placeholder="Select Branches"
+                  options={branchOptions}
+                  allowClear
+                  showSearch
+                  optionFilterProp="label"
+                  onChange={(value) => {
+                    const normalized = value.map(Number);
+                    setSelectedBranches(normalized);
+
+                    const currentDefault = form.getFieldValue('defaultBranch');
+                    if (currentDefault && !normalized.includes(currentDefault)) {
+                      form.setFieldsValue({ defaultBranch: undefined });
+                    }
+                  }}
+                />
+              </Form.Item>
+            </Col>
+            <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">
+                  {branchOptions
+                    .filter((opt) => selectedBranches.includes(Number(opt.value)))
+                    .map((opt) => (
+                      <Option key={opt.value} value={Number(opt.value)}>
+                        {opt.label}
+                      </Option>
+                    ))}
+                </Select>
+              </Form.Item>
+            </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>
+                    <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> */}
+
+                  {isPasswordVisible && (
+                    <Form.Item
+                      name="password"
+                      label="Password"
+                      rules={[
+                        { required: true, message: 'Please enter your password' },
+                        { pattern: passwordRegex, message: passwordRegexMessage },
+                      ]}
+                    >
+                      <Input.Password placeholder="Enter password" autoComplete="new-password" />
+                    </Form.Item>
+                  )}
+                </>
+              ) : (
+                <Form.Item
+                  name="password"
+                  label="Password"
+                  rules={[
+                    {
+                      required: true,
+                      message: 'Please enter your password',
+                    },
+                    {
+                      pattern: new RegExp(passwordRegex),
+                      message: passwordRegexMessage,
+                    },
+                  ]}
+                >
+                  <Input.Password visibilityToggle={false} placeholder="Enter password" autoComplete="new-password" />
+                </Form.Item>
+              )}
+            </Col>
+            {/* </Form.Item> */}
+
+            {/* Path */}
+            {/* <Form.Item name="password" label="Password"
+                        rules={[
+                            {
+                                required: true,
+                                message: 'Please enter your password',
+                            },
+                            {
+                                pattern: new RegExp(passwordRegex),
+                                message: passwordRegexMessage,
+                            },
+                        ]}>
+                        <Input.Password visibilityToggle={false} placeholder="Enter password" autoComplete='new-password' />
+                    </Form.Item> */}
+            {/* Path Ends */}
+
+            {/* Path */}
+
+            {/* <Col span={8}>
+              <Form.Item name="role_id" label="Role" rules={[{ required: true, message: 'Please select a Role' }]}>
+                <Select placeholder="Select Role">
+                  {roles.map((role) => (
+                    <Option key={role.id} value={role.id}>
+                      {role.name}
+                    </Option>
+                  ))}
+                </Select>
+              </Form.Item>
+            </Col> */}
+
+            {/* <Form.Item name="mobile" label="Mobile" required={mobileRequired}>
+            <Input placeholder="Enter Mobile" />
+          </Form.Item> */}
+
+            {props?.ldap && (
+              <>
+                <Form.Item name="auth_type" label="auth_type">
+                  <Input placeholder="Enter auth_type" value={'LDAP'} disabled />
+
+                  {/* <Select
+
+                            placeholder="Auth Type"
+                            defaultValue={'LDAP'}
+                            // value={formContent && formContent.auth_type?formContent.auth_type:'LDAP'}
+                            allowClear
+                        // style={{ width: '60%' }}
+                        >
+                            <Option value={props.user_type}>
+                                {props.user_type}
+                            </Option>
+                        </Select> */}
+
+                  {/* <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+
+                            <div style={{ width: '40%' }}>
+ 
+                            </div>
+
+                            
+
+                        </div> */}
+                </Form.Item>
+
+                {/* Path */}
+                <Form.Item name="auth_user" label="User Name" required>
+                  <Input placeholder="Enter User Name" />
+                </Form.Item>
+              </>
+            )}
+          </Row>
+          <Row gutter={16}>
+            <Col span={8}>
+              <Form.Item>
+                <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+                  <Switch
+                    disabled={disabled}
+                    // defaultChecked={view}
+                    onChange={changeView}
+                    checked={authentication}
+                    // disabled={disabled}
+                    defaultChecked
+                    // checkedChildren={<OrderedListOutlined />}
+                    // unCheckedChildren={<PicCenterOutlined />}
+                  />
+                  <span>Enable Two Factor Authentication</span>
+                </div>
+              </Form.Item>
+            </Col>
+            <Col span={8}>
+              {/* <label>User Status</label> */}
+              <Form.Item
+                name="active"
+                valuePropName="checked"
+                getValueFromEvent={(e) => (e.target.checked ? true : false)}
+                getValueProps={(value) => ({ checked: value === true })}
+                style={{ marginBottom: 0 }}
+              >
+                <Checkbox>Active</Checkbox>
+              </Form.Item>
+            </Col>
+          </Row>
+          {/* Path Ends */}
+
+          {/* Path */}
+          {/* <Form.Item name="active" label="Active" required>
+                        <Switch />
+                    </Form.Item> */}
+          {/* Path Ends */}
+
+          <Form.Item>
+            <Button loading={loading} htmlType={'submit'} type="primary">
+              Submit
+            </Button>
+          </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>
+  );
+};
+
+export default UserAdd;