export

frontend/package-lock.json

@@ -10,6 +10,8 @@
       "dependencies": {
         "@ifrc-go/icons": "^2.0.1",
         "@ifrc-go/ui": "^1.3.0",
+        "@types/jszip": "^3.4.0",
+        "jszip": "^3.10.1",
         "lucide-react": "^0.525.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
@@ -1995,6 +1997,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/jszip": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@types/jszip/-/jszip-3.4.0.tgz",
+      "integrity": "sha512-GFHqtQQP3R4NNuvZH3hNCYD0NbyBZ42bkN7kO3NDrU/SnvIZWMS8Bp38XCsRKBT5BXvgm0y1zqpZWp/ZkRzBzg==",
+      "license": "MIT",
+      "dependencies": {
+        "jszip": "*"
+      }
+    },
     "node_modules/@types/node": {
       "version": "24.1.0",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-24.1.0.tgz",
@@ -2604,6 +2615,12 @@
         "url": "https://opencollective.com/core-js"
       }
     },
+    "node_modules/core-util-is": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
+      "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==",
+      "license": "MIT"
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
@@ -3268,6 +3285,12 @@
         "node": ">= 4"
       }
     },
+    "node_modules/immediate": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz",
+      "integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==",
+      "license": "MIT"
+    },
     "node_modules/import-fresh": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
@@ -3295,6 +3318,12 @@
         "node": ">=0.8.19"
       }
     },
+    "node_modules/inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+      "license": "ISC"
+    },
     "node_modules/is-extglob": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
@@ -3337,6 +3366,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/isarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+      "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==",
+      "license": "MIT"
+    },
     "node_modules/isexe": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
@@ -3420,6 +3455,18 @@
         "node": ">=6"
       }
     },
+    "node_modules/jszip": {
+      "version": "3.10.1",
+      "resolved": "https://registry.npmjs.org/jszip/-/jszip-3.10.1.tgz",
+      "integrity": "sha512-xXDvecyTpGLrqFrvkrUSoxxfJI5AH7U8zxxtVclpsUtMCq4JQ290LY8AW5c7Ggnr/Y/oK+bQMbqK2qmtk3pN4g==",
+      "license": "(MIT OR GPL-3.0-or-later)",
+      "dependencies": {
+        "lie": "~3.3.0",
+        "pako": "~1.0.2",
+        "readable-stream": "~2.3.6",
+        "setimmediate": "^1.0.5"
+      }
+    },
     "node_modules/keyv": {
       "version": "4.5.4",
       "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
@@ -3444,6 +3491,15 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/lie": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/lie/-/lie-3.3.0.tgz",
+      "integrity": "sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==",
+      "license": "MIT",
+      "dependencies": {
+        "immediate": "~3.0.5"
+      }
+    },
     "node_modules/lightningcss": {
       "version": "1.30.1",
       "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.30.1.tgz",
@@ -3928,6 +3984,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/pako": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz",
+      "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==",
+      "license": "(MIT AND Zlib)"
+    },
     "node_modules/parent-module": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -4031,6 +4093,12 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/process-nextick-args": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
+      "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==",
+      "license": "MIT"
+    },
     "node_modules/prop-types": {
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
@@ -4276,6 +4344,21 @@
         }
       }
     },
+    "node_modules/readable-stream": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
+      "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
+      "license": "MIT",
+      "dependencies": {
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.3",
+        "isarray": "~1.0.0",
+        "process-nextick-args": "~2.0.0",
+        "safe-buffer": "~5.1.1",
+        "string_decoder": "~1.1.1",
+        "util-deprecate": "~1.0.1"
+      }
+    },
     "node_modules/resolve-from": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
@@ -4360,6 +4443,12 @@
         "queue-microtask": "^1.2.2"
       }
     },
+    "node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+      "license": "MIT"
+    },
     "node_modules/sanitize-html": {
       "version": "2.17.0",
       "resolved": "https://registry.npmjs.org/sanitize-html/-/sanitize-html-2.17.0.tgz",
@@ -4396,6 +4485,12 @@
         "node": ">=10"
       }
     },
+    "node_modules/setimmediate": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
+      "integrity": "sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA==",
+      "license": "MIT"
+    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -4428,6 +4523,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/string_decoder": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+      "license": "MIT",
+      "dependencies": {
+        "safe-buffer": "~5.1.0"
+      }
+    },
     "node_modules/strip-json-comments": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
@@ -4704,6 +4808,12 @@
         }
       }
     },
+    "node_modules/util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
+      "license": "MIT"
+    },
     "node_modules/vite": {
       "version": "7.1.3",
       "resolved": "https://registry.npmjs.org/vite/-/vite-7.1.3.tgz",

frontend/package.json

@@ -30,6 +30,8 @@
   "dependencies": {
     "@ifrc-go/icons": "^2.0.1",
     "@ifrc-go/ui": "^1.3.0",
+    "@types/jszip": "^3.4.0",
+    "jszip": "^3.10.1",
     "lucide-react": "^0.525.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

frontend/src/pages/AdminPage/AdminPage.tsx

@@ -11,11 +11,11 @@ export default function AdminPage() {
   const [error, setError] = useState('');
   const [isLoggingIn, setIsLoggingIn] = useState(false);
   
-     const [availableModels, setAvailableModels] = useState<Array<{
-     m_code: string;
-     label: string;
-     model_type: string;
-     is_available: boolean;
+  const [availableModels, setAvailableModels] = useState<Array<{
+    m_code: string;
+    label: string;
+    model_type: string;
+    is_available: boolean;
      provider?: string;
      model_id?: string;
      config?: {
@@ -24,7 +24,7 @@ export default function AdminPage() {
        model?: string;
        stub?: boolean;
      };
-   }>>([]);
+  }>>([]);
   const [selectedModel, setSelectedModel] = useState<string>('');
   
      // Model management state
@@ -57,31 +57,31 @@ export default function AdminPage() {
     }
   }, [isAuthenticated]);
 
-     const fetchModels = () => {
-     fetch('/api/models')
-       .then(r => r.json())
-       .then(modelsData => {
+  const fetchModels = () => {
+    fetch('/api/models')
+      .then(r => r.json())
+      .then(modelsData => {
          console.log('Models data received:', modelsData);
-         setAvailableModels(modelsData.models || []);
-         
-         const persistedModel = localStorage.getItem(SELECTED_MODEL_KEY);
-         if (modelsData.models && modelsData.models.length > 0) {
-           if (persistedModel === 'random') {
-             // Keep random selection
-             setSelectedModel('random');
-           } else if (persistedModel && modelsData.models.find((m: { m_code: string; is_available: boolean }) => m.m_code === persistedModel && m.is_available)) {
-             setSelectedModel(persistedModel);
-           } else {
-             const firstAvailableModel = modelsData.models.find((m: { is_available: boolean }) => m.is_available) || modelsData.models[0];
-             setSelectedModel(firstAvailableModel.m_code);
-             localStorage.setItem(SELECTED_MODEL_KEY, firstAvailableModel.m_code);
-           }
-         }
-       })
-       .catch(() => {
-         // Handle error silently
-       });
-   };
+        setAvailableModels(modelsData.models || []);
+        
+        const persistedModel = localStorage.getItem(SELECTED_MODEL_KEY);
+        if (modelsData.models && modelsData.models.length > 0) {
+          if (persistedModel === 'random') {
+            // Keep random selection
+            setSelectedModel('random');
+          } else if (persistedModel && modelsData.models.find((m: { m_code: string; is_available: boolean }) => m.m_code === persistedModel && m.is_available)) {
+            setSelectedModel(persistedModel);
+          } else {
+            const firstAvailableModel = modelsData.models.find((m: { is_available: boolean }) => m.is_available) || modelsData.models[0];
+            setSelectedModel(firstAvailableModel.m_code);
+            localStorage.setItem(SELECTED_MODEL_KEY, firstAvailableModel.m_code);
+          }
+        }
+      })
+      .catch(() => {
+        // Handle error silently
+      });
+  };
 
   const toggleModelAvailability = async (modelCode: string, currentStatus: boolean) => {
     try {
@@ -317,9 +317,9 @@ Model "${newModelData.label}" added successfully!
     return (
       <PageContainer>
         <div className="mx-auto max-w-md px-4 sm:px-6 lg:px-8 py-6 sm:py-10">
-                     <div className="text-center mb-8">
+          <div className="text-center mb-8">
              <Heading level={2}>Admin Login</Heading>
-           </div>
+          </div>
 
           <form onSubmit={handleLogin} className="space-y-6">
             <div>
@@ -393,12 +393,12 @@ Model "${newModelData.label}" added successfully!
                  <SelectInput
                    label="Model"
                    name="selected-model"
-                   value={selectedModel}
+                  value={selectedModel}
                    onChange={(newValue) => handleModelChange(newValue || '')}
                    options={[
                      { value: 'random', label: 'Random' },
                      ...availableModels
-                       .filter(model => model.is_available)
+                    .filter(model => model.is_available)
                        .map(model => ({
                          value: model.m_code,
                          label: model.label
@@ -473,7 +473,7 @@ Model "${newModelData.label}" added successfully!
                                Delete
                              </Button>
                            </div>
-                         </td>
+                        </td>
                       </tr>
                     ))}
                   </tbody>
@@ -490,7 +490,7 @@ Model "${newModelData.label}" added successfully!
                    >
                      Add New Model
                    </Button>
-                 </div>
+            </div>
                )}
 
               {/* Add Model Form - now below the table */}
@@ -560,13 +560,13 @@ Model "${newModelData.label}" added successfully!
                     >
                       Save Model
                     </Button>
-                    <Button
+                       <Button
                       name="cancel-add"
-                      variant="secondary"
+                         variant="secondary"
                       onClick={() => setShowAddModelForm(false)}
                     >
                       Cancel
-                    </Button>
+                       </Button>
                   </div>
                                  </div>
                )}
@@ -639,10 +639,10 @@ Model "${newModelData.label}" added successfully!
                      >
                        Update Model
                      </Button>
-                     <Button
+                       <Button
                        name="cancel-edit"
-                       variant="secondary"
-                       onClick={() => {
+                         variant="secondary"
+                         onClick={() => {
                          setShowEditModelForm(false);
                          setEditingModel(null);
                          setNewModelData({
@@ -652,27 +652,27 @@ Model "${newModelData.label}" added successfully!
                            provider: 'huggingface',
                            model_id: '',
                            is_available: false
-                         });
-                       }}
-                     >
+                             });
+                         }}
+                       >
                        Cancel
-                     </Button>
-                   </div>
+                       </Button>
+                     </div>
                  </div>
                )}
-             </div>
-           </Container>
+                   </div>
+                 </Container>
 
 
 
                      {/* Utilities Section */}
-           <Container
+                 <Container
              heading="Utilities"
-             headingLevel={2}
-             withHeaderBorder
-             withInternalPadding
-           >
-             <div className="flex flex-wrap gap-4">
+                   headingLevel={2}
+                   withHeaderBorder
+                   withInternalPadding
+                 >
+                     <div className="flex flex-wrap gap-4">
                <Button
                  name="test-connection"
                  variant="secondary"
@@ -702,17 +702,17 @@ Model "${newModelData.label}" added successfully!
                  Test Connection
                </Button>
                
-               <Button
-                 name="view-schemas"
-                 variant="secondary"
-                 onClick={() => {
-                   fetch('/api/schemas', {
-                     headers: {
-                       'Authorization': `Bearer ${localStorage.getItem('adminToken')}`
-                     }
-                   })
-                     .then(r => r.json())
-                     .then(data => {
+                       <Button
+                         name="view-schemas"
+                         variant="secondary"
+                         onClick={() => {
+                           fetch('/api/schemas', {
+                             headers: {
+                               'Authorization': `Bearer ${localStorage.getItem('adminToken')}`
+                             }
+                           })
+                             .then(r => r.json())
+                             .then(data => {
                        console.log('Schemas Response:', data);
                        
                        let results = '';
@@ -741,13 +741,13 @@ Model "${newModelData.label}" added successfully!
                        setTestResults(results);
                        setTestResultsTitle('Schemas Error');
                        setShowTestResultsModal(true);
-                     });
-                 }}
-               >
-                 View Schemas
-               </Button>
-             </div>
-           </Container>
+                             });
+                         }}
+                       >
+                         View Schemas
+                       </Button>
+                   </div>
+                 </Container>
         </div>
       </div>
 

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

@@ -93,6 +93,86 @@
   }
 }
 
+.userInteractionCards {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: var(--go-ui-spacing-lg);
+}
+
+.userInteractionCard {
+  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);
+  padding: var(--go-ui-spacing-xl);
+  text-align: center;
+  box-shadow: var(--go-ui-box-shadow-sm);
+  transition: box-shadow 0.2s ease-in-out;
+}
+
+.userInteractionCard:hover {
+  box-shadow: var(--go-ui-box-shadow-md);
+}
+
+.userInteractionCardValue {
+  font-size: var(--go-ui-font-size-2xl);
+  font-weight: var(--go-ui-font-weight-bold);
+  color: var(--go-ui-color-text);
+  margin-bottom: var(--go-ui-spacing-sm);
+}
+
+.userInteractionCardLabel {
+  font-size: var(--go-ui-font-size-sm);
+  color: var(--go-ui-color-text-secondary);
+  margin-bottom: var(--go-ui-spacing-lg);
+}
+
+.userInteractionCardButton {
+  width: 100%;
+}
+
+.summaryStatsCards {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: var(--go-ui-spacing-lg);
+  margin-bottom: var(--go-ui-spacing-lg);
+}
+
+.summaryStatsCard {
+  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);
+  padding: var(--go-ui-spacing-xl);
+  text-align: center;
+  box-shadow: var(--go-ui-box-shadow-sm);
+  transition: box-shadow 0.2s ease-in-out;
+}
+
+.summaryStatsCard:hover {
+  box-shadow: var(--go-ui-box-shadow-md);
+}
+
+.summaryStatsCardValue {
+  font-size: var(--go-ui-font-size-2xl);
+  font-weight: var(--go-ui-font-weight-bold);
+  color: var(--go-ui-color-text);
+  margin-bottom: var(--go-ui-spacing-sm);
+}
+
+.summaryStatsCardLabel {
+  font-size: var(--go-ui-font-size-sm);
+  color: var(--go-ui-color-text-secondary);
+}
+
+@media (min-width: 768px) {
+  .userInteractionCards {
+    grid-template-columns: repeat(3, 1fr);
+  }
+  
+  .summaryStatsCards {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
 @media (max-width: 768px) {
   .summaryStats {
     grid-template-columns: 1fr;

frontend/src/pages/AnalyticsPage/AnalyticsPage.tsx

@@ -1,12 +1,7 @@
 import {
-  PageContainer,
-  PieChart,
-  KeyFigure,
-  Spinner,
-  Container,
-  ProgressBar,
-  SegmentInput,
-  Table,
+  PageContainer, Button,
+  Container, Spinner, SegmentInput,
+  Table, PieChart, ProgressBar,
 } from '@ifrc-go/ui';
 import {
   createStringColumn,
@@ -14,6 +9,7 @@ import {
   numericIdSelector
 } from '@ifrc-go/ui/utils';
 import { useState, useEffect, useMemo, useCallback } from 'react';
+import { useSearchParams } from 'react-router-dom';
 import styles from './AnalyticsPage.module.css';
 
 interface AnalyticsData {
@@ -28,8 +24,17 @@ interface AnalyticsData {
       avgContext: number;
       avgUsability: number;
       totalScore: number;
+      deleteCount: number;
     };
   };
+  modelEditTimes: { [key: string]: number[] };
+  percentageModified: number;
+  modelPercentageData: { [key: string]: number[] };
+  totalDeleteCount: number;
+  deleteRate: number;
+  // Add separated image data for proper filtering
+  crisisMaps: MapData[];
+  droneImages: MapData[];
 }
 
 interface LookupData {
@@ -70,6 +75,24 @@ interface ModelData {
   totalScore: number;
 }
 
+interface EditTimeData {
+  id: number;
+  name: string;
+  count: number;
+  avgEditTime: number;
+  minEditTime: number;
+  maxEditTime: number;
+}
+
+interface PercentageModifiedData {
+  id: number;
+  name: string;
+  count: number;
+  avgPercentageModified: number;
+  minPercentageModified: number;
+  maxPercentageModified: number;
+}
+
 interface MapData {
   source?: string;
   event_type?: string;
@@ -78,35 +101,83 @@ interface MapData {
   accuracy?: number;
   context?: number;
   usability?: number;
+  created_at?: string;
+  updated_at?: string;
+  generated?: string;
+  edited?: string;
+  image_type?: string;
 }
 
 export default function AnalyticsPage() {
+  const [searchParams] = useSearchParams();
   const [data, setData] = useState<AnalyticsData | null>(null);
   const [loading, setLoading] = useState(true);
-  const [view, setView] = useState<'general' | 'vlm'>('general');
+  const [view, setView] = useState<'crisis_maps' | 'drone_images'>('crisis_maps');
   const [sourcesLookup, setSourcesLookup] = useState<LookupData[]>([]);
   const [typesLookup, setTypesLookup] = useState<LookupData[]>([]);
   const [regionsLookup, setRegionsLookup] = useState<LookupData[]>([]);
+  const [showEditTimeModal, setShowEditTimeModal] = useState(false);
+  const [showPercentageModal, setShowPercentageModal] = useState(false);
+  const [showDeleteModal, setShowDeleteModal] = useState(false);
 
   const viewOptions = [
-    { key: 'general' as const, label: 'General Analytics' },
-    { key: 'vlm' as const, label: 'VLM Analytics' }
+    { key: 'crisis_maps' as const, label: 'Crisis Maps' },
+    { key: 'drone_images' as const, label: 'Drone Images' }
   ];
 
+  // Helper function to calculate word similarity
+  const calculateWordSimilarity = useCallback((text1: string, text2: string): number => {
+    if (!text1 || !text2) return 0;
+    
+    // Split into words, lowercase, and remove punctuation
+    const words1 = text1.toLowerCase().replace(/[^\w\s]/g, '').split(/\s+/).filter(word => word.length > 0);
+    const words2 = text2.toLowerCase().replace(/[^\w\s]/g, '').split(/\s+/).filter(word => word.length > 0);
+    
+    if (words1.length === 0 && words2.length === 0) return 1; // Both empty = 100% similar
+    if (words1.length === 0 || words2.length === 0) return 0; // One empty = 0% similar
+    
+    // Create sets of unique words
+    const set1 = new Set(words1);
+    const set2 = new Set(words2);
+    
+    // Calculate intersection and union
+    const intersection = new Set([...set1].filter(word => set2.has(word)));
+    const union = new Set([...set1, ...set2]);
+    
+    // Calculate similarity
+    const similarity = intersection.size / union.size;
+    return similarity;
+  }, []);
+
   const fetchAnalytics = useCallback(async () => {
     setLoading(true);
     try {
-      const res = await fetch('/api/images/');
+      const res = await fetch('/api/images');
       const maps = await res.json();
 
+      // Calculate edit times for each model
+      const modelEditTimes: { [key: string]: number[] } = {};
+
+      // Separate images by type for proper filtering
+      const crisisMaps = maps.filter((map: MapData) => map.image_type === 'crisis_map');
+      const droneImages = maps.filter((map: MapData) => map.image_type === 'drone_image');
+
       const analytics: AnalyticsData = {
         totalCaptions: maps.length,
         sources: {},
         types: {},
         regions: {},
         models: {},
+        modelEditTimes: modelEditTimes,
+        percentageModified: 0,
+        modelPercentageData: {},
+        totalDeleteCount: 0,
+        deleteRate: 0,
+        crisisMaps: crisisMaps,
+        droneImages: droneImages,
       };
 
+      // Process all images for global analytics
       maps.forEach((map: MapData) => {
         if (map.source) analytics.sources[map.source] = (analytics.sources[map.source] || 0) + 1;
         if (map.event_type) analytics.types[map.event_type] = (analytics.types[map.event_type] || 0) + 1;
@@ -117,11 +188,22 @@ export default function AnalyticsPage() {
         }
         if (map.model) {
           const m = map.model;
-          const ctr = analytics.models[m] ||= { count: 0, avgAccuracy: 0, avgContext: 0, avgUsability: 0, totalScore: 0 };
+          const ctr = analytics.models[m] ||= { count: 0, avgAccuracy: 0, avgContext: 0, avgUsability: 0, totalScore: 0, deleteCount: 0 };
           ctr.count++;
           if (map.accuracy != null) ctr.avgAccuracy += map.accuracy;
           if (map.context != null) ctr.avgContext += map.context;
           if (map.usability != null) ctr.avgUsability += map.usability;
+          
+          // Calculate edit time if both timestamps exist
+          if (map.created_at && map.updated_at) {
+            const created = new Date(map.created_at).getTime();
+            const updated = new Date(map.updated_at).getTime();
+            const editTimeMs = updated - created;
+            if (editTimeMs > 0) {
+              if (!modelEditTimes[m]) modelEditTimes[m] = [];
+              modelEditTimes[m].push(editTimeMs);
+            }
+          }
         }
       });
 
@@ -146,7 +228,7 @@ export default function AnalyticsPage() {
       const allModels = ['GPT-4', 'Claude', 'Gemini', 'Llama', 'Other'];
       allModels.forEach(model => {
         if (!analytics.models[model]) {
-          analytics.models[model] = { count: 0, avgAccuracy: 0, avgContext: 0, avgUsability: 0, totalScore: 0 };
+          analytics.models[model] = { count: 0, avgAccuracy: 0, avgContext: 0, avgUsability: 0, totalScore: 0, deleteCount: 0 };
         }
       });
 
@@ -159,6 +241,60 @@ export default function AnalyticsPage() {
         }
       });
 
+             // Calculate percentage modified (median)
+       const textPairs = maps.filter((map: MapData) => map.generated && map.edited);
+       
+       if (textPairs.length > 0) {
+         const similarities = textPairs.map((map: MapData) => 
+           calculateWordSimilarity(map.generated!, map.edited!)
+         );
+         const sortedSimilarities = [...similarities].sort((a, b) => a - b);
+         const mid = Math.floor(sortedSimilarities.length / 2);
+         const medianSimilarity = sortedSimilarities.length % 2 === 0 
+           ? (sortedSimilarities[mid - 1] + sortedSimilarities[mid]) / 2
+           : sortedSimilarities[mid];
+         analytics.percentageModified = Math.round((1 - medianSimilarity) * 100);
+       }
+
+             // Calculate percentage modified per model (median)
+       const modelPercentageData: { [key: string]: number[] } = {};
+       
+       maps.forEach((map: MapData) => {
+         if (map.model && map.generated && map.edited) {
+           const similarity = calculateWordSimilarity(map.generated, map.edited);
+           const percentageModified = Math.round((1 - similarity) * 100);
+           
+           if (!modelPercentageData[map.model]) {
+             modelPercentageData[map.model] = [];
+           }
+           modelPercentageData[map.model].push(percentageModified);
+         }
+       });
+       
+       analytics.modelPercentageData = modelPercentageData;
+
+      // Fetch model data including delete counts
+      try {
+        const modelsRes = await fetch('/api/admin/models');
+        if (modelsRes.ok) {
+          const modelsData = await modelsRes.json();
+          
+          // Update delete counts for each model
+          modelsData.forEach((model: { m_code: string; delete_count: number }) => {
+            if (analytics.models[model.m_code]) {
+              analytics.models[model.m_code].deleteCount = model.delete_count || 0;
+            }
+          });
+          
+          // Calculate total delete count and delete rate
+          const totalDeleteCount = modelsData.reduce((sum: number, model: { delete_count: number }) => sum + (model.delete_count || 0), 0);
+          analytics.totalDeleteCount = totalDeleteCount;
+          analytics.deleteRate = totalDeleteCount > 0 ? Math.round((totalDeleteCount / (totalDeleteCount + maps.length)) * 100) : 0;
+        }
+      } catch (error) {
+        console.log('Could not fetch model delete counts:', error);
+      }
+
       setData(analytics);
     } catch {
       
@@ -166,7 +302,7 @@ export default function AnalyticsPage() {
     } finally {
       setLoading(false);
     }
-  }, [sourcesLookup, typesLookup, regionsLookup]);
+  }, [sourcesLookup, typesLookup, regionsLookup, calculateWordSimilarity]);
 
   const fetchLookupData = useCallback(async () => {
     try {
@@ -181,10 +317,19 @@ export default function AnalyticsPage() {
       setSourcesLookup(sources);
       setTypesLookup(types);
       setRegionsLookup(regions);
-    } catch {
+    } catch (error) {
+      console.log('Could not fetch lookup data:', error);
     }
   }, []);
 
+  // Set initial view based on URL parameter
+  useEffect(() => {
+    const viewParam = searchParams.get('view');
+    if (viewParam === 'crisis_maps' || viewParam === 'drone_images') {
+      setView(viewParam);
+    }
+  }, [searchParams]);
+
   useEffect(() => {
     fetchLookupData();
   }, []);
@@ -200,74 +345,109 @@ export default function AnalyticsPage() {
     return source ? source.label : code;
   }, [sourcesLookup]);
 
+  const getMedianEditTime = useCallback((editTimes: number[]) => {
+    if (editTimes.length === 0) return 0;
+    const sortedTimes = [...editTimes].sort((a, b) => a - b);
+    const mid = Math.floor(sortedTimes.length / 2);
+    return sortedTimes.length % 2 === 0 
+      ? Math.round((sortedTimes[mid - 1] + sortedTimes[mid]) / 2)
+      : sortedTimes[mid];
+  }, []);
+
+  const formatEditTime = useCallback((ms: number) => {
+    const seconds = Math.floor(ms / 1000);
+    const minutes = Math.floor(seconds / 60);
+    const hours = Math.floor(minutes / 60);
+    
+    if (hours > 0) {
+      return `${hours}h ${minutes % 60}m`;
+    } else if (minutes > 0) {
+      return `${minutes}m ${seconds % 60}s`;
+    } else {
+      return `${seconds}s`;
+    }
+  }, []);
+
   const getTypeLabel = useCallback((code: string) => {
     const type = typesLookup.find(t => t.t_code === code);
     return type ? type.label : code;
   }, [typesLookup]);
 
-  const regionsTableData = useMemo(() => {
-    if (!data || !regionsLookup.length) return [];
-    
-    const allRegions = regionsLookup.reduce((acc, region) => {
-      if (region.r_code) {
-        acc[region.r_code] = {
-          name: region.label,
-          count: data.regions[region.r_code] || 0
-        };
-      }
-      return acc;
-    }, {} as Record<string, { name: string; count: number }>);
-
-    return Object.entries(allRegions)
-      .sort(([,a], [,b]) => b.count - a.count)
-      .map(([, { name, count }], index) => ({
-        id: index + 1,
-        name,
-        count,
-        percentage: data.totalCaptions > 0 ? Math.round((count / data.totalCaptions) * 100) : 0
-      }));
-  }, [data, regionsLookup]);
-
-  const typesTableData = useMemo(() => {
+  const editTimeTableData = useMemo(() => {
     if (!data) return [];
     
-    return Object.entries(data.types)
-      .sort(([,a], [,b]) => b - a)
-      .map(([typeKey, count], index) => ({
+    return Object.entries(data.modelEditTimes || {})
+      .filter(([, editTimes]) => editTimes.length > 0)
+      .sort(([, a], [, b]) => getMedianEditTime(b) - getMedianEditTime(a))
+      .map(([model, editTimes], index) => ({
         id: index + 1,
-        name: getTypeLabel(typeKey),
-        count,
-        percentage: Math.round((count / data.totalCaptions) * 100)
+        name: model,
+        count: editTimes.length,
+        avgEditTime: getMedianEditTime(editTimes),
+        minEditTime: Math.min(...editTimes),
+        maxEditTime: Math.max(...editTimes)
       }));
-  }, [data, getTypeLabel]);
+  }, [data, getMedianEditTime]);
 
-  const sourcesTableData = useMemo(() => {
+  const percentageModifiedTableData = useMemo(() => {
     if (!data) return [];
     
-    return Object.entries(data.sources)
-      .sort(([,a], [,b]) => b - a)
-      .map(([sourceKey, count], index) => ({
-        id: index + 1,
-        name: getSourceLabel(sourceKey),
-        count,
-        percentage: Math.round((count / data.totalCaptions) * 100)
-      }));
-  }, [data, getSourceLabel]);
+    return Object.entries(data.modelPercentageData || {})
+      .filter(([, percentages]) => percentages.length > 0)
+      .sort(([, a], [, b]) => {
+        const sortedA = [...a].sort((x, y) => x - y);
+        const sortedB = [...b].sort((x, y) => x - y);
+        const midA = Math.floor(sortedA.length / 2);
+        const midB = Math.floor(sortedB.length / 2);
+        const medianA = sortedA.length % 2 === 0 
+          ? (sortedA[midA - 1] + sortedA[midA]) / 2
+          : sortedA[midA];
+        const medianB = sortedB.length % 2 === 0 
+          ? (sortedB[midB - 1] + sortedB[midB]) / 2
+          : sortedB[midB];
+        return medianB - medianA;
+      })
+      .map(([model, percentages], index) => {
+        const sortedPercentages = [...percentages].sort((a, b) => a - b);
+        const mid = Math.floor(sortedPercentages.length / 2);
+        const medianPercentage = sortedPercentages.length % 2 === 0 
+          ? Math.round((sortedPercentages[mid - 1] + sortedPercentages[mid]) / 2)
+          : sortedPercentages[mid];
+        
+        return {
+          id: index + 1,
+          name: model,
+          count: percentages.length,
+          avgPercentageModified: medianPercentage,
+          minPercentageModified: Math.min(...percentages),
+          maxPercentageModified: Math.max(...percentages)
+        };
+      });
+  }, [data]);
+
 
-  const modelsTableData = useMemo(() => {
+
+  const modelConsistencyData = useMemo(() => {
     if (!data) return [];
     
     return Object.entries(data.models)
-      .sort(([,a], [,b]) => b.totalScore - a.totalScore)
-      .map(([model, stats], index) => ({
-        id: index + 1,
-        name: model,
-        count: stats.count,
-        accuracy: stats.avgAccuracy,
-        context: stats.avgContext,
-        usability: stats.avgUsability,
-        totalScore: stats.totalScore
-      }));
+      .filter(([, model]) => model.count > 0)
+      .map(([name, model], index) => {
+        // Calculate consistency based on how close accuracy, context, and usability are
+        const scores = [model.avgAccuracy, model.avgContext, model.avgUsability];
+        const mean = scores.reduce((sum, score) => sum + score, 0) / scores.length;
+        const variance = scores.reduce((sum, score) => sum + Math.pow(score - mean, 2), 0) / scores.length;
+        const consistency = Math.round(100 - Math.sqrt(variance)); // Lower variance = higher consistency
+        
+        return {
+          id: index + 1,
+          name,
+          consistency: Math.max(0, consistency),
+          avgScore: Math.round(mean),
+          count: model.count
+        };
+      })
+      .sort((a, b) => b.consistency - a.consistency);
   }, [data]);
 
   const regionsColumns = useMemo(() => [
@@ -383,8 +563,423 @@ export default function AnalyticsPage() {
         maximumFractionDigits: 0,
       },
     ),
+    
+  ], [formatEditTime]);
+
+  const editTimeColumns = useMemo(() => [
+    createStringColumn<EditTimeData, number>(
+      'name',
+      'Model',
+      (item) => item.name,
+    ),
+    createNumberColumn<EditTimeData, number>(
+      'count',
+      'Count',
+      (item) => item.count,
+    ),
+         createStringColumn<EditTimeData, number>(
+       'avgEditTime',
+       'Median Edit Time',
+       (item) => formatEditTime(item.avgEditTime),
+     ),
+    createStringColumn<EditTimeData, number>(
+      'minEditTime',
+      'Min Edit Time',
+      (item) => formatEditTime(item.minEditTime),
+    ),
+    createStringColumn<EditTimeData, number>(
+      'maxEditTime',
+      'Max Edit Time',
+      (item) => formatEditTime(item.maxEditTime),
+    ),
+  ], [formatEditTime]);
+
+    const percentageModifiedColumns = useMemo(() => [
+    createStringColumn<PercentageModifiedData, number>(
+      'name',
+      'Model',
+      (item) => item.name,
+    ),
+    createNumberColumn<PercentageModifiedData, number>(
+      'count',
+      'Count',
+      (item) => item.count,
+    ),
+          createNumberColumn<PercentageModifiedData, number>(
+        'avgPercentageModified',
+        'Median % Modified',
+        (item) => item.avgPercentageModified,
+        {
+          suffix: '%',
+          maximumFractionDigits: 0,
+        },
+      ),
+    createNumberColumn<PercentageModifiedData, number>(
+      'minPercentageModified',
+      'Min % Modified',
+      (item) => item.minPercentageModified,
+      {
+        suffix: '%',
+        maximumFractionDigits: 0,
+      },
+    ),
+    createNumberColumn<PercentageModifiedData, number>(
+      'maxPercentageModified',
+      'Max % Modified',
+      (item) => item.maxPercentageModified,
+      {
+        suffix: '%',
+        maximumFractionDigits: 0,
+      },
+    ),
   ], []);
 
+
+
+  const qualityBySourceColumns = useMemo(() => [
+    createStringColumn<{ source: string; avgQuality: number; count: number }, number>(
+      'source',
+      'Source',
+      (item) => item.source,
+    ),
+    createNumberColumn<{ source: string; avgQuality: number; count: number }, number>(
+      'avgQuality',
+      'Average Quality',
+      (item) => item.avgQuality,
+      {
+        suffix: '%',
+        maximumFractionDigits: 0,
+      },
+    ),
+    createNumberColumn<{ source: string; avgQuality: number; count: number }, number>(
+      'count',
+      'Count',
+      (item) => item.count,
+    ),
+  ], []);
+
+  const modelConsistencyColumns = useMemo(() => [
+    createStringColumn<{ name: string; consistency: number; avgScore: number; count: number }, number>(
+      'name',
+      'Model',
+      (item) => item.name,
+    ),
+    createNumberColumn<{ name: string; consistency: number; avgScore: number; count: number }, number>(
+      'consistency',
+      'Consistency',
+      (item) => item.consistency,
+      {
+        suffix: '%',
+        maximumFractionDigits: 0,
+      },
+    ),
+    createNumberColumn<{ name: string; consistency: number; avgScore: number; count: number }, number>(
+      'avgScore',
+      'Average Score',
+      (item) => item.avgScore,
+      {
+        suffix: '%',
+        maximumFractionDigits: 0,
+      },
+    ),
+    createNumberColumn<{ name: string; consistency: number; avgScore: number; count: number }, number>(
+      'count',
+      'Count',
+      (item) => item.count,
+    ),
+  ], []);
+
+  // Helper functions to filter data by image type
+  const getImageTypeCount = useCallback((imageType: string) => {
+    if (!data) return 0;
+    
+    if (imageType === 'crisis_map') {
+      return data.crisisMaps.length;
+    } else if (imageType === 'drone_image') {
+      return data.droneImages.length;
+    }
+    
+    return 0;
+  }, [data]);
+
+  const getImageTypeRegionsChartData = useCallback((imageType: string) => {
+    if (!data) return [];
+    
+    // Get the appropriate image set based on type
+    const images = imageType === 'crisis_map' ? data.crisisMaps : data.droneImages;
+    
+    // Calculate regions for this specific image type
+    const regions: { [key: string]: number } = {};
+    images.forEach((map: MapData) => {
+      if (map.countries) {
+        map.countries.forEach((c) => {
+          if (c.r_code) regions[c.r_code] = (regions[c.r_code] || 0) + 1;
+        });
+      }
+    });
+    
+    return Object.entries(regions)
+      .filter(([, value]) => value > 0)
+      .map(([name, value]) => ({ name, value }));
+  }, [data]);
+
+  const getImageTypeRegionsTableData = useCallback((imageType: string) => {
+    if (!data) return [];
+    
+    // Get the appropriate image set based on type
+    const images = imageType === 'crisis_map' ? data.crisisMaps : data.droneImages;
+    
+    // Calculate regions for this specific image type
+    const regions: { [key: string]: number } = {};
+    images.forEach((map: MapData) => {
+      if (map.countries) {
+        map.countries.forEach((c) => {
+          if (c.r_code) regions[c.r_code] = (regions[c.r_code] || 0) + 1;
+        });
+      }
+    });
+    
+    // Convert to table data format
+    const allRegions = regionsLookup.reduce((acc, region) => {
+      if (region.r_code) {
+        acc[region.r_code] = {
+          name: region.label,
+          count: regions[region.r_code] || 0
+        };
+      }
+      return acc;
+    }, {} as Record<string, { name: string; count: number }>);
+
+    return Object.entries(allRegions)
+      .sort(([,a], [,b]) => b.count - a.count)
+      .map(([, { name, count }], index) => ({
+        id: index + 1,
+        name,
+        count,
+        percentage: images.length > 0 ? Math.round((count / images.length) * 100) : 0
+      }));
+  }, [data, regionsLookup]);
+
+  const getImageTypeSourcesChartData = useCallback((imageType: string) => {
+    if (!data) return [];
+    
+    // Get the appropriate image set based on type
+    const images = imageType === 'crisis_map' ? data.crisisMaps : data.droneImages;
+    
+    // Calculate sources for this specific image type
+    const sources: { [key: string]: number } = {};
+    images.forEach((map: MapData) => {
+      if (map.source) sources[map.source] = (sources[map.source] || 0) + 1;
+    });
+    
+    return Object.entries(sources)
+      .filter(([, value]) => value > 0)
+      .map(([name, value]) => ({ name, value }));
+  }, [data]);
+
+  const getImageTypeSourcesTableData = useCallback((imageType: string) => {
+    if (!data) return [];
+    
+    // Get the appropriate image set based on type
+    const images = imageType === 'crisis_map' ? data.crisisMaps : data.droneImages;
+    
+    // Calculate sources for this specific image type
+    const sources: { [key: string]: number } = {};
+    images.forEach((map: MapData) => {
+      if (map.source) sources[map.source] = (sources[map.source] || 0) + 1;
+    });
+    
+    // Convert to table data format
+    return Object.entries(sources)
+      .sort(([,a], [,b]) => b - a)
+      .map(([sourceKey, count], index) => ({
+        id: index + 1,
+        name: getSourceLabel(sourceKey),
+        count,
+        percentage: images.length > 0 ? Math.round((count / images.length) * 100) : 0
+      }));
+  }, [data, getSourceLabel]);
+
+  const getImageTypeTypesChartData = useCallback((imageType: string) => {
+    if (!data) return [];
+    
+    // Get the appropriate image set based on type
+    const images = imageType === 'crisis_map' ? data.crisisMaps : data.droneImages;
+    
+    // Calculate types for this specific image type
+    const types: { [key: string]: number } = {};
+    images.forEach((map: MapData) => {
+      if (map.event_type) types[map.event_type] = (types[map.event_type] || 0) + 1;
+    });
+    
+    return Object.entries(types)
+      .filter(([, value]) => value > 0)
+      .map(([name, value]) => ({ name, value }));
+  }, [data]);
+
+  const getImageTypeTypesTableData = useCallback((imageType: string) => {
+    if (!data) return [];
+    
+    // Get the appropriate image set based on type
+    const images = imageType === 'crisis_map' ? data.crisisMaps : data.droneImages;
+    
+    // Calculate types for this specific image type
+    const types: { [key: string]: number } = {};
+    images.forEach((map: MapData) => {
+      if (map.event_type) types[map.event_type] = (types[map.event_type] || 0) + 1;
+    });
+    
+    // Convert to table data format
+    return Object.entries(types)
+      .sort(([,a], [,b]) => b - a)
+      .map(([typeKey, count], index) => ({
+        id: index + 1,
+        name: getTypeLabel(typeKey),
+        count,
+        percentage: images.length > 0 ? Math.round((count / images.length) * 100) : 0
+      }));
+  }, [data, getTypeLabel]);
+
+  const getImageTypeMedianEditTime = useCallback((imageType: string) => {
+    if (!data) return 'No data available';
+    // Filter edit times by image type
+    const filteredEditTimes = Object.entries(data.modelEditTimes).filter(([modelName]) => {
+      if (imageType === 'crisis_map') {
+        return modelName.includes('GPT') || modelName.includes('Claude') || modelName.includes('Gemini') || modelName.includes('STUB');
+      } else if (imageType === 'drone_image') {
+        return modelName.includes('Llama') || modelName.includes('Other');
+      }
+      return true;
+    });
+    
+    const editTimes = filteredEditTimes.flatMap(([, times]) => times);
+    if (editTimes.length === 0) return 'No data available';
+    return formatEditTime(getMedianEditTime(editTimes));
+  }, [data, formatEditTime, getMedianEditTime]);
+
+  const getImageTypePercentageModified = useCallback(() => {
+    if (!data) return 'No data available';
+    const total = data.totalCaptions || 0;
+    const modified = data.percentageModified || 0;
+    
+    return total > 0 ? Math.round((modified / total) * 100) : 0;
+  }, [data]);
+
+  const getImageTypeDeleteRate = useCallback(() => {
+    if (!data) return 'No data available';
+    // For now, we'll return the global delete rate since we don't have image_type filtering in the backend
+    // In a real implementation, you'd calculate this based on filtered data
+    return data.deleteRate >= 0 ? `${data.deleteRate}%` : 'No data available';
+  }, [data]);
+
+  const getImageTypeEditTimeTableData = useCallback((imageType: string) => {
+    if (!data) return [];
+    // Filter edit time data by image type
+    const filteredData = editTimeTableData.filter(d => {
+      if (imageType === 'crisis_map') {
+        return d.name.includes('GPT') || d.name.includes('Claude') || d.name.includes('Gemini') || d.name.includes('STUB');
+      } else if (imageType === 'drone_image') {
+        return d.name.includes('Llama') || d.name.includes('Other');
+      }
+      return true;
+    });
+    return filteredData;
+  }, [data, editTimeTableData]);
+
+  const getImageTypePercentageTableData = useCallback((imageType: string) => {
+    if (!data) return [];
+    // Filter percentage data by image type
+    const filteredData = percentageModifiedTableData.filter(d => {
+      if (imageType === 'crisis_map') {
+        return d.name.includes('GPT') || d.name.includes('Claude') || d.name.includes('Gemini') || d.name.includes('STUB');
+      } else if (imageType === 'drone_image') {
+        return d.name.includes('Llama') || d.name.includes('Other');
+      }
+      return true;
+    });
+    return filteredData;
+  }, [data, percentageModifiedTableData]);
+
+     const getImageTypeModelsTableData = useCallback((imageType: string) => {
+     if (!data) return [];
+     
+     // Get the appropriate image set based on type
+     const images = imageType === 'crisis_map' ? data.crisisMaps : data.droneImages;
+     
+     // Calculate models for this specific image type
+     const modelStats: { [key: string]: { count: number; totalAccuracy: number; totalContext: number; totalUsability: number } } = {};
+     
+     images.forEach((map: MapData) => {
+       if (map.model) {
+         if (!modelStats[map.model]) {
+           modelStats[map.model] = { count: 0, totalAccuracy: 0, totalContext: 0, totalUsability: 0 };
+         }
+         modelStats[map.model].count++;
+         if (map.accuracy != null) modelStats[map.model].totalAccuracy += map.accuracy;
+         if (map.context != null) modelStats[map.model].totalContext += map.context;
+         if (map.usability != null) modelStats[map.model].totalUsability += map.usability;
+       }
+     });
+     
+     // Convert to table data format
+     return Object.entries(modelStats)
+       .map(([modelName, stats], index) => ({
+         id: index + 1,
+         name: modelName,
+         count: stats.count,
+         accuracy: stats.count > 0 ? Math.round(stats.totalAccuracy / stats.count) : 0,
+         context: stats.count > 0 ? Math.round(stats.totalContext / stats.count) : 0,
+         usability: stats.count > 0 ? Math.round(stats.totalUsability / stats.count) : 0,
+         totalScore: stats.count > 0 ? Math.round((stats.totalAccuracy + stats.totalContext + stats.totalUsability) / (3 * stats.count)) : 0
+       }))
+       .sort((a, b) => b.totalScore - a.totalScore);
+   }, [data]);
+
+     const getImageTypeQualityBySourceTableData = useCallback((imageType: string) => {
+     if (!data) return [];
+     
+     // Get the appropriate image set based on type
+     const images = imageType === 'crisis_map' ? data.crisisMaps : data.droneImages;
+     
+     // Calculate quality by source for this specific image type
+     const sourceQuality: { [key: string]: { total: number; count: number; totalImages: number } } = {};
+     
+     images.forEach((map: MapData) => {
+       if (map.source) {
+         if (!sourceQuality[map.source]) {
+           sourceQuality[map.source] = { total: 0, count: 0, totalImages: 0 };
+         }
+         sourceQuality[map.source].totalImages += 1;
+         if (map.accuracy != null) {
+           sourceQuality[map.source].total += map.accuracy;
+           sourceQuality[map.source].count += 1;
+         }
+       }
+     });
+     
+     // Convert to table data format
+     return Object.entries(sourceQuality).map(([source, stats], index) => ({
+       id: index + 1,
+       source: getSourceLabel(source),
+       avgQuality: stats.count > 0 ? Math.round(stats.total / stats.count) : 0,
+       count: stats.totalImages
+     }));
+   }, [data, getSourceLabel]);
+
+  const getImageTypeModelConsistencyTableData = useCallback((imageType: string) => {
+    if (!data) return [];
+    // Filter model consistency table data by image type
+    const filteredData = modelConsistencyData.filter(d => {
+      if (imageType === 'crisis_map') {
+        return d.name.includes('GPT') || d.name.includes('Claude') || d.name.includes('Gemini') || d.name.includes('STUB');
+      } else if (imageType === 'drone_image') {
+        return d.name.includes('Llama') || d.name.includes('Other');
+      }
+      return true;
+    });
+    return filteredData;
+  }, [data, modelConsistencyData]);
+
   if (loading) {
     return (
       <PageContainer>
@@ -405,9 +1000,7 @@ 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 regionsChartData = Object.entries(data.regions).filter(([, value]) => value > 0).map(([name, value]) => ({ name, value }));
+
 
   const ifrcColors = [
     '#F5333F', '#F64752', '#F75C65', '#F87079', '#F9858C', '#FA999F', '#FBADB2', '#FCC2C5'
@@ -421,7 +1014,7 @@ export default function AnalyticsPage() {
             name="analytics-view"
             value={view}
             onChange={(value) => {
-              if (value === 'general' || value === 'vlm') {
+              if (value === 'crisis_maps' || value === 'drone_images') {
                 setView(value);
               }
             }}
@@ -431,27 +1024,29 @@ export default function AnalyticsPage() {
           />
         </div>
 
-        {view === 'general' ? (
+        {view === 'crisis_maps' ? (
           <div className={styles.chartGrid}>
             <Container heading="Summary Statistics" headingLevel={3} withHeaderBorder withInternalPadding>
-              <div className={styles.summaryStats}>
-                <KeyFigure
-                  value={data.totalCaptions}
-                  label="Total Captions"
-                  compactValue
-                />
-                <KeyFigure
-                  value={2000}
-                  label="Target Amount"
-                  compactValue
-                />
+              <div className={styles.summaryStatsCards}>
+                <div className={styles.summaryStatsCard}>
+                  <div className={styles.summaryStatsCardValue}>
+                    {getImageTypeCount('crisis_map')}
+                  </div>
+                  <div className={styles.summaryStatsCardLabel}>Total Crisis Maps</div>
+                </div>
+                <div className={styles.summaryStatsCard}>
+                  <div className={styles.summaryStatsCardValue}>
+                    2000
+                  </div>
+                  <div className={styles.summaryStatsCardLabel}>Target Amount</div>
+                </div>
               </div>
               <div className={styles.progressSection}>
                 <div className={styles.progressLabel}>
                   <span>Progress towards target</span>
-                  <span>{Math.round((data.totalCaptions / 2000) * 100)}%</span>
+                  <span>{Math.round((getImageTypeCount('crisis_map') / 2000) * 100)}%</span>
                 </div>
-                <ProgressBar value={data.totalCaptions} totalValue={2000} />
+                <ProgressBar value={getImageTypeCount('crisis_map')} totalValue={2000} />
               </div>
             </Container>
 
@@ -459,7 +1054,7 @@ export default function AnalyticsPage() {
               <div className={styles.chartSection}>
                 <div className={styles.chartContainer}>
                   <PieChart
-                    data={regionsChartData}
+                    data={getImageTypeRegionsChartData('crisis_map')}
                     valueSelector={d => d.value}
                     labelSelector={d => d.name}
                     keySelector={d => d.name}
@@ -469,7 +1064,7 @@ export default function AnalyticsPage() {
                 </div>
                 <div className={styles.tableContainer}>
                   <Table
-                    data={regionsTableData}
+                    data={getImageTypeRegionsTableData('crisis_map')}
                     columns={regionsColumns}
                     keySelector={numericIdSelector}
                     filtered={false}
@@ -483,7 +1078,7 @@ export default function AnalyticsPage() {
               <div className={styles.chartSection}>
                 <div className={styles.chartContainer}>
                   <PieChart
-                    data={sourcesChartData}
+                    data={getImageTypeSourcesChartData('crisis_map')}
                     valueSelector={d => d.value}
                     labelSelector={d => d.name}
                     keySelector={d => d.name}
@@ -493,7 +1088,7 @@ export default function AnalyticsPage() {
                 </div>
                 <div className={styles.tableContainer}>
                   <Table
-                    data={sourcesTableData}
+                    data={getImageTypeSourcesTableData('crisis_map')}
                     columns={sourcesColumns}
                     keySelector={numericIdSelector}
                     filtered={false}
@@ -507,7 +1102,7 @@ export default function AnalyticsPage() {
               <div className={styles.chartSection}>
                 <div className={styles.chartContainer}>
                   <PieChart
-                    data={typesChartData}
+                    data={getImageTypeTypesChartData('crisis_map')}
                     valueSelector={d => d.value}
                     labelSelector={d => d.name}
                     keySelector={d => d.name}
@@ -517,7 +1112,7 @@ export default function AnalyticsPage() {
                 </div>
                 <div className={styles.tableContainer}>
                   <Table
-                    data={typesTableData}
+                    data={getImageTypeTypesTableData('crisis_map')}
                     columns={typesColumns}
                     keySelector={numericIdSelector}
                     filtered={false}
@@ -525,14 +1120,284 @@ export default function AnalyticsPage() {
                   />
                 </div>
               </div>
+            </Container>
+
+                         {/* New Analytics Containers */}
+             <Container heading="User Interaction Statistics" headingLevel={3} withHeaderBorder withInternalPadding>
+              <div className={styles.userInteractionCards}>
+                {/* Median Edit Time Card */}
+                <div className={styles.userInteractionCard}>
+                  <div className={styles.userInteractionCardValue}>
+                    {getImageTypeMedianEditTime('crisis_map')}
+                  </div>
+                  <div className={styles.userInteractionCardLabel}>Median Edit Time</div>
+                  <Button
+                    name="view-edit-time-details"
+                    variant="secondary"
+                    onClick={() => setShowEditTimeModal(!showEditTimeModal)}
+                    className={styles.userInteractionCardButton}
+                  >
+                    {showEditTimeModal ? 'Hide Details' : 'View Details'}
+                  </Button>
+                </div>
+
+                {/* Median % Modified Card */}
+                <div className={styles.userInteractionCard}>
+                  <div className={styles.userInteractionCardValue}>
+                    {getImageTypePercentageModified()}
+                  </div>
+                  <div className={styles.userInteractionCardLabel}>Median % Modified</div>
+                  <Button
+                    name="view-percentage-details"
+                    variant="secondary"
+                    onClick={() => setShowPercentageModal(!showPercentageModal)}
+                    className={styles.userInteractionCardButton}
+                  >
+                    {showPercentageModal ? 'Hide Details' : 'View Details'}
+                  </Button>
+                </div>
+
+                {/* Delete Rate Card */}
+                <div className={styles.userInteractionCard}>
+                  <div className={styles.userInteractionCardValue}>
+                    {getImageTypeDeleteRate()}
+                  </div>
+                  <div className={styles.userInteractionCardLabel}>Delete Rate</div>
+                  <Button
+                    name="view-delete-details"
+                    variant="secondary"
+                    onClick={() => setShowDeleteModal(!showDeleteModal)}
+                    className={styles.userInteractionCardButton}
+                  >
+                    {showDeleteModal ? 'Hide Details' : 'View Details'}
+                  </Button>
+                </div>
+              </div>
+
+                {/* Edit Time Details Table */}
+                {showEditTimeModal && (
+                  <div className={styles.modelPerformance}>
+                    <Table
+                      data={getImageTypeEditTimeTableData('crisis_map')}
+                      columns={editTimeColumns}
+                      keySelector={numericIdSelector}
+                      filtered={false}
+                      pending={false}
+                    />
+                  </div>
+                )}
+
+                {/* Percentage Modified Details Table */}
+                {showPercentageModal && (
+                  <div className={styles.modelPerformance}>
+                    <Table
+                      data={getImageTypePercentageTableData('crisis_map')}
+                      columns={percentageModifiedColumns}
+                      keySelector={numericIdSelector}
+                      filtered={false}
+                      pending={false}
+                    />
+                  </div>
+                )}
+            </Container>
+
+            <Container heading="Model Performance" headingLevel={3} withHeaderBorder withInternalPadding>
+              <div className={styles.modelPerformance}>
+                <Table
+                  data={getImageTypeModelsTableData('crisis_map')}
+                  columns={modelsColumns}
+                  keySelector={numericIdSelector}
+                  filtered={false}
+                  pending={false}
+                />
+              </div>
+            </Container>
+
+            
+
+            <Container heading="Quality-Source Correlation" headingLevel={3} withHeaderBorder withInternalPadding>
+              <div className={styles.tableContainer}>
+                <Table
+                  data={getImageTypeQualityBySourceTableData('crisis_map')}
+                  columns={qualityBySourceColumns}
+                  keySelector={numericIdSelector}
+                  filtered={false}
+                  pending={false}
+                />
+              </div>
+            </Container>
+
+            <Container heading="Model Consistency Analysis" headingLevel={3} withHeaderBorder withInternalPadding>
+              <div className={styles.tableContainer}>
+                <Table
+                  data={getImageTypeModelConsistencyTableData('crisis_map')}
+                  columns={modelConsistencyColumns}
+                  keySelector={numericIdSelector}
+                  filtered={false}
+                  pending={false}
+                />
+              </div>
             </Container>
           </div>
         ) : (
           <div className={styles.chartGrid}>
+            <Container heading="Summary Statistics" headingLevel={3} withHeaderBorder withInternalPadding>
+              <div className={styles.summaryStatsCards}>
+                <div className={styles.summaryStatsCard}>
+                  <div className={styles.summaryStatsCardValue}>
+                    {getImageTypeCount('drone_image')}
+                  </div>
+                  <div className={styles.summaryStatsCardLabel}>Total Drone Images</div>
+                </div>
+                <div className={styles.summaryStatsCard}>
+                  <div className={styles.summaryStatsCardValue}>
+                    2000
+                  </div>
+                  <div className={styles.summaryStatsCardLabel}>Target Amount</div>
+                </div>
+              </div>
+              <div className={styles.progressSection}>
+                <div className={styles.progressLabel}>
+                  <span>Progress towards target</span>
+                  <span>{Math.round((getImageTypeCount('drone_image') / 2000) * 100)}%</span>
+                </div>
+                <ProgressBar value={getImageTypeCount('drone_image')} totalValue={2000} />
+              </div>
+            </Container>
+
+            <Container heading="Regions Distribution" headingLevel={3} withHeaderBorder withInternalPadding>
+              <div className={styles.chartSection}>
+                <div className={styles.chartContainer}>
+                  <PieChart
+                    data={getImageTypeRegionsChartData('drone_image')}
+                    valueSelector={d => d.value}
+                    labelSelector={d => d.name}
+                    keySelector={d => d.name}
+                    colors={ifrcColors}
+                    showPercentageInLegend
+                  />
+                </div>
+                <div className={styles.tableContainer}>
+                  <Table
+                    data={getImageTypeRegionsTableData('drone_image')}
+                    columns={regionsColumns}
+                    keySelector={numericIdSelector}
+                    filtered={false}
+                    pending={false}
+                  />
+                </div>
+              </div>
+            </Container>
+
+            
+
+            <Container heading="Types Distribution" headingLevel={3} withHeaderBorder withInternalPadding>
+              <div className={styles.chartSection}>
+                <div className={styles.chartContainer}>
+                  <PieChart
+                    data={getImageTypeTypesChartData('drone_image')}
+                    valueSelector={d => d.value}
+                    labelSelector={d => d.name}
+                    keySelector={d => d.name}
+                    colors={ifrcColors}
+                    showPercentageInLegend
+                  />
+                </div>
+                <div className={styles.tableContainer}>
+                  <Table
+                    data={getImageTypeTypesTableData('drone_image')}
+                    columns={typesColumns}
+                    keySelector={numericIdSelector}
+                    filtered={false}
+                    pending={false}
+                  />
+                </div>
+              </div>
+            </Container>
+
+                         {/* User Interaction Statistics Box */}
+             <Container heading="User Interaction Statistics" headingLevel={3} withHeaderBorder withInternalPadding>
+                <div className={styles.userInteractionCards}>
+                  {/* Median Edit Time Card */}
+                  <div className={styles.userInteractionCard}>
+                    <div className={styles.userInteractionCardValue}>
+                      {getImageTypeMedianEditTime('drone_image')}
+                    </div>
+                    <div className={styles.userInteractionCardLabel}>Median Edit Time</div>
+                    <Button
+                      name="view-edit-time-details"
+                      variant="secondary"
+                      onClick={() => setShowEditTimeModal(!showEditTimeModal)}
+                      className={styles.userInteractionCardButton}
+                    >
+                      {showEditTimeModal ? 'Hide Details' : 'View Details'}
+                    </Button>
+                  </div>
+
+                  {/* Median % Modified Card */}
+                  <div className={styles.userInteractionCard}>
+                    <div className={styles.userInteractionCardValue}>
+                      {getImageTypePercentageModified()}
+                    </div>
+                    <div className={styles.userInteractionCardLabel}>Median % Modified</div>
+                    <Button
+                      name="view-percentage-details"
+                      variant="secondary"
+                      onClick={() => setShowPercentageModal(!showPercentageModal)}
+                      className={styles.userInteractionCardButton}
+                    >
+                      {showPercentageModal ? 'Hide Details' : 'View Details'}
+                    </Button>
+                  </div>
+
+                  {/* Delete Rate Card */}
+                  <div className={styles.userInteractionCard}>
+                    <div className={styles.userInteractionCardValue}>
+                      {getImageTypeDeleteRate()}
+                    </div>
+                    <div className={styles.userInteractionCardLabel}>Delete Rate</div>
+                    <Button
+                      name="view-delete-details"
+                      variant="secondary"
+                      onClick={() => setShowDeleteModal(!showDeleteModal)}
+                      className={styles.userInteractionCardButton}
+                    >
+                      {showDeleteModal ? 'Hide Details' : 'View Details'}
+                    </Button>
+                  </div>
+                </div>
+                
+                                 {/* Edit Time Details Table */}
+                 {showEditTimeModal && (
+                   <div className={styles.modelPerformance}>
+                     <Table
+                       data={getImageTypeEditTimeTableData('drone_image')}
+                       columns={editTimeColumns}
+                       keySelector={numericIdSelector}
+                       filtered={false}
+                       pending={false}
+                     />
+                   </div>
+                 )}
+
+                 {/* Percentage Modified Details Table */}
+                 {showPercentageModal && (
+                   <div className={styles.modelPerformance}>
+                     <Table
+                       data={getImageTypePercentageTableData('drone_image')}
+                       columns={percentageModifiedColumns}
+                       keySelector={numericIdSelector}
+                       filtered={false}
+                       pending={false}
+                     />
+                   </div>
+                 )}
+            </Container>
+
             <Container heading="Model Performance" headingLevel={3} withHeaderBorder withInternalPadding>
               <div className={styles.modelPerformance}>
                 <Table
-                  data={modelsTableData}
+                  data={getImageTypeModelsTableData('drone_image')}
                   columns={modelsColumns}
                   keySelector={numericIdSelector}
                   filtered={false}
@@ -540,9 +1405,39 @@ export default function AnalyticsPage() {
                 />
               </div>
             </Container>
+
+            
+
+            <Container heading="Quality-Source Correlation" headingLevel={3} withHeaderBorder withInternalPadding>
+              <div className={styles.tableContainer}>
+                <Table
+                  data={getImageTypeQualityBySourceTableData('drone_image')}
+                  columns={qualityBySourceColumns}
+                  keySelector={numericIdSelector}
+                  filtered={false}
+                  pending={false}
+                />
+              </div>
+            </Container>
+
+            
+
+            <Container heading="Model Consistency Analysis" headingLevel={3} withHeaderBorder withInternalPadding>
+              <div className={styles.tableContainer}>
+                <Table
+                  data={getImageTypeModelConsistencyTableData('drone_image')}
+                  columns={modelConsistencyColumns}
+                  keySelector={numericIdSelector}
+                  filtered={false}
+                  pending={false}
+                />
+              </div>
+            </Container>
           </div>
         )}
       </div>
+
+
     </PageContainer>
   );
 }

frontend/src/pages/ExplorePage/ExplorePage.module.css

@@ -1,7 +1,8 @@
 .tabSelector {
   margin-bottom: var(--go-ui-spacing-lg);
   display: flex;
-  justify-content: center;
+  justify-content: space-between;
+  align-items: center;
 }
 
 .metadataTags {
@@ -128,3 +129,205 @@
     padding: var(--go-ui-spacing-2xs) var(--go-ui-spacing-xs);
   }
 }
+
+/* Modal styles for export selection */
+.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;
+}
+
+.ratingWarningContent {
+  padding: var(--go-ui-spacing-xl);
+  text-align: center;
+  max-width: 500px;
+}
+
+.ratingWarningTitle {
+  font-size: var(--go-ui-font-size-lg);
+  font-weight: var(--go-ui-font-weight-semibold);
+  color: var(--go-ui-color-gray-900);
+  margin-bottom: var(--go-ui-spacing-md);
+}
+
+.ratingWarningText {
+  font-size: var(--go-ui-font-size-md);
+  color: var(--go-ui-color-gray-700);
+  line-height: 1.6;
+  margin-bottom: var(--go-ui-spacing-xl);
+}
+
+.ratingWarningButtons {
+  display: flex;
+  gap: var(--go-ui-spacing-md);
+  justify-content: center;
+  flex-wrap: wrap;
+  margin-top: var(--go-ui-spacing-xl);
+  text-align: center;
+}
+
+/* Filter status step styles */
+.filterStatusContainer {
+  margin-bottom: var(--go-ui-spacing-lg);
+  text-align: center;
+}
+
+.filterStatusMessage {
+  font-size: var(--go-ui-font-size-md);
+  font-weight: var(--go-ui-font-weight-medium);
+  color: var(--go-ui-color-gray-700);
+  margin-bottom: var(--go-ui-spacing-md);
+}
+
+.filterStatusCount {
+  font-size: var(--go-ui-font-size-lg);
+  font-weight: var(--go-ui-font-weight-semibold);
+  color: var(--go-ui-color-gray-900);
+  margin-bottom: var(--go-ui-spacing-md);
+  display: block;
+}
+
+.activeFiltersList {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--go-ui-spacing-sm);
+  justify-content: center;
+  margin-bottom: var(--go-ui-spacing-lg);
+}
+
+.activeFilter {
+  background-color: var(--go-ui-color-gray-100);
+  color: var(--go-ui-color-gray-700);
+  padding: var(--go-ui-spacing-xs) var(--go-ui-spacing-sm);
+  border-radius: var(--go-ui-border-radius-sm);
+  font-size: var(--go-ui-font-size-sm);
+  border: var(--go-ui-width-separator-thin) solid var(--go-ui-color-gray-200);
+}
+
+.filterStatusActions {
+  display: flex;
+  gap: var(--go-ui-spacing-md);
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+/* Export mode and split configuration styles */
+.exportModeSection {
+  margin-bottom: var(--go-ui-spacing-lg);
+  text-align: center;
+}
+
+.exportModeLabel {
+  font-size: var(--go-ui-font-size-sm);
+  font-weight: var(--go-ui-font-weight-medium);
+  color: var(--go-ui-color-gray-700);
+  margin-bottom: var(--go-ui-spacing-sm);
+}
+
+.splitConfigSection {
+  margin-bottom: var(--go-ui-spacing-lg);
+  text-align: center;
+}
+
+.splitConfigTitle {
+  font-size: 1rem;
+  font-weight: 600;
+  margin-bottom: var(--go-ui-spacing-md);
+  color: var(--go-ui-color-text-primary);
+}
+
+.splitInputsContainer {
+  display: flex;
+  justify-content: center;
+  gap: var(--go-ui-spacing-md);
+  margin-bottom: var(--go-ui-spacing-md);
+  flex-wrap: wrap;
+}
+
+.splitInputGroup {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+}
+
+.splitInputLabel {
+  margin-bottom: var(--go-ui-spacing-xs);
+  font-weight: 500;
+  color: var(--go-ui-color-text-primary);
+}
+
+.splitInput {
+  width: 80px;
+  padding: var(--go-ui-spacing-sm);
+  border: 1px solid var(--go-ui-color-border);
+  border-radius: var(--go-ui-border-radius);
+  font-size: 1rem;
+  text-align: center;
+}
+
+.splitInput:focus {
+  outline: none;
+  border-color: var(--go-ui-color-red-50);
+  box-shadow: 0 0 0 2px var(--go-ui-color-red-20);
+}
+
+.splitInput:hover {
+  border-color: var(--go-ui-color-gray-400);
+}
+
+.splitTotal {
+  font-size: var(--go-ui-font-size-xs);
+  color: var(--go-ui-color-gray-500);
+  text-align: center;
+  margin-top: var(--go-ui-spacing-xs);
+}
+
+.splitTotalError {
+  color: var(--go-ui-color-negative);
+  margin-left: var(--go-ui-spacing-xs);
+}
+
+.checkboxesContainer {
+  text-align: center;
+  margin-bottom: var(--go-ui-spacing-lg);
+}
+
+/* Responsive adjustments for modal */
+@media (max-width: 768px) {
+  .fullSizeModalOverlay {
+    padding: var(--go-ui-spacing-sm);
+  }
+  
+  .fullSizeModalContent {
+    max-width: 100vw;
+    max-height: 100vh;
+  }
+  
+  .splitInputsContainer {
+    gap: var(--go-ui-spacing-md);
+  }
+  
+  .splitInput {
+    width: 3.5rem;
+  }
+}

frontend/src/pages/ExplorePage/ExplorePage.tsx

@@ -1,9 +1,8 @@
-import { PageContainer, TextInput, SelectInput, MultiSelectInput, Container, SegmentInput, Spinner, Button } from '@ifrc-go/ui';
 import { useState, useEffect, useMemo } from 'react';
 import { useNavigate } from 'react-router-dom';
-import styles from './ExplorePage.module.css';
+import { PageContainer, TextInput, SelectInput, MultiSelectInput, Container, SegmentInput, Spinner, Button, Checkbox } from '@ifrc-go/ui';
 import { useFilterContext } from '../../contexts/FilterContext';
-import { useAdmin } from '../../contexts/AdminContext';
+import styles from './ExplorePage.module.css';
 
 interface ImageWithCaptionOut {
   image_id: string;
@@ -31,7 +30,6 @@ interface ImageWithCaptionOut {
 
 export default function ExplorePage() {
   const navigate = useNavigate();
-  const { isAuthenticated } = useAdmin();
   const [view, setView] = useState<'explore' | 'mapDetails'>('explore');
   const [captions, setCaptions] = useState<ImageWithCaptionOut[]>([]);
   
@@ -54,6 +52,14 @@ export default function ExplorePage() {
   const [imageTypes, setImageTypes] = useState<{image_type: string, label: string}[]>([]);
   const [isLoadingFilters, setIsLoadingFilters] = useState(true);
   const [isLoadingContent, setIsLoadingContent] = useState(true);
+  const [showExportModal, setShowExportModal] = useState(false);
+  const [exportModalStage, setExportModalStage] = useState<'filters' | 'export'>('filters');
+  const [exportMode, setExportMode] = useState<'standard' | 'fine-tuning'>('standard');
+  const [trainSplit, setTrainSplit] = useState(80);
+  const [testSplit, setTestSplit] = useState(10);
+  const [valSplit, setValSplit] = useState(10);
+  const [crisisMapsSelected, setCrisisMapsSelected] = useState(true);
+  const [droneImagesSelected, setDroneImagesSelected] = useState(true);
 
   const viewOptions = [
     { key: 'explore' as const, label: 'List' },
@@ -163,6 +169,301 @@ export default function ExplorePage() {
     });
   }, [captions, search, srcFilter, catFilter, regionFilter, countryFilter, imageTypeFilter, showReferenceExamples]);
 
+  const exportDataset = async (images: ImageWithCaptionOut[], mode: 'standard' | 'fine-tuning' = 'fine-tuning') => {
+    if (images.length === 0) {
+      alert('No images to export');
+      return;
+    }
+
+    try {
+      // Create a JSZip instance
+      const JSZip = (await import('jszip')).default;
+      const zip = new JSZip();
+      
+      // Separate images by type
+      const crisisMaps = images.filter(img => img.image_type === 'crisis_map');
+      const droneImages = images.filter(img => img.image_type === 'drone_image');
+      
+      // Create crisis_maps dataset
+      if (crisisMaps.length > 0) {
+        const crisisFolder = zip.folder('crisis_maps_dataset');
+        const crisisImagesFolder = crisisFolder?.folder('images');
+        
+        if (crisisImagesFolder) {
+          // Download crisis map images and add to zip
+          const crisisImagePromises = crisisMaps.map(async (image, index) => {
+            try {
+              const response = await fetch(image.image_url);
+              if (!response.ok) throw new Error(`Failed to fetch image ${image.image_id}`);
+              
+              const blob = await response.blob();
+              const fileExtension = image.file_key.split('.').pop() || 'jpg';
+              const fileName = `${String(index + 1).padStart(4, '0')}.${fileExtension}`;
+              
+              crisisImagesFolder.file(fileName, blob);
+              return { success: true, fileName, image };
+            } catch (error) {
+              console.error(`Failed to process image ${image.image_id}:`, error);
+              return { success: false, fileName: '', image };
+            }
+          });
+
+          const crisisImageResults = await Promise.all(crisisImagePromises);
+          const successfulCrisisImages = crisisImageResults.filter(result => result.success);
+
+          if (mode === 'fine-tuning') {
+            // Create train.jsonl, test.jsonl, and val.jsonl with stratified sampling
+            const crisisTrainData: any[] = [];
+            const crisisTestData: any[] = [];
+            const crisisValData: any[] = [];
+
+            // Group crisis images by source for stratified sampling
+            const crisisImagesBySource = new Map<string, any[]>();
+            successfulCrisisImages.forEach(result => {
+              const source = result.image.source || 'unknown';
+              if (!crisisImagesBySource.has(source)) {
+                crisisImagesBySource.set(source, []);
+              }
+              crisisImagesBySource.get(source)!.push(result);
+            });
+
+            // Distribute images from each source proportionally across splits
+            crisisImagesBySource.forEach((images, source) => {
+              const totalImages = images.length;
+              const trainCount = Math.floor(totalImages * (trainSplit / 100));
+              const testCount = Math.floor(totalImages * (testSplit / 100));
+              const valCount = totalImages - trainCount - testCount;
+
+              // Shuffle images within each source group for randomness
+              const shuffledImages = [...images].sort(() => Math.random() - 0.5);
+
+              // Add to train set
+              crisisTrainData.push(...shuffledImages.slice(0, trainCount).map(result => ({
+                image: `images/${result.fileName}`,
+                caption: result.image.edited || result.image.generated || '',
+                metadata: {
+                  image_id: result.image.image_id,
+                  title: result.image.title,
+                  source: result.image.source,
+                  event_type: result.image.event_type,
+                  image_type: result.image.image_type,
+                  countries: result.image.countries,
+                  starred: result.image.starred
+                }
+              })));
+
+              // Add to test set
+              crisisTestData.push(...shuffledImages.slice(trainCount, trainCount + testCount).map(result => ({
+                image: `images/${result.fileName}`,
+                caption: result.image.edited || result.image.generated || '',
+                metadata: {
+                  image_id: result.image.image_id,
+                  title: result.image.title,
+                  source: result.image.source,
+                  event_type: result.image.event_type,
+                  image_type: result.image.image_type,
+                  countries: result.image.countries,
+                  starred: result.image.starred
+                }
+              })));
+
+              // Add to validation set
+              crisisValData.push(...shuffledImages.slice(trainCount + testCount).map(result => ({
+                image: `images/${result.fileName}`,
+                caption: result.image.edited || result.image.generated || '',
+                metadata: {
+                  image_id: result.image.image_id,
+                  title: result.image.title,
+                  source: result.image.source,
+                  event_type: result.image.event_type,
+                  image_type: result.image.image_type,
+                  countries: result.image.countries,
+                  starred: result.image.starred
+                }
+              })));
+            });
+
+            // Add JSONL files to crisis folder
+            if (crisisFolder) {
+              crisisFolder.file('train.jsonl', JSON.stringify(crisisTrainData, null, 2));
+              crisisFolder.file('test.jsonl', JSON.stringify(crisisTestData, null, 2));
+              crisisFolder.file('val.jsonl', JSON.stringify(crisisValData, null, 2));
+            }
+          } else {
+            // Standard mode: create individual JSON files for each image
+            successfulCrisisImages.forEach((result, index) => {
+              const jsonData = {
+                image: `images/${result.fileName}`,
+                caption: result.image.edited || result.image.generated || '',
+                metadata: {
+                  image_id: result.image.image_id,
+                  title: result.image.title,
+                  source: result.image.source,
+                  event_type: result.image.event_type,
+                  image_type: result.image.image_type,
+                  countries: result.image.countries,
+                  starred: result.image.starred
+                }
+              };
+              
+              if (crisisFolder) {
+                crisisFolder.file(`${String(index + 1).padStart(4, '0')}.json`, JSON.stringify(jsonData, null, 2));
+              }
+            });
+          }
+        }
+      }
+      
+      // Create drone_images dataset
+      if (droneImages.length > 0) {
+        const droneFolder = zip.folder('drone_images_dataset');
+        const droneImagesFolder = droneFolder?.folder('images');
+        
+        if (droneImagesFolder) {
+          // Download drone images and add to zip
+          const droneImagePromises = droneImages.map(async (image, index) => {
+            try {
+              const response = await fetch(image.image_url);
+              if (!response.ok) throw new Error(`Failed to fetch image ${image.image_id}`);
+              
+              const blob = await response.blob();
+              const fileExtension = image.file_key.split('.').pop() || 'jpg';
+              const fileName = `${String(index + 1).padStart(4, '0')}.${fileExtension}`;
+              
+              droneImagesFolder.file(fileName, blob);
+              return { success: true, fileName, image };
+            } catch (error) {
+              console.error(`Failed to process image ${image.image_id}:`, error);
+              return { success: false, fileName: '', image };
+            }
+          });
+
+          const droneImageResults = await Promise.all(droneImagePromises);
+          const successfulDroneImages = droneImageResults.filter(result => result.success);
+
+          if (mode === 'fine-tuning') {
+            // Create train.jsonl, test.jsonl, and val.jsonl with stratified sampling
+            const droneTrainData: any[] = [];
+            const droneTestData: any[] = [];
+            const droneValData: any[] = [];
+
+            // Group drone images by event type for stratified sampling
+            const droneImagesByEventType = new Map<string, any[]>();
+            successfulDroneImages.forEach(result => {
+              const eventType = result.image.event_type || 'unknown';
+              if (!droneImagesByEventType.has(eventType)) {
+                droneImagesByEventType.set(eventType, []);
+              }
+              droneImagesByEventType.get(eventType)!.push(result);
+            });
+
+            // Distribute images from each event type proportionally across splits
+            droneImagesByEventType.forEach((images, eventType) => {
+              const totalImages = images.length;
+              const trainCount = Math.floor(totalImages * (trainSplit / 100));
+              const testCount = Math.floor(totalImages * (testSplit / 100));
+              const valCount = totalImages - trainCount - testCount;
+
+              // Shuffle images within each event type group for randomness
+              const shuffledImages = [...images].sort(() => Math.random() - 0.5);
+
+              // Add to train set
+              droneTrainData.push(...shuffledImages.slice(0, trainCount).map(result => ({
+                image: `images/${result.fileName}`,
+                caption: result.image.edited || result.image.generated || '',
+                metadata: {
+                  image_id: result.image.image_id,
+                  title: result.image.title,
+                  source: result.image.source,
+                  event_type: result.image.event_type,
+                  image_type: result.image.image_type,
+                  countries: result.image.countries,
+                  starred: result.image.starred
+                }
+              })));
+
+              // Add to test set
+              droneTestData.push(...shuffledImages.slice(trainCount, trainCount + testCount).map(result => ({
+                image: `images/${result.fileName}`,
+                caption: result.image.edited || result.image.generated || '',
+                metadata: {
+                  image_id: result.image.image_id,
+                  title: result.image.title,
+                  source: result.image.source,
+                  event_type: result.image.event_type,
+                  image_type: result.image.image_type,
+                  countries: result.image.countries,
+                  starred: result.image.starred
+                }
+              })));
+
+              // Add to validation set
+              droneValData.push(...shuffledImages.slice(trainCount + testCount).map(result => ({
+                image: `images/${result.fileName}`,
+                caption: result.image.edited || result.image.generated || '',
+                metadata: {
+                  image_id: result.image.image_id,
+                  title: result.image.title,
+                  source: result.image.source,
+                  event_type: result.image.event_type,
+                  image_type: result.image.image_type,
+                  countries: result.image.countries,
+                  starred: result.image.starred
+                }
+              })));
+            });
+
+            // Add JSONL files to drone folder
+            if (droneFolder) {
+              droneFolder.file('train.jsonl', JSON.stringify(droneTrainData, null, 2));
+              droneFolder.file('test.jsonl', JSON.stringify(droneTestData, null, 2));
+              droneFolder.file('val.jsonl', JSON.stringify(droneValData, null, 2));
+            }
+          } else {
+            // Standard mode: create individual JSON files for each image
+            successfulDroneImages.forEach((result, index) => {
+              const jsonData = {
+                image: `images/${result.fileName}`,
+                caption: result.image.edited || result.image.generated || '',
+                metadata: {
+                  image_id: result.image.image_id,
+                  title: result.image.title,
+                  source: result.image.source,
+                  event_type: result.image.event_type,
+                  image_type: result.image.image_type,
+                  countries: result.image.countries,
+                  starred: result.image.starred
+                }
+              };
+              
+              if (droneFolder) {
+                droneFolder.file(`${String(index + 1).padStart(4, '0')}.json`, JSON.stringify(jsonData, null, 2));
+              }
+            });
+          }
+        }
+      }
+
+      // Generate and download zip
+      const zipBlob = await zip.generateAsync({ type: 'blob' });
+      const url = URL.createObjectURL(zipBlob);
+      const link = document.createElement('a');
+      link.href = url;
+      link.download = `datasets_${mode}_${new Date().toISOString().split('T')[0]}.zip`;
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+      URL.revokeObjectURL(url);
+
+      const totalImages = (crisisMaps.length || 0) + (droneImages.length || 0);
+      console.log(`Exported ${mode} datasets with ${totalImages} total images:`);
+      if (crisisMaps.length > 0) console.log(`- Crisis maps: ${crisisMaps.length} images`);
+      if (droneImages.length > 0) console.log(`- Drone images: ${droneImages.length} images`);
+    } catch (error) {
+      console.error('Export failed:', error);
+      alert('Failed to export dataset. Please try again.');
+    }
+  };
 
   return (
     <PageContainer>
@@ -183,6 +484,23 @@ export default function ExplorePage() {
             keySelector={(o) => o.key}
             labelSelector={(o) => o.label}
           />
+          
+          {/* Export Dataset Button */}
+          <Button
+            name="export-dataset"
+            variant="secondary"
+                            onClick={() => {
+                  setShowExportModal(true);
+                  // Skip to export stage if no filters are applied
+                  if (search || srcFilter || catFilter || regionFilter || countryFilter || imageTypeFilter || showReferenceExamples) {
+                    setExportModalStage('filters');
+                  } else {
+                    setExportModalStage('export');
+                  }
+                }}
+          >
+            Export Dataset
+          </Button>
         </div>
 
         {view === 'explore' ? (
@@ -200,26 +518,24 @@ export default function ExplorePage() {
                   />
                 </Container>
 
-                {/* Reference Examples Filter - Admin Only */}
-                {isAuthenticated && (
-                  <Container withInternalPadding className="bg-white/20 backdrop-blur-sm rounded-md p-2">
-                    <Button
-                      name="reference-examples"
-                      variant={showReferenceExamples ? "primary" : "secondary"}
-                      onClick={() => setShowReferenceExamples(!showReferenceExamples)}
-                      className="whitespace-nowrap"
-                    >
-                      <span className="mr-2">
-                        {showReferenceExamples ? (
-                          <span className="text-yellow-400">★</span>
-                        ) : (
-                          <span className="text-yellow-400">☆</span>
-                        )}
-                      </span>
-                      Reference Examples
-                    </Button>
-                  </Container>
-                )}
+                {/* Reference Examples Filter - Available to all users */}
+                <Container withInternalPadding className="bg-white/20 backdrop-blur-sm rounded-md p-2">
+                  <Button
+                    name="reference-examples"
+                    variant={showReferenceExamples ? "primary" : "secondary"}
+                    onClick={() => setShowReferenceExamples(!showReferenceExamples)}
+                    className="whitespace-nowrap"
+                  >
+                    <span className="mr-2">
+                      {showReferenceExamples ? (
+                        <span className="text-yellow-400">★</span>
+                      ) : (
+                        <span className="text-yellow-400">☆</span>
+                      )}
+                    </span>
+                    Reference Examples
+                  </Button>
+                </Container>
 
                 <Container withInternalPadding className="bg-white/20 backdrop-blur-sm rounded-md p-2">
                   <Button
@@ -347,7 +663,7 @@ export default function ExplorePage() {
                         <h3 className={styles.mapItemTitle}>
                           <div className="flex items-center gap-2">
                             <span>{c.title || 'Untitled'}</span>
-                            {isAuthenticated && c.starred && (
+                            {c.starred && (
                               <span className="text-red-500 text-lg" title="Starred image">★</span>
                             )}
                           </div>
@@ -399,6 +715,244 @@ export default function ExplorePage() {
           </div>
         )}
       </div>
+
+      {/* Export Selection Modal */}
+      {showExportModal && (
+        <div className={styles.fullSizeModalOverlay} onClick={() => setShowExportModal(false)}>
+          <div className={styles.fullSizeModalContent} onClick={(e) => e.stopPropagation()}>
+            <div className={styles.ratingWarningContent}>
+              {exportModalStage === 'filters' ? (
+                <>
+                  <h3 className={styles.ratingWarningTitle}>Export Dataset</h3>
+                  
+                  {/* Filter Status Message */}
+                  <div className={styles.filterStatusContainer}>
+                    {(search || srcFilter || catFilter || regionFilter || countryFilter || imageTypeFilter || showReferenceExamples) ? (
+                      <>
+                        <div className={styles.filterStatusMessage}>
+                          Filters are being applied
+                        </div>
+                        <div className={styles.filterStatusCount}>
+                          {filtered.length} of {captions.length} examples
+                        </div>
+                        <div className={styles.activeFiltersList}>
+                          {search && <span className={styles.activeFilter}>Search: "{search}"</span>}
+                          {srcFilter && <span className={styles.activeFilter}>Source: {sources.find(s => s.s_code === srcFilter)?.label || srcFilter}</span>}
+                          {catFilter && <span className={styles.activeFilter}>Category: {types.find(t => t.t_code === catFilter)?.label || catFilter}</span>}
+                          {regionFilter && <span className={styles.activeFilter}>Region: {regions.find(r => r.r_code === regionFilter)?.label || regionFilter}</span>}
+                          {countryFilter && <span className={styles.activeFilter}>Country: {countries.find(c => c.c_code === countryFilter)?.label || countryFilter}</span>}
+                          {imageTypeFilter && <span className={styles.activeFilter}>Type: {imageTypes.find(it => it.image_type === imageTypeFilter)?.label || imageTypeFilter}</span>}
+                          {showReferenceExamples && <span className={styles.activeFilter}>Reference Examples Only</span>}
+                        </div>
+                        <div className={styles.filterStatusActions}>
+                          <Button
+                            name="clear-filters-modal"
+                            variant="secondary"
+                            size={1}
+                            onClick={clearAllFilters}
+                          >
+                            Clear Filters
+                          </Button>
+                          <Button
+                            name="continue-with-filters"
+                            variant="primary"
+                            size={1}
+                            onClick={() => setExportModalStage('export')}
+                          >
+                            Continue
+                          </Button>
+                        </div>
+                      </>
+                    ) : (
+                      <>
+                        <div className={styles.filterStatusCount}>
+                          {captions.length} examples available
+                        </div>
+                        <Button
+                          name="continue-no-filters"
+                          variant="primary"
+                          size={1}
+                          onClick={() => setExportModalStage('export')}
+                        >
+                          Continue
+                        </Button>
+                      </>
+                    )}
+                  </div>
+                  
+                  <div className={styles.ratingWarningButtons}>
+                    <Button
+                      name="cancel-export"
+                      variant="tertiary"
+                      onClick={() => {
+                        setShowExportModal(false);
+                        setExportModalStage('filters');
+                      }}
+                    >
+                      Cancel
+                    </Button>
+                  </div>
+                </>
+              ) : (
+                <>
+                                    <h3 className={styles.ratingWarningTitle}>Export Dataset</h3>
+                  
+                  {/* Export Mode Switch */}
+                  <div className={styles.exportModeSection}>
+                <SegmentInput
+                  name="export-mode"
+                  value={exportMode}
+                  onChange={(value) => {
+                    if (value === 'standard' || value === 'fine-tuning') {
+                      setExportMode(value);
+                    }
+                  }}
+                  options={[
+                    { key: 'standard' as const, label: 'Standard' },
+                    { key: 'fine-tuning' as const, label: 'Fine-tuning' }
+                  ]}
+                  keySelector={(o) => o.key}
+                  labelSelector={(o) => o.label}
+                />
+              </div>
+              
+              {/* Train/Test/Val Split Configuration - Only show for Fine-tuning mode */}
+              {exportMode === 'fine-tuning' && (
+                <div className={styles.splitConfigSection}>
+                  <div className={styles.splitConfigTitle}>Dataset Split Configuration</div>
+                  <div className={styles.splitInputsContainer}>
+                    <div className={styles.splitInputGroup}>
+                      <label htmlFor="train-split" className={styles.splitInputLabel}>Train (%)</label>
+                      <input
+                        id="train-split"
+                        type="number"
+                        min="0"
+                        max="100"
+                        value={trainSplit}
+                        onChange={(e) => {
+                          const newTrain = parseInt(e.target.value) || 0;
+                          const remaining = 100 - newTrain;
+                          if (remaining >= 0) {
+                            setTrainSplit(newTrain);
+                            // Distribute remaining between test and val
+                            if (testSplit + valSplit > remaining) {
+                              setTestSplit(Math.floor(remaining / 2));
+                              setValSplit(remaining - Math.floor(remaining / 2));
+                            }
+                          }
+                        }}
+                        className={styles.splitInput}
+                      />
+                    </div>
+                    
+                    <div className={styles.splitInputGroup}>
+                      <label htmlFor="test-split" className={styles.splitInputLabel}>Test (%)</label>
+                      <input
+                        id="test-split"
+                        type="number"
+                        min="0"
+                        max="100"
+                        value={testSplit}
+                        onChange={(e) => {
+                          const newTest = parseInt(e.target.value) || 0;
+                          const remaining = 100 - trainSplit - newTest;
+                          if (remaining >= 0) {
+                            setTestSplit(newTest);
+                            setValSplit(remaining);
+                          }
+                        }}
+                        className={styles.splitInput}
+                      />
+                    </div>
+                    
+                    <div className={styles.splitInputGroup}>
+                      <label htmlFor="val-split" className={styles.splitInputLabel}>Val (%)</label>
+                      <input
+                        id="val-split"
+                        type="number"
+                        min="0"
+                        max="100"
+                        value={valSplit}
+                        onChange={(e) => {
+                          const newVal = parseInt(e.target.value) || 0;
+                          const remaining = 100 - trainSplit - newVal;
+                          if (remaining >= 0) {
+                            setValSplit(newVal);
+                            setTestSplit(remaining);
+                          }
+                        }}
+                        className={styles.splitInput}
+                      />
+                    </div>
+                  </div>
+                  
+                  {trainSplit + testSplit + valSplit !== 100 && (
+                    <div className={styles.splitTotal}>
+                      <span className={styles.splitTotalError}>Must equal 100%</span>
+                    </div>
+                  )}
+                </div>
+              )}
+              
+              <div className={styles.checkboxesContainer}>
+                <div className="flex items-center gap-3">
+                  <Checkbox
+                    name="crisis-maps"
+                    label={`Crisis Maps (${filtered.filter(img => img.image_type === 'crisis_map').length} images)`}
+                    value={crisisMapsSelected}
+                    onChange={(value, name) => setCrisisMapsSelected(value)}
+                    disabled={isLoadingFilters}
+                  />
+                </div>
+                
+                <div className="flex items-center gap-3">
+                  <Checkbox
+                    name="drone-images"
+                    label={`Drone Images (${filtered.filter(img => img.image_type === 'drone_image').length} images)`}
+                    value={droneImagesSelected}
+                    onChange={(value, name) => setDroneImagesSelected(value)}
+                    disabled={isLoadingFilters}
+                  />
+                </div>
+              </div>
+              
+                                <div className={styles.ratingWarningButtons}>
+                    {(search || srcFilter || catFilter || regionFilter || countryFilter || imageTypeFilter || showReferenceExamples) && (
+                      <Button
+                        name="back-to-filters"
+                        variant="secondary"
+                        onClick={() => setExportModalStage('filters')}
+                      >
+                        Back to Filters
+                      </Button>
+                    )}
+                <Button
+                  name="confirm-export"
+                  onClick={() => {
+                    if (!crisisMapsSelected && !droneImagesSelected) {
+                      alert('Please select at least one image type to export.');
+                      return;
+                    }
+                    
+                    const selectedTypes: string[] = [];
+                    if (crisisMapsSelected) selectedTypes.push('crisis_map');
+                    if (droneImagesSelected) selectedTypes.push('drone_image');
+                    
+                    const filteredByType = filtered.filter(img => selectedTypes.includes(img.image_type));
+                    exportDataset(filteredByType, exportMode);
+                    setShowExportModal(false);
+                    setExportModalStage('filters');
+                  }}
+                >
+                  Export Selected
+                </Button>
+              </div>
+                </>
+              )}
+            </div>
+          </div>
+        </div>
+      )}
     </PageContainer>
   );
 }

frontend/src/pages/HelpPage.tsx

@@ -1,10 +1,28 @@
-import { PageContainer, Heading, Container } from '@ifrc-go/ui';
+import { PageContainer, Heading, Container, Button } from '@ifrc-go/ui';
+import { useNavigate } from 'react-router-dom';
+import { useFilterContext } from '../contexts/FilterContext';
 
 export default function HelpPage() {
+  const navigate = useNavigate();
+  const { setShowReferenceExamples } = useFilterContext();
+
+  const handleUploadNow = () => {
+    navigate('/upload');
+  };
+
+  const handleSeeExamples = () => {
+    setShowReferenceExamples(true);
+    navigate('/explore');
+  };
+
+  const handleViewVlmDetails = () => {
+    navigate('/analytics?view=crisis_maps');
+  };
+
   return (
     <PageContainer className="py-10">
       <Container withInternalPadding className="max-w-4xl mx-auto">
-        <Heading level={2} className="text-center mb-12 text-gray-900">Help &amp; Support</Heading>
+
         
         <div className="space-y-8">
           <Container withInternalPadding className="p-8">
@@ -16,6 +34,15 @@ export default function HelpPage() {
               cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in 
               culpa qui officia deserunt mollit anim id est laborum.
             </p>
+            <div className="mt-6">
+              <Button
+                name="upload-now"
+                variant="primary"
+                onClick={handleUploadNow}
+              >
+                Upload now →
+              </Button>
+            </div>
           </Container>
 
           <Container withInternalPadding className="p-8">
@@ -26,6 +53,15 @@ export default function HelpPage() {
               dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, 
               sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
             </p>
+            <div className="mt-6">
+              <Button
+                name="see-examples"
+                variant="primary"
+                onClick={handleSeeExamples}
+              >
+                See examples →
+              </Button>
+            </div>
           </Container>
 
           <Container withInternalPadding className="p-8">
@@ -36,6 +72,15 @@ export default function HelpPage() {
               provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum 
               fuga. Et harum quidem rerum facilis est et expedita distinctio.
             </p>
+            <div className="mt-6">
+              <Button
+                name="view-vlm-details"
+                variant="primary"
+                onClick={handleViewVlmDetails}
+              >
+                View VLM details →
+              </Button>
+            </div>
           </Container>
         </div>
       </Container>

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

@@ -1,7 +1,8 @@
 .tabSelector {
   margin-bottom: var(--go-ui-spacing-lg);
   display: flex;
-  justify-content: center;
+  justify-content: space-between;
+  align-items: center;
 }
 
 .backButton {
@@ -239,6 +240,8 @@
   gap: var(--go-ui-spacing-md);
   justify-content: center;
   flex-wrap: wrap;
+  margin-top: var(--go-ui-spacing-xl);
+  text-align: center;
 }
 
 /* Responsive adjustments for modal */
@@ -252,3 +255,96 @@
     max-height: 100vh;
   }
 }
+
+/* Export mode and split configuration styles */
+.exportModeSection {
+  margin-bottom: var(--go-ui-spacing-lg);
+  text-align: center;
+}
+
+.exportModeLabel {
+  font-size: var(--go-ui-font-size-sm);
+  font-weight: var(--go-ui-font-weight-medium);
+  color: var(--go-ui-color-gray-700);
+  margin-bottom: var(--go-ui-spacing-sm);
+}
+
+.splitConfigSection {
+  margin-bottom: var(--go-ui-spacing-lg);
+  text-align: center;
+}
+
+.splitConfigTitle {
+  font-size: 1rem;
+  font-weight: 600;
+  margin-bottom: var(--go-ui-spacing-md);
+  color: var(--go-ui-color-text-primary);
+}
+
+.splitInputsContainer {
+  display: flex;
+  justify-content: center;
+  gap: var(--go-ui-spacing-md);
+  margin-bottom: var(--go-ui-spacing-md);
+  flex-wrap: wrap;
+}
+
+.splitInputGroup {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+}
+
+.splitInputLabel {
+  margin-bottom: var(--go-ui-spacing-xs);
+  font-weight: 500;
+  color: var(--go-ui-color-text-primary);
+}
+
+.splitInput {
+  width: 80px;
+  padding: var(--go-ui-spacing-sm);
+  border: 1px solid var(--go-ui-color-border);
+  border-radius: var(--go-ui-border-radius);
+  font-size: 1rem;
+  text-align: center;
+}
+
+.splitInput:focus {
+  outline: none;
+  border-color: var(--go-ui-color-red-50);
+  box-shadow: 0 0 0 2px var(--go-ui-color-red-20);
+}
+
+.splitInput:hover {
+  border-color: var(--go-ui-color-gray-400);
+}
+
+.splitTotal {
+  font-size: var(--go-ui-font-size-xs);
+  color: var(--go-ui-color-gray-500);
+  text-align: center;
+  margin-top: var(--go-ui-spacing-xs);
+}
+
+.splitTotalError {
+  color: var(--go-ui-color-negative);
+  margin-left: var(--go-ui-spacing-xs);
+}
+
+/* Responsive adjustments for split inputs */
+@media (max-width: 768px) {
+  .splitInputsContainer {
+    gap: var(--go-ui-spacing-md);
+  }
+  
+  .splitInput {
+    width: 3.5rem;
+  }
+}
+
+.checkboxesContainer {
+  text-align: center;
+  margin-bottom: var(--go-ui-spacing-lg);
+}

frontend/src/pages/MapDetailsPage/MapDetailPage.tsx

@@ -1,4 +1,4 @@
-import { PageContainer, Container, Button, Spinner, SegmentInput, TextInput, SelectInput, MultiSelectInput } from '@ifrc-go/ui';
+import { PageContainer, Container, Button, Spinner, SegmentInput, TextInput, SelectInput, MultiSelectInput, Checkbox } from '@ifrc-go/ui';
 import { useParams, useNavigate } from 'react-router-dom';
 import { useState, useEffect, useMemo, useCallback } from 'react';
 import { ChevronLeftLineIcon, ChevronRightLineIcon, DeleteBinLineIcon } from '@ifrc-go/icons';
@@ -55,6 +55,13 @@ export default function MapDetailPage() {
   
   // Add delete confirmation state
   const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
+  const [showExportModal, setShowExportModal] = useState(false);
+  const [exportMode, setExportMode] = useState<'standard' | 'fine-tuning'>('standard');
+  const [trainSplit, setTrainSplit] = useState(80);
+  const [testSplit, setTestSplit] = useState(10);
+  const [valSplit, setValSplit] = useState(10);
+  const [crisisMapsSelected, setCrisisMapsSelected] = useState(true);
+  const [droneImagesSelected, setDroneImagesSelected] = useState(true);
   
   // Add flag to prevent auto-navigation during delete operations
   const [isDeleting, setIsDeleting] = useState(false);
@@ -474,6 +481,301 @@ export default function MapDetailPage() {
     }
   };
  
+  // Helper function to create image data
+  const createImageData = (map: any, fileName: string) => ({
+    image: `images/${fileName}`,
+    caption: map.edited || map.generated || '',
+    metadata: {
+      image_id: map.image_id,
+      title: map.title,
+      source: map.source,
+      event_type: map.event_type,
+      image_type: map.image_type,
+      countries: map.countries,
+      starred: map.starred
+    }
+  });
+
+  const exportDataset = async (mode: 'standard' | 'fine-tuning') => {
+    if (!map) {
+      alert('No map to export');
+      return;
+    }
+
+    try {
+      // Create a JSZip instance
+      const JSZip = (await import('jszip')).default;
+      const zip = new JSZip();
+      
+      // Determine which dataset to create based on image type
+      if (map.image_type === 'crisis_map') {
+        const crisisFolder = zip.folder('crisis_maps_dataset');
+        const crisisImagesFolder = crisisFolder?.folder('images');
+        
+        if (crisisImagesFolder) {
+          // Download the current crisis map image and add to zip
+          try {
+            const response = await fetch(map.image_url);
+            if (!response.ok) throw new Error(`Failed to fetch image ${map.image_id}`);
+            
+            const blob = await response.blob();
+            const fileExtension = map.file_key.split('.').pop() || 'jpg';
+            const fileName = `0001.${fileExtension}`;
+            
+            crisisImagesFolder.file(fileName, blob);
+            
+            if (mode === 'fine-tuning') {
+              // Create train.jsonl, test.jsonl, and val.jsonl with stratified sampling
+              const trainData: any[] = [];
+              const testData: any[] = [];
+              const valData: any[] = [];
+
+              if (String(map?.image_type) === 'crisis_map') {
+                // For crisis maps, group by source
+                const source = map.source || 'unknown';
+                const totalImages = 1; // Only one image in MapDetailPage
+                
+                // Since we only have one image, distribute it based on the split
+                const random = Math.random();
+                if (random < trainSplit / 100) {
+                  trainData.push(createImageData(map, '0001'));
+                } else if (random < (trainSplit + testSplit) / 100) {
+                  testData.push(createImageData(map, '0001'));
+                } else {
+                  valData.push(createImageData(map, '0001'));
+                }
+              } else if (String(map?.image_type) === 'drone_image') {
+                // For drone images, group by event type
+                const eventType = map.event_type || 'unknown';
+                const totalImages = 1; // Only one image in MapDetailPage
+                
+                // Since we only have one image, distribute it based on the split
+                const random = Math.random();
+                if (random < trainSplit / 100) {
+                  trainData.push(createImageData(map, '0001'));
+                } else if (random < (trainSplit + testSplit) / 100) {
+                  testData.push(createImageData(map, '0001'));
+                } else {
+                  valData.push(createImageData(map, '0001'));
+                }
+              }
+
+              // Add JSONL files to dataset folder
+              if (crisisFolder) {
+                crisisFolder.file('train.jsonl', JSON.stringify(trainData, null, 2));
+                crisisFolder.file('test.jsonl', JSON.stringify(testData, null, 2));
+                crisisFolder.file('val.jsonl', JSON.stringify(valData, null, 2));
+              }
+            } else {
+              // Standard mode: create individual JSON file
+              const jsonData = {
+                image: `images/${fileName}`,
+                caption: map.edited || map.generated || '',
+                metadata: {
+                  image_id: map.image_id,
+                  title: map.title,
+                  source: map.source,
+                  event_type: map.event_type,
+                  image_type: map.image_type,
+                  countries: map.countries,
+                  starred: map.starred
+                }
+              };
+              
+              if (crisisFolder) {
+                crisisFolder.file('0001.json', JSON.stringify(jsonData, null, 2));
+              }
+            }
+          } catch (error) {
+            console.error(`Failed to process image ${map.image_id}:`, error);
+            throw error;
+          }
+        }
+      } else if (map.image_type === 'drone_image') {
+        const droneFolder = zip.folder('drone_images_dataset');
+        const droneImagesFolder = droneFolder?.folder('images');
+        
+        if (droneImagesFolder) {
+          // Download the current drone image and add to zip
+          try {
+            const response = await fetch(map.image_url);
+            if (!response.ok) throw new Error(`Failed to fetch image ${map.image_id}`);
+            
+            const blob = await response.blob();
+            const fileExtension = map.file_key.split('.').pop() || 'jpg';
+            const fileName = `0001.${fileExtension}`;
+            
+            droneImagesFolder.file(fileName, blob);
+            
+            if (mode === 'fine-tuning') {
+              // Create train.jsonl, test.jsonl, and val.jsonl with stratified sampling
+              const trainData: any[] = [];
+              const testData: any[] = [];
+              const valData: any[] = [];
+
+              if (String(map?.image_type) === 'crisis_map') {
+                // For crisis maps, group by source
+                const source = map.source || 'unknown';
+                const totalImages = 1; // Only one image in MapDetailPage
+                
+                // Since we only have one image, distribute it based on the split
+                const random = Math.random();
+                if (random < trainSplit / 100) {
+                  trainData.push(createImageData(map, '0001'));
+                } else if (random < (trainSplit + testSplit) / 100) {
+                  testData.push(createImageData(map, '0001'));
+                } else {
+                  valData.push(createImageData(map, '0001'));
+                }
+              } else if (String(map?.image_type) === 'drone_image') {
+                // For drone images, group by event type
+                const eventType = map.event_type || 'unknown';
+                const totalImages = 1; // Only one image in MapDetailPage
+                
+                // Since we only have one image, distribute it based on the split
+                const random = Math.random();
+                if (random < trainSplit / 100) {
+                  trainData.push(createImageData(map, '0001'));
+                } else if (random < (trainSplit + testSplit) / 100) {
+                  testData.push(createImageData(map, '0001'));
+                } else {
+                  valData.push(createImageData(map, '0001'));
+                }
+              }
+
+              // Add JSONL files to dataset folder
+              if (droneFolder) {
+                droneFolder.file('train.jsonl', JSON.stringify(trainData, null, 2));
+                droneFolder.file('test.jsonl', JSON.stringify(testData, null, 2));
+                droneFolder.file('val.jsonl', JSON.stringify(valData, null, 2));
+              }
+            } else {
+              // Standard mode: create individual JSON file
+              const jsonData = {
+                image: `images/${fileName}`,
+                caption: map.edited || map.generated || '',
+                metadata: {
+                  image_id: map.image_id,
+                  title: map.title,
+                  source: map.source,
+                  event_type: map.event_type,
+                  image_type: map.image_type,
+                  countries: map.countries,
+                  starred: map.starred
+                }
+              };
+              
+              if (droneFolder) {
+                droneFolder.file('0001.json', JSON.stringify(jsonData, null, 2));
+              }
+            }
+          } catch (error) {
+            console.error(`Failed to process image ${map.image_id}:`, error);
+            throw error;
+          }
+        }
+      } else {
+        // For other image types, create a generic dataset
+        const genericFolder = zip.folder('generic_dataset');
+        const genericImagesFolder = genericFolder?.folder('images');
+        
+        if (genericImagesFolder) {
+          try {
+            const response = await fetch(map.image_url);
+            if (!response.ok) throw new Error(`Failed to fetch image ${map.image_id}`);
+            
+            const blob = await response.blob();
+            const fileExtension = map.file_key.split('.').pop() || 'jpg';
+            const fileName = `0001.${fileExtension}`;
+            
+            genericImagesFolder.file(fileName, blob);
+            
+            if (mode === 'fine-tuning') {
+              // Create train.jsonl, test.jsonl, and val.jsonl with stratified sampling
+              const trainData: any[] = [];
+              const testData: any[] = [];
+              const valData: any[] = [];
+
+              if (String(map?.image_type) === 'crisis_map') {
+                // For crisis maps, group by source
+                const source = map.source || 'unknown';
+                const totalImages = 1; // Only one image in MapDetailPage
+                
+                // Since we only have one image, distribute it based on the split
+                const random = Math.random();
+                if (random < trainSplit / 100) {
+                  trainData.push(createImageData(map, '0001'));
+                } else if (random < (trainSplit + testSplit) / 100) {
+                  testData.push(createImageData(map, '0001'));
+                } else {
+                  valData.push(createImageData(map, '0001'));
+                }
+              } else if (String(map?.image_type) === 'drone_image') {
+                // For drone images, group by event type
+                const eventType = map.event_type || 'unknown';
+                const totalImages = 1; // Only one image in MapDetailPage
+                
+                // Since we only have one image, distribute it based on the split
+                const random = Math.random();
+                if (random < trainSplit / 100) {
+                  trainData.push(createImageData(map, '0001'));
+                } else if (random < (trainSplit + testSplit) / 100) {
+                  testData.push(createImageData(map, '0001'));
+                } else {
+                  valData.push(createImageData(map, '0001'));
+                }
+              }
+
+              // Add JSONL files to dataset folder
+              if (genericFolder) {
+                genericFolder.file('train.jsonl', JSON.stringify(trainData, null, 2));
+                genericFolder.file('test.jsonl', JSON.stringify(testData, null, 2));
+                genericFolder.file('val.jsonl', JSON.stringify(valData, null, 2));
+              }
+            } else {
+              // Standard mode: create individual JSON file
+              const jsonData = {
+                image: `images/${fileName}`,
+                caption: map.edited || map.generated || '',
+                metadata: {
+                  image_id: map.image_id,
+                  title: map.title,
+                  source: map.source,
+                  event_type: map.event_type,
+                  image_type: map.image_type,
+                  countries: map.countries,
+                  starred: map.starred
+                }
+              };
+              
+              if (genericFolder) {
+                genericFolder.file('0001.json', JSON.stringify(jsonData, null, 2));
+              }
+            }
+          } catch (error) {
+            console.error(`Failed to process image ${map.image_id}:`, error);
+            throw error;
+          }
+        }
+      }
+
+      // Generate and download zip
+      const zipBlob = await zip.generateAsync({ type: 'blob' });
+      const url = URL.createObjectURL(zipBlob);
+      const link = document.createElement('a');
+      link.href = url;
+      link.download = `dataset_${map.image_type}_${map.image_id}_${mode}_${new Date().toISOString().split('T')[0]}.zip`;
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+      URL.revokeObjectURL(url);
+
+      console.log(`Exported ${map.image_type} dataset with 1 image in ${mode} mode`);
+    } catch (error) {
+      console.error('Export failed:', error);
+      alert('Failed to export dataset. Please try again.');
+    }
+  };
 
   if (loading) {
     return (
@@ -528,6 +830,15 @@ export default function MapDetailPage() {
             keySelector={(o) => o.key}
             labelSelector={(o) => o.label}
           />
+          
+          {/* Export Dataset Button */}
+          <Button
+            name="export-dataset"
+            variant="secondary"
+            onClick={() => setShowExportModal(true)}
+          >
+            Export Dataset
+          </Button>
         </div>
 
         {/* Search and Filters */}
@@ -543,26 +854,24 @@ export default function MapDetailPage() {
               />
             </Container>
 
-            {/* Reference Examples Filter - Admin Only */}
-            {isAuthenticated && (
-              <Container withInternalPadding className="bg-white/20 backdrop-blur-sm rounded-md p-2">
-                <Button
-                  name="reference-examples"
-                  variant={showReferenceExamples ? "primary" : "secondary"}
-                  onClick={() => setShowReferenceExamples(!showReferenceExamples)}
-                  className="whitespace-nowrap"
-                >
-                  <span className="mr-2">
-                    {showReferenceExamples ? (
-                      <span className="text-yellow-400">★</span>
-                    ) : (
-                      <span className="text-yellow-400">☆</span>
-                    )}
-                  </span>
-                  Reference Examples
-                </Button>
-              </Container>
-            )}
+            {/* Reference Examples Filter - Available to all users */}
+            <Container withInternalPadding className="bg-white/20 backdrop-blur-sm rounded-md p-2">
+              <Button
+                name="reference-examples"
+                variant={showReferenceExamples ? "primary" : "secondary"}
+                onClick={() => setShowReferenceExamples(!showReferenceExamples)}
+                className="whitespace-nowrap"
+              >
+                <span className="mr-2">
+                  {showReferenceExamples ? (
+                    <span className="text-yellow-400">★</span>
+                  ) : (
+                    <span className="text-yellow-400">☆</span>
+                  )}
+                </span>
+                Reference Examples
+              </Button>
+            </Container>
 
             <Container withInternalPadding className="bg-white/20 backdrop-blur-sm rounded-md p-2">
               <Button
@@ -653,7 +962,7 @@ export default function MapDetailPage() {
                     heading={
                       <div className="flex items-center gap-2">
                         <span>{filteredMap.title || "Map Image"}</span>
-                        {isAuthenticated && filteredMap.starred && (
+                        {filteredMap.starred && (
                           <span className="text-red-500 text-xl" title="Starred image">★</span>
                         )}
                       </div>
@@ -887,6 +1196,166 @@ export default function MapDetailPage() {
           </div>
         </div>
       )}
+
+      {/* Export Selection Modal */}
+      {showExportModal && (
+        <div className={styles.fullSizeModalOverlay} onClick={() => setShowExportModal(false)}>
+          <div className={styles.fullSizeModalContent} onClick={(e) => e.stopPropagation()}>
+            <div className={styles.ratingWarningContent}>
+              <h3 className={styles.ratingWarningTitle}>Export Dataset</h3>
+              
+              {/* Export Mode Switch */}
+              <div className={styles.exportModeSection}>
+                <SegmentInput
+                  name="export-mode"
+                  value={exportMode}
+                  onChange={(value) => {
+                    if (value === 'standard' || value === 'fine-tuning') {
+                      setExportMode(value);
+                    }
+                  }}
+                  options={[
+                    { key: 'standard' as const, label: 'Standard' },
+                    { key: 'fine-tuning' as const, label: 'Fine-tuning' }
+                  ]}
+                  keySelector={(o) => o.key}
+                  labelSelector={(o) => o.label}
+                />
+              </div>
+              
+              {/* Train/Test/Val Split Configuration - Only show for Fine-tuning mode */}
+              {exportMode === 'fine-tuning' && (
+                <div className={styles.splitConfigSection}>
+                  <div className={styles.splitConfigTitle}>Dataset Split Configuration</div>
+                  <div className={styles.splitInputsContainer}>
+                    <div className={styles.splitInputGroup}>
+                      <label htmlFor="train-split" className={styles.splitInputLabel}>Train (%)</label>
+                      <input
+                        id="train-split"
+                        type="number"
+                        min="0"
+                        max="100"
+                        value={trainSplit}
+                        onChange={(e) => {
+                          const newTrain = parseInt(e.target.value) || 0;
+                          const remaining = 100 - newTrain;
+                          if (remaining >= 0) {
+                            setTrainSplit(newTrain);
+                            // Distribute remaining between test and val
+                            if (testSplit + valSplit > remaining) {
+                              setTestSplit(Math.floor(remaining / 2));
+                              setValSplit(remaining - Math.floor(remaining / 2));
+                            }
+                          }
+                        }}
+                        className={styles.splitInput}
+                      />
+                    </div>
+                    
+                    <div className={styles.splitInputGroup}>
+                      <label htmlFor="test-split" className={styles.splitInputLabel}>Test (%)</label>
+                      <input
+                        id="test-split"
+                        type="number"
+                        min="0"
+                        max="100"
+                        value={testSplit}
+                        onChange={(e) => {
+                          const newTest = parseInt(e.target.value) || 0;
+                          const remaining = 100 - trainSplit - newTest;
+                          if (remaining >= 0) {
+                            setTestSplit(newTest);
+                            setValSplit(remaining);
+                          }
+                        }}
+                        className={styles.splitInput}
+                      />
+                    </div>
+                    
+                    <div className={styles.splitInputGroup}>
+                      <label htmlFor="val-split" className={styles.splitInputLabel}>Val (%)</label>
+                      <input
+                        id="val-split"
+                        type="number"
+                        min="0"
+                        max="100"
+                        value={valSplit}
+                        onChange={(e) => {
+                          const newVal = parseInt(e.target.value) || 0;
+                          const remaining = 100 - trainSplit - newVal;
+                          if (remaining >= 0) {
+                            setValSplit(newVal);
+                            setTestSplit(remaining);
+                          }
+                        }}
+                        className={styles.splitInput}
+                      />
+                    </div>
+                  </div>
+                  
+                  {trainSplit + testSplit + valSplit !== 100 && (
+                    <div className={styles.splitTotal}>
+                      <span className={styles.splitTotalError}>Must equal 100%</span>
+                    </div>
+                  )}
+                </div>
+              )}
+              
+              <div className={styles.checkboxesContainer}>
+                <div className="flex items-center gap-3">
+                  <Checkbox
+                    name="crisis-maps"
+                    label="Crisis Maps"
+                    value={crisisMapsSelected}
+                    onChange={(value, name) => setCrisisMapsSelected(value)}
+                  />
+                </div>
+                
+                <div className="flex items-center gap-3">
+                  <Checkbox
+                    name="drone-images"
+                    label="Drone Images"
+                    value={droneImagesSelected}
+                    onChange={(value, name) => setDroneImagesSelected(value)}
+                  />
+                </div>
+              </div>
+              
+              <div className={styles.ratingWarningButtons}>
+                <Button
+                  name="confirm-export"
+                  onClick={() => {
+                    if (!crisisMapsSelected && !droneImagesSelected) {
+                      alert('Please select at least one image type to export.');
+                      return;
+                    }
+                    
+                    // For MapDetailPage, we only export the current image if its type is selected
+                    if ((map?.image_type === 'crisis_map' && crisisMapsSelected) || 
+                        (map?.image_type === 'drone_image' && droneImagesSelected)) {
+                      exportDataset(exportMode);
+                    } else {
+                      alert('The current image type is not selected for export.');
+                      return;
+                    }
+                    
+                    setShowExportModal(false);
+                  }}
+                >
+                  Export Selected
+                </Button>
+                <Button
+                  name="cancel-export"
+                  variant="tertiary"
+                  onClick={() => setShowExportModal(false)}
+                >
+                  Cancel
+                </Button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
     </PageContainer>
   );
 } 

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

@@ -579,7 +579,21 @@
   display: flex;
   gap: var(--go-ui-spacing-md);
   justify-content: center;
-  flex-wrap: wrap;
+  margin-top: var(--go-ui-spacing-lg);
+}
+
+.preprocessingProgress {
+  margin-top: var(--go-ui-spacing-lg);
+  text-align: center;
+  padding: var(--go-ui-spacing-lg);
+  background-color: var(--go-ui-color-background-light);
+  border-radius: var(--go-ui-border-radius-md);
+}
+
+.preprocessingProgress p {
+  margin-bottom: var(--go-ui-spacing-md);
+  color: var(--go-ui-color-text);
+  font-weight: var(--go-ui-font-weight-medium);
 }
 
 

frontend/src/pages/UploadPage/UploadPage.tsx

@@ -295,6 +295,12 @@ export default function UploadPage() {
     setDraft('');
     setShowFallbackNotification(false);
     setFallbackInfo(null);
+    setShowPreprocessingNotification(false);
+    setPreprocessingInfo(null);
+    setShowPreprocessingModal(false);
+    setPreprocessingFile(null);
+    setIsPreprocessing(false);
+    setPreprocessingProgress('');
   }; 
   const [scores, setScores] = useState({  
     accuracy: 50,
@@ -315,15 +321,152 @@ export default function UploadPage() {
     reason: string;
   } | null>(null);
 
+  const [showPreprocessingNotification, setShowPreprocessingNotification] = useState(false);
+  const [preprocessingInfo, setPreprocessingInfo] = useState<{
+    original_filename: string;
+    processed_filename: string;
+    original_mime_type: string;
+    processed_mime_type: string;
+    was_preprocessed: boolean;
+    error?: string;
+  } | null>(null);
+
+  // Enhanced preprocessing flow state
+  const [showPreprocessingModal, setShowPreprocessingModal] = useState(false);
+  const [preprocessingFile, setPreprocessingFile] = useState<File | null>(null);
+  const [isPreprocessing, setIsPreprocessing] = useState(false);
+  const [preprocessingProgress, setPreprocessingProgress] = useState<string>('');
+
 
   const onDrop = (e: DragEvent<HTMLDivElement>) => {
     e.preventDefault();
     const dropped = e.dataTransfer.files?.[0];
-    if (dropped) setFile(dropped);
+    if (dropped) {
+      // Use onFileChange to trigger preprocessing detection
+      onFileChange(dropped);
+    }
   };
 
   const onFileChange = (file: File | undefined) => {
-    if (file) setFile(file);
+    if (file) {
+      console.log('File selected:', file.name, 'Type:', file.type, 'Size:', file.size);
+      
+      // Check if file needs preprocessing
+      if (needsPreprocessing(file)) {
+        console.log('File needs preprocessing, showing modal');
+        setPreprocessingFile(file);
+        setShowPreprocessingModal(true);
+      } else {
+        console.log('File does not need preprocessing, setting directly');
+        setFile(file);
+      }
+    }
+  };
+
+  // Check if file needs preprocessing (non-JPEG/PNG)
+  const needsPreprocessing = (file: File): boolean => {
+    const supportedTypes = ['image/jpeg', 'image/jpg', 'image/png'];
+    const supportedExtensions = ['.jpg', '.jpeg', '.png'];
+    
+    // Check MIME type first
+    let needsPreprocess = !supportedTypes.includes(file.type);
+    
+    // If MIME type check is inconclusive, check file extension
+    if (!needsPreprocess && file.name) {
+      const fileExtension = file.name.toLowerCase().substring(file.name.lastIndexOf('.'));
+      needsPreprocess = !supportedExtensions.includes(fileExtension);
+    }
+    
+    console.log('Preprocessing check:', {
+      fileName: file.name,
+      fileType: file.type,
+      fileExtension: file.name ? file.name.toLowerCase().substring(file.name.lastIndexOf('.')) : 'none',
+      supportedTypes,
+      supportedExtensions,
+      needsPreprocess
+    });
+    
+    return needsPreprocess;
+  };
+
+  // Handle preprocessing confirmation
+  const handlePreprocessingConfirm = async () => {
+    if (!preprocessingFile) return;
+    
+    setIsPreprocessing(true);
+    setPreprocessingProgress('Starting file conversion...');
+    
+    try {
+      // Create FormData for preprocessing
+      const formData = new FormData();
+      formData.append('file', preprocessingFile);
+      formData.append('preprocess_only', 'true'); // Flag to indicate preprocessing only
+      
+      setPreprocessingProgress('Converting file format...');
+      
+      // Call preprocessing endpoint
+      const response = await fetch('/api/images/preprocess', {
+        method: 'POST',
+        body: formData
+      });
+      
+      if (!response.ok) {
+        throw new Error('Preprocessing failed');
+      }
+      
+      const result = await response.json();
+      
+      setPreprocessingProgress('Finalizing conversion...');
+      
+      // Decode base64 content
+      const processedContent = atob(result.processed_content);
+      const processedBytes = new Uint8Array(processedContent.length);
+      for (let i = 0; i < processedContent.length; i++) {
+        processedBytes[i] = processedContent.charCodeAt(i);
+      }
+      
+      // Create a new File object from the processed data
+      const processedFile = new File(
+        [processedBytes], 
+        result.processed_filename, 
+        { type: result.processed_mime_type }
+      );
+      
+      // Create preview URL
+      const previewUrl = URL.createObjectURL(processedFile);
+      
+      // Update the main file state
+      setFile(processedFile);
+      setPreview(previewUrl);
+      
+      setPreprocessingProgress('Conversion complete!');
+      
+      // Close modal after a brief delay
+      setTimeout(() => {
+        setShowPreprocessingModal(false);
+        setPreprocessingFile(null);
+        setIsPreprocessing(false);
+        setPreprocessingProgress('');
+      }, 1000);
+      
+    } catch (error) {
+      console.error('Preprocessing error:', error);
+      setPreprocessingProgress('Conversion failed. Please try again.');
+      setTimeout(() => {
+        setShowPreprocessingModal(false);
+        setPreprocessingFile(null);
+        setIsPreprocessing(false);
+        setPreprocessingProgress('');
+      }, 2000);
+    }
+  };
+
+  // Handle preprocessing cancellation
+  const handlePreprocessingCancel = () => {
+    setShowPreprocessingModal(false);
+    setPreprocessingFile(null);
+    setIsPreprocessing(false);
+    setPreprocessingProgress('');
   };
 
   useEffect(() => {
@@ -394,6 +537,15 @@ export default function UploadPage() {
       if (!mapRes.ok) throw new Error((mapJson.error as string) || 'Upload failed');
       setImageUrl(mapJson.image_url as string);
 
+      // Check for preprocessing info and show notification if needed
+      if (mapJson.preprocessing_info && 
+          typeof mapJson.preprocessing_info === 'object' && 
+          'was_preprocessed' in mapJson.preprocessing_info && 
+          mapJson.preprocessing_info.was_preprocessed === true) {
+        setPreprocessingInfo(mapJson.preprocessing_info as any);
+        setShowPreprocessingNotification(true);
+      }
+
       const mapIdVal = mapJson.image_id as string;
       if (!mapIdVal) throw new Error('Upload failed: image_id not found');
       setUploadedImageId(mapIdVal);
@@ -507,6 +659,15 @@ export default function UploadPage() {
       const json = await readJsonSafely(res);
       if (!res.ok) throw new Error((json.error as string) || 'Upload failed');
   
+      // Check for preprocessing info and show notification if needed
+      if (json.preprocessing_info && 
+          typeof json.preprocessing_info === 'object' && 
+          'was_preprocessed' in json.preprocessing_info && 
+          json.preprocessing_info.was_preprocessed === true) {
+        setPreprocessingInfo(json.preprocessing_info as any);
+        setShowPreprocessingNotification(true);
+      }
+  
       const newId = json.image_id as string;
       setUploadedImageId(newId);
       setImageUrl(json.image_url as string);
@@ -1307,6 +1468,70 @@ export default function UploadPage() {
           </div>
         )}
 
+        {/* Image Preprocessing Notification Modal */}
+        {showPreprocessingNotification && preprocessingInfo && (
+          <div className={styles.fullSizeModalOverlay} onClick={() => setShowPreprocessingNotification(false)}>
+            <div className={styles.fullSizeModalContent} onClick={(e) => e.stopPropagation()}>
+              <div className={styles.ratingWarningContent}>
+                <h3 className={styles.ratingWarningTitle}>File Converted</h3>
+                <p className={styles.ratingWarningText}>
+                  Your file <strong>{preprocessingInfo.original_filename}</strong> has been converted from 
+                  <strong> {preprocessingInfo.original_mime_type}</strong> to 
+                  <strong> {preprocessingInfo.processed_mime_type}</strong> for better compatibility.
+                  <br /><br />
+                  This process may take a bit longer, but ensures your file works properly in the system.
+                </p>
+                <div className={styles.ratingWarningButtons}>
+                  <Button
+                    name="close-preprocessing"
+                    variant="secondary"
+                    onClick={() => setShowPreprocessingNotification(false)}
+                  >
+                    Got it
+                  </Button>
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* Preprocessing Modal */}
+        {showPreprocessingModal && (
+          <div className={styles.fullSizeModalOverlay} onClick={handlePreprocessingCancel}>
+            <div className={styles.fullSizeModalContent} onClick={(e) => e.stopPropagation()}>
+              <div className={styles.ratingWarningContent}>
+                <h3 className={styles.ratingWarningTitle}>File Conversion Required</h3>
+                <p className={styles.ratingWarningText}>
+                  The file you selected is not in a supported format (JPEG or PNG).
+                  We will convert it to a compatible format for better compatibility.
+                </p>
+                <div className={styles.ratingWarningButtons}>
+                  <Button
+                    name="confirm-preprocessing"
+                    variant="secondary"
+                    onClick={handlePreprocessingConfirm}
+                  >
+                    Convert File
+                  </Button>
+                  <Button
+                    name="cancel-preprocessing"
+                    variant="tertiary"
+                    onClick={handlePreprocessingCancel}
+                  >
+                    Cancel
+                  </Button>
+                </div>
+                {isPreprocessing && (
+                  <div className={styles.preprocessingProgress}>
+                    <p>{preprocessingProgress}</p>
+                    <Spinner className="text-ifrcRed" />
+                  </div>
+                )}
+              </div>
+            </div>
+          </div>
+        )}
+
         </div>
         </div>
       )}

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

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

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

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

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

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

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

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

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

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

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

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

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

go-web-app-develop/.dockerignore

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,16 @@
+name: Add issues to Backlog
+
+on:
+  issues:
+    types:
+      - opened
+
+jobs:
+  add-to-project:
+    name: Add issue to project
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/[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

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

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

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

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

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

go-web-app-develop/.gitignore

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

go-web-app-develop/.npmrc

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

go-web-app-develop/COLLABORATING.md

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

go-web-app-develop/CONTRIBUTING.md

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

go-web-app-develop/LICENSE

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

go-web-app-develop/README.md

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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