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

package/src/form/procedures-orders/procedures-order-basket-panel/procedures-order-basket-panel.extension.tsx

@@ -0,0 +1,190 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import classNames from 'classnames';
+import { useTranslation } from 'react-i18next';
+import { Button, Tile } from '@carbon/react';
+import { Add, ChevronDown, ChevronUp } from '@carbon/react/icons';
+import { useLayoutType, closeWorkspace } from '@openmrs/esm-framework';
+import { launchPatientWorkspace, type OrderBasketItem, useOrderBasket } from '@openmrs/esm-patient-common-lib';
+import { ProceduresOrderBasketItemTile } from './procedures-order-basket-item-tile.component';
+import { prepProceduresOrderPostData } from '../api';
+import LabIcon from './procedures-icon.component';
+import styles from './procedures-order-basket-panel.scss';
+import { type ProcedureOrderBasketItem } from '../../../types';
+
+export default function ProceduresOrderBasketPanelExtension() {
+  const { t } = useTranslation();
+  const isTablet = useLayoutType() === 'tablet';
+  const { orders, setOrders } = useOrderBasket<ProcedureOrderBasketItem>('procedures', prepProceduresOrderPostData);
+  const [isExpanded, setIsExpanded] = useState(orders.length > 0);
+  const {
+    incompleteOrderBasketItems,
+    newOrderBasketItems,
+    renewedOrderBasketItems,
+    revisedOrderBasketItems,
+    discontinuedOrderBasketItems,
+  } = useMemo(() => {
+    const incompleteOrderBasketItems: Array<ProcedureOrderBasketItem> = [];
+    const newOrderBasketItems: Array<ProcedureOrderBasketItem> = [];
+    const renewedOrderBasketItems: Array<ProcedureOrderBasketItem> = [];
+    const revisedOrderBasketItems: Array<ProcedureOrderBasketItem> = [];
+    const discontinuedOrderBasketItems: Array<ProcedureOrderBasketItem> = [];
+
+    orders.forEach((order) => {
+      if (order?.isOrderIncomplete) {
+        incompleteOrderBasketItems.push(order);
+      } else if (order.action === 'NEW') {
+        newOrderBasketItems.push(order);
+      } else if (order.action === 'RENEW') {
+        renewedOrderBasketItems.push(order);
+      } else if (order.action === 'REVISE') {
+        revisedOrderBasketItems.push(order);
+      } else if (order.action === 'DISCONTINUE') {
+        discontinuedOrderBasketItems.push(order);
+      }
+    });
+
+    return {
+      incompleteOrderBasketItems,
+      newOrderBasketItems,
+      renewedOrderBasketItems,
+      revisedOrderBasketItems,
+      discontinuedOrderBasketItems,
+    };
+  }, [orders]);
+
+  const openNewProceduresForm = useCallback(() => {
+    closeWorkspace('order-basket', {
+      ignoreChanges: true,
+      onWorkspaceClose: () => {
+        launchPatientWorkspace('add-procedures-order');
+      },
+    });
+  }, []);
+
+  const openEditProceduresForm = useCallback((order: OrderBasketItem) => {
+    closeWorkspace('order-basket', {
+      ignoreChanges: true,
+      onWorkspaceClose: () => launchPatientWorkspace('add-procedures-order', { order }),
+    });
+  }, []);
+
+  const removeLabOrder = useCallback(
+    (order: ProcedureOrderBasketItem) => {
+      const newOrders = [...orders];
+      newOrders.splice(orders.indexOf(order), 1);
+      setOrders(newOrders);
+    },
+    [orders, setOrders],
+  );
+
+  useEffect(() => {
+    setIsExpanded(orders.length > 0);
+  }, [orders]);
+
+  return (
+    <Tile
+      className={classNames(isTablet ? styles.tabletTile : styles.desktopTile, {
+        [styles.collapsedTile]: !isExpanded,
+      })}>
+      <div className={styles.container}>
+        <div className={styles.iconAndLabel}>
+          <LabIcon isTablet={isTablet} />
+          <h4 className={styles.heading}>{`${t('proceduresOrders', 'Procedures orders')} (${orders.length})`}</h4>
+        </div>
+        <div className={styles.buttonContainer}>
+          <Button
+            kind="ghost"
+            renderIcon={(props) => <Add size={16} {...props} />}
+            iconDescription="Add procedures order"
+            onClick={openNewProceduresForm}
+            size={isTablet ? 'md' : 'sm'}>
+            {t('add', 'Add')}
+          </Button>
+          <Button
+            className={styles.chevron}
+            hasIconOnly
+            kind="ghost"
+            renderIcon={(props) =>
+              isExpanded ? <ChevronUp size={16} {...props} /> : <ChevronDown size={16} {...props} />
+            }
+            iconDescription="View"
+            disabled={orders.length === 0}
+            onClick={() => setIsExpanded(!isExpanded)}>
+            {t('add', 'Add')}
+          </Button>
+        </div>
+      </div>
+      {isExpanded && (
+        <>
+          {orders.length > 0 && (
+            <>
+              {incompleteOrderBasketItems.length > 0 && (
+                <>
+                  {incompleteOrderBasketItems.map((order) => (
+                    <ProceduresOrderBasketItemTile
+                      key={order.uuid}
+                      orderBasketItem={order}
+                      onItemClick={() => openEditProceduresForm(order)}
+                      onRemoveClick={() => removeLabOrder(order)}
+                    />
+                  ))}
+                </>
+              )}
+              {newOrderBasketItems.length > 0 && (
+                <>
+                  {newOrderBasketItems.map((order) => (
+                    <ProceduresOrderBasketItemTile
+                      key={order.uuid}
+                      orderBasketItem={order}
+                      onItemClick={() => openEditProceduresForm(order)}
+                      onRemoveClick={() => removeLabOrder(order)}
+                    />
+                  ))}
+                </>
+              )}
+
+              {renewedOrderBasketItems.length > 0 && (
+                <>
+                  {renewedOrderBasketItems.map((order) => (
+                    <ProceduresOrderBasketItemTile
+                      key={order.uuid}
+                      orderBasketItem={order}
+                      onItemClick={() => openEditProceduresForm(order)}
+                      onRemoveClick={() => removeLabOrder(order)}
+                    />
+                  ))}
+                </>
+              )}
+
+              {revisedOrderBasketItems.length > 0 && (
+                <>
+                  {revisedOrderBasketItems.map((order) => (
+                    <ProceduresOrderBasketItemTile
+                      key={order.uuid}
+                      orderBasketItem={order}
+                      onItemClick={() => openEditProceduresForm(order)}
+                      onRemoveClick={() => removeLabOrder(order)}
+                    />
+                  ))}
+                </>
+              )}
+
+              {discontinuedOrderBasketItems.length > 0 && (
+                <>
+                  {discontinuedOrderBasketItems.map((order) => (
+                    <ProceduresOrderBasketItemTile
+                      key={order.uuid}
+                      orderBasketItem={order}
+                      onItemClick={() => openEditProceduresForm(order)}
+                      onRemoveClick={() => removeLabOrder(order)}
+                    />
+                  ))}
+                </>
+              )}
+            </>
+          )}
+        </>
+      )}
+    </Tile>
+  );
+}

package/src/form/procedures-orders/procedures-order-basket-panel/procedures-order-basket-panel.scss

@@ -0,0 +1,74 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@use '@openmrs/esm-styleguide/src/vars' as vars;
+
+.desktopTile {
+  border-left: 4px solid #ffe9bd;
+  background-color: vars.$ui-02;
+  border-top: 1px solid #fbf2e1;
+  border-right: none;
+  padding: 0;
+}
+
+.tabletTile {
+  @extend .desktopTile;
+  border-top: 1px solid #fdeccb;
+}
+
+.collapsedTile {
+  border-bottom: none;
+  min-height: 0;
+
+  .orderBasketHeader {
+    margin-bottom: 0;
+  }
+}
+
+.tabletTile.collapsedTile {
+  border-bottom: 1px solid vars.$grey-2;
+}
+
+.container {
+  background-color: vars.$ui-02;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  text-align: left;
+}
+
+.desktopTile .container {
+  h4 {
+    @include type.type-style('heading-compact-02');
+    color: vars.$text-02;
+  }
+}
+
+.tabletTile .container {
+  padding: spacing.$spacing-03;
+
+  h4 {
+    @include type.type-style('heading-03');
+    color: vars.$ui-05;
+  }
+}
+
+.heading {
+  margin-left: spacing.$spacing-03;
+}
+
+.iconAndLabel {
+  display: flex;
+  align-items: center;
+  margin: spacing.$spacing-03;
+}
+
+.buttonContainer {
+  display: flex;
+  align-items: center;
+}
+
+.chevron {
+  svg {
+    fill: black;
+  }
+}

package/src/form/procedures-orders/procedures-order-basket-panel/procedures-order-basket.scss

@@ -0,0 +1,55 @@
+@use '@carbon/styles/scss/spacing';
+@use '@openmrs/esm-styleguide/src/vars' as vars;
+
+.container {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: calc(100vh - 9rem);
+}
+
+.orderBasketContainer {
+  margin: spacing.$spacing-05;
+}
+
+.orderBasketContainer :global(.cds--btn-set .cds--btn) {
+  max-width: 50%;
+  height: 4rem;
+}
+
+.spinner :global(.cds--loading__stroke) {
+  stroke: var(--brand-03);
+}
+
+.activeMedicationsContainer {
+  border: 1px solid vars.$ui-03;
+}
+
+.tablet {
+  padding: 1.5rem 1rem;
+  background-color: vars.$ui-02;
+}
+
+.desktop {
+  padding: 0rem;
+}
+
+.button {
+  height: 4rem;
+  display: flex;
+  align-content: flex-start;
+  align-items: baseline;
+  min-width: 50%;
+}
+
+.loader {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+}
+
+.inlineNotification,
+.actionNotification {
+  max-width: unset !important;
+}

package/src/header/procedure-header.component.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Calendar, Location } from '@carbon/react/icons';
+import { useSession, formatDate } from '@openmrs/esm-framework';
+import ProcedureIllustration from './procedure-illustration.component';
+import styles from './procedure-header.scss';
+
+export const ProcedureHeader: React.FC = () => {
+  const { t } = useTranslation();
+  const userSession = useSession();
+  const userLocation = userSession?.sessionLocation?.display;
+
+  return (
+    <div className={styles.header}>
+      <div className={styles['left-justified-items']}>
+        <ProcedureIllustration />
+        <div className={styles['page-labels']}>
+          <p className={styles['page-name']}>{t('procedure', 'Procedures')}</p>
+        </div>
+      </div>
+      <div className={styles['right-justified-items']}>
+        <div className={styles['date-and-location']}>
+          <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/procedure-header.scss

@@ -0,0 +1,70 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@use '@openmrs/esm-styleguide/src/vars' as vars;
+
+.header {
+  @include type.type-style('body-compact-02');
+  color: vars.$text-02;
+  height: spacing.$spacing-12;
+  background-color: vars.$ui-02;
+  border: 1px solid vars.$ui-03;
+  border-left: 0px;
+  display: flex;
+  justify-content: space-between;
+}
+
+.left-justified-items {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-left: 0.75rem;
+}
+
+.right-justified-items {
+  @include type.type-style('body-compact-02');
+  color: vars.$text-02;
+  padding-top: 1rem;
+}
+
+.page-name {
+  @include type.type-style('heading-04');
+}
+
+.page-labels {
+  margin-left: 1rem;
+
+  p:first-of-type {
+    margin-bottom: 0.25rem;
+  }
+}
+
+.date-and-location {
+  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);
+}

package/src/header/procedure-illustration.component.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+// import { WatsonHealthScalpelSelect } from "@carbon/react/icons";
+// import styles from "./procedure-header.scss";
+
+const ProcedureIllustration: React.FC = () => {
+  return (
+    <svg width="72" height="72" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <g clip-path="url(#clip0_37_2293)">
+        <path
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M64.8633 16.1368C63.1494 14.4994 60.8703 13.5858 58.5 13.5858C56.1298 13.5858 53.8507 14.4994 52.1368 16.1368L0.772461 67.5H21.5751C23.0531 67.5038 24.5172 67.2145 25.8827 66.6488C27.2482 66.0831 28.4879 65.2522 29.5302 64.2042L64.8633 28.8632C65.6992 28.0277 66.3623 27.0358 66.8148 25.9439C67.2672 24.8521 67.5001 23.6818 67.5001 22.5C67.5001 21.3181 67.2672 20.1479 66.8148 19.056C66.3623 17.9642 65.6992 16.9722 64.8633 16.1368ZM32.3523 42.2838L27.6588 46.9771L34.0254 53.3439L38.7183 48.6499L32.3523 42.2838ZM24.1592 62.4889C24.9784 62.1494 25.7221 61.651 26.3475 61.0225L30.8446 56.5263L24.4771 50.1588L11.6357 63H21.5751C22.4618 63.002 23.3401 62.8283 24.1592 62.4889ZM41.8989 45.468L51.7899 35.5748L61.6809 25.6817C62.0988 25.2639 62.4303 24.7679 62.6565 24.222C62.8827 23.6761 62.9991 23.0909 62.9991 22.5C62.9991 21.9091 62.8827 21.3239 62.6565 20.778C62.4303 20.2321 62.0988 19.736 61.6809 19.3183C60.8238 18.4997 59.6843 18.0429 58.4991 18.0429C57.314 18.0429 56.1744 18.4997 55.3174 19.3183L35.5329 39.1023L41.8989 45.468Z"
+          fill="#7BBCB9"
+        />
+        <path
+          d="M26.3475 61.0225C25.7221 61.651 24.9784 62.1494 24.1592 62.4889C23.3401 62.8283 22.4618 63.002 21.5751 63H11.6357L24.4771 50.1588L30.8446 56.5263L26.3475 61.0225Z"
+          fill="#BCDDDB"
+        />
+        <path d="M27.6588 46.9771L32.3523 42.2838L38.7183 48.6499L34.0254 53.3439L27.6588 46.9771Z" fill="#BCDDDB" />
+        <path
+          d="M61.6809 25.6817L51.7899 35.5748L41.8989 45.468L35.5329 39.1023L55.3174 19.3183C56.1744 18.4997 57.314 18.0429 58.4991 18.0429C59.6843 18.0429 60.8238 18.4997 61.6809 19.3183C62.0988 19.736 62.4303 20.2321 62.6565 20.778C62.8827 21.3239 62.9991 21.9091 62.9991 22.5C62.9991 23.0909 62.8827 23.6761 62.6565 24.222C62.4303 24.7679 62.0988 25.2639 61.6809 25.6817Z"
+          fill="#BCDDDB"
+        />
+        <path
+          d="M11.2502 13.5C10.8052 13.5 10.3702 13.3681 10.0002 13.1208C9.6302 12.8736 9.34181 12.5222 9.17152 12.1111C9.00122 11.6999 8.95666 11.2475 9.04348 10.8111C9.1303 10.3746 9.34459 9.97371 9.65926 9.65904C9.97392 9.34437 10.3748 9.13008 10.8113 9.04326C11.2478 8.95645 11.7002 9.001 12.1113 9.1713C12.5224 9.3416 12.8738 9.62999 13.1211 10C13.3683 10.37 13.5002 10.805 13.5002 11.25C13.4998 11.8466 13.2626 12.4186 12.8407 12.8405C12.4189 13.2623 11.8468 13.4996 11.2502 13.5Z"
+          fill="#BCDDDB"
+        />
+        <path
+          d="M11.2502 36C10.8052 36 10.3702 35.8681 10.0002 35.6208C9.6302 35.3736 9.34181 35.0222 9.17152 34.6111C9.00122 34.1999 8.95666 33.7475 9.04348 33.3111C9.1303 32.8746 9.34459 32.4737 9.65926 32.159C9.97392 31.8444 10.3748 31.6301 10.8113 31.5433C11.2478 31.4564 11.7002 31.501 12.1113 31.6713C12.5224 31.8416 12.8738 32.13 13.1211 32.5C13.3683 32.87 13.5002 33.305 13.5002 33.75C13.4998 34.3466 13.2626 34.9186 12.8407 35.3405C12.4189 35.7623 11.8468 35.9996 11.2502 36Z"
+          fill="#BCDDDB"
+        />
+        <path
+          d="M33.7502 13.5C33.3052 13.5 32.8702 13.3681 32.5002 13.1208C32.1302 12.8736 31.8418 12.5222 31.6715 12.1111C31.5012 11.6999 31.4567 11.2475 31.5435 10.8111C31.6303 10.3746 31.8446 9.97371 32.1593 9.65904C32.4739 9.34437 32.8748 9.13008 33.3113 9.04326C33.7478 8.95645 34.2002 9.001 34.6113 9.1713C35.0224 9.3416 35.3738 9.62999 35.6211 10C35.8683 10.37 36.0002 10.805 36.0002 11.25C35.9998 11.8466 35.7626 12.4186 35.3407 12.8405C34.9189 13.2623 34.3468 13.4996 33.7502 13.5Z"
+          fill="#BCDDDB"
+        />
+        <path
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M33.7502 4.50003C32.3589 4.50424 31.0029 4.93906 29.8686 5.74479C28.7342 6.55052 27.8771 7.68765 27.4149 9.00003H17.5853C17.2079 7.92599 16.5642 6.96521 15.7146 6.20748C14.8649 5.44975 13.837 4.91983 12.727 4.66726C11.6169 4.41468 10.4609 4.44769 9.36706 4.7632C8.27322 5.07872 7.27723 5.66644 6.47221 6.47141C5.66719 7.27639 5.07942 8.27234 4.76385 9.36617C4.44828 10.46 4.41521 11.616 4.66773 12.7261C4.92025 13.8361 5.45011 14.8641 6.20779 15.7138C6.96548 16.5634 7.92623 17.2071 9.00025 17.5847V27.4143C7.49901 27.945 6.23375 28.9894 5.42808 30.3628C4.6224 31.7363 4.3282 33.3503 4.59746 34.9197C4.86672 36.489 5.68211 37.9127 6.89951 38.939C8.11692 39.9653 9.65795 40.5282 11.2502 40.5282C12.8425 40.5282 14.3836 39.9653 15.601 38.939C16.8184 37.9127 17.6338 36.489 17.903 34.9197C18.1723 33.3503 17.8781 31.7363 17.0724 30.3628C16.2667 28.9894 15.0015 27.945 13.5002 27.4143V17.5858C14.4414 17.2501 15.2962 16.7094 16.0027 16.0028C16.7093 15.2961 17.2498 14.4413 17.5853 13.5H27.4147C27.8293 14.6634 28.5557 15.6905 29.5145 16.469C30.4733 17.2475 31.6277 17.7475 32.8515 17.9144C34.0752 18.0813 35.3213 17.9086 36.4535 17.4152C37.5858 16.9218 38.5606 16.1267 39.2716 15.1167C39.9825 14.1068 40.4022 12.9209 40.4848 11.6886C40.5673 10.4562 40.3096 9.22493 39.7398 8.12918C39.1699 7.03343 38.3098 6.11538 37.2535 5.47534C36.1972 4.83531 34.9853 4.49792 33.7502 4.50003ZM10.0002 35.6208C10.3702 35.8681 10.8052 36 11.2502 36C11.8468 35.9996 12.4189 35.7623 12.8407 35.3405C13.2626 34.9186 13.4998 34.3466 13.5002 33.75C13.5002 33.305 13.3683 32.87 13.1211 32.5C12.8738 32.13 12.5224 31.8416 12.1113 31.6713C11.7002 31.501 11.2478 31.4564 10.8113 31.5433C10.3748 31.6301 9.97392 31.8444 9.65926 32.159C9.34459 32.4737 9.1303 32.8746 9.04348 33.3111C8.95666 33.7475 9.00122 34.1999 9.17152 34.6111C9.34181 35.0222 9.6302 35.3736 10.0002 35.6208ZM10.0002 13.1208C10.3702 13.3681 10.8052 13.5 11.2502 13.5C11.8468 13.4996 12.4189 13.2623 12.8407 12.8405C13.2626 12.4186 13.4998 11.8466 13.5002 11.25C13.5002 10.805 13.3683 10.37 13.1211 10C12.8738 9.62999 12.5224 9.3416 12.1113 9.1713C11.7002 9.001 11.2478 8.95645 10.8113 9.04326C10.3748 9.13008 9.97392 9.34437 9.65926 9.65904C9.34459 9.97371 9.1303 10.3746 9.04348 10.8111C8.95666 11.2475 9.00122 11.6999 9.17152 12.1111C9.34181 12.5222 9.6302 12.8736 10.0002 13.1208ZM32.5002 13.1208C32.8702 13.3681 33.3052 13.5 33.7502 13.5C34.3468 13.4996 34.9189 13.2623 35.3407 12.8405C35.7626 12.4186 35.9998 11.8466 36.0002 11.25C36.0002 10.805 35.8683 10.37 35.6211 10C35.3738 9.62999 35.0224 9.3416 34.6113 9.1713C34.2002 9.001 33.7478 8.95645 33.3113 9.04326C32.8748 9.13008 32.4739 9.34437 32.1593 9.65904C31.8446 9.97371 31.6303 10.3746 31.5435 10.8111C31.4567 11.2475 31.5012 11.6999 31.6715 12.1111C31.8418 12.5222 32.1302 12.8736 32.5002 13.1208Z"
+          fill="#7BBCB9"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_37_2293">
+          <rect width="72" height="72" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};
+
+export default ProcedureIllustration;

package/src/hooks/useOrdersWorklist.ts

@@ -0,0 +1,70 @@
+import { type ConfigObject, openmrsFetch, useAppContext, useConfig } from '@openmrs/esm-framework';
+import useSWR from 'swr';
+import { ProcedureConceptClass_UUID } from '../constants';
+import { type DateFilterContext, type Result } from '../types';
+import dayjs from 'dayjs';
+export function useOrdersWorklist(activatedOnOrAfterDate: string, fulfillerStatus: string) {
+  const config = useConfig() as ConfigObject;
+  const { dateRange } = useAppContext<DateFilterContext>('procedures-date-filter') ?? {
+    dateRange: [dayjs().startOf('day').toDate(), new Date()],
+  };
+
+  const responseFormat =
+    'custom:(uuid,orderNumber,patient:(uuid,display,identifiers,person:(uuid,display,age,gender)),concept:(uuid,display,conceptClass),action,careSetting,orderer:(uuid,display),urgency,instructions,bodySite,laterality,commentToFulfiller,procedures,display,fulfillerStatus,dateStopped,scheduledDate,dateActivated,fulfillerComment)';
+  const orderTypeParam = `orderTypes=${config.procedureOrderTypeUuid}&activatedOnOrAfterDate=${dateRange
+    .at(0)
+    .toISOString()}&activatedOnOrBeforeDate=${dateRange
+    .at(1)
+    .toISOString()}&isStopped=false&fulfillerStatus=${fulfillerStatus}&v=${responseFormat}`;
+  const apiUrl = `/ws/rest/v1/order?${orderTypeParam}`;
+
+  const { data, error, isLoading } = useSWR<{ data: { results: Array<Result> } }, Error>(apiUrl, openmrsFetch);
+
+  const orders = data?.data?.results?.filter((order) => {
+    if (fulfillerStatus === '') {
+      return (
+        order.fulfillerStatus === null &&
+        order.dateStopped === null &&
+        order.action === 'NEW' &&
+        order.concept.conceptClass.uuid === ProcedureConceptClass_UUID
+      );
+    } else if (fulfillerStatus === 'IN_PROGRESS') {
+      return (
+        order.fulfillerStatus === 'IN_PROGRESS' &&
+        order.dateStopped === null &&
+        order.action !== 'DISCONTINUE' &&
+        order.concept.conceptClass.uuid === ProcedureConceptClass_UUID
+      );
+    } else if (fulfillerStatus === 'COMPLETED') {
+      return (
+        order.fulfillerStatus === 'COMPLETED' &&
+        order.dateStopped === null &&
+        order.action !== 'DISCONTINUE' &&
+        order.concept.conceptClass.uuid === ProcedureConceptClass_UUID
+      );
+    } else if (fulfillerStatus === 'EXCEPTION') {
+      return (
+        order.fulfillerStatus === 'EXCEPTION' &&
+        order.dateStopped === null &&
+        order.action !== 'DISCONTINUE' &&
+        order.concept.conceptClass.uuid === ProcedureConceptClass_UUID
+      );
+    } else if (fulfillerStatus === 'DECLINED') {
+      return (
+        order.fulfillerStatus === 'DECLINED' &&
+        order.dateStopped === null &&
+        order.action !== 'DISCONTINUE' &&
+        order.concept.conceptClass.uuid === ProcedureConceptClass_UUID
+      );
+    }
+  });
+  const sortedOrders = orders?.sort(
+    (a, b) => new Date(a.dateActivated).getTime() - new Date(b.dateActivated).getTime(),
+  );
+
+  return {
+    workListEntries: sortedOrders?.length > 0 ? sortedOrders : [],
+    isLoading,
+    isError: error,
+  };
+}

package/src/hooks/useSearchGroupedResults.ts

@@ -0,0 +1,22 @@
+import { useMemo } from 'react';
+import { type GroupedOrders } from '../types';
+
+export function useSearchGroupedResults(data: Array<GroupedOrders>, searchString: string) {
+  const searchResults = useMemo(() => {
+    if (searchString && searchString.trim() !== '') {
+      // Normalize the search string to lowercase
+      const lowerSearchString = searchString.toLowerCase();
+      return data.filter((orderGroup) =>
+        orderGroup.orders.some(
+          (order) =>
+            order.orderNumber.toLowerCase().includes(lowerSearchString) ||
+            order.patient.display.toLowerCase().includes(lowerSearchString),
+        ),
+      );
+    }
+
+    return data;
+  }, [searchString, data]);
+
+  return searchResults;
+}

package/src/hooks/useSearchResults.ts

@@ -0,0 +1,39 @@
+import { formatDate, parseDate } from '@openmrs/esm-framework';
+import { useMemo } from 'react';
+import { type Result } from '../types';
+
+export function useSearchResults(data: Result[], searchString: string) {
+  const flattenedData = data.map((eachObject) => {
+    return {
+      ...eachObject,
+      id: eachObject.uuid,
+      date: formatDate(parseDate(eachObject.dateActivated)),
+      patient: eachObject.patient.display.split('-')[1],
+      orderNumber: eachObject.orderNumber,
+      accessionNumber: eachObject.accessionNumber,
+      procedure: eachObject.concept.display,
+      action: eachObject.action,
+      status: eachObject.fulfillerStatus ?? '--',
+      orderer: eachObject.orderer.display,
+      urgency: eachObject.urgency,
+    };
+  });
+
+  const searchResults = useMemo(() => {
+    if (searchString && searchString.trim() !== '') {
+      const search = searchString.toLowerCase();
+      return flattenedData.filter((eachDataRow) =>
+        Object.entries(eachDataRow).some(([header, value]) => {
+          if (header === 'patientUuid') {
+            return false;
+          }
+          return `${value}`.toLowerCase().includes(search);
+        }),
+      );
+    }
+
+    return flattenedData;
+  }, [searchString, data]);
+
+  return searchResults;
+}

package/src/index.ts

@@ -0,0 +1,59 @@
+import { getAsyncLifecycle, defineConfigSchema, getSyncLifecycle, translateFrom } from '@openmrs/esm-framework';
+import { configSchema } from './config-schema';
+import { createLeftPanelLink } from './left-panel-link';
+import workListProcedures from './procedure-tabs/work-list-tab.component';
+import referredProcedures from './procedure-tabs/referred-tab.component';
+import completedProcedures from './procedure-tabs/completed-tab.component';
+import notDoneProcedures from './procedure-tabs/not-done-tab.component';
+import addProcedureToWorklistDialog from './procedures-ordered/pick-procedure-order/add-to-worklist-dialog.component';
+import procedureInstructionsModal from './procedures-ordered/procedure-instructions/procedure-instructions.component';
+import ProceduresOrderBasketPanelExtension from './form/procedures-orders/procedures-order-basket-panel/procedures-order-basket-panel.extension';
+import rejectProcedureOrderDialog from './procedures-ordered/reject-order-dialog/reject-procedure-order-dialog.component';
+import procedureRejectReasonModal from './procedures-ordered/reject-reason/procedure-reject-reason.component';
+import PostProcedureForm from './form/post-procedures/post-procedure-form.component';
+import PrintPreviewModal from './print/print-procedure-results.component';
+
+const moduleName = '@thrustdevs/esm-procedure-orders-app';
+
+const options = {
+  featureName: 'esm-procedure-orders-app',
+  moduleName,
+};
+
+export const importTranslation = require.context('../translations', false, /.json$/, 'lazy');
+
+export function startupApp() {
+  defineConfigSchema(moduleName, configSchema);
+}
+
+export const root = getAsyncLifecycle(() => import('./root.component'), options);
+
+export const procedureDashboardLink = getSyncLifecycle(
+  createLeftPanelLink({
+    name: 'procedure',
+    title: 'Procedures',
+  }),
+  options,
+);
+
+// Modals
+export const rejectProcedureOrderDialogComponent = getSyncLifecycle(rejectProcedureOrderDialog, options);
+
+export const worklistProceduresTabComponent = getSyncLifecycle(workListProcedures, options);
+
+export const referredProceduresTabComponent = getSyncLifecycle(referredProcedures, options);
+export const completedProceduresTabComponent = getSyncLifecycle(completedProcedures, options);
+export const notDoneProceduresTabComponent = getSyncLifecycle(notDoneProcedures, options);
+export const procedureInstructionsModalComponent = getSyncLifecycle(procedureInstructionsModal, options);
+export const procedureRejectModalComponent = getSyncLifecycle(procedureRejectReasonModal, options);
+export const addProcedureToWorklistDialogComponent = getSyncLifecycle(addProcedureToWorklistDialog, options);
+
+export const proceduresOrderPanel = getSyncLifecycle(ProceduresOrderBasketPanelExtension, options);
+export const postProcedureResults = getSyncLifecycle(PostProcedureForm, options);
+export const printProcedureReportModal = getSyncLifecycle(PrintPreviewModal, options);
+
+// t('addProcedureOrderWorkspaceTitle', 'Add procedure order')
+export const addProceduresOrderWorkspace = getAsyncLifecycle(
+  () => import('./form/procedures-orders/add-procedures-order/add-procedures-order.workspace'),
+  options,
+);