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

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

@@ -0,0 +1,449 @@
+@use '@carbon/styles/scss/colors';
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type/index';
+@use '@carbon/styles/scss/type';
+
+.container {
+  padding: 1rem 1rem 1.5rem;
+  border-bottom: 1px solid colors.$gray-20;
+}
+
+.heading {
+  @include type.type-style('heading-03');
+  color: colors.$gray-100;
+
+  :global(.cds--accordion__heading) {
+    background-color: colors.$gray-10;
+  }
+}
+
+.form {
+  width: 50%;
+}
+
+.formFirst {
+  margin-right: 2rem;
+}
+
+.formRight {
+  margin-top: 0.3rem;
+}
+
+.formContainer {
+  width: 100%;
+  display: flex;
+}
+
+.dateForm {
+  margin-top: 1.1rem;
+}
+
+.label {
+  margin: 0.75rem 0;
+}
+
+.flexContainer {
+  display: flex;
+}
+
+.panelContainer {
+  display: flex;
+  margin-top: 1rem;
+}
+
+.paramsControlContainer {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  margin: 0 0.5rem;
+
+  > * + * {
+    margin-top: 1rem;
+  }
+}
+
+.list {
+  display: flex;
+  flex-direction: column;
+  max-height: 25rem;
+  overflow-y: auto;
+}
+
+.leftListItem {
+  list-style-type: none;
+  padding: 0.75rem 1rem;
+  @include type.type-style('body-compact-01');
+
+  &:hover {
+    background-color: colors.$gray-10-hover;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    &::after {
+      content: "→";
+    }
+  }
+}
+
+.rightListItem {
+  list-style-type: none;
+  padding: 0.75rem 1rem;
+  @include type.type-style('body-compact-01');
+
+  &:hover {
+    background-color: colors.$gray-10-hover;
+
+    .itemChevronUpDown {
+      display: unset;
+    }
+
+    .selectedListItem {
+      display: flex;
+      justify-content: space-between;
+    }
+  }
+}
+
+.reportContainer {
+  background-color: colors.$white-0;
+  padding: 1rem;
+}
+
+.listHeading {
+  @include type.type-style('heading-03');
+  margin-bottom: 1rem;
+}
+
+.paramsList {
+  text-align: center;
+}
+
+.paramBtn:hover {
+  color: var(--brand-03);
+  font-weight: bolder;
+}
+
+.section {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1.5rem 1rem;
+}
+
+:global(.omrs-breakpoint-lt-desktop) {
+  .section {
+    flex-flow: column wrap;
+    align-items: flex-start;
+  }
+}
+
+:global(.omrs-breakpoint-gt-tablet) {
+  .section {
+    flex-flow: row wrap;
+  }
+}
+
+.switch {
+  display: flex;
+  align-items: center;
+
+  svg {
+    margin-right: 0.5rem;
+  }
+}
+
+.actionButtonContainer {
+  display: flex;
+  margin-right: 1.2rem;
+}
+
+:global(.omrs-breakpoint-lt-desktop) {
+  .actionButtonContainer {
+    margin-top: 1rem;
+  }
+}
+
+.actionButton {
+  svg {
+    margin-right: 0.5rem;
+  }
+}
+
+.wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  flex-direction: row;
+  width: 30rem;
+}
+
+.wrapper  div {
+  width: 14rem;
+  display: flex;
+  height: spacing.$spacing-07;
+  margin: 0;
+}
+
+.layer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: spacing.$spacing-05;
+  margin: 2rem 1rem;
+  text-align: center;
+  border: 1px solid colors.$gray-20;
+}
+
+.tile {
+  margin: auto;
+}
+
+.content {
+  @include type.type-style("heading-compact-02");
+  color: colors.$gray-70;
+  margin-top: spacing.$spacing-05;
+  margin-bottom: spacing.$spacing-03;
+}
+
+.explainer {
+  @include type.type-style('body-compact-01');
+  color: colors.$gray-70;
+}
+
+.accordion {
+  margin-top: 1rem;
+
+  li {
+    display: unset;
+  }
+
+  :global(.cds--accordion__title) {
+    @include type.type-style('heading-03');
+  }
+}
+
+.reportDescription {
+  margin-top: 2rem;
+}
+
+.contentSwitchContainer {
+  width: 50%;
+
+  :global(.cds--content-switcher-btn.cds--content-switcher--selected:disabled) {
+    background-color: transparent;
+  }
+}
+
+.reportTableContainer {
+  margin: 20px;
+  overflow-x: auto;
+  max-height: 80vh;
+  overflow-y: auto;
+
+  :global(.gender) {
+    writing-mode: vertical-lr;
+    transform: rotate(180deg);
+  }
+}
+
+.reportTableContainer table {
+  width: 100%;
+  border-collapse: collapse;
+  margin-top: 10px;
+  font: caption;
+  font-size: 0.8rem;
+
+  th,
+  td {
+    border: 1px solid var(--cds-border-subtle, #e0e0e0);
+    padding: 8px;
+    text-align: left;
+  }
+
+  th {
+    font-weight: 600;
+    background-color: var(--cds-layer-02, #f4f4f4);
+    color: var(--cds-text-05, #161616);
+  }
+
+  thead {
+    position: sticky;
+    top: 0;
+    z-index: 999;
+  }
+
+  tbody tr {
+    td {
+      background-color: var(--cds-layer-01, #fff);
+      color: var(--cds-text-05, #161616);
+      white-space: unset;
+    }
+
+    &:nth-child(even) td {
+      background-color: var(--cds-field-01, #f4f4f4);
+    }
+
+    &:hover td {
+      background-color: var(--cds-field-02, #e0e0e0);
+    }
+
+    // Section row - top level section header (e.g., "HTS Register")
+    &:global(.sectionRow) {
+      background-color: var(--cds-interactive-01, #0f62fe);
+      color: var(--cds-text-04, #ffffff);
+      font-weight: 600;
+      font-size: 14px;
+      text-transform: uppercase;
+      letter-spacing: 0.32px;
+      border-top: 1px solid var(--cds-interactive-01, #0f62fe);
+      border-bottom: 1px solid var(--cds-interactive-01, #0f62fe);
+      position: sticky;
+      top: 0;
+      z-index: 5;
+
+      td {
+        border-color: var(--cds-interactive-01, #0f62fe);
+        padding: 12px 8px;
+        background-color: var(--cds-interactive-01, #0f62fe);
+        color: var(--cds-text-04, #ffffff);
+      }
+
+      &:hover {
+        background-color: var(--cds-interactive-01-hover, #0353e9);
+
+        td {
+          background-color: var(--cds-interactive-01-hover, #0353e9);
+        }
+      }
+    }
+
+    // Group row - indicator group header (e.g., "HT01 Total No. of individuals at Health Facility")
+    &:global(.groupRow) {
+      background-color: var(--cds-layer-02, #f4f4f4);
+      font-weight: 600;
+      font-size: 13px;
+      border-top: 1px solid var(--cds-border-strong, #8a8a8a);
+      border-bottom: 1px solid var(--cds-border-strong, #8a8a8a);
+      color: var(--cds-text-05, #161616);
+      position: sticky;
+      top: 38px;
+      z-index: 4;
+
+      td {
+        border-color: var(--cds-border-strong, #8a8a8a);
+        padding: 10px 8px;
+        background-color: var(--cds-layer-02, #f4f4f4);
+        color: var(--cds-text-05, #161616);
+      }
+
+      &:hover {
+        background-color: var(--cds-layer-03, #e0e0e0);
+
+        td {
+          background-color: var(--cds-layer-03, #e0e0e0);
+        }
+      }
+
+      .indent {
+        display: inline-block;
+      }
+    }
+
+    // Don't apply zebra striping to section/group rows
+    &:global(.sectionRow):nth-child(even) td,
+    &:global(.groupRow):nth-child(even) td {
+      background-color: unset;
+    }
+
+    // Value cells - right-align numeric values
+    td:global(.val) {
+      text-align: right;
+      font-family: monospace;
+    }
+
+    // Label cells - for indicator names
+    td:global(.label) {
+      text-align: left;
+      font-weight: 500;
+    }
+  }
+}
+
+.dsReportBtn {
+  min-width: 2.5rem;
+}
+
+.selectedListItemArrow {
+  cursor: pointer;
+}
+
+.itemChevronUpDown {
+  display: none;
+  cursor: pointer;
+}
+
+.modifierContainer {
+  display: flex;
+}
+
+.modifier {
+  margin-right: 1rem;
+}
+
+.modifierLeft {
+  margin-left: 1rem;
+}
+.fadeModifierContainer {
+  opacity: 0;
+  transition: opacity 0.5s ease-in-out;
+  height: 0;
+  @include type.type-style('legal-01');
+  padding: 0.5rem;
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+  border-bottom-color: colors.$gray-10;
+}
+
+.fadeModifierContainer.show {
+  opacity: 1;
+  height: auto;
+  display: block;
+}
+
+.fadeModifierContainer.hide {
+  opacity: 0;
+  height: 0;
+  display: none;
+}
+
+.mostRecentContainer {
+  display: flex;
+  justify-content: space-between;
+}
+
+.openRightListItem {
+  background-color: colors.$gray-10-hover;
+
+  .itemChevronUpDown {
+    display: unset;
+  }
+
+  .selectedListItem {
+    display: flex;
+    justify-content: space-between;
+  }
+}
+
+.extrasContainer {
+  display: flex;
+  flex-wrap: wrap;
+
+  :global(.cds--checkbox-label) {
+    @include type.type-style('legal-01');
+  }
+}
+
+:global(.-esm-home__home-dashboard__homePageWrapper___ysEHx) {
+  display: unset !important;
+}

package/src/components/data-visualizer/declarations.d.ts

@@ -0,0 +1,131 @@
+declare module "*.css";
+declare module "*.scss";
+declare module "*.png";
+
+declare type SideNavProps = {};
+
+declare type Item = {
+  id: string;
+  label: string;
+};
+
+declare type ReportProps = {
+  categoryName: string;
+  reports: Array<Item>;
+};
+
+declare type Indicator = {
+  id: string;
+  label: string;
+  type?: string;
+  modifier?: number;
+  showModifierPanel?: boolean;
+  extras?: Array<string>;
+  attributes?: Array<IndicatorItem>;
+};
+
+declare type IndicatorItem = {
+  id: string;
+  label: string;
+  type?: string;
+};
+
+declare type ReportParamItem = {
+  label: string;
+  type?: string;
+  expression: string;
+  modifier?: number;
+  extras?: Array<string>;
+  showModifierPanel?: boolean;
+};
+
+type savedReport = {
+  id: string;
+  label: string;
+  description: string;
+  type: string;
+  columns: string;
+  rows: string;
+  aggregator: string;
+  report_request_object: string;
+};
+
+type ReportCategory = "facility" | "national" | "cqi" | "donor" | "integration";
+
+type RenderType = "list" | "json" | "html";
+type ReportType = "fixed" | "dynamic";
+
+type ReportingPeriod = "today" | "week" | "month" | "quarter" | "lastQuarter";
+
+declare type CQIReportItem = {
+  ART_No: string;
+  nationality: string;
+  gender: string;
+  date_of_birth: string;
+  age: string;
+  age_group: string;
+
+  pos_status_children: string;
+  vl_coverage: string;
+  hepatitis_b_status: string;
+  ovc_screening: string;
+  nutrition_support_flag: string;
+  cacx_screening: string;
+  sample_type: string;
+  tb_status: string;
+  side_effects: string;
+  family_planning_status: string;
+  repeat_vl_collection_date: string;
+  prescription_duration: string;
+  syphilis_flag: string;
+  next_vl_date: string;
+  current_vl: string;
+  HIVDR_tat: string;
+  known_status_spouse: string;
+  art_start_date: string;
+  syphillis_status: string;
+  HIVDR_sampling: string;
+  tb_lam_crag_results: string;
+  switched: string;
+  hep_b_flag: string;
+  child_Tested_flag: string;
+  index_children_tested: string;
+  index_spouse_tested: string;
+  iacs_no: string;
+  next_appointment_date: string;
+  po_status_spouse: string;
+  date_dr_results_received: string;
+  iac: string;
+  family_planning_flag: string;
+  current_arv_regimen_start_date: string;
+  repeat_vl_results_after_iacs: string;
+  tpt_flag: string;
+  pss: string;
+  current_regimen: string;
+  advanced_disease: string;
+  cacx_flag: string;
+  last_visit_date: string;
+  adv_disease_flag: string;
+  special_category: string;
+  regimen_line: string;
+  decision: string;
+  tpt_status: string;
+  vl_tat: string;
+  adherence: string;
+  vl_bleeding: string;
+  vl_result_sample_date: string;
+  hivdrt_results: string;
+  nutrition_status: string;
+  vl_profiling: string;
+  new_vl_sample_date: string;
+  spouses_Tested_flag: string;
+  followup: string;
+  mmd_flag: string;
+  marital_status: string;
+  duration_on_art: string;
+  ovc_flag: string;
+  client_status: string;
+  who_stage: string;
+  vl_updated: string;
+  known_status_children: string;
+};

package/src/components/data-visualizer/parameter-inputs/boolean-parameter-input.component.tsx

@@ -0,0 +1,34 @@
+/**
+ * Boolean Parameter Input Component
+ *
+ * Handles BOOLEAN parameter inputs with Toggle.
+ */
+
+import React from 'react';
+import { Toggle } from '@carbon/react';
+
+import type { LinelistParameter } from '../../../types/linelist-types';
+
+type Props = {
+  parameter: LinelistParameter;
+  value: any;
+  onChange: (value: boolean) => void;
+};
+
+const BooleanParameterInput: React.FC<Props> = ({ parameter, value, onChange }) => {
+  const config = parameter.config as any;
+
+  return (
+    <Toggle
+      id={`report-param-${parameter.name}`}
+      labelA={config?.falseLabel || 'No'}
+      labelB={config?.trueLabel || 'Yes'}
+      toggled={value === true || value === 'true'}
+      onToggle={(toggled) => {
+        onChange(toggled);
+      }}
+    />
+  );
+};
+
+export default BooleanParameterInput;

package/src/components/data-visualizer/parameter-inputs/concept-parameter-input.component.tsx

@@ -0,0 +1,81 @@
+/**
+ * Concept Parameter Input Component
+ *
+ * Handles CONCEPT parameter inputs with ComboBox using useConceptSearch hook.
+ */
+
+import React, { useCallback } from 'react';
+import { ComboBox } from '@carbon/react';
+
+import type { LinelistParameter } from '../../../types/linelist-types';
+import { useConceptSearch } from '../../../hooks/openmrs-reference-data';
+
+type Props = {
+  parameter: LinelistParameter;
+  value: string;
+  error?: string;
+  onChange: (value: string) => void;
+  searchQuery?: string;
+  onSearchQueryChange?: (query: string) => void;
+};
+
+type SelectedItem = {
+  uuid?: string;
+  label: string;
+};
+
+const ConceptParameterInput: React.FC<Props> = ({
+  parameter,
+  value,
+  error,
+  onChange,
+  searchQuery = '',
+  onSearchQueryChange
+}) => {
+  const config = parameter.config as any;
+  const conceptClassUuids = config?.conceptClassUuids;
+
+  const { results: concepts } = useConceptSearch(searchQuery, conceptClassUuids);
+
+  const items = concepts.map((concept: any) => ({
+    uuid: concept.uuid,
+    label: concept.display || concept.name?.name || concept.uuid,
+  }));
+
+  const selectedItemSelected: SelectedItem | undefined = items.find((item) => item.uuid === value);
+
+  const handleInputChange = useCallback((input: string) => {
+    onSearchQueryChange?.(input);
+  }, [onSearchQueryChange]);
+
+  const handleChange = useCallback(({ selectedItem }: { selectedItem?: SelectedItem }) => {
+    if (selectedItem) {
+      onChange(selectedItem.uuid || '');
+    } else {
+      onChange('');
+    }
+  }, [onChange]);
+
+  return (
+    <div>
+      <label htmlFor={`report-param-${parameter.name}`} className="cds--label">
+        {parameter.label}
+      </label>
+      <ComboBox
+        id={`report-param-${parameter.name}`}
+        titleText={parameter.label}
+        items={items}
+        itemToString={(item: any) => item?.label || ''}
+        initialSelectedItem={selectedItemSelected}
+        onInputChange={handleInputChange}
+        onChange={handleChange}
+        invalid={!!error}
+        invalidText={error}
+        placeholder={parameter.label}
+        size="sm"
+      />
+    </div>
+  );
+};
+
+export default ConceptParameterInput;