feat: adicionar histórico de expedições na landing page

src/domain/home/Home.tsx

@@ -1,17 +1,22 @@
-import React from 'react';
+import React, { useState } from 'react';
 import {
+  Image,
   Pressable,
+  ScrollView,
   StyleSheet,
   Text,
   View,
 } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useQuery } from '../../hook/query/useQuery';
 import { useContainer } from '../../context/container/useContainer';
+import { ExpeditionCard } from './components/HistoryExpeditionCard';
+import { MOCK_HISTORY_EXPEDITIONS } from './expeditions-mock';
 
 export function Home() {
   const { httpClient } = useContainer();
   const insets = useSafeAreaInsets();
+  const [isHistoryOpen, setIsHistoryOpen] = useState(false);
 
   const { data, error, loading, validating } = useQuery(
     async () => {
@@ -61,8 +66,11 @@ export function Home() {
           CONTEÚDO
       ========================== */}
 
-      <View style={styles.content}>
-
+      <ScrollView
+        style={styles.content}
+        contentContainerStyle={styles.scrollContent}
+        showsVerticalScrollIndicator={false}
+      >
         <Text style={styles.sectionTitle}>
           Expedições Ativas
         </Text>
@@ -75,17 +83,36 @@ export function Home() {
 
         {/* Histórico de Expedições */}
 
-        <Pressable style={styles.historyButton}>
-          <Text style={styles.historyText}>
-            Histórico de Expedições
-          </Text>
-
-          <Text style={styles.chevron}>
-            ⌄
-          </Text>
-        </Pressable>
-
-      </View>
+        <View style={styles.historyContainer}>
+          <Pressable
+            style={styles.historyButton}
+            onPress={() => setIsHistoryOpen(prev => !prev)}
+          >
+            <Text style={styles.historyText}>
+              Histórico de Expedições
+            </Text>
+
+            <View style={styles.chevronWrapper}>
+              <Image
+                source={require('../../assets/icons/chevron-down.png')}
+                style={[
+                  styles.chevronIcon,
+                  !isHistoryOpen && styles.chevronClosed,
+                ]}
+                resizeMode="contain"
+              />
+            </View>
+          </Pressable>
+
+          {isHistoryOpen && (
+            <View style={styles.historyList}>
+              {MOCK_HISTORY_EXPEDITIONS.map(item => (
+                <ExpeditionCard key={item.id} expedition={item} />
+              ))}
+            </View>
+          )}
+        </View>
+      </ScrollView>
 
       {/* =========================
           BOTÃO +
@@ -158,13 +185,16 @@ const styles = StyleSheet.create({
 
   content: {
     flex: 1,
+  },
 
-    paddingHorizontal: 24,
+  scrollContent: {
+    paddingHorizontal: 16,
     paddingTop: 24,
+    paddingBottom: 96,
   },
 
   sectionTitle: {
-    color: '#E8EFEA',
+    color: '#E9EDE9',
 
     fontSize: 20,
     fontWeight: '700',
@@ -182,33 +212,49 @@ const styles = StyleSheet.create({
      HISTÓRICO
   ========================== */
 
+  historyContainer: {
+    borderRadius: 10,
+    backgroundColor: '#183927',
+    borderWidth: 1,
+    borderColor: '#274936',
+    overflow: 'hidden',
+  },
   historyButton: {
-    height: 49,
-
-    borderRadius: 8,
-
-    backgroundColor: '#153D29',
-
+    height: 48,
     paddingHorizontal: 16,
-
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'space-between',
   },
 
   historyText: {
-    color: '#E8EFEA',
+    color: '#E9EDE9',
 
-    fontSize: 16,
-    fontWeight: '600',
+    fontSize: 14,
+    fontWeight: '700',
   },
 
-  chevron: {
-    color: '#E8EFEA',
+  chevronWrapper: {
+    width: 16,
+    height: 16,
+  },
 
-    fontSize: 24,
+  chevronIcon: {
+    tintColor: '#E9EDE9',
+    width: 16,
+    height: 16,
+    transform: [{ rotate: '0deg' }],
+  },
+
+  chevronClosed: {
+    transform: [{ rotate: '-90deg' }],
+  },
 
-    marginTop: -6,
+  historyList: {
+    padding: 12,
+    gap: 12,
+    borderTopWidth: 1,
+    borderTopColor: '#274936',
   },
 
   /* =========================
@@ -221,12 +267,12 @@ const styles = StyleSheet.create({
     right: 20,
     bottom: 87,
 
-    width: 57,
-    height: 57,
+    width: 56,
+    height: 56,
 
     borderRadius: 29,
 
-    backgroundColor: '#19B85A',
+    backgroundColor: '#1FAD5A',
 
     alignItems: 'center',
     justifyContent: 'center',

src/domain/home/components/HistoryExpeditionCard.tsx

@@ -0,0 +1,104 @@
+import React from 'react';
+import { Image, StyleSheet, Text, View } from 'react-native';
+import { Expedition } from '../types';
+
+interface Props {
+  expedition: Expedition;
+}
+
+export function ExpeditionCard({ expedition }: Props) {
+  const isFinalizada = expedition.status === 'Finalizada';
+
+  return (
+    <View style={styles.card}>
+      {/* Topo do card: Nome à esquerda e Status à direita */}
+      <View style={styles.cardHeader}>
+        <Text style={styles.title} numberOfLines={1}>
+          {expedition.name}
+        </Text>
+
+        <View style={[styles.badge, isFinalizada && styles.badgeFinalizada]}>
+          <Text style={[styles.badgeText, isFinalizada && styles.badgeTextFinalizada]}>
+            {expedition.status}
+          </Text>
+        </View>
+      </View>
+
+      {/* Linha de Data */}
+      <View style={styles.infoRow}>
+        <Image
+          source={require('../../../assets/icons/calendar.png')}
+          style={styles.icon}
+          resizeMode="contain"
+        />
+        <Text style={styles.infoText}>{expedition.date}</Text>
+      </View>
+
+      {/* Linha de Local */}
+      <View style={styles.infoRow}>
+        <Image
+          source={require('../../../assets/icons/pin.png')}
+          style={styles.icon}
+          resizeMode="contain"
+        />
+        <Text style={styles.infoText}>{expedition.location}</Text>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  card: {
+    width: '100%',
+    backgroundColor: '#0F2E1D',
+    borderRadius: 12,
+    borderWidth: 1,
+    borderColor: '#274936',
+    padding: 16,
+    gap: 8,
+  },
+  cardHeader: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: 4,
+  },
+  title: {
+    color: '#E9EDE9',
+    fontSize: 16,
+    fontWeight: '700',
+    flex: 1,
+    marginRight: 8,
+  },
+  badge: {
+    backgroundColor: '#1FAD5A1A',
+    paddingVertical: 4,
+    paddingHorizontal: 10,
+    borderRadius: 12,
+  },
+  badgeFinalizada: {
+    backgroundColor: '#1FAD5A1A',
+  },
+  badgeText: {
+    color: '#1FAD5A',
+    fontSize: 11,
+    fontWeight: '600',
+  },
+  badgeTextFinalizada: {
+    color: '#1FAD5A',
+  },
+  infoRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+  },
+  icon: {
+    width: 14,
+    height: 14,
+    tintColor: '#819888',
+  },
+  infoText: {
+    color: '#819888',
+    fontSize: 13,
+  },
+});

src/domain/home/expeditions-mock.ts

@@ -0,0 +1,25 @@
+import { Expedition } from './types';
+
+export const MOCK_HISTORY_EXPEDITIONS: Expedition[] = [
+    {
+        id: 'h-1',
+        name: 'Serra do Cipó',
+        date: '14/08/2025',
+        location: 'MG - Brasil',
+        status: 'Finalizada',
+    },
+    {
+        id: 'h-2',
+        name: 'Monte Roraima',
+        date: '02/06/2025',
+        location: 'RR - Brasil',
+        status: 'Finalizada',
+    },
+    {
+        id: 'h-3',
+        name: 'Parque Nacional do Iguaçu',
+        date: '19/04/2025',
+        location: 'PR - Brasil',
+        status: 'Finalizada',
+    },
+];

src/domain/home/types.ts

@@ -0,0 +1,7 @@
+export interface Expedition {
+  id: string;
+  name: string;
+  date: string;
+  location: string;
+  status: 'Em andamento' | 'Planejada' | 'Finalizada';
+}