@kenyaemr/esm-lab-manifest-app 5.2.1-pre.821

package/src/tables/lab-manifest-samples.component.tsx

@@ -0,0 +1,164 @@
+import {
+  Button,
+  DataTable,
+  DataTableSkeleton,
+  Pagination,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@carbon/react';
+import { TrashCan, View } from '@carbon/react/icons';
+import { ErrorState, formatDate, navigate, parseDate, useLayoutType, usePagination } from '@openmrs/esm-framework';
+import { CardHeader, EmptyState, usePaginationInfo } from '@openmrs/esm-patient-common-lib';
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import styles from './lab-manifest-table.scss';
+import { useLabManifest } from '../hooks';
+import { LabManifestSample } from '../types';
+
+interface LabManifestSamplesProps {
+  manifestUuid: string;
+}
+
+const LabManifestSamples: React.FC<LabManifestSamplesProps> = ({ manifestUuid }) => {
+  const { error, isLoading, manifest } = useLabManifest(manifestUuid);
+  const samples = manifest?.samples ?? [];
+  const { t } = useTranslation();
+  const [pageSize, setPageSize] = useState(10);
+  const headerTitle = t('labManifestSamples', 'Lab Manifest Samples');
+  const { results, totalPages, currentPage, goTo } = usePagination(samples, pageSize);
+  const { pageSizes } = usePaginationInfo(pageSize, totalPages, currentPage, results.length);
+
+  const headers = [
+    {
+      header: t('patient', 'Patient'),
+      key: 'cccKDODNumber',
+    },
+    {
+      header: t('batchNumber', 'Batch Number'),
+      key: 'batchNumber',
+    },
+    {
+      header: t('sampleType', 'Sample type'),
+      key: 'sampleType',
+    },
+    {
+      header: t('status', 'Status'),
+      key: 'status',
+    },
+    {
+      header: t('dateRequested', 'Date Requested'),
+      key: 'dateRequested',
+    },
+    {
+      header: t('resultDate', 'Result Date'),
+      key: 'resultDate',
+    },
+    {
+      header: t('result', 'Result'),
+      key: 'result',
+    },
+    {
+      header: t('actions', 'Actions'),
+      key: 'actions',
+    },
+  ];
+
+  const handleDeleteManifestSample = (manifestUuid: string) => {
+    // TODO Implement delete logic when endpoint is a ready
+  };
+
+  const tableRows =
+    (results as LabManifestSample[])?.map((sample) => {
+      return {
+        id: `${sample.uuid}`,
+        sampleType: sample.sampleType ?? '--',
+        status: sample.status,
+        batchNumber: sample.batchNumber ?? '--',
+        cccKDODNumber: sample?.order?.patient?.identifiers[0]?.identifier ?? '--',
+        dateRequested: sample.dateSent ? formatDate(parseDate(sample.dateSent)) : '--',
+        resultDate: sample.resultDate ? formatDate(parseDate(sample.resultDate)) : '--',
+        result: sample.result ?? '--',
+        actions: (
+          <Button
+            renderIcon={TrashCan}
+            hasIconOnly
+            kind="tertiary"
+            iconDescription={t('removeFromManifest', 'Remove from Manifest')}
+            onClick={() => handleDeleteManifestSample(sample.uuid)}
+          />
+        ),
+      };
+    }) ?? [];
+
+  if (isLoading) {
+    return <DataTableSkeleton rowCount={5} />;
+  }
+  if (error) {
+    return <ErrorState headerTitle={headerTitle} error={error} />;
+  }
+
+  if (samples.length === 0) {
+    return (
+      <EmptyState
+        headerTitle={t('manifestSamples', 'Manifest Samples')}
+        displayText={t('notLabManifetToDisplay', 'There is no lab manifets data to display.')}
+      />
+    );
+  }
+  return (
+    <div className={styles.widgetContainer}>
+      <CardHeader title={headerTitle}>{''}</CardHeader>
+      <DataTable
+        useZebraStyles
+        size="sm"
+        rows={tableRows ?? []}
+        headers={headers}
+        render={({ rows, headers, getHeaderProps, getTableProps, getTableContainerProps }) => (
+          <TableContainer {...getTableContainerProps()}>
+            <Table {...getTableProps()}>
+              <TableHead>
+                <TableRow>
+                  {headers.map((header) => (
+                    <TableHeader
+                      {...getHeaderProps({
+                        header,
+                        isSortable: header.isSortable,
+                      })}>
+                      {header.header?.content ?? header.header}
+                    </TableHeader>
+                  ))}
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {rows.map((row) => (
+                  <TableRow key={row.id}>
+                    {row.cells.map((cell) => (
+                      <TableCell key={cell.id}>{cell.value}</TableCell>
+                    ))}
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </TableContainer>
+        )}
+      />
+      <Pagination
+        page={currentPage}
+        pageSize={pageSize}
+        pageSizes={pageSizes}
+        totalItems={samples.length}
+        onChange={({ page, pageSize }) => {
+          goTo(page);
+          setPageSize(pageSize);
+        }}
+      />
+    </div>
+  );
+};
+
+export default LabManifestSamples;

package/src/tables/lab-manifest-table.component.tsx

@@ -0,0 +1,214 @@
+import {
+  Button,
+  DataTable,
+  DataTableSkeleton,
+  Dropdown,
+  Layer,
+  Pagination,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Tile,
+} from '@carbon/react';
+import { View } from '@carbon/react/icons';
+import {
+  ErrorState,
+  formatDate,
+  isDesktop,
+  navigate,
+  parseDate,
+  useLayoutType,
+  usePagination,
+} from '@openmrs/esm-framework';
+import { CardHeader, EmptyDataIllustration, usePaginationInfo } from '@openmrs/esm-patient-common-lib';
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useLabManifests } from '../hooks';
+import { LabManifestFilters } from '../lab-manifest.resources';
+import styles from './lab-manifest-table.scss';
+
+const LabManifestsTable = () => {
+  const { t } = useTranslation();
+  const [pageSize, setPageSize] = useState(10);
+  const [currFilter, setCurrFilter] = useState('Draft');
+  const headerTitle = t('lab Manifest', 'Lab Manifest');
+  const layout = useLayoutType();
+  const { manifests, error, isLoading } = useLabManifests(currFilter);
+  const { results, totalPages, currentPage, goTo } = usePagination(manifests, pageSize);
+  const { pageSizes } = usePaginationInfo(pageSize, totalPages, currentPage, results.length);
+
+  const headers = [
+    {
+      header: t('startDate', 'Start date'),
+      key: 'startDate',
+    },
+    {
+      header: t('endDate', 'End Date'),
+      key: 'endDate',
+    },
+    {
+      header: t('type', 'Type'),
+      key: 'type',
+    },
+    {
+      header: t('courrier', 'Courrier'),
+      key: 'courrier',
+    },
+    {
+      header: t('manifestId', 'Manifest Id'),
+      key: 'manifestId',
+    },
+    {
+      header: t('labPersonContact', 'Lab person Contact'),
+      key: 'labPersonContact',
+    },
+    {
+      header: t('status', 'Status'),
+      key: 'status',
+    },
+    {
+      header: t('dispatch', 'Dispatch'),
+      key: 'dispatch',
+    },
+    {
+      header: t('samples', 'Samples'),
+      key: 'samples',
+    },
+    {
+      header: t('actions', 'Actions'),
+      key: 'actions',
+    },
+  ];
+
+  const handleViewManifestSamples = (manifestUuid: string) => {
+    navigate({ to: window.getOpenmrsSpaBase() + `home/lab-manifest/${manifestUuid}` });
+  };
+
+  const tableRows =
+    results?.map((manifest) => {
+      return {
+        id: `${manifest.uuid}`,
+        startDate: manifest.startDate ? formatDate(parseDate(manifest.startDate)) : '--',
+        endDate: manifest.endDate ? formatDate(parseDate(manifest.endDate)) : '--',
+        courrier: manifest.courierName ? manifest.courierName : '--',
+        labPersonContact: manifest.labPersonContact ?? '--',
+        type: manifest.manifestType ?? '--',
+        status: manifest.manifestStatus ?? '--',
+        dispatch: manifest.dispatchDate ? formatDate(parseDate(manifest.dispatchDate)) : '--',
+        manifestId: manifest.manifestId ?? '--',
+        samples: `${manifest.samples.length}`,
+        actions: (
+          <Button
+            renderIcon={View}
+            hasIconOnly
+            kind="tertiary"
+            iconDescription={t('view', 'View')}
+            onClick={() => handleViewManifestSamples(manifest.uuid)}
+          />
+        ),
+      };
+    }) ?? [];
+
+  if (isLoading) {
+    return <DataTableSkeleton rowCount={5} />;
+  }
+  if (error) {
+    return <ErrorState headerTitle={headerTitle} error={error} />;
+  }
+
+  if (manifests.length === 0) {
+    return (
+      <Layer>
+        <Tile className={styles.tile}>
+          <div className={!isDesktop(layout) ? styles.tabletHeading : styles.desktopHeading}>
+            <h4>{headerTitle}</h4>
+            <div style={{ padding: '10px' }}>
+              <Dropdown
+                style={{ minWidth: '300px' }}
+                id="manifestStatus"
+                onChange={({ selectedItem }) => {
+                  setCurrFilter(selectedItem);
+                }}
+                initialSelectedItem={currFilter}
+                label={t('selectManifestStatus', 'Select manifest status')}
+                items={LabManifestFilters.map((mn) => mn.value)}
+                itemToString={(item) => LabManifestFilters.find((lm) => lm.value === item)?.label ?? ''}
+              />
+            </div>
+          </div>
+          <EmptyDataIllustration />
+          <p className={styles.content}>{t('notLabManifetToDisplay', 'There is no lab manifets data to display.')}</p>
+        </Tile>
+      </Layer>
+    );
+  }
+  return (
+    <div className={styles.widgetContainer}>
+      <CardHeader title={headerTitle}>
+        <div style={{ padding: '10px' }}>
+          <Dropdown
+            style={{ minWidth: '300px' }}
+            id="manifestStatus"
+            onChange={({ selectedItem }) => {
+              setCurrFilter(selectedItem);
+            }}
+            initialSelectedItem={currFilter}
+            label={t('selectManifestStatus', 'Select manifest status')}
+            items={LabManifestFilters.map((mn) => mn.value)}
+            itemToString={(item) => LabManifestFilters.find((lm) => lm.value === item)?.label ?? ''}
+          />
+        </div>
+      </CardHeader>
+      <DataTable
+        useZebraStyles
+        size="sm"
+        rows={tableRows ?? []}
+        headers={headers}
+        render={({ rows, headers, getHeaderProps, getTableProps, getTableContainerProps }) => (
+          <TableContainer {...getTableContainerProps()}>
+            <Table {...getTableProps()}>
+              <TableHead>
+                <TableRow>
+                  {headers.map((header) => (
+                    <TableHeader
+                      {...getHeaderProps({
+                        header,
+                        isSortable: header.isSortable,
+                      })}>
+                      {header.header?.content ?? header.header}
+                    </TableHeader>
+                  ))}
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {rows.map((row) => (
+                  <TableRow key={row.id}>
+                    {row.cells.map((cell) => (
+                      <TableCell key={cell.id}>{cell.value}</TableCell>
+                    ))}
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </TableContainer>
+        )}
+      />
+      <Pagination
+        page={currentPage}
+        pageSize={pageSize}
+        pageSizes={pageSizes}
+        totalItems={manifests.length}
+        onChange={({ page, pageSize }) => {
+          goTo(page);
+          setPageSize(pageSize);
+        }}
+      />
+    </div>
+  );
+};
+
+export default LabManifestsTable;

package/src/tables/lab-manifest-table.scss

@@ -0,0 +1,49 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@carbon/styles/scss/spacing';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.widgetContainer {
+  background-color: colors.$white-0;
+  border: spacing.$spacing-01 solid colors.$gray-20;
+  margin-bottom: spacing.$spacing-02;
+}
+
+.widgetContainer :global(.cds--data-table) thead th button span {
+  height: unset !important;
+}
+
+.tile {
+  text-align: center;
+}
+
+.content {
+  @include type.type-style('heading-compact-01');
+  color: colors.$gray-70;
+  margin-top: layout.$layout-05;
+  margin-bottom: layout.$spacing-03;
+}
+
+.desktopHeading,
+.tabletHeading {
+  text-align: left;
+  text-transform: capitalize;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+
+  h4 {
+    @include type.type-style('heading-compact-02');
+    color: colors.$gray-70;
+
+    &:after {
+      content: '';
+      display: block;
+      width: spacing.$spacing-01;
+      padding-top: spacing.$spacing-03;
+      border-bottom: spacing.$spacing-01 solid;
+      @include brand-03(border-bottom-color);
+    }
+  }
+}

package/src/tabs/lab-manifest-tabs-component.tsx

@@ -0,0 +1,33 @@
+import { Tab, TabList, TabPanel, TabPanels, Tabs } from '@carbon/react';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import LabManifestActiveRequests from '../tables/lab-manifest-active-requests.component';
+import LabManifestSamples from '../tables/lab-manifest-samples.component';
+import styles from './lab-manifest-tabs.scss';
+
+interface LabManifestTabsProps {
+  manifestUuid: string;
+}
+
+export const LabManifestTabs: React.FC<LabManifestTabsProps> = ({ manifestUuid }) => {
+  const { t } = useTranslation();
+
+  return (
+    <main>
+      <Tabs className={styles.tabs}>
+        <TabList className={styles.tablist} aria-label="List tabs" contained>
+          <Tab className={styles.tab}>{t('manifestSamples', 'ManifestSamples')}</Tab>
+          <Tab className={styles.tab}>{t('activeRequests', 'Active Requests')}</Tab>
+        </TabList>
+        <TabPanels>
+          <TabPanel>
+            <LabManifestSamples manifestUuid={manifestUuid} />
+          </TabPanel>
+          <TabPanel>
+            <LabManifestActiveRequests manifestUuid={manifestUuid} />
+          </TabPanel>
+        </TabPanels>
+      </Tabs>
+    </main>
+  );
+};

package/src/tabs/lab-manifest-tabs.scss

@@ -0,0 +1,28 @@
+@use '@carbon/colors';
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.tabs {
+  grid-column: span 2;
+}
+
+.tablist {
+  padding: 0 spacing.$spacing-05;
+}
+
+.tab {
+  min-width: 8.875rem;
+
+  &:active {
+    outline: 2px solid var(--brand-03) !important;
+  }
+
+  &:focus {
+    outline: 2px solid var(--brand-03) !important;
+  }
+
+  &[aria-selected='true'] {
+    box-shadow: inset 0 2px 0 0 var(--brand-03) !important;
+  }
+}

package/src/types/index.ts

@@ -0,0 +1,75 @@
+export interface MappedLabManifest {
+  uuid: string;
+  startDate: string;
+  endDate: string;
+  manifestType?: string;
+  courierName?: string;
+  manifestId?: string;
+  labPersonContact?: string;
+  manifestStatus?: string;
+  dispatchDate: string;
+  clinicianContact?: string;
+  clinicianName?: string;
+  county?: string;
+  subCounty?: string;
+  facilityEmail?: string;
+  facilityPhoneContact?: string;
+  personHandedTo?: string;
+  samples: Array<LabManifestSample>;
+}
+
+export interface LabManifest {
+  uuid: string;
+  identifier?: string;
+  startDate: string;
+  endDate: string;
+  dispatchDate: string;
+  courier?: string;
+  courierOfficer?: string;
+  status?: string;
+  county?: string;
+  subCounty?: string;
+  facilityEmail?: string;
+  facilityPhoneContact?: string;
+  clinicianPhoneContact?: string;
+  clinicianName?: string;
+  labPocPhoneNumber?: string;
+  manifestType?: number;
+  labManifestOrders: Array<LabManifestSample>;
+}
+
+export interface Order {
+  patient: {
+    id: number;
+    uuid: string;
+    identifiers: Array<{ identifier: string; uuid: string }>;
+  };
+}
+
+export interface LabManifestSample {
+  uuid: string;
+  id: number;
+  sampleType: string;
+  status: string;
+  result: string;
+  batchNumber: string;
+  dateSent: string;
+  resultDate: string;
+  order: Order;
+}
+
+export interface ActiveRequests {
+  uuid: string;
+}
+
+export interface Constiuency {
+  name: string;
+  code: string;
+}
+
+export interface County {
+  name: string;
+  number: string;
+  capital: string;
+  constituencies: Array<Constiuency>;
+}

package/translations/en.json

@@ -0,0 +1,33 @@
+{
+  "actions": "Actions",
+  "activeRequests": "Active Requests",
+  "addNewManifest": "Add new Manifest",
+  "back": "Back",
+  "batchNumber": "Batch Number",
+  "cccKDODNumber": "CCC/KDOD Number",
+  "courrier": "Courrier",
+  "dateRequested": "Date Requested",
+  "dispatch": "Dispatch",
+  "editManifest": "Edit Manifest",
+  "endDate": "End Date",
+  "lab Manifest": "Lab Manifest",
+  "labManifest": "Lab manifest Management",
+  "labManifestSamples": "Lab Manifest Samples",
+  "labManifestSummary": "Lab Manifest Summary",
+  "labPersonContact": "Lab person Contact",
+  "manifestId": "Manifest Id",
+  "manifestSamples": "Manifest samples",
+  "notLabManifetToDisplay": "There is no lab manifets data to display.",
+  "patient": "Patient",
+  "patientName": "Patient name",
+  "removeFromManifest": "Remove from Manifest",
+  "result": "Result",
+  "resultDate": "Result Date",
+  "samples": "Samples",
+  "sampleType": "Sample type",
+  "selectManifestStatus": "Select manifest status",
+  "startDate": "Start date",
+  "status": "Status",
+  "type": "Type",
+  "view": "View"
+}

package/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "extends": "../../tsconfig.json",
+  "include": ["src/**/*"],
+  "exclude": ["src/**/*.test.tsx"]
+}

package/webpack.config.js

@@ -0,0 +1 @@
+module.exports = require('openmrs/default-webpack-config');