ui-soxo-bootstrap-core 2.4.24 → 2.4.25-dev.10

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

@@ -2,8 +2,7 @@ import React, { useState, useEffect, useContext } from 'react';
 
 import { useLocation } from 'react-router-dom';
 
-import { Skeleton, Typography, message, Switch, Form, Input, Select, Checkbox } from 'antd';
-
+import { Skeleton, Typography, message, Switch, Form, Input, Select, Checkbox, Row, Col } from 'antd';
 
 import AsyncSelect from 'react-select/async';
 
@@ -12,350 +11,661 @@ import { Table, Card, Button, JSONInput, GlobalContext } from './../../../../lib
 import { ModelsAPI, PagesAPI } 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 }) => {
-
-    /**Getting user data */
-    const { user = {} } = useContext(GlobalContext);
-    let mode = 'Add';
-
-    const [disabled, setDisabled] = useState(true);
-
-    const [selectedOption, setSelectedOption] = useState(null);
-
-    //Need to check this condition
-    const [authentication, setAuthentication] = useState(false);
-
-    /**To store user values */
-    const [users, setUsers] = useState([]);
-
-    /**Converting to JSON */
-    let firmDetails = JSON.parse(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 {
-
-                formContent.attributes = {};
-
-            }
+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(false);
+
+  /**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 */
+  let firmDetails = JSON.parse(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 {
-        formContent.attributes = {}
+      }
     }
-
-    const [loading, setLoading] = useState(true);
-
-    const [form] = Form.useForm();
-
-    const [body, setBody] = useState(formContent);
-
-    const [isPasswordVisible, setIsPasswordVisible] = useState(false);
-
-    const formData = {
-        ...body,
-        /**If panel is open then takes password in body */
-        password: !isPasswordVisible ? "" : body.password
+  } else {
+    if (formContent) {
+      formContent.attributes = {};
     }
-
-
-    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"
+  }
+
+  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([]);
+
+  const [form] = Form.useForm();
+
+  const [body, setBody] = useState(formContent);
+
+  const [isPasswordVisible, setIsPasswordVisible] = useState(false);
+  const [visible, setVisible] = 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);
 
-    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') {
-
-                setAuthentication(true)
-
-                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)
-            }
-
-        }
-
-
-    }, []);
+        /**if firmmas.otherdetails - 2FA == OPT, then, 2FA option will be enabled by default and editable */
+      } else if (firmDetails.FA == 'USR') {
+        setAuthentication(true);
 
-    /**
-     * Submit values
-     */
-    const onSubmit = (values) => {
+        setDisabled(true);
 
-        /**If PanelOpen is open and edit mode then password will be existing password else new password*/
-        if (!isPasswordVisible && mode === 'Edit') {
-            values.password = body.password;
-        }
+        /**if firmmas.otherdetails - 2FA == NAP, then, 2FA option will be disabled by default and read-only*/
+      } else if (firmDetails.FA == 'NAP') {
+        setAuthentication(false);
 
-        values = {
-            ...values,
-            auth_type: 'LDAP',
-            FA: authentication
+        setDisabled(true);
+      }
+    }
+  }, []);
+  /**
+   *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([]);
         }
-
-        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: authentication
-            }
+      })
+      .catch((error) => {
+        console.error('Error fetching designations:', error);
+        setDesignations([]);
+      })
+      .finally(() => setLoading(false));
+  };
+
+  /** 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([]);
         }
-
-        if (values.attributes && typeof values === 'object') {
-
-            values = {
-                ...values,
-                auth_type: 'LDAP',
-
-                attributes: JSON.stringify(values.attributes)
-            }
+      })
+      .catch((error) => {
+        console.error('Error fetching departments:', 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);
         }
-
-        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();
-
-            });
-
+      })
+      .catch((err) => console.error('Doctor API Error:', err));
+  };
+  /** Get staff List */
+  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})`,
+            value: staff.id,
+          }));
+
+          setStaffList(list);
         } else {
-
-            // Append the additional queries to the object
-            additional_queries.forEach(({ field, value }) => {
-
-                values[field] = value;
-
-            })
-
-            // add new model
-            UsersAPI.create(values).then((result) => {
-
-                // callback();
-                if (result.success)
-
-                    message.success(result.message);
-
-                else
-                    message.error(result.message)
-
-                setLoading(false);
-
-                callback();
-
-            });
+          console.error('API did not return an array!');
         }
-    };
+      })
+      .catch((err) => console.error('staff API Error:', err));
+  };
 
-    /**
-   * Function on handle change
-   * @param {*} selected 
+  // 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();
+    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?.id && formContent?.organization_details) {
+      try {
+        const org = JSON.parse(formContent.organization_details);
+        const branchIds = org.branch_ids?.map((b) => b.id) || [];
+        const defaultBranchObj = org.branch_ids?.find((b) => b.DefaultBranch === 'true');
+        const defaultBr = defaultBranchObj?.id || null;
+
+        setSelectedBranches(branchIds);
+        setDefaultBranch(defaultBr);
+
+        form.setFieldsValue({
+          selectedBranches: branchIds,
+          defaultBranch: defaultBr,
+        });
+      } catch (err) {
+        console.error('Invalid organization_details JSON', err);
+      }
+    }
+  }, [formContent]);
+  // Generate branch options for Select component
+  const branchOptions = branches.map((branch) => ({
+    label: branch.br_desc,
+    value: branch.br_code,
+  }));
+
+  /**
+   * Submit values
    */
-    const handleCheackChange = (e) => {
+  const onSubmit = (values) => {
+    /**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;
 
-        setIsPasswordVisible(e.target.checked);
+    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',
+      FA: 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: authentication,
+      };
+    }
 
-    function changeView(result) {
+    if (values.attributes && typeof values === 'object') {
+      values = {
+        ...values,
+        auth_type: 'LDAP',
 
-        setAuthentication(result);
+        attributes: JSON.stringify(values.attributes),
+      };
     }
 
-    /**
-     * Function to add load userrs
-     */
-    function loadUsers() {
+    if (id) {
+      // Update of model
 
-        // UsersAPI.getLdapUsers().then((result) => {
+      UsersAPI.updateUser({ id, formBody: values }).then((result) => {
+        if (result.success) message.success(result.message);
+        else message.error(result.message);
 
-        //     setUsers(result.result);
+        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) => {
+        // callback();
+        if (result.success) message.success(result.message);
+        else message.error(result.message);
 
-    }
+        setLoading(false);
 
-    // 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);
-    };
+        callback();
+      });
+    }
+  };
 
-    return (
-        <section className="collection-add">
-            <Title level={4}>{mode} User</Title>
+  /**
+   * Function on handle change
+   * @param {*} selected
+   */
+  const handleCheackChange = (e) => {
+    setIsPasswordVisible(e.target.checked);
+  };
 
-            {loading ? (
-                <Skeleton />
-            ) : (
-                <Form initialValues={formData} form={form} layout="vertical" onFinish={onSubmit}>
+  function changeView(result) {
+    setAuthentication(result);
+  }
 
-                    {/* Caption */}
-                    <Form.Item name={"name"} label="Name" required>
-                        <Input placeholder="Enter name" />
-                    </Form.Item>
-                    {/* Caption Ends */}
+  /**
+   * 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
+   */
 
-                    {/* Name */}
-                    <Form.Item name={"email"} label="Email" required>
-                        <Input placeholder="Enter email" />
-                    </Form.Item>
-                    {/* Name Ends */}
-
-                    {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,
-                                },
-                            ]}
+  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" label="Default Code" rules={[{ required: true, message: 'Please select a default code' }]}>
+                  <Select
+                    placeholder="Select Code"
+                    options={doctorList}
+                    showSearch
+                    optionFilterProp="label"
+                    dropdownRender={(menu) => (
+                      <>
+                        {menu}
+                        <div
+                          style={{
+                            padding: '8px',
+                            cursor: 'pointer',
+                            borderTop: '1px solid #f0f0f0',
+                            color: '#1890ff',
+                          }}
+                          onClick={() => setVisible(true)}
                         >
-                            <Input.Password visibilityToggle={false} placeholder="Enter password" autoComplete="new-password" />
-                        </Form.Item>
+                          + Add New Doctor
+                        </div>
+                      </>
                     )}
-
-                    {/* </Form.Item> */}
-
-
-                    {/* Path */}
-                    {/* <Form.Item name="password" label="Password"
+                  />
+                  {/* 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" label="Staff Code" rules={[{ required: true, message: 'Please select a staff code' }]}>
+                  <Select
+                    placeholder="Select Code"
+                    options={staffList}
+                    showSearch
+                    optionFilterProp="label"
+                    dropdownRender={(menu) => (
+                      <>
+                        {menu}
+                        <div
+                          style={{
+                            padding: '8px',
+                            cursor: 'pointer',
+                            borderTop: '1px solid #f0f0f0',
+                            color: '#1890ff',
+                          }}
+                          onClick={() => setVisible(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>
+          </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" rules={[{ required: true, message: 'Please enter your mobile number' }]}>
+                <Input placeholder="Enter Mobile" />
+              </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"
+                  value={selectedBranches}
+                  onChange={(value) => {
+                    setSelectedBranches(value);
+
+                    // ⬅NEW: remove defaultBranch if it’s not in selectedBranches
+                    if (!value.includes(defaultBranch)) {
+                      setDefaultBranch(undefined);
+                      form.setFieldsValue({ defaultBranch: undefined });
+                    }
+                  }}
+                  options={branchOptions}
+                  allowClear
+                  showSearch
+                  optionFilterProp="label"
+                  maxTagCount={5} // Show only 5 tags
+                  maxTagPlaceholder={(omittedValues) => `+${omittedValues.length}`} // Show "+n"
+                />
+              </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" onChange={setDefaultBranch}>
+                  {branchOptions
+                    .filter((opt) => selectedBranches.includes(opt.value))
+                    .map((opt) => (
+                      <Option key={opt.value} value={opt.value}>
+                        {opt.label}
+                      </Option>
+                    ))}
+                </Select>
+              </Form.Item>
+            </Col>
+          </Row>
+          <Row gutter={16}>
+            <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,
@@ -368,25 +678,25 @@ const UserAdd = ({ model, callback, edit, history, formContent, match, additiona
                         ]}>
                         <Input.Password visibilityToggle={false} placeholder="Enter password" autoComplete='new-password' />
                     </Form.Item> */}
-                    {/* Path Ends */}
-
-
-                    {/* Path */}
-                    <Form.Item name="user_group" label="User Group" required>
-                        <Input placeholder="Enter User Group" />
-                    </Form.Item>
+            {/* Path Ends */}
 
-                    <Form.Item name="mobile" label="Mobile" required={mobileRequired}>
-                        <Input placeholder="Enter Mobile" />
-                    </Form.Item>
+            {/* 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>
 
-                    {props.ldap && (
-                        <>
-                            <Form.Item name="auth_type" label="auth_type">
-                                <Input placeholder="Enter auth_type" value={"LDAP"} disabled />
+            {/* <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
+                  {/* <Select
 
                             placeholder="Auth Type"
                             defaultValue={'LDAP'}
@@ -399,7 +709,7 @@ const UserAdd = ({ model, callback, edit, history, formContent, match, additiona
                             </Option>
                         </Select> */}
 
-                                {/* <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+                  {/* <div style={{ display: 'flex', justifyContent: 'space-between' }}>
 
                             <div style={{ width: '40%' }}>
  
@@ -408,51 +718,63 @@ const UserAdd = ({ model, callback, edit, history, formContent, match, additiona
                             
 
                         </div> */}
-                            </Form.Item>
-
-                            {/* Path */}
-                            <Form.Item name="auth_user" label="User Name" required>
-                                <Input placeholder="Enter User Name" />
-                            </Form.Item>
-                        </>
-                    )}
-
-
-                    <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>
-                    {/* Path Ends */}
-
-                    {/* Path */}
-                    {/* <Form.Item name="active" label="Active" required>
+                </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>
-            )
-            }
-        </section >
-    );
+          {/* Path Ends */}
+
+          <Form.Item>
+            <Button loading={loading} htmlType={'submit'} type="primary">
+              Submit
+            </Button>
+          </Form.Item>
+        </Form>
+      )}
+    </section>
+  );
 };
 
 export default UserAdd;