@ampath/esm-laboratory-app 1.3.0-next.2

package/src/components/create-dashboard-link.component.tsx

@@ -0,0 +1,37 @@
+import React, { useMemo } from 'react';
+import { ConfigurableLink } from '@openmrs/esm-framework';
+import { BrowserRouter, useLocation } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+
+export interface DashboardLinkConfig {
+  name: string;
+  title: string;
+}
+
+function DashboardExtension({ dashboardLinkConfig }: { dashboardLinkConfig: DashboardLinkConfig }) {
+  const { t } = useTranslation();
+  const { name, title } = dashboardLinkConfig;
+  const location = useLocation();
+  const spaBasePath = `${window.spaBase}/home`;
+
+  const isActive = useMemo(() => {
+    const pathSegments = location.pathname.split('/').map((segment) => decodeURIComponent(segment));
+    return pathSegments.includes(name);
+  }, [location.pathname, name]);
+
+  return (
+    <ConfigurableLink
+      to={`${spaBasePath}/${name}`}
+      className={`cds--side-nav__link ${isActive ? 'active-left-nav-link' : ''}`}
+    >
+      {t(title)}
+    </ConfigurableLink>
+  );
+}
+
+export const createHomeDashboardLink = (dashboardLinkConfig: DashboardLinkConfig) => () =>
+  (
+    <BrowserRouter>
+      <DashboardExtension dashboardLinkConfig={dashboardLinkConfig} />
+    </BrowserRouter>
+  );

package/src/components/loader/loader.component.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { InlineLoading } from '@carbon/react';
+import styles from './loader.scss';
+
+const Loader: React.FC = () => {
+  const { t } = useTranslation();
+  return <InlineLoading className={styles.loading} description={`${t('loading', 'Loading')} ...`} />;
+};
+
+export default Loader;

package/src/components/loader/loader.scss

@@ -0,0 +1,9 @@
+@use '@carbon/layout';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.loading {
+  display: flex;
+  background-color: $openmrs-background-grey;
+  justify-content: center;
+  min-height: layout.$spacing-09;
+}

package/src/components/orders-table/list-order-details.component.tsx

@@ -0,0 +1,143 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import type { ReactNode } from 'react';
+import {
+  Accordion,
+  AccordionItem,
+  StructuredListBody,
+  StructuredListCell,
+  StructuredListRow,
+  StructuredListWrapper,
+} from '@carbon/react';
+import { capitalize } from 'lodash-es';
+import { ExtensionSlot, formatDate, parseDate } from '@openmrs/esm-framework';
+import { type GroupedOrders } from '../../types';
+import styles from './list-order-details.scss';
+
+type OrderDetailsRowProps = {
+  label: ReactNode;
+  value: ReactNode;
+};
+
+export interface ListOrdersDetailsProps {
+  groupedOrders: GroupedOrders;
+}
+
+const OrderDetailRow = ({ label, value }: OrderDetailsRowProps) => {
+  return (
+    <StructuredListRow className={styles.orderDetailsRow}>
+      <StructuredListCell className={styles.orderDetailsCell}>
+        <span className={styles.orderDetailsTextBold}>{label}</span>
+      </StructuredListCell>
+      <StructuredListCell className={styles.orderDetailsCell}>
+        <span className={styles.orderDetailsText}>{value}</span>
+      </StructuredListCell>
+    </StructuredListRow>
+  );
+};
+const ListOrderDetails: React.FC<ListOrdersDetailsProps> = ({ groupedOrders }) => {
+  const { t } = useTranslation();
+  const originalOrders = groupedOrders?.originalOrders ?? [];
+
+  return (
+    <div>
+      {originalOrders.map((order) => (
+        <div key={order.orderNumber} className={styles.orderDetailsContainer}>
+          <StructuredListWrapper className={styles.orderDetailsWrapper}>
+            <StructuredListBody>
+              <OrderDetailRow
+                label={t('urgencyStatus', 'Urgency:')}
+                value={
+                  <div className={styles.priorityPill} data-urgency={order.urgency?.replace('_', ' ')}>
+                    {capitalize(order.urgency?.replace(/_/g, ' '))}
+                  </div>
+                }
+              />
+              <OrderDetailRow label={t('testOrdered', 'Test ordered:')} value={order.display} />
+              <OrderDetailRow
+                label={t('orderStatus', 'Status:')}
+                value={
+                  <div
+                    className={styles.statusPill}
+                    data-status={(order.fulfillerStatus ?? 'Order not picked').replace('_', ' ')}
+                  >
+                    {capitalize(order.fulfillerStatus?.replace('_', ' ')) || t('orderNotPicked', 'Order not picked')}
+                  </div>
+                }
+              />
+              <OrderDetailRow label={t('orderNumbers', 'Order number:')} value={order.orderNumber} />
+              <OrderDetailRow
+                label={t('orderDate', 'Order date:')}
+                value={formatDate(parseDate(order.dateActivated))}
+              />
+              <OrderDetailRow label={t('orderedBy', 'Ordered By:')} value={order.orderer?.display} />
+              <OrderDetailRow
+                label={t('orderInstructions', 'Instructions:')}
+                value={order.instructions ?? t('NoInstructionLeft', 'No instructions are provided.')}
+              />
+
+              {order.fulfillerStatus === 'DECLINED' && (
+                <OrderDetailRow label={t('reasonForDecline', 'Reason for decline:')} value={order.fulfillerComment} />
+              )}
+            </StructuredListBody>
+          </StructuredListWrapper>
+          {(order.fulfillerStatus === 'COMPLETED' || order.fulfillerStatus === 'DRAFT') && (
+            <Accordion>
+              <AccordionItem
+                open={order.fulfillerStatus === 'COMPLETED'}
+                title={<span className={styles.accordionTitle}>{t('viewTestResults', 'View test results')}</span>}
+              >
+                <div className={styles.viewResults}>
+                  <ExtensionSlot
+                    className={styles.labResultSlot}
+                    state={{ order: order }}
+                    name="completed-lab-order-results-slot"
+                  />
+                </div>
+              </AccordionItem>
+            </Accordion>
+          )}
+
+          <div className={styles.buttonSection}>
+            {order.fulfillerStatus === 'RECEIVED' || order.fulfillerStatus == null ? (
+              <>
+                <div className={styles.testsOrderedActions}>
+                  <ExtensionSlot state={{ order: order }} name="rejected-ordered-actions-slot" />
+                  <ExtensionSlot state={{ order: order }} name="tests-ordered-actions-slot" />
+                  <ExtensionSlot state={{ order: order }} name="add-lab-order-details-slot" />
+                </div>
+              </>
+            ) : order.fulfillerStatus === 'IN_PROGRESS' ? (
+              <>
+                <div className={styles.testsOrderedActions}>
+                  <ExtensionSlot
+                    className={styles.menuLink}
+                    state={{ order: order }}
+                    name="inprogress-tests-actions-slot"
+                  />
+                </div>
+              </>
+            ) : order.fulfillerStatus === 'DRAFT' ? (
+              <>
+                <div className={styles.testsOrderedActions}>
+                  <ExtensionSlot
+                    className={styles.menuLink}
+                    state={{ order: order }}
+                    name="amended-ordered-actions-slot"
+                  />
+                  <ExtensionSlot
+                    className={styles.menuLink}
+                    state={{ order: order }}
+                    name="approved-ordered-actions-slot"
+                  />
+                </div>
+              </>
+            ) : null}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default ListOrderDetails;

package/src/components/orders-table/list-order-details.scss

@@ -0,0 +1,136 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.buttonSection {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  width: 100%;
+}
+
+.testsOrderedActions {
+  display: flex;
+  justify-content: flex-end;
+  padding: layout.$spacing-03 0;
+  width: 100%;
+}
+
+.menuLink {
+  display: inline-flex;
+}
+
+.orderDetailsContainer {
+  width: 80%;
+  display: flex;
+  flex-direction: column;
+  background-color: colors.$white-0;
+  padding: layout.$spacing-03;
+  gap: layout.$spacing-03;
+  margin-bottom: layout.$spacing-05;
+}
+
+.orderDetailsContainer:last-child {
+  margin-bottom: 0;
+}
+
+.orderDetailsRow {
+  &:first-child {
+    border-top: none !important;
+  }
+}
+
+.orderDetailsWrapper {
+  :global(.cds--structured-list) {
+    table-layout: fixed;
+    width: 100%;
+  }
+
+  :global(.cds--structured-list-td) {
+    align-content: center;
+    padding: layout.$spacing-03 !important;
+    vertical-align: middle !important;
+  }
+
+  :global(.cds--structured-list-td:first-child) {
+    width: 40%;
+  }
+}
+
+.textBold {
+  font-weight: bold;
+}
+
+.orderDetailsTextBold {
+  @extend .textBold;
+}
+
+.labResultSlot {
+  text-align: center;
+  margin-bottom: layout.$spacing-03;
+}
+
+.accordionTitle {
+  @extend .textBold;
+}
+
+.instructionLabelContainer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.pill {
+  @include type.type-style('label-01');
+  display: inline-block;
+  background-color: colors.$gray-20;
+  border-radius: layout.$spacing-03;
+  padding: layout.$spacing-02;
+  padding-inline: layout.$spacing-03;
+  text-align: center;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.priorityPill {
+  @extend .pill;
+
+  &[data-urgency='ROUTINE'] {
+    background-color: colors.$green-20;
+  }
+
+  &[data-urgency='ON SCHEDULED_DATE'] {
+    background-color: colors.$red-20;
+  }
+}
+
+.statusPill {
+  @extend .pill;
+
+  &[data-status='RECEIVED'] {
+    background-color: colors.$blue-20;
+  }
+
+  &[data-status='IN PROGRESS'] {
+    background-color: colors.$cyan-20;
+  }
+
+  &[data-status='ON HOLD'] {
+    background-color: colors.$teal-20;
+  }
+
+  &[data-status='EXCEPTION'] {
+    background-color: colors.$magenta-20;
+  }
+
+  &[data-status='COMPLETED'] {
+    background-color: colors.$green-20;
+  }
+
+  &[data-status='DECLINED'],
+  &[data-status='Order not picked'] {
+    background-color: colors.$red-20;
+  }
+}

package/src/components/orders-table/order-detail.scss

@@ -0,0 +1,18 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.bodyLong01 {
+  @include type.type-style('body-01');
+}
+
+.label01 {
+  @include type.type-style('label-01');
+}
+
+.displayValue {
+  color: $text-02;
+  font-weight: bold;
+  width: layout.$spacing-05;
+  height: layout.$spacing-05;
+}