@openmrs/esm-report-builder 0.1.1-pre.87

package/src/components/data-visualizer/components/cqi-components/cqi-data-table.component.tsx

@@ -0,0 +1,214 @@
+import {
+  DataTable,
+  DataTableHeader,
+  Pagination,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableHeader,
+  TableRow,
+  TableExpandRow,
+  TableToolbar,
+  TableExpandedRow,
+  TableToolbarContent,
+  TableToolbarSearch,
+  Tile,
+  TableExpandHeader,
+} from "@carbon/react";
+import {
+  useLayoutType,
+  usePagination,
+} from "@openmrs/esm-framework";
+import React, { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import styles from "../data-table/data-tables.scss";
+import RowDetail from "./detail.component";
+
+interface ExtendedDataTableHeader extends DataTableHeader {
+  isFlag?: boolean;
+}
+
+type FilterProps = {
+  rowIds: Array<string>;
+  headers: Array<ExtendedDataTableHeader>;
+  cellsById: any;
+  inputValue: string;
+  getCellId: (rowId: string, key: string) => string;
+};
+
+interface ListProps {
+  columns: Array<ExtendedDataTableHeader>;
+  data: any;
+}
+
+const CQIDataList: React.FC<ListProps> = ({ columns, data }) => {
+  const { t } = useTranslation();
+  const layout = useLayoutType();
+  const isTablet = layout === "tablet";
+  const responsiveSize = isTablet ? "lg" : "sm";
+  const [allRows, setAllRows] = useState([]);
+  const pageSizes = [10, 20, 30, 40, 50];
+  const [currentPageSize, setPageSize] = useState(10);
+
+  const {
+    goTo,
+    results: paginatedList,
+    currentPage,
+  } = usePagination(data, currentPageSize);
+
+  const handleFilter = ({
+    rowIds,
+    headers,
+    cellsById,
+    inputValue,
+    getCellId,
+  }: FilterProps): Array<string> => {
+    return rowIds.filter((rowId) =>
+      headers.some(({ key }) => {
+        const cellId = getCellId(rowId, key);
+        const filterableValue = cellsById[cellId]?.value;
+        const filterTerm = inputValue.toLowerCase();
+
+        if (
+          typeof filterableValue === "boolean" ||
+          filterableValue === undefined
+        ) {
+          return false;
+        }
+
+        return ("" + filterableValue).toLowerCase().includes(filterTerm);
+      })
+    );
+  };
+
+  useEffect(() => {
+    const rows = paginatedList.map((item: any, index: number) => ({
+      ...item,
+      id: index.toString(),
+    }));
+    setAllRows(rows);
+  }, [paginatedList]);
+
+  return (
+    <DataTable
+      rows={allRows}
+      headers={columns}
+      filterRows={handleFilter}
+      size={isTablet ? "lg" : "sm"}
+      useZebraStyles
+    >
+      {({
+        rows,
+        headers,
+        getHeaderProps,
+        getTableProps,
+        onInputChange,
+        getRowProps,
+        getExpandHeaderProps,
+      }) => (
+        <TableContainer className={styles.tableContainer}>
+          <div className={styles.toolbarWrapper}>
+            <TableToolbar size={responsiveSize}>
+              <TableToolbarContent className={styles.toolbarContent}>
+                <TableToolbarSearch
+                  className={styles.searchbox}
+                  expanded
+                  onChange={onInputChange}
+                  placeholder={t("searchThisList", "Search this list")}
+                  size={responsiveSize}
+                />
+              </TableToolbarContent>
+            </TableToolbar>
+          </div>
+          <Table {...getTableProps()}>
+            <TableHead>
+              <TableRow>
+                <TableExpandHeader
+                  enableToggle={true}
+                  {...getExpandHeaderProps()}
+                />
+                {headers.map((header: ExtendedDataTableHeader) => (
+                  <TableHeader
+                    key={header.key}
+                    className={`${styles.tableHeaderStyle} ${
+                      header.isFlag ? styles.tableHeaderFlag : ""
+                    }`}
+                    {...getHeaderProps({ header })}
+                  >
+                    {header.header}
+                  </TableHeader>
+                ))}
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {rows.map((row) => (
+                <React.Fragment key={row.id}>
+                  <TableExpandRow {...getRowProps({ row })}>
+                    {row.cells.map((cell) => {
+                      const cellClassMap = {
+                        Y: styles.greenCell,
+                        N: styles.redCell,
+                        NA: styles.grayCell,
+                        ON: styles.yellowCell,
+                      };
+
+                      const colorClass =
+                        cellClassMap[cell.value as keyof typeof cellClassMap];
+
+                      return colorClass ? (
+                        <TableCell
+                          key={cell.id}
+                          className={`${colorClass} ${styles.cellStyling}`}
+                        />
+                      ) : (
+                        <TableCell key={cell.id}>{cell.value}</TableCell>
+                      );
+                    })}
+                  </TableExpandRow>
+                  {row.isExpanded && (
+                    <TableExpandedRow
+                      className={styles.expandedActiveVisitRow}
+                      colSpan={headers.length + 1}
+                    >
+                      <RowDetail
+                        reportItem={data.find(
+                          (item) =>
+                            item.art_number ===
+                            row.cells.find(
+                              (c) => c.info.header === "art_number"
+                            )?.value
+                        )}
+                      />
+                    </TableExpandedRow>
+                  )}
+                </React.Fragment>
+              ))}
+            </TableBody>
+          </Table>
+          {rows.length === 0 && (
+            <Tile className={styles.tile}>
+              <p className={styles.content}>
+                {t("noData", "No data to display")}
+              </p>
+            </Tile>
+          )}
+          <Pagination
+            page={currentPage}
+            pageSize={currentPageSize}
+            pageSizes={pageSizes}
+            totalItems={data?.length || 0}
+            className={styles.pagination}
+            onChange={({ pageSize, page }) => {
+              if (pageSize !== currentPageSize) setPageSize(pageSize);
+              if (page !== currentPage) goTo(page);
+            }}
+          />
+        </TableContainer>
+      )}
+    </DataTable>
+  );
+};
+
+export default CQIDataList;

package/src/components/data-visualizer/components/cqi-components/cqi-elements.ts

@@ -0,0 +1,203 @@
+export const DemographicsElements = [
+  {
+    key: "nationality",
+    label: "Client Category",
+  },
+  {
+    key: "date_of_birth",
+    label: "Client's Date of birth",
+  },
+  {
+    key: "marital_status",
+    label: "Marital Status",
+  },
+  {
+    key: "special_category",
+    label: "Special categories / populations",
+  },
+];
+export const SiblingsTestingElements = [
+  {
+    key: "known_status_children",
+    label: "No. of biological children/siblings <19 yrs",
+  },
+  {
+    key: "pos_status_children",
+    label:
+      "No. of biological children/siblings <19 yrs with a known HIV status",
+  },
+  {
+    key: "index_children_tested",
+    label: "Index testing of biological siblings",
+  },
+];
+export const PartnerTestingElements = [
+  {
+    key: "known_status_spouse",
+    label: "No of sexual partners",
+  },
+  {
+    key: "po_status_spouse",
+    label: "No of sexual partners with a known HIV status",
+  },
+  {
+    key: "index_spouse_tested",
+    label: "Index testing of sexual partners",
+  },
+];
+
+export const ClientStatusElements = [
+  {
+    key: "last_visit_date",
+    label: "Last Encounter Date ",
+  },
+  {
+    key: "next_appointment_date",
+    label: "Next Appointment date",
+  },
+  {
+    key: "client_status",
+    label: "Client status at Facility in the review period",
+  },
+];
+
+export const RegimenDetailsElements = [
+  {
+    key: "art_start_date",
+    label: "ART Start Date",
+  },
+  {
+    key: "duration_on_art",
+    label: "Duration on Art (Months)",
+  },
+  {
+    key: "regimen_line",
+    label: "Current ART Regimen Line",
+  },
+  {
+    key: "current_regimen",
+    label: "Current ARV Regimen",
+  },
+  {
+    key: "current_arv_regimen_start_date",
+    label: "CURRENT ARV Start Date  ",
+  },
+  {
+    key: "adherence",
+    label: "Adherence Grade",
+  },
+  {
+    key: "side_effects",
+    label: "Side effects of ART",
+  },
+  {
+    key: "prescription_duration",
+    label: "No. ART refill days",
+  },
+];
+
+export const VlCdElements = [
+  {
+    key: "sample_type",
+    label: "Sample type",
+  },
+  {
+    key: "current_vl",
+    label: "Current VL result (Copies/ml)",
+  },
+  {
+    key: "vl_profiling",
+    label: "VL profiling",
+  },
+  {
+    key: "vl_result_sample_date",
+    label: "VL result sample collection date",
+  },
+  {
+    key: "vl_updated",
+    label: "VL Updated",
+  },
+  {
+    key: "new_vl_sample_date",
+    label: " New VL sample collection date",
+  },
+  {
+    key: "next_vl_date",
+    label: "Next VL Date ",
+  },
+];
+
+export const OtherElements = [
+  {
+    key: "iacs_no",
+    label: "No. of IAC sessions",
+  },
+  {
+    key: "repeat_vl_collection_date",
+    label: "Repeat VL& HIVDR sample collection date",
+  },
+  {
+    key: "repeat_vl_results_after_iacs",
+    label: "Repeal VL results after 3 G IAC/ P-IAC (Copies/ml)",
+  },
+  {
+    key: "hivdrt_results",
+    label: "HIVDRT Results ",
+  },
+  {
+    key: "date_dr_results_received",
+    label: "Date DR results Received at facility",
+  },
+  {
+    key: "decision",
+    label: "Clinical Decision",
+  },
+  {
+    key: "pss",
+    label: "PSS",
+  },
+  {
+    key: "ovc_screening",
+    label: "OVC Screening",
+  },
+  {
+    key: "nutrition_status",
+    label: "Nutritional Status",
+  },
+  {
+    key: "family_planning_status",
+    label: "Family Planning Status",
+  },
+  {
+    key: "cacx_screening",
+    label: "Cancer Cx assessment",
+  },
+  {
+    key: "hepatitis_b_status",
+    label: "Hepatitis B status",
+  },
+  {
+    key: "syphillis_status",
+    label: "Syphilis status",
+  },
+  {
+    key: "tpt_status",
+    label: "TPT STATUS",
+  },
+  {
+    key: "tb_status",
+    label: "TB Status",
+  },
+  {
+    key: "tb_lam_crag_results",
+    label: "TB Lam results(CD4 <200 )",
+  },
+  {
+    key: "who_stage",
+    label: "WHO Stage at the last encounter",
+  },
+  {
+    key: "advanced_disease",
+    label: "Advanced HIV Disease Status(AHD)& management",
+  },
+];

package/src/components/data-visualizer/components/cqi-components/detail.component.tsx

@@ -0,0 +1,110 @@
+import React, { useState } from "react";
+import styles from "./detail.scss";
+import { ContentSwitcher, Switch } from "@carbon/react";
+import {
+  ClientStatusElements,
+  DemographicsElements,
+  OtherElements,
+  PartnerTestingElements,
+  RegimenDetailsElements,
+  SiblingsTestingElements,
+  VlCdElements,
+} from "./cqi-elements";
+interface RowDetailProps {
+  reportItem: any;
+}
+
+type TabType =
+  | "client_demographics"
+  | "siblings_testing"
+  | "partner_testing"
+  | "client_status"
+  | "regimen_details"
+  | "vl_cd4"
+  | "other_details";
+
+const RowDetail: React.FC<RowDetailProps> = ({ reportItem }) => {
+  const [tabType, setTabType] = useState<TabType>("client_demographics");
+
+  const handleTabTypeChange = ({ name }) => {
+    setTabType(name);
+  };
+
+  const createReportDetail = (item) => {
+    return (
+      <div className={styles.detailItem}>
+        <span className={styles.detailLabel}>{item.label}:</span>
+        <span className={styles.detailValue}>
+          {reportItem?.[`${item.key}`]}
+        </span>
+      </div>
+    );
+  };
+
+  return (
+    <>
+      <div className={styles.detailContentSwitchContainer}>
+        <ContentSwitcher
+          size={`lg`}
+          selectedIndex={0}
+          onChange={handleTabTypeChange}
+        >
+          <Switch name="client_demographics">
+            <div className={styles.switch}>
+              <span>Client Demographics</span>
+            </div>
+          </Switch>
+          <Switch name="siblings_testing">
+            <div className={styles.switch}>
+              <span>Index Testing of Siblings</span>
+            </div>
+          </Switch>
+          <Switch name="partner_testing">
+            <div className={styles.switch}>
+              <span>Index Testing of Sexual Partners</span>
+            </div>
+          </Switch>
+          <Switch name="client_status">
+            <div className={styles.switch}>
+              <span>Client Status at Facility</span>
+            </div>
+          </Switch>
+          <Switch name="regimen_details">
+            <div className={styles.switch}>
+              <span>Current Regimen details</span>
+            </div>
+          </Switch>
+          <Switch name="vl_cd4">
+            <div className={styles.switch}>
+              <span>Viral load & CD4</span>
+            </div>
+          </Switch>
+          <Switch name="other_details">
+            <div className={styles.switch}>
+              <span>Other details</span>
+            </div>
+          </Switch>
+        </ContentSwitcher>
+      </div>
+
+      <div className={styles.detailContainer}>
+        {tabType === "client_demographics" &&
+          DemographicsElements.map((item) => createReportDetail(item))}
+        {tabType === "siblings_testing" &&
+          SiblingsTestingElements.map((item) => createReportDetail(item))}
+        {tabType === "partner_testing" &&
+          PartnerTestingElements.map((item) => createReportDetail(item))}
+        {tabType === "client_status" &&
+          ClientStatusElements.map((item) => createReportDetail(item))}
+        {tabType === "regimen_details" &&
+          RegimenDetailsElements.map((item) => createReportDetail(item))}
+        {tabType === "vl_cd4" &&
+          VlCdElements.map((item) => createReportDetail(item))}
+        {tabType === "other_details" &&
+          OtherElements.map((item) => createReportDetail(item))}
+      </div>
+    </>
+  );
+};
+
+export default RowDetail;

package/src/components/data-visualizer/components/cqi-components/detail.scss

@@ -0,0 +1,22 @@
+@use '@carbon/styles/scss/colors';
+@use '@carbon/styles/scss/type';
+
+.detailContainer {
+  width: 100%;
+  padding: 1rem;
+}
+
+.detailItem {
+  width: 25%;
+  display: inline-block;
+  padding-right: 1rem;
+}
+
+.detailLabel {
+  @include type.type-style('heading-01');
+}
+
+.detailValue {
+  margin-left: 0.5rem;
+}
+