navigation fixes

frontend/src/components/periodicDataUpdates/PeriodicDataUpdates.tsx

@@ -7,10 +7,12 @@ import { PeriodicDataUpdatesTemplatesList } from './PeriodicDataUpdatesTemplates
 import { PeriodicDataUpdatesUpdatesList } from './PeriodicDataUpdatesUpdatesList';
 import { useBaseUrl } from '@hooks/useBaseUrl';
 import { PeriodDataUpdatesUploadDialog } from './PeriodicDataUpdatesUploadDialog';
+import { useProgramContext } from 'src/programContext';
 
 export const PeriodicDataUpdates = (): React.ReactElement => {
   const [value, setValue] = useState(0);
   const { baseUrl } = useBaseUrl();
+  const { isSocialDctType } = useProgramContext();
 
   const handleChange = (
     _event: React.ChangeEvent<object>,
@@ -19,6 +21,10 @@ export const PeriodicDataUpdates = (): React.ReactElement => {
     setValue(newValue);
   };
 
+  const newTemplatePath = isSocialDctType
+    ? `/${baseUrl}/population/people/new-template`
+    : `/${baseUrl}/population/individuals/new-template`;
+
   return (
     <BaseSection
       title="Periodic Data Updates"
@@ -41,7 +47,7 @@ export const PeriodicDataUpdates = (): React.ReactElement => {
               variant="contained"
               color="primary"
               component={Link}
-              to={`/${baseUrl}/population/household-members/new-template`}
+              to={newTemplatePath}
               startIcon={<AddIcon />}
             >
               New Template

frontend/src/containers/pages/householdMembers/NewTemplatePage.tsx

@@ -45,7 +45,7 @@ export const NewTemplatePage = (): React.ReactElement => {
   const breadCrumbsItems: BreadCrumbsItem[] = [
     {
       title: t('Household Members'),
-      to: `/${baseUrl}/population/household-members`,
+      to: `/${baseUrl}/population/individuals`,
     },
   ];
 
@@ -107,7 +107,7 @@ export const NewTemplatePage = (): React.ReactElement => {
                   variant="outlined"
                   color="secondary"
                   component={Link}
-                  to={`/${baseUrl}/population/household-members`}
+                  to={`/${baseUrl}/population/individuals`}
                   style={{ marginRight: '10px' }}
                 >
                   Cancel

frontend/src/containers/pages/householdMembers/NewTemplatePeoplePage.tsx

@@ -0,0 +1,138 @@
+import { useState } from 'react';
+import { Link, useLocation } from 'react-router-dom';
+import { BreadCrumbsItem } from '@components/core/BreadCrumbs';
+import { PageHeader } from '@components/core/PageHeader';
+import { useBaseUrl } from '@hooks/useBaseUrl';
+import { usePermissions } from '@hooks/usePermissions';
+import { useTranslation } from 'react-i18next';
+import { hasPermissions, PERMISSIONS } from 'src/config/permissions';
+import { BaseSection } from '@components/core/BaseSection';
+import { Button, Stepper, Step, StepLabel, Box } from '@mui/material';
+import { getFilterFromQueryParams } from '@utils/utils';
+import { FilterIndividuals } from '@components/periodicDataUpdates/FilterIndividuals';
+import { FieldsToUpdate } from '@components/periodicDataUpdates/FieldsToUpdate';
+import { Formik } from 'formik';
+
+export const NewTemplatePeoplePage = (): React.ReactElement => {
+  const { t } = useTranslation();
+  const { baseUrl } = useBaseUrl();
+  const permissions = usePermissions();
+  const location = useLocation();
+
+  const initialFilter = {
+    registrationDataImport: '',
+    genderIdentity: '',
+    ageMin: null,
+    ageMax: null,
+    hasGrievanceTicket: '',
+    receivedAssistance: '',
+    householdSizeMin: null,
+    householdSizeMax: null,
+  };
+
+  const [filter, setFilter] = useState(
+    getFilterFromQueryParams(location, initialFilter),
+  );
+  const [appliedFilter, setAppliedFilter] = useState(
+    getFilterFromQueryParams(location, initialFilter),
+  );
+
+  const initialValues = {
+    ...appliedFilter,
+    selectedFields: [],
+  };
+
+  const breadCrumbsItems: BreadCrumbsItem[] = [
+    {
+      title: t('People'),
+      to: `/${baseUrl}/population/people`,
+    },
+  ];
+
+  const [activeStep, setActiveStep] = useState(0);
+  const steps = ['Filter Individuals', 'Fields to Update'];
+
+  const handleNext = () => {
+    setActiveStep((prevActiveStep) => prevActiveStep + 1);
+  };
+
+  const handleBack = () => {
+    setActiveStep((prevActiveStep) => prevActiveStep - 1);
+  };
+
+  return (
+    <Formik
+      initialValues={initialValues}
+      onSubmit={(values) => {
+        console.log('values', values);
+      }}
+    >
+      {({ values, setFieldValue, submitForm }) => (
+        <>
+          <PageHeader
+            title={t('New Template Page')}
+            breadCrumbs={
+              hasPermissions(
+                PERMISSIONS.POPULATION_VIEW_HOUSEHOLDS_LIST,
+                permissions,
+              )
+                ? breadCrumbsItems
+                : null
+            }
+          />
+          <BaseSection>
+            <Stepper activeStep={activeStep} alternativeLabel>
+              {steps.map((label) => (
+                <Step key={label}>
+                  <StepLabel>{label}</StepLabel>
+                </Step>
+              ))}
+            </Stepper>
+            {activeStep === 0 && (
+              <FilterIndividuals
+                isOnPaper={false}
+                filter={filter}
+                setFilter={setFilter}
+                initialFilter={initialFilter}
+                appliedFilter={appliedFilter}
+                setAppliedFilter={setAppliedFilter}
+              />
+            )}
+            {activeStep === 1 && (
+              <FieldsToUpdate values={values} setFieldValue={setFieldValue} />
+            )}
+            <Box display="flex" mt={4} justifyContent="flex-start" width="100%">
+              <Box mr={1}>
+                <Button
+                  variant="outlined"
+                  color="secondary"
+                  component={Link}
+                  to={`/${baseUrl}/population/people`}
+                  style={{ marginRight: '10px' }}
+                >
+                  Cancel
+                </Button>
+              </Box>
+              {activeStep === 1 && (
+                <Box mr={1}>
+                  <Button variant="outlined" onClick={handleBack}>
+                    Back
+                  </Button>
+                </Box>
+              )}
+              <Box>
+                <Button
+                  variant="contained"
+                  color="primary"
+                  onClick={activeStep === 1 ? submitForm : handleNext}
+                >
+                  {activeStep === 1 ? 'Generate Template' : 'Next'}
+                </Button>
+              </Box>
+            </Box>
+          </BaseSection>
+        </>
+      )}
+    </Formik>
+  );
+};

frontend/src/containers/routers/PopulationRoutes.tsx

@@ -7,6 +7,7 @@ import { PeoplePage } from '@containers/pages/people/PeoplePage';
 import { PeopleDetailsPage } from '@containers/pages/people/PeopleDetailsPage';
 import { NewTemplatePage } from '@containers/pages/householdMembers/NewTemplatePage';
 import { HouseholdMembersPage } from '@containers/pages/population/HouseholdMembersPage';
+import { NewTemplatePeoplePage } from '@containers/pages/householdMembers/NewTemplatePeoplePage';
 
 export const PopulationRoutes = (): React.ReactElement => {
   const populationRoutes = [
@@ -35,9 +36,13 @@ export const PopulationRoutes = (): React.ReactElement => {
       element: <PopulationHouseholdPage />,
     },
     {
-      path: 'population/household-members/new-template',
+      path: 'population/individuals/new-template',
       element: <NewTemplatePage />,
     },
+    {
+      path: 'population/people/new-template',
+      element: <NewTemplatePeoplePage />,
+    },
   ];
 
   return useRoutes(populationRoutes);