AMP-31022 Indicators module changes

amp/TEMPLATE/reampv2/packages/reampv2-app/src/modules/admin/Admin.routes.jsx

@@ -1,5 +1,7 @@
 import React, {lazy} from 'react';
 import {Route, Routes } from 'react-router-dom';
+import OutcomeOutputManagementPage from "./indicator_manager/pages/OutcomeOutputManagementPage";
+import DisaggregationManagerPage from "./indicator_manager/pages/DisaggregationManagerPage";
 
 const AdminNDDApp = lazy(() => import('./ndd'));
 const IndicatorManagerApp = lazy(() => import('./indicator_manager'));
@@ -9,6 +11,8 @@ const AdminRoutes = () => {
         <Routes>
             <Route path="/ndd" element={<AdminNDDApp/>} />
             <Route path="/indicator_manager" element={<IndicatorManagerApp/>} />
+            <Route path="/indicator_manager/outcome-output-management" element={<OutcomeOutputManagementPage/>} />
+            <Route path="/indicator_manager/disaggregation-manager" element={<DisaggregationManagerPage/>} />
         </Routes>
     );
 }

amp/TEMPLATE/reampv2/packages/reampv2-app/src/modules/admin/indicator_manager/components/StartUp.tsx

@@ -10,6 +10,8 @@ import { getPrograms } from '../reducers/fetchProgramsReducer';
 import { getSettings } from '../reducers/fetchSettingsReducer';
 import { resetSizePerPage } from '../reducers/fetchIndicatorsReducer';
 import {getAmpCategories} from "../reducers/fetchAmpCategoryReducer";
+import {getOutputs} from "../reducers/fetchOutputsReducer";
+import {getOutcomes} from "../reducers/fetchOutcomesReducer";
 
 export const AdminIndicatorManagerContext = React.createContext({});
 
@@ -43,6 +45,8 @@ const Startup: React.FC<StartupProps> = (props: any) => {
     dispatch(getSectors());
     dispatch(getPrograms());
     dispatch(getAmpCategories());
+    dispatch(getOutputs());
+    dispatch(getOutcomes());
     dispatch(resetSizePerPage());
     // eslint-disable-next-line
   }, []);

amp/TEMPLATE/reampv2/packages/reampv2-app/src/modules/admin/indicator_manager/components/modals/OutcomeModal.tsx

@@ -0,0 +1,112 @@
+import React, { useRef } from 'react';
+import { Modal, Button, Form, Row, Col } from 'react-bootstrap';
+import { Formik, FormikProps, Form as FormikForm, Field } from 'formik';
+import * as Yup from 'yup';
+import styles from './css/IndicatorModal.module.css';
+
+interface AddNewOutcomeModalProps {
+  show: boolean;
+  setShow: (show: boolean) => void;
+  onSubmit?: (outcome: { name: string; description?: string }) => void;
+  initialName?: string;
+  initialDescription?: string;
+  translations?: Record<string, string>;
+}
+
+const OutcomeModal: React.FC<AddNewOutcomeModalProps> = ({ show, setShow, onSubmit, initialName = '', initialDescription = '', translations = {} }) => {
+  const nodeRef = useRef(null);
+  const validationSchema = Yup.object().shape({
+    name: Yup.string().required(translations['amp.outcomeoutput:errors-name-required'] || 'Name is required'),
+    description: Yup.string()
+  });
+
+  const initialValues = {
+    name: initialName,
+    description: initialDescription
+  };
+
+  const handleClose = () => setShow(false);
+
+  return (
+    <Modal
+      show={show}
+      onHide={handleClose}
+      centered
+      ref={nodeRef}
+      animation={false}
+      backdropClassName={styles.modal_backdrop}
+      backdrop="static"
+      keyboard={false}
+      size='lg'
+    >
+      <Modal.Header closeButton>
+        <Modal.Title>{translations['amp.outcomeoutput:modal-title-outcome'] || 'Add New Outcome'}</Modal.Title>
+      </Modal.Header>
+      <Formik
+        initialValues={initialValues}
+        validationSchema={validationSchema}
+        enableReinitialize
+        onSubmit={(values, { resetForm }) => {
+          if (onSubmit) onSubmit(values);
+          setShow(false);
+          resetForm();
+        }}
+      >
+        {(props: FormikProps<{ name: string; description?: string }>) => (
+          <Form noValidate onSubmit={props.handleSubmit}>
+            <Modal.Body>
+              <div className={styles.viewmodal_wrapper}>
+                <Row className={styles.view_row}>
+                  <Form.Group as={Col} className={styles.view_item} controlId="formOutcomeName">
+                    <Form.Label>{translations['amp.outcomeoutput:outcome-name'] || 'Outcome Name'}</Form.Label>
+                    <Form.Control
+                      defaultValue={props.values.name}
+                      onChange={props.handleChange}
+                      onBlur={props.handleBlur}
+                      name="name"
+                      className={`${styles.input_field} ${(props.errors.name && props.touched.name) && styles.text_is_invalid}`}
+                      isInvalid={!!props.errors.name}
+                      required
+                      aria-required type="text"
+                      placeholder={translations['amp.outcomeoutput:outcome-name'] || 'Outcome Name'}
+                    />
+                    <Form.Control.Feedback type="invalid" className={styles.text_is_invalid}>
+                      {props.errors.name}
+                    </Form.Control.Feedback>
+                  </Form.Group>
+                </Row>
+                <Row className={styles.view_row}>
+                  <Form.Group as={Col} className={styles.view_item} controlId="formOutcomeDescription">
+                    <Form.Label>{translations['amp.outcomeoutput:outcome-description'] || 'Outcome Description'}</Form.Label>
+                    <Form.Control
+                      defaultValue={props.values.description}
+                      onChange={props.handleChange}
+                      onBlur={props.handleBlur}
+                      name="description"
+                      type="text"
+                      className={`${styles.input_field} ${(props.errors.description && props.touched.description) && styles.text_is_invalid}`}
+                      placeholder={translations['amp.outcomeoutput:outcome-description'] || 'Outcome Description'}
+                    />
+                    <Form.Control.Feedback type="invalid" className={styles.text_is_invalid}>
+                      {props.errors.description}
+                    </Form.Control.Feedback>
+                  </Form.Group>
+                </Row>
+              </div>
+            </Modal.Body>
+            <Modal.Footer>
+              <Button variant="secondary" onClick={handleClose}>
+                {translations['amp.outcomeoutput:cancel'] || 'Cancel'}
+              </Button>
+              <Button type="submit" variant="success">
+                {translations['amp.outcomeoutput:save-outcome'] || 'Save Outcome'}
+              </Button>
+            </Modal.Footer>
+          </Form>
+        )}
+      </Formik>
+    </Modal>
+  );
+};
+
+export default OutcomeModal;

amp/TEMPLATE/reampv2/packages/reampv2-app/src/modules/admin/indicator_manager/components/modals/OutputModal.tsx

@@ -0,0 +1,146 @@
+import React, { useRef } from 'react';
+import { Modal, Button, Form, Row, Col } from 'react-bootstrap';
+import { Formik, FormikProps } from 'formik';
+import * as Yup from 'yup';
+import styles from './css/IndicatorModal.module.css';
+
+interface Outcome {
+  id: number;
+  name: string;
+}
+
+interface AddNewOutputModalProps {
+  show: boolean;
+  setShow: (show: boolean) => void;
+  onSubmit?: (output: { name: string; description?: string; outcomeId: number }) => void;
+  initialName?: string;
+  initialDescription?: string;
+  selectedOutcome?: Outcome;
+  translations?: Record<string, string>;
+  loading?: boolean;
+}
+
+const OutputModal: React.FC<AddNewOutputModalProps> = ({
+  show,
+  setShow,
+  onSubmit,
+  initialName = '',
+  initialDescription = '',
+  selectedOutcome = undefined,
+  translations = {},
+  loading = false
+}) => {
+  const nodeRef = useRef(null);
+
+  // Only render if selectedOutcome is provided
+  if (!selectedOutcome) return null;
+
+  const validationSchema = Yup.object().shape({
+    name: Yup.string().required(translations['amp.outcomeoutput:errors-name-required'] || 'Name is required'),
+    description: Yup.string(),
+    outcomeId: Yup.number().required('Outcome is required')
+  });
+
+  const initialValues = {
+    name: initialName,
+    description: initialDescription,
+    outcomeId: selectedOutcome.id
+  };
+
+  const handleClose = () => setShow(false);
+
+  return (
+    <Modal
+      show={show}
+      onHide={handleClose}
+      centered
+      ref={nodeRef}
+      animation={false}
+      backdropClassName={styles.modal_backdrop}
+      backdrop="static"
+      keyboard={false}
+      size='lg'
+    >
+      <Modal.Header closeButton>
+        <Modal.Title>{translations['amp.outcomeoutput:modal-title-output'] || 'Add New Output'}</Modal.Title>
+      </Modal.Header>
+      <Formik
+        initialValues={initialValues}
+        validationSchema={validationSchema}
+        enableReinitialize
+        onSubmit={(values, { resetForm }) => {
+          if (onSubmit) onSubmit(values);
+          setShow(false);
+          resetForm();
+        }}
+      >
+        {(props: FormikProps<{ name: string; description?: string; outcomeId: number }>) => (
+          <Form noValidate onSubmit={props.handleSubmit}>
+            <Modal.Body>
+              <div className={styles.viewmodal_wrapper}>
+                <Row className={styles.view_row}>
+                  <Form.Group as={Col} className={styles.view_item} controlId="formOutputName">
+                    <Form.Label>{translations['amp.outcomeoutput:output-name'] || 'Output Name'}</Form.Label>
+                    <Form.Control
+                      defaultValue={props.values.name}
+                      onChange={props.handleChange}
+                      onBlur={props.handleBlur}
+                      name="name"
+                      className={`${styles.input_field} ${(props.errors.name && props.touched.name) && styles.text_is_invalid}`}
+                      isInvalid={!!props.errors.name}
+                      required
+                      aria-required type="text"
+                      placeholder={translations['amp.outcomeoutput:output-name'] || 'Output Name'}
+                    />
+                    <Form.Control.Feedback type="invalid" className={styles.text_is_invalid}>
+                      {props.errors.name}
+                    </Form.Control.Feedback>
+                  </Form.Group>
+                </Row>
+                <Row className={styles.view_row}>
+                  <Form.Group as={Col} className={styles.view_item} controlId="formOutputDescription">
+                    <Form.Label>{translations['amp.outcomeoutput:output-description'] || 'Output Description'}</Form.Label>
+                    <Form.Control
+                      defaultValue={props.values.description}
+                      onChange={props.handleChange}
+                      onBlur={props.handleBlur}
+                      name="description"
+                      type="text"
+                      className={`${styles.input_field} ${(props.errors.description && props.touched.description) && styles.text_is_invalid}`}
+                      placeholder={translations['amp.outcomeoutput:output-description'] || 'Output Description'}
+                    />
+                    <Form.Control.Feedback type="invalid" className={styles.text_is_invalid}>
+                      {props.errors.description}
+                    </Form.Control.Feedback>
+                  </Form.Group>
+                </Row>
+                <Row className={styles.view_row}>
+                  <Form.Group as={Col} className={styles.view_item} controlId="formOutputOutcome">
+                    <Form.Label>{translations['amp.outcomeoutput:linked-outcome'] || 'Linked Outcome'}</Form.Label>
+                    <Form.Control
+                      type="text"
+                      value={`${selectedOutcome.id}: ${selectedOutcome.name}`}
+                      disabled
+                      readOnly
+                      className={styles.input_field}
+                    />
+                  </Form.Group>
+                </Row>
+              </div>
+            </Modal.Body>
+            <Modal.Footer>
+              <Button variant="secondary" onClick={handleClose} disabled={loading}>
+                {translations['amp.outcomeoutput:cancel'] || 'Cancel'}
+              </Button>
+              <Button type="submit" variant="success" disabled={loading}>
+                {translations['amp.outcomeoutput:save-output'] || 'Save Output'}
+              </Button>
+            </Modal.Footer>
+          </Form>
+        )}
+      </Formik>
+    </Modal>
+  );
+};
+
+export default OutputModal;