From 051915a2bdea358fd984fb2f4017483a61bc4e96 Mon Sep 17 00:00:00 2001
From: Arthur Lempereur <arthur.lempereur@fnix.fr>
Date: Thu, 23 Oct 2025 17:02:31 +0200
Subject: [PATCH] Fix: Resolve category display and form reset issues

- Fix infinite loading: properly reset loading state in both success and error cases
- Fix form not resetting: clear all fields including selectedCategory after submission
- Improve category display: smaller icons (24px), better sizing, no movement on selection
- Remove colorful borders: use neutral colors for better readability
- Remove scale/shadow effects that caused layout shifts
- Use consistent styling: minHeight instead of aspectRatio for stable layout
- Apply fixes to both TransactionScreen and SubscriptionScreen
---
 src/screens/SubscriptionScreen.tsx | 31 +++++++++++++-----------
 src/screens/TransactionScreen.tsx  | 38 +++++++++++++-----------------
 2 files changed, 34 insertions(+), 35 deletions(-)

diff --git a/src/screens/SubscriptionScreen.tsx b/src/screens/SubscriptionScreen.tsx
index d26e2db..096335d 100644
--- a/src/screens/SubscriptionScreen.tsx
+++ b/src/screens/SubscriptionScreen.tsx
@@ -112,15 +112,16 @@ export const SubscriptionScreen = () => {
       // Réinitialiser le formulaire
       setName('');
       setAmount('');
+      setSelectedCategory('');
       setDayOfMonth('1');
       setFrequency('monthly');
+      setLoading(false);
       setModalVisible(false);
 
       Alert.alert('Succès', 'Abonnement ajouté avec succès');
     } catch (error: any) {
-      Alert.alert('Erreur', error.message);
-    } finally {
       setLoading(false);
+      Alert.alert('Erreur', error.message);
     }
   };
 
@@ -276,8 +277,7 @@ export const SubscriptionScreen = () => {
                     key={category.id}
                     style={[
                       styles.categoryItem,
-                      selectedCategory === category.name && styles.categoryItemActive,
-                      { borderColor: category.color }
+                      selectedCategory === category.name && styles.categoryItemActive
                     ]}
                     onPress={() => setSelectedCategory(category.name)}
                   >
@@ -420,30 +420,33 @@ const styles = StyleSheet.create({
   categoryGrid: {
     flexDirection: 'row',
     flexWrap: 'wrap',
-    gap: 12,
+    gap: 8,
     marginBottom: 24
   },
   categoryItem: {
-    width: '30%',
-    aspectRatio: 1,
-    borderRadius: 12,
-    borderWidth: 2,
+    width: '31%',
+    paddingVertical: 12,
+    borderRadius: 8,
+    borderWidth: 1.5,
     borderColor: '#E0E0E0',
     justifyContent: 'center',
     alignItems: 'center',
-    backgroundColor: '#F8F9FA'
+    backgroundColor: '#FFF',
+    minHeight: 70
   },
   categoryItemActive: {
-    backgroundColor: '#FFF',
-    borderWidth: 2
+    backgroundColor: '#F0F7FF',
+    borderWidth: 2,
+    borderColor: '#4A90E2'
   },
   categoryIcon: {
-    fontSize: 28,
+    fontSize: 24,
     marginBottom: 4
   },
   categoryName: {
-    fontSize: 11,
+    fontSize: 10,
     color: '#666',
+    fontWeight: '500',
     textAlign: 'center'
   },
   submitButton: {
diff --git a/src/screens/TransactionScreen.tsx b/src/screens/TransactionScreen.tsx
index 17453f5..55141ea 100644
--- a/src/screens/TransactionScreen.tsx
+++ b/src/screens/TransactionScreen.tsx
@@ -110,15 +110,16 @@ export const TransactionScreen = ({ route, navigation }: any) => {
 
       // Réinitialiser le formulaire
       setAmount('');
+      setSelectedCategory('');
       setNote('');
       setDate(new Date());
+      setLoading(false);
       setModalVisible(false);
 
       Alert.alert('Succès', 'Transaction ajoutée avec succès');
     } catch (error: any) {
-      Alert.alert('Erreur', error.message);
-    } finally {
       setLoading(false);
+      Alert.alert('Erreur', error.message);
     }
   };
 
@@ -250,8 +251,7 @@ export const TransactionScreen = ({ route, navigation }: any) => {
                     key={category.id}
                     style={[
                       styles.categoryItem,
-                      selectedCategory === category.name && styles.categoryItemActive,
-                      { borderColor: category.color }
+                      selectedCategory === category.name && styles.categoryItemActive
                     ]}
                     onPress={() => setSelectedCategory(category.name)}
                   >
@@ -404,37 +404,33 @@ const styles = StyleSheet.create({
   categoryGrid: {
     flexDirection: 'row',
     flexWrap: 'wrap',
-    gap: 12,
+    gap: 8,
     marginBottom: 24
   },
   categoryItem: {
-    width: '30%',
-    aspectRatio: 1,
-    borderRadius: 12,
-    borderWidth: 2,
+    width: '31%',
+    paddingVertical: 12,
+    borderRadius: 8,
+    borderWidth: 1.5,
     borderColor: '#E0E0E0',
     justifyContent: 'center',
     alignItems: 'center',
-    backgroundColor: '#F8F9FA'
+    backgroundColor: '#FFF',
+    minHeight: 70
   },
   categoryItemActive: {
-    backgroundColor: '#FFF',
-    borderWidth: 3,
-    transform: [{ scale: 1.05 }],
-    shadowColor: '#000',
-    shadowOffset: { width: 0, height: 2 },
-    shadowOpacity: 0.2,
-    shadowRadius: 4,
-    elevation: 4
+    backgroundColor: '#F0F7FF',
+    borderWidth: 2,
+    borderColor: '#4A90E2'
   },
   categoryIcon: {
-    fontSize: 28,
+    fontSize: 24,
     marginBottom: 4
   },
   categoryName: {
-    fontSize: 11,
+    fontSize: 10,
     color: '#666',
-    fontWeight: '600',
+    fontWeight: '500',
     textAlign: 'center'
   },
   submitButton: {