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); }