diff options
Diffstat (limited to 'src')
29 files changed, 3930 insertions, 0 deletions
diff --git a/src/app/(app)/(tabs)/_layout.tsx b/src/app/(app)/(tabs)/_layout.tsx new file mode 100644 index 0000000..5033232 --- /dev/null +++ b/src/app/(app)/(tabs)/_layout.tsx @@ -0,0 +1,169 @@ +import React from 'react'; +import { Platform, StyleSheet, TouchableOpacity, View } from 'react-native'; +import { Tabs } from 'expo-router'; +import { BlurView } from 'expo-blur'; +import { Feather } from '@expo/vector-icons'; +import Animated, { + useAnimatedStyle, + withSpring, + withTiming, +} from 'react-native-reanimated'; +import * as Haptics from 'expo-haptics'; +import { Colors, Spacing } from '@/constants/theme'; + +function TabBarIcon({ + name, + isFocused, +}: { + name: keyof typeof Feather.glyphMap; + isFocused: boolean; +}) { + const animatedIconStyle = useAnimatedStyle(() => { + return { + transform: [ + { scale: withSpring(isFocused ? 1.15 : 1, { damping: 12, stiffness: 300 }) }, + ], + }; + }); + + const animatedIndicatorStyle = useAnimatedStyle(() => { + return { + opacity: withTiming(isFocused ? 1 : 0, { duration: 200 }), + transform: [ + { scale: withSpring(isFocused ? 1 : 0.5, { damping: 15, stiffness: 300 }) }, + ], + }; + }); + + return ( + <View style={styles.iconContainer}> + <Animated.View style={animatedIconStyle}> + <Feather + name={name} + size={22} + color={isFocused ? Colors.primaryLight : Colors.textMuted} + /> + </Animated.View> + <Animated.View style={[styles.indicator, animatedIndicatorStyle]} /> + </View> + ); +} + +function CustomTabBar({ state, descriptors, navigation }: any) { + return ( + <View style={styles.tabBarContainer}> + <BlurView + intensity={Platform.OS === 'ios' ? 80 : 100} + tint="dark" + style={styles.blurView} + > + {state.routes.map((route: any, index: number) => { + const { options } = descriptors[route.key]; + const isFocused = state.index === index; + + const onPress = () => { + const event = navigation.emit({ + type: 'tabPress', + target: route.key, + canPreventDefault: true, + }); + + if (!isFocused && !event.defaultPrevented) { + Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light); + navigation.navigate(route.name); + } + }; + + let iconName: keyof typeof Feather.glyphMap = 'home'; + if (route.name === 'index') iconName = 'pie-chart'; + else if (route.name === 'salary') iconName = 'dollar-sign'; + else if (route.name === 'recurring') iconName = 'repeat'; + else if (route.name === 'expenses') iconName = 'plus-square'; + + return ( + <TouchableOpacity + key={route.key} + accessibilityRole="button" + accessibilityState={isFocused ? { selected: true } : {}} + accessibilityLabel={options.tabBarAccessibilityLabel} + onPress={onPress} + style={styles.tabItem} + activeOpacity={1} + > + <TabBarIcon name={iconName} isFocused={isFocused} /> + </TouchableOpacity> + ); + })} + </BlurView> + </View> + ); +} + +export default function TabsLayout() { + return ( + <Tabs + tabBar={(props) => <CustomTabBar {...props} />} + screenOptions={{ + headerShown: false, + }} + > + <Tabs.Screen name="index" options={{ title: 'Dashboard' }} /> + <Tabs.Screen name="salary" options={{ title: 'Salário' }} /> + <Tabs.Screen name="recurring" options={{ title: 'Gastos Fixos' }} /> + <Tabs.Screen name="expenses" options={{ title: 'Gastos do Mês' }} /> + </Tabs> + ); +} + +const styles = StyleSheet.create({ + tabBarContainer: { + position: 'absolute', + bottom: Platform.OS === 'ios' ? 30 : 20, + left: 24, + right: 24, + borderRadius: 32, + ...Platform.select({ + ios: { + shadowColor: '#000', + shadowOffset: { width: 0, height: 8 }, + shadowOpacity: 0.5, + shadowRadius: 16, + }, + android: { + elevation: 10, + }, + }), + }, + blurView: { + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'space-around', + borderRadius: 32, + backgroundColor: 'rgba(22, 27, 34, 0.75)', + borderWidth: 1, + borderColor: 'rgba(255, 255, 255, 0.08)', + overflow: 'hidden', + height: 64, + paddingHorizontal: Spacing.sm, + }, + tabItem: { + flex: 1, + alignItems: 'center', + justifyContent: 'center', + height: '100%', + }, + iconContainer: { + alignItems: 'center', + justifyContent: 'center', + width: 44, + height: 44, + }, + indicator: { + position: 'absolute', + bottom: -2, + width: 4, + height: 4, + borderRadius: 2, + backgroundColor: Colors.primaryLight, + }, +}); diff --git a/src/app/(app)/(tabs)/expenses.tsx b/src/app/(app)/(tabs)/expenses.tsx new file mode 100644 index 0000000..c313dc6 --- /dev/null +++ b/src/app/(app)/(tabs)/expenses.tsx @@ -0,0 +1,2 @@ +import OneTimeExpensesScreen from '@/screens/one-time-expenses-screen'; +export default OneTimeExpensesScreen; diff --git a/src/app/(app)/(tabs)/index.tsx b/src/app/(app)/(tabs)/index.tsx new file mode 100644 index 0000000..73bede0 --- /dev/null +++ b/src/app/(app)/(tabs)/index.tsx @@ -0,0 +1,2 @@ +import DashboardScreen from '@/screens/dashboard-screen'; +export default DashboardScreen; diff --git a/src/app/(app)/(tabs)/recurring.tsx b/src/app/(app)/(tabs)/recurring.tsx new file mode 100644 index 0000000..c5340ed --- /dev/null +++ b/src/app/(app)/(tabs)/recurring.tsx @@ -0,0 +1,2 @@ +import RecurringExpensesScreen from '@/screens/recurring-expenses-screen'; +export default RecurringExpensesScreen; diff --git a/src/app/(app)/(tabs)/salary.tsx b/src/app/(app)/(tabs)/salary.tsx new file mode 100644 index 0000000..1d30bb1 --- /dev/null +++ b/src/app/(app)/(tabs)/salary.tsx @@ -0,0 +1,2 @@ +import SalaryScreen from '@/screens/salary-screen'; +export default SalaryScreen; diff --git a/src/app/(app)/_layout.tsx b/src/app/(app)/_layout.tsx new file mode 100644 index 0000000..6099274 --- /dev/null +++ b/src/app/(app)/_layout.tsx @@ -0,0 +1,21 @@ +import { Colors } from "@/constants/theme"; +import { useAuth } from "@/contexts/AuthContext"; +import { Redirect, Slot } from "expo-router"; +import { ActivityIndicator, View } from "react-native"; + +export default function AppLayout() { + const { user, isLoading } = useAuth(); + + if (isLoading) { + return ( + <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: Colors.background }}> + <ActivityIndicator size="large" color={Colors.primary} /> + </View> + ); + } + + if (!user) + return <Redirect href="/login" />; + + return <Slot />; +}
\ No newline at end of file diff --git a/src/app/_layout.tsx b/src/app/_layout.tsx new file mode 100644 index 0000000..fe9f265 --- /dev/null +++ b/src/app/_layout.tsx @@ -0,0 +1,54 @@ +import { SplashScreen, Stack } from 'expo-router'; +import { useState, useEffect } from 'react'; +import { StatusBar } from 'expo-status-bar'; +import { SafeAreaProvider } from 'react-native-safe-area-context'; +import { useAppFonts } from '@/hooks/use-app-hooks'; +import { AuthProvider, useAuth } from '@/contexts/AuthContext'; +import { Colors } from '@/constants/theme'; + +import { AnimatedSplashScreen } from '@/components/animated-splash-screen'; +import { View } from 'react-native'; + +SplashScreen.preventAutoHideAsync(); + +function RootContent() { + const { isLoading } = useAuth(); + const { fontsLoaded, fontsError } = useAppFonts(); + const [splashFinished, setSplashFinished] = useState(false); + + const isAppReady = !isLoading; + + useEffect(() => { + if (fontsLoaded || fontsError) { + SplashScreen.hideAsync(); + } + }, [fontsLoaded, fontsError]); + + if (!fontsLoaded && !fontsError) + return null; + + return ( + <View style={{ flex: 1, backgroundColor: Colors.background }}> + <Stack screenOptions={{ headerShown: false, contentStyle: { backgroundColor: Colors.background } }}> + <Stack.Screen name="(app)" /> + <Stack.Screen name="login" /> + <Stack.Screen name="register" /> + </Stack> + + {!splashFinished && ( + <AnimatedSplashScreen isAppReady={isAppReady} onAnimationComplete={() => setSplashFinished(true)} /> + )} + </View> + ) +} + +export default function RootLayout() { + return ( + <SafeAreaProvider> + <StatusBar style="light" /> + <AuthProvider> + <RootContent /> + </AuthProvider> + </SafeAreaProvider> + ) +} diff --git a/src/app/biometrics.tsx b/src/app/biometrics.tsx new file mode 100644 index 0000000..500adc9 --- /dev/null +++ b/src/app/biometrics.tsx @@ -0,0 +1,120 @@ +import React from 'react'; +import { View, Text, StyleSheet } from 'react-native'; +import { useRouter } from 'expo-router'; +import * as SecureStore from 'expo-secure-store'; +import Animated, { FadeInDown, FadeInUp } from 'react-native-reanimated'; +import { Feather } from '@expo/vector-icons'; +import { useSafeAreaInsets } from 'react-native-safe-area-context'; +import { Button } from '@/components/ui/button'; +import { Colors, Spacing, Typography, Radius } from '@/constants/theme'; +import { BlurView } from 'expo-blur'; + +export default function BiometricsScreen() { + const router = useRouter(); + const insets = useSafeAreaInsets(); + + async function handleAccept() { + await SecureStore.setItemAsync('yaba_use_biometrics', 'true'); + router.replace('/'); + } + + function handleDecline() { + router.replace('/'); + } + + return ( + <View style={[styles.container, { paddingTop: insets.top, paddingBottom: insets.bottom }]}> + + <View style={styles.content}> + <Animated.View entering={FadeInDown.duration(600).delay(100)} style={styles.iconContainer}> + <View style={styles.iconBackground}> + <Feather size={64} color={Colors.primary} /> + </View> + </Animated.View> + + <Animated.View entering={FadeInUp.duration(600).delay(200)} style={styles.textContainer}> + <Text style={styles.title}>Login por Biometria</Text> + <Text style={styles.subtitle}> + Deseja utilizar sua biometria (Face ID / Digital) para acessar o app mais rapidamente nas próximas vezes? + </Text> + </Animated.View> + </View> + + <Animated.View entering={FadeInUp.duration(600).delay(400)} style={styles.footer}> + <BlurView intensity={80} tint="dark" style={styles.blurContainer}> + <Button + label="Sim, usar biometria" + onPress={handleAccept} + fullWidth + style={styles.primaryButton} + /> + <Button + label="Não, manter acesso livre" + variant="ghost" + onPress={handleDecline} + fullWidth + /> + </BlurView> + </Animated.View> + </View> + ); +} + +const styles = StyleSheet.create({ + container: { + flex: 1, + backgroundColor: Colors.background, + justifyContent: 'space-between', + }, + content: { + flex: 1, + justifyContent: 'center', + alignItems: 'center', + paddingHorizontal: Spacing.xl, + gap: Spacing.xxl, + }, + iconContainer: { + alignItems: 'center', + }, + iconBackground: { + width: 120, + height: 120, + borderRadius: 60, + backgroundColor: 'rgba(238, 250, 13, 0.1)', + alignItems: 'center', + justifyContent: 'center', + borderWidth: 1, + borderColor: 'rgba(238, 250, 13, 0.2)', + }, + textContainer: { + alignItems: 'center', + gap: Spacing.sm, + }, + title: { + ...Typography.h1, + color: Colors.textPrimary, + textAlign: 'center', + }, + subtitle: { + ...Typography.bodyLarge, + color: Colors.textSecondary, + textAlign: 'center', + lineHeight: 24, + }, + footer: { + paddingHorizontal: Spacing.lg, + paddingBottom: Spacing.lg, + }, + blurContainer: { + padding: Spacing.lg, + borderRadius: Radius.lg, + gap: Spacing.md, + backgroundColor: 'rgba(22, 27, 34, 0.6)', + borderWidth: 1, + borderColor: 'rgba(255, 255, 255, 0.08)', + overflow: 'hidden', + }, + primaryButton: { + height: 56, + } +}); diff --git a/src/app/login.tsx b/src/app/login.tsx new file mode 100644 index 0000000..15ec3be --- /dev/null +++ b/src/app/login.tsx @@ -0,0 +1,144 @@ +import { useAuth } from "@/contexts/AuthContext"; +import { Link, useRouter } from "expo-router"; +import { useState } from "react"; +import { + Alert, + KeyboardAvoidingView, + Platform, + StyleSheet, + Text, + View, +} from "react-native"; +import { useSafeAreaInsets } from "react-native-safe-area-context"; +import * as LocalAuthentication from "expo-local-authentication"; +import Animated, { FadeInDown, FadeInUp } from "react-native-reanimated"; +import { Colors, Spacing, Typography } from "@/constants/theme"; +import { Input } from "@/components/ui/input"; +import { Button } from "@/components/ui/button"; + +export default function LoginScreen() { + const insets = useSafeAreaInsets(); + const router = useRouter(); + const { login } = useAuth(); + + const [email, setEmail] = useState(""); + const [password, setPassword] = useState(""); + const [isLoading, setIsLoading] = useState(false); + + async function handleLogin() { + if (!email || !password) { + Alert.alert("Erro", "Por favor, preencha todos os campos."); + return; + } + + try { + setIsLoading(true); + await login({ email: email.trim(), password }); + + const hasHardware = await LocalAuthentication.hasHardwareAsync(); + const isEnrolled = await LocalAuthentication.isEnrolledAsync(); + + if (hasHardware && isEnrolled) { + router.replace("/biometrics"); + } else { + router.replace("/"); + } + } catch (error) { + Alert.alert("Erro", "Falha ao fazer login. Verifique suas credenciais e tente novamente."); + } finally { + setIsLoading(false); + } + } + + return ( + <KeyboardAvoidingView style={styles.container} behavior={Platform.OS === "ios" ? "padding" : undefined}> + <View style={[styles.content, { paddingTop: insets.top + Spacing.xxl }]}> + <Animated.View entering={FadeInUp.duration(600)} style={styles.header}> + <Text style={styles.title}>YABA</Text> + <Text style={styles.subtitle}>O seu dinheiro, no seu controle.</Text> + </Animated.View> + + <Animated.View entering={FadeInDown.delay(200).duration(600)} style={styles.form}> + <Input + id="login-email" + label="E-mail" + placeholder="seu@email.com" + value={email} + onChangeText={setEmail} + keyboardType="email-address" + autoCapitalize="none" + /> + <Input + id="login-password" + label="Senha" + placeholder="********" + value={password} + onChangeText={setPassword} + secureTextEntry + /> + + <Button + id="login-button" + label="Entrar" + fullWidth + onPress={handleLogin} + loading={isLoading} + disabled={isLoading} + /> + + <View style={styles.footer}> + <Text style={styles.footerText}>Não tem uma conta? </Text> + <Link href="/register" asChild> + <Text style={styles.linkText}>Cadastre-se</Text> + </Link> + </View> + </Animated.View> + </View> + </KeyboardAvoidingView> + ); +} + +const styles = StyleSheet.create({ + container: { + flex: 1, + backgroundColor: Colors.background, + }, + content: { + flex: 1, + padding: Spacing.xl, + justifyContent: "center", + }, + header: { + alignItems: "center", + marginBottom: Spacing.xl, + }, + title: { + ...Typography.h1, + fontSize: 48, + color: Colors.primaryLight, + letterSpacing: 2, + fontFamily: "DMSans_700Bold", + }, + subtitle: { + ...Typography.body, + color: Colors.textSecondary, + marginTop: Spacing.xs, + }, + form: { + gap: Spacing.lg, + }, + footer: { + flexDirection: "row", + justifyContent: "center", + marginTop: Spacing.xl, + }, + footerText: { + ...Typography.body, + color: Colors.textSecondary, + }, + linkText: { + ...Typography.body, + color: Colors.primaryLight, + fontFamily: "DMSans_700Bold", + }, +});
\ No newline at end of file diff --git a/src/app/register.tsx b/src/app/register.tsx new file mode 100644 index 0000000..aac588d --- /dev/null +++ b/src/app/register.tsx @@ -0,0 +1,142 @@ +import React, { useState } from 'react'; +import { View, StyleSheet, Text, KeyboardAvoidingView, Platform, Alert, ScrollView } from 'react-native'; +import { Link, useRouter } from 'expo-router'; +import { useSafeAreaInsets } from 'react-native-safe-area-context'; +import Animated, { FadeInDown, FadeInUp } from 'react-native-reanimated'; +import * as LocalAuthentication from 'expo-local-authentication'; +import * as SecureStore from 'expo-secure-store'; +import { Button } from '@/components/ui/button'; +import { Input } from '@/components/ui/input'; +import { Colors, Spacing, Typography } from '@/constants/theme'; +import { useAuth } from '@/contexts/AuthContext'; + +export default function RegisterScreen() { + const insets = useSafeAreaInsets(); + const router = useRouter(); + const { register } = useAuth(); + + const [name, setName] = useState(''); + const [email, setEmail] = useState(''); + const [password, setPassword] = useState(''); + const [isLoading, setIsLoading] = useState(false); + + async function handleRegister() { + if (!name || !email || !password) { + Alert.alert('Erro', 'Preencha todos os campos.'); + return; + } + try { + setIsLoading(true); + await register({ name: name.trim(), email: email.trim(), password }); + + const hasHardware = await LocalAuthentication.hasHardwareAsync(); + const isEnrolled = await LocalAuthentication.isEnrolledAsync(); + + if (hasHardware && isEnrolled) { + router.replace('/biometrics'); + } else { + router.replace('/'); + } + } catch (err: any) { + Alert.alert('Erro no cadastro', 'Verifique seus dados.'); + setIsLoading(false); + } + } + + return ( + <KeyboardAvoidingView style={styles.container} behavior={Platform.OS === 'ios' ? 'padding' : undefined}> + <ScrollView contentContainerStyle={[styles.content, { paddingTop: insets.top + Spacing.xl }]}> + <Animated.View entering={FadeInUp.duration(600)} style={styles.header}> + <Text style={styles.title}>Criar Conta</Text> + <Text style={styles.subtitle}>Junte-se ao YABA e organize sua vida financeira.</Text> + </Animated.View> + + <Animated.View entering={FadeInDown.delay(200).duration(600)} style={styles.form}> + <Input + id="register-name" + label="Nome" + placeholder="Como quer ser chamado?" + value={name} + onChangeText={setName} + /> + <Input + id="register-email" + label="E-mail" + placeholder="seu@email.com" + value={email} + onChangeText={setEmail} + keyboardType="email-address" + autoCapitalize="none" + /> + <Input + id="register-password" + label="Senha" + placeholder="No mínimo 6 caracteres" + value={password} + onChangeText={setPassword} + secureTextEntry + /> + + <Button + id="register-button" + label="Cadastrar" + fullWidth + onPress={handleRegister} + loading={isLoading} + disabled={isLoading} + /> + + <View style={styles.footer}> + <Text style={styles.footerText}>Já tem uma conta? </Text> + <Link href="/login" asChild> + <Text style={styles.linkText}>Faça login</Text> + </Link> + </View> + </Animated.View> + </ScrollView> + </KeyboardAvoidingView> + ); +} + +const styles = StyleSheet.create({ + container: { + flex: 1, + backgroundColor: Colors.background, + }, + content: { + flexGrow: 1, + padding: Spacing.xl, + justifyContent: 'center', + }, + header: { + alignItems: 'center', + marginBottom: Spacing.xl, + }, + title: { + ...Typography.h1, + color: Colors.textPrimary, + }, + subtitle: { + ...Typography.body, + color: Colors.textSecondary, + marginTop: Spacing.xs, + textAlign: 'center', + }, + form: { + gap: Spacing.lg, + }, + footer: { + flexDirection: 'row', + justifyContent: 'center', + marginTop: Spacing.xl, + }, + footerText: { + ...Typography.body, + color: Colors.textSecondary, + }, + linkText: { + ...Typography.body, + color: Colors.primaryLight, + fontFamily: 'DMSans_700Bold', + }, +}); diff --git a/src/components/animated-splash-screen.tsx b/src/components/animated-splash-screen.tsx new file mode 100644 index 0000000..7ecfdef --- /dev/null +++ b/src/components/animated-splash-screen.tsx @@ -0,0 +1,103 @@ +import React, { useEffect } from 'react'; +import { StyleSheet, View, Text } from 'react-native'; +import Animated, { + useAnimatedStyle, + useSharedValue, + withTiming, + withSpring, + Easing, + runOnJS, + withDelay, +} from 'react-native-reanimated'; +import { Colors } from '@/constants/theme'; +import { LinearGradient } from 'expo-linear-gradient'; + +interface Props { + isAppReady: boolean; + onAnimationComplete: () => void; +} + +export function AnimatedSplashScreen({ isAppReady, onAnimationComplete }: Props) { + const opacity = useSharedValue(1); + const scale = useSharedValue(1); + const textOpacity = useSharedValue(0); + const textTranslateY = useSharedValue(20); + const logoScale = useSharedValue(0.8); + + useEffect(() => { + textOpacity.value = withTiming(1, { duration: 1000 }); + textTranslateY.value = withSpring(0, { damping: 14, stiffness: 100 }); + logoScale.value = withSpring(1, { damping: 10, stiffness: 100 }); + }, []); + + useEffect(() => { + if (isAppReady) { + opacity.value = withDelay( + 600, + withTiming(0, { duration: 700, easing: Easing.inOut(Easing.ease) }, (finished) => { + if (finished) { + runOnJS(onAnimationComplete)(); + } + }) + ); + + scale.value = withDelay( + 600, + withTiming(1.3, { duration: 700, easing: Easing.inOut(Easing.ease) }) + ); + } + }, [isAppReady]); + + const animatedContainerStyle = useAnimatedStyle(() => ({ + opacity: opacity.value, + transform: [{ scale: scale.value }], + })); + + const animatedTextStyle = useAnimatedStyle(() => ({ + opacity: textOpacity.value, + transform: [ + { translateY: textTranslateY.value }, + { scale: logoScale.value } + ], + })); + + return ( + <Animated.View style={[styles.container, animatedContainerStyle]}> + <LinearGradient + colors={['#0D2818', Colors.background]} + style={StyleSheet.absoluteFill} + start={{ x: 0, y: 0 }} + end={{ x: 0, y: 1 }} + /> + <Animated.View style={animatedTextStyle}> + <Text style={styles.logoText}>YABA</Text> + <Text style={styles.subText}>Finanças Pessoais</Text> + </Animated.View> + </Animated.View> + ); +} + +const styles = StyleSheet.create({ + container: { + ...StyleSheet.absoluteFill, + justifyContent: 'center', + alignItems: 'center', + zIndex: 9999, + }, + logoText: { + fontFamily: 'Outfit_700Bold', + fontSize: 72, + color: Colors.white, + letterSpacing: -2, + textAlign: 'center', + }, + subText: { + fontFamily: 'DMSans_500Medium', + fontSize: 16, + color: Colors.primaryLight, + letterSpacing: 2, + textTransform: 'uppercase', + textAlign: 'center', + marginTop: 8, + } +}); diff --git a/src/components/expense-row.tsx b/src/components/expense-row.tsx new file mode 100644 index 0000000..0f58c78 --- /dev/null +++ b/src/components/expense-row.tsx @@ -0,0 +1,213 @@ +import React from 'react'; +import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'; +import Animated, { FadeInDown, LinearTransition } from 'react-native-reanimated'; +import { Colors, Radius, Spacing, Typography } from '@/constants/theme'; +import type { OneTimeExpense, RecurringExpense } from '@/types'; + +const CATEGORY_EMOJI: Record<string, string> = { + moradia: '🏠', + alimentação: '🍽️', + transporte: '🚗', + saúde: '💊', + educação: '📚', + lazer: '🎬', + serviços: '⚙️', + outros: '📦', +}; + +interface ExpenseRowProps { + name: string; + amount: number; + category: string; + subtitle?: string; + index?: number; + onPress?: () => void; + rightElement?: React.ReactNode; + type?: 'expense' | 'income'; +} + +export function ExpenseRow({ + name, + amount, + category, + subtitle, + index = 0, + onPress, + rightElement, + type = 'expense', +}: ExpenseRowProps) { + const emoji = CATEGORY_EMOJI[category] ?? '📦'; + const prefix = type === 'income' ? '+ ' : '- '; + const amountColor = type === 'income' ? Colors.positive : Colors.negative; + + const formattedAmount = amount.toLocaleString('pt-BR', { + style: 'currency', + currency: 'BRL', + minimumFractionDigits: 2, + }); + + return ( + <Animated.View + entering={FadeInDown.delay(index * 60).springify()} + layout={LinearTransition.springify()} + > + <TouchableOpacity + style={styles.row} + onPress={onPress} + activeOpacity={0.7} + disabled={!onPress} + accessibilityRole="button" + accessibilityLabel={`${name}, ${formattedAmount}`} + > + <View style={styles.iconBox}> + <Text style={styles.emoji}>{emoji}</Text> + </View> + + <View style={styles.info}> + <Text style={styles.name} numberOfLines={1}> + {name} + </Text> + {subtitle ? ( + <Text style={styles.subtitle} numberOfLines={1}> + {subtitle} + </Text> + ) : null} + </View> + + <View style={styles.right}> + <Text style={[styles.amount, { color: amountColor }]}> + {prefix}{formattedAmount} + </Text> + {rightElement} + </View> + </TouchableOpacity> + </Animated.View> + ); +} + +interface RecurringExpenseRowProps { + expense: RecurringExpense; + index?: number; + onToggle: () => void; + onPress: () => void; +} + +export function RecurringExpenseRow({ + expense, + index = 0, + onToggle, + onPress, +}: RecurringExpenseRowProps) { + return ( + <ExpenseRow + name={expense.name} + amount={expense.amount} + category={expense.category} + type={expense.type} + subtitle={expense.due_day ? `Vence dia ${expense.due_day}` : undefined} + index={index} + onPress={onPress} + rightElement={ + <TouchableOpacity + style={[ + styles.toggleBadge, + expense.is_active ? styles.toggleActive : styles.toggleInactive, + ]} + onPress={onToggle} + hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }} + accessibilityLabel={expense.is_active ? 'Desativar gasto' : 'Ativar gasto'} + accessibilityRole="switch" + > + <Text style={styles.toggleText}> + {expense.is_active ? 'Ativo' : 'Pausado'} + </Text> + </TouchableOpacity> + } + /> + ); +} + +interface OneTimeExpenseRowProps { + expense: OneTimeExpense; + index?: number; + onPress: () => void; +} + +export function OneTimeExpenseRow({ + expense, + index = 0, + onPress, +}: OneTimeExpenseRowProps) { + const date = new Date(expense.expense_date + 'T12:00:00'); + const formattedDate = date.toLocaleDateString('pt-BR', { + day: '2-digit', + month: 'short', + }); + + return ( + <ExpenseRow + name={expense.name} + amount={expense.amount} + category={expense.category} + subtitle={formattedDate} + index={index} + onPress={onPress} + type={expense.type} + /> + ); +} + +const styles = StyleSheet.create({ + row: { + flexDirection: 'row', + alignItems: 'center', + paddingVertical: Spacing.md, + gap: Spacing.md, + }, + iconBox: { + width: 44, + height: 44, + borderRadius: Radius.md, + backgroundColor: Colors.surfaceElevated, + alignItems: 'center', + justifyContent: 'center', + }, + emoji: { + fontSize: 22, + }, + info: { + flex: 1, + gap: 2, + }, + name: { + ...Typography.bodyLarge, + color: Colors.textPrimary, + }, + subtitle: { + ...Typography.caption, + color: Colors.textSecondary, + }, + right: { + alignItems: 'flex-end', + gap: Spacing.xs, + }, + amount: { + ...Typography.bodyLarge, + fontFamily: 'DMSans_600SemiBold', + }, + toggleBadge: { + paddingHorizontal: Spacing.sm, + paddingVertical: 2, + borderRadius: Radius.full, + }, + toggleActive: { + backgroundColor: `${Colors.positive}22`, + }, + toggleInactive: { + backgroundColor: `${Colors.textMuted}22`, + }, + toggleText: { + ...Typography.caption, + color: Colors.textSecondary, + }, +}); diff --git a/src/components/ui/action-modal.tsx b/src/components/ui/action-modal.tsx new file mode 100644 index 0000000..a1d95be --- /dev/null +++ b/src/components/ui/action-modal.tsx @@ -0,0 +1,107 @@ +import React from 'react'; +import { Modal, StyleSheet, Text, TouchableOpacity, View } from 'react-native'; +import { BlurView } from 'expo-blur'; +import Animated, { FadeIn, FadeInDown, FadeOut, FadeOutDown } from 'react-native-reanimated'; +import { Colors, Radius, Spacing, Typography } from '@/constants/theme'; +import { Button } from './button'; + +interface ActionModalProps { + visible: boolean; + title: string; + message: string; + confirmText?: string; + cancelText?: string; + onConfirm: () => void; + onCancel: () => void; + isDestructive?: boolean; +} + +export function ActionModal({ + visible, + title, + message, + confirmText = 'Confirmar', + cancelText = 'Cancelar', + onConfirm, + onCancel, + isDestructive = false, +}: ActionModalProps) { + if (!visible) return null; + + return ( + <Modal visible={visible} transparent animationType="none" onRequestClose={onCancel}> + <Animated.View entering={FadeIn.duration(200)} exiting={FadeOut.duration(200)} style={styles.overlay}> + <TouchableOpacity style={styles.backdrop} activeOpacity={1} onPress={onCancel} /> + + <Animated.View entering={FadeInDown.duration(300).springify()} exiting={FadeOutDown.duration(200)} style={styles.modalContainer}> + <BlurView intensity={80} tint="dark" style={styles.blurView}> + <View style={styles.content}> + <Text style={styles.title}>{title}</Text> + <Text style={styles.message}>{message}</Text> + + <View style={styles.actions}> + <Button + label={cancelText} + variant="ghost" + onPress={onCancel} + style={styles.actionButton} + /> + <Button + label={confirmText} + variant={isDestructive ? 'danger' : 'primary'} + onPress={onConfirm} + style={styles.actionButton} + /> + </View> + </View> + </BlurView> + </Animated.View> + </Animated.View> + </Modal> + ); +} + +const styles = StyleSheet.create({ + overlay: { + flex: 1, + justifyContent: 'flex-end', + backgroundColor: 'rgba(0, 0, 0, 0.4)', + }, + backdrop: { + ...StyleSheet.absoluteFill, + }, + modalContainer: { + padding: Spacing.md, + paddingBottom: Spacing.xxl, + }, + blurView: { + borderRadius: Radius.lg, + overflow: 'hidden', + borderWidth: 1, + borderColor: 'rgba(255, 255, 255, 0.08)', + }, + content: { + padding: Spacing.xl, + gap: Spacing.md, + backgroundColor: 'rgba(22, 27, 34, 0.6)', + }, + title: { + ...Typography.h2, + color: Colors.textPrimary, + textAlign: 'center', + }, + message: { + ...Typography.body, + color: Colors.textSecondary, + textAlign: 'center', + lineHeight: 22, + }, + actions: { + flexDirection: 'row', + gap: Spacing.sm, + marginTop: Spacing.md, + }, + actionButton: { + flex: 1, + }, +}); diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx new file mode 100644 index 0000000..3486ff7 --- /dev/null +++ b/src/components/ui/button.tsx @@ -0,0 +1,141 @@ +import React from 'react'; +import { + ActivityIndicator, + StyleSheet, + Text, + TouchableOpacity, + type TouchableOpacityProps, + View, +} from 'react-native'; +import Animated, { + useAnimatedStyle, + useSharedValue, + withSpring, +} from 'react-native-reanimated'; +import { Colors, Radius, Spacing, Typography } from '@/constants/theme'; + +const AnimatedTouchable = Animated.createAnimatedComponent(TouchableOpacity); + +interface ButtonProps extends TouchableOpacityProps { + label: string; + variant?: 'primary' | 'secondary' | 'ghost' | 'danger'; + loading?: boolean; + fullWidth?: boolean; +} + +export function Button({ + label, + variant = 'primary', + loading = false, + fullWidth = false, + onPress, + disabled, + style, + ...rest +}: ButtonProps) { + const scale = useSharedValue(1); + + const animatedStyle = useAnimatedStyle(() => ({ + transform: [{ scale: scale.value }], + })); + + function handlePressIn() { + scale.value = withSpring(0.96, { damping: 15, stiffness: 400 }); + } + + function handlePressOut() { + scale.value = withSpring(1, { damping: 15, stiffness: 400 }); + } + + const containerStyle = [ + styles.base, + styles[variant], + fullWidth && styles.fullWidth, + (disabled || loading) && styles.disabled, + style, + ]; + + const textColor = + variant === 'secondary' || variant === 'ghost' + ? Colors.textPrimary + : Colors.white; + + return ( + <AnimatedTouchable + style={[animatedStyle, containerStyle]} + onPress={onPress} + onPressIn={handlePressIn} + onPressOut={handlePressOut} + disabled={disabled || loading} + activeOpacity={1} + {...rest} + > + {loading ? ( + <ActivityIndicator color={textColor} size="small" /> + ) : ( + <Text style={[styles.label, { color: textColor }]}>{label}</Text> + )} + </AnimatedTouchable> + ); +} + +interface IconButtonProps { + onPress: () => void; + children: React.ReactNode; + accessibilityLabel: string; +} + +export function IconButton({ onPress, children, accessibilityLabel }: IconButtonProps) { + return ( + <TouchableOpacity + style={styles.iconButton} + onPress={onPress} + hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }} + accessibilityLabel={accessibilityLabel} + accessibilityRole="button" + > + <View>{children}</View> + </TouchableOpacity> + ); +} + +const styles = StyleSheet.create({ + base: { + height: 52, + borderRadius: Radius.md, + alignItems: 'center', + justifyContent: 'center', + paddingHorizontal: Spacing.lg, + minWidth: 44, // touch target mínimo + }, + primary: { + backgroundColor: Colors.primary, + }, + secondary: { + backgroundColor: Colors.surfaceElevated, + borderWidth: 1, + borderColor: Colors.border, + }, + ghost: { + backgroundColor: Colors.transparent, + }, + danger: { + backgroundColor: Colors.negative, + }, + fullWidth: { + width: '100%', + }, + disabled: { + opacity: 0.5, + }, + label: { + ...Typography.bodyLarge, + fontFamily: 'DMSans_600SemiBold', + }, + iconButton: { + width: 44, + height: 44, + alignItems: 'center', + justifyContent: 'center', + }, +}); diff --git a/src/components/ui/expenses-chart.tsx b/src/components/ui/expenses-chart.tsx new file mode 100644 index 0000000..efd5dee --- /dev/null +++ b/src/components/ui/expenses-chart.tsx @@ -0,0 +1,187 @@ +import React from 'react'; +import { StyleSheet, Text, View } from 'react-native'; +import { PieChart } from 'react-native-gifted-charts'; +import { Colors, Radius, Spacing, Typography } from '@/constants/theme'; +import type { DashboardExpenseItem } from '@/types'; +import { Card, SectionLabel } from './primitives'; + +interface ExpensesChartProps { + recurring: DashboardExpenseItem[]; + oneTime: DashboardExpenseItem[]; +} + +const CATEGORY_COLORS: Record<string, string> = { + moradia: '#4C6EF5', + alimentação: '#FA5252', + transporte: '#FAB005', + saúde: '#12B886', + educação: '#BE4BDB', + lazer: '#FF922B', + serviços: '#228BE6', + outros: '#868E96', +}; + +const CATEGORY_LABELS: Record<string, string> = { + moradia: 'Moradia', + alimentação: 'Alimentação', + transporte: 'Transporte', + saúde: 'Saúde', + educação: 'Educação', + lazer: 'Lazer', + serviços: 'Serviços', + outros: 'Outros', +}; + +export function ExpensesChart({ recurring, oneTime }: ExpensesChartProps) { + const categoryTotals: Record<string, number> = {}; + + const allExpenses = [ + ...recurring.filter(e => e.is_active && e.type === 'expense'), + ...oneTime.filter(e => e.type === 'expense') + ]; + + if (allExpenses.length === 0) { + return ( + <Card style={styles.card}> + <SectionLabel text="Análise de Gastos" /> + <View style={styles.emptyContainer}> + <Text style={styles.emptyText}>Não há despesas para analisar neste mês.</Text> + </View> + </Card> + ); + } + + let totalExpenses = 0; + allExpenses.forEach(e => { + if (!categoryTotals[e.category]) { + categoryTotals[e.category] = 0; + } + categoryTotals[e.category] += e.amount; + totalExpenses += e.amount; + }); + + const pieData = Object.keys(categoryTotals) + .map(category => ({ + value: categoryTotals[category], + color: CATEGORY_COLORS[category] || CATEGORY_COLORS.outros, + label: CATEGORY_LABELS[category] || 'Outros', + percentage: ((categoryTotals[category] / totalExpenses) * 100).toFixed(0) + '%', + })) + .sort((a, b) => b.value - a.value); + + return ( + <Card style={styles.card}> + <SectionLabel text="Análise de Gastos" /> + + <View style={styles.chartRow}> + <View style={styles.chartWrapper}> + <PieChart + data={pieData} + donut + radius={70} + innerRadius={50} + innerCircleColor={Colors.surface} + centerLabelComponent={() => { + return ( + <View style={styles.centerLabel}> + <Text style={styles.centerLabelValue}> + {totalExpenses.toLocaleString('pt-BR', { + style: 'currency', + currency: 'BRL', + minimumFractionDigits: 0, + maximumFractionDigits: 0, + })} + </Text> + <Text style={styles.centerLabelText}>Total</Text> + </View> + ); + }} + /> + </View> + + <View style={styles.legendContainer}> + {pieData.map((item, index) => ( + <View key={index} style={styles.legendItem}> + <View style={[styles.legendDot, { backgroundColor: item.color }]} /> + <View style={styles.legendTextWrapper}> + <Text style={styles.legendLabel} numberOfLines={1}>{item.label}</Text> + <Text style={styles.legendValue}> + {item.value.toLocaleString('pt-BR', { + style: 'currency', + currency: 'BRL', + })} ({item.percentage}) + </Text> + </View> + </View> + ))} + </View> + </View> + </Card> + ); +} + +const styles = StyleSheet.create({ + card: { + gap: Spacing.md, + }, + emptyContainer: { + paddingVertical: Spacing.xl, + alignItems: 'center', + justifyContent: 'center', + }, + emptyText: { + ...Typography.body, + color: Colors.textMuted, + }, + chartRow: { + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'space-between', + }, + chartWrapper: { + alignItems: 'center', + justifyContent: 'center', + }, + centerLabel: { + alignItems: 'center', + justifyContent: 'center', + }, + centerLabelValue: { + ...Typography.body, + fontFamily: 'DMSans_700Bold', + color: Colors.textPrimary, + fontSize: 14, + }, + centerLabelText: { + ...Typography.caption, + color: Colors.textSecondary, + fontSize: 10, + }, + legendContainer: { + flex: 1, + marginLeft: Spacing.lg, + gap: Spacing.sm, + }, + legendItem: { + flexDirection: 'row', + alignItems: 'center', + }, + legendDot: { + width: 10, + height: 10, + borderRadius: 5, + marginRight: Spacing.xs, + }, + legendTextWrapper: { + flex: 1, + }, + legendLabel: { + ...Typography.caption, + color: Colors.textSecondary, + }, + legendValue: { + ...Typography.caption, + color: Colors.textPrimary, + fontFamily: 'DMSans_600SemiBold', + }, +}); diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx new file mode 100644 index 0000000..25728df --- /dev/null +++ b/src/components/ui/input.tsx @@ -0,0 +1,98 @@ +import React, { forwardRef, useState } from 'react'; +import { + StyleSheet, + Text, + TextInput, + type TextInputProps, + View, +} from 'react-native'; +import { Colors, Radius, Spacing, Typography } from '@/constants/theme'; + +interface InputProps extends TextInputProps { + label: string; + error?: string; + hint?: string; + prefix?: string; +} + +export const Input = forwardRef<TextInput, InputProps>(function Input( + { label, error, hint, prefix, style, ...rest }, + ref, +) { + const [focused, setFocused] = useState(false); + + return ( + <View style={styles.wrapper}> + <Text style={styles.label}>{label}</Text> + <View + style={[ + styles.inputRow, + focused && styles.inputRowFocused, + !!error && styles.inputRowError, + ]} + > + {prefix ? <Text style={styles.prefix}>{prefix}</Text> : null} + <TextInput + ref={ref} + style={[styles.input, style]} + placeholderTextColor={Colors.textMuted} + onFocus={() => setFocused(true)} + onBlur={() => setFocused(false)} + selectionColor={Colors.primaryLight} + {...rest} + /> + </View> + {error ? ( + <Text style={styles.error}>{error}</Text> + ) : hint ? ( + <Text style={styles.hint}>{hint}</Text> + ) : null} + </View> + ); +}); + +const styles = StyleSheet.create({ + wrapper: { + gap: Spacing.xs, + }, + label: { + ...Typography.caption, + color: Colors.textSecondary, + textTransform: 'uppercase', + letterSpacing: 1, + }, + inputRow: { + flexDirection: 'row', + alignItems: 'center', + backgroundColor: Colors.surfaceElevated, + borderRadius: Radius.md, + borderWidth: 1, + borderColor: Colors.border, + paddingHorizontal: Spacing.md, + height: 52, + }, + inputRowFocused: { + borderColor: Colors.primaryLight, + }, + inputRowError: { + borderColor: Colors.negative, + }, + prefix: { + ...Typography.bodyLarge, + color: Colors.textSecondary, + marginRight: Spacing.sm, + }, + input: { + flex: 1, + ...Typography.bodyLarge, + color: Colors.textPrimary, + }, + error: { + ...Typography.caption, + color: Colors.negative, + }, + hint: { + ...Typography.caption, + color: Colors.textMuted, + }, +}); diff --git a/src/components/ui/options-modal.tsx b/src/components/ui/options-modal.tsx new file mode 100644 index 0000000..8d5d984 --- /dev/null +++ b/src/components/ui/options-modal.tsx @@ -0,0 +1,137 @@ +import React from 'react'; +import { Modal, StyleSheet, Text, TouchableOpacity, View } from 'react-native'; +import { BlurView } from 'expo-blur'; +import Animated, { FadeIn, FadeInDown, FadeOut, FadeOutDown } from 'react-native-reanimated'; +import { Feather } from '@expo/vector-icons'; +import { Colors, Radius, Spacing, Typography } from '@/constants/theme'; + +export interface MenuOption { + label: string; + icon?: keyof typeof Feather.glyphMap; + destructive?: boolean; + onPress: () => void; +} + +interface OptionsModalProps { + visible: boolean; + title?: string; + options: MenuOption[]; + onClose: () => void; +} + +export function OptionsModal({ visible, title, options, onClose }: OptionsModalProps) { + if (!visible) return null; + + return ( + <Modal visible={visible} transparent animationType="none" onRequestClose={onClose}> + <Animated.View entering={FadeIn.duration(200)} exiting={FadeOut.duration(200)} style={styles.overlay}> + <TouchableOpacity style={styles.backdrop} activeOpacity={1} onPress={onClose} /> + + <Animated.View entering={FadeInDown.duration(300).springify()} exiting={FadeOutDown.duration(200)} style={styles.modalContainer}> + <BlurView intensity={80} tint="dark" style={styles.blurView}> + <View style={styles.content}> + {title && <Text style={styles.title}>{title}</Text>} + + <View style={styles.optionsList}> + {options.map((option, index) => ( + <TouchableOpacity + key={index} + style={[styles.optionButton, index < options.length - 1 && styles.optionBorder]} + onPress={() => { + onClose(); + setTimeout(option.onPress, 50); + }} + > + {option.icon && ( + <Feather + name={option.icon} + size={20} + color={option.destructive ? Colors.negative : Colors.textPrimary} + style={styles.optionIcon} + /> + )} + <Text style={[styles.optionText, option.destructive && styles.optionTextDestructive]}> + {option.label} + </Text> + </TouchableOpacity> + ))} + </View> + + <TouchableOpacity style={styles.cancelButton} onPress={onClose}> + <Text style={styles.cancelText}>Cancelar</Text> + </TouchableOpacity> + </View> + </BlurView> + </Animated.View> + </Animated.View> + </Modal> + ); +} + +const styles = StyleSheet.create({ + overlay: { + flex: 1, + justifyContent: 'flex-end', + backgroundColor: 'rgba(0, 0, 0, 0.4)', + }, + backdrop: { + ...StyleSheet.absoluteFill, + }, + modalContainer: { + padding: Spacing.md, + paddingBottom: Spacing.xxl, + }, + blurView: { + borderRadius: Radius.lg, + overflow: 'hidden', + borderWidth: 1, + borderColor: 'rgba(255, 255, 255, 0.08)', + }, + content: { + padding: Spacing.md, + gap: Spacing.md, + backgroundColor: 'rgba(22, 27, 34, 0.6)', + }, + title: { + ...Typography.body, + color: Colors.textSecondary, + textAlign: 'center', + marginBottom: Spacing.xs, + }, + optionsList: { + backgroundColor: 'rgba(255,255,255,0.05)', + borderRadius: Radius.md, + overflow: 'hidden', + }, + optionButton: { + flexDirection: 'row', + alignItems: 'center', + padding: Spacing.md, + backgroundColor: 'transparent', + }, + optionBorder: { + borderBottomWidth: 1, + borderBottomColor: 'rgba(255,255,255,0.05)', + }, + optionIcon: { + marginRight: Spacing.sm, + }, + optionText: { + ...Typography.bodyLarge, + color: Colors.textPrimary, + }, + optionTextDestructive: { + color: Colors.negative, + }, + cancelButton: { + padding: Spacing.md, + backgroundColor: 'rgba(255,255,255,0.1)', + borderRadius: Radius.md, + alignItems: 'center', + }, + cancelText: { + ...Typography.bodyLarge, + color: Colors.textPrimary, + fontFamily: 'DMSans_600SemiBold', + }, +}); diff --git a/src/components/ui/primitives.tsx b/src/components/ui/primitives.tsx new file mode 100644 index 0000000..d598bd2 --- /dev/null +++ b/src/components/ui/primitives.tsx @@ -0,0 +1,104 @@ +import React from 'react'; +import { StyleSheet, Text, View } from 'react-native'; +import { Colors, Radius, Shadow, Spacing, Typography } from '@/constants/theme'; + +interface CardProps { + children: React.ReactNode; + style?: object; +} + +export function Card({ children, style }: CardProps) { + return <View style={[styles.card, style]}>{children}</View>; +} + +interface LabelProps { + text: string; + color?: string; +} + +export function SectionLabel({ text, color = Colors.textSecondary }: LabelProps) { + return <Text style={[styles.label, { color }]}>{text}</Text>; +} + +interface CurrencyDisplayProps { + amount: number; + size?: 'display' | 'large' | 'normal'; + showSign?: boolean; +} + +export function CurrencyDisplay({ + amount, + size = 'normal', + showSign = false, +}: CurrencyDisplayProps) { + const isNegative = amount < 0; + const color = isNegative ? Colors.negative : Colors.positive; + const formatted = Math.abs(amount).toLocaleString('pt-BR', { + minimumFractionDigits: 2, + maximumFractionDigits: 2, + }); + const sign = showSign ? (isNegative ? '- ' : '+ ') : ''; + + const textStyle = + size === 'display' + ? styles.displayAmount + : size === 'large' + ? styles.largeAmount + : styles.normalAmount; + + return ( + <View style={styles.currencyRow}> + <Text style={[styles.currencyPrefix, { color }]}> + {sign}R${' '} + </Text> + <Text style={[textStyle, { color }]}>{formatted}</Text> + </View> + ); +} + +interface DividerProps { + style?: object; +} + +export function Divider({ style }: DividerProps) { + return <View style={[styles.divider, style]} />; +} + +const styles = StyleSheet.create({ + card: { + backgroundColor: Colors.surface, + borderRadius: Radius.lg, + padding: Spacing.lg, + borderWidth: 1, + borderColor: Colors.border, + ...Shadow.card, + }, + label: { + ...Typography.caption, + textTransform: 'uppercase', + letterSpacing: 1.2, + }, + currencyRow: { + flexDirection: 'row', + alignItems: 'flex-end', + }, + currencyPrefix: { + ...Typography.currencyLabel, + paddingBottom: 4, + }, + displayAmount: { + ...Typography.display, + }, + largeAmount: { + ...Typography.h1, + }, + normalAmount: { + ...Typography.bodyLarge, + fontFamily: 'DMSans_600SemiBold', + }, + divider: { + height: 1, + backgroundColor: Colors.border, + marginVertical: Spacing.md, + }, +}); diff --git a/src/constants/theme.ts b/src/constants/theme.ts new file mode 100644 index 0000000..880e3d8 --- /dev/null +++ b/src/constants/theme.ts @@ -0,0 +1,99 @@ +export const Colors = { + background: '#0D1117', + surface: '#161B22', + surfaceElevated: '#1C2333', + border: '#2A3444', + + primary: '#1A6B3C', + primaryLight: '#24A55A', + accent: '#C9A84C', + + positive: '#24A55A', + negative: '#E05252', + warning: '#E0A84C', + + textPrimary: '#E6EDF3', + textSecondary: '#8B949E', + textMuted: '#484F58', + textOnPrimary: '#FFFFFF', + + white: '#FFFFFF', + transparent: 'transparent', +} as const; + +export const Typography = { + display: { + fontFamily: 'DMSans_700Bold', + fontSize: 52, + lineHeight: 60, + letterSpacing: -1.5, + }, + h1: { + fontFamily: 'DMSans_700Bold', + fontSize: 28, + lineHeight: 34, + letterSpacing: -0.5, + }, + h2: { + fontFamily: 'DMSans_600SemiBold', + fontSize: 20, + lineHeight: 26, + letterSpacing: -0.3, + }, + bodyLarge: { + fontFamily: 'DMSans_400Regular', + fontSize: 17, + lineHeight: 24, + }, + body: { + fontFamily: 'DMSans_400Regular', + fontSize: 15, + lineHeight: 22, + }, + caption: { + fontFamily: 'DMSans_400Regular', + fontSize: 12, + lineHeight: 16, + letterSpacing: 0.3, + }, + currencyLabel: { + fontFamily: 'DMSans_300Light', + fontSize: 24, + lineHeight: 32, + letterSpacing: -0.5, + }, +} as const; + +export const Spacing = { + xs: 4, + sm: 8, + md: 16, + lg: 24, + xl: 32, + xxl: 48, +} as const; + +export const Radius = { + sm: 8, + md: 12, + lg: 16, + xl: 24, + full: 9999, +} as const; + +export const Shadow = { + card: { + shadowColor: '#000', + shadowOffset: { width: 0, height: 4 }, + shadowOpacity: 0.3, + shadowRadius: 8, + elevation: 8, + }, + glow: { + shadowColor: Colors.primary, + shadowOffset: { width: 0, height: 0 }, + shadowOpacity: 0.4, + shadowRadius: 16, + elevation: 12, + }, +} as const; diff --git a/src/contexts/AuthContext.tsx b/src/contexts/AuthContext.tsx new file mode 100644 index 0000000..d2fd7a9 --- /dev/null +++ b/src/contexts/AuthContext.tsx @@ -0,0 +1,107 @@ +import { User } from '@/types'; +import React, { createContext, useContext, useEffect, useState } from 'react'; +import * as SecureStore from 'expo-secure-store'; +import * as LocalAuthentication from 'expo-local-authentication'; +import { apiLogin, apiRegister, LoginPayload, RegisterPayload, setApiToken } from '@/services/api'; + +interface AuthContextData { + user: User | null; + token: string | null; + isLoading: boolean; + login: (data: LoginPayload) => Promise<void>; + register: (data: RegisterPayload) => Promise<void>; + logout: () => Promise<void>; + updateUser: (newUser: User) => Promise<void>; +} + +const AuthContext = createContext<AuthContextData>({} as AuthContextData); + +export function AuthProvider({ children }: { children: React.ReactNode }) { + const [user, setUser] = useState<User | null>(null); + const [token, setToken] = useState<string | null>(null); + const [isLoading, setIsLoading] = useState<boolean>(true); + + useEffect(() => { + async function loadStorageData() { + try { + const storedToken = await SecureStore.getItemAsync('yaba_token'); + const storedUser = await SecureStore.getItemAsync('yaba_user'); + const useBiometrics = await SecureStore.getItemAsync('yaba_use_biometrics'); + + if (storedToken && storedUser) { + let authenticated = true; + + if (useBiometrics === 'true') { + const hasHardware = await LocalAuthentication.hasHardwareAsync(); + const isEnrolled = await LocalAuthentication.isEnrolledAsync(); + + if (hasHardware && isEnrolled) { + const result = await LocalAuthentication.authenticateAsync({ + promptMessage: 'Use sua digital para continuar', + fallbackLabel: 'Usar senha', + }); + + authenticated = result.success; + } + } + + if (authenticated) { + setApiToken(storedToken); + setToken(storedToken); + setUser(JSON.parse(storedUser)); + } else { + await SecureStore.deleteItemAsync('yaba_token'); + await SecureStore.deleteItemAsync('yaba_user'); + } + } + } catch (error) { + console.error('Error loading storage data:', error); + } finally { + setIsLoading(false); + } + } + + loadStorageData(); + }, []); + + async function login(data: LoginPayload) { + const res = await apiLogin(data); + await SecureStore.setItemAsync('yaba_token', res.token); + await SecureStore.setItemAsync('yaba_user', JSON.stringify(res.user)); + setApiToken(res.token); + setToken(res.token); + setUser(res.user); + } + + async function register(data: RegisterPayload) { + const res = await apiRegister(data); + await SecureStore.setItemAsync('yaba_token', res.token); + await SecureStore.setItemAsync('yaba_user', JSON.stringify(res.user)); + setApiToken(res.token); + setToken(res.token); + setUser(res.user); + } + + async function logout() { + await SecureStore.deleteItemAsync('yaba_token'); + await SecureStore.deleteItemAsync('yaba_user'); + setApiToken(null); + setToken(null); + setUser(null); + } + + async function updateUser(newUser: User) { + await SecureStore.setItemAsync('yaba_user', JSON.stringify(newUser)); + setUser(newUser); + } + + return ( + <AuthContext.Provider value={{ user, token, isLoading, login, register, logout, updateUser }}> + {children} + </AuthContext.Provider> + ); +} + +export function useAuth() { + return useContext(AuthContext); +}
\ No newline at end of file diff --git a/src/global.css b/src/global.css new file mode 100644 index 0000000..c8fe503 --- /dev/null +++ b/src/global.css @@ -0,0 +1,9 @@ +:root { + --font-display: + Spline Sans, Inter, ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, + Segoe UI Symbol, Noto Color Emoji; + --font-mono: + ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace; + --font-rounded: 'SF Pro Rounded', 'Hiragino Maru Gothic ProN', Meiryo, 'MS PGothic', sans-serif; + --font-serif: Georgia, 'Times New Roman', serif; +} diff --git a/src/hooks/use-app-hooks.ts b/src/hooks/use-app-hooks.ts new file mode 100644 index 0000000..f10d1ef --- /dev/null +++ b/src/hooks/use-app-hooks.ts @@ -0,0 +1,20 @@ +import { useFonts } from 'expo-font'; +import { DMSans_300Light, DMSans_400Regular, DMSans_600SemiBold, DMSans_700Bold } from '@expo-google-fonts/dm-sans'; +import { calcularSalarioLiquido, type ResultadoCalculo } from '@/utils/tax-calculator'; + +export function useAppFonts() { + const [loaded, error] = useFonts({ + DMSans_300Light, + DMSans_400Regular, + DMSans_600SemiBold, + DMSans_700Bold, + }); + + return { fontsLoaded: loaded, fontsError: error }; +} + +export function useSalaryCalculator(grossSalaryStr: string): ResultadoCalculo | null { + const value = parseFloat(grossSalaryStr.replace(',', '.')); + if (isNaN(value) || value <= 0) return null; + return calcularSalarioLiquido(value); +}
\ No newline at end of file diff --git a/src/screens/dashboard-screen.tsx b/src/screens/dashboard-screen.tsx new file mode 100644 index 0000000..c4a533c --- /dev/null +++ b/src/screens/dashboard-screen.tsx @@ -0,0 +1,440 @@ +import React, { useCallback, useState } from 'react'; +import { + ActivityIndicator, + RefreshControl, + ScrollView, + StyleSheet, + Text, + TouchableOpacity, + View, +} from 'react-native'; +import { Feather } from '@expo/vector-icons'; +import { LinearGradient } from 'expo-linear-gradient'; +import Animated, { + FadeInDown, + FadeInUp, + LinearTransition, +} from 'react-native-reanimated'; +import { useSafeAreaInsets } from 'react-native-safe-area-context'; +import { Card, CurrencyDisplay, Divider, SectionLabel } from '@/components/ui/primitives'; +import { ExpensesChart } from '@/components/ui/expenses-chart'; +import { Colors, Spacing, Typography } from '@/constants/theme'; +import { getDashboard } from '@/services/api'; +import type { DashboardData } from '@/types'; +import { useAuth } from '@/contexts/AuthContext'; +import { useRouter, useFocusEffect } from 'expo-router'; +import { useIsFocused } from "expo-router/react-navigation"; + +const MONTH_NAMES = [ + '', 'Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', + 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro', +]; + +export default function DashboardScreen() { + const insets = useSafeAreaInsets(); + const [refreshing, setRefreshing] = useState(false); + const [data, setData] = useState<DashboardData | null>(null); + const [loading, setLoading] = useState(true); + const [error, setError] = useState<string | null>(null); + const { user, logout } = useAuth(); + const router = useRouter(); + const isFocused = useIsFocused(); + + const [targetMonth, setTargetMonth] = useState(() => new Date().getMonth() + 1); + const [targetYear, setTargetYear] = useState(() => new Date().getFullYear()); + + const fetchDashboard = useCallback(async () => { + if (!user) return; + try { + setError(null); + const res = await getDashboard(user.id, targetMonth, targetYear); + setData(res); + } catch (err) { + setError('Não foi possível carregar os dados.'); + } finally { + setLoading(false); + } + }, [targetMonth, targetYear, user]); + + useFocusEffect( + useCallback(() => { + fetchDashboard(); + }, [fetchDashboard]) + ); + + async function handleRefresh() { + setRefreshing(true); + await fetchDashboard(); + setRefreshing(false); + } + + if (loading) { + return ( + <View style={[styles.container, styles.centered]}> + <ActivityIndicator size="large" color={Colors.primary} /> + </View> + ); + } + + if (error || !data) { + return ( + <View style={[styles.container, styles.centered]}> + <Text style={styles.errorText}>{error}</Text> + </View> + ); + } + + const isPositive = data.balance.available >= 0; + const monthName = MONTH_NAMES[data.period.month]; + + return ( + <View style={[styles.container, { paddingTop: insets.top }]}> + <LinearGradient + colors={['#0D2818', Colors.background]} + style={styles.headerGradient} + start={{ x: 0, y: 0 }} + end={{ x: 0, y: 1 }} + /> + + {isFocused && ( + <ScrollView + contentContainerStyle={[styles.scroll, { paddingBottom: insets.bottom + 80 }]} + showsVerticalScrollIndicator={false} + refreshControl={ + <RefreshControl + refreshing={refreshing} + onRefresh={handleRefresh} + tintColor={Colors.primaryLight} + /> + } + > + <Animated.View entering={FadeInUp.duration(500)} style={styles.headerTop}> + <View style={styles.greeting}> + <Text style={styles.greetingText}>Olá, {data.user.name} 👋</Text> + + <View style={styles.monthSelector}> + <TouchableOpacity + onPress={() => { + let m = targetMonth - 1; + let y = targetYear; + if (m < 1) { m = 12; y -= 1; } + setTargetMonth(m); + setTargetYear(y); + setLoading(true); + }} + style={styles.monthButton} + > + <Feather name="chevron-left" size={20} color={Colors.textSecondary} /> + </TouchableOpacity> + + <Text style={styles.periodText}> + {monthName} {data.period.year} + </Text> + + <TouchableOpacity + onPress={() => { + let m = targetMonth + 1; + let y = targetYear; + if (m > 12) { m = 1; y += 1; } + setTargetMonth(m); + setTargetYear(y); + setLoading(true); + }} + style={styles.monthButton} + > + <Feather name="chevron-right" size={20} color={Colors.textSecondary} /> + </TouchableOpacity> + </View> + </View> + + <TouchableOpacity + style={styles.logoutBtn} + onPress={async () => { + await logout(); + router.replace('/login'); + }} + > + <Feather name="log-out" size={20} color={Colors.textSecondary} /> + </TouchableOpacity> + </Animated.View> + + <Animated.View entering={FadeInUp.delay(100).duration(500)} layout={LinearTransition.springify()}> + <Card style={[styles.heroCard, isPositive ? styles.heroPositive : styles.heroNegative]}> + <SectionLabel + text="Saldo Disponível" + color={isPositive ? Colors.positive : Colors.negative} + /> + <View style={styles.heroBalance}> + <CurrencyDisplay amount={data.balance.available} size="display" /> + </View> + + <View style={styles.ratioSection}> + <View style={styles.ratioBar}> + <View + style={[ + styles.ratioFill, + { + width: `${Math.min(data.balance.expense_ratio, 100)}%` as `${number}%`, + backgroundColor: + data.balance.expense_ratio > 80 ? Colors.negative : Colors.primary, + }, + ]} + /> + </View> + <Text style={styles.ratioText}> + {data.balance.expense_ratio.toFixed(1)}% do salário comprometido + </Text> + </View> + </Card> + </Animated.View> + + <Animated.View entering={FadeInDown.delay(200).duration(500)} layout={LinearTransition.springify()}> + <Card style={styles.card}> + <SectionLabel text="Salário" /> + <View style={styles.salaryRow}> + <View style={styles.salaryItem}> + <Text style={styles.salaryLabel}>Bruto</Text> + <Text style={styles.salaryValue}> + {data.salary.gross.toLocaleString('pt-BR', { + style: 'currency', + currency: 'BRL', + minimumFractionDigits: 0, + })} + </Text> + </View> + <View style={styles.salaryArrow}> + <Text style={styles.salaryArrowText}>→</Text> + </View> + <View style={styles.salaryItem}> + <Text style={styles.salaryLabel}>Líquido</Text> + <Text style={[styles.salaryValue, { color: Colors.positive }]}> + {data.salary.effective_net.toLocaleString('pt-BR', { + style: 'currency', + currency: 'BRL', + minimumFractionDigits: 0, + })} + </Text> + </View> + </View> + <Divider /> + <View style={styles.taxRow}> + <Text style={styles.taxLabel}>INSS</Text> + <Text style={styles.taxValue}> + -{data.salary.inss_discount.toLocaleString('pt-BR', { + style: 'currency', + currency: 'BRL', + })} + </Text> + </View> + <View style={styles.taxRow}> + <Text style={styles.taxLabel}>IRRF</Text> + <Text style={styles.taxValue}> + -{data.salary.irrf_discount.toLocaleString('pt-BR', { + style: 'currency', + currency: 'BRL', + })} + </Text> + </View> + </Card> + </Animated.View> + + <Animated.View entering={FadeInDown.delay(250).duration(500)} layout={LinearTransition.springify()}> + <ExpensesChart + recurring={data.expenses.recurring_list} + oneTime={data.expenses.one_time_list} + /> + </Animated.View> + + <Animated.View entering={FadeInDown.delay(300).duration(500)} layout={LinearTransition.springify()}> + <Card style={styles.card}> + <View style={[styles.sectionHeader, { marginBottom: 0 }]}> + <SectionLabel text="Lançamentos Fixos" /> + <Text + style={[ + styles.totalBadge, + data.expenses.recurring_total < 0 ? { color: Colors.positive } : { color: Colors.negative } + ]} + > + {data.expenses.recurring_total < 0 ? '+ ' : (data.expenses.recurring_total > 0 ? '- ' : '')} + {Math.abs(data.expenses.recurring_total).toLocaleString('pt-BR', { + style: 'currency', + currency: 'BRL', + minimumFractionDigits: 0, + })} + </Text> + </View> + </Card> + </Animated.View> + + <Animated.View entering={FadeInDown.delay(400).duration(500)} layout={LinearTransition.springify()}> + <Card style={styles.card}> + <View style={[styles.sectionHeader, { marginBottom: 0 }]}> + <SectionLabel text="Lançamentos do Mês" /> + <Text + style={[ + styles.totalBadge, + data.expenses.one_time_total < 0 ? { color: Colors.positive } : { color: Colors.negative } + ]} + > + {data.expenses.one_time_total < 0 ? '+ ' : (data.expenses.one_time_total > 0 ? '- ' : '')} + {Math.abs(data.expenses.one_time_total).toLocaleString('pt-BR', { + style: 'currency', + currency: 'BRL', + minimumFractionDigits: 0, + })} + </Text> + </View> + </Card> + </Animated.View> + </ScrollView> + )} + </View> + ); +} + +const styles = StyleSheet.create({ + container: { + flex: 1, + backgroundColor: Colors.background, + }, + centered: { + justifyContent: 'center', + alignItems: 'center', + }, + errorText: { + ...Typography.body, + color: Colors.negative, + }, + headerGradient: { + position: 'absolute', + top: 0, + left: 0, + right: 0, + height: 200, + }, + scroll: { + padding: Spacing.md, + gap: Spacing.md, + }, + headerTop: { + flexDirection: 'row', + justifyContent: 'space-between', + alignItems: 'flex-start', + paddingVertical: Spacing.sm, + }, + greeting: { + flex: 1, + }, + logoutBtn: { + padding: 8, + backgroundColor: 'rgba(255,255,255,0.05)', + borderRadius: 12, + }, + greetingText: { + ...Typography.h2, + color: Colors.textPrimary, + }, + periodText: { + ...Typography.caption, + color: Colors.textSecondary, + textTransform: 'uppercase', + letterSpacing: 1.5, + }, + monthSelector: { + flexDirection: 'row', + alignItems: 'center', + marginTop: 6, + gap: Spacing.xs, + }, + monthButton: { + padding: 4, + }, + card: { + gap: Spacing.sm, + }, + heroCard: { + gap: Spacing.md, + borderWidth: 1, + }, + heroPositive: { + borderColor: `${Colors.positive}40`, + }, + heroNegative: { + borderColor: `${Colors.negative}40`, + }, + heroBalance: { + marginTop: Spacing.xs, + }, + ratioSection: { + gap: Spacing.xs, + }, + ratioBar: { + height: 4, + backgroundColor: Colors.border, + borderRadius: 2, + overflow: 'hidden', + }, + ratioFill: { + height: '100%', + borderRadius: 2, + }, + ratioText: { + ...Typography.caption, + color: Colors.textMuted, + }, + salaryRow: { + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'space-between', + marginTop: Spacing.sm, + }, + salaryItem: { + flex: 1, + gap: 4, + }, + salaryLabel: { + ...Typography.caption, + color: Colors.textMuted, + textTransform: 'uppercase', + letterSpacing: 1, + }, + salaryValue: { + ...Typography.h2, + color: Colors.textPrimary, + }, + salaryArrow: { + paddingHorizontal: Spacing.md, + }, + salaryArrowText: { + ...Typography.h2, + color: Colors.textMuted, + }, + taxRow: { + flexDirection: 'row', + justifyContent: 'space-between', + alignItems: 'center', + }, + taxLabel: { + ...Typography.body, + color: Colors.textSecondary, + }, + taxValue: { + ...Typography.body, + color: Colors.negative, + fontFamily: 'DMSans_600SemiBold', + }, + sectionHeader: { + flexDirection: 'row', + justifyContent: 'space-between', + alignItems: 'center', + marginBottom: Spacing.xs, + }, + totalBadge: { + ...Typography.body, + color: Colors.negative, + fontFamily: 'DMSans_600SemiBold', + }, + rowDivider: { + marginVertical: 0, + }, +}); diff --git a/src/screens/one-time-expenses-screen.tsx b/src/screens/one-time-expenses-screen.tsx new file mode 100644 index 0000000..c84a39f --- /dev/null +++ b/src/screens/one-time-expenses-screen.tsx @@ -0,0 +1,485 @@ +import React, { useCallback, useState } from 'react'; +import { + Alert, + ScrollView, + StyleSheet, + Text, + TouchableOpacity, + View, +} from 'react-native'; +import Animated, { FadeInDown, LinearTransition } from 'react-native-reanimated'; +import { useSafeAreaInsets } from 'react-native-safe-area-context'; +import * as Haptics from 'expo-haptics'; +import { Button } from '@/components/ui/button'; +import { Input } from '@/components/ui/input'; +import { Card, Divider, SectionLabel } from '@/components/ui/primitives'; +import { OneTimeExpenseRow } from '@/components/expense-row'; +import { Colors, Radius, Spacing, Typography } from '@/constants/theme'; +import type { Category, OneTimeExpense } from '@/types'; +import { + createOneTimeExpense, + updateOneTimeExpense, + deleteOneTimeExpense, + getOneTimeExpenses, +} from '@/services/api'; +import { useAuth } from '@/contexts/AuthContext'; +import { ActionModal } from '@/components/ui/action-modal'; +import { OptionsModal } from '@/components/ui/options-modal'; +import { useFocusEffect } from 'expo-router'; +import { useIsFocused } from "expo-router/react-navigation"; + +const CATEGORIES: { value: Category; emoji: string; label: string }[] = [ + { value: 'alimentação', emoji: '🍽️', label: 'Alimentação' }, + { value: 'lazer', emoji: '🎬', label: 'Lazer' }, + { value: 'transporte', emoji: '🚗', label: 'Transporte' }, + { value: 'saúde', emoji: '💊', label: 'Saúde' }, + { value: 'moradia', emoji: '🏠', label: 'Moradia' }, + { value: 'educação', emoji: '📚', label: 'Educação' }, + { value: 'serviços', emoji: '⚙️', label: 'Serviços' }, + { value: 'outros', emoji: '📦', label: 'Outros' }, +]; + +export default function OneTimeExpensesScreen() { + const insets = useSafeAreaInsets(); + const { user } = useAuth(); + const [expenses, setExpenses] = useState<OneTimeExpense[]>([]); + const [showForm, setShowForm] = useState(false); + const [loading, setLoading] = useState(true); + + const [name, setName] = useState(''); + const [amount, setAmount] = useState(''); + const [selectedCategory, setSelectedCategory] = useState<Category>('outros'); + const [expenseType, setExpenseType] = useState<'expense' | 'income'>('expense'); + const [notes, setNotes] = useState(''); + const [isSubmitting, setIsSubmitting] = useState(false); + + const [expenseToDelete, setExpenseToDelete] = useState<number | null>(null); + const [selectedExpense, setSelectedExpense] = useState<OneTimeExpense | null>(null); + const [editingExpenseId, setEditingExpenseId] = useState<number | null>(null); + + const isFocused = useIsFocused(); + + const fetchExpenses = useCallback(async () => { + if (!user) return; + try { + setLoading(true); + const data = await getOneTimeExpenses(user.id); + setExpenses(data); + } catch (err) { + Alert.alert('Erro', 'Não foi possível carregar os gastos do mês.'); + } finally { + setLoading(false); + } + }, [user]); + + useFocusEffect( + useCallback(() => { + fetchExpenses(); + }, [fetchExpenses]) + ); + + const monthTotal = expenses.reduce((sum, e) => { + return sum + (e.type === 'income' ? -e.amount : e.amount); + }, 0); + const isTotalIncome = monthTotal < 0; + const absTotal = Math.abs(monthTotal); + const formattedTotal = absTotal.toLocaleString('pt-BR', { + style: 'currency', + currency: 'BRL', + }); + + async function handleAdd() { + const amountNum = parseFloat(amount.replace(',', '.')); + if (!name.trim() || isNaN(amountNum) || amountNum <= 0) { + Alert.alert('Dados inválidos', 'Preencha o nome e um valor válido.'); + return; + } + + try { + if (!user) return; + setIsSubmitting(true); + + if (editingExpenseId) { + const updated = await updateOneTimeExpense(user.id, editingExpenseId, { + name: name.trim(), + amount: amountNum, + category: selectedCategory, + type: expenseType, + notes: notes.trim() || null, + }); + setExpenses((prev) => prev.map((e) => e.id === editingExpenseId ? updated : e)); + Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success); + } else { + const today = new Date().toISOString().split('T')[0]; + const newExpense = await createOneTimeExpense(user.id, { + name: name.trim(), + amount: amountNum, + category: selectedCategory, + type: expenseType, + expense_date: today, + notes: notes.trim() || null, + }); + setExpenses((prev) => [...prev, newExpense]); + Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success); + } + + setName(''); + setAmount(''); + setNotes(''); + setExpenseType('expense'); + setShowForm(false); + setEditingExpenseId(null); + } catch (err) { + Alert.alert('Erro', 'Não foi possível salvar o lançamento.'); + } finally { + setIsSubmitting(false); + } + } + + function handleDelete(id: number) { + setExpenseToDelete(id); + setSelectedExpense(null); + } + + function handleEdit(expense: OneTimeExpense) { + setName(expense.name); + setAmount(expense.amount.toString()); + setSelectedCategory(expense.category); + setExpenseType(expense.type); + setNotes(expense.notes || ''); + setEditingExpenseId(expense.id); + setSelectedExpense(null); + setShowForm(true); + } + + async function confirmDelete() { + if (!user || expenseToDelete === null) return; + Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium); + try { + await deleteOneTimeExpense(user.id, expenseToDelete); + setExpenses((prev) => prev.filter((e) => e.id !== expenseToDelete)); + } catch (err) { + Alert.alert('Erro', 'Não foi possível remover o lançamento.'); + } finally { + setExpenseToDelete(null); + } + } + + return ( + <View style={[styles.container, { paddingTop: insets.top }]}> + {isFocused && ( + <ScrollView + contentContainerStyle={[ + styles.scroll, + { paddingBottom: insets.bottom + Spacing.xxl }, + ]} + keyboardShouldPersistTaps="handled" + showsVerticalScrollIndicator={false} + > + <Animated.View entering={FadeInDown.duration(400)} style={styles.header}> + <View> + <Text style={styles.title}>Lançamentos</Text> + <Text style={styles.subtitle}> + Saldo líquido:{' '} + <Text + style={[ + styles.totalHighlight, + isTotalIncome ? { color: Colors.positive } : { color: Colors.negative } + ]} + > + {isTotalIncome ? '+ ' : (monthTotal > 0 ? '- ' : '')}{formattedTotal} + </Text> + </Text> + </View> + <TouchableOpacity + id="onetime-add-button" + style={[styles.addButton, showForm && styles.addButtonActive]} + onPress={() => { + if (showForm) { + setEditingExpenseId(null); + setName(''); + setAmount(''); + setNotes(''); + } + setShowForm((v) => !v); + }} + accessibilityLabel="Adicionar lançamento" + accessibilityRole="button" + > + <Text style={styles.addButtonText}>{showForm ? '✕' : '+'}</Text> + </TouchableOpacity> + </Animated.View> + + {showForm && ( + <Animated.View entering={FadeInDown.duration(300)}> + <Card style={styles.formCard}> + <SectionLabel text={editingExpenseId ? "Editar Lançamento" : "Novo Lançamento"} /> + + <View style={styles.typeSelector}> + <TouchableOpacity + style={[styles.typeButton, expenseType === 'expense' && styles.typeButtonExpenseActive]} + onPress={() => setExpenseType('expense')} + > + <Text style={[styles.typeButtonText, expenseType === 'expense' && { color: Colors.negative }]}> + Despesa + </Text> + </TouchableOpacity> + <TouchableOpacity + style={[styles.typeButton, expenseType === 'income' && styles.typeButtonIncomeActive]} + onPress={() => setExpenseType('income')} + > + <Text style={[styles.typeButtonText, expenseType === 'income' && { color: Colors.positive }]}> + Receita + </Text> + </TouchableOpacity> + </View> + + <Input + id="one-time-name-input" + label="Descrição" + value={name} + onChangeText={setName} + placeholder="Ex: iFood, Cinema, Uber..." + /> + + <Input + id="one-time-amount-input" + label="Valor" + prefix="R$" + value={amount} + onChangeText={setAmount} + keyboardType="decimal-pad" + placeholder="0,00" + /> + + <View> + <Text style={styles.catLabel}>Categoria</Text> + <View style={styles.categoryGrid}> + {CATEGORIES.map((cat) => ( + <TouchableOpacity + key={cat.value} + style={[ + styles.catChip, + selectedCategory === cat.value && styles.catChipSelected, + ]} + onPress={() => setSelectedCategory(cat.value)} + accessibilityLabel={cat.label} + accessibilityRole="radio" + > + <Text style={styles.catEmoji}>{cat.emoji}</Text> + <Text + style={[ + styles.catText, + selectedCategory === cat.value && styles.catTextSelected, + ]} + > + {cat.label} + </Text> + </TouchableOpacity> + ))} + </View> + </View> + + <Input + id="one-time-notes-input" + label="Observações (opcional)" + value={notes} + onChangeText={setNotes} + placeholder="Ex: almoço de aniversário" + multiline + /> + + <Button + id="one-time-save-button" + label={expenseType === 'income' ? 'Adicionar Receita' : 'Adicionar Gasto'} + fullWidth + onPress={handleAdd} + loading={isSubmitting} + disabled={isSubmitting} + style={expenseType === 'income' ? { backgroundColor: Colors.positive } : undefined} + /> + </Card> + </Animated.View> + )} + + <Animated.View layout={LinearTransition.springify()}> + <Card style={styles.listCard}> + <SectionLabel text={`${expenses.length} lançamentos este mês`} /> + {expenses.length === 0 ? ( + <Text style={styles.emptyText}> + Nenhum lançamento registrado este mês.{'\n'}Toque em + para adicionar. + </Text> + ) : ( + expenses.map((expense, i) => ( + <React.Fragment key={expense.id}> + {i > 0 && <Divider style={styles.rowDivider} />} + <OneTimeExpenseRow + expense={expense} + index={i} + onPress={() => setSelectedExpense(expense)} + /> + </React.Fragment> + )) + )} + </Card> + </Animated.View> + </ScrollView> + )} + + <ActionModal + visible={expenseToDelete !== null} + title="Remover lançamento" + message="Deseja realmente remover este lançamento? Esta ação não pode ser desfeita." + confirmText="Remover" + isDestructive={true} + onCancel={() => setExpenseToDelete(null)} + onConfirm={confirmDelete} + /> + + <OptionsModal + visible={selectedExpense !== null} + title={selectedExpense?.name} + onClose={() => setSelectedExpense(null)} + options={[ + { + label: 'Editar', + icon: 'edit-2', + onPress: () => selectedExpense && handleEdit(selectedExpense), + }, + { + label: 'Excluir', + icon: 'trash-2', + destructive: true, + onPress: () => selectedExpense && handleDelete(selectedExpense.id), + } + ]} + /> + </View> + ); +} + +const styles = StyleSheet.create({ + container: { + flex: 1, + backgroundColor: Colors.background, + }, + scroll: { + padding: Spacing.md, + gap: Spacing.md, + }, + header: { + flexDirection: 'row', + justifyContent: 'space-between', + alignItems: 'flex-start', + }, + title: { + ...Typography.h1, + color: Colors.textPrimary, + }, + subtitle: { + ...Typography.body, + color: Colors.textSecondary, + marginTop: 4, + }, + totalHighlight: { + color: Colors.negative, + fontFamily: 'DMSans_600SemiBold', + }, + addButton: { + width: 44, + height: 44, + borderRadius: 22, + backgroundColor: Colors.primary, + alignItems: 'center', + justifyContent: 'center', + }, + addButtonActive: { + backgroundColor: Colors.surfaceElevated, + borderWidth: 1, + borderColor: Colors.border, + }, + addButtonText: { + ...Typography.h2, + color: Colors.white, + }, + formCard: { + gap: Spacing.md, + }, + typeSelector: { + flexDirection: 'row', + gap: Spacing.sm, + }, + typeButton: { + flex: 1, + paddingVertical: Spacing.sm, + alignItems: 'center', + borderRadius: Radius.md, + borderWidth: 1, + borderColor: Colors.border, + backgroundColor: Colors.surfaceElevated, + }, + typeButtonExpenseActive: { + borderColor: Colors.negative, + backgroundColor: `${Colors.negative}1A`, + }, + typeButtonIncomeActive: { + borderColor: Colors.positive, + backgroundColor: `${Colors.positive}1A`, + }, + typeButtonText: { + ...Typography.body, + color: Colors.textSecondary, + fontFamily: 'DMSans_600SemiBold', + }, + listCard: { + gap: Spacing.xs, + }, + rowDivider: { + marginVertical: 0, + }, + emptyText: { + ...Typography.body, + color: Colors.textMuted, + textAlign: 'center', + paddingVertical: Spacing.xl, + lineHeight: 24, + }, + catLabel: { + ...Typography.caption, + color: Colors.textSecondary, + textTransform: 'uppercase', + letterSpacing: 1, + marginBottom: Spacing.sm, + }, + categoryGrid: { + flexDirection: 'row', + flexWrap: 'wrap', + gap: Spacing.sm, + }, + catChip: { + flexDirection: 'row', + alignItems: 'center', + gap: Spacing.xs, + paddingVertical: Spacing.sm, + paddingHorizontal: Spacing.md, + borderRadius: Radius.full, + backgroundColor: Colors.surfaceElevated, + borderWidth: 1, + borderColor: Colors.border, + }, + catChipSelected: { + borderColor: Colors.primaryLight, + backgroundColor: `${Colors.primary}33`, + }, + catEmoji: { + fontSize: 14, + }, + catText: { + ...Typography.caption, + color: Colors.textSecondary, + }, + catTextSelected: { + color: Colors.primaryLight, + fontFamily: 'DMSans_600SemiBold', + }, +}); diff --git a/src/screens/recurring-expenses-screen.tsx b/src/screens/recurring-expenses-screen.tsx new file mode 100644 index 0000000..ea6f165 --- /dev/null +++ b/src/screens/recurring-expenses-screen.tsx @@ -0,0 +1,442 @@ +import React, { useCallback, useState } from 'react'; +import { + Alert, + Platform, + ScrollView, + StyleSheet, + Text, + TouchableOpacity, + View, +} from 'react-native'; +import Animated, { FadeInDown, LinearTransition } from 'react-native-reanimated'; +import { useSafeAreaInsets } from 'react-native-safe-area-context'; +import * as Haptics from 'expo-haptics'; +import { Button } from '@/components/ui/button'; +import { Input } from '@/components/ui/input'; +import { Card, Divider, SectionLabel } from '@/components/ui/primitives'; +import { RecurringExpenseRow } from '@/components/expense-row'; +import { Colors, Spacing, Typography } from '@/constants/theme'; +import type { RecurringExpense } from '@/types'; +import { + createRecurringExpense, + deleteRecurringExpense, + getRecurringExpenses, + toggleRecurringExpense, + updateRecurringExpense, +} from '@/services/api'; +import { useAuth } from '@/contexts/AuthContext'; +import { ActionModal } from '@/components/ui/action-modal'; +import { OptionsModal } from '@/components/ui/options-modal'; +import { useFocusEffect } from 'expo-router'; +import { useIsFocused } from "expo-router/react-navigation"; + +export default function RecurringExpensesScreen() { + const insets = useSafeAreaInsets(); + const { user } = useAuth(); + const [expenses, setExpenses] = useState<RecurringExpense[]>([]); + const [showForm, setShowForm] = useState(false); + const [loading, setLoading] = useState(true); + + const [name, setName] = useState(''); + const [amount, setAmount] = useState(''); + const [expenseType, setExpenseType] = useState<'expense' | 'income'>('expense'); + const [dueDay, setDueDay] = useState(''); + const [isSubmitting, setIsSubmitting] = useState(false); + + const [expenseToDelete, setExpenseToDelete] = useState<number | null>(null); + const [selectedExpense, setSelectedExpense] = useState<RecurringExpense | null>(null); + const [editingExpenseId, setEditingExpenseId] = useState<number | null>(null); + + const isFocused = useIsFocused(); + + const fetchExpenses = useCallback(async () => { + if (!user) return; + try { + setLoading(true); + const data = await getRecurringExpenses(user.id); + setExpenses(data); + } catch (err) { + Alert.alert('Erro', 'Não foi possível carregar os gastos.'); + } finally { + setLoading(false); + } + }, [user]); + + useFocusEffect( + useCallback(() => { + fetchExpenses(); + }, [fetchExpenses]) + ); + + const activeTotal = expenses + .filter((e) => e.is_active) + .reduce((sum, e) => { + return sum + (e.type === 'income' ? -e.amount : e.amount); + }, 0); + + const isTotalIncome = activeTotal < 0; + const absTotal = Math.abs(activeTotal); + const formattedTotal = absTotal.toLocaleString('pt-BR', { + style: 'currency', + currency: 'BRL', + }); + + async function handleToggle(id: number) { + Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light); + + setExpenses((prev) => + prev.map((e) => (e.id === id ? { ...e, is_active: !e.is_active } : e)), + ); + try { + if (!user) return; + await toggleRecurringExpense(user.id, id); + } catch (err) { + setExpenses((prev) => + prev.map((e) => (e.id === id ? { ...e, is_active: !e.is_active } : e)), + ); + Alert.alert('Erro', 'Não foi possível alterar o status do gasto.'); + } + } + + async function handleAdd() { + const amountNum = parseFloat(amount.replace(',', '.')); + if (!name.trim() || isNaN(amountNum) || amountNum <= 0) { + Alert.alert('Dados inválidos', 'Preencha o nome e um valor válido.'); + return; + } + + try { + if (!user) return; + setIsSubmitting(true); + + if (editingExpenseId) { + const updated = await updateRecurringExpense(user.id, editingExpenseId, { + name: name.trim(), + amount: amountNum, + category: 'outros', + type: expenseType, + due_day: dueDay ? parseInt(dueDay, 10) : null, + }); + setExpenses((prev) => prev.map((e) => e.id === editingExpenseId ? updated : e)); + Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success); + } else { + const newExpense = await createRecurringExpense(user.id, { + name: name.trim(), + amount: amountNum, + category: 'outros', + type: expenseType, + due_day: dueDay ? parseInt(dueDay, 10) : null, + is_active: true, + starts_at: new Date().toISOString().split('T')[0], + ends_at: null, + }); + setExpenses((prev) => [...prev, newExpense]); + Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success); + } + + setName(''); + setAmount(''); + setExpenseType('expense'); + setDueDay(''); + setShowForm(false); + setEditingExpenseId(null); + } catch (err) { + Alert.alert('Erro', 'Não foi possível salvar o lançamento.'); + } finally { + setIsSubmitting(false); + } + } + + function handleDelete(id: number) { + setExpenseToDelete(id); + setSelectedExpense(null); + } + + function handleEdit(expense: RecurringExpense) { + setName(expense.name); + setAmount(expense.amount.toString()); + setExpenseType(expense.type); + setDueDay(expense.due_day ? expense.due_day.toString() : ''); + setEditingExpenseId(expense.id); + setSelectedExpense(null); + setShowForm(true); + } + + async function confirmDelete() { + if (!user || expenseToDelete === null) return; + Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium); + try { + await deleteRecurringExpense(user.id, expenseToDelete); + setExpenses((prev) => prev.filter((e) => e.id !== expenseToDelete)); + } catch (err) { + Alert.alert('Erro', 'Não foi possível remover o gasto.'); + } finally { + setExpenseToDelete(null); + } + } + + return ( + <View style={[styles.container, { paddingTop: insets.top }]}> + {isFocused && ( + <ScrollView + contentContainerStyle={[ + styles.scroll, + { paddingBottom: insets.bottom + 80 }, + ]} + keyboardShouldPersistTaps="handled" + showsVerticalScrollIndicator={false} + > + <Animated.View entering={FadeInDown.duration(400)} style={styles.header}> + <View> + <Text style={styles.title}>Lançamentos Fixos</Text> + <Text style={styles.subtitle}> + Saldo líquido:{' '} + <Text + style={[ + styles.totalHighlight, + isTotalIncome ? { color: Colors.positive } : { color: Colors.negative } + ]} + > + {isTotalIncome ? '+ ' : (activeTotal > 0 ? '- ' : '')}{formattedTotal} + </Text> + </Text> + </View> + <TouchableOpacity + id="recurring-add-button" + style={[styles.addButton, showForm && styles.addButtonActive]} + onPress={() => { + if (showForm) { + setEditingExpenseId(null); + setName(''); + setAmount(''); + setDueDay(''); + } + setShowForm((v) => !v); + }} + accessibilityLabel="Adicionar lançamento fixo" + accessibilityRole="button" + > + <Text style={styles.addButtonText}>{showForm ? '✕' : '+'}</Text> + </TouchableOpacity> + </Animated.View> + + {showForm && ( + <Animated.View entering={FadeInDown.duration(300)}> + <Card style={styles.formCard}> + <SectionLabel text={editingExpenseId ? "Editar Lançamento" : "Novo Lançamento Fixo"} /> + <Input + id="recurring-name-input" + label="Nome" + value={name} + onChangeText={setName} + placeholder="Ex: Academia, Netflix..." + /> + <Input + id="recurring-amount-input" + label="Valor Mensal" + prefix="R$" + value={amount} + onChangeText={setAmount} + keyboardType="decimal-pad" + placeholder="0,00" + /> + + <View style={styles.typeToggle}> + <TouchableOpacity + style={[styles.typeButton, expenseType === 'expense' && styles.typeButtonExpense]} + onPress={() => setExpenseType('expense')} + > + <Text style={[styles.typeButtonText, expenseType === 'expense' && styles.typeButtonTextActive]}> + Despesa + </Text> + </TouchableOpacity> + <TouchableOpacity + style={[styles.typeButton, expenseType === 'income' && styles.typeButtonIncome]} + onPress={() => setExpenseType('income')} + > + <Text style={[styles.typeButtonText, expenseType === 'income' && styles.typeButtonTextActive]}> + Receita + </Text> + </TouchableOpacity> + </View> + + <Input + id="recurring-due-day-input" + label="Dia de Vencimento (opcional)" + value={dueDay} + onChangeText={setDueDay} + keyboardType="number-pad" + placeholder="Ex: 5" + hint="Dia do mês em que costuma vencer" + /> + <Button + id="recurring-save-button" + label={editingExpenseId ? "Salvar Alterações" : "Adicionar Lançamento Fixo"} + fullWidth + onPress={handleAdd} + loading={isSubmitting} + disabled={isSubmitting} + /> + </Card> + </Animated.View> + )} + + <Animated.View layout={LinearTransition.springify()}> + <Card style={styles.listCard}> + <SectionLabel text={`${expenses.length} lançamentos cadastrados`} /> + {expenses.length === 0 ? ( + <Text style={styles.emptyText}> + Nenhum lançamento fixo cadastrado.{'\n'}Toque em + para adicionar. + </Text> + ) : ( + expenses.map((expense, i) => ( + <React.Fragment key={expense.id}> + {i > 0 && <Divider style={styles.rowDivider} />} + <RecurringExpenseRow + expense={expense} + index={i} + onToggle={() => handleToggle(expense.id)} + onPress={() => setSelectedExpense(expense)} + /> + </React.Fragment> + )) + )} + </Card> + </Animated.View> + </ScrollView> + )} + + <ActionModal + visible={expenseToDelete !== null} + title="Remover lançamento fixo" + message="Deseja realmente remover este lançamento? Ele deixará de afetar seu saldo mensal." + confirmText="Remover" + isDestructive={true} + onCancel={() => setExpenseToDelete(null)} + onConfirm={confirmDelete} + /> + + <OptionsModal + visible={selectedExpense !== null} + title={selectedExpense?.name} + onClose={() => setSelectedExpense(null)} + options={[ + { + label: 'Editar', + icon: 'edit-2', + onPress: () => selectedExpense && handleEdit(selectedExpense), + }, + { + label: selectedExpense?.is_active ? 'Pausar' : 'Ativar', + icon: selectedExpense?.is_active ? 'pause-circle' : 'play-circle', + onPress: () => { + if (selectedExpense) { + handleToggle(selectedExpense.id); + setSelectedExpense(null); + } + }, + }, + { + label: 'Excluir', + icon: 'trash-2', + destructive: true, + onPress: () => selectedExpense && handleDelete(selectedExpense.id), + } + ]} + /> + </View> + ); +} + +const styles = StyleSheet.create({ + container: { + flex: 1, + backgroundColor: Colors.background, + }, + scroll: { + padding: Spacing.md, + gap: Spacing.md, + }, + header: { + flexDirection: 'row', + justifyContent: 'space-between', + alignItems: 'flex-start', + }, + title: { + ...Typography.h1, + color: Colors.textPrimary, + }, + subtitle: { + ...Typography.body, + color: Colors.textSecondary, + marginTop: 4, + }, + totalHighlight: { + color: Colors.negative, + fontFamily: 'DMSans_600SemiBold', + }, + addButton: { + width: 44, + height: 44, + borderRadius: 22, + backgroundColor: Colors.primary, + alignItems: 'center', + justifyContent: 'center', + }, + addButtonActive: { + backgroundColor: Colors.surfaceElevated, + borderWidth: 1, + borderColor: Colors.border, + }, + addButtonText: { + ...Typography.h2, + color: Colors.white, + }, + formCard: { + gap: Spacing.md, + }, + listCard: { + gap: Spacing.xs, + }, + rowDivider: { + marginVertical: 0, + }, + emptyText: { + ...Typography.body, + color: Colors.textMuted, + textAlign: 'center', + paddingVertical: Spacing.xl, + lineHeight: 24, + }, + typeToggle: { + flexDirection: 'row', + gap: Spacing.sm, + marginBottom: Spacing.sm, + }, + typeButton: { + flex: 1, + paddingVertical: Spacing.sm, + alignItems: 'center', + borderRadius: 12, + backgroundColor: Colors.surfaceElevated, + borderWidth: 1, + borderColor: Colors.border, + }, + typeButtonExpense: { + backgroundColor: `${Colors.negative}15`, + borderColor: `${Colors.negative}40`, + }, + typeButtonIncome: { + backgroundColor: `${Colors.positive}15`, + borderColor: `${Colors.positive}40`, + }, + typeButtonText: { + ...Typography.body, + color: Colors.textSecondary, + fontFamily: 'DMSans_500Medium', + }, + typeButtonTextActive: { + color: Colors.textPrimary, + fontFamily: 'DMSans_700Bold', + }, +}); diff --git a/src/screens/salary-screen.tsx b/src/screens/salary-screen.tsx new file mode 100644 index 0000000..6847c4b --- /dev/null +++ b/src/screens/salary-screen.tsx @@ -0,0 +1,232 @@ +import { useState } from 'react'; +import { + Alert, + ScrollView, + StyleSheet, + Text, + View, +} from 'react-native'; +import Animated, { FadeInDown, LinearTransition } from 'react-native-reanimated'; +import { useSafeAreaInsets } from 'react-native-safe-area-context'; +import * as Haptics from 'expo-haptics'; +import { Button } from '@/components/ui/button'; +import { Input } from '@/components/ui/input'; +import { Card, Divider, SectionLabel } from '@/components/ui/primitives'; +import { useSalaryCalculator } from '@/hooks/use-app-hooks'; +import { Colors, Spacing, Typography } from '@/constants/theme'; +import { formatCurrency } from '@/utils/tax-calculator'; +import { updateUserSalary } from '@/services/api'; +import { useAuth } from '@/contexts/AuthContext'; +import { useIsFocused } from "expo-router/react-navigation"; + +export default function SalaryScreen() { + const insets = useSafeAreaInsets(); + const { user, updateUser } = useAuth(); + const isFocused = useIsFocused(); + + const [grossStr, setGrossStr] = useState(user?.gross_salary ? String(user.gross_salary) : ''); + const [netOverrideStr, setNetOverrideStr] = useState( + user?.net_salary_override ? String(user.net_salary_override) : '' + ); + const [isOverriding, setIsOverriding] = useState(!!user?.net_salary_override); + + const result = useSalaryCalculator(grossStr); + + const effectiveNet = isOverriding + ? parseFloat(netOverrideStr.replace(',', '.')) || 0 + : (result?.salarioLiquidoCalculado ?? 0); + + const [isSaving, setIsSaving] = useState(false); + const [saved, setSaved] = useState(false); + + async function handleSave() { + if (!result || !user) return; + try { + setIsSaving(true); + setSaved(false); + const updatedUser = await updateUserSalary(user.id, { + gross_salary: result.salarioBruto, + net_salary_override: isOverriding ? effectiveNet : null, + }); + await updateUser(updatedUser); + Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success); + setSaved(true); + setTimeout(() => setSaved(false), 2500); + } catch (err) { + Alert.alert('Erro', 'Não foi possível salvar o salário.'); + } finally { + setIsSaving(false); + } + } + + function handleToggleOverride() { + if (isOverriding) { + setNetOverrideStr(''); + setIsOverriding(false); + } else { + setNetOverrideStr(result?.salarioLiquidoCalculado.toFixed(2) ?? ''); + setIsOverriding(true); + } + } + + return ( + <View style={[styles.container, { paddingTop: insets.top }]}> + {isFocused && ( + <ScrollView + contentContainerStyle={[ + styles.scroll, + { paddingBottom: insets.bottom + Spacing.xxl }, + ]} + keyboardShouldPersistTaps="handled" + showsVerticalScrollIndicator={false} + > + <Animated.View entering={FadeInDown.duration(400)}> + <Text style={styles.title}>Meu Salário</Text> + <Text style={styles.subtitle}> + Informe seu salário bruto e ajuste o líquido se necessário. + </Text> + </Animated.View> + + <Animated.View entering={FadeInDown.delay(100).duration(400)}> + <Input + id="salary-gross-input" + label="Salário Bruto" + prefix="R$" + value={grossStr} + onChangeText={setGrossStr} + keyboardType="decimal-pad" + placeholder="0,00" + hint="Valor antes dos descontos (INSS, IRRF)" + /> + </Animated.View> + + {result && ( + <Animated.View entering={FadeInDown.delay(150).duration(400)} layout={LinearTransition.springify()}> + <Card style={styles.resultCard}> + <SectionLabel text="Cálculo Automático" /> + + <View style={styles.resultRow}> + <Text style={styles.resultLabel}>Salário Bruto</Text> + <Text style={[styles.resultValue, { color: Colors.textPrimary }]}> + {formatCurrency(result.salarioBruto)} + </Text> + </View> + + <View style={styles.resultRow}> + <Text style={styles.resultLabel}>Desconto INSS</Text> + <Text style={[styles.resultValue, { color: Colors.negative }]}> + - {formatCurrency(result.descontoINSS)} + </Text> + </View> + + <View style={styles.resultRow}> + <Text style={styles.resultLabel}>Desconto IRRF</Text> + <Text style={[styles.resultValue, { color: Colors.negative }]}> + - {formatCurrency(result.descontoIRRF)} + </Text> + </View> + + <Divider /> + + <View style={styles.resultRow}> + <Text style={[styles.resultLabel, { color: Colors.textPrimary }]}> + Salário Líquido + </Text> + <Text style={[styles.resultValue, { color: Colors.positive }]}> + {formatCurrency(result.salarioLiquidoCalculado)} + </Text> + </View> + </Card> + </Animated.View> + )} + + {result && ( + <Animated.View + entering={FadeInDown.delay(200).duration(400)} + layout={LinearTransition.springify()} + style={styles.overrideSection} + > + <Button + label={ + isOverriding + ? 'Usar valor calculado' + : 'Tenho outros descontos (ajustar manualmente)' + } + variant="ghost" + onPress={handleToggleOverride} + /> + + {isOverriding && ( + <Animated.View entering={FadeInDown.duration(300)}> + <Input + id="salary-net-override-input" + label="Salário Líquido Real" + prefix="R$" + value={netOverrideStr} + onChangeText={setNetOverrideStr} + keyboardType="decimal-pad" + placeholder="0,00" + hint="Descontos extras: plano de saúde, VT, previdência privada, etc." + /> + </Animated.View> + )} + </Animated.View> + )} + + {result && ( + <Animated.View entering={FadeInDown.delay(300).duration(400)} layout={LinearTransition.springify()}> + <Button + id="salary-save-button" + label={saved ? 'Salvo com sucesso! ✓' : 'Salvar Salário'} + fullWidth + onPress={handleSave} + disabled={!result || isSaving || saved} + loading={isSaving} + style={saved ? { backgroundColor: Colors.positive } : undefined} + /> + </Animated.View> + )} + </ScrollView> + )} + </View> + ); +} + +const styles = StyleSheet.create({ + container: { + flex: 1, + backgroundColor: Colors.background, + }, + scroll: { + padding: Spacing.md, + gap: Spacing.lg, + }, + title: { + ...Typography.h1, + color: Colors.textPrimary, + marginBottom: Spacing.xs, + }, + subtitle: { + ...Typography.body, + color: Colors.textSecondary, + }, + resultCard: { + gap: Spacing.sm, + }, + resultRow: { + flexDirection: 'row', + justifyContent: 'space-between', + alignItems: 'center', + }, + resultLabel: { + ...Typography.body, + color: Colors.textSecondary, + }, + resultValue: { + ...Typography.body, + fontFamily: 'DMSans_600SemiBold', + }, + overrideSection: { + gap: Spacing.md, + }, +}); diff --git a/src/services/api.ts b/src/services/api.ts new file mode 100644 index 0000000..edd376e --- /dev/null +++ b/src/services/api.ts @@ -0,0 +1,165 @@ +import { Platform } from 'react-native'; +import type { DashboardData, OneTimeExpense, RecurringExpense, User } from '@/types'; + +export type LoginPayload = any; +export type RegisterPayload = any; + +const BASE_URL = 'http://64.181.172.51:3333/api/v1' + +let currentToken: string | null = null; + +export function setApiToken(token: string | null) { + currentToken = token; +} + +async function fetcher<T>(endpoint: string, options?: RequestInit): Promise<T> { + const url = `${BASE_URL}${endpoint}`; + try { + const headers: Record<string, string> = {}; + if (options?.body) { + headers['Content-Type'] = 'application/json'; + } + if (currentToken) { + headers['Authorization'] = `Bearer ${currentToken}`; + } + + const response = await fetch(url, { + ...options, + headers: { + ...headers, + ...options?.headers, + }, + }); + + if (!response.ok) { + const errorText = await response.text(); + console.error(`API Error (${response.status}):`, errorText); + throw new Error(`API Error: ${response.status}`); + } + + const data = await response.json(); + return data; + } catch (error) { + console.error(`Fetch Error on ${endpoint}:`, error); + throw error; + } +} + +export async function apiLogin(data: any): Promise<{ user: User; token: string }> { + const result = await fetcher<{ data: { user: User; token: string } }>('/auth/login', { + method: 'POST', + body: JSON.stringify(data), + }); + return result.data; +} + +export async function apiRegister(data: any): Promise<{ user: User; token: string }> { + const result = await fetcher<{ data: { user: User; token: string } }>('/auth/register', { + method: 'POST', + body: JSON.stringify(data), + }); + return result.data; +} + +export async function getDashboard(userId: number, month?: number, year?: number): Promise<DashboardData> { + const params = new URLSearchParams(); + if (month) params.append('month', month.toString()); + if (year) params.append('year', year.toString()); + const qs = params.toString() ? `?${params.toString()}` : ''; + + const result = await fetcher<{ data: DashboardData }>(`/users/${userId}/dashboard${qs}`); + return result.data; +} + +export async function updateUserSalary( + userId: number, + data: { gross_salary: number; net_salary_override: number | null }, +): Promise<User> { + const result = await fetcher<{ data: User }>(`/users/${userId}`, { + method: 'PUT', + body: JSON.stringify(data), + }); + return result.data; +} + +export async function getRecurringExpenses(userId: number): Promise<RecurringExpense[]> { + const result = await fetcher<{ data: RecurringExpense[] }>(`/users/${userId}/recurring-expenses`); + return result.data; +} + +export async function createRecurringExpense( + userId: number, + data: Omit<RecurringExpense, 'id' | 'user_id' | 'created_at' | 'updated_at'>, +): Promise<RecurringExpense> { + const result = await fetcher<{ data: RecurringExpense }>(`/users/${userId}/recurring-expenses`, { + method: 'POST', + body: JSON.stringify(data), + }); + return result.data; +} + +export async function toggleRecurringExpense( + userId: number, + expenseId: number, +): Promise<RecurringExpense> { + const result = await fetcher<{ data: RecurringExpense }>(`/users/${userId}/recurring-expenses/${expenseId}/toggle`, { + method: 'PATCH', + }); + return result.data; +} + +export async function updateRecurringExpense( + userId: number, + expenseId: number, + data: Partial<Omit<RecurringExpense, 'id' | 'user_id' | 'created_at' | 'updated_at'>>, +): Promise<RecurringExpense> { + const result = await fetcher<{ data: RecurringExpense }>(`/users/${userId}/recurring-expenses/${expenseId}`, { + method: 'PUT', + body: JSON.stringify(data), + }); + return result.data; +} + +export async function deleteRecurringExpense(userId: number, expenseId: number): Promise<void> { + await fetcher(`/users/${userId}/recurring-expenses/${expenseId}`, { + method: 'DELETE', + }); +} + +export async function getOneTimeExpenses(userId: number, month?: number, year?: number): Promise<OneTimeExpense[]> { + const params = new URLSearchParams(); + if (month) params.append('month', month.toString()); + if (year) params.append('year', year.toString()); + const qs = params.toString() ? `?${params.toString()}` : ''; + const result = await fetcher<{ data: OneTimeExpense[] }>(`/users/${userId}/one-time-expenses${qs}`); + return result.data; +} + +export async function createOneTimeExpense( + userId: number, + data: Omit<OneTimeExpense, 'id' | 'user_id' | 'created_at' | 'updated_at'>, +): Promise<OneTimeExpense> { + const result = await fetcher<{ data: OneTimeExpense }>(`/users/${userId}/one-time-expenses`, { + method: 'POST', + body: JSON.stringify(data), + }); + return result.data; +} + +export async function updateOneTimeExpense( + userId: number, + expenseId: number, + data: Partial<Omit<OneTimeExpense, 'id' | 'user_id' | 'created_at' | 'updated_at'>>, +): Promise<OneTimeExpense> { + const result = await fetcher<{ data: OneTimeExpense }>(`/users/${userId}/one-time-expenses/${expenseId}`, { + method: 'PUT', + body: JSON.stringify(data), + }); + return result.data; +} + +export async function deleteOneTimeExpense(userId: number, expenseId: number): Promise<void> { + await fetcher(`/users/${userId}/one-time-expenses/${expenseId}`, { + method: 'DELETE', + }); +} diff --git a/src/types/index.ts b/src/types/index.ts new file mode 100644 index 0000000..7554419 --- /dev/null +++ b/src/types/index.ts @@ -0,0 +1,98 @@ +export interface User { + id: number; + name: string; + gross_salary: number; + net_salary_override: number | null; + created_at: string; + updated_at: string; +} + +export interface Income { + id: number; + user_id: number; + gross_salary: number; + calculated_net_salary: number; + effective_net_salary: number; + reference_month: number; + reference_year: number; + description: string | null; + created_at: string; + updated_at: string; +} + +export type Category = + | 'moradia' + | 'alimentação' + | 'transporte' + | 'saúde' + | 'educação' + | 'lazer' + | 'serviços' + | 'outros'; + +export interface RecurringExpense { + id: number; + user_id: number; + name: string; + amount: number; + category: Category; + type: 'expense' | 'income'; + due_day: number | null; + is_active: boolean; + starts_at: string; + ends_at: string | null; + created_at: string; + updated_at: string; +} + +export interface OneTimeExpense { + id: number; + user_id: number; + name: string; + amount: number; + category: Category; + type: 'expense' | 'income'; + expense_date: string; + notes: string | null; + created_at: string; + updated_at: string; +} + +export interface DashboardExpenseItem { + id: number; + name: string; + amount: number; + category: string; + type: 'expense' | 'income'; + is_active?: boolean; + expense_date?: string; +} + +export interface DashboardData { + user: { + id: number; + name: string; + gross_salary: number; + net_salary_override: number | null; + }; + period: { month: number; year: number }; + salary: { + gross: number; + calculated_net: number; + effective_net: number; + inss_discount: number; + irrf_discount: number; + has_override: boolean; + }; + expenses: { + recurring_total: number; + one_time_total: number; + total: number; + recurring_list: DashboardExpenseItem[]; + one_time_list: DashboardExpenseItem[]; + }; + balance: { + available: number; + expense_ratio: number; + }; +} diff --git a/src/utils/tax-calculator.ts b/src/utils/tax-calculator.ts new file mode 100644 index 0000000..64b1c08 --- /dev/null +++ b/src/utils/tax-calculator.ts @@ -0,0 +1,85 @@ +const INSS_TABLE = [ + { upTo: 1_518.0, rate: 0.075 }, + { upTo: 2_793.88, rate: 0.09 }, + { upTo: 4_190.83, rate: 0.12 }, + { upTo: 8_157.41, rate: 0.14 }, +] as const; + +const INSS_TETO = 908.86; + +export function calcularINSS(salarioBruto: number): number { + if (salarioBruto <= 0) return 0; + if (salarioBruto > INSS_TABLE[INSS_TABLE.length - 1].upTo) return INSS_TETO; + + let inss = 0; + let limiteAnterior = 0; + + for (const faixa of INSS_TABLE) { + const baseNaFaixa = Math.min(salarioBruto, faixa.upTo) - limiteAnterior; + if (baseNaFaixa <= 0) break; + inss += baseNaFaixa * faixa.rate; + limiteAnterior = faixa.upTo; + } + + return parseFloat(inss.toFixed(2)); +} + +interface FaixaIRRF { + upTo: number | null; + rate: number; + deduction: number; +} + +const IRRF_TABLE: FaixaIRRF[] = [ + { upTo: 2_259.2, rate: 0, deduction: 0 }, + { upTo: 2_826.65, rate: 0.075, deduction: 169.44 }, + { upTo: 3_751.05, rate: 0.15, deduction: 381.44 }, + { upTo: 4_664.68, rate: 0.225, deduction: 662.77 }, + { upTo: null, rate: 0.275, deduction: 896.0 }, +]; + +export function calcularIRRF(salarioBruto: number, inss: number): number { + const base = salarioBruto - inss; + if (base <= 0) return 0; + + const faixa = IRRF_TABLE.find((f) => f.upTo === null || base <= f.upTo)!; + return parseFloat(Math.max(0, base * faixa.rate - faixa.deduction).toFixed(2)); +} + +export interface ResultadoCalculo { + salarioBruto: number; + descontoINSS: number; + descontoIRRF: number; + totalDescontos: number; + salarioLiquidoCalculado: number; +} + +export function calcularSalarioLiquido(salarioBruto: number): ResultadoCalculo { + const descontoINSS = calcularINSS(salarioBruto); + const descontoIRRF = calcularIRRF(salarioBruto, descontoINSS); + const totalDescontos = parseFloat((descontoINSS + descontoIRRF).toFixed(2)); + const salarioLiquidoCalculado = parseFloat( + (salarioBruto - totalDescontos).toFixed(2), + ); + return { salarioBruto, descontoINSS, descontoIRRF, totalDescontos, salarioLiquidoCalculado }; +} + +export function formatCurrency(value: number): string { + return value.toLocaleString('pt-BR', { + style: 'currency', + currency: 'BRL', + minimumFractionDigits: 2, + }); +} + +export function formatCurrencyCompact(value: number): string { + if (Math.abs(value) >= 1_000) { + return value.toLocaleString('pt-BR', { + style: 'currency', + currency: 'BRL', + minimumFractionDigits: 0, + maximumFractionDigits: 0, + }); + } + return formatCurrency(value); +} |