diff --git a/src/index.ts b/src/index.ts
index 1548cb00..363d2493 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -88,6 +88,26 @@ export const rejectOrderDialog = getAsyncLifecycle(
options
);
+export const reviewComponent = getAsyncLifecycle(
+ () => import("./lab-tabs/review-tab.component"),
+ options
+);
+
+export const approvedComponent = getAsyncLifecycle(
+ () => import("./lab-tabs/approved-tab.component"),
+ options
+);
+
+export const referredTestComponent = getAsyncLifecycle(
+ () => import("./lab-tabs/referred-tab.component"),
+ options
+);
+
+export const worklistComponent = getAsyncLifecycle(
+ () => import("./lab-tabs/work-list-tab.component"),
+ options
+);
+
export const pickLabRequestButton = getAsyncLifecycle(
() => import("./queue-list/pick-lab-request-menu.component"),
options
diff --git a/src/lab-tabs/approved-tab.component.tsx b/src/lab-tabs/approved-tab.component.tsx
new file mode 100644
index 00000000..ffa78e4e
--- /dev/null
+++ b/src/lab-tabs/approved-tab.component.tsx
@@ -0,0 +1,14 @@
+import React from "react";
+import CompletedList from "../completed-list/completed-list.component";
+import styles from "../queue-list/laboratory-queue.scss";
+
+const ApprovedComponent = () => {
+ return (
+
+ );
+};
+
+export default ApprovedComponent;
diff --git a/src/lab-tabs/referred-tab.component.tsx b/src/lab-tabs/referred-tab.component.tsx
new file mode 100644
index 00000000..375803c5
--- /dev/null
+++ b/src/lab-tabs/referred-tab.component.tsx
@@ -0,0 +1,18 @@
+import React from "react";
+import { EmptyState } from "@openmrs/esm-patient-common-lib";
+import styles from "../queue-list/laboratory-queue.scss";
+
+const ReferredComponent = () => {
+ return (
+
+ );
+};
+
+export default ReferredComponent;
diff --git a/src/lab-tabs/review-tab.component.tsx b/src/lab-tabs/review-tab.component.tsx
new file mode 100644
index 00000000..56496a9f
--- /dev/null
+++ b/src/lab-tabs/review-tab.component.tsx
@@ -0,0 +1,14 @@
+import React from "react";
+import ReviewList from "../review-list/review-list.component";
+import styles from "../queue-list/laboratory-queue.scss";
+
+const ReviewComponent = () => {
+ return (
+
+ );
+};
+
+export default ReviewComponent;
diff --git a/src/lab-tabs/work-list-tab.component.tsx b/src/lab-tabs/work-list-tab.component.tsx
new file mode 100644
index 00000000..90fea60e
--- /dev/null
+++ b/src/lab-tabs/work-list-tab.component.tsx
@@ -0,0 +1,14 @@
+import React from "react";
+import WorkList from "../work-list/work-list.component";
+import styles from "../queue-list/laboratory-queue.scss";
+
+const WorkListComponent = () => {
+ return (
+
+ );
+};
+
+export default WorkListComponent;
diff --git a/src/queue-list/laboratory-tabs.component.tsx b/src/queue-list/laboratory-tabs.component.tsx
index bc6d1261..bd2b1732 100644
--- a/src/queue-list/laboratory-tabs.component.tsx
+++ b/src/queue-list/laboratory-tabs.component.tsx
@@ -1,4 +1,12 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useMemo, useState } from "react";
+import {
+ type AssignedExtension,
+ Extension,
+ ExtensionSlot,
+ useConnectedExtensions,
+ attach,
+ detachAll,
+} from "@openmrs/esm-framework";
import { Tab, Tabs, TabList, TabPanels, TabPanel, Search } from "@carbon/react";
import { useTranslation } from "react-i18next";
import styles from "./laboratory-queue.scss";
@@ -15,9 +23,57 @@ enum TabTypes {
ALL,
}
+const labPanelSlot = "lab-panels-slot";
+
const LaboratoryQueueTabs: React.FC = () => {
const { t } = useTranslation();
const [selectedTab, setSelectedTab] = useState(0);
+ const tabExtensions = useConnectedExtensions(
+ labPanelSlot
+ ) as AssignedExtension[];
+
+ const [derivedSlots, setDerivedSlots] = useState<
+ { slot: string; extension: string }[]
+ >([]);
+
+ const extraPanels = useMemo(() => {
+ const filteredExtensions = tabExtensions.filter(
+ (extension) => Object.keys(extension.meta).length > 0
+ );
+ const derivedSlotsBuffer = [];
+ return filteredExtensions.map((extension, index) => {
+ const slotName = `${labPanelSlot}-${index}`;
+ derivedSlotsBuffer.push({
+ slot: slotName,
+ extension: extension.name,
+ });
+ if (filteredExtensions.length === index + 1) {
+ setDerivedSlots(derivedSlotsBuffer);
+ }
+
+ return (
+
+
+
+ );
+ });
+ }, [tabExtensions?.length]);
+
+ useEffect(() => {
+ derivedSlots.forEach(({ slot, extension }) => {
+ attach(slot, extension);
+ });
+
+ return () => {
+ derivedSlots.forEach(({ slot }) => {
+ detachAll(slot);
+ });
+ };
+ }, [derivedSlots]);
+
return (
@@ -32,10 +88,28 @@ const LaboratoryQueueTabs: React.FC = () => {
contained
>
{t("testedOrders", "Tests ordered")}
- {t("worklist", "Worklist")}
- {t("referredTests", "Referred tests")}
- {t("reviewList", "Review")}
- {t("approveList", "Approved")}
+ {tabExtensions
+ .filter((extension) => Object.keys(extension.meta).length > 0)
+ .map((extension, index) => {
+ const { name, title } = extension.meta;
+
+ if (name && title) {
+ return (
+
+ {t(title, {
+ ns: extension.moduleName,
+ defaultValue: title,
+ })}
+
+ );
+ } else {
+ return null;
+ }
+ })}
@@ -44,33 +118,7 @@ const LaboratoryQueueTabs: React.FC = () => {
-
-
-
-
-
-
-
-
-
-
-
-
+ {extraPanels}
diff --git a/src/routes.json b/src/routes.json
index ded6c0ef..4d3badff 100644
--- a/src/routes.json
+++ b/src/routes.json
@@ -68,6 +68,42 @@
"name" : "reject-order-dialog",
"component": "rejectOrderDialog"
},
+ {
+ "name": "worklist-panel-component",
+ "slot": "lab-panels-slot",
+ "component": "worklistComponent",
+ "meta": {
+ "name": "worklistPanelSlot",
+ "title": "Worklist"
+ }
+ },
+ {
+ "name": "referred-panel-component",
+ "slot": "lab-panels-slot",
+ "component": "referredTestComponent",
+ "meta": {
+ "name": "referredPanleSlot",
+ "title": "Referred tests"
+ }
+ },
+ {
+ "name": "review-panel-component",
+ "slot": "lab-panels-slot",
+ "component": "reviewComponent",
+ "meta": {
+ "name": "reviewPanelSlot",
+ "title": "Review"
+ }
+ },
+ {
+ "name": "approved-panel-component",
+ "slot": "lab-panels-slot",
+ "component": "approvedComponent",
+ "meta": {
+ "name": "approvedPanelSlot",
+ "title": "Approved"
+ }
+ },
{
"name": "pick-lab-request-button",
"component": "pickLabRequestButton",