apksel-dev/apskel-owner-flutter
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: update download report

Browse Source
This commit is contained in:
efrilm 2025-08-19 13:09:00 +07:00
parent 60f43f6df7
commit bfd4604897
1 changed files with 230 additions and 357 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

587
lib/presentation/pages/download/download_report_page.dart
View File

@ -3,6 +3,7 @@ import 'package:auto_route/auto_route.dart';
import '../../../common/theme/theme.dart'; import '../../../common/theme/theme.dart';
import '../../components/appbar/appbar.dart'; import '../../components/appbar/appbar.dart';
import '../../components/field/date_range_picker_field.dart';
@RoutePage() @RoutePage()
class DownloadReportPage extends StatefulWidget { class DownloadReportPage extends StatefulWidget {
@ -20,6 +21,16 @@ class _DownloadReportPageState extends State<DownloadReportPage>
late Animation<double> _fadeAnimation; late Animation<double> _fadeAnimation;
// Date range variables for each report type
DateTime? _transactionStartDate;
DateTime? _transactionEndDate;
DateTime? _inventoryStartDate;
DateTime? _inventoryEndDate;
DateTime? _salesStartDate;
DateTime? _salesEndDate;
DateTime? _customerStartDate;
DateTime? _customerEndDate;
@override @override
void initState() { void initState() {
super.initState(); super.initState();
@ -59,28 +70,26 @@ class _DownloadReportPageState extends State<DownloadReportPage>
super.dispose(); super.dispose();
} }
void _showDateRangePicker(String reportType) { void _downloadReport(
showModalBottomSheet( String reportType,
context: context, DateTime? startDate,
isScrollControlled: true, DateTime? endDate,
backgroundColor: Colors.transparent, ) {
builder: (context) => _DateRangeBottomSheet( if (startDate == null || endDate == null) {
reportType: reportType, ScaffoldMessenger.of(context).showSnackBar(
onDateRangeSelected: (dateRange) { const SnackBar(
setState(() {}); content: Text('Please select both start and end dates'),
// Handle download logic here backgroundColor: AppColor.error,
_downloadReport(reportType, dateRange); ),
}, );
), return;
); }
}
void _downloadReport(String reportType, DateTimeRange dateRange) {
// Implement download logic here // Implement download logic here
ScaffoldMessenger.of(context).showSnackBar( ScaffoldMessenger.of(context).showSnackBar(
SnackBar( SnackBar(
content: Text( content: Text(
'Downloading $reportType from ${_formatDate(dateRange.start)} to ${_formatDate(dateRange.end)}', 'Downloading $reportType from ${_formatDate(startDate)} to ${_formatDate(endDate)}',
), ),
backgroundColor: AppColor.success, backgroundColor: AppColor.success,
), ),
@ -128,8 +137,19 @@ class _DownloadReportPageState extends State<DownloadReportPage>
AppColor.primary, AppColor.primary,
AppColor.primaryLight, AppColor.primaryLight,
], ],
onTap: () => startDate: _transactionStartDate,
_showDateRangePicker('Transaction Report'), endDate: _transactionEndDate,
onDateRangeChanged: (start, end) {
setState(() {
_transactionStartDate = start;
_transactionEndDate = end;
});
},
onDownload: () => _downloadReport(
'Transaction Report',
_transactionStartDate,
_transactionEndDate,
),
delay: 200, delay: 200,
), ),
@ -145,31 +165,68 @@ class _DownloadReportPageState extends State<DownloadReportPage>
AppColor.secondary, AppColor.secondary,
AppColor.secondaryLight, AppColor.secondaryLight,
], ],
onTap: () => _showDateRangePicker('Inventory Report'), startDate: _inventoryStartDate,
endDate: _inventoryEndDate,
onDateRangeChanged: (start, end) {
setState(() {
_inventoryStartDate = start;
_inventoryEndDate = end;
});
},
onDownload: () => _downloadReport(
'Inventory Report',
_inventoryStartDate,
_inventoryEndDate,
),
delay: 400, delay: 400,
), ),
const SizedBox(height: 20), const SizedBox(height: 20),
// Additional Report Options // Sales Report Card
_ReportOptionCard( _ReportOptionCard(
title: 'Sales Report', title: 'Sales Report',
subtitle: 'Export sales performance and revenue data', subtitle: 'Export sales performance and revenue data',
icon: Icons.trending_up_outlined, icon: Icons.trending_up_outlined,
gradient: const [AppColor.info, Color(0xFF64B5F6)], gradient: const [AppColor.info, Color(0xFF64B5F6)],
onTap: () => _showDateRangePicker('Sales Report'), startDate: _salesStartDate,
endDate: _salesEndDate,
onDateRangeChanged: (start, end) {
setState(() {
_salesStartDate = start;
_salesEndDate = end;
});
},
onDownload: () => _downloadReport(
'Sales Report',
_salesStartDate,
_salesEndDate,
),
delay: 600, delay: 600,
), ),
const SizedBox(height: 20), const SizedBox(height: 20),
// Customer Report Card
_ReportOptionCard( _ReportOptionCard(
title: 'Customer Report', title: 'Customer Report',
subtitle: subtitle:
'Export customer data and behavior analytics', 'Export customer data and behavior analytics',
icon: Icons.people_outline, icon: Icons.people_outline,
gradient: const [AppColor.warning, Color(0xFFFFB74D)], gradient: const [AppColor.warning, Color(0xFFFFB74D)],
onTap: () => _showDateRangePicker('Customer Report'), startDate: _customerStartDate,
endDate: _customerEndDate,
onDateRangeChanged: (start, end) {
setState(() {
_customerStartDate = start;
_customerEndDate = end;
});
},
onDownload: () => _downloadReport(
'Customer Report',
_customerStartDate,
_customerEndDate,
),
delay: 800, delay: 800,
), ),
], ],
@ -192,7 +249,10 @@ class _ReportOptionCard extends StatefulWidget {
final String subtitle; final String subtitle;
final IconData icon; final IconData icon;
final List<Color> gradient; final List<Color> gradient;
final VoidCallback onTap; final DateTime? startDate;
final DateTime? endDate;
final Function(DateTime? startDate, DateTime? endDate) onDateRangeChanged;
final VoidCallback onDownload;
final int delay; final int delay;
const _ReportOptionCard({ const _ReportOptionCard({
@ -200,7 +260,10 @@ class _ReportOptionCard extends StatefulWidget {
required this.subtitle, required this.subtitle,
required this.icon, required this.icon,
required this.gradient, required this.gradient,
required this.onTap, required this.startDate,
required this.endDate,
required this.onDateRangeChanged,
required this.onDownload,
required this.delay, required this.delay,
}); });
@ -211,18 +274,19 @@ class _ReportOptionCard extends StatefulWidget {
class _ReportOptionCardState extends State<_ReportOptionCard> class _ReportOptionCardState extends State<_ReportOptionCard>
with SingleTickerProviderStateMixin { with SingleTickerProviderStateMixin {
late AnimationController _animationController; late AnimationController _animationController;
late Animation<double> _scaleAnimation; late Animation<double> _slideAnimation;
bool _isPressed = false; bool _isExpanded = false;
@override @override
void initState() { void initState() {
super.initState(); super.initState();
_animationController = AnimationController( _animationController = AnimationController(
duration: const Duration(milliseconds: 150), duration: const Duration(milliseconds: 300),
vsync: this, vsync: this,
); );
_scaleAnimation = Tween<double>(begin: 1.0, end: 0.95).animate( _slideAnimation = CurvedAnimation(
CurvedAnimation(parent: _animationController, curve: Curves.easeInOut), parent: _animationController,
curve: Curves.easeInOutCubic,
); );
} }
@ -232,359 +296,168 @@ class _ReportOptionCardState extends State<_ReportOptionCard>
super.dispose(); super.dispose();
} }
@override void _toggleExpanded() {
Widget build(BuildContext context) { setState(() {
return GestureDetector( _isExpanded = !_isExpanded;
onTapDown: (_) { if (_isExpanded) {
setState(() => _isPressed = true);
_animationController.forward(); _animationController.forward();
}, } else {
onTapUp: (_) {
setState(() => _isPressed = false);
_animationController.reverse(); _animationController.reverse();
widget.onTap(); }
}, });
onTapCancel: () {
setState(() => _isPressed = false);
_animationController.reverse();
},
child: ScaleTransition(
scale: _scaleAnimation,
child: AnimatedContainer(
duration: const Duration(milliseconds: 200),
padding: const EdgeInsets.all(20),
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: _isPressed
? widget.gradient.map((c) => c.withOpacity(0.8)).toList()
: widget.gradient,
),
borderRadius: BorderRadius.circular(20),
boxShadow: [
BoxShadow(
color: widget.gradient.first.withOpacity(0.3),
blurRadius: _isPressed ? 8 : 15,
offset: Offset(0, _isPressed ? 2 : 8),
),
],
),
child: Row(
children: [
Container(
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
color: AppColor.white.withOpacity(0.2),
borderRadius: BorderRadius.circular(16),
),
child: Icon(widget.icon, color: AppColor.white, size: 32),
),
const SizedBox(width: 20),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
widget.title,
style: AppStyle.lg.copyWith(
color: AppColor.white,
fontWeight: FontWeight.bold,
),
),
const SizedBox(height: 4),
Text(
widget.subtitle,
style: AppStyle.sm.copyWith(
color: AppColor.white.withOpacity(0.8),
),
),
],
),
),
Icon(
Icons.arrow_forward_ios,
color: AppColor.white.withOpacity(0.8),
size: 20,
),
],
),
),
),
);
}
}
class _DateRangeBottomSheet extends StatefulWidget {
final String reportType;
final Function(DateTimeRange) onDateRangeSelected;
const _DateRangeBottomSheet({
required this.reportType,
required this.onDateRangeSelected,
});
@override
State<_DateRangeBottomSheet> createState() => _DateRangeBottomSheetState();
}
class _DateRangeBottomSheetState extends State<_DateRangeBottomSheet>
with SingleTickerProviderStateMixin {
late AnimationController _controller;
late Animation<double> _animation;
DateTime? _startDate;
DateTime? _endDate;
@override
void initState() {
super.initState();
_controller = AnimationController(
duration: const Duration(milliseconds: 300),
vsync: this,
);
_animation = CurvedAnimation(
parent: _controller,
curve: Curves.easeOutCubic,
);
_controller.forward();
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
void _selectStartDate() async {
final date = await showDatePicker(
context: context,
initialDate: _startDate ?? DateTime.now(),
firstDate: DateTime(2020),
lastDate: DateTime.now(),
builder: (context, child) {
return Theme(
data: Theme.of(context).copyWith(
colorScheme: const ColorScheme.light(primary: AppColor.primary),
),
child: child!,
);
},
);
if (date != null) {
setState(() => _startDate = date);
}
}
void _selectEndDate() async {
final date = await showDatePicker(
context: context,
initialDate: _endDate ?? DateTime.now(),
firstDate: _startDate ?? DateTime(2020),
lastDate: DateTime.now(),
builder: (context, child) {
return Theme(
data: Theme.of(context).copyWith(
colorScheme: const ColorScheme.light(primary: AppColor.primary),
),
child: child!,
);
},
);
if (date != null) {
setState(() => _endDate = date);
}
}
void _downloadReport() {
if (_startDate != null && _endDate != null) {
final dateRange = DateTimeRange(start: _startDate!, end: _endDate!);
widget.onDateRangeSelected(dateRange);
Navigator.pop(context);
}
}
String _formatDate(DateTime? date) {
if (date == null) return 'Select Date';
return '${date.day}/${date.month}/${date.year}';
} }
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return AnimatedBuilder( return Container(
animation: _animation, decoration: BoxDecoration(
builder: (context, child) { gradient: LinearGradient(
return Transform.translate( begin: Alignment.topLeft,
offset: Offset(0, (1 - _animation.value) * 300), end: Alignment.bottomRight,
child: Container( colors: widget.gradient,
decoration: const BoxDecoration( ),
color: AppColor.white, borderRadius: BorderRadius.circular(20),
borderRadius: BorderRadius.only( boxShadow: [
topLeft: Radius.circular(30), BoxShadow(
topRight: Radius.circular(30), color: widget.gradient.first.withOpacity(0.3),
), blurRadius: 15,
), offset: const Offset(0, 8),
child: Padding( ),
padding: EdgeInsets.only( ],
left: 20, ),
right: 20, child: Column(
top: 20, children: [
bottom: MediaQuery.of(context).viewInsets.bottom + 20, // Header Section
), GestureDetector(
child: Column( onTap: _toggleExpanded,
mainAxisSize: MainAxisSize.min, child: Container(
padding: const EdgeInsets.all(20),
child: Row(
children: [ children: [
// Handle bar
Container( Container(
width: 50, padding: const EdgeInsets.all(16),
height: 4,
decoration: BoxDecoration( decoration: BoxDecoration(
color: AppColor.border, color: AppColor.white.withOpacity(0.2),
borderRadius: BorderRadius.circular(2), borderRadius: BorderRadius.circular(16),
), ),
child: Icon(widget.icon, color: AppColor.white, size: 32),
), ),
const SizedBox(width: 20),
const SizedBox(height: 20), Expanded(
child: Column(
// Title crossAxisAlignment: CrossAxisAlignment.start,
Text( children: [
widget.reportType, Text(
style: AppStyle.h6.copyWith(fontWeight: FontWeight.bold), widget.title,
), style: AppStyle.lg.copyWith(
const SizedBox(height: 8),
Text(
'Select date range for your report',
style: AppStyle.md.copyWith(color: AppColor.textSecondary),
),
const SizedBox(height: 30),
// Date Selection
Row(
children: [
Expanded(
child: _DateSelectionCard(
title: 'Start Date',
date: _formatDate(_startDate),
onTap: _selectStartDate,
),
),
const SizedBox(width: 16),
Expanded(
child: _DateSelectionCard(
title: 'End Date',
date: _formatDate(_endDate),
onTap: _selectEndDate,
),
),
],
),
const SizedBox(height: 30),
// Download Button
SizedBox(
width: double.infinity,
child: ElevatedButton(
onPressed: _startDate != null && _endDate != null
? _downloadReport
: null,
style: ElevatedButton.styleFrom(
backgroundColor: AppColor.primary,
padding: const EdgeInsets.symmetric(vertical: 16),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(16),
),
elevation: 0,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Icon(
Icons.download_rounded,
color: AppColor.white, color: AppColor.white,
fontWeight: FontWeight.bold,
), ),
const SizedBox(width: 8), ),
Text( const SizedBox(height: 4),
'Download Report', Text(
style: AppStyle.lg.copyWith( widget.subtitle,
color: AppColor.white, style: AppStyle.sm.copyWith(
fontWeight: FontWeight.bold, color: AppColor.white.withOpacity(0.8),
),
), ),
], ),
), ],
),
),
AnimatedRotation(
turns: _isExpanded ? 0.25 : 0,
duration: const Duration(milliseconds: 300),
child: Icon(
Icons.arrow_forward_ios,
color: AppColor.white.withOpacity(0.8),
size: 20,
), ),
), ),
const SizedBox(height: 10),
], ],
), ),
), ),
), ),
);
},
);
}
}
class _DateSelectionCard extends StatelessWidget { // Expandable Content
final String title; SizeTransition(
final String date; sizeFactor: _slideAnimation,
final VoidCallback onTap; child: Container(
padding: const EdgeInsets.fromLTRB(20, 0, 20, 20),
child: Column(
children: [
Container(
padding: const EdgeInsets.all(20),
decoration: BoxDecoration(
color: AppColor.white.withOpacity(0.1),
borderRadius: BorderRadius.circular(16),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Select Date Range',
style: AppStyle.md.copyWith(
color: AppColor.white,
fontWeight: FontWeight.w600,
),
),
const SizedBox(height: 16),
const _DateSelectionCard({ // Date Range Picker Field Style
required this.title, DateRangePickerField(
required this.date, placeholder: 'Select date range',
required this.onTap, startDate: widget.startDate,
}); endDate: widget.endDate,
onChanged: widget.onDateRangeChanged,
),
@override const SizedBox(height: 20),
Widget build(BuildContext context) {
return GestureDetector( // Download Button
onTap: onTap, SizedBox(
child: Container( width: double.infinity,
padding: const EdgeInsets.all(16), child: ElevatedButton(
decoration: BoxDecoration( onPressed:
color: AppColor.background, widget.startDate != null &&
borderRadius: BorderRadius.circular(12), widget.endDate != null
border: Border.all(color: AppColor.border), ? widget.onDownload
), : null,
child: Column( style: ElevatedButton.styleFrom(
crossAxisAlignment: CrossAxisAlignment.start, backgroundColor: AppColor.white,
children: [ foregroundColor: widget.gradient.first,
Text( padding: const EdgeInsets.symmetric(vertical: 16),
title, shape: RoundedRectangleBorder(
style: AppStyle.sm.copyWith( borderRadius: BorderRadius.circular(12),
color: AppColor.textSecondary, ),
fontWeight: FontWeight.w500, elevation: 0,
), ),
), child: Row(
const SizedBox(height: 8), mainAxisAlignment: MainAxisAlignment.center,
Row( children: [
children: [ Icon(
Expanded( Icons.download_rounded,
child: Text( color: widget.gradient.first,
date, ),
style: AppStyle.md.copyWith( const SizedBox(width: 8),
fontWeight: FontWeight.w600, Text(
color: date == 'Select Date' 'Download Report',
? AppColor.textLight style: AppStyle.md.copyWith(
: AppColor.textPrimary, color: widget.gradient.first,
fontWeight: FontWeight.bold,
),
),
],
),
),
),
],
), ),
), ),
), ],
Icon( ),
Icons.calendar_today_outlined,
color: AppColor.primary,
size: 18,
),
],
), ),
], ),
), ],
), ),
); );
} }