set up for v2

src/approved-list/approved-list.component.tsx

@@ -0,0 +1,88 @@
+import React, { useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { useSession, usePagination } from "@openmrs/esm-framework";
+import {
+  DataTable,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@carbon/react";
+import styles from "./approved-list.scss";
+import { usePatientQueuesList } from "../tests-ordered/tests-ordered-list.resource";
+
+const ApprovedList: React.FC = () => {
+  const { t } = useTranslation();
+  const session = useSession();
+
+  const { patientQueueEntries, isLoading } = usePatientQueuesList(
+    session?.sessionLocation?.uuid,
+    status,
+    session.user.systemId
+  );
+
+  const pageSizes = [10, 20, 30, 40, 50];
+  const [currentPageSize, setPageSize] = useState(10);
+  const {
+    goTo,
+    results: paginatedQueueEntries,
+    currentPage,
+  } = usePagination(patientQueueEntries, currentPageSize);
+
+  const tableColumns = [
+    { id: 0, header: t("patient", "Patient"), key: "patient" },
+    { id: 1, header: t("orders", "Orders"), key: "orders" },
+    { id: 2, header: t("date", "Date"), key: "date" },
+    { id: 3, header: t("action", "Action"), key: "action" },
+  ];
+
+  const tableRows = useMemo(() => {
+    return paginatedQueueEntries.map((entry) => ({
+      ...entry,
+      patient: "",
+      orders: "",
+      date: "",
+      action: "",
+    }));
+  }, []);
+
+  return (
+    <DataTable rows={tableRows} headers={tableColumns} useZebraStyles>
+      {({ rows, headers, getHeaderProps, getTableProps, getRowProps }) => (
+        <TableContainer className={styles.tableContainer}>
+          <Table {...getTableProps()} className={styles.activePatientsTable}>
+            <TableHead>
+              <TableRow>
+                {headers.map((header) => (
+                  <TableHeader {...getHeaderProps({ header })}>
+                    {header.header?.content ?? header.header}
+                  </TableHeader>
+                ))}
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {rows.map((row, index) => {
+                return (
+                  <React.Fragment key={row.id}>
+                    <TableRow {...getRowProps({ row })} key={row.id}>
+                      {row.cells.map((cell) => (
+                        <TableCell key={cell.id}>
+                          {cell.value?.content ?? cell.value}
+                        </TableCell>
+                      ))}
+                    </TableRow>
+                  </React.Fragment>
+                );
+              })}
+            </TableBody>
+          </Table>
+        </TableContainer>
+      )}
+    </DataTable>
+  );
+};
+
+export default ApprovedList;

src/lab-tabs/approved-tab.component.tsx

@@ -1,10 +1,10 @@
 import React from "react";
-import CompletedList from "../completed-list/completed-list.component";
+import ApprovedList from "../approved-list/approved-list.component";
 
 const ApprovedComponent = () => {
   return (
     <div>
-      <CompletedList fulfillerStatus={"COMPLETED"} />
+      <ApprovedList />
     </div>
   );
 };

src/lab-tabs/review-tab.component.tsx

@@ -4,7 +4,7 @@ import ReviewList from "../review-list/review-list.component";
 const ReviewComponent = () => {
   return (
     <div>
-      <ReviewList fulfillerStatus={"IN_PROGRESS"} />
+      <ReviewList />
     </div>
   );
 };

src/lab-tabs/work-list-tab.component.tsx

@@ -4,7 +4,7 @@ import WorkList from "../work-list/work-list.component";
 const WorkListComponent = () => {
   return (
     <div>
-      <WorkList fulfillerStatus={"IN_PROGRESS"} />
+      <WorkList />
     </div>
   );
 };

src/lab-tiles/completed-tile.component.tsx

@@ -12,9 +12,9 @@ const ApprovedTileComponent = () => {
 
   return (
     <SummaryTile
-      label={t("completed", "Completed")}
+      label={t("approved", "Approved")}
       value={data?.length}
-      headerLabel={t("approved", "Approved")}
+      headerLabel={t("approved", "Approved Tests")}
     />
   );
 };

src/lab-tiles/referred-tile.component.tsx

@@ -22,9 +22,9 @@ const ReferredTileComponent = () => {
 
   return (
     <SummaryTile
-      label={t("transferred", "Transferred")}
+      label={t("referred", "Referred")}
       value={filteredData?.length}
-      headerLabel={t("referredTests", "Referred tests")}
+      headerLabel={t("referredTests", "Referred Tests")}
     />
   );
 };

src/lab-tiles/rejected-tile.component.tsx

@@ -17,9 +17,9 @@ const RejectedTileComponent = () => {
 
   return (
     <SummaryTile
-      label={t("orders", "Tests")}
+      label={t("rejected", "Rejected")}
       value={filteredData?.length}
-      headerLabel={t("testsRejected", "Rejected")}
+      headerLabel={t("rejectedTests", "Rejected Tests")}
     />
   );
 };

src/lab-tiles/tests-ordered-tile.component.tsx

@@ -19,9 +19,9 @@ const TestsOrderedTileComponent = () => {
 
   return (
     <SummaryTile
-      label={t("orders", "Orders")}
+      label={t("ordered", "Ordered")}
       value={filteredData?.length}
-      headerLabel={t("testsOrdered", "Tests ordered")}
+      headerLabel={t("ordered", "Ordered Tests")}
     />
   );
 };

src/lab-tiles/worklist-tile.component.tsx

@@ -21,9 +21,9 @@ const WorklistTileComponent = () => {
 
   return (
     <SummaryTile
-      label={t("inProgress", "In progress")}
+      label={t("worklist", "Work List")}
       value={filteredData?.length}
-      headerLabel={t("worklist", "Worklist")}
+      headerLabel={t("worklist", "Work List")}
     />
   );
 };