Project: ERU Readiness

.changeset/all-weeks-grow.md

@@ -0,0 +1,5 @@
+---
+"@ifrc-go/ui": minor
+---
+
+Add MultiTimelineHeader component to column shortcuts

.changeset/grumpy-ways-wash.md

@@ -0,0 +1,19 @@
+---
+"go-web-app": minor
+---
+
+Implement [ERU Readiness](https://github.com/IFRCGo/go-web-app/issues/1710)
+
+- Restucture surge page to acommodate ERU
+  - Move surge deployment related sections to a new dedicated tab **Active Surge Deployments**
+    - Update active deployments to improve scaling of points in the map
+    - Add **Active Surge Support per Emergency** section
+  - Revamp **Surge Overview** tab
+    - Add **Rapid Response Personnel** sub-tab
+      - Update existings charts and add new related tables/charts
+    - Add **Emergency Response Unit** sub-tab
+      - Add section to visualize ERU capacity and readiness
+      - Add section to view ongoing ERU deployments
+      - Add a form to update ERU Readiness
+      - Add option to export ERU Readiness data
+- Update **Respond > Surge/Deployments** menu to include **Active Surge Deployments**

app/src/App/routes/SurgeRoutes.tsx

@@ -17,11 +17,11 @@ import {
     rootLayout,
 } from './common';
 
-type DefaultSurgeChild = 'overview';
+type DefaultSurgeChild = 'active-surge-deployments';
 const surgeLayout = customWrapRoute({
     parent: rootLayout,
     path: 'surge',
-    forwardPath: 'overview' satisfies DefaultSurgeChild,
+    forwardPath: 'active-surge-deployments' satisfies DefaultSurgeChild,
     component: {
         render: () => import('#views/Surge'),
         props: {},
@@ -40,7 +40,7 @@ const surgeIndex = customWrapRoute({
         eagerLoad: true,
         render: Navigate,
         props: {
-            to: 'overview' satisfies DefaultSurgeChild,
+            to: 'active-surge-deployments' satisfies DefaultSurgeChild,
             replace: true,
         },
     },
@@ -50,9 +50,25 @@ const surgeIndex = customWrapRoute({
     },
 });
 
-const surgeOverview = customWrapRoute({
+const activeSurgeDeployments = customWrapRoute({
     parent: surgeLayout,
-    path: 'overview' satisfies DefaultSurgeChild,
+    path: 'active-surge-deployments',
+    component: {
+        render: () => import('#views/ActiveSurgeDeployments'),
+        props: {},
+    },
+    context: {
+        title: 'Active Surge Deployments',
+        visibility: 'anything',
+    },
+});
+
+type DefaultSurgeOverviewChild = 'rapid-response-personnel';
+
+const surgeOverviewLayout = customWrapRoute({
+    parent: surgeLayout,
+    path: 'overview',
+    forwardPath: 'rapid-response-personnel' satisfies DefaultSurgeOverviewChild,
     component: {
         render: () => import('#views/SurgeOverview'),
         props: {},
@@ -63,6 +79,67 @@ const surgeOverview = customWrapRoute({
     },
 });
 
+const surgeOverviewIndex = customWrapRoute({
+    parent: surgeOverviewLayout,
+    index: true,
+    component: {
+        eagerLoad: true,
+        render: Navigate,
+        props: {
+            to: 'rapid-response-personnel' satisfies DefaultSurgeOverviewChild,
+            replace: true,
+        },
+    },
+    context: {
+        title: 'Surge Overview',
+        visibility: 'anything',
+    },
+});
+
+const rapidResponsePersonnel = customWrapRoute({
+    parent: surgeOverviewLayout,
+    path: 'rapid-response-personnel',
+    component: {
+        render: () => import('#views/SurgeOverview/RapidResponsePersonnel'),
+        props: {},
+    },
+    context: {
+        title: 'Rapid Response Personnel',
+        visibility: 'anything',
+    },
+});
+
+const emergencyResponseUnit = customWrapRoute({
+    parent: surgeOverviewLayout,
+    path: 'emergency-response-unit',
+    component: {
+        render: () => import('#views/SurgeOverview/EmergencyResponseUnit'),
+        props: {},
+    },
+    context: {
+        title: 'Emergency Response Unit',
+        visibility: 'anything',
+    },
+});
+
+const eruReadinessForm = customWrapRoute({
+    parent: rootLayout,
+    path: 'eru-readiness',
+    component: {
+        render: () => import('#views/EruReadinessForm'),
+        props: {},
+    },
+    wrapperComponent: Auth,
+    context: {
+        title: 'ERU Readiness Update Form',
+        visibility: 'is-authenticated',
+        permissions: ({
+            isRegionalOrCountryAdmin,
+            isSuperUser,
+        }) => isSuperUser || isRegionalOrCountryAdmin,
+    },
+});
+
 const surgeOperationalToolbox = customWrapRoute({
     parent: surgeLayout,
     path: 'operational-toolbox',
@@ -1264,7 +1341,7 @@ function DeploymentNavigate() {
     const params = useParams<{ surgeId: string }>();
 
     const deploymentRouteMap: Record<string, MyOutputNonIndexRouteObject<ExtendedProps>> = {
-        overview: surgeOverview,
+        overview: surgeOverviewLayout,
         'operational-toolbox': surgeOperationalToolbox,
         personnel: allDeployedPersonnel,
         erus: allDeployedEmergencyResponseUnits,
@@ -1276,7 +1353,7 @@ function DeploymentNavigate() {
 
     const path = isDefined(newRoute)
         ? newRoute.absoluteForwardPath
-        : surgeOverview.absoluteForwardPath;
+        : surgeOverviewLayout.absoluteForwardPath;
 
     return (
         <Navigate
@@ -1483,7 +1560,7 @@ const deploymentCatalogueIndex = customWrapRoute({
     },
     wrapperComponent: Auth,
     context: {
-        title: 'Catalogue of surge services',
+        title: 'Catalogue of Surge Services',
         visibility: 'anything',
     },
 });
@@ -1498,7 +1575,7 @@ const deploymentCatalogueChildren = customWrapRoute({
     },
     wrapperComponent: Auth,
     context: {
-        title: 'Catalogue of surge services',
+        title: 'Catalogue of Surge Services',
         visibility: 'anything',
     },
 });
@@ -1510,7 +1587,7 @@ const obsoleteUrlDeployments = customWrapRoute({
         eagerLoad: true,
         render: Navigate,
         props: {
-            to: surgeOverview.absolutePath,
+            to: surgeOverviewLayout.absolutePath,
         },
     },
     wrapperComponent: Auth,
@@ -1522,9 +1599,10 @@ const obsoleteUrlDeployments = customWrapRoute({
 
 export default {
     surgeLayout,
-    surgeOverview,
+    surgeOverviewLayout,
     surgeOperationalToolbox,
     surgeCatalogueLayout,
+    surgeOverviewIndex,
     surgeIndex,
     catalogueIndex,
     surgeCatalogueOverview,
@@ -1562,10 +1640,8 @@ export default {
     surgeCatalogueInformationManagement,
     surgeCatalogueInformationManagementSatelliteImagery,
     surgeCatalogueInformationManagementRolesResponsibility,
-    // eslint-disable-next-line max-len
-    surgeCatalogueInformationManagementSupport: surgeCatalogueInformationManagementRegionalOfficeSupport,
-    // eslint-disable-next-line max-len
-    surgeCatalogueInformationManagementOperationSupport: surgeCatalogueInformationManagementGenevaSupport,
+    surgeCatalogueInformationManagementRegionalOfficeSupport,
+    surgeCatalogueInformationManagementGenevaSupport,
     surgeCatalogueInformationManagementComposition,
     surgeCatalogueInformationTechnology,
     surgeCataloguePmer,
@@ -1619,4 +1695,8 @@ export default {
     deploymentCatalogueChildren,
     deploymentOthers,
     obsoleteUrlDeployments,
+    activeSurgeDeployments,
+    rapidResponsePersonnel,
+    emergencyResponseUnit,
+    eruReadinessForm,
 };

app/src/App/routes/common.tsx

@@ -16,6 +16,7 @@ interface Perms {
     isCountryAdmin: (countryId: number | undefined) => boolean,
     isRegionPerAdmin: (regionId: number | undefined) => boolean,
     isCountryPerAdmin: (countryId: number | undefined) => boolean,
+    isRegionalOrCountryAdmin: boolean,
     isPerAdmin: boolean,
     isIfrcAdmin: boolean,
     isSuperUser: boolean,

app/src/components/DisplayName/index.tsx

@@ -0,0 +1,9 @@
+interface DisplayNameOutputProps {
+    name: string;
+}
+
+function DisplayName({ name }: DisplayNameOutputProps) {
+    return name;
+}
+
+export default DisplayName;

app/src/components/Navbar/i18n.json

@@ -70,6 +70,7 @@
         "userMenuGoResourcesItem":"GO Resources",
         "userMenuGoResourcesItemDescription":"Find all relevant user guides, references videos, IFRC other resources, and GO contacts on this page.",
         "userMenuSurveyDesignToolItem":"Survey Designer",
-        "userMenuSurveyDesignToolItemDescription": "Build standardised needs assessment surveys quickly and efficiently and publish them in IFRC KoboToolbox."
+        "userMenuSurveyDesignToolItemDescription": "Build standardised needs assessment surveys quickly and efficiently and publish them in IFRC KoboToolbox.",
+        "userMenuActiveSurgeDeployments": "Active Surge Deployments"
     }
 }

app/src/components/Navbar/index.tsx

@@ -368,7 +368,14 @@ function Navbar(props: Props) {
                                 </div>
                                 <DropdownMenuItem
                                     type="link"
-                                    to="surgeOverview"
+                                    to="activeSurgeDeployments"
+                                    variant="tertiary"
+                                >
+                                    {strings.userMenuActiveSurgeDeployments}
+                                </DropdownMenuItem>
+                                <DropdownMenuItem
+                                    type="link"
+                                    to="surgeOverviewLayout"
                                     variant="tertiary"
                                 >
                                     {strings.userMenuSurgeGlobalOverview}

app/src/hooks/domain/usePermissions.ts

@@ -38,13 +38,17 @@ function usePermissions() {
 
             const isPerAdmin = !isGuestUser
                 && ((userMe?.is_per_admin_for_countries.length ?? 0) > 0
-                || (userMe?.is_admin_for_regions.length ?? 0) > 0);
+                || (userMe?.is_per_admin_for_regions.length ?? 0) > 0);
 
             const isIfrcAdmin = !isGuestUser
                 && (!!userMe?.is_ifrc_admin || !!userMe?.email?.toLowerCase().endsWith('@ifrc.org'));
 
             const isSuperUser = !isGuestUser && !!userMe?.is_superuser;
 
+            const isRegionalOrCountryAdmin = !isGuestUser
+                && ((userMe?.is_admin_for_countries.length ?? 0) > 0
+                || (userMe?.is_admin_for_regions.length ?? 0) > 0);
+
             return {
                 isDrefRegionalCoordinator,
                 isRegionAdmin,
@@ -55,6 +59,7 @@ function usePermissions() {
                 isIfrcAdmin,
                 isSuperUser,
                 isGuestUser,
+                isRegionalOrCountryAdmin,
             };
         },
         [userMe],

app/src/utils/common.ts

@@ -52,3 +52,10 @@ export function getFirstTruthyString(
 
     return invalidText;
 }
+
+export function joinStrings(
+    values: (string | undefined)[],
+    separator: string = ', ',
+): string {
+    return values.filter(Boolean).join(separator);
+}

app/src/utils/constants.ts

@@ -191,3 +191,7 @@ export const multiMonthSelectDefaultValue = listToMap(
     (key) => key,
     () => false,
 );
+
+export const ERU_READINESS_READY = 1;
+export const ERU_READINESS_CAN_CONTRIBUTE = 2;
+export const ERU_READINESS_NO_CAPACITY = 3;