Add stats overview

lib/features/common/stats/stats_overview.dart

@@ -0,0 +1,104 @@
+import 'package:flutter/material.dart';
+import 'package:gap/gap.dart';
+import 'package:hiddify/core/core_providers.dart';
+import 'package:hiddify/domain/singbox/singbox.dart';
+import 'package:hiddify/features/common/stats/stats_notifier.dart';
+import 'package:hiddify/utils/utils.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:recase/recase.dart';
+
+class StatsOverview extends HookConsumerWidget {
+  const StatsOverview({super.key});
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final t = ref.watch(translationsProvider);
+
+    final stats =
+        ref.watch(statsNotifierProvider).asData?.value ?? CoreStatus.empty();
+
+    return Padding(
+      padding: const EdgeInsets.symmetric(vertical: 16, horizontal: 16),
+      child: Column(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          _StatCard(
+            title: t.home.stats.traffic.titleCase,
+            firstStat: (
+              label: t.home.stats.uplink.titleCase,
+              data: stats.uplink.speed(),
+            ),
+            secondStat: (
+              label: t.home.stats.downlink.titleCase,
+              data: stats.downlink.speed(),
+            ),
+          ),
+          const Gap(8),
+          _StatCard(
+            title: t.home.stats.trafficTotal.titleCase,
+            firstStat: (
+              label: t.home.stats.uplink.titleCase,
+              data: stats.uplinkTotal.size(),
+            ),
+            secondStat: (
+              label: t.home.stats.downlink.titleCase,
+              data: stats.downlinkTotal.size(),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+class _StatCard extends HookConsumerWidget {
+  const _StatCard({
+    required this.title,
+    required this.firstStat,
+    required this.secondStat,
+  });
+
+  final String title;
+  final ({String label, String data}) firstStat;
+  final ({String label, String data}) secondStat;
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final theme = Theme.of(context);
+
+    return Card(
+      margin: EdgeInsets.zero,
+      shadowColor: Colors.transparent,
+      child: Padding(
+        padding: const EdgeInsets.symmetric(vertical: 4, horizontal: 8),
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            Text(title),
+            const Gap(4),
+            Row(
+              mainAxisAlignment: MainAxisAlignment.spaceBetween,
+              children: [
+                Text(
+                  firstStat.label,
+                  style: theme.textTheme.bodySmall,
+                ),
+                Text(firstStat.data),
+              ],
+            ),
+            Row(
+              mainAxisAlignment: MainAxisAlignment.spaceBetween,
+              children: [
+                Text(
+                  secondStat.label,
+                  style: theme.textTheme.bodySmall,
+                ),
+                Text(secondStat.data),
+              ],
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}