diff --git a/src/assets/icons/calendar.png b/src/assets/icons/calendar.png
new file mode 100644
index 0000000..2f8c69e
Binary files /dev/null and b/src/assets/icons/calendar.png differ
diff --git a/src/assets/icons/chevron-down.png b/src/assets/icons/chevron-down.png
new file mode 100644
index 0000000..b11aa8a
Binary files /dev/null and b/src/assets/icons/chevron-down.png differ
diff --git a/src/assets/icons/pin.png b/src/assets/icons/pin.png
new file mode 100644
index 0000000..489d4b5
Binary files /dev/null and b/src/assets/icons/pin.png differ
diff --git a/src/domain/home/Home.tsx b/src/domain/home/Home.tsx
index 5f3a7bf..14c97dd 100644
--- a/src/domain/home/Home.tsx
+++ b/src/domain/home/Home.tsx
@@ -1,6 +1,8 @@
-import React from 'react';
+import React, { useState } from 'react';
import {
+ Image,
Pressable,
+ ScrollView,
StyleSheet,
Text,
View,
@@ -8,10 +10,13 @@ import {
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
========================== */}
-
-
+
Expedições Ativas
@@ -75,17 +83,36 @@ export function Home() {
{/* Histórico de Expedições */}
-
-
- Histórico de Expedições
-
-
-
- ⌄
-
-
-
-
+
+ setIsHistoryOpen(prev => !prev)}
+ >
+
+ Histórico de Expedições
+
+
+
+
+
+
+
+ {isHistoryOpen && (
+
+ {MOCK_HISTORY_EXPEDITIONS.map(item => (
+
+ ))}
+
+ )}
+
+
{/* =========================
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',
diff --git a/src/domain/home/components/HistoryExpeditionCard.tsx b/src/domain/home/components/HistoryExpeditionCard.tsx
new file mode 100644
index 0000000..5b15756
--- /dev/null
+++ b/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 (
+
+ {/* Topo do card: Nome à esquerda e Status à direita */}
+
+
+ {expedition.name}
+
+
+
+
+ {expedition.status}
+
+
+
+
+ {/* Linha de Data */}
+
+
+ {expedition.date}
+
+
+ {/* Linha de Local */}
+
+
+ {expedition.location}
+
+
+ );
+}
+
+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,
+ },
+});
\ No newline at end of file
diff --git a/src/domain/home/expeditions-mock.ts b/src/domain/home/expeditions-mock.ts
new file mode 100644
index 0000000..4ce6892
--- /dev/null
+++ b/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',
+ },
+];
\ No newline at end of file
diff --git a/src/domain/home/types.ts b/src/domain/home/types.ts
new file mode 100644
index 0000000..a25b113
--- /dev/null
+++ b/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';
+}
\ No newline at end of file