592 lines
18 KiB
Dart
592 lines
18 KiB
Dart
|
import 'package:flutter/material.dart';
|
||
|
|
import 'package:auto_route/auto_route.dart';
|
||
|
|
|
||
|
|
import '../../../common/theme/theme.dart';
|
||
|
|
import '../../components/appbar/appbar.dart';
|
||
|
|
|
||
|
|
@RoutePage()
|
||
|
|
class DownloadReportPage extends StatefulWidget {
|
||
|
|
const DownloadReportPage({super.key});
|
||
|
|
|
||
|
|
@override
|
||
|
|
State<DownloadReportPage> createState() => _DownloadReportPageState();
|
||
|
|
}
|
||
|
|
|
||
|
|
class _DownloadReportPageState extends State<DownloadReportPage>
|
||
|
|
with TickerProviderStateMixin {
|
||
|
|
late AnimationController _fadeController;
|
||
|
|
late AnimationController _slideController;
|
||
|
|
late AnimationController _scaleController;
|
||
|
|
|
||
|
|
late Animation<double> _fadeAnimation;
|
||
|
|
|
||
|
|
@override
|
||
|
|
void initState() {
|
||
|
|
super.initState();
|
||
|
|
|
||
|
|
// Initialize animation controllers
|
||
|
|
_fadeController = AnimationController(
|
||
|
|
duration: const Duration(milliseconds: 800),
|
||
|
|
vsync: this,
|
||
|
|
);
|
||
|
|
|
||
|
|
_slideController = AnimationController(
|
||
|
|
duration: const Duration(milliseconds: 1000),
|
||
|
|
vsync: this,
|
||
|
|
);
|
||
|
|
|
||
|
|
_scaleController = AnimationController(
|
||
|
|
duration: const Duration(milliseconds: 600),
|
||
|
|
vsync: this,
|
||
|
|
);
|
||
|
|
|
||
|
|
// Initialize animations
|
||
|
|
_fadeAnimation = Tween<double>(begin: 0.0, end: 1.0).animate(
|
||
|
|
CurvedAnimation(parent: _fadeController, curve: Curves.easeInOut),
|
||
|
|
);
|
||
|
|
|
||
|
|
// Start animations
|
||
|
|
_fadeController.forward();
|
||
|
|
_slideController.forward();
|
||
|
|
_scaleController.forward();
|
||
|
|
}
|
||
|
|
|
||
|
|
@override
|
||
|
|
void dispose() {
|
||
|
|
_fadeController.dispose();
|
||
|
|
_slideController.dispose();
|
||
|
|
_scaleController.dispose();
|
||
|
|
super.dispose();
|
||
|
|
}
|
||
|
|
|
||
|
|
void _showDateRangePicker(String reportType) {
|
||
|
|
showModalBottomSheet(
|
||
|
|
context: context,
|
||
|
|
isScrollControlled: true,
|
||
|
|
backgroundColor: Colors.transparent,
|
||
|
|
builder: (context) => _DateRangeBottomSheet(
|
||
|
|
reportType: reportType,
|
||
|
|
onDateRangeSelected: (dateRange) {
|
||
|
|
setState(() {});
|
||
|
|
// Handle download logic here
|
||
|
|
_downloadReport(reportType, dateRange);
|
||
|
|
},
|
||
|
|
),
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
void _downloadReport(String reportType, DateTimeRange dateRange) {
|
||
|
|
// Implement download logic here
|
||
|
|
ScaffoldMessenger.of(context).showSnackBar(
|
||
|
|
SnackBar(
|
||
|
|
content: Text(
|
||
|
|
'Downloading $reportType from ${_formatDate(dateRange.start)} to ${_formatDate(dateRange.end)}',
|
||
|
|
),
|
||
|
|
backgroundColor: AppColor.success,
|
||
|
|
),
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
String _formatDate(DateTime date) {
|
||
|
|
return '${date.day}/${date.month}/${date.year}';
|
||
|
|
}
|
||
|
|
|
||
|
|
@override
|
||
|
|
Widget build(BuildContext context) {
|
||
|
|
return Scaffold(
|
||
|
|
backgroundColor: AppColor.background,
|
||
|
|
body: CustomScrollView(
|
||
|
|
slivers: [
|
||
|
|
// SliverAppBar with gradient
|
||
|
|
SliverAppBar(
|
||
|
|
expandedHeight: 120,
|
||
|
|
floating: false,
|
||
|
|
pinned: true,
|
||
|
|
elevation: 0,
|
||
|
|
backgroundColor: AppColor.primary,
|
||
|
|
flexibleSpace: CustomAppBar(title: 'Download Report'),
|
||
|
|
),
|
||
|
|
|
||
|
|
// Content
|
||
|
|
SliverToBoxAdapter(
|
||
|
|
child: Padding(
|
||
|
|
padding: const EdgeInsets.all(20),
|
||
|
|
child: Column(
|
||
|
|
children: [
|
||
|
|
// Report Options
|
||
|
|
FadeTransition(
|
||
|
|
opacity: _fadeAnimation,
|
||
|
|
child: Column(
|
||
|
|
children: [
|
||
|
|
// Transaction Report Card
|
||
|
|
_ReportOptionCard(
|
||
|
|
title: 'Transaction Report',
|
||
|
|
subtitle:
|
||
|
|
'Export all transaction data with detailed analytics',
|
||
|
|
icon: Icons.receipt_long_outlined,
|
||
|
|
gradient: const [
|
||
|
|
AppColor.primary,
|
||
|
|
AppColor.primaryLight,
|
||
|
|
],
|
||
|
|
onTap: () =>
|
||
|
|
_showDateRangePicker('Transaction Report'),
|
||
|
|
delay: 200,
|
||
|
|
),
|
||
|
|
|
||
|
|
const SizedBox(height: 20),
|
||
|
|
|
||
|
|
// Inventory Report Card
|
||
|
|
_ReportOptionCard(
|
||
|
|
title: 'Inventory Report',
|
||
|
|
subtitle:
|
||
|
|
'Export inventory and stock data with trends',
|
||
|
|
icon: Icons.inventory_2_outlined,
|
||
|
|
gradient: const [
|
||
|
|
AppColor.secondary,
|
||
|
|
AppColor.secondaryLight,
|
||
|
|
],
|
||
|
|
onTap: () => _showDateRangePicker('Inventory Report'),
|
||
|
|
delay: 400,
|
||
|
|
),
|
||
|
|
|
||
|
|
const SizedBox(height: 20),
|
||
|
|
|
||
|
|
// Additional Report Options
|
||
|
|
_ReportOptionCard(
|
||
|
|
title: 'Sales Report',
|
||
|
|
subtitle: 'Export sales performance and revenue data',
|
||
|
|
icon: Icons.trending_up_outlined,
|
||
|
|
gradient: const [AppColor.info, Color(0xFF64B5F6)],
|
||
|
|
onTap: () => _showDateRangePicker('Sales Report'),
|
||
|
|
delay: 600,
|
||
|
|
),
|
||
|
|
|
||
|
|
const SizedBox(height: 20),
|
||
|
|
|
||
|
|
_ReportOptionCard(
|
||
|
|
title: 'Customer Report',
|
||
|
|
subtitle:
|
||
|
|
'Export customer data and behavior analytics',
|
||
|
|
icon: Icons.people_outline,
|
||
|
|
gradient: const [AppColor.warning, Color(0xFFFFB74D)],
|
||
|
|
onTap: () => _showDateRangePicker('Customer Report'),
|
||
|
|
delay: 800,
|
||
|
|
),
|
||
|
|
],
|
||
|
|
),
|
||
|
|
),
|
||
|
|
|
||
|
|
const SizedBox(height: 40),
|
||
|
|
],
|
||
|
|
),
|
||
|
|
),
|
||
|
|
),
|
||
|
|
],
|
||
|
|
),
|
||
|
|
);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
class _ReportOptionCard extends StatefulWidget {
|
||
|
|
final String title;
|
||
|
|
final String subtitle;
|
||
|
|
final IconData icon;
|
||
|
|
final List<Color> gradient;
|
||
|
|
final VoidCallback onTap;
|
||
|
|
final int delay;
|
||
|
|
|
||
|
|
const _ReportOptionCard({
|
||
|
|
required this.title,
|
||
|
|
required this.subtitle,
|
||
|
|
required this.icon,
|
||
|
|
required this.gradient,
|
||
|
|
required this.onTap,
|
||
|
|
required this.delay,
|
||
|
|
});
|
||
|
|
|
||
|
|
@override
|
||
|
|
State<_ReportOptionCard> createState() => _ReportOptionCardState();
|
||
|
|
}
|
||
|
|
|
||
|
|
class _ReportOptionCardState extends State<_ReportOptionCard>
|
||
|
|
with SingleTickerProviderStateMixin {
|
||
|
|
late AnimationController _animationController;
|
||
|
|
late Animation<double> _scaleAnimation;
|
||
|
|
bool _isPressed = false;
|
||
|
|
|
||
|
|
@override
|
||
|
|
void initState() {
|
||
|
|
super.initState();
|
||
|
|
_animationController = AnimationController(
|
||
|
|
duration: const Duration(milliseconds: 150),
|
||
|
|
vsync: this,
|
||
|
|
);
|
||
|
|
_scaleAnimation = Tween<double>(begin: 1.0, end: 0.95).animate(
|
||
|
|
CurvedAnimation(parent: _animationController, curve: Curves.easeInOut),
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
@override
|
||
|
|
void dispose() {
|
||
|
|
_animationController.dispose();
|
||
|
|
super.dispose();
|
||
|
|
}
|
||
|
|
|
||
|
|
@override
|
||
|
|
Widget build(BuildContext context) {
|
||
|
|
return GestureDetector(
|
||
|
|
onTapDown: (_) {
|
||
|
|
setState(() => _isPressed = true);
|
||
|
|
_animationController.forward();
|
||
|
|
},
|
||
|
|
onTapUp: (_) {
|
||
|
|
setState(() => _isPressed = false);
|
||
|
|
_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
|
||
|
|
Widget build(BuildContext context) {
|
||
|
|
return AnimatedBuilder(
|
||
|
|
animation: _animation,
|
||
|
|
builder: (context, child) {
|
||
|
|
return Transform.translate(
|
||
|
|
offset: Offset(0, (1 - _animation.value) * 300),
|
||
|
|
child: Container(
|
||
|
|
decoration: const BoxDecoration(
|
||
|
|
color: AppColor.white,
|
||
|
|
borderRadius: BorderRadius.only(
|
||
|
|
topLeft: Radius.circular(30),
|
||
|
|
topRight: Radius.circular(30),
|
||
|
|
),
|
||
|
|
),
|
||
|
|
child: Padding(
|
||
|
|
padding: EdgeInsets.only(
|
||
|
|
left: 20,
|
||
|
|
right: 20,
|
||
|
|
top: 20,
|
||
|
|
bottom: MediaQuery.of(context).viewInsets.bottom + 20,
|
||
|
|
),
|
||
|
|
child: Column(
|
||
|
|
mainAxisSize: MainAxisSize.min,
|
||
|
|
children: [
|
||
|
|
// Handle bar
|
||
|
|
Container(
|
||
|
|
width: 50,
|
||
|
|
height: 4,
|
||
|
|
decoration: BoxDecoration(
|
||
|
|
color: AppColor.border,
|
||
|
|
borderRadius: BorderRadius.circular(2),
|
||
|
|
),
|
||
|
|
),
|
||
|
|
|
||
|
|
const SizedBox(height: 20),
|
||
|
|
|
||
|
|
// Title
|
||
|
|
Text(
|
||
|
|
widget.reportType,
|
||
|
|
style: AppStyle.h6.copyWith(fontWeight: FontWeight.bold),
|
||
|
|
),
|
||
|
|
|
||
|
|
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,
|
||
|
|
),
|
||
|
|
const SizedBox(width: 8),
|
||
|
|
Text(
|
||
|
|
'Download Report',
|
||
|
|
style: AppStyle.lg.copyWith(
|
||
|
|
color: AppColor.white,
|
||
|
|
fontWeight: FontWeight.bold,
|
||
|
|
),
|
||
|
|
),
|
||
|
|
],
|
||
|
|
),
|
||
|
|
),
|
||
|
|
),
|
||
|
|
|
||
|
|
const SizedBox(height: 10),
|
||
|
|
],
|
||
|
|
),
|
||
|
|
),
|
||
|
|
),
|
||
|
|
);
|
||
|
|
},
|
||
|
|
);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
class _DateSelectionCard extends StatelessWidget {
|
||
|
|
final String title;
|
||
|
|
final String date;
|
||
|
|
final VoidCallback onTap;
|
||
|
|
|
||
|
|
const _DateSelectionCard({
|
||
|
|
required this.title,
|
||
|
|
required this.date,
|
||
|
|
required this.onTap,
|
||
|
|
});
|
||
|
|
|
||
|
|
@override
|
||
|
|
Widget build(BuildContext context) {
|
||
|
|
return GestureDetector(
|
||
|
|
onTap: onTap,
|
||
|
|
child: Container(
|
||
|
|
padding: const EdgeInsets.all(16),
|
||
|
|
decoration: BoxDecoration(
|
||
|
|
color: AppColor.background,
|
||
|
|
borderRadius: BorderRadius.circular(12),
|
||
|
|
border: Border.all(color: AppColor.border),
|
||
|
|
),
|
||
|
|
child: Column(
|
||
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
||
|
|
children: [
|
||
|
|
Text(
|
||
|
|
title,
|
||
|
|
style: AppStyle.sm.copyWith(
|
||
|
|
color: AppColor.textSecondary,
|
||
|
|
fontWeight: FontWeight.w500,
|
||
|
|
),
|
||
|
|
),
|
||
|
|
const SizedBox(height: 8),
|
||
|
|
Row(
|
||
|
|
children: [
|
||
|
|
Expanded(
|
||
|
|
child: Text(
|
||
|
|
date,
|
||
|
|
style: AppStyle.md.copyWith(
|
||
|
|
fontWeight: FontWeight.w600,
|
||
|
|
color: date == 'Select Date'
|
||
|
|
? AppColor.textLight
|
||
|
|
: AppColor.textPrimary,
|
||
|
|
),
|
||
|
|
),
|
||
|
|
),
|
||
|
|
Icon(
|
||
|
|
Icons.calendar_today_outlined,
|
||
|
|
color: AppColor.primary,
|
||
|
|
size: 18,
|
||
|
|
),
|
||
|
|
],
|
||
|
|
),
|
||
|
|
],
|
||
|
|
),
|
||
|
|
),
|
||
|
|
);
|
||
|
|
}
|
||
|
|
}
|