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

package/core/lib/pages/login/login.scss

@@ -5,17 +5,29 @@ body {
 .user-authentication-section {
   min-height: 90vh;
   display: flex;
-  margin: 0px 15%;
+  // margin: 0px 15%;
   justify-content: center;
+  padding: 0px 15%;
   // align-items: center;
 
+  @media (max-width: 1200px) {
+    margin: 0 5%;
+  }
+
+  @media (max-width: 768px) {
+    margin: 0 10px;
+    padding-top: 20px;
+    flex-direction: column;
+    align-items: center;
+  }
+
   .page-background {
-   position: absolute;
+    position: absolute;
     left: 0px;
     top: 0px;
-    height:40vh;
+    height: 40vh;
     width: 100%;
-    
+
     // background-image:url("./../../../assets/images/vector.png"); /* Set Image */ ;
     // background: url("./../../../assets/images/vector.png"),
     //             linear-gradient(to right, #D5F1FB, #24AEB8);
@@ -121,7 +133,7 @@ body {
     border: 1px solid #b7b7b7;
     text-align: center;
     border-radius: 2px;
-    margin: 16px 0px;
+    margin: 22px 0px;
     padding: 4px;
 
     img {
@@ -144,21 +156,22 @@ body {
     // box-shadow: 0 2px 4px rgba(104, 97, 97, 0.5);
     // display: flex;
     // align-items: center;
-    border-radius: 12px;
+    border-radius: 16px;
     background-color: white;
     overflow: hidden;
     border: 1px solid #e8e8e8;
 
-    width: 40%;
+    width: 42%;
 
     @media only screen and (max-width: 768px) {
-      width: 95%;
+      width: 100%;
+      padding: 0 16px;
 
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      text-align: center;
-      align-items: center;
+      // display: flex;
+      // flex-direction: column;
+      // justify-content: center;
+      // text-align: center;
+      // align-items: center;
     }
 
     .login-form-container {
@@ -166,20 +179,24 @@ body {
       flex-basis: 50%;
       // border: none !important;
       // box-shadow: none !important;
-      padding: 20px 30px;
+      // padding: 20px 30px;
+      padding: 20px;
+      padding-top: 2px;
 
       @media only screen and (max-width: 768px) {
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        text-align: center;
-        align-items: center;
+        padding: 16px;
+        // display: flex;
+        // flex-direction: column;
+        // justify-content: center;
+        // text-align: center;
+        // align-items: center;
       }
 
       .branch-switcher {
         .branches {
           .ant-select {
-            min-width: 150px;
+            min-width: auto !important;
+            width: 100%;
           }
         }
       }
@@ -217,7 +234,7 @@ body {
   .ant-form {
     // height: 100%;
     .ant-form-item {
-      margin: 30px 0px;
+      margin: 20px 0px;
       .ant-form-item-label {
         margin: 0 0 8px 0;
         line-height: 0;
@@ -249,9 +266,13 @@ body {
     width: 100%;
   }
 }
+.otp-container {
+  display: flex;
+}
 
 .otp-input-container p {
-  margin: 20px 0 -10px 0;
+  margin: 12px 0 0 0;
+  font-size: 12px;
 }
 
 .otp-input-container .otp-title {
@@ -259,13 +280,17 @@ body {
     text-align: left;
   }
 }
+.ant-divider-horizontal {
+  margin-bottom: 16px;
+  margin-top: 2px;
+}
 
 .otp-input-container .resend-otp-link {
   display: flex;
   justify-content: center;
   align-items: center;
   text-align: center;
-  margin-top: -10px;
+  // margin-top: -10px;
   color: #0c66e4;
   margin-bottom: 10px;
 }
@@ -292,7 +317,58 @@ body {
 .otp-input-container {
   display: flex;
   flex-direction: column;
-  gap: 20px;
+  gap: 2px;
+}
+.otp-actions {
+  background-color: #f5f5f5; // light gray
+  padding: 12px 16px;
+  display: flex;
+  justify-content: space-between;
+  gap: 6px;
+  // margin-top: 6px;
+}
+.resend-action {
+  margin-bottom: 8px;
+  display: flex;
+  gap: 6px;
+}
+.otp-method-section {
+  // margin-top: 10px;
+
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+
+  .otp-method-title {
+    font-size: 16px;
+    font-weight: 600;
+    margin-bottom: 8px;
+  }
+
+  .otp-method-group {
+    display: flex;
+    align-items: center;
+    margin-bottom: 10px;
+    gap: 30px;
+    font-size: 12px;
+  }
+
+  .ant-radio-wrapper {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+
+    svg {
+      font-size: 18px;
+      opacity: 0.8;
+    }
+  }
+
+  .otp-mode-error {
+    margin: 5px;
+    font-size: 13px;
+    color: red;
+  }
 }
 
 .otp-mode-text {
@@ -308,25 +384,25 @@ input {
 input:focus {
   border-color: #fff !important;
 }
-.otp-container{
+.otp-container {
   display: flex;
-  flex-direction:row;
+  flex-direction: column;
   gap: 7px;
 }
 
-.otp-container input[type="text"]:focus {
+.otp-container input[type='text']:focus {
   border-color: #fff !important;
 }
 
 .full-page {
   height: 100vh;
-  background-color: "cover"; // Ensures full coverage
+  background-color: 'cover'; // Ensures full coverage
   background-position: 'bottom center'; // Aligns image at the bottom
-  background-size: '100% auto';// image spans full width
-  background-repeat:no-repeat ;
-  
+  background-size: '100% auto'; // image spans full width
+  background-repeat: no-repeat;
+
   min-height: 100vh; // Ensures full height
-  width: 100%, // Covers the full width
+  width: 100%; // Covers the full width
 }
 .ant-input {
   background-color: transparent !important;
@@ -344,3 +420,35 @@ input:focus {
 //   background-color: var(--custom-input-bg-color);
 //   color: var(--custom-input-color);
 // }
+/* Mobile: stack OTP radio options in separate rows */
+/* Mobile phones (iPhone) – stack in one column */
+@media only screen and (max-width: 600px) {
+  .otp-method-group {
+    flex-direction: column !important;
+    align-items: flex-start !important;
+    gap: 12px !important;
+  }
+}
+
+/* iPad Mini + Tablets (600px to 1024px) – show in row */
+@media only screen and (min-width: 601px) and (max-width: 1024px) {
+  .otp-method-group {
+    flex-direction: row !important;
+    align-items: center !important;
+    justify-content: space-between !important;
+    gap: 20px !important;
+    width: 100%;
+  }
+
+  .otp-method-group .ant-radio-wrapper {
+    flex: 1; /* evenly spaced columns */
+  }
+}
+
+/* Desktop – normal layout */
+@media only screen and (min-width: 1025px) {
+  .otp-method-group {
+    flex-direction: row;
+    gap: 30px;
+  }
+}

package/core/models/dashboard/dashboard.js

@@ -81,6 +81,20 @@ class Dashboard extends Base {
     ];
   }
 
+  loadProcess(id) {
+    return ApiUtils.get({
+      url: `process/${id}`,
+    });
+  }
+  
+  processLog(formBody) {
+    return ApiUtils.post({
+      url: `process/process-log`,
+      formBody,
+    });
+  }
+
+
   /**
    * Function to load dashboards based on user information
    * @param {*} user

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

@@ -0,0 +1,403 @@
+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 'soxo-bootstrap-core';
+
+import { UsersAPI } from '../../..';
+import SignatureCanvasComponent from '../../../../lib/components/consent/signature-pad';
+
+const DoctorAdd = ({ visible, onCancel, attributes, doctorId, doctorData, onSuccess }) => {
+  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: '',
+  });
+
+  /** 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 (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 ? Number(values.dbkey) : null,
+      code: values.code || '',
+      name: values.name || '',
+      regno1: values.regno1 || '',
+      regno2: '',
+      qualification: values.qualification || '',
+      desg: values.designation || '',
+      add1: values.address || '',
+      add2: '',
+      place: values.places || '',
+      phone: values.phone_number || '',
+      fax: values.fax || '',
+      mobile: values.alternate_phone || '',
+      email: values.email_id || '',
+      remarks: values.remarks || '',
+      deptptr: '',
+      regfee: values.regfee ? Number(values.regfee) : null,
+      consfee: values.consfee ? Number(values.consfee) : null,
+      gpfee: values.gpfee ? Number(values.gpfee) : null,
+      consdays: values.consdays ? Number(values.consdays) : null,
+      slno: values.slno ? Number(values.slno) : null,
+      active: values.active === 'Y' ? 'Y' : 'N',
+      timeperpatient: values.timeperpatient ? Number(values.timeperpatient) : null,
+      username: '',
+      type: values.type || '',
+      signature: fileUrl || '',
+      zip: values.pincode || '',
+    };
+
+    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 }]}>
+                <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={doctorType || []} 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">
+                    <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;