@thrustdevs/esm-procedure-orders-app 1.0.2-pre.6

package/src/left-panel-link.tsx

@@ -0,0 +1,40 @@
+import React, { useMemo } from 'react';
+import last from 'lodash-es/last';
+import { BrowserRouter, useLocation } from 'react-router-dom';
+import { ConfigurableLink } from '@openmrs/esm-framework';
+
+export interface LinkConfig {
+  name: string;
+  title: string;
+}
+
+export function LinkExtension({ config }: { config: LinkConfig }) {
+  const { name, title } = config;
+  const location = useLocation();
+  const spaBasePath = window.getOpenmrsSpaBase() + 'home';
+
+  let urlSegment = useMemo(() => decodeURIComponent(last(location.pathname.split('/'))), [location.pathname]);
+
+  const isUUID = (value) => {
+    const regex = /^[0-9a-fA-F]{8}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{12}$/;
+    return regex.test(value);
+  };
+
+  if (isUUID(urlSegment)) {
+    urlSegment = 'billing';
+  }
+
+  return (
+    <ConfigurableLink
+      to={spaBasePath + '/' + name}
+      className={`cds--side-nav__link ${name === urlSegment && 'active-left-nav-link'}`}>
+      {title}
+    </ConfigurableLink>
+  );
+}
+
+export const createLeftPanelLink = (config: LinkConfig) => () => (
+  <BrowserRouter>
+    <LinkExtension config={config} />
+  </BrowserRouter>
+);

package/src/not-done-list/not-done-list.component.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import Overlay from '../components/overlay/overlay.component';
+import { useOrdersWorklist } from '../hooks/useOrdersWorklist';
+import GroupedOrdersTable from '../shared/ui/common/grouped-orders-table.component';
+import { DataTableSkeleton } from '@carbon/react';
+interface WorklistProps {
+  fulfillerStatus: string;
+}
+
+const NotDoneList: React.FC<WorklistProps> = ({ fulfillerStatus }) => {
+  const { t } = useTranslation();
+
+  const { workListEntries, isLoading } = useOrdersWorklist('', fulfillerStatus);
+
+  if (isLoading) {
+    return <DataTableSkeleton role="progressbar" />;
+  }
+
+  if (workListEntries?.length >= 0) {
+    return (
+      <>
+        <div>
+          <GroupedOrdersTable
+            orders={workListEntries}
+            showActions={false}
+            showStatus={true}
+            showOrderType={true}
+            showStartButton={false}
+            title={t('notDoneList', 'Not Done List')}
+            actions={[
+              {
+                actionName: 'procedure-reject-reason-modal',
+              },
+            ]}
+          />
+        </div>
+        <Overlay />
+      </>
+    );
+  }
+};
+
+export default NotDoneList;

package/src/not-done-list/not-done.scss

@@ -0,0 +1,207 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@use '@openmrs/esm-styleguide/src/vars' as vars;
+
+title {
+  width: 6.938rem;
+  height: 1.75rem;
+  margin: 0.438rem 22.875rem 0.813rem 0;
+  font-family: IBMPlexSans;
+  font-size: 1.25rem;
+  font-weight: normal;
+  font-stretch: normal;
+  font-style: normal;
+  line-height: 1.4;
+  letter-spacing: normal;
+}
+
+.link {
+  text-decoration: none;
+}
+
+.breadcrumbsSlot {
+  grid-row: 1 / 2;
+  grid-column: 1 / 2;
+}
+
+.orderTabsContainer {
+  height: 100%;
+  width: 100%;
+
+  :global(.cds--tab-content) {
+    padding: 0 !important;
+  }
+}
+
+.orderTabs {
+  grid-column: 'span 2';
+  padding: 0 spacing.$spacing-05;
+}
+
+.newListButton {
+  width: fit-content;
+  justify-self: end;
+  align-self: center;
+}
+
+.tabsContainer {
+  background-color: vars.$ui-02;
+
+  :global(.cds--tabs__nav-item--selected) {
+    box-shadow: inset 0 2px 0 0 var(--brand-03) !important;
+  }
+
+  :global(.cds--tab--list) button {
+    max-width: 12rem !important;
+  }
+}
+
+.hiddenTabsContent,
+.tabs .hiddenTabsContent {
+  display: none;
+}
+
+.patientListTableContainer {
+  grid-row: 3 / 4;
+  grid-column: 1 / 2;
+  height: 100%;
+  margin: 0.5rem spacing.$spacing-05;
+  background-color: vars.$ui-01;
+  border: 0.5px solid #e0e0e0;
+
+  :global(.cds--data-table-container) {
+    padding-top: 0 !important;
+  }
+
+  tbody > tr > :nth-child(2) {
+    white-space: nowrap;
+  }
+
+  :global(.cds--data-table td) {
+    height: unset !important;
+  }
+
+  :global(.cds--data-table--zebra) tbody tr[data-parent-row]:nth-child(4n + 1) td {
+    background-color: vars.$ui-02;
+    border-bottom: 1px solid vars.$ui-03;
+    border-top: 1px solid vars.$ui-03;
+  }
+
+  :global(.cds--data-table--zebra) tbody tr[data-parent-row]:nth-child(4n + 3) td {
+    background-color: vars.$ui-01;
+    border-bottom: 1px solid vars.$ui-03;
+  }
+}
+
+.tableContainer {
+  background-color: vars.$ui-01;
+  margin: 0 spacing.$spacing-05;
+  padding: 0;
+
+  a {
+    text-decoration: none;
+  }
+
+  th {
+    color: vars.$text-02;
+  }
+
+  :global(.cds--data-table) {
+    background-color: vars.$ui-03;
+  }
+
+  .toolbarContent {
+    height: spacing.$spacing-07;
+    margin-bottom: spacing.$spacing-02;
+  }
+}
+
+.activePatientsTable tr:last-of-type {
+  td {
+    border-bottom: none;
+  }
+}
+
+.searchContainer {
+  display: flex;
+  align-items: center;
+  flex-direction: row-reverse;
+  padding-top: 0.5rem;
+
+  :global(.cds--search-magnifier-icon) {
+    z-index: 0 !important;
+  }
+
+  input {
+    background-color: #fff;
+  }
+}
+
+.addOrderBtn {
+  width: 10rem !important;
+  padding: 0.5rem !important;
+  margin-left: 1rem;
+  margin-right: 1rem;
+}
+
+.patientSearch {
+  width: 25rem;
+  border-bottom-color: vars.$ui-03;
+}
+
+.locationFilter {
+  width: 25rem;
+}
+
+.search {
+  width: 100%;
+  max-width: 16rem;
+  background-color: vars.$ui-02;
+  border-bottom-color: vars.$ui-03;
+}
+
+.container {
+  background-color: vars.$ui-01;
+}
+
+.expandedLabQueueVisitRow {
+  :global(.cds--tab-content) {
+    padding: 0.5rem 0;
+  }
+
+  td {
+    padding: 0.5rem;
+
+    > div {
+      max-height: max-content !important;
+      background-color: vars.$ui-02;
+    }
+  }
+
+  th[colspan] td[colspan] > div:first-child {
+    padding: 0 1rem;
+  }
+}
+
+.tileContainer {
+  background-color: vars.$ui-02;
+  border-top: 1px solid vars.$ui-03;
+  padding: 5rem 0;
+}
+
+.tile {
+  margin: auto;
+  width: fit-content;
+}
+
+.tileContent {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.content {
+  @include type.type-style('heading-compact-02');
+  color: vars.$text-02;
+  margin-bottom: 0.5rem;
+}

package/src/patient-chart/patient-procedure-order-results-table.resource.ts

@@ -0,0 +1,43 @@
+import { useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { usePagination } from '@openmrs/esm-framework';
+import { type LaboratoryOrderFilter, usePatientLaboratoryOrders } from './patient-procedure-order-results.resource';
+
+export function useLaboratoryOrderResultsPages(filter: LaboratoryOrderFilter) {
+  const { t } = useTranslation();
+
+  const pageSizes = [10, 20, 30, 40, 50];
+  const [currentPageSize, setPageSize] = useState(10);
+
+  const { items, isLoading, isError } = usePatientLaboratoryOrders(filter);
+  const { goTo, results: paginatedItems, currentPage } = usePagination(items, currentPageSize);
+
+  const tableHeaders = useMemo(
+    () => [
+      {
+        id: 0,
+        header: t('orderDate', 'Test Date'),
+        key: 'orderDate',
+      },
+      { id: 1, header: t('tests', 'Tests'), key: 'orders' },
+      { id: 2, header: t('location', 'Location'), key: 'location' },
+      { id: 3, header: t('status', 'Status'), key: 'status' },
+      { id: 4, header: t('actions', 'Action'), key: 'actions' },
+    ],
+    [t],
+  );
+
+  return {
+    items: paginatedItems,
+    totalItems: items?.length,
+    currentPage,
+    currentPageSize,
+    paginatedItems,
+    goTo,
+    pageSizes,
+    isLoading,
+    isError,
+    setPageSize,
+    tableHeaders,
+  };
+}

package/src/patient-chart/patient-procedure-order-results.component.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import LaboratoryResultsTabs from './procedure-tabs/laboratory-order-tabs.component';
+
+interface PatientLaboratoryOrderResultsProps {
+  patientUuid: string;
+}
+
+const PatientLaboratoryOrderResults: React.FC<PatientLaboratoryOrderResultsProps> = ({ patientUuid }) => {
+  return <LaboratoryResultsTabs patientUuid={patientUuid} />;
+};
+
+export default PatientLaboratoryOrderResults;