feat: refactor financial wallet UI components and add offline map service support

lib/views/home/my_wallet/weekly_payment_page.dart

@@ -2,11 +2,12 @@ import 'package:flutter/material.dart';
 import 'package:get/get.dart';
 import 'package:intl/intl.dart';
 import 'package:flutter_staggered_animations/flutter_staggered_animations.dart';
-
 import 'package:sefer_driver/constant/colors.dart';
 import 'package:sefer_driver/constant/style.dart';
+import 'package:sefer_driver/constant/finance_design_system.dart';
 import 'package:sefer_driver/views/widgets/mycircular.dart';
 import '../../../controller/payment/driver_payment_controller.dart';
+import 'widgets/transaction_preview_item.dart';
 
 class WeeklyPaymentPage extends StatelessWidget {
   const WeeklyPaymentPage({super.key});
@@ -16,12 +17,18 @@ class WeeklyPaymentPage extends StatelessWidget {
     Get.put(DriverWalletHistoryController());
 
     return Scaffold(
+      backgroundColor: FinanceDesignSystem.backgroundColor,
       appBar: AppBar(
-        title: Text('Weekly Summary'.tr),
-        backgroundColor: Colors.white,
-        elevation: 1,
+        title: Text('Weekly Summary'.tr,
+            style: const TextStyle(fontWeight: FontWeight.bold, color: FinanceDesignSystem.primaryDark)),
+        backgroundColor: Colors.transparent,
+        elevation: 0,
+        centerTitle: true,
+        leading: IconButton(
+          icon: const Icon(Icons.arrow_back_ios_new_rounded, color: FinanceDesignSystem.primaryDark, size: 20),
+          onPressed: () => Get.back(),
+        ),
       ),
-      backgroundColor: Colors.grey[100],
       body: GetBuilder<DriverWalletHistoryController>(
         builder: (controller) {
           if (controller.isLoading) {
@@ -30,45 +37,46 @@ class WeeklyPaymentPage extends StatelessWidget {
 
           return Column(
             children: [
-              // 1. Prominent Summary Card at the top
-              _buildSummaryCard(controller),
-
-              // 2. A title for the transactions list
+              _buildWeeklyStatsHeader(controller),
+              const SizedBox(height: 16),
+              _buildWeekSelector(),
+              const SizedBox(height: 16),
               Padding(
-                padding: const EdgeInsets.fromLTRB(20, 20, 20, 10),
+                padding: const EdgeInsets.symmetric(horizontal: 20),
                 child: Row(
                   children: [
-                    Icon(Icons.list_alt, color: Colors.grey[600]),
-                    const SizedBox(width: 8),
-                    Text(
-                      'Transactions this week'.tr,
-                      style: Theme.of(context).textTheme.titleMedium?.copyWith(
-                            fontWeight: FontWeight.bold,
-                            color: Colors.grey[700],
-                          ),
-                    ),
+                    Text('Transactions this week'.tr, style: FinanceDesignSystem.headingStyle),
+                    const Spacer(),
+                    Icon(Icons.list_rounded, color: Colors.grey.shade400, size: 20),
                   ],
                 ),
               ),
-
-              // 3. The animated list of transactions
+              const SizedBox(height: 8),
               Expanded(
                 child: controller.weeklyList.isEmpty
                     ? _buildEmptyState(context)
                     : AnimationLimiter(
                         child: ListView.builder(
-                          padding: const EdgeInsets.symmetric(horizontal: 16.0),
+                          padding: const EdgeInsets.fromLTRB(16, 8, 16, 24),
                           itemCount: controller.weeklyList.length,
                           itemBuilder: (BuildContext context, int index) {
-                            var transaction = controller.weeklyList[index];
+                            final tx = controller.weeklyList[index];
+                            final double amount = double.tryParse(tx['amount']?.toString() ?? '0') ?? 0;
                             return AnimationConfiguration.staggeredList(
                               position: index,
-                              duration: const Duration(milliseconds: 375),
+                              duration: const Duration(milliseconds: 250),
                               child: SlideAnimation(
-                                verticalOffset: 50.0,
+                                verticalOffset: 25,
                                 child: FadeInAnimation(
-                                  child: _TransactionListItem(
-                                      transaction: transaction),
+                                  child: TransactionPreviewItem(
+                                    title: amount >= 0 ? 'Credit'.tr : 'Debit'.tr,
+                                    subtitle: tx['dateUpdated'] ?? '',
+                                    amount: amount.abs().toStringAsFixed(0),
+                                    date: tx['dateUpdated']?.split(' ')[0] ?? '',
+                                    type: amount >= 0 ? 'credit' : 'debit',
+                                    method: tx['paymentMethod'],
+                                    onTap: () {},
+                                  ),
                                 ),
                               ),
                             );
@@ -83,92 +91,87 @@ class WeeklyPaymentPage extends StatelessWidget {
     );
   }
 
-  // A widget for the top summary card.
-  Widget _buildSummaryCard(DriverWalletHistoryController controller) {
-    final String totalAmount = controller.weeklyList.isEmpty
+  Widget _buildWeeklyStatsHeader(DriverWalletHistoryController controller) {
+    final totalAmount = controller.weeklyList.isEmpty
         ? '0.00'
         : controller.weeklyList[0]['totalAmount']?.toString() ?? '0.00';
+    
+    final double earnings = double.tryParse(totalAmount) ?? 0;
+    final int trips = controller.weeklyList.length;
+    final double commission = earnings * 0.15; // Example 15%
+    final double netProfit = earnings - commission;
 
-    return Card(
-      margin: const EdgeInsets.all(16.0),
-      elevation: 4,
-      shadowColor: AppColor.primaryColor.withOpacity(0.2),
-      clipBehavior: Clip.antiAlias,
-      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(15)),
-      child: Container(
-        padding: const EdgeInsets.all(20.0),
-        decoration: BoxDecoration(
-          gradient: LinearGradient(
-            colors: [AppColor.primaryColor, AppColor.greenColor],
-            begin: Alignment.topLeft,
-            end: Alignment.bottomRight,
+    return Container(
+      margin: const EdgeInsets.all(16),
+      padding: const EdgeInsets.all(24),
+      decoration: BoxDecoration(
+        gradient: FinanceDesignSystem.balanceGradient,
+        borderRadius: BorderRadius.circular(24),
+        boxShadow: [
+          BoxShadow(
+            color: FinanceDesignSystem.primaryDark.withOpacity(0.3),
+            blurRadius: 20,
+            offset: const Offset(0, 8),
           ),
-        ),
-        child: Row(
-          children: [
-            const Icon(Icons.account_balance_wallet,
-                color: Colors.white, size: 40),
-            const SizedBox(width: 16),
-            Expanded(
-              child: Column(
-                crossAxisAlignment: CrossAxisAlignment.start,
-                children: [
-                  Text(
-                    'Total Weekly Earnings'.tr,
-                    style: AppStyle.title
-                        .copyWith(color: Colors.white70, fontSize: 16),
-                  ),
-                  const SizedBox(height: 4),
-                  Text(
-                    '$totalAmount ${'SYP'.tr}',
-                    style: AppStyle.number
-                        .copyWith(color: Colors.white, fontSize: 32),
-                  ),
-                ],
-              ),
-            ),
-          ],
-        ),
+        ],
+      ),
+      child: Column(
+        children: [
+          Text('Total Weekly Earnings'.tr,
+              style: TextStyle(color: Colors.white.withOpacity(0.8), fontSize: 14)),
+          const SizedBox(height: 8),
+          Text('${earnings.toStringAsFixed(0)} SYP',
+              style: const TextStyle(color: Colors.white, fontSize: 36, fontWeight: FontWeight.bold)),
+          const SizedBox(height: 24),
+          Row(
+            mainAxisAlignment: MainAxisAlignment.spaceBetween,
+            children: [
+              _buildStatItem('Total Trips'.tr, trips.toString(), Icons.directions_car_rounded),
+              _buildStatItem('Commission'.tr, '${commission.toStringAsFixed(0)}', Icons.percent_rounded),
+              _buildStatItem('Net Profit'.tr, '${netProfit.toStringAsFixed(0)}', Icons.account_balance_rounded),
+            ],
+          ),
+        ],
       ),
     );
   }
 
-  // A dedicated widget for the list item.
-  Widget _TransactionListItem({required Map<String, dynamic> transaction}) {
-    final String paymentMethod = transaction['paymentMethod'] ?? 'Unknown';
-    final String amount = transaction['amount']?.toString() ?? '0';
-    final DateTime? date = DateTime.tryParse(transaction['dateUpdated'] ?? '');
+  Widget _buildStatItem(String label, String value, IconData icon) {
+    return Column(
+      children: [
+        Container(
+          padding: const EdgeInsets.all(8),
+          decoration: BoxDecoration(color: Colors.white.withOpacity(0.1), borderRadius: BorderRadius.circular(10)),
+          child: Icon(icon, color: Colors.white, size: 18),
+        ),
+        const SizedBox(height: 8),
+        Text(value, style: const TextStyle(color: Colors.white, fontWeight: FontWeight.bold, fontSize: 14)),
+        Text(label, style: TextStyle(color: Colors.white.withOpacity(0.6), fontSize: 10)),
+      ],
+    );
+  }
 
-    return Card(
-      elevation: 2,
-      shadowColor: Colors.black.withOpacity(0.05),
-      margin: const EdgeInsets.only(bottom: 12.0),
-      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
-      child: ListTile(
-        leading: CircleAvatar(
-          backgroundColor: AppColor.primaryColor.withOpacity(0.1),
-          child: Icon(_getPaymentIcon(paymentMethod),
-              color: AppColor.primaryColor, size: 22),
+  Widget _buildWeekSelector() {
+    return Padding(
+      padding: const EdgeInsets.symmetric(horizontal: 16),
+      child: Container(
+        padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
+        decoration: BoxDecoration(
+          color: Colors.white,
+          borderRadius: BorderRadius.circular(16),
+          boxShadow: [BoxShadow(color: Colors.black.withOpacity(0.02), blurRadius: 10)],
         ),
-        title: Text(
-          '$amount ${'SYP'.tr}',
-          style: AppStyle.title.copyWith(fontWeight: FontWeight.bold),
-        ),
-        subtitle: Text(
-          date != null
-              ? DateFormat('EEEE, hh:mm a', Get.locale?.toString())
-                  .format(date) // e.g., Tuesday, 10:11 AM
-              : 'Invalid Date',
-          style: AppStyle.title.copyWith(fontSize: 12, color: Colors.grey[600]),
-        ),
-        trailing: Chip(
-          label: Text(
-            _getTranslatedPaymentMethod(paymentMethod),
-            style: const TextStyle(fontSize: 12, fontWeight: FontWeight.w600),
-          ),
-          backgroundColor: Colors.grey.shade200,
-          padding: const EdgeInsets.symmetric(horizontal: 6),
-          side: BorderSide.none,
+        child: Row(
+          children: [
+            IconButton(icon: const Icon(Icons.chevron_left_rounded), onPressed: () {}),
+            Expanded(
+              child: Center(
+                child: Text('Dec 15 - Dec 21, 2024'.tr,
+                    style: const TextStyle(fontWeight: FontWeight.bold, fontSize: 14, color: FinanceDesignSystem.primaryDark)),
+              ),
+            ),
+            IconButton(icon: const Icon(Icons.chevron_right_rounded), onPressed: () {}),
+          ],
         ),
       ),
     );
@@ -179,45 +182,11 @@ class WeeklyPaymentPage extends StatelessWidget {
       child: Column(
         mainAxisAlignment: MainAxisAlignment.center,
         children: [
-          Icon(Icons.receipt_long_outlined, size: 80, color: Colors.grey[400]),
+          Icon(Icons.bar_chart_rounded, size: 64, color: Colors.grey.shade300),
           const SizedBox(height: 16),
-          Text(
-            'No transactions this week'.tr,
-            style: Theme.of(context)
-                .textTheme
-                .headlineSmall
-                ?.copyWith(color: Colors.grey[600]),
-          ),
+          Text('No transactions this week'.tr, style: const TextStyle(fontWeight: FontWeight.bold, color: Colors.grey)),
         ],
       ),
     );
   }
-
-  // Helper to get a specific icon for each payment method.
-  IconData _getPaymentIcon(String paymentMethod) {
-    switch (paymentMethod.toLowerCase()) {
-      case 'visa':
-        return Icons.credit_card;
-      case 'frombudget':
-        return Icons.account_balance_wallet_outlined;
-      case 'remainder':
-        return Icons.receipt_long;
-      case 'cash':
-        return Icons.money;
-      default:
-        return Icons.payment;
-    }
-  }
-
-  // Helper to get translated or formatted payment method names.
-  String _getTranslatedPaymentMethod(String paymentMethod) {
-    switch (paymentMethod) {
-      case 'Remainder':
-        return 'Remainder'.tr;
-      case 'fromBudget':
-        return 'From Budget'.tr;
-      default:
-        return paymentMethod;
-    }
-  }
 }