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