ui-soxo-bootstrap-core 2.6.5 → 2.6.6

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

@@ -1,467 +1,467 @@
-import React, { useState, useEffect, useRef } from 'react';
-
-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 [staffList, setStaffList] = 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 and staff list when modal opens
-  useEffect(() => {
-    if (visible) {
-      getDesignations();
-      getStaffList();
-    }
-  }, [visible]);
-
-  // Reset or fill edit form
-  useEffect(() => {
-    if (visible) {
-      if (editMode && staffData) fillEditForm(staffData);
-    } else {
-      form.resetFields();
-    }
-  }, [visible]);
-
-  const phoneValidator = (_, value) => {
-    if (!value) {
-      return Promise.resolve(); // not required
-    }
-
-    if (!/^\d{10}$/.test(value)) {
-      return Promise.reject('Phone number must be 10 digits');
-    }
-
-    return Promise.resolve();
-  };
-
-  /** -------------------------------
-   *  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));
-  };
-
-  /** -------------------------------
-   *  API CALL – Staff List
-   * ------------------------------- */
-  const getStaffList = () => {
-    UsersAPI.getAllStaff()
-      .then((res) => {
-        if (Array.isArray(res)) {
-          setStaffList(res);
-        }
-      })
-      .catch((err) => console.error(err));
-  };
-
-  /** -------------------------------
-   *  VALIDATION – Input
-   * ------------------------------- */
-  const validateInput = async (rule, value) => {
-    // Common check: Starting space
-    if (value && value.startsWith(' ')) {
-      const msg = rule.message || 'Cannot start with a space';
-      if (rule.field === 'id') {
-        setCodeStatus({ status: 'error', message: msg });
-      }
-      return Promise.reject(new Error(msg));
-    }
-
-    // Specific check: Code (id)
-    if (rule.field === 'id') {
-      if (editMode) return Promise.resolve();
-
-      if (!value) {
-        setCodeStatus({ status: '', message: '' });
-        return Promise.resolve();
-      }
-
-      // Any space check
-      if (/\s/.test(value)) {
-        setCodeStatus({ status: 'error', message: 'Spaces are not allowed in the code' });
-        return Promise.reject(new Error('Spaces are not allowed in the code'));
-      }
-
-      // API Check
-      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: 'Please enter a valid code' });
-        return Promise.reject(new Error('Please enter a valid code'));
-      } catch {
-        setCodeStatus({ status: 'error', message: 'Validation failed' });
-        return Promise.reject(new Error('Validation failed'));
-      }
-    }
-
-    return Promise.resolve();
-  };
-
-  const validateSerial = (_, value) => {
-    if (!value) {
-      return Promise.resolve();
-    }
-
-    // Allow same serial number for the same staff in edit mode
-    if (editMode && String(value) === String(staffData?.slNo)) {
-      return Promise.resolve();
-    }
-
-    const exists = staffList.some((staff) => String(staff.slNo) === String(value));
-
-    return exists ? Promise.reject('Serial Number already exists') : Promise.resolve();
-  };
-
-  /** -------------------------------
-   *  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 || data.mobile,
-      phone2: 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,
-    });
-  };
-
-  const existing = staffData || {};
-
-  /** -------------------------------
-   *  SUBMIT HANDLER
-   * ------------------------------- */
-  const handleFinish = async (values) => {
-    setLoading(true);
-
-    const payload = {
-      id: values.id,
-      shortName: values.shortName,
-      description: values.description,
-      designationPtr: values.designation ?? existing.designationPtr ?? null,
-      phone: values.phone1 ?? existing.phone ?? null,
-      mobile: values.phone1 ?? existing.mobile ?? null,
-      alternateMobile: values.phone2 ?? existing.alternateMobile ?? null,
-      email: values.email1 ?? existing.email ?? null,
-      alternateEmail: values.email2 ?? existing.alternateEmail ?? null,
-      remarks: values.remarks ?? existing.remarks ?? null,
-      slNo: values.slno ?? existing.slNo ?? null,
-      active: values.active === 'Y' ? 'Y' : 'N',
-      address1: values.address1 ?? existing.address1 ?? null,
-      address2: values.address2 ?? existing.address2 ?? null,
-      place: values.place ?? existing.place ?? null,
-      zip: values.zip ?? existing.zip ?? null,
-    };
-
-    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, message: 'Code is required' }, { validator: validateInput }]}
-            >
-              <Input placeholder="Enter Code" autoComplete="off" maxLength={10} ref={nameInputRef} onKeyDown={handleEnterKey} disabled={editMode} />
-            </Form.Item>
-          </Col>
-
-          <Col span={12}>
-            <Form.Item
-              label="Name"
-              name="description"
-              rules={[
-                { required: true, message: 'Name is required' },
-                { pattern: /^[A-Za-z\s]+$/, message: 'Name should contain only alphabets' },
-                { validator: validateInput, message: 'Name cannot start with a space' },
-              ]}
-            >
-              <Input placeholder="Enter Description" autoComplete="off" onKeyDown={handleEnterKey} />
-            </Form.Item>
-          </Col>
-          <Col span={6}>
-            <Form.Item
-              label="Short Name"
-              name="shortName"
-              rules={[
-                { required: true, message: 'Short Name is required' },
-                { pattern: /^[A-Za-z\s]+$/, message: 'Name should contain only alphabets' },
-                { validator: validateInput, message: 'Short Name cannot start with a space' },
-              ]}
-            >
-              <Input placeholder="Enter Short Name" autoComplete="off" onKeyDown={handleEnterKey} maxLength={10} />
-            </Form.Item>
-          </Col>
-        </Row>
-
-        <Tabs defaultActiveKey="1" destroyInactiveTabPane={false}>
-          {/* 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="Phone Number" name="phone1" rules={[{ validator: phoneValidator }]}>
-                  <Input
-                    maxLength={10}
-                    autoComplete="off"
-                    placeholder="Enter Phone Number"
-                    inputMode="numeric"
-                    onChange={(e) => (e.target.value = e.target.value.replace(/\D/g, ''))}
-                    onKeyDown={handleEnterKey}
-                  />
-                </Form.Item>
-              </Col>
-
-              <Col span={6}>
-                <Form.Item label="Alternate Phone Number" name="phone2" rules={[{ validator: phoneValidator }]}>
-                  <Input
-                    maxLength={10}
-                    placeholder="Enter Phone Number"
-                    autoComplete="off"
-                    inputMode="numeric"
-                    onChange={(e) => (e.target.value = e.target.value.replace(/\D/g, ''))}
-                    onKeyDown={handleEnterKey}
-                  />
-                </Form.Item>
-              </Col>
-
-              <Col span={6}>
-                <Form.Item label="Email ID" name="email1" rules={[{ type: 'email', message: 'Please enter a valid email' }]}>
-                  <Input autoComplete="off" placeholder="Enter Email" onKeyDown={handleEnterKey} />
-                </Form.Item>
-              </Col>
-
-              <Col span={6}>
-                <Form.Item label="Alternate Email" name="email2" rules={[{ type: 'email', message: 'Please enter a valid email' }]}>
-                  <Input autoComplete="off" 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"
-                  rules={[{ message: 'only numbers are allowed', pattern: /^\d*$/ }, { validator: validateSerial }]}
-                >
-                  <Input autoComplete="off" maxLength={5} 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"
-                  rules={[
-                    { max: 50, message: 'Remarks must be less than 50 characters' },
-                    { validator: validateInput, message: 'Remarks cannot start with a space' },
-                  ]}
-                >
-                  <Input autoComplete="off" 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 autoComplete="off" placeholder="Enter Address" onKeyDown={handleEnterKey} />
-                </Form.Item>
-              </Col>
-
-              <Col span={12}>
-                <Form.Item label="Address Line 2" name="address2">
-                  <Input autoComplete="off" placeholder="Enter Address" onKeyDown={handleEnterKey} />
-                </Form.Item>
-              </Col>
-            </Row>
-
-            <Row gutter={16}>
-              <Col span={12}>
-                <Form.Item label="Place" name="place">
-                  <Input autoComplete="off" placeholder="Enter Place" onKeyDown={handleEnterKey} />
-                </Form.Item>
-              </Col>
-
-              <Col span={12}>
-                <Form.Item label="Zip Code" name="zip">
-                  <Input autoComplete="off" 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;
+import React, { useState, useEffect, useRef } from 'react';
+
+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 [staffList, setStaffList] = 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 and staff list when modal opens
+  useEffect(() => {
+    if (visible) {
+      getDesignations();
+      getStaffList();
+    }
+  }, [visible]);
+
+  // Reset or fill edit form
+  useEffect(() => {
+    if (visible) {
+      if (editMode && staffData) fillEditForm(staffData);
+    } else {
+      form.resetFields();
+    }
+  }, [visible]);
+
+  const phoneValidator = (_, value) => {
+    if (!value) {
+      return Promise.resolve(); // not required
+    }
+
+    if (!/^\d{10}$/.test(value)) {
+      return Promise.reject('Phone number must be 10 digits');
+    }
+
+    return Promise.resolve();
+  };
+
+  /** -------------------------------
+   *  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));
+  };
+
+  /** -------------------------------
+   *  API CALL – Staff List
+   * ------------------------------- */
+  const getStaffList = () => {
+    UsersAPI.getAllStaff()
+      .then((res) => {
+        if (Array.isArray(res)) {
+          setStaffList(res);
+        }
+      })
+      .catch((err) => console.error(err));
+  };
+
+  /** -------------------------------
+   *  VALIDATION – Input
+   * ------------------------------- */
+  const validateInput = async (rule, value) => {
+    // Common check: Starting space
+    if (value && value.startsWith(' ')) {
+      const msg = rule.message || 'Cannot start with a space';
+      if (rule.field === 'id') {
+        setCodeStatus({ status: 'error', message: msg });
+      }
+      return Promise.reject(new Error(msg));
+    }
+
+    // Specific check: Code (id)
+    if (rule.field === 'id') {
+      if (editMode) return Promise.resolve();
+
+      if (!value) {
+        setCodeStatus({ status: '', message: '' });
+        return Promise.resolve();
+      }
+
+      // Any space check
+      if (/\s/.test(value)) {
+        setCodeStatus({ status: 'error', message: 'Spaces are not allowed in the code' });
+        return Promise.reject(new Error('Spaces are not allowed in the code'));
+      }
+
+      // API Check
+      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: 'Please enter a valid code' });
+        return Promise.reject(new Error('Please enter a valid code'));
+      } catch {
+        setCodeStatus({ status: 'error', message: 'Validation failed' });
+        return Promise.reject(new Error('Validation failed'));
+      }
+    }
+
+    return Promise.resolve();
+  };
+
+  const validateSerial = (_, value) => {
+    if (!value) {
+      return Promise.resolve();
+    }
+
+    // Allow same serial number for the same staff in edit mode
+    if (editMode && String(value) === String(staffData?.slNo)) {
+      return Promise.resolve();
+    }
+
+    const exists = staffList.some((staff) => String(staff.slNo) === String(value));
+
+    return exists ? Promise.reject('Serial Number already exists') : Promise.resolve();
+  };
+
+  /** -------------------------------
+   *  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 || data.mobile,
+      phone2: 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,
+    });
+  };
+
+  const existing = staffData || {};
+
+  /** -------------------------------
+   *  SUBMIT HANDLER
+   * ------------------------------- */
+  const handleFinish = async (values) => {
+    setLoading(true);
+
+    const payload = {
+      id: values.id,
+      shortName: values.shortName,
+      description: values.description,
+      designationPtr: values.designation ?? existing.designationPtr ?? null,
+      phone: values.phone1 ?? existing.phone ?? null,
+      mobile: values.phone1 ?? existing.mobile ?? null,
+      alternateMobile: values.phone2 ?? existing.alternateMobile ?? null,
+      email: values.email1 ?? existing.email ?? null,
+      alternateEmail: values.email2 ?? existing.alternateEmail ?? null,
+      remarks: values.remarks ?? existing.remarks ?? null,
+      slNo: values.slno ?? existing.slNo ?? null,
+      active: values.active === 'Y' ? 'Y' : 'N',
+      address1: values.address1 ?? existing.address1 ?? null,
+      address2: values.address2 ?? existing.address2 ?? null,
+      place: values.place ?? existing.place ?? null,
+      zip: values.zip ?? existing.zip ?? null,
+    };
+
+    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, message: 'Code is required' }, { validator: validateInput }]}
+            >
+              <Input placeholder="Enter Code" autoComplete="off" maxLength={10} ref={nameInputRef} onKeyDown={handleEnterKey} disabled={editMode} />
+            </Form.Item>
+          </Col>
+
+          <Col span={12}>
+            <Form.Item
+              label="Name"
+              name="description"
+              rules={[
+                { required: true, message: 'Name is required' },
+                { pattern: /^[A-Za-z\s]+$/, message: 'Name should contain only alphabets' },
+                { validator: validateInput, message: 'Name cannot start with a space' },
+              ]}
+            >
+              <Input placeholder="Enter Description" autoComplete="off" onKeyDown={handleEnterKey} />
+            </Form.Item>
+          </Col>
+          <Col span={6}>
+            <Form.Item
+              label="Short Name"
+              name="shortName"
+              rules={[
+                { required: true, message: 'Short Name is required' },
+                { pattern: /^[A-Za-z\s]+$/, message: 'Name should contain only alphabets' },
+                { validator: validateInput, message: 'Short Name cannot start with a space' },
+              ]}
+            >
+              <Input placeholder="Enter Short Name" autoComplete="off" onKeyDown={handleEnterKey} maxLength={10} />
+            </Form.Item>
+          </Col>
+        </Row>
+
+        <Tabs defaultActiveKey="1" destroyInactiveTabPane={false}>
+          {/* 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="Phone Number" name="phone1" rules={[{ validator: phoneValidator }]}>
+                  <Input
+                    maxLength={10}
+                    autoComplete="off"
+                    placeholder="Enter Phone Number"
+                    inputMode="numeric"
+                    onChange={(e) => (e.target.value = e.target.value.replace(/\D/g, ''))}
+                    onKeyDown={handleEnterKey}
+                  />
+                </Form.Item>
+              </Col>
+
+              <Col span={6}>
+                <Form.Item label="Alternate Phone Number" name="phone2" rules={[{ validator: phoneValidator }]}>
+                  <Input
+                    maxLength={10}
+                    placeholder="Enter Phone Number"
+                    autoComplete="off"
+                    inputMode="numeric"
+                    onChange={(e) => (e.target.value = e.target.value.replace(/\D/g, ''))}
+                    onKeyDown={handleEnterKey}
+                  />
+                </Form.Item>
+              </Col>
+
+              <Col span={6}>
+                <Form.Item label="Email ID" name="email1" rules={[{ type: 'email', message: 'Please enter a valid email' }]}>
+                  <Input autoComplete="off" placeholder="Enter Email" onKeyDown={handleEnterKey} />
+                </Form.Item>
+              </Col>
+
+              <Col span={6}>
+                <Form.Item label="Alternate Email" name="email2" rules={[{ type: 'email', message: 'Please enter a valid email' }]}>
+                  <Input autoComplete="off" 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"
+                  rules={[{ message: 'only numbers are allowed', pattern: /^\d*$/ }, { validator: validateSerial }]}
+                >
+                  <Input autoComplete="off" maxLength={5} 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"
+                  rules={[
+                    { max: 50, message: 'Remarks must be less than 50 characters' },
+                    { validator: validateInput, message: 'Remarks cannot start with a space' },
+                  ]}
+                >
+                  <Input autoComplete="off" 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 autoComplete="off" placeholder="Enter Address" onKeyDown={handleEnterKey} />
+                </Form.Item>
+              </Col>
+
+              <Col span={12}>
+                <Form.Item label="Address Line 2" name="address2">
+                  <Input autoComplete="off" placeholder="Enter Address" onKeyDown={handleEnterKey} />
+                </Form.Item>
+              </Col>
+            </Row>
+
+            <Row gutter={16}>
+              <Col span={12}>
+                <Form.Item label="Place" name="place">
+                  <Input autoComplete="off" placeholder="Enter Place" onKeyDown={handleEnterKey} />
+                </Form.Item>
+              </Col>
+
+              <Col span={12}>
+                <Form.Item label="Zip Code" name="zip">
+                  <Input autoComplete="off" 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;