@sasindi/samplecollection 1.0.1 → 1.0.2

package/src/samplecollectionroom.component.tsx

@@ -1,26 +1,9 @@
 import React, { useState, useEffect } from 'react';
 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' }}>
+  <svg width="60" height="60" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg" style={{ borderRadius: '16px', border: '3px solid #20e5bf' }}>
     <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"/>
@@ -419,223 +402,253 @@ const SamplecollectionRoom: React.FC = () => {
     }
   };
 
-  if (loading) return <Loading description="Loading page details..." withOverlay={true} />;
+  if (loading) {
+    return (
+      <div className={styles.container} style={{ textAlign: 'center', padding: '50px' }}>
+        Loading patient details...
+      </div>
+    );
+  }
 
   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>
+      {/* Clinic/Hospital Header */}
+      <div style={{ display: 'flex', justifyContent: 'flex-end', marginBottom: '10px' }}>
+        <div className={styles.locationBadge} style={{ background: '#e9ecef', color: '#495057' }}>
+          <span className="icon-hospital" />
+          <span id="lblInstituteName" style={{ fontWeight: 'bold' }}>{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 className={styles.card}>
+        <div className={styles.cardBody}>
+          
+          {/* Section title */}
+          <div className={styles.col12} style={{ marginBottom: '1rem', padding: 0 }}>
+            <h2 className={styles.heading} style={{ margin: 0 }}>
+              {t('samplecollectionRoomHeading', 'Sample Collection Room')}
+            </h2>
+          </div>
+
+          {/* Messages */}
+          {errorMsg && (
+            <div style={{ padding: '8px', color: '#721c24', backgroundColor: '#f8d7da', border: '1px solid #f5c6cb', borderRadius: '4px', marginBottom: '10px' }}>
+              {errorMsg}
             </div>
-            <div className={styles.patientField}>
-              <span className={styles.fieldLabel}>PHN No</span>
-              <span className={styles.fieldValue}>{phnNo || 'N/A'}</span>
+          )}
+          {successMsg && (
+            <div style={{ padding: '8px', color: '#155724', backgroundColor: '#d4edda', border: '1px solid #c3e6cb', borderRadius: '4px', marginBottom: '10px' }}>
+              {successMsg}
             </div>
-            <div className={styles.patientField}>
-              <span className={styles.fieldLabel}>Age</span>
-              <span className={styles.fieldValue}>{patientAge ? `${patientAge} years` : 'N/A'}</span>
+          )}
+
+          {/* Patient Card Grid (Col-10 fields, Col-2 avatar) */}
+          <div className={styles.row} style={{ marginBottom: '1.5rem' }}>
+            <div className={styles.col10}>
+              <div className={styles.row}>
+                
+                <div className={styles.formGroupCol}>
+                  <label className={styles.labelCompact}>Full Name</label>
+                  <input type="text" className={styles.formControl} value={patientName} readOnly />
+                </div>
+
+                <div className={styles.formGroupCol}>
+                  <label className={styles.labelCompact}>Section</label>
+                  <input type="text" className={styles.formControl} value={initialSection} readOnly />
+                </div>
+
+                <div className={styles.formGroupCol}>
+                  <label className={styles.labelCompact}>PHN No</label>
+                  <input type="text" className={styles.formControl} value={phnNo} readOnly />
+                </div>
+
+                <div className={styles.formGroupCol}>
+                  <label className={styles.labelCompact}>Age</label>
+                  <input type="text" className={styles.formControl} value={patientAge} readOnly />
+                </div>
+
+                <div className={styles.formGroupCol}>
+                  <label className={styles.labelCompact}>Gender</label>
+                  <input type="text" className={styles.formControl} value={patientGender} readOnly />
+                </div>
+
+              </div>
             </div>
-            <div className={styles.patientField}>
-              <span className={styles.fieldLabel}>Gender</span>
-              <span className={styles.fieldValue}>{patientGender || 'N/A'}</span>
+
+            <div className={styles.col2}>
+              <div className={styles.avatarContainer}>
+                {profileImgName ? (
+                  <img
+                    src={`${window.location.origin}/openmrs/owa/PatientImagesUploaded/${profileImgName}`}
+                    alt="Patient avatar"
+                    className={styles.uploadImg}
+                    onError={(e) => {
+                      (e.target as HTMLElement).style.display = 'none';
+                    }}
+                  />
+                ) : (
+                  <UserAvatar />
+                )}
+              </div>
             </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 />
-            )}
+
+          {/* Pending Tests Table */}
+          <div className={styles.tableResponsive} style={{ maxHeight: '200px', overflowY: 'auto', border: '1px solid #dee2e6', marginBottom: '1.5rem' }}>
+            <table className={`${styles.table} ${styles.tableBordered} ${styles.tableHover} ${styles.tableStriped}`}>
+              <thead>
+                <tr>
+                  <th style={{ width: '50px' }}>No</th>
+                  <th style={{ whiteSpace: 'nowrap' }}>Test Name</th>
+                  <th style={{ whiteSpace: 'nowrap' }}>Order By</th>
+                  <th style={{ whiteSpace: 'nowrap' }}>Order Date/Time</th>
+                  <th style={{ width: '40px' }}></th>
+                </tr>
+              </thead>
+              <tbody>
+                {testList.length === 0 ? (
+                  <tr>
+                    <td colSpan={5} style={{ textAlign: 'center', padding: '10px' }}>
+                      No active tests pending collection.
+                    </td>
+                  </tr>
+                ) : (
+                  testList.map((row, index) => {
+                    const id = row[8];
+                    const testName = row[2];
+                    const orderBy = row[5];
+                    const orderDateTime = row[6];
+                    const urgent = row[9];
+                    const isChecked = selectedIds.includes(String(id));
+
+                    return (
+                      <tr key={id || index}>
+                        <td>{index + 1}</td>
+                        <td>{testName}</td>
+                        <td>{orderBy}</td>
+                        <td>{orderDateTime}</td>
+                        <td style={{ textAlign: 'center' }}>
+                          <input
+                            type="checkbox"
+                            className={styles.formControl}
+                            style={{ width: '16px', height: '16px', margin: 0 }}
+                            checked={isChecked}
+                            onChange={(e) =>
+                              handleCheckboxChange(e.target.checked, String(id), testName, String(urgent), row)
+                            }
+                          />
+                        </td>
+                      </tr>
+                    );
+                  })
+                )}
+              </tbody>
+            </table>
           </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>
+          {/* Test Detail Display inputs */}
+          <div className={styles.row} style={{ marginBottom: '1rem' }}>
+            
+            <div className={styles.formGroupCol}>
+              <label className={styles.labelCompact}>Test Name</label>
+              <input type="text" className={styles.formControl} value={displayTestNames} readOnly />
+            </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>
+            <div className={styles.formGroupCol}>
+              <label className={styles.labelCompact}>Order By</label>
+              <input type="text" className={styles.formControl} value={displayOrderBy} readOnly />
+            </div>
+
+            <div className={styles.formGroupCol}>
+              <label className={styles.labelCompact}>Order Date</label>
+              <input type="text" className={styles.formControl} value={displayOrderDate} readOnly />
+            </div>
+
+            <div className={styles.formGroupCol}>
+              <label className={styles.labelCompact}>Order Time</label>
+              <input type="text" className={styles.formControl} 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)}
-            />
+          <hr style={{ border: 'none', height: '1px', backgroundColor: '#000', margin: '20px 0' }} />
+
+          {/* Date, Time, Status fields */}
+          <div className={styles.row} style={{ marginBottom: '1rem' }}>
+            
+            <div className={styles.formGroupCol}>
+              <label className={styles.labelCompact}>Date</label>
+              <input
+                type="date"
+                className={styles.formControl}
+                value={saveDate}
+                onChange={(e) => setSaveDate(e.target.value)}
+              />
+            </div>
+
+            <div className={styles.formGroupCol}>
+              <label className={styles.labelCompact}>Time</label>
+              <input
+                type="time"
+                className={styles.formControl}
+                value={saveTime}
+                onChange={(e) => setSaveTime(e.target.value)}
+              />
+            </div>
+
+            <div className={styles.formGroupCol}>
+              <label className={styles.labelCompact}>Collection Status</label>
+              <select
+                className={styles.formControl}
+                value={saveStatus}
+                onChange={(e) => setSaveStatus(e.target.value)}
+              >
+                <option value="0">--Select--</option>
+                <option value="Done">Done</option>
+                <option value="Not Done">Not Done</option>
+              </select>
+            </div>
+
           </div>
 
-          {/* Action buttons */}
-          <div className={styles.actionsContainer}>
-            <Button
-              kind="danger"
-              onClick={() => navigateTo('/openmrs/spa/samplecollection')}
-              disabled={saving}
-            >
-              Back
-            </Button>
-            <Button
-              kind="primary"
-              onClick={handleSave}
-              disabled={saving || testList.length === 0}
-            >
-              {saving ? 'Saving...' : 'Save'}
-            </Button>
+          {/* Remark text box and Action buttons row */}
+          <div className={styles.row}>
+            
+            <div className={styles.formGroupCol} style={{ flex: '0 0 66.6666%', maxWidth: '66.6666%', alignItems: 'flex-start' }}>
+              <label className={styles.labelCompact}>Remark</label>
+              <textarea
+                className={`${styles.formControl} ${styles.textareaControl}`}
+                rows={3}
+                value={saveRemark}
+                onChange={(e) => setSaveRemark(e.target.value)}
+              />
+            </div>
+
+            <div className={`${styles.formGroupCol} ${styles.justifyContentEnd}`} style={{ flex: '0 0 33.3333%', maxWidth: '33.3333%', alignSelf: 'flex-end' }}>
+              <button
+                type="button"
+                className={`${styles.btn} ${styles.btnSuccess} ${styles.mx2}`}
+                style={{ height: '40px', width: '100px' }}
+                disabled={saving || testList.length === 0}
+                onClick={handleSave}
+              >
+                {saving ? 'Saving...' : 'Save'}
+              </button>
+              <button
+                type="button"
+                className={`${styles.btn} ${styles.btnDanger}`}
+                style={{ height: '40px', width: '100px' }}
+                disabled={saving}
+                onClick={() => navigateTo('/openmrs/spa/samplecollection')}
+              >
+                Back
+              </button>
+            </div>
+
           </div>
+
         </div>
-      </Tile>
+      </div>
     </div>
   );
 };