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

package/src/declarations.d.ts

@@ -0,0 +1,6 @@
+declare module '@carbon/react';
+declare module '*.css';
+declare module '*.scss';
+declare module '*.png';
+
+declare type SideNavProps = object;

package/src/forms/lab-manifest-form.scss

@@ -0,0 +1,126 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@use '@carbon/layout';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.heading {
+  @include type.type-style('heading-compact-01');
+  margin: spacing.$spacing-05 0 spacing.$spacing-05;
+}
+
+.warningContainer {
+  background-color: $carbon--red-50;
+  padding: spacing.$spacing-04;
+  margin: spacing.$spacing-03 0 spacing.$spacing-03;
+  display: flex;
+  justify-content: space-between;
+  .warning {
+    @include type.type-style('heading-compact-01');
+    color: $ui-05;
+  }
+}
+
+.form {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  width: 50%;
+}
+
+.grid {
+  margin: 0 spacing.$spacing-05;
+  padding: 0rem;
+}
+
+.input {
+  margin-top: spacing.$spacing-05;
+}
+
+.inputRow {
+  margin-top: spacing.$spacing-05;
+  width: 50%; // Adjust width as per your design requirements
+}
+
+.datePickersRow {
+  display: flex;
+  flex-wrap: nowrap;
+  gap: spacing.$spacing-05; // Adjust gap between columns
+  align-items: center;
+}
+
+.datePickerInput {
+  width: 100%;
+}
+
+.button {
+  height: spacing.$spacing-10;
+  display: flex;
+  align-content: flex-start;
+  align-items: baseline;
+  min-width: 20%;
+}
+
+.buttonSet {
+  padding: 0rem;
+  margin-top: spacing.$spacing-05;
+  display: flex;
+  justify-content: flex-end;
+  gap: spacing.$spacing-05;
+  margin-bottom: spacing.$spacing-05;
+}
+.inlineActions {
+  display: flex;
+  gap: spacing.$spacing-05; /* Adjust the spacing as needed */
+}
+
+.contactFormTitle {
+  @include type.type-style('heading-02');
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: spacing.$spacing-05;
+  row-gap: 1.5rem;
+  position: relative;
+
+  &::after {
+    content: '';
+    display: block;
+    width: 2rem;
+    border-bottom: 0.375rem solid var(--brand-03);
+    position: absolute;
+    bottom: -0.75rem;
+    left: 0;
+  }
+
+  & > span {
+    @include type.type-style('body-01');
+  }
+}
+
+.sectionHeader {
+  @include type.type-style('heading-02');
+}
+
+:global(.omrs-breakpoint-lt-desktop) {
+  .form {
+    height: var(--tablet-workspace-window-height);
+  }
+
+  .buttonSet {
+    padding: spacing.$spacing-06 spacing.$spacing-05;
+    background-color: $ui-02;
+    justify-content: flex-end;
+    gap: spacing.$spacing-05;
+  }
+}
+
+/* New Styles for Facility and Visit Type */
+.facilityVisitRow {
+  display: flex;
+  flex-wrap: nowrap;
+  gap: spacing.$spacing-05; /* Adjust gap between columns */
+}
+
+.facilityColumn {
+  flex: 1 1 0%; /* Makes columns take up equal space */
+}

package/src/forms/lab-manifest-form.workspace.tsx

@@ -0,0 +1,357 @@
+import {
+  Button,
+  ButtonSet,
+  Column,
+  DatePicker,
+  DatePickerInput,
+  Dropdown,
+  Form,
+  Stack,
+  TextInput,
+} from '@carbon/react';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { DefaultWorkspaceProps, parseDate, showSnackbar, useLayoutType } from '@openmrs/esm-framework';
+import React, { useEffect } from 'react';
+import { Controller, useForm } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { z } from 'zod';
+import { LabManifestFilters, labManifestFormSchema, manifestTypes, saveLabManifest } from '../lab-manifest.resources';
+import styles from './lab-manifest-form.scss';
+import { County, MappedLabManifest } from '../types';
+import { mutate } from 'swr';
+interface LabManifestFormProps extends DefaultWorkspaceProps {
+  patientUuid: string;
+  manifest?: MappedLabManifest;
+}
+
+type ContactListFormType = z.infer<typeof labManifestFormSchema>;
+
+const LabManifestForm: React.FC<LabManifestFormProps> = ({ closeWorkspace, manifest }) => {
+  const counties = require('../counties.json') as County[];
+  const form = useForm<ContactListFormType>({
+    defaultValues: {
+      ...manifest,
+      dispatchDate: manifest?.dispatchDate ? parseDate(manifest.dispatchDate) : undefined,
+      startDate: manifest?.startDate ? parseDate(manifest.startDate) : undefined,
+      endDate: manifest?.endDate ? parseDate(manifest.endDate) : undefined,
+    },
+    resolver: zodResolver(labManifestFormSchema),
+  });
+  const { t } = useTranslation();
+  const observableSelectedCounty = form.watch('county');
+  const layout = useLayoutType();
+  const controlSize = layout === 'tablet' ? 'xl' : 'sm';
+  const onSubmit = async (values: ContactListFormType) => {
+    try {
+      await saveLabManifest(values, manifest?.uuid);
+      if (manifest?.uuid) {
+        mutate((key) => {
+          return (
+            typeof key === 'string' &&
+            key.startsWith(`/ws/rest/v1/labmanifest/${manifest!.uuid}?status=${values.manifestStatus}`)
+          );
+        });
+      } else {
+        mutate((key) => {
+          return typeof key === 'string' && key.startsWith(`/ws/rest/v1/labmanifest?status=${values.manifestStatus}`);
+        });
+      }
+      closeWorkspace();
+      showSnackbar({ title: 'Success', kind: 'success', subtitle: 'Lab manifest created successfully!' });
+    } catch (error) {
+      showSnackbar({ title: 'Failure', kind: 'error', subtitle: 'Error creating lab manifest' });
+    }
+  };
+  return (
+    <Form onSubmit={form.handleSubmit(onSubmit)}>
+      <span className={styles.contactFormTitle}>{t('formTitle', 'Fill in the form details')}</span>
+      <Stack gap={4} className={styles.grid}>
+        <Column>
+          <Controller
+            control={form.control}
+            name="startDate"
+            render={({ field }) => (
+              <DatePicker
+                dateFormat="d/m/Y"
+                id="startDate"
+                datePickerType="single"
+                {...field}
+                invalid={form.formState.errors[field.name]?.message}
+                invalidText={form.formState.errors[field.name]?.message}>
+                <DatePickerInput
+                  invalid={form.formState.errors[field.name]?.message}
+                  invalidText={form.formState.errors[field.name]?.message}
+                  placeholder="mm/dd/yyyy"
+                  labelText={t('startDate', 'Start Date')}
+                  size={controlSize}
+                />
+              </DatePicker>
+            )}
+          />
+        </Column>
+        <Column>
+          <Controller
+            control={form.control}
+            name="endDate"
+            render={({ field }) => (
+              <DatePicker
+                dateFormat="d/m/Y"
+                id="endDate"
+                datePickerType="single"
+                {...field}
+                invalid={form.formState.errors[field.name]?.message}
+                invalidText={form.formState.errors[field.name]?.message}>
+                <DatePickerInput
+                  invalid={form.formState.errors[field.name]?.message}
+                  invalidText={form.formState.errors[field.name]?.message}
+                  placeholder="mm/dd/yyyy"
+                  labelText={t('endDate', 'End Date')}
+                  size="xl"
+                />
+              </DatePicker>
+            )}
+          />
+        </Column>
+        <span className={styles.sectionHeader}>Manifest type</span>
+        <Column>
+          <Controller
+            control={form.control}
+            name="manifestType"
+            render={({ field }) => (
+              <Dropdown
+                ref={field.ref}
+                invalid={form.formState.errors[field.name]?.message}
+                invalidText={form.formState.errors[field.name]?.message}
+                id="manifestType"
+                titleText={t('manifestType', 'Manifest Type')}
+                onChange={(e) => {
+                  field.onChange(e.selectedItem);
+                }}
+                initialSelectedItem={field.value}
+                label="Choose option"
+                items={manifestTypes.map((r) => r.value)}
+                itemToString={(item) => manifestTypes.find((r) => r.value === item)?.label ?? ''}
+              />
+            )}
+          />
+        </Column>
+        <span className={styles.sectionHeader}>Dispatch status</span>
+
+        <Column>
+          <Controller
+            control={form.control}
+            name="dispatchDate"
+            render={({ field }) => (
+              <DatePicker
+                dateFormat="d/m/Y"
+                id="dispatchDate"
+                datePickerType="single"
+                {...field}
+                invalid={form.formState.errors[field.name]?.message}
+                invalidText={form.formState.errors[field.name]?.message}>
+                <DatePickerInput
+                  invalid={form.formState.errors[field.name]?.message}
+                  invalidText={form.formState.errors[field.name]?.message}
+                  placeholder="mm/dd/yyyy"
+                  labelText={t('dispatchDate', 'Dispatch Date')}
+                  size="xl"
+                />
+              </DatePicker>
+            )}
+          />
+        </Column>
+        <Column>
+          <Controller
+            control={form.control}
+            name="courierName"
+            render={({ field }) => (
+              <TextInput
+                invalid={form.formState.errors[field.name]?.message}
+                invalidText={form.formState.errors[field.name]?.message}
+                {...field}
+                placeholder="Courier name"
+                labelText={t('courierName', 'Courier name')}
+              />
+            )}
+          />
+        </Column>
+        <Column>
+          <Controller
+            control={form.control}
+            name="personHandedTo"
+            render={({ field }) => (
+              <TextInput
+                invalid={form.formState.errors[field.name]?.message}
+                invalidText={form.formState.errors[field.name]?.message}
+                {...field}
+                placeholder="Person name"
+                labelText={t('personHandedTo', 'Person handed to')}
+              />
+            )}
+          />
+        </Column>
+        <span className={styles.sectionHeader}>Address</span>
+        <Column>
+          <Controller
+            control={form.control}
+            name="county"
+            render={({ field }) => (
+              <Dropdown
+                ref={field.ref}
+                invalid={form.formState.errors[field.name]?.message}
+                invalidText={form.formState.errors[field.name]?.message}
+                id="county"
+                titleText={t('county', 'County')}
+                onChange={(e) => {
+                  field.onChange(e.selectedItem);
+                  form.setValue('subCounty', undefined);
+                }}
+                initialSelectedItem={field.value}
+                label="Select county"
+                items={counties.map((r) => r.name)}
+                itemToString={(item) => item ?? ''}
+              />
+            )}
+          />
+        </Column>
+        <Column>
+          <Controller
+            control={form.control}
+            name="subCounty"
+            render={({ field }) => (
+              <Dropdown
+                ref={field.ref}
+                invalid={form.formState.errors[field.name]?.message}
+                invalidText={form.formState.errors[field.name]?.message}
+                id="subCounty"
+                titleText={t('subCounty', 'Sub county')}
+                initialSelectedItem={field.value}
+                onChange={(e) => {
+                  field.onChange(e.selectedItem);
+                }}
+                label="Select subcounty"
+                items={(counties.find((c) => c.name == observableSelectedCounty)?.constituencies ?? []).map(
+                  (r) => r.name,
+                )}
+                itemToString={(item) =>
+                  (counties.find((c) => c.name == observableSelectedCounty)?.constituencies ?? []).find(
+                    (c) => c.name === item,
+                  )?.name ?? 'Select subcounty'
+                }
+              />
+            )}
+          />
+        </Column>
+        <Column>
+          <Controller
+            control={form.control}
+            name="facilityEmail"
+            render={({ field }) => (
+              <TextInput
+                invalid={form.formState.errors[field.name]?.message}
+                invalidText={form.formState.errors[field.name]?.message}
+                {...field}
+                placeholder="Facility Email"
+                labelText={t('facilityEmail', 'Facility email')}
+              />
+            )}
+          />
+        </Column>
+        <Column>
+          <Controller
+            control={form.control}
+            name="facilityPhoneContact"
+            render={({ field }) => (
+              <TextInput
+                {...field}
+                invalid={form.formState.errors[field.name]?.message}
+                invalidText={form.formState.errors[field.name]?.message}
+                placeholder="Phone number"
+                labelText={t('facilityPhoneContact', 'Facility phone contact')}
+              />
+            )}
+          />
+        </Column>
+        <Column>
+          <Controller
+            control={form.control}
+            name="clinicianName"
+            render={({ field }) => (
+              <TextInput
+                invalid={form.formState.errors[field.name]?.message}
+                invalidText={form.formState.errors[field.name]?.message}
+                {...field}
+                placeholder="Clinician name"
+                labelText={t('clinicianName', 'Clinician name')}
+              />
+            )}
+          />
+        </Column>
+        <Column>
+          <Controller
+            control={form.control}
+            name="clinicianContact"
+            render={({ field }) => (
+              <TextInput
+                {...field}
+                invalid={form.formState.errors[field.name]?.message}
+                invalidText={form.formState.errors[field.name]?.message}
+                placeholder="Clinician contact"
+                labelText={t('clinicianContact', 'Clinician phone contact')}
+              />
+            )}
+          />
+        </Column>
+        <Column>
+          <Controller
+            control={form.control}
+            name="labPersonContact"
+            render={({ field }) => (
+              <TextInput
+                {...field}
+                invalid={form.formState.errors[field.name]?.message}
+                invalidText={form.formState.errors[field.name]?.message}
+                placeholder="Lab person contact"
+                labelText={t('labPersonContact', 'Lab person contact')}
+              />
+            )}
+          />
+        </Column>
+        <span className={styles.sectionHeader}>Manifest status</span>
+        <Column>
+          <Controller
+            control={form.control}
+            name="manifestStatus"
+            render={({ field }) => (
+              <Dropdown
+                ref={field.ref}
+                invalid={form.formState.errors[field.name]?.message}
+                invalidText={form.formState.errors[field.name]?.message}
+                id="manifestStatus"
+                titleText={t('status', 'Status')}
+                onChange={(e) => {
+                  field.onChange(e.selectedItem);
+                }}
+                initialSelectedItem={field.value}
+                label="Select status"
+                items={LabManifestFilters.map((r) => r.value)}
+                itemToString={(item) => LabManifestFilters.find((r) => r.value === item)?.label ?? ''}
+              />
+            )}
+          />
+        </Column>
+      </Stack>
+
+      <ButtonSet className={styles.buttonSet}>
+        <Button className={styles.button} kind="secondary" onClick={closeWorkspace}>
+          {t('discard', 'Discard')}
+        </Button>
+        <Button className={styles.button} kind="primary" type="submit" disabled={form.formState.isSubmitting}>
+          {t('submit', 'Submit')}
+        </Button>
+      </ButtonSet>
+    </Form>
+  );
+};
+
+export default LabManifestForm;

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

@@ -0,0 +1,74 @@
+import { Button, ButtonSet, SkeletonText } from '@carbon/react';
+import { ArrowLeft, Edit } from '@carbon/react/icons';
+import { formatDate, launchWorkspace, navigate, parseDate } from '@openmrs/esm-framework';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { useLabManifest } from '../hooks';
+import styles from './lab-manifest-header.scss';
+
+interface LabManifestDetailHeaderProps {
+  manifestUuid: string;
+}
+
+const LabManifestDetailHeader: React.FC<LabManifestDetailHeaderProps> = ({ manifestUuid }) => {
+  const { isLoading, manifest } = useLabManifest(manifestUuid);
+  const { t } = useTranslation();
+
+  const handleGoBack = () => {
+    navigate({ to: window.getOpenmrsSpaBase() + `home/lab-manifest` });
+  };
+
+  const handleEditManifest = () => {
+    launchWorkspace('lab-manifest-form', {
+      workspaceTitle: 'Lab Manifest Form',
+      manifest,
+    });
+  };
+
+  if (isLoading) {
+    return (
+      <div className={styles.manifestDetailHeader}>
+        <div className={styles.manifestDetailContent}>
+          {Array.from({ length: 3 }).map((_) => (
+            <SkeletonText style={{ maxWidth: '400px' }} />
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <div className={styles.manifestDetailHeader}>
+        <div className={styles.manifestDetailContent}>
+          <div>
+            <strong>Date:</strong>
+            {manifest.startDate ? formatDate(parseDate(manifest.startDate)) : '--'} <strong>To</strong>{' '}
+            {manifest.endDate ? formatDate(parseDate(manifest.endDate)) : '--'}
+          </div>
+          <div>
+            <strong>Status:</strong>
+            {manifest.manifestStatus} | <strong>Type</strong> : {manifest.manifestType} | <strong>Courrier:</strong>
+            {manifest.courierName}
+          </div>
+          <div>
+            <strong>Dispatch Date:</strong>
+            {manifest.dispatchDate ? formatDate(parseDate(manifest.dispatchDate)) : '--'} |{' '}
+            <strong>Lab person Contact:</strong>
+            {manifest.labPersonContact}
+          </div>
+        </div>
+      </div>
+      <ButtonSet className={styles.btnSet}>
+        <Button kind="tertiary" renderIcon={ArrowLeft} onClick={handleGoBack}>
+          {t('back', 'Back')}
+        </Button>
+        <Button kind="tertiary" renderIcon={Edit} onClick={handleEditManifest}>
+          {t('editManifest', 'Edit Manifest')}
+        </Button>
+      </ButtonSet>
+    </div>
+  );
+};
+
+export default LabManifestDetailHeader;

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

@@ -0,0 +1,36 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Calendar, Location } from '@carbon/react/icons';
+import { useSession, formatDate } from '@openmrs/esm-framework';
+import styles from './lab-manifest-header.scss';
+import LabManifestIllustration from './lab-manifest-illustration.component';
+
+interface LabManifestHeaderProps {
+  title: string;
+}
+export const LabManifestHeader: React.FC<LabManifestHeaderProps> = ({ title }) => {
+  const { t } = useTranslation();
+  const userSession = useSession();
+  const userLocation = userSession?.sessionLocation?.display;
+
+  return (
+    <div className={styles.header}>
+      <div className={styles['leftJustifiedItems']}>
+        <LabManifestIllustration />
+        <div className={styles['pageLabels']}>
+          <p>{t('labManifest', 'Lab manifest Management')}</p>
+          <p className={styles['pageName']}>{title}</p>
+        </div>
+      </div>
+      <div className={styles['rightJustifieditems']}>
+        <div className={styles['dateAndLocation']}>
+          <Location size={16} />
+          <span className={styles.value}>{userLocation}</span>
+          <span className={styles.middot}>&middot;</span>
+          <Calendar size={16} />
+          <span className={styles.value}>{formatDate(new Date(), { mode: 'standard' })}</span>
+        </div>
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,105 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.header {
+  @include type.type-style('body-compact-02');
+  color: $text-02;
+  height: spacing.$spacing-12;
+  background-color: $ui-02;
+  border: 1px solid $ui-03;
+  border-left: 0px;
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 2rem;
+}
+
+.leftJustifiedItems {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-left: 0.75rem;
+}
+
+.rightJustifieditems {
+  @include type.type-style('body-compact-02');
+  color: $text-02;
+  padding-top: 1rem;
+}
+
+.pageName {
+  @include type.type-style('heading-04');
+}
+
+.pageLabels {
+  margin-left: 1rem;
+
+  p:first-of-type {
+    margin-bottom: 0.25rem;
+  }
+}
+
+.dateAndLocation {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  margin-right: 1rem;
+}
+
+.value {
+  margin-left: 0.25rem;
+}
+
+.middot {
+  margin: 0 0.5rem;
+}
+
+.view {
+  @include type.type-style('label-01');
+}
+
+svg.iconOverrides {
+  width: 72 !important;
+  height: 72 !important;
+  fill: var(--brand-03);
+}
+
+.svgContainer svg {
+  width: 72px;
+  height: 72px;
+  fill: var(--brand-03);
+}
+
+.cardContainer {
+  background-color: $ui-02;
+  display: flex;
+  justify-content: space-between;
+  padding: 0 spacing.$spacing-05 spacing.$spacing-07 spacing.$spacing-03;
+  flex-flow: row wrap;
+  margin-top: -(spacing.$spacing-03);
+}
+
+.manifestDetailHeader {
+  display: flex;
+  justify-content: space-between;
+  padding: spacing.$spacing-05;
+  flex-flow: row wrap;
+  align-items: center;
+  background-color: $ui-02;
+  gap: 2rem;
+}
+
+.manifestDetailContent {
+  flex-grow: 1;
+  gap: 0.5rem;
+  flex-direction: column;
+  display: flex;
+}
+
+.btnSet {
+  display: flex;
+  justify-content: space-between;
+  padding: spacing.$spacing-05;
+  flex-flow: row wrap;
+  align-items: center;
+}