Kantongku: aplikasi pencatat keuangan pribadi offline-first
This commit is contained in:
Bro
@@ -0,0 +1,353 @@
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import { LinearGradient } from 'expo-linear-gradient';
|
||||
import { useNavigation, useRoute } from '@react-navigation/native';
|
||||
import type { RouteProp } 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 {
|
||||
getCategories,
|
||||
getSettingNumber,
|
||||
getTransactionById,
|
||||
updateTransaction,
|
||||
} from '../db/repositories';
|
||||
import type { Category, TransactionType } from '../types';
|
||||
import type { RootStackParamList } from '../navigation';
|
||||
|
||||
export function EditTransactionScreen() {
|
||||
const navigation = useNavigation();
|
||||
const route = useRoute<RouteProp<RootStackParamList, 'EditTransaksi'>>();
|
||||
const { transactionId } = route.params;
|
||||
|
||||
const [type, setType] = useState<TransactionType>('expense');
|
||||
const [amountText, setAmountText] = useState('');
|
||||
const [categories, setCategories] = useState<Category[]>([]);
|
||||
const [selectedCategoryId, setSelectedCategoryId] = useState<number | null>(null);
|
||||
const [note, setNote] = useState('');
|
||||
const [percent, setPercent] = useState(10);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [loaded, setLoaded] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
(async () => {
|
||||
const tx = await getTransactionById(transactionId);
|
||||
if (!tx) {
|
||||
Alert.alert('Transaksi tidak ditemukan', 'Data mungkin sudah dihapus.');
|
||||
navigation.goBack();
|
||||
return;
|
||||
}
|
||||
setType(tx.type);
|
||||
setAmountText(String(tx.amount));
|
||||
setSelectedCategoryId(tx.categoryId);
|
||||
setNote(tx.note);
|
||||
const p = await getSettingNumber('auto_save_percent', 10);
|
||||
setPercent(p);
|
||||
const cats = await getCategories(tx.type);
|
||||
setCategories(cats);
|
||||
setLoaded(true);
|
||||
})();
|
||||
}, [transactionId, navigation]);
|
||||
|
||||
const amount = Number(amountText.replace(/[^0-9]/g, '')) || 0;
|
||||
const savedAmount = type === 'income' ? Math.round((amount * percent) / 100) : 0;
|
||||
|
||||
const switchType = (t: TransactionType) => {
|
||||
setType(t);
|
||||
loadCategories(t);
|
||||
};
|
||||
|
||||
const loadCategories = useCallback(async (t: TransactionType) => {
|
||||
const cats = await getCategories(t);
|
||||
setCategories(cats);
|
||||
}, []);
|
||||
|
||||
const handleSave = async () => {
|
||||
if (amount <= 0) {
|
||||
Alert.alert('Nominal kosong', 'Isi nominal dulu ya, Mas.');
|
||||
return;
|
||||
}
|
||||
setSaving(true);
|
||||
try {
|
||||
await updateTransaction(transactionId, {
|
||||
type,
|
||||
amount,
|
||||
categoryId: selectedCategoryId,
|
||||
note: note.trim(),
|
||||
});
|
||||
Alert.alert('Tersimpan ✅', 'Transaksi berhasil diperbarui.', [
|
||||
{ text: 'Oke', onPress: () => navigation.goBack() },
|
||||
]);
|
||||
} catch (e) {
|
||||
Alert.alert('Gagal menyimpan', String(e));
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (!loaded) return null;
|
||||
|
||||
return (
|
||||
<KeyboardAvoidingView
|
||||
style={styles.flex}
|
||||
behavior={Platform.OS === 'ios' ? 'padding' : undefined}
|
||||
>
|
||||
<ScrollView style={styles.container} contentContainerStyle={styles.content}>
|
||||
{/* 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"
|
||||
autoFocus
|
||||
/>
|
||||
</LinearGradient>
|
||||
|
||||
{type === 'income' && amount > 0 && (
|
||||
<View style={[styles.card, styles.saveHintCard]}>
|
||||
<Image
|
||||
source={require('../../assets/coin-3d.png')}
|
||||
style={styles.saveHintCoin}
|
||||
resizeMode="contain"
|
||||
/>
|
||||
<Text style={styles.saveHintText}>
|
||||
{formatRupiah(savedAmount)} otomatis masuk Tabungan ({percent}%)
|
||||
</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: makan siang di warteg"
|
||||
placeholderTextColor={colors.textMuted}
|
||||
/>
|
||||
</ScrollView>
|
||||
|
||||
{/* Tombol Simpan fixed */}
|
||||
<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 Perubahan'}
|
||||
</Text>
|
||||
</View>
|
||||
</Pressable>
|
||||
</View>
|
||||
</KeyboardAvoidingView>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
flex: { flex: 1, backgroundColor: colors.background },
|
||||
container: { flex: 1 },
|
||||
content: { padding: 16, paddingBottom: 32 },
|
||||
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,
|
||||
},
|
||||
saveHintCard: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 8,
|
||||
backgroundColor: colors.primarySoft,
|
||||
borderColor: colors.primarySoft,
|
||||
marginBottom: 12,
|
||||
},
|
||||
saveHintCoin: { width: 26, height: 26 },
|
||||
saveHintText: { color: colors.primaryDark, fontWeight: '600', fontSize: 13, flex: 1 },
|
||||
sectionTitle: {
|
||||
fontSize: 14,
|
||||
fontWeight: '700',
|
||||
color: colors.text,
|
||||
marginBottom: 8,
|
||||
marginTop: 8,
|
||||
},
|
||||
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