Masukkan PIN
Halo {userConfig.name}, selamat datang kembali!
{[0, 1, 2].map((i) => (
i ? 'bg-white scale-110 shadow-lg' : 'bg-green-800'}`} />
))}
{[1, 2, 3, 4, 5, 6, 7, 8, 9, 'C', 0, '<'].map((key) => (
))}
);
}
return (
{/* Header */}
duweQ
Hai, {userConfig.name} 👋
{isOverspending && }
{/* Main Content Area */}
{/* TAB: DASHBOARD */}
{activeTab === 'dashboard' && (
{/* Filter */}
{/* Warning Notif */}
{isOverspending && (
Peringatan Keuangan!
Pengeluaran & cicilanmu bulan ini melebihi pendapatan.
)}
{/* Balance Card 3D Effect */}
Saldo Saat Ini
{formatRupiah(currentBalance)}
Pemasukan
{formatRupiah(totalIncome)}
Pengeluaran
{formatRupiah(totalExpense + totalCredit)}
{/* Categories & Chart */}
Ringkasan Bulan Ini
{expenseByCategory.slice(0, 4).map((cat, i) => (
{cat.name}
{Math.round((cat.value / (totalExpense||1)) * 100)}%
))}
{/* Category List Clickable */}
Kategori Pengeluaran
{expenseByCategory.map((cat, i) => (
setActiveTab('expense')}>
{formatRupiah(cat.value)}
))}
{expenseByCategory.length === 0 &&
Belum ada pengeluaran.
}
)}
{/* TAB: MANAGER (Income, Expense, Credit) */}
{['income', 'expense', 'credit'].includes(activeTab) && (
)}
{/* TAB: SETTINGS */}
{activeTab === 'settings' && (
)}
{/* Bottom Navigation */}
} label="Beranda" active={activeTab === 'dashboard'} onClick={() => setActiveTab('dashboard')} />
} label="Masuk" active={activeTab === 'income'} onClick={() => setActiveTab('income')} color="text-green-400" />
} label="Keluar" active={activeTab === 'expense'} onClick={() => setActiveTab('expense')} color="text-red-400" />
} label="Kredit" active={activeTab === 'credit'} onClick={() => setActiveTab('credit')} color="text-yellow-400" />
} label="Profil" active={activeTab === 'settings'} onClick={() => setActiveTab('settings')} />
);
}
function NavButton({ icon, label, active, onClick, color = "text-gray-300" }) {
return (
);
}
function TransactionManager({ type, transactions, setTransactions, categories, setCategories }) {
const [isFormOpen, setIsFormOpen] = useState(false);
const [formData, setFormData] = useState({ id: null, amount: '', note: '', date: new Date().toISOString().split('T')[0], category: categories[0] });
const [newCat, setNewCat] = useState('');
const titles = {
income: { title: 'Pemasukan', icon:
},
expense: { title: 'Pengeluaran', icon:
},
credit: { title: 'Cicilan Kredit', icon:
}
};
const currentList = transactions.filter(t => t.type === type).sort((a, b) => new Date(b.date) - new Date(a.date));
const handleSave = () => {
if (!formData.amount || !formData.date) return alert('Lengkapi data!');
const newTx = {
...formData,
amount: parseFloat(formData.amount),
type: type,
id: formData.id || Date.now().toString()
};
if (formData.id) {
setTransactions(transactions.map(t => t.id === formData.id ? newTx : t));
} else {
setTransactions([...transactions, newTx]);
}
setIsFormOpen(false);
setFormData({ id: null, amount: '', note: '', date: new Date().toISOString().split('T')[0], category: categories[0] });
};
const handleEdit = (tx) => {
setFormData(tx);
setIsFormOpen(true);
};
const handleDelete = (id) => {
if (confirm('Hapus data ini?')) {
setTransactions(transactions.filter(t => t.id !== id));
}
};
const handleAddCategory = () => {
if(newCat && !categories.includes(newCat)) {
setCategories([...categories, newCat]);
setFormData({...formData, category: newCat});
setNewCat('');
}
};
return (
{titles[type].icon} {titles[type].title}
{isFormOpen && (
{formData.id ? 'Edit' : 'Tambah'} {titles[type].title}
)}
{currentList.map(tx => (
{formatRupiah(tx.amount)}
{new Date(tx.date).toLocaleDateString('id-ID', {day: 'numeric', month: 'short'})}
{type === 'expense' && <>•{tx.category}}
{tx.note && <>•{tx.note}}
))}
{currentList.length === 0 && (
Belum ada data {titles[type].title.toLowerCase()}.
)}
);
}