@sasindi/samplecollection 1.0.1 → 1.0.2

package/src/samplecollection.component.tsx

@@ -1,28 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
-import {
-  Tile,
-  Select,
-  SelectItem,
-  TextInput,
-  Table,
-  TableHead,
-  TableRow,
-  TableHeader,
-  TableBody,
-  TableCell,
-  Button,
-  Pagination,
-  Loading
-} from '@carbon/react';
 import styles from './samplecollection.scss';
 
-const SearchIcon = () => (
-  <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
-    <path d="M15 14.3l-3.3-3.3c.9-1.1 1.4-2.5 1.4-4 0-3.3-2.7-6-6-6S1.1 3.7 1.1 7s2.7 6 6 6c1.5 0 2.9-.5 4-1.4l3.3 3.3.6-.6zM7.1 12c-2.8 0-5-2.2-5-5s2.2-5 5-5 5 2.2 5 5-2.2 5-5 5z" />
-  </svg>
-);
-
 const navigateTo = (url: string) => {
   window.history.pushState({}, '', url);
   window.dispatchEvent(new PopStateEvent('popstate'));
@@ -42,8 +21,7 @@ const Samplecollection: React.FC = () => {
   
   // Pagination state
   const [page, setPage] = useState<number>(1);
-  const [pageSize, setPageSize] = useState<number>(50);
-  const [totalRecords, setTotalRecords] = useState<number>(0);
+  const [pageSize] = useState<number>(50);
   const [filteredRecords, setFilteredRecords] = useState<number>(0);
 
   // Load Session and Location context
@@ -119,7 +97,6 @@ const Samplecollection: React.FC = () => {
         const resData = await response.json();
         
         setData(resData.data || []);
-        setTotalRecords(resData.recordsTotal || 0);
         setFilteredRecords(resData.recordsFiltered || 0);
       } catch (err) {
         console.error('Error fetching table data:', err);
@@ -128,7 +105,6 @@ const Samplecollection: React.FC = () => {
       }
     }
 
-    // Debounce data fetching slightly if search query is changing rapidly
     const delayDebounceFn = setTimeout(() => {
       fetchTableData();
     }, 300);
@@ -143,139 +119,177 @@ const Samplecollection: React.FC = () => {
     navigateTo('/openmrs/spa/samplecollection/room');
   };
 
+  const startIndex = (page - 1) * pageSize;
+
   return (
     <div className={styles.container}>
-      <Tile className={styles.tile}>
-        {/* Header Section */}
-        <div className={styles.headerRow}>
-          <h1 className={styles.heading}>
-            {t('samplecollectionHeading', 'Sample Collection List')}
-          </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>
 
-        {/* Filter and Search controls */}
-        <div className={styles.filterRow}>
-          <Select
-            id="sectionFilter"
-            labelText={t('sectionLabel', 'Section')}
-            value={sectionFilter}
-            onChange={(e) => {
-              setSectionFilter(e.target.value);
-              setPage(1); // Reset page on filter change
-            }}
-            style={{ width: '200px' }}
-          >
-            <SelectItem value="ALL" text={t('allSections', 'All')} />
-            <SelectItem value="OPD" text="OPD" />
-            <SelectItem value="Clinic" text="Clinic" />
-            {wardSections.map((sect) => (
-              <SelectItem key={sect} value={sect} text={sect} />
-            ))}
-          </Select>
+      <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('samplecollectionHeading', 'Sample Collection List')}
+            </h2>
+          </div>
 
-          <TextInput
-            id="searchQuery"
-            labelText={t('searchLabel', 'Search (PHN, Name, Test)')}
-            placeholder={t('searchPlaceholder', 'Type to search...')}
-            value={searchQuery}
-            onChange={(e) => {
-              setSearchQuery(e.target.value);
-              setPage(1); // Reset page on search
-            }}
-          />
-        </div>
+          {/* Filters & Search Row */}
+          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1rem', flexWrap: 'wrap', gap: '10px' }}>
+            <div className={`${styles.dFlex} ${styles.alignItemsCenter}`}>
+              <label htmlFor="sectionFilter" className={styles.labelCompact} style={{ fontWeight: 'bold', width: 'auto', marginRight: '8px' }}>
+                Section:
+              </label>
+              <select
+                id="sectionFilter"
+                className={styles.formControl}
+                style={{ width: 'auto', minWidth: '160px', height: '30px' }}
+                value={sectionFilter}
+                onChange={(e) => {
+                  setSectionFilter(e.target.value);
+                  setPage(1);
+                }}
+              >
+                <option value="ALL">All</option>
+                <option value="OPD">OPD</option>
+                <option value="Clinic">Clinic</option>
+                {wardSections.map((sect) => (
+                  <option key={sect} value={sect}>{sect}</option>
+                ))}
+              </select>
+            </div>
 
-        {/* Loading Indicator */}
-        {loading && <Loading description="Loading data..." withOverlay={false} />}
+            <div className={`${styles.dFlex} ${styles.alignItemsCenter}`}>
+              <label htmlFor="searchQuery" className={styles.labelCompact} style={{ fontWeight: 'bold', width: 'auto', marginRight: '8px' }}>
+                Search:
+              </label>
+              <input
+                id="searchQuery"
+                type="text"
+                className={styles.formControl}
+                placeholder="Type search query..."
+                style={{ width: '220px', height: '30px' }}
+                value={searchQuery}
+                onChange={(e) => {
+                  setSearchQuery(e.target.value);
+                  setPage(1);
+                }}
+              />
+            </div>
+          </div>
 
-        {/* Main Table */}
-        <div className={styles.tableContainer}>
-          <Table>
-            <TableHead>
-              <TableRow>
-                <TableHeader>No</TableHeader>
-                <TableHeader>Section</TableHeader>
-                <TableHeader>PHN No</TableHeader>
-                <TableHeader>Name</TableHeader>
-                <TableHeader>Gender</TableHeader>
-                <TableHeader>Age</TableHeader>
-                <TableHeader>Test Name</TableHeader>
-                <TableHeader />
-              </TableRow>
-            </TableHead>
-            <TableBody>
-              {data.length === 0 ? (
-                <TableRow>
-                  <TableCell colSpan={8} style={{ textAlign: 'center', padding: '2rem' }}>
-                    {loading ? 'Fetching data...' : 'No sample collections found.'}
-                  </TableCell>
-                </TableRow>
-              ) : (
-                data.map((row, index) => {
-                  const phnNo = row[0];
-                  const patientName = row[1];
-                  const testName = row[2];
-                  const gender = row[3];
-                  const age = row[4];
-                  const section = row[7];
-                  const specimenStatus = row[8]; // 'Inadequate', 'Error'
-                  const progress = row[9];
-                  const rowIndex = (page - 1) * pageSize + index + 1;
+          {/* Table Container */}
+          <div className={styles.tableResponsive}>
+            <table className={`${styles.table} ${styles.tableBordered} ${styles.tableHover} ${styles.tableStriped}`}>
+              <thead>
+                <tr>
+                  <th style={{ width: '50px' }}>No</th>
+                  <th style={{ whiteSpace: 'nowrap' }}>Section</th>
+                  <th style={{ whiteSpace: 'nowrap' }}>PHN No</th>
+                  <th style={{ whiteSpace: 'nowrap' }}>Name</th>
+                  <th style={{ whiteSpace: 'nowrap' }}>Gender</th>
+                  <th style={{ whiteSpace: 'nowrap' }}>Age</th>
+                  <th style={{ whiteSpace: 'nowrap' }}>Test Name</th>
+                  <th style={{ width: '80px' }}></th>
+                </tr>
+              </thead>
+              <tbody>
+                {loading && data.length === 0 ? (
+                  <tr>
+                    <td colSpan={8} style={{ textAlign: 'center', padding: '20px' }}>
+                      Loading data...
+                    </td>
+                  </tr>
+                ) : data.length === 0 ? (
+                  <tr>
+                    <td colSpan={8} style={{ textAlign: 'center', padding: '20px' }}>
+                      No sample collections found.
+                    </td>
+                  </tr>
+                ) : (
+                  data.map((row, index) => {
+                    const phnNo = row[0];
+                    const patientName = row[1];
+                    const testName = row[2];
+                    const gender = row[3];
+                    const age = row[4];
+                    const section = row[7];
+                    const specimenStatus = row[8];
+                    const progress = row[9];
+                    const rowIndex = startIndex + index + 1;
 
-                  let trClass = '';
-                  if (specimenStatus === 'Inadequate') {
-                    trClass = styles.rowInadequate;
-                  } else if (specimenStatus === 'Error') {
-                    trClass = styles.rowError;
-                  }
+                    let rowClass = '';
+                    if (specimenStatus === 'Inadequate') {
+                      rowClass = styles.rowInadequate;
+                    } else if (specimenStatus === 'Error') {
+                      rowClass = styles.rowError;
+                    }
 
-                  return (
-                    <TableRow key={`${phnNo}-${section}-${index}`} className={trClass}>
-                      <TableCell>{rowIndex}</TableCell>
-                      <TableCell>{section}</TableCell>
-                      <TableCell>{phnNo}</TableCell>
-                      <TableCell>{patientName}</TableCell>
-                      <TableCell>{gender}</TableCell>
-                      <TableCell>{age}</TableCell>
-                      <TableCell>{testName}</TableCell>
-                      <TableCell>
-                        <Button
-                          kind="primary"
-                          size="sm"
-                          onClick={() => handleSelectPatient(phnNo, section, progress)}
-                        >
-                          {t('selectBtn', 'Select')}
-                        </Button>
-                      </TableCell>
-                    </TableRow>
-                  );
-                })
-              )}
-            </TableBody>
-          </Table>
-        </div>
+                    return (
+                      <tr key={`${phnNo}-${section}-${index}`} className={rowClass}>
+                        <td>{rowIndex}</td>
+                        <td>{section}</td>
+                        <td>{phnNo}</td>
+                        <td>{patientName}</td>
+                        <td>{gender}</td>
+                        <td>{age}</td>
+                        <td>{testName}</td>
+                        <td style={{ textAlign: 'center' }}>
+                          <button
+                            type="button"
+                            className={`${styles.btn} ${styles.btnPrimary}`}
+                            style={{ padding: '2px 8px', fontSize: '12px' }}
+                            onClick={() => handleSelectPatient(phnNo, section, progress)}
+                          >
+                            Select
+                          </button>
+                        </td>
+                      </tr>
+                    );
+                  })
+                )}
+              </tbody>
+            </table>
+          </div>
 
-        {/* Pagination */}
-        {filteredRecords > 0 && (
-          <Pagination
-            backwardText="Previous page"
-            forwardText="Next page"
-            itemsPerPageText="Items per page:"
-            onChange={({ page, pageSize }) => {
-              setPage(page);
-              setPageSize(pageSize);
-            }}
-            page={page}
-            pageSize={pageSize}
-            pageSizes={[10, 25, 50, 100]}
-            totalItems={filteredRecords}
-          />
-        )}
-      </Tile>
+          {/* Simple Bootstrap-like Pagination */}
+          {filteredRecords > 0 && (
+            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: '1rem', flexWrap: 'wrap' }}>
+              <div style={{ fontSize: '14px', color: '#6c757d' }}>
+                Showing {startIndex + 1} to {Math.min(startIndex + pageSize, filteredRecords)} of {filteredRecords} entries
+              </div>
+              <div style={{ display: 'flex', gap: '5px' }}>
+                <button
+                  type="button"
+                  className={`${styles.btn} ${styles.btnPrimary}`}
+                  style={{ padding: '4px 12px' }}
+                  disabled={page === 1}
+                  onClick={() => setPage((p) => p - 1)}
+                >
+                  Previous
+                </button>
+                <button
+                  type="button"
+                  className={`${styles.btn} ${styles.btnPrimary}`}
+                  style={{ padding: '4px 12px' }}
+                  disabled={page * pageSize >= filteredRecords}
+                  onClick={() => setPage((p) => p + 1)}
+                >
+                  Next
+                </button>
+              </div>
+            </div>
+          )}
+
+        </div>
+      </div>
     </div>
   );
 };