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

feat: sales analytic

Browse Source
This commit is contained in:
efrilm
2025-08-17 10:10:31 +07:00
parent e7525238fe
commit f84090c0e6
21 changed files with 3703 additions and 407 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/presentation/pages/sales/sales_page.dart
+342 -405
View File
@@ -1,72 +1,29 @@
import 'package:auto_route/auto_route.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import '../../../application/sales/sales_loader/sales_loader_bloc.dart';
import '../../../common/extension/extension.dart';
import '../../../common/theme/theme.dart';
import '../../../domain/analytic/analytic.dart';
import '../../../injection.dart';
import '../../components/appbar/appbar.dart';
import '../../components/spacer/spacer.dart';
import 'widgets/summary_card.dart';
// Data Models
class SalesData {
final String dateFrom;
final String dateTo;
final SalesSummary summary;
final List<DailySales> dailySales;
SalesData({
required this.dateFrom,
required this.dateTo,
required this.summary,
required this.dailySales,
});
}
class SalesSummary {
final double totalSales;
final int totalOrders;
final int totalItems;
final double averageOrderValue;
final double totalTax;
final double totalDiscount;
final double netSales;
SalesSummary({
required this.totalSales,
required this.totalOrders,
required this.totalItems,
required this.averageOrderValue,
required this.totalTax,
required this.totalDiscount,
required this.netSales,
});
}
class DailySales {
final DateTime date;
final double sales;
final int orders;
final int items;
final double tax;
final double discount;
final double netSales;
DailySales({
required this.date,
required this.sales,
required this.orders,
required this.items,
required this.tax,
required this.discount,
required this.netSales,
});
}
@RoutePage()
class SalesPage extends StatefulWidget {
class SalesPage extends StatefulWidget implements AutoRouteWrapper {
const SalesPage({super.key});
@override
State<SalesPage> createState() => _SalesPageState();
@override
Widget wrappedRoute(BuildContext context) => BlocProvider(
create: (context) =>
getIt<SalesLoaderBloc>()..add(SalesLoaderEvent.fectched()),
child: this,
);
}
class _SalesPageState extends State<SalesPage> with TickerProviderStateMixin {
@@ -115,379 +72,359 @@ class _SalesPageState extends State<SalesPage> with TickerProviderStateMixin {
super.dispose();
}
// Sample data based on your JSON
final SalesData salesData = SalesData(
dateFrom: "2025-08-01T00:00:00+07:00",
dateTo: "2025-08-15T23:59:59.999999999+07:00",
summary: SalesSummary(
totalSales: 4291000,
totalOrders: 62,
totalItems: 62,
averageOrderValue: 69209.67741935483,
totalTax: 0,
totalDiscount: 0,
netSales: 4291000,
),
dailySales: [
DailySales(
date: DateTime.parse("2025-08-13T00:00:00Z"),
sales: 3841000,
orders: 52,
items: 52,
tax: 0,
discount: 0,
netSales: 3841000,
),
DailySales(
date: DateTime.parse("2025-08-14T00:00:00Z"),
sales: 450000,
orders: 10,
items: 10,
tax: 0,
discount: 0,
netSales: 450000,
),
],
);
String formatCurrency(double amount) {
return 'Rp ${amount.toStringAsFixed(0).replaceAllMapped(RegExp(r'(\d{1,3})(?=(\d{3})+(?!\d))'), (Match m) => '${m[1]}.')}';
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: AppColor.background,
body: CustomScrollView(
slivers: [
// App Bar
SliverAppBar(
expandedHeight: 120,
floating: false,
pinned: true,
backgroundColor: AppColor.primary,
flexibleSpace: CustomAppBar(title: 'Penjualan'),
),
body: BlocBuilder<SalesLoaderBloc, SalesLoaderState>(
builder: (context, state) {
return CustomScrollView(
slivers: [
// App Bar
SliverAppBar(
expandedHeight: 120,
floating: false,
pinned: true,
backgroundColor: AppColor.primary,
flexibleSpace: CustomAppBar(title: 'Penjualan'),
),
// Date Range Header
SliverToBoxAdapter(
child: SlideTransition(
position: slideAnimation,
child: FadeTransition(
opacity: fadeAnimation,
child: Container(
margin: const EdgeInsets.all(16),
padding: const EdgeInsets.symmetric(
horizontal: 20,
vertical: 12,
),
decoration: BoxDecoration(
color: AppColor.surface,
borderRadius: BorderRadius.circular(12),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.05),
blurRadius: 10,
offset: const Offset(0, 2),
// Date Range Header
SliverToBoxAdapter(
child: SlideTransition(
position: slideAnimation,
child: FadeTransition(
opacity: fadeAnimation,
child: Container(
margin: const EdgeInsets.all(16),
padding: const EdgeInsets.symmetric(
horizontal: 20,
vertical: 12,
),
],
),
child: Row(
children: [
Icon(Icons.date_range, color: AppColor.primary, size: 20),
SpaceWidth(8),
Text(
'Aug 1 - Aug 15, 2025',
style: AppStyle.md.copyWith(
color: AppColor.textPrimary,
fontWeight: FontWeight.w500,
),
decoration: BoxDecoration(
color: AppColor.surface,
borderRadius: BorderRadius.circular(12),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.05),
blurRadius: 10,
offset: const Offset(0, 2),
),
],
),
],
child: Row(
children: [
Icon(
Icons.date_range,
color: AppColor.primary,
size: 20,
),
SpaceWidth(8),
Text(
'Aug 1 - Aug 15, 2025',
style: AppStyle.md.copyWith(
color: AppColor.textPrimary,
fontWeight: FontWeight.w500,
),
),
],
),
),
),
),
),
),
),
// Summary Cards
SliverToBoxAdapter(
child: SlideTransition(
position: slideAnimation,
child: FadeTransition(
opacity: fadeAnimation,
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Summary',
style: AppStyle.xxl.copyWith(
// Summary Cards
SliverToBoxAdapter(
child: SlideTransition(
position: slideAnimation,
child: FadeTransition(
opacity: fadeAnimation,
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Summary',
style: AppStyle.xxl.copyWith(
fontWeight: FontWeight.bold,
color: AppColor.textPrimary,
),
),
const SpaceHeight(16),
TweenAnimationBuilder<double>(
tween: Tween(begin: 0.0, end: 1.0),
duration: const Duration(milliseconds: 800),
curve: Curves.elasticOut,
builder: (context, value, child) {
return Transform.scale(
scale: value,
child: Row(
children: [
Expanded(
child: _buildSummaryCard(
'Total Sales',
state
.sales
.summary
.totalSales
.currencyFormatRp,
Icons.trending_up,
AppColor.success,
0,
),
),
SpaceWidth(12),
Expanded(
child: _buildSummaryCard(
'Total Orders',
state.sales.summary.totalOrders
.toString(),
Icons.shopping_cart,
AppColor.info,
100,
),
),
],
),
);
},
),
const SpaceHeight(12),
TweenAnimationBuilder<double>(
tween: Tween(begin: 0.0, end: 1.0),
duration: const Duration(milliseconds: 1000),
curve: Curves.elasticOut,
builder: (context, value, child) {
return Transform.scale(
scale: value,
child: Row(
children: [
Expanded(
child: _buildSummaryCard(
'Avg Order Value',
state.sales.summary.averageOrderValue
.round()
.currencyFormatRp,
Icons.attach_money,
AppColor.warning,
200,
),
),
SpaceWidth(12),
Expanded(
child: _buildSummaryCard(
'Total Items',
state.sales.summary.totalItems
.toString(),
Icons.inventory,
AppColor.primary,
300,
),
),
],
),
);
},
),
],
),
),
),
),
),
// Net Sales Card
SliverToBoxAdapter(
child: SlideTransition(
position: slideAnimation,
child: FadeTransition(
opacity: fadeAnimation,
child: TweenAnimationBuilder<double>(
tween: Tween(begin: 0.0, end: 1.0),
duration: const Duration(milliseconds: 1200),
curve: Curves.bounceOut,
builder: (context, value, child) {
return Transform.scale(
scale: value,
child: Container(
margin: const EdgeInsets.all(16),
padding: const EdgeInsets.all(20),
decoration: BoxDecoration(
gradient: const LinearGradient(
colors: AppColor.successGradient,
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
borderRadius: BorderRadius.circular(16),
boxShadow: [
BoxShadow(
color: AppColor.success.withOpacity(0.3),
blurRadius: 15,
offset: const Offset(0, 5),
),
],
),
child: Row(
children: [
TweenAnimationBuilder<double>(
tween: Tween(begin: 0.0, end: 1.0),
duration: const Duration(milliseconds: 1500),
curve: Curves.elasticOut,
builder: (context, iconValue, child) {
return Transform.rotate(
angle: iconValue * 0.1,
child: Container(
padding: const EdgeInsets.all(12),
decoration: BoxDecoration(
color: Colors.white.withOpacity(0.2),
borderRadius: BorderRadius.circular(
12,
),
),
child: const Icon(
Icons.account_balance_wallet,
color: AppColor.textWhite,
size: 28,
),
),
);
},
),
SpaceWidth(16),
Expanded(
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Text(
'Net Sales',
style: TextStyle(
color: AppColor.textWhite.withOpacity(
0.9,
),
fontSize: 14,
fontWeight: FontWeight.w500,
),
),
const SpaceHeight(4),
TweenAnimationBuilder<double>(
tween: Tween(
begin: 0.0,
end: state.sales.summary.netSales
.toDouble(),
),
duration: const Duration(
milliseconds: 2000,
),
curve: Curves.easeOutCubic,
builder: (context, countValue, child) {
return Text(
state
.sales
.summary
.netSales
.currencyFormatRp,
style: const TextStyle(
color: AppColor.textWhite,
fontSize: 24,
fontWeight: FontWeight.bold,
),
);
},
),
],
),
),
],
),
),
);
},
),
),
),
),
// Daily Sales Section Header
SliverToBoxAdapter(
child: SlideTransition(
position: slideAnimation,
child: FadeTransition(
opacity: fadeAnimation,
child: Padding(
padding: const EdgeInsets.fromLTRB(16, 8, 16, 16),
child: Text(
'Daily Breakdown',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: AppColor.textPrimary,
),
),
const SpaceHeight(16),
TweenAnimationBuilder<double>(
tween: Tween(begin: 0.0, end: 1.0),
duration: const Duration(milliseconds: 800),
curve: Curves.elasticOut,
builder: (context, value, child) {
return Transform.scale(
scale: value,
child: Row(
children: [
Expanded(
child: _buildSummaryCard(
'Total Sales',
formatCurrency(
salesData.summary.totalSales,
),
Icons.trending_up,
AppColor.success,
0,
),
),
SpaceWidth(12),
Expanded(
child: _buildSummaryCard(
'Total Orders',
'${salesData.summary.totalOrders}',
Icons.shopping_cart,
AppColor.info,
100,
),
),
],
),
);
},
),
const SpaceHeight(12),
TweenAnimationBuilder<double>(
tween: Tween(begin: 0.0, end: 1.0),
duration: const Duration(milliseconds: 1000),
curve: Curves.elasticOut,
builder: (context, value, child) {
return Transform.scale(
scale: value,
child: Row(
children: [
Expanded(
child: _buildSummaryCard(
'Avg Order Value',
formatCurrency(
salesData.summary.averageOrderValue,
),
Icons.attach_money,
AppColor.warning,
200,
),
),
SpaceWidth(12),
Expanded(
child: _buildSummaryCard(
'Total Items',
'${salesData.summary.totalItems}',
Icons.inventory,
AppColor.primary,
300,
),
),
],
),
);
},
),
],
),
),
),
),
),
),
// Net Sales Card
SliverToBoxAdapter(
child: SlideTransition(
position: slideAnimation,
child: FadeTransition(
opacity: fadeAnimation,
child: TweenAnimationBuilder<double>(
tween: Tween(begin: 0.0, end: 1.0),
duration: const Duration(milliseconds: 1200),
curve: Curves.bounceOut,
builder: (context, value, child) {
return Transform.scale(
scale: value,
child: Container(
margin: const EdgeInsets.all(16),
padding: const EdgeInsets.all(20),
decoration: BoxDecoration(
gradient: const LinearGradient(
colors: AppColor.successGradient,
begin: Alignment.topLeft,
end: Alignment.bottomRight,
// Daily Sales List
SliverList(
delegate: SliverChildBuilderDelegate((context, index) {
return SlideTransition(
position:
Tween<Offset>(
begin: Offset(index.isEven ? -1.0 : 1.0, 0),
end: Offset.zero,
).animate(
CurvedAnimation(
parent: slideAnimationController,
curve: Interval(
0.2 + (index * 0.1),
0.8 + (index * 0.1),
curve: Curves.easeOutBack,
),
),
borderRadius: BorderRadius.circular(16),
),
child: FadeTransition(
opacity: Tween<double>(begin: 0.0, end: 1.0).animate(
CurvedAnimation(
parent: fadeAnimationController,
curve: Interval(
0.3 + (index * 0.1),
0.9 + (index * 0.1),
curve: Curves.easeOut,
),
),
),
child: Container(
margin: const EdgeInsets.symmetric(
horizontal: 16,
vertical: 6,
),
decoration: BoxDecoration(
color: AppColor.surface,
borderRadius: BorderRadius.circular(12),
boxShadow: [
BoxShadow(
color: AppColor.success.withOpacity(0.3),
blurRadius: 15,
offset: const Offset(0, 5),
),
],
),
child: Row(
children: [
TweenAnimationBuilder<double>(
tween: Tween(begin: 0.0, end: 1.0),
duration: const Duration(milliseconds: 1500),
curve: Curves.elasticOut,
builder: (context, iconValue, child) {
return Transform.rotate(
angle: iconValue * 0.1,
child: Container(
padding: const EdgeInsets.all(12),
decoration: BoxDecoration(
color: Colors.white.withOpacity(0.2),
borderRadius: BorderRadius.circular(12),
),
child: const Icon(
Icons.account_balance_wallet,
color: AppColor.textWhite,
size: 28,
),
),
);
},
),
SpaceWidth(16),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Net Sales',
style: TextStyle(
color: AppColor.textWhite.withOpacity(
0.9,
),
fontSize: 14,
fontWeight: FontWeight.w500,
),
),
const SpaceHeight(4),
TweenAnimationBuilder<double>(
tween: Tween(
begin: 0.0,
end: salesData.summary.netSales,
),
duration: const Duration(
milliseconds: 2000,
),
curve: Curves.easeOutCubic,
builder: (context, countValue, child) {
return Text(
formatCurrency(countValue),
style: const TextStyle(
color: AppColor.textWhite,
fontSize: 24,
fontWeight: FontWeight.bold,
),
);
},
),
],
),
color: Colors.black.withOpacity(0.05),
blurRadius: 8,
offset: const Offset(0, 2),
),
],
),
child: _buildDailySalesItem(state.sales.data[index]),
),
);
},
),
),
);
}, childCount: state.sales.data.length),
),
),
),
// Daily Sales Section Header
SliverToBoxAdapter(
child: SlideTransition(
position: slideAnimation,
child: FadeTransition(
opacity: fadeAnimation,
child: Padding(
padding: const EdgeInsets.fromLTRB(16, 8, 16, 16),
child: Text(
'Daily Breakdown',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: AppColor.textPrimary,
),
),
),
),
),
),
// Daily Sales List
SliverList(
delegate: SliverChildBuilderDelegate((context, index) {
final dailySale = salesData.dailySales[index];
return SlideTransition(
position:
Tween<Offset>(
begin: Offset(index.isEven ? -1.0 : 1.0, 0),
end: Offset.zero,
).animate(
CurvedAnimation(
parent: slideAnimationController,
curve: Interval(
0.2 + (index * 0.1),
0.8 + (index * 0.1),
curve: Curves.easeOutBack,
),
),
),
child: FadeTransition(
opacity: Tween<double>(begin: 0.0, end: 1.0).animate(
CurvedAnimation(
parent: fadeAnimationController,
curve: Interval(
0.3 + (index * 0.1),
0.9 + (index * 0.1),
curve: Curves.easeOut,
),
),
),
child: Container(
margin: const EdgeInsets.symmetric(
horizontal: 16,
vertical: 6,
),
decoration: BoxDecoration(
color: AppColor.surface,
borderRadius: BorderRadius.circular(12),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.05),
blurRadius: 8,
offset: const Offset(0, 2),
),
],
),
child: _buildDailySalesItem(dailySale),
),
),
);
}, childCount: salesData.dailySales.length),
),
// Bottom Padding
const SliverToBoxAdapter(child: SpaceHeight(32)),
],
// Bottom Padding
const SliverToBoxAdapter(child: SpaceHeight(32)),
],
);
},
),
);
}
@@ -509,7 +446,7 @@ class _SalesPageState extends State<SalesPage> with TickerProviderStateMixin {
);
}
Widget _buildDailySalesItem(DailySales dailySale) {
Widget _buildDailySalesItem(SalesAnalyticData dailySale) {
return ExpansionTile(
leading: Container(
padding: const EdgeInsets.all(10),
@@ -527,7 +464,7 @@ class _SalesPageState extends State<SalesPage> with TickerProviderStateMixin {
),
),
subtitle: Text(
formatCurrency(dailySale.sales),
dailySale.sales.currencyFormatRp,
style: TextStyle(
color: AppColor.success,
fontWeight: FontWeight.w600,
@@ -564,14 +501,14 @@ class _SalesPageState extends State<SalesPage> with TickerProviderStateMixin {
Expanded(
child: _buildDetailItem(
'Tax',
formatCurrency(dailySale.tax),
dailySale.tax.currencyFormatRp,
Icons.receipt,
),
),
Expanded(
child: _buildDetailItem(
'Discount',
formatCurrency(dailySale.discount),
dailySale.discount.currencyFormatRp,
Icons.local_offer,
),
),