metrics added also

src/components/MetricCard.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import { COLORS } from '../constants/colors';
+
+const MetricCard = ({ label, value }) => {
+  return (
+    <View style={styles.card}>
+      <Text style={styles.value}>{value}</Text>
+      <Text style={styles.label}>{label}</Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  card: {
+    flex: 1,
+    backgroundColor: COLORS.white,
+    borderRadius: 12,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingVertical: 16,
+    marginHorizontal: 4,
+    shadowColor: COLORS.gray[300],
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.1,
+    shadowRadius: 4,
+    elevation: 3,
+  },
+  value: {
+    fontSize: 20,
+    fontWeight: 'bold',
+    color: COLORS.primary,
+  },
+  label: {
+    fontSize: 12,
+    color: COLORS.textSecondary,
+    marginTop: 4,
+    textAlign: 'center',
+  },
+});
+
+export default MetricCard; 

src/screens/Main/HomeScreen.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import {
   View,
   Text,
@@ -6,21 +6,38 @@ import {
   SafeAreaView,
   ScrollView,
   TouchableOpacity,
+  ActivityIndicator,
 } from 'react-native';
 import { StatusBar } from 'expo-status-bar';
 import { Ionicons } from '@expo/vector-icons';
 import { useAuth } from '../../contexts/AuthContext';
 import { COLORS } from '../../constants/colors';
+import MetricCard from '../../components/MetricCard';
+import apiService from '../../services/apiService';
 
 const HomeScreen = () => {
   const { user, logout } = useAuth();
+  const [metrics, setMetrics] = useState(null);
+  const [loadingMetrics, setLoadingMetrics] = useState(true);
 
-  const quickActions = [
+  useEffect(() => {
-    { id: 1, title: 'Pul ugrat', icon: 'send', color: COLORS.primary },
+    const fetchMetrics = async () => {
-    { id: 2, title: 'Pul al', icon: 'download', color: COLORS.info },
+      try {
-    { id: 3, title: 'Töleg et', icon: 'card', color: COLORS.warning },
+        const response = await apiService.getMetrics();
-    { id: 4, title: 'Hasabat', icon: 'document-text', color: COLORS.success },
+        if (response.success) {
-  ];
+          setMetrics(response.data);
+        } else {
+          console.warn('Failed to fetch metrics:', response.error);
+        }
+      } catch (error) {
+        console.warn('Error fetching metrics:', error);
+      } finally {
+        setLoadingMetrics(false);
+      }
+    };
+
+    fetchMetrics();
+  }, []);
 
   return (
     <SafeAreaView style={styles.container}>
@@ -53,67 +70,18 @@ const HomeScreen = () => {
           </View>
         </View>
 
-        {/* Quick Actions */}
+        {/* Metrics */}
         <View style={styles.section}>
-          <Text style={styles.sectionTitle}>Çalt hereketler</Text>
+          <Text style={styles.sectionTitle}>Metrics</Text>
-          <View style={styles.quickActionsGrid}>
+          {loadingMetrics ? (
-            {quickActions.map((action) => (
+            <ActivityIndicator color={COLORS.primary} style={{ marginTop: 16 }} />
-              <TouchableOpacity key={action.id} style={styles.quickActionItem}>
+          ) : (
-                <View style={[styles.quickActionIcon, { backgroundColor: action.color }]}>
+            <View style={styles.metricsGrid}>
-                  <Ionicons name={action.icon} size={24} color={COLORS.white} />
+              <MetricCard label="Loan Orders" value={metrics?.loanOrders ?? '-'} />
-                </View>
+              <MetricCard label="Accepted" value={metrics?.acceptedLoanOrders ?? '-'} />
-                <Text style={styles.quickActionText}>{action.title}</Text>
+              <MetricCard label="Denied" value={metrics?.deniedLoanOrders ?? '-'} />
-              </TouchableOpacity>
+            </View>
-            ))}
+          )}
-          </View>
-        </View>
-
-        {/* Recent Transactions */}
-        <View style={styles.section}>
-          <View style={styles.sectionHeader}>
-            <Text style={styles.sectionTitle}>Soňky geleşikler</Text>
-            <TouchableOpacity>
-              <Text style={styles.seeAllText}>Hemmesini gör</Text>
-            </TouchableOpacity>
-          </View>
-          
-          <View style={styles.transactionsList}>
-            {[1, 2, 3].map((transaction) => (
-              <View key={transaction} style={styles.transactionItem}>
-                <View style={styles.transactionIcon}>
-                  <Ionicons name="arrow-down" size={20} color={COLORS.success} />
-                </View>
-                <View style={styles.transactionDetails}>
-                  <Text style={styles.transactionTitle}>Girizen pul</Text>
-                  <Text style={styles.transactionDate}>Şu gün, 14:30</Text>
-                </View>
-                <Text style={styles.transactionAmount}>+500.00 TMT</Text>
-              </View>
-            ))}
-          </View>
-        </View>
-
-        {/* Services */}
-        <View style={styles.section}>
-          <Text style={styles.sectionTitle}>Hyzmatlar</Text>
-          <View style={styles.servicesGrid}>
-            <TouchableOpacity style={styles.serviceItem}>
-              <Ionicons name="phone-portrait" size={24} color={COLORS.primary} />
-              <Text style={styles.serviceText}>Telefon töleg</Text>
-            </TouchableOpacity>
-            <TouchableOpacity style={styles.serviceItem}>
-              <Ionicons name="flash" size={24} color={COLORS.warning} />
-              <Text style={styles.serviceText}>Elektrik töleg</Text>
-            </TouchableOpacity>
-            <TouchableOpacity style={styles.serviceItem}>
-              <Ionicons name="water" size={24} color={COLORS.info} />
-              <Text style={styles.serviceText}>Suw töleg</Text>
-            </TouchableOpacity>
-            <TouchableOpacity style={styles.serviceItem}>
-              <Ionicons name="wifi" size={24} color={COLORS.success} />
-              <Text style={styles.serviceText}>Internet töleg</Text>
-            </TouchableOpacity>
-          </View>
         </View>
       </ScrollView>
     </SafeAreaView>
@@ -295,6 +263,10 @@ const styles = StyleSheet.create({
     textAlign: 'center',
     marginTop: 8,
   },
+  metricsGrid: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
 });
 
 export default HomeScreen; 

src/services/apiService.js

@@ -47,6 +47,22 @@ class ApiService {
     return authService.getBalance();
   }
 
+  // NEW: Metrics
+  async getMetrics() {
+    try {
+      const data = await authService.getMetrics();
+      return {
+        success: true,
+        data,
+      };
+    } catch (error) {
+      return {
+        success: false,
+        error: error.message,
+      };
+    }
+  }
+
   async getTransactions(page = 1, limit = 20) {
     return authService.getTransactions(page, limit);
   }

src/services/authService.js

@@ -125,6 +125,11 @@ class AuthService {
     return this.makeRequest('/user/balance', null, true, 'GET');
   }
 
+  // NEW: Fetch metrics for dashboard
+  async getMetrics() {
+    return this.makeRequest('/metrics', null, true, 'GET');
+  }
+
   async transferMoney(data) {
     return this.makeRequest('/user/transfer', data, true);
   }