@sasindi/samplecollection 1.0.0

package/src/samplecollection.component.tsx

@@ -0,0 +1,280 @@
+import React, { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+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 Samplecollection: React.FC = () => {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+
+  // State variables
+  const [locationUuid, setLocationUuid] = useState<string>('');
+  const [locationName, setLocationName] = useState<string>('Loading location...');
+  const [wardSections, setWardSections] = useState<string[]>([]);
+  const [sectionFilter, setSectionFilter] = useState<string>('ALL');
+  const [searchQuery, setSearchQuery] = useState<string>('');
+  const [data, setData] = useState<any[]>([]);
+  const [loading, setLoading] = useState<boolean>(true);
+  
+  // Pagination state
+  const [page, setPage] = useState<number>(1);
+  const [pageSize, setPageSize] = useState<number>(50);
+  const [totalRecords, setTotalRecords] = useState<number>(0);
+  const [filteredRecords, setFilteredRecords] = useState<number>(0);
+
+  // Load 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;
+
+        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 locUuid = '';
+        if (personData.attributes) {
+          personData.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
+          const locRes = await fetch(`/openmrs/ws/rest/v1/location/${locUuid}`);
+          if (locRes.ok) {
+            const locData = await locRes.json();
+            setLocationName(locData.display || 'OpenMRS Clinic');
+          }
+
+          // Load Ward Sections
+          const wardRes = await fetch(`/openmrs/ws/rest/v1/samplecollection/getwardsections/${locUuid}`);
+          if (wardRes.ok) {
+            const wardData = await wardRes.json();
+            const sections = (wardData.wardSections || []).map((name: string) => name.split('@@')[0]);
+            setWardSections(sections);
+          }
+        } else {
+          setLocationName('No clinic location assigned');
+          setLoading(false);
+        }
+      } catch (err) {
+        console.error('Error during context initialization:', err);
+        setLocationName('Error loading location');
+        setLoading(false);
+      }
+    }
+
+    initSession();
+  }, []);
+
+  // Fetch serverside table data when location, filter, search, page or pageSize changes
+  useEffect(() => {
+    if (!locationUuid) return;
+
+    async function fetchTableData() {
+      setLoading(true);
+      try {
+        const start = (page - 1) * pageSize;
+        const searchVal = encodeURIComponent(searchQuery);
+        const sectionVal = encodeURIComponent(sectionFilter);
+        
+        const url = `/openmrs/ws/rest/v1/samplecollection/loadtable/serverside/${locationUuid}?draw=${page}&start=${start}&length=${pageSize}&search[value]=${searchVal}&section=${sectionVal}`;
+        const response = await fetch(url);
+        if (!response.ok) throw new Error('Failed to load table data');
+        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);
+      } finally {
+        setLoading(false);
+      }
+    }
+
+    // Debounce data fetching slightly if search query is changing rapidly
+    const delayDebounceFn = setTimeout(() => {
+      fetchTableData();
+    }, 300);
+
+    return () => clearTimeout(delayDebounceFn);
+  }, [locationUuid, sectionFilter, searchQuery, page, pageSize]);
+
+  const handleSelectPatient = (phnNo: string, section: string, progress: string) => {
+    localStorage.setItem('phnNo', phnNo);
+    localStorage.setItem('section', section);
+    localStorage.setItem('progress', progress || '');
+    navigate('/samplecollection/room');
+  };
+
+  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>
+        </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>
+
+          <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>
+
+        {/* Loading Indicator */}
+        {loading && <Loading description="Loading data..." withOverlay={false} />}
+
+        {/* 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;
+
+                  let trClass = '';
+                  if (specimenStatus === 'Inadequate') {
+                    trClass = styles.rowInadequate;
+                  } else if (specimenStatus === 'Error') {
+                    trClass = 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>
+
+        {/* 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>
+    </div>
+  );
+};
+
+export default Samplecollection;

package/src/samplecollection.scss

@@ -0,0 +1,163 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+
+.container {
+  padding: layout.$spacing-06;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.tile {
+  padding: layout.$spacing-06;
+  margin-bottom: layout.$spacing-05;
+  background: var(--cds-layer-01, #ffffff);
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+  border: 1px solid var(--cds-border-subtle-01, #e0e0e0);
+}
+
+.headerRow {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: layout.$spacing-06;
+  border-bottom: 1px solid var(--cds-border-subtle-01, #e0e0e0);
+  padding-bottom: layout.$spacing-04;
+}
+
+.heading {
+  @include type.type-style('heading-04');
+  color: #009384;
+  margin: 0;
+  font-weight: 600;
+}
+
+.locationBadge {
+  display: flex;
+  align-items: center;
+  gap: layout.$spacing-03;
+  font-weight: 600;
+  color: var(--cds-text-secondary, #525252);
+  background: var(--cds-layer-02, #f4f4f4);
+  padding: layout.$spacing-02 layout.$spacing-04;
+  border-radius: 16px;
+  font-size: 14px;
+}
+
+.filterRow {
+  display: flex;
+  gap: layout.$spacing-05;
+  align-items: flex-end;
+  margin-bottom: layout.$spacing-05;
+  flex-wrap: wrap;
+}
+
+.tableContainer {
+  margin-top: layout.$spacing-05;
+  margin-bottom: layout.$spacing-05;
+}
+
+.rowInadequate {
+  background-color: #fff3cd !important;
+  transition: background-color 0.2s ease;
+  &:hover {
+    background-color: #ffeeb5 !important;
+  }
+}
+
+.rowError {
+  background-color: #f8d7da !important;
+  transition: background-color 0.2s ease;
+  &:hover {
+    background-color: #f5c2c7 !important;
+  }
+}
+
+/* Patient Card Info for Room view */
+.patientCard {
+  display: grid;
+  grid-template-columns: 1fr 120px;
+  gap: layout.$spacing-05;
+  align-items: center;
+  background: var(--cds-layer-01, #ffffff);
+  padding: layout.$spacing-05;
+  border-radius: 8px;
+  border: 1px solid var(--cds-border-subtle-01, #e0e0e0);
+  margin-bottom: layout.$spacing-05;
+
+  @media (max-width: 768px) {
+    grid-template-columns: 1fr;
+  }
+}
+
+.patientGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  gap: layout.$spacing-05;
+}
+
+.patientField {
+  display: flex;
+  flex-direction: column;
+  gap: layout.$spacing-02;
+}
+
+.fieldLabel {
+  font-size: 12px;
+  color: var(--cds-text-helper, #6f6f6f);
+  text-transform: uppercase;
+  font-weight: 600;
+}
+
+.fieldValue {
+  font-size: 16px;
+  color: var(--cds-text-primary, #161616);
+  font-weight: 500;
+}
+
+.avatarContainer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.avatarImg {
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
+  object-fit: cover;
+  border: 3px solid #009384;
+}
+
+.roomFormSection {
+  margin-top: layout.$spacing-06;
+  border-top: 1px solid var(--cds-border-subtle-01, #e0e0e0);
+  padding-top: layout.$spacing-06;
+}
+
+.formGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+  gap: layout.$spacing-06;
+  margin-bottom: layout.$spacing-06;
+}
+
+.actionsContainer {
+  display: flex;
+  justify-content: flex-end;
+  gap: layout.$spacing-04;
+  margin-top: layout.$spacing-06;
+}
+
+.paginationContainer {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: layout.$spacing-05;
+  margin-top: layout.$spacing-04;
+}
+
+.checkboxCell {
+  width: 48px;
+  text-align: center;
+}