@ampath/esm-reports-app 1.0.0-next.40 → 1.0.0-next.42

package/src/common/report-filters/report-filters.component.tsx

@@ -1,128 +1,315 @@
-import { ArrowLeft } from '@carbon/react/icons';
-import { useNavigate } from 'react-router-dom';
 import React from 'react';
-import { Button } from '@carbon/react';
+import { Link, useSearchParams } from 'react-router-dom';
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  Button,
+  ContentSwitcher,
+  DatePicker,
+  DatePickerInput,
+  Layer,
+  Select,
+  SelectItem,
+  Switch,
+} from '@carbon/react';
+import { Calendar, ChartColumn, Download, WarningAlt } from '@carbon/react/icons';
+import classNames from 'classnames';
+import dayjs from 'dayjs';
 
+import {
+  DATE_FORMAT,
+  describePeriod,
+  firstError,
+  formatDate,
+  formatMonth,
+  monthToDateRange,
+  validatePeriod,
+} from './date-range';
+import { type ReportFiltersProps } from './types';
 import styles from './report-filters.scss';
 
-interface ReportFiltersComponentProps {
-  reportName: string;
-  mode?: 'monthly' | 'daily';
-  isFacility?: false | 'true';
-  onGenerate?: (filters: { startDate?: string; endDate?: string; month?: string }) => void;
-  isLoding?: boolean;
-}
-const ReportFiltersComponent: React.FC<ReportFiltersComponentProps> = ({
+const months = Array.from({ length: 12 }, (_, index) => ({
+  value: String(index + 1).padStart(2, '0'),
+  label: dayjs().month(index).format('MMMM'),
+}));
+
+const ReportFiltersComponent: React.FC<ReportFiltersProps> = ({
   reportName,
-  mode = 'daily',
-  isFacility,
+  mode = 'both',
+  facilities,
+  yearsBack = 6,
+  isLoading = false,
+  isReportGenerated = false,
+  generatedPeriod,
   onGenerate,
-  isLoding = false,
+  onPeriodChange,
 }) => {
-  const navigate = useNavigate();
+  /* A register's breadcrumb links back here carrying the period the report was
+     generated for. Seeding the controls from it matters as much as restoring
+     the figures: left on their defaults the bar would compare last month
+     against the restored period and warn that figures are stale on arrival. */
+  const [params] = useSearchParams();
+  const urlStart = params.get('startDate');
+  const urlEnd = params.get('endDate');
+  const urlMonth = params.get('month');
 
-  const getToday = () => {
-    return new Date().toISOString().split('T')[0];
-  };
+  /* A period covering exactly one calendar month came from the Monthly tab,
+     however it is spelled in the URL. */
+  const urlWholeMonth =
+    urlMonth ??
+    (urlStart &&
+    urlEnd &&
+    dayjs(urlStart).isSame(dayjs(urlStart).startOf('month'), 'day') &&
+    dayjs(urlEnd).isSame(dayjs(urlStart).endOf('month'), 'day')
+      ? dayjs(urlStart).format('YYYY-MM')
+      : null);
+
+  const [activeTab, setActiveTab] = React.useState<'monthly' | 'custom'>(
+    urlStart && urlEnd && !urlWholeMonth ? 'custom' : 'monthly',
+  );
+
+  const [startDateString, setStartDateString] = React.useState<string>(() => urlStart ?? formatDate(new Date()));
+  const [endDateString, setEndDateString] = React.useState<string>(() => urlEnd ?? formatDate(new Date()));
+  const [monthString, setMonthString] = React.useState<string>(
+    () => urlWholeMonth ?? formatMonth(dayjs().subtract(1, 'month')),
+  );
+
+  const [selectedFacility, setSelectedFacility] = React.useState<string>('');
+
+  const [selectedYear, selectedMonth] = monthString.split('-');
+
+  /** Recomputed per render so a session open across New Year still offers this year */
+  const years = React.useMemo(
+    () => Array.from({ length: yearsBack }, (_, index) => String(dayjs().year() - index)),
+    [yearsBack],
+  );
+
+  const showsSwitcher = mode === 'both';
+  const usesDateRange = mode === 'range' || (showsSwitcher && activeTab === 'custom');
+  const usesMonth = mode === 'monthly' || (showsSwitcher && activeTab === 'monthly');
+
+  const dateRange = React.useMemo(
+    () => [dayjs(startDateString).toDate(), dayjs(endDateString).toDate()],
+    [startDateString, endDateString],
+  );
+
+  const period = React.useMemo(() => {
+    const month = usesDateRange ? undefined : monthString;
+    const { startDate, endDate } = month
+      ? monthToDateRange(month)
+      : { startDate: startDateString, endDate: endDateString };
+
+    return {
+      startDate,
+      endDate,
+      month,
+      facility: facilities ? selectedFacility : undefined,
+      label: describePeriod(startDate, endDate, month),
+    };
+  }, [usesDateRange, monthString, startDateString, endDateString, facilities, selectedFacility]);
+
+  /* What the report currently on screen was generated for, so a change to the
+     filters can be called out rather than silently leaving stale figures up. */
+  const [generatedFor, setGeneratedFor] = React.useState<{ key: string; label: string } | null>(null);
+
+  const errors = React.useMemo(
+    () =>
+      validatePeriod({
+        usesDateRange,
+        year: selectedYear,
+        month: selectedMonth,
+        startDate: startDateString,
+        endDate: endDateString,
+      }),
+    [usesDateRange, selectedYear, selectedMonth, startDateString, endDateString],
+  );
+  const isValid = Object.keys(errors).length === 0;
+
+  /* Reported on change so a report can label its form with the chosen period
+     before any figures exist for it. */
+  React.useEffect(() => {
+    onPeriodChange?.(period);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [period]);
+
+  const periodKey = `${period.startDate}|${period.endDate}|${period.facility ?? ''}`;
 
-  const getPreviousMonth = () => {
-    const date = new Date();
-    date.setMonth(date.getMonth() - 1);
+  /* Falls back to the period the caller says is on screen, which is what makes
+     the warning work after a reload rather than only after a generate. */
+  const shownPeriod =
+    generatedFor ??
+    (generatedPeriod?.startDate && generatedPeriod?.endDate
+      ? {
+          key: `${generatedPeriod.startDate}|${generatedPeriod.endDate}|`,
+          label: describePeriod(generatedPeriod.startDate, generatedPeriod.endDate),
+        }
+      : null);
 
-    const year = date.getFullYear();
-    const month = String(date.getMonth() + 1).padStart(2, '0');
+  const isStale = isReportGenerated && shownPeriod !== null && shownPeriod.key !== periodKey;
+
+  const handleGenerate = () => {
+    if (!isValid) {
+      return;
+    }
 
-    return `${year}-${month}`;
+    setGeneratedFor({ key: periodKey, label: period.label });
+    onGenerate(period);
   };
 
-  const [startDateString, setStartDateString] = React.useState<string>(getToday());
-  const [endDateString, setEndDateString] = React.useState<string>(getToday());
-  const [monthString, setMonthString] = React.useState<string>(getPreviousMonth());
-  const [selectedFacility, setSelectedFacility] = React.useState<string>('');
-  const [facility, setFacility] = React.useState<string>('Select Facility');
-  const [startDateTime, setStartDateTime] = React.useState<string>('');
-  const [endDateTime, setEndDateTime] = React.useState<string>('');
-
-  const generateReport = () => {
-    if (onGenerate) {
-      const filters: { startDate?: string; endDate?: string; month?: string } = {};
-      if (mode === 'daily') {
-        filters.startDate = startDateString;
-        filters.endDate = endDateString;
-      } else if (mode === 'monthly') {
-        filters.month = monthString;
-      }
-      onGenerate(filters);
+  /** Only commit a complete range, so re-rendering does not interrupt the second pick */
+  const handleDateRangeChange = (dates: Array<Date>) => {
+    const [start, end] = dates;
+
+    if (start && end) {
+      setStartDateString(dayjs(start).format(DATE_FORMAT));
+      setEndDateString(dayjs(end).format(DATE_FORMAT));
     }
   };
+
+  const dateRangePicker = (
+    <DatePicker
+      datePickerType="range"
+      dateFormat="d/m/Y"
+      maxDate={new Date()}
+      value={dateRange}
+      onChange={handleDateRangeChange}
+      className={styles.datePicker}
+    >
+      <DatePickerInput
+        id="report-start-date"
+        labelText="Start date"
+        placeholder="dd/mm/yyyy"
+        size="sm"
+        invalid={Boolean(errors.startDate)}
+        invalidText={errors.startDate}
+      />
+      <DatePickerInput
+        id="report-end-date"
+        labelText="End date"
+        placeholder="dd/mm/yyyy"
+        size="sm"
+        invalid={Boolean(errors.endDate)}
+        invalidText={errors.endDate}
+      />
+    </DatePicker>
+  );
+
   return (
-    <>
-      <div className={styles.titleContainer}>
-        <Button className={styles.backIcon} onClick={() => navigate('/')}>
-          Back
-        </Button>
-        <h2 className={styles.title}>{reportName}</h2>
-      </div>
-      <div className={styles.filtersContainer}>
-        {mode === 'daily' && (
-          <div className={styles.dateContainer}>
-            <label htmlFor="startingMonth">Start Date:</label>
-            <label htmlFor="endingMonth">End Date:</label>
-
-            <input
-              id="startingMonth"
-              type="date"
-              className={styles.input}
-              value={startDateString}
-              onChange={(e) => setStartDateString(e.target.value)}
-            />
-
-            <input
-              id="endingMonth"
-              type="date"
-              className={styles.input}
-              value={endDateString}
-              onChange={(e) => setEndDateString(e.target.value)}
-            />
-          </div>
-        )}
-        {mode === 'monthly' && (
-          <div>
-            <div>
-              <div>
-                <label htmlFor="month">Month:</label>
-                <input
-                  id="month"
-                  type="month"
-                  className={styles.input}
-                  value={monthString}
-                  onChange={(e) => setMonthString(e.target.value)}
-                />
-              </div>
+    <div className={styles.filters}>
+      <Breadcrumb noTrailingSlash className={styles.breadcrumb}>
+        <BreadcrumbItem>
+          <Link to="/">All reports</Link>
+        </BreadcrumbItem>
+        {/* The report name doubles as the page heading, so it stays an `h3`
+            rather than being repeated in a separate title row. */}
+        <BreadcrumbItem isCurrentPage>
+          <h3 className={styles.title}>{reportName}</h3>
+        </BreadcrumbItem>
+      </Breadcrumb>
+
+      <Layer className={styles.filtersContainer}>
+        <div className={styles.fields}>
+          {showsSwitcher && (
+            <div className={classNames(styles.field, styles.periodField)}>
+              <span className={styles.fieldLabel}>Period type</span>
+              <ContentSwitcher
+                selectedIndex={activeTab === 'monthly' ? 0 : 1}
+                onChange={({ index }) => setActiveTab(index === 0 ? 'monthly' : 'custom')}
+                size="sm"
+                className={styles.switcher}
+              >
+                <Switch name="monthly" text="Monthly" />
+                <Switch name="custom" text="Custom range" />
+              </ContentSwitcher>
             </div>
-            <div className={styles.clearFix}></div>
-          </div>
-        )}
-        {isFacility === 'true' && (
-          <div>
-            <label>Facility</label>
-            <select
-              className={styles.input}
-              name="selectedFacility"
+          )}
+
+          {usesMonth && (
+            <>
+              <Select
+                id="report-year"
+                labelText="Year"
+                size="sm"
+                className={classNames(styles.field, styles.yearField)}
+                invalid={Boolean(errors.year)}
+                invalidText={errors.year}
+                value={selectedYear}
+                onChange={(event) => setMonthString(`${event.target.value}-${selectedMonth}`)}
+              >
+                {years.map((year) => (
+                  <SelectItem key={year} value={year} text={year} />
+                ))}
+              </Select>
+              <Select
+                id="report-month"
+                labelText="Month"
+                size="sm"
+                className={classNames(styles.field, styles.monthField)}
+                invalid={Boolean(errors.month)}
+                invalidText={errors.month}
+                value={selectedMonth}
+                onChange={(event) => setMonthString(`${selectedYear}-${event.target.value}`)}
+              >
+                {months.map((month) => (
+                  <SelectItem key={month.value} value={month.value} text={month.label} />
+                ))}
+              </Select>
+            </>
+          )}
+
+          {usesDateRange && <div className={classNames(styles.field, styles.rangeField)}>{dateRangePicker}</div>}
+
+          {facilities && (
+            <Select
+              id="report-facility"
+              labelText="Facility"
+              size="sm"
+              className={styles.field}
               value={selectedFacility}
-              onChange={(e) => setSelectedFacility(e.target.value)}
+              onChange={(event) => setSelectedFacility(event.target.value)}
             >
-              <option value="">{facility}</option>
-            </select>
+              <SelectItem value="" text="All facilities" />
+              {facilities.map((facility) => (
+                <SelectItem key={facility.value} value={facility.value} text={facility.label} />
+              ))}
+            </Select>
+          )}
+        </div>
+
+        <div className={styles.actions}>
+          {/* Restating a period that cannot be generated reads as if it will be,
+              so the blocking reason takes its place. */}
+          {isValid && isStale ? (
+            <p className={classNames(styles.summary, styles.summaryStale)}>
+              <WarningAlt size={16} />
+              Filters changed. The report below is for <strong>{shownPeriod?.label}</strong> &mdash; select Generate
+              report to refresh it.
+            </p>
+          ) : isValid ? (
+            <p className={styles.summary}>
+              <Calendar size={16} />
+              Reporting period: <strong>{period.label}</strong>
+            </p>
+          ) : (
+            <p className={classNames(styles.summary, styles.summaryInvalid)}>
+              <WarningAlt size={16} />
+              {firstError(errors)}
+            </p>
+          )}
+          <div className={styles.actionButtons}>
+            {/* Only offered once there is something on screen to put on paper */}
+            {isReportGenerated && !isLoading && (
+              <Button kind="tertiary" size="sm" renderIcon={Download} onClick={() => window.print()}>
+                Download PDF
+              </Button>
+            )}
+            <Button size="sm" renderIcon={ChartColumn} onClick={handleGenerate} disabled={isLoading || !isValid}>
+              {isLoading ? 'Generating…' : 'Generate report'}
+            </Button>
           </div>
-        )}
-      </div>
-      {!isLoding && (
-        <div className={styles.buttonContainer}>
-          <Button onClick={generateReport}>Generate Report</Button>
         </div>
-      )}
-    </>
+      </Layer>
+    </div>
   );
 };
 

package/src/common/report-filters/report-filters.scss

@@ -1,49 +1,216 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
+.filters {
+  padding: layout.$spacing-05 0 0;
+}
 
-.filtersContainer {
-    margin: 0 2rem;
-    margin-bottom: 0.5rem;
-    border: 1px solid #ccc;
-    padding: 1rem;
+/* Breadcrumb trail. The trailing crumb is the page heading, so the items are
+   baseline-aligned rather than centred on differing font sizes. */
+
+.breadcrumb {
+  margin-bottom: layout.$spacing-04;
+
+  :global(.cds--breadcrumb-item) {
+    display: inline-flex;
+    align-items: baseline;
+  }
 }
 
+/* An `h3` inside the trailing crumb, so it keeps heading semantics without
+   repeating the report name in a separate title row. */
 .title {
-    font-size: 1.5rem;
-    font-weight: bold;
-    margin-top: 1rem;
-    color: green;
-    text-decoration: underline;
+  @include type.type-style('productive-heading-03');
+  display: inline;
+  color: $color-gray-100;
 }
 
-.titleContainer {
-    margin: 2rem;
+/* Filter card */
+
+.filtersContainer {
+  padding: layout.$spacing-04 layout.$spacing-05;
+  background-color: $ui-02;
+  border: 1px solid $ui-03;
+  border-left: layout.$spacing-02 solid var(--brand-01);
 }
 
-.dateContainer {
-  display: grid;
-  grid-template-columns: 1fr 1fr; 
-  gap: 8px 16px;
-  align-items: center;
+.fields {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  gap: layout.$spacing-05;
+  margin-bottom: layout.$spacing-04;
 }
 
-.dateContainer label {
-  font-weight: 500;
+/* Nested so it beats the `flex: 0 1 auto` that Carbon puts on `.cds--form-item`.
+
+   Fields grow into the row but stop at a width suited to what they hold. Left
+   to share the row unbounded, a monthly report -- which shows only Year and
+   Month -- gave a four-digit year a 434px box and the month 650px. The cap
+   keeps every control a sensible size and leaves the slack at the end of the
+   row rather than inside the inputs. */
+
+.fields .field {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.fields .periodField {
+  min-width: 14rem;
+  max-width: 16rem;
+}
+
+/* Wide enough for the validation message, not just the value. Carbon renders
+   `invalidText` under the input at the field's own width, so a field sized to
+   "2026" or "September" makes "That month has not started yet." wrap onto a
+   second line and jog the row below it. */
+
+.fields .yearField {
+  min-width: 7rem;
+  max-width: 9rem;
 }
 
-.input {
+.fields .monthField {
+  min-width: 9rem;
+  max-width: 13rem;
+}
+
+/* The range picker holds two inputs, so it is allowed roughly twice the width */
+.fields .rangeField {
+  min-width: 16rem;
+  max-width: 24rem;
+}
+
+/* Matches Carbon's `.cds--label` so the switcher's label sits on the same
+   baseline as the labels Carbon renders for the selects. */
+.fieldLabel {
+  @include type.type-style('label-01');
+  display: inline-block;
+  color: $text-02;
+  line-height: 1rem;
+  margin-bottom: layout.$spacing-03;
+  vertical-align: baseline;
+}
+
+/* Carbon sizes these to their content, so they need telling to fill the field */
+
+.switcher,
+.fields .field :global(.cds--select-input) {
   width: 100%;
-  padding: 6px 8px;
-  box-sizing: border-box;
-  border: 1px solid #ccc;
-  outline: none;
 }
-.input:focus {
-  border-color: #999; 
+
+.datePicker {
+  display: flex;
+  gap: layout.$spacing-05;
+  width: 100%;
+}
+
+/* Carbon pins `inline-size: 143.5px` on both the container and the input in
+   range mode. Overridden through the range class so this wins on specificity
+   rather than on stylesheet order. */
+.fields .datePicker:global(.cds--date-picker--range) {
+  :global(.cds--date-picker-container) {
+    flex: 1 1 0;
+    inline-size: auto;
+    min-inline-size: 0;
+  }
+
+  :global(.cds--date-picker__input) {
+    inline-size: 100%;
+    min-inline-size: 0;
+  }
 }
 
-.buttonContainer {
-    display: flex;
-    justify-content: flex-end;
-    gap: 10px;
-    margin: 0 2rem;
-}
+/* Action row */
+
+.actions {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: layout.$spacing-04;
+  padding-top: layout.$spacing-04;
+  border-top: 1px solid $ui-03;
+}
+
+.summary {
+  @include type.type-style('body-short-01');
+  display: inline-flex;
+  align-items: center;
+  gap: layout.$spacing-03;
+  color: $text-02;
+
+  svg {
+    fill: var(--brand-01);
+  }
+
+  strong {
+    color: $color-gray-100;
+    font-weight: 600;
+  }
+}
+
+.actionButtons {
+  display: flex;
+  align-items: center;
+  gap: layout.$spacing-03;
+  margin-left: auto;
+}
+
+/* The filter bar is application chrome, not part of the report */
+
+@media print {
+  .filters {
+    display: none;
+  }
+}
+
+@media (max-width: $breakpoint-tablet-max) {
+  .filters {
+    padding: layout.$spacing-05 0 0;
+  }
+
+  .fields,
+  .datePicker {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .fields .field,
+  .switcher {
+    min-width: 0;
+    width: 100%;
+  }
+
+  .actionButtons {
+    margin-left: 0;
+    width: 100%;
+
+    button {
+      flex: 1 1 0;
+    }
+  }
+}
+
+/* The summary doubles as the blocking reason when the period is not valid */
+.summaryInvalid {
+  color: $danger;
+
+  svg {
+    fill: $danger;
+  }
+}
+
+/* The filters no longer match the report on screen. Warning-toned rather than
+   error-toned: nothing is wrong, the figures are simply for another period. */
+
+.summaryStale {
+  padding: layout.$spacing-02 layout.$spacing-03;
+  color: $color-gray-100;
+  background-color: $warning-background;
+
+  svg {
+    fill: $color-gray-70;
+  }
+}