diff --git a/src/config/firebase.ts b/src/config/firebase.ts index 8df2b39..58580de 100644 --- a/src/config/firebase.ts +++ b/src/config/firebase.ts @@ -20,6 +20,7 @@ const firebaseConfig = { const app = initializeApp(firebaseConfig); // Services Firebase +// Note: AsyncStorage est géré automatiquement par Firebase pour React Native export const auth = getAuth(app); export const db = getFirestore(app); export const storage = getStorage(app); diff --git a/src/navigation/AppNavigator.tsx b/src/navigation/AppNavigator.tsx index ecbfe29..bac12e6 100644 --- a/src/navigation/AppNavigator.tsx +++ b/src/navigation/AppNavigator.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { NavigationContainer } from '@react-navigation/native'; import { createStackNavigator } from '@react-navigation/stack'; import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; -import { ActivityIndicator, View, StyleSheet } from 'react-native'; +import { ActivityIndicator, View, StyleSheet, Text } from 'react-native'; import { useAuth } from '../hooks/useAuth'; import { LoginScreen } from '../screens/LoginScreen'; @@ -25,16 +25,24 @@ const MainTabs = () => { tabBarActiveTintColor: '#4A90E2', tabBarInactiveTintColor: '#999', tabBarStyle: { - backgroundColor: '#FFF', - borderTopWidth: 1, - borderTopColor: '#E0E0E0', - paddingBottom: 8, - paddingTop: 8, - height: 60 + position: 'absolute', + backgroundColor: 'rgba(255, 255, 255, 0.95)', + borderTopWidth: 0, + elevation: 0, + shadowColor: '#000', + shadowOffset: { width: 0, height: -2 }, + shadowOpacity: 0.1, + shadowRadius: 8, + paddingBottom: 34, // Espace pour la barre iOS + paddingTop: 12, + height: 90, // Plus haute + borderTopLeftRadius: 20, + borderTopRightRadius: 20 }, tabBarLabelStyle: { - fontSize: 12, - fontWeight: '600' + fontSize: 11, + fontWeight: '600', + marginTop: 4 } }} > @@ -75,9 +83,9 @@ const MainTabs = () => { }; const TabIcon = ({ icon, color }: { icon: string; color: string }) => ( - - {icon} - + + {icon} + ); export const AppNavigator = () => { diff --git a/src/screens/DashboardScreen.tsx b/src/screens/DashboardScreen.tsx index bd87424..a355deb 100644 --- a/src/screens/DashboardScreen.tsx +++ b/src/screens/DashboardScreen.tsx @@ -75,6 +75,7 @@ export const DashboardScreen = ({ navigation }: any) => { return ( } > @@ -140,14 +141,14 @@ export const DashboardScreen = ({ navigation }: any) => { navigation.navigate('Transactions', { type: 'expense' })} + onPress={() => navigation.navigate('Transactions', { type: 'expense', openModal: true })} > Dépense navigation.navigate('Transactions', { type: 'income' })} + onPress={() => navigation.navigate('Transactions', { type: 'income', openModal: true })} > Revenu @@ -162,6 +163,9 @@ const styles = StyleSheet.create({ flex: 1, backgroundColor: '#F8F9FA' }, + scrollContent: { + paddingBottom: 100 // Espace pour la tab bar + }, header: { flexDirection: 'row', justifyContent: 'space-between', diff --git a/src/screens/SubscriptionScreen.tsx b/src/screens/SubscriptionScreen.tsx index efff19d..d26e2db 100644 --- a/src/screens/SubscriptionScreen.tsx +++ b/src/screens/SubscriptionScreen.tsx @@ -223,7 +223,16 @@ export const SubscriptionScreen = () => { label="Montant (€)" placeholder="0.00" value={amount} - onChangeText={setAmount} + onChangeText={(text) => { + // Permettre uniquement les chiffres et un point décimal + const cleaned = text.replace(/[^0-9.]/g, ''); + // Empêcher plusieurs points + const parts = cleaned.split('.'); + if (parts.length > 2) return; + // Limiter à 2 décimales + if (parts[1] && parts[1].length > 2) return; + setAmount(cleaned); + }} keyboardType="decimal-pad" /> diff --git a/src/screens/TransactionScreen.tsx b/src/screens/TransactionScreen.tsx index 08048be..17453f5 100644 --- a/src/screens/TransactionScreen.tsx +++ b/src/screens/TransactionScreen.tsx @@ -17,7 +17,7 @@ import { TransactionCard } from '../components/TransactionCard'; import { InputText } from '../components/InputText'; import { Button } from '../components/Button'; -export const TransactionScreen = ({ route }: any) => { +export const TransactionScreen = ({ route, navigation }: any) => { const { user } = useAuth(); const [transactions, setTransactions] = useState([]); const [categories, setCategories] = useState([]); @@ -48,6 +48,18 @@ export const TransactionScreen = ({ route }: any) => { return () => unsubscribe(); }, [user]); + // Ouvrir le modal automatiquement si on vient du Dashboard + useEffect(() => { + if (route?.params?.openModal) { + setModalVisible(true); + if (route.params.type) { + setType(route.params.type); + } + // Réinitialiser le paramètre + navigation.setParams({ openModal: false }); + } + }, [route?.params]); + const loadCategories = async () => { if (!user) return; @@ -218,7 +230,16 @@ export const TransactionScreen = ({ route }: any) => { label="Montant (€)" placeholder="0.00" value={amount} - onChangeText={setAmount} + onChangeText={(text) => { + // Permettre uniquement les chiffres et un point décimal + const cleaned = text.replace(/[^0-9.]/g, ''); + // Empêcher plusieurs points + const parts = cleaned.split('.'); + if (parts.length > 2) return; + // Limiter à 2 décimales + if (parts[1] && parts[1].length > 2) return; + setAmount(cleaned); + }} keyboardType="decimal-pad" /> @@ -356,7 +377,8 @@ const styles = StyleSheet.create({ alignItems: 'center' }, typeButtonActive: { - borderWidth: 2 + borderWidth: 3, + backgroundColor: '#F0F7FF' }, expenseButton: { borderColor: '#FF6B6B' @@ -367,10 +389,11 @@ const styles = StyleSheet.create({ typeButtonText: { fontSize: 16, fontWeight: '600', - color: '#666' + color: '#999' }, typeButtonTextActive: { - color: '#333' + color: '#333', + fontWeight: '700' }, label: { fontSize: 14, @@ -396,7 +419,13 @@ const styles = StyleSheet.create({ }, categoryItemActive: { backgroundColor: '#FFF', - borderWidth: 2 + borderWidth: 3, + transform: [{ scale: 1.05 }], + shadowColor: '#000', + shadowOffset: { width: 0, height: 2 }, + shadowOpacity: 0.2, + shadowRadius: 4, + elevation: 4 }, categoryIcon: { fontSize: 28, @@ -405,6 +434,7 @@ const styles = StyleSheet.create({ categoryName: { fontSize: 11, color: '#666', + fontWeight: '600', textAlign: 'center' }, submitButton: {