@ampath/esm-reports-app 1.0.0-next.6 → 1.0.0-next.60

package/src/reports/moh-731/summary/moh-731-summary.scss

@@ -0,0 +1,242 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+/* The Summary tab: the report regrouped into compact tables with totals, a tab
+ * per section. Same light rules and panel fill as the rest of the report. */
+
+.summary {
+  --summary-grid: #e2e2e2;
+}
+
+/* Section tabs, with the codes switch and the export on the same line */
+.bar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: layout.$spacing-03;
+  border-bottom: 1px solid $ui-03;
+}
+
+.sectionTabs {
+  flex: 0 1 auto;
+  width: auto;
+  min-width: 0;
+  margin-bottom: -1px;
+}
+
+.tools {
+  display: flex;
+  align-items: center;
+  gap: layout.$spacing-03;
+  padding-bottom: layout.$spacing-02;
+}
+
+.panel {
+  padding: layout.$spacing-04 0 0;
+}
+
+/* Headline totals: one slim line */
+.strip {
+  display: flex;
+  flex-wrap: wrap;
+  gap: layout.$spacing-03;
+  margin-bottom: layout.$spacing-04;
+}
+
+.headline {
+  display: inline-flex;
+  align-items: baseline;
+  gap: layout.$spacing-03;
+  padding: layout.$spacing-02 layout.$spacing-04;
+  background-color: $ui-02;
+  border: 1px solid $ui-03;
+  cursor: pointer;
+
+  &:hover {
+    border-color: var(--cds-link-primary, #0f62fe);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--cds-focus, #0f62fe);
+    outline-offset: -2px;
+  }
+}
+
+.headlineLabel {
+  @include type.type-style('label-01');
+  color: $text-02;
+}
+
+.headlineValue {
+  @include type.type-style('productive-heading-03');
+  color: $color-gray-100;
+  font-variant-numeric: tabular-nums;
+}
+
+/* Sub-sections side by side where there is room, one per row on a phone */
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(min(100%, 26rem), 1fr));
+  gap: layout.$spacing-04;
+  align-items: start;
+}
+
+.card {
+  padding: layout.$spacing-04;
+  background-color: $ui-02;
+  border: 1px solid $ui-03;
+  min-width: 0;
+}
+
+.cardTitle {
+  @include type.type-style('heading-compact-01');
+  margin-bottom: layout.$spacing-03;
+  color: $color-gray-100;
+}
+
+.note {
+  @include type.type-style('helper-text-01');
+  margin: -(layout.$spacing-02) 0 layout.$spacing-03;
+  color: $text-02;
+}
+
+.tableTitle {
+  @include type.type-style('label-01');
+  margin: layout.$spacing-04 0 layout.$spacing-02;
+  color: $text-02;
+}
+
+.tableScroll {
+  overflow-x: auto;
+}
+
+.table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.8125rem;
+  line-height: 1.2;
+  font-variant-numeric: tabular-nums;
+
+  th,
+  td {
+    padding: 0.3125rem 0.5rem;
+    text-align: right;
+    white-space: nowrap;
+    border-bottom: 1px solid var(--summary-grid);
+  }
+
+  thead th {
+    padding-top: 0.25rem;
+    padding-bottom: 0.25rem;
+    font-size: 0.75rem;
+    font-weight: 600;
+    color: $text-02;
+    background-color: var(--cds-layer-01, #f4f4f4);
+  }
+
+  tbody tr:hover td,
+  tbody tr:hover th {
+    background-color: $brand-primary-10;
+  }
+
+  /* Total row: bold, set off by a double rule */
+  tfoot th,
+  tfoot td {
+    font-weight: 600;
+    border-top: 3px double #b8b8b8;
+    border-bottom: none;
+  }
+}
+
+/* The row labels stay in view when a wide table scrolls sideways */
+.labelCol {
+  position: sticky;
+  left: 0;
+  width: 1%;
+  text-align: left !important;
+  font-weight: 400;
+  color: $color-gray-100;
+  background-color: $ui-02;
+}
+
+thead .labelCol {
+  background-color: var(--cds-layer-01, #f4f4f4);
+}
+
+.totalCol {
+  font-weight: 600;
+  background-color: var(--cds-layer-01, #f4f4f4);
+}
+
+/* A table with no breakdown: the labels take the width, the figures a narrow column */
+.single .labelCol {
+  width: auto;
+}
+
+.single .totalCol {
+  width: 6rem;
+}
+
+.group {
+  color: $text-02;
+}
+
+/* Rows shown for reference, never added into the total */
+.ofWhich .labelCol {
+  padding-left: layout.$spacing-05;
+  font-style: italic;
+}
+
+.excluded .labelCol {
+  color: $text-02;
+}
+
+/* A figure: its value, opening its linelist; its MOH code when codes are shown */
+.value {
+  display: inline-flex;
+  align-items: baseline;
+  gap: layout.$spacing-02;
+  padding: 0;
+  font: inherit;
+  font-weight: inherit;
+  color: var(--cds-link-primary, #0f62fe);
+  background: none;
+  border: none;
+  cursor: pointer;
+
+  &:hover {
+    text-decoration: underline;
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--cds-focus, #0f62fe);
+    outline-offset: 2px;
+  }
+}
+
+.zero {
+  color: $text-02;
+}
+
+.strong {
+  font-weight: 600;
+}
+
+.code {
+  font-size: 0.6875rem;
+  font-weight: 400;
+  color: $text-02;
+}
+
+.none {
+  color: $text-02;
+}
+
+@media (max-width: $breakpoint-phone-max) {
+  .tools {
+    width: 100%;
+    justify-content: space-between;
+  }
+}

package/src/reports/moh-740/moh-740.component.scss

@@ -0,0 +1,202 @@
+/* MOH-740 laid out for A4, matching MOH-711: geometry in millimetres, type in
+   points, one rule weight throughout. Its 52 rows fit a single page. */
+
+$ink: #000;
+$bar: #d9d9d9;
+$rule: 1px solid $ink;
+
+/* The same scale MOH-711 uses, so the two forms read as one family */
+$text: 7pt; // table cells
+$title: 7.5pt; // form title
+$sub: 7.5pt; // subtitle
+$meta: 6.5pt; // facility strip
+
+/* Page chrome, outside the sheet */
+
+.reportLayout {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  /* No gap of its own: the placeholder carries the spacing below the filters,
+     as on every other report, and a gap here doubled it. */
+  row-gap: 0;
+  padding: 0.75rem 0;
+}
+
+.reportHeader {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  row-gap: 0.75rem;
+}
+
+.reportFilters {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.reportContent {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+/* Masthead */
+
+/* The four blocks below stack flush and share their edges: each drops its top
+   border and its margin, so the masthead, facility strip, indicator table and
+   sign-off read as one continuous form rather than four separate boxes. */
+
+.headerContainer {
+  display: flex;
+  align-items: flex-start;
+  width: 100%;
+}
+
+.mainTitleBox {
+  width: 100%;
+  padding: 3mm;
+  text-align: center;
+  border: $rule;
+}
+
+.mainTitle {
+  margin: 0;
+  font-size: $title;
+  font-weight: 700;
+}
+
+.subTitle {
+  margin: 1mm 0 0;
+  font-size: $sub;
+  font-weight: 700;
+}
+
+/* Facility / MFL / county strip beneath the masthead */
+
+/* Facility strip. Its cells are bordered like the form: the previous rule set
+   `border: none` here, which at (0,1,1) silently beat the `.darkBorder` class
+   the cells carried. */
+
+/* The facility strip: one continuous band with no rules inside it, so the five
+   fields are separated by spacing alone. Fixed layout holds them in place, and
+   the facility name gets the largest share since it is the only one that
+   carries a long value. */
+
+.topMeta {
+  width: 100%;
+  table-layout: fixed;
+  border-collapse: collapse;
+  border: $rule;
+  border-top: none;
+
+  td {
+    width: 17%;
+    padding: 1.5mm;
+    font-size: $meta;
+    vertical-align: top;
+    word-break: break-word;
+    border: none;
+  }
+
+  td:first-child {
+    width: 32%;
+  }
+}
+
+/* The indicator table */
+
+.darkBorder {
+  padding: 1mm 1.5mm;
+  font-size: $text;
+  text-align: left;
+  border: $rule;
+}
+
+/* `border-collapse` already merges the shared edge, so the table needs no
+   special casing where it meets the strip above it. */
+
+/* A disease-group divider spanning the table: DIABETES, HYPERTENSION, ... */
+
+.sectionHeader {
+  font-weight: 700;
+  text-align: center;
+  text-transform: uppercase;
+  letter-spacing: 0.02em;
+  background-color: #ececec;
+}
+
+.subHeader {
+  font-weight: 600;
+}
+
+/* Indented age-band rows beneath a "Total No. with…" sub-heading. Restored:
+   these were referenced by a literal class string, which CSS Modules never
+   matched, so the rows rendered unbordered and unindented. */
+
+.indent {
+  padding-left: 5mm;
+}
+
+.bgGrey {
+  background-color: #e0e0e0;
+}
+
+/* The indicator table, sharing the band's edge above it */
+
+.dataTable {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+/* The column header. It carried only width and alignment classes, so it was the
+   one row in the table with no borders; and it shared `.sectionHeader` with the
+   DIABETES / HYPERTENSION dividers, which made the two indistinguishable. */
+
+.dataTable thead th {
+  padding: 1mm 1.5mm;
+  font-size: $text;
+  font-weight: 700;
+  background-color: $bar;
+  border: $rule;
+}
+
+.dataElement {
+  width: 40%;
+}
+
+.otherElement {
+  width: 20%;
+  text-align: center;
+}
+
+/* Sign-off, enclosed by the form rather than floating beneath it */
+
+.signOff {
+  display: grid;
+  grid-template-columns: 34mm repeat(4, 1fr);
+  align-items: end;
+  column-gap: 5mm;
+  row-gap: 3mm;
+  width: 100%;
+  padding: 3mm;
+  font-size: $meta;
+  border: $rule;
+  border-top: none;
+
+  span {
+    text-align: center;
+  }
+
+  span:first-child {
+    font-weight: 600;
+    text-align: left;
+  }
+}
+
+.signOffRule {
+  min-height: 4mm;
+  padding-bottom: 0.5mm;
+  border-bottom: $rule;
+}