ui-soxo-bootstrap-core 2.4.25-dev.7 → 2.4.25-dev.8

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

@@ -0,0 +1,352 @@
+import React, { useState, useEffect, useRef } from 'react';
+import './staff-add.scss';
+import { Modal, Tabs, Input, Form, Row, Col, message, Checkbox, Select } from 'antd';
+import { useTranslation, Button } from './../../../../lib/';
+import { UsersAPI } from '../../..';
+
+const StaffAdd = ({ visible, onCancel, staffId, staffData, onSuccess }) => {
+  const [form] = Form.useForm();
+  const { t } = useTranslation();
+
+  /** -------------------------------
+   *  STATE
+   * ------------------------------- */
+  const [loading, setLoading] = useState(false);
+  const [designations, setDesignations] = useState([]);
+  const [isSubmitDisabled, setIsSubmitDisabled] = useState(true);
+  const [codeStatus, setCodeStatus] = useState({ status: '', message: '' });
+
+  const nameInputRef = useRef(null);
+
+  const editMode = Boolean(staffId);
+
+  /** -------------------------------
+   *  FORM WATCHERS
+   * ------------------------------- */
+  const watchedName = Form.useWatch('shortName', form);
+  const watchedCode = Form.useWatch('id', form);
+  const watchedDesc = Form.useWatch('description', form);
+
+  /** -------------------------------
+   *  EFFECTS
+   * ------------------------------- */
+
+  // Auto-focus on open
+  useEffect(() => {
+    if (visible) {
+      setTimeout(() => nameInputRef.current?.focus(), 200);
+    }
+  }, [visible]);
+
+  // Control submit button
+  useEffect(() => {
+    setIsSubmitDisabled(!(watchedName && watchedCode && watchedDesc));
+  }, [watchedName, watchedCode, watchedDesc]);
+
+  // Load designations when modal opens
+  useEffect(() => {
+    if (visible) getDesignations();
+  }, [visible]);
+
+  // Reset or fill edit form
+  useEffect(() => {
+    if (visible) {
+      if (editMode && staffData) fillEditForm(staffData);
+    } else {
+      form.resetFields();
+    }
+  }, [visible]);
+
+  /** -------------------------------
+   *  API CALL – Designations
+   * ------------------------------- */
+  const getDesignations = () => {
+    setLoading(true);
+    UsersAPI.getDesignations()
+      .then((res) => {
+        if (res?.success && Array.isArray(res.result)) {
+          const formatted = res.result.map((ele) => ({
+            label: ele.dg_desc?.trim() || '',
+            value: ele.dg_code,
+          }));
+          setDesignations(formatted);
+        } else {
+          setDesignations([]);
+        }
+      })
+      .catch((err) => {
+        console.error('Error fetching designations:', err);
+        setDesignations([]);
+      })
+      .finally(() => setLoading(false));
+  };
+
+  /** -------------------------------
+   *  VALIDATION – Code
+   * ------------------------------- */
+  const validateDoctorCode = async (_, value) => {
+    if (editMode) return Promise.resolve(); // Skip validation if editing
+
+    if (!value) {
+      setCodeStatus({ status: '', message: '' });
+      return Promise.resolve();
+    }
+
+    try {
+      const res = await UsersAPI.getStaffCode(value);
+
+      if (res?.status === 409 || res?.success === false) {
+        setCodeStatus({ status: 'error', message: res.message || 'Code already exists' });
+        return Promise.reject(new Error(res.message || 'Code already exists'));
+      }
+
+      if (res?.status === 200 && res?.success === true) {
+        setCodeStatus({
+          status: 'success',
+          message: 'The entered code is valid for assigning a staff.',
+        });
+        return Promise.resolve();
+      }
+
+      setCodeStatus({ status: 'error', message: 'Unexpected response' });
+      return Promise.reject(new Error('Unexpected response'));
+    } catch {
+      setCodeStatus({ status: 'error', message: 'Validation failed' });
+      return Promise.reject(new Error('Validation failed'));
+    }
+  };
+
+  /** -------------------------------
+   *  UTIL – Enter Key Navigation
+   * ------------------------------- */
+  const handleEnterKey = (e) => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      const fields = Array.from(document.querySelectorAll('.ant-input'));
+      const index = fields.indexOf(e.target);
+      if (index > -1 && index < fields.length - 1) {
+        fields[index + 1].focus();
+      }
+    }
+  };
+
+  /** -------------------------------
+   *  FORM FILL – Edit Mode
+   * ------------------------------- */
+  const fillEditForm = (data) => {
+    form.setFieldsValue({
+      id: data.id,
+      shortName: data.shortName,
+      description: data.description,
+      designation: data.designationPtr,
+      phone1: data.phone,
+      phone2: data.mobile || data.alternateMobile,
+      email1: data.email,
+      email2: data.alternateEmail,
+      slno: data.slNo,
+      active: data.active === 'Y' ? 'Y' : 'N',
+      remarks: data.remarks,
+      address1: data.address1,
+      address2: data.address2,
+      place: data.place,
+      zip: data.zip,
+    });
+  };
+
+  /** -------------------------------
+   *  SUBMIT HANDLER
+   * ------------------------------- */
+  const handleFinish = async (values) => {
+    setLoading(true);
+
+    const payload = {
+      id: values.id,
+      shortName: values.shortName,
+      description: values.description,
+      designationPtr: values.designation,
+      phone: values.phone1,
+      mobile: values.phone2,
+      alternateMobile: values.phone2,
+      email: values.email1,
+      alternateEmail: values.email2,
+      remarks: values.remarks,
+      slNo: values.slno ? Number(values.slno) : null,
+      active: values.active === 'Y' ? 'Y' : 'N',
+      address1: values.address1,
+      address2: values.address2,
+      place: values.place,
+      zip: values.zip,
+    };
+
+    try {
+      const res = editMode ? await UsersAPI.updateStaff(payload, staffData.id) : await UsersAPI.createStaff(payload);
+
+      if (res?.success) {
+        message.success(editMode ? 'Staff updated successfully' : 'Staff created successfully');
+        onSuccess?.();
+        onCancel();
+      } else {
+        message.error(res?.message || 'Operation failed');
+      }
+    } catch {
+      message.error('Something went wrong');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  /** -------------------------------
+   *  RENDER
+   * ------------------------------- */
+  return (
+    <Modal
+      title={editMode ? 'Edit Staff' : 'Add Staff'}
+      open={visible}
+      onCancel={onCancel}
+      width={950}
+      footer={null}
+      destroyOnClose
+      style={{ top: 10 }}
+    >
+      <Form form={form} layout="vertical" onFinish={handleFinish}>
+        {/* TOP SECTION */}
+        <Row gutter={16}>
+          <Col span={6}>
+            <Form.Item
+              label="Code"
+              name="id"
+              validateTrigger="onChange"
+              hasFeedback={!editMode}
+              rules={[{ required: true }, { validator: validateDoctorCode }]}
+            >
+              <Input placeholder="Enter Code" ref={nameInputRef} onKeyDown={handleEnterKey} disabled={editMode} />
+            </Form.Item>
+          </Col>
+
+          <Col span={6}>
+            <Form.Item label="Name" name="shortName" rules={[{ required: true }]}>
+              <Input placeholder="Enter Name" onKeyDown={handleEnterKey} />
+            </Form.Item>
+          </Col>
+
+          <Col span={12}>
+            <Form.Item label="Description" name="description" rules={[{ required: true }]}>
+              <Input placeholder="Enter Description" onKeyDown={handleEnterKey} />
+            </Form.Item>
+          </Col>
+        </Row>
+
+        <Tabs defaultActiveKey="1">
+          {/* GENERAL TAB */}
+          <Tabs.TabPane tab="GENERAL" key="1">
+            <Row gutter={16}>
+              <Col span={6}>
+                <Form.Item label="Phone Number 1" name="phone1">
+                  <Input maxLength={10} placeholder="Enter Phone Number" onKeyDown={handleEnterKey} />
+                </Form.Item>
+              </Col>
+
+              <Col span={6}>
+                <Form.Item label="Phone Number 2" name="phone2">
+                  <Input maxLength={10} placeholder="Enter Phone Number" onKeyDown={handleEnterKey} />
+                </Form.Item>
+              </Col>
+
+              <Col span={6}>
+                <Form.Item label="Email ID 1" name="email1">
+                  <Input placeholder="Enter Email" onKeyDown={handleEnterKey} />
+                </Form.Item>
+              </Col>
+
+              <Col span={6}>
+                <Form.Item label="Email ID 2" name="email2">
+                  <Input placeholder="Enter Email" onKeyDown={handleEnterKey} />
+                </Form.Item>
+              </Col>
+            </Row>
+
+            <Row gutter={16}>
+              <Col span={8}>
+                <Form.Item name="designation" label="Designation">
+                  <Select placeholder="Select Designation" options={designations} allowClear showSearch optionFilterProp="label" />
+                </Form.Item>
+              </Col>
+
+              <Col span={8}>
+                <Form.Item label="Serial Number" name="slno">
+                  <Input placeholder="Enter Serial Number" onKeyDown={handleEnterKey} />
+                </Form.Item>
+              </Col>
+
+              <Col span={8}>
+                <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginTop: 30 }}>
+                  <label>Active</label>
+                  <Form.Item
+                    name="active"
+                    valuePropName="checked"
+                    getValueFromEvent={(e) => (e.target.checked ? 'Y' : 'N')}
+                    getValueProps={(value) => ({ checked: value === 'Y' })}
+                    style={{ marginBottom: 0 }}
+                  >
+                    <Checkbox />
+                  </Form.Item>
+                </div>
+              </Col>
+            </Row>
+
+            <Row>
+              <Col span={24}>
+                <Form.Item label="Remarks" name="remarks">
+                  <Input placeholder="Enter Remarks" onKeyDown={handleEnterKey} />
+                </Form.Item>
+              </Col>
+            </Row>
+          </Tabs.TabPane>
+
+          {/* ADDRESS TAB */}
+          <Tabs.TabPane tab="ADDRESS" key="2">
+            <Row gutter={16}>
+              <Col span={12}>
+                <Form.Item label="Address Line 1" name="address1">
+                  <Input placeholder="Enter Address" onKeyDown={handleEnterKey} />
+                </Form.Item>
+              </Col>
+
+              <Col span={12}>
+                <Form.Item label="Address Line 2" name="address2">
+                  <Input placeholder="Enter Address" onKeyDown={handleEnterKey} />
+                </Form.Item>
+              </Col>
+            </Row>
+
+            <Row gutter={16}>
+              <Col span={12}>
+                <Form.Item label="Place" name="place">
+                  <Input placeholder="Enter Place" onKeyDown={handleEnterKey} />
+                </Form.Item>
+              </Col>
+
+              <Col span={12}>
+                <Form.Item label="Zip Code" name="zip">
+                  <Input placeholder="Enter Zip Code" maxLength={7} onKeyDown={handleEnterKey} />
+                </Form.Item>
+              </Col>
+            </Row>
+          </Tabs.TabPane>
+        </Tabs>
+
+        {/* FOOTER BUTTONS */}
+        <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 10 }}>
+          <Button onClick={onCancel} type="secondary">
+            Cancel
+          </Button>
+          <Button type="primary" htmlType="submit" loading={loading} disabled={isSubmitDisabled}>
+            {editMode ? 'Update' : 'Save'}
+          </Button>
+        </div>
+      </Form>
+    </Modal>
+  );
+};
+
+export default StaffAdd;

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

@@ -12,6 +12,7 @@ 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;
 
@@ -37,6 +38,9 @@ const UserAdd = ({ model, callback, edit, history, formContent, match, additiona
   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);
 
@@ -160,6 +164,7 @@ const UserAdd = ({ model, callback, edit, history, formContent, match, additiona
     { label: 'General', value: 'GEN' },
     { label: 'Doctor', value: 'RAD' },
     { label: 'Radiographer', value: 'TECH' },
+    { label: 'Staff', value: 'STAFF' },
   ];
 
   /**
@@ -237,6 +242,25 @@ const UserAdd = ({ model, callback, edit, history, formContent, match, additiona
       })
       .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 {
+          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) => {
@@ -247,6 +271,11 @@ const UserAdd = ({ model, callback, edit, history, formContent, match, additiona
     } else {
       form.setFieldsValue({ default_code: undefined });
     }
+    if (value === 'STAFF') {
+      getStaff(); // load staff list
+    } else {
+      form.setFieldsValue({ staff_code: undefined });
+    }
   };
 
   useEffect(() => {
@@ -254,6 +283,7 @@ const UserAdd = ({ model, callback, edit, history, formContent, match, additiona
     getDesignations();
     getDepartments();
     getDoctors(); // load doctor list
+    getStaff();
   }, []);
 
   useEffect(() => {
@@ -264,6 +294,9 @@ const UserAdd = ({ model, callback, edit, history, formContent, match, additiona
       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 {
@@ -294,7 +327,6 @@ const UserAdd = ({ model, callback, edit, history, formContent, match, additiona
    * Submit values
    */
   const onSubmit = (values) => {
-    console.log('values____________', 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;
@@ -306,6 +338,11 @@ const UserAdd = ({ model, callback, edit, history, formContent, match, additiona
     } 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',
@@ -481,6 +518,37 @@ const UserAdd = ({ model, callback, edit, history, formContent, match, additiona
                   />
                 </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}>

package/core/models/users/users.js

@@ -276,6 +276,63 @@ class Users extends Base {
   getUser = ({ id }) => {
     return ApiUtils.get({ url: `users/${id}` });
   };
+
+  /**
+   *Cutsom Api for creating staff
+   * @returns
+   */
+
+  createStaff = (formBody) => {
+    return ApiUtils.post({
+      url: `staff/create-staff`,
+      formBody,
+    });
+  };
+
+  /**
+   * Update a staff by ID
+   * @param {Object} formBody - Data to update
+   * @param {string|number} id - Staff ID
+   * @returns {Promise} API response
+   */
+  updateStaff = (formBody, id) => {
+    return ApiUtils.put({
+      url: `staff/update-staff/${id}`,
+      formBody,
+    });
+  };
+
+  /**
+   * edit staff with id
+   * @returns
+   */
+
+  getStaff = (id) => {
+    return ApiUtils.get({
+      url: `staff/get-staff/${id}`,
+    });
+  };
+
+  /**
+   * staff code validation
+   *
+   */
+  getStaffCode = (code) => {
+    return ApiUtils.get({
+      url: `staff/check-staff-exists/${code}`,
+    });
+  };
+
+  /**
+   * get all staff
+   * @returns
+   */
+
+  getAllStaff = () => {
+    return ApiUtils.get({
+      url: 'staff/get-all-staff',
+    });
+  };
 }
 
 export default Users;

package/core/modules/steps/steps.js

@@ -512,7 +512,7 @@ export default function ProcessStepsPage({ processId = 1, match, CustomComponent
   return (
     <Card>
       <Row gutter={20}>
-        <Col xs={24} sm={24} lg={timelineCollapsed ? 3 : 6}>
+        <Col xs={24} sm={24} lg={timelineCollapsed ? 2 : 6}>
 
        
         

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ui-soxo-bootstrap-core",
-  "version": "2.4.25-dev.7",
+  "version": "2.4.25-dev.8",
   "description": "All the Core Components for you to start",
   "keywords": [
     "all in one"