From 44f8f57d4a96fd73c553dd5e78f8b54c945793c8 Mon Sep 17 00:00:00 2001
From: Dita Aji Pratama <ditaajipratama@protonmail.com>
Date: Sat, 18 Apr 2026 12:24:06 +0700
Subject: [PATCH] refactor: use CATEGORIES from types

- Import CATEGORIES from types/index
- Map category.label for display
- Use category.id for state
---
 components/TransactionForm.tsx | 17 ++++++-----------
 1 file changed, 6 insertions(+), 11 deletions(-)

diff --git a/components/TransactionForm.tsx b/components/TransactionForm.tsx
index 599dedd..37e5fe9 100644
--- a/components/TransactionForm.tsx
+++ b/components/TransactionForm.tsx
@@ -8,18 +8,13 @@ import {
   ScrollView,
 } from 'react-native';
 import { COLORS, FONTS } from '../constants/theme';
-import { Transaction } from '../types';
+import { Transaction, CATEGORIES } from '../types';
 import { generateId, getCurrentDate } from '../utils/helpers';
 
 interface TransactionFormProps {
   onAdd: (transaction: Transaction) => void;
 }
 
-const CATEGORIES = [
-  'makanan', 'transport', 'belanja', 'hiburan', 'kesehatan',
-  'pendidikan', 'investasi', 'gaji', 'lainnya'
-];
-
 export const TransactionForm: React.FC<TransactionFormProps> = ({ onAdd }) => {
   const [amount, setAmount] = useState('');
   const [description, setDescription] = useState('');
@@ -104,20 +99,20 @@ export const TransactionForm: React.FC<TransactionFormProps> = ({ onAdd }) => {
         <View style={styles.categoryContainer}>
           {CATEGORIES.map((cat) => (
             <TouchableOpacity
-              key={cat}
+              key={cat.id}
               style={[
                 styles.categoryButton,
-                category === cat && styles.categoryButtonActive,
+                category === cat.id && styles.categoryButtonActive,
               ]}
-              onPress={() => setCategory(cat)}
+              onPress={() => setCategory(cat.id)}
             >
               <Text
                 style={[
                   styles.categoryText,
-                  category === cat && styles.categoryTextActive,
+                  category === cat.id && styles.categoryTextActive,
                 ]}
               >
-                {cat}
+                {cat.label}
               </Text>
             </TouchableOpacity>
           ))}