Add keyfigues for operational learning

Author: roshni73

app/src/views/OperationalLearning/i18n.json

@@ -20,6 +20,10 @@
         "failedToCreateExport": "Failed to generate export.",
         "disclaimerMessage": "This is an updated implementation of the Operational Learning project started by the DREF and PER teams at IFRC. The previous dashboard can be found {link}.",
         "here": "here",
-        "beta": "beta"
+        "beta": "beta",
+        "operationsIncluded": "Operations Included",
+        "sourcesUsed": "Sources Used",
+        "learningExtract": "Learning Extracts",
+        "sectorsCovered": "Sectors Covered"
     }
 }

app/src/views/OperationalLearning/index.tsx

@@ -11,6 +11,7 @@ import {
     DismissableMultiListOutput,
     DismissableTextOutput,
     Header,
+    KeyFigure,
     List,
     Tab,
     TabList,
@@ -476,6 +477,40 @@ export function Component() {
                     </>
                 )}
             />
+            <div
+                className={styles.keyFigureCardList}
+            >
+                <div className={styles.keyFigureCard}>
+                    <KeyFigure
+                        className={styles.keyFigure}
+                        value={undefined}
+                        label={strings.operationsIncluded}
+                        labelClassName={styles.keyFigureDescription}
+                    />
+                    <div className={styles.separator} />
+                    <KeyFigure
+                        className={styles.keyFigure}
+                        value={undefined}
+                        label={strings.sourcesUsed}
+                        labelClassName={styles.keyFigureDescription}
+                    />
+                    <div className={styles.separator} />
+                    <KeyFigure
+                        className={styles.keyFigure}
+                        value={undefined}
+                        label={strings.learningExtract}
+                        labelClassName={styles.keyFigureDescription}
+                    />
+                    <div className={styles.separator} />
+                    <KeyFigure
+                        className={styles.keyFigure}
+                        value={undefined}
+                        label={strings.sectorsCovered}
+                        labelClassName={styles.keyFigureDescription}
+                    />
+                </div>
+            </div>
+
             {showKeyInsights && (
                 <KeyInsights
                     opsLearningSummaryResponse={opsLearningSummaryResponse}

app/src/views/OperationalLearning/styles.module.css

@@ -70,5 +70,40 @@
             font-style: italic;
         }
     }
+    
+    .key-figure-card-list {
+        display: grid;
+        grid-gap: var(--go-ui-spacing-md);
+        grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
+
+        @media screen and (max-width: 30rem) {
+            grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
+        }
+
+        .key-figure-card {
+            display: flex;
+            gap: var(--go-ui-spacing-md);
+            border-radius: var(--go-ui-border-radius-lg);
+            box-shadow: var(--go-ui-box-shadow-md);
+            background-color: var(--go-ui-color-white);
+            padding: var(--go-ui-spacing-md);
+    
+            .separator {
+                flex-shrink: 0;
+                border-left: var(--go-ui-width-separator-sm) solid var(--go-ui-color-separator);
+            }
+    
+            .key-figure {
+                flex-basis: 0;
+                flex-grow: 1;
+                padding: 0;
+    
+                .key-figure-description {
+                    font-size: var(--go-ui-font-size-sm);
+                }
+            }
+        }
+    }
 }
 
+