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

package/src/header/lab-manifest-illustration.component.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import styles from './lab-manifest-header.scss';
+import { ChemistryReference } from '@carbon/react/icons';
+
+const LabManifestIllustration: React.FC = () => {
+  return (
+    <div className={styles.svgContainer}>
+      <ChemistryReference className={styles.iconOverrides} />
+    </div>
+  );
+};
+
+export default LabManifestIllustration;

package/src/hooks/index.ts

@@ -0,0 +1,2 @@
+export { default as useLabManifests } from './useLabManifests';
+export { default as useLabManifest } from './useLabManifest';

package/src/hooks/useActiveRequests.ts

@@ -0,0 +1,26 @@
+import { restBaseUrl } from '@openmrs/esm-framework';
+import useSWR from 'swr';
+import { activeRequests } from '../lab-manifest.mock';
+import { ActiveRequests } from '../types';
+
+const mockeFetch = async (url: string) => {
+  const status = url.split('=').at(-1);
+  return await new Promise<Array<ActiveRequests>>((resolve, _) => {
+    setTimeout(() => {
+      resolve(activeRequests);
+    }, 3000);
+  });
+};
+
+const useActiveRequests = () => {
+  const url = `${restBaseUrl}/active-request`;
+  const { isLoading, error, data } = useSWR<Array<ActiveRequests>>(url, mockeFetch);
+
+  return {
+    isLoading,
+    requests: data ?? [],
+    error,
+  };
+};
+
+export default useActiveRequests;

package/src/hooks/useLabManifest.tsx

@@ -0,0 +1,17 @@
+import { FetchResponse, openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+import useSWR from 'swr';
+import { extractLabManifest } from '../lab-manifest.resources';
+import { LabManifest } from '../types';
+
+const useLabManifest = (manifestUuid: string) => {
+  const url = `${restBaseUrl}/labmanifest/${manifestUuid}`;
+  const { isLoading, error, data } = useSWR<FetchResponse<LabManifest>>(url, openmrsFetch);
+
+  return {
+    isLoading,
+    error,
+    manifest: data?.data ? extractLabManifest(data!.data!) : undefined,
+  };
+};
+
+export default useLabManifest;

package/src/hooks/useLabManifests.ts

@@ -0,0 +1,17 @@
+import { FetchResponse, openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+import useSWR from 'swr';
+import { extractLabManifest } from '../lab-manifest.resources';
+import { LabManifest } from '../types';
+
+const useLabManifests = (status: string) => {
+  const url = `${restBaseUrl}/labmanifest?v=full&status=${status}`;
+  const { isLoading, error, data } = useSWR<FetchResponse<{ results: Array<LabManifest> }>>(url, openmrsFetch);
+
+  return {
+    isLoading,
+    manifests: (data?.data?.results ?? []).map(extractLabManifest),
+    error,
+  };
+};
+
+export default useLabManifests;

package/src/index.ts

@@ -0,0 +1,36 @@
+import { getAsyncLifecycle, defineConfigSchema, getSyncLifecycle, registerBreadcrumbs } from '@openmrs/esm-framework';
+import { configSchema } from './config-schema';
+import { createLeftPanelLink } from './component/left-panel-link.component';
+
+const moduleName = '@kenyaemr/esm-lab-manifest-app';
+
+const options = {
+  featureName: 'esm-lab-manifest-app',
+  moduleName,
+};
+
+export const importTranslation = require.context('../translations', false, /.json$/, 'lazy');
+
+export function startupApp() {
+  const labManifestBasepath = `${window.spaBase}/home/lab-manifest`;
+
+  defineConfigSchema(moduleName, configSchema);
+  registerBreadcrumbs([
+    {
+      title: 'lab-manifest',
+      path: labManifestBasepath,
+      parent: `${window.spaBase}/home`,
+    },
+  ]);
+}
+
+export const root = getAsyncLifecycle(() => import('./root.component'), options);
+export const labManifestForm = getAsyncLifecycle(() => import('./forms/lab-manifest-form.workspace'), options);
+
+export const labManifestDashboardLink = getSyncLifecycle(
+  createLeftPanelLink({
+    name: 'lab-manifest',
+    title: 'Lab Manifest',
+  }),
+  options,
+);

package/src/lab-manifest.mock.ts

@@ -0,0 +1,5 @@
+import { ActiveRequests, MappedLabManifest, LabManifestSample } from './types';
+
+export const labManifestSamples: Array<LabManifestSample> = [];
+
+export const activeRequests: Array<ActiveRequests> = [];

package/src/lab-manifest.resources.ts

@@ -0,0 +1,108 @@
+import { generateOfflineUuid, openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+import { z } from 'zod';
+import { LabManifest, MappedLabManifest } from './types';
+
+export const LabManifestFilters = [
+  {
+    label: 'Draft',
+    value: 'Draft',
+  },
+  {
+    label: 'Ready To send',
+    value: 'Ready to send',
+  },
+  {
+    label: 'On Hold',
+    value: 'On Hold',
+  },
+  {
+    label: 'Sending',
+    value: 'Sending',
+  },
+  {
+    label: 'Submitted',
+    value: 'Submitted',
+  },
+  {
+    label: 'Incomplete with Errors',
+    value: 'Incomplete errors',
+  },
+  {
+    label: 'Incomplete With Results',
+    value: 'Incomplete results',
+  },
+  {
+    label: 'Complete with Errors',
+    value: 'Complete errors',
+  },
+  {
+    label: 'Complete with Results',
+    value: 'Complete results',
+  },
+];
+const PHONE_NUMBER_REGEX = /^(\+?254|0)((7|1)\d{8})$/;
+
+export const labManifestFormSchema = z.object({
+  startDate: z.date({ coerce: true }),
+  endDate: z.date({ coerce: true }),
+  manifestType: z.string(),
+  dispatchDate: z.date({ coerce: true }),
+  courierName: z.string().optional(),
+  personHandedTo: z.string().optional(),
+  county: z.string().optional(),
+  subCounty: z.string().optional(),
+  facilityEmail: z.string().email(),
+  facilityPhoneContact: z.string().regex(PHONE_NUMBER_REGEX, { message: 'Invalid phone number' }),
+  clinicianName: z.string(),
+  clinicianContact: z.string().regex(PHONE_NUMBER_REGEX, { message: 'Invalid phone number' }),
+  labPersonContact: z.string().regex(PHONE_NUMBER_REGEX, { message: 'Invalid phone number' }),
+  manifestStatus: z.string(),
+});
+
+export const manifestTypes = [
+  {
+    value: 'VL',
+    label: 'Viral load',
+  },
+];
+
+export const saveLabManifest = async (data: z.infer<typeof labManifestFormSchema>, manifestId: string | undefined) => {
+  let url;
+  const abortController = new AbortController();
+
+  if (!manifestId) {
+    url = `${restBaseUrl}/labmanifest`;
+  } else {
+    url = `${restBaseUrl}/labmanifest/${manifestId}`;
+  }
+
+  return openmrsFetch(url, {
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    method: 'POST',
+    body: JSON.stringify(data),
+    signal: abortController.signal,
+  });
+};
+
+export const extractLabManifest = (manifest: LabManifest) =>
+  ({
+    uuid: manifest.uuid,
+    dispatchDate: manifest.dispatchDate,
+    endDate: manifest.dispatchDate,
+    startDate: manifest.startDate,
+    clinicianContact: manifest.clinicianPhoneContact,
+    clinicianName: manifest.clinicianName,
+    county: manifest.county,
+    courierName: manifest.courier,
+    facilityEmail: manifest.facilityEmail,
+    facilityPhoneContact: manifest.facilityPhoneContact,
+    labPersonContact: manifest.labPocPhoneNumber,
+    manifestId: manifest.identifier,
+    manifestStatus: manifest.status,
+    // manifestType: manifest.manifestType,
+    personHandedTo: manifest.courierOfficer,
+    subCounty: manifest.subCounty,
+    samples: manifest.labManifestOrders ?? [],
+  } as MappedLabManifest);

package/src/metrics/lab-manifest-header.scss

@@ -0,0 +1,22 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.metricsContainer {
+  display: flex;
+  justify-content: space-between;
+  background-color: $ui-02;
+  height: spacing.$spacing-10;
+  align-items: center;
+  padding: 0 spacing.$spacing-05;
+}
+
+.metricsTitle {
+  @include type.type-style('heading-03');
+  color: $ui-05;
+}
+
+.actionBtn {
+  display: flex;
+  column-gap: 0.5rem;
+}

package/src/metrics/lab-manifest-metric-value.component.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { useLabManifests } from '../hooks';
+import { SkeletonText } from '@carbon/react';
+import styles from './lab-manifest-metrics.scss';
+
+interface LabManifestMetricValueProps {
+  status: string;
+}
+
+const LabManifestMetricValue: React.FC<LabManifestMetricValueProps> = ({ status }) => {
+  const { error, isLoading, manifests } = useLabManifests(status);
+  if (isLoading) {
+    return <SkeletonText className={styles.metricContainer} />;
+  }
+  if (error) {
+    return;
+  }
+  return (
+    <span>
+      <strong>{status}</strong>: {manifests.length}
+    </span>
+  );
+};
+
+export default LabManifestMetricValue;

package/src/metrics/lab-manifest-metrics-header.component.tsx

@@ -0,0 +1,34 @@
+import { Button } from '@carbon/react';
+import { ArrowRight } from '@carbon/react/icons';
+import { launchWorkspace } from '@openmrs/esm-framework';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import styles from './lab-manifest-header.scss';
+
+const MetricsHeader = () => {
+  const { t } = useTranslation();
+  const metricsTitle = t('labManifestSummary', 'Lab Manifest Summary');
+
+  const handleAddLabManifest = () => {
+    launchWorkspace('lab-manifest-form', {
+      workspaceTitle: 'Lab Manifest Form',
+    });
+  };
+
+  return (
+    <div className={styles.metricsContainer}>
+      <span className={styles.metricsTitle}>{metricsTitle}</span>
+      <div className={styles.actionBtn}>
+        <Button
+          kind="tertiary"
+          renderIcon={(props) => <ArrowRight size={16} {...props} />}
+          iconDescription={t('addNewManifest', 'Add new Manifest')}
+          onClick={handleAddLabManifest}>
+          {t('addNewManifest', 'Add new Manifest')}
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+export default MetricsHeader;

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

@@ -0,0 +1,27 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { LabManifestFilters } from '../lab-manifest.resources';
+import MetricsHeader from './lab-manifest-metrics-header.component';
+import styles from './lab-manifest-metrics.scss';
+import LabManifestMetricValue from './lab-manifest-metric-value.component';
+
+export interface Service {
+  uuid: string;
+  display: string;
+}
+
+function LabManifestMetrics() {
+  const { t } = useTranslation();
+  return (
+    <>
+      <MetricsHeader />
+      <div className={styles.cardContainer} data-testid="clinic-metrics">
+        {LabManifestFilters.map((f, index) => (
+          <LabManifestMetricValue status={f.value} />
+        ))}
+      </div>
+    </>
+  );
+}
+
+export default LabManifestMetrics;

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

@@ -0,0 +1,17 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/colors';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.cardContainer {
+  background-color: $color-gray-30;
+  display: flex;
+  justify-content: space-between;
+  padding: spacing.$spacing-05;
+  flex-flow: row wrap;
+  margin-top: spacing.$spacing-05;
+  gap: spacing.$spacing-05;
+}
+
+.metricContainer {
+  max-width: spacing.$spacing-13;
+}

package/src/root.component.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
+import LabManifestComponent from './component/lab-manifest.component';
+import LabManifestDetail from './component/lab-manifest-detail.component';
+
+const Root: React.FC = () => {
+  const baseName = window.getOpenmrsSpaBase() + 'home/lab-manifest';
+
+  return (
+    <BrowserRouter basename={baseName}>
+      <Routes>
+        <Route path="/" element={<LabManifestComponent />} />
+        <Route path="/:manifestUuid" element={<LabManifestDetail />} />
+      </Routes>
+    </BrowserRouter>
+  );
+};
+
+export default Root;

package/src/root.scss

@@ -0,0 +1,15 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+
+.container {
+  padding: spacing.$spacing-07;
+}
+
+.welcome {
+  @include type.type-style('heading-04');
+  margin: spacing.$spacing-05 0;
+}
+
+.explainer {
+  margin-bottom: 2rem;
+}

package/src/routes.json

@@ -0,0 +1,33 @@
+{
+  "$schema": "https://json.openmrs.org/routes.schema.json",
+  "backendDependencies": {
+    "webservices.rest": "^2.24.0"
+  },
+  "extensions": [
+    {
+      "component": "labManifestDashboardLink",
+      "name": "lab-manifest-dashboard-link",
+      "slot": "homepage-dashboard-slot",
+      "meta": {
+        "name": "lab-manifest",
+        "title": "lab-manifest",
+        "slot": "lab-manifest-dashboard-slot"
+      }
+    },
+    {
+      "name": "lab-manifest-form",
+      "component": "labManifestForm"
+    },
+    {
+      "component": "root",
+      "name": "lab-manifest-dashboard-root",
+      "slot": "lab-manifest-dashboard-slot"
+    }
+  ],
+  "pages": [
+    {
+      "component": "root",
+      "route": "lab-manifest"
+    }
+  ]
+}

package/src/setup-tests.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/extend-expect';

package/src/tables/lab-manifest-active-requests.component.tsx

@@ -0,0 +1,161 @@
+import {
+  Button,
+  DataTable,
+  DataTableSkeleton,
+  Pagination,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@carbon/react';
+import { View } from '@carbon/react/icons';
+import { ErrorState, navigate, 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 useActiveRequests from '../hooks/useActiveRequests';
+import { ActiveRequests } from '../types';
+
+interface LabManifestActiveRequestsProps {
+  manifestUuid: string;
+}
+
+const LabManifestActiveRequests: React.FC<LabManifestActiveRequestsProps> = ({ manifestUuid }) => {
+  const { error, isLoading, requests } = useActiveRequests();
+
+  const { t } = useTranslation();
+  const [pageSize, setPageSize] = useState(10);
+  const headerTitle = t('activeRequests', 'Active Requests');
+  const { results, totalPages, currentPage, goTo } = usePagination(requests, pageSize);
+  const { pageSizes } = usePaginationInfo(pageSize, totalPages, currentPage, results.length);
+
+  const headers = [
+    {
+      header: t('patientName', 'Patient name'),
+      key: 'startDate',
+    },
+    {
+      header: t('cccKDODNumber', 'CCC/KDOD Number'),
+      key: 'cccKDODNumber',
+    },
+    {
+      header: t('batchNumber', 'Batch Number'),
+      key: 'batchNumber',
+    },
+    {
+      header: t('sampleType', 'Sample type'),
+      key: 'sampleType',
+    },
+    {
+      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('actions', 'Actions'),
+      key: 'actions',
+    },
+  ];
+
+  const handleViewManifestSamples = (manifestUuid: string) => {
+    navigate({ to: window.getOpenmrsSpaBase() + `home/lab-manifest/${manifestUuid}` });
+  };
+
+  const tableRows =
+    (results as ActiveRequests[])?.map((activeRequest) => {
+      return {
+        id: `${activeRequest.uuid}`,
+        actions: (
+          <Button
+            renderIcon={View}
+            hasIconOnly
+            kind="tertiary"
+            iconDescription={t('view', 'View')}
+            onClick={() => handleViewManifestSamples(activeRequest.uuid)}
+          />
+        ),
+      };
+    }) ?? [];
+
+  if (isLoading) {
+    return <DataTableSkeleton rowCount={5} />;
+  }
+  if (error) {
+    return <ErrorState headerTitle={headerTitle} error={error} />;
+  }
+
+  if (requests.length === 0) {
+    return (
+      <EmptyState
+        headerTitle={t('activeRequests', 'Active Requests')}
+        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={requests.length}
+        onChange={({ page, pageSize }) => {
+          goTo(page);
+          setPageSize(pageSize);
+        }}
+      />
+    </div>
+  );
+};
+
+export default LabManifestActiveRequests;