@sasindi/addresults 1.0.0

package/src/add-results-form.component.tsx

@@ -0,0 +1,831 @@
+import React, { useState, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import styles from './add-results.scss';
+
+const navigateTo = (url: string) => {
+  window.history.pushState({}, '', url);
+  window.dispatchEvent(new PopStateEvent('popstate'));
+};
+
+const AddResultsForm: React.FC = () => {
+  const { t } = useTranslation();
+
+  // Route Parameters from localStorage
+  const phn = localStorage.getItem('phnNo') || '';
+  const section = localStorage.getItem('section') || '';
+  const barcode = localStorage.getItem('barcode') || '';
+  const serial = localStorage.getItem('id') || '';
+
+  // State Variables
+  const [patientName, setPatientName] = useState<string>('');
+  const [patientGender, setPatientGender] = useState<string>('');
+  const [patientAge, setPatientAge] = useState<string>('');
+  const [testName, setTestName] = useState<string>('');
+  const [testRemark, setTestRemark] = useState<string>('');
+  const [testDate, setTestDate] = useState<string>('');
+  const [testTime, setTestTime] = useState<string>('');
+  
+  // Locations context
+  const [locationUuid, setLocationUuid] = useState<string>('');
+  const [instituteName, setInstituteName] = useState<string>('');
+  const [currentUserUuid, setCurrentUserUuid] = useState<string>('');
+
+  // Parameters list
+  const [parameters, setParameters] = useState<any[]>([]);
+  const [loading, setLoading] = useState<boolean>(true);
+  const [showSpinner, setShowSpinner] = useState<boolean>(false);
+  const [spinnerText, setSpinnerText] = useState<string>('Processing report...');
+  
+  // Form submission and report flags
+  const [sendToApproval, setSendToApproval] = useState<boolean>(false);
+  const [flagGenerate, setFlagGenerate] = useState<boolean>(false);
+  const [uploadedFile, setUploadedFile] = useState<File | null>(null);
+
+  // Toast status
+  const [toast, setToast] = useState<{ type: 'success' | 'error'; text: string } | null>(null);
+
+  // Show toast utility
+  const showToast = (type: 'success' | 'error', text: string) => {
+    setToast({ type, text });
+    setTimeout(() => setToast(null), 3000);
+  };
+
+  // Helper date formatting
+  const getCurrentDateFormatted = () => {
+    const now = new Date();
+    const year = now.getFullYear();
+    const month = String(now.getMonth() + 1).padStart(2, '0');
+    const day = String(now.getDate()).padStart(2, '0');
+    return `${year}-${month}-${day}`;
+  };
+
+  const getCurrentTimeFormatted = () => {
+    const now = new Date();
+    const hours = String(now.getHours()).padStart(2, '0');
+    const minutes = String(now.getMinutes()).padStart(2, '0');
+    return `${hours}:${minutes}`;
+  };
+
+  // Age calculation helper
+  const getAge = (dateString: string) => {
+    if (!dateString) return '';
+    const today = new Date();
+    const birthDate = new Date(dateString);
+    let age = today.getFullYear() - birthDate.getFullYear();
+    const m = today.getMonth() - birthDate.getMonth();
+    if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {
+      age--;
+    }
+    return String(age);
+  };
+
+  // Map gender characters to full words
+  const formatGender = (gender: string) => {
+    if (!gender) return '';
+    const upper = gender.trim().toUpperCase();
+    if (upper === 'M' || upper === 'MALE') return 'Male';
+    if (upper === 'F' || upper === 'FEMALE') return 'Female';
+    return gender;
+  };
+
+  // 1. Initial Load: Context and Demographics
+  useEffect(() => {
+    async function loadData() {
+      try {
+        setLoading(true);
+
+        // a. Load Session/User Info
+        const sessionRes = await fetch('/openmrs/ws/rest/v1/session');
+        if (!sessionRes.ok) throw new Error('Failed to load session');
+        const sessionData = await sessionRes.json();
+        const personUuid = sessionData.user.person.uuid;
+        setCurrentUserUuid(sessionData.user.uuid);
+
+        // b. Load Person Attributes for Location
+        const personRes = await fetch(`/openmrs/ws/rest/v1/person/${personUuid}`);
+        if (!personRes.ok) throw new Error('Failed to load person');
+        const personData = await personRes.json();
+
+        let initialLocUuid = '';
+        if (personData.attributes) {
+          personData.attributes.forEach((attr: any) => {
+            if (attr.display) {
+              const [key, value] = attr.display.split('=');
+              if (key && value && (key.trim() === 'Institute Id' || key.trim() === 'Institute')) {
+                initialLocUuid = value.trim();
+              }
+            }
+          });
+        }
+
+        if (!initialLocUuid && sessionData.sessionLocation && sessionData.sessionLocation.uuid) {
+          initialLocUuid = sessionData.sessionLocation.uuid;
+        }
+
+        setLocationUuid(initialLocUuid);
+
+        // c. Load Location Display Name
+        if (initialLocUuid) {
+          const locRes = await fetch(`/openmrs/ws/rest/v1/location/${initialLocUuid}`);
+          if (locRes.ok) {
+            const locData = await locRes.json();
+            setInstituteName(locData.display || '');
+          }
+        }
+
+        // d. Load Patient Demographics from PHN
+        const phnRes = await fetch(`/openmrs/ws/rest/v1/phn/${phn}`);
+        if (!phnRes.ok) throw new Error('PHN not found!');
+        const phnData = await phnRes.json();
+
+        setPatientName(phnData.person_id.person.display || '');
+        setPatientGender(formatGender(phnData.person_id.person.gender || ''));
+        if (phnData.person_id.person.birthdate) {
+          setPatientAge(getAge(phnData.person_id.person.birthdate));
+        }
+
+        // e. Load Test Details from Barcode
+        const testRes = await fetch(`/openmrs/rest/v1/addresult/loadview/${barcode}`);
+        if (!testRes.ok) throw new Error('Barcode details not found!');
+        const testDataArray = await testRes.json();
+        if (testDataArray && testDataArray.length > 0) {
+          const mainTestData = testDataArray[0];
+          setTestName(mainTestData[2] || '');
+          setTestRemark(mainTestData[9] || '');
+        }
+
+        // Set default date/time
+        setTestDate(getCurrentDateFormatted());
+        setTestTime(getCurrentTimeFormatted());
+
+      } catch (err: any) {
+        console.error(err);
+        showToast('error', err.message || 'Error initializing page data');
+      } finally {
+        setLoading(false);
+      }
+    }
+
+    loadData();
+  }, [phn, barcode]);
+
+  // 2. Fetch Parameters once Test Name and Location are set
+  useEffect(() => {
+    if (!testName || !locationUuid) return;
+
+    async function loadParamsAndValues() {
+      try {
+        // a. Load raw parameters for this test
+        const paramsRes = await fetch(`/openmrs/rest/v1/addresult/loadparameter/${testName}/${locationUuid}`);
+        if (!paramsRes.ok) throw new Error('Failed to load parameters');
+        const paramsData = await paramsRes.json();
+
+        // b. Load pre-saved parameter values depending on the patient's section
+        let valuesRes;
+        if (section === 'OPD') {
+          valuesRes = await fetch(`/openmrs/rest/v1/addresult/getvalueopd/${serial}/${testName}`);
+        } else if (section === 'Clinic') {
+          valuesRes = await fetch(`/openmrs/rest/v1/addresult/getvalueclinic/${serial}/${testName}`);
+        } else if (section === 'Ward') {
+          valuesRes = await fetch(`/openmrs/rest/v1/addresult/getvalueward/${serial}/${testName}`);
+        }
+
+        let savedValues: any[] = [];
+        if (valuesRes && valuesRes.ok) {
+          savedValues = await valuesRes.json();
+        }
+
+        // c. Map parameters and bind pre-saved values
+        const mappedParams = (paramsData || []).map((p: any) => {
+          const paramId = p[3]; // Parameter ID/Serial
+          const paramName = p[1]; // Parameter Name
+          const paramOptionsStr = p[2]; // Parameters options JSON string (options dropdown list)
+
+          let options: string[] = [];
+          try {
+            if (paramOptionsStr && typeof paramOptionsStr === 'string') {
+              options = JSON.parse(paramOptionsStr);
+            }
+          } catch (e) {
+            options = [];
+          }
+
+          // Match saved value row
+          const matchedSaved = savedValues.find((sv: any) => sv[2] === paramId);
+          const initialValue = matchedSaved && matchedSaved[0] !== null ? matchedSaved[0] : (options.length > 0 ? options[0] : '');
+          const initialUnits = matchedSaved && matchedSaved[5] ? matchedSaved[5] : '';
+          const initialFlag = matchedSaved && matchedSaved[6] ? matchedSaved[6] : '';
+          const initialRanges = matchedSaved && matchedSaved[7] ? matchedSaved[7] : '';
+          const savedId = matchedSaved ? matchedSaved[3] : 0; // Existing record primary key (ID)
+
+          return {
+            id: paramId,
+            name: paramName,
+            options,
+            value: initialValue,
+            units: initialUnits,
+            flag: initialFlag,
+            ranges: initialRanges,
+            savedId // tracks update vs insert
+          };
+        });
+
+        setParameters(mappedParams);
+
+      } catch (err: any) {
+        console.error(err);
+        showToast('error', 'Error loading test parameters');
+      }
+    }
+
+    loadParamsAndValues();
+  }, [testName, locationUuid, section, serial]);
+
+  // Concept Fetchers for external JSReport & DocToPdf conversion URLs
+  const getConceptReferenceTerm = async (codeName: string): Promise<string> => {
+    const res = await fetch(`/openmrs/ws/rest/v1/conceptreferenceterm?codeOrName=${codeName}`);
+    if (!res.ok) throw new Error(`Reference concept ${codeName} not found`);
+    const data = await res.json();
+    if (data.results && data.results.length > 0) {
+      const str = data.results[0].display;
+      const start = str.lastIndexOf("(") + 1;
+      const end = str.lastIndexOf(")");
+      return str.substring(start, end);
+    }
+    return '';
+  };
+
+  // Parameter input changes
+  const handleParameterChange = (paramId: number, field: string, value: string) => {
+    setParameters(prev =>
+      prev.map(p => (p.id === paramId ? { ...p, [field]: value } : p))
+    );
+  };
+
+  // Generate Report & Upload Flow
+  const handleGenerateReport = async () => {
+    // Validate parameter values are not empty
+    const hasEmpty = parameters.some(p => String(p.value).trim() === '');
+    if (hasEmpty) {
+      showToast('error', 'Please fill all parameter values before generating report.');
+      return;
+    }
+
+    try {
+      setShowSpinner(true);
+      setSpinnerText('Uploading file template...');
+
+      let finalTemplateFileName = `${testName}.docx`;
+
+      // a. Upload a new template DOCX if provided
+      if (uploadedFile) {
+        finalTemplateFileName = uploadedFile.name;
+        const uploadFormData = new FormData();
+        uploadFormData.append('file', uploadedFile);
+
+        const uploadRes = await fetch('/openmrs/rest/v1/addresult/fileupload', {
+          method: 'POST',
+          body: uploadFormData
+        });
+        if (!uploadRes.ok) throw new Error('File template upload failed');
+        const uploadResult = await uploadRes.json();
+
+        // Save doc template record
+        const rawTemplateRecord = {
+          templateName: uploadedFile.name,
+          content: '',
+          location: locationUuid,
+          filename: uploadResult.data,
+          createdBy: currentUserUuid
+        };
+
+        const saveTemplateRes = await fetch('/openmrs/rest/v1/addresult/savedoctemplatedata', {
+          method: 'POST',
+          body: JSON.stringify(rawTemplateRecord),
+          headers: { 'Content-Type': 'application/json' }
+        });
+        if (!saveTemplateRes.ok) throw new Error('Failed to register template record on backend');
+      }
+
+      setSpinnerText('Reading report template...');
+      // b. Fetch report template as Base64 (from server OWA directory)
+      const fileUrl = `${window.location.origin}/openmrs/owa/LabReportTemplateFileUploaded/${finalTemplateFileName}`;
+      const templateRes = await fetch(fileUrl);
+      if (!templateRes.ok) throw new Error('Failed to locate template DOCX file on server');
+      const templateBlob = await templateRes.blob();
+
+      // Convert to Base64
+      const base64String: string = await new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onloadend = () => {
+          const res = reader.result as string;
+          resolve(res.replace(/^data:.+;base64,/, ""));
+        };
+        reader.onerror = reject;
+        reader.readAsDataURL(templateBlob);
+      });
+
+      // c. Resolve JSReport Server URL
+      setSpinnerText('Connecting to JSReport server...');
+      const jsReportUrl = await getConceptReferenceTerm('JSReportURLManual');
+      if (!jsReportUrl) throw new Error('JSReportURLManual concept is not defined in OpenMRS');
+
+      // Create JSReport folder
+      const folderRes = await fetch(`${jsReportUrl}odata/folders`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ name: `${testName} folder` })
+      });
+      if (!folderRes.ok) throw new Error('Failed to create folder on JSReport server');
+      const folderData = await folderRes.json();
+      const folderShortId = folderData.shortid;
+      const folderId = folderData._id;
+
+      // Upload template asset to JSReport folder
+      const assetRes = await fetch(`${jsReportUrl}odata/assets`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          content: base64String,
+          folder: { shortid: folderShortId },
+          name: testName
+        })
+      });
+      if (!assetRes.ok) throw new Error('Failed to upload asset to JSReport');
+      const assetData = await assetRes.json();
+      const assetShortId = assetData.shortid;
+
+      // Construct payload data
+      const paramMap: { [key: string]: any } = {};
+      parameters.forEach(p => {
+        paramMap[p.name] = {
+          value: p.value,
+          units: p.units,
+          ranges: p.ranges,
+          flag: p.flag
+        };
+      });
+
+      const reportJsonData = {
+        hospital: instituteName,
+        patientname: patientName,
+        phn: phn,
+        docname: '', // loaded docname
+        testName: testName,
+        age: patientAge,
+        collectdate: `${testDate} ${testTime}`,
+        printdate: `${getCurrentDateFormatted()} ${getCurrentTimeFormatted()}`,
+        parameters: paramMap
+      };
+
+      // Create JSReport Data element
+      const jsreportDataRes = await fetch(`${jsReportUrl}odata/data`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          dataJson: JSON.stringify(reportJsonData),
+          folder: { shortid: folderShortId },
+          name: `${testName} data`
+        })
+      });
+      if (!jsreportDataRes.ok) throw new Error('Failed to register report data on JSReport');
+      const jsreportDataResult = await jsreportDataRes.json();
+      const dataShortId = jsreportDataResult.shortid;
+
+      // Create JSReport Template element
+      const jsreportTemplateRes = await fetch(`${jsReportUrl}odata/templates`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          data: { shortid: dataShortId },
+          docx: { templateAssetShortid: assetShortId },
+          engine: 'handlebars',
+          folder: { shortid: folderShortId },
+          name: `${testName} template`,
+          recipe: 'docx'
+        })
+      });
+      if (!jsreportTemplateRes.ok) throw new Error('Failed to construct template configuration on JSReport');
+      const jsreportTemplateResult = await jsreportTemplateRes.json();
+      const templateShortId = jsreportTemplateResult.shortid;
+
+      // Render DOCX report from template
+      setSpinnerText('Rendering report...');
+      const renderRes = await fetch(`${jsReportUrl}api/report`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          template: { shortid: templateShortId },
+          recipe: 'docx'
+        })
+      });
+      if (!renderRes.ok) throw new Error('Failed to compile report document on JSReport');
+      const renderedDocxBlob = await renderRes.blob();
+
+      // d. Convert Rendered DOCX to PDF using DocToPdfConverter
+      setSpinnerText('Converting report to PDF format...');
+      const pdfConverterUrl = await getConceptReferenceTerm('DocToPdfConverterURLManual');
+      if (!pdfConverterUrl) throw new Error('DocToPdfConverterURLManual concept is not defined in OpenMRS');
+
+      const conversionFormData = new FormData();
+      conversionFormData.append('file', renderedDocxBlob, 'document.docx');
+      const pdfRes = await fetch(`${pdfConverterUrl}convert-to-pdf`, {
+        method: 'POST',
+        body: conversionFormData
+      });
+      if (!pdfRes.ok) throw new Error('Failed to convert compiled report to PDF');
+      const pdfBlob = await pdfRes.blob();
+
+      // Open PDF in a new window
+      const pdfUrl = window.URL.createObjectURL(pdfBlob);
+      window.open(pdfUrl);
+
+      // e. Fetch laboratory details to retrieve encounter UUID
+      setSpinnerText('Saving document attachment...');
+      let labEncounterUuid = '';
+      let labDetailsRes;
+      if (section === 'OPD') {
+        labDetailsRes = await fetch(`/openmrs/rest/v1/addresult/labdetailsopd/${serial}`);
+      } else if (section === 'Clinic') {
+        labDetailsRes = await fetch(`/openmrs/rest/v1/addresult/labdetailsclinic/${serial}`);
+      } else if (section === 'Ward') {
+        labDetailsRes = await fetch(`/openmrs/rest/v1/addresult/labdetailsward/${serial}`);
+      }
+
+      if (labDetailsRes && labDetailsRes.ok) {
+        const labDetails = await labDetailsRes.json();
+        labEncounterUuid = labDetails.encounteruuid || '';
+      }
+
+      // Upload PDF attachment to OpenMRS OWA filesystem
+      const docName = `${phn}@@@${testName}@@@${labEncounterUuid}`;
+      const uploadPdfFormData = new FormData();
+      uploadPdfFormData.append('file', pdfBlob, `${docName}.pdf`);
+
+      const serverUploadRes = await fetch('/openmrs/rest/v1/addresult/upload', {
+        method: 'POST',
+        body: uploadPdfFormData
+      });
+      if (!serverUploadRes.ok) throw new Error('Failed to upload PDF attachment to OpenMRS OWA');
+      const serverUploadResult = await serverUploadRes.json();
+
+      // Save report document record
+      const rawDocRecord = {
+        labreportingid: section === 'OPD' ? serial : null,
+        labreportingclinicid: section === 'Clinic' ? serial : null,
+        labreportingwardid: section === 'Ward' ? serial : null,
+        reportname: `${docName}.pdf`,
+        file: serverUploadResult.data,
+        status: 'Approved',
+        cby: currentUserUuid
+      };
+
+      let saveDocUrl = '/openmrs/rest/v1/addresult/savedocument';
+      if (section === 'Clinic') saveDocUrl = '/openmrs/rest/v1/addresult/savedocumentclinic';
+      if (section === 'Ward') saveDocUrl = '/openmrs/rest/v1/addresult/savedocumentward';
+
+      const saveDocRecordRes = await fetch(saveDocUrl, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(rawDocRecord)
+      });
+      if (!saveDocRecordRes.ok) throw new Error('Failed to save document meta record to database');
+
+      // Cleanup JSReport folder
+      setSpinnerText('Cleaning up...');
+      await fetch(`${jsReportUrl}odata/folders('${folderId}')`, {
+        method: 'DELETE'
+      });
+
+      setFlagGenerate(true);
+      showToast('success', 'Report generated and converted successfully!');
+
+    } catch (err: any) {
+      console.error(err);
+      showToast('error', err.message || 'Error occurred during report generation');
+    } finally {
+      setShowSpinner(false);
+    }
+  };
+
+  // Save Event handler
+  const handleSave = async () => {
+    if (!flagGenerate) {
+      showToast('error', 'Please generate Report first before saving.');
+      return;
+    }
+
+    if (!testDate || !testTime) {
+      showToast('error', 'Please fill all the date and time fields.');
+      return;
+    }
+
+    try {
+      setShowSpinner(true);
+      setSpinnerText('Saving parameter values...');
+
+      // 1. Save parameters list
+      for (const p of parameters) {
+        const paramRecord: any = {
+          id: p.savedId, // 0 for insert, >0 for update
+          parameterid: p.id,
+          value: p.value,
+          cby: currentUserUuid,
+          units: p.units,
+          flag: p.flag,
+          ranges: p.ranges
+        };
+
+        let saveParamUrl = '/openmrs/rest/v1/addresult/saveparametervalue';
+        if (section === 'OPD') {
+          paramRecord.labreportingid = serial;
+        } else if (section === 'Clinic') {
+          paramRecord.labreportingclinicid = serial;
+          saveParamUrl = '/openmrs/rest/v1/addresult/saveparametervalueclinic';
+        } else if (section === 'Ward') {
+          paramRecord.labreportingwardid = serial;
+          saveParamUrl = '/openmrs/rest/v1/addresult/saveparametervalueward';
+        }
+
+        const saveParamRes = await fetch(saveParamUrl, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(paramRecord)
+        });
+        if (!saveParamRes.ok) throw new Error(`Failed to save parameter ${p.name}`);
+      }
+
+      // 2. Save Overall Lab Test status
+      setSpinnerText('Updating laboratory status...');
+      const finalStatus = sendToApproval ? 'Send Approved' : 'Approved';
+      const statusPayload = {
+        id: serial,
+        status: finalStatus
+      };
+
+      let saveStatusUrl = '/openmrs/ws/rest/v1/samplecollection/labtestsstatus';
+      if (section === 'Clinic') {
+        saveStatusUrl = '/openmrs/ws/rest/v1/samplecollection/labtestsstatusclinic';
+      } else if (section === 'Ward') {
+        saveStatusUrl = '/openmrs/ws/rest/v1/samplecollection/labtestsstatusward';
+      }
+
+      const saveStatusRes = await fetch(saveStatusUrl, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(statusPayload)
+      });
+      if (!saveStatusRes.ok) throw new Error('Failed to update lab test status');
+
+      showToast('success', 'Data Saved Successfully!');
+      setTimeout(() => {
+        navigateTo(window.getOpenmrsSpaBase() + 'addresults');
+      }, 1500);
+
+    } catch (err: any) {
+      console.error(err);
+      showToast('error', err.message || 'Error saving results details');
+    } finally {
+      setShowSpinner(false);
+    }
+  };
+
+  return (
+    <div className={styles.bodyWrapper}>
+      {toast && (
+        <div className={`${styles.toast} ${toast.type === 'success' ? styles.toastSuccess : styles.toastError}`}>
+          {toast.text}
+        </div>
+      )}
+
+      {showSpinner && (
+        <div className={styles.overlay}>
+          <div className={styles.spinner}></div>
+          <p>{spinnerText}</p>
+        </div>
+      )}
+
+      <div className={styles.navigationCard}>
+        <div className={styles.navRow}>
+          <h2 className={styles.navTitle}>Enter Test Results</h2>
+          <div className={styles.instituteSelector}>
+            <span>Hospital:</span>
+            <span style={{ fontWeight: 600, color: 'var(--primary-color)' }}>{instituteName}</span>
+          </div>
+        </div>
+      </div>
+
+      {loading ? (
+        <div className={styles.card}>
+          <div className={styles.textCenter} style={{ padding: '2rem' }}>
+            <div className={styles.spinner} style={{ margin: '0 auto' }}></div>
+            <p style={{ marginTop: '1rem', color: 'var(--text-light)' }}>Loading profile data...</p>
+          </div>
+        </div>
+      ) : (
+        <>
+          <div className={styles.card}>
+            <div className={styles.row}>
+              <div className={`${styles.col} ${styles.my1}`}>
+                <label>Full Name</label>
+                <input type="text" className={styles.formControl} value={patientName} readOnly />
+              </div>
+              <div className={`${styles.col} ${styles.my1}`}>
+                <label>Section</label>
+                <input type="text" className={styles.formControl} value={section} readOnly />
+              </div>
+              <div className={`${styles.col} ${styles.my1}`}>
+                <label>PHN No</label>
+                <input type="text" className={styles.formControl} value={phn} readOnly />
+              </div>
+              <div className={`${styles.col} ${styles.my1}`}>
+                <label>Age</label>
+                <input type="text" className={styles.formControl} value={patientAge} readOnly />
+              </div>
+              <div className={`${styles.col} ${styles.my1}`}>
+                <label>Gender</label>
+                <input type="text" className={styles.formControl} value={patientGender} readOnly />
+              </div>
+            </div>
+
+            <hr style={{ margin: '1.5rem 0', borderTop: '1px solid var(--border-color)' }} />
+
+            <div className={styles.row}>
+              <div className={`${styles.col} ${styles.my1}`} style={{ flexGrow: 2 }}>
+                <label>Test Name</label>
+                <input type="text" className={styles.formControl} value={testName} readOnly />
+              </div>
+              <div className={`${styles.col} ${styles.my1}`} style={{ flexGrow: 3 }}>
+                <label>Remark</label>
+                <textarea className={styles.formControl} rows={2} value={testRemark} readOnly />
+              </div>
+              <div className={`${styles.col} ${styles.my1}`}>
+                <label>Date</label>
+                <input
+                  type="date"
+                  className={styles.formControl}
+                  value={testDate}
+                  onChange={(e) => setTestDate(e.target.value)}
+                />
+              </div>
+              <div className={`${styles.col} ${styles.my1}`}>
+                <label>Time</label>
+                <input
+                  type="time"
+                  className={styles.formControl}
+                  value={testTime}
+                  onChange={(e) => setTestTime(e.target.value)}
+                />
+              </div>
+            </div>
+          </div>
+
+          <div className={styles.card}>
+            <h3 style={{ fontSize: '1.1rem', fontWeight: 600, marginBottom: '1rem', color: 'var(--primary-color)' }}>
+              Test Parameters
+            </h3>
+            <div className={styles.showHideTableParameter}>
+              <table className={`${styles.table} ${styles.tableBordered} ${styles.tableStriped}`}>
+                <thead>
+                  <tr>
+                    <th>No</th>
+                    <th>Parameter Name</th>
+                    <th style={{ width: '220px' }}>Value</th>
+                    <th>Units</th>
+                    <th>Flag</th>
+                    <th>Ranges</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {parameters.length > 0 ? (
+                    parameters.map((p, idx) => (
+                      <tr key={p.id}>
+                        <td>{idx + 1}</td>
+                        <td style={{ fontWeight: 500 }}>{p.name}</td>
+                        <td>
+                          {p.options.length > 0 ? (
+                            <select
+                              className={styles.formControl}
+                              value={p.value}
+                              onChange={(e) => handleParameterChange(p.id, 'value', e.target.value)}
+                              style={{ width: '100%' }}
+                            >
+                              {p.options.map((opt: string) => (
+                                <option key={opt} value={opt}>
+                                  {opt}
+                                </option>
+                              ))}
+                            </select>
+                          ) : (
+                            <input
+                              type="text"
+                              className={styles.formControl}
+                              value={p.value}
+                              onChange={(e) => handleParameterChange(p.id, 'value', e.target.value)}
+                              style={{ width: '100%' }}
+                            />
+                          )}
+                        </td>
+                        <td>
+                          <input
+                            type="text"
+                            className={styles.formControl}
+                            value={p.units}
+                            onChange={(e) => handleParameterChange(p.id, 'units', e.target.value)}
+                          />
+                        </td>
+                        <td>
+                          <input
+                            type="text"
+                            className={styles.formControl}
+                            value={p.flag}
+                            onChange={(e) => handleParameterChange(p.id, 'flag', e.target.value)}
+                          />
+                        </td>
+                        <td>
+                          <input
+                            type="text"
+                            className={styles.formControl}
+                            value={p.ranges}
+                            onChange={(e) => handleParameterChange(p.id, 'ranges', e.target.value)}
+                          />
+                        </td>
+                      </tr>
+                    ))
+                  ) : (
+                    <tr>
+                      <td colSpan={6} className={styles.textCenter} style={{ color: 'var(--text-light)' }}>
+                        No parameters defined for this test.
+                      </td>
+                    </tr>
+                  )}
+                </tbody>
+              </table>
+            </div>
+
+            <div className={styles.row} style={{ marginTop: '2rem', alignItems: 'center' }}>
+              <div className={`${styles.col} ${styles.my1}`} style={{ flexGrow: 2 }}>
+                <div className={styles.checkboxContainer} onClick={() => setSendToApproval(prev => !prev)}>
+                  <input
+                    type="checkbox"
+                    checked={sendToApproval}
+                    onChange={() => {}} // handled by click container
+                  />
+                  <span>Send to Approval</span>
+                </div>
+              </div>
+              <div className={`${styles.col} ${styles.my1}`} style={{ flexGrow: 3, alignItems: 'flex-end' }}>
+                <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
+                  <label htmlFor="upload-doc-input" className={`${styles.btn} ${styles.btnSecondary}`} style={{ margin: 0 }}>
+                    {uploadedFile ? `Template: ${uploadedFile.name}` : 'Upload Template (.docx)'}
+                  </label>
+                  <input
+                    id="upload-doc-input"
+                    type="file"
+                    accept=".docx"
+                    style={{ display: 'none' }}
+                    onChange={(e) => {
+                      if (e.target.files && e.target.files.length > 0) {
+                        setUploadedFile(e.target.files[0]);
+                      }
+                    }}
+                  />
+                  <button
+                    type="button"
+                    className={`${styles.btn} ${styles.btnWarning}`}
+                    onClick={handleGenerateReport}
+                  >
+                    Generate Report
+                  </button>
+                </div>
+              </div>
+            </div>
+
+            <hr style={{ margin: '1.5rem 0', borderTop: '1px solid var(--border-color)' }} />
+
+            <div className={styles.textRight}>
+              <button
+                type="button"
+                className={`${styles.btn} ${styles.btnSuccess} ${styles.mx2}`}
+                onClick={handleSave}
+                style={{ width: '120px', height: '40px' }}
+              >
+                Save
+              </button>
+              <button
+                type="button"
+                className={`${styles.btn} ${styles.btnDanger}`}
+                onClick={() => navigateTo(window.getOpenmrsSpaBase() + 'addresults')}
+                style={{ width: '120px', height: '40px' }}
+              >
+                Back
+              </button>
+            </div>
+          </div>
+        </>
+      )}
+    </div>
+  );
+};
+
+export default AddResultsForm;