PER dashboard and UI components

app/src/views/PERDashboard/PERPerformanceDashboard/i18n.json

@@ -0,0 +1,15 @@
+{
+    "namespace": "PERDashboard",
+    "strings": {
+        "performanceLastUpdate": "Last updated:",
+        "performanceResetFilter": "Clear Filter",
+        "performanceResetFilterAriaLabel": "Reset all active filters",
+        "performanceContainerAriaLabel": "PER Performance Dashboard",
+        "performanceHeaderDescription": "This dashboard contains a summary of the overall preparedness and response capacity among National Societies engaged in the PER Approach. The values presented represent the ratings for each component within National Societies' PER Mechanism aggregated at global and regional levels. The visualisations show average rating, the changes in capacity over time, as well as top and bottom-rated components. You can filter the components by region.",
+        "overviewHeading": "Performance Overview",
+        "overviewDescription": "Click on a PER assessment cycle to filter",
+        "globalRatingsHeading": "Global Performance Ratings",
+        "globalRatingsDescription": "Overview of PER ratings and performance metrics",
+        "performanceFetchFailedError": "Failed to load dashboard data"
+    }
+}

app/src/views/PERDashboard/PERPerformanceDashboard/index.tsx

@@ -0,0 +1,206 @@
+import {
+    type Component,
+    useEffect,
+    useState,
+} from 'react';
+import {
+    BlockLoading,
+    Button,
+    Container,
+    PERAnalysis,
+    PERRatingAnalysis,
+    PERRegionToggle,
+} from '@ifrc-go/ui';
+import { useTranslation } from '@ifrc-go/ui/hooks';
+import { _cs } from '@togglecorp/fujs';
+
+import {
+    getComponentRatings,
+    getCycles,
+    getLastUpdateDate,
+    groupDataByRegion,
+    initializeData,
+    summarizeData,
+} from './dataHandler';
+import { type AssessmentRecord } from './types';
+
+import i18n from './i18n.json';
+import styles from './styles.module.css';
+
+const PER_DASHBOARD_DATA_URL = 'https://raw.githubusercontent.com/IFRCGo/ifrc-per-data-fetcher/refs/heads/main/data/per-dashboard-data.json';
+const LAST_UPDATE_DATA_URL = 'https://raw.githubusercontent.com/IFRCGo/ifrc-per-data-fetcher/refs/heads/main/data/last-update.json';
+
+interface ActiveFilters {
+    id: number | null;
+    region: string | null;
+    year: number | null;
+    cycle: number | undefined;
+}
+
+function PERPerformanceDashboard() {
+    const strings = useTranslation(i18n);
+    const [activeFilters, setActiveFilters] = useState<ActiveFilters>({
+        id: null,
+        region: null,
+        year: null,
+        cycle: undefined,
+    });
+
+    const [isLoading, setIsLoading] = useState(true);
+    const [error, setError] = useState<string | null>(null);
+    interface DashboardData {
+        assessments: Record<string, Component>;
+    }
+    const [dashboardData, setDashboardData] = useState<DashboardData | null>(null);
+    const [lastUpdateData, setLastUpdateData] = useState<AssessmentRecord[]| null>(null);
+
+    useEffect(() => {
+        async function fetchData() {
+            setIsLoading(true);
+            setError(null);
+            try {
+                const [dashboardResponse, lastUpdateResponse] = await Promise.all([
+                    fetch(PER_DASHBOARD_DATA_URL, {
+                        headers: {
+                            Accept: 'application/vnd.github.v3.raw',
+                        },
+                    }),
+                    fetch(LAST_UPDATE_DATA_URL, {
+                        headers: {
+                            Accept: 'application/vnd.github.v3.raw',
+                        },
+                    }),
+                ]);
+
+                if (!dashboardResponse.ok || !lastUpdateResponse.ok) {
+                    throw new Error(strings.performanceFetchFailedError);
+                }
+
+                const [dashboardResponseData, lastUpdateResponseData] = await Promise.all([
+                    dashboardResponse.json(),
+                    lastUpdateResponse.json(),
+                ]);
+
+                setDashboardData(dashboardResponseData);
+                setLastUpdateData(lastUpdateResponseData);
+                initializeData(dashboardResponseData, lastUpdateResponseData);
+            } catch {
+                setError(strings.performanceFetchFailedError);
+            } finally {
+                setIsLoading(false);
+            }
+        }
+
+        fetchData();
+    }, [strings.performanceFetchFailedError]);
+
+    if (isLoading) {
+        return (
+            <Container
+                className={styles.perPerformanceDashboard}
+                aria-label={strings.performanceContainerAriaLabel}
+            >
+                <BlockLoading />
+            </Container>
+        );
+    }
+
+    if (error) {
+        return (
+            <Container
+                className={styles.perPerformanceDashboard}
+                aria-label={strings.performanceContainerAriaLabel}
+            >
+                {error}
+            </Container>
+        );
+    }
+
+    if (!dashboardData || !lastUpdateData) {
+        return null;
+    }
+
+    const updateFilter = (
+        filterType: keyof ActiveFilters,
+        value: ActiveFilters[keyof ActiveFilters],
+    ): void => {
+        setActiveFilters((prev) => ({
+            ...prev,
+            [filterType]: prev[filterType] === value ? null : value,
+        }));
+    };
+
+    const handleCycleClick = (cycle: number | null): void => {
+        updateFilter('cycle', cycle);
+    };
+
+    const handleRegionClick = (region: string | null): void => {
+        updateFilter('region', region);
+    };
+
+    const ratings = getComponentRatings(activeFilters);
+
+    return (
+        <>
+            <div className={styles.lastUpdate}>
+                {strings.performanceLastUpdate}
+                {' '}
+                {new Date(getLastUpdateDate()).toLocaleString()}
+            </div>
+            <div className={styles.headerDescription}>
+                {strings.performanceHeaderDescription}
+            </div>
+            <div className={styles.content}>
+                <PERRegionToggle
+                    activeRegion={activeFilters?.region}
+                    onRegionClick={handleRegionClick}
+                    regions={groupDataByRegion()}
+                    precision={1}
+                    showCount={false}
+                />
+                <Container
+                    heading={strings.overviewHeading}
+                    headerDescription={
+                        strings.overviewDescription
+                    }
+                    className={_cs(styles.container, styles.perAnalysis)}
+                    withHeaderBorder
+                    headerActions={activeFilters.cycle !== undefined ? (
+                        <Button
+                            name={undefined}
+                            onClick={() => updateFilter('cycle', undefined)}
+                            aria-label={
+                                strings.performanceResetFilterAriaLabel
+                            }
+                        >
+                            {strings.performanceResetFilter}
+                        </Button>
+                    ) : undefined}
+                >
+                    <PERAnalysis
+                        data={getCycles(activeFilters)}
+                        summary={summarizeData(activeFilters, true)}
+                        onCycleClick={handleCycleClick}
+                        activeCycle={activeFilters.cycle}
+                    />
+                </Container>
+                <Container
+                    heading={strings.globalRatingsHeading}
+                    headerDescription={
+                        strings.globalRatingsDescription
+                    }
+                    withHeaderBorder
+                    className={_cs(styles.container, styles.ratingAnalysis)}
+                >
+                    <PERRatingAnalysis
+                        overallRating={ratings.overallRating}
+                        areaData={ratings.areaData}
+                        componentData={ratings.componentData}
+                    />
+                </Container>
+            </div>
+        </>
+    );
+}
+
+export default PERPerformanceDashboard;

app/src/views/PERDashboard/PERPerformanceDashboard/styles.module.css

@@ -0,0 +1,77 @@
+.per-performance-dashboard {
+    display: flex;
+    flex-direction: column;
+    gap: var(--go-ui-spacing-md);
+    margin: 0;
+    /* background-color: var(--go-ui-color-background); */
+    padding: var(--go-ui-spacing-2xl) 0;
+    overflow-x: hidden;
+}
+
+.loading-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0;
+    padding: 0;
+    min-height: 500px;
+}
+
+.lastUpdate {
+    position: absolute;
+    top: 20px;
+    margin-bottom: var(--go-ui-spacing-md);
+    padding: 0 var(--go-ui-spacing-md);
+    color: var(--go-ui-color-gray-60);
+    font-size: var(--go-ui-font-size-sm);
+}
+
+.header-body {
+    line-height: var(--go-ui-line-height-md);
+    color: var(--go-ui-color-text);
+    font-size: var(--go-ui-font-size-md);
+}
+
+.headerDescription {
+    margin-bottom: var(--go-ui-spacing-md);
+    background-color: var(--go-ui-color-background);
+    padding: var(--go-ui-spacing-xl);
+    width: auto;
+    text-align: center;
+    font-size: var(--go-ui-font-size-md);
+
+}
+
+.content {
+    display: flex;
+    flex-direction: column;
+    gap: var(--go-ui-spacing-md);
+    margin: 0;
+    background-color: var(--go-ui-color-white);
+    padding: var(--go-ui-spacing-md);
+}
+
+.container {
+    width: 100%;
+    max-width: 100%;
+}
+
+.perAnalysis {
+    margin-bottom: var(--go-ui-spacing-md);
+}
+
+.ratingAnalysis {
+    width: 100%;
+    max-width: 100%;
+}
+
+.ratingAnalysis > div {
+    padding: 0px !important;
+    max-width: 100% !important;
+    --max-width: 100% !important;
+}
+
+.ratingAnalysis :global(.content) {
+    width: 100%;
+    max-width: 100%;
+}

app/src/views/PERDashboard/PERPerformanceDashboard/types.ts

@@ -0,0 +1,92 @@
+import { type PERRatingAnalysisProps } from '@ifrc-go/ui';
+
+// Base interfaces
+export interface Assessment {
+    component_num: number;
+    component_name: string;
+    area_id: number;
+    area_name: string;
+
+    assessment_id: number;
+    assessment_number: number;
+    country_id: number;
+    country_name: string;
+    region_id: number;
+    region_name: string;
+    date_of_assessment: string;
+    rating_value: number;
+    rating_title: string;
+}
+
+export interface AssessmentRecord {
+    id: number;
+    country_id: number;
+    country_name: string;
+    region_name: string;
+    date_of_assessment: string;
+    phase: number;
+    phase_display: string;
+    assessment_number: number;
+    type_of_assessment_name: string;
+    prioritized_components: {
+        areaTitle: string;
+        componentTitle: string;
+    }[];
+    epi_considerations: boolean;
+    climate_environmental_considerations: boolean;
+    urban_considerations: boolean;
+    migration_considerations: boolean;
+}
+
+export interface Filters {
+    region?: string | null;
+    year?: number | null;
+    phase?: number | null;
+    cycle?: number | null;
+    id?: number | null;
+    perConsiderations?: string | null;
+    completedAssessment?: boolean | null;
+    highPriorityComponent?: string | null;
+    assessmentType?: string | null;
+    numberOfCycles?: number | null;
+}
+
+interface CycleRating {
+    cycle: number;
+    rating: number;
+    rating_display: string;
+    rating_color: string;
+}
+
+export interface AreaSummary {
+    name: string;
+    rating: number;
+    status: string;
+    change: number;
+    changeDirection: string;
+    cycleRatings: CycleRating[];
+    components: ComponentRating[];
+    areaColor: string;
+}
+
+export interface ComponentRating {
+    component_num: number,
+    component_name: string,
+    area_id: number,
+    area_name: string,
+    cycleRatings: CycleRating[],
+    total: number,
+    count: number,
+}
+
+export interface ComponentRatingsResult {
+    overallRating: PERRatingAnalysisProps['overallRating'],
+    areaData: PERRatingAnalysisProps['areaData'],
+    componentData: PERRatingAnalysisProps['componentData'],
+}
+
+export interface RegionData {
+    name: string;
+    count: number;
+    totalComponents: number;
+}