Kantongku: aplikasi pencatat keuangan pribadi offline-first
This commit is contained in:
Bro
@@ -0,0 +1,336 @@
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import { LinearGradient } from 'expo-linear-gradient';
|
||||
import { useNavigation } from '@react-navigation/native';
|
||||
import { useCallback, useEffect, useState } from 'react';
|
||||
import {
|
||||
Alert,
|
||||
Image,
|
||||
KeyboardAvoidingView,
|
||||
Platform,
|
||||
Pressable,
|
||||
ScrollView,
|
||||
StyleSheet,
|
||||
Text,
|
||||
TextInput,
|
||||
View,
|
||||
} from 'react-native';
|
||||
import { colors } from '../theme/colors';
|
||||
import { formatRibuan, formatRupiah } from '../utils/format';
|
||||
import { getCategoryIcon3d } from '../utils/categoryIcons3d';
|
||||
import { addRecurring, getCategories } from '../db/repositories';
|
||||
import type { Category, TransactionType } from '../types';
|
||||
|
||||
export function RecurringFormScreen() {
|
||||
const navigation = useNavigation();
|
||||
const [type, setType] = useState<TransactionType>('expense');
|
||||
const [amountText, setAmountText] = useState('');
|
||||
const [dayText, setDayText] = useState('1');
|
||||
const [categories, setCategories] = useState<Category[]>([]);
|
||||
const [selectedCategoryId, setSelectedCategoryId] = useState<number | null>(null);
|
||||
const [note, setNote] = useState('');
|
||||
const [saving, setSaving] = useState(false);
|
||||
|
||||
const loadCategories = useCallback(async (t: TransactionType) => {
|
||||
const cats = await getCategories(t);
|
||||
setCategories(cats);
|
||||
setSelectedCategoryId(cats[0]?.id ?? null);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
loadCategories(type);
|
||||
}, [loadCategories, type]);
|
||||
|
||||
const amount = Number(amountText.replace(/[^0-9]/g, '')) || 0;
|
||||
const dayOfMonth = Math.min(31, Math.max(1, Number(dayText.replace(/[^0-9]/g, '')) || 1));
|
||||
|
||||
const switchType = (t: TransactionType) => {
|
||||
setType(t);
|
||||
loadCategories(t);
|
||||
};
|
||||
|
||||
const handleSave = async () => {
|
||||
if (amount <= 0) {
|
||||
Alert.alert('Nominal kosong', 'Isi nominal dulu ya, Mas.');
|
||||
return;
|
||||
}
|
||||
setSaving(true);
|
||||
try {
|
||||
await addRecurring({
|
||||
type,
|
||||
amount,
|
||||
categoryId: selectedCategoryId,
|
||||
note: note.trim(),
|
||||
dayOfMonth,
|
||||
});
|
||||
Alert.alert('Tersimpan ✅', 'Transaksi berulang aktif. Sisih akan dibuat otomatis tiap bulan.', [
|
||||
{ text: 'Oke', onPress: () => navigation.goBack() },
|
||||
]);
|
||||
} catch (e) {
|
||||
Alert.alert('Gagal menyimpan', String(e));
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<KeyboardAvoidingView
|
||||
style={styles.flex}
|
||||
behavior={Platform.OS === 'ios' ? 'padding' : undefined}
|
||||
>
|
||||
<ScrollView style={styles.container} contentContainerStyle={styles.content}>
|
||||
<Text style={styles.infoText}>
|
||||
🔁 Transaksi ini akan dibuat otomatis setiap bulan pada tanggal yang
|
||||
ditentukan.
|
||||
</Text>
|
||||
|
||||
{/* Toggle tipe */}
|
||||
<View style={styles.toggleRow}>
|
||||
<Pressable
|
||||
style={[styles.toggleBtn, type === 'income' && styles.toggleIncome]}
|
||||
onPress={() => switchType('income')}
|
||||
>
|
||||
<Text
|
||||
style={[
|
||||
styles.toggleText,
|
||||
type === 'income' && { color: colors.income, fontWeight: '700' },
|
||||
]}
|
||||
>
|
||||
+ Pemasukan
|
||||
</Text>
|
||||
</Pressable>
|
||||
<Pressable
|
||||
style={[styles.toggleBtn, type === 'expense' && styles.toggleExpense]}
|
||||
onPress={() => switchType('expense')}
|
||||
>
|
||||
<Text
|
||||
style={[
|
||||
styles.toggleText,
|
||||
type === 'expense' && { color: colors.expense, fontWeight: '700' },
|
||||
]}
|
||||
>
|
||||
- Pengeluaran
|
||||
</Text>
|
||||
</Pressable>
|
||||
</View>
|
||||
|
||||
{/* Nominal */}
|
||||
<LinearGradient
|
||||
colors={
|
||||
type === 'income' ? ['#F0FDF4', '#DCFCE7'] : ['#FEF2F2', '#FEE2E2']
|
||||
}
|
||||
style={[
|
||||
styles.card,
|
||||
styles.amountCard,
|
||||
type === 'income' ? styles.amountIncome : styles.amountExpense,
|
||||
]}
|
||||
>
|
||||
<Image
|
||||
source={require('../../assets/coin-3d.png')}
|
||||
style={styles.amountCoin}
|
||||
resizeMode="contain"
|
||||
/>
|
||||
<Text style={styles.cardLabel}>NOMINAL</Text>
|
||||
<TextInput
|
||||
style={styles.amountInput}
|
||||
value={amountText ? `Rp ${formatRibuan(amountText)}` : ''}
|
||||
onChangeText={(t) => setAmountText(t.replace(/[^0-9]/g, ''))}
|
||||
placeholder="Rp 0"
|
||||
placeholderTextColor={colors.border}
|
||||
keyboardType="number-pad"
|
||||
/>
|
||||
</LinearGradient>
|
||||
|
||||
{/* Tanggal */}
|
||||
<Text style={styles.sectionTitle}>Tanggal setiap bulan</Text>
|
||||
<View style={[styles.card, styles.dayCard]}>
|
||||
<Ionicons name="calendar" size={18} color={colors.primaryDark} />
|
||||
<TextInput
|
||||
style={styles.dayInput}
|
||||
value={dayText}
|
||||
onChangeText={(t) => setDayText(t.replace(/[^0-9]/g, ''))}
|
||||
placeholder="1"
|
||||
placeholderTextColor={colors.border}
|
||||
keyboardType="number-pad"
|
||||
maxLength={2}
|
||||
/>
|
||||
<Text style={styles.dayHint}>
|
||||
{dayOfMonth > 28
|
||||
? 'Tanggal > 28 hanya aktif di bulan yang punya tanggal itu'
|
||||
: 'Setiap bulan pada tanggal ini'}
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
{/* Kategori */}
|
||||
<Text style={styles.sectionTitle}>Kategori</Text>
|
||||
<View style={styles.categoryGrid}>
|
||||
{categories.map((c) => {
|
||||
const selected = c.id === selectedCategoryId;
|
||||
const icon3d = getCategoryIcon3d(c.name);
|
||||
return (
|
||||
<Pressable
|
||||
key={c.id}
|
||||
style={[styles.categoryChip, selected && styles.categoryChipSelected]}
|
||||
onPress={() => setSelectedCategoryId(c.id)}
|
||||
>
|
||||
{icon3d ? (
|
||||
<Image source={icon3d} style={styles.categoryIcon3d} resizeMode="contain" />
|
||||
) : (
|
||||
<Text style={styles.categoryIcon}>{c.icon}</Text>
|
||||
)}
|
||||
<Text
|
||||
style={[
|
||||
styles.categoryName,
|
||||
selected && { color: colors.primaryDark, fontWeight: '700' },
|
||||
]}
|
||||
>
|
||||
{c.name}
|
||||
</Text>
|
||||
</Pressable>
|
||||
);
|
||||
})}
|
||||
</View>
|
||||
|
||||
{/* Catatan */}
|
||||
<Text style={styles.sectionTitle}>Catatan (opsional)</Text>
|
||||
<TextInput
|
||||
style={[styles.card, styles.noteInput]}
|
||||
value={note}
|
||||
onChangeText={setNote}
|
||||
placeholder="Misal: Gaji bulanan"
|
||||
placeholderTextColor={colors.textMuted}
|
||||
/>
|
||||
</ScrollView>
|
||||
|
||||
<View style={styles.saveBar}>
|
||||
<Pressable
|
||||
onPress={handleSave}
|
||||
disabled={amount <= 0 || saving}
|
||||
style={({ pressed }) => [styles.savePressable, pressed && styles.pressed]}
|
||||
>
|
||||
<View style={styles.saveButton}>
|
||||
<Text style={styles.saveButtonText}>
|
||||
{saving ? 'Menyimpan...' : 'Simpan'}
|
||||
</Text>
|
||||
</View>
|
||||
</Pressable>
|
||||
</View>
|
||||
</KeyboardAvoidingView>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
flex: { flex: 1, backgroundColor: colors.background },
|
||||
container: { flex: 1 },
|
||||
content: { padding: 16, paddingBottom: 32 },
|
||||
infoText: {
|
||||
fontSize: 13,
|
||||
color: colors.textMuted,
|
||||
lineHeight: 19,
|
||||
marginBottom: 12,
|
||||
},
|
||||
toggleRow: {
|
||||
flexDirection: 'row',
|
||||
backgroundColor: colors.surface,
|
||||
borderRadius: 14,
|
||||
borderWidth: 1,
|
||||
borderColor: colors.border,
|
||||
padding: 4,
|
||||
marginBottom: 12,
|
||||
},
|
||||
toggleBtn: { flex: 1, alignItems: 'center', paddingVertical: 10, borderRadius: 10 },
|
||||
toggleIncome: { backgroundColor: colors.incomeSoft },
|
||||
toggleExpense: { backgroundColor: colors.expenseSoft },
|
||||
toggleText: { fontSize: 14, color: colors.textMuted },
|
||||
card: {
|
||||
backgroundColor: colors.surface,
|
||||
borderRadius: 16,
|
||||
padding: 16,
|
||||
borderWidth: 1,
|
||||
borderColor: colors.border,
|
||||
},
|
||||
amountCard: { marginBottom: 12, overflow: 'hidden' },
|
||||
amountIncome: { borderColor: '#BBF7D0' },
|
||||
amountExpense: { borderColor: '#FECACA' },
|
||||
amountCoin: {
|
||||
position: 'absolute',
|
||||
right: -14,
|
||||
top: -4,
|
||||
width: 114,
|
||||
height: 115,
|
||||
opacity: 0.3,
|
||||
transform: [{ perspective: 600 }, { rotateY: '-20deg' }],
|
||||
},
|
||||
cardLabel: {
|
||||
fontSize: 11,
|
||||
fontWeight: '700',
|
||||
letterSpacing: 1,
|
||||
color: colors.textMuted,
|
||||
},
|
||||
amountInput: { fontSize: 34, fontWeight: '800', color: colors.text, paddingVertical: 4 },
|
||||
sectionTitle: {
|
||||
fontSize: 14,
|
||||
fontWeight: '700',
|
||||
color: colors.text,
|
||||
marginBottom: 8,
|
||||
marginTop: 8,
|
||||
},
|
||||
dayCard: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 10,
|
||||
paddingVertical: 12,
|
||||
},
|
||||
dayInput: {
|
||||
fontSize: 22,
|
||||
fontWeight: '800',
|
||||
color: colors.text,
|
||||
minWidth: 44,
|
||||
borderBottomWidth: 2,
|
||||
borderBottomColor: colors.primary,
|
||||
paddingVertical: 2,
|
||||
textAlign: 'center',
|
||||
},
|
||||
dayHint: { flex: 1, fontSize: 11, color: colors.textMuted, lineHeight: 15 },
|
||||
categoryGrid: { flexDirection: 'row', flexWrap: 'wrap', gap: 8 },
|
||||
categoryChip: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 6,
|
||||
backgroundColor: colors.surface,
|
||||
borderWidth: 1,
|
||||
borderColor: colors.border,
|
||||
borderRadius: 12,
|
||||
paddingHorizontal: 12,
|
||||
paddingVertical: 8,
|
||||
},
|
||||
categoryChipSelected: {
|
||||
borderColor: colors.primary,
|
||||
backgroundColor: colors.primarySoft,
|
||||
},
|
||||
categoryIcon: { fontSize: 16 },
|
||||
categoryIcon3d: { width: 22, height: 22 },
|
||||
categoryName: { fontSize: 13, color: colors.text },
|
||||
noteInput: { paddingVertical: 10, fontSize: 14, color: colors.text },
|
||||
saveBar: {
|
||||
padding: 16,
|
||||
backgroundColor: colors.background,
|
||||
borderTopWidth: 1,
|
||||
borderTopColor: colors.border,
|
||||
},
|
||||
savePressable: {
|
||||
borderRadius: 14,
|
||||
shadowColor: colors.primaryDark,
|
||||
shadowOpacity: 0.25,
|
||||
shadowRadius: 8,
|
||||
shadowOffset: { width: 0, height: 4 },
|
||||
elevation: 4,
|
||||
},
|
||||
saveButton: {
|
||||
backgroundColor: colors.primary,
|
||||
borderRadius: 14,
|
||||
paddingVertical: 15,
|
||||
alignItems: 'center',
|
||||
},
|
||||
saveButtonText: { color: colors.white, fontWeight: '700', fontSize: 16 },
|
||||
pressed: { opacity: 0.85 },
|
||||
});
|
||||
Reference in New Issue
Block a user