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

package/src/components/landing/landing-action-item.component.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { ChevronRight } from '@carbon/icons-react';
+import { Link } from 'react-router-dom';
+
+import styles from './report-builder-landing-page.scss';
+
+type LandingActionItemBase = {
+    icon: React.ReactNode;
+    label: string;
+};
+
+type LandingActionItemLink = LandingActionItemBase & {
+    to: string;
+    onClick?: never;
+};
+
+type LandingActionItemButton = LandingActionItemBase & {
+    onClick: () => void;
+    to?: never;
+};
+
+export type LandingActionItemProps = LandingActionItemLink | LandingActionItemButton;
+
+const LandingActionItem: React.FC<LandingActionItemProps> = (props) => {
+    const content = (
+        <>
+            <div className={styles.rbActionLeft}>
+                {props.icon}
+                <span className={styles.rbActionLabel}>{props.label}</span>
+            </div>
+            <ChevronRight />
+        </>
+    );
+
+    if ('to' in props) {
+        return (
+            <Link className={styles.rbAction} to={props.to}>
+                {content}
+            </Link>
+        );
+    }
+
+    return (
+        <button className={styles.rbAction} type="button" onClick={props.onClick}>
+            {content}
+        </button>
+    );
+};
+
+export default LandingActionItem;

package/src/components/landing/landing-action-list.component.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import styles from './report-builder-landing-page.scss';
+
+type LandingActionListProps = {
+    children: React.ReactNode;
+};
+
+const LandingActionList: React.FC<LandingActionListProps> = ({ children }) => {
+    return <div className={styles.rbActions}>{children}</div>;
+};
+
+export default LandingActionList;

package/src/components/landing/landing-activity-list.component.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { ChevronRight, Document, Report } from '@carbon/icons-react';
+import styles from './report-builder-landing-page.scss';
+
+type RecentIndicator = { name: string; when: string };
+
+type LandingActivityListProps = {
+    recentIndicators: RecentIndicator[];
+    savedReports: string[];
+};
+
+const cx = (...parts: Array<string | undefined | false>) => parts.filter(Boolean).join(' ');
+
+const LandingActivityList: React.FC<LandingActivityListProps> = ({ recentIndicators, savedReports }) => {
+    return (
+        <div>
+            <div className={styles.rbListSectionTitle}>Recent Activity</div>
+
+            <div className={styles.rbListSubTitle}>Recently Edited Indicators</div>
+            {recentIndicators.map((x) => (
+                <div key={x.name} className={styles.rbListItem}>
+                    <div className={styles.rbListLeft}>
+                        <Document />
+                        <div>
+                            <div className={styles.rbListName}>{x.name}</div>
+                            <div className={styles.rbListMeta}>{x.when}</div>
+                        </div>
+                    </div>
+                    <ChevronRight />
+                </div>
+            ))}
+
+            <div className={cx(styles.rbListSubTitle, styles.rbMt12)}>Saved Reports</div>
+            {savedReports.map((r) => (
+                <div key={r} className={styles.rbListItem}>
+                    <div className={styles.rbListLeft}>
+                        <Report />
+                        <div className={styles.rbListName}>{r}</div>
+                    </div>
+                    <ChevronRight />
+                </div>
+            ))}
+        </div>
+    );
+};
+
+export default LandingActivityList;

package/src/components/landing/landing-footer-grid.component.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { Button, Tag } from '@carbon/react';
+import { Play, Time, Save, ChartColumn } from '@carbon/icons-react';
+
+import styles from './report-builder-landing-page.scss';
+import LandingSectionCard from './landing-section-card.component';
+import LandingActionList from './landing-action-list.component';
+import LandingActionItem from './landing-action-item.component';
+
+type LandingFooterGridProps = {
+    onNavigate: (path: string) => void;
+};
+
+const cx = (...parts: Array<string | undefined | false>) => parts.filter(Boolean).join(' ');
+
+const LandingFooterGrid: React.FC<LandingFooterGridProps> = ({ onNavigate }) => {
+    return (
+        <div className={cx(styles.rbLandingGrid, styles.rbLandingGridBottom)}>
+            <LandingSectionCard title="Indicators" tone="blue" headerIcon={<ChartColumn />}>
+                <div className={styles.rbFooterActions}>
+                    <Button size="sm" kind="secondary" renderIcon={Save} onClick={() => onNavigate('/indicators/save')}>
+                        Save Indicator
+                    </Button>
+                    <Tag type="blue">Result: 124</Tag>
+                </div>
+            </LandingSectionCard>
+
+            <LandingSectionCard title="Saved Reports" tone="gold" headerIcon={<Save />}>
+                <LandingActionList>
+                    <LandingActionItem icon={<Time />} label="Run a report" onClick={() => onNavigate('/run')} />
+                    <LandingActionItem icon={<Time />} label="View recent runs" onClick={() => onNavigate('/runs')} />
+                    <div className={styles.rbActionsRight}>
+                        <Button size="sm" kind="primary" renderIcon={Play} onClick={() => onNavigate('/run')}>
+                            Run a report
+                        </Button>
+                    </div>
+                </LandingActionList>
+            </LandingSectionCard>
+
+            <div />
+        </div>
+    );
+};
+
+export default LandingFooterGrid;

package/src/components/landing/landing-hero.component.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import styles from './report-builder-landing-page.scss';
+
+type LandingHeroProps = {
+    title: string;
+    subtitle: string;
+};
+
+const LandingHero: React.FC<LandingHeroProps> = ({ title, subtitle }) => {
+    return (
+        <div className={styles.rbLandingHero}>
+            <h2 className={styles.rbLandingTitle}>{title}</h2>
+            <div className={styles.rbLandingSubtitle}>{subtitle}</div>
+        </div>
+    );
+};
+
+export default LandingHero;

package/src/components/landing/landing-section-card.component.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import styles from './report-builder-landing-page.scss';
+
+export type CardTone = 'blue' | 'green' | 'gold';
+
+const cx = (...parts: Array<string | undefined | false>) => parts.filter(Boolean).join(' ');
+
+type LandingSectionCardProps = {
+    title: string;
+    tone: CardTone;
+    headerIcon: React.ReactNode;
+    children: React.ReactNode;
+};
+
+const toneClass: Record<CardTone, string> = {
+    blue: styles.rbCardHeaderBlue,
+    green: styles.rbCardHeaderGreen,
+    gold: styles.rbCardHeaderGold,
+};
+
+const LandingSectionCard: React.FC<LandingSectionCardProps> = ({ title, tone, headerIcon, children }) => {
+    return (
+        <div className={styles.rbCard}>
+            <div className={cx(styles.rbCardHeader, toneClass[tone])}>
+                {headerIcon}
+                <span>{title}</span>
+            </div>
+            <div className={styles.rbCardBody}>{children}</div>
+        </div>
+    );
+};
+
+export default LandingSectionCard;

package/src/components/landing/report-builder-landing-page.component.tsx

@@ -0,0 +1,186 @@
+import React from 'react';
+import { Button, InlineNotification, Tile } from '@carbon/react';
+import { Add, ChartColumn, Play, Report, List, Folder } from '@carbon/icons-react';
+import { useTranslation } from 'react-i18next';
+import { useNavigate } from 'react-router-dom';
+
+import styles from './report-builder-landing-page.scss';
+import Header from '../shared/header/header.component';
+import { RB } from '../../constants/privileges';
+import { useReportBuilderPrivileges } from '../../hooks/use-report-builder-privileges';
+
+const ReportBuilderLandingPage: React.FC = () => {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const { has } = useReportBuilderPrivileges();
+
+  const canCreateReports = has(RB.REPORT_ADD);
+  const canViewIndicators = has(RB.INDICATOR_VIEW);
+  const canViewSections = has(RB.SECTION_VIEW);
+  const canRunReports = has(RB.REPORT_RUN);
+  const canViewLinelist = has(RB.REPORT_VIEW);
+  const noTilesVisible =
+    !canCreateReports && !canViewIndicators && !canViewSections && !canRunReports && !canViewLinelist;
+
+  return (
+      <div className={styles.page}>
+        {/* HERO (matches screenshot layout) */}
+        <Header
+            title={t('welcomeReporting', 'Welcome  Report Builder')}
+            subtitle={t('welcomeReportingHint', 'Manage health data reports, define indicators, and run reports with ease.')}
+        />
+
+        {/* CARDS */}
+        <div className={styles.cardsGrid}>
+          {noTilesVisible && (
+            <InlineNotification
+              lowContrast
+              kind="info"
+              title={t('noAccessTitle', 'No access')}
+              subtitle={t(
+                'noAccessSubtitle',
+                'You do not have access to any Report Builder features. Contact your administrator.',
+              )}
+              hideCloseButton
+            />
+          )}
+          {canCreateReports && (
+          <Tile className={styles.card}>
+            <div className={styles.cardIllustration} aria-hidden>
+              <div className={styles.illCircle}>
+                <Report size={56} />
+              </div>
+            </div>
+
+            <h3 className={styles.cardTitle}>{t('createReports', 'Create Reports')}</h3>
+            <p className={styles.cardBody}>
+              {t('createReportsHint', 'Define and configure health data reports tailored to your needs.')}
+            </p>
+
+            <div className={styles.cardActions}>
+              <Button
+                  kind="primary"
+                  size="lg"
+                  renderIcon={Add}
+                  className={styles.cardButton}
+                  onClick={() => navigate('/new')}
+              >
+                {t('getStarted', 'Get started')}
+              </Button>
+            </div>
+          </Tile>
+          )}
+
+          {canViewIndicators && (
+          <Tile className={styles.card}>
+            <div className={styles.cardIllustration} aria-hidden>
+              <div className={styles.illCircle}>
+                <ChartColumn size={56} />
+              </div>
+            </div>
+
+            <h3 className={styles.cardTitle}>{t('manageIndicators', 'Manage Indicators')}</h3>
+            <p className={styles.cardBody}>
+              {t('manageIndicatorsHint', 'Create, edit, and organize indicators to measure key health metrics.')}
+            </p>
+
+            <div className={styles.cardActions}>
+              <Button
+                  kind="primary"
+                  size="lg"
+                  renderIcon={ChartColumn}
+                  className={styles.cardButton}
+                  onClick={() => navigate('/indicators')}
+              >
+                {t('viewIndicators', 'View indicators')}
+              </Button>
+            </div>
+          </Tile>
+          )}
+
+          {canViewSections && (
+          <Tile className={styles.card}>
+            <div className={styles.cardIllustration} aria-hidden>
+              <div className={styles.illCircle}>
+                <Folder size={56} />
+              </div>
+            </div>
+
+            <h3 className={styles.cardTitle}>{t('manageSections', 'Manage Sections')}</h3>
+            <p className={styles.cardBody}>
+              {t('manageSectionsHint', 'Create and manage indicator sections for organized report disaggregation.')}
+            </p>
+
+            <div className={styles.cardActions}>
+              <Button
+                  kind="primary"
+                  size="lg"
+                  renderIcon={Folder}
+                  className={styles.cardButton}
+                  onClick={() => navigate('/sections')}
+              >
+                {t('viewSections', 'View sections')}
+              </Button>
+            </div>
+          </Tile>
+          )}
+
+          {canRunReports && (
+          <Tile className={styles.card}>
+            <div className={styles.cardIllustration} aria-hidden>
+              <div className={styles.illCircle}>
+                <Play size={56} />
+              </div>
+            </div>
+
+            <h3 className={styles.cardTitle}>{t('runReports', 'Run Reports')}</h3>
+            <p className={styles.cardBody}>
+              {t('runReportsHint', 'Choose a report and run it for specific time periods and locations.')}
+            </p>
+
+            <div className={styles.cardActions}>
+              <Button
+                  kind="primary"
+                  size="lg"
+                  renderIcon={Play}
+                  className={styles.cardButton}
+                  onClick={() => navigate('/run')}
+              >
+                {t('runNow', 'Run now')}
+              </Button>
+            </div>
+          </Tile>
+          )}
+
+          {canViewLinelist && (
+          <Tile className={styles.card}>
+            <div className={styles.cardIllustration} aria-hidden>
+              <div className={styles.illCircle}>
+                <List size={56} />
+              </div>
+            </div>
+
+            <h3 className={styles.cardTitle}>{t('linelistReports', 'Linelist Reports')}</h3>
+            <p className={styles.cardBody}>
+              {t('linelistReportsHint', 'Create and manage patient list reports that return individual patient records.')}
+            </p>
+
+            <div className={styles.cardActions}>
+              <Button
+                  kind="primary"
+                  size="lg"
+                  renderIcon={List}
+                  className={styles.cardButton}
+                  onClick={() => navigate('/linelist')}
+              >
+                {t('viewLinelistReports', 'View linelist reports')}
+              </Button>
+            </div>
+          </Tile>
+          )}
+        </div>
+      </div>
+  );
+};
+
+export default ReportBuilderLandingPage;

package/src/components/landing/report-builder-landing-page.scss

@@ -0,0 +1,131 @@
+.page {
+  width: 100%;
+  margin: 0 auto;
+  padding: 1.5rem 0 2rem;
+}
+
+/* HERO */
+.hero {
+  display: grid;
+  grid-template-columns: 380px 1fr;
+  gap: 1.5rem;
+  align-items: center;
+
+  padding: 1.25rem 1.5rem;
+  border-radius: 12px;
+  border: 1px solid var(--cds-border-subtle, #e0e0e0);
+  background: linear-gradient(90deg, #eef4ff 0%, #ffffff 55%, #ffffff 100%);
+}
+
+.heroArt {
+  height: 150px;
+  border-radius: 10px;
+  background: radial-gradient(circle at 30% 30%, #dbe7ff 0%, #eef4ff 55%, #ffffff 100%);
+  border: 1px solid rgba(0, 0, 0, 0.04);
+  display: grid;
+  place-items: center;
+}
+
+.heroArtInner {
+  width: 112px;
+  height: 112px;
+  border-radius: 14px;
+  display: grid;
+  place-items: center;
+  background: rgba(255, 255, 255, 0.75);
+  border: 1px solid rgba(0, 0, 0, 0.04);
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
+}
+
+.heroTitle {
+  margin: 0;
+  font-size: 1.75rem;
+  font-weight: 600;
+  letter-spacing: 0.1px;
+}
+
+.heroSubtitle {
+  margin: 0.5rem 0 0;
+  font-size: 1rem;
+  line-height: 1.45;
+  opacity: 0.85;
+  max-width: 54ch;
+}
+
+/* CARDS GRID */
+.cardsGrid {
+  margin-top: 1.5rem;
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 1.25rem;
+}
+
+.card {
+  border-radius: 12px;
+  border: 1px solid var(--cds-border-subtle, #e0e0e0);
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
+  background: #fff;
+
+  padding: 1.25rem 1.25rem 1.25rem;
+  min-height: 340px;
+
+  display: flex;
+  flex-direction: column;
+}
+
+.cardIllustration {
+  display: grid;
+  place-items: center;
+  height: 140px;
+  border-radius: 12px;
+  background: linear-gradient(180deg, #f2f6ff 0%, #ffffff 100%);
+  border: 1px solid rgba(0, 0, 0, 0.04);
+}
+
+.illCircle {
+  width: 92px;
+  height: 92px;
+  border-radius: 999px;
+  display: grid;
+  place-items: center;
+  background: rgba(255, 255, 255, 0.9);
+  border: 1px solid rgba(0, 0, 0, 0.05);
+  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.08);
+}
+
+.cardTitle {
+  margin: 1rem 0 0;
+  font-size: 1.4rem;
+  font-weight: 600;
+}
+
+.cardBody {
+  margin: 0.65rem 0 0;
+  line-height: 1.5;
+  opacity: 0.85;
+  max-width: 46ch;
+}
+
+.cardActions {
+  margin-top: auto;
+  padding-top: 1.25rem;
+}
+
+.cardButton {
+  width: 100%;
+}
+
+/* RESPONSIVE */
+@media (max-width: 1050px) {
+  .hero {
+    grid-template-columns: 1fr;
+  }
+
+  .heroArt {
+    height: 180px;
+  }
+
+  .cardsGrid {
+    grid-template-columns: 1fr;
+  }
+}