import React, { useState, useEffect } from 'react'; import { View, Text, StyleSheet, ScrollView, TouchableOpacity, Modal, TextInput } from 'react-native'; import { useDispatch, useSelector } from 'react-redux'; import { loadAccounts, selectAccounts, selectTotalBalance } from '../src/store/slices/accountSlice'; import { loadCategories } from '../src/store/slices/categorySlice'; import { Account } from '../src/types/account'; import { Category } from '../src/types/category'; // Constants const PRIMARY_COLOR = '#0E6942'; // Mock data services const mockAccounts: Account[] = [ { id: '1', name: 'Conta Corrente', balance: 1500.75 }, { id: '2', name: 'Conta Poupança', balance: 5000.00 }, { id: '3', name: 'Conta Investimentos', balance: 12500.25 }, ]; const mockCategories: Category[] = [ { id: '1', name: 'Receitas', parentId: null, children: [ { id: '1-1', name: 'Salário', parentId: '1', children: [] }, { id: '1-2', name: 'Freelance', parentId: '1', children: [] }, ] }, { id: '2', name: 'Despesas', parentId: null, children: [ { id: '2-1', name: 'Fixas', parentId: '2', children: [ { id: '2-1-1', name: 'Aluguel', parentId: '2-1', children: [] }, { id: '2-1-2', name: 'Internet', parentId: '2-1', children: [] }, ] }, { id: '2-2', name: 'Variáveis', parentId: '2', children: [ { id: '2-2-1', name: 'Alimentação', parentId: '2-2', children: [] }, { id: '2-2-2', name: 'Transporte', parentId: '2-2', children: [] }, ] }, ] }, ]; export default function HomeScreen() { const dispatch = useDispatch(); const accounts = useSelector(selectAccounts); const totalBalance = useSelector(selectTotalBalance); const [accountModalVisible, setAccountModalVisible] = useState(false); const [selectedAccount, setSelectedAccount] = useState(null); useEffect(() => { dispatch(loadAccounts(mockAccounts)); dispatch(loadCategories(mockCategories)); }, [dispatch]); const handleAccountPress = (account: Account) => { setSelectedAccount(account); setAccountModalVisible(true); }; const renderAccountItem = ({ item }: { item: Account }) => ( handleAccountPress(item)} > {item.name} R$ {item.balance.toFixed(2)} ); return ( Minhas Contas Saldo Total: R$ {totalBalance.toFixed(2)} {accounts.map(account => ( handleAccountPress(account)} > {account.name} R$ {account.balance.toFixed(2)} ))} {/* Account Detail Modal */} setAccountModalVisible(false)} > Detalhes da Conta {selectedAccount && ( <> Nome: {selectedAccount.name} Saldo: R$ {selectedAccount.balance.toFixed(2)} )} setAccountModalVisible(false)} > Fechar ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#f5f5f5', }, header: { backgroundColor: '#fff', padding: 20, borderBottomWidth: 1, borderBottomColor: '#e0e0e0', }, title: { fontSize: 24, fontWeight: 'bold', color: PRIMARY_COLOR, }, totalBalance: { fontSize: 18, color: '#333', marginTop: 5, }, content: { padding: 20, }, accountCard: { backgroundColor: '#fff', borderRadius: 10, padding: 15, marginBottom: 15, shadowColor: '#000', shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.1, shadowRadius: 4, elevation: 3, }, accountName: { fontSize: 18, fontWeight: '600', color: '#333', }, accountBalance: { fontSize: 16, color: PRIMARY_COLOR, marginTop: 5, }, modalContainer: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: 'rgba(0,0,0,0.5)', }, modalContent: { backgroundColor: '#fff', borderRadius: 10, padding: 20, width: '80%', alignItems: 'center', }, modalTitle: { fontSize: 20, fontWeight: 'bold', marginBottom: 15, color: PRIMARY_COLOR, }, modalText: { fontSize: 16, marginBottom: 10, color: '#333', }, modalButton: { backgroundColor: PRIMARY_COLOR, borderRadius: 5, padding: 10, marginTop: 15, width: '100%', alignItems: 'center', }, modalButtonText: { color: '#fff', fontWeight: 'bold', }, });

React Native ContasApp App Preview

Project Screens for ContasApp App