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