MDA Lite Reporting

.env.sample

@@ -14,6 +14,7 @@ REACT_APP_ENABLE_ASSIGN=true
 REACT_APP_ENABLE_ABOUT=true
 REACT_APP_ENABLE_TEAMS=true
 REACT_APP_ENABLE_MDA_POINT=true
+REACT_APP_ENABLE_MDA_LITE=true
 REACT_APP_ENABLE_PRACTITIONERS=true
 REACT_APP_ENABLE_JURISDICTION_METADATA_UPLOAD=true
 REACT_APP_ENABLE_PLANNING=true
@@ -52,6 +53,11 @@ REACT_APP_SUPERSET_DYNAMIC_MDA_REPORTING_JURISDICTIONS_FOCUS_AREA_LEVEL=3
 REACT_APP_SUPERSET_STRUCTURES_SLICE=0
 REACT_APP_SUPERSET_TASKS_SLICE=0
 REACT_APP_SUPERSET_PLAN_STRUCTURE_PIVOT_SLICE=0
+REACT_APP_SUPERSET_MDA_LITE_REPORTING_PLANS_SLICE=0
+REACT_APP_SUPERSET_MDA_LITE_REPORTING_JURISDICTIONS_DATA_SLICES=0
+REACT_APP_SUPERSET_MDA_LITE_REPORTING_JURISDICTIONS_COLUMNS=mdaLiteJurisdictionsColumns
+REACT_APP_SUPERSET_MDA_LITE_REPORTING_JURISDICTIONS_FOCUS_AREA_LEVEL=99
+
 REACT_APP_GISIDA_TIMEOUT=3000
 REACT_APP_GISIDA_MAPBOX_TOKEN=hunter2
 REACT_APP_GISIDA_ONADATA_API_TOKEN=hunter2
@@ -178,6 +184,11 @@ REACT_APP_ASSIGNED_TEAMS_REQUEST_PAGE_SIZE=1000
 
 REACT_APP_OPENSRP_GENERATED_TASKS_INTERVENTIONS=Dynamic-FI,FI
 
+REACT_APP_SHOW_MAP_AT_JURISDICTION_LEVEL=99
+REACT_APP_SUPERSET_MDA_LITE_REPORTING_SUPERVISORS_DATA_SLICE=633
+REACT_APP_SUPERSET_MDA_LITE_REPORTING_CDD_DATA_SLICE=630
+REACT_APP_SUPERSET_MDA_LITE_REPORTING_WARD_SLICE=631
+REACT_APP_SUPERSET_MDA_LITE_REPORTING_WARD_GEOJSON_SLICE=632
 REACT_APP_CASE_TRIGGERED_DRAFT_EDIT_ADD_ACTIVITIES=false
 REACT_APP_HIDE_PLAN_FORM_FIELDS_ON_EDIT=''
 

docs/env.md

@@ -114,6 +114,48 @@ Below is a list of currently supported environment variables:
   - Optional parameter of plan intervention types whose tasks should be generated on opensrp
   - Options: FI, IRS, IRS_Lite, MDA, MDA-Point, Dynamic-FI, Dynamic-IRS and Dynamic-MDA
 
+- **REACT_APP_ENABLE_MDA_LITE**
+
+  - **not Required**; _(string)_
+  - to activate set the env to `true`, any other value will be interpreted as false
+  - enables the monitor MDA Lite reporting page
+
+- **REACT_APP_SUPERSET_MDA_LITE_REPORTING_PLANS_SLICE**
+
+  - MDA-Lite plans Superset slice id
+  - **Required**
+
+- **REACT_APP_SUPERSET_MDA_LITE_REPORTING_JURISDICTIONS_DATA_SLICES**
+
+  - MDA-Lite jurisdictions report Superset slice id
+  - **Required**
+
+- **REACT_APP_SUPERSET_MDA_LITE_REPORTING_JURISDICTIONS_COLUMNS**
+
+  - MDA-Lite jurisdictions report table columns
+  - **Required**
+
+- **REACT_APP_SUPERSET_MDA_LITE_REPORTING_JURISDICTIONS_FOCUS_AREA_LEVEL**
+
+  - MDA-Lite level were focus areas start
+  - **Required**
+
+- **REACT_APP_SHOW_MAP_AT_JURISDICTION_LEVEL**
+
+  - Jurisdiction level on which to show map
+  - Default value: 99
+  - **Not Required**
+
+- **REACT_APP_SUPERSET_MDA_LITE_REPORTING_CDD_DATA_SLICE**
+
+  - MDA-Lite CDD Superset slice id
+  - **Required**
+
+- **REACT_APP_SUPERSET_MDA_LITE_REPORTING_SUPERVISORS_DATA_SLICE**
+
+  - MDA-Lite supervisors Superset slice id
+  - **Required**
+
 - **REACT_APP_HIDE_PLAN_FORM_FIELDS_ON_EDIT**
 
   - **not Required**; _(string)_

src/App/App.tsx

@@ -82,6 +82,9 @@ import {
   REACT_LOGIN_URL,
   REPORT_IRS_LITE_PLAN_URL,
   REPORT_IRS_PLAN_URL,
+  REPORT_MDA_LITE_CDD_REPORT_URL,
+  REPORT_MDA_LITE_PLAN_URL,
+  REPORT_MDA_LITE_WARD_URL,
   REPORT_MDA_PLAN_URL,
   REPORT_MDA_POINT_PLAN_URL,
   REPORT_SMC_PLAN_URL,
@@ -123,6 +126,12 @@ import ConnectedAutoSelectView from '../containers/pages/JurisdictionAssignment/
 import { ConnectedEntryView } from '../containers/pages/JurisdictionAssignment/EntryView';
 import ConnectedJurisdictionAssignmentView from '../containers/pages/JurisdictionAssignment/ManualSelectJurisdiction';
 import JurisdictionMetadata from '../containers/pages/JurisdictionMetadata';
+import ConnectedMDALiteCddReports from '../containers/pages/MDALite/cddReports/cdds';
+import ConnectedMDALiteSupervisorReports from '../containers/pages/MDALite/cddReports/supervisors';
+import ConnectedMdaLiteJurisdictionReport from '../containers/pages/MDALite/jurisdictionsReport';
+import ConnectedMDALiteMapReport from '../containers/pages/MDALite/map';
+import ConnectedMDALitePlansList from '../containers/pages/MDALite/plans';
+import ConnectedMDALiteWardsReport from '../containers/pages/MDALite/wardReports';
 import ConnectedChildReports from '../containers/pages/MDAPoint/ChildReports';
 import ConnectedClientListView from '../containers/pages/MDAPoint/ClientListView';
 import ConnectedMdaPointJurisdictionReport from '../containers/pages/MDAPoint/jurisdictionsReport';
@@ -281,6 +290,56 @@ const App = () => {
                   path={`${REPORT_SMC_PLAN_URL}/:planId/:jurisdictionId/${MAP}`}
                   component={ConnectedSMCReportingMap}
                 />
+                {/* MDA Lite Reporting plan table view */}
+                <ConnectedPrivateRoute
+                  redirectPath={APP_CALLBACK_URL}
+                  disableLoginProtection={DISABLE_LOGIN_PROTECTION}
+                  exact={true}
+                  path={REPORT_MDA_LITE_PLAN_URL}
+                  component={ConnectedMDALitePlansList}
+                />
+                <ConnectedPrivateRoute
+                  redirectPath={APP_CALLBACK_URL}
+                  disableLoginProtection={DISABLE_LOGIN_PROTECTION}
+                  exact={true}
+                  path={`${REPORT_MDA_LITE_PLAN_URL}/:planId`}
+                  component={ConnectedMdaLiteJurisdictionReport}
+                />
+                <ConnectedPrivateRoute
+                  redirectPath={APP_CALLBACK_URL}
+                  disableLoginProtection={DISABLE_LOGIN_PROTECTION}
+                  exact={true}
+                  path={`${REPORT_MDA_LITE_PLAN_URL}/:planId/:jurisdictionId`}
+                  component={ConnectedMdaLiteJurisdictionReport}
+                />
+                <ConnectedPrivateRoute
+                  redirectPath={APP_CALLBACK_URL}
+                  disableLoginProtection={DISABLE_LOGIN_PROTECTION}
+                  exact={true}
+                  path={`${REPORT_MDA_LITE_PLAN_URL}/:planId/:jurisdictionId/${MAP}`}
+                  component={ConnectedMDALiteMapReport}
+                />
+                <ConnectedPrivateRoute
+                  redirectPath={APP_CALLBACK_URL}
+                  disableLoginProtection={DISABLE_LOGIN_PROTECTION}
+                  exact={true}
+                  path={`${REPORT_MDA_LITE_WARD_URL}/:planId/:jurisdictionId`}
+                  component={ConnectedMDALiteWardsReport}
+                />
+                <ConnectedPrivateRoute
+                  redirectPath={APP_CALLBACK_URL}
+                  disableLoginProtection={DISABLE_LOGIN_PROTECTION}
+                  exact={true}
+                  path={`${REPORT_MDA_LITE_CDD_REPORT_URL}/:planId/:jurisdictionId`}
+                  component={ConnectedMDALiteSupervisorReports}
+                />
+                <ConnectedPrivateRoute
+                  redirectPath={APP_CALLBACK_URL}
+                  disableLoginProtection={DISABLE_LOGIN_PROTECTION}
+                  exact={true}
+                  path={`${REPORT_MDA_LITE_CDD_REPORT_URL}/:planId/:jurisdictionId/:supervisorId`}
+                  component={ConnectedMDALiteCddReports}
+                />
                 {/* IRS Reporting plan table view */}
                 <ConnectedPrivateRoute
                   redirectPath={APP_CALLBACK_URL}

src/App/tests/AppNoBackend.test.tsx

@@ -18,6 +18,7 @@ jest.mock('../../configs/env', () => ({
   SUPERSET_IRS_LITE_REPORTING_JURISDICTIONS_DATA_SLICES: '11, 12',
   SUPERSET_IRS_MOPUP_REPORTING_JURISDICTIONS_DATA_SLICES: '0',
   SUPERSET_IRS_REPORTING_JURISDICTIONS_DATA_SLICES: '11, 12',
+  SUPERSET_MDA_LITE_REPORTING_JURISDICTIONS_DATA_SLICES: '1',
   SUPERSET_MDA_POINT_REPORTING_JURISDICTIONS_DATA_SLICES: '12',
   SUPERSET_SMC_REPORTING_JURISDICTIONS_DATA_SLICES: '1',
 }));

src/components/GisidaLite/helpers.tsx

@@ -72,6 +72,7 @@ export const fillLayerTemplate = {
 
 export const gsLiteStyle: Style | string = DIGITAL_GLOBE_CONNECT_ID
   ? {
+      glyphs: 'mapbox://fonts/mapbox/{fontstack}/{range}.pbf',
       layers: [
         {
           id: 'earthwatch-basemap',

src/components/MDALiteCellTable/index.tsx

@@ -0,0 +1,49 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { DropDownCellProps } from '@onaio/drill-down-table';
+import { Dictionary } from '@onaio/utils';
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { Col, Row } from 'reactstrap';
+import { SHOW_MAP_AT_JURISDICTION_LEVEL } from '../../configs/env';
+import { MAP, REPORT_MDA_LITE_WARD_URL } from '../../constants';
+
+/** Interface for linked cell props */
+export interface LinkedCellProps extends DropDownCellProps {
+  urlPath?: string;
+}
+
+/** Component that will be rendered in drop-down table cells showing a link
+ * that moves you to the next hierarchical level.
+ */
+const MDALiteTableCell: React.ElementType<LinkedCellProps> = (props: LinkedCellProps) => {
+  const { cell, cellValue, hasChildren, urlPath } = props;
+  const original: Dictionary = cell.row.original;
+  const { jurisdiction_id, jurisdiction_depth, plan_id } = original;
+  const url = `${urlPath}/${jurisdiction_id}`;
+  const wardUrl = `${REPORT_MDA_LITE_WARD_URL}/${plan_id}/${jurisdiction_id}`;
+  const jurLink = <Link to={url}>{cellValue}</Link>;
+  if (SHOW_MAP_AT_JURISDICTION_LEVEL === +jurisdiction_depth) {
+    return (
+      <div style={{ minWidth: '100%' }}>
+        <Row>
+          <Col sm={8}>
+            <Link to={wardUrl}>{cellValue}</Link>
+          </Col>
+          <Col sm={4}>
+            <Link style={{ paddingLeft: '20px' }} to={`${url}/${MAP}`}>
+              <FontAwesomeIcon icon={['fas', MAP]} />
+            </Link>
+          </Col>
+        </Row>
+      </div>
+    );
+  }
+  const val = hasChildren ? (
+    jurLink
+  ) : (
+    <span className="plan-jurisdiction-name name-label">{cellValue}</span>
+  );
+  return <div>{val}</div>;
+};
+
+export default MDALiteTableCell;

src/components/page/Header/index.tsx

@@ -26,6 +26,7 @@ import {
   ENABLE_IRS_MOPUP_REPORTING,
   ENABLE_IRS_PERFORMANCE_REPORT,
   ENABLE_JURISDICTION_METADATA_UPLOAD,
+  ENABLE_MDA_LITE,
   ENABLE_MDA_POINT,
   ENABLE_PLANNING,
   ENABLE_POPULATION_SERVER_SETTINGS,
@@ -51,6 +52,7 @@ import {
   JURISDICTION_METADATA,
   LOGIN,
   MANIFEST_RELEASES,
+  MDA_LITE_REPORTING_TITLE,
   MDA_POINT_REPORTING_TITLE,
   MDA_REPORTING_TITLE,
   MONITOR,
@@ -84,6 +86,7 @@ import {
   REACT_LOGIN_URL,
   REPORT_IRS_LITE_PLAN_URL,
   REPORT_IRS_PLAN_URL,
+  REPORT_MDA_LITE_PLAN_URL,
   REPORT_MDA_PLAN_URL,
   REPORT_MDA_POINT_PLAN_URL,
   REPORT_SMC_PLAN_URL,
@@ -147,7 +150,8 @@ export class HeaderComponent extends React.Component<HeaderProps, State> {
       ENABLE_IRS_PERFORMANCE_REPORT ||
       ENABLE_IRS_MOPUP_REPORTING ||
       ENABLE_IRS_LITE ||
-      ENABLE_SMC;
+      ENABLE_SMC ||
+      ENABLE_MDA_LITE;
 
     return (
       <div>
@@ -288,6 +292,20 @@ export class HeaderComponent extends React.Component<HeaderProps, State> {
                         </DropdownItem>
                       </div>
                     )}
+
+                    {ENABLE_MDA_LITE && (
+                      <div>
+                        <DropdownItem>
+                          <NavLink
+                            to={REPORT_MDA_LITE_PLAN_URL}
+                            className="nav-link"
+                            activeClassName="active"
+                          >
+                            {MDA_LITE_REPORTING_TITLE}
+                          </NavLink>
+                        </DropdownItem>
+                      </div>
+                    )}
                     {ENABLE_DYNAMIC_MDA && (
                       <div>
                         <DropdownItem>

src/configs/__mocks__/env.ts

@@ -228,6 +228,13 @@ export const SUPERSET_SMC_REPORTING_INDICATOR_STOPS = 'nigeria2020';
 export const CHECK_SESSION_EXPIRY_STATUS = false;
 
 export const OPENSRP_GENERATED_TASKS_INTERVENTIONS = [];
+export const SUPERSET_MDA_LITE_REPORTING_JURISDICTIONS_DATA_SLICES = '1,2';
+export const SUPERSET_MDA_LITE_REPORTING_PLANS_SLICE = '1';
+export const SUPERSET_MDA_LITE_REPORTING_SUPERVISORS_DATA_SLICE = '1';
+export const SUPERSET_MDA_LITE_REPORTING_WARD_SLICE = '1';
+export const SUPERSET_MDA_LITE_REPORTING_WARD_GEOJSON_SLICE = '1';
+export const SUPERSET_MDA_LITE_REPORTING_CDD_DATA_SLICE = '1';
+export const SUPERSET_MDA_LITE_REPORTING_JURISDICTIONS_COLUMNS = 'mdaLiteJurisdictionsColumns';
 
 export const HIDE_PLAN_FORM_FIELDS_ON_EDIT = [];
 export const CASE_TRIGGERED_DRAFT_EDIT_ADD_ACTIVITIES = false;

src/configs/env.ts

@@ -71,6 +71,10 @@ export type ENABLE_DYNAMIC_MDA = typeof ENABLE_DYNAMIC_MDA;
 export const ENABLE_SMC = process.env.REACT_APP_ENABLE_SMC === 'true';
 export type ENABLE_SMC = typeof ENABLE_SMC;
 
+/** Do you want to enable the MDA Lite plan features? */
+export const ENABLE_MDA_LITE = process.env.REACT_APP_ENABLE_MDA_LITE === 'true';
+export type ENABLE_MDA_LITE = typeof ENABLE_MDA_LITE;
+
 /** Do you want to enable the MDA Point plan features? */
 export const CLIENT_LABEL = process.env.REACT_APP_CLIENT_LABEL || 'client';
 export type CLIENT_LABEL = typeof CLIENT_LABEL;
@@ -588,6 +592,42 @@ export const OPENSRP_GENERATED_TASKS_INTERVENTIONS = (
 ).split(',');
 export type OPENSRP_GENERATED_TASKS_INTERVENTIONS = typeof OPENSRP_GENERATED_TASKS_INTERVENTIONS;
 
+export const SUPERSET_MDA_LITE_REPORTING_PLANS_SLICE =
+  process.env.REACT_APP_SUPERSET_MDA_LITE_REPORTING_PLANS_SLICE || '0';
+export type SUPERSET_MDA_LITE_REPORTING_PLANS_SLICE = typeof SUPERSET_MDA_LITE_REPORTING_PLANS_SLICE;
+
+export const SUPERSET_MDA_LITE_REPORTING_JURISDICTIONS_DATA_SLICES =
+  process.env.REACT_APP_SUPERSET_MDA_LITE_REPORTING_JURISDICTIONS_DATA_SLICES || '0';
+export type SUPERSET_MDA_LITE_REPORTING_JURISDICTIONS_DATA_SLICES = typeof SUPERSET_MDA_LITE_REPORTING_JURISDICTIONS_DATA_SLICES;
+
+export const SUPERSET_MDA_LITE_REPORTING_JURISDICTIONS_COLUMNS =
+  process.env.REACT_APP_SUPERSET_MDA_LITE_REPORTING_JURISDICTIONS_COLUMNS ||
+  'mdaLiteJurisdictionsColumns';
+export type SUPERSET_MDA_LITE_REPORTING_JURISDICTIONS_COLUMNS = typeof SUPERSET_MDA_LITE_REPORTING_JURISDICTIONS_COLUMNS;
+
+export const SUPERSET_MDA_LITE_REPORTING_JURISDICTIONS_FOCUS_AREA_LEVEL =
+  process.env.REACT_APP_SUPERSET_MDA_LITE_REPORTING_JURISDICTIONS_FOCUS_AREA_LEVEL || '99';
+export type SUPERSET_MDA_LITE_REPORTING_JURISDICTIONS_FOCUS_AREA_LEVEL = typeof SUPERSET_MDA_LITE_REPORTING_JURISDICTIONS_FOCUS_AREA_LEVEL;
+
+export const SHOW_MAP_AT_JURISDICTION_LEVEL =
+  Number(process.env.REACT_APP_SHOW_MAP_AT_JURISDICTION_LEVEL) || 99;
+export type SHOW_MAP_AT_JURISDICTION_LEVEL = typeof SHOW_MAP_AT_JURISDICTION_LEVEL;
+
+export const SUPERSET_MDA_LITE_REPORTING_SUPERVISORS_DATA_SLICE =
+  process.env.REACT_APP_SUPERSET_MDA_LITE_REPORTING_SUPERVISORS_DATA_SLICE || '0';
+export type SUPERSET_MDA_LITE_REPORTING_SUPERVISORS_DATA_SLICE = typeof SUPERSET_MDA_LITE_REPORTING_SUPERVISORS_DATA_SLICE;
+
+export const SUPERSET_MDA_LITE_REPORTING_CDD_DATA_SLICE =
+  process.env.REACT_APP_SUPERSET_MDA_LITE_REPORTING_CDD_DATA_SLICE || '0';
+export type SUPERSET_MDA_LITE_REPORTING_CDD_DATA_SLICE = typeof SUPERSET_MDA_LITE_REPORTING_CDD_DATA_SLICE;
+
+export const SUPERSET_MDA_LITE_REPORTING_WARD_SLICE =
+  process.env.REACT_APP_SUPERSET_MDA_LITE_REPORTING_WARD_SLICE || '0';
+export type SUPERSET_MDA_LITE_REPORTING_WARD_SLICE = typeof SUPERSET_MDA_LITE_REPORTING_WARD_SLICE;
+
+export const SUPERSET_MDA_LITE_REPORTING_WARD_GEOJSON_SLICE =
+  process.env.REACT_APP_SUPERSET_MDA_LITE_REPORTING_WARD_GEOJSON_SLICE || '0';
+export type SUPERSET_MDA_LITE_REPORTING_WARD_GEOJSON_SLICE = typeof SUPERSET_MDA_LITE_REPORTING_WARD_GEOJSON_SLICE;
 export const HIDE_PLAN_FORM_FIELDS_ON_EDIT = (
   process.env.REACT_APP_HIDE_PLAN_FORM_FIELDS_ON_EDIT || ''
 ).split(',');