IFRCGo · frozenhelium · May 19, 2026 · May 29, 2026 · Jun 1, 2026
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -11,6 +11,7 @@ env:
   APP_ENVIRONMENT: 'development'
   APP_MAPBOX_ACCESS_TOKEN: 'dummy-token'
   APP_RISK_API_ENDPOINT: 'https://go-risk-api-stage.ifrc.org/'
+  APP_MALAWI_RISK_WATCH_GRAPHQL_ENDPOINT: 'https://malawi-risk-watch-stage.example.com/graphql/'
   APP_TINY_API_KEY: 'dummy-api-key'
   APP_TITLE: 'IFRC Go Test'
   APP_TRANSLATION_API_ENDPOINT: 'https://cacheppuccino-stage.ifrc.org/'

diff --git a/.gitmodules b/.gitmodules
@@ -7,3 +7,6 @@
 [submodule "cacheppuccino"]
 	path = cacheppuccino
 	url = git@github.com:IFRCGo/cacheppuccino.git
+[submodule "malawi-risk-watch-backend"]
+	path = malawi-risk-watch-backend
+	url = git@github.com:toggle-corp/malawi-risk-watch-backend.git
diff --git a/app/codegen.ts b/app/codegen.ts
@@ -0,0 +1,17 @@
+import type { CodegenConfig } from '@graphql-codegen/cli';
+
+const config: CodegenConfig = {
+    schema: '../malawi-risk-watch-backend/schema.graphql',
+    documents: ['src/**/*.{ts,tsx}'],
+    ignoreNoDocuments: true,
+    generates: {
+        './generated/gql/': {
+            preset: 'client',
+            presetConfig: {
+                fragmentMasking: false,
+            },
+        },
+    },
+};
+
+export default config;
diff --git a/app/env.ts b/app/env.ts
@@ -23,6 +23,8 @@ export default defineConfig({
     APP_MAPBOX_ACCESS_TOKEN: Schema.string(),
     APP_TINY_API_KEY: Schema.string(),
     APP_RISK_API_ENDPOINT: Schema.string({ format: 'url', protocol: true }),
+    APP_MALAWI_RISK_WATCH_GRAPHQL_ENDPOINT: Schema.string({ format: 'url', protocol: true, tld: false }),
+    APP_MALAWI_RISK_WATCH_ADMIN_URL: Schema.string.optional({ format: 'url', protocol: true, tld: false }),
     APP_SDT_URL: Schema.string.optional({ format: 'url', protocol: true, tld: false }),
     APP_POWER_BI_REPORT_ID_1: Schema.string.optional(),
     APP_SENTRY_DSN: Schema.string.optional(),

diff --git a/app/eslint.config.ts b/app/eslint.config.ts
@@ -80,6 +80,7 @@ const appConfigs = compat.config({
                     'postcss.config.cjs',
                     'stylelint.config.cjs',
                     'vite.config.ts',
+                    'codegen.ts',
                 ],
                 optionalDependencies: false,
             },

diff --git a/app/graphql.stub.ts b/app/graphql.stub.ts
@@ -0,0 +1,10 @@
+/*
+Stub for graphql-codegen `client-preset` output.
+Both lint and typecheck steps fail if `generated/gql/index.ts` is missing.
+We generally generate this file by running `pnpm generate:type:malawi-graphql`.
+We cannot always generate this file (e.g. without the submodule), so we just
+copy this stub to ensure lint and typecheck do not fail.
+*/
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const graphql: (source: string) => any = () => ({});
diff --git a/app/package.json b/app/package.json
@@ -14,14 +14,16 @@
         "translatte:generate": "pnpm translatte generate-migration ../translationMigrations ./src/**/i18n.json ../packages/ui/src/**/i18n.json",
         "translatte:lint": "pnpm translatte lint ./src/**/i18n.json ../packages/ui/src/**/i18n.json",
         "translatte:lint-migrations": "pnpm translatte lint-migrations ../translationMigrations",
-        "initialize:type": "mkdir -p generated/ && pnpm initialize:type:go-api && pnpm initialize:type:risk-api && pnpm initialize:type:translations",
+        "initialize:type": "mkdir -p generated/ && pnpm initialize:type:go-api && pnpm initialize:type:risk-api && pnpm initialize:type:translations && pnpm initialize:type:malawi-graphql",
         "initialize:type:go-api": "test -f ./generated/types.ts && true || cp types.stub.ts ./generated/types.ts",
         "initialize:type:risk-api": "test -f ./generated/riskTypes.ts && true || cp types.stub.ts ./generated/riskTypes.ts",
         "initialize:type:translations": "test -f ./generated/translationTypes.ts && true || cp types.stub.ts ./generated/translationTypes.ts",
-        "generate:type": "pnpm generate:type:go-api && pnpm generate:type:risk-api && pnpm generate:type:translations",
+        "initialize:type:malawi-graphql": "mkdir -p generated/gql && (test -f ./generated/gql/index.ts || cp graphql.stub.ts ./generated/gql/index.ts)",
+        "generate:type": "pnpm generate:type:go-api && pnpm generate:type:risk-api && pnpm generate:type:translations && pnpm generate:type:malawi-graphql",
         "generate:type:go-api": "openapi-typescript ../go-api/assets/openapi-schema.yaml -o ./generated/types.ts --alphabetize",
         "generate:type:risk-api": "openapi-typescript ../go-risk-module-api/openapi-schema.yaml -o ./generated/riskTypes.ts --alphabetize",
         "generate:type:translations": "openapi-typescript ../cacheppuccino/openapi.json -o ./generated/translationTypes.ts --alphabetize",
+        "generate:type:malawi-graphql": "graphql-codegen --config codegen.ts",
         "prestart": "pnpm initialize:type",
         "start": "pnpm -F @ifrc-go/ui build && vite",
         "prebuild": "pnpm initialize:type",
@@ -41,6 +43,7 @@
         "surge:teardown": "branch=$(git rev-parse --symbolic-full-name --abbrev-ref HEAD); branch=$(echo $branch  | tr ./ -); surge teardown https://ifrc-go-$branch.surge.sh"
     },
     "dependencies": {
+        "@graphql-typed-document-node/core": "^3.2.0",
         "@ifrc-go/icons": "^2.0.1",
         "@ifrc-go/ui": "workspace:^",
         "@sentry/react": "^10.0.0",
@@ -55,6 +58,8 @@
         "diff-match-patch": "^1.0.5",
         "exceljs": "^4.4.0",
         "file-saver": "^2.0.5",
+        "geotiff": "^3.0.5",
+        "graphql": "^16.14.0",
         "html-to-image": "^1.11.13",
         "mapbox-gl": "^1.13.3",
         "papaparse": "^5.5.3",
@@ -63,12 +68,15 @@
         "react-dom": "^19.0.0",
         "react-router-dom": "^7.0.0",
         "sanitize-html": "^2.17.2",
+        "urql": "^5.0.2",
         "xlsx": "^0.18.5"
     },
     "devDependencies": {
         "@eslint/eslintrc": "^3.3.5",
         "@eslint/js": "^9.39.4",
         "@eslint/json": "^1.0.0",
+        "@graphql-codegen/cli": "^7.0.0",
+        "@graphql-codegen/client-preset": "^6.0.0",
         "@julr/vite-plugin-validate-env": "^2.0.0",
         "@types/file-saver": "^2.0.7",
         "@types/mapbox-gl": "^1.13.10",

diff --git a/app/src/App/index.tsx b/app/src/App/index.tsx
@@ -34,6 +34,10 @@ import {
     KEY_LANGUAGE_STORAGE,
     KEY_USER_STORAGE,
 } from '#utils/constants';
+import {
+    malawiRiskWatchGraphqlClient,
+    UrqlProvider,
+} from '#utils/graphql';
 import {
     getFromStorage,
     removeFromStorage,
@@ -240,9 +244,11 @@ function Application() {
                 <UserContext.Provider value={userContextValue}>
                     <AlertContext.Provider value={alertContextValue}>
                         <RequestContext.Provider value={requestContextValue}>
-                            <RouterProvider
-                                router={router}
-                            />
+                            <UrqlProvider value={malawiRiskWatchGraphqlClient}>
+                                <RouterProvider
+                                    router={router}
+                                />
+                            </UrqlProvider>
                         </RequestContext.Provider>
                     </AlertContext.Provider>
                 </UserContext.Provider>

diff --git a/app/src/components/GoMapContainer/index.tsx b/app/src/components/GoMapContainer/index.tsx
@@ -51,6 +51,7 @@ interface Props {
     onPresentationModeChange?: (newPresentationMode: boolean) => void;
     children?: React.ReactNode;
     withFullHeight?: boolean;
+    layerSelection?: React.ReactNode;
 }
 
 function GoMapContainer(props: Props) {
@@ -65,6 +66,7 @@ function GoMapContainer(props: Props) {
         onPresentationModeChange,
         children,
         withFullHeight,
+        layerSelection,
     } = props;
 
     const strings = useTranslation(i18n);
@@ -311,15 +313,23 @@ function GoMapContainer(props: Props) {
                             </ListView>
                         )}
                     />
-                    {withPresentationMode && !printMode && !presentationMode && (
-                        <Button
-                            className={styles.presentationModeButton}
-                            name={undefined}
-                            before={<ArtboardLineIcon />}
-                            onClick={enterPresentationMode}
+                    {(withPresentationMode || layerSelection) && (
+                        <ListView
+                            layout="block"
+                            className={styles.topLeftActions}
                         >
-                            {strings.presentationModeButtonLabel}
-                        </Button>
+                            {withPresentationMode && !printMode && !presentationMode && (
+                                <Button
+                                    className={styles.presentationModeButton}
+                                    name={undefined}
+                                    before={<ArtboardLineIcon />}
+                                    onClick={enterPresentationMode}
+                                >
+                                    {strings.presentationModeButtonLabel}
+                                </Button>
+                            )}
+                            {layerSelection}
+                        </ListView>
                     )}
                     {!printMode && !presentationMode && !withoutDownloadButton && (
                         <RawButton

diff --git a/app/src/components/GoMapContainer/styles.module.css b/app/src/components/GoMapContainer/styles.module.css
@@ -32,7 +32,7 @@
             font-size: var(--go-ui-font-size-sm);
         }
 
-        .presentation-mode-button {
+        .top-left-actions {
             position: absolute;
             top: var(--go-ui-spacing-sm);
             left: var(--go-ui-spacing-sm);

diff --git a/app/src/components/Navbar/index.tsx b/app/src/components/Navbar/index.tsx
@@ -23,6 +23,7 @@ import {
     sdtUrl,
 } from '#config';
 import useAuth from '#hooks/domain/useAuth';
+import { FIELD_REPORT_STATUS_EARLY_WARNING } from '#utils/constants';
 
 import AuthenticatedUserDropdown from './AuthenticatedUserDropdown';
 import CountryDropdown from './CountryDropdown';
@@ -313,7 +314,11 @@ function Navbar(props: Props) {
                                             to="fieldReportFormNew"
                                             colorVariant="primary"
                                             styleVariant="action"
-                                            state={{ earlyWarning: true }}
+                                            state={{
+                                                initialValue: {
+                                                    status: FIELD_REPORT_STATUS_EARLY_WARNING,
+                                                },
+                                            }}
                                             withoutFullWidth
                                         >
                                             {strings.userMenuCreateEarlyActionFieldReport}

diff --git a/app/src/components/StepGradientBar/index.tsx b/app/src/components/StepGradientBar/index.tsx
@@ -0,0 +1,49 @@
+import {
+    Label,
+    ListView,
+} from '@ifrc-go/ui';
+import { _cs } from '@togglecorp/fujs';
+
+import styles from './styles.module.css';
+
+export interface StepGradientBarStep {
+    color: string;
+    label: React.ReactNode;
+}
+
+interface Props {
+    className?: string;
+    steps: StepGradientBarStep[];
+}
+
+function StepGradientBar(props: Props) {
+    const {
+        className,
+        steps,
+    } = props;
+
+    return (
+        <ListView
+            className={_cs(styles.stepGradientBar, className)}
+            spacing="none"
+        >
+            {steps.map((step, index) => (
+                <div
+                    // eslint-disable-next-line react/no-array-index-key
+                    key={index}
+                    className={styles.step}
+                >
+                    <div
+                        className={styles.swatch}
+                        style={{ backgroundColor: step.color }}
+                    />
+                    <Label textSize="sm">
+                        {step.label}
+                    </Label>
+                </div>
+            ))}
+        </ListView>
+    );
+}
+
+export default StepGradientBar;
diff --git a/app/src/components/StepGradientBar/styles.module.css b/app/src/components/StepGradientBar/styles.module.css
@@ -0,0 +1,12 @@
+.step-gradient-bar {
+    width: min(36cqi, 16rem);
+
+    .step {
+        flex-grow: 1;
+        text-align: center;
+
+        .swatch {
+            height: 0.5rem;
+        }
+    }
+}