Compare commits
No commits in common. "8fa20d03b600d40d335e99c3318e89c80e59a3e0" and "9458de5059fa45cfa4d01de1650c16cf44125379" have entirely different histories.
8fa20d03b6
...
9458de5059
@ -43,7 +43,7 @@ class ThemeApp {
|
|||||||
),
|
),
|
||||||
),
|
),
|
||||||
bottomNavigationBarTheme: BottomNavigationBarThemeData(
|
bottomNavigationBarTheme: BottomNavigationBarThemeData(
|
||||||
backgroundColor: AppColor.white,
|
backgroundColor: AppColor.background,
|
||||||
selectedItemColor: AppColor.primary,
|
selectedItemColor: AppColor.primary,
|
||||||
unselectedItemColor: AppColor.textSecondary,
|
unselectedItemColor: AppColor.textSecondary,
|
||||||
selectedLabelStyle: AppStyle.md.copyWith(
|
selectedLabelStyle: AppStyle.md.copyWith(
|
||||||
|
|||||||
@ -1,30 +0,0 @@
|
|||||||
part of 'button.dart';
|
|
||||||
|
|
||||||
class ActionIconButton extends StatelessWidget {
|
|
||||||
const ActionIconButton({super.key, required this.onTap, required this.icon});
|
|
||||||
|
|
||||||
final Function()? onTap;
|
|
||||||
final IconData icon;
|
|
||||||
|
|
||||||
@override
|
|
||||||
Widget build(BuildContext context) {
|
|
||||||
return Container(
|
|
||||||
margin: const EdgeInsets.only(right: 8),
|
|
||||||
child: Material(
|
|
||||||
color: Colors.transparent,
|
|
||||||
child: InkWell(
|
|
||||||
onTap: onTap,
|
|
||||||
borderRadius: BorderRadius.circular(12),
|
|
||||||
child: Container(
|
|
||||||
padding: const EdgeInsets.all(8),
|
|
||||||
decoration: BoxDecoration(
|
|
||||||
color: AppColor.white.withOpacity(0.2),
|
|
||||||
borderRadius: BorderRadius.circular(12),
|
|
||||||
),
|
|
||||||
child: Icon(icon, color: AppColor.textWhite, size: 20),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -5,4 +5,3 @@ import '../../../common/theme/theme.dart';
|
|||||||
import '../spacer/spacer.dart';
|
import '../spacer/spacer.dart';
|
||||||
|
|
||||||
part 'elevated_button.dart';
|
part 'elevated_button.dart';
|
||||||
part 'action_icon_button.dart';
|
|
||||||
|
|||||||
@ -1,132 +1,12 @@
|
|||||||
import 'package:auto_route/auto_route.dart';
|
import 'package:auto_route/auto_route.dart';
|
||||||
import 'package:flutter/material.dart';
|
import 'package:flutter/material.dart';
|
||||||
import 'package:line_icons/line_icons.dart';
|
|
||||||
import 'dart:math' as math;
|
|
||||||
|
|
||||||
import '../../../common/theme/theme.dart';
|
|
||||||
import '../../components/button/button.dart';
|
|
||||||
import '../../components/spacer/spacer.dart';
|
|
||||||
import 'widgets/appbar.dart';
|
|
||||||
import 'widgets/quick_stats.dart';
|
|
||||||
import 'widgets/report_action.dart';
|
|
||||||
import 'widgets/revenue_summary.dart';
|
|
||||||
import 'widgets/sales.dart';
|
|
||||||
import 'widgets/top_product.dart';
|
|
||||||
|
|
||||||
@RoutePage()
|
@RoutePage()
|
||||||
class ReportPage extends StatefulWidget {
|
class ReportPage extends StatelessWidget {
|
||||||
const ReportPage({super.key});
|
const ReportPage({super.key});
|
||||||
|
|
||||||
@override
|
|
||||||
State<ReportPage> createState() => _ReportPageState();
|
|
||||||
}
|
|
||||||
|
|
||||||
class _ReportPageState extends State<ReportPage> with TickerProviderStateMixin {
|
|
||||||
late AnimationController _fadeController;
|
|
||||||
late AnimationController _slideController;
|
|
||||||
late AnimationController _rotationController;
|
|
||||||
late Animation<double> _fadeAnimation;
|
|
||||||
late Animation<Offset> _slideAnimation;
|
|
||||||
late Animation<double> _rotationAnimation;
|
|
||||||
|
|
||||||
@override
|
|
||||||
void initState() {
|
|
||||||
super.initState();
|
|
||||||
|
|
||||||
_fadeController = AnimationController(
|
|
||||||
duration: const Duration(milliseconds: 800),
|
|
||||||
vsync: this,
|
|
||||||
);
|
|
||||||
|
|
||||||
_slideController = AnimationController(
|
|
||||||
duration: const Duration(milliseconds: 1000),
|
|
||||||
vsync: this,
|
|
||||||
);
|
|
||||||
|
|
||||||
_rotationController = AnimationController(
|
|
||||||
duration: const Duration(seconds: 3),
|
|
||||||
vsync: this,
|
|
||||||
)..repeat();
|
|
||||||
|
|
||||||
_fadeAnimation = Tween<double>(begin: 0.0, end: 1.0).animate(
|
|
||||||
CurvedAnimation(parent: _fadeController, curve: Curves.easeInOut),
|
|
||||||
);
|
|
||||||
|
|
||||||
_slideAnimation =
|
|
||||||
Tween<Offset>(begin: const Offset(0, 0.3), end: Offset.zero).animate(
|
|
||||||
CurvedAnimation(parent: _slideController, curve: Curves.elasticOut),
|
|
||||||
);
|
|
||||||
|
|
||||||
_rotationAnimation = Tween<double>(
|
|
||||||
begin: 0,
|
|
||||||
end: 2 * math.pi,
|
|
||||||
).animate(_rotationController);
|
|
||||||
|
|
||||||
_fadeController.forward();
|
|
||||||
_slideController.forward();
|
|
||||||
}
|
|
||||||
|
|
||||||
@override
|
|
||||||
void dispose() {
|
|
||||||
_fadeController.dispose();
|
|
||||||
_slideController.dispose();
|
|
||||||
_rotationController.dispose();
|
|
||||||
super.dispose();
|
|
||||||
}
|
|
||||||
|
|
||||||
@override
|
@override
|
||||||
Widget build(BuildContext context) {
|
Widget build(BuildContext context) {
|
||||||
return Scaffold(
|
return Center(child: Text('ReportPage'));
|
||||||
backgroundColor: AppColor.background,
|
|
||||||
body: CustomScrollView(
|
|
||||||
slivers: [
|
|
||||||
// Custom App Bar with Hero Effect
|
|
||||||
SliverAppBar(
|
|
||||||
expandedHeight: 120,
|
|
||||||
floating: false,
|
|
||||||
pinned: true,
|
|
||||||
backgroundColor: AppColor.primary,
|
|
||||||
centerTitle: false,
|
|
||||||
flexibleSpace: ReportAppBar(rotationAnimation: _rotationAnimation),
|
|
||||||
actions: [
|
|
||||||
ActionIconButton(onTap: () {}, icon: LineIcons.download),
|
|
||||||
ActionIconButton(onTap: () {}, icon: LineIcons.filter),
|
|
||||||
SpaceWidth(8),
|
|
||||||
],
|
|
||||||
),
|
|
||||||
|
|
||||||
// Content
|
|
||||||
SliverPadding(
|
|
||||||
padding: EdgeInsets.all(AppValue.padding),
|
|
||||||
sliver: SliverList(
|
|
||||||
delegate: SliverChildListDelegate([
|
|
||||||
FadeTransition(
|
|
||||||
opacity: _fadeAnimation,
|
|
||||||
child: SlideTransition(
|
|
||||||
position: _slideAnimation,
|
|
||||||
child: Column(
|
|
||||||
children: [
|
|
||||||
ReportRevenueSummary(
|
|
||||||
rotationAnimation: _rotationAnimation,
|
|
||||||
),
|
|
||||||
const SpaceHeight(24),
|
|
||||||
ReportQuickStats(),
|
|
||||||
const SpaceHeight(24),
|
|
||||||
ReportSales(),
|
|
||||||
const SpaceHeight(24),
|
|
||||||
ReportTopProduct(),
|
|
||||||
const SpaceHeight(24),
|
|
||||||
ReportAction(),
|
|
||||||
const SpaceHeight(20),
|
|
||||||
],
|
|
||||||
),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
]),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
],
|
|
||||||
),
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,96 +0,0 @@
|
|||||||
import 'package:flutter/material.dart';
|
|
||||||
|
|
||||||
import '../../../../common/theme/theme.dart';
|
|
||||||
|
|
||||||
class ReportAppBar extends StatelessWidget {
|
|
||||||
final Animation<double> rotationAnimation;
|
|
||||||
const ReportAppBar({super.key, required this.rotationAnimation});
|
|
||||||
|
|
||||||
@override
|
|
||||||
Widget build(BuildContext context) {
|
|
||||||
return FlexibleSpaceBar(
|
|
||||||
titlePadding: const EdgeInsets.only(left: 20, bottom: 16),
|
|
||||||
title: Text(
|
|
||||||
'Laporan Bisnis',
|
|
||||||
style: AppStyle.xl.copyWith(
|
|
||||||
color: AppColor.textWhite,
|
|
||||||
fontSize: 18,
|
|
||||||
fontWeight: FontWeight.w600,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
background: Container(
|
|
||||||
decoration: const BoxDecoration(
|
|
||||||
gradient: LinearGradient(
|
|
||||||
colors: AppColor.primaryGradient,
|
|
||||||
begin: Alignment.topCenter,
|
|
||||||
end: Alignment.bottomCenter,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
child: Stack(
|
|
||||||
children: [
|
|
||||||
Positioned(
|
|
||||||
right: -20,
|
|
||||||
top: -20,
|
|
||||||
child: AnimatedBuilder(
|
|
||||||
animation: rotationAnimation,
|
|
||||||
builder: (context, child) {
|
|
||||||
return Transform.rotate(
|
|
||||||
angle: rotationAnimation.value,
|
|
||||||
child: Container(
|
|
||||||
width: 100,
|
|
||||||
height: 100,
|
|
||||||
decoration: BoxDecoration(
|
|
||||||
shape: BoxShape.circle,
|
|
||||||
color: AppColor.white.withOpacity(0.1),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
);
|
|
||||||
},
|
|
||||||
),
|
|
||||||
),
|
|
||||||
Positioned(
|
|
||||||
left: -30,
|
|
||||||
bottom: -30,
|
|
||||||
child: AnimatedBuilder(
|
|
||||||
animation: rotationAnimation,
|
|
||||||
builder: (context, child) {
|
|
||||||
return Transform.rotate(
|
|
||||||
angle: -rotationAnimation.value * 0.5,
|
|
||||||
child: Container(
|
|
||||||
width: 80,
|
|
||||||
height: 80,
|
|
||||||
decoration: BoxDecoration(
|
|
||||||
shape: BoxShape.circle,
|
|
||||||
color: AppColor.white.withOpacity(0.05),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
);
|
|
||||||
},
|
|
||||||
),
|
|
||||||
),
|
|
||||||
Positioned(
|
|
||||||
right: 80,
|
|
||||||
bottom: 30,
|
|
||||||
child: AnimatedBuilder(
|
|
||||||
animation: rotationAnimation,
|
|
||||||
builder: (context, child) {
|
|
||||||
return Transform.rotate(
|
|
||||||
angle: -rotationAnimation.value * 0.2,
|
|
||||||
child: Container(
|
|
||||||
width: 40,
|
|
||||||
height: 40,
|
|
||||||
decoration: BoxDecoration(
|
|
||||||
borderRadius: BorderRadius.circular(8),
|
|
||||||
color: AppColor.white.withOpacity(0.08),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
);
|
|
||||||
},
|
|
||||||
),
|
|
||||||
),
|
|
||||||
],
|
|
||||||
),
|
|
||||||
),
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,55 +0,0 @@
|
|||||||
import 'package:flutter/material.dart';
|
|
||||||
|
|
||||||
import '../../../../common/theme/theme.dart';
|
|
||||||
import 'stat_tile.dart';
|
|
||||||
|
|
||||||
class ReportQuickStats extends StatelessWidget {
|
|
||||||
const ReportQuickStats({super.key});
|
|
||||||
|
|
||||||
@override
|
|
||||||
Widget build(BuildContext context) {
|
|
||||||
return Row(
|
|
||||||
children: [
|
|
||||||
Expanded(
|
|
||||||
child: TweenAnimationBuilder<double>(
|
|
||||||
tween: Tween<double>(begin: 0, end: 1),
|
|
||||||
duration: const Duration(milliseconds: 800),
|
|
||||||
builder: (context, value, child) {
|
|
||||||
return Transform.scale(
|
|
||||||
scale: value,
|
|
||||||
child: ReportStatTile(
|
|
||||||
title: 'Total Transaksi',
|
|
||||||
value: '245',
|
|
||||||
icon: Icons.receipt_long,
|
|
||||||
color: AppColor.info,
|
|
||||||
change: '+8.2%',
|
|
||||||
animatedValue: 245 * value,
|
|
||||||
),
|
|
||||||
);
|
|
||||||
},
|
|
||||||
),
|
|
||||||
),
|
|
||||||
const SizedBox(width: 16),
|
|
||||||
Expanded(
|
|
||||||
child: TweenAnimationBuilder<double>(
|
|
||||||
tween: Tween<double>(begin: 0, end: 1),
|
|
||||||
duration: const Duration(milliseconds: 1000),
|
|
||||||
builder: (context, value, child) {
|
|
||||||
return Transform.scale(
|
|
||||||
scale: value,
|
|
||||||
child: ReportStatTile(
|
|
||||||
title: 'Rata-rata',
|
|
||||||
value: 'Rp 63.061',
|
|
||||||
icon: Icons.trending_up,
|
|
||||||
color: AppColor.warning,
|
|
||||||
change: '+5.1%',
|
|
||||||
animatedValue: 63061 * value,
|
|
||||||
),
|
|
||||||
);
|
|
||||||
},
|
|
||||||
),
|
|
||||||
),
|
|
||||||
],
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,136 +0,0 @@
|
|||||||
import 'package:flutter/material.dart';
|
|
||||||
|
|
||||||
import '../../../../common/theme/theme.dart';
|
|
||||||
import '../../../components/spacer/spacer.dart';
|
|
||||||
|
|
||||||
class ReportAction extends StatefulWidget {
|
|
||||||
const ReportAction({super.key});
|
|
||||||
|
|
||||||
@override
|
|
||||||
State<ReportAction> createState() => _ReportActionState();
|
|
||||||
}
|
|
||||||
|
|
||||||
class _ReportActionState extends State<ReportAction> {
|
|
||||||
final actions = [
|
|
||||||
{
|
|
||||||
'title': 'Laporan Detail Penjualan',
|
|
||||||
'subtitle': 'Analisis mendalam transaksi harian',
|
|
||||||
'icon': Icons.assignment,
|
|
||||||
'color': AppColor.primary,
|
|
||||||
'gradient': [AppColor.primary, AppColor.primaryLight],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
'title': 'Monitor Stok Produk',
|
|
||||||
'subtitle': 'Tracking inventory real-time',
|
|
||||||
'icon': Icons.inventory_2,
|
|
||||||
'color': AppColor.info,
|
|
||||||
'gradient': [AppColor.info, const Color(0xFF64B5F6)],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
'title': 'Analisis Keuangan',
|
|
||||||
'subtitle': 'Profit, loss & cash flow analysis',
|
|
||||||
'icon': Icons.account_balance_wallet,
|
|
||||||
'color': AppColor.success,
|
|
||||||
'gradient': [AppColor.success, AppColor.secondaryLight],
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
@override
|
|
||||||
Widget build(BuildContext context) {
|
|
||||||
return Column(
|
|
||||||
children: actions.map((action) {
|
|
||||||
return Container(
|
|
||||||
margin: const EdgeInsets.only(bottom: 16),
|
|
||||||
child: Material(
|
|
||||||
color: Colors.transparent,
|
|
||||||
child: InkWell(
|
|
||||||
onTap: () {},
|
|
||||||
borderRadius: BorderRadius.circular(20),
|
|
||||||
child: Container(
|
|
||||||
padding: const EdgeInsets.all(20),
|
|
||||||
decoration: BoxDecoration(
|
|
||||||
gradient: LinearGradient(
|
|
||||||
colors: [
|
|
||||||
(action['color'] as Color).withOpacity(0.1),
|
|
||||||
(action['color'] as Color).withOpacity(0.05),
|
|
||||||
],
|
|
||||||
begin: Alignment.topLeft,
|
|
||||||
end: Alignment.bottomRight,
|
|
||||||
),
|
|
||||||
borderRadius: BorderRadius.circular(20),
|
|
||||||
border: Border.all(
|
|
||||||
color: (action['color'] as Color).withOpacity(0.3),
|
|
||||||
width: 1.5,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
child: Row(
|
|
||||||
children: [
|
|
||||||
Container(
|
|
||||||
padding: const EdgeInsets.all(16),
|
|
||||||
decoration: BoxDecoration(
|
|
||||||
gradient: LinearGradient(
|
|
||||||
colors: action['gradient'] as List<Color>,
|
|
||||||
begin: Alignment.topLeft,
|
|
||||||
end: Alignment.bottomRight,
|
|
||||||
),
|
|
||||||
borderRadius: BorderRadius.circular(16),
|
|
||||||
boxShadow: [
|
|
||||||
BoxShadow(
|
|
||||||
color: (action['color'] as Color).withOpacity(0.3),
|
|
||||||
blurRadius: 10,
|
|
||||||
offset: const Offset(0, 4),
|
|
||||||
),
|
|
||||||
],
|
|
||||||
),
|
|
||||||
child: Icon(
|
|
||||||
action['icon'] as IconData,
|
|
||||||
color: AppColor.white,
|
|
||||||
size: 28,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
const SizedBox(width: 20),
|
|
||||||
Expanded(
|
|
||||||
child: Column(
|
|
||||||
crossAxisAlignment: CrossAxisAlignment.start,
|
|
||||||
children: [
|
|
||||||
Text(
|
|
||||||
action['title'] as String,
|
|
||||||
style: AppStyle.lg.copyWith(
|
|
||||||
color: AppColor.textPrimary,
|
|
||||||
fontSize: 16,
|
|
||||||
fontWeight: FontWeight.w600,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
const SpaceHeight(4),
|
|
||||||
Text(
|
|
||||||
action['subtitle'] as String,
|
|
||||||
style: AppStyle.sm.copyWith(
|
|
||||||
color: AppColor.textSecondary,
|
|
||||||
fontSize: 13,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
],
|
|
||||||
),
|
|
||||||
),
|
|
||||||
Container(
|
|
||||||
padding: const EdgeInsets.all(8),
|
|
||||||
decoration: BoxDecoration(
|
|
||||||
color: (action['color'] as Color).withOpacity(0.1),
|
|
||||||
borderRadius: BorderRadius.circular(10),
|
|
||||||
),
|
|
||||||
child: Icon(
|
|
||||||
Icons.arrow_forward_ios,
|
|
||||||
color: action['color'] as Color,
|
|
||||||
size: 16,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
],
|
|
||||||
),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
);
|
|
||||||
}).toList(),
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,161 +0,0 @@
|
|||||||
import 'package:flutter/material.dart';
|
|
||||||
|
|
||||||
import '../../../../common/theme/theme.dart';
|
|
||||||
import '../../../components/spacer/spacer.dart';
|
|
||||||
|
|
||||||
class ReportRevenueSummary extends StatelessWidget {
|
|
||||||
final Animation<double> rotationAnimation;
|
|
||||||
const ReportRevenueSummary({super.key, required this.rotationAnimation});
|
|
||||||
|
|
||||||
@override
|
|
||||||
Widget build(BuildContext context) {
|
|
||||||
return Container(
|
|
||||||
height: 180,
|
|
||||||
decoration: BoxDecoration(
|
|
||||||
borderRadius: BorderRadius.circular(24),
|
|
||||||
boxShadow: [
|
|
||||||
BoxShadow(
|
|
||||||
color: AppColor.primary.withOpacity(0.3),
|
|
||||||
blurRadius: 20,
|
|
||||||
offset: const Offset(0, 8),
|
|
||||||
),
|
|
||||||
],
|
|
||||||
),
|
|
||||||
child: Stack(
|
|
||||||
children: [
|
|
||||||
Container(
|
|
||||||
decoration: BoxDecoration(
|
|
||||||
gradient: const LinearGradient(
|
|
||||||
colors: AppColor.primaryGradient,
|
|
||||||
begin: Alignment.topLeft,
|
|
||||||
end: Alignment.bottomRight,
|
|
||||||
),
|
|
||||||
borderRadius: BorderRadius.circular(24),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
// Floating elements
|
|
||||||
Positioned(
|
|
||||||
right: 20,
|
|
||||||
top: 20,
|
|
||||||
child: AnimatedBuilder(
|
|
||||||
animation: rotationAnimation,
|
|
||||||
builder: (context, child) {
|
|
||||||
return Transform.rotate(
|
|
||||||
angle: rotationAnimation.value * 0.3,
|
|
||||||
child: Container(
|
|
||||||
width: 60,
|
|
||||||
height: 60,
|
|
||||||
decoration: BoxDecoration(
|
|
||||||
shape: BoxShape.circle,
|
|
||||||
color: AppColor.white.withOpacity(0.1),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
);
|
|
||||||
},
|
|
||||||
),
|
|
||||||
),
|
|
||||||
Positioned(
|
|
||||||
right: 60,
|
|
||||||
bottom: 30,
|
|
||||||
child: AnimatedBuilder(
|
|
||||||
animation: rotationAnimation,
|
|
||||||
builder: (context, child) {
|
|
||||||
return Transform.rotate(
|
|
||||||
angle: -rotationAnimation.value * 0.2,
|
|
||||||
child: Container(
|
|
||||||
width: 40,
|
|
||||||
height: 40,
|
|
||||||
decoration: BoxDecoration(
|
|
||||||
borderRadius: BorderRadius.circular(8),
|
|
||||||
color: AppColor.white.withOpacity(0.08),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
);
|
|
||||||
},
|
|
||||||
),
|
|
||||||
),
|
|
||||||
// Content
|
|
||||||
Padding(
|
|
||||||
padding: const EdgeInsets.all(24),
|
|
||||||
child: Column(
|
|
||||||
crossAxisAlignment: CrossAxisAlignment.start,
|
|
||||||
children: [
|
|
||||||
Row(
|
|
||||||
children: [
|
|
||||||
Container(
|
|
||||||
padding: const EdgeInsets.all(8),
|
|
||||||
decoration: BoxDecoration(
|
|
||||||
color: AppColor.white.withOpacity(0.2),
|
|
||||||
borderRadius: BorderRadius.circular(10),
|
|
||||||
),
|
|
||||||
child: const Icon(
|
|
||||||
Icons.account_balance_wallet,
|
|
||||||
color: AppColor.textWhite,
|
|
||||||
size: 20,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
const SpaceWidth(12),
|
|
||||||
Text(
|
|
||||||
'Total Pendapatan',
|
|
||||||
style: AppStyle.lg.copyWith(
|
|
||||||
color: AppColor.textWhite,
|
|
||||||
fontWeight: FontWeight.w500,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
],
|
|
||||||
),
|
|
||||||
const Spacer(),
|
|
||||||
Text(
|
|
||||||
'Rp 15.450.000',
|
|
||||||
style: AppStyle.h1.copyWith(
|
|
||||||
color: AppColor.textWhite,
|
|
||||||
fontWeight: FontWeight.bold,
|
|
||||||
letterSpacing: -1,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
const SpaceHeight(8),
|
|
||||||
Row(
|
|
||||||
children: [
|
|
||||||
Container(
|
|
||||||
padding: const EdgeInsets.symmetric(
|
|
||||||
horizontal: 12,
|
|
||||||
vertical: 6,
|
|
||||||
),
|
|
||||||
decoration: BoxDecoration(
|
|
||||||
color: AppColor.success.withOpacity(0.9),
|
|
||||||
borderRadius: BorderRadius.circular(20),
|
|
||||||
),
|
|
||||||
child: Row(
|
|
||||||
mainAxisSize: MainAxisSize.min,
|
|
||||||
children: [
|
|
||||||
Icon(
|
|
||||||
Icons.trending_up,
|
|
||||||
color: AppColor.textWhite,
|
|
||||||
size: 16,
|
|
||||||
),
|
|
||||||
SpaceWidth(4),
|
|
||||||
Text(
|
|
||||||
'+12.5%',
|
|
||||||
style: AppStyle.sm.copyWith(
|
|
||||||
color: AppColor.textWhite,
|
|
||||||
fontWeight: FontWeight.w700,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
],
|
|
||||||
),
|
|
||||||
),
|
|
||||||
const SpaceWidth(12),
|
|
||||||
Text(
|
|
||||||
'dari periode sebelumnya',
|
|
||||||
style: AppStyle.sm.copyWith(color: AppColor.textWhite),
|
|
||||||
),
|
|
||||||
],
|
|
||||||
),
|
|
||||||
],
|
|
||||||
),
|
|
||||||
),
|
|
||||||
],
|
|
||||||
),
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,321 +0,0 @@
|
|||||||
import 'package:fl_chart/fl_chart.dart';
|
|
||||||
import 'package:flutter/material.dart';
|
|
||||||
|
|
||||||
import '../../../../common/theme/theme.dart';
|
|
||||||
import '../../../components/spacer/spacer.dart';
|
|
||||||
|
|
||||||
class ReportSales extends StatelessWidget {
|
|
||||||
const ReportSales({super.key});
|
|
||||||
|
|
||||||
@override
|
|
||||||
Widget build(BuildContext context) {
|
|
||||||
return Container(
|
|
||||||
padding: const EdgeInsets.all(24),
|
|
||||||
decoration: BoxDecoration(
|
|
||||||
color: AppColor.surface,
|
|
||||||
borderRadius: BorderRadius.circular(24),
|
|
||||||
boxShadow: [
|
|
||||||
BoxShadow(
|
|
||||||
color: AppColor.textSecondary.withOpacity(0.1),
|
|
||||||
blurRadius: 20,
|
|
||||||
offset: const Offset(0, 8),
|
|
||||||
),
|
|
||||||
],
|
|
||||||
),
|
|
||||||
child: Column(
|
|
||||||
crossAxisAlignment: CrossAxisAlignment.start,
|
|
||||||
children: [
|
|
||||||
Row(
|
|
||||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
||||||
children: [
|
|
||||||
Column(
|
|
||||||
crossAxisAlignment: CrossAxisAlignment.start,
|
|
||||||
children: [
|
|
||||||
Text(
|
|
||||||
'Grafik Penjualan',
|
|
||||||
style: AppStyle.xxl.copyWith(
|
|
||||||
color: AppColor.textPrimary,
|
|
||||||
|
|
||||||
fontWeight: FontWeight.bold,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
const SpaceHeight(4),
|
|
||||||
Text(
|
|
||||||
'7 hari terakhir',
|
|
||||||
style: AppStyle.md.copyWith(color: AppColor.textSecondary),
|
|
||||||
),
|
|
||||||
],
|
|
||||||
),
|
|
||||||
Container(
|
|
||||||
padding: const EdgeInsets.all(8),
|
|
||||||
decoration: BoxDecoration(
|
|
||||||
color: AppColor.primary.withOpacity(0.1),
|
|
||||||
borderRadius: BorderRadius.circular(12),
|
|
||||||
),
|
|
||||||
child: const Icon(
|
|
||||||
Icons.show_chart,
|
|
||||||
color: AppColor.primary,
|
|
||||||
size: 24,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
],
|
|
||||||
),
|
|
||||||
const SpaceHeight(20),
|
|
||||||
|
|
||||||
// Chart Container
|
|
||||||
Container(
|
|
||||||
height: 280,
|
|
||||||
padding: const EdgeInsets.all(16),
|
|
||||||
decoration: BoxDecoration(
|
|
||||||
gradient: LinearGradient(
|
|
||||||
colors: [
|
|
||||||
AppColor.primary.withOpacity(0.05),
|
|
||||||
AppColor.backgroundLight,
|
|
||||||
],
|
|
||||||
begin: Alignment.topCenter,
|
|
||||||
end: Alignment.bottomCenter,
|
|
||||||
),
|
|
||||||
borderRadius: BorderRadius.circular(16),
|
|
||||||
border: Border.all(
|
|
||||||
color: AppColor.primary.withOpacity(0.1),
|
|
||||||
width: 2,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
child: LineChart(
|
|
||||||
LineChartData(
|
|
||||||
gridData: FlGridData(
|
|
||||||
show: true,
|
|
||||||
drawHorizontalLine: true,
|
|
||||||
drawVerticalLine: false,
|
|
||||||
horizontalInterval: 500000,
|
|
||||||
getDrawingHorizontalLine: (value) {
|
|
||||||
return FlLine(
|
|
||||||
color: AppColor.border.withOpacity(0.3),
|
|
||||||
strokeWidth: 1,
|
|
||||||
dashArray: [5, 5],
|
|
||||||
);
|
|
||||||
},
|
|
||||||
),
|
|
||||||
titlesData: FlTitlesData(
|
|
||||||
leftTitles: AxisTitles(
|
|
||||||
sideTitles: SideTitles(
|
|
||||||
showTitles: true,
|
|
||||||
reservedSize: 60,
|
|
||||||
getTitlesWidget: (value, meta) {
|
|
||||||
return Text(
|
|
||||||
'${(value / 1000000).toStringAsFixed(1)}M',
|
|
||||||
style: AppStyle.sm.copyWith(
|
|
||||||
color: AppColor.textSecondary,
|
|
||||||
fontWeight: FontWeight.w500,
|
|
||||||
),
|
|
||||||
);
|
|
||||||
},
|
|
||||||
),
|
|
||||||
),
|
|
||||||
bottomTitles: AxisTitles(
|
|
||||||
sideTitles: SideTitles(
|
|
||||||
showTitles: true,
|
|
||||||
reservedSize: 32,
|
|
||||||
getTitlesWidget: (value, meta) {
|
|
||||||
const days = [
|
|
||||||
'Sen',
|
|
||||||
'Sel',
|
|
||||||
'Rab',
|
|
||||||
'Kam',
|
|
||||||
'Jum',
|
|
||||||
'Sab',
|
|
||||||
'Min',
|
|
||||||
];
|
|
||||||
if (value.toInt() >= 0 && value.toInt() < days.length) {
|
|
||||||
return Padding(
|
|
||||||
padding: const EdgeInsets.only(top: 8),
|
|
||||||
child: Text(
|
|
||||||
days[value.toInt()],
|
|
||||||
style: AppStyle.sm.copyWith(
|
|
||||||
color: AppColor.textSecondary,
|
|
||||||
fontWeight: FontWeight.w500,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
);
|
|
||||||
}
|
|
||||||
return const Text('');
|
|
||||||
},
|
|
||||||
),
|
|
||||||
),
|
|
||||||
rightTitles: AxisTitles(
|
|
||||||
sideTitles: SideTitles(showTitles: false),
|
|
||||||
),
|
|
||||||
topTitles: AxisTitles(
|
|
||||||
sideTitles: SideTitles(showTitles: false),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
borderData: FlBorderData(show: false),
|
|
||||||
minX: 0,
|
|
||||||
maxX: 6,
|
|
||||||
minY: 0,
|
|
||||||
maxY: 3000000,
|
|
||||||
lineBarsData: [
|
|
||||||
// Main sales line
|
|
||||||
LineChartBarData(
|
|
||||||
spots: [
|
|
||||||
const FlSpot(0, 1800000), // Senin
|
|
||||||
const FlSpot(1, 2200000), // Selasa
|
|
||||||
const FlSpot(2, 1900000), // Rabu
|
|
||||||
const FlSpot(3, 2600000), // Kamis
|
|
||||||
const FlSpot(4, 2300000), // Jumat
|
|
||||||
const FlSpot(5, 2800000), // Sabtu
|
|
||||||
const FlSpot(6, 2500000), // Minggu
|
|
||||||
],
|
|
||||||
isCurved: true,
|
|
||||||
curveSmoothness: 0.35,
|
|
||||||
gradient: LinearGradient(
|
|
||||||
colors: [AppColor.primary, AppColor.primaryLight],
|
|
||||||
begin: Alignment.centerLeft,
|
|
||||||
end: Alignment.centerRight,
|
|
||||||
),
|
|
||||||
barWidth: 4,
|
|
||||||
isStrokeCapRound: true,
|
|
||||||
belowBarData: BarAreaData(
|
|
||||||
show: true,
|
|
||||||
gradient: LinearGradient(
|
|
||||||
colors: [
|
|
||||||
AppColor.primary.withOpacity(0.3),
|
|
||||||
AppColor.primary.withOpacity(0.1),
|
|
||||||
Colors.transparent,
|
|
||||||
],
|
|
||||||
begin: Alignment.topCenter,
|
|
||||||
end: Alignment.bottomCenter,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
dotData: FlDotData(
|
|
||||||
show: true,
|
|
||||||
getDotPainter: (spot, percent, barData, index) {
|
|
||||||
return FlDotCirclePainter(
|
|
||||||
radius: 6,
|
|
||||||
color: AppColor.surface,
|
|
||||||
strokeWidth: 3,
|
|
||||||
strokeColor: AppColor.primary,
|
|
||||||
);
|
|
||||||
},
|
|
||||||
),
|
|
||||||
),
|
|
||||||
// Secondary line for comparison
|
|
||||||
LineChartBarData(
|
|
||||||
spots: [
|
|
||||||
const FlSpot(0, 1500000),
|
|
||||||
const FlSpot(1, 1800000),
|
|
||||||
const FlSpot(2, 1600000),
|
|
||||||
const FlSpot(3, 2100000),
|
|
||||||
const FlSpot(4, 1900000),
|
|
||||||
const FlSpot(5, 2300000),
|
|
||||||
const FlSpot(6, 2100000),
|
|
||||||
],
|
|
||||||
isCurved: true,
|
|
||||||
curveSmoothness: 0.35,
|
|
||||||
color: AppColor.success.withOpacity(0.7),
|
|
||||||
barWidth: 3,
|
|
||||||
isStrokeCapRound: true,
|
|
||||||
dashArray: [8, 4],
|
|
||||||
belowBarData: BarAreaData(show: false),
|
|
||||||
dotData: FlDotData(
|
|
||||||
show: true,
|
|
||||||
getDotPainter: (spot, percent, barData, index) {
|
|
||||||
return FlDotCirclePainter(
|
|
||||||
radius: 4,
|
|
||||||
color: AppColor.success,
|
|
||||||
strokeWidth: 2,
|
|
||||||
strokeColor: AppColor.surface,
|
|
||||||
);
|
|
||||||
},
|
|
||||||
),
|
|
||||||
),
|
|
||||||
],
|
|
||||||
lineTouchData: LineTouchData(
|
|
||||||
enabled: true,
|
|
||||||
touchTooltipData: LineTouchTooltipData(
|
|
||||||
tooltipPadding: const EdgeInsets.all(12),
|
|
||||||
getTooltipItems: (List<LineBarSpot> touchedBarSpots) {
|
|
||||||
return touchedBarSpots.map((barSpot) {
|
|
||||||
final flSpot = barSpot;
|
|
||||||
const days = [
|
|
||||||
'Senin',
|
|
||||||
'Selasa',
|
|
||||||
'Rabu',
|
|
||||||
'Kamis',
|
|
||||||
'Jumat',
|
|
||||||
'Sabtu',
|
|
||||||
'Minggu',
|
|
||||||
];
|
|
||||||
|
|
||||||
return LineTooltipItem(
|
|
||||||
'${days[flSpot.x.toInt()]}\n',
|
|
||||||
const TextStyle(
|
|
||||||
color: AppColor.textWhite,
|
|
||||||
fontWeight: FontWeight.bold,
|
|
||||||
fontSize: 14,
|
|
||||||
),
|
|
||||||
children: [
|
|
||||||
TextSpan(
|
|
||||||
text:
|
|
||||||
'Rp ${(flSpot.y / 1000000).toStringAsFixed(1)}M',
|
|
||||||
style: AppStyle.sm.copyWith(
|
|
||||||
color: AppColor.textWhite,
|
|
||||||
fontWeight: FontWeight.w500,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
],
|
|
||||||
);
|
|
||||||
}).toList();
|
|
||||||
},
|
|
||||||
),
|
|
||||||
touchCallback:
|
|
||||||
(FlTouchEvent event, LineTouchResponse? touchResponse) {
|
|
||||||
// Handle touch events here if needed
|
|
||||||
},
|
|
||||||
handleBuiltInTouches: true,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
|
|
||||||
const SpaceHeight(16),
|
|
||||||
|
|
||||||
// Legend
|
|
||||||
Row(
|
|
||||||
mainAxisAlignment: MainAxisAlignment.center,
|
|
||||||
children: [
|
|
||||||
_buildLegendItem('Minggu Ini', AppColor.primary),
|
|
||||||
const SpaceWidth(24),
|
|
||||||
_buildLegendItem('Minggu Lalu', AppColor.success),
|
|
||||||
],
|
|
||||||
),
|
|
||||||
],
|
|
||||||
),
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
Widget _buildLegendItem(String label, Color color) {
|
|
||||||
return Row(
|
|
||||||
mainAxisSize: MainAxisSize.min,
|
|
||||||
children: [
|
|
||||||
Container(
|
|
||||||
width: 16,
|
|
||||||
height: 3,
|
|
||||||
decoration: BoxDecoration(
|
|
||||||
color: color,
|
|
||||||
borderRadius: BorderRadius.circular(2),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
const SpaceWidth(8),
|
|
||||||
Text(
|
|
||||||
label,
|
|
||||||
style: AppStyle.sm.copyWith(
|
|
||||||
color: AppColor.textSecondary,
|
|
||||||
|
|
||||||
fontWeight: FontWeight.w500,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
],
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,92 +0,0 @@
|
|||||||
import 'package:flutter/material.dart';
|
|
||||||
|
|
||||||
import '../../../../common/theme/theme.dart';
|
|
||||||
|
|
||||||
class ReportStatTile extends StatelessWidget {
|
|
||||||
final String title;
|
|
||||||
final String value;
|
|
||||||
final IconData icon;
|
|
||||||
final Color color;
|
|
||||||
final String change;
|
|
||||||
final double animatedValue;
|
|
||||||
const ReportStatTile({
|
|
||||||
super.key,
|
|
||||||
required this.title,
|
|
||||||
required this.value,
|
|
||||||
required this.icon,
|
|
||||||
required this.color,
|
|
||||||
required this.change,
|
|
||||||
required this.animatedValue,
|
|
||||||
});
|
|
||||||
|
|
||||||
@override
|
|
||||||
Widget build(BuildContext context) {
|
|
||||||
return Container(
|
|
||||||
padding: const EdgeInsets.all(20),
|
|
||||||
decoration: BoxDecoration(
|
|
||||||
color: AppColor.surface,
|
|
||||||
borderRadius: BorderRadius.circular(20),
|
|
||||||
boxShadow: [
|
|
||||||
BoxShadow(
|
|
||||||
color: color.withOpacity(0.1),
|
|
||||||
blurRadius: 15,
|
|
||||||
offset: const Offset(0, 5),
|
|
||||||
),
|
|
||||||
],
|
|
||||||
border: Border.all(color: color.withOpacity(0.2), width: 1.5),
|
|
||||||
),
|
|
||||||
child: Column(
|
|
||||||
crossAxisAlignment: CrossAxisAlignment.start,
|
|
||||||
children: [
|
|
||||||
Row(
|
|
||||||
children: [
|
|
||||||
Container(
|
|
||||||
padding: const EdgeInsets.all(12),
|
|
||||||
decoration: BoxDecoration(
|
|
||||||
gradient: LinearGradient(
|
|
||||||
colors: [color.withOpacity(0.2), color.withOpacity(0.1)],
|
|
||||||
begin: Alignment.topLeft,
|
|
||||||
end: Alignment.bottomRight,
|
|
||||||
),
|
|
||||||
borderRadius: BorderRadius.circular(12),
|
|
||||||
),
|
|
||||||
child: Icon(icon, color: color, size: 24),
|
|
||||||
),
|
|
||||||
const Spacer(),
|
|
||||||
Container(
|
|
||||||
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
|
|
||||||
decoration: BoxDecoration(
|
|
||||||
color: AppColor.success.withOpacity(0.1),
|
|
||||||
borderRadius: BorderRadius.circular(12),
|
|
||||||
),
|
|
||||||
child: Text(
|
|
||||||
change,
|
|
||||||
style: AppStyle.sm.copyWith(
|
|
||||||
color: AppColor.success,
|
|
||||||
fontWeight: FontWeight.w700,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
],
|
|
||||||
),
|
|
||||||
const SizedBox(height: 16),
|
|
||||||
Text(
|
|
||||||
title,
|
|
||||||
style: AppStyle.md.copyWith(
|
|
||||||
color: AppColor.textSecondary,
|
|
||||||
fontWeight: FontWeight.w500,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
const SizedBox(height: 4),
|
|
||||||
Text(
|
|
||||||
value,
|
|
||||||
style: AppStyle.xxl.copyWith(
|
|
||||||
color: color,
|
|
||||||
fontWeight: FontWeight.bold,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
],
|
|
||||||
),
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,202 +0,0 @@
|
|||||||
import 'package:flutter/material.dart';
|
|
||||||
|
|
||||||
import '../../../../common/theme/theme.dart';
|
|
||||||
import '../../../components/spacer/spacer.dart';
|
|
||||||
|
|
||||||
class ReportTopProduct extends StatelessWidget {
|
|
||||||
const ReportTopProduct({super.key});
|
|
||||||
|
|
||||||
@override
|
|
||||||
Widget build(BuildContext context) {
|
|
||||||
return Container(
|
|
||||||
padding: const EdgeInsets.all(24),
|
|
||||||
decoration: BoxDecoration(
|
|
||||||
color: AppColor.surface,
|
|
||||||
borderRadius: BorderRadius.circular(24),
|
|
||||||
boxShadow: [
|
|
||||||
BoxShadow(
|
|
||||||
color: AppColor.textSecondary.withOpacity(0.1),
|
|
||||||
blurRadius: 20,
|
|
||||||
offset: const Offset(0, 8),
|
|
||||||
),
|
|
||||||
],
|
|
||||||
),
|
|
||||||
child: Column(
|
|
||||||
crossAxisAlignment: CrossAxisAlignment.start,
|
|
||||||
children: [
|
|
||||||
Row(
|
|
||||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
||||||
children: [
|
|
||||||
Column(
|
|
||||||
crossAxisAlignment: CrossAxisAlignment.start,
|
|
||||||
children: [
|
|
||||||
Text(
|
|
||||||
'Produk Terlaris',
|
|
||||||
style: AppStyle.xxl.copyWith(
|
|
||||||
color: AppColor.textPrimary,
|
|
||||||
fontWeight: FontWeight.bold,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
const SpaceHeight(4),
|
|
||||||
Text(
|
|
||||||
'Ranking penjualan tertinggi',
|
|
||||||
style: AppStyle.md.copyWith(color: AppColor.textSecondary),
|
|
||||||
),
|
|
||||||
],
|
|
||||||
),
|
|
||||||
Container(
|
|
||||||
padding: const EdgeInsets.all(8),
|
|
||||||
decoration: BoxDecoration(
|
|
||||||
color: AppColor.warning.withOpacity(0.1),
|
|
||||||
borderRadius: BorderRadius.circular(12),
|
|
||||||
),
|
|
||||||
child: const Icon(
|
|
||||||
Icons.star,
|
|
||||||
color: AppColor.warning,
|
|
||||||
size: 24,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
],
|
|
||||||
),
|
|
||||||
const SpaceHeight(20),
|
|
||||||
_buildEnhancedProductItem(
|
|
||||||
'Kopi Americano',
|
|
||||||
'Rp 25.000',
|
|
||||||
'145 terjual',
|
|
||||||
1,
|
|
||||||
),
|
|
||||||
_buildEnhancedProductItem(
|
|
||||||
'Nasi Goreng Spesial',
|
|
||||||
'Rp 35.000',
|
|
||||||
'98 terjual',
|
|
||||||
2,
|
|
||||||
),
|
|
||||||
_buildEnhancedProductItem(
|
|
||||||
'Mie Ayam Bakso',
|
|
||||||
'Rp 28.000',
|
|
||||||
'87 terjual',
|
|
||||||
3,
|
|
||||||
),
|
|
||||||
],
|
|
||||||
),
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
Widget _buildEnhancedProductItem(
|
|
||||||
String name,
|
|
||||||
String price,
|
|
||||||
String sold,
|
|
||||||
int rank,
|
|
||||||
) {
|
|
||||||
final isFirst = rank == 1;
|
|
||||||
return Container(
|
|
||||||
margin: const EdgeInsets.only(bottom: 16),
|
|
||||||
padding: const EdgeInsets.all(16),
|
|
||||||
decoration: BoxDecoration(
|
|
||||||
gradient: isFirst
|
|
||||||
? LinearGradient(
|
|
||||||
colors: [
|
|
||||||
AppColor.warning.withOpacity(0.1),
|
|
||||||
AppColor.warning.withOpacity(0.05),
|
|
||||||
],
|
|
||||||
begin: Alignment.topLeft,
|
|
||||||
end: Alignment.bottomRight,
|
|
||||||
)
|
|
||||||
: null,
|
|
||||||
color: isFirst ? null : AppColor.backgroundLight,
|
|
||||||
borderRadius: BorderRadius.circular(16),
|
|
||||||
border: Border.all(
|
|
||||||
color: isFirst ? AppColor.warning.withOpacity(0.3) : AppColor.border,
|
|
||||||
width: isFirst ? 2 : 1,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
child: Row(
|
|
||||||
children: [
|
|
||||||
Container(
|
|
||||||
width: 48,
|
|
||||||
height: 48,
|
|
||||||
decoration: BoxDecoration(
|
|
||||||
gradient: isFirst
|
|
||||||
? const LinearGradient(
|
|
||||||
colors: [AppColor.warning, Color(0xFFFFB74D)],
|
|
||||||
begin: Alignment.topLeft,
|
|
||||||
end: Alignment.bottomRight,
|
|
||||||
)
|
|
||||||
: LinearGradient(
|
|
||||||
colors: [
|
|
||||||
AppColor.primary.withOpacity(0.8),
|
|
||||||
AppColor.primaryLight.withOpacity(0.6),
|
|
||||||
],
|
|
||||||
),
|
|
||||||
borderRadius: BorderRadius.circular(12),
|
|
||||||
boxShadow: [
|
|
||||||
BoxShadow(
|
|
||||||
color: isFirst
|
|
||||||
? AppColor.warning.withOpacity(0.3)
|
|
||||||
: AppColor.primary.withOpacity(0.2),
|
|
||||||
blurRadius: 8,
|
|
||||||
offset: const Offset(0, 4),
|
|
||||||
),
|
|
||||||
],
|
|
||||||
),
|
|
||||||
child: Center(
|
|
||||||
child: isFirst
|
|
||||||
? const Icon(
|
|
||||||
Icons.emoji_events,
|
|
||||||
color: AppColor.white,
|
|
||||||
size: 24,
|
|
||||||
)
|
|
||||||
: Text(
|
|
||||||
rank.toString(),
|
|
||||||
style: AppStyle.xl.copyWith(
|
|
||||||
color: AppColor.white,
|
|
||||||
fontWeight: FontWeight.bold,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
const SpaceWidth(16),
|
|
||||||
Expanded(
|
|
||||||
child: Column(
|
|
||||||
crossAxisAlignment: CrossAxisAlignment.start,
|
|
||||||
children: [
|
|
||||||
Text(
|
|
||||||
name,
|
|
||||||
style: AppStyle.lg.copyWith(
|
|
||||||
color: AppColor.textPrimary,
|
|
||||||
fontWeight: FontWeight.w600,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
const SpaceHeight(4),
|
|
||||||
Row(
|
|
||||||
children: [
|
|
||||||
Icon(
|
|
||||||
Icons.shopping_cart,
|
|
||||||
size: 14,
|
|
||||||
color: AppColor.textSecondary,
|
|
||||||
),
|
|
||||||
const SpaceWidth(4),
|
|
||||||
Text(
|
|
||||||
sold,
|
|
||||||
style: AppStyle.sm.copyWith(
|
|
||||||
color: AppColor.textSecondary,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
],
|
|
||||||
),
|
|
||||||
],
|
|
||||||
),
|
|
||||||
),
|
|
||||||
Text(
|
|
||||||
price,
|
|
||||||
style: AppStyle.lg.copyWith(
|
|
||||||
color: isFirst ? AppColor.warning : AppColor.primary,
|
|
||||||
fontSize: 16,
|
|
||||||
fontWeight: FontWeight.bold,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
],
|
|
||||||
),
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,711 +1,12 @@
|
|||||||
import 'package:auto_route/auto_route.dart';
|
import 'package:auto_route/auto_route.dart';
|
||||||
import 'package:flutter/material.dart';
|
import 'package:flutter/material.dart';
|
||||||
|
|
||||||
import '../../../common/theme/theme.dart';
|
|
||||||
|
|
||||||
class Transaction {
|
|
||||||
final String id;
|
|
||||||
final String customerName;
|
|
||||||
final DateTime date;
|
|
||||||
final double total;
|
|
||||||
final String status;
|
|
||||||
final List<TransactionItem> items;
|
|
||||||
final String paymentMethod;
|
|
||||||
|
|
||||||
Transaction({
|
|
||||||
required this.id,
|
|
||||||
required this.customerName,
|
|
||||||
required this.date,
|
|
||||||
required this.total,
|
|
||||||
required this.status,
|
|
||||||
required this.items,
|
|
||||||
required this.paymentMethod,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
class TransactionItem {
|
|
||||||
final String name;
|
|
||||||
final int quantity;
|
|
||||||
final double price;
|
|
||||||
|
|
||||||
TransactionItem({
|
|
||||||
required this.name,
|
|
||||||
required this.quantity,
|
|
||||||
required this.price,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
@RoutePage()
|
@RoutePage()
|
||||||
class TransactionPage extends StatefulWidget {
|
class TransactionPage extends StatelessWidget {
|
||||||
const TransactionPage({super.key});
|
const TransactionPage({super.key});
|
||||||
|
|
||||||
@override
|
|
||||||
State<TransactionPage> createState() => _TransactionPageState();
|
|
||||||
}
|
|
||||||
|
|
||||||
class _TransactionPageState extends State<TransactionPage> {
|
|
||||||
String selectedFilter = 'All';
|
|
||||||
DateTime selectedDate = DateTime.now();
|
|
||||||
|
|
||||||
final List<Transaction> transactions = [
|
|
||||||
Transaction(
|
|
||||||
id: 'TRX001',
|
|
||||||
customerName: 'Ahmad Rizki',
|
|
||||||
date: DateTime.now().subtract(Duration(hours: 2)),
|
|
||||||
total: 125000,
|
|
||||||
status: 'Completed',
|
|
||||||
paymentMethod: 'Cash',
|
|
||||||
items: [
|
|
||||||
TransactionItem(name: 'Nasi Goreng', quantity: 2, price: 25000),
|
|
||||||
TransactionItem(name: 'Es Teh', quantity: 3, price: 5000),
|
|
||||||
TransactionItem(name: 'Ayam Bakar', quantity: 1, price: 35000),
|
|
||||||
],
|
|
||||||
),
|
|
||||||
Transaction(
|
|
||||||
id: 'TRX002',
|
|
||||||
customerName: 'Siti Nurhaliza',
|
|
||||||
date: DateTime.now().subtract(Duration(hours: 4)),
|
|
||||||
total: 85000,
|
|
||||||
status: 'Completed',
|
|
||||||
paymentMethod: 'QRIS',
|
|
||||||
items: [
|
|
||||||
TransactionItem(name: 'Gado-gado', quantity: 1, price: 20000),
|
|
||||||
TransactionItem(name: 'Jus Jeruk', quantity: 2, price: 12000),
|
|
||||||
TransactionItem(name: 'Kerupuk', quantity: 1, price: 5000),
|
|
||||||
],
|
|
||||||
),
|
|
||||||
Transaction(
|
|
||||||
id: 'TRX003',
|
|
||||||
customerName: 'Budi Santoso',
|
|
||||||
date: DateTime.now().subtract(Duration(hours: 6)),
|
|
||||||
total: 200000,
|
|
||||||
status: 'Pending',
|
|
||||||
paymentMethod: 'Debit Card',
|
|
||||||
items: [
|
|
||||||
TransactionItem(name: 'Paket Keluarga', quantity: 1, price: 150000),
|
|
||||||
TransactionItem(name: 'Es Campur', quantity: 2, price: 15000),
|
|
||||||
],
|
|
||||||
),
|
|
||||||
];
|
|
||||||
|
|
||||||
@override
|
@override
|
||||||
Widget build(BuildContext context) {
|
Widget build(BuildContext context) {
|
||||||
return Scaffold(
|
return Center(child: Text('TransactionPage'));
|
||||||
backgroundColor: AppColor.background,
|
|
||||||
appBar: AppBar(
|
|
||||||
elevation: 0,
|
|
||||||
backgroundColor: AppColor.white,
|
|
||||||
title: Text(
|
|
||||||
'Transactions',
|
|
||||||
style: TextStyle(
|
|
||||||
color: AppColor.textPrimary,
|
|
||||||
fontSize: 20,
|
|
||||||
fontWeight: FontWeight.bold,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
actions: [
|
|
||||||
IconButton(
|
|
||||||
icon: Icon(Icons.search, color: AppColor.textPrimary),
|
|
||||||
onPressed: () {},
|
|
||||||
),
|
|
||||||
IconButton(
|
|
||||||
icon: Icon(Icons.filter_list, color: AppColor.textPrimary),
|
|
||||||
onPressed: () => _showFilterBottomSheet(context),
|
|
||||||
),
|
|
||||||
],
|
|
||||||
),
|
|
||||||
body: Column(
|
|
||||||
children: [
|
|
||||||
_buildSummaryCards(),
|
|
||||||
_buildFilterTabs(),
|
|
||||||
Expanded(child: _buildTransactionList()),
|
|
||||||
],
|
|
||||||
),
|
|
||||||
floatingActionButton: FloatingActionButton.extended(
|
|
||||||
onPressed: () {},
|
|
||||||
backgroundColor: AppColor.primary,
|
|
||||||
icon: Icon(Icons.add, color: AppColor.white),
|
|
||||||
label: Text(
|
|
||||||
'New Sale',
|
|
||||||
style: TextStyle(color: AppColor.white, fontWeight: FontWeight.w600),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
Widget _buildSummaryCards() {
|
|
||||||
return Container(
|
|
||||||
padding: EdgeInsets.all(16),
|
|
||||||
child: Row(
|
|
||||||
children: [
|
|
||||||
Expanded(
|
|
||||||
child: _buildSummaryCard(
|
|
||||||
'Today\'s Sales',
|
|
||||||
'Rp 2,450,000',
|
|
||||||
Icons.trending_up,
|
|
||||||
AppColor.success,
|
|
||||||
'+12%',
|
|
||||||
),
|
|
||||||
),
|
|
||||||
SizedBox(width: 12),
|
|
||||||
Expanded(
|
|
||||||
child: _buildSummaryCard(
|
|
||||||
'Total Orders',
|
|
||||||
'48',
|
|
||||||
Icons.receipt_long,
|
|
||||||
AppColor.info,
|
|
||||||
'+8%',
|
|
||||||
),
|
|
||||||
),
|
|
||||||
],
|
|
||||||
),
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
Widget _buildSummaryCard(
|
|
||||||
String title,
|
|
||||||
String value,
|
|
||||||
IconData icon,
|
|
||||||
Color color,
|
|
||||||
String change,
|
|
||||||
) {
|
|
||||||
return Container(
|
|
||||||
padding: EdgeInsets.all(16),
|
|
||||||
decoration: BoxDecoration(
|
|
||||||
color: AppColor.white,
|
|
||||||
borderRadius: BorderRadius.circular(12),
|
|
||||||
boxShadow: [
|
|
||||||
BoxShadow(
|
|
||||||
color: AppColor.black.withOpacity(0.05),
|
|
||||||
blurRadius: 10,
|
|
||||||
offset: Offset(0, 2),
|
|
||||||
),
|
|
||||||
],
|
|
||||||
),
|
|
||||||
child: Column(
|
|
||||||
crossAxisAlignment: CrossAxisAlignment.start,
|
|
||||||
children: [
|
|
||||||
Row(
|
|
||||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
||||||
children: [
|
|
||||||
Icon(icon, color: color, size: 24),
|
|
||||||
Container(
|
|
||||||
padding: EdgeInsets.symmetric(horizontal: 8, vertical: 4),
|
|
||||||
decoration: BoxDecoration(
|
|
||||||
color: AppColor.success.withOpacity(0.1),
|
|
||||||
borderRadius: BorderRadius.circular(12),
|
|
||||||
),
|
|
||||||
child: Text(
|
|
||||||
change,
|
|
||||||
style: TextStyle(
|
|
||||||
color: AppColor.success,
|
|
||||||
fontSize: 10,
|
|
||||||
fontWeight: FontWeight.w600,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
],
|
|
||||||
),
|
|
||||||
SizedBox(height: 12),
|
|
||||||
Text(
|
|
||||||
value,
|
|
||||||
style: TextStyle(
|
|
||||||
color: AppColor.textPrimary,
|
|
||||||
fontSize: 20,
|
|
||||||
fontWeight: FontWeight.bold,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
SizedBox(height: 4),
|
|
||||||
Text(
|
|
||||||
title,
|
|
||||||
style: TextStyle(
|
|
||||||
color: AppColor.textSecondary,
|
|
||||||
fontSize: 12,
|
|
||||||
fontWeight: FontWeight.w500,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
],
|
|
||||||
),
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
Widget _buildFilterTabs() {
|
|
||||||
final filters = ['All', 'Completed', 'Pending', 'Cancelled'];
|
|
||||||
|
|
||||||
return Container(
|
|
||||||
height: 60,
|
|
||||||
padding: EdgeInsets.symmetric(horizontal: 16),
|
|
||||||
child: ListView.builder(
|
|
||||||
scrollDirection: Axis.horizontal,
|
|
||||||
itemCount: filters.length,
|
|
||||||
itemBuilder: (context, index) {
|
|
||||||
final filter = filters[index];
|
|
||||||
final isSelected = selectedFilter == filter;
|
|
||||||
|
|
||||||
return GestureDetector(
|
|
||||||
onTap: () {
|
|
||||||
setState(() {
|
|
||||||
selectedFilter = filter;
|
|
||||||
});
|
|
||||||
},
|
|
||||||
child: Container(
|
|
||||||
margin: EdgeInsets.only(right: 12, top: 8, bottom: 8),
|
|
||||||
padding: EdgeInsets.symmetric(horizontal: 20, vertical: 8),
|
|
||||||
decoration: BoxDecoration(
|
|
||||||
color: isSelected ? AppColor.primary : AppColor.white,
|
|
||||||
borderRadius: BorderRadius.circular(25),
|
|
||||||
border: Border.all(
|
|
||||||
color: isSelected ? AppColor.primary : AppColor.border,
|
|
||||||
width: 1,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
child: Text(
|
|
||||||
filter,
|
|
||||||
style: TextStyle(
|
|
||||||
color: isSelected ? AppColor.white : AppColor.textSecondary,
|
|
||||||
fontWeight: FontWeight.w600,
|
|
||||||
fontSize: 14,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
);
|
|
||||||
},
|
|
||||||
),
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
Widget _buildTransactionList() {
|
|
||||||
final filteredTransactions = transactions.where((transaction) {
|
|
||||||
if (selectedFilter == 'All') return true;
|
|
||||||
return transaction.status == selectedFilter;
|
|
||||||
}).toList();
|
|
||||||
|
|
||||||
return ListView.builder(
|
|
||||||
padding: EdgeInsets.symmetric(horizontal: 16),
|
|
||||||
itemCount: filteredTransactions.length,
|
|
||||||
itemBuilder: (context, index) {
|
|
||||||
final transaction = filteredTransactions[index];
|
|
||||||
return _buildTransactionCard(transaction);
|
|
||||||
},
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
Widget _buildTransactionCard(Transaction transaction) {
|
|
||||||
return GestureDetector(
|
|
||||||
onTap: () => _showTransactionDetail(transaction),
|
|
||||||
child: Container(
|
|
||||||
margin: EdgeInsets.only(bottom: 12),
|
|
||||||
padding: EdgeInsets.all(16),
|
|
||||||
decoration: BoxDecoration(
|
|
||||||
color: AppColor.white,
|
|
||||||
borderRadius: BorderRadius.circular(12),
|
|
||||||
boxShadow: [
|
|
||||||
BoxShadow(
|
|
||||||
color: AppColor.black.withOpacity(0.05),
|
|
||||||
blurRadius: 10,
|
|
||||||
offset: Offset(0, 2),
|
|
||||||
),
|
|
||||||
],
|
|
||||||
),
|
|
||||||
child: Column(
|
|
||||||
children: [
|
|
||||||
Row(
|
|
||||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
||||||
children: [
|
|
||||||
Expanded(
|
|
||||||
child: Column(
|
|
||||||
crossAxisAlignment: CrossAxisAlignment.start,
|
|
||||||
children: [
|
|
||||||
Text(
|
|
||||||
transaction.id,
|
|
||||||
style: TextStyle(
|
|
||||||
color: AppColor.textPrimary,
|
|
||||||
fontSize: 16,
|
|
||||||
fontWeight: FontWeight.bold,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
SizedBox(height: 4),
|
|
||||||
Text(
|
|
||||||
transaction.customerName,
|
|
||||||
style: TextStyle(
|
|
||||||
color: AppColor.textSecondary,
|
|
||||||
fontSize: 14,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
SizedBox(height: 4),
|
|
||||||
Text(
|
|
||||||
'${_formatTime(transaction.date)} • ${transaction.paymentMethod}',
|
|
||||||
style: TextStyle(
|
|
||||||
color: AppColor.textLight,
|
|
||||||
fontSize: 12,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
],
|
|
||||||
),
|
|
||||||
),
|
|
||||||
Column(
|
|
||||||
crossAxisAlignment: CrossAxisAlignment.end,
|
|
||||||
children: [
|
|
||||||
Text(
|
|
||||||
'Rp ${_formatCurrency(transaction.total)}',
|
|
||||||
style: TextStyle(
|
|
||||||
color: AppColor.textPrimary,
|
|
||||||
fontSize: 16,
|
|
||||||
fontWeight: FontWeight.bold,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
SizedBox(height: 8),
|
|
||||||
Container(
|
|
||||||
padding: EdgeInsets.symmetric(
|
|
||||||
horizontal: 12,
|
|
||||||
vertical: 6,
|
|
||||||
),
|
|
||||||
decoration: BoxDecoration(
|
|
||||||
color: _getStatusColor(
|
|
||||||
transaction.status,
|
|
||||||
).withOpacity(0.1),
|
|
||||||
borderRadius: BorderRadius.circular(20),
|
|
||||||
),
|
|
||||||
child: Text(
|
|
||||||
transaction.status,
|
|
||||||
style: TextStyle(
|
|
||||||
color: _getStatusColor(transaction.status),
|
|
||||||
fontSize: 12,
|
|
||||||
fontWeight: FontWeight.w600,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
],
|
|
||||||
),
|
|
||||||
],
|
|
||||||
),
|
|
||||||
SizedBox(height: 12),
|
|
||||||
Row(
|
|
||||||
children: [
|
|
||||||
Icon(
|
|
||||||
Icons.shopping_bag_outlined,
|
|
||||||
color: AppColor.textLight,
|
|
||||||
size: 16,
|
|
||||||
),
|
|
||||||
SizedBox(width: 8),
|
|
||||||
Text(
|
|
||||||
'${transaction.items.length} items',
|
|
||||||
style: TextStyle(color: AppColor.textLight, fontSize: 12),
|
|
||||||
),
|
|
||||||
Spacer(),
|
|
||||||
Icon(
|
|
||||||
Icons.arrow_forward_ios,
|
|
||||||
color: AppColor.textLight,
|
|
||||||
size: 14,
|
|
||||||
),
|
|
||||||
],
|
|
||||||
),
|
|
||||||
],
|
|
||||||
),
|
|
||||||
),
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
Color _getStatusColor(String status) {
|
|
||||||
switch (status) {
|
|
||||||
case 'Completed':
|
|
||||||
return AppColor.success;
|
|
||||||
case 'Pending':
|
|
||||||
return AppColor.warning;
|
|
||||||
case 'Cancelled':
|
|
||||||
return AppColor.error;
|
|
||||||
default:
|
|
||||||
return AppColor.textSecondary;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
String _formatCurrency(double amount) {
|
|
||||||
return amount
|
|
||||||
.toStringAsFixed(0)
|
|
||||||
.replaceAllMapped(
|
|
||||||
RegExp(r'(\d{1,3})(?=(\d{3})+(?!\d))'),
|
|
||||||
(Match m) => '${m[1]},',
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
String _formatTime(DateTime dateTime) {
|
|
||||||
final now = DateTime.now();
|
|
||||||
final difference = now.difference(dateTime);
|
|
||||||
|
|
||||||
if (difference.inHours < 1) {
|
|
||||||
return '${difference.inMinutes}m ago';
|
|
||||||
} else if (difference.inHours < 24) {
|
|
||||||
return '${difference.inHours}h ago';
|
|
||||||
} else {
|
|
||||||
return '${difference.inDays}d ago';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
void _showFilterBottomSheet(BuildContext context) {
|
|
||||||
showModalBottomSheet(
|
|
||||||
context: context,
|
|
||||||
shape: RoundedRectangleBorder(
|
|
||||||
borderRadius: BorderRadius.vertical(top: Radius.circular(20)),
|
|
||||||
),
|
|
||||||
builder: (context) {
|
|
||||||
return Container(
|
|
||||||
padding: EdgeInsets.all(20),
|
|
||||||
child: Column(
|
|
||||||
mainAxisSize: MainAxisSize.min,
|
|
||||||
crossAxisAlignment: CrossAxisAlignment.start,
|
|
||||||
children: [
|
|
||||||
Text(
|
|
||||||
'Filter Transactions',
|
|
||||||
style: TextStyle(
|
|
||||||
fontSize: 18,
|
|
||||||
fontWeight: FontWeight.bold,
|
|
||||||
color: AppColor.textPrimary,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
SizedBox(height: 20),
|
|
||||||
_buildFilterOption('Date Range', Icons.date_range),
|
|
||||||
_buildFilterOption('Payment Method', Icons.payment),
|
|
||||||
_buildFilterOption('Amount Range', Icons.attach_money),
|
|
||||||
_buildFilterOption('Customer', Icons.person),
|
|
||||||
SizedBox(height: 20),
|
|
||||||
Row(
|
|
||||||
children: [
|
|
||||||
Expanded(
|
|
||||||
child: OutlinedButton(
|
|
||||||
onPressed: () => Navigator.pop(context),
|
|
||||||
style: OutlinedButton.styleFrom(
|
|
||||||
side: BorderSide(color: AppColor.border),
|
|
||||||
padding: EdgeInsets.symmetric(vertical: 12),
|
|
||||||
),
|
|
||||||
child: Text(
|
|
||||||
'Reset',
|
|
||||||
style: TextStyle(color: AppColor.textSecondary),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
SizedBox(width: 12),
|
|
||||||
Expanded(
|
|
||||||
child: ElevatedButton(
|
|
||||||
onPressed: () => Navigator.pop(context),
|
|
||||||
style: ElevatedButton.styleFrom(
|
|
||||||
backgroundColor: AppColor.primary,
|
|
||||||
padding: EdgeInsets.symmetric(vertical: 12),
|
|
||||||
),
|
|
||||||
child: Text(
|
|
||||||
'Apply',
|
|
||||||
style: TextStyle(color: AppColor.white),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
],
|
|
||||||
),
|
|
||||||
],
|
|
||||||
),
|
|
||||||
);
|
|
||||||
},
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
Widget _buildFilterOption(String title, IconData icon) {
|
|
||||||
return ListTile(
|
|
||||||
contentPadding: EdgeInsets.zero,
|
|
||||||
leading: Icon(icon, color: AppColor.textSecondary),
|
|
||||||
title: Text(title, style: TextStyle(color: AppColor.textPrimary)),
|
|
||||||
trailing: Icon(
|
|
||||||
Icons.arrow_forward_ios,
|
|
||||||
size: 16,
|
|
||||||
color: AppColor.textLight,
|
|
||||||
),
|
|
||||||
onTap: () {},
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
void _showTransactionDetail(Transaction transaction) {
|
|
||||||
showModalBottomSheet(
|
|
||||||
context: context,
|
|
||||||
isScrollControlled: true,
|
|
||||||
shape: RoundedRectangleBorder(
|
|
||||||
borderRadius: BorderRadius.vertical(top: Radius.circular(20)),
|
|
||||||
),
|
|
||||||
builder: (context) {
|
|
||||||
return DraggableScrollableSheet(
|
|
||||||
initialChildSize: 0.7,
|
|
||||||
maxChildSize: 0.9,
|
|
||||||
minChildSize: 0.5,
|
|
||||||
builder: (context, scrollController) {
|
|
||||||
return Container(
|
|
||||||
padding: EdgeInsets.all(20),
|
|
||||||
child: Column(
|
|
||||||
crossAxisAlignment: CrossAxisAlignment.start,
|
|
||||||
children: [
|
|
||||||
Center(
|
|
||||||
child: Container(
|
|
||||||
width: 40,
|
|
||||||
height: 4,
|
|
||||||
decoration: BoxDecoration(
|
|
||||||
color: AppColor.borderLight,
|
|
||||||
borderRadius: BorderRadius.circular(2),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
SizedBox(height: 20),
|
|
||||||
Row(
|
|
||||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
||||||
children: [
|
|
||||||
Text(
|
|
||||||
'Transaction Detail',
|
|
||||||
style: TextStyle(
|
|
||||||
fontSize: 18,
|
|
||||||
fontWeight: FontWeight.bold,
|
|
||||||
color: AppColor.textPrimary,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
Container(
|
|
||||||
padding: EdgeInsets.symmetric(
|
|
||||||
horizontal: 12,
|
|
||||||
vertical: 6,
|
|
||||||
),
|
|
||||||
decoration: BoxDecoration(
|
|
||||||
color: _getStatusColor(
|
|
||||||
transaction.status,
|
|
||||||
).withOpacity(0.1),
|
|
||||||
borderRadius: BorderRadius.circular(20),
|
|
||||||
),
|
|
||||||
child: Text(
|
|
||||||
transaction.status,
|
|
||||||
style: TextStyle(
|
|
||||||
color: _getStatusColor(transaction.status),
|
|
||||||
fontSize: 12,
|
|
||||||
fontWeight: FontWeight.w600,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
],
|
|
||||||
),
|
|
||||||
SizedBox(height: 20),
|
|
||||||
_buildDetailRow('Transaction ID', transaction.id),
|
|
||||||
_buildDetailRow('Customer', transaction.customerName),
|
|
||||||
_buildDetailRow(
|
|
||||||
'Date',
|
|
||||||
'${transaction.date.day}/${transaction.date.month}/${transaction.date.year}',
|
|
||||||
),
|
|
||||||
_buildDetailRow('Payment Method', transaction.paymentMethod),
|
|
||||||
SizedBox(height: 20),
|
|
||||||
Text(
|
|
||||||
'Items Ordered',
|
|
||||||
style: TextStyle(
|
|
||||||
fontSize: 16,
|
|
||||||
fontWeight: FontWeight.bold,
|
|
||||||
color: AppColor.textPrimary,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
SizedBox(height: 12),
|
|
||||||
Expanded(
|
|
||||||
child: ListView.builder(
|
|
||||||
controller: scrollController,
|
|
||||||
itemCount: transaction.items.length,
|
|
||||||
itemBuilder: (context, index) {
|
|
||||||
final item = transaction.items[index];
|
|
||||||
return Container(
|
|
||||||
margin: EdgeInsets.only(bottom: 8),
|
|
||||||
padding: EdgeInsets.all(12),
|
|
||||||
decoration: BoxDecoration(
|
|
||||||
color: AppColor.backgroundLight,
|
|
||||||
borderRadius: BorderRadius.circular(8),
|
|
||||||
),
|
|
||||||
child: Row(
|
|
||||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
||||||
children: [
|
|
||||||
Expanded(
|
|
||||||
child: Column(
|
|
||||||
crossAxisAlignment: CrossAxisAlignment.start,
|
|
||||||
children: [
|
|
||||||
Text(
|
|
||||||
item.name,
|
|
||||||
style: TextStyle(
|
|
||||||
color: AppColor.textPrimary,
|
|
||||||
fontWeight: FontWeight.w600,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
Text(
|
|
||||||
'Qty: ${item.quantity}',
|
|
||||||
style: TextStyle(
|
|
||||||
color: AppColor.textSecondary,
|
|
||||||
fontSize: 12,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
],
|
|
||||||
),
|
|
||||||
),
|
|
||||||
Text(
|
|
||||||
'Rp ${_formatCurrency(item.price * item.quantity)}',
|
|
||||||
style: TextStyle(
|
|
||||||
color: AppColor.textPrimary,
|
|
||||||
fontWeight: FontWeight.bold,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
],
|
|
||||||
),
|
|
||||||
);
|
|
||||||
},
|
|
||||||
),
|
|
||||||
),
|
|
||||||
Container(
|
|
||||||
padding: EdgeInsets.symmetric(vertical: 16),
|
|
||||||
decoration: BoxDecoration(
|
|
||||||
border: Border(top: BorderSide(color: AppColor.border)),
|
|
||||||
),
|
|
||||||
child: Row(
|
|
||||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
||||||
children: [
|
|
||||||
Text(
|
|
||||||
'Total Amount',
|
|
||||||
style: TextStyle(
|
|
||||||
fontSize: 18,
|
|
||||||
fontWeight: FontWeight.bold,
|
|
||||||
color: AppColor.textPrimary,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
Text(
|
|
||||||
'Rp ${_formatCurrency(transaction.total)}',
|
|
||||||
style: TextStyle(
|
|
||||||
fontSize: 18,
|
|
||||||
fontWeight: FontWeight.bold,
|
|
||||||
color: AppColor.primary,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
],
|
|
||||||
),
|
|
||||||
),
|
|
||||||
],
|
|
||||||
),
|
|
||||||
);
|
|
||||||
},
|
|
||||||
);
|
|
||||||
},
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
Widget _buildDetailRow(String label, String value) {
|
|
||||||
return Padding(
|
|
||||||
padding: EdgeInsets.symmetric(vertical: 8),
|
|
||||||
child: Row(
|
|
||||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
||||||
children: [
|
|
||||||
Text(
|
|
||||||
label,
|
|
||||||
style: TextStyle(color: AppColor.textSecondary, fontSize: 14),
|
|
||||||
),
|
|
||||||
Text(
|
|
||||||
value,
|
|
||||||
style: TextStyle(
|
|
||||||
color: AppColor.textPrimary,
|
|
||||||
fontSize: 14,
|
|
||||||
fontWeight: FontWeight.w600,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
],
|
|
||||||
),
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
18
pubspec.lock
18
pubspec.lock
@ -297,14 +297,6 @@ packages:
|
|||||||
url: "https://pub.dev"
|
url: "https://pub.dev"
|
||||||
source: hosted
|
source: hosted
|
||||||
version: "2.1.1"
|
version: "2.1.1"
|
||||||
equatable:
|
|
||||||
dependency: transitive
|
|
||||||
description:
|
|
||||||
name: equatable
|
|
||||||
sha256: "567c64b3cb4cf82397aac55f4f0cbd3ca20d77c6c03bedbc4ceaddc08904aef7"
|
|
||||||
url: "https://pub.dev"
|
|
||||||
source: hosted
|
|
||||||
version: "2.0.7"
|
|
||||||
fake_async:
|
fake_async:
|
||||||
dependency: transitive
|
dependency: transitive
|
||||||
description:
|
description:
|
||||||
@ -337,14 +329,6 @@ packages:
|
|||||||
url: "https://pub.dev"
|
url: "https://pub.dev"
|
||||||
source: hosted
|
source: hosted
|
||||||
version: "1.1.1"
|
version: "1.1.1"
|
||||||
fl_chart:
|
|
||||||
dependency: "direct main"
|
|
||||||
description:
|
|
||||||
name: fl_chart
|
|
||||||
sha256: "577aeac8ca414c25333334d7c4bb246775234c0e44b38b10a82b559dd4d764e7"
|
|
||||||
url: "https://pub.dev"
|
|
||||||
source: hosted
|
|
||||||
version: "1.0.0"
|
|
||||||
flutter:
|
flutter:
|
||||||
dependency: "direct main"
|
dependency: "direct main"
|
||||||
description: flutter
|
description: flutter
|
||||||
@ -1055,4 +1039,4 @@ packages:
|
|||||||
version: "3.1.3"
|
version: "3.1.3"
|
||||||
sdks:
|
sdks:
|
||||||
dart: ">=3.8.1 <4.0.0"
|
dart: ">=3.8.1 <4.0.0"
|
||||||
flutter: ">=3.27.4"
|
flutter: ">=3.27.0"
|
||||||
|
|||||||
@ -30,7 +30,6 @@ dependencies:
|
|||||||
awesome_dio_interceptor: ^1.3.0
|
awesome_dio_interceptor: ^1.3.0
|
||||||
line_icons: ^2.0.3
|
line_icons: ^2.0.3
|
||||||
flutter_spinkit: ^5.2.2
|
flutter_spinkit: ^5.2.2
|
||||||
fl_chart: ^1.0.0
|
|
||||||
|
|
||||||
dev_dependencies:
|
dev_dependencies:
|
||||||
flutter_test:
|
flutter_test:
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user