card balance on homepage

src/screens/Main/HomeScreen.js

@@ -19,6 +19,14 @@ const HomeScreen = () => {
   const { user, logout } = useAuth();
   const [metrics, setMetrics] = useState(null);
   const [loadingMetrics, setLoadingMetrics] = useState(true);
+  const [cardBalance, setCardBalance] = useState(null);
+  const [loadingCardBalance, setLoadingCardBalance] = useState(true);
+  const [cardBalanceError, setCardBalanceError] = useState(null);
+  const [isBalanceVisible, setIsBalanceVisible] = useState(true);
+
+  const showBalanceCard = !loadingCardBalance && cardBalanceError === null && cardBalance !== null;
+
+  // (Optional) Add helpers here if needed in the future
 
   useEffect(() => {
     const fetchMetrics = async () => {
@@ -39,6 +47,38 @@ const HomeScreen = () => {
     fetchMetrics();
   }, []);
 
+  useEffect(() => {
+    const fetchCardBalance = async () => {
+      // Ensure user has filled all required card & passport fields
+      if (!user?.passport_serie || !user?.passport_id || !user?.card_number || !user?.card_month || !user?.card_year) {
+        setLoadingCardBalance(false);
+        return;
+      }
+      try {
+        const res = await apiService.getCardBalanceQuickCheck();
+        if (res.success) {
+          // Try common balance keys else fallback to raw
+          const raw = res.data;
+          let balanceValue = null;
+          if (raw && typeof raw === 'object') {
+            balanceValue = raw.balance ?? raw.card_balance ?? raw.amount ?? null;
+          }
+          setCardBalance(balanceValue);
+          setCardBalanceError(null);
+        } else {
+          console.warn('Failed to fetch card balance:', res.error);
+          setCardBalanceError(res.error || 'Error');
+        }
+      } catch (e) {
+        console.warn('Error fetching card balance:', e);
+      } finally {
+        setLoadingCardBalance(false);
+      }
+    };
+
+    fetchCardBalance();
+  }, [user]);
+
   return (
     <SafeAreaView style={styles.container}>
       <StatusBar style="dark" />
@@ -67,19 +107,25 @@ const HomeScreen = () => {
         </View>
 
         {/* Balance Card */}
-        <View style={styles.balanceCard}>
-          <View style={styles.balanceHeader}>
-            <Text style={styles.balanceLabel}>Jemi balans</Text>
-            <TouchableOpacity>
-              <Ionicons name="eye" size={20} color={COLORS.white} />
-            </TouchableOpacity>
+        {showBalanceCard && (
+          <View style={styles.balanceCard}>
+            <View style={styles.balanceHeader}>
+              <Text style={styles.balanceLabel}>Jemi balans</Text>
+              <TouchableOpacity onPress={() => setIsBalanceVisible((prev) => !prev)}>
+                <Ionicons name={isBalanceVisible ? 'eye' : 'eye-off'} size={20} color={COLORS.white} />
+              </TouchableOpacity>
+            </View>
+            <Text style={styles.balanceAmount}>
+              {isBalanceVisible ? `${cardBalance} TMT` : '•••••'}
+            </Text>
+            <View style={styles.balanceFooter}>
+              <Text style={styles.accountNumber}>
+                {user?.card_number ? `Hasap: ****${String(user.card_number).replace(/[^0-9]/g, '').slice(-4)}` : 'Hasap: ----'}
+              </Text>
+              <View style={styles.cardChip} />
+            </View>
           </View>
-          <Text style={styles.balanceAmount}>1,250.00 TMT</Text>
-          <View style={styles.balanceFooter}>
-            <Text style={styles.accountNumber}>Hasap: ****1234</Text>
-            <View style={styles.cardChip} />
-          </View>
-        </View>
+        )}
       </ScrollView>
     </SafeAreaView>
   );