feat: add NoSelectionsInfoBox

i18n/en.pot

@@ -5,8 +5,8 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
-"POT-Creation-Date: 2024-12-15T15:25:38.375Z\n"
-"PO-Revision-Date: 2024-12-15T15:25:38.375Z\n"
+"POT-Creation-Date: 2025-01-15T14:47:08.321Z\n"
+"PO-Revision-Date: 2025-01-15T14:47:08.321Z\n"
 
 msgid "Choose one or more dates..."
 msgstr "Choose one or more dates..."
@@ -749,6 +749,24 @@ msgstr ""
 "The category option is not valid for the selected organisation unit. Please "
 "select a valid combination."
 
+msgid "Report data"
+msgstr "Report data"
+
+msgid "choose a registering unit and program, then click the New button"
+msgstr "choose a registering unit and program, then click the New button"
+
+msgid "Search for something"
+msgstr "Search for something"
+
+msgid "click the Search button. Choose a program to only search in that program"
+msgstr "click the Search button. Choose a program to only search in that program"
+
+msgid "See existing data"
+msgstr "See existing data"
+
+msgid "choose a registering unit and program"
+msgstr "choose a registering unit and program"
+
 msgid "Please select {{category}}."
 msgstr "Please select {{category}}."
 

src/core_modules/capture-core/components/Pages/MainPage/MainPage.component.js

@@ -15,6 +15,7 @@ import { TemplateSelector } from '../../TemplateSelector';
 import {
     InvalidCategoryCombinationForOrgUnitMessage,
 } from './InvalidCategoryCombinationForOrgUnitMessage/InvalidCategoryCombinationForOrgUnitMessage';
+import { NoSelectionsInfoBox } from './NoSelectionsInfoBox';
 
 const getStyles = () => ({
     listContainer: {
@@ -63,6 +64,9 @@ const MainPagePlain = ({
         <>
             {showMainPage ? (
                 <>
+                    {MainPageStatus === MainPageStatuses.DEFAULT && (
+                        <NoSelectionsInfoBox />
+                    )}
                     {MainPageStatus === MainPageStatuses.WITHOUT_ORG_UNIT_SELECTED && (
                         <WithoutOrgUnitSelectedMessage programId={programId} setShowAccessible={setShowAccessible} />
                     )}

src/core_modules/capture-core/components/Pages/MainPage/NoSelectionsInfoBox/NoSelectionsInfoBox.js

@@ -0,0 +1,44 @@
+// @flow
+import React from 'react';
+import i18n from '@dhis2/d2-i18n';
+import { withStyles } from '@material-ui/core';
+import { IncompleteSelectionsMessage } from '../../../IncompleteSelectionsMessage';
+
+const styles = {
+    incompleteMessageContainer: {
+        marginTop: '10px',
+    },
+    infoBoxContent: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '8px',
+        textAlign: 'center',
+    },
+};
+
+type Props = {|
+    ...CssClasses,
+|};
+
+const NoSelectionsInfoBoxPlain = ({ classes }: Props) => (
+    <div className={classes.incompleteMessageContainer}>
+        <IncompleteSelectionsMessage dataTest="no-selections-info-box">
+            <div className={classes.infoBoxContent}>
+                <span>
+                    <strong>{i18n.t('Report data')}</strong>:{' '}
+                    {i18n.t('choose a registering unit and program, then click the New button')}
+                </span>
+                <span>
+                    <strong>{i18n.t('Search for something')}</strong>:{' '}
+                    {i18n.t('click the Search button. Choose a program to only search in that program')}
+                </span>
+                <span>
+                    <strong>{i18n.t('See existing data')}</strong>:{' '}
+                    {i18n.t('choose a registering unit and program')}
+                </span>
+            </div>
+        </IncompleteSelectionsMessage>
+    </div>
+);
+
+export const NoSelectionsInfoBox = withStyles(styles)(NoSelectionsInfoBoxPlain);

src/core_modules/capture-core/components/Pages/MainPage/NoSelectionsInfoBox/index.js

@@ -0,0 +1,3 @@
+// @flow
+
+export { NoSelectionsInfoBox } from './NoSelectionsInfoBox';