feat(surge-card): display earliest operation start date & total duration for an emergency

Author: samshara

app/src/views/ActiveSurgeDeployments/ActiveSurgeSupport/SurgeCard/i18n.json

@@ -5,6 +5,8 @@
         "surgeRapidResponsePersonnel": "Rapid Response Personnel",
         "surgeDeployedERUs": "ERUs Deployed",
         "surgeDeployedRRs": "RRs Deployed",
-        "surgeDeployingOrganizations": "Deploying Organisation"
+        "surgeDeployingOrganizations": "Deploying Organisation",
+        "operationTimeline": "{startDate} ({duration})",
+        "operationStartDate": "Operation Start Date"
     }
 }

app/src/views/ActiveSurgeDeployments/ActiveSurgeSupport/SurgeCard/index.tsx

@@ -5,6 +5,12 @@ import {
     TextOutput,
 } from '@ifrc-go/ui';
 import { useTranslation } from '@ifrc-go/ui/hooks';
+import {
+    getDuration,
+    maxSafe,
+    minSafe,
+    resolveToComponent,
+} from '@ifrc-go/ui/utils';
 import {
     _cs,
     isDefined,
@@ -38,11 +44,23 @@ function SurgeCard(props: Props) {
             deployed_personnel_count: deployedPersonnelCount,
             deployments,
             erus,
+            appeals,
         },
     } = props;
 
     const strings = useTranslation(i18n);
 
+    const operationStartDate = minSafe(appeals.map(
+        (a) => a.start_date,
+    ).filter(isDefined).map((d) => new Date(d).getTime()));
+
+    const operationEndDate = maxSafe(appeals.map(
+        (a) => a.end_date,
+    ).filter(isDefined).map((d) => new Date(d).getTime()));
+
+    const duration = isDefined(operationStartDate) && isDefined(operationEndDate)
+        ? getDuration(new Date(operationStartDate), new Date(operationEndDate)) : undefined;
+
     const deployedERUTypes = useMemo(() => (
         joinStrings(erus.map((eru) => eru.type_display).filter(isDefined))
     ), [erus]);
@@ -81,6 +99,20 @@ function SurgeCard(props: Props) {
                     {emergencyName}
                 </Link>
             )}
+            headerDescriptionContainerClassName={styles.headerDescription}
+            headerDescription={resolveToComponent(
+                strings.operationTimeline,
+                {
+                    startDate: (
+                        <TextOutput
+                            value={operationStartDate}
+                            label={strings.operationStartDate}
+                            valueType="date"
+                        />
+                    ),
+                    duration,
+                },
+            )}
             headingLevel={4}
             withInternalPadding
             withHeaderBorder
@@ -96,6 +128,7 @@ function SurgeCard(props: Props) {
             {deployedERUCount > 0 && (
                 <Container
                     spacing="cozy"
+                    className={styles.surge}
                     childrenContainerClassName={styles.figures}
                     footerContent={(
                         <TextOutput
@@ -129,8 +162,10 @@ function SurgeCard(props: Props) {
             )}
             {deployedPersonnelCount > 0 && (
                 <Container
+                    className={styles.surge}
                     childrenContainerClassName={styles.figures}
                     spacing="cozy"
+                    footerClassName={styles.footerContent}
                     footerContent={(
                         <TextOutput
                             value={personnelDeployingOrganizations}

app/src/views/ActiveSurgeDeployments/ActiveSurgeSupport/SurgeCard/styles.module.css

@@ -4,6 +4,12 @@
     width: 100%;
     overflow: auto;
 
+    .header-description {
+        display: flex;
+        gap: var(--go-ui-spacing-xs);
+        color: var(--go-ui-color-text-light);
+    }
+
     .heading-container {
         width: 100%;
         overflow: auto;
@@ -29,24 +35,30 @@
             border-bottom: var(--go-ui-width-separator-thin) solid var(--go-ui-color-separator);
         }
 
-        .figures {
+        .surge {
             display: flex;
             flex-grow: 1;
-            gap: var(--go-ui-spacing-sm);
 
-            .figure {
+            .figures {
                 display: flex;
-                flex-basis: 0;
-                flex-direction: column;
+                align-items: flex-start;
                 flex-grow: 1;
-                justify-content: flex-end;
-                padding: 0;
-            }
+                gap: var(--go-ui-spacing-sm);
+
+                .figure {
+                    display: flex;
+                    flex-basis: 0;
+                    flex-direction: column;
+                    flex-grow: 1;
+                    justify-content: flex-end;
+                    padding: 0;
+                }
 
-            .separator {
-                flex-shrink: 0;
-                background-color: var(--go-ui-color-separator);
-                width: var(--go-ui-width-separator-sm);
+                .separator {
+                    flex-shrink: 0;
+                    background-color: var(--go-ui-color-separator);
+                    width: var(--go-ui-width-separator-sm);
+                }
             }
         }
     }

…tionMigrations/000022-1742971344419.json …tionMigrations/000022-1742989829568.jsontranslationMigrations/000022-1742971344419.json renamed to translationMigrations/000022-1742989829568.json translationMigrations/000022-1742971344419.json renamed to translationMigrations/000022-1742989829568.json

@@ -163,6 +163,18 @@
             "namespace": "activeSurgeDeployments",
             "value": "Emergency Start Date"
         },
+        {
+            "action": "add",
+            "key": "operationStartDate",
+            "namespace": "activeSurgeDeployments",
+            "value": "Operation Start Date"
+        },
+        {
+            "action": "add",
+            "key": "operationTimeline",
+            "namespace": "activeSurgeDeployments",
+            "value": "{startDate} ({duration})"
+        },
         {
             "action": "add",
             "key": "personnelLabel",