@sasindi/samplecollection 1.0.0

package/src/samplecollectionroom.component.tsx

@@ -0,0 +1,640 @@
+import React, { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import {
+  Tile,
+  TextInput,
+  Select,
+  SelectItem,
+  TextArea,
+  Button,
+  Table,
+  TableHead,
+  TableRow,
+  TableHeader,
+  TableBody,
+  TableCell,
+  Checkbox,
+  Loading,
+  InlineNotification
+} from '@carbon/react';
+import styles from './samplecollection.scss';
+
+const UserAvatar = () => (
+  <svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg" style={{ borderRadius: '50%', border: '3px solid #009384' }}>
+    <circle cx="50" cy="50" r="50" fill="#E0F2F1"/>
+    <circle cx="50" cy="40" r="18" fill="#009384"/>
+    <path d="M18 78C18 62.536 32.3269 50 50 50C67.6731 50 82 62.536 82 78" stroke="#009384" strokeWidth="8" strokeLinecap="round"/>
+  </svg>
+);
+
+const SamplecollectionRoom: React.FC = () => {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+
+  // Route state read from localstorage
+  const phnNo = localStorage.getItem('phnNo') || '';
+  const initialSection = localStorage.getItem('section') || '';
+
+  // Patient Info States
+  const [patientName, setPatientName] = useState<string>('');
+  const [patientGender, setPatientGender] = useState<string>('');
+  const [patientAge, setPatientAge] = useState<string>('');
+  const [profileImgName, setProfileImgName] = useState<string>('');
+
+  // Context & IDs
+  const [userUuid, setUserUuid] = useState<string>('');
+  const [locationUuid, setLocationUuid] = useState<string>('');
+  const [locationName, setLocationName] = useState<string>('');
+  const [poi, setPoi] = useState<string>('');
+
+  // Table Data
+  const [testList, setTestList] = useState<any[]>([]);
+  const [loading, setLoading] = useState<boolean>(true);
+  const [errorMsg, setErrorMsg] = useState<string>('');
+  const [successMsg, setSuccessMsg] = useState<string>('');
+
+  // Form selections state
+  const [selectedIds, setSelectedIds] = useState<string[]>([]);
+  const [selectedUrgents, setSelectedUrgents] = useState<string[]>([]);
+  const [selectedTestnames, setSelectedTestnames] = useState<string[]>([]);
+
+  const [displayTestNames, setDisplayTestNames] = useState<string>('');
+  const [displayOrderBy, setDisplayOrderBy] = useState<string>('');
+  const [displayOrderDate, setDisplayOrderDate] = useState<string>('');
+  const [displayOrderTime, setDisplayOrderTime] = useState<string>('');
+
+  // Save fields state
+  const [saveDate, setSaveDate] = useState<string>('');
+  const [saveTime, setSaveTime] = useState<string>('');
+  const [saveStatus, setSaveStatus] = useState<string>('Done');
+  const [saveRemark, setSaveRemark] = useState<string>('');
+  const [saving, setSaving] = useState<boolean>(false);
+
+  // Pad number helper
+  const padNumber = (number: number, length: number) => {
+    return number.toString().padStart(length, '0');
+  };
+
+  // Get current date string formatted as YYMMDDHHmmss
+  const getCurrentDateFormatted = () => {
+    const now = new Date();
+    const year = now.getFullYear().toString().substr(-2);
+    const month = padNumber(now.getMonth() + 1, 2);
+    const day = padNumber(now.getDate(), 2);
+    const hours = padNumber(now.getHours(), 2);
+    const minutes = padNumber(now.getMinutes(), 2);
+    const seconds = padNumber(now.getSeconds(), 2);
+    return year + month + day + hours + minutes + seconds;
+  };
+
+  // Age calculation helper
+  const calculateAge = (birthdateString: string) => {
+    if (!birthdateString) return '';
+    const now = new Date();
+    const dob = new Date(birthdateString);
+    let age = now.getFullYear() - dob.getFullYear();
+    const monthDiff = now.getMonth() - dob.getMonth();
+    if (monthDiff < 0 || (monthDiff === 0 && now.getDate() < dob.getDate())) {
+      age--;
+    }
+    return age.toString();
+  };
+
+  // Set default values for Date and Time
+  useEffect(() => {
+    const today = new Date();
+    const formattedDate = `${today.getFullYear()}-${padNumber(today.getMonth() + 1, 2)}-${padNumber(today.getDate(), 2)}`;
+    const formattedTime = `${padNumber(today.getHours(), 2)}:${padNumber(today.getMinutes(), 2)}`;
+    
+    setSaveDate(formattedDate);
+    setSaveTime(formattedTime);
+  }, []);
+
+  // Fetch session, location info and patient profile info
+  useEffect(() => {
+    if (!phnNo) {
+      setErrorMsg('No patient PHN provided');
+      setLoading(false);
+      return;
+    }
+
+    async function initContextAndPatient() {
+      try {
+        // Load session
+        const sessionRes = await fetch('/openmrs/ws/rest/v1/session');
+        if (!sessionRes.ok) throw new Error('Session request failed');
+        const sessionData = await sessionRes.json();
+        setUserUuid(sessionData.user.uuid);
+        const personUuid = sessionData.user.person.uuid;
+
+        // Load user person attributes to get clinic location
+        const personAttrRes = await fetch(`/openmrs/ws/rest/v1/person/${personUuid}`);
+        if (!personAttrRes.ok) throw new Error('User person details failed');
+        const personAttrData = await personAttrRes.json();
+        
+        let locUuid = '';
+        if (personAttrData.attributes) {
+          personAttrData.attributes.forEach((attr: any) => {
+            if (attr.display) {
+              const [key, value] = attr.display.split('=');
+              if (key && value && key.trim() === 'Institute Id') {
+                locUuid = value.trim();
+              }
+            }
+          });
+        }
+
+        if (locUuid) {
+          setLocationUuid(locUuid);
+          
+          // Get Location Details (for Name & POI)
+          const locRes = await fetch(`/openmrs/ws/rest/v1/location/${locUuid}`);
+          if (locRes.ok) {
+            const locData = await locRes.json();
+            setLocationName(locData.display || '');
+            
+            if (locData.attributes) {
+              locData.attributes.forEach((attr: any) => {
+                if (attr.display && attr.display.includes('POI')) {
+                  const val = attr.display.split(':')[1];
+                  if (val) setPoi(val.split(',')[0].trim());
+                }
+              });
+            }
+          }
+        }
+
+        // Fetch patient profile details
+        const patientRes = await fetch(`/openmrs/ws/rest/v1/patientexamination/phn/${phnNo}`);
+        if (!patientRes.ok) throw new Error('Patient not found');
+        const patientData = await patientRes.json();
+
+        setPatientName(patientData.person_id?.person?.display || '');
+        setPatientGender(patientData.person_id?.person?.gender || '');
+        if (patientData.person_id?.person?.birthdate) {
+          setPatientAge(calculateAge(patientData.person_id.person.birthdate));
+        }
+
+        // Check for ProfileImage attribute
+        if (patientData.person_id?.person?.attributes) {
+          patientData.person_id.person.attributes.forEach((attr: any) => {
+            if (attr.display && attr.display.split('=')[0].trim() === 'ProfileImage') {
+              setProfileImgName(attr.display.split('=')[1].trim());
+            }
+          });
+        }
+
+        // Fetch active test details for checkoff
+        if (locUuid) {
+          const loadViewRes = await fetch(`/openmrs/ws/rest/v1/samplecollection/loadview/${phnNo}/${initialSection}/${locUuid}`);
+          if (loadViewRes.ok) {
+            const loadViewData = await loadViewRes.json();
+            setTestList(loadViewData || []);
+          }
+        }
+      } catch (err: any) {
+        console.error('Error loading page context details:', err);
+        setErrorMsg(err.message || 'Error occurred during data load');
+      } finally {
+        setLoading(false);
+      }
+    }
+
+    initContextAndPatient();
+  }, [phnNo, initialSection]);
+
+  // Handle row checkoff selections
+  const handleCheckboxChange = (checked: boolean, id: string, testName: string, urgent: string, row: any) => {
+    let nextIds = [...selectedIds];
+    let nextTestnames = [...selectedTestnames];
+    let nextUrgents = [...selectedUrgents];
+
+    if (checked) {
+      nextIds.push(id);
+      nextTestnames.push(testName);
+      nextUrgents.push(urgent);
+    } else {
+      nextIds = nextIds.filter((item) => item !== id);
+      nextTestnames = nextTestnames.filter((item) => item !== testName);
+      nextUrgents = nextUrgents.filter((item) => item !== urgent);
+    }
+
+    setSelectedIds(nextIds);
+    setSelectedTestnames(nextTestnames);
+    setSelectedUrgents(nextUrgents);
+
+    // Update form view fields
+    setDisplayTestNames(nextTestnames.join(', '));
+    
+    if (nextIds.length === 0) {
+      setDisplayOrderBy('');
+      setDisplayOrderDate('');
+      setDisplayOrderTime('');
+    } else {
+      // Set to the values of the last checked row
+      const orderby = row[5] || '';
+      const timestamp = row[6] || '';
+      const [date, time] = timestamp.split(' ');
+      setDisplayOrderBy(orderby);
+      setDisplayOrderDate(date || '');
+      setDisplayOrderTime(time || '');
+    }
+  };
+
+  const handleSave = async () => {
+    if (saveStatus === '0') {
+      setErrorMsg('Please select a valid Collection Status');
+      return;
+    }
+    if (selectedIds.length === 0) {
+      setErrorMsg('Please select at least one test to process');
+      return;
+    }
+    if (!saveDate || !saveTime) {
+      setErrorMsg('Please specify both Date and Time of collection');
+      return;
+    }
+    if (!userUuid) {
+      setErrorMsg('Invalid session. Please login again.');
+      return;
+    }
+
+    setSaving(true);
+    setErrorMsg('');
+    setSuccessMsg('');
+
+    try {
+      if (saveStatus === 'Not Done') {
+        // Ported JSP behavior: Just show success and redirect/reload
+        setSuccessMsg('Status saved successfully as Not Done!');
+        setTimeout(() => {
+          navigate('/samplecollection');
+        }, 1500);
+        return;
+      }
+
+      // Generate Barcode
+      const currentDate = getCurrentDateFormatted();
+      let hasUrgent = selectedUrgents.some((u) => u === 'true');
+      const generatedBarcode = hasUrgent ? `*${currentDate}${poi}` : `${currentDate}${poi}`;
+
+      // Progress string
+      const progress = saveStatus === 'Done' ? 'samplecollected' : 'samplenotcollected';
+
+      // Save Endpoint depending on section
+      const sectionType = initialSection === 'OPD' ? 'OPD' : initialSection === 'Clinic' ? 'Clinic' : 'Ward';
+      const saveEndpoint = {
+        OPD: '/openmrs/ws/rest/v1/samplecollection/labtestssave',
+        Clinic: '/openmrs/ws/rest/v1/samplecollection/labtestssaveclinic',
+        Ward: '/openmrs/ws/rest/v1/samplecollection/labtestssaveward',
+      }[sectionType];
+
+      // Send requests sequentially/parallelly for each selected ID
+      for (const id of selectedIds) {
+        const payload = {
+          id: id,
+          collectionstatus: saveStatus,
+          remark: saveRemark,
+          barcodenumber: generatedBarcode,
+          collectiondate: saveDate,
+          collectiontime: saveTime,
+          collectioncby: userUuid,
+          status: 'processing',
+          progress: progress,
+        };
+
+        const response = await fetch(saveEndpoint, {
+          method: 'POST',
+          body: JSON.stringify(payload),
+          headers: { 'Content-Type': 'application/json' },
+        });
+
+        if (!response.ok) {
+          throw new Error(`Failed to save test record for ID: ${id}`);
+        }
+      }
+
+      setSuccessMsg('Sample status updated successfully! Preparing barcode print...');
+
+      // Fetch shortcodes for print labels
+      const shortcodes: string[] = [];
+      for (const test of selectedTestnames) {
+        const res = await fetch(`/openmrs/ws/rest/v1/samplecollection/getshortcode/${encodeURIComponent(test)}`);
+        if (res.ok) {
+          const shortcodeData = await res.json();
+          if (shortcodeData?.shortcode) {
+            shortcodes.push(shortcodeData.shortcode);
+          }
+        }
+      }
+
+      const combinedShortcodes = shortcodes.join(', ');
+
+      // Launch Barcode Print popup matching the team's dimensions
+      const printWindow = window.open('', '_blank');
+      if (printWindow) {
+        printWindow.document.write(`
+          <!DOCTYPE html>
+          <html>
+          <head>
+            <title>Barcode Print</title>
+            <script src="https://cdnjs.cloudflare.com/ajax/libs/jsbarcode/3.11.5/JsBarcode.all.min.js"></script>
+            <style>
+              body { 
+                margin: 0; 
+                padding: 0; 
+                text-align: center; 
+              }
+              .container {
+                width: 1.96in; /* 5cm */
+                height: 0.98in; /* 2.5cm */
+                margin: 0 auto;
+                position: relative;
+              }
+              svg {
+                width: 100%;
+                height: 80%;
+              }
+              .shortcode {
+                font-family: Arial, sans-serif;
+                font-size: 10px;
+                margin-top: -14px;
+              }
+              @media print {
+                body { margin: 0; padding: 0; }
+              }
+            </style>
+          </head>
+          <body>
+            <div class="container">
+              <svg id="barcode"></svg>
+              <div class="shortcode">${patientName} (${patientAge}Y)</div>
+              <div style="font-size: 10px; font-family: Arial, sans-serif;">${initialSection}/${combinedShortcodes}</div>
+            </div>
+            <script>
+              document.addEventListener("DOMContentLoaded", function() {
+                JsBarcode("#barcode", "${generatedBarcode}", {
+                  width: 2,
+                  height: 50,
+                  displayValue: true,
+                  fontSize: 14,
+                  margin: 5
+                });
+                setTimeout(function() {
+                  window.print();
+                  window.close();
+                }, 800);
+              });
+            </script>
+          </body>
+          </html>
+        `);
+        printWindow.document.close();
+      }
+
+      // Clear selections and reload table data
+      setSelectedIds([]);
+      setSelectedTestnames([]);
+      setSelectedUrgents([]);
+      setDisplayTestNames('');
+      setDisplayOrderBy('');
+      setDisplayOrderDate('');
+      setDisplayOrderTime('');
+
+      // Refetch tests
+      const loadViewRes = await fetch(`/openmrs/ws/rest/v1/samplecollection/loadview/${phnNo}/${initialSection}/${locationUuid}`);
+      if (loadViewRes.ok) {
+        const loadViewData = await loadViewRes.json();
+        setTestList(loadViewData || []);
+      }
+    } catch (err: any) {
+      console.error('Error during save process:', err);
+      setErrorMsg(err.message || 'Error occurred saving collection data');
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  if (loading) return <Loading description="Loading page details..." withOverlay={true} />;
+
+  return (
+    <div className={styles.container}>
+      <Tile className={styles.tile}>
+        {/* Header */}
+        <div className={styles.headerRow}>
+          <h1 className={styles.heading}>
+            {t('samplecollectionRoomHeading', 'Sample Collection Room')}
+          </h1>
+          <div className={styles.locationBadge}>
+            <span className="icon-hospital" />
+            <span>{locationName}</span>
+          </div>
+        </div>
+
+        {/* Notifications */}
+        {errorMsg && (
+          <InlineNotification
+            kind="error"
+            title="Error"
+            subtitle={errorMsg}
+            onClose={() => setErrorMsg('')}
+            style={{ marginBottom: '1rem' }}
+          />
+        )}
+        {successMsg && (
+          <InlineNotification
+            kind="success"
+            title="Success"
+            subtitle={successMsg}
+            onClose={() => setSuccessMsg('')}
+            style={{ marginBottom: '1rem' }}
+          />
+        )}
+
+        {/* Patient Profile Card */}
+        <div className={styles.patientCard}>
+          <div className={styles.patientGrid}>
+            <div className={styles.patientField}>
+              <span className={styles.fieldLabel}>Full Name</span>
+              <span className={styles.fieldValue}>{patientName || 'N/A'}</span>
+            </div>
+            <div className={styles.patientField}>
+              <span className={styles.fieldLabel}>Section</span>
+              <span className={styles.fieldValue}>{initialSection || 'N/A'}</span>
+            </div>
+            <div className={styles.patientField}>
+              <span className={styles.fieldLabel}>PHN No</span>
+              <span className={styles.fieldValue}>{phnNo || 'N/A'}</span>
+            </div>
+            <div className={styles.patientField}>
+              <span className={styles.fieldLabel}>Age</span>
+              <span className={styles.fieldValue}>{patientAge ? `${patientAge} years` : 'N/A'}</span>
+            </div>
+            <div className={styles.patientField}>
+              <span className={styles.fieldLabel}>Gender</span>
+              <span className={styles.fieldValue}>{patientGender || 'N/A'}</span>
+            </div>
+          </div>
+          <div className={styles.avatarContainer}>
+            {profileImgName ? (
+              <img
+                src={`${window.location.origin}/openmrs/owa/PatientImagesUploaded/${profileImgName}`}
+                alt="Patient profile"
+                className={styles.avatarImg}
+                onError={(e) => {
+                  // Fallback if image not found
+                  (e.target as HTMLElement).style.display = 'none';
+                }}
+              />
+            ) : (
+              <UserAvatar />
+            )}
+          </div>
+        </div>
+
+        {/* Tests List Table */}
+        <div style={{ maxHeight: '250px', overflowY: 'auto', marginBottom: '2rem' }}>
+          <Table>
+            <TableHead>
+              <TableRow>
+                <TableHeader>No</TableHeader>
+                <TableHeader>Test Name</TableHeader>
+                <TableHeader>Order By</TableHeader>
+                <TableHeader>Order Date/Time</TableHeader>
+                <TableHeader className={styles.checkboxCell} />
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {testList.length === 0 ? (
+                <TableRow>
+                  <TableCell colSpan={5} style={{ textAlign: 'center' }}>
+                    No active tests pending collection.
+                  </TableCell>
+                </TableRow>
+              ) : (
+                testList.map((row, index) => {
+                  const id = row[8];
+                  const testName = row[2];
+                  const orderBy = row[5];
+                  const orderDateTime = row[6];
+                  const urgent = row[9]; // 'true' or 'false'
+                  const isChecked = selectedIds.includes(String(id));
+
+                  return (
+                    <TableRow key={id || index}>
+                      <TableCell>{index + 1}</TableCell>
+                      <TableCell>{testName}</TableCell>
+                      <TableCell>{orderBy}</TableCell>
+                      <TableCell>{orderDateTime}</TableCell>
+                      <TableCell className={styles.checkboxCell}>
+                        <Checkbox
+                          id={`chk-${id}`}
+                          labelText=""
+                          checked={isChecked}
+                          onChange={(e, { checked }) =>
+                            handleCheckboxChange(checked, String(id), testName, String(urgent), row)
+                          }
+                        />
+                      </TableCell>
+                    </TableRow>
+                  );
+                })
+              )}
+            </TableBody>
+          </Table>
+        </div>
+
+        {/* Detail Panel */}
+        <div className={styles.roomFormSection}>
+          <div className={styles.formGrid}>
+            <TextInput
+              id="txttestname"
+              labelText="Test Name"
+              value={displayTestNames}
+              readOnly
+            />
+            <TextInput
+              id="txtorderby"
+              labelText="Order By"
+              value={displayOrderBy}
+              readOnly
+            />
+            <TextInput
+              id="txtorderdate"
+              labelText="Order Date"
+              value={displayOrderDate}
+              readOnly
+            />
+            <TextInput
+              id="txtordertime"
+              labelText="Order Time"
+              value={displayOrderTime}
+              readOnly
+            />
+          </div>
+
+          <hr style={{ border: 'none', height: '1px', backgroundColor: '#e0e0e0', margin: '20px 0' }} />
+
+          {/* User inputs */}
+          <div className={styles.formGrid}>
+            <TextInput
+              id="txtdate"
+              labelText="Date"
+              type="date"
+              value={saveDate}
+              onChange={(e) => setSaveDate(e.target.value)}
+            />
+            <TextInput
+              id="txttime"
+              labelText="Time"
+              type="time"
+              value={saveTime}
+              onChange={(e) => setSaveTime(e.target.value)}
+            />
+            <Select
+              id="drpstatus"
+              labelText="Collection Status"
+              value={saveStatus}
+              onChange={(e) => setSaveStatus(e.target.value)}
+            >
+              <SelectItem value="0" text="--Select--" />
+              <SelectItem value="Done" text="Done" />
+              <SelectItem value="Not Done" text="Not Done" />
+            </Select>
+          </div>
+
+          <div style={{ marginBottom: '2rem' }}>
+            <TextArea
+              id="txtnote"
+              labelText="Remark"
+              rows={3}
+              value={saveRemark}
+              onChange={(e) => setSaveRemark(e.target.value)}
+            />
+          </div>
+
+          {/* Action buttons */}
+          <div className={styles.actionsContainer}>
+            <Button
+              kind="danger"
+              onClick={() => navigate('/samplecollection')}
+              disabled={saving}
+            >
+              Back
+            </Button>
+            <Button
+              kind="primary"
+              onClick={handleSave}
+              disabled={saving || testList.length === 0}
+            >
+              {saving ? 'Saving...' : 'Save'}
+            </Button>
+          </div>
+        </div>
+      </Tile>
+    </div>
+  );
+};
+
+export default SamplecollectionRoom;