@openmrs/esm-laboratory-app 1.0.1-pre.96

package/src/review-list/review-list.component.tsx

@@ -0,0 +1,269 @@
+import React, { useCallback, useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { useGetOrdersWorklist } from "../work-list/work-list.resource";
+import {
+  ErrorState,
+  formatDate,
+  parseDate,
+  showModal,
+  usePagination,
+} from "@openmrs/esm-framework";
+import {
+  DataTable,
+  DataTableSkeleton,
+  Pagination,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableHeader,
+  TableRow,
+  TableToolbar,
+  TableToolbarContent,
+  TableToolbarSearch,
+  Layer,
+  Tile,
+  DatePicker,
+  DatePickerInput,
+  Select,
+  SelectItem,
+  Button,
+  Tag,
+} from "@carbon/react";
+
+import styles from "./review-list.scss";
+import { Add } from "@carbon/react/icons";
+import { Ob } from "../patient-chart/laboratory-order.resource";
+import { Encounter } from "../types";
+import { getStatusColor } from "../utils/functions";
+
+interface ReviewlistProps {
+  fulfillerStatus: string;
+}
+interface ApproveResultMenuProps {
+  encounterUuid: string;
+}
+
+const ApproveTestMenu: React.FC<ApproveResultMenuProps> = ({
+  encounterUuid,
+}) => {
+  const { t } = useTranslation();
+  const launchReviewItemModal = useCallback(() => {
+    const dispose = showModal("review-item-dialog", {
+      encounterUuid,
+      closeModal: () => dispose(),
+    });
+  }, [encounterUuid]);
+
+  return (
+    <Button
+      kind="ghost"
+      onClick={launchReviewItemModal}
+      iconDescription={t("approveTest", "Approve Results")}
+      renderIcon={(props) => <Add size={16} {...props} />}
+    >
+      {t("approveTest", "Approve Results")}
+    </Button>
+  );
+};
+
+const ReviewList: React.FC<ReviewlistProps> = ({ fulfillerStatus }) => {
+  const { t } = useTranslation();
+
+  const [activatedOnOrAfterDate, setActivatedOnOrAfterDate] = useState("");
+
+  const { workListEntries, isLoading } = useGetOrdersWorklist(
+    activatedOnOrAfterDate,
+    fulfillerStatus
+  );
+
+  const pageSizes = [10, 20, 30, 40, 50];
+  const [page, setPage] = useState(1);
+  const [currentPageSize, setPageSize] = useState(10);
+  const [nextOffSet, setNextOffSet] = useState(0);
+
+  const {
+    goTo,
+    results: paginatedWorkListEntries,
+    currentPage,
+  } = usePagination(workListEntries, currentPageSize);
+
+  // get picked orders
+  let columns = [
+    { id: 0, header: t("date", "Date"), key: "date" },
+
+    { id: 1, header: t("orderNumber", "Order Number"), key: "orderNumber" },
+    {
+      id: 2,
+      header: t("accessionNumber", "Accession Number"),
+      key: "accessionNumber",
+    },
+    { id: 3, header: t("test", "Test"), key: "test" },
+    { id: 4, header: t("action", "Action"), key: "action" },
+    { id: 5, header: t("status", "Status"), key: "status" },
+    { id: 6, header: t("orderer", "Orderer"), key: "orderer" },
+    { id: 7, header: t("orderType", "Order Type"), key: "orderType" },
+    { id: 8, header: t("urgency", "Urgency"), key: "urgency" },
+  ];
+
+  const tableRows = useMemo(() => {
+    return paginatedWorkListEntries?.map((entry, index) => ({
+      ...entry,
+      id: entry.uuid,
+      date: {
+        content: (
+          <>
+            <span>{formatDate(parseDate(entry.dateActivated))}</span>
+          </>
+        ),
+      },
+      orderNumber: { content: <span>{entry.orderNumber}</span> },
+      accessionNumber: { content: <span>{entry.accessionNumber}</span> },
+      test: { content: <span>{entry.concept.display}</span> },
+      action: { content: <span>{entry.action}</span> },
+      status: {
+        content: (
+          <>
+            <Tag>
+              <span
+                className={styles.statusContainer}
+                style={{ color: `${getStatusColor(entry.fulfillerStatus)}` }}
+              >
+                <span>{entry.fulfillerStatus}</span>
+              </span>
+            </Tag>
+          </>
+        ),
+      },
+      orderer: { content: <span>{entry.orderer.display}</span> },
+      orderType: { content: <span>{entry.orderType.display}</span> },
+      urgency: { content: <span>{entry.urgency}</span> },
+    }));
+  }, [paginatedWorkListEntries]);
+
+  if (isLoading) {
+    return <DataTableSkeleton role="progressbar" />;
+  }
+  if (paginatedWorkListEntries?.length >= 0) {
+    return (
+      <div>
+        <div className={styles.headerBtnContainer}></div>
+        <DataTable rows={tableRows} headers={columns} useZebraStyles>
+          {({
+            rows,
+            headers,
+            getHeaderProps,
+            getTableProps,
+            getRowProps,
+            onInputChange,
+          }) => (
+            <TableContainer className={styles.tableContainer}>
+              <TableToolbar
+                style={{
+                  position: "static",
+                  height: "3rem",
+                  overflow: "visible",
+                  backgroundColor: "color",
+                }}
+              >
+                <TableToolbarContent>
+                  <Layer style={{ margin: "5px" }}>
+                    <DatePicker dateFormat="Y-m-d" datePickerType="single">
+                      <DatePickerInput
+                        labelText={""}
+                        id="activatedOnOrAfterDate"
+                        placeholder="YYYY-MM-DD"
+                        onChange={(event) => {
+                          setActivatedOnOrAfterDate(event.target.value);
+                        }}
+                        type="date"
+                        value={activatedOnOrAfterDate}
+                      />
+                    </DatePicker>
+                  </Layer>
+                  <Layer>
+                    <TableToolbarSearch
+                      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>
+                          ))}
+                          <TableCell className="cds--table-column-menu">
+                            <ApproveTestMenu
+                              encounterUuid={
+                                paginatedWorkListEntries[index].encounter.uuid
+                              }
+                            />
+                          </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(
+                          "noReviewListToDisplay",
+                          "No review list 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>
+      </div>
+    );
+  }
+};
+
+export default ReviewList;

package/src/review-list/review-list.scss

@@ -0,0 +1,189 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@import "~@openmrs/esm-styleguide/src/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;
+}
+
+
+.orderTabs {
+  grid-column: 'span 2';
+  padding: 0 spacing.$spacing-05;
+}
+
+.newListButton {
+  width: fit-content;
+  justify-self: end;
+  align-self: center;
+}
+
+.hiddenTabsContent,
+.tabs .hiddenTabsContent {
+  display: none;
+}
+
+.patientListTableContainer {
+  grid-row: 3 / 4;
+  grid-column: 1 / 2;
+  height: 100%;
+  margin: 0.5rem spacing.$spacing-05;
+  background-color: $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: $ui-02;
+    border-bottom: 1px solid $ui-03;
+    border-top: 1px solid $ui-03;
+  }
+
+  :global(.cds--data-table--zebra) tbody tr[data-parent-row]:nth-child(4n + 3) td {
+    background-color: $ui-01;
+    border-bottom: 1px solid $ui-03;
+  }
+}
+
+.tableContainer {
+  background-color: $ui-01;
+  margin: 0 spacing.$spacing-05;
+  padding: 0;
+
+  a {
+    text-decoration: none;
+  }
+
+  th {
+    color: $text-02;
+  }
+
+  :global(.cds--data-table) {
+    background-color: $ui-03;
+  }
+
+  .toolbarContent {
+    height: spacing.$spacing-07;
+    margin-bottom: spacing.$spacing-02;
+  }
+}
+
+.activePatientsTable tr:last-of-type {
+  td {
+    border-bottom: none;
+  }
+}
+.headerBtnContainer {
+  background-color: $ui-background;
+  padding: spacing.$spacing-05;
+  text-align: right;
+}
+
+.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: $ui-03;
+}
+
+.locationFilter {
+  width: 25rem;
+}
+
+.search {
+  width: 100%;
+  max-width: 16rem;
+  background-color: $ui-02;
+  border-bottom-color: $ui-03;
+}
+
+.container {
+  background-color: $ui-01;
+}
+
+.tileContainer {
+  background-color: $ui-02;
+  border-top: 1px solid $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: $text-02;
+  margin-bottom: 0.5rem;
+}
+
+.section {
+  table {
+    font-family: Arial, sans-serif;
+    border-collapse: collapse;
+    width: 100%;
+  }
+  
+  td, th {
+    border: 1px solid #000;
+    text-align: left;
+    font-size: 8px;
+    padding: 8px;
+    width: 80px;
+  }
+  
+  th {
+    background-color: #f2f2f2;
+  }
+
+  
+}

package/src/root.component.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { BrowserRouter, Route, Routes } from "react-router-dom";
+import Laboratory from "./laboratory.component";
+
+const Root: React.FC = () => {
+  return (
+    <BrowserRouter basename={`${window.spaBase}/home/laboratory`}>
+      <Routes>
+        <Route path="/" element={<Laboratory />} />
+      </Routes>
+    </BrowserRouter>
+  );
+};
+
+export default Root;

package/src/root.scss

@@ -0,0 +1,50 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.productiveHeading01 {
+  @include type.type-style("heading-01");
+}
+
+.productiveHeading02 {
+  @include type.type-style("heading-02");
+}
+
+.productiveHeading03 {
+  @include type.type-style("heading-03");
+}
+
+.productiveHeading04 {
+  @include type.type-style("heading-04");
+}
+
+.bodyLong01 {
+  @include type.type-style("body-01");
+}
+
+.bodyShort01 {
+  @include type.type-style("body-compact-01");
+}
+
+.bodyShort02 {
+  @include type.type-style("body-compact-02");
+}
+
+.text02 {
+  color: $text-02;
+}
+
+.label01 {
+  @include type.type-style("label-01")
+}
+
+.modal {
+  position: fixed;
+  width: 100vw;
+  height: 100vh;
+  display: grid;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 9000;
+  justify-items: center;
+  align-items: center;
+}

package/src/routes.json

@@ -0,0 +1,72 @@
+{
+  "$schema": "https://json.openmrs.org/routes.schema.json",
+  "backendDependencies": {
+    "fhir2": "^1.2.0",
+    "webservices.rest": "^2.24.0"
+  },
+  "pages": [
+    {
+      "component": "root",
+      "route": "laboratory"
+    }
+  ],
+  "extensions": [
+    {
+      "name": "laboratory-dashboard",
+      "slot": "laboratory-dashboard-slot",
+      "component": "root"
+    },
+    {
+      "name": "laboratory-dashboard-link",
+      "slot": "homepage-dashboard-slot",
+      "component": "laboratoryDashboardLink",
+      "meta": {
+        "name": "laboratory",
+        "slot": "laboratory-dashboard-slot",
+        "title": "Laboratory"
+      }
+    },
+    {
+      "name": "laboratory-patient-chart-link",
+      "slot": "patient-chart-dashboard-slot",
+      "component": "laboratoryOrderDashboardLink",
+      "order": 13,
+      "meta": {
+        "path": "laboratory-orders",
+        "slot": "laboratory-orders-dashboard-slot",
+        "title": "Laboratory",
+        "columns": 1,
+        "layoutMode": "anchored"
+      }
+    },
+    {
+      "name": "laboratory-orders-summary",
+      "slot": "laboratory-orders-dashboard-slot",
+      "component": "laboratoryOrderComponent"
+    },
+    {
+      "name": "add-to-worklist-dialog",
+      "component": "addToWorklistDialog"
+    },
+    {
+      "name": "results-summary",
+      "component": "resultsSummaryWorkSpace"
+    },
+    {
+      "name":"edit-results-dialog",
+      "component": "editResultsDialog"
+    },
+    {
+      "name":"send-email-dialog",
+      "component": "sendEmailDialog"
+    },
+    {
+      "name" : "review-item-dialog",
+      "component": "reviewItemDialog"
+    },
+    {
+      "name" : "reject-order-dialog",
+      "component": "rejectOrderDialog"
+    }
+  ]
+}

package/src/setup-tests.ts

@@ -0,0 +1 @@
+import "@testing-library/jest-dom/extend-expect";

package/src/summary-tiles/laboratory-summary-tiles.component.tsx

@@ -0,0 +1,53 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { useLabTestsStats, useMetrics } from "./laboratory-summary.resource";
+import SummaryTile from "./summary-tile.component";
+import styles from "./laboratory-summary-tiles.scss";
+import { useSession } from "@openmrs/esm-framework";
+import { usePatientQueuesList } from "../queue-list/laboratory-patient-list.resource";
+
+const LaboratorySummaryTiles: React.FC = () => {
+  const { t } = useTranslation();
+
+  const session = useSession();
+
+  // get tests ordered
+  const { count: testOrderedCount } = useLabTestsStats("");
+
+  // get worklists
+  const { count: worklistCount } = useLabTestsStats("IN_PROGRESS");
+
+  // get refered lists
+
+  // get approved
+  const { count: completedCount } = useLabTestsStats("COMPLETED");
+
+  return (
+    <>
+      <div className={styles.cardContainer}>
+        <SummaryTile
+          label={t("orders", "Orders")}
+          value={testOrderedCount}
+          headerLabel={t("testsOrdered", "Tests ordered")}
+        />
+        <SummaryTile
+          label={t("inProgress", "In progress")}
+          value={worklistCount}
+          headerLabel={t("worklist", "Worklist")}
+        />
+        <SummaryTile
+          label={t("transferred", "Transferred")}
+          value={0}
+          headerLabel={t("referredTests", "Referred tests")}
+        />
+        <SummaryTile
+          label={t("completed", "Completed")}
+          value={completedCount}
+          headerLabel={t("results", "Results")}
+        />
+      </div>
+    </>
+  );
+};
+
+export default LaboratorySummaryTiles;

package/src/summary-tiles/laboratory-summary-tiles.scss

@@ -0,0 +1,12 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@import "~@openmrs/esm-styleguide/src/vars";
+
+.cardContainer {
+  background-color: $ui-02 ;
+  display: flex;
+  justify-content: space-between;
+  padding: 0 spacing.$spacing-05 spacing.$spacing-10 spacing.$spacing-03;
+  flex-flow: row wrap;
+  margin-top: - spacing.$spacing-03;
+}