toggle-corp · subinasr · Jul 2, 2026 · Jul 2, 2026 · Jul 2, 2026
diff --git a/app/Root/config/routes.ts b/app/Root/config/routes.ts
@@ -33,7 +33,7 @@ const preparedness: RouteConfig = {
         },
         {
             path: 'pmer',
-            load: () => import('#views/Preparedness/DisasterResponse'),
+            load: () => import('#views/Preparedness/Pmer'),
             visibility: 'is-anything',
         },
         {

diff --git a/app/Root/hooks/useRouting.tsx b/app/Root/hooks/useRouting.tsx
@@ -0,0 +1,37 @@
+import {
+    generatePath,
+    useNavigate,
+} from 'react-router';
+
+import routes from '#root/config/routes';
+
+export type RoutesMap = typeof routes;
+
+type ExtractPath<T> = T extends { path: infer P }
+  ? (P extends string ? P : '')
+  : '';
+
+type PathParams<P extends string> = P extends `${string}:${string}`
+  ? [params: Record<string, string | number>]
+  : [params?: Record<string, string> | undefined];
+
+function useRouting() {
+    const navigate = useNavigate();
+
+    return <K extends keyof RoutesMap>(
+        route: K,
+        ...args: PathParams<ExtractPath<RoutesMap[K]>>
+    ) => {
+        const routeConfig = routes[route] as { path?: string };
+        const pathTemplate = routeConfig.path ?? '';
+
+        const normalizedTemplate = pathTemplate.startsWith('/')
+            ? pathTemplate
+            : `/${pathTemplate}`;
+
+        const absolutePath = generatePath(normalizedTemplate, args[0] ?? {});
+        navigate(absolutePath);
+    };
+}
+
+export default useRouting;
diff --git a/app/views/CapacityAndResources/index.tsx b/app/views/CapacityAndResources/index.tsx
@@ -78,7 +78,9 @@ function CapacityAndResourcesList() {
             filters: {
                 regions: regionId ? [regionId] : null,
                 isActive: true,
-                search: filter.searchText,
+                title: {
+                    iContains: filter.searchText,
+                },
             },
             pagination: {
                 limit,

diff --git a/app/views/DataAndReport/AIsummary/index.tsx b/app/views/DataAndReport/AIsummary/index.tsx
@@ -1,6 +1,6 @@
 import { StarLineIcon } from '@ifrc-go/icons';
 import {
-    BlockLoading,
+    Container,
     Description,
     Heading,
     InlineView,
@@ -30,16 +30,16 @@ function AIsummary(props: AISummaryProps) {
             >
                 <Heading level={2}>AI Summary</Heading>
             </InlineView>
-            {loading ? (
-                <BlockLoading
-                    withoutBorder
-                    message="Generating...."
-                />
-            ) : (
+            <Container
+                className={styles.summaryContainer}
+                pending={loading}
+                pendingMessage="Generating...."
+                withContentOverflow
+            >
                 <Description textSize="lg">
                     {summary}
                 </Description>
-            ) }
+            </Container>
         </ListView>
     );
 }

diff --git a/app/views/DataAndReport/AIsummary/styles.module.css b/app/views/DataAndReport/AIsummary/styles.module.css
@@ -5,4 +5,8 @@
     white-space: pre-line;
     color: var(--go-ui-color-white);
 
+    .summary-container {
+        flex-grow: 1;
+        min-height: 0;
+    }
 }
diff --git a/app/views/DataAndReport/ReportDetail/index.tsx b/app/views/DataAndReport/ReportDetail/index.tsx
@@ -98,8 +98,9 @@ function ReportDetail() {
     const aiSummary = summaryData?.reportSummaries.results
         .map((summary) => summary.text)
         .join('\n \n');
+
     const publishedDate = new Date(reportData?.publishedAt);
-    const encodedPublishedDate = encodeDate(publishedDate);
+    const encodedPublishedDate = reportData?.publishedAt ? encodeDate(publishedDate) : '-';
 
     return (
         <PageContainer
@@ -109,8 +110,9 @@ function ReportDetail() {
                 pending={fetching}
             >
                 <ListView
+                    // FIXME: isDefined is not working as expected, need to check why
                     // eslint-disable-next-line react/jsx-props-no-spreading
-                    {...(isDefined(aiSummary)
+                    {...(aiSummary
                         ? { layout: 'grid', withSidebar: true }
                         : { layout: 'block' })}
                 >
@@ -172,7 +174,7 @@ function ReportDetail() {
                                 />
                             ) }
                     </ListView>
-                    {isDefined(aiSummary) && (
+                    {aiSummary && (
                         <div className={styles.details}>
                             <div className={styles.stickyDetails}>
                                 <AIsummary

diff --git a/app/views/Home/index.tsx b/app/views/Home/index.tsx
@@ -13,10 +13,46 @@ import {
 import InfoCard from '#components/InfoCard';
 import KeyCard from '#components/KeyCard';
 import Page from '#components/Page';
+import {
+    DashboardPage,
+    useExternalDashboardsQuery,
+} from '#generated/types/graphql';
+import type { RouteKeys } from '#root/config/routes';
+import useRouting from '#root/hooks/useRouting';
 import ActiveOperation from '#views/Home/ActiveOperation';
 
+const DASHBOARD_PAGE_TO_ROUTE_KEY: Record<DashboardPage, RouteKeys> = {
+    [DashboardPage.CapacityResources]: 'capacityAndResources',
+    [DashboardPage.DisasterResponse]: 'disasterResponse',
+    [DashboardPage.EmergencyAlerts]: 'emergencyAlert',
+    [DashboardPage.EmergencyResponse]: 'emergencyResponse',
+    [DashboardPage.Home]: 'home',
+    [DashboardPage.Operations]: 'home',
+    [DashboardPage.ProjectMapping]: 'projectMapping',
+};
+
 function Home() {
-    // TODO: Fetch real data for key figures and operations
+    const routeTo = useRouting();
+
+    const [{ data, fetching }] = useExternalDashboardsQuery({
+        variables: {
+            filters: {
+                isActive: true,
+                showOnHome: true,
+            },
+            pagination: {
+                limit: 6,
+            },
+        },
+    });
+
+    const operationDashboards = data?.externalDashboards.results ?? [];
+
+    const handleViewClick = (page: DashboardPage) => {
+        const routeKey = DASHBOARD_PAGE_TO_ROUTE_KEY[page];
+        routeTo(routeKey);
+    };
+
     const keyFigures = (
         <ListView
             layout="grid"
@@ -74,76 +110,38 @@ function Home() {
                 layout="block"
             >
                 <ActiveOperation />
-                <InfoCard
-                    icon={<DashboardFillIcon />}
-                    title="Operational Dashboards"
-                    description="Real-time emergency alerts and early warning system monitoring across regions"
-                />
-                <ListView
-                    layout="grid"
-                    numPreferredGridColumns={3}
+                <Container
+                    pending={fetching}
                 >
-                    <KeyCard
-                        value="Emergency Response Dashboard"
-                        valueType="text"
-                        info=" Real-time overview of all active emergency operations"
-                        size="sm"
-                        pillText="Operation"
-                        withIconBackground
-                        withShadow
-                        viewButton
-                    />
-                    <KeyCard
-                        value="Emergency Response Dashboard"
-                        valueType="text"
-                        info=" Real-time overview of all active emergency operations"
-                        size="sm"
-                        pillText="Operation"
-                        withIconBackground
-                        withShadow
-                        viewButton
-                    />
-                    <KeyCard
-                        value="Emergency Response Dashboard"
-                        valueType="text"
-                        info=" Real-time overview of all active emergency operations"
-                        size="sm"
-                        pillText="Operation"
-                        withIconBackground
-                        withShadow
-                        viewButton
-                    />
-                    <KeyCard
-                        value="Emergency Response Dashboard"
-                        valueType="text"
-                        info=" Real-time overview of all active emergency operations"
-                        size="sm"
-                        pillText="Operation"
-                        withIconBackground
-                        withShadow
-                        viewButton
-                    />
-                    <KeyCard
-                        value="Emergency Response Dashboard"
-                        valueType="text"
-                        info=" Real-time overview of all active emergency operations"
-                        size="sm"
-                        pillText="Operation"
-                        withIconBackground
-                        withShadow
-                        viewButton
-                    />
-                    <KeyCard
-                        value="Emergency Response Dashboard"
-                        valueType="text"
-                        info=" Real-time overview of all active emergency operations"
-                        size="sm"
-                        pillText="Operation"
-                        withIconBackground
-                        withShadow
-                        viewButton
-                    />
-                </ListView>
+                    <ListView
+                        layout="block"
+                    >
+
+                        <InfoCard
+                            icon={<DashboardFillIcon />}
+                            title="Operational Dashboards"
+                            description="Real-time emergency alerts and early warning system monitoring across regions"
+                        />
+                        <ListView
+                            layout="grid"
+                            numPreferredGridColumns={3}
+                        >
+                            {operationDashboards.map((res) => (
+                                <KeyCard
+                                    key={res.id}
+                                    value={res.title}
+                                    valueType="text"
+                                    size="sm"
+                                    pillText={res.pageDisplay}
+                                    withIconBackground
+                                    withShadow
+                                    viewButton
+                                    onViewClick={() => handleViewClick(res.page)}
+                                />
+                            ))}
+                        </ListView>
+                    </ListView>
+                </Container>
             </ListView>
         </Page>
     );

diff --git a/app/views/OurWork/index.tsx b/app/views/OurWork/index.tsx
@@ -41,6 +41,7 @@ const EXTERNAL_DASHBOARDS_QUERY = gql`
                 page
                 regionId
                 showOnHome
+                pageDisplay
                 url
             }
             pageInfo {

diff --git a/app/views/Preparedness/Pmer/index.tsx b/app/views/Preparedness/Pmer/index.tsx
@@ -0,0 +1,23 @@
+import { ToolsLineIcon } from '@ifrc-go/icons';
+import {
+    Description,
+    Heading,
+} from '@ifrc-go/ui';
+
+import styles from './styles.module.css';
+
+function Pmer() {
+    return (
+        <div className={styles.pmer}>
+            <ToolsLineIcon className={styles.icon} />
+            <Heading level={3}>
+                Under Construction
+            </Heading>
+            <Description>
+                The PMER dashboard is currently being built. Please check back later.
+            </Description>
+        </div>
+    );
+}
+
+export default Pmer;
diff --git a/app/views/Preparedness/Pmer/styles.module.css b/app/views/Preparedness/Pmer/styles.module.css
@@ -0,0 +1,14 @@
+.pmer {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    justify-content: center;
+    gap: var(--go-ui-spacing-sm);
+    min-height: 60vh;
+    text-align: center;
+
+    .icon {
+        color: var(--go-ui-color-text-light);
+        font-size: 2.5rem;
+    }
+}
diff --git a/app/views/TeamList/Members/index.tsx b/app/views/TeamList/Members/index.tsx
@@ -133,9 +133,10 @@ function Members() {
 
     const [{ fetching, data }] = useTeamMembersQuery({
         variables: {
-            teamId: id!,
+            teamId: id ?? '',
             filters: {
                 search: filter.searchText,
+                teamId: id,
             },
             pagination: {
                 offset,

diff --git a/backend b/backend
+5 −0		apps/content/serializers.py
+1 −0		apps/dashboards/graphql/filters.py
+5 −6		apps/dashboards/serializers.py
+5 −4		apps/dashboards/tests/mutations_test.py
+2 −1		apps/gallery/graphql/types.py
+6 −0		apps/gallery/serializers.py
+1 −1		apps/gallery/tests/queries_test.py
+3 −1		apps/reports/graphql/types.py
+9 −0		apps/reports/serializers.py
+12 −10		helm/snapshots/alpha.yaml
+1 −0		helm/tests/alpha.yaml
+4 −0		helm/values.yaml
+3 −2		schema.graphql
+166 −175		seed_data/db.json
+17 −0		utils/validators.py