diff --git a/components/stats/SavingsOverview.tsx b/components/stats/SavingsOverview.tsx new file mode 100644 index 0000000..a79234a --- /dev/null +++ b/components/stats/SavingsOverview.tsx @@ -0,0 +1,62 @@ +import React, { useState, useEffect } from 'react'; +import { View, Text, StyleSheet } from 'react-native'; +import { useTheme } from '../../app/contexts/ThemeContext'; +import useFetch from '../../hooks/useFetch'; + +const SavingsOverview = () => { + const { colors } = useTheme(); + const [saved, setSaved] = useState(0); + const [goal, setGoal] = useState(0); + + const savedQuery = { + sql: "SELECT SUM(e.amount) as total FROM expense e LEFT JOIN category c ON e.category_guid = c.guid WHERE c.type = 'savings'", + args: [] + }; + + const goalQuery = { + sql: "SELECT SUM(allocated_amount) as total FROM category WHERE type = 'budget'", + args: [] + }; + + const { data: savedData, isLoading: savedLoading } = useFetch(savedQuery); + const { data: goalData, isLoading: goalLoading } = useFetch(goalQuery); + + useEffect(() => { + if (savedData) { + setSaved(savedData[0]?.total || 0); + } + if (goalData) { + setGoal(goalData[0]?.total || 0); + } + }, [savedData, goalData]); + + const styles = StyleSheet.create({ + container: { + margin: 10, + borderRadius: 5, + alignItems: 'center', + justifyContent: 'center' + }, + text: { + fontSize: 26, + color: colors.primaryText + }, + boldText: { + fontWeight: 'bold' + } + }); + + if (savedLoading || goalLoading) { + return Loading...; + } + + return ( + + + You have saved {saved.toFixed(2)}€ out of your goal of {goal.toFixed(2)}€. + + + ); +}; + +export default SavingsOverview; \ No newline at end of file