ui-soxo-bootstrap-core 2.6.59 → 2.6.62-dev.1

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

@@ -1,432 +1,432 @@
-import React, { useState, useEffect, useRef } from 'react';
-import './doctor-add.scss';
-import { Modal, Select, Tabs, Input, Form, Row, Col, message, Checkbox } from 'antd';
-import { useTranslation, Button } from './../../../../lib/';
-
-import { UsersAPI } from '../../..';
-import SignatureCanvasComponent from '../../../../lib/components/consent/signature-pad';
-
-const DoctorAdd = ({ visible, onCancel, doctorId, doctorData, onSuccess }) => {
-  // console.log('attributes', attributes);
-  const [form] = Form.useForm();
-  const { t } = useTranslation();
-
-  // Signature states..
-  const [fileUrl, setFileUrl] = useState(null);
-  const [editingSignature, setEditingSignature] = useState(false);
-  const [previousSignature, setPreviousSignature] = useState(null);
-
-  // submit state
-  const [isSubmitDisabled, setIsSubmitDisabled] = useState(true);
-  const [loading, setLoading] = useState(false);
-  const [doctorID, setDoctorID] = useState(false);
-  const [selectedDoctor, setSelectedDoctor] = useState(null);
-
-  // const propValues = attributes || {};
-  // const doctorType = propValues?.type;
-
-  const editMode = Boolean(doctorId);
-
-  const nameInputRef = useRef(null);
-
-  const watchedName = Form.useWatch('name', form);
-  const watchedCode = Form.useWatch('code', form);
-  const watchedSignature = Form.useWatch('signature', form);
-
-  const [codeStatus, setCodeStatus] = useState({
-    status: '',
-    message: '',
-  });
-
-  const getDoctorTypeOptions = () => [
-    { label: 'In House', value: 'DRINH' },
-    { label: 'Out Side', value: 'DROTR' },
-  ];
-  /** Autofocus on modal open */
-  useEffect(() => {
-    if (visible) {
-      setTimeout(() => {
-        nameInputRef.current?.focus();
-      }, 200);
-    }
-  }, [visible]);
-
-  /** Enable/disable submit */
-  useEffect(() => {
-    if (watchedName && watchedCode && watchedSignature) {
-      setIsSubmitDisabled(false);
-    } else {
-      setIsSubmitDisabled(true);
-    }
-  }, [watchedName, watchedCode, watchedSignature]);
-
-  /** Enter key jump */
-  const handleEnterKey = (e) => {
-    if (e.key === 'Enter') {
-      e.preventDefault();
-      const fields = Array.from(document.querySelectorAll('.ant-input, .ant-select-selector'));
-      const index = fields.indexOf(e.target);
-      if (index > -1 && index < fields.length - 1) {
-        const nextField = fields[index + 1];
-        nextField.focus();
-        if (nextField.classList.contains('ant-select-selector')) nextField.click();
-      }
-    }
-  };
-
-  /** Fill form when editing */
-  const fillEditForm = (data) => {
-    if (!data) return;
-
-    form.setFieldsValue({
-      name: data.name,
-      code: data.code,
-      qualification: data.qualification,
-      designation: data.designation,
-      type: data.type,
-      regno1: data.regno1,
-      remarks: data.remarks,
-      active: data.active === 'Y' ? 'Y' : 'N',
-      address: data.address1,
-      places: data.place,
-      pincode: data.zip,
-      phone_number: data.phone,
-      alternate_phone: data.mobile,
-      email_id: data.email,
-      fax: data.fax,
-    });
-
-    if (data.signature) {
-      setFileUrl(data.signature);
-      form.setFieldValue('signature', data.signature);
-    }
-  };
-
-  /** Code validation */
-  const validateDoctorCode = async (_, value) => {
-    if (editMode) return Promise.resolve();
-    if (!value) {
-      setCodeStatus({ status: '', message: '' });
-      return Promise.resolve();
-    }
-
-    if (!/^[a-zA-Z0-9]*$/.test(value)) {
-      setCodeStatus({ status: 'error', message: 'Code can only contain letters and numbers.' });
-      return Promise.reject(new Error('Code can only contain letters and numbers.'));
-    }
-
-    if (editMode && doctorData?.do_code === value) {
-      setCodeStatus({ status: 'success', message: 'Code is unchanged' });
-      return Promise.resolve();
-    }
-
-    try {
-      const res = await UsersAPI.getDoctorCode(value);
-
-      if (res?.statusCode === 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?.statusCode === 200 && res?.success === true) {
-        setCodeStatus({
-          status: 'success',
-          message: 'The entered code is used for assigning a doctor.',
-        });
-        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'));
-    }
-  };
-
-  /** Reset when closing */
-  useEffect(() => {
-    if (visible) {
-      if (editMode) fillEditForm(doctorData);
-    } else {
-      form.resetFields();
-      setFileUrl(null);
-      setPreviousSignature(null);
-      setEditingSignature(false);
-    }
-  }, [visible, editMode, doctorData]);
-
-  /** Submit handler */
-  const handleFinish = async (values) => {
-    setLoading(true);
-
-    const payload = {
-      dbkey: values.dbkey ?? doctorData?.dbkey ?? null,
-      code: values.code ?? doctorData?.code ?? '',
-      name: values.name ?? doctorData?.name ?? '',
-      regno1: values.regno1 ?? doctorData?.regno1 ?? '',
-      regno2: doctorData?.regno2 ?? '',
-      qualification: values.qualification ?? doctorData?.qualification ?? '',
-      desg: values.designation ?? doctorData?.designation ?? '',
-
-      add1: values.address ?? doctorData?.address1 ?? '',
-      add2: doctorData?.address2 ?? '',
-
-      place: values.places ?? doctorData?.place ?? '',
-      zip: values.pincode ?? doctorData?.zip ?? '',
-
-      phone: values.phone_number ?? doctorData?.phone ?? '',
-      mobile: values.alternate_phone ?? doctorData?.mobile ?? '',
-      email: values.email_id ?? doctorData?.email ?? '',
-      fax: values.fax ?? doctorData?.fax ?? '',
-
-      remarks: values.remarks ?? doctorData?.remarks ?? '',
-
-      deptptr: doctorData?.deptptr ?? '',
-
-      regfee: values.regfee ?? doctorData?.regfee ?? null,
-      consfee: values.consfee ?? doctorData?.consfee ?? null,
-      gpfee: values.gpfee ?? doctorData?.gpfee ?? null,
-      consdays: values.consdays ?? doctorData?.consdays ?? null,
-      slno: values.slno ?? doctorData?.slno ?? null,
-      timeperpatient: values.timeperpatient ?? doctorData?.timeperpatient ?? null,
-
-      active: values.active === 'Y' ? 'Y' : 'N',
-
-      username: doctorData?.username ?? '',
-
-      type: values.type ?? doctorData?.type ?? '',
-
-      signature: fileUrl ?? doctorData?.signature ?? '',
-    };
-    try {
-      let res;
-      if (editMode) {
-        res = await UsersAPI.updateDoctors(payload, doctorData.code);
-      } else {
-        res = await UsersAPI.createDoctors(payload);
-      }
-
-      if (res?.success) {
-        message.success(editMode ? 'Doctor updated successfully' : 'Doctor created successfully');
-        onSuccess?.();
-
-        onCancel();
-      } else {
-        message.error(res?.message || 'Operation failed');
-      }
-    } catch {
-      message.error('Something went wrong');
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  return (
-    <>
-      <Modal
-        title={doctorId ? 'Edit Doctor' : 'Add Doctor'}
-        open={visible}
-        onCancel={onCancel}
-        width={950}
-        footer={null}
-        destroyOnClose
-        style={{ top: 10 }}
-      >
-        <Form form={form} layout="vertical" onFinish={handleFinish}>
-          {/* NAME + CODE */}
-          <Row gutter={16}>
-            <Col span={12}>
-              <Form.Item
-                label="Name"
-                name="name"
-                rules={[
-                  { required: true },
-                  {
-                    pattern: /^[A-Za-z]+(?: [A-Za-z]+)*$/,
-                    message: 'Name should contain only alphabets',
-                  },
-                ]}
-              >
-                <Input autoComplete="off" ref={nameInputRef} placeholder="Enter Name" onKeyDown={handleEnterKey} />
-              </Form.Item>
-            </Col>
-
-            <Col span={12}>
-              <Form.Item
-                label="Code"
-                name="code"
-                validateTrigger="onChange"
-                hasFeedback={!editMode}
-                rules={[{ required: true }, { validator: validateDoctorCode }]}
-              >
-                <Input autoComplete="off" placeholder="Enter Code" onKeyDown={handleEnterKey} disabled={editMode} />
-              </Form.Item>
-            </Col>
-          </Row>
-
-          <Tabs defaultActiveKey="1">
-            {/* GENERAL */}
-            <Tabs.TabPane tab="GENERAL" key="1">
-              <Row gutter={16}>
-                <Col span={8}>
-                  <Form.Item label="Type" name="type">
-                    <Select placeholder="Select Type" options={getDoctorTypeOptions() || []} showSearch />
-                  </Form.Item>
-                </Col>
-
-                <Col span={8}>
-                  <Form.Item label="Qualification" name="qualification">
-                    <Input placeholder="Enter Qualification" onKeyDown={handleEnterKey} />
-                  </Form.Item>
-                </Col>
-
-                <Col span={8}>
-                  <Form.Item label="Designation" name="designation">
-                    <Input placeholder="Enter Designation" onKeyDown={handleEnterKey} />
-                  </Form.Item>
-                </Col>
-              </Row>
-
-              <Row gutter={16}>
-                <Col span={6}>
-                  <Form.Item label="Reg. No." name="regno1">
-                    <Input placeholder="Enter Reg No" onKeyDown={handleEnterKey} />
-                  </Form.Item>
-                </Col>
-
-                <Col span={8}>
-                  <Form.Item label="Remarks" name="remarks">
-                    <Input placeholder="Enter Remarks" onKeyDown={handleEnterKey} />
-                  </Form.Item>
-                </Col>
-
-                <Col span={8}>
-                  <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginTop: 30 }}>
-                    <Form.Item
-                      name="active"
-                      valuePropName="checked"
-                      getValueFromEvent={(e) => (e.target.checked ? 'Y' : 'N')}
-                      getValueProps={(value) => ({ checked: value === 'Y' })}
-                      style={{ marginBottom: 0 }}
-                    >
-                      <Checkbox>Active</Checkbox>
-                    </Form.Item>
-                  </div>
-                </Col>
-              </Row>
-
-              {/* SIGNATURE (DRAW ONLY) */}
-              <Form.Item name="signature" label="Signature">
-                {/* Preview */}
-                {fileUrl && !editingSignature && (
-                  <div className="signature-preview">
-                    <img src={fileUrl} alt="signature" className="signature-image" />
-
-                    <div style={{ marginTop: 10 }}>
-                      <Button
-                        type="primary"
-                        onClick={() => {
-                          setEditingSignature(true);
-                          setPreviousSignature(fileUrl);
-                          setFileUrl(null);
-                          form.setFieldValue('signature', null);
-                        }}
-                      >
-                        Redraw Signature
-                      </Button>
-                    </div>
-                  </div>
-                )}
-
-                {/* Drawing Canvas */}
-                {(editingSignature || !fileUrl) && (
-                  <SignatureCanvasComponent
-                    onSaveAndAddSignature={(sig) => {
-                      setFileUrl(sig);
-                      setEditingSignature(false);
-                      setPreviousSignature(null);
-                      form.setFieldValue('signature', sig);
-                    }}
-                    onClear={() => {
-                      if (previousSignature) {
-                        setFileUrl(previousSignature);
-                      } else {
-                        setFileUrl(null);
-                        form.setFieldValue('signature', null);
-                      }
-                      setEditingSignature(false);
-                    }}
-                  />
-                )}
-              </Form.Item>
-            </Tabs.TabPane>
-
-            {/* ADDRESS */}
-            <Tabs.TabPane tab="ADDRESS" key="2">
-              <Row gutter={16}>
-                <Col span={8}>
-                  <Form.Item label="Address" name="address">
-                    <Input placeholder="Enter Address" onKeyDown={handleEnterKey} />
-                  </Form.Item>
-                </Col>
-
-                <Col span={8}>
-                  <Form.Item label="Places" name="places">
-                    <Input placeholder="Enter Place" onKeyDown={handleEnterKey} />
-                  </Form.Item>
-                </Col>
-
-                <Col span={8}>
-                  <Form.Item label="Pincode" name="pincode">
-                    <Input placeholder="Enter Pincode" onKeyDown={handleEnterKey} maxLength={7} />
-                  </Form.Item>
-                </Col>
-              </Row>
-
-              <Row gutter={16}>
-                <Col span={8}>
-                  <Form.Item label="Phone Number" name="phone_number">
-                    <Input placeholder="Enter Phone Number" onKeyDown={handleEnterKey} maxLength={10} />
-                  </Form.Item>
-                </Col>
-
-                <Col span={8}>
-                  <Form.Item label="Alternate Phone" name="alternate_phone">
-                    <Input placeholder="Enter Alternate Number" onKeyDown={handleEnterKey} maxLength={10} />
-                  </Form.Item>
-                </Col>
-
-                <Col span={8}>
-                  <Form.Item label="Email ID" name="email_id" rules={[{ type: 'email', message: 'Please enter a valid email address' }]}>
-                    <Input placeholder="Enter Email ID" onKeyDown={handleEnterKey} />
-                  </Form.Item>
-                </Col>
-              </Row>
-
-              <Row gutter={16}>
-                <Col span={8}>
-                  <Form.Item label="Fax" name="fax">
-                    <Input placeholder="Enter Fax Number" onKeyDown={handleEnterKey} maxLength={25} />
-                  </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}>
-              {doctorId ? 'Update' : 'Save'}
-            </Button>
-          </div>
-        </Form>
-      </Modal>
-    </>
-  );
-};
-
-export default DoctorAdd;
+import React, { useState, useEffect, useRef } from 'react';
+import './doctor-add.scss';
+import { Modal, Select, Tabs, Input, Form, Row, Col, message, Checkbox } from 'antd';
+import { useTranslation, Button } from './../../../../lib/';
+
+import { UsersAPI } from '../../..';
+import SignatureCanvasComponent from '../../../../lib/components/consent/signature-pad';
+
+const DoctorAdd = ({ visible, onCancel, doctorId, doctorData, onSuccess }) => {
+  // console.log('attributes', attributes);
+  const [form] = Form.useForm();
+  const { t } = useTranslation();
+
+  // Signature states..
+  const [fileUrl, setFileUrl] = useState(null);
+  const [editingSignature, setEditingSignature] = useState(false);
+  const [previousSignature, setPreviousSignature] = useState(null);
+
+  // submit state
+  const [isSubmitDisabled, setIsSubmitDisabled] = useState(true);
+  const [loading, setLoading] = useState(false);
+  const [doctorID, setDoctorID] = useState(false);
+  const [selectedDoctor, setSelectedDoctor] = useState(null);
+
+  // const propValues = attributes || {};
+  // const doctorType = propValues?.type;
+
+  const editMode = Boolean(doctorId);
+
+  const nameInputRef = useRef(null);
+
+  const watchedName = Form.useWatch('name', form);
+  const watchedCode = Form.useWatch('code', form);
+  const watchedSignature = Form.useWatch('signature', form);
+
+  const [codeStatus, setCodeStatus] = useState({
+    status: '',
+    message: '',
+  });
+
+  const getDoctorTypeOptions = () => [
+    { label: 'In House', value: 'DRINH' },
+    { label: 'Out Side', value: 'DROTR' },
+  ];
+  /** Autofocus on modal open */
+  useEffect(() => {
+    if (visible) {
+      setTimeout(() => {
+        nameInputRef.current?.focus();
+      }, 200);
+    }
+  }, [visible]);
+
+  /** Enable/disable submit */
+  useEffect(() => {
+    if (watchedName && watchedCode && watchedSignature) {
+      setIsSubmitDisabled(false);
+    } else {
+      setIsSubmitDisabled(true);
+    }
+  }, [watchedName, watchedCode, watchedSignature]);
+
+  /** Enter key jump */
+  const handleEnterKey = (e) => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      const fields = Array.from(document.querySelectorAll('.ant-input, .ant-select-selector'));
+      const index = fields.indexOf(e.target);
+      if (index > -1 && index < fields.length - 1) {
+        const nextField = fields[index + 1];
+        nextField.focus();
+        if (nextField.classList.contains('ant-select-selector')) nextField.click();
+      }
+    }
+  };
+
+  /** Fill form when editing */
+  const fillEditForm = (data) => {
+    if (!data) return;
+
+    form.setFieldsValue({
+      name: data.name,
+      code: data.code,
+      qualification: data.qualification,
+      designation: data.designation,
+      type: data.type,
+      regno1: data.regno1,
+      remarks: data.remarks,
+      active: data.active === 'Y' ? 'Y' : 'N',
+      address: data.address1,
+      places: data.place,
+      pincode: data.zip,
+      phone_number: data.phone,
+      alternate_phone: data.mobile,
+      email_id: data.email,
+      fax: data.fax,
+    });
+
+    if (data.signature) {
+      setFileUrl(data.signature);
+      form.setFieldValue('signature', data.signature);
+    }
+  };
+
+  /** Code validation */
+  const validateDoctorCode = async (_, value) => {
+    if (editMode) return Promise.resolve();
+    if (!value) {
+      setCodeStatus({ status: '', message: '' });
+      return Promise.resolve();
+    }
+
+    if (!/^[a-zA-Z0-9]*$/.test(value)) {
+      setCodeStatus({ status: 'error', message: 'Code can only contain letters and numbers.' });
+      return Promise.reject(new Error('Code can only contain letters and numbers.'));
+    }
+
+    if (editMode && doctorData?.do_code === value) {
+      setCodeStatus({ status: 'success', message: 'Code is unchanged' });
+      return Promise.resolve();
+    }
+
+    try {
+      const res = await UsersAPI.getDoctorCode(value);
+
+      if (res?.statusCode === 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?.statusCode === 200 && res?.success === true) {
+        setCodeStatus({
+          status: 'success',
+          message: 'The entered code is used for assigning a doctor.',
+        });
+        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'));
+    }
+  };
+
+  /** Reset when closing */
+  useEffect(() => {
+    if (visible) {
+      if (editMode) fillEditForm(doctorData);
+    } else {
+      form.resetFields();
+      setFileUrl(null);
+      setPreviousSignature(null);
+      setEditingSignature(false);
+    }
+  }, [visible, editMode, doctorData]);
+
+  /** Submit handler */
+  const handleFinish = async (values) => {
+    setLoading(true);
+
+    const payload = {
+      dbkey: values.dbkey ?? doctorData?.dbkey ?? null,
+      code: values.code ?? doctorData?.code ?? '',
+      name: values.name ?? doctorData?.name ?? '',
+      regno1: values.regno1 ?? doctorData?.regno1 ?? '',
+      regno2: doctorData?.regno2 ?? '',
+      qualification: values.qualification ?? doctorData?.qualification ?? '',
+      desg: values.designation ?? doctorData?.designation ?? '',
+
+      add1: values.address ?? doctorData?.address1 ?? '',
+      add2: doctorData?.address2 ?? '',
+
+      place: values.places ?? doctorData?.place ?? '',
+      zip: values.pincode ?? doctorData?.zip ?? '',
+
+      phone: values.phone_number ?? doctorData?.phone ?? '',
+      mobile: values.alternate_phone ?? doctorData?.mobile ?? '',
+      email: values.email_id ?? doctorData?.email ?? '',
+      fax: values.fax ?? doctorData?.fax ?? '',
+
+      remarks: values.remarks ?? doctorData?.remarks ?? '',
+
+      deptptr: doctorData?.deptptr ?? '',
+
+      regfee: values.regfee ?? doctorData?.regfee ?? null,
+      consfee: values.consfee ?? doctorData?.consfee ?? null,
+      gpfee: values.gpfee ?? doctorData?.gpfee ?? null,
+      consdays: values.consdays ?? doctorData?.consdays ?? null,
+      slno: values.slno ?? doctorData?.slno ?? null,
+      timeperpatient: values.timeperpatient ?? doctorData?.timeperpatient ?? null,
+
+      active: values.active === 'Y' ? 'Y' : 'N',
+
+      username: doctorData?.username ?? '',
+
+      type: values.type ?? doctorData?.type ?? '',
+
+      signature: fileUrl ?? doctorData?.signature ?? '',
+    };
+    try {
+      let res;
+      if (editMode) {
+        res = await UsersAPI.updateDoctors(payload, doctorData.code);
+      } else {
+        res = await UsersAPI.createDoctors(payload);
+      }
+
+      if (res?.success) {
+        message.success(editMode ? 'Doctor updated successfully' : 'Doctor created successfully');
+        onSuccess?.();
+
+        onCancel();
+      } else {
+        message.error(res?.message || 'Operation failed');
+      }
+    } catch {
+      message.error('Something went wrong');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <>
+      <Modal
+        title={doctorId ? 'Edit Doctor' : 'Add Doctor'}
+        open={visible}
+        onCancel={onCancel}
+        width={950}
+        footer={null}
+        destroyOnClose
+        style={{ top: 10 }}
+      >
+        <Form form={form} layout="vertical" onFinish={handleFinish}>
+          {/* NAME + CODE */}
+          <Row gutter={16}>
+            <Col span={12}>
+              <Form.Item
+                label="Name"
+                name="name"
+                rules={[
+                  { required: true },
+                  {
+                    pattern: /^[A-Za-z]+(?: [A-Za-z]+)*$/,
+                    message: 'Name should contain only alphabets',
+                  },
+                ]}
+              >
+                <Input autoComplete="off" ref={nameInputRef} placeholder="Enter Name" onKeyDown={handleEnterKey} />
+              </Form.Item>
+            </Col>
+
+            <Col span={12}>
+              <Form.Item
+                label="Code"
+                name="code"
+                validateTrigger="onChange"
+                hasFeedback={!editMode}
+                rules={[{ required: true }, { validator: validateDoctorCode }]}
+              >
+                <Input autoComplete="off" placeholder="Enter Code" onKeyDown={handleEnterKey} disabled={editMode} />
+              </Form.Item>
+            </Col>
+          </Row>
+
+          <Tabs defaultActiveKey="1">
+            {/* GENERAL */}
+            <Tabs.TabPane tab="GENERAL" key="1">
+              <Row gutter={16}>
+                <Col span={8}>
+                  <Form.Item label="Type" name="type">
+                    <Select placeholder="Select Type" options={getDoctorTypeOptions() || []} showSearch />
+                  </Form.Item>
+                </Col>
+
+                <Col span={8}>
+                  <Form.Item label="Qualification" name="qualification">
+                    <Input placeholder="Enter Qualification" onKeyDown={handleEnterKey} />
+                  </Form.Item>
+                </Col>
+
+                <Col span={8}>
+                  <Form.Item label="Designation" name="designation">
+                    <Input placeholder="Enter Designation" onKeyDown={handleEnterKey} />
+                  </Form.Item>
+                </Col>
+              </Row>
+
+              <Row gutter={16}>
+                <Col span={6}>
+                  <Form.Item label="Reg. No." name="regno1">
+                    <Input placeholder="Enter Reg No" onKeyDown={handleEnterKey} />
+                  </Form.Item>
+                </Col>
+
+                <Col span={8}>
+                  <Form.Item label="Remarks" name="remarks">
+                    <Input placeholder="Enter Remarks" onKeyDown={handleEnterKey} />
+                  </Form.Item>
+                </Col>
+
+                <Col span={8}>
+                  <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginTop: 30 }}>
+                    <Form.Item
+                      name="active"
+                      valuePropName="checked"
+                      getValueFromEvent={(e) => (e.target.checked ? 'Y' : 'N')}
+                      getValueProps={(value) => ({ checked: value === 'Y' })}
+                      style={{ marginBottom: 0 }}
+                    >
+                      <Checkbox>Active</Checkbox>
+                    </Form.Item>
+                  </div>
+                </Col>
+              </Row>
+
+              {/* SIGNATURE (DRAW ONLY) */}
+              <Form.Item name="signature" label="Signature">
+                {/* Preview */}
+                {fileUrl && !editingSignature && (
+                  <div className="signature-preview">
+                    <img src={fileUrl} alt="signature" className="signature-image" />
+
+                    <div style={{ marginTop: 10 }}>
+                      <Button
+                        type="primary"
+                        onClick={() => {
+                          setEditingSignature(true);
+                          setPreviousSignature(fileUrl);
+                          setFileUrl(null);
+                          form.setFieldValue('signature', null);
+                        }}
+                      >
+                        Redraw Signature
+                      </Button>
+                    </div>
+                  </div>
+                )}
+
+                {/* Drawing Canvas */}
+                {(editingSignature || !fileUrl) && (
+                  <SignatureCanvasComponent
+                    onSaveAndAddSignature={(sig) => {
+                      setFileUrl(sig);
+                      setEditingSignature(false);
+                      setPreviousSignature(null);
+                      form.setFieldValue('signature', sig);
+                    }}
+                    onClear={() => {
+                      if (previousSignature) {
+                        setFileUrl(previousSignature);
+                      } else {
+                        setFileUrl(null);
+                        form.setFieldValue('signature', null);
+                      }
+                      setEditingSignature(false);
+                    }}
+                  />
+                )}
+              </Form.Item>
+            </Tabs.TabPane>
+
+            {/* ADDRESS */}
+            <Tabs.TabPane tab="ADDRESS" key="2">
+              <Row gutter={16}>
+                <Col span={8}>
+                  <Form.Item label="Address" name="address">
+                    <Input placeholder="Enter Address" onKeyDown={handleEnterKey} />
+                  </Form.Item>
+                </Col>
+
+                <Col span={8}>
+                  <Form.Item label="Places" name="places">
+                    <Input placeholder="Enter Place" onKeyDown={handleEnterKey} />
+                  </Form.Item>
+                </Col>
+
+                <Col span={8}>
+                  <Form.Item label="Pincode" name="pincode">
+                    <Input placeholder="Enter Pincode" onKeyDown={handleEnterKey} maxLength={7} />
+                  </Form.Item>
+                </Col>
+              </Row>
+
+              <Row gutter={16}>
+                <Col span={8}>
+                  <Form.Item label="Phone Number" name="phone_number">
+                    <Input placeholder="Enter Phone Number" onKeyDown={handleEnterKey} maxLength={10} />
+                  </Form.Item>
+                </Col>
+
+                <Col span={8}>
+                  <Form.Item label="Alternate Phone" name="alternate_phone">
+                    <Input placeholder="Enter Alternate Number" onKeyDown={handleEnterKey} maxLength={10} />
+                  </Form.Item>
+                </Col>
+
+                <Col span={8}>
+                  <Form.Item label="Email ID" name="email_id" rules={[{ type: 'email', message: 'Please enter a valid email address' }]}>
+                    <Input placeholder="Enter Email ID" onKeyDown={handleEnterKey} />
+                  </Form.Item>
+                </Col>
+              </Row>
+
+              <Row gutter={16}>
+                <Col span={8}>
+                  <Form.Item label="Fax" name="fax">
+                    <Input placeholder="Enter Fax Number" onKeyDown={handleEnterKey} maxLength={25} />
+                  </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}>
+              {doctorId ? 'Update' : 'Save'}
+            </Button>
+          </div>
+        </Form>
+      </Modal>
+    </>
+  );
+};
+
+export default DoctorAdd;