fix build error

frontend/src/components/ExportModal.tsx

@@ -214,7 +214,7 @@ export default function ExportModal({
                 name="crisis-maps"
                 label={`Crisis Maps (${crisisMapsCount} images)`}
                 value={crisisMapsSelected}
-                onChange={(value, _name) => setCrisisMapsSelected(value)}
+                onChange={(value) => setCrisisMapsSelected(value)}
                 disabled={isLoading}
               />
             </div>
@@ -224,7 +224,7 @@ export default function ExportModal({
                 name="drone-images"
                 label={`Drone Images (${droneImagesCount} images)`}
                 value={droneImagesSelected}
-                onChange={(value, _name) => setDroneImagesSelected(value)}
+                onChange={(value) => setDroneImagesSelected(value)}
                 disabled={isLoading}
               />
             </div>

frontend/src/components/FilterBar.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { Container, TextInput, SelectInput, MultiSelectInput, Button } from '@ifrc-go/ui';
-import { useFilterContext } from '../contexts/FilterContext';
-import styles from './FilterBar.module.css';
+import { useFilterContext } from '../hooks/useFilterContext';
 
 interface FilterBarProps {
   sources: {s_code: string, label: string}[];

frontend/src/components/HeaderNav.tsx

@@ -8,7 +8,7 @@ import {
   GoMainIcon,
   SettingsIcon,
 } from "@ifrc-go/icons";
-import { useAdmin } from "../contexts/AdminContext";
+
 
 declare global {
   interface Window {
@@ -25,7 +25,6 @@ const navItems = [
 export default function HeaderNav() {
   const location = useLocation();
   const navigate = useNavigate();
-  const { } = useAdmin();
 
   return (
     <nav className="border-b border-gray-200 bg-white shadow-sm sticky top-0 z-50 backdrop-blur-sm bg-white/95">

frontend/src/contexts/AdminContext.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, useContext, useState, useEffect } from 'react';
+import React, { createContext, useState, useEffect } from 'react';
 import type { ReactNode } from 'react';
 
 interface AdminContextType {
@@ -9,15 +9,7 @@ interface AdminContextType {
   verifyToken: () => Promise<void>;
 }
 
-const AdminContext = createContext<AdminContextType | undefined>(undefined);
-
-export const useAdmin = () => {
-  const context = useContext(AdminContext);
-  if (context === undefined) {
-    throw new Error('useAdmin must be used within an AdminProvider');
-  }
-  return context;
-};
+export const AdminContext = createContext<AdminContextType | undefined>(undefined);
 
 interface AdminProviderProps {
   children: ReactNode;
@@ -108,3 +100,5 @@ export const AdminProvider: React.FC<AdminProviderProps> = ({ children }) => {
     </AdminContext.Provider>
   );
 };
+
+

frontend/src/contexts/FilterContext.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, useContext, useState } from 'react';
+import React, { createContext, useState } from 'react';
 import type { ReactNode } from 'react';
 
 interface FilterContextType {
@@ -24,15 +24,7 @@ interface FilterContextType {
   clearAllFilters: () => void;
 }
 
-const FilterContext = createContext<FilterContextType | undefined>(undefined);
-
-export const useFilterContext = () => {
-  const context = useContext(FilterContext);
-  if (context === undefined) {
-    throw new Error('useFilterContext must be used within a FilterProvider');
-  }
-  return context;
-};
+export const FilterContext = createContext<FilterContextType | undefined>(undefined);
 
 interface FilterProviderProps {
   children: ReactNode;
@@ -81,3 +73,5 @@ export const FilterProvider: React.FC<FilterProviderProps> = ({ children }) => {
     </FilterContext.Provider>
   );
 };
+
+

frontend/src/hooks/useAdmin.ts

@@ -0,0 +1,10 @@
+import { useContext } from 'react';
+import { AdminContext } from '../contexts/AdminContext';
+
+export const useAdmin = () => {
+  const context = useContext(AdminContext);
+  if (context === undefined) {
+    throw new Error('useAdmin must be used within an AdminProvider');
+  }
+  return context;
+};

frontend/src/hooks/useFilterContext.ts

@@ -0,0 +1,10 @@
+import { useContext } from 'react';
+import { FilterContext } from '../contexts/FilterContext';
+
+export const useFilterContext = () => {
+  const context = useContext(FilterContext);
+  if (context === undefined) {
+    throw new Error('useFilterContext must be used within a FilterProvider');
+  }
+  return context;
+};

frontend/src/pages/AdminPage/AdminPage.tsx

@@ -1,53 +1,59 @@
 // Force rebuild - Frontend updated with edit prompt functionality
-import React, { useState, useEffect } from 'react';
-import { useAdmin } from '../../contexts/AdminContext';
+import React, { useState, useEffect, useCallback } from 'react';
+import { useAdmin } from '../../hooks/useAdmin';
 import { PageContainer, Heading, Button, Container, TextInput, SelectInput } from '@ifrc-go/ui';
 import styles from './AdminPage.module.css';
 
 const SELECTED_MODEL_KEY = 'selectedVlmModel';
 
+interface PromptData {
+  p_code: string;
+  label: string;
+  metadata_instructions?: string;
+  image_type: string;
+  is_active: boolean;
+}
+
+interface ModelData {
+  m_code: string;
+  label: string;
+  model_type: string;
+  provider?: string;
+  model_id?: string;
+  config?: {
+    provider?: string;
+    model_id?: string;
+    model?: string;
+    stub?: boolean;
+  };
+  is_available: boolean;
+}
+
+interface ImageTypeData {
+  image_type: string;
+  label: string;
+}
+
 export default function AdminPage() {
   const { isAuthenticated, isLoading, login, logout } = useAdmin();
   const [password, setPassword] = useState('');
   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;
-     provider?: string;
-     model_id?: string;
-     config?: {
-       provider?: string;
-       model_id?: string;
-       model?: string;
-       stub?: boolean;
-     };
-  }>>([]);
+  const [availableModels, setAvailableModels] = useState<ModelData[]>([]);
   const [selectedModel, setSelectedModel] = useState<string>('');
   
   // Prompts state
-  const [availablePrompts, setAvailablePrompts] = useState<Array<{
-    p_code: string;
-    label: string;
-    metadata_instructions?: string;
-    image_type: string;
-    is_active: boolean;
-  }>>([]);
+  const [availablePrompts, setAvailablePrompts] = useState<PromptData[]>([]);
   
-  const [imageTypes, setImageTypes] = useState<Array<{
-    image_type: string;
-    label: string;
-  }>>([]);
+  const [imageTypes, setImageTypes] = useState<ImageTypeData[]>([]);
   
   // Prompt management state
   const [showEditPromptForm, setShowEditPromptForm] = useState(false);
   const [showAddPromptForm, setShowAddPromptForm] = useState(false);
   const [addingPromptType, setAddingPromptType] = useState<'crisis_map' | 'drone_image' | null>(null);
-  const [editingPrompt, setEditingPrompt] = useState<any>(null);
-  const [newPromptData, setNewPromptData] = useState({
+  const [editingPrompt, setEditingPrompt] = useState<PromptData | null>(null);
+  const [newPromptData, setNewPromptData] = useState<PromptData>({
     p_code: '',
     label: '',
     metadata_instructions: '',
@@ -58,8 +64,8 @@ export default function AdminPage() {
      // Model management state
    const [showAddModelForm, setShowAddModelForm] = useState(false);
    const [showEditModelForm, setShowEditModelForm] = useState(false);
-   const [editingModel, setEditingModel] = useState<any>(null);
-   const [newModelData, setNewModelData] = useState({
+   const [editingModel, setEditingModel] = useState<ModelData | null>(null);
+   const [newModelData, setNewModelData] = useState<ModelData>({
      m_code: '',
      label: '',
      model_type: 'custom',
@@ -79,21 +85,7 @@ export default function AdminPage() {
     const [testResults, setTestResults] = useState<string>('');
     const [testResultsTitle, setTestResultsTitle] = useState<string>('');
 
-  useEffect(() => {
-    if (isAuthenticated) {
-      fetchModels();
-      fetchPrompts();
-      fetchImageTypes();
-    }
-  }, [isAuthenticated]);
-
-  // Debug effect to see when prompts state changes
-  useEffect(() => {
-    console.log('=== availablePrompts state changed ===');
-    console.log('New prompts state:', availablePrompts);
-  }, [availablePrompts]);
-
-  const fetchModels = () => {
+  const fetchModels = useCallback(() => {
     fetch('/api/models')
       .then(r => r.json())
       .then(modelsData => {
@@ -117,15 +109,14 @@ export default function AdminPage() {
       .catch(() => {
         // Handle error silently
       });
-  };
+  }, []);
 
-  const fetchPrompts = () => {
+  const fetchPrompts = useCallback(() => {
     console.log('=== fetchPrompts called ===');
     fetch('/api/prompts')
       .then(r => r.json())
       .then(promptsData => {
         console.log('Prompts data received:', promptsData);
-        console.log('Current availablePrompts state:', availablePrompts);
         setAvailablePrompts(promptsData || []);
         console.log('State update triggered with:', promptsData || []);
       })
@@ -133,9 +124,9 @@ export default function AdminPage() {
         console.error('Error fetching prompts:', error);
         // Handle error silently
       });
-  };
+  }, []);
 
-  const fetchImageTypes = () => {
+  const fetchImageTypes = useCallback(() => {
     fetch('/api/image-types')
       .then(r => r.json())
       .then(imageTypesData => {
@@ -145,9 +136,19 @@ export default function AdminPage() {
       .catch(() => {
         // Handle error silently
       });
-  };
+  }, []);
+
+  useEffect(() => {
+    if (isAuthenticated) {
+      fetchModels();
+      fetchPrompts();
+      fetchImageTypes();
+    }
+  }, [isAuthenticated, fetchModels, fetchPrompts, fetchImageTypes]);
+
 
-  const handleEditPrompt = (prompt: any) => {
+
+  const handleEditPrompt = (prompt: PromptData) => {
     setEditingPrompt(prompt);
     setNewPromptData({
       p_code: prompt.p_code,
@@ -161,7 +162,12 @@ export default function AdminPage() {
 
   const handleSavePrompt = async () => {
     try {
-      const response = await fetch(`/api/prompts/${editingPrompt.p_code}`, {
+             if (!editingPrompt) {
+         alert('No prompt selected for editing');
+         return;
+       }
+       
+       const response = await fetch(`/api/prompts/${editingPrompt.p_code}`, {
         method: 'PUT',
         headers: {
           'Content-Type': 'application/json',
@@ -184,8 +190,8 @@ export default function AdminPage() {
         const errorData = await response.json();
         alert(`Failed to update prompt: ${errorData.error || 'Unknown error'}`);
       }
-    } catch (error) {
-      alert(`Error updating prompt: ${error}`);
+    } catch {
+      alert('Error updating prompt');
     }
   };
 
@@ -205,7 +211,7 @@ export default function AdminPage() {
         const errorData = await response.json();
         alert(`Failed to toggle prompt active status: ${errorData.detail || 'Unknown error'}`);
       }
-    } catch (error) {
+    } catch {
       alert('Error toggling prompt active status');
     }
   };
@@ -248,8 +254,8 @@ export default function AdminPage() {
         const errorData = await response.json();
         alert(`Failed to create prompt: ${errorData.detail || 'Unknown error'}`);
       }
-    } catch (error) {
-      alert(`Error creating prompt: ${error}`);
+    } catch {
+      alert('Error creating prompt');
     }
   };
 
@@ -277,7 +283,7 @@ export default function AdminPage() {
         const errorData = await response.json();
         alert(`Failed to toggle model availability: ${errorData.error || 'Unknown error'}`);
       }
-    } catch {
+    } catch (_error) {
       alert('Error toggling model availability');
     }
   };
@@ -340,7 +346,7 @@ Model "${newModelData.label}" added successfully!
     }
   };
 
-     const handleEditModel = (model: any) => {
+     const handleEditModel = (model: ModelData) => {
      setEditingModel(model);
      setNewModelData({
        m_code: model.m_code,
@@ -368,6 +374,11 @@ Model "${newModelData.label}" added successfully!
        
        console.log('Update payload:', updatePayload);
        
+       if (!editingModel) {
+         alert('No model selected for editing');
+         return;
+       }
+       
        const response = await fetch(`/api/admin/models/${editingModel.m_code}`, {
          method: 'PUT',
          headers: {
@@ -429,7 +440,7 @@ Model "${newModelData.label}" added successfully!
         const errorData = await response.json();
         alert(`Failed to delete model: ${errorData.detail || 'Unknown error'}`);
       }
-    } catch (error) {
+    } catch {
       alert('Error deleting model');
     }
   };
@@ -449,7 +460,7 @@ Model "${newModelData.label}" added successfully!
       if (!success) {
         setError('Invalid password');
       }
-    } catch (err) {
+    } catch {
       setError('Login failed. Please try again.');
     } finally {
       setIsLoggingIn(false);

frontend/src/pages/AnalyticsPage/AnalyticsPage.tsx

@@ -353,7 +353,7 @@ export default function AnalyticsPage() {
 
   useEffect(() => {
     fetchLookupData();
-  }, []);
+  }, [fetchLookupData]);
 
   useEffect(() => {
     if (sourcesLookup.length > 0 && typesLookup.length > 0 && regionsLookup.length > 0 && modelsLookup.length > 0) {
@@ -590,7 +590,7 @@ export default function AnalyticsPage() {
       },
     ),
     
-  ], [formatEditTime]);
+  ], []);
 
   const editTimeColumns = useMemo(() => [
     createStringColumn<EditTimeData, number>(
@@ -618,7 +618,7 @@ export default function AnalyticsPage() {
       'Max Edit Time',
       (item) => formatEditTime(item.maxEditTime),
     ),
-  ], [formatEditTime]);
+  ], []);
 
     const percentageModifiedColumns = useMemo(() => [
     createStringColumn<PercentageModifiedData, number>(
@@ -1053,7 +1053,7 @@ export default function AnalyticsPage() {
         };
       })
       .sort((a, b) => b.count - a.count);
-  }, [data]);
+  }, [data, getModelLabel]);
 
      const getImageTypeModelsTableData = useCallback((imageType: string) => {
      if (!data) return [];

frontend/src/pages/ExplorePage/ExplorePage.tsx

@@ -1,7 +1,7 @@
 import { useState, useEffect, useMemo } from 'react';
 import { useNavigate, useLocation } from 'react-router-dom';
 import { PageContainer, Container, SegmentInput, Spinner, Button } from '@ifrc-go/ui';
-import { useFilterContext } from '../../contexts/FilterContext';
+import { useFilterContext } from '../../hooks/useFilterContext';
 import FilterBar from '../../components/FilterBar';
 import styles from './ExplorePage.module.css';
 import ExportModal from '../../components/ExportModal';

frontend/src/pages/HelpPage.tsx

@@ -1,6 +1,6 @@
 import { PageContainer, Heading, Button } from '@ifrc-go/ui';
 import { useNavigate } from 'react-router-dom';
-import { useFilterContext } from '../contexts/FilterContext';
+import { useFilterContext } from '../hooks/useFilterContext';
 import styles from './HelpPage.module.css';
 
 export default function HelpPage() {

frontend/src/pages/MapDetailsPage/MapDetailPage.tsx

@@ -3,8 +3,8 @@ import { useParams, useNavigate } from 'react-router-dom';
 import { useState, useEffect, useMemo, useCallback } from 'react';
 import { ChevronLeftLineIcon, ChevronRightLineIcon, DeleteBinLineIcon } from '@ifrc-go/icons';
 import styles from './MapDetailPage.module.css';
-import { useFilterContext } from '../../contexts/FilterContext';
-import { useAdmin } from '../../contexts/AdminContext';
+import { useFilterContext } from '../../hooks/useFilterContext';
+import { useAdmin } from '../../hooks/useAdmin';
 import ExportModal from '../../components/ExportModal';
 
 interface MapOut {

frontend/src/pages/UploadPage/UploadPage.tsx

@@ -102,7 +102,7 @@ export default function UploadPage() {
         setImageType(imageTypesData[0].image_type);
       }
     });
-  }, [searchParams]);
+  }, [searchParams, imageType]);
 
   const handleNavigation = useCallback((to: string) => {
     if (to === '/upload' || to === '/') {
@@ -201,8 +201,8 @@ export default function UploadPage() {
               }
               
               if (data.generated) {
-                // Extract the three parts from raw_json.extracted_metadata (same as regular upload flow)
-                const extractedMetadataForParts = data.raw_json?.extracted_metadata;
+                // Extract the three parts from raw_json.metadata (same as regular upload flow)
+                const extractedMetadataForParts = data.raw_json?.metadata;
                 if (extractedMetadataForParts) {
                   if (extractedMetadataForParts.description) {
                     setDescription(extractedMetadataForParts.description);
@@ -219,8 +219,8 @@ export default function UploadPage() {
                 setDraft(data.generated);
               }
               
-              let extractedMetadata = data.raw_json?.extracted_metadata;
-              console.log('Raw extracted_metadata:', extractedMetadata);
+              let extractedMetadata = data.raw_json?.metadata;
+              console.log('Raw metadata:', extractedMetadata);
               
               if (!extractedMetadata && data.generated) {
                 try {
@@ -642,7 +642,7 @@ export default function UploadPage() {
         setShowFallbackNotification(true);
       }
 
-      const extractedMetadata = (capJson.raw_json as Record<string, unknown>)?.extracted_metadata;
+      const extractedMetadata = (capJson.raw_json as Record<string, unknown>)?.metadata;
       if (extractedMetadata) {
         const metadata = (extractedMetadata as Record<string, unknown>).metadata || extractedMetadata;
         if ((metadata as Record<string, unknown>).title) setTitle((metadata as Record<string, unknown>).title as string);
@@ -668,8 +668,8 @@ export default function UploadPage() {
         }
       }
 
-      // Extract the three parts from raw_json.extracted_metadata
-      const extractedMetadataForParts = (capJson.raw_json as Record<string, unknown>)?.extracted_metadata;
+      // Extract the three parts from raw_json.metadata
+      const extractedMetadataForParts = (capJson.raw_json as Record<string, unknown>)?.metadata;
       if (extractedMetadataForParts) {
         if ((extractedMetadataForParts as Record<string, unknown>).description) {
           setDescription((extractedMetadataForParts as Record<string, unknown>).description as string);
@@ -761,7 +761,7 @@ export default function UploadPage() {
         setShowFallbackNotification(true);
       }
 
-      const extractedMetadata = (capJson.raw_json as Record<string, unknown>)?.extracted_metadata;
+      const extractedMetadata = (capJson.raw_json as Record<string, unknown>)?.metadata;
       if (extractedMetadata) {
         const metadata = (extractedMetadata as Record<string, unknown>).metadata || extractedMetadata;
         if ((metadata as Record<string, unknown>).title) setTitle((metadata as Record<string, unknown>).title as string);
@@ -786,8 +786,8 @@ export default function UploadPage() {
         }
       }
 
-      // Extract the three parts from raw_json.extracted_metadata
-      const extractedMetadataForParts = (capJson.raw_json as Record<string, unknown>)?.extracted_metadata;
+      // Extract the three parts from raw_json.metadata
+      const extractedMetadataForParts = (capJson.raw_json as Record<string, unknown>)?.metadata;
       if (extractedMetadataForParts) {
         if ((extractedMetadataForParts as Record<string, unknown>).description) {
           setDescription((extractedMetadataForParts as Record<string, unknown>).description as string);