Integrate VLMs

.gitignore

@@ -5,13 +5,31 @@ build/
 .cache/
 .vite/
 
-# Local env & secrets
+# ─── Local env & secrets ────────────────────────
 .env*
 !.env.example
 
-# ─── Go backend (we’ll add later) ───────────────
-/backend/bin/
-/backend/coverage.out
+# ─── Python / FastAPI backend ───────────────────
+# Byte-compiled / optimized / DLL files
+__pycache__/
+*.py[cod]
+*$py.class
+
+# Virtual environments
+.venv/
+venv/
+
+# Distribution / packaging
+*.egg-info/
+dist/
+build/
+*.whl
+
+# Testing / coverage
+.coverage
+.pytest_cache/
+htmlcov/
+.mypy_cache/
 
 # ─── Docker ─────────────────────────────────────
 *.log
@@ -20,8 +38,9 @@ docker-compose.override.yml
 # ─── OS / editor cruft ─────────────────────────
 .DS_Store
 Thumbs.db
+*.swp
 .idea/
 .vscode/
-*.swp
 
+# ─── Prisma (if you’re using it) ────────────────
 /generated/prisma

frontend/src/App.tsx

@@ -1,10 +1,15 @@
 import { createBrowserRouter, RouterProvider } from 'react-router-dom';
+import { AlertContext, type AlertContextProps, type AlertParams, LanguageContext, type LanguageContextProps } from '@ifrc-go/ui/contexts';
+import { useCallback, useMemo, useState } from 'react';
+import { unique } from '@togglecorp/fujs';
 import RootLayout from './layouts/RootLayout';
 import UploadPage from './pages/UploadPage';
 import AnalyticsPage from './pages/AnalyticsPage';
 import ExplorePage from './pages/ExplorePage';
 import HelpPage from './pages/HelpPage';
 import MapDetailPage from './pages/MapDetailPage';
+import DemoPage from './pages/DemoPage';
+import DevPage from './pages/DevPage';
 
 const router = createBrowserRouter([
   {
@@ -15,11 +20,88 @@ const router = createBrowserRouter([
       { path: '/analytics', element: <AnalyticsPage /> },
       { path: '/explore',   element: <ExplorePage /> },
       { path: '/help',      element: <HelpPage /> },
+      { path: '/demo',      element: <DemoPage /> },
+      { path: '/dev',       element: <DevPage /> },
       { path: '/map/:mapId', element: <MapDetailPage /> },
     ],
   },
 ]);
 
+function Application() {
+  // ALERTS
+  const [alerts, setAlerts] = useState<AlertParams[]>([]);
+
+  const addAlert = useCallback((alert: AlertParams) => {
+    setAlerts((prevAlerts) => unique(
+      [...prevAlerts, alert],
+      (a) => a.name,
+    ) ?? prevAlerts);
+  }, [setAlerts]);
+
+  const removeAlert = useCallback((name: AlertParams['name']) => {
+    setAlerts((prevAlerts) => {
+      const i = prevAlerts.findIndex((a) => a.name === name);
+      if (i === -1) {
+        return prevAlerts;
+      }
+
+      const newAlerts = [...prevAlerts];
+      newAlerts.splice(i, 1);
+
+      return newAlerts;
+    });
+  }, [setAlerts]);
+
+  const updateAlert = useCallback((name: AlertParams['name'], paramsWithoutName: Omit<AlertParams, 'name'>) => {
+    setAlerts((prevAlerts) => {
+      const i = prevAlerts.findIndex((a) => a.name === name);
+      if (i === -1) {
+        return prevAlerts;
+      }
+
+      const newAlerts = [...prevAlerts];
+      newAlerts[i] = {
+        ...newAlerts[i],
+        ...paramsWithoutName,
+      };
+
+      return newAlerts;
+    });
+  }, [setAlerts]);
+
+  const alertContextValue = useMemo<AlertContextProps>(
+    () => ({
+      alerts,
+      addAlert,
+      removeAlert,
+      updateAlert,
+    }),
+    [alerts, addAlert, removeAlert, updateAlert],
+  );
+
+  // LANGUAGE
+  const languageContextValue = useMemo<LanguageContextProps>(
+    () => ({
+      languageNamespaceStatus: {},
+      setLanguageNamespaceStatus: () => {},
+      currentLanguage: 'en',
+      setCurrentLanguage: () => {},
+      strings: {},
+      setStrings: () => {},
+      registerNamespace: () => {},
+    }),
+    [],
+  );
+
+  return (
+    <AlertContext.Provider value={alertContextValue}>
+      <LanguageContext.Provider value={languageContextValue}>
+        <RouterProvider router={router} />
+      </LanguageContext.Provider>
+    </AlertContext.Provider>
+  );
+}
+
 export default function App() {
-  return <RouterProvider router={router} />;
+  return <Application />;
 }

frontend/src/components/Card.tsx

@@ -0,0 +1,34 @@
+// src/components/Card.tsx
+import React from 'react'
+
+export interface CardProps {
+  /** extra Tailwind classes to apply to the wrapper */
+  className?: string
+  /** contents of the card */
+  children: React.ReactNode
+}
+
+/**
+ * A simple white card with rounded corners, padding and soft shadow.
+ *
+ * Usage:
+ *   import Card from '../components/Card'
+ *
+ *   <Card className="max-w-md mx-auto">
+ *     <h3>Title</h3>
+ *     <p>Body content</p>
+ *   </Card>
+ */
+export default function Card({ children, className = '' }: CardProps) {
+  return (
+    <div
+      className={
+        `bg-white rounded-lg shadow p-6 ` +
+        className
+      }
+    >
+      {children}
+    </div>
+  )
+}
+

frontend/src/components/HeaderNav.tsx

@@ -1,63 +1,74 @@
-import { NavLink, useLocation } from "react-router-dom";
+import { useLocation, useNavigate } from "react-router-dom";
+import { Button, PageContainer } from "@ifrc-go/ui";
 import {
   UploadCloudLineIcon,
   AnalysisIcon,
   SearchLineIcon,
   QuestionLineIcon,
   GoMainIcon,
+  SettingsIcon,
 } from "@ifrc-go/icons";
 
-/* Style helper for active vs. inactive nav links */
-const navLink = ({ isActive }: { isActive: boolean }) =>
-  `flex items-center gap-1 px-4 sm:px-6 py-2 text-xs sm:text-sm transition-colors whitespace-nowrap mx-4 sm:mx-6
-  ${isActive ? "text-ifrcRed font-semibold" : "text-gray-600 hover:text-ifrcRed"}`;
-
-/* Put page info in one list so it’s easy to extend */
+/* Put page info in one list so it's easy to extend */
 const navItems = [
   { to: "/upload",    label: "Upload",    Icon: UploadCloudLineIcon },
-  { to: "/analytics", label: "Analytics", Icon: AnalysisIcon },
   { to: "/explore",   label: "Explore",   Icon: SearchLineIcon },
+  { to: "/analytics", label: "Analytics", Icon: AnalysisIcon },
+  { to: "/dev",       label: "Dev",       Icon: SettingsIcon },
 ];
 
 export default function HeaderNav() {
   const location = useLocation();
-  
-  const handleNavigation = (e: React.MouseEvent, to: string) => {
-    if (location.pathname === "/upload") {
-      const uploadPage = document.querySelector('[data-step="2"]');
-      if (uploadPage) {
-        e.preventDefault();
-        if (confirm("Changes will not be saved")) {
-          window.location.href = to;
-        }
-      }
-    }
-  };
+  const navigate = useNavigate();
 
   return (
-    <header className="bg-white border-b border-ifrcRed/40">
-      <div className="flex items-center justify-between px-2 sm:px-4 py-3 max-w-full overflow-hidden">
-
+    <nav className="border-b border-gray-200 bg-white">
+      <PageContainer
+        className="border-b border-ifrcRed"
+        contentClassName="flex items-center justify-between py-4"
+      >
         {/* ── Logo + title ─────────────────────────── */}
-        <NavLink to="/" className="flex items-center gap-2 min-w-0" onClick={(e) => handleNavigation(e, "/")}>
-          <GoMainIcon className="h-6 w-6 flex-shrink-0 text-ifrcRed" />
-          <span className="font-semibold text-sm sm:text-base truncate">PromptAid Vision</span>
-        </NavLink>
+        <div className="flex items-center gap-3 min-w-0 cursor-pointer" onClick={() => navigate('/')}>
+          <GoMainIcon className="h-8 w-8 flex-shrink-0 text-ifrcRed" />
+          <span className="font-semibold text-lg truncate text-gray-900">PromptAid Vision</span>
+        </div>
 
         {/* ── Centre nav links ─────────────────────── */}
-        <nav className="flex flex-wrap justify-center gap-6">
-          {navItems.map(({ to, label, Icon }) => (
-            <NavLink key={to} to={to} className={navLink} onClick={(e) => handleNavigation(e, to)}>
-              <Icon className="w-4 h-4" /> <span className="inline">{label}</span>
-            </NavLink>
+        <nav className="flex items-center">
+          {navItems.map(({ to, label, Icon }, index) => (
+            <div key={to} className={index < navItems.length - 1 ? "mr-8" : ""}>
+              <Button
+                name={label.toLowerCase()}
+                variant={location.pathname === to ? "primary" : "tertiary"}
+                size={1}
+                onClick={() => {
+                  if (location.pathname === "/upload") {
+                    const uploadPage = document.querySelector('[data-step="2"]');
+                    if (uploadPage && !confirm("Changes will not be saved")) {
+                      return;
+                    }
+                  }
+                  navigate(to);
+                }}
+              >
+                <Icon className="w-4 h-4" /> 
+                <span className="inline ml-2 font-medium">{label}</span>
+              </Button>
+            </div>
           ))}
         </nav>
 
         {/* ── Right-side utility buttons ───────────── */}
-        <NavLink to="/help" className={navLink}>
+        <Button
+          name="help"
+          variant="tertiary"
+          size={1}
+          onClick={() => navigate('/help')}
+        >
           <QuestionLineIcon className="w-4 h-4" />
-        </NavLink>
-      </div>
-    </header>
+          <span className="inline ml-2 font-medium">Help & Support</span>
+        </Button>
+      </PageContainer>
+    </nav>
   );
 }

frontend/src/index.css

@@ -2,3 +2,44 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+* {
+    box-sizing: border-box;
+}
+
+html {
+    @media screen {
+        margin: 0;
+        padding: 0;
+        scrollbar-gutter: stable;
+    }
+}
+
+body {
+    line-height: var(--go-ui-line-height-md);
+    color: var(--go-ui-color-text);
+    font-family: var(--go-ui-font-family-sans-serif);
+    font-size: var(--go-ui-font-size-md);
+    font-weight: var(--go-ui-font-weight-normal);
+
+    @media screen {
+        margin: 0;
+        background-color: var(--go-ui-color-background);
+        padding: 0;
+    }
+}
+
+ul, ol, p {
+    margin: 0;
+}
+
+@media print {
+    @page {
+        size: portrait A4;
+        margin: 10mm 10mm 16mm 10mm;
+    }
+
+    body {
+        font-family: 'Open Sans', sans-serif;
+    }
+}

frontend/src/main.tsx

@@ -1,3 +1,4 @@
+import '@ifrc-go/ui/index.css';
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import './index.css'

frontend/src/pages/AnalyticsPage.tsx

@@ -1,9 +1,575 @@
-import { PageContainer, Heading } from '@ifrc-go/ui';
+// src/pages/AnalyticsPage.tsx
+
+import {
+  PageContainer,
+  PieChart,
+  KeyFigure,
+  Spinner,
+  Container,
+  ProgressBar,
+  SegmentInput,
+  Table,
+} from '@ifrc-go/ui';
+import {
+  createStringColumn,
+  createNumberColumn,
+  numericIdSelector
+} from '@ifrc-go/ui/utils';
+import { useState, useEffect, useMemo } from 'react';
+// icons not used on this page
+
+interface AnalyticsData {
+  totalCaptions: number;
+  sources: { [key: string]: number };
+  types: { [key: string]: number };
+  regions: { [key: string]: number };
+  models: {
+    [key: string]: {
+      count: number;
+      avgAccuracy: number;
+      avgContext: number;
+      avgUsability: number;
+      totalScore: number;
+    };
+  };
+}
+
+interface LookupData {
+  s_code?: string;
+  t_code?: string;
+  r_code?: string;
+  label: string;
+}
+
+interface RegionData {
+  id: number;
+  name: string;
+  count: number;
+  percentage: number;
+}
+
+interface TypeData {
+  id: number;
+  name: string;
+  count: number;
+  percentage: number;
+}
+
+interface SourceData {
+  id: number;
+  name: string;
+  count: number;
+  percentage: number;
+}
+
+interface ModelData {
+  id: number;
+  name: string;
+  count: number;
+  accuracy: number;
+  context: number;
+  usability: number;
+  totalScore: number;
+}
 
 export default function AnalyticsPage() {
+  const [data, setData] = useState<AnalyticsData | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [view, setView] = useState<'general' | 'vlm'>('general');
+  const [sourcesLookup, setSourcesLookup] = useState<LookupData[]>([]);
+  const [typesLookup, setTypesLookup] = useState<LookupData[]>([]);
+  const [regionsLookup, setRegionsLookup] = useState<LookupData[]>([]);
+
+  // SegmentInput options for analytics view
+  const viewOptions = [
+    { key: 'general' as const, label: 'General Analytics' },
+    { key: 'vlm' as const, label: 'VLM Analytics' }
+  ];
+
+  useEffect(() => {
+    fetchAnalytics();
+    fetchLookupData();
+  }, []);
+
+  async function fetchAnalytics() {
+    setLoading(true);
+    try {
+      const res = await fetch('/api/images/');
+      const maps = await res.json();
+
+      const analytics: AnalyticsData = {
+        totalCaptions: maps.length,
+        sources: {},
+        types: {},
+        regions: {},
+        models: {},
+      };
+
+      maps.forEach((map: any) => {
+        if (map.source) analytics.sources[map.source] = (analytics.sources[map.source] || 0) + 1;
+        if (map.type)   analytics.types[map.type]       = (analytics.types[map.type]     || 0) + 1;
+        if (map.countries) {
+          map.countries.forEach((c: any) => {
+            if (c.r_code) analytics.regions[c.r_code] = (analytics.regions[c.r_code] || 0) + 1;
+          });
+        }
+        if (map.caption?.model) {
+          const m = map.caption.model;
+          const ctr = analytics.models[m] ||= { count: 0, avgAccuracy: 0, avgContext: 0, avgUsability: 0, totalScore: 0 };
+          ctr.count++;
+          if (map.caption.accuracy  != null) ctr.avgAccuracy  += map.caption.accuracy;
+          if (map.caption.context   != null) ctr.avgContext   += map.caption.context;
+          if (map.caption.usability != null) ctr.avgUsability += map.caption.usability;
+        }
+      });
+
+      // Add all sources and types with 0 values for missing data
+      sourcesLookup.forEach(source => {
+        if (source.s_code && !analytics.sources[source.s_code]) {
+          analytics.sources[source.s_code] = 0;
+        }
+      });
+
+      typesLookup.forEach(type => {
+        if (type.t_code && !analytics.types[type.t_code]) {
+          analytics.types[type.t_code] = 0;
+        }
+      });
+
+      // Add all regions with 0 values for missing data
+      regionsLookup.forEach(region => {
+        if (region.r_code && !analytics.regions[region.r_code]) {
+          analytics.regions[region.r_code] = 0;
+        }
+      });
+
+      // Add all models with 0 values for missing data
+      const allModels = ['GPT-4', 'Claude', 'Gemini', 'Llama', 'Other'];
+      allModels.forEach(model => {
+        if (!analytics.models[model]) {
+          analytics.models[model] = { count: 0, avgAccuracy: 0, avgContext: 0, avgUsability: 0, totalScore: 0 };
+        }
+      });
+
+      Object.values(analytics.models).forEach(m => {
+        if (m.count > 0) {
+          m.avgAccuracy  = Math.round(m.avgAccuracy  / m.count);
+          m.avgContext   = Math.round(m.avgContext   / m.count);
+          m.avgUsability = Math.round(m.avgUsability / m.count);
+          m.totalScore   = Math.round((m.avgAccuracy + m.avgContext + m.avgUsability) / 3);
+        }
+      });
+
+      setData(analytics);
+    } catch (e) {
+      console.error(e);
+      setData(null);
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  async function fetchLookupData() {
+    try {
+      const [sourcesRes, typesRes, regionsRes] = await Promise.all([
+        fetch('/api/sources'),
+        fetch('/api/types'),
+        fetch('/api/regions')
+      ]);
+      const sources = await sourcesRes.json();
+      const types = await typesRes.json();
+      const regions = await regionsRes.json();
+      setSourcesLookup(sources);
+      setTypesLookup(types);
+      setRegionsLookup(regions);
+    } catch (e) {
+      console.error('Failed to fetch lookup data:', e);
+    }
+  }
+
+  const getSourceLabel = (code: string) => {
+    const source = sourcesLookup.find(s => s.s_code === code);
+    return source ? source.label : code;
+  };
+
+  const getTypeLabel = (code: string) => {
+    const type = typesLookup.find(t => t.t_code === code);
+    return type ? type.label : code;
+  };
+
+  // const getRegionLabel = (code: string) => {
+  //   const region = regionsLookup.find(r => r.r_code === code);
+  //   return region ? region.label : code;
+  // };
+
+  // Transform regions data for IFRC Table - show all regions including 0 data
+  const regionsTableData = useMemo(() => {
+    if (!data || !regionsLookup.length) return [];
+    
+    // Create a map of all regions with their counts (0 if no data)
+    const allRegions = regionsLookup.reduce((acc, region) => {
+      if (region.r_code) {
+        acc[region.r_code] = {
+          name: region.label,
+          count: data.regions[region.r_code] || 0
+        };
+      }
+      return acc;
+    }, {} as Record<string, { name: string; count: number }>);
+
+    // Convert to array and sort by count descending
+    return Object.entries(allRegions)
+      .sort(([,a], [,b]) => b.count - a.count)
+      .map(([_, { name, count }], index) => ({
+        id: index + 1,
+        name,
+        count,
+        percentage: data.totalCaptions > 0 ? Math.round((count / data.totalCaptions) * 100) : 0
+      }));
+  }, [data, regionsLookup]);
+
+  // Transform types data for IFRC Table
+  const typesTableData = useMemo(() => {
+    if (!data) return [];
+    
+    return Object.entries(data.types)
+      .sort(([,a], [,b]) => b - a)
+      .map(([typeKey, count], index) => ({
+        id: index + 1,
+        name: getTypeLabel(typeKey),
+        count,
+        percentage: Math.round((count / data.totalCaptions) * 100)
+      }));
+  }, [data, typesLookup]);
+
+  // Transform sources data for IFRC Table
+  const sourcesTableData = useMemo(() => {
+    if (!data) return [];
+    
+    return Object.entries(data.sources)
+      .sort(([,a], [,b]) => b - a)
+      .map(([sourceKey, count], index) => ({
+        id: index + 1,
+        name: getSourceLabel(sourceKey),
+        count,
+        percentage: Math.round((count / data.totalCaptions) * 100)
+      }));
+  }, [data, sourcesLookup]);
+
+  // Transform models data for IFRC Table
+  const modelsTableData = useMemo(() => {
+    if (!data) return [];
+    
+    return Object.entries(data.models)
+      .sort(([,a], [,b]) => b.totalScore - a.totalScore)
+      .map(([model, stats], index) => ({
+        id: index + 1,
+        name: model,
+        count: stats.count,
+        accuracy: stats.avgAccuracy,
+        context: stats.avgContext,
+        usability: stats.avgUsability,
+        totalScore: stats.totalScore
+      }));
+  }, [data]);
+
+  // Create columns for regions table
+  const regionsColumns = useMemo(() => [
+    createStringColumn<RegionData, number>(
+      'name',
+      'Region',
+      (item) => item.name,
+    ),
+    createNumberColumn<RegionData, number>(
+      'count',
+      'Count',
+      (item) => item.count,
+    ),
+    createNumberColumn<RegionData, number>(
+      'percentage',
+      '% of Total',
+      (item) => item.percentage,
+      {
+        suffix: '%',
+        maximumFractionDigits: 0,
+      },
+    ),
+  ], []);
+
+  // Create columns for types table
+  const typesColumns = useMemo(() => [
+    createStringColumn<TypeData, number>(
+      'name',
+      'Type',
+      (item) => item.name,
+    ),
+    createNumberColumn<TypeData, number>(
+      'count',
+      'Count',
+      (item) => item.count,
+    ),
+    createNumberColumn<TypeData, number>(
+      'percentage',
+      '% of Total',
+      (item) => item.percentage,
+      {
+        suffix: '%',
+        maximumFractionDigits: 0,
+      },
+    ),
+  ], []);
+
+  // Create columns for sources table
+  const sourcesColumns = useMemo(() => [
+    createStringColumn<SourceData, number>(
+      'name',
+      'Source',
+      (item) => item.name,
+    ),
+    createNumberColumn<SourceData, number>(
+      'count',
+      'Count',
+      (item) => item.count,
+    ),
+    createNumberColumn<SourceData, number>(
+      'percentage',
+      '% of Total',
+      (item) => item.percentage,
+      {
+        suffix: '%',
+        maximumFractionDigits: 0,
+      },
+    ),
+  ], []);
+
+  // Create columns for models table
+  const modelsColumns = useMemo(() => [
+    createStringColumn<ModelData, number>(
+      'name',
+      'Model',
+      (item) => item.name,
+    ),
+    createNumberColumn<ModelData, number>(
+      'count',
+      'Count',
+      (item) => item.count,
+    ),
+    createNumberColumn<ModelData, number>(
+      'accuracy',
+      'Accuracy',
+      (item) => item.accuracy,
+      {
+        suffix: '%',
+        maximumFractionDigits: 0,
+      },
+    ),
+    createNumberColumn<ModelData, number>(
+      'context',
+      'Context',
+      (item) => item.context,
+      {
+        suffix: '%',
+        maximumFractionDigits: 0,
+      },
+    ),
+    createNumberColumn<ModelData, number>(
+      'usability',
+      'Usability',
+      (item) => item.usability,
+      {
+        suffix: '%',
+        maximumFractionDigits: 0,
+      },
+    ),
+    createNumberColumn<ModelData, number>(
+      'totalScore',
+      'Total Score',
+      (item) => item.totalScore,
+      {
+        suffix: '%',
+        maximumFractionDigits: 0,
+      },
+    ),
+  ], []);
+
+  if (loading) {
+    return (
+      <PageContainer>
+        <div className="flex items-center justify-center min-h-[400px]">
+          <Spinner />
+        </div>
+      </PageContainer>
+    );
+  }
+
+  if (!data) {
+    return (
+      <PageContainer>
+        <div className="flex items-center justify-center min-h-[400px]">
+          <div className="text-red-500">Failed to load analytics data. Please try again.</div>
+        </div>
+      </PageContainer>
+    );
+  }
+
+  const sourcesChartData = Object.entries(data.sources).filter(([, value]) => value > 0).map(([name, value]) => ({ name, value }));
+  const typesChartData   = Object.entries(data.types).filter(([, value]) => value > 0).map(([name, value]) => ({ name, value }));
+  const regionsChartData = Object.entries(data.regions).filter(([, value]) => value > 0).map(([name, value]) => ({ name, value }));
+
+  // Official IFRC color palette for all pie charts - same order for all charts
+  const ifrcColors = [
+    '#F5333F', // IFRC Primary Red (--go-ui-color-red-90)
+    '#F64752', // IFRC Red 80
+    '#F75C65', // IFRC Red 70
+    '#F87079', // IFRC Red 60
+    '#F9858C', // IFRC Red 50
+    '#FA999F', // IFRC Red 40
+    '#FBADB2', // IFRC Red 30
+    '#FCC2C5'  // IFRC Red 20
+  ];
+
+
   return (
-    <PageContainer className="py-10 text-center">
-      <Heading level={2}>Analytics</Heading>
+    <PageContainer>
+      <Container
+        heading="Analytics Dashboard"
+        headingLevel={2}
+        withHeaderBorder
+        withInternalPadding
+        className="max-w-7xl mx-auto"
+      >
+        {/* Tab selector */}
+        <div className="flex justify-center my-6">
+          <SegmentInput
+            name="analytics-view"
+            value={view}
+            onChange={(value) => {
+              if (value === 'general' || value === 'vlm') {
+                setView(value);
+              }
+            }}
+            options={viewOptions}
+            keySelector={(o) => o.key}
+            labelSelector={(o) => o.label}
+          />
+        </div>
+
+        {view === 'general' ? (
+          <div className="space-y-8">
+            {/* Summary Statistics */}
+            <Container heading="Summary Statistics" headingLevel={3} withHeaderBorder withInternalPadding>
+              <div className="grid grid-cols-2 gap-4">
+                <KeyFigure
+                  value={data.totalCaptions}
+                  label="Total Captions"
+                  compactValue
+                />
+                <KeyFigure
+                  value={2000}
+                  label="Target Amount"
+                  compactValue
+                />
+              </div>
+              <div className="mt-6">
+                <div className="flex justify-between mb-2">
+                  <span>Progress towards target</span>
+                  <span>{Math.round((data.totalCaptions / 2000) * 100)}%</span>
+                </div>
+                <ProgressBar value={data.totalCaptions} totalValue={2000} />
+              </div>
+            </Container>
+
+
+            {/* Regions Chart & Data */}
+            <Container heading="Regions Distribution" headingLevel={3} withHeaderBorder withInternalPadding>
+              <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+                <div className="flex justify-center items-center min-h-[300px]">
+                  <PieChart
+                    data={regionsChartData}
+                    valueSelector={d => d.value}
+                    labelSelector={d => d.name}
+                    keySelector={d => d.name}
+                    colors={ifrcColors}
+                    showPercentageInLegend
+                  />
+                </div>
+                <div className="w-full">
+                  <Table
+                    data={regionsTableData}
+                    columns={regionsColumns}
+                    keySelector={numericIdSelector}
+                    filtered={false}
+                    pending={false}
+                  />
+                </div>
+              </div>
+            </Container>
+
+            {/* Sources Chart & Data */}
+            <Container heading="Sources Distribution" headingLevel={3} withHeaderBorder withInternalPadding>
+              <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+                <div className="flex justify-center items-center min-h-[300px]">
+                  <PieChart
+                    data={sourcesChartData}
+                    valueSelector={d => d.value}
+                    labelSelector={d => d.name}
+                    keySelector={d => d.name}
+                    colors={ifrcColors}
+                    showPercentageInLegend
+                  />
+                </div>
+                <div className="w-full">
+                  <Table
+                    data={sourcesTableData}
+                    columns={sourcesColumns}
+                    keySelector={numericIdSelector}
+                    filtered={false}
+                    pending={false}
+                  />
+                </div>
+              </div>
+            </Container>
+
+            {/* Types Chart & Data */}
+            <Container heading="Types Distribution" headingLevel={3} withHeaderBorder withInternalPadding>
+              <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+                <div className="flex justify-center items-center min-h-[300px]">
+                  <PieChart
+                    data={typesChartData}
+                    valueSelector={d => d.value}
+                    labelSelector={d => d.name}
+                    keySelector={d => d.name}
+                    colors={ifrcColors}
+                    showPercentageInLegend
+                  />
+                </div>
+                <div className="w-full">
+                  <Table
+                    data={typesTableData}
+                    columns={typesColumns}
+                    keySelector={numericIdSelector}
+                    filtered={false}
+                    pending={false}
+                  />
+                </div>
+              </div>
+            </Container>
+          </div>
+        ) : (
+          <div className="space-y-8">
+            {/* Model Performance */}
+            <Container heading="Model Performance" headingLevel={3} withHeaderBorder withInternalPadding>
+              <Table
+                data={modelsTableData}
+                columns={modelsColumns}
+                keySelector={numericIdSelector}
+                filtered={false}
+                pending={false}
+              />
+            </Container>
+          </div>
+        )}
+      </Container>
     </PageContainer>
   );
 }

frontend/src/pages/DemoPage.tsx

@@ -0,0 +1,1079 @@
+import { useState } from 'react';
+import {
+  PageContainer,
+  Heading,
+  Button,
+  TextInput,
+  SelectInput,
+  MultiSelectInput,
+  SearchSelectInput,
+  SearchMultiSelectInput,
+  TextArea,
+  Checkbox,
+  Radio,
+  Switch,
+  DateInput,
+  NumberInput,
+  PasswordInput,
+  RawFileInput,
+  Container,
+  Alert,
+  Message,
+  Spinner,
+  ProgressBar,
+  StackedProgressBar,
+  KeyFigure,
+  PieChart,
+  BarChart,
+  TimeSeriesChart,
+  Table,
+  HeaderCell,
+  TableRow,
+  TableData,
+  Tabs,
+  Tab,
+  TabList,
+  TabPanel,
+  Chip,
+  Tooltip,
+  Modal,
+  Popup,
+  DropdownMenu,
+  IconButton,
+  ConfirmButton,
+  Breadcrumbs,
+  List,
+  Grid,
+  ExpandableContainer,
+  BlockLoading,
+  InputContainer,
+  InputLabel,
+  InputHint,
+  InputError,
+  InputSection,
+  BooleanInput,
+  BooleanOutput,
+  DateOutput,
+  DateRangeOutput,
+  NumberOutput,
+  TextOutput,
+  HtmlOutput,
+  DismissableTextOutput,
+  DismissableListOutput,
+  DismissableMultiListOutput,
+  Legend,
+  LegendItem,
+  ChartContainer,
+  ChartAxes,
+  InfoPopup,
+  Footer,
+  NavigationTabList,
+  Pager,
+  RawButton,
+  RawInput,
+  RawTextArea,
+  RawList,
+  SegmentInput,
+  SelectInputContainer,
+  ReducedListDisplay,
+  Image,
+  TopBanner,
+} from '@ifrc-go/ui';
+import {
+  UploadCloudLineIcon,
+  ArrowRightLineIcon,
+  SearchLineIcon,
+  QuestionLineIcon,
+  GoMainIcon,
+  StarLineIcon,
+  DashboardIcon,
+  AnalysisIcon,
+  FilterLineIcon,
+  DropLineIcon,
+  CartIcon,
+  ChevronDownLineIcon,
+  ChevronUpLineIcon,
+  CloseLineIcon,
+  EditLineIcon,
+  DeleteBinLineIcon,
+  DownloadLineIcon,
+  ShareLineIcon,
+  SettingsLineIcon,
+  RulerLineIcon,
+  MagicLineIcon,
+  PantoneLineIcon,
+  MarkupLineIcon,
+  CalendarLineIcon,
+  LockLineIcon,
+  LocationIcon,
+  HeartLineIcon,
+  ThumbUpLineIcon,
+  ThumbDownLineIcon,
+  EyeLineIcon,
+  EyeOffLineIcon,
+  CheckLineIcon,
+  CropLineIcon,
+  AlertLineIcon,
+  InfoIcon,
+  AlarmWarningLineIcon,
+  SliceLineIcon,
+  ArrowLeftLineIcon,
+  ArrowDownLineIcon,
+  ArrowUpLineIcon,
+  MenuLineIcon,
+  MoreLineIcon,
+  RefreshLineIcon,
+  PaintLineIcon,
+  NotificationIcon,
+  HammerLineIcon,
+  ShapeLineIcon,
+  LinkLineIcon,
+  ExternalLinkLineIcon,
+  CopyLineIcon,
+} from '@ifrc-go/icons';
+
+export default function DemoPage() {
+  const [showModal, setShowModal] = useState(false);
+  const [showPopup, setShowPopup] = useState(false);
+  const [activeTab, setActiveTab] = useState('components');
+  const [loading, setLoading] = useState(false);
+  const [textValue, setTextValue] = useState('');
+  const [selectValue, setSelectValue] = useState('');
+  const [multiSelectValue, setMultiSelectValue] = useState<string[]>([]);
+  const [checkboxValue, setCheckboxValue] = useState(false);
+  const [radioValue, setRadioValue] = useState('option1');
+  const [switchValue, setSwitchValue] = useState(false);
+  const [dateValue, setDateValue] = useState<string>('');
+  const [numberValue, setNumberValue] = useState<number | undefined>();
+  const [passwordValue, setPasswordValue] = useState('');
+  const [booleanValue, setBooleanValue] = useState(false);
+  const [segmentValue, setSegmentValue] = useState('option1');
+
+  // Dummy data
+  const dummyOptions = [
+    { key: 'option1', label: 'Option 1' },
+    { key: 'option2', label: 'Option 2' },
+    { key: 'option3', label: 'Option 3' },
+    { key: 'option4', label: 'Option 4' },
+  ];
+
+  const dummyCountries = [
+    { c_code: 'US', label: 'United States', r_code: 'NAM' },
+    { c_code: 'CA', label: 'Canada', r_code: 'NAM' },
+    { c_code: 'MX', label: 'Mexico', r_code: 'NAM' },
+    { c_code: 'BR', label: 'Brazil', r_code: 'SAM' },
+    { c_code: 'AR', label: 'Argentina', r_code: 'SAM' },
+    { c_code: 'UK', label: 'United Kingdom', r_code: 'EUR' },
+    { c_code: 'DE', label: 'Germany', r_code: 'EUR' },
+    { c_code: 'FR', label: 'France', r_code: 'EUR' },
+  ];
+
+  const dummyTableData = [
+    { id: 1, name: 'John Doe', age: 30, country: 'United States', status: 'Active' },
+    { id: 2, name: 'Jane Smith', age: 25, country: 'Canada', status: 'Inactive' },
+    { id: 3, name: 'Bob Johnson', age: 35, country: 'Mexico', status: 'Active' },
+    { id: 4, name: 'Alice Brown', age: 28, country: 'Brazil', status: 'Active' },
+  ];
+
+  const dummyChartData = [
+    { name: 'Red Cross', value: 45 },
+    { name: 'UNICEF', value: 30 },
+    { name: 'WHO', value: 15 },
+    { name: 'WFP', value: 10 },
+  ];
+
+  const dummyTimeSeriesData = [
+    { date: '2024-01', value: 100 },
+    { date: '2024-02', value: 120 },
+    { date: '2024-03', value: 110 },
+    { date: '2024-04', value: 140 },
+    { date: '2024-05', value: 130 },
+    { date: '2024-06', value: 160 },
+  ];
+
+  const dummyBarData = [
+    { name: 'Q1', value: 100 },
+    { name: 'Q2', value: 150 },
+    { name: 'Q3', value: 120 },
+    { name: 'Q4', value: 180 },
+  ];
+
+  const handleLoading = () => {
+    setLoading(true);
+    setTimeout(() => setLoading(false), 2000);
+  };
+
+  const handleTextChange = (value: string | undefined, name: string) => {
+    setTextValue(value || '');
+  };
+
+  const handlePasswordChange = (value: string | undefined, name: string) => {
+    setPasswordValue(value || '');
+  };
+
+  const handleNumberChange = (value: number | undefined, name: string) => {
+    setNumberValue(value);
+  };
+
+  const handleDateChange = (value: string | undefined, name: string) => {
+    setDateValue(value || '');
+  };
+
+  const handleSelectChange = (value: string | undefined, name: string) => {
+    setSelectValue(value || '');
+  };
+
+  const handleMultiSelectChange = (value: string[], name: string) => {
+    setMultiSelectValue(value);
+  };
+
+  const handleCheckboxChange = (value: boolean, name: string) => {
+    setCheckboxValue(value);
+  };
+
+  const handleRadioChange = (value: string, name: string) => {
+    setRadioValue(value);
+  };
+
+  const handleSwitchChange = (value: boolean, name: string) => {
+    setSwitchValue(value);
+  };
+
+  const handleBooleanChange = (value: boolean, name: string) => {
+    setBooleanValue(value);
+  };
+
+  const handleSegmentChange = (value: string, name: string) => {
+    setSegmentValue(value);
+  };
+
+  return (
+    <PageContainer>
+      <div className="space-y-8">
+        {/* Header Section */}
+        <Container heading="Navigation & Header Components" headingLevel={2} withHeaderBorder withInternalPadding>
+          <div className="space-y-6">
+            {/* Navigation Tabs */}
+            <div>
+              <h3 className="text-lg font-semibold mb-4">Navigation Tab List</h3>
+              <NavigationTabList variant="primary">
+                <Button name="upload" variant="primary">Upload</Button>
+                <Button name="analytics" variant="secondary">Analytics</Button>
+                <Button name="explore" variant="secondary">Explore</Button>
+                <Button name="help" variant="secondary">Help</Button>
+              </NavigationTabList>
+            </div>
+
+            {/* Top Banner */}
+            <div>
+              <h3 className="text-lg font-semibold mb-4">Top Banner</h3>
+              <div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
+                <div className="flex justify-between items-start">
+                  <div>
+                    <h4 className="font-semibold text-blue-900">Important Notice</h4>
+                    <p className="text-blue-700 mt-1">This is a top banner component for important announcements.</p>
+                  </div>
+                  <Button name="dismiss" variant="secondary" size={1}>
+                    Dismiss
+                  </Button>
+                </div>
+              </div>
+            </div>
+
+            {/* Breadcrumbs */}
+            <div>
+              <h3 className="text-lg font-semibold mb-4">Breadcrumbs</h3>
+              <nav className="flex" aria-label="Breadcrumb">
+                <ol className="flex items-center space-x-2">
+                  <li>
+                    <a href="/" className="text-gray-500 hover:text-gray-700">Home</a>
+                  </li>
+                  <li>
+                    <span className="mx-2 text-gray-400">/</span>
+                  </li>
+                  <li>
+                    <a href="/analytics" className="text-gray-500 hover:text-gray-700">Analytics</a>
+                  </li>
+                  <li>
+                    <span className="mx-2 text-gray-400">/</span>
+                  </li>
+                  <li>
+                    <span className="text-gray-900">Reports</span>
+                  </li>
+                </ol>
+              </nav>
+            </div>
+          </div>
+        </Container>
+
+        {/* Basic Components */}
+        <Container heading="Basic Components" headingLevel={2} withHeaderBorder withInternalPadding>
+          <div className="space-y-6">
+            {/* Buttons */}
+            <div>
+              <h3 className="text-lg font-semibold mb-4">Buttons</h3>
+              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                <Button name="primary" variant="primary">Primary Button</Button>
+                <Button name="secondary" variant="secondary">Secondary Button</Button>
+                <Button name="tertiary" variant="tertiary">Tertiary Button</Button>
+                <Button name="disabled" disabled>Disabled Button</Button>
+                <Button name="loading" onClick={handleLoading} disabled={loading}>
+                  {loading ? <Spinner /> : 'Loading Button'}
+                </Button>
+                <ConfirmButton name="confirm" onConfirm={() => alert('Confirmed!')}>
+                  Confirm Button
+                </ConfirmButton>
+                <Button name="with-icon" variant="primary">
+                  <UploadCloudLineIcon className="w-4 h-4 mr-2" />
+                  Upload File
+                </Button>
+              </div>
+            </div>
+
+            {/* Icon Buttons */}
+            <div>
+              <h3 className="text-lg font-semibold mb-4">Icon Buttons</h3>
+              <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4">
+                <IconButton name="upload" variant="primary" title="Upload" ariaLabel="Upload">
+                  <UploadCloudLineIcon />
+                </IconButton>
+                <IconButton name="search" variant="secondary" title="Search" ariaLabel="Search">
+                  <SearchLineIcon />
+                </IconButton>
+                <IconButton name="edit" variant="tertiary" title="Edit" ariaLabel="Edit">
+                  <EditLineIcon />
+                </IconButton>
+                <IconButton name="delete" variant="tertiary" title="Delete" ariaLabel="Delete">
+                  <DeleteBinLineIcon />
+                </IconButton>
+                <IconButton name="download" variant="tertiary" title="Download" ariaLabel="Download">
+                  <DownloadLineIcon />
+                </IconButton>
+                <IconButton name="share" variant="tertiary" title="Share" ariaLabel="Share">
+                  <ShareLineIcon />
+                </IconButton>
+              </div>
+            </div>
+
+            {/* Chips */}
+            <div>
+              <h3 className="text-lg font-semibold mb-4">Chips</h3>
+              <div className="flex flex-wrap gap-2">
+                <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">
+                  Primary Chip
+                </span>
+                <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
+                  Secondary Chip
+                </span>
+                <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
+                  Tertiary Chip
+                </span>
+              </div>
+            </div>
+
+            {/* Tooltips */}
+            <div>
+              <h3 className="text-lg font-semibold mb-4">Tooltips</h3>
+              <div className="flex gap-4">
+                <div className="relative group">
+                  <Button name="tooltip">Hover me</Button>
+                  <div className="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 px-2 py-1 text-xs text-white bg-gray-900 rounded opacity-0 group-hover:opacity-100 transition-opacity">
+                    This is a tooltip
+                  </div>
+                </div>
+                <div className="relative group">
+                  <IconButton name="tooltip-icon" variant="tertiary" title="Info" ariaLabel="Info">
+                    <InfoIcon />
+                  </IconButton>
+                  <div className="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 px-2 py-1 text-xs text-white bg-gray-900 rounded opacity-0 group-hover:opacity-100 transition-opacity">
+                    Another tooltip
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </Container>
+
+        {/* Form Elements */}
+        <Container heading="Form Elements" headingLevel={2} withHeaderBorder withInternalPadding>
+          <div className="space-y-6">
+            {/* Text Inputs */}
+            <div>
+              <h3 className="text-lg font-semibold mb-4">Text Inputs</h3>
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                <InputSection>
+                  <InputLabel>Text Input</InputLabel>
+                  <TextInput
+                    name="text"
+                    value={textValue}
+                    onChange={handleTextChange}
+                    placeholder="Enter text..."
+                  />
+                  <InputHint>This is a hint text</InputHint>
+                </InputSection>
+
+                <InputSection>
+                  <InputLabel>Password Input</InputLabel>
+                  <PasswordInput
+                    name="password"
+                    value={passwordValue}
+                    onChange={handlePasswordChange}
+                    placeholder="Enter password..."
+                  />
+                </InputSection>
+
+                <InputSection>
+                  <InputLabel>Number Input</InputLabel>
+                  <NumberInput
+                    name="number"
+                    value={numberValue}
+                    onChange={handleNumberChange}
+                    placeholder="Enter number..."
+                  />
+                </InputSection>
+
+                <InputSection>
+                  <InputLabel>Date Input</InputLabel>
+                  <DateInput
+                    name="date"
+                    value={dateValue}
+                    onChange={handleDateChange}
+                    placeholder="Select date..."
+                  />
+                </InputSection>
+
+                <InputSection>
+                  <InputLabel>Text Area</InputLabel>
+                  <TextArea
+                    name="textarea"
+                    value=""
+                    onChange={() => {}}
+                    placeholder="Enter long text..."
+                    rows={4}
+                  />
+                </InputSection>
+
+                <InputSection>
+                  <InputLabel>File Input</InputLabel>
+                  <RawFileInput
+                    name="file"
+                    accept="image/*"
+                    onChange={() => {}}
+                  />
+                </InputSection>
+              </div>
+            </div>
+
+            {/* Select Inputs */}
+            <div>
+              <h3 className="text-lg font-semibold mb-4">Select Inputs</h3>
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                <InputSection>
+                  <InputLabel>Select Input</InputLabel>
+                  <SelectInput
+                    name="select"
+                    value={selectValue}
+                    onChange={handleSelectChange}
+                    options={dummyOptions}
+                    keySelector={(o) => o.key}
+                    labelSelector={(o) => o.label}
+                    placeholder="Select an option..."
+                  />
+                </InputSection>
+
+                <InputSection>
+                  <InputLabel>Multi Select Input</InputLabel>
+                  <MultiSelectInput
+                    name="multiselect"
+                    value={multiSelectValue}
+                    onChange={handleMultiSelectChange}
+                    options={dummyCountries}
+                    keySelector={(o) => o.c_code}
+                    labelSelector={(o) => o.label}
+                    placeholder="Select countries..."
+                  />
+                </InputSection>
+
+                <InputSection>
+                  <InputLabel>Search Select Input</InputLabel>
+                  <SearchSelectInput
+                    name="searchselect"
+                    value=""
+                    onChange={() => {}}
+                    options={dummyCountries}
+                    keySelector={(o) => o.c_code}
+                    labelSelector={(o) => o.label}
+                    placeholder="Search countries..."
+                    selectedOnTop
+                  />
+                </InputSection>
+
+                <InputSection>
+                  <InputLabel>Search Multi Select Input</InputLabel>
+                  <SearchMultiSelectInput
+                    name="searchmultiselect"
+                    value={[]}
+                    onChange={() => {}}
+                    options={dummyCountries}
+                    keySelector={(o) => o.c_code}
+                    labelSelector={(o) => o.label}
+                    placeholder="Search and select countries..."
+                    selectedOnTop
+                  />
+                </InputSection>
+              </div>
+            </div>
+
+            {/* Checkboxes & Radios */}
+            <div>
+              <h3 className="text-lg font-semibold mb-4">Checkboxes & Radios</h3>
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                <InputSection>
+                  <InputLabel>Checkbox</InputLabel>
+                  <Checkbox
+                    name="checkbox"
+                    value={checkboxValue}
+                    onChange={handleCheckboxChange}
+                    label="Accept terms and conditions"
+                  />
+                </InputSection>
+
+                <InputSection>
+                  <InputLabel>Radio Buttons</InputLabel>
+                  <div className="space-y-2">
+                    <label className="flex items-center">
+                      <input
+                        type="radio"
+                        name="radio"
+                        value="option1"
+                        checked={radioValue === 'option1'}
+                        onChange={(e) => handleRadioChange(e.target.value, 'radio')}
+                        className="mr-2"
+                      />
+                      <span className="text-sm">Option 1</span>
+                    </label>
+                    <label className="flex items-center">
+                      <input
+                        type="radio"
+                        name="radio"
+                        value="option2"
+                        checked={radioValue === 'option2'}
+                        onChange={(e) => handleRadioChange(e.target.value, 'radio')}
+                        className="mr-2"
+                      />
+                      <span className="text-sm">Option 2</span>
+                    </label>
+                    <label className="flex items-center">
+                      <input
+                        type="radio"
+                        name="radio"
+                        value="option3"
+                        checked={radioValue === 'option3'}
+                        onChange={(e) => handleRadioChange(e.target.value, 'radio')}
+                        className="mr-2"
+                      />
+                      <span className="text-sm">Option 3</span>
+                    </label>
+                  </div>
+                </InputSection>
+
+                <InputSection>
+                  <InputLabel>Switch</InputLabel>
+                  <Switch
+                    name="switch"
+                    value={switchValue}
+                    onChange={handleSwitchChange}
+                    label="Enable notifications"
+                  />
+                </InputSection>
+
+                <InputSection>
+                  <InputLabel>Boolean Input</InputLabel>
+                  <BooleanInput
+                    name="boolean"
+                    value={booleanValue}
+                    onChange={handleBooleanChange}
+                    label="Enable feature"
+                  />
+                </InputSection>
+              </div>
+            </div>
+
+            {/* Segment Input */}
+            <div>
+              <h3 className="text-lg font-semibold mb-4">Segment Input</h3>
+              <InputSection>
+                <InputLabel>Segment Input</InputLabel>
+                <SegmentInput
+                  name="segment"
+                  value={segmentValue}
+                  onChange={handleSegmentChange}
+                  options={dummyOptions}
+                  keySelector={(o) => o.key}
+                  labelSelector={(o) => o.label}
+                />
+              </InputSection>
+            </div>
+          </div>
+        </Container>
+
+        {/* Data Display */}
+        <Container heading="Data Display" headingLevel={2} withHeaderBorder withInternalPadding>
+          <div className="space-y-6">
+            {/* Key Figures */}
+            <div>
+              <h3 className="text-lg font-semibold mb-4">Key Figures</h3>
+              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+                <KeyFigure value={1234} label="Total Users" />
+                <KeyFigure value={567} label="Active Projects" />
+                <KeyFigure value={89} label="Countries" />
+                <KeyFigure value={12.5} label="Growth Rate" suffix="%" />
+              </div>
+            </div>
+
+            {/* Charts */}
+            <div>
+              <h3 className="text-lg font-semibold mb-4">Charts</h3>
+              <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
+                <div>
+                  <h4 className="text-md font-semibold mb-4">Pie Chart</h4>
+                  <PieChart
+                    data={dummyChartData}
+                    valueSelector={(d) => d.value}
+                    labelSelector={(d) => d.name}
+                    keySelector={(d) => d.name}
+                    colorSelector={(d) => '#dc2626'}
+                    showPercentageInLegend
+                  />
+                </div>
+                <div>
+                  <h4 className="text-md font-semibold mb-4">Bar Chart</h4>
+                  <BarChart
+                    data={dummyBarData}
+                    valueSelector={(d) => d.value}
+                    labelSelector={(d) => d.name}
+                    keySelector={(d) => d.name}
+                  />
+                </div>
+              </div>
+              <div className="mt-8">
+                <h4 className="text-md font-semibold mb-4">Time Series Chart</h4>
+                <div className="h-64 bg-gray-50 rounded border-2 border-dashed border-gray-400 flex items-center justify-center">
+                  <div className="text-center">
+                    <div className="w-16 h-16 mx-auto mb-2 bg-gray-200 rounded flex items-center justify-center">
+                      <div className="w-8 h-8 bg-gray-400 rounded"></div>
+                    </div>
+                    <p className="text-gray-600">Time Series Chart Component</p>
+                    <p className="text-sm text-gray-500">This would render a time series chart with data points over time</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            {/* Tables */}
+            <div>
+              <h3 className="text-lg font-semibold mb-4">Tables</h3>
+              <div className="overflow-x-auto">
+                <table className="min-w-full divide-y divide-gray-200">
+                  <thead className="bg-gray-50">
+                    <tr>
+                      <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th>
+                      <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Age</th>
+                      <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Country</th>
+                      <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
+                    </tr>
+                  </thead>
+                  <tbody className="bg-white divide-y divide-gray-200">
+                    {dummyTableData.map((row) => (
+                      <tr key={row.id}>
+                        <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{row.name}</td>
+                        <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{row.age}</td>
+                        <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{row.country}</td>
+                        <td className="px-6 py-4 whitespace-nowrap">
+                          <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
+                            row.status === 'Active' 
+                              ? 'bg-green-100 text-green-800' 
+                              : 'bg-gray-100 text-gray-800'
+                          }`}>
+                            {row.status}
+                          </span>
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            </div>
+
+            {/* Lists */}
+            <div>
+              <h3 className="text-lg font-semibold mb-4">Lists</h3>
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                <div>
+                  <h4 className="text-md font-semibold mb-4">Basic List</h4>
+                  <ul className="space-y-2">
+                    {dummyCountries.slice(0, 5).map((country) => (
+                      <li key={country.c_code} className="flex items-center justify-between p-2 bg-gray-50 rounded">
+                        <span>{country.label}</span>
+                        <span className="text-sm text-gray-500">{country.c_code}</span>
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+                <div>
+                  <h4 className="text-md font-semibold mb-4">Raw List</h4>
+                  <ul className="space-y-1">
+                    {dummyCountries.slice(0, 5).map((country) => (
+                      <li key={country.c_code} className="text-sm">
+                        {country.label}
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+              </div>
+            </div>
+
+            {/* Output Components */}
+            <div>
+              <h3 className="text-lg font-semibold mb-4">Output Components</h3>
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                <div>
+                  <h4 className="text-md font-semibold mb-4">Text Output</h4>
+                  <TextOutput value="This is some text output" />
+                </div>
+                <div>
+                  <h4 className="text-md font-semibold mb-4">Number Output</h4>
+                  <NumberOutput value={1234.56} />
+                </div>
+                <div>
+                  <h4 className="text-md font-semibold mb-4">Date Output</h4>
+                  <DateOutput value={new Date()} />
+                </div>
+                <div>
+                  <h4 className="text-md font-semibold mb-4">Boolean Output</h4>
+                  <BooleanOutput value={true} />
+                </div>
+              </div>
+            </div>
+          </div>
+        </Container>
+
+        {/* Feedback */}
+        <Container heading="Feedback" headingLevel={2} withHeaderBorder withInternalPadding>
+          <div className="space-y-6">
+            {/* Alerts & Messages */}
+            <div>
+              <h3 className="text-lg font-semibold mb-4">Alerts & Messages</h3>
+              <div className="space-y-4">
+                <div className="bg-green-50 border border-green-200 rounded-md p-4">
+                  <div className="flex">
+                    <div className="flex-shrink-0">
+                      <CheckLineIcon className="h-5 w-5 text-green-400" />
+                    </div>
+                    <div className="ml-3">
+                      <p className="text-sm text-green-800">This is a success alert message.</p>
+                    </div>
+                  </div>
+                </div>
+                <div className="bg-yellow-50 border border-yellow-200 rounded-md p-4">
+                  <div className="flex">
+                    <div className="flex-shrink-0">
+                      <AlertLineIcon className="h-5 w-5 text-yellow-400" />
+                    </div>
+                    <div className="ml-3">
+                      <p className="text-sm text-yellow-800">This is a warning alert message.</p>
+                    </div>
+                  </div>
+                </div>
+                <div className="bg-red-50 border border-red-200 rounded-md p-4">
+                  <div className="flex">
+                    <div className="flex-shrink-0">
+                      <AlertLineIcon className="h-5 w-5 text-red-400" />
+                    </div>
+                    <div className="ml-3">
+                      <p className="text-sm text-red-800">This is an error alert message.</p>
+                    </div>
+                  </div>
+                </div>
+                <div className="bg-blue-50 border border-blue-200 rounded-md p-4">
+                  <div className="flex">
+                    <div className="flex-shrink-0">
+                      <InfoIcon className="h-5 w-5 text-blue-400" />
+                    </div>
+                    <div className="ml-3">
+                      <p className="text-sm text-blue-800">This is an info alert message.</p>
+                    </div>
+                  </div>
+                </div>
+                <div className="bg-gray-50 border border-gray-200 rounded-md p-4">
+                  <div className="flex">
+                    <div className="flex-shrink-0">
+                      <InfoIcon className="h-5 w-5 text-gray-400" />
+                    </div>
+                    <div className="ml-3">
+                      <h4 className="text-sm font-medium text-gray-800">Information Message</h4>
+                      <p className="text-sm text-gray-600 mt-1">This is a message component with a title.</p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            {/* Progress Bars */}
+            <div>
+              <h3 className="text-lg font-semibold mb-4">Progress Bars</h3>
+              <div className="space-y-4">
+                <div>
+                  <h4 className="text-sm font-medium mb-2">Basic Progress Bar</h4>
+                  <ProgressBar value={75} totalValue={100} />
+                </div>
+                <div>
+                  <h4 className="text-sm font-medium mb-2">Stacked Progress Bar</h4>
+                  <StackedProgressBar
+                    data={[
+                      { key: 'completed', value: 60, color: '#dc2626' },
+                      { key: 'in-progress', value: 25, color: '#f59e0b' },
+                      { key: 'pending', value: 15, color: '#6b7280' },
+                    ]}
+                    valueSelector={(d) => d.value}
+                    labelSelector={(d) => d.key}
+                    colorSelector={(d) => d.color}
+                  />
+                </div>
+              </div>
+            </div>
+
+            {/* Loading States */}
+            <div>
+              <h3 className="text-lg font-semibold mb-4">Loading States</h3>
+              <div className="space-y-4">
+                <div>
+                  <h4 className="text-sm font-medium mb-2">Spinner</h4>
+                  <Spinner />
+                </div>
+                <div>
+                  <h4 className="text-sm font-medium mb-2">Block Loading</h4>
+                  <BlockLoading />
+                </div>
+              </div>
+            </div>
+
+            {/* Modals & Popups */}
+            <div>
+              <h3 className="text-lg font-semibold mb-4">Modals & Popups</h3>
+              <div className="space-y-4">
+                <Button name="modal" onClick={() => setShowModal(true)}>
+                  Open Modal
+                </Button>
+                <Button name="popup" onClick={() => setShowPopup(true)}>
+                  Open Popup
+                </Button>
+                <Button name="info-popup" onClick={() => {}}>
+                  Info Popup
+                </Button>
+              </div>
+            </div>
+
+            {/* Dropdown Menu */}
+            <div>
+              <h3 className="text-lg font-semibold mb-4">Dropdown Menu</h3>
+              <div className="relative inline-block text-left">
+                <Button name="dropdown">
+                  Actions <ChevronDownLineIcon className="w-4 h-4 ml-2" />
+                </Button>
+                <div className="hidden absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg ring-1 ring-black ring-opacity-5">
+                  <div className="py-1">
+                    <button className="flex items-center w-full px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
+                      <EditLineIcon className="w-4 h-4 mr-2" />
+                      Edit
+                    </button>
+                    <button className="flex items-center w-full px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
+                      <DeleteBinLineIcon className="w-4 h-4 mr-2" />
+                      Delete
+                    </button>
+                    <button className="flex items-center w-full px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
+                      <DownloadLineIcon className="w-4 h-4 mr-2" />
+                      Download
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </Container>
+
+        {/* Layout */}
+        <Container heading="Layout" headingLevel={2} withHeaderBorder withInternalPadding>
+          <div className="space-y-6">
+            {/* Grid System */}
+            <div>
+              <h3 className="text-lg font-semibold mb-4">Grid System</h3>
+              <div className="grid grid-cols-3 gap-4">
+                <div className="bg-gray-100 p-4 rounded">Grid Item 1</div>
+                <div className="bg-gray-100 p-4 rounded">Grid Item 2</div>
+                <div className="bg-gray-100 p-4 rounded">Grid Item 3</div>
+                <div className="bg-gray-100 p-4 rounded">Grid Item 4</div>
+                <div className="bg-gray-100 p-4 rounded">Grid Item 5</div>
+                <div className="bg-gray-100 p-4 rounded">Grid Item 6</div>
+              </div>
+            </div>
+
+            {/* Expandable Container */}
+            <div>
+              <h3 className="text-lg font-semibold mb-4">Expandable Container</h3>
+              <div className="border border-gray-200 rounded-lg">
+                <button className="w-full px-4 py-3 text-left bg-gray-50 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500">
+                  <div className="flex items-center justify-between">
+                    <span className="font-medium">Expandable Section</span>
+                    <ChevronDownLineIcon className="w-5 h-5 text-gray-500" />
+                  </div>
+                </button>
+                <div className="px-4 py-3 border-t border-gray-200">
+                  <p>This is the content inside the expandable container. It can contain any components or text.</p>
+                  <div className="mt-4">
+                    <Button name="inside-expandable">Button inside expandable</Button>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            {/* Tabs */}
+            <div>
+              <h3 className="text-lg font-semibold mb-4">Tabs</h3>
+              <div className="border-b border-gray-200">
+                <nav className="-mb-px flex space-x-8">
+                  <button className="border-b-2 border-blue-500 py-2 px-1 text-sm font-medium text-blue-600">
+                    Tab 1
+                  </button>
+                  <button className="border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 py-2 px-1 text-sm font-medium">
+                    Tab 2
+                  </button>
+                  <button className="border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 py-2 px-1 text-sm font-medium">
+                    Tab 3
+                  </button>
+                </nav>
+                <div className="mt-4">
+                  <p>Content for tab 1</p>
+                </div>
+              </div>
+            </div>
+
+            {/* Pager */}
+            <div>
+              <h3 className="text-lg font-semibold mb-4">Pager</h3>
+              <div className="flex items-center justify-between">
+                <div className="flex-1 flex justify-between sm:hidden">
+                  <button className="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
+                    Previous
+                  </button>
+                  <button className="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
+                    Next
+                  </button>
+                </div>
+                <div className="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
+                  <div>
+                    <p className="text-sm text-gray-700">
+                      Showing <span className="font-medium">1</span> to <span className="font-medium">10</span> of <span className="font-medium">97</span> results
+                    </p>
+                  </div>
+                  <div>
+                    <nav className="relative z-0 inline-flex rounded-md shadow-sm -space-x-px">
+                      <button className="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
+                        Previous
+                      </button>
+                      <button className="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
+                        1
+                      </button>
+                      <button className="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-blue-50 text-sm font-medium text-blue-600 hover:bg-blue-100">
+                        2
+                      </button>
+                      <button className="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
+                        3
+                      </button>
+                      <button className="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
+                        Next
+                      </button>
+                    </nav>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </Container>
+
+        {/* Maps Section */}
+        <Container heading="Maps & Geographic Components" headingLevel={2} withHeaderBorder withInternalPadding>
+          <div className="space-y-6">
+            <div>
+              <h3 className="text-lg font-semibold mb-4">Map Container</h3>
+              <div className="h-64 bg-gray-200 rounded border-2 border-dashed border-gray-400 flex items-center justify-center">
+                <div className="text-center">
+                  <LocationIcon className="w-12 h-12 mx-auto text-gray-400 mb-2" />
+                  <p className="text-gray-600">Map Container Component</p>
+                  <p className="text-sm text-gray-500">This would render a map with MapContainer, MapSource, MapLayer components</p>
+                </div>
+              </div>
+            </div>
+
+            <div>
+              <h3 className="text-lg font-semibold mb-4">Map Popup</h3>
+              <div className="bg-white border rounded-lg p-4 shadow-lg max-w-sm">
+                <div className="flex justify-between items-start mb-2">
+                  <h4 className="font-semibold">Country Name</h4>
+                  <Button name="close" variant="tertiary" size={1}>
+                    <CloseLineIcon />
+                  </Button>
+                </div>
+                <p className="text-sm text-gray-600">This represents a MapPopup component with country information.</p>
+              </div>
+            </div>
+          </div>
+        </Container>
+
+        {/* Modals */}
+        {showModal && (
+          <div className="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
+            <div className="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
+              <div className="mt-3">
+                <h3 className="text-lg font-medium text-gray-900 mb-4">Modal Example</h3>
+                <p className="text-sm text-gray-500">This is a modal dialog. It can contain any content.</p>
+                <div className="mt-4 flex gap-2">
+                  <Button name="modal-close" onClick={() => setShowModal(false)}>
+                    Close
+                  </Button>
+                  <Button name="modal-action" variant="secondary">
+                    Action
+                  </Button>
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {showPopup && (
+          <div className="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
+            <div className="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
+              <div className="mt-3">
+                <h3 className="text-lg font-medium text-gray-900 mb-4">Popup Example</h3>
+                <p className="text-sm text-gray-500">This is a popup. It's similar to a modal but with different styling.</p>
+                <div className="mt-4">
+                  <Button name="popup-close" onClick={() => setShowPopup(false)}>
+                    Close
+                  </Button>
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* Footer */}
+        <Footer>
+          <div className="text-center text-gray-600">
+            <p>IFRC GO UI Components Demo Page</p>
+            <p className="text-sm">Built with IFRC GO Design System</p>
+          </div>
+        </Footer>
+      </div>
+    </PageContainer>
+  );
+}

frontend/src/pages/DevPage.tsx

@@ -0,0 +1,245 @@
+import { useState, useEffect } from 'react';
+import {
+  PageContainer, Heading, Button, Container,
+} from '@ifrc-go/ui';
+
+// Local storage key for selected model
+const SELECTED_MODEL_KEY = 'selectedVlmModel';
+
+export default function DevPage() {
+  // Model selection state
+  const [availableModels, setAvailableModels] = useState<Array<{
+    m_code: string;
+    label: string;
+    model_type: string;
+    is_available: boolean;
+  }>>([]);
+  const [selectedModel, setSelectedModel] = useState<string>('');
+
+  // Fetch models on component mount
+  useEffect(() => {
+    fetchModels();
+  }, []);
+
+  const fetchModels = () => {
+    fetch('/api/models')
+      .then(r => r.json())
+      .then(modelsData => {
+        console.log('Models data:', modelsData);
+        console.log('Available models count:', modelsData.models?.length || 0);
+        setAvailableModels(modelsData.models || []);
+        
+        // Load persisted model or set default model (first available model)
+        const persistedModel = localStorage.getItem(SELECTED_MODEL_KEY);
+        if (modelsData.models && modelsData.models.length > 0) {
+          if (persistedModel && modelsData.models.find((m: any) => m.m_code === persistedModel && m.is_available)) {
+            setSelectedModel(persistedModel);
+          } else {
+            const firstAvailableModel = modelsData.models.find((m: any) => m.is_available) || modelsData.models[0];
+            setSelectedModel(firstAvailableModel.m_code);
+            localStorage.setItem(SELECTED_MODEL_KEY, firstAvailableModel.m_code);
+          }
+        }
+      })
+      .catch(err => {
+        console.error('Failed to fetch models:', err);
+      });
+  };
+
+  const toggleModelAvailability = async (modelCode: string, currentStatus: boolean) => {
+    try {
+      const response = await fetch(`/api/models/${modelCode}/toggle`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          is_available: !currentStatus
+        })
+      });
+
+      if (response.ok) {
+        // Update local state
+        setAvailableModels(prev => 
+          prev.map(model => 
+            model.m_code === modelCode 
+              ? { ...model, is_available: !currentStatus }
+              : model
+          )
+        );
+        console.log(`Model ${modelCode} availability toggled to ${!currentStatus}`);
+      } else {
+        const errorData = await response.json();
+        console.error('Failed to toggle model availability:', errorData);
+        alert(`Failed to toggle model availability: ${errorData.error || 'Unknown error'}`);
+      }
+    } catch (error) {
+      console.error('Error toggling model availability:', error);
+      alert('Error toggling model availability');
+    }
+  };
+
+  // Handle model selection change
+  const handleModelChange = (modelCode: string) => {
+    setSelectedModel(modelCode);
+    localStorage.setItem(SELECTED_MODEL_KEY, modelCode);
+  };
+
+  return (
+    <PageContainer>
+      <div className="mx-auto max-w-screen-lg px-4 sm:px-6 lg:px-8 py-6 sm:py-10">
+        <Heading level={1}>Development & Testing</Heading>
+        
+        <div className="mt-8 space-y-8">
+          {/* Model Selection Section */}
+          <Container
+            heading="VLM Model Selection"
+            headingLevel={2}
+            withHeaderBorder
+            withInternalPadding
+          >
+            <div className="space-y-4">
+              <p className="text-gray-700">
+                Select which Vision Language Model to use for caption generation.
+              </p>
+              
+              <div className="flex flex-col sm:flex-row items-center gap-4">
+                <label className="text-sm font-medium text-gray-700">Model:</label>
+                <select
+                  value={selectedModel}
+                  onChange={(e) => handleModelChange(e.target.value)}
+                  className="border border-gray-300 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ifrcRed focus:border-transparent min-w-[200px]"
+                >
+                  {availableModels
+                    .filter(model => model.is_available)
+                    .map(model => (
+                      <option key={model.m_code} value={model.m_code}>
+                        {model.label}
+                      </option>
+                    ))}
+                </select>
+                {selectedModel && (
+                  <span className="text-xs text-green-600 bg-green-50 px-2 py-1 rounded">
+                    ✓ Active for caption generation
+                  </span>
+                )}
+              </div>
+              
+
+            </div>
+          </Container>
+
+          {/* Model Information Section */}
+          <Container
+            heading="Model Information"
+            headingLevel={2}
+            withHeaderBorder
+            withInternalPadding
+          >
+            <div className="space-y-4">
+              <p className="text-gray-700">
+                Detailed information about available models and their status. Use the toggle buttons to enable/disable models.
+              </p>
+              
+              <div className="overflow-x-auto">
+                <table className="min-w-full border border-gray-200">
+                  <thead className="bg-gray-50">
+                    <tr>
+                      <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Code</th>
+                      <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Label</th>
+                      <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th>
+                      <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Available</th>
+                    </tr>
+                  </thead>
+                  <tbody className="bg-white divide-y divide-gray-200">
+                    {availableModels.map(model => (
+                      <tr key={model.m_code}>
+                        <td className="px-4 py-2 text-sm font-mono">{model.m_code}</td>
+                        <td className="px-4 py-2 text-sm">{model.label}</td>
+                        <td className="px-4 py-2 text-sm">{model.model_type}</td>
+                                                 <td className="px-4 py-2 text-sm">
+                           <Button
+                             name={`toggle-${model.m_code}`}
+                             variant={model.is_available ? "primary" : "secondary"}
+                             size={1}
+                             onClick={() => toggleModelAvailability(model.m_code, model.is_available)}
+                           >
+                             {model.is_available ? 'Enabled' : 'Disabled'}
+                           </Button>
+                         </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            </div>
+          </Container>
+
+          {/* API Testing Section */}
+          <Container
+            heading="API Testing"
+            headingLevel={2}
+            withHeaderBorder
+            withInternalPadding
+          >
+            <div className="space-y-4">
+              <p className="text-gray-700">
+                Test API endpoints and model functionality.
+              </p>
+              
+              <div className="flex flex-wrap gap-4">
+                <Button
+                  name="test-models-api"
+                  variant="secondary"
+                  onClick={() => {
+                    fetch('/api/models')
+                      .then(r => r.json())
+                      .then(data => {
+                        console.log('Models API response:', data);
+                        alert('Check console for models API response');
+                      })
+                      .catch(err => {
+                        console.error('Models API error:', err);
+                        alert('Models API error - check console');
+                      });
+                  }}
+                >
+                  Test Models API
+                </Button>
+                
+                <Button
+                  name="test-selected-model"
+                  variant="secondary"
+                  disabled={!selectedModel}
+                  onClick={() => {
+                    if (!selectedModel) return;
+                    fetch(`/api/models/${selectedModel}/test`)
+                      .then(r => r.json())
+                      .then(data => {
+                        console.log('Model test response:', data);
+                        alert('Check console for model test response');
+                      })
+                      .catch(err => {
+                        console.error('Model test error:', err);
+                        alert('Model test error - check console');
+                      });
+                  }}
+                >
+                  Test Selected Model
+                </Button>
+
+                <Button
+                  name="refresh-models"
+                  variant="secondary"
+                  onClick={fetchModels}
+                >
+                  Refresh Models
+                </Button>
+              </div>
+            </div>
+          </Container>
+        </div>
+      </div>
+    </PageContainer>
+  );
+}

frontend/src/pages/ExplorePage.tsx

@@ -1,6 +1,7 @@
-import { PageContainer, Heading, TextInput, SearchSelectInput, SearchMultiSelectInput } from '@ifrc-go/ui';
+import { PageContainer, Heading, TextInput, SelectInput, MultiSelectInput, Button } from '@ifrc-go/ui';
 import { useState, useEffect, useMemo } from 'react';
 import { useNavigate } from 'react-router-dom';
+import { StarLineIcon } from '@ifrc-go/icons';
 
 interface MapOut {
   image_id: string;
@@ -12,8 +13,10 @@ interface MapOut {
   image_type: string;
   countries?: {c_code: string, label: string, r_code: string}[];
   caption?: {
+    title: string;
     generated: string;
     edited?: string;
+    starred?: boolean;
   };
 }
 
@@ -25,14 +28,15 @@ export default function ExplorePage() {
   const [catFilter, setCatFilter] = useState('');
   const [regionFilter, setRegionFilter] = useState('');
   const [countryFilter, setCountryFilter] = useState('');
+  const [showStarredOnly, setShowStarredOnly] = useState(false);
   const [sources, setSources] = useState<{s_code: string, label: string}[]>([]);
   const [types, setTypes] = useState<{t_code: string, label: string}[]>([]);
   const [regions, setRegions] = useState<{r_code: string, label: string}[]>([]);
   const [countries, setCountries] = useState<{c_code: string, label: string, r_code: string}[]>([]);
-  const [isLoading, setIsLoading] = useState(false);
+  const [isLoadingFilters, setIsLoadingFilters] = useState(true);
 
   const fetchMaps = () => {
-    setIsLoading(true);
+    setIsLoadingFilters(true);
     // Fetch maps
     fetch('/api/images/')
       .then(r => {
@@ -65,7 +69,7 @@ export default function ExplorePage() {
         setMaps([]);
       })
       .finally(() => {
-        setIsLoading(false);
+        setIsLoadingFilters(false);
       });
   };
 
@@ -89,11 +93,30 @@ export default function ExplorePage() {
 
   useEffect(() => {
     // Fetch lookup data
+    console.log('Fetching filter data...');
+    setIsLoadingFilters(true);
+    
     Promise.all([
-      fetch('/api/sources').then(r => r.json()),
-      fetch('/api/types').then(r => r.json()),
-      fetch('/api/regions').then(r => r.json()),
-      fetch('/api/countries').then(r => r.json())
+      fetch('/api/sources').then(r => {
+        console.log('Sources response:', r.status, r.statusText);
+        if (!r.ok) throw new Error(`HTTP ${r.status}: ${r.statusText}`);
+        return r.json();
+      }),
+      fetch('/api/types').then(r => {
+        console.log('Types response:', r.status, r.statusText);
+        if (!r.ok) throw new Error(`HTTP ${r.status}: ${r.statusText}`);
+        return r.json();
+      }),
+      fetch('/api/regions').then(r => {
+        console.log('Regions response:', r.status, r.statusText);
+        if (!r.ok) throw new Error(`HTTP ${r.status}: ${r.statusText}`);
+        return r.json();
+      }),
+      fetch('/api/countries').then(r => {
+        console.log('Countries response:', r.status, r.statusText);
+        if (!r.ok) throw new Error(`HTTP ${r.status}: ${r.statusText}`);
+        return r.json();
+      })
     ]).then(([sourcesData, typesData, regionsData, countriesData]) => {
       console.log('Fetched filter data:', {
         sources: sourcesData.length,
@@ -129,16 +152,19 @@ export default function ExplorePage() {
         console.error('Expected array from /api/countries, got:', countriesData);
         setCountries([]);
       }
+      
+      setIsLoadingFilters(false);
     }).catch(err => {
       console.error('Failed to fetch filter data:', err);
+      // Set empty arrays on error to prevent undefined issues
+      setSources([]);
+      setTypes([]);
+      setRegions([]);
+      setCountries([]);
+      setIsLoadingFilters(false);
     });
   }, []);
 
-  // Add refresh function
-  const handleRefresh = () => {
-    fetchMaps();
-  };
-
   const filtered = useMemo(() => {
     // Ensure maps is an array before filtering
     if (!Array.isArray(maps)) {
@@ -147,12 +173,13 @@ export default function ExplorePage() {
     }
     
     return maps.filter(m => {
-      // Search in filename, source, type, and caption
+      // Search in filename, source, type, title, and caption
       const searchLower = search.toLowerCase();
       const searchMatch = !search || 
         m.file_key.toLowerCase().includes(searchLower) ||
         m.source.toLowerCase().includes(searchLower) ||
         m.type.toLowerCase().includes(searchLower) ||
+        (m.caption?.title && m.caption.title.toLowerCase().includes(searchLower)) ||
         (m.caption?.edited && m.caption.edited.toLowerCase().includes(searchLower)) ||
         (m.caption?.generated && m.caption.generated.toLowerCase().includes(searchLower));
       
@@ -168,117 +195,170 @@ export default function ExplorePage() {
       // Filter by country (check if any country in the image matches the selected country)
       const countryMatch = !countryFilter || (m.countries && m.countries.some(c => c.c_code === countryFilter));
       
-      return searchMatch && sourceMatch && typeMatch && regionMatch && countryMatch;
+      // Filter by starred status
+      const starredMatch = !showStarredOnly || (m.caption && m.caption.starred === true);
+      
+      return searchMatch && sourceMatch && typeMatch && regionMatch && countryMatch && starredMatch;
     });
   }, [maps, search, srcFilter, catFilter, regionFilter, countryFilter]);
 
-
-
   return (
     <PageContainer>
-      <div className="flex justify-between items-center">
-        <Heading level={2}>Explore Examples</Heading>
-        <button
-          onClick={handleRefresh}
-          disabled={isLoading}
-          className="px-4 py-2 bg-ifrcRed text-white rounded hover:bg-ifrcRed/90 disabled:opacity-50"
-        >
-          {isLoading ? 'Loading...' : 'Refresh'}
-        </button>
-      </div>
+      <div className="space-y-6">
+        {/* Header Section */}
+        <div className="flex justify-between items-center">
+          <div>
+            <Heading level={2}>Explore Examples</Heading>
+            <p className="text-gray-600 mt-1">Browse and search through uploaded crisis maps</p>
+          </div>
+          <div className="flex gap-2">
+            <Button
+              name="reference-examples"
+              variant={showStarredOnly ? "primary" : "secondary"}
+              onClick={() => setShowStarredOnly(!showStarredOnly)}
+            >
+              <StarLineIcon className="w-4 h-4" />
+              <span className="inline ml-2">Reference Examples</span>
+            </Button>
+            <Button
+              name="export"
+              variant="secondary"
+              onClick={() => {
+                const data = {
+                  maps: maps,
+                  filters: {
+                    sources: sources,
+                    types: types,
+                    regions: regions,
+                    countries: countries
+                  },
+                  timestamp: new Date().toISOString()
+                };
+                const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
+                const url = URL.createObjectURL(blob);
+                const a = document.createElement('a');
+                a.href = url;
+                a.download = `promptaid-vision-data-${new Date().toISOString().split('T')[0]}.json`;
+                document.body.appendChild(a);
+                a.click();
+                document.body.removeChild(a);
+                URL.revokeObjectURL(url);
+              }}
+            >
+              Export
+            </Button>
+          </div>
+        </div>
 
-      {/* ── Filters Bar ──────────────────────────────── */}
-      <div className="mt-4 flex flex-wrap gap-4 items-center">
-        <TextInput
-          name="search"
-          placeholder="Search by filename…"
-          value={search}
-          onChange={(e) => setSearch(e || '')}
-          className="flex-1 min-w-[12rem]"
-        />
+        {/* Filters Bar */}
+        <div className="bg-gray-50 rounded-lg p-4">
+          <div className="flex flex-wrap gap-4 items-center">
+            <TextInput
+              name="search"
+              placeholder="Search by filename, title…"
+              value={search}
+              onChange={(e) => setSearch(e || '')}
+              className="flex-1 min-w-[12rem]"
+            />
 
-        <SearchSelectInput
-          name="source"
-          placeholder="All Sources"
-          options={sources}
-          value={srcFilter || null}
-          onChange={(v) => setSrcFilter(v as string || '')}
-          keySelector={(o) => o.s_code}
-          labelSelector={(o) => o.label}
-          selectedOnTop={false}
-        />
+            <SelectInput
+              name="source"
+              placeholder={isLoadingFilters ? "Loading..." : "All Sources"}
+              options={sources}
+              value={srcFilter || null}
+              onChange={(v) => setSrcFilter(v as string || '')}
+              keySelector={(o) => o.s_code}
+              labelSelector={(o) => o.label}
+              required={false}
+              disabled={isLoadingFilters}
+            />
 
-        <SearchMultiSelectInput
-          name="type"
-          placeholder="All Types"
-          options={types}
-          value={catFilter ? [catFilter] : []}
-          onChange={(v) => setCatFilter((v as string[])[0] || '')}
-          keySelector={(o) => o.t_code}
-          labelSelector={(o) => o.label}
-          selectedOnTop={false}
-        />
+            <SelectInput
+              name="type"
+              placeholder={isLoadingFilters ? "Loading..." : "All Types"}
+              options={types}
+              value={catFilter || null}
+              onChange={(v) => setCatFilter(v as string || '')}
+              keySelector={(o) => o.t_code}
+              labelSelector={(o) => o.label}
+              required={false}
+              disabled={isLoadingFilters}
+            />
 
-        <SearchSelectInput
-          name="region"
-          placeholder="All Regions"
-          options={regions}
-          value={regionFilter || null}
-          onChange={(v) => setRegionFilter(v as string || '')}
-          keySelector={(o) => o.r_code}
-          labelSelector={(o) => o.label}
-          selectedOnTop={false}
-        />
+            <SelectInput
+              name="region"
+              placeholder={isLoadingFilters ? "Loading..." : "All Regions"}
+              options={regions}
+              value={regionFilter || null}
+              onChange={(v) => setRegionFilter(v as string || '')}
+              keySelector={(o) => o.r_code}
+              labelSelector={(o) => o.label}
+              required={false}
+              disabled={isLoadingFilters}
+            />
 
-        <SearchSelectInput
-          name="country"
-          placeholder="All Countries"
-          options={countries}
-          value={countryFilter || null}
-          onChange={(v) => setCountryFilter(v as string || '')}
-          keySelector={(o) => o.c_code}
-          labelSelector={(o) => o.label}
-          selectedOnTop={false}
-        />
-      </div>
+            <MultiSelectInput
+              name="country"
+              placeholder={isLoadingFilters ? "Loading..." : "All Countries"}
+              options={countries}
+              value={countryFilter ? [countryFilter] : []}
+              onChange={(v) => setCountryFilter((v as string[])[0] || '')}
+              keySelector={(o) => o.c_code}
+              labelSelector={(o) => o.label}
+              disabled={isLoadingFilters}
+            />
+          </div>
+        </div>
 
-      {/* ── List ─────────────────────────────────────── */}
-      <div className="mt-6 space-y-4">
-        {filtered.map(m => (
-          <div key={m.image_id} className="border rounded-lg p-4 flex gap-4 cursor-pointer" onClick={() => navigate(`/map/${m.image_id}`)}>
-            <div className="bg-gray-100 flex items-center justify-center text-gray-400 text-xs overflow-hidden rounded" style={{ width: '120px', height: '80px' }}>
-              {m.image_url ? (
-                <img 
-                  src={m.image_url} 
-                  alt={m.file_key}
-                  className="w-full h-full object-cover"
-                  style={{ imageRendering: 'pixelated' }}
-                  onError={(e) => {
-                    // Fallback to placeholder if image fails to load
-                    const target = e.target as HTMLImageElement;
-                    target.style.display = 'none';
-                    target.parentElement!.innerHTML = 'Img';
-                  }}
-                />
-              ) : (
-                'Img'
-              )}
-            </div>
-            <div className="flex-1 min-w-0">
-              <div className="flex flex-wrap gap-2">
-                <span className="px-2 py-1 bg-ifrcRed/10 text-ifrcRed text-xs rounded">{m.source}</span>
-                <span className="px-2 py-1 bg-ifrcRed/10 text-ifrcRed text-xs rounded">{m.type}</span>
-              </div>
-              <p className="mt-2 text-sm text-gray-700 line-clamp-2">
-                {m.caption?.edited || m.caption?.generated || '— no caption yet —'}
-              </p>
-            </div>
+        {/* Results Section */}
+        <div className="space-y-4">
+          <div className="flex justify-between items-center">
+            <p className="text-sm text-gray-600">
+              {filtered.length} of {maps.length} examples
+            </p>
           </div>
-        ))}
 
-        {!filtered.length && (
-          <p className="text-center text-gray-500">No examples found.</p>
-        )}
+          {/* List */}
+          <div className="space-y-4">
+            {filtered.map(m => (
+              <div key={m.image_id} className="border border-gray-200 rounded-lg p-4 flex gap-4 cursor-pointer hover:bg-gray-50 transition-colors" onClick={() => navigate(`/map/${m.image_id}`)}>
+                <div className="bg-gray-100 flex items-center justify-center text-gray-400 text-xs overflow-hidden rounded" style={{ width: '120px', height: '80px' }}>
+                  {m.image_url ? (
+                    <img 
+                      src={m.image_url} 
+                      alt={m.file_key}
+                      className="w-full h-full object-cover"
+                      style={{ imageRendering: 'pixelated' }}
+                      onError={(e) => {
+                        // Fallback to placeholder if image fails to load
+                        const target = e.target as HTMLImageElement;
+                        target.style.display = 'none';
+                        target.parentElement!.innerHTML = 'Img';
+                      }}
+                    />
+                  ) : (
+                    'Img'
+                  )}
+                </div>
+                <div className="flex-1 min-w-0">
+                  <h3 className="font-medium text-gray-900 mb-2">
+                    {m.caption?.title || 'No title'}
+                  </h3>
+                  <div className="flex flex-wrap gap-2 mb-2">
+                    <span className="px-2 py-1 bg-ifrcRed/10 text-ifrcRed text-xs rounded">{m.source}</span>
+                    <span className="px-2 py-1 bg-ifrcRed text-xs rounded">{m.type}</span>
+                  </div>
+                </div>
+              </div>
+            ))}
+
+            {!filtered.length && (
+              <div className="text-center py-12">
+                <p className="text-gray-500">No examples found.</p>
+              </div>
+            )}
+          </div>
+        </div>
       </div>
     </PageContainer>
   );

frontend/src/pages/MapDetailPage.tsx

@@ -1,4 +1,4 @@
-import { PageContainer, Heading, Button } from '@ifrc-go/ui';
+import { PageContainer, Button } from '@ifrc-go/ui';
 import { useState, useEffect } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
 
@@ -11,6 +11,7 @@ interface MapOut {
   epsg: string;
   image_type: string;
   caption?: {
+    title: string;
     generated: string;
     edited?: string;
   };
@@ -111,13 +112,14 @@ export default function MapDetailPage() {
   return (
     <PageContainer>
       <div className="mb-4">
-        <button
+        <Button
+          name="back"
+          variant="secondary"
           onClick={() => navigate('/explore')}
-          className="text-ifrcRed hover:text-ifrcRed/80 mb-4 flex items-center gap-2"
+          className="mb-4"
         >
           ← Back to Explore
-        </button>
-        <Heading level={2}>Map Details</Heading>
+        </Button>
       </div>
 
       <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
@@ -142,10 +144,11 @@ export default function MapDetailPage() {
         {/* Details Section */}
         <div className="space-y-6">
           <div>
-            <h3 className="text-lg font-semibold mb-2">File Information</h3>
+            <h3 className="text-lg font-semibold mb-2">Title</h3>
             <div className="space-y-2 text-sm">
-              <div><span className="font-medium">File:</span> {map.file_key}</div>
-              <div><span className="font-medium">ID:</span> {map.image_id}</div>
+              <div className="text-gray-700">
+                {map.caption?.title || '— no title —'}
+              </div>
             </div>
           </div>
 
@@ -179,20 +182,15 @@ export default function MapDetailPage() {
       </div>
 
       {/* Contribute Section */}
-      <div className="mt-8 pt-6 border-t border-gray-200">
-        <div className="text-center">
-          <p className="text-gray-600 mb-4">
-            Want to contribute to this map? Use this image as a starting point for your own analysis.
-          </p>
-          <Button
-            name="contribute"
-            onClick={handleContribute}
-            disabled={contributing}
-            className="bg-ifrcRed hover:bg-ifrcRed/90 text-white px-6 py-2 rounded-lg"
-          >
-            {contributing ? 'Contributing...' : 'Contribute'}
-          </Button>
-        </div>
+      <div className="mt-8 pt-6 border-t border-gray-200 flex justify-center">
+        <Button
+          name="contribute"
+          onClick={handleContribute}
+          disabled={contributing}
+          className="bg-ifrcRed hover:bg-ifrcRed/90 text-white px-6 py-2 rounded-lg"
+        >
+          {contributing ? 'Contributing...' : 'Contribute'}
+        </Button>
       </div>
     </PageContainer>
   );

frontend/src/pages/UploadPage.tsx

@@ -2,32 +2,33 @@ import { useCallback, useState, useEffect, useRef } from 'react';
 import type { DragEvent } from 'react';
 import {
   PageContainer, Heading, Button,
-  SelectInput, MultiSelectInput,
-  RawFileInput,
+  SelectInput, MultiSelectInput, Container, IconButton, TextInput, TextArea, Spinner,
 } from '@ifrc-go/ui';
 import {
   UploadCloudLineIcon,
   ArrowRightLineIcon,
+  DeleteBinLineIcon,
 } from '@ifrc-go/icons';
-import { Link, useNavigate, useSearchParams } from 'react-router-dom';
+import { Link, useSearchParams } from 'react-router-dom';
+
+const SELECTED_MODEL_KEY = 'selectedVlmModel';
 
 export default function UploadPage() {
-  const navigate = useNavigate();
   const [searchParams] = useSearchParams();
   const [step, setStep] = useState<1 | 2 | 3>(1);
+  const [isLoading, setIsLoading] = useState(false);
   const stepRef = useRef(step);
   const uploadedImageIdRef = useRef<string | null>(null);
   const [preview, setPreview] = useState<string | null>(null);
   /* ---------------- local state ----------------- */
 
   const [file, setFile] = useState<File | null>(null);
-  //const [source,    setSource]    = useState('');
-  //const [type,  setType]  = useState('');
   const [source,   setSource]   = useState('');
   const [type, setType] = useState('');
   const [epsg, setEpsg] = useState('');
   const [imageType, setImageType] = useState('');
   const [countries, setCountries] = useState<string[]>([]);
+  const [title, setTitle] = useState('');
 
   // Metadata options from database
   const [sources, setSources] = useState<{s_code: string, label: string}[]>([]);
@@ -38,7 +39,6 @@ export default function UploadPage() {
 
   // Track uploaded image data for potential deletion
   const [uploadedImageId, setUploadedImageId] = useState<string | null>(null);
-  const [uploadedCaptionId, setUploadedCaptionId] = useState<string | null>(null);
   
   // Keep refs updated with current values
   stepRef.current = step;
@@ -58,7 +58,8 @@ export default function UploadPage() {
       fetch('/api/types').then(r => r.json()),
       fetch('/api/spatial-references').then(r => r.json()),
       fetch('/api/image-types').then(r => r.json()),
-      fetch('/api/countries').then(r => r.json())
+      fetch('/api/countries').then(r => r.json()),
+      fetch('/api/models').then(r => r.json())
     ]).then(([sourcesData, typesData, spatialData, imageTypesData, countriesData]) => {
       setSources(sourcesData);
       setTypes(typesData);
@@ -66,7 +67,7 @@ export default function UploadPage() {
       setImageTypes(imageTypesData);
       setCountriesOptions(countriesData);
       
-      // Set default values from the first available options
+      // Set default values
       if (sourcesData.length > 0) setSource(sourcesData[0].s_code);
       if (typesData.length > 0) setType(typesData[0].t_code);
       if (spatialData.length > 0) setEpsg(spatialData[0].epsg);
@@ -74,11 +75,8 @@ export default function UploadPage() {
     });
   }, []);
 
-  // Cleanup effect for navigation away - delete if user hasn't submitted yet
   useEffect(() => {
     const handleBeforeUnload = () => {
-      // Delete if user is in step 1 or 2 (hasn't submitted yet)
-      // Only preserve if user has successfully submitted (step 3)
       if (uploadedImageIdRef.current && stepRef.current !== 3) {
         fetch(`/api/images/${uploadedImageIdRef.current}`, { method: "DELETE" }).catch(console.error);
       }
@@ -87,12 +85,11 @@ export default function UploadPage() {
     window.addEventListener('beforeunload', handleBeforeUnload);
     return () => {
       window.removeEventListener('beforeunload', handleBeforeUnload);
-      // Only cleanup on component unmount if user hasn't submitted yet
       if (uploadedImageIdRef.current && stepRef.current !== 3) {
         fetch(`/api/images/${uploadedImageIdRef.current}`, { method: "DELETE" }).catch(console.error);
       }
     };
-  }, []); // No dependencies - handler will always use current ref values
+  }, []);
 
   const [captionId, setCaptionId] = useState<string | null>(null);
   const [imageUrl, setImageUrl] = useState<string|null>(null);
@@ -114,7 +111,6 @@ export default function UploadPage() {
           setEpsg(mapData.epsg);
           setImageType(mapData.image_type);
           
-          // Generate caption for the existing map
           return fetch(`/api/images/${mapId}/caption`, { 
             method: 'POST',
             headers: {
@@ -122,7 +118,10 @@ export default function UploadPage() {
             },
             body: new URLSearchParams({
               title: 'Generated Caption',
-              prompt: 'Describe this crisis map in detail'
+              prompt: 'Describe this crisis map in detail',
+              ...(localStorage.getItem(SELECTED_MODEL_KEY) && {
+              model_name: localStorage.getItem(SELECTED_MODEL_KEY)!
+              })
             })
           });
         })
@@ -139,19 +138,6 @@ export default function UploadPage() {
     }
   }, [searchParams]);
 
-  // Handle navigation with confirmation
-  const handleNavigation = () => {
-    if (step === 2) {
-      if (confirm("Changes will not be saved. Do you want to delete the uploaded image?")) {
-        // Delete the uploaded image if user confirms
-        if (uploadedImageId) {
-          fetch(`/api/images/${uploadedImageId}`, { method: "DELETE" }).catch(console.error);
-        }
-        resetToStep1();
-      }
-    }
-  };
-
   const resetToStep1 = () => {
     setStep(1);
     setFile(null);
@@ -159,9 +145,9 @@ export default function UploadPage() {
     setImageUrl(null);
     setCaptionId(null);
     setDraft('');
+    setTitle('');
     setScores({ accuracy: 50, context: 50, usability: 50 });
     setUploadedImageId(null);
-    setUploadedCaptionId(null);
   }; 
   const [scores, setScores] = useState({  
     accuracy: 50,
@@ -169,6 +155,8 @@ export default function UploadPage() {
     usability: 50,
   });
 
+
+
   /* ---- drag-and-drop + file-picker handlers -------------------------- */
   const onDrop = useCallback((e: DragEvent<HTMLDivElement>) => {
     e.preventDefault();
@@ -211,6 +199,8 @@ export default function UploadPage() {
   async function handleGenerate() {
     if (!file) return;
 
+    setIsLoading(true);
+
     const fd = new FormData();
     fd.append('file', file);
     fd.append('source', source);
@@ -219,6 +209,11 @@ export default function UploadPage() {
     fd.append('image_type', imageType);
     countries.forEach((c) => fd.append('countries', c));
 
+    const modelName = localStorage.getItem(SELECTED_MODEL_KEY);
+    if (modelName) {
+    fd.append('model_name', modelName);
+    }
+
     try {
       /* 1) upload */
       const mapRes = await fetch('/api/images/', { method: 'POST', body: fd });
@@ -230,7 +225,7 @@ export default function UploadPage() {
       if (!mapIdVal) throw new Error('Upload failed: image_id not found');
       setUploadedImageId(mapIdVal);
     
-      /* 2) caption */
+      /* 2) caption */     
       const capRes = await fetch(
         `/api/images/${mapIdVal}/caption`, 
         { 
@@ -239,22 +234,39 @@ export default function UploadPage() {
             'Content-Type': 'application/x-www-form-urlencoded',
           },
           body: new URLSearchParams({
-            title: 'Generated Caption',
-            prompt: 'Describe this crisis map in detail'
+            title: title || 'Generated Caption',
+            prompt: 'Analyze this crisis map and provide a detailed description of the emergency situation, affected areas, and key information shown in the map.',
+            ...(modelName      && { model_name: modelName })
           })
         },
       );
       const capJson = await readJsonSafely(capRes);
       if (!capRes.ok) throw new Error(capJson.error || 'Caption failed');
       setCaptionId(capJson.cap_id);
-      setUploadedCaptionId(capJson.cap_id);
       console.log(capJson);
 
-      /* 3) continue workflow */
+      /* 3) Extract and apply metadata from AI response */
+      const extractedMetadata = capJson.raw_json?.extracted_metadata;
+      if (extractedMetadata) {
+        console.log('Extracted metadata:', extractedMetadata);
+        
+        // Apply AI-extracted metadata to form fields
+        if (extractedMetadata.title) setTitle(extractedMetadata.title);
+        if (extractedMetadata.source) setSource(extractedMetadata.source);
+        if (extractedMetadata.type) setType(extractedMetadata.type);
+        if (extractedMetadata.epsg) setEpsg(extractedMetadata.epsg);
+        if (extractedMetadata.countries && Array.isArray(extractedMetadata.countries)) {
+          setCountries(extractedMetadata.countries);
+        }
+      }
+
+      /* 4) continue workflow */
       setDraft(capJson.generated);
       setStep(2);
     } catch (err) {
       handleApiError(err, 'Upload');
+    } finally {
+      setIsLoading(false);
     }
   }
 
@@ -281,6 +293,7 @@ export default function UploadPage() {
       
       // 2. Update caption
       const captionBody = {
+        title: title,
         edited: draft || '', // Use draft if available, otherwise empty string
         accuracy: scores.accuracy,
         context: scores.context,
@@ -296,7 +309,6 @@ export default function UploadPage() {
       
       // Clear uploaded IDs since submission was successful
       setUploadedImageId(null);
-      setUploadedCaptionId(null);
       setStep(3);
     } catch (err) {
       handleApiError(err, 'Submit');
@@ -330,70 +342,94 @@ export default function UploadPage() {
   /* ------------------------------------------------------------------- */
   return (
     <PageContainer>
-      <div
-        className="mx-auto max-w-screen-lg text-center px-2 sm:px-4 py-6 sm:py-10 overflow-x-hidden"
-        data-step={step}
-      >
-        {/* Title & intro copy */}
-        {step === 1 && <>
-          <Heading level={2}>Upload Your Crisis Map</Heading>
-          <p className="mt-3 text-gray-700 leading-relaxed">
-            This app evaluates how well multimodal AI models turn emergency maps
-            into meaningful text. Upload your map, let the AI generate a
-            description, then review and rate the result based on your expertise.
-          </p>
-          {/* “More »” link  */}
-          <div className="mt-2 flex justify-center">
-            <Link
-              to="/help"
-              className="text-ifrcRed text-xs hover:underline flex items-center gap-1"
-            >
-              More <ArrowRightLineIcon className="w-3 h-3" />
-            </Link>
-          </div>
-        </>}
-
-
-
+      <div className="mx-auto max-w-screen-lg text-center px-4 sm:px-6 lg:px-8 py-6 sm:py-10 overflow-x-hidden" data-step={step}>
         {/* Drop-zone */}
         {step === 1 && (
-          <div
-            className="mt-6 sm:mt-10 border-2 border-dashed border-gray-300 bg-gray-50 rounded-xl py-12 px-8 flex flex-col items-center gap-6 hover:bg-gray-100 transition-colors max-w-md mx-auto min-h-[300px] justify-center"
-            onDragOver={(e) => e.preventDefault()}
-            onDrop={onDrop}
+          <Container
+            heading="Upload Your Image"
+            headingLevel={2}
+            withHeaderBorder
+            withInternalPadding
+            headingClassName="text-center"
           >
-            <UploadCloudLineIcon className="w-10 h-10 text-ifrcRed" />
-
-            {file ? (
-              <p className="text-sm font-medium text-gray-800">
-                Selected file: {file.name}
+            <div className="space-y-6">
+              <p className="text-gray-700 leading-relaxed max-w-2xl mx-auto">
+                This app evaluates how well multimodal AI models turn emergency maps
+                into meaningful text. Upload your map, let the AI generate a
+                description, then review and rate the result based on your expertise.
               </p>
-            ) : (
-              <p className="text-sm text-gray-600">Drag &amp; Drop a file here</p>
-            )}
-            
-            {/* File-picker button - always visible */}
-            <label className="inline-block cursor-pointer">
-              <input
-                type="file"
-                accept="image/*"
-                className="sr-only"
-                onChange={e => onFileChange(e.target.files?.[0], "file")}
-              />
-              <Button 
-                name="upload" 
-                size={1}
-                onClick={() => (document.querySelector('input[type="file"]') as HTMLInputElement)?.click()}
+              
+              {/* "More »" link  */}
+              <div className="flex justify-center">
+                <Link
+                  to="/help"
+                  className="text-red-600 text-xs hover:text-red-700 hover:underline flex items-center gap-1"
+                >
+                  More <ArrowRightLineIcon className="w-3 h-3" />
+                </Link>
+              </div>
+              
+              <div
+                className={`border-2 border-dashed border-gray-300 bg-gray-50 rounded-xl py-8 sm:py-12 px-4 sm:px-8 flex flex-col items-center gap-4 sm:gap-6 hover:bg-gray-100 transition-colors max-w-sm sm:max-w-md lg:max-w-lg mx-auto min-h-[250px] sm:min-h-[300px] justify-center ${
+                  file ? 'bg-white' : ''
+                }`}
+                onDragOver={(e) => e.preventDefault()}
+                onDrop={onDrop}
               >
-                {file ? 'Change File' : 'Upload'}
-              </Button>
-            </label>
+                {file && preview ? (
+                  <div className="w-full max-w-full">
+                    <div className="relative w-1/2 mx-auto max-h-32 overflow-hidden rounded-lg bg-gray-100">
+                      <img
+                        src={preview}
+                        alt="File preview"
+                        className="w-full h-full object-contain"
+                      />
+                    </div>
+                    <p className="text-sm font-medium text-gray-800 mt-2 text-center">
+                      {file.name}
+                    </p>
+                  </div>
+                ) : (
+                  <>
+                    <UploadCloudLineIcon className="w-10 h-10 text-ifrcRed" />
+                    <p className="text-sm text-gray-600">Drag &amp; Drop a file here</p>
+                    <p className="text-sm text-gray-500 my-4">or</p>
+                  </>
+                )}
+              
+              {/* File-picker button - always visible */}
+              <label className="inline-block cursor-pointer">
+                <input
+                  type="file"
+                  accept="image/*"
+                  className="sr-only"
+                  onChange={e => onFileChange(e.target.files?.[0], "file")}
+                />
+                <Button 
+                  name="upload" 
+                  variant="secondary"
+                  size={1}
+                  onClick={() => (document.querySelector('input[type="file"]') as HTMLInputElement)?.click()}
+                >
+                  {file ? 'Change File' : 'Browse Device'}
+                </Button>
+              </label>
+              </div>
+            </div>
+          </Container>
+        )}
+
+        {/* Loading state */}
+        {isLoading && (
+          <div className="flex flex-col items-center justify-center gap-4 mt-12">
+            <Spinner className="text-ifrcRed" />
+            <p className="text-gray-600">Generating caption...</p>
           </div>
         )}
 
         {/* Generate button */}
-        {step === 1 && (
-          <div className="flex justify-center mt-12">
+        {step === 1 && !isLoading && (
+          <div className="flex flex-col items-center justify-center gap-4 mt-12">
             <Button
               name="generate"
               disabled={!file}
@@ -404,143 +440,181 @@ export default function UploadPage() {
           </div>
         )}
 
-{step === 2 && imageUrl && (
-  <div className="mt-6 flex justify-center">
-    <div className="w-full max-w-screen-lg max-h-80 overflow-hidden bg-red-50">
-             <img
-         src={preview || undefined}
-         alt="Uploaded map preview"
-         className="w-full h-full object-contain rounded shadow"
-       />
-    </div>
-  </div>
-)}
-
-{step === 2 && (
-  <div className="space-y-10">
-    {/* ────── METADATA FORM ────── */}
-    <div className="grid gap-4 text-left grid-cols-1 lg:grid-cols-2">
-      <SelectInput
-        label="Source"
-        name="source"
-        value={source}
-        onChange={handleSourceChange}
-        options={sources}
-        keySelector={(o) => o.s_code}
-        labelSelector={(o) => o.label}
-        required
-      />
-      <SelectInput
-        label="Type"
-        name="type"
-        value={type}
-        onChange={handleTypeChange}
-        options={types}
-        keySelector={(o) => o.t_code}
-        labelSelector={(o) => o.label}
-        required
-      />
-      <SelectInput
-        label="EPSG"
-        name="epsg"
-        value={epsg}
-        onChange={handleEpsgChange}
-        options={spatialReferences}
-        keySelector={(o) => o.epsg}
-        labelSelector={(o) => `${o.srid} (EPSG:${o.epsg})`}
-        required
-      />
-      <SelectInput
-        label="Image Type"
-        name="image_type"
-        value={imageType}
-        onChange={handleImageTypeChange}
-        options={imageTypes}
-        keySelector={(o) => o.image_type}
-        labelSelector={(o) => o.label}
-        required
-      />
-      <MultiSelectInput
-        label="Countries (optional)"
-        name="countries"
-        value={countries}
-        onChange={handleCountriesChange}
-        options={countriesOptions}
-        keySelector={(o) => o.c_code}
-        labelSelector={(o) => o.label}
-        placeholder="Select one or more"
-      />
-    </div>
-
-    {/* ────── RATING SLIDERS ────── */}
-    <div className="text-left">
-      <Heading level={3}>How well did the AI perform on the task?</Heading>
-      {(['accuracy', 'context', 'usability'] as const).map((k) => (
-        <div key={k} className="mt-6 flex items-center gap-2 sm:gap-4">
-          <label className="block text-sm font-medium capitalize w-20 sm:w-28 flex-shrink-0">{k}</label>
-          <input
-            type="range"
-            min={0}
-            max={100}
-            value={scores[k]}
-            onChange={(e) =>
-              setScores((s) => ({ ...s, [k]: Number(e.target.value) }))
-            }
-            className="w-full accent-ifrcRed"
-          />
-          <span className="ml-2 w-8 sm:w-10 text-right tabular-nums flex-shrink-0">{scores[k]}</span>
-        </div>
-      ))}
-    </div>
-
-    {/* ────── AI‑GENERATED CAPTION ────── */}
-    <div className="text-left">
-      <Heading level={3}>AI‑Generated Caption</Heading>
-      <textarea
-        className="w-full border rounded p-2 sm:p-3 font-mono mt-2"
-        rows={5}
-        value={draft}
-        onChange={(e) => setDraft(e.target.value)}
-      />
-    </div>
-
-    {/* ────── SUBMIT BUTTON ────── */}
-    <div className="flex justify-center gap-4 mt-10">
-      <Button
-        name="delete"
-        variant="secondary"
-        onClick={handleDelete}
-      >
-        Delete
-      </Button>
-      <Button
-        name="submit"
-        onClick={handleSubmit}
-      >
-        Submit
-      </Button>
-    </div>
-          </div>
-      )}
-
-      {/* Success page */}
-      {step === 3 && (
-        <div className="text-center space-y-6">
-          <Heading level={2}>Saved!</Heading>
-          <p className="text-gray-700">Your caption has been successfully saved.</p>
-          <div className="flex justify-center mt-6">
-            <Button
-              name="upload-another"
-              onClick={resetToStep1}
+        {step === 2 && imageUrl && (
+          <Container
+            heading="Uploaded Map"
+            headingLevel={3}
+            withHeaderBorder
+            withInternalPadding
+          >
+            <div className="flex justify-center">
+              <div className="w-full max-w-screen-lg max-h-80 overflow-hidden bg-red-50">
+                <img
+                  src={preview || undefined}
+                  alt="Uploaded map preview"
+                  className="w-full h-full object-contain rounded shadow"
+                />
+              </div>
+            </div>
+          </Container>
+        )}
+
+        {step === 2 && (
+          <div className="space-y-6">
+            {/* ────── METADATA FORM ────── */}
+            <Container
+              heading="Map Metadata"
+              headingLevel={3}
+              withHeaderBorder
+              withInternalPadding
             >
-              Upload Another
-            </Button>
+              <div className="grid gap-4 text-left grid-cols-1 lg:grid-cols-2">
+              <div className="lg:col-span-2">
+                <TextInput
+                  label="Title"
+                  name="title"
+                  value={title}
+                  onChange={(value) => setTitle(value || '')}
+                  placeholder="Enter a title for this map..."
+                  required
+                />
+              </div>
+              <SelectInput
+                label="Source"
+                name="source"
+                value={source}
+                onChange={handleSourceChange}
+                options={sources}
+                keySelector={(o) => o.s_code}
+                labelSelector={(o) => o.label}
+                required
+              />
+              <SelectInput
+                label="Type"
+                name="type"
+                value={type}
+                onChange={handleTypeChange}
+                options={types}
+                keySelector={(o) => o.t_code}
+                labelSelector={(o) => o.label}
+                required
+              />
+              <SelectInput
+                label="EPSG"
+                name="epsg"
+                value={epsg}
+                onChange={handleEpsgChange}
+                options={spatialReferences}
+                keySelector={(o) => o.epsg}
+                labelSelector={(o) => `${o.srid} (EPSG:${o.epsg})`}
+                required
+              />
+              <SelectInput
+                label="Image Type"
+                name="image_type"
+                value={imageType}
+                onChange={handleImageTypeChange}
+                options={imageTypes}
+                keySelector={(o) => o.image_type}
+                labelSelector={(o) => o.label}
+                required
+              />
+              <MultiSelectInput
+                label="Countries (optional)"
+                name="countries"
+                value={countries}
+                onChange={handleCountriesChange}
+                options={countriesOptions}
+                keySelector={(o) => o.c_code}
+                labelSelector={(o) => o.label}
+                placeholder="Select one or more"
+              />
+            </div>
+            </Container>
+
+            {/* ────── RATING SLIDERS ────── */}
+            <Container
+              heading="AI Performance Rating"
+              headingLevel={3}
+              withHeaderBorder
+              withInternalPadding
+            >
+              <div className="text-left">
+                <p className="text-gray-700 mb-4">How well did the AI perform on the task?</p>
+                {(['accuracy', 'context', 'usability'] as const).map((k) => (
+                  <div key={k} className="mt-6 flex items-center gap-2 sm:gap-4">
+                    <label className="block text-sm font-medium capitalize w-20 sm:w-28 flex-shrink-0">{k}</label>
+                    <input
+                      type="range"
+                      min={0}
+                      max={100}
+                      value={scores[k]}
+                      onChange={(e) =>
+                        setScores((s) => ({ ...s, [k]: Number(e.target.value) }))
+                      }
+                      className="w-full accent-ifrcRed"
+                    />
+                    <span className="ml-2 w-8 sm:w-10 text-right tabular-nums flex-shrink-0">{scores[k]}</span>
+                  </div>
+                ))}
+              </div>
+            </Container>
+
+            {/* ────── AI‑GENERATED CAPTION ────── */}
+            <Container
+              heading="AI‑Generated Caption"
+              headingLevel={3}
+              withHeaderBorder
+              withInternalPadding
+            >
+              <div className="text-left">
+                <TextArea
+                  name="caption"
+                  value={draft}
+                  onChange={(value) => setDraft(value || '')}
+                  rows={5}
+                  placeholder="AI-generated caption will appear here..."
+                />
+              </div>
+            </Container>
+
+            {/* ────── SUBMIT BUTTON ────── */}
+            <div className="flex justify-center gap-4 mt-10">
+              <IconButton
+                name="delete"
+                variant="tertiary"
+                onClick={handleDelete}
+                title="Delete"
+                ariaLabel="Delete uploaded image"
+              >
+                <DeleteBinLineIcon />
+              </IconButton>
+              <Button
+                name="submit"
+                onClick={handleSubmit}
+              >
+                Submit
+              </Button>
+            </div>
           </div>
-        </div>
-      )}
-      
-      
-    </div>
-  </PageContainer>
-);
+        )}
+
+        {/* Success page */}
+        {step === 3 && (
+          <div className="text-center space-y-6">
+            <Heading level={2}>Saved!</Heading>
+            <p className="text-gray-700">Your caption has been successfully saved.</p>
+            <div className="flex justify-center mt-6">
+              <Button
+                name="upload-another"
+                onClick={resetToStep1}
+              >
+                Upload Another
+              </Button>
+            </div>
+          </div>
+        )}
+      </div>
+    </PageContainer>
+  );
 }

go-web-app-develop/.changeset/README.md

@@ -0,0 +1,8 @@
+# Changesets
+
+Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
+with multi-package repos, or single-package repos to help you version and publish your code. You can
+find the full documentation for it [in our repository](https://github.com/changesets/changesets)
+
+We have a quick list of common questions to get you started engaging with this project in
+[our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md)

go-web-app-develop/.changeset/config.json

@@ -0,0 +1,15 @@
+{
+    "$schema": "https://unpkg.com/@changesets/config@3.0.0/schema.json",
+    "changelog": "@changesets/cli/changelog",
+    "commit": false,
+    "fixed": [],
+    "linked": [],
+    "access": "public",
+    "baseBranch": "develop",
+    "updateInternalDependencies": "patch",
+    "ignore": [],
+    "privatePackages": {
+        "version": true,
+        "tag": true
+    }
+}

go-web-app-develop/.changeset/lovely-kids-boil.md

@@ -0,0 +1,5 @@
+---
+"go-web-app": patch
+---
+
+Fix use of operational timeframe date in imminent final report form

go-web-app-develop/.changeset/pre.json

@@ -0,0 +1,15 @@
+{
+  "mode": "pre",
+  "tag": "beta",
+  "initialVersions": {
+    "go-web-app": "7.20.2",
+    "go-ui-storybook": "1.0.7",
+    "@ifrc-go/ui": "1.5.1"
+  },
+  "changesets": [
+    "lovely-kids-boil",
+    "solid-clubs-care",
+    "sweet-gifts-cheer",
+    "whole-lions-guess"
+  ]
+}

go-web-app-develop/.changeset/solid-clubs-care.md

@@ -0,0 +1,8 @@
+---
+"go-web-app": minor
+---
+
+Add Crisis categorization update date
+
+- Add updated date for crisis categorization in emergency page.
+- Add consent checkbox over situational overview in field report form.

go-web-app-develop/.changeset/sweet-gifts-cheer.md

@@ -0,0 +1,9 @@
+---
+"go-web-app": minor
+---
+
+Add support for DREF imminent v2 in final report
+
+- Add a separate route for the old dref final report form
+- Update dref final report to accomodate imminent v2 changes
+

go-web-app-develop/.changeset/whole-lions-guess.md

@@ -0,0 +1,7 @@
+---
+"go-web-app": patch
+---
+
+- Fix calculation of Operation End date in Final report form
+- Fix icon position issue in the implementation table of DREF PDF export
+- Update the label for last update date in the crisis categorization pop-up

go-web-app-develop/.dockerignore

@@ -0,0 +1,148 @@
+# Swap files
+*.swp
+
+# Byte-compiled / optimized / DLL files
+__pycache__
+*.py[cod]
+*$py.class
+
+# C extensions
+*.so
+
+# Distribution / packaging
+.Python
+env
+build
+develop-eggs
+dist
+downloads
+eggs
+.eggs
+lib
+lib64
+parts
+sdist
+var
+*.egg-info
+.installed.cfg
+*.egg
+
+# PyInstaller
+#  Usually these files are written by a python script from a template
+#  before PyInstaller builds the exe, so as to inject date/other infos into it.
+*.manifest
+*.spec
+
+# Installer logs
+pip-log.txt
+pip-delete-this-directory.txt
+
+# Unit test / coverage reports
+htmlcov
+.tox
+.coverage
+.coverage.*
+.cache
+nosetests.xml
+coverage.xml
+*,cover
+.hypothesis
+
+# Translations
+*.mo
+*.pot
+
+# Django stuff:
+*.log
+
+# Sphinx documentation
+docs/_build
+
+# PyBuilder
+target
+
+#Ipython Notebook
+.ipynb_checkpoints
+
+# SASS cache
+.sass-cache
+media_test
+
+# Rope project settings
+.ropeproject
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules
+jspm_packages
+
+# Typescript v1 declaration files
+typings
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env*
+
+# Sensitive Deploy Files
+deploy/eb/
+
+# tox
+./.tox
+
+# Helm
+.helm-charts/
+
+# Docker
+Dockerfile
+.dockerignore
+
+# git
+.gitignore

go-web-app-develop/.github/ISSUE_TEMPLATE/01_bug_report.yml

@@ -0,0 +1,92 @@
+name: "Bug Report"
+description: "Report a technical or visual issue."
+labels: ["type: bug"]
+type: "Bug"
+body:
+  - type: markdown
+    attributes:
+      value: |
+        **Bug Report**
+        Please fill out the form below with as much detail as possible.
+        If the issue is visual, screenshots or videos are greatly appreciated.
+        **Please review [our guide on reporting bugs](https://github.com/IFRCGo/go-web-app/blob/develop/CONTRIBUTING.md#reporting-bugs) before opening a new issue.**
+
+  - type: input
+    attributes:
+      label: "Page URL"
+      description: "The URL of the page where you encountered the issue."
+      placeholder: "https://go.ifrc.org/"
+    validations:
+      required: true
+
+  - type: dropdown
+    attributes:
+      label: "Environment"
+      description: "Please select the environment where the bug occurred."
+      options:
+        - "Alpha"
+        - "Staging"
+        - "Production"
+    validations:
+      required: true
+
+  - type: input
+    attributes:
+      label: "Browser"
+      description: "Which browser are you using? (e.g., Chrome, Firefox, Safari)"
+      placeholder: "Chrome"
+    validations:
+      required: true
+
+  - type: textarea
+    attributes:
+      label: "Steps to Reproduce the Issue"
+      description: |
+        Please describe the issue in detail, including:
+        1. What actions led to the issue?
+        2. If possible, attach screenshots or videos demonstrating the problem.
+      placeholder: |
+        1. I clicked on...
+        2. [Attach screenshots/videos if available]
+    validations:
+      required: true
+
+  - type: textarea
+    attributes:
+      label: "Expected Behavior"
+      description: "Describe what you expected to happen."
+      placeholder: "I expected the page to..."
+    validations:
+      required: true
+
+  - type: textarea
+    attributes:
+      label: "Actual Behavior"
+      description: "Describe what actually happened, including any error messages."
+      placeholder: "Instead, I saw..."
+    validations:
+      required: true
+
+  - type: dropdown
+    attributes:
+      label: "Priority"
+      description: "How urgent is this issue?"
+      options:
+        - "Low (Minor inconvenience)"
+        - "Medium (Affects functionality, but there is a workaround)"
+        - "High (Major functionality is broken)"
+        - "Critical (Site is unusable)"
+    validations:
+      required: false
+
+  - type: textarea
+    attributes:
+      label: "Additional Context (Optional)"
+      description: |
+        Provide any extra details, such as:
+        - Related links.
+        - Previous occurrences of this issue.
+        - Workarounds you have tried.
+      placeholder: "This issue also happened on [link]."
+    validations:
+      required: false

go-web-app-develop/.github/ISSUE_TEMPLATE/02_feature_request.yml

@@ -0,0 +1,39 @@
+name: "Feature Request"
+description: "Suggest a new idea or enhancement."
+labels: ["type: feature-request"]
+type: "Feature"
+body:
+  - type: markdown
+    attributes:
+      value: |
+        **Feature Request**
+        Thank you for suggesting a new feature!
+        Please provide as much detail as possible to help us understand and evaluate your idea.
+        **Please review [our guide on suggesting enhancements](https://github.com/IFRCGo/go-web-app/blob/develop/CONTRIBUTING.md#suggesting-enhancements).**
+
+  - type: textarea
+    attributes:
+      label: "Feature Description"
+      description: |
+        Describe your feature request in detail, including:
+        - What the feature is.
+        - Why it is needed and how it will improve the project.
+        - How it will benefit users (e.g., As a user, I want to [do something] so that [desired outcome].).
+      placeholder: "As a user, I want to filter search results by date so that I can quickly find recent information."
+    validations:
+      required: true
+
+  - type: textarea
+    attributes:
+      label: "Additional Context"
+      description: |
+        Provide any extra details or supporting information, such as:
+        - Links to references or related resources.
+        - Examples from other projects or systems.
+        - Screenshots, mockups, or diagrams.
+        *Tip: You can attach files by clicking here and dragging them in.*
+      placeholder: |
+        Here's a link to a similar feature in another project: [link].
+        I've also attached a mockup of what this could look like.
+    validations:
+      required: false

go-web-app-develop/.github/ISSUE_TEMPLATE/03_epic_request.yml

@@ -0,0 +1,37 @@
+name: "Epic"
+description: "Track a larger initiative with multiple related tasks and deliverables."
+labels: ["type: epic"]
+type: "Feature"
+body:
+  - type: markdown
+    attributes:
+      value: |
+        **Epic**
+        Use this to define a large, overarching initiative.
+        **Please review [our guide on suggesting enhancements](https://github.com/IFRCGo/go-web-app/blob/develop/CONTRIBUTING.md#suggesting-enhancements).**
+
+  - type: textarea
+    attributes:
+      label: "Epic Summary"
+      description: |
+        Provide a clear and concise summary of the epic.
+        - What is this epic about?
+        - What problem does it solve or what goal does it achieve?
+        - How does it align with the project’s objectives?
+      placeholder: |
+        Example:
+        This epic focuses on implementing a new feature.
+    validations:
+      required: true
+
+  - type: textarea
+    attributes:
+      label: "Additional Context or Resources"
+      description: "Provide any additional information, links, or resources that will help the team understand and execute this epic."
+      placeholder: |
+        Examples:
+        - Link to design mockups: [link]
+        - Technical specs document: [link]
+        - Reference to similar features: [link]
+    validations:
+      required: false

go-web-app-develop/.github/ISSUE_TEMPLATE/config.yml

@@ -0,0 +1,5 @@
+blank_issues_enabled: true
+contact_links:
+  - name: Documentation
+    url: https://go-wiki.ifrc.org/en/home
+    about: Please consult the wiki to know more about IFRC GO.

go-web-app-develop/.github/dependabot.yml

@@ -0,0 +1,27 @@
+version: 2
+updates:
+  - package-ecosystem: npm
+    directory: /
+    schedule:
+      interval: weekly
+    groups:
+      eslint:
+        patterns:
+          - "*eslint*"
+      vite:
+        patterns:
+          - "*vite*"
+      postcss:
+        patterns:
+          - "*postcss*"
+      stylelint:
+        patterns:
+          - "*stylelint*"
+      all-other-dependencies:
+        patterns:
+          - "*"
+        exclude-patterns:
+          - "*eslint*"
+          - "*vite*"
+          - "*postcss*"
+          - "*stylelint*"

go-web-app-develop/.github/pull_request_template.md

@@ -0,0 +1,30 @@
+## Summary
+
+Provide a brief description of what this PR addresses and its purpose.
+
+## Addresses
+
+* Issue(s): *List related issues or tickets.*
+
+## Depends On
+
+* Other PRs or Dependencies: *List PRs or dependencies this PR relies on.*
+
+## Changes
+
+* Detailed list or prose of changes
+* Breaking changes
+* Changes to configurations
+
+## This PR Ensures:
+
+* \[ ] No typos or grammatical errors
+* \[ ] No conflict markers left in the code
+* \[ ] No unwanted comments, temporary files, or auto-generated files
+* \[ ] No inclusion of secret keys or sensitive data
+* \[ ] No `console.log` statements meant for debugging
+* \[ ] All CI checks have passed
+
+## Additional Notes
+
+*Optional: Add any other relevant context, screenshots, or details here.*

go-web-app-develop/.github/workflows/add-issue-to-backlog.yml

@@ -0,0 +1,16 @@
+name: Add issues to Backlog
+
+on:
+  issues:
+    types:
+      - opened
+
+jobs:
+  add-to-project:
+    name: Add issue to project
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/add-to-project@v0.4.0
+        with:
+          project-url: https://github.com/orgs/IFRCGo/projects/12
+          github-token: ${{ secrets.ADD_TO_PROJECT_PAT }}

go-web-app-develop/.github/workflows/chromatic.yml

@@ -0,0 +1,127 @@
+name: 'Chromatic'
+
+on:
+  pull_request:
+  push:
+    branches:
+      - develop
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}-chromatic
+  cancel-in-progress: true
+
+permissions:
+  actions: write
+  contents: read
+  pages: write
+  id-token: write
+
+jobs:
+  changed-files:
+    name: Check for changed files
+    runs-on: ubuntu-latest
+    outputs:
+      all_changed_files: ${{ steps.changed-files.outputs.all_changed_files }}
+      any_changed: ${{ steps.changed-files.outputs.any_changed }}
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+      - name: Get changed files
+        id: changed-files
+        uses: tj-actions/changed-files@v44
+        with:
+          files: |
+            packages/ui/**
+            packages/go-ui-storybook/**
+  ui:
+    name: Build UI Library
+    environment: 'test'
+    runs-on: ubuntu-latest
+    needs: [changed-files]
+    if: ${{ needs.changed-files.outputs.any_changed == 'true' }}
+    defaults:
+      run:
+        working-directory: packages/ui
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+      - name: Install Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'pnpm'
+      - name: Install dependencies
+        run: pnpm install
+      - name: Typecheck
+        run: pnpm typecheck
+      - name: Lint CSS
+        run: pnpm lint:css
+      - name: Lint JS
+        run: pnpm lint:js
+      - name: build  UI library
+        run: pnpm build
+      - uses: actions/upload-artifact@v4
+        with:
+          name: ui-build
+          path: packages/ui/dist
+  chromatic:
+    name: Chromatic Deploy
+    runs-on: ubuntu-latest
+    needs: [ui]
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+      - name: Install Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'pnpm'
+      - name: Install dependencies
+        run: pnpm install
+      - uses: actions/download-artifact@v4
+        with:
+          name: ui-build
+          path: packages/ui/dist
+      - name: Run Chromatic
+        uses: chromaui/action@v1
+        with:
+          exitZeroOnChanges: true
+          exitOnceUploaded: true
+          onlyChanged: true
+          skip: "@(renovate/**|dependabot/**)"
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+          token: ${{ secrets.GITHUB_TOKEN }}
+          autoAcceptChanges: "develop"
+          workingDir: packages/go-ui-storybook
+  github-pages:
+    name: Deploy to Github Pages
+    runs-on: ubuntu-latest
+    needs: [ui]
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+      - name: Install Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'pnpm'
+      - uses: actions/download-artifact@v4
+        with:
+          name: ui-build
+          path: packages/ui/dist
+      - uses: bitovi/github-actions-storybook-to-github-pages@v1.0.3
+        with:
+          install_command: pnpm install
+          build_command: pnpm build-storybook
+          path: packages/go-ui-storybook/storybook-static
+          checkout: false

go-web-app-develop/.github/workflows/ci.yml

@@ -0,0 +1,304 @@
+name: CI
+
+on:
+  pull_request:
+  push:
+    branches:
+      - 'develop'
+
+env:
+  APP_ADMIN_URL: ${{ vars.APP_ADMIN_URL }}
+  APP_API_ENDPOINT: ${{ vars.APP_API_ENDPOINT }}
+  APP_ENVIRONMENT: ${{ vars.APP_ENVIRONMENT }}
+  APP_MAPBOX_ACCESS_TOKEN: ${{ vars.APP_MAPBOX_ACCESS_TOKEN }}
+  APP_RISK_ADMIN_URL: ${{ vars.APP_RISK_ADMIN_URL }}
+  APP_RISK_API_ENDPOINT: ${{ vars.APP_RISK_API_ENDPOINT }}
+  APP_SENTRY_DSN: ${{ vars.APP_SENTRY_DSN }}
+  APP_SENTRY_NORMALIZE_DEPTH: ${{ vars.APP_SENTRY_NORMALIZE_DEPTH }}
+  APP_SENTRY_TRACES_SAMPLE_RATE: ${{ vars.APP_SENTRY_TRACES_SAMPLE_RATE }}
+  APP_SHOW_ENV_BANNER: ${{ vars.APP_SHOW_ENV_BANNER }}
+  APP_TINY_API_KEY: ${{ vars.APP_TINY_API_KEY }}
+  APP_TITLE: ${{ vars.APP_TITLE }}
+  GITHUB_WORKFLOW: true
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  ui:
+    name: Build UI Library
+    environment: 'test'
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: packages/ui
+    steps:
+      - uses: actions/checkout@v4
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+      - name: Install Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'pnpm'
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Typecheck
+        run: pnpm typecheck
+
+      - name: Lint CSS
+        run: pnpm lint:css
+
+      - name: Lint JS
+        run: pnpm lint:js
+
+      - name: Build
+        run: pnpm build
+
+      - uses: actions/upload-artifact@v4
+        with:
+          name: ui-build
+          path: packages/ui/dist
+
+  test:
+    name: Run tests
+    environment: 'test'
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: app
+    needs: [ui]
+    steps:
+      - uses: actions/checkout@v4
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+      - name: Install Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'pnpm'
+      - name: Install dependencies
+        run: pnpm install
+
+      - uses: actions/download-artifact@v4
+        with:
+          name: ui-build
+          path: packages/ui/dist
+
+      - name: Run test
+        run: pnpm test
+
+  translation:
+    continue-on-error: true
+    name: Identify error with translation files
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: app
+    needs: [ui]
+    steps:
+      - uses: actions/checkout@v4
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+      - name: Install Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'pnpm'
+      - name: Install dependencies
+        run: pnpm install
+
+      - uses: actions/download-artifact@v4
+        with:
+          name: ui-build
+          path: packages/ui/dist
+
+      - name: Identify error with translation files
+        run: pnpm lint:translation
+
+  translation-migrations:
+    if: |
+      (github.event_name == 'pull_request' && github.base_ref == 'develop') ||
+      (github.event_name == 'push' && github.ref == 'refs/heads/develop')
+    continue-on-error: true
+    name: Identify if translation migrations need to be generated
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: app
+    needs: [ui]
+    steps:
+      - uses: actions/checkout@v4
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+      - name: Install Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'pnpm'
+      - name: Install dependencies
+        run: pnpm install
+
+      - uses: actions/download-artifact@v4
+        with:
+          name: ui-build
+          path: packages/ui/dist
+
+      - name: Identify if translation migrations need to be generated
+        run: |
+          if pnpm translatte:generate; then
+            # The step should fail if generation is possible
+            exit 1
+          fi
+
+  unused:
+    name: Identify unused files
+    runs-on: ubuntu-latest
+    needs: [ui]
+    steps:
+      - uses: actions/checkout@v4
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+      - name: Install Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'pnpm'
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Initialize types
+        run: pnpm initialize:type
+        working-directory: app
+
+      - name: Identify unused files
+        run: pnpm lint:unused
+
+  lint:
+    name: Lint JS
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: app
+    needs: [ui]
+    steps:
+      - uses: actions/checkout@v4
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+      - name: Install Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'pnpm'
+      - name: Install dependencies
+        run: pnpm install
+
+      - uses: actions/download-artifact@v4
+        with:
+          name: ui-build
+          path: packages/ui/dist
+
+      - name: Lint JS
+        run: pnpm lint:js
+
+  lint-css:
+    name: Lint CSS
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: app
+    needs: [ui]
+    steps:
+      - uses: actions/checkout@v4
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+      - name: Install Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'pnpm'
+      - name: Install dependencies
+        run: pnpm install
+
+      - uses: actions/download-artifact@v4
+        with:
+          name: ui-build
+          path: packages/ui/dist
+
+      - name: Lint CSS
+        run: pnpm lint:css
+
+  # FIXME: Identify a way to generate schema before we run typecheck
+  # typecheck:
+  #   name: Typecheck
+  #   runs-on: ubuntu-latest
+  #   steps:
+  #     - uses: actions/checkout@v4
+  #     - name: Install pnpm
+  #       uses: pnpm/action-setup@v4
+  #     - name: Install Node.js
+  #       uses: actions/setup-node@v4
+  #       with:
+  #         node-version: 20
+  #         cache: 'pnpm'
+  #     - name: Install dependencies
+  #       run: pnpm install
+  #
+  #     - name: Typecheck
+  #       run: pnpm typecheck
+
+  typos:
+    name: Spell Check with Typos
+    runs-on: ubuntu-latest
+    steps:
+    - name: Checkout Actions Repository
+      uses: actions/checkout@v4
+
+    - name: Check spelling
+      uses: crate-ci/typos@v1.29.4
+
+  build:
+    name: Build GO Web App
+    environment: 'test'
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: app
+    needs: [lint, lint-css, test, ui]
+    steps:
+      - uses: actions/checkout@v4
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+      - name: Install Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'pnpm'
+      - name: Install dependencies
+        run: pnpm install
+
+      - uses: actions/download-artifact@v4
+        with:
+          name: ui-build
+          path: packages/ui/dist
+
+      - name: Build
+        run: pnpm build
+
+  validate_helm:
+    name: Validate Helm
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@main
+
+      - name: Install Helm
+        uses: azure/setup-helm@v4
+
+      - name: Helm lint
+        run: helm lint ./nginx-serve/helm --values ./nginx-serve/helm/values-test.yaml
+
+      - name: Helm template
+        run: helm template ./nginx-serve/helm --values ./nginx-serve/helm/values-test.yaml

go-web-app-develop/.github/workflows/publish-nginx-serve.yml

@@ -0,0 +1,147 @@
+name: Publish Helm
+
+on:
+  workflow_dispatch:
+  push:
+    branches:
+      - develop
+      - project/*
+
+permissions:
+  packages: write
+
+
+jobs:
+  publish_image:
+    name: Publish Docker Image
+    runs-on: ubuntu-latest
+
+    outputs:
+      docker_image_name: ${{ steps.prep.outputs.tagged_image_name }}
+      docker_image_tag: ${{ steps.prep.outputs.tag }}
+      docker_image: ${{ steps.prep.outputs.tagged_image }}
+
+    steps:
+      - uses: actions/checkout@main
+
+      - name: Login to GitHub Container Registry
+        uses: docker/login-action@v3
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: 🐳 Prepare Docker
+        id: prep
+        env:
+          IMAGE_NAME: ghcr.io/${{ github.repository }}
+        run: |
+          BRANCH_NAME=$(echo $GITHUB_REF_NAME | sed 's|[/:]|-|' | tr '[:upper:]' '[:lower:]' | sed 's/_/-/g' | cut -c1-100 | sed 's/-*$//')
+
+          # XXX: Check if there is a slash in the BRANCH_NAME eg: project/add-docker
+          if [[ "$BRANCH_NAME" == *"/"* ]]; then
+              # XXX: Change the docker image package to -alpha
+              IMAGE_NAME="$IMAGE_NAME-alpha"
+              TAG="$(echo "$BRANCH_NAME" | sed 's|/|-|g').$(echo $GITHUB_SHA | head -c7)"
+          else
+              TAG="$BRANCH_NAME.$(echo $GITHUB_SHA | head -c7)"
+          fi
+
+          IMAGE_NAME=$(echo $IMAGE_NAME | tr '[:upper:]' '[:lower:]')
+          echo "tagged_image_name=${IMAGE_NAME}" >> $GITHUB_OUTPUT
+          echo "tag=${TAG}" >> $GITHUB_OUTPUT
+          echo "tagged_image=${IMAGE_NAME}:${TAG}" >> $GITHUB_OUTPUT
+          echo "::notice::Tagged docker image: ${IMAGE_NAME}:${TAG}"
+
+      - name: 🐳 Set up Docker Buildx
+        id: buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: 🐳 Cache Docker layers
+        uses: actions/cache@v4
+        with:
+          path: /tmp/.buildx-cache
+          key: ${{ runner.os }}-buildx-${{ github.ref }}
+          restore-keys: |
+            ${{ runner.os }}-buildx-refs/develop
+            ${{ runner.os }}-buildx-
+
+      - name: 🐳 Docker build
+        uses: docker/build-push-action@v6
+        with:
+          context: .
+          builder: ${{ steps.buildx.outputs.name }}
+          file: nginx-serve/Dockerfile
+          target: nginx-serve
+          load: true
+          push: true
+          tags: ${{ steps.prep.outputs.tagged_image }}
+          cache-from: type=local,src=/tmp/.buildx-cache
+          cache-to: type=local,dest=/tmp/.buildx-cache-new
+          build-args: |
+            "APP_SENTRY_TRACES_SAMPLE_RATE=0.8"
+            "APP_SENTRY_REPLAYS_SESSION_SAMPLE_RATE=0.8"
+            "APP_SENTRY_REPLAYS_ON_ERROR_SAMPLE_RATE=0.8"
+
+      - name: 🐳 Move docker cache
+        run: |
+          rm -rf /tmp/.buildx-cache
+          mv /tmp/.buildx-cache-new /tmp/.buildx-cache
+
+  publish_helm:
+    name: Publish Helm
+    needs: publish_image
+    runs-on: ubuntu-latest
+
+    steps:
+    - name: Checkout code
+      uses: actions/checkout@v4
+
+    - name: Login to GitHub Container Registry
+      uses: docker/login-action@v3
+      with:
+        registry: ghcr.io
+        username: ${{ github.actor }}
+        password: ${{ secrets.GITHUB_TOKEN }}
+
+    - name: Install Helm
+      uses: azure/setup-helm@v3
+
+    - name: Tag docker image in Helm Chart values.yaml
+      env:
+        IMAGE_NAME: ${{ needs.publish_image.outputs.docker_image_name }}
+        IMAGE_TAG: ${{ needs.publish_image.outputs.docker_image_tag }}
+      run: |
+        # Update values.yaml with latest docker image
+        sed -i "s|SET-BY-CICD-IMAGE|$IMAGE_NAME|" nginx-serve/helm/values.yaml
+        sed -i "s/SET-BY-CICD-TAG/$IMAGE_TAG/" nginx-serve/helm/values.yaml
+
+    - name: Package Helm Chart
+      id: set-variables
+      run: |
+        # XXX: Check if there is a slash in the BRANCH_NAME eg: project/add-docker
+        if [[ "$GITHUB_REF_NAME" == *"/"* ]]; then
+            # XXX: Change the helm chart to <chart-name>-alpha
+            sed -i 's/^name: \(.*\)/name: \1-alpha/' nginx-serve/helm/Chart.yaml
+        fi
+
+        SHA_SHORT=$(git rev-parse --short HEAD)
+        sed -i "s/SET-BY-CICD/$SHA_SHORT/g" nginx-serve/helm/Chart.yaml
+        helm package ./nginx-serve/helm -d .helm-charts
+
+    - name: Push Helm Chart
+      env:
+        IMAGE: ${{ needs.publish_image.outputs.docker_image }}
+        OCI_REPO: oci://ghcr.io/${{ github.repository }}
+      run: |
+        OCI_REPO=$(echo $OCI_REPO | tr '[:upper:]' '[:lower:]')
+        PACKAGE_FILE=$(ls .helm-charts/*.tgz | head -n 1)
+        echo "# Helm Chart" >> $GITHUB_STEP_SUMMARY
+        echo "" >> $GITHUB_STEP_SUMMARY
+        echo "Tagged Image: **$IMAGE**" >> $GITHUB_STEP_SUMMARY
+        echo "" >> $GITHUB_STEP_SUMMARY
+        echo "Helm push output" >> $GITHUB_STEP_SUMMARY
+        echo "" >> $GITHUB_STEP_SUMMARY
+        echo '```bash' >> $GITHUB_STEP_SUMMARY
+        helm push "$PACKAGE_FILE" $OCI_REPO >> $GITHUB_STEP_SUMMARY
+        echo '```' >> $GITHUB_STEP_SUMMARY

go-web-app-develop/.github/workflows/publish-storybook-nginx-serve.yml

@@ -0,0 +1,127 @@
+name: Publish Storybook Helm
+
+on:
+  workflow_dispatch:
+  push:
+    branches:
+      - develop
+
+permissions:
+  packages: write
+
+
+jobs:
+  publish_image:
+    name: 🐳 Publish Docker Image
+    runs-on: ubuntu-latest
+
+    outputs:
+      docker_image_name: ${{ steps.prep.outputs.tagged_image_name }}
+      docker_image_tag: ${{ steps.prep.outputs.tag }}
+      docker_image: ${{ steps.prep.outputs.tagged_image }}
+
+    steps:
+      - uses: actions/checkout@main
+
+      - name: Login to GitHub Container Registry
+        uses: docker/login-action@v3
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: 🐳 Prepare Docker
+        id: prep
+        env:
+          IMAGE_NAME: ghcr.io/${{ github.repository }}/go-ui-storybook
+        run: |
+          BRANCH_NAME=$(echo $GITHUB_REF_NAME | sed 's|[/:]|-|' | tr '[:upper:]' '[:lower:]' | sed 's/_/-/g' | cut -c1-100 | sed 's/-*$//')
+          TAG="$BRANCH_NAME.$(echo $GITHUB_SHA | head -c7)"
+          IMAGE_NAME=$(echo $IMAGE_NAME | tr '[:upper:]' '[:lower:]')
+          echo "tagged_image_name=${IMAGE_NAME}" >> $GITHUB_OUTPUT
+          echo "tag=${TAG}" >> $GITHUB_OUTPUT
+          echo "tagged_image=${IMAGE_NAME}:${TAG}" >> $GITHUB_OUTPUT
+          echo "::notice::Tagged docker image: ${IMAGE_NAME}:${TAG}"
+
+      - name: 🐳 Set up Docker Buildx
+        id: buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: 🐳 Cache Docker layers
+        uses: actions/cache@v4
+        with:
+          path: /tmp/.buildx-cache
+          key: ${{ runner.os }}-buildx-${{ github.ref }}
+          restore-keys: |
+            ${{ runner.os }}-buildx-refs/develop
+            ${{ runner.os }}-buildx-
+
+      - name: 🐳 Docker build
+        uses: docker/build-push-action@v6
+        with:
+          context: .
+          builder: ${{ steps.buildx.outputs.name }}
+          file: packages/go-ui-storybook/nginx-serve/Dockerfile
+          target: nginx-serve
+          load: true
+          push: true
+          tags: ${{ steps.prep.outputs.tagged_image }}
+          cache-from: type=local,src=/tmp/.buildx-cache
+          cache-to: type=local,dest=/tmp/.buildx-cache-new
+
+      - name: 🐳 Move docker cache
+        run: |
+          rm -rf /tmp/.buildx-cache
+          mv /tmp/.buildx-cache-new /tmp/.buildx-cache
+
+  publish_helm:
+    name: ⎈ Publish Helm
+    needs: publish_image
+    runs-on: ubuntu-latest
+
+    steps:
+    - name: Checkout code
+      uses: actions/checkout@v4
+
+    - name: Login to GitHub Container Registry
+      uses: docker/login-action@v3
+      with:
+        registry: ghcr.io
+        username: ${{ github.actor }}
+        password: ${{ secrets.GITHUB_TOKEN }}
+
+    - name: ⎈ Install Helm
+      uses: azure/setup-helm@v3
+
+    - name: ⎈ Tag docker image in Helm Chart values.yaml
+      env:
+        IMAGE_NAME: ${{ needs.publish_image.outputs.docker_image_name }}
+        IMAGE_TAG: ${{ needs.publish_image.outputs.docker_image_tag }}
+      run: |
+        # Update values.yaml with latest docker image
+        sed -i "s|SET-BY-CICD-IMAGE|$IMAGE_NAME|" packages/go-ui-storybook/nginx-serve/helm/values.yaml
+        sed -i "s/SET-BY-CICD-TAG/$IMAGE_TAG/" packages/go-ui-storybook/nginx-serve/helm/values.yaml
+
+    - name: ⎈ Package Helm Chart
+      id: set-variables
+      run: |
+        SHA_SHORT=$(git rev-parse --short HEAD)
+        sed -i "s/SET-BY-CICD/$SHA_SHORT/g" packages/go-ui-storybook/nginx-serve/helm/Chart.yaml
+        helm package ./packages/go-ui-storybook/nginx-serve/helm -d .helm-charts
+
+    - name: ⎈ Push Helm Chart
+      env:
+        IMAGE: ${{ needs.publish_image.outputs.docker_image }}
+        OCI_REPO: oci://ghcr.io/${{ github.repository }}
+      run: |
+        OCI_REPO=$(echo $OCI_REPO | tr '[:upper:]' '[:lower:]')
+        PACKAGE_FILE=$(ls .helm-charts/*.tgz | head -n 1)
+        echo "## 🚀 IFRC GO UI Helm Chart 🚀" >> $GITHUB_STEP_SUMMARY
+        echo "" >> $GITHUB_STEP_SUMMARY
+        echo "🐳 Tagged Image: **$IMAGE**" >> $GITHUB_STEP_SUMMARY
+        echo "" >> $GITHUB_STEP_SUMMARY
+        echo "⎈ Helm push output" >> $GITHUB_STEP_SUMMARY
+        echo "" >> $GITHUB_STEP_SUMMARY
+        echo '```bash' >> $GITHUB_STEP_SUMMARY
+        helm push "$PACKAGE_FILE" $OCI_REPO >> $GITHUB_STEP_SUMMARY
+        echo '```' >> $GITHUB_STEP_SUMMARY

go-web-app-develop/.gitignore

@@ -0,0 +1,43 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+build
+build-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+.env*
+!.env.example
+.eslintcache
+tsconfig.tsbuildinfo
+
+# Custom ignores
+
+stats.html
+generated/
+coverage/
+
+# storybook build
+storybook-static/
+
+# Helm
+.helm-charts/

go-web-app-develop/.npmrc

@@ -0,0 +1 @@
+enable-pre-post-scripts=true

go-web-app-develop/COLLABORATING.md

@@ -0,0 +1,18 @@
+# IFRC GO Collaboration Guide
+
+This document offers guidelines for collaborators on codebase maintenance, testing, building and deployment, and issue management.
+
+## Repository
+
+* [Issues and Pull Requests](./collaborating/issues-and-pull-requests.md)
+* [Structure](./collaborating/repository-structure.md)
+* [Linting](./collaborating/linting.md)
+* [Technology Used](./collaborating/technology.md)
+
+## Development
+
+* [Developing](./collaborating/developing.md)
+* [Translation](./collaborating/translation.md)
+* [Building](./collaborating/building.md)
+* [Testing](./collaborating/testing.md)
+* [Release](./collaborating/release.md)

go-web-app-develop/CONTRIBUTING.md

@@ -0,0 +1,81 @@
+# IFRC GO Web Application Contributing Guide
+
+First off, thanks for taking the time to contribute! ❤️
+
+All types of contributions are encouraged and valued. See the [Table of Contents](#table-of-contents) for different ways to help and details about how this project handles them. Please make sure to read the relevant section before making your contribution.
+
+## Table of Contents
+
+* [I Have a Question](#i-have-a-question)
+* [I Want To Contribute](#i-want-to-contribute)
+* [What should I know before I get started?](#what-should-i-know-before-i-get-started)
+* [Reporting Bugs](#reporting-bugs)
+* [Suggesting Enhancements](#suggesting-enhancements)
+* [Becoming a Collaborator](#becoming-a-collaborator)
+
+## I Have a Question
+
+> If you want to ask a question, we assume that you have read the available [documentation](https://go-wiki.ifrc.org/en/home).
+
+Before you ask a question, it is best to search for existing [issues](https://github.com/IFRCGo/go-web-app/issues) that might help you. In case you have found a suitable issue and still need clarification, you can write your question in this issue.
+
+If you then still feel the need to ask a question and need clarification, we recommend the following:
+
+* Open a [discussion](https://github.com/IFRCGo/go-web-app/discussions).
+* Open an [issue](https://github.com/IFRCGo/go-web-app/issues/new/choose).
+* Provide as much context as you can about what you're running into.
+
+## I Want To Contribute
+
+Any individual is welcome to contribute to IFRC GO. The repository currently has two kinds of contribution personas:
+
+* A **Contributor** is any individual who creates an issue/PR, comments on an issue/PR, or contributes in some other way.
+* A **Collaborator** is a contributor with write access to the repository.
+
+### What should I know before I get started?
+
+### IFRC GO and Packages
+
+The project is hosted at <https://go.ifrc.org/>.
+
+The project comprises several [repositories](https://github.com/orgs/IFRCGo/repositories), with notable ones including:
+
+* [go-web-app](https://github.com/IFRCGo/go-web-app/) -  The frontend repository for the IFRC GO project.
+* [go-api](https://github.com/IFRCGo/go-api) - The backed repository for the IFRC GO project.
+
+### Reporting Bugs
+
+#### Before Submitting a Bug Report
+
+Ensure the issue is not a user error by reviewing the documentation. Check the [existing bug reports](https://github.com/IFRCGo/go-web-app/issues?q=is%3Aissue%20state%3Aopen%20type%3ABug) to confirm if the issue has already been reported.
+
+#### Submitting the Bug Report
+
+1. Open a new [Issue](https://github.com/IFRCGo/go-web-app/issues/new?q=is%3Aissue+state%3Aopen+type%3ABug\&template=01_bug_report.yml).
+2. Provide all relevant details.
+
+#### After Submitting the Issue
+
+* The team will categorize and attempt to reproduce the issue.
+* If reproducible, the team will work on resolving the bug.
+
+### Suggesting Enhancements
+
+#### Before Submitting an Enhancement
+
+* Review the [documentation](https://go-wiki.ifrc.org/en/home) to ensure the functionality isn't already covered.
+* Perform a [search](https://github.com/IFRCGo/go-web-app/issues) to check if the enhancement has been suggested. If so, comment on the existing issue.
+* Confirm that your suggestion aligns with the project’s scope and objectives.
+
+#### How to Submit an Enhancement Suggestion
+
+Enhancements are tracked as [GitHub issues](https://github.com/IFRCGo/go-web-app/issues).
+
+* Open a new [feature request](https://github.com/IFRCGo/go-web-app/issues/new?q=is%3Aissue+state%3Aopen+type%3ABug\&template=02_feature_request.yml) or [Epic ticket](https://github.com/IFRCGo/go-web-app/issues/new?q=is%3Aissue+state%3Aopen+type%3ABug\&template=03_epic_request.yml) depending on the scale of the enhancement.
+* Provide a clear description and submit the ticket.
+
+## Becoming a Collaborator
+
+Collaborators are key members of the IFRC GO Web Application Team, responsible for its development. Members should have expertise in modern web technologies and standards.
+
+For detailed guidelines, refer to the [Collaboration Guide](./COLLABORATING.md).

go-web-app-develop/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 GO
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

go-web-app-develop/README.md

@@ -0,0 +1,117 @@
+<p align="center">
+  <br />
+  <a href="https://go.ifrc.org/">
+    <picture>
+      <img src="https://github.com/IFRCGo/go-web-app/blob/develop/app/src/assets/icons/go-logo-2020.svg" width="200px" alt="IFRC GO Logo">
+    </picture>
+  </a>
+</p>
+
+# IFRC GO
+
+[IFRC GO](https://go.ifrc.org/) is the platform of the International Federation of Red Cross and Red Crescent, aimed at connecting crucial information on emergency needs with the appropriate response. This repository houses the frontend source code for the application, developed using [React](https://react.dev/), [Vite](https://vitejs.dev/), and associated technologies.
+
+## Built With
+
+[![React][react-shields]][react-url] [![Vite][vite-shields]][vite-url] [![TypeScript][typescript-shields]][typescript-url] [![pnpm][pnpm-shields]][pnpm-url]
+
+## Getting Started
+
+Below are the steps to guide you through preparing your local environment for IFRC GO Web application development. The repository is set up as a [monorepo](https://monorepo.tools/). The [app](https://github.com/IFRCGo/go-web-app/tree/develop/app) directory houses the application code, while the [packages](https://github.com/IFRCGo/go-web-app/tree/develop/packages) directory contains related packages, including the [IFRC GO UI](https://www.npmjs.com/package/@ifrc-go/ui) components library.
+
+### Prerequisites
+
+To begin, ensure you have network access. Then, you'll need the following:
+
+1. [Git](https://git-scm.com/)
+2. [Node.js](https://nodejs.org/en/) as specified under `engines` section in `package.json` file
+3. [pnpm](https://pnpm.io/) as specified under `engines` section in `package.json` file
+4. Alternatively, you can use [Docker](https://www.docker.com/) to build the application.
+
+> \[!NOTE]\
+> Make sure the correct versions of pnpm and Node.js are installed. They are specified under `engines` section in `package.json` file.
+
+### Local Development
+
+1. Clone the repository using HTTPS, SSH, or GitHub CLI:
+
+   ```bash
+   git clone https://github.com/IFRCGo/go-web-app.git # HTTPS
+   git clone git@github.com:IFRCGo/go-web-app.git # SSH
+   gh repo clone IFRCGo/go-web-app # GitHub CLI
+   ```
+
+2. Install the dependencies:
+
+   ```bash
+   pnpm install
+   ```
+
+3. Create a `.env` file in the `app` directory and add variables from [env.ts](https://github.com/IFRCGo/go-web-app/blob/develop/app/env.ts). Any variables marked with `.optional()` are not mandatory for setup and can be skipped.
+
+   ```bash
+   cd app
+   touch .env
+   ```
+
+   Example `.env` file
+   ```
+   APP_TITLE=IFRC GO
+   APP_ENVIRONMENT=testing
+   ...
+   ```
+
+4. Start the development server:
+
+   ```bash
+   pnpm start:app
+   ```
+
+## Contributing
+
+* Check out existing [Issues](https://github.com/IFRCGo/go-web-app/issues) and [Pull Requests](https://github.com/IFRCGo/go-web-app/pulls) to contribute.
+* To request a feature or report a bug, [create a GitHub Issue](https://github.com/IFRCGo/go-web-app/issues/new/choose).
+* [Contribution Guide →](./CONTRIBUTING.md)
+* [Collaboration Guide →](./COLLABORATING.md)
+
+## Additional Packages
+
+The repository hosts multiple packages under the `packages` directory.
+
+1. [IFRC GO UI](https://github.com/IFRCGo/go-web-app/tree/develop/packages/ui) is a React UI components library tailored to meet the specific requirements of the IFRC GO community and its associated projects.
+2. [IFRC GO UI Storybook](https://github.com/IFRCGo/go-web-app/tree/develop/packages/go-ui-storybook) serves as the comprehensive showcase for the IFRC GO UI components library. It is hosted on [Chromatic](https://66557be6b68dacbf0a96db23-zctxglhsnk.chromatic.com/).
+
+## IFRC GO Backend
+
+The backend that serves the frontend application is maintained in a separate [repository](https://github.com/IFRCGo/go-api/).
+
+## Previous Repository
+
+[Go Frontend](https://github.com/IFRCGo/go-frontend) is the previous version of the project which contains the original codebase and project history.
+
+## Community & Support
+
+* Visit the [IFRC GO Wiki](https://go-wiki.ifrc.org/) for documentation of the IFRC GO platform.
+* Stay informed about the latest project updates on [Medium](https://ifrcgoproject.medium.com/).
+
+## License
+
+[MIT](https://github.com/IFRCGo/go-web-app/blob/develop/LICENSE)
+
+<!-- MARKDOWN LINKS & IMAGES -->
+
+[react-shields]: https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB
+
+[react-url]: https://reactjs.org/
+
+[vite-shields]: https://img.shields.io/badge/vite-%23646CFF.svg?style=for-the-badge&logo=vite&logoColor=white
+
+[vite-url]: https://vitejs.dev/
+
+[typescript-shields]: https://img.shields.io/badge/typescript-%23007ACC.svg?style=for-the-badge&logo=typescript&logoColor=white
+
+[typescript-url]: https://www.typescriptlang.org/
+
+[pnpm-shields]: https://img.shields.io/badge/pnpm-F69220?style=for-the-badge&logo=pnpm&logoColor=fff
+
+[pnpm-url]: https://pnpm.io/

go-web-app-develop/app/CHANGELOG.md

@@ -0,0 +1,729 @@
+# go-web-app
+
+## 7.21.0-beta.2
+
+### Patch Changes
+
+- b949fcd: Fix use of operational timeframe date in imminent final report form
+
+## 7.21.0-beta.1
+
+### Patch Changes
+
+- 84b4802: - Fix calculation of Operation End date in Final report form
+  - Fix icon position issue in the implementation table of DREF PDF export
+  - Update the label for last update date in the crisis categorization pop-up
+
+## 7.21.0-beta.0
+
+### Minor Changes
+
+- 039c488: Add Crisis categorization update date
+
+  - Add updated date for crisis categorization in emergency page.
+  - Add consent checkbox over situational overview in field report form.
+
+- 3ee9979: Add support for DREF imminent v2 in final report
+
+  - Add a separate route for the old dref final report form
+  - Update dref final report to accomodate imminent v2 changes
+
+## 7.20.2
+
+### Patch Changes
+
+- 8090b9a: Fix other action section visibility condition in DREF export
+
+## 7.20.1
+
+### Patch Changes
+
+- 4418171: Fix DREF form to properly save major coordination mechanism [#1928](https://github.com/IFRCGo/go-web-app/issues/1928)
+
+## 7.20.1-beta.0
+
+### Patch Changes
+
+- 4418171: Fix DREF form to properly save major coordination mechanism [#1928](https://github.com/IFRCGo/go-web-app/issues/1928)
+
+## 7.20.0
+
+### Minor Changes
+
+- 5771a6b: Update DREF application form and export
+
+  - add new field hazard date and location
+  - update hazard date as forcasted day of event
+  - update the section in dref application export
+  - remove Current National Society Actions from the export
+
+## 7.20.0-beta.0
+
+### Minor Changes
+
+- 5771a6b: Update DREF application form and export
+
+  - add new field hazard date and location
+  - update hazard date as forcasted day of event
+  - update the section in dref application export
+  - remove Current National Society Actions from the export
+
+## 7.19.0
+
+### Minor Changes
+
+- 456a145: Fix versioning
+
+### Patch Changes
+
+- 47786f8: Fix the undefined society name issue in surge page [#1899](https://github.com/IFRCGo/go-web-app/issues/1899)
+
+## 7.18.2
+
+### Patch Changes
+
+- e51a80f: Update the action for the DREF Ops update form for imminent.
+  - Remove change to response modal in the ops update form for type imminent.
+  - Fix the order of the field in operational timeframe tab.
+  - Add description text under upload assessment report button in DREF operation update form
+- Fix the error while viewing PER process [#1838](https://github.com/IFRCGo/go-web-app/issues/1838).
+
+## 7.18.1
+
+### Patch Changes
+
+- 75bf525: Fix logic to disable ops update for old imminents
+
+## 7.18.0
+
+### Minor Changes
+
+- bfcaecf: Address [Dref imminent Application](https://github.com/IFRCGo/go-web-app/issues/1455)
+  - Update logic for creation of dref final report for imminent
+  - Update allocatioon form for dref imminent
+  - Add Activity input in proposed action for dref type imminent
+  - Add proposed actions icons
+  - Show proposed actions for existing imminent dref applications
+  - Hide unused sections for dref imminent export and preserve proposed actions order
+  - Prevent selection of past dates for the `hazard_date` in dref imminent
+  - Add auto total population calculation in dref
+  - Add a confirmation popup before creating ops. update from imminent dref
+
+### Patch Changes
+
+- ee1bd60: Add proper redirect for Non-sovereign country in the country ongoing emergencies page
+- 771d085: Community Based Surveillance updates (Surge CoS Health)
+  - Changed page: https://go.ifrc.org/surge/catalogue/health/community-based-surveillance
+  - The changes affect team size and some standard components (e.g. kit content)
+- Updated dependencies [bfcaecf]
+  - @ifrc-go/ui@1.5.1
+
+## 7.17.4
+
+### Patch Changes
+
+- 14a7f2c: Update People assisted field label in the export of Dref final report.
+
+## 7.17.3
+
+### Patch Changes
+
+- fc8b427: Update field label in DrefFinalReport form and export
+
+## 7.17.2
+
+### Patch Changes
+
+- 54df6ff: Update DREF final report form
+
+  - The DREF final report form and export now include a new "Assisted Population" field, replacing the "Targeted Population" field.
+
+## 7.17.1
+
+### Patch Changes
+
+- 215030a: Update DREF forms
+
+  - Move Response strategy description from placeholder to below the input
+  - Add DREF allocation field in event details for the Loan type Ops. update form
+
+## 7.17.0
+
+### Minor Changes
+
+- 0b351d1: Address [DREF Superticket 2 bugs](https://github.com/IFRCGo/go-web-app/issues/1784)
+
+  - Update no of images in for "Description of event" from 2 to 4
+  - Update descriptions of few fields
+  - Replace \* with bullet in description of planned interventions in DREF import
+  - Add some of the missing fields to exports
+  - Remove warnings for previously removed fields
+
+## 7.16.2
+
+### Patch Changes
+
+- c086629: Update Learn > Resources > Montandon page
+  - Update styling of 'API Access' buttons
+  - Reword 'Access API' link to 'Access Montandon API'
+  - Reword 'Explore Radiant Earth API' to 'Explore data in STAC browser'
+- 2ee6a1e: Remove a broken image from Catalogue of Surge Services > Health > ERU Hospital page
+
+## 7.16.1
+
+### Patch Changes
+
+- d561dc4: - Update Montandon landing page - Fix typo in Justin's name and email - Update description
+  - Fix position and deploying organisation in ongoing RR deployment table
+
+## 7.16.0
+
+### Minor Changes
+
+- 9dcdd38: Add Montandon landing page
+
+  - Add a basic landing page for Montandon with links and information
+  - Add link to Montandon landing page to Learn > Resources menu
+
+## 7.15.0
+
+### Minor Changes
+
+- c26bda4: Implement [ERU Readiness](https://github.com/IFRCGo/go-web-app/issues/1710)
+
+  - Restucture surge page to acommodate ERU
+    - Move surge deployment related sections to a new dedicated tab **Active Surge Deployments**
+      - Update active deployments to improve scaling of points in the map
+      - Add **Active Surge Support per Emergency** section
+    - Revamp **Surge Overview** tab
+      - Add **Rapid Response Personnel** sub-tab
+        - Update existings charts and add new related tables/charts
+      - Add **Emergency Response Unit** sub-tab
+        - Add section to visualize ERU capacity and readiness
+        - Add section to view ongoing ERU deployments
+        - Add a form to update ERU Readiness
+        - Add option to export ERU Readiness data
+  - Update **Respond > Surge/Deployments** menu to include **Active Surge Deployments**
+
+- 9ed8181: Address feedbacks in [DREF superticket feedbacks](https://github.com/IFRCGo/go-web-app/issues/1816)
+
+  - Make end date of operation readonly field in all DREF forms
+  - Fix font and spacing issues in the DREF exports (caused by link text overflow)
+  - Update styling of Risk and Security Considerations section to match that of Previous Operations
+  - Update visibility condition of National Society Actions in Final Report export
+
+### Patch Changes
+
+- Updated dependencies [c26bda4]
+  - @ifrc-go/ui@1.5.0
+
+## 7.14.0
+
+### Minor Changes
+
+- 18ccc85:
+  - Update styling of vertical NavigationTab
+  - Hide register URL in the T&C page for logged in user
+  - Update styling of T&C page
+    - Make the page responsive
+    - Make sidebar sticky
+  - Update url for [monty docs](https://github.com/IFRCGo/go-web-app/issues/1418#issuecomment-2422371363)
+- 8d3a7bd: Initiate shutdown for 3W
+  - Remove "Submit 3W Projects" from the menu Prepare > Global 3W projects
+  - Rename "Global 3W Projects" to "Programmatic Partnerships" in Prepare menu
+  - Update global 3W page
+    - Update title and description for Programmatic Partnerships
+    - Remove all the contents related to 3W
+  - Replace contents in various places with project shutdown message
+    - Regional 3W tab
+    - 3W Projects section in Accounts > My Form > 3W
+    - Projects tab in Country > Ongoing Activities
+    - All Projects page
+    - New, edit 3W project form
+    - View 3W project page
+  - Remove NS Activities section in Country > NS overview > NS Activities page
+  - Remove Projects section from search results page
+
+### Patch Changes
+
+- Updated dependencies [18ccc85]
+  - @ifrc-go/ui@1.4.0
+
+## 7.13.0
+
+### Minor Changes
+
+- 69fd74f: - Update page title for Emergency to include the name
+  - Update page title of Flash update to include the name
+  - Fix the user registration link in the Terms & Condition page
+- 680c673: Implement [DREF Superticket 2.0](https://github.com/IFRCGo/go-web-app/issues/1695)
+
+### Patch Changes
+
+- fe4b727: - Upgrade pnpm to v10.6.1
+  - Cleanup Dockerfile
+  - Configure depandabot to track other dependencies updates
+  - Upgrade eslint
+  - Use workspace protocol to reference workspace packages
+- 9f20016: Enable user to edit their position field in [#1647](https://github.com/IFRCGo/go-web-app/issues/1647)
+- ef15af1: Add secondary ordering in tables for rows with same date
+- Updated dependencies [fe4b727]
+  - @ifrc-go/ui@1.3.1
+
+## 7.12.1
+
+### Patch Changes
+
+- Fix nullable type of assessment for NS capacity
+
+## 7.12.0
+
+### Minor Changes
+
+- f766bc7: Add link to IFRC Survey Designer in the tools section under learn menu
+
+### Patch Changes
+
+- 7f51854: - Surge CoS: Health fix
+- 3a1cac8: Hide focal point details based on user permissions
+- 43d3bf1: - Add Surge CoS Administration section
+  - Add Surge CoS Faecal Sludge Management (FSM) section
+  - Update Surge CoS IT&T section
+  - Update Surge CoS Basecamp section (as OSH)
+
+## 7.11.1
+
+### Patch Changes
+
+- ff426cd: Use current language for field report title generation
+
+## 7.11.0
+
+### Minor Changes
+
+- Field report number generation: Change only when the country or event changes
+
+## 7.10.1
+
+### Patch Changes
+
+- 14567f1: Improved tables by adding default and second-level ordering in [#1633](https://github.com/IFRCGo/go-web-app/issues/1633)
+
+  - Appeal Documents table, `emergencies/{xxx}/reports` page
+  - Recent Emergencies in Regions – All Appeals table
+  - All Deployed Personnel – Default sorting (filters to be added)
+  - Deployed ERUs – Changed filter title
+  - Key Documents tables in Countries
+  - Response documents
+  - Main page – Active Operations table
+  - The same `AppealsTable` is used in:
+    - Active Operations in Regions
+    - Previous Operations in Countries
+
+- 78d25b2:
+
+  - Update on the ERU MHPSS Module in the Catalogue of Services in [#1648](https://github.com/IFRCGo/go-web-app/issues/1648)
+  - Update on a PER role profile in [#1648](https://github.com/IFRCGo/go-web-app/issues/1648)
+  - Update link to the IM Technical Competency Framework in [#1483](https://github.com/IFRCGo/go-web-app/issues/1483)
+
+- 44623a7: Undo DREF Imminent changes
+- b57c453: Show the number of people assisted in the DREF Final Report export in [#1665](https://github.com/IFRCGo/go-web-app/issues/1665)
+
+## 7.10.0
+
+### Minor Changes
+
+- 4f89133: Fix DREF PGA export styling
+
+## 7.9.0
+
+### Minor Changes
+
+- 7927522: Update Imminent DREF Application in [#1455](https://github.com/IFRCGo/go-web-app/issues/1455)
+
+  - Hide sections/fields
+  - Rename sections/fields
+  - Remove sections/fields
+  - Reflect changes in the PDF export
+
+### Patch Changes
+
+- Updated dependencies [4032688]
+  - @ifrc-go/ui@1.3.0
+
+## 7.8.1
+
+### Patch Changes
+
+- 9c51dee: Remove `summary` field from field report form
+- Update @ifrc-go/ui version
+
+## 7.8.0
+
+### Minor Changes
+
+- 4843cb0: Added Operational Learning 2.0
+
+  - Key Figures Overview in Operational Learning
+  - Map View for Operational Learning
+  - Learning by Sector Bar Chart
+  - Learning by Region Bar Chart
+  - Sources Over Time Line Chart
+  - Methodology changes for the prioritization step
+  - Added an option to regenerate cached summaries
+  - Summary post-processing and cleanup
+  - Enabled MDR code search in admin
+
+### Patch Changes
+
+- f96e177: Move field report/emergency title generation logic from client to server
+- e85fc32: Integrate `crate-ci/typos` for code spell checking
+- 4cdea2b: Add redirection logic for `preparedness#operational-learning`
+- 9a50443: Add appeal doc type for appeal documents
+- 817d56d: Display properly formatted appeal type in search results
+- 1159fa4: Redirect obsolete URLs to recent ones
+  - redirect `/reports/` to `/field-reports/`
+  - redirect `/deployments/` -> `/surge/overview`
+- Updated dependencies [4843cb0]
+  - @ifrc-go/ui@1.2.3
+
+## 7.7.0
+
+### Minor Changes
+
+- 3258b96: Add local unit validation workflow
+
+### Patch Changes
+
+- Updated dependencies [c5a446f]
+  - @ifrc-go/ui@1.2.2
+
+## 7.6.6
+
+### Patch Changes
+
+- 8cdc946: Hide Local unit contact details on the list view for logged in users in [#1485](https://github.com/ifRCGo/go-web-app/issues/1485)
+  Update `tinymce-react` plugin to the latest version and enabled additional plugins, including support for lists in [#1481](https://github.com/ifRCGo/go-web-app/issues/1481)
+- ecca810: Replace the from-communication-copied text of CoS Health header
+- 7cf2514: Prioritize GDACS as the Primary Source for Imminent Risk Watch in [#1547](https://github.com/IFRCGo/go-web-app/issues/1547)
+- 8485076: Add Organization type and Learning type filter in Operational learning in [#1469](https://github.com/IFRCGo/go-web-app/issues/1469)
+- 766d98d: Auto append https:// for incomplete URLs in [#1505](https://github.com/IFRCGo/go-web-app/issues/1505)
+
+## 7.6.5
+
+### Patch Changes
+
+- 478e73b: Update labels for severity control in Imminent Risk Map
+  Update navigation for the events in Imminent Risk Map
+  Fix issue displayed when opening a DREF import template
+  Fix submission issue when importing a DREF import file
+- f82f846: Update Health Section in Catalogue of Surge Services
+- ade84aa: Display ICRC Presence
+  - Display ICRC presence across partner countries
+  - Highlight key operational countries
+
+## 7.6.4
+
+### Patch Changes
+
+- d85f64d: Update Imminent Events
+
+  - Hide WFP ADAM temporarily from list sources
+  - Show exposure control for cyclones from GDACS only
+
+## 7.6.3
+
+### Patch Changes
+
+- 7bbf3d2: Update key insights disclaimer text in Ops. Learning
+- 0e40681: Update FDRS data in Country / Context and Structure / NS indicators
+
+  - Add separate icon for each field for data year
+  - Use separate icon for disaggregation
+  - Update descriptions on dref import template (more details on _Missing / to be implemented_ section in https://github.com/IFRCGo/go-web-app/pull/1434#issuecomment-2459034932)
+
+- Updated dependencies [801ec3c]
+  - @ifrc-go/ui@1.2.1
+
+## 7.6.2
+
+### Patch Changes
+
+- 4fa6a36: Updated PER terminology and add PER logo in PER PDF export
+- 813e93f: Add link to GO UI storybook in resources page
+- 20dfeb3: Update DREF import template
+  - Update guidance
+  - Improve template stylings
+  - Update message in error popup when import fails
+- 8a18ad8: Add beta tag, URL redirect, and link to old dashboard on Ops Learning
+
+## 7.6.1
+
+### Patch Changes
+
+- 7afaf34: Fix null event in appeal for operational learning
+
+## 7.6.0
+
+### Minor Changes
+
+- Add new Operational Learning Page
+
+  - Add link to Operational Learning page under `Learn` navigation menu
+  - Integrate LLM summaries for Operational Learning
+
+## 7.5.3
+
+### Patch Changes
+
+- d7f5f53: Revamp risk imminent events for cyclone
+  - Visualize storm position, forecast uncertainty, track line and exposed area differently
+  - Add option to toggle visibility of these different layers
+  - Add severity legend for exposure
+  - Update styling for items in event list
+  - Update styling for event details page
+- 36a64fa: Integrate multi-select functionality in operational learning filters to allow selection of multiple filter items.
+- 894d00c: Add a new 404 page
+- 7757e54: Add an option to download excel import template for DREF (Response) which user can fill up and import.
+- a8d021d: Update resources page
+  - Add a new video for LocalUnits
+  - Update ordering of videos
+- aea512d: Prevent users from pasting images into rich text field
+- fd54657: Add Terms and Conditions page
+- bf55ccc: Add Cookie Policy page
+- df80c4f: Fix contact details in Field Report being always required when filled once
+- 81dc3bd: Added color mapping based on PER Area and Rating across all PER charts
+- Updated dependencies [dd92691]
+- Updated dependencies [d7f5f53]
+- Updated dependencies [fe6a455]
+- Updated dependencies [81dc3bd]
+  - @ifrc-go/ui@1.2.0
+
+## 7.5.2
+
+### Patch Changes
+
+- 37bba31: Add collaboration guide
+
+## 7.5.1
+
+### Patch Changes
+
+- 2a5e4a1: Add Core Competency Framework link to Resources page in [#1331](https://github.com/IFRCGo/go-web-app/issues/1331)
+- 31eaa97: Add Health Mapping Report to Resources page in [#1331](https://github.com/IFRCGo/go-web-app/issues/1331)
+- 4192da1: - Local Units popup, view/edit mode improvements in [#1178](https://github.com/IFRCGo/go-web-app/issues/1178)
+  - Remove ellipsize heading option in local units map popup
+  - Local units title on popup are now clickable that opens up a modal to show details
+  - Added an Edit button to the View Mode for users with edit permissions
+  - Users will now see a **disabled grey button** when the content is already validated
+- 5c7ab88: Display the public visibility field report to public users in [#1743](https://github.com/IFRCGo/go-web-app/issues/1343)
+
+## 7.5.0
+
+### Minor Changes
+
+- 5845699: Clean up Resources page
+
+## 7.4.2
+
+### Patch Changes
+
+- d734e04: - Fix duplication volunteer label in the Field Report details
+  - Fix rating visibility in the Country > NS Overview > Strategic priorities page
+
+## 7.4.1
+
+### Patch Changes
+
+- a4f77ab: Fetch and use latest available WorldBank data in [#571](https://github.com/IFRCGo/go-api/issues/2224)
+- ebf033a: Update Technical Competencies Link on the Cash page of the Catalogue of Surge Services in [#1290](https://github.com/IFRCGo/go-web-app/issues/1290)
+- 18d0dc9: Use `molnix status` to filter surge alerts in [#2208](https://github.com/IFRCGo/go-api/issues/2208)
+- b070c66: Check guest user permission for local units
+- 72df1f2: Add new drone icon for UAV team in [#1280](https://github.com/IFRCGo/go-web-app/issues/1280)
+- 2ff7940: Link version number to release notes on GitHub in [#1004](https://github.com/IFRCGo/go-web-app/issues/1004)
+  Updated @ifrc-go/icons to v2.0.1
+- Updated dependencies [72df1f2]
+  - @ifrc-go/ui@1.1.6
+
+## 7.4.0
+
+### Minor Changes
+
+- b6bd6aa: Implement Guest User Permission in [#1237](https://github.com/IFRCGo/go-web-app/issues/1237)
+
+## 7.3.13
+
+### Patch Changes
+
+- 453a397: - Update Local Unit map, table and form to match the updated design in [#1178](https://github.com/IFRCGo/go-web-app/issues/1178)
+  - Add delete button in Local units table and form
+  - Use filter prop in container and remove manual stylings
+  - Update size of WikiLink to match height of other action items
+  - Add error boundary to BaseMap component
+- Updated dependencies [453a397]
+  - @ifrc-go/ui@1.1.5
+
+## 7.3.12
+
+### Patch Changes
+
+- ba6734e: Show admin labels in maps in different languages, potentially fixing [#1036](https://github.com/IFRCGo/go-web-app/issues/1036)
+
+## 7.3.11
+
+### Patch Changes
+
+- d9491a2: Fix appeals statistics calculation
+
+## 7.3.10
+
+### Patch Changes
+
+- 3508c83: Add missing validations in DREF forms
+- 3508c83: Fix region filter in All Appeals table
+- 073fa1e: Remove personal detail for focal point in local units table
+- b508475: Add June 2024 Catalogue of Surge Services Updates
+- 3508c83: Handle countries with no bounding box
+- d9491a2: Fix appeals based statistics calculation
+- Updated dependencies [073fa1e]
+  - @ifrc-go/ui@1.1.4
+
+## 7.3.9
+
+### Patch Changes
+
+- 49f5410: - Reorder CoS list
+  - Update texts in CoS strategic partnerships resource mobilisation
+
+## 7.3.8
+
+### Patch Changes
+
+- 478ab69: Hide contact information from IFRC Presence
+- 3fbe60f: Hide add/edit local units on production environment
+- 90678ed: Show Organization Type properly in Account Details page
+
+## 7.3.7
+
+### Patch Changes
+
+- 909a5e2: Fix Appeals table for Africa Region
+- 5a1ae43: Add presentation mode in local units map
+- 96120aa: Fix DREF exports margins and use consistent date format
+- 8a4f26d: Avoid crash on country pages for countries without bbox
+
+## 7.3.6
+
+### Patch Changes
+
+- 1b4b6df: Add local unit form
+- 2631a9f: Add office type and location information for IFRC delegation office
+- 2d7a6a5: - Enable ability to start PER in IFRC supported languages
+  - Make PER forms `readOnly` in case of language mismatch
+- e4bf098: Fix incorrect statistics for past appeals of a country
+- Updated dependencies [0ab207d]
+- Updated dependencies [66151a7]
+  - @ifrc-go/ui@1.1.3
+
+## 7.3.5
+
+### Patch Changes
+
+- 894a762: Fix seasonal risk score in regional and global risk watch
+
+## 7.3.4
+
+### Patch Changes
+
+- d368ada: Fix GNI per capita in country profile overview
+
+## 7.3.3
+
+### Patch Changes
+
+- 73e1966: Update CoS pages as mentioned in #913
+- 179a073: Show all head of delegation under IFRC Presence
+- 98d6b62: Fix region operation map to apply filter for Africa
+
+## 7.3.2
+
+### Patch Changes
+
+- f83c12b: Show Local name when available and use English name as fallback for local units data
+
+## 7.3.1
+
+### Patch Changes
+
+- 7f0212b: Integrate mapbox street view for local units map
+- Updated dependencies [7f0212b]
+  - @ifrc-go/ui@1.1.2
+
+## 7.3.0
+
+### Minor Changes
+
+- 0dffd52: Add table view in NS local units
+
+## 7.2.5
+
+### Patch Changes
+
+- 556766e: - Refetch token list after new token is created
+  - Update link for terms and conditions for Montandon
+
+## 7.2.4
+
+### Patch Changes
+
+- 30eac3c: Add option to generate API token for Montandon in the user profile
+
+## 7.2.3
+
+### Patch Changes
+
+- Fix crash due to undefined ICRC presence in country page
+
+## 7.2.2
+
+### Patch Changes
+
+- - Update country risk page sources
+  - Update CoS pages
+- Updated dependencies [a1c0554]
+- Updated dependencies [e9552b4]
+  - @ifrc-go/ui@1.1.1
+
+## 7.2.1
+
+### Patch Changes
+
+- Remove personal identifiable information for local units
+
+## 7.2.0
+
+### Minor Changes
+
+- 9657d4b: Update country pages with appropriate source links
+- 66fa7cf: Show FDRS data retrieval year in NS indicators
+- b69e8e5: Update IFRC legal status link
+- 300250a: Show latest strategic plan of National Society under Strategic Priorities
+- 9657d4b: Add GO Wiki links for country page sections
+- b38d9d9: Improve overall styling of country pages
+  - Make loading animation consistent across all pages
+  - Make empty message consistent
+  - Use ChartContainer and update usage of charting hooks
+  - Update BaseMap to extend defaultMapOptions (instead of replacing it)
+  - Add an option to provide popupClassName in MapPopup
+- 80be711: Rename `Supporting Partners` to `Partners`.
+  - Update IFRC legal status link.
+  - Update the name of the strategic priorities link to indicate that they were created by the National Society.
+- 176e01b: Simplify usage of PER question group in PER assessment form
+  - Add min widths in account table columns
+
+## 7.1.5
+
+### Patch Changes
+
+- Updated dependencies
+  - @ifrc-go/ui@1.0.0

go-web-app-develop/app/env.ts

@@ -0,0 +1,29 @@
+import { defineConfig, Schema } from '@julr/vite-plugin-validate-env';
+
+export default defineConfig({
+    APP_TITLE: Schema.string(),
+    APP_ENVIRONMENT: (key, value) => {
+        // NOTE: APP_ENVIRONMENT_PLACEHOLDER is meant to be used with image builds
+        // The value will be later replaced with the actual value
+        const regex = /^production|staging|testing|alpha-\d+|development|APP_ENVIRONMENT_PLACEHOLDER$/;
+        const valid = !!value && (value.match(regex) !== null);
+        if (!valid) {
+            throw new Error(`Value for environment variable "${key}" must match regex "${regex}", instead received "${value}"`);
+        }
+        if (value === 'APP_ENVIRONMENT_PLACEHOLDER') {
+            console.warn(`Using ${value} for app environment. Make sure to not use this for builds without helm chart`)
+        }
+        return value as ('production' | 'staging' | 'testing' | `alpha-${number}` | 'development' | 'APP_ENVIRONMENT_PLACEHOLDER');
+    },
+    APP_API_ENDPOINT: Schema.string({ format: 'url', protocol: true, tld: false }),
+    APP_ADMIN_URL: Schema.string.optional({ format: 'url', protocol: true, tld: false }),
+    APP_MAPBOX_ACCESS_TOKEN: Schema.string(),
+    APP_TINY_API_KEY: Schema.string(),
+    APP_RISK_API_ENDPOINT: Schema.string({ format: 'url', protocol: true }),
+    APP_SDT_URL: Schema.string.optional({ format: 'url', protocol: true, tld: false }),
+    APP_SENTRY_DSN: Schema.string.optional(),
+    APP_SENTRY_TRACES_SAMPLE_RATE: Schema.number.optional(),
+    APP_SENTRY_REPLAYS_SESSION_SAMPLE_RATE: Schema.number.optional(),
+    APP_SENTRY_REPLAYS_ON_ERROR_SAMPLE_RATE: Schema.number.optional(),
+    APP_GOOGLE_ANALYTICS_ID: Schema.string.optional(),
+});

go-web-app-develop/app/eslint.config.js

@@ -0,0 +1,165 @@
+import { FlatCompat } from '@eslint/eslintrc';
+import js from '@eslint/js';
+import json from "@eslint/json";
+import tseslint from "typescript-eslint";
+import process from 'process';
+
+const dirname = process.cwd();
+
+const compat = new FlatCompat({
+    baseDirectory: dirname,
+    resolvePluginsRelativeTo: dirname,
+});
+
+const appConfigs = compat.config({
+    env: {
+        node: true,
+        browser: true,
+        es2020: true,
+    },
+    root: true,
+    extends: [
+        'airbnb',
+        'airbnb/hooks',
+        'plugin:@typescript-eslint/recommended',
+        'plugin:react-hooks/recommended',
+    ],
+    parser: '@typescript-eslint/parser',
+    parserOptions: {
+        ecmaVersion: 'latest',
+        sourceType: 'module',
+    },
+    plugins: [
+        '@typescript-eslint',
+        'react-refresh',
+        'simple-import-sort',
+        'import-newlines'
+    ],
+    settings: {
+        'import/parsers': {
+            '@typescript-eslint/parser': ['.ts', '.tsx']
+        },
+        'import/resolver': {
+            typescript: {
+                project: [
+                    './tsconfig.json',
+                ],
+            },
+        },
+    },
+    rules: {
+        'react-refresh/only-export-components': 'warn',
+
+        'no-unused-vars': 0,
+        '@typescript-eslint/no-unused-vars': 1,
+
+        'no-use-before-define': 0,
+        '@typescript-eslint/no-use-before-define': 1,
+
+        'no-shadow': 0,
+        '@typescript-eslint/no-shadow': ['error'],
+
+        '@typescript-eslint/consistent-type-imports': [
+            'warn',
+            {
+                disallowTypeAnnotations: false,
+                fixStyle: 'inline-type-imports',
+                prefer: 'type-imports',
+            },
+        ],
+
+        'import/no-extraneous-dependencies': [
+            'error',
+            {
+                devDependencies: [
+                    '**/*.test.{ts,tsx}',
+                    'eslint.config.js',
+                    'postcss.config.cjs',
+                    'stylelint.config.cjs',
+                    'vite.config.ts',
+                ],
+                optionalDependencies: false,
+            },
+        ],
+
+        indent: ['error', 4, { SwitchCase: 1 }],
+
+        'import/no-cycle': ['error', { allowUnsafeDynamicCyclicDependency: true }],
+
+        'react/react-in-jsx-scope': 'off',
+        'camelcase': 'off',
+
+        'react/jsx-indent': ['error', 4],
+        'react/jsx-indent-props': ['error', 4],
+        'react/jsx-filename-extension': ['error', { extensions: ['.js', '.jsx', '.ts', '.tsx'] }],
+
+        'import/extensions': ['off', 'never'],
+
+        'react-hooks/rules-of-hooks': 'error',
+        'react-hooks/exhaustive-deps': 'warn',
+
+        'react/require-default-props': ['warn', { ignoreFunctionalComponents: true }],
+        'simple-import-sort/imports': 'warn',
+        'simple-import-sort/exports': 'warn',
+        'import-newlines/enforce': ['warn', 1]
+    },
+    overrides: [
+        {
+            files: ['*.js', '*.jsx', '*.ts', '*.tsx'],
+            rules: {
+                'simple-import-sort/imports': [
+                    'error',
+                    {
+                        'groups': [
+                            // side effect imports
+                            ['^\\u0000'],
+                            // packages `react` related packages come first
+                            ['^react', '^@?\\w'],
+                            // internal packages
+                            ['^#.+$'],
+                            // parent imports. Put `..` last
+                            // other relative imports. Put same-folder imports and `.` last
+                            ['^\\.\\.(?!/?$)', '^\\.\\./?$', '^\\./(?=.*/)(?!/?$)', '^\\.(?!/?$)', '^\\./?$'],
+                            // style imports
+                            ['^.+\\.json$', '^.+\\.module.css$'],
+                        ]
+                    }
+                ]
+            }
+        }
+    ]
+}).map((conf) => ({
+    ...conf,
+    files: ['src/**/*.tsx', 'src/**/*.jsx', 'src/**/*.ts', 'src/**/*.js'],
+    ignores: [
+        "node_modules/",
+        "build/",
+        "coverage/",
+        'src/generated/types.ts'
+    ],
+}));
+
+const otherConfig = {
+    files: ['*.js', '*.ts', '*.cjs'],
+    ...js.configs.recommended,
+    ...tseslint.configs.recommended,
+};
+
+const jsonConfig = {
+    files: ['**/*.json'],
+    language: 'json/json',
+    rules: {
+        'json/no-duplicate-keys': 'error',
+    },
+};
+
+export default [
+    {
+        plugins: {
+            json,
+        },
+    },
+    ...appConfigs,
+    otherConfig,
+    jsonConfig,
+];

go-web-app-develop/app/index.html

@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html
+    lang="en"
+    translate="no"
+>
+    <head>
+        <meta charset="UTF-8" />
+        <link
+            rel="icon"
+            type="image/svg+xml"
+            href="/go-icon.svg"
+        />
+        <meta
+            name="viewport"
+            content="width=device-width, initial-scale=1.0"
+        />
+        <meta
+            name="description"
+            content=""
+        />
+        <title>
+            %APP_TITLE%
+        </title>
+        <link rel="preconnect" href="https://fonts.googleapis.com">
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+        <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+        <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+        <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+
+        <style>
+            html, body {
+                margin: 0;
+                padding: 0;
+            }
+
+            body {
+                font-family: Poppins, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
+            }
+
+            @media screen {
+                body {
+                    background-color: #f7f7f7;
+                }
+            }
+
+            #webapp-preload {
+                width: 100vw;
+                height: 100vh;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+            }
+        </style>
+    </head>
+    <body>
+        <noscript>
+            %APP_TITLE% needs JS.
+        </noscript>
+        <div id="webapp-root">
+            <div id="webapp-preload">
+                %APP_TITLE% loading...
+            </div>
+        </div>
+        <script
+            type="module"
+            src="/src/index.tsx"
+        ></script>
+    </body>
+</html>

go-web-app-develop/app/package.json

@@ -0,0 +1,119 @@
+{
+    "name": "go-web-app",
+    "version": "7.21.0-beta.2",
+    "type": "module",
+    "private": true,
+    "license": "MIT",
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/IFRCGo/go-web-app.git",
+        "directory": "app"
+    },
+    "scripts": {
+        "translatte": "tsx scripts/translatte/main.ts",
+        "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",
+        "initialize:type": "mkdir -p generated/ && pnpm initialize:type:go-api && pnpm initialize:type:risk-api",
+        "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",
+        "generate:type": "pnpm generate:type:go-api && pnpm generate:type:risk-api",
+        "generate:type:go-api": "dotenv -- cross-var openapi-typescript \"%APP_API_ENDPOINT%api-docs/\" -o ./generated/types.ts --alphabetize",
+        "generate:type:risk-api": "dotenv -- cross-var openapi-typescript \"%APP_RISK_API_ENDPOINT%api-docs/\" -o ./generated/riskTypes.ts --alphabetize",
+        "prestart": "pnpm initialize:type",
+        "start": "pnpm -F @ifrc-go/ui build && vite",
+        "prebuild": "pnpm initialize:type",
+        "build": "pnpm -F @ifrc-go/ui build && vite build",
+        "preview": "vite preview",
+        "pretypecheck": "pnpm initialize:type",
+        "typecheck": "tsc",
+        "prelint:js": "pnpm initialize:type",
+        "lint:js": "eslint src",
+        "lint:css": "stylelint \"./src/**/*.css\"",
+        "lint:translation": "pnpm translatte:lint",
+        "lint": "pnpm lint:js && pnpm lint:css && pnpm lint:translation",
+        "lint:fix": "pnpm lint:js --fix && pnpm lint:css --fix",
+        "test": "vitest",
+        "test:coverage": "vitest run --coverage",
+        "surge:deploy": "branch=$(git rev-parse --symbolic-full-name --abbrev-ref HEAD); branch=$(echo $branch  | tr ./ -); cp ../build/index.html ../build/200.html; surge -p ../build/ -d https://ifrc-go-$branch.surge.sh",
+        "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": {
+        "@ifrc-go/icons": "^2.0.1",
+        "@ifrc-go/ui": "workspace:^",
+        "@sentry/react": "^7.81.1",
+        "@tinymce/tinymce-react": "^5.1.1",
+        "@togglecorp/fujs": "^2.1.1",
+        "@togglecorp/re-map": "^0.3.0",
+        "@togglecorp/toggle-form": "^2.0.4",
+        "@togglecorp/toggle-request": "^1.0.0-beta.3",
+        "@turf/bbox": "^6.5.0",
+        "@turf/buffer": "^6.5.0",
+        "exceljs": "^4.3.0",
+        "file-saver": "^2.0.5",
+        "html-to-image": "^1.11.11",
+        "mapbox-gl": "^1.13.0",
+        "papaparse": "^5.4.1",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
+        "react-router-dom": "^6.18.0",
+        "sanitize-html": "^2.10.0"
+    },
+    "devDependencies": {
+        "@eslint/eslintrc": "^3.1.0",
+        "@eslint/js": "^9.20.0",
+        "@eslint/json": "^0.5.0",
+        "@julr/vite-plugin-validate-env": "^1.0.1",
+        "@types/file-saver": "^2.0.5",
+        "@types/mapbox-gl": "^1.13.0",
+        "@types/node": "^20.11.6",
+        "@types/papaparse": "^5.3.8",
+        "@types/react": "^18.0.28",
+        "@types/react-dom": "^18.0.11",
+        "@types/sanitize-html": "^2.9.0",
+        "@types/yargs": "^17.0.32",
+        "@typescript-eslint/eslint-plugin": "^8.11.0",
+        "@typescript-eslint/parser": "^8.11.0",
+        "@vitejs/plugin-react-swc": "^3.5.0",
+        "@vitest/coverage-v8": "^1.2.2",
+        "autoprefixer": "^10.4.14",
+        "cross-var": "^1.1.0",
+        "dotenv-cli": "^7.4.2",
+        "eslint": "^9.20.1",
+        "eslint-config-airbnb": "^19.0.4",
+        "eslint-import-resolver-typescript": "^3.6.3",
+        "eslint-plugin-import": "^2.31.0",
+        "eslint-plugin-import-exports-imports-resolver": "^1.0.1",
+        "eslint-plugin-import-newlines": "^1.3.4",
+        "eslint-plugin-jsx-a11y": "^6.10.1",
+        "eslint-plugin-react": "^7.37.4",
+        "eslint-plugin-react-hooks": "^5.0.0",
+        "eslint-plugin-react-refresh": "^0.4.13",
+        "eslint-plugin-simple-import-sort": "^12.1.1",
+        "fast-glob": "^3.3.2",
+        "happy-dom": "^9.18.3",
+        "openapi-typescript": "6.5.5",
+        "postcss": "^8.5.3",
+        "postcss-nested": "^7.0.2",
+        "postcss-normalize": "^13.0.1",
+        "postcss-preset-env": "^10.1.5",
+        "rollup-plugin-visualizer": "^5.9.0",
+        "stylelint": "^16.17.0",
+        "stylelint-config-concentric": "^2.0.2",
+        "stylelint-config-recommended": "^15.0.0",
+        "stylelint-value-no-unknown-custom-properties": "^6.0.1",
+        "surge": "^0.23.1",
+        "ts-md5": "^1.3.1",
+        "tsx": "^4.7.2",
+        "typescript": "^5.5.2",
+        "typescript-eslint": "^8.26.0",
+        "vite": "^5.0.10",
+        "vite-plugin-checker": "^0.7.0",
+        "vite-plugin-compression2": "^0.11.0",
+        "vite-plugin-radar": "^0.9.2",
+        "vite-plugin-svgr": "^4.2.0",
+        "vite-plugin-webfont-dl": "^3.9.4",
+        "vite-tsconfig-paths": "^4.2.2",
+        "vitest": "^1.2.2",
+        "yargs": "^17.7.2"
+    }
+}

go-web-app-develop/app/postcss.config.cjs

@@ -0,0 +1,8 @@
+module.exports = {
+    plugins: [
+        require('postcss-preset-env'),
+        require('postcss-nested'),
+        require('postcss-normalize'),
+        require('autoprefixer'),
+    ],
+};

go-web-app-develop/app/scripts/translatte/README.md

@@ -0,0 +1,59 @@
+# translatte
+
+A simple script to synchronize translations in source code to translations in
+server
+
+## Usecase
+
+### Generating migrations
+
+When adding a new feature or updating existing feature or removing an
+existing feature on the codebase, we may need to update the strings used
+in the application.
+
+Developers can change the translations using their preferred choice of editor.
+
+Once all of the changes have been made, we can generate a migration file for the translations using:
+
+```bash
+pnpm translatte generate-migration ./src/translationMigrations ./src/**/i18n.json
+```
+
+Once the migration file has been created, the migration file can be committed to the VCS.
+
+### Applying migrations
+
+When we are deploying the changes to the server, we will need to update
+the strings in the server.
+
+We can generate the new set of strings for the server using:
+
+```bash
+pnpm translatte apply-migrations ./src/translationMigrations --last-migration "name_of_last_migration" --source "strings_json_from_server.json" --destination "new_strings_json_for_server.json"
+```
+
+### Merge migrations
+
+Once the migrations are applied to the strings in the server, we can merge the migrations into a single file.
+
+To merge migrations, we can run the following command:
+
+```bash
+pnpm translatte merge-migrations ./src/translationMigrations --from 'initial_migration.json' --to 'final_migration.json'
+```
+
+### Checking migrations
+
+We can use the following command to check for valid migrations:
+
+```bash
+pnpm translatte lint ./src/**/i18n.json
+```
+
+### Listing migrations
+
+We can use the following command to list all migrations:
+
+```bash
+pnpm translatte list-migrations ./src/translationMigrations
+```

go-web-app-develop/app/scripts/translatte/commands/applyMigrations.test.ts

@@ -0,0 +1,104 @@
+import { expect } from 'vitest';
+import { mkdirSync } from 'fs';
+import { join } from 'path';
+
+import { testWithTmpDir } from '../testHelpers';
+import {
+    writeFilePromisify,
+    readJsonFilesContents,
+} from '../utils';
+import {
+    migrationContent1,
+    migrationContent2,
+    migrationContent3,
+    migrationContent4,
+    migrationContent5,
+    migrationContent6,
+
+    strings1,
+    strings2,
+} from '../mockData';
+import applyMigrations from './applyMigrations';
+import { SourceFileContent } from '../types';
+
+testWithTmpDir('test applyMigrations with no data in server', async ({ tmpdir }) => {
+    mkdirSync(join(tmpdir, 'migrations'));
+    const migrations = [
+        { name: '000001-1000000000000.json', content: migrationContent1 },
+        { name: '000002-1000000000000.json', content: migrationContent2 },
+        { name: '000003-1000000000000.json', content: migrationContent3 },
+        { name: '000004-1000000000000.json', content: migrationContent4 },
+        { name: '000005-1000000000000.json', content: migrationContent5 },
+    ].map(({ name, content }) => writeFilePromisify(
+        join(tmpdir, 'migrations', name),
+        JSON.stringify(content, null, 4),
+        'utf8',
+    ));
+    await Promise.all(migrations);
+
+    mkdirSync(join(tmpdir, 'strings'));
+
+    const emptySourceFile: SourceFileContent = {
+        last_migration: undefined,
+        strings: [],
+    };
+    await writeFilePromisify(
+        join(tmpdir, 'strings', 'before.json'),
+        JSON.stringify(emptySourceFile),
+        'utf8',
+    );
+
+    await applyMigrations(
+        tmpdir,
+        join(tmpdir, 'strings', 'before.json'),
+        join(tmpdir, 'strings', 'after.json'),
+        'migrations',
+        ['np'],
+        undefined,
+        false,
+    );
+
+    const newSourceFiles = await readJsonFilesContents([
+        join(tmpdir, 'strings', 'after.json'),
+    ]);
+    const newSourceFileContent = newSourceFiles[0].content;
+
+    expect(newSourceFileContent).toEqual(strings1)
+});
+
+testWithTmpDir('test applyMigrations with data in server', async ({ tmpdir }) => {
+    mkdirSync(join(tmpdir, 'migrations'));
+    const migrations = [
+        { name: '000006-1000000000000.json', content: migrationContent6 },
+    ].map(({ name, content }) => writeFilePromisify(
+        join(tmpdir, 'migrations', name),
+        JSON.stringify(content, null, 4),
+        'utf8',
+    ));
+    await Promise.all(migrations);
+
+    mkdirSync(join(tmpdir, 'strings'));
+
+    await writeFilePromisify(
+        join(tmpdir, 'strings', 'before.json'),
+        JSON.stringify(strings1),
+        'utf8',
+    );
+
+    await applyMigrations(
+        tmpdir,
+        join(tmpdir, 'strings', 'before.json'),
+        join(tmpdir, 'strings', 'after.json'),
+        'migrations',
+        ['np'],
+        undefined,
+        false,
+    );
+
+    const newSourceFiles = await readJsonFilesContents([
+        join(tmpdir, 'strings', 'after.json'),
+    ]);
+    const newSourceFileContent = newSourceFiles[0].content;
+
+    expect(newSourceFileContent).toEqual(strings2)
+});

go-web-app-develop/app/scripts/translatte/commands/applyMigrations.ts

@@ -0,0 +1,177 @@
+import { Md5 } from 'ts-md5';
+import { listToMap, isDefined, unique } from '@togglecorp/fujs';
+import { isAbsolute, join, basename } from 'path';
+import {
+    readSource,
+    getMigrationFilesAttrs,
+    readMigrations,
+    writeFilePromisify,
+} from '../utils';
+import { merge } from './mergeMigrations';
+import {
+    SourceFileContent,
+    MigrationFileContent,
+    SourceStringItem,
+} from '../types';
+
+function apply(
+    strings: SourceStringItem[],
+    migrationActions: MigrationFileContent['actions'],
+    languages: string[],
+): SourceStringItem[] {
+    const stringsMapping = listToMap(
+        strings,
+        (item) => `${item.page_name}:${item.key}:${item.language}` as string,
+        (item) => item,
+    );
+
+    const newMapping: {
+        [key: string]: SourceStringItem | null;
+    } = { };
+
+    unique(['en', ...languages]).forEach((language) => {
+        migrationActions.forEach((action) => {
+            const isSourceLanguage = language === 'en';
+            const key = `${action.namespace}:${action.key}:${language}`;
+            if (action.action === 'add') {
+                const hash = Md5.hashStr(action.value);
+
+                const prevValue = stringsMapping[key];
+                // NOTE: we are comparing hash instead of value so that this works for source language as well as other languages
+                if (prevValue && prevValue.hash !== hash) {
+                    throw `Add: We already have string with different value for namespace '${action.namespace}' and key '${action.key}'`;
+                }
+
+                if (newMapping[key]) {
+                    throw `Add: We already have string for namespace '${action.namespace}' and key '${action.key}' in migration`;
+                }
+
+                newMapping[key] = {
+                    hash,
+                    key: action.key,
+                    page_name: action.namespace,
+                    language,
+                    value: isSourceLanguage
+                        ? action.value
+                        : '',
+                };
+            } else if (action.action === 'remove') {
+                // NOTE: We can add or move string so we might have value in newMapping
+                if (!newMapping[key]) {
+                    newMapping[key] = null;
+                }
+            } else {
+                const prevValue = stringsMapping[key];
+                if (!prevValue) {
+                    throw `Update: We do not have string with namespace '${action.namespace}' and key '${action.key}'`;
+                }
+
+                const newKey = action.newKey ?? prevValue.key;
+                const newNamespace = action.newNamespace ?? prevValue.page_name;
+                const newValue = isSourceLanguage
+                    ? action.newValue ?? prevValue.value
+                    : prevValue.value;
+                const newHash = isSourceLanguage
+                    ? Md5.hashStr(newValue)
+                    : prevValue.hash;
+
+                const newCanonicalKey = `${newNamespace}:${newKey}:${language}`;
+
+
+                // NOTE: remove the old key and add new key
+                if (!newMapping[key]) {
+                    newMapping[key] = null;
+                }
+
+                const newItem = {
+                    hash: newHash,
+                    key: newKey,
+                    page_name: newNamespace,
+                    language,
+                    value: newValue,
+                }
+
+                if (newMapping[newCanonicalKey]) {
+                    throw `Update: We already have string for namespace '${action.namespace}' and key '${action.key}' in migration`;
+                }
+                newMapping[newCanonicalKey] = newItem;
+            }
+        });
+    });
+
+    const finalMapping: typeof newMapping = {
+        ...stringsMapping,
+        ...newMapping,
+    };
+
+    return Object.values(finalMapping)
+        .filter(isDefined)
+        .sort((foo, bar) => (
+            foo.page_name.localeCompare(bar.page_name)
+            || foo.key.localeCompare(bar.key)
+            || foo.language.localeCompare(bar.language)
+        ))
+}
+
+async function applyMigrations(
+    projectPath: string,
+    sourceFileName: string,
+    destinationFileName: string,
+    migrationFilePath: string,
+    languages: string[],
+    from: string | undefined,
+    dryRun: boolean | undefined,
+) {
+    const sourcePath = isAbsolute(sourceFileName)
+        ? sourceFileName
+        : join(projectPath, sourceFileName)
+    const sourceFile = await readSource(sourcePath)
+
+    const migrationFilesAttrs = await getMigrationFilesAttrs(projectPath, migrationFilePath);
+    const selectedMigrationFilesAttrs = from
+        ? migrationFilesAttrs.filter((item) => (item.migrationName > from))
+        : migrationFilesAttrs;
+
+    console.info(`Found ${selectedMigrationFilesAttrs.length} migration files`);
+
+    if (selectedMigrationFilesAttrs.length < 1) {
+        throw 'There should be at least 1 migration file';
+    }
+
+    const selectedMigrations = await readMigrations(
+        selectedMigrationFilesAttrs.map((migration) => migration.fileName),
+    );
+
+    const lastMigration = selectedMigrations[selectedMigrations.length - 1];
+
+    const mergedMigrationActions = merge(
+        selectedMigrations.map((migration) => migration.content),
+    );
+
+    const outputSourceFileContent: SourceFileContent = {
+        ...sourceFile.content,
+        last_migration: basename(lastMigration.file),
+        strings: apply(
+            sourceFile.content.strings,
+            mergedMigrationActions,
+            languages,
+        ),
+    };
+
+    const destinationPath = isAbsolute(destinationFileName)
+        ? destinationFileName
+        : join(projectPath, destinationFileName)
+
+    if (dryRun) {
+        console.info(`Creating file '${destinationPath}'`);
+        console.info(outputSourceFileContent);
+    } else {
+        await writeFilePromisify(
+            destinationPath,
+            JSON.stringify(outputSourceFileContent, null, 4),
+            'utf8',
+        );
+    }
+}
+
+export default applyMigrations;

go-web-app-develop/app/scripts/translatte/commands/exportMigration.ts

@@ -0,0 +1,62 @@
+import xlsx from 'exceljs';
+
+import { readMigrations } from '../utils';
+import { isNotDefined } from '@togglecorp/fujs';
+
+async function exportMigration(
+    migrationFilePath: string,
+    exportFileName: string,
+) {
+    const migrations = await readMigrations(
+        [migrationFilePath]
+    );
+
+    const actions = migrations[0].content.actions;
+    const workbook = new xlsx.Workbook();
+    const now = new Date();
+    workbook.created = now;
+
+    const yyyy = now.getFullYear();
+    const mm = (now.getMonth() + 1).toString().padStart(2, '0');
+    const dd = now.getDate().toString().padStart(2, '0');
+    const worksheet = workbook.addWorksheet(
+        `${yyyy}-${mm}-${dd}`
+    );
+
+    worksheet.columns = [
+        { header: 'Namespace', key: 'namespace' },
+        { header: 'Key', key: 'key' },
+        { header: 'EN', key: 'en' },
+        { header: 'FR', key: 'fr' },
+        { header: 'ES', key: 'es' },
+        { header: 'AR', key: 'ar' },
+    ]
+
+    actions.forEach((actionItem) => {
+        if (actionItem.action === 'remove') {
+            return;
+        }
+
+        if (actionItem.action === 'update' && isNotDefined(actionItem.newValue)) {
+            return;
+        }
+
+        const value = actionItem.action === 'update'
+            ? actionItem.newValue
+            : actionItem.value;
+
+        worksheet.addRow({
+            namespace: actionItem.namespace,
+            key: actionItem.key,
+            en: value,
+        });
+    });
+
+    const fileName = isNotDefined(exportFileName)
+        ? `go-strings-${yyyy}-${mm}-${dd}`
+        : exportFileName;
+
+    await workbook.xlsx.writeFile(`${fileName}.xlsx`);
+}
+
+export default exportMigration;

go-web-app-develop/app/scripts/translatte/commands/generateMigration.test.ts

@@ -0,0 +1,102 @@
+import { expect } from 'vitest';
+import { mkdirSync } from 'fs';
+import { join } from 'path';
+
+import generateMigration from './generateMigration';
+import { testWithTmpDir } from '../testHelpers';
+import { writeFilePromisify, readMigrations } from '../utils';
+import {
+    migrationContent1,
+    migrationContent2,
+    migrationContent3,
+    migrationContent4,
+    migrationContent5,
+    loginContent,
+    registerContent,
+    updatedLoginContent,
+    updatedRegisterContent,
+    migrationContent6,
+} from '../mockData';
+
+
+testWithTmpDir('test generateMigration with no change', async ({ tmpdir }) => {
+    mkdirSync(join(tmpdir, 'migrations'));
+    const migrations = [
+        { name: '000001-1000000000000.json', content: migrationContent1 },
+        { name: '000002-1000000000000.json', content: migrationContent2 },
+        { name: '000003-1000000000000.json', content: migrationContent3 },
+        { name: '000004-1000000000000.json', content: migrationContent4 },
+        { name: '000005-1000000000000.json', content: migrationContent5 },
+    ].map(({ name, content }) => writeFilePromisify(
+        join(tmpdir, 'migrations', name),
+        JSON.stringify(content, null, 4),
+        'utf8',
+    ));
+    await Promise.all(migrations);
+
+    mkdirSync(join(tmpdir, 'src'));
+    const translations = [
+        { name: 'home.i18n.json', content: loginContent },
+        { name: 'register.i18n.json', content: registerContent },
+    ].map(({ name, content }) => writeFilePromisify(
+        join(tmpdir, 'src', name),
+        JSON.stringify(content, null, 4),
+        'utf8',
+    ));
+    await Promise.all(translations);
+
+    await expect(
+        () => generateMigration(
+            tmpdir,
+            'migrations',
+            'src/**/*.i18n.json',
+            new Date().getTime(),
+            false,
+        ),
+    ).rejects.toThrow('Nothing to do');
+});
+
+testWithTmpDir('test generateMigration with change', async ({ tmpdir }) => {
+    mkdirSync(join(tmpdir, 'migrations'));
+    const migrations = [
+        { name: '000001-1000000000000.json', content: migrationContent1 },
+        { name: '000002-1000000000000.json', content: migrationContent2 },
+        { name: '000003-1000000000000.json', content: migrationContent3 },
+        { name: '000004-1000000000000.json', content: migrationContent4 },
+        { name: '000005-1000000000000.json', content: migrationContent5 },
+    ].map(({ name, content }) => writeFilePromisify(
+        join(tmpdir, 'migrations', name),
+        JSON.stringify(content, null, 4),
+        'utf8',
+    ));
+    await Promise.all(migrations);
+
+    mkdirSync(join(tmpdir, 'src'));
+
+    const translations = [
+        { name: 'home.i18n.json', content: updatedLoginContent },
+        { name: 'register.i18n.json', content: updatedRegisterContent },
+    ].map(({ name, content }) => writeFilePromisify(
+        join(tmpdir, 'src', name),
+        JSON.stringify(content, null, 4),
+        'utf8',
+    ));
+    await Promise.all(translations);
+
+    const timestamp = new Date().getTime();
+
+    await generateMigration(
+        tmpdir,
+        'migrations',
+        'src/**/*.i18n.json',
+        timestamp,
+        false,
+    );
+
+    const generatedMigrations = await readMigrations([
+        join(tmpdir, 'migrations', `000006-${timestamp}.json`)
+    ]);
+    const generatedMigrationContent = generatedMigrations[0].content;
+
+    expect(generatedMigrationContent).toEqual(migrationContent6)
+});

go-web-app-develop/app/scripts/translatte/commands/generateMigration.ts

@@ -0,0 +1,195 @@
+import { Md5 } from 'ts-md5';
+import { join, isAbsolute } from 'path';
+
+import {
+    writeFilePromisify,
+    oneOneMapping,
+    readTranslations,
+    getTranslationFileNames,
+    getMigrationFilesAttrs,
+    readMigrations,
+    oneOneMappingNonUnique,
+} from '../utils';
+import { MigrationActionItem, MigrationFileContent } from '../types';
+import { merge } from './mergeMigrations';
+
+function getCombinedKey(key: string, namespace: string) {
+    return `${namespace}:${key}`;
+}
+
+type StateItem = {
+    filename?: string;
+    namespace: string;
+    key: string;
+    value: string;
+}
+
+// FIXME: The output should be stable
+function generateMigration(
+    prevState: StateItem[],
+    currentState: StateItem[],
+): MigrationActionItem[] {
+    /*
+    console.info('prevState length', prevState.length);
+    console.info('currentState length', currentState.length);
+    console.info('Total change', Math.abs(prevState.length - currentState.length));
+    */
+
+    const {
+        // Same, key, namespace and same value
+        validCommonItems: identicalStateItems,
+
+        // Same, key, namespace but different value
+        invalidCommonItems: valueUpdatedStateItems,
+
+        // items with different key or namespace or both
+        prevStateRemainder: potentiallyRemovedStateItems,
+
+        // items with different key or namespace or both
+        currentStateRemainder: potentiallyAddedStateItems,
+    } = oneOneMapping(
+        prevState,
+        currentState,
+        ({ key, namespace }) => getCombinedKey(key, namespace),
+        (prev, current) => prev.value === current.value,
+    );
+
+    console.info(`Unchanged strings: ${identicalStateItems.length}`)
+    console.info(`Value updated strings: ${valueUpdatedStateItems.length}`)
+
+    console.info(`Potentially removed: ${potentiallyRemovedStateItems.length}`)
+    console.info(`Potentially added: ${potentiallyAddedStateItems.length}`)
+
+    const {
+        commonItems: namespaceUpdatedStateItems,
+        prevStateRemainder: potentiallyRemovedStateItemsAfterNamespaceChange,
+        currentStateRemainder: potentiallyAddedStateItemsAfterNamespaceChange,
+    } = oneOneMappingNonUnique(
+        potentiallyRemovedStateItems,
+        potentiallyAddedStateItems,
+        (item) => getCombinedKey(item.key, Md5.hashStr(item.value)),
+    );
+
+    const {
+        commonItems: keyUpdatedStateItems,
+        prevStateRemainder: removedStateItems,
+        currentStateRemainder: addedStateItems,
+    } = oneOneMappingNonUnique(
+        potentiallyRemovedStateItemsAfterNamespaceChange,
+        potentiallyAddedStateItemsAfterNamespaceChange,
+        (item) => getCombinedKey(item.namespace, Md5.hashStr(item.value)),
+    );
+
+    console.info(`Namespace updated strings: ${namespaceUpdatedStateItems.length}`)
+    console.info(`Added strings: ${addedStateItems.length}`)
+    console.info(`Removed strings: ${removedStateItems.length}`)
+
+    return [
+        ...valueUpdatedStateItems.map(({ prevStateItem, currentStateItem }) => ({
+            action: 'update' as const,
+            key: prevStateItem.key,
+            namespace: prevStateItem.namespace,
+            newValue: currentStateItem.value,
+        })),
+        ...namespaceUpdatedStateItems.map(({ prevStateItem, currentStateItem }) => ({
+            action: 'update' as const,
+            key: prevStateItem.key,
+            namespace: prevStateItem.namespace,
+            newNamespace: currentStateItem.namespace,
+        })),
+        ...keyUpdatedStateItems.map(({ prevStateItem, currentStateItem }) => ({
+            action: 'update' as const,
+            key: prevStateItem.key,
+            newKey: currentStateItem.key,
+            namespace: prevStateItem.namespace,
+        })),
+        ...addedStateItems.map((item) => ({
+            action: 'add' as const,
+            key: item.key,
+            namespace: item.namespace,
+            value: item.value,
+        })),
+        ...removedStateItems.map((item) => ({
+            action: 'remove' as const,
+            key: item.key,
+            namespace: item.namespace,
+        })),
+    ].sort((foo, bar) => (
+        foo.namespace.localeCompare(bar.namespace)
+        || foo.action.localeCompare(bar.action)
+        || foo.key.localeCompare(bar.key)
+    ));
+}
+
+async function generate(
+    projectPath: string,
+    migrationFilePath: string,
+    translationFileName: string | string[],
+    timestamp: number,
+    dryRun: boolean | undefined,
+) {
+    const migrationFilesAttrs = await getMigrationFilesAttrs(projectPath, migrationFilePath);
+    const selectedMigrationFilesAttrs = migrationFilesAttrs;
+    console.info(`Found ${selectedMigrationFilesAttrs.length} migration files`);
+    const selectedMigrations = await readMigrations(
+        selectedMigrationFilesAttrs.map((migration) => migration.fileName),
+    );
+    const mergedMigrationActions = merge(
+        selectedMigrations.map((migration) => migration.content),
+    );
+
+    const serverState: StateItem[] = mergedMigrationActions.map((item) => {
+        if (item.action !== 'add') {
+            throw `The action should be "add" but found "${item.action}"`;
+        }
+        return {
+            filename: undefined,
+            namespace: item.namespace,
+            key: item.key,
+            value: item.value,
+        }
+    });
+    const translationFiles = await getTranslationFileNames(
+        projectPath,
+        Array.isArray(translationFileName) ? translationFileName : [translationFileName],
+    );
+    const { translations } = await readTranslations(translationFiles);
+    const fileState = translations.map((item) => ({
+        ...item,
+    }));
+
+    const migrationActionItems = generateMigration(
+        serverState,
+        fileState,
+    );
+
+    if (migrationActionItems.length <= 0) {
+        throw 'Nothing to do';
+    }
+
+    const lastMigration = migrationFilesAttrs[migrationFilesAttrs.length - 1];
+
+    const migrationContent: MigrationFileContent = {
+        parent: lastMigration?.migrationName,
+        actions: migrationActionItems,
+    }
+
+    const num = String(Number(lastMigration?.num ?? '000000') + 1).padStart(6, '0');
+
+    const outputMigrationFile = isAbsolute(migrationFilePath)
+        ? join(migrationFilePath, `${num}-${timestamp}.json`)
+        : join(projectPath, migrationFilePath, `${num}-${timestamp}.json`)
+
+    if (dryRun) {
+        console.info(`Creating migration file '${outputMigrationFile}'`);
+        console.info(migrationContent);
+    } else {
+        await writeFilePromisify(
+            outputMigrationFile,
+            JSON.stringify(migrationContent, null, 4),
+            'utf8',
+        );
+    }
+}
+
+export default generate;