69 lines
2.6 KiB
TypeScript
69 lines
2.6 KiB
TypeScript
import React from 'react';
|
|
import { StyleSheet, View, ScrollView } from 'react-native';
|
|
import BudgetOverview from '../../../components/stats/BudgetOverview';
|
|
import { useTheme } from '../../contexts/ThemeContext';
|
|
import Widget from '../../../components/stats/Widget';
|
|
import CategoryProgressBarList from '../../../components/stats/CategoryProgressBarList';
|
|
import BudgetRemaining from '../../../components/stats/BudgetRemaining';
|
|
import DebugMenu from '../../../services/DebugMenu';
|
|
|
|
export default function Page() {
|
|
const { colors } = useTheme();
|
|
|
|
// Mock data #TODO Database einbinden
|
|
// what to do when amount too small?
|
|
|
|
const spent = 120.75;
|
|
const budget = 696.96;
|
|
|
|
const BudgetData = [
|
|
{ name: 'Utilities', color: '#20B2AA', maxValue: 80, currentValue: 46 },
|
|
{ name: 'Food', color: '#FF6347', maxValue: 88, currentValue: 31 },
|
|
];
|
|
|
|
const SavingsData = [
|
|
{ name: 'Education', color: '#FF6347', maxValue: 135, currentValue: 0 },
|
|
{ name: 'Rent', color: '#DA70D6', maxValue: 140, currentValue: 96 },
|
|
{ name: 'Food', color: '#F08080', maxValue: 84, currentValue: 78 },
|
|
{ name: 'Healthcare', color: '#20B2AA', maxValue: 134, currentValue: 48 },
|
|
{ name: 'Healthcare', color: '#32CD32', maxValue: 119, currentValue: 69 },
|
|
{ name: 'Clothing', color: '#32CD32', maxValue: 115, currentValue: 99 },
|
|
];
|
|
|
|
const categoryData = [
|
|
{ category: 'Food', value: 50 },
|
|
{ category: 'Rent', value: 300 },
|
|
{ category: 'Utilities', value: 100 },
|
|
];
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: colors.backgroundColor,
|
|
marginTop: 50,
|
|
alignItems: 'center',
|
|
},
|
|
});
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
<ScrollView>
|
|
<DebugMenu />
|
|
<Widget title="Budget Overview" />
|
|
<Widget>
|
|
<BudgetRemaining budget={budget} spent={spent} />
|
|
</Widget>
|
|
<Widget text='#TODO Insert Pie-Chart' image='../../../assets/images/8b14el.jpg'/>
|
|
<Widget>
|
|
<BudgetOverview budget={budget} spent={spent} />
|
|
</Widget>
|
|
<Widget title="Budget Progress">
|
|
<CategoryProgressBarList categories={BudgetData} />
|
|
</Widget>
|
|
<Widget title="Savings Progress">
|
|
<CategoryProgressBarList categories={SavingsData} />
|
|
</Widget>
|
|
</ScrollView>
|
|
</View>
|
|
);
|
|
}
|