updated the look and feel of the home page

lib/screens/history/history_screen.dart

@@ -2,11 +2,12 @@ import 'package:flutter/material.dart';
 import 'package:go_router/go_router.dart';
 import 'package:provider/provider.dart';
 import 'package:qpay/models/responsive_policy.dart';
+import 'package:qpay/screens/receipt/receipt_controller.dart';
 import 'package:qpay/screens/transaction_controller.dart';
-import 'package:skeletonizer/skeletonizer.dart';
 import 'package:shared_preferences/shared_preferences.dart';
 import 'package:qpay/screens/history/history_controller.dart';
-import 'package:timeago/timeago.dart' as timeago;
+import 'package:qpay/widgets/transaction_item_widget.dart';
+import 'package:qpay/screens/transactions/transaction_model.dart' as txn;
 
 class HistoryScreen extends StatefulWidget {
   const HistoryScreen({super.key});
@@ -54,6 +55,13 @@ class _HistoryScreenState extends State<HistoryScreen>
     });
   }
 
+  /// Handles the repeat action for a transaction.
+  Future<void> _repeatTransaction(Map<String, dynamic> item) async {
+    final receiptController = ReceiptController(context);
+    final transaction = txn.TransactionModel.fromJson(item);
+    await receiptController.repeatTransaction(transaction);
+  }
+
   @override
   void dispose() {
     controller.dispose();
@@ -198,7 +206,7 @@ class _HistoryScreenState extends State<HistoryScreen>
                     borderSide: BorderSide(
                       color: Theme.of(
                         context,
-                      ).colorScheme.primary.withOpacity(0.2),
+                      ).colorScheme.primary.withValues(alpha: 0.2),
                     ),
                   ),
                   suffixIcon: _searchController.text.isNotEmpty
@@ -247,72 +255,15 @@ class _HistoryScreenState extends State<HistoryScreen>
 
     return SlideTransition(
       position: animation,
-      child: Skeletonizer(
+      child: TransactionItemWidget(
+        transaction: e,
         enabled: controller.model.isLoading,
-        child: InkWell(
-          customBorder: RoundedRectangleBorder(
-            borderRadius: BorderRadius.circular(12),
-          ),
-          onTap: () {
-            transactionController.updateReceiptData(e);
-            context.push("/receipt");
-          },
-          child: ListTile(
-            leading: Container(
-              padding: const EdgeInsets.all(8),
-              decoration: BoxDecoration(
-                color: Theme.of(
-                  context,
-                ).colorScheme.primary.withValues(alpha: 0.1),
-                shape: BoxShape.circle,
-              ),
-              child: Image(
-                image: AssetImage("assets/${e['paymentProcessorImage']}"),
-              ),
-            ),
-            title: Row(
-              children: [
-                Text(
-                  e['billName'],
-                  style: TextStyle(fontWeight: FontWeight.bold),
-                ),
-                SizedBox(width: 10),
-                Icon(
-                  e['integrationStatus'] == 'SUCCESS'
-                      ? Icons.check_circle
-                      : e['integrationStatus'] == 'PENDING'
-                      ? Icons.pending
-                      : Icons.cancel,
-                  size: 16,
-                  color: e['integrationStatus'] == 'SUCCESS'
-                      ? Colors.green
-                      : e['integrationStatus'] == 'PENDING'
-                      ? Colors.orange
-                      : Colors.red,
-                ),
-              ],
-            ),
-            subtitle: Text(
-              e['createdAt'] != null
-                  ? timeago.format(DateTime.parse(e['createdAt']))
-                  : '',
-              style: TextStyle(fontSize: 12),
-            ),
-            trailing: Column(
-              mainAxisAlignment: MainAxisAlignment.center,
-              children: [
-                Text(
-                  e['amount'].toStringAsFixed(2),
-                  style: TextStyle(fontWeight: FontWeight.bold, fontSize: 18),
-                ),
-                Text(
-                  e['totalAmount'].toStringAsFixed(2),
-                  style: TextStyle(fontSize: 12),
-                ),
-              ],
-            ),
-          ),
-        ),
+        onRepeat: () async {
+          await _repeatTransaction(e);
+          if (context.mounted) {
+            context.push('/make-payment');
+          }
+        },
       ),
     );
   }