115 lines
5.3 KiB
TypeScript
115 lines
5.3 KiB
TypeScript
import { router } from 'expo-router';
|
|
import { StatusBar } from 'expo-status-bar';
|
|
import { useState } from 'react';
|
|
import { KeyboardAvoidingView, Platform, ScrollView, Text, TextInput, TouchableOpacity, View } from 'react-native';
|
|
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
|
import { getDB } from '../db';
|
|
|
|
export default function AddGoalScreen() {
|
|
const insets = useSafeAreaInsets();
|
|
const [name, setName] = useState('');
|
|
const [targetAmount, setTargetAmount] = useState('');
|
|
const [currentAmount, setCurrentAmount] = useState('');
|
|
const [deadline, setDeadline] = useState('');
|
|
|
|
const handleSave = async () => {
|
|
if (!name || !targetAmount) {
|
|
alert('Please fill in name and target amount');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const db = getDB();
|
|
await db.runAsync(
|
|
'INSERT INTO goals (name, target_amount, current_amount, deadline) VALUES (?, ?, ?, ?)',
|
|
[name, parseFloat(targetAmount), currentAmount ? parseFloat(currentAmount) : 0, deadline]
|
|
);
|
|
router.back();
|
|
} catch (error) {
|
|
console.error(error);
|
|
alert('Failed to save goal');
|
|
}
|
|
};
|
|
|
|
return (
|
|
<View className="flex-1 bg-gray-100 dark:bg-gray-900">
|
|
<StatusBar style={Platform.OS === 'ios' ? 'light' : 'auto'} />
|
|
|
|
<View className="bg-teal-600 pt-4 pb-6 px-6 rounded-b-3xl shadow-lg">
|
|
<Text className="text-white text-2xl font-bold mt-8 text-center">New Goal</Text>
|
|
</View>
|
|
|
|
<KeyboardAvoidingView
|
|
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
|
|
className="flex-1"
|
|
>
|
|
<ScrollView className="flex-1 px-6 pt-6">
|
|
|
|
{/* Target Amount Input */}
|
|
<View className="bg-white dark:bg-gray-800 rounded-2xl p-6 mb-4 shadow-sm">
|
|
<Text className="text-gray-500 text-sm mb-2">Target Amount</Text>
|
|
<View className="flex-row items-center">
|
|
<Text className="text-3xl font-bold text-gray-900 dark:text-white mr-2">€</Text>
|
|
<TextInput
|
|
className="flex-1 text-4xl font-bold text-gray-900 dark:text-white"
|
|
placeholder="1000.00"
|
|
keyboardType="numeric"
|
|
value={targetAmount}
|
|
onChangeText={setTargetAmount}
|
|
placeholderTextColor="#9CA3AF"
|
|
/>
|
|
</View>
|
|
</View>
|
|
|
|
{/* Details Form */}
|
|
<View className="bg-white dark:bg-gray-800 rounded-2xl p-6 shadow-sm space-y-4">
|
|
<View>
|
|
<Text className="text-gray-500 text-sm mb-2">Goal Name</Text>
|
|
<TextInput
|
|
className="w-full bg-gray-50 dark:bg-gray-700 p-4 rounded-xl text-gray-900 dark:text-white"
|
|
placeholder="e.g. New Car, Vacation"
|
|
value={name}
|
|
onChangeText={setName}
|
|
placeholderTextColor="#9CA3AF"
|
|
/>
|
|
</View>
|
|
|
|
<View className="mt-4">
|
|
<Text className="text-gray-500 text-sm mb-2">Current Savings (Optional)</Text>
|
|
<TextInput
|
|
className="w-full bg-gray-50 dark:bg-gray-700 p-4 rounded-xl text-gray-900 dark:text-white"
|
|
placeholder="0.00"
|
|
keyboardType="numeric"
|
|
value={currentAmount}
|
|
onChangeText={setCurrentAmount}
|
|
placeholderTextColor="#9CA3AF"
|
|
/>
|
|
</View>
|
|
|
|
<View className="mt-4">
|
|
<Text className="text-gray-500 text-sm mb-2">Deadline (Optional)</Text>
|
|
<TextInput
|
|
className="w-full bg-gray-50 dark:bg-gray-700 p-4 rounded-xl text-gray-900 dark:text-white"
|
|
placeholder="YYYY-MM-DD"
|
|
value={deadline}
|
|
onChangeText={setDeadline}
|
|
placeholderTextColor="#9CA3AF"
|
|
/>
|
|
</View>
|
|
</View>
|
|
|
|
</ScrollView>
|
|
|
|
<View className="p-6 bg-white dark:bg-gray-900 border-t border-gray-100 dark:border-gray-800" style={{ paddingBottom: Math.max(insets.bottom, 24) }}>
|
|
<TouchableOpacity
|
|
className="w-full bg-teal-600 py-4 rounded-2xl shadow-lg active:bg-teal-700"
|
|
onPress={handleSave}
|
|
>
|
|
<Text className="text-white text-center font-bold text-lg">Save Goal</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</KeyboardAvoidingView>
|
|
</View>
|
|
);
|
|
}
|