اريد ان يتم اظهار الاشعارات عبر ال loacl notification في ال notification panel بعد تسجيل الدخول وظهور هذة البيانات
 children: [
                    _buildStatCard(
                      icon: Icons.timer_rounded,
                      title: 'مدة الاتصال',
                      value: _currentUserData['uptime'],
                      color: const Color(0xFF3366FF),
                    ),
                    _buildStatCard(
                      icon: Icons.download_rounded,
                      title: 'البيانات المستلمة',
                      value: _currentUserData['bytes_in'],
                      color: const Color(0xFF00C1D4),
                    ),
                    _buildStatCard(
                      icon: Icons.upload_rounded,
                      title: 'البيانات المرسلة',
                      value: _currentUserData['bytes_out'],
                      color: const Color(0xFFFF8A34),
                    ),
                    _buildStatCard(
                      icon: Icons.access_time_filled_rounded,
                      title: 'الوقت المتبقي',
                      value: _currentUserData['session_time_left'],
                      color: const Color(0xFF50B83C),
                    ),
                    _buildStatCard(
                      icon: Icons.data_usage_rounded,
                      title: 'البيانات المتبقية',
                      value: _currentUserData['remain_bytes_total'],
                      color: const Color(0xFF9C6ADE),
                    ),
                    _buildStatCard(
                      icon: Icons.network_check_rounded,
                      title: 'حالة الاتصال',
                      value: 'نشط',
                      color: const Color(0xFFF7C948),
                    ),
                  ],
ويختفي عند الفشل في جلبها 
للعلم الكود
import 'dart:async';
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:flutter_local_notifications/flutter_local_notifications.dart';
import 'package:http/http.dart' as http;
import 'package:provider/provider.dart';
import 'package:shared_preferences/shared_preferences.dart';
import 'package:timezone/data/latest.dart' as tz;
import 'package:timezone/timezone.dart' as tz;
import 'package:permission_handler/permission_handler.dart';

final FlutterLocalNotificationsPlugin flutterLocalNotificationsPlugin =
    FlutterLocalNotificationsPlugin();

const AndroidNotificationChannel channel = AndroidNotificationChannel(
  'network_monitor_channel',
  'Network Monitor',
  description: 'قناة مراقبة حالة الشبكة',
  importance: Importance.high,
  ledColor: Color(0xFF3366FF),
  playSound: true,
  enableVibration: true,
);

Future<void> initializeNotifications() async {
  tz.initializeTimeZones();

  if (await Permission.notification.isDenied) {
    await Permission.notification.request();
  }

  await flutterLocalNotificationsPlugin
      .resolvePlatformSpecificImplementation<
        AndroidFlutterLocalNotificationsPlugin
      >()
      ?.createNotificationChannel(channel);

  const AndroidInitializationSettings initializationSettingsAndroid =
      AndroidInitializationSettings('@mipmap/ic_launcher');

  const InitializationSettings initializationSettings = InitializationSettings(
    android: initializationSettingsAndroid,
  );

  await flutterLocalNotificationsPlugin.initialize(initializationSettings);
}

Future<void> showNetworkNotification({
  required String title,
  required String body,
}) async {
  AndroidNotificationDetails androidNotificationDetails =
      AndroidNotificationDetails(
        channel.id,
        channel.name,
        channelDescription: channel.description,
        importance: Importance.high,
        priority: Priority.high,
        ticker: 'ticker',
        ongoing: true,
        autoCancel: false,
        icon: '@mipmap/ic_launcher',
      );

  NotificationDetails notificationDetails = NotificationDetails(
    android: androidNotificationDetails,
  );

  await flutterLocalNotificationsPlugin.show(
    888,
    title,
    body,
    notificationDetails,
  );
}

Future<void> cancelNetworkNotification() async {
  await flutterLocalNotificationsPlugin.cancel(888);
}

class AppState extends ChangeNotifier {
  bool _isLoggedIn = false;
  Map<String, dynamic> _userData = {};
  Timer? _notificationTimer;

  bool get isLoggedIn => _isLoggedIn;
  Map<String, dynamic> get userData => _userData;

  Future<void> login(Map<String, dynamic> userData) async {
    _isLoggedIn = true;
    _userData = userData;

    final prefs = await SharedPreferences.getInstance();
    await prefs.setBool('isLoggedIn', true);
    await prefs.setString('username', userData['username'] ?? '');

    _startNotificationService();
    notifyListeners();
  }

  Future<void> logout() async {
    _isLoggedIn = false;
    _userData = {};

    _stopNotificationService();

    final prefs = await SharedPreferences.getInstance();
    await prefs.remove('isLoggedIn');
    await prefs.remove('username');

    notifyListeners();
  }

  Future<void> checkLoginStatus() async {
    final prefs = await SharedPreferences.getInstance();
    _isLoggedIn = prefs.getBool('isLoggedIn') ?? false;
    if (_isLoggedIn) {
      _userData = {'username': prefs.getString('username') ?? ''};
      _startNotificationService();
    }
    notifyListeners();
  }

  void _startNotificationService() {
    _notificationTimer?.cancel();
    _notificationTimer = Timer.periodic(const Duration(seconds: 10), (
      timer,
    ) async {
      try {
        final response = await http
            .get(Uri.parse('http://172.16.0.1/status?var=json'))
            .timeout(const Duration(seconds: 10));

        if (response.statusCode == 200) {
          final data = json.decode(response.body);
          final username = data['username'] ?? 'غير معروف';
          final ip = data['ip'] ?? 'غير معروف';
          final bytesIn = _formatBytes(data['bytes_in']?.toString() ?? '0');
          final bytesOut = _formatBytes(data['bytes_out']?.toString() ?? '0');
          final sessionTimeLeft =
              data['session_time_left']?.toString() ?? 'غير محدود';

          await showNetworkNotification(
            title: "حالة الشبكة - $username",
            body:
                "IP: $ip | المستلم: $bytesIn | المرسل: $bytesOut | المتبقي: $sessionTimeLeft",
          );
        }
      } catch (_) {
        await showNetworkNotification(
          title: "حالة الشبكة",
          body: "خطأ في تحديث البيانات",
        );
      }
    });
  }

  void _stopNotificationService() {
    _notificationTimer?.cancel();
    cancelNetworkNotification();
  }

  String _formatBytes(String bytes) {
    try {
      final value = int.parse(bytes);
      if (value < 1024) return '$value بايت';
      if (value < 1024 * 1024)
        return '${(value / 1024).toStringAsFixed(1)} كيلوبايت';
      if (value < 1024 * 1024 * 1024)
        return '${(value / (1024 * 1024)).toStringAsFixed(1)} ميجابايت';
      return '${(value / (1024 * 1024 * 1024)).toStringAsFixed(1)} جيجابايت';
    } catch (_) {
      return bytes;
    }
  }
}

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await initializeNotifications();

  runApp(
    ChangeNotifierProvider(
      create: (context) => AppState(),
      child: const MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Network Monitor',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        fontFamily: 'Tajawal',
        scaffoldBackgroundColor: const Color(0xFFF8FAFD),
        appBarTheme: const AppBarTheme(
          elevation: 0,
          centerTitle: true,
          backgroundColor: Colors.transparent,
          foregroundColor: Color(0xFF2E384D),
        ),
      ),
      home: const AuthWrapper(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class AuthWrapper extends StatefulWidget {
  const AuthWrapper({super.key});

  @override
  State<AuthWrapper> createState() => _AuthWrapperState();
}

class _AuthWrapperState extends State<AuthWrapper> {
  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addPostFrameCallback((_) {
      Provider.of<AppState>(context, listen: false).checkLoginStatus();
    });
  }

  @override
  Widget build(BuildContext context) {
    final appState = Provider.of<AppState>(context);

    if (appState.isLoggedIn) {
      return DashboardScreen(username: appState.userData['username'] ?? '');
    } else {
      return const LoginScreen();
    }
  }
}

class LoginScreen extends StatefulWidget {
  const LoginScreen({super.key});

  @override
  State<LoginScreen> createState() => _LoginScreenState();
}

class _LoginScreenState extends State<LoginScreen> {
  final _formKey = GlobalKey<FormState>();
  final _usernameController = TextEditingController();
  final _passwordController = TextEditingController();
  bool _isLoggingIn = false;
  bool _obscurePassword = true;

  @override
  void dispose() {
    _usernameController.dispose();
    _passwordController.dispose();
    super.dispose();
  }

  Future<void> _login() async {
    if (!_formKey.currentState!.validate()) return;

    setState(() => _isLoggingIn = true);

    try {
      final response = await http
          .post(
            Uri.parse('http://172.16.0.1/login'),
            headers: {'Content-Type': 'application/x-www-form-urlencoded'},
            body: {
              'username': _usernameController.text,
              'password': _passwordController.text,
            },
          )
          .timeout(const Duration(seconds: 10));

      if (response.statusCode == 200) {
        final data = json.decode(response.body);

        if (data['status'] == 'success' && mounted) {
          Provider.of<AppState>(context, listen: false).login({
            'username': _usernameController.text,
            'ip': data['ip'] ?? 'غير معروف',
            'mac': data['mac']?.replaceAll('%3A', ':') ?? 'غير معروف',
          });
        } else {
          throw Exception(data['message'] ?? 'فشل تسجيل الدخول');
        }
      } else {
        throw Exception('فشل الاتصال بالخادم');
      }
    } catch (e) {
      if (mounted) {
        ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(
            content: Text('حدث خطأ: ${e.toString()}'),
            backgroundColor: Colors.red,
            behavior: SnackBarBehavior.floating,
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(10),
            ),
          ),
        );
      }
    } finally {
      if (mounted) setState(() => _isLoggingIn = false);
    }
  }

  @override
  Widget build(BuildContext context) {
    return Directionality(
      textDirection: TextDirection.rtl,
      child: Scaffold(
        body: Container(
          decoration: const BoxDecoration(
            gradient: LinearGradient(
              begin: Alignment.topRight,
              end: Alignment.bottomLeft,
              colors: [Color(0xFF3366FF), Color(0xFF00C1D4)],
            ),
          ),
          child: SafeArea(
            child: SingleChildScrollView(
              padding: const EdgeInsets.all(24.0),
              child: Column(
                children: [
                  const SizedBox(height: 40),
                  Image.asset(
                    'assets/network_icon.png',
                    height: 120,
                    width: 120,
                  ),
                  const SizedBox(height: 32),
                  Text(
                    'مرحباً بعودتك',
                    style: Theme.of(context).textTheme.headlineSmall?.copyWith(
                      fontWeight: FontWeight.bold,
                      color: Colors.white,
                    ),
                  ),
                  const SizedBox(height: 8),
                  Text(
                    'سجل الدخول للوصول إلى حسابك',
                    style: Theme.of(context).textTheme.bodyMedium?.copyWith(
                      color: Colors.white.withOpacity(0.9),
                    ),
                  ),
                  const SizedBox(height: 32),
                  Container(
                    decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.circular(16),
                      boxShadow: [
                        BoxShadow(
                          color: Colors.black.withOpacity(0.1),
                          blurRadius: 20,
                          offset: const Offset(0, 10),
                        ),
                      ],
                    ),
                    padding: const EdgeInsets.all(24),
                    child: Form(
                      key: _formKey,
                      child: Column(
                        children: [
                          TextFormField(
                            controller: _usernameController,
                            decoration: InputDecoration(
                              labelText: 'اسم المستخدم',
                              prefixIcon: const Icon(
                                Icons.person_outline_rounded,
                                color: Color(0xFFB0BAC9),
                              ),
                              border: OutlineInputBorder(
                                borderRadius: BorderRadius.circular(8),
                                borderSide: const BorderSide(
                                  color: Color(0xFFE0E6ED),
                                ),
                              ),
                              enabledBorder: OutlineInputBorder(
                                borderRadius: BorderRadius.circular(8),
                                borderSide: const BorderSide(
                                  color: Color(0xFFE0E6ED),
                                ),
                              ),
                              filled: true,
                              fillColor: Colors.white,
                            ),
                            validator:
                                (value) =>
                                    (value == null || value.isEmpty)
                                        ? 'الرجاء إدخال اسم المستخدم'
                                        : null,
                          ),
                          const SizedBox(height: 16),
                          TextFormField(
                            controller: _passwordController,
                            obscureText: _obscurePassword,
                            decoration: InputDecoration(
                              labelText: 'كلمة المرور',
                              prefixIcon: const Icon(
                                Icons.lock_outline_rounded,
                                color: Color(0xFFB0BAC9),
                              ),
                              suffixIcon: IconButton(
                                icon: Icon(
                                  _obscurePassword
                                      ? Icons.visibility_off_outlined
                                      : Icons.visibility_outlined,
                                  color: const Color(0xFFB0BAC9),
                                ),
                                onPressed: () {
                                  setState(() {
                                    _obscurePassword = !_obscurePassword;
                                  });
                                },
                              ),
                              border: OutlineInputBorder(
                                borderRadius: BorderRadius.circular(8),
                                borderSide: const BorderSide(
                                  color: Color(0xFFE0E6ED),
                                ),
                              ),
                              enabledBorder: OutlineInputBorder(
                                borderRadius: BorderRadius.circular(8),
                                borderSide: const BorderSide(
                                  color: Color(0xFFE0E6ED),
                                ),
                              ),
                              filled: true,
                              fillColor: Colors.white,
                            ),
                            validator:
                                (value) =>
                                    (value == null || value.isEmpty)
                                        ? 'الرجاء إدخال كلمة المرور'
                                        : null,
                          ),
                          const SizedBox(height: 24),
                          SizedBox(
                            width: double.infinity,
                            height: 50,
                            child: ElevatedButton(
                              onPressed: _isLoggingIn ? null : _login,
                              style: ElevatedButton.styleFrom(
                                backgroundColor: const Color(0xFF3366FF),
                                shape: RoundedRectangleBorder(
                                  borderRadius: BorderRadius.circular(8),
                                ),
                                elevation: 0,
                                shadowColor: Colors.transparent,
                              ),
                              child:
                                  _isLoggingIn
                                      ? const SizedBox(
                                        width: 20,
                                        height: 20,
                                        child: CircularProgressIndicator(
                                          color: Colors.white,
                                          strokeWidth: 2,
                                        ),
                                      )
                                      : const Text(
                                        'تسجيل الدخول',
                                        style: TextStyle(
                                          fontSize: 16,
                                          fontWeight: FontWeight.bold,
                                        ),
                                      ),
                            ),
                          ),
                        ],
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

class DashboardScreen extends StatefulWidget {
  final String username;

  const DashboardScreen({super.key, required this.username});

  @override
  State<DashboardScreen> createState() => _DashboardScreenState();
}

class _DashboardScreenState extends State<DashboardScreen> {
  Timer? _timer;
  Map<String, dynamic> _currentUserData = {
    'ip': '...',
    'mac': '...',
    'bytes_in': '0',
    'bytes_out': '0',
    'remain_bytes_total': '0',
    'uptime': '0s',
    'session_time_left': 'غير محدود',
  };

  @override
  void initState() {
    super.initState();
    _timer = Timer.periodic(const Duration(seconds: 1), (_) => _fetchStatus());
    _fetchStatus();
  }

  @override
  void dispose() {
    _timer?.cancel();
    super.dispose();
  }

  Future<void> _fetchStatus() async {
    try {
      final res = await http
          .get(Uri.parse('http://172.16.0.1/status?var=json'))
          .timeout(const Duration(seconds: 10));

      if (res.statusCode == 200) {
        final data = json.decode(res.body);
        if (data.containsKey('errors')) return;

        setState(() {
          _currentUserData = {
            'ip': data['ip'] ?? 'غير معروف',
            'mac': data['mac']?.replaceAll('%3A', ':') ?? 'غير معروف',
            'bytes_in': _formatBytes(data['bytes_in']?.toString() ?? '0'),
            'bytes_out': _formatBytes(data['bytes_out']?.toString() ?? '0'),
            'remain_bytes_total': _formatBytes(
              data['remain_bytes_total']?.toString() ?? '0',
            ),
            'uptime': _formatUptimeExtended(data['uptime'] ?? '0s'),
            'session_time_left': _formatSessionTimeLeft(
              data['session_time_left'] ?? 'غير محدود',
            ),
          };
        });
      }
    } catch (_) {}
  }

  String _formatBytes(String bytes) {
    try {
      final value = int.parse(bytes);
      if (value < 1024) return '$value بايت';
      if (value < 1024 * 1024)
        return '${(value / 1024).toStringAsFixed(1)} كيلوبايت';
      if (value < 1024 * 1024 * 1024)
        return '${(value / (1024 * 1024)).toStringAsFixed(1)} ميجابايت';
      return '${(value / (1024 * 1024 * 1024)).toStringAsFixed(1)} جيجابايت';
    } catch (_) {
      return bytes;
    }
  }

  String _formatUptimeExtended(String uptime) {
    final regex = RegExp(r'(?:(\d+)d)?(?:(\d+)h)?(?:(\d+)m)?(?:(\d+)s)?');
    final match = regex.firstMatch(uptime);
    if (match == null) return uptime;

    final days = int.tryParse(match.group(1) ?? '0') ?? 0;
    final hours = int.tryParse(match.group(2) ?? '0') ?? 0;
    final minutes = int.tryParse(match.group(3) ?? '0') ?? 0;
    final seconds = int.tryParse(match.group(4) ?? '0') ?? 0;

    String result = '';
    if (days > 0) result += '$days يوم ';
    if (hours > 0) result += '$hours ساعة ';
    if (minutes > 0) result += '$minutes دقيقة ';
    if (seconds > 0) result += '$seconds ثانية';

    return result.trim();
  }

  String _formatSessionTimeLeft(String sessionTimeLeft) {
    if (sessionTimeLeft == 'غير محدود') return sessionTimeLeft;
    return _formatUptimeExtended(sessionTimeLeft);
  }

  Future<void> _logout() async {
    try {
      final response = await http
          .post(
            Uri.parse('http://172.16.0.1/logout'),
            headers: {'Content-Type': 'application/x-www-form-urlencoded'},
            body: {'username': widget.username},
          )
          .timeout(const Duration(seconds: 10));

      if (response.statusCode == 200 && mounted) {
        Provider.of<AppState>(context, listen: false).logout();
      } else {
        throw Exception('فشل في تسجيل الخروج');
      }
    } catch (e) {
      if (mounted) {
        ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(
            content: Text('حدث خطأ: ${e.toString()}'),
            backgroundColor: Colors.red,
            behavior: SnackBarBehavior.floating,
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(10),
            ),
          ),
        );
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    return Directionality(
      textDirection: TextDirection.rtl,
      child: Scaffold(
        backgroundColor: const Color(0xFFF8FAFD),
        appBar: AppBar(
          title: const Text('لوحة التحكم'),
          actions: [
            IconButton(
              icon: const Icon(Icons.logout_rounded),
              tooltip: 'تسجيل الخروج',
              onPressed: _logout,
            ),
          ],
        ),
        body: SafeArea(
          child: SingleChildScrollView(
            padding: const EdgeInsets.all(16),
            child: Column(
              children: [
                _buildUserCard(),
                const SizedBox(height: 24),
                GridView.count(
                  shrinkWrap: true,
                  physics: const NeverScrollableScrollPhysics(),
                  crossAxisCount: 2,
                  childAspectRatio: 1.1,
                  crossAxisSpacing: 16,
                  mainAxisSpacing: 16,
                  children: [
                    _buildStatCard(
                      icon: Icons.timer_rounded,
                      title: 'مدة الاتصال',
                      value: _currentUserData['uptime'],
                      color: const Color(0xFF3366FF),
                    ),
                    _buildStatCard(
                      icon: Icons.download_rounded,
                      title: 'البيانات المستلمة',
                      value: _currentUserData['bytes_in'],
                      color: const Color(0xFF00C1D4),
                    ),
                    _buildStatCard(
                      icon: Icons.upload_rounded,
                      title: 'البيانات المرسلة',
                      value: _currentUserData['bytes_out'],
                      color: const Color(0xFFFF8A34),
                    ),
                    _buildStatCard(
                      icon: Icons.access_time_filled_rounded,
                      title: 'الوقت المتبقي',
                      value: _currentUserData['session_time_left'],
                      color: const Color(0xFF50B83C),
                    ),
                    _buildStatCard(
                      icon: Icons.data_usage_rounded,
                      title: 'البيانات المتبقية',
                      value: _currentUserData['remain_bytes_total'],
                      color: const Color(0xFF9C6ADE),
                    ),
                    _buildStatCard(
                      icon: Icons.network_check_rounded,
                      title: 'حالة الاتصال',
                      value: 'نشط',
                      color: const Color(0xFFF7C948),
                    ),
                  ],
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }

  Widget _buildUserCard() {
    return Container(
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(16),
        color: Colors.white,
        boxShadow: [
          BoxShadow(
            color: Colors.grey.withOpacity(0.1),
            blurRadius: 10,
            offset: const Offset(0, 5),
          ),
        ],
      ),
      padding: const EdgeInsets.all(16),
      child: Column(
        children: [
          Row(
            children: [
              Container(
                width: 60,
                height: 60,
                decoration: BoxDecoration(
                  color: const Color(0xFF3366FF).withOpacity(0.1),
                  shape: BoxShape.circle,
                ),
                child: const Icon(
                  Icons.person_rounded,
                  size: 30,
                  color: Color(0xFF3366FF),
                ),
              ),
              const SizedBox(width: 16),
              Expanded(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      widget.username,
                      style: const TextStyle(
                        fontSize: 18,
                        fontWeight: FontWeight.bold,
                        fontFamily: 'Tajawal',
                        color: Color(0xFF2E384D),
                      ),
                      maxLines: 1,
                      overflow: TextOverflow.ellipsis,
                    ),
                    const SizedBox(height: 4),
                    const Text(
                      'بيانات المستخدم',
                      style: TextStyle(
                        fontSize: 14,
                        color: Color(0xFF8798AD),
                        fontFamily: 'Tajawal',
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),
          const SizedBox(height: 16),
          Divider(color: Colors.grey.withOpacity(0.2), height: 1),
          const SizedBox(height: 12),
          _buildInfoRow(
            Icons.wifi_rounded,
            'عنوان IP:',
            _currentUserData['ip'],
            const Color(0xFF2E384D),
          ),
          _buildInfoRow(
            Icons.device_hub_rounded,
            'عنوان MAC:',
            _currentUserData['mac'],
            const Color(0xFF2E384D),
          ),
        ],
      ),
    );
  }

  Widget _buildInfoRow(IconData icon, String label, String value, Color color) {
    return Padding(
      padding: const EdgeInsets.symmetric(vertical: 8),
      child: Row(
        children: [
          Icon(icon, size: 20, color: color.withOpacity(0.6)),
          const SizedBox(width: 12),
          Text(
            label,
            style: TextStyle(
              fontWeight: FontWeight.bold,
              fontFamily: 'Tajawal',
              fontSize: 15,
              color: color.withOpacity(0.8),
            ),
          ),
          const SizedBox(width: 8),
          Expanded(
            child: Text(
              value,
              style: TextStyle(
                color: color,
                overflow: TextOverflow.ellipsis,
                fontFamily: 'Tajawal',
              ),
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildStatCard({
    required IconData icon,
    required String title,
    required String value,
    required Color color,
  }) {
    return Container(
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(16),
        boxShadow: [
          BoxShadow(
            color: Colors.grey.withOpacity(0.1),
            blurRadius: 10,
            offset: const Offset(0, 5),
          ),
        ],
      ),
      child: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Container(
              padding: const EdgeInsets.all(10),
              decoration: BoxDecoration(
                color: color.withOpacity(0.1),
                borderRadius: BorderRadius.circular(12),
              ),
              child: Icon(icon, size: 24, color: color),
            ),
            const SizedBox(height: 12),
            Text(
              value,
              style: const TextStyle(
                fontFamily: 'Tajawal',
                fontSize: 16,
                fontWeight: FontWeight.bold,
                color: Color(0xFF2E384D),
              ),
            ),
            const SizedBox(height: 4),
            Text(
              title,
              style: const TextStyle(
                fontFamily: 'Tajawal',
                fontSize: 13,
                color: Color(0xFF8798AD),
              ),
            ),
          ],
        ),
      ),
    );
  }
}