refactor: use CATEGORIES from types

- Import CATEGORIES from types/index
- Map category.label for display
- Use category.id for state

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>
           ))}