map details page

frontend/src/components/HeaderNav.tsx

@@ -52,6 +52,7 @@ export default function HeaderNav() {
         <nav className="flex items-center space-x-4 bg-gray-50/80 rounded-xl p-2 backdrop-blur-sm">
           {navItems.map(({ to, label, Icon }) => {
             const isActive = location.pathname === to || 
+              (to === '/upload' && location.pathname === '/') ||
               (to === '/explore' && location.pathname.startsWith('/map/'));
             return (
               <div key={to} className="relative">
@@ -94,9 +95,13 @@ export default function HeaderNav() {
 
         <Button
           name="help"
-          variant="tertiary"
+          variant={location.pathname === '/help' ? "primary" : "tertiary"}
           size={1}
-          className="transition-all duration-200 hover:bg-blue-50 hover:text-blue-600 hover:shadow-md hover:scale-105"
+          className={`transition-all duration-200 ${
+            location.pathname === '/help'
+              ? 'shadow-lg shadow-ifrcRed/20 transform scale-105'
+              : 'hover:bg-blue-50 hover:text-blue-600 hover:shadow-md hover:scale-105'
+          }`}
           onClick={() => {
             if (location.pathname === "/upload") {
               if ((window as any).confirmNavigationIfNeeded) {

frontend/src/pages/ExplorePage/ExplorePage.tsx

@@ -195,61 +195,71 @@ export default function ExplorePage() {
         {view === 'explore' ? (
           <div className="space-y-6">
             {/* Search and Filters */}
-            <div className="space-y-4">
-              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-                <TextInput
-                  name="search"
-                  placeholder="Search examples..."
-                  value={search}
-                  onChange={(v) => setSearch(v || '')}
-                />
+            <div className="mb-6">
+              <div className="flex flex-wrap items-center gap-4">
+                <Container withInternalPadding className="bg-white/20 backdrop-blur-sm rounded-md p-2 flex-1 min-w-[300px]">
+                  <TextInput
+                    name="search"
+                    placeholder="Search examples..."
+                    value={search}
+                    onChange={(v) => setSearch(v || '')}
+                  />
+                </Container>
 
-                <SelectInput
-                  name="source"
-                  placeholder={isLoadingFilters ? "Loading..." : "All Sources"}
-                  options={sources}
-                  value={srcFilter || null}
-                  onChange={(v) => setSrcFilter(v as string || '')}
-                  keySelector={(o) => o.s_code}
-                  labelSelector={(o) => o.label}
-                  required={false}
-                  disabled={isLoadingFilters}
-                />
+                <Container withInternalPadding className="bg-white/20 backdrop-blur-sm rounded-md p-2">
+                  <SelectInput
+                    name="source"
+                    placeholder={isLoadingFilters ? "Loading..." : "All Sources"}
+                    options={sources}
+                    value={srcFilter || null}
+                    onChange={(v) => setSrcFilter(v as string || '')}
+                    keySelector={(o) => o.s_code}
+                    labelSelector={(o) => o.label}
+                    required={false}
+                    disabled={isLoadingFilters}
+                  />
+                </Container>
 
-                <SelectInput
-                  name="category"
-                  placeholder={isLoadingFilters ? "Loading..." : "All Categories"}
-                  options={types}
-                  value={catFilter || null}
-                  onChange={(v) => setCatFilter(v as string || '')}
-                  keySelector={(o) => o.t_code}
-                  labelSelector={(o) => o.label}
-                  required={false}
-                  disabled={isLoadingFilters}
-                />
+                <Container withInternalPadding className="bg-white/20 backdrop-blur-sm rounded-md p-2">
+                  <SelectInput
+                    name="category"
+                    placeholder={isLoadingFilters ? "Loading..." : "All Categories"}
+                    options={types}
+                    value={catFilter || null}
+                    onChange={(v) => setCatFilter(v as string || '')}
+                    keySelector={(o) => o.t_code}
+                    labelSelector={(o) => o.label}
+                    required={false}
+                    disabled={isLoadingFilters}
+                  />
+                </Container>
 
-                <SelectInput
-                  name="region"
-                  placeholder={isLoadingFilters ? "Loading..." : "All Regions"}
-                  options={regions}
-                  value={regionFilter || null}
-                  onChange={(v) => setRegionFilter(v as string || '')}
-                  keySelector={(o) => o.r_code}
-                  labelSelector={(o) => o.label}
-                  required={false}
-                  disabled={isLoadingFilters}
-                />
+                <Container withInternalPadding className="bg-white/20 backdrop-blur-sm rounded-md p-2">
+                  <SelectInput
+                    name="region"
+                    placeholder={isLoadingFilters ? "Loading..." : "All Regions"}
+                    options={regions}
+                    value={regionFilter || null}
+                    onChange={(v) => setRegionFilter(v as string || '')}
+                    keySelector={(o) => o.r_code}
+                    labelSelector={(o) => o.label}
+                    required={false}
+                    disabled={isLoadingFilters}
+                  />
+                </Container>
 
-                <MultiSelectInput
-                  name="country"
-                  placeholder={isLoadingFilters ? "Loading..." : "All Countries"}
-                  options={countries}
-                  value={countryFilter ? [countryFilter] : []}
-                  onChange={(v) => setCountryFilter((v as string[])[0] || '')}
-                  keySelector={(o) => o.c_code}
-                  labelSelector={(o) => o.label}
-                  disabled={isLoadingFilters}
-                />
+                <Container withInternalPadding className="bg-white/20 backdrop-blur-sm rounded-md p-2">
+                  <MultiSelectInput
+                    name="country"
+                    placeholder={isLoadingFilters ? "Loading..." : "All Countries"}
+                    options={countries}
+                    value={countryFilter ? [countryFilter] : []}
+                    onChange={(v) => setCountryFilter((v as string[])[0] || '')}
+                    keySelector={(o) => o.c_code}
+                    labelSelector={(o) => o.label}
+                    disabled={isLoadingFilters}
+                  />
+                </Container>
               </div>
             </div>
 

frontend/src/pages/HelpPage.tsx

@@ -1,9 +1,44 @@
-import { PageContainer, Heading } from '@ifrc-go/ui';
+import { PageContainer, Heading, Container } from '@ifrc-go/ui';
 
 export default function HelpPage() {
   return (
-    <PageContainer className="py-10 text-center">
-      <Heading level={2}>Help &amp; Support</Heading>
+    <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">
+            <Heading level={3} className="mb-4 text-ifrcRed font-semibold">Introduction</Heading>
+            <p className="text-gray-700 leading-relaxed text-base">
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore 
+              et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut 
+              aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
+              cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in 
+              culpa qui officia deserunt mollit anim id est laborum.
+            </p>
+          </Container>
+
+          <Container withInternalPadding className="p-8">
+            <Heading level={3} className="mb-4 text-ifrcRed font-semibold">Guidelines</Heading>
+            <p className="text-gray-700 leading-relaxed text-base">
+              Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, 
+              totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae 
+              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>
+          </Container>
+
+          <Container withInternalPadding className="p-8">
+            <Heading level={3} className="mb-4 text-ifrcRed font-semibold">VLMs</Heading>
+            <p className="text-gray-700 leading-relaxed text-base">
+              At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum 
+              deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non 
+              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>
+          </Container>
+        </div>
+      </Container>
     </PageContainer>
   );
 }

frontend/src/pages/MapDetailsPage/MapDetailPage.tsx

@@ -1,6 +1,7 @@
-import { PageContainer, Container, Button, Spinner, SegmentInput } from '@ifrc-go/ui';
+import { PageContainer, Container, Button, Spinner, SegmentInput, IconButton, TextInput, SelectInput, MultiSelectInput } from '@ifrc-go/ui';
 import { useParams, useNavigate } from 'react-router-dom';
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useMemo } from 'react';
+import { ChevronLeftLineIcon, ChevronRightLineIcon } from '@ifrc-go/icons';
 import styles from './MapDetailPage.module.css';
 
 interface MapOut {
@@ -43,6 +44,19 @@ export default function MapDetailPage() {
   const [types, setTypes] = useState<{t_code: string, label: string}[]>([]);
   const [imageTypes, setImageTypes] = useState<{image_type: string, label: string}[]>([]);
   const [regions, setRegions] = useState<{r_code: string, label: string}[]>([]);
+  const [countries, setCountries] = useState<{c_code: string, label: string, r_code: string}[]>([]);
+  
+  // Carousel state
+  const [hasPrevious, setHasPrevious] = useState(false);
+  const [hasNext, setHasNext] = useState(false);
+  const [isNavigating, setIsNavigating] = useState(false);
+  
+  // Search and filter state
+  const [search, setSearch] = useState('');
+  const [srcFilter, setSrcFilter] = useState('');
+  const [catFilter, setCatFilter] = useState('');
+  const [regionFilter, setRegionFilter] = useState('');
+  const [countryFilter, setCountryFilter] = useState('');
 
   const viewOptions = [
     { key: 'explore' as const, label: 'Explore' },
@@ -56,38 +70,113 @@ export default function MapDetailPage() {
       return;
     }
 
-    fetch(`/api/images/${mapId}`)
-      .then(response => {
-        if (!response.ok) {
-          throw new Error('Map not found');
-        }
-        return response.json();
-      })
-      .then(data => {
-        setMap(data);
-        setLoading(false);
-      })
-      .catch(err => {
-        setError(err.message);
-        setLoading(false);
-      });
+    fetchMapData(mapId);
   }, [mapId]);
 
+  const fetchMapData = async (id: string) => {
+    setIsNavigating(true);
+    setLoading(true);
+    
+    try {
+      const response = await fetch(`/api/images/${id}`);
+      if (!response.ok) {
+        throw new Error('Map not found');
+      }
+      const data = await response.json();
+      setMap(data);
+      
+      // Check for previous/next items
+      await checkNavigationAvailability(id);
+    } catch (err: any) {
+      setError(err.message);
+    } finally {
+      setLoading(false);
+      setIsNavigating(false);
+    }
+  };
+
+  const checkNavigationAvailability = async (currentId: string) => {
+    try {
+      // Fetch all image IDs to determine navigation
+      const response = await fetch('/api/images');
+      if (response.ok) {
+        const images = await response.json();
+        const currentIndex = images.findIndex((img: any) => img.image_id === currentId);
+        
+        // Always show navigation arrows since it's circular
+        setHasPrevious(true);
+        setHasNext(true);
+      }
+    } catch (error) {
+      console.error('Failed to check navigation availability:', error);
+    }
+  };
+
+  const navigateToItem = async (direction: 'previous' | 'next') => {
+    if (isNavigating) return;
+    
+    try {
+      const response = await fetch('/api/images');
+      if (!response.ok) return;
+      
+      const images = await response.json();
+      const currentIndex = images.findIndex((img: any) => img.image_id === mapId);
+      
+      let targetIndex: number;
+      if (direction === 'previous') {
+        // Wrap around to the last item if at the beginning
+        targetIndex = currentIndex === 0 ? images.length - 1 : currentIndex - 1;
+      } else {
+        // Wrap around to the first item if at the end
+        targetIndex = currentIndex === images.length - 1 ? 0 : currentIndex + 1;
+      }
+      
+      const targetId = images[targetIndex].image_id;
+      navigate(`/map/${targetId}`);
+    } catch (error) {
+      console.error('Navigation failed:', error);
+    }
+  };
+
   useEffect(() => {
     Promise.all([
       fetch('/api/sources').then(r => r.json()),
       fetch('/api/types').then(r => r.json()),
       fetch('/api/image-types').then(r => r.json()),
       fetch('/api/regions').then(r => r.json()),
-    ]).then(([sourcesData, typesData, imageTypesData, regionsData]) => {
+      fetch('/api/countries').then(r => r.json()),
+    ]).then(([sourcesData, typesData, imageTypesData, regionsData, countriesData]) => {
       setSources(sourcesData);
       setTypes(typesData);
       setImageTypes(imageTypesData);
       setRegions(regionsData);
+      setCountries(countriesData);
     }).catch(console.error);
   }, []);
 
   const [isGenerating, setIsGenerating] = useState(false);
+  
+  // Filter the current map based on search and filter criteria
+  const filteredMap = useMemo(() => {
+    if (!map) return null;
+    
+    // Check if map matches search criteria
+    const matchesSearch = !search || 
+      map.title?.toLowerCase().includes(search.toLowerCase()) ||
+      map.generated?.toLowerCase().includes(search.toLowerCase()) ||
+      map.source?.toLowerCase().includes(search.toLowerCase()) ||
+      map.event_type?.toLowerCase().includes(search.toLowerCase());
+    
+    // Check if map matches filter criteria
+    const matchesSource = !srcFilter || map.source === srcFilter;
+    const matchesCategory = !catFilter || map.event_type === catFilter;
+    const matchesRegion = !regionFilter || 
+      map.countries.some(country => country.r_code === regionFilter);
+    const matchesCountry = !countryFilter || 
+      map.countries.some(country => country.c_code === countryFilter);
+    
+    return matchesSearch && matchesSource && matchesCategory && matchesRegion && matchesCountry ? map : null;
+  }, [map, search, srcFilter, catFilter, regionFilter, countryFilter]);
 
   const handleContribute = async () => {
     if (!map) return;
@@ -205,94 +294,236 @@ export default function MapDetailPage() {
           />
         </div>
 
+        {/* Search and Filters */}
+        <div className="mb-6">
+          <div className="flex flex-wrap items-center gap-4">
+            <Container withInternalPadding className="bg-white/20 backdrop-blur-sm rounded-md p-2 flex-1 min-w-[300px]">
+              <TextInput
+                name="search"
+                placeholder="Search examples..."
+                value={search}
+                onChange={(v) => setSearch(v || '')}
+              />
+            </Container>
+
+            <Container withInternalPadding className="bg-white/20 backdrop-blur-sm rounded-md p-2">
+              <SelectInput
+                name="source"
+                placeholder="All Sources"
+                options={sources}
+                value={srcFilter || null}
+                onChange={(v) => setSrcFilter(v as string || '')}
+                keySelector={(o) => o.s_code}
+                labelSelector={(o) => o.label}
+                required={false}
+              />
+            </Container>
+
+            <Container withInternalPadding className="bg-white/20 backdrop-blur-sm rounded-md p-2">
+              <SelectInput
+                name="category"
+                placeholder="All Categories"
+                options={types}
+                value={catFilter || null}
+                onChange={(v) => setCatFilter(v as string || '')}
+                keySelector={(o) => o.t_code}
+                labelSelector={(o) => o.label}
+                required={false}
+              />
+            </Container>
+
+            <Container withInternalPadding className="bg-white/20 backdrop-blur-sm rounded-md p-2">
+              <SelectInput
+                name="region"
+                placeholder="All Regions"
+                options={regions}
+                value={regionFilter || null}
+                onChange={(v) => setRegionFilter(v as string || '')}
+                keySelector={(o) => o.r_code}
+                labelSelector={(o) => o.label}
+                required={false}
+              />
+            </Container>
+
+            <Container withInternalPadding className="bg-white/20 backdrop-blur-sm rounded-md p-2">
+              <MultiSelectInput
+                name="country"
+                placeholder="All Countries"
+                options={countries}
+                value={countryFilter ? [countryFilter] : []}
+                onChange={(v) => setCountryFilter((v as string[])[0] || '')}
+                keySelector={(o) => o.c_code}
+                labelSelector={(o) => o.label}
+              />
+            </Container>
+          </div>
+        </div>
+
         {view === 'mapDetails' ? (
-          <>
-            <div className={styles.gridLayout}>
-              {/* Image Section */}
-              <Container
-                heading={map.title || "Map Image"}
-                headingLevel={2}
-                withHeaderBorder
-                withInternalPadding
-                spacing="comfortable"
-              >
-                <div className={styles.imageContainer}>
-                  {map.image_url ? (
-                    <img
-                      src={map.image_url}
-                      alt={map.file_key}
-                    />
-                  ) : (
-                    <div className={styles.imagePlaceholder}>
-                      No image available
+          <div className="relative">
+            {filteredMap ? (
+              <>
+                <div className={styles.gridLayout}>
+                  {/* Image Section */}
+                  <Container
+                    heading={filteredMap.title || "Map Image"}
+                    headingLevel={2}
+                    withHeaderBorder
+                    withInternalPadding
+                    spacing="comfortable"
+                  >
+                    <div className={styles.imageContainer}>
+                      {filteredMap.image_url ? (
+                        <img
+                          src={filteredMap.image_url}
+                          alt={filteredMap.file_key}
+                        />
+                      ) : (
+                        <div className={styles.imagePlaceholder}>
+                          No image available
+                        </div>
+                      )}
                     </div>
-                  )}
-                </div>
-              </Container>
+                  </Container>
 
-              {/* Details Section */}
-              <div className={styles.detailsSection}>
-                <Container
-                  heading="Tags"
-                  headingLevel={3}
-                  withHeaderBorder
-                  withInternalPadding
-                  spacing="comfortable"
-                >
-                  <div className={styles.metadataTags}>
-                    <span className={styles.metadataTag}>
-                      {sources.find(s => s.s_code === map.source)?.label || map.source}
-                    </span>
-                    <span className={styles.metadataTag}>
-                      {types.find(t => t.t_code === map.event_type)?.label || map.event_type}
-                    </span>
-                    <span className={styles.metadataTag}>
-                      {imageTypes.find(it => it.image_type === map.image_type)?.label || map.image_type}
-                    </span>
-                    {map.countries && map.countries.length > 0 && (
-                      <>
+                  {/* Details Section */}
+                  <div className={styles.detailsSection}>
+                    <Container
+                      heading="Tags"
+                      headingLevel={3}
+                      withHeaderBorder
+                      withInternalPadding
+                      spacing="comfortable"
+                    >
+                      <div className={styles.metadataTags}>
                         <span className={styles.metadataTag}>
-                          {regions.find(r => r.r_code === map.countries[0].r_code)?.label || 'Unknown Region'}
+                          {sources.find(s => s.s_code === filteredMap.source)?.label || filteredMap.source}
                         </span>
                         <span className={styles.metadataTag}>
-                          {map.countries.map(country => country.label).join(', ')}
+                          {types.find(t => t.t_code === filteredMap.event_type)?.label || filteredMap.event_type}
                         </span>
-                      </>
-                    )}
-                  </div>
-                </Container>
+                        <span className={styles.metadataTag}>
+                          {imageTypes.find(it => it.image_type === filteredMap.image_type)?.label || filteredMap.image_type}
+                        </span>
+                        {filteredMap.countries && filteredMap.countries.length > 0 && (
+                          <>
+                            <span className={styles.metadataTag}>
+                              {regions.find(r => r.r_code === filteredMap.countries[0].r_code)?.label || 'Unknown Region'}
+                            </span>
+                            <span className={styles.metadataTag}>
+                              {filteredMap.countries.map(country => country.label).join(', ')}
+                            </span>
+                          </>
+                        )}
+                      </div>
+                    </Container>
 
-                <Container
-                  heading="Description"
-                  headingLevel={3}
-                  withHeaderBorder
-                  withInternalPadding
-                  spacing="comfortable"
-                >
-                  <div className={styles.captionContainer}>
-                    {map.generated ? (
-                      <div className={styles.captionText}>
-                        <p>{map.edited || map.generated}</p>
+                    <Container
+                      heading="Description"
+                      headingLevel={3}
+                      withHeaderBorder
+                      withInternalPadding
+                      spacing="comfortable"
+                    >
+                      <div className={styles.captionContainer}>
+                        {filteredMap.generated ? (
+                          <div className={styles.captionText}>
+                            <p>{filteredMap.edited || filteredMap.generated}</p>
+                          </div>
+                        ) : (
+                          <p>— no caption yet —</p>
+                        )}
                       </div>
-                    ) : (
-                      <p>— no caption yet —</p>
-                    )}
+                    </Container>
                   </div>
-                </Container>
-              </div>
-            </div>
+                </div>
 
-            {/* Contribute Section */}
-            <div className="flex justify-center mt-8">
-              <Button
-                name="contribute"
-                onClick={handleContribute}
-                disabled={isGenerating}
-              >
-                {isGenerating ? 'Generating...' : 'Contribute'}
-              </Button>
-            </div>
-          </>
+                {/* Contribute Section with Navigation Arrows */}
+                <div className="flex items-center justify-center mt-8">
+                  <Container withInternalPadding className="bg-white/20 backdrop-blur-sm rounded-lg p-4">
+                    <div className="flex items-center gap-4">
+                      {hasPrevious && (
+                        <Container withInternalPadding className="rounded-md p-2">
+                          <Button
+                            name="previous-item"
+                            variant="tertiary"
+                            size={1}
+                            className={`bg-white/90 hover:bg-white shadow-lg border border-gray-200 ${
+                              isNavigating ? 'opacity-50 cursor-not-allowed' : 'hover:scale-110'
+                            }`}
+                            onClick={() => navigateToItem('previous')}
+                            disabled={isNavigating}
+                          >
+                            <div className="flex items-center gap-1">
+                              <div className="flex -space-x-1">
+                                <ChevronLeftLineIcon className="w-4 h-4" />
+                                <ChevronLeftLineIcon className="w-4 h-4" />
+                              </div>
+                              <span className="font-semibold">Previous</span>
+                            </div>
+                          </Button>
+                        </Container>
+                      )}
+                      
+                      <Container withInternalPadding className="rounded-md p-2">
+                        <Button
+                          name="contribute"
+                          onClick={handleContribute}
+                          disabled={isGenerating}
+                        >
+                          {isGenerating ? 'Generating...' : 'Contribute'}
+                        </Button>
+                      </Container>
+                      
+                      {hasNext && (
+                        <Container withInternalPadding className="rounded-md p-2">
+                          <Button
+                            name="next-item"
+                            variant="tertiary"
+                            size={1}
+                            className={`bg-white/90 hover:bg-white shadow-lg border border-gray-200 ${
+                              isNavigating ? 'opacity-50 cursor-not-allowed' : 'hover:scale-110'
+                            }`}
+                            onClick={() => navigateToItem('next')}
+                            disabled={isNavigating}
+                          >
+                            <div className="flex items-center gap-1">
+                              <span className="font-semibold">Next</span>
+                              <div className="flex -space-x-1">
+                                <ChevronRightLineIcon className="w-4 h-4" />
+                                <ChevronRightLineIcon className="w-4 h-4" />
+                              </div>
+                            </div>
+                          </Button>
+                        </Container>
+                      )}
+                    </div>
+                  </Container>
+                </div>
+              </>
+            ) : (
+              <div className="text-center py-12">
+                <div className="text-xl font-semibold text-gray-600 mb-4">
+                  No matches found
+                </div>
+                <div className="mt-4">
+                  <Button
+                    name="clear-filters"
+                    variant="secondary"
+                    onClick={() => {
+                      setSearch('');
+                      setSrcFilter('');
+                      setCatFilter('');
+                      setRegionFilter('');
+                      setCountryFilter('');
+                    }}
+                  >
+                    Clear Filters
+                  </Button>
+                </div>
+              </div>
+            )}
+          </div>
         ) : null}
       </Container>
     </PageContainer>