From fa073d2c9a3f658cefcce0534f3628f5aa3ed420 Mon Sep 17 00:00:00 2001
From: Dita Aji Pratama <ditaajipratama@protonmail.com>
Date: Sat, 18 Apr 2026 12:24:19 +0700
Subject: [PATCH] refactor: add getCategoryLabel helper

- Import CATEGORIES from types
- Add getCategoryLabel function
- Display category label instead of id
---
 components/TransactionList.tsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/components/TransactionList.tsx b/components/TransactionList.tsx
index 7f0b99b..a76c003 100644
--- a/components/TransactionList.tsx
+++ b/components/TransactionList.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { View, Text, TouchableOpacity, StyleSheet, FlatList } from 'react-native';
 import { COLORS, FONTS } from '../constants/theme';
-import { Transaction } from '../types';
+import { Transaction, CATEGORIES } from '../types';
 import { formatRupiah, formatDate } from '../utils/helpers';
 
 interface TransactionListProps {
@@ -13,6 +13,11 @@ export const TransactionList: React.FC<TransactionListProps> = ({
   transactions,
   onDelete,
 }) => {
+  const getCategoryLabel = (categoryId: string) => {
+    const category = CATEGORIES.find((c) => c.id === categoryId);
+    return category ? category.label : categoryId;
+  };
+
   const renderItem = ({ item }: { item: Transaction }) => {
     const isExpense = item.type === 'expense';
     
@@ -20,7 +25,7 @@ export const TransactionList: React.FC<TransactionListProps> = ({
       <View style={styles.item}>
         <View style={styles.info}>
           <Text style={styles.description}>{item.description}</Text>
-          <Text style={styles.category}>{item.category}</Text>
+          <Text style={styles.category}>{getCategoryLabel(item.category)}</Text>
           <Text style={styles.date}>{formatDate(item.date)}</Text>
         </View>
         <View style={styles.amountContainer}>