@openmrs/esm-dispensing-app 1.6.2 → 1.6.3-pre.3

package/src/conditions/conditions.scss

@@ -0,0 +1,9 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.conditionContainer {
+  background-color: colors.$white-0;
+  border: 1px solid colors.$gray-20;
+  margin-bottom: layout.$spacing-05;
+}

package/src/config-schema.ts

@@ -113,6 +113,12 @@ export const configSchema = {
       'Enable or disable stock deduction during the dispensing process. Requires the stock management module to be installed and configured.',
     _default: false,
   },
+  validateBatch: {
+    _type: Type.Boolean,
+    _description:
+      'Enable or disable stock item batch number validation. Requires the stock management module to be installed and configured.',
+    _default: true,
+  },
 };
 
 export interface PharmacyConfig {
@@ -156,4 +162,6 @@ export interface PharmacyConfig {
     };
   };
   enableStockDispense: boolean;
+
+  validateBatch: boolean;
 }

package/src/dashboard/dispensing-dashboard-link.component.tsx

@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react';
 import classNames from 'classnames';
-import { useTranslation } from 'react-i18next';
 import { BrowserRouter } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
 import { ConfigurableLink } from '@openmrs/esm-framework';
 
 const DispensingDashboardLink = () => {

package/src/dashboard/dispensing-dashboard.component.tsx

@@ -1,12 +1,18 @@
-import React from 'react';
+import React, { useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
 import { InlineNotification } from '@carbon/react';
+import { setLeftNav, unsetLeftNav, useConfig, WorkspaceContainer } from '@openmrs/esm-framework';
+import { type PharmacyConfig } from '../config-schema';
 import { PharmacyHeader } from '../pharmacy-header/pharmacy-header.component';
 import PrescriptionTabLists from '../prescriptions/prescription-tab-lists.component';
-import { useConfig, WorkspaceContainer } from '@openmrs/esm-framework';
-import { useTranslation } from 'react-i18next';
-import { type PharmacyConfig } from '../config-schema';
 
 export default function DispensingDashboard() {
+  useEffect(() => {
+    const basePath = window.spaBase + '/dispensing';
+    setLeftNav({ name: 'homepage-dashboard-slot', basePath, mode: 'collapsed' });
+    return () => unsetLeftNav('homepage-dashboard-slot');
+  }, []);
+
   const config = useConfig<PharmacyConfig>();
   const { t } = useTranslation();
   if (config.dispenseBehavior.restrictTotalQuantityDispensed && config.dispenseBehavior.allowModifyingPrescription) {

package/src/declarations.d.ts

@@ -1,4 +1,3 @@
 declare module '*.css';
 declare module '*.scss';
 declare module '*.svg';
-declare module '@carbon/react';

package/src/diagnoses/diagnoses.component.tsx

@@ -0,0 +1,92 @@
+import React, { useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  DataTable,
+  DataTableSkeleton,
+  Layer,
+  Pagination,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@carbon/react';
+import { ErrorState, usePagination } from '@openmrs/esm-framework';
+import { CardHeader, EmptyState } from '@openmrs/esm-patient-common-lib';
+import { usePatientDiagnosis } from './diagnoses.resource';
+import styles from './diagnoses.scss';
+
+type PatientDiagnosesProps = {
+  patientUuid: string;
+  encounterUuid: string;
+};
+
+const PatientDiagnoses: React.FC<PatientDiagnosesProps> = ({ encounterUuid, patientUuid }) => {
+  const { diagnoses, isLoading, error } = usePatientDiagnosis(encounterUuid);
+  const [pageSize, setPageSize] = useState(3);
+  const pageSizesOptions = useMemo(() => [3, 5, 10, 20, 50, 100], []);
+  const { results, totalPages, currentPage, goTo } = usePagination(diagnoses, pageSize);
+  const { t } = useTranslation();
+  const title = t('finalDiagnoses', 'Final Diagnoses');
+  const headers = useMemo(() => {
+    return [
+      { header: t('diagnosis', 'Diagnosis'), key: 'text' },
+      { header: t('status', 'Status'), key: 'certainty' },
+    ];
+  }, [t]);
+  if (isLoading) return <DataTableSkeleton />;
+
+  if (error) return <ErrorState headerTitle={title} error={error} />;
+
+  if (!diagnoses?.length)
+    return (
+      <Layer className={styles.diagnosesContainer}>
+        <EmptyState headerTitle={title} displayText={t('visitFinalDiagnoses', 'Visit final diagnoses')} />
+      </Layer>
+    );
+
+  return (
+    <Layer className={styles.diagnosesContainer}>
+      <CardHeader title={title}>
+        <React.Fragment />
+      </CardHeader>
+      <DataTable useZebraStyles rows={results} headers={headers}>
+        {({ rows, headers, getTableProps, getHeaderProps, getRowProps }) => (
+          <Table {...getTableProps()}>
+            <TableHead>
+              <TableRow>
+                {headers.map((header, i) => (
+                  <TableHeader {...getHeaderProps({ header })} key={i}>
+                    {header.header}
+                  </TableHeader>
+                ))}
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {rows.map((row, i) => (
+                <TableRow {...getRowProps({ row })} key={i}>
+                  {row.cells.map((cell) => (
+                    <TableCell key={cell.id}>{cell.value}</TableCell>
+                  ))}
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        )}
+      </DataTable>
+      <Pagination
+        page={currentPage}
+        pageSize={pageSize}
+        pageSizes={pageSizesOptions}
+        totalItems={diagnoses.length}
+        onChange={({ page, pageSize }) => {
+          goTo(page);
+          setPageSize(pageSize);
+        }}
+      />
+    </Layer>
+  );
+};
+
+export default PatientDiagnoses;

package/src/diagnoses/diagnoses.resource.ts

@@ -0,0 +1,30 @@
+import { useMemo } from 'react';
+import useSWR from 'swr';
+import { type FetchResponse, openmrsFetch, restBaseUrl, type Visit } from '@openmrs/esm-framework';
+
+export const usePatientDiagnosis = (encounterUuid: string) => {
+  const customRepresentation =
+    'custom:(uuid,display,visit:(uuid,encounters:(uuid,diagnoses:(uuid,display,certainty,diagnosis:(coded:(uuid,display))))))';
+  const url = `${restBaseUrl}/encounter/${encounterUuid}?v=${customRepresentation}`;
+
+  const { data, error, isLoading } = useSWR<FetchResponse<{ visit: Visit }>>(url, openmrsFetch);
+
+  const diagnoses = useMemo(() => {
+    return (
+      data?.data?.visit?.encounters?.flatMap(
+        (encounter) =>
+          encounter.diagnoses.map((diagnosis) => ({
+            id: diagnosis.diagnosis.coded.uuid,
+            text: diagnosis.display,
+            certainty: diagnosis.certainty,
+          })) || [],
+      ) || []
+    );
+  }, [data]);
+
+  return {
+    error,
+    isLoading,
+    diagnoses: (diagnoses ?? []) as Array<{ id: string; text: string; certainty: string }>,
+  };
+};

package/src/diagnoses/diagnoses.scss

@@ -0,0 +1,9 @@
+@use '@carbon/layout';
+@use '@carbon/colors';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.diagnosesContainer {
+  background-color: colors.$white-0;
+  border: 1px solid colors.$gray-20;
+  margin-bottom: layout.$spacing-05;
+}

package/src/dispensing-tiles/dispensing-tile.component.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { Tile, Button } from '@carbon/react';
 import { ArrowRight } from '@carbon/react/icons';
+import { ResponsiveWrapper } from '@openmrs/esm-framework';
 import styles from './dispensing-tile.scss';
 
 interface DispensingTileProps {
@@ -15,24 +16,26 @@ const DispensingTile: React.FC<DispensingTileProps> = ({ label, value, headerLab
   const { t } = useTranslation();
 
   return (
-    <Tile className={styles.tileContainer} light={true}>
-      <div className={styles.tileHeader}>
-        <div className={styles.headerLabelContainer}>
-          <label className={styles.headerLabel}>{headerLabel}</label>
-          {children}
+    <ResponsiveWrapper>
+      <Tile className={styles.tileContainer}>
+        <div className={styles.tileHeader}>
+          <div className={styles.headerLabelContainer}>
+            <label className={styles.headerLabel}>{headerLabel}</label>
+            {children}
+          </div>
+          <Button
+            kind="ghost"
+            renderIcon={(props) => <ArrowRight size={16} className={styles.arrowIcon} />}
+            iconDescription={t('view', 'View')}>
+            {t('view', 'View')}
+          </Button>
         </div>
-        <Button
-          kind="ghost"
-          renderIcon={(props) => <ArrowRight size={16} className={styles.arrowIcon} />}
-          iconDescription={t('view', 'View')}>
-          {t('view', 'View')}
-        </Button>
-      </div>
-      <div>
-        <label className={styles.totalsLabel}>{label}</label>
-        <p className={styles.totalsValue}>{value}</p>
-      </div>
-    </Tile>
+        <div>
+          <label className={styles.totalsLabel}>{label}</label>
+          <p className={styles.totalsValue}>{value}</p>
+        </div>
+      </Tile>
+    </ResponsiveWrapper>
   );
 };
 

package/src/dispensing-tiles/dispensing-tile.scss

@@ -1,20 +1,20 @@
-@use '@carbon/styles/scss/spacing';
-@use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
 .tileContainer {
-  border: 0.0625rem solid $ui-03;
+  border: 1px solid $ui-03;
   flex-grow: 1;
   height: 7.875rem;
-  padding: 0 spacing.$spacing-05;
-  margin: spacing.$spacing-03 spacing.$spacing-03;
+  padding: 0 layout.$spacing-05;
+  margin: layout.$spacing-03 layout.$spacing-03;
 }
 
 .tileHeader {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: spacing.$spacing-03;
+  margin-bottom: layout.$spacing-03;
 }
 
 .headerLabel {
@@ -35,7 +35,7 @@
 .headerLabelContainer {
   display: flex;
   align-items: center;
-  height: spacing.$spacing-07;
+  height: layout.$spacing-07;
 }
 
 .arrowIcon {

package/src/dispensing-tiles/dispensing-tiles.scss

@@ -1,12 +1,11 @@
-@use '@carbon/styles/scss/spacing';
-@use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@use '@carbon/layout';
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
 .cardContainer {
   background-color: $ui-02;
   display: flex;
   justify-content: space-between;
-  padding: 0 spacing.$spacing-05 spacing.$spacing-10 spacing.$spacing-03;
+  padding: 0 layout.$spacing-05 layout.$spacing-10 layout.$spacing-03;
   flex-flow: row wrap;
-  margin-top: -spacing.$spacing-03;
+  margin-top: -layout.$spacing-03;
 }

package/src/forms/close-dispense-form.workspace.tsx

@@ -5,6 +5,7 @@ import {
   type DefaultWorkspaceProps,
   ExtensionSlot,
   getCoreTranslation,
+  ResponsiveWrapper,
   showSnackbar,
   useConfig,
   useLayoutType,
@@ -152,29 +153,30 @@ const CloseDispenseForm: React.FC<CloseDispenseFormProps> = ({
         )}
         {patient && <ExtensionSlot name="patient-header-slot" state={bannerState} />}
         <section className={styles.formGroup}>
-          <ComboBox
-            id="reasonForPause"
-            light={isTablet}
-            items={reasonsForClose}
-            titleText={t('reasonForClose', 'Reason for close')}
-            itemToString={(item) => item?.text}
-            initialSelectedItem={{
-              id: medicationDispense.statusReasonCodeableConcept?.coding[0]?.code,
-              text: medicationDispense.statusReasonCodeableConcept?.text,
-            }}
-            onChange={({ selectedItem }) => {
-              setMedicationDispensePayload({
-                ...medicationDispensePayload,
-                statusReasonCodeableConcept: {
-                  coding: [
-                    {
-                      code: selectedItem?.id,
-                    },
-                  ],
-                },
-              });
-            }}
-          />
+          <ResponsiveWrapper>
+            <ComboBox
+              id="reasonForPause"
+              items={reasonsForClose}
+              titleText={t('reasonForClose', 'Reason for close')}
+              itemToString={(item) => item?.text}
+              initialSelectedItem={{
+                id: medicationDispense.statusReasonCodeableConcept?.coding[0]?.code,
+                text: medicationDispense.statusReasonCodeableConcept?.text,
+              }}
+              onChange={({ selectedItem }) => {
+                setMedicationDispensePayload({
+                  ...medicationDispensePayload,
+                  statusReasonCodeableConcept: {
+                    coding: [
+                      {
+                        code: selectedItem?.id,
+                      },
+                    ],
+                  },
+                });
+              }}
+            />
+          </ResponsiveWrapper>
         </section>
       </div>
       <section className={styles.buttonGroup}>

package/src/forms/forms.scss

@@ -5,7 +5,7 @@
 
 .productiveHeading02 {
   color: $color-gray-70;
-  @include type.type-style('productive-heading-02');
+  @include type.type-style('heading-02');
 }
 
 .formWrapper {
@@ -37,10 +37,6 @@
   flex: 3;
 }
 
-.formGroup span {
-  @extend .productiveHeading02;
-}
-
 .bannerLoading {
   width: 100%;
   display: flex;
@@ -51,13 +47,13 @@
   position: sticky;
   z-index: 1000;
   background-color: $ui-02;
-  top: 3rem;
+  top: layout.$spacing-09;
   overflow-y: auto;
 }
 
 .dateTimeContainer {
   display: flex;
-  margin: 1rem 0;
+  margin: layout.$spacing-05 0;
 }
 
 .timePickersContainer,
@@ -65,7 +61,7 @@
   display: flex;
 
   > div {
-    margin-right: 0.5rem;
+    margin-right: layout.$spacing-03;
   }
 }
 
@@ -74,7 +70,7 @@
   flex-direction: column;
 
   > div {
-    margin-bottom: 1rem;
+    margin-bottom: layout.$spacing-05;
   }
 }