feat: create Explore/StatsScreen
- Add monthly summary with useMemo - Add category expenses analysis - Display total balance overview
This commit is contained in:
parent
f0b2cf9f7e
commit
add7ea82d3
@ -1,112 +1,164 @@
|
||||
import { Image } from 'expo-image';
|
||||
import { Platform, StyleSheet } from 'react-native';
|
||||
import React, { useMemo } from 'react';
|
||||
import { View, Text, StyleSheet, ScrollView, ActivityIndicator } from 'react-native';
|
||||
import { COLORS, FONTS } from '@/constants/theme';
|
||||
import { Header } from '@/components/Header';
|
||||
import { useTransactions } from '@/hooks/useTransactions';
|
||||
import { calculateBalance, formatRupiah } from '@/utils/helpers';
|
||||
|
||||
import { Collapsible } from '@/components/ui/collapsible';
|
||||
import { ExternalLink } from '@/components/external-link';
|
||||
import ParallaxScrollView from '@/components/parallax-scroll-view';
|
||||
import { ThemedText } from '@/components/themed-text';
|
||||
import { ThemedView } from '@/components/themed-view';
|
||||
import { IconSymbol } from '@/components/ui/icon-symbol';
|
||||
import { Fonts } from '@/constants/theme';
|
||||
export default function ExploreScreen() {
|
||||
const { transactions, loading } = useTransactions();
|
||||
|
||||
const monthlyData = useMemo(() => {
|
||||
const grouped: Record<string, { income: number; expense: number }> = {};
|
||||
|
||||
transactions.forEach((t) => {
|
||||
const monthKey = t.date.substring(0, 7);
|
||||
if (!grouped[monthKey]) {
|
||||
grouped[monthKey] = { income: 0, expense: 0 };
|
||||
}
|
||||
if (t.type === 'income') {
|
||||
grouped[monthKey].income += t.amount;
|
||||
} else {
|
||||
grouped[monthKey].expense += t.amount;
|
||||
}
|
||||
});
|
||||
|
||||
return Object.entries(grouped)
|
||||
.map(([month, data]) => ({
|
||||
month,
|
||||
income: data.income,
|
||||
expense: data.expense,
|
||||
balance: data.income - data.expense,
|
||||
}))
|
||||
.sort((a, b) => b.month.localeCompare(a.month))
|
||||
.slice(0, 6);
|
||||
}, [transactions]);
|
||||
|
||||
const categoryData = useMemo(() => {
|
||||
const grouped: Record<string, number> = {};
|
||||
|
||||
transactions
|
||||
.filter((t) => t.type === 'expense')
|
||||
.forEach((t) => {
|
||||
if (!grouped[t.category]) grouped[t.category] = 0;
|
||||
grouped[t.category] += t.amount;
|
||||
});
|
||||
|
||||
return Object.entries(grouped)
|
||||
.map(([category, amount]) => ({ category, amount }))
|
||||
.sort((a, b) => b.amount - a.amount)
|
||||
.slice(0, 5);
|
||||
}, [transactions]);
|
||||
|
||||
const balance = calculateBalance(transactions);
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<View style={styles.loading}>
|
||||
<ActivityIndicator size="large" color={COLORS.primary} />
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const formatMonth = (monthStr: string) => {
|
||||
const [year, month] = monthStr.split('-');
|
||||
const date = new Date(parseInt(year), parseInt(month) - 1);
|
||||
return new Intl.DateTimeFormat('id-ID', { month: 'long', year: 'numeric' }).format(date);
|
||||
};
|
||||
|
||||
export default function TabTwoScreen() {
|
||||
return (
|
||||
<ParallaxScrollView
|
||||
headerBackgroundColor={{ light: '#D0D0D0', dark: '#353636' }}
|
||||
headerImage={
|
||||
<IconSymbol
|
||||
size={310}
|
||||
color="#808080"
|
||||
name="chevron.left.forwardslash.chevron.right"
|
||||
style={styles.headerImage}
|
||||
/>
|
||||
}>
|
||||
<ThemedView style={styles.titleContainer}>
|
||||
<ThemedText
|
||||
type="title"
|
||||
style={{
|
||||
fontFamily: Fonts.rounded,
|
||||
}}>
|
||||
Explore
|
||||
</ThemedText>
|
||||
</ThemedView>
|
||||
<ThemedText>This app includes example code to help you get started.</ThemedText>
|
||||
<Collapsible title="File-based routing">
|
||||
<ThemedText>
|
||||
This app has two screens:{' '}
|
||||
<ThemedText type="defaultSemiBold">app/(tabs)/index.tsx</ThemedText> and{' '}
|
||||
<ThemedText type="defaultSemiBold">app/(tabs)/explore.tsx</ThemedText>
|
||||
</ThemedText>
|
||||
<ThemedText>
|
||||
The layout file in <ThemedText type="defaultSemiBold">app/(tabs)/_layout.tsx</ThemedText>{' '}
|
||||
sets up the tab navigator.
|
||||
</ThemedText>
|
||||
<ExternalLink href="https://docs.expo.dev/router/introduction">
|
||||
<ThemedText type="link">Learn more</ThemedText>
|
||||
</ExternalLink>
|
||||
</Collapsible>
|
||||
<Collapsible title="Android, iOS, and web support">
|
||||
<ThemedText>
|
||||
You can open this project on Android, iOS, and the web. To open the web version, press{' '}
|
||||
<ThemedText type="defaultSemiBold">w</ThemedText> in the terminal running this project.
|
||||
</ThemedText>
|
||||
</Collapsible>
|
||||
<Collapsible title="Images">
|
||||
<ThemedText>
|
||||
For static images, you can use the <ThemedText type="defaultSemiBold">@2x</ThemedText> and{' '}
|
||||
<ThemedText type="defaultSemiBold">@3x</ThemedText> suffixes to provide files for
|
||||
different screen densities
|
||||
</ThemedText>
|
||||
<Image
|
||||
source={require('@/assets/images/react-logo.png')}
|
||||
style={{ width: 100, height: 100, alignSelf: 'center' }}
|
||||
/>
|
||||
<ExternalLink href="https://reactnative.dev/docs/images">
|
||||
<ThemedText type="link">Learn more</ThemedText>
|
||||
</ExternalLink>
|
||||
</Collapsible>
|
||||
<Collapsible title="Light and dark mode components">
|
||||
<ThemedText>
|
||||
This template has light and dark mode support. The{' '}
|
||||
<ThemedText type="defaultSemiBold">useColorScheme()</ThemedText> hook lets you inspect
|
||||
what the user's current color scheme is, and so you can adjust UI colors accordingly.
|
||||
</ThemedText>
|
||||
<ExternalLink href="https://docs.expo.dev/develop/user-interface/color-themes/">
|
||||
<ThemedText type="link">Learn more</ThemedText>
|
||||
</ExternalLink>
|
||||
</Collapsible>
|
||||
<Collapsible title="Animations">
|
||||
<ThemedText>
|
||||
This template includes an example of an animated component. The{' '}
|
||||
<ThemedText type="defaultSemiBold">components/HelloWave.tsx</ThemedText> component uses
|
||||
the powerful{' '}
|
||||
<ThemedText type="defaultSemiBold" style={{ fontFamily: Fonts.mono }}>
|
||||
react-native-reanimated
|
||||
</ThemedText>{' '}
|
||||
library to create a waving hand animation.
|
||||
</ThemedText>
|
||||
{Platform.select({
|
||||
ios: (
|
||||
<ThemedText>
|
||||
The <ThemedText type="defaultSemiBold">components/ParallaxScrollView.tsx</ThemedText>{' '}
|
||||
component provides a parallax effect for the header image.
|
||||
</ThemedText>
|
||||
),
|
||||
})}
|
||||
</Collapsible>
|
||||
</ParallaxScrollView>
|
||||
<View style={styles.container}>
|
||||
<Header title="Statistik Keuangan" />
|
||||
<ScrollView style={styles.content}>
|
||||
<View style={styles.card}>
|
||||
<Text style={styles.sectionTitle}>Ringkasan Keseluruhan</Text>
|
||||
<View style={styles.summaryRow}>
|
||||
<View style={styles.summaryItem}>
|
||||
<Text style={styles.summaryLabel}>Total Pemasukan</Text>
|
||||
<Text style={[styles.summaryAmount, styles.income]}>
|
||||
{formatRupiah(balance.income)}
|
||||
</Text>
|
||||
</View>
|
||||
<View style={styles.summaryItem}>
|
||||
<Text style={styles.summaryLabel}>Total Pengeluaran</Text>
|
||||
<Text style={[styles.summaryAmount, styles.expense]}>
|
||||
{formatRupiah(balance.expense)}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
<View style={styles.divider} />
|
||||
<View style={styles.totalRow}>
|
||||
<Text style={styles.totalLabel}>Saldo Akhir</Text>
|
||||
<Text style={styles.totalAmount}>
|
||||
{formatRupiah(balance.total)}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View style={styles.card}>
|
||||
<Text style={styles.sectionTitle}>Ringkasan Bulanan</Text>
|
||||
{monthlyData.length === 0 ? (
|
||||
<Text style={styles.emptyText}>Belum ada data</Text>
|
||||
) : (
|
||||
monthlyData.map((item) => (
|
||||
<View key={item.month} style={styles.monthItem}>
|
||||
<Text style={styles.monthLabel}>{formatMonth(item.month)}</Text>
|
||||
<View style={styles.monthAmounts}>
|
||||
<Text style={styles.incomeSmall}>
|
||||
+{formatRupiah(item.income)}
|
||||
</Text>
|
||||
<Text style={styles.expenseSmall}>
|
||||
-{formatRupiah(item.expense)}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
))
|
||||
)}
|
||||
</View>
|
||||
|
||||
<View style={styles.card}>
|
||||
<Text style={styles.sectionTitle}>Kategori Pengeluaran</Text>
|
||||
{categoryData.length === 0 ? (
|
||||
<Text style={styles.emptyText}>Belum ada data</Text>
|
||||
) : (
|
||||
categoryData.map((item) => (
|
||||
<View key={item.category} style={styles.categoryItem}>
|
||||
<Text style={styles.categoryLabel}>{item.category}</Text>
|
||||
<Text style={styles.categoryAmount}>
|
||||
{formatRupiah(item.amount)}
|
||||
</Text>
|
||||
</View>
|
||||
))
|
||||
)}
|
||||
</View>
|
||||
</ScrollView>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
headerImage: {
|
||||
color: '#808080',
|
||||
bottom: -90,
|
||||
left: -35,
|
||||
position: 'absolute',
|
||||
},
|
||||
titleContainer: {
|
||||
flexDirection: 'row',
|
||||
gap: 8,
|
||||
},
|
||||
container: { flex: 1, backgroundColor: COLORS.background },
|
||||
content: { flex: 1, padding: 16 },
|
||||
loading: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: COLORS.background },
|
||||
card: { backgroundColor: COLORS.card, borderRadius: 12, padding: 16, marginBottom: 16, elevation: 3 },
|
||||
sectionTitle: { fontSize: FONTS.regular, fontWeight: 'bold', color: COLORS.text, marginBottom: 16 },
|
||||
summaryRow: { flexDirection: 'row', justifyContent: 'space-between' },
|
||||
summaryItem: { flex: 1, alignItems: 'center' },
|
||||
summaryLabel: { fontSize: FONTS.small, color: COLORS.textSecondary, marginBottom: 4 },
|
||||
summaryAmount: { fontSize: FONTS.regular, fontWeight: '600' },
|
||||
income: { color: COLORS.income },
|
||||
expense: { color: COLORS.expense },
|
||||
divider: { height: 1, backgroundColor: COLORS.border, marginVertical: 16 },
|
||||
totalRow: { alignItems: 'center' },
|
||||
totalLabel: { fontSize: FONTS.small, color: COLORS.textSecondary, marginBottom: 4 },
|
||||
totalAmount: { fontSize: FONTS.large, fontWeight: 'bold', color: COLORS.text },
|
||||
monthItem: { flexDirection: 'row', justifyContent: 'space-between', paddingVertical: 8, borderBottomWidth: 1, borderBottomColor: COLORS.border },
|
||||
monthLabel: { fontSize: FONTS.small, color: COLORS.text },
|
||||
monthAmounts: { flexDirection: 'row', gap: 12 },
|
||||
incomeSmall: { fontSize: FONTS.small, color: COLORS.income },
|
||||
expenseSmall: { fontSize: FONTS.small, color: COLORS.expense },
|
||||
categoryItem: { flexDirection: 'row', justifyContent: 'space-between', paddingVertical: 8, borderBottomWidth: 1, borderBottomColor: COLORS.border },
|
||||
categoryLabel: { fontSize: FONTS.small, color: COLORS.text },
|
||||
categoryAmount: { fontSize: FONTS.small, fontWeight: '600', color: COLORS.expense },
|
||||
emptyText: { fontSize: FONTS.small, color: COLORS.textSecondary, textAlign: 'center', paddingVertical: 16 },
|
||||
});
|
||||
Loading…
Reference in New Issue
Block a user