@sasindi/addresults 1.0.0

package/src/add-results.component.tsx

@@ -0,0 +1,258 @@
+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 AddResults: React.FC = () => {
+  const { t } = useTranslation();
+
+  // State variables
+  const [locations, setLocations] = useState<any[]>([]);
+  const [selectedLocation, setSelectedLocation] = useState<string>('');
+  const [currentUserUuid, setCurrentUserUuid] = useState<string>('');
+  const [locationName, setLocationName] = useState<string>('Loading location...');
+  const [data, setData] = useState<any[]>([]);
+  const [loading, setLoading] = useState<boolean>(true);
+  const [searchQuery, setSearchQuery] = useState<string>('');
+
+  // Load Session, Current Location and Hospital Locations
+  useEffect(() => {
+    async function initContext() {
+      try {
+        // 1. Get Session Data
+        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;
+        setCurrentUserUuid(sessionData.user.uuid);
+
+        // 2. Get Person Attributes for Institute Id
+        const personRes = await fetch(`/openmrs/ws/rest/v1/person/${personUuid}`);
+        if (!personRes.ok) throw new Error('Person details request failed');
+        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) {
+                const cleanKey = key.trim();
+                if (cleanKey === 'Institute Id' || cleanKey === 'Institute') {
+                  initialLocUuid = value.trim();
+                }
+              }
+            }
+          });
+        }
+
+        if (!initialLocUuid && sessionData.sessionLocation && sessionData.sessionLocation.uuid) {
+          initialLocUuid = sessionData.sessionLocation.uuid;
+        }
+
+        setSelectedLocation(initialLocUuid);
+
+        // 3. Load Locations (Try standard location resource first, filtering address14 for Hospital)
+        let loaded = false;
+        try {
+          const locsRes = await fetch('/openmrs/ws/rest/v1/location?v=custom:(uuid,name,address14)');
+          if (locsRes.ok) {
+            const locsData = await locsRes.json();
+            const filteredLocs = (locsData.results || []).filter((loc: any) => loc.address14 === 'Hospital');
+            if (filteredLocs.length > 0) {
+              setLocations(filteredLocs);
+              loaded = true;
+            }
+          }
+        } catch (e) {
+          console.warn("Standard location API query failed, trying patientregister custom API:", e);
+        }
+
+        if (!loaded) {
+          try {
+            const fallbackRes = await fetch('/openmrs/ws/rest/v1/patientregister/patientregister/getSelectedTypeData/Hospital');
+            if (fallbackRes.ok) {
+              const fallbackData = await fallbackRes.json();
+              setLocations(fallbackData.data || []);
+            }
+          } catch (e) {
+            console.error("All location loading attempts failed:", e);
+          }
+        }
+      } catch (err) {
+        console.error('Error during context initialization:', err);
+        setLocationName('Error loading location context');
+      }
+    }
+
+    initContext();
+  }, []);
+
+  // Fetch Table Data when selectedLocation changes
+  const fetchTableData = async () => {
+    if (!selectedLocation) return;
+    setLoading(true);
+    try {
+      // NOTE: Custom REST Controller mapped under '/openmrs/rest/v1/addresult' without '/ws'
+      const url = `/openmrs/rest/v1/addresult/loaddetails/${selectedLocation}`;
+      const response = await fetch(url);
+      if (!response.ok) throw new Error('Failed to load table data');
+      const resData = await response.json();
+      setData(resData || []);
+    } catch (err) {
+      console.error('Error fetching table data:', err);
+      setData([]);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchTableData();
+  }, [selectedLocation]);
+
+  // Set location name for the selected location dropdown
+  useEffect(() => {
+    if (selectedLocation && locations.length > 0) {
+      const match = locations.find(l => l.uuid === selectedLocation);
+      if (match) setLocationName(match.name);
+    }
+  }, [selectedLocation, locations]);
+
+  // 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;
+  };
+
+  // Handle select button click
+  const handleSelect = (row: any) => {
+    const phnNo = row[0];
+    const section = row[7];
+    const barcode = row[8];
+    const id = row[11];
+
+    localStorage.setItem('phnNo', phnNo);
+    localStorage.setItem('section', section);
+    localStorage.setItem('barcode', barcode);
+    localStorage.setItem('id', String(id));
+
+    navigateTo(window.getOpenmrsSpaBase() + 'addresults-form');
+  };
+
+  // Filter data by search query (matching barcode)
+  const filteredData = data.filter((row: any) => {
+    const barcode = String(row[8] || '').toLowerCase();
+    const query = searchQuery.toLowerCase().trim();
+    return barcode.includes(query);
+  });
+
+  return (
+    <div className={styles.bodyWrapper}>
+      <div className={styles.navigationCard}>
+        <div className={styles.navRow}>
+          <h2 className={styles.navTitle}>Add Results Dashboard</h2>
+          <div className={styles.instituteSelector}>
+            <span>Hospital:</span>
+            <select
+              className={styles.formControl}
+              value={selectedLocation}
+              onChange={(e) => setSelectedLocation(e.target.value)}
+              style={{ minWidth: '220px' }}
+            >
+              <option value="">Select Hospital Location</option>
+              {locations.map((loc) => (
+                <option key={loc.uuid} value={loc.uuid}>
+                  {loc.name}
+                </option>
+              ))}
+            </select>
+          </div>
+        </div>
+      </div>
+
+      <div className={styles.card}>
+        <div className={styles.searchBar}>
+          <span className={styles.searchLabel}>Search Barcode:</span>
+          <input
+            type="text"
+            className={styles.formControl}
+            placeholder="Type barcode number to filter..."
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            style={{ flexGrow: 1 }}
+          />
+        </div>
+
+        {loading ? (
+          <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 pending samples list...</p>
+          </div>
+        ) : (
+          <div className={styles.tableResponsive}>
+            <table className={`${styles.table} ${styles.tableHover} ${styles.tableStriped} ${styles.tableBordered}`}>
+              <thead>
+                <tr>
+                  <th>No</th>
+                  <th>Section</th>
+                  <th>Barcode No</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 style={{ textAlign: 'center' }}>Action</th>
+                </tr>
+              </thead>
+              <tbody>
+                {filteredData.length > 0 ? (
+                  filteredData.map((row: any, idx: number) => (
+                    <tr key={row[11] || idx}>
+                      <td>{idx + 1}</td>
+                      <td>{row[7]}</td>
+                      <td style={{ fontWeight: 600 }}>{row[8]}</td>
+                      <td>{formatGender(row[3])}</td>
+                      <td>{row[4]}</td>
+                      <td style={{ color: 'var(--primary-color)', fontWeight: 500 }}>{row[2]}</td>
+                      <td>{row[5]}</td>
+                      <td>{row[6]}</td>
+                      <td>{row[9]}</td>
+                      <td>{row[10]}</td>
+                      <td style={{ textAlign: 'center' }}>
+                        <button
+                          type="button"
+                          className={`${styles.btn} ${styles.btnPrimary}`}
+                          onClick={() => handleSelect(row)}
+                        >
+                          Select
+                        </button>
+                      </td>
+                    </tr>
+                  ))
+                ) : (
+                  <tr>
+                    <td colSpan={11} className={styles.textCenter} style={{ padding: '2rem', color: 'var(--text-light)' }}>
+                      No pending laboratory samples found.
+                    </td>
+                  </tr>
+                )}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default AddResults;

package/src/add-results.scss

@@ -0,0 +1,448 @@
+/* Styling system for Add Results module in OpenMRS 3 */
+
+:root {
+  --primary-color: #009384;
+  --secondary-color: #00bfa5;
+  --bg-color: #f4f7f6;
+  --card-bg: #ffffff;
+  --text-dark: #333333;
+  --text-light: #666666;
+  --border-color: #e0e0e0;
+  --danger-color: #ff5252;
+  --success-color: #4caf50;
+  --info-color: #00b0ff;
+  --warning-color: #ffd740;
+}
+
+.bodyWrapper {
+  background-color: var(--bg-color);
+  padding: 1.5rem;
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  color: var(--text-dark);
+  min-height: 100vh;
+}
+
+.navigationCard {
+  background: var(--card-bg);
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+  margin-bottom: 2rem;
+  padding: 1.5rem;
+  border-left: 4px solid var(--primary-color);
+}
+
+.navRow {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.navTitle {
+  font-size: 1.4rem;
+  color: var(--primary-color);
+  font-weight: 600;
+  margin: 0;
+}
+
+.instituteSelector {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-weight: 500;
+}
+
+.formControl {
+  padding: 0.375rem 0.75rem;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  color: #495057;
+  background-color: #fff;
+  background-clip: padding-box;
+  border: 1px solid #ced4da;
+  border-radius: 0.25rem;
+  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+  
+  &:focus {
+    border-color: var(--secondary-color);
+    outline: 0;
+    box-shadow: 0 0 0 0.2rem rgba(0, 191, 165, 0.25);
+  }
+}
+
+.card {
+  background: var(--card-bg);
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+  padding: 2rem;
+  margin-bottom: 2rem;
+}
+
+.row {
+  display: flex;
+  flex-wrap: wrap;
+  margin-right: -15px;
+  margin-left: -15px;
+}
+
+.col12 {
+  flex: 0 0 100%;
+  max-width: 100%;
+  padding-right: 15px;
+  padding-left: 15px;
+}
+
+.colMd12 {
+  flex: 0 0 100%;
+  max-width: 100%;
+  padding-right: 15px;
+  padding-left: 15px;
+}
+
+.col {
+  flex-grow: 1;
+  max-width: 100%;
+  padding-right: 15px;
+  padding-left: 15px;
+}
+
+.my1 {
+  margin-top: 0.25rem;
+  margin-bottom: 0.25rem;
+  display: flex;
+  flex-direction: column;
+}
+
+.my1 label {
+  font-size: 0.8rem;
+  font-weight: 600;
+  margin-bottom: 0.25rem;
+  color: var(--text-light);
+}
+
+.tableResponsive {
+  display: block;
+  width: 100%;
+  overflow-x: auto;
+  margin-top: 1rem;
+}
+
+.table {
+  width: 100%;
+  margin-bottom: 1rem;
+  color: var(--text-dark);
+  border-collapse: collapse;
+  
+  th, td {
+    padding: 0.75rem;
+    vertical-align: middle;
+    border-top: 1px solid var(--border-color);
+    font-size: 0.85rem;
+  }
+  
+  th {
+    background-color: #f1f3f2;
+    color: #495057;
+    font-weight: 600;
+    text-align: left;
+    border-bottom: 2px solid var(--border-color);
+  }
+}
+
+.tableHover tbody tr:hover {
+  background-color: rgba(0, 147, 132, 0.05);
+}
+
+.tableStriped tbody tr:nth-of-type(odd) {
+  background-color: rgba(0, 0, 0, 0.02);
+}
+
+.tableBordered {
+  border: 1px solid var(--border-color);
+  
+  th, td {
+    border: 1px solid var(--border-color);
+  }
+}
+
+.btn {
+  display: inline-block;
+  font-weight: 500;
+  color: #212529;
+  text-align: center;
+  vertical-align: middle;
+  cursor: pointer;
+  user-select: none;
+  background-color: transparent;
+  border: 1px solid transparent;
+  padding: 0.375rem 0.75rem;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  border-radius: 0.25rem;
+  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+  
+  &:focus {
+    outline: 0;
+  }
+}
+
+.btnPrimary {
+  color: #fff;
+  background-color: var(--primary-color);
+  border-color: var(--primary-color);
+  
+  &:hover {
+    background-color: #00776b;
+    border-color: #00776b;
+  }
+}
+
+.btnSecondary {
+  color: #fff;
+  background-color: #6c757d;
+  border-color: #6c757d;
+  
+  &:hover {
+    background-color: #5a6268;
+    border-color: #545b62;
+  }
+}
+
+.btnSuccess {
+  color: #fff;
+  background-color: var(--success-color);
+  border-color: var(--success-color);
+  
+  &:hover {
+    background-color: #3d8b40;
+    border-color: #3d8b40;
+  }
+}
+
+.btnDanger {
+  color: #fff;
+  background-color: var(--danger-color);
+  border-color: var(--danger-color);
+  
+  &:hover {
+    background-color: #e53935;
+    border-color: #e53935;
+  }
+}
+
+.btnWarning {
+  color: #212529;
+  background-color: var(--warning-color);
+  border-color: var(--warning-color);
+  
+  &:hover {
+    background-color: #ffc107;
+    border-color: #ffc107;
+  }
+}
+
+.btnInfo {
+  color: #fff;
+  background-color: var(--info-color);
+  border-color: var(--info-color);
+  
+  &:hover {
+    background-color: #0091ea;
+    border-color: #0091ea;
+  }
+}
+
+.mx2 { margin-left: 0.5rem; margin-right: 0.5rem; }
+.mx5 { margin-left: 1.5rem; margin-right: 1.5rem; }
+.my5 { margin-top: 1.5rem; margin-bottom: 1.5rem; }
+
+/* Form entry parameter styles */
+.showHideTableParameter {
+  max-height: 350px;
+  overflow-y: auto;
+  border: 1px solid var(--border-color);
+  border-radius: 4px;
+  margin-top: 1rem;
+}
+
+/* Spinner and overlay */
+.overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.6);
+  justify-content: center;
+  align-items: center;
+  z-index: 9999;
+  display: flex;
+  flex-direction: column;
+  color: #ffffff;
+  font-weight: 500;
+  gap: 1rem;
+}
+
+.spinner {
+  border: 6px solid #f3f3f3;
+  border-top: 6px solid var(--secondary-color);
+  border-radius: 50%;
+  width: 70px;
+  height: 70px;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+/* Modal styling */
+.customModal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1050;
+}
+
+.modalDialog {
+  background: white;
+  border-radius: 8px;
+  width: 90%;
+  max-width: 600px;
+  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
+  overflow: hidden;
+}
+
+.modalDialogLarge {
+  max-width: 80%;
+}
+
+.modalHeader {
+  padding: 1rem 1.5rem;
+  border-bottom: 1px solid var(--border-color);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: #f8f9fa;
+}
+
+.modalTitle {
+  font-weight: 600;
+  color: var(--primary-color);
+  margin: 0;
+}
+
+.closeButton {
+  background: none;
+  border: none;
+  font-size: 1.5rem;
+  cursor: pointer;
+  color: var(--text-light);
+  line-height: 1;
+}
+
+.modalBody {
+  padding: 1.5rem;
+  max-height: 70vh;
+  overflow-y: auto;
+}
+
+.modalFooter {
+  padding: 1rem 1.5rem;
+  border-top: 1px solid var(--border-color);
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.5rem;
+  background: #f8f9fa;
+}
+
+.actionSelectBox {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding: 1rem;
+  text-align: center;
+}
+
+.formGroup {
+  margin-bottom: 1rem;
+}
+
+.formLabel {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--text-dark);
+  margin-bottom: 0.5rem;
+  display: block;
+}
+
+.textCenter {
+  text-align: center;
+}
+
+.textRight {
+  text-align: right;
+}
+
+/* Custom search bar */
+.searchBar {
+  display: flex;
+  align-items: center;
+  margin-bottom: 1rem;
+  max-width: 400px;
+}
+
+.searchLabel {
+  font-weight: 600;
+  margin-right: 0.5rem;
+  color: var(--text-light);
+}
+
+.toast {
+  position: fixed;
+  top: 20px;
+  right: 20px;
+  padding: 1rem 1.5rem;
+  border-radius: 4px;
+  color: #fff;
+  z-index: 10000;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+  font-weight: 500;
+  animation: fadeIn 0.3s;
+}
+
+.toastSuccess {
+  background-color: var(--success-color);
+}
+
+.toastError {
+  background-color: var(--danger-color);
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(-10px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.checkboxContainer {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 1.1rem;
+  font-weight: 500;
+  margin: 1.5rem 0;
+  cursor: pointer;
+  
+  input {
+    width: 20px;
+    height: 20px;
+    cursor: pointer;
+  }
+}

package/src/config-schema.ts

@@ -0,0 +1,21 @@
+import { Type, validators } from '@openmrs/esm-framework';
+
+export const configSchema = {
+  // Add your configuration schema here
+  // Example:
+  // logo: {
+  //   src: {
+  //     _type: Type.String,
+  //     _default: '',
+  //     _description: 'The path or URL to the logo image',
+  //     _validators: [validators.isUrl],
+  //   },
+  //   alt: {
+  //     _type: Type.String,
+  //     _default: 'Logo',
+  //     _description: 'The alternative text for the logo image',
+  //   },
+  // },
+};
+
+export type ConfigSchema = Record<string, never>;