prototype complete
This commit is contained in:
271
lib/screens/history/history_screen.dart
Normal file
271
lib/screens/history/history_screen.dart
Normal file
@@ -0,0 +1,271 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:go_router/go_router.dart';
|
||||
import 'package:provider/provider.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;
|
||||
|
||||
class HistoryScreen extends StatefulWidget {
|
||||
const HistoryScreen({super.key});
|
||||
|
||||
@override
|
||||
State<HistoryScreen> createState() => _HistoryScreenState();
|
||||
}
|
||||
|
||||
class _HistoryScreenState extends State<HistoryScreen>
|
||||
with TickerProviderStateMixin {
|
||||
late HistoryController controller;
|
||||
late SharedPreferences prefs;
|
||||
late AnimationController _controller;
|
||||
late TransactionController transactionController;
|
||||
|
||||
final TextEditingController _searchController = TextEditingController();
|
||||
final Map<String, String> _queryParams = {};
|
||||
final List<Animation<Offset>> _alignListAnimations = [];
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
controller = HistoryController(context);
|
||||
setupData();
|
||||
|
||||
transactionController = Provider.of<TransactionController>(
|
||||
context,
|
||||
listen: false,
|
||||
);
|
||||
|
||||
_controller = AnimationController(
|
||||
duration: const Duration(milliseconds: 600),
|
||||
vsync: this,
|
||||
)..forward();
|
||||
|
||||
List tranListIndices = [0, 1];
|
||||
for (int i = 0; i < tranListIndices.length; i++) {
|
||||
_alignListAnimations.add(
|
||||
Tween<Offset>(begin: Offset(0, -0.25), end: Offset.zero).animate(
|
||||
CurvedAnimation(
|
||||
parent: _controller,
|
||||
curve: Interval(0.075 * i, 1.0, curve: Curves.easeOut),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
void setupData() async {
|
||||
prefs = await SharedPreferences.getInstance();
|
||||
|
||||
await controller.getTransactions({'userId': prefs.getString("userId")!});
|
||||
}
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
controller.dispose();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
body: CustomScrollView(
|
||||
slivers: [
|
||||
SliverAppBar(
|
||||
title: Text(
|
||||
'History',
|
||||
style: TextStyle(fontSize: 20, color: Colors.black),
|
||||
),
|
||||
centerTitle: true,
|
||||
),
|
||||
SliverToBoxAdapter(
|
||||
child: ListenableBuilder(
|
||||
listenable: controller,
|
||||
builder: (context, child) {
|
||||
return Container(
|
||||
padding: const EdgeInsets.all(16),
|
||||
child: Column(
|
||||
children: [
|
||||
_buildSearchField(controller),
|
||||
if (controller.model.transactions.isEmpty)
|
||||
Column(
|
||||
children: [
|
||||
SizedBox(height: 30),
|
||||
Text(
|
||||
'No transactions yet. Make a payment to see your recent activity.',
|
||||
style: TextStyle(fontSize: 16),
|
||||
textAlign: TextAlign.center,
|
||||
),
|
||||
],
|
||||
),
|
||||
if (controller.model.transactions.isNotEmpty)
|
||||
ListView(
|
||||
shrinkWrap: true,
|
||||
physics: const NeverScrollableScrollPhysics(),
|
||||
children: [
|
||||
...controller.model.transactions.map(
|
||||
(e) => _buildTransactionItem(e, context),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildSearchField(HistoryController controller) {
|
||||
return Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Row(
|
||||
children: [
|
||||
Expanded(
|
||||
child: TextFormField(
|
||||
textInputAction: TextInputAction.search,
|
||||
onFieldSubmitted: (value) {
|
||||
_queryParams.clear();
|
||||
setState(() {
|
||||
_queryParams['creditAccount'] = _searchController.text;
|
||||
_queryParams['creditEmail'] = _searchController.text;
|
||||
_queryParams['creditPhone'] = _searchController.text;
|
||||
_queryParams['creditName'] = _searchController.text;
|
||||
_queryParams['billName'] = _searchController.text;
|
||||
_queryParams['amount'] = _searchController.text;
|
||||
_queryParams['userId'] = prefs.getString("userId")!;
|
||||
|
||||
controller.getTransactions(_queryParams);
|
||||
});
|
||||
},
|
||||
controller: _searchController,
|
||||
keyboardType: TextInputType.text,
|
||||
decoration: InputDecoration(
|
||||
hintText: 'Search by name, account, email, phone',
|
||||
focusedErrorBorder: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
borderSide: BorderSide(
|
||||
color: Theme.of(context).colorScheme.secondary,
|
||||
),
|
||||
),
|
||||
enabledBorder: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
borderSide: BorderSide(
|
||||
color: Theme.of(
|
||||
context,
|
||||
).colorScheme.primary.withOpacity(0.2),
|
||||
),
|
||||
),
|
||||
suffixIcon:
|
||||
_searchController.text.isNotEmpty
|
||||
? IconButton(
|
||||
onPressed: () {
|
||||
_searchController.clear();
|
||||
_queryParams.clear();
|
||||
controller.getTransactions({
|
||||
'userId': prefs.getString("userId")!,
|
||||
});
|
||||
},
|
||||
icon: Icon(Icons.clear),
|
||||
color: Theme.of(context).colorScheme.primary,
|
||||
)
|
||||
: null,
|
||||
),
|
||||
onChanged: (value) {
|
||||
// controller.updateCreditAccount(value);
|
||||
},
|
||||
validator: (value) {
|
||||
if (value == null || value.isEmpty) {
|
||||
return 'Please enter an amount';
|
||||
}
|
||||
if (double.tryParse(value) == null) {
|
||||
return 'Please enter a valid amount';
|
||||
}
|
||||
return null;
|
||||
},
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildTransactionItem(Map<String, dynamic> e, BuildContext context) {
|
||||
return SlideTransition(
|
||||
position: _alignListAnimations[0],
|
||||
child: Skeletonizer(
|
||||
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['status'] == 'SUCCESS'
|
||||
? Icons.check_circle
|
||||
: e['status'] == 'PENDING'
|
||||
? Icons.pending
|
||||
: Icons.cancel,
|
||||
size: 16,
|
||||
color:
|
||||
e['status'] == 'SUCCESS'
|
||||
? Colors.green
|
||||
: e['status'] == '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),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user