diff --git a/src/components/MetricCard.js b/src/components/MetricCard.js
new file mode 100644
index 0000000..85fbe56
--- /dev/null
+++ b/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 (
+
+ {value}
+ {label}
+
+ );
+};
+
+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;
\ No newline at end of file
diff --git a/src/screens/Main/HomeScreen.js b/src/screens/Main/HomeScreen.js
index 958dce7..32f4f06 100644
--- a/src/screens/Main/HomeScreen.js
+++ b/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 = [
- { id: 1, title: 'Pul ugrat', icon: 'send', color: COLORS.primary },
- { id: 2, title: 'Pul al', icon: 'download', color: COLORS.info },
- { id: 3, title: 'Töleg et', icon: 'card', color: COLORS.warning },
- { id: 4, title: 'Hasabat', icon: 'document-text', color: COLORS.success },
- ];
+ useEffect(() => {
+ const fetchMetrics = async () => {
+ try {
+ const response = await apiService.getMetrics();
+ 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 (
@@ -53,67 +70,18 @@ const HomeScreen = () => {
- {/* Quick Actions */}
+ {/* Metrics */}
- Çalt hereketler
-
- {quickActions.map((action) => (
-
-
-
-
- {action.title}
-
- ))}
-
-
-
- {/* Recent Transactions */}
-
-
- Soňky geleşikler
-
- Hemmesini gör
-
-
-
-
- {[1, 2, 3].map((transaction) => (
-
-
-
-
-
- Girizen pul
- Şu gün, 14:30
-
- +500.00 TMT
-
- ))}
-
-
-
- {/* Services */}
-
- Hyzmatlar
-
-
-
- Telefon töleg
-
-
-
- Elektrik töleg
-
-
-
- Suw töleg
-
-
-
- Internet töleg
-
-
+ Metrics
+ {loadingMetrics ? (
+
+ ) : (
+
+
+
+
+
+ )}
@@ -295,6 +263,10 @@ const styles = StyleSheet.create({
textAlign: 'center',
marginTop: 8,
},
+ metricsGrid: {
+ flexDirection: 'row',
+ justifyContent: 'space-between',
+ },
});
export default HomeScreen;
\ No newline at end of file
diff --git a/src/services/apiService.js b/src/services/apiService.js
index 0665c1c..b29ccbb 100644
--- a/src/services/apiService.js
+++ b/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);
}
diff --git a/src/services/authService.js b/src/services/authService.js
index 7ee3763..1c52da6 100644
--- a/src/services/authService.js
+++ b/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);
}