feat(emergency): add last updated date for crisis categorization

Author: AdityaKhatri

app/src/components/domain/HighlightedOperations/OperationCard/index.tsx

@@ -54,6 +54,7 @@ function OperationCard(props: Props) {
             id,
             name,
             ifrc_severity_level,
+            ifrc_severity_level_update_date,
             ifrc_severity_level_display,
             updated_at,
             appeals,
@@ -139,15 +140,26 @@ function OperationCard(props: Props) {
                     <Tooltip
                         description={(
                             <>
-                                <TextOutput
-                                    label={(
-                                        <SeverityIndicator
-                                            level={ifrc_severity_level}
+                                <div className={styles.severityContainer}>
+                                    <TextOutput
+                                        label={(
+                                            <SeverityIndicator
+                                                level={ifrc_severity_level}
+                                            />
+                                        )}
+                                        value={ifrc_severity_level_display}
+                                        withoutLabelColon
+                                    />
+                                    {ifrc_severity_level_update_date && ','}
+                                    {ifrc_severity_level_update_date && (
+                                        <TextOutput
+                                            className={styles.date}
+                                            value={ifrc_severity_level_update_date}
+                                            valueType="date"
+                                            withoutLabelColon
                                         />
                                     )}
-                                    value={ifrc_severity_level_display}
-                                    withoutLabelColon
-                                />
+                                </div>
                                 <TextOutput
                                     label={<FocusLineIcon />}
                                     value={countriesInfoDisplay}

app/src/components/domain/HighlightedOperations/OperationCard/styles.module.css

@@ -40,3 +40,12 @@
         }
     }
 }
+
+.severity-container {
+    display: flex;
+
+    .date {
+        padding-left: var(--go-ui-spacing-xs);
+    }
+}
+

app/src/views/EmergencyDetails/i18n.json

@@ -14,6 +14,7 @@
         "situationalOverviewTitle": "Situational Overview",
         "linksTitle": "Links",
         "emergencyMapTitle": "Affected Provinces",
+        "severityLevelUpdateDateLabel": "Updated date",
         "exportMap": "Export",
         "contactsTitle": "Contacts",
         "sourceLabel": "Source {source}"

app/src/views/EmergencyDetails/index.tsx

@@ -3,6 +3,7 @@ import { useOutletContext } from 'react-router-dom';
 import {
     Container,
     HtmlOutput,
+    InfoPopup,
     KeyFigure,
     TextOutput,
 } from '@ifrc-go/ui';
@@ -193,6 +194,20 @@ export function Component() {
                                 <SeverityIndicator
                                     level={emergencyResponse.ifrc_severity_level}
                                 />
+                                {emergencyResponse.ifrc_severity_level_update_date && (
+                                    <InfoPopup
+                                        description={(
+                                            <TextOutput
+                                                label={strings.severityLevelUpdateDateLabel}
+                                                value={
+                                                    emergencyResponse
+                                                        .ifrc_severity_level_update_date
+                                                }
+                                                valueType="date"
+                                            />
+                                        )}
+                                    />
+                                )}
                             </>
                         )}
                         valueClassName={styles.disasterCategoryValue}