(fix) : fix the non display of the approved or completed table

src/completed-list/completed-list.component.tsx

@@ -2,15 +2,13 @@ import React, { useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useGetOrdersWorklist } from "../work-list/work-list.resource";
 import {
-  ErrorState,
   formatDate,
   parseDate,
   usePagination,
-  isDesktop,
+  ConfigurableLink,
 } from "@openmrs/esm-framework";
 import {
   DataTable,
-  DataTableSkeleton,
   Pagination,
   Table,
   TableBody,
@@ -19,17 +17,15 @@ import {
   TableHead,
   TableHeader,
   TableRow,
+  Tile,
   TableToolbar,
   TableToolbarContent,
-  TableToolbarSearch,
   Layer,
-  Tile,
+  TableToolbarSearch,
   DatePicker,
   DatePickerInput,
-  Select,
-  SelectItem,
+  DataTableSkeleton,
   Tag,
-  Dropdown,
 } from "@carbon/react";
 import styles from "./completed-list.scss";
 import { getStatusColor } from "../utils/functions";
@@ -38,97 +34,13 @@ interface CompletedListProps {
   fulfillerStatus: string;
 }
 
-interface TableRowProps {
-  entry: {
-    uuid: string;
-    orderNumber: string;
-    accessionNumber: string;
-    concept: { display: string };
-    action: string;
-    fulfillerStatus: string;
-    orderer: { display: string };
-    urgency: string;
-    dateActivated: string;
-    patient: { display: string };
-  };
-}
-
-const StatusTag: React.FC<{ fulfillerStatus: string }> = ({
-  fulfillerStatus,
-}) => {
-  return (
-    <Tag>
-      <span
-        className={styles.statusContainer}
-        style={{ color: `${getStatusColor(fulfillerStatus)}` }}
-      >
-        <span>{fulfillerStatus}</span>
-      </span>
-    </Tag>
-  );
-};
-
-const CustomTableRow: React.FC<TableRowProps> = ({ entry }) => {
-  const {
-    uuid,
-    orderNumber,
-    accessionNumber,
-    concept,
-    action,
-    fulfillerStatus,
-    orderer,
-    urgency,
-    dateActivated,
-    patient,
-  } = entry;
-
-  return (
-    <TableRow key={uuid}>
-      <TableCell>
-        <span>{formatDate(parseDate(dateActivated))}</span>
-      </TableCell>
-      <TableCell>
-        <span>{orderNumber}</span>
-      </TableCell>
-      <TableCell>
-        <span>{patient.display.split("-")[1]}</span>
-      </TableCell>
-      <TableCell>
-        <span>{accessionNumber}</span>
-      </TableCell>
-      <TableCell>
-        <span>{concept.display}</span>
-      </TableCell>
-      <TableCell>
-        <span className="single-line-content">{action}</span>
-      </TableCell>
-      <TableCell>
-        <StatusTag fulfillerStatus={fulfillerStatus} />
-      </TableCell>
-      <TableCell>
-        <span>{orderer.display}</span>
-      </TableCell>
-      <TableCell>
-        <span>{urgency}</span>
-      </TableCell>
-    </TableRow>
-  );
-};
-
 const CompletedList: React.FC<CompletedListProps> = ({ fulfillerStatus }) => {
   const { t } = useTranslation();
 
-  const [activatedOnOrAfterDate, setActivatedOnOrAfterDate] = useState("");
+  const { workListEntries, isLoading } = useGetOrdersWorklist(fulfillerStatus);
 
-  const { workListEntries, isLoading } = useGetOrdersWorklist(
-    activatedOnOrAfterDate,
-    fulfillerStatus
-  );
-
-  const pageSizes = [5, 10, 15, 20, 25, 30, 35, 40, 45, 50];
-  const [page, setPage] = useState(1);
-  const [currentPageSize, setPageSize] = useState(5);
-  const [nextOffSet, setNextOffSet] = useState(0);
+  const pageSizes = [10, 20, 30, 40, 50];
+  const [currentPageSize, setPageSize] = useState(10);
 
   const {
     goTo,
@@ -153,28 +65,134 @@ const CompletedList: React.FC<CompletedListProps> = ({ fulfillerStatus }) => {
   ];
 
   const tableRows = useMemo(() => {
-    return paginatedWorkListEntries?.map((entry, index) => (
-      <CustomTableRow key={index} entry={entry} />
-    ));
-  }, [paginatedWorkListEntries]);
+    return paginatedWorkListEntries
+      ?.filter(
+        (item) =>
+          (item.action === "DISCONTINUE" || item.action === "REVISE") &&
+          item.fulfillerStatus === fulfillerStatus
+      )
+      .map((entry) => ({
+        ...entry,
+        id: entry?.uuid,
+        date: formatDate(parseDate(entry?.dateActivated)),
+
+        patient: (
+          <ConfigurableLink
+            to={`\${openmrsSpaBase}/patient/${entry?.patient?.uuid}/chart/laboratory-orders`}
+          >
+            {entry?.patient?.display.split("-")[1]}
+          </ConfigurableLink>
+        ),
+        orderNumber: entry?.orderNumber,
+        accessionNumber: entry?.accessionNumber,
+        test: entry?.concept?.display,
+        action: entry?.action,
+        status: (
+          <span
+            className={styles.statusContainer}
+            style={{ color: `${getStatusColor(entry?.fulfillerStatus)}` }}
+          >
+            {entry?.fulfillerStatus}
+          </span>
+        ),
+        orderer: entry?.orderer?.display,
+        orderType: entry?.orderType.display,
+        urgency: entry?.urgency,
+      }));
+  }, [fulfillerStatus, paginatedWorkListEntries]);
 
   if (isLoading) {
     return <DataTableSkeleton role="progressbar" />;
   }
 
-  if (paginatedWorkListEntries?.length > 0) {
-    return <DataTable rows={tableRows} headers={tableColumns} useZebraStyles />;
-  } else {
+  if (paginatedWorkListEntries?.length >= 0) {
     return (
-      <div className={styles.tileContainer}>
-        <Tile className={styles.tile}>
-          <div className={styles.tileContent}>
-            <p className={styles.content}>
-              {t("noCompletedListToDisplay", "No Completed List to display")}
-            </p>
-          </div>
-        </Tile>
-      </div>
+      <DataTable rows={tableRows} headers={tableColumns} useZebraStyles>
+        {({
+          rows,
+          headers,
+          getHeaderProps,
+          getTableProps,
+          getRowProps,
+          onInputChange,
+        }) => (
+          <TableContainer className={styles.tableContainer}>
+            <TableToolbar
+              style={{
+                position: "static",
+              }}
+            >
+              <TableToolbarContent>
+                <Layer style={{ margin: "5px" }}>
+                  <TableToolbarSearch
+                    expanded
+                    onChange={onInputChange}
+                    placeholder={t("searchThisList", "Search this list")}
+                    size="sm"
+                  />
+                </Layer>
+              </TableToolbarContent>
+            </TableToolbar>
+            <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>
+            {rows.length === 0 ? (
+              <div className={styles.tileContainer}>
+                <Tile className={styles.tile}>
+                  <div className={styles.tileContent}>
+                    <p className={styles.content}>
+                      {t(
+                        "noWorklistsToDisplay",
+                        "No worklists orders to display"
+                      )}
+                    </p>
+                  </div>
+                </Tile>
+              </div>
+            ) : null}
+            <Pagination
+              forwardText="Next page"
+              backwardText="Previous page"
+              page={currentPage}
+              pageSize={currentPageSize}
+              pageSizes={pageSizes}
+              totalItems={workListEntries?.length}
+              className={styles.pagination}
+              onChange={({ pageSize, page }) => {
+                if (pageSize !== currentPageSize) {
+                  setPageSize(pageSize);
+                }
+                if (page !== currentPage) {
+                  goTo(page);
+                }
+              }}
+            />
+          </TableContainer>
+        )}
+      </DataTable>
     );
   }
 };

src/completed-list/completed-list.scss

@@ -194,10 +194,10 @@ title {
 }
 
 .toolbar {
-  display: flex;
-  align-items: center;
-  padding: 5px;
-  margin: 10px;
+  position: static;
+  height: 3rem;
+  overflow: visible;
+  background-color: color;
 }
 
 .tileContainer {
@@ -221,4 +221,4 @@ title {
   @include type.type-style('heading-compact-02');
   color: $text-02;
   margin-bottom: 0.5rem;
-}
+}

src/config-schema.ts

@@ -23,7 +23,7 @@ export const configSchema = {
   },
   laboratoryOrderTypeUuid: {
     _type: Type.String,
-    _default: "52a447d3-a64a-11e3-9aeb-50e549534c5e",
+    _default: "",
     _description: "Uuid for orderType",
   },
   laboratoryReferalDestinationUuid: {

src/header/laboratory-header.component.tsx

@@ -15,7 +15,6 @@ export const LaboratoryHeader: React.FC = () => {
       <div className={styles["left-justified-items"]}>
         <LaboratoryIllustration />
         <div className={styles["page-labels"]}>
-          {/* <p>{t('laboratory', 'Laboratory')}</p> */}
           <p className={styles["page-name"]}>{t("laboratory", "Laboratory")}</p>
         </div>
       </div>

src/header/laboratory-header.scss

@@ -7,8 +7,11 @@
   color: $text-02;
   height: spacing.$spacing-12;
   background-color: $ui-02;
+  border: 1px solid $ui-03;
+  border-left: 0px;
   display: flex;
   justify-content: space-between;
+  margin-bottom: 2rem;
 }
 
 .left-justified-items {