KHP3 6317 adapt lab manifest UI to match design

packages/esm-lab-manifest-app/src/component/lab-manifest.component.tsx

@@ -8,7 +8,7 @@ const LabManifestComponent: React.FC = () => {
   const { t } = useTranslation();
   return (
     <div className={`omrs-main-content`}>
-      <LabManifestHeader title={t('labManifest', 'Lab Manifest')} />
+      <LabManifestHeader title={t('labManifestDashboard', 'Lab Manifest Dashboard')} />
       <LabManifestMetrics />
       <LabManifestsTable />
     </div>

packages/esm-lab-manifest-app/src/config-schema.ts

@@ -7,15 +7,15 @@ export const configSchema = {
     _default: [
       {
         id: 1,
-        type: 'EID Type',
+        type: 'EID',
       },
       {
         id: 2,
-        type: 'VL Type',
+        type: 'VL',
       },
       {
         id: 3,
-        type: 'FLU Type',
+        type: 'FLU',
       },
     ],
   },

packages/esm-lab-manifest-app/src/forms/active-order-selection-preview.tsx

@@ -0,0 +1,86 @@
+import React from 'react';
+
+import {
+  DataTable,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import styles from '../tables/lab-manifest-table.scss';
+import { ActiveRequestOrder } from '../types';
+
+interface ActiveOrdersSelectionPreviewProps {
+  orders?: Array<ActiveRequestOrder>;
+}
+
+const ActiveOrdersSelectionPreview: React.FC<ActiveOrdersSelectionPreviewProps> = ({ orders = [] }) => {
+  const { t } = useTranslation();
+
+  const headers = [
+    {
+      header: t('patientName', 'Patient name'),
+      key: 'patientName',
+    },
+    {
+      header: t('cccKDODNumber', 'CCC/KDOD Number'),
+      key: 'cccKdod',
+    },
+    {
+      header: t('dateRequested', 'Date Requested'),
+      key: 'dateRequested',
+    },
+  ];
+
+  const tableRows =
+    orders?.map((activeRequest) => {
+      return {
+        id: `${activeRequest.orderUuid}`,
+        patientName: activeRequest.patientName,
+        cccKdod: activeRequest.cccKdod,
+        dateRequested: activeRequest.dateRequested,
+      };
+    }) ?? [];
+  return (
+    <div className={styles.widgetContainer}>
+      <DataTable
+        useZebraStyles
+        size="sm"
+        rows={tableRows ?? []}
+        headers={headers}
+        render={({ rows, headers, getHeaderProps, getRowProps, getTableProps, getTableContainerProps }) => (
+          <>
+            <TableContainer {...getTableContainerProps()}>
+              <Table {...getTableProps()}>
+                <TableHead>
+                  <TableRow>
+                    {headers.map((header, i) => (
+                      <TableHeader key={i} {...getHeaderProps({ header })}>
+                        {header.header}
+                      </TableHeader>
+                    ))}
+                  </TableRow>
+                </TableHead>
+                <TableBody>
+                  {rows.map((row, i) => (
+                    <TableRow key={i} {...getRowProps({ row })} onClick={(evt) => {}}>
+                      {row.cells.map((cell) => (
+                        <TableCell key={cell.id}>{cell.value}</TableCell>
+                      ))}
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </TableContainer>
+          </>
+        )}
+      />
+    </div>
+  );
+};
+
+export default ActiveOrdersSelectionPreview;

packages/esm-lab-manifest-app/src/forms/lab-manifest-form.scss

@@ -121,3 +121,8 @@
     gap: spacing.$spacing-05;
   }
 }
+
+.previewContainer {
+  margin-top: spacing.$spacing-05;
+  margin-bottom: spacing.$spacing-05;
+}

packages/esm-lab-manifest-app/src/forms/lab-manifest-form.workspace.tsx

@@ -11,27 +11,31 @@ import {
 } from '@carbon/react';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { DefaultWorkspaceProps, parseDate, showSnackbar, useConfig, useLayoutType } from '@openmrs/esm-framework';
-import React, { useEffect } from 'react';
+import React from 'react';
 import { Controller, useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { z } from 'zod';
-import { LabManifestFilters, labManifestFormSchema, saveLabManifest } from '../lab-manifest.resources';
-import styles from './lab-manifest-form.scss';
-import { County, MappedLabManifest } from '../types';
-import { mutate } from 'swr';
 import { LabManifestConfig } from '../config-schema';
+import {
+  LabManifestFilters,
+  labManifestFormSchema,
+  mutateManifestLinks,
+  saveLabManifest,
+} from '../lab-manifest.resources';
+import { County, MappedLabManifest } from '../types';
+import styles from './lab-manifest-form.scss';
 interface LabManifestFormProps extends DefaultWorkspaceProps {
   patientUuid: string;
   manifest?: MappedLabManifest;
 }
 
-type ContactListFormType = z.infer<typeof labManifestFormSchema>;
+type LabManifestFormType = z.infer<typeof labManifestFormSchema>;
 
 const LabManifestForm: React.FC<LabManifestFormProps> = ({ closeWorkspace, manifest }) => {
   const { labmanifestTypes } = useConfig<LabManifestConfig>();
   const counties = require('../counties.json') as County[];
 
-  const form = useForm<ContactListFormType>({
+  const form = useForm<LabManifestFormType>({
     defaultValues: {
       ...manifest,
       manifestType: manifest?.manifestType ? Number(manifest.manifestType) : undefined,
@@ -45,18 +49,10 @@ const LabManifestForm: React.FC<LabManifestFormProps> = ({ closeWorkspace, manif
   const observableSelectedCounty = form.watch('county');
   const layout = useLayoutType();
   const controlSize = layout === 'tablet' ? 'xl' : 'sm';
-  const onSubmit = async (values: ContactListFormType) => {
+  const onSubmit = async (values: LabManifestFormType) => {
     try {
       await saveLabManifest(values, manifest?.uuid);
-      const mutateLinks = [
-        `/ws/rest/v1/labmanifest?v=full&status=${values.manifestStatus}`,
-        `/ws/rest/v1/kemrorder/validorders?manifestUuid=${manifest?.uuid}`,
-        `/ws/rest/v1/labmanifest/${manifest?.uuid}`,
-      ];
-      mutate((key) => {
-        return typeof key === 'string' && mutateLinks.some((link) => key.startsWith(link));
-      });
-
+      mutateManifestLinks(manifest?.uuid, values?.manifestStatus);
       closeWorkspace();
       showSnackbar({ title: 'Success', kind: 'success', subtitle: 'Lab manifest created successfully!' });
     } catch (error) {
@@ -73,10 +69,11 @@ const LabManifestForm: React.FC<LabManifestFormProps> = ({ closeWorkspace, manif
             name="startDate"
             render={({ field }) => (
               <DatePicker
+                value={field.value}
+                onChange={field.onChange}
                 dateFormat="d/m/Y"
                 id="startDate"
                 datePickerType="single"
-                {...field}
                 invalid={form.formState.errors[field.name]?.message}
                 invalidText={form.formState.errors[field.name]?.message}>
                 <DatePickerInput
@@ -96,10 +93,11 @@ const LabManifestForm: React.FC<LabManifestFormProps> = ({ closeWorkspace, manif
             name="endDate"
             render={({ field }) => (
               <DatePicker
+                value={field.value}
+                onChange={field.onChange}
                 dateFormat="d/m/Y"
                 id="endDate"
                 datePickerType="single"
-                {...field}
                 invalid={form.formState.errors[field.name]?.message}
                 invalidText={form.formState.errors[field.name]?.message}>
                 <DatePickerInput
@@ -137,7 +135,6 @@ const LabManifestForm: React.FC<LabManifestFormProps> = ({ closeWorkspace, manif
           />
         </Column>
         <span className={styles.sectionHeader}>Dispatch status</span>
-
         <Column>
           <Controller
             control={form.control}
@@ -347,7 +344,7 @@ const LabManifestForm: React.FC<LabManifestFormProps> = ({ closeWorkspace, manif
         <Button className={styles.button} kind="secondary" onClick={closeWorkspace}>
           {t('discard', 'Discard')}
         </Button>
-        <Button className={styles.button} kind="primary" type="submit" disabled={form.formState.isSubmitting}>
+        <Button className={styles.button} kind="primary" disabled={form.formState.isSubmitting} type="submit">
           {t('submit', 'Submit')}
         </Button>
       </ButtonSet>

packages/esm-lab-manifest-app/src/forms/lab-manifest-orders-to-manifest.modal.tsx

@@ -19,14 +19,21 @@ import { Controller, useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { mutate } from 'swr';
 import { z } from 'zod';
-import { addOrderToManifest, labManifestOrderToManifestFormSchema, sampleTypes } from '../lab-manifest.resources';
-import styles from './lab-manifest-form.scss';
 import { useLabManifest } from '../hooks';
+import {
+  addOrderToManifest,
+  labManifestOrderToManifestFormSchema,
+  mutateManifestLinks,
+  sampleTypes,
+} from '../lab-manifest.resources';
+import { ActiveRequestOrder } from '../types';
+import ActiveOrdersSelectionPreview from './active-order-selection-preview';
+import styles from './lab-manifest-form.scss';
 
 interface LabManifestOrdersToManifestFormProps {
   onClose: () => void;
   props: {
-    title?: string;
+    orders?: Array<ActiveRequestOrder>;
     selectedOrders: Array<{
       labManifest: {
         uuid: string;
@@ -43,7 +50,7 @@ type OrderToManifestFormType = z.infer<typeof labManifestOrderToManifestFormSche
 
 const LabManifestOrdersToManifestForm: React.FC<LabManifestOrdersToManifestFormProps> = ({
   onClose,
-  props: { title, selectedOrders },
+  props: { selectedOrders, orders },
 }) => {
   const { t } = useTranslation();
   const form = useForm<OrderToManifestFormType>({
@@ -64,14 +71,7 @@ const LabManifestOrdersToManifestForm: React.FC<LabManifestOrdersToManifestFormP
           showSnackbar({ title: 'Failure', kind: 'error', subtitle: 'Error adding order to the manifest' });
         }
       });
-      const mutateLinks = [
-        `/ws/rest/v1/labmanifest?v=full&status=${manifest.manifestStatus}`,
-        `/ws/rest/v1/kemrorder/validorders?manifestUuid=${manifest?.uuid}`,
-        `/ws/rest/v1/labmanifest/${manifest?.uuid}`,
-      ];
-      mutate((key) => {
-        return typeof key === 'string' && mutateLinks.some((link) => key.startsWith(link));
-      });
+      mutateManifestLinks(manifest?.uuid, manifest?.manifestStatus);
       onClose();
     } catch (error) {
       showSnackbar({ title: 'Failure', kind: 'error', subtitle: 'Error adding orders to the manifest' });
@@ -82,7 +82,7 @@ const LabManifestOrdersToManifestForm: React.FC<LabManifestOrdersToManifestFormP
     <React.Fragment>
       <Form onSubmit={form.handleSubmit(onSubmit)}>
         <ModalHeader closeModal={onClose} className={styles.heading}>
-          {title ?? t('updateSampleDetails', 'Update Sample Details')}
+          {t('updateSampleDetails', 'Update Sample Details')}
         </ModalHeader>
         <ModalBody>
           <Stack gap={4} className={styles.grid}>
@@ -154,16 +154,19 @@ const LabManifestOrdersToManifestForm: React.FC<LabManifestOrdersToManifestFormP
                 />
               </Column>
             </Row>
+            <div className={styles.previewContainer}>
+              <ActiveOrdersSelectionPreview orders={orders} />
+            </div>
           </Stack>
         </ModalBody>
         <ModalFooter>
           <ButtonSet className={styles.buttonSet}>
-            <Button className={styles.button} kind="primary" disabled={form.formState.isSubmitting} type="submit">
-              Submit
-            </Button>
             <Button className={styles.button} kind="secondary" onClick={onClose}>
               Cancel
             </Button>
+            <Button className={styles.button} kind="primary" disabled={form.formState.isSubmitting} type="submit">
+              Add Samples
+            </Button>
           </ButtonSet>
         </ModalFooter>
       </Form>