UI refine & clean up

docker-compose.yml

@@ -32,8 +32,8 @@ services:
       MINIO_ROOT_USER: promptaid
       MINIO_ROOT_PASSWORD: promptaid
     ports:
-      - "9000:9000"   # S3 API
-      - "9001:9001"   # web console
+      - "9000:9000"
+      - "9001:9001"
     volumes:
       - minio_data:/data
     depends_on:

frontend/src/App.css

@@ -17,7 +17,6 @@ html, body {
   transform-origin: top center;
 }
 
-/* Responsive adjustments for different screen sizes */
 @media (min-width: 640px) {
   #root {
     padding: 1.5rem;

frontend/src/App.tsx

@@ -7,13 +7,13 @@ 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 MapDetailPage from './pages/MapDetailsPage';
 import DemoPage from './pages/DemoPage';
 import DevPage from './pages/DevPage';
 
 const router = createBrowserRouter([
   {
-    element: <RootLayout />,   // header sticks here
+    element: <RootLayout />,
     children: [
       { path: '/',          element: <UploadPage /> },
       { path: '/upload',    element: <UploadPage /> },
@@ -28,7 +28,6 @@ const router = createBrowserRouter([
 ]);
 
 function Application() {
-  // ALERTS
   const [alerts, setAlerts] = useState<AlertParams[]>([]);
 
   const addAlert = useCallback((alert: AlertParams) => {
@@ -79,7 +78,6 @@ function Application() {
     [alerts, addAlert, removeAlert, updateAlert],
   );
 
-  // LANGUAGE
   const languageContextValue = useMemo<LanguageContextProps>(
     () => ({
       languageNamespaceStatus: {},

frontend/src/components/Card.tsx

@@ -1,24 +1,10 @@
-// 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

frontend/src/components/HeaderNav.tsx

@@ -9,7 +9,6 @@ import {
   SettingsIcon,
 } from "@ifrc-go/icons";
 
-/* Put page info in one list so it's easy to extend */
 const navItems = [
   { to: "/upload",    label: "Upload",    Icon: UploadCloudLineIcon },
   { to: "/explore",   label: "Explore",   Icon: SearchLineIcon },
@@ -22,51 +21,70 @@ export default function HeaderNav() {
   const navigate = useNavigate();
 
   return (
-    <nav className="border-b border-gray-200 bg-white">
+    <nav className="border-b border-gray-200 bg-white shadow-sm sticky top-0 z-50 backdrop-blur-sm bg-white/95">
       <PageContainer
-        className="border-b border-ifrcRed"
-        contentClassName="flex items-center justify-between py-4"
+        className="border-b-2 border-ifrcRed"
+        contentClassName="flex items-center justify-between py-6"
       >
-        {/* ── Logo + title ─────────────────────────── */}
-        <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 
+          className="flex items-center gap-4 min-w-0 cursor-pointer group transition-all duration-200 hover:scale-105" 
+          onClick={() => navigate('/')}
+        >
+          <div className="p-2 rounded-lg bg-gradient-to-br from-ifrcRed/10 to-ifrcRed/20 group-hover:from-ifrcRed/20 group-hover:to-ifrcRed/30 transition-all duration-200">
+            <GoMainIcon className="h-8 w-8 flex-shrink-0 text-ifrcRed" />
+          </div>
+          <div className="flex flex-col">
+            <span className="font-bold text-xl text-gray-900 leading-tight">PromptAid Vision</span>
+            <span className="text-sm text-gray-500 font-medium">AI-Powered Image Analysis</span>
+          </div>
         </div>
 
-        {/* ── Centre nav links ─────────────────────── */}
-        <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;
+        <nav className="flex items-center space-x-2 bg-gray-50/80 rounded-xl p-2 backdrop-blur-sm">
+          {navItems.map(({ to, label, Icon }) => {
+            const isActive = location.pathname === to;
+            return (
+              <div key={to} className="relative">
+                <Button
+                  name={label.toLowerCase()}
+                  variant={isActive ? "primary" : "tertiary"}
+                  size={1}
+                  className={`transition-all duration-200 ${
+                    isActive 
+                      ? 'shadow-lg shadow-ifrcRed/20 transform scale-105' 
+                      : 'hover:bg-white hover:shadow-md hover:scale-105'
+                  }`}
+                  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>
-          ))}
+                    navigate(to);
+                  }}
+                >
+                  <Icon className={`w-4 h-4 transition-transform duration-200 ${
+                    isActive ? 'scale-110' : 'group-hover:scale-110'
+                  }`} /> 
+                  <span className="inline ml-2 font-semibold">{label}</span>
+                </Button>
+                {isActive && (
+                  <div className="absolute -bottom-2 left-1/2 transform -translate-x-1/2 w-8 h-1 bg-ifrcRed rounded-full animate-pulse"></div>
+                )}
+              </div>
+            );
+          })}
         </nav>
 
-        {/* ── Right-side utility buttons ───────────── */}
         <Button
           name="help"
           variant="tertiary"
           size={1}
+          className="transition-all duration-200 hover:bg-blue-50 hover:text-blue-600 hover:shadow-md hover:scale-105"
           onClick={() => navigate('/help')}
         >
           <QuestionLineIcon className="w-4 h-4" />
-          <span className="inline ml-2 font-medium">Help & Support</span>
+          <span className="inline ml-2 font-semibold">Help & Support</span>
         </Button>
       </PageContainer>
     </nav>

frontend/src/index.css

@@ -1,4 +1,3 @@
-/* src/index.css */
 @tailwind base;
 @tailwind components;
 @tailwind utilities;

frontend/src/layouts/RootLayout.tsx

@@ -5,7 +5,6 @@ export default function RootLayout() {
   return (
     <>
       <HeaderNav />
-      {/* All routed pages render here */}
       <Outlet />
     </>
   );

frontend/src/pages/AnalyticsPage/AnalyticsPage.module.css

@@ -0,0 +1,110 @@
+.tabSelector {
+  display: flex;
+  justify-content: center;
+  margin: var(--go-ui-spacing-xl) 0;
+}
+
+.summaryStats {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: var(--go-ui-spacing-lg);
+  margin-bottom: var(--go-ui-spacing-lg);
+}
+
+.progressSection {
+  margin-top: var(--go-ui-spacing-lg);
+  padding-top: var(--go-ui-spacing-lg);
+  border-top: var(--go-ui-width-separator-thin) solid var(--go-ui-color-separator);
+}
+
+.progressLabel {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: var(--go-ui-spacing-sm);
+  color: var(--go-ui-color-text);
+  font-weight: var(--go-ui-font-weight-medium);
+}
+
+.chartGrid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: var(--go-ui-spacing-xl);
+}
+
+.chartSection {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: var(--go-ui-spacing-lg);
+}
+
+.chartContainer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 300px;
+  background-color: var(--go-ui-color-gray-10);
+  border-radius: var(--go-ui-border-radius-lg);
+  border: var(--go-ui-width-separator-thin) solid var(--go-ui-color-separator);
+  padding: var(--go-ui-spacing-lg);
+}
+
+.tableContainer {
+  background-color: var(--go-ui-color-white);
+  border-radius: var(--go-ui-border-radius-lg);
+  border: var(--go-ui-width-separator-thin) solid var(--go-ui-color-separator);
+  overflow: hidden;
+  box-shadow: var(--go-ui-box-shadow-sm);
+}
+
+.modelPerformance {
+  background-color: var(--go-ui-color-white);
+  border-radius: var(--go-ui-border-radius-lg);
+  border: var(--go-ui-width-separator-thin) solid var(--go-ui-color-separator);
+  overflow: hidden;
+  box-shadow: var(--go-ui-box-shadow-sm);
+}
+
+.loadingContainer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 400px;
+  color: var(--go-ui-color-gray-60);
+  font-size: var(--go-ui-font-size-lg);
+  font-weight: var(--go-ui-font-weight-medium);
+}
+
+.errorContainer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 400px;
+  color: var(--go-ui-color-negative);
+  font-size: var(--go-ui-font-size-lg);
+  font-weight: var(--go-ui-font-weight-medium);
+}
+
+
+
+/* Responsive adjustments */
+@media (min-width: 1024px) {
+  .chartSection {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+@media (max-width: 768px) {
+  .summaryStats {
+    grid-template-columns: 1fr;
+    gap: var(--go-ui-spacing-md);
+  }
+  
+  .chartContainer {
+    min-height: 250px;
+    padding: var(--go-ui-spacing-md);
+  }
+  
+  .tabSelector {
+    margin: var(--go-ui-spacing-lg) 0;
+  }
+}

frontend/src/pages/{AnalyticsPage.tsx → AnalyticsPage/AnalyticsPage.tsx}

@@ -1,5 +1,3 @@
-// src/pages/AnalyticsPage.tsx
-
 import {
   PageContainer,
   PieChart,
@@ -16,7 +14,7 @@ import {
   numericIdSelector
 } from '@ifrc-go/ui/utils';
 import { useState, useEffect, useMemo } from 'react';
-// icons not used on this page
+import styles from './AnalyticsPage.module.css';
 
 interface AnalyticsData {
   totalCaptions: number;
@@ -80,7 +78,6 @@ export default function AnalyticsPage() {
   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' }
@@ -107,23 +104,22 @@ export default function AnalyticsPage() {
 
       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.event_type) analytics.types[map.event_type] = (analytics.types[map.event_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;
+        if (map.captions && map.captions.length > 0 && map.captions[0].model) {
+          const m = map.captions[0].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;
+          if (map.captions[0].accuracy != null) ctr.avgAccuracy += map.captions[0].accuracy;
+          if (map.captions[0].context != null) ctr.avgContext += map.captions[0].context;
+          if (map.captions[0].usability != null) ctr.avgUsability += map.captions[0].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;
@@ -136,14 +132,12 @@ export default function AnalyticsPage() {
         }
       });
 
-      // 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]) {
@@ -153,16 +147,16 @@ export default function AnalyticsPage() {
 
       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.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);
+          m.totalScore = Math.round((m.avgAccuracy + m.avgContext + m.avgUsability) / 3);
         }
       });
 
       setData(analytics);
     } catch (e) {
-      console.error(e);
+      
       setData(null);
     } finally {
       setLoading(false);
@@ -183,7 +177,7 @@ export default function AnalyticsPage() {
       setTypesLookup(types);
       setRegionsLookup(regions);
     } catch (e) {
-      console.error('Failed to fetch lookup data:', e);
+      
     }
   }
 
@@ -197,16 +191,9 @@ export default function AnalyticsPage() {
     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] = {
@@ -217,7 +204,6 @@ export default function AnalyticsPage() {
       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) => ({
@@ -228,7 +214,6 @@ export default function AnalyticsPage() {
       }));
   }, [data, regionsLookup]);
 
-  // Transform types data for IFRC Table
   const typesTableData = useMemo(() => {
     if (!data) return [];
     
@@ -242,7 +227,6 @@ export default function AnalyticsPage() {
       }));
   }, [data, typesLookup]);
 
-  // Transform sources data for IFRC Table
   const sourcesTableData = useMemo(() => {
     if (!data) return [];
     
@@ -256,7 +240,6 @@ export default function AnalyticsPage() {
       }));
   }, [data, sourcesLookup]);
 
-  // Transform models data for IFRC Table
   const modelsTableData = useMemo(() => {
     if (!data) return [];
     
@@ -273,7 +256,6 @@ export default function AnalyticsPage() {
       }));
   }, [data]);
 
-  // Create columns for regions table
   const regionsColumns = useMemo(() => [
     createStringColumn<RegionData, number>(
       'name',
@@ -296,7 +278,6 @@ export default function AnalyticsPage() {
     ),
   ], []);
 
-  // Create columns for types table
   const typesColumns = useMemo(() => [
     createStringColumn<TypeData, number>(
       'name',
@@ -319,7 +300,6 @@ export default function AnalyticsPage() {
     ),
   ], []);
 
-  // Create columns for sources table
   const sourcesColumns = useMemo(() => [
     createStringColumn<SourceData, number>(
       'name',
@@ -342,7 +322,6 @@ export default function AnalyticsPage() {
     ),
   ], []);
 
-  // Create columns for models table
   const modelsColumns = useMemo(() => [
     createStringColumn<ModelData, number>(
       'name',
@@ -395,7 +374,7 @@ export default function AnalyticsPage() {
   if (loading) {
     return (
       <PageContainer>
-        <div className="flex items-center justify-center min-h-[400px]">
+        <div className={styles.loadingContainer}>
           <Spinner />
         </div>
       </PageContainer>
@@ -405,7 +384,7 @@ export default function AnalyticsPage() {
   if (!data) {
     return (
       <PageContainer>
-        <div className="flex items-center justify-center min-h-[400px]">
+        <div className={styles.errorContainer}>
           <div className="text-red-500">Failed to load analytics data. Please try again.</div>
         </div>
       </PageContainer>
@@ -413,22 +392,13 @@ export default function AnalyticsPage() {
   }
 
   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 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
+    '#F5333F', '#F64752', '#F75C65', '#F87079', '#F9858C', '#FA999F', '#FBADB2', '#FCC2C5'
   ];
 
-
   return (
     <PageContainer>
       <Container
@@ -438,8 +408,7 @@ export default function AnalyticsPage() {
         withInternalPadding
         className="max-w-7xl mx-auto"
       >
-        {/* Tab selector */}
-        <div className="flex justify-center my-6">
+        <div className={styles.tabSelector}>
           <SegmentInput
             name="analytics-view"
             value={view}
@@ -455,10 +424,9 @@ export default function AnalyticsPage() {
         </div>
 
         {view === 'general' ? (
-          <div className="space-y-8">
-            {/* Summary Statistics */}
+          <div className={styles.chartGrid}>
             <Container heading="Summary Statistics" headingLevel={3} withHeaderBorder withInternalPadding>
-              <div className="grid grid-cols-2 gap-4">
+              <div className={styles.summaryStats}>
                 <KeyFigure
                   value={data.totalCaptions}
                   label="Total Captions"
@@ -470,8 +438,8 @@ export default function AnalyticsPage() {
                   compactValue
                 />
               </div>
-              <div className="mt-6">
-                <div className="flex justify-between mb-2">
+              <div className={styles.progressSection}>
+                <div className={styles.progressLabel}>
                   <span>Progress towards target</span>
                   <span>{Math.round((data.totalCaptions / 2000) * 100)}%</span>
                 </div>
@@ -479,11 +447,9 @@ export default function AnalyticsPage() {
               </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]">
+              <div className={styles.chartSection}>
+                <div className={styles.chartContainer}>
                   <PieChart
                     data={regionsChartData}
                     valueSelector={d => d.value}
@@ -493,7 +459,7 @@ export default function AnalyticsPage() {
                     showPercentageInLegend
                   />
                 </div>
-                <div className="w-full">
+                <div className={styles.tableContainer}>
                   <Table
                     data={regionsTableData}
                     columns={regionsColumns}
@@ -505,10 +471,9 @@ export default function AnalyticsPage() {
               </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]">
+              <div className={styles.chartSection}>
+                <div className={styles.chartContainer}>
                   <PieChart
                     data={sourcesChartData}
                     valueSelector={d => d.value}
@@ -518,7 +483,7 @@ export default function AnalyticsPage() {
                     showPercentageInLegend
                   />
                 </div>
-                <div className="w-full">
+                <div className={styles.tableContainer}>
                   <Table
                     data={sourcesTableData}
                     columns={sourcesColumns}
@@ -530,10 +495,9 @@ export default function AnalyticsPage() {
               </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]">
+              <div className={styles.chartSection}>
+                <div className={styles.chartContainer}>
                   <PieChart
                     data={typesChartData}
                     valueSelector={d => d.value}
@@ -543,7 +507,7 @@ export default function AnalyticsPage() {
                     showPercentageInLegend
                   />
                 </div>
-                <div className="w-full">
+                <div className={styles.tableContainer}>
                   <Table
                     data={typesTableData}
                     columns={typesColumns}
@@ -556,16 +520,17 @@ export default function AnalyticsPage() {
             </Container>
           </div>
         ) : (
-          <div className="space-y-8">
-            {/* Model Performance */}
+          <div className={styles.chartGrid}>
             <Container heading="Model Performance" headingLevel={3} withHeaderBorder withInternalPadding>
-              <Table
-                data={modelsTableData}
-                columns={modelsColumns}
-                keySelector={numericIdSelector}
-                filtered={false}
-                pending={false}
-              />
+              <div className={styles.modelPerformance}>
+                <Table
+                  data={modelsTableData}
+                  columns={modelsColumns}
+                  keySelector={numericIdSelector}
+                  filtered={false}
+                  pending={false}
+                />
+              </div>
             </Container>
           </div>
         )}

frontend/src/pages/AnalyticsPage/index.ts

@@ -0,0 +1 @@
+export { default } from './AnalyticsPage';

frontend/src/pages/DemoPage.tsx

@@ -10,132 +10,51 @@ import {
   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,
+  BlockLoading,
 } 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('');
@@ -149,7 +68,7 @@ export default function DemoPage() {
   const [booleanValue, setBooleanValue] = useState(false);
   const [segmentValue, setSegmentValue] = useState('option1');
 
-  // Dummy data
+  
   const dummyOptions = [
     { key: 'option1', label: 'Option 1' },
     { key: 'option2', label: 'Option 2' },
@@ -168,12 +87,7 @@ export default function DemoPage() {
     { 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 },
@@ -182,14 +96,7 @@ export default function DemoPage() {
     { 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 },
@@ -203,47 +110,47 @@ export default function DemoPage() {
     setTimeout(() => setLoading(false), 2000);
   };
 
-  const handleTextChange = (value: string | undefined, name: string) => {
+  const handleTextChange = (value: string | undefined) => {
     setTextValue(value || '');
   };
 
-  const handlePasswordChange = (value: string | undefined, name: string) => {
+  const handlePasswordChange = (value: string | undefined) => {
     setPasswordValue(value || '');
   };
 
-  const handleNumberChange = (value: number | undefined, name: string) => {
+  const handleNumberChange = (value: number | undefined) => {
     setNumberValue(value);
   };
 
-  const handleDateChange = (value: string | undefined, name: string) => {
+  const handleDateChange = (value: string | undefined) => {
     setDateValue(value || '');
   };
 
-  const handleSelectChange = (value: string | undefined, name: string) => {
+  const handleSelectChange = (value: string | undefined) => {
     setSelectValue(value || '');
   };
 
-  const handleMultiSelectChange = (value: string[], name: string) => {
+  const handleMultiSelectChange = (value: string[]) => {
     setMultiSelectValue(value);
   };
 
-  const handleCheckboxChange = (value: boolean, name: string) => {
+  const handleCheckboxChange = (value: boolean) => {
     setCheckboxValue(value);
   };
 
-  const handleRadioChange = (value: string, name: string) => {
+  const handleRadioChange = (value: string) => {
     setRadioValue(value);
   };
 
-  const handleSwitchChange = (value: boolean, name: string) => {
+  const handleSwitchChange = (value: boolean) => {
     setSwitchValue(value);
   };
 
-  const handleBooleanChange = (value: boolean, name: string) => {
+  const handleBooleanChange = (value: boolean) => {
     setBooleanValue(value);
   };
 
-  const handleSegmentChange = (value: string, name: string) => {
+  const handleSegmentChange = (value: string) => {
     setSegmentValue(value);
   };
 
@@ -255,7 +162,7 @@ export default function DemoPage() {
           <div className="space-y-6">
             {/* Navigation Tabs */}
             <div>
-              <h3 className="text-lg font-semibold mb-4">Navigation Tab List</h3>
+              <Heading level={3} className="mb-4">Navigation Tab List</Heading>
               <NavigationTabList variant="primary">
                 <Button name="upload" variant="primary">Upload</Button>
                 <Button name="analytics" variant="secondary">Analytics</Button>
@@ -266,7 +173,7 @@ export default function DemoPage() {
 
             {/* Top Banner */}
             <div>
-              <h3 className="text-lg font-semibold mb-4">Top Banner</h3>
+              <Heading level={3} className="mb-4">Top Banner</Heading>
               <div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
                 <div className="flex justify-between items-start">
                   <div>
@@ -282,7 +189,7 @@ export default function DemoPage() {
 
             {/* Breadcrumbs */}
             <div>
-              <h3 className="text-lg font-semibold mb-4">Breadcrumbs</h3>
+              <Heading level={3} className="mb-4">Breadcrumbs</Heading>
               <nav className="flex" aria-label="Breadcrumb">
                 <ol className="flex items-center space-x-2">
                   <li>
@@ -311,7 +218,7 @@ export default function DemoPage() {
           <div className="space-y-6">
             {/* Buttons */}
             <div>
-              <h3 className="text-lg font-semibold mb-4">Buttons</h3>
+              <Heading level={3} className="mb-4">Buttons</Heading>
               <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>
@@ -332,7 +239,7 @@ export default function DemoPage() {
 
             {/* Icon Buttons */}
             <div>
-              <h3 className="text-lg font-semibold mb-4">Icon Buttons</h3>
+              <Heading level={3} className="mb-4">Icon Buttons</Heading>
               <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 />
@@ -547,7 +454,7 @@ export default function DemoPage() {
                         name="radio"
                         value="option1"
                         checked={radioValue === 'option1'}
-                        onChange={(e) => handleRadioChange(e.target.value, 'radio')}
+                        onChange={(e) => handleRadioChange(e.target.value)}
                         className="mr-2"
                       />
                       <span className="text-sm">Option 1</span>
@@ -558,7 +465,7 @@ export default function DemoPage() {
                         name="radio"
                         value="option2"
                         checked={radioValue === 'option2'}
-                        onChange={(e) => handleRadioChange(e.target.value, 'radio')}
+                        onChange={(e) => handleRadioChange(e.target.value)}
                         className="mr-2"
                       />
                       <span className="text-sm">Option 2</span>
@@ -569,7 +476,7 @@ export default function DemoPage() {
                         name="radio"
                         value="option3"
                         checked={radioValue === 'option3'}
-                        onChange={(e) => handleRadioChange(e.target.value, 'radio')}
+                        onChange={(e) => handleRadioChange(e.target.value)}
                         className="mr-2"
                       />
                       <span className="text-sm">Option 3</span>
@@ -642,7 +549,7 @@ export default function DemoPage() {
                     valueSelector={(d) => d.value}
                     labelSelector={(d) => d.name}
                     keySelector={(d) => d.name}
-                    colorSelector={(d) => '#dc2626'}
+                    colorSelector={() => '#dc2626'}
                     showPercentageInLegend
                   />
                 </div>
@@ -670,40 +577,7 @@ export default function DemoPage() {
               </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>

frontend/src/pages/DevPage.tsx

@@ -3,11 +3,9 @@ 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;
@@ -16,7 +14,6 @@ export default function DevPage() {
   }>>([]);
   const [selectedModel, setSelectedModel] = useState<string>('');
 
-  // Fetch models on component mount
   useEffect(() => {
     fetchModels();
   }, []);
@@ -25,11 +22,8 @@ export default function DevPage() {
     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)) {
@@ -42,7 +36,7 @@ export default function DevPage() {
         }
       })
       .catch(err => {
-        console.error('Failed to fetch models:', err);
+
       });
   };
 
@@ -59,7 +53,6 @@ export default function DevPage() {
       });
 
       if (response.ok) {
-        // Update local state
         setAvailableModels(prev => 
           prev.map(model => 
             model.m_code === modelCode 
@@ -67,19 +60,15 @@ export default function DevPage() {
               : 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);
@@ -195,12 +184,10 @@ export default function DevPage() {
                     fetch('/api/models')
                       .then(r => r.json())
                       .then(data => {
-                        console.log('Models API response:', data);
-                        alert('Check console for models API response');
+                        alert('Models API response received successfully');
                       })
                       .catch(err => {
-                        console.error('Models API error:', err);
-                        alert('Models API error - check console');
+                        alert('Models API error occurred');
                       });
                   }}
                 >
@@ -216,12 +203,10 @@ export default function DevPage() {
                     fetch(`/api/models/${selectedModel}/test`)
                       .then(r => r.json())
                       .then(data => {
-                        console.log('Model test response:', data);
-                        alert('Check console for model test response');
+                        alert('Model test completed successfully');
                       })
                       .catch(err => {
-                        console.error('Model test error:', err);
-                        alert('Model test error - check console');
+                        alert('Model test failed');
                       });
                   }}
                 >

frontend/src/pages/ExplorePage.tsx

@@ -1,365 +0,0 @@
-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;
-  file_key: string;
-  image_url: string;
-  source: string;
-  type: string;
-  epsg: string;
-  image_type: string;
-  countries?: {c_code: string, label: string, r_code: string}[];
-  caption?: {
-    title: string;
-    generated: string;
-    edited?: string;
-    starred?: boolean;
-  };
-}
-
-export default function ExplorePage() {
-  const navigate = useNavigate();
-  const [maps, setMaps] = useState<MapOut[]>([]);
-  const [search, setSearch] = useState('');
-  const [srcFilter, setSrcFilter] = useState('');
-  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 [isLoadingFilters, setIsLoadingFilters] = useState(true);
-
-  const fetchMaps = () => {
-    setIsLoadingFilters(true);
-    // Fetch maps
-    fetch('/api/images/')
-      .then(r => {
-        if (!r.ok) {
-          throw new Error(`HTTP ${r.status}: ${r.statusText}`);
-        }
-        return r.json();
-      })
-      .then(data => {
-        // Ensure data is an array
-        if (Array.isArray(data)) {
-          setMaps(data);
-          console.log(`Loaded ${data.length} maps`);
-          if (data.length > 0) {
-            console.log('Sample map data:', {
-              image_id: data[0].image_id,
-              source: data[0].source,
-              type: data[0].type,
-              countries: data[0].countries?.length || 0,
-              caption: data[0].caption ? 'has caption' : 'no caption'
-            });
-          }
-        } else {
-          console.error('Expected array from /api/images/, got:', data);
-          setMaps([]);
-        }
-      })
-      .catch(err => {
-        console.error('Failed to fetch maps:', err);
-        setMaps([]);
-      })
-      .finally(() => {
-        setIsLoadingFilters(false);
-      });
-  };
-
-  useEffect(() => {
-    fetchMaps();
-  }, []);
-
-  // Auto-refresh when component becomes visible (user navigates back)
-  useEffect(() => {
-    const handleVisibilityChange = () => {
-      if (!document.hidden) {
-        fetchMaps();
-      }
-    };
-
-    document.addEventListener('visibilitychange', handleVisibilityChange);
-    return () => {
-      document.removeEventListener('visibilitychange', handleVisibilityChange);
-    };
-  }, []);
-
-  useEffect(() => {
-    // Fetch lookup data
-    console.log('Fetching filter data...');
-    setIsLoadingFilters(true);
-    
-    Promise.all([
-      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,
-        types: typesData.length,
-        regions: regionsData.length,
-        countries: countriesData.length
-      });
-      
-      if (Array.isArray(sourcesData)) {
-        setSources(sourcesData);
-      } else {
-        console.error('Expected array from /api/sources, got:', sourcesData);
-        setSources([]);
-      }
-      
-      if (Array.isArray(typesData)) {
-        setTypes(typesData);
-      } else {
-        console.error('Expected array from /api/types, got:', typesData);
-        setTypes([]);
-      }
-      
-      if (Array.isArray(regionsData)) {
-        setRegions(regionsData);
-      } else {
-        console.error('Expected array from /api/regions, got:', regionsData);
-        setRegions([]);
-      }
-      
-      if (Array.isArray(countriesData)) {
-        setCountries(countriesData);
-      } else {
-        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);
-    });
-  }, []);
-
-  const filtered = useMemo(() => {
-    // Ensure maps is an array before filtering
-    if (!Array.isArray(maps)) {
-      console.warn('maps is not an array:', maps);
-      return [];
-    }
-    
-    return maps.filter(m => {
-      // 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));
-      
-      // Filter by source
-      const sourceMatch = !srcFilter || m.source === srcFilter;
-      
-      // Filter by type
-      const typeMatch = !catFilter || m.type === catFilter;
-      
-      // Filter by region (check if any country in the image belongs to the selected region)
-      const regionMatch = !regionFilter || (m.countries && m.countries.some(c => c.r_code === regionFilter));
-      
-      // 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));
-      
-      // 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="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="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]"
-            />
-
-            <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}
-            />
-
-            <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}
-            />
-
-            <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}
-            />
-
-            <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>
-
-        {/* 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>
-
-          {/* 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/ExplorePage/ExplorePage.module.css

@@ -0,0 +1,125 @@
+.metadataTags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--go-ui-spacing-sm);
+  align-items: center;
+}
+
+.metadataTag {
+  padding: var(--go-ui-spacing-xs) var(--go-ui-spacing-sm);
+  background-color: var(--go-ui-color-red-10);
+  color: var(--go-ui-color-red-90);
+  font-size: var(--go-ui-font-size-xs);
+  border-radius: var(--go-ui-border-radius-md);
+  font-weight: var(--go-ui-font-weight-medium);
+  border: var(--go-ui-width-separator-thin) solid var(--go-ui-color-red-20);
+  transition: all var(--go-ui-duration-transition-fast) ease;
+  white-space: nowrap;
+}
+
+.metadataTag:hover {
+  background-color: var(--go-ui-color-red-20);
+  transform: translateY(-1px);
+  box-shadow: var(--go-ui-box-shadow-xs);
+}
+
+.metadataTagSource {
+  padding: var(--go-ui-spacing-xs) var(--go-ui-spacing-sm);
+  background-color: var(--go-ui-color-blue-10);
+  color: var(--go-ui-color-blue-90);
+  font-size: var(--go-ui-font-size-xs);
+  border-radius: var(--go-ui-border-radius-md);
+  font-weight: var(--go-ui-font-weight-medium);
+  border: var(--go-ui-width-separator-thin) solid var(--go-ui-color-blue-20);
+  white-space: nowrap;
+}
+
+.metadataTagType {
+  padding: var(--go-ui-spacing-xs) var(--go-ui-spacing-sm);
+  background-color: var(--go-ui-color-red-90);
+  color: var(--go-ui-color-white);
+  font-size: var(--go-ui-font-size-xs);
+  border-radius: var(--go-ui-border-radius-md);
+  font-weight: var(--go-ui-font-weight-medium);
+  border: var(--go-ui-width-separator-thin) solid var(--go-ui-color-red-90);
+  white-space: nowrap;
+}
+
+.mapItem {
+  border: var(--go-ui-width-separator-thin) solid var(--go-ui-color-separator);
+  border-radius: var(--go-ui-border-radius-lg);
+  padding: var(--go-ui-spacing-lg);
+  display: flex;
+  gap: var(--go-ui-spacing-lg);
+  cursor: pointer;
+  transition: all var(--go-ui-duration-transition-medium) ease;
+  background-color: var(--go-ui-color-white);
+}
+
+.mapItem:hover {
+  background-color: var(--go-ui-color-gray-10);
+  border-color: var(--go-ui-color-gray-30);
+  box-shadow: var(--go-ui-box-shadow-sm);
+  transform: translateY(-1px);
+}
+
+.mapItemImage {
+  background-color: var(--go-ui-color-gray-20);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--go-ui-color-gray-60);
+  font-size: var(--go-ui-font-size-xs);
+  overflow: hidden;
+  border-radius: var(--go-ui-border-radius-md);
+  border: var(--go-ui-width-separator-thin) solid var(--go-ui-color-separator);
+  flex-shrink: 0;
+}
+
+.mapItemImage img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  image-rendering: pixelated;
+}
+
+.mapItemContent {
+  flex: 1;
+  min-width: 0;
+}
+
+.mapItemTitle {
+  font-weight: var(--go-ui-font-weight-medium);
+  color: var(--go-ui-color-text);
+  margin-bottom: var(--go-ui-spacing-sm);
+  font-size: var(--go-ui-font-size-md);
+  line-height: var(--go-ui-line-height-md);
+}
+
+.mapItemMetadata {
+  margin-bottom: var(--go-ui-spacing-sm);
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  .mapItem {
+    flex-direction: column;
+    gap: var(--go-ui-spacing-md);
+  }
+  
+  .mapItemImage {
+    width: 100%;
+    height: 120px;
+  }
+  
+  .metadataTags {
+    gap: var(--go-ui-spacing-xs);
+  }
+  
+  .metadataTag,
+  .metadataTagSource,
+  .metadataTagType {
+    font-size: var(--go-ui-font-size-xs);
+    padding: var(--go-ui-spacing-2xs) var(--go-ui-spacing-xs);
+  }
+}

frontend/src/pages/ExplorePage/ExplorePage.tsx

@@ -0,0 +1,357 @@
+import { PageContainer, TextInput, SelectInput, MultiSelectInput, Button, Container } from '@ifrc-go/ui';
+import { useState, useEffect, useMemo } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { StarLineIcon } from '@ifrc-go/icons';
+import styles from './ExplorePage.module.css';
+
+interface CaptionWithImageOut {
+  cap_id: string;
+  image_id: string;
+  title: string;
+  prompt: string;
+  model: string;
+  schema_id: string;
+  raw_json: any;
+  generated: string;
+  edited?: string;
+  accuracy?: number;
+  context?: number;
+  usability?: number;
+  starred: boolean;
+  created_at?: string;
+  updated_at?: string;
+  file_key: string;
+  image_url: string;
+  source: string;
+  event_type: string;
+  epsg: string;
+  image_type: string;
+  countries: {c_code: string, label: string, r_code: string}[];
+}
+
+export default function ExplorePage() {
+  const navigate = useNavigate();
+  const [captions, setCaptions] = useState<CaptionWithImageOut[]>([]);
+  const [search, setSearch] = useState('');
+  const [srcFilter, setSrcFilter] = useState('');
+  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 [isLoadingFilters, setIsLoadingFilters] = useState(true);
+
+  const fetchCaptions = () => {
+    setIsLoadingFilters(true);
+    fetch('/api/captions')
+      .then(r => {
+        if (!r.ok) {
+          throw new Error(`HTTP ${r.status}: ${r.statusText}`);
+        }
+        return r.json();
+      })
+      .then(data => {
+        if (Array.isArray(data)) {
+          setCaptions(data);
+
+        } else {
+  
+          setCaptions([]);
+        }
+      })
+      .catch(() => {
+        setCaptions([]);
+      })
+      .finally(() => {
+        setIsLoadingFilters(false);
+      });
+  };
+
+  useEffect(() => {
+    fetchCaptions();
+  }, []);
+
+  useEffect(() => {
+    const handleVisibilityChange = () => {
+      if (!document.hidden) {
+        fetchCaptions();
+      }
+    };
+
+    document.addEventListener('visibilitychange', handleVisibilityChange);
+    return () => {
+      document.removeEventListener('visibilitychange', handleVisibilityChange);
+    };
+  }, []);
+
+  useEffect(() => {
+
+    setIsLoadingFilters(true);
+    
+    Promise.all([
+      fetch('/api/sources').then(r => {
+        if (!r.ok) throw new Error(`HTTP ${r.status}: ${r.statusText}`);
+        return r.json();
+      }),
+      fetch('/api/types').then(r => {
+        if (!r.ok) throw new Error(`HTTP ${r.status}: ${r.statusText}`);
+        return r.json();
+      }),
+      fetch('/api/regions').then(r => {
+        if (!r.ok) throw new Error(`HTTP ${r.status}: ${r.statusText}`);
+        return r.json();
+      }),
+      fetch('/api/countries').then(r => {
+        if (!r.ok) throw new Error(`HTTP ${r.status}: ${r.statusText}`);
+        return r.json();
+      })
+    ]).then(([sourcesData, typesData, regionsData, countriesData]) => {
+
+      
+      if (Array.isArray(sourcesData)) {
+        setSources(sourcesData);
+      } else {
+
+        setSources([]);
+      }
+      
+      if (Array.isArray(typesData)) {
+        setTypes(typesData);
+      } else {
+
+        setTypes([]);
+      }
+      
+      if (Array.isArray(regionsData)) {
+        setRegions(regionsData);
+      } else {
+
+        setRegions([]);
+      }
+      
+      if (Array.isArray(countriesData)) {
+        setCountries(countriesData);
+      } else {
+
+        setCountries([]);
+      }
+      
+      setIsLoadingFilters(false);
+    }).catch(() => {
+
+      setSources([]);
+      setTypes([]);
+      setRegions([]);
+      setCountries([]);
+      setIsLoadingFilters(false);
+    });
+  }, []);
+
+  const filtered = useMemo(() => {
+    if (!Array.isArray(captions)) {
+      
+      return [];
+    }
+    
+    return captions.filter(c => {
+      const searchLower = search.toLowerCase();
+      const searchMatch = !search || 
+        c.file_key.toLowerCase().includes(searchLower) ||
+        c.source.toLowerCase().includes(searchLower) ||
+        c.event_type.toLowerCase().includes(searchLower) ||
+        c.title.toLowerCase().includes(searchLower) ||
+        (c.edited && c.edited.toLowerCase().includes(searchLower)) ||
+        (c.generated && c.generated.toLowerCase().includes(searchLower));
+      
+      const sourceMatch = !srcFilter || c.source === srcFilter;
+      const typeMatch = !catFilter || c.event_type === catFilter;
+      const regionMatch = !regionFilter || (c.countries && c.countries.some(c => c.r_code === regionFilter));
+      const countryMatch = !countryFilter || (c.countries && c.countries.some(c => c.c_code === countryFilter));
+      const starredMatch = !showStarredOnly || c.starred === true;
+      
+      return searchMatch && sourceMatch && typeMatch && regionMatch && countryMatch && starredMatch;
+    });
+  }, [captions, search, srcFilter, catFilter, regionFilter, countryFilter]);
+
+  return (
+    <PageContainer>
+      <Container
+        heading="Explore Examples"
+        headingLevel={2}
+        withHeaderBorder
+        withInternalPadding
+        className="max-w-7xl mx-auto"
+      >
+        <div className="space-y-6">
+          {/* Header Section */}
+          <div className="flex justify-between items-center">
+            <div>
+              <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 = {
+                    captions: captions,
+                    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-captions-${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 */}
+          <Container heading="Search & Filters" headingLevel={3} withHeaderBorder withInternalPadding>
+            <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]"
+              />
+
+              <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}
+              />
+
+              <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}
+              />
+
+              <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}
+              />
+
+              <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>
+          </Container>
+
+          {/* Results Section */}
+          <Container heading="Results" headingLevel={3} withHeaderBorder withInternalPadding>
+            <div className="space-y-4">
+              <div className="flex justify-between items-center">
+                <p className="text-sm text-gray-600">
+                  {filtered.length} of {captions.length} examples
+                </p>
+              </div>
+
+              {/* List */}
+              <div className="space-y-4">
+                {filtered.map(c => (
+                  <div key={c.cap_id} className={styles.mapItem} onClick={() => navigate(`/map/${c.image_id}?captionId=${c.cap_id}`)}>
+                    <div className={styles.mapItemImage} style={{ width: '120px', height: '80px' }}>
+                      {c.image_url ? (
+                        <img 
+                          src={c.image_url} 
+                          alt={c.file_key}
+                          onError={(e) => {
+                            const target = e.target as HTMLImageElement;
+                            target.style.display = 'none';
+                            target.parentElement!.innerHTML = 'Img';
+                          }}
+                        />
+                      ) : (
+                        'Img'
+                      )}
+                    </div>
+                    <div className={styles.mapItemContent}>
+                      <h3 className={styles.mapItemTitle}>
+                        {c.title}
+                      </h3>
+                      <div className={styles.mapItemMetadata}>
+                        <div className={styles.metadataTags}>
+                          <span className={styles.metadataTagSource}>
+                            {c.source}
+                          </span>
+                          <span className={styles.metadataTagType}>
+                            {c.event_type}
+                          </span>
+                          <span className={styles.metadataTag}>
+                            {c.epsg}
+                          </span>
+                          <span className={styles.metadataTag}>
+                            {c.image_type}
+                          </span>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                ))}
+
+                {!filtered.length && (
+                  <div className="text-center py-12">
+                    <p className="text-gray-500">No examples found.</p>
+                  </div>
+                )}
+              </div>
+            </div>
+          </Container>
+        </div>
+      </Container>
+    </PageContainer>
+  );
+}

frontend/src/pages/ExplorePage/index.ts

@@ -0,0 +1 @@
+export { default } from './ExplorePage';

frontend/src/pages/MapDetailsPage/MapDetailPage.module.css

@@ -0,0 +1,184 @@
+.backButton {
+  margin-bottom: var(--go-ui-spacing-lg);
+}
+
+.imageContainer {
+  background-color: var(--go-ui-color-gray-20);
+  border-radius: var(--go-ui-border-radius-lg);
+  overflow: hidden;
+  border: var(--go-ui-width-separator-thin) solid var(--go-ui-color-separator);
+  box-shadow: var(--go-ui-box-shadow-sm);
+  transition: box-shadow var(--go-ui-duration-transition-medium) ease;
+}
+
+.imageContainer:hover {
+  box-shadow: var(--go-ui-box-shadow-md);
+}
+
+.imageContainer img {
+  width: 100%;
+  height: auto;
+  object-fit: contain;
+  image-rendering: pixelated;
+  display: block;
+}
+
+.imagePlaceholder {
+  width: 100%;
+  height: 16rem;
+  background-color: var(--go-ui-color-gray-30);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--go-ui-color-gray-60);
+  font-size: var(--go-ui-font-size-sm);
+  font-weight: var(--go-ui-font-weight-medium);
+}
+
+.metadataTags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--go-ui-spacing-sm);
+}
+
+.metadataTag {
+  padding: var(--go-ui-spacing-xs) var(--go-ui-spacing-sm);
+  background-color: var(--go-ui-color-red-10);
+  color: var(--go-ui-color-red-90);
+  font-size: var(--go-ui-font-size-sm);
+  border-radius: var(--go-ui-border-radius-md);
+  font-weight: var(--go-ui-font-weight-medium);
+  border: var(--go-ui-width-separator-thin) solid var(--go-ui-color-red-20);
+  transition: all var(--go-ui-duration-transition-fast) ease;
+}
+
+.metadataTag:hover {
+  background-color: var(--go-ui-color-red-20);
+  transform: translateY(-1px);
+  box-shadow: var(--go-ui-box-shadow-xs);
+}
+
+.captionContainer {
+  padding: var(--go-ui-spacing-md);
+  background-color: var(--go-ui-color-gray-10);
+  border-radius: var(--go-ui-border-radius-md);
+  border: var(--go-ui-width-separator-thin) solid var(--go-ui-color-separator);
+}
+
+.captionText {
+  margin-bottom: var(--go-ui-spacing-md);
+  line-height: 1.6;
+  color: var(--go-ui-color-gray-900);
+}
+
+.captionText:last-child {
+  margin-bottom: 0;
+}
+
+.highlightedCaption {
+  background-color: var(--go-ui-color-blue-10);
+  border: var(--go-ui-width-separator-thin) solid var(--go-ui-color-blue-30);
+  border-radius: var(--go-ui-border-radius-md);
+  padding: var(--go-ui-spacing-md);
+  margin: var(--go-ui-spacing-md) 0;
+}
+
+.captionHighlight {
+  margin-top: var(--go-ui-spacing-sm);
+  font-size: var(--go-ui-font-size-sm);
+  color: var(--go-ui-color-blue-70);
+  font-style: italic;
+}
+
+.contributeSection {
+  margin-top: var(--go-ui-spacing-2xl);
+  padding-top: var(--go-ui-spacing-lg);
+  border-top: var(--go-ui-width-separator-thin) solid var(--go-ui-color-separator);
+  display: flex;
+  justify-content: center;
+}
+
+.contributeButton {
+  background-color: var(--go-ui-color-red-90);
+  color: var(--go-ui-color-white);
+  padding: var(--go-ui-spacing-sm) var(--go-ui-spacing-xl);
+  border-radius: var(--go-ui-border-radius-lg);
+  font-weight: var(--go-ui-font-weight-medium);
+  transition: all var(--go-ui-duration-transition-medium) ease;
+  box-shadow: var(--go-ui-box-shadow-sm);
+  border: none;
+  cursor: pointer;
+  font-size: var(--go-ui-font-size-md);
+}
+
+.contributeButton:hover {
+  background-color: var(--go-ui-color-red-hover);
+  transform: translateY(-2px);
+  box-shadow: var(--go-ui-box-shadow-md);
+}
+
+.contributeButton:active {
+  transform: translateY(0);
+  box-shadow: var(--go-ui-box-shadow-sm);
+}
+
+.gridLayout {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: var(--go-ui-spacing-2xl);
+}
+
+@media (min-width: 1024px) {
+  .gridLayout {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+.detailsSection {
+  display: flex;
+  flex-direction: column;
+  gap: var(--go-ui-spacing-lg);
+}
+
+.loadingContainer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 400px;
+  color: var(--go-ui-color-gray-60);
+  font-size: var(--go-ui-font-size-lg);
+  font-weight: var(--go-ui-font-weight-medium);
+}
+
+.errorContainer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 400px;
+  color: var(--go-ui-color-negative);
+  font-size: var(--go-ui-font-size-lg);
+  font-weight: var(--go-ui-font-weight-medium);
+}
+
+
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  .gridLayout {
+    gap: var(--go-ui-spacing-lg);
+  }
+  
+  .metadataTags {
+    gap: var(--go-ui-spacing-xs);
+  }
+  
+  .metadataTag {
+    font-size: var(--go-ui-font-size-xs);
+    padding: var(--go-ui-spacing-2xs) var(--go-ui-spacing-xs);
+  }
+  
+  .contributeButton {
+    padding: var(--go-ui-spacing-sm) var(--go-ui-spacing-lg);
+    font-size: var(--go-ui-font-size-sm);
+  }
+}

frontend/src/pages/{MapDetailPage.tsx → MapDetailsPage/MapDetailPage.tsx}

@@ -1,29 +1,38 @@
-import { PageContainer, Button } from '@ifrc-go/ui';
+import { PageContainer, Button, Container, Spinner } from '@ifrc-go/ui';
 import { useState, useEffect } from 'react';
-import { useParams, useNavigate } from 'react-router-dom';
+import { useParams, useNavigate, useSearchParams } from 'react-router-dom';
+import styles from './MapDetailPage.module.css';
 
 interface MapOut {
   image_id: string;
   file_key: string;
   image_url: string;
   source: string;
-  type: string;
+  event_type: string;
   epsg: string;
   image_type: string;
-  caption?: {
+  countries?: Array<{
+    c_code: string;
+    label: string;
+    r_code: string;
+  }>;
+  captions?: Array<{
     title: string;
     generated: string;
     edited?: string;
-  };
+            cap_id?: string;
+  }>;
 }
 
 export default function MapDetailPage() {
   const { mapId } = useParams<{ mapId: string }>();
   const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
+  const captionId = searchParams.get('captionId');
   const [map, setMap] = useState<MapOut | null>(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
-  const [contributing, setContributing] = useState(false);
+
 
   useEffect(() => {
     if (!mapId) {
@@ -32,7 +41,6 @@ export default function MapDetailPage() {
       return;
     }
 
-    // Fetch the specific map
     fetch(`/api/images/${mapId}`)
       .then(response => {
         if (!response.ok) {
@@ -50,50 +58,23 @@ export default function MapDetailPage() {
       });
   }, [mapId]);
 
-  const handleContribute = async () => {
+  const handleContribute = () => {
     if (!map) return;
     
-    setContributing(true);
-    try {
-      // Simulate uploading the current image by creating a new map entry
-      const formData = new FormData();
-      formData.append('source', map.source);
-      formData.append('type', map.type);
-      formData.append('epsg', map.epsg);
-      formData.append('image_type', map.image_type);
-      
-      // We'll need to fetch the image and create a file from it
-      const imageResponse = await fetch(map.image_url);
-      const imageBlob = await imageResponse.blob();
-      const file = new File([imageBlob], map.file_key, { type: 'image/jpeg' });
-      formData.append('file', file);
-
-      const response = await fetch('/api/images/', {
-        method: 'POST',
-        body: formData,
-      });
-
-      if (!response.ok) {
-        throw new Error('Failed to contribute image');
-      }
-
-      const result = await response.json();
-      
-      // Navigate to the upload page with the new map ID and step 2
-      navigate(`/upload?mapId=${result.image_id}&step=2`);
-    } catch (err) {
-      console.error('Contribution failed:', err);
-      alert('Failed to contribute image. Please try again.');
-    } finally {
-      setContributing(false);
-    }
+    const url = captionId ? 
+      `/upload?mapId=${map.image_id}&step=2&captionId=${captionId}` : 
+      `/upload?mapId=${map.image_id}&step=2`;
+    navigate(url);
   };
 
   if (loading) {
     return (
       <PageContainer>
-        <div className="flex items-center justify-center min-h-[400px]">
-          <div className="text-gray-500">Loading...</div>
+        <div className={styles.loadingContainer}>
+          <div className="flex flex-col items-center gap-4">
+            <Spinner className="text-ifrcRed" />
+            <div>Loading map details...</div>
+          </div>
         </div>
       </PageContainer>
     );
@@ -102,8 +83,19 @@ export default function MapDetailPage() {
   if (error || !map) {
     return (
       <PageContainer>
-        <div className="flex items-center justify-center min-h-[400px]">
-          <div className="text-red-500">{error || 'Map not found'}</div>
+        <div className={styles.errorContainer}>
+          <div className="flex flex-col items-center gap-4 text-center">
+            <div className="text-4xl">⚠️</div>
+            <div className="text-xl font-semibold">Unable to load map</div>
+            <div>{error || 'Map not found'}</div>
+            <Button
+              name="back-to-explore"
+              variant="secondary"
+              onClick={() => navigate('/explore')}
+            >
+              Return to Explore
+            </Button>
+          </div>
         </div>
       </PageContainer>
     );
@@ -111,85 +103,121 @@ export default function MapDetailPage() {
 
   return (
     <PageContainer>
-      <div className="mb-4">
+      <div className={styles.backButton}>
         <Button
           name="back"
           variant="secondary"
           onClick={() => navigate('/explore')}
-          className="mb-4"
         >
           ← Back to Explore
         </Button>
       </div>
 
-      <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
+      <div className={styles.gridLayout}>
         {/* Image Section */}
-        <div className="space-y-4">
-          <div className="bg-gray-100 rounded-lg overflow-hidden">
+        <Container
+          heading="Map Image"
+          headingLevel={3}
+          withHeaderBorder
+          withInternalPadding
+          spacing="comfortable"
+        >
+          <div className={styles.imageContainer}>
             {map.image_url ? (
               <img
                 src={map.image_url}
                 alt={map.file_key}
-                className="w-full h-auto object-contain"
-                style={{ imageRendering: 'pixelated' }}
               />
             ) : (
-              <div className="w-full h-64 bg-gray-200 flex items-center justify-center text-gray-400">
+              <div className={styles.imagePlaceholder}>
                 No image available
               </div>
             )}
           </div>
-        </div>
+        </Container>
 
         {/* Details Section */}
-        <div className="space-y-6">
-          <div>
-            <h3 className="text-lg font-semibold mb-2">Title</h3>
-            <div className="space-y-2 text-sm">
-              <div className="text-gray-700">
-                {map.caption?.title || '— no title —'}
-              </div>
+        <div className={styles.detailsSection}>
+          <Container
+            heading="Title"
+            headingLevel={3}
+            withHeaderBorder
+            withInternalPadding
+            spacing="comfortable"
+          >
+            <div className="text-gray-700">
+              {map.captions && map.captions.length > 0 ? map.captions[0].title : '— no title —'}
             </div>
-          </div>
-
-          <div>
-            <h3 className="text-lg font-semibold mb-2">Metadata</h3>
-            <div className="flex flex-wrap gap-2">
-              <span className="px-3 py-1 bg-ifrcRed/10 text-ifrcRed text-sm rounded">
+          </Container>
+
+          <Container
+            heading="Metadata"
+            headingLevel={3}
+            withHeaderBorder
+            withInternalPadding
+            spacing="comfortable"
+          >
+            <div className={styles.metadataTags}>
+              <span className={styles.metadataTag}>
                 {map.source}
               </span>
-              <span className="px-3 py-1 bg-ifrcRed/10 text-ifrcRed text-sm rounded">
-                {map.type}
+              <span className={styles.metadataTag}>
+                {map.event_type}
               </span>
-              <span className="px-3 py-1 bg-ifrcRed/10 text-ifrcRed text-sm rounded">
+              <span className={styles.metadataTag}>
                 {map.epsg}
               </span>
-              <span className="px-3 py-1 bg-ifrcRed/10 text-ifrcRed text-sm rounded">
+              <span className={styles.metadataTag}>
                 {map.image_type}
               </span>
             </div>
-          </div>
-
-          <div>
-            <h3 className="text-lg font-semibold mb-2">Generated Caption</h3>
-            <div className="bg-gray-50 p-4 rounded-lg">
-              <p className="mt-2 text-sm text-gray-700 line-clamp-2">
-                {map.caption?.edited || map.caption?.generated || '— no caption yet —'}
-              </p>
+          </Container>
+
+          <Container
+            heading="Generated Caption"
+            headingLevel={3}
+            withHeaderBorder
+            withInternalPadding
+            spacing="comfortable"
+          >
+            <div className={styles.captionContainer}>
+              {map.captions && map.captions.length > 0 ? (
+                map.captions.map((caption, index) => (
+                  <div 
+                    key={index} 
+                    className={`${styles.captionText} ${
+                      captionId && map.captions && map.captions[index] && 
+                      'cap_id' in map.captions[index] && 
+                      map.captions[index].cap_id === captionId ? 
+                      styles.highlightedCaption : ''
+                    }`}
+                  >
+                    <p>{caption.edited || caption.generated}</p>
+                    {captionId && map.captions && map.captions[index] && 
+                     'cap_id' in map.captions[index] && 
+                     map.captions[index].cap_id === captionId && (
+                      <div className={styles.captionHighlight}>
+                        ← This is the caption you selected
+                      </div>
+                    )}
+                  </div>
+                ))
+              ) : (
+                <p>— no caption yet —</p>
+              )}
             </div>
-          </div>
+          </Container>
         </div>
       </div>
 
       {/* Contribute Section */}
-      <div className="mt-8 pt-6 border-t border-gray-200 flex justify-center">
+      <div className={styles.contributeSection}>
         <Button
           name="contribute"
           onClick={handleContribute}
-          disabled={contributing}
-          className="bg-ifrcRed hover:bg-ifrcRed/90 text-white px-6 py-2 rounded-lg"
+          className={styles.contributeButton}
         >
-          {contributing ? 'Contributing...' : 'Contribute'}
+          Contribute
         </Button>
       </div>
     </PageContainer>

frontend/src/pages/MapDetailsPage/index.ts

@@ -0,0 +1 @@
+export { default } from './MapDetailPage';

frontend/src/pages/UploadPage/UploadPage.module.css

@@ -0,0 +1,495 @@
+.uploadContainer {
+  margin: 0 auto;
+  max-width: var(--go-ui-width-screen-lg);
+  text-align: center;
+  padding: var(--go-ui-spacing-lg) var(--go-ui-spacing-md) var(--go-ui-spacing-2xl) var(--go-ui-spacing-md);
+  overflow-x: hidden;
+}
+
+.dropZone {
+  border: var(--go-ui-width-separator-thick) dashed var(--go-ui-color-gray-40);
+  background-color: var(--go-ui-color-gray-20);
+  border-radius: var(--go-ui-border-radius-xl);
+  padding: var(--go-ui-spacing-2xl) var(--go-ui-spacing-lg);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--go-ui-spacing-lg);
+  transition: all var(--go-ui-duration-transition-medium) ease;
+  max-width: var(--go-ui-width-screen-md);
+  margin: 0 auto;
+  min-height: 250px;
+  justify-content: center;
+}
+
+.dropZone:hover {
+  background-color: var(--go-ui-color-gray-30);
+  border-color: var(--go-ui-color-gray-50);
+}
+
+.dropZone.hasFile {
+  background-color: var(--go-ui-color-white);
+  border-color: var(--go-ui-color-gray-30);
+  min-height: 300px;
+  padding: var(--go-ui-spacing-lg);
+}
+
+.dropZoneIcon {
+  width: 2.5rem;
+  height: 2.5rem;
+  color: var(--go-ui-color-red-90);
+}
+
+.dropZoneText {
+  font-size: var(--go-ui-font-size-sm);
+  color: var(--go-ui-color-gray-70);
+  text-align: center;
+}
+
+.dropZoneSubtext {
+  font-size: var(--go-ui-font-size-sm);
+  color: var(--go-ui-color-gray-50);
+  margin: var(--go-ui-spacing-md) 0;
+}
+
+.filePreview {
+  width: 100%;
+  max-width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  animation: fadeIn 0.3s ease-in-out;
+}
+
+.filePreviewImage {
+  position: relative;
+  max-width: 100%;
+  max-height: 20rem;
+  overflow: visible;
+  border-radius: var(--go-ui-border-radius-lg);
+  background-color: var(--go-ui-color-gray-20);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: var(--go-ui-spacing-sm);
+  transition: all var(--go-ui-duration-transition-medium) ease;
+}
+
+.filePreviewImage:hover {
+  background-color: var(--go-ui-color-gray-30);
+  transform: translateY(-2px);
+  box-shadow: var(--go-ui-box-shadow-md);
+}
+
+.filePreviewImage img {
+  max-width: 100%;
+  max-height: 18rem;
+  width: auto;
+  height: auto;
+  object-fit: contain;
+  border-radius: var(--go-ui-border-radius-md);
+  box-shadow: var(--go-ui-box-shadow-sm);
+  transition: transform var(--go-ui-duration-transition-medium) ease;
+}
+
+.filePreviewImage img:hover {
+  transform: scale(1.02);
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.fileName {
+  font-size: var(--go-ui-font-size-sm);
+  font-weight: var(--go-ui-font-weight-medium);
+  color: var(--go-ui-color-gray-80);
+  margin-top: var(--go-ui-spacing-sm);
+  text-align: center;
+}
+
+.fileInfo {
+  font-size: var(--go-ui-font-size-xs);
+  color: var(--go-ui-color-gray-60);
+  margin-top: var(--go-ui-spacing-xs);
+  text-align: center;
+}
+
+.helpLink {
+  display: flex;
+  justify-content: center;
+  margin-top: var(--go-ui-spacing-md);
+}
+
+.helpLink a {
+  color: var(--go-ui-color-red-90);
+  font-size: var(--go-ui-font-size-xs);
+  transition: color var(--go-ui-duration-transition-fast) ease;
+  display: flex;
+  align-items: center;
+  gap: var(--go-ui-spacing-2xs);
+}
+
+.helpLink a:hover {
+  color: var(--go-ui-color-red-hover);
+  text-decoration: underline;
+}
+
+.loadingContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--go-ui-spacing-lg);
+  margin-top: var(--go-ui-spacing-2xl);
+}
+
+.loadingText {
+  color: var(--go-ui-color-gray-60);
+}
+
+.generateButtonContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--go-ui-spacing-lg);
+  margin-top: var(--go-ui-spacing-2xl);
+}
+
+.uploadedMapContainer {
+  margin-bottom: var(--go-ui-spacing-lg);
+}
+
+.uploadedMapImage {
+  width: 100%;
+  max-width: var(--go-ui-width-screen-lg);
+  max-height: 20rem;
+  overflow: visible;
+  background-color: var(--go-ui-color-gray-20);
+  border-radius: var(--go-ui-border-radius-lg);
+  box-shadow: var(--go-ui-box-shadow-sm);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: var(--go-ui-spacing-sm);
+  transition: all var(--go-ui-duration-transition-medium) ease;
+}
+
+.uploadedMapImage:hover {
+  background-color: var(--go-ui-color-gray-30);
+  transform: translateY(-2px);
+  box-shadow: var(--go-ui-box-shadow-md);
+}
+
+.uploadedMapImage img {
+  max-width: 100%;
+  max-height: 18rem;
+  width: auto;
+  height: auto;
+  object-fit: contain;
+  border-radius: var(--go-ui-border-radius-md);
+  box-shadow: var(--go-ui-box-shadow-sm);
+  transition: transform var(--go-ui-duration-transition-medium) ease;
+}
+
+.uploadedMapImage img:hover {
+  transform: scale(1.02);
+}
+
+.formSection {
+  margin-bottom: var(--go-ui-spacing-lg);
+}
+
+.formGrid {
+  display: grid;
+  gap: var(--go-ui-spacing-lg);
+  grid-template-columns: 1fr;
+  text-align: left;
+}
+
+@media (min-width: 1024px) {
+  .formGrid {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+.titleField {
+  grid-column: 1 / -1;
+}
+
+.ratingSection {
+  text-align: left;
+}
+
+.ratingDescription {
+  color: var(--go-ui-color-gray-70);
+  margin-bottom: var(--go-ui-spacing-lg);
+}
+
+.ratingSlider {
+  margin-top: var(--go-ui-spacing-lg);
+  display: flex;
+  align-items: center;
+  gap: var(--go-ui-spacing-sm);
+}
+
+.ratingLabel {
+  display: block;
+  font-size: var(--go-ui-font-size-sm);
+  font-weight: var(--go-ui-font-weight-medium);
+  text-transform: capitalize;
+  width: 5rem;
+  flex-shrink: 0;
+}
+
+.ratingInput {
+  width: 100%;
+  accent-color: var(--go-ui-color-red-90);
+}
+
+.ratingValue {
+  margin-left: var(--go-ui-spacing-sm);
+  width: 2.5rem;
+  text-align: right;
+  tabular-nums: true;
+  flex-shrink: 0;
+  font-size: var(--go-ui-font-size-sm);
+  color: var(--go-ui-color-gray-70);
+}
+
+.submitSection {
+  display: flex;
+  justify-content: center;
+  gap: var(--go-ui-spacing-md);
+  margin-top: var(--go-ui-spacing-2xl);
+  flex-wrap: wrap;
+}
+
+/* Success page styles */
+.successContainer {
+  text-align: center;
+  padding: var(--go-ui-spacing-2xl);
+}
+
+.successHeading {
+  color: var(--go-ui-color-green-90);
+  margin-bottom: var(--go-ui-spacing-lg);
+}
+
+.successText {
+  color: var(--go-ui-color-gray-700);
+  margin-bottom: var(--go-ui-spacing-xl);
+  font-size: var(--go-ui-font-size-lg);
+}
+
+.successButton {
+  display: flex;
+  justify-content: center;
+}
+
+/* View Full Size Button */
+.viewFullSizeButton {
+  display: flex;
+  justify-content: center;
+  margin-top: var(--go-ui-spacing-md);
+  padding-top: var(--go-ui-spacing-md);
+  border-top: var(--go-ui-width-separator-thin) solid var(--go-ui-color-separator);
+}
+
+/* Full Size Modal */
+.fullSizeModalOverlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.8);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+  padding: var(--go-ui-spacing-lg);
+}
+
+.fullSizeModalContent {
+  background-color: var(--go-ui-color-white);
+  border-radius: var(--go-ui-border-radius-lg);
+  max-width: 95vw;
+  max-height: 95vh;
+  overflow: hidden;
+  box-shadow: var(--go-ui-box-shadow-xl);
+  display: flex;
+  flex-direction: column;
+}
+
+.fullSizeModalHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--go-ui-spacing-lg);
+  border-bottom: var(--go-ui-width-separator-thin) solid var(--go-ui-color-separator);
+  background-color: var(--go-ui-color-gray-10);
+}
+
+.fullSizeModalTitle {
+  margin: 0;
+  font-size: var(--go-ui-font-size-lg);
+  font-weight: var(--go-ui-font-weight-semibold);
+  color: var(--go-ui-color-gray-900);
+}
+
+.fullSizeModalImage {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: var(--go-ui-spacing-lg);
+  overflow: auto;
+}
+
+.fullSizeModalImage img {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+  border-radius: var(--go-ui-border-radius-md);
+  box-shadow: var(--go-ui-box-shadow-md);
+}
+
+/* Responsive adjustments for modal */
+@media (max-width: 768px) {
+  .fullSizeModalOverlay {
+    padding: var(--go-ui-spacing-sm);
+  }
+  
+  .fullSizeModalContent {
+    max-width: 100vw;
+    max-height: 100vh;
+  }
+  
+  .fullSizeModalHeader {
+    padding: var(--go-ui-spacing-md);
+  }
+  
+  .fullSizeModalImage {
+    padding: var(--go-ui-spacing-md);
+  }
+}
+
+.confirmSection {
+  display: flex;
+  justify-content: center;
+  gap: var(--go-ui-spacing-md);
+  margin-top: var(--go-ui-spacing-xl);
+  padding-top: var(--go-ui-spacing-lg);
+  border-top: var(--go-ui-width-separator-thin) solid var(--go-ui-color-separator);
+}
+
+.step2Layout {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--go-ui-spacing-2xl);
+  align-items: start;
+}
+
+.mapColumn {
+  position: sticky;
+  top: var(--go-ui-spacing-lg);
+}
+
+.contentColumn {
+  display: flex;
+  flex-direction: column;
+  gap: var(--go-ui-spacing-lg);
+}
+
+.contentColumn .formGrid {
+  display: grid;
+  gap: var(--go-ui-spacing-lg);
+  grid-template-columns: 1fr;
+  text-align: left;
+}
+
+/* Responsive adjustments */
+@media (max-width: 1024px) {
+  .step2Layout {
+    grid-template-columns: 1fr;
+    gap: var(--go-ui-spacing-lg);
+  }
+  
+  .mapColumn {
+    position: static;
+  }
+}
+
+@media (max-width: 768px) {
+  .uploadContainer {
+    padding: var(--go-ui-spacing-md) var(--go-ui-spacing-sm) var(--go-ui-spacing-xl) var(--go-ui-spacing-sm);
+  }
+  
+  .dropZone {
+    padding: var(--go-ui-spacing-lg) var(--go-ui-spacing-md);
+    min-height: 200px;
+  }
+  
+  .dropZone.hasFile {
+    min-height: 250px;
+    padding: var(--go-ui-spacing-md);
+  }
+  
+  .filePreviewImage {
+    max-width: 100%;
+    max-height: 15rem;
+    padding: var(--go-ui-spacing-xs);
+  }
+  
+  .filePreviewImage img {
+    max-height: 13rem;
+  }
+  
+  .ratingSlider {
+    gap: var(--go-ui-spacing-xs);
+  }
+  
+  .ratingLabel {
+    width: 4rem;
+    font-size: var(--go-ui-font-size-xs);
+  }
+  
+  .ratingValue {
+    width: 2rem;
+    font-size: var(--go-ui-font-size-xs);
+  }
+}
+
+@media (max-width: 480px) {
+  .dropZone {
+    padding: var(--go-ui-spacing-md) var(--go-ui-spacing-sm);
+    min-height: 180px;
+  }
+  
+  .dropZone.hasFile {
+    min-height: 220px;
+  }
+  
+  .filePreviewImage {
+    max-height: 12rem;
+  }
+  
+  .filePreviewImage img {
+    max-height: 10rem;
+  }
+}
+
+.metadataSectionCard {
+  background-color: var(--go-ui-color-white);
+  border: var(--go-ui-width-separator-thin) solid var(--go-ui-color-separator);
+  border-radius: var(--go-ui-border-radius-lg);
+  padding: var(--go-ui-spacing-lg);
+  box-shadow: var(--go-ui-box-shadow-xs);
+}

frontend/src/pages/{UploadPage.tsx → UploadPage/UploadPage.tsx}

@@ -10,48 +10,47 @@ import {
   DeleteBinLineIcon,
 } from '@ifrc-go/icons';
 import { Link, useSearchParams } from 'react-router-dom';
+import styles from './UploadPage.module.css';
 
 const SELECTED_MODEL_KEY = 'selectedVlmModel';
 
 export default function UploadPage() {
   const [searchParams] = useSearchParams();
-  const [step, setStep] = useState<1 | 2 | 3>(1);
+  const [step, setStep] = useState<1 | '2a' | '2b' | 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 [eventType, setEventType] = 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}[]>([]);
   const [types, setTypes] = useState<{t_code: string, label: string}[]>([]);
   const [spatialReferences, setSpatialReferences] = useState<{epsg: string, srid: string, proj4: string, wkt: string}[]>([]);
   const [imageTypes, setImageTypes] = useState<{image_type: string, label: string}[]>([]);
   const [countriesOptions, setCountriesOptions] = useState<{c_code: string, label: string, r_code: string}[]>([]);
 
-  // Track uploaded image data for potential deletion
   const [uploadedImageId, setUploadedImageId] = useState<string | null>(null);
   
-  // Keep refs updated with current values
   stepRef.current = step;
   uploadedImageIdRef.current = uploadedImageId;
 
-  // Wrapper functions to handle OptionKey to string conversion
   const handleSourceChange = (value: any) => setSource(String(value));
-  const handleTypeChange = (value: any) => setType(String(value));
+  const handleEventTypeChange = (value: any) => setEventType(String(value));
   const handleEpsgChange = (value: any) => setEpsg(String(value));
   const handleImageTypeChange = (value: any) => setImageType(String(value));
   const handleCountriesChange = (value: any) => setCountries(Array.isArray(value) ? value.map(String) : []);
 
-  // Fetch metadata options on component mount
+  const handleStepChange = (newStep: 1 | '2a' | '2b' | 3) => {
+    setStep(newStep);
+  };
+
   useEffect(() => {
     Promise.all([
       fetch('/api/sources').then(r => r.json()),
@@ -67,9 +66,8 @@ export default function UploadPage() {
       setImageTypes(imageTypesData);
       setCountriesOptions(countriesData);
       
-      // Set default values
       if (sourcesData.length > 0) setSource(sourcesData[0].s_code);
-      if (typesData.length > 0) setType(typesData[0].t_code);
+      if (typesData.length > 0) setEventType(typesData[0].t_code);
       if (spatialData.length > 0) setEpsg(spatialData[0].epsg);
       if (imageTypesData.length > 0) setImageType(imageTypesData[0].image_type);
     });
@@ -95,44 +93,50 @@ export default function UploadPage() {
   const [imageUrl, setImageUrl] = useState<string|null>(null);
   const [draft, setDraft] = useState('');
   
-  // Handle URL parameters for direct step 2 navigation
   useEffect(() => {
     const mapId = searchParams.get('mapId');
     const stepParam = searchParams.get('step');
+    const captionIdParam = searchParams.get('captionId');
     
     if (mapId && stepParam === '2') {
-      // Load the map data and start at step 2
       fetch(`/api/images/${mapId}`)
         .then(response => response.json())
         .then(mapData => {
           setImageUrl(mapData.image_url);
           setSource(mapData.source);
-          setType(mapData.type);
+          setEventType(mapData.event_type);
           setEpsg(mapData.epsg);
           setImageType(mapData.image_type);
           
-          return fetch(`/api/images/${mapId}/caption`, { 
-            method: 'POST',
-            headers: {
-              'Content-Type': 'application/x-www-form-urlencoded',
-            },
-            body: new URLSearchParams({
-              title: 'Generated Caption',
-              prompt: 'Describe this crisis map in detail',
-              ...(localStorage.getItem(SELECTED_MODEL_KEY) && {
-              model_name: localStorage.getItem(SELECTED_MODEL_KEY)!
-              })
-            })
-          });
-        })
-        .then(capResponse => capResponse.json())
-        .then(capData => {
-          setCaptionId(capData.cap_id);
-          setDraft(capData.edited || capData.generated);
-          setStep(2);
+          setUploadedImageId(mapId);
+          
+          if (captionIdParam) {
+            setCaptionId(captionIdParam);
+            const existingCaption = mapData.captions?.find((c: any) => c.cap_id === captionIdParam);
+            if (existingCaption) {
+              setDraft(existingCaption.edited || existingCaption.generated);
+              setTitle(existingCaption.title || 'Generated Caption');
+            }
+            
+            if (mapData.countries && Array.isArray(mapData.countries)) {
+              setCountries(mapData.countries.map((c: any) => c.c_code));
+            }
+            
+            handleStepChange('2a');
+          } else {
+            setCaptionId(null);
+            setDraft('');
+            setTitle('');
+
+            
+            if (mapData.countries && Array.isArray(mapData.countries)) {
+              setCountries(mapData.countries.map((c: any) => c.c_code));
+            }
+            
+            handleStepChange('2a');
+          }
         })
         .catch(err => {
-          console.error('Failed to load map data:', err);
           alert('Failed to load map data. Please try again.');
         });
     }
@@ -155,9 +159,9 @@ export default function UploadPage() {
     usability: 50,
   });
 
+  const [isFullSizeModalOpen, setIsFullSizeModalOpen] = useState(false);
 
 
-  /* ---- drag-and-drop + file-picker handlers -------------------------- */
   const onDrop = useCallback((e: DragEvent<HTMLDivElement>) => {
     e.preventDefault();
     const dropped = e.dataTransfer.files?.[0];
@@ -168,7 +172,6 @@ export default function UploadPage() {
     if (file) setFile(file);
   }, []);
 
-  // blob URL / preview
   useEffect(() => {
     if (!file) {
       setPreview(null);
@@ -181,21 +184,20 @@ export default function UploadPage() {
 
 
   async function readJsonSafely(res: Response): Promise<any> {
-    const text = await res.text();        // get raw body
+    const text = await res.text();
     try {
-      return text ? JSON.parse(text) : {};  // valid JSON or empty object
+      return text ? JSON.parse(text) : {};
     } catch {
-      return { error: text };             // plain text fallback
+      return { error: text };
     }
   }
 
   function handleApiError(err: any, operation: string) {
-    console.error(`${operation} failed:`, err);
+    
     const message = err.message || `Failed to ${operation.toLowerCase()}`;
     alert(message);
   }
 
-  /* ---- generate handler --------------------------------------------- */
   async function handleGenerate() {
     if (!file) return;
 
@@ -204,7 +206,7 @@ export default function UploadPage() {
     const fd = new FormData();
     fd.append('file', file);
     fd.append('source', source);
-    fd.append('type', type);
+    fd.append('event_type', eventType);
     fd.append('epsg', epsg);
     fd.append('image_type', imageType);
     countries.forEach((c) => fd.append('countries', c));
@@ -215,7 +217,6 @@ export default function UploadPage() {
     }
 
     try {
-      /* 1) upload */
       const mapRes = await fetch('/api/images/', { method: 'POST', body: fd });
       const mapJson = await readJsonSafely(mapRes);
       if (!mapRes.ok) throw new Error(mapJson.error || 'Upload failed');
@@ -225,7 +226,6 @@ export default function UploadPage() {
       if (!mapIdVal) throw new Error('Upload failed: image_id not found');
       setUploadedImageId(mapIdVal);
     
-      /* 2) caption */     
       const capRes = await fetch(
         `/api/images/${mapIdVal}/caption`, 
         { 
@@ -243,26 +243,20 @@ export default function UploadPage() {
       const capJson = await readJsonSafely(capRes);
       if (!capRes.ok) throw new Error(capJson.error || 'Caption failed');
       setCaptionId(capJson.cap_id);
-      console.log(capJson);
 
-      /* 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.type) setEventType(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);
+      handleStepChange('2a');
     } catch (err) {
       handleApiError(err, 'Upload');
     } finally {
@@ -270,15 +264,13 @@ export default function UploadPage() {
     }
   }
 
-  /* ---- submit handler --------------------------------------------- */
   async function handleSubmit() {
     if (!captionId) return alert("No caption to submit");
     
     try {
-      // 1. Update image metadata
       const metadataBody = {
         source: source,
-        type: type,
+        event_type: eventType,
         epsg: epsg,
         image_type: imageType,
         countries: countries,
@@ -291,10 +283,9 @@ export default function UploadPage() {
       const metadataJson = await readJsonSafely(metadataRes);
       if (!metadataRes.ok) throw new Error(metadataJson.error || "Metadata update failed");
       
-      // 2. Update caption
       const captionBody = {
         title: title,
-        edited: draft || '', // Use draft if available, otherwise empty string
+        edited: draft || '',
         accuracy: scores.accuracy,
         context: scores.context,
         usability: scores.usability,
@@ -307,42 +298,114 @@ export default function UploadPage() {
       const captionJson = await readJsonSafely(captionRes);
       if (!captionRes.ok) throw new Error(captionJson.error || "Caption update failed");
       
-      // Clear uploaded IDs since submission was successful
       setUploadedImageId(null);
-      setStep(3);
+      handleStepChange(3);
     } catch (err) {
       handleApiError(err, 'Submit');
     }
   }
 
-  /* ---- delete handler --------------------------------------------- */
   async function handleDelete() {
-    if (!uploadedImageId) return;
+    if (!uploadedImageId) {
+      
+      alert('No caption to delete. Please try refreshing the page.');
+      return;
+    }
     
-    if (confirm("Are you sure you want to delete this uploaded image? This action cannot be undone.")) {
+    if (confirm("Are you sure you want to delete this caption? This action cannot be undone.")) {
       try {
-        // Delete the image (this will cascade delete the caption)
-        const res = await fetch(`/api/images/${uploadedImageId}`, {
-          method: "DELETE",
-        });
+        const captionsResponse = await fetch(`/api/images/${uploadedImageId}/captions`);
+        let hasOtherCaptions = false;
+        
+        if (captionsResponse.ok) {
+          const captions = await captionsResponse.json();
+          hasOtherCaptions = captions.some((cap: any) => cap.cap_id !== captionId);
+        }
         
-        if (!res.ok) {
-          const json = await readJsonSafely(res);
-          throw new Error(json.error || "Delete failed");
+        if (hasOtherCaptions) {
+          if (captionId) {
+            const capRes = await fetch(`/api/captions/${captionId}`, {
+              method: "DELETE",
+            });
+            if (!capRes.ok) {
+              throw new Error('Failed to delete caption');
+            }
+          }
+        } else {
+          const res = await fetch(`/api/images/${uploadedImageId}`, {
+            method: "DELETE",
+          });
+          
+          if (!res.ok) {
+            const json = await readJsonSafely(res);
+    
+            throw new Error(json.error || `Delete failed with status ${res.status}`);
+          }
         }
         
-        // Reset to step 1
         resetToStep1();
       } catch (err) {
+
         handleApiError(err, 'Delete');
       }
     }
   }
 
-  /* ------------------------------------------------------------------- */
+  const handleProcessCaption = useCallback(async () => {
+    if (!uploadedImageId) {
+      alert('No image ID available to create a new caption.');
+      return;
+    }
+
+    setIsLoading(true);
+
+    try {
+      if (captionId) {
+        const captionBody = {
+          title: title,
+          edited: draft || '',
+        };
+        const captionRes = await fetch(`/api/captions/${captionId}`, {
+          method: "PUT",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify(captionBody),
+        });
+        if (!captionRes.ok) throw new Error('Failed to update caption');
+      } else {
+        const capRes = await fetch(
+          `/api/images/${uploadedImageId}/caption`, 
+          { 
+            method: 'POST',
+            headers: {
+              'Content-Type': 'application/x-www-form-urlencoded',
+            },
+            body: new URLSearchParams({
+              title: 'New Contribution Caption',
+              prompt: 'Describe this crisis map in detail',
+              ...(localStorage.getItem(SELECTED_MODEL_KEY) && {
+                model_name: localStorage.getItem(SELECTED_MODEL_KEY)!
+              })
+            })
+          }
+        );
+        const capJson = await readJsonSafely(capRes);
+        if (!capRes.ok) throw new Error(capJson.error || 'Caption failed');
+
+        setCaptionId(capJson.cap_id);
+        setDraft(capJson.generated);
+      }
+      
+      handleStepChange('2b');
+    } catch (err) {
+      handleApiError(err, 'Create New Caption');
+    } finally {
+      setIsLoading(false);
+    }
+  }, [uploadedImageId, title, captionId, draft]);
+
   return (
     <PageContainer>
-      <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}>
+      <div className={styles.uploadContainer} data-step={step}>
         {/* Drop-zone */}
         {step === 1 && (
           <Container
@@ -360,40 +423,40 @@ export default function UploadPage() {
               </p>
               
               {/* "More »" link  */}
-              <div className="flex justify-center">
+              <div className={styles.helpLink}>
                 <Link
                   to="/help"
-                  className="text-red-600 text-xs hover:text-red-700 hover:underline flex items-center gap-1"
+                  className={styles.helpLink}
                 >
                   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' : ''
-                }`}
+                className={`${styles.dropZone} ${file ? styles.hasFile : ''}`}
                 onDragOver={(e) => e.preventDefault()}
                 onDrop={onDrop}
               >
                 {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">
+                  <div className={styles.filePreview}>
+                    <div className={styles.filePreviewImage}>
                       <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">
+                    <p className={styles.fileName}>
                       {file.name}
                     </p>
+                    <p className={styles.fileInfo}>
+                      {(file.size / 1024 / 1024).toFixed(2)} MB
+                    </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>
+                    <UploadCloudLineIcon className={styles.dropZoneIcon} />
+                    <p className={styles.dropZoneText}>Drag &amp; Drop a file here</p>
+                    <p className={styles.dropZoneSubtext}>or</p>
                   </>
                 )}
               
@@ -421,15 +484,15 @@ export default function UploadPage() {
 
         {/* Loading state */}
         {isLoading && (
-          <div className="flex flex-col items-center justify-center gap-4 mt-12">
+          <div className={styles.loadingContainer}>
             <Spinner className="text-ifrcRed" />
-            <p className="text-gray-600">Generating caption...</p>
+            <p className={styles.loadingText}>Generating caption...</p>
           </div>
         )}
 
         {/* Generate button */}
         {step === 1 && !isLoading && (
-          <div className="flex flex-col items-center justify-center gap-4 mt-12">
+          <div className={styles.generateButtonContainer}>
             <Button
               name="generate"
               disabled={!file}
@@ -440,171 +503,248 @@ export default function UploadPage() {
           </div>
         )}
 
-        {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"
-                />
+        {step === '2a' && (
+          <div className={styles.step2Layout}>
+            {/* Left Column - Map */}
+            <div className={styles.mapColumn}>
+              <Container heading="Uploaded Image" headingLevel={3} withHeaderBorder withInternalPadding>
+                <div className={styles.uploadedMapContainer}>
+                  <div className={styles.uploadedMapImage}>
+                    <img
+                      src={imageUrl || preview || undefined}
+                      alt="Uploaded image preview"
+                    />
+                  </div>
+                  <div className={styles.viewFullSizeButton}>
+                    <Button
+                      name="view-full-size"
+                      variant="secondary"
+                      size={1}
+                      onClick={() => setIsFullSizeModalOpen(true)}
+                    >
+                      View Image
+                    </Button>
+                  </div>
+                </div>
+              </Container>
+            </div>
+
+            {/* Right Column - Metadata Form */}
+            <div className={styles.contentColumn}>
+              <div className={styles.metadataSectionCard}>
+                <Container
+                  heading="Confirm image details"
+                  headingLevel={3}
+                  withHeaderBorder
+                  withInternalPadding
+                >
+                  <div className={styles.formGrid}>
+                    <div className={styles.titleField}>
+                      <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="Event Type"
+                      name="event_type"
+                      value={eventType}
+                      onChange={handleEventTypeChange}
+                      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>
+                  <div className={styles.confirmSection}>
+                    <IconButton
+                      name="delete"
+                      variant="tertiary"
+                      onClick={handleDelete}
+                      title="Delete"
+                      ariaLabel="Delete uploaded image"
+                    >
+                      <DeleteBinLineIcon />
+                    </IconButton>
+                    <Button
+                      name="confirm-metadata"
+                      onClick={() => {
+                        if (imageUrl && !file) {
+                          handleProcessCaption();
+                        } else {
+                          handleStepChange('2b');
+                        }
+                      }}
+                    >
+                      {imageUrl && !file ? 
+                        (captionId ? 'Edit Caption' : 'Create New Caption') : 
+                        'Next'
+                      }
+                    </Button>
+                  </div>
+                </Container>
               </div>
             </div>
-          </Container>
+          </div>
         )}
 
-        {step === 2 && (
-          <div className="space-y-6">
-            {/* ────── METADATA FORM ────── */}
-            <Container
-              heading="Map Metadata"
-              headingLevel={3}
-              withHeaderBorder
-              withInternalPadding
-            >
-              <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"
-              />
+        {step === '2b' && (
+          <div className={styles.step2Layout}>
+            {/* Left Column - Map */}
+            <div className={styles.mapColumn}>
+              <Container heading="Uploaded Image" headingLevel={3} withHeaderBorder withInternalPadding>
+                <div className={styles.uploadedMapContainer}>
+                  <div className={styles.uploadedMapImage}>
+                    <img
+                      src={imageUrl || preview || undefined}
+                      alt="Uploaded image preview"
+                    />
+                  </div>
+                  <div className={styles.viewFullSizeButton}>
+                    <Button
+                      name="view-full-size"
+                      variant="secondary"
+                      size={1}
+                      onClick={() => setIsFullSizeModalOpen(true)}
+                    >
+                      View Image
+                    </Button>
+                  </div>
+                </div>
+              </Container>
             </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"
+
+            {/* Right Column - Content */}
+            <div className={styles.contentColumn}>
+              {/* ────── RATING SLIDERS ────── */}
+              <div className={styles.metadataSectionCard}>
+                <Container
+                  heading="AI Performance Rating"
+                  headingLevel={3}
+                  withHeaderBorder
+                  withInternalPadding
+                >
+                  <div className={styles.ratingSection}>
+                    <p className={styles.ratingDescription}>How well did the AI perform on the task?</p>
+                    {(['accuracy', 'context', 'usability'] as const).map((k) => (
+                      <div key={k} className={styles.ratingSlider}>
+                        <label className={styles.ratingLabel}>{k}</label>
+                        <input
+                          type="range"
+                          min={0}
+                          max={100}
+                          value={scores[k]}
+                          onChange={(e) =>
+                            setScores((s) => ({ ...s, [k]: Number(e.target.value) }))
+                          }
+                          className={styles.ratingInput}
+                        />
+                        <span className={styles.ratingValue}>{scores[k]}</span>
+                      </div>
+                    ))}
+                  </div>
+                </Container>
+              </div>
+
+              {/* ────── AI‑GENERATED CAPTION ────── */}
+              <div className={styles.metadataSectionCard}>
+                <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..."
                     />
-                    <span className="ml-2 w-8 sm:w-10 text-right tabular-nums flex-shrink-0">{scores[k]}</span>
                   </div>
-                ))}
+                </Container>
               </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..."
-                />
+
+              {/* ────── SUBMIT BUTTON ────── */}
+              <div className={styles.submitSection}>
+                <Button
+                  name="back"
+                  variant="secondary"
+                  onClick={() => handleStepChange('2a')}
+                >
+                  ← Back to Metadata
+                </Button>
+                <IconButton
+                  name="delete"
+                  variant="tertiary"
+                  onClick={handleDelete}
+                  title="Delete"
+                  ariaLabel="Delete uploaded image"
+                >
+                  <DeleteBinLineIcon />
+                </IconButton>
+                <Button
+                  name="submit"
+                  onClick={handleSubmit}
+                >
+                  Submit
+                </Button>
               </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>
         )}
 
         {/* 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">
+          <div className={styles.successContainer}>
+            <Heading level={2} className={styles.successHeading}>Saved!</Heading>
+            <p className={styles.successText}>Your caption has been successfully saved.</p>
+            <div className={styles.successButton}>
               <Button
                 name="upload-another"
                 onClick={resetToStep1}
@@ -614,6 +754,30 @@ export default function UploadPage() {
             </div>
           </div>
         )}
+
+        {/* Full Size Image Modal */}
+        {isFullSizeModalOpen && (
+          <div className={styles.fullSizeModalOverlay} onClick={() => setIsFullSizeModalOpen(false)}>
+            <div className={styles.fullSizeModalContent} onClick={(e) => e.stopPropagation()}>
+              <div className={styles.fullSizeModalHeader}>
+                <Button
+                  name="close-modal"
+                  variant="tertiary"
+                  size={1}
+                  onClick={() => setIsFullSizeModalOpen(false)}
+                >
+                  ✕
+                </Button>
+              </div>
+              <div className={styles.fullSizeModalImage}>
+                <img
+                  src={imageUrl || preview || undefined}
+                  alt="Full size map"
+                />
+              </div>
+            </div>
+          </div>
+        )}
       </div>
     </PageContainer>
   );

frontend/src/pages/UploadPage/index.ts

@@ -0,0 +1 @@
+export { default } from './UploadPage';

frontend/src/types.ts

@@ -1,13 +1,13 @@
 export interface MapOut {
-  map_id: string; // UUID as string
+  map_id: string;
   file_key: string;
   sha256: string;
   source: string;
   region: string;
   category: string;
   caption?: {
-    cap_id: string; // UUID as string
-    map_id: string; // UUID as string
+    cap_id: string;
+    map_id: string;
     generated: string;
     edited?: string;
     accuracy?: number;

frontend/tailwind.config.js

@@ -1,4 +1,3 @@
-/** @type {import('tailwindcss').Config} */
 export default {
     content: [
       "./index.html",

frontend/tsconfig.app.json

@@ -6,16 +6,12 @@
     "lib": ["ES2022", "DOM", "DOM.Iterable"],
     "module": "ESNext",
     "skipLibCheck": true,
-
-    /* Bundler mode */
     "moduleResolution": "bundler",
     "allowImportingTsExtensions": true,
     "verbatimModuleSyntax": true,
     "moduleDetection": "force",
     "noEmit": true,
     "jsx": "react-jsx",
-
-    /* Linting */
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,

frontend/tsconfig.node.json

@@ -5,15 +5,11 @@
     "lib": ["ES2023"],
     "module": "ESNext",
     "skipLibCheck": true,
-
-    /* Bundler mode */
     "moduleResolution": "bundler",
     "allowImportingTsExtensions": true,
     "verbatimModuleSyntax": true,
     "moduleDetection": "force",
     "noEmit": true,
-
-    /* Linting */
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,

frontend/vite.config.ts

@@ -1,4 +1,3 @@
-// vite.config.ts
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 
@@ -6,12 +5,10 @@ export default defineConfig({
   plugins: [react()],
   server: {
     proxy: {
-      // proxy any /api/* request to localhost:8080
       '/api': {
         target: 'http://localhost:8080',
         changeOrigin: true,
         secure: false,
-        // rewrite: (path) => path.replace(/^\/api/, '/api'),  // not needed if same prefix
       },
     },
   },

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

@@ -1,8 +0,0 @@
-# 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

@@ -1,15 +0,0 @@
-{
-    "$schema": "https://unpkg.com/@changesets/[email protected]/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

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

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

@@ -1,15 +0,0 @@
-{
-  "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

@@ -1,8 +0,0 @@
----
-"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

@@ -1,9 +0,0 @@
----
-"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

@@ -1,7 +0,0 @@
----
-"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

@@ -1,148 +0,0 @@
-# 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

@@ -1,92 +0,0 @@
-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

@@ -1,39 +0,0 @@
-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

@@ -1,37 +0,0 @@
-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

@@ -1,5 +0,0 @@
-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

@@ -1,27 +0,0 @@
-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

@@ -1,30 +0,0 @@
-## 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

@@ -1,16 +0,0 @@
-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/[email protected]
-        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

@@ -1,127 +0,0 @@
-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/[email protected]
-        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

@@ -1,304 +0,0 @@
-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/[email protected]
-
-  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

@@ -1,147 +0,0 @@
-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

@@ -1,127 +0,0 @@
-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

@@ -1,43 +0,0 @@
-# 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

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

go-web-app-develop/COLLABORATING.md

@@ -1,18 +0,0 @@
-# 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

@@ -1,81 +0,0 @@
-# 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).