Screen design of account statement/history page

lib/features/auth/screens/account_info_screen.dart

@@ -17,8 +17,9 @@ class _AccountInfoScreen extends State<AccountInfoScreen>{
           onPressed: () {
             Navigator.pop(context);
           },),
-        title: const Text('kMobile', style: TextStyle(color: Colors.black,
+        title: const Text('Account Info', style: TextStyle(color: Colors.black,
             fontWeight: FontWeight.w500),),
+        centerTitle: false,
         actions: const [
           Padding(
             padding: EdgeInsets.only(right: 10.0),

lib/features/auth/screens/account_statement_screen.dart

@@ -0,0 +1,183 @@
+import 'package:flutter/material.dart';
+import 'package:material_symbols_icons/material_symbols_icons.dart';
+
+class AccountStatementScreen extends StatefulWidget {
+  const AccountStatementScreen({super.key});
+
+  @override
+  State<AccountStatementScreen> createState() => _AccountStatementScreen();
+}
+
+class _AccountStatementScreen extends State<AccountStatementScreen>{
+  DateTimeRange? selectedDateRange;
+  final _amountRangeController = TextEditingController(text: "100-500");
+  final transactions = [
+    {"desc": "Transfer From ICICI Bank subsidy", "amount": "+₹133.98", "type": "Cr", "time": "21-02-2024 13:09:30"},
+    {"desc": "Mobile recharge", "amount": "-₹299.00", "type": "Dr", "time": "21-02-2024 13:09:30"},
+    {"desc": "NEFT received from Jaya Saha", "amount": "+₹987.80", "type": "Cr", "time": "21-02-2024 13:09:30"},
+    {"desc": "Transfer From ICICI Bank subsidy", "amount": "+₹100.00", "type": "Cr", "time": "21-02-2024 13:09:30"},
+    {"desc": "Transfer From ICICI Bank subsidy", "amount": "-₹100.00", "type": "Dr", "time": "21-02-2024 13:09:30"},
+    {"desc": "Transfer From ICICI Bank subsidy", "amount": "+₹100.00", "type": "Cr", "time": "21-02-2024 13:09:30"},
+    {"desc": "Transfer From ICICI Bank subsidy", "amount": "+₹100.00", "type": "Cr", "time": "21-02-2024 13:09:30"},
+  ];
+
+  Future<void> _selectDateRange(BuildContext context) async {
+    final DateTime now = DateTime.now();
+
+    final DateTimeRange? picked = await showDateRangePicker(
+      context: context,
+      firstDate: DateTime(2023),
+      lastDate: now, // disables future dates
+      initialDateRange: selectedDateRange ??
+          DateTimeRange(start: now.subtract(const Duration(days: 7)), end: now),
+    );
+
+    if (picked != null) {
+      setState(() {
+        selectedDateRange = picked;
+      });
+    }
+  }
+
+  String _formatDate(DateTime date) {
+    return "${date.day.toString().padLeft(2, '0')}-"
+        "${date.month.toString().padLeft(2, '0')}-"
+        "${date.year}";
+  }
+
+  @override
+  void dispose() {
+    _amountRangeController.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        leading: IconButton(icon: const Icon(Symbols.arrow_back_ios_new),
+          onPressed: () {
+            Navigator.pop(context);
+          },),
+        title: const Text('Account Statement', style: TextStyle(color: Colors.black,
+            fontWeight: FontWeight.w500),),
+        centerTitle: false,
+        actions: const [
+          Padding(
+            padding: EdgeInsets.only(right: 10.0),
+            child: CircleAvatar(
+              backgroundImage: AssetImage('assets/images/avatar.jpg'), // Replace with your image
+              radius: 20,
+            ),
+          ),
+        ],
+      ),
+
+      body: Padding(
+        padding: const EdgeInsets.all(12.0),
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            const Text('Filters', style: TextStyle(fontSize: 17),),
+            const SizedBox(height: 15,),
+            Row(
+              children: [
+                Expanded(child: _buildDateRangeSelector()),
+                const SizedBox(width: 10),
+                Expanded(child: _buildFilterBox("100-500")),
+              ],
+            ),
+            const SizedBox(height: 35),
+            Expanded(
+              child: ListView.builder(
+                itemCount: transactions.length,
+                itemBuilder: (context, index) {
+                  final txn = transactions[index];
+                  return _buildTransactionTile(txn);
+                },
+              ),
+            ),
+          ],
+        ),
+      ),
+
+    );
+  }
+
+  Widget _buildDateRangeSelector() {
+    String label = "Select Date";
+    if (selectedDateRange != null) {
+      final from = _formatDate(selectedDateRange!.start);
+      final to = _formatDate(selectedDateRange!.end);
+      label = "$from - $to";
+    }
+
+    return GestureDetector(
+      onTap: () => _selectDateRange(context),
+      child: Container(
+        padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 14),
+        decoration: BoxDecoration(
+          border: Border.all(color: Colors.grey),
+          borderRadius: BorderRadius.circular(8),
+        ),
+        child: Row(
+          children: [
+            Expanded(child: Text(label, style: const TextStyle(fontSize: 16))),
+            const Icon(Icons.calendar_today),
+          ],
+        ),
+      ),
+    );
+  }
+
+  Widget _buildFilterBox(String text) {
+    return TextFormField(
+      controller: _amountRangeController,
+      decoration: const InputDecoration(
+        labelText: 'Amount Range',
+        // prefixIcon: Icon(Icons.person),
+        border: OutlineInputBorder(),
+        isDense: true,
+        filled: true,
+        fillColor: Colors.white,
+        enabledBorder: OutlineInputBorder(
+          borderSide: BorderSide(color: Colors.black),
+        ),
+        focusedBorder: OutlineInputBorder(
+          borderSide: BorderSide(color: Colors.black, width: 2),
+        ),
+      ),
+      keyboardType: TextInputType.number,
+      textInputAction: TextInputAction.next,
+      validator: (value) {
+        if (value == null || value.isEmpty) {
+          return 'Please enter amount range';
+        }
+        return null;
+      },
+    );
+  }
+
+  Widget _buildTransactionTile(Map<String, String> txn) {
+    final isCredit = txn['type'] == "Cr";
+    final amountColor = isCredit ? Colors.green : Colors.red;
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        Text(txn['time']!, style: const TextStyle(color: Colors.grey)),
+        const SizedBox(height: 4),
+        Row(
+          mainAxisAlignment: MainAxisAlignment.spaceBetween,
+          children: [
+            Expanded(child: Text(txn['desc']!, style: const TextStyle(fontSize: 16))),
+            Text(
+              "${txn['amount']} ${txn['type']}",
+              style: TextStyle(color: amountColor, fontWeight: FontWeight.bold),
+            ),
+          ],
+        ),
+        const SizedBox(height: 25),
+      ],
+    );
+  }
+}

lib/features/dashboard/screens/dashboard_screen.dart

@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:kmobile/features/auth/screens/account_info_screen.dart';
+import 'package:kmobile/features/auth/screens/account_statement_screen.dart';
 import 'package:kmobile/features/auth/screens/customer_info_screen.dart';
 import 'package:material_symbols_icons/material_symbols_icons.dart';
 
@@ -118,7 +119,10 @@ class _DashboardScreenState extends State<DashboardScreen> {
                             builder: (context) => const AccountInfoScreen()));
                       }),
                   _buildQuickLink(Symbols.receipt_long, "Account \n History",
-                          () => print("")),
+                          () {
+                            Navigator.push(context, MaterialPageRoute(
+                                builder: (context) => const AccountStatementScreen()));
+                          }),
                   _buildQuickLink(Symbols.checkbook, "Handle \n Cheque",
                           () => print("")),
                   _buildQuickLink(Icons.group, "Manage \n Beneficiary",