@sasindi/printlabtestresults 1.0.1

package/src/print-lab-test-results.component.tsx

@@ -0,0 +1,608 @@
+import React, { useState, useEffect, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import styles from './print-lab-test-results.scss';
+
+interface LabResultRow {
+  phnNo: string;
+  givenName: string;
+  testName: string;
+  gender: string;
+  age: string | number;
+  orderBy: string;
+  orderDateTime: string;
+  section: string;
+  barcodeNumber: string;
+  collectBy: string;
+  collectDate: string;
+  serial: number | string;
+  remark: string;
+}
+
+interface ParameterRow {
+  parameterName: string;
+  value: string;
+  units: string;
+  ranges: string;
+  flag?: string;
+}
+
+const PrintLabTestResults: React.FC = () => {
+  const { t } = useTranslation();
+
+  // Location & Session state
+  const [locationUuid, setLocationUuid] = useState<string>('');
+  const [instituteName, setInstituteName] = useState<string>('Loading location...');
+  const [data, setData] = useState<LabResultRow[]>([]);
+  const [loading, setLoading] = useState<boolean>(true);
+
+  // Filter & Search state
+  const [sectionFilter, setSectionFilter] = useState<string>('ALL');
+  const [searchQuery, setSearchQuery] = useState<string>('');
+
+  // Modal state
+  const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
+  const [selectedRow, setSelectedRow] = useState<LabResultRow | null>(null);
+  const [patientDetails, setPatientDetails] = useState<{
+    fullName: string;
+    section: string;
+    phn: string;
+    age: string;
+    gender: string;
+    testName: string;
+    remark: string;
+    date: string;
+    time: string;
+  } | null>(null);
+
+  const [parameters, setParameters] = useState<ParameterRow[]>([]);
+  const [loadingParams, setLoadingParams] = useState<boolean>(false);
+
+  // Pagination state
+  const [currentPage, setCurrentPage] = useState<number>(1);
+  const [pageSize, setPageSize] = useState<number>(25);
+
+  // Initialize Session and Location Context
+  useEffect(() => {
+    async function initSession() {
+      try {
+        const sessionRes = await fetch('/openmrs/ws/rest/v1/session');
+        if (!sessionRes.ok) throw new Error('Session request failed');
+        const sessionData = await sessionRes.json();
+        const personUuid = sessionData.user?.person?.uuid;
+
+        let locUuid = '';
+
+        if (personUuid) {
+          const personRes = await fetch(`/openmrs/ws/rest/v1/person/${personUuid}`);
+          if (personRes.ok) {
+            const personData = await personRes.json();
+            if (personData.attributes) {
+              personData.attributes.forEach((attr: any) => {
+                if (attr.display) {
+                  const [key, value] = attr.display.split('=');
+                  if (key && value) {
+                    const cleanKey = key.trim();
+                    if (cleanKey === 'Institute Id' || cleanKey === 'Institute') {
+                      locUuid = value.trim();
+                    }
+                  }
+                }
+              });
+            }
+          }
+        }
+
+        if (!locUuid && sessionData.sessionLocation?.uuid) {
+          locUuid = sessionData.sessionLocation.uuid;
+        }
+
+        if (locUuid) {
+          setLocationUuid(locUuid);
+          const locRes = await fetch(`/openmrs/ws/rest/v1/location/${locUuid}`);
+          if (locRes.ok) {
+            const locData = await locRes.json();
+            setInstituteName(locData.display || 'OpenMRS Location');
+          }
+        } else {
+          setInstituteName('No Location Assigned');
+          setLoading(false);
+        }
+      } catch (err) {
+        console.error('Error initializing location context:', err);
+        setInstituteName('Location Load Error');
+        setLoading(false);
+      }
+    }
+
+    initSession();
+  }, []);
+
+  // Fetch Table Data when locationUuid is set
+  useEffect(() => {
+    if (!locationUuid) return;
+
+    async function loadTableData() {
+      setLoading(true);
+      try {
+        const response = await fetch(`/openmrs/ws/rest/v1/printlabreportresults/loaddetails/${locationUuid}`);
+        if (!response.ok) throw new Error('Failed to load details');
+        const rawData = await response.json();
+
+        // Map array response to LabResultRow objects
+        // Index mapping from legacy query:
+        // [0: phn, 1: givenname, 2: testname, 3: gender, 4: age, 5: orderby, 6: orderdatetime, 7: section, 8: barcodenumber, 9: labdocname, 10: collectioncdate, 11: id, 12: remark]
+        const mappedRows: LabResultRow[] = (rawData || []).map((row: any) => ({
+          phnNo: row[0] || '',
+          givenName: row[1] || '',
+          testName: row[2] || '',
+          gender: row[3] || '',
+          age: row[4] || '',
+          orderBy: row[5] || '',
+          orderDateTime: row[6] || '',
+          section: row[7] || '',
+          barcodeNumber: row[8] || '',
+          collectBy: row[9] || '',
+          collectDate: row[10] || '',
+          serial: row[11] || 0,
+          remark: row[12] || '',
+        }));
+
+        setData(mappedRows);
+      } catch (err) {
+        console.error('Error fetching print lab test results:', err);
+        setData([]);
+      } finally {
+        setLoading(false);
+      }
+    }
+
+    loadTableData();
+  }, [locationUuid]);
+
+  // Filtered & Searched Data
+  const filteredData = useMemo(() => {
+    return data.filter((row) => {
+      // Section Filter
+      if (sectionFilter !== 'ALL' && row.section.toLowerCase() !== sectionFilter.toLowerCase()) {
+        return false;
+      }
+      // Search Filter
+      if (searchQuery.trim() !== '') {
+        const query = searchQuery.toLowerCase();
+        const matchBarcode = row.barcodeNumber.toLowerCase().includes(query);
+        const matchPhn = row.phnNo.toLowerCase().includes(query);
+        const matchName = row.givenName.toLowerCase().includes(query);
+        const matchTest = row.testName.toLowerCase().includes(query);
+        const matchOrderBy = row.orderBy.toLowerCase().includes(query);
+        const matchCollectBy = row.collectBy.toLowerCase().includes(query);
+        return matchBarcode || matchPhn || matchName || matchTest || matchOrderBy || matchCollectBy;
+      }
+      return true;
+    });
+  }, [data, sectionFilter, searchQuery]);
+
+  // Pagination slicing
+  const paginatedData = useMemo(() => {
+    const start = (currentPage - 1) * pageSize;
+    return filteredData.slice(start, start + pageSize);
+  }, [filteredData, currentPage, pageSize]);
+
+  const totalPages = Math.ceil(filteredData.length / pageSize) || 1;
+
+  // Open "View Results" Modal
+  const handleView = async (row: LabResultRow) => {
+    setSelectedRow(row);
+
+    const now = new Date();
+    const dateStr = now.toISOString().split('T')[0];
+    const timeStr = `${('0' + now.getHours()).slice(-2)}:${('0' + now.getMinutes()).slice(-2)}`;
+
+    setPatientDetails({
+      fullName: row.givenName,
+      section: row.section,
+      phn: row.phnNo,
+      age: String(row.age),
+      gender: row.gender,
+      testName: row.testName,
+      remark: row.remark,
+      date: dateStr,
+      time: timeStr,
+    });
+
+    setIsModalOpen(true);
+    setLoadingParams(true);
+    setParameters([]);
+
+    try {
+      let endpoint = '';
+      const testEnc = encodeURIComponent(row.testName);
+      if (row.section === 'OPD') {
+        endpoint = `/openmrs/ws/rest/v1/printlabreportresults/loadparameter/${testEnc}/${locationUuid}/${row.serial}`;
+      } else if (row.section === 'Clinic') {
+        endpoint = `/openmrs/ws/rest/v1/printlabreportresults/loadparameterclinic/${testEnc}/${locationUuid}/${row.serial}`;
+      } else if (row.section === 'Ward') {
+        endpoint = `/openmrs/ws/rest/v1/printlabreportresults/loadparameterward/${testEnc}/${locationUuid}/${row.serial}`;
+      }
+
+      if (endpoint) {
+        const res = await fetch(endpoint);
+        if (res.ok) {
+          const paramData = await res.json();
+          // Array mapping: [0: parameterName, 1: value, 2: flag, 3: ranges, 4: units]
+          const mappedParams: ParameterRow[] = (paramData || []).map((p: any) => ({
+            parameterName: p[0] || '',
+            value: p[1] || '',
+            flag: p[2] || '',
+            ranges: p[3] || '',
+            units: p[4] || '',
+          }));
+          setParameters(mappedParams);
+        }
+      }
+    } catch (err) {
+      console.error('Error loading parameters:', err);
+    } finally {
+      setLoadingParams(false);
+    }
+  };
+
+  // Open PDF Report
+  const handlePrintReport = async (row: LabResultRow) => {
+    try {
+      let detailsEndpoint = '';
+      if (row.section === 'OPD') {
+        detailsEndpoint = `/openmrs/ws/rest/v1/printlabreportresults/labdetailsopd/${row.serial}`;
+      } else if (row.section === 'Clinic') {
+        detailsEndpoint = `/openmrs/ws/rest/v1/printlabreportresults/labdetailsclinic/${row.serial}`;
+      } else if (row.section === 'Ward') {
+        detailsEndpoint = `/openmrs/ws/rest/v1/printlabreportresults/labdetailsward/${row.serial}`;
+      }
+
+      if (detailsEndpoint) {
+        const response = await fetch(detailsEndpoint);
+        if (response.ok) {
+          const labData = await response.json();
+          const encounterUuid = labData.encounteruuid || '';
+          const documentName = `${row.phnNo}@@@${row.testName}@@@${encounterUuid}`;
+          const filename = `${documentName}.pdf`;
+          const fileUrl = `${window.location.origin}/openmrs/owa/LabReportFileUploaded/${filename}`;
+          window.open(fileUrl, '_blank');
+        } else {
+          alert('Could not retrieve lab details for report PDF generation.');
+        }
+      }
+    } catch (err) {
+      console.error('Error printing lab report:', err);
+      alert('Error fetching report PDF.');
+    }
+  };
+
+  const getSectionBadgeClass = (section: string) => {
+    switch (section.toLowerCase()) {
+      case 'opd':
+        return styles.tagOpd;
+      case 'clinic':
+        return styles.tagClinic;
+      case 'ward':
+        return styles.tagWard;
+      default:
+        return styles.tagOpd;
+    }
+  };
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.card}>
+        <div className={styles.cardBody}>
+          
+          {/* Header & Institute Name */}
+          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1.5rem' }}>
+            <h2 className={styles.heading}>
+              {t('viewTestResultsHeading', 'View Test Results')}
+            </h2>
+            <div style={{ fontSize: '14px', fontWeight: 'bold', color: '#161616' }}>
+              <span>🏥 {instituteName}</span>
+            </div>
+          </div>
+
+          {/* Filters & Search Row */}
+          <div className={styles.filterRow}>
+            <div className={styles.filterGroup}>
+              <label htmlFor="sectionFilter" className={styles.labelCompact}>
+                Section:
+              </label>
+              <select
+                id="sectionFilter"
+                className={styles.selectCompact}
+                value={sectionFilter}
+                onChange={(e) => {
+                  setSectionFilter(e.target.value);
+                  setCurrentPage(1);
+                }}
+              >
+                <option value="ALL">All Sections</option>
+                <option value="OPD">OPD</option>
+                <option value="Clinic">Clinic</option>
+                <option value="Ward">Ward</option>
+              </select>
+            </div>
+
+            <div className={styles.filterGroup}>
+              <label htmlFor="searchInput" className={styles.labelCompact}>
+                Search:
+              </label>
+              <input
+                id="searchInput"
+                type="text"
+                placeholder="Search PHN, Barcode, Test Name, Patient..."
+                className={styles.searchInput}
+                value={searchQuery}
+                onChange={(e) => {
+                  setSearchQuery(e.target.value);
+                  setCurrentPage(1);
+                }}
+              />
+            </div>
+          </div>
+
+          {/* Table */}
+          <div className={styles.tableWrapper}>
+            <table className={styles.dataTable}>
+              <thead>
+                <tr>
+                  <th>No</th>
+                  <th>Section</th>
+                  <th>Barcode No</th>
+                  <th>PHN No</th>
+                  <th>Patient Name</th>
+                  <th>Gender</th>
+                  <th>Age</th>
+                  <th>Test Name</th>
+                  <th>Order By</th>
+                  <th>Order Date</th>
+                  <th>Collect By</th>
+                  <th>Collect Date</th>
+                  <th>Actions</th>
+                </tr>
+              </thead>
+              <tbody>
+                {loading ? (
+                  <tr>
+                    <td colSpan={13} style={{ textAlign: 'center', padding: '24px' }}>
+                      Loading test results...
+                    </td>
+                  </tr>
+                ) : paginatedData.length === 0 ? (
+                  <tr>
+                    <td colSpan={13} style={{ textAlign: 'center', padding: '24px', color: '#6f6f6f' }}>
+                      No approved test results found.
+                    </td>
+                  </tr>
+                ) : (
+                  paginatedData.map((row, idx) => (
+                    <tr key={`${row.section}-${row.serial}-${idx}`}>
+                      <td>{(currentPage - 1) * pageSize + idx + 1}</td>
+                      <td>
+                        <span className={getSectionBadgeClass(row.section)}>
+                          {row.section}
+                        </span>
+                      </td>
+                      <td style={{ fontWeight: '500' }}>{row.barcodeNumber}</td>
+                      <td>{row.phnNo}</td>
+                      <td>{row.givenName}</td>
+                      <td>{row.gender}</td>
+                      <td>{row.age}</td>
+                      <td style={{ fontWeight: '600' }}>{row.testName}</td>
+                      <td>{row.orderBy}</td>
+                      <td>{row.orderDateTime}</td>
+                      <td>{row.collectBy}</td>
+                      <td>{row.collectDate}</td>
+                      <td>
+                        <div className={styles.actionBtnGroup}>
+                          <button
+                            type="button"
+                            className={styles.btnPrimary}
+                            onClick={() => handleView(row)}
+                          >
+                            View
+                          </button>
+                          <button
+                            type="button"
+                            className={styles.btnSuccess}
+                            onClick={() => handlePrintReport(row)}
+                          >
+                            Print
+                          </button>
+                        </div>
+                      </td>
+                    </tr>
+                  ))
+                )}
+              </tbody>
+            </table>
+          </div>
+
+          {/* Pagination */}
+          {!loading && filteredData.length > 0 && (
+            <div className={styles.pagination}>
+              <div>
+                Showing {(currentPage - 1) * pageSize + 1} to{' '}
+                {Math.min(currentPage * pageSize, filteredData.length)} of {filteredData.length} records
+              </div>
+
+              <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
+                <button
+                  type="button"
+                  className={styles.btnSecondary}
+                  disabled={currentPage === 1}
+                  onClick={() => setCurrentPage((p) => Math.max(p - 1, 1))}
+                >
+                  Previous
+                </button>
+                <span>
+                  Page {currentPage} of {totalPages}
+                </span>
+                <button
+                  type="button"
+                  className={styles.btnSecondary}
+                  disabled={currentPage >= totalPages}
+                  onClick={() => setCurrentPage((p) => Math.min(p + 1, totalPages))}
+                >
+                  Next
+                </button>
+
+                <select
+                  className={styles.selectCompact}
+                  value={pageSize}
+                  onChange={(e) => {
+                    setPageSize(Number(e.target.value));
+                    setCurrentPage(1);
+                  }}
+                  style={{ marginLeft: '12px' }}
+                >
+                  <option value={10}>10 per page</option>
+                  <option value={25}>25 per page</option>
+                  <option value={50}>50 per page</option>
+                  <option value={100}>100 per page</option>
+                </select>
+              </div>
+            </div>
+          )}
+
+        </div>
+      </div>
+
+      {/* View Results Modal */}
+      {isModalOpen && patientDetails && (
+        <div className={styles.modalOverlay}>
+          <div className={styles.modalContainer}>
+            <div className={styles.modalHeader}>
+              <h3>View Test Results</h3>
+              <button
+                type="button"
+                className={styles.btnClose}
+                onClick={() => setIsModalOpen(false)}
+              >
+                &times;
+              </button>
+            </div>
+
+            <div className={styles.modalBody}>
+              <div className={styles.gridForm}>
+                <div className={styles.formField}>
+                  <label>Full Name</label>
+                  <input type="text" value={patientDetails.fullName} readOnly />
+                </div>
+
+                <div className={styles.formField}>
+                  <label>Section</label>
+                  <input type="text" value={patientDetails.section} readOnly />
+                </div>
+
+                <div className={styles.formField}>
+                  <label>PHN No</label>
+                  <input type="text" value={patientDetails.phn} readOnly />
+                </div>
+
+                <div className={styles.formField}>
+                  <label>Age</label>
+                  <input type="text" value={patientDetails.age} readOnly />
+                </div>
+
+                <div className={styles.formField}>
+                  <label>Gender</label>
+                  <input type="text" value={patientDetails.gender} readOnly />
+                </div>
+
+                <div className={styles.formField}>
+                  <label>Test Name</label>
+                  <input type="text" value={patientDetails.testName} readOnly />
+                </div>
+
+                <div className={`${styles.formField} ${styles.formFieldFull}`}>
+                  <label>Remark / Notes</label>
+                  <textarea rows={2} value={patientDetails.remark} readOnly />
+                </div>
+
+                <div className={styles.formField}>
+                  <label>Date</label>
+                  <input type="text" value={patientDetails.date} readOnly />
+                </div>
+
+                <div className={styles.formField}>
+                  <label>Time</label>
+                  <input type="text" value={patientDetails.time} readOnly />
+                </div>
+              </div>
+
+              {/* Parameter Table */}
+              <h4 style={{ fontSize: '15px', fontWeight: '600', color: '#161616', marginTop: '16px', marginBottom: '8px' }}>
+                Test Parameters & Values
+              </h4>
+
+              <div className={styles.tableWrapper}>
+                <table className={styles.dataTable}>
+                  <thead>
+                    <tr>
+                      <th>No</th>
+                      <th>Parameter Name</th>
+                      <th>Value</th>
+                      <th>Units</th>
+                      <th>Ranges</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {loadingParams ? (
+                      <tr>
+                        <td colSpan={5} style={{ textAlign: 'center', padding: '16px' }}>
+                          Loading parameters...
+                        </td>
+                      </tr>
+                    ) : parameters.length === 0 ? (
+                      <tr>
+                        <td colSpan={5} style={{ textAlign: 'center', padding: '16px', color: '#6f6f6f' }}>
+                          No parameter details recorded for this test.
+                        </td>
+                      </tr>
+                    ) : (
+                      parameters.map((param, index) => (
+                        <tr key={`param-${index}`}>
+                          <td>{index + 1}</td>
+                          <td style={{ fontWeight: '500' }}>{param.parameterName}</td>
+                          <td>{param.value}</td>
+                          <td>{param.units}</td>
+                          <td>{param.ranges}</td>
+                        </tr>
+                      ))
+                    )}
+                  </tbody>
+                </table>
+              </div>
+            </div>
+
+            <div className={styles.modalFooter}>
+              <button
+                type="button"
+                className={styles.btnSecondary}
+                onClick={() => setIsModalOpen(false)}
+              >
+                Close
+              </button>
+              {selectedRow && (
+                <button
+                  type="button"
+                  className={styles.btnSuccess}
+                  onClick={() => handlePrintReport(selectedRow)}
+                >
+                  Print Report PDF
+                </button>
+              )}
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default PrintLabTestResults;