Kantongku: icon 3D semua kategori (tagihan, kesehatan, hiburan, bonus, lainnya)

src/screens/AddTransactionScreen.tsx

@@ -187,7 +187,7 @@ export function AddTransactionScreen() {
         <View style={styles.categoryGrid}>
           {categories.map((c) => {
             const selected = c.id === selectedCategoryId;
-            const icon3d = getCategoryIcon3d(c.name);
+            const icon3d = getCategoryIcon3d(c.name, type);
             return (
               <Pressable
                 key={c.id}

src/screens/DashboardScreen.tsx

@@ -158,7 +158,9 @@ export function DashboardScreen() {
   const remainingDays = totalDays - dayOfMonth;
   const perDay = dayOfMonth > 0 ? compare.current / dayOfMonth : 0;
   const projection = Math.round(compare.current + perDay * remainingDays);
-  const topIcon3d = topCategory ? getCategoryIcon3d(topCategory.categoryName) : null;
+  const topIcon3d = topCategory
+    ? getCategoryIcon3d(topCategory.categoryName, 'expense')
+    : null;
 
   // Saldo cukup berapa hari (rata-rata pengeluaran harian bulan ini)
   const avgDailyExpense = dayOfMonth > 0 ? monthExpense / dayOfMonth : 0;
@@ -646,7 +648,7 @@ export function DashboardScreen() {
           </View>
         ) : (
           recent.map((t) => {
-            const icon3d = getCategoryIcon3d(t.categoryName);
+            const icon3d = getCategoryIcon3d(t.categoryName, t.type);
             return (
               <View key={t.id} style={[styles.card, styles.txRow]}>
                 <View

src/screens/EditTransactionScreen.tsx

@@ -181,7 +181,7 @@ export function EditTransactionScreen() {
         <View style={styles.categoryGrid}>
           {categories.map((c) => {
             const selected = c.id === selectedCategoryId;
-            const icon3d = getCategoryIcon3d(c.name);
+            const icon3d = getCategoryIcon3d(c.name, type);
             return (
               <Pressable
                 key={c.id}

src/screens/HistoryScreen.tsx

@@ -239,7 +239,7 @@ export function HistoryScreen() {
           </View>
         }
         renderItem={({ item }) => {
-          const icon3d = getCategoryIcon3d(item.categoryName);
+          const icon3d = getCategoryIcon3d(item.categoryName, item.type);
           return (
             <SwipeableRow
               onEdit={() =>

src/screens/RecurringFormScreen.tsx

@@ -165,7 +165,7 @@ export function RecurringFormScreen() {
         <View style={styles.categoryGrid}>
           {categories.map((c) => {
             const selected = c.id === selectedCategoryId;
-            const icon3d = getCategoryIcon3d(c.name);
+            const icon3d = getCategoryIcon3d(c.name, type);
             return (
               <Pressable
                 key={c.id}

src/utils/categoryIcons3d.ts

@@ -1,15 +1,26 @@
 /**
  * Mapping kategori -> icon 3D.
+ * Key: `${type}:${name}` (karena ada kategori "Lainnya" di income & expense).
  * Kategori yang belum punya versi 3D otomatis fallback ke emoji.
  */
 export const CATEGORY_3D: Record<string, any> = {
-  Makanan: require('../../assets/cat-makanan.png'),
-  Transportasi: require('../../assets/cat-transportasi.png'),
-  Belanja: require('../../assets/cat-belanja.png'),
-  Gaji: require('../../assets/cat-gaji.png'),
+  'expense:Makanan': require('../../assets/cat-makanan.png'),
+  'expense:Transportasi': require('../../assets/cat-transportasi.png'),
+  'expense:Belanja': require('../../assets/cat-belanja.png'),
+  'expense:Tagihan': require('../../assets/cat-tagihan.png'),
+  'expense:Kesehatan': require('../../assets/cat-kesehatan.png'),
+  'expense:Hiburan': require('../../assets/cat-hiburan.png'),
+  'expense:Lainnya': require('../../assets/cat-lain-expense.png'),
+  'income:Gaji': require('../../assets/cat-gaji.png'),
+  'income:Bonus / THR': require('../../assets/cat-bonus.png'),
+  'income:Lainnya': require('../../assets/cat-lain-income.png'),
 };
 
-export function getCategoryIcon3d(categoryName: string | null): any | null {
+export function getCategoryIcon3d(
+  categoryName: string | null,
+  type?: string
+): any | null {
   if (!categoryName) return null;
-  return CATEGORY_3D[categoryName] ?? null;
+  const key = type ? `${type}:${categoryName}` : categoryName;
+  return CATEGORY_3D[key] ?? null;
 }