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

feat: update sales ui
Build & Deploy iOS to TestFlight / build-and-deploy (push) Waiting to run
Details

Browse Source
This commit is contained in:
Efril
2026-06-23 23:18:22 +07:00
parent 7137cd2335
commit 8d801e52d9
37 changed files with 3234 additions and 833 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/presentation/pages/sales/sales_page.dart
+140 -685
View File
@@ -1,18 +1,19 @@
import 'package:auto_route/auto_route.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:shimmer/shimmer.dart';
import 'dart:math' as math;
import '../../../application/analytic/category_analytic_loader/category_analytic_loader_bloc.dart';
import '../../../application/analytic/payment_method_analytic_loader/payment_method_analytic_loader_bloc.dart';
import '../../../application/analytic/product_analytic_loader/product_analytic_loader_bloc.dart';
import '../../../application/analytic/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/field/date_range_picker_field.dart';
import '../../components/spacer/spacer.dart';
import 'widgets/summary_card.dart';
import 'widgets/sales_category_card.dart';
import 'widgets/sales_header.dart';
import 'widgets/sales_payment_method_card.dart';
import 'widgets/sales_rincian_card.dart';
import 'widgets/sales_top_products_card.dart';
@RoutePage()
class SalesPage extends StatefulWidget implements AutoRouteWrapper {
@@ -22,57 +23,58 @@ class SalesPage extends StatefulWidget implements AutoRouteWrapper {
State<SalesPage> createState() => _SalesPageState();
@override
Widget wrappedRoute(BuildContext context) => BlocProvider(
create: (context) =>
getIt<SalesLoaderBloc>()..add(SalesLoaderEvent.fectched()),
Widget wrappedRoute(BuildContext context) => MultiBlocProvider(
providers: [
BlocProvider(
create: (context) =>
getIt<SalesLoaderBloc>()..add(SalesLoaderEvent.fectched()),
),
BlocProvider(
create: (context) =>
getIt<PaymentMethodAnalyticLoaderBloc>()
..add(const PaymentMethodAnalyticLoaderEvent.fetched()),
),
BlocProvider(
create: (context) =>
getIt<CategoryAnalyticLoaderBloc>()
..add(const CategoryAnalyticLoaderEvent.fetched()),
),
BlocProvider(
create: (context) =>
getIt<ProductAnalyticLoaderBloc>()
..add(const ProductAnalyticLoaderEvent.fetched()),
),
],
child: this,
);
}
class _SalesPageState extends State<SalesPage> with TickerProviderStateMixin {
late AnimationController slideAnimationController;
late Animation<Offset> slideAnimation;
late AnimationController fadeAnimationController;
late Animation<double> fadeAnimation;
class _SalesPageState extends State<SalesPage>
with SingleTickerProviderStateMixin {
late AnimationController _fadeController;
late Animation<double> _fadeAnimation;
@override
void initState() {
super.initState();
// Slide Animation
slideAnimationController = AnimationController(
duration: const Duration(milliseconds: 800),
vsync: this,
);
slideAnimation =
Tween<Offset>(begin: const Offset(0, 0.3), end: Offset.zero).animate(
CurvedAnimation(
parent: slideAnimationController,
curve: Curves.easeOutCubic,
),
);
// Fade Animation
fadeAnimationController = AnimationController(
_fadeController = AnimationController(
duration: const Duration(milliseconds: 600),
vsync: this,
);
fadeAnimation = Tween<double>(begin: 0.0, end: 1.0).animate(
CurvedAnimation(parent: fadeAnimationController, curve: Curves.easeOut),
_fadeAnimation = CurvedAnimation(
parent: _fadeController,
curve: Curves.easeOut,
);
// Start animations
Future.delayed(const Duration(milliseconds: 300), () {
slideAnimationController.forward();
fadeAnimationController.forward();
_fadeController.forward();
});
}
@override
void dispose() {
slideAnimationController.dispose();
fadeAnimationController.dispose();
_fadeController.dispose();
super.dispose();
}
@@ -80,679 +82,132 @@ class _SalesPageState extends State<SalesPage> with TickerProviderStateMixin {
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: AppColor.background,
body: BlocListener<SalesLoaderBloc, SalesLoaderState>(
listenWhen: (previous, current) =>
previous.dateFrom != current.dateFrom ||
previous.dateTo != current.dateTo,
listener: (context, state) {
context.read<SalesLoaderBloc>().add(SalesLoaderEvent.fectched());
},
child: BlocBuilder<SalesLoaderBloc, SalesLoaderState>(
builder: (context, state) {
return CustomScrollView(
slivers: [
// App Bar
SliverAppBar(
expandedHeight: 120,
floating: false,
pinned: true,
backgroundColor: AppColor.primary,
flexibleSpace: CustomAppBar(title: context.lang.sales),
body: BlocBuilder<SalesLoaderBloc, SalesLoaderState>(
builder: (context, salesState) {
return CustomScrollView(
slivers: [
// Header
SliverToBoxAdapter(
child: SalesHeader(
state: salesState,
onDateRangeChanged: (startDate, endDate) {
_onDateRangeChanged(context, startDate, endDate);
},
),
),
// Date Range Header
SliverToBoxAdapter(
child: SlideTransition(
position: slideAnimation,
child: FadeTransition(
opacity: fadeAnimation,
child: Padding(
padding: const EdgeInsets.all(16.0),
child: DateRangePickerField(
maxDate: DateTime.now(),
startDate: state.dateFrom,
endDate: state.dateTo,
onChanged: (startDate, endDate) {
context.read<SalesLoaderBloc>().add(
SalesLoaderEvent.rangeDateChanged(
startDate!,
endDate!,
),
// Rincian Penjualan
SliverToBoxAdapter(
child: FadeTransition(
opacity: _fadeAnimation,
child: Padding(
padding: const EdgeInsets.all(16),
child: SalesRincianCard(state: salesState),
),
),
),
// Metode Pembayaran
SliverToBoxAdapter(
child: FadeTransition(
opacity: _fadeAnimation,
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 16),
child:
BlocBuilder<
PaymentMethodAnalyticLoaderBloc,
PaymentMethodAnalyticLoaderState
>(
builder: (context, paymentState) {
return SalesPaymentMethodCard(
paymentMethodAnalytic:
paymentState.paymentMethodAnalytic,
isFetching: paymentState.isFetching,
);
},
),
),
),
),
),
),
// 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(
context.lang.summary,
style: AppStyle.xxl.copyWith(
fontWeight: FontWeight.bold,
color: AppColor.textPrimary,
),
),
const SpaceHeight(16),
state.isFetching
? _buildSummaryShimmer()
: _buildSummaryCards(state),
],
// Penjualan per Kategori
SliverToBoxAdapter(
child: FadeTransition(
opacity: _fadeAnimation,
child: Padding(
padding: const EdgeInsets.all(16),
child:
BlocBuilder<
CategoryAnalyticLoaderBloc,
CategoryAnalyticLoaderState
>(
builder: (context, categoryState) {
return SalesCategoryCard(
categoryAnalytic: categoryState.categoryAnalytic,
isFetching: categoryState.isFetching,
);
},
),
),
),
),
),
),
// Net Sales Card
SliverToBoxAdapter(
child: SlideTransition(
position: slideAnimation,
child: FadeTransition(
opacity: fadeAnimation,
child: state.isFetching
? _buildNetSalesShimmer()
: _buildNetSalesCard(state),
),
),
),
// 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(
context.lang.daily_breakdown,
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: AppColor.textPrimary,
),
// Produk Terlaris
SliverToBoxAdapter(
child: FadeTransition(
opacity: _fadeAnimation,
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 16),
child:
BlocBuilder<
ProductAnalyticLoaderBloc,
ProductAnalyticLoaderState
>(
builder: (context, productState) {
return SalesTopProductsCard(
productAnalytic: productState.productAnalytic,
isFetching: productState.isFetching,
);
},
),
),
),
),
),
// Daily Sales List
state.isFetching
? _buildDailySalesShimmer()
: _buildDailySalesList(state),
// Bottom Padding
const SliverToBoxAdapter(child: SpaceHeight(32)),
],
);
},
),
),
);
}
Widget _buildSummaryShimmer() {
return Column(
children: [
Row(
children: [
Expanded(child: _buildSummaryCardShimmer()),
SpaceWidth(12),
Expanded(child: _buildSummaryCardShimmer()),
],
),
const SpaceHeight(12),
Row(
children: [
Expanded(child: _buildSummaryCardShimmer()),
SpaceWidth(12),
Expanded(child: _buildSummaryCardShimmer()),
],
),
],
);
}
Widget _buildSummaryCardShimmer() {
return Shimmer.fromColors(
baseColor: Colors.grey[300]!,
highlightColor: Colors.grey[100]!,
child: Container(
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(12),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Container(
width: 24,
height: 24,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(6),
),
),
SpaceWidth(8),
Container(
width: 60,
height: 14,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(4),
),
),
],
),
const SpaceHeight(8),
Container(
width: double.infinity,
height: 20,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(4),
),
),
],
),
),
);
}
Widget _buildNetSalesShimmer() {
return Container(
margin: const EdgeInsets.all(16),
child: Shimmer.fromColors(
baseColor: Colors.grey[300]!,
highlightColor: Colors.grey[100]!,
child: Container(
padding: const EdgeInsets.all(20),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(16),
),
child: Row(
children: [
Container(
width: 52,
height: 52,
decoration: BoxDecoration(
color: Colors.grey[400],
borderRadius: BorderRadius.circular(12),
),
),
SpaceWidth(16),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
width: 80,
height: 14,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(4),
),
),
const SpaceHeight(8),
Container(
width: 150,
height: 24,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(4),
),
),
],
),
),
// Bottom Padding
const SliverToBoxAdapter(child: SpaceHeight(32)),
],
),
),
),
);
}
Widget _buildDailySalesShimmer() {
return SliverList(
delegate: SliverChildBuilderDelegate(
(context, index) {
return Container(
margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 6),
child: Shimmer.fromColors(
baseColor: Colors.grey[300]!,
highlightColor: Colors.grey[100]!,
child: Container(
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(12),
),
child: Row(
children: [
Container(
width: 40,
height: 40,
decoration: BoxDecoration(
color: Colors.grey[400],
borderRadius: BorderRadius.circular(10),
),
),
SpaceWidth(12),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
width: 100,
height: 16,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(4),
),
),
const SpaceHeight(4),
Container(
width: 80,
height: 14,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(4),
),
),
],
),
),
Container(
width: 60,
height: 24,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(12),
),
),
],
),
),
),
);
},
childCount: 8, // Show 8 shimmer items while loading
),
);
}
Widget _buildSummaryCards(SalesLoaderState state) {
return Column(
children: [
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(
context.lang.total_sales,
state.sales.summary.totalSales.currencyFormatRp,
Icons.trending_up,
AppColor.success,
0,
),
),
SpaceWidth(12),
Expanded(
child: _buildSummaryCard(
context.lang.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(
context.lang.average_price,
state.sales.summary.averageOrderValue
.round()
.currencyFormatRp,
Icons.attach_money,
AppColor.warning,
200,
),
),
SpaceWidth(12),
Expanded(
child: _buildSummaryCard(
context.lang.total_items,
state.sales.summary.totalItems.toString(),
Icons.inventory,
AppColor.primary,
300,
),
),
],
),
);
},
),
],
);
}
Widget _buildNetSalesCard(SalesLoaderState state) {
return 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(
context.lang.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,
),
);
},
),
],
),
),
],
),
),
);
},
);
}
Widget _buildDailySalesList(SalesLoaderState state) {
return SliverList(
delegate: SliverChildBuilderDelegate((context, index) {
// Calculate intervals ensuring they don't exceed 1.0
final slideStart = math.min(0.2 + (index * 0.05), 0.7);
final slideEnd = math.min(slideStart + 0.3, 1.0);
final fadeStart = math.min(0.3 + (index * 0.05), 0.8);
final fadeEnd = math.min(fadeStart + 0.2, 1.0);
return SlideTransition(
position:
Tween<Offset>(
begin: Offset(index.isEven ? -1.0 : 1.0, 0),
end: Offset.zero,
).animate(
CurvedAnimation(
parent: slideAnimationController,
curve: Interval(
slideStart,
slideEnd,
curve: Curves.easeOutBack,
),
),
),
child: FadeTransition(
opacity: Tween<double>(begin: 0.0, end: 1.0).animate(
CurvedAnimation(
parent: fadeAnimationController,
curve: Interval(fadeStart, fadeEnd, 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(state.sales.data[index]),
),
),
);
}, childCount: state.sales.data.length),
);
}
Widget _buildSummaryCard(
String title,
String value,
IconData icon,
Color color,
int delay,
void _onDateRangeChanged(
BuildContext context,
DateTime startDate,
DateTime endDate,
) {
return SalesSummaryCard(
fadeAnimation: fadeAnimation,
title: title,
value: value,
icon: icon,
color: color,
delay: delay,
);
}
// Update sales
context.read<SalesLoaderBloc>()
..add(SalesLoaderEvent.rangeDateChanged(startDate, endDate))
..add(SalesLoaderEvent.fectched());
Widget _buildDailySalesItem(SalesAnalyticData dailySale) {
return ExpansionTile(
leading: Container(
padding: const EdgeInsets.all(10),
decoration: BoxDecoration(
color: AppColor.primary.withOpacity(0.1),
borderRadius: BorderRadius.circular(10),
),
child: Icon(Icons.calendar_today, color: AppColor.primary, size: 20),
),
title: Text(
'${dailySale.date.day}/${dailySale.date.month}/${dailySale.date.year}',
style: const TextStyle(
fontWeight: FontWeight.bold,
color: AppColor.textPrimary,
),
),
subtitle: Text(
dailySale.sales.currencyFormatRp,
style: TextStyle(
color: AppColor.success,
fontWeight: FontWeight.w600,
fontSize: 16,
),
),
trailing: Container(
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
decoration: BoxDecoration(
color: AppColor.info.withOpacity(0.1),
borderRadius: BorderRadius.circular(20),
),
child: Text(
'${dailySale.orders} ${context.lang.orders}',
style: TextStyle(
color: AppColor.info,
fontWeight: FontWeight.w500,
fontSize: 12,
),
),
),
children: [
Padding(
padding: const EdgeInsets.all(16),
child: Row(
children: [
Expanded(
child: _buildDetailItem(
context.lang.items,
'${dailySale.items}',
Icons.inventory_2,
),
),
Expanded(
child: _buildDetailItem(
context.lang.tax,
dailySale.tax.currencyFormatRp,
Icons.receipt,
),
),
Expanded(
child: _buildDetailItem(
context.lang.discount,
dailySale.discount.currencyFormatRp,
Icons.local_offer,
),
),
],
),
),
],
);
}
// Update payment method
context.read<PaymentMethodAnalyticLoaderBloc>()
..add(
PaymentMethodAnalyticLoaderEvent.rangeDateChanged(startDate, endDate),
)
..add(const PaymentMethodAnalyticLoaderEvent.fetched());
Widget _buildDetailItem(String label, String value, IconData icon) {
return TweenAnimationBuilder<double>(
tween: Tween(begin: 0.0, end: 1.0),
duration: const Duration(milliseconds: 600),
curve: Curves.bounceOut,
builder: (context, animValue, child) {
return Transform.scale(
scale: animValue,
child: Column(
children: [
TweenAnimationBuilder<double>(
tween: Tween(begin: 0.0, end: 1.0),
duration: const Duration(milliseconds: 800),
curve: Curves.elasticOut,
builder: (context, iconValue, child) {
return Transform.rotate(
angle: iconValue * 0.1,
child: Icon(icon, color: AppColor.textSecondary, size: 20),
);
},
),
const SpaceHeight(4),
Text(
label,
style: TextStyle(color: AppColor.textSecondary, fontSize: 12),
),
const SpaceHeight(2),
AnimatedBuilder(
animation: fadeAnimation,
builder: (context, child) {
return Text(
value,
style: TextStyle(
color: AppColor.textPrimary,
fontWeight: FontWeight.w600,
fontSize: 14,
),
);
},
),
],
),
);
},
);
// Update category
context.read<CategoryAnalyticLoaderBloc>()
..add(CategoryAnalyticLoaderEvent.rangeDateChanged(startDate, endDate))
..add(const CategoryAnalyticLoaderEvent.fetched());
// Update product
context.read<ProductAnalyticLoaderBloc>()
..add(ProductAnalyticLoaderEvent.rangeDateChanged(startDate, endDate))
..add(const ProductAnalyticLoaderEvent.fetched());
}
}
lib/presentation/pages/sales/widgets/product_detail_bottom_sheet.dart
+227
View File
@@ -0,0 +1,227 @@
import 'package:flutter/material.dart';
import '../../../../common/extension/extension.dart';
import '../../../../common/theme/theme.dart';
import '../../../../domain/analytic/analytic.dart';
import '../../../components/spacer/spacer.dart';
class ProductDetailBottomSheet {
static void show({
required BuildContext context,
required ProductAnalyticData product,
required int totalRevenue,
}) {
showModalBottomSheet(
context: context,
isScrollControlled: true,
backgroundColor: Colors.transparent,
barrierColor: Colors.transparent,
builder: (context) =>
_ProductDetailContent(product: product, totalRevenue: totalRevenue),
);
}
}
class _ProductDetailContent extends StatelessWidget {
final ProductAnalyticData product;
final int totalRevenue;
const _ProductDetailContent({
required this.product,
required this.totalRevenue,
});
@override
Widget build(BuildContext context) {
final contribution = totalRevenue > 0
? (product.revenue / totalRevenue * 100)
: 0.0;
final hppPercentage = product.revenue > 0
? (product.standardHppTotal / product.revenue * 100)
: 0.0;
final marginStatus = _getMarginStatus(hppPercentage);
return Container(
constraints: BoxConstraints(
maxHeight: MediaQuery.of(context).size.height * 0.6,
),
decoration: const BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(24),
topRight: Radius.circular(24),
),
),
child: SingleChildScrollView(
padding: const EdgeInsets.all(24),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
// Drag handle
Center(
child: Container(
width: 40,
height: 4,
margin: const EdgeInsets.only(bottom: 20),
decoration: BoxDecoration(
color: Colors.grey.shade300,
borderRadius: BorderRadius.circular(2),
),
),
),
// Product name
Text(
product.productName.toUpperCase(),
style: AppStyle.xl.copyWith(
fontWeight: FontWeight.bold,
color: AppColor.textPrimary,
fontSize: 20,
),
),
const SpaceHeight(4),
// Category
Text(
product.categoryName,
style: AppStyle.md.copyWith(
color: AppColor.primary,
fontWeight: FontWeight.w600,
fontSize: 14,
),
),
const SpaceHeight(20),
// Details
_buildRow(context, 'Kategori', product.categoryName),
_buildDivider(),
_buildRow(
context,
'Qty ${context.lang.sold.toLowerCase()}',
'${product.quantitySold} porsi',
),
_buildDivider(),
_buildRow(
context,
context.lang.revenue,
product.revenue.currencyFormatRp,
),
_buildDivider(),
_buildRow(
context,
'Kontribusi omzet',
'${contribution.toStringAsFixed(1)}%',
),
_buildDivider(),
_buildRow(
context,
'% ${context.lang.hpp} (real)',
'${hppPercentage.toStringAsFixed(1)}%',
),
_buildDivider(),
_buildRowWithBadge(
context,
'Status margin',
marginStatus.label,
marginStatus.color,
),
const SpaceHeight(16),
],
),
),
);
}
Widget _buildRow(BuildContext context, String label, String value) {
return Padding(
padding: const EdgeInsets.symmetric(vertical: 14),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
label,
style: AppStyle.md.copyWith(
color: AppColor.textSecondary,
fontWeight: FontWeight.w500,
fontSize: 14,
),
),
Text(
value,
style: AppStyle.md.copyWith(
color: AppColor.textPrimary,
fontWeight: FontWeight.w700,
fontSize: 14,
),
),
],
),
);
}
Widget _buildRowWithBadge(
BuildContext context,
String label,
String badgeText,
Color badgeColor,
) {
return Padding(
padding: const EdgeInsets.symmetric(vertical: 14),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
label,
style: AppStyle.md.copyWith(
color: AppColor.textSecondary,
fontWeight: FontWeight.w500,
fontSize: 14,
),
),
Container(
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 4),
decoration: BoxDecoration(
color: badgeColor.withOpacity(0.15),
borderRadius: BorderRadius.circular(12),
),
child: Text(
badgeText,
style: AppStyle.sm.copyWith(
color: badgeColor,
fontWeight: FontWeight.w700,
fontSize: 12,
),
),
),
],
),
);
}
Widget _buildDivider() {
return Divider(
height: 1,
thickness: 0.5,
color: AppColor.border.withOpacity(0.5),
);
}
_MarginStatus _getMarginStatus(double hppPercentage) {
if (hppPercentage <= 50) {
return _MarginStatus('Sehat', AppColor.success);
} else {
return _MarginStatus('Tidak sehat', AppColor.error);
}
}
}
class _MarginStatus {
final String label;
final Color color;
_MarginStatus(this.label, this.color);
}
lib/presentation/pages/sales/widgets/sales_category_card.dart
+274
View File
@@ -0,0 +1,274 @@
import 'package:flutter/material.dart';
import 'package:shimmer/shimmer.dart';
import '../../../../common/extension/extension.dart';
import '../../../../common/theme/theme.dart';
import '../../../../domain/analytic/analytic.dart';
import '../../../components/spacer/spacer.dart';
class SalesCategoryCard extends StatelessWidget {
final CategoryAnalytic categoryAnalytic;
final bool isFetching;
const SalesCategoryCard({
super.key,
required this.categoryAnalytic,
required this.isFetching,
});
@override
Widget build(BuildContext context) {
if (isFetching) return _buildShimmer();
final data = categoryAnalytic.data;
final totalItems = data.fold<int>(0, (sum, e) => sum + e.totalQuantity);
final totalRevenue = data.fold<int>(0, (sum, e) => sum + e.totalRevenue);
return Container(
padding: const EdgeInsets.all(20),
decoration: BoxDecoration(
color: AppColor.surface,
borderRadius: BorderRadius.circular(16),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.04),
blurRadius: 10,
offset: const Offset(0, 2),
),
],
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Title row
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
context.lang.sales_category,
style: AppStyle.xl.copyWith(
fontWeight: FontWeight.bold,
color: AppColor.textPrimary,
fontSize: 18,
),
),
Text(
'$totalItems ${context.lang.item.toLowerCase()}',
style: AppStyle.sm.copyWith(
color: AppColor.textSecondary,
fontWeight: FontWeight.w500,
fontSize: 13,
),
),
],
),
const SpaceHeight(16),
// Category items
if (data.isEmpty)
Center(
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 20),
child: Text(
context.lang.category_no_data,
style: AppStyle.md.copyWith(color: AppColor.textSecondary),
),
),
)
else
...data.asMap().entries.map((entry) {
final index = entry.key;
final item = entry.value;
final percentage = totalRevenue > 0
? (item.totalRevenue / totalRevenue * 100)
: 0.0;
return Column(
children: [
_buildCategoryItem(item, percentage, index),
if (index < data.length - 1) const SpaceHeight(16),
],
);
}),
],
),
);
}
Widget _buildCategoryItem(
CategoryAnalyticItem item,
double percentage,
int index,
) {
final colors = [
AppColor.primary,
const Color(0xFF00BCD4),
const Color(0xFFFF9800),
const Color(0xFF9E9E9E),
AppColor.success,
AppColor.info,
];
final color = colors[index % colors.length];
return Column(
children: [
// Name + count + amount + percentage
Row(
children: [
Expanded(
child: Row(
children: [
Flexible(
child: Text(
item.categoryName,
style: AppStyle.md.copyWith(
color: AppColor.textPrimary,
fontWeight: FontWeight.w600,
fontSize: 14,
),
overflow: TextOverflow.ellipsis,
),
),
const SpaceWidth(8),
Container(
padding: const EdgeInsets.symmetric(
horizontal: 8,
vertical: 2,
),
decoration: BoxDecoration(
color: AppColor.textSecondary.withOpacity(0.1),
borderRadius: BorderRadius.circular(10),
),
child: Text(
'${item.totalQuantity}x',
style: AppStyle.xs.copyWith(
color: AppColor.textSecondary,
fontWeight: FontWeight.w600,
fontSize: 12,
),
),
),
],
),
),
Text(
item.totalRevenue.currencyFormatRp,
style: AppStyle.md.copyWith(
color: AppColor.textPrimary,
fontWeight: FontWeight.w600,
fontSize: 14,
),
),
const SpaceWidth(6),
Text(
'${percentage.toStringAsFixed(1)}%',
style: AppStyle.xs.copyWith(
color: AppColor.textSecondary,
fontWeight: FontWeight.w500,
fontSize: 12,
),
),
],
),
const SpaceHeight(8),
// Progress bar
ClipRRect(
borderRadius: BorderRadius.circular(4),
child: LinearProgressIndicator(
value: percentage / 100,
minHeight: 6,
backgroundColor: AppColor.border.withOpacity(0.3),
valueColor: AlwaysStoppedAnimation<Color>(color),
),
),
],
);
}
Widget _buildShimmer() {
return Container(
padding: const EdgeInsets.all(20),
decoration: BoxDecoration(
color: AppColor.surface,
borderRadius: BorderRadius.circular(16),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.04),
blurRadius: 10,
offset: const Offset(0, 2),
),
],
),
child: Shimmer.fromColors(
baseColor: Colors.grey[300]!,
highlightColor: Colors.grey[100]!,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
width: 160,
height: 20,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(4),
),
),
Container(
width: 60,
height: 14,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(4),
),
),
],
),
const SpaceHeight(20),
...List.generate(
4,
(index) => Padding(
padding: const EdgeInsets.only(bottom: 16),
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
width: 120,
height: 14,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(4),
),
),
Container(
width: 90,
height: 14,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(4),
),
),
],
),
const SpaceHeight(8),
Container(
width: double.infinity,
height: 6,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(4),
),
),
],
),
),
),
],
),
),
);
}
}
lib/presentation/pages/sales/widgets/sales_header.dart
+315
View File
@@ -0,0 +1,315 @@
import 'package:auto_route/auto_route.dart';
import 'package:flutter/material.dart';
import 'package:shimmer/shimmer.dart';
import '../../../../application/analytic/sales_loader/sales_loader_bloc.dart';
import '../../../../common/extension/extension.dart';
import '../../../../common/painter/wave_painter.dart';
import '../../../../common/theme/theme.dart';
import '../../../components/bottom_sheet/date_range_bottom_sheet.dart';
import '../../../components/spacer/spacer.dart';
class SalesHeader extends StatelessWidget {
final SalesLoaderState state;
final void Function(DateTime startDate, DateTime endDate)? onDateRangeChanged;
const SalesHeader({super.key, required this.state, this.onDateRangeChanged});
@override
Widget build(BuildContext context) {
final dateLabel = _formatDateRange(state.dateFrom, state.dateTo, context);
final outletLabel = state.sales.outletName.isNotEmpty
? state.sales.outletName
: 'Semua Outlet';
return Container(
decoration: const BoxDecoration(
gradient: LinearGradient(
colors: AppColor.primaryGradient,
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
),
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(24),
bottomRight: Radius.circular(24),
),
),
child: Stack(
children: [
// Decorative circles
Positioned(
top: -20,
right: -30,
child: Container(
width: 120,
height: 120,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: AppColor.textWhite.withOpacity(0.08),
),
),
),
Positioned(
top: 30,
right: 20,
child: Container(
width: 60,
height: 60,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: AppColor.textWhite.withOpacity(0.05),
),
),
),
Positioned(
top: 10,
left: -20,
child: Container(
width: 80,
height: 80,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: AppColor.textWhite.withOpacity(0.04),
),
),
),
// Wave pattern
Positioned.fill(
child: CustomPaint(
painter: WavePainter(
animation: 0.0,
color: AppColor.textWhite.withOpacity(0.1),
),
),
),
// Content
SafeArea(
bottom: false,
child: Padding(
padding: const EdgeInsets.fromLTRB(16, 12, 16, 24),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Back button + Title row + Calendar button
Row(
children: [
GestureDetector(
onTap: () => context.router.maybePop(),
child: Container(
width: 40,
height: 40,
decoration: BoxDecoration(
color: AppColor.textWhite.withOpacity(0.15),
borderRadius: BorderRadius.circular(12),
),
child: const Icon(
Icons.chevron_left_rounded,
color: AppColor.textWhite,
size: 24,
),
),
),
const SpaceWidth(12),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
context.lang.sales,
style: AppStyle.xl.copyWith(
color: AppColor.textWhite,
fontWeight: FontWeight.w700,
fontSize: 20,
),
),
const SizedBox(height: 2),
Text(
'$dateLabel · $outletLabel',
style: AppStyle.sm.copyWith(
color: AppColor.textWhite.withOpacity(0.75),
fontWeight: FontWeight.w400,
fontSize: 12,
),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
],
),
),
const SpaceWidth(8),
// Date filter button
GestureDetector(
onTap: () => _showDatePicker(context),
child: Container(
width: 40,
height: 40,
decoration: BoxDecoration(
color: AppColor.textWhite.withOpacity(0.15),
borderRadius: BorderRadius.circular(12),
),
child: const Icon(
Icons.calendar_month_rounded,
color: AppColor.textWhite,
size: 20,
),
),
),
],
),
const SpaceHeight(24),
// Total Penjualan label
Text(
context.lang.total_sales_label,
style: AppStyle.sm.copyWith(
color: AppColor.textWhite.withOpacity(0.75),
fontWeight: FontWeight.w400,
fontSize: 13,
),
),
const SpaceHeight(4),
// Big value
state.isFetching
? _buildHeaderValueShimmer()
: Text(
state.sales.summary.totalSales.currencyFormatRp,
style: AppStyle.h1.copyWith(
color: AppColor.textWhite,
fontWeight: FontWeight.w900,
fontSize: 32,
),
),
const SpaceHeight(16),
// Chips row
state.isFetching
? _buildHeaderChipsShimmer()
: _buildHeaderChips(context),
],
),
),
),
],
),
);
}
void _showDatePicker(BuildContext context) {
DateRangePickerBottomSheet.show(
context: context,
primaryColor: AppColor.primary,
initialStartDate: state.dateFrom,
initialEndDate: state.dateTo,
maxDate: DateTime.now(),
onChanged: (startDate, endDate) {
if (startDate != null && endDate != null) {
onDateRangeChanged?.call(startDate, endDate);
}
},
);
}
Widget _buildHeaderValueShimmer() {
return Shimmer.fromColors(
baseColor: AppColor.textWhite.withOpacity(0.3),
highlightColor: AppColor.textWhite.withOpacity(0.6),
child: Container(
width: 200,
height: 36,
decoration: BoxDecoration(
color: AppColor.textWhite.withOpacity(0.3),
borderRadius: BorderRadius.circular(8),
),
),
);
}
Widget _buildHeaderChipsShimmer() {
return Row(
children: List.generate(
3,
(index) => Padding(
padding: const EdgeInsets.only(right: 8),
child: Shimmer.fromColors(
baseColor: AppColor.textWhite.withOpacity(0.15),
highlightColor: AppColor.textWhite.withOpacity(0.3),
child: Container(
width: 90,
height: 32,
decoration: BoxDecoration(
color: AppColor.textWhite.withOpacity(0.15),
borderRadius: BorderRadius.circular(20),
),
),
),
),
),
);
}
Widget _buildHeaderChips(BuildContext context) {
final summary = state.sales.summary;
final avgPerInvoice = summary.totalOrders > 0
? (summary.totalSales / summary.totalOrders).round()
: 0;
return Wrap(
spacing: 8,
runSpacing: 8,
children: [
_buildChip('${summary.totalOrders} invoice'),
_buildChip(
'${summary.totalItems} ${context.lang.items_sold.toLowerCase()}',
),
_buildChip('≈ ${avgPerInvoice.currencyFormatRp}/invoice'),
],
);
}
Widget _buildChip(String label) {
return Container(
padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 8),
decoration: BoxDecoration(
color: AppColor.textWhite.withOpacity(0.15),
borderRadius: BorderRadius.circular(20),
border: Border.all(color: AppColor.textWhite.withOpacity(0.25)),
),
child: Text(
label,
style: AppStyle.sm.copyWith(
color: AppColor.textWhite,
fontWeight: FontWeight.w600,
fontSize: 12,
),
),
);
}
String _formatDateRange(DateTime from, DateTime to, BuildContext context) {
const months = [
'Jan',
'Feb',
'Mar',
'Apr',
'Mei',
'Jun',
'Jul',
'Agu',
'Sep',
'Okt',
'Nov',
'Des',
];
if (from.year == to.year && from.month == to.month && from.day == to.day) {
return '${context.lang.report} ${from.day} ${months[from.month - 1]} ${from.year}';
}
return '${context.lang.report} ${from.day} ${months[from.month - 1]} - ${to.day} ${months[to.month - 1]} ${to.year}';
}
}
lib/presentation/pages/sales/widgets/sales_payment_method_card.dart
+265
View File
@@ -0,0 +1,265 @@
import 'package:flutter/material.dart';
import 'package:shimmer/shimmer.dart';
import '../../../../common/extension/extension.dart';
import '../../../../common/theme/theme.dart';
import '../../../../domain/analytic/analytic.dart';
import '../../../components/spacer/spacer.dart';
class SalesPaymentMethodCard extends StatelessWidget {
final PaymentMethodAnalytic paymentMethodAnalytic;
final bool isFetching;
const SalesPaymentMethodCard({
super.key,
required this.paymentMethodAnalytic,
required this.isFetching,
});
@override
Widget build(BuildContext context) {
if (isFetching) return _buildShimmer();
final data = paymentMethodAnalytic.data;
final totalTransactions = paymentMethodAnalytic.summary.totalOrders;
return Container(
padding: const EdgeInsets.all(20),
decoration: BoxDecoration(
color: AppColor.surface,
borderRadius: BorderRadius.circular(16),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.04),
blurRadius: 10,
offset: const Offset(0, 2),
),
],
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Title row
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
context.lang.payment_methods,
style: AppStyle.xl.copyWith(
fontWeight: FontWeight.bold,
color: AppColor.textPrimary,
fontSize: 18,
),
),
Text(
'$totalTransactions ${context.lang.transactions.toLowerCase()}',
style: AppStyle.sm.copyWith(
color: AppColor.textSecondary,
fontWeight: FontWeight.w500,
fontSize: 13,
),
),
],
),
const SpaceHeight(16),
// Payment method items
if (data.isEmpty)
Center(
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 20),
child: Text(
context.lang.no_data_available,
style: AppStyle.md.copyWith(color: AppColor.textSecondary),
),
),
)
else
...data.asMap().entries.map((entry) {
final index = entry.key;
final item = entry.value;
return Column(
children: [
_buildPaymentMethodItem(item, index),
if (index < data.length - 1) const SpaceHeight(16),
],
);
}),
],
),
);
}
Widget _buildPaymentMethodItem(PaymentMethodItem item, int index) {
final colors = [
AppColor.primary,
const Color(0xFF00BCD4),
const Color(0xFFFF9800),
AppColor.success,
AppColor.info,
];
final color = colors[index % colors.length];
return Column(
children: [
// Name + count + amount + percentage
Row(
children: [
// Name
Expanded(
child: Row(
children: [
Text(
item.paymentMethodName,
style: AppStyle.md.copyWith(
color: AppColor.textPrimary,
fontWeight: FontWeight.w600,
fontSize: 14,
),
),
const SpaceWidth(8),
Container(
padding: const EdgeInsets.symmetric(
horizontal: 8,
vertical: 2,
),
decoration: BoxDecoration(
color: AppColor.textSecondary.withOpacity(0.1),
borderRadius: BorderRadius.circular(10),
),
child: Text(
'${item.paymentCount}x',
style: AppStyle.xs.copyWith(
color: AppColor.textSecondary,
fontWeight: FontWeight.w600,
fontSize: 12,
),
),
),
],
),
),
// Amount
Text(
item.totalAmount.toInt().currencyFormatRp,
style: AppStyle.md.copyWith(
color: AppColor.textPrimary,
fontWeight: FontWeight.w600,
fontSize: 14,
),
),
const SpaceWidth(6),
// Percentage
Text(
'${item.percentage.toStringAsFixed(1)}%',
style: AppStyle.xs.copyWith(
color: AppColor.textSecondary,
fontWeight: FontWeight.w500,
fontSize: 12,
),
),
],
),
const SpaceHeight(8),
// Progress bar
ClipRRect(
borderRadius: BorderRadius.circular(4),
child: LinearProgressIndicator(
value: item.percentage / 100,
minHeight: 6,
backgroundColor: AppColor.border.withOpacity(0.3),
valueColor: AlwaysStoppedAnimation<Color>(color),
),
),
],
);
}
Widget _buildShimmer() {
return Container(
padding: const EdgeInsets.all(20),
decoration: BoxDecoration(
color: AppColor.surface,
borderRadius: BorderRadius.circular(16),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.04),
blurRadius: 10,
offset: const Offset(0, 2),
),
],
),
child: Shimmer.fromColors(
baseColor: Colors.grey[300]!,
highlightColor: Colors.grey[100]!,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
width: 150,
height: 20,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(4),
),
),
Container(
width: 80,
height: 14,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(4),
),
),
],
),
const SpaceHeight(20),
...List.generate(
3,
(index) => Padding(
padding: const EdgeInsets.only(bottom: 16),
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
width: 120,
height: 14,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(4),
),
),
Container(
width: 90,
height: 14,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(4),
),
),
],
),
const SpaceHeight(8),
Container(
width: double.infinity,
height: 6,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(4),
),
),
],
),
),
),
],
),
),
);
}
}
lib/presentation/pages/sales/widgets/sales_rincian_card.dart
+165
View File
@@ -0,0 +1,165 @@
import 'package:flutter/material.dart';
import 'package:shimmer/shimmer.dart';
import '../../../../application/analytic/sales_loader/sales_loader_bloc.dart';
import '../../../../common/extension/extension.dart';
import '../../../../common/theme/theme.dart';
import '../../../components/spacer/spacer.dart';
class SalesRincianCard extends StatelessWidget {
final SalesLoaderState state;
const SalesRincianCard({super.key, required this.state});
@override
Widget build(BuildContext context) {
if (state.isFetching) return _buildShimmer();
final summary = state.sales.summary;
return Container(
padding: const EdgeInsets.all(20),
decoration: BoxDecoration(
color: AppColor.surface,
borderRadius: BorderRadius.circular(16),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.04),
blurRadius: 10,
offset: const Offset(0, 2),
),
],
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
context.lang.daily_breakdown,
style: AppStyle.xl.copyWith(
fontWeight: FontWeight.bold,
color: AppColor.textPrimary,
fontSize: 18,
),
),
const SpaceHeight(16),
_buildRow(
context.lang.gross_sales,
summary.totalSales.currencyFormatRp,
),
_buildDivider(),
_buildRow(
context.lang.discount,
summary.totalDiscount.currencyFormatRp,
),
_buildDivider(),
_buildRow(context.lang.tax, summary.totalTax.currencyFormatRp),
_buildDivider(),
_buildRow('Biaya layanan', 0.currencyFormatRp),
_buildDivider(),
_buildRow(
context.lang.net_sales,
summary.netSales.currencyFormatRp,
isBold: true,
),
],
),
);
}
Widget _buildRow(String label, String value, {bool isBold = false}) {
return Padding(
padding: const EdgeInsets.symmetric(vertical: 14),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
label,
style: AppStyle.md.copyWith(
color: isBold ? AppColor.textPrimary : AppColor.textSecondary,
fontWeight: isBold ? FontWeight.w700 : FontWeight.w500,
fontSize: 14,
),
),
Text(
value,
style: AppStyle.md.copyWith(
color: AppColor.textPrimary,
fontWeight: isBold ? FontWeight.w700 : FontWeight.w600,
fontSize: 14,
),
),
],
),
);
}
Widget _buildDivider() {
return Divider(
height: 1,
thickness: 1,
color: AppColor.border.withOpacity(0.5),
);
}
Widget _buildShimmer() {
return Container(
padding: const EdgeInsets.all(20),
decoration: BoxDecoration(
color: AppColor.surface,
borderRadius: BorderRadius.circular(16),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.04),
blurRadius: 10,
offset: const Offset(0, 2),
),
],
),
child: Shimmer.fromColors(
baseColor: Colors.grey[300]!,
highlightColor: Colors.grey[100]!,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
width: 140,
height: 20,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(4),
),
),
const SpaceHeight(20),
...List.generate(
5,
(index) => Padding(
padding: const EdgeInsets.only(bottom: 16),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
width: 100,
height: 14,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(4),
),
),
Container(
width: 80,
height: 14,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(4),
),
),
],
),
),
),
],
),
),
);
}
}
lib/presentation/pages/sales/widgets/sales_top_products_card.dart
+288
View File
@@ -0,0 +1,288 @@
import 'package:flutter/material.dart';
import 'package:shimmer/shimmer.dart';
import '../../../../common/extension/extension.dart';
import '../../../../common/theme/theme.dart';
import '../../../../domain/analytic/analytic.dart';
import '../../../components/spacer/spacer.dart';
import 'product_detail_bottom_sheet.dart';
class SalesTopProductsCard extends StatelessWidget {
final ProductAnalytic productAnalytic;
final bool isFetching;
const SalesTopProductsCard({
super.key,
required this.productAnalytic,
required this.isFetching,
});
@override
Widget build(BuildContext context) {
if (isFetching) return _buildShimmer();
final data = productAnalytic.data;
return Container(
padding: const EdgeInsets.all(20),
decoration: BoxDecoration(
color: AppColor.surface,
borderRadius: BorderRadius.circular(16),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.04),
blurRadius: 10,
offset: const Offset(0, 2),
),
],
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Title row
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
context.lang.best_selling_products,
style: AppStyle.xl.copyWith(
fontWeight: FontWeight.bold,
color: AppColor.textPrimary,
fontSize: 18,
),
),
Text(
'${data.length} ${context.lang.product.toLowerCase()}',
style: AppStyle.sm.copyWith(
color: AppColor.textSecondary,
fontWeight: FontWeight.w500,
fontSize: 13,
),
),
],
),
const SpaceHeight(16),
// Product list
if (data.isEmpty)
Center(
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 20),
child: Text(
context.lang.no_data_available,
style: AppStyle.md.copyWith(color: AppColor.textSecondary),
),
),
)
else
...data.asMap().entries.map((entry) {
final index = entry.key;
final item = entry.value;
return Column(
children: [
_buildProductItem(context, item, index + 1),
if (index < data.length - 1)
const Divider(height: 1, thickness: 0.5),
],
);
}),
],
),
);
}
Widget _buildProductItem(
BuildContext context,
ProductAnalyticData item,
int rank,
) {
final isTopThree = rank <= 3;
final totalRevenue = productAnalytic.data.fold<int>(
0,
(sum, e) => sum + e.revenue,
);
return GestureDetector(
onTap: () => ProductDetailBottomSheet.show(
context: context,
product: item,
totalRevenue: totalRevenue,
),
behavior: HitTestBehavior.opaque,
child: _buildProductItemContent(context, item, rank, isTopThree),
);
}
Widget _buildProductItemContent(
BuildContext context,
ProductAnalyticData item,
int rank,
bool isTopThree,
) {
return Padding(
padding: const EdgeInsets.symmetric(vertical: 12),
child: Row(
children: [
// Rank badge
Container(
width: 36,
height: 36,
decoration: BoxDecoration(
color: isTopThree
? AppColor.primary.withOpacity(0.1)
: AppColor.textSecondary.withOpacity(0.08),
shape: BoxShape.circle,
),
alignment: Alignment.center,
child: Text(
'$rank',
style: AppStyle.md.copyWith(
color: isTopThree ? AppColor.primary : AppColor.textSecondary,
fontWeight: FontWeight.w700,
fontSize: 14,
),
),
),
const SpaceWidth(12),
// Product name + sold count
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
item.productName.toUpperCase(),
style: AppStyle.md.copyWith(
color: AppColor.textPrimary,
fontWeight: FontWeight.w700,
fontSize: 14,
),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
const SizedBox(height: 2),
Text(
'${item.quantitySold} ${context.lang.sold.toLowerCase()}',
style: AppStyle.sm.copyWith(
color: AppColor.textSecondary,
fontWeight: FontWeight.w400,
fontSize: 12,
),
),
],
),
),
// Revenue
Text(
item.revenue.currencyFormatRp,
style: AppStyle.md.copyWith(
color: AppColor.textPrimary,
fontWeight: FontWeight.w600,
fontSize: 14,
),
),
],
),
);
}
Widget _buildShimmer() {
return Container(
padding: const EdgeInsets.all(20),
decoration: BoxDecoration(
color: AppColor.surface,
borderRadius: BorderRadius.circular(16),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.04),
blurRadius: 10,
offset: const Offset(0, 2),
),
],
),
child: Shimmer.fromColors(
baseColor: Colors.grey[300]!,
highlightColor: Colors.grey[100]!,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
width: 140,
height: 20,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(4),
),
),
Container(
width: 70,
height: 14,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(4),
),
),
],
),
const SpaceHeight(20),
...List.generate(
6,
(index) => Padding(
padding: const EdgeInsets.only(bottom: 16),
child: Row(
children: [
Container(
width: 36,
height: 36,
decoration: const BoxDecoration(
color: Colors.white,
shape: BoxShape.circle,
),
),
const SpaceWidth(12),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
width: 150,
height: 14,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(4),
),
),
const SizedBox(height: 4),
Container(
width: 60,
height: 12,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(4),
),
),
],
),
),
Container(
width: 80,
height: 14,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(4),
),
),
],
),
),
),
],
),
),
);
}
}
lib/presentation/pages/sales/widgets/summary_card.dart
-101
View File
@@ -1,101 +0,0 @@
import 'package:flutter/material.dart';
import '../../../../common/theme/theme.dart';
class SalesSummaryCard extends StatelessWidget {
const SalesSummaryCard({
super.key,
required this.fadeAnimation,
required this.title,
required this.value,
required this.icon,
required this.color,
required this.delay,
});
final Animation<double> fadeAnimation;
final String title;
final String value;
final IconData icon;
final Color color;
final int delay;
@override
Widget build(BuildContext context) {
return TweenAnimationBuilder<double>(
tween: Tween(begin: 0.0, end: 1.0),
duration: Duration(milliseconds: 800 + delay),
curve: Curves.easeOutBack,
builder: (context, animValue, child) {
return Transform.scale(
scale: animValue,
child: Container(
padding: const EdgeInsets.all(16),
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: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
TweenAnimationBuilder<double>(
tween: Tween(begin: 0.0, end: 1.0),
duration: Duration(milliseconds: 1000 + delay),
curve: Curves.bounceOut,
builder: (context, iconValue, child) {
return Transform.scale(
scale: iconValue,
child: Container(
padding: const EdgeInsets.all(8),
decoration: BoxDecoration(
color: color.withOpacity(0.1),
borderRadius: BorderRadius.circular(8),
),
child: Icon(icon, color: color, size: 20),
),
);
},
),
const Spacer(),
],
),
const SizedBox(height: 12),
Text(
title,
style: AppStyle.sm.copyWith(
color: AppColor.textSecondary,
fontSize: 12,
fontWeight: FontWeight.w500,
),
),
const SizedBox(height: 4),
AnimatedBuilder(
animation: fadeAnimation,
builder: (context, child) {
return Text(
value,
style: AppStyle.xl.copyWith(
color: AppColor.textPrimary,
fontSize: 18,
fontWeight: FontWeight.bold,
),
);
},
),
],
),
),
);
},
);
}
}