398 lines
12 KiB
TypeScript
398 lines
12 KiB
TypeScript
import { Ionicons } from '@expo/vector-icons';
|
|
import DateTimePicker from '@react-native-community/datetimepicker';
|
|
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 [occurredAt, setOccurredAt] = useState(new Date());
|
|
const [showDate, setShowDate] = useState(false);
|
|
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);
|
|
setOccurredAt(new Date(tx.occurredAt));
|
|
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(),
|
|
occurredAt,
|
|
});
|
|
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>
|
|
)}
|
|
|
|
{/* Tanggal */}
|
|
<Text style={styles.sectionTitle}>Tanggal</Text>
|
|
<Pressable style={styles.dateRow} onPress={() => setShowDate(true)}>
|
|
<Ionicons name="calendar" size={18} color={colors.primaryDark} />
|
|
<Text style={styles.dateRowText}>
|
|
{occurredAt.toLocaleDateString('id-ID', {
|
|
weekday: 'long',
|
|
day: 'numeric',
|
|
month: 'long',
|
|
year: 'numeric',
|
|
})}
|
|
</Text>
|
|
<Ionicons name="chevron-down" size={16} color={colors.textMuted} />
|
|
</Pressable>
|
|
{showDate && (
|
|
<DateTimePicker
|
|
value={occurredAt}
|
|
mode="date"
|
|
maximumDate={new Date()}
|
|
onChange={(e, d) => {
|
|
setShowDate(false);
|
|
if (d) setOccurredAt(d);
|
|
}}
|
|
/>
|
|
)}
|
|
|
|
{/* Kategori */}
|
|
<Text style={styles.sectionTitle}>Kategori</Text>
|
|
<View style={styles.categoryGrid}>
|
|
{categories.map((c) => {
|
|
const selected = c.id === selectedCategoryId;
|
|
const icon3d = getCategoryIcon3d(c.name, type);
|
|
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,
|
|
},
|
|
dateRow: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
gap: 8,
|
|
backgroundColor: colors.surface,
|
|
borderWidth: 1,
|
|
borderColor: colors.border,
|
|
borderRadius: 14,
|
|
paddingHorizontal: 14,
|
|
paddingVertical: 12,
|
|
marginBottom: 4,
|
|
},
|
|
dateRowText: { flex: 1, fontSize: 14, color: colors.text, fontWeight: '600' },
|
|
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 },
|
|
});
|