Add new section risk asssesment summary

src/webapp/pages/event-tracker/EventTrackerPage.tsx

@@ -23,6 +23,7 @@ import { StatsCard } from "../../components/stats-card/StatsCard";
 import { useLastAnalyticsRuntime } from "../../hooks/useLastAnalyticsRuntime";
 import { useOverviewCards } from "./useOverviewCards";
 import { SimpleModal } from "../../components/simple-modal/SimpleModal";
+import { RiskAssessmentSummaryInfo } from "./RiskAssessmentSummaryInfo";
 
 //TO DO : Create Risk assessment section
 export const riskAssessmentColumns: TableColumn[] = [
@@ -118,7 +119,9 @@ export const EventTrackerPage: React.FC = React.memo(() => {
                 </LoaderContainer>
             </Section>
             <Section
-                title="Risk Assessment"
+                title={
+                    riskAssessmentRows.length === 0 ? "Risk Assessment" : "Risk Assessment Summary"
+                }
                 hasSeparator={true}
                 headerButton={
                     riskAssessmentRows.length === 0 ? (
@@ -133,55 +136,69 @@ export const EventTrackerPage: React.FC = React.memo(() => {
                             {i18n.t("Create Risk Assessment")}
                         </Button>
                     ) : (
-                        <ButtonContainer>
-                            <Button
-                                variant="outlined"
-                                color="secondary"
-                                startIcon={<AddCircleOutline />}
-                                onClick={() => {
-                                    goToRiskSummaryForm();
-                                }}
-                            >
-                                {i18n.t("Edit Risk Assessment")}
-                            </Button>
-                            <Button
-                                variant="outlined"
-                                color="secondary"
-                                startIcon={<AddCircleOutline />}
-                                onClick={() => {
-                                    goToRiskGradingForm();
-                                }}
-                            >
-                                {i18n.t("Add new Grade")}
-                            </Button>
-                        </ButtonContainer>
+                        <Button
+                            variant="outlined"
+                            color="secondary"
+                            startIcon={<EditOutlined />}
+                            onClick={() => {
+                                goToRiskSummaryForm();
+                            }}
+                        >
+                            {i18n.t("Edit Risk Assessment")}
+                        </Button>
                     )
                 }
                 titleVariant="secondary"
             >
-                {riskAssessmentRows.length > 0 ? (
-                    <BasicTable
-                        columns={riskAssessmentColumns}
-                        rows={riskAssessmentRows}
-                        onOrderBy={orderByRiskAssessmentDate}
-                    />
+                {currentEventTracker?.riskAssessment?.summary ? (
+                    <div>
+                        <RiskAssessmentSummaryInfo
+                            riskAssessmentSummary={currentEventTracker?.riskAssessment?.summary}
+                        />
+                    </div>
                 ) : (
                     <NoticeBox title={i18n.t("Risk assessment incomplete")}>
                         {i18n.t("Risks associated with this event have not yet been assessed.")}
                     </NoticeBox>
                 )}
-                <Box sx={{ m: 5 }} />
-                {!!currentEventTracker?.riskAssessment?.grading?.length && (
-                    <Chart
-                        title="Risk Assessment History"
-                        chartType="risk-assessment-history"
-                        chartKey={
-                            currentEventTracker?.suspectedDisease?.name ||
-                            currentEventTracker?.hazardType
-                        }
-                    />
-                )}
             </Section>
+            {riskAssessmentRows.length > 0 ? (
+                <Section
+                    title="Risk Assessment Grade"
+                    hasSeparator={true}
+                    titleVariant="secondary"
+                    headerButton={
+                        <Button
+                            variant="outlined"
+                            color="secondary"
+                            startIcon={<AddCircleOutline />}
+                            onClick={() => {
+                                goToRiskGradingForm();
+                            }}
+                        >
+                            {i18n.t("Add new Grade")}
+                        </Button>
+                    }
+                >
+                    <BasicTable
+                        columns={riskAssessmentColumns}
+                        rows={riskAssessmentRows}
+                        onOrderBy={orderByRiskAssessmentDate}
+                    />
+                    <Box sx={{ m: 5 }} />
+                    {!!currentEventTracker?.riskAssessment?.grading?.length && (
+                        <Chart
+                            title="Risk Assessment History"
+                            chartType="risk-assessment-history"
+                            chartKey={
+                                currentEventTracker?.suspectedDisease?.name ||
+                                currentEventTracker?.hazardType
+                            }
+                        />
+                    )}
+                </Section>
+            ) : null}
+
             <Section title="Overview" hasSeparator={true} titleVariant="secondary">
                 <GridWrapper>
                     {overviewCards?.map((card, index) => (
@@ -262,8 +279,3 @@ export const EventTrackerPage: React.FC = React.memo(() => {
 const DurationFilterContainer = styled.div`
     max-width: 250px;
 `;
-
-const ButtonContainer = styled.div`
-    display: flex;
-    gap: 8px;
-`;

src/webapp/pages/event-tracker/RiskAssessmentSummaryInfo.tsx

@@ -0,0 +1,85 @@
+import React from "react";
+import styled from "styled-components";
+
+import i18n from "../../../utils/i18n";
+import { RiskAssessmentSummary } from "../../../domain/entities/risk-assessment/RiskAssessmentSummary";
+import { getDateAsMonthYearString } from "../../../data/repositories/utils/DateTimeHelper";
+
+export type RiskAssessmentSummaryProps = {
+    riskAssessmentSummary: RiskAssessmentSummary;
+};
+
+export const RiskAssessmentSummaryInfo: React.FC<RiskAssessmentSummaryProps> = React.memo(props => {
+    const { riskAssessmentSummary } = props;
+
+    return (
+        <SummaryContainer>
+            <SummaryWrapper>
+                <SummaryContent $direction="column">
+                    <TextBold>{i18n.t("Overall Risk")}</TextBold>
+                    <Text>
+                        {i18n.t("National:", { nsSeparator: false })}{" "}
+                        {riskAssessmentSummary.overallRiskNational.name}
+                    </Text>
+                    <Text>
+                        {i18n.t("Regional:", { nsSeparator: false })}{" "}
+                        {riskAssessmentSummary.overallRiskRegional.name}
+                    </Text>
+                    <Text>
+                        {i18n.t("Global:", { nsSeparator: false })}{" "}
+                        {riskAssessmentSummary.overallRiskGlobal.name}
+                    </Text>
+                </SummaryContent>
+                <SummaryContent $direction="column">
+                    <TextBold>{i18n.t("Overall Confidence")}</TextBold>
+                    <Text>
+                        {i18n.t("National:", { nsSeparator: false })}{" "}
+                        {riskAssessmentSummary.overallConfidenceNational.name}
+                    </Text>
+                    <Text>
+                        {i18n.t("Regional:", { nsSeparator: false })}{" "}
+                        {riskAssessmentSummary.overallConfidenceRegional.name}
+                    </Text>
+                    <Text>
+                        {i18n.t("Global:", { nsSeparator: false })}{" "}
+                        {riskAssessmentSummary.overallConfidenceGlobal.name}
+                    </Text>
+                </SummaryContent>
+            </SummaryWrapper>
+            <SummaryWrapper>
+                <SummaryContent>
+                    <TextBold>{i18n.t("Risk Assessment Date: ", { nsSeparator: false })}</TextBold>
+                    <Text>
+                        {getDateAsMonthYearString(riskAssessmentSummary.riskAssessmentDate)}
+                    </Text>
+                </SummaryContent>
+            </SummaryWrapper>
+        </SummaryContainer>
+    );
+});
+
+const SummaryContainer = styled.div`
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+`;
+
+const SummaryWrapper = styled.div`
+    display: flex;
+    gap: 80px;
+`;
+
+const SummaryContent = styled.div<{ $direction?: string }>`
+    display: flex;
+    flex-direction: ${props => props.$direction || "row"};
+    gap: 5px;
+`;
+
+const TextBold = styled.span`
+    font-weight: bold;
+    color: ${props => props.theme.palette.common.grey700};
+`;
+
+const Text = styled.span`
+    color: ${props => props.theme.palette.common.grey700};
+`;